/* ============================================================
   Path-IQ — Carbon Design System g100 (dark)
   IBM Plex Sans · Gray 100 base · Blue-60 accent
   Follows Carbon v11 design tokens exactly.
   ============================================================ */

@import url('https://fonts.googleapis.com/css2?family=IBM+Plex+Sans:ital,wght@0,300;0,400;0,500;0,600;0,700;1,400&family=IBM+Plex+Mono:wght@400;500&display=swap');

/* ══════════════════════════════════════════════════════
   CARBON v11 DESIGN TOKENS — g100 (Dark) theme
══════════════════════════════════════════════════════ */
:root {
    /* ── Gray scale ── */
    --cds-gray-100: #161616;
    --cds-gray-90: #262626;
    --cds-gray-80: #393939;
    --cds-gray-70: #525252;
    --cds-gray-60: #6f6f6f;
    --cds-gray-50: #8d8d8d;
    --cds-gray-40: #a8a8a8;
    --cds-gray-30: #c6c6c6;
    --cds-gray-20: #e0e0e0;
    --cds-gray-10: #f4f4f4;

    /* ── Blue ── */
    --cds-blue-70: #0043ce;
    --cds-blue-60: #0f62fe;
    --cds-blue-50: #4589ff;
    --cds-blue-40: #78a9ff;
    --cds-blue-30: #a6c8ff;
    --cds-blue-10: #edf5ff;

    /* ── Status ── */
    --cds-red-60: #da1e28;
    --cds-red-40: #ff8389;
    --cds-yellow-30: #f1c21b;
    --cds-green-50: #198038;
    --cds-green-40: #42be65;
    --cds-teal-50: #007d79;
    --cds-teal-40: #3ddbd9;
    --cds-purple-60: #6929c4;
    --cds-purple-40: #a56eff;

    /* ── Semantic accents ── */
    --emerald: #10b981;
    --amber: #f59e0b;
    --rose: #f43f5e;

    /* ── Carbon Layer tokens (g100) ── */
    --cds-background: #161616;
    --cds-layer-01: #262626;
    --cds-layer-02: #393939;
    --cds-layer-03: #525252;
    --cds-layer-hover-01: #333333;
    --cds-layer-hover-02: #474747;
    --cds-layer-selected-01: #525252;
    --cds-layer-accent-01: #393939;

    /* ── Carbon Interactive tokens ── */
    --cds-interactive: #4589ff;
    --cds-focus: #ffffff;
    --cds-focus-inset: #0f62fe;
    --cds-link-primary: #78a9ff;
    --cds-link-primary-hover: #a6c8ff;

    /* ── Carbon Text tokens ── */
    --cds-text-primary: #ffffff;
    --cds-text-secondary: #e0e0e0;
    --cds-text-helper: #b0b0b0;
    --cds-text-disabled: #7a7a7a;
    --cds-text-on-color: #ffffff;
    --cds-text-placeholder: #a0a0a0;

    /* ── Carbon Icon tokens ── */
    --cds-icon-primary: #f4f4f4;
    --cds-icon-secondary: #8d8d8d;
    --cds-icon-disabled: #525252;

    /* ── Carbon Border tokens ── */
    --cds-border-subtle-01: #393939;
    --cds-border-subtle-02: #525252;
    --cds-border-strong-01: #6f6f6f;
    --cds-border-strong-02: #8d8d8d;
    --cds-border-interactive: #4589ff;
    --cds-border-disabled: #393939;

    /* ── Carbon Support tokens ── */
    --cds-support-error: #ff8389;
    --cds-support-warning: #f1c21b;
    --cds-support-success: #42be65;
    --cds-support-info: #78a9ff;

    /* ── Legacy shorthands (keep JS working) ── */
    --gray-100: var(--cds-gray-100);
    --gray-90: var(--cds-gray-90);
    --gray-80: var(--cds-gray-80);
    --gray-70: var(--cds-gray-70);
    --gray-60: var(--cds-gray-60);
    --gray-50: var(--cds-gray-50);
    --gray-40: var(--cds-gray-40);
    --gray-30: var(--cds-gray-30);
    --gray-20: var(--cds-gray-20);
    --gray-10: var(--cds-gray-10);
    --blue-70: var(--cds-blue-70);
    --blue-60: var(--cds-blue-60);
    --blue-50: var(--cds-blue-50);
    --blue-40: var(--cds-blue-40);
    --blue-30: var(--cds-blue-30);
    --blue-10: var(--cds-blue-10);
    --red-60: var(--cds-red-60);
    --red-40: var(--cds-red-40);
    --yellow-30: var(--cds-yellow-30);
    --green-50: var(--cds-green-50);
    --green-40: var(--cds-green-40);
    --teal-50: var(--cds-teal-50);
    --teal-40: var(--cds-teal-40);
    --purple-60: var(--cds-purple-60);
    --purple-40: var(--cds-purple-40);
    --bg: var(--cds-background);
    --bg-ui: var(--cds-layer-01);
    --bg-hover: var(--cds-layer-hover-01);
    --border-subtle: var(--cds-border-subtle-01);
    --border-strong: var(--cds-border-strong-01);
    --border-interactive: var(--cds-border-interactive);
    --text-primary: var(--cds-text-primary);
    --text-secondary: var(--cds-text-secondary);
    --text-helper: var(--cds-text-helper);
    --text-disabled: var(--cds-text-disabled);
    --text-on-color: var(--cds-text-on-color);
    --icon-primary: var(--cds-icon-primary);
    --icon-secondary: var(--cds-icon-secondary);
    --link-primary: var(--cds-link-primary);
    --interactive: var(--cds-interactive);
    --focus: var(--cds-focus);

    /* ── Layout ── */
    --nav-h: 48px;
    --sidebar-w: 256px;
    --ai-panel-w: 340px;

    /* ── Carbon 8px spacing scale ── */
    --spacing-01: 2px;
    --spacing-02: 4px;
    --spacing-03: 8px;
    --spacing-04: 12px;
    --spacing-05: 16px;
    --spacing-06: 24px;
    --spacing-07: 32px;
    --spacing-08: 40px;
    --spacing-09: 48px;
    --spacing-10: 64px;

    /* ── Typography ── */
    --font: 'IBM Plex Sans', 'Helvetica Neue', Arial, sans-serif;
    --font-mono: 'IBM Plex Mono', 'Menlo', 'Courier New', monospace;

    /* ── Carbon motion tokens ── */
    --tr-fast: 70ms cubic-bezier(0.2, 0, 0.38, 0.9);
    --tr-moderate: 150ms cubic-bezier(0.2, 0, 0.38, 0.9);
    --tr-slow: 240ms cubic-bezier(0.2, 0, 0.38, 0.9);
    --tr: var(--tr-fast);

    /* ── Typography Scale ── */
    --cds-type-body-compact-01-font-size: 0.875rem;
    --cds-type-body-compact-01-letter-spacing: 0.16px;
    --cds-type-label-01-font-size: 0.75rem;
    --cds-type-label-01-letter-spacing: 0.32px;
    --cds-type-productive-heading-01-font-size: 0.875rem;
    --cds-type-productive-heading-01-font-weight: 600;
    --cds-type-productive-heading-02-font-size: 1rem;
    --cds-type-productive-heading-02-font-weight: 600;
}

/* ══════════════════════════════════════
   CARBON RESET
══════════════════════════════════════ */
*,
*::before,
*::after {
    box-sizing: border-box;
    margin: 0;
    padding: 0;
}

html,
body {
    height: 100%;
    overflow: hidden;
    font-family: var(--font);
    background: var(--cds-background);
    color: var(--cds-text-primary);
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    font-size: 14px;
    line-height: 1.42857;
    /* Carbon body-compact-01 */
    font-weight: 400;
}

/* Carbon focus ring — white 2px outline */
:focus-visible {
    outline: 2px solid var(--cds-focus);
    outline-offset: -2px;
}

button:focus-visible,
a:focus-visible,
input:focus-visible,
select:focus-visible {
    outline: 2px solid var(--cds-focus);
    outline-offset: -2px;
}

/* ── CARBON SHELL HEADER ── */
/* ── CARBON SHELL HEADER (cds-ui-shell-header) ── */
.app-nav {
    height: var(--nav-h);
    /* Carbon: 48px exactly */
    background: var(--cds-layer-01);
    border-bottom: 1px solid var(--cds-border-subtle-01);
    display: flex;
    align-items: center;
    padding: 0;
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    z-index: 9000;
    /* Carbon Shell uses no shadow, only border-bottom */
}

/* Carbon Header Name */
.app-nav-logo {
    display: flex;
    align-items: center;
    height: 100%;
    width: var(--sidebar-w);
    padding: 0 var(--spacing-05);
    border-right: 1px solid var(--cds-border-subtle-01);
    flex-shrink: 0;
    text-decoration: none;
    /* Carbon: header name has a 2px border-bottom highlight on hover */
    transition: background var(--tr-fast);
}

.app-nav-logo:hover {
    background: var(--cds-layer-hover-01);
}

.app-nav-logo svg {
    flex-shrink: 0;
}

/* Carbon productive-heading-02 */
.app-nav-brand {
    font-size: 14px;
    font-weight: 600;
    color: var(--cds-text-primary);
    letter-spacing: 0;
    margin-left: var(--spacing-03);
    font-family: var(--font);
}

.app-nav-brand strong {
    font-weight: 600;
}

/* Carbon Header Navigation */
.app-nav-tabs {
    display: flex;
    align-items: center;
    height: 100%;
    flex: 1;
    margin-left: 0;
}

/* Carbon Header Nav Item — body-compact-01, 48px height */
.nav-tab {
    display: flex;
    align-items: center;
    gap: var(--spacing-02);
    padding: 0 var(--spacing-05);
    height: 100%;
    border: none;
    background: none;
    color: var(--cds-text-secondary);
    /* Carbon: text-02 on inactive */
    font-size: 14px;
    font-weight: 400;
    cursor: pointer;
    font-family: var(--font);
    transition: background var(--tr-fast), color var(--tr-fast);
    border-bottom: 2px solid transparent;
    position: relative;
    white-space: nowrap;
    letter-spacing: 0;
}

.nav-tab:hover {
    background: var(--cds-layer-hover-01);
    color: var(--cds-text-primary);
}

.nav-tab.active {
    background: var(--cds-background);
    /* Carbon: active nav goes to background color */
    color: var(--cds-text-primary);
    border-bottom-color: var(--cds-interactive);
    /* Carbon: Blue-50 on dark */
}

.nav-tab svg {
    flex-shrink: 0;
    color: inherit;
}

/* Carbon Tag — used for notification badges */
.nav-badge {
    background: var(--cds-blue-60);
    color: var(--cds-text-on-color);
    font-size: 11px;
    font-weight: 600;
    min-width: 16px;
    height: 16px;
    border-radius: 8px;
    padding: 0 4px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-family: var(--font-mono);
    letter-spacing: 0;
}

.nav-badge.urgent {
    background: var(--cds-red-60);
}

/* Carbon Header Global Actions panel (right side) */
.app-nav-right {
    display: flex;
    align-items: center;
    gap: var(--spacing-02);
    padding: 0 var(--spacing-05);
    margin-left: auto;
    height: 100%;
    border-left: 1px solid var(--cds-border-subtle-01);
    flex-shrink: 0;
}

/* Carbon helper text for the case ID */
.case-badge {
    font-size: 12px;
    color: var(--cds-text-secondary);
    font-family: var(--font-mono);
    letter-spacing: 0.16px;
    white-space: nowrap;
}

/* Carbon Header User Profile avatar */
.user-avatar {
    width: 32px;
    height: 32px;
    border-radius: 50%;
    background: var(--cds-blue-60);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 11px;
    font-weight: 600;
    color: var(--cds-text-on-color);
    cursor: pointer;
    font-family: var(--font);
    letter-spacing: 0.5px;
    flex-shrink: 0;
    transition: background var(--tr-fast);
}

.user-avatar:hover {
    background: var(--cds-blue-70);
}

.logout-btn {
    color: var(--cds-icon-secondary);
    width: 32px;
    height: 32px;
    transition: color var(--tr-fast), background var(--tr-fast);
}

.logout-btn:hover {
    color: var(--cds-red-40);
    background: var(--cds-layer-hover-01);
}



/* ── Carbon View container ── */
.view {
    display: none !important;
    height: calc(100vh - 48px) !important;
    margin-top: 48px !important;
    overflow-y: auto !important;
    background: #262626 !important; /* Carbon Layer 01 (g100) */
    position: relative !important;
    width: 100% !important;
    color: #ffffff !important;
}

.view.active {
    display: block !important;
}

/* ── Carbon WSI Viewer Layout ── */
.viewer-layout {
    display: flex;
    height: 100%;
    overflow: hidden;
}

/* ══════════════════════════════════════
   CARBON COMPONENTS v11
══════════════════════════════════════ */

/* ── Carbon Buttons ── */
.cds--btn {
    display: inline-flex;
    align-items: center;
    justify-content: space-between;
    padding: 0 16px;
    height: 32px;
    font-size: 14px;
    min-height: 2rem;
    font-family: inherit;
    cursor: pointer;
    border: 1px solid transparent;
    transition: background-color var(--tr-fast), border-color var(--tr-fast);
    text-decoration: none;
    line-height: 1;
    position: relative;
    border-radius: 0;
    /* Carbon core is sharp-edged */
}

.cds--btn--primary {
    background-color: var(--cds-blue-60);
    color: var(--cds-text-on-color);
}

.cds--btn--primary:hover {
    background-color: var(--cds-blue-70);
}

.cds--btn--primary:active {
    background-color: var(--cds-blue-80);
}

.cds--btn--secondary {
    background-color: var(--cds-gray-80);
    color: var(--cds-text-on-color);
}

.cds--btn--secondary:hover {
    background: var(--cds-gray-70);
}

.cds--btn--ghost {
    background: transparent;
    color: var(--cds-link-primary);
}

.cds--btn--ghost:hover {
    background: var(--cds-layer-hover-01);
    color: var(--cds-link-primary-hover);
}

.cds--btn:disabled {
    background-color: var(--cds-layer-03);
    color: var(--cds-text-disabled);
    cursor: not-allowed;
    border-color: transparent;
}

/* ── Carbon Tags ── */
.cds--tag {
    display: inline-flex;
    align-items: center;
    height: 1.5rem;
    /* 24px */
    padding: 0 8px;
    border-radius: 0.9375rem;
    /* Standard Carbon rounded-pill for Tag */
    font-size: 0.75rem;
    /* 12px */
    font-weight: 400;
    line-height: 1;
    white-space: nowrap;
    background-color: var(--cds-layer-03);
    color: var(--cds-text-primary);
    border: 1px solid transparent;
}

.cds--tag--blue {
    background-color: #d0e2ff;
    color: #002d9c;
}

/* Blue 20 bg, Blue 80 text in light, adjusted for dark */
.cds--tag--green {
    background-color: #defbe6;
    color: #005d5d;
}

.cds--tag--red {
    background-color: #fff1f1;
    color: #a2191f;
}

/* ── Carbon Inline Loading ── */
.cds--inline-loading {
    display: flex;
    align-items: center;
    gap: 8px;
    color: var(--cds-text-secondary);
}

.cds--loading {
    width: 2rem;
    height: 2rem;
}

.cds--loading--small {
    width: 1rem;
    height: 1rem;
}

.cds--loading__svg {
    transform-origin: center;
    animation: rotate 2s linear infinite;
}

.cds--loading__stroke {
    stroke: var(--cds-interactive);
    stroke-width: 8;
    stroke-linecap: round;
    fill: none;
    stroke-dasharray: 200;
    stroke-dashoffset: 200;
    animation: dash 1.5s ease-in-out infinite;
}

@keyframes rotate {
    100% {
        transform: rotate(360deg);
    }
}

@keyframes dash {
    0% {
        stroke-dashoffset: 200;
    }

    50% {
        stroke-dashoffset: 50;
        transform: rotate(45deg);
    }

    100% {
        stroke-dashoffset: 200;
        transform: rotate(360deg);
    }
}

:root {
    --admin-primary: var(--cds-blue-60);
}

.histo-brand rect {
    fill: var(--admin-primary);
    /* Primary admin color */
}

.nav-item.active {
    border-left-color: var(--admin-primary);
}

.stat-card.alert {
    border-bottom-color: var(--admin-primary);
}

.badge.purple {
    color: var(--cds-link-primary);
    background: rgba(15, 98, 254, 0.1);
}

.badge {
    display: inline-flex;
    align-items: center;
    padding: 2px 8px;
    border-radius: 99px;
    font-size: 11px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

.badge.blue {
    background: rgba(15, 98, 254, 0.1);
    color: var(--cds-link-primary);
}

.badge.orange {
    background: rgba(255, 131, 0, 0.1);
    color: #ff8300;
}

.badge.red {
    background: rgba(218, 30, 40, 0.1);
    color: var(--cds-support-error);
}

.badge.green {
    background: rgba(30, 128, 70, 0.1);
    color: var(--cds-support-success);
}

.header-actions .user-avatar {
    background: var(--admin-primary);
}

.view-header h1 {
    color: var(--admin-primary);
    font-size: 1.5rem;
    /* larger, more readable */
    font-weight: 600;
}

/* ── Carbon Tiles ── */
.cds--tile {
    background-color: var(--cds-layer-01);
    padding: var(--spacing-05);
    border: 1px solid transparent;
    transition: background-color var(--tr-fast);
}

.cds--tile--clickable {
    cursor: pointer;
}

.cds--tile--clickable:hover {
    background-color: var(--cds-layer-hover-01);
}

/* ── Carbon Typography Classes ── */
.heading-01 {
    font-size: var(--cds-type-productive-heading-01-font-size);
    font-weight: var(--cds-type-productive-heading-01-font-weight);
    line-height: 1.4;
}

.heading-02 {
    font-size: var(--cds-type-productive-heading-02-font-size);
    font-weight: var(--cds-type-productive-heading-02-font-weight);
    line-height: 1.4;
}

.label-01 {
    font-size: var(--cds-type-label-01-font-size);
    letter-spacing: var(--cds-type-label-01-letter-spacing);
    line-height: 1.4;
}

/* ── Carbon Skeleton / Shimmer ── */
.cds--skeleton {
    background: var(--cds-layer-03);
    position: relative;
    overflow: hidden;
}

.cds--skeleton::after {
    content: '';
    position: absolute;
    inset: 0;
    background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.05), transparent);
    transform: translateX(-100%);
    animation: shimmer 2s infinite;
}

@keyframes shimmer {
    100% {
        transform: translateX(100%);
    }
}

/* ── Carbon Data Table (Migrated from Histolab scope) ── */
.cds--data-table {
    width: 100%;
    table-layout: fixed;
    border-collapse: collapse;
    background: var(--cds-layer-01);
}

.cds--data-table th {
    background: var(--cds-layer-02);
    text-align: left;
    padding: var(--spacing-05) var(--spacing-06);
    font-size: 13px;
    font-weight: 600;
    color: var(--cds-text-primary);
    border-bottom: 1px solid var(--cds-border-subtle-01);
}

.cds--data-table td {
    padding: var(--spacing-05) var(--spacing-06);
    font-size: 14px;
    border-bottom: 1px solid var(--cds-border-subtle-01);
    color: var(--cds-text-secondary);
    transition: background var(--tr-fast);
}

.cds--data-table tr:hover td {
    background: var(--cds-layer-hover-01);
    color: var(--cds-text-primary);
}

.cds--data-table--zebra tbody tr:nth-child(even) td {
    background: var(--cds-layer-02);
}

/* ── Carbon Data Card General ── */
.stat-card {
    background: var(--cds-layer-01);
    padding: var(--spacing-07);
    /* increased padding for better spacing */
    display: flex;
    flex-direction: column;
    gap: var(--spacing-04);
    /* larger gap between elements */
    transition: background var(--tr-fast);
}

.stat-title {
    font-size: 12px;
    color: var(--cds-text-secondary);
    text-transform: uppercase;
    letter-spacing: 0.32px;
    font-weight: 600;
}

.stat-value {
    font-size: 2.5rem;
    font-weight: 300;
    font-family: var(--font-mono);
}

.stat-desc {
    font-size: 12px;
    color: var(--cds-text-helper);
}



/* ── CARBON SIDE PANEL (Left Navigation Panel) ── */

.sidebar {
    width: var(--sidebar-w);
    background: var(--cds-layer-01);
    border-right: 1px solid var(--cds-border-subtle-01);
    display: flex;
    flex-direction: column;
    overflow-y: auto;
    flex-shrink: 0;
    scrollbar-width: thin;
    scrollbar-color: var(--cds-layer-03) transparent;
    transition: width 0.25s ease, opacity 0.2s ease;
}

.sidebar.collapsed {
    width: 0 !important;
    min-width: 0 !important;
    overflow: hidden !important;
    opacity: 0;
    border-right: none;
    padding: 0;
}

.sidebar::-webkit-scrollbar {
    width: 4px;
}

.sidebar::-webkit-scrollbar-thumb {
    background: var(--cds-layer-03);
    border-radius: 0;
}

/* Carbon Panel header — label-01 type style */
.sidebar-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0 var(--spacing-05);
    border-bottom: 1px solid var(--cds-border-subtle-01);
    flex-shrink: 0;
    height: 40px;
    /* Carbon: 40px for secondary headers */
    background: var(--cds-layer-01);
}

/* Carbon label-01: 12/16px, 0.32px tracking, 600 */
.sidebar-title {
    font-size: 0.875rem;
    /* 14px for readability */
    font-weight: 600;
    letter-spacing: 0.32px;
    text-transform: uppercase;
    color: var(--cds-text-primary);
    font-family: var(--font);
}

/* Carbon Ghost Button (icon-only) */
.icon-btn {
    background: none;
    border: none;
    color: var(--cds-icon-secondary);
    cursor: pointer;
    padding: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: color var(--tr-fast), background var(--tr-fast);
    width: 32px;
    height: 32px;
    /* Carbon: no border radius on toolbars */
}

.icon-btn:hover {
    background: var(--cds-layer-hover-01);
    color: var(--cds-icon-primary);
}

/* Carbon File Uploader */
.upload-zone {
    margin: var(--spacing-04) var(--spacing-05);
    border: 1px dashed var(--cds-border-strong-01);
    background: var(--cds-layer-01);
    padding: var(--spacing-06) var(--spacing-04);
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: var(--spacing-03);
    cursor: pointer;
    transition: background var(--tr-fast), border-color var(--tr-fast);
    text-align: center;
}

.upload-zone:hover,
.upload-zone.drag-over {
    background: var(--cds-layer-hover-01);
    border-color: var(--cds-interactive);
}

.upload-zone svg {
    color: var(--cds-icon-secondary);
}

/* Carbon helper-text-01 — body-compact but muted */
.upload-label {
    font-size: 13px;
    color: var(--cds-text-secondary);
    line-height: 1.4;
}

.upload-label span {
    color: var(--cds-link-primary);
    cursor: pointer;
    text-decoration: underline;
}

/* Carbon label-01 */
.upload-formats {
    font-size: 11px;
    color: var(--cds-text-helper);
    font-family: var(--font-mono);
    letter-spacing: 0.32px;
    text-transform: uppercase;
}

/* Carbon Inline Progress Bar */
.upload-progress {
    margin: 0 var(--spacing-05) var(--spacing-03);
    padding: var(--spacing-04);
    background: var(--cds-layer-02);
    border-left: 3px solid var(--cds-interactive);
}

.progress-row {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: var(--spacing-03);
    font-size: 12px;
    color: var(--cds-text-primary);
}

.mono {
    font-family: var(--font-mono);
}

/* Carbon progress bar track */
.progress-track {
    height: 4px;
    background: var(--cds-layer-03);
}

.progress-fill {
    height: 100%;
    width: 0%;
    background: var(--cds-interactive);
    transition: width var(--tr-moderate);
}

.progress-status {
    font-size: 11px;
    color: var(--cds-text-helper);
    margin-top: var(--spacing-02);
}

/* Carbon Structured List (Slide List) */
.slide-list {
    flex: 1;
    display: flex;
    flex-direction: column;
    overflow-y: auto;
    max-height: 260px;
}

.empty-state {
    font-size: 12px;
    color: var(--cds-text-helper);
    padding: var(--spacing-05);
    text-align: center;
    font-style: italic;
}

/* Carbon Structured List Row */
.slide-item {
    display: flex;
    align-items: center;
    gap: var(--spacing-03);
    padding: var(--spacing-04) var(--spacing-05);
    cursor: pointer;
    border-left: 3px solid transparent;
    border-bottom: 1px solid var(--cds-border-subtle-01);
    transition: background var(--tr-fast);
    background: var(--cds-layer-01);
    min-height: 48px;
    /* Carbon: minimum 48px row height */
}

.slide-item:hover {
    background: var(--cds-layer-hover-01);
}

.slide-item.active {
    background: var(--cds-layer-02);
    border-left-color: var(--cds-interactive);
    /* Carbon: Blue-50 selection indicator */
}

.slide-thumb {
    width: 40px;
    height: 32px;
    object-fit: cover;
    flex-shrink: 0;
    border: 1px solid var(--cds-border-subtle-01);
}

.slide-thumb-ph {
    width: 40px;
    height: 32px;
    background: var(--cds-layer-02);
    border: 1px solid var(--cds-border-subtle-01);
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    color: var(--cds-icon-secondary);
}

.slide-info {
    flex: 1;
    min-width: 0;
    display: flex;
    flex-direction: column;
}

.slide-name {
    font-size: 13px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    color: var(--cds-text-primary);
    line-height: 1.4;
}

.slide-size {
    font-size: 11px;
    color: var(--cds-text-helper);
    font-family: var(--font-mono);
    letter-spacing: 0.16px;
}

.slide-delete-btn {
    opacity: 0;
    background: none;
    border: none;
    color: var(--cds-icon-secondary);
    cursor: pointer;
    width: 32px;
    height: 32px;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all var(--tr-fast);
    flex-shrink: 0;
}

.slide-delete-btn:hover {
    background: var(--cds-red-60) !important;
    color: #ffffff !important;
}

.slide-item:hover .slide-delete-btn {
    opacity: 1;
}

/* Carbon Structured List — Metadata */
.meta-panel {
    padding: 0 0 var(--spacing-03);
}

.meta-title {
    font-size: 11px;
    font-weight: 600;
    letter-spacing: 0.32px;
    text-transform: uppercase;
    color: var(--cds-text-secondary);
    padding: var(--spacing-04) var(--spacing-05) var(--spacing-02);
}

.meta-grid {
    border-top: 1px solid var(--cds-border-subtle-01);
}

.meta-row {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: var(--spacing-03) var(--spacing-05);
    border-bottom: 1px solid var(--cds-border-subtle-01);
    min-height: 40px;
}

.meta-key {
    font-size: 12px;
    color: var(--cds-text-secondary);
}

.meta-val {
    font-size: 12px;
    font-family: var(--font-mono);
    color: var(--cds-text-primary);
    text-align: right;
}

.meta-val.accent {
    color: var(--cds-link-primary);
}

/* ── VIEWER CORE ── */
.viewer-core {
    flex: 1;
    display: flex;
    flex-direction: column;
    overflow: hidden;
}

/* Carbon Toolbar (48px height, layer-01 bg) */
.viewer-topbar {
    height: 48px;
    /* Carbon toolbar: 48px */
    background: var(--cds-layer-01);
    border-bottom: 1px solid var(--cds-border-subtle-01);
    display: flex;
    align-items: center;
    padding: 0 var(--spacing-04);
    gap: var(--spacing-02);
    flex-shrink: 0;
}

.topbar-left {
    display: flex;
    align-items: center;
    gap: var(--spacing-03);
    padding-right: var(--spacing-05);
    border-right: 1px solid var(--cds-border-subtle-01);
    margin-right: var(--spacing-02);
    flex-shrink: 0;
}

.topbar-left-labels {
    display: flex;
    flex-direction: column;
}

/* Carbon productive-heading-01 */
.case-label {
    font-size: 12px;
    font-weight: 600;
    color: var(--cds-text-primary);
    font-family: var(--font-mono);
    letter-spacing: 0.32px;
    white-space: nowrap;
}

.mag-label {
    font-size: 11px;
    color: var(--cds-text-helper);
    letter-spacing: 0.16px;
    white-space: nowrap;
}

.topbar-sep {
    width: 1px;
    height: 24px;
    background: var(--cds-border-subtle-01);
    flex-shrink: 0;
    margin: 0 var(--spacing-02);
}


/* ── Hero Snapshot Button ── */
.snap-hero-btn {
    display: flex;
    align-items: center;
    gap: 6px;
    height: 32px;
    padding: 0 14px;
    background: linear-gradient(135deg, #0f62fe 0%, #6366f1 100%);
    border: none;
    color: #fff;
    font-size: 12px;
    font-weight: 700;
    font-family: var(--font);
    cursor: pointer;
    border-radius: 16px;
    letter-spacing: 0.3px;
    white-space: nowrap;
    flex-shrink: 0;
    position: relative;
    box-shadow: 0 0 0 0 rgba(99, 102, 241, 0.5);
    transition: transform 0.15s, box-shadow 0.15s;
    animation: snapPulse 2.8s ease-in-out infinite;
}

.snap-hero-btn:hover {
    transform: translateY(-1px);
    box-shadow: 0 4px 20px rgba(99, 102, 241, 0.55);
    animation: none;
}

.snap-hero-btn:active {
    transform: scale(0.97);
}

/* ── Immersive Hero Button ── */
.imm-hero-btn {
    display: flex;
    align-items: center;
    gap: 6px;
    height: 32px;
    padding: 0 14px;
    background: rgba(15, 98, 254, 0.1);
    border: 1px solid var(--blue-60);
    color: var(--blue-40);
    font-size: 12px;
    font-weight: 700;
    font-family: var(--font);
    cursor: pointer;
    border-radius: 16px;
    letter-spacing: 0.3px;
    white-space: nowrap;
    flex-shrink: 0;
    transition: all 0.15s;
    margin-left: var(--spacing-02);
}

.imm-hero-btn:hover {
    background: rgba(15, 98, 254, 0.2);
    border-color: var(--blue-50);
    color: var(--blue-30);
    transform: translateY(-1px);
    box-shadow: 0 4px 12px rgba(99, 102, 241, 0.2);
}

.imm-hero-btn:active {
    transform: scale(0.97);
}

/* subtle glow pulse so it catches the eye */
@keyframes snapPulse {
    0% {
        box-shadow: 0 0 0 0 rgba(99, 102, 241, 0.45);
    }

    60% {
        box-shadow: 0 0 0 7px rgba(99, 102, 241, 0);
    }

    100% {
        box-shadow: 0 0 0 0 rgba(99, 102, 241, 0);
    }
}

.topbar-center {
    display: flex;
    align-items: center;
    gap: var(--spacing-03);
    flex: 1;
}

.tool-group {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 2px;
}

.tool-group__label {
    font-size: 9px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.8px;
    color: var(--cds-text-helper);
    line-height: 1;
}

.tool-group__btns {
    display: flex;
    align-items: center;
    gap: 1px;
}

.tb-divider {
    width: 1px;
    height: 36px;
    background: var(--cds-border-subtle-01);
    margin: 0 var(--spacing-02);
    flex-shrink: 0;
    align-self: center;
}

.tb-tool.active {
    background: var(--cds-interactive) !important;
    color: var(--cds-text-on-color) !important;
    border-color: var(--cds-interactive) !important;
}

.slide-load-overlay {
    position: absolute;
    inset: 0;
    z-index: 50;
    background: var(--cds-background);
    display: flex;
    align-items: center;
    justify-content: center;
    transition: opacity 0.4s ease;
}

.slide-load-overlay.hidden {
    opacity: 0;
    pointer-events: none;
}

.slide-load-inner {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 16px;
}

.slide-load-spinner {
    animation: slideSpinRotate 1.2s linear infinite;
}

@keyframes slideSpinRotate {
    to { transform: rotate(360deg); }
}

.slide-load-pct {
    font-size: 36px;
    font-weight: 700;
    font-family: var(--font-mono);
    color: var(--cds-text-primary);
    letter-spacing: -1px;
}

.slide-load-label {
    font-size: 13px;
    color: var(--cds-text-secondary);
    font-family: var(--font);
}

.tb-btn--panel-toggle {
    height: 32px;
    display: flex;
    align-items: center;
    gap: 6px;
    padding: 0 14px;
    border: 1px solid var(--cds-border-strong-01);
    border-radius: 4px;
    background: var(--cds-layer-02);
    color: var(--cds-text-primary);
    font-family: var(--font);
    font-size: 12px;
    font-weight: 600;
    letter-spacing: 0.3px;
    cursor: pointer;
    transition: all 0.2s ease;
    white-space: nowrap;
}

.tb-btn--panel-toggle:hover {
    background: var(--cds-layer-hover-02);
    border-color: var(--cds-interactive);
    color: var(--cds-interactive);
}

.tb-btn--panel-toggle.active {
    background: var(--cds-interactive);
    color: var(--cds-text-on-color);
    border-color: var(--cds-interactive);
}

.tb-btn--panel-toggle--ai {
    background: linear-gradient(135deg, #0f62fe 0%, #6929c4 100%);
    color: #fff;
    border: none;
}

.tb-btn--panel-toggle--ai:hover {
    filter: brightness(1.15);
    color: #fff;
}

.tb-btn--panel-toggle--ai.active {
    background: linear-gradient(135deg, #0f62fe 0%, #6929c4 100%);
    color: #fff;
    border: none;
    filter: none;
    animation: aiPulse 2s ease-in-out infinite;
}

@keyframes aiPulse {
    0%, 100% { box-shadow: 0 0 4px rgba(15, 98, 254, 0.4); }
    50% { box-shadow: 0 0 16px rgba(105, 41, 196, 0.7), 0 0 4px rgba(15, 98, 254, 0.5); }
}

/* Carbon code display — reads current zoom level */
.zoom-display {
    display: flex;
    align-items: center;
    gap: var(--spacing-02);
    background: var(--cds-layer-02);
    border: 1px solid var(--cds-border-subtle-01);
    padding: 0 var(--spacing-04);
    height: 32px;
    font-size: 12px;
    font-family: var(--font-mono);
    color: var(--cds-text-secondary);
    min-width: 80px;
    letter-spacing: 0;
}


/* Carbon Button — Small (32px) / Ghost on toolbar */
.tb-btn {
    height: 32px;
    min-width: 32px;
    background: var(--cds-layer-02);
    border: 1px solid var(--cds-border-subtle-01);
    color: var(--cds-text-secondary);
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0 var(--spacing-04);
    font-size: 12px;
    font-weight: 400;
    font-family: var(--font);
    letter-spacing: 0;
    transition: background var(--tr-fast), color var(--tr-fast), border-color var(--tr-fast);
    /* Carbon: no border-radius on productive buttons */
}

.tb-btn:hover {
    background: var(--cds-layer-hover-02);
    color: var(--cds-text-primary);
    border-color: var(--cds-border-strong-01);
}

.tb-btn.active,
.toggle-btn.on {
    background: var(--cds-interactive);
    /* Carbon Blue-50 on dark */
    color: var(--cds-text-on-color);
    border-color: var(--cds-interactive);
}

/* Carbon toolbar separator (vertical divider) */
.tb-sep {
    width: 1px;
    height: 20px;
    background: var(--cds-border-subtle-01);
    margin: 0 var(--spacing-02);
    flex-shrink: 0;
}

.topbar-right {
    margin-left: auto;
}


/* OSD Area */
.osd-area {
    flex: 1;
    position: relative;
    overflow: hidden;
    background: #000;
    display: flex;
}

.split-pane {
    position: relative;
    width: 100%;
    height: 100%;
    flex: 1;
    overflow: hidden;
    display: flex;
    flex-direction: column;
}

.split-secondary {
    border-left: 1px solid var(--cds-border-subtle-01);
}

.osd-viewer {
    width: 100%;
    height: 100%;
    position: absolute;
    top: 0;
    left: 0;
}

.heatmap-canvas,
.annot-canvas {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    pointer-events: none;
}

.cell-layer {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    pointer-events: none;
}

.cell-dot {
    position: absolute;
    width: 8px;
    height: 8px;
    border-radius: 50%;
    transform: translate(-50%, -50%);
    border: 1px solid rgba(255, 255, 255, 0.6);
}

/* Placeholder */
.viewer-placeholder {
    width: 100%;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    position: absolute;
    top: 0;
    left: 0;
    z-index: 10;
    background: var(--gray-100);
}

.ph-inner {
    text-align: center;
    max-width: 400px;
    padding: var(--spacing-08);
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: var(--spacing-05);
}

.ph-inner svg {
    color: var(--gray-60);
}

.ph-inner h2 {
    font-size: 20px;
    font-weight: 300;
    letter-spacing: -0.2px;
}

.ph-inner p {
    font-size: 14px;
    color: var(--text-secondary);
    line-height: 1.6;
}

/* Coords / Scale / Minimap */
.coords-bar {
    position: absolute;
    bottom: 0;
    right: 0;
    background: rgba(22, 22, 22, 0.9);
    border: 1px solid var(--gray-80);
    border-bottom: none;
    border-right: none;
    padding: 3px var(--spacing-03);
    font-size: 11px;
    font-family: var(--font-mono);
    color: var(--text-secondary);
    z-index: 20;
    pointer-events: none;
}

.scale-bar {
    position: absolute;
    bottom: 28px;
    left: 50%;
    transform: translateX(-50%);
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 3px;
    z-index: 20;
    pointer-events: none;
}

.scale-line {
    height: 4px;
    border: 1px solid rgba(255, 255, 255, 0.6);
    border-top: none;
    width: 80px;
}

.scale-bar span {
    font-size: 10px;
    color: rgba(255, 255, 255, 0.6);
    font-family: var(--font-mono);
}

.minimap {
    position: absolute;
    bottom: 40px;
    right: 0;
    width: 160px;
    height: 110px;
    background: var(--gray-100);
    border: 1px solid var(--gray-70);
    border-right: none;
    z-index: 20;
}

#minimapCanvas {
    width: 100%;
    height: 100%;
    display: block;
}

/* Floating panels */
.cell-panel {
    position: absolute;
    top: 56px;
    left: 56px;
    background: var(--gray-80);
    border: 1px solid var(--gray-60);
    padding: var(--spacing-04);
    z-index: 25;
    width: 200px;
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.5);
}

.cell-panel-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: var(--spacing-03);
}

.cell-panel-header span {
    font-size: 12px;
    font-weight: 600;
    letter-spacing: 0.32px;
}

.cell-clear {
    background: none;
    border: none;
    color: var(--red-40);
    cursor: pointer;
    font-size: 12px;
    font-family: var(--font);
}

.cell-count-display {
    font-size: 28px;
    font-weight: 300;
    color: var(--blue-40);
    text-align: center;
    margin: var(--spacing-03) 0;
    font-family: var(--font-mono);
}

.cell-types {
    display: flex;
    flex-direction: column;
    gap: var(--spacing-02);
}

.cell-type {
    border: 1px solid var(--c, var(--gray-60));
    background: none;
    color: var(--text-secondary);
    cursor: pointer;
    padding: var(--spacing-02) var(--spacing-03);
    font-size: 12px;
    font-family: var(--font);
    transition: all var(--tr);
    text-align: left;
}

.cell-type.active,
.cell-type:hover {
    background: var(--c);
    color: #fff;
    border-color: var(--c);
}

.measure-display {
    position: absolute;
    top: 56px;
    right: 264px;
    background: var(--gray-80);
    border: 1px solid var(--gray-60);
    padding: var(--spacing-02) var(--spacing-04);
    font-size: 13px;
    font-family: var(--font-mono);
    color: var(--blue-40);
    z-index: 25;
}

/* Bottom Strip — Carbon Overflow Menu area */
.bottom-strip {
    height: 72px;
    background: var(--gray-90);
    border-top: 1px solid var(--gray-80);
    display: flex;
    align-items: center;
    padding: 0 var(--spacing-05);
    gap: var(--spacing-06);
    flex-shrink: 0;
}

.strip-section {
    display: flex;
    flex-direction: column;
    gap: var(--spacing-02);
}

.strip-label {
    font-size: 11px;
    font-weight: 600;
    letter-spacing: 0.32px;
    text-transform: uppercase;
    color: var(--text-helper);
}

.thumb-strip {
    display: flex;
    gap: var(--spacing-02);
    align-items: center;
}

.thumb-empty {
    font-size: 12px;
    color: var(--text-helper);
}

.thumb-item {
    width: 48px;
    height: 32px;
    object-fit: cover;
    border: 1px solid var(--gray-70);
    cursor: pointer;
    transition: border-color var(--tr);
}

.thumb-item:hover,
.thumb-item.active {
    border-color: var(--blue-60);
    outline: 1px solid var(--blue-60);
}

.strip-divider {
    width: 1px;
    height: 40px;
    background: var(--gray-80);
}

.strip-btn {
    display: flex;
    align-items: center;
    gap: var(--spacing-02);
    background: var(--gray-80);
    border: 1px solid var(--gray-70);
    color: var(--text-secondary);
    cursor: pointer;
    padding: 0 var(--spacing-04);
    height: 32px;
    font-size: 12px;
    font-family: var(--font);
    transition: background var(--tr), color var(--tr);
}

.strip-btn:hover {
    background: var(--gray-70);
    color: var(--text-primary);
}

.annot-history {
    display: flex;
    gap: var(--spacing-02);
    align-items: center;
    overflow-x: auto;
    max-width: 280px;
}

.ah-empty {
    font-size: 12px;
    color: var(--text-helper);
}

.ah-item {
    background: var(--gray-80);
    border: 1px solid var(--gray-70);
    padding: 2px var(--spacing-03);
    font-size: 11px;
    color: var(--text-secondary);
    white-space: nowrap;
    font-family: var(--font-mono);
    cursor: pointer;
    flex-shrink: 0;
}

.ah-item:hover {
    border-color: var(--blue-60);
    color: var(--blue-40);
}

/* ══════════════════════════════════════════════════════════
   CARBON AI INSIGHT PANEL — v11 Redesign
   Follows Carbon Side Panel + Tile + Structured List spec.
   g100 dark theme · Blue-60 primary accent
══════════════════════════════════════════════════════════ */

/* ── Panel Shell ── */
.ai-panel {
    width: var(--ai-panel-w);
    background: var(--cds-background);
    border-left: 1px solid var(--cds-border-subtle-01);
    display: flex;
    flex-direction: column;
    overflow-y: auto;
    flex-shrink: 0;
    scrollbar-width: thin;
    scrollbar-color: var(--cds-layer-03) transparent;
    transition: width 0.25s ease, opacity 0.2s ease;
}

.ai-panel.collapsed {
    width: 0 !important;
    min-width: 0 !important;
    overflow: hidden !important;
    opacity: 0;
    border-left: none;
    padding: 0;
}

.ai-panel-tab {
    position: relative;
    z-index: 30;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 20px;
    align-self: stretch;
    background: var(--cds-layer-01);
    border: none;
    border-left: 1px solid var(--cds-border-subtle-01);
    border-right: 1px solid var(--cds-border-subtle-01);
    color: var(--cds-text-secondary);
    cursor: pointer;
    flex-shrink: 0;
    transition: background 0.15s, color 0.15s;
}

.ai-panel-tab:hover {
    background: var(--cds-layer-hover-01);
    color: var(--cds-text-primary);
}

.ai-panel-tab .ai-tab-arrow {
    transition: transform 0.25s ease;
}

.ai-panel-tab.collapsed .ai-tab-arrow {
    transform: rotate(180deg);
}

.ai-panel::-webkit-scrollbar {
    width: 3px;
}

.ai-panel::-webkit-scrollbar-thumb {
    background: var(--cds-layer-03);
    border-radius: 2px;
}

/* ── Redesigned Panel Header ── */
.ai-panel-header {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 0 var(--spacing-05);
    height: 56px;
    background: var(--cds-layer-01);
    border-bottom: 2px solid var(--cds-blue-60);
    flex-shrink: 0;
    position: relative;
    overflow: hidden;
}

.ai-panel-header::before {
    content: '';
    position: absolute;
    inset: 0;
    background: linear-gradient(135deg, rgba(15, 98, 254, 0.08) 0%, transparent 65%);
    pointer-events: none;
}

.panel-header-icon {
    width: 30px;
    height: 30px;
    background: linear-gradient(135deg, #0f62fe 0%, #8b5cf6 100%);
    border-radius: 7px;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    box-shadow: 0 2px 10px rgba(15, 98, 254, 0.4);
    position: relative;
    z-index: 1;
}

.panel-header-text {
    flex: 1;
    min-width: 0;
    position: relative;
    z-index: 1;
}

.panel-header-title {
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 0.9px;
    text-transform: uppercase;
    color: var(--cds-text-primary);
    line-height: 1;
}

.panel-header-sub {
    font-size: 10px;
    color: var(--cds-text-helper);
    letter-spacing: 0.2px;
    margin-top: 3px;
}

/* ── Status indicator ── */
.status-indicator {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    flex-shrink: 0;
    position: relative;
    z-index: 1;
    transition: all 0.3s ease;
}

.status-indicator.idle {
    background: var(--cds-layer-03);
}

.status-indicator.running {
    background: var(--cds-support-warning);
    box-shadow: 0 0 10px var(--cds-support-warning);
    animation: statusPulse 1.5s ease-in-out infinite;
}

.status-indicator.success {
    background: var(--cds-support-success);
    box-shadow: 0 0 6px rgba(66, 190, 101, 0.5);
}

.status-indicator.error {
    background: var(--cds-support-error);
    box-shadow: 0 0 6px rgba(218, 30, 40, 0.5);
}

@keyframes statusPulse {

    0%,
    100% {
        box-shadow: 0 0 0 0 rgba(241, 194, 27, 0.7);
    }

    50% {
        box-shadow: 0 0 0 6px rgba(241, 194, 27, 0);
    }
}


/* Carbon Information Section */
.ai-section {
    padding: var(--spacing-04) var(--spacing-05);
    border-bottom: 1px solid var(--cds-border-subtle-01);
}

/* Carbon label-01: 12px/16px, uppercase, 0.32px tracking */
.ai-section-label {
    font-size: 11px;
    font-weight: 600;
    letter-spacing: 0.32px;
    text-transform: uppercase;
    color: var(--cds-text-helper);
    margin-bottom: var(--spacing-03);
    display: flex;
    align-items: center;
    gap: var(--spacing-02);
}

.ai-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: var(--spacing-03);
}

.ai-key {
    font-size: 12px;
    color: var(--cds-text-secondary);
}

/* Carbon Toggle — exact Carbon toggle spec */
.toggle-switch {
    position: relative;
    display: inline-block;
    width: 48px;
    height: 24px;
}

.toggle-switch input {
    opacity: 0;
    width: 0;
    height: 0;
}

.toggle-track {
    position: absolute;
    inset: 0;
    background: var(--cds-layer-03);
    cursor: pointer;
    border: 1px solid var(--cds-border-strong-01);
    transition: background var(--tr-fast), border-color var(--tr-fast);
}

.toggle-switch input:checked+.toggle-track {
    background: var(--cds-interactive);
    border-color: var(--cds-interactive);
}

.toggle-track::after {
    content: '';
    position: absolute;
    width: 16px;
    height: 16px;
    background: var(--cds-icon-primary);
    top: 3px;
    left: 3px;
    transition: transform var(--tr-moderate);
}

.toggle-switch input:checked+.toggle-track::after {
    transform: translateX(24px);
    background: var(--cds-text-on-color);
}

/* Carbon Structured List rows for density */
.density-stat {
    margin-bottom: var(--spacing-04);
}

.density-stat:last-of-type {
    margin-bottom: 0;
}

.stat-row {
    display: flex;
    justify-content: space-between;
    align-items: baseline;
    font-size: 12px;
    margin-bottom: var(--spacing-02);
}

.stat-label {
    color: var(--cds-text-secondary);
    font-size: 12px;
}

/* Carbon code-01 / mono for numbers */
.stat-val {
    font-family: var(--font-mono);
    font-weight: 600;
    font-size: 13px;
    color: var(--cds-text-primary);
    letter-spacing: 0;
}

.stat-val.accent {
    color: var(--cds-link-primary);
}

/* Carbon Progress Bar */
.stat-bar-track {
    height: 4px;
    background: var(--cds-layer-03);
    overflow: hidden;
}

.stat-bar-fill {
    height: 100%;
    transition: width 0.5s cubic-bezier(0.2, 0, 0.38, 0.9);
}

/* Carbon Structured List rows for patterns */
.pattern-top {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: var(--spacing-02) 0;
    border-bottom: 1px solid var(--cds-border-subtle-01);
    min-height: 32px;
}

.pattern-top:last-child {
    border-bottom: none;
}

.pattern-label {
    font-size: 12px;
    color: var(--cds-text-primary);
    line-height: 1.4;
    flex: 1;
    padding-right: var(--spacing-03);
}

.pattern-label.secondary {
    color: var(--cds-text-secondary);
}

/* Carbon Tag component for confidence badges */
.conf-badge {
    font-size: 11px;
    font-weight: 600;
    padding: 1px var(--spacing-03);
    font-family: var(--font-mono);
    letter-spacing: 0;
    flex-shrink: 0;
    display: inline-flex;
    align-items: center;
    height: 18px;
    /* Carbon tags have 0 border-radius in productive theme */
}

/* Carbon Support Green tag */
.conf-badge.high {
    background: rgba(66, 190, 101, 0.2);
    color: var(--cds-green-40);
    outline: 1px solid rgba(66, 190, 101, 0.4);
}

/* Carbon Support Yellow tag */
.conf-badge.med {
    background: rgba(241, 194, 27, 0.15);
    color: var(--cds-yellow-30);
    outline: 1px solid rgba(241, 194, 27, 0.35);
}

/* Carbon helper text / muted tag */
.conf-badge.low {
    background: var(--cds-layer-02);
    color: var(--cds-text-helper);
    outline: 1px solid var(--cds-border-subtle-01);
}

/* ── AI Disclaimer footer ── */
.ai-disclaimer {
    font-size: 10px;
    color: var(--cds-text-helper);
    padding: var(--spacing-03) var(--spacing-05);
    font-style: italic;
    border-top: 1px solid var(--cds-border-subtle-01);
    text-align: center;
    letter-spacing: 0.16px;
    background: var(--cds-layer-01);
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
}


/* Toast */
.toast {
    position: absolute;
    top: 56px;
    left: 50%;
    transform: translateX(-50%);
    background: var(--gray-80);
    border-left: 4px solid var(--blue-60);
    padding: var(--spacing-04) var(--spacing-05);
    font-size: 13px;
    z-index: 9999;
    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.6);
    white-space: nowrap;
}

/* ── BUTTONS ── */
.btn-primary {
    display: inline-flex;
    align-items: center;
    gap: var(--spacing-02);
    background: var(--blue-60);
    color: #fff;
    border: none;
    padding: 0 var(--spacing-06);
    height: 48px;
    font-size: 14px;
    font-weight: 400;
    cursor: pointer;
    font-family: var(--font);
    transition: background var(--tr);
    margin-top: var(--spacing-04);
}

.btn-primary:hover {
    background: var(--blue-70);
}

.btn-ghost {
    display: inline-flex;
    align-items: center;
    gap: var(--spacing-02);
    background: transparent;
    border: 1px solid var(--gray-60);
    color: var(--text-primary);
    padding: 0 var(--spacing-05);
    height: 40px;
    font-size: 13px;
    cursor: pointer;
    font-family: var(--font);
    transition: background var(--tr);
}

.btn-ghost:hover {
    background: var(--gray-80);
}

.btn-ghost.small {
    height: 32px;
    font-size: 12px;
    padding: 0 var(--spacing-04);
}

.hidden {
    display: none !important;
}

/* ══════════════════════════════════════
   EVIDENCE PACK
══════════════════════════════════════ */
.page-layout {
    flex: 1;
    display: flex;
    flex-direction: column;
    overflow: auto;
}

.page-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: var(--spacing-06) var(--spacing-06) var(--spacing-05);
    border-bottom: 1px solid var(--gray-80);
    flex-shrink: 0;
}

.page-title {
    font-size: 20px;
    font-weight: 300;
    letter-spacing: -0.2px;
}

.page-sub {
    font-size: 13px;
    color: var(--text-secondary);
    margin-top: var(--spacing-02);
}

.page-actions {
    display: flex;
    gap: var(--spacing-03);
}

.evidence-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(296px, 1fr));
    gap: 1px;
    background: var(--gray-80);
    overflow-y: auto;
    padding: var(--spacing-05) var(--spacing-05);
    gap: var(--spacing-04);
    background: var(--gray-100);
}

.evidence-empty {
    grid-column: 1/-1;
    text-align: center;
    padding: var(--spacing-08);
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: var(--spacing-04);
    color: var(--text-helper);
}

.ev-sub {
    font-size: 12px;
}

.evidence-card {
    background: var(--gray-90);
    border: 1px solid var(--gray-80);
    display: flex;
    flex-direction: column;
    transition: border-color var(--tr);
}

.evidence-card:hover {
    border-color: var(--gray-60);
}

.ev-img {
    height: 160px;
    background: var(--gray-100);
    position: relative;
    overflow: hidden;
    cursor: pointer;
}

.ev-img img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.ev-img-placeholder {
    width: 100%;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--gray-70);
}

.ev-badge {
    position: absolute;
    top: var(--spacing-02);
    left: var(--spacing-02);
    background: var(--gray-90);
    border: 1px solid var(--gray-70);
    padding: 1px var(--spacing-03);
    font-size: 10px;
    font-family: var(--font-mono);
    color: var(--text-secondary);
}

.ev-body {
    padding: var(--spacing-04);
}

.ev-title {
    font-size: 14px;
    font-weight: 600;
    margin-bottom: var(--spacing-02);
}

.ev-meta {
    font-size: 11px;
    color: var(--text-helper);
    font-family: var(--font-mono);
    margin-bottom: var(--spacing-04);
    line-height: 1.8;
}

.ev-caption-input {
    width: 100%;
    background: var(--gray-80);
    border: none;
    border-bottom: 1px solid var(--gray-60);
    color: var(--text-primary);
    font-size: 12px;
    padding: var(--spacing-02) 0;
    font-family: var(--font);
    margin-bottom: var(--spacing-04);
    resize: none;
}

.ev-caption-input:focus {
    outline: none;
    border-bottom-color: var(--blue-60);
}

.ev-actions {
    display: flex;
    gap: 1px;
    background: var(--gray-80);
}

.ev-btn {
    flex: 1;
    background: var(--gray-90);
    border: none;
    color: var(--text-secondary);
    cursor: pointer;
    padding: var(--spacing-03);
    font-size: 11px;
    font-family: var(--font);
    transition: background var(--tr);
    text-align: center;
}

.ev-btn:hover {
    background: var(--gray-80);
    color: var(--text-primary);
}

.ev-btn.danger:hover {
    background: var(--red-60);
    color: #fff;
}

/* ══════════════════════════════════════
   REPORTING STUDIO
══════════════════════════════════════ */
.report-layout {
    display: flex;
    height: 100%;
    overflow: hidden;
}

/* Report Left */
.report-left {
    width: 224px;
    background: var(--gray-90);
    border-right: 1px solid var(--gray-80);
    display: flex;
    flex-direction: column;
    overflow-y: auto;
    flex-shrink: 0;
}

.rp-section-label {
    font-size: 11px;
    font-weight: 600;
    letter-spacing: 0.32px;
    text-transform: uppercase;
    color: var(--text-helper);
    padding: var(--spacing-04) var(--spacing-05) var(--spacing-02);
}

.template-list {
    display: flex;
    flex-direction: column;
}

.template-item {
    background: none;
    border: none;
    border-left: 4px solid transparent;
    color: var(--text-secondary);
    cursor: pointer;
    padding: var(--spacing-03) var(--spacing-05);
    font-size: 13px;
    font-family: var(--font);
    text-align: left;
    transition: background var(--tr);
    border-bottom: 1px solid var(--gray-80);
}

.template-item:hover {
    background: var(--gray-80);
    color: var(--text-primary);
}

.template-item.active {
    background: var(--gray-80);
    color: var(--text-primary);
    border-left-color: var(--blue-60);
}

.guide-list,
.guide-item {
    display: flex;
    flex-direction: column;
}

.guide-item {
    display: flex;
    align-items: center;
    gap: var(--spacing-03);
    background: none;
    border: none;
    color: var(--text-secondary);
    cursor: pointer;
    padding: var(--spacing-03) var(--spacing-05);
    font-size: 12px;
    font-family: var(--font);
    border-bottom: 1px solid var(--gray-80);
    transition: background var(--tr);
}

.guide-item:hover {
    background: var(--gray-80);
    color: var(--text-primary);
}

.biomarker-list {
    display: flex;
    flex-direction: column;
}

.biomarker-item {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: var(--spacing-03) var(--spacing-05);
    border-bottom: 1px solid var(--gray-80);
    font-size: 12px;
}

.bm-name {
    color: var(--text-secondary);
}

.bm-val {
    font-size: 11px;
    font-weight: 600;
    font-family: var(--font-mono);
    padding: 1px var(--spacing-02);
}

.bm-val.pos {
    color: var(--green-40);
}

.bm-val.neg {
    color: var(--red-40);
}

.bm-val.pending {
    color: var(--yellow-30);
}

/* Report Center */
.report-center {
    flex: 1;
    display: flex;
    flex-direction: column;
    overflow: hidden;
    background: var(--gray-100);
}

.report-center-header {
    background: var(--gray-90);
    border-bottom: 1px solid var(--gray-80);
    padding: var(--spacing-03) var(--spacing-06);
    flex-shrink: 0;
}

.auto-save-indicator {
    display: flex;
    align-items: center;
    gap: var(--spacing-02);
    font-size: 11px;
    color: var(--text-helper);
    margin-bottom: var(--spacing-02);
}

.save-dot {
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: var(--green-40);
}

.save-dot.pulse {
    animation: savePulse 2s ease-in-out infinite;
}

@keyframes savePulse {

    0%,
    100% {
        opacity: 0.4
    }

    50% {
        opacity: 1
    }
}

.report-meta-row {
    display: flex;
    gap: var(--spacing-06);
    flex-wrap: wrap;
}

.report-meta-item {
    font-size: 12px;
    color: var(--text-secondary);
}

.report-meta-item strong {
    color: var(--text-primary);
    font-weight: 600;
}

.report-editor {
    flex: 1;
    overflow-y: auto;
    padding: var(--spacing-06);
    display: flex;
    flex-direction: column;
    gap: var(--spacing-05);
}

.report-section-header {
    font-size: 12px;
    font-weight: 600;
    letter-spacing: 0.32px;
    text-transform: uppercase;
    color: var(--text-secondary);
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding-bottom: var(--spacing-03);
    border-bottom: 1px solid var(--gray-80);
}

.struct-fields {
    display: flex;
    flex-direction: column;
    gap: 1px;
    background: var(--gray-80);
    border: 1px solid var(--gray-80);
}

.field-row {
    display: grid;
    grid-template-columns: 180px 1fr;
    background: var(--gray-90);
}

.field-row label {
    font-size: 12px;
    color: var(--text-secondary);
    padding: var(--spacing-03) var(--spacing-05);
    display: flex;
    align-items: center;
    border-right: 1px solid var(--gray-80);
}

.report-input,
.report-select {
    background: var(--gray-90);
    border: none;
    border-bottom: 1px solid var(--gray-80);
    color: var(--text-primary);
    font-size: 13px;
    padding: var(--spacing-03) var(--spacing-04);
    font-family: var(--font);
    width: 100%;
    transition: border-color var(--tr), background var(--tr);
}

.report-input:focus,
.report-select:focus {
    outline: none;
    border-bottom: 2px solid var(--blue-60);
    background: var(--gray-80);
}

.report-select {
    cursor: pointer;
}

.report-narrative {
    background: var(--gray-90);
    border: 1px solid var(--gray-80);
    border-bottom: 2px solid var(--gray-60);
    color: var(--text-primary);
    font-family: var(--font);
    font-size: 13px;
    line-height: 1.7;
    padding: var(--spacing-04);
    resize: vertical;
    width: 100%;
    min-height: 160px;
    transition: border-color var(--tr);
}

.report-narrative.small {
    min-height: 70px;
}

.report-narrative:focus {
    outline: none;
    border-bottom-color: var(--blue-60);
}

.mic-btn {
    background: none;
    border: none;
    color: var(--icon-secondary);
    cursor: pointer;
    display: flex;
    padding: 4px;
    transition: color var(--tr);
}

.mic-btn:hover,
.mic-btn.active {
    color: var(--red-40);
}

/* Action Bar — Carbon High-contrast */
.report-action-bar {
    background: var(--gray-90);
    border-top: 1px solid var(--gray-80);
    padding: var(--spacing-04) var(--spacing-06);
    display: flex;
    gap: var(--spacing-03);
    flex-shrink: 0;
}

.action-bar-btn {
    display: inline-flex;
    align-items: center;
    gap: var(--spacing-02);
    border: none;
    padding: 0 var(--spacing-05);
    height: 40px;
    font-size: 13px;
    font-weight: 400;
    cursor: pointer;
    font-family: var(--font);
    transition: background var(--tr);
}

.action-bar-btn.draft {
    background: var(--gray-80);
    color: var(--text-primary);
}

.action-bar-btn.draft:hover {
    background: var(--gray-70);
}

.action-bar-btn.lab {
    background: var(--teal-50);
    color: var(--teal-40);
}

.action-bar-btn.lab:hover {
    background: var(--teal-40);
    color: #000;
}

.action-bar-btn.second {
    background: var(--purple-60);
    color: var(--purple-40);
}

.action-bar-btn.download {
    background: var(--gray-80);
    color: var(--blue-40);
    border: 1px solid var(--blue-60);
}

.action-bar-btn.download:hover {
    background: var(--blue-60);
    color: #fff;
}

.action-bar-btn.lab-send {
    background: var(--teal-50);
    color: #fff;
    border: 1px solid var(--teal-40);
}

.action-bar-btn.lab-send:hover {
    background: var(--teal-40);
    color: #000;
}

.action-bar-btn.second:hover {
    background: var(--purple-40);
    color: #000;
}

.action-bar-btn.signout {
    background: var(--blue-60);
    color: #fff;
    margin-left: auto;
}

.action-bar-btn.signout:hover {
    background: var(--blue-70);
}

/* Report Right */
.report-right {
    width: 224px;
    background: var(--gray-90);
    border-left: 1px solid var(--gray-80);
    display: flex;
    flex-direction: column;
    overflow-y: auto;
    flex-shrink: 0;
}

.evidence-gallery {
    display: flex;
    flex-direction: column;
    gap: 1px;
    background: var(--gray-80);
}

.gallery-empty {
    font-size: 12px;
    color: var(--text-helper);
    padding: var(--spacing-04);
    text-align: center;
    background: var(--gray-90);
}

.gallery-item {
    background: var(--gray-90);
    cursor: pointer;
    transition: background var(--tr);
    border-left: 3px solid transparent;
}

.gallery-item:hover {
    background: var(--gray-80);
    border-left-color: var(--blue-60);
}

.gallery-item img {
    width: 100%;
    height: 56px;
    object-fit: cover;
    display: block;
}

.gallery-item-label {
    font-size: 10px;
    color: var(--text-helper);
    padding: 3px var(--spacing-03);
    font-family: var(--font-mono);
}

.ai-confidence-box {
    padding: 0;
}

.conf-item {
    padding: var(--spacing-03) var(--spacing-05);
    border-bottom: 1px solid var(--gray-80);
}

.conf-label-row {
    display: flex;
    justify-content: space-between;
    font-size: 12px;
    margin-bottom: 4px;
}

.conf-pct {
    font-family: var(--font-mono);
    font-weight: 600;
}

.conf-pct.accent {
    color: var(--blue-40);
}

.conf-pct.muted {
    color: var(--text-helper);
}

.conf-bar-track {
    height: 3px;
    background: var(--gray-80);
}

.conf-bar-fill {
    height: 100%;
    background: var(--blue-60);
}

/* Lab mini thread */
.lab-thread-mini {
    display: flex;
    flex-direction: column;
}

.thread-item {
    display: flex;
    gap: var(--spacing-03);
    padding: var(--spacing-03) var(--spacing-05);
    border-bottom: 1px solid var(--gray-80);
    align-items: flex-start;
}

.thread-who {
    font-size: 9px;
    font-weight: 700;
    min-width: 30px;
    padding: 2px 4px;
    text-align: center;
    flex-shrink: 0;
    font-family: var(--font-mono);
}

.thread-item.lab .thread-who {
    background: rgba(61, 219, 217, 0.2);
    color: var(--teal-40);
}

.thread-item.path .thread-who {
    background: rgba(69, 137, 255, 0.2);
    color: var(--blue-40);
}

.thread-msg {
    font-size: 12px;
    color: var(--text-secondary);
    line-height: 1.4;
}

/* ══════════════════════════════════════
   LAB COMMUNICATION
══════════════════════════════════════ */
.lab-layout {
    display: flex;
    height: 100%;
    overflow: hidden;
}

.lab-main {
    flex: 1;
    display: flex;
    flex-direction: column;
    overflow: hidden;
}

.lab-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: var(--spacing-05) var(--spacing-06);
    border-bottom: 1px solid var(--gray-80);
    flex-shrink: 0;
    background: var(--gray-90);
}

.lab-header-right {
    display: flex;
    align-items: center;
    gap: var(--spacing-03);
}

/* ══════════════════════════════════════════════════════════
   SNAP & ANNOTATE — new components
══════════════════════════════════════════════════════════ */

/* ── Annotation Colors ─── */
:root {
    --annot-tumor: #f43f5e;
    --annot-invasion: #f97316;
    --annot-necrosis: #b45309;
    --annot-margin: #3b82f6;
    --annot-lvi: #8b5cf6;
    --annot-artifact: #6b7280;
    --annot-other: #10b981;
}

/* ── Cursor overrides ─── */
[data-cursor="crosshair"] {
    cursor: crosshair !important;
}

[data-cursor="cell"] {
    cursor: cell !important;
}

[data-cursor="copy"] {
    cursor: copy !important;
}

/* ── Annotation Mini-Toolbar ─── */
.annot-mini-toolbar {
    position: absolute;
    z-index: 600;
    background: var(--gray-90);
    border: 1px solid var(--blue-60);
    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.75);
    padding: var(--spacing-04) var(--spacing-05);
    min-width: 240px;
    display: flex;
    flex-direction: column;
    gap: var(--spacing-03);
    animation: amtSlideIn 0.15s ease;
}

@keyframes amtSlideIn {
    from {
        opacity: 0;
        transform: translateY(-6px);
    }

    to {
        opacity: 1;
        transform: none;
    }
}

.amt-row {
    display: grid;
    grid-template-columns: 60px 1fr;
    align-items: center;
    gap: var(--spacing-03);
}

.amt-label {
    font-size: 10px;
    font-weight: 600;
    color: var(--text-helper);
    text-transform: uppercase;
    letter-spacing: 0.4px;
}

.amt-select,
.amt-input {
    background: var(--gray-80);
    border: none;
    border-bottom: 1px solid var(--gray-60);
    color: var(--text-primary);
    font-size: 12px;
    font-family: var(--font);
    padding: 5px var(--spacing-03);
    width: 100%;
    transition: border-color var(--tr);
}

.amt-select:focus,
.amt-input:focus {
    outline: none;
    border-bottom: 2px solid var(--blue-60);
}

.amt-actions {
    display: flex;
    gap: var(--spacing-02);
    margin-top: 2px;
}

.amt-btn {
    flex: 1;
    height: 32px;
    border: none;
    font-size: 12px;
    font-family: var(--font);
    cursor: pointer;
    font-weight: 600;
    transition: background var(--tr);
}

.amt-btn.save {
    background: var(--blue-60);
    color: #fff;
}

.amt-btn.save:hover {
    background: var(--blue-70);
}

.amt-btn.cancel {
    background: var(--gray-70);
    color: var(--text-secondary);
}

.amt-btn.cancel:hover {
    background: var(--gray-60);
}

/* ── Snapshot Dialog ─── */
.snapshot-dialog {
    position: fixed;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    z-index: 3000;
    background: var(--gray-90);
    border: 1px solid var(--blue-60);
    box-shadow: 0 16px 56px rgba(0, 0, 0, 0.85);
    padding: var(--spacing-05);
    width: 460px;

    display: flex;
    flex-direction: column;
    gap: var(--spacing-04);
    animation: sdFadeIn 0.18s ease;
    transition: width 0.3s ease, height 0.3s ease, padding 0.3s ease;
}

.snapshot-dialog.fullscreen {
    width: 90vw;
    height: 90vh;
    padding: var(--spacing-06);
}

@keyframes sdFadeIn {
    from {
        opacity: 0;
        transform: translate(-50%, -52%) scale(0.96);
    }

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

.sd-header {
    font-size: 13px;
    font-weight: 600;
    color: var(--text-primary);
    border-bottom: 1px solid var(--gray-70);
    padding-bottom: var(--spacing-03);
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.sd-expand-btn {
    background: transparent;
    border: none;
    color: var(--text-secondary);
    cursor: pointer;
    padding: 2px;
    border-radius: 4px;
    display: flex;
    transition: color 0.15s, background 0.15s;
}

.sd-expand-btn:hover {
    color: var(--text-primary);
    background: rgba(255, 255, 255, 0.1);
}

.sd-toolbar {
    display: flex;
    align-items: center;
    gap: 6px;
    background: var(--gray-80);
    border: 1px solid var(--gray-70);
    border-radius: 4px;
    padding: 4px 8px;
}

.sd-tool-btn {
    width: 28px;
    height: 28px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: transparent;
    border: 1px solid transparent;
    border-radius: 4px;
    color: var(--text-secondary);
    cursor: pointer;
    transition: all 0.15s;
    padding: 0;
}

.sd-tool-btn:hover {
    background: rgba(255, 255, 255, 0.1);
    color: var(--text-primary);
}

.sd-tool-btn.active {
    background: rgba(15, 98, 254, 0.2);
    border-color: var(--blue-60);
    color: var(--blue-40);
}

.sd-sep {
    height: 16px;
    width: 1px;
    background: var(--gray-70);
    margin: 0 4px;
}

.sd-color {
    width: 24px;
    height: 24px;
    padding: 0;
    border: none;
    border-radius: 4px;
    background: transparent;
    cursor: pointer;
}

.sd-color::-webkit-color-swatch-wrapper {
    padding: 0;
}

.sd-color::-webkit-color-swatch {
    border: 1px solid rgba(255, 255, 255, 0.2);
    border-radius: 4px;
}

.sd-canvas {
    width: 100%;
    height: 240px;
    background: var(--gray-80);
    border: 1px solid var(--gray-70);
    object-fit: contain;
    transition: height 0.3s ease;
}

.snapshot-dialog.fullscreen .sd-canvas {
    flex: 1;
    height: auto;
    min-height: 0;
}


.sd-opts {
    display: flex;
    flex-direction: column;
    gap: var(--spacing-02);
}

.sd-check {
    display: flex;
    align-items: center;
    gap: var(--spacing-03);
    font-size: 12px;
    color: var(--text-secondary);
    cursor: pointer;
}

.sd-check input {
    accent-color: var(--blue-60);
    width: 14px;
    height: 14px;
}

.sd-caption-row {
    display: flex;
}

.sd-caption {
    flex: 1;
    background: var(--gray-80);
    border: none;
    border-bottom: 1px solid var(--gray-60);
    color: var(--text-primary);
    font-size: 12px;
    font-family: var(--font);
    padding: var(--spacing-03);
    transition: border-color var(--tr);
}

.sd-caption:focus {
    outline: none;
    border-bottom: 2px solid var(--blue-60);
}

.sd-actions {
    display: flex;
    gap: var(--spacing-02);
}

.sd-btn {
    flex: 1;
    height: 36px;
    border: none;
    font-size: 12px;
    font-family: var(--font);
    cursor: pointer;
    font-weight: 600;
    background: var(--gray-70);
    color: var(--text-secondary);
    transition: background var(--tr);
}

.sd-btn:hover {
    background: var(--gray-60);
}

.sd-btn.primary {
    background: var(--blue-60);
    color: #fff;
}

.sd-btn.primary:hover {
    background: var(--blue-70);
}

/* ── Auto-Snap Toggle ─── */
.auto-snap-toggle {
    display: flex;
    align-items: center;
    gap: var(--spacing-02);
    cursor: pointer;
    font-size: 11px;
    color: var(--text-secondary);
    user-select: none;
    padding: 0 var(--spacing-03);
    height: 32px;
    border: 1px solid var(--gray-70);
    background: var(--gray-90);
    transition: all var(--tr);
}

.auto-snap-toggle:hover {
    border-color: var(--blue-60);
    color: var(--text-primary);
}

.auto-snap-toggle input {
    accent-color: var(--blue-60);
}

.auto-snap-label {
    font-weight: 500;
    letter-spacing: 0.3px;
}

/* ── Label pin ─── */
.annot-pin {
    position: absolute;
    transform: translate(-50%, -100%);
    z-index: 300;
    pointer-events: none;
    display: flex;
    flex-direction: column;
    align-items: center;
}

.annot-pin-bubble {
    background: var(--gray-90);
    border: 1.5px solid var(--blue-60);
    font-size: 10px;
    font-weight: 600;
    font-family: var(--font-mono);
    padding: 2px 6px;
    color: var(--blue-40);
    white-space: nowrap;
    max-width: 120px;
    overflow: hidden;
    text-overflow: ellipsis;
}

.annot-pin-dot {
    width: 6px;
    height: 6px;
    background: var(--blue-60);
    border-radius: 50%;
    margin-top: 2px;
}

/* ── Evidence nav button ─── */
.ev-nav-btn {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    background: var(--gray-80);
    border: 1px solid var(--gray-60);
    color: var(--text-secondary);
    font-size: 11px;
    font-family: var(--font);
    cursor: pointer;
    padding: 0 var(--spacing-03);
    height: 28px;
    transition: all var(--tr);
}

.ev-nav-btn:hover {
    border-color: var(--blue-60);
    color: var(--blue-40);
}

/* ── Undo / Redo dim state ─── */
#btnUndo:disabled,
#btnRedo:disabled {
    opacity: 0.3;
    cursor: not-allowed;
}

/* ── Layer visibility ─── */
#toolLayerVis.layers-hidden {
    opacity: 0.4;
}

/* ── Severity badges on history ─── */
.ah-item {
    position: relative;
    padding-right: 44px;
}

.ah-sev {
    position: absolute;
    right: 6px;
    top: 50%;
    transform: translateY(-50%);
    font-size: 9px;
    font-weight: 700;
    font-family: var(--font-mono);
    padding: 1px 4px;
}

.ah-sev.High {
    background: rgba(244, 63, 94, 0.15);
    color: #f87171;
}

.ah-sev.Medium {
    background: rgba(245, 158, 11, 0.15);
    color: var(--yellow-30);
}

.ah-sev.Low {
    background: rgba(16, 185, 129, 0.15);
    color: var(--green-40);
}

.priority-badge {
    font-size: 11px;
    font-weight: 600;
    letter-spacing: 0.5px;
    padding: 3px var(--spacing-04);
    font-family: var(--font-mono);
    border: 1px solid;
}

.priority-badge.routine {
    border-color: var(--green-40);
    color: var(--green-40);
}

.priority-badge.urgent {
    border-color: var(--red-40);
    color: var(--red-40);
}

/* Timeline */
.lab-timeline {
    flex: 1;
    overflow-y: auto;
    padding: var(--spacing-05) var(--spacing-06);
    display: flex;
    flex-direction: column;
    gap: var(--spacing-05);
    scrollbar-width: thin;
}

.timeline-item {
    display: flex;
    gap: var(--spacing-04);
    align-items: flex-start;
}

.timeline-item.path-msg {
    flex-direction: row-reverse;
}

.tl-avatar {
    width: 32px;
    height: 32px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 10px;
    font-weight: 700;
    flex-shrink: 0;
    font-family: var(--font-mono);
}

.lab-av {
    background: rgba(61, 219, 217, 0.15);
    color: var(--teal-40);
    border: 1px solid var(--teal-50);
}

.path-av {
    background: rgba(69, 137, 255, 0.15);
    color: var(--blue-40);
    border: 1px solid var(--blue-60);
}

.tl-bubble {
    background: var(--gray-90);
    border: 1px solid var(--gray-80);
    padding: var(--spacing-04) var(--spacing-05);
    max-width: 520px;
}

.timeline-item.path-msg .tl-bubble {
    border-left: 3px solid var(--blue-60);
}

.timeline-item.lab-msg .tl-bubble {
    border-left: 3px solid var(--teal-50);
}

.tl-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: var(--spacing-03);
}

.tl-header strong {
    font-size: 12px;
    font-weight: 600;
}

.tl-time {
    font-size: 11px;
    color: var(--text-helper);
    font-family: var(--font-mono);
}

.tl-bubble p {
    font-size: 13px;
    color: var(--text-secondary);
    line-height: 1.55;
}

.ev-attach {
    margin-top: var(--spacing-03);
    background: var(--gray-80);
    border: 1px solid var(--gray-70);
    padding: var(--spacing-02) var(--spacing-03);
    font-size: 11px;
    color: var(--text-secondary);
    display: flex;
    align-items: center;
    gap: var(--spacing-02);
    font-family: var(--font-mono);
}

/* Composer */
.lab-composer {
    background: var(--gray-90);
    border-top: 1px solid var(--gray-80);
    padding: var(--spacing-05) var(--spacing-06);
    flex-shrink: 0;
}

.composer-header {
    font-size: 12px;
    font-weight: 600;
    letter-spacing: 0.32px;
    text-transform: uppercase;
    color: var(--text-helper);
    margin-bottom: var(--spacing-04);
}

.composer-field {
    margin-bottom: var(--spacing-04);
}

.composer-field>label {
    display: block;
    font-size: 11px;
    font-weight: 600;
    color: var(--text-helper);
    margin-bottom: var(--spacing-03);
    text-transform: uppercase;
    letter-spacing: 0.32px;
}

.checkbox-group {
    display: flex;
    gap: var(--spacing-06);
    flex-wrap: wrap;
}

.cb-item {
    display: flex;
    align-items: center;
    gap: var(--spacing-02);
    font-size: 13px;
    color: var(--text-secondary);
    cursor: pointer;
}

.cb-item input {
    accent-color: var(--blue-60);
    width: 16px;
    height: 16px;
}

.composer-textarea {
    width: 100%;
    background: var(--gray-80);
    border: none;
    border-bottom: 2px solid var(--gray-60);
    color: var(--text-primary);
    font-size: 13px;
    padding: var(--spacing-03) var(--spacing-04);
    font-family: var(--font);
    resize: none;
    transition: border-color var(--tr);
}

.composer-textarea:focus {
    outline: none;
    border-bottom-color: var(--blue-60);
    background: var(--gray-80);
}

.attach-row {
    display: flex;
    gap: var(--spacing-03);
    flex-wrap: wrap;
}

.attach-btn {
    display: inline-flex;
    align-items: center;
    gap: var(--spacing-02);
    background: var(--gray-80);
    border: 1px solid var(--gray-60);
    color: var(--text-secondary);
    cursor: pointer;
    padding: 0 var(--spacing-04);
    height: 32px;
    font-size: 12px;
    font-family: var(--font);
    transition: background var(--tr), color var(--tr);
}

.attach-btn:hover {
    background: var(--gray-70);
    color: var(--text-primary);
    border-color: var(--gray-50);
}

.attach-previews {
    display: flex;
    gap: var(--spacing-02);
    flex-wrap: wrap;
    margin-top: var(--spacing-02);
}

.attach-preview-item {
    background: var(--gray-80);
    border: 1px solid var(--blue-60);
    padding: 2px var(--spacing-03);
    font-size: 11px;
    color: var(--blue-40);
    display: flex;
    align-items: center;
    gap: var(--spacing-02);
    font-family: var(--font-mono);
}

.priority-tab-group {
    display: flex;
    gap: 0;
}

.priority-tab {
    background: var(--gray-80);
    border: 1px solid var(--gray-60);
    color: var(--text-secondary);
    cursor: pointer;
    padding: 0 var(--spacing-05);
    height: 32px;
    font-size: 12px;
    font-family: var(--font);
    transition: all var(--tr);
    border-right: none;
}

.priority-tab:last-child {
    border-right: 1px solid var(--gray-60);
}

.priority-tab.active {
    background: var(--blue-60);
    color: #fff;
    border-color: var(--blue-60);
}

.priority-tab[data-p="urgent"].active {
    background: var(--red-60);
    border-color: var(--red-60);
}

.send-btn {
    display: inline-flex;
    align-items: center;
    gap: var(--spacing-02);
    background: var(--blue-60);
    color: #fff;
    border: none;
    padding: 0 var(--spacing-06);
    height: 40px;
    font-size: 14px;
    font-weight: 400;
    cursor: pointer;
    font-family: var(--font);
    transition: background var(--tr);
}

.send-btn:hover {
    background: var(--blue-70);
}

/* Lab Side */
.lab-side {
    width: 240px;
    background: var(--gray-90);
    border-left: 1px solid var(--gray-80);
    display: flex;
    flex-direction: column;
    overflow-y: auto;
    flex-shrink: 0;
}

.lab-case-info {
    background: var(--gray-90);
}

.lci-row {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: var(--spacing-03) var(--spacing-05);
    border-bottom: 1px solid var(--gray-80);
    font-size: 12px;
}

.lci-row span {
    color: var(--text-secondary);
}

.lci-row strong {
    color: var(--text-primary);
    font-family: var(--font-mono);
}

.status-active {
    color: var(--yellow-30) !important;
}

.pending-list {
    display: flex;
    flex-direction: column;
}

.pending-item {
    display: flex;
    gap: var(--spacing-03);
    align-items: flex-start;
    padding: var(--spacing-04) var(--spacing-05);
    border-bottom: 1px solid var(--gray-80);
    border-left: 3px solid var(--yellow-30);
    background: var(--gray-90);
}

.pending-dot {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    flex-shrink: 0;
    margin-top: 4px;
}

.pending-dot.warn {
    background: var(--yellow-30);
}

.pending-label {
    font-size: 12px;
    font-weight: 600;
}

.pending-sub {
    font-size: 11px;
    color: var(--text-helper);
    font-family: var(--font-mono);
}

.lab-snapshots {
    display: flex;
    flex-direction: column;
}

.snap-empty {
    font-size: 12px;
    color: var(--text-helper);
    padding: var(--spacing-04) var(--spacing-05);
}

/* ── SIGN-OUT MODAL ── */
.modal-overlay {
    position: fixed;
    inset: 0;
    background: rgba(0, 0, 0, 0.65);
    z-index: 9999;
    display: flex;
    align-items: center;
    justify-content: center;
}

.modal-box {
    background: var(--gray-90);
    border: 1px solid var(--gray-70);
    padding: var(--spacing-07);
    max-width: 440px;
    width: 90%;
    box-shadow: 0 16px 48px rgba(0, 0, 0, 0.7);
}

.modal-box h2 {
    font-size: 18px;
    font-weight: 300;
    margin-bottom: var(--spacing-04);
}

.modal-box p {
    font-size: 13px;
    color: var(--text-secondary);
    line-height: 1.6;
    margin-bottom: var(--spacing-05);
}

.modal-meta {
    background: var(--gray-80);
    padding: var(--spacing-05);
    margin-bottom: var(--spacing-06);
    display: flex;
    flex-direction: column;
    gap: var(--spacing-03);
    font-size: 13px;
    color: var(--text-secondary);
    border-left: 3px solid var(--blue-60);
}

.modal-actions {
    display: flex;
    gap: var(--spacing-04);
    justify-content: flex-end;
}

.btn-danger {
    background: var(--red-60);
    color: #fff;
    border: none;
    padding: 0 var(--spacing-05);
    height: 40px;
    font-size: 13px;
    cursor: pointer;
    font-family: var(--font);
    transition: background var(--tr);
}

.btn-danger:hover {
    background: #b81922;
}

.spinning {
    animation: spin 0.6s linear infinite;
}

/* ══════════════════════════════════════════════════════════════
   IMMERSIVE FULLSCREEN MODE
══════════════════════════════════════════════════════════════ */

/* When immersive is active, lock scroll on body */
body.immersive-active {
    overflow: hidden;
}

body.immersive-active .app-nav {
    display: none;
}

body.immersive-active .app-sidebar {
    display: none;
}



body.immersive-active .viewer-topbar {
    display: none;
}

body.immersive-active .bottom-strip {
    display: none;
}

body.immersive-active .ai-panel {
    display: none;
}

body.immersive-active .roi-action-bar,
body.immersive-active #roiOverlay {
    display: none !important;
}

body.immersive-active .app-layout {
    grid-template-columns: 1fr;
}

body.immersive-active .viewer-layout {
    grid-template-columns: 1fr;
}

body.immersive-active .viewer-core {
    position: fixed;
    inset: 0;
    z-index: 1000;
}

/* The full-viewport overlay is now just a transparent HUD over the .viewer-core */
.immersive-overlay {
    position: fixed;
    inset: 0;
    z-index: 2000;
    pointer-events: none;
    display: flex;
    flex-direction: column;
    animation: immIn 0.25s cubic-bezier(0.22, 1, 0.36, 1);
}

.immersive-overlay>* {
    pointer-events: auto;
}

.immersive-overlay.hidden {
    display: none;
}

@keyframes immIn {
    from {
        opacity: 0;
        transform: scale(0.98);
    }

    to {
        opacity: 1;
        transform: none;
    }
}

/* ── OSD fills remaining space ── */
.imm-osd {
    position: absolute;
    inset: 0;
    z-index: 0;
}

/* ── Top HUD ── */
.imm-hud {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    z-index: 100;
    height: 48px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0 12px 0 76px;
    background: rgba(10, 10, 10, 0.94);
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
    border-bottom: 1px solid rgba(255, 255, 255, 0.1);
    gap: 8px;
    box-shadow: 0 2px 20px rgba(0, 0, 0, 0.5);
}


.imm-hud-left,
.imm-hud-center,
.imm-hud-right {
    display: flex;
    align-items: center;
    gap: 8px;
}

.imm-hud-center {
    flex: 1;
    justify-content: center;
}

.imm-logo {
    display: flex;
    align-items: center;
}

.imm-case {
    font-size: 11px;
    font-weight: 600;
    color: var(--text-primary);
    letter-spacing: 0.5px;
    white-space: nowrap;
}

.imm-sep {
    width: 1px;
    height: 16px;
    background: rgba(255, 255, 255, 0.12);
    flex-shrink: 0;
}

.imm-zoom {
    font-size: 12px;
    font-weight: 700;
    color: var(--blue-40);
    font-family: var(--font-mono);
}

.imm-mag {
    font-size: 11px;
    color: var(--text-helper);
    font-family: var(--font-mono);
    background: rgba(255, 255, 255, 0.06);
    padding: 2px 6px;
    border-radius: 2px;
}

.imm-tb-btn {
    height: 28px;
    padding: 0 10px;
    background: rgba(255, 255, 255, 0.06);
    border: 1px solid rgba(255, 255, 255, 0.08);
    color: var(--text-secondary);
    font-size: 11px;
    font-family: var(--font);
    cursor: pointer;
    transition: all 0.15s;
    border-radius: 2px;
}

.imm-tb-btn:hover {
    background: rgba(255, 255, 255, 0.12);
    color: var(--text-primary);
}

.imm-tb-btn.on,
.imm-tb-btn.toggle-btn.on {
    background: rgba(15, 98, 254, 0.2);
    border-color: var(--blue-60);
    color: var(--blue-40);
}

.imm-tool {
    height: 38px;
    width: 38px;
    padding: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    background: rgba(255, 255, 255, 0.08);
    border: 1px solid rgba(255, 255, 255, 0.12);
    color: rgba(255, 255, 255, 0.7);
    cursor: pointer;
    transition: all 0.15s;
    border-radius: 6px;
}

.imm-tool:hover {
    background: rgba(255, 255, 255, 0.18);
    color: #fff;
    border-color: rgba(255, 255, 255, 0.25);
}

.imm-tool.active {
    background: rgba(15, 98, 254, 0.3);
    border-color: #0f62fe;
    color: #78a9ff;
    box-shadow: 0 0 8px rgba(15, 98, 254, 0.3);
}

.imm-tool-group {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 3px;
}

.imm-tool-group__label {
    font-size: 9px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.8px;
    color: rgba(255, 255, 255, 0.35);
    line-height: 1;
}

.imm-tool-group__btns {
    display: flex;
    align-items: center;
    gap: 3px;
}

.imm-divider {
    width: 1px;
    height: 36px;
    background: rgba(255, 255, 255, 0.12);
    margin: 0 6px;
    flex-shrink: 0;
    align-self: center;
}

.imm-auto-snap {
    display: flex;
    align-items: center;
    gap: 5px;
    font-size: 11px;
    color: var(--text-secondary);
    cursor: pointer;
    user-select: none;
}

.imm-auto-snap input {
    accent-color: var(--blue-60);
}

.imm-snap-btn {
    display: flex;
    align-items: center;
    gap: 8px;
    height: 40px;
    padding: 0 22px;
    background: var(--blue-60);
    border: none;
    color: #fff;
    font-size: 14px;
    font-weight: 700;
    font-family: var(--font);
    letter-spacing: 0.4px;
    cursor: pointer;
    border-radius: 4px;
    transition: all 0.15s;
    box-shadow: 0 2px 12px rgba(15, 98, 254, 0.35);
}

.imm-snap-btn:hover {
    background: var(--blue-70);
    box-shadow: 0 4px 20px rgba(15, 98, 254, 0.5);
    transform: translateY(-1px);
}

.imm-exit-btn {
    display: flex;
    align-items: center;
    gap: 5px;
    height: 28px;
    padding: 0 12px;
    background: rgba(218, 30, 40, 0.15);
    border: 1px solid rgba(218, 30, 40, 0.4);
    color: #ff8389;
    font-size: 11px;
    font-weight: 600;
    font-family: var(--font);
    cursor: pointer;
    border-radius: 2px;
    transition: all 0.15s;
}

.imm-exit-btn:hover {
    background: rgba(218, 30, 40, 0.3);
    color: #fff;
}

.imm-expert-btn {
    height: 40px;
    padding: 0 22px;
    gap: 8px;
    font-size: 14px;
    font-weight: 700;
    letter-spacing: 0.4px;
    border-radius: 4px;
    background: linear-gradient(135deg, #0f62fe 0%, #6929c4 100%);
    border: none;
    color: #fff;
    box-shadow: 0 2px 12px rgba(15, 98, 254, 0.35);
}

.imm-expert-btn:hover {
    background: linear-gradient(135deg, #3d83ff 0%, #8a4ddb 100%);
    color: #fff;
    box-shadow: 0 4px 20px rgba(15, 98, 254, 0.5);
    transform: translateY(-1px);
}



/* ── AI Insight Strip (bottom right) ── */
.imm-ai-strip {
    position: absolute;
    bottom: 16px;
    left: 16px;
    z-index: 100;
    background: rgba(22, 22, 22, 0.88);
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 8px;
    backdrop-filter: blur(16px);
    -webkit-backdrop-filter: blur(16px);
    padding: 12px 16px;
    display: flex;
    flex-direction: column;
    gap: 6px;
    min-width: 220px;
    animation: aiStripIn 0.4s 0.15s both cubic-bezier(0.22, 1, 0.36, 1);
}

@keyframes aiStripIn {
    from {
        opacity: 0;
        transform: translateY(10px);
    }

    to {
        opacity: 1;
        transform: none;
    }
}

.imm-ai-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
}

.imm-ai-label {
    font-size: 11px;
    color: var(--text-secondary);
    font-family: var(--font);
}

.imm-ai-conf {
    font-size: 11px;
    font-weight: 700;
    font-family: var(--font-mono);
    padding: 1px 6px;
    border-radius: 2px;
}

.imm-ai-conf.high {
    background: rgba(244, 63, 94, 0.15);
    color: #f87171;
}

.imm-ai-conf.medium {
    background: rgba(245, 158, 11, 0.15);
    color: #fbbf24;
}

.imm-ai-conf.low {
    background: rgba(99, 102, 241, 0.15);
    color: var(--blue-40);
}

.imm-ai-hint {
    font-size: 9px;
    color: var(--text-helper);
    font-style: italic;
    padding-top: 4px;
    border-top: 1px solid rgba(255, 255, 255, 0.06);
    margin-top: 2px;
}

.imm-case-header {
    display: flex;
    align-items: center;
    gap: 6px;
    font-size: 10px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.8px;
    color: rgba(255, 255, 255, 0.5);
    padding-bottom: 6px;
    border-bottom: 1px solid rgba(255, 255, 255, 0.08);
    margin-bottom: 4px;
}

.imm-case-tags {
    display: flex;
    flex-wrap: wrap;
    gap: 4px;
    margin-bottom: 6px;
}

.imm-case-tags .imm-tag {
    font-size: 11px;
    font-weight: 600;
    padding: 2px 8px;
    border-radius: 10px;
    background: rgba(15, 98, 254, 0.15);
    color: #78a9ff;
}

.imm-case-tags .imm-tag--green {
    background: rgba(66, 190, 101, 0.15);
    color: #42be65;
}

.imm-case-clinical {
    font-size: 12px;
    color: rgba(255, 255, 255, 0.75);
    line-height: 1.5;
    max-width: 320px;
}

/* ── Immersive canvas overlays ── */
.imm-heatmap-canvas,
.imm-annot-canvas {
    position: absolute;
    inset: 0;
    pointer-events: none;
    z-index: 10;
}

.imm-annot-canvas {
    pointer-events: all;
}

.imm-cell-layer {
    position: absolute;
    inset: 0;
    pointer-events: none;
    z-index: 15;
}

/* ── Coords overlay (bottom left) ── */
.imm-coords {
    position: absolute;
    bottom: 12px;
    left: 260px;
    z-index: 100;
    font-size: 10px;
    font-family: var(--font-mono);
    color: rgba(255, 255, 255, 0.45);
    background: rgba(0, 0, 0, 0.4);
    padding: 4px 10px;
    border-radius: 3px;
    user-select: none;
}

/* ── Snapshot dialog inside immersive ── */
#immersiveOverlay .snapshot-dialog {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    z-index: 300;
}

/* ── Annotation mini-toolbar inside immersive ── */
#immersiveOverlay .annot-mini-toolbar {
    position: absolute;
    z-index: 300;
}

/* ── HoVer-Net loading spinner ── */
@keyframes spin {
    from {
        transform: rotate(0deg);
    }

    to {
        transform: rotate(360deg);
    }
}

.spin-icon {
    animation: spin 1s linear infinite;
    display: inline-block;
    vertical-align: middle;
}

/* ══════════════════════════════════════════════════════
   IHC SCORING — QuPath-style staining & IHC panel
══════════════════════════════════════════════════════ */

/* Layout */
.ihc-layout {
    display: flex;
    height: 100%;
    overflow: hidden;
    background: var(--cds-background);
}

/* Left Sidebar */
.ihc-sidebar {
    width: 280px;
    background: var(--cds-layer-01);
    border-right: 1px solid var(--cds-border-subtle-01);
    display: flex;
    flex-direction: column;
    flex-shrink: 0;
    overflow-y: auto;
    scrollbar-width: thin;
    scrollbar-color: var(--cds-layer-03) transparent;
}

.ihc-sidebar-header {
    display: flex;
    align-items: center;
    gap: 8px;
    height: 40px;
    padding: 0 16px;
    font-size: 12px;
    font-weight: 600;
    letter-spacing: 0.32px;
    text-transform: uppercase;
    color: var(--cds-text-secondary);
    border-bottom: 1px solid var(--cds-border-subtle-01);
    flex-shrink: 0;
}

.ihc-engine-badge {
    display: flex;
    align-items: center;
    gap: 6px;
    margin: 10px 16px 6px;
    padding: 6px 10px;
    background: rgba(69, 137, 255, 0.08);
    border: 1px solid rgba(69, 137, 255, 0.2);
    border-radius: 4px;
    font-size: 10px;
    color: var(--cds-blue-40);
    letter-spacing: 0.16px;
}

.ihc-slide-ctx {
    margin: 8px 16px;
    padding: 10px 12px;
    background: var(--cds-layer-02);
    border: 1px solid var(--cds-border-subtle-01);
    min-height: 48px;
    display: flex;
    align-items: center;
}

.ihc-slide-none {
    font-size: 11px;
    color: var(--cds-text-helper);
    font-style: italic;
    text-align: center;
    width: 100%;
}

.ihc-slide-label {
    font-size: 10px;
    letter-spacing: 0.32px;
    text-transform: uppercase;
    color: var(--cds-text-helper);
    margin-bottom: 4px;
}

.ihc-slide-name {
    font-size: 12px;
    font-weight: 600;
    color: var(--cds-text-primary);
    font-family: var(--font-mono);
    word-break: break-all;
}

.ihc-section-label {
    font-size: 11px;
    font-weight: 600;
    letter-spacing: 0.32px;
    text-transform: uppercase;
    color: var(--cds-text-helper);
    padding: 12px 16px 6px;
}

/* Assay List */
.ihc-assay-list {
    display: flex;
    flex-direction: column;
    gap: 2px;
    padding: 0 10px;
}

.ihc-assay-btn {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 10px 12px;
    background: transparent;
    border: 1px solid transparent;
    border-radius: 6px;
    cursor: pointer;
    transition: all 0.15s;
    text-align: left;
    width: 100%;
}

.ihc-assay-btn:hover {
    background: var(--cds-layer-hover-01);
    border-color: var(--cds-border-subtle-01);
}

.ihc-assay-btn.active {
    background: var(--cds-layer-02);
    border-color: var(--cds-interactive);
}

.ihc-assay-icon {
    width: 32px;
    height: 32px;
    border-radius: 8px;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}

.ihc-assay-text {
    flex: 1;
    min-width: 0;
}

.ihc-assay-name {
    font-size: 13px;
    font-weight: 600;
    color: var(--cds-text-primary);
}

.ihc-assay-sub {
    font-size: 11px;
    color: var(--cds-text-helper);
    margin-top: 1px;
}

.ihc-assay-arrow {
    font-size: 18px;
    color: var(--cds-text-helper);
    flex-shrink: 0;
    transition: color 0.15s;
}

.ihc-assay-btn.active .ihc-assay-arrow {
    color: var(--cds-interactive);
}

/* Run Button */
.ihc-run-btn {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    margin: 16px 16px 8px;
    padding: 10px 16px;
    background: linear-gradient(135deg, #0f62fe 0%, #6366f1 100%);
    border: none;
    color: #fff;
    font-size: 13px;
    font-weight: 700;
    font-family: var(--font);
    cursor: pointer;
    border-radius: 8px;
    letter-spacing: 0.3px;
    transition: all 0.2s;
    box-shadow: 0 2px 12px rgba(99, 102, 241, 0.4);
    flex-shrink: 0;
}

.ihc-run-btn:hover:not(:disabled) {
    transform: translateY(-1px);
    box-shadow: 0 4px 20px rgba(99, 102, 241, 0.55);
}

.ihc-run-btn:disabled {
    opacity: 0.45;
    cursor: not-allowed;
    background: var(--cds-layer-02);
    box-shadow: none;
}

/* Reference links */
.ihc-refs {
    margin: 12px 16px;
    padding-top: 12px;
    border-top: 1px solid var(--cds-border-subtle-01);
}

.ihc-ref-label {
    font-size: 10px;
    font-weight: 600;
    letter-spacing: 0.32px;
    text-transform: uppercase;
    color: var(--cds-text-helper);
    margin-bottom: 8px;
}

.ihc-ref-link {
    display: flex;
    align-items: center;
    gap: 6px;
    font-size: 11px;
    color: var(--cds-link-primary);
    text-decoration: none;
    margin-bottom: 6px;
    transition: color 0.15s;
}

.ihc-ref-link:hover {
    color: var(--cds-link-primary-hover);
    text-decoration: underline;
}

/* Center Main Panel */
.ihc-main {
    flex: 1;
    overflow-y: auto;
    padding: 24px;
    scrollbar-width: thin;
    scrollbar-color: var(--cds-layer-03) transparent;
}

/* State boxes */
.ihc-state-box {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    min-height: 320px;
    text-align: center;
}

.ihc-spinner {
    width: 36px;
    height: 36px;
    border: 3px solid var(--cds-layer-02);
    border-top-color: var(--cds-interactive);
    border-radius: 50%;
    animation: spin 0.9s linear infinite;
    margin-bottom: 16px;
}

.ihc-state-title {
    font-size: 16px;
    font-weight: 600;
    color: var(--cds-text-primary);
    margin-bottom: 8px;
}

.ihc-state-sub {
    font-size: 13px;
    color: var(--cds-text-helper);
    max-width: 400px;
    line-height: 1.5;
}

/* Result Panel */
.ihc-result-panel {
    animation: fadeInUp 0.4s ease;
}

@keyframes fadeInUp {
    from {
        opacity: 0;
        transform: translateY(12px);
    }

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

.ihc-result-header {
    display: flex;
    align-items: center;
    gap: 16px;
    margin-bottom: 24px;
    padding-bottom: 20px;
    border-bottom: 1px solid var(--cds-border-subtle-01);
}

.ihc-result-icon {
    width: 52px;
    height: 52px;
    border-radius: 12px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 10px;
    font-weight: 900;
    color: #fff;
    letter-spacing: 0;
    flex-shrink: 0;
    box-shadow: 0 4px 16px rgba(0, 0, 0, 0.3);
}

.ihc-result-title {
    font-size: 18px;
    font-weight: 700;
    color: var(--cds-text-primary);
    margin-bottom: 4px;
}

.ihc-result-sub {
    font-size: 12px;
    color: var(--cds-text-helper);
}

.ihc-result-badge {
    margin-left: auto;
    padding: 6px 14px;
    border-radius: 20px;
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 0.5px;
    text-transform: uppercase;
    background: var(--cds-layer-02);
    color: var(--cds-text-secondary);
    flex-shrink: 0;
}

.ihc-result-badge.high {
    background: rgba(244, 63, 94, 0.15);
    color: #f43f5e;
}

.ihc-result-badge.low {
    background: rgba(16, 185, 129, 0.15);
    color: #10b981;
}

.ihc-result-badge.mod {
    background: rgba(245, 158, 11, 0.15);
    color: #f59e0b;
}

.ihc-result-badge.pos {
    background: rgba(16, 185, 129, 0.15);
    color: #10b981;
}

.ihc-result-badge.neg {
    background: rgba(244, 63, 94, 0.15);
    color: #f43f5e;
}

.ihc-result-badge.weak {
    background: rgba(245, 158, 11, 0.15);
    color: #f59e0b;
}

/* ── Ki-67 Hero Donut ── */
.ihc-hero-metric {
    display: flex;
    align-items: center;
    gap: 32px;
    margin-bottom: 24px;
    padding: 20px 24px;
    background: var(--cds-layer-01);
    border: 1px solid var(--cds-border-subtle-01);
    border-radius: 12px;
}

.ihc-hero-circle {
    position: relative;
    width: 120px;
    height: 120px;
    flex-shrink: 0;
}

.ihc-donut {
    width: 120px;
    height: 120px;
    transform: rotate(-90deg);
}

.ihc-donut-label {
    position: absolute;
    inset: 0;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    text-align: center;
}

.ihc-donut-val {
    font-size: 22px;
    font-weight: 800;
    font-family: var(--font-mono);
    color: var(--cds-text-primary);
    line-height: 1;
}

.ihc-donut-unit {
    font-size: 10px;
    color: var(--cds-text-helper);
    letter-spacing: 0.4px;
    text-transform: uppercase;
    margin-top: 2px;
}

.ihc-hero-stats {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 12px;
    flex: 1;
}

.ihc-stat-block {
    background: var(--cds-layer-02);
    padding: 12px;
    border-radius: 8px;
    text-align: center;
}

.ihc-stat-val {
    font-size: 20px;
    font-weight: 700;
    font-family: var(--font-mono);
    color: var(--cds-text-primary);
    margin-bottom: 4px;
}

.ihc-stat-val.pos {
    color: #f43f5e;
}

.ihc-stat-val.neg {
    color: var(--cds-text-secondary);
}

.ihc-stat-val.accent {
    color: var(--cds-blue-40);
}

.ihc-stat-lbl {
    font-size: 10px;
    color: var(--cds-text-helper);
    letter-spacing: 0.32px;
    text-transform: uppercase;
}

/* ── DAB OD Bars ── */
.ihc-od-section {
    margin-bottom: 20px;
    padding: 16px;
    background: var(--cds-layer-01);
    border: 1px solid var(--cds-border-subtle-01);
    border-radius: 8px;
}

.ihc-od-label {
    font-size: 11px;
    font-weight: 600;
    letter-spacing: 0.32px;
    text-transform: uppercase;
    color: var(--cds-text-helper);
    margin-bottom: 12px;
}

.ihc-od-bars {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.ihc-od-row {
    display: flex;
    align-items: center;
    gap: 10px;
}

.ihc-od-name {
    font-size: 12px;
    font-weight: 600;
    width: 68px;
    flex-shrink: 0;
}

.ihc-od-name.pos {
    color: #f43f5e;
}

.ihc-od-name.neg {
    color: var(--cds-text-secondary);
}

.ihc-od-track {
    flex: 1;
    height: 6px;
    background: var(--cds-layer-02);
    border-radius: 3px;
    overflow: hidden;
}

.ihc-od-fill {
    height: 100%;
    border-radius: 3px;
    transition: width 1s ease;
}

.ihc-od-fill.pos {
    background: linear-gradient(90deg, #f43f5e, #fb923c);
}

.ihc-od-fill.neg {
    background: var(--cds-layer-03);
}

.ihc-od-num {
    font-size: 12px;
    font-family: var(--font-mono);
    color: var(--cds-text-secondary);
    width: 50px;
    text-align: right;
    flex-shrink: 0;
}

.ihc-threshold-row {
    display: flex;
    justify-content: space-between;
    margin-top: 12px;
    padding-top: 10px;
    border-top: 1px solid var(--cds-border-subtle-01);
}

.ihc-threshold-lbl {
    font-size: 11px;
    color: var(--cds-text-helper);
}

.ihc-threshold-val {
    font-size: 12px;
    font-family: var(--font-mono);
    color: var(--cds-text-secondary);
}

/* ── Interpretation Box ── */
.ihc-interp-box {
    display: flex;
    align-items: flex-start;
    gap: 12px;
    margin-bottom: 16px;
    padding: 14px 16px;
    background: rgba(69, 137, 255, 0.06);
    border: 1px solid rgba(69, 137, 255, 0.2);
    border-left: 3px solid var(--cds-interactive);
    border-radius: 0 6px 6px 0;
    font-size: 13px;
    color: var(--cds-text-secondary);
    line-height: 1.5;
}

.ihc-interp-icon {
    font-size: 16px;
    flex-shrink: 0;
    margin-top: 1px;
}

.ihc-ref-footer {
    font-size: 10px;
    color: var(--cds-text-helper);
    letter-spacing: 0.16px;
    padding-top: 12px;
    border-top: 1px solid var(--cds-border-subtle-01);
    font-family: var(--font-mono);
}

/* ── ER/PR Allred Grid ── */
.ihc-allred-grid {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 12px;
    margin-bottom: 24px;
    padding: 20px;
    background: var(--cds-layer-01);
    border: 1px solid var(--cds-border-subtle-01);
    border-radius: 12px;
}

.ihc-allred-card {
    text-align: center;
    padding: 16px 20px;
    background: var(--cds-layer-02);
    border-radius: 10px;
    min-width: 80px;
}

.ihc-allred-card.total {
    background: rgba(99, 102, 241, 0.1);
    border: 1px solid rgba(99, 102, 241, 0.3);
    min-width: 100px;
}

.ihc-allred-score {
    font-size: 36px;
    font-weight: 800;
    font-family: var(--font-mono);
    color: var(--cds-purple-40);
    line-height: 1;
    margin-bottom: 6px;
}

.ihc-allred-label {
    font-size: 11px;
    font-weight: 600;
    color: var(--cds-text-secondary);
    letter-spacing: 0.16px;
}

.ihc-allred-sub {
    font-size: 10px;
    color: var(--cds-text-helper);
    margin-top: 2px;
}

.ihc-allred-plus {
    font-size: 24px;
    font-weight: 700;
    color: var(--cds-text-helper);
}

/* ── Staining Distribution Bars ── */
.ihc-stain-bars {
    margin-bottom: 20px;
    padding: 16px;
    background: var(--cds-layer-01);
    border: 1px solid var(--cds-border-subtle-01);
    border-radius: 8px;
}

.ihc-stain-title {
    font-size: 11px;
    font-weight: 600;
    letter-spacing: 0.32px;
    text-transform: uppercase;
    color: var(--cds-text-helper);
    margin-bottom: 12px;
}

.ihc-stain-row {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-bottom: 8px;
}

.ihc-stain-lbl {
    font-size: 12px;
    color: var(--cds-text-secondary);
    width: 100px;
    flex-shrink: 0;
}

.ihc-stain-num {
    font-size: 12px;
    font-family: var(--font-mono);
    color: var(--cds-text-secondary);
    width: 44px;
    text-align: right;
    flex-shrink: 0;
}

/* ── ER/PR Metrics ── */
.ihc-erpr-metrics {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 12px;
    margin-bottom: 20px;
}

.ihc-erpr-metric {
    text-align: center;
    padding: 16px;
    background: var(--cds-layer-01);
    border: 1px solid var(--cds-border-subtle-01);
    border-radius: 8px;
}

.ihc-erpr-val {
    font-size: 28px;
    font-weight: 800;
    font-family: var(--font-mono);
    color: var(--cds-purple-40);
    margin-bottom: 4px;
}

.ihc-erpr-lbl {
    font-size: 11px;
    color: var(--cds-text-helper);
    letter-spacing: 0.16px;
}

/* ── PD-L1 Score Tricard ── */
.ihc-pdl1-scores {
    display: grid;
    grid-template-columns: 1fr 1fr 1fr;
    gap: 12px;
    margin-bottom: 24px;
}

.ihc-pdl1-card {
    text-align: center;
    padding: 20px 12px;
    border-radius: 12px;
    border: 1px solid var(--cds-border-subtle-01);
    background: var(--cds-layer-01);
    position: relative;
    overflow: hidden;
}

.ihc-pdl1-card::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 3px;
}

.ihc-pdl1-card.tps::before {
    background: linear-gradient(90deg, #ef4444, #f97316);
}

.ihc-pdl1-card.cps::before {
    background: linear-gradient(90deg, #0ea5e9, #06b6d4);
}

.ihc-pdl1-card.ic::before {
    background: linear-gradient(90deg, #8b5cf6, #6366f1);
}

.ihc-pdl1-val {
    font-size: 32px;
    font-weight: 800;
    font-family: var(--font-mono);
    color: var(--cds-text-primary);
    margin-bottom: 4px;
    line-height: 1;
}

.ihc-pdl1-lbl {
    font-size: 13px;
    font-weight: 700;
    color: var(--cds-text-secondary);
    margin-bottom: 4px;
}

.ihc-pdl1-desc {
    font-size: 10px;
    color: var(--cds-text-helper);
    letter-spacing: 0.16px;
}

/* ── IF Channel Cards ── */
.ihc-if-channels {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 12px;
    margin-bottom: 24px;
}

.ihc-if-card {
    padding: 16px;
    background: var(--cds-layer-01);
    border: 1px solid var(--cds-border-subtle-01);
    border-radius: 10px;
    position: relative;
    overflow: hidden;
}

.ihc-if-card-header {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-bottom: 12px;
}

.ihc-if-dot {
    width: 10px;
    height: 10px;
    border-radius: 50%;
    flex-shrink: 0;
}

.ihc-if-ch-label {
    font-size: 13px;
    font-weight: 600;
    color: var(--cds-text-primary);
}

.ihc-if-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 6px;
}

.ihc-if-stat {
    background: var(--cds-layer-02);
    padding: 8px;
    border-radius: 5px;
    text-align: center;
}

.ihc-if-stat-val {
    font-size: 15px;
    font-weight: 700;
    font-family: var(--font-mono);
    color: var(--cds-text-primary);
}

.ihc-if-stat-lbl {
    font-size: 9px;
    color: var(--cds-text-helper);
    text-transform: uppercase;
    letter-spacing: 0.32px;
    margin-top: 2px;
}

/* ── IF Co-expression ── */
.ihc-coex-box {
    text-align: center;
    padding: 20px;
    background: var(--cds-layer-01);
    border: 1px solid var(--cds-border-subtle-01);
    border-radius: 12px;
    margin-bottom: 20px;
    background: linear-gradient(135deg, rgba(16, 185, 129, 0.05), rgba(20, 184, 166, 0.05));
}

.ihc-coex-label {
    font-size: 11px;
    font-weight: 600;
    letter-spacing: 0.32px;
    text-transform: uppercase;
    color: var(--cds-text-helper);
    margin-bottom: 8px;
}

.ihc-coex-val {
    font-size: 36px;
    font-weight: 800;
    font-family: var(--font-mono);
    color: #10b981;
    margin-bottom: 4px;
}

.ihc-coex-sub {
    font-size: 12px;
    color: var(--cds-text-helper);
}

/* ── Right Panel ── */
.ihc-right {
    width: 240px;
    background: var(--cds-layer-01);
    border-left: 1px solid var(--cds-border-subtle-01);
    flex-shrink: 0;
    overflow-y: auto;
    scrollbar-width: thin;
    scrollbar-color: var(--cds-layer-03) transparent;
    padding-bottom: 20px;
}

/* History */
.ihc-history {
    margin: 0 10px;
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.ihc-history-empty {
    font-size: 11px;
    color: var(--cds-text-helper);
    font-style: italic;
    text-align: center;
    padding: 12px 0;
}

.ihc-history-item {
    padding: 8px 10px;
    background: var(--cds-layer-02);
    border-radius: 6px;
    border-left: 3px solid;
    cursor: pointer;
    transition: background 0.15s;
}

.ihc-history-item:hover {
    background: var(--cds-layer-hover-02);
}

.ihc-history-item-top {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 2px;
}

.ihc-history-assay {
    font-size: 11px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.32px;
}

.ihc-history-time {
    font-size: 10px;
    color: var(--cds-text-helper);
    font-family: var(--font-mono);
}

.ihc-history-result {
    font-size: 12px;
    color: var(--cds-text-secondary);
    font-family: var(--font-mono);
}

/* Guidelines */
.ihc-guidelines {
    margin: 0 10px;
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.ihc-guide-item {
    padding: 10px 12px;
    background: var(--cds-layer-02);
    border-radius: 6px;
}

.ihc-guide-title {
    font-size: 11px;
    font-weight: 700;
    color: var(--cds-text-secondary);
    margin-bottom: 6px;
    letter-spacing: 0.16px;
}

.ihc-guide-row {
    display: flex;
    justify-content: space-between;
    align-items: center;
    font-size: 11px;
    color: var(--cds-text-helper);
    padding: 2px 0;
}

.ihc-guide-pct {
    font-family: var(--font-mono);
    font-weight: 700;
    font-size: 12px;
}

/* Export Button */
.ihc-export-btn {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    margin: 0 10px;
    padding: 9px 14px;
    background: transparent;
    border: 1px solid var(--cds-border-strong-01);
    color: var(--cds-text-secondary);
    font-size: 12px;
    font-family: var(--font);
    cursor: pointer;
    border-radius: 6px;
    transition: all 0.15s;
    width: calc(100% - 20px);
}

.ihc-export-btn:hover {
    background: var(--cds-layer-hover-01);
    color: var(--cds-text-primary);
    border-color: var(--cds-interactive);
}

/* ══════════════════════════════════════════════════════════
   AI PANEL — CARBON v11 FULL REDESIGN
   Covers: Init panel · Model controls · Results · Details
══════════════════════════════════════════════════════════ */

/* ── Panel Content Wrapper ── */
.ai-panel-content {
    padding: 0;
    display: flex;
    flex-direction: column;
    flex: 1;
}

/* ── Typography Tokens ── */
.heading-01 {
    font-size: 14px;
    font-weight: 600;
    line-height: 1.28572;
    letter-spacing: 0.16px;
    color: var(--cds-text-primary);
}

.heading-02 {
    font-size: 20px;
    font-weight: 300;
    line-height: 1.4;
    letter-spacing: 0;
    color: var(--cds-text-primary);
}

.label-01 {
    font-size: 12px;
    font-weight: 400;
    line-height: 1.33333;
    letter-spacing: 0.32px;
    color: var(--cds-text-secondary);
}

.helper-text {
    color: var(--cds-text-helper);
}

/* ── Run All Section  ── */
.run-all-section {
    padding: var(--spacing-05);
    background: transparent;
    margin-bottom: 0;
}

/* ── PREMIUM AI INITIALIZE BUTTON ── */
.real-ai-btn {
    position: relative;
    width: 100%;
    height: 52px;
    background: linear-gradient(135deg, #0f62fe 0%, #7c3aed 50%, #db2777 100%);
    background-size: 250% 250%;
    border: none;
    border-radius: 4px;
    color: white;
    font-weight: 700;
    font-size: 12px;
    letter-spacing: 1.2px;
    text-transform: uppercase;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 12px;
    cursor: pointer;
    overflow: hidden;
    transition: all 0.3s cubic-bezier(0.16, 1, 0.3, 1);
    box-shadow: 0 4px 20px rgba(15, 98, 254, 0.4), 0 0 0 1px rgba(255, 255, 255, 0.06) inset;
    animation: runAllGradient 5s ease infinite;
}

.real-ai-btn:hover:not(:disabled) {
    transform: translateY(-2px);
    box-shadow: 0 10px 30px rgba(124, 58, 237, 0.5), 0 0 0 1px rgba(255, 255, 255, 0.12) inset;
}

.real-ai-btn:active:not(:disabled) {
    transform: translateY(0) scale(0.98);
    box-shadow: 0 2px 10px rgba(15, 98, 254, 0.4);
}

.real-ai-btn:disabled {
    background: var(--cds-layer-02);
    color: var(--cds-text-disabled);
    cursor: not-allowed;
    animation: none;
    box-shadow: none;
    border: 1px solid var(--cds-border-subtle-01);
}

.ai-btn-glow {
    position: absolute;
    top: -50%;
    left: -50%;
    width: 200%;
    height: 200%;
    background: radial-gradient(circle, rgba(255, 255, 255, 0.18) 0%, transparent 60%);
    opacity: 0;
    transition: opacity 0.4s;
    pointer-events: none;
}

.real-ai-btn:hover .ai-btn-glow {
    opacity: 1;
}

.real-ai-btn .btn-icon {
    display: flex;
    align-items: center;
    animation: pulseIcon 2.2s ease-in-out infinite;
}

/* ── Init Panel wrapper ── */
.ai-init-panel {
    padding: var(--spacing-05);
}

/* ── Hero card ── */
.ai-hero-card {
    background: var(--cds-layer-01);
    border: 1px solid var(--cds-border-subtle-01);
    border-radius: 4px;
    padding: var(--spacing-05);
    margin-bottom: var(--spacing-05);
    text-align: center;
    position: relative;
    overflow: hidden;
}

.ai-hero-card::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 2px;
    background: linear-gradient(90deg, #0f62fe, #7c3aed, #db2777);
}

.ai-hero-icon {
    width: 44px;
    height: 44px;
    background: linear-gradient(135deg, rgba(15, 98, 254, 0.12), rgba(124, 58, 237, 0.12));
    border-radius: 10px;
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 0 auto 12px;
    border: 1px solid rgba(15, 98, 254, 0.2);
}

.ai-hero-title {
    font-size: 15px;
    font-weight: 700;
    color: var(--cds-text-primary);
    letter-spacing: -0.1px;
    margin: 0;
}

.ai-hero-sub {
    font-size: 11px;
    color: var(--cds-text-helper);
    margin-top: 4px;
    letter-spacing: 0.32px;
}

/* ── Pipeline section label — Carbon label-01 ── */
.pipeline-label {
    font-size: 12px;
    font-weight: 600;
    letter-spacing: 0.32px;
    text-transform: uppercase;
    color: var(--cds-text-secondary);
    margin: 0 0 var(--spacing-04);
    padding-bottom: var(--spacing-03);
    border-bottom: 1px solid var(--cds-border-subtle-01);
}

/* ── Model Controls (first block removed — see consolidated block below) ── */

.model-control-top {
    display: contents;
}

.model-control-bottom {
    display: contents;
}

/* ── Model typography ── */
.model-name {
    font-size: 10px;
    font-weight: 600;
    letter-spacing: 0.32px;
    color: var(--cds-text-helper);
    line-height: 1;
    text-transform: uppercase;
    margin-bottom: 2px;
}

.model-desc {
    font-size: 12px;
    font-weight: 400;
    color: var(--cds-text-primary);
    letter-spacing: 0.16px;
    line-height: 1.3;
    overflow: hidden;
    text-overflow: ellipsis;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
}

/* ── Pipeline Status Chips (Carbon Tag shape) ── */
.run-all-chips {
    display: flex;
    gap: 4px;
    margin-top: 8px;
    flex-wrap: wrap;
}

.run-all-chip {
    display: inline-flex;
    align-items: center;
    gap: 3px;
    height: 18px;
    padding: 0 7px;
    background: var(--cds-layer-02);
    border-radius: 9px;
    font-size: 9px;
    font-weight: 600;
    color: var(--cds-text-helper);
    border: 1px solid var(--cds-border-subtle-01);
    letter-spacing: 0.2px;
    transition: all 0.15s ease;
}

.chip-dot {
    width: 5px;
    height: 5px;
    border-radius: 50%;
    background: var(--cds-layer-03);
    flex-shrink: 0;
    transition: background 0.2s, box-shadow 0.2s;
}

/* Idle */
.run-all-chip[data-state="idle"] .chip-dot {
    background: var(--cds-layer-03);
}

/* Running */
.run-all-chip[data-state="running"] {
    background: rgba(15, 98, 254, 0.1);
    border-color: rgba(69, 137, 255, 0.4);
    color: var(--cds-blue-40);
}

.run-all-chip[data-state="running"] .chip-dot {
    background: var(--cds-blue-50);
    box-shadow: 0 0 8px var(--cds-blue-50);
    animation: chipPulse 1.4s ease-in-out infinite;
}

/* Done */
.run-all-chip[data-state="done"] {
    background: rgba(66, 190, 101, 0.1);
    border-color: rgba(66, 190, 101, 0.3);
    color: var(--cds-green-40);
}

.run-all-chip[data-state="done"] .chip-dot {
    background: var(--cds-green-40);
}

/* Error */
.run-all-chip[data-state="error"] {
    background: rgba(218, 30, 40, 0.1);
    border-color: rgba(218, 30, 40, 0.3);
    color: var(--cds-red-40);
}

.run-all-chip[data-state="error"] .chip-dot {
    background: var(--cds-red-40);
}

/* ── Pipeline progress reveal ── */
.ai-suite-progress-reveal {
    background: var(--cds-layer-01);
    border: 1px solid var(--cds-border-subtle-01);
    border-radius: 4px;
    padding: var(--spacing-04) var(--spacing-05);
}

/* ── Pipeline active count ── */
.pipeline-active-count {
    font-size: 10px;
    color: var(--cds-text-helper);
    text-align: center;
    margin-top: 8px;
    letter-spacing: 0.2px;
}

/* ── Run All Card (for Run All section ── */
.run-all-section {
    padding: var(--spacing-05);
    background: transparent;
    margin-bottom: 0;
}

.run-all-card {
    border: 1px solid var(--cds-border-subtle-01);
    background: var(--cds-layer-01);
    padding: var(--spacing-05);
    position: relative;
    border-radius: 4px;
}

.run-all-card::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    bottom: 0;
    width: 3px;
    background: linear-gradient(to bottom, #0f62fe, #7c3aed);
    border-radius: 4px 0 0 4px;
}

.run-all-card-top {
    display: flex;
    align-items: center;
    gap: 10px;
}

.run-all-card-text {
    flex: 1;
    min-width: 0;
}

.run-all-card-title {
    font-size: 12px;
    font-weight: 700;
    color: var(--cds-text-primary);
    margin-bottom: 2px;
}

.run-all-card-sub {
    font-size: 10px;
    color: var(--cds-text-helper);
}

.run-all-card-icon {
    width: 32px;
    height: 32px;
    border-radius: 8px;
    background: linear-gradient(135deg, #0f62fe, #7c3aed);
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    box-shadow: 0 2px 8px rgba(15, 98, 254, 0.35);
}

/* ── Animations ── */
@keyframes runAllGradient {
    0% {
        background-position: 0% 50%;
    }

    50% {
        background-position: 100% 50%;
    }

    100% {
        background-position: 0% 50%;
    }
}

@keyframes pulseIcon {
    0% {
        transform: scale(1);
        opacity: 0.9;
    }

    50% {
        transform: scale(1.12);
        opacity: 1;
        filter: drop-shadow(0 0 4px rgba(255, 255, 255, 0.4));
    }

    100% {
        transform: scale(1);
        opacity: 0.9;
    }
}

@keyframes chipPulse {
    0% {
        box-shadow: 0 0 0 0 rgba(69, 137, 255, 0.6);
        transform: scale(1);
    }

    70% {
        box-shadow: 0 0 0 5px rgba(69, 137, 255, 0);
        transform: scale(1.15);
    }

    100% {
        box-shadow: 0 0 0 0 rgba(69, 137, 255, 0);
        transform: scale(1);
    }
}

#aiDetailsReveal {
    animation: slideUpReveal 0.5s cubic-bezier(0.16, 1, 0.3, 1);
}

@keyframes slideUpReveal {
    from {
        opacity: 0;
        transform: translateY(16px);
    }

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

/* ── Carbon btn sub-classes ── */
.cds--tile {
    background: var(--cds-layer-01);
    padding: var(--spacing-05);
    border-bottom: 1px solid var(--cds-border-subtle-01);
}

.cds--btn-primary {
    height: 32px;
    padding: 0 15px;
    background-color: var(--cds-interactive);
    color: white;
    border: none;
    font-family: inherit;
    font-size: 14px;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    gap: 8px;
    transition: background 0.1s;
}

.cds--btn-primary:hover {
    background-color: var(--cds-blue-70);
}

.cds--btn-primary:disabled {
    background-color: var(--cds-layer-03);
    color: var(--cds-text-disabled);
    cursor: not-allowed;
}

.run-all-ai-btn:hover:not(:disabled) {
    transform: translateY(-1px) scale(1.02);
    box-shadow: 0 4px 20px rgba(99, 102, 241, 0.6);
}

.run-all-ai-btn:disabled {
    opacity: 0.4;
    cursor: not-allowed;
    animation: none;
    background: var(--cds-layer-03);
    box-shadow: none;
}

.run-all-ai-btn.running {
    animation: runAllGradient 1.2s ease infinite;
    box-shadow: 0 0 20px rgba(99, 102, 241, 0.6);
}

.run-all-ai-icon {
    display: flex;
    align-items: center;
}

.run-all-ai-label {
    line-height: 1;
}

.run-all-ai-spinner {
    width: 11px;
    height: 11px;
    border: 2px solid rgba(255, 255, 255, 0.3);
    border-top-color: #fff;
    border-radius: 50%;
    animation: spin 0.8s linear infinite;
}

.run-all-ai-spinner.hidden {
    display: none;
}

/* ══ RESULTS SUMMARY REVEAL ══ */
.ai-summary-reveal {
    background: var(--cds-layer-01);
    border-top: 1px solid var(--cds-border-subtle-01);
    padding: var(--spacing-05);
    animation: carbonFadeIn 0.4s ease-out;
}

@keyframes carbonFadeIn {
    from {
        opacity: 0;
        transform: translateY(6px);
    }

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

.summary-section-title {
    font-size: 10px;
    font-weight: 700;
    letter-spacing: 1px;
    text-transform: uppercase;
    color: var(--cds-text-helper);
    margin-bottom: var(--spacing-04);
    display: flex;
    align-items: center;
    gap: 8px;
}

.summary-section-title::after {
    content: '';
    flex: 1;
    height: 1px;
    background: var(--cds-border-subtle-01);
}

/* ── Result Metric Cards (first block removed — see consolidated block below) ── */

.metric-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    color: var(--cds-text-helper);
    margin-bottom: 4px;
}

.metric-header .label-01 {
    font-size: 11px;
    font-weight: 600;
    letter-spacing: 0.32px;
    text-transform: uppercase;
    color: var(--cds-text-helper);
}

.metric-value {
    font-size: 20px;
    font-weight: 300;
    color: var(--cds-text-primary);
    margin: 4px 0 2px;
    font-family: var(--font-mono);
    letter-spacing: -0.2px;
    line-height: 1.2;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.metric-sub {
    font-size: 9px;
    color: var(--cds-text-helper);
    letter-spacing: 0.1px;
    margin-top: 2px;
}

.summary-link {
    display: block;
    font-size: 11px;
    color: var(--cds-link-primary) !important;
    text-align: center;
    padding: var(--spacing-02) 0;
    cursor: pointer;
    transition: color 0.1s;
}

.summary-link:hover {
    color: var(--cds-link-primary-hover) !important;
    text-decoration: underline;
}

/* ══ AI DETAILS SECTIONS ══ */
.ai-details-section {
    border-top: 1px solid var(--cds-border-subtle-01);
    padding: var(--spacing-05);
}

.section-divider {
    display: none;
}

/* now handled by border-top on parent */

.section-title {
    font-size: 13px;
    font-weight: 600;
    color: var(--cds-text-primary);
    margin-bottom: var(--spacing-02);
    letter-spacing: 0.1px;
    display: flex;
    align-items: center;
    gap: 6px;
}

/* ── Detail Groups ── */
.detail-group {
    margin-top: var(--spacing-05);
}

.detail-group:first-child {
    margin-top: 0;
}

.group-label {
    font-size: 10px;
    font-weight: 700;
    letter-spacing: 0.8px;
    text-transform: uppercase;
    color: var(--cds-text-helper);
    margin-bottom: var(--spacing-03);
    padding-bottom: var(--spacing-02);
    border-bottom: 1px solid var(--cds-border-subtle-01);
}

/* ── Morphology Hero ── */
.morph-hero {
    background: var(--cds-layer-02);
    border-left: 3px solid var(--cds-blue-60);
    padding: var(--spacing-04) var(--spacing-05);
    margin-bottom: var(--spacing-04);
    font-size: 13px;
    font-weight: 600;
    color: var(--cds-text-primary);
    line-height: 1.4;
}

/* ── Stats Grid ── */
.stats-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 1px;
    background: var(--cds-border-subtle-01);
    border: 1px solid var(--cds-border-subtle-01);
    margin-top: var(--spacing-03);
}

.stat-item {
    background: var(--cds-layer-01);
    padding: 10px;
}

.stat-item .label-01 {
    font-size: 10px;
    color: var(--cds-text-helper);
    letter-spacing: 0.2px;
}

.stat-item .stat-val {
    font-family: var(--font-mono);
    font-size: 14px;
    font-weight: 600;
    color: var(--cds-text-primary);
    margin-top: 2px;
    display: block;
}

/* ── Gland / Differentiation ── */
.gland-progress {
    margin-bottom: var(--spacing-04);
}

.progress-header {
    display: flex;
    justify-content: space-between;
    align-items: baseline;
    margin-bottom: 6px;
}

.progress-header .label-01 {
    font-size: 11px;
    color: var(--cds-text-secondary);
}

.progress-header .heading-02 {
    font-size: 16px;
    font-weight: 600;
    color: var(--cds-text-primary);
    font-family: var(--font-mono);
}

/* ── Carbon Progress Bars ── */
.cds--progress-bar-track {
    height: 6px;
    background: var(--cds-layer-03);
    overflow: hidden;
    border-radius: 3px;
}

.cds--progress-bar-track.small {
    height: 4px;
}

.cds--progress-bar-fill {
    height: 100%;
    background: var(--cds-interactive);
    border-radius: 3px;
    transition: width 0.8s cubic-bezier(0.16, 1, 0.3, 1);
}

.cds--progress-bar-fill.red {
    background: linear-gradient(90deg, #da1e28, #ff8389);
}

.cds--progress-bar-fill.teal {
    background: linear-gradient(90deg, #007d79, #3ddbd9);
}

.cds--progress-bar-fill.green {
    background: linear-gradient(90deg, #198038, #42be65);
}

/* ── Architecture Box ── */
.arch-box {
    display: flex;
    align-items: flex-start;
    gap: 8px;
    margin-top: var(--spacing-03);
    padding: var(--spacing-03) var(--spacing-04);
    background: var(--cds-layer-02);
    border-radius: 2px;
    flex-wrap: wrap;
}

.arch-box .label-01 {
    flex: 1;
    font-size: 12px;
    color: var(--cds-text-secondary);
    line-height: 1.4;
}

.conf-pill {
    background: var(--cds-layer-03);
    border: 1px solid var(--cds-border-subtle-02);
    padding: 2px 7px;
    border-radius: 10px;
    font-size: 10px;
    font-weight: 700;
    font-family: var(--font-mono);
    color: var(--cds-text-primary);
    flex-shrink: 0;
}

.gleason-info {
    width: 100%;
    font-size: 11px;
    color: var(--cds-text-helper);
    font-style: italic;
    padding-top: 4px;
}

/* ── Density Rows ── */
.density-rows {
    display: flex;
    flex-direction: column;
    gap: 10px;
}


.row-header {
    display: flex;
    justify-content: space-between;
    align-items: baseline;
    margin-bottom: 4px;
}

.row-header .label-01 {
    font-size: 11px;
}

.row-header .heading-01 {
    font-size: 13px;
    font-family: var(--font-mono);
    font-weight: 700;
    letter-spacing: 0;
}

/* ── Total Footer ── */
.total-footer {
    display: flex;
    justify-content: space-between;
    border-top: 1px solid var(--cds-border-subtle-01);
    padding-top: var(--spacing-04);
    margin-top: var(--spacing-05);
}

.total-footer .label-01 {
    font-size: 10px;
    color: var(--cds-text-helper);
}

.total-footer .heading-02 {
    font-size: 22px;
    font-weight: 300;
    font-family: var(--font-mono);
}

/* ── Attribution link ── */
.attribution {
    display: block;
    margin-top: var(--spacing-05);
    font-size: 10px;
    color: var(--cds-link-primary) !important;
    letter-spacing: 0.2px;
}

/* ── TIAToolbox ── */
.tia-class-list {
    display: flex;
    flex-direction: column;
    gap: 8px;
    margin-top: var(--spacing-03);
}

.tia-class-row {
    display: flex;
    align-items: center;
    gap: 10px;
}

.tia-class-row .label-01 {
    width: 88px;
    flex-shrink: 0;
    font-size: 10px;
    color: var(--cds-text-secondary);
}

.tia-bar-track {
    flex-grow: 1;
    height: 5px;
    background: var(--cds-layer-03);
    border-radius: 3px;
    overflow: hidden;
}

.tia-bar-fill {
    height: 100%;
    background: var(--cds-blue-40);
    border-radius: 3px;
    transition: width 0.9s cubic-bezier(0.16, 1, 0.3, 1);
}

.tia-bar-fill.tumor {
    background: linear-gradient(90deg, #da1e28, #ff8389);
}

.tia-bar-fill.stroma {
    background: linear-gradient(90deg, #198038, #42be65);
}

.tia-bar-fill.lymphocytes {
    background: linear-gradient(90deg, #007d79, #3ddbd9);
}

.tia-bar-fill.debris {
    background: var(--cds-gray-50);
}

.tia-bar-fill.normal {
    background: linear-gradient(90deg, #0043ce, #4589ff);
}

.stain-info {
    font-size: 12px;
    line-height: 2;
}

/* ── Pathomic Fusion ── */
.risk-hero {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: var(--spacing-05);
    background: var(--cds-layer-02);
    border-left: 3px solid var(--cds-green-40);
    margin-bottom: var(--spacing-05);
    border-radius: 2px;
}

.risk-score-box .label-01 {
    font-size: 10px;
    color: var(--cds-text-helper);
}

.risk-score-box .heading-02 {
    font-size: 28px;
    font-weight: 300;
    font-family: var(--font-mono);
    letter-spacing: -1px;
    color: var(--cds-text-primary);
}

.risk-level-pill {
    padding: 4px 10px;
    border-radius: 12px;
    font-size: 10px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.6px;
}

.risk-level-pill.high {
    background: rgba(218, 30, 40, 0.15);
    color: var(--cds-red-40);
    border: 1px solid rgba(218, 30, 40, 0.3);
}

.risk-level-pill.medium {
    background: rgba(241, 194, 27, 0.15);
    color: var(--cds-yellow-30);
    border: 1px solid rgba(241, 194, 27, 0.3);
}

.risk-level-pill.low {
    background: rgba(66, 190, 101, 0.15);
    color: var(--cds-green-40);
    border: 1px solid rgba(66, 190, 101, 0.3);
}

.attention-bars {
    display: flex;
    flex-direction: column;
    gap: var(--spacing-04);
}

.attn-row {
    display: flex;
    flex-direction: column;
    gap: var(--spacing-02);
}

.attn-row .label-01 {
    font-size: 11px;
}

.gen-list {
    display: flex;
    flex-direction: column;
    gap: var(--spacing-02);
}

.gen-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 6px var(--spacing-04);
    background: var(--cds-layer-01);
    border-left: 2px solid var(--cds-blue-60);
    font-size: 12px;
    border-radius: 0 2px 2px 0;
}

.gen-name {
    font-weight: 600;
    color: var(--cds-text-primary);
    font-size: 11px;
}

.gen-vaf {
    color: var(--cds-text-helper);
    font-family: var(--font-mono);
    font-size: 10px;
}

.gen-status {
    font-size: 10px;
    font-weight: 700;
    padding: 1px 5px;
    border-radius: 2px;
    text-transform: uppercase;
    letter-spacing: 0.3px;
}

.gen-status.mutated {
    background: rgba(218, 30, 40, 0.15);
    color: var(--cds-red-40);
}

.gen-status.deletion {
    background: rgba(165, 110, 255, 0.15);
    color: var(--cds-purple-40);
}

.gen-status.wild-type {
    background: rgba(66, 190, 101, 0.15);
    color: var(--cds-green-40);
}

/* ── Carbon Loading Inline ── */
.cds--inline-notification {
    display: flex;
    background: rgba(218, 30, 40, 0.08);
    border-left: 3px solid var(--cds-red-60);
    padding: var(--spacing-04);
    border-radius: 2px;
}

.cds--loading {
    width: 16px;
    height: 16px;
    animation: rotate 2s linear infinite;
}

.cds--loading__svg {
    fill: none;
    stroke: var(--cds-blue-50);
    stroke-width: 8;
    stroke-linecap: round;
}

@keyframes rotate {
    100% {
        transform: rotate(360deg);
    }
}

.cds--inline-loading {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: var(--spacing-03) 0;
}

.cds--inline-loading__text {
    font-size: 11px;
    color: var(--cds-text-helper);
    font-style: italic;
}

/* ── Carbon Link ── */
.cds--link {
    color: var(--cds-link-primary) !important;
    text-decoration: none;
    cursor: pointer;
    background: none;
    border: none;
    padding: 0;
    font-family: inherit;
    font-size: 11px;
}

.cds--link:hover {
    text-decoration: underline;
}

/* ── Empty state ── */
.empty-state {
    font-size: 11px;
    color: var(--cds-text-helper);
    padding: var(--spacing-04) 0;
    font-style: italic;
}

/* ── Run All Card top-level card ── */
.run-all-card {
    border: 1px solid var(--cds-border-subtle-01);
    background: var(--cds-layer-01);
    padding: var(--spacing-05);
    position: relative;
    border-radius: 4px;
}

.run-all-large-btn {
    width: 100%;
    justify-content: center !important;
    margin-bottom: var(--spacing-03);
}

/* REAL AI BUTTON - PREMIUM DESIGN */
.real-ai-btn {
    position: relative;
    width: 100%;
    height: 48px;
    background: linear-gradient(135deg, #0f62fe 0%, #8b5cf6 50%, #f43f5e 100%);
    background-size: 200% 200%;
    border: none;
    border-radius: 4px;
    color: white;
    font-weight: 700;
    font-size: 14px;
    letter-spacing: 1px;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 12px;
    cursor: pointer;
    overflow: hidden;
    transition: all 0.3s cubic-bezier(0.16, 1, 0.3, 1);
    box-shadow: 0 4px 15px rgba(15, 98, 254, 0.4);
    animation: runAllGradient 4s ease infinite;
}

.real-ai-btn:hover:not(:disabled) {
    transform: translateY(-2px) scale(1.02);
    box-shadow: 0 8px 25px rgba(139, 92, 246, 0.6);
}

.real-ai-btn:active:not(:disabled) {
    transform: translateY(0) scale(0.98);
}

.real-ai-btn:disabled {
    background: var(--cds-layer-03);
    color: var(--cds-text-disabled);
    cursor: not-allowed;
    animation: none;
    box-shadow: none;
}

.ai-btn-glow {
    position: absolute;
    top: -50%;
    left: -50%;
    width: 200%;
    height: 200%;
    background: radial-gradient(circle, rgba(255, 255, 255, 0.2) 0%, transparent 60%);
    opacity: 0;
    transition: opacity 0.3s;
    pointer-events: none;
}

.real-ai-btn:hover .ai-btn-glow {
    opacity: 1;
}

.real-ai-btn .btn-icon {
    display: flex;
    align-items: center;
    animation: pulseIcon 2s ease-in-out infinite;
}

@keyframes pulseIcon {
    0% {
        transform: scale(1);
        opacity: 0.9;
    }

    50% {
        transform: scale(1.15);
        opacity: 1;
        filter: drop-shadow(0 0 5px rgba(255, 255, 255, 0.5));
    }

    100% {
        transform: scale(1);
        opacity: 0.9;
    }
}

#aiDetailsReveal {
    animation: slideUpReveal 0.6s cubic-bezier(0.16, 1, 0.3, 1);
}

@keyframes slideUpReveal {
    from {
        opacity: 0;
        transform: translateY(20px);
    }

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

@keyframes runAllGradient {
    0% {
        background-position: 0% 50%;
    }

    50% {
        background-position: 100% 50%;
    }

    100% {
        background-position: 0% 50%;
    }
}

.run-all-ai-btn:hover:not(:disabled) {
    transform: translateY(-1px) scale(1.03);
    box-shadow: 0 4px 22px rgba(99, 102, 241, 0.7);
}

.run-all-ai-btn:disabled {
    opacity: 0.4;
    cursor: not-allowed;
    animation: none;
    background: var(--cds-layer-03);
    box-shadow: none;
}

.run-all-ai-btn.running {
    animation: runAllGradient 1.2s ease infinite;
    box-shadow: 0 0 20px rgba(99, 102, 241, 0.7), 0 0 40px rgba(244, 63, 94, 0.25);
}

.run-all-ai-icon {
    display: flex;
    align-items: center;
}

.run-all-ai-label {
    line-height: 1;
}

.run-all-ai-spinner {
    width: 11px;
    height: 11px;
    border: 2px solid rgba(255, 255, 255, 0.35);
    border-top-color: #fff;
    border-radius: 50%;
    animation: spin 0.8s linear infinite;
}

.run-all-ai-spinner.hidden {
    display: none;
}

/* ── AI Panel card ── */
.run-all-card {
    margin: 0 var(--spacing-05) var(--spacing-05);
    padding: var(--spacing-05);
    background: var(--cds-layer-01);
    border: 1px solid var(--cds-border-subtle-01);
    position: relative;
}

.run-all-card::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    bottom: 0;
    width: 4px;
    background: var(--cds-blue-60);
}

.run-all-card-top {
    display: flex;
    align-items: center;
    gap: 10px;
}

.run-all-card-icon {
    width: 34px;
    height: 34px;
    border-radius: 8px;
    background: linear-gradient(135deg, #0f62fe, #8b5cf6);
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    box-shadow: 0 2px 10px rgba(99, 102, 241, 0.4);
}

.run-all-card-text {
    flex: 1;
    min-width: 0;
}

.run-all-card-title {
    font-size: 12px;
    font-weight: 700;
    color: var(--cds-text-primary);
    margin-bottom: 2px;
    letter-spacing: 0.1px;
}

.run-all-card-sub {
    font-size: 10px;
    color: var(--cds-text-helper);
    letter-spacing: 0.16px;
}

.run-all-card-btn {
    /* Inherits from .cds--btn but has specific margin */
    margin-top: var(--spacing-04);
}

.run-all-card-btn:hover:not(:disabled) {
    transform: translateY(-1px);
    box-shadow: 0 4px 16px rgba(99, 102, 241, 0.6);
}

.run-all-card-btn:disabled {
    opacity: 0.4;
    cursor: not-allowed;
    background: var(--cds-layer-03);
    box-shadow: none;
}

/* ── Pipeline status chips ── */
.run-all-chips {
    display: flex;
    gap: 6px;
    margin-top: 10px;
    flex-wrap: wrap;
}

.run-all-chip {
    display: inline-flex;
    align-items: center;
    height: 20px;
    padding: 0 6px;
    background: var(--cds-layer-03);
    border-radius: 10px;
    font-size: 10px;
    color: var(--cds-text-secondary);
    border: 1px solid transparent;
    transition: all var(--tr-fast);
    white-space: nowrap;
    gap: 4px;
}

/* Individual Model Controls — Carbon v11 Tile */
.individual-model-controls {
    display: flex;
    flex-direction: column;
    gap: 1px;
    background: var(--cds-border-subtle-01);
    border-radius: 0;
    overflow: hidden;
}

.model-control-item {
    display: grid;
    grid-template-columns: 36px 1fr auto auto;
    align-items: center;
    gap: 0 8px;
    padding: 8px 10px;
    background: var(--cds-layer-01);
    border: none;
    border-left: 3px solid transparent;
    transition: background 0.1s;
    min-height: 44px;
}

.model-control-item:hover {
    background: var(--cds-layer-hover-01);
    border-left-color: var(--cds-blue-60);
}

.model-control-item.model-disabled {
    opacity: 0.32;
    filter: saturate(0.1);
}

.model-control-item.model-disabled .model-name {
    text-decoration: line-through;
    text-decoration-color: rgba(255, 255, 255, 0.12);
}

/* ── Carbon Toggle (small) ── */
.model-toggle-wrap {
    position: relative;
    display: inline-flex;
    align-items: center;
    cursor: pointer;
    flex-shrink: 0;
}

.model-toggle-input {
    position: absolute;
    opacity: 0;
    width: 0;
    height: 0;
}

.model-toggle-track {
    display: flex;
    align-items: center;
    width: 32px;
    height: 16px;
    background: var(--cds-layer-03);
    border-radius: 8px;
    border: 1px solid var(--cds-border-subtle-02);
    transition: background 0.15s var(--tr-productive), border-color 0.15s var(--tr-productive);
    position: relative;
}

.model-toggle-thumb {
    position: absolute;
    left: 2px;
    width: 10px;
    height: 10px;
    border-radius: 50%;
    background: var(--cds-text-helper);
    transition: transform 0.15s cubic-bezier(0.34, 1.56, 0.64, 1), background 0.15s;
}

.model-toggle-input:checked+.model-toggle-track {
    background: var(--cds-blue-60);
    border-color: var(--cds-blue-60);
}

.model-toggle-input:checked+.model-toggle-track .model-toggle-thumb {
    transform: translateX(16px);
    background: #fff;
}

.model-toggle-wrap:hover .model-toggle-track {
    border-color: var(--cds-blue-50);
}

.model-info {
    flex: 1;
    min-width: 0;
}

.model-actions {
    display: flex;
    align-items: center;
    gap: 8px;
    flex-shrink: 0;
}

.model-run-btn {
    min-height: 24px !important;
    padding: 4px 14px !important;
    font-size: 11px !important;
    font-weight: 600 !important;
    letter-spacing: 0.16px !important;
    border: 1px solid var(--cds-blue-60) !important;
    color: var(--cds-blue-40) !important;
    background: transparent !important;
    border-radius: 0 !important;
    text-transform: uppercase;
    transition: all 0.1s var(--tr-productive) !important;
    cursor: pointer;
}

.model-run-btn:hover:not(:disabled) {
    background: var(--cds-blue-60) !important;
    color: #fff !important;
    border-color: var(--cds-blue-60) !important;
}

.model-run-btn:disabled {
    opacity: 0.25;
    pointer-events: none;
    border-color: var(--cds-border-disabled) !important;
    color: var(--cds-text-disabled) !important;
    background: transparent !important;
}

.chip-dot {
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: var(--cds-layer-03);
    flex-shrink: 0;
    transition: background 0.15s, box-shadow 0.15s;
}

.run-all-chip[data-state="idle"] .chip-dot { background: var(--cds-layer-03); }

.run-all-chip[data-state="running"] {
    background: rgba(15, 98, 254, 0.06);
    border-color: var(--cds-blue-60);
    color: var(--cds-blue-40);
}
.run-all-chip[data-state="running"] .chip-dot {
    background: var(--cds-blue-60);
    animation: chipPulse 1.2s ease-in-out infinite;
}
@keyframes chipPulse {
    0%, 100% { box-shadow: 0 0 0 0 rgba(15,98,254,0.5); transform: scale(1); }
    50% { box-shadow: 0 0 0 4px rgba(15,98,254,0); transform: scale(1.15); }
}

.run-all-chip[data-state="done"] {
    border-color: rgba(66,190,101,0.25);
    color: var(--cds-support-success);
}
.run-all-chip[data-state="done"] .chip-dot { background: var(--cds-support-success); }

.run-all-chip[data-state="error"] {
    border-color: rgba(255,131,137,0.25);
    color: var(--cds-support-error);
}
.run-all-chip[data-state="error"] .chip-dot { background: var(--cds-support-error); }

/* ══════════════════════════════════════════════════════════
   AI PANEL — CARBON v11 REFACTOR
══════════════════════════════════════════════════════════ */

.ai-panel-content {
    padding: var(--spacing-05);
    display: flex;
    flex-direction: column;
    gap: var(--spacing-06);
}

/* Typography Tokens */
.heading-01 {
    font-size: 14px;
    font-weight: 600;
    line-height: 1.28572;
    letter-spacing: 0.16px;
    color: var(--cds-text-primary);
}

/* ── TIAToolbox Chart ── */
.tia-class-list {
    display: flex;
    flex-direction: column;
    gap: 8px;
    margin-top: 8px;
}

.tia-class-row {
    display: flex;
    align-items: center;
    gap: 12px;
}

.tia-class-row .label-01 {
    width: 90px;
    flex-shrink: 0;
    font-size: 11px;
    color: var(--cds-text-secondary);
}

.tia-bar-track {
    flex-grow: 1;
    height: 4px;
    background: var(--cds-layer-03);
    border-radius: 2px;
    overflow: hidden;
}

.tia-bar-fill {
    height: 100%;
    background: var(--cds-blue-40);
    border-radius: 2px;
    transition: width 0.8s cubic-bezier(0.16, 1, 0.3, 1);
}

.tia-bar-fill.tumor {
    background: var(--cds-red-50);
}

.tia-bar-fill.stroma {
    background: var(--cds-green-50);
}

.tia-bar-fill.lymphocytes {
    background: var(--cds-teal-50);
}

.tia-bar-fill.debris {
    background: var(--cds-gray-50);
}

.tia-bar-fill.normal {
    background: var(--cds-blue-50);
}

.heading-02 {
    font-size: 20px;
    font-weight: 400;
    line-height: 1.4;
    letter-spacing: 0;
    color: var(--cds-text-primary);
}

.label-01 {
    font-size: 12px;
    font-weight: 400;
    line-height: 1.33333;
    letter-spacing: 0.32px;
    color: var(--cds-text-secondary);
}

.helper-text {
    color: var(--cds-text-helper);
}

/* Components */
.cds--tile {
    background: var(--cds-layer-01);
    padding: var(--spacing-05);
    border-bottom: 1px solid var(--cds-border-subtle-01);
}

.cds--btn-primary {
    height: 32px;
    padding: 0 15px;
    background-color: var(--cds-interactive);
    color: white;
    border: none;
    font-family: inherit;
    font-size: 14px;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    gap: 8px;
    transition: background 0.1s;
}

.cds--btn-primary:hover {
    background-color: var(--cds-blue-70);
}

.cds--btn-primary:disabled {
    background-color: var(--cds-layer-03);
    color: var(--cds-text-disabled);
    cursor: not-allowed;
}

/* Run All Card */
.run-all-card {
    border: 1px solid var(--cds-border-subtle-01);
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.3);
}

.run-all-card-top {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    margin-bottom: var(--spacing-06);
}

.run-all-btn {
    border-radius: 2px;
}

/* Results Reveal */
.ai-summary-reveal {
    background: var(--cds-layer-01);
    padding: var(--spacing-05);
    border: 1px solid var(--cds-border-subtle-01);
    animation: carbonFadeIn 0.4s ease-out;
}

@keyframes carbonFadeIn {
    from {
        opacity: 0;
        transform: translateY(4px);
    }

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

.summary-section-title {
    margin-bottom: var(--spacing-04);
}

.summary-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 1px;
    background: var(--cds-border-subtle-01);
    border-radius: 4px;
    overflow: hidden;
    margin-bottom: var(--spacing-05);
}

.summary-metric-card {
    background: var(--cds-layer-01);
    padding: 12px 14px;
    border: none;
    border-top: 3px solid var(--cds-blue-60);
    transition: background 0.1s var(--tr-productive);
    overflow: hidden;
}

.summary-metric-card:hover {
    background: var(--cds-layer-hover-01);
}

#summaryHeatmapCard { border-top-color: var(--cds-blue-60); }
#summaryHoverCard   { border-top-color: #009d9a; }
#summaryIhcCard     { border-top-color: var(--cds-purple-60); }
#summaryTiaCard     { border-top-color: #da1e28; }
#summaryPathomicCard { border-top-color: var(--cds-green-40); }
#summaryVisionCard  { border-top-color: #f1c21b; }
#summaryOrganCard   { border-top-color: #f59e0b; }

.metric-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    color: var(--cds-text-helper);
    margin-bottom: 4px;
}

.metric-value {
    font-size: 16px;
    font-weight: 400;
    font-family: var(--font-mono);
    letter-spacing: -0.3px;
    line-height: 1.25;
    margin: 2px 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.cds--link {
    color: var(--cds-link-primary);
    text-decoration: none;
    cursor: pointer;
    background: none;
    border: none;
    padding: 0;
    font-family: inherit;
}

.cds--link:hover {
    text-decoration: underline;
}

/* Morphology stats */
.stats-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 1px;
    background: var(--cds-border-subtle-01);
    border: 1px solid var(--cds-border-subtle-01);
}

.stat-item {
    background: var(--cds-layer-01);
    padding: var(--spacing-04);
}

.stat-val {
    margin-top: 4px;
}

/* Progress Bars */
.cds--progress-bar-track {
    height: 8px;
    background: var(--cds-layer-03);
    overflow: hidden;
}

.cds--progress-bar-track.small {
    height: 4px;
}

.cds--progress-bar-fill {
    height: 100%;
    background: var(--cds-interactive);
    transition: width 0.8s ease-out;
}

.cds--progress-bar-fill.red {
    background: var(--cds-red-40);
}

.cds--progress-bar-fill.teal {
    background: var(--cds-teal-40);
}

.cds--progress-bar-fill.green {
    background: var(--cds-green-40);
}

/* Notifications */
.cds--inline-notification {
    display: flex;
    background: rgba(218, 30, 40, 0.1);
    border-left: 3px solid var(--cds-red-60);
    padding: var(--spacing-04);
}

/* Loading */
.cds--loading {
    width: 16px;
    height: 16px;
    animation: rotate 2s linear infinite;
}

.cds--loading__svg {
    fill: none;
    stroke: var(--cds-interactive);
    stroke-width: 8;
    stroke-linecap: round;
}

@keyframes rotate {
    100% {
        transform: rotate(360deg);
    }
}

.cds--inline-loading {
    display: flex;
    align-items: center;
    gap: 8px;
}

/* Specific details */
.detail-group {
    margin-top: var(--spacing-07);
}

.group-label {
    margin-bottom: var(--spacing-04);
    letter-spacing: 0.5px;
}

.morph-hero {
    background: var(--cds-layer-02);
    padding: var(--spacing-05);
    margin-bottom: var(--spacing-04);
    border-radius: 2px;
}

.gland-progress {
    margin-bottom: var(--spacing-05);
}

.progress-header {
    display: flex;
    justify-content: space-between;
    align-items: baseline;
    margin-bottom: 4px;
}

.arch-box {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-top: var(--spacing-04);
}

.conf-pill {
    background: var(--cds-layer-03);
    padding: 2px 6px;
    border-radius: 10px;
    font-size: 10px;
    font-weight: 600;
}

.total-footer {
    display: flex;
    justify-content: space-between;
    border-top: 1px solid var(--cds-border-subtle-01);
    padding-top: var(--spacing-05);
    margin-top: var(--spacing-06);
}

/* ── Pathomic Fusion Styles ── */
.risk-hero {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: var(--spacing-04);
    background: var(--cds-layer-02);
    border-radius: 4px;
    margin-bottom: var(--spacing-05);
}

.risk-level-pill {
    padding: var(--spacing-02) var(--spacing-04);
    border-radius: 12px;
    font-size: 11px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.32px;
}

.risk-level-pill.high {
    background: var(--cds-red-60);
    color: #fff;
}

.risk-level-pill.medium {
    background: var(--cds-yellow-30);
    color: #000;
}

.risk-level-pill.low {
    background: var(--cds-green-50);
    color: #fff;
}

.attention-bars {
    display: flex;
    flex-direction: column;
    gap: var(--spacing-04);
}

.attn-row {
    display: flex;
    flex-direction: column;
    gap: var(--spacing-02);
}

.gen-list {
    display: flex;
    flex-direction: column;
    gap: var(--spacing-03);
}

.gen-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: var(--spacing-02) var(--spacing-03);
    background: var(--cds-layer-01);
    border-left: 2px solid var(--cds-blue-60);
    font-size: 12px;
}

.gen-name {
    font-weight: 600;
    color: var(--cds-text-primary);
}

.gen-status {
    font-size: 11px;
    padding: 0 4px;
    border-radius: 2px;
}

.gen-status.mutated {
    background: rgba(218, 30, 40, 0.2);
    color: var(--cds-red-40);
}

.gen-status.deletion {
    background: rgba(165, 110, 255, 0.2);
    color: var(--cds-purple-40);
}

.gen-status.wild-type {
    background: rgba(66, 190, 101, 0.2);
    color: var(--cds-green-40);
}

.gen-vaf {
    color: var(--cds-text-helper);
    font-family: var(--font-mono);
}

/* ── CLINICAL CHAT DRAWER ── */
.chat-drawer {
    position: fixed;
    bottom: 80px;
    right: 24px;
    width: 320px;
    height: 480px;
    background: var(--cds-layer-01);
    border: 1px solid var(--cds-border-subtle-01);
    box-shadow: 0 12px 32px rgba(0, 0, 0, 0.5);
    display: none;
    flex-direction: column;
    z-index: 2000;
}

.chat-drawer.active {
    display: flex;
}

.chat-drawer-header {
    padding: 12px 16px;
    background: var(--cds-layer-02);
    border-bottom: 1px solid var(--cds-border-subtle-01);
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.chat-drawer-msgs {
    flex: 1;
    padding: 16px;
    overflow-y: auto;
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.chat-drawer-input {
    padding: 12px;
    background: var(--cds-layer-02);
    border-top: 1px solid var(--cds-border-subtle-01);
    display: flex;
    gap: 8px;
}

.chat-toggle-btn {
    position: fixed;
    bottom: 24px;
    right: 24px;
    width: 48px;
    height: 48px;
    background: var(--cds-blue-60);
    color: white;
    border: none;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    box-shadow: 0 4px 12px rgba(15, 98, 254, 0.4);
    z-index: 1001;
    transition: transform 0.2s cubic-bezier(0.2, 0, 0.38, 0.9);
}

.chat-toggle-btn:hover {
    transform: scale(1.1);
    background: var(--cds-blue-70);
}

.msg {
    max-width: 85%;
    padding: 10px 14px;
    font-size: 13px;
    line-height: 1.4;
    border-radius: 2px;
}

.msg.in {
    background: var(--cds-layer-02);
    align-self: flex-start;
    border: 1px solid var(--cds-border-subtle-01);
}

.msg.out {
    background: var(--cds-blue-60);
    color: white;
    align-self: flex-end;
}

/* ── AI SUMMARY CONSOLE ── */
.ai-summary-console {
    background: var(--cds-layer-02);
    border: 1px solid var(--cds-border-subtle-01);
    border-left: 4px solid var(--cds-blue-60);
    border-radius: 4px;
    padding: 16px;
    margin-top: 24px;
    margin-bottom: 24px;
}

.ai-summary-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 12px;
}

.ai-summary-title {
    font-size: 13px;
    font-weight: 600;
    color: var(--cds-text-primary);
    display: flex;
    align-items: center;
    gap: 8px;
}

.ai-summary-badge {
    background: var(--cds-blue-60);
    color: white;
    font-size: 10px;
    padding: 2px 8px;
    border-radius: 10px;
    text-transform: uppercase;
}

.ai-summary-content {
    background: var(--cds-layer-01);
    padding: 12px;
    border-radius: 2px;
    font-size: 13px;
    line-height: 1.6;
    color: var(--cds-text-secondary);
    font-family: var(--font-mono);
}

.ai-summary-actions {
    display: flex;
    gap: 12px;
    margin-top: 12px;
}

.sync-btn {
    font-size: 12px;
    color: var(--cds-link-primary);
    background: none;
    border: none;
    cursor: pointer;
    font-weight: 500;
    display: flex;
    align-items: center;
    gap: 4px;
    padding: 0;
}

.sync-btn:hover {
    text-decoration: underline;
}

/* Organ Subspecialty AI Buttons */
.organ-btn {
    padding: 4px 10px;
    font-size: 10px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    border: 1px solid rgba(255,255,255,0.1);
    border-radius: 14px;
    background: rgba(255,255,255,0.03);
    color: rgba(255,255,255,0.5);
    cursor: pointer;
    transition: all 0.2s;
}
.organ-btn:hover {
    background: rgba(245,158,11,0.1);
    border-color: rgba(245,158,11,0.3);
    color: rgba(255,255,255,0.8);
}
.organ-btn.active {
    background: rgba(245,158,11,0.15);
    border-color: #f59e0b;
    color: #f59e0b;
    box-shadow: 0 0 8px rgba(245,158,11,0.15);
}
/* ── Organ Context Bar — Carbon notification style ── */
.organ-context-bar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 8px 16px;
    background: var(--cds-layer-01);
    border-bottom: 1px solid var(--cds-border-subtle-01);
    border-left: 3px solid #f59e0b;
    gap: 16px;
}

.organ-bar-left {
    display: flex;
    align-items: center;
    gap: 10px;
    flex-shrink: 0;
}

.organ-bar-icon {
    width: 28px;
    height: 28px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: rgba(245,158,11,0.12);
    border: none;
    border-radius: 4px;
}

.organ-bar-title {
    display: flex;
    flex-direction: column;
    gap: 1px;
}

.organ-bar-heading {
    font-size: 12px;
    font-weight: 600;
    color: var(--cds-text-primary);
    letter-spacing: 0.16px;
    text-transform: uppercase;
}

.organ-bar-sub {
    font-size: 11px;
    color: var(--cds-text-helper);
    white-space: nowrap;
    letter-spacing: 0.16px;
}

.organ-bar-pills {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    justify-content: flex-end;
}

.organ-bar-btn {
    padding: 4px 12px;
    font-size: 11px;
    font-weight: 400;
    text-transform: uppercase;
    letter-spacing: 0.32px;
    border: none;
    border-radius: 100px;
    background: var(--cds-layer-02);
    color: var(--cds-text-secondary);
    cursor: pointer;
    transition: all 0.1s var(--tr-productive);
    line-height: 1.4;
}
.organ-bar-btn:hover {
    background: var(--cds-layer-hover-02);
    color: var(--cds-text-primary);
}
.organ-bar-btn.active {
    background: #f59e0b;
    color: #161616;
    font-weight: 600;
}

.organ-grading-card {
    background: rgba(255,255,255,0.03);
    border: 1px solid rgba(255,255,255,0.06);
    border-radius: 6px;
    padding: 10px 12px;
}
.organ-grading-card .og-label {
    font-size: 10px;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    color: rgba(255,255,255,0.4);
    margin-bottom: 2px;
}

/* ── ROI Selection Tool ── */
.roi-overlay {
    position: absolute;
    top: 0; left: 0; right: 0; bottom: 0;
    z-index: 50;
    cursor: crosshair;
}

.roi-rect {
    position: absolute;
    border: 2px solid var(--cds-blue-60);
    background: rgba(15, 98, 254, 0.06);
    box-shadow: 0 0 0 9999px rgba(0, 0, 0, 0.3);
    pointer-events: none;
    transition: none;
}

.roi-rect.confirmed {
    border: 2px solid var(--cds-blue-60);
    background: rgba(15, 98, 254, 0.04);
    box-shadow: 0 0 0 9999px rgba(0, 0, 0, 0.4);
}

.roi-action-bar {
    position: absolute;
    z-index: 55;
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 0;
    background: var(--cds-layer-01);
    border: 1px solid var(--cds-border-subtle-01);
    border-radius: 0;
    box-shadow: 0 2px 6px rgba(0,0,0,0.3);
    overflow: hidden;
}

.roi-dims {
    font-size: 11px;
    font-family: var(--font-mono);
    color: var(--cds-text-secondary);
    white-space: nowrap;
    padding: 7px 12px;
    letter-spacing: 0.16px;
}

.roi-analyze-btn {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 7px 16px;
    font-size: 12px;
    font-weight: 400;
    color: #fff;
    background: var(--cds-blue-60);
    border: none;
    border-radius: 0;
    cursor: pointer;
    transition: background 0.1s var(--tr-productive);
    letter-spacing: 0.16px;
}

.roi-analyze-btn:hover {
    background: #0353e9;
}

.roi-cancel-btn {
    width: 32px;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 12px;
    color: var(--cds-text-helper);
    background: transparent;
    border: none;
    border-left: 1px solid var(--cds-border-subtle-01);
    border-radius: 0;
    cursor: pointer;
    transition: background 0.1s;
    padding: 7px 0;
}

.roi-cancel-btn:hover {
    color: var(--cds-support-error);
    background: rgba(218,30,40,0.08);
}

#btnROISelect.active {
    background: rgba(15, 98, 254, 0.2);
    color: #0f62fe;
    border-color: #0f62fe;
}
.organ-grading-card .og-value {
    font-size: 13px;
    font-weight: 600;
    color: rgba(255,255,255,0.85);
}
.organ-model-row {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 6px 10px;
    background: rgba(255,255,255,0.02);
    border-radius: 4px;
    border-left: 2px solid #f59e0b;
}
.organ-model-row .model-dot {
    width: 6px; height: 6px;
    border-radius: 50%;
    background: #22c55e;
}
.organ-model-row .model-label {
    font-size: 11px;
    color: rgba(255,255,255,0.7);
    flex: 1;
}
.organ-model-row .model-conf {
    font-size: 10px;
    color: rgba(255,255,255,0.4);
}

/* ══════════════════════════════════════════════════════════
   TISSUE LIBRARY MODAL — Carbon v11
══════════════════════════════════════════════════════════ */
.tl-modal-overlay {
    position: fixed; inset: 0;
    background: rgba(0,0,0,0.7);
    backdrop-filter: blur(4px);
    z-index: 9999;
    display: flex; align-items: center; justify-content: center;
    animation: tlFadeIn 0.2s ease;
}
@keyframes tlFadeIn { from { opacity: 0; transform: scale(0.97) } to { opacity: 1; transform: scale(1) } }

.tl-modal {
    background: var(--cds-background, #161616);
    border: 1px solid var(--cds-border-subtle-01, #393939);
    width: 820px; max-width: 92vw;
    max-height: 82vh;
    display: flex; flex-direction: column;
    box-shadow: 0 24px 80px rgba(0,0,0,0.5);
}

.tl-header {
    display: flex; justify-content: space-between; align-items: center;
    padding: 16px 20px;
    background: var(--cds-layer-01, #262626);
    border-bottom: 1px solid var(--cds-border-subtle-01);
}
.tl-header-left {
    display: flex; align-items: center; gap: 10px;
}
.tl-header-title {
    font-size: 14px; font-weight: 600;
    letter-spacing: 0.16px;
    color: var(--cds-text-primary);
}
.tl-header-count {
    font-size: 10px; font-weight: 600;
    padding: 2px 8px;
    background: var(--cds-blue-60);
    color: #fff;
    border-radius: 10px;
    letter-spacing: 0.32px;
}
.tl-close {
    width: 32px; height: 32px;
    display: flex; align-items: center; justify-content: center;
    background: none; border: none;
    color: var(--cds-text-secondary);
    font-size: 18px; cursor: pointer;
    transition: background 0.1s, color 0.1s;
}
.tl-close:hover { background: var(--cds-layer-hover-01); color: var(--cds-text-primary); }

/* Search bar */
.tl-search-bar {
    padding: 10px 20px;
    border-bottom: 1px solid var(--cds-border-subtle-01);
    display: flex; gap: 10px; align-items: center;
}
.tl-search-input {
    flex: 1; height: 32px;
    padding: 0 12px 0 32px;
    background: var(--cds-layer-01);
    border: 1px solid var(--cds-border-subtle-01);
    border-bottom: 1px solid var(--cds-border-strong-01, #6f6f6f);
    color: var(--cds-text-primary);
    font-size: 12px;
    outline: none;
}
.tl-search-input:focus { border-bottom-color: var(--cds-blue-60); }
.tl-search-input::placeholder { color: var(--cds-text-placeholder, #6f6f6f); }
.tl-search-wrap {
    position: relative; flex: 1;
}
.tl-search-icon {
    position: absolute; left: 10px; top: 50%; transform: translateY(-50%);
    color: var(--cds-text-secondary); pointer-events: none;
}

/* Breadcrumb */
.tl-breadcrumb {
    display: flex; align-items: center; gap: 4px;
    padding: 8px 20px;
    font-size: 12px;
    border-bottom: 1px solid var(--cds-border-subtle-01);
    color: var(--cds-text-secondary);
    background: var(--cds-layer-01);
}
.tl-crumb {
    cursor: pointer;
    color: var(--cds-link-primary, #78a9ff);
    padding: 2px 4px;
    border-radius: 2px;
}
.tl-crumb:hover { background: var(--cds-layer-hover-01); text-decoration: underline; }
.tl-crumb.active { color: var(--cds-text-primary); cursor: default; font-weight: 500; }
.tl-crumb.active:hover { background: none; text-decoration: none; }
.tl-crumb-sep { color: var(--cds-border-strong-01, #6f6f6f); margin: 0 1px; font-size: 10px; }

/* Column header */
.tl-col-header {
    display: grid;
    grid-template-columns: 40px 1fr 90px 70px 90px;
    align-items: center; gap: 0;
    padding: 6px 20px;
    background: var(--cds-layer-01);
    border-bottom: 1px solid var(--cds-border-subtle-01);
    font-size: 11px; font-weight: 600;
    color: var(--cds-text-secondary);
    letter-spacing: 0.32px;
    text-transform: uppercase;
    position: sticky; top: 0; z-index: 1;
}

/* Body */
.tl-body {
    flex: 1; overflow-y: auto; padding: 0;
    min-height: 320px;
    background: var(--cds-background, #161616);
}
.tl-body::-webkit-scrollbar { width: 6px; }
.tl-body::-webkit-scrollbar-track { background: transparent; }
.tl-body::-webkit-scrollbar-thumb { background: var(--cds-border-subtle-01); border-radius: 3px; }

.tl-loading {
    display: flex; flex-direction: column; align-items: center; justify-content: center;
    height: 240px; gap: 12px;
    color: var(--cds-text-secondary); font-size: 13px;
}
.tl-spinner {
    width: 24px; height: 24px;
    border: 2px solid var(--cds-border-subtle-01);
    border-top-color: var(--cds-blue-60);
    border-radius: 50%;
    animation: tlSpin 0.8s linear infinite;
}
@keyframes tlSpin { to { transform: rotate(360deg) } }

.tl-empty {
    text-align: center; padding: 60px 20px;
    color: var(--cds-text-secondary); font-size: 13px; line-height: 1.6;
}
.tl-empty-icon { margin-bottom: 12px; opacity: 0.4; }

/* Row */
.tl-row {
    display: grid;
    grid-template-columns: 40px 1fr 90px 70px 90px;
    align-items: center; gap: 0;
    padding: 0 20px;
    height: 40px;
    border-bottom: 1px solid rgba(57,57,57,0.5);
    cursor: pointer;
    transition: background 0.08s;
}
.tl-row:hover { background: var(--cds-layer-hover-01, #353535); }
.tl-row.tl-row-folder:hover { background: rgba(15,98,254,0.06); }

.tl-row-icon {
    display: flex; align-items: center; justify-content: center;
}
.tl-row-name {
    font-size: 13px; color: var(--cds-text-primary);
    white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
    padding-right: 8px;
}
.tl-row-folder .tl-row-name { color: var(--cds-link-primary, #78a9ff); font-weight: 500; }

.tl-row-organ {
    font-size: 10px; color: var(--cds-text-secondary);
    letter-spacing: 0.32px;
}
.tl-row-size {
    font-size: 11px; color: var(--cds-text-secondary);
    text-align: right; font-variant-numeric: tabular-nums;
    font-family: 'IBM Plex Mono', monospace;
}
.tl-row-action { text-align: right; }

/* Import button */
.tl-import-btn {
    position: relative;
    height: 28px; min-width: 80px; padding: 0 14px;
    font-size: 11px; font-weight: 600;
    background: transparent;
    color: var(--cds-blue-40);
    border: 1px solid var(--cds-blue-60);
    border-radius: 2px;
    cursor: pointer;
    letter-spacing: 0.16px;
    transition: all 0.15s ease;
    white-space: nowrap;
    overflow: hidden;
    z-index: 0;
}
.tl-import-btn:hover { background: var(--cds-blue-60); color: #fff; transform: translateY(-1px); box-shadow: 0 2px 8px rgba(15,98,254,0.3); }
.tl-import-btn:active { transform: translateY(0); }
.tl-import-btn:disabled { opacity: 0.5; cursor: default; transform: none; box-shadow: none; }

.tl-import-btn .tl-progress-fill {
    position: absolute; left: 0; top: 0; bottom: 0;
    background: var(--cds-blue-60);
    opacity: 0.25;
    width: 0%;
    transition: width 0.4s ease;
    z-index: -1;
    border-radius: 1px;
}
.tl-import-btn.tl-importing {
    border-color: var(--cds-blue-50);
    color: var(--cds-blue-30);
    pointer-events: none;
}
.tl-import-btn.tl-importing .tl-progress-fill { opacity: 0.3; }

.tl-import-btn.tl-done {
    background: var(--cds-support-success); border-color: var(--cds-support-success);
    color: #fff; pointer-events: none;
    animation: tl-done-pop 0.3s ease;
}
@keyframes tl-done-pop {
    0% { transform: scale(0.92); }
    50% { transform: scale(1.06); }
    100% { transform: scale(1); }
}
.tl-import-btn.tl-error {
    border-color: var(--cds-support-error);
    color: var(--cds-support-error);
    cursor: pointer; pointer-events: auto;
}
.tl-import-btn.tl-error:hover {
    background: var(--cds-support-error); color: #fff;
}

/* Share link button */
.tl-share-btn {
    width: 28px; height: 28px;
    display: inline-flex; align-items: center; justify-content: center;
    background: transparent;
    border: 1px solid var(--cds-border-subtle-01, #393939);
    border-radius: 2px;
    color: var(--cds-text-secondary, #a8a8a8);
    cursor: pointer;
    transition: all 0.15s;
    vertical-align: middle;
}
.tl-share-btn:hover {
    background: var(--cds-layer-02, #393939);
    border-color: var(--cds-blue-50);
    color: var(--cds-blue-40);
}
.tl-row-action {
    text-align: right;
    display: flex; align-items: center; justify-content: flex-end; gap: 6px;
}

/* Row highlight during import */
.tl-row.tl-row-active {
    background: rgba(15,98,254,0.06);
}

/* Secondary button */
.tl-btn-secondary {
    height: 32px; padding: 0 14px;
    font-size: 11px; font-weight: 600;
    background: transparent; color: var(--cds-blue-40);
    border: 1px solid var(--cds-blue-60); cursor: pointer;
    display: inline-flex; align-items: center; gap: 6px;
    letter-spacing: 0.16px; transition: all 0.1s;
}
.tl-btn-secondary:hover { background: var(--cds-blue-60); color: #fff; }

/* Footer */
.tl-footer {
    display: flex; justify-content: space-between; align-items: center;
    padding: 10px 20px;
    border-top: 1px solid var(--cds-border-subtle-01);
    font-size: 11px; color: var(--cds-text-secondary);
    background: var(--cds-layer-01);
}
.tl-footer-info { font-variant-numeric: tabular-nums; }
.tl-footer-storage { display: flex; align-items: center; gap: 8px; }
.tl-storage-bar {
    width: 80px; height: 4px;
    background: var(--cds-border-subtle-01);
    border-radius: 2px; overflow: hidden;
}
.tl-storage-fill {
    height: 100%;
    background: var(--cds-blue-60);
    border-radius: 2px;
    transition: width 0.3s;
}

/* ── IAPM Modal ── */
.iapm-modal {
    background: var(--cds-background, #161616);
    border: 1px solid var(--cds-border-subtle-01, #393939);
    border-radius: 6px;
    width: 680px; max-width: 92vw;
    max-height: 82vh;
    display: flex; flex-direction: column;
    box-shadow: 0 24px 80px rgba(0,0,0,0.55);
    overflow: hidden;
}

.iapm-header {
    display: flex; justify-content: space-between; align-items: center;
    padding: 16px 20px;
    background: linear-gradient(135deg, var(--cds-layer-01) 0%, rgba(36,207,156,0.04) 100%);
    border-bottom: 1px solid var(--cds-border-subtle-01);
}
.iapm-header-left {
    display: flex; align-items: center; gap: 12px;
}
.iapm-header-icon {
    width: 36px; height: 36px;
    display: flex; align-items: center; justify-content: center;
    background: rgba(36,207,156,0.12);
    border-radius: 8px;
    color: #24cf9c;
}
.iapm-header-title {
    font-size: 14px; font-weight: 600;
    color: var(--cds-text-primary);
    letter-spacing: 0.16px;
}
.iapm-header-sub {
    font-size: 10px;
    color: var(--cds-text-secondary);
    margin-top: 1px;
    letter-spacing: 0.2px;
}
.iapm-header-badge {
    font-size: 10px; font-weight: 600;
    padding: 2px 8px;
    background: rgba(36,207,156,0.15);
    color: #24cf9c;
    border-radius: 10px;
    letter-spacing: 0.32px;
    margin-left: 4px;
}
.iapm-close {
    width: 32px; height: 32px;
    display: flex; align-items: center; justify-content: center;
    background: none; border: none;
    color: var(--cds-text-secondary);
    cursor: pointer;
    border-radius: 4px;
    transition: all 0.15s;
}
.iapm-close:hover { background: var(--cds-layer-hover-01); color: var(--cds-text-primary); }

/* Upload zone */
.iapm-upload-zone {
    display: flex; align-items: center; gap: 12px;
    padding: 14px 20px;
    background: var(--cds-layer-01);
    border-bottom: 1px solid var(--cds-border-subtle-01);
}
.iapm-upload-inner {
    flex: 1;
    display: flex; align-items: center; gap: 12px;
    padding: 10px 16px;
    border: 1px dashed var(--cds-gray-70);
    border-radius: 4px;
    transition: all 0.2s;
}
.iapm-upload-inner.iapm-dragover {
    border-color: #24cf9c;
    background: rgba(36,207,156,0.06);
}
.iapm-upload-icon {
    color: var(--cds-gray-60);
    flex-shrink: 0;
}
.iapm-upload-text {
    font-size: 12px;
    color: var(--cds-text-secondary);
}
.iapm-upload-link {
    color: var(--cds-blue-40);
    cursor: pointer;
    font-weight: 600;
    text-decoration: none;
}
.iapm-upload-link:hover { text-decoration: underline; }
.iapm-upload-hint {
    font-size: 9px;
    color: var(--cds-gray-60);
    letter-spacing: 0.5px;
    white-space: nowrap;
}
.iapm-push-btn {
    display: inline-flex; align-items: center; gap: 6px;
    padding: 8px 14px;
    font-size: 11px; font-weight: 600;
    background: none;
    border: 1px solid var(--cds-gray-70);
    color: var(--cds-text-secondary);
    border-radius: 4px;
    cursor: pointer;
    white-space: nowrap;
    transition: all 0.15s;
    letter-spacing: 0.16px;
}
.iapm-push-btn:hover {
    border-color: #24cf9c;
    color: #24cf9c;
    background: rgba(36,207,156,0.06);
}

/* Body */
.iapm-body {
    flex: 1;
    overflow-y: auto;
    min-height: 200px;
    max-height: 50vh;
    scrollbar-width: thin;
    scrollbar-color: var(--cds-gray-70) transparent;
}
.iapm-body::-webkit-scrollbar { width: 4px; }
.iapm-body::-webkit-scrollbar-thumb { background: var(--cds-gray-70); border-radius: 2px; }

/* Footer */
.iapm-footer {
    display: flex; justify-content: space-between; align-items: center;
    padding: 10px 20px;
    border-top: 1px solid var(--cds-border-subtle-01);
    font-size: 11px; color: var(--cds-text-secondary);
    background: var(--cds-layer-01);
}
.iapm-footer-left {
    display: flex; align-items: center; gap: 6px;
    font-variant-numeric: tabular-nums;
}
.iapm-footer-right {
    display: flex; align-items: center; gap: 6px;
}

/* ── IAPM CTA ── */
.iapm-cta {
    display: flex;
    align-items: center;
    gap: 10px;
    width: calc(100% - 24px);
    margin: 8px 12px;
    padding: 12px 14px;
    background: linear-gradient(135deg, rgba(36,207,156,0.12), rgba(15,98,254,0.08));
    border: 1px solid rgba(36,207,156,0.35);
    border-radius: 6px;
    cursor: pointer;
    transition: all 0.2s;
    text-align: left;
}
.iapm-cta:hover {
    background: linear-gradient(135deg, rgba(36,207,156,0.22), rgba(15,98,254,0.14));
    border-color: rgba(36,207,156,0.6);
    transform: translateY(-1px);
    box-shadow: 0 4px 12px rgba(36,207,156,0.15);
}
.iapm-cta-icon {
    width: 36px; height: 36px;
    display: flex; align-items: center; justify-content: center;
    background: rgba(36,207,156,0.15);
    border-radius: 6px;
    color: #24cf9c;
    flex-shrink: 0;
}
.iapm-cta-text { display: flex; flex-direction: column; flex: 1; min-width: 0; }
.iapm-cta-title {
    font-size: 12px; font-weight: 600;
    color: var(--cds-text-primary);
    letter-spacing: 0.16px;
}
.iapm-cta-sub {
    font-size: 10px;
    color: var(--cds-text-secondary);
    margin-top: 1px;
}

/* IAPM row — Carbon structured-list style */
.iapm-row {
    display: flex; align-items: center; gap: 12px;
    padding: 14px 20px;
    border-bottom: 1px solid var(--cds-border-subtle-01);
    transition: background 0.15s;
    cursor: default;
    position: relative;
}
.iapm-row:hover { background: var(--cds-layer-hover-01); }
.iapm-row.iapm-row-importing {
    background: rgba(15,98,254,0.06);
}
.iapm-row-icon {
    width: 36px; height: 36px;
    display: flex; align-items: center; justify-content: center;
    background: rgba(36,207,156,0.1);
    border-radius: 6px;
    color: #24cf9c;
    flex-shrink: 0;
}
.iapm-row-info { flex: 1; min-width: 0; }
.iapm-row-name {
    font-size: 13px; font-weight: 500;
    color: var(--cds-text-primary);
    white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.iapm-row-meta {
    font-size: 11px; color: var(--cds-text-secondary);
    margin-top: 3px;
    display: flex; align-items: center; gap: 8px;
}
.iapm-row-tag {
    font-size: 10px; font-weight: 600;
    padding: 1px 6px;
    border-radius: 3px;
    background: rgba(36,207,156,0.12);
    color: #24cf9c;
    letter-spacing: 0.3px;
}

/* IAPM import action area */
.iapm-action {
    display: flex; align-items: center; gap: 8px;
    flex-shrink: 0;
}
.iapm-share-btn {
    width: 30px; height: 30px;
    display: flex; align-items: center; justify-content: center;
    background: rgba(255,255,255,0.04);
    border: 1px solid var(--cds-gray-80);
    border-radius: 4px;
    cursor: pointer;
    transition: all 0.15s;
    flex-shrink: 0;
}
.iapm-share-btn:hover {
    background: rgba(36,207,156,0.1);
    border-color: rgba(36,207,156,0.4);
}

.iapm-import-btn {
    padding: 8px 20px;
    font-size: 12px; font-weight: 600;
    background: var(--cds-blue-60);
    color: #fff;
    border: none; border-radius: 4px;
    cursor: pointer;
    transition: all 0.15s;
    letter-spacing: 0.16px;
    white-space: nowrap;
    min-width: 90px;
    text-align: center;
}
.iapm-import-btn:hover { background: var(--cds-blue-70); }
.iapm-import-btn:disabled { cursor: default; }

/* IAPM inline progress — full-width Carbon progress bar */
.iapm-progress-wrap {
    position: absolute;
    bottom: 0; left: 0; right: 0;
    height: 0;
    overflow: visible;
}
.iapm-progress-track {
    height: 3px;
    background: var(--cds-gray-80);
    width: 100%;
}
.iapm-progress-fill {
    height: 100%;
    background: var(--cds-blue-60);
    width: 0%;
    transition: width 0.4s ease;
    border-radius: 0 2px 2px 0;
    position: relative;
}
.iapm-progress-fill.iapm-progress-active {
    background: linear-gradient(90deg, var(--cds-blue-60), var(--cds-blue-50));
}
.iapm-progress-fill.iapm-progress-active::after {
    content: '';
    position: absolute;
    top: 0; right: 0; bottom: 0;
    width: 60px;
    background: linear-gradient(90deg, transparent, rgba(255,255,255,0.15));
    animation: iapm-shimmer 1.5s infinite;
}
@keyframes iapm-shimmer {
    0% { opacity: 0; }
    50% { opacity: 1; }
    100% { opacity: 0; }
}

/* IAPM progress label (replaces button text) */
.iapm-progress-label {
    display: flex; align-items: center; gap: 10px;
    flex-shrink: 0;
    min-width: 140px;
    justify-content: flex-end;
}
.iapm-progress-pct {
    font-family: 'IBM Plex Mono', monospace;
    font-size: 14px; font-weight: 600;
    color: var(--cds-blue-40);
    min-width: 40px;
    text-align: right;
}
.iapm-progress-size {
    font-size: 11px;
    color: var(--cds-text-secondary);
    font-family: 'IBM Plex Mono', monospace;
}

/* IAPM done state */
.iapm-import-btn.iapm-done {
    background: var(--cds-support-success);
    animation: iapm-done-pop 0.35s ease;
}
@keyframes iapm-done-pop {
    0% { transform: scale(1); }
    50% { transform: scale(1.08); }
    100% { transform: scale(1); }
}
.iapm-import-btn.iapm-error {
    background: transparent;
    border: 1px solid var(--cds-support-error);
    color: var(--cds-support-error);
}

/* IAPM spinner for opening state */
.iapm-spinner-inline {
    width: 16px; height: 16px;
    border: 2px solid var(--cds-gray-70);
    border-top-color: var(--cds-blue-50);
    border-radius: 50%;
    animation: spin 0.8s linear infinite;
    flex-shrink: 0;
}
@keyframes spin { to { transform: rotate(360deg); } }

.iapm-folder {
    cursor: pointer;
}
.iapm-folder .iapm-row-icon {
    background: rgba(15,98,254,0.1);
    color: var(--cds-blue-50);
}
.iapm-folder:hover { background: var(--cds-layer-hover-01); }
.iapm-empty {
    padding: 48px 20px;
    text-align: center;
    color: var(--cds-text-secondary);
    font-size: 13px;
    line-height: 1.8;
}
.iapm-breadcrumb {
    display: flex; align-items: center; gap: 6px;
    padding: 10px 20px;
    font-size: 12px;
    color: var(--cds-text-secondary);
    border-bottom: 1px solid var(--cds-border-subtle-01);
    background: var(--cds-layer-01);
}
.iapm-breadcrumb a {
    color: var(--cds-blue-40);
    text-decoration: none;
    cursor: pointer;
}
.iapm-breadcrumb a:hover { text-decoration: underline; }

/* ── Slide Metadata Panel ── */
.slide-meta-panel {
    border-top: 1px solid var(--cds-border-subtle-01);
    max-height: 460px;
    overflow-y: auto;
    scrollbar-width: thin;
    scrollbar-color: var(--cds-gray-70) transparent;
}
.slide-meta-panel::-webkit-scrollbar { width: 4px; }
.slide-meta-panel::-webkit-scrollbar-thumb { background: var(--cds-gray-70); border-radius: 2px; }

.smp-section {
    padding: 16px 18px;
    border-bottom: 1px solid var(--cds-border-subtle-01);
}
.smp-section:last-child { border-bottom: none; }

.smp-section-header {
    display: flex; align-items: center; gap: 8px;
    font-size: 13px; font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.8px;
    color: var(--cds-text-secondary);
    margin-bottom: 13px;
}

/* Case history */
.smp-case-tags {
    display: flex; flex-wrap: wrap; gap: 7px;
    margin-bottom: 12px;
}
.smp-tag {
    font-size: 13px; font-weight: 600;
    padding: 4px 11px;
    border-radius: 4px;
    letter-spacing: 0.2px;
}
.smp-tag-age { background: rgba(15,98,254,0.12); color: var(--cds-blue-40); }
.smp-tag-sex { background: rgba(190,98,255,0.12); color: #be62ff; }
.smp-tag-specimen { background: rgba(36,207,156,0.12); color: #24cf9c; }
.smp-tag-procedure { background: rgba(255,183,77,0.12); color: #ffb74d; }

.smp-case-clinical {
    font-size: 14px;
    line-height: 1.7;
    color: var(--cds-text-secondary);
    padding: 12px 14px;
    background: var(--cds-layer-01);
    border-radius: 4px;
    border-left: 3px solid var(--cds-blue-60);
}

/* Slide properties grid */
.smp-props {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 0;
}
.smp-prop {
    padding: 6px 0;
    border-bottom: 1px solid rgba(255,255,255,0.04);
}
.smp-prop:nth-last-child(-n+2) { border-bottom: none; }
.smp-prop-label {
    font-size: 9px; font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.6px;
    color: var(--cds-gray-60);
    margin-bottom: 2px;
}
.smp-prop-value {
    font-family: 'IBM Plex Mono', monospace;
    font-size: 11px;
    color: var(--cds-text-primary);
}

/* Pyramid levels */
.smp-levels {
    display: flex;
    flex-direction: column;
    gap: 3px;
}
.smp-level-row {
    display: flex; align-items: center; gap: 6px;
    font-size: 10px;
    font-family: 'IBM Plex Mono', monospace;
    color: var(--cds-text-secondary);
    padding: 2px 0;
}
.smp-level-idx {
    width: 16px;
    color: var(--cds-gray-60);
    text-align: right;
    flex-shrink: 0;
}
.smp-level-bar {
    height: 4px;
    background: var(--cds-blue-60);
    border-radius: 2px;
    min-width: 2px;
    transition: width 0.3s;
}
.smp-level-dims {
    flex: 1;
    white-space: nowrap;
}