/* /Common/Components/AbsoluteMaxWarningBanner.razor.rz.scp.css */
.absolute-warning-banner[b-f1fhjk0a7o] {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    z-index: 1100;
    display: flex;
    align-items: center;
    gap: var(--dbv2-space-3);
    padding: var(--dbv2-space-3) var(--dbv2-space-4);
    background: var(--dbv2-warning-lighter);
    color: var(--dbv2-warning-dark);
    font-size: var(--dbv2-font-size-sm);
    font-weight: var(--dbv2-font-weight-medium);
    box-shadow: var(--dbv2-shadow-sm);
}

.banner-icon[b-f1fhjk0a7o] {
    flex-shrink: 0;
    font-size: var(--dbv2-font-size-lg);
    color: var(--dbv2-warning);
}

.banner-message[b-f1fhjk0a7o] {
    flex: 1;
}
/* /Common/Components/AvatarSummaryCard.razor.rz.scp.css */
.avatar-summary[b-twgix6z6ha] {
    padding: var(--dbv2-space-2) 0;
}

.summary-stat[b-twgix6z6ha] {
    display: flex;
    align-items: center;
    gap: var(--dbv2-space-3);
}

.summary-stat-icon[b-twgix6z6ha] {
    font-size: var(--dbv2-icon-size-lg);
    color: var(--dbv2-primary);
    opacity: 0.8;
}

.summary-stat-content[b-twgix6z6ha] {
    display: flex;
    align-items: baseline;
    gap: var(--dbv2-space-1);
}

.summary-stat-value[b-twgix6z6ha] {
    font-size: var(--dbv2-font-size-xl);
    font-weight: var(--dbv2-font-weight-semibold);
    color: var(--dbv2-text-primary);
}

.summary-stat-label[b-twgix6z6ha] {
    font-size: var(--dbv2-font-size-sm);
    color: var(--dbv2-text-secondary);
}

.brand-breakdown[b-twgix6z6ha] {
    display: flex;
    flex-wrap: wrap;
    gap: var(--dbv2-space-1);
    margin-top: var(--dbv2-space-2);
    padding-left: calc(2rem + var(--dbv2-space-3));
}

/* Count emphasis inside the brand chip — not covered by the chip primitive. */
.dbv2-chip strong[b-twgix6z6ha] {
    color: var(--dbv2-text-primary);
    margin-left: var(--dbv2-space-1);
}
/* /Common/Components/ClickableThumbnail.razor.rz.scp.css */
.clickable-thumbnail[b-8zadrn36v7] {
    position: relative;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
    border-radius: var(--dbv2-radius-sm);
    border: 1px solid var(--dbv2-border);
    background: var(--dbv2-canvas);
    flex-shrink: 0;
    transition: box-shadow 0.15s ease, border-color 0.15s ease;
}

.clickable-thumbnail:not(.no-image)[b-8zadrn36v7] {
    cursor: zoom-in;
}

.clickable-thumbnail:not(.no-image):hover[b-8zadrn36v7] {
    border-color: var(--dbv2-primary);
    box-shadow: var(--dbv2-shadow-sm);
}

.clickable-thumbnail:not(.no-image):focus-visible[b-8zadrn36v7] {
    outline: 2px solid var(--dbv2-primary);
    outline-offset: 2px;
}

.clickable-thumbnail img[b-8zadrn36v7] {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

.clickable-thumbnail.faded img[b-8zadrn36v7] {
    opacity: 0.5;
    filter: grayscale(30%);
}

.size-small.aspect-square[b-8zadrn36v7] {
    width: 3rem;
    height: 3rem;
}

.size-medium.aspect-square[b-8zadrn36v7] {
    width: 6rem;
    height: 6rem;
}

.size-large.aspect-square[b-8zadrn36v7] {
    width: 8rem;
    height: 8rem;
}

.size-small.aspect-portrait[b-8zadrn36v7] {
    width: 3rem;
    height: 4rem;
}

.size-medium.aspect-portrait[b-8zadrn36v7] {
    width: 6rem;
    height: 8rem;
}

.size-large.aspect-portrait[b-8zadrn36v7] {
    width: 8rem;
    height: 10.625rem;
}

.placeholder[b-8zadrn36v7] {
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--dbv2-text-tertiary);
    width: 100%;
    height: 100%;
}

.zoom-hint[b-8zadrn36v7] {
    position: absolute;
    bottom: var(--dbv2-space-1);
    right: var(--dbv2-space-1);
    display: flex;
    align-items: center;
    justify-content: center;
    width: var(--dbv2-icon-button-size);
    height: var(--dbv2-icon-button-size);
    border-radius: var(--dbv2-radius-sm);
    background: var(--dbv2-overlay);
    color: var(--dbv2-header-text);
    opacity: 0;
    transition: opacity 0.15s ease;
    pointer-events: none;
}

.clickable-thumbnail:not(.no-image):hover .zoom-hint[b-8zadrn36v7] {
    opacity: 1;
}
/* /Common/Components/CodeInput.razor.rz.scp.css */
.code-input[b-w14ctyvsh0] {
    position: relative;
    width: 100%;
}

.code-input__field[b-w14ctyvsh0] {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    margin: 0;
    padding: 0;
    border: 0;
    background: transparent;
    color: transparent;
    caret-color: transparent;
    font: inherit;
    text-align: center;
    cursor: text;
    z-index: 1;
}

.code-input__field:focus[b-w14ctyvsh0] {
    outline: none;
}

.code-input__field[b-w14ctyvsh0]::selection {
    background: transparent;
}

.code-input--disabled .code-input__field[b-w14ctyvsh0] {
    cursor: not-allowed;
}

.code-input__cells[b-w14ctyvsh0] {
    display: flex;
    gap: var(--dbv2-space-2);
    width: 100%;
}

.code-input__cell[b-w14ctyvsh0] {
    flex: 1 1 0;
    min-width: 0;
    height: 3.5rem;
    display: flex;
    align-items: center;
    justify-content: center;
    font-family: var(--dbv2-font-mono);
    font-size: var(--dbv2-font-size-xl);
    font-weight: var(--dbv2-font-weight-semibold);
    color: var(--dbv2-text-primary);
    background: var(--dbv2-surface);
    border: 1px solid var(--dbv2-border);
    border-radius: var(--dbv2-radius-sm);
    transition:
        border-color var(--dbv2-dur-hover) var(--dbv2-ease-out),
        box-shadow var(--dbv2-dur-hover) var(--dbv2-ease-out),
        background-color var(--dbv2-dur-hover) var(--dbv2-ease-out);
}

.code-input__cell--filled[b-w14ctyvsh0] {
    border-color: var(--dbv2-border-strong);
}

.code-input__cell--active[b-w14ctyvsh0] {
    border-color: var(--dbv2-primary);
    box-shadow: 0 0 0 3px var(--dbv2-primary-lighter);
}

.code-input--disabled .code-input__cell[b-w14ctyvsh0] {
    background: var(--dbv2-muted);
    color: var(--dbv2-text-disabled);
}

.code-input__caret[b-w14ctyvsh0] {
    width: 2px;
    height: 1.6em;
    background: var(--dbv2-primary);
    border-radius: var(--dbv2-radius-full);
    animation: code-input-blink-b-w14ctyvsh0 1.06s steps(1) infinite;
}

@keyframes code-input-blink-b-w14ctyvsh0 {
    0%, 50% { opacity: 1; }
    50.01%, 100% { opacity: 0; }
}

@media (prefers-reduced-motion: reduce) {
    .code-input__caret[b-w14ctyvsh0] {
        animation: none;
    }
}
/* /Common/Components/ConfigList/ConfigList.razor.rz.scp.css */
/* ConfigList — the shared enum-editor surface for the AI-images config sections.

   The root IS the island (cf. QueryableDataGrid's .qdg-surface): it carries the border, radius, warm
   surface background and soft shadow itself, so the component is dropped straight into the page grid
   and never wrapped in a .dbv2-island (which would double the border). `overflow: hidden` clips the
   row hover/separators and footer to the rounded corners — unlike the data grid, this surface has no
   overflowing popovers to worry about. */
.config-list[b-7wpg3o3p62] {
    background: var(--dbv2-surface);
    border: 1px solid var(--dbv2-border-light);
    border-radius: var(--dbv2-radius-lg);
    box-shadow: var(--dbv2-shadow-sm);
    overflow: hidden;
}

/* Header band — fused to the top of the card and divided from the body by a hairline, echoing the
   data grid's qualifier-bar-over-grid seam. */
.config-list-header[b-7wpg3o3p62] {
    padding: var(--dbv2-space-4) var(--dbv2-space-5);
    border-bottom: 1px solid var(--dbv2-border-light);
}

.config-list-title[b-7wpg3o3p62] {
    margin: 0;
    font-size: var(--dbv2-font-size-base);
    font-weight: var(--dbv2-font-weight-semibold);
    color: var(--dbv2-text-primary);
}

.config-list-body[b-7wpg3o3p62] {
    display: flex;
    flex-direction: column;
}

/* Loading / error / empty states — single padded rows, never the row treatment. */
.config-list-state[b-7wpg3o3p62] {
    display: flex;
    align-items: center;
    gap: var(--dbv2-space-2);
    padding: var(--dbv2-space-4) var(--dbv2-space-5);
    font-size: var(--dbv2-font-size-sm);
    color: var(--dbv2-text-secondary);
}

.config-list-error[b-7wpg3o3p62] {
    color: var(--dbv2-error);
}

.config-list-error-icon[b-7wpg3o3p62] {
    font-size: var(--dbv2-icon-size-sm);
}

.config-list-empty[b-7wpg3o3p62] {
    margin: 0;
    padding: var(--dbv2-space-5);
    font-size: var(--dbv2-font-size-sm);
    color: var(--dbv2-text-tertiary);
}

/* Rows — hairline-separated like the data grid's softened cell borders. */
.config-list-row[b-7wpg3o3p62] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--dbv2-space-3);
    padding: var(--dbv2-space-3) var(--dbv2-space-5);
    border-bottom: 1px solid var(--dbv2-border-light);
}

.config-list-row:last-child[b-7wpg3o3p62] {
    border-bottom: none;
}

/* Default row action: a wired, ungated row reads as clickable — pointer + the same tint hover the data
   grid maps onto its clickable rows. Non-clickable rows (e.g. system workflows) keep the default
   cursor and surface a hint in the trailing region instead. */
.config-list-row--clickable[b-7wpg3o3p62] {
    cursor: pointer;
}

.config-list-row--clickable:hover[b-7wpg3o3p62] {
    background: var(--dbv2-primary-tint);
}

.config-list-row--clickable:focus-visible[b-7wpg3o3p62] {
    outline: 0.125rem solid var(--dbv2-primary);
    outline-offset: -0.125rem;
}

.config-list-row-main[b-7wpg3o3p62] {
    min-width: 0;
    flex: 1;
}

.config-list-row-trailing[b-7wpg3o3p62] {
    display: flex;
    align-items: center;
    gap: var(--dbv2-space-3);
    flex-shrink: 0;
}

.config-list-row-hint[b-7wpg3o3p62] {
    display: inline-flex;
    align-items: center;
    gap: var(--dbv2-space-1);
    font-size: var(--dbv2-font-size-xs);
    color: var(--dbv2-text-tertiary);
}

.config-list-row-hint-icon[b-7wpg3o3p62] {
    font-size: var(--dbv2-icon-size-sm);
}

.config-list-row-actions[b-7wpg3o3p62] {
    display: flex;
    align-items: center;
    gap: var(--dbv2-space-1);
}

/* Footer add affordance — the circular "+" seated under the last row, divided by a hairline. Shown
   only when the consumer wires OnAddRequested. */
.config-list-footer[b-7wpg3o3p62] {
    display: flex;
    justify-content: center;
    padding: var(--dbv2-space-3) var(--dbv2-space-5);
    border-top: 1px solid var(--dbv2-border-light);
}

.config-list-add[b-7wpg3o3p62] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 2rem;
    height: 2rem;
    border-radius: var(--dbv2-radius-full);
    border: 1px solid var(--dbv2-border);
    background: var(--dbv2-surface);
    color: var(--dbv2-primary);
    cursor: pointer;
    transition: background 0.15s ease, border-color 0.15s ease;
}

.config-list-add:hover[b-7wpg3o3p62] {
    background: var(--dbv2-primary-tint);
    border-color: var(--dbv2-primary);
}

.config-list-add:focus-visible[b-7wpg3o3p62] {
    outline: 0.125rem solid var(--dbv2-primary);
    outline-offset: 0.125rem;
}
/* /Common/Components/DeliverableStatusCard.razor.rz.scp.css */
/* ==========================================================================
   DeliverableStatusCard — scoped styles
   Uses --dbv2-* design tokens from dbv2-theme.css
   ========================================================================== */

.deliverable-status-card[b-x7ypo2fi9c] {
    display: flex;
    flex-direction: column;
    gap: var(--dbv2-space-4);
    padding: var(--dbv2-space-4);
    border-radius: var(--dbv2-radius-md);
    border: 1px solid var(--dbv2-border);
    background: var(--dbv2-surface);
    transition: border-color 0.2s ease;
}


/* ── Status-specific border colors ──────────────────────────────────────── */

.status-pending[b-x7ypo2fi9c] {
    border-color: var(--dbv2-border);
    opacity: 0.75;
}

.status-processing[b-x7ypo2fi9c] {
    border-color: var(--dbv2-warning);
}

.status-completed[b-x7ypo2fi9c] {
    border-color: var(--dbv2-success);
}

.status-failed[b-x7ypo2fi9c] {
    border-color: var(--dbv2-error);
}


/* ── Card header ────────────────────────────────────────────────────────── */

.card-header[b-x7ypo2fi9c] {
    display: flex;
    align-items: center;
    justify-content: space-between;
}


/* ── Card body ──────────────────────────────────────────────────────────── */

.card-body[b-x7ypo2fi9c] {
    display: flex;
    flex-direction: column;
    gap: var(--dbv2-space-3);
}

.status-message[b-x7ypo2fi9c] {
    font-size: var(--dbv2-font-size-sm);
    color: var(--dbv2-text-tertiary);
    margin: 0;
}


/* ── Processing state ───────────────────────────────────────────────────── */

.processing-content[b-x7ypo2fi9c] {
    display: flex;
    align-items: center;
    gap: var(--dbv2-space-3);
}

.progress-text[b-x7ypo2fi9c] {
    font-size: var(--dbv2-font-size-sm);
    color: var(--dbv2-text-secondary);
}


/* ── Completed state — output image ─────────────────────────────────────── */

.output-image[b-x7ypo2fi9c] {
    border-radius: var(--dbv2-radius-md);
    overflow: hidden;
    background: var(--dbv2-canvas);
    border: 1px solid var(--dbv2-border-light);
}

.output-image img[b-x7ypo2fi9c] {
    display: block;
    width: 100%;
    max-height: 20rem;
    object-fit: contain;
}


/* ── Failed state ───────────────────────────────────────────────────────── */

.error-message[b-x7ypo2fi9c] {
    font-size: var(--dbv2-font-size-sm);
    color: var(--dbv2-error);
    margin: 0;
}


/* ── Retry state ───────────────────────────────────────────────────────── */

.retry-text[b-x7ypo2fi9c] {
    font-size: var(--dbv2-font-size-sm);
    color: var(--dbv2-warning);
}
/* /Common/Components/DeliverableStatusIndicator.razor.rz.scp.css */
/* ==========================================================================
   DeliverableStatusIndicator — compact inline status indicator
   Uses --dbv2-* design tokens from dbv2-theme.css
   ========================================================================== */

.deliverable-status-indicator[b-qqxaqc1tle] {
    display: inline-flex;
    align-items: center;
    gap: var(--dbv2-space-2);
    font-size: var(--dbv2-font-size-sm);
    line-height: 1;
}


/* ── Icon base ─────────────────────────────────────────────────────────── */

.indicator-icon[b-qqxaqc1tle] {
    font-size: var(--dbv2-font-size-base);
}


/* ── Status-specific icon colors ───────────────────────────────────────── */

.icon-queued[b-qqxaqc1tle] {
    color: var(--dbv2-text-tertiary);
    opacity: 0.6;
}

.icon-pending[b-qqxaqc1tle] {
    color: var(--dbv2-info);
}

.icon-completed[b-qqxaqc1tle] {
    color: var(--dbv2-success);
}

.icon-failed[b-qqxaqc1tle] {
    color: var(--dbv2-error);
}

.icon-superseded[b-qqxaqc1tle] {
    color: var(--dbv2-text-tertiary);
}

.icon-dropped[b-qqxaqc1tle] {
    color: var(--dbv2-text-tertiary);
}


/* ── Text styles ───────────────────────────────────────────────────────── */

.indicator-text[b-qqxaqc1tle] {
    color: var(--dbv2-text-secondary);
}

.error-text[b-qqxaqc1tle] {
    color: var(--dbv2-error);
}

.superseded-text[b-qqxaqc1tle] {
    color: var(--dbv2-text-tertiary);
    text-decoration: line-through;
}

/* Dropped reads as abandonment (collateral of a deliberate Reject), not replacement — dimmed and
   tertiary like Superseded, but WITHOUT the line-through that signals "replaced by a successor". */
.dropped-text[b-qqxaqc1tle] {
    color: var(--dbv2-text-tertiary);
}


/* ── Status-specific container styles ──────────────────────────────────── */

.status-queued[b-qqxaqc1tle] {
    opacity: 0.7;
}

.status-superseded[b-qqxaqc1tle] {
    opacity: 0.5;
}

.status-dropped[b-qqxaqc1tle] {
    opacity: 0.5;
}
/* /Common/Components/DeliverableStepDetail.razor.rz.scp.css */
/* ==========================================================================
   DeliverableStepDetail — scoped styles
   Uses --dbv2-* design tokens from dbv2-theme.css
   ========================================================================== */

.step-detail-container[b-uc02oeqwtd] {
    margin-top: var(--dbv2-space-2);
}

.step-toggle[b-uc02oeqwtd] {
    display: inline-flex;
    align-items: center;
    gap: var(--dbv2-space-1);
    background: none;
    border: none;
    padding: 0;
    font-size: var(--dbv2-font-size-xs);
    color: var(--dbv2-text-tertiary);
    cursor: pointer;
    transition: color 0.15s ease;
}

.step-toggle:hover[b-uc02oeqwtd] {
    color: var(--dbv2-text-secondary);
}


/* ── Step list ─────────────────────────────────────────────────────────── */

.step-list[b-uc02oeqwtd] {
    display: flex;
    flex-direction: column;
    gap: var(--dbv2-space-2);
    margin-top: var(--dbv2-space-2);
    padding-left: var(--dbv2-space-3);
    border-left: 0.125rem solid var(--dbv2-border-light);
}

.step-row[b-uc02oeqwtd] {
    display: flex;
    flex-direction: column;
    gap: var(--dbv2-space-1);
    font-size: var(--dbv2-font-size-xs);
    color: var(--dbv2-text-secondary);
}

.step-header[b-uc02oeqwtd] {
    display: flex;
    align-items: center;
    gap: var(--dbv2-space-2);
    flex-wrap: wrap;
}

.step-purpose[b-uc02oeqwtd] {
    font-weight: var(--dbv2-font-weight-medium);
    color: var(--dbv2-text-primary);
}

.step-provider[b-uc02oeqwtd] {
    color: var(--dbv2-text-tertiary);
}

.step-status-badge[b-uc02oeqwtd] {
    font-size: var(--dbv2-font-size-xs);
}


/* ── Status-specific colors ────────────────────────────────────────────── */

.step-completed .step-status-badge[b-uc02oeqwtd] {
    color: var(--dbv2-success);
}

.step-failed .step-status-badge[b-uc02oeqwtd] {
    color: var(--dbv2-error);
}

.step-retry-pending .step-status-badge[b-uc02oeqwtd] {
    color: var(--dbv2-warning);
}

.step-processing .step-status-badge[b-uc02oeqwtd] {
    color: var(--dbv2-info);
}

.step-retry[b-uc02oeqwtd] {
    color: var(--dbv2-warning);
    font-size: var(--dbv2-font-size-xs);
}

.step-error[b-uc02oeqwtd] {
    color: var(--dbv2-error);
    font-size: var(--dbv2-font-size-xs);
}
/* /Common/Components/DragReorderList.razor.rz.scp.css */
.drag-reorder-list[b-ui61vtudln] {
    display: flex;
    flex-direction: column;
    gap: var(--dbv2-space-2);
}

.drag-reorder-item[b-ui61vtudln] {
    display: flex;
    align-items: flex-start;
    gap: var(--dbv2-space-3);
    padding: var(--dbv2-space-3);
    border-radius: var(--dbv2-radius-sm);
    border: 1px solid var(--dbv2-border);
    background: var(--dbv2-surface);
    cursor: grab;
    user-select: none;
    position: relative;
    transition: box-shadow 0.15s, border-color 0.15s, opacity 0.15s;
}

.drag-reorder-item:hover[b-ui61vtudln] {
    border-color: var(--dbv2-border-strong);
    box-shadow: var(--dbv2-shadow-sm);
}

/* Dragged item — fades and lifts */
.item-dragging[b-ui61vtudln] {
    opacity: 0.4;
    box-shadow: var(--dbv2-shadow-md);
    cursor: grabbing;
}

/* Drop insertion indicator — terracotta line above the hovered target */
.drag-reorder-item:not(.item-dragging) + .drag-reorder-item:not(.item-dragging)[b-ui61vtudln],
.drag-reorder-item:not(.item-dragging)[b-ui61vtudln] {
    /* Base state: no indicator */
}

/* Drag handle */
.drag-handle[b-ui61vtudln] {
    color: var(--dbv2-text-tertiary);
    cursor: grab;
    flex-shrink: 0;
    padding-top: var(--dbv2-space-1);
}

.item-dragging .drag-handle[b-ui61vtudln] {
    cursor: grabbing;
}

/* Content fills remaining space */
.drag-reorder-content[b-ui61vtudln] {
    flex: 1;
    min-width: 0;
}

/* Disabled state — no drag affordance */
.drag-reorder-item[draggable="false"][b-ui61vtudln] {
    cursor: default;
}

.drag-reorder-item[draggable="false"]:hover[b-ui61vtudln] {
    border-color: var(--dbv2-border);
    box-shadow: none;
}
/* /Common/Components/IdleWarningBanner.razor.rz.scp.css */
.idle-warning-banner[b-scj5dwqeo7] {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    z-index: 1100;
    display: flex;
    align-items: center;
    gap: var(--dbv2-space-3);
    padding: var(--dbv2-space-3) var(--dbv2-space-4);
    background: var(--dbv2-warning-lighter);
    color: var(--dbv2-warning-dark);
    font-size: var(--dbv2-font-size-sm);
    font-weight: var(--dbv2-font-weight-medium);
    box-shadow: var(--dbv2-shadow-sm);
}

.banner-icon[b-scj5dwqeo7] {
    flex-shrink: 0;
    font-size: var(--dbv2-font-size-lg);
    color: var(--dbv2-warning);
}

.banner-message[b-scj5dwqeo7] {
    flex: 1;
}

.banner-dismiss[b-scj5dwqeo7] {
    display: flex;
    align-items: center;
    justify-content: center;
    padding: var(--dbv2-space-1);
    border: none;
    border-radius: var(--dbv2-radius-sm);
    background: transparent;
    color: var(--dbv2-warning-dark);
    cursor: pointer;
    transition: background 0.15s ease;
}

.banner-dismiss:hover[b-scj5dwqeo7] {
    background: color-mix(in srgb, var(--dbv2-warning) 16%, transparent);
}
/* /Common/Components/ImageUploadSlot.razor.rz.scp.css */
/* ==========================================================================
   ImageUploadSlot — scoped styles
   Uses --dbv2-* design tokens from dbv2-theme.css
   ========================================================================== */

.upload-slot[b-gv8u8ut13f] {
    display: flex;
    flex-direction: column;
    gap: var(--dbv2-space-2);
    position: relative;
}

.upload-label[b-gv8u8ut13f] {
    font-size: var(--dbv2-font-size-base);
    font-weight: var(--dbv2-font-weight-semibold);
    color: var(--dbv2-text-primary);
}

/* Editable label — text input visually aligned with the static .upload-label
   so editable and non-editable slots in the same grid keep the same vertical
   rhythm. Borderless until focus to avoid clashing with the dropzone border. */
.upload-label-editable[b-gv8u8ut13f] {
    font-family: inherit;
    font-size: var(--dbv2-font-size-base);
    font-weight: var(--dbv2-font-weight-semibold);
    color: var(--dbv2-text-primary);
    background: transparent;
    border: none;
    border-bottom: 0.0625rem dashed var(--dbv2-border);
    padding: 0 0 var(--dbv2-space-1) 0;
    width: 100%;
    outline: none;
    transition: border-color 0.15s ease;
}

.upload-label-editable[b-gv8u8ut13f]::placeholder {
    color: var(--dbv2-text-tertiary);
    font-weight: var(--dbv2-font-weight-regular);
    font-style: italic;
}

.upload-label-editable:hover[b-gv8u8ut13f] {
    border-bottom-color: var(--dbv2-border-strong);
}

.upload-label-editable:focus[b-gv8u8ut13f] {
    border-bottom-color: var(--dbv2-primary);
    color: var(--dbv2-text-primary);
}

.upload-description[b-gv8u8ut13f] {
    font-size: var(--dbv2-font-size-sm);
    color: var(--dbv2-text-secondary);
    margin: 0;
}


/* ── Drop zone (empty state) ───────────────────────────────────────────── */

.upload-dropzone[b-gv8u8ut13f] {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: var(--dbv2-space-2);
    padding: var(--dbv2-space-8) var(--dbv2-space-4);
    border: 2px dashed var(--dbv2-border);
    border-radius: var(--dbv2-radius-md);
    background: var(--dbv2-canvas);
    cursor: pointer;
    transition: border-color 0.15s ease, background-color 0.15s ease;
}

.upload-dropzone:hover[b-gv8u8ut13f],
.state-dragging .upload-dropzone[b-gv8u8ut13f] {
    border-color: var(--dbv2-primary-light);
    background: var(--dbv2-primary-lighter);
}

.upload-icon[b-gv8u8ut13f] {
    color: var(--dbv2-text-tertiary);
}

.upload-dropzone-text[b-gv8u8ut13f] {
    font-size: var(--dbv2-font-size-sm);
    color: var(--dbv2-text-secondary);
}

.upload-dropzone-text strong[b-gv8u8ut13f] {
    color: var(--dbv2-primary);
    font-weight: var(--dbv2-font-weight-semibold);
}

.upload-dropzone-hint[b-gv8u8ut13f] {
    font-size: var(--dbv2-font-size-xs);
    color: var(--dbv2-text-tertiary);
}

/* ── Preview (selected state) ──────────────────────────────────────────── */

.upload-preview[b-gv8u8ut13f] {
    position: relative;
    border-radius: var(--dbv2-radius-md);
    overflow: hidden;
    border: 1px solid var(--dbv2-border-light);
    background: var(--dbv2-canvas);
}

.upload-preview img[b-gv8u8ut13f] {
    display: block;
    width: 100%;
    max-height: 15rem;
    object-fit: contain;
}

.upload-clear[b-gv8u8ut13f] {
    position: absolute;
    top: var(--dbv2-space-2);
    right: var(--dbv2-space-2);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: var(--dbv2-icon-button-size);
    height: var(--dbv2-icon-button-size);
    border: none;
    border-radius: var(--dbv2-radius-full);
    background: var(--dbv2-overlay);
    color: var(--dbv2-header-text);
    cursor: pointer;
    transition: background-color 0.15s ease;
}

.upload-clear:hover[b-gv8u8ut13f] {
    background: var(--dbv2-overlay-heavy);
}


/* ── Error state ───────────────────────────────────────────────────────── */

.upload-error[b-gv8u8ut13f] {
    font-size: var(--dbv2-font-size-xs);
    color: var(--dbv2-error);
    margin: 0;
}

.state-error .upload-dropzone[b-gv8u8ut13f] {
    border-color: var(--dbv2-error);
}


/* ── Loading state ────────────────────────────────────────────────────── */

.upload-loading[b-gv8u8ut13f] {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: var(--dbv2-space-2);
    padding: var(--dbv2-space-8) var(--dbv2-space-4);
    border: 2px dashed var(--dbv2-primary-light);
    border-radius: var(--dbv2-radius-md);
    background: var(--dbv2-primary-lighter);
}

.upload-spinner[b-gv8u8ut13f] {
    color: var(--dbv2-primary);
    animation: spin-b-gv8u8ut13f 0.8s linear infinite;
}

@keyframes spin-b-gv8u8ut13f {
    to { transform: rotate(360deg); }
}

.upload-loading-text[b-gv8u8ut13f] {
    font-size: var(--dbv2-font-size-sm);
    color: var(--dbv2-text-secondary);
}


/* ── Row-level remove button ───────────────────────────────────────────────
   Distinct from .upload-clear (which only removes the staged file). This
   removes the entire slot row — used by callers that render a grid of
   user-managed slots like the Pack page's "Add extra detail" rows. */

.upload-remove-row[b-gv8u8ut13f] {
    display: inline-flex;
    align-items: center;
    gap: var(--dbv2-space-1);
    align-self: flex-start;
    margin-top: var(--dbv2-space-1);
    padding: var(--dbv2-space-1) var(--dbv2-space-2);
    font-size: var(--dbv2-font-size-xs);
    font-family: inherit;
    color: var(--dbv2-text-tertiary);
    background: transparent;
    border: 1px solid transparent;
    border-radius: var(--dbv2-radius-sm);
    cursor: pointer;
    transition: color 0.15s ease, border-color 0.15s ease, background-color 0.15s ease;
}

.upload-remove-row:hover[b-gv8u8ut13f] {
    color: var(--dbv2-error);
    border-color: var(--dbv2-error-light);
    background: var(--dbv2-error-lighter);
}
/* /Common/Components/ImageUploadZone.razor.rz.scp.css */
.image-upload-area[b-y2wy5a0z9q] {
    display: flex;
    flex-direction: column;
    gap: var(--dbv2-space-2);
}

.image-area-header[b-y2wy5a0z9q] {
    display: flex;
    align-items: center;
    gap: var(--dbv2-space-2);
}

.image-area-title[b-y2wy5a0z9q] {
    font-size: var(--dbv2-font-size-base);
    font-weight: var(--dbv2-font-weight-semibold);
    color: var(--dbv2-text-primary);
    margin: 0;
}


.image-preview-grid[b-y2wy5a0z9q] {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(6.25rem, 1fr));
    gap: var(--dbv2-space-2);
}

.image-preview-item[b-y2wy5a0z9q] {
    position: relative;
    border-radius: var(--dbv2-radius-sm);
    overflow: hidden;
    border: 1px solid var(--dbv2-border);
    background: var(--dbv2-canvas);
}

.image-preview-item img[b-y2wy5a0z9q] {
    display: block;
    width: 100%;
    height: auto;
    max-height: 15rem;
    object-fit: contain;
}

.image-remove-btn[b-y2wy5a0z9q] {
    position: absolute;
    top: 0.25rem;
    right: 0.25rem;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: var(--dbv2-icon-button-size);
    height: var(--dbv2-icon-button-size);
    border: none;
    border-radius: var(--dbv2-radius-full);
    background: var(--dbv2-overlay);
    color: var(--dbv2-header-text);
    cursor: pointer;
    transition: background-color 0.15s ease;
    padding: 0;
}

.image-remove-btn:hover[b-y2wy5a0z9q] {
    background: var(--dbv2-overlay-heavy);
}

.image-filename[b-y2wy5a0z9q] {
    display: block;
    padding: 0.125rem 0.375rem;
    font-size: var(--dbv2-font-size-overline);
    color: var(--dbv2-text-tertiary);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.image-dropzone[b-y2wy5a0z9q] {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: var(--dbv2-space-1);
    padding: var(--dbv2-space-4) var(--dbv2-space-3);
    border: 2px dashed var(--dbv2-border);
    border-radius: var(--dbv2-radius-md);
    background: var(--dbv2-canvas);
    color: var(--dbv2-text-tertiary);
    cursor: pointer;
    transition: border-color 0.15s ease, background-color 0.15s ease;
}

.image-dropzone:hover[b-y2wy5a0z9q] {
    border-color: var(--dbv2-primary-light);
    background: var(--dbv2-primary-lighter);
}

.upload-dropzone-text[b-y2wy5a0z9q] {
    font-size: var(--dbv2-font-size-sm);
    color: var(--dbv2-text-secondary);
}

.upload-dropzone-text strong[b-y2wy5a0z9q] {
    color: var(--dbv2-primary);
    font-weight: var(--dbv2-font-weight-semibold);
}

.upload-dropzone-hint[b-y2wy5a0z9q] {
    font-size: var(--dbv2-font-size-xs);
    color: var(--dbv2-text-tertiary);
}

.section-hint[b-y2wy5a0z9q] {
    font-size: var(--dbv2-font-size-sm);
    color: var(--dbv2-text-secondary);
    margin: 0 0 var(--dbv2-space-3) 0;
}

.validation-error[b-y2wy5a0z9q] {
    margin-top: var(--dbv2-space-2);
}
/* /Common/Components/Keycap.razor.rz.scp.css */
/* Canonical keyboard-chip styling — the single home for keycap presentation,
   lifted verbatim (and fully tokenized) from the shortcuts-popover kbd rule.
   Every caller renders through this; there are no per-context variants. */

.keycap[b-788bh0njx3] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 1.5rem;
    height: 1.375rem;
    padding: 0 0.375rem;
    font-family: var(--dbv2-font-mono);
    font-size: var(--dbv2-font-size-xs);
    font-weight: var(--dbv2-font-weight-medium);
    color: var(--dbv2-text-primary);
    background: var(--dbv2-muted);
    border: 1px solid var(--dbv2-border);
    border-bottom-width: 0.125rem;
    border-radius: var(--dbv2-radius-sm);
    box-shadow: 0 1px 0 var(--dbv2-border-light); /* deliberate keycap bevel — 1px offset is the 3D key edge, not a shadow token */
}
/* /Common/Components/KeycapRow.razor.rz.scp.css */
/* Row layout only — the chips and separators carry their own scoped styling.
   Replaces the ad-hoc .grid-keycaps flex row and the popover's key-cell rules. */

.keycap-row[b-axee9czfle] {
    display: inline-flex;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--dbv2-space-1);
    white-space: nowrap;
}
/* /Common/Components/KeycapSeparator.razor.rz.scp.css */
/* The decorative +/ / glyph between keys — tertiary, smaller than a chip, with a
   little breathing room. Lifted from the popover's __plus/__or separator spans. */

.keycap-separator[b-d1gkhsadeh] {
    color: var(--dbv2-text-tertiary);
    font-size: var(--dbv2-font-size-xs);
    padding: 0 0.125rem;
}
/* /Common/Components/PasswordStrengthInput.razor.rz.scp.css */
.password-strength-wrapper[b-i4y3a2e1l6] {
    display: flex;
    flex-direction: column;
    gap: var(--dbv2-space-2);
}

.input-group[b-i4y3a2e1l6] {
    display: flex;
    flex-direction: column;
    gap: var(--dbv2-space-1);
}

.input-label[b-i4y3a2e1l6] {
    font-size: var(--dbv2-font-size-sm);
    font-weight: var(--dbv2-font-weight-semibold);
    color: var(--dbv2-text-secondary);
}

.rules-list[b-i4y3a2e1l6] {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: var(--dbv2-space-1);
}

.rule-item[b-i4y3a2e1l6] {
    display: flex;
    align-items: center;
    gap: var(--dbv2-space-2);
    font-size: var(--dbv2-font-size-xs);
    transition: color 0.15s ease;
}

.rule-item.pass[b-i4y3a2e1l6] {
    color: var(--dbv2-success);
}

.rule-item.fail[b-i4y3a2e1l6] {
    color: var(--dbv2-error);
}

.rule-item.warning[b-i4y3a2e1l6] {
    color: var(--dbv2-warning);
}

.rule-item.checking[b-i4y3a2e1l6] {
    color: var(--dbv2-text-tertiary);
}

[b-i4y3a2e1l6] .rule-icon {
    font-size: var(--dbv2-font-size-base);
    flex-shrink: 0;
}
/* /Common/Components/PromptEditorDialog.razor.rz.scp.css */
/* Prompt editor dialog — comfortable textarea + single Save & exit action.
   Rendered inside a RadzenDialog; layout is intentionally minimal. */

.prompt-editor-dialog[b-dpbp4znyxq] {
    display: flex;
    flex-direction: column;
    gap: var(--dbv2-space-4);
    min-width: 30rem;
}

/* /Common/Components/QueryableDataGrid/ChoiceFacetEditor.razor.rz.scp.css */
.facet-enumerable-editor[b-8zi0o49kcr] {
    display: flex;
    flex-direction: column;
    min-width: 18ch;
}

/* --- Operator section (Is / Is Not) ------------------------------------------------------- */

.facet-operator-list[b-8zi0o49kcr],
.facet-value-list[b-8zi0o49kcr] {
    list-style: none;
    margin: 0;
    padding: var(--dbv2-space-1);
    display: flex;
    flex-direction: column;
}

.facet-operator-option[b-8zi0o49kcr],
.facet-value-option[b-8zi0o49kcr] {
    display: flex;
    align-items: center;
    gap: var(--dbv2-space-2);
    padding: var(--dbv2-space-2) var(--dbv2-space-3);
    border-radius: var(--dbv2-radius-sm);
    cursor: pointer;
    font-size: var(--dbv2-font-size-sm);
    color: var(--dbv2-text-primary);

    /* state indication: hover names the row about to be toggled */
    transition: background-color var(--dbv2-dur-hover) var(--dbv2-ease-out);
}

.facet-operator-option:hover[b-8zi0o49kcr],
.facet-value-option:hover[b-8zi0o49kcr] {
    background-color: var(--dbv2-primary-wash);
}

/* keyboard highlight tracks the arrow-key cursor distinctly from hover */
.facet-operator-option--active[b-8zi0o49kcr],
.facet-value-option--active[b-8zi0o49kcr] {
    background-color: var(--dbv2-primary-wash);
}

.facet-operator-label[b-8zi0o49kcr] {
    flex: 1;
}

.facet-operator-check[b-8zi0o49kcr] {
    color: var(--dbv2-primary);
    flex-shrink: 0;
}

/* spec #3: a square checkbox per value reads multi-select at a glance — an empty box invites a pick,
   a filled-with-check box reads as taken. The check inside is conditionally rendered (present only
   when selected), so the box carries a mark only when it should. */
.facet-value-checkbox[b-8zi0o49kcr] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    width: 1.125rem;
    height: 1.125rem;
    border: 0.0625rem solid var(--dbv2-border);
    border-radius: var(--dbv2-radius-sm);
    background-color: var(--dbv2-surface);
    color: var(--dbv2-on-primary);
    transition:
        background-color var(--dbv2-dur-hover) var(--dbv2-ease-out),
        border-color var(--dbv2-dur-hover) var(--dbv2-ease-out);
}

.facet-value-checkbox--checked[b-8zi0o49kcr] {
    background-color: var(--dbv2-primary);
    border-color: var(--dbv2-primary);
}

.facet-value-checkbox-mark[b-8zi0o49kcr] {
    font-size: var(--dbv2-icon-size-sm);
}

/* --- Inset divider (does not reach the dropdown edges) ------------------------------------- */

.facet-divider[b-8zi0o49kcr] {
    border: none;
    border-top: 0.0625rem solid var(--dbv2-border-light);
    margin: var(--dbv2-space-1) var(--dbv2-space-3);
}

/* --- Live value filter --------------------------------------------------------------------- */

.facet-filter[b-8zi0o49kcr] {
    padding: var(--dbv2-space-1) var(--dbv2-space-2) 0;
}

.facet-filter-input[b-8zi0o49kcr] {
    width: 100%;
    font-size: var(--dbv2-font-size-sm);
    color: var(--dbv2-text-primary);
    background-color: var(--dbv2-surface);
    border: 1px solid var(--dbv2-border);
    border-radius: var(--dbv2-radius-sm);
    padding: var(--dbv2-space-1) var(--dbv2-space-2);
}

.facet-filter-input:focus-visible[b-8zi0o49kcr] {
    outline: 2px solid var(--dbv2-primary);
    outline-offset: 1px;
}

/* --- Value listbox ------------------------------------------------------------------------- */

.facet-value-label[b-8zi0o49kcr] {
    flex: 1;
}

/* CORRECTION C: no focus ring on the value list itself — the per-item highlight
   (.facet-value-option--active, seeded on the first value at open) IS the keyboard affordance, so a
   second outline around the whole list would double the signal. */
/* /Common/Components/QueryableDataGrid/DateFacetEditor.razor.rz.scp.css */
/* spec #8: the dropdown holds a stable width across forms. The custom date inputs are intrinsically
   wider than a preset row, so a content-sized box would jump wider the instant Custom Date / Custom
   Range is picked. A fixed width sized to hold the widest form (the two range inputs) from the start
   means switching forms reveals the inputs WITHOUT resizing the dropdown. */
.facet-date-editor[b-o86j4yomr7] {
    display: flex;
    flex-direction: column;
    width: 20rem;
}

/* --- Form section (Today / Last 7 days / … / Custom Range) --------------------------------- */

.facet-operator-list[b-o86j4yomr7] {
    list-style: none;
    margin: 0;
    padding: var(--dbv2-space-1);
    display: flex;
    flex-direction: column;
}

.facet-operator-option[b-o86j4yomr7] {
    display: flex;
    align-items: center;
    gap: var(--dbv2-space-2);
    padding: var(--dbv2-space-2) var(--dbv2-space-3);
    border-radius: var(--dbv2-radius-sm);
    cursor: pointer;
    font-size: var(--dbv2-font-size-sm);
    color: var(--dbv2-text-primary);
    transition: background-color var(--dbv2-dur-hover) var(--dbv2-ease-out);
}

.facet-operator-option:hover[b-o86j4yomr7],
.facet-operator-option--active[b-o86j4yomr7] {
    background-color: var(--dbv2-primary-wash);
}

.facet-operator-label[b-o86j4yomr7] {
    flex: 1;
}

.facet-operator-check[b-o86j4yomr7] {
    color: var(--dbv2-primary);
    flex-shrink: 0;
}

/* --- Inset divider (does not reach the dropdown edges) ------------------------------------- */

.facet-divider[b-o86j4yomr7] {
    border: none;
    border-top: 0.0625rem solid var(--dbv2-border-light);
    margin: var(--dbv2-space-1) var(--dbv2-space-3);
}

/* --- Custom inputs: single date for Custom Date, adjacent from/to for Custom Range --------- */

.facet-date-field[b-o86j4yomr7] {
    padding: var(--dbv2-space-1) var(--dbv2-space-3) var(--dbv2-space-2);
}

.facet-date-fields[b-o86j4yomr7] {
    display: flex;
    align-items: center;
    gap: var(--dbv2-space-2);
    padding: var(--dbv2-space-1) var(--dbv2-space-3) var(--dbv2-space-2);
}

.facet-date-sep[b-o86j4yomr7] {
    color: var(--dbv2-text-tertiary);
    flex-shrink: 0;
}

.facet-date-input[b-o86j4yomr7] {
    font-size: var(--dbv2-font-size-sm);
    color: var(--dbv2-text-primary);
    background-color: var(--dbv2-surface);
    border: 1px solid var(--dbv2-border);
    border-radius: var(--dbv2-radius-sm);
    padding: var(--dbv2-space-1) var(--dbv2-space-2);
}

.facet-date-single[b-o86j4yomr7] {
    width: 100%;
}

.facet-date-from[b-o86j4yomr7],
.facet-date-to[b-o86j4yomr7] {
    flex: 1;
    min-width: 0;
}

.facet-date-input:focus-visible[b-o86j4yomr7] {
    outline: 2px solid var(--dbv2-primary);
    outline-offset: 1px;
}
/* /Common/Components/QueryableDataGrid/FreeTextFacetEditor.razor.rz.scp.css */
.facet-text-editor[b-11vz820wpk] {
    display: flex;
    flex-direction: column;
    min-width: 18ch;
}

/* --- Operator section (Contains / Is / Is Not) -------------------------------------------- */

.facet-operator-list[b-11vz820wpk] {
    list-style: none;
    margin: 0;
    padding: var(--dbv2-space-1);
    display: flex;
    flex-direction: column;
}

.facet-operator-option[b-11vz820wpk] {
    display: flex;
    align-items: center;
    gap: var(--dbv2-space-2);
    padding: var(--dbv2-space-2) var(--dbv2-space-3);
    border-radius: var(--dbv2-radius-sm);
    cursor: pointer;
    font-size: var(--dbv2-font-size-sm);
    color: var(--dbv2-text-primary);
    transition: background-color var(--dbv2-dur-hover) var(--dbv2-ease-out);
}

.facet-operator-option:hover[b-11vz820wpk],
.facet-operator-option--active[b-11vz820wpk] {
    background-color: var(--dbv2-primary-wash);
}

.facet-operator-label[b-11vz820wpk] {
    flex: 1;
}

.facet-operator-check[b-11vz820wpk] {
    color: var(--dbv2-primary);
    flex-shrink: 0;
}

/* --- Inset divider (does not reach the dropdown edges) ------------------------------------- */

.facet-divider[b-11vz820wpk] {
    border: none;
    border-top: 0.0625rem solid var(--dbv2-border-light);
    margin: var(--dbv2-space-1) var(--dbv2-space-3);
}

/* --- Typed value input (no value-suggestion dropdown) ------------------------------------- */

.facet-text-field[b-11vz820wpk] {
    padding: var(--dbv2-space-1) var(--dbv2-space-2) var(--dbv2-space-2);
}

.facet-text-input[b-11vz820wpk] {
    width: 100%;
    font-size: var(--dbv2-font-size-sm);
    color: var(--dbv2-text-primary);
    background-color: var(--dbv2-surface);
    border: 1px solid var(--dbv2-border);
    border-radius: var(--dbv2-radius-sm);
    padding: var(--dbv2-space-1) var(--dbv2-space-2);
}

.facet-text-input:focus-visible[b-11vz820wpk] {
    outline: 2px solid var(--dbv2-primary);
    outline-offset: 1px;
}
/* /Common/Components/QueryableDataGrid/NumericFacetEditor.razor.rz.scp.css */
.facet-numeric-editor[b-yonbrael09] {
    display: flex;
    flex-direction: column;
    min-width: 18ch;
}

/* --- Operator section (Is between / Is Greater Than / …) ----------------------------------- */

.facet-operator-list[b-yonbrael09] {
    list-style: none;
    margin: 0;
    padding: var(--dbv2-space-1);
    display: flex;
    flex-direction: column;
}

.facet-operator-option[b-yonbrael09] {
    display: flex;
    align-items: center;
    gap: var(--dbv2-space-2);
    padding: var(--dbv2-space-2) var(--dbv2-space-3);
    border-radius: var(--dbv2-radius-sm);
    cursor: pointer;
    font-size: var(--dbv2-font-size-sm);
    color: var(--dbv2-text-primary);
    transition: background-color var(--dbv2-dur-hover) var(--dbv2-ease-out);
}

.facet-operator-option:hover[b-yonbrael09],
.facet-operator-option--active[b-yonbrael09] {
    background-color: var(--dbv2-primary-wash);
}

.facet-operator-label[b-yonbrael09] {
    flex: 1;
}

.facet-operator-check[b-yonbrael09] {
    color: var(--dbv2-primary);
    flex-shrink: 0;
}

/* --- Inset divider (does not reach the dropdown edges) ------------------------------------- */

.facet-divider[b-yonbrael09] {
    border: none;
    border-top: 0.0625rem solid var(--dbv2-border-light);
    margin: var(--dbv2-space-1) var(--dbv2-space-3);
}

/* --- Value inputs: adjacent from/to for "Is between", single scalar otherwise -------------- */

.facet-range-fields[b-yonbrael09] {
    display: flex;
    align-items: center;
    gap: var(--dbv2-space-2);
    padding: var(--dbv2-space-1) var(--dbv2-space-3) var(--dbv2-space-2);
}

.facet-range-sep[b-yonbrael09] {
    color: var(--dbv2-text-tertiary);
    flex-shrink: 0;
}

.facet-scalar-field[b-yonbrael09] {
    padding: var(--dbv2-space-1) var(--dbv2-space-3) var(--dbv2-space-2);
}

.facet-range-input[b-yonbrael09],
.facet-scalar-input[b-yonbrael09] {
    font-size: var(--dbv2-font-size-sm);
    color: var(--dbv2-text-primary);
    background-color: var(--dbv2-surface);
    border: 1px solid var(--dbv2-border);
    border-radius: var(--dbv2-radius-sm);
    padding: var(--dbv2-space-1) var(--dbv2-space-2);
}

.facet-range-input[b-yonbrael09] {
    width: 8ch;
    flex: 1;
}

.facet-scalar-input[b-yonbrael09] {
    width: 100%;
}

.facet-range-input:focus-visible[b-yonbrael09],
.facet-scalar-input:focus-visible[b-yonbrael09] {
    outline: 2px solid var(--dbv2-primary);
    outline-offset: 1px;
}
/* /Common/Components/QueryableDataGrid/QualifierBar.razor.rz.scp.css */
/* The guided qualifier bar (ADR-0027): committed qualifiers as inline pills ahead of a trailing
   typeahead, all reading as one field. The saved-views control (spec #12) owns the bar's inner row and
   frames this field: its view picker leads at the left, its dirty-affordances (reset + Save) trail at the
   right, and the field — slotted into the control via <FieldContent> — grows to fill the middle between
   two divider seams. The field is the only child the bar lays out directly; the picker/field/actions row
   and its narrow-width reflow (#26) live in SavedViewsControl's sheet.

   Spec #1: the bar is the TOP band of the one fused grid surface (QueryableDataGrid's .qdg-surface
   owns the outer border + rounded corners). The bar therefore draws no box of its own — only a
   single bottom divider that forms the one seam between the bar band and the grid below it. */
.qualifier-bar[b-gb2x9yukro] {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-start;
    gap: var(--dbv2-space-2);
    width: 100%;

    /* spec #26: never let the band drive horizontal overflow. min-width:0 lets the bar (and its
       flex children) shrink below their content's intrinsic width at the narrow widths the shell
       supports (collapsed sidebar) instead of pushing a scrollbar. We do NOT set overflow here:
       the suggestion/editor popovers are positioned descendants that must escape the bar's box. */
    min-width: 0;
    padding: var(--dbv2-space-1) var(--dbv2-space-2);
    background-color: var(--dbv2-surface);
    border-bottom: 0.0625rem solid var(--dbv2-border);

    /* round only the TOP corners to the shared surface radius so the bar's filled background follows
       the surface's rounded top edge (no square fill poking past the frame); the bottom stays flat
       where it meets the grid. */
    border-radius: var(--dbv2-radius-md) var(--dbv2-radius-md) 0 0;

    /* state indication: the seam between bar band and grid marks active when the caret is focused */
    transition: border-color var(--dbv2-dur-hover) var(--dbv2-ease-out);
}

.qualifier-bar:focus-within[b-gb2x9yukro] {
    border-bottom-color: var(--dbv2-primary);
}

/* While a popover (suggestions or a facet editor) is open, lift the whole bar above the dismissal
   backdrop (.qualifier-backdrop, z-index:10). The backdrop is a fixed, full-viewport sibling: without
   this, it sits OVER the committed pills (which are in normal flow) and intercepts pointer events on
   them. That is the reverse-pick failure — after an enumerable value pick the editor stays open by
   design (spec #4), so reopening a pill to switch fields means clicking a pill while the backdrop is
   still mounted, and the backdrop swallows that click. Raising the bar keeps the pills (and the input)
   reachable; the backdrop still covers everything OFF the bar, so a genuine outside-click dismisses.
   This is NOT a z-index bump of the editor over the backdrop (the editor already paints above it) —
   it lifts the bar's own interactive controls, the surface the backdrop must not cover. */
.qualifier-bar--overlay-open[b-gb2x9yukro] {
    position: relative;
    z-index: 15;
}

/* The filter field grows to fill the middle of the saved-views row, between the leading picker and the
   trailing actions (it is slotted into SavedViewsControl via <FieldContent>, so .saved-views is its flex
   parent). It no longer carries its own rounded border (which made it read as a separate floating
   control) — the surface frames it, and the focus affordance lives on the bar band's bottom seam (see
   .qualifier-bar:focus-within above). */
.qualifier-bar-field[b-gb2x9yukro] {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--dbv2-space-1);
    flex: 1 1 16rem;
    min-width: 0;
    min-height: 2.25rem;
}

/* ----- committed qualifier pills --------------------------------------------------------------- */

.qualifier-pill[b-gb2x9yukro] {
    display: inline-flex;
    align-items: center;
    max-width: 100%;

    /* Deliverable A: the pill itself is just the joining frame — its two segments (.--field, .--value)
       carry the fill, so no background here. */
    border: 1px solid var(--dbv2-border);
    border-radius: var(--dbv2-radius-sm);

    /* anchor site for the amend-editor popover (spec #10): the editor renders as an absolutely
       positioned child and resolves its offset against this pill. overflow:hidden clips the body's
       ellipsis to the rounded corners in the resting state; .qualifier-pill--editing lifts it so the
       popover can escape the pill box while editing. */
    position: relative;
    overflow: hidden;
}

.qualifier-pill--text[b-gb2x9yukro] {
    background-color: var(--dbv2-canvas);
}

/* While this pill hosts the amend-editor (spec #10), let the popover escape the pill's clip box. */
.qualifier-pill--editing[b-gb2x9yukro] {
    overflow: visible;
}

/* Armed for backspace-deletion (spec #11): a danger-toned ring signalling the next Backspace removes
   this filter. The first Backspace arms; a second press (or a click on the remove control) deletes. */
.qualifier-pill--armed[b-gb2x9yukro] {
    background-color: var(--dbv2-error-lighter);
    border-color: var(--dbv2-error);
    box-shadow: 0 0 0 0.0625rem var(--dbv2-error);
}

/* While armed, let the pill's danger wash read through both segments — the two-tone fill would otherwise
   mask it (deliverable A segments paint over the container). */
.qualifier-pill--armed .qualifier-pill-body[b-gb2x9yukro] {
    background-color: transparent;
    color: var(--dbv2-text-primary);
}

.qualifier-pill-body[b-gb2x9yukro] {
    display: inline-flex;
    align-items: center;
    max-width: 100%;
    font-size: var(--dbv2-font-size-sm);
    color: var(--dbv2-text-primary);
    background: transparent;
    border: none;
    padding: var(--dbv2-space-1) var(--dbv2-space-2);
    cursor: pointer;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    transition: background-color var(--dbv2-dur-hover) var(--dbv2-ease-out);
}

/* Deliverable A — the two joined segments. CORRECTION A: the FIELD segment stays neutral/grey (it names
   the field; it is not the filter's payload), while the VALUE segment carries the info tone (it IS the
   live value). A hairline seam + matching small inner radii fuse the two buttons into one control. */
.qualifier-pill-body--field[b-gb2x9yukro] {
    background-color: var(--dbv2-canvas);
    color: var(--dbv2-text-secondary);
    border-top-right-radius: var(--dbv2-radius-xs);
    border-bottom-right-radius: var(--dbv2-radius-xs);
}

.qualifier-pill-body--value[b-gb2x9yukro] {
    background-color: var(--dbv2-info-lighter);
    color: var(--dbv2-info-dark);
    border-left: 1px solid var(--dbv2-border);
    border-top-left-radius: var(--dbv2-radius-xs);
    border-bottom-left-radius: var(--dbv2-radius-xs);
}

/* Hover deepens each segment in its OWN tone so the two-tone reading survives the highlight. The
   provisional pill's field segment is a static span (.--static) — not a target — so it is excluded. */
.qualifier-pill-body--field:not(:disabled):not(.qualifier-pill-body--static):hover[b-gb2x9yukro] {
    background-color: var(--dbv2-primary-tint);
}

.qualifier-pill-body--value:not(:disabled):hover[b-gb2x9yukro] {
    background-color: var(--dbv2-info-light);
}

.qualifier-pill-body:disabled[b-gb2x9yukro],
.qualifier-pill-body--static[b-gb2x9yukro] {
    cursor: default;
}

.qualifier-pill-remove[b-gb2x9yukro] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    color: var(--dbv2-text-tertiary);
    background: transparent;
    border: none;
    padding: 0 var(--dbv2-space-1);
    cursor: pointer;
    transition: color var(--dbv2-dur-hover) var(--dbv2-ease-out);
}

.qualifier-pill-remove:hover[b-gb2x9yukro] {
    color: var(--dbv2-text-primary);
}

.qualifier-pill-remove-icon[b-gb2x9yukro] {
    font-size: var(--dbv2-icon-size-sm);
}

/* ----- trailing typeahead + dropdown ----------------------------------------------------------- */

.qualifier-bar-typeahead[b-gb2x9yukro] {
    position: relative;
    flex: 1;
    min-width: 8rem;
}

.qualifier-bar-input[b-gb2x9yukro] {
    width: 100%;
    font-size: var(--dbv2-font-size-sm);
    color: var(--dbv2-text-primary);
    background: transparent;
    border: none;
    padding: var(--dbv2-space-1);
}

.qualifier-bar-input:focus-visible[b-gb2x9yukro] {
    outline: none;
}

/* Placeholder overlay: the empty-field prompt, with the magnifying glass folded into its leading
   edge. It overlays the input at the same inset and font as the real text so the prompt reads as the
   input's own placeholder. pointer-events:none keeps the input fully clickable beneath it; the markup
   already drops the overlay once a draft or any committed pill exists, so it clears as the user types.

   top:0/bottom:0 stretches the overlay to the typeahead's full height (which the input alone sets);
   align-items:center then seats the prompt on the input's vertical midline, so the placeholder and the
   text the user types land on the same baseline rather than the prompt riding high. */
.qualifier-bar-placeholder[b-gb2x9yukro] {
    position: absolute;
    top: 0;
    bottom: 0;
    left: 0;
    display: inline-flex;
    align-items: center;
    gap: var(--dbv2-space-1);
    padding: var(--dbv2-space-1);
    font-size: var(--dbv2-font-size-sm);
    color: var(--dbv2-text-tertiary);
    white-space: nowrap;
    pointer-events: none;
}

/* The magnifying glass reads as one with the placeholder text it leads. It uses the shared icon-in-text
   box (.dbv2-icon-text__icon in dbv2-theme.css): a 1em square with the glyph pinned to 1em +
   line-height:1, so the chunky Material glyph lands at the text's own size instead of overpowering it.
   Colour is inherited (currentColor), so it picks up the placeholder's muted tone for free. */

/* Bounded, scrollable suggestion list (ADR-0027): long field lists scroll, never grow the page. */
.qualifier-suggestions[b-gb2x9yukro] {
    position: absolute;
    top: calc(100% + var(--dbv2-space-1));
    left: 0;
    z-index: 20;
    min-width: 14rem;
    max-width: 22rem;
    max-height: 18rem;
    overflow-y: auto;
    margin: 0;
    padding: var(--dbv2-space-1);
    list-style: none;
    background-color: var(--dbv2-surface);
    border: 1px solid var(--dbv2-border);
    border-radius: var(--dbv2-radius-md);
    box-shadow: var(--dbv2-shadow-md);
}

.qualifier-suggestion[b-gb2x9yukro] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--dbv2-space-2);
    font-size: var(--dbv2-font-size-sm);
    color: var(--dbv2-text-primary);
    border-radius: var(--dbv2-radius-sm);
    padding: var(--dbv2-space-1) var(--dbv2-space-2);
    cursor: pointer;

    /* state indication: the active descendant (keyboard or hover) is washed to read as selectable */
    transition: background-color var(--dbv2-dur-hover) var(--dbv2-ease-out);
}

.qualifier-suggestion:hover[b-gb2x9yukro],
.qualifier-suggestion--active[b-gb2x9yukro] {
    background-color: var(--dbv2-primary-wash);
}

/* ----- editor handoff popover ------------------------------------------------------------------ */

/* Bounded, scrollable editor (ADR-0027): the chosen facet's kind-specific editor renders here. */
.qualifier-editor[b-gb2x9yukro] {
    position: absolute;
    top: calc(100% + var(--dbv2-space-1));
    left: 0;
    z-index: 20;
    min-width: 14rem;
    max-width: 22rem;
    max-height: 20rem;
    overflow-y: auto;
    background-color: var(--dbv2-surface);
    border: 1px solid var(--dbv2-border);
    border-radius: var(--dbv2-radius-md);
    box-shadow: var(--dbv2-shadow-md);
    padding: var(--dbv2-space-2);
}

.qualifier-backdrop[b-gb2x9yukro] {
    position: fixed;
    inset: 0;
    z-index: 10;
    background-color: transparent;
}
/* /Common/Components/QueryableDataGrid/QueryableDataGrid.razor.rz.scp.css */
.queryable-data-grid[b-myw2o7pezq] {
    display: flex;
    flex-direction: column;
    /* Anchors the absolutely-positioned "new data" tab, which protrudes above the surface's top edge. */
    position: relative;
}

/* "New data" tab — an info-toned label seated on the grid surface's top-left edge, protruding into the
   gap above it. Shown only when the data source signals its loaded page went stale
   (IGridDataSource.RowsInvalidated); clicking reloads the grid in place (no full-page refresh). */
.new-data-tab[b-myw2o7pezq] {
    position: absolute;
    left: var(--dbv2-space-4);
    bottom: 100%; /* sit flush above the surface's top edge */
    display: inline-flex;
    align-items: center;
    gap: var(--dbv2-space-2);
    padding: var(--dbv2-space-1) var(--dbv2-space-3);
    border: none;
    border-radius: var(--dbv2-radius-sm) var(--dbv2-radius-sm) 0 0;
    background: var(--dbv2-info);
    color: var(--dbv2-header-text);
    font-size: var(--dbv2-font-size-sm);
    cursor: pointer;
    transition: background 0.15s ease;
}

.new-data-tab:hover[b-myw2o7pezq] {
    background: var(--dbv2-info-dark);
}

.new-data-tab:focus-visible[b-myw2o7pezq] {
    outline: 0.125rem solid var(--dbv2-info-dark);
    outline-offset: 0.125rem;
}

.new-data-tab-label[b-myw2o7pezq] {
    font-weight: var(--dbv2-font-weight-medium);
}

.new-data-tab-action[b-myw2o7pezq] {
    font-weight: var(--dbv2-font-weight-semibold);
}

.new-data-tab-icon[b-myw2o7pezq] {
    font-size: var(--dbv2-icon-size-sm);
}

/* The info top-border accent the tab seats against — applied only while the nudge is up, so the grid
   surface reads as a self-contained card the rest of the time. */
.queryable-data-grid.has-new-data .qdg-surface[b-myw2o7pezq] {
    border-top: 0.125rem solid var(--dbv2-info);
}

/* Spec #1: the qualifier bar and the data grid read as ONE component — a single bordered, rounded
   surface with the bar fused to the top of the table (no gap, no double border). This wrapper owns
   the outer frame. We round the inner children's outer corners to the same radius rather than
   clipping with `overflow: hidden`, because the bar's suggestion/editor popovers overflow the
   surface and must not be clipped. The bar rounds its TOP corners; the grid rounds its BOTTOM.

   Spec #25 (row-border softening): Radzen draws every row/header separator from
   --rz-grid-*-cell-border, which all resolve to `1px solid var(--rz-base-300)` (a hard cool #e0e0e0
   hairline) that fights the soft fused surface. Rather than chase Radzen's deep `.rz-grid-table td/th`
   selectors, we remap the border VARIABLES (the same approach dbv2-theme.css uses for the --rz-*
   palette) here on .qdg-surface — an in-scope element — so the custom properties INHERIT down into
   Radzen's deep markup (no ::deep needed for variables) and only this grid's separators drop to the
   lightest warm system border token: faint hairlines that belong to the surface. */
.qdg-surface[b-myw2o7pezq] {
    border: 1px solid var(--dbv2-border);
    border-radius: var(--dbv2-radius-md);

    --rz-grid-cell-border:        0.0625rem solid var(--dbv2-border-light);
    --rz-grid-bottom-cell-border: 0.0625rem solid var(--dbv2-border-light);
    --rz-grid-header-cell-border: 0.0625rem solid var(--dbv2-border-light);

    /* Grid surface background: Radzen's grid/header/toolbar and the odd zebra stripe all default to
       --rz-grid-background-color → --rz-base-background-color → --rz-white (pure #fff), which reads as
       a cold white block against the system's warm clay surfaces. Remap them onto --dbv2-surface (the
       same "cards, islands" token the rest of the system uses) so the grid reads as one continuous warm
       card. The even/striped rows already map to --dbv2-canvas via the global --rz-grid-stripe-* vars in
       dbv2-theme.css, so zebra stays surface/canvas — both warm. As with the border vars above, we remap
       the variables on this in-scope element so they INHERIT into Radzen's deep markup (no ::deep).

       The header row is the deliberate exception: it maps to --dbv2-canvas (one step darker than the
       surface body) so the column-header band reads as recessed against the grid body, the filter bar,
       and the island — all of which are --dbv2-surface. Without this the header was indistinguishable. */
    --rz-grid-background-color:            var(--dbv2-surface);
    --rz-grid-header-background-color:     var(--dbv2-canvas);
    --rz-grid-toolbar-background-color:    var(--dbv2-surface);
    --rz-grid-stripe-odd-background-color: var(--dbv2-surface);
    --rz-grid-frozen-cell-background-color: var(--dbv2-surface);
}

/* The data grid sits flush under the bar inside the shared surface, so it must not draw its own
   box: drop Radzen's grid border, then round only the BOTTOM corners to the shared radius. The
   single seam between bar and grid is the bar's bottom divider (see QualifierBar.razor.css);
   Radzen's `.rz-datatable` already sets `overflow: hidden`, so its rows clip to these corners. */
.qdg-surface[b-myw2o7pezq]  .rz-datatable {
    border: none;
    border-radius: 0 0 var(--dbv2-radius-md) var(--dbv2-radius-md);
}

/* Spec #23: round the grid so it reads as one continuous soft surface, not a square table dropped
   into a rounded frame. `.rz-datatable` clips its rows to the bottom radius above, but the inner
   scroll/pager structures Radzen nests inside it each draw their own square edges that poke into the
   corner. Round the data-region wrapper and the pager's bottom corners to the SAME --dbv2-radius-md
   so the rounding is continuous from the fused surface down through the last visible band. */
.qdg-surface[b-myw2o7pezq]  .rz-data-grid-data,
.qdg-surface[b-myw2o7pezq]  .rz-datatable-scrollable-view {
    border-bottom-left-radius: var(--dbv2-radius-md);
    border-bottom-right-radius: var(--dbv2-radius-md);
}

.qdg-surface[b-myw2o7pezq]  .rz-pager {
    border-bottom-left-radius: var(--dbv2-radius-md);
    border-bottom-right-radius: var(--dbv2-radius-md);
}

/* Default row action (RowClick): when a row-click delegate is wired the whole row is the primary
   affordance, so it reads as clickable — pointer cursor plus a warm tint that eases in and out on
   hover. Radzen maps the row hover background to --dbv2-primary-tint (--rz-grid-hover-background-color
   in dbv2-theme.css); we add the transition so the tint animates rather than snapping. A grid with no
   RowClick keeps its default cursor and no hover affordance. */
.queryable-data-grid.has-row-click[b-myw2o7pezq]  .rz-data-row {
    cursor: pointer;
    transition: background-color var(--dbv2-dur-hover) ease;
}

/* Expand chevron (Radzen's row toggler) vs. the row: two different actions sharing one row — the row
   navigates, the chevron expands the inline deliverables preview (it stops propagation). To make that
   legible, the chevron reads as its own button: a centered rounded hit target that, on hover, lifts to
   the stronger --dbv2-primary-wash chip — a clear step up from the row's palest --dbv2-primary-tint —
   and shifts to the brand color. The distinct, bounded background is the cue that the chevron is a
   separate target from the row beneath it. Gated behind a real pointer so a touch tap doesn't leave
   the chip stuck. */
.queryable-data-grid.has-row-click[b-myw2o7pezq]  .rz-row-toggler {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 1.75rem;
    height: 1.75rem;
    border-radius: var(--dbv2-radius-sm);
    transition:
        background-color var(--dbv2-dur-hover) ease,
        color var(--dbv2-dur-hover) ease;
}

@media (hover: hover) and (pointer: fine) {
    .queryable-data-grid.has-row-click[b-myw2o7pezq]  .rz-row-toggler:hover {
        background-color: var(--dbv2-primary-wash);
        color: var(--dbv2-primary);
    }
}

/* Right-aligned per-row actions (RowActions): the grid-owned trailing column. Hold the buttons off
   the table's right edge so they never crowd the border, and off the preceding cell on the left. */
.qdg-surface[b-myw2o7pezq]  .qdg-actions-cell {
    padding-right: var(--dbv2-space-4);
}

.qdg-row-actions[b-myw2o7pezq] {
    display: flex;
    justify-content: flex-end;
    align-items: center;
    gap: var(--dbv2-space-2);
    padding-left: var(--dbv2-space-3);
}
/* /Common/Components/QueryableDataGrid/SavedViewNamePrompt.razor.rz.scp.css */
/* The shared name-prompt modal (ADR-0027, spec #14/#18): one surface behind Save-as-New / Rename /
   Duplicate. A centered card over a dimming overlay; the input flips to an error state on collision. */
.saved-view-name-overlay[b-56b2ige3av] {
    position: fixed;
    inset: 0;
    z-index: 40;
    display: flex;
    align-items: center;
    justify-content: center;
    background-color: var(--dbv2-overlay);
}

.saved-view-name-prompt[b-56b2ige3av] {
    display: flex;
    flex-direction: column;
    gap: var(--dbv2-space-3);
    width: 22rem;
    max-width: calc(100vw - var(--dbv2-space-6));
    padding: var(--dbv2-space-4);
    background-color: var(--dbv2-surface);
    border: 1px solid var(--dbv2-border);
    border-radius: var(--dbv2-radius-lg);
    box-shadow: var(--dbv2-shadow-lg);
}

.saved-view-name-title[b-56b2ige3av] {
    color: var(--dbv2-text-primary);
}

.saved-view-name-field[b-56b2ige3av] {
    display: flex;
    flex-direction: column;
    gap: var(--dbv2-space-1);
}

.saved-view-name-input[b-56b2ige3av] {
    width: 100%;
    font-size: var(--dbv2-font-size-sm);
    color: var(--dbv2-text-primary);
    background-color: var(--dbv2-surface);
    border: 1px solid var(--dbv2-border);
    border-radius: var(--dbv2-radius-sm);
    padding: var(--dbv2-space-2);
    transition: border-color var(--dbv2-dur-hover) var(--dbv2-ease-out);
}

.saved-view-name-input:focus-visible[b-56b2ige3av] {
    outline: none;
    border-color: var(--dbv2-primary);
}

/* error state: a colliding or empty name washes the field red and surfaces the warning beneath */
.saved-view-name-input--error[b-56b2ige3av],
.saved-view-name-input--error:focus-visible[b-56b2ige3av] {
    border-color: var(--dbv2-error);
}

.saved-view-name-error[b-56b2ige3av] {
    color: var(--dbv2-error);
}

.saved-view-name-actions[b-56b2ige3av] {
    display: flex;
    justify-content: flex-end;
    gap: var(--dbv2-space-2);
}

.saved-view-name-cancel[b-56b2ige3av],
.saved-view-name-confirm[b-56b2ige3av] {
    font-size: var(--dbv2-font-size-sm);
    border-radius: var(--dbv2-radius-sm);
    padding: var(--dbv2-space-2) var(--dbv2-space-3);
    cursor: pointer;
    transition:
        background-color var(--dbv2-dur-hover) var(--dbv2-ease-out),
        opacity var(--dbv2-dur-hover) var(--dbv2-ease-out);
}

.saved-view-name-cancel[b-56b2ige3av] {
    color: var(--dbv2-text-secondary);
    background-color: transparent;
    border: 1px solid var(--dbv2-border);
}

.saved-view-name-cancel:hover[b-56b2ige3av] {
    background-color: var(--dbv2-canvas);
}

.saved-view-name-confirm[b-56b2ige3av] {
    color: var(--dbv2-on-primary);
    background-color: var(--dbv2-primary);
    border: 1px solid var(--dbv2-primary);
}

.saved-view-name-confirm:hover:not(:disabled)[b-56b2ige3av] {
    background-color: var(--dbv2-primary-dark);
}

.saved-view-name-confirm:disabled[b-56b2ige3av] {
    cursor: default;
    opacity: var(--dbv2-btn-disabled-opacity);
}
/* /Common/Components/QueryableDataGrid/SavedViewsControl.razor.rz.scp.css */
/* The saved-views control IS the qualifier bar's inner row (ADR-0027, specs #12–#20): the view picker
   leads at the left, the grid's filter field (slotted via FieldContent) grows to fill the middle, and the
   dirty affordances (reset icon + a Save split-button) trail at the right — each side fenced from the
   field by its own divider seam. It spans the bar (flex:1) and wraps when space runs short (spec #26) so
   the trailing controls drop below the field instead of forcing horizontal overflow; the field gives way
   first (min-width:0). flex-start keeps the picker and actions aligned to the field's first row when
   committed pills make the field grow tall. */
.saved-views[b-lj9680ipnh] {
    flex: 1 1 auto;
    display: flex;
    flex-wrap: wrap;
    align-items: flex-start;
    gap: var(--dbv2-space-2);
    min-width: 0;
}

/* ----- picker (leads at the left) ----------------------------------------------------------- */

/* The picker is fenced from the filter field on its right by a divider seam — space-2 of breathing room
   sits on each side of the line (padding-right here; the flex gap on the field side). min-height matches
   the field's row so the trigger lines up with it. */
.saved-views-picker[b-lj9680ipnh] {
    position: relative;
    flex: 0 0 auto;
    display: inline-flex;
    align-items: center;
    min-height: 2.25rem;
    padding-right: var(--dbv2-space-2);
    border-right: 0.0625rem solid var(--dbv2-border);
}

/* The trigger sits flush IN the bar band — it draws no box of its own (no surface fill, no border,
   no radius) so the view selector reads as part of the bar rather than a control nested inside it.
   The bar owns the frame; the trigger is just the "<view> ⌄" label + chevron with a subtle hover
   wash for affordance. */
.saved-views-trigger[b-lj9680ipnh] {
    display: inline-flex;
    align-items: center;
    gap: var(--dbv2-space-1);
    font-size: var(--dbv2-font-size-sm);
    color: var(--dbv2-text-primary);
    background: transparent;
    border: none;
    border-radius: var(--dbv2-radius-sm);
    padding: var(--dbv2-space-1) var(--dbv2-space-2);
    cursor: pointer;
    transition: background-color var(--dbv2-dur-hover) var(--dbv2-ease-out);
}

@media (hover: hover) and (pointer: fine) {
    .saved-views-trigger:hover[b-lj9680ipnh] {
        background-color: var(--dbv2-primary-wash);
    }
}

.saved-views-trigger:focus-visible[b-lj9680ipnh] {
    outline: 0.125rem solid var(--dbv2-primary);
    outline-offset: 0.125rem;
}

.saved-views-trigger-icon[b-lj9680ipnh] {
    font-size: var(--dbv2-icon-size-sm);
    color: var(--dbv2-text-tertiary);
}

/* The dropdown opens rightward from the trigger's left edge (left:0). The picker LEADS at the bar's left
   end, so opening rightward sends the 13.2rem panel inward across the bar — the filter field sits to its
   right, so there is ample room and the panel always stays on-screen. transform-origin:top left scales it
   out of the trigger corner it hangs from (interaction-polish). */
.saved-views-list[b-lj9680ipnh] {
    position: absolute;
    top: calc(100% + var(--dbv2-space-1));
    left: 0;
    z-index: 30;
    min-width: 8.4rem;
    max-width: 13.2rem;
    max-height: 18rem;
    overflow-y: auto;
    margin: 0;
    padding: var(--dbv2-space-1);
    list-style: none;
    background-color: var(--dbv2-surface);
    border: 1px solid var(--dbv2-border);
    border-radius: var(--dbv2-radius-md);
    box-shadow: var(--dbv2-shadow-md);

    transform-origin: top left;
    opacity: 1;
    transform: scale(1);
    transition:
        opacity var(--dbv2-dur-popover) var(--dbv2-ease-out),
        transform var(--dbv2-dur-popover) var(--dbv2-ease-out);

    @starting-style {
        opacity: 0;
        transform: scale(0.96);
    }
}

/* While a row's overflow menu is open, drop the list's scroll-clip so the in-row menu (anchored to its
   row's "…" button) can paint past the list's bottom edge. The list is normally a bounded scroll
   container (overflow-y:auto, which forces overflow-x to clip too) — that clip would otherwise hide the
   popover. overflow:visible only applies for the brief moment a menu is open; the picker has at most a
   handful of views, so the list rarely scrolls and the clip is effectively cosmetic the rest of the
   time. This keeps the menu anchored to the row the user clicked (spec #14) without a JS popover layer. */
.saved-views-list--menu-open[b-lj9680ipnh] {
    overflow: visible;
}

.saved-views-option[b-lj9680ipnh] {
    position: relative;
    display: flex;
    align-items: center;
    border-radius: var(--dbv2-radius-sm);

    /* state indication: the row reveals its overflow control on hover/focus-within only */
    transition: background-color var(--dbv2-dur-hover) var(--dbv2-ease-out);
}

.saved-views-option:hover[b-lj9680ipnh],
.saved-views-option--active[b-lj9680ipnh] {
    background-color: var(--dbv2-primary-wash);
}

.saved-views-option-select[b-lj9680ipnh] {
    flex: 1;
    display: flex;
    align-items: center;
    min-width: 0;
    font-size: var(--dbv2-font-size-sm);
    color: var(--dbv2-text-primary);
    background: transparent;
    border: none;
    padding: var(--dbv2-space-2) var(--dbv2-space-2);
    cursor: pointer;
    text-align: left;
}

.saved-views-option-label[b-lj9680ipnh] {
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
}

/* hover-only "…" overflow trigger: hidden until the row is hovered or keyboard-focused within */
.saved-views-overflow[b-lj9680ipnh] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    color: var(--dbv2-text-tertiary);
    background: transparent;
    border: none;
    padding: 0 var(--dbv2-space-1);
    cursor: pointer;
    opacity: 0;
    transition:
        opacity var(--dbv2-dur-hover) var(--dbv2-ease-out),
        color var(--dbv2-dur-hover) var(--dbv2-ease-out);
}

.saved-views-option:hover .saved-views-overflow[b-lj9680ipnh],
.saved-views-option:focus-within .saved-views-overflow[b-lj9680ipnh] {
    opacity: 1;
}

.saved-views-overflow:hover[b-lj9680ipnh] {
    color: var(--dbv2-text-primary);
}

.saved-views-overflow-icon[b-lj9680ipnh] {
    font-size: var(--dbv2-icon-size-sm);
}

/* Positioning context for the per-row overflow menu: the menu anchors to THIS wrapper (the row's "…"
   button) rather than to the picker, so it opens directly under the button the user clicked and its
   left edge lines up with the button's left edge (spec #14). */
.saved-views-overflow-wrap[b-lj9680ipnh] {
    position: relative;
    display: inline-flex;
    align-items: center;
}

/* ----- per-row overflow menu (Delete / Duplicate / Rename) ---------------------------------- */

/* The menu anchors to its row's "…" button (.saved-views-overflow-wrap, position:relative): it opens
   straight DOWN from the button (top:100% + a small gap) with its left edge flush to the button's left
   edge (left:0), so it reads as belonging to that row and never covers the "…" it sprang from. The list
   drops to overflow:visible while a menu is open (.saved-views-list--menu-open) so this in-row popover
   isn't clipped by the list's scroll bounds. */
.saved-views-menu[b-lj9680ipnh] {
    position: absolute;
    top: calc(100% + var(--dbv2-space-1));
    left: 0;
    z-index: 32;
    min-width: 11rem;
    margin: 0;
    padding: var(--dbv2-space-1);
    list-style: none;
    background-color: var(--dbv2-surface);
    border: 1px solid var(--dbv2-border);
    border-radius: var(--dbv2-radius-md);
    box-shadow: var(--dbv2-shadow-md);
}

.saved-views-menu-item[b-lj9680ipnh] {
    display: flex;
    align-items: center;
    gap: var(--dbv2-space-2);
    font-size: var(--dbv2-font-size-sm);
    color: var(--dbv2-text-primary);
    border-radius: var(--dbv2-radius-sm);
    padding: var(--dbv2-space-2) var(--dbv2-space-2);
    cursor: pointer;
    transition: background-color var(--dbv2-dur-hover) var(--dbv2-ease-out);
}

.saved-views-menu-item:hover[b-lj9680ipnh] {
    background-color: var(--dbv2-primary-wash);
}

.saved-views-menu-delete[b-lj9680ipnh] {
    color: var(--dbv2-error);
}

.saved-views-menu-delete:hover[b-lj9680ipnh] {
    background-color: var(--dbv2-error-lighter);
}

/* ----- dirty affordances: reset + Save split-button (trail at the right) --------------------- */

/* The trailing cluster sits at the bar's right end, fenced from the filter field on its left by a divider
   seam — the mirror of the picker's seam (space-2 of breathing room on each side: the flex gap on the
   field side, padding-left here). It is one flex item, so at narrow widths it wraps below the field as a
   unit (spec #26) rather than splitting reset from Save. */
.saved-views-actions[b-lj9680ipnh] {
    flex: 0 0 auto;
    display: inline-flex;
    align-items: center;
    gap: var(--dbv2-space-1);
    min-height: 2.25rem;
    padding-left: var(--dbv2-space-2);
    border-left: 0.0625rem solid var(--dbv2-border);
}

.saved-views-reset[b-lj9680ipnh] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    /* anchors the .dbv2-icon-text__icon glyph (1em) to the same small-text size as the Save label, so
       the reset button matches the Save split-button's height instead of being inflated by an oversized
       replay glyph. */
    font-size: var(--dbv2-font-size-sm);
    color: var(--dbv2-text-tertiary);
    background-color: var(--dbv2-surface);
    border: 1px solid var(--dbv2-border);
    border-radius: var(--dbv2-radius-md);
    padding: var(--dbv2-space-1) var(--dbv2-space-2);
    cursor: pointer;
    transition: color var(--dbv2-dur-hover) var(--dbv2-ease-out);
}

.saved-views-reset:hover[b-lj9680ipnh] {
    color: var(--dbv2-text-primary);
}

.saved-views-save-group[b-lj9680ipnh] {
    position: relative;
    display: inline-flex;
    align-items: stretch;
}

.saved-views-save[b-lj9680ipnh] {
    display: inline-flex;
    align-items: center;
    font-size: var(--dbv2-font-size-sm);
    /* match the reset + chevron height: those are icon-only, so their content is the 1em
       .dbv2-icon-text__icon box, while this label would otherwise stand at the font's normal line box
       (~1.26em under section 0's ascent/descent override) and read a few px taller. line-height:1 drops
       the label to a 1em line box so all three trailing controls share one height (the chevron stretches
       to this button inside .saved-views-save-group). */
    line-height: 1;
    color: var(--dbv2-on-primary);
    background-color: var(--dbv2-primary);
    border: 1px solid var(--dbv2-primary);
    border-radius: var(--dbv2-radius-md);
    padding: var(--dbv2-space-1) var(--dbv2-space-3);
    cursor: pointer;
    transition: background-color var(--dbv2-dur-hover) var(--dbv2-ease-out);
}

.saved-views-save:hover[b-lj9680ipnh] {
    background-color: var(--dbv2-primary-dark);
}

.saved-views-save-label[b-lj9680ipnh] {
    color: inherit;
}

/* when a chevron splits the button, square the abutting corners so they read as one control */
.saved-views-save-group:has(.saved-views-save-chevron) .saved-views-save[b-lj9680ipnh] {
    border-top-right-radius: 0;
    border-bottom-right-radius: 0;
}

.saved-views-save-chevron[b-lj9680ipnh] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    /* matches the Save label's size so the chevron glyph (.dbv2-icon-text__icon, 1em) reads as text, not
       an oversized Radzen-default icon. */
    font-size: var(--dbv2-font-size-sm);
    color: var(--dbv2-on-primary);
    background-color: var(--dbv2-primary);
    border: 1px solid var(--dbv2-primary);
    border-left-color: var(--dbv2-primary-dark);
    border-top-right-radius: var(--dbv2-radius-md);
    border-bottom-right-radius: var(--dbv2-radius-md);
    padding: 0 var(--dbv2-space-1);
    cursor: pointer;
    transition: background-color var(--dbv2-dur-hover) var(--dbv2-ease-out);
}

.saved-views-save-chevron:hover[b-lj9680ipnh] {
    background-color: var(--dbv2-primary-dark);
}

.saved-views-save-menu[b-lj9680ipnh] {
    position: absolute;
    top: calc(100% + var(--dbv2-space-1));
    right: 0;
    z-index: 31;
    min-width: 13rem;
    margin: 0;
    padding: var(--dbv2-space-1);
    list-style: none;
    background-color: var(--dbv2-surface);
    border: 1px solid var(--dbv2-border);
    border-radius: var(--dbv2-radius-md);
    box-shadow: var(--dbv2-shadow-md);
}

.saved-views-save-item[b-lj9680ipnh] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--dbv2-space-2);
    font-size: var(--dbv2-font-size-sm);
    color: var(--dbv2-text-primary);
    border-radius: var(--dbv2-radius-sm);
    padding: var(--dbv2-space-2) var(--dbv2-space-2);
    cursor: pointer;
    transition: background-color var(--dbv2-dur-hover) var(--dbv2-ease-out);
}

.saved-views-save-item:hover[b-lj9680ipnh] {
    background-color: var(--dbv2-primary-wash);
}

.saved-views-save-item-shortcut[b-lj9680ipnh] {
    color: var(--dbv2-text-tertiary);
}

/* The shortcut hint is a dense in-menu affordance, not a help-card reference: the chips read a touch
   snugger than the canonical keycap and the chord stays on ONE line — "Ctrl + ⇧ + S" must never wrap the
   trailing S onto a second row. The shared KeycapRow defaults to flex-wrap:wrap (right for the help
   popover, wrong in this width-bounded menu), so pin it to nowrap and tighten the chip footprint here.
   ::deep is required because the chips are rendered by the slotted KeycapRow/Keycap child components,
   which this component's scoped CSS can't otherwise reach. */
.saved-views-save-item-shortcut[b-lj9680ipnh]  .keycap-row {
    /* never break the chord — the S stays beside its modifiers — and let the separators' own padding
       carry the inter-key spacing so the row packs tight enough to fit without widening the menu. */
    flex-wrap: nowrap;
    gap: 0;
}

.saved-views-save-item-shortcut[b-lj9680ipnh]  .keycap {
    min-width: 1.25rem;
    height: 1.25rem;
    padding: 0 var(--dbv2-space-1);
}

/* ----- backdrop ----------------------------------------------------------------------------- */

.saved-views-backdrop[b-lj9680ipnh] {
    position: fixed;
    inset: 0;
    z-index: 20;
    background-color: transparent;
}
/* /Common/Components/RefineAttachmentList.razor.rz.scp.css */
/* ==========================================================================
   RefineAttachmentList — scoped styles
   Uses --dbv2-* design tokens from dbv2-theme.css
   ========================================================================== */

/* ── List container ────────────────────────────────────────────────────── */

.attachment-list[b-zxkhbxmaa8] {
    display: flex;
    flex-flow: row wrap;
    gap: var(--dbv2-space-2);
}


/* ── Individual tile ───────────────────────────────────────────────────── */

.attachment-tile[b-zxkhbxmaa8] {
    position: relative;
    width: var(--dbv2-attachment-thumb-size);
    height: var(--dbv2-attachment-thumb-size);
    flex-shrink: 0;
    border-radius: var(--dbv2-radius-sm);
    overflow: hidden;
    border: 1px solid var(--dbv2-border);
    background: var(--dbv2-canvas);
}

.attachment-thumb[b-zxkhbxmaa8] {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
}


/* ── Overlays (uploading / failed) ─────────────────────────────────────── */

.attachment-overlay[b-zxkhbxmaa8] {
    position: absolute;
    inset: 0;
    display: flex;
    align-items: center;
    justify-content: center;
}

.overlay-uploading[b-zxkhbxmaa8] {
    background: var(--dbv2-overlay);
}

.overlay-failed[b-zxkhbxmaa8] {
    background: var(--dbv2-overlay-heavy);
    cursor: default;
}

.attachment-error-badge[b-zxkhbxmaa8] {
    font-size: var(--dbv2-font-size-md);
    color: var(--dbv2-error);
    user-select: none;
}


/* ── Ready state — clickable open button ───────────────────────────────── */

.attachment-open[b-zxkhbxmaa8] {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    background: transparent;
    border: none;
    cursor: zoom-in;
    padding: 0;
    transition: background-color 0.15s ease;
}

.attachment-open:hover[b-zxkhbxmaa8] {
    background: var(--dbv2-overlay);
}


/* ── Remove (×) button ─────────────────────────────────────────────────── */

.attachment-remove[b-zxkhbxmaa8] {
    position: absolute;
    top: var(--dbv2-space-1);
    right: var(--dbv2-space-1);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: var(--dbv2-attachment-remove-size);
    height: var(--dbv2-attachment-remove-size);
    border: none;
    border-radius: var(--dbv2-radius-full);
    background: var(--dbv2-overlay);
    color: var(--dbv2-header-text);
    cursor: pointer;
    padding: 0;
    font-size: var(--dbv2-font-size-xs);
    line-height: 1;
    transition: background-color 0.15s ease;
    z-index: 1;
}

.attachment-remove:hover[b-zxkhbxmaa8] {
    background: var(--dbv2-overlay-heavy);
}
/* /Common/Components/SessionExpiredOverlay.razor.rz.scp.css */
.session-expired-backdrop[b-l0obhmlien] {
    position: fixed;
    inset: 0;
    z-index: 1200;
    display: flex;
    align-items: center;
    justify-content: center;
    background: var(--dbv2-overlay);
    overflow: hidden;
}

.session-expired-card[b-l0obhmlien] {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: var(--dbv2-space-4);
    padding: var(--dbv2-space-8) var(--dbv2-space-10);
    background: var(--dbv2-surface);
    border-radius: var(--dbv2-radius-lg);
    box-shadow: var(--dbv2-shadow-lg);
    max-width: 25rem;
    width: 90%;
    text-align: center;
    outline: none;
}

.card-icon[b-l0obhmlien] {
    font-size: 3rem; /* stylelint-disable-line declaration-property-value-disallowed-list -- decorative icon glyph, not type */
    color: var(--dbv2-muted);
}

.card-title[b-l0obhmlien] {
    margin: 0;
    font-size: var(--dbv2-font-size-xl);
    font-weight: var(--dbv2-font-weight-semibold);
    color: var(--dbv2-text);
}

.card-message[b-l0obhmlien] {
    margin: 0;
    font-size: var(--dbv2-font-size-sm);
    color: var(--dbv2-text-muted);
    line-height: 1.5;
}

.card-login-button[b-l0obhmlien] {
    padding: var(--dbv2-space-3) var(--dbv2-space-8);
    border: none;
    border-radius: var(--dbv2-radius-md);
    background: var(--dbv2-primary);
    color: var(--dbv2-on-primary);
    font-size: var(--dbv2-font-size-base);
    font-weight: var(--dbv2-font-weight-medium);
    cursor: pointer;
    transition: background 0.15s ease, box-shadow 0.15s ease;
}

.card-login-button:hover[b-l0obhmlien] {
    background: var(--dbv2-primary-dark, var(--dbv2-primary));
    box-shadow: var(--dbv2-shadow-sm);
}

.card-login-button:focus-visible[b-l0obhmlien] {
    outline: 2px solid var(--dbv2-primary);
    outline-offset: 2px;
}

.focus-sentinel[b-l0obhmlien] {
    position: absolute;
    width: 0.0625rem;
    height: 0.0625rem;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
}
/* /Common/Components/ZoomableImageDialog.razor.rz.scp.css */
.viewport[b-8y1ho6gobj] {
    position: relative;
    overflow: hidden;
    width: 100%;
    height: 100%;
    touch-action: none;
    background: var(--dbv2-canvas);
}

/* image-wrap fills the viewport so scale(1) reliably means "fit". The img
   inside uses object-fit: contain to letterbox to the viewport's aspect.
   transform-origin 0,0 keeps the cursor-centered zoom math
   (newPan = cursor - (cursor - oldPan) * ratio) stable regardless of image size. */
.image-wrap[b-8y1ho6gobj] {
    position: absolute;
    inset: 0;
    transform-origin: 0 0;
    will-change: transform;
    user-select: none;
}

.image-wrap img[b-8y1ho6gobj] {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: contain;
    user-select: none;
    -webkit-user-drag: none;
    pointer-events: none;
}

.toolbar[b-8y1ho6gobj] {
    position: absolute;
    top: var(--dbv2-space-2);
    right: var(--dbv2-space-2);
    display: flex;
    gap: var(--dbv2-space-1);
    background: var(--dbv2-overlay);
    border-radius: var(--dbv2-radius-sm);
    padding: var(--dbv2-space-1);
}

.toolbar button[b-8y1ho6gobj] {
    background: transparent;
    border: none;
    color: var(--dbv2-header-text);
    width: var(--dbv2-icon-button-size);
    height: var(--dbv2-icon-button-size);
    border-radius: var(--dbv2-radius-sm);
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    justify-content: center;
}

.toolbar button:hover[b-8y1ho6gobj] {
    background: color-mix(in srgb, var(--dbv2-header-text) 15%, transparent);
}
/* /Features/Ai/Components/AvatarSubjectSection.razor.rz.scp.css */
.section-hint[b-tw3d8w7k5e] {
    font-size: var(--dbv2-font-size-sm);
    color: var(--dbv2-text-secondary);
    margin: 0 0 var(--dbv2-space-3) 0;
}

.empty-state-text[b-tw3d8w7k5e] {
    font-size: var(--dbv2-font-size-sm);
    color: var(--dbv2-text-secondary);
    text-align: center;
    padding: var(--dbv2-space-4) 0;
    margin: 0;
}

.processing-indicator[b-tw3d8w7k5e] {
    display: flex;
    align-items: center;
    gap: var(--dbv2-space-3);
    padding: var(--dbv2-space-2) 0;
}

.processing-text[b-tw3d8w7k5e] {
    font-size: var(--dbv2-font-size-sm);
    color: var(--dbv2-text-secondary);
}

.avatar-grid[b-tw3d8w7k5e] {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(12.5rem, 1fr));
    gap: var(--dbv2-space-4);
}

.avatar-card[b-tw3d8w7k5e] {
    position: relative;
    display: flex;
    flex-direction: column;
    gap: var(--dbv2-space-2);
    padding: var(--dbv2-space-3);
    border: 2px solid var(--dbv2-border);
    border-radius: var(--dbv2-radius-md);
    background: var(--dbv2-canvas);
    cursor: pointer;
    transition: border-color 0.2s, box-shadow 0.2s;
}

.avatar-card:hover[b-tw3d8w7k5e] {
    border-color: var(--dbv2-primary);
    box-shadow: var(--dbv2-shadow-sm);
}

.avatar-card--selected[b-tw3d8w7k5e] {
    border-color: var(--dbv2-primary);
    box-shadow: 0 0 0 2px var(--dbv2-primary);
    background: color-mix(in srgb, var(--dbv2-primary) 5%, var(--dbv2-canvas));
}

.avatar-faces[b-tw3d8w7k5e] {
    display: flex;
    gap: var(--dbv2-space-2);
    justify-content: center;
}

.avatar-face[b-tw3d8w7k5e] {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.125rem;
}

.avatar-face-placeholder[b-tw3d8w7k5e] {
    width: 3rem;
    height: 3rem;
    border-radius: var(--dbv2-radius-sm);
    background: var(--dbv2-muted);
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--dbv2-text-secondary);
}

.avatar-face-label[b-tw3d8w7k5e] {
    font-size: var(--dbv2-font-size-xs);
    color: var(--dbv2-text-secondary);
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

.avatar-info[b-tw3d8w7k5e] {
    display: flex;
    flex-direction: column;
    gap: 0.125rem;
    text-align: center;
}

.avatar-name[b-tw3d8w7k5e] {
    font-size: var(--dbv2-font-size-sm);
    font-weight: var(--dbv2-font-weight-semibold);
    color: var(--dbv2-text-primary);
}

.avatar-desc[b-tw3d8w7k5e] {
    font-size: var(--dbv2-font-size-xs);
    color: var(--dbv2-text-secondary);
}

.avatar-selected-badge[b-tw3d8w7k5e] {
    position: absolute;
    top: var(--dbv2-space-2);
    right: var(--dbv2-space-2);
    color: var(--dbv2-primary);
}

@media (width <= 37.5rem) {
    .avatar-grid[b-tw3d8w7k5e] {
        grid-template-columns: 1fr;
    }
}
/* /Features/Ai/Components/BrandSubjectSection.razor.rz.scp.css */
.input-group[b-l5k118m3jf] {
    display: flex;
    flex-direction: column;
    gap: var(--dbv2-space-1);
    max-width: 26.25rem;
}

.input-label[b-l5k118m3jf] {
    font-size: var(--dbv2-font-size-sm);
    font-weight: var(--dbv2-font-weight-semibold);
    color: var(--dbv2-text-secondary);
}

.section-hint[b-l5k118m3jf] {
    font-size: var(--dbv2-font-size-sm);
    color: var(--dbv2-text-secondary);
    margin: 0 0 var(--dbv2-space-3) 0;
}
/* /Features/Ai/Components/ExtraDetailModal.razor.rz.scp.css */
.extra-detail-modal[b-5jf1y3ib09] {
    display: flex;
    flex-direction: column;
    gap: var(--dbv2-space-4);
    min-width: 22.5rem;
}

.extra-detail-modal-section[b-5jf1y3ib09] {
    display: flex;
    flex-direction: column;
    gap: var(--dbv2-space-2);
}

.extra-detail-modal-label[b-5jf1y3ib09] {
    font-size: var(--dbv2-font-size-sm);
    font-weight: var(--dbv2-font-weight-semibold);
    color: var(--dbv2-text-secondary);
}

.extra-detail-modal-outputs[b-5jf1y3ib09] {
    display: flex;
    flex-direction: column;
    gap: var(--dbv2-space-2);
}

.extra-detail-modal-output[b-5jf1y3ib09] {
    display: flex;
    align-items: center;
    gap: var(--dbv2-space-2);
    cursor: pointer;
}

.extra-detail-modal-output-name[b-5jf1y3ib09] {
    font-size: var(--dbv2-font-size-sm);
    color: var(--dbv2-text-primary);
}

.extra-detail-modal-empty[b-5jf1y3ib09] {
    margin: 0;
    font-size: var(--dbv2-font-size-sm);
    color: var(--dbv2-text-secondary);
}
/* /Features/Ai/Components/FramingCanvas.razor.rz.scp.css */
/* FramingCanvas — pan/zoom workspace.
   Layered rendering per design doc §4:
     1. Workspace background (warm charcoal)
     2. Source image (CSS transform: translate + scale)
     3. Source-bounds hairline (SVG, tracks transformed image bounds)
     4. Scrim (SVG full-bleed rect with knock-out mask on the frame area)
     5. Output frame (DOM div with --dbv2-primary hairline + shadow)
     6. Guide overlays (SVG clipped to frame) — anchor line, subject footprint
*/

.framing-canvas[b-ba9h31nyvb] {
    position: relative;
    width: 100%;
    height: 100%;
    overflow: hidden;
    background: var(--dbv2-editor-workspace);
    cursor: grab;
    outline: none;
    user-select: none;
    touch-action: none;
}

.framing-canvas:focus-visible[b-ba9h31nyvb] {
    /* Focus ring is inset so it doesn't visually fight the island border. */
    box-shadow: inset 0 0 0 2px var(--dbv2-primary);
}

.framing-canvas--panning[b-ba9h31nyvb] {
    cursor: grabbing;
}

.framing-canvas--space-held[b-ba9h31nyvb] {
    cursor: grab;
}

/* ── Source image layer ─────────────────────────────────────────────────── */

.framing-canvas__image-wrap[b-ba9h31nyvb] {
    position: absolute;
    top: 0;
    left: 0;
    transform-origin: 0 0;
    pointer-events: none;
    will-change: transform;
}

.framing-canvas__image[b-ba9h31nyvb] {
    display: block;
    width: auto;
    height: auto;
    pointer-events: none;
    user-select: none;

    /* Pixelated rendering keeps edges crisp when zoomed in past 100 %. */
    image-rendering: auto;
}

/* ── Output frame (DOM div, absolutely positioned) ──────────────────────── */

.framing-canvas__frame[b-ba9h31nyvb] {
    position: absolute;
    box-sizing: content-box;
    border: 1px solid var(--dbv2-primary);

    /* Soft lift so the frame reads above the scrim. */
    box-shadow: var(--dbv2-shadow-lg);
    pointer-events: none;
}

/* ── SVG overlay layers (scrim, guides, hairline) ───────────────────────── */

.framing-canvas__overlay[b-ba9h31nyvb] {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    pointer-events: none;

    /* Ensure guides sit above the image but below any floating controls. */
    z-index: 1;
}

.framing-canvas__scrim-rect[b-ba9h31nyvb] {
    /* Warm-charcoal scrim per design doc §4 (layer 4): the editor-workspace
       charcoal at 55 % opacity. */
    fill: color-mix(in srgb, var(--dbv2-editor-workspace) 55%, transparent);
}

.framing-canvas__bounds-rect[b-ba9h31nyvb] {
    fill: none;
    stroke: color-mix(in srgb, var(--dbv2-on-primary) 18%, transparent);
    stroke-width: 1;
    stroke-dasharray: 4 3;
    vector-effect: non-scaling-stroke;
}

.framing-canvas__bounds-rect--overlap[b-ba9h31nyvb] {
    stroke: var(--dbv2-primary);
}

.framing-canvas__anchor-line[b-ba9h31nyvb] {
    fill: none;
    stroke: var(--dbv2-primary);
    stroke-opacity: 0.7;
    stroke-width: 1.5;
    stroke-dasharray: 6 4;
    vector-effect: non-scaling-stroke;
}

.framing-canvas__anchor-line--violation[b-ba9h31nyvb] {
    stroke: var(--dbv2-warning);
    stroke-opacity: 1;
    stroke-width: 2;
}

.framing-canvas__anchor-label[b-ba9h31nyvb] {
    fill: var(--dbv2-primary);
    fill-opacity: 0.85;
    font-size: var(--dbv2-font-size-overline);
    font-weight: var(--dbv2-font-weight-medium);
    letter-spacing: 0.5px;
    text-transform: uppercase;
}

.framing-canvas__footprint-rect[b-ba9h31nyvb] {
    fill: none;
    stroke: var(--dbv2-info);
    stroke-opacity: 0.7;
    stroke-width: 1.5;
    stroke-dasharray: 6 4;
    vector-effect: non-scaling-stroke;
}

.framing-canvas__footprint-label[b-ba9h31nyvb] {
    fill: var(--dbv2-info);
    fill-opacity: 0.85;
    font-size: var(--dbv2-font-size-overline);
    font-weight: var(--dbv2-font-weight-medium);
    letter-spacing: 0.5px;
    text-transform: uppercase;
}
/* /Features/Ai/Components/FramingReviewCard.razor.rz.scp.css */
/* Framing-review body styles. The card frame and header live in
   ReviewStageCardShell.razor.css (spec #9 — one shared shell). */

/* Loading arm: spinner centred in the card body while framing rows are being produced
   (bead dbv2-czoqj.6.3 — mirrors ReviewElementCard .element-card-progress). */
.framing-card-progress[b-hgjcz3pfc2] {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: var(--dbv2-space-3);
    padding: var(--dbv2-space-6) 0;
}

/* Action row: Accept (conditional) + Edit side-by-side. */
.framing-card-actions[b-hgjcz3pfc2] {
    display: flex;
    gap: var(--dbv2-space-2);
    flex-wrap: wrap;
}

/* Pencil marker: surfaced when the operator has hand-edited the crop in the framing editor.
   Reads as a small supplementary label, not a primary action. */
.framing-card-edited-marker[b-hgjcz3pfc2] {
    display: flex;
    align-items: center;
    gap: var(--dbv2-space-1);
    font-size: var(--dbv2-font-size-xs);
    color: var(--dbv2-text-secondary);
}
/* /Features/Ai/Components/FramingSidebar.razor.rz.scp.css */
/* FramingSidebar — right-column island of the framing editor.

   Layout model (§5 of the design doc): flex column, sticky actions at the
   bottom via margin-top: auto on the action block. Padding lives on the
   outer island (.framing-editor__sidebar-island in the page CSS) so the
   sidebar itself fills edge-to-edge.
*/

.framing-sidebar[b-5p28mvrrml] {
    display: flex;
    flex-direction: column;
    gap: var(--dbv2-space-5);
    height: 100%;
    min-height: 0;
}

/* ── Inline error chip (save failure) ───────────────────────────────────── */

.framing-sidebar__error-chip[b-5p28mvrrml] {
    display: flex;
    align-items: center;
    gap: var(--dbv2-space-2);
    padding: var(--dbv2-space-2) var(--dbv2-space-3);
    font-size: var(--dbv2-font-size-sm);
    color: var(--dbv2-error-dark);
    background: color-mix(in srgb, var(--dbv2-error) 12%, transparent);
    border: 1px solid color-mix(in srgb, var(--dbv2-error) 24%, transparent);
    border-radius: var(--dbv2-radius-sm);
}

.framing-sidebar__error-chip-text[b-5p28mvrrml] {
    flex: 1;
    min-width: 0;
}

/* ── Violation chip (amber, from canvas Phase F) ────────────────────────── */

.framing-sidebar__violation-chip[b-5p28mvrrml] {
    display: flex;
    align-items: center;
    gap: var(--dbv2-space-2);
    padding: var(--dbv2-space-2) var(--dbv2-space-3);
    font-size: var(--dbv2-font-size-sm);
    color: var(--dbv2-warning-dark);
    background: color-mix(in srgb, var(--dbv2-warning) 12%, transparent);
    border: 1px solid color-mix(in srgb, var(--dbv2-warning) 24%, transparent);
    border-radius: var(--dbv2-radius-sm);
}

.framing-sidebar__violation-chip-text[b-5p28mvrrml] {
    flex: 1;
    min-width: 0;
}

/* ── Identity block ─────────────────────────────────────────────────────── */

.framing-sidebar__identity[b-5p28mvrrml] {
    display: flex;
    flex-direction: column;
    gap: var(--dbv2-space-1);
}

.framing-sidebar__overline[b-5p28mvrrml] {
    font-size: var(--dbv2-font-size-overline);
    font-weight: var(--dbv2-font-weight-medium);
    color: var(--dbv2-text-tertiary);
    text-transform: uppercase;
    letter-spacing: 0.06em;
}

.framing-sidebar__title[b-5p28mvrrml] {
    font-size: var(--dbv2-font-size-md);
    font-weight: var(--dbv2-font-weight-semibold);
    color: var(--dbv2-text-primary);
    margin: 0;
    line-height: 1.3;
}

.framing-sidebar__subtitle[b-5p28mvrrml] {
    font-size: var(--dbv2-font-size-sm);
    color: var(--dbv2-text-secondary);
    margin: 0;
    line-height: 1.4;

    /* Clip overly long text; full value exposed via `title` attr. */
    display: -webkit-box;
    -webkit-line-clamp: 3;
    line-clamp: 3;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

.framing-sidebar__meta[b-5p28mvrrml] {
    margin-top: var(--dbv2-space-1);
    font-size: var(--dbv2-font-size-xs);
    color: var(--dbv2-text-tertiary);
    font-variant-numeric: tabular-nums;
}

/* ── Status chip row (entry-state: Auto-proposed / Edited / Fallback used) ──
   The chip itself is the canonical `.dbv2-chip` primitive; this row just lays
   it out so it hugs its content rather than stretching. */

.framing-sidebar__chip-row[b-5p28mvrrml] {
    display: flex;
}

/* ── Rule details disclosure ────────────────────────────────────────────── */

.framing-sidebar__rule-details[b-5p28mvrrml] {
    border-top: 0.0625rem solid var(--dbv2-border-light);
    padding-top: var(--dbv2-space-3);
}

.framing-sidebar__rule-summary[b-5p28mvrrml] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--dbv2-space-2);
    cursor: pointer;
    color: var(--dbv2-text-secondary);
    font-size: var(--dbv2-font-size-sm);
    font-weight: var(--dbv2-font-weight-medium);
    list-style: none;
    user-select: none;
}

/* Hide default browser disclosure markers — the chevron lives inline. */
.framing-sidebar__rule-summary[b-5p28mvrrml]::-webkit-details-marker {
    display: none;
}

.framing-sidebar__rule-summary[b-5p28mvrrml]::marker {
    content: "";
}

.framing-sidebar__rule-summary .rz-icon[b-5p28mvrrml],
.framing-sidebar__rule-summary i[b-5p28mvrrml] {
    color: var(--dbv2-text-tertiary);
    transition: transform 0.15s ease;
}

.framing-sidebar__rule-details[open] .framing-sidebar__rule-summary .rz-icon[b-5p28mvrrml],
.framing-sidebar__rule-details[open] .framing-sidebar__rule-summary i[b-5p28mvrrml] {
    transform: rotate(180deg);
}

.framing-sidebar__rule-rows[b-5p28mvrrml] {
    display: flex;
    flex-direction: column;
    gap: var(--dbv2-space-2);
    margin: var(--dbv2-space-3) 0 0 0;
    padding: 0;
}

.framing-sidebar__rule-row[b-5p28mvrrml] {
    display: grid;
    grid-template-columns: auto 1fr;
    gap: var(--dbv2-space-3);
    align-items: baseline;
    margin: 0;
}

.framing-sidebar__rule-row dt[b-5p28mvrrml] {
    font-size: var(--dbv2-font-size-sm);
    color: var(--dbv2-text-secondary);
    margin: 0;
}

.framing-sidebar__rule-row dd[b-5p28mvrrml] {
    font-size: var(--dbv2-font-size-sm);
    color: var(--dbv2-text-primary);
    text-align: right;
    font-variant-numeric: tabular-nums;
    margin: 0;
}

/* ── Sticky actions block ───────────────────────────────────────────────── */

/* Layout (vertical full-width stack + gap) comes from `.dbv2-actions--stack`;
   this rule only pins the block to the bottom of the flex column. */
.framing-sidebar__actions[b-5p28mvrrml] {
    margin-top: auto;
}

/* Shortcuts link styled as a subtle text button. */
.framing-sidebar__shortcuts-link[b-5p28mvrrml] {
    margin-top: var(--dbv2-space-3);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: var(--dbv2-space-2);
    background: transparent;
    border: none;
    padding: var(--dbv2-space-2);
    font-size: var(--dbv2-font-size-xs);
    color: var(--dbv2-text-tertiary);
    cursor: pointer;
    border-radius: var(--dbv2-radius-sm);
    transition: color 0.15s ease, background 0.15s ease;
}

.framing-sidebar__shortcuts-link:hover[b-5p28mvrrml] {
    color: var(--dbv2-text-secondary);
    background: var(--dbv2-muted);
}

.framing-sidebar__shortcuts-link:focus-visible[b-5p28mvrrml] {
    outline: 2px solid var(--dbv2-primary);
    outline-offset: 2px;
}
/* /Features/Ai/Components/GenerationHistoryPanel.razor.rz.scp.css */
.history-panel[b-sw9hxadggt] {
    margin-top: var(--dbv2-space-3);
    box-shadow: 0 -1px 0 var(--dbv2-border);
    padding-top: var(--dbv2-space-3);
}

.history-summary[b-sw9hxadggt] {
    display: flex;
    align-items: center;
    gap: var(--dbv2-space-2);
    cursor: pointer;
    color: var(--dbv2-text-secondary);
    font-size: var(--dbv2-font-size-sm);
    list-style: none;
}

.history-summary[b-sw9hxadggt]::-webkit-details-marker {
    display: none;
}

.history-entries[b-sw9hxadggt] {
    display: grid;
    grid-template-rows: 1fr;
    margin-top: var(--dbv2-space-3);
}

.history-panel[open] .history-entries[b-sw9hxadggt] {
    animation: history-in-b-sw9hxadggt var(--dbv2-dur-popover) var(--dbv2-ease-out) both;
}

.history-chevron[b-sw9hxadggt] {
    transition: transform var(--dbv2-dur-popover) var(--dbv2-ease-out);
}

.history-panel[open] .history-chevron[b-sw9hxadggt] {
    transform: rotate(90deg);
}

@keyframes history-in-b-sw9hxadggt {
    from {
        opacity: 0;
        transform: translateY(4px);
    }

    to {
        opacity: 1;
        transform: translateY(0);
    }
}

.history-entry[b-sw9hxadggt] {
    display: flex;
    align-items: flex-start;
    gap: var(--dbv2-space-3);
    padding: var(--dbv2-space-2);
    border-radius: var(--dbv2-radius-sm);
}

.history-entry + .history-entry[b-sw9hxadggt] {
    box-shadow: 0 -1px 0 var(--dbv2-border);
}

.history-entry-body[b-sw9hxadggt] {
    display: flex;
    flex-direction: column;
    gap: var(--dbv2-space-1);
    min-width: 0;
}

.history-entry-head[b-sw9hxadggt] {
    display: flex;
    align-items: baseline;
    gap: var(--dbv2-space-2);
}

.history-attempt[b-sw9hxadggt] {
    font-size: var(--dbv2-font-size-sm);
    font-weight: var(--dbv2-font-weight-semibold);
    color: var(--dbv2-text-primary);
}

.history-reason[b-sw9hxadggt] {
    font-size: var(--dbv2-font-size-xs);
    color: var(--dbv2-text-tertiary);
}

.history-verdict-line[b-sw9hxadggt] {
    display: flex;
    align-items: baseline;
    gap: var(--dbv2-space-2);
    flex-wrap: wrap;
}

.history-verdict-kind[b-sw9hxadggt] {
    font-size: var(--dbv2-font-size-sm);
    color: var(--dbv2-text-secondary);
}

.history-verdict-kind--accept[b-sw9hxadggt] {
    color: var(--dbv2-success);
}

.history-verdict-kind--refine[b-sw9hxadggt] {
    color: var(--dbv2-text-secondary);
}

.history-verdict-meta[b-sw9hxadggt] {
    font-size: var(--dbv2-font-size-xs);
    color: var(--dbv2-text-tertiary);
}

.history-verdict-feedback[b-sw9hxadggt] {
    margin: 0;
    padding: var(--dbv2-space-1) var(--dbv2-space-2);
    border-radius: var(--dbv2-radius-sm);
    background: var(--dbv2-muted);
    font-size: var(--dbv2-font-size-sm);
    color: var(--dbv2-text-secondary);
    font-style: italic;
}
/* /Features/Ai/Components/InputsGrid.razor.rz.scp.css */
.inputs-island[b-62hjsnk2r3] {
    display: flex;
    flex-direction: column;
    gap: var(--dbv2-space-3);
}

.inputs-island .dbv2-island-title[b-62hjsnk2r3] {
    margin-bottom: 0;
}

.inputs-empty[b-62hjsnk2r3] {
    font-size: var(--dbv2-font-size-sm);
    color: var(--dbv2-text-secondary);
    margin: 0;
}

.inputs-grid[b-62hjsnk2r3] {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: var(--dbv2-space-4);
}

.input-tile[b-62hjsnk2r3] {
    position: relative;
    display: flex;
    flex-direction: column;
    gap: var(--dbv2-space-2);
    padding: var(--dbv2-space-3);
    border: 1px solid var(--dbv2-border);
    border-radius: var(--dbv2-radius-md);
    background: var(--dbv2-canvas);
    font: inherit;
    color: inherit;
    text-align: left;
}

.input-tile--required[b-62hjsnk2r3] {
    border-color: var(--dbv2-primary);
}

.input-tile-required[b-62hjsnk2r3] {
    position: absolute;
    top: var(--dbv2-space-2);
    right: var(--dbv2-space-2);
    z-index: 1;
    padding: 0.125rem var(--dbv2-space-2);
    font-size: var(--dbv2-font-size-xs);
    font-weight: var(--dbv2-font-weight-semibold);
    color: var(--dbv2-primary-dark);
    background: var(--dbv2-primary-tint);
    border-radius: var(--dbv2-radius-full);
}

.input-tile-bucket[b-62hjsnk2r3]  .image-preview-grid {
    display: block;
    columns: 2;
    column-gap: var(--dbv2-space-2);
}

.input-tile-bucket[b-62hjsnk2r3]  .image-preview-item {
    break-inside: avoid;
    margin-bottom: var(--dbv2-space-2);
}

.input-tile-thumb[b-62hjsnk2r3] {
    aspect-ratio: 1 / 1;
    border-radius: var(--dbv2-radius-sm);
    overflow: hidden;
    background: var(--dbv2-muted);
}

.input-tile-thumb img[b-62hjsnk2r3] {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.input-tile-thumb-empty[b-62hjsnk2r3] {
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--dbv2-text-tertiary);
    font-size: var(--dbv2-font-size-xs);
}

/* Single-image port slot: present its preview and dropzone as a filled square so a
   populated port tile reads like an extra-detail card (large image, title above) and
   empty/filled port tiles keep a consistent height across the grid. Scoped to the
   grid via ::deep so the shared ImageUploadSlot stays unchanged in the modals. */
.input-tile[b-62hjsnk2r3]  .upload-preview {
    aspect-ratio: 1 / 1;
}

.input-tile[b-62hjsnk2r3]  .upload-preview img {
    width: 100%;
    height: 100%;
    max-height: none;
    object-fit: cover;
}

.input-tile[b-62hjsnk2r3]  .upload-dropzone,
.input-tile[b-62hjsnk2r3]  .upload-loading {
    aspect-ratio: 1 / 1;
    padding: var(--dbv2-space-4);
}

.input-tile-label[b-62hjsnk2r3] {
    font-weight: var(--dbv2-font-weight-semibold);
    color: var(--dbv2-text-primary);
}

.input-tile-chips[b-62hjsnk2r3] {
    display: flex;
    flex-wrap: wrap;
    gap: var(--dbv2-space-1);
}

.input-tile-chip[b-62hjsnk2r3] {
    font-size: var(--dbv2-font-size-xs);
    padding: 0.125rem var(--dbv2-space-2);
    background: var(--dbv2-muted);
    color: var(--dbv2-text-secondary);
    border-radius: var(--dbv2-radius-full);
}

.input-tile--extra[b-62hjsnk2r3] {
    cursor: pointer;
    transition: border-color 0.15s ease, box-shadow 0.15s ease;
}

.input-tile--extra:hover[b-62hjsnk2r3] {
    border-color: var(--dbv2-primary);
    box-shadow: var(--dbv2-shadow-sm);
}

/* Anchors the overlay remove control to the image, not the whole tile (the label
   now sits above the image). */
.input-tile-media[b-62hjsnk2r3] {
    position: relative;
}

/* Same chrome as the single slot's .upload-clear — dark circular overlay, light
   icon — so the card's remove reads as the same affordance as the image-clear on a
   normal upload, even though here it removes the entire extra-detail card. */
.input-tile-remove[b-62hjsnk2r3] {
    position: absolute;
    top: var(--dbv2-space-2);
    right: var(--dbv2-space-2);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: var(--dbv2-icon-button-size);
    height: var(--dbv2-icon-button-size);
    border: none;
    border-radius: var(--dbv2-radius-full);
    background: var(--dbv2-overlay);
    color: var(--dbv2-header-text);
    cursor: pointer;
    transition: background-color 0.15s ease;
}

.input-tile-remove:hover[b-62hjsnk2r3] {
    background: var(--dbv2-overlay-heavy);
}

.input-tile--add[b-62hjsnk2r3] {
    color: var(--dbv2-text-secondary);
    border-style: dashed;
    cursor: pointer;
    text-align: center;
    transition: color 0.15s ease, border-color 0.15s ease;
}

.input-tile--add:hover[b-62hjsnk2r3] {
    color: var(--dbv2-primary);
    border-color: var(--dbv2-primary);
}

/* Square inner so the add tile fills the same footprint as a populated card
   instead of collapsing to the height of its icon + label. */
.input-tile-add-inner[b-62hjsnk2r3] {
    aspect-ratio: 1 / 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: var(--dbv2-space-2);
}

@media (width <= 64rem) {
    .inputs-grid[b-62hjsnk2r3] {
        grid-template-columns: repeat(2, 1fr);
    }
}

@media (width <= 37.5rem) {
    .inputs-grid[b-62hjsnk2r3] {
        grid-template-columns: 1fr;
    }
}
/* /Features/Ai/Components/KeyboardShortcutsPopover.razor.rz.scp.css */
/* Keyboard-shortcuts reference card. Fixed-position modal with a semi-
   transparent backdrop. Intentionally lightweight — no Radzen popup plumbing
   because anchoring against the canvas SVG overlay was brittle; the static
   card has no positional requirements.
*/

.shortcuts-popover__backdrop[b-q3vxr45ngx] {
    position: fixed;
    inset: 0;
    background: var(--dbv2-overlay);
    z-index: 1000;
    animation: shortcuts-popover-fade-in-b-q3vxr45ngx 150ms ease-out;

    /* The backdrop uses its own from/to since it has no translate transform. */
    animation-name: shortcuts-popover-backdrop-fade-b-q3vxr45ngx;
}

.shortcuts-popover[b-q3vxr45ngx] {
    position: fixed;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    z-index: 1001;
    min-width: 22.5rem;
    max-width: min(90vw, 30rem);
    padding: var(--dbv2-space-6);
    background: var(--dbv2-surface);
    border-radius: var(--dbv2-radius-lg);
    box-shadow: var(--dbv2-shadow-lg);
    animation: shortcuts-popover-fade-in-b-q3vxr45ngx 150ms ease-out;
}

.shortcuts-popover:focus-visible[b-q3vxr45ngx] {
    outline: 2px solid var(--dbv2-primary);
    outline-offset: 2px;
}

.shortcuts-popover__header[b-q3vxr45ngx] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--dbv2-space-3);
    margin-bottom: var(--dbv2-space-4);
}

.shortcuts-popover__title[b-q3vxr45ngx] {
    font-size: var(--dbv2-font-size-md);
    font-weight: var(--dbv2-font-weight-semibold);
    color: var(--dbv2-text-primary);
    margin: 0;
    line-height: 1.2;
}

.shortcuts-popover__close[b-q3vxr45ngx] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 1.75rem;
    height: 1.75rem;
    padding: 0;
    border: 0;
    border-radius: var(--dbv2-radius-sm);
    background: transparent;
    color: var(--dbv2-text-tertiary);
    cursor: pointer;
    transition: background-color 0.15s ease, color 0.15s ease;
}

.shortcuts-popover__close:hover[b-q3vxr45ngx],
.shortcuts-popover__close:focus-visible[b-q3vxr45ngx] {
    background: var(--dbv2-muted);
    color: var(--dbv2-text-primary);
    outline: none;
}

/* ── Shortcut table ─────────────────────────────────────────────────────── */

.shortcuts-popover__table[b-q3vxr45ngx] {
    width: 100%;
    border-collapse: collapse;
    font-size: var(--dbv2-font-size-sm);
    color: var(--dbv2-text-primary);
}

.shortcuts-popover__table tr + tr td[b-q3vxr45ngx] {
    border-top: 0.0625rem solid var(--dbv2-border-light);
}

.shortcuts-popover__table td[b-q3vxr45ngx] {
    padding: var(--dbv2-space-2) 0;
    vertical-align: middle;
}

.shortcuts-popover__keys[b-q3vxr45ngx] {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--dbv2-space-1);
    padding-right: var(--dbv2-space-4);
    white-space: nowrap;
}

@keyframes shortcuts-popover-fade-in-b-q3vxr45ngx {
    from {
        opacity: 0;
        transform: translate(-50%, -48%);
    }

    to {
        opacity: 1;
        transform: translate(-50%, -50%);
    }
}

@keyframes shortcuts-popover-backdrop-fade-b-q3vxr45ngx {
    from { opacity: 0; }
    to   { opacity: 1; }
}

@media (prefers-reduced-motion: reduce) {
    .shortcuts-popover[b-q3vxr45ngx],
    .shortcuts-popover__backdrop[b-q3vxr45ngx] {
        animation: none;
    }
}
/* /Features/Ai/Components/ProductAttributeOptionCard.razor.rz.scp.css */
.option-card[b-pz1nn7b001] {
    display: flex;
    align-items: center;
    gap: var(--dbv2-space-2);
    padding: var(--dbv2-space-3);
    border: 1px solid var(--dbv2-border);
    border-radius: var(--dbv2-radius-sm);
    background: var(--dbv2-surface);
    cursor: pointer;
    user-select: none;
    outline: none;
    transition: border-color 0.15s ease, background-color 0.15s ease, box-shadow 0.15s ease;
}

.option-card:hover[b-pz1nn7b001] {
    border-color: var(--dbv2-primary-light);
    background: var(--dbv2-primary-tint);
}

.option-card:focus-visible[b-pz1nn7b001] {
    box-shadow: 0 0 0 2px var(--dbv2-primary);
}

.option-card--selected[b-pz1nn7b001] {
    border-color: var(--dbv2-primary);
    background: var(--dbv2-primary-tint);
    box-shadow: 0 0 0 1px var(--dbv2-primary);
}

.option-card__indicator[b-pz1nn7b001] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    color: var(--dbv2-text-tertiary);
    flex-shrink: 0;
    line-height: 1;
}

.option-card--selected .option-card__indicator[b-pz1nn7b001] {
    color: var(--dbv2-primary);
}

.option-card__indicator :deep(.rzi)[b-pz1nn7b001],
.option-card__indicator :deep(.notranslate)[b-pz1nn7b001] {
    font-size: var(--dbv2-font-size-lg);
    line-height: 1;
}

.option-card__label[b-pz1nn7b001] {
    font-size: var(--dbv2-font-size-sm);
    font-weight: var(--dbv2-font-weight-medium);
    color: var(--dbv2-text-primary);
    line-height: 1.3;
}
/* /Features/Ai/Components/ProductAttributesSection.razor.rz.scp.css */
.product-attributes-section .attr-block[b-ri15u56fel] {
    display: flex;
    flex-direction: column;
    gap: var(--dbv2-space-3);
    padding: var(--dbv2-space-4) 0;
    border-bottom: thin solid var(--dbv2-border);
}

.product-attributes-section .attr-block:first-of-type[b-ri15u56fel] {
    padding-top: var(--dbv2-space-2);
}

.product-attributes-section .attr-block:last-child[b-ri15u56fel] {
    border-bottom: none;
    padding-bottom: 0;
}

.attr-header[b-ri15u56fel] {
    display: flex;
    align-items: baseline;
    gap: var(--dbv2-space-2);
    flex-wrap: wrap;
}

.attr-name[b-ri15u56fel] {
    font-size: var(--dbv2-font-size-base);
    font-weight: var(--dbv2-font-weight-semibold);
    color: var(--dbv2-text-primary);
}

.attr-required[b-ri15u56fel] {
    color: var(--dbv2-error);
    font-weight: var(--dbv2-font-weight-bold);
    cursor: help;
}

.attr-desc[b-ri15u56fel] {
    font-size: var(--dbv2-font-size-xs);
    color: var(--dbv2-text-tertiary);
}

.section-hint[b-ri15u56fel] {
    margin: 0 0 var(--dbv2-space-2) 0;
    font-size: var(--dbv2-font-size-sm);
    color: var(--dbv2-text-secondary);
}

.attr-option-grid[b-ri15u56fel] {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(10rem, 1fr));
    gap: var(--dbv2-space-4);
}
/* /Features/Ai/Components/ProductDetailsCard.razor.rz.scp.css */
.product-details-card .attr-block[b-aguqsgznuc] {
    display: flex;
    flex-direction: column;
    gap: var(--dbv2-space-3);
    padding: var(--dbv2-space-4) 0;
    border-bottom: 0.0625rem solid var(--dbv2-border);
}

.product-details-card .attr-block:first-of-type[b-aguqsgznuc] {
    padding-top: var(--dbv2-space-2);
}

.product-details-card .attr-block:last-child[b-aguqsgznuc] {
    border-bottom: none;
    padding-bottom: 0;
}

.attr-header[b-aguqsgznuc] {
    display: flex;
    align-items: baseline;
    gap: var(--dbv2-space-2);
    flex-wrap: wrap;
}

.attr-name[b-aguqsgznuc] {
    font-size: var(--dbv2-font-size-base);
    font-weight: var(--dbv2-font-weight-semibold);
    color: var(--dbv2-text-primary);
}

.attr-required[b-aguqsgznuc] {
    color: var(--dbv2-error);
    font-weight: var(--dbv2-font-weight-bold);
    cursor: help;
}

.attr-desc[b-aguqsgznuc] {
    font-size: var(--dbv2-font-size-xs);
    color: var(--dbv2-text-tertiary);
}

.section-hint[b-aguqsgznuc] {
    margin: 0 0 var(--dbv2-space-2) 0;
    font-size: var(--dbv2-font-size-sm);
    color: var(--dbv2-text-secondary);
}

.attr-option-grid[b-aguqsgznuc] {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(10rem, 1fr));
    gap: var(--dbv2-space-4);
}
/* /Features/Ai/Components/ProductSubjectSection.razor.rz.scp.css */
.product-inputs[b-px6orz1b7k] {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: var(--dbv2-space-4);
}

.input-group[b-px6orz1b7k] {
    display: flex;
    flex-direction: column;
    gap: var(--dbv2-space-1);
}

.input-label[b-px6orz1b7k] {
    font-size: var(--dbv2-font-size-sm);
    font-weight: var(--dbv2-font-weight-semibold);
    color: var(--dbv2-text-secondary);
}

@media (width <= 37.5rem) {
    .product-inputs[b-px6orz1b7k] {
        grid-template-columns: 1fr;
    }
}
/* /Features/Ai/Components/ReviewElementCard.razor.rz.scp.css */
/* Image-review body styles. The outer card frame and header live in
   ReviewStageCardShell.razor.css (spec #9 — one shared shell). */

.element-card-image-frame[b-uz1v3noo0v] {
    position: relative;
    border-radius: var(--dbv2-radius-sm);
    overflow: hidden;
    cursor: pointer;
}

/* Zoom affordance: a hint icon revealed on hover; clicking the frame opens the
   full-size ZoomableImageDialog. */
.element-card-zoom-hint[b-uz1v3noo0v] {
    position: absolute;
    bottom: var(--dbv2-space-2);
    right: var(--dbv2-space-2);
    display: flex;
    align-items: center;
    justify-content: center;
    width: var(--dbv2-icon-button-size);
    height: var(--dbv2-icon-button-size);
    border-radius: var(--dbv2-radius-sm);
    background: var(--dbv2-overlay);
    color: var(--dbv2-header-text);
    opacity: 0;
    transition: opacity 0.2s ease;
    pointer-events: none;
}

.element-card-image-frame:hover .element-card-zoom-hint[b-uz1v3noo0v] {
    opacity: 1;
}

.element-card-image[b-uz1v3noo0v] {
    display: block;
    width: 100%;
    aspect-ratio: 3 / 4;
    object-fit: cover;
}

.element-card-image-frame--accepted .element-card-image[b-uz1v3noo0v] {
    outline: 2px solid var(--dbv2-success);
    outline-offset: -2px;
    border-radius: var(--dbv2-radius-sm);
}

.element-card-reviewed-by[b-uz1v3noo0v] {
    margin: 0;
    font-size: var(--dbv2-font-size-sm);
    color: var(--dbv2-text-secondary);
}

/* Decision row: Accept and Retry, the two mutually-exclusive verdicts, sit above the refine box in
   two centered columns so they read as far apart. justify-items centers each button within its half,
   pushing the pair toward the card edges. */
.element-card-decision[b-uz1v3noo0v] {
    display: grid;
    grid-template-columns: 1fr 1fr;
    justify-items: center;
    gap: var(--dbv2-space-3);
}

/* "or" divider: a centered label flanked by hairlines, framing Refine as the third, distinct path. */
.element-card-or[b-uz1v3noo0v] {
    display: flex;
    align-items: center;
    gap: var(--dbv2-space-3);
    color: var(--dbv2-text-tertiary);
}

.element-card-or[b-uz1v3noo0v]::before,
.element-card-or[b-uz1v3noo0v]::after {
    content: "";
    flex: 1;

    /* Only the top edge is styled, so just that 1px hairline renders; border-width (not the
       border-top longhand) carries the literal px the token linter allows in border contexts. */
    border-width: 1px;
    border-top-style: solid;
    border-color: var(--dbv2-border);
}

.element-card-or-text[b-uz1v3noo0v] {
    font-size: var(--dbv2-font-size-xs);
    letter-spacing: 0.08em;
    text-transform: uppercase;
}

/* Refine path: the attachment strip, the feedback box, then the affordances + submit on one row. */
.element-card-refine[b-uz1v3noo0v] {
    display: flex;
    flex-direction: column;
    gap: var(--dbv2-space-2);
}

.element-card-feedback-textarea[b-uz1v3noo0v] {
    width: 100%;
}

/* Paperclip + counter sit at the left, the Refine submit at the right, on one row. */
.element-card-refine-controls[b-uz1v3noo0v] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--dbv2-space-2);
}

.element-card-refine-affordances[b-uz1v3noo0v] {
    display: flex;
    align-items: center;
    gap: var(--dbv2-space-2);
}

/* Refine attachment affordances (bead dbv2-hjmoc.7): paperclip and counter,
   gated by a positive AttachmentBudget. */
.element-card-paperclip[b-uz1v3noo0v] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: var(--dbv2-icon-button-size);
    height: var(--dbv2-icon-button-size);
    border-radius: var(--dbv2-radius-sm);
    color: var(--dbv2-text-tertiary);
    cursor: pointer;
    transition: color 0.15s ease, background-color 0.15s ease;
}

.element-card-paperclip:hover[b-uz1v3noo0v] {
    color: var(--dbv2-text-secondary);
    background: var(--dbv2-border-light);
}

.element-card-counter[b-uz1v3noo0v] {
    font-size: var(--dbv2-font-size-xs);
    color: var(--dbv2-text-tertiary);
}

.element-card-progress[b-uz1v3noo0v] {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: var(--dbv2-space-3);
    padding: var(--dbv2-space-8) 0;
}

.element-card-progress-text[b-uz1v3noo0v] {
    font-size: var(--dbv2-font-size-sm);
    color: var(--dbv2-text-secondary);
}

/* Mid-action regenerate (Bug #2): the spinner stands in for the image while a retry/refine
   is in flight. Holds the image's 3/4 frame so swapping the image for the spinner — and back —
   keeps the card height steady. */
.element-card-busy[b-uz1v3noo0v] {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: var(--dbv2-space-3);
    aspect-ratio: 3 / 4;
    border-radius: var(--dbv2-radius-sm);
    background: var(--dbv2-muted);
}

.element-card-busy-text[b-uz1v3noo0v] {
    font-size: var(--dbv2-font-size-sm);
    color: var(--dbv2-text-secondary);
}

.element-card-failed[b-uz1v3noo0v] {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: var(--dbv2-space-2);
    padding: var(--dbv2-space-6) var(--dbv2-space-4);
    text-align: center;
}

.element-card-failed-icon[b-uz1v3noo0v] {
    color: var(--dbv2-error);
}

.element-card-failed-text[b-uz1v3noo0v] {
    margin: 0;
    font-size: var(--dbv2-font-size-base);
    font-weight: var(--dbv2-font-weight-semibold);
    color: var(--dbv2-text-primary);
}

.element-card-failed-detail[b-uz1v3noo0v] {
    margin: 0;
    font-size: var(--dbv2-font-size-sm);
    color: var(--dbv2-text-secondary);
    overflow-wrap: anywhere;
}
/* /Features/Ai/Components/ReviewStageCardShell.razor.rz.scp.css */
/* The shared card frame: all review-grid cards (image-review + framing-review) share this
   container and header so a layout change applies to both body types at once (spec #9). */
.element-card[b-uf71j3lh9j] {
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: var(--dbv2-space-3);
}

.element-card-header[b-uf71j3lh9j] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--dbv2-space-2);
}

.element-card-header .dbv2-island-title[b-uf71j3lh9j] {
    margin: 0;
}
/* /Features/Ai/Components/ReviewStageSurface.razor.rz.scp.css */
.stage-loading[b-s6fey7xx98] {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: var(--dbv2-space-3);
    padding: var(--dbv2-space-6) 0;
}

.stage-loading-text[b-s6fey7xx98] {
    font-size: var(--dbv2-font-size-sm);
    color: var(--dbv2-text-secondary);
}

.stage-missing[b-s6fey7xx98] {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: var(--dbv2-space-3);
    padding: var(--dbv2-space-8) var(--dbv2-space-6);
    text-align: center;
}

.stage-missing-icon[b-s6fey7xx98] {
    color: var(--dbv2-error);
}

.stage-missing-title[b-s6fey7xx98] {
    margin: 0;
    font-size: var(--dbv2-font-size-base);
    color: var(--dbv2-text-primary);
}

/* Stage header: "Step k of N" eyebrow, the Review node's Name as the heading, optional blurb. */
.stage-header[b-s6fey7xx98] {
    display: flex;
    flex-direction: column;
    gap: var(--dbv2-space-1);
    margin-bottom: var(--dbv2-space-5);
    animation: stage-in-b-s6fey7xx98 var(--dbv2-dur-modal) var(--dbv2-ease-out) both;
}

@keyframes stage-in-b-s6fey7xx98 {
    from {
        opacity: 0;
        transform: translateY(8px);
    }

    to {
        opacity: 1;
        transform: translateY(0);
    }
}

.stage-header-row[b-s6fey7xx98] {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: var(--dbv2-space-3);
}

.stage-step[b-s6fey7xx98] {
    font-size: var(--dbv2-font-size-xs);
    font-weight: var(--dbv2-font-weight-semibold);
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--dbv2-primary);
}

.stage-title[b-s6fey7xx98] {
    margin: 0;
    font-size: var(--dbv2-font-size-xl);
    font-weight: var(--dbv2-font-weight-semibold);
    color: var(--dbv2-text-primary);
}

.stage-description[b-s6fey7xx98] {
    margin: 0;
    max-width: 65ch;
    font-size: var(--dbv2-font-size-base);
    color: var(--dbv2-text-secondary);
}

/* One grid of per-element cards, side-by-side — mirrors the legacy Ecom review grid. */
.review-grid[b-s6fey7xx98] {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(21rem, 1fr));
    gap: var(--dbv2-space-4);
    align-items: start;
}

/* Framing stage: one row per deliverable so the deliverable's ~2 framings sit side-by-side.
   Spans all columns of the parent .review-grid so it fills the container width.
   auto-fit with minmax(24rem,1fr) fills the row; collapses to one-per-row under the same
   37.5rem breakpoint that gates the review grid. */
.framing-deliverable-row[b-s6fey7xx98] {
    grid-column: 1 / -1;
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(24rem, 1fr));
    gap: var(--dbv2-space-4);
    align-items: start;
}

/* Cards trickle in as their generation completes: the cell transitions when it enters the DOM. */
.review-grid-cell[b-s6fey7xx98] {
    min-width: 0;
    opacity: 1;
    transform: translateY(0);
    transition:
        opacity var(--dbv2-dur-popover) var(--dbv2-ease-out),
        transform var(--dbv2-dur-popover) var(--dbv2-ease-out);

    @starting-style {
        opacity: 0;
        transform: translateY(6px);
    }
}

.review-grid-cell:nth-child(2)[b-s6fey7xx98] { transition-delay: 40ms; }
.review-grid-cell:nth-child(3)[b-s6fey7xx98] { transition-delay: 80ms; }
.review-grid-cell:nth-child(4)[b-s6fey7xx98] { transition-delay: 120ms; }
.review-grid-cell:nth-child(n+5)[b-s6fey7xx98] { transition-delay: 160ms; }

@media (width <= 37.5rem) {
    .review-grid[b-s6fey7xx98] {
        grid-template-columns: 1fr;
    }

    .framing-deliverable-row[b-s6fey7xx98] {
        grid-template-columns: 1fr;
    }
}

@media (prefers-reduced-motion: reduce) {
    .stage-header[b-s6fey7xx98],
    .review-grid-cell[b-s6fey7xx98] {
        animation-duration: 0.01ms;
        transition-duration: 0.01ms;
    }
}
/* /Features/Ai/Components/ZoomControls.razor.rz.scp.css */
/* Floating zoom toolbar — anchored to the canvas workspace island (the island
   must be position: relative for this to land in the bottom-right).
   Design doc §6.2 closing paragraph:
     .dbv2-island + padding var(--dbv2-space-2) var(--dbv2-space-3),
     border-radius var(--dbv2-radius-full), box-shadow var(--dbv2-shadow-sm),
     position absolute, bottom var(--dbv2-space-4), right var(--dbv2-space-4).
*/

.zoom-controls[b-tjnaz9tyis] {
    position: absolute;
    bottom: var(--dbv2-space-4);
    right: var(--dbv2-space-4);
    display: inline-flex;
    align-items: center;
    gap: var(--dbv2-space-1);
    padding: var(--dbv2-space-2) var(--dbv2-space-3);
    border-radius: var(--dbv2-radius-full);
    box-shadow: var(--dbv2-shadow-sm);
    background: var(--dbv2-surface);

    /* Float above the SVG overlay + canvas image transform stack. */
    z-index: 10;
    user-select: none;
}

/* Radzen button tune-down: the toolbar is small, so strip the default button
   chrome and let our toolbar provide the container affordance. */
.zoom-controls[b-tjnaz9tyis]  .zoom-controls__btn {
    min-width: 0;
    width: 1.75rem;
    height: 1.75rem;
    padding: 0;
    border-radius: var(--dbv2-radius-full);
    color: var(--dbv2-text-secondary);
    background: transparent;
    box-shadow: none;
}

.zoom-controls[b-tjnaz9tyis]  .zoom-controls__btn:hover:not(:disabled) {
    background: var(--dbv2-muted);
    color: var(--dbv2-text-primary);
}

.zoom-controls[b-tjnaz9tyis]  .zoom-controls__btn .rz-button-icon-left {
    margin: 0;
    font-size: var(--dbv2-font-size-lg);
}

/* Numeric readout — styled quieter than a real button so the eye reads it as
   a label, but still clickable (resets to 100 %). */
.zoom-controls__readout[b-tjnaz9tyis] {
    min-width: 3.5rem;
    padding: 0 var(--dbv2-space-2);
    height: 1.75rem;
    font-family: inherit;
    font-size: var(--dbv2-font-size-sm);
    font-weight: var(--dbv2-font-weight-medium);
    font-variant-numeric: tabular-nums;
    color: var(--dbv2-text-primary);
    background: transparent;
    border: 0;
    border-radius: var(--dbv2-radius-sm);
    cursor: pointer;
    text-align: center;

    /* Pulse on mount — the parent component bumps a key on the element so
       this runs fresh every time CurrentZoom changes. */
    animation: zoom-readout-pulse-b-tjnaz9tyis 400ms ease-out;
}

.zoom-controls__readout:hover[b-tjnaz9tyis],
.zoom-controls__readout:focus-visible[b-tjnaz9tyis] {
    background: var(--dbv2-muted);
    outline: none;
}

@keyframes zoom-readout-pulse-b-tjnaz9tyis {
    0% {
        transform: scale(1);
        color: var(--dbv2-primary);
    }

    40% {
        transform: scale(1.12);
        color: var(--dbv2-primary);
    }

    100% {
        transform: scale(1);
        color: var(--dbv2-text-primary);
    }
}

/* Reduced-motion: skip the pulse but keep the colour cue. */
@media (prefers-reduced-motion: reduce) {
    .zoom-controls__readout[b-tjnaz9tyis] {
        animation: none;
    }
}
/* /Features/Ai/Pages/FramingEditor.razor.rz.scp.css */
/* Framing editor — full-page shell.
   Phase E scaffold only: slim header + two-column grid with canvas/sidebar
   placeholders. Real canvas + sidebar content land in Phase F + G.
*/

.framing-editor[b-d2z27kk1vw] {
    display: flex;
    flex-direction: column;
    gap: var(--dbv2-island-gap);
    height: 100%;
    min-height: 0;
}

/* ── Header ─────────────────────────────────────────────────────────────── */

.framing-editor__header[b-d2z27kk1vw] {
    display: flex;
    align-items: center;
    gap: var(--dbv2-space-3);
    padding: var(--dbv2-space-2) 0;
}

.framing-editor__back-btn[b-d2z27kk1vw] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 2.25rem;
    height: 2.25rem;
    border: 1px solid var(--dbv2-border);
    background: var(--dbv2-surface);
    border-radius: var(--dbv2-radius-sm);
    color: var(--dbv2-text-secondary);
    cursor: pointer;
    transition: background-color 0.15s ease, color 0.15s ease;
}

.framing-editor__back-btn:hover[b-d2z27kk1vw] {
    background: var(--dbv2-muted);
    color: var(--dbv2-text-primary);
}

.framing-editor__title[b-d2z27kk1vw] {
    font-size: var(--dbv2-font-size-lg);
    font-weight: var(--dbv2-font-weight-semibold);
    color: var(--dbv2-text-primary);
    margin: 0;
    line-height: 1.2;
}

.framing-editor__subtitle[b-d2z27kk1vw] {
    font-size: var(--dbv2-font-size-sm);
    color: var(--dbv2-text-tertiary);
    margin-left: var(--dbv2-space-2);
}

/* ── Produce-failed banner (only when ReviewStatus == "ProduceFailed") ──── */

.framing-editor__produce-failed-banner[b-d2z27kk1vw] {
    display: flex;
    align-items: center;
    gap: var(--dbv2-space-2);
    padding: var(--dbv2-space-3) var(--dbv2-space-4);
    border-radius: var(--dbv2-radius-sm);
    font-size: var(--dbv2-font-size-sm);
    color: var(--dbv2-warning-dark);
    background: color-mix(in srgb, var(--dbv2-warning) 12%, transparent);
    border: 1px solid color-mix(in srgb, var(--dbv2-warning) 24%, transparent);
}

/* ── Two-column grid: 1fr canvas, 320px sidebar ─────────────────────────── */

.framing-editor__grid[b-d2z27kk1vw] {
    display: grid;
    grid-template-columns: 1fr 20rem;
    gap: var(--dbv2-island-gap);
    flex: 1;
    min-height: 0;
}

.framing-editor__canvas-island[b-d2z27kk1vw] {
    padding: 0;
    overflow: hidden;
    background-color: var(--dbv2-editor-workspace);

    /* FramingCanvas fills the island edge-to-edge. */
    display: block;
    position: relative;
    min-height: 25rem;
}

/* ── Save-error chip (Phase I §7.1) ─────────────────────────────────────────
   Floats above the canvas workspace when the PUT call fails. Uses the same
   --dbv2-error token pattern as FramingSidebar's inline error chip so the
   visual language stays consistent across the editor. */

.framing-editor__save-error[b-d2z27kk1vw] {
    position: absolute;
    top: var(--dbv2-space-3);
    left: 50%;
    transform: translateX(-50%);
    z-index: 10;
    display: flex;
    align-items: center;
    gap: var(--dbv2-space-2);
    padding: var(--dbv2-space-2) var(--dbv2-space-4);
    max-width: calc(100% - 2 * var(--dbv2-space-6));
    font-size: var(--dbv2-font-size-sm);
    color: var(--dbv2-error-dark);
    background: color-mix(in srgb, var(--dbv2-error) 12%, var(--dbv2-surface));
    border: 1px solid color-mix(in srgb, var(--dbv2-error) 24%, transparent);
    border-radius: var(--dbv2-radius-sm);
    box-shadow: var(--dbv2-shadow-sm);
}

.framing-editor__save-error-text[b-d2z27kk1vw] {
    flex: 1;
    min-width: 0;
}

.framing-editor__sidebar-island[b-d2z27kk1vw] {
    display: flex;
    flex-direction: column;
    padding: var(--dbv2-space-6);
    overflow-y: auto;
}

/* ── Loading state ──────────────────────────────────────────────────────── */

.framing-editor__loading[b-d2z27kk1vw] {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: var(--dbv2-space-3);
    padding: var(--dbv2-space-6) 0;
}

.framing-editor__loading-text[b-d2z27kk1vw] {
    font-size: var(--dbv2-font-size-sm);
    color: var(--dbv2-text-secondary);
}

/* ── Messaging islands (responsive gate + error state) ──────────────────── */

.framing-editor__responsive-gate[b-d2z27kk1vw] {
    padding: var(--dbv2-space-8) var(--dbv2-space-4);
}

.framing-editor__message-island[b-d2z27kk1vw] {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: var(--dbv2-space-3);
    padding: var(--dbv2-space-8) var(--dbv2-space-6);
    text-align: center;
}

.framing-editor__message-icon[b-d2z27kk1vw] {
    font-size: 2.5rem; /* stylelint-disable-line declaration-property-value-disallowed-list -- decorative icon glyph, not type */
    color: var(--dbv2-text-tertiary);
}

.framing-editor__message-icon--error[b-d2z27kk1vw] {
    color: var(--dbv2-error);
}

.framing-editor__message-title[b-d2z27kk1vw] {
    font-size: var(--dbv2-font-size-lg);
    font-weight: var(--dbv2-font-weight-semibold);
    color: var(--dbv2-text-primary);
    margin: 0;
}

.framing-editor__message-detail[b-d2z27kk1vw] {
    font-size: var(--dbv2-font-size-sm);
    color: var(--dbv2-text-secondary);
    margin: 0;
    max-width: 30rem;
}
/* /Features/Ai/Pages/SessionCreate.razor.rz.scp.css */
.create-loading[b-sdp5dn24rc] {
    display: flex;
    align-items: center;
    gap: var(--dbv2-space-3);
    padding: var(--dbv2-space-6) 0;
    justify-content: center;
}

.create-loading-text[b-sdp5dn24rc] {
    font-size: var(--dbv2-font-size-sm);
    color: var(--dbv2-text-secondary);
}

.create-missing[b-sdp5dn24rc] {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: var(--dbv2-space-2);
    padding: var(--dbv2-space-8) 0;
}

.create-missing-icon[b-sdp5dn24rc] {
    font-size: var(--dbv2-font-size-xl);
    color: var(--dbv2-text-tertiary);
}

.create-missing-title[b-sdp5dn24rc] {
    margin: 0;
    font-size: var(--dbv2-font-size-md);
    font-weight: var(--dbv2-font-weight-semibold);
    color: var(--dbv2-text-primary);
}

.input-group[b-sdp5dn24rc] {
    display: flex;
    flex-direction: column;
    gap: var(--dbv2-space-1);
}

.input-label[b-sdp5dn24rc] {
    font-size: var(--dbv2-font-size-sm);
    font-weight: var(--dbv2-font-weight-semibold);
    color: var(--dbv2-text-secondary);
}

.port-description[b-sdp5dn24rc] {
    font-size: var(--dbv2-font-size-xs);
    color: var(--dbv2-text-tertiary);
}
/* /Features/Ai/Pages/SessionLauncher.razor.rz.scp.css */
.launcher-loading[b-7bmr43qq0z] {
    display: flex;
    align-items: center;
    gap: var(--dbv2-space-3);
    padding: var(--dbv2-space-4) 0;
}

.launcher-loading-text[b-7bmr43qq0z] {
    font-size: var(--dbv2-font-size-sm);
    color: var(--dbv2-text-secondary);
}

.launcher-empty[b-7bmr43qq0z] {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: var(--dbv2-space-2);
    padding: var(--dbv2-space-8) var(--dbv2-space-6);
    text-align: center;
}

.launcher-empty-icon[b-7bmr43qq0z] {
    font-size: var(--dbv2-font-size-xl);
    color: var(--dbv2-text-tertiary);
    opacity: 0.5;
}

.launcher-empty-title[b-7bmr43qq0z] {
    font-size: var(--dbv2-font-size-base);
    color: var(--dbv2-text-primary);
    margin: 0;
}

.launcher-empty-subtitle[b-7bmr43qq0z] {
    font-size: var(--dbv2-font-size-sm);
    color: var(--dbv2-text-secondary);
    margin: 0;
}

.workflow-gallery[b-7bmr43qq0z] {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(17.5rem, 1fr));
    gap: var(--dbv2-space-4);
}

.workflow-card[b-7bmr43qq0z] {
    display: flex;
    flex-direction: column;
    gap: var(--dbv2-space-2);
    padding: var(--dbv2-space-4);
    border: 1px solid var(--dbv2-border);
    border-radius: var(--dbv2-radius-md);
    text-decoration: none;
    background: var(--dbv2-surface);
    transition: border-color 0.15s ease, box-shadow 0.15s ease;
}

.workflow-card:hover[b-7bmr43qq0z] {
    border-color: var(--dbv2-primary);
    box-shadow: var(--dbv2-shadow-md);
}

.workflow-card-header[b-7bmr43qq0z] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--dbv2-space-2);
}

.workflow-card-name[b-7bmr43qq0z] {
    font-size: var(--dbv2-font-size-base);
    font-weight: var(--dbv2-font-weight-semibold);
    color: var(--dbv2-text-primary);
}

.workflow-card-description[b-7bmr43qq0z] {
    font-size: var(--dbv2-font-size-sm);
    color: var(--dbv2-text-secondary);
    margin: 0;
}
/* /Features/Ai/Pages/SessionShell.razor.rz.scp.css */
.shell-loading[b-ljtk9147z5] {
    display: flex;
    align-items: center;
    gap: var(--dbv2-space-3);
    padding: var(--dbv2-space-4) 0;
}

.shell-loading-text[b-ljtk9147z5] {
    font-size: var(--dbv2-font-size-sm);
    color: var(--dbv2-text-secondary);
}

.shell-missing[b-ljtk9147z5] {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: var(--dbv2-space-3);
    padding: var(--dbv2-space-8) var(--dbv2-space-6);
    text-align: center;
}

.shell-missing-icon[b-ljtk9147z5] {
    font-size: var(--dbv2-font-size-xl);
    color: var(--dbv2-text-tertiary);
    opacity: 0.5;
}

.shell-missing-title[b-ljtk9147z5] {
    font-size: var(--dbv2-font-size-base);
    color: var(--dbv2-text-primary);
    margin: 0;
}

.shell-header-row[b-ljtk9147z5] {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: var(--dbv2-space-4);
}

/* The workflow-altitude aside: status chip stacked over the run-wide controls, right-aligned so the
   destructive Reject control reads as a session-level action distinct from the per-element verdicts. */
.shell-header-aside[b-ljtk9147z5] {
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    gap: var(--dbv2-space-3);
    flex-shrink: 0;
}

.shell-workflow-actions[b-ljtk9147z5] {
    display: flex;
    align-items: center;
    gap: var(--dbv2-space-2);
}

.shell-surface[b-ljtk9147z5] {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: var(--dbv2-space-2);
    padding: var(--dbv2-space-8) var(--dbv2-space-6);
    text-align: center;
}

.shell-started-by[b-ljtk9147z5] {
    color: var(--dbv2-text-tertiary);
}

/* The staged review surface manages its own islands — no centering, no wrapper padding. */
.shell-surface--review[b-ljtk9147z5] {
    display: block;
    padding: 0;
    text-align: left;
}

.shell-surface-title[b-ljtk9147z5] {
    font-size: var(--dbv2-font-size-base);
    font-weight: var(--dbv2-font-weight-semibold);
    color: var(--dbv2-text-primary);
    margin: 0;
}

.shell-surface-subtitle[b-ljtk9147z5] {
    font-size: var(--dbv2-font-size-sm);
    color: var(--dbv2-text-secondary);
    margin: 0;
}
/* /Features/Auth/Pages/AcceptInvite.razor.rz.scp.css */
.accept-container[b-3qzw3c29e7] {
    display: flex;
    flex-direction: column;
}

.step-content[b-3qzw3c29e7] {
    display: flex;
    flex-direction: column;
    gap: var(--dbv2-space-4);
    animation: fade-in-b-3qzw3c29e7 0.2s ease-in-out;
}

@keyframes fade-in-b-3qzw3c29e7 {
    from {
        opacity: 0;
        transform: translateY(4px);
    }

    to {
        opacity: 1;
        transform: translateY(0);
    }
}

.accept-heading[b-3qzw3c29e7] {
    font-size: var(--dbv2-font-size-lg);
    font-weight: var(--dbv2-font-weight-bold);
    color: var(--dbv2-text-primary);
    margin: 0;
    text-align: center;
}

.accept-subheading[b-3qzw3c29e7] {
    font-size: var(--dbv2-font-size-sm);
    color: var(--dbv2-text-secondary);
    margin: 0;
    text-align: center;
}

.accept-alert[b-3qzw3c29e7] {
    margin: 0;
}

.status-icon[b-3qzw3c29e7] {
    display: flex;
    justify-content: center;
    font-size: 3rem; /* stylelint-disable-line declaration-property-value-disallowed-list -- decorative icon glyph, not type */
}

.status-success[b-3qzw3c29e7] {
    color: var(--dbv2-success);
}

.status-info[b-3qzw3c29e7] {
    color: var(--dbv2-info);
}

.status-warning[b-3qzw3c29e7] {
    color: var(--dbv2-warning);
}

.status-error[b-3qzw3c29e7] {
    color: var(--dbv2-error);
}

.loading-state[b-3qzw3c29e7] {
    display: flex;
    justify-content: center;
    padding: var(--dbv2-space-6) 0;
}

.accept-footer[b-3qzw3c29e7] {
    text-align: center;
    font-size: var(--dbv2-font-size-sm);
    color: var(--dbv2-text-secondary);
}

.accept-footer a[b-3qzw3c29e7] {
    color: var(--dbv2-primary);
    text-decoration: none;
    font-weight: var(--dbv2-font-weight-medium);
}

.accept-footer a:hover[b-3qzw3c29e7] {
    text-decoration: underline;
}
/* /Features/Auth/Pages/CreateOrganization.razor.rz.scp.css */
.create-org-container[b-cdiv0egvnp] {
    display: flex;
    flex-direction: column;
}

.step-content[b-cdiv0egvnp] {
    display: flex;
    flex-direction: column;
    gap: var(--dbv2-space-4);
    animation: fade-in-b-cdiv0egvnp 0.2s ease-in-out;
}

@keyframes fade-in-b-cdiv0egvnp {
    from {
        opacity: 0;
        transform: translateY(4px);
    }

    to {
        opacity: 1;
        transform: translateY(0);
    }
}

.create-org-heading[b-cdiv0egvnp] {
    margin: 0;
}

.create-org-subheading[b-cdiv0egvnp] {
    color: var(--dbv2-text-secondary);
    margin: 0;
}

.create-org-alert[b-cdiv0egvnp] {
    margin: 0;
}

.input-group[b-cdiv0egvnp] {
    display: flex;
    flex-direction: column;
    gap: var(--dbv2-space-1);
}

.input-label[b-cdiv0egvnp] {
    font-size: var(--dbv2-font-size-sm);
    font-weight: var(--dbv2-font-weight-semibold);
    color: var(--dbv2-text-secondary);
}

/* Coming-soon (alpha gated) state */
.status-icon[b-cdiv0egvnp] {
    text-align: center;
    color: var(--dbv2-primary);
    font-size: var(--dbv2-icon-size-lg);
    margin-bottom: var(--dbv2-space-2);
}
/* /Features/Auth/Pages/ForgotPassword.razor.rz.scp.css */
.forgot-container[b-usgnj2wro8] {
    display: flex;
    flex-direction: column;
}

.step-content[b-usgnj2wro8] {
    display: flex;
    flex-direction: column;
    gap: var(--dbv2-space-4);
    animation: fade-in-b-usgnj2wro8 0.2s ease-in-out;
}

@keyframes fade-in-b-usgnj2wro8 {
    from {
        opacity: 0;
        transform: translateY(4px);
    }

    to {
        opacity: 1;
        transform: translateY(0);
    }
}

.forgot-heading[b-usgnj2wro8] {
    font-size: var(--dbv2-font-size-lg);
    font-weight: var(--dbv2-font-weight-bold);
    color: var(--dbv2-text-primary);
    margin: 0;
}

.forgot-subheading[b-usgnj2wro8] {
    font-size: var(--dbv2-font-size-sm);
    color: var(--dbv2-text-secondary);
    margin: 0;
}

.forgot-alert[b-usgnj2wro8] {
    margin: 0;
}

.input-group[b-usgnj2wro8] {
    display: flex;
    flex-direction: column;
    gap: var(--dbv2-space-1);
}

.input-label[b-usgnj2wro8] {
    font-size: var(--dbv2-font-size-sm);
    font-weight: var(--dbv2-font-weight-semibold);
    color: var(--dbv2-text-secondary);
}

.forgot-footer[b-usgnj2wro8] {
    text-align: center;
    font-size: var(--dbv2-font-size-sm);
    color: var(--dbv2-text-secondary);
}

.forgot-footer a[b-usgnj2wro8] {
    color: var(--dbv2-primary);
    text-decoration: none;
    font-weight: var(--dbv2-font-weight-medium);
}

.forgot-footer a:hover[b-usgnj2wro8] {
    text-decoration: underline;
}

.status-icon[b-usgnj2wro8] {
    text-align: center;
    font-size: 3rem; /* stylelint-disable-line declaration-property-value-disallowed-list -- decorative icon glyph, not type */
    color: var(--dbv2-success);
}
/* /Features/Auth/Pages/Login.razor.rz.scp.css */
.login-container[b-yuzyrzbk7p] {
    display: flex;
    flex-direction: column;
}

.step-content[b-yuzyrzbk7p] {
    display: flex;
    flex-direction: column;
    gap: var(--dbv2-space-4);
    animation: fade-in-b-yuzyrzbk7p 0.2s ease-in-out;
}

@keyframes fade-in-b-yuzyrzbk7p {
    from {
        opacity: 0;
        transform: translateY(4px);
    }

    to {
        opacity: 1;
        transform: translateY(0);
    }
}

.login-heading[b-yuzyrzbk7p] {
    font-size: var(--dbv2-font-size-lg);
    font-weight: var(--dbv2-font-weight-bold);
    color: var(--dbv2-text-primary);
    margin: 0;
}

.login-subheading[b-yuzyrzbk7p] {
    font-size: var(--dbv2-font-size-sm);
    color: var(--dbv2-text-secondary);
    margin: 0;
}

.login-alert[b-yuzyrzbk7p] {
    margin: 0;
}

/* Radzen top-aligns the alert icon (for long multi-line bodies); our reason banners
   are short, so center the 24px icon against the text. `login-alert` is forwarded onto
   RadzenAlert's own root, which never receives this sheet's scope attribute — so the
   rule must hang off `.step-content` (a real element in our markup) via ::deep. */
.step-content[b-yuzyrzbk7p]  .rz-alert-item {
    align-items: center;
}

.input-group[b-yuzyrzbk7p] {
    display: flex;
    flex-direction: column;
    gap: var(--dbv2-space-1);
}

.input-label[b-yuzyrzbk7p] {
    font-size: var(--dbv2-font-size-sm);
    font-weight: var(--dbv2-font-weight-semibold);
    color: var(--dbv2-text-secondary);
}

.forgot-password-link[b-yuzyrzbk7p] {
    align-self: flex-end;
    font-size: var(--dbv2-font-size-sm);
    color: var(--dbv2-text-secondary);
    text-decoration: none;
}

.forgot-password-link:hover[b-yuzyrzbk7p] {
    color: var(--dbv2-primary);
    text-decoration: underline;
}

.login-footer[b-yuzyrzbk7p] {
    text-align: center;
    font-size: var(--dbv2-font-size-sm);
    color: var(--dbv2-text-secondary);
}

.login-footer a[b-yuzyrzbk7p] {
    color: var(--dbv2-primary);
    text-decoration: none;
    font-weight: var(--dbv2-font-weight-medium);
}

.login-footer a:hover[b-yuzyrzbk7p] {
    text-decoration: underline;
}

/* Tenant selection */
.tenant-list[b-yuzyrzbk7p] {
    display: flex;
    flex-direction: column;
    gap: var(--dbv2-space-2);
}

.tenant-item[b-yuzyrzbk7p] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: var(--dbv2-space-3) var(--dbv2-space-4);
    border: 1px solid var(--dbv2-border);
    border-radius: var(--dbv2-radius-sm);
    background: var(--dbv2-surface);
    cursor: pointer;
    transition: border-color 0.15s ease, background-color 0.15s ease;
    width: 100%;
    text-align: left;
    font-family: inherit;
    font-size: var(--dbv2-font-size-base);
}

.tenant-item:hover:not(:disabled)[b-yuzyrzbk7p] {
    border-color: var(--dbv2-primary);
    background: var(--dbv2-primary-lighter);
}

.tenant-item:disabled[b-yuzyrzbk7p] {
    opacity: 0.6;
    cursor: not-allowed;
}

.tenant-name[b-yuzyrzbk7p] {
    font-weight: var(--dbv2-font-weight-medium);
    color: var(--dbv2-text-primary);
}

.tenant-arrow[b-yuzyrzbk7p] {
    color: var(--dbv2-text-tertiary);
    font-size: var(--dbv2-font-size-md);
}

.tenant-item:hover:not(:disabled) .tenant-arrow[b-yuzyrzbk7p] {
    color: var(--dbv2-primary);
}

/* Loading state */
.loading-state[b-yuzyrzbk7p] {
    display: flex;
    justify-content: center;
    padding: var(--dbv2-space-6) 0;
}
/* /Features/Auth/Pages/MfaSetup.razor.rz.scp.css */
.mfa-container[b-qq7zp0r11r] {
    display: flex;
    flex-direction: column;
}

.step-content[b-qq7zp0r11r] {
    display: flex;
    flex-direction: column;
    gap: var(--dbv2-space-4);
    animation: fade-in-b-qq7zp0r11r 0.2s ease-in-out;
}

@keyframes fade-in-b-qq7zp0r11r {
    from {
        opacity: 0;
        transform: translateY(4px);
    }

    to {
        opacity: 1;
        transform: translateY(0);
    }
}

.mfa-heading[b-qq7zp0r11r] {
    font-size: var(--dbv2-font-size-lg);
    font-weight: var(--dbv2-font-weight-bold);
    color: var(--dbv2-text-primary);
    margin: 0;
}

.mfa-subheading[b-qq7zp0r11r] {
    font-size: var(--dbv2-font-size-sm);
    color: var(--dbv2-text-secondary);
    margin: 0;
}

.mfa-alert[b-qq7zp0r11r] {
    margin: 0;
}

/* QR code */
.qr-section[b-qq7zp0r11r] {
    display: flex;
    justify-content: center;
    padding: var(--dbv2-space-2) 0;
}

.qr-code[b-qq7zp0r11r] {
    /* Pure white is functional here — QR scanners require maximum module/quiet-zone contrast. Do not replace with --dbv2-surface. */
    background: #fff;
    padding: var(--dbv2-space-3);
    border-radius: var(--dbv2-radius-sm);
    border: 1px solid var(--dbv2-border);
    display: inline-flex;
}

.qr-code img[b-qq7zp0r11r] {
    display: block;
    image-rendering: pixelated;
}

/* Manual key */
.manual-key-section[b-qq7zp0r11r] {
    display: flex;
    flex-direction: column;
    gap: var(--dbv2-space-1);
}

.manual-key-label[b-qq7zp0r11r] {
    font-size: var(--dbv2-font-size-sm);
    color: var(--dbv2-text-secondary);
}

.manual-key[b-qq7zp0r11r] {
    display: flex;
    align-items: center;
    gap: var(--dbv2-space-2);
    padding: var(--dbv2-space-2) var(--dbv2-space-3);
    background: var(--dbv2-muted);
    border-radius: var(--dbv2-radius-sm);
}

.manual-key-value[b-qq7zp0r11r] {
    flex: 1;
    font-family: monospace;
    font-size: var(--dbv2-font-size-sm);
    letter-spacing: 0.15em;
    word-break: break-all;
    color: var(--dbv2-text-primary);
}

.copy-btn[b-qq7zp0r11r] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: var(--dbv2-space-1);
    border: none;
    background: transparent;
    color: var(--dbv2-text-tertiary);
    cursor: pointer;
    border-radius: var(--dbv2-radius-sm);
    transition: color 0.15s ease, background-color 0.15s ease;
}

.copy-btn:hover[b-qq7zp0r11r] {
    color: var(--dbv2-primary);
    background: var(--dbv2-primary-lighter);
}

/* TOTP input */
.input-group[b-qq7zp0r11r] {
    display: flex;
    flex-direction: column;
    gap: var(--dbv2-space-1);
}

.input-label[b-qq7zp0r11r] {
    font-size: var(--dbv2-font-size-sm);
    font-weight: var(--dbv2-font-weight-semibold);
    color: var(--dbv2-text-secondary);
}

/* Recovery codes */
.recovery-codes-grid[b-qq7zp0r11r] {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: var(--dbv2-space-2);
}

.recovery-code[b-qq7zp0r11r] {
    font-family: monospace;
    font-size: var(--dbv2-font-size-sm);
    padding: var(--dbv2-space-2);
    background: var(--dbv2-muted);
    border-radius: var(--dbv2-radius-sm);
    text-align: center;
    color: var(--dbv2-text-primary);
}

/* Acknowledgment */
.acknowledge-section[b-qq7zp0r11r] {
    padding: var(--dbv2-space-1) 0;
}

.acknowledge-label[b-qq7zp0r11r] {
    display: flex;
    align-items: center;
    gap: var(--dbv2-space-2);
    font-size: var(--dbv2-font-size-sm);
    color: var(--dbv2-text-primary);
    cursor: pointer;
}

.acknowledge-label input[type="checkbox"][b-qq7zp0r11r] {
    accent-color: var(--dbv2-primary);
    width: 1rem;
    height: 1rem;
}

/* Footer */
.mfa-footer[b-qq7zp0r11r] {
    text-align: center;
    font-size: var(--dbv2-font-size-sm);
    color: var(--dbv2-text-secondary);
}

.mfa-footer a[b-qq7zp0r11r] {
    color: var(--dbv2-primary);
    text-decoration: none;
    font-weight: var(--dbv2-font-weight-medium);
}

.mfa-footer a:hover[b-qq7zp0r11r] {
    text-decoration: underline;
}

/* Loading state */
.loading-state[b-qq7zp0r11r] {
    display: flex;
    justify-content: center;
    padding: var(--dbv2-space-6) 0;
}
/* /Features/Auth/Pages/Register.razor.rz.scp.css */
.register-container[b-6avuzmqa6i] {
    display: flex;
    flex-direction: column;
}

.step-content[b-6avuzmqa6i] {
    display: flex;
    flex-direction: column;
    gap: var(--dbv2-space-4);
    animation: fade-in-b-6avuzmqa6i 0.2s ease-in-out;
}

@keyframes fade-in-b-6avuzmqa6i {
    from {
        opacity: 0;
        transform: translateY(4px);
    }

    to {
        opacity: 1;
        transform: translateY(0);
    }
}

.register-heading[b-6avuzmqa6i] {
    font-size: var(--dbv2-font-size-lg);
    font-weight: var(--dbv2-font-weight-bold);
    color: var(--dbv2-text-primary);
    margin: 0;
}

.register-subheading[b-6avuzmqa6i] {
    font-size: var(--dbv2-font-size-sm);
    color: var(--dbv2-text-secondary);
    margin: 0;
}

.register-alert[b-6avuzmqa6i] {
    margin: 0;
}

.error-list[b-6avuzmqa6i] {
    margin: 0;
    padding-left: var(--dbv2-space-4);
    list-style: disc;
}

.error-list li[b-6avuzmqa6i] {
    margin-bottom: var(--dbv2-space-1);
}

.error-list li:last-child[b-6avuzmqa6i] {
    margin-bottom: 0;
}

.field-error[b-6avuzmqa6i] {
    font-size: var(--dbv2-font-size-xs);
    color: var(--dbv2-error);
}

.input-group[b-6avuzmqa6i] {
    display: flex;
    flex-direction: column;
    gap: var(--dbv2-space-1);
}

.input-label[b-6avuzmqa6i] {
    font-size: var(--dbv2-font-size-sm);
    font-weight: var(--dbv2-font-weight-semibold);
    color: var(--dbv2-text-secondary);
}

.register-footer[b-6avuzmqa6i] {
    text-align: center;
    font-size: var(--dbv2-font-size-sm);
    color: var(--dbv2-text-secondary);
}

.register-footer a[b-6avuzmqa6i] {
    color: var(--dbv2-primary);
    text-decoration: none;
    font-weight: var(--dbv2-font-weight-medium);
}

.register-footer a:hover[b-6avuzmqa6i] {
    text-decoration: underline;
}

/* Confirmation state */
.status-icon[b-6avuzmqa6i] {
    text-align: center;
    font-size: 3rem; /* stylelint-disable-line declaration-property-value-disallowed-list -- decorative icon glyph, not type */
    margin-bottom: var(--dbv2-space-2);
}

.status-icon.status-success[b-6avuzmqa6i] {
    color: var(--dbv2-success);
}

.next-steps[b-6avuzmqa6i] {
    background: var(--dbv2-canvas);
    border-radius: var(--dbv2-radius-sm);
    padding: var(--dbv2-space-4);
}

.next-steps-title[b-6avuzmqa6i] {
    font-size: var(--dbv2-font-size-sm);
    font-weight: var(--dbv2-font-weight-semibold);
    color: var(--dbv2-text-primary);
    margin: 0 0 var(--dbv2-space-2) 0;
}

.next-steps-list[b-6avuzmqa6i] {
    margin: 0;
    padding-left: var(--dbv2-space-5);
    font-size: var(--dbv2-font-size-sm);
    color: var(--dbv2-text-secondary);
}

.next-steps-list li[b-6avuzmqa6i] {
    margin-bottom: var(--dbv2-space-1);
}

.next-steps-list li:last-child[b-6avuzmqa6i] {
    margin-bottom: 0;
}
/* /Features/Auth/Pages/ResetPassword.razor.rz.scp.css */
.reset-password-container[b-rpwx24xs90] {
    display: flex;
    flex-direction: column;
}

.step-content[b-rpwx24xs90] {
    display: flex;
    flex-direction: column;
    gap: var(--dbv2-space-4);
    animation: fade-in-b-rpwx24xs90 0.2s ease-in-out;
}

@keyframes fade-in-b-rpwx24xs90 {
    from {
        opacity: 0;
        transform: translateY(4px);
    }

    to {
        opacity: 1;
        transform: translateY(0);
    }
}

.reset-password-heading[b-rpwx24xs90] {
    font-size: var(--dbv2-font-size-lg);
    font-weight: var(--dbv2-font-weight-bold);
    color: var(--dbv2-text-primary);
    margin: 0;
    text-align: center;
}

.reset-password-subheading[b-rpwx24xs90] {
    font-size: var(--dbv2-font-size-sm);
    color: var(--dbv2-text-secondary);
    margin: 0;
    text-align: center;
}

.reset-password-alert[b-rpwx24xs90] {
    margin: 0;
}

.status-icon[b-rpwx24xs90] {
    display: flex;
    justify-content: center;
    font-size: 3rem; /* stylelint-disable-line declaration-property-value-disallowed-list -- decorative icon glyph, not type */
}

.status-success[b-rpwx24xs90] {
    color: var(--dbv2-success);
}

.status-warning[b-rpwx24xs90] {
    color: var(--dbv2-warning);
}

.status-error[b-rpwx24xs90] {
    color: var(--dbv2-error);
}

.input-group[b-rpwx24xs90] {
    display: flex;
    flex-direction: column;
    gap: var(--dbv2-space-1);
}

.input-label[b-rpwx24xs90] {
    font-size: var(--dbv2-font-size-sm);
    font-weight: var(--dbv2-font-weight-semibold);
    color: var(--dbv2-text-secondary);
}

.field-error[b-rpwx24xs90] {
    font-size: var(--dbv2-font-size-xs);
    color: var(--dbv2-error);
}

.reset-password-footer[b-rpwx24xs90] {
    text-align: center;
    font-size: var(--dbv2-font-size-sm);
    color: var(--dbv2-text-secondary);
}

.reset-password-footer a[b-rpwx24xs90] {
    color: var(--dbv2-primary);
    text-decoration: none;
    font-weight: var(--dbv2-font-weight-medium);
}

.reset-password-footer a:hover[b-rpwx24xs90] {
    text-decoration: underline;
}
/* /Features/Auth/Pages/VerifyEmail.razor.rz.scp.css */
.verify-container[b-0nsnffblon] {
    display: flex;
    flex-direction: column;
}

.step-content[b-0nsnffblon] {
    display: flex;
    flex-direction: column;
    gap: var(--dbv2-space-4);
    animation: fade-in-b-0nsnffblon 0.2s ease-in-out;
}

@keyframes fade-in-b-0nsnffblon {
    from {
        opacity: 0;
        transform: translateY(4px);
    }

    to {
        opacity: 1;
        transform: translateY(0);
    }
}

.verify-heading[b-0nsnffblon] {
    font-size: var(--dbv2-font-size-lg);
    font-weight: var(--dbv2-font-weight-bold);
    color: var(--dbv2-text-primary);
    margin: 0;
    text-align: center;
}

.verify-subheading[b-0nsnffblon] {
    font-size: var(--dbv2-font-size-sm);
    color: var(--dbv2-text-secondary);
    margin: 0;
    text-align: center;
}

.verify-alert[b-0nsnffblon] {
    margin: 0;
}

.status-icon[b-0nsnffblon] {
    display: flex;
    justify-content: center;
    font-size: 3rem; /* stylelint-disable-line declaration-property-value-disallowed-list -- decorative icon glyph, not type */
}

.status-success[b-0nsnffblon] {
    color: var(--dbv2-success);
}

.status-info[b-0nsnffblon] {
    color: var(--dbv2-info);
}

.status-warning[b-0nsnffblon] {
    color: var(--dbv2-warning);
}

.status-error[b-0nsnffblon] {
    color: var(--dbv2-error);
}

.input-group[b-0nsnffblon] {
    display: flex;
    flex-direction: column;
    gap: var(--dbv2-space-1);
}

.input-label[b-0nsnffblon] {
    font-size: var(--dbv2-font-size-sm);
    font-weight: var(--dbv2-font-weight-semibold);
    color: var(--dbv2-text-secondary);
}

.loading-state[b-0nsnffblon] {
    display: flex;
    justify-content: center;
    padding: var(--dbv2-space-6) 0;
}

.verify-footer[b-0nsnffblon] {
    text-align: center;
    font-size: var(--dbv2-font-size-sm);
    color: var(--dbv2-text-secondary);
}

.verify-footer a[b-0nsnffblon] {
    color: var(--dbv2-primary);
    text-decoration: none;
    font-weight: var(--dbv2-font-weight-medium);
}

.verify-footer a:hover[b-0nsnffblon] {
    text-decoration: underline;
}
/* /Features/Avatar/Components/AvatarUploadModal.razor.rz.scp.css */
.review-modal-overlay[b-hon2sdxx2p] {
    position: fixed;
    inset: 0;
    background: var(--dbv2-overlay);
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 1000;
}

.review-modal-dialog[b-hon2sdxx2p] {
    background: var(--dbv2-surface);
    border-radius: var(--dbv2-radius-lg);
    box-shadow: var(--dbv2-shadow-lg);
    width: min(90vw, 60rem);
    max-height: 90vh;
    overflow-y: auto;
}

.review-modal-header[b-hon2sdxx2p] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: var(--dbv2-space-4) var(--dbv2-space-5);
    border-bottom: 0.0625rem solid var(--dbv2-border);
}

.review-modal-title[b-hon2sdxx2p] {
    font-size: var(--dbv2-font-size-base);
    font-weight: var(--dbv2-font-weight-semibold);
    color: var(--dbv2-text-primary);
    margin: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.review-modal-body[b-hon2sdxx2p] {
    padding: var(--dbv2-space-5);
}

.review-modal-header[b-hon2sdxx2p]  .rz-button {
    color: var(--dbv2-text-primary);
}

.upload-form[b-hon2sdxx2p] {
    display: flex;
    flex-direction: column;
    gap: var(--dbv2-space-5);
}

.upload-form-fields[b-hon2sdxx2p] {
    display: flex;
    flex-direction: column;
    gap: var(--dbv2-space-3);
}

.form-field[b-hon2sdxx2p] {
    display: flex;
    flex-direction: column;
    gap: var(--dbv2-space-1);
}

.input-label[b-hon2sdxx2p] {
    font-size: var(--dbv2-font-size-sm);
    font-weight: var(--dbv2-font-weight-medium);
    color: var(--dbv2-text-secondary);
    white-space: nowrap;
}

.upload-text-input[b-hon2sdxx2p] {
    width: 100%;
}

.upload-form-error[b-hon2sdxx2p] {
    color: var(--dbv2-error);
    font-size: var(--dbv2-font-size-sm);
    margin: 0;
}

.perspective-grid[b-hon2sdxx2p] {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: var(--dbv2-space-4);
}

@media (width <= 48rem) {
    .perspective-grid[b-hon2sdxx2p] {
        grid-template-columns: 1fr;
    }
}
/* /Features/Avatar/Pages/ManageAvatars.razor.rz.scp.css */
.manage-header[b-0vpghczvrr] {
    display: flex;
    align-items: flex-start;
    gap: var(--dbv2-space-3);
}

.back-button[b-0vpghczvrr] {
    margin-top: var(--dbv2-space-1);
}

.header-actions[b-0vpghczvrr] {
    margin-left: auto;
    display: flex;
    gap: var(--dbv2-space-2);
    align-items: flex-start;
}

.filter-bar[b-0vpghczvrr] {
    display: flex;
    align-items: center;
    gap: var(--dbv2-space-4);
}

.filter-group[b-0vpghczvrr] {
    display: flex;
    align-items: center;
    gap: var(--dbv2-space-2);
}

.input-label[b-0vpghczvrr] {
    font-size: var(--dbv2-font-size-sm);
    font-weight: var(--dbv2-font-weight-medium);
    color: var(--dbv2-text-secondary);
    white-space: nowrap;
}

.filter-count[b-0vpghczvrr] {
    font-size: var(--dbv2-font-size-sm);
    color: var(--dbv2-text-tertiary);
}

.loading-indicator[b-0vpghczvrr] {
    display: flex;
    align-items: center;
    gap: var(--dbv2-space-2);
    padding: var(--dbv2-space-4) 0;
}

.loading-text[b-0vpghczvrr] {
    font-size: var(--dbv2-font-size-sm);
    color: var(--dbv2-text-secondary);
}

.empty-state[b-0vpghczvrr] {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: var(--dbv2-space-2);
    padding: var(--dbv2-space-8) var(--dbv2-space-4);
}

.empty-state-icon[b-0vpghczvrr] {
    font-size: 3rem; /* stylelint-disable-line declaration-property-value-disallowed-list -- decorative icon glyph, not type */
    color: var(--dbv2-text-tertiary);
    opacity: 0.5;
}

.empty-state-text[b-0vpghczvrr] {
    font-size: var(--dbv2-font-size-sm);
    color: var(--dbv2-text-tertiary);
    margin: 0;
}

/* Avatar grid */
.avatar-grid[b-0vpghczvrr] {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(17.5rem, 1fr));
    gap: var(--dbv2-space-4);
}

.avatar-card[b-0vpghczvrr] {
    background: var(--dbv2-surface);
    border: 1px solid var(--dbv2-border);
    border-radius: var(--dbv2-radius-md);
    overflow: hidden;
    transition: border-color 0.15s ease;
}

.avatar-card:hover[b-0vpghczvrr] {
    border-color: var(--dbv2-border);
}

.avatar-archived[b-0vpghczvrr] {
    opacity: 0.6;
}

.avatar-face-strip[b-0vpghczvrr] {
    display: flex;
    gap: 0.125rem;
    height: 8.75rem;
    background: var(--dbv2-border-light);
}

.face-thumb[b-0vpghczvrr] {
    flex: 1;
    object-fit: cover;
    min-width: 0;
}

.face-placeholder[b-0vpghczvrr] {
    flex: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--dbv2-text-tertiary);
    opacity: 0.4;
    font-size: 2.5rem; /* stylelint-disable-line declaration-property-value-disallowed-list -- decorative icon glyph, not type */
}

.avatar-info[b-0vpghczvrr] {
    padding: var(--dbv2-space-3);
    display: flex;
    flex-direction: column;
    gap: var(--dbv2-space-1);
}

.avatar-name[b-0vpghczvrr] {
    font-size: var(--dbv2-font-size-sm);
    font-weight: var(--dbv2-font-weight-semibold);
    color: var(--dbv2-text-primary);
}

.avatar-description[b-0vpghczvrr] {
    font-size: var(--dbv2-font-size-xs);
    color: var(--dbv2-text-secondary);
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

.avatar-meta[b-0vpghczvrr] {
    display: flex;
    align-items: center;
    gap: var(--dbv2-space-1);
    margin-top: var(--dbv2-space-1);
}

.brand-tag[b-0vpghczvrr] {
    font-size: var(--dbv2-font-size-xs);
    color: var(--dbv2-text-tertiary);
    background: var(--dbv2-border-light);
    padding: var(--dbv2-space-1) var(--dbv2-space-1);
    border-radius: var(--dbv2-radius-sm);
}

/* Avatar card actions */
.avatar-actions[b-0vpghczvrr] {
    display: flex;
    gap: var(--dbv2-space-2);
    padding: 0 var(--dbv2-space-3) var(--dbv2-space-3);
}
/* /Features/Config/Components/AddApparelTypeDialog.razor.rz.scp.css */
/* Add-apparel-type dialog — single name field rendered inside a RadzenDialog. */

.apparel-type-dialog[b-ki877u3ivi] {
    display: flex;
    flex-direction: column;
    gap: var(--dbv2-space-4);
    min-width: 24rem;
}

.apparel-type-dialog__field[b-ki877u3ivi] {
    display: flex;
    flex-direction: column;
    gap: var(--dbv2-space-2);
}

.apparel-type-dialog__field-error[b-ki877u3ivi] {
    font-size: var(--dbv2-font-size-xs);
    color: var(--dbv2-error);
}

.apparel-type-dialog__error[b-ki877u3ivi] {
    margin-top: var(--dbv2-space-1);
}
/* /Features/Config/Components/AddWorkflowDialog.razor.rz.scp.css */
/* Add-workflow dialog — name / key / description form rendered inside a RadzenDialog. */

.workflow-dialog[b-6y1g1c85c8] {
    display: flex;
    flex-direction: column;
    gap: var(--dbv2-space-4);
    min-width: 26.25rem;
}

.workflow-dialog__field[b-6y1g1c85c8] {
    display: flex;
    flex-direction: column;
    gap: var(--dbv2-space-2);
}

.workflow-dialog__field-error[b-6y1g1c85c8] {
    font-size: var(--dbv2-font-size-xs);
    color: var(--dbv2-error);
}

.workflow-dialog__error[b-6y1g1c85c8] {
    margin-top: var(--dbv2-space-1);
}
/* /Features/Config/Components/ApparelTypesSection.razor.rz.scp.css */
/* Apparel-type row content inside the shared ConfigList surface. The card, rows, states and footer
   are owned by ConfigList; this file only styles the apparel-specific leading content. */

.apparel-row-header[b-fokzq76spb] {
    display: flex;
    align-items: center;
    gap: var(--dbv2-space-2);
    min-width: 0;
}

.apparel-row-name[b-fokzq76spb] {
    font-size: var(--dbv2-font-size-base);
    font-weight: var(--dbv2-font-weight-semibold);
    color: var(--dbv2-text-primary);
}

/* Deactivated apparel types read as dimmed — ::deep so it lands on ConfigList's row element. */
[b-fokzq76spb] .config-list-row.apparel-row--inactive {
    opacity: 0.55;
}
/* /Features/Config/Components/BrandConfigSection.razor.rz.scp.css */
/* Brand row content inside the shared ConfigList surface. The card, rows, hover, states and footer
   are owned by ConfigList; this file only styles the brand-specific leading content. */

.brand-row-body[b-p08fzn3rag] {
    display: flex;
    flex-direction: column;
    gap: var(--dbv2-space-1);
    min-width: 0;
}

.brand-row-header[b-p08fzn3rag] {
    display: flex;
    align-items: center;
    gap: var(--dbv2-space-2);
}

.brand-row-name[b-p08fzn3rag] {
    font-size: var(--dbv2-font-size-sm);
    font-weight: var(--dbv2-font-weight-semibold);
    color: var(--dbv2-text-primary);
}

.brand-row-code[b-p08fzn3rag] {
    font-size: var(--dbv2-font-size-xs);
    color: var(--dbv2-text-tertiary);
}

.brand-row-dna[b-p08fzn3rag] {
    font-size: var(--dbv2-font-size-xs);
    color: var(--dbv2-text-tertiary);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

/* Deactivated brands read as dimmed — ::deep so it lands on ConfigList's row element. */
[b-p08fzn3rag] .config-list-row.brand-row--inactive {
    opacity: 0.6;
}
/* /Features/Config/Components/BrandDialog.razor.rz.scp.css */
/* Brand dialog — name / code / DNA form rendered inside a RadzenDialog (add + edit). */

.brand-dialog[b-qop69z6mhm] {
    display: flex;
    flex-direction: column;
    gap: var(--dbv2-space-4);
    min-width: 26.25rem;
}

.brand-dialog__field[b-qop69z6mhm] {
    display: flex;
    flex-direction: column;
    gap: var(--dbv2-space-2);
}

.brand-dialog__field-error[b-qop69z6mhm] {
    font-size: var(--dbv2-font-size-xs);
    color: var(--dbv2-error);
}

.brand-dialog__error[b-qop69z6mhm] {
    margin-top: var(--dbv2-space-1);
}
/* /Features/Config/Components/SettingsSidebarToc.razor.rz.scp.css */
.settings-toc[b-5f8movvbv2] {
    position: sticky;
    top: var(--dbv2-space-6);
    align-self: flex-start;
    min-width: 12.5rem;
    max-width: 13.75rem;
    flex-shrink: 0;
}

.toc-group[b-5f8movvbv2] {
    margin-bottom: var(--dbv2-space-3);
}

.toc-group:last-child[b-5f8movvbv2] {
    margin-bottom: 0;
}

.toc-group-label[b-5f8movvbv2] {
    display: block;
    padding: var(--dbv2-space-1) var(--dbv2-space-3);
    font-size: var(--dbv2-font-size-xs);
    font-weight: var(--dbv2-font-weight-semibold);
    color: var(--dbv2-text-tertiary);
    text-transform: uppercase;
    letter-spacing: 0.05em;
}

.toc-list[b-5f8movvbv2] {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: var(--dbv2-space-1);
}

.toc-item[b-5f8movvbv2] {
    margin: 0;
}

.toc-link[b-5f8movvbv2] {
    display: flex;
    align-items: center;
    gap: var(--dbv2-space-2);
    padding: var(--dbv2-space-2) var(--dbv2-space-3);
    border-radius: var(--dbv2-radius-sm);
    font-size: var(--dbv2-font-size-sm);
    font-weight: var(--dbv2-font-weight-medium);
    color: var(--dbv2-text-secondary);
    text-decoration: none;
    transition: background 0.15s ease, color 0.15s ease;
    cursor: pointer;
    border-left: 0.1875rem solid transparent;
}

.toc-link:hover[b-5f8movvbv2] {
    background: var(--dbv2-muted);
    color: var(--dbv2-text-primary);
}

.toc-link--active[b-5f8movvbv2] {
    color: var(--dbv2-primary);
    background: color-mix(in srgb, var(--dbv2-primary) 8%, transparent);
    border-left-color: var(--dbv2-primary);
    font-weight: var(--dbv2-font-weight-semibold);
}

[b-5f8movvbv2] .toc-link-icon {
    font-size: var(--dbv2-font-size-base);
    flex-shrink: 0;
}

/* Hide on mobile/tablet — desktop only */
@media (width <= 64rem) {
    .settings-toc[b-5f8movvbv2] {
        display: none;
    }
}
/* /Features/Config/Components/WorkflowConfigSection.razor.rz.scp.css */
/* Workflow row content inside the shared ConfigList surface. The card, rows, hover, states, hint and
   footer are owned by ConfigList; this file only styles the workflow-specific leading content. */

.workflow-row-body[b-lor8xsf9g7] {
    display: flex;
    flex-direction: column;
    gap: var(--dbv2-space-1);
    min-width: 0;
}

.workflow-row-header[b-lor8xsf9g7] {
    display: flex;
    align-items: center;
    gap: var(--dbv2-space-2);
}

.workflow-row-name[b-lor8xsf9g7] {
    font-size: var(--dbv2-font-size-sm);
    font-weight: var(--dbv2-font-weight-semibold);
    color: var(--dbv2-text-primary);
}

.workflow-row-key[b-lor8xsf9g7] {
    font-family: var(--dbv2-font-mono);
    font-size: var(--dbv2-font-size-xs);
    color: var(--dbv2-text-secondary);
}

.workflow-row-desc[b-lor8xsf9g7] {
    font-size: var(--dbv2-font-size-xs);
    color: var(--dbv2-text-tertiary);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
/* /Features/Config/Pages/ManageWorkflows.razor.rz.scp.css */
/* Section header — the title + action row inside the (remaining) avatars island. */
.section-header[b-lecs4j4p9t] {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: var(--dbv2-space-3);
}
/* /Features/Dashboard/Pages/Overview.razor.rz.scp.css */
/* Page header: title block + primary New session action */
.page-header-row[b-sbixjb38d2] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--dbv2-space-4);
}

/* The sessions grid and its "new data" refresh tab now live in QueryableDataGrid (the grid owns the
   affordance) — no island wraps it, so its own .qdg-surface is the card. See
   QueryableDataGrid.razor.css for the tab + has-new-data accent styling. */

/* Empty state actions */
.empty-actions[b-sbixjb38d2] {
    display: flex;
    gap: var(--dbv2-space-2);
    margin-top: var(--dbv2-space-2);
}

/* Credits island */
.credits-island[b-sbixjb38d2] {
    margin-bottom: var(--dbv2-space-4);
}

.credits-content[b-sbixjb38d2] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--dbv2-space-4);
}

.credits-info[b-sbixjb38d2] {
    display: flex;
    align-items: center;
    gap: var(--dbv2-space-4);
}

.credits-icon[b-sbixjb38d2] {
    font-size: var(--dbv2-icon-size-lg);
    color: var(--dbv2-success);
}

.credits-remaining[b-sbixjb38d2] {
    font-size: var(--dbv2-font-size-base);
    font-weight: var(--dbv2-font-weight-semibold);
    color: var(--dbv2-text-primary);
    margin: 0;
}

.credits-subtitle[b-sbixjb38d2] {
    font-size: var(--dbv2-font-size-sm);
    color: var(--dbv2-text-secondary);
    margin: 0;
}

.loading-text[b-sbixjb38d2] {
    font-size: var(--dbv2-font-size-sm);
    color: var(--dbv2-text-secondary);
}

/* Empty state */
.empty-state[b-sbixjb38d2] {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: var(--dbv2-space-2);
    padding: var(--dbv2-space-8) var(--dbv2-space-6);
    text-align: center;
}

.empty-icon[b-sbixjb38d2] {
    font-size: 2.5rem; /* stylelint-disable-line declaration-property-value-disallowed-list -- decorative icon glyph, not type */
    color: var(--dbv2-text-tertiary);
    opacity: 0.5;
}

.empty-title[b-sbixjb38d2] {
    font-size: var(--dbv2-font-size-base);
    color: var(--dbv2-text-primary);
    margin: 0;
}

.empty-subtitle[b-sbixjb38d2] {
    font-size: var(--dbv2-font-size-sm);
    color: var(--dbv2-text-secondary);
    margin: 0;
}

/* Expanded deliverables section (grid row detail). spec #24: this is the inner content of the grid's
   expanded-row Template, so it paints over Radzen's --rz-grid-detail-template-background-color (now
   mapped to --dbv2-canvas in dbv2-theme.css). Use the warm linen canvas directly so the detail reads
   as a recessed slice of the same surface — not the cool #f5f5f5 the previous (undefined)
   --dbv2-surface-raised token silently fell back to, which read as an off-system blue-grey tint. */
.session-deliverables[b-sbixjb38d2] {
    padding: var(--dbv2-space-3) var(--dbv2-space-4) var(--dbv2-space-4);
    background: var(--dbv2-canvas);
}

.deliverables-loading[b-sbixjb38d2] {
    display: flex;
    align-items: center;
    gap: var(--dbv2-space-2);
    padding: var(--dbv2-space-2) 0;
}

.deliverables-empty[b-sbixjb38d2] {
    font-size: var(--dbv2-font-size-sm);
    color: var(--dbv2-text-tertiary);
    padding: var(--dbv2-space-2) 0;
}

.deliverable-row[b-sbixjb38d2] {
    display: flex;
    align-items: flex-start;
    gap: var(--dbv2-space-3);
    padding: var(--dbv2-space-3) 0;
}

.deliverable-row + .deliverable-row[b-sbixjb38d2] {
    border-top: 0.0625rem solid var(--dbv2-border-light);
}

.deliverable-row-body[b-sbixjb38d2] {
    display: flex;
    flex-direction: column;
    gap: var(--dbv2-space-1);
    flex: 1;
    min-width: 0;
}

.deliverable-row-title-line[b-sbixjb38d2] {
    margin: 0;
    font-size: var(--dbv2-font-size-base);
    font-weight: var(--dbv2-font-weight-semibold);
    color: var(--dbv2-text-primary);
    text-transform: capitalize;
}

.deliverable-row-status-line[b-sbixjb38d2] {
    display: flex;
    align-items: center;
    gap: var(--dbv2-space-2);
    flex-wrap: wrap;
}

.deliverable-actor[b-sbixjb38d2] {
    margin-left: auto;
    font-size: var(--dbv2-font-size-sm);
    color: var(--dbv2-text-tertiary);
    white-space: nowrap;
}

.deliverable-variant[b-sbixjb38d2] {
    font-size: var(--dbv2-font-size-sm);
    font-weight: var(--dbv2-font-weight-semibold);
    color: var(--dbv2-text-primary);
    text-transform: capitalize;
}

/* Side-by-side variant columns — up to 4 deliverables across one row when expanded, wrapping to the
   next row beyond that. The track minimum is the larger of 14rem (keeps a thumbnail plus its meta
   legible) and a clean quarter of the row (so auto-fit never lays out more than 4 across); auto-fit
   then stretches 1–3 variants to fill the width instead of leaving dead quarter-tracks. */
.deliverables-columns[b-sbixjb38d2] {
    display: grid;
    gap: var(--dbv2-space-4);
    grid-template-columns: repeat(auto-fit, minmax(max(14rem, calc((100% - 3 * var(--dbv2-space-4)) / 4)), 1fr));
}

.deliverables-column[b-sbixjb38d2] {
    display: flex;
    flex-direction: column;
    gap: var(--dbv2-space-2);
}

/* Deliverable meta text */
.deliverable-meta[b-sbixjb38d2] {
    font-size: var(--dbv2-font-size-xs);
    color: var(--dbv2-text-tertiary);
}

/* /Features/GraphEditor/Components/CopyWorkflowDialog.razor.rz.scp.css */
/* Copy-workflow dialog — target-key prompt rendered inside a RadzenDialog. */

.copy-workflow-dialog[b-y9ywpc0buo] {
    display: flex;
    flex-direction: column;
    gap: var(--dbv2-space-4);
    min-width: 26.25rem;
}

.copy-workflow-dialog__hint[b-y9ywpc0buo] {
    margin: 0;
    color: var(--dbv2-text-secondary);
}

.copy-workflow-dialog__field[b-y9ywpc0buo] {
    display: flex;
    flex-direction: column;
    gap: var(--dbv2-space-2);
}

.copy-workflow-dialog__error[b-y9ywpc0buo] {
    margin-top: var(--dbv2-space-1);
}
/* /Features/GraphEditor/Components/DimensionsEditor.razor.rz.scp.css */
.dimensions-editor[b-0h2gk9mkxu] {
    display: flex;
    flex-direction: column;
    gap: var(--dbv2-space-4);
}

.dimensions-editor__list[b-0h2gk9mkxu] {
    display: flex;
    flex-direction: column;
    gap: var(--dbv2-space-3);
}

.dimensions-editor__row[b-0h2gk9mkxu] {
    display: flex;
    flex-direction: column;
    gap: var(--dbv2-space-3);
    padding: var(--dbv2-space-3);
    border: 1px solid var(--dbv2-border-light);
    border-radius: var(--dbv2-radius-md);
}

.dimensions-editor__key[b-0h2gk9mkxu] {
    margin: 0;
}

.dimensions-editor__grid[b-0h2gk9mkxu] {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(11.25rem, 1fr));
    gap: var(--dbv2-space-3);
}

.dimensions-editor__field[b-0h2gk9mkxu] {
    display: flex;
    flex-direction: column;
    gap: var(--dbv2-space-2);
}

.dimensions-editor__field--inline[b-0h2gk9mkxu] {
    flex-direction: row;
    align-items: center;
    gap: var(--dbv2-space-2);
}

.dimensions-editor__label[b-0h2gk9mkxu] {
    font-size: var(--dbv2-font-size-sm);
    font-weight: var(--dbv2-font-weight-medium);
    color: var(--dbv2-text-secondary);
}

.dimensions-editor__empty[b-0h2gk9mkxu] {
    color: var(--dbv2-text-secondary);
}

.dimensions-editor__aids[b-0h2gk9mkxu] {
    display: flex;
    flex-direction: column;
    gap: var(--dbv2-space-3);
    margin-top: var(--dbv2-space-3);
    padding: var(--dbv2-space-3);
    border: 1px solid var(--dbv2-border-light);
    border-radius: var(--dbv2-radius-sm);
    background: var(--dbv2-surface);
}

.dimensions-editor__sample[b-0h2gk9mkxu] {
    position: relative;
    width: 20rem;
    max-width: 100%;
    align-self: flex-start;
    border-radius: var(--dbv2-radius-sm);
    overflow: hidden;
    cursor: crosshair;
    touch-action: none;
    user-select: none;
}

.dimensions-editor__sample-img[b-0h2gk9mkxu] {
    display: block;
    width: 100%;
    height: auto;
    pointer-events: none;
}

.dimensions-editor__overlay[b-0h2gk9mkxu] {
    position: absolute;
    box-sizing: border-box;
    pointer-events: none;
}

.dimensions-editor__overlay--preview[b-0h2gk9mkxu] {
    border: 2px solid var(--dbv2-primary);
    background: var(--dbv2-primary-lighter);
}

.dimensions-editor__overlay--draft[b-0h2gk9mkxu] {
    border: 2px dashed var(--dbv2-text-secondary);
}

.dimensions-editor__aid-actions[b-0h2gk9mkxu] {
    display: flex;
    flex-wrap: wrap;
    gap: var(--dbv2-space-2);
}

.dimensions-editor__aid-nudge[b-0h2gk9mkxu] {
    display: flex;
    gap: var(--dbv2-space-2);
    align-items: center;
}
/* /Features/GraphEditor/Components/GraphDiagram.razor.rz.scp.css */
.graph-diagram[b-m4awyn5f2w] {
    width: 100%;
    overflow: auto;
    background: var(--dbv2-canvas);
    border: 1px solid var(--dbv2-border);
    border-radius: var(--dbv2-radius-sm);
    padding: var(--dbv2-space-3);
}

.graph-diagram--empty[b-m4awyn5f2w] {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: var(--dbv2-space-2);
    min-height: 10rem;
    color: var(--dbv2-text-tertiary);
}

.graph-diagram__empty-text[b-m4awyn5f2w] {
    color: var(--dbv2-text-tertiary);
}

.graph-diagram__canvas[b-m4awyn5f2w] {
    display: block;
}

.graph-diagram__node-box[b-m4awyn5f2w] {
    fill: var(--dbv2-surface);
    stroke: var(--dbv2-border-strong);
    stroke-width: 1;
}

.graph-diagram__node--seed .graph-diagram__node-box[b-m4awyn5f2w] {
    stroke: var(--dbv2-primary);
    stroke-width: 2;
}

.graph-diagram__node-kind[b-m4awyn5f2w] {
    fill: var(--dbv2-text-tertiary);
    font-size: var(--dbv2-font-size-xs);
    font-weight: var(--dbv2-font-weight-semibold);
    letter-spacing: 0.5px;
}

.graph-diagram__node-name[b-m4awyn5f2w] {
    fill: var(--dbv2-text-primary);
    font-size: var(--dbv2-font-size-sm);
    font-weight: var(--dbv2-font-weight-medium);
}

.graph-diagram__edge[b-m4awyn5f2w] {
    fill: none;
    stroke: var(--dbv2-border-strong);
    stroke-width: 1.5;
}

.graph-diagram__edge--back[b-m4awyn5f2w] {
    stroke: var(--dbv2-warning);
    stroke-dasharray: 5 4;
}

.graph-diagram__arrowhead[b-m4awyn5f2w] {
    fill: var(--dbv2-border-strong);
}
/* /Features/GraphEditor/Components/GraphErrorsPanel.razor.rz.scp.css */
.graph-errors[b-xou3u16cu1] {
    display: flex;
    flex-direction: column;
    gap: var(--dbv2-space-3);
}

.graph-errors__header[b-xou3u16cu1] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--dbv2-space-2);
}

.graph-errors__title[b-xou3u16cu1] {
    margin: 0;
}

.graph-errors__count[b-xou3u16cu1] {
    display: inline-flex;
    align-items: center;
    padding: var(--dbv2-space-1) var(--dbv2-space-2);
    border-radius: var(--dbv2-radius-full);
    font-size: var(--dbv2-font-size-xs);
    font-weight: var(--dbv2-font-weight-semibold);
}

.graph-errors__count--ok[b-xou3u16cu1] {
    color: var(--dbv2-success-dark);
    background: var(--dbv2-success-lighter);
}

.graph-errors__count--bad[b-xou3u16cu1] {
    color: var(--dbv2-error-dark);
    background: var(--dbv2-error-lighter);
}

.graph-errors__ok[b-xou3u16cu1] {
    display: flex;
    align-items: center;
    gap: var(--dbv2-space-2);
    color: var(--dbv2-success-dark);
}

.graph-errors__ok-text[b-xou3u16cu1] {
    color: var(--dbv2-text-secondary);
}

.graph-errors__list[b-xou3u16cu1] {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: var(--dbv2-space-2);
}

.graph-errors__item[b-xou3u16cu1] {
    display: flex;
    align-items: flex-start;
    gap: var(--dbv2-space-2);
    padding: var(--dbv2-space-3);
    border: 1px solid var(--dbv2-error-light);
    border-radius: var(--dbv2-radius-sm);
    background: var(--dbv2-error-lighter);
}

.graph-errors__item-icon[b-xou3u16cu1] {
    color: var(--dbv2-error);
    flex-shrink: 0;
}

.graph-errors__item-body[b-xou3u16cu1] {
    display: flex;
    flex-direction: column;
    gap: var(--dbv2-space-1);
    min-width: 0;
}

.graph-errors__item-message[b-xou3u16cu1] {
    color: var(--dbv2-text-primary);
}

.graph-errors__item-code[b-xou3u16cu1] {
    font-size: var(--dbv2-font-size-xs);
    font-weight: var(--dbv2-font-weight-medium);
    color: var(--dbv2-text-tertiary);
    letter-spacing: 0.02em;
}
/* /Features/GraphEditor/Components/InputPortEditor.razor.rz.scp.css */
.port-editor[b-ei2gwkdpxo] {
    display: flex;
    flex-direction: column;
    gap: var(--dbv2-space-2);
    padding: var(--dbv2-space-3);
    border: 1px solid var(--dbv2-border-light);
    border-radius: var(--dbv2-radius-sm);
    background: var(--dbv2-muted);
}

.port-editor__head[b-ei2gwkdpxo] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--dbv2-space-2);
}

.port-editor__key[b-ei2gwkdpxo] {
    font-weight: var(--dbv2-font-weight-semibold);
    color: var(--dbv2-text-primary);
}

.port-editor__type[b-ei2gwkdpxo] {
    font-size: var(--dbv2-font-size-xs);
    font-weight: var(--dbv2-font-weight-medium);
    color: var(--dbv2-text-tertiary);
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

.port-editor__field[b-ei2gwkdpxo] {
    display: flex;
    flex-direction: column;
    gap: var(--dbv2-space-1);
}

.port-editor__label[b-ei2gwkdpxo] {
    font-size: var(--dbv2-font-size-xs);
    font-weight: var(--dbv2-font-weight-medium);
    color: var(--dbv2-text-secondary);
}

.port-editor__row[b-ei2gwkdpxo] {
    display: flex;
    flex-wrap: wrap;
    gap: var(--dbv2-space-4);
}

.port-editor__toggle[b-ei2gwkdpxo] {
    display: flex;
    align-items: center;
    gap: var(--dbv2-space-2);
}

.port-editor__inline-label[b-ei2gwkdpxo] {
    font-size: var(--dbv2-font-size-sm);
    color: var(--dbv2-text-secondary);
}

.port-editor__cell[b-ei2gwkdpxo] {
    display: flex;
    flex-direction: column;
    gap: var(--dbv2-space-1);
    padding-top: var(--dbv2-space-2);
}

.port-editor__cell-scope[b-ei2gwkdpxo] {
    font-size: var(--dbv2-font-size-xs);
    color: var(--dbv2-text-tertiary);
}

.port-editor__hint[b-ei2gwkdpxo] {
    color: var(--dbv2-text-tertiary);
}
/* /Features/GraphEditor/Components/LabelSourceEditor.razor.rz.scp.css */
.label-source-editor[b-hxw92lpnq5] {
    display: flex;
    flex-direction: column;
    gap: var(--dbv2-space-3);
}

.label-source-editor__list[b-hxw92lpnq5] {
    display: flex;
    flex-direction: column;
    gap: var(--dbv2-space-2);
    margin: 0;
    padding-left: var(--dbv2-space-5);
}

.label-source-editor__row[b-hxw92lpnq5] {
    display: flex;
    align-items: center;
    gap: var(--dbv2-space-2);
}

.label-source-editor__kind[b-hxw92lpnq5] {
    font-size: var(--dbv2-font-size-sm);
    font-weight: var(--dbv2-font-weight-medium);
    color: var(--dbv2-text-primary);
    min-width: 5rem;
}

.label-source-editor__add[b-hxw92lpnq5] {
    display: flex;
    align-items: center;
    gap: var(--dbv2-space-2);
}

.label-source-editor__empty[b-hxw92lpnq5] {
    color: var(--dbv2-text-secondary);
}
/* /Features/GraphEditor/Components/LibraryPoolEditor.razor.rz.scp.css */
.library-pool-editor[b-cjoc0hm854] {
    display: flex;
    flex-direction: column;
    gap: var(--dbv2-space-4);
}

.library-pool-editor__empty[b-cjoc0hm854] {
    color: var(--dbv2-text-secondary);
}

.library-pool-editor__list[b-cjoc0hm854] {
    display: flex;
    flex-direction: column;
    gap: var(--dbv2-space-3);
}

.library-pool-editor__row[b-cjoc0hm854] {
    display: flex;
    flex-direction: column;
    gap: var(--dbv2-space-2);
    padding: var(--dbv2-space-3);
    border: 1px solid var(--dbv2-border-light);
    border-radius: var(--dbv2-radius-md);
}

.library-pool-editor__row-header[b-cjoc0hm854] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--dbv2-space-3);
}

.library-pool-editor__key[b-cjoc0hm854] {
    margin: 0;
}

.library-pool-editor__save-hint[b-cjoc0hm854] {
    color: var(--dbv2-text-secondary);
}

.library-pool-editor__drawer[b-cjoc0hm854] {
    display: flex;
    flex-direction: column;
    gap: var(--dbv2-space-3);
    margin-top: var(--dbv2-space-2);
    padding: var(--dbv2-space-3);
    border: 1px solid var(--dbv2-border-light);
    border-radius: var(--dbv2-radius-md);
    background: var(--dbv2-muted);
}

.library-pool-editor__drawer-header[b-cjoc0hm854] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--dbv2-space-3);
}

.library-pool-editor__drawer-hint[b-cjoc0hm854],
.library-pool-editor__drawer-empty[b-cjoc0hm854] {
    color: var(--dbv2-text-secondary);
}

.library-pool-editor__upload[b-cjoc0hm854] {
    display: flex;
    align-items: center;
    gap: var(--dbv2-space-2);
}

.library-pool-editor__assets[b-cjoc0hm854] {
    display: flex;
    flex-direction: column;
    gap: var(--dbv2-space-2);
}

.library-pool-editor__asset[b-cjoc0hm854] {
    display: flex;
    align-items: center;
    gap: var(--dbv2-space-3);
    padding: var(--dbv2-space-2);
    border: 1px solid var(--dbv2-border-light);
    border-radius: var(--dbv2-radius-sm);
}

.library-pool-editor__thumb[b-cjoc0hm854] {
    width: 3rem;
    height: 3rem;
    object-fit: cover;
    border-radius: var(--dbv2-radius-sm);
}

.library-pool-editor__filename[b-cjoc0hm854] {
    flex: 1;
    font-size: var(--dbv2-font-size-sm);
    color: var(--dbv2-text-primary);
}

.library-pool-editor__asset-controls[b-cjoc0hm854] {
    display: flex;
    align-items: center;
    gap: var(--dbv2-space-2);
}

.library-pool-editor__active-label[b-cjoc0hm854] {
    font-size: var(--dbv2-font-size-sm);
    color: var(--dbv2-text-secondary);
}
/* /Features/GraphEditor/Components/NodeEditor.razor.rz.scp.css */
.node-editor[b-eteh0cjs38] {
    display: flex;
    flex-direction: column;
    gap: var(--dbv2-space-4);
}

.node-editor__field[b-eteh0cjs38] {
    display: flex;
    flex-direction: column;
    gap: var(--dbv2-space-2);
}

.node-editor__label[b-eteh0cjs38] {
    font-size: var(--dbv2-font-size-sm);
    font-weight: var(--dbv2-font-weight-medium);
    color: var(--dbv2-text-secondary);
}

.node-editor__row[b-eteh0cjs38] {
    display: flex;
    align-items: center;
    gap: var(--dbv2-space-2);
}

.node-editor__inline-label[b-eteh0cjs38] {
    font-size: var(--dbv2-font-size-sm);
    color: var(--dbv2-text-secondary);
}

.node-editor__hint[b-eteh0cjs38] {
    color: var(--dbv2-text-tertiary);
}

.node-editor__section[b-eteh0cjs38] {
    display: flex;
    flex-direction: column;
    gap: var(--dbv2-space-3);
    padding-top: var(--dbv2-space-3);
    border-top: 0.0625rem solid var(--dbv2-border-light);
}

.node-editor__section-title[b-eteh0cjs38] {
    margin: 0;
    color: var(--dbv2-text-secondary);
}
/* /Features/GraphEditor/Components/OutputPortEditor.razor.rz.scp.css */
.port-editor[b-x3ks0845g5] {
    display: flex;
    flex-direction: column;
    gap: var(--dbv2-space-2);
    padding: var(--dbv2-space-3);
    border: 1px solid var(--dbv2-border-light);
    border-radius: var(--dbv2-radius-sm);
    background: var(--dbv2-muted);
}

.port-editor__head[b-x3ks0845g5] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--dbv2-space-2);
}

.port-editor__key[b-x3ks0845g5] {
    font-weight: var(--dbv2-font-weight-semibold);
    color: var(--dbv2-text-primary);
}

.port-editor__type[b-x3ks0845g5] {
    font-size: var(--dbv2-font-size-xs);
    font-weight: var(--dbv2-font-weight-medium);
    color: var(--dbv2-text-tertiary);
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

.port-editor__field[b-x3ks0845g5] {
    display: flex;
    flex-direction: column;
    gap: var(--dbv2-space-1);
}

.port-editor__label[b-x3ks0845g5] {
    font-size: var(--dbv2-font-size-xs);
    font-weight: var(--dbv2-font-weight-medium);
    color: var(--dbv2-text-secondary);
}

.port-editor__row[b-x3ks0845g5] {
    display: flex;
    flex-wrap: wrap;
    gap: var(--dbv2-space-4);
}

.port-editor__toggle[b-x3ks0845g5] {
    display: flex;
    align-items: center;
    gap: var(--dbv2-space-2);
}

.port-editor__inline-label[b-x3ks0845g5] {
    font-size: var(--dbv2-font-size-sm);
    color: var(--dbv2-text-secondary);
}

.port-editor__cell[b-x3ks0845g5] {
    display: flex;
    flex-direction: column;
    gap: var(--dbv2-space-1);
    padding-top: var(--dbv2-space-2);
}

.port-editor__cell-scope[b-x3ks0845g5] {
    font-size: var(--dbv2-font-size-xs);
    color: var(--dbv2-text-tertiary);
}

.port-editor__hint[b-x3ks0845g5] {
    color: var(--dbv2-text-tertiary);
}
/* /Features/GraphEditor/Components/OutputsEditor.razor.rz.scp.css */
.outputs-editor[b-r5oisb3ofw] {
    display: flex;
    flex-direction: column;
    gap: var(--dbv2-space-4);
}

.outputs-editor__list[b-r5oisb3ofw] {
    display: flex;
    flex-direction: column;
    gap: var(--dbv2-space-3);
}

.outputs-editor__row[b-r5oisb3ofw] {
    display: flex;
    flex-direction: column;
    gap: var(--dbv2-space-3);
    padding: var(--dbv2-space-3);
    border: 1px solid var(--dbv2-border-light);
    border-radius: var(--dbv2-radius-md);
}

.outputs-editor__row-header[b-r5oisb3ofw] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--dbv2-space-3);
}

.outputs-editor__key[b-r5oisb3ofw] {
    margin: 0;
}

.outputs-editor__row-controls[b-r5oisb3ofw] {
    display: flex;
    align-items: center;
    gap: var(--dbv2-space-2);
}

.outputs-editor__active-label[b-r5oisb3ofw] {
    font-size: var(--dbv2-font-size-sm);
    color: var(--dbv2-text-secondary);
}

.outputs-editor__field[b-r5oisb3ofw] {
    display: flex;
    flex-direction: column;
    gap: var(--dbv2-space-2);
}

.outputs-editor__label[b-r5oisb3ofw] {
    font-size: var(--dbv2-font-size-sm);
    font-weight: var(--dbv2-font-weight-medium);
    color: var(--dbv2-text-secondary);
}

.outputs-editor__add[b-r5oisb3ofw] {
    display: flex;
    align-items: center;
    gap: var(--dbv2-space-2);
}

.outputs-editor__empty[b-r5oisb3ofw] {
    color: var(--dbv2-text-secondary);
}
/* /Features/GraphEditor/Components/WorkflowSettingsEditor.razor.rz.scp.css */
.workflow-settings[b-ymnka1np3o] {
    display: flex;
    flex-direction: column;
    gap: var(--dbv2-space-4);
}

.workflow-settings__field[b-ymnka1np3o] {
    display: flex;
    flex-direction: column;
    gap: var(--dbv2-space-2);
}

.workflow-settings__label[b-ymnka1np3o] {
    font-size: var(--dbv2-font-size-sm);
    font-weight: var(--dbv2-font-weight-medium);
    color: var(--dbv2-text-secondary);
}

.workflow-settings__flags[b-ymnka1np3o] {
    display: grid;
    grid-template-columns: auto 1fr;
    align-items: center;
    gap: var(--dbv2-space-2) var(--dbv2-space-3);
}

.workflow-settings__flag-label[b-ymnka1np3o] {
    font-size: var(--dbv2-font-size-sm);
    color: var(--dbv2-text-primary);
}

/* ── Aid row (Refine critique + button side by side) ───────────────────────── */

.workflow-settings__aid-row[b-ymnka1np3o] {
    display: flex;
    align-items: center;
    gap: var(--dbv2-space-2);
}

.workflow-settings__aid-hint[b-ymnka1np3o] {
    color: var(--dbv2-text-tertiary);
}

/* ── Example-image upload ───────────────────────────────────────────────────── */

.workflow-settings__file-input[b-ymnka1np3o] {
    cursor: pointer;
    color: var(--dbv2-text-secondary);
}

.workflow-settings__file-name[b-ymnka1np3o] {
    color: var(--dbv2-text-tertiary);
}

/* ── SegmentPreview result card ─────────────────────────────────────────────── */

.workflow-settings__segment-result[b-ymnka1np3o] {
    display: flex;
    flex-direction: column;
    gap: var(--dbv2-space-3);
    padding: var(--dbv2-space-3);
    background: var(--dbv2-surface);
    border-radius: var(--dbv2-radius-md);
    border: 1px solid var(--dbv2-border-light);
    transition: opacity 0.2s ease;
}

.workflow-settings__segment-mask[b-ymnka1np3o] {
    width: 100%;
    border-radius: var(--dbv2-radius-sm);
    object-fit: contain;
    max-height: 12.5rem;
}

.workflow-settings__segment-meta[b-ymnka1np3o] {
    display: flex;
    flex-direction: column;
    gap: var(--dbv2-space-1);
}

.workflow-settings__segment-meta-row[b-ymnka1np3o] {
    display: flex;
    align-items: baseline;
    gap: var(--dbv2-space-2);
}

.workflow-settings__segment-label[b-ymnka1np3o] {
    color: var(--dbv2-text-secondary);
    min-width: 5rem;
}

.workflow-settings__segment-failure[b-ymnka1np3o] {
    color: var(--dbv2-error-dark);
    padding-top: var(--dbv2-space-1);
}
/* /Features/GraphEditor/Pages/GraphEditor.razor.rz.scp.css */
.graph-editor__header[b-a0u7857w9a] {
    display: flex;
    align-items: center;
    gap: var(--dbv2-space-3);
}

.graph-editor__subsection-title[b-a0u7857w9a] {
    margin: var(--dbv2-space-4) 0 0;
}

.graph-editor__title[b-a0u7857w9a] {
    margin: 0;
}

.graph-editor__subtitle[b-a0u7857w9a] {
    margin: 0;
    color: var(--dbv2-text-secondary);
}

.graph-editor__layout[b-a0u7857w9a] {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 20rem;
    gap: var(--dbv2-island-gap);
    align-items: start;
}

.graph-editor__main[b-a0u7857w9a] {
    display: flex;
    flex-direction: column;
    gap: var(--dbv2-island-gap);
    min-width: 0;
}

.graph-editor__aside[b-a0u7857w9a] {
    display: flex;
    flex-direction: column;
    gap: var(--dbv2-island-gap);
    position: sticky;
    top: var(--dbv2-space-4);
}

.graph-editor__publish-island[b-a0u7857w9a] {
    display: flex;
    flex-direction: column;
    gap: var(--dbv2-space-2);
}

.graph-editor__save-error[b-a0u7857w9a] {
    color: var(--dbv2-error);
}

.graph-editor__node-tabs[b-a0u7857w9a] {
    display: flex;
    flex-wrap: wrap;
    gap: var(--dbv2-space-2);
    margin-bottom: var(--dbv2-space-4);
}

.graph-editor__node-tab[b-a0u7857w9a] {
    padding: var(--dbv2-space-2) var(--dbv2-space-3);
    border: 1px solid var(--dbv2-border);
    border-radius: var(--dbv2-radius-full);
    background: var(--dbv2-surface);
    color: var(--dbv2-text-secondary);
    font-size: var(--dbv2-font-size-sm);
    font-weight: var(--dbv2-font-weight-medium);
    cursor: pointer;
    transition: background-color var(--dbv2-dur-hover) var(--dbv2-ease-out),
                color var(--dbv2-dur-hover) var(--dbv2-ease-out);
}

.graph-editor__node-tab:hover[b-a0u7857w9a] {
    background: var(--dbv2-muted);
    color: var(--dbv2-text-primary);
}

.graph-editor__node-tab--active[b-a0u7857w9a] {
    background: var(--dbv2-primary);
    border-color: var(--dbv2-primary);
    color: var(--dbv2-on-primary);
}

.graph-editor__loading[b-a0u7857w9a] {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: var(--dbv2-space-3);
    padding: var(--dbv2-space-6) 0;
}

.graph-editor__loading-text[b-a0u7857w9a] {
    color: var(--dbv2-text-secondary);
}

.graph-editor__message-island[b-a0u7857w9a] {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    gap: var(--dbv2-space-2);
    padding: var(--dbv2-space-8) var(--dbv2-space-6);
}

.graph-editor__message-icon[b-a0u7857w9a] {
    color: var(--dbv2-error);
    font-size: var(--dbv2-icon-size-lg);
}

.graph-editor__message-detail[b-a0u7857w9a] {
    color: var(--dbv2-text-secondary);
}

@media (width <= 60rem) {
    .graph-editor__layout[b-a0u7857w9a] {
        grid-template-columns: minmax(0, 1fr);
    }

    .graph-editor__aside[b-a0u7857w9a] {
        position: static;
    }
}
/* /Features/Integrations/Components/IntegrationStatusBadge.razor.rz.scp.css */
/* No component styles: the status pill renders via the canonical `dbv2-chip`
   primitive + a `--status-*` modifier (see dbv2-theme.css). */
/* /Features/Integrations/Pages/IntegrationSetup.razor.rz.scp.css */
/* Integrations overview — flat, server-sorted source grid. */

.integrations-overview__busy[b-ls7kt6e6w6] {
    display: flex;
    align-items: center;
    gap: var(--dbv2-space-3);
    padding: var(--dbv2-space-2) 0;
}

.integrations-overview__busy-text[b-ls7kt6e6w6] {
    color: var(--dbv2-text-secondary);
}

/* Empty state — rare first-run surface, so a small reveal earns its keep. */
.integrations-overview__empty[b-ls7kt6e6w6] {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    gap: var(--dbv2-space-2);
    padding: var(--dbv2-space-10) var(--dbv2-space-4);
    animation: integrations-empty-in-b-ls7kt6e6w6 var(--dbv2-dur-modal) var(--dbv2-ease-out) both;
}

.integrations-overview__empty-icon[b-ls7kt6e6w6] {
    font-size: var(--dbv2-font-size-xl);
    color: var(--dbv2-text-tertiary);
    opacity: 0.7;
}

.integrations-overview__empty-title[b-ls7kt6e6w6] {
    color: var(--dbv2-text-primary);
}

.integrations-overview__empty-hint[b-ls7kt6e6w6] {
    color: var(--dbv2-text-tertiary);
    max-width: 38ch;
}

/* The whole row is clickable (RowSelect navigates), so give it pointer affordance and a calm hover wash. */
.integrations-overview__grid[b-ls7kt6e6w6]  .rz-data-row {
    cursor: pointer;
    transition: background-color var(--dbv2-dur-hover) var(--dbv2-ease-out);
}

@media (hover: hover) and (pointer: fine) {
    .integrations-overview__grid[b-ls7kt6e6w6]  .rz-data-row:hover {
        background-color: var(--dbv2-primary-tint);
    }
}

.integrations-overview__name[b-ls7kt6e6w6] {
    color: var(--dbv2-text-primary);
    font-weight: var(--dbv2-font-weight-medium);
}

@keyframes integrations-empty-in-b-ls7kt6e6w6 {
    from {
        opacity: 0;
        transform: translateY(8px);
    }

    to {
        opacity: 1;
        transform: translateY(0);
    }
}

@media (prefers-reduced-motion: reduce) {
    .integrations-overview__empty[b-ls7kt6e6w6] {
        animation-duration: 0.01ms;
    }

    .integrations-overview__grid[b-ls7kt6e6w6]  .rz-data-row {
        transition-duration: 0.01ms;
    }
}
/* /Features/Integrations/Pages/KeySelection.razor.rz.scp.css */
.key-selection__step-header[b-5xrb9q0pyq] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--dbv2-space-4);
}

.key-selection__busy[b-5xrb9q0pyq] {
    display: flex;
    align-items: center;
    gap: var(--dbv2-space-3);
    padding: var(--dbv2-space-2) 0;
}

.key-selection__busy-text[b-5xrb9q0pyq] {
    color: var(--dbv2-text-secondary);
}

.key-selection__alert[b-5xrb9q0pyq] {
    margin-top: var(--dbv2-space-3);
}

.key-selection__sample-ready[b-5xrb9q0pyq] {
    display: flex;
    align-items: center;
    gap: var(--dbv2-space-2);
    margin-top: var(--dbv2-space-3);
    color: var(--dbv2-success-darker);
    animation: key-selection-reveal-b-5xrb9q0pyq var(--dbv2-dur-modal) var(--dbv2-ease-out) both;
}

.key-selection__sample-ready-icon[b-5xrb9q0pyq] {
    color: var(--dbv2-success);
}

.key-selection__needs-fetch[b-5xrb9q0pyq] {
    margin-top: var(--dbv2-space-3);
    color: var(--dbv2-text-tertiary);
}

.key-selection__hint[b-5xrb9q0pyq] {
    color: var(--dbv2-text-secondary);
    margin: 0 0 var(--dbv2-space-3);
}

@keyframes key-selection-reveal-b-5xrb9q0pyq {
    from {
        opacity: 0;
        transform: translateY(0.375rem);
    }

    to {
        opacity: 1;
        transform: translateY(0);
    }
}

.key-selection__field-grid[b-5xrb9q0pyq] {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(11.25rem, 1fr));
    gap: var(--dbv2-space-2);
}

.key-selection__field[b-5xrb9q0pyq] {
    display: flex;
    align-items: center;
    gap: var(--dbv2-space-2);
    padding: var(--dbv2-space-2) var(--dbv2-space-3);
    border: 1px solid var(--dbv2-border);
    border-radius: var(--dbv2-radius-md);
    background: var(--dbv2-surface);
    color: var(--dbv2-text-primary);
    font-size: var(--dbv2-font-size-sm);
    cursor: pointer;
    text-align: left;
    transition: border-color 0.12s ease, background 0.12s ease;
}

.key-selection__field:hover[b-5xrb9q0pyq] {
    border-color: var(--dbv2-border-strong);
}

.key-selection__field--selected[b-5xrb9q0pyq] {
    border-color: var(--dbv2-primary);
    background: var(--dbv2-primary-wash);
}

.key-selection__field-order[b-5xrb9q0pyq] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 1.5em;
    height: 1.5em;
    border-radius: var(--dbv2-radius-sm);
    background: var(--dbv2-primary);
    color: var(--dbv2-on-primary);
    font-weight: var(--dbv2-font-weight-semibold);
    font-size: var(--dbv2-font-size-xs);
}

.key-selection__field-name[b-5xrb9q0pyq] {
    flex: 1;
    font-weight: var(--dbv2-font-weight-medium);
}

.key-selection__field-type[b-5xrb9q0pyq] {
    color: var(--dbv2-text-tertiary);
    font-size: var(--dbv2-font-size-xs);
}

.key-selection__selected-summary[b-5xrb9q0pyq] {
    display: flex;
    align-items: baseline;
    gap: var(--dbv2-space-2);
    margin-top: var(--dbv2-space-3);
}

.key-selection__selected-label[b-5xrb9q0pyq] {
    color: var(--dbv2-text-tertiary);
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

.key-selection__dupe-count[b-5xrb9q0pyq] {
    margin: var(--dbv2-space-3) 0 0;
}

.key-selection__truncation-note[b-5xrb9q0pyq] {
    display: block;
    margin-top: var(--dbv2-space-2);
    color: var(--dbv2-text-tertiary);
}

.key-selection__dupe-groups[b-5xrb9q0pyq] {
    display: flex;
    flex-direction: column;
    gap: var(--dbv2-space-2);
    margin-top: var(--dbv2-space-3);
}

.key-selection__dupe-group[b-5xrb9q0pyq] {
    border: 1px solid var(--dbv2-border);
    border-radius: var(--dbv2-radius-md);
    background: var(--dbv2-surface);
    padding: var(--dbv2-space-3);
}

.key-selection__dupe-group-header[b-5xrb9q0pyq] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--dbv2-space-3);
}

.key-selection__dupe-key[b-5xrb9q0pyq] {
    color: var(--dbv2-text-primary);
}

.key-selection__dupe-rows[b-5xrb9q0pyq] {
    display: flex;
    flex-direction: column;
    gap: var(--dbv2-space-2);
    margin-top: var(--dbv2-space-3);
    padding-top: var(--dbv2-space-3);
    border-top: 0.0625rem solid var(--dbv2-border);
}

.key-selection__dupe-row[b-5xrb9q0pyq] {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(11.25rem, 1fr));
    gap: var(--dbv2-space-2);
    margin: 0;
    padding: var(--dbv2-space-2);
    border-radius: var(--dbv2-radius-sm);
    background: var(--dbv2-canvas);
}

.key-selection__dupe-cell[b-5xrb9q0pyq] {
    display: flex;
    flex-direction: column;
    gap: var(--dbv2-space-1);
    min-width: 0;
}

.key-selection__dupe-cell-name[b-5xrb9q0pyq] {
    color: var(--dbv2-text-tertiary);
    font-size: var(--dbv2-font-size-xs);
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

.key-selection__dupe-cell-value[b-5xrb9q0pyq] {
    margin: 0;
    color: var(--dbv2-text-primary);
    font-size: var(--dbv2-font-size-sm);
    overflow-wrap: anywhere;
}

.key-selection__dupe-badge[b-5xrb9q0pyq] {
    display: inline-flex;
    align-items: center;
    padding: var(--dbv2-space-1) var(--dbv2-space-2);
    border-radius: var(--dbv2-radius-sm);
    background: var(--dbv2-warning-lighter);
    color: var(--dbv2-warning-darker);
    font-size: var(--dbv2-font-size-xs);
    font-weight: var(--dbv2-font-weight-semibold);
}

.key-selection__warning-text[b-5xrb9q0pyq] {
    color: var(--dbv2-warning-darker);
    font-weight: var(--dbv2-font-weight-medium);
}

.key-selection__success-text[b-5xrb9q0pyq] {
    color: var(--dbv2-success-darker);
    font-weight: var(--dbv2-font-weight-medium);
}

/* Reduced motion: keep the comprehension-aiding opacity fade, strip the movement. */
@media (prefers-reduced-motion: reduce) {
    .key-selection__field[b-5xrb9q0pyq] {
        transition-duration: 0.01ms;
    }

    .key-selection__sample-ready[b-5xrb9q0pyq] {
        animation-duration: 0.01ms;
        animation-iteration-count: 1;
    }
}
/* /Features/Integrations/Pages/SourceSettings.razor.rz.scp.css */
/* Per-source settings — read-only header + nav-only entities grid. */

.source-settings__busy[b-qqkux2o3bo] {
    display: flex;
    align-items: center;
    gap: var(--dbv2-space-3);
    padding: var(--dbv2-space-4) 0;
}

.source-settings__busy-text[b-qqkux2o3bo] {
    color: var(--dbv2-text-secondary);
}

/* Read-only header metadata row. */
.source-settings__meta[b-qqkux2o3bo] {
    display: flex;
    align-items: center;
    gap: var(--dbv2-space-2);
    margin-top: var(--dbv2-space-1);
}

.source-settings__meta-item[b-qqkux2o3bo] {
    color: var(--dbv2-text-secondary);
}

.source-settings__meta-label[b-qqkux2o3bo] {
    color: var(--dbv2-text-tertiary);
    text-transform: uppercase;
    letter-spacing: 0.5px;
    margin-right: var(--dbv2-space-1);
}

.source-settings__meta-sep[b-qqkux2o3bo] {
    color: var(--dbv2-border-strong);
}

.source-settings__description[b-qqkux2o3bo] {
    margin-top: var(--dbv2-space-3);
    max-width: 70ch;
}

.source-settings__section-header[b-qqkux2o3bo] {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: var(--dbv2-space-4);
    margin-bottom: var(--dbv2-space-4);
}

/* The island title carries its own bottom margin; the header row owns the spacing here. */
.source-settings__section-header .dbv2-island-title[b-qqkux2o3bo] {
    margin-bottom: 0;
}

.source-settings__alert[b-qqkux2o3bo] {
    margin-bottom: var(--dbv2-space-4);
}

/* Empty state. */
.source-settings__empty[b-qqkux2o3bo] {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    gap: var(--dbv2-space-2);
    padding: var(--dbv2-space-8) var(--dbv2-space-4);
    animation: source-settings-empty-in-b-qqkux2o3bo var(--dbv2-dur-modal) var(--dbv2-ease-out) both;
}

.source-settings__empty-icon[b-qqkux2o3bo] {
    font-size: var(--dbv2-font-size-xl);
    color: var(--dbv2-text-tertiary);
    opacity: 0.7;
}

.source-settings__empty-title[b-qqkux2o3bo] {
    color: var(--dbv2-text-primary);
}

.source-settings__empty-hint[b-qqkux2o3bo] {
    color: var(--dbv2-text-tertiary);
    max-width: 38ch;
}

/* Whole-row navigation: pointer affordance + a calm hover wash. */
.source-settings__grid[b-qqkux2o3bo]  .rz-data-row {
    cursor: pointer;
    transition: background-color var(--dbv2-dur-hover) var(--dbv2-ease-out);
}

@media (hover: hover) and (pointer: fine) {
    .source-settings__grid[b-qqkux2o3bo]  .rz-data-row:hover {
        background-color: var(--dbv2-primary-tint);
    }
}

.source-settings__entity-name[b-qqkux2o3bo] {
    color: var(--dbv2-text-primary);
    font-weight: var(--dbv2-font-weight-medium);
}

/* Duplicate-count tones (spec 9). */
.source-settings__dup-none[b-qqkux2o3bo] {
    color: var(--dbv2-text-tertiary);
}

.source-settings__dup-clean[b-qqkux2o3bo] {
    color: var(--dbv2-text-secondary);
}

.source-settings__dup-some[b-qqkux2o3bo] {
    color: var(--dbv2-warning-dark);
    font-weight: var(--dbv2-font-weight-semibold);
}

.source-settings__row-cta[b-qqkux2o3bo] {
    display: flex;
    justify-content: flex-end;
    align-items: center;
}

@keyframes source-settings-empty-in-b-qqkux2o3bo {
    from {
        opacity: 0;
        transform: translateY(8px);
    }

    to {
        opacity: 1;
        transform: translateY(0);
    }
}

@media (prefers-reduced-motion: reduce) {
    .source-settings__empty[b-qqkux2o3bo] {
        animation-duration: 0.01ms;
    }

    .source-settings__grid[b-qqkux2o3bo]  .rz-data-row {
        transition-duration: 0.01ms;
    }
}
/* /Features/Settings/Components/InviteUserDialog.razor.rz.scp.css */
.invite-form[b-mgynym82st] {
    display: flex;
    flex-direction: column;
    gap: var(--dbv2-space-4);
    min-width: 25rem;
}

.form-field[b-mgynym82st] {
    display: flex;
    flex-direction: column;
    gap: var(--dbv2-space-1);
}

.invite-error[b-mgynym82st] {
    display: flex;
    align-items: center;
    gap: var(--dbv2-space-2);
    padding: var(--dbv2-space-3);
    color: var(--dbv2-error-dark);
    background: var(--dbv2-error-lighter);
    border-radius: var(--dbv2-radius-sm);
    font-size: var(--dbv2-font-size-sm);
}
/* /Features/Settings/Pages/AccountSettings.razor.rz.scp.css */
.change-password-form[b-idofq1t8oc] {
    display: flex;
    flex-direction: column;
    gap: var(--dbv2-space-4);
    max-width: 30rem;
}

.settings-alert[b-idofq1t8oc] {
    margin: 0;
}

.input-group[b-idofq1t8oc] {
    display: flex;
    flex-direction: column;
    gap: var(--dbv2-space-1);
}

.input-label[b-idofq1t8oc] {
    font-size: var(--dbv2-font-size-sm);
    font-weight: var(--dbv2-font-weight-semibold);
    color: var(--dbv2-text-secondary);
}

.field-error[b-idofq1t8oc] {
    font-size: var(--dbv2-font-size-xs);
    color: var(--dbv2-error);
}

.validation-errors[b-idofq1t8oc] {
    margin: 0;
    padding-left: var(--dbv2-space-4);
    list-style: disc;
}

.validation-errors li[b-idofq1t8oc] {
    font-size: var(--dbv2-font-size-sm);
}

.submit-button[b-idofq1t8oc] {
    align-self: flex-start;
}
/* /Features/Settings/Pages/Billing.razor.rz.scp.css */
.coming-soon-island[b-h343b3bc9s] {
    max-width: 30rem;
    margin-block: var(--dbv2-space-8);
    margin-inline: auto;
}

.coming-soon-content[b-h343b3bc9s] {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    padding: var(--dbv2-space-8) var(--dbv2-space-4);
    gap: var(--dbv2-space-3);
}

.coming-soon-icon[b-h343b3bc9s] {
    font-size: 2.5rem; /* stylelint-disable-line declaration-property-value-disallowed-list -- decorative icon glyph, not type */
    color: var(--dbv2-text-tertiary);
    margin-bottom: var(--dbv2-space-2);
}

.coming-soon-heading[b-h343b3bc9s] {
    font-size: var(--dbv2-font-size-lg);
    font-weight: var(--dbv2-font-weight-semibold);
    color: var(--dbv2-text-primary);
    margin: 0;
}

.coming-soon-description[b-h343b3bc9s] {
    font-size: var(--dbv2-font-size-sm);
    color: var(--dbv2-text-secondary);
    line-height: 1.6;
    margin: 0;
    max-width: 22.5rem;
}
/* /Features/Settings/Pages/SecuritySettings.razor.rz.scp.css */
.security-form[b-pn1ub7o5ll] {
    display: flex;
    flex-direction: column;
    gap: var(--dbv2-space-4);
    max-width: 37.5rem;
}

.toggle-row[b-pn1ub7o5ll] {
    display: flex;
    align-items: flex-start;
    gap: var(--dbv2-space-3);
}

.toggle-text[b-pn1ub7o5ll] {
    display: flex;
    flex-direction: column;
    gap: var(--dbv2-space-1);
}

.toggle-label[b-pn1ub7o5ll] {
    font-size: var(--dbv2-font-size-sm);
    font-weight: var(--dbv2-font-weight-semibold);
    color: var(--dbv2-text-primary);
}

.toggle-description[b-pn1ub7o5ll] {
    font-size: var(--dbv2-font-size-xs);
    color: var(--dbv2-text-secondary);
}

.submit-button[b-pn1ub7o5ll] {
    align-self: flex-start;
}

.policy-list[b-pn1ub7o5ll] {
    display: flex;
    flex-direction: column;
    gap: var(--dbv2-space-3);
    max-width: 37.5rem;
}

.policy-item[b-pn1ub7o5ll] {
    display: flex;
    align-items: baseline;
    gap: var(--dbv2-space-2);
    flex-wrap: wrap;
}

.policy-label[b-pn1ub7o5ll] {
    font-size: var(--dbv2-font-size-sm);
    font-weight: var(--dbv2-font-weight-semibold);
    color: var(--dbv2-text-secondary);
    min-width: 11.25rem;
}

.policy-value[b-pn1ub7o5ll] {
    font-size: var(--dbv2-font-size-sm);
    color: var(--dbv2-text-primary);
    font-weight: var(--dbv2-font-weight-medium);
}

.policy-note[b-pn1ub7o5ll] {
    font-size: var(--dbv2-font-size-xs);
    color: var(--dbv2-text-tertiary);
    font-style: italic;
}
/* /Features/Settings/Pages/Settings.razor.rz.scp.css */
.settings-card[b-g35n8gyd71] {
    display: flex;
    flex-direction: column;
    gap: var(--dbv2-space-3);
}

.settings-card-icon[b-g35n8gyd71] {
    font-size: var(--dbv2-icon-size-lg);
    color: var(--dbv2-primary);
}
/* /Features/Settings/Pages/UserManagement.razor.rz.scp.css */
.page-header-row[b-vfqohdh1r4] {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    gap: var(--dbv2-space-4);
}

.island-header[b-vfqohdh1r4] {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: var(--dbv2-space-4);
}

.show-inactive-toggle[b-vfqohdh1r4] {
    display: flex;
    align-items: center;
    gap: var(--dbv2-space-2);
    font-size: var(--dbv2-font-size-sm);
    color: var(--dbv2-text-secondary);
    cursor: pointer;
}

.name-cell[b-vfqohdh1r4] {
    display: flex;
    align-items: center;
    gap: var(--dbv2-space-2);
}

[b-vfqohdh1r4] .mfa-enabled {
    color: var(--dbv2-success);
}

[b-vfqohdh1r4] .mfa-disabled {
    color: var(--dbv2-text-tertiary);
}

[b-vfqohdh1r4] .members-grid .rz-datatable-thead th {
    background: var(--dbv2-surface);
    font-size: var(--dbv2-font-size-sm);
    font-weight: var(--dbv2-font-weight-semibold);
    color: var(--dbv2-text-secondary);
}

[b-vfqohdh1r4] .members-grid .rz-datatable-data td {
    font-size: var(--dbv2-font-size-sm);
    vertical-align: middle;
}

.expiry-cell[b-vfqohdh1r4] {
    display: flex;
    align-items: center;
    gap: var(--dbv2-space-2);
}

.invitation-actions[b-vfqohdh1r4] {
    display: flex;
    gap: var(--dbv2-space-1);
    justify-content: center;
}

[b-vfqohdh1r4] .invitations-grid .rz-datatable-thead th {
    background: var(--dbv2-surface);
    font-size: var(--dbv2-font-size-sm);
    font-weight: var(--dbv2-font-weight-semibold);
    color: var(--dbv2-text-secondary);
}

[b-vfqohdh1r4] .invitations-grid .rz-datatable-data td {
    font-size: var(--dbv2-font-size-sm);
    vertical-align: middle;
}
/* /Layout/AuthLayout.razor.rz.scp.css */
.dbv2-auth-shell[b-zfwcseqw4u] {
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 100vh;
    min-height: 100dvh;
    background: var(--dbv2-canvas);
    padding: var(--dbv2-space-6);
}

.dbv2-auth-card[b-zfwcseqw4u] {
    background: var(--dbv2-surface);
    border-radius: var(--dbv2-radius-lg);
    border: 1px solid var(--dbv2-border-light);
    box-shadow: var(--dbv2-shadow-md);
    padding: var(--dbv2-space-8);
    width: 100%;
    max-width: 27.5rem;
}

.dbv2-auth-brand[b-zfwcseqw4u] {
    text-align: center;
    font-size: var(--dbv2-font-size-xl);
    font-weight: var(--dbv2-font-weight-bold);
    color: var(--dbv2-primary);
    margin-bottom: var(--dbv2-space-8);
}

@media (width <= 40rem) {
    .dbv2-auth-shell[b-zfwcseqw4u] {
        padding: var(--dbv2-space-4);
        align-items: flex-start;
        padding-top: var(--dbv2-space-12);
    }

    .dbv2-auth-card[b-zfwcseqw4u] {
        padding: var(--dbv2-space-6);
    }
}
/* /Layout/MainLayout.razor.rz.scp.css */
/* Scoped styles for MainLayout — bulk of layout CSS lives in dbv2-theme.css */
/* /Layout/NavMenu.razor.rz.scp.css */
/* Scoped styles for NavMenu — bulk of nav CSS lives in dbv2-theme.css */