/* ============================================
   DIABETES RISK CALCULATOR – 3-COLUMN INTERCONNECTED DESIGN
   ============================================
   Design Philosophy:
   - Three-column "Input -> Model -> Output" data-flow layout
   - Clean, minimal card-based design with neutral borders
   - Flow arrows and visual connectors between columns
   - Apple-inspired aesthetic with subtle shadows
   - Clear visual mapping: left inputs feed center model, which drives right treatments
   ============================================ */


/* ============================================
   1. CSS CUSTOM PROPERTIES
   ============================================ */

:root {
    /* Primary - Dark Gray (replaces blue) */
    --primary:           #3a3a3c;
    --primary-hover:     #2c2c2e;
    --primary-light:     rgba(58, 58, 60, 0.08);
    --primary-glow:      rgba(58, 58, 60, 0.15);

    /* Legacy aliases for backward compatibility */
    --blue:              var(--primary);
    --blue-hover:        var(--primary-hover);
    --blue-light:        var(--primary-light);
    --blue-glow:         var(--primary-glow);

    /* Additional semantic colors */
    --orange:            #d4653a;
    --orange-end:        #d4885a;   /* Gradient end for orange icons */

    /* Semantic Status - Ruhige, desaturierte medizinische Ästhetik */
    --safe:           #3d8b53;
    --safe-end:       #4caf50;   /* Gradient end for safe/negative bars */
    --safe-light:     rgba(61, 139, 83, 0.06);
    --safe-border:    rgba(61, 139, 83, 0.30);
    --alert:          #b8862c;
    --alert-light:    rgba(184, 134, 44, 0.06);
    --alert-border:   rgba(184, 134, 44, 0.35);
    --warning:        #b86b3d;
    --warning-light:  rgba(184, 107, 61, 0.06);
    --warning-border: rgba(184, 107, 61, 0.35);
    --danger:         #b54a42;
    --danger-end:     #c85a52;   /* Gradient end for danger/positive bars */
    --danger-light:   rgba(181, 74, 66, 0.06);
    --danger-border:  rgba(181, 74, 66, 0.35);

    /* Text */
    --text-primary:     #1d1d1f;
    --text-secondary:   #6e6e73;
    --text-tertiary:    #636369;
    --text-on-primary:  #ffffff;

    /* Typography Scale – rem units for accessibility (1rem = 16px at browser default) */
    --text-2xs:       0.625rem;  /* 10px – minimum, tiny labels             */
    --text-xs:        0.75rem;   /* 12px – labels, badges                   */
    --text-ui:        0.8125rem; /* 13px – UI labels, dense interface text  */
    --text-sm:        0.875rem;  /* 14px – secondary text, labels           */
    --text-md:        0.9375rem; /* 15px – medium labels                    */
    --text-base:      1rem;      /* 16px – body text                        */
    --text-lg:        1.125rem;  /* 18px – section headers                  */
    --text-xl:        1.5rem;    /* 24px – landing page titles              */
    --text-2xl:       2rem;      /* 32px – large data displays              */
    --text-hero:      3rem;      /* 48px – hero percentage display          */

    /* Line Heights */
    --leading-none:   1;        /* Single-line elements, icons             */
    --leading-tight:   1.2;      /* Headings, compact numeric displays      */
    --leading-snug:    1.3;      /* Dense labels, compact text              */
    --leading-default: 1.4;      /* Labels, UI elements (was --leading-snug)*/
    --leading-normal:  1.5;      /* General interface text                  */
    --leading-comfort: 1.6;      /* Comfortable reading                    */
    --leading-relaxed: 1.65;     /* Body copy, descriptions                 */

    /* Font Weights */
    --weight-regular:  400;      /* Body text                               */
    --weight-medium:   500;      /* Emphasized labels, secondary headings   */
    --weight-semibold: 600;      /* Primary labels, button text              */
    --weight-bold:     700;      /* Headings, strong emphasis                */
    --weight-extrabold:800;      /* Hero displays                            */

    /* Backgrounds */
    --bg-page:        #f2f4f8;
    --bg-card:        #ffffff;
    --bg-elevated:    #fbfbfd;

    /* Borders & Shadows - Vereinfacht für konsistentes, ruhiges Design */
    --border:         rgba(0, 0, 0, 0.06);
    --border-strong:  rgba(0, 0, 0, 0.10);
    --shadow-sm:      0 1px 2px rgba(0, 0, 0, 0.04);
    --shadow:         0 2px 6px rgba(0, 0, 0, 0.05);
    --shadow-card:    0 2px 8px rgba(0, 0, 0, 0.06);
    --shadow-glow:    0 0 0 3px rgba(58, 58, 60, 0.12);

    /* Radii - Standardized */
    --radius-xs:      4px;     /* Minimal radius — tags, tiny elements */
    --radius-sm:      6px;     /* Small elements, buttons */
    --radius-md:      8px;     /* Medium elements — tabs, dropdowns */
    --radius:         10px;    /* Default cards */
    --radius-12:      12px;    /* Cards, dropdowns */
    --radius-lg:      16px;    /* Large cards, panels */
    --radius-xl:      24px;    /* Modals, large containers */
    --radius-pill:    999px;   /* Pill/chip shapes */
    --radius-full:    50%;     /* Circular elements */

    /* Layout */
    --content-padding: var(--space-5);
    --grid-gap:       20px;

    /* Transitions - Smooth, not bouncy */
    --ease-out:       cubic-bezier(0.25, 0.46, 0.45, 0.94);
    --ease-smooth:    cubic-bezier(0.4, 0, 0.2, 1);

    /* Spacing Scale - Expanded with semantic names */
    --space-1:        4px;     /* Micro adjustments */
    --space-2:        8px;     /* Tight spacing */
    --space-3:        12px;    /* Default element gaps */
    --space-4:        16px;    /* Component padding */
    --space-5:        20px;    /* Section gaps */
    --space-6:        24px;    /* Large gaps */
    --space-7:        32px;    /* Section padding */
    --space-8:        48px;    /* Major section margins */

    /* Z-index Scale — global stacking contexts */
    --z-nav:          100;    /* Sticky top navigation */
    --z-settings-ov:  140;    /* Settings overlay backdrop */
    --z-panel:        150;    /* Settings slide-out panel */
    --z-patient-ov:   199;    /* Patient list overlay backdrop */
    --z-dropdown:     200;    /* Dropdowns, patient drawer */
    --z-modal:        300;    /* Encryption / alert modals */
    --z-ocr-modal:    400;    /* OCR modal overlay */
    --z-fixed:       1000;    /* Tooltips, fixed popovers */
    --z-tutorial-bg: 8000;    /* Tutorial backdrop blur */
    --z-tut-card:    9000;    /* Tutorial explanation card */
    --z-tut-nav:     9500;    /* Tutorial navigation bar */
    --z-tut-hl:      9600;    /* Tutorial highlighted element */
    --z-landing:    10000;    /* Landing page overlay */

    /* Semantic interaction tokens */
    --bg-subtle:       rgba(0, 0, 0, 0.04);    /* subtle background tint */
    --bg-hover:        rgba(0, 0, 0, 0.06);    /* hover state background */
    --bg-pressed:      rgba(0, 0, 0, 0.08);    /* pressed/active background */
    --bg-disabled:     rgba(0, 0, 0, 0.03);    /* disabled state */
    --border-subtle:   rgba(0, 0, 0, 0.07);    /* subtle borders */
    --text-on-inverse: #ffffff;                /* text on dark backgrounds */
    --bg-neutral:      #e5e5ea;                /* inactive/neutral background (toggle tracks, icon arrays) */
    --bg-active:       rgba(0, 0, 0, 0.12);    /* active/pressed state background */
    --bg-nav:          rgba(255, 255, 255, 0.98); /* navigation bar background */
    --accent-gold:     #ffc832;                   /* active dark-mode toggle gold */
    --accent-gold-glow: rgba(255, 200, 50, 0.15); /* gold glow background */

    /* Component Shadows - Specialized */
    --shadow-thumb:        0 1px 4px rgba(0, 0, 0, 0.2), 0 0 0 1px rgba(0, 0, 0, 0.04);
    --shadow-thumb-hover:  0 2px 8px rgba(0, 0, 0, 0.25), 0 0 0 1px rgba(0, 0, 0, 0.06);
    --shadow-thumb-focus:  0 1px 4px rgba(0, 0, 0, 0.2), 0 0 0 3px rgba(58, 58, 60, 0.25);
    --shadow-toggle-knob:  0 1px 3px rgba(0, 0, 0, 0.15);
    --shadow-hover:       0 2px 8px rgba(0, 0, 0, 0.10);
    --shadow-marker:      0 1px 4px rgba(0, 0, 0, 0.14);
    --shadow-dropdown:    0 8px 30px rgba(0, 0, 0, 0.12);
    --shadow-tutorial:    0 4px 24px rgba(0, 0, 0, 0.18);
    --shadow-drawer:      -4px 0 24px rgba(0, 0, 0, 0.12);
    --shadow-safe:        0 8px 32px rgba(48, 161, 78, 0.30);

    /* Overlays */
    --overlay-bg:        rgba(0, 0, 0, 0.20);
    --overlay-modal:     rgba(0, 0, 0, 0.50);
    --overlay-landing:   rgba(0, 0, 0, 0.55);

    /* Tinted backgrounds */
    --danger-tint:       rgba(196, 61, 53, 0.08);
}

/* Utility: Visually Hidden - keeps element in DOM for camera capture but hides visually */
.visually-hidden {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0;
}



/* ============================================
   2. RESET / BASE
   ============================================ */

*,
*::before,
*::after {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

html {
    scroll-behavior: smooth;
    scroll-padding-top: 56px; /* top-nav min-height (48px) + border + breathing room */
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

body {
    font-family: 'Plus Jakarta Sans', -apple-system, BlinkMacSystemFont, 'Helvetica Neue', sans-serif;
    background: var(--bg-page);
    color: var(--text-primary);
    line-height: var(--leading-relaxed);
    font-size: var(--text-sm);
    letter-spacing: -0.01em;
    min-height: 100vh;
}


/* ============================================
   3. TOP NAVIGATION
   ============================================ */

.top-nav {
    position: sticky;
    top: 0;
    z-index: var(--z-nav);
    background: var(--bg-nav);
    border-bottom: 1px solid var(--border-subtle);
    /* Performance: removed backdrop-filter blur - very expensive on scroll */
}

.nav-inner {
    max-width: 1600px;
    margin: 0 auto;
    padding: 0 var(--content-padding);
    min-height: 48px;
    display: flex;
    align-items: center;
    justify-content: space-between;
}

.nav-brand {
    display: flex;
    align-items: center;
    gap: var(--space-2);
    font-size: var(--text-base);
    font-weight: var(--weight-semibold);
    letter-spacing: -0.025em;
    color: var(--text-primary);
    margin: 0; /* Reset h1 default */
}

.nav-brand .lucide-icon {
    width: 20px;
    height: 20px;
    color: var(--blue);
}

.nav-actions {
    display: flex;
    align-items: center;
    gap: var(--space-3);
}

/* Unit toggle in nav */
.unit-toggle-nav {
    display: flex;
    align-items: center;
    gap: 6px;
    padding: 3px 10px;
    background: var(--bg-disabled);
    border-radius: 20px;
}

.toggle-label-nav {
    font-size: var(--text-xs);
    font-weight: var(--weight-medium);
    color: var(--text-tertiary);
    transition: color 0.2s;
}

.toggle-label-nav:first-child {
    font-weight: var(--weight-semibold);
    color: var(--text-primary);
}

.toggle-switch-nav {
    position: relative;
    display: inline-block;
    width: 32px;
    height: 18px;
}

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

.toggle-track-nav {
    position: absolute;
    cursor: pointer;
    inset: 0;
    background: var(--bg-neutral);
    transition: background 0.3s;
    border-radius: 18px;
}

.toggle-track-nav::before {
    content: "";
    position: absolute;
    height: 14px;
    width: 14px;
    left: 2px;
    bottom: 2px;
    background: var(--bg-card);
    transition: transform 0.3s var(--ease-smooth);
    border-radius: var(--radius-full);
    box-shadow: var(--shadow-toggle-knob);
}

.toggle-switch-nav input:checked + .toggle-track-nav {
    background: var(--blue);
}

.toggle-switch-nav input:checked + .toggle-track-nav::before {
    transform: translateX(14px);
}

.btn-reset {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 32px;
    height: 32px;
    border: none;
    border-radius: var(--radius-full);
    background: var(--bg-subtle);
    color: var(--text-secondary);
    cursor: pointer;
    transition: background 0.2s, transform 0.2s;
}

.btn-reset:hover {
    background: var(--bg-pressed);
    transform: rotate(-45deg);
}

.btn-reset .lucide-icon {
    width: 18px;
    height: 18px;
}


/* ============================================
   4. RISK DISPLAY – NUMBER & UNIT
   ============================================ */

.risk-number {
    font-size: var(--text-hero);
    font-weight: var(--weight-extrabold);
    letter-spacing: -0.04em;
    line-height: var(--leading-none);
    transition: color 0.4s var(--ease-smooth);
    color: var(--safe);
}

.risk-unit {
    font-size: var(--text-lg);
    font-weight: var(--weight-semibold);
    transition: color 0.4s var(--ease-smooth);
    color: var(--safe);
    margin-left: 2px;
}

/* Risk bar visualization */
.hero-risk-bar {
    max-width: 400px;
    margin: 0 auto 8px;
}

.risk-bar-track {
    position: relative;
    height: 7px;
    border-radius: var(--radius-xs);
    background: linear-gradient(90deg,
        var(--safe)    0%,
        var(--alert)  33%,
        var(--warning) 66%,
        var(--danger) 100%);
    opacity: 0.7;
    overflow: visible;
}

.risk-bar-marker {
    position: absolute;
    top: 50%;
    left: 0%;
    transform: translate(-50%, -50%);
    width: 12px;
    height: 12px;
    border-radius: var(--radius-full);
    background: var(--bg-card);
    border: 2px solid var(--safe);
    box-shadow: var(--shadow-marker);
    transition: left 0.5s var(--ease-out), border-color 0.4s var(--ease-smooth);
    z-index: 2;
}

.risk-bar-labels {
    display: flex;
    justify-content: space-between;
    margin-top: 5px;
    font-size: var(--text-2xs);
    font-weight: var(--weight-medium);
    letter-spacing: 0.01em;
    color: var(--text-secondary);
}

.hero-subtitle {
    font-size: var(--text-xs);
    color: var(--text-tertiary);
    margin-top: var(--space-1);
}

/* Icon Array (Pictograph) */
.icon-array-container {
    display: grid;
    grid-template-columns: repeat(10, 1fr);
    gap: var(--space-1);
    margin: 12px auto;
    width: fit-content;
    padding: var(--space-4);
    background: var(--bg-elevated);
    border-radius: var(--radius);
}

.icon-array-item {
    width: 16px;
    height: 16px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: var(--radius-full);
    background: var(--bg-neutral);
    transition: background 0.3s var(--ease-smooth), transform 0.2s var(--ease-smooth);
    cursor: default;
}

.icon-array-item.affected {
    background: var(--danger);
    box-shadow: 0 1px 3px var(--danger-light);
}

.icon-array-item:hover {
    transform: scale(1.03);
}

.icon-array-label {
    font-size: var(--text-xs);
    color: var(--text-secondary);
    margin: 8px 0 12px;
    text-align: center;
    font-weight: var(--weight-medium);
}

/* What does that mean — styled like treatment-reduction-badge but borderless and white bg */
.btn-expand-hero {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 5px;
    width: 100%;
    padding: 8px 14px;
    font-size: var(--text-ui);
    font-weight: var(--weight-semibold);
    color: var(--text-secondary);
    background: var(--bg-card);
    border: none;
    border-radius: var(--radius-sm);
    cursor: pointer;
    box-sizing: border-box;
    transition: background 0.15s, color 0.15s;
}

.btn-expand-hero:hover {
    background: var(--bg-elevated);
    color: var(--text-primary);
}

.btn-expand-hero .lucide-icon {
    width: 14px;
    height: 14px;
    flex-shrink: 0;
}

.expand-hero-chevron {
    position: absolute;
    right: 10px;
    transition: transform 0.35s var(--ease-smooth);
}

.btn-expand-hero.open .expand-hero-chevron {
    transform: rotate(180deg);
}

/* Expandable hero section */
.hero-expandable {
    display: grid;
    grid-template-rows: 0fr;
    opacity: 0;
    transition: grid-template-rows 0.45s var(--ease-smooth), opacity 0.35s var(--ease-smooth);
    width: 100%;
    text-align: center;
}

.hero-expandable-inner {
    overflow: clip;
    min-height: 0;
}

.hero-expandable.open {
    grid-template-rows: 1fr;
    opacity: 1;
    padding: 14px 20px 18px;
}


/* ============================================
   5. COLUMN STEP LABELS  (Input / Model / Possible Treatment)
   ============================================ */

.col-step-label {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 8px 18px;
    font-size: var(--text-xs);
    font-weight: var(--weight-semibold);
    text-transform: none;
    letter-spacing: 0.01em;
    color: var(--text-tertiary);
    background: transparent;
    border-bottom: 1px solid var(--border);
}

/* ============================================
   OCR MODAL - Hide step indicator when open
   ============================================ */

body.ocr-modal-open .col-step-label {
    display: none;
}

.step-arrow {
    font-size: var(--text-base);
    color: var(--text-tertiary);
}


/* ============================================
   6. THREE-COLUMN MAIN GRID
   ============================================ */

.main-grid {
    display: grid;
    grid-template-columns: minmax(340px, 1.05fr) minmax(360px, 1.25fr) minmax(320px, 1fr);
    gap: var(--grid-gap);
    max-width: 1600px;
    margin: 0 auto;
    padding: 20px var(--content-padding) 60px;
    align-items: start;
}


/* ============================================
   7. COLUMN PANELS – with dynamic risk borders
   ============================================ */

.col-panel {
    background: var(--bg-card);
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow-card);
    overflow: clip;
    border: 1px solid var(--border);
}

/* --- Dynamic Risk-Level Borders on INPUT panel --- */
#panel-input {
    overflow: clip;
}

/* Neutral borders - no risk-level styling */
#panel-input[data-risk-level="safe"],
#panel-input[data-risk-level="alert"],
#panel-input[data-risk-level="warning"],
#panel-input[data-risk-level="danger"],
#panel-treatment[data-risk-level="safe"],
#panel-treatment[data-risk-level="alert"],
#panel-treatment[data-risk-level="warning"],
#panel-treatment[data-risk-level="danger"] {
    border-color: var(--border);
    box-shadow: var(--shadow-card);
}

/* Center (model) panel with neutral border */
#panel-model {
    border-color: var(--border);
}


/* ============================================
   8. PANEL HEADER BAR
   ============================================ */

.panel-header-bar {
    display: flex;
    align-items: center;
    gap: var(--space-2);
    padding: 12px 20px;
    border-bottom: 1px solid var(--border);
    background: transparent;
    scroll-margin-top: 56px;
}

.panel-header-bar .lucide-icon {
    width: 20px;
    height: 20px;
    color: var(--text-secondary);
}

.panel-header-bar h2 {
    font-size: var(--text-base);
    font-weight: var(--weight-bold);
    letter-spacing: -0.02em;
    color: var(--text-primary);
    margin: 0;
}

/* Panel collapse toggle button */
.panel-collapse-btn {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 20px;
    height: 20px;
    padding: 0;
    margin-left: auto;
    background: transparent;
    border: none;
    border-radius: var(--radius-sm);
    cursor: pointer;
    color: var(--text-tertiary);
    transition: color 0.2s;
    flex-shrink: 0;
}

.panel-collapse-btn:hover {
    color: var(--blue);
}

.panel-collapse-btn .lucide-icon {
    width: 18px;
    height: 18px;
    transition: transform 0.3s var(--ease-smooth);
}

.panel-collapse-btn.collapsed .lucide-icon {
    transform: rotate(-180deg);
}

/* Collapsed panel content */
.col-panel .panel-subtitle.panel-hidden {
    display: none;
}

.col-panel .panel-body.panel-hidden {
    grid-template-rows: 0fr;
    opacity: 0;
    padding-top: 0;
    padding-bottom: 0;
    transition: grid-template-rows 0.35s var(--ease-smooth), opacity 0.25s var(--ease-smooth), padding 0.35s var(--ease-smooth);
}

.col-panel .panel-body:not(.panel-hidden) {
    grid-template-rows: 1fr;
    opacity: 1;
    transition: grid-template-rows 0.4s var(--ease-smooth), opacity 0.3s var(--ease-smooth);
}

/* Neutral top border on panels */
#panel-input .panel-header-bar {
    border-top: 1px solid var(--border);
}
#panel-input[data-risk-level="safe"] .panel-header-bar,
#panel-input[data-risk-level="alert"] .panel-header-bar,
#panel-input[data-risk-level="warning"] .panel-header-bar,
#panel-input[data-risk-level="danger"] .panel-header-bar {
    border-top-color: var(--border-subtle);
}

#panel-treatment .panel-header-bar {
    border-top: 1px solid var(--border);
}

/* #panel-treatment .panel-header-bar h2 - Removed to match Risk Factors size */
#panel-treatment[data-risk-level="safe"] .panel-header-bar,
#panel-treatment[data-risk-level="alert"] .panel-header-bar,
#panel-treatment[data-risk-level="warning"] .panel-header-bar,
#panel-treatment[data-risk-level="danger"] .panel-header-bar {
    border-top-color: var(--border-subtle);
}

#panel-model .panel-header-bar {
    border-top: 1px solid var(--border);
}

.panel-subtitle {
    font-size: var(--text-xs);
    color: var(--text-tertiary);
    margin: 5px 0 5px 0;
    padding: 0 16px;
    font-weight: var(--weight-regular);
}


/* ============================================
   9. PANEL BODY
   ============================================ */

.panel-body {
    padding: 14px 24px;
}

/* Extra breathing room in Values panel to prevent slider thumb clipping */
#panel-input .panel-body {
    padding: 14px 24px;
}


/* ============================================
   10. INPUT SECTION LABELS (Non-Modifiable / Modifiable)
   ============================================ */

.input-section-label {
    display: flex;
    align-items: center;
    gap: 6px;
    font-size: var(--text-xs);
    font-weight: var(--weight-bold);
    letter-spacing: 0.03em;
    color: var(--text-tertiary);
    padding: 8px 0 6px;
    margin-top: var(--space-1);
    border-bottom: 1px solid var(--border);
    margin-bottom: var(--space-2);
}

.input-section-label .lucide-icon {
    font-size: var(--text-sm);
}

.input-section-label.modifiable {
    color: var(--text-tertiary);
    border-bottom-color: var(--border);
    margin-top: var(--space-3);
}


/* ============================================
   11. INPUT GROUPS (compact for column)
   ============================================ */

.input-group {
    padding: 10px 4px;
    border-bottom: 1px solid var(--bg-subtle);
}

.input-group:last-child {
    border-bottom: none;
}

.input-group-highlight {
    background: var(--primary-light);
    margin: 0;
    padding: 10px 12px;
    border-radius: var(--radius);
    border: 1px solid var(--primary-glow);
    box-shadow: none;
    border-bottom: none;
}

.input-label-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 6px;
}

.input-label-row label {
    display: flex;
    align-items: center;
    gap: 5px;
    font-size: var(--text-xs);
    font-weight: var(--weight-semibold);
    letter-spacing: 0.01em;
    color: var(--text-primary);
    cursor: pointer;
}

.ig-icon {
    font-size: var(--text-base);
    color: var(--text-secondary);
}

.ig-icon.icon-danger { color: var(--danger); }
.ig-icon.icon-safe   { color: var(--safe); }

.unit-label {
    font-weight: var(--weight-regular);
    color: var(--text-tertiary);
    font-size: var(--text-xs);
}

/* ============================================
   12. SLIDERS (compact)
   ============================================ */

.slider-wrapper {
    position: relative;
    height: 18px;
    padding: 0 14px;
    overflow: visible;
    margin: 4px 0;
}

.slider {
    -webkit-appearance: none;
    appearance: none;
    width: auto;
    height: 18px;
    background: transparent;
    outline: none;
    position: absolute;
    top: 0;
    left: 14px;
    right: 14px;
    z-index: 2;
    cursor: pointer;
    margin: 0;
}

.slider::-webkit-slider-thumb {
    -webkit-appearance: none;
    appearance: none;
    width: 24px;
    height: 24px;
    border-radius: var(--radius-full);
    background: var(--bg-card);
    cursor: pointer;
    box-shadow: var(--shadow-thumb);
    border: none;
    transition: box-shadow 0.15s var(--ease-smooth), transform 0.15s var(--ease-smooth);
}

.slider::-webkit-slider-thumb:hover {
    box-shadow: var(--shadow-thumb-hover);
    transform: scale(1.03);
}

.slider::-webkit-slider-thumb:active {
    transform: scale(1.03);
}

.slider::-moz-range-thumb {
    width: 24px;
    height: 24px;
    border-radius: var(--radius-full);
    background: var(--bg-card);
    cursor: pointer;
    box-shadow: var(--shadow-thumb);
    border: none;
}

.slider-track-bg {
    position: absolute;
    top: 7px;
    left: 14px;
    right: 14px;
    height: 6px;
    border-radius: var(--radius-xs);
    background: var(--border);
    overflow: clip;
    pointer-events: none;
}

.slider::-webkit-slider-runnable-track {
    height: 6px;
    background: transparent;
    border: none;
}

.slider::-moz-range-track {
    height: 6px;
    background: transparent;
    border: none;
}

.slider-track-bg.segmented {
    background: transparent;
    display: flex;
}

.slider-fill {
    height: 100%;
    background: var(--blue);
    border-radius: var(--radius-xs);
    transition: transform 0.1s var(--ease-smooth);
    transform-origin: left;
    transform: scaleX(0);
    pointer-events: none;
}

.slider-segment,
.slider-labels > span {
    flex: var(--flex);
}
.slider-segment         { height: 100%; }
.slider-segment.safe    { background: var(--safe); }
.slider-segment.alert   { background: var(--alert); }
.slider-segment.warning { background: var(--warning); }
.slider-segment.danger  { background: var(--danger); }

.slider-labels {
    display: flex;
    margin-top: 2px;
    font-size: var(--text-xs);
    font-weight: var(--weight-medium);
    color: var(--text-tertiary);
}

.slider-labels span {
    text-align: center;
}

.slider-labels-numeric {
    justify-content: space-between;
}


/* ============================================
   13. VALUE INPUT ROW
   ============================================ */

.factor-value-row {
    display: flex;
    align-items: center;
    gap: 5px;
    margin-top: 6px;
}

.value-input {
    width: 80px;
    padding: 5px 8px;
    border: 1px solid var(--border-strong);
    border-radius: var(--radius-sm);
    font-size: var(--text-xs);
    font-weight: var(--weight-semibold);
    text-align: center;
    background: var(--bg-elevated);
    transition: border-color 0.2s, box-shadow 0.2s;
    color: var(--text-primary);
}

.value-input:focus {
    outline: none;
    border-color: var(--primary);
    box-shadow: 0 0 0 2px var(--primary-glow);
}

.value-unit-label {
    font-size: var(--text-xs);
    color: var(--text-tertiary);
    font-weight: var(--weight-medium);
}


/* ============================================
   14. TOGGLE SWITCHES (binary inputs)
   ============================================ */

.toggle-group {
    display: flex;
    align-items: center;
    gap: var(--space-2);
}

.toggle-option {
    font-size: var(--text-ui);
    font-weight: var(--weight-medium);
    color: var(--text-secondary);
    min-width: 50px;
}

.toggle-option:first-child {
    text-align: right;
    min-width: 50px;
}

.toggle-option:last-child {
    text-align: left;
    min-width: 50px;
}

.toggle-switch {
    position: relative;
    display: inline-block;
    width: 44px;
    height: 24px;
}

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

.toggle-slider {
    position: absolute;
    cursor: pointer;
    inset: 0;
    background: var(--border-strong);
    transition: background 0.3s;
    border-radius: var(--radius-xl);
}

.toggle-slider::before {
    content: "";
    position: absolute;
    height: 20px;
    width: 20px;
    left: 2px;
    bottom: 2px;
    background: var(--bg-card);
    transition: transform 0.3s var(--ease-smooth);
    border-radius: var(--radius-full);
    box-shadow: var(--shadow-toggle-knob);
}

.toggle-switch input:checked + .toggle-slider {
    background: var(--blue);
}

.toggle-switch input:checked + .toggle-slider::before {
    transform: translateX(20px);
}

.toggle-switch input:focus-visible + .toggle-slider {
    outline: 2px solid var(--primary);
    outline-offset: 2px;
}


/* ============================================
   15. WHAT-IF BADGES
   ============================================ */

.what-if-badge {
    display: inline-block;
    font-size: var(--text-xs);
    font-weight: var(--weight-semibold);
    padding: 1px 6px;
    border-radius: var(--radius-sm);
    margin-left: auto;
    min-width: 0;
    opacity: 0;
    transition: opacity 0.3s var(--ease-smooth), transform 0.3s var(--ease-smooth);
    transform: translateX(-4px);
    white-space: nowrap;
}

.what-if-badge.visible {
    opacity: 1;
    transform: translateX(0);
}

.what-if-badge.delta-up {
    color: var(--danger);
    background: var(--danger-light);
}

.what-if-badge.delta-down {
    color: var(--safe);
    background: var(--safe-light);
}

.what-if-badge.delta-neutral {
    color: var(--text-tertiary);
    background: var(--bg-subtle);
}


/* ============================================
   15b. TOOLTIP STYLING
   ============================================ */

.info-icon {
    font-size: var(--text-xs);
    cursor: help;
    margin-left: 3px;
    opacity: 0.7;
    transition: opacity 0.2s;
    position: relative;
}

.info-icon:hover {
    opacity: 1;
}

.info-icon[data-tooltip] {
    position: relative;
}

.info-icon[data-tooltip]:hover::after,
.info-icon[data-tooltip]:focus::after,
.info-icon[data-tooltip]:focus-within::after {
    content: attr(data-tooltip);
    position: absolute;
    bottom: 125%;
    left: 50%;
    transform: translateX(-50%);
    background: var(--text-primary);
    color: var(--bg-card);
    padding: 8px 12px;
    border-radius: var(--radius-sm);
    font-size: var(--text-xs);
    font-weight: var(--weight-regular);
    white-space: normal;
    max-width: 200px;
    width: 200px;
    text-align: left;
    box-shadow: var(--shadow);
    z-index: var(--z-fixed);
    line-height: var(--leading-default);
    pointer-events: none;
}

.info-icon[data-tooltip]:hover::before,
.info-icon[data-tooltip]:focus::before,
.info-icon[data-tooltip]:focus-within::before {
    content: '';
    position: absolute;
    bottom: 115%;
    left: 50%;
    transform: translateX(-50%);
    border: 6px solid transparent;
    border-top-color: var(--text-primary);
    z-index: var(--z-fixed);
}


/* ============================================
   16. CENTER COLUMN CARDS
   ============================================ */

.center-card {
    background: transparent;    /* statt var(--bg-elevated) */
    border-radius: 0;           /* statt var(--radius) */
    padding: 0 0 16px 0;        /* statt 16px */
    margin-bottom: var(--space-4);
    border: none;               /* statt 1px solid var(--border) */
    border-bottom: 1px solid var(--border);
}

.center-card:last-child {
    border-bottom: none;
    padding-bottom: 0;
}

.center-card h3 {
    font-size: var(--text-sm);
    font-weight: var(--weight-semibold);
    color: var(--text-primary);
    margin-bottom: var(--space-1);
}

.center-card .card-desc {
    font-size: var(--text-xs);
    color: var(--text-tertiary);
    line-height: var(--leading-default);
    margin-bottom: var(--space-3);
}

/* Contribution chart */
.contribution-chart {
    display: flex;
    flex-direction: column;
    gap: 2px;
}

/* Filter toggle above headers */
.contrib-filter-toggle {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: 6px;
    padding: 6px 0;
    margin-bottom: 2px;
}

.contrib-filter-label {
    font-size: var(--text-xs);
    color: var(--text-tertiary);
}

/* Simple mode: hide left bar half and center divider, bars grow directly from label */
.contrib-simple-mode .contrib-bar-left,
.contrib-simple-mode .contrib-bar-center {
    display: none;
}

/* Contribution chart header */
.contrib-header {
    display: flex;
    align-items: center;
    gap: var(--space-2);
    margin-bottom: 6px;
    padding: 6px 4px;
    border-top: 1px solid var(--border);
    font-size: var(--text-xs);
    font-weight: var(--weight-medium);
    overflow: visible;
}

/* Desktop: show full labels, hide short labels */
.contrib-label-full {
    display: inline;
}

.contrib-label-short {
    display: none;
}

.contrib-header-left {
    width: 140px;
    flex-shrink: 0;
}

.contrib-header-center {
    flex: 1;
    display: grid;
    grid-template-columns: 1fr auto 1fr;
    align-items: center;
    gap: var(--space-1);
    overflow: visible;
}

.contrib-header-left-side {
    text-align: left;
    color: var(--text-secondary);
    white-space: normal;
    line-height: var(--leading-tight);
    transform: translateX(-35px);
}

@media (max-width: 768px) {
    .contrib-header {
        padding: 6px 0;
        gap: var(--space-1);
    }

    .contrib-header-left {
        width: 140px;
        flex-shrink: 0;
    }

    .contrib-header-right {
        width: 60px;
        flex-shrink: 0;
    }

    .contrib-header-center {
        flex: 1;
        display: flex;
        justify-content: space-between;
        align-items: center;
        position: relative;
        height: 24px;
        min-width: 0;
        padding: 0 4px;
    }

    /* Mobile: show short labels, hide full labels */
    .contrib-label-full {
        display: none;
    }

    .contrib-label-short {
        display: inline;
    }

    .contrib-header-left-side,
    .contrib-header-right-side {
        position: static;
        font-size: var(--text-xs);
        flex-shrink: 0;
        max-width: 30%;
        overflow: visible;
        text-overflow: clip;
        white-space: nowrap;
    }

    .contrib-header-left-side {
        text-align: left;
        color: var(--text-secondary);
    }

    .contrib-header-center-label {
        position: absolute;
        left: 50%;
        transform: translateX(-50%);
        font-size: var(--text-xs);
        white-space: nowrap;
        z-index: 1;
        text-align: center;
        color: var(--text-tertiary);
    }

    .contrib-header-right-side {
        text-align: right;
        color: var(--text-secondary);
    }
}

.contrib-header-right-side {
    text-align: right;
    color: var(--text-secondary);
    white-space: normal;
    line-height: var(--leading-tight);
    transform: translateX(35px);
}

/* Mobile: reduce transform to prevent overlap */

.contrib-header-right {
    width: 60px;
    flex-shrink: 0;
}

@media (max-width: 480px) {
    .contrib-row-detail {
        padding: 8px 10px 12px 10px;
    }

    .contrib-row-label-cell {
        width: 110px;
    }

    .contrib-row-value {
        width: 52px;
    }
}

/* Contribution row — hover/click interaction */
.contrib-row {
    position: relative;
    cursor: pointer;
    border-radius: var(--radius-sm);
    transition: background 0.15s var(--ease-smooth);
}

.contrib-row:hover {
    background: var(--bg-subtle);
}

.contrib-row:focus-visible {
    outline: 2px solid var(--primary);
    outline-offset: 2px;
}

.contrib-row.expanded {
    background: var(--bg-elevated);
    margin-bottom: 6px;
}

.contrib-row-inner {
    display: flex;
    align-items: center;
    gap: var(--space-2);
    padding: 9px 4px;
}

.contrib-row-label-cell {
    width: 140px;
    flex-shrink: 0;
}

.contrib-row-label {
    font-size: var(--text-xs);
    font-weight: var(--weight-medium);
    color: var(--text-secondary);
}

.contrib-bar {
    flex: 1;
    display: flex;
    height: 20px;
    position: relative;
    align-items: center;
}

.contrib-bar-half {
    flex: 1;
    height: 100%;
    display: flex;
    align-items: center;
}

.contrib-bar-left {
    justify-content: flex-end;
    padding-right: 1px;
}

.contrib-bar-right {
    justify-content: flex-start;
    padding-left: 1px;
}

.contrib-bar-center {
    width: 2px;
    height: 100%;
    background: var(--border-strong);
    border-radius: 1px;
    flex-shrink: 0;
}

.contrib-bar-fill {
    height: 16px;
    width: 100%;
    border-radius: var(--radius-sm);
    transition: transform 0.4s var(--ease-out);
    transform-origin: left;
    transform: scaleX(0);
    min-width: 3px;
}

.bar-positive {
    background: linear-gradient(90deg, var(--danger), var(--danger-end));
}

.bar-negative {
    background: linear-gradient(270deg, var(--safe), var(--safe-end));
    transform-origin: right;
}

/* Right-side value hint — hidden until hover/expanded */
.contrib-row-value {
    width: 60px;
    flex-shrink: 0;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 1px;
    opacity: 0;
    transition: opacity 0.15s var(--ease-smooth);
}

.contrib-row:hover .contrib-row-value,
.contrib-row.expanded .contrib-row-value {
    opacity: 1;
}

.contrib-value-pct {
    font-size: var(--text-xs);
    font-weight: var(--weight-bold);
    line-height: var(--leading-tight);
}

.value-positive .contrib-value-pct {
    color: var(--danger);
}

.value-negative .contrib-value-pct {
    color: var(--safe);
}

.contrib-value-hint {
    font-size: var(--text-2xs);
    color: var(--text-tertiary);
    white-space: nowrap;
}

/* Expanded detail panel */
.contrib-row-detail {
    display: none;
    padding: 8px 12px 14px 152px;
    border-top: 1px solid var(--border);
}

.contrib-row.expanded .contrib-row-detail {
    display: block;
}

/* ─── Causality Chain (EID KBB) ────────────────────────────────────── */
.btn-show-causality {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    margin-top: 10px;
    padding: 6px 12px;
    background: var(--bg-card, #fff);
    border: 1px solid var(--border);
    border-radius: 6px;
    color: var(--text-secondary);
    font-family: inherit;
    font-size: var(--text-xs);
    font-weight: 500;
    cursor: pointer;
    transition: background 0.2s ease, border-color 0.2s ease, color 0.2s ease;
}

.btn-show-causality:hover {
    background: rgba(0, 0, 0, 0.04);
    border-color: rgba(0, 0, 0, 0.2);
    color: var(--text-primary);
}

.btn-show-causality .lucide-icon {
    width: 14px;
    height: 14px;
}

.causality-chain-inline {
    display: none;
    margin-top: 10px;
    padding: 10px 12px;
    background: rgba(0, 0, 0, 0.02);
    border-radius: 6px;
    border: 1px solid var(--border);
}

.causality-chain-inline.visible {
    display: block;
    animation: chainFadeIn 0.25s ease;
}

@keyframes chainFadeIn {
    from { opacity: 0; transform: translateY(-4px); }
    to   { opacity: 1; transform: translateY(0); }
}

.chain-title {
    font-size: var(--text-xs);
    font-weight: 600;
    color: var(--text-tertiary);
    text-transform: uppercase;
    letter-spacing: 0.04em;
    margin-bottom: 8px;
}

.chain-nodes-row {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 6px;
}

.chain-node {
    padding: 5px 10px;
    background: var(--bg-card, #fff);
    border: 1px solid var(--border);
    border-radius: 4px;
    font-size: var(--text-xs);
    font-weight: 500;
    color: var(--text-secondary);
    white-space: nowrap;
}

.chain-node.risk-node {
    font-weight: 700;
    color: var(--text-primary);
    background: rgba(0, 0, 0, 0.04);
    border-color: rgba(0, 0, 0, 0.18);
}

.chain-node:last-of-type {
    font-weight: 600;
    color: var(--danger, #c43d35);
    border-color: rgba(196, 61, 53, 0.3);
    background: rgba(196, 61, 53, 0.04);
}

.chain-arrow {
    color: var(--text-tertiary);
    font-size: var(--text-sm);
    font-weight: 600;
    line-height: 1;
    flex-shrink: 0;
}

/* Dark mode */
.dark .btn-show-causality {
    background: rgba(255, 255, 255, 0.04);
    border-color: rgba(255, 255, 255, 0.12);
}

.dark .btn-show-causality:hover {
    background: rgba(255, 255, 255, 0.08);
    border-color: rgba(255, 255, 255, 0.2);
}

.dark .causality-chain-inline {
    background: rgba(255, 255, 255, 0.03);
    border-color: rgba(255, 255, 255, 0.08);
}

.dark .chain-node {
    background: rgba(255, 255, 255, 0.04);
    border-color: rgba(255, 255, 255, 0.1);
}

.dark .chain-node.risk-node {
    background: rgba(255, 255, 255, 0.08);
    border-color: rgba(255, 255, 255, 0.22);
}

.dark .chain-node:last-of-type {
    color: #ff6b6b;
    background: rgba(255, 107, 107, 0.08);
    border-color: rgba(255, 107, 107, 0.3);
}

.contrib-detail-pct {
    display: block;
    font-size: var(--text-sm);
    font-weight: var(--weight-bold);
    letter-spacing: -0.02em;
    margin-bottom: 5px;
    text-align: center;
}

.contrib-detail-pct.detail-positive {
    color: var(--danger);
}

.contrib-detail-pct.detail-negative {
    color: var(--safe);
}

.contrib-detail-text {
    font-size: var(--text-xs);
    color: var(--text-secondary);
    line-height: var(--leading-relaxed);
    margin: 0;
}


/* ============================================
   18. CONTRIBUTION CHART (center column)
   ============================================ */

/* Contribution chart styles continue in section 17 */

/* ============================================
   19. TREATMENT RECOMMENDATIONS (right column)
   ============================================ */

#dynamic-treatments {
    display: flex;
    flex-direction: column;
    gap: var(--space-3);
}

.treatment-ok {
    display: flex;
    align-items: center;
    gap: var(--space-3);
    padding: var(--space-4);
    background: var(--safe-light);
    border-radius: var(--radius);
}

.treatment-ok .lucide-icon {
    color: var(--safe);
    font-size: var(--text-xl);
    flex-shrink: 0;
}

.treatment-ok p {
    font-size: var(--text-ui);
    color: var(--text-secondary);
    margin: 0;
    line-height: var(--leading-default);
}

/* ============================================
   Cross-panel factor highlight on hover
   ============================================ */

[data-field] {
    transition: box-shadow 0.18s var(--ease-smooth), background 0.18s var(--ease-smooth);
}

[data-field]:hover,
[data-field].factor-highlight {
    background: var(--primary-light);
    box-shadow: 0 0 0 1px var(--primary-glow);
    border-radius: var(--radius);
}

.factor-treatment {
    background: var(--bg-elevated);
    border-radius: var(--radius);
    padding: 14px;
    border: 1px solid var(--border);
    border-left: 3px solid var(--blue);
}

.factor-treatment.indicated {
    border-left-color: var(--danger);
}

#panel-treatment[data-risk-level="safe"]    .factor-treatment.indicated,
#panel-treatment[data-risk-level="alert"]   .factor-treatment.indicated,
#panel-treatment[data-risk-level="warning"] .factor-treatment.indicated,
#panel-treatment[data-risk-level="danger"]  .factor-treatment.indicated {
    border-left-color: var(--danger);
}

.factor-header {
    display: flex;
    align-items: center;
    gap: var(--space-2);
    margin-bottom: 10px;
}

.factor-header .factor-icon {
    font-size: var(--text-lg);
    color: var(--blue);
    background: var(--blue-light);
    padding: 5px;
    border-radius: var(--radius-sm);
}

.factor-header h5 {
    font-size: var(--text-sm);
    font-weight: var(--weight-semibold);
    color: var(--text-primary);
    margin: 0;
}

.factor-therapies {
    display: flex;
    flex-direction: column;
    gap: 6px;
}

.therapy-mini {
    display: flex;
    align-items: flex-start;
    gap: 0;
    padding: 8px 10px;
    background: var(--bg-card);
    border-radius: var(--radius-sm);
    font-size: var(--text-xs);
    line-height: var(--leading-default);
    border: 1px solid var(--border);
}

.therapy-mini strong {
    color: var(--text-primary);
}

.indicated-heart {
    color: var(--blue);
    font-size: var(--text-md);
    flex-shrink: 0;
    margin-top: 1px;
    animation: pulse-heart 3s ease-in-out infinite;
    will-change: transform;
}

@media (prefers-reduced-motion: reduce) {
    .indicated-heart {
        animation: none;
    }
}

@keyframes pulse-heart {
    0%, 100% { transform: scale(1);    opacity: 1; }
    50%       { transform: scale(1.03); opacity: 0.85; }
}


/* ============================================
   20b. RISK FIELDS (Your Risk + Risk with Treatments)
   ============================================ */

.risk-field {
    border: 1px solid var(--border);
    border-radius: var(--radius);
    background: var(--bg-card);
    margin-bottom: var(--space-3);
    overflow: clip;
    box-shadow: var(--shadow-sm);
    transition: box-shadow 0.2s var(--ease-smooth);
}

.risk-field-summary {
    display: flex;
    align-items: center;
    gap: var(--space-3);
    padding: 14px 18px;
}

/* Centered variant: label + value stacked in the middle */
.risk-field-summary--centered {
    flex-direction: column;
    align-items: center;
    gap: 6px;
    padding: 20px 18px 18px;
}

.risk-field-summary::-webkit-details-marker { display: none; }

.risk-field-title {
    flex: 1;
    font-size: var(--text-ui);
    font-weight: var(--weight-semibold);
    color: var(--text-secondary);
    letter-spacing: 0.04em;
}

/* Two-line centered label variant */
.risk-field-title--two-line {
    flex: unset;
    text-align: center;
    line-height: var(--leading-default);
}

/* ─── Risk Value Group: number + context stacked ─── */
.risk-field-value {
    display: inline-flex;
    align-items: flex-end;
    flex-direction: column;
    gap: 1px;
    font-variant-numeric: tabular-nums;
}

/* Centered variant for hero values */
.risk-field-value--centered {
    align-items: center;
}

.risk-value-main {
    display: inline-flex;
    align-items: baseline;
    gap: 1px;
    line-height: var(--leading-none);
}

.risk-field-value .risk-number {
    font-size: var(--text-2xl);
    font-weight: var(--weight-semibold);
    line-height: var(--leading-none);
    letter-spacing: -0.02em;
}

.risk-field-value .risk-unit {
    font-size: var(--text-md);
    font-weight: var(--weight-medium);
    color: var(--text-tertiary);
}

.risk-value-context {
    font-size: var(--text-2xs);
    font-weight: var(--weight-medium);
    letter-spacing: 0.04em;
    color: var(--text-secondary);
    line-height: var(--leading-none);
}


.risk-field-body {
    padding: 0;
    border-top: 1px solid var(--border-strong);
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0;
}

/* chosen-treatments-list inside simulation-results inherits padding from parent */

/* ─── Chosen Treatments List ─── */
.chosen-treatments-list {
    display: flex;
    flex-direction: column;
    gap: var(--space-2);
    width: 100%;
}

.chosen-treatments-empty {
    margin: 0;
    padding: 12px 0;
    font-size: var(--text-ui);
    color: var(--text-secondary);
    text-align: center;
    font-style: italic;
}

.chosen-treatment-item {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 10px 12px;
    background: var(--primary-light);
    border-radius: var(--radius-sm);
    border: 1px solid var(--border);
}

.chosen-treatment-icon {
    width: 18px;
    height: 18px;
    color: var(--blue);
    flex-shrink: 0;
}

.chosen-treatment-title {
    flex: 1;
    font-size: var(--text-sm);
    font-weight: var(--weight-medium);
    color: var(--text-primary);
}

.btn-undo-treatment {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 10px 16px;
    font-size: var(--text-ui);
    font-weight: var(--weight-bold);
    color: var(--text-on-primary);
    background: var(--primary);
    border: none;
    border-radius: var(--radius);
    cursor: pointer;
    transition: transform 0.25s var(--ease-smooth), box-shadow 0.25s var(--ease-smooth), background-color 0.25s var(--ease-smooth);
    letter-spacing: -0.01em;
    width: 100%;
    justify-content: center;
    box-sizing: border-box;
}

.btn-undo-treatment:hover:not(:disabled) {
    transform: translateY(-1px);
    box-shadow: var(--shadow-hover);
}

.btn-undo-treatment:active:not(:disabled) {
    transform: translateY(0);
}

.btn-undo-treatment:disabled {
    opacity: 0.5;
    cursor: not-allowed;
    box-shadow: none;
}

.btn-undo-treatment .lucide-icon {
    width: 16px;
    height: 16px;
}

/* ─── Simulation Results section (in Treatment panel) ─── */
#simulation-results {
    margin-bottom: 14px;
    border: 1px solid var(--border);
    border-radius: var(--radius);
    background: var(--bg-card);
    padding: 16px 16px 14px;
    box-shadow: var(--shadow-sm);
}

/* ─── Simulation risk card: centered single value ─── */
.sim-risk-card {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 6px;
    padding: 20px 18px 18px;
    margin-bottom: var(--space-3);
}

.sim-risk-label {
    font-size: var(--text-ui);
    font-weight: var(--weight-semibold);
    color: var(--text-secondary);
    letter-spacing: 0.04em;
    text-align: center;
    line-height: var(--leading-default);
}

/* Treatment risk reduction badge (total reduction in simulation-results) */
.treatment-reduction-badge {
    display: none;
    width: 100%;
    padding: 6px 10px;
    font-size: var(--text-ui);
    font-weight: var(--weight-semibold);
    color: var(--text-secondary);
    background: var(--bg-card);
    border: 1px solid var(--border-strong);
    border-radius: var(--radius-sm);
    text-align: center;
    box-sizing: border-box;
}

/* Per-treatment reduction pill inside chosen-treatment-item */
.chosen-treatment-reduction {
    margin-left: auto;
    margin-right: var(--space-2);
    padding: 2px 7px;
    font-size: var(--text-xs);
    font-weight: var(--weight-semibold);
    color: var(--safe);
    background: var(--safe-light);
    border: 1px solid var(--safe-border);
    border-radius: var(--radius-pill);
    white-space: nowrap;
    flex-shrink: 0;
}

/* ─── Contributing Factors Title ─── */
.contributing-factors-title {
    font-size: var(--text-md);
    font-weight: var(--weight-semibold);
    color: var(--text-primary);
    margin: 20px 0 12px 0;
    padding: 0 4px;
}

/* ─── Dark mode adjustments for risk fields ─── */
.dark .risk-field {
    background: var(--bg-card);
    border-color: var(--border-strong);
}

.dark #simulation-results {
    background: var(--bg-card);
    border-color: var(--border-strong);
}

.dark .chosen-treatment-item {
    background: var(--primary-light);
    border-color: var(--primary-glow);
}


/* ============================================
   21. RESPONSIVE DESIGN
   ============================================ */

/* Tablet: stack into 2 columns then 1 */
@media (max-width: 1100px) {
    .main-grid {
        grid-template-columns: 1fr 1fr;
    }

    .col-right {
        grid-column: 1 / -1;
    }

}

@media (max-width: 768px) {
    :root {
        --content-padding: var(--space-3);
        --grid-gap: var(--space-3);
    }

    .main-grid {
        grid-template-columns: 1fr;
    }

    .col-right {
        grid-column: auto;
    }

    .risk-number { font-size: 2.5rem; }
    .risk-unit   { font-size: 1.25rem; }

    .nav-brand span:last-child {
        font-size: var(--text-sm);
    }

    .panel-header-bar h2 {
        font-size: var(--text-sm);
    }
}

@media (max-width: 480px) {
    .nav-brand span:last-child {
        display: none;
    }

    .risk-number { font-size: 2.5rem; }
    .risk-unit   { font-size: 1.25rem; }

}

/* Small mobile (iPhone SE and similar) */
@media (max-width: 360px) {
    .value-input {
        width: 60px;
        min-width: 50px;
    }
    .contrib-header-left {
        min-width: 100px;
    }
    .toggle-option {
        min-width: 36px;
    }
}


/* ============================================
   22. LAYOUT TUNING (NO INTERNAL PANEL SCROLL)
   ============================================ */

/* Keep normal spacing so the Risk Factors panel is not over-compressed */
.main-grid {
    height: auto;
    min-height: 0;
}

/* Panels grow naturally with content; page handles scrolling */
.col-panel {
    display: block;
    max-height: none;
}

.panel-body {
    display: grid;
    padding: 20px 24px;
    overflow: visible;
}

.panel-body-inner {
    overflow: clip;
    min-height: 0;
}

.col-step-label {
    padding: 6px 16px;
    font-size: var(--text-xs);
}

/* Section collapse header layout */
.section-collapse-header {
    display: flex;
    align-items: center;
    gap: 6px;
    margin-bottom: var(--space-1);
    scroll-margin-top: 56px;
}

.section-collapse-header .section-collapse-btn {
    width: auto;
    padding: 4px 6px;
    margin-bottom: 0;
    flex-shrink: 0;
}

.section-collapse-header .input-section-label {
    margin: 0;
    padding: 0;
    border-bottom: none;
    flex: 1;
}

/* ============================================
   23. COLLAPSIBLE SECTIONS
   ============================================ */

.section-collapse-btn {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 22px;
    height: 22px;
    padding: 0;
    background: var(--bg-subtle);
    border: none;
    border-radius: var(--radius-sm);
    cursor: pointer;
    transition: background 0.2s;
    flex-shrink: 0;
    margin-bottom: 0;
}

.section-collapse-btn:hover {
    background: var(--primary-glow);
}

.section-collapse-btn .lucide-icon {
    font-size: 16px !important;
    color: var(--text-tertiary) !important;
    transition: transform 0.3s var(--ease-smooth);
}

.section-collapse-btn.collapsed .lucide-icon {
    transform: rotate(-90deg);
}

.collapsible-section {
    display: grid;
    grid-template-rows: 1fr;
    opacity: 1;
    transition: grid-template-rows 0.4s var(--ease-smooth), opacity 0.3s var(--ease-smooth);
}

.collapsible-section-inner {
    overflow: clip;
    min-height: 0;
}

.collapsible-section.collapsed {
    grid-template-rows: 0fr;
    opacity: 0;
    margin: 0;
    padding: 0;
}

/* Section summary for collapsed non-modifiable factors */
.section-summary {
    display: none;
    padding: 6px 10px;
    background: var(--bg-elevated);
    border-radius: var(--radius-sm);
    font-size: var(--text-xs);
    color: var(--text-secondary);
    border: 1px solid var(--border);
    margin-bottom: var(--space-2);
    line-height: var(--leading-comfort);
    font-weight: var(--weight-medium);
}

.section-summary.visible {
    display: block;
}

.section-summary span {
    white-space: nowrap;
}

/* ============================================
   24. TAB NAVIGATION (Model Column)
   ============================================ */

.model-tabs {
    display: flex;
    gap: var(--space-1);
    padding: 0 0 12px;
    border-bottom: 1px solid var(--border);
    margin-bottom: 14px;
}

.model-tab {
    flex: 1;
    padding: 8px 10px;
    font-size: var(--text-xs);
    font-weight: var(--weight-semibold);
    color: var(--text-tertiary);
    background: var(--bg-disabled);
    border: 1px solid transparent;
    border-radius: var(--radius-md);
    cursor: pointer;
    transition: color 0.2s var(--ease-smooth), background-color 0.2s var(--ease-smooth), border-color 0.2s var(--ease-smooth);
    text-align: center;
    white-space: nowrap;
}

.model-tab:hover {
    color: var(--blue);
    background: var(--blue-light);
}

.model-tab.active {
    color: var(--primary);
    background: var(--primary-light);
    border-color: var(--primary-glow);
    font-weight: var(--weight-bold);
}


.model-tab-content {
    display: none;
}

.model-tab-content.active {
    display: block;
    animation: fadeIn 0.25s var(--ease-smooth);
}

@keyframes fadeIn {
    from { opacity: 0; transform: translateY(4px); }
    to   { opacity: 1; transform: translateY(0); }
}

/* Remove margin from cards inside tabs */
.model-tab-content .center-card {
    margin-bottom: 0;
}

/* ============================================
   25. COMPACT INPUT GROUPS
   ============================================ */

.input-group {
    padding: 14px 4px;
}

.input-label-row {
    margin-bottom: var(--space-1);
}

.factor-value-row {
    margin-top: var(--space-1);
}

.slider-wrapper {
    margin: 4px 0;
}

/* Treatment extras section */
/* .treatment-tools removed — Zone Map now lives in a model-tab */

/* ============================================
   26. RESPONSIVE OVERRIDES FOR COMPACT LAYOUT
   ============================================ */

@media (max-width: 1100px) {
    .main-grid {
        height: auto;
    }
}

@media (max-width: 768px) {
    .main-grid {
        height: auto;
    }

    .model-tabs {
        flex-wrap: wrap;
    }
}

/* ============================================
   26b. KEYBOARD FOCUS – ACCESSIBILITY
   ============================================ */

/* Global focus-visible: rings only for keyboard navigation */
:focus-visible {
    outline: 2px solid var(--primary);
    outline-offset: 2px;
}

/* Override for elements that have custom focus styling */
.value-input:focus-visible,
.pd-input:focus-visible {
    outline: none; /* handled by border-color + box-shadow */
}

/* Slider: custom focus-visible ring around thumb */
.slider:focus-visible {
    outline: none;
}

.slider:focus-visible::-webkit-slider-thumb {
    box-shadow: var(--shadow-thumb-focus);
}

.slider:focus-visible::-moz-range-thumb {
    box-shadow: var(--shadow-thumb-focus);
}

/* Circular buttons: circular focus ring */
.btn-reset:focus-visible,
.btn-dark-mode:focus-visible {
    outline: 2px solid var(--primary);
    outline-offset: 2px;
    border-radius: var(--radius-full);
}

/* Standard buttons */
.btn-simulate-treatment:focus-visible,
.section-collapse-btn:focus-visible,
.panel-collapse-btn:focus-visible,
.btn-expand-hero:focus-visible,
.btn-tutorial:focus-visible,
.btn-settings:focus-visible,
.btn-patient-menu:focus-visible,
.btn-undo-treatment:focus-visible,
.tutorial-nav-btn:focus-visible,
.landing-get-started:focus-visible,
.landing-skip-btn:focus-visible {
    outline: 2px solid var(--primary);
    outline-offset: 2px;
}

/* Lucide Icons - Base Styles */
.lucide-icon {
    width: 1em;
    height: 1em;
    flex-shrink: 0;
    stroke-width: 1.5;
}

.lucide-icon svg {
    width: 100%;
    height: 100%;
}


/* ============================================
   27. TREATMENT OVERVIEW – Factor-Contribution-Style Bars
   ============================================ */

.treatment-overview {
    display: flex;
    flex-direction: column;
    gap: 2px;
}

.treatment-overview-row {
    display: flex;
    align-items: center;
    gap: var(--space-2);
    padding: 14px 16px;
    border-radius: var(--radius);
    margin-bottom: var(--space-2);
    transition: background 0.2s var(--ease-smooth), box-shadow 0.2s var(--ease-smooth);
}

.treatment-overview-row.indicated {
    background: var(--bg-subtle);
}

.treatment-overview-row.elevated {
    background: var(--bg-subtle);
}

.treatment-overview-row.normal {
    background: var(--bg-subtle);
}

.treatment-overview-row:hover {
    background: var(--bg-hover);
}

.treatment-overview-row.indicated:hover {
    background: var(--bg-hover);
}

.treatment-overview-row.elevated:hover {
    background: var(--bg-hover);
}

.treatment-overview-row.normal:hover {
    background: var(--bg-hover);
}

.tov-icon-col {
    flex-shrink: 0;
    width: 28px;
    height: 28px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: var(--radius-sm);
}

.treatment-overview-row.indicated .tov-icon-col {
    background: var(--bg-hover);
}

.treatment-overview-row.elevated .tov-icon-col {
    background: var(--bg-hover);
}

.treatment-overview-row.normal .tov-icon-col {
    background: var(--bg-hover);
}

.tov-factor-icon {
    font-size: 16px !important;
}

.treatment-overview-row.indicated .tov-factor-icon {
    color: var(--text-secondary) !important;
}

.treatment-overview-row.elevated .tov-factor-icon {
    color: var(--text-secondary) !important;
}

.treatment-overview-row.normal .tov-factor-icon {
    color: var(--text-secondary) !important;
}

.tov-main-col {
    flex: 1;
    min-width: 0;
    overflow: clip;
}

.tov-label-row {
    display: flex;
    align-items: center;
    gap: 6px;
    margin-bottom: 3px;
    min-width: 0;
}

.tov-title {
    font-size: var(--text-xs);
    font-weight: var(--weight-semibold);
    color: var(--text-primary);
    white-space: nowrap;
    overflow: clip;
    text-overflow: ellipsis;
    flex: 1;
    min-width: 0;
}

.tov-status {
    display: inline-flex;
    align-items: center;
    gap: 3px;
    font-size: var(--text-xs);
    font-weight: var(--weight-bold);
    letter-spacing: 0.04em;
    padding: 1px 6px;
    border-radius: var(--radius-xs);
    white-space: nowrap;
    flex-shrink: 0;
}

.tov-status .lucide-icon {
    font-size: var(--text-xs) !important;
}

.tov-status.status-indicated {
    color: var(--text-secondary);
    background: var(--bg-hover);
}

.tov-status.status-indicated .lucide-icon {
    color: var(--text-secondary) !important;
}

.tov-status.status-elevated {
    color: var(--text-secondary);
    background: var(--bg-hover);
}

.tov-status.status-elevated .lucide-icon {
    color: var(--text-secondary) !important;
}

.tov-status.status-normal {
    color: var(--text-secondary);
    background: var(--bg-hover);
}

.tov-status.status-normal .lucide-icon {
    color: var(--text-secondary) !important;
}

.tov-bar-container {
    height: 5px;
    background: var(--bg-subtle);
    border-radius: var(--radius-xs);
    overflow: clip;
}

.tov-bar {
    height: 100%;
    width: 100%;
    border-radius: var(--radius-xs);
    transition: transform 0.4s var(--ease-out);
    transform-origin: left;
    transform: scaleX(0);
    min-width: 3px;
}

.tov-bar.bar-indicated {
    background: linear-gradient(90deg, var(--danger), var(--danger-end));
}

.tov-bar.bar-normal {
    background: linear-gradient(90deg, var(--safe), var(--safe-end));
}

.tov-pct {
    font-size: var(--text-xs);
    color: var(--text-tertiary);
    margin-top: 2px;
    white-space: nowrap;
    overflow: clip;
    text-overflow: ellipsis;
}

/* Clickable label row */
.tov-clickable {
    cursor: pointer;
    user-select: none;
}

.tov-clickable:hover .tov-title {
    color: var(--blue);
}

/* Chevron icon for expand/collapse */
.tov-chevron {
    font-size: 16px !important;
    color: var(--text-tertiary) !important;
    transition: transform 0.3s var(--ease-smooth);
    flex-shrink: 0;
    margin-left: var(--space-1);
}

.tov-chevron.collapsed {
    transform: rotate(-90deg);
}

/* Expandable detail section inside each treatment row */
.tov-details {
    display: grid;
    grid-template-rows: 0fr;
    opacity: 0;
    transition: grid-template-rows 0.35s var(--ease-smooth), opacity 0.25s var(--ease-smooth), margin 0.35s var(--ease-smooth);
    margin-top: 0;
}

.tov-details.expanded {
    grid-template-rows: 1fr;
    opacity: 1;
    margin-top: var(--space-2);
}

.tov-details-inner {
    overflow: clip;
    min-height: 0;
    display: flex;
    flex-direction: column;
    gap: var(--space-1);
    padding: 6px 0 2px;
    border-top: 1px solid var(--border);
}

/* Therapy mini cards inside expanded details */
.tov-details .therapy-mini {
    font-size: var(--text-xs);
    padding: 6px 8px;
    background: var(--bg-card);
    border: 1px solid var(--border);
    border-radius: var(--radius-sm);
    line-height: var(--leading-default);
    overflow-wrap: break-word;
    word-break: break-word;
}

.treatment-overview-row.indicated .tov-details-inner {
    border-top-color: var(--border);
}

.treatment-overview-row.elevated .tov-details-inner {
    border-top-color: var(--border);
}

.treatment-overview-row.normal .tov-details-inner {
    border-top-color: var(--border);
}


/* ============================================
   30. PATIENT MANAGEMENT – Button, Drawer & Cards
   ============================================ */

/* Nav Button - Unified gray style */
.btn-patient-menu {
    display: flex;
    align-items: center;
    gap: 6px;
    padding: 0 10px;
    height: 32px;
    background: var(--bg-subtle);
    border: none;
    border-radius: var(--radius-md);
    cursor: pointer;
    transition: background 0.2s, transform 0.2s, color 0.2s;
    font-size: var(--text-ui);
    font-weight: var(--weight-medium);
    color: var(--text-secondary);
    white-space: nowrap;
}

.btn-patient-menu:hover {
    background: var(--bg-pressed);
    color: var(--text-primary);
    transform: translateY(-1px);
}

.btn-patient-menu:active,
.btn-patient-menu.open {
    background: var(--bg-active);
    color: var(--text-primary);
}

.btn-patient-menu .lucide-icon {
    font-size: var(--text-base);
}

.patient-name-label {
    max-width: 100px;
    overflow: clip;
    text-overflow: ellipsis;
}

.patient-chevron {
    font-size: var(--text-sm) !important;
    transition: transform 0.3s var(--ease-smooth);
}

.btn-patient-menu.open .patient-chevron {
    transform: rotate(180deg);
}

/* Overlay */
.patient-overlay {
    position: fixed;
    inset: 0;
    background: var(--overlay-bg);
    z-index: var(--z-patient-ov);
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.3s var(--ease-smooth);
}

.patient-overlay.open {
    opacity: 1;
    pointer-events: auto;
}

/* Drawer */
.patient-drawer {
    position: fixed;
    top: 0;
    right: 0;
    width: 340px;
    max-width: 90vw;
    height: 100vh;
    background: var(--bg-card);
    box-shadow: var(--shadow-drawer);
    z-index: var(--z-dropdown);
    transform: translateX(100%);
    transition: transform 0.35s cubic-bezier(0.32, 0.72, 0, 1);
    display: flex;
    flex-direction: column;
    overflow-y: auto;
}

.patient-drawer.open {
    transform: translateX(0);
}

/* Drawer Header */
.pd-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 16px 18px;
    border-bottom: 1px solid var(--border);
    background: var(--bg-elevated);
    flex-shrink: 0;
}

.pd-header h2 {
    display: flex;
    align-items: center;
    gap: var(--space-2);
    font-size: var(--text-md);
    font-weight: var(--weight-semibold);
    color: var(--text-primary);
    margin: 0;
}

.pd-header h2 .lucide-icon {
    font-size: 1.25rem;
}

.pd-close-btn {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 30px;
    height: 30px;
    border: none;
    border-radius: var(--radius-full);
    background: var(--bg-subtle);
    color: var(--text-secondary);
    cursor: pointer;
    transition: background 0.2s;
}

.pd-close-btn:hover {
    background: var(--bg-pressed);
}

/* Active Patient Indicator */
.pd-active-patient {
    display: flex;
    align-items: center;
    gap: var(--space-2);
    padding: 10px 18px;
    background: var(--blue-light);
    border-bottom: 1px solid var(--border);
    font-size: var(--text-ui);
    font-weight: var(--weight-semibold);
    color: var(--blue);
    flex-shrink: 0;
}

.pd-active-patient .lucide-icon {
    font-size: var(--text-lg);
}

/* Sections */
.pd-section {
    padding: 12px 18px;
    border-bottom: 1px solid var(--border);
}

.pd-section-label {
    font-size: var(--text-xs);
    font-weight: var(--weight-bold);
    letter-spacing: 0.06em;
    color: var(--text-tertiary);
    margin-bottom: var(--space-2);
}

/* Patient List */
.pd-patient-list {
    display: flex;
    flex-direction: column;
    gap: var(--space-1);
    max-height: 300px;
    overflow-y: auto;
}

.pd-empty-msg {
    font-size: var(--text-xs);
    color: var(--text-tertiary);
    text-align: center;
    padding: var(--space-3);
}

/* Patient Card */
.pd-patient-card {
    display: flex;
    align-items: center;
    gap: var(--space-2);
    padding: 8px 10px;
    background: var(--bg-elevated);
    border: 1px solid var(--border);
    border-radius: var(--radius-sm);
    cursor: pointer;
    transition: background 0.2s, border-color 0.2s, box-shadow 0.2s;
}

.pd-patient-card:hover {
    background: var(--primary-light);
    border-color: var(--border-strong);
}

.pd-patient-card.active {
    background: var(--primary-light);
    border-color: var(--border-strong);
    box-shadow: 0 0 0 1px var(--border);
}

.pd-patient-avatar {
    width: 28px;
    height: 28px;
    border-radius: var(--radius-full);
    background: var(--primary-light);
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    font-size: var(--text-xs);
    font-weight: var(--weight-bold);
    color: var(--primary);
}

.pd-patient-info {
    flex: 1;
    min-width: 0;
}

.pd-patient-name {
    font-size: var(--text-ui);
    font-weight: var(--weight-semibold);
    color: var(--text-primary);
    white-space: nowrap;
    overflow: clip;
    text-overflow: ellipsis;
}

.pd-patient-risk {
    font-size: var(--text-xs);
    color: var(--text-tertiary);
    font-weight: var(--weight-medium);
}

.pd-patient-actions {
    display: flex;
    gap: 2px;
    flex-shrink: 0;
}

.pd-btn-icon {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 24px;
    height: 24px;
    border: none;
    border-radius: var(--radius-xs);
    background: transparent;
    cursor: pointer;
    transition: background 0.2s;
}

.pd-btn-icon:hover {
    background: var(--bg-hover);
}

.pd-btn-icon .lucide-icon {
    font-size: var(--text-sm) !important;
    color: var(--text-tertiary) !important;
}

.pd-btn-icon.delete:hover .lucide-icon {
    color: var(--danger) !important;
}

.pd-btn-icon.save:hover .lucide-icon {
    color: var(--safe) !important;
}

.pd-btn-icon.rename:hover .lucide-icon {
    color: var(--primary) !important;
}

/* Add Form */
.pd-add-form {
    display: flex;
    flex-direction: column;
    gap: var(--space-2);
}

.pd-input {
    padding: 8px 12px;
    border: 1px solid var(--border-strong);
    border-radius: var(--radius-sm);
    font-size: var(--text-ui);
    font-weight: var(--weight-medium);
    background: var(--bg-elevated);
    color: var(--text-primary);
    transition: border-color 0.2s, box-shadow 0.2s;
}

.pd-input:focus {
    outline: none;
    border-color: var(--primary);
    box-shadow: 0 0 0 2px var(--primary-glow);
}

.pd-btn-add {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    padding: 8px 14px;
    font-size: var(--text-ui);
    font-weight: var(--weight-semibold);
    color: var(--text-on-primary);
    background: var(--primary);
    border: none;
    border-radius: var(--radius-sm);
    cursor: pointer;
    transition: background 0.2s, transform 0.2s;
}

.pd-btn-add:hover {
    background: var(--primary-hover);
    transform: translateY(-1px);
}

.pd-btn-add .lucide-icon {
    font-size: var(--text-base);
    color: var(--text-on-primary) !important;
}

/* Import/Export */
.pd-io-section {
    border-bottom: none;
}

.pd-io-actions {
    display: flex;
    gap: var(--space-2);
}

.pd-btn-io {
    flex: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 5px;
    padding: 8px 12px;
    font-size: var(--text-xs);
    font-weight: var(--weight-semibold);
    color: var(--text-secondary);
    background: var(--bg-elevated);
    border: 1px solid var(--border-strong);
    border-radius: var(--radius-sm);
    cursor: pointer;
    transition: background 0.2s, border-color 0.2s;
    text-align: center;
}

.pd-btn-io:hover {
    background: var(--primary-light);
    border-color: var(--border-strong);
}

.pd-btn-io .lucide-icon {
    font-size: var(--text-md);
}

.pd-btn-import {
    cursor: pointer;
}

/* Responsive */
@media (max-width: 480px) {
    .patient-drawer {
        width: 100vw;
        max-width: 100vw;
    }

    .patient-name-label {
        display: none;
    }

    .patient-chevron {
        display: none;
    }

    .btn-patient-menu {
        width: 32px;
        height: 32px;
        padding: 0;
        justify-content: center;
    }

    .btn-patient-menu .patient-name-label,
    .btn-patient-menu .patient-chevron {
        display: none;
    }
}


/* ============================================
   31. TREATMENT SIMULATION
   ============================================ */

/* Simulate Treatment Button */
.btn-simulate-treatment {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    box-sizing: border-box;
    gap: 6px;
    margin-top: 10px;
    padding: 10px 16px;
    font-size: var(--text-ui);
    font-weight: var(--weight-bold);
    color: var(--text-on-primary);
    background: var(--primary);
    border: none;
    border-radius: var(--radius);
    cursor: pointer;
    transition: transform 0.25s var(--ease-smooth), box-shadow 0.25s var(--ease-smooth), background-color 0.25s var(--ease-smooth), opacity 0.25s var(--ease-smooth);
    letter-spacing: -0.01em;
}

.btn-simulate-treatment:hover:not(:disabled) {
    transform: translateY(-1px);
    box-shadow: var(--shadow-hover);
}

.btn-simulate-treatment:active:not(:disabled) {
    transform: translateY(0);
}

.btn-simulate-treatment:disabled {
    background: var(--bg-disabled);
    color: var(--text-tertiary);
    cursor: not-allowed;
    box-shadow: none;
}

.btn-simulate-treatment .lucide-icon {
    font-size: var(--text-base);
}

.btn-simulate-treatment.simulated {
    background: var(--bg-elevated);
    color: var(--text-tertiary);
    cursor: not-allowed;
    opacity: 0.7;
    border: 1px solid var(--border);
}

.btn-simulate-treatment.simulated .lucide-icon {
    color: var(--safe);
}

/* ─── Simulated treatment card — neutral gray, same as other cards ─── */
.treatment-overview-row.simulated {
    background: var(--bg-subtle);
}

.treatment-overview-row.simulated:hover {
    background: var(--bg-hover);
}

/* Undo button inside a simulated row — compact, centered */
.treatment-overview-row.simulated .btn-undo-treatment {
    margin-top: 10px;
    width: fit-content !important;
    padding: 6px 20px;
    font-size: var(--text-xs);
    font-weight: var(--weight-semibold);
    margin-left: var(--space-2);
}

/* Reduction pill — replaces status badge on simulated cards */
.tov-reduction-pill {
    display: inline-flex;
    align-items: center;
    gap: 2px;
    flex-shrink: 0;
    font-size: var(--text-xs);
    font-weight: var(--weight-semibold);
    color: var(--text-secondary);
    background: var(--bg-hover);
    border: 1px solid var(--border-strong);
    border-radius: var(--radius-sm);
    padding: 2px 7px;
}

.tov-reduction-pill .lucide-icon {
    width: 11px;
    height: 11px;
}


/* Section divider between simulated and remaining treatment cards */
.treatment-section-divider {
    display: flex;
    align-items: center;
    gap: var(--space-2);
    margin: 4px 0;
    padding: 0 12px;
}

.treatment-section-divider::before,
.treatment-section-divider::after {
    content: '';
    flex: 1;
    border-top: 1px solid var(--border);
}

.treatment-section-label {
    font-size: var(--text-xs);
    color: var(--text-secondary);
    white-space: nowrap;
    font-weight: var(--weight-medium);
    letter-spacing: 0.04em;
}

/* Simulation completion flash */
.treatment-overview-row.sim-complete {
    animation: simCompletePulse 1.2s ease-out;
}

@keyframes simCompletePulse {
    0%   { opacity: 0.7; transform: scale(0.995); }
    50%  { opacity: 1; transform: scale(1); }
    100% { opacity: 1; transform: scale(1); }
}

/* ============================================
   33. SEMANTISCHE ICON-FARBEN (nach Entfernung des globalen Overrides)
   ============================================ */

/* Reset button */
.btn-reset .lucide-icon { color: var(--text-secondary) !important; }
/* Section collapse */
.section-collapse-btn .lucide-icon { color: var(--text-tertiary) !important; }
/* Panel collapse */
.panel-collapse-btn .lucide-icon { color: var(--text-tertiary) !important; }
/* Simulate button */
.btn-simulate-treatment .lucide-icon { color: inherit !important; }
/* Patient menu */
.btn-patient-menu .lucide-icon { color: currentColor !important; }
.btn-patient-menu:hover .lucide-icon { color: currentColor !important; }
.pd-close-btn .lucide-icon { color: var(--text-secondary) !important; }

/* ============================================
   34. DARK MODE TOGGLE
   ============================================ */

.btn-dark-mode {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 32px;
    height: 32px;
    border: none;
    border-radius: var(--radius-full);
    background: var(--bg-subtle);
    color: var(--text-secondary);
    cursor: pointer;
    transition: background 0.2s, transform 0.2s, color 0.2s;
}

.btn-dark-mode:hover {
    background: var(--bg-pressed);
    transform: scale(1.03);
}

.btn-dark-mode.active {
    background: var(--accent-gold-glow);
    color: var(--accent-gold);
}

.btn-dark-mode .lucide-icon {
    width: 18px;
    height: 18px;
}


/* ============================================
   35. LANGUAGE SELECTOR
   ============================================ */

.btn-language {
    display: flex;
    align-items: center;
    gap: 6px;
    padding: 0 10px;
    height: 32px;
    background: var(--bg-subtle);
    border: none;
    border-radius: var(--radius-md);
    cursor: pointer;
    font-size: var(--text-ui);
    font-weight: var(--weight-medium);
    color: var(--text-secondary);
    transition: background 0.2s, transform 0.2s, color 0.2s;
}

.btn-language:hover {
    background: var(--bg-pressed);
    color: var(--text-primary);
    transform: translateY(-1px);
}

.btn-language:active {
    background: var(--bg-active);
    transform: translateY(0);
}

.btn-language[aria-expanded="true"] {
    background: var(--bg-active);
    color: var(--text-primary);
}

.btn-language .lang-flag {
    width: 24px;
    height: 18px;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}

.btn-language .lang-flag svg {
    width: 100%;
    height: 100%;
    display: block;
}

.btn-language .lang-code {
    font-size: var(--text-xs);
    font-weight: var(--weight-semibold);
    letter-spacing: 0.02em;
}

.btn-language .lucide-icon {
    width: 14px;
    height: 14px;
    color: currentColor;
}

/* Language Dropdown */
.lang-dropdown {
    position: fixed;
    z-index: var(--z-dropdown);
    background: var(--bg-card);
    border-radius: var(--radius);
    box-shadow: var(--shadow-card);
    min-width: 160px;
    max-height: 50vh;
    overflow-inline: clip;
    overflow-block: auto;
    animation: dropdown-appear 0.15s var(--ease-out);
}

@keyframes dropdown-appear {
    from {
        opacity: 0;
        transform: translateY(-8px) scale(0.98);
    }
    to {
        opacity: 1;
        transform: translateY(0) scale(1);
    }
}

.lang-option {
    display: flex;
    align-items: center;
    gap: 10px;
    width: 100%;
    padding: 10px 14px;
    border: none;
    background: transparent;
    cursor: pointer;
    font-size: var(--text-sm);
    text-align: left;
    color: var(--text-primary);
    transition: background-color 0.15s;
}

.lang-option:hover {
    background: var(--blue-light);
}

.lang-option.active {
    background: var(--blue-light);
    font-weight: var(--weight-medium);
}

.lang-option .lang-flag {
    width: 24px;
    height: 18px;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}

.lang-option .lang-flag svg {
    width: 100%;
    height: 100%;
    display: block;
}

.lang-option .lang-name {
    flex: 1;
}

/* Dark mode adjustments */
.dark .btn-language:hover {
    background: var(--bg-hover);
    color: var(--text-primary);
}

.dark .btn-language:active,
.dark .btn-language[aria-expanded="true"] {
    background: var(--bg-pressed);
    color: var(--text-primary);
}


/* ============================================
   36. SETTINGS BUTTON & PANEL
   ============================================ */

/* Settings Button */
.btn-settings {
    display: flex;
    align-items: center;
    gap: 6px;
    padding: 0 10px;
    height: 32px;
    background: var(--bg-subtle);
    border: none;
    border-radius: var(--radius-md);
    cursor: pointer;
    font-size: var(--text-ui);
    font-weight: var(--weight-medium);
    color: var(--text-secondary);
    transition: background 0.2s, transform 0.2s, color 0.2s;
}

.btn-settings:hover {
    background: var(--bg-pressed);
    color: var(--text-primary);
    transform: translateY(-1px);
}

.btn-settings:active,
.btn-settings[aria-expanded="true"] {
    background: var(--bg-active);
    color: var(--text-primary);
}

.btn-settings .lucide-icon {
    width: 16px;
    height: 16px;
}

.settings-label {
    font-size: var(--text-xs);
}

/* Mobile: Settings button icon-only */
@media (max-width: 768px) {
    .btn-settings .settings-label {
        display: none;
    }
}

/* Settings Panel - Slide out */
.settings-panel {
    position: fixed;
    top: 60px;
    right: 0;
    z-index: var(--z-panel);
    background: var(--bg-card);
    border-radius: 12px 0 0 12px;
    box-shadow: var(--shadow-card);
    padding: var(--space-4);
    min-width: min(280px, calc(100vw - 32px));
    transform: translateX(100%);
    transition: transform 0.3s cubic-bezier(0.25, 0.46, 0.45, 0.94);
}

.settings-panel.open {
    transform: translateX(0);
}

/* Language Dropdown in Settings - Integrated, pushes content down */
.settings-lang-dropdown {
    position: relative;
    width: 100%;
    background: var(--bg-elevated);
    border: 1px solid var(--border);
    border-radius: var(--radius-md);
    margin-top: var(--space-2);
    max-height: 50vh;
    overflow-inline: clip;
    overflow-block: auto;
    animation: slide-down 0.2s var(--ease-out);
}

@keyframes slide-down {
    from {
        opacity: 0;
        transform: translateY(-8px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

/* Rotate chevron when dropdown is open */
/* Rotate chevron when dropdown is open - points left when open */
.btn-language[aria-expanded="true"] .lang-chevron {
    transform: rotate(180deg);
}

.lang-chevron {
    transition: transform 0.2s;
}

/* Settings Model Button - allows text wrapping */
.btn-settings-model {
    display: flex;
    align-items: center;
    gap: 6px;
    padding: 6px 10px;
    min-height: 32px;
    background: var(--bg-subtle);
    border: none;
    border-radius: var(--radius-md);
    cursor: pointer;
    font-size: var(--text-ui);
    font-weight: var(--weight-medium);
    color: var(--text-secondary);
    transition: background 0.2s, transform 0.2s, color 0.2s;
    text-align: left;
    max-width: 160px;
}

.btn-settings-model:hover {
    background: var(--bg-pressed);
    color: var(--text-primary);
    transform: translateY(-1px);
}

.btn-settings-model:active {
    background: var(--bg-active);
    transform: translateY(0);
}

.btn-settings-model[aria-expanded="true"] {
    background: var(--bg-active);
    color: var(--text-primary);
}

.btn-settings-model .lucide-icon {
    width: 14px;
    height: 14px;
    flex-shrink: 0;
}

.btn-settings-model .settings-model-label {
    font-size: var(--text-xs);
    font-weight: var(--weight-semibold);
    line-height: var(--leading-snug);
    flex: 1;
    word-wrap: break-word;
    overflow-wrap: break-word;
}

/* Dark mode adjustments for settings model button */
.dark .btn-settings-model:hover {
    background: var(--bg-hover);
    color: var(--text-primary);
}

.dark .btn-settings-model:active,
.dark .btn-settings-model[aria-expanded="true"] {
    background: var(--bg-pressed);
    color: var(--text-primary);
}

/* Restart Setup Button - matches other settings buttons */
.btn-restart-setup {
    display: flex;
    align-items: center;
    gap: var(--space-2);
    padding: var(--space-2) var(--space-3);
    height: 32px;
    background: var(--bg-elevated);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    font-family: inherit;
    font-size: var(--text-sm);
    font-weight: var(--weight-semibold);
    color: var(--text-secondary);
    cursor: pointer;
    transition: transform 0.2s var(--ease-smooth), box-shadow 0.2s var(--ease-smooth), background-color 0.2s var(--ease-smooth), color 0.2s var(--ease-smooth), border-color 0.2s var(--ease-smooth), opacity 0.2s var(--ease-smooth);
}

.btn-restart-setup:hover {
    background: var(--bg-page);
    border-color: var(--border-strong);
    color: var(--text-primary);
    transform: translateY(-1px);
}

.btn-restart-setup:active {
    transform: translateY(0);
}

.btn-restart-setup .lucide-icon {
    width: 14px;
    height: 14px;
    color: currentColor;
}

.dark .btn-restart-setup {
    background: var(--bg-subtle);
    border-color: var(--border);
    color: var(--text-secondary);
}

.dark .btn-restart-setup:hover {
    background: var(--bg-hover);
    border-color: var(--border-strong);
    color: var(--text-primary);
}

/* Rotate chevron when model dropdown is open */
#settingsModelBtn[aria-expanded="true"] .lang-chevron {
    transform: rotate(180deg);
}

.settings-lang-option {
    display: flex;
    align-items: center;
    gap: 10px;
    width: 100%;
    padding: 10px 14px;
    border: none;
    background: transparent;
    cursor: pointer;
    font-size: var(--text-sm);
    text-align: left;
    color: var(--text-primary);
    transition: background-color 0.15s;
}

.settings-lang-option:hover {
    background: var(--blue-light);
}

.settings-lang-option.active {
    background: var(--blue-light);
    font-weight: var(--weight-medium);
}

.settings-lang-option .lang-flag {
    width: 24px;
    height: 18px;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}

.settings-lang-option .lang-flag svg {
    width: 100%;
    height: 100%;
    display: block;
}

.settings-lang-option .lang-name {
    flex: 1;
}

/* Dark mode for settings dropdown */
.dark .settings-lang-dropdown {
    background: var(--bg-elevated);
    border-color: var(--border);
}

.dark .settings-lang-option:hover {
    background: var(--primary-light);
}

.dark .settings-lang-option.active {
    background: var(--primary-light);
}

/* ===================== MODEL DROPDOWN IN SETTINGS ===================== */

.settings-model-dropdown {
    position: relative;
    width: 100%;
    background: var(--bg-elevated);
    border: 1px solid var(--border);
    border-radius: var(--radius-md);
    margin-top: var(--space-2);
    animation: slide-down 0.2s var(--ease-out);
}

.settings-model-option {
    display: flex;
    align-items: flex-start;
    gap: 10px;
    width: 100%;
    padding: 12px 14px;
    border: none;
    border-radius: 0;
    background: transparent;
    color: var(--text-primary);
    font-size: var(--text-ui);
    text-align: left;
    cursor: pointer;
    transition: background-color 0.15s;
    box-sizing: border-box;
    margin: 0;
}

.settings-model-option:hover {
    background-color: var(--primary-light);
}

.settings-model-option.active {
    background-color: var(--primary-light);
}

.settings-model-option .model-option-icon {
    width: 16px;
    height: 16px;
    color: var(--text-secondary);
    flex-shrink: 0;
    margin-top: 3px;
    align-self: flex-start;
}

.settings-model-option.active .model-option-icon {
    color: var(--primary);
}

.settings-model-option .model-option-content {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    flex: 1;
    min-width: 0;
    gap: var(--space-2);
    padding: 2px 0;
}

.settings-model-option .model-option-info {
    display: flex;
    flex-direction: column;
    min-width: 0;
    flex: 1;
}

.settings-model-option .model-option-name {
    font-weight: var(--weight-semibold);
    font-size: var(--text-sm);
    color: var(--text-primary);
}

.settings-model-option.active .model-option-name {
    color: var(--primary);
}

.settings-model-option .model-option-desc {
    font-size: var(--text-xs);
    color: var(--text-secondary);
    margin-top: 2px;
    word-wrap: break-word;
    overflow-wrap: break-word;
}

.settings-model-option .model-option-badge {
    display: inline-flex;
    align-items: center;
    padding: 3px 8px;
    border-radius: var(--radius-xs);
    font-size: var(--text-xs);
    font-weight: var(--weight-semibold);
    letter-spacing: 0.5px;
    background: var(--bg-hover);
    color: var(--text-secondary);
    white-space: nowrap;
    flex-shrink: 0;
    margin-top: 2px;
}

.settings-model-option.active .model-option-badge {
    background: var(--primary-light);
    color: var(--primary);
}

/* Dark mode for model dropdown in settings */
.dark .settings-model-dropdown {
    background: var(--bg-elevated);
    border-color: var(--border);
}

.dark .settings-model-option:hover {
    background-color: var(--primary-light);
}

.dark .settings-model-option.active {
    background-color: var(--primary-light);
}

.dark .settings-model-option .model-option-badge {
    background: var(--bg-subtle);
    color: var(--text-secondary);
}

.dark .settings-model-option.active .model-option-badge {
    background: var(--primary-light);
    color: var(--primary);
}

/* Model badge colors based on accuracy level */
.model-option-badge.badge-gray {
    background: var(--bg-hover);
    color: var(--text-secondary);
}

.model-option-badge.badge-yellow {
    background: var(--alert-light);
    color: var(--alert);
}

.model-option-badge.badge-green {
    background: var(--safe-light);
    color: var(--safe);
}

.dark .model-option-badge.badge-gray {
    background: var(--bg-subtle);
    color: var(--text-secondary);
}

.dark .model-option-badge.badge-yellow {
    background: var(--alert-light-dark);
    color: var(--alert-dark);
}

.dark .model-option-badge.badge-green {
    background: var(--safe-light-dark);
    color: var(--safe-dark);
}

.settings-panel-inner {
    display: flex;
    flex-direction: column;
    gap: var(--space-4);
}

.settings-option {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--space-3);
}

.settings-option-label {
    font-size: var(--text-ui);
    font-weight: var(--weight-medium);
    color: var(--text-secondary);
}

/* Settings panel dark mode button */
.btn-settings-darkmode {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 32px;
    height: 32px;
    border: none;
    border-radius: var(--radius-md);
    background: var(--bg-subtle);
    color: var(--text-secondary);
    cursor: pointer;
    transition: background 0.2s, transform 0.2s, color 0.2s;
}

.btn-settings-darkmode:hover {
    background: var(--bg-pressed);
    color: var(--text-primary);
    transform: scale(1.03);
}

.btn-settings-darkmode.active {
    background: var(--accent-gold-glow);
    color: var(--accent-gold);
}

.btn-settings-darkmode .lucide-icon {
    width: 18px;
    height: 18px;
}

/* Settings panel unit toggle */
.settings-unit-toggle {
    gap: var(--space-2);
}

.settings-unit-toggle .toggle-label-nav {
    font-size: var(--text-xs);
    font-weight: var(--weight-semibold);
}

/* Settings overlay */
.settings-overlay {
    position: fixed;
    inset: 0;
    background: var(--overlay-bg);
    z-index: var(--z-settings-ov);
    opacity: 0;
    visibility: hidden;
    transition: opacity 0.3s, visibility 0.3s;
}

.settings-overlay.visible {
    opacity: 1;
    visibility: visible;
}

/* Dark mode adjustments */
.dark .btn-settings:hover {
    background: var(--bg-hover);
    color: var(--text-primary);
}

.dark .btn-settings:active,
.dark .btn-settings[aria-expanded="true"] {
    background: var(--bg-pressed);
    color: var(--text-primary);
}

.dark .settings-panel {
    background: var(--bg-card);
    box-shadow: var(--shadow-dropdown);
}

.dark .btn-settings-darkmode:hover {
    background: var(--bg-hover);
    color: var(--text-primary);
}


/* ============================================
   37. DARK MODE THEME
   ============================================ */

/* Theme transition for smooth switching */
.theme-transition,
.theme-transition *,
.theme-transition *::before,
.theme-transition *::after {
    transition: background-color 0.3s var(--ease-smooth),
                border-color 0.3s var(--ease-smooth),
                color 0.3s var(--ease-smooth),
                box-shadow 0.3s var(--ease-smooth),
                fill 0.3s var(--ease-smooth),
                stroke 0.3s var(--ease-smooth) !important;
}

/* Dark mode color variables */
:root.dark {
    /* Text */
    --text-primary:   #f5f5f7;
    --text-secondary: #a1a1aa;
    --text-tertiary:  #9898a0;

    /* Backgrounds - warm dark colors for better readability */
    --bg-page:        #0f0f12;
    --bg-card:        #1a1a1f;
    --bg-elevated:    #232328;

    /* Borders & Shadows - Vereinfacht für konsistentes, ruhiges Design */
    --border:         rgba(255, 255, 255, 0.08);
    --border-strong:  rgba(255, 255, 255, 0.14);
    --shadow-sm:      0 1px 2px rgba(0, 0, 0, 0.20);
    --shadow:         0 2px 6px rgba(0, 0, 0, 0.25);
    --shadow-card:    0 2px 8px rgba(0, 0, 0, 0.30);

    /* Primary - lighter gray for dark mode */
    --primary:           #5a5a5c;
    --primary-hover:     #6a6a6c;
    --primary-light:     rgba(255, 255, 255, 0.1);
    --primary-glow:      rgba(255, 255, 255, 0.15);

    /* Legacy aliases */
    --blue:              var(--primary);
    --blue-hover:        var(--primary-hover);
    --blue-light:        var(--primary-light);
    --blue-glow:         var(--primary-glow);

    /* Semantic interaction tokens (dark mode) */
    --bg-subtle:       rgba(255, 255, 255, 0.06);
    --bg-hover:        rgba(255, 255, 255, 0.10);
    --bg-pressed:      rgba(255, 255, 255, 0.14);
    --bg-disabled:     rgba(255, 255, 255, 0.04);
    --border-subtle:   rgba(255, 255, 255, 0.08);
    --text-on-inverse: #1d1d1f;
    --bg-neutral:      rgba(255, 255, 255, 0.2);
    --bg-active:       rgba(255, 255, 255, 0.12);
    --bg-nav:          rgba(26, 26, 31, 0.95);
    --accent-gold:     #ffc832;
    --accent-gold-glow: rgba(255, 200, 50, 0.15);

    /* Component Shadows - Dark mode (deeper for visibility) */
    --shadow-thumb:        0 1px 4px rgba(0, 0, 0, 0.4), 0 0 0 1px rgba(255, 255, 255, 0.1);
    --shadow-thumb-hover:  0 2px 8px rgba(0, 0, 0, 0.5), 0 0 0 1px rgba(255, 255, 255, 0.15);
    --shadow-thumb-focus:  0 1px 4px rgba(0, 0, 0, 0.4), 0 0 0 3px rgba(255, 255, 255, 0.25);
    --shadow-toggle-knob:  0 1px 3px rgba(0, 0, 0, 0.3);
    --shadow-hover:       0 2px 8px rgba(0, 0, 0, 0.25);
    --shadow-marker:      0 2px 8px rgba(0, 0, 0, 0.4);
    --shadow-dropdown:    0 8px 30px rgba(0, 0, 0, 0.30);
    --shadow-tutorial:    0 4px 24px rgba(0, 0, 0, 0.30);
    --shadow-drawer:      -4px 0 24px rgba(0, 0, 0, 0.30);
    --shadow-safe:        0 8px 32px rgba(48, 161, 78, 0.20);
    --shadow-glow:        0 0 0 3px rgba(255, 255, 255, 0.20);

    /* Overlays - darker in dark mode */
    --overlay-bg:        rgba(0, 0, 0, 0.50);
    --overlay-modal:     rgba(0, 0, 0, 0.60);
    --overlay-landing:   rgba(0, 0, 0, 0.70);

    /* Tinted backgrounds */
    --danger-tint:       rgba(196, 61, 53, 0.12);

    /* Dark-mode status text colors */
    --alert-dark:        #e5a84a;
    --safe-dark:         #4db868;

    /* Dark-mode status backgrounds */
    --danger-light-dark: rgba(181, 74, 66, 0.15);
    --alert-light-dark:   rgba(184, 134, 44, 0.15);
    --safe-light-dark:    rgba(61, 139, 83, 0.15);
}

/* System preference dark mode (when no explicit preference set) */
@media (prefers-color-scheme: dark) {
    :root:not([data-theme="light"]) {
        --text-primary:   #f5f5f7;
        --text-secondary: #a1a1aa;
        --text-tertiary:  #9898a0;
        --bg-page:        #0f0f12;
        --bg-card:        #1a1a1f;
        --bg-elevated:    #232328;
        --border:         rgba(255, 255, 255, 0.08);
        --border-strong:  rgba(255, 255, 255, 0.14);
        --shadow-sm:      0 1px 2px rgba(0, 0, 0, 0.20);
        --shadow:         0 2px 6px rgba(0, 0, 0, 0.25);
        --shadow-card:    0 2px 8px rgba(0, 0, 0, 0.30);

        /* Primary - lighter gray for dark mode */
        --primary:           #5a5a5c;
        --primary-hover:     #6a6a6c;
        --primary-light:     rgba(255, 255, 255, 0.1);
        --primary-glow:      rgba(255, 255, 255, 0.15);

        /* Legacy aliases */
        --blue:              var(--primary);
        --blue-hover:        var(--primary-hover);
        --blue-light:        var(--primary-light);
        --blue-glow:         var(--primary-glow);

        /* Semantic interaction tokens (dark mode) */
        --bg-subtle:       rgba(255, 255, 255, 0.06);
        --bg-hover:        rgba(255, 255, 255, 0.10);
        --bg-pressed:      rgba(255, 255, 255, 0.14);
        --bg-disabled:     rgba(255, 255, 255, 0.04);
        --border-subtle:   rgba(255, 255, 255, 0.08);
        --text-on-inverse: #1d1d1f;
        --bg-neutral:      rgba(255, 255, 255, 0.2);
        --bg-active:       rgba(255, 255, 255, 0.12);
        --bg-nav:          rgba(26, 26, 31, 0.95);
        --accent-gold:     #ffc832;
        --accent-gold-glow: rgba(255, 200, 50, 0.15);

        /* Component Shadows - Dark mode */
        --shadow-thumb:        0 1px 4px rgba(0, 0, 0, 0.4), 0 0 0 1px rgba(255, 255, 255, 0.1);
        --shadow-thumb-hover:  0 2px 8px rgba(0, 0, 0, 0.5), 0 0 0 1px rgba(255, 255, 255, 0.15);
        --shadow-thumb-focus:  0 1px 4px rgba(0, 0, 0, 0.4), 0 0 0 3px rgba(255, 255, 255, 0.25);
        --shadow-toggle-knob:  0 1px 3px rgba(0, 0, 0, 0.3);
        --shadow-hover:       0 2px 8px rgba(0, 0, 0, 0.25);
        --shadow-marker:      0 2px 8px rgba(0, 0, 0, 0.4);
        --shadow-dropdown:    0 8px 30px rgba(0, 0, 0, 0.30);
        --shadow-tutorial:    0 4px 24px rgba(0, 0, 0, 0.30);
        --shadow-drawer:      -4px 0 24px rgba(0, 0, 0, 0.30);
        --shadow-safe:        0 8px 32px rgba(48, 161, 78, 0.20);
        --shadow-glow:        0 0 0 3px rgba(255, 255, 255, 0.20);

        /* Overlays - darker in dark mode */
        --overlay-bg:        rgba(0, 0, 0, 0.50);
        --overlay-modal:     rgba(0, 0, 0, 0.60);
        --overlay-landing:   rgba(0, 0, 0, 0.70);

        /* Tinted backgrounds */
        --danger-tint:       rgba(196, 61, 53, 0.12);

        /* Dark-mode text colors */
        --alert-dark:        #e5a84a;
        --safe-dark:         #4db868;

        /* Dark-mode status backgrounds */
        --danger-light-dark: rgba(181, 74, 66, 0.15);
        --alert-light-dark:   rgba(184, 134, 44, 0.15);
        --safe-light-dark:    rgba(61, 139, 83, 0.15);
    }
}

/* Dark mode specific overrides for elements that need explicit colors */

/* Navigation */
.dark .nav-brand {
    color: var(--text-primary);
}

/* Unit toggle in dark mode */
.dark .unit-toggle-nav {
    background: var(--bg-subtle);
}

.dark .toggle-label-nav:first-child {
    color: var(--text-primary);
}

/* Reset button */
.dark .btn-reset:hover {
    background: var(--bg-hover);
}

/* Dark mode toggle button */
.dark .btn-dark-mode:hover {
    background: var(--bg-active);
}

/* Risk bar marker */
.dark .risk-bar-marker {
    background: var(--bg-card);
    box-shadow: var(--shadow-marker);
}

/* Icon array */
.dark .icon-array-container {
    background: var(--bg-elevated);
}

.dark .icon-array-item {
    background: var(--bg-subtle);
}

.dark .icon-array-item.affected {
    background: var(--danger);
    box-shadow: 0 1px 3px var(--danger-light);
}

/* Expand hero label */
.dark .btn-expand-hero {
    background: var(--bg-card);
}

.dark .btn-expand-hero:hover {
    background: var(--bg-elevated);
}

.dark .treatment-reduction-badge {
    background: var(--bg-card);
}

/* Panel cards */
.dark .col-panel {
    background: var(--bg-card);
    border-color: var(--border);
    box-shadow: var(--shadow-card);
}

.dark #panel-input[data-risk-level],
.dark #panel-treatment[data-risk-level],
.dark #panel-model {
    border-color: var(--border);
}

/* Panel header bar */
.dark .panel-header-bar {
    border-bottom-color: var(--border);
}

.dark #panel-input .panel-header-bar,
.dark #panel-treatment .panel-header-bar,
.dark #panel-model .panel-header-bar {
    border-top-color: var(--border);
}

/* Input groups */
.dark .input-group {
    border-bottom-color: var(--bg-subtle);
}

.dark .input-group-highlight {
    background: var(--bg-subtle);
    border-color: var(--primary-glow);
}

/* Sliders */
.dark .slider::-webkit-slider-thumb {
    box-shadow: var(--shadow-thumb);
}

.dark .slider::-webkit-slider-thumb:hover {
    box-shadow: var(--shadow-thumb-hover);
}

.dark .slider::-moz-range-thumb {
    box-shadow: var(--shadow-thumb);
}

.dark .slider-track-bg {
    background: var(--border);
}

/* Value input */
.dark .value-input {
    background: var(--bg-elevated);
    border-color: var(--border-strong);
    color: var(--text-primary);
}

.dark .value-input:focus {
    border-color: var(--blue);
    box-shadow: 0 0 0 2px var(--primary-glow);
}

/* Toggle switches */
.dark .toggle-slider {
    background: var(--primary-glow);
}

.dark .toggle-slider::before {
    background: var(--text-primary);
}

.dark .toggle-switch input:checked + .toggle-slider {
    background: var(--blue);
}

/* Contribution chart */
.dark .contrib-header {
    border-top-color: var(--border);
}

/* Model tabs */
.dark .model-tab {
    color: var(--text-secondary);
}

.dark .model-tab:hover {
    background: var(--bg-subtle);
    color: var(--text-primary);
}

.dark .model-tab.active {
    background: var(--primary-glow);
    border-color: var(--bg-neutral);
    color: var(--text-primary);
}

/* Treatment overview */
.dark .treatment-overview-row {
    transition: background 0.2s var(--ease-smooth), box-shadow 0.2s var(--ease-smooth);
}

.dark .treatment-overview-row.indicated {
    background: var(--bg-subtle);
}

.dark .treatment-overview-row.elevated {
    background: var(--bg-subtle);
}

.dark .treatment-overview-row.normal {
    background: var(--bg-subtle);
}

.dark .treatment-overview-row:hover,
.dark .treatment-overview-row.indicated:hover,
.dark .treatment-overview-row.elevated:hover,
.dark .treatment-overview-row.normal:hover {
    background: var(--bg-hover);
}

.dark .treatment-overview-row .tov-icon-col,
.dark .treatment-overview-row.indicated .tov-icon-col,
.dark .treatment-overview-row.elevated .tov-icon-col,
.dark .treatment-overview-row.normal .tov-icon-col {
    background: var(--bg-subtle);
}

.dark .tov-status.status-indicated,
.dark .tov-status.status-elevated,
.dark .tov-status.status-normal {
    background: var(--bg-subtle);
}

.dark .tov-details .therapy-mini {
    background: var(--bg-elevated);
}

/* Patient drawer */
.dark .patient-overlay {
    background: var(--overlay-modal);
}

.dark .patient-drawer {
    background: var(--bg-card);
    box-shadow: var(--shadow-drawer);
}

.dark .pd-header {
    background: var(--bg-elevated);
    border-bottom-color: var(--border);
}

.dark .pd-close-btn:hover {
    background: var(--bg-hover);
}

.dark .pd-input {
    background: var(--bg-elevated);
    border-color: var(--border-strong);
    color: var(--text-primary);
}

.dark .pd-btn-io {
    background: var(--bg-elevated);
    border-color: var(--border-strong);
}

.dark .pd-btn-io:hover {
    background: var(--bg-hover);
    border-color: var(--border-strong);
}

/* Tooltips */
.dark .info-icon[data-tooltip]:hover::after {
    background: var(--bg-elevated);
    box-shadow: var(--shadow-card);
}

.dark .info-icon[data-tooltip]:hover::before {
    border-top-color: var(--bg-elevated);
}

/* Contribution chart dark mode */
.dark .contrib-row:hover {
    background: var(--bg-disabled);
}

.dark .contrib-row.expanded {
    background: var(--bg-elevated);
}

.dark .contrib-row-detail {
    border-top-color: var(--border);
}

/* Section collapse */
.dark .section-collapse-btn:hover {
    background: var(--bg-active);
}

.dark .section-summary {
    background: var(--bg-elevated);
    border-color: var(--border);
}


/* ============================================
   35. ENCRYPTION MODALS
   ============================================ */

/* Modal Overlay */
.modal-overlay {
    position: fixed;
    inset: 0;
    background: var(--overlay-modal);
    z-index: var(--z-modal);
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.3s var(--ease-smooth);
    display: flex;
    align-items: center;
    justify-content: center;
    padding: var(--space-5);
    /* Performance: removed backdrop-filter blur - use darker background instead */
}

.modal-overlay.open {
    opacity: 1;
    pointer-events: auto;
}

/* Modal Content */
.modal-content {
    background: var(--bg-card);
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow-card), 0 0 0 1px var(--border);
    width: 100%;
    max-width: 420px;
    max-height: 90vh;
    overflow-y: auto;
    transform: translateY(20px) scale(0.98);
    transition: transform 0.35s cubic-bezier(0.32, 0.72, 0, 1);
}

.modal-overlay.open .modal-content {
    transform: translateY(0) scale(1);
}

/* Modal Header */
.modal-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 18px 20px 14px;
    border-bottom: 1px solid var(--border);
}

.modal-header h3 {
    display: flex;
    align-items: center;
    gap: 10px;
    font-size: var(--text-base);
    font-weight: var(--weight-semibold);
    color: var(--text-primary);
    margin: 0;
}

.modal-header h3 .lucide-icon {
    width: 20px;
    height: 20px;
    color: var(--blue);
}

.modal-close-btn {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 32px;
    height: 32px;
    border: none;
    border-radius: var(--radius-full);
    background: var(--bg-subtle);
    color: var(--text-secondary);
    cursor: pointer;
    transition: background 0.2s, color 0.2s;
}

.modal-close-btn:hover {
    background: var(--bg-pressed);
    color: var(--text-primary);
}

.modal-close-btn .lucide-icon {
    width: 18px;
    height: 18px;
}

/* Modal Body */
.modal-body {
    padding: var(--space-5);
}

.modal-description {
    font-size: var(--text-ui);
    color: var(--text-secondary);
    margin-bottom: var(--space-4);
    line-height: var(--leading-normal);
}

/* Radio Options */
.radio-group {
    display: flex;
    flex-direction: column;
    gap: 10px;
    margin-bottom: var(--space-1);
}

.radio-option {
    display: flex;
    align-items: flex-start;
    gap: var(--space-3);
    padding: 14px 16px;
    background: var(--bg-elevated);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    cursor: pointer;
    transition: transform 0.2s var(--ease-smooth), box-shadow 0.2s var(--ease-smooth), background-color 0.2s var(--ease-smooth), color 0.2s var(--ease-smooth), border-color 0.2s var(--ease-smooth), opacity 0.2s var(--ease-smooth);
}

.radio-option:hover {
    background: var(--primary-light);
    border-color: var(--border-strong);
}

.radio-option:has(input:checked) {
    background: var(--blue-light);
    border-color: var(--primary-glow);
    box-shadow: var(--shadow-glow);
}

.radio-option:has(input:focus-visible) {
    outline: 2px solid var(--primary);
    outline-offset: 2px;
}

.radio-option input {
    position: absolute;
    opacity: 0;
    width: 0;
    height: 0;
}

.radio-custom {
    width: 20px;
    height: 20px;
    border-radius: var(--radius-full);
    border: 2px solid var(--border-strong);
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    margin-top: 2px;
    transition: border-color 0.2s, background 0.2s;
}

.radio-option:has(input:checked) .radio-custom {
    border-color: var(--blue);
    background: var(--blue);
}

.radio-custom::after {
    content: '';
    width: 8px;
    height: 8px;
    background: var(--text-on-primary);
    border-radius: var(--radius-full);
    transform: scale(0);
    transition: transform 0.2s var(--ease-smooth);
}

.radio-option:has(input:checked) .radio-custom::after {
    transform: scale(1);
}

.radio-label {
    display: flex;
    align-items: flex-start;
    gap: var(--space-3);
    flex: 1;
}

.radio-label .lucide-icon {
    width: 20px;
    height: 20px;
    color: var(--text-tertiary);
    flex-shrink: 0;
    margin-top: 2px;
}

.radio-label span {
    display: flex;
    flex-direction: column;
    gap: 2px;
}

.radio-label strong {
    font-size: var(--text-sm);
    font-weight: var(--weight-semibold);
    color: var(--text-primary);
}

.radio-label small {
    font-size: var(--text-xs);
    color: var(--text-tertiary);
}

.radio-option:has(input:checked) .radio-label .lucide-icon {
    color: var(--blue);
}

/* Password Section */
.password-section {
    margin-top: var(--space-4);
    padding-top: var(--space-4);
    border-top: 1px solid var(--border);
    animation: fadeIn 0.25s var(--ease-smooth);
}

.password-input-wrapper {
    position: relative;
    margin-bottom: var(--space-2);
}

.password-input {
    width: 100%;
    padding: 12px 44px 12px 14px;
    font-size: var(--text-sm);
    font-weight: var(--weight-medium);
    color: var(--text-primary);
    background: var(--bg-elevated);
    border: 1px solid var(--border-strong);
    border-radius: var(--radius);
    transition: border-color 0.2s, box-shadow 0.2s;
}

.password-input:focus {
    outline: none;
    border-color: var(--blue);
    box-shadow: 0 0 0 2px var(--primary-glow);
}

.password-input.error {
    border-color: var(--danger);
    box-shadow: 0 0 0 2px var(--danger-light);
}

.password-toggle-btn {
    position: absolute;
    right: 8px;
    top: 50%;
    transform: translateY(-50%);
    display: flex;
    align-items: center;
    justify-content: center;
    width: 32px;
    height: 32px;
    border: none;
    border-radius: var(--radius-sm);
    background: transparent;
    color: var(--text-tertiary);
    cursor: pointer;
    transition: background 0.2s, color 0.2s;
}

.password-toggle-btn:hover {
    background: var(--bg-subtle);
    color: var(--text-secondary);
}

.password-toggle-btn .lucide-icon {
    width: 18px;
    height: 18px;
}

.password-error {
    display: flex;
    align-items: center;
    gap: 6px;
    font-size: var(--text-xs);
    color: var(--danger);
    margin-bottom: var(--space-3);
}

.password-error .lucide-icon {
    width: 14px;
    height: 14px;
    flex-shrink: 0;
}

/* Quick Options */
.quick-options {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: var(--space-2);
    margin-bottom: var(--space-3);
}

.quick-options-label {
    font-size: var(--text-xs);
    color: var(--text-tertiary);
    margin-right: var(--space-1);
}

.quick-option-btn {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    padding: 6px 12px;
    font-size: var(--text-xs);
    font-weight: var(--weight-medium);
    color: var(--blue);
    background: var(--blue-light);
    border: 1px solid var(--primary-glow);
    border-radius: var(--radius-lg);
    cursor: pointer;
    transition: transform 0.2s var(--ease-smooth), box-shadow 0.2s var(--ease-smooth), background-color 0.2s var(--ease-smooth), color 0.2s var(--ease-smooth), border-color 0.2s var(--ease-smooth), opacity 0.2s var(--ease-smooth);
}

.quick-option-btn:hover {
    background: var(--blue-glow);
    border-color: var(--blue);
    transform: translateY(-1px);
}

.quick-option-btn .lucide-icon {
    width: 14px;
    height: 14px;
}

/* Checkbox Group */
.checkbox-group {
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.checkbox-option {
    display: flex;
    align-items: center;
    gap: 10px;
    font-size: var(--text-ui);
    color: var(--text-secondary);
    cursor: pointer;
    transition: color 0.2s;
}

.checkbox-option:hover {
    color: var(--text-primary);
}

.checkbox-option input {
    position: absolute;
    opacity: 0;
    width: 0;
    height: 0;
}

.checkbox-custom {
    width: 18px;
    height: 18px;
    border-radius: var(--radius-sm);
    border: 2px solid var(--border-strong);
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    transition: border-color 0.2s, background 0.2s;
}

.checkbox-option:hover .checkbox-custom {
    border-color: var(--text-tertiary);
}

.checkbox-option:has(input:checked) .checkbox-custom {
    background: var(--blue);
    border-color: var(--blue);
}

.checkbox-custom::after {
    content: '';
    width: 5px;
    height: 8px;
    border: solid var(--text-on-primary);
    border-width: 0 2px 2px 0;
    transform: rotate(45deg) scale(0);
    margin-bottom: 2px;
    transition: transform 0.15s var(--ease-smooth);
}

.checkbox-option:has(input:checked) .checkbox-custom::after {
    transform: rotate(45deg) scale(1);
}

/* Modal Footer */
.modal-footer {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: var(--space-3);
    padding: 16px 20px 20px;
    border-top: 1px solid var(--border);
}

.modal-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    padding: 10px 18px;
    font-size: var(--text-ui);
    font-weight: var(--weight-semibold);
    border-radius: var(--radius-sm);
    cursor: pointer;
    transition: transform 0.2s var(--ease-smooth), box-shadow 0.2s var(--ease-smooth), background-color 0.2s var(--ease-smooth), color 0.2s var(--ease-smooth), border-color 0.2s var(--ease-smooth), opacity 0.2s var(--ease-smooth);
    border: none;
}

.modal-btn-secondary {
    color: var(--text-secondary);
    background: transparent;
}

.modal-btn-secondary:hover {
    background: var(--bg-subtle);
    color: var(--text-primary);
}

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

.modal-btn-primary:hover {
    background: var(--blue-hover);
    transform: translateY(-1px);
}

.modal-btn-primary:active {
    transform: translateY(0);
}

.modal-btn .lucide-icon {
    width: 16px;
    height: 16px;
}

/* Responsive Modals */
@media (max-width: 480px) {
    .modal-overlay {
        padding: var(--space-3);
    }

    .modal-content {
        max-height: 95vh;
    }

    .modal-header {
        padding: 16px 16px 12px;
    }

    .modal-body {
        padding: var(--space-4);
    }

    .modal-footer {
        padding: 14px 16px 16px;
        flex-direction: column-reverse;
    }

    .modal-btn {
        width: 100%;
    }

    .radio-option {
        padding: 12px 14px;
    }

    .radio-label strong {
        font-size: var(--text-ui);
    }
}


/* ============================================
   36. DARK MODE - ENCRYPTION MODALS
   ============================================ */

.dark .modal-content {
    background: var(--bg-card);
    box-shadow: var(--shadow-card), 0 0 0 1px var(--border);
}

.dark .modal-close-btn {
    color: var(--text-tertiary);
}

.dark .modal-close-btn:hover {
    background: var(--bg-hover);
    color: var(--text-primary);
}

.dark .radio-option {
    background: var(--bg-elevated);
    border-color: var(--border);
}

.dark .radio-option:hover {
    background: var(--primary-light);
    border-color: var(--primary-glow);
}

.dark .radio-option:has(input:checked) {
    background: var(--blue-light);
    border-color: var(--primary-glow);
    box-shadow: 0 0 0 1px var(--primary-glow);
}

.dark .radio-custom {
    border-color: var(--border-strong);
}

.dark .radio-option:hover .radio-custom {
    border-color: var(--text-tertiary);
}

.dark .radio-option:has(input:checked) .radio-custom {
    border-color: var(--blue);
}

.dark .password-input {
    background: var(--bg-elevated);
    border-color: var(--border-strong);
    color: var(--text-primary);
}

.dark .password-input:focus {
    border-color: var(--blue);
}

.dark .password-toggle-btn:hover {
    color: var(--text-secondary);
}

.dark .checkbox-option:hover {
    color: var(--text-primary);
}

.dark .checkbox-custom {
    border-color: var(--border-strong);
}

.dark .quick-option-btn {
    background: var(--primary-light);
    border-color: var(--primary-glow);
}

.dark .quick-option-btn:hover {
    background: var(--primary-glow);
}

/* ============================================
   OCR LABORATORY REPORT FEATURE STYLES
   ============================================ */

/* OCR Button in Patient Drawer */
.pd-btn-ocr {
}

/* OCR Modal Overlay */
.ocr-modal-overlay {
    z-index: var(--z-ocr-modal);
}

.ocr-modal-content {
    max-width: 480px;
    width: 90%;
}

/* OCR Dropzone */
.ocr-dropzone {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: var(--space-3);
    padding: var(--space-6);
    background: var(--bg-elevated);
    border: 2px dashed var(--border);
    border-radius: var(--radius-lg);
    cursor: pointer;
    transition: transform 0.2s var(--ease-smooth), box-shadow 0.2s var(--ease-smooth), background-color 0.2s var(--ease-smooth), color 0.2s var(--ease-smooth), border-color 0.2s var(--ease-smooth), opacity 0.2s var(--ease-smooth);
}

.ocr-dropzone:hover,
.ocr-dropzone.drag-over {
    border-color: var(--blue);
    background: var(--primary-light);
}

.ocr-dropzone:focus-visible {
    outline: 2px solid var(--blue);
    outline-offset: 2px;
}

.ocr-dropzone-icon {
    width: 48px;
    height: 48px;
    color: var(--text-tertiary);
}

.ocr-dropzone-primary {
    font-size: var(--text-base);
    font-weight: var(--weight-semibold);
    color: var(--text-primary);
}

.ocr-dropzone-secondary {
    font-size: var(--text-sm);
    color: var(--text-secondary);
}

.ocr-dropzone-hint {
    font-size: var(--text-xs);
    color: var(--text-tertiary);
}

/* Camera Button */
.ocr-camera-btn {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: var(--space-2);
    width: 100%;
    padding: 14px 20px;
    margin-top: var(--space-4);
    background: var(--bg-elevated);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    color: var(--text-primary);
    font-size: var(--text-md);
    font-weight: var(--weight-medium);
    min-height: 48px;
    cursor: pointer;
    transition: transform 0.2s var(--ease-smooth), box-shadow 0.2s var(--ease-smooth), background-color 0.2s var(--ease-smooth), color 0.2s var(--ease-smooth), border-color 0.2s var(--ease-smooth), opacity 0.2s var(--ease-smooth);
}

.ocr-camera-btn:hover {
    background: var(--bg-elevated);
    border-color: var(--border-strong);
}

/* Camera Button - Desktop: Hide (not useful on desktop), Mobile: Show */
@media (min-width: 769px) {
    .ocr-camera-btn {
        display: none;
    }
}

/* Privacy Notice */
.ocr-privacy-notice {
    display: flex;
    align-items: center;
    gap: var(--space-2);
    margin-top: var(--space-4);
    padding: var(--space-3);
    background: var(--bg-elevated);
    border-radius: var(--radius);
    font-size: var(--text-xs);
    color: var(--text-tertiary);
}

.dark .ocr-privacy-notice {
    background: var(--bg-subtle);
    color: var(--text-secondary);
}

.ocr-privacy-notice .lucide-icon {
    width: 14px;
    height: 14px;
    flex-shrink: 0;
}

/* OCR Processing */
.ocr-processing {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: var(--space-6);
    padding: var(--space-6);
}

/* Progress Ring */
.ocr-progress-ring {
    position: relative;
    width: 120px;
    height: 120px;
}

.ocr-progress-svg {
    width: 100%;
    height: 100%;
    transform: rotate(-90deg);
}

.ocr-progress-track {
    fill: none;
    stroke: var(--border);
    stroke-width: 8;
}

.ocr-progress-fill {
    fill: none;
    stroke: var(--blue);
    stroke-width: 8;
    stroke-linecap: round;
    stroke-dasharray: 283;
    stroke-dashoffset: 283;
    transition: stroke-dashoffset 0.3s var(--ease-smooth);
}

.ocr-progress-percentage {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    font-size: var(--text-xl);
    font-weight: var(--weight-bold);
    color: var(--text-primary);
}

/* Status Steps */
.ocr-status-steps {
    display: flex;
    flex-direction: column;
    gap: var(--space-3);
    width: 100%;
}

.ocr-status-step {
    display: flex;
    align-items: center;
    gap: var(--space-3);
    padding: var(--space-3);
    border-radius: var(--radius);
    transition: transform 0.2s var(--ease-smooth), box-shadow 0.2s var(--ease-smooth), background-color 0.2s var(--ease-smooth), color 0.2s var(--ease-smooth), border-color 0.2s var(--ease-smooth), opacity 0.2s var(--ease-smooth);
}

.ocr-status-step.active {
    background: var(--blue-light);
}

.ocr-status-step.complete {
    color: var(--safe);
}

.ocr-status-step .ocr-step-icon {
    width: 20px;
    height: 20px;
    flex-shrink: 0;
}

.ocr-status-step:not(.active) .ocr-step-loading {
    display: none;
}

.ocr-status-step.active .ocr-step-icon:not(.ocr-step-loading) {
    display: none;
}

.ocr-step-loading {
    animation: spin 1s linear infinite;
}

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

.ocr-step-label {
    font-size: var(--text-sm);
    color: var(--text-secondary);
}

.ocr-status-step.active .ocr-step-label {
    color: var(--blue);
    font-weight: var(--weight-medium);
}

/* Cancel Button */
.ocr-cancel-btn {
    margin-top: var(--space-4);
    padding: var(--space-3) var(--space-5);
    background: transparent;
    border: none;
    color: var(--text-tertiary);
    font-size: var(--text-sm);
    cursor: pointer;
    transition: color 0.2s var(--ease-smooth);
}

.ocr-cancel-btn:hover {
    color: var(--text-secondary);
}

/* OCR Review */
.ocr-review-title {
    font-size: var(--text-lg);
    font-weight: var(--weight-semibold);
    color: var(--text-primary);
    margin-bottom: var(--space-2);
}

.ocr-review-subtitle {
    font-size: var(--text-sm);
    color: var(--text-secondary);
    margin-bottom: var(--space-4);
}

/* Results Grid */
.ocr-results-grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: var(--space-3);
    max-height: 300px;
    overflow-y: auto;
    padding-right: var(--space-2);
}

.ocr-result-item {
    padding: var(--space-3);
    background: var(--bg-elevated);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    transition: transform 0.2s var(--ease-smooth), box-shadow 0.2s var(--ease-smooth), background-color 0.2s var(--ease-smooth), color 0.2s var(--ease-smooth), border-color 0.2s var(--ease-smooth), opacity 0.2s var(--ease-smooth);
}

.ocr-result-item.high {
    border-left: 3px solid var(--safe);
}

.ocr-result-item.medium {
    border-left: 3px solid var(--alert);
}

.ocr-result-item.low,
.ocr-result-item.warning {
    border-left: 3px solid var(--warning);
}

.ocr-result-item.none,
.ocr-result-item.not-found {
    border-left: 3px solid var(--danger);
    opacity: 0.8;
}

.ocr-result-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: var(--space-2);
}

.ocr-result-field-name {
    font-size: var(--text-sm);
    font-weight: var(--weight-medium);
    color: var(--text-primary);
}

.ocr-result-confidence {
    display: flex;
    align-items: center;
    gap: var(--space-1);
    font-size: var(--text-xs);
}

.ocr-result-confidence.high {
    color: var(--safe);
}

.ocr-result-confidence.medium {
    color: var(--alert);
}

.ocr-result-confidence.low {
    color: var(--warning);
}

.ocr-result-confidence.none {
    color: var(--danger);
}

.ocr-result-confidence .lucide-icon {
    width: 14px;
    height: 14px;
}

/* Value Row */
.ocr-result-value-row {
    display: flex;
    align-items: center;
    gap: var(--space-3);
}

.ocr-result-value-box {
    display: flex;
    align-items: center;
    gap: var(--space-2);
    flex: 1;
}

.ocr-result-input {
    width: 80px;
    padding: var(--space-2);
    background: var(--bg-card);
    border: 1px solid var(--border);
    border-radius: var(--radius-sm);
    font-size: var(--text-base);
    text-align: right;
    transition: border-color 0.2s var(--ease-smooth);
}

.ocr-result-input:focus {
    outline: none;
    border-color: var(--blue);
}

.ocr-result-input.high {
    border-color: var(--safe);
}

.ocr-result-input.medium {
    border-color: var(--alert);
}

.ocr-result-input.low,
.ocr-result-input.warning {
    border-color: var(--warning);
}

/* Select dropdown styling for OCR results */
.ocr-result-value-box select.ocr-result-input {
    appearance: none;
    -webkit-appearance: none;
    -moz-appearance: none;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='%236b7280' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'%3E%3C/polyline%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right 8px center;
    background-size: 12px;
    padding-right: 28px;
    text-align: left;
    cursor: pointer;
}

.ocr-result-value-box select.ocr-result-input option {
    background: var(--bg-card);
    color: var(--text-primary);
}

.dark .ocr-result-value-box select.ocr-result-input {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='%239ca3af' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'%3E%3C/polyline%3E%3C/svg%3E");
}

.ocr-result-unit {
    font-size: var(--text-xs);
    color: var(--text-tertiary);
}

.ocr-result-include {
    display: flex;
    align-items: center;
    gap: var(--space-2);
    font-size: var(--text-xs);
    color: var(--text-secondary);
    cursor: pointer;
    white-space: nowrap;
}

.ocr-result-include input[type="checkbox"] {
    width: 16px;
    height: 16px;
    accent-color: var(--blue);
}

/* Summary */
.ocr-summary {
    display: flex;
    justify-content: center;
    margin-top: var(--space-4);
    padding-top: var(--space-4);
    border-top: 1px solid var(--border);
}

.ocr-summary-stats {
    display: flex;
    gap: var(--space-4);
}

.ocr-stat {
    display: flex;
    align-items: center;
    gap: var(--space-1);
    font-size: var(--text-sm);
    color: var(--text-secondary);
}

.ocr-stat .lucide-icon {
    width: 16px;
    height: 16px;
}

.ocr-stat strong {
    color: var(--text-primary);
}

/* Error State */
.ocr-error {
    text-align: center;
    padding: var(--space-4);
}

.ocr-error-icon {
    width: 64px;
    height: 64px;
    margin: 0 auto var(--space-4);
    color: var(--danger);
}

.ocr-error-icon .lucide-icon {
    width: 100%;
    height: 100%;
}

.ocr-error-title {
    font-size: var(--text-lg);
    font-weight: var(--weight-semibold);
    color: var(--text-primary);
    margin-bottom: var(--space-2);
}

.ocr-error-message {
    font-size: var(--text-sm);
    color: var(--text-secondary);
    margin-bottom: var(--space-4);
}

.ocr-error-suggestions {
    text-align: left;
    background: var(--bg-elevated);
    padding: var(--space-4);
    border-radius: var(--radius);
    margin-bottom: var(--space-4);
}

.ocr-error-suggestions h4 {
    font-size: var(--text-sm);
    font-weight: var(--weight-semibold);
    color: var(--text-primary);
    margin-bottom: var(--space-3);
}

.ocr-error-suggestions ul {
    list-style: none;
}

.ocr-error-suggestions li {
    display: flex;
    align-items: center;
    gap: var(--space-2);
    font-size: var(--text-sm);
    color: var(--text-secondary);
    padding: var(--space-1) 0;
}

.ocr-error-suggestions .lucide-icon {
    width: 16px;
    height: 16px;
    color: var(--text-tertiary);
}

/* OCR Populated Animation */
@keyframes ocr-populated {
    0% { background-color: var(--primary-glow); }
    100% { background-color: transparent; }
}

.ocr-populated {
    animation: ocr-populated 2s ease-out;
}

/* ============================================
   Profile Warning Modal
   ============================================ */

.profile-warn-icon {
    width: 64px;
    height: 64px;
    background: linear-gradient(135deg, var(--orange), var(--orange-end));
    border-radius: var(--radius-full);
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 0 auto 20px;
    box-shadow: 0 2px 8px var(--orange);
    animation: profile-warn-icon-pulse 3s ease-in-out infinite;
    will-change: transform;
}

@media (prefers-reduced-motion: reduce) {
    .profile-warn-icon {
        animation: none;
    }
}

.profile-warn-icon .lucide-icon {
    width: 32px;
    height: 32px;
    color: var(--text-on-primary);
}

@keyframes profile-warn-icon-pulse {
    0%, 100% {
        transform: scale(1);
        opacity: 1;
    }
    50% {
        transform: scale(1.02);
        opacity: 0.9;
    }
}

/* Reduced motion support */
@media (prefers-reduced-motion: reduce) {
    .profile-warn-icon {
        animation: none;
    }
}

/* Mobile Optimizations */
@media (max-width: 768px) {
    /* Camera Button on Mobile: Match Dropzone Design */
    .ocr-camera-btn {
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        gap: var(--space-3);
        width: 100%;
        padding: var(--space-6);
        margin-top: var(--space-4);
        background: var(--bg-elevated);
        border: 2px dashed var(--border);
        border-radius: var(--radius-lg);
        color: var(--text-primary);
        font-size: var(--text-sm);
        font-weight: var(--weight-semibold);
        min-height: 120px;
        cursor: pointer;
        transition: transform 0.2s var(--ease-smooth), box-shadow 0.2s var(--ease-smooth), background-color 0.2s var(--ease-smooth), color 0.2s var(--ease-smooth), border-color 0.2s var(--ease-smooth), opacity 0.2s var(--ease-smooth);
    }

    .ocr-camera-btn:hover,
    .ocr-camera-btn:active {
        background: var(--primary-light);
        border-color: var(--primary);
    }

    .ocr-camera-btn .lucide-icon {
        width: 48px;
        height: 48px;
        color: var(--text-tertiary);
        stroke-width: 1.5;
    }
}

@media (max-width: 640px) {
    .ocr-modal-overlay {
        align-items: flex-end;
    }

    .ocr-modal-content {
        width: 100%;
        max-height: 90vh;
        border-radius: var(--radius-xl) var(--radius-xl) 0 0;
        animation: slide-up 0.3s var(--ease-smooth);
    }

    @keyframes slide-up {
        from { transform: translateY(100%); }
        to { transform: translateY(0); }
    }

    .ocr-results-grid {
        max-height: 40vh;
    }

    .ocr-result-value-row {
        flex-wrap: wrap;
    }

    .ocr-result-input {
        font-size: 16px; /* Prevent zoom on iOS */
    }
}

/* Dark Mode */
.dark .pd-btn-ocr {
    background: var(--bg-elevated);
    border-color: var(--border-strong);
}

.dark .pd-btn-ocr:hover {
    background: var(--primary-light);
    border-color: var(--primary-glow);
}

.dark .ocr-dropzone {
    background: var(--bg-elevated);
}

.dark .ocr-result-item {
    background: var(--bg-elevated);
}

.dark .ocr-result-input {
    background: var(--bg-card);
}

.dark .ocr-error-suggestions {
    background: var(--bg-elevated);
}

/* Profile Warning Modal - ensure it's hidden when closed */
#profileWarningModal:not(.open) {
    display: none !important;
    visibility: hidden !important;
    opacity: 0 !important;
    pointer-events: none !important;
}

/* ── Model Switcher ───────────────────────────────────────── */
.model-switcher-wrapper {
    position: relative;
}
.model-switcher-chevron {
    transition: transform 0.2s;
}
.btn-settings-model[aria-expanded="true"] .model-switcher-chevron {
    transform: rotate(180deg);
}
.model-switcher-dropdown {
    position: absolute;
    top: calc(100% + 4px);
    right: 0;
    min-width: 300px;
    max-height: 50vh;
    background: var(--bg-card);
    border: 1px solid var(--border);
    border-radius: var(--radius-12);
    box-shadow: var(--shadow-dropdown);
    z-index: var(--z-fixed);
    overflow-inline: clip;
    overflow-block: auto;
}
.model-switcher-dropdown[hidden] {
    display: none;
}
.model-option {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 12px 16px;
    cursor: pointer;
    transition: background 0.15s;
    border-bottom: 1px solid var(--border);
}
.model-option:last-child {
    border-bottom: none;
}
.model-option:hover {
    background: var(--primary-light);
}
.model-option.active {
    background: var(--primary-light);
}
.model-option-left {
    display: flex;
    flex-direction: column;
    gap: 2px;
}
.model-option-name {
    font-weight: var(--weight-semibold);
    font-size: var(--text-sm);
    color: var(--text-primary);
    display: flex;
    align-items: center;
    gap: 6px;
}
.model-option-name .lucide-icon {
    width: 14px;
    height: 14px;
    color: var(--primary);
    display: none;
}
.model-option.active .model-option-name .lucide-icon {
    display: inline-block;
}
.model-option-desc {
    font-size: var(--text-xs);
    color: var(--text-secondary);
}
.model-accuracy-badge {
    font-size: var(--text-xs);
    font-weight: var(--weight-semibold);
    padding: 2px 8px;
    border-radius: var(--radius);
    white-space: nowrap;
}
.model-accuracy-badge[data-accuracy="basis"] {
    background: var(--bg-active);
    color: var(--text-tertiary);
}
.model-accuracy-badge[data-accuracy="gut"] {
    background: var(--alert-light);
    color: var(--alert);
}
.model-accuracy-badge[data-accuracy="beste"] {
    background: var(--safe-light);
    color: var(--safe);
}
/* Model info in hero */
.model-info {
    font-size: var(--text-xs);
    color: var(--text-secondary);
    margin-top: var(--space-1);
    text-align: center;
}
/* Hidden fields when model doesn't need them */
.field-hidden {
    display: none !important;
}


/* Dark mode for patient menu button */
.dark .btn-patient-menu:hover {
    background: var(--bg-hover);
    color: var(--text-primary);
}
.dark .btn-patient-menu:active,
.dark .btn-patient-menu.open {
    background: var(--bg-pressed);
    color: var(--text-primary);
}

/* Dark mode for tutorial button */
.dark .btn-tutorial:hover {
    background: var(--bg-hover);
    color: var(--text-primary);
}
.dark .btn-tutorial:active {
    background: var(--bg-pressed);
    color: var(--text-primary);
}

.dark .model-switcher-dropdown {
    background: var(--bg-card);
    border-color: var(--border);
    box-shadow: var(--shadow-dropdown);
}
.dark .model-option:hover {
    background: var(--primary-light);
}
.dark .model-option.active {
    background: var(--primary-light);
}

/* Simulate Treatment Button Dark Mode */
.dark .btn-simulate-treatment {
    background: var(--primary);
    color: var(--text-on-primary);
}

.dark .btn-simulate-treatment:hover:not(:disabled) {
    background: var(--primary-hover);
}

.dark .btn-simulate-treatment.simulated {
    background: var(--bg-elevated);
    color: var(--text-tertiary);
    border-color: var(--border-strong);
}

/* Mobile: hide label text */
@media (max-width: 768px) {
    .model-switcher-label {
        display: none;
    }
}

/* ============================================
   DARK MODE OVERRIDES - Refined & Quiet
   ============================================ */

/* Use both class and data attribute for graceful fallback */
.dark {
    color-scheme: dark;
}

/* Body background in dark mode - softer, without !important */
.dark body {
    background: var(--bg-page);
    color: var(--text-primary);
}

/* ─── Tutorial ─────────────────────────────────────────────────────────── */

/* Tutorial button in nav */
.btn-tutorial {
    display: flex;
    align-items: center;
    gap: 6px;
    height: 32px;
    padding: 0 10px;
    border: none;
    border-radius: var(--radius-md);
    background: var(--bg-subtle);
    color: var(--text-secondary);
    font-family: inherit;
    font-size: var(--text-ui);
    font-weight: var(--weight-medium);
    cursor: pointer;
    transition: background 0.2s, color 0.2s, transform 0.2s;
    white-space: nowrap;
}

.btn-tutorial:hover {
    background: var(--bg-pressed);
    color: var(--text-primary);
    transform: translateY(-1px);
}

.btn-tutorial:active {
    background: var(--bg-active);
    color: var(--text-primary);
}

.btn-tutorial .lucide-icon {
    width: 16px;
    height: 16px;
    flex-shrink: 0;
}

.btn-tutorial-label {
    font-size: var(--text-xs);
}

/* Mobile: Tutorial button icon-only */
@media (max-width: 768px) {
    .btn-tutorial-label {
        display: none;
    }
}

/* Dim inactive sections during tutorial - Optimized for performance.
   NOTE: .main-grid must NOT be listed here — it is the parent of .col-panel elements.
   Using opacity-only dimming instead of blur filter to avoid GPU overhead on large elements.
   Using contain: layout paint to optimize compositing. */
body.tutorial-active .col-panel,
body.tutorial-active nav.top-nav,
body.tutorial-active #settingsPanel,
body.tutorial-active #patientDrawer,
body.tutorial-active #patientOverlay,
body.tutorial-active .modal-overlay:not(#tutorialOverlay):not(#tutorialNav):not(.tutorial-card) {
    opacity: 0.4;
    transition: opacity 0.2s var(--ease-smooth);
    pointer-events: none !important;
    contain: layout paint;
}

/* Override sticky positioning during tutorial so nav scrolls with body
   and doesn't overlap highlighted sections (e.g. "Patient Data" header) */
body.tutorial-active nav.top-nav {
    position: relative;
}

/* Active (highlighted) section: full visibility, but NO interactions during tutorial */
body.tutorial-active .tutorial-highlight {
    opacity: 1 !important;
    position: relative;
    z-index: var(--z-tutorial-bg);
    transition: opacity 0.2s var(--ease-smooth);
    pointer-events: none;
    contain: layout;
}

/* Respect reduced motion preference for accessibility */
@media (prefers-reduced-motion: reduce) {
    body.tutorial-active .col-panel,
    body.tutorial-active nav.top-nav,
    body.tutorial-active #settingsPanel,
    body.tutorial-active #patientDrawer,
    body.tutorial-active #patientOverlay,
    body.tutorial-active .modal-overlay:not(#tutorialOverlay):not(#tutorialNav):not(.tutorial-card) {
        opacity: 0.6;
    }
}

/* Ensure panel headers and ALL headings remain clearly visible during tutorial */
body.tutorial-active .tutorial-highlight .panel-header-bar,
body.tutorial-active .tutorial-highlight .panel-header-bar h2,
body.tutorial-active .tutorial-highlight .panel-subtitle,
body.tutorial-active .tutorial-highlight h2,
body.tutorial-active .tutorial-highlight h3 {
    filter: none !important;
    opacity: 1 !important;
    color: var(--text-primary) !important;
    text-shadow: none !important;
}

body.tutorial-active .tutorial-highlight .panel-header-bar h2,
body.tutorial-active .tutorial-highlight h2 {
    color: var(--text-primary) !important;
    text-shadow: none !important;
}

/* Extra specificity for panel headings during tutorial - ensure no blur inheritance issues */
body.tutorial-active .tutorial-highlight .col-step-label,
body.tutorial-active .tutorial-highlight .col-step-label span,
body.tutorial-active .tutorial-highlight .panel-header-bar *,
body.tutorial-active .tutorial-highlight .panel-subtitle {
    filter: none !important;
    opacity: 1 !important;
}

/* Tutorial button remains clickable during tutorial (toggle to close) */
body.tutorial-active .btn-tutorial {
    pointer-events: auto !important;
    filter: none !important;
    opacity: 1 !important;
    position: relative;
    z-index: var(--z-tut-hl);
}

/* Prevent page scrolling during tutorial */
body.tutorial-active {
    overflow: hidden;
    position: fixed;
    width: 100%;
    height: 100%;
    touch-action: none;
}

/* Tutorial explanation card */
.tutorial-card {
    position: fixed;
    z-index: var(--z-tut-card);
    width: min(220px, calc(100vw - 32px));
    padding: 12px 14px;
    background: var(--bg-card);
    border: 1px solid var(--border-strong);
    border-radius: var(--radius);
    box-shadow: var(--shadow-tutorial);
    pointer-events: none;
    transition: opacity 0.2s var(--ease-smooth);
}

@media (max-width: 480px) {
    .tutorial-card {
        padding: 10px 12px;
    }
}

.tutorial-card-title {
    font-size: var(--text-sm);
    font-weight: var(--weight-semibold);
    color: var(--text-primary);
    margin-bottom: 6px;
}

.tutorial-card-text {
    font-size: var(--text-xs);
    line-height: var(--leading-normal);
    color: var(--text-secondary);
    margin: 0;
}

/* Tutorial navigation bar */
.tutorial-nav-bar {
    position: fixed;
    bottom: 28px;
    left: 50%;
    transform: translateX(-50%);
    z-index: var(--z-tut-nav);
    display: flex;
    align-items: center;
    gap: var(--space-2);
    padding: 8px 12px;
    background: var(--bg-card);
    border: 1px solid var(--border-strong);
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow-tutorial);
    white-space: nowrap;
    overflow: visible;
}

.tutorial-step-label {
    font-size: var(--text-xs);
    font-weight: var(--weight-medium);
    color: var(--text-secondary);
    padding: 0 8px;
}

.tutorial-nav-btn {
    display: flex;
    align-items: center;
    gap: var(--space-1);
    padding: 6px 12px;
    border: 1px solid var(--border-strong);
    border-radius: var(--radius-sm);
    background: var(--bg-elevated);
    color: var(--text-primary);
    font-family: inherit;
    font-size: var(--text-sm);
    font-weight: var(--weight-medium);
    cursor: pointer;
    transition: background 0.15s var(--ease-smooth);
}

.tutorial-nav-btn:hover {
    background: var(--bg-page);
}

.tutorial-nav-btn:disabled {
    opacity: 0.35;
    cursor: not-allowed;
}

.tutorial-nav-primary {
    background: var(--primary);
    color: var(--text-on-primary);
    border-color: var(--primary);
}

.tutorial-nav-primary:hover {
    background: var(--primary-hover);
    border-color: var(--primary-hover);
}

.tutorial-nav-close {
    border-color: transparent;
    color: var(--text-secondary);
}

.tutorial-nav-close:hover {
    background: var(--danger-tint);
    color: var(--danger);
}

.tutorial-nav-btn .lucide-icon {
    width: 14px;
    height: 14px;
    flex-shrink: 0;
}

/* Dark mode */
.dark .tutorial-card {
    background: var(--bg-elevated);
    border-color: var(--bg-active);
    box-shadow: var(--shadow-tutorial);
}

.dark .tutorial-nav-bar {
    background: var(--bg-elevated);
    border-color: var(--bg-active);
    box-shadow: var(--shadow-tutorial);
}

.dark .tutorial-nav-btn {
    background: var(--bg-subtle);
    border-color: var(--border);
    color: var(--text-primary);
}

.dark .tutorial-nav-btn:hover {
    background: var(--bg-hover);
}

/* ============================================================================
   LANDING PAGE
   ============================================================================ */

/* Landing Page Overlay - Optimized blur for better performance */
.landing-overlay {
    position: fixed;
    inset: 0;
    background: var(--overlay-landing);
    backdrop-filter: blur(6px);
    -webkit-backdrop-filter: blur(6px);
    z-index: var(--z-landing);
    display: flex;
    align-items: center;
    justify-content: center;
    padding: var(--space-5);
}

/* Respect reduced motion preference */
@media (prefers-reduced-motion: reduce) {
    .landing-overlay {
        backdrop-filter: none;
        -webkit-backdrop-filter: none;
    }
}

.landing-overlay[hidden] {
    display: none;
}

.landing-container {
    width: 100%;
    max-width: 720px;
    max-height: 90vh;
    background: var(--bg-card);
    border-radius: var(--radius-xl);
    box-shadow: var(--shadow-card);
    display: flex;
    flex-direction: column;
    overflow: clip;
    animation: landingSlideUp 0.4s ease-out;
}

@keyframes landingSlideUp {
    from {
        opacity: 0;
        transform: translateY(20px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

/* Landing Header */
.landing-header {
    padding: var(--space-6) var(--space-7) var(--space-4);
    border-bottom: 1px solid var(--border);
    flex-shrink: 0;
}

.landing-header-top {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: var(--space-4);
}

.step-counter {
    font-size: var(--text-xs);
    font-weight: var(--weight-semibold);
    color: var(--text-tertiary);
    letter-spacing: 0.5px;
}

.progress-dots {
    display: flex;
    justify-content: center;
    gap: var(--space-2);
}

.progress-dot {
    width: 8px;
    height: 8px;
    border-radius: var(--radius-full);
    background: var(--border-strong);
    overflow: clip;
    transition: transform 0.25s var(--ease-smooth), box-shadow 0.25s var(--ease-smooth), background-color 0.25s var(--ease-smooth), opacity 0.25s var(--ease-smooth);
}

.progress-dot.active {
    background: var(--primary);
    width: 24px;
    border-radius: var(--radius-xs);
}

.progress-dot.completed {
    background: var(--safe);
}

.restart-btn {
    display: flex;
    align-items: center;
    gap: var(--space-1);
    padding: var(--space-2);
    background: none;
    border: none;
    color: var(--text-tertiary);
    font-family: inherit;
    font-size: var(--text-xs);
    font-weight: var(--weight-medium);
    cursor: pointer;
    border-radius: var(--radius-sm);
    transition: transform 0.15s var(--ease-smooth), box-shadow 0.15s var(--ease-smooth), background-color 0.15s var(--ease-smooth), opacity 0.15s var(--ease-smooth);
}

.restart-btn:hover {
    background: var(--primary-light);
    color: var(--text-secondary);
}

.restart-btn .lucide-icon {
    width: 14px;
    height: 14px;
}

/* Landing Content */
.landing-content {
    flex: 1;
    overflow-y: auto;
    padding: var(--space-6) var(--space-7);
    position: relative;
}

.landing-content::-webkit-scrollbar {
    width: 6px;
}

.landing-content::-webkit-scrollbar-track {
    background: transparent;
}

.landing-content::-webkit-scrollbar-thumb {
    background: var(--border-strong);
    border-radius: var(--radius-xs);
}

.landing-content::-webkit-scrollbar-thumb:hover {
    background: var(--text-tertiary);
}

/* Landing Step */
.landing-step {
    display: none;
    animation: landingFadeIn 0.3s var(--ease-smooth);
}

.landing-step.active {
    display: block;
}

@keyframes landingFadeIn {
    from {
        opacity: 0;
        transform: translateX(10px);
    }
    to {
        opacity: 1;
        transform: translateX(0);
    }
}

/* Landing Step Title */
.landing-step-title {
    font-size: var(--text-xl);
    font-weight: var(--weight-bold);
    color: var(--text-primary);
    margin-bottom: var(--space-2);
    line-height: var(--leading-snug);
    scroll-margin-top: var(--space-3);
}

.landing-step-subtitle {
    font-size: var(--text-base);
    color: var(--text-secondary);
    margin-bottom: var(--space-4);
    line-height: var(--leading-normal);
}

/* Welcome Step */
.landing-welcome {
    text-align: center;
    padding: var(--space-8) 0;
}

.landing-welcome-icon {
    width: 80px;
    height: 80px;
    margin: 0 auto var(--space-6);
    background: linear-gradient(135deg, var(--safe), var(--safe-end));
    border-radius: var(--radius-lg);
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow: var(--shadow-safe);
}

.landing-welcome-icon .lucide-icon {
    width: 40px;
    height: 40px;
    color: var(--text-on-primary);
}

.landing-welcome-title {
    font-size: var(--text-hero);
    font-weight: var(--weight-bold);
    color: var(--text-primary);
    margin-bottom: var(--space-3);
    line-height: var(--leading-tight);
}

.landing-welcome-subtitle {
    font-size: var(--text-base);
    color: var(--text-secondary);
    max-width: 400px;
    margin: 0 auto var(--space-8);
    line-height: var(--leading-normal);
}

.landing-welcome .btn-large {
    padding: var(--space-4) var(--space-7);
    font-size: var(--text-lg);
    min-width: 200px;
}

/* Landing Summary (for data import summary step) */
.landing-summary {
    background: var(--bg-page);
    border-radius: var(--radius);
    padding: var(--space-4);
    margin: var(--space-4) 0;
}

.landing-summary-item {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: var(--space-3) 0;
    border-bottom: 1px solid var(--border);
}

.landing-summary-item:last-child {
    border-bottom: none;
}

.summary-label {
    font-size: var(--text-sm);
    color: var(--text-secondary);
}

.summary-value {
    font-size: var(--text-sm);
    font-weight: var(--weight-semibold);
    color: var(--text-primary);
}

/* Alias classes for JS compatibility */
.landing-title {
    font-size: var(--text-hero);
    font-weight: var(--weight-bold);
    color: var(--text-primary);
    margin-bottom: var(--space-3);
    line-height: var(--leading-tight);
}

.landing-subtitle {
    font-size: var(--text-base);
    color: var(--text-secondary);
    max-width: 400px;
    margin: 0 auto var(--space-8);
    line-height: var(--leading-normal);
}

/* Get Started button — extends .btn-primary with larger size (CTA) */
.landing-get-started {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: var(--space-2);
    padding: var(--space-4) var(--space-7);
    font-family: inherit;
    font-size: var(--text-lg);
    font-weight: var(--weight-semibold);
    border-radius: var(--radius);
    border: none;
    cursor: pointer;
    transition: transform 0.2s var(--ease-smooth), box-shadow 0.2s var(--ease-smooth), background-color 0.2s var(--ease-smooth), color 0.2s var(--ease-smooth), border-color 0.2s var(--ease-smooth), opacity 0.2s var(--ease-smooth);
    min-width: 200px;
    background: var(--primary);
    color: var(--text-on-primary);
    box-shadow: 0 2px 8px var(--primary-glow);
}

.landing-get-started:hover {
    background: var(--primary-hover);
    transform: translateY(-1px);
    box-shadow: 0 4px 12px var(--primary-glow);
}

/* Welcome step button container */
.landing-welcome-buttons {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: var(--space-3);
}

/* Skip Setup button on welcome step */
.landing-skip-setup-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: var(--space-2);
    padding: var(--space-2) var(--space-5);
    font-family: inherit;
    font-size: var(--text-sm);
    font-weight: var(--weight-medium);
    border-radius: var(--radius);
    border: 1px solid var(--border);
    background: transparent;
    color: var(--text-secondary);
    cursor: pointer;
    transition: transform 0.2s var(--ease-smooth), background-color 0.2s var(--ease-smooth), color 0.2s var(--ease-smooth), border-color 0.2s var(--ease-smooth);
}

.landing-skip-setup-btn:hover {
    border-color: var(--border-strong);
    color: var(--text-primary);
    background: var(--bg-elevated);
    transform: translateY(-1px);
}

.landing-skip-setup-btn:focus-visible {
    outline: 2px solid var(--primary);
    outline-offset: 2px;
}

/* Skip import button / Enter values manually — extends .btn-secondary */
.landing-skip-btn {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: var(--space-2);
    margin: var(--space-4) auto var(--space-6);
    background: var(--bg-elevated);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    padding: var(--space-3) var(--space-5);
    font-family: inherit;
    font-size: var(--text-base);
    font-weight: var(--weight-semibold);
    color: var(--text-primary);
    cursor: pointer;
    transition: transform 0.2s var(--ease-smooth), box-shadow 0.2s var(--ease-smooth), background-color 0.2s var(--ease-smooth), color 0.2s var(--ease-smooth), border-color 0.2s var(--ease-smooth), opacity 0.2s var(--ease-smooth);
    width: 100%;
    max-width: 280px;
}

.landing-skip-btn:hover,
.landing-skip-btn.active {
    background: var(--bg-page);
    border-color: var(--border-strong);
    transform: translateY(-1px);
}

/* Restart link on ready step — more prominent */
.landing-restart-link {
    display: inline-block;
    margin-top: var(--space-3);
    background: none;
    border: 1.5px solid var(--border-strong);
    border-radius: var(--radius);
    padding: var(--space-2) var(--space-5);
    font-family: inherit;
    font-size: var(--text-sm);
    font-weight: var(--weight-medium);
    color: var(--text-secondary);
    cursor: pointer;
    transition: transform 0.15s var(--ease-smooth), box-shadow 0.15s var(--ease-smooth), background-color 0.15s var(--ease-smooth), opacity 0.15s var(--ease-smooth);
}

.landing-restart-link:hover {
    border-color: var(--text-secondary);
    color: var(--text-primary);
}

/* File selected confirmation in import step */
.landing-import-confirmation {
    display: flex;
    align-items: center;
    gap: var(--space-2);
    margin-top: var(--space-3);
    padding: var(--space-2) var(--space-4);
    background: var(--safe-light);
    border: 1px solid var(--safe-border);
    border-radius: var(--radius);
    color: var(--safe);
    font-size: var(--text-sm);
    font-weight: var(--weight-medium);
}

.landing-import-confirmation i {
    flex-shrink: 0;
    width: 16px;
    height: 16px;
}

/* Landing Cards Grid */
.landing-cards {
    display: grid;
    gap: var(--space-3);
}

.landing-cards.four-col {
    grid-template-columns: repeat(4, 1fr);
}

.landing-cards.two-col {
    grid-template-columns: repeat(2, 1fr);
}

.landing-cards.single-col {
    grid-template-columns: 1fr;
}

@media (max-width: 640px) {
    .landing-cards.four-col {
        grid-template-columns: repeat(2, 1fr);
    }
}

@media (max-width: 480px) {
    .landing-cards.four-col,
    .landing-cards.two-col {
        grid-template-columns: 1fr;
    }
}

/* Landing Card */
.landing-card {
    background: var(--bg-card);
    border: 2px solid var(--border);
    border-radius: var(--radius);
    padding: var(--space-5);
    cursor: pointer;
    transition: transform 0.25s var(--ease-smooth), box-shadow 0.25s var(--ease-smooth), background-color 0.25s var(--ease-smooth), opacity 0.25s var(--ease-smooth);
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    gap: var(--space-3);
    position: relative;
}

.landing-card:hover {
    border-color: var(--border-strong);
    transform: translateY(-2px);
    box-shadow: var(--shadow);
}

.landing-card.selected {
    border-color: var(--primary);
    background: var(--primary-light);
    box-shadow: var(--shadow-glow);
}

.landing-card .card-icon {
    width: 48px;
    height: 48px;
    background: var(--bg-page);
    border-radius: var(--radius-sm);
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    transition: transform 0.25s var(--ease-smooth), box-shadow 0.25s var(--ease-smooth), background-color 0.25s var(--ease-smooth), opacity 0.25s var(--ease-smooth);
}

.landing-card .card-icon .lucide-icon {
    width: 24px;
    height: 24px;
    color: var(--text-secondary);
}

.landing-card.selected .card-icon .lucide-icon {
    color: var(--text-secondary);
}

.landing-card .card-title {
    font-size: var(--text-base);
    font-weight: var(--weight-semibold);
    color: var(--text-primary);
    margin-bottom: var(--space-1);
}

.landing-card .card-subtitle {
    font-size: var(--text-sm);
    color: var(--text-tertiary);
}

.landing-card .card-description {
    font-size: var(--text-sm);
    color: var(--text-secondary);
    line-height: var(--leading-default);
}

/* Check Indicator */
.landing-card .check-indicator {
    position: absolute;
    top: 12px;
    right: 12px;
    width: 24px;
    height: 24px;
    border-radius: var(--radius-full);
    border: 2px solid var(--border-strong);
    display: flex;
    align-items: center;
    justify-content: center;
    transition: transform 0.25s var(--ease-smooth), box-shadow 0.25s var(--ease-smooth), background-color 0.25s var(--ease-smooth), opacity 0.25s var(--ease-smooth);
}

.landing-card.selected .check-indicator {
    background: var(--safe);
    border-color: var(--safe);
}

.landing-card .check-indicator .lucide-icon {
    width: 14px;
    height: 14px;
    color: var(--text-on-primary);
    opacity: 0;
}

.landing-card.selected .check-indicator .lucide-icon {
    opacity: 1;
}

/* Landing Page Button Styles */
.btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: var(--space-2);
    padding: var(--space-3) var(--space-5);
    font-family: inherit;
    font-size: var(--text-base);
    font-weight: var(--weight-semibold);
    border-radius: var(--radius);
    border: none;
    cursor: pointer;
    transition: transform 0.2s var(--ease-smooth), box-shadow 0.2s var(--ease-smooth), background-color 0.2s var(--ease-smooth), color 0.2s var(--ease-smooth), border-color 0.2s var(--ease-smooth), opacity 0.2s var(--ease-smooth);
}

.btn-lg {
    padding: var(--space-4) var(--space-7);
    font-size: var(--text-lg);
    min-width: 200px;
}

.btn-primary {
    background: var(--primary);
    color: var(--text-on-primary);
    box-shadow: 0 2px 8px var(--primary-glow);
}

.btn-primary:hover {
    background: var(--primary-hover);
    transform: translateY(-1px);
    box-shadow: 0 4px 12px var(--primary-glow);
}

.btn-secondary {
    background: var(--bg-elevated);
    color: var(--text-primary);
    border: 1px solid var(--border);
}

.btn-secondary:hover {
    background: var(--bg-page);
    border-color: var(--border-strong);
}

/* Landing Card Icon */
.landing-card-icon {
    width: 48px;
    height: 48px;
    background: var(--bg-page);
    border-radius: var(--radius-sm);
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    transition: transform 0.25s var(--ease-smooth), box-shadow 0.25s var(--ease-smooth), background-color 0.25s var(--ease-smooth), opacity 0.25s var(--ease-smooth);
}

.landing-card-icon .lucide-icon {
    width: 24px;
    height: 24px;
    color: var(--text-secondary);
}

.landing-card.selected .landing-card-icon .lucide-icon {
    color: var(--text-secondary);
}

/* Language Card Specific */
.language-card {
    padding: var(--space-5);
}

.language-card .flag-icon {
    width: 64px;
    height: 44px;
    border-radius: var(--radius-sm);
    overflow: clip;
    margin-bottom: var(--space-3);
    background: var(--bg-page);
    display: flex;
    align-items: center;
    justify-content: center;
}

.language-card:hover {
    border-color: var(--border-strong);
    transform: translateY(-2px);
    box-shadow: var(--shadow);
}

.language-card.selected {
    border-color: var(--primary);
    background: var(--primary-light);
    box-shadow: var(--shadow-glow);
}

.language-card .card-title {
    font-size: var(--text-lg);
    margin-bottom: var(--space-1);
}

/* Model Card Specific */
.model-card {
    align-items: flex-start;
    text-align: left;
    padding: var(--space-5);
    margin-top: var(--space-4);
}

.model-card .model-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    width: 100%;
    margin-bottom: var(--space-3);
}

.model-card .model-name {
    font-size: var(--text-base);
    font-weight: var(--weight-semibold);
}

.model-card .accuracy-badge {
    font-size: var(--text-xs);
    font-weight: var(--weight-semibold);
    padding: var(--space-1) var(--space-2);
    border-radius: var(--radius-sm);
}

.model-card .accuracy-badge.basic {
    background: var(--danger-light, rgba(196, 61, 53, 0.1));
    color: var(--danger);
}

.model-card .accuracy-badge.good {
    background: var(--alert-light, rgba(212, 148, 44, 0.1));
    color: var(--alert);
}

.model-card .accuracy-badge.best {
    background: var(--safe-light, rgba(48, 161, 78, 0.1));
    color: var(--safe);
}

.model-card .model-description {
    font-size: var(--text-sm);
    color: var(--text-secondary);
    line-height: var(--leading-normal);
    margin-bottom: var(--space-3);
}

.model-card .model-values {
    padding-top: var(--space-3);
    border-top: 1px solid var(--border);
    font-size: var(--text-xs);
    color: var(--text-tertiary);
    width: 100%;
}

.model-card:hover {
    border-color: var(--border-strong);
    transform: translateY(-2px);
    box-shadow: var(--shadow);
}

.model-card.selected {
    border-color: var(--primary);
    background: var(--primary-light);
    box-shadow: var(--shadow-glow);
}

/* Import Card Specific */
.import-card {
    padding: var(--space-4);
}

.import-card .card-icon {
    margin-bottom: var(--space-2);
}

.import-card .card-title {
    font-size: var(--text-sm);
    margin-bottom: var(--space-1);
}

.import-card .card-description {
    font-size: var(--text-xs);
    color: var(--text-tertiary);
}

.import-card:hover {
    border-color: var(--border-strong);
    transform: translateY(-2px);
    box-shadow: var(--shadow);
}

.import-card.selected {
    border-color: var(--primary);
    background: var(--primary-light);
    box-shadow: var(--shadow-glow);
}

/* Skip Link */
.skip-link {
    text-align: center;
    margin-top: var(--space-5);
}

.skip-link .btn-text {
    background: none;
    border: none;
    font-family: inherit;
    font-size: var(--text-sm);
    color: var(--text-tertiary);
    cursor: pointer;
    text-decoration: underline;
    transition: color 0.15s var(--ease-smooth);
}

.skip-link .btn-text:hover {
    color: var(--text-secondary);
}

/* Tutorial Toggle */
.landing-tutorial-toggle {
    background: var(--bg-page);
    border: 2px solid transparent;
    border-radius: var(--radius);
    padding: var(--space-5);
    display: flex;
    align-items: center;
    justify-content: space-between;
    cursor: pointer;
    transition: transform 0.25s var(--ease-smooth), box-shadow 0.25s var(--ease-smooth), background-color 0.25s var(--ease-smooth), opacity 0.25s var(--ease-smooth);
}

.landing-tutorial-toggle:hover {
    background: var(--primary-light);
}

.landing-tutorial-toggle.active {
    background: var(--primary-light);
    border-color: var(--primary);
}

.landing-tutorial-toggle .toggle-content {
    display: flex;
    align-items: center;
    gap: var(--space-4);
}

.landing-tutorial-toggle .toggle-icon {
    width: 48px;
    height: 48px;
    background: var(--bg-card);
    border-radius: var(--radius-sm);
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow: var(--shadow-sm);
}

.landing-tutorial-toggle .toggle-icon .lucide-icon {
    width: 24px;
    height: 24px;
    color: var(--primary);
}

.landing-tutorial-toggle .toggle-text h4 {
    font-size: var(--text-base);
    font-weight: var(--weight-semibold);
    margin-bottom: var(--space-1);
    color: var(--text-primary);
}

.landing-tutorial-toggle .toggle-text p {
    font-size: var(--text-sm);
    color: var(--text-secondary);
}

/* Toggle Switch UI */
.toggle-switch-ui {
    width: 52px;
    height: 28px;
    background: var(--border-strong);
    border-radius: 14px;
    position: relative;
    transition: transform 0.25s var(--ease-smooth), box-shadow 0.25s var(--ease-smooth), background-color 0.25s var(--ease-smooth), opacity 0.25s var(--ease-smooth);
    flex-shrink: 0;
}

.toggle-switch-ui.active {
    background: var(--safe);
}

.toggle-switch-ui::after {
    content: '';
    position: absolute;
    width: 24px;
    height: 24px;
    background: var(--bg-card);
    border-radius: var(--radius-full);
    top: 2px;
    left: 2px;
    transition: transform 0.25s var(--ease-smooth);
    box-shadow: var(--shadow-toggle-knob);
}

.toggle-switch-ui.active::after {
    transform: translateX(24px);
}

/* Tutorial Preview */
.tutorial-preview {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: var(--space-3);
    margin-top: var(--space-4);
}

.preview-card {
    background: var(--bg-card);
    border: 1px solid var(--border);
    border-radius: var(--radius-sm);
    padding: var(--space-3);
    text-align: center;
}

.preview-card .lucide-icon {
    width: 24px;
    height: 24px;
    color: var(--text-tertiary);
    margin-bottom: var(--space-2);
}

.preview-card span {
    font-size: var(--text-xs);
    color: var(--text-secondary);
    display: block;
}

/* Ready Step */
.landing-ready {
    text-align: center;
    padding: var(--space-6) 0;
}

.landing-success-icon {
    width: 100px;
    height: 100px;
    margin: 0 auto var(--space-6);
    background: var(--safe);
    border-radius: var(--radius-full);
    display: flex;
    align-items: center;
    justify-content: center;
    animation: successPop 0.5s ease-out;
    box-shadow: 0 8px 32px var(--safe-border);
}

@keyframes successPop {
    0% {
        transform: scale(0);
    }
    50% {
        transform: scale(1.1);
    }
    100% {
        transform: scale(1);
    }
}

.landing-success-icon .lucide-icon {
    width: 50px;
    height: 50px;
    color: var(--text-on-primary);
}

.landing-ready-title {
    font-size: var(--text-xl);
    font-weight: var(--weight-bold);
    margin-bottom: var(--space-3);
    color: var(--text-primary);
}

.landing-ready-summary {
    background: var(--bg-page);
    border-radius: var(--radius);
    padding: var(--space-5);
    text-align: left;
    margin-bottom: var(--space-6);
    max-width: 400px;
    margin-left: auto;
    margin-right: auto;
}

.ready-summary-item {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: var(--space-3) 0;
    border-bottom: 1px solid var(--border);
}

.ready-summary-item:last-child {
    border-bottom: none;
}

.ready-summary-label {
    font-size: var(--text-sm);
    color: var(--text-secondary);
}

.ready-summary-value {
    font-size: var(--text-sm);
    font-weight: var(--weight-semibold);
    display: flex;
    align-items: center;
    gap: var(--space-2);
    color: var(--text-primary);
}

.landing-ready .btn-large {
    margin-bottom: var(--space-4);
}

/* Landing Footer */
.landing-footer {
    padding: var(--space-5) var(--space-7);
    border-top: 1px solid var(--border);
    display: flex;
    justify-content: space-between;
    align-items: center;
    background: var(--bg-card);
    flex-shrink: 0;
}

.landing-footer[hidden] {
    display: none;
}

.landing-footer button[hidden],
.landing-footer .btn[hidden] {
    display: none;
}

.landing-footer .btn-secondary {
    background: var(--bg-elevated);
    color: var(--text-primary);
    border: 1px solid var(--border);
}

.landing-footer .btn-secondary:hover {
    background: var(--bg-page);
    border-color: var(--border-strong);
    transform: translateY(-1px);
}

.landing-footer .btn-primary {
    min-width: 140px;
}

.landing-footer .btn-primary:disabled {
    opacity: 0.5;
    cursor: not-allowed;
}

/* Show Setup Again Toggle */
.landing-show-again {
    display: flex;
    align-items: center;
    gap: var(--space-2);
    margin-top: var(--space-4);
    cursor: pointer;
    font-size: var(--text-sm);
    color: var(--text-tertiary);
    user-select: none;
}

.landing-show-again input[type="checkbox"] {
    width: 16px;
    height: 16px;
    accent-color: var(--primary);
    cursor: pointer;
    flex-shrink: 0;
}

.landing-show-again:hover {
    color: var(--text-secondary);
}

/* ============================================================================
   LANDING PAGE - DARK MODE
   ============================================================================ */

.dark .landing-overlay {
    background: var(--overlay-landing);
}

.dark .landing-container {
    background: var(--bg-card);
}

.dark .landing-welcome-icon {
    box-shadow: var(--shadow-safe);
}

.dark .landing-tutorial-toggle .toggle-icon {
    background: var(--bg-elevated);
}

.dark .landing-success-icon {
    box-shadow: 0 8px 32px var(--safe-border);
}

.dark .model-card .accuracy-badge.basic {
    background: var(--danger-light-dark);
}

.dark .model-card .accuracy-badge.good {
    background: var(--alert-light-dark);
}

.dark .model-card .accuracy-badge.best {
    background: var(--safe-light-dark);
}

/* ============================================================================
   LANDING PAGE - MOBILE ADAPTATIONS
   ============================================================================ */

@media (max-width: 640px) {
    .landing-overlay {
        padding: var(--space-4);
        align-items: flex-end;
    }

    .landing-container {
        max-height: 95vh;
        border-radius: var(--radius-lg);
    }

    .landing-header {
        padding: var(--space-5) var(--space-5) var(--space-3);
    }

    .landing-content {
        padding: var(--space-5);
    }

    .landing-footer {
        padding: var(--space-4) var(--space-5);
        flex-direction: row;
        gap: var(--space-3);
    }

    .landing-footer .btn {
        flex: 1;
    }

    .landing-welcome {
        padding: var(--space-6) 0;
    }

    .landing-welcome-title {
        font-size: var(--text-xl);
    }

    .landing-welcome-subtitle {
        font-size: var(--text-sm);
    }

    .landing-step-title {
        font-size: var(--text-lg);
    }

    .landing-step-subtitle {
        font-size: var(--text-sm);
    }

    .landing-ready {
        padding: var(--space-4) 0;
    }

    .landing-success-icon {
        width: 80px;
        height: 80px;
    }

    .landing-success-icon .lucide-icon {
        width: 40px;
        height: 40px;
    }

    .tutorial-preview {
        grid-template-columns: 1fr;
    }

    .preview-card {
        display: flex;
        align-items: center;
        gap: var(--space-3);
        text-align: left;
    }

    .preview-card .lucide-icon {
        margin-bottom: 0;
    }
}

@media (max-width: 480px) {
    .landing-overlay {
        padding: 0;
    }

    .landing-container {
        max-height: 100vh;
        border-radius: 0;
    }

    .landing-welcome-icon {
        width: 64px;
        height: 64px;
    }

    .landing-welcome-icon .lucide-icon {
        width: 32px;
        height: 32px;
    }

    .model-card {
        padding: var(--space-4);
    }

    .model-card .model-header {
        flex-direction: column;
        align-items: flex-start;
        gap: var(--space-2);
    }

    .landing-tutorial-toggle {
        flex-direction: column;
        gap: var(--space-4);
        align-items: flex-start;
    }

    .toggle-switch-ui {
        align-self: flex-end;
    }
}

@media (max-width: 360px) {
    /* Small mobile adjustments (iPhone SE and similar) */
    .value-input {
        width: 60px;
        min-width: 50px;
    }
    .contrib-header-left {
        min-width: 100px;
    }
    .toggle-option {
        min-width: 36px;
    }
}


/* ============================================
   PREFERS-REDUCED-MOTION – Consolidated
   ============================================ */

@media (prefers-reduced-motion: reduce) {
    /* Landing page animations */
    .landing-overlay,
    .landing-container {
        animation: none;
    }

    .landing-step.active {
        animation: none;
    }

    /* General tab/panel fade */
    .model-tab-content.active {
        animation: none;
    }

    /* Simulation completion flash */
    .treatment-overview-row.sim-complete {
        animation: none;
    }

    /* OCR populated flash */
    .ocr-populated {
        animation: none;
    }

    /* Transition softening */
    .hero-expandable,
    .tov-details,
    .collapsible-section,
    .col-panel .panel-body,
    .col-panel .panel-subtitle {
        transition: none;
    }
}


/* ============================================
   HARDENING: TEXT OVERFLOW & RESILIENCE
   ============================================ */

/* Input labels - prevent overflow with long translations */
.input-label-row label {
    min-width: 0;
    overflow: clip;
    text-overflow: ellipsis;
    white-space: nowrap;
}

/* Factor value rows - prevent overflow */
.factor-value-row {
    min-width: 0;
    flex-wrap: wrap;
    gap: var(--space-1);
}

/* Value inputs - allow shrinking */
.value-input {
    min-width: 60px;
    max-width: 100%;
}

/* Toggle options - prevent overflow */
.toggle-option {
    min-width: 0;
    overflow: clip;
    text-overflow: ellipsis;
    white-space: nowrap;
}

/* Section summary - allow wrapping for long translations */
.section-summary {
    overflow-wrap: break-word;
    word-wrap: break-word;
    hyphens: auto;
}

/* Patient name in drawer - already has ellipsis, add title attribute support */
.pd-patient-name {
    cursor: default;
}

/* Settings option labels - prevent overflow */
.settings-option-label {
    min-width: 0;
    overflow: clip;
    text-overflow: ellipsis;
    white-space: nowrap;
    max-width: 120px;
}

/* Settings model label - prevent overflow */
.settings-model-label {
    min-width: 0;
    overflow: clip;
    text-overflow: ellipsis;
    white-space: nowrap;
    max-width: 140px;
}

/* Treatment titles - prevent overflow */
.chosen-treatment-title {
    min-width: 0;
    overflow: clip;
    text-overflow: ellipsis;
}

/* What-if badges - prevent overflow */
.what-if-badge {
    max-width: 100%;
    overflow: clip;
    text-overflow: ellipsis;
}

/* Nav brand - prevent overflow */
.nav-brand {
    min-width: 0;
}

.nav-brand span {
    overflow: clip;
    text-overflow: ellipsis;
    white-space: nowrap;
}

/* Contribution chart labels - prevent overflow */
.contrib-label-full,
.contrib-label-short {
    min-width: 0;
    overflow: clip;
    text-overflow: ellipsis;
}

/* ============================================
   HARDENING: INPUT VALIDATION STATES
   ============================================ */

/* Invalid input state */
.value-input:invalid,
.pd-input:invalid {
    border-color: var(--danger);
    box-shadow: 0 0 0 2px var(--danger-light);
}

/* Input focus-visible for keyboard navigation */
.value-input:focus-visible,
.pd-input:focus-visible,
.slider:focus-visible {
    outline: 2px solid var(--primary);
    outline-offset: 2px;
}

/* Disabled input state */
.value-input:disabled,
.slider:disabled {
    opacity: 0.6;
    cursor: not-allowed;
}

/* ============================================
   HARDENING: ERROR STATES & MESSAGES
   ============================================ */

/* Error message container */
.error-message {
    display: flex;
    align-items: flex-start;
    gap: var(--space-2);
    padding: 12px 16px;
    background: var(--danger-light);
    border: 1px solid var(--danger-border);
    border-radius: var(--radius);
    color: var(--danger);
    font-size: var(--text-sm);
    margin: 8px 0;
}

.error-message .lucide-icon {
    flex-shrink: 0;
    width: 18px;
    height: 18px;
}

/* Warning message container */
.warning-message {
    display: flex;
    align-items: flex-start;
    gap: var(--space-2);
    padding: 12px 16px;
    background: var(--alert-light);
    border: 1px solid var(--alert-border);
    border-radius: var(--radius);
    color: var(--alert);
    font-size: var(--text-sm);
    margin: 8px 0;
}

/* Success message container */
.success-message {
    display: flex;
    align-items: flex-start;
    gap: var(--space-2);
    padding: 12px 16px;
    background: var(--safe-light);
    border: 1px solid var(--safe-border);
    border-radius: var(--radius);
    color: var(--safe);
    font-size: var(--text-sm);
    margin: 8px 0;
}

/* ============================================
   HARDENING: LOADING STATES
   ============================================ */

/* Loading spinner */
.loading-spinner {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 20px;
    height: 20px;
    border: 2px solid var(--border);
    border-top-color: var(--primary);
    border-radius: var(--radius-full);
    animation: spin 0.8s linear infinite;
}

/* Skeleton loading */
.skeleton {
    background: linear-gradient(90deg, var(--bg-elevated) 25%, var(--border) 50%, var(--bg-elevated) 75%);
    background-size: 200% 100%;
    animation: shimmer 1.5s infinite;
    border-radius: var(--radius-sm);
}

@keyframes shimmer {
    0% { background-position: 200% 0; }
    100% { background-position: -200% 0; }
}

/* Button loading state */
.btn-loading {
    position: relative;
    color: transparent !important;
    pointer-events: none;
}

.btn-loading::after {
    content: '';
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 16px;
    height: 16px;
    border: 2px solid var(--border);
    border-top-color: currentColor;
    border-radius: var(--radius-full);
    animation: spin 0.8s linear infinite;
}

/* ============================================
   HARDENING: EMPTY STATES
   ============================================ */

/* Empty state container */
.empty-state {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 32px 24px;
    text-align: center;
    color: var(--text-tertiary);
}

.empty-state-icon {
    width: 48px;
    height: 48px;
    margin-bottom: var(--space-4);
    color: var(--text-tertiary);
    opacity: 0.5;
}

.empty-state-title {
    font-size: var(--text-md);
    font-weight: var(--weight-semibold);
    color: var(--text-secondary);
    margin-bottom: var(--space-2);
}

.empty-state-text {
    font-size: var(--text-sm);
    line-height: var(--leading-normal);
    max-width: 280px;
}

/* ============================================
   HARDENING: ACCESSIBILITY IMPROVEMENTS
   ============================================ */

/* Visually hidden but accessible */
.visually-hidden {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0;
}

.focusable-skip:focus {
    position: fixed;
    top: 8px;
    left: 8px;
    z-index: 99999;
    width: auto;
    height: auto;
    padding: 8px 16px;
    clip: auto;
    white-space: normal;
    background: var(--primary);
    color: var(--text-on-primary);
    border-radius: var(--radius-sm);
    font-weight: var(--weight-semibold);
    font-size: var(--text-sm);
    text-decoration: none;
}

/* Focus visible styles */
*:focus-visible {
    outline: 2px solid var(--primary);
    outline-offset: 2px;
}

/* High contrast mode support */
@media (prefers-contrast: high) {
    .slider-track-bg,
    .toggle-slider,
    .btn-primary,
    .btn-secondary {
        border: 1px solid currentColor;
    }
}

/* Reduced motion support */
@media (prefers-reduced-motion: reduce) {
    .loading-spinner,
    .skeleton,
    .btn-loading::after {
        animation: none;
    }

    .skeleton {
        background: var(--border);
    }
}

/* ============================================
   HARDENING: RTL SUPPORT (INTERNATIONALIZATION)
   ============================================ */

/* RTL layout support */
[dir="rtl"] .input-label-row label {
    flex-direction: row-reverse;
}

[dir="rtl"] .factor-value-row {
    flex-direction: row-reverse;
}

[dir="rtl"] .toggle-group {
    flex-direction: row-reverse;
}

[dir="rtl"] .toggle-option:first-child {
    text-align: left;
}

[dir="rtl"] .toggle-option:last-child {
    text-align: right;
}

/* ============================================
   HARDENING: TEXT SCALING SUPPORT
   ============================================ */

/* Support for browser zoom up to 200% */
@media (max-width: 800px) and (min-resolution: 1.5dppx) {
    :root {
        --text-hero: 2rem;
        --text-2xl: 1.5rem;
    }
}

/* Ensure touch targets remain accessible */
@media (pointer: coarse) {
    .btn-primary,
    .btn-secondary,
    .btn-reset {
        min-height: 44px;
        min-width: 44px;
    }

    /* Expand toggle touch target without changing visual size */
    .toggle-switch {
        position: relative;
    }

    .toggle-switch::after {
        content: "";
        position: absolute;
        inset: -11px -3px;
    }

    /* Value inputs: only slightly taller, not bloated */
    .value-input {
        min-height: 36px;
    }

    /* Expand touch targets for small icon buttons */
    .panel-collapse-btn,
    .section-collapse-btn,
    .btn-dark-mode,
    .btn-settings-darkmode,
    .pd-close-btn,
    .modal-close-btn {
        min-height: 44px;
        min-width: 44px;
    }

    /* Language & model switcher buttons — expand height */
    .btn-language,
    .btn-settings-model {
        min-height: 44px;
    }

    /* Contribution chart rows — expand touch height */
    .contrib-row {
        min-height: 44px;
    }

    /* Treatment clickable rows — expand touch height */
    .tov-clickable {
        min-height: 44px;
    }

    /* Nav toggle switch — expand touch area */
    .toggle-switch-nav {
        position: relative;
    }

    .toggle-switch-nav::after {
        content: "";
        position: absolute;
        inset: -13px -6px;
    }

    /* Slider thumbs — larger on touch (28px compromise; full 44px too large visually) */
    .slider::-webkit-slider-thumb {
        width: 28px;
        height: 28px;
    }

    .slider::-moz-range-thumb {
        width: 28px;
        height: 28px;
    }

    /* Navigation buttons — expand touch target */
    .btn-settings,
    .btn-tutorial,
    .btn-patient-menu,
    .btn-restart-setup,
    .pd-btn-icon,
    .password-toggle-btn {
        min-height: 44px;
        min-width: 44px;
    }
}


/* ============================================
   ACCESSIBILITY: PREFERS-REDUCED-MOTION
   Comprehensive coverage for all animations/transitions
   WCAG 2.3.3 Animation from Interactions (AAA)
   ============================================ */
@media (prefers-reduced-motion: reduce) {
    /* Disable smooth scrolling */
    html {
        scroll-behavior: auto;
    }

    /* Disable theme-switch transition burst */
    .theme-transition,
    .theme-transition *,
    .theme-transition *::before,
    .theme-transition *::after {
        transition: none !important;
    }

    /* Disable slider thumb transitions */
    .slider::-webkit-slider-thumb {
        transition: none;
    }

    /* Disable all keyframe animations */
    .indicated-heart {
        animation: none;
    }

    /* Keyframe animations — specific selectors only (no fragile attribute selector) */
    .contrib-bar-fill,
    .treatment-row,
    .treatment-overview-row.sim-complete,
    .dropdown-menu,
    .settings-lang-dropdown,
    .settings-model-dropdown,
    .settings-panel,
    .model-tab-content.active,
    .modal-content,
    .ocr-modal-content,
    .ocr-populated,
    .password-section,
    .tutorial-card,
    .landing-container,
    .landing-footer,
    .landing-header,
    .landing-content,
    .landing-success-icon {
        animation: none !important;
        transition: none !important;
    }

    /* General: cut all transitions on interactive elements */
    button,
    .btn,
    .btn-primary,
    .btn-secondary,
    .btn-reset,
    .btn-simulate-treatment,
    .btn-undo-treatment,
    .btn-patient-menu,
    .btn-settings-darkmode,
    .slider,
    .toggle-switch,
    .toggle-knob,
    .nav-btn,
    .tab-btn,
    .info-icon,
    .treatment-card,
    .patient-row,
    .col-panel,
    .center-card,
    .risk-gauge,
    .icon-array-cell,
    .causality-chain,
    .ocr-status,
    .profile-warn-icon,
    .tutorial-nav-btn,
    .tutorial-nav-primary,
    .landing-overlay,
    [class*="fade"],
    [class*="slide"],
    [class*="spin"],
    [class*="pulse"],
    [class*="shimmer"] {
        animation: none !important;
        transition: none !important;
    }

    /* OCR populated highlight */
    @keyframes ocr-populated {
        from, to { background-color: transparent; }
    }

    /* Spinner: freeze instead of spin */
    @keyframes spin {
        to { transform: none; }
    }

    /* Shimmer: freeze */
    @keyframes shimmer {
        from, to { background-position: 0 0; }
    }

    /* Landing slide-up: show immediately */
    @keyframes landingSlideUp {
        from, to { opacity: 1; transform: none; }
    }

    @keyframes landingFadeIn {
        from, to { opacity: 1; }
    }

    /* Success pop: no scale */
    @keyframes successPop {
        from, to { transform: none; opacity: 1; }
    }

    /* Sim complete pulse: no scale */
    @keyframes simCompletePulse {
        from, to { transform: none; opacity: 1; }
    }

    /* General fadeIn: no movement */
    @keyframes fadeIn {
        from, to { opacity: 1; transform: none; }
    }

    /* Dropdown appear: show immediately */
    @keyframes dropdown-appear {
        from, to { opacity: 1; transform: none; }
    }

    /* Slide-down: no movement */
    @keyframes slide-down {
        from, to { opacity: 1; transform: none; }
    }

    /* Profile warn icon pulse: freeze */
    @keyframes profile-warn-icon-pulse {
        from, to { opacity: 1; transform: none; }
    }
}