/* /Components/Layout/BmTweaksPanel.razor.rz.scp.css */
/* Floating-tweaks-panel scoped styles. Most visual tokens are defined in
   wwwroot/app.css under the .bm-* family; this file only handles layout +
   positioning + the swatch chips. */

.bm-tweaks-root[b-1e0yce1nz6] {
    /* Anchor under the topbar (avatar lives there) so the panel drops down
       from the upper-right corner. The FAB has been retired — opening is
       now driven by the avatar menu via TweaksUiState. */
    position: fixed;
    right: 14px;
    top: 56px;
    z-index: 200;
    font-family: var(--bm-font-display, var(--font-sans));
    color: var(--bm-ink);
}

.bm-tweaks-fab[b-1e0yce1nz6] {
    width: 40px;
    height: 40px;
    border-radius: 999px;
    border: 1px solid var(--bm-line-2, var(--border-strong));
    background: var(--bm-surface, var(--surface-card));
    color: var(--bm-ink-2, var(--ink-secondary));
    display: inline-flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    box-shadow: var(--bm-shadow-md, var(--shadow-md));
    transition: transform .12s ease, color .12s ease, border-color .12s ease, background .12s ease;
}

.bm-tweaks-fab:hover[b-1e0yce1nz6] {
    color: var(--bm-ink, var(--ink-primary));
    border-color: var(--bm-accent, var(--accent));
    transform: translateY(-1px);
}

.bm-tweaks-fab:focus-visible[b-1e0yce1nz6] {
    outline: none;
    box-shadow: 0 0 0 3px var(--bm-accent-soft, var(--accent-ring));
    border-color: var(--bm-accent, var(--accent));
}

.bm-tweaks-root.open .bm-tweaks-fab[b-1e0yce1nz6] {
    color: var(--bm-accent, var(--accent));
    border-color: var(--bm-accent, var(--accent));
}

.bm-tweaks-panel[b-1e0yce1nz6] {
    position: absolute;
    right: 0;
    top: 0;
    width: 280px;
    background: var(--bm-surface, var(--surface-card));
    border: 1px solid var(--bm-line-2, var(--border-strong));
    border-radius: var(--bm-radius, var(--radius-lg));
    box-shadow: var(--bm-shadow-md, var(--shadow-lg));
    padding: 14px 14px 12px;
    animation: bm-tweaks-rise-b-1e0yce1nz6 .12s ease-out;
}

@keyframes bm-tweaks-rise-b-1e0yce1nz6 {
    from { opacity: 0; transform: translateY(4px); }
    to   { opacity: 1; transform: translateY(0); }
}

.bm-tweaks-header[b-1e0yce1nz6] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 12px;
}

.bm-tweaks-title[b-1e0yce1nz6] {
    font-size: 12px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    color: var(--bm-ink-3, var(--ink-muted));
}

.bm-tweaks-close[b-1e0yce1nz6] {
    background: transparent;
    border: 0;
    color: var(--bm-ink-3, var(--ink-muted));
    cursor: pointer;
    padding: 2px;
    border-radius: var(--bm-radius-sm, var(--radius-sm));
    display: inline-flex;
    align-items: center;
    justify-content: center;
}

.bm-tweaks-close:hover[b-1e0yce1nz6] { color: var(--bm-ink, var(--ink-primary)); }

.bm-tweaks-row[b-1e0yce1nz6] {
    display: flex;
    flex-direction: column;
    gap: 6px;
    margin-bottom: 10px;
}

.bm-tweaks-row:last-of-type[b-1e0yce1nz6] { margin-bottom: 0; }

.bm-tweaks-label[b-1e0yce1nz6] {
    font-size: 11.5px;
    font-weight: 500;
    color: var(--bm-ink-2, var(--ink-secondary));
}

.bm-tweaks-segments[b-1e0yce1nz6] {
    display: inline-flex;
    background: var(--bm-bg-2, var(--surface-muted));
    border: 1px solid var(--bm-line, var(--border-soft));
    border-radius: var(--bm-radius-sm, var(--radius-sm));
    padding: 2px;
    width: 100%;
}

.bm-tweaks-segment[b-1e0yce1nz6] {
    flex: 1;
    border: 0;
    background: transparent;
    color: var(--bm-ink-2, var(--ink-secondary));
    font: inherit;
    font-size: 12.5px;
    padding: 5px 10px;
    border-radius: calc(var(--bm-radius-sm, var(--radius-sm)) - 2px);
    cursor: pointer;
    transition: background .12s ease, color .12s ease;
}

.bm-tweaks-segment:hover[b-1e0yce1nz6] { color: var(--bm-ink, var(--ink-primary)); }

.bm-tweaks-segment.active[b-1e0yce1nz6] {
    background: var(--bm-surface, var(--surface-card));
    color: var(--bm-ink, var(--ink-primary));
    box-shadow: var(--bm-shadow-sm, var(--shadow-sm));
    font-weight: 500;
}

.bm-tweaks-swatches[b-1e0yce1nz6] {
    display: flex;
    gap: 8px;
    flex-wrap: wrap;
}

.bm-tweaks-swatch[b-1e0yce1nz6] {
    width: 28px;
    height: 28px;
    border-radius: 999px;
    border: 1.5px solid transparent;
    background: transparent;
    padding: 2px;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    transition: border-color .12s ease, transform .12s ease;
}

.bm-tweaks-swatch:hover[b-1e0yce1nz6] { transform: scale(1.05); }

.bm-tweaks-swatch.active[b-1e0yce1nz6] {
    border-color: var(--bm-ink, var(--ink-primary));
}

.bm-tweaks-swatch-dot[b-1e0yce1nz6] {
    width: 100%;
    height: 100%;
    border-radius: 999px;
    box-shadow: 0 0 0 1px var(--bm-line-2, var(--border-soft));
}

/* Per-accent swatch dot fills — the actual app accent override lives in
   app.css under [data-accent="…"] and is what drives every other surface. */
.bm-tweaks-swatch.indigo     .bm-tweaks-swatch-dot[b-1e0yce1nz6] { background: #3b3df0; }
.bm-tweaks-swatch.terracotta .bm-tweaks-swatch-dot[b-1e0yce1nz6] { background: #D97757; }
.bm-tweaks-swatch.emerald    .bm-tweaks-swatch-dot[b-1e0yce1nz6] { background: #2f8a4a; }
.bm-tweaks-swatch.violet     .bm-tweaks-swatch-dot[b-1e0yce1nz6] { background: #7e57c2; }

.bm-tweaks-foot[b-1e0yce1nz6] {
    margin-top: 12px;
    padding-top: 10px;
    border-top: 1px solid var(--bm-line, var(--border-soft));
    display: flex;
    justify-content: flex-end;
}

.bm-tweaks-reset[b-1e0yce1nz6] {
    background: transparent;
    border: 0;
    color: var(--bm-ink-3, var(--ink-muted));
    font: inherit;
    font-size: 12px;
    padding: 4px 8px;
    border-radius: var(--bm-radius-sm, var(--radius-sm));
    cursor: pointer;
}

.bm-tweaks-reset:hover[b-1e0yce1nz6] {
    color: var(--bm-ink, var(--ink-primary));
    background: var(--bm-bg-2, var(--surface-muted));
}
/* /Components/Layout/MainLayout.razor.rz.scp.css */
.bm-app[b-jyy0wcwk2p] {
    display: flex;
    flex-direction: column;
    min-height: 100vh;
    background: var(--bm-bg);
    color: var(--bm-ink);
    font-family: var(--bm-font-display);
    font-size: 14px;
    line-height: 1.45;
    letter-spacing: -0.005em;
    -webkit-font-smoothing: antialiased;
    text-rendering: optimizeLegibility;
}

.bm-main[b-jyy0wcwk2p] {
    flex: 1;
    overflow-y: auto;
    background: var(--bm-bg);
}

#blazor-error-ui[b-jyy0wcwk2p] {
    color-scheme: light only;
    background: lightyellow;
    bottom: 0;
    box-shadow: 0 -1px 2px rgba(0, 0, 0, 0.2);
    box-sizing: border-box;
    display: none;
    left: 0;
    padding: 0.6rem 1.25rem 0.7rem 1.25rem;
    position: fixed;
    width: 100%;
    z-index: 1000;
}

#blazor-error-ui .dismiss[b-jyy0wcwk2p] {
    cursor: pointer;
    position: absolute;
    right: 0.75rem;
    top: 0.5rem;
}
/* /Components/Layout/ReconnectModal.razor.rz.scp.css */
.components-reconnect-first-attempt-visible[b-6ipiwxvxqc],
.components-reconnect-repeated-attempt-visible[b-6ipiwxvxqc],
.components-reconnect-failed-visible[b-6ipiwxvxqc],
.components-pause-visible[b-6ipiwxvxqc],
.components-resume-failed-visible[b-6ipiwxvxqc],
.components-rejoining-animation[b-6ipiwxvxqc] {
    display: none;
}

#components-reconnect-modal.components-reconnect-show .components-reconnect-first-attempt-visible[b-6ipiwxvxqc],
#components-reconnect-modal.components-reconnect-show .components-rejoining-animation[b-6ipiwxvxqc],
#components-reconnect-modal.components-reconnect-paused .components-pause-visible[b-6ipiwxvxqc],
#components-reconnect-modal.components-reconnect-resume-failed .components-resume-failed-visible[b-6ipiwxvxqc],
#components-reconnect-modal.components-reconnect-retrying[b-6ipiwxvxqc],
#components-reconnect-modal.components-reconnect-retrying .components-reconnect-repeated-attempt-visible[b-6ipiwxvxqc],
#components-reconnect-modal.components-reconnect-retrying .components-rejoining-animation[b-6ipiwxvxqc],
#components-reconnect-modal.components-reconnect-failed[b-6ipiwxvxqc],
#components-reconnect-modal.components-reconnect-failed .components-reconnect-failed-visible[b-6ipiwxvxqc] {
    display: block;
}


#components-reconnect-modal[b-6ipiwxvxqc] {
    background-color: var(--surface-card);
    color: var(--ink-primary);
    width: 20rem;
    margin: 20vh auto;
    padding: 2rem;
    border: 1px solid var(--border-soft);
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow-xl);
    opacity: 0;
    transition: display 0.5s allow-discrete, overlay 0.5s allow-discrete;
    animation: components-reconnect-modal-fadeOutOpacity-b-6ipiwxvxqc 0.5s both;
    &[open]

{
    animation: components-reconnect-modal-slideUp-b-6ipiwxvxqc 1.5s cubic-bezier(.05, .89, .25, 1.02) 0.3s, components-reconnect-modal-fadeInOpacity-b-6ipiwxvxqc 0.5s ease-in-out 0.3s;
    animation-fill-mode: both;
}

}

#components-reconnect-modal[b-6ipiwxvxqc]::backdrop {
    background-color: var(--surface-overlay);
    animation: components-reconnect-modal-fadeInOpacity-b-6ipiwxvxqc 0.5s ease-in-out;
    opacity: 1;
}

@keyframes components-reconnect-modal-slideUp-b-6ipiwxvxqc {
    0% {
        transform: translateY(30px) scale(0.95);
    }

    100% {
        transform: translateY(0);
    }
}

@keyframes components-reconnect-modal-fadeInOpacity-b-6ipiwxvxqc {
    0% {
        opacity: 0;
    }

    100% {
        opacity: 1;
    }
}

@keyframes components-reconnect-modal-fadeOutOpacity-b-6ipiwxvxqc {
    0% {
        opacity: 1;
    }

    100% {
        opacity: 0;
    }
}

.components-reconnect-container[b-6ipiwxvxqc] {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 1rem;
}

#components-reconnect-modal p[b-6ipiwxvxqc] {
    margin: 0;
    text-align: center;
}

#components-reconnect-modal button[b-6ipiwxvxqc] {
    border: 0;
    background-color: var(--accent);
    color: var(--ink-on-accent);
    padding: 4px 24px;
    border-radius: var(--radius-md);
    font-weight: 600;
}

    #components-reconnect-modal button:hover[b-6ipiwxvxqc] {
        background-color: var(--accent-hover);
    }

    #components-reconnect-modal button:active[b-6ipiwxvxqc] {
        background-color: var(--accent-strong);
    }

.components-rejoining-animation[b-6ipiwxvxqc] {
    position: relative;
    width: 80px;
    height: 80px;
}

    .components-rejoining-animation div[b-6ipiwxvxqc] {
        position: absolute;
        border: 3px solid var(--accent);
        opacity: 1;
        border-radius: 50%;
        animation: components-rejoining-animation-b-6ipiwxvxqc 1.5s cubic-bezier(0, 0.2, 0.8, 1) infinite;
    }

        .components-rejoining-animation div:nth-child(2)[b-6ipiwxvxqc] {
            animation-delay: -0.5s;
        }

@keyframes components-rejoining-animation-b-6ipiwxvxqc {
    0% {
        top: 40px;
        left: 40px;
        width: 0;
        height: 0;
        opacity: 0;
    }

    4.9% {
        top: 40px;
        left: 40px;
        width: 0;
        height: 0;
        opacity: 0;
    }

    5% {
        top: 40px;
        left: 40px;
        width: 0;
        height: 0;
        opacity: 1;
    }

    100% {
        top: 0px;
        left: 0px;
        width: 80px;
        height: 80px;
        opacity: 0;
    }
}
/* /Components/Pages/ComponentDiff.razor.rz.scp.css */
/* ===== Component Diff — Reference Design Styles ===== */

/* Page-level: full-width workspace sized to the viewport below the sticky
   chrome so the document never scrolls — only the canvas inside the shell
   does. Unlike list pages this deliberately skips the 1440px container:
   the diff canvas should use every pixel, with just slim gutters. Dialog
   hosts override height/padding via ::deep. */
.cd-page[b-xjcqy0anso] {
    display: flex;
    flex-direction: column;
    height: calc(100dvh - var(--bm-chrome-h, 94px));
    overflow: hidden;
    padding: 8px 14px 12px;
}

/* ===== Page head: standard breadcrumb row + badges + controls ===== */
.cd-page-head[b-xjcqy0anso] {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-bottom: 8px;
    flex-shrink: 0;
    min-width: 0;
}

.cd-page-head .bm-breadcrumb[b-xjcqy0anso] {
    min-width: 0;
}

.cd-crumb-name[b-xjcqy0anso] {
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    max-width: 480px;
}

.cd-head-spacer[b-xjcqy0anso] {
    flex: 1;
}

.cd-header-right[b-xjcqy0anso] {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    flex-shrink: 0;
}

/* ===== Workspace shell: one bm-card holding comparison bar + diff content ===== */
.cd-shell[b-xjcqy0anso] {
    flex: 1;
    min-height: 0;
    display: flex;
    flex-direction: column;
    overflow: hidden;
}

.cd-type-badge[b-xjcqy0anso] {
    display: inline-flex;
    align-items: center;
    font-size: 10px;
    font-weight: 700;
    letter-spacing: 0.05em;
    padding: 2px 8px;
    background: var(--surface-muted);
    color: var(--ink-secondary);
    border: 1px solid var(--border-soft);
    border-radius: 4px;
    text-transform: uppercase;
    white-space: nowrap;
}

/* Component ID input in header */
.cd-id-input-wrap[b-xjcqy0anso] {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 0 10px;
    background: var(--surface-page);
    border: 1px solid var(--border-soft);
    border-radius: 6px;
    transition: all 0.15s;
    max-width: 420px;
    min-width: 280px;
}

.cd-id-input-wrap:focus-within[b-xjcqy0anso] {
    border-color: var(--accent);
    box-shadow: 0 0 0 3px var(--accent-ring);
    background: var(--bm-surface);
}

.cd-id-input-icon[b-xjcqy0anso] {
    flex-shrink: 0;
    color: var(--ink-muted);
}

.cd-id-input-wrap:focus-within .cd-id-input-icon[b-xjcqy0anso] {
    color: var(--accent);
}

.cd-id-input[b-xjcqy0anso] {
    border: none;
    background: transparent;
    padding: 4px 0;
    font-size: 0.78rem;
    font-family: 'Courier New', monospace;
    color: var(--ink-secondary);
    outline: none;
    width: 100%;
    min-width: 0;
}

.cd-id-input[b-xjcqy0anso]::placeholder {
    color: var(--ink-muted);
}

.cd-status-pill[b-xjcqy0anso] {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 4px 14px;
    background: var(--accent-soft);
    color: var(--accent-hover);
    border-radius: 9999px;
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 0.02em;
    text-transform: uppercase;
}

/* ===== Tier 2: Comparison Bar ===== */
.cd-comparison-bar[b-xjcqy0anso] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    min-height: 52px;
    padding: 0.5rem 1.5rem;
    background: var(--bm-surface);
    border-bottom: 1px solid var(--border-soft);
    box-shadow: 0 1px 3px rgba(0,0,0,0.04);
    gap: 1rem;
    flex-wrap: wrap;
    flex-shrink: 0;
}

.cd-bar-left[b-xjcqy0anso] {
    display: flex;
    align-items: center;
    gap: 1rem;
    flex-wrap: wrap;
}

.cd-bar-right[b-xjcqy0anso] {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    flex-shrink: 0;
}

/* Inputs */
.cd-input[b-xjcqy0anso] {
    border: 1px solid var(--border-soft);
    border-radius: 8px;
    padding: 6px 12px;
    font-size: 0.82rem;
    color: var(--ink-primary);
    background: var(--bm-surface);
    outline: none;
    transition: all 0.15s;
}

.cd-input:focus[b-xjcqy0anso] {
    border-color: var(--accent);
    box-shadow: 0 0 0 3px var(--accent-ring);
}

.cd-input-ver[b-xjcqy0anso] {
    width: 64px;
    text-align: center;
    font-weight: 700;
}

/* Remove spinner from number inputs */
.cd-input-ver[b-xjcqy0anso]::-webkit-inner-spin-button,
.cd-input-ver[b-xjcqy0anso]::-webkit-outer-spin-button {
    -webkit-appearance: none;
    margin: 0;
}

.cd-input-ver[type=number][b-xjcqy0anso] {
    -moz-appearance: textfield;
    appearance: textfield;
}

/* Version pill */
.cd-version-pill[b-xjcqy0anso] {
    display: inline-flex;
    align-items: center;
    gap: 0;
    background: var(--surface-page);
    border: 1px solid var(--border-soft);
    border-radius: 12px;
    padding: 4px;
    box-shadow: 0 1px 2px rgba(0,0,0,0.04);
}

.cd-version-col[b-xjcqy0anso] {
    display: flex;
    flex-direction: column;
    align-items: center;
    padding: 0 12px;
}

.cd-version-label[b-xjcqy0anso] {
    font-size: 9px;
    font-weight: 800;
    letter-spacing: 0.1em;
    color: var(--ink-muted);
    text-transform: uppercase;
}

.cd-version-arrow[b-xjcqy0anso] {
    display: flex;
    align-items: center;
    padding: 0 4px;
    color: var(--border-strong);
}

/* Load Button */
.cd-btn-load[b-xjcqy0anso] {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    margin-left: 8px;
    padding: 8px 20px;
    background: var(--accent);
    color: var(--ink-on-accent);
    border: none;
    border-radius: 8px;
    font-size: 0.8rem;
    font-weight: 700;
    cursor: pointer;
    transition: all 0.15s;
    box-shadow: 0 1px 3px rgba(217,119,87,0.3);
}

.cd-btn-load:hover:not(:disabled)[b-xjcqy0anso] {
    background: var(--accent-hover);
    box-shadow: 0 2px 6px rgba(217,119,87,0.4);
}

.cd-btn-load:active:not(:disabled)[b-xjcqy0anso] {
    transform: scale(0.97);
}

.cd-btn-load:disabled[b-xjcqy0anso] {
    opacity: 0.6;
    cursor: not-allowed;
}

/* Stats */
.cd-stats-divider[b-xjcqy0anso] {
    width: 1px;
    height: 32px;
    background: var(--border-soft);
    flex-shrink: 0;
}

.cd-stats-group[b-xjcqy0anso] {
    display: flex;
    align-items: center;
    gap: 0.5rem;
}

.cd-stat[b-xjcqy0anso] {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 6px 12px;
    border-radius: 8px;
    font-size: 0.75rem;
    font-weight: 700;
    border: 1px solid transparent;
    cursor: default;
    transition: background 0.15s;
}

.cd-stat-added[b-xjcqy0anso] {
    background: var(--added-bg);
    color: var(--added-fg);
    border-color: var(--added-border);
}

.cd-stat-added:hover[b-xjcqy0anso] {
    background: var(--added-bg);
}

.cd-stat-deleted[b-xjcqy0anso] {
    background: var(--deleted-bg);
    color: var(--deleted-fg);
    border-color: var(--deleted-border);
}

.cd-stat-deleted:hover[b-xjcqy0anso] {
    background: var(--deleted-bg);
}

.cd-stat-modified[b-xjcqy0anso] {
    background: var(--modified-bg);
    color: var(--modified-fg);
    border-color: var(--modified-border);
}

.cd-stat-modified:hover[b-xjcqy0anso] {
    background: var(--modified-bg);
}

/* View Toggle */
.cd-view-toggle[b-xjcqy0anso] {
    display: inline-flex;
    align-items: center;
    background: var(--surface-muted);
    padding: 4px;
    border-radius: 12px;
    border: 1px solid var(--border-soft);
}

.cd-view-btn[b-xjcqy0anso] {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 6px 16px;
    font-size: 0.78rem;
    font-weight: 700;
    color: var(--ink-secondary);
    background: transparent;
    border: none;
    border-radius: 8px;
    cursor: pointer;
    transition: all 0.15s;
}

.cd-view-btn:hover[b-xjcqy0anso] {
    color: var(--ink-primary);
}

.cd-view-btn.active[b-xjcqy0anso] {
    background: var(--bm-surface);
    color: var(--accent);
    box-shadow: 0 1px 3px rgba(0,0,0,0.08);
    border: 1px solid var(--border-soft);
}

/* Error Alert */
.cd-error-alert[b-xjcqy0anso] {
    margin: 0.75rem 0;
    padding: 0.75rem 1rem;
    background: var(--deleted-bg);
    color: var(--deleted-fg);
    border: 1px solid var(--deleted-border);
    border-radius: 10px;
    font-size: 0.85rem;
    font-weight: 500;
}

/* ===== Panel Tabs ===== */
.cd-panel-tabs[b-xjcqy0anso] {
    display: flex;
    border-bottom: 1px solid var(--border-soft);
    background: var(--surface-page);
    padding: 0 0.5rem;
}

.cd-panel-tab[b-xjcqy0anso] {
    flex: 1;
    padding: 10px 12px;
    font-size: 0.78rem;
    font-weight: 600;
    color: var(--ink-secondary);
    background: transparent;
    border: none;
    border-bottom: 2px solid transparent;
    cursor: pointer;
    text-align: center;
    transition: all 0.15s;
}

.cd-panel-tab:hover[b-xjcqy0anso] {
    color: var(--ink-primary);
    background: var(--surface-muted);
}

.cd-panel-tab.active[b-xjcqy0anso] {
    color: var(--accent);
    border-bottom-color: var(--accent);
    background: transparent;
}

/* ===== Change Inspector List ===== */
.cd-change-list[b-xjcqy0anso] {
    padding: 10px;
    display: flex;
    flex-direction: column;
    gap: 7px;
    overflow-y: auto;
}

.cd-change-item[b-xjcqy0anso] {
    padding: 11px 13px 11px 16px;
    background: var(--bm-surface);
    border: 1px solid var(--border-soft);
    border-radius: 10px;
    box-shadow: 0 1px 3px rgba(0,0,0,0.04);
    transition: border-color 0.15s, box-shadow 0.15s;
    position: relative;
    overflow: hidden;
}

/* Left accent bar colored by category */
.cd-change-item[b-xjcqy0anso]::before {
    content: '';
    position: absolute;
    left: 0;
    top: 0;
    bottom: 0;
    width: 4px;
}

.cd-change-item:has(.cd-change-addition)[b-xjcqy0anso]::before    { background: var(--added-fg); }
.cd-change-item:has(.cd-change-deletion)[b-xjcqy0anso]::before    { background: var(--deleted-fg); }
.cd-change-item:has(.cd-change-modification)[b-xjcqy0anso]::before { background: var(--modified-fg); }

.cd-change-item:hover[b-xjcqy0anso] {
    border-color: var(--accent-border);
    box-shadow: 0 2px 8px var(--accent-ring);
}

.cd-change-item.highlighted[b-xjcqy0anso] {
    background: var(--modified-bg);
    border-color: var(--modified-border);
}

.cd-change-item.highlighted[b-xjcqy0anso]::before {
    background: var(--modified-fg);
}

.cd-change-item-title-row[b-xjcqy0anso] {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-bottom: 2px;
}

.cd-change-item-title[b-xjcqy0anso] {
    flex: 1;
    min-width: 0;
    font-size: 13px;
    font-weight: 700;
    color: var(--ink-primary);
    line-height: 1.3;
}

.cd-change-item:hover .cd-change-item-title[b-xjcqy0anso] {
    color: var(--accent-strong);
}

.cd-change-item-desc[b-xjcqy0anso] {
    font-size: 11px;
    color: var(--ink-secondary);
    font-weight: 500;
    margin-bottom: 4px;
}

/* ── Inline from → to (short values) ── */
.cd-val-row[b-xjcqy0anso] {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 5px;
    margin-top: 7px;
}

.cd-val-from[b-xjcqy0anso] {
    font-size: 0.7rem;
    font-family: 'Courier New', monospace;
    color: var(--ink-secondary);
    background: var(--surface-muted);
    border: 1px solid var(--border-strong);
    border-radius: 4px;
    padding: 2px 7px;
    word-break: break-all;
    max-width: 45%;
}

.cd-val-arrow[b-xjcqy0anso] {
    color: var(--ink-muted);
    font-size: 0.85rem;
    flex-shrink: 0;
    font-weight: 700;
}

.cd-val-to[b-xjcqy0anso] {
    font-size: 0.7rem;
    font-family: 'Courier New', monospace;
    color: var(--ink-primary);
    background: var(--surface-page);
    border: 1px solid var(--border-strong);
    border-radius: 4px;
    padding: 2px 7px;
    word-break: break-all;
    max-width: 45%;
}

/* ── Stacked Was / Now (long values or add/delete) ── */
.cd-val-stack[b-xjcqy0anso] {
    margin-top: 7px;
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.cd-val-was[b-xjcqy0anso],
.cd-val-now[b-xjcqy0anso] {
    display: flex;
    align-items: baseline;
    gap: 7px;
    font-size: 0.7rem;
    font-family: 'Courier New', monospace;
    word-break: break-all;
}

.cd-val-label[b-xjcqy0anso] {
    font-size: 9px;
    font-weight: 800;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    flex-shrink: 0;
    font-family: inherit;
    padding: 1px 5px;
    border-radius: 3px;
}

.cd-val-was .cd-val-label[b-xjcqy0anso] {
    color: var(--ink-secondary);
    background: var(--surface-muted);
    border: 1px solid var(--border-strong);
}

.cd-val-now .cd-val-label[b-xjcqy0anso] {
    color: var(--ink-primary);
    background: var(--surface-page);
    border: 1px solid var(--border-strong);
}

.cd-val-was code[b-xjcqy0anso] { color: var(--ink-secondary); }
.cd-val-now code[b-xjcqy0anso] { color: var(--ink-primary); }

.cd-val-summary[b-xjcqy0anso] {
    cursor: pointer;
    font-weight: 600;
    font-size: 0.68rem;
}

.cd-change-val-pre[b-xjcqy0anso] {
    margin: 4px 0 0;
    padding: 6px;
    max-height: 120px;
    overflow: auto;
    font-size: 0.65rem;
    white-space: pre-wrap;
    word-break: break-all;
    border-radius: 4px;
    background: var(--surface-page);
    border: 1px solid var(--border-soft);
}

/* ── Process-level group header ── */
.cd-change-group-header[b-xjcqy0anso] {
    display: flex;
    align-items: center;
    gap: 7px;
    padding: 4px 2px;
    font-size: 10px;
    font-weight: 700;
    color: var(--ink-secondary);
    letter-spacing: 0.06em;
    text-transform: uppercase;
    border-bottom: 1px solid var(--border-soft);
    margin-bottom: 4px;
}

.cd-change-group-header svg[b-xjcqy0anso] {
    flex-shrink: 0;
    color: var(--ink-muted);
}

.cd-group-count[b-xjcqy0anso] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 18px;
    height: 18px;
    padding: 0 5px;
    font-size: 9px;
    font-weight: 700;
    background: var(--border-soft);
    color: var(--ink-secondary);
    border-radius: 9999px;
    margin-left: auto;
}

/* ── Shape card (group container) ── */
.cd-shape-card[b-xjcqy0anso] {
    background: var(--bm-surface);
    border: 1px solid var(--border-soft);
    border-radius: 10px;
    overflow: hidden;
    box-shadow: 0 1px 3px rgba(0,0,0,0.04);
    transition: border-color 0.15s, box-shadow 0.15s;
}

.cd-shape-card--active[b-xjcqy0anso] {
    border-color: var(--accent);
    box-shadow: 0 0 0 2px var(--accent-ring);
}

.cd-shape-card-header[b-xjcqy0anso] {
    display: flex;
    align-items: center;
    gap: 6px;
    padding: 8px 12px;
    background: var(--surface-page);
    border-bottom: 1px solid var(--border-soft);
    cursor: pointer;
    user-select: none;
    transition: background 0.12s;
}

.cd-shape-card-header:hover[b-xjcqy0anso] {
    background: var(--accent-soft);
}

.cd-shape-card--active .cd-shape-card-header[b-xjcqy0anso] {
    background: var(--accent-soft);
    border-bottom-color: var(--accent-border);
}

.cd-shape-card-type[b-xjcqy0anso] {
    font-size: 11px;
    font-weight: 800;
    color: var(--ink-primary);
    letter-spacing: 0.01em;
}

.cd-shape-card-label[b-xjcqy0anso] {
    font-size: 11px;
    font-weight: 500;
    color: var(--ink-secondary);
}

.cd-shape-card-label[b-xjcqy0anso]::before {
    content: '\2014\00a0';
    color: var(--border-strong);
}

.cd-shape-card-name[b-xjcqy0anso] {
    font-size: 10px;
    font-weight: 500;
    color: var(--ink-muted);
    font-family: 'Courier New', monospace;
}

/* ── Shape row (change inside a shape card) ── */
.cd-shape-row[b-xjcqy0anso] {
    display: flex;
    align-items: flex-start;
    gap: 10px;
    padding: 9px 12px;
    border-bottom: 1px solid var(--surface-muted);
    border-left: 3px solid transparent;
    cursor: pointer;
    transition: background 0.12s;
}

.cd-shape-row:last-child[b-xjcqy0anso] {
    border-bottom: none;
}

.cd-shape-row:hover[b-xjcqy0anso] {
    background: var(--surface-page);
}

.cd-shape-row--addition[b-xjcqy0anso]    { border-left-color: var(--added-fg); }
.cd-shape-row--deletion[b-xjcqy0anso]    { border-left-color: var(--deleted-fg); }
.cd-shape-row--modification[b-xjcqy0anso] { border-left-color: var(--modified-fg); }

.cd-shape-row-body[b-xjcqy0anso] {
    flex: 1;
    min-width: 0;
}

.cd-change-badge[b-xjcqy0anso] {
    display: inline-block;
    font-size: 9px;
    font-weight: 800;
    letter-spacing: 0.08em;
    padding: 2px 8px;
    border-radius: 9999px;
    text-transform: uppercase;
    border: 1px solid transparent;
    flex-shrink: 0;
    white-space: nowrap;
}

.cd-change-addition[b-xjcqy0anso] {
    color: var(--added-fg);
    background: var(--added-bg);
    border-color: var(--added-border);
}

.cd-change-deletion[b-xjcqy0anso] {
    color: var(--deleted-fg);
    background: var(--deleted-bg);
    border-color: var(--deleted-border);
}

.cd-change-modification[b-xjcqy0anso] {
    color: var(--modified-fg);
    background: var(--modified-bg);
    border-color: var(--modified-border);
}

/* Count badge inside change-list buttons. */
.cd-badge-count[b-xjcqy0anso] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 20px;
    padding: 1px 6px;
    font-size: 0.65rem;
    font-weight: 700;
    background: var(--border-soft);
    color: var(--ink-secondary);
    border-radius: 9999px;
}

/* ===== Process Wrapper & Split Panel Overrides ===== */
.cd-process-wrapper[b-xjcqy0anso] {
    position: relative;
    flex: 1;
    min-height: 0;
    overflow: hidden;
}

.cd-process-wrapper[b-xjcqy0anso]  .split-container {
    height: 100%;
    align-items: stretch;
}

.cd-process-wrapper[b-xjcqy0anso]  .split-right-header {
    padding: 12px 16px;
    background: var(--bm-surface);
    border-bottom: 1px solid var(--border-soft);
}

.cd-process-wrapper[b-xjcqy0anso]  .split-right {
    border-radius: 0;
    border: none;
    border-left: 1px solid var(--border-soft);
    box-shadow: -4px 0 15px rgba(0,0,0,0.03);
    max-height: none;
    overflow-y: auto;
}

.cd-process-wrapper[b-xjcqy0anso]  .split-right-body {
    overflow-y: auto;
    height: calc(100% - 50px);
}

.cd-process-wrapper[b-xjcqy0anso]  .split-left {
    overflow: hidden;
    position: relative;
    background-color: var(--surface-muted);
    background-image: radial-gradient(var(--border-strong) 0.5px, transparent 0.5px);
    background-size: 24px 24px;
    background-attachment: fixed;
}

/* Make ProcessDiagram container transparent so dot grid shows through */
.cd-process-wrapper[b-xjcqy0anso]  .border.rounded.bg-white {
    border: none !important;
    background: transparent !important;
    border-radius: 0 !important;
}

/* Non-process diff modernization */
.cd-np-card[b-xjcqy0anso] {
    background: var(--bm-surface);
    border: 1px solid var(--border-soft);
    border-radius: 12px;
    overflow: hidden;
    margin-bottom: 1rem;
    box-shadow: 0 1px 3px rgba(0,0,0,0.04);
}

.cd-np-card-header[b-xjcqy0anso] {
    padding: 12px 16px;
    background: var(--surface-page);
    border-bottom: 1px solid var(--border-soft);
    font-size: 0.85rem;
    font-weight: 700;
    color: var(--ink-primary);
    display: flex;
    align-items: center;
    justify-content: space-between;
}

/* Right-side cluster in the XML-diff card header: copy buttons + view toggle. */
.cd-xml-card-actions[b-xjcqy0anso] {
    display: flex;
    align-items: center;
    gap: 8px;
    flex-wrap: wrap;
}

.cd-np-card-body[b-xjcqy0anso] {
    padding: 0;
}

/* Empty state */
.cd-empty-state[b-xjcqy0anso] {
    padding: 2rem 1.5rem;
    text-align: center;
    color: var(--ink-muted);
    font-size: 0.85rem;
}

/* Custom scrollbar for change list */
.cd-change-list[b-xjcqy0anso]::-webkit-scrollbar {
    width: 5px;
}

.cd-change-list[b-xjcqy0anso]::-webkit-scrollbar-track {
    background: transparent;
}

.cd-change-list[b-xjcqy0anso]::-webkit-scrollbar-thumb {
    background: var(--border-soft);
    border-radius: 10px;
}

.cd-change-list[b-xjcqy0anso]::-webkit-scrollbar-thumb:hover {
    background: var(--border-strong);
}

/* ===== Header Divider ===== */
.cd-header-divider[b-xjcqy0anso] {
    width: 1px;
    height: 24px;
    background: var(--border-soft);
    margin: 0 4px;
}

/* ===== Gear Settings Dropdown ===== */
.cd-gear-wrap[b-xjcqy0anso] {
    position: relative;
}

.cd-gear-btn[b-xjcqy0anso] {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 36px;
    height: 36px;
    background: transparent;
    border: none;
    color: var(--ink-muted);
    border-radius: 10px;
    cursor: pointer;
    transition: all 0.15s;
}

.cd-gear-btn:hover[b-xjcqy0anso] {
    color: var(--accent);
    background: var(--accent-soft);
}

.cd-settings-dropdown[b-xjcqy0anso] {
    position: absolute;
    top: calc(100% + 8px);
    right: 0;
    width: 220px;
    background: var(--bm-surface);
    border: 1px solid var(--border-soft);
    border-radius: 12px;
    box-shadow: 0 10px 25px rgba(0,0,0,0.1), 0 4px 10px rgba(0,0,0,0.04);
    z-index: 100;
    padding: 12px;
    animation: cd-dropdown-in-b-xjcqy0anso 0.15s ease-out;
}

@keyframes cd-dropdown-in-b-xjcqy0anso {
    from { opacity: 0; transform: translateY(-6px); }
    to   { opacity: 1; transform: translateY(0); }
}

.cd-settings-title[b-xjcqy0anso] {
    font-size: 11px;
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    color: var(--ink-muted);
    margin-bottom: 10px;
    padding-bottom: 8px;
    border-bottom: 1px solid var(--surface-muted);
}

.cd-settings-item[b-xjcqy0anso] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 6px 0;
}

.cd-settings-label[b-xjcqy0anso] {
    font-size: 0.78rem;
    font-weight: 600;
    color: var(--ink-secondary);
}

.cd-view-toggle-sm[b-xjcqy0anso] {
    padding: 2px;
    border-radius: 8px;
}

.cd-view-btn-sm[b-xjcqy0anso] {
    padding: 3px 10px;
    font-size: 0.72rem;
    border-radius: 6px;
}

/* ===== Floating Canvas Controls ===== */
.cd-floating-bar[b-xjcqy0anso] {
    position: absolute;
    bottom: 12px;
    left: 12px;
    width: fit-content;
    display: flex;
    align-items: center;
    gap: 0.75rem;
    padding: 6px 14px;
    background: rgba(255,255,255, 0.9);
    backdrop-filter: blur(16px);
    -webkit-backdrop-filter: blur(16px);
    border: 1px solid var(--border-soft);
    border-radius: 12px;
    box-shadow: 0 4px 16px rgba(0,0,0,0.06), 0 1px 4px rgba(0,0,0,0.03);
    z-index: 40;
}

.cd-float-group[b-xjcqy0anso] {
    display: flex;
    align-items: center;
    gap: 0.5rem;
}

.cd-float-group-border[b-xjcqy0anso] {
    padding-right: 0.75rem;
    border-right: 1px solid var(--border-soft);
}

.cd-float-btn[b-xjcqy0anso] {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 26px;
    height: 26px;
    background: transparent;
    border: none;
    border-radius: 8px;
    color: var(--ink-secondary);
    cursor: pointer;
    transition: all 0.12s;
}

.cd-float-btn:hover[b-xjcqy0anso] {
    background: var(--surface-muted);
    color: var(--ink-primary);
}

.cd-float-btn:active[b-xjcqy0anso] {
    background: var(--border-soft);
}

.cd-float-zoom[b-xjcqy0anso] {
    width: 40px;
    text-align: center;
    font-size: 10px;
    font-weight: 800;
    color: var(--ink-primary);
    letter-spacing: -0.03em;
}

/* Toggle switches */
.cd-float-toggle[b-xjcqy0anso] {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    cursor: pointer;
    user-select: none;
}

.cd-float-toggle input[b-xjcqy0anso] {
    position: absolute;
    opacity: 0;
    width: 0;
    height: 0;
}

.cd-float-toggle-track[b-xjcqy0anso] {
    position: relative;
    display: inline-block;
    width: 28px;
    height: 14px;
    background: var(--border-strong);
    border-radius: 7px;
    transition: background 0.2s;
}

.cd-float-toggle-track[b-xjcqy0anso]::after {
    content: '';
    position: absolute;
    top: 1px;
    left: 1px;
    width: 12px;
    height: 12px;
    background: var(--bm-surface);
    border-radius: 50%;
    transition: transform 0.2s;
}

.cd-float-toggle input:checked ~ .cd-float-toggle-track[b-xjcqy0anso] {
    background: var(--accent);
}

.cd-float-toggle input:checked ~ .cd-float-toggle-track[b-xjcqy0anso]::after {
    transform: translateX(14px);
}

.cd-float-toggle-label[b-xjcqy0anso] {
    font-size: 10px;
    font-weight: 700;
    color: var(--ink-secondary);
    transition: color 0.15s;
}

.cd-float-toggle:hover .cd-float-toggle-label[b-xjcqy0anso] {
    color: var(--ink-primary);
}

/* ===== Bar Divider & Inspector Button (in comparison bar) ===== */
.cd-bar-divider[b-xjcqy0anso] {
    width: 1px;
    height: 28px;
    background: var(--border-soft);
    flex-shrink: 0;
}

.cd-btn-inspector[b-xjcqy0anso] {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 6px 14px;
    font-size: 0.78rem;
    font-weight: 700;
    color: var(--ink-secondary);
    background: var(--surface-page);
    border: 1px solid var(--border-soft);
    border-radius: 8px;
    cursor: pointer;
    transition: all 0.15s;
}

.cd-btn-inspector:hover[b-xjcqy0anso] {
    background: var(--accent-soft);
    color: var(--accent);
    border-color: var(--accent-border);
}

.cd-btn-inspector:hover .cd-badge-count[b-xjcqy0anso] {
    background: var(--accent-border);
    color: var(--accent-hover);
}

/* ===== Copy Diff XML Button ===== */
.cd-copy-xml-btn[b-xjcqy0anso] {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    padding: 3px 10px;
    font-size: 0.72rem;
    font-weight: 600;
    border: 1px solid var(--border-strong);
    border-radius: 6px;
    background: var(--surface-page);
    color: var(--ink-secondary);
    cursor: pointer;
    transition: background 0.15s, color 0.15s, border-color 0.15s;
    white-space: nowrap;
    flex-shrink: 0;
}
.cd-copy-xml-btn:hover[b-xjcqy0anso] {
    background: var(--accent-soft);
    border-color: var(--accent);
    color: var(--accent-hover);
}
.cd-copy-xml-btn--copied[b-xjcqy0anso] {
    background: var(--added-bg);
    border-color: var(--added-border);
    color: var(--added-fg);
}

/* ===== Semantic diff stats (rewired / moved-only) ===== */
.cd-stat-rewired[b-xjcqy0anso] {
    background: var(--modified-bg);
    color: #E65100;
    border-color: var(--modified-border);
}

.cd-stat-moved[b-xjcqy0anso] {
    background: var(--surface-muted);
    color: var(--ink-muted);
    border-color: var(--border-soft);
    font-weight: 600;
}

/* ===== Canvas diff legend ===== */
.cd-legend[b-xjcqy0anso] {
    position: absolute;
    bottom: 12px;
    right: 12px;
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 5px 12px;
    background: rgba(255,255,255, 0.9);
    backdrop-filter: blur(16px);
    -webkit-backdrop-filter: blur(16px);
    border: 1px solid var(--border-soft);
    border-radius: 12px;
    box-shadow: 0 4px 16px rgba(0,0,0,0.06), 0 1px 4px rgba(0,0,0,0.03);
    z-index: 40;
    font-size: 10px;
    font-weight: 700;
    color: var(--ink-secondary);
}

.cd-legend-chip[b-xjcqy0anso] {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    white-space: nowrap;
}

.cd-legend-dot[b-xjcqy0anso] {
    width: 9px;
    height: 9px;
    border-radius: 50%;
    flex-shrink: 0;
}

.cd-legend-hint[b-xjcqy0anso] {
    font-weight: 500;
    color: var(--ink-muted);
}

.cd-legend-muted[b-xjcqy0anso] {
    color: var(--ink-muted);
    font-weight: 500;
    padding-left: 8px;
    border-left: 1px solid var(--border-soft);
}

/* ===== Collapsed layout-noise group in the inspector ===== */
.cd-layout-group[b-xjcqy0anso] {
    margin: 4px 8px 8px;
    border: 1px dashed var(--border-soft);
    border-radius: 8px;
    background: var(--surface-muted);
}

.cd-layout-group summary[b-xjcqy0anso] {
    padding: 6px 10px;
    font-size: 0.72rem;
    font-weight: 700;
    color: var(--ink-muted);
    cursor: pointer;
    user-select: none;
}

.cd-layout-group[open] summary[b-xjcqy0anso] {
    border-bottom: 1px dashed var(--border-soft);
}

.cd-layout-row[b-xjcqy0anso] {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 4px 10px;
    font-size: 0.72rem;
    color: var(--ink-secondary);
}

.cd-layout-row-title[b-xjcqy0anso] {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

/* ===== Non-process diff: scrollable page wrapper (fixes clipping under .cd-page overflow:hidden) ===== */
.cd-np-scroll[b-xjcqy0anso] {
    flex: 1;
    min-height: 0;
    overflow-y: auto;
    padding: 1rem 1.5rem;
}

/* ===== Semantic map change list ===== */
.cd-map-change-list[b-xjcqy0anso] {
    padding: 10px;
    display: flex;
    flex-direction: column;
    gap: 7px;
}

.cd-map-counts[b-xjcqy0anso] {
    display: inline-flex;
    gap: 6px;
    flex-wrap: wrap;
}

.cd-map-count[b-xjcqy0anso] {
    font-size: 0.7rem;
    font-weight: 700;
    padding: 2px 8px;
    border-radius: 999px;
    border: 1px solid transparent;
}

.cd-map-count-add[b-xjcqy0anso] {
    background: var(--added-bg);
    color: var(--added-fg);
    border-color: var(--added-border);
}

.cd-map-count-del[b-xjcqy0anso] {
    background: var(--deleted-bg);
    color: var(--deleted-fg);
    border-color: var(--deleted-border);
}

.cd-map-count-mod[b-xjcqy0anso] {
    background: var(--modified-bg);
    color: var(--modified-fg);
    border-color: var(--modified-border);
}

.cd-map-field[b-xjcqy0anso] {
    font-size: 0.72rem;
    font-weight: 700;
    font-family: 'Courier New', monospace;
    color: var(--ink-primary);
    max-width: 40%;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

/* Inline script code-diff (map functions, data-process scripts) */
.cd-script-diff[b-xjcqy0anso] {
    margin-top: 6px;
    border: 1px solid var(--border-soft);
    border-radius: 8px;
    overflow: hidden;
    background: var(--bm-surface);
}

/* Raw-changes collapsed group on the non-process page */
.cd-np-raw[b-xjcqy0anso] {
    margin: 0 0 1rem;
    background: var(--bm-surface);
}

.cd-np-raw > summary[b-xjcqy0anso] {
    padding: 10px 16px;
    font-size: 0.8rem;
}

.cd-np-raw[open][b-xjcqy0anso] {
    overflow-x: auto;
}
/* /Components/Pages/ComponentViewer.razor.rz.scp.css */
/* ===== Component Viewer — Matching ComponentDiff Design ===== */

/* Page-level: full-width workspace sized to the viewport below the sticky
   chrome so the document never scrolls — only the canvas inside the shell
   does. Unlike list pages this deliberately skips the 1440px container:
   the diagram canvas should use every pixel, with just slim gutters. */
.cv-page[b-qup96gkxb7] {
    display: flex;
    flex-direction: column;
    height: calc(100dvh - var(--bm-chrome-h, 94px));
    overflow: hidden;
    padding: 8px 14px 12px;
}

/* ===== Page head: standard breadcrumb row + badges + gear ===== */
.cv-page-head[b-qup96gkxb7] {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-bottom: 8px;
    flex-shrink: 0;
    min-width: 0;
}

.cv-page-head .bm-breadcrumb[b-qup96gkxb7] {
    min-width: 0;
}

.cv-crumb-name[b-qup96gkxb7] {
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    max-width: 480px;
}

.cv-head-spacer[b-qup96gkxb7] {
    flex: 1;
}

.cv-header-right[b-qup96gkxb7] {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    flex-shrink: 0;
}

/* ===== Workspace shell: one bm-card holding toolbar + version bar + canvas ===== */
.cv-shell[b-qup96gkxb7] {
    flex: 1;
    min-height: 0;
    display: flex;
    flex-direction: column;
    overflow: hidden;
}

.cv-type-badge[b-qup96gkxb7] {
    display: inline-flex;
    align-items: center;
    font-size: 10px;
    font-weight: 700;
    letter-spacing: 0.05em;
    padding: 2px 8px;
    background: var(--surface-muted);
    color: var(--ink-secondary);
    border: 1px solid var(--border-soft);
    border-radius: 4px;
    text-transform: uppercase;
    white-space: nowrap;
}

.cv-branch-badge[b-qup96gkxb7] {
    display: inline-flex;
    align-items: center;
    font-size: 10px;
    font-weight: 600;
    padding: 2px 8px;
    background: var(--surface-page);
    color: var(--ink-secondary);
    border: 1px solid var(--border-soft);
    border-radius: 4px;
    white-space: nowrap;
}

/* Gear dropdown */
.cv-gear-wrap[b-qup96gkxb7] {
    position: relative;
}

.cv-gear-btn[b-qup96gkxb7] {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 34px;
    height: 34px;
    border: 1px solid var(--border-soft);
    background: var(--surface-page);
    border-radius: 8px;
    color: var(--ink-secondary);
    cursor: pointer;
    transition: all 0.15s;
}

.cv-gear-btn:hover[b-qup96gkxb7] {
    background: var(--surface-muted);
    color: var(--accent);
    border-color: var(--accent-border);
}

.cv-settings-dropdown[b-qup96gkxb7] {
    position: absolute;
    top: 100%;
    right: 0;
    margin-top: 6px;
    background: var(--bm-surface);
    border: 1px solid var(--border-soft);
    border-radius: 12px;
    box-shadow: 0 8px 30px rgba(0,0,0,0.08);
    padding: 12px 16px;
    min-width: 220px;
    z-index: 999;
}

.cv-settings-title[b-qup96gkxb7] {
    font-size: 0.72rem;
    font-weight: 800;
    letter-spacing: 0.08em;
    color: var(--ink-muted);
    text-transform: uppercase;
    margin-bottom: 10px;
}

.cv-settings-item[b-qup96gkxb7] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 8px 0;
    border-top: 1px solid var(--surface-muted);
}

.cv-settings-label[b-qup96gkxb7] {
    font-size: 0.8rem;
    font-weight: 600;
    color: var(--ink-secondary);
}

/* ===== Tier 2: Toolbar Bar ===== */
.cv-toolbar-bar[b-qup96gkxb7] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    min-height: 52px;
    padding: 0.5rem 1.5rem;
    background: var(--bm-surface);
    border-bottom: 1px solid var(--border-soft);
    box-shadow: 0 1px 3px rgba(0,0,0,0.04);
    gap: 1rem;
    flex-wrap: wrap;
    flex-shrink: 0;
}

.cv-bar-left[b-qup96gkxb7] {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    flex-wrap: wrap;
}

.cv-bar-right[b-qup96gkxb7] {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    flex-shrink: 0;
}

/* Mode toggle */
.cv-mode-toggle[b-qup96gkxb7] {
    display: inline-flex;
    align-items: center;
    background: var(--surface-muted);
    padding: 3px;
    border-radius: 10px;
    border: 1px solid var(--border-soft);
}

.cv-mode-btn[b-qup96gkxb7] {
    padding: 4px 14px;
    font-size: 0.72rem;
    font-weight: 700;
    color: var(--ink-secondary);
    background: transparent;
    border: none;
    border-radius: 7px;
    cursor: pointer;
    transition: all 0.15s;
}

.cv-mode-btn:hover[b-qup96gkxb7] {
    color: var(--ink-primary);
}

.cv-mode-btn.active[b-qup96gkxb7] {
    background: var(--bm-surface);
    color: var(--accent);
    box-shadow: 0 1px 3px rgba(0,0,0,0.08);
    border: 1px solid var(--border-soft);
}

.cv-bar-divider[b-qup96gkxb7] {
    width: 1px;
    height: 28px;
    background: var(--border-soft);
    flex-shrink: 0;
}

/* Inputs */
.cv-input[b-qup96gkxb7] {
    border: 1px solid var(--border-soft);
    border-radius: 8px;
    padding: 6px 12px;
    font-size: 0.82rem;
    color: var(--ink-primary);
    background: var(--bm-surface);
    outline: none;
    transition: all 0.15s;
}

.cv-input:focus[b-qup96gkxb7] {
    border-color: var(--accent);
    box-shadow: 0 0 0 3px var(--accent-ring);
}

.cv-input-id[b-qup96gkxb7] {
    min-width: 240px;
    max-width: 320px;
    font-family: 'Courier New', monospace;
}

.cv-input-ver[b-qup96gkxb7] {
    width: 64px;
    text-align: center;
    font-weight: 700;
}

.cv-input-ver[b-qup96gkxb7]::-webkit-inner-spin-button,
.cv-input-ver[b-qup96gkxb7]::-webkit-outer-spin-button {
    -webkit-appearance: none;
    margin: 0;
}

.cv-input-ver[type=number][b-qup96gkxb7] {
    -moz-appearance: textfield;
    appearance: textfield;
}

/* Buttons */
.cv-btn-load[b-qup96gkxb7] {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 7px 18px;
    background: var(--accent);
    color: var(--ink-on-accent);
    border: none;
    border-radius: 8px;
    font-size: 0.78rem;
    font-weight: 700;
    cursor: pointer;
    transition: all 0.15s;
    box-shadow: 0 1px 3px rgba(217,119,87,0.3);
}

.cv-btn-load:hover:not(:disabled)[b-qup96gkxb7] {
    background: var(--accent-hover);
    box-shadow: 0 2px 6px rgba(217,119,87,0.4);
}

.cv-btn-load:active:not(:disabled)[b-qup96gkxb7] {
    transform: scale(0.97);
}

.cv-btn-load:disabled[b-qup96gkxb7] {
    opacity: 0.6;
    cursor: not-allowed;
}

.cv-btn-xml[b-qup96gkxb7] {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    padding: 5px 12px;
    font-size: 0.72rem;
    font-weight: 700;
    color: var(--ink-secondary);
    background: transparent;
    border: 1px solid var(--border-soft);
    border-radius: 8px;
    cursor: pointer;
    transition: all 0.15s;
}

.cv-btn-xml:hover[b-qup96gkxb7] {
    background: var(--surface-muted);
    color: var(--ink-primary);
}

.cv-btn-xml.active[b-qup96gkxb7] {
    background: var(--surface-muted);
    color: var(--accent);
    border-color: var(--accent-border);
}

.cv-btn-analyze[b-qup96gkxb7] {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    padding: 5px 12px;
    margin-right: 6px;
    font-size: 0.72rem;
    font-weight: 700;
    color: var(--accent);
    background: var(--accent-soft);
    border: 1px solid var(--accent-border, var(--accent));
    border-radius: 8px;
    cursor: pointer;
    transition: all 0.15s;
}

.cv-btn-analyze:hover[b-qup96gkxb7] {
    background: var(--accent);
    color: var(--ink-on-accent);
}

/* File input */
.cv-file-input[b-qup96gkxb7] {
    border: 1px solid var(--border-soft);
    border-radius: 8px;
    padding: 4px 10px;
    font-size: 0.78rem;
    max-width: 300px;
}

/* Paste section */
.cv-paste-section[b-qup96gkxb7] {
    padding: 0.5rem 1.5rem;
    background: var(--surface-page);
    border-bottom: 1px solid var(--border-soft);
    flex-shrink: 0;
}

.cv-paste-area[b-qup96gkxb7] {
    border: 1px solid var(--border-soft);
    border-radius: 8px;
    padding: 8px;
    font-size: 0.78rem;
    font-family: 'Courier New', monospace;
    background: var(--bm-surface);
    resize: vertical;
    width: 100%;
}

/* ===== Version Bar ===== */
.cv-version-bar[b-qup96gkxb7] {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    padding: 0.4rem 1.5rem;
    background: var(--surface-page);
    border-bottom: 1px solid var(--border-soft);
    font-size: 0.8rem;
    flex-shrink: 0;
    flex-wrap: wrap;
}

.cv-version-nav[b-qup96gkxb7] {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    background: var(--bm-surface);
    border: 1px solid var(--border-soft);
    border-radius: 10px;
    padding: 4px 10px;
}

.cv-ver-btn[b-qup96gkxb7] {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 24px;
    height: 24px;
    background: transparent;
    border: 1px solid var(--border-soft);
    border-radius: 6px;
    color: var(--ink-secondary);
    font-size: 0.72rem;
    cursor: pointer;
    transition: all 0.15s;
}

.cv-ver-btn:hover:not(:disabled)[b-qup96gkxb7] {
    background: var(--surface-muted);
    color: var(--accent);
}

.cv-ver-btn:disabled[b-qup96gkxb7] {
    opacity: 0.4;
    cursor: not-allowed;
}

.cv-ver-label[b-qup96gkxb7] {
    font-size: 0.78rem;
    font-weight: 700;
    color: var(--ink-primary);
}

.cv-ver-max[b-qup96gkxb7] {
    font-size: 0.68rem;
    color: var(--ink-muted);
}

.cv-stat-badge[b-qup96gkxb7] {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    padding: 3px 8px;
    font-size: 0.68rem;
    font-weight: 600;
    border-radius: 6px;
    border: 1px solid var(--border-soft);
    background: var(--bm-surface);
    color: var(--ink-secondary);
}

/* ===== Error Alert ===== */
.cv-error-alert[b-qup96gkxb7] {
    margin: 0.75rem 1.5rem;
    padding: 0.75rem 1rem;
    background: var(--deleted-bg);
    color: var(--deleted-fg);
    border: 1px solid var(--deleted-border);
    border-radius: 10px;
    font-size: 0.85rem;
    font-weight: 500;
    flex-shrink: 0;
}

/* ===== Process Wrapper (full-height with dot grid) ===== */
.cv-process-wrapper[b-qup96gkxb7] {
    position: relative;
    flex: 1;
    min-height: 0;
    overflow: hidden;
}

.cv-process-wrapper[b-qup96gkxb7]  .split-container {
    height: 100%;
    align-items: stretch;
}

.cv-process-wrapper[b-qup96gkxb7]  .split-right-header {
    padding: 12px 16px;
    background: var(--bm-surface);
    border-bottom: 1px solid var(--border-soft);
}

.cv-process-wrapper[b-qup96gkxb7]  .split-right {
    border-radius: 0;
    border: none;
    border-left: 1px solid var(--border-soft);
    box-shadow: -4px 0 15px rgba(0,0,0,0.03);
    max-height: none;
    overflow-y: auto;
}

.cv-process-wrapper[b-qup96gkxb7]  .split-right-body {
    overflow-y: auto;
    height: calc(100% - 50px);
}

.cv-process-wrapper[b-qup96gkxb7]  .split-left {
    overflow: hidden;
    position: relative;
    background-color: var(--surface-muted);
    background-image: radial-gradient(var(--border-strong) 0.5px, transparent 0.5px);
    background-size: 24px 24px;
    background-attachment: fixed;
}

/* Make ProcessDiagram container transparent so dot grid shows through */
.cv-process-wrapper[b-qup96gkxb7]  .border.rounded.bg-white {
    border: none !important;
    background: transparent !important;
    border-radius: 0 !important;
}

/* ===== Content Area (non-process, scrollable) ===== */
.cv-content-area[b-qup96gkxb7] {
    flex: 1;
    min-height: 0;
    overflow-y: auto;
    padding: 1rem 1.5rem;
}

/* ===== Floating Canvas Controls ===== */
.cv-floating-bar[b-qup96gkxb7] {
    position: absolute;
    bottom: 12px;
    left: 12px;
    width: fit-content;
    display: flex;
    align-items: center;
    gap: 0.75rem;
    padding: 6px 14px;
    background: rgba(255,255,255,0.9);
    backdrop-filter: blur(16px);
    -webkit-backdrop-filter: blur(16px);
    border: 1px solid var(--border-soft);
    border-radius: 12px;
    box-shadow: 0 4px 16px rgba(0,0,0,0.06), 0 1px 4px rgba(0,0,0,0.03);
    z-index: 40;
}

.cv-float-group[b-qup96gkxb7] {
    display: flex;
    align-items: center;
    gap: 0.5rem;
}

.cv-float-group-border[b-qup96gkxb7] {
    padding-right: 0.75rem;
    border-right: 1px solid var(--border-soft);
}

.cv-float-btn[b-qup96gkxb7] {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 26px;
    height: 26px;
    background: transparent;
    border: none;
    border-radius: 8px;
    color: var(--ink-secondary);
    cursor: pointer;
    transition: all 0.12s;
}

.cv-float-btn:hover[b-qup96gkxb7] {
    background: var(--surface-muted);
    color: var(--ink-primary);
}

.cv-float-btn:active[b-qup96gkxb7] {
    background: var(--border-soft);
}

.cv-float-zoom[b-qup96gkxb7] {
    width: 40px;
    text-align: center;
    font-size: 10px;
    font-weight: 800;
    color: var(--ink-primary);
    letter-spacing: -0.03em;
}

/* Toggle switch */
.cv-float-toggle[b-qup96gkxb7] {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    cursor: pointer;
    user-select: none;
}

.cv-float-toggle input[b-qup96gkxb7] {
    position: absolute;
    opacity: 0;
    width: 0;
    height: 0;
}

.cv-toggle-track[b-qup96gkxb7] {
    position: relative;
    display: inline-block;
    width: 28px;
    height: 16px;
    background: var(--border-strong);
    border-radius: 999px;
    transition: all 0.2s;
}

.cv-float-toggle input:checked + .cv-toggle-track[b-qup96gkxb7] {
    background: var(--accent);
}

.cv-toggle-track[b-qup96gkxb7]::after {
    content: '';
    position: absolute;
    top: 2px;
    left: 2px;
    width: 12px;
    height: 12px;
    background: var(--bm-surface);
    border-radius: 50%;
    transition: transform 0.2s;
    box-shadow: 0 1px 3px rgba(0,0,0,0.1);
}

.cv-float-toggle input:checked + .cv-toggle-track[b-qup96gkxb7]::after {
    transform: translateX(12px);
}

.cv-toggle-label[b-qup96gkxb7] {
    font-size: 11px;
    font-weight: 700;
    color: var(--ink-secondary);
}

/* View toggle (for icon style) */
.cv-view-toggle[b-qup96gkxb7] {
    display: inline-flex;
    align-items: center;
    background: var(--surface-muted);
    padding: 3px;
    border-radius: 10px;
    border: 1px solid var(--border-soft);
}

.cv-view-toggle-sm[b-qup96gkxb7] {
    padding: 2px;
    border-radius: 8px;
}

.cv-view-btn[b-qup96gkxb7] {
    padding: 5px 14px;
    font-size: 0.72rem;
    font-weight: 700;
    color: var(--ink-secondary);
    background: transparent;
    border: none;
    border-radius: 7px;
    cursor: pointer;
    transition: all 0.15s;
}

.cv-view-btn-sm[b-qup96gkxb7] {
    padding: 3px 10px;
    font-size: 0.68rem;
}

.cv-view-btn:hover[b-qup96gkxb7] {
    color: var(--ink-primary);
}

.cv-view-btn.active[b-qup96gkxb7] {
    background: var(--bm-surface);
    color: var(--accent);
    box-shadow: 0 1px 3px rgba(0,0,0,0.08);
    border: 1px solid var(--border-soft);
}

/* ===== Shape Detail Panel ===== */
.cv-shape-detail[b-qup96gkxb7] {
    padding: 16px;
}

.cv-detail-table[b-qup96gkxb7] {
    width: 100%;
    font-size: 0.82rem;
    margin-bottom: 1rem;
}

.cv-detail-table td[b-qup96gkxb7] {
    padding: 6px 10px;
    border-bottom: 1px solid var(--surface-muted);
}

.cv-detail-table td:first-child[b-qup96gkxb7] {
    font-weight: 700;
    color: var(--ink-secondary);
    width: 90px;
    font-size: 0.75rem;
    text-transform: uppercase;
    letter-spacing: 0.04em;
}

.cv-section-title[b-qup96gkxb7] {
    font-size: 0.78rem;
    font-weight: 700;
    color: var(--ink-primary);
    margin: 1rem 0 0.5rem;
    padding-bottom: 0.25rem;
    border-bottom: 1px solid var(--border-soft);
}

.cv-conn-table[b-qup96gkxb7] {
    width: 100%;
    font-size: 0.78rem;
}

.cv-conn-table th[b-qup96gkxb7] {
    font-size: 0.68rem;
    font-weight: 800;
    color: var(--ink-muted);
    text-transform: uppercase;
    letter-spacing: 0.08em;
    padding: 6px 8px;
    border-bottom: 1px solid var(--border-soft);
}

.cv-conn-table td[b-qup96gkxb7] {
    padding: 6px 8px;
    border-bottom: 1px solid var(--surface-muted);
}

/* ===== Content area card improvements ===== */
.cv-content-area .card[b-qup96gkxb7] {
    border: 1px solid var(--border-soft);
    border-radius: 12px;
    overflow: hidden;
    box-shadow: 0 1px 3px rgba(0,0,0,0.04);
}

.cv-content-area .card-header[b-qup96gkxb7] {
    background: var(--surface-page);
    border-bottom: 1px solid var(--border-soft);
    font-size: 0.85rem;
    font-weight: 700;
    color: var(--ink-primary);
}

/* Raw XML card */
.cv-xml-card[b-qup96gkxb7] {
    background: var(--bm-surface);
    border: 1px solid var(--border-soft);
    border-radius: 12px;
    overflow: hidden;
    box-shadow: 0 1px 3px rgba(0,0,0,0.04);
}

.cv-xml-card-header[b-qup96gkxb7] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 12px 16px;
    background: var(--surface-page);
    border-bottom: 1px solid var(--border-soft);
    font-size: 0.85rem;
    font-weight: 700;
    color: var(--ink-primary);
}

.cv-copy-btn[b-qup96gkxb7] {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    padding: 4px 12px;
    font-size: 0.72rem;
    font-weight: 700;
    color: var(--ink-secondary);
    background: var(--bm-surface);
    border: 1px solid var(--border-soft);
    border-radius: 6px;
    cursor: pointer;
    transition: all 0.15s;
}

.cv-copy-btn:hover[b-qup96gkxb7] {
    background: var(--surface-muted);
    color: var(--accent);
    border-color: var(--accent-border);
}

.cv-xml-card pre[b-qup96gkxb7] {
    margin: 0;
    padding: 1rem;
    overflow: auto;
    background: var(--surface-muted);
    font-size: 0.78rem;
    white-space: pre-wrap;
    word-break: break-all;
}
/* /Components/Pages/Projects/DeploymentsTab.razor.rz.scp.css */
.dep-shell[b-jb3xetelqq] {
    padding: 0;
    overflow: hidden;
}

.dep-toolbar[b-jb3xetelqq] {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 10px 16px;
    border-bottom: .5px solid var(--bm-line);
    flex-wrap: wrap;
}

.dep-search[b-jb3xetelqq] {
    display: flex;
    align-items: center;
    gap: 8px;
    flex: 1;
    max-width: 360px;
    height: 30px;
    padding: 0 10px;
    border: .5px solid var(--bm-line-2);
    border-radius: 8px;
    background: var(--bm-surface);
}

.dep-search input[b-jb3xetelqq] {
    flex: 1;
    border: 0;
    outline: none;
    background: transparent;
    color: var(--bm-ink);
    font: inherit;
    font-size: 13px;
}

.dep-check[b-jb3xetelqq] {
    display: flex;
    align-items: center;
    gap: 6px;
    font-size: 12.5px;
    color: var(--bm-ink-2);
    cursor: pointer;
    white-space: nowrap;
}

/* Two-pane master/detail. Each pane owns an independent vertical scroll via its
   own max-height (NOT grid stretch — a single auto-sized grid row sizes to its
   tallest content and lets the inner scroll region grow unbounded, which is why
   the list showed only its first rows with no scrollbar). align-items:start so a
   short list and a tall detail don't force-match heights. */
.dep-body[b-jb3xetelqq] {
    display: grid;
    grid-template-columns: 320px 1fr;
    align-items: start;
}

.dep-list[b-jb3xetelqq] {
    border-right: .5px solid var(--bm-line);
}

.dep-list-head[b-jb3xetelqq] {
    padding: 8px 14px;
    font-size: 11.5px;
    color: var(--bm-ink-3);
    text-transform: uppercase;
    letter-spacing: 0.04em;
    border-bottom: .5px solid var(--bm-line);
}

.dep-list-scroll[b-jb3xetelqq] {
    overflow-y: auto;
    max-height: calc(100dvh - 300px);
    min-height: 200px;
}

.dep-list-item[b-jb3xetelqq] {
    display: flex;
    flex-direction: column;
    gap: 4px;
    width: 100%;
    text-align: left;
    padding: 9px 14px;
    border: 0;
    border-bottom: .5px solid var(--bm-line);
    background: transparent;
    cursor: pointer;
    color: var(--bm-ink);
}

.dep-list-item:hover[b-jb3xetelqq] { background: var(--bm-surface-2); }

.dep-list-item.active[b-jb3xetelqq] {
    background: var(--bm-surface-2);
    box-shadow: inset 3px 0 0 var(--bm-accent, #d97757);
}

.dep-list-name[b-jb3xetelqq] {
    font-size: 13px;
    font-weight: 500;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.dep-list-meta[b-jb3xetelqq] {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 11px;
}

.dep-detail[b-jb3xetelqq] {
    overflow-y: auto;
    max-height: calc(100dvh - 300px);
    padding: 18px 20px;
}

.dep-empty[b-jb3xetelqq] {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 12px;
    height: 100%;
    min-height: 300px;
    color: var(--bm-ink-3);
    font-size: 13px;
    text-align: center;
}

.dep-detail-head[b-jb3xetelqq] {
    display: flex;
    align-items: flex-start;
    gap: 12px;
    margin-bottom: 16px;
}

.dep-detail-title[b-jb3xetelqq] {
    margin: 0 0 4px;
    font-size: 18px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.dep-detail-sub[b-jb3xetelqq] {
    display: flex;
    align-items: center;
    gap: 10px;
    flex-wrap: wrap;
    font-size: 12.5px;
}

.dep-section-head[b-jb3xetelqq] {
    display: flex;
    align-items: center;
    gap: 10px;
    padding-bottom: 8px;
    margin-bottom: 4px;
    border-bottom: .5px solid var(--bm-line);
}

.dep-section-head strong[b-jb3xetelqq] { font-size: 13.5px; }

.dep-env-tbl td[b-jb3xetelqq] { vertical-align: middle; }

/* Environments pager */
.dep-pager[b-jb3xetelqq] {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 10px 2px 2px;
}

.dep-deps-empty[b-jb3xetelqq] {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 10px 0;
}

/* Long values (names, ids) must wrap rather than force a horizontal scrollbar. */
.dep-detail .bm-tbl td[b-jb3xetelqq] { overflow-wrap: anywhere; word-break: break-word; }

.dep-cmp-bar[b-jb3xetelqq] {
    display: flex;
    align-items: center;
    gap: 10px;
    flex-wrap: wrap;
    padding: 4px 0 2px;
}

.dep-cmp-lbl[b-jb3xetelqq] {
    font-size: 12.5px;
    font-weight: 500;
    color: var(--bm-ink-2);
}

.dep-cmp-tbl td[b-jb3xetelqq] { vertical-align: middle; }

/* AI change-summary panel */
.dep-ai[b-jb3xetelqq] {
    margin: 10px 0 4px;
    padding: 12px 14px;
    border: .5px solid var(--bm-line-2);
    border-radius: 10px;
    background: var(--bm-surface-2);
}

.dep-ai-head[b-jb3xetelqq] {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-bottom: 8px;
    color: var(--bm-ink-2);
}

.dep-ai-head strong[b-jb3xetelqq] { font-size: 13px; }

.dep-ai-md[b-jb3xetelqq] {
    font-size: 13px;
    line-height: 1.5;
    color: var(--bm-ink);
}

.dep-ai-md h2[b-jb3xetelqq] { font-size: 13.5px; font-weight: 600; margin: 12px 0 4px; }
.dep-ai-md h2:first-child[b-jb3xetelqq] { margin-top: 0; }
.dep-ai-md ul[b-jb3xetelqq] { margin: 4px 0; padding-left: 20px; }
.dep-ai-md li[b-jb3xetelqq] { margin: 2px 0; }
.dep-ai-md code[b-jb3xetelqq] { font-family: var(--bm-font-mono); font-size: 12px; }
.dep-ai-md p[b-jb3xetelqq] { margin: 4px 0; }

/* Component diff drill-down: a near-full-screen dialog that hosts ComponentDiff.
   Neutralize cd-page's own viewport sizing so it fills the dialog cleanly. */
.dep-diff-overlay[b-jb3xetelqq] {
    position: fixed;
    inset: 0;
    background: rgba(0, 0, 0, .5);
    z-index: 1000;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 16px;
}

.dep-diff-modal[b-jb3xetelqq] {
    position: relative;
    background: var(--bm-surface);
    border-radius: 12px;
    width: min(1500px, 96vw);
    height: 94vh;
    display: flex;
    flex-direction: column;
    overflow: hidden;
    box-shadow: 0 12px 40px rgba(0, 0, 0, .3);
}

.dep-diff-close[b-jb3xetelqq] {
    position: absolute;
    top: 10px;
    right: 12px;
    z-index: 5;
    border: none;
    background: transparent;
    font-size: 16px;
    cursor: pointer;
    color: var(--bm-ink-3, #777);
}

.dep-diff-body[b-jb3xetelqq] { flex: 1; overflow: auto; min-height: 0; }

.dep-diff-body[b-jb3xetelqq]  .cd-page {
    height: 100%;
    max-width: none;
    margin: 0;
    padding: 0;
}

.dep-diff-body[b-jb3xetelqq]  .cd-page-head { padding-right: 40px; }

@media (max-width: 860px) {
    .dep-body[b-jb3xetelqq] {
        grid-template-columns: 1fr;
    }
    .dep-list[b-jb3xetelqq] { border-right: 0; border-bottom: .5px solid var(--bm-line); }
    .dep-list-scroll[b-jb3xetelqq] { max-height: 280px; }
    .dep-detail[b-jb3xetelqq] { max-height: none; }
}
/* /Components/Pages/Projects/ExtensionsTab.razor.rz.scp.css */
/* Long extension values (URLs, connection strings, ids) and the raw XML must
   wrap instead of forcing a horizontal scrollbar that only appears far below
   the fold. Scoped to this component, so it doesn't affect other tables. */
.bm-tbl td[b-1weoe1g3ux] {
    overflow-wrap: anywhere;
    word-break: break-word;
    white-space: normal;
}

.ext-raw[b-1weoe1g3ux] {
    white-space: pre-wrap;
    word-break: break-word;
    overflow-wrap: anywhere;
}

/* Fixed layout so a single long value can't starve the other columns of width;
   declared column widths hold and long values wrap inside their own cell. */
.ext-fixed[b-1weoe1g3ux] {
    table-layout: fixed;
    width: 100%;
}

.ext-search[b-1weoe1g3ux] {
    display: flex;
    align-items: center;
    gap: 7px;
    height: 28px;
    padding: 0 9px;
    border: .5px solid var(--bm-line-2);
    border-radius: 8px;
    background: var(--bm-surface);
    min-width: 220px;
}

.ext-search input[b-1weoe1g3ux] {
    flex: 1;
    border: 0;
    outline: none;
    background: transparent;
    color: var(--bm-ink);
    font: inherit;
    font-size: 12.5px;
}
/* /Components/Pages/Projects/ProjectMerge.razor.rz.scp.css */
/* =============================================================================
   ProjectMerge — two-pane merge workspace.
   Left: searchable folder/type/component tree. Right: counts + selected-component
   detail card with side-by-side Source vs Destination.
   ============================================================================= */

.pm-page[b-lnkrwycsgm] {
    display: flex;
    flex-direction: column;
    height: calc(100vh - 60px);
    background: var(--bm-bg);
    color: var(--bm-ink);
}

/* ── Secondary button (only pm-btn-* class still used by ProjectMerge.razor) ── */
.pm-btn-secondary[b-lnkrwycsgm] {
    height: 30px;
    padding: 0 12px;
    background: var(--bm-surface);
    color: var(--bm-ink);
    border: 1px solid var(--bm-line-2);
    border-radius: 6px;
    font-size: 13px;
    font-weight: 600;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    gap: 4px;
}
.pm-btn-secondary:hover:not(:disabled)[b-lnkrwycsgm] { background: var(--bm-bg-2); border-color: var(--bm-ink-3); }
.pm-btn-secondary:disabled[b-lnkrwycsgm] { color: var(--bm-ink-4); cursor: not-allowed; }

/* ── Two-pane workspace ── */
.pm-workspace[b-lnkrwycsgm] {
    flex: 1;
    display: grid;
    grid-template-columns: 320px 1fr;
    min-height: 0;
}

/* ── Left: tree pane ── */
.pm-tree-pane[b-lnkrwycsgm] {
    border-right: 1px solid var(--bm-line);
    overflow-y: auto;
    background: var(--bm-bg-2);
}
.pm-tree-toolbar[b-lnkrwycsgm] {
    position: sticky;
    top: 0;
    background: var(--bm-bg-2);
    padding: 12px;
    display: flex;
    gap: 8px;
    align-items: center;
    border-bottom: 1px solid var(--bm-line);
    z-index: 1;
}
.pm-search-wrap[b-lnkrwycsgm] {
    flex: 1;
    position: relative;
}
.pm-search-icon[b-lnkrwycsgm] {
    position: absolute;
    left: 8px;
    top: 50%;
    transform: translateY(-50%);
    color: var(--ink-subtle, #888);
    pointer-events: none;
}
.pm-search-input[b-lnkrwycsgm] {
    width: 100%;
    height: 32px;
    padding: 0 10px 0 28px;
    border: 1px solid var(--bm-line-2);
    border-radius: 6px;
    background: var(--bm-surface);
    color: var(--bm-ink);
    font-size: 13px;
}
.pm-icon-btn[b-lnkrwycsgm] {
    height: 32px;
    width: 32px;
    border: 1px solid var(--bm-line-2);
    border-radius: 6px;
    background: var(--bm-surface);
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--bm-ink-2);
}
.pm-icon-btn:hover[b-lnkrwycsgm] { background: var(--bm-bg-2); }
.pm-filter-menu[b-lnkrwycsgm] {
    padding: 8px 12px;
    background: var(--bm-surface);
    border-bottom: 1px solid var(--bm-line);
    display: flex;
    flex-direction: column;
    gap: 4px;
}
.pm-filter-opt[b-lnkrwycsgm] {
    display: flex;
    align-items: center;
    gap: 6px;
    font-size: 12px;
    cursor: pointer;
}

.pm-tree[b-lnkrwycsgm] {
    list-style: none;
    margin: 0;
    padding: 4px 0;
}
.pm-tree-children[b-lnkrwycsgm] {
    list-style: none;
    margin: 0;
    padding-left: 18px;
}
.pm-tree-row[b-lnkrwycsgm] {
    display: flex;
    align-items: center;
    gap: 6px;
    padding: 4px 12px;
    cursor: pointer;
    font-size: 13px;
    user-select: none;
}
.pm-tree-row:hover[b-lnkrwycsgm] { background: var(--bm-bg-2); }
.pm-tree-row.active[b-lnkrwycsgm] {
    background: var(--bm-accent-soft);
    border-left: 3px solid var(--bm-accent);
    padding-left: 9px;
    font-weight: 600;
}
.pm-tree-caret[b-lnkrwycsgm] {
    display: inline-block;
    width: 12px;
    color: var(--ink-subtle, #888);
    font-size: 10px;
    transition: transform 0.15s ease;
}
.pm-tree-caret.open[b-lnkrwycsgm] { transform: rotate(90deg); }
.pm-tree-icon[b-lnkrwycsgm] { font-size: 13px; }
.pm-tree-label[b-lnkrwycsgm] {
    flex: 1;
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
}
.pm-tree-row-folder[b-lnkrwycsgm] { font-weight: 600; }
.pm-tree-row-type[b-lnkrwycsgm]   { color: var(--ink-secondary, #555); }
.pm-tree-empty[b-lnkrwycsgm] {
    padding: 24px 12px;
    color: var(--ink-subtle, #888);
    font-size: 12px;
    text-align: center;
}

/* ── Right: detail pane ── */
.pm-detail-pane[b-lnkrwycsgm] {
    overflow-y: auto;
    padding: 16px 24px;
    background: var(--bm-surface);
    display: flex;
    flex-direction: column;
}

/* Counts row uses the shared bd-stat-chip palette so it matches the rest of the diff/merge
   surface. Compact pill chips, no big card boxes. */
.pm-counts-row[b-lnkrwycsgm] {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    align-items: center;
    padding: 12px 0;
    border-bottom: 1px solid var(--bm-line);
}

/* ── Conflict banner ── */
.pm-conflict-banner[b-lnkrwycsgm] {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 12px 16px;
    margin: 16px 0;
    background: var(--modified-bg);
    border: 1px solid var(--modified-border);
    border-radius: 8px;
    color: var(--modified-fg);
    font-size: 13px;
}
.pm-conflict-icon[b-lnkrwycsgm] { font-size: 18px; }

/* ── Detail header ── */
.pm-detail-header[b-lnkrwycsgm] {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 16px;
    margin-top: 16px;
}
.pm-detail-header-actions[b-lnkrwycsgm] {
    display: flex;
    gap: 8px;
    flex-shrink: 0;
    padding-top: 4px;
}
.pm-detail-title[b-lnkrwycsgm] {
    margin: 0 0 4px;
    font-size: 18px;
    font-weight: 700;
    display: flex;
    align-items: center;
    gap: 8px;
}
.pm-detail-icon[b-lnkrwycsgm] { font-size: 16px; }
.pm-detail-sub[b-lnkrwycsgm] {
    font-size: 12px;
    color: var(--ink-subtle, #888);
    margin-bottom: 16px;
}

.pm-detail-empty[b-lnkrwycsgm] {
    flex: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 12px;
    color: var(--ink-subtle, #888);
}
.pm-detail-empty-text[b-lnkrwycsgm] { font-size: 13px; }

/* ── Source / Destination cards ── */
.pm-card-grid[b-lnkrwycsgm] {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 24px;
    margin-top: 8px;
}
.pm-card[b-lnkrwycsgm] { display: flex; flex-direction: column; gap: 8px; }
.pm-card-header[b-lnkrwycsgm] { font-size: 13px; font-weight: 600; color: var(--ink-secondary, #555); }
.pm-card-body[b-lnkrwycsgm] {
    border: 1px solid var(--bm-line-2);
    border-radius: 10px;
    padding: 14px 16px;
    background: var(--bm-surface);
}
.pm-card-selectable[b-lnkrwycsgm] { border-color: var(--bm-accent-border, var(--accent-border)); }
.pm-card-branch-row[b-lnkrwycsgm] {
    display: flex;
    align-items: center;
    gap: 8px;
    padding-bottom: 10px;
    margin-bottom: 8px;
    border-bottom: 1px solid var(--bm-line);
}
.pm-card-branch-name[b-lnkrwycsgm] { font-size: 16px; font-weight: 700; }

.pm-meta[b-lnkrwycsgm] {
    display: grid;
    grid-template-columns: 130px 1fr;
    row-gap: 10px;
    column-gap: 12px;
    margin: 0;
    font-size: 13px;
}
.pm-meta dt[b-lnkrwycsgm] { color: var(--ink-secondary, #555); font-weight: 500; }
.pm-meta dd[b-lnkrwycsgm] { margin: 0; color: var(--ink-primary, #111); }

.pm-prevnext-row[b-lnkrwycsgm] {
    display: flex;
    gap: 8px;
    margin-top: 24px;
}

/* ── Inline component-diff modal ── */
.pm-modal-overlay[b-lnkrwycsgm] {
    position: fixed;
    inset: 0;
    background: var(--surface-overlay, rgba(15, 23, 42, 0.55));
    display: flex;
    align-items: center;
    justify-content: center;
    /* Tiny gutter so the modal still reads as a floating dialog, not a full-bleed page. */
    padding: 16px;
    z-index: 100;
}
.pm-modal[b-lnkrwycsgm] {
    position: relative;
    background: var(--bm-surface);
    border-radius: 12px;
    box-shadow: var(--bm-shadow-md);
    /* Use most of the viewport but stay inside the gutter. */
    width: 100%;
    height: 100%;
    max-width: none;
    max-height: none;
    display: flex;
    flex-direction: column;
    /* Clip any stray negative margins from inner pages so we never get a dialog scrollbar. */
    overflow: hidden;
}
.pm-modal-close[b-lnkrwycsgm] {
    position: absolute;
    top: 10px;
    right: 10px;
    width: 32px;
    height: 32px;
    border: 1px solid var(--bm-line-2);
    border-radius: 6px;
    background: var(--bm-surface);
    color: var(--bm-ink-2);
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 2;
}
.pm-modal-close:hover[b-lnkrwycsgm] { background: var(--bm-bg-2); color: var(--bm-ink); }
.pm-modal-body[b-lnkrwycsgm] {
    flex: 1;
    /* No padding — ComponentDiff's `.cd-page` uses negative side-margins assuming a regular
       page container; padding here would reveal those margins as horizontal overflow. The
       inner ComponentDiff layout handles its own scrolling regions, so we only need to clip
       the dialog itself. */
    padding: 0;
    overflow: hidden;
    min-width: 0;
    min-height: 0;
}
/* Neutralize `.cd-page`'s page-level sizing (viewport-relative height, centered
   max-width, container padding) when it's hosted inside this dialog — those rules
   assume the standard page chrome (sticky top bar + tab strip) that the modal
   doesn't have. The dialog owns the box; cd-page just fills it. */
.pm-modal-body[b-lnkrwycsgm]  .cd-page {
    margin: 0;
    height: 100%;
    width: 100%;
    max-width: none;
    padding: 10px 14px 14px;
}

/* Reserve space at the top-right of ComponentDiff's head row so its trailing controls
   (gear icon, status pill) don't slide under our close button. The close button is
   32px wide anchored at right:10, so 52px of right padding clears it. */
.pm-modal-body[b-lnkrwycsgm]  .cd-page-head {
    padding-right: 52px;
}
/* /Components/Pages/Projects/ProjectPullRequests.razor.rz.scp.css */
/* Pull-request list — chips mirror ProjectSourceControl's sc-chip family (scoped CSS
   doesn't cross pages, so the classes are replicated by name for future consolidation). */

.sc-chip[b-c375vnoy7q] {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    padding: 1px 8px;
    border-radius: 999px;
    font-size: 11px;
    font-weight: 600;
    line-height: 18px;
    white-space: nowrap;
    border: 1px solid transparent;
    margin-left: 4px;
}

.sc-chip-ok[b-c375vnoy7q]       { background: rgba(46, 160, 67, .12);  color: #2ea043; border-color: rgba(46, 160, 67, .3); }
.sc-chip-modified[b-c375vnoy7q] { background: rgba(210, 153, 34, .12); color: #b8860b; border-color: rgba(210, 153, 34, .35); }
.sc-chip-warn[b-c375vnoy7q]     { background: rgba(255, 140, 0, .12);  color: #d2691e; border-color: rgba(255, 140, 0, .3); }
.sc-chip-danger[b-c375vnoy7q]   { background: rgba(248, 81, 73, .12);  color: #d1242f; border-color: rgba(248, 81, 73, .3); }
.sc-chip-info[b-c375vnoy7q]     { background: rgba(130, 80, 223, .12); color: #8250df; border-color: rgba(130, 80, 223, .25); }
/* /Components/Pages/Projects/ProjectSourceControl.razor.rz.scp.css */
/* Source Control page — layout, history list, chips, and modals.
   bm-* primitives come from the global stylesheet; everything sc-* is page-scoped. */

.sc-layout[b-rln6tok2wu] {
    display: grid;
    grid-template-columns: 340px 1fr;
    gap: 18px;
    align-items: start;
}

@media (max-width: 1100px) {
    .sc-layout[b-rln6tok2wu] { grid-template-columns: 1fr; }
}

.sc-status[b-rln6tok2wu] { padding: 12px 16px; }

.sc-status-row[b-rln6tok2wu] {
    display: flex;
    align-items: center;
    gap: 10px;
    flex-wrap: wrap;
}

.sc-row-active td[b-rln6tok2wu] { background: color-mix(in srgb, var(--bm-accent, #4f7cff) 8%, transparent); }

/* selected-branch indicator in the workspace bar + branch list */
.sc-active-branch[b-rln6tok2wu] {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 3px 11px;
    border-radius: 999px;
    font-weight: 600;
    font-size: 12.5px;
    white-space: nowrap;
    background: color-mix(in srgb, var(--bm-accent, #4f7cff) 12%, transparent);
    border: 1px solid color-mix(in srgb, var(--bm-accent, #4f7cff) 55%, transparent);
    color: var(--bm-ink, #1f1e1d);
}
.sc-active-branch svg[b-rln6tok2wu] { color: var(--bm-accent, #4f7cff); flex: none; }

.sc-sel-dot[b-rln6tok2wu] {
    display: inline-block;
    width: 7px; height: 7px;
    border-radius: 50%;
    background: var(--bm-accent, #4f7cff);
    margin-right: 6px;
    vertical-align: middle;
}

/* ── chips ── */
.sc-chip[b-rln6tok2wu] {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    padding: 1px 8px;
    border-radius: 999px;
    font-size: 11px;
    font-weight: 600;
    line-height: 18px;
    white-space: nowrap;
    border: 1px solid transparent;
}

.sc-chip-ok[b-rln6tok2wu]       { background: rgba(46, 160, 67, .12);  color: #2ea043; border-color: rgba(46, 160, 67, .3); }
.sc-chip-modified[b-rln6tok2wu] { background: rgba(210, 153, 34, .12); color: #b8860b; border-color: rgba(210, 153, 34, .35); }
.sc-chip-warn[b-rln6tok2wu]     { background: rgba(255, 140, 0, .12);  color: #d2691e; border-color: rgba(255, 140, 0, .3); }
.sc-chip-danger[b-rln6tok2wu]   { background: rgba(248, 81, 73, .12);  color: #d1242f; border-color: rgba(248, 81, 73, .3); }
.sc-chip-info[b-rln6tok2wu]     { background: rgba(9, 105, 218, .1);   color: #0969da; border-color: rgba(9, 105, 218, .25); }

/* ── commit kind badges ── */
.sc-kind[b-rln6tok2wu] {
    display: inline-block;
    min-width: 64px;
    text-align: center;
    padding: 1px 8px;
    border-radius: 4px;
    font-size: 10.5px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .03em;
}

.sc-kind-import[b-rln6tok2wu] { background: rgba(9, 105, 218, .12);   color: #0969da; }
.sc-kind-manual[b-rln6tok2wu] { background: rgba(46, 160, 67, .12);   color: #2ea043; }
.sc-kind-auto[b-rln6tok2wu]   { background: rgba(110, 118, 129, .12); color: #6e7681; }
.sc-kind-safety[b-rln6tok2wu] { background: rgba(255, 140, 0, .14);   color: #d2691e; }
.sc-kind-merge[b-rln6tok2wu]  { background: rgba(130, 80, 223, .12);  color: #8250df; }
.sc-kind-cherry[b-rln6tok2wu] { background: rgba(191, 57, 137, .12);  color: #bf3989; }

/* ── history list ── */
.sc-history[b-rln6tok2wu] {
    list-style: none;
    margin: 0;
    padding: 4px 0;
    max-height: 70vh;
    overflow: auto;
}

.sc-commit[b-rln6tok2wu] {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 7px 14px;
    border-bottom: .5px solid var(--bm-line, #e6e8eb);
    font-size: 12.5px;
}

.sc-commit:hover[b-rln6tok2wu] { background: rgba(127, 127, 127, .05); }

.sc-fold[b-rln6tok2wu] { cursor: pointer; color: var(--bm-ink-3, #777); }

.sc-indent[b-rln6tok2wu] { padding-left: 34px; }

.sc-id[b-rln6tok2wu] { font-size: 11.5px; color: var(--bm-ink-3, #777); }

.sc-msg[b-rln6tok2wu] {
    flex: 1;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    min-width: 80px;
}

.sc-actions[b-rln6tok2wu] { display: inline-flex; gap: 6px; }

/* ── modals ── */
.sc-overlay[b-rln6tok2wu] {
    position: fixed;
    inset: 0;
    background: rgba(0, 0, 0, .45);
    z-index: 1000;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 24px;
}

.sc-modal[b-rln6tok2wu] {
    background: var(--bm-surface, #fff);
    border-radius: 10px;
    box-shadow: 0 12px 40px rgba(0, 0, 0, .3);
    padding: 20px;
    width: min(560px, 100%);
    max-height: 90vh;
    overflow: auto;
}

.sc-modal-wide[b-rln6tok2wu] { width: min(860px, 100%); }

.sc-modal-full[b-rln6tok2wu] {
    width: min(1500px, 96vw);
    height: 92vh;
    padding: 12px;
    position: relative;
    display: flex;
    flex-direction: column;
}

.sc-modal-body[b-rln6tok2wu] { flex: 1; overflow: auto; min-height: 0; }

/* ComponentDiff hosted in the full-size modal: neutralize its page-level sizing
   (viewport height / centered max-width / container padding) — the dialog owns
   the box, and the diff's internal panes do their own scrolling. */
.sc-modal-body[b-rln6tok2wu]  .cd-page {
    height: 100%;
    max-width: none;
    margin: 0;
    padding: 0;
}

/* Keep the head row's trailing controls clear of the absolute close button. */
.sc-modal-body[b-rln6tok2wu]  .cd-page-head {
    padding-right: 40px;
}

.sc-modal-close[b-rln6tok2wu] {
    position: absolute;
    top: 10px;
    right: 12px;
    z-index: 5;
    border: none;
    background: transparent;
    font-size: 16px;
    cursor: pointer;
    color: var(--bm-ink-3, #777);
}

.sc-scroll[b-rln6tok2wu] { overflow: auto; border: .5px solid var(--bm-line, #e6e8eb); border-radius: 6px; }
/* /Components/Pages/Projects/PullRequestDetail.razor.rz.scp.css */
/* PR detail — chip + modal classes mirror ProjectSourceControl's sc-* family (scoped CSS
   doesn't cross pages); pr-* classes are page-specific. */

.sc-chip[b-y1xgw0jo9c] {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    padding: 1px 8px;
    border-radius: 999px;
    font-size: 11px;
    font-weight: 600;
    line-height: 18px;
    white-space: nowrap;
    border: 1px solid transparent;
}

.sc-chip-ok[b-y1xgw0jo9c]       { background: rgba(46, 160, 67, .12);  color: #2ea043; border-color: rgba(46, 160, 67, .3); }
.sc-chip-modified[b-y1xgw0jo9c] { background: rgba(210, 153, 34, .12); color: #b8860b; border-color: rgba(210, 153, 34, .35); }
.sc-chip-warn[b-y1xgw0jo9c]     { background: rgba(255, 140, 0, .12);  color: #d2691e; border-color: rgba(255, 140, 0, .3); }
.sc-chip-danger[b-y1xgw0jo9c]   { background: rgba(248, 81, 73, .12);  color: #d1242f; border-color: rgba(248, 81, 73, .3); }
.sc-chip-info[b-y1xgw0jo9c]     { background: rgba(130, 80, 223, .12); color: #8250df; border-color: rgba(130, 80, 223, .25); }

.sc-overlay[b-y1xgw0jo9c] {
    position: fixed;
    inset: 0;
    background: rgba(0, 0, 0, .45);
    z-index: 1000;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 24px;
}

.sc-modal[b-y1xgw0jo9c] {
    background: var(--bm-surface, #fff);
    border-radius: 10px;
    box-shadow: 0 12px 40px rgba(0, 0, 0, .3);
    padding: 20px;
    width: min(560px, 100%);
    max-height: 90vh;
    overflow: auto;
}

.sc-modal-full[b-y1xgw0jo9c] {
    width: min(1500px, 96vw);
    height: 92vh;
    padding: 12px;
    position: relative;
    display: flex;
    flex-direction: column;
}

.sc-modal-body[b-y1xgw0jo9c] { flex: 1; overflow: auto; min-height: 0; }

/* ComponentDiff hosted in the full-size modal: neutralize its page-level sizing
   (viewport height / centered max-width / container padding) — the dialog owns
   the box, and the diff's internal panes do their own scrolling. */
.sc-modal-body[b-y1xgw0jo9c]  .cd-page {
    height: 100%;
    max-width: none;
    margin: 0;
    padding: 0;
}

/* Keep the head row's trailing controls clear of the absolute close button. */
.sc-modal-body[b-y1xgw0jo9c]  .cd-page-head {
    padding-right: 40px;
}

.sc-modal-close[b-y1xgw0jo9c] {
    position: absolute;
    top: 10px;
    right: 12px;
    z-index: 5;
    border: none;
    background: transparent;
    font-size: 16px;
    cursor: pointer;
    color: var(--bm-ink-3, #777);
}

.sc-scroll[b-y1xgw0jo9c] { overflow: auto; border: .5px solid var(--bm-line, #e6e8eb); border-radius: 6px; }

/* conflict pick radios under a conflicted row */
.pr-pick-row[b-y1xgw0jo9c] {
    display: flex;
    gap: 18px;
    flex-wrap: wrap;
    padding: 2px 0 8px;
}

.pr-pick[b-y1xgw0jo9c] {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font-size: 12.5px;
    cursor: pointer;
}

/* AI summary markdown body */
.pr-markdown[b-y1xgw0jo9c] { font-size: 13px; }
.pr-markdown[b-y1xgw0jo9c]  h1, .pr-markdown[b-y1xgw0jo9c]  h2, .pr-markdown[b-y1xgw0jo9c]  h3 { font-size: 14px; margin: 10px 0 4px; }
.pr-markdown[b-y1xgw0jo9c]  p { margin: 4px 0; }
.pr-markdown[b-y1xgw0jo9c]  ul { margin: 4px 0; padding-left: 20px; }
.pr-markdown[b-y1xgw0jo9c]  code { background: rgba(127, 127, 127, .12); padding: 0 4px; border-radius: 3px; font-size: 12px; }

.pr-comment[b-y1xgw0jo9c] {
    border-top: .5px solid var(--bm-line, #e6e8eb);
    padding: 8px 0;
}
/* /Components/Pages/Review/ProcessReview.razor.rz.scp.css */
/* ── Finding-viewer dialog ────────────────────────────────────────────────
   Full-bleed modal that hosts the Component Viewer when a reviewer clicks a
   finding, and the Starter rules library dialog. Sized to fill almost the
   entire viewport so the diagram has room, but kept inside a framed panel so
   it still reads as a dialog. (The custom-rule editor has its own scoped copy
   in RuleEditorDialog.razor.css.) */
.review-viewer-backdrop[b-qcfi692n2h] {
    position: fixed;
    inset: 0;
    background: rgba(0, 0, 0, 0.55);
    z-index: 1040;
}

.review-viewer-dialog[b-qcfi692n2h] {
    position: fixed;
    top: 2vh;
    left: 2vw;
    width: 96vw;
    height: 96vh;
    background: var(--surface-card);
    border: 1px solid var(--border-soft);
    border-radius: var(--radius-lg);
    box-shadow: 0 24px 64px rgba(0, 0, 0, 0.45);
    display: flex;
    flex-direction: column;
    z-index: 1050;
    overflow: hidden;
}

.review-viewer-dialog-header[b-qcfi692n2h] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0.75rem 1rem;
    border-bottom: 1px solid var(--border-soft);
    background: var(--surface-elevated, var(--surface-card));
}

.review-viewer-dialog-title[b-qcfi692n2h] {
    font-weight: 600;
    color: var(--ink-primary);
}

.review-viewer-dialog-body[b-qcfi692n2h] {
    flex: 1 1 auto;
    overflow: auto;
    padding: 0;
    min-height: 0;
}

/* ComponentViewer hosted in the dialog: neutralize its page-level sizing
   (viewport height / centered max-width / container padding) — the dialog
   owns the box, and the viewer's canvas does its own scrolling. */
.review-viewer-dialog-body[b-qcfi692n2h]  .cv-page {
    height: 100%;
    max-width: none;
    margin: 0;
    padding: 10px 14px 14px;
}

/* Starter-rules dialog: a reading-width centered panel, not the full-bleed
   frame the component viewer needs for its diagram. */
.review-viewer-dialog.review-starter-dialog[b-qcfi692n2h] {
    left: 50%;
    transform: translateX(-50%);
    width: min(880px, 94vw);
    top: 4vh;
    height: 92vh;
}
/* /Components/Pages/Review/RuleEditorDialog.razor.rz.scp.css */
/* ── Dialog shell ─────────────────────────────────────────────────────────
   The backdrop/dialog base styles are duplicated from the page's scoped sheet
   because scoped CSS does not cascade across components — the editor must be
   self-contained so it renders identically wherever it is hosted. */
.review-viewer-backdrop[b-1cftmstur4] {
    position: fixed;
    inset: 0;
    background: rgba(0, 0, 0, 0.55);
    z-index: 1040;
}

.review-viewer-dialog[b-1cftmstur4] {
    position: fixed;
    background: var(--surface-card);
    border: 1px solid var(--border-soft);
    border-radius: var(--radius-lg);
    box-shadow: 0 24px 64px rgba(0, 0, 0, 0.45);
    display: flex;
    flex-direction: column;
    z-index: 1050;
    overflow: hidden;
}

.review-viewer-dialog-header[b-1cftmstur4] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    border-bottom: 1px solid var(--border-soft);
    background: var(--surface-elevated, var(--surface-card));
}

.review-viewer-dialog-title[b-1cftmstur4] {
    font-weight: 600;
    color: var(--ink-primary);
}

.review-viewer-dialog-body[b-1cftmstur4] {
    flex: 1 1 auto;
    overflow: auto;
}

/* Custom-rule editor variant — centered, fixed-width. */
.review-viewer-dialog.bm-script-dialog[b-1cftmstur4] {
    width: min(960px, 96vw);
    height: auto;
    max-height: 92vh;
    top: 50%;
    left: 50%;
    right: auto;
    bottom: auto;
    transform: translate(-50%, -50%);
}

.review-viewer-dialog.bm-script-dialog .review-viewer-dialog-header[b-1cftmstur4] {
    padding: 14px 24px;
}

.review-viewer-dialog.bm-script-dialog .review-viewer-dialog-body[b-1cftmstur4] {
    padding: 20px 28px;
}

.review-viewer-dialog.bm-script-dialog .bm-script-dialog-footer[b-1cftmstur4] {
    padding: 14px 28px;
}
/* /Components/Shared/StarterRulesLibrary.razor.rz.scp.css */
/* Starter-rules browse dialog body. Uses the global bm-* design tokens so the
   dialog reads as part of the app, not a bootstrap leftover. */

.slib[b-qy8shguger] {
    display: flex;
    flex-direction: column;
    min-height: 0;
}

/* ── Toolbar: search + pack pills + count ───────────────────────────────── */
.slib-toolbar[b-qy8shguger] {
    display: flex;
    align-items: center;
    gap: 10px;
    flex-wrap: wrap;
    padding-bottom: 12px;
    margin-bottom: 12px;
    border-bottom: .5px solid var(--bm-line-2);
}

.slib-search[b-qy8shguger] {
    position: relative;
    flex: 1;
    min-width: 200px;
    max-width: 340px;
}

.slib-search svg[b-qy8shguger] {
    position: absolute;
    left: 10px;
    top: 50%;
    transform: translateY(-50%);
    color: var(--bm-ink-3);
    pointer-events: none;
}

.slib-search input[b-qy8shguger] {
    width: 100%;
    height: 30px;
    padding-left: 30px;
    font-size: 12.5px;
}

.slib-packs[b-qy8shguger] {
    display: flex;
    align-items: center;
    gap: 4px;
    flex-wrap: wrap;
}

.slib-pack[b-qy8shguger] {
    height: 26px;
    padding: 0 10px;
    border-radius: 99px;
    border: .5px solid var(--bm-line-2);
    background: transparent;
    color: var(--bm-ink-2);
    font: inherit;
    font-size: 12px;
    font-weight: 500;
    cursor: pointer;
}

.slib-pack:hover[b-qy8shguger] { background: var(--bm-surface-2); }

.slib-pack.active[b-qy8shguger] {
    background: var(--bm-ink);
    color: var(--bm-bg);
    border-color: transparent;
}

.slib-count[b-qy8shguger] {
    margin-left: auto;
    font-size: 12px;
    color: var(--bm-ink-3);
    white-space: nowrap;
}

/* ── Rule rows ──────────────────────────────────────────────────────────── */
.slib-list[b-qy8shguger] {
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.slib-rule[b-qy8shguger] {
    border: .5px solid var(--bm-line-2);
    border-radius: var(--bm-radius);
    background: var(--bm-surface);
    padding: 12px 14px;
}

.slib-rule.installed[b-qy8shguger] {
    border-color: color-mix(in oklab, var(--bm-ok) 35%, var(--bm-line-2));
}

.slib-rule-head[b-qy8shguger] {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 12px;
}

.slib-rule-meta[b-qy8shguger] { min-width: 0; }

.slib-rule-title-row[b-qy8shguger] {
    display: flex;
    align-items: center;
    gap: 8px;
    flex-wrap: wrap;
}

.slib-rule-title[b-qy8shguger] {
    font-weight: 600;
    font-size: 13.5px;
    color: var(--bm-ink);
}

.slib-rule-id[b-qy8shguger] {
    display: inline-block;
    margin-top: 3px;
    font-family: var(--bm-font-mono);
    font-size: 11.5px;
    color: var(--bm-ink-3);
}

.slib-rule-actions[b-qy8shguger] {
    display: flex;
    align-items: center;
    gap: 6px;
    flex-shrink: 0;
}

.slib-remove-confirm[b-qy8shguger] {
    color: var(--bm-critical);
    border-color: color-mix(in oklab, var(--bm-critical) 40%, var(--bm-line-2));
    background: color-mix(in oklab, var(--bm-critical) 8%, var(--bm-surface));
}

.slib-rule-what[b-qy8shguger] {
    margin: 8px 0 0 0;
    font-size: 12.5px;
    line-height: 1.5;
    color: var(--bm-ink-2);
}

.slib-empty[b-qy8shguger] {
    padding: 28px;
    text-align: center;
    color: var(--bm-ink-3);
    font-size: 13px;
}

/* ── Collapsed-by-default code preview ──────────────────────────────────── */
.slib-code-toggle[b-qy8shguger] {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    margin-top: 8px;
    padding: 0;
    border: 0;
    background: transparent;
    color: var(--bm-ink-3);
    font: inherit;
    font-size: 12px;
    font-weight: 500;
    cursor: pointer;
}

.slib-code-toggle:hover[b-qy8shguger] { color: var(--bm-ink); }

.slib-code-box[b-qy8shguger] {
    position: relative;
    margin-top: 8px;
    border: .5px solid var(--bm-line-2);
    border-radius: 8px;
    background: var(--bm-surface-2);
    overflow: hidden;
}

.slib-code-box pre[b-qy8shguger] {
    margin: 0;
    padding: 10px 40px 10px 12px;
    max-height: 320px;
    overflow: auto;
    font-family: var(--bm-font-mono);
    font-size: 12px;
    line-height: 1.55;
    color: var(--bm-ink);
    white-space: pre;
}

/* Copy icon floats inside the code block (top-right) instead of a header button. */
.slib-copy[b-qy8shguger] {
    position: absolute;
    top: 6px;
    right: 6px;
    width: 28px;
    height: 28px;
    display: grid;
    place-items: center;
    border-radius: 7px;
    border: .5px solid var(--bm-line-2);
    background: var(--bm-surface);
    color: var(--bm-ink-3);
    cursor: pointer;
}

.slib-copy:hover[b-qy8shguger] { color: var(--bm-ink); background: var(--bm-surface-2); }

/* ── Syntax highlighting (spans injected via MarkupString need ::deep) ──── */
.slib-code-box[b-qy8shguger]  .tok-com { color: var(--bm-ink-3); font-style: italic; }
.slib-code-box[b-qy8shguger]  .tok-str { color: var(--bm-ok); }
.slib-code-box[b-qy8shguger]  .tok-kw  { color: var(--bm-accent); }
.slib-code-box[b-qy8shguger]  .tok-num { color: var(--bm-warn); }
.slib-code-box[b-qy8shguger]  .tok-re  { color: var(--bm-warn); }
.slib-code-box[b-qy8shguger]  .tok-bi  { color: var(--bm-info); }
/* /Components/Shared/XmlLineDiff.razor.rz.scp.css */
.xd-empty[b-hh66lp9mi1] {
    padding: 1.5rem;
    text-align: center;
    color: var(--ink-muted);
    font-size: 0.82rem;
}

.xd-toolbar[b-hh66lp9mi1] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 6px 12px;
    border-bottom: 1px solid var(--border-soft);
    background: var(--surface-page);
}

.xd-stats[b-hh66lp9mi1] {
    display: inline-flex;
    gap: 10px;
    font-weight: 700;
    font-size: 0.75rem;
    font-family: 'Courier New', monospace;
}

.xd-stat-add[b-hh66lp9mi1] { color: var(--added-fg); }
.xd-stat-del[b-hh66lp9mi1] { color: var(--deleted-fg); }
.xd-stat-mod[b-hh66lp9mi1] { color: var(--modified-fg); }

.xd-truncated[b-hh66lp9mi1] {
    font-family: inherit;
    font-weight: 600;
    font-size: 0.7rem;
    color: var(--ink-muted);
    border: 1px dashed var(--border-strong);
    border-radius: 6px;
    padding: 1px 6px;
}

.xd-toggle[b-hh66lp9mi1] {
    display: inline-flex;
    background: var(--surface-muted);
    padding: 3px;
    border-radius: 8px;
    gap: 2px;
}

.xd-toggle-btn[b-hh66lp9mi1] {
    border: none;
    background: transparent;
    font-size: 0.72rem;
    font-weight: 700;
    color: var(--ink-secondary);
    padding: 3px 10px;
    border-radius: 6px;
    cursor: pointer;
    transition: background 0.12s, color 0.12s;
}

.xd-toggle-btn.active[b-hh66lp9mi1] {
    background: var(--bm-surface);
    color: var(--ink-primary);
    box-shadow: 0 1px 2px rgba(0,0,0,0.08);
}

.xd-toggle-btn:disabled[b-hh66lp9mi1] {
    opacity: 0.45;
    cursor: not-allowed;
}

.xd-scroll[b-hh66lp9mi1] {
    max-height: 70vh;
    overflow: auto;
}

.xd-table[b-hh66lp9mi1] {
    width: 100%;
    border-collapse: collapse;
    table-layout: fixed;
    font-family: 'Courier New', monospace;
    font-size: 0.72rem;
}

.xd-col-ln[b-hh66lp9mi1] { width: 46px; }

.xd-head th[b-hh66lp9mi1] {
    position: sticky;
    top: 0;
    z-index: 2;
    background: var(--surface-page);
    border-bottom: 1px solid var(--border-soft);
    font-size: 0.72rem;
    font-weight: 700;
    color: var(--ink-secondary);
    padding: 6px 10px;
    text-align: center;
}

.xd-ln[b-hh66lp9mi1] {
    text-align: right;
    padding: 0 8px;
    color: var(--ink-muted);
    user-select: none;
    background: var(--surface-page);
    border-right: 1px solid var(--border-soft);
    vertical-align: top;
}

.xd-code[b-hh66lp9mi1] {
    padding: 0 8px;
    white-space: pre-wrap;
    word-break: break-all;
    vertical-align: top;
    color: var(--ink-primary);
}

.xd-code.xd-del[b-hh66lp9mi1] { background: var(--deleted-bg); }
.xd-code.xd-add[b-hh66lp9mi1] { background: var(--added-bg); }

.xd-gap td[b-hh66lp9mi1] {
    text-align: center;
    padding: 3px;
    font-size: 0.7rem;
    cursor: pointer;
    color: var(--ink-muted);
    background: var(--surface-muted);
    border-top: 1px dashed var(--border-soft);
    border-bottom: 1px dashed var(--border-soft);
    user-select: none;
}

.xd-gap:hover td[b-hh66lp9mi1] { color: var(--accent); }

/* Syntax highlighting — spans injected via MarkupString need ::deep */
.xd-code[b-hh66lp9mi1]  .tok-com { color: var(--ink-muted); font-style: italic; }
.xd-code[b-hh66lp9mi1]  .tok-str { color: var(--added-fg); }
.xd-code[b-hh66lp9mi1]  .tok-kw  { color: var(--accent); font-weight: 700; }
.xd-code[b-hh66lp9mi1]  .tok-num { color: var(--modified-fg); }
.xd-code[b-hh66lp9mi1]  .tok-re  { color: var(--modified-fg); }
.xd-code[b-hh66lp9mi1]  .tok-bi  { color: var(--deleted-fg); }