:root {
    /* KureInsights Dark Theme - Purple-based design system */
    --brand-primary: #8B5CF6;
    --brand-secondary: #1e1b4b;
    --brand-accent: #a78bfa;
    --body-bg: #12131d;
    --body-color: #e2e8f0;
    --brand-primary-rgb: 139, 92, 246;
    --brand-secondary-rgb: 30, 27, 75;
    --brand-accent-rgb: 167, 139, 250;

    /* Extended color palette */
    --background: #12131d;
    --background-elevated: rgba(22, 22, 34, 0.94);
    --foreground: #f8fafc;
    --foreground-muted: #94a3b8;
    /* Secondary body copy, one step dimmer than --body-color. Paired with a
       light value below so report partials can drop hardcoded slate hexes. */
    --foreground-soft: #cbd5e1;
    /* Alias for the 22 var(--text-secondary, #94a3b8) call sites in the
       genomics block. Without it they resolve to the dark-only fallback in
       both themes. Indirection means it tracks whichever --foreground-muted
       the active theme sets. */
    --text-secondary: var(--foreground-muted);
    /* Same story for --text-primary, which the Genie panel leans on and which
       nothing ever defined. Undefined it falls back to the inherited body
       colour, so a light-theme page painted dark slate text onto the drawer's
       hardcoded near-black and the panel could not be read at all. */
    --text-primary: var(--foreground);

    /* Sunken/raised fills for panels that sit inside a card. The dark values
       are the rgba(0, 0, 0, *) and rgba(255, 255, 255, *) washes the report
       partials used inline; light flips them to a slate tint so they stay
       visible on a near-white page. */
    --surface-sunken: rgba(0, 0, 0, 0.3);
    --surface-sunken-deep: rgba(0, 0, 0, 0.2);
    --surface-raised: rgba(255, 255, 255, 0.1);

    /* Status colours used as *text*. The --success/--warning/--info swatches
       above are tuned for fills on a dark page and drop below the 4.5:1 AA
       floor when set as small text on a light one, so text keeps its own
       token. Dark values match the originals, so dark mode is unchanged. */
    --success-text: #10b981;
    --warning-text: #f59e0b;
    --warning-text-bright: #fbbf24;
    --destructive-text: #ef4444;
    --info-text: #3b82f6;
    --accent-text: #a78bfa;
    --cyan-text: #06b6d4;

    /* Card/Panel colors (glassmorphism) */
    --card-bg: rgba(18, 18, 26, 0.55);
    --card-border: rgba(255, 255, 255, 0.14);
    --card-hover-border: rgba(139, 92, 246, 0.4);

    /* Status colors */
    --destructive: #ef4444;
    --destructive-rgb: 239, 68, 68;
    --success: #10b981;
    --success-rgb: 16, 185, 129;
    --warning: #f59e0b;
    --warning-rgb: 245, 158, 11;
    --info: #3b82f6;
    --info-rgb: 59, 130, 246;

    /* Band colors for risk visualization */
    --band-very-low: #10b981;
    --band-low: #34d399;
    --band-typical: #94a3b8;
    --band-high: #f59e0b;
    --band-very-high: #ef4444;

    /* Spacing & radius */
    --radius: 0.75rem;
    --radius-sm: 0.5rem;
    --radius-lg: 1rem;
    --radius-xl: 1.5rem;

    /* Shadows & glows */
    --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.3);
    --shadow-md: 0 4px 12px rgba(0, 0, 0, 0.4);
    --shadow-lg: 0 12px 40px rgba(0, 0, 0, 0.5);
    --shadow-glow: 0 0 20px rgba(139, 92, 246, 0.3);
    --shadow-glow-intense: 0 0 30px rgba(139, 92, 246, 0.5);

    /* Chart colors */
    --chart-1: #8B5CF6;
    --chart-2: #ec4899;
    --chart-3: #6366f1;
    --chart-4: #14b8a6;
    --chart-5: #f59e0b;

    /* Schema-driven report renderer */
    --report-auto-border: rgba(255, 255, 255, 0.10);
    --report-auto-section-gap: 1.25rem;
    --report-auto-table-stripe: rgba(255, 255, 255, 0.04);
    --report-auto-chip-bg: rgba(139, 92, 246, 0.15);
    --report-auto-chip-warn-bg: rgba(245, 158, 11, 0.18);
    --report-auto-chip-ok-bg: rgba(16, 185, 129, 0.18);

    /* Genomics demo module. The five marker severities are supplied by the
       backend; the colours below never carry meaning on their own, every
       marker and chip also renders its severity as text. */
    --genomics-border: rgba(255, 255, 255, 0.10);
    --genomics-surface: rgba(255, 255, 255, 0.04);
    --genomics-gap: 1.25rem;
    --genomics-severity-unknown: #94a3b8;
    --genomics-severity-typical: #10b981;
    --genomics-severity-attention: #f59e0b;
    --genomics-severity-elevated: #fb7185;
    --genomics-severity-high: #ef4444;
    /* Fixed bright palette for markers, which always sit on a dark overlay.
       Deliberately not restated under [data-theme="light"]. */
    --genomics-severity-unknown-overlay: #94a3b8;
    --genomics-severity-typical-overlay: #10b981;
    --genomics-severity-attention-overlay: #f59e0b;
    --genomics-severity-elevated-overlay: #fb7185;
    --genomics-severity-high-overlay: #ef4444;
    --genomics-action-avoid: #ef4444;
    --genomics-action-alternative: #fb7185;
    --genomics-action-adjust: #f59e0b;
    --genomics-action-monitor: #38bdf8;
    --genomics-action-standard: #10b981;
    --genomics-action-informational: #94a3b8;
    --genomics-action-unresolved: #a78bfa;

    /* Clinician briefing. The three provenance colours are the only new
       semantics here: report / practice / reasoning. None of them carries
       meaning alone — every chip also states its class as text — so the
       palette is safe for colour-blind readers and in print. */
    --briefing-border: rgba(255, 255, 255, 0.10);
    --briefing-surface: rgba(255, 255, 255, 0.035);
    --briefing-surface-raised: rgba(255, 255, 255, 0.06);
    --briefing-gap: 1.5rem;
    --briefing-rule: rgba(255, 255, 255, 0.07);
    --briefing-cite-report: #38bdf8;
    --briefing-cite-practice: #10b981;
    --briefing-cite-reasoning: #a78bfa;
    --briefing-flag: #fb7185;
    --briefing-quiet: #94a3b8;
}

/* ============================================
   LIGHT THEME OVERRIDES
   ============================================ */

[data-theme="light"] {
    --brand-primary: #7c3aed;
    --brand-secondary: #ede9fe;
    --brand-accent: #6d28d9;
    --body-bg: #f8f9fc;
    --body-color: #1e293b;
    --brand-primary-rgb: 124, 58, 237;
    --brand-secondary-rgb: 237, 233, 254;
    --brand-accent-rgb: 109, 40, 217;

    --background: #f8f9fc;
    --background-elevated: rgba(255, 255, 255, 0.96);
    --foreground: #0f172a;
    /* #64748b clears 4.5:1 on the bare page but not on the tinted card fills
       these reports use, so light mode runs one step darker than dark mode's
       muted grey. */
    --foreground-muted: #475569;
    --foreground-soft: #334155;

    --surface-sunken: rgba(15, 23, 42, 0.04);
    --surface-sunken-deep: rgba(15, 23, 42, 0.06);
    --surface-raised: rgba(15, 23, 42, 0.07);

    /* Darkened so each clears 4.5:1 against the #f8f9fc page. */
    --success-text: #047857;
    /* Amber needs to go this dark to clear 4.5:1 on its own 10%-alpha badge
       fill, not just on the page. */
    --warning-text: #92400e;
    --warning-text-bright: #92400e;
    --destructive-text: #b91c1c;
    --info-text: #1d4ed8;
    --accent-text: #6d28d9;
    --cyan-text: #0e7490;

    /* The genomics module's surface tokens are white-on-white in light mode. */
    --genomics-border: rgba(15, 23, 42, 0.12);
    --genomics-surface: rgba(15, 23, 42, 0.04);
    --genomics-severity-unknown: #64748b;
    --genomics-severity-typical: #047857;
    --genomics-severity-attention: #b45309;
    --genomics-severity-elevated: #be123c;
    --genomics-severity-high: #b91c1c;
    --genomics-action-avoid: #b91c1c;
    --genomics-action-alternative: #be123c;
    --genomics-action-adjust: #b45309;
    --genomics-action-monitor: #0369a1;
    --genomics-action-standard: #047857;
    --genomics-action-informational: #64748b;
    --genomics-action-unresolved: #6d28d9;

    /* Briefing surfaces are white-on-white in light mode, and the provenance
       colours need darkening to clear 4.5:1 as small text on a near-white
       card. */
    --briefing-border: rgba(15, 23, 42, 0.12);
    --briefing-surface: rgba(15, 23, 42, 0.03);
    --briefing-surface-raised: rgba(15, 23, 42, 0.05);
    --briefing-rule: rgba(15, 23, 42, 0.09);
    --briefing-cite-report: #0369a1;
    --briefing-cite-practice: #047857;
    --briefing-cite-reasoning: #6d28d9;
    --briefing-flag: #be123c;
    --briefing-quiet: #64748b;

    --card-bg: rgba(255, 255, 255, 0.75);
    --card-border: rgba(0, 0, 0, 0.1);
    --card-hover-border: rgba(124, 58, 237, 0.35);

    --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.06);
    --shadow-md: 0 4px 12px rgba(0, 0, 0, 0.08);
    --shadow-lg: 0 12px 40px rgba(0, 0, 0, 0.12);
    --shadow-glow: 0 0 16px rgba(124, 58, 237, 0.15);
    --shadow-glow-intense: 0 0 24px rgba(124, 58, 237, 0.25);
}

[data-theme="light"] body {
    background: var(--body-bg);
}

[data-theme="light"] .site-header {
    background: rgba(255, 255, 255, 0.88);
    box-shadow: 0 1px 8px rgba(0, 0, 0, 0.08);
}

[data-theme="light"] .site-header::after {
    background: radial-gradient(circle at top right, rgba(var(--brand-primary-rgb), 0.06), transparent 50%);
}

[data-theme="light"] .site-footer {
    background: rgba(255, 255, 255, 0.95);
}

[data-theme="light"] .site-footer::before {
    background: radial-gradient(circle at top left, rgba(var(--brand-primary-rgb), 0.05), transparent 50%);
}

[data-theme="light"] .site-footer img {
    filter: drop-shadow(0 0 10px rgba(var(--brand-primary-rgb), 0.3));
}

[data-theme="light"] .user-menu__panel {
    background: rgba(255, 255, 255, 0.98);
    border: 1px solid var(--card-border);
    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.1), 0 0 0 1px rgba(0, 0, 0, 0.04);
}

[data-theme="light"] .user-menu__summary {
    background: var(--card-bg);
}

[data-theme="light"] .user-menu__link:hover,
[data-theme="light"] .user-menu__link:focus-visible {
    background: rgba(0, 0, 0, 0.05);
}

[data-theme="light"] .user-menu__divider {
    background: rgba(0, 0, 0, 0.08);
}

[data-theme="light"] .user-menu__avatar {
    background: rgba(var(--brand-primary-rgb), 0.12);
    color: var(--brand-primary);
}

[data-theme="light"] .modal__overlay {
    background: rgba(0, 0, 0, 0.4);
}

[data-theme="light"] .modal__content {
    background: rgba(255, 255, 255, 0.98);
}

[data-theme="light"] .global-background__gradient {
    background: radial-gradient(circle at top, rgba(124, 58, 237, 0.06) 0%, transparent 50%);
}

[data-theme="light"] .global-background__scanline {
    background: none;
}

[data-theme="light"] .kure-body-panel,
[data-theme="light"] .kure-overview-panel__inner,
[data-theme="light"] .admin-home,
[data-theme="light"] .admin-section {
    background: linear-gradient(180deg, rgba(255, 255, 255, 0.95) 0%, rgba(248, 249, 252, 0.98) 100%);
    border-color: var(--card-border);
}

[data-theme="light"] .correlation-card,
[data-theme="light"] .ki-card,
[data-theme="light"] .ki-card--treatment,
[data-theme="light"] .ki-card--form,
[data-theme="light"] .ki-note-item,
[data-theme="light"] .tracker-card {
    background: rgba(255, 255, 255, 0.8);
    border-color: var(--card-border);
}

[data-theme="light"] .ki-card--cdss {
    background: linear-gradient(135deg, rgba(124, 58, 237, 0.06) 0%, rgba(255, 255, 255, 0.6) 100%);
}

[data-theme="light"] .system-metric,
[data-theme="light"] .system-detail__status,
[data-theme="light"] .finding-item,
[data-theme="light"] .ki-details,
[data-theme="light"] .ki-cdss-overview,
[data-theme="light"] .ki-cdss-action-card,
[data-theme="light"] .ki-cdss-item,
[data-theme="light"] .ki-treatment-content,
[data-theme="light"] .ki-empty-state,
[data-theme="light"] .admin-home__activity,
[data-theme="light"] .treatment-plan-content,
[data-theme="light"] .edu-concept,
[data-theme="light"] .edu-clinical-context {
    background: rgba(0, 0, 0, 0.03);
}

[data-theme="light"] .ki-textarea {
    background: #ffffff;
    border-color: var(--card-border);
    color: var(--foreground);
}

[data-theme="light"] .ki-empty-state {
    border-color: var(--card-border);
}

[data-theme="light"] .ki-badge--ai {
    color: #5b21b6;
    background: linear-gradient(135deg, rgba(124, 58, 237, 0.12), rgba(168, 85, 247, 0.12));
    border-color: rgba(124, 58, 237, 0.35);
}

[data-theme="light"] .ki-priority--high {
    color: #b91c1c;
    background: rgba(239, 68, 68, 0.12);
}

[data-theme="light"] .ki-priority--moderate {
    color: #b45309;
    background: rgba(245, 158, 11, 0.16);
}

[data-theme="light"] .ki-priority--low {
    color: #047857;
    background: rgba(16, 185, 129, 0.12);
}

[data-theme="light"] .ki-cdss-action-card__id {
    background: rgba(15, 23, 42, 0.06);
}

[data-theme="light"] .ki-card__header,
[data-theme="light"] .ki-card__meta,
[data-theme="light"] .ki-cdss-item,
[data-theme="light"] .ki-cdss-action-card__actions {
    border-color: var(--card-border);
}

/* The .ki-* report modules were authored dark-only: they hardcode white and
   slate text over rgba(0, 0, 0, *) surfaces, which in light mode collapses to
   near-white text on a near-white page. Restate them against the light palette.
   Selectors that sit on the purple brand fill (.ki-btn--primary,
   .ki-sidebar__btn--active, .ki-cdss-item__marker) keep white text and are
   deliberately absent here. The :not() guards keep these rules from
   out-specifying the --active modifiers, which carry their own colour. */

[data-theme="light"] .ki-section-title,
[data-theme="light"] .ki-module-header__title,
[data-theme="light"] .ki-hero-card__value,
[data-theme="light"] .ki-big-number__value {
    color: var(--foreground);
}

[data-theme="light"] .ki-table td,
[data-theme="light"] .ki-comparison-box__text,
[data-theme="light"] .ki-note-item__author,
[data-theme="light"] .ki-note-item__content,
[data-theme="light"] .ki-details__value {
    color: var(--body-color);
}

[data-theme="light"] .ki-table th,
[data-theme="light"] .ki-module-header__subtitle,
[data-theme="light"] .ki-hero-card__label,
[data-theme="light"] .ki-hero-card__unit,
[data-theme="light"] .ki-big-number__unit,
[data-theme="light"] .ki-btn--ghost,
[data-theme="light"] .ki-details__summary,
[data-theme="light"] .ki-sidebar__btn:not(.ki-sidebar__btn--active),
[data-theme="light"] .ki-tab:not(.ki-tab--active) {
    color: var(--foreground-muted);
}

[data-theme="light"] .ki-btn--ghost:hover,
[data-theme="light"] .ki-details__summary:hover,
[data-theme="light"] .ki-tab:not(.ki-tab--active):hover {
    color: var(--foreground);
}

[data-theme="light"] .ki-hero-card {
    background: rgba(255, 255, 255, 0.8);
    border-color: var(--card-border);
}

[data-theme="light"] .ki-comparison-box,
[data-theme="light"] .ki-progress,
[data-theme="light"] .ki-table thead,
[data-theme="light"] .ki-sidebar__btn:not(.ki-sidebar__btn--active) {
    background: rgba(15, 23, 42, 0.04);
}

[data-theme="light"] .ki-btn--ghost:hover,
[data-theme="light"] .ki-table tbody tr:hover,
[data-theme="light"] .ki-details__summary:hover,
[data-theme="light"] .ki-sidebar__btn:not(.ki-sidebar__btn--active):hover {
    background: rgba(15, 23, 42, 0.07);
}

[data-theme="light"] .ki-table-wrapper,
[data-theme="light"] .ki-table th,
[data-theme="light"] .ki-table td,
[data-theme="light"] .ki-btn--ghost,
[data-theme="light"] .ki-details__content,
[data-theme="light"] .ki-details__item {
    border-color: var(--card-border);
}

[data-theme="light"] .finding-item:hover {
    background: rgba(0, 0, 0, 0.06);
}

/* Discover Insights / interactive body map */
[data-theme="light"] .body-map-container {
    background: linear-gradient(180deg, rgba(255, 255, 255, 0.92) 0%, rgba(237, 233, 254, 0.55) 100%);
    border-color: var(--card-border);
}

[data-theme="light"] .discover-info-panel {
    background: linear-gradient(180deg, rgba(255, 255, 255, 0.98) 0%, rgba(248, 249, 252, 0.98) 100%);
    border-color: var(--card-border);
    box-shadow: var(--shadow-md);
}

[data-theme="light"] .info-panel-header {
    background: rgba(0, 0, 0, 0.02);
    border-bottom-color: var(--card-border);
}

[data-theme="light"] .info-panel-footer {
    color: var(--foreground-muted);
}

[data-theme="light"] .idle-spinner__outer {
    border-color: rgba(0, 0, 0, 0.12);
}

[data-theme="light"] .idle-spinner__inner {
    border-color: rgba(0, 0, 0, 0.08);
}

[data-theme="light"] .body-node__label {
    background: rgba(255, 255, 255, 0.96);
    color: var(--foreground);
    border-color: var(--card-border);
}

[data-theme="light"] .body-node__inner--primary,
[data-theme="light"] .body-node__inner--danger,
[data-theme="light"] .body-node__inner--warning,
[data-theme="light"] .body-node__inner--success,
[data-theme="light"] .body-node__inner--info {
    background: rgba(255, 255, 255, 0.92);
}

/* Kure landing body map + overview panels */
[data-theme="light"] .subject-value,
[data-theme="light"] .bio-age-anchor__value,
[data-theme="light"] .overview-header__title,
[data-theme="light"] .nav-card__title,
[data-theme="light"] .finding-title,
[data-theme="light"] .metric-value {
    color: var(--foreground);
}

[data-theme="light"] .metric-card,
[data-theme="light"] .nav-card {
    background: rgba(0, 0, 0, 0.03);
    border-color: var(--card-border);
}

[data-theme="light"] .reset-view-btn {
    background: rgba(0, 0, 0, 0.03);
    border-color: var(--card-border);
    color: var(--foreground-muted);
}

[data-theme="light"] .reset-view-btn:hover {
    background: rgba(0, 0, 0, 0.06);
    border-color: rgba(var(--brand-primary-rgb), 0.35);
    color: var(--foreground);
}

[data-theme="light"] .system-detail-panel {
    background: linear-gradient(180deg, rgba(255, 255, 255, 0.95) 0%, rgba(248, 249, 252, 0.98) 100%);
    border-color: var(--card-border);
}

[data-theme="light"] .system-detail__title,
[data-theme="light"] .system-detail__status-title,
[data-theme="light"] .system-metric__value,
[data-theme="light"] .system-info__header h3 {
    color: var(--foreground);
}

[data-theme="light"] .system-detail__header {
    border-bottom-color: var(--card-border);
}

[data-theme="light"] .system-info-panel {
    background: rgba(255, 255, 255, 0.98);
    border-color: rgba(var(--brand-primary-rgb), 0.35);
    box-shadow: var(--shadow-lg);
}

[data-theme="light"] .ki-top-tabs {
    background: rgba(255, 255, 255, 0.92);
    border-bottom-color: var(--card-border);
}

[data-theme="light"] .ki-top-tabs__list {
    background: rgba(0, 0, 0, 0.03);
    border-color: var(--card-border);
}

[data-theme="light"] .ki-top-tabs__tab {
    color: var(--foreground-muted);
}

[data-theme="light"] .ki-top-tabs__tab:hover {
    background: rgba(0, 0, 0, 0.04);
}

/* Labs module - light mode */
[data-theme="light"] .labs-hero-v2 {
    background: linear-gradient(135deg, rgba(34, 211, 238, 0.06), rgba(124, 58, 237, 0.04));
    border-color: var(--card-border);
}

[data-theme="light"] .labs-hero-v2__title {
    color: var(--foreground);
}

[data-theme="light"] .labs-section-v2 {
    background: rgba(0, 0, 0, 0.015);
    border-color: var(--card-border);
}

[data-theme="light"] .labs-section-v2__title {
    color: var(--foreground);
}

[data-theme="light"] .labs-section-v2__header {
    border-bottom-color: var(--card-border);
}

[data-theme="light"] .labs-findings__item {
    color: var(--foreground);
}

[data-theme="light"] .labs-quick-stat {
    background: rgba(0, 0, 0, 0.02);
    border-color: var(--card-border);
}

[data-theme="light"] .labs-quick-stat__value {
    color: var(--foreground);
}

[data-theme="light"] .labs-panel-summary {
    background: rgba(0, 0, 0, 0.02);
}

[data-theme="light"] .labs-panel-summary__title {
    color: var(--foreground);
}

[data-theme="light"] .lab-card {
    background: rgba(0, 0, 0, 0.02);
    border-color: var(--card-border);
}

[data-theme="light"] .lab-card:hover {
    background: rgba(0, 0, 0, 0.04);
}

[data-theme="light"] .lab-card__value {
    color: var(--foreground);
}

[data-theme="light"] .lab-card__name {
    color: var(--foreground-muted);
}

[data-theme="light"] .lab-card__interp {
    border-top-color: var(--card-border);
}

[data-theme="light"] .labs-interpretation {
    background: rgba(124, 58, 237, 0.04);
    border-color: rgba(124, 58, 237, 0.12);
}

[data-theme="light"] .labs-interpretation__text {
    color: var(--foreground);
}

[data-theme="light"] .labs-differential {
    border-top-color: var(--card-border);
}

[data-theme="light"] .labs-differential__title {
    color: var(--foreground);
}

[data-theme="light"] .impersonation-banner {
    background: linear-gradient(90deg, rgba(var(--warning-rgb), 0.08), rgba(var(--warning-rgb), 0.03));
}

[data-theme="light"] input[type="text"],
[data-theme="light"] input[type="email"],
[data-theme="light"] input[type="password"],
[data-theme="light"] input[type="search"],
[data-theme="light"] input[type="number"],
[data-theme="light"] input[type="tel"],
[data-theme="light"] input[type="url"],
[data-theme="light"] textarea,
[data-theme="light"] select,
[data-theme="light"] .form-control {
    background-color: rgba(0, 0, 0, 0.03);
    color: var(--foreground);
    border-color: var(--card-border);
}

[data-theme="light"] input:focus,
[data-theme="light"] textarea:focus,
[data-theme="light"] select:focus,
[data-theme="light"] .form-control:focus {
    background-color: #fff;
    border-color: var(--brand-primary);
}

[data-theme="light"] .security-notice {
    color: var(--foreground-muted);
}

/* Theme toggle button */
.theme-toggle {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 2.25rem;
    height: 2.25rem;
    border: 1px solid var(--card-border);
    border-radius: 0.65rem;
    background: var(--card-bg);
    backdrop-filter: blur(8px);
    cursor: pointer;
    color: var(--foreground-muted);
    transition: color 0.25s ease, background-color 0.25s ease, border-color 0.25s ease, transform 0.2s ease;
    padding: 0;
    flex-shrink: 0;
}

.theme-toggle:hover,
.theme-toggle:focus-visible {
    color: var(--brand-primary);
    border-color: var(--card-hover-border);
    transform: scale(1.08);
}

.theme-toggle:focus-visible {
    outline: 2px solid var(--brand-primary);
    outline-offset: 2px;
}

.theme-toggle__icon {
    width: 1.15rem;
    height: 1.15rem;
    display: block;
}

.theme-toggle__icon--hidden {
    display: none;
}

/* ============================================
   KURE LANDING PAGE - New Design System
   ============================================ */

.kure-landing {
    height: calc(100vh - 60px);
    display: flex;
    flex-direction: column;
    padding: 0.5rem;
    gap: 0.5rem;
    overflow: hidden;
    box-sizing: border-box;
}

/* Main Grid Layout */
.kure-main-grid {
    display: grid;
    grid-template-columns: 40% 1fr;
    gap: 0.5rem;
    flex: 1;
    min-height: 0;
    overflow: hidden;
}

/* Body Panel (Left) */
.kure-body-panel {
    position: relative;
    display: flex;
    flex-direction: column;
    background: linear-gradient(180deg, rgba(15, 15, 25, 0.95) 0%, rgba(10, 10, 15, 0.98) 100%);
    border: 1px solid rgba(255, 255, 255, 0.08);
    border-radius: 0.75rem;
    padding: 0.875rem;
    overflow: hidden;
    min-height: 0;
    box-sizing: border-box;
}

.body-panel__header {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    margin-bottom: 0.5rem;
    flex-shrink: 0;
}

.body-panel__subject {
    display: flex;
    flex-direction: column;
    gap: 0.25rem;
}

.subject-label {
    font-size: 0.6875rem;
    font-weight: 600;
    letter-spacing: 0.1em;
    color: var(--brand-primary);
    text-transform: uppercase;
}

.subject-value {
    font-size: 1.75rem;
    font-weight: 700;
    color: #fff;
}

.reset-view-btn {
    padding: 0.5rem 1rem;
    background: rgba(255, 255, 255, 0.05);
    border: 1px solid rgba(255, 255, 255, 0.15);
    border-radius: 0.375rem;
    color: #94a3b8;
    font-size: 0.6875rem;
    font-weight: 600;
    letter-spacing: 0.08em;
    cursor: pointer;
    transition: all 0.2s ease;
}

.reset-view-btn:hover {
    background: rgba(255, 255, 255, 0.1);
    border-color: rgba(255, 255, 255, 0.25);
    color: #fff;
}

/* Body Map Container */
.body-map-fullscreen {
    flex: 1;
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 0;
    overflow: hidden;
}

.body-map-image-wrapper {
    position: relative;
    height: 100%;
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
}

.body-map-image--large {
    max-height: 100%;
    max-width: 100%;
    width: auto;
    height: 100%;
    object-fit: contain;
}

/* Bio Age Anchor */
.bio-age-anchor {
    position: absolute;
    bottom: 1.5rem;
    left: 1.5rem;
    display: flex;
    flex-direction: column;
    gap: 0.25rem;
    flex-shrink: 0;
}

.bio-age-anchor__label {
    font-size: 0.75rem;
    font-weight: 600;
    letter-spacing: 0.1em;
    color: #64748b;
    text-transform: uppercase;
}

.bio-age-anchor__value {
    font-size: 3.5rem;
    font-weight: 700;
    color: #fff;
    line-height: 1;
}

.bio-age-anchor__unit {
    font-size: 1.25rem;
    font-weight: 400;
    color: #64748b;
    margin-left: 0.25rem;
}

/* Overview Panel (Right) */
.kure-overview-panel {
    display: flex;
    flex-direction: column;
    overflow: hidden;
    min-height: 0;
    box-sizing: border-box;
}

.kure-overview-panel__inner {
    background: linear-gradient(180deg, rgba(15, 15, 25, 0.95) 0%, rgba(10, 10, 15, 0.98) 100%);
    border: 1px solid rgba(255, 255, 255, 0.08);
    border-radius: 0.75rem;
    padding: 1rem;
    display: flex;
    flex-direction: column;
    gap: 0.875rem;
    flex: 1;
    overflow-y: auto;
    min-height: 0;
    box-sizing: border-box;
}

.overview-header {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    flex-shrink: 0;
}

.overview-header__icon {
    width: 36px;
    height: 36px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: rgba(139, 92, 246, 0.1);
    flex-shrink: 0;
    border: 1px solid rgba(139, 92, 246, 0.3);
    border-radius: 0.5rem;
    color: var(--brand-primary);
}

.overview-header__icon svg {
    width: 18px;
    height: 18px;
}

.overview-header__title {
    font-size: 1.25rem;
    font-weight: 600;
    color: #fff;
    margin: 0;
}

/* Overview Metrics Grid - 4 columns */
.overview-metrics {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 0.5rem;
    flex-shrink: 0;
}

.metric-card {
    position: relative;
    background: rgba(0, 0, 0, 0.3);
    border: 1px solid rgba(255, 255, 255, 0.08);
    border-radius: 0.5rem;
    padding: 0.75rem;
    transition: all 0.2s ease;
}

.metric-card:hover {
    border-color: rgba(139, 92, 246, 0.3);
    box-shadow: 0 4px 20px rgba(139, 92, 246, 0.1);
}

.metric-card__indicator {
    position: absolute;
    top: 0.625rem;
    right: 0.625rem;
    width: 8px;
    height: 8px;
    border-radius: 50%;
}

.metric-card__indicator--neutral {
    background: #64748b;
}

.metric-card__indicator--success {
    background: #10b981;
    box-shadow: 0 0 8px #10b981;
}

.metric-card__indicator--warning {
    background: #f59e0b;
    box-shadow: 0 0 8px #f59e0b;
}

.metric-card__indicator--danger {
    background: #ef4444;
    box-shadow: 0 0 8px #ef4444;
}

.metric-card__label {
    font-size: 0.625rem;
    font-weight: 600;
    letter-spacing: 0.08em;
    color: #64748b;
    text-transform: uppercase;
    display: block;
    margin-bottom: 0.375rem;
}

.metric-card__value {
    display: flex;
    align-items: baseline;
    gap: 0.125rem;
}

.metric-value {
    font-size: 1.75rem;
    font-weight: 700;
    color: #fff;
    line-height: 1;
}

.metric-value--danger {
    color: #ef4444;
}

.metric-value--success {
    color: #10b981;
}

.metric-value--warning {
    color: #f59e0b;
}

.metric-unit {
    font-size: 1rem;
    color: #64748b;
    font-weight: 400;
}

/* Navigation Cards - Side by side */
.overview-nav-cards {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 0.5rem;
    flex-shrink: 0;
}

.nav-card {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 0.5rem;
    padding: 0.875rem;
    background: rgba(0, 0, 0, 0.3);
    border: 1px solid rgba(255, 255, 255, 0.08);
    border-radius: 0.5rem;
    cursor: pointer;
    transition: all 0.2s ease;
    text-align: left;
    position: relative;
}

.nav-card:hover {
    background: rgba(139, 92, 246, 0.1);
    border-color: rgba(139, 92, 246, 0.3);
}

.nav-card__icon {
    width: 36px;
    height: 36px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: rgba(139, 92, 246, 0.15);
    border-radius: 0.5rem;
    color: var(--brand-primary);
}

.nav-card__icon svg {
    width: 18px;
    height: 18px;
}

.nav-card__content {
    flex: 1;
}

.nav-card__title {
    font-size: 1rem;
    font-weight: 600;
    color: #fff;
    margin: 0 0 0.125rem;
}

.nav-card__desc {
    font-size: 0.75rem;
    color: #64748b;
    margin: 0;
    line-height: 1.4;
}

.nav-card__arrow {
    position: absolute;
    top: 0.875rem;
    right: 0.875rem;
    color: #64748b;
    transition: all 0.2s ease;
}

.nav-card__arrow svg {
    width: 18px;
    height: 18px;
    display: block;
}

.nav-card:hover .nav-card__arrow {
    color: var(--brand-primary);
    transform: translateX(4px);
}

/* Critical Findings */
.critical-findings {
    background: rgba(239, 68, 68, 0.05);
    border: 1px solid rgba(239, 68, 68, 0.2);
    border-radius: 0.5rem;
    padding: 0.875rem;
    flex: 1;
    min-height: 0;
    display: flex;
    flex-direction: column;
    overflow: hidden;
}

.critical-findings__header {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    font-size: 0.6875rem;
    font-weight: 600;
    letter-spacing: 0.1em;
    color: #ef4444;
    margin-bottom: 0.625rem;
    flex-shrink: 0;
}

.critical-findings__header svg {
    width: 16px;
    height: 16px;
}

.critical-findings__list {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
    overflow-y: auto;
    flex: 1;
    min-height: 0;
}

.finding-item {
    display: grid;
    grid-template-columns: auto 1fr auto;
    align-items: center;
    gap: 0.625rem;
    padding: 0.625rem 0.875rem;
    background: rgba(0, 0, 0, 0.3);
    border-radius: 0.375rem;
    border-left: 3px solid transparent;
    cursor: pointer;
    transition: all 0.2s ease;
    flex-shrink: 0;
}

.finding-item:hover {
    background: rgba(0, 0, 0, 0.5);
}

.finding-item--danger,
.finding-item--high {
    border-left-color: #ef4444;
}

.finding-item--warning,
.finding-item--moderate {
    border-left-color: #f59e0b;
}

.finding-item--info,
.finding-item--low {
    border-left-color: #3b82f6;
}

.finding-dot {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    flex-shrink: 0;
}

.finding-item--danger .finding-dot,
.finding-item--high .finding-dot {
    background: #ef4444;
    box-shadow: 0 0 8px #ef4444;
}

.finding-item--warning .finding-dot,
.finding-item--moderate .finding-dot {
    background: #f59e0b;
    box-shadow: 0 0 8px #f59e0b;
}

.finding-item--info .finding-dot,
.finding-item--low .finding-dot {
    background: #3b82f6;
    box-shadow: 0 0 8px #3b82f6;
}

.finding-content {
    flex: 1;
    min-width: 0;
}

.finding-title {
    font-size: 0.875rem;
    font-weight: 600;
    color: #fff;
    margin: 0 0 0.125rem;
    line-height: 1.3;
}

.finding-desc {
    font-size: 0.75rem;
    color: #94a3b8;
    margin: 0;
    line-height: 1.3;
}

.finding-desc:empty {
    display: none;
}

.finding-action {
    font-size: 0.625rem;
    font-weight: 600;
    letter-spacing: 0.05em;
    color: var(--brand-primary);
    background: rgba(139, 92, 246, 0.1);
    border: 1px solid rgba(139, 92, 246, 0.3);
    border-radius: 0.25rem;
    cursor: pointer;
    padding: 0.3125rem 0.5rem;
    white-space: nowrap;
    transition: all 0.2s ease;
}

.finding-action:hover {
    color: #fff;
    background: rgba(139, 92, 246, 0.2);
    border-color: rgba(139, 92, 246, 0.5);
}

/* System Info Panel - appears in body panel on node click */
.system-info-panel {
    display: none;
    position: absolute;
    bottom: 1.5rem;
    right: 1.5rem;
    left: 1.5rem;
    background: rgba(15, 15, 25, 0.98);
    border: 1px solid rgba(139, 92, 246, 0.4);
    border-radius: 0.75rem;
    padding: 1rem;
    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.6), 0 0 20px rgba(139, 92, 246, 0.2);
    z-index: 30;
    max-height: 50%;
    overflow-y: auto;
}

.system-info-panel--active {
    display: block;
    animation: slideUp 0.25s ease;
}

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

.system-info__header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 0.5rem;
    padding-bottom: 0.5rem;
    border-bottom: 1px solid rgba(255, 255, 255, 0.1);
}

.system-info__header h3 {
    font-size: 0.9375rem;
    font-weight: 600;
    color: #fff;
    margin: 0;
}

.system-status {
    font-size: 0.6875rem;
    font-weight: 600;
    letter-spacing: 0.05em;
    padding: 0.25rem 0.5rem;
    border-radius: 0.25rem;
}

.system-status--stable,
.system-status--good,
.system-status--normal {
    background: rgba(16, 185, 129, 0.2);
    color: #10b981;
}

.system-status--warning {
    background: rgba(245, 158, 11, 0.2);
    color: #f59e0b;
}

.system-status--alert,
.system-status--danger {
    background: rgba(239, 68, 68, 0.2);
    color: #ef4444;
}

.system-info__summary {
    font-size: 0.8125rem;
    color: #94a3b8;
    line-height: 1.4;
    margin: 0 0 0.75rem;
}

.system-info__metrics {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 0.5rem;
    margin-bottom: 0.75rem;
}

.info-panel-content .system-info__metrics {
    margin-top: 0.75rem;
}

.system-detail-panel [data-system-detail][hidden] {
    display: none !important;
}

.system-metric {
    background: rgba(0, 0, 0, 0.3);
    border-radius: 0.375rem;
    padding: 0.5rem 0.625rem;
    border-left: 3px solid transparent;
}

.system-metric--good {
    border-left-color: #10b981;
}

.system-metric--normal {
    border-left-color: #64748b;
}

.system-metric--warning {
    border-left-color: #f59e0b;
}

.system-metric--danger {
    border-left-color: #ef4444;
}

.system-metric__label {
    font-size: 0.625rem;
    color: #64748b;
    display: block;
    margin-bottom: 0.125rem;
    text-transform: uppercase;
    letter-spacing: 0.05em;
}

.system-metric__value {
    font-size: 1rem;
    font-weight: 600;
    color: #fff;
}

.system-metric__unit {
    font-size: 0.6875rem;
    color: #64748b;
    font-weight: 400;
    margin-left: 0.2em;
}

.system-info__action {
    width: 100%;
    padding: 0.5rem;
    background: rgba(139, 92, 246, 0.1);
    border: 1px solid rgba(139, 92, 246, 0.3);
    border-radius: 0.375rem;
    color: var(--brand-primary);
    font-size: 0.8125rem;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.2s ease;
}

.system-info__action:hover {
    background: rgba(139, 92, 246, 0.2);
    border-color: rgba(139, 92, 246, 0.5);
}

/* System Detail Panel - replaces overview when node clicked */
.system-detail-panel {
    display: none;
    background: linear-gradient(180deg, rgba(15, 15, 25, 0.95) 0%, rgba(10, 10, 15, 0.98) 100%);
    border: 1px solid rgba(255, 255, 255, 0.08);
    border-radius: 0.75rem;
    padding: 1rem;
    flex: 1;
    overflow-y: auto;
    min-height: 0;
}

.system-detail-panel--active {
    display: block;
    animation: fadeIn 0.25s ease;
}

.system-detail__header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 1rem;
    padding-bottom: 0.75rem;
    border-bottom: 1px solid rgba(255, 255, 255, 0.08);
}

.system-detail__title-group {
    display: flex;
    align-items: center;
    gap: 0.5rem;
}

.system-detail__icon {
    width: 32px;
    height: 32px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    border: 2px solid;
}

.system-detail__icon--stable { border-color: #10b981; color: #10b981; }
.system-detail__icon--warning { border-color: #f59e0b; color: #f59e0b; }
.system-detail__icon--alert { border-color: #ef4444; color: #ef4444; }

.system-detail__icon svg {
    width: 16px;
    height: 16px;
}

.system-detail__title {
    font-size: 1rem;
    font-weight: 600;
    color: #fff;
    margin: 0;
}

.system-detail__mode {
    font-size: 0.6875rem;
    font-weight: 600;
    letter-spacing: 0.08em;
    color: #64748b;
}

.system-detail__mode-dot {
    display: inline-block;
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: #10b981;
    margin-left: 0.5rem;
    animation: pulse-glow 2s ease-in-out infinite;
}

.system-detail__status {
    background: rgba(0, 0, 0, 0.3);
    border-radius: 0.375rem;
    padding: 0.75rem;
    margin-bottom: 1rem;
}

.system-detail__status-label {
    font-size: 0.5625rem;
    font-weight: 600;
    letter-spacing: 0.08em;
    color: var(--brand-primary);
    text-transform: uppercase;
    margin-bottom: 0.25rem;
}

.system-detail__status-title {
    font-size: 1.125rem;
    font-weight: 700;
    color: #fff;
    margin: 0 0 0.375rem;
}

.system-detail__status-desc {
    font-size: 0.75rem;
    color: #94a3b8;
    line-height: 1.4;
    margin: 0;
}

.system-detail__section {
    margin-bottom: 1rem;
}

.system-detail__section-header {
    display: flex;
    align-items: center;
    gap: 0.375rem;
    font-size: 0.625rem;
    font-weight: 600;
    letter-spacing: 0.08em;
    color: var(--brand-primary);
    text-transform: uppercase;
    margin-bottom: 0.5rem;
}

.system-detail__section-header svg {
    width: 14px;
    height: 14px;
}

/* AI Chat Bar - Full Width */
.ai-chat-bar {
    display: flex;
    align-items: center;
    gap: 0.625rem;
    padding: 0.5rem 1rem;
    background: rgba(15, 15, 25, 0.95);
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 2rem;
    flex-shrink: 0;
    width: 100%;
    box-sizing: border-box;
}

.ai-chat-bar__icon {
    width: 28px;
    height: 28px;
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--brand-primary);
    flex-shrink: 0;
}

.ai-chat-bar__icon svg {
    width: 18px;
    height: 18px;
}

.ai-chat-bar__input {
    flex: 1;
    background: none;
    border: none;
    color: #fff;
    font-size: 0.9375rem;
    outline: none;
    min-width: 0;
}

.ai-chat-bar__input::placeholder {
    color: #64748b;
}

.ai-chat-bar__btn {
    width: 32px;
    height: 32px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: none;
    border: none;
    color: #64748b;
    cursor: pointer;
    border-radius: 50%;
    transition: all 0.2s ease;
    flex-shrink: 0;
}

.ai-chat-bar__btn:hover {
    color: #fff;
    background: rgba(255, 255, 255, 0.1);
}

.ai-chat-bar__btn--send {
    background: var(--brand-primary);
    color: #fff;
}

.ai-chat-bar__btn--send:hover {
    background: var(--brand-accent);
}

.ai-chat-bar__btn svg {
    width: 16px;
    height: 16px;
}

/* AI Status Footer */
.ai-status-footer {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
    padding: 0.25rem;
    flex-shrink: 0;
}

.ai-status-footer__text {
    font-size: 0.6875rem;
    font-weight: 600;
    letter-spacing: 0.1em;
    color: var(--brand-primary);
    text-transform: uppercase;
}

.ai-status-footer__dot {
    width: 5px;
    height: 5px;
    border-radius: 50%;
    background: var(--brand-primary);
}

/* Reports Fullview */
.reports-fullview,
.insights-fullview {
    display: none;
    position: fixed;
    inset: 60px 0 0 0;
    background: var(--body-bg);
    z-index: 100;
    flex-direction: column;
    overflow: hidden;
}

.reports-fullview--active,
.insights-fullview--active {
    display: flex;
    animation: fadeIn 0.3s ease;
}

@keyframes fadeIn {
    from { opacity: 0; }
    to { opacity: 1; }
}

.reports-fullview__header,
.insights-fullview__header {
    display: flex;
    align-items: center;
    gap: 1.5rem;
    padding: 1rem 2rem;
    background: rgba(22, 22, 34, 0.35);
    border-bottom: 1px solid rgba(255, 255, 255, 0.14);
}

.back-btn {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.5rem 1rem;
    background: rgba(255, 255, 255, 0.05);
    border: 1px solid rgba(255, 255, 255, 0.2);
    border-radius: 0.375rem;
    color: #94a3b8;
    font-size: 0.8125rem;
    font-weight: 500;
    cursor: pointer;
    transition: all 0.2s ease;
}

.back-btn:hover {
    background: rgba(255, 255, 255, 0.1);
    border-color: rgba(255, 255, 255, 0.3);
    color: #fff;
}

.back-btn svg {
    width: 16px;
    height: 16px;
}

.reports-fullview__title,
.insights-fullview__title {
    font-size: 1.125rem;
    font-weight: 600;
    color: var(--foreground);
    margin: 0;
    flex: 1;
}

.reports-fullview__content,
.insights-fullview__content {
    flex: 1;
    overflow: auto;
    padding: 0;
}

/* Insights Deep View */
.insights-deep {
    padding: 2rem;
}

.insights-deep__grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 2rem;
}

.insights-section-title {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    font-size: 1rem;
    font-weight: 600;
    color: #fff;
    margin: 0 0 1rem;
}

.insights-section-title svg {
    width: 20px;
    height: 20px;
    color: var(--brand-primary);
}

.correlation-cards {
    display: flex;
    flex-direction: column;
    gap: 1rem;
}

.correlation-card {
    background: rgba(18, 18, 26, 0.5);
    border: 1px solid rgba(255, 255, 255, 0.14);
    border-radius: 0.75rem;
    padding: 1.25rem;
    border-left: 3px solid transparent;
}

.correlation-card--danger {
    border-left-color: #ef4444;
}

.correlation-card--warning {
    border-left-color: #f59e0b;
}

.correlation-card--info {
    border-left-color: #3b82f6;
}

.correlation-card__header {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    margin-bottom: 0.75rem;
}

.correlation-badge {
    font-size: 0.625rem;
    font-weight: 600;
    letter-spacing: 0.05em;
    padding: 0.25rem 0.5rem;
    border-radius: 0.25rem;
    background: rgba(255, 255, 255, 0.1);
    color: #94a3b8;
}

.correlation-card--danger .correlation-badge {
    background: rgba(239, 68, 68, 0.2);
    color: #ef4444;
}

.correlation-card--warning .correlation-badge {
    background: rgba(245, 158, 11, 0.2);
    color: #f59e0b;
}

.correlation-card__header h4 {
    font-size: 0.9375rem;
    font-weight: 600;
    color: #fff;
    margin: 0;
}

.correlation-card__desc {
    font-size: 0.8125rem;
    color: #94a3b8;
    line-height: 1.5;
    margin: 0 0 0.75rem;
}

.correlation-card__sources {
    display: flex;
    gap: 0.5rem;
}

.source-tag {
    font-size: 0.6875rem;
    padding: 0.25rem 0.5rem;
    background: rgba(139, 92, 246, 0.1);
    border: 1px solid rgba(139, 92, 246, 0.3);
    border-radius: 0.25rem;
    color: var(--brand-primary);
}

/* Integration Map */
.integration-map {
    position: relative;
    height: 200px;
    background: rgba(0, 0, 0, 0.2);
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 0.75rem;
    margin-bottom: 1rem;
}

.integration-node {
    position: absolute;
    padding: 0.5rem 0.75rem;
    background: rgba(139, 92, 246, 0.1);
    border: 1px solid rgba(139, 92, 246, 0.3);
    border-radius: 0.375rem;
    font-size: 0.6875rem;
    font-weight: 600;
    color: var(--brand-primary);
}

.integration-node--center {
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    background: var(--brand-primary);
    color: #fff;
}

.integration-node--prs { top: 10%; left: 20%; }
.integration-node--labs { top: 10%; right: 20%; }
.integration-node--methylation { top: 50%; left: 5%; }
.integration-node--proteomics { top: 50%; right: 5%; }
.integration-node--microbiome { bottom: 10%; left: 20%; }
.integration-node--wearables { bottom: 10%; right: 20%; }

/* Action List */
.action-list {
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
}

.action-item {
    display: flex;
    gap: 1rem;
    padding: 1rem;
    background: rgba(0, 0, 0, 0.3);
    border-radius: 0.5rem;
    border-left: 3px solid transparent;
}

.action-item--urgent {
    border-left-color: #ef4444;
}

.action-item--important {
    border-left-color: #f59e0b;
}

.action-item--routine {
    border-left-color: #64748b;
}

.action-number {
    width: 24px;
    height: 24px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: rgba(255, 255, 255, 0.1);
    border-radius: 50%;
    font-size: 0.75rem;
    font-weight: 600;
    color: #94a3b8;
    flex-shrink: 0;
}

.action-content h4 {
    font-size: 0.9375rem;
    font-weight: 600;
    color: #fff;
    margin: 0 0 0.25rem;
}

.action-content p {
    font-size: 0.8125rem;
    color: #94a3b8;
    margin: 0;
    line-height: 1.4;
}

/* Responsive adjustments for landing page */
@media (max-width: 1400px) {
    .overview-metrics {
        grid-template-columns: repeat(2, 1fr);
    }
}

@media (max-width: 1024px) {
    .kure-landing {
        height: auto;
        min-height: calc(100vh - 60px);
        overflow: auto;
    }

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

    .kure-body-panel {
        min-height: 400px;
    }

    .bio-age-anchor {
        position: static;
        margin-top: 1rem;
    }

    .insights-deep__grid {
        grid-template-columns: 1fr;
    }
}

@media (max-width: 640px) {
    .kure-landing {
        padding: 0.5rem;
    }

    .overview-metrics {
        grid-template-columns: 1fr;
    }

    .overview-nav-cards {
        grid-template-columns: 1fr;
    }
}

/* ============================================
   END KURE LANDING PAGE
   ============================================ */

body {
    font-family: 'Plus Jakarta Sans', 'Inter', 'Segoe UI', sans-serif;
    background: var(--body-bg);
    color: var(--body-color);
    min-height: 100vh;
    display: flex;
    flex-direction: column;
    -webkit-font-smoothing: antialiased;
    padding-top: 60px; /* Account for fixed header */
    position: relative;
}

/* Global Futuristic Background */
.global-background {
    position: fixed;
    inset: 0;
    pointer-events: none;
    z-index: -10;
    overflow: hidden;
}

.global-background__gradient {
    position: absolute;
    inset: 0;
    background: radial-gradient(circle at top, rgba(139, 92, 246, 0.12) 0%, transparent 50%),
                radial-gradient(circle at 20% 20%, rgba(139, 92, 246, 0.06) 0%, transparent 40%),
                radial-gradient(circle at 80% 80%, rgba(139, 92, 246, 0.04) 0%, transparent 40%);
}

.global-background__grid {
    /* Grid lines removed - cleaner black background */
    display: none;
}

.global-background__scanline {
    position: absolute;
    inset: 0;
    background: repeating-linear-gradient(0deg, transparent, transparent 2px, rgba(0, 0, 0, 0.03) 3px);
}

body.has-impersonation-banner {
    padding-top: 132px; /* Account for fixed header + impersonation banner */
}

a {
    color: var(--brand-primary);
    transition: color 0.2s ease;
}

a:hover,
a:focus {
    color: var(--brand-accent);
    text-decoration: none;
}

.site-header {
    background: rgba(18, 18, 28, 0.82);
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
    border-bottom: 1px solid var(--card-border);
    color: var(--foreground);
    padding: 1rem 0;
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.4);
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    z-index: 1000;
    overflow: visible;
    display: flex;
    flex-direction: column;
}

.site-header::after {
    content: "";
    position: absolute;
    inset: 0;
    background: radial-gradient(circle at top right, rgba(var(--brand-primary-rgb), 0.1), transparent 50%);
    pointer-events: none;
}

.site-header:has(.impersonation-banner) {
    padding-top: 0;
}

.impersonation-banner {
    background: linear-gradient(90deg, rgba(var(--warning-rgb), 0.15), rgba(var(--warning-rgb), 0.05));
    border-bottom: 1px solid rgba(var(--warning-rgb), 0.3);
    color: var(--warning);
    position: relative;
    z-index: 1;
    flex-shrink: 0;
}

.impersonation-banner__content {
    display: flex;
    align-items: center;
    gap: 1rem;
    padding: 1rem 0;
    min-height: 3rem;
}

.impersonation-banner__text {
    font-weight: 600;
    letter-spacing: 0.01em;
}

.impersonation-banner__form {
    margin-left: auto;
}

.impersonation-banner__button {
    background: rgba(var(--warning-rgb), 0.2);
    border: 1px solid rgba(var(--warning-rgb), 0.4);
    border-radius: 999px;
    color: var(--warning);
    cursor: pointer;
    font-weight: 600;
    padding: 0.5rem 1.2rem;
    font-size: 0.9rem;
    transition: background-color 0.2s ease, box-shadow 0.2s ease, color 0.2s ease;
    white-space: nowrap;
}

.impersonation-banner__button:hover,
.impersonation-banner__button:focus {
    background: rgba(var(--warning-rgb), 0.3);
    box-shadow: 0 0 15px rgba(var(--warning-rgb), 0.3);
    color: #fbbf24;
}

.site-header .container {
    position: relative;
    z-index: 1;
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 1.5rem;
}

.site-header .brand {
    display: inline-flex;
    align-items: center;
    gap: 0.85rem;
    padding: 0.35rem 0.85rem 0.35rem 0.35rem;
    border-radius: 1.25rem;
    font-weight: 700;
    font-size: 1.55rem;
    letter-spacing: 0.06em;
    color: var(--foreground);
    text-transform: none;
    text-decoration: none;
    line-height: 1;
    transition: transform 0.25s ease, box-shadow 0.25s ease;
}

.site-header .brand:hover,
.site-header .brand:focus-visible {
    text-decoration: none;
    transform: translateY(-1px);
    box-shadow: var(--shadow-glow);
}

.site-header .brand:focus-visible {
    outline: 2px solid var(--brand-primary);
    outline-offset: 2px;
}

.brand__mark {
    position: relative;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 2.4rem;
    height: 2.4rem;
    border-radius: 0.85rem;
    background: linear-gradient(140deg, var(--brand-primary), var(--brand-accent));
    box-shadow: 0 0 20px rgba(var(--brand-primary-rgb), 0.4);
    overflow: hidden;
    transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.brand__mark::before {
    content: "";
    position: absolute;
    inset: 0.2rem;
    border-radius: 0.7rem;
    border: 1px solid rgba(255, 255, 255, 0.3);
    opacity: 0.75;
}

.brand__mark::after {
    content: "";
    position: absolute;
    width: 0.65rem;
    height: 0.65rem;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.6);
    top: 0.55rem;
    right: 0.5rem;
    filter: blur(0.4px);
    opacity: 0.85;
}

.site-header .brand:hover .brand__mark,
.site-header .brand:focus-visible .brand__mark {
    transform: translateY(-1px) scale(1.03);
    box-shadow: var(--shadow-glow-intense);
}

.brand__initial {
    position: relative;
    font-family: 'Plus Jakarta Sans', "Inter", sans-serif;
    font-weight: 700;
    font-size: 1.2rem;
    letter-spacing: 0.12em;
    color: var(--foreground);
    text-transform: uppercase;
}

.brand__text {
    display: inline-block;
    color: inherit;
    letter-spacing: 0.12em;
    text-transform: none;
}

.brand__logo {
    height: 36px;
    width: auto;
    display: block;
}

.site-header__right {
    margin-left: auto;
    display: flex;
    align-items: center;
    gap: 1.75rem;
}

.site-nav {
    display: flex;
}

.site-nav__list {
    display: flex;
    flex-wrap: wrap;
    list-style: none;
    gap: 1rem;
    margin: 0;
    padding: 0;
}

.site-nav a {
    color: var(--foreground-muted);
    font-weight: 600;
    letter-spacing: 0.02em;
    padding: 0.45rem 0.75rem;
    border-radius: 999px;
    transition: background-color 0.2s ease, color 0.2s ease, box-shadow 0.2s ease;
}

.site-nav a:hover,
.site-nav a:focus {
    color: var(--foreground);
    background-color: rgba(var(--brand-primary-rgb), 0.2);
    box-shadow: var(--shadow-glow);
}

.account-actions {
    display: flex;
    align-items: center;
}

.auth-links {
    display: flex;
    gap: 0.75rem;
}

.auth-link {
    color: var(--foreground);
    font-weight: 600;
    padding: 0.45rem 0.9rem;
    border-radius: 999px;
    background: rgba(var(--brand-primary-rgb), 0.2);
    border: 1px solid rgba(var(--brand-primary-rgb), 0.3);
    transition: background-color 0.2s ease, color 0.2s ease, box-shadow 0.2s ease;
}

.auth-link:hover,
.auth-link:focus {
    background: rgba(var(--brand-primary-rgb), 0.3);
    color: var(--foreground);
    box-shadow: var(--shadow-glow);
}

.user-menu {
    position: relative;
}

.user-menu__summary {
    list-style: none;
    display: flex;
    align-items: center;
    gap: 0.6rem;
    padding: 0.4rem 0.65rem 0.4rem 0.4rem;
    border-radius: 999px;
    cursor: pointer;
    color: var(--foreground);
    background: var(--card-bg);
    backdrop-filter: blur(8px);
    border: 1px solid var(--card-border);
    font-weight: 600;
    transition: background 0.15s ease, border-color 0.15s ease, box-shadow 0.15s ease;
}

.user-menu__summary:hover {
    border-color: rgba(var(--brand-primary-rgb), 0.35);
    box-shadow: 0 0 0 3px rgba(var(--brand-primary-rgb), 0.08);
}

.user-menu__summary::-webkit-details-marker {
    display: none;
}

.user-menu__avatar {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 2rem;
    height: 2rem;
    border-radius: 50%;
    background: rgba(var(--brand-primary-rgb), 0.2);
    color: var(--brand-primary);
    font-weight: 700;
    font-size: 0.85rem;
    flex-shrink: 0;
}

.user-menu__identity {
    display: flex;
    flex-direction: column;
    gap: 0.05rem;
    min-width: 0;
}

.user-menu__email {
    color: var(--foreground);
    font-weight: 600;
    font-size: 0.85rem;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    max-width: 160px;
}

.user-menu__roles-inline {
    font-size: 0.7rem;
    color: var(--foreground-muted);
    font-weight: 500;
    letter-spacing: 0.01em;
}

.user-menu__chevron {
    flex-shrink: 0;
    color: var(--foreground-muted);
    transition: transform 0.2s ease;
}

.user-menu[open] .user-menu__chevron {
    transform: rotate(180deg);
}

.user-menu[open] .user-menu__summary {
    border-color: rgba(var(--brand-primary-rgb), 0.4);
    box-shadow: 0 0 0 3px rgba(var(--brand-primary-rgb), 0.1);
}

.user-menu__panel {
    position: absolute;
    top: calc(100% + 0.4rem);
    right: 0;
    width: min(240px, 90vw);
    background: rgba(15, 15, 25, 0.96);
    backdrop-filter: blur(16px);
    color: var(--foreground);
    border-radius: 0.75rem;
    border: 1px solid var(--card-border);
    box-shadow: var(--shadow-lg), 0 0 0 1px rgba(255, 255, 255, 0.04);
    padding: 0.35rem;
    display: none;
    text-align: left;
    z-index: 1000;
    animation: user-menu-in 0.15s ease;
}

@keyframes user-menu-in {
    from {
        opacity: 0;
        transform: translateY(-4px) scale(0.97);
    }
    to {
        opacity: 1;
        transform: translateY(0) scale(1);
    }
}

.user-menu[open] .user-menu__panel {
    display: grid;
}

.user-menu__section {
    display: grid;
    gap: 0.1rem;
}

.user-menu__divider {
    height: 1px;
    background: rgba(255, 255, 255, 0.08);
    margin: 0.25rem 0.5rem;
}

.user-menu__link {
    display: flex;
    align-items: center;
    gap: 0.6rem;
    font-weight: 500;
    font-size: 0.875rem;
    color: var(--foreground);
    padding: 0.55rem 0.7rem;
    border-radius: 0.5rem;
    text-decoration: none;
    transition: background 0.12s ease, color 0.12s ease;
}

.user-menu__form {
    margin: 0;
}

button.user-menu__link {
    width: 100%;
    border: 0;
    background: transparent;
    font: inherit;
    cursor: pointer;
    text-align: left;
}

.user-menu__link:hover,
.user-menu__link:focus-visible {
    background: rgba(255, 255, 255, 0.07);
    text-decoration: none;
}

.user-menu__link:focus-visible {
    outline: 2px solid var(--brand-primary);
    outline-offset: -2px;
}

.user-menu__icon {
    flex-shrink: 0;
    color: var(--foreground-muted);
}

.user-menu__link:hover .user-menu__icon {
    color: var(--foreground);
}

.user-menu__link--logout {
    color: var(--destructive);
}

.user-menu__link--logout .user-menu__icon {
    color: rgba(var(--destructive-rgb), 0.7);
}

.user-menu__link--logout:hover {
    background: rgba(var(--destructive-rgb), 0.1);
}

.user-menu__link--logout:hover .user-menu__icon {
    color: var(--destructive);
}

.user-menu__link--stop-impersonation {
    color: var(--warning);
}

.user-menu__link--stop-impersonation .user-menu__icon {
    color: var(--warning);
}

.flash-container {
    display: grid;
    gap: 0.75rem;
    margin-bottom: 1.5rem;
}

.flash-message {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    padding: 0.85rem 1rem;
    border-radius: var(--radius);
    font-weight: 600;
    backdrop-filter: blur(8px);
    border: 1px solid var(--card-border);
}

.flash-message__text {
    flex: 1;
}

.flash-message__close {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 2rem;
    height: 2rem;
    border: none;
    border-radius: 999px;
    background: transparent;
    color: inherit;
    font-size: 1.5rem;
    line-height: 1;
    cursor: pointer;
    transition: background 0.2s ease, color 0.2s ease;
}

.flash-message__close:hover,
.flash-message__close:focus {
    background: rgba(255, 255, 255, 0.35);
    color: rgba(var(--brand-secondary-rgb), 0.8);
}

.flash-message__close:focus-visible {
    outline: 2px solid rgba(var(--brand-secondary-rgb), 0.6);
    outline-offset: 2px;
}

.flash-message--success {
    background: rgba(var(--success-rgb), 0.15);
    border-color: rgba(var(--success-rgb), 0.3);
    color: var(--success);
}

.flash-message--error {
    background: rgba(var(--destructive-rgb), 0.15);
    border-color: rgba(var(--destructive-rgb), 0.3);
    color: var(--destructive);
}

.flash-message--warning {
    background: rgba(var(--warning-rgb), 0.15);
    border-color: rgba(var(--warning-rgb), 0.3);
    color: var(--warning);
}

.flash-message--info {
    background: rgba(var(--info-rgb), 0.15);
    border-color: rgba(var(--info-rgb), 0.3);
    color: var(--info);
}

.site-content {
    flex: 1;
    padding: 4rem 0 3rem;
    background: transparent;
    min-width: 0;
}

.site-content .container {
    max-width: 960px;
    min-width: 0;
}

.site-content h1 {
    font-weight: 700;
    font-size: 2.5rem;
    color: var(--foreground);
    margin-bottom: 1.5rem;
}

.auth-status {
    font-size: 1.15rem;
    line-height: 1.6;
}

.role-list {
    margin-bottom: 1rem;
    font-size: 1rem;
    color: var(--foreground-muted);
}

.role-list .role {
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;
    padding: 0.25rem 0.6rem;
    border-radius: 999px;
    background: rgba(var(--brand-primary-rgb), 0.2);
    color: var(--brand-primary);
    font-weight: 600;
    border: 1px solid rgba(var(--brand-primary-rgb), 0.3);
}

.customer-dashboard {
    margin-top: 2rem;
    display: grid;
    gap: 2.5rem;
}

.customer-dashboard__hero {
    position: relative;
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    gap: 2.5rem;
    padding: 2.75rem 3rem;
    border-radius: var(--radius-xl);
    background: var(--card-bg);
    backdrop-filter: blur(12px);
    border: 1px solid var(--card-border);
    color: var(--foreground);
    box-shadow: var(--shadow-lg);
    overflow: hidden;
}

.customer-dashboard__hero::after {
    content: "";
    position: absolute;
    inset: 0;
    background: radial-gradient(circle at 20% 20%, rgba(var(--brand-primary-rgb), 0.15), transparent 50%),
                radial-gradient(circle at 80% 80%, rgba(var(--brand-accent-rgb), 0.1), transparent 50%);
    pointer-events: none;
}

.customer-dashboard__intro {
    position: relative;
    max-width: 32rem;
    z-index: 1;
}

.customer-dashboard__eyebrow {
    font-size: 0.85rem;
    letter-spacing: 0.2em;
    text-transform: uppercase;
    margin-bottom: 0.75rem;
    display: inline-block;
    font-weight: 600;
    opacity: 0.85;
}

.customer-dashboard__title {
    font-size: clamp(2.25rem, 4vw, 3.25rem);
    font-weight: 700;
    margin-bottom: 0.75rem;
    line-height: 1.05;
}

.customer-dashboard__subtitle {
    font-size: 1.1rem;
    margin: 0;
    color: var(--foreground-muted);
}

.customer-dashboard__stats {
    position: relative;
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(12rem, 1fr));
    gap: 1.25rem;
    margin: 0;
    padding: 1.75rem 2rem;
    border-radius: var(--radius-lg);
    background: rgba(255, 255, 255, 0.05);
    border: 1px solid var(--card-border);
    z-index: 1;
}

.customer-dashboard__stat {
    padding: 0.75rem 1rem;
    border-radius: var(--radius);
    background: rgba(var(--brand-primary-rgb), 0.1);
    border: 1px solid rgba(var(--brand-primary-rgb), 0.2);
}

.customer-dashboard__stat dt {
    font-size: 0.85rem;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    margin-bottom: 0.35rem;
    opacity: 0.75;
}

.customer-dashboard__stat dd {
    margin: 0;
    font-size: 1.35rem;
    font-weight: 700;
}

.customer-dashboard__stat--subtle dd {
    font-size: 1.05rem;
    font-weight: 500;
    opacity: 0.85;
}

.customer-dashboard__empty {
    padding: 1.5rem 2rem;
    border-radius: var(--radius-lg);
    background: rgba(var(--brand-primary-rgb), 0.1);
    color: var(--foreground-muted);
    font-weight: 500;
    border: 1px solid rgba(var(--brand-primary-rgb), 0.2);
}

.license-capacity-banner {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1.5rem;
    padding: 1.4rem 1.75rem;
    border: 1px solid rgba(var(--success-rgb), 0.35);
    border-radius: var(--radius-lg);
    background: rgba(var(--success-rgb), 0.09);
}

.license-capacity-banner--grace {
    border-color: rgba(var(--warning-rgb), 0.45);
    background: rgba(var(--warning-rgb), 0.1);
}

.license-capacity-banner--blocked {
    border-color: rgba(var(--destructive-rgb), 0.45);
    background: rgba(var(--destructive-rgb), 0.1);
}

.license-capacity-banner__eyebrow,
.license-management__eyebrow {
    margin: 0 0 0.35rem;
    color: var(--foreground-muted);
    font-size: 0.75rem;
    font-weight: 700;
    letter-spacing: 0.12em;
    text-transform: uppercase;
}

.license-capacity-banner__title {
    margin: 0;
    font-size: 1.2rem;
}

.license-capacity-banner__copy {
    margin: 0.35rem 0 0;
    color: var(--foreground-muted);
}

.license-management {
    display: grid;
    gap: 2rem;
    margin: 2rem 0 4rem;
}

.license-management__header {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 2rem;
    padding: 2.25rem;
    border: 1px solid var(--card-border);
    border-radius: var(--radius-xl);
    background: var(--card-bg);
    box-shadow: var(--shadow-lg);
}

.license-management__header h1,
.license-management__header p,
.license-management__section h2 {
    margin-top: 0;
}

.license-management__panel,
.license-pool-card,
.license-management__section {
    padding: 1.5rem;
    border: 1px solid var(--card-border);
    border-radius: var(--radius-lg);
    background: var(--card-bg);
}

.license-management__panel > summary,
.license-pool-card__assign > summary {
    cursor: pointer;
    font-weight: 700;
}

.license-form {
    display: grid;
    gap: 1rem;
    margin-top: 1.25rem;
}

.license-form__grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(13rem, 1fr));
    gap: 1rem;
}

.license-form__grid--compact {
    grid-template-columns: repeat(auto-fit, minmax(10rem, 1fr));
}

.license-form label {
    display: grid;
    gap: 0.4rem;
    color: var(--foreground-muted);
    font-size: 0.85rem;
    font-weight: 600;
}

.license-form input,
.license-form select {
    width: 100%;
    padding: 0.65rem 0.75rem;
    border: 1px solid var(--card-border);
    border-radius: var(--radius-sm);
    background: var(--background);
    color: var(--foreground);
}

.license-pool-grid {
    display: grid;
    gap: 1.5rem;
}

.license-pool-card__header {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 1rem;
}

.license-pool-card__header h3,
.license-pool-card__header p {
    margin: 0;
}

.license-pool-card__buyer {
    color: var(--brand-accent);
    font-weight: 700;
}

.license-pool-card__actions {
    display: flex;
    align-items: center;
    gap: 0.75rem;
}

.license-pool-card__term {
    padding: 0.3rem 0.65rem;
    border: 1px solid rgba(var(--brand-primary-rgb), 0.35);
    border-radius: 999px;
    background: rgba(var(--brand-primary-rgb), 0.12);
    white-space: nowrap;
}

.license-pool-card__stats {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(7rem, 1fr));
    gap: 0.75rem;
    margin: 1.25rem 0;
}

.license-pool-card__stats div {
    padding: 0.8rem;
    border-radius: var(--radius-sm);
    background: var(--surface-sunken);
}

.license-pool-card__stats dt {
    color: var(--foreground-muted);
    font-size: 0.72rem;
    letter-spacing: 0.06em;
    text-transform: uppercase;
}

.license-pool-card__stats dd {
    margin: 0.25rem 0 0;
    font-size: 1.35rem;
    font-weight: 700;
}

.license-pool-card__window,
.license-management__empty {
    color: var(--foreground-muted);
}

.license-pool-card__assign {
    margin: 1rem 0;
    padding: 1rem;
    border: 1px solid var(--card-border);
    border-radius: var(--radius);
}

@media (max-width: 720px) {
    .license-management__header,
    .license-capacity-banner,
    .license-pool-card__header {
        align-items: stretch;
        flex-direction: column;
    }
}

.customer-kit-order {
    padding: 1.25rem 1.75rem;
    border-radius: var(--radius-lg);
    background: var(--card-bg);
    backdrop-filter: blur(12px);
    border: 1px solid var(--card-border);
    box-shadow: var(--shadow-md);
}

.customer-kit-order__copy {
    margin: 0;
    color: var(--foreground);
    line-height: 1.5;
}

.customer-kit-order__link {
    font-weight: 600;
    color: var(--brand-primary);
    word-break: break-all;
}

.customer-dashboard__sections {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(18rem, 1fr));
    gap: 1.75rem;
}

.customer-section-card {
    position: relative;
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
    padding: 2rem 2.25rem;
    border-radius: var(--radius-xl);
    background: var(--card-bg);
    backdrop-filter: blur(12px);
    border: 1px solid var(--card-border);
    box-shadow: var(--shadow-md);
    color: var(--foreground);
    text-decoration: none;
    transition: transform 0.25s ease, box-shadow 0.25s ease, border-color 0.25s ease;
    min-height: 15rem;
}

.customer-section-card:hover,
.customer-section-card:focus-visible {
    transform: translateY(-4px);
    box-shadow: var(--shadow-glow);
    border-color: var(--card-hover-border);
    text-decoration: none;
}

.customer-section-card:focus-visible {
    outline: 2px solid var(--brand-primary);
    outline-offset: 2px;
}

.customer-section-card__icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 3.25rem;
    height: 3.25rem;
}

.customer-section-card__icon img {
    width: 100%;
    height: 100%;
}

.customer-section-card__eyebrow {
    font-size: 0.8rem;
    letter-spacing: 0.18em;
    text-transform: uppercase;
    color: var(--foreground-muted);
    font-weight: 600;
}

.customer-section-card__title {
    font-size: 1.6rem;
    font-weight: 700;
    margin: 0;
    color: var(--foreground);
}

.customer-section-card__body {
    margin: 0;
    color: var(--foreground-muted);
    line-height: 1.55;
}

.customer-section-card__meta {
    margin-top: auto;
    font-size: 0.9rem;
    color: var(--foreground-muted);
}

.customer-section-card__cta {
    font-weight: 600;
    color: var(--brand-primary);
    margin-top: 0.25rem;
}

.customer-page {
    margin-top: 2rem;
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    gap: 2rem;
    min-width: 0;
}

.customer-page__header {
    background: var(--card-bg);
    backdrop-filter: blur(12px);
    border: 1px solid var(--card-border);
    border-radius: var(--radius-xl);
    padding: 2.25rem 2.5rem;
    box-shadow: var(--shadow-md);
    display: grid;
    gap: 0.75rem;
}

.customer-page__back {
    font-weight: 600;
    color: var(--foreground-muted);
    text-decoration: none;
}

.customer-page__back:hover,
.customer-page__back:focus {
    color: var(--brand-primary);
    text-decoration: none;
}

.customer-page__title {
    font-size: 2.25rem;
    font-weight: 700;
    margin: 0;
    color: var(--foreground);
}

.customer-page__lead {
    margin: 0;
    font-size: 1.1rem;
    color: var(--foreground-muted);
    max-width: 48rem;
}

.customer-page__alert {
    padding: 1.25rem 1.5rem;
    border-radius: var(--radius);
    background: rgba(var(--warning-rgb), 0.1);
    color: var(--warning);
    border: 1px solid rgba(var(--warning-rgb), 0.3);
}

.customer-page__summary {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(min(12rem, 100%), 1fr));
    gap: 1.25rem;
}

.customer-page__tabs {
    display: flex;
    gap: 0.5rem;
    flex-wrap: wrap;
    background: var(--card-bg);
    backdrop-filter: blur(8px);
    border: 1px solid var(--card-border);
    border-radius: var(--radius-lg);
    padding: 0.35rem;
    align-self: flex-start;
}

.customer-page__tab {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 0.6rem 1.4rem;
    border-radius: var(--radius);
    font-weight: 600;
    font-size: 0.95rem;
    color: var(--foreground-muted);
    text-decoration: none;
    transition: background-color 0.2s ease, color 0.2s ease, box-shadow 0.2s ease;
}

.customer-page__tab:hover,
.customer-page__tab:focus {
    color: var(--foreground);
    background: rgba(var(--brand-primary-rgb), 0.15);
    text-decoration: none;
}

.customer-page__tab--active {
    background: rgba(var(--brand-primary-rgb), 0.2);
    color: var(--brand-primary);
    border: 1px solid rgba(var(--brand-primary-rgb), 0.3);
    box-shadow: var(--shadow-glow);
    pointer-events: none;
}

.customer-discover-insights {
    background: var(--card-bg);
    backdrop-filter: blur(12px);
    border: 1px solid var(--card-border);
    border-radius: var(--radius-xl);
    padding: 2rem;
    box-shadow: var(--shadow-md);
    display: grid;
    gap: 1.5rem;
}

.customer-discover-insights__header {
    display: grid;
    gap: 0.5rem;
    max-width: 46rem;
}

.customer-discover-insights__header h2 {
    margin: 0;
    font-size: 1.6rem;
    font-weight: 700;
    color: var(--foreground);
}

.customer-discover-insights__header p {
    margin: 0;
    color: var(--foreground-muted);
    font-size: 1rem;
}

.customer-page__stat {
    background: var(--card-bg);
    backdrop-filter: blur(8px);
    border: 1px solid var(--card-border);
    border-radius: var(--radius);
    padding: 1.25rem 1.5rem;
}

.customer-page__stat-label {
    display: block;
    font-size: 0.85rem;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    margin-bottom: 0.4rem;
    color: var(--foreground-muted);
}

.customer-page__stat-value {
    font-size: 1.5rem;
    font-weight: 700;
    color: var(--foreground);
}

.customer-page__empty {
    padding: 1.5rem 2rem;
    border-radius: var(--radius-lg);
    background: rgba(var(--brand-primary-rgb), 0.1);
    color: var(--foreground-muted);
    font-weight: 500;
    border: 1px solid rgba(var(--brand-primary-rgb), 0.2);
}

.cta-links a {
    font-weight: 600;
    display: inline-block;
    margin: 0.25rem 0.5rem 0.25rem 0;
    padding: 0.45rem 0.85rem;
    border-radius: 999px;
    background: rgba(var(--brand-primary-rgb), 0.18);
    transition: background-color 0.2s ease, transform 0.2s ease;
}

.cta-links a:hover,
.cta-links a:focus {
    background: rgba(var(--brand-accent-rgb), 0.45);
    transform: translateY(-2px);
}

.operations-widget {
    margin-top: 3rem;
    background: var(--card-bg);
    backdrop-filter: blur(12px);
    border: 1px solid var(--card-border);
    border-radius: var(--radius-lg);
    padding: 2rem;
    box-shadow: var(--shadow-md);
    display: grid;
    gap: 1.75rem;
}

.operations-widget__header {
    display: grid;
    gap: 0.5rem;
}

.operations-widget__header h1,
.operations-widget__header h2 {
    font-weight: 700;
    margin: 0;
    color: var(--foreground);
}

.operations-widget__header p {
    margin: 0;
    color: var(--foreground-muted);
}

.operations-widget__metrics {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
    gap: 1.5rem;
}

.operations-widget__metric {
    background: rgba(var(--brand-primary-rgb), 0.1);
    border: 1px solid rgba(var(--brand-primary-rgb), 0.2);
    border-radius: var(--radius);
    padding: 1.5rem;
    display: grid;
    gap: 0.75rem;
}

.operations-widget__actions {
    border-top: 1px solid var(--card-border);
    padding-top: 1.25rem;
    display: grid;
    gap: 0.75rem;
}

.operations-widget__actions .btn {
    justify-self: start;
}

.operations-widget__hint {
    margin: 0;
    color: var(--foreground-muted);
    font-size: 0.95rem;
}

.population-report {
    max-width: 640px;
    margin: 3rem auto;
    background: var(--card-bg);
    backdrop-filter: blur(12px);
    border: 1px solid var(--card-border);
    border-radius: var(--radius-lg);
    padding: 2rem;
    box-shadow: var(--shadow-md);
    display: grid;
    gap: 1.5rem;
}

.population-report__header h1 {
    margin: 0 0 0.5rem;
    font-weight: 700;
    color: var(--foreground);
}

.population-report__header p {
    margin: 0;
    color: var(--foreground-muted);
}

.population-report__form {
    display: grid;
    gap: 1rem;
}

.population-report__help {
    margin: 0;
    font-size: 0.95rem;
    color: var(--foreground-muted);
}

.population-report__empty {
    margin: 0;
    padding: 1rem;
    border-radius: var(--radius);
    background: rgba(255, 255, 255, 0.05);
    color: var(--foreground-muted);
}

.population-report__note {
    margin: 0;
    font-size: 0.9rem;
    color: var(--foreground-muted);
}

.operations-widget__metric dt {
    font-size: 0.95rem;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    color: var(--foreground-muted);
    margin: 0;
}

.operations-widget__value {
    font-size: 2.5rem;
    font-weight: 700;
    color: var(--foreground);
    margin: 0;
    line-height: 1.1;
}

.operations-widget__description {
    margin: 0;
    font-size: 0.95rem;
    color: var(--foreground-muted);
}

.operations-widget__value a {
    color: inherit;
    text-decoration: none;
}

.operations-widget__value a:hover,
.operations-widget__value a:focus {
    text-decoration: underline;
    text-underline-offset: 0.15em;
}

.manage-users {
    margin-top: 3rem;
    background: var(--card-bg);
    backdrop-filter: blur(12px);
    border: 1px solid var(--card-border);
    border-radius: var(--radius-lg);
    padding: 2.25rem;
    box-shadow: var(--shadow-md);
}

.manage-users__header {
    margin-bottom: 1.75rem;
}

.manage-users__header--with-actions::after {
    content: "";
    display: block;
    clear: both;
}

.manage-users__header-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 0.75rem;
    float: right;
    margin: 0 0 1rem 1rem;
}

.manage-users__header h1,
.manage-users__header h2 {
    font-weight: 700;
    margin-bottom: 0.5rem;
    color: var(--foreground);
}

.manage-users__grid {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    gap: 1.5rem;
    margin-bottom: 2rem;
}

.manage-orders__hint {
    display: flex;
    align-items: baseline;
    flex-wrap: wrap;
    gap: 0.5rem 0.75rem;
    margin: 0 0 1.25rem;
    padding: 0.625rem 1.125rem;
    background: rgba(var(--brand-primary-rgb), 0.1);
    border: 1px solid rgba(var(--brand-primary-rgb), 0.2);
    border-radius: 999px;
    color: var(--foreground);
    font-size: 0.9rem;
    line-height: 1.4;
}

.manage-orders__hint-title {
    font-weight: 600;
}

.manage-orders__hint-text {
    color: var(--muted-foreground, var(--foreground));
    opacity: 0.85;
}

.manage-users__card {
    background: rgba(var(--brand-primary-rgb), 0.1);
    border: 1px solid rgba(var(--brand-primary-rgb), 0.2);
    border-radius: var(--radius);
    padding: 1.5rem;
    display: grid;
    gap: 1rem;
}

.manage-users__card h3 {
    margin: 0;
    font-weight: 600;
    color: var(--foreground);
}

.manage-users__form {
    display: grid;
    gap: 1rem;
}

.manage-users__form--reset {
    border-top: 1px solid var(--card-border);
    padding-top: 1rem;
}

.form-field {
    display: grid;
    gap: 0.35rem;
}

.form-field label,
.form-field legend {
    font-weight: 600;
    color: var(--foreground);
}

.form-field input[type="email"],
.form-field input[type="password"],
.form-field input[type="text"],
.form-field input[type="search"],
.form-field input[type="datetime-local"] {
    border-radius: var(--radius);
    border: 1px solid var(--card-border);
    padding: 0.6rem 0.75rem;
    background: rgba(255, 255, 255, 0.05);
    color: var(--foreground);
    transition: border-color 0.2s ease, box-shadow 0.2s ease;
}

.form-field input[type="email"]:focus,
.form-field input[type="password"]:focus,
.form-field input[type="text"]:focus,
.form-field input[type="search"]:focus,
.form-field input[type="datetime-local"]:focus {
    outline: none;
    border-color: var(--brand-primary);
    box-shadow: 0 0 0 3px rgba(var(--brand-primary-rgb), 0.2);
}

.form-field input::placeholder {
    color: var(--foreground-muted);
}

.form-field select {
    border-radius: var(--radius);
    border: 1px solid var(--card-border);
    padding: 0.6rem 0.75rem;
    background-color: rgba(255, 255, 255, 0.05);
    color: var(--foreground);
}

.form-field select:focus {
    outline: none;
    border-color: var(--brand-primary);
    box-shadow: 0 0 0 3px rgba(var(--brand-primary-rgb), 0.2);
}

.form-help {
    font-size: 0.85rem;
    color: var(--foreground-muted);
    margin: 0;
}

.form-field--inline {
    align-items: center;
}

.role-checkboxes {
    display: grid;
    gap: 0.35rem;
}

.role-checkboxes label {
    display: inline-flex;
    gap: 0.5rem;
    align-items: center;
}

.toggle {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    cursor: pointer;
}

.badge {
    display: inline-block;
    padding: 0.25rem 0.6rem;
    border-radius: 999px;
    background: rgba(var(--brand-primary-rgb), 0.2);
    color: var(--brand-primary);
    font-weight: 600;
    font-size: 0.85rem;
    border: 1px solid rgba(var(--brand-primary-rgb), 0.3);
}

.manage-users__table .badge {
    max-width: 100%;
    white-space: normal;
    overflow-wrap: anywhere;
    text-align: center;
}

.manage-customers .user-ident__email {
    overflow-wrap: anywhere;
}

.manage-customers {
    margin-top: 3rem;
}

.report-generations {
    margin-top: 3rem;
}

.ai-usage {
    margin-top: 3rem;
}

.ai-usage__filters {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(14rem, 1fr));
    gap: 1rem 1.25rem;
    align-items: end;
    margin-bottom: 1.75rem;
    padding: 1.25rem 1.5rem;
    border-radius: var(--radius-xl);
    background: var(--card-bg);
    border: 1px solid var(--card-border);
    box-shadow: var(--shadow-md);
}

.ai-usage__filter-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 0.75rem;
    align-items: center;
}

.ai-usage__metrics {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(9rem, 1fr));
    gap: 1rem;
    margin: 0 0 1.75rem;
}

.ai-usage__metric {
    padding: 1rem 1.15rem;
    border-radius: var(--radius-lg);
    background: var(--card-bg);
    border: 1px solid var(--card-border);
}

.ai-usage__metric dt {
    margin: 0;
    font-size: 0.8rem;
    font-weight: 600;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    color: var(--foreground-muted);
}

.ai-usage__metric dd {
    margin: 0.35rem 0 0;
    font-size: 1.25rem;
    font-weight: 700;
    color: var(--foreground);
}

.ai-usage__table {
    margin-top: 1.75rem;
}

.ai-usage__table-title {
    margin: 0 0 0.75rem;
    font-size: 1rem;
    font-weight: 650;
}

.profile-roster {
    margin-top: 3rem;
}

.profile-roster__filters {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(14rem, 1fr));
    gap: 1rem 1.25rem;
    align-items: end;
    margin-bottom: 1.75rem;
    padding: 1.25rem 1.5rem;
    border-radius: var(--radius-xl);
    background: var(--card-bg);
    border: 1px solid var(--card-border);
}

.profile-roster__filter-actions,
.profile-roster__exports {
    display: flex;
    flex-wrap: wrap;
    gap: 0.75rem;
    align-items: end;
    margin-bottom: 1.5rem;
}

.profile-roster__invoice {
    display: flex;
    flex-wrap: wrap;
    gap: 0.75rem;
    align-items: end;
}

.profile-ended-banner {
    margin: 0 0 1.25rem;
    padding: 0.9rem 1.15rem;
    border-radius: var(--radius-lg);
    border: 1px solid var(--card-border);
    background: var(--card-bg);
}

.profile-ended-banner p {
    margin: 0;
}

.report-generations__search {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
    margin-bottom: 1rem;
}

.report-generations__search label {
    font-weight: 600;
    color: var(--foreground);
}

.report-generations__search input[type="search"] {
    max-width: 320px;
}

.report-generations__table {
    margin-top: 1.5rem;
}

.report-generations__customer {
    display: grid;
    gap: 0.25rem;
}

.report-generations__customer-name {
    font-weight: 600;
    color: var(--foreground);
}

.report-generations__customer-id {
    color: rgba(var(--brand-secondary-rgb), 0.6);
    font-size: 0.85rem;
}

.manage-users__table table {
    width: 100%;
    border-collapse: collapse;
    background: rgba(255, 255, 255, 0.02);
    border-radius: var(--radius);
    overflow: hidden;
}

.manage-users__table th,
.manage-users__table td {
    padding: 0.95rem 1.1rem;
    border-bottom: 1px solid var(--card-border);
    vertical-align: middle;
}

.manage-users__table thead th {
    font-weight: 700;
    color: var(--foreground);
    background: rgba(var(--brand-primary-rgb), 0.15);
}

.manage-users__table tbody tr:last-child td {
    border-bottom: none;
}

.manage-users__table tbody tr:hover {
    background: rgba(255, 255, 255, 0.03);
}

.manage-users__table tbody tr.is-active {
    background: rgba(var(--brand-primary-rgb), 0.15);
}

.user-ident {
    display: grid;
    gap: 0.25rem;
}

.user-ident__email {
    font-weight: 600;
    color: var(--foreground);
}

.user-ident__id {
    color: var(--foreground-muted);
}

.admin-config__category {
    margin: 1.75rem 0 0.75rem;
    text-transform: capitalize;
    font-size: 1.05rem;
    font-weight: 700;
    color: var(--foreground);
}

.manage-patients {
    margin-top: 2.5rem;
    background: var(--card-bg);
    backdrop-filter: blur(12px);
    border: 1px solid var(--card-border);
    border-radius: var(--radius-lg);
    padding: 2rem;
    box-shadow: var(--shadow-md);
    min-width: 0;
}

.manage-patients__header {
    margin-bottom: 1.5rem;
}

.manage-patients__header h2 {
    margin: 0 0 0.35rem;
    font-weight: 700;
    color: var(--foreground);
}

.manage-patients__upload {
    display: grid;
    gap: 1rem;
    margin-bottom: 2rem;
    padding: 1.25rem;
    border: 1px dashed rgba(var(--brand-primary-rgb), 0.4);
    border-radius: var(--radius);
    background: rgba(var(--brand-primary-rgb), 0.1);
    min-width: 0;
}

.manage-patients__upload .form-field {
    min-width: 0;
    margin: 0;
}

.manage-patients__upload-controls {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.75rem;
}

.manage-patients__upload-controls input[type="file"] {
    flex: 1 1 12rem;
    min-width: 0;
    max-width: 100%;
}

.manage-patients__upload-controls .btn {
    flex: 0 0 auto;
}

.manage-patients__upload-controls .btn-link {
    color: var(--brand-accent);
    text-decoration: underline;
    padding-inline: 0.25rem;
}

.manage-patients__upload .form-help {
    overflow-wrap: anywhere;
}

.manage-patients__grid {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    gap: 1.5rem;
    margin-bottom: 2rem;
}

.manage-patients__card {
    background: rgba(var(--brand-primary-rgb), 0.1);
    border: 1px solid rgba(var(--brand-primary-rgb), 0.2);
    border-radius: var(--radius);
    padding: 1.5rem;
    display: grid;
    gap: 1rem;
}

.manage-patients__card h3 {
    margin: 0;
    font-weight: 600;
    color: var(--foreground);
}

.manage-patients__form {
    display: grid;
    gap: 1rem;
}

.manage-patients__table {
    min-width: 0;
    border-radius: var(--radius);
}

.manage-patients__table table {
    width: 100%;
    border-collapse: collapse;
    background: rgba(255, 255, 255, 0.02);
    table-layout: auto;
}

.manage-patients__table th,
.manage-patients__table td {
    padding: 0.9rem 1.05rem;
    border-bottom: 1px solid var(--card-border);
    vertical-align: middle;
    overflow-wrap: anywhere;
}

.manage-patients__table thead th {
    font-weight: 700;
    color: var(--foreground);
    background: rgba(var(--brand-primary-rgb), 0.15);
}

.manage-patients__table tbody tr:last-child td {
    border-bottom: none;
}

.manage-patients__table tbody tr:hover {
    background: rgba(255, 255, 255, 0.03);
}

.manage-patients__table tbody tr.is-active {
    background: rgba(var(--brand-primary-rgb), 0.15);
}

.manage-patients__table tbody tr:has(.row-menu[open]) {
    position: relative;
    z-index: 3;
}

.manage-patients__actions {
    width: 1%;
    white-space: nowrap;
    overflow: visible;
    text-align: right;
    vertical-align: middle;
}

.patient-ident {
    display: grid;
    gap: 0.25rem;
}

.patient-ident__name {
    font-weight: 600;
    color: var(--foreground);
}

.patient-ident__id {
    color: var(--foreground-muted);
}

@media (max-width: 720px) {
    .customer-page__header,
    .manage-patients {
        padding: 1.25rem;
    }

    .customer-page__title {
        font-size: 1.75rem;
    }

    .manage-patients__card {
        padding: 1.15rem;
    }
}

/* Patient Notes Styles */
.patient-notes {
    margin-top: 2.5rem;
    background: var(--card-bg);
    backdrop-filter: blur(12px);
    border: 1px solid var(--card-border);
    border-radius: var(--radius-lg);
    padding: 2rem;
    box-shadow: var(--shadow-md);
}

.patient-notes__header {
    margin-bottom: 1.5rem;
    padding-bottom: 1rem;
    border-bottom: 1px solid rgba(139, 92, 246, 0.2);
}

.patient-notes__header h3 {
    margin: 0 0 0.5rem;
    font-weight: 700;
    color: var(--foreground);
    font-size: 1.25rem;
}

.patient-notes__header p {
    margin: 0;
    color: #64748b;
    font-size: 0.9rem;
}

.patient-notes__content {
    display: grid;
    gap: 2rem;
}

.patient-notes__selector {
    padding: 1.5rem;
    background: rgba(var(--brand-primary-rgb), 0.08);
    border-radius: var(--radius);
    border: 1px solid rgba(var(--brand-primary-rgb), 0.2);
}

.patient-notes__search {
    margin-bottom: 1rem;
}

.patient-notes__search label {
    display: block;
    margin-bottom: 0.5rem;
    font-weight: 600;
    color: var(--foreground);
}

.patient-notes__search input {
    width: 100%;
    padding: 0.75rem;
    border: 1px solid var(--card-border);
    border-radius: var(--radius-sm);
    font-size: 1rem;
    background: rgba(255, 255, 255, 0.05);
    color: var(--foreground);
    transition: border-color 0.2s ease;
}

.patient-notes__search input:focus {
    outline: none;
    border-color: var(--brand-primary);
    box-shadow: 0 0 0 3px rgba(var(--brand-primary-rgb), 0.2);
}

.patient-notes__list {
    list-style: none;
    padding: 0;
    margin: 0;
    border: 1px solid var(--card-border);
    border-radius: var(--radius-sm);
    background: rgba(255, 255, 255, 0.02);
}

.patient-notes__item {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 1rem;
    border-bottom: 1px solid var(--card-border);
    transition: background-color 0.2s ease;
}

.patient-notes__item:last-child {
    border-bottom: none;
}

.patient-notes__item:hover {
    background: rgba(var(--brand-primary-rgb), 0.1);
}

.patient-notes__person {
    display: flex;
    flex-direction: column;
    gap: 0.25rem;
}

.patient-notes__person-name {
    font-weight: 600;
    color: var(--foreground);
}

.patient-notes__person-id {
    font-size: 0.9rem;
    color: var(--foreground-muted);
}

.patient-notes__select-btn {
    flex-shrink: 0;
    padding: 0.5rem 1rem;
    font-size: 0.9rem;
}

.patient-notes__no-results {
    padding: 2rem;
    text-align: center;
    color: rgba(var(--brand-secondary-rgb), 0.6);
    font-style: italic;
}

.patient-notes__add {
    padding: 1.5rem;
    background: rgba(var(--brand-primary-rgb), 0.05);
    border-radius: 0.75rem;
    border: 1px solid rgba(var(--brand-primary-rgb), 0.15);
}

.patient-notes__form {
    display: grid;
    gap: 1rem;
}

.patient-notes__form .form-field {
    margin-bottom: 0;
}

.patient-notes__form textarea {
    resize: vertical;
    min-height: 120px;
}

.patient-notes__list h4 {
    margin: 0 0 1.25rem;
    font-weight: 600;
    color: var(--foreground);
    font-size: 1.1rem;
}

.notes-list {
    display: flex;
    flex-direction: column;
    gap: 1rem;
}

.notes-list .note-item:last-child {
    border-bottom: none;
}

.note-item {
    padding: 1.5rem;
    background: rgba(0, 0, 0, 0.3);
    border-radius: 0.75rem;
    border: 1px solid rgba(139, 92, 246, 0.15);
    transition: all 0.2s ease;
    margin-bottom: 1rem;
}

.note-item:last-child {
    margin-bottom: 0;
}

.note-item:hover {
    border-color: rgba(139, 92, 246, 0.3);
    box-shadow: 0 4px 16px rgba(139, 92, 246, 0.1);
}

.note-item__header {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    margin-bottom: 0.75rem;
    gap: 1rem;
}

.note-item__meta {
    display: flex;
    flex-direction: column;
    gap: 0.25rem;
}

.note-item__author {
    font-weight: 600;
    color: var(--brand-accent);
    font-size: 0.95rem;
}

.note-item__date {
    color: #64748b;
    font-size: 0.85rem;
}

.note-item__actions {
    display: flex;
    gap: 0.5rem;
    flex-shrink: 0;
}

.note-item__actions .btn {
    padding: 0.25rem 0.5rem;
    font-size: 0.85rem;
}

.note-item__content {
    color: #e2e8f0;
    line-height: 1.7;
    font-size: 0.95rem;
}

.note-item__content p {
    margin: 0 0 0.75rem 0;
    color: #cbd5e1;
}

.note-item__content p:last-child {
    margin-bottom: 0;
}

/* Note title styling */
.note-item__content .note-title {
    font-size: 1.1rem;
    font-weight: 600;
    color: var(--brand-accent);
    margin: 0 0 0.75rem 0;
    padding-bottom: 0.5rem;
    border-bottom: 1px solid rgba(139, 92, 246, 0.2);
}

/* Note section headers */
.note-item__content .note-section {
    font-size: 0.9rem;
    font-weight: 600;
    color: #fff;
    margin: 1rem 0 0.5rem 0;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

/* Note lists - unordered */
.note-item__content .note-list {
    margin: 0.5rem 0 1rem 0;
    padding-left: 1.25rem;
    list-style: none;
}

.note-item__content .note-list li {
    position: relative;
    padding-left: 1rem;
    margin-bottom: 0.4rem;
    color: #cbd5e1;
    line-height: 1.5;
}

.note-item__content .note-list li::before {
    content: "•";
    position: absolute;
    left: 0;
    color: var(--brand-primary);
    font-weight: bold;
}

/* Note lists - numbered */
.note-item__content .note-list--numbered {
    counter-reset: note-counter;
    padding-left: 0;
}

.note-item__content .note-list--numbered li {
    counter-increment: note-counter;
    padding-left: 2rem;
}

.note-item__content .note-list--numbered li::before {
    content: counter(note-counter) ".";
    position: absolute;
    left: 0;
    color: var(--brand-accent);
    font-weight: 600;
    min-width: 1.5rem;
}

/* Follow-up note styling */
.note-item__content .note-followup {
    margin-top: 1rem;
    padding-top: 0.75rem;
    border-top: 1px solid rgba(255, 255, 255, 0.1);
    font-style: italic;
    color: #94a3b8;
}

.patient-notes__empty {
    text-align: center;
    padding: 3rem 1rem;
    color: rgba(var(--brand-secondary-rgb), 0.6);
}

/* Modal Styles */
.modal {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: rgba(0, 0, 0, 0.8);
    backdrop-filter: blur(4px);
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 2000;
    padding: 1rem;
}

.modal__content {
    background: rgba(15, 15, 25, 0.95);
    backdrop-filter: blur(12px);
    border: 1px solid var(--card-border);
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow-lg);
    max-width: 500px;
    width: 100%;
    max-height: 90vh;
    overflow-y: auto;
    margin: 0 auto;
}

.modal__header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 1.5rem 1.5rem 0;
    margin-bottom: 1rem;
}

.modal__header h3 {
    margin: 0;
    font-weight: 700;
    color: var(--foreground);
}

.modal__close {
    background: none;
    border: none;
    font-size: 1.5rem;
    color: var(--foreground-muted);
    cursor: pointer;
    padding: 0.25rem;
    line-height: 1;
    transition: color 0.2s ease;
}

.modal__close:hover {
    color: var(--foreground);
}

.modal__content form {
    padding: 0 1.5rem 1.5rem;
}

.modal__actions {
    display: flex;
    gap: 0.75rem;
    justify-content: flex-end;
    margin-top: 1.5rem;
}

/* Floating Note Widget */
.floating-note-widget {
    position: fixed;
    bottom: 2rem;
    right: 2rem;
    z-index: 1000;
    transition: all 0.3s ease;
}

.floating-note-widget__button {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    background: var(--brand-primary);
    color: #ffffff;
    border: none;
    border-radius: 2rem;
    padding: 0.75rem 1.25rem;
    font-size: 0.9rem;
    font-weight: 600;
    cursor: pointer;
    box-shadow: 0 4px 16px rgba(var(--brand-primary-rgb), 0.3);
    transition: all 0.2s ease;
    min-width: 120px;
    justify-content: center;
}

.floating-note-widget__button:hover {
    background: var(--brand-secondary);
    box-shadow: 0 6px 20px rgba(var(--brand-primary-rgb), 0.4);
    transform: translateY(-2px);
}

.floating-note-widget__button:active {
    transform: translateY(0);
    box-shadow: 0 2px 8px rgba(var(--brand-primary-rgb), 0.3);
}

.floating-note-widget__icon {
    flex-shrink: 0;
    width: 20px;
    height: 20px;
}

.floating-note-widget__text {
    white-space: nowrap;
}

/* Responsive adjustments for floating widget */
@media (max-width: 768px) {
    .floating-note-widget {
        bottom: 1rem;
        right: 1rem;
    }
    
    .floating-note-widget__button {
        padding: 0.75rem;
        min-width: auto;
        border-radius: 50%;
        width: 56px;
        height: 56px;
        justify-content: center;
    }
    
    .floating-note-widget__text {
        display: none;
    }
    
    .floating-note-widget__icon {
        width: 24px;
        height: 24px;
    }
}

.customer-reports {
    margin-top: 2.5rem;
    background: var(--card-bg);
    backdrop-filter: blur(12px);
    border-radius: 1.25rem;
    padding: 2rem;
    box-shadow: var(--shadow-glow);
    border: 1px solid var(--card-border);
    display: grid;
    gap: 2rem;
}

.customer-reports__header h2 {
    margin: 0 0 0.35rem;
    font-weight: 700;
    color: var(--foreground);
}

.customer-reports__header p {
    margin: 0;
    color: rgba(var(--brand-secondary-rgb), 0.7);
}

.customer-reports__grid {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    gap: 1.5rem;
}

.customer-reports__card {
    background: rgba(139, 92, 246, 0.1);
    border-radius: 1rem;
    padding: 1.5rem;
    display: grid;
    gap: 1rem;
    border: 1px solid var(--card-border);
}

.customer-reports__card-header h3 {
    margin: 0 0 0.35rem;
    font-weight: 600;
    color: var(--foreground);
}

.customer-reports__card-header p {
    margin: 0;
    color: rgba(var(--brand-secondary-rgb), 0.65);
}

.customer-reports__search {
    display: grid;
    gap: 0.35rem;
}

.customer-reports__search label {
    font-size: 0.85rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    color: rgba(var(--brand-secondary-rgb), 0.7);
}

.customer-reports__list {
    margin: 0;
    padding: 0;
    list-style: none;
    display: grid;
    gap: 0.75rem;
}

.customer-reports__item {
    display: flex;
    gap: 1rem;
    justify-content: space-between;
    align-items: center;
    background: var(--card-bg);
    border-radius: 0.85rem;
    padding: 0.85rem 1rem;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.2);
    border: 1px solid var(--card-border);
}

.customer-reports__person {
    display: grid;
    gap: 0.2rem;
}

.customer-reports__person-name {
    font-weight: 600;
    color: var(--foreground);
}

.customer-reports__person-id {
    color: rgba(var(--brand-secondary-rgb), 0.6);
    font-size: 0.9rem;
}

.customer-reports__action {
    white-space: nowrap;
}

.customer-reports__empty,
.customer-reports__no-results {
    margin: 0;
    padding: 1rem;
    border-radius: 0.75rem;
    background: rgba(var(--brand-secondary-rgb), 0.08);
    color: rgba(var(--brand-secondary-rgb), 0.7);
}

.customer-reports__coming-soon {
    padding: 1.25rem;
    border-radius: 0.85rem;
    background: rgba(var(--brand-primary-rgb), 0.16);
    display: grid;
    gap: 0.75rem;
    color: rgba(var(--brand-secondary-rgb), 0.8);
}

.customer-reports__downloads {
    padding: 1.25rem;
    border-radius: 0.85rem;
    background: rgba(var(--brand-secondary-rgb), 0.08);
    display: grid;
    gap: 1rem;
}

.customer-reports__downloads-text {
    margin: 0;
    color: rgba(var(--brand-secondary-rgb), 0.7);
}

.customer-reports__downloads-note,
.customer-reports__coming-soon-note {
    margin: 0;
    padding: 0.75rem 1rem;
    border-radius: 0.75rem;
    background: rgba(var(--brand-secondary-rgb), 0.08);
    color: rgba(var(--brand-secondary-rgb), 0.7);
    font-size: 0.95rem;
}

.customer-reports__download-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 0.75rem;
}

.customer-reports__downloads-meta {
    margin: 0;
    font-size: 0.85rem;
    color: rgba(var(--brand-secondary-rgb), 0.6);
}

.customer-reports__badge {
    align-self: start;
    background: rgba(var(--brand-accent-rgb), 0.18);
    color: #0f5132;
    border-radius: 999px;
    padding: 0.2rem 0.75rem;
    font-size: 0.8rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.05em;
}

.user-role-tags {
    display: flex;
    flex-wrap: wrap;
    gap: 0.4rem;
    margin: 0;
    padding: 0;
    list-style: none;
}

.user-role-tags li {
    background: rgba(var(--brand-primary-rgb), 0.2);
    color: var(--brand-secondary);
    border-radius: 999px;
    padding: 0.25rem 0.6rem;
    font-size: 0.85rem;
    font-weight: 600;
}

.status {
    font-weight: 600;
    padding: 0.25rem 0.65rem;
    border-radius: 999px;
    display: inline-flex;
    align-items: center;
    gap: 0.3rem;
}

.status--active {
    background: rgba(var(--brand-primary-rgb), 0.26);
    color: #0c6c62;
}

.status--inactive {
    background: rgba(255, 118, 117, 0.2);
    color: #802828;
}

.status--pending {
    background: rgba(var(--brand-secondary-rgb), 0.18);
    color: var(--brand-secondary);
}

.patient-report {
    margin-top: 2.5rem;
    display: grid;
    gap: 2.5rem;
}

.patient-report__breadcrumbs {
    font-size: 0.95rem;
}

.patient-report__back {
    color: var(--brand-primary);
    text-decoration: none;
    font-weight: 600;
}

.patient-report__back:hover,
.patient-report__back:focus {
    text-decoration: underline;
}

.patient-report__header {
    background: linear-gradient(135deg, rgba(var(--brand-primary-rgb), 0.2), rgba(var(--brand-secondary-rgb), 0.1));
    border-radius: 1.25rem;
    padding: 2rem;
    display: grid;
    gap: 1.25rem;
    box-shadow: 0 20px 48px rgba(var(--brand-secondary-rgb), 0.12);
}

.patient-report__title {
    margin: 0;
    font-size: clamp(2rem, 3vw, 2.5rem);
    color: var(--brand-secondary);
}

.patient-report__lead {
    margin: 0;
    max-width: 720px;
    color: rgba(var(--brand-secondary-rgb), 0.75);
    font-size: 1.05rem;
}

.patient-report__meta {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
    gap: 1rem;
    margin: 0;
}

.patient-report__actions {
    display: flex;
    flex-wrap: wrap;
    gap: 0.75rem;
}

.patient-report__coming-soon {
    margin: 0;
    padding: 0.85rem 1rem;
    border-radius: 0.75rem;
    background: rgba(var(--brand-secondary-rgb), 0.08);
    color: rgba(var(--brand-secondary-rgb), 0.75);
    font-size: 0.95rem;
}

.patient-report__actions .btn {
    min-width: 12rem;
}

.patient-report__meta dt {
    font-size: 0.85rem;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    color: rgba(var(--brand-secondary-rgb), 0.65);
    margin-bottom: 0.2rem;
}

.patient-report__meta dd {
    margin: 0;
    font-weight: 600;
    color: var(--brand-secondary);
}

.patient-report__section-title {
    margin: 0 0 1rem;
    font-size: 1.35rem;
    font-weight: 700;
    color: var(--brand-secondary);
}

.patient-report__summary-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
    gap: 1.25rem;
}

.patient-report__insights-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
    gap: 1.25rem;
}

.patient-report__insight {
    background: var(--card-bg);
    backdrop-filter: blur(12px);
    border-radius: 1rem;
    padding: 1.35rem;
    box-shadow: var(--shadow-glow);
    border: 1px solid var(--card-border);
    display: grid;
    gap: 0.45rem;
}

.patient-report__insight h3 {
    margin: 0;
    font-size: 0.95rem;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    color: var(--foreground-muted);
}

.patient-report__insight-value {
    margin: 0;
    font-size: 1.8rem;
    font-weight: 700;
    color: var(--foreground);
}

.patient-report__insight-detail {
    margin: 0;
    font-size: 0.95rem;
    color: rgba(var(--brand-secondary-rgb), 0.7);
}

.patient-report__callouts {
    margin-top: 1.5rem;
    display: grid;
    gap: 1.25rem;
    grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
}

.patient-report__callout-card {
    border-radius: 1rem;
    padding: 1.5rem;
    color: var(--foreground);
    box-shadow: var(--shadow-glow);
    border: 1px solid var(--card-border);
    display: grid;
    gap: 0.5rem;
}

.patient-report__callout-card--risk {
    background: linear-gradient(135deg, rgba(var(--brand-primary-rgb), 0.18), rgba(var(--brand-secondary-rgb), 0.08));
}

.patient-report__callout-card--protective {
    background: linear-gradient(135deg, rgba(var(--brand-accent-rgb), 0.2), rgba(var(--brand-primary-rgb), 0.08));
}

.patient-report__callout-trait {
    margin: 0;
    font-size: 1.1rem;
    font-weight: 700;
}

.patient-report__callout-meta,
.patient-report__callout-area {
    margin: 0;
    font-size: 0.95rem;
    color: rgba(var(--brand-secondary-rgb), 0.75);
}

.patient-report__stat {
    background: var(--card-bg);
    backdrop-filter: blur(12px);
    border-radius: 1rem;
    padding: 1.5rem;
    box-shadow: var(--shadow-glow);
    border: 1px solid var(--card-border);
    display: grid;
    gap: 0.6rem;
}

.patient-report__stat h3 {
    margin: 0;
    font-size: 1rem;
    font-weight: 600;
    color: var(--foreground-muted);
    text-transform: uppercase;
    letter-spacing: 0.04em;
}

.patient-report__stat-value {
    margin: 0;
    font-size: 1.6rem;
    font-weight: 700;
    color: var(--foreground);
}

.patient-report__stat-detail {
    margin: 0;
    color: rgba(var(--brand-secondary-rgb), 0.7);
    font-size: 0.95rem;
}

.patient-report__highlights-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
    gap: 1.5rem;
}

.patient-report__panel {
    background: rgba(139, 92, 246, 0.1);
    border-radius: 1rem;
    padding: 1.5rem;
    display: grid;
    gap: 1rem;
    border: 1px solid var(--card-border);
}

.patient-report__panel--table {
    background: var(--card-bg);
    box-shadow: var(--shadow-glow);
}

.patient-report__panel--evidence {
    background: rgba(139, 92, 246, 0.1);
    box-shadow: inset 0 0 0 1px var(--card-border);
}

.patient-report__panel h3 {
    margin: 0;
    font-size: 1.1rem;
    font-weight: 600;
    color: var(--foreground);
}

.patient-report__table {
    width: 100%;
    border-collapse: collapse;
    background: var(--card-bg);
    border-radius: 0.9rem;
    overflow: hidden;
}

.patient-report__table th,
.patient-report__table td {
    padding: 0.85rem 1rem;
    border-bottom: 1px solid rgba(var(--brand-secondary-rgb), 0.08);
    text-align: left;
    vertical-align: top;
}

.patient-report__table--compact th,
.patient-report__table--compact td {
    padding: 0.75rem 0.85rem;
}

.patient-report__table-subtext {
    display: block;
    font-size: 0.8rem;
    color: rgba(var(--brand-secondary-rgb), 0.6);
    margin-top: 0.35rem;
}

.patient-report__table thead th {
    background: rgba(var(--brand-primary-rgb), 0.18);
    font-weight: 700;
    color: var(--brand-secondary);
}

.patient-report__table tbody tr:last-child td {
    border-bottom: none;
}

.patient-report__trait-name {
    display: block;
    font-weight: 600;
    color: var(--brand-secondary);
}

.patient-report__trait-area {
    display: block;
    font-size: 0.85rem;
    color: rgba(var(--brand-secondary-rgb), 0.6);
}

.patient-report__metrics-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
    gap: 1.25rem;
    margin-bottom: 1.5rem;
}

.patient-report__metric {
    background: rgba(var(--brand-secondary-rgb), 0.06);
    border-radius: 1rem;
    padding: 1.5rem;
    display: grid;
    gap: 0.5rem;
}

.patient-report__metric h3 {
    margin: 0;
    font-size: 0.95rem;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    color: rgba(var(--brand-secondary-rgb), 0.65);
}

.patient-report__metric-value {
    margin: 0;
    font-size: 1.5rem;
    font-weight: 700;
    color: var(--brand-secondary);
}

.patient-report__metric-detail {
    margin: 0;
    font-size: 0.95rem;
    color: rgba(var(--brand-secondary-rgb), 0.72);
}

.patient-report__status-list {
    list-style: none;
    margin: 0;
    padding: 0;
    display: grid;
    gap: 0.4rem;
}

.patient-report__status-list li {
    display: flex;
    justify-content: space-between;
    gap: 0.5rem;
    font-size: 0.95rem;
    color: rgba(var(--brand-secondary-rgb), 0.75);
}

.patient-report__mapping-status {
    display: inline-flex;
    align-items: center;
    gap: 0.3rem;
    font-size: 0.85rem;
    font-weight: 600;
    padding: 0.3rem 0.6rem;
    border-radius: 999px;
    margin-left: 0.5rem;
    background: rgba(var(--brand-secondary-rgb), 0.12);
    color: var(--brand-secondary);
    text-transform: capitalize;
}

.patient-report__mapping-status--mapped {
    background: rgba(var(--brand-primary-rgb), 0.18);
    color: var(--brand-secondary);
}

.patient-report__mapping-status--unmapped {
    background: rgba(var(--brand-secondary-rgb), 0.18);
    color: var(--brand-secondary);
}

.patient-report__evidence-list {
    list-style: none;
    margin: 0;
    padding: 0;
    display: grid;
    gap: 0.65rem;
}

.patient-report__evidence-trait {
    display: block;
    font-weight: 600;
    color: var(--brand-secondary);
}

.patient-report__evidence-meta {
    display: block;
    font-size: 0.9rem;
    color: rgba(var(--brand-secondary-rgb), 0.72);
}

.patient-report__meta--compact {
    background: rgba(var(--brand-secondary-rgb), 0.06);
    border-radius: 1rem;
    padding: 1.25rem;
    gap: 0.75rem;
}

.patient-report__empty {
    margin: 0;
    color: rgba(var(--brand-secondary-rgb), 0.7);
}

.patient-report__chips {
    display: flex;
    flex-wrap: wrap;
    gap: 0.6rem;
    margin-bottom: 1.5rem;
}

.patient-report__chip {
    display: inline-flex;
    flex-direction: column;
    gap: 0.2rem;
    padding: 0.65rem 0.9rem;
    border-radius: 0.75rem;
    background: rgba(var(--brand-primary-rgb), 0.16);
    color: var(--brand-secondary);
    font-size: 0.9rem;
    min-width: 160px;
}

.patient-report__quality {
    background: rgba(var(--brand-secondary-rgb), 0.06);
    border-radius: 1rem;
    padding: 1.5rem;
    display: grid;
    gap: 1rem;
}

.patient-report__quality-list {
    margin: 0;
    padding: 0;
    list-style: none;
    display: grid;
    gap: 0.75rem;
}

.patient-report__quality-list li {
    display: flex;
    justify-content: space-between;
    align-items: baseline;
    font-size: 0.95rem;
    color: rgba(var(--brand-secondary-rgb), 0.75);
}

.patient-report__quality-label {
    font-weight: 600;
    color: var(--brand-secondary);
}

.patient-report__quality-value {
    font-variant-numeric: tabular-nums;
}

.patient-report__disclaimer {
    margin: 1.5rem 0 0;
    font-size: 0.9rem;
    color: rgba(var(--brand-secondary-rgb), 0.7);
    font-style: italic;
}

.patient-report__section--coverage {
    display: grid;
    gap: 1.5rem;
}

@media (max-width: 720px) {
    .patient-report__callouts {
        grid-template-columns: 1fr;
    }

    .patient-report__metrics-grid {
        grid-template-columns: 1fr;
    }
}

.table-actions {
    display: flex;
    justify-content: flex-end;
    align-items: center;
    gap: 0.35rem;
}

.table-actions .inline-form {
    display: inline;
}

.table-actions .btn-link {
    padding: 0.25rem 0.4rem;
}

.row-menu {
    position: relative;
    display: inline-block;
    text-align: left;
}

.row-menu__summary {
    list-style: none;
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;
    padding: 0.4rem 0.7rem;
    border-radius: 999px;
    cursor: pointer;
    color: var(--foreground);
    background: var(--card-bg);
    border: 1px solid var(--card-border);
    font-weight: 600;
    font-size: 0.85rem;
    line-height: 1.2;
    transition: background 0.15s ease, border-color 0.15s ease, box-shadow 0.15s ease;
}

.row-menu__summary:hover,
.row-menu__summary:focus-visible {
    border-color: rgba(var(--brand-primary-rgb), 0.4);
    box-shadow: 0 0 0 3px rgba(var(--brand-primary-rgb), 0.1);
}

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

.row-menu__summary::-webkit-details-marker {
    display: none;
}

.row-menu__chevron {
    flex-shrink: 0;
    color: var(--foreground-muted);
    transition: transform 0.2s ease;
}

.row-menu[open] .row-menu__chevron {
    transform: rotate(180deg);
}

.row-menu[open] .row-menu__summary {
    border-color: rgba(var(--brand-primary-rgb), 0.4);
}

.row-menu__panel {
    position: absolute;
    top: calc(100% + 0.35rem);
    right: 0;
    width: min(16.5rem, 80vw);
    display: none;
    padding: 0.35rem;
    background: rgba(15, 15, 25, 0.96);
    backdrop-filter: blur(16px);
    color: var(--foreground);
    border: 1px solid var(--card-border);
    border-radius: 0.75rem;
    box-shadow: var(--shadow-lg), 0 0 0 1px rgba(255, 255, 255, 0.04);
    z-index: 20;
}

.row-menu[open] .row-menu__panel {
    display: grid;
    gap: 0.1rem;
}

.row-menu__form {
    margin: 0;
}

.row-menu__item {
    display: flex;
    width: 100%;
    align-items: center;
    gap: 0.5rem;
    padding: 0.55rem 0.7rem;
    border: 0;
    border-radius: 0.5rem;
    background: transparent;
    color: var(--foreground);
    font: inherit;
    font-size: 0.875rem;
    font-weight: 500;
    text-align: left;
    text-decoration: none;
    cursor: pointer;
}

button.row-menu__item {
    font: inherit;
}

.row-menu__item:hover,
.row-menu__item:focus-visible {
    background: rgba(255, 255, 255, 0.07);
    text-decoration: none;
}

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

.row-menu__item--danger {
    color: var(--destructive);
}

.row-menu__item--danger:hover,
.row-menu__item--danger:focus-visible {
    background: rgba(var(--destructive-rgb), 0.1);
}

.row-menu__divider {
    height: 1px;
    margin: 0.25rem 0.5rem;
    background: rgba(255, 255, 255, 0.08);
}

[data-theme="light"] .row-menu__panel {
    background: rgba(255, 255, 255, 0.98);
    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.1), 0 0 0 1px rgba(0, 0, 0, 0.04);
}

[data-theme="light"] .row-menu__item:hover,
[data-theme="light"] .row-menu__item:focus-visible {
    background: rgba(0, 0, 0, 0.05);
}

[data-theme="light"] .row-menu__divider {
    background: rgba(0, 0, 0, 0.08);
}

.site-footer {
    background: rgba(10, 10, 15, 0.9);
    border-top: 1px solid var(--card-border);
    color: var(--foreground-muted);
    text-align: center;
    padding: 2.5rem 1rem;
    margin-top: auto;
    position: relative;
    overflow: hidden;
}

.site-footer::before {
    content: "";
    position: absolute;
    inset: 0;
    background: radial-gradient(circle at top left, rgba(var(--brand-primary-rgb), 0.1), transparent 50%);
    pointer-events: none;
}

.site-footer a {
    color: var(--brand-primary);
    font-weight: 600;
}

.site-footer a:hover,
.site-footer a:focus {
    color: var(--brand-accent);
}

.site-footer img {
    width: 32px;
    height: 32px;
    margin: 0 0.5rem;
    filter: brightness(0) invert(1) drop-shadow(0 0 10px rgba(var(--brand-primary-rgb), 0.5));
}

.site-footer__version {
    margin-top: 1rem;
    font-size: 0.75rem;
    opacity: 0.6;
}

.site-footer__version code {
    font-family: var(--font-mono, ui-monospace, SFMono-Regular, Menlo, monospace);
    background: transparent;
    color: inherit;
}

/* Welcome Section - Dark Theme */
.welcome {
    margin: 2rem 0;
    text-align: center;
}

.welcome__title {
    font-size: clamp(2rem, 3vw, 2.75rem);
    margin-bottom: 0.5rem;
    letter-spacing: -0.01em;
    color: var(--foreground);
    background: linear-gradient(135deg, #fff 0%, var(--brand-accent) 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
}

.welcome__blurb {
    font-size: 1.1rem;
    color: var(--foreground-muted);
    margin-bottom: 0.75rem;
}

.welcome__actions {
    display: inline-flex;
    align-items: center;
    gap: 0.65rem;
    font-weight: 600;
    color: var(--brand-accent);
}

.welcome__link {
    color: inherit;
    text-decoration: none;
    transition: color 0.2s ease;
}

.welcome__link:hover,
.welcome__link:focus {
    text-decoration: underline;
    color: var(--brand-primary);
}

/* Admin Dashboard - Dark Theme */
.admin-home {
    background: linear-gradient(180deg, rgba(15, 15, 25, 0.95) 0%, rgba(10, 10, 15, 0.98) 100%);
    border: 1px solid rgba(255, 255, 255, 0.08);
    border-radius: var(--radius-xl);
    padding: 2.75rem;
    box-shadow: var(--shadow-lg);
    backdrop-filter: blur(12px);
}

.admin-home__header {
    max-width: 620px;
    margin-bottom: 2rem;
}

.admin-home__header h2 {
    font-size: clamp(1.75rem, 2.5vw, 2.25rem);
    margin-bottom: 0.75rem;
    color: var(--foreground);
    background: linear-gradient(135deg, #fff 0%, var(--brand-accent) 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
}

.admin-home__header p {
    margin: 0;
    color: var(--foreground-muted);
}

.admin-home__grid {
    display: grid;
    gap: 1.5rem;
    grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
    margin-bottom: 2.5rem;
}

.admin-home__card {
    position: relative;
    display: flex;
    flex-direction: column;
    gap: 1.25rem;
    background: var(--card-bg);
    border-radius: var(--radius-lg);
    padding: 1.75rem;
    border: 1px solid var(--card-border);
    box-shadow: var(--shadow-md);
    transition: all 0.3s ease;
    text-decoration: none;
    color: var(--foreground);
    overflow: hidden;
}

.admin-home__card::before {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 3px;
    background: linear-gradient(90deg, var(--brand-primary), var(--brand-accent));
    opacity: 0;
    transition: opacity 0.3s ease;
}

.admin-home__card::after {
    content: "";
    position: absolute;
    inset: 0;
    border-radius: inherit;
    background: radial-gradient(circle at top left, rgba(var(--brand-primary-rgb), 0.15), transparent 60%);
    opacity: 0;
    transition: opacity 0.3s ease;
    pointer-events: none;
}

.admin-home__card:hover,
.admin-home__card:focus {
    transform: translateY(-4px);
    border-color: var(--card-hover-border);
    box-shadow: var(--shadow-glow);
}

.admin-home__card:hover::before,
.admin-home__card:focus::before {
    opacity: 1;
}

.admin-home__card:hover::after,
.admin-home__card:focus::after {
    opacity: 1;
}

.admin-home__card-top {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    position: relative;
    z-index: 1;
}

.admin-home__label {
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.1em;
    font-size: 0.875rem;
    color: var(--brand-accent);
}

.admin-home__icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 3rem;
    height: 3rem;
    background: rgba(var(--brand-primary-rgb), 0.15);
    border-radius: var(--radius);
    padding: 0.5rem;
}

.admin-home__icon img {
    width: 100%;
    height: 100%;
    filter: brightness(0) saturate(100%) invert(59%) sepia(68%) saturate(3966%) hue-rotate(229deg) brightness(100%) contrast(94%);
}

.admin-home__description {
    margin: 0;
    color: var(--foreground-muted);
    font-size: 0.9rem;
    line-height: 1.5;
    position: relative;
    z-index: 1;
}

.admin-home__stats {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 0.75rem 1.25rem;
    margin: 0;
    position: relative;
    z-index: 1;
}

.admin-home__stats div {
    display: flex;
    flex-direction: column;
    gap: 0.25rem;
}

.admin-home__stats dt {
    font-size: 0.7rem;
    text-transform: uppercase;
    letter-spacing: 0.1em;
    color: var(--foreground-muted);
    font-weight: 600;
}

.admin-home__stats dd {
    font-size: 1.75rem;
    font-weight: 700;
    margin: 0;
    color: var(--foreground);
    background: linear-gradient(135deg, #fff 0%, var(--brand-accent) 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
}

.admin-home__stats--licenses dd {
    font-size: 1.4rem;
    font-variant-numeric: tabular-nums;
}

.admin-home__activity {
    background: rgba(0, 0, 0, 0.3);
    border: 1px solid var(--card-border);
    border-radius: var(--radius-lg);
    padding: 1.75rem;
}

.admin-home__activity h3 {
    margin-top: 0;
    margin-bottom: 1rem;
    color: var(--foreground);
}

.admin-home__activity-list {
    list-style: none;
    padding: 0;
    margin: 0;
    display: grid;
    gap: 1rem;
}

.admin-home__activity-list li {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
    gap: 0.75rem;
    align-items: baseline;
    padding: 0.75rem 1rem;
    border-radius: var(--radius);
    background: rgba(255, 255, 255, 0.03);
    border: 1px solid var(--card-border);
}

.admin-home__activity-customer {
    font-weight: 600;
    color: var(--foreground);
}

.admin-home__activity-type {
    font-size: 0.95rem;
    color: var(--foreground-muted);
}

.admin-home__activity-status {
    font-weight: 700;
    text-transform: uppercase;
    font-size: 0.75rem;
    letter-spacing: 0.1em;
    padding: 0.25rem 0.5rem;
    border-radius: var(--radius-sm);
}

.admin-home__activity-status--done {
    color: var(--success);
    background: rgba(var(--success-rgb), 0.15);
}

.admin-home__activity-status--error {
    color: var(--destructive);
    background: rgba(var(--destructive-rgb), 0.15);
}

.admin-home__activity-status--init {
    color: var(--warning);
    background: rgba(var(--warning-rgb), 0.15);
}

.admin-home__activity time,
.admin-home__activity-time {
    font-size: 0.85rem;
    color: var(--foreground-muted);
}

.admin-home__activity-link {
    margin-top: 1.5rem;
}

.admin-home__activity-link a {
    font-weight: 600;
    color: var(--brand-accent);
    transition: color 0.2s ease;
}

.admin-home__activity-link a:hover {
    color: var(--brand-primary);
}

/* Admin Section (inner pages) - Dark Theme */
.admin-section {
    background: linear-gradient(180deg, rgba(15, 15, 25, 0.95) 0%, rgba(10, 10, 15, 0.98) 100%);
    border: 1px solid rgba(255, 255, 255, 0.08);
    border-radius: var(--radius-xl);
    padding: 2.75rem;
    box-shadow: var(--shadow-lg);
    margin: 2rem 0;
}

.admin-section__header {
    max-width: 640px;
    margin-bottom: 2rem;
}

.admin-section__header h1 {
    margin: 0 0 0.75rem;
    font-size: clamp(1.85rem, 3vw, 2.5rem);
    color: var(--foreground);
    background: linear-gradient(135deg, #fff 0%, var(--brand-accent) 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
}

.admin-section__header p {
    margin: 0;
    color: var(--foreground-muted);
}

@media (max-width: 768px) {
    .site-header .container {
        justify-content: center;
    }

    .site-header__right {
        width: 100%;
        justify-content: center;
        flex-direction: column;
    }

    .site-nav__list {
        justify-content: center;
    }

    .site-nav a {
        padding: 0.4rem 0.65rem;
    }

    .user-menu {
        width: 100%;
    }

    .user-menu__summary {
        width: 100%;
    }

    .user-menu__email {
        max-width: none;
    }

    .user-menu__panel {
        right: 0;
        left: 0;
        width: auto;
    }

    .operations-widget,
    .manage-users {
        padding: 1.75rem;
    }

    .welcome {
        margin: 2.5rem 0 1.5rem;
    }

    .admin-home {
        padding: 2.25rem;
    }

    .admin-home__grid {
        grid-template-columns: 1fr;
    }

    .admin-home__activity-list li {
        grid-template-columns: 1fr;
    }

    .admin-section {
        padding: 2.25rem;
        margin: 2.5rem 0;
    }

    .site-content {
        padding: 3rem 0 2.5rem;
    }
}

/* Authentication Forms */
.auth-form {
    max-width: 400px;
    margin: 2rem auto;
    padding: 2rem;
    background: var(--card-bg);
    backdrop-filter: blur(12px);
    border-radius: 8px;
    box-shadow: var(--shadow-glow);
    border: 1px solid var(--card-border);
}

.auth-form--wide {
    max-width: 520px;
}

.auth-form h1 {
    margin-bottom: 0.5rem;
    text-align: center;
    color: var(--foreground);
}

.auth-form h2 {
    font-size: 1.15rem;
    margin-bottom: 0.35rem;
    color: var(--foreground);
}

.auth-form__hint {
    text-align: center;
    color: var(--foreground-muted);
    font-size: 0.9rem;
    margin-bottom: 1.5rem;
    line-height: 1.5;
}

.auth-form__status {
    font-weight: 600;
    color: var(--foreground-muted);
    font-size: 0.9rem;
    margin-bottom: 1rem;
}

.auth-form__qr-section,
.auth-form__verify-section,
.auth-form__recovery-section,
.auth-form__rescue {
    margin-top: 1.75rem;
    padding-top: 1.5rem;
    border-top: 1px solid var(--card-border);
}

.auth-form__qr-code {
    display: flex;
    justify-content: center;
    margin: 1.25rem 0;
    background: #fff;
    border-radius: 8px;
    padding: 1rem;
    width: fit-content;
    margin-left: auto;
    margin-right: auto;
}

.auth-form__manual-key {
    text-align: center;
    margin-bottom: 1rem;
}

.auth-form__key {
    display: block;
    margin-top: 0.35rem;
    font-size: 0.85rem;
    word-break: break-all;
    background: rgba(var(--brand-primary-rgb), 0.1);
    border: 1px solid rgba(var(--brand-primary-rgb), 0.2);
    padding: 0.5rem 0.75rem;
    border-radius: 6px;
    color: var(--foreground);
    user-select: all;
}

.form-group {
    margin-bottom: 1.5rem;
}

.form-label {
    display: block;
    margin-bottom: 0.5rem;
    font-weight: 600;
    color: var(--foreground);
    font-size: 0.95rem;
    letter-spacing: 0.025em;
}

.form-control {
    width: 100%;
    padding: 0.75rem;
    border: 2px solid var(--card-border);
    border-radius: 6px;
    font-size: 1rem;
    background-color: rgba(0, 0, 0, 0.3);
    color: var(--foreground);
    transition: all 0.2s ease;
    box-sizing: border-box;
}

.form-control:hover {
    border-color: rgba(139, 92, 246, 0.3);
    background-color: rgba(0, 0, 0, 0.4);
}

.form-control:focus {
    outline: none;
    border-color: var(--brand-primary);
    background-color: rgba(0, 0, 0, 0.5);
    box-shadow: 0 0 0 3px rgba(139, 92, 246, 0.2);
    transform: translateY(-1px);
}

.form-check {
    display: flex;
    align-items: center;
    gap: 0.5rem;
}

.form-check-input {
    margin: 0;
    width: 18px;
    height: 18px;
    border: 2px solid var(--card-border);
    border-radius: 3px;
    background-color: rgba(0, 0, 0, 0.3);
    cursor: pointer;
    transition: all 0.2s ease;
}

.form-check-input:hover {
    border-color: rgba(139, 92, 246, 0.3);
    background-color: rgba(0, 0, 0, 0.4);
}

.form-check-input:checked {
    background-color: var(--brand-primary);
    border-color: var(--brand-primary);
    background-image: url("data:image/svg+xml,%3csvg viewBox='0 0 16 16' fill='white' xmlns='http://www.w3.org/2000/svg'%3e%3cpath d='m13.854 3.646-7.5 7.5a.5.5 0 0 1-.708 0l-3.5-3.5a.5.5 0 1 1 .708-.708L6 10.293l7.146-7.147a.5.5 0 0 1 .708.708z'/%3e%3c/svg%3e");
    background-size: 12px 12px;
    background-position: center;
    background-repeat: no-repeat;
}

.form-check-label {
    margin: 0;
    font-weight: normal;
}

.form-actions {
    margin-top: 2rem;
    text-align: center;
}

.form-errors {
    margin-top: 0.5rem;
}

.form-error {
    display: block;
    color: #dc3545;
    font-size: 0.875rem;
}

.auth-links {
    margin-top: 1.5rem;
    text-align: center;
    font-size: 0.9rem;
}

.auth-links a {
    color: var(--brand-primary);
    text-decoration: none;
}

.auth-links a:hover {
    text-decoration: underline;
}

.btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
    padding: 0.75rem 1.5rem;
    border: 1px solid transparent;
    border-radius: var(--radius);
    font-size: 1rem;
    font-weight: 600;
    text-decoration: none;
    cursor: pointer;
    transition: all 0.2s ease;
}

.btn-primary {
    background-color: var(--brand-primary);
    color: white;
    border-color: var(--brand-primary);
    box-shadow: 0 0 15px rgba(var(--brand-primary-rgb), 0.3);
}

.btn-primary:hover {
    background-color: var(--brand-accent);
    border-color: var(--brand-accent);
    box-shadow: var(--shadow-glow-intense);
    transform: translateY(-1px);
}

.btn-secondary {
    background-color: rgba(255, 255, 255, 0.1);
    color: var(--foreground);
    border-color: var(--card-border);
}

.btn-secondary:hover {
    background-color: rgba(255, 255, 255, 0.15);
    border-color: var(--brand-primary);
}

.btn-outline {
    background-color: transparent;
    color: var(--brand-primary);
    border-color: var(--brand-primary);
}

/* Patient kit intake */
.kit-intake-page {
    background: #f7f7f5;
    color: #1f2933;
    font-family: Inter, Arial, sans-serif;
    min-height: 100vh;
}

.kit-intake {
    align-items: flex-start;
    display: flex;
    justify-content: center;
    min-height: auto;
    padding: 1rem;
}

.kit-intake__panel {
    background: #ffffff;
    border: 1px solid #d9dee5;
    border-radius: 8px;
    box-shadow: 0 12px 30px rgba(31, 41, 51, 0.08);
    max-width: 460px;
    padding: 2rem;
    width: 100%;
}

.kit-intake__brand {
    margin-bottom: 1.25rem;
    text-align: center;
}

.kit-intake__brand-logo {
    display: block;
    max-height: 56px;
    max-width: 200px;
    margin: 0 auto 0.5rem;
}

.kit-intake__brand-name {
    color: #102a43;
    font-size: 1.125rem;
    font-weight: 600;
    margin: 0;
}

.kit-intake__panel--confirmation {
    text-align: center;
}

.kit-intake h1 {
    color: #17212f;
    font-size: 1.75rem;
    letter-spacing: 0;
    line-height: 1.2;
    margin: 0 0 0.75rem;
}

.kit-intake__intro,
.kit-intake__note {
    color: #4b5563;
    line-height: 1.5;
    margin: 0 0 1.5rem;
}

.kit-intake__form {
    display: grid;
    gap: 1rem;
}

.kit-intake__field {
    display: grid;
    gap: 0.4rem;
}

.kit-intake__label {
    color: #243142;
    font-size: 0.95rem;
    font-weight: 600;
}

.kit-intake__control {
    background: #ffffff;
    border: 1px solid #b8c0cc;
    border-radius: 6px;
    box-sizing: border-box;
    color: #17212f;
    font-size: 1rem;
    min-height: 44px;
    padding: 0.65rem 0.75rem;
    width: 100%;
}

.kit-intake__control:focus {
    border-color: #1f6f78;
    box-shadow: 0 0 0 3px rgba(31, 111, 120, 0.16);
    outline: none;
}

.kit-intake__error {
    color: #b42318;
    font-size: 0.875rem;
}

.kit-intake__fieldset {
    border: 0;
    margin: 0;
    min-width: 0;
    padding: 0;
}

.kit-intake__legend {
    color: #243142;
    font-size: 0.95rem;
    font-weight: 600;
    padding: 0;
}

.kit-intake__radio-group {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
}

.kit-intake__radio {
    align-items: center;
    background: #ffffff;
    border: 1px solid #b8c0cc;
    border-radius: 6px;
    cursor: pointer;
    display: flex;
    flex: 1 1 8rem;
    gap: 0.5rem;
    min-height: 44px;
    padding: 0.65rem 0.75rem;
}

.kit-intake__radio:hover {
    border-color: #1f6f78;
}

.kit-intake__radio:focus-within {
    border-color: #1f6f78;
    box-shadow: 0 0 0 3px rgba(31, 111, 120, 0.16);
}

.kit-intake__submit {
    background: #1f6f78;
    border: 1px solid #1f6f78;
    border-radius: 6px;
    color: #ffffff;
    cursor: pointer;
    font-size: 1rem;
    font-weight: 700;
    min-height: 46px;
    padding: 0.75rem 1rem;
}

.kit-intake__submit:hover,
.kit-intake__submit:focus {
    background: #195d65;
    border-color: #195d65;
}

.kit-intake__consent {
    display: grid;
    gap: 0.5rem;
}

.kit-intake__checkbox {
    align-items: flex-start;
    display: flex;
    gap: 0.65rem;
    line-height: 1.5;
}

.kit-intake__checkbox input {
    accent-color: #1f6f78;
    flex-shrink: 0;
    height: 1.25rem;
    margin-top: 0.2rem;
    width: 1.25rem;
}

.kit-intake__checkbox input:focus,
.kit-intake__checkbox input:focus-visible {
    outline: none;
    box-shadow: 0 0 0 3px rgba(31, 111, 120, 0.16);
}

.kit-intake__checkbox label {
    color: #243142;
    font-size: 0.95rem;
}

.kit-intake__consent-link {
    color: #1f6f78;
    font-size: 0.95rem;
    font-weight: 600;
    width: fit-content;
}

.kit-intake__consent-link:focus,
.kit-intake__consent-link:focus-visible {
    border-radius: 2px;
    outline: none;
    box-shadow: 0 0 0 3px rgba(31, 111, 120, 0.16);
}

.kit-intake__panel--legal {
    max-width: 42rem;
}

.kit-intake__legal-body {
    color: #243142;
    display: grid;
    gap: 1.25rem;
    line-height: 1.6;
}

.kit-intake__legal-body h2 {
    color: #17212f;
    font-size: 1.05rem;
    margin: 0 0 0.35rem;
}

.kit-intake__legal-body p {
    margin: 0;
}

.kit-intake__back {
    color: #1f6f78;
    display: inline-block;
    font-weight: 600;
    margin-top: 1.5rem;
}

.kit-intake__back:focus,
.kit-intake__back:focus-visible {
    border-radius: 2px;
    outline: none;
    box-shadow: 0 0 0 3px rgba(31, 111, 120, 0.16);
}

.btn-outline:hover {
    background-color: rgba(var(--brand-primary-rgb), 0.1);
}

.btn-danger {
    background-color: var(--destructive);
    color: white;
    border-color: var(--destructive);
}

.btn-danger:hover {
    background-color: #dc2626;
    box-shadow: 0 0 15px rgba(var(--destructive-rgb), 0.4);
}

.btn-sm {
    padding: 0.5rem 1rem;
    font-size: 0.875rem;
}

.btn-lg {
    padding: 1rem 2rem;
    font-size: 1.125rem;
}

/* Upload progress styles */
.upload-progress {
    margin-top: 1rem;
    padding: 1rem;
    background: rgba(var(--brand-primary-rgb), 0.12);
    border-radius: 0.5rem;
    border: 1px solid rgba(var(--brand-primary-rgb), 0.24);
}

.upload-progress__bar {
    width: 100%;
    height: 0.5rem;
    background: rgba(var(--brand-primary-rgb), 0.2);
    border-radius: 0.25rem;
    overflow: hidden;
    margin-bottom: 0.5rem;
}

.upload-progress__fill {
    height: 100%;
    background: linear-gradient(90deg, var(--brand-primary), var(--brand-accent));
    border-radius: 0.25rem;
    width: 0%;
    transition: width 0.3s ease;
}

.upload-progress__text {
    margin: 0;
    font-size: 0.875rem;
    color: var(--foreground);
    text-align: center;
}

/* Comprehensive Report Styles */
.report-header {
    background: var(--card-bg);
    backdrop-filter: blur(12px);
    color: var(--foreground);
    padding: 1rem 0;
    margin-bottom: 2rem;
    border-radius: 8px;
    border: 1px solid var(--card-border);
    box-shadow: var(--shadow-glow);
}

.report-header__content {
    display: flex;
    flex-direction: column;
    align-items: center;
    max-width: 1200px;
    margin: 0 auto;
    padding: 0 2rem;
    text-align: center;
    gap: 0.5rem;
}

.report-header__title {
    font-size: 1rem;
    font-weight: 500;
    margin: 0;
    color: var(--foreground-muted);
    text-transform: uppercase;
    letter-spacing: 0.1em;
}

.report-header__patient-name {
    font-size: 2rem;
    font-weight: 700;
    margin: 0 0 0.5rem 0;
    color: var(--foreground);
}

.report-header__patient-details {
    display: flex;
    justify-content: center;
    gap: 1rem;
    font-size: 0.9rem;
    color: var(--foreground-muted);
}


/* Report Tabs */
.report-tabs {
    max-width: 1200px;
    margin: 0 auto;
    padding: 0 2rem;
}

.report-tabs__nav {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
    gap: 0.5rem;
    margin-bottom: 2rem;
    border-bottom: 2px solid var(--card-border);
    padding-bottom: 0;
}

.report-tabs__tab {
    background: none;
    border: none;
    padding: 0.75rem 1rem;
    font-size: 0.9rem;
    font-weight: 500;
    color: var(--foreground-muted);
    cursor: pointer;
    border-bottom: 3px solid transparent;
    transition: all 0.2s ease;
    white-space: nowrap;
    text-align: center;
    border-radius: 6px 6px 0 0;
}

.report-tabs__tab:hover {
    color: var(--brand-primary);
    background: rgba(var(--brand-primary-rgb), 0.05);
}

.report-tabs__tab--active {
    color: var(--brand-primary);
    border-bottom-color: var(--brand-primary);
    background: rgba(var(--brand-primary-rgb), 0.1);
}

.report-tabs__panel {
    display: none;
    padding: 2rem 0;
}

.report-tabs__panel--active {
    display: block;
}

/* Clinical Summary Styles */
.clinical-summary__header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 2rem;
    padding-bottom: 1rem;
    border-bottom: 1px solid var(--card-border);
}

.clinical-summary__title {
    font-size: 1.5rem;
    font-weight: 600;
    color: var(--foreground);
    margin: 0;
}

.clinical-summary__meta {
    display: flex;
    gap: 1rem;
    font-size: 0.9rem;
    color: #6b7280;
}

.clinical-summary__sections {
    display: flex;
    flex-direction: column;
    gap: 2rem;
}

.clinical-summary__section {
    background: var(--card-bg);
    backdrop-filter: blur(12px);
    border-radius: 12px;
    padding: 1.5rem;
    box-shadow: var(--shadow-glow);
    border: 1px solid var(--card-border);
}

.clinical-summary__section h4 {
    font-size: 1.2rem;
    font-weight: 600;
    color: var(--foreground);
    margin: 0 0 1rem 0;
    padding-bottom: 0.5rem;
    border-bottom: 2px solid var(--brand-primary);
}

.clinical-summary__content {
    display: flex;
    flex-direction: column;
    gap: 1rem;
}

.clinical-summary__item {
    padding: 0.75rem;
    background: rgba(139, 92, 246, 0.1);
    border-radius: 8px;
    border-left: 4px solid var(--brand-primary);
}

.vitals-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
    gap: 1rem;
}

.vital-item {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 0.5rem;
    background: var(--card-bg);
    border-radius: 4px;
    border: 1px solid var(--card-border);
}

.vital-label {
    font-weight: 500;
    color: var(--foreground);
}

.vital-value {
    font-weight: 500;
    color: var(--foreground);
}

.json-snippet {
    background: #1f2937;
    color: #f9fafb;
    padding: 1rem;
    border-radius: 8px;
    font-family: 'Monaco', 'Menlo', 'Ubuntu Mono', monospace;
    font-size: 0.8rem;
    margin: 0.5rem 0;
    overflow-x: auto;
}

/* PRS Panel Styles */
.prs-panel__header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 2rem;
    padding-bottom: 1rem;
    border-bottom: 1px solid var(--card-border);
}

.prs-panel__title {
    font-size: 1.5rem;
    font-weight: 600;
    color: var(--foreground);
    margin: 0;
}

.prs-panel__meta {
    display: flex;
    gap: 1rem;
    font-size: 0.9rem;
    color: var(--foreground-muted);
}

.prs-panel__definitions {
    margin-bottom: 2rem;
}

.prs-panel__definitions h4 {
    font-size: 1.1rem;
    font-weight: 600;
    margin-bottom: 1rem;
    color: var(--foreground);
}

.prs-panel__disclaimer {
    margin-top: 2rem;
    padding: 1.5rem;
    background: var(--card-bg);
    backdrop-filter: blur(12px);
    border-radius: 12px;
    box-shadow: var(--shadow-glow);
    border: 1px solid var(--card-border);
    border-left: 4px solid var(--foreground-muted);
}

.prs-panel__disclaimer p {
    margin: 0;
    color: var(--foreground-muted);
    font-size: 0.9rem;
    line-height: 1.5;
}

.prs-panel__disclaimer strong {
    color: var(--foreground);
}

/* PRS Description */
.prs-panel__description {
    background: var(--card-bg);
    backdrop-filter: blur(12px);
    border-radius: 12px;
    padding: 1.5rem;
    margin-bottom: 2rem;
    box-shadow: var(--shadow-glow);
    border: 1px solid var(--card-border);
}

.prs-panel__description p {
    margin: 0;
    color: var(--foreground-muted);
    line-height: 1.6;
}

/* PRS Scores Section */
.prs-panel__scores {
    background: var(--card-bg);
    backdrop-filter: blur(12px);
    border-radius: 12px;
    padding: 1.5rem;
    margin-bottom: 2rem;
    box-shadow: var(--shadow-glow);
    border: 1px solid var(--card-border);
}

.prs-panel__scores h4 {
    font-size: 1.2rem;
    font-weight: 600;
    margin-bottom: 1.5rem;
    color: var(--foreground);
    border-bottom: 2px solid var(--brand-primary);
    padding-bottom: 0.5rem;
}

.prs-summary-stats {
    display: flex;
    gap: 2rem;
    margin-bottom: 1.5rem;
}

.prs-summary-stats .summary-stat {
    display: flex;
    flex-direction: column;
    align-items: center;
    padding: 1rem 1.5rem;
    background: var(--card-bg);
    border-radius: 8px;
    border: 1px solid var(--card-border);
}

.prs-summary-stats .stat-value {
    font-size: 2rem;
    font-weight: 700;
    color: var(--brand-primary);
}

.prs-summary-stats .stat-label {
    font-size: 0.85rem;
    color: var(--foreground-muted);
    margin-top: 0.25rem;
}

/* PRS Scores Table */
.prs-scores-table {
    overflow-x: auto;
}

.prs-scores-table .table {
    width: 100%;
    border-collapse: collapse;
}

.prs-scores-table thead th {
    background: var(--card-bg);
    color: var(--foreground);
    font-weight: 600;
    padding: 1rem;
    text-align: left;
    border-bottom: 2px solid var(--card-border);
    position: sticky;
    top: 0;
}

.prs-scores-table tbody tr {
    border-bottom: 1px solid var(--card-border);
    transition: background 0.2s;
}

.prs-scores-table tbody tr:hover {
    background: rgba(139, 92, 246, 0.05);
}

.prs-scores-table td {
    padding: 1rem;
    color: var(--foreground);
}

.prs-trait-name {
    font-weight: 500;
    display: block;
}

.prs-study-id {
    font-size: 0.75rem;
    color: var(--foreground-muted);
    font-family: var(--font-mono);
    display: block;
    margin-top: 0.25rem;
}

.prs-score-value {
    font-weight: 600;
    font-family: var(--font-mono);
}

.prs-score--positive {
    color: #f87171;
}

.prs-score--negative {
    color: #34d399;
}

.prs-variant-count {
    font-family: var(--font-mono);
    font-size: 0.9rem;
}

.prs-total-weight {
    font-family: var(--font-mono);
    font-size: 0.9rem;
    color: var(--foreground-muted);
}

/* PRS Results Section */
.prs-panel__results {
    background: var(--card-bg);
    backdrop-filter: blur(12px);
    border-radius: 12px;
    padding: 1.5rem;
    margin-bottom: 2rem;
    box-shadow: var(--shadow-glow);
    border: 1px solid var(--card-border);
}

.prs-panel__results h4 {
    font-size: 1.2rem;
    font-weight: 600;
    margin-bottom: 1.5rem;
    color: var(--foreground);
    border-bottom: 2px solid var(--brand-primary);
    padding-bottom: 0.5rem;
}

/* Risk Legend */
.prs-risk-legend {
    margin-bottom: 1.5rem;
}

.prs-risk-legend h5 {
    font-size: 1rem;
    font-weight: 600;
    color: var(--foreground);
    margin-bottom: 1rem;
}

.risk-legend-grid {
    display: flex;
    flex-wrap: wrap;
    gap: 1rem;
}

.risk-legend-item {
    padding: 0.75rem 1rem;
    background: var(--card-bg);
    border-radius: 8px;
    border: 1px solid var(--card-border);
    border-left: 4px solid;
}

.risk-legend-item--low,
.risk-legend-item--below_average {
    border-left-color: #34d399;
}

.risk-legend-item--average,
.risk-legend-item--typical {
    border-left-color: #a78bfa;
}

.risk-legend-item--elevated,
.risk-legend-item--above_average {
    border-left-color: #fbbf24;
}

.risk-legend-item--high {
    border-left-color: #f87171;
}

.risk-legend-name {
    font-weight: 600;
    color: var(--foreground);
    display: block;
    margin-bottom: 0.25rem;
}

.risk-legend-definition {
    font-size: 0.85rem;
    color: var(--foreground-muted);
}

/* PRS Results Grid */
.prs-results-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
    gap: 1.5rem;
}

.prs-result-card {
    background: var(--card-bg);
    backdrop-filter: blur(12px);
    border-radius: 8px;
    padding: 1.25rem;
    border: 1px solid var(--card-border);
    box-shadow: var(--shadow-glow);
}

.prs-result-card--low,
.prs-result-card--below_average {
    border-left: 4px solid #34d399;
}

.prs-result-card--average,
.prs-result-card--typical {
    border-left: 4px solid #a78bfa;
}

.prs-result-card--elevated,
.prs-result-card--above_average {
    border-left: 4px solid #fbbf24;
}

.prs-result-card--high {
    border-left: 4px solid #f87171;
}

.prs-result-header {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    margin-bottom: 1rem;
    gap: 0.5rem;
}

.prs-result-name {
    font-weight: 600;
    color: var(--foreground);
    flex: 1;
}

.risk-badge {
    padding: 0.25rem 0.75rem;
    border-radius: 12px;
    font-size: 0.8rem;
    font-weight: 500;
}

.risk-badge--low,
.risk-badge--below_average {
    background: rgba(16, 185, 129, 0.2);
    color: #34d399;
    border: 1px solid rgba(16, 185, 129, 0.3);
}

.risk-badge--average,
.risk-badge--typical {
    background: rgba(167, 139, 250, 0.2);
    color: #a78bfa;
    border: 1px solid rgba(167, 139, 250, 0.3);
}

.risk-badge--elevated,
.risk-badge--above_average {
    background: rgba(245, 158, 11, 0.2);
    color: #fbbf24;
    border: 1px solid rgba(245, 158, 11, 0.3);
}

.risk-badge--high {
    background: rgba(239, 68, 68, 0.2);
    color: #f87171;
    border: 1px solid rgba(239, 68, 68, 0.3);
}

.prs-result-content {
    display: flex;
    flex-direction: column;
    gap: 1rem;
}

.prs-percentile {
    width: 100%;
}

.prs-applicability {
    display: flex;
    align-items: center;
    gap: 0.5rem;
}

.applicability-label {
    font-size: 0.85rem;
    color: var(--foreground-muted);
}

.applicability-badge {
    padding: 0.2rem 0.5rem;
    border-radius: 8px;
    font-size: 0.75rem;
    font-weight: 500;
}

.applicability-badge--high,
.applicability-badge--strong {
    background: rgba(16, 185, 129, 0.2);
    color: #34d399;
}

.applicability-badge--moderate {
    background: rgba(245, 158, 11, 0.2);
    color: #fbbf24;
}

.applicability-badge--low,
.applicability-badge--limited {
    background: rgba(107, 114, 128, 0.2);
    color: #9ca3af;
}

/* Digital Biomarkers Panel Styles */
.digital-biomarkers-panel__header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 2rem;
    padding-bottom: 1rem;
    border-bottom: 1px solid var(--card-border);
}

.digital-biomarkers-panel__title {
    font-size: 1.5rem;
    font-weight: 600;
    color: var(--foreground);
    margin: 0;
}

.digital-biomarkers-panel__subtitle {
    margin: 0.25rem 0 0;
    font-size: 0.95rem;
    color: var(--foreground-muted);
}

.digital-biomarkers-panel__meta {
    display: flex;
    gap: 1rem;
    font-size: 0.9rem;
    color: var(--foreground-muted);
}

.digital-biomarkers-panel__method {
    background: var(--card-bg);
    backdrop-filter: blur(12px);
    border-radius: 12px;
    padding: 1.5rem;
    margin-bottom: 2rem;
    box-shadow: var(--shadow-glow);
    border: 1px solid var(--card-border);
}

.digital-biomarkers-panel__method h4 {
    font-size: 1.1rem;
    font-weight: 600;
    margin-bottom: 1rem;
    color: var(--foreground);
}

.digital-biomarkers-panel__thresholds {
    background: var(--card-bg);
    backdrop-filter: blur(12px);
    border-radius: 12px;
    padding: 1.5rem;
    margin-bottom: 2rem;
    box-shadow: var(--shadow-glow);
    border: 1px solid var(--card-border);
}

.digital-biomarkers-panel__thresholds h4 {
    font-size: 1.1rem;
    font-weight: 600;
    margin-bottom: 1rem;
    color: var(--foreground);
}

.thresholds-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
    gap: 1rem;
}

.threshold-item {
    padding: 1rem;
    border-radius: 8px;
    border-left: 4px solid;
}

.threshold-item--high {
    background: rgba(239, 68, 68, 0.2);
    border-left-color: #ef4444;
}

.threshold-item--moderate {
    background: rgba(245, 158, 11, 0.2);
    border-left-color: #f59e0b;
}

.threshold-label {
    font-weight: 600;
    display: block;
    margin-bottom: 0.25rem;
}

.threshold-value {
    font-size: 1.1rem;
    font-weight: 700;
}

.digital-biomarkers-panel__scores {
    background: var(--card-bg);
    backdrop-filter: blur(12px);
    border-radius: 12px;
    padding: 1.5rem;
    margin-bottom: 2rem;
    box-shadow: var(--shadow-glow);
    border: 1px solid var(--card-border);
}

.digital-biomarkers-panel__scores h4 {
    font-size: 1.1rem;
    font-weight: 600;
    margin-bottom: 1rem;
    color: var(--foreground);
}

.scores-table {
    overflow-x: auto;
}

.scores-table .table {
    margin: 0;
    border: none;
}

.scores-table .table th {
    background: var(--brand-secondary);
    color: white;
    font-weight: 600;
    padding: 1rem;
    border: none;
}

.scores-table .table td {
    padding: 1rem;
    border-bottom: 1px solid #f3f4f6;
    vertical-align: middle;
}

.score-row--high {
    background: #fef2f2;
}

.score-row--moderate_high {
    background: #fff7ed;
}

.score-row--moderate {
    background: #fffbeb;
}

.score-row--elevated {
    background: #f0f9ff;
}

.score-row--average {
    background: #f0fdf4;
}

.score-row--low {
    background: #f0fdf4;
}

.score-badge {
    display: inline-block;
    padding: 0.25rem 0.75rem;
    border-radius: 20px;
    font-size: 0.9rem;
    font-weight: 600;
    color: white;
}

.score-badge--high {
    background: #dc2626;
}

.score-badge--moderate_high {
    background: #ea580c;
}

.score-badge--moderate {
    background: #d97706;
}

.score-badge--elevated {
    background: #0ea5e9;
}

.score-badge--average {
    background: #22c55e;
}

.score-badge--low {
    background: #22c55e;
}

.classification-badge {
    display: inline-block;
    padding: 0.25rem 0.75rem;
    border-radius: 20px;
    font-size: 0.8rem;
    font-weight: 500;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

.classification-badge--high {
    background: #fef2f2;
    color: #dc2626;
    border: 1px solid #fecaca;
}

.classification-badge--moderate_high {
    background: #fff7ed;
    color: #ea580c;
    border: 1px solid #fed7aa;
}

.classification-badge--moderate {
    background: #fffbeb;
    color: #d97706;
    border: 1px solid #fde68a;
}

.classification-badge--elevated {
    background: #f0f9ff;
    color: #0ea5e9;
    border: 1px solid #bae6fd;
}

.classification-badge--average {
    background: #f0fdf4;
    color: #22c55e;
    border: 1px solid #bbf7d0;
}

.classification-badge--low {
    background: #f0fdf4;
    color: #22c55e;
    border: 1px solid #bbf7d0;
}

.status-badge {
    display: inline-block;
    padding: 0.25rem 0.5rem;
    border-radius: 12px;
    font-size: 0.75rem;
    font-weight: 500;
}

.status-badge--in_range {
    background: #f0fdf4;
    color: #16a34a;
}

.status-badge--out_of_normal_range {
    background: #fef2f2;
    color: #dc2626;
}

.digital-biomarkers-panel__notes {
    background: rgba(139, 92, 246, 0.1);
    border-radius: 12px;
    padding: 1.5rem;
    border-left: 4px solid var(--brand-primary);
}

.digital-biomarkers-panel__notes h4 {
    font-size: 1.1rem;
    font-weight: 600;
    margin-bottom: 1rem;
    color: var(--foreground);
}

/* Methylation Panel Styles */
.methylation-panel__header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 2rem;
    padding-bottom: 1rem;
    border-bottom: 1px solid var(--card-border);
}

.methylation-panel__title {
    font-size: 1.5rem;
    font-weight: 600;
    color: var(--foreground);
    margin: 0;
}

.methylation-panel__meta {
    display: flex;
    gap: 1rem;
    font-size: 0.9rem;
    color: var(--foreground-muted);
}

.methylation-panel__version {
    background: var(--card-bg);
    padding: 0.25rem 0.5rem;
    border-radius: 4px;
    border: 1px solid var(--card-border);
}

.methylation-panel__summary {
    background: var(--card-bg);
    backdrop-filter: blur(12px);
    border-radius: 12px;
    padding: 1.5rem;
    margin-bottom: 2rem;
    box-shadow: var(--shadow-glow);
    border: 1px solid var(--card-border);
}

.methylation-panel__summary h4 {
    font-size: 1.2rem;
    font-weight: 600;
    margin-bottom: 1.5rem;
    color: var(--foreground);
    border-bottom: 2px solid var(--brand-primary);
    padding-bottom: 0.5rem;
}

.summary-cards {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
    gap: 1.5rem;
    margin-bottom: 2rem;
}

.summary-card {
    background: var(--card-bg);
    backdrop-filter: blur(12px);
    border-radius: 8px;
    padding: 1.5rem;
    border: 1px solid var(--card-border);
}

.summary-card h5 {
    font-size: 1.1rem;
    font-weight: 600;
    color: var(--foreground);
    margin-bottom: 1rem;
    border-bottom: 1px solid var(--card-border);
    padding-bottom: 0.5rem;
}

.age-analysis {
    text-align: center;
}

.age-delta {
    display: flex;
    align-items: baseline;
    justify-content: center;
    gap: 0.5rem;
    margin-bottom: 1rem;
}

.age-delta__value {
    font-size: 2.5rem;
    font-weight: 700;
    color: var(--brand-primary);
}

.age-delta__unit {
    font-size: 1.2rem;
    color: var(--foreground-muted);
}

.age-classification {
    margin-bottom: 1rem;
}

.classification-badge--accelerated {
    background: rgba(239, 68, 68, 0.2);
    color: #f87171;
    padding: 0.5rem 1rem;
    border-radius: 20px;
    font-weight: 600;
}

.age-interpretation p {
    margin: 0;
    color: var(--foreground-muted);
    line-height: 1.5;
    font-style: italic;
}

.cancer-signal {
    text-align: center;
}

.signal-result {
    display: inline-block;
    padding: 0.75rem 1.5rem;
    border-radius: 20px;
    font-weight: 600;
    font-size: 1.1rem;
    margin-bottom: 1rem;
}

.signal-result--negative {
    background: rgba(16, 185, 129, 0.2);
    color: #34d399;
}

.signal-result--positive {
    background: rgba(239, 68, 68, 0.2);
    color: #f87171;
}

.signal-score,
.signal-mode {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 0.5rem;
    padding: 0.5rem;
    background: var(--card-bg);
    border-radius: 6px;
    border: 1px solid var(--card-border);
}

.score-label,
.mode-label {
    font-weight: 500;
    color: var(--foreground-muted);
}

.score-value,
.mode-value {
    font-weight: 600;
    color: var(--foreground);
}

.signal-interpretation p {
    margin: 0;
    color: var(--foreground-muted);
    line-height: 1.5;
    font-style: italic;
}

.alignment-overview {
    margin-top: 1.5rem;
    padding: 1rem;
    background: var(--card-bg);
    backdrop-filter: blur(12px);
    border-radius: 8px;
    border-left: 4px solid var(--brand-primary);
    border: 1px solid var(--card-border);
    border-left: 4px solid var(--brand-primary);
}

.alignment-overview h5 {
    font-size: 1rem;
    font-weight: 600;
    color: var(--foreground);
    margin-bottom: 0.5rem;
}

.alignment-overview p {
    margin: 0;
    color: var(--foreground-muted);
    line-height: 1.5;
    font-style: italic;
}

.summary-section {
    margin-bottom: 2rem;
}

.summary-section h5 {
    font-size: 1.1rem;
    font-weight: 600;
    margin-bottom: 1rem;
    color: var(--foreground);
}

.biological-age-card {
    background: var(--card-bg);
    backdrop-filter: blur(12px);
    border-radius: 12px;
    padding: 1.5rem;
    text-align: center;
    border: 1px solid var(--card-border);
}

.age-delta {
    margin-bottom: 1rem;
}

.age-delta__value {
    font-size: 2.5rem;
    font-weight: 700;
    color: var(--brand-primary);
}

.age-delta__unit {
    font-size: 1.2rem;
    color: #6b7280;
    margin-left: 0.5rem;
}

.age-classification {
    display: inline-block;
    padding: 0.5rem 1rem;
    border-radius: 20px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    margin-bottom: 1rem;
}

.age-classification--accelerated {
    background: rgba(239, 68, 68, 0.2);
    color: #f87171;
    border: 1px solid rgba(239, 68, 68, 0.3);
}

.age-classification--normal {
    background: rgba(16, 185, 129, 0.2);
    color: #34d399;
    border: 1px solid rgba(16, 185, 129, 0.3);
}

.age-interpretation {
    margin: 0;
    font-style: italic;
    color: var(--foreground-muted);
}

.cancer-signal-card {
    background: var(--card-bg);
    backdrop-filter: blur(12px);
    border-radius: 12px;
    padding: 1.5rem;
    text-align: center;
    border: 1px solid var(--card-border);
}

.signal-score {
    margin-bottom: 1rem;
}

.signal-score__value {
    font-size: 2rem;
    font-weight: 700;
    color: var(--brand-primary);
}

.signal-score__label {
    font-size: 1rem;
    color: var(--foreground-muted);
    margin-left: 0.5rem;
}

.signal-call {
    display: inline-block;
    padding: 0.5rem 1rem;
    border-radius: 20px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    margin-bottom: 1rem;
}

.signal-call--negative {
    background: rgba(16, 185, 129, 0.2);
    color: #34d399;
    border: 1px solid rgba(16, 185, 129, 0.3);
}

.signal-call--positive {
    background: rgba(239, 68, 68, 0.2);
    color: #f87171;
    border: 1px solid rgba(239, 68, 68, 0.3);
}

.signal-interpretation {
    margin: 0;
    font-style: italic;
    color: var(--foreground-muted);
}

.alignment-text {
    background: var(--card-bg);
    padding: 1rem;
    border-radius: 8px;
    border-left: 4px solid var(--brand-primary);
    margin: 0;
    border: 1px solid var(--card-border);
    border-left: 4px solid var(--brand-primary);
}

.methylation-panel__proxies {
    background: var(--card-bg);
    backdrop-filter: blur(12px);
    border-radius: 12px;
    padding: 1.5rem;
    margin-bottom: 2rem;
    box-shadow: var(--shadow-glow);
    border: 1px solid var(--card-border);
}

.methylation-panel__proxies h4 {
    font-size: 1.2rem;
    font-weight: 600;
    margin-bottom: 1rem;
    color: var(--foreground);
    border-bottom: 2px solid var(--brand-primary);
    padding-bottom: 0.5rem;
}

.proxies-notes {
    margin-bottom: 1.5rem;
    padding: 1rem;
    background: var(--card-bg);
    border-radius: 8px;
    border-left: 4px solid var(--foreground-muted);
    border: 1px solid var(--card-border);
    border-left: 4px solid var(--foreground-muted);
}

.proxies-notes p {
    margin: 0;
    color: var(--foreground-muted);
    line-height: 1.5;
    font-size: 0.9rem;
}

.proxies-table {
    overflow-x: auto;
    margin-bottom: 2rem;
}

.proxies-table table {
    width: 100%;
    border-collapse: collapse;
    background: var(--card-bg);
    border-radius: 8px;
    overflow: hidden;
    box-shadow: var(--shadow-glow);
    border: 1px solid var(--card-border);
}

.proxies-table th,
.proxies-table td {
    padding: 0.75rem;
    text-align: left;
    border-bottom: 1px solid var(--card-border);
}

.proxies-table th {
    background: rgba(139, 92, 246, 0.1);
    font-weight: 600;
    color: var(--foreground);
    font-size: 0.9rem;
}

.proxies-table td {
    font-size: 0.9rem;
    vertical-align: top;
}

.interpretation-cell {
    max-width: 300px;
    word-wrap: break-word;
    line-height: 1.4;
    color: var(--foreground-muted);
}

.methylation-panel__provenance {
    margin-top: 2rem;
    padding: 1.5rem;
    background: var(--card-bg);
    backdrop-filter: blur(12px);
    border-radius: 8px;
    border-left: 4px solid var(--brand-primary);
    border: 1px solid var(--card-border);
    border-left: 4px solid var(--brand-primary);
}

.methylation-panel__provenance h4 {
    font-size: 1.1rem;
    font-weight: 600;
    color: var(--foreground);
    margin-bottom: 1rem;
}

.provenance-content p {
    margin: 0;
    color: var(--foreground-muted);
    line-height: 1.5;
    font-style: italic;
}
    border-radius: 8px;
    padding: 1rem;
    margin-bottom: 1.5rem;
    border-left: 4px solid #f59e0b;
}

.proxies-table {
    overflow-x: auto;
}

.proxies-table .table {
    margin: 0;
    border: none;
}

.proxies-table .table th {
    background: var(--brand-secondary);
    color: white;
    font-weight: 600;
    padding: 1rem;
    border: none;
}

.proxies-table .table td {
    padding: 1rem;
    border-bottom: 1px solid #f3f4f6;
    vertical-align: middle;
}

.type-badge {
    display: inline-block;
    padding: 0.25rem 0.5rem;
    border-radius: 12px;
    font-size: 0.75rem;
    font-weight: 500;
}

.type-badge--lab_units {
    background: rgba(59, 130, 246, 0.2);
    color: #60a5fa;
}

.type-badge--standardized_index {
    background: rgba(236, 72, 153, 0.2);
    color: #f472b6;
}

.not-measured {
    color: var(--foreground-muted);
    font-style: italic;
}

.no-delta {
    color: var(--foreground-muted);
}

.alignment-badge {
    display: inline-block;
    padding: 0.25rem 0.5rem;
    border-radius: 12px;
    font-size: 0.75rem;
    font-weight: 500;
}

.alignment-badge--aligned {
    background: rgba(16, 185, 129, 0.2);
    color: #34d399;
}

.alignment-badge--misaligned {
    background: rgba(239, 68, 68, 0.2);
    color: #f87171;
}

.methylation-panel__integration,
.methylation-panel__governance {
    background: var(--card-bg);
    backdrop-filter: blur(12px);
    border-radius: 12px;
    padding: 1.5rem;
    margin-bottom: 2rem;
    box-shadow: var(--shadow-glow);
    border: 1px solid var(--card-border);
}

.methylation-panel__integration h4,
.methylation-panel__governance h4 {
    font-size: 1.2rem;
    font-weight: 600;
    margin-bottom: 1rem;
    color: var(--foreground);
    border-bottom: 2px solid var(--brand-primary);
    padding-bottom: 0.5rem;
}

.integration-content,
.governance-content {
    display: flex;
    flex-direction: column;
    gap: 1rem;
}

.integration-item,
.governance-item {
    padding: 0.75rem;
    background: var(--card-bg);
    border-radius: 8px;
    border-left: 4px solid var(--brand-primary);
    border: 1px solid var(--card-border);
    border-left: 4px solid var(--brand-primary);
}

/* New Methylation Panel Styles (Clocks, Pace, Proxies) */
.methylation-panel__composite {
    background: var(--card-bg);
    backdrop-filter: blur(12px);
    border-radius: 12px;
    padding: 1.5rem;
    margin-bottom: 2rem;
    box-shadow: var(--shadow-glow);
    border: 1px solid var(--card-border);
}

.methylation-panel__composite h4 {
    font-size: 1.2rem;
    font-weight: 600;
    margin-bottom: 1.5rem;
    color: var(--foreground);
    border-bottom: 2px solid var(--brand-primary);
    padding-bottom: 0.5rem;
}

.methylation-panel__composite .composite-card {
    background: var(--card-bg);
    backdrop-filter: blur(12px);
    border-radius: 12px;
    padding: 1.5rem;
    border: 1px solid var(--card-border);
}

.methylation-panel__composite .composite-card--very_low {
    border-left: 4px solid #60a5fa;
}

.methylation-panel__composite .composite-card--low {
    border-left: 4px solid #34d399;
}

.methylation-panel__composite .composite-card--typical {
    border-left: 4px solid #a78bfa;
}

.methylation-panel__composite .composite-card--high {
    border-left: 4px solid #fbbf24;
}

.methylation-panel__composite .composite-card--very_high {
    border-left: 4px solid #f87171;
}

.methylation-panel__composite .composite-card--unknown {
    border-left: 4px solid #6b7280;
}

.methylation-panel__composite .composite-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 1.5rem;
}

.methylation-panel__composite .composite-name {
    font-size: 1.25rem;
    font-weight: 600;
    color: var(--foreground);
}

.methylation-panel__composite .composite-ages {
    display: flex;
    flex-wrap: wrap;
    gap: 2rem;
    margin-bottom: 1.5rem;
}

.methylation-panel__composite .composite-age {
    display: flex;
    flex-direction: column;
    align-items: center;
    padding: 1rem 1.5rem;
    background: var(--card-bg);
    border-radius: 8px;
    border: 1px solid var(--card-border);
}

.methylation-panel__composite .composite-age .age-value {
    font-size: 2.5rem;
    font-weight: 700;
    color: var(--foreground);
}

.methylation-panel__composite .composite-age .age-label {
    font-size: 0.85rem;
    color: var(--foreground-muted);
    margin-top: 0.25rem;
}

.methylation-panel__composite .composite-accel {
    display: flex;
    flex-direction: column;
    align-items: center;
    padding: 1rem 1.5rem;
    background: var(--card-bg);
    border-radius: 8px;
    border: 1px solid var(--card-border);
}

.methylation-panel__composite .composite-accel--positive {
    background: rgba(239, 68, 68, 0.1);
    border-color: rgba(239, 68, 68, 0.3);
}

.methylation-panel__composite .composite-accel--negative {
    background: rgba(16, 185, 129, 0.1);
    border-color: rgba(16, 185, 129, 0.3);
}

.methylation-panel__composite .composite-accel .accel-value {
    font-size: 2.5rem;
    font-weight: 700;
}

.methylation-panel__composite .composite-accel--positive .accel-value {
    color: #f87171;
}

.methylation-panel__composite .composite-accel--negative .accel-value {
    color: #34d399;
}

.methylation-panel__composite .composite-accel .accel-label {
    font-size: 0.85rem;
    color: var(--foreground-muted);
    margin-top: 0.25rem;
}

.methylation-panel__composite .composite-percentile {
    margin-top: 1rem;
}

/* Pace of Aging */
.methylation-panel__pace {
    background: var(--card-bg);
    backdrop-filter: blur(12px);
    border-radius: 12px;
    padding: 1.5rem;
    margin-bottom: 2rem;
    box-shadow: var(--shadow-glow);
    border: 1px solid var(--card-border);
}

.methylation-panel__pace h4 {
    font-size: 1.2rem;
    font-weight: 600;
    margin-bottom: 1.5rem;
    color: var(--foreground);
    border-bottom: 2px solid var(--brand-primary);
    padding-bottom: 0.5rem;
}

.pace-card {
    background: var(--card-bg);
    backdrop-filter: blur(12px);
    border-radius: 12px;
    padding: 1.5rem;
    border: 1px solid var(--card-border);
}

.pace-card--very_low {
    border-left: 4px solid #60a5fa;
}

.pace-card--low {
    border-left: 4px solid #34d399;
}

.pace-card--typical {
    border-left: 4px solid #a78bfa;
}

.pace-card--high {
    border-left: 4px solid #fbbf24;
}

.pace-card--very_high {
    border-left: 4px solid #f87171;
}

.pace-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 1.5rem;
}

.pace-name {
    font-size: 1.25rem;
    font-weight: 600;
    color: var(--foreground);
}

.pace-value-section {
    display: flex;
    flex-wrap: wrap;
    gap: 2rem;
    align-items: center;
    margin-bottom: 1.5rem;
}

.pace-value {
    display: flex;
    flex-direction: column;
    align-items: center;
    padding: 1rem 1.5rem;
    background: var(--card-bg);
    border-radius: 8px;
    border: 1px solid var(--card-border);
}

.pace-value .value-number {
    font-size: 2.5rem;
    font-weight: 700;
    color: var(--brand-primary);
}

.pace-value .value-label {
    font-size: 0.85rem;
    color: var(--foreground-muted);
    margin-top: 0.25rem;
}

.pace-interpretation {
    flex: 1;
}

.pace-interpretation p {
    margin: 0;
    color: var(--foreground-muted);
    font-style: italic;
}

.pace-percentile {
    margin-bottom: 1rem;
}

.pace-refs {
    font-size: 0.85rem;
    color: var(--foreground-muted);
}

.pace-refs .refs-label {
    font-weight: 500;
    margin-right: 0.5rem;
}

.pace-refs .refs-list {
    font-family: var(--font-mono);
    font-size: 0.8rem;
}

/* Epigenetic Clocks */
.methylation-panel__clocks {
    background: var(--card-bg);
    backdrop-filter: blur(12px);
    border-radius: 12px;
    padding: 1.5rem;
    margin-bottom: 2rem;
    box-shadow: var(--shadow-glow);
    border: 1px solid var(--card-border);
}

.methylation-panel__clocks h4 {
    font-size: 1.2rem;
    font-weight: 600;
    margin-bottom: 1.5rem;
    color: var(--foreground);
    border-bottom: 2px solid var(--brand-primary);
    padding-bottom: 0.5rem;
}

.clocks-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
    gap: 1.5rem;
}

.clock-card {
    background: var(--card-bg);
    backdrop-filter: blur(12px);
    border-radius: 8px;
    padding: 1.25rem;
    border: 1px solid var(--card-border);
    box-shadow: var(--shadow-glow);
}

.clock-card--very_low {
    border-left: 4px solid #60a5fa;
}

.clock-card--low {
    border-left: 4px solid #34d399;
}

.clock-card--typical {
    border-left: 4px solid #a78bfa;
}

.clock-card--high {
    border-left: 4px solid #fbbf24;
}

.clock-card--very_high {
    border-left: 4px solid #f87171;
}

.clock-card--unknown {
    border-left: 4px solid #6b7280;
}

.clock-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 1rem;
}

.clock-name {
    font-weight: 600;
    color: var(--foreground);
    font-size: 1rem;
}

.clock-ages {
    display: flex;
    gap: 1rem;
    margin-bottom: 1rem;
}

.clock-age {
    display: flex;
    flex-direction: column;
    align-items: center;
    padding: 0.75rem;
    background: var(--card-bg);
    border-radius: 6px;
    border: 1px solid var(--card-border);
    flex: 1;
}

.clock-age .age-value {
    font-size: 1.5rem;
    font-weight: 700;
    color: var(--foreground);
}

.clock-age .age-label {
    font-size: 0.75rem;
    color: var(--foreground-muted);
    margin-top: 0.25rem;
}

.clock-accel {
    display: flex;
    flex-direction: column;
    align-items: center;
    padding: 0.75rem;
    background: var(--card-bg);
    border-radius: 6px;
    border: 1px solid var(--card-border);
    flex: 1;
}

.clock-accel--positive {
    background: rgba(239, 68, 68, 0.1);
    border-color: rgba(239, 68, 68, 0.3);
}

.clock-accel--negative {
    background: rgba(16, 185, 129, 0.1);
    border-color: rgba(16, 185, 129, 0.3);
}

.clock-accel .accel-value {
    font-size: 1.5rem;
    font-weight: 700;
}

.clock-accel--positive .accel-value {
    color: #f87171;
}

.clock-accel--negative .accel-value {
    color: #34d399;
}

.clock-accel .accel-label {
    font-size: 0.75rem;
    color: var(--foreground-muted);
    margin-top: 0.25rem;
}

.clock-percentile {
    margin-bottom: 0.75rem;
}

.clock-percentile .percentile-bar {
    height: 6px;
}

.clock-percentile .percentile-value {
    font-size: 0.8rem;
}

.clock-norms,
.clock-refs {
    font-size: 0.8rem;
    color: var(--foreground-muted);
    margin-top: 0.5rem;
}

.clock-norms .norms-label,
.clock-refs .refs-label {
    font-weight: 500;
    margin-right: 0.25rem;
}

.clock-refs .refs-list {
    font-family: var(--font-mono);
    font-size: 0.75rem;
}

/* Grim Proxies */
.methylation-panel__proxies .proxies-description {
    color: var(--foreground-muted);
    margin-bottom: 1.5rem;
    font-size: 0.95rem;
    line-height: 1.5;
}

.proxies-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));
    gap: 1.5rem;
}

.proxy-card {
    background: var(--card-bg);
    backdrop-filter: blur(12px);
    border-radius: 8px;
    padding: 1.25rem;
    border: 1px solid var(--card-border);
    box-shadow: var(--shadow-glow);
}

.proxy-card--very_low {
    border-left: 4px solid #60a5fa;
}

.proxy-card--low {
    border-left: 4px solid #34d399;
}

.proxy-card--typical {
    border-left: 4px solid #a78bfa;
}

.proxy-card--high {
    border-left: 4px solid #fbbf24;
}

.proxy-card--very_high {
    border-left: 4px solid #f87171;
}

.proxy-card--unknown {
    border-left: 4px solid #6b7280;
}

.proxy-header {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    margin-bottom: 1rem;
    gap: 0.5rem;
}

.proxy-name {
    font-weight: 600;
    color: var(--foreground);
    font-size: 0.95rem;
    flex: 1;
}

.proxy-value-section {
    display: flex;
    flex-wrap: wrap;
    gap: 1rem;
    align-items: center;
    margin-bottom: 1rem;
}

.proxy-value {
    display: flex;
    flex-direction: column;
    align-items: center;
    padding: 0.75rem 1rem;
    background: var(--card-bg);
    border-radius: 6px;
    border: 1px solid var(--card-border);
}

.proxy-value .value-number {
    font-size: 1.5rem;
    font-weight: 700;
    color: var(--brand-primary);
}

.proxy-value .value-unit {
    font-size: 0.75rem;
    color: var(--foreground-muted);
    margin-top: 0.25rem;
}

.proxy-percentile {
    flex: 1;
    min-width: 150px;
}

.proxy-percentile .percentile-bar {
    height: 6px;
}

.proxy-percentile .percentile-value {
    font-size: 0.8rem;
}

.proxy-direction {
    margin-bottom: 1rem;
}

.proxy-direction .direction-badge--adverse_high {
    background: rgba(239, 68, 68, 0.15);
    color: #f87171;
    border: 1px solid rgba(239, 68, 68, 0.3);
    padding: 0.25rem 0.75rem;
    border-radius: 12px;
    font-size: 0.8rem;
    font-weight: 500;
}

.proxy-direction .direction-badge--adverse_low {
    background: rgba(59, 130, 246, 0.15);
    color: #60a5fa;
    border: 1px solid rgba(59, 130, 246, 0.3);
    padding: 0.25rem 0.75rem;
    border-radius: 12px;
    font-size: 0.8rem;
    font-weight: 500;
}

.proxy-direction .direction-badge--context_dependent {
    background: rgba(245, 158, 11, 0.15);
    color: #fbbf24;
    border: 1px solid rgba(245, 158, 11, 0.3);
    padding: 0.25rem 0.75rem;
    border-radius: 12px;
    font-size: 0.8rem;
    font-weight: 500;
}

.proxy-interpretation {
    margin-bottom: 1rem;
}

.proxy-interpretation .interpretation-summary {
    margin: 0 0 0.75rem 0;
    color: var(--foreground-muted);
    font-size: 0.9rem;
    line-height: 1.4;
    font-style: italic;
}

.proxy-interpretation .interpretation-detail {
    display: flex;
    flex-direction: column;
    gap: 0.25rem;
    margin-bottom: 0.5rem;
}

.proxy-interpretation .detail-label {
    font-weight: 500;
    color: var(--foreground);
    font-size: 0.8rem;
}

.proxy-interpretation .detail-value {
    color: var(--foreground-muted);
    font-size: 0.85rem;
    line-height: 1.4;
}

.proxy-no-norms {
    padding: 0.5rem 0.75rem;
    background: rgba(107, 114, 128, 0.15);
    border-radius: 6px;
    margin-bottom: 0.75rem;
}

.proxy-no-norms .no-norms-text {
    font-size: 0.8rem;
    color: #9ca3af;
    font-style: italic;
}

.proxy-refs {
    font-size: 0.75rem;
    color: var(--foreground-muted);
}

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

/* Banding Legend for Methylation */
.methylation-panel__banding-info {
    background: var(--card-bg);
    backdrop-filter: blur(12px);
    border-radius: 12px;
    padding: 1.5rem;
    margin-bottom: 2rem;
    box-shadow: var(--shadow-glow);
    border: 1px solid var(--card-border);
}

.methylation-panel__banding-info h4 {
    font-size: 1.2rem;
    font-weight: 600;
    margin-bottom: 1.5rem;
    color: var(--foreground);
    border-bottom: 2px solid var(--brand-primary);
    padding-bottom: 0.5rem;
}

/* Disclaimer for Methylation */
.methylation-panel__disclaimer {
    background: var(--card-bg);
    backdrop-filter: blur(12px);
    border-radius: 12px;
    padding: 1.5rem;
    box-shadow: var(--shadow-glow);
    border: 1px solid var(--card-border);
    border-left: 4px solid var(--foreground-muted);
}

.methylation-panel__disclaimer p {
    margin: 0;
    color: var(--foreground-muted);
    font-size: 0.9rem;
    line-height: 1.5;
}

.methylation-panel__disclaimer strong {
    color: var(--foreground);
}

/* Proteomic Panel Styles */
.proteomic-panel__header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 2rem;
    padding-bottom: 1rem;
    border-bottom: 1px solid var(--card-border);
}

.proteomic-panel__title {
    font-size: 1.5rem;
    font-weight: 600;
    color: var(--foreground);
    margin: 0;
}

.proteomic-panel__meta {
    display: flex;
    gap: 1rem;
    font-size: 0.9rem;
    color: var(--foreground-muted);
}

.proteomic-panel__summary {
    background: var(--card-bg);
    backdrop-filter: blur(12px);
    border-radius: 12px;
    padding: 1.5rem;
    margin-bottom: 2rem;
    box-shadow: var(--shadow-glow);
    border: 1px solid var(--card-border);
}

.proteomic-panel__summary h4 {
    font-size: 1.2rem;
    font-weight: 600;
    margin-bottom: 1.5rem;
    color: var(--foreground);
    border-bottom: 2px solid var(--brand-primary);
    padding-bottom: 0.5rem;
}

.composite-summary-card {
    background: var(--card-bg);
    backdrop-filter: blur(12px);
    border-radius: 12px;
    padding: 1.5rem;
    border: 1px solid var(--card-border);
}

.summary-stats {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
    gap: 1.5rem;
    margin-bottom: 1.5rem;
}

.stat-item {
    text-align: center;
    padding: 1rem;
    border-radius: 8px;
    border: 2px solid;
}

.stat-item--accelerated {
    background: rgba(239, 68, 68, 0.15);
    border-color: rgba(239, 68, 68, 0.3);
}

.stat-item--normal {
    background: rgba(16, 185, 129, 0.15);
    border-color: rgba(16, 185, 129, 0.3);
}

.stat-value {
    display: block;
    font-size: 2rem;
    font-weight: 700;
    color: var(--foreground);
    margin-bottom: 0.5rem;
}

.stat-label {
    font-size: 0.9rem;
    font-weight: 500;
    color: var(--foreground-muted);
}

.summary-comment {
    background: var(--card-bg);
    border-radius: 8px;
    padding: 1rem;
    border-left: 4px solid var(--brand-primary);
    border: 1px solid var(--card-border);
    border-left: 4px solid var(--brand-primary);
}

.summary-comment p {
    margin: 0;
    font-style: italic;
    color: var(--foreground-muted);
}

.proteomic-panel__organs {
    background: var(--card-bg);
    backdrop-filter: blur(12px);
    border-radius: 12px;
    padding: 1.5rem;
    margin-bottom: 2rem;
    box-shadow: var(--shadow-glow);
    border: 1px solid var(--card-border);
}

.proteomic-panel__organs h4 {
    font-size: 1.2rem;
    font-weight: 600;
    margin-bottom: 1.5rem;
    color: var(--foreground);
    border-bottom: 2px solid var(--brand-primary);
    padding-bottom: 0.5rem;
}

.organs-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
    gap: 1.5rem;
}

.organ-card {
    background: var(--card-bg);
    backdrop-filter: blur(12px);
    border-radius: 12px;
    padding: 1.5rem;
    border: 1px solid var(--card-border);
    transition: transform 0.2s ease, box-shadow 0.2s ease, border-color 0.2s ease;
}

.organ-card:hover {
    transform: translateY(-2px);
    box-shadow: var(--shadow-glow);
    border-color: var(--card-hover-border);
}

.organ-card--accelerated {
    border-color: rgba(239, 68, 68, 0.4);
    background: rgba(239, 68, 68, 0.1);
}

.organ-card--mild_acceleration {
    border-color: rgba(245, 158, 11, 0.4);
    background: rgba(245, 158, 11, 0.1);
}

.organ-card--normal {
    border-color: rgba(16, 185, 129, 0.4);
    background: rgba(16, 185, 129, 0.1);
}

.organ-card__header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 1rem;
}

.organ-card__name {
    font-size: 1.1rem;
    font-weight: 600;
    color: var(--foreground);
    margin: 0;
}

.organ-card__classification {
    padding: 0.25rem 0.75rem;
    border-radius: 20px;
    font-size: 0.8rem;
    font-weight: 500;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

.organ-card__classification--accelerated {
    background: rgba(239, 68, 68, 0.2);
    color: #f87171;
    border: 1px solid rgba(239, 68, 68, 0.3);
}

.organ-card__classification--mild_acceleration {
    background: rgba(245, 158, 11, 0.2);
    color: #fbbf24;
    border: 1px solid rgba(245, 158, 11, 0.3);
}

.organ-card__classification--normal {
    background: rgba(16, 185, 129, 0.2);
    color: #34d399;
    border: 1px solid rgba(16, 185, 129, 0.3);
}

.organ-card__content {
    text-align: center;
}

.organ-card .age-delta {
    margin-bottom: 1rem;
}

.organ-card .age-delta__value {
    font-size: 2rem;
    font-weight: 700;
    color: var(--brand-primary);
}

.organ-card .age-delta__unit {
    font-size: 1rem;
    color: #6b7280;
    margin-left: 0.5rem;
}

.organ-interpretation {
    margin: 0;
    font-size: 0.9rem;
    font-style: italic;
    color: var(--foreground-muted);
    line-height: 1.4;
}

.proteomic-panel__provenance {
    background: var(--card-bg);
    backdrop-filter: blur(12px);
    border-radius: 12px;
    padding: 1.5rem;
    border-left: 4px solid var(--brand-primary);
    border: 1px solid var(--card-border);
    border-left: 4px solid var(--brand-primary);
}

.proteomic-panel__provenance h4 {
    font-size: 1.1rem;
    font-weight: 600;
    margin-bottom: 1rem;
    color: var(--foreground);
}

.provenance-content p {
    margin: 0;
    line-height: 1.6;
    color: var(--foreground-muted);
}

/* Microbiome Panel Styles */
.microbiome-panel__header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 2rem;
    padding-bottom: 1rem;
    border-bottom: 1px solid var(--card-border);
}

.microbiome-panel__title {
    font-size: 1.5rem;
    font-weight: 600;
    color: var(--foreground);
    margin: 0;
}

.microbiome-panel__meta {
    display: flex;
    gap: 1rem;
    font-size: 0.9rem;
    color: var(--foreground-muted);
}

.microbiome-panel__version {
    background: var(--card-bg);
    padding: 0.25rem 0.5rem;
    border-radius: 4px;
    border: 1px solid var(--card-border);
}

.microbiome-panel__summary {
    background: var(--card-bg);
    backdrop-filter: blur(12px);
    border-radius: 12px;
    padding: 1.5rem;
    margin-bottom: 2rem;
    box-shadow: var(--shadow-glow);
    border: 1px solid var(--card-border);
}

.microbiome-panel__summary h4 {
    font-size: 1.2rem;
    font-weight: 600;
    margin-bottom: 1.5rem;
    color: var(--foreground);
    border-bottom: 2px solid var(--brand-primary);
    padding-bottom: 0.5rem;
}

.result-summary-card {
    background: var(--card-bg);
    backdrop-filter: blur(12px);
    border-radius: 12px;
    padding: 1.5rem;
    border: 1px solid var(--card-border);
}

.classification-section {
    display: flex;
    gap: 1rem;
    margin-bottom: 1.5rem;
    align-items: center;
}

.classification-badge {
    padding: 0.5rem 1rem;
    border-radius: 20px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

.classification-badge--healthy {
    background: rgba(16, 185, 129, 0.2);
    color: #34d399;
    border: 1px solid rgba(16, 185, 129, 0.3);
}

.classification-badge--non_healthy {
    background: rgba(239, 68, 68, 0.2);
    color: #f87171;
    border: 1px solid rgba(239, 68, 68, 0.3);
}

.confidence-badge {
    padding: 0.25rem 0.75rem;
    border-radius: 12px;
    font-size: 0.8rem;
    font-weight: 500;
}

.confidence-badge--high {
    background: rgba(59, 130, 246, 0.2);
    color: #60a5fa;
}

.confidence-badge--medium {
    background: rgba(245, 158, 11, 0.2);
    color: #fbbf24;
}

.confidence-badge--low {
    background: rgba(239, 68, 68, 0.2);
    color: #f87171;
}

.probability-section {
    text-align: center;
    margin-bottom: 1.5rem;
}

.probability-value {
    display: flex;
    flex-direction: column;
    align-items: center;
}

.probability-number {
    font-size: 2.5rem;
    font-weight: 700;
    color: var(--brand-primary);
}

.probability-label {
    font-size: 0.9rem;
    color: var(--foreground-muted);
    margin-top: 0.5rem;
}

.alignment-section {
    background: var(--card-bg);
    border-radius: 8px;
    padding: 1rem;
    border-left: 4px solid var(--brand-primary);
    border: 1px solid var(--card-border);
    border-left: 4px solid var(--brand-primary);
}

.alignment-text {
    margin: 0;
    font-style: italic;
    color: var(--foreground-muted);
    line-height: 1.5;
}

.microbiome-panel__functional,
.microbiome-panel__taxa,
.microbiome-panel__interventions {
    background: var(--card-bg);
    backdrop-filter: blur(12px);
    border-radius: 12px;
    padding: 1.5rem;
    margin-bottom: 2rem;
    box-shadow: var(--shadow-glow);
    border: 1px solid var(--card-border);
}

.microbiome-panel__functional h4,
.microbiome-panel__taxa h4,
.microbiome-panel__interventions h4 {
    font-size: 1.2rem;
    font-weight: 600;
    margin-bottom: 1rem;
    color: var(--foreground);
    border-bottom: 2px solid var(--brand-primary);
    padding-bottom: 0.5rem;
}

/* Functional Signatures Styles */
.functional-signatures {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(350px, 1fr));
    gap: 1.5rem;
}

.signature-card {
    background: var(--card-bg);
    backdrop-filter: blur(12px);
    border-radius: 8px;
    padding: 1.5rem;
    border: 1px solid var(--card-border);
    box-shadow: var(--shadow-glow);
}

.signature-card h5 {
    font-size: 1.1rem;
    font-weight: 600;
    color: var(--foreground);
    margin-bottom: 1rem;
    border-bottom: 1px solid var(--card-border);
    padding-bottom: 0.5rem;
}

.signature-metrics {
    margin-bottom: 1rem;
}

.metric-item {
    margin-bottom: 0.75rem;
}

.metric-label {
    font-weight: 500;
    color: var(--foreground-muted);
    display: block;
    margin-bottom: 0.25rem;
}

.metric-details {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 1rem;
}

.metric-value--reduced {
    color: #f87171;
    font-weight: 600;
}

.metric-value--slightly_reduced {
    color: #fbbf24;
    font-weight: 600;
}

.metric-value--low {
    color: #f87171;
    font-weight: 600;
}

.metric-value--elevated {
    color: #f87171;
    font-weight: 600;
}

.signature-interpretation {
    margin-top: 1rem;
    padding: 1rem;
    background: var(--card-bg);
    border-radius: 6px;
    border-left: 3px solid var(--brand-primary);
    border: 1px solid var(--card-border);
    border-left: 3px solid var(--brand-primary);
}

.signature-interpretation p {
    margin: 0;
    color: var(--foreground-muted);
    line-height: 1.5;
    font-style: italic;
}

/* Strain and Taxon Context Styles */
.strain-context {
    display: flex;
    flex-direction: column;
    gap: 2rem;
}

.taxon-group h5 {
    font-size: 1.1rem;
    font-weight: 600;
    color: var(--foreground);
    margin-bottom: 1rem;
    border-bottom: 1px solid var(--card-border);
    padding-bottom: 0.5rem;
}

.taxon-cards {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
    gap: 1rem;
}

.taxon-card {
    background: var(--card-bg);
    backdrop-filter: blur(12px);
    border-radius: 8px;
    padding: 1rem;
    border: 1px solid var(--card-border);
    box-shadow: var(--shadow-glow);
}

.taxon-card--beneficial {
    border-left: 4px solid #34d399;
}

.taxon-card--opportunistic {
    border-left: 4px solid #f87171;
}

.taxon-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 0.75rem;
}

.taxon-name {
    font-weight: 600;
    color: var(--foreground);
    font-size: 0.95rem;
}

.taxon-status--low {
    background: rgba(239, 68, 68, 0.2);
    color: #f87171;
    padding: 0.25rem 0.5rem;
    border-radius: 12px;
    font-size: 0.8rem;
    font-weight: 500;
}

.taxon-status--high {
    background: rgba(239, 68, 68, 0.2);
    color: #f87171;
    padding: 0.25rem 0.5rem;
    border-radius: 12px;
    font-size: 0.8rem;
    font-weight: 500;
}

.taxon-status--borderline_high {
    background: rgba(245, 158, 11, 0.2);
    color: #fbbf24;
    padding: 0.25rem 0.5rem;
    border-radius: 12px;
    font-size: 0.8rem;
    font-weight: 500;
}

.taxon-metrics {
    margin-bottom: 0.75rem;
}

.metric-row {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 0.25rem;
    font-size: 0.9rem;
}

.metric-row .metric-label {
    color: var(--foreground-muted);
    font-weight: 500;
}

.metric-row .metric-value {
    color: var(--foreground);
    font-weight: 600;
}

.taxon-note p {
    margin: 0;
    color: var(--foreground-muted);
    line-height: 1.4;
    font-size: 0.9rem;
    font-style: italic;
}

.method-note {
    margin-top: 1rem;
    padding: 1rem;
    background: var(--card-bg);
    border-radius: 6px;
    border-left: 3px solid var(--foreground-muted);
    border: 1px solid var(--card-border);
    border-left: 3px solid var(--foreground-muted);
}

.method-note p {
    margin: 0;
    color: var(--foreground-muted);
    line-height: 1.5;
    font-size: 0.9rem;
}

/* Targeted Interventions Styles */
.targeted-interventions {
    display: flex;
    flex-direction: column;
    gap: 2rem;
}

.intervention-group h5 {
    font-size: 1.1rem;
    font-weight: 600;
    color: var(--foreground);
    margin-bottom: 1rem;
    border-bottom: 1px solid var(--card-border);
    padding-bottom: 0.5rem;
}

.intervention-list {
    margin: 0;
    padding-left: 1.5rem;
}

.intervention-list li {
    margin-bottom: 0.75rem;
    color: var(--foreground-muted);
    line-height: 1.5;
}

.probiotic-cards {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(400px, 1fr));
    gap: 1rem;
}

.probiotic-card {
    background: var(--card-bg);
    backdrop-filter: blur(12px);
    border-radius: 8px;
    padding: 1.5rem;
    border: 1px solid var(--card-border);
    box-shadow: var(--shadow-glow);
}

.probiotic-header {
    margin-bottom: 1rem;
}

.probiotic-indication {
    font-weight: 600;
    color: var(--foreground);
    font-size: 1rem;
}

.probiotic-details {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
}

.detail-row {
    display: flex;
    flex-direction: column;
    gap: 0.25rem;
}

.detail-label {
    font-weight: 500;
    color: var(--foreground-muted);
    font-size: 0.9rem;
}

.detail-value {
    color: var(--foreground);
    font-size: 0.9rem;
    line-height: 1.4;
}

/* New Microbiome Panel Styles (GMWI2, Indices, Composites) */
.microbiome-panel__qc-banner {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    padding: 1rem;
    background: rgba(245, 158, 11, 0.15);
    border: 1px solid rgba(245, 158, 11, 0.3);
    border-radius: 8px;
    margin-bottom: 1.5rem;
}

.qc-banner-icon {
    font-size: 1.2rem;
}

.qc-banner-text {
    color: #fbbf24;
    font-size: 0.9rem;
    line-height: 1.4;
}

.microbiome-panel__patient-summary {
    background: var(--card-bg);
    backdrop-filter: blur(12px);
    border-radius: 12px;
    padding: 1.5rem;
    margin-bottom: 2rem;
    box-shadow: var(--shadow-glow);
    border: 1px solid var(--card-border);
}

.microbiome-panel__patient-summary h4 {
    font-size: 1.2rem;
    font-weight: 600;
    margin-bottom: 1rem;
    color: var(--foreground);
    border-bottom: 2px solid var(--brand-primary);
    padding-bottom: 0.5rem;
}

.patient-summary-list {
    margin: 0;
    padding-left: 1.5rem;
    list-style: disc;
}

.patient-summary-list li {
    color: var(--foreground-muted);
    margin-bottom: 0.5rem;
    line-height: 1.5;
}

/* GMWI2 Wellness Index */
.microbiome-panel__gmwi2 {
    background: var(--card-bg);
    backdrop-filter: blur(12px);
    border-radius: 12px;
    padding: 1.5rem;
    margin-bottom: 2rem;
    box-shadow: var(--shadow-glow);
    border: 1px solid var(--card-border);
}

.microbiome-panel__gmwi2 h4 {
    font-size: 1.2rem;
    font-weight: 600;
    margin-bottom: 1.5rem;
    color: var(--foreground);
    border-bottom: 2px solid var(--brand-primary);
    padding-bottom: 0.5rem;
}

.gmwi2-summary {
    display: flex;
    flex-wrap: wrap;
    gap: 2rem;
    align-items: center;
    margin-bottom: 1.5rem;
}

.gmwi2-score-card {
    display: flex;
    flex-direction: column;
    gap: 1rem;
}

.gmwi2-primary {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
}

.gmwi2-score-value {
    font-size: 3rem;
    font-weight: 700;
    color: var(--brand-primary);
    line-height: 1;
}

.gmwi2-score-label {
    font-size: 0.9rem;
    color: var(--foreground-muted);
    margin-top: 0.25rem;
}

.gmwi2-badges {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
}

.direction-badge {
    padding: 0.25rem 0.75rem;
    border-radius: 12px;
    font-size: 0.8rem;
    font-weight: 500;
}

.direction-badge--wellness_side {
    background: rgba(16, 185, 129, 0.2);
    color: #34d399;
    border: 1px solid rgba(16, 185, 129, 0.3);
}

.direction-badge--dysbiosis_side {
    background: rgba(239, 68, 68, 0.2);
    color: #f87171;
    border: 1px solid rgba(239, 68, 68, 0.3);
}

.gmwi2-metrics {
    display: flex;
    gap: 2rem;
}

.gmwi2-metric {
    display: flex;
    flex-direction: column;
    align-items: center;
    padding: 1rem;
    background: var(--card-bg);
    border-radius: 8px;
    border: 1px solid var(--card-border);
}

.gmwi2-metric .metric-value {
    font-size: 1.5rem;
    font-weight: 600;
    color: var(--foreground);
}

.gmwi2-metric .metric-label {
    font-size: 0.8rem;
    color: var(--foreground-muted);
    display: block;
    margin-top: 0.25rem;
}

.gmwi2-interpretation {
    background: var(--card-bg);
    border-radius: 8px;
    padding: 1rem;
    border-left: 4px solid var(--brand-primary);
    border: 1px solid var(--card-border);
    border-left: 4px solid var(--brand-primary);
    margin-bottom: 1.5rem;
}

.gmwi2-interpretation p {
    margin: 0;
    color: var(--foreground-muted);
    line-height: 1.5;
    font-style: italic;
}

.gmwi2-contributors {
    margin-top: 1.5rem;
}

.gmwi2-contributors h5 {
    font-size: 1rem;
    font-weight: 600;
    color: var(--foreground);
    margin-bottom: 1rem;
}

.contributors-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
    gap: 0.5rem;
}

.contributor-item {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 0.5rem 0.75rem;
    background: var(--card-bg);
    border-radius: 6px;
    border: 1px solid var(--card-border);
}

.contributor-item--positive {
    border-left: 3px solid #34d399;
}

.contributor-item--negative {
    border-left: 3px solid #f87171;
}

.contributor-name {
    font-size: 0.85rem;
    color: var(--foreground);
    font-style: italic;
}

.contributor-coef {
    font-size: 0.85rem;
    font-weight: 600;
    font-family: var(--font-mono);
}

.contributor-item--positive .contributor-coef {
    color: #34d399;
}

.contributor-item--negative .contributor-coef {
    color: #f87171;
}

/* Functional Indices */
.microbiome-panel__indices {
    background: var(--card-bg);
    backdrop-filter: blur(12px);
    border-radius: 12px;
    padding: 1.5rem;
    margin-bottom: 2rem;
    box-shadow: var(--shadow-glow);
    border: 1px solid var(--card-border);
}

.microbiome-panel__indices h4 {
    font-size: 1.2rem;
    font-weight: 600;
    margin-bottom: 1.5rem;
    color: var(--foreground);
    border-bottom: 2px solid var(--brand-primary);
    padding-bottom: 0.5rem;
}

.indices-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));
    gap: 1.5rem;
}

.index-card {
    background: var(--card-bg);
    backdrop-filter: blur(12px);
    border-radius: 8px;
    padding: 1.25rem;
    border: 1px solid var(--card-border);
    box-shadow: var(--shadow-glow);
}

.index-card--typical {
    border-left: 4px solid #34d399;
}

.index-card--elevated,
.index-card--high {
    border-left: 4px solid #fbbf24;
}

.index-card--low {
    border-left: 4px solid #60a5fa;
}

.index-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 1rem;
}

.index-name {
    font-weight: 600;
    color: var(--foreground);
    font-size: 1rem;
}

.index-value {
    display: flex;
    flex-direction: column;
    align-items: center;
    padding: 1rem;
    background: var(--card-bg);
    border-radius: 8px;
    border: 1px solid var(--card-border);
    margin-bottom: 1rem;
}

.index-value .value-number {
    font-size: 1.75rem;
    font-weight: 700;
    color: var(--brand-primary);
}

.index-value .value-label {
    font-size: 0.8rem;
    color: var(--foreground-muted);
}

.index-explanation {
    margin-bottom: 1rem;
}

.index-explanation p {
    margin: 0;
    color: var(--foreground-muted);
    line-height: 1.5;
    font-size: 0.9rem;
}

.index-actions {
    margin-bottom: 1rem;
}

.index-actions .actions-label {
    font-weight: 600;
    color: var(--foreground);
    font-size: 0.9rem;
    display: block;
    margin-bottom: 0.5rem;
}

.index-actions .actions-list {
    margin: 0;
    padding-left: 1.25rem;
    list-style: disc;
}

.index-actions .actions-list li {
    color: var(--foreground-muted);
    font-size: 0.85rem;
    margin-bottom: 0.25rem;
    line-height: 1.4;
}

.index-components {
    margin-top: 1rem;
}

.index-components summary {
    cursor: pointer;
    color: var(--brand-primary);
    font-size: 0.85rem;
    font-weight: 500;
}

.index-components summary:hover {
    color: var(--brand-primary-hover);
}

.components-list {
    margin-top: 0.75rem;
    padding: 0.75rem;
    background: var(--card-bg);
    border-radius: 6px;
    border: 1px solid var(--card-border);
}

.component-item {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 0.25rem 0;
    font-size: 0.8rem;
    border-bottom: 1px solid var(--card-border);
}

.component-item:last-child {
    border-bottom: none;
}

.component-id {
    font-family: var(--font-mono);
    color: var(--foreground-muted);
}

.component-value {
    font-weight: 600;
    color: var(--foreground);
}

.component-weight {
    color: var(--foreground-muted);
    font-size: 0.75rem;
}

/* Composite Detection Panels */
.microbiome-panel__composites {
    background: var(--card-bg);
    backdrop-filter: blur(12px);
    border-radius: 12px;
    padding: 1.5rem;
    margin-bottom: 2rem;
    box-shadow: var(--shadow-glow);
    border: 1px solid var(--card-border);
}

.microbiome-panel__composites h4 {
    font-size: 1.2rem;
    font-weight: 600;
    margin-bottom: 1.5rem;
    color: var(--foreground);
    border-bottom: 2px solid var(--brand-primary);
    padding-bottom: 0.5rem;
}

.composites-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
    gap: 1rem;
}

.composite-card {
    background: var(--card-bg);
    backdrop-filter: blur(12px);
    border-radius: 8px;
    padding: 1.25rem;
    border: 1px solid var(--card-border);
    box-shadow: var(--shadow-glow);
}

.composite-card--absent {
    border-left: 4px solid #6b7280;
}

.composite-card--present {
    border-left: 4px solid #fbbf24;
}

.composite-card--detected {
    border-left: 4px solid #f87171;
}

.composite-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 1rem;
}

.composite-name {
    font-weight: 600;
    color: var(--foreground);
    font-size: 0.95rem;
}

.state-badge {
    padding: 0.25rem 0.75rem;
    border-radius: 12px;
    font-size: 0.8rem;
    font-weight: 500;
}

.state-badge--absent {
    background: rgba(107, 114, 128, 0.2);
    color: #9ca3af;
    border: 1px solid rgba(107, 114, 128, 0.3);
}

.state-badge--present {
    background: rgba(245, 158, 11, 0.2);
    color: #fbbf24;
    border: 1px solid rgba(245, 158, 11, 0.3);
}

.state-badge--detected {
    background: rgba(239, 68, 68, 0.2);
    color: #f87171;
    border: 1px solid rgba(239, 68, 68, 0.3);
}

.composite-explanation {
    margin-bottom: 1rem;
}

.composite-explanation p {
    margin: 0;
    color: var(--foreground-muted);
    line-height: 1.5;
    font-size: 0.9rem;
}

.composite-hits {
    margin-bottom: 1rem;
    padding: 0.75rem;
    background: rgba(245, 158, 11, 0.1);
    border-radius: 6px;
}

.composite-hits .hits-label {
    font-weight: 600;
    color: #fbbf24;
    margin-right: 0.5rem;
}

.composite-hits .hits-list {
    color: var(--foreground);
    font-size: 0.9rem;
}

.composite-followups .followups-label {
    font-weight: 600;
    color: var(--foreground);
    font-size: 0.9rem;
    display: block;
    margin-bottom: 0.5rem;
}

.composite-followups .followups-list {
    margin: 0;
    padding-left: 1.25rem;
    list-style: disc;
}

.composite-followups .followups-list li {
    color: var(--foreground-muted);
    font-size: 0.85rem;
    margin-bottom: 0.25rem;
    line-height: 1.4;
}

/* Taxonomy Section */
.microbiome-panel__taxonomy {
    background: var(--card-bg);
    backdrop-filter: blur(12px);
    border-radius: 12px;
    padding: 1.5rem;
    margin-bottom: 2rem;
    box-shadow: var(--shadow-glow);
    border: 1px solid var(--card-border);
}

.microbiome-panel__taxonomy h4 {
    font-size: 1.2rem;
    font-weight: 600;
    margin-bottom: 1.5rem;
    color: var(--foreground);
    border-bottom: 2px solid var(--brand-primary);
    padding-bottom: 0.5rem;
}

.taxonomy-content {
    display: flex;
    flex-wrap: wrap;
    gap: 2rem;
}

.diversity-metric {
    display: flex;
    flex-direction: column;
    align-items: center;
    padding: 1.5rem;
    background: var(--card-bg);
    border-radius: 8px;
    border: 1px solid var(--card-border);
}

.diversity-value {
    font-size: 2.5rem;
    font-weight: 700;
    color: var(--brand-primary);
}

.diversity-label {
    font-size: 0.9rem;
    color: var(--foreground-muted);
    margin-top: 0.25rem;
}

.top-species {
    flex: 1;
}

.top-species h5 {
    font-size: 1rem;
    font-weight: 600;
    color: var(--foreground);
    margin-bottom: 0.75rem;
}

.species-list {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
}

.species-item {
    padding: 0.5rem 0.75rem;
    background: var(--card-bg);
    border-radius: 6px;
    border: 1px solid var(--card-border);
    font-size: 0.85rem;
    color: var(--foreground);
    font-style: italic;
}

/* Notable Taxa */
.microbiome-panel__notable-taxa {
    background: var(--card-bg);
    backdrop-filter: blur(12px);
    border-radius: 12px;
    padding: 1.5rem;
    margin-bottom: 2rem;
    box-shadow: var(--shadow-glow);
    border: 1px solid var(--card-border);
}

.microbiome-panel__notable-taxa h4 {
    font-size: 1.2rem;
    font-weight: 600;
    margin-bottom: 1.5rem;
    color: var(--foreground);
    border-bottom: 2px solid var(--brand-primary);
    padding-bottom: 0.5rem;
}

.notable-taxa-grid {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
}

.notable-taxon-card {
    padding: 0.5rem 0.75rem;
    background: var(--card-bg);
    border-radius: 6px;
    border: 1px solid var(--card-border);
}

.notable-taxon-card .taxon-name {
    font-size: 0.9rem;
    color: var(--foreground);
    font-style: italic;
}

/* HUMAnN Summary */
.microbiome-panel__humann {
    background: var(--card-bg);
    backdrop-filter: blur(12px);
    border-radius: 12px;
    padding: 1.5rem;
    margin-bottom: 2rem;
    box-shadow: var(--shadow-glow);
    border: 1px solid var(--card-border);
}

.microbiome-panel__humann h4 {
    font-size: 1.2rem;
    font-weight: 600;
    margin-bottom: 1.5rem;
    color: var(--foreground);
    border-bottom: 2px solid var(--brand-primary);
    padding-bottom: 0.5rem;
}

.humann-metrics {
    display: flex;
    flex-wrap: wrap;
    gap: 1.5rem;
}

.humann-metric {
    display: flex;
    flex-direction: column;
    align-items: center;
    padding: 1rem 1.5rem;
    background: var(--card-bg);
    border-radius: 8px;
    border: 1px solid var(--card-border);
}

.humann-metric .metric-value {
    font-size: 1.5rem;
    font-weight: 600;
    color: var(--foreground);
}

.humann-metric .metric-label {
    font-size: 0.8rem;
    color: var(--foreground-muted);
    margin-top: 0.25rem;
    display: block;
}

/* QC Flags */
.microbiome-panel__qc-flags {
    background: var(--card-bg);
    backdrop-filter: blur(12px);
    border-radius: 12px;
    padding: 1.5rem;
    margin-bottom: 2rem;
    box-shadow: var(--shadow-glow);
    border: 1px solid var(--card-border);
}

.microbiome-panel__qc-flags h4 {
    font-size: 1.2rem;
    font-weight: 600;
    margin-bottom: 1.5rem;
    color: var(--foreground);
    border-bottom: 2px solid var(--brand-primary);
    padding-bottom: 0.5rem;
}

.qc-flags-list {
    display: flex;
    flex-wrap: wrap;
    gap: 0.75rem;
}

.qc-flag-item {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.5rem 0.75rem;
    background: rgba(245, 158, 11, 0.1);
    border: 1px solid rgba(245, 158, 11, 0.3);
    border-radius: 6px;
}

.qc-flag-name {
    font-size: 0.85rem;
    color: #fbbf24;
    font-weight: 500;
}

.qc-flag-value {
    font-size: 0.85rem;
    color: var(--foreground);
    font-weight: 600;
}

/* Provenance */
.microbiome-panel__provenance {
    background: var(--card-bg);
    backdrop-filter: blur(12px);
    border-radius: 12px;
    padding: 1.5rem;
    margin-bottom: 2rem;
    box-shadow: var(--shadow-glow);
    border: 1px solid var(--card-border);
}

.microbiome-panel__provenance h4 {
    font-size: 1.2rem;
    font-weight: 600;
    margin-bottom: 1rem;
    color: var(--foreground);
    border-bottom: 2px solid var(--brand-primary);
    padding-bottom: 0.5rem;
}

.provenance-content {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
}

.provenance-tools,
.provenance-dbs {
    font-size: 0.9rem;
}

.provenance-label {
    font-weight: 500;
    color: var(--foreground-muted);
    margin-right: 0.5rem;
}

.provenance-value {
    color: var(--foreground);
    font-family: var(--font-mono);
    font-size: 0.85rem;
}

/* Disclaimers */
.microbiome-panel__disclaimers {
    background: var(--card-bg);
    backdrop-filter: blur(12px);
    border-radius: 12px;
    padding: 1.5rem;
    margin-bottom: 1rem;
    box-shadow: var(--shadow-glow);
    border: 1px solid var(--card-border);
    border-left: 4px solid var(--foreground-muted);
}

.microbiome-panel__disclaimers .disclaimers-content {
    color: var(--foreground-muted);
}

.microbiome-panel__disclaimers .disclaimer-text {
    margin: 0;
    font-size: 0.9rem;
    line-height: 1.5;
    font-style: italic;
}

.microbiome-panel__disclaimers-detail {
    background: var(--card-bg);
    backdrop-filter: blur(12px);
    border-radius: 12px;
    padding: 1rem;
    border: 1px solid var(--card-border);
}

.microbiome-panel__disclaimers-detail summary {
    cursor: pointer;
    color: var(--brand-primary);
    font-weight: 500;
}

.microbiome-panel__disclaimers-detail summary:hover {
    color: var(--brand-primary-hover);
}

.disclaimers-sections {
    margin-top: 1rem;
    padding-top: 1rem;
    border-top: 1px solid var(--card-border);
}

.disclaimer-section {
    margin-bottom: 1.5rem;
}

.disclaimer-section:last-child {
    margin-bottom: 0;
}

.disclaimer-section h5 {
    font-size: 0.95rem;
    font-weight: 600;
    color: var(--foreground);
    margin-bottom: 0.5rem;
}

.disclaimer-section ul {
    margin: 0;
    padding-left: 1.25rem;
    list-style: disc;
}

.disclaimer-section li {
    color: var(--foreground-muted);
    font-size: 0.85rem;
    margin-bottom: 0.25rem;
    line-height: 1.4;
}

/* Labs Panel Styles */
.labs-panel__header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 2rem;
    padding-bottom: 1rem;
    border-bottom: 1px solid var(--card-border);
}

.labs-panel__title {
    font-size: 1.5rem;
    font-weight: 600;
    color: var(--foreground);
    margin: 0;
}

.labs-panel__meta {
    display: flex;
    gap: 1rem;
    font-size: 0.9rem;
    color: var(--foreground-muted);
}

.labs-panel__summary {
    background: var(--card-bg);
    backdrop-filter: blur(12px);
    border-radius: 12px;
    padding: 1.5rem;
    margin-bottom: 2rem;
    box-shadow: var(--shadow-glow);
    border: 1px solid var(--card-border);
}

.labs-panel__summary h4 {
    font-size: 1.2rem;
    font-weight: 600;
    margin-bottom: 1.5rem;
    color: var(--foreground);
    border-bottom: 2px solid var(--brand-primary);
    padding-bottom: 0.5rem;
}

.summary-card {
    background: var(--card-bg);
    backdrop-filter: blur(12px);
    border-radius: 12px;
    padding: 1.5rem;
    border: 1px solid var(--card-border);
}

.overall-flags {
    margin-bottom: 1rem;
}

.flags-badge {
    padding: 0.5rem 1rem;
    border-radius: 20px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

.flags-badge--within_reference_limits {
    background: rgba(16, 185, 129, 0.2);
    color: #34d399;
    border: 1px solid rgba(16, 185, 129, 0.3);
}

.flags-badge--abnormal {
    background: rgba(239, 68, 68, 0.2);
    color: #f87171;
    border: 1px solid rgba(239, 68, 68, 0.3);
}

.notable-points h5 {
    font-size: 1rem;
    font-weight: 600;
    margin-bottom: 0.5rem;
    color: var(--foreground);
}

.notable-points ul {
    margin: 0;
    padding-left: 1.5rem;
}

.notable-points li {
    margin-bottom: 0.5rem;
    color: var(--foreground-muted);
    line-height: 1.4;
}

.labs-panel__section {
    background: var(--card-bg);
    backdrop-filter: blur(12px);
    border-radius: 12px;
    padding: 1.5rem;
    margin-bottom: 2rem;
    box-shadow: var(--shadow-glow);
    border: 1px solid var(--card-border);
}

.labs-panel__section h4 {
    font-size: 1.2rem;
    font-weight: 600;
    margin-bottom: 1.5rem;
    color: var(--foreground);
    border-bottom: 2px solid var(--brand-primary);
    padding-bottom: 0.5rem;
}

.lab-values-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
    gap: 1rem;
}

.lab-value-item {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 0.75rem;
    background: var(--card-bg);
    border-radius: 8px;
    border-left: 4px solid var(--brand-primary);
    border: 1px solid var(--card-border);
    border-left: 4px solid var(--brand-primary);
}

.lab-label {
    font-weight: 500;
    color: var(--foreground);
    min-width: 120px;
}

.lab-value-content {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    flex-wrap: wrap;
}

.lab-value {
    font-weight: 600;
    color: var(--brand-primary);
}

.lab-units {
    font-size: 0.9rem;
    color: var(--foreground-muted);
}

.lab-flag {
    padding: 0.25rem 0.5rem;
    border-radius: 12px;
    font-size: 0.8rem;
    font-weight: 500;
}

.lab-flag--normal {
    background: rgba(16, 185, 129, 0.2);
    color: #34d399;
}

.lab-flag--upper_normal {
    background: rgba(245, 158, 11, 0.2);
    color: #fbbf24;
}

.lab-flag--lower_normal {
    background: rgba(59, 130, 246, 0.2);
    color: #60a5fa;
}

.lab-flag--high {
    background: rgba(239, 68, 68, 0.2);
    color: #f87171;
}

.lab-flag--low {
    background: rgba(139, 92, 246, 0.2);
    color: #a78bfa;
}

.lab-reference {
    font-size: 0.8rem;
    color: var(--foreground-muted);
    font-style: italic;
}

.lab-calculation {
    font-size: 0.8rem;
    color: var(--foreground-muted);
    background: var(--card-bg);
    padding: 0.25rem 0.5rem;
    border-radius: 4px;
    border: 1px solid var(--card-border);
}

.lab-interpretation {
    font-size: 0.8rem;
    color: var(--foreground-muted);
    font-style: italic;
    display: block;
    margin-top: 0.25rem;
}

/* Differential Section Styles */
.differential-section {
    margin-top: 1.5rem;
    padding: 1.5rem;
    background: var(--card-bg);
    backdrop-filter: blur(12px);
    border-radius: 8px;
    border-left: 4px solid var(--brand-primary);
    border: 1px solid var(--card-border);
    border-left: 4px solid var(--brand-primary);
}

.differential-section h5 {
    font-size: 1.1rem;
    font-weight: 600;
    color: var(--foreground);
    margin-bottom: 1rem;
    border-bottom: 1px solid var(--card-border);
    padding-bottom: 0.5rem;
}

.differential-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
    gap: 2rem;
}

.differential-group h6 {
    font-size: 1rem;
    font-weight: 600;
    color: var(--foreground);
    margin-bottom: 0.75rem;
    border-bottom: 1px solid var(--card-border);
    padding-bottom: 0.25rem;
}

.differential-values {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
}

.differential-item {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 0.5rem;
    background: var(--card-bg);
    border-radius: 6px;
    border: 1px solid var(--card-border);
}

.diff-label {
    font-weight: 500;
    color: var(--foreground-muted);
    font-size: 0.9rem;
}

.diff-value {
    font-weight: 600;
    color: var(--foreground);
    font-size: 0.9rem;
}

.diff-flag {
    padding: 0.25rem 0.5rem;
    border-radius: 12px;
    font-size: 0.8rem;
    font-weight: 500;
    margin-left: 0.5rem;
}

.diff-flag--normal {
    background: rgba(16, 185, 129, 0.2);
    color: #34d399;
}

/* CDSS Panel Styles */
.cdss-panel__header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 2rem;
    padding-bottom: 1rem;
    border-bottom: 1px solid var(--card-border);
}

.cdss-panel__title {
    font-size: 1.5rem;
    font-weight: 600;
    color: var(--foreground);
    margin: 0;
}

.cdss-panel__meta {
    display: flex;
    gap: 1rem;
    font-size: 0.9rem;
    color: var(--foreground-muted);
}

.cdss-panel__summary {
    background: var(--card-bg);
    backdrop-filter: blur(12px);
    border-radius: 12px;
    padding: 1.5rem;
    margin-bottom: 2rem;
    box-shadow: var(--shadow-glow);
    border: 1px solid var(--card-border);
}

.cdss-panel__summary h4 {
    font-size: 1.2rem;
    font-weight: 600;
    margin-bottom: 1.5rem;
    color: var(--foreground);
    border-bottom: 2px solid var(--brand-primary);
    padding-bottom: 0.5rem;
}

.patient-overview-card {
    background: var(--card-bg);
    backdrop-filter: blur(12px);
    border-radius: 12px;
    padding: 1.5rem;
    border-left: 4px solid var(--brand-primary);
    border: 1px solid var(--card-border);
    border-left: 4px solid var(--brand-primary);
}

.patient-overview-text {
    margin: 0;
    line-height: 1.6;
    color: var(--foreground);
    font-size: 1rem;
}

.cdss-panel__context {
    background: var(--card-bg);
    backdrop-filter: blur(12px);
    border-radius: 12px;
    padding: 1.5rem;
    margin-bottom: 2rem;
    box-shadow: var(--shadow-glow);
    border: 1px solid var(--card-border);
}

.cdss-panel__context h4 {
    font-size: 1.2rem;
    font-weight: 600;
    margin-bottom: 1.5rem;
    color: var(--foreground);
    border-bottom: 2px solid var(--brand-primary);
    padding-bottom: 0.5rem;
}

.signals-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
    gap: 1.5rem;
}

.signal-card {
    background: var(--card-bg);
    backdrop-filter: blur(12px);
    border-radius: 12px;
    padding: 1.5rem;
    border: 1px solid var(--card-border);
}

.signal-type {
    font-size: 1.1rem;
    font-weight: 600;
    color: var(--foreground);
    margin-bottom: 1rem;
    border-bottom: 1px solid var(--card-border);
    padding-bottom: 0.5rem;
}

.signal-values {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
}

.signal-item {
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.signal-label {
    font-weight: 500;
    color: var(--foreground-muted);
}

.signal-value {
    font-weight: 600;
    color: var(--brand-primary);
}

.cdss-panel__recommendations {
    background: var(--card-bg);
    backdrop-filter: blur(12px);
    border-radius: 12px;
    padding: 1.5rem;
    margin-bottom: 2rem;
    box-shadow: var(--shadow-glow);
    border: 1px solid var(--card-border);
}

.cdss-panel__recommendations h4 {
    font-size: 1.2rem;
    font-weight: 600;
    margin-bottom: 1.5rem;
    color: var(--foreground);
    border-bottom: 2px solid var(--brand-primary);
    padding-bottom: 0.5rem;
}

.recommendations-list {
    display: flex;
    flex-direction: column;
    gap: 1rem;
}

.recommendation-item {
    background: var(--card-bg);
    backdrop-filter: blur(12px);
    border-radius: 12px;
    padding: 1.5rem;
    border-left: 4px solid var(--brand-primary);
    border: 1px solid var(--card-border);
    border-left: 4px solid var(--brand-primary);
}

.recommendation-content p {
    margin: 0;
    line-height: 1.6;
    color: var(--foreground);
}

.cdss-panel__primary {
    background: var(--card-bg);
    backdrop-filter: blur(12px);
    border-radius: 12px;
    padding: 1.5rem;
    margin-bottom: 2rem;
    box-shadow: var(--shadow-glow);
    border: 1px solid var(--card-border);
}

.cdss-panel__primary h4 {
    font-size: 1.2rem;
    font-weight: 600;
    margin-bottom: 1.5rem;
    color: var(--foreground);
    border-bottom: 2px solid var(--brand-primary);
    padding-bottom: 0.5rem;
}

.primary-recommendations {
    display: flex;
    flex-direction: column;
    gap: 1.5rem;
}

.primary-recommendation-card {
    background: var(--card-bg);
    backdrop-filter: blur(12px);
    border-radius: 12px;
    padding: 1.5rem;
    border: 1px solid var(--card-border);
}

.recommendation-header {
    margin-bottom: 1rem;
}

.recommendation-title {
    font-size: 1.1rem;
    font-weight: 600;
    color: var(--foreground);
    margin-bottom: 0.5rem;
}

.recommendation-meta {
    display: flex;
    gap: 1rem;
    align-items: center;
    flex-wrap: wrap;
}

.recommendation-id {
    background: var(--brand-primary);
    color: white;
    padding: 0.25rem 0.5rem;
    border-radius: 4px;
    font-size: 0.8rem;
    font-weight: 600;
}

.recommendation-category {
    background: var(--card-bg);
    color: var(--foreground-muted);
    padding: 0.25rem 0.5rem;
    border-radius: 4px;
    font-size: 0.8rem;
    font-weight: 500;
    border: 1px solid var(--card-border);
}

.recommendation-priority {
    padding: 0.25rem 0.5rem;
    border-radius: 4px;
    font-size: 0.8rem;
    font-weight: 500;
}

.priority--high {
    background: rgba(239, 68, 68, 0.2);
    color: #f87171;
}

.priority--medium {
    background: rgba(245, 158, 11, 0.2);
    color: #fbbf24;
}

.priority--low {
    background: rgba(16, 185, 129, 0.2);
    color: #34d399;
}

.recommendation-actions,
.recommendation-monitoring,
.recommendation-evidence {
    margin-bottom: 1rem;
}

.recommendation-actions h6,
.recommendation-monitoring h6,
.recommendation-evidence h6 {
    font-size: 0.9rem;
    font-weight: 600;
    color: var(--foreground);
    margin-bottom: 0.5rem;
}

.recommendation-actions ul,
.recommendation-monitoring ul {
    margin: 0;
    padding-left: 1.5rem;
}

.recommendation-actions li,
.recommendation-monitoring li {
    margin-bottom: 0.25rem;
    color: var(--foreground-muted);
    line-height: 1.4;
}

.recommendation-evidence p {
    margin: 0;
    color: var(--foreground-muted);
    line-height: 1.4;
    font-style: italic;
}

/* Treatment Plan Widget Styles */
.treatment-plan-widget {
    background: var(--card-bg);
    backdrop-filter: blur(12px);
    border-radius: 12px;
    padding: 2rem;
    margin-top: 2rem;
    box-shadow: var(--shadow-glow);
    border: 2px solid var(--brand-primary);
}

.treatment-plan-widget__header {
    margin-bottom: 2rem;
}

.treatment-plan-widget__header h4 {
    font-size: 1.3rem;
    font-weight: 600;
    color: var(--foreground);
    margin-bottom: 0.5rem;
    border-bottom: 2px solid var(--brand-primary);
    padding-bottom: 0.5rem;
}

.treatment-plan-widget__description {
    color: var(--foreground-muted);
    font-size: 0.95rem;
    line-height: 1.5;
    margin: 0;
}

.treatment-plan-widget__existing {
    background: rgba(0, 0, 0, 0.2);
    border-radius: 10px;
    padding: 1.75rem;
    border: 1px solid rgba(139, 92, 246, 0.2);
}

.treatment-plan-widget__existing-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 1rem;
    flex-wrap: wrap;
    gap: 0.5rem;
}

.treatment-plan-widget__existing-header h5 {
    font-size: 1.15rem;
    font-weight: 600;
    color: var(--brand-accent);
    margin: 0;
}

.treatment-plan-widget__date {
    font-size: 0.85rem;
    color: #64748b;
    font-weight: 500;
    background: rgba(139, 92, 246, 0.1);
    padding: 0.35rem 0.75rem;
    border-radius: 4px;
}

.treatment-plan-widget__existing-content {
    margin-bottom: 1.5rem;
}

.treatment-plan-content {
    background: rgba(0, 0, 0, 0.3);
    border-radius: 8px;
    padding: 1.5rem 2rem;
    border: 1px solid rgba(139, 92, 246, 0.2);
    line-height: 1.7;
    color: var(--foreground);
    font-size: 0.95rem;
}

.treatment-plan-content p {
    margin: 0 0 1rem 0;
    color: var(--foreground);
}

.treatment-plan-content p:last-child {
    margin-bottom: 0;
}

.treatment-plan-content strong {
    color: var(--foreground);
    font-weight: 600;
}

.treatment-plan-content em {
    color: var(--foreground-muted);
    font-style: italic;
}

.treatment-plan-content ul {
    margin: 0.75rem 0 1.25rem 0;
    padding-left: 1.5rem;
    list-style: none;
}

.treatment-plan-content ul li {
    position: relative;
    padding-left: 1rem;
    margin-bottom: 0.5rem;
    color: var(--foreground);
}

.treatment-plan-content ul li::before {
    content: "•";
    position: absolute;
    left: 0;
    color: var(--brand-primary);
    font-weight: bold;
}

.treatment-plan-content ul ul {
    margin: 0.5rem 0 0.5rem 0;
}

.treatment-plan-content ul ul li {
    font-size: 0.9rem;
    color: var(--foreground-muted);
}

.treatment-plan-content ul ul li::before {
    content: "–";
    color: var(--brand-accent);
}

.treatment-plan-widget__form {
    margin-top: 2rem;
    padding-top: 2rem;
    border-top: 1px solid var(--card-border);
}

.treatment-plan-widget__actions {
    display: flex;
    justify-content: flex-end;
    margin-top: 1rem;
}

.treatment-plan-widget__empty {
    text-align: center;
    padding: 2rem;
}

.treatment-plan-widget__empty-text {
    color: var(--foreground-muted);
    font-size: 0.95rem;
    line-height: 1.5;
    margin-bottom: 1.5rem;
}

.recommendation-item {
    margin-bottom: 1rem;
    padding-bottom: 1rem;
    border-bottom: 1px solid var(--card-border);
}

.recommendation-item:last-child {
    margin-bottom: 0;
    padding-bottom: 0;
    border-bottom: none;
}

.recommendation-item p {
    margin: 0;
    line-height: 1.6;
    color: var(--foreground);
}

.detailed-recommendation-item {
    margin-bottom: 1.5rem;
    padding-bottom: 1.5rem;
    border-bottom: 1px solid var(--card-border);
}

.detailed-recommendation-item:last-child {
    margin-bottom: 0;
    padding-bottom: 0;
    border-bottom: none;
}

.detailed-recommendation-item h5 {
    font-size: 1rem;
    font-weight: 600;
    color: var(--foreground);
    margin-bottom: 0.75rem;
}

.detailed-recommendation-item h6 {
    font-size: 0.9rem;
    font-weight: 600;
    color: var(--foreground-muted);
    margin-bottom: 0.5rem;
    margin-top: 1rem;
}

.detailed-recommendation-item ul {
    margin: 0;
    padding-left: 1.5rem;
}

.detailed-recommendation-item li {
    margin-bottom: 0.25rem;
    line-height: 1.5;
    color: var(--foreground);
}

/* Treatment Plan Section Styles (for legacy format) */
.patient-report__section--treatment-plan {
    margin-top: 3rem;
    padding-top: 2rem;
    border-top: 2px solid var(--brand-primary);
}

.treatment-plan-section {
    background: var(--card-bg);
    backdrop-filter: blur(12px);
    border-radius: 12px;
    padding: 2rem;
    box-shadow: var(--shadow-glow);
    border: 1px solid var(--card-border);
}

.treatment-plan-section__description {
    color: var(--foreground-muted);
    font-size: 0.95rem;
    line-height: 1.5;
    margin-bottom: 2rem;
    text-align: center;
    font-style: italic;
}

/* Clinical Summary Enhanced Styles */
.salient-finding-item {
    margin-bottom: 2rem;
    padding: 1.5rem;
    background: var(--card-bg);
    backdrop-filter: blur(12px);
    border-radius: 12px;
    border-left: 4px solid var(--brand-primary);
    border: 1px solid var(--card-border);
    border-left: 4px solid var(--brand-primary);
}

.salient-finding-item h5 {
    font-size: 1.1rem;
    font-weight: 600;
    color: var(--foreground);
    margin-bottom: 1rem;
    border-bottom: 1px solid var(--card-border);
    padding-bottom: 0.5rem;
}

.salient-finding-item h6 {
    font-size: 1rem;
    font-weight: 600;
    color: var(--foreground);
    margin-bottom: 0.75rem;
}

.salient-finding-item h7 {
    font-size: 0.9rem;
    font-weight: 600;
    color: var(--foreground);
    margin-bottom: 0.5rem;
    display: block;
}

.risk-summary-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
    gap: 1.5rem;
    margin-bottom: 1rem;
}

.risk-category-card {
    background: var(--card-bg);
    backdrop-filter: blur(12px);
    border-radius: 8px;
    padding: 1rem;
    border: 1px solid var(--card-border);
}

.risk-category-card h6 {
    font-size: 0.9rem;
    font-weight: 600;
    color: var(--foreground);
    margin-bottom: 0.75rem;
    border-bottom: 1px solid var(--card-border);
    padding-bottom: 0.25rem;
}

.risk-items {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
}

.risk-item {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 0.5rem;
    background: var(--card-bg);
    border-radius: 6px;
    border: 1px solid var(--card-border);
}

.risk-name {
    font-weight: 500;
    color: var(--foreground-muted);
}

.risk-level {
    padding: 0.25rem 0.5rem;
    border-radius: 12px;
    font-size: 0.8rem;
    font-weight: 500;
}

.risk-level--very_high {
    background: rgba(239, 68, 68, 0.2);
    color: #f87171;
}

.risk-level--high {
    background: rgba(245, 158, 11, 0.2);
    color: #fbbf24;
}

.risk-level--accelerated {
    background: rgba(239, 68, 68, 0.2);
    color: #f87171;
}

.risk-level--negative {
    background: rgba(16, 185, 129, 0.2);
    color: #34d399;
}

.risk-level--non_healthy {
    background: rgba(239, 68, 68, 0.2);
    color: #f87171;
}

.proxies-table {
    margin: 1rem 0;
    overflow-x: auto;
}

.proxies-table table {
    width: 100%;
    border-collapse: collapse;
    background: var(--card-bg);
    border-radius: 8px;
    overflow: hidden;
    box-shadow: var(--shadow-glow);
    border: 1px solid var(--card-border);
}

.proxies-table th,
.proxies-table td {
    padding: 0.75rem;
    text-align: left;
    border-bottom: 1px solid var(--card-border);
}

.proxies-table th {
    background: rgba(139, 92, 246, 0.1);
    font-weight: 600;
    color: var(--foreground);
}

.alignment-badge {
    padding: 0.25rem 0.5rem;
    border-radius: 12px;
    font-size: 0.8rem;
    font-weight: 500;
}

.alignment-badge--aligned {
    background: rgba(16, 185, 129, 0.2);
    color: #34d399;
}

.alignment-badge--low_and_aligned {
    background: rgba(59, 130, 246, 0.2);
    color: #60a5fa;
}

.not-measured {
    color: var(--foreground-muted);
    font-style: italic;
}

.pcsk9-summary {
    margin: 1rem 0;
    padding: 1rem;
    background: var(--card-bg);
    border-radius: 8px;
    border: 1px solid var(--card-border);
}

.pcsk9-metrics {
    display: flex;
    gap: 1rem;
    flex-wrap: wrap;
}

.pcsk9-metric {
    padding: 0.25rem 0.5rem;
    background: var(--card-bg);
    border-radius: 6px;
    font-size: 0.9rem;
    color: var(--foreground-muted);
    border: 1px solid var(--card-border);
}

.proxies-overview,
.proxies-interpretation,
.microbiome-interpretation,
.clinical-impression {
    margin: 1rem 0;
    padding: 1rem;
    background: var(--card-bg);
    border-radius: 8px;
    border-left: 4px solid var(--brand-primary);
    border: 1px solid var(--card-border);
    border-left: 4px solid var(--brand-primary);
    font-style: italic;
    color: var(--foreground-muted);
    line-height: 1.5;
}

.microbiome-classification {
    margin: 1rem 0;
}

.classification-badges {
    display: flex;
    gap: 1rem;
    align-items: center;
    flex-wrap: wrap;
}

.functional-signatures {
    margin: 1rem 0;
}

.signatures-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
    gap: 1rem;
}

.signature-card {
    background: var(--card-bg);
    border-radius: 8px;
    padding: 1rem;
    border: 1px solid var(--card-border);
}

.signature-metric {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 0.5rem;
}

.metric-label {
    font-weight: 500;
    color: var(--foreground-muted);
}

.metric-value {
    font-weight: 600;
}

.metric-value--reduced {
    color: #f87171;
}

.metric-value--slightly_reduced {
    color: #fbbf24;
}

.metric-value--low {
    color: #f87171;
}

.metric-value--elevated {
    color: #f87171;
}

.status-badge {
    padding: 0.25rem 0.5rem;
    border-radius: 12px;
    font-size: 0.8rem;
    font-weight: 500;
}

.status-badge--reduced {
    background: rgba(239, 68, 68, 0.2);
    color: #f87171;
}

.status-badge--slightly_reduced {
    background: rgba(245, 158, 11, 0.2);
    color: #fbbf24;
}

.status-badge--low {
    background: rgba(239, 68, 68, 0.2);
    color: #f87171;
}

.status-badge--elevated {
    background: rgba(239, 68, 68, 0.2);
    color: #f87171;
}

.plan-section {
    margin-bottom: 1.5rem;
    padding: 1rem;
    background: var(--card-bg);
    border-radius: 8px;
    border: 1px solid var(--card-border);
}

.plan-section h5 {
    font-size: 1rem;
    font-weight: 600;
    color: var(--foreground);
    margin-bottom: 0.75rem;
    border-bottom: 1px solid var(--card-border);
    padding-bottom: 0.25rem;
}

.plan-list {
    margin: 0;
    padding-left: 1.5rem;
}

.plan-list li {
    margin-bottom: 0.5rem;
    color: var(--foreground-muted);
    line-height: 1.4;
}

.plan-notes {
    margin: 0;
    padding: 1rem;
    background: var(--card-bg);
    border-radius: 8px;
    border-left: 4px solid var(--brand-primary);
    border: 1px solid var(--card-border);
    border-left: 4px solid var(--brand-primary);
    font-style: italic;
    color: var(--foreground-muted);
    line-height: 1.5;
}

/* Social History and Medications Styles */
.social-history-details {
    margin-top: 0.5rem;
    padding: 1rem;
    background: var(--card-bg);
    border-radius: 6px;
    border-left: 3px solid var(--brand-primary);
    border: 1px solid var(--card-border);
    border-left: 3px solid var(--brand-primary);
}

.social-history-item {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 0.5rem;
    padding: 0.25rem 0;
}

.social-history-item:last-child {
    margin-bottom: 0;
}

.social-label {
    font-weight: 500;
    color: var(--foreground-muted);
    font-size: 0.9rem;
}

.social-value {
    color: var(--foreground);
    font-size: 0.9rem;
}

.medications-list {
    margin: 0.5rem 0 0 0;
    padding-left: 1.5rem;
}

.medication-item {
    margin-bottom: 0.5rem;
    padding: 0.5rem;
    background: var(--card-bg);
    border-radius: 6px;
    border-left: 3px solid var(--brand-primary);
    border: 1px solid var(--card-border);
    border-left: 3px solid var(--brand-primary);
}

.medication-name {
    font-weight: 600;
    color: var(--foreground);
    display: block;
    margin-bottom: 0.25rem;
}

.medication-details {
    color: var(--foreground-muted);
    font-size: 0.9rem;
    font-style: italic;
}

.risk-categories {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
    gap: 1rem;
    margin-bottom: 2rem;
}

.risk-category {
    padding: 1rem;
    border-radius: 8px;
    border-left: 4px solid;
}

.risk-category--very_high {
    background: rgba(239, 68, 68, 0.15);
    border-left-color: #f87171;
}

.risk-category--high {
    background: rgba(245, 158, 11, 0.15);
    border-left-color: #fbbf24;
}

.risk-category--elevated {
    background: rgba(245, 158, 11, 0.1);
    border-left-color: #f59e0b;
}

.risk-category--average {
    background: rgba(59, 130, 246, 0.15);
    border-left-color: #60a5fa;
}

.risk-category--low {
    background: rgba(16, 185, 129, 0.15);
    border-left-color: #34d399;
}

.risk-category__name {
    font-weight: 600;
    display: block;
    margin-bottom: 0.25rem;
}

.risk-category__definition {
    font-size: 0.85rem;
    color: var(--foreground-muted);
}

/* PRS Table Styles */
.prs-table {
    background: var(--card-bg);
    backdrop-filter: blur(12px);
    border-radius: 12px;
    overflow: hidden;
    box-shadow: var(--shadow-glow);
    border: 1px solid var(--card-border);
}

.prs-table .table {
    margin: 0;
    border: none;
}

.prs-table .table th {
    background: var(--brand-secondary);
    color: var(--foreground);
    font-weight: 600;
    padding: 1rem;
    border: none;
}

.prs-table .table td {
    padding: 1rem;
    border-bottom: 1px solid var(--card-border);
    vertical-align: middle;
    color: var(--foreground);
}

.prs-row--very_high {
    background: rgba(239, 68, 68, 0.1);
}

.prs-row--high {
    background: rgba(245, 158, 11, 0.1);
}

.prs-row--elevated {
    background: rgba(245, 158, 11, 0.05);
}

.prs-row--average {
    background: rgba(59, 130, 246, 0.1);
}

.prs-row--low {
    background: rgba(16, 185, 129, 0.1);
}

.percentile-badge {
    display: inline-block;
    padding: 0.25rem 0.75rem;
    border-radius: 20px;
    font-size: 0.8rem;
    font-weight: 600;
    color: white;
}

.percentile-badge--very_high {
    background: #dc2626;
}

.percentile-badge--high {
    background: #ea580c;
}

.percentile-badge--elevated {
    background: #d97706;
}

.percentile-badge--average {
    background: #0ea5e9;
}

.percentile-badge--low {
    background: #22c55e;
}

.risk-badge {
    display: inline-block;
    padding: 0.25rem 0.75rem;
    border-radius: 20px;
    font-size: 0.8rem;
    font-weight: 500;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

.risk-badge--very_high {
    background: rgba(239, 68, 68, 0.2);
    color: #f87171;
    border: 1px solid rgba(239, 68, 68, 0.3);
}

.risk-badge--high {
    background: rgba(245, 158, 11, 0.2);
    color: #fbbf24;
    border: 1px solid rgba(245, 158, 11, 0.3);
}

.risk-badge--elevated {
    background: rgba(245, 158, 11, 0.15);
    color: #f59e0b;
    border: 1px solid rgba(245, 158, 11, 0.2);
}

.risk-badge--average {
    background: rgba(59, 130, 246, 0.2);
    color: #60a5fa;
    border: 1px solid rgba(59, 130, 246, 0.3);
}

.risk-badge--low {
    background: rgba(16, 185, 129, 0.2);
    color: #34d399;
    border: 1px solid rgba(16, 185, 129, 0.3);
}

.applicability-badge {
    display: inline-block;
    padding: 0.25rem 0.5rem;
    border-radius: 12px;
    font-size: 0.75rem;
    font-weight: 500;
    background: var(--card-bg);
    color: var(--foreground-muted);
    border: 1px solid var(--card-border);
}

.applicability-badge--male_only {
    background: rgba(59, 130, 246, 0.2);
    color: #60a5fa;
}

.applicability-badge--female_only {
    background: rgba(236, 72, 153, 0.2);
    color: #f472b6;
}

.applicability-badge--all {
    background: rgba(16, 185, 129, 0.2);
    color: #34d399;
}

/* JSON Viewer Styles */
.json-viewer {
    background: #1f2937;
    color: #f9fafb;
    border-radius: 12px;
    padding: 1.5rem;
    overflow-x: auto;
    font-family: 'Monaco', 'Menlo', 'Ubuntu Mono', monospace;
    font-size: 0.85rem;
    line-height: 1.5;
}

.json-viewer pre {
    margin: 0;
    white-space: pre-wrap;
    word-wrap: break-word;
}

/* Responsive Design */
@media (max-width: 768px) {
    .report-header__content {
        flex-direction: column;
        gap: 1rem;
        text-align: center;
    }
    
    .report-tabs__nav {
        grid-template-columns: repeat(auto-fit, minmax(120px, 1fr));
        gap: 0.25rem;
    }
    
    .report-tabs__tab {
        padding: 0.5rem 0.75rem;
        font-size: 0.8rem;
    }
    
    .risk-categories {
        grid-template-columns: 1fr;
    }
    
    .prs-table {
        overflow-x: auto;
    }
    
    .simple-prs__header {
        flex-direction: column;
        align-items: flex-start;
        gap: 0.5rem;
    }
}

/* Mobile stacked tabs for very small screens */
@media (max-width: 480px) {
    .report-tabs__nav {
        grid-template-columns: 1fr;
        gap: 0.5rem;
    }

    .report-tabs__tab {
        padding: 0.75rem 1rem;
        font-size: 0.9rem;
        border-radius: 6px;
        border-bottom: none;
        background: var(--card-bg);
        border: 1px solid var(--card-border);
    }

    .report-tabs__tab--active {
        background: var(--brand-primary);
        color: white;
        border-color: var(--brand-primary);
    }

    .report-tabs__tab:hover {
        background: rgba(139, 92, 246, 0.2);
        border-color: var(--brand-primary);
    }
}

/* ==========================================================================
   EHR Interface Styles
   ========================================================================== */

/* Patient Search Widget */
.patient-search-widget {
    background: var(--card-bg);
    backdrop-filter: blur(12px);
    border-radius: 12px;
    padding: 2rem;
    box-shadow: var(--shadow-glow);
    border: 1px solid var(--card-border);
    margin-bottom: 2rem;
}

.patient-search-widget__header {
    margin-bottom: 1.5rem;
}

.patient-search-widget__header h3 {
    color: var(--foreground);
    margin: 0 0 0.5rem 0;
    font-size: 1.5rem;
    font-weight: 600;
}

.patient-search-widget__description {
    color: var(--foreground-muted);
    margin: 0;
    font-size: 1rem;
}

.patient-search-widget__search {
    margin-bottom: 1.5rem;
}

.patient-search-widget__search label {
    display: block;
    font-weight: 500;
    color: var(--foreground);
    margin-bottom: 0.5rem;
}

.patient-search-widget__input {
    width: 100%;
    padding: 0.75rem 1rem;
    border: 2px solid var(--card-border);
    border-radius: 8px;
    font-size: 1rem;
    background-color: rgba(0, 0, 0, 0.3);
    color: var(--foreground);
    transition: border-color 0.2s ease;
}

.patient-search-widget__input:focus {
    outline: none;
    border-color: var(--brand-primary);
    box-shadow: 0 0 0 3px rgba(139, 92, 246, 0.2);
}

.patient-search-widget__list {
    list-style: none;
    padding: 0;
    margin: 0;
    max-height: 400px;
    overflow-y: auto;
    border: 1px solid var(--card-border);
    border-radius: 8px;
}

.patient-search-widget__item {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 1rem;
    border-bottom: 1px solid var(--card-border);
    transition: background-color 0.2s ease;
}

.patient-search-widget__item:last-child {
    border-bottom: none;
}

.patient-search-widget__item:hover {
    background-color: rgba(139, 92, 246, 0.1);
}

.patient-search-widget__person {
    flex: 1;
    display: flex;
    flex-direction: column;
    gap: 0.25rem;
}

.patient-search-widget__person-info {
    display: flex;
    flex-direction: column;
    gap: 0.25rem;
}

.patient-search-widget__person-name {
    font-weight: 600;
    color: var(--foreground);
    font-size: 1.1rem;
}

.patient-search-widget__person-id {
    color: var(--foreground-muted);
    font-size: 0.9rem;
}

.patient-search-widget__person-contact {
    color: var(--foreground-muted);
    font-size: 0.85rem;
}

.patient-search-widget__person-meta {
    display: flex;
    gap: 0.5rem;
    margin-top: 0.5rem;
}

.patient-search-widget__meta-badge {
    background: rgba(var(--brand-primary-rgb), 0.1);
    color: var(--brand-primary);
    padding: 0.25rem 0.5rem;
    border-radius: 4px;
    font-size: 0.75rem;
    font-weight: 500;
}

.patient-search-widget__action {
    margin-left: 1rem;
    flex-shrink: 0;
}

.patient-search-widget__no-results {
    padding: 2rem;
    text-align: center;
    color: var(--foreground-muted);
    font-style: italic;
}

/* Patient Header */
.patient-header {
    background: var(--card-bg);
    backdrop-filter: blur(12px);
    border-radius: 12px;
    padding: 2rem;
    margin-bottom: 2rem;
    box-shadow: var(--shadow-glow);
    border: 1px solid var(--card-border);
}

.patient-header__main {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    margin-bottom: 1.5rem;
}

.patient-header__identity {
    flex: 1;
}

.patient-header__name {
    color: var(--foreground);
    margin: 0 0 0.5rem 0;
    font-size: 2rem;
    font-weight: 700;
}

.patient-header__identifiers {
    display: flex;
    flex-direction: column;
    gap: 0.25rem;
}

.patient-header__id {
    color: var(--foreground-muted);
    font-size: 0.9rem;
    font-family: 'JetBrains Mono', 'SF Mono', 'Monaco', 'Inconsolata', monospace;
}

.patient-header__contact {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
    min-width: 200px;
}

.patient-header__contact-item {
    display: flex;
    flex-direction: column;
    gap: 0.25rem;
}

.patient-header__contact-label {
    font-size: 0.8rem;
    font-weight: 500;
    color: var(--foreground-muted);
    text-transform: uppercase;
    letter-spacing: 0.05em;
}

.patient-header__contact-value {
    color: var(--foreground);
    font-weight: 500;
}

.patient-header__meta {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding-top: 1.5rem;
    border-top: 1px solid var(--card-border);
}

.patient-header__stats {
    display: flex;
    gap: 2rem;
}

.patient-header__stat {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.25rem;
}

.patient-header__stat-label {
    font-size: 0.8rem;
    color: var(--foreground-muted);
    font-weight: 500;
}

.patient-header__stat-value {
    font-size: 1.25rem;
    font-weight: 600;
    color: var(--brand-primary);
}

/* EHR Tabs */
.ehr-tabs {
    display: flex;
    background: var(--card-bg);
    backdrop-filter: blur(12px);
    border-radius: 12px 12px 0 0;
    box-shadow: var(--shadow-glow);
    border: 1px solid var(--card-border);
    border-bottom: none;
    margin-bottom: 0;
    overflow: hidden;
}

.ehr-tabs__tab {
    flex: 1;
    padding: 1rem 1.5rem;
    background: rgba(0, 0, 0, 0.2);
    border: none;
    border-bottom: 3px solid transparent;
    color: var(--foreground-muted);
    font-weight: 500;
    font-size: 1rem;
    cursor: pointer;
    transition: all 0.2s ease;
    text-align: center;
}

.ehr-tabs__tab:hover {
    background: rgba(139, 92, 246, 0.1);
    color: var(--foreground);
}

.ehr-tabs__tab--active {
    background: var(--card-bg);
    color: var(--brand-primary);
    border-bottom-color: var(--brand-primary);
}

.ehr-tabs__tab:focus {
    outline: none;
    box-shadow: inset 0 0 0 2px rgba(139, 92, 246, 0.3);
}

/* EHR Tab Panels */
.ehr-tab-panels {
    background: var(--card-bg);
    backdrop-filter: blur(12px);
    border-radius: 0 0 12px 12px;
    box-shadow: var(--shadow-glow);
    border: 1px solid var(--card-border);
    border-top: none;
    min-height: 400px;
}

.ehr-tab-panel {
    display: none;
    padding: 2rem;
}

.ehr-tab-panel--active {
    display: block;
}

.ehr-tab-panel__content {
    max-width: none;
}

.ehr-tab-panel__header {
    margin-bottom: 2rem;
    padding-bottom: 1rem;
    border-bottom: 1px solid var(--card-border);
}

.ehr-tab-panel__header h2 {
    color: var(--foreground);
    margin: 0 0 0.5rem 0;
    font-size: 1.5rem;
    font-weight: 600;
}

.ehr-tab-panel__header p {
    color: var(--foreground-muted);
    margin: 0;
}

.ehr-tab-panel__actions {
    margin-bottom: 2rem;
}

.ehr-tab-panel__empty {
    text-align: center;
    padding: 3rem 2rem;
    color: var(--foreground-muted);
}

.ehr-tab-panel__empty p {
    margin: 0 0 1.5rem 0;
    font-size: 1.1rem;
}

/* EHR Report Subtabs */
.ehr-report-tabs {
    margin-top: 1rem;
}

.ehr-report-tabs__nav {
    display: flex;
    background: rgba(0, 0, 0, 0.2);
    border-radius: 8px 8px 0 0;
    overflow: hidden;
    margin-bottom: 0;
    flex-wrap: wrap;
}

.ehr-report-tabs__tab {
    flex: 1;
    min-width: 120px;
    padding: 0.75rem 1rem;
    background: rgba(0, 0, 0, 0.2);
    border: none;
    border-bottom: 2px solid transparent;
    color: var(--foreground-muted);
    font-weight: 500;
    font-size: 0.9rem;
    cursor: pointer;
    transition: all 0.2s ease;
    text-align: center;
}

.ehr-report-tabs__tab:hover {
    background: rgba(139, 92, 246, 0.1);
    color: var(--foreground);
}

.ehr-report-tabs__tab--active {
    background: var(--card-bg);
    color: var(--brand-primary);
    border-bottom-color: var(--brand-primary);
}

.ehr-report-tabs__tab:focus {
    outline: none;
    box-shadow: inset 0 0 0 2px rgba(139, 92, 246, 0.3);
}

.ehr-report-tabs__content {
    background: var(--card-bg);
    border-radius: 0 0 8px 8px;
    min-height: 300px;
    padding: 0;
}

/* Override report panel styles for EHR context */
.ehr-tab-panel .report-tabs__panel {
    display: none;
    padding: 1.5rem;
}

.ehr-tab-panel .report-tabs__panel--active {
    display: block;
}

/* Ensure report content fits well in EHR context */
.ehr-tab-panel .report-tabs__panel .panel-header {
    margin-bottom: 1.5rem;
    padding-bottom: 1rem;
    border-bottom: 1px solid var(--card-border);
}

.ehr-tab-panel .report-tabs__panel .panel-title {
    color: var(--foreground);
    margin: 0 0 0.5rem 0;
    font-size: 1.25rem;
    font-weight: 600;
}

.ehr-tab-panel .report-tabs__panel .panel-meta {
    color: var(--foreground-muted);
    font-size: 0.9rem;
}

/* EHR Treatment Plan */
.ehr-treatment-plan {
    background: var(--card-bg);
    backdrop-filter: blur(12px);
    border-radius: 8px;
    padding: 1.5rem;
    margin-bottom: 2rem;
    border: 1px solid var(--card-border);
}

.ehr-treatment-plan__header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 1rem;
    padding-bottom: 1rem;
    border-bottom: 1px solid var(--card-border);
}

.ehr-treatment-plan__header h3 {
    color: var(--foreground);
    margin: 0;
    font-size: 1.25rem;
    font-weight: 600;
}

.ehr-treatment-plan__date {
    color: var(--foreground-muted);
    font-size: 0.9rem;
}

.ehr-treatment-plan__content {
    margin-bottom: 1rem;
}

.ehr-treatment-plan__history {
    margin-top: 2rem;
}

.ehr-treatment-plan__history h3 {
    color: var(--foreground);
    margin: 0 0 1rem 0;
    font-size: 1.1rem;
    font-weight: 600;
}

.ehr-treatment-plan__history-list {
    display: flex;
    flex-direction: column;
    gap: 1rem;
}

.ehr-treatment-plan__history-item {
    background: rgba(0, 0, 0, 0.2);
    padding: 1rem;
    border-radius: 6px;
    border: 1px solid var(--card-border);
}

.ehr-treatment-plan__history-header {
    margin-bottom: 0.5rem;
}

.ehr-treatment-plan__history-date {
    color: var(--foreground-muted);
    font-size: 0.85rem;
    font-weight: 500;
}

.ehr-treatment-plan__history-content {
    color: var(--foreground);
    line-height: 1.5;
}

/* EHR Notes */
.ehr-notes-form {
    background: var(--card-bg);
    backdrop-filter: blur(12px);
    padding: 1.5rem;
    border-radius: 8px;
    margin-bottom: 2rem;
    border: 1px solid var(--card-border);
}

.ehr-notes-form .form-field {
    margin-bottom: 1rem;
}

.ehr-notes-form .form-field label {
    display: block;
    font-weight: 500;
    color: var(--foreground);
    margin-bottom: 0.5rem;
}

.ehr-notes-form textarea {
    width: 100%;
    padding: 0.75rem;
    border: 2px solid var(--card-border);
    border-radius: 6px;
    font-size: 1rem;
    font-family: inherit;
    resize: vertical;
    min-height: 100px;
    background-color: rgba(0, 0, 0, 0.3);
    color: var(--foreground);
}

.ehr-notes-form textarea:focus {
    outline: none;
    border-color: var(--brand-primary);
    box-shadow: 0 0 0 3px rgba(139, 92, 246, 0.2);
}

.ehr-notes-list {
    margin-top: 2rem;
}

.ehr-notes-list h3 {
    color: var(--foreground);
    margin: 0 0 1.5rem 0;
    font-size: 1.25rem;
    font-weight: 600;
}

.ehr-note-item {
    background: var(--card-bg);
    border: 1px solid var(--card-border);
    border-radius: 8px;
    padding: 1.5rem;
    margin-bottom: 1rem;
    transition: box-shadow 0.2s ease;
}

.ehr-note-item:hover {
    box-shadow: var(--shadow-glow);
}

.ehr-note-item__header {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    margin-bottom: 1rem;
    padding-bottom: 1rem;
    border-bottom: 1px solid var(--card-border);
}

.ehr-note-item__meta {
    display: flex;
    flex-direction: column;
    gap: 0.25rem;
}

.ehr-note-item__author {
    font-weight: 500;
    color: var(--foreground);
}

.ehr-note-item__date {
    color: var(--foreground-muted);
    font-size: 0.85rem;
}

.ehr-note-item__edited {
    color: var(--foreground-muted);
    font-size: 0.8rem;
    font-style: italic;
}

.ehr-note-item__actions {
    display: flex;
    gap: 0.5rem;
}

.ehr-note-item__content {
    color: var(--foreground);
    line-height: 1.6;
}

.ehr-note-item__content p {
    margin: 0;
}

/* EHR Patient Search Page */
.ehr-patient-search {
    max-width: 800px;
    margin: 0 auto;
    padding: 2rem;
}

.ehr-patient-search__header {
    text-align: center;
    margin-bottom: 3rem;
}

.ehr-patient-search__header h1 {
    color: var(--foreground);
    margin: 0 0 1rem 0;
    font-size: 2.5rem;
    font-weight: 700;
}

.ehr-patient-search__header p {
    color: var(--foreground-muted);
    margin: 0;
    font-size: 1.1rem;
}

.ehr-patient-search__help {
    background: var(--card-bg);
    backdrop-filter: blur(12px);
    padding: 2rem;
    border-radius: 12px;
    margin-top: 3rem;
    border: 1px solid var(--card-border);
}

.ehr-patient-search__help h3 {
    color: var(--foreground);
    margin: 0 0 1rem 0;
    font-size: 1.25rem;
    font-weight: 600;
}

.ehr-patient-search__help ul {
    margin: 0;
    padding-left: 1.5rem;
}

.ehr-patient-search__help li {
    color: var(--foreground-muted);
    margin-bottom: 0.5rem;
    line-height: 1.5;
}

.discover-insights {
    display: flex;
    flex-direction: column;
    gap: 2.5rem;
    padding-block: 2rem 4rem;
}

.discover-insights__header {
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
    max-width: 48rem;
}

.discover-insights__title {
    font-size: 2.25rem;
    font-weight: 700;
    margin: 0;
}

.discover-insights__subtitle {
    font-size: 1.0625rem;
    color: var(--text-muted);
    margin: 0;
}

.discover-insights__layout {
    display: grid;
    grid-template-columns: minmax(0, 1.35fr) minmax(0, 1fr);
    gap: 2.5rem;
    align-items: start;
}

.discover-insights__viewer {
    display: flex;
    flex-direction: column;
    gap: 1.25rem;
}

.discover-insights__model {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    min-height: 28rem;
    border-radius: 1.5rem;
    background: linear-gradient(160deg, rgba(139, 92, 246, 0.15), rgba(30, 27, 75, 0.3));
    box-shadow: var(--shadow-glow);
    border: 1px solid var(--card-border);
    overflow: hidden;
    aspect-ratio: 3 / 6;
}

.discover-insights__model-image {
    width: 100%;
    height: auto;
    object-fit: contain;
    filter: drop-shadow(0 18px 36px rgba(139, 92, 246, 0.2));
}

.discover-insights__hotspot {
    background: rgba(139, 92, 246, 0.2);
    border: 2px solid var(--brand-primary);
    color: var(--foreground);
    width: 2.75rem;
    height: 2.75rem;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: 600;
    cursor: pointer;
    transition: transform 0.2s ease, background 0.2s ease, color 0.2s ease;
    position: absolute;
    top: var(--hotspot-y);
    left: var(--hotspot-x);
    transform: translate(-50%, -50%) scale(1);
    backdrop-filter: blur(8px);
}

.discover-insights__hotspot:hover,
.discover-insights__hotspot:focus-visible {
    background: var(--brand-primary);
    color: white;
    transform: translate(-50%, -50%) scale(1.05);
    outline: none;
    box-shadow: 0 0 20px rgba(139, 92, 246, 0.5);
}

.discover-insights__hotspot--active {
    background: var(--brand-primary);
    color: white;
    box-shadow: 0 0 20px rgba(139, 92, 246, 0.5);
}

.discover-insights__hotspot-label {
    font-size: 1rem;
}

.discover-insights__hotspot-sr {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0;
}

.discover-insights__helper-text {
    font-size: 0.9375rem;
    color: var(--text-muted);
    margin: 0;
}

.discover-insights__panel {
    background: var(--card-bg);
    backdrop-filter: blur(12px);
    color: var(--foreground);
    border-radius: 1.5rem;
    padding: 2rem;
    display: flex;
    flex-direction: column;
    gap: 1.5rem;
    box-shadow: var(--shadow-glow);
    border: 1px solid var(--card-border);
}

.discover-insights__panel-title {
    margin: 0;
    font-size: 1.75rem;
    font-weight: 600;
}

.discover-insights__panel-summary {
    margin: 0.5rem 0 0;
    font-size: 1rem;
    color: rgba(255, 255, 255, 0.75);
}

.discover-insights__list {
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
}

.discover-insights__list-button {
    display: grid;
    grid-template-columns: auto 1fr;
    gap: 1rem;
    align-items: center;
    width: 100%;
    text-align: left;
    padding: 0.75rem 1rem;
    border-radius: 0.875rem;
    background: rgba(139, 92, 246, 0.1);
    border: 1px solid var(--card-border);
    color: inherit;
    cursor: pointer;
    transition: border-color 0.2s ease, background 0.2s ease, transform 0.2s ease;
}

.discover-insights__list-button:hover,
.discover-insights__list-button:focus-visible {
    border-color: var(--brand-primary);
    transform: translateY(-1px);
    outline: none;
}

.discover-insights__list-button--active {
    background: linear-gradient(135deg, rgba(139, 92, 246, 0.9), rgba(167, 139, 250, 0.7));
    border-color: var(--brand-primary);
    color: white;
}

.discover-insights__list-index {
    width: 2rem;
    height: 2rem;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    background: rgba(139, 92, 246, 0.2);
    font-weight: 600;
}

.discover-insights__list-button--active .discover-insights__list-index {
    background: rgba(255, 255, 255, 0.2);
}

.discover-insights__list-text {
    display: flex;
    flex-direction: column;
    gap: 0.25rem;
}

.discover-insights__list-title {
    font-size: 1.05rem;
    font-weight: 600;
}

.discover-insights__list-subtitle {
    font-size: 0.875rem;
    color: var(--foreground-muted);
}

.discover-insights__detail {
    margin-top: 1.5rem;
}

.discover-insights__detail-section {
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
    background: rgba(139, 92, 246, 0.1);
    border-radius: 1rem;
    padding: 1.25rem;
    border: 1px solid var(--card-border);
}

.discover-insights__detail-title {
    margin: 0;
    font-size: 1.125rem;
    font-weight: 600;
}

.discover-insights__detail-text {
    margin: 0;
    font-size: 0.975rem;
    line-height: 1.6;
}

.discover-insights__detail-note {
    margin: 0;
    font-size: 0.8125rem;
    color: var(--foreground-muted);
}

@media (max-width: 1024px) {
    .discover-insights__layout {
        grid-template-columns: 1fr;
    }

    .discover-insights__panel {
        position: relative;
    }
}

@media (max-width: 768px) {
    .discover-insights {
        gap: 2rem;
        padding-block: 1.5rem 3rem;
    }

    .discover-insights__model {
        min-height: 22rem;
    }

    .discover-insights__panel {
        padding: 1.5rem;
    }

    .discover-insights__panel-title {
        font-size: 1.5rem;
    }
}

@media (max-width: 480px) {
    .discover-insights__title {
        font-size: 1.75rem;
    }

    .discover-insights__list-button {
        grid-template-columns: 1fr;
        gap: 0.5rem;
    }

    .discover-insights__list-index {
        width: 2.25rem;
        height: 2.25rem;
    }
}

/* ==========================================================================
   PGx (Pharmacogenomics) Panel Styles
   ========================================================================== */

.pgx-panel {
    padding: 1rem 0;
}

.pgx-panel__header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 2rem;
    padding-bottom: 1rem;
    border-bottom: 1px solid var(--card-border);
}

.pgx-panel__title {
    font-size: 1.5rem;
    font-weight: 600;
    color: var(--foreground);
    margin: 0;
}

.pgx-panel__meta {
    display: flex;
    gap: 1.5rem;
    font-size: 0.9rem;
    color: var(--foreground-muted);
}

.pgx-panel__summary {
    background: var(--card-bg);
    backdrop-filter: blur(12px);
    border-radius: 12px;
    padding: 1.5rem;
    margin-bottom: 2rem;
    border: 1px solid var(--card-border);
}

.pgx-panel__summary h4 {
    font-size: 1.1rem;
    font-weight: 600;
    color: var(--foreground);
    margin: 0 0 0.75rem 0;
}

.pgx-panel__description {
    color: var(--foreground-muted);
    line-height: 1.6;
    margin: 0;
}

.pgx-panel__source-section {
    background: var(--card-bg);
    backdrop-filter: blur(12px);
    border-radius: 12px;
    padding: 1.5rem;
    margin-bottom: 1.5rem;
    border: 1px solid var(--card-border);
}

.pgx-panel__source-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 1rem;
    padding-bottom: 0.75rem;
    border-bottom: 1px solid var(--card-border);
}

.pgx-panel__source-header h4 {
    font-size: 1.1rem;
    font-weight: 600;
    color: var(--foreground);
    margin: 0;
}

.pgx-panel__source-badge {
    padding: 0.25rem 0.75rem;
    border-radius: 4px;
    font-size: 0.75rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.05em;
}

.pgx-panel__source-badge--cpic {
    background: rgba(139, 92, 246, 0.2);
    color: var(--brand-primary);
    border: 1px solid rgba(139, 92, 246, 0.3);
}

.pgx-panel__source-badge--dpwg {
    background: rgba(16, 185, 129, 0.2);
    color: #34d399;
    border: 1px solid rgba(16, 185, 129, 0.3);
}

.pgx-table {
    overflow-x: auto;
}

.pgx-table .table {
    width: 100%;
    border-collapse: collapse;
    margin: 0;
}

.pgx-table .table th,
.pgx-table .table td {
    padding: 0.75rem 1rem;
    text-align: left;
    border-bottom: 1px solid var(--card-border);
}

.pgx-table .table th {
    background: rgba(139, 92, 246, 0.1);
    color: var(--foreground);
    font-weight: 600;
    font-size: 0.85rem;
    text-transform: uppercase;
    letter-spacing: 0.03em;
}

.pgx-table .table td {
    color: var(--foreground);
    vertical-align: middle;
}

.pgx-table .table tbody tr:hover {
    background: rgba(139, 92, 246, 0.05);
}

.pgx-gene-name {
    font-weight: 600;
    font-family: 'JetBrains Mono', monospace;
    color: var(--foreground);
}

.pgx-diplotype {
    font-family: 'JetBrains Mono', monospace;
    font-size: 0.9rem;
    color: var(--foreground);
}

.pgx-diplotype--unknown {
    color: var(--foreground-muted);
    font-style: italic;
}

.phenotype-badge {
    display: inline-block;
    padding: 0.25rem 0.5rem;
    border-radius: 4px;
    font-size: 0.8rem;
    font-weight: 500;
}

.phenotype-badge--normal-metabolizer,
.phenotype-badge--normal-function,
.phenotype-badge--normal {
    background: rgba(16, 185, 129, 0.2);
    color: #34d399;
    border: 1px solid rgba(16, 185, 129, 0.3);
}

.phenotype-badge--intermediate-metabolizer {
    background: rgba(245, 158, 11, 0.2);
    color: #fbbf24;
    border: 1px solid rgba(245, 158, 11, 0.3);
}

.phenotype-badge--poor-metabolizer {
    background: rgba(239, 68, 68, 0.2);
    color: #f87171;
    border: 1px solid rgba(239, 68, 68, 0.3);
}

.phenotype-badge--ultrarapid-metabolizer {
    background: rgba(139, 92, 246, 0.2);
    color: var(--brand-accent);
    border: 1px solid rgba(139, 92, 246, 0.3);
}

.phenotype-badge--unknown,
.phenotype-badge--not-available,
.phenotype-badge--n\/a {
    background: rgba(148, 163, 184, 0.2);
    color: var(--foreground-muted);
    border: 1px solid rgba(148, 163, 184, 0.3);
}

.activity-score {
    font-family: 'JetBrains Mono', monospace;
    font-weight: 500;
    color: var(--foreground);
}

.activity-score--na {
    color: var(--foreground-muted);
}

.pgx-panel__legend {
    background: rgba(139, 92, 246, 0.1);
    border-radius: 12px;
    padding: 1.5rem;
    margin: 2rem 0;
    border: 1px solid var(--card-border);
}

.pgx-panel__legend h4 {
    font-size: 1rem;
    font-weight: 600;
    color: var(--foreground);
    margin: 0 0 1rem 0;
}

.pgx-legend-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
    gap: 1rem;
}

.pgx-legend-item {
    display: flex;
    flex-direction: column;
    gap: 0.25rem;
}

.pgx-legend-description {
    font-size: 0.85rem;
    color: var(--foreground-muted);
}

.pgx-panel__disclaimer {
    background: rgba(245, 158, 11, 0.15);
    border-radius: 8px;
    padding: 1rem 1.5rem;
    border-left: 4px solid #f59e0b;
    margin-top: 2rem;
}

.pgx-panel__disclaimer p {
    margin: 0;
    font-size: 0.9rem;
    color: var(--foreground);
    line-height: 1.6;
}

.pgx-panel__disclaimer strong {
    color: var(--warning-text-bright);
}

/* PGx result text. The CPIC annotations arrive as embedded HTML carrying
   Google-Docs .c0-.c17 classes and inline font styling, so these rules have to
   win with !important. Values are tokenised rather than overridden a second
   time for light mode, which would mean another !important layer. */
.pgx-result-text {
    font-size: 0.875rem;
    color: var(--foreground-soft);
    line-height: 1.6;
}

.pgx-result-text p {
    margin: 0 0 0.5rem;
    color: var(--foreground-soft) !important;
}

.pgx-result-text p:last-child {
    margin-bottom: 0;
}

.pgx-result-text span {
    color: var(--foreground-soft) !important;
}

.pgx-result-text .c0,
.pgx-result-text .c1,
.pgx-result-text .c2,
.pgx-result-text .c3,
.pgx-result-text .c4,
.pgx-result-text .c6,
.pgx-result-text .c8 {
    color: var(--foreground-soft) !important;
    background-color: transparent !important;
}

.pgx-result-text span[style*="font-weight: 700"],
.pgx-result-text span[style*="font-weight:700"],
.pgx-result-text .c6 {
    color: var(--warning-text) !important;
    font-weight: 600 !important;
}

.pgx-result-text span[style*="font-style: italic"],
.pgx-result-text span[style*="font-style:italic"],
.pgx-result-text .c8 {
    color: var(--accent-text) !important;
    font-style: italic !important;
}

/* PGx Drug Cards */
.pgx-drug-card {
    transition: all 0.2s ease;
}

.pgx-drug-card:hover {
    border-color: rgba(139, 92, 246, 0.4) !important;
    box-shadow: 0 4px 20px rgba(139, 92, 246, 0.15);
}

.pgx-outcome:last-child {
    margin-bottom: 0 !important;
}

/* Wearables Section */
.wearable-metric-card {
    transition: all 0.2s ease;
}

.wearable-metric-card:hover {
    border-color: rgba(16, 185, 129, 0.4) !important;
    box-shadow: 0 4px 20px rgba(16, 185, 129, 0.15);
    transform: translateY(-2px);
}

.wearables-device-chip {
    transition: all 0.2s ease;
}

.wearables-device-chip:hover {
    background: rgba(16, 185, 129, 0.2) !important;
}

.wearables-alert {
    transition: all 0.2s ease;
}

.wearables-alert:hover {
    transform: translateX(4px);
}

.wearables-recommendation {
    transition: all 0.2s ease;
}

.wearables-recommendation:hover {
    background: rgba(139, 92, 246, 0.15) !important;
    border-color: rgba(139, 92, 246, 0.4) !important;
}

/* Responsive Design */
@media (max-width: 768px) {
    .patient-header__main {
        flex-direction: column;
        gap: 1.5rem;
    }
    
    .patient-header__contact {
        min-width: auto;
    }
    
    .patient-header__meta {
        flex-direction: column;
        gap: 1rem;
        align-items: flex-start;
    }
    
    .patient-header__stats {
        gap: 1rem;
    }
    
    .ehr-tabs {
        flex-direction: column;
    }
    
    .ehr-tabs__tab {
        border-bottom: none;
        border-right: 3px solid transparent;
    }
    
    .ehr-tabs__tab--active {
        border-bottom: none;
        border-right-color: var(--brand-primary);
    }
    
    .ehr-report-tabs__nav {
        flex-direction: column;
    }
    
    .ehr-report-tabs__tab {
        border-bottom: none;
        border-right: 2px solid transparent;
        min-width: auto;
    }
    
    .ehr-report-tabs__tab--active {
        border-bottom: none;
        border-right-color: var(--brand-primary);
    }
    
    .patient-search-widget__item {
        flex-direction: column;
        align-items: flex-start;
        gap: 1rem;
    }
    
    .patient-search-widget__action {
        margin-left: 0;
        align-self: stretch;
    }
}

/* ====================================
   KureInsights Report Page Styles
   ==================================== */

/* Animations */
@keyframes fade-in {
    from { opacity: 0; }
    to { opacity: 1; }
}

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

@keyframes scan {
    0%, 100% { transform: translateY(-100%); }
    50% { transform: translateY(100%); }
}

@keyframes pulse-glow {
    0%, 100% { box-shadow: 0 0 10px rgba(139, 92, 246, 0.5); }
    50% { box-shadow: 0 0 20px rgba(139, 92, 246, 0.8); }
}

@keyframes spin-slow {
    from { transform: rotate(0deg); }
    to { transform: rotate(360deg); }
}

.animate-fade-in {
    animation: fade-in 0.7s ease-out;
}

/* Report Page Layout */
.report-page {
    max-width: 1400px;
    margin: 0 auto;
    padding-bottom: 4rem;
}

/* Report Header Row */
.report-header-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 1rem;
    margin-bottom: 1.5rem;
    padding: 0.5rem 0;
}

/* Breadcrumbs */
.report-breadcrumbs {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    font-size: 0.875rem;
}

.breadcrumb-link {
    color: var(--foreground-muted);
    text-decoration: none;
    transition: color 0.2s;
}

.breadcrumb-link:hover {
    color: var(--brand-primary);
}

.breadcrumb-sep {
    color: rgba(255, 255, 255, 0.2);
}

.breadcrumb-current {
    color: var(--brand-primary);
    font-weight: 600;
}

/* Top Navigation Tabs */
.report-top-nav {
    position: sticky;
    top: 60px;
    z-index: 40;
    background: rgba(0, 0, 0, 0.8);
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
    padding: 0.5rem 0 1rem;
    margin: 0 -1rem;
    padding-left: 1rem;
    padding-right: 1rem;
    border-bottom: 1px solid var(--card-border);
}

.report-top-tabs {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 0.25rem;
    background: rgba(255, 255, 255, 0.05);
    padding: 0.25rem;
    border-radius: var(--radius-lg);
    border: 1px solid var(--card-border);
}

.report-top-tab {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
    padding: 0.875rem 1rem;
    background: transparent;
    border: none;
    border-radius: var(--radius);
    color: var(--foreground-muted);
    font-size: 0.875rem;
    font-weight: 500;
    cursor: pointer;
    transition: all 0.2s ease;
}

.report-top-tab:hover {
    background: rgba(255, 255, 255, 0.05);
    color: var(--foreground);
}

.report-top-tab--active {
    background: var(--brand-primary);
    color: white;
    box-shadow: var(--shadow-glow);
}

.report-top-tab .tab-icon {
    width: 1rem;
    height: 1rem;
    flex-shrink: 0;
}

.report-top-tab .tab-label-short {
    display: none;
}

@media (max-width: 768px) {
    .report-top-tab .tab-label-full {
        display: none;
    }
    .report-top-tab .tab-label-short {
        display: inline;
    }
}

/* Main Content Area */
.report-main-content {
    margin-top: 1.5rem;
    min-height: 600px;
}

.report-main-panel {
    display: none;
    animation: slide-up 0.5s ease-out;
}

.report-main-panel--active {
    display: block;
}

/* Report Layout with Sidebar */
.report-layout {
    display: flex;
    gap: 1.5rem;
}

/* Sidebar */
.report-sidebar {
    width: 240px;
    flex-shrink: 0;
}

.sidebar-section {
    margin-bottom: 1.5rem;
}

.sidebar-heading {
    font-size: 0.75rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.1em;
    color: var(--foreground-muted);
    padding: 0 0.5rem;
    margin-bottom: 0.5rem;
}

.sidebar-nav-btn {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    width: 100%;
    padding: 0.75rem 1rem;
    background: rgba(255, 255, 255, 0.05);
    border: 1px solid transparent;
    border-radius: var(--radius);
    color: var(--foreground-muted);
    font-size: 0.875rem;
    font-weight: 500;
    cursor: pointer;
    transition: all 0.2s ease;
    text-align: left;
    margin-bottom: 0.25rem;
}

.sidebar-nav-btn:hover {
    background: rgba(255, 255, 255, 0.1);
    color: var(--foreground);
}

.sidebar-nav-btn--active {
    background: var(--brand-primary);
    color: white;
    border-color: rgba(139, 92, 246, 0.5);
    box-shadow: var(--shadow-glow);
}

.sidebar-nav-btn .nav-icon {
    width: 1rem;
    height: 1rem;
    flex-shrink: 0;
}

/* Report Content */
.report-content {
    flex: 1;
    background: rgba(255, 255, 255, 0.05);
    border-radius: var(--radius-xl);
    border: 1px solid var(--card-border);
    padding: 1.5rem;
    min-height: 600px;
}

.report-panel {
    display: none;
}

.report-panel--active {
    display: block;
    animation: fade-in 0.4s ease-out;
}

/* Section Header */
.section-header {
    display: flex;
    align-items: flex-start;
    gap: 1rem;
    margin-bottom: 2rem;
    padding-bottom: 1rem;
    border-bottom: 1px solid var(--card-border);
}

.section-icon {
    width: 48px;
    height: 48px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: rgba(139, 92, 246, 0.1);
    border: 1px solid rgba(139, 92, 246, 0.2);
    border-radius: var(--radius);
    color: var(--brand-primary);
    box-shadow: 0 0 10px rgba(139, 92, 246, 0.2);
}

.section-icon svg {
    width: 24px;
    height: 24px;
}

.section-title {
    font-size: 1.875rem;
    font-weight: 700;
    color: var(--foreground);
    margin: 0;
    letter-spacing: -0.02em;
}

.section-description {
    font-size: 1rem;
    color: var(--foreground-muted);
    margin: 0.25rem 0 0;
    max-width: 600px;
}

/* Disclaimers */
.report-disclaimers {
    margin-top: 4rem;
    padding: 1.5rem;
    background: rgba(139, 92, 246, 0.05);
    border: 1px solid rgba(255, 255, 255, 0.05);
    border-radius: var(--radius-lg);
    backdrop-filter: blur(8px);
}

.disclaimer-header {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    font-weight: 600;
    color: var(--foreground);
    margin-bottom: 1rem;
}

.disclaimer-header svg {
    width: 1rem;
    height: 1rem;
    color: var(--brand-primary);
}

.disclaimer-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
    gap: 1.5rem;
}

.disclaimer-item {
    font-size: 0.75rem;
}

.disclaimer-label {
    display: block;
    text-transform: uppercase;
    font-weight: 700;
    color: var(--brand-primary);
    margin-bottom: 0.25rem;
    font-size: 0.625rem;
    letter-spacing: 0.1em;
}

.disclaimer-item p {
    color: var(--foreground-muted);
    margin: 0;
    line-height: 1.5;
}

/* ====================================
   Discover Insights / Body Map
   ==================================== */

.discover-insights,
.discover-insights-kure {
    padding: 1rem 0;
}

.discover-grid {
    display: grid;
    grid-template-columns: 2fr 1fr;
    gap: 2rem;
    min-height: 700px;
}

@media (max-width: 1024px) {
    .discover-grid {
        grid-template-columns: 1fr;
    }
}

/* Body Map Container */
.body-map-container {
    position: relative;
    border-radius: var(--radius-xl);
    border: 1px solid rgba(139, 92, 246, 0.2);
    background: rgba(0, 0, 0, 0.4);
    backdrop-filter: blur(8px);
    overflow: hidden;
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 600px;
}

.body-map-grid {
    /* Grid lines removed - cleaner look */
    display: none;
}

.body-map-scanline {
    position: absolute;
    inset: 0;
    background: linear-gradient(to bottom, transparent, rgba(139, 92, 246, 0.1), transparent);
    height: 20%;
    width: 100%;
    animation: scan 4s ease-in-out infinite;
    pointer-events: none;
    z-index: 10;
}

.body-map-image-wrapper {
    position: relative;
    max-width: 100%;
    max-height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
}

.body-map-image {
    height: 90%;
    width: auto;
    object-fit: contain;
    opacity: 0.9;
    filter: drop-shadow(0 0 30px rgba(139, 92, 246, 0.3));
    transition: all 0.5s ease;
}

.body-map-container:hover .body-map-image {
    transform: scale(1.02);
}

/* Body Nodes */
.body-node {
    position: absolute;
    background: none;
    border: none;
    cursor: pointer;
    padding: 0;
    transition: all 0.3s ease;
    z-index: 20;
    transform: translate(-50%, -50%);
}

.body-node:hover {
    transform: translate(-50%, -50%) scale(1.1);
}

.body-node__inner {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    backdrop-filter: blur(8px);
    transition: all 0.3s ease;
}

.body-node__inner--primary {
    width: 48px;
    height: 48px;
    background: rgba(0, 0, 0, 0.4);
    border: 1px solid rgba(139, 92, 246, 0.5);
}

.body-node__inner--primary:hover,
.body-node--active .body-node__inner--primary {
    background: rgba(139, 92, 246, 0.2);
    border-color: var(--brand-primary);
    box-shadow: 0 0 30px rgba(139, 92, 246, 0.6);
}

.body-node__inner--danger {
    width: 64px;
    height: 64px;
    background: rgba(0, 0, 0, 0.4);
    border: 1px solid rgba(239, 68, 68, 0.5);
}

.body-node__inner--danger:hover,
.body-node--active .body-node__inner--danger {
    background: rgba(239, 68, 68, 0.2);
    border-color: var(--destructive);
    box-shadow: 0 0 30px rgba(239, 68, 68, 0.6);
}

.body-node__inner--warning {
    width: 40px;
    height: 40px;
    background: rgba(0, 0, 0, 0.4);
    border: 1px solid rgba(245, 158, 11, 0.5);
}

.body-node__inner--warning:hover,
.body-node--active .body-node__inner--warning {
    background: rgba(245, 158, 11, 0.2);
    border-color: var(--warning);
    box-shadow: 0 0 30px rgba(245, 158, 11, 0.6);
}

.body-node__inner--success {
    width: 56px;
    height: 56px;
    background: rgba(0, 0, 0, 0.4);
    border: 1px solid rgba(16, 185, 129, 0.5);
}

.body-node__inner--success:hover,
.body-node--active .body-node__inner--success {
    background: rgba(16, 185, 129, 0.2);
    border-color: var(--success);
    box-shadow: 0 0 30px rgba(16, 185, 129, 0.6);
}

.body-node__dot {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: var(--brand-primary);
    box-shadow: 0 0 10px var(--brand-primary);
}

.body-node--active .body-node__dot {
    animation: pulse-glow 1s ease-in-out infinite;
}

.body-node__icon {
    width: 20px;
    height: 20px;
}

.body-node__inner--danger .body-node__icon {
    color: var(--destructive);
}

.body-node__inner--success .body-node__icon {
    color: var(--success);
}

.body-node--active .body-node__icon {
    animation: pulse-glow 1s ease-in-out infinite;
}

.body-node__label {
    position: absolute;
    top: -32px;
    left: 50%;
    transform: translateX(-50%);
    white-space: nowrap;
    background: rgba(0, 0, 0, 0.8);
    padding: 0.25rem 0.5rem;
    border-radius: var(--radius-sm);
    font-size: 0.625rem;
    font-family: monospace;
    letter-spacing: 0.05em;
    border: 1px solid rgba(255, 255, 255, 0.1);
    opacity: 0;
    transition: opacity 0.3s ease;
    pointer-events: none;
}

.body-node:hover .body-node__label {
    opacity: 1;
}

/* Node Positions (fallbacks; live overlay uses inline coordinates).
   Six primary system markers: brain, heart, immune, metabolism, kidneys,
   cancer. Cancer is off-body on the right annotation rail. */
.body-node--brain     { top:  8.5%; left: 50%;   }
.body-node--heart     { top: 23.5%; left: 54.5%; }
.body-node--immune    { top: 34.5%; left: 57.5%; }
.body-node--metabolism{ top: 33.5%; left: 41.5%; }
.body-node--kidneys   { top: 43.5%; left: 37.5%; }
.body-node--cancer    { top: 20%;   left: 88%;   }

.body-node__inner--info {
    width: 40px;
    height: 40px;
    background: rgba(0, 0, 0, 0.4);
    border: 1px solid rgba(59, 130, 246, 0.5);
}

.body-node__inner--info:hover,
.body-node--active .body-node__inner--info {
    background: rgba(59, 130, 246, 0.2);
    border-color: #3b82f6;
    box-shadow: 0 0 30px rgba(59, 130, 246, 0.6);
}

.info-summary--info {
    background: rgba(59, 130, 246, 0.1);
    border-color: rgba(59, 130, 246, 0.2);
}

.info-summary--info .info-summary__icon svg {
    color: #3b82f6;
}

/* Info Panel */
.discover-info-panel {
    position: relative;
    background: rgba(10, 10, 15, 0.9);
    backdrop-filter: blur(16px);
    border: 1px solid rgba(139, 92, 246, 0.3);
    border-radius: var(--radius-xl);
    overflow: hidden;
    display: flex;
    flex-direction: column;
    box-shadow: 0 0 50px -10px rgba(139, 92, 246, 0.1);
}

.info-panel-glow {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 2px;
    background: linear-gradient(90deg, transparent, var(--brand-primary), transparent);
    opacity: 0.5;
}

.info-panel-header {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    padding: 1rem 1.5rem;
    background: rgba(255, 255, 255, 0.05);
    border-bottom: 1px solid var(--card-border);
}

.info-panel-header__icon {
    width: 40px;
    height: 40px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: rgba(139, 92, 246, 0.2);
    border-radius: var(--radius);
    color: var(--brand-primary);
}

.info-panel-header__icon svg {
    width: 20px;
    height: 20px;
}

.info-panel-header__icon .icon-active {
    display: none;
}

.info-panel--active .info-panel-header__icon .icon-idle {
    display: none;
}

.info-panel--active .info-panel-header__icon .icon-active {
    display: block;
}

.info-panel-header__status {
    font-family: monospace;
    font-size: 0.75rem;
    text-transform: uppercase;
    letter-spacing: 0.1em;
    color: rgba(139, 92, 246, 0.8);
}

.info-panel-header__indicator {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: var(--foreground-muted);
    margin-left: auto;
}

.info-panel-header__indicator.active {
    background: var(--brand-primary);
    box-shadow: 0 0 10px var(--brand-primary);
    animation: pulse-glow 1s ease-in-out infinite;
}

.info-panel-content {
    flex: 1;
    padding: 2rem 1.5rem;
    position: relative;
}

/* Idle State */
.info-panel-idle {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    height: 100%;
    min-height: 300px;
    opacity: 0.5;
}

.idle-spinner {
    position: relative;
    width: 96px;
    height: 96px;
    margin-bottom: 1rem;
}

.idle-spinner__outer {
    position: absolute;
    inset: 0;
    border: 1px dashed rgba(255, 255, 255, 0.2);
    border-radius: 50%;
    animation: spin-slow 10s linear infinite;
}

.idle-spinner__inner {
    position: absolute;
    inset: 16px;
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 50%;
}

.idle-text {
    font-family: monospace;
    font-size: 0.75rem;
    text-transform: uppercase;
    letter-spacing: 0.1em;
    color: var(--foreground-muted);
}

/* Active State */
.info-panel-active {
    display: none;
    animation: slide-up 0.5s ease-out;
}

.info-title {
    font-size: 1.875rem;
    font-weight: 700;
    color: var(--foreground);
    margin: 0 0 0.25rem;
    letter-spacing: -0.02em;
}

.info-title-line {
    width: 48px;
    height: 2px;
    background: rgba(139, 92, 246, 0.5);
    border-radius: 1px;
    margin-bottom: 2rem;
}

.info-summary {
    display: flex;
    gap: 1rem;
    padding: 1.25rem;
    background: rgba(139, 92, 246, 0.1);
    border: 1px solid rgba(139, 92, 246, 0.2);
    border-radius: var(--radius-lg);
    margin-bottom: 1.5rem;
}

.info-summary--danger {
    background: rgba(239, 68, 68, 0.1);
    border-color: rgba(239, 68, 68, 0.2);
}

.info-summary--warning {
    background: rgba(245, 158, 11, 0.1);
    border-color: rgba(245, 158, 11, 0.2);
}

.info-summary--success {
    background: rgba(16, 185, 129, 0.1);
    border-color: rgba(16, 185, 129, 0.2);
}

.info-summary__icon {
    flex-shrink: 0;
}

.info-summary__icon svg {
    width: 20px;
    height: 20px;
    color: var(--brand-primary);
}

.info-summary--danger .info-summary__icon svg {
    color: var(--destructive);
}

.info-summary--warning .info-summary__icon svg {
    color: var(--warning);
}

.info-summary--success .info-summary__icon svg {
    color: var(--success);
}

.info-summary__label {
    font-size: 0.625rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.1em;
    color: var(--brand-primary);
    margin: 0 0 0.5rem;
    display: flex;
    align-items: center;
    gap: 0.5rem;
}

.info-summary--danger .info-summary__label {
    color: var(--destructive);
}

.info-summary--warning .info-summary__label {
    color: var(--warning);
}

.info-summary--success .info-summary__label {
    color: var(--success);
}

.info-summary__text {
    font-size: 1.125rem;
    font-weight: 500;
    color: var(--foreground);
    margin: 0;
    line-height: 1.4;
}

.info-details {
    margin-bottom: 2rem;
}

.info-details__label {
    font-size: 0.625rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.1em;
    color: var(--foreground-muted);
    margin: 0 0 0.75rem;
}

.info-details__text {
    color: var(--foreground);
    margin: 0;
    line-height: 1.6;
    padding-left: 1rem;
    border-left: 2px solid rgba(139, 92, 246, 0.3);
}

.info-action-btn {
    width: 100%;
    padding: 0.875rem 1.5rem;
    background: rgba(139, 92, 246, 0.2);
    border: 1px solid rgba(139, 92, 246, 0.5);
    border-radius: var(--radius);
    color: var(--brand-primary);
    font-size: 0.75rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.1em;
    cursor: pointer;
    transition: all 0.3s ease;
    box-shadow: 0 0 20px -5px rgba(139, 92, 246, 0.3);
}

.info-action-btn:hover {
    background: rgba(139, 92, 246, 0.3);
    box-shadow: 0 0 30px -5px rgba(139, 92, 246, 0.5);
}

.info-panel-footer {
    padding: 0.75rem 1.5rem;
    text-align: right;
    font-family: monospace;
    font-size: 0.625rem;
    color: rgba(255, 255, 255, 0.1);
}

/* ====================================
   QC Banner Component
   ==================================== */
.qc-banner {
    width: 100%;
    padding: 0.75rem 1.5rem;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.75rem;
    font-size: 0.875rem;
    font-weight: 500;
    backdrop-filter: blur(8px);
    letter-spacing: 0.02em;
}

.qc-banner__content {
    display: flex;
    align-items: center;
    gap: 0.75rem;
}

.qc-banner__icon {
    width: 16px;
    height: 16px;
    flex-shrink: 0;
}

.qc-banner__status {
    font-weight: 600;
    letter-spacing: 0.05em;
}

.qc-banner__message {
    opacity: 0.7;
    font-weight: 400;
    border-left: 1px solid currentColor;
    padding-left: 0.75rem;
    margin-left: 0.25rem;
}

.qc-banner--action {
    background: rgba(239, 68, 68, 0.1);
    color: var(--destructive);
    border-bottom: 1px solid rgba(239, 68, 68, 0.3);
    box-shadow: 0 0 20px -5px rgba(239, 68, 68, 0.3);
}

.qc-banner--review {
    background: rgba(245, 158, 11, 0.1);
    color: var(--warning);
    border-bottom: 1px solid rgba(245, 158, 11, 0.3);
    box-shadow: 0 0 20px -5px rgba(245, 158, 11, 0.3);
}

/* ====================================
   View Mode Content Visibility
   ==================================== */
/* Clinician view is the default. Patient-facing copy renders only in the
   patient portal, which is the sole place that sets data-view-mode. */
body:not([data-view-mode="patient"]) .patient-only {
    display: none !important;
}

body[data-view-mode="patient"] .clinician-only {
    display: none !important;
}

/* ====================================
   AI Command Center
   ==================================== */
.ai-command-center {
    position: fixed;
    bottom: 1.5rem;
    right: 1.5rem;
    z-index: 1000;
}

.ai-command-btn {
    width: 56px;
    height: 56px;
    border-radius: 50%;
    border: none;
    background: linear-gradient(135deg, var(--brand-primary), #7c3aed);
    color: white;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow: 0 4px 20px rgba(139, 92, 246, 0.4), 0 0 30px rgba(139, 92, 246, 0.2);
    transition: all 0.3s ease;
}

.ai-command-btn:hover {
    transform: scale(1.1);
    box-shadow: 0 6px 30px rgba(139, 92, 246, 0.5), 0 0 40px rgba(139, 92, 246, 0.3);
}

.ai-command-btn svg {
    width: 24px;
    height: 24px;
}

.ai-command-panel {
    position: absolute;
    bottom: 70px;
    right: 0;
    width: 380px;
    max-height: 500px;
    background: rgba(10, 10, 15, 0.95);
    backdrop-filter: blur(16px);
    border: 1px solid rgba(139, 92, 246, 0.3);
    border-radius: var(--radius-xl);
    overflow: hidden;
    display: none;
    flex-direction: column;
    box-shadow: 0 12px 40px rgba(0, 0, 0, 0.5), 0 0 30px rgba(139, 92, 246, 0.1);
}

.ai-command-center--open .ai-command-panel {
    display: flex;
}

.ai-panel-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 1rem 1.25rem;
    background: rgba(255, 255, 255, 0.05);
    border-bottom: 1px solid var(--card-border);
}

.ai-panel-title {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    font-weight: 700;
    color: var(--foreground);
}

.ai-panel-title svg {
    width: 20px;
    height: 20px;
    color: var(--brand-primary);
}

.ai-panel-close {
    width: 32px;
    height: 32px;
    border-radius: 50%;
    border: none;
    background: transparent;
    color: var(--foreground-muted);
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.2s ease;
}

.ai-panel-close:hover {
    background: rgba(255, 255, 255, 0.1);
    color: var(--foreground);
}

.ai-panel-messages {
    flex: 1;
    overflow-y: auto;
    padding: 1rem;
    display: flex;
    flex-direction: column;
    gap: 1rem;
    min-height: 200px;
}

.ai-message {
    padding: 0.75rem 1rem;
    border-radius: var(--radius);
    max-width: 85%;
    font-size: 0.875rem;
    line-height: 1.5;
}

.ai-message--assistant {
    background: rgba(139, 92, 246, 0.1);
    border: 1px solid rgba(139, 92, 246, 0.2);
    color: var(--foreground);
    align-self: flex-start;
}

.ai-message--user {
    background: rgba(255, 255, 255, 0.1);
    border: 1px solid var(--card-border);
    color: var(--foreground);
    align-self: flex-end;
}

.ai-suggestions {
    padding: 1rem;
    border-top: 1px solid var(--card-border);
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
}

.ai-suggestion-btn {
    padding: 0.5rem 0.75rem;
    border-radius: 999px;
    border: 1px solid rgba(139, 92, 246, 0.3);
    background: rgba(139, 92, 246, 0.1);
    color: var(--brand-primary);
    font-size: 0.75rem;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.2s ease;
}

.ai-suggestion-btn:hover {
    background: rgba(139, 92, 246, 0.2);
    box-shadow: 0 0 15px rgba(139, 92, 246, 0.3);
}

.ai-panel-input {
    display: flex;
    gap: 0.5rem;
    padding: 1rem;
    border-top: 1px solid var(--card-border);
    background: rgba(0, 0, 0, 0.3);
}

.ai-panel-input input {
    flex: 1;
    padding: 0.75rem 1rem;
    border-radius: var(--radius);
    border: 1px solid var(--card-border);
    background: rgba(0, 0, 0, 0.4);
    color: var(--foreground);
    font-size: 0.875rem;
}

.ai-panel-input input:focus {
    outline: none;
    border-color: rgba(139, 92, 246, 0.5);
    box-shadow: 0 0 15px rgba(139, 92, 246, 0.2);
}

.ai-panel-input button {
    width: 40px;
    height: 40px;
    border-radius: var(--radius);
    border: none;
    background: var(--brand-primary);
    color: white;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.2s ease;
}

.ai-panel-input button:hover {
    background: #7c3aed;
}

.ai-typing-indicator {
    display: flex;
    gap: 0.25rem;
    padding: 0.75rem 1rem;
    align-self: flex-start;
}

.ai-typing-indicator span {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: var(--brand-primary);
    animation: typing-bounce 1.4s ease-in-out infinite both;
}

.ai-typing-indicator span:nth-child(2) {
    animation-delay: 0.16s;
}

.ai-typing-indicator span:nth-child(3) {
    animation-delay: 0.32s;
}

@keyframes typing-bounce {
    0%, 80%, 100% {
        transform: scale(0.6);
        opacity: 0.4;
    }
    40% {
        transform: scale(1);
        opacity: 1;
    }
}

/* ====================================
   KureInsights Module Styles
   ==================================== */

/* Badge Component */
.badge {
    display: inline-flex;
    align-items: center;
    padding: 0.35rem 0.75rem;
    border-radius: 999px;
    font-size: 0.75rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    border: 1px solid transparent;
}

.badge--sm {
    padding: 0.2rem 0.5rem;
    font-size: 0.625rem;
}

.badge--very_low {
    background: rgba(16, 185, 129, 0.1);
    color: var(--success);
    border-color: rgba(16, 185, 129, 0.3);
}

.badge--low {
    background: rgba(59, 130, 246, 0.1);
    color: var(--info);
    border-color: rgba(59, 130, 246, 0.3);
}

.badge--typical {
    background: rgba(148, 163, 184, 0.1);
    color: var(--foreground-muted);
    border-color: rgba(148, 163, 184, 0.3);
}

.badge--high {
    background: rgba(245, 158, 11, 0.1);
    color: var(--warning);
    border-color: rgba(245, 158, 11, 0.3);
}

.badge--very_high {
    background: rgba(239, 68, 68, 0.1);
    color: var(--destructive);
    border-color: rgba(239, 68, 68, 0.3);
}

/* Proteomics Module */
.module-proteomics {
    display: flex;
    flex-direction: column;
    gap: 2rem;
}

.proteomic-hero {
    display: grid;
    grid-template-columns: 1fr;
    gap: 1.5rem;
}

@media (min-width: 768px) {
    .proteomic-hero {
        grid-template-columns: 2fr 1fr;
    }
}

/* Hero Card */
.hero-card {
    position: relative;
    background: var(--card-bg);
    backdrop-filter: blur(16px);
    border: 1px solid var(--card-border);
    border-radius: var(--radius-xl);
    padding: 1.5rem;
    overflow: hidden;
}

.hero-card__glow {
    position: absolute;
    top: 0;
    right: 0;
    width: 200px;
    height: 200px;
    background: radial-gradient(circle, rgba(139, 92, 246, 0.15), transparent 70%);
    pointer-events: none;
}

.hero-card__header {
    display: flex;
    align-items: flex-start;
    gap: 1rem;
    margin-bottom: 1.5rem;
    position: relative;
}

.hero-card__icon {
    width: 40px;
    height: 40px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: rgba(139, 92, 246, 0.2);
    border-radius: var(--radius);
    color: var(--brand-primary);
}

.hero-card__icon svg {
    width: 20px;
    height: 20px;
}

.hero-card__title-group {
    flex: 1;
}

.hero-card__label {
    display: block;
    font-size: 0.875rem;
    font-weight: 500;
    color: var(--foreground-muted);
    text-transform: uppercase;
    letter-spacing: 0.05em;
}

.hero-card__sublabel {
    display: block;
    font-size: 0.75rem;
    color: rgba(148, 163, 184, 0.7);
    margin-top: 0.25rem;
}

.hero-card__content {
    position: relative;
}

.hero-age-display {
    display: flex;
    align-items: baseline;
    gap: 0.5rem;
    margin-bottom: 1rem;
}

.hero-age-value {
    font-size: 3.5rem;
    font-weight: 700;
    color: var(--foreground);
    line-height: 1;
    letter-spacing: -0.02em;
}

.hero-age-unit {
    font-size: 1rem;
    color: var(--foreground-muted);
}

.hero-comparison {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    padding: 0.75rem 1rem;
    background: rgba(255, 255, 255, 0.05);
    border-radius: var(--radius);
    border: 1px solid var(--card-border);
}

.hero-comparison__indicator {
    display: flex;
    align-items: center;
    gap: 0.5rem;
}

.hero-comparison__indicator.positive {
    color: var(--destructive);
}

.hero-comparison__indicator.negative {
    color: var(--success);
}

.hero-comparison__indicator svg {
    width: 16px;
    height: 16px;
}

.hero-comparison__value {
    font-weight: 600;
    font-size: 0.875rem;
}

.hero-comparison__vs {
    font-size: 0.75rem;
    color: var(--foreground-muted);
    margin-left: auto;
}

/* Extreme Cards */
.proteomic-extremes {
    display: flex;
    flex-direction: column;
    gap: 1rem;
}

.extreme-card {
    background: var(--card-bg);
    backdrop-filter: blur(8px);
    border: 1px solid var(--card-border);
    border-radius: var(--radius);
    padding: 1rem;
}

.extreme-card__header {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    font-size: 0.75rem;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    margin-bottom: 0.75rem;
}

.extreme-card__header svg {
    width: 14px;
    height: 14px;
}

.extreme-card--high .extreme-card__header {
    color: var(--destructive);
}

.extreme-card--low .extreme-card__header {
    color: var(--success);
}

.extreme-card__organ {
    font-size: 1rem;
    font-weight: 600;
    color: var(--foreground);
    margin-bottom: 0.25rem;
}

.extreme-card__value {
    font-size: 1.25rem;
    font-weight: 700;
    font-family: monospace;
    margin-bottom: 0.5rem;
}

.extreme-card--high .extreme-card__value {
    color: var(--destructive);
}

.extreme-card--low .extreme-card__value {
    color: var(--success);
}

/* Proteomic Tabs */
.proteomic-tabs {
    display: flex;
    gap: 0.5rem;
    padding: 0.25rem;
    background: rgba(0, 0, 0, 0.3);
    border-radius: var(--radius);
    border: 1px solid var(--card-border);
    width: fit-content;
}

.proteomic-tab {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.625rem 1rem;
    border: none;
    border-radius: calc(var(--radius) - 2px);
    background: transparent;
    color: var(--foreground-muted);
    font-size: 0.875rem;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.2s ease;
}

.proteomic-tab svg {
    width: 16px;
    height: 16px;
}

.proteomic-tab:hover {
    color: var(--foreground);
    background: rgba(255, 255, 255, 0.05);
}

.proteomic-tab--active {
    background: rgba(139, 92, 246, 0.2);
    color: var(--brand-primary);
}

.tab-badge {
    font-size: 0.625rem;
    padding: 0.125rem 0.375rem;
    border-radius: 999px;
    background: rgba(245, 158, 11, 0.2);
    color: var(--warning);
    text-transform: uppercase;
    letter-spacing: 0.05em;
}

/* Organ Cards Grid */
.organ-cards-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
    gap: 1rem;
}

.organ-card-v2 {
    background: var(--card-bg);
    backdrop-filter: blur(8px);
    border: 1px solid var(--card-border);
    border-radius: var(--radius);
    overflow: hidden;
    transition: all 0.3s ease;
}

.organ-card-v2:hover {
    border-color: var(--card-hover-border);
    box-shadow: var(--shadow-glow);
}

.organ-card-v2--very_high {
    border-left: 3px solid var(--destructive);
}

.organ-card-v2--high {
    border-left: 3px solid var(--warning);
}

.organ-card-v2--typical {
    border-left: 3px solid var(--foreground-muted);
}

.organ-card-v2--low {
    border-left: 3px solid var(--info);
}

.organ-card-v2--very_low {
    border-left: 3px solid var(--success);
}

.organ-card-v2__header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 1rem;
    background: rgba(255, 255, 255, 0.03);
    border-bottom: 1px solid var(--card-border);
}

.organ-card-v2__name {
    font-size: 1rem;
    font-weight: 600;
    color: var(--foreground);
    margin: 0;
}

.organ-card-v2__body {
    padding: 1rem;
}

.organ-card-v2__ages {
    display: flex;
    gap: 1.5rem;
    margin-bottom: 1rem;
}

.organ-age-block {
    display: flex;
    flex-direction: column;
}

.organ-age-block__value {
    font-size: 1.5rem;
    font-weight: 700;
    font-family: monospace;
    color: var(--foreground);
}

.organ-age-block__label {
    font-size: 0.75rem;
    color: var(--foreground-muted);
    text-transform: uppercase;
    letter-spacing: 0.05em;
}

.organ-age-block--gap.positive .organ-age-block__value {
    color: var(--destructive);
}

.organ-age-block--gap.negative .organ-age-block__value {
    color: var(--success);
}

.organ-card-v2__zscore {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    font-size: 0.75rem;
    margin-bottom: 0.75rem;
}

.zscore-label {
    color: var(--foreground-muted);
}

.zscore-value {
    font-family: monospace;
    color: var(--foreground);
}

.zscore-value.high {
    color: var(--warning);
}

.organ-card-v2__interpretation {
    font-size: 0.875rem;
    color: var(--foreground-muted);
    line-height: 1.5;
    margin: 0 0 0.75rem 0;
}

.organ-card-v2__tags {
    display: flex;
    flex-wrap: wrap;
    gap: 0.375rem;
}

.watch-tag {
    font-size: 0.625rem;
    padding: 0.25rem 0.5rem;
    border-radius: 999px;
    background: rgba(139, 92, 246, 0.1);
    color: var(--brand-primary);
    border: 1px solid rgba(139, 92, 246, 0.2);
}

/* Cognition Disclaimer */
.cognition-disclaimer {
    display: flex;
    align-items: flex-start;
    gap: 0.75rem;
    padding: 1rem;
    background: rgba(245, 158, 11, 0.1);
    border: 1px solid rgba(245, 158, 11, 0.2);
    border-radius: var(--radius);
    margin-bottom: 1.5rem;
}

.cognition-disclaimer svg {
    width: 20px;
    height: 20px;
    color: var(--warning);
    flex-shrink: 0;
    margin-top: 0.125rem;
}

.cognition-disclaimer p {
    font-size: 0.875rem;
    color: var(--warning);
    margin: 0;
    line-height: 1.5;
}

/* Data Table */
.data-table-section {
    margin-top: 2rem;
}

.data-table-title {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    font-size: 1rem;
    font-weight: 600;
    color: var(--foreground);
    margin: 0 0 1rem 0;
}

.data-table-title svg {
    width: 20px;
    height: 20px;
    color: var(--brand-primary);
}

.data-table-wrapper {
    background: var(--card-bg);
    backdrop-filter: blur(8px);
    border: 1px solid var(--card-border);
    border-radius: var(--radius);
    overflow: hidden;
}

.data-table {
    width: 100%;
    border-collapse: collapse;
}

.data-table th,
.data-table td {
    padding: 0.75rem 1rem;
    text-align: left;
    border-bottom: 1px solid var(--card-border);
}

.data-table th {
    background: rgba(255, 255, 255, 0.05);
    font-size: 0.75rem;
    font-weight: 600;
    color: var(--foreground-muted);
    text-transform: uppercase;
    letter-spacing: 0.05em;
}

.data-table td {
    font-size: 0.875rem;
    color: var(--foreground);
}

.data-table tbody tr:hover {
    background: rgba(255, 255, 255, 0.03);
}

.data-table tbody tr:last-child td {
    border-bottom: none;
}

.visually-hidden {
    position: absolute;
    width: 1px;
    height: 1px;
    margin: -1px;
    padding: 0;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0;
}

.reconcile-kits-table code {
    font-size: 0.8125rem;
    word-break: break-all;
}

.reconcile-kits-table__form {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.5rem;
}

.reconcile-kits-table__form .form-control {
    flex: 1 1 12rem;
    min-width: 0;
}

.reconcile-kits-table__muted,
.kit-reconciliation__unassigned,
.kit-reconciliation__empty {
    color: var(--foreground-muted);
}

.reconcile-toolbar {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.75rem;
    padding: 0.75rem 1rem;
    margin-bottom: 1.5rem;
    background: var(--surface-elevated);
    border: 1px solid var(--border-color);
    border-radius: var(--radius-md);
}

.reconcile-toolbar__form {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.5rem;
}

.reconcile-toolbar__label {
    font-size: 0.875rem;
    font-weight: 500;
    color: var(--text-secondary);
}

.reconcile-toolbar__file {
    display: inline-flex;
    cursor: pointer;
}

.reconcile-toolbar__input {
    font-size: 0.8125rem;
    max-width: 220px;
}

.reconcile-toolbar__input::file-selector-button {
    padding: 0.375rem 0.75rem;
    font-size: 0.8125rem;
    font-weight: 500;
    color: var(--text-primary);
    background: var(--surface-elevated);
    border: 1px solid var(--border-color);
    border-radius: var(--radius-sm);
    cursor: pointer;
    transition: background-color 0.15s ease;
}

.reconcile-toolbar__input::file-selector-button:hover {
    background: var(--surface-hover);
}

.reconcile-toolbar__count {
    margin-left: auto;
    font-size: 0.875rem;
    color: var(--foreground-muted);
}

.text-right {
    text-align: right;
}

.text-center {
    text-align: center;
}

.font-mono {
    font-family: monospace;
}

.font-medium {
    font-weight: 500;
}

.text-destructive {
    color: var(--destructive);
}

.text-success {
    color: var(--success);
}

/* Provenance Section */
.provenance-section {
    margin-top: 2rem;
    background: var(--card-bg);
    border: 1px solid var(--card-border);
    border-radius: var(--radius);
}

.provenance-summary {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    padding: 1rem;
    cursor: pointer;
    font-size: 0.875rem;
    font-weight: 600;
    color: var(--foreground-muted);
    list-style: none;
}

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

.provenance-summary svg {
    width: 16px;
    height: 16px;
    color: var(--brand-primary);
}

.provenance-content {
    padding: 0 1rem 1rem;
    display: grid;
    gap: 0.75rem;
}

.provenance-item {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 0.5rem 0;
    border-bottom: 1px solid var(--card-border);
}

.provenance-item:last-child {
    border-bottom: none;
}

.provenance-label {
    font-size: 0.75rem;
    color: var(--foreground-muted);
    text-transform: uppercase;
    letter-spacing: 0.05em;
}

.provenance-value {
    font-size: 0.875rem;
    color: var(--foreground);
}

/* Microbiome Module */
.module-microbiome {
    display: flex;
    flex-direction: column;
    gap: 2rem;
}

.microbiome-hero {
    display: grid;
    grid-template-columns: 2fr 1fr;
    gap: 1.5rem;
}

@media (max-width: 768px) {
    .microbiome-hero {
        grid-template-columns: 1fr;
    }
}

.hero-card__glow--green {
    background: radial-gradient(circle, rgba(16, 185, 129, 0.15), transparent 70%);
}

.hero-card__icon--green {
    background: rgba(16, 185, 129, 0.2);
    color: var(--success);
}

.hero-score-display {
    display: flex;
    align-items: baseline;
    gap: 1rem;
    margin-bottom: 1rem;
}

.hero-score-value {
    font-size: 3rem;
    font-weight: 700;
    color: var(--foreground);
    line-height: 1;
}

.hero-score-direction {
    font-size: 0.875rem;
    font-weight: 600;
    padding: 0.25rem 0.75rem;
    border-radius: 999px;
}

.direction--healthy {
    background: rgba(16, 185, 129, 0.2);
    color: var(--success);
}

.direction--unhealthy {
    background: rgba(239, 68, 68, 0.2);
    color: var(--destructive);
}

.gmwi-progress {
    margin-bottom: 1rem;
}

.gmwi-progress__bar {
    height: 8px;
    background: rgba(255, 255, 255, 0.1);
    border-radius: 999px;
    position: relative;
    overflow: hidden;
}

.gmwi-progress__fill {
    height: 100%;
    background: linear-gradient(90deg, var(--destructive), var(--warning), var(--success));
    border-radius: 999px;
    transition: width 0.5s ease;
}

.gmwi-progress__marker {
    position: absolute;
    top: -4px;
    width: 4px;
    height: 16px;
    background: var(--foreground);
    border-radius: 2px;
    transform: translateX(-50%);
}

.gmwi-progress__labels {
    display: flex;
    justify-content: space-between;
    font-size: 0.625rem;
    color: var(--foreground-muted);
    text-transform: uppercase;
    letter-spacing: 0.05em;
    margin-top: 0.5rem;
}

.hero-interpretation {
    font-size: 0.875rem;
    color: var(--foreground-muted);
    line-height: 1.5;
    margin: 0;
}

/* Diversity Card */
.diversity-card {
    background: var(--card-bg);
    backdrop-filter: blur(8px);
    border: 1px solid var(--card-border);
    border-radius: var(--radius);
    padding: 1.5rem;
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
}

.diversity-card__header {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    font-size: 0.75rem;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    color: var(--foreground-muted);
    margin-bottom: 1rem;
}

.diversity-card__header svg {
    width: 16px;
    height: 16px;
    color: var(--brand-primary);
}

.diversity-card__value {
    font-size: 2.5rem;
    font-weight: 700;
    color: var(--foreground);
    line-height: 1;
    margin-bottom: 0.25rem;
}

.diversity-card__label {
    font-size: 0.75rem;
    color: var(--foreground-muted);
    margin-bottom: 1rem;
}

.diversity-card__hint {
    font-size: 0.75rem;
    color: rgba(148, 163, 184, 0.7);
    line-height: 1.4;
    margin: 0;
}

/* Section Title */
.section-title {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    font-size: 1rem;
    font-weight: 600;
    color: var(--foreground);
    margin: 0 0 1.25rem 0;
}

.section-title svg {
    width: 20px;
    height: 20px;
    color: var(--brand-primary);
}

/* Contributors Section */
.contributors-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
    gap: 1rem;
}

.contributor-card {
    background: var(--card-bg);
    backdrop-filter: blur(8px);
    border: 1px solid var(--card-border);
    border-radius: var(--radius);
    padding: 1rem;
}

.contributor-card--positive {
    border-left: 3px solid var(--success);
}

.contributor-card--negative {
    border-left: 3px solid var(--destructive);
}

.contributor-card__name {
    font-size: 0.875rem;
    font-weight: 600;
    color: var(--foreground);
    margin-bottom: 0.75rem;
    font-style: italic;
}

.contributor-card__coef {
    position: relative;
    height: 24px;
    background: rgba(255, 255, 255, 0.05);
    border-radius: 4px;
    margin-bottom: 0.5rem;
    overflow: hidden;
}

.coef-bar {
    position: absolute;
    left: 0;
    top: 0;
    height: 100%;
    border-radius: 4px;
}

.coef-bar.positive {
    background: rgba(16, 185, 129, 0.3);
}

.coef-bar.negative {
    background: rgba(239, 68, 68, 0.3);
}

.coef-value {
    position: absolute;
    right: 8px;
    top: 50%;
    transform: translateY(-50%);
    font-size: 0.75rem;
    font-family: monospace;
    font-weight: 600;
    color: var(--foreground);
}

.contributor-card__impact {
    font-size: 0.75rem;
    color: var(--foreground-muted);
}

/* Index Cards V2 */
.indices-grid-v2 {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(250px, 1fr));
    gap: 1rem;
}

.index-card-v2 {
    background: var(--card-bg);
    backdrop-filter: blur(8px);
    border: 1px solid var(--card-border);
    border-radius: var(--radius);
    padding: 1rem;
}

.index-card-v2__header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 0.75rem;
}

.index-card-v2__name {
    font-size: 0.875rem;
    font-weight: 600;
    color: var(--foreground);
    margin: 0;
}

.index-card-v2__value {
    margin-bottom: 0.75rem;
}

.value-lg {
    font-size: 2rem;
    font-weight: 700;
    font-family: monospace;
    color: var(--foreground);
}

.index-card-v2__text {
    font-size: 0.8125rem;
    color: var(--foreground-muted);
    line-height: 1.5;
    margin: 0 0 0.75rem 0;
}

.index-card-v2__actions {
    display: flex;
    flex-wrap: wrap;
    gap: 0.375rem;
}

.action-tag {
    font-size: 0.625rem;
    padding: 0.25rem 0.5rem;
    border-radius: 999px;
    background: rgba(139, 92, 246, 0.1);
    color: var(--brand-primary);
    border: 1px solid rgba(139, 92, 246, 0.2);
}

/* Composite Cards V2 */
.composites-grid-v2 {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
    gap: 1rem;
}

.composite-card-v2 {
    background: var(--card-bg);
    backdrop-filter: blur(8px);
    border: 1px solid var(--card-border);
    border-radius: var(--radius);
    padding: 1rem;
}

.composite-card-v2--detected {
    border-left: 3px solid var(--warning);
}

.composite-card-v2--not_detected {
    border-left: 3px solid var(--success);
}

.composite-card-v2__header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 0.75rem;
}

.composite-card-v2__name {
    font-size: 0.875rem;
    font-weight: 600;
    color: var(--foreground);
}

.state-badge {
    display: inline-flex;
    align-items: center;
    gap: 0.375rem;
    font-size: 0.625rem;
    font-weight: 600;
    padding: 0.25rem 0.5rem;
    border-radius: 999px;
    text-transform: uppercase;
    letter-spacing: 0.05em;
}

.state-badge--detected {
    background: rgba(245, 158, 11, 0.2);
    color: var(--warning);
}

.state-badge--not_detected {
    background: rgba(16, 185, 129, 0.2);
    color: var(--success);
}

.composite-card-v2__text {
    font-size: 0.8125rem;
    color: var(--foreground-muted);
    line-height: 1.5;
    margin: 0 0 0.75rem 0;
}

.composite-card-v2__hits {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.375rem;
}

.hits-label {
    font-size: 0.75rem;
    color: var(--foreground-muted);
}

.hit-tag {
    font-size: 0.625rem;
    padding: 0.25rem 0.5rem;
    border-radius: 999px;
    background: rgba(245, 158, 11, 0.1);
    color: var(--warning);
    border: 1px solid rgba(245, 158, 11, 0.2);
}

/* Raw Files Section */
.raw-files-grid {
    display: flex;
    flex-wrap: wrap;
    gap: 0.75rem;
}

.raw-file-btn {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.625rem 1rem;
    border-radius: var(--radius);
    border: 1px solid var(--card-border);
    background: var(--card-bg);
    color: var(--foreground-muted);
    font-size: 0.8125rem;
    font-weight: 500;
    cursor: not-allowed;
    opacity: 0.6;
}

.raw-file-btn svg {
    width: 16px;
    height: 16px;
}

/* Methylation Module */
.module-methylation {
    display: flex;
    flex-direction: column;
    gap: 2rem;
}

.methylation-hero {
    display: grid;
    grid-template-columns: 2fr 1fr;
    gap: 1.5rem;
}

@media (max-width: 768px) {
    .methylation-hero {
        grid-template-columns: 1fr;
    }
}

.hero-card__glow--purple {
    background: radial-gradient(circle, rgba(139, 92, 246, 0.15), transparent 70%);
}

/* Pace Card V2 */
.pace-card-v2 {
    background: var(--card-bg);
    backdrop-filter: blur(8px);
    border: 1px solid var(--card-border);
    border-radius: var(--radius);
    padding: 1.5rem;
    display: flex;
    flex-direction: column;
}

.pace-card-v2__header {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    margin-bottom: 1rem;
}

.pace-card-v2__header svg {
    width: 20px;
    height: 20px;
    color: var(--brand-primary);
}

.pace-card-v2__header span:first-of-type {
    flex: 1;
    font-size: 0.75rem;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    color: var(--foreground-muted);
}

.pace-card-v2__value {
    display: flex;
    align-items: baseline;
    gap: 0.5rem;
    margin-bottom: 1rem;
}

.value-xl {
    font-size: 2.5rem;
    font-weight: 700;
    font-family: monospace;
    color: var(--foreground);
}

.value-unit {
    font-size: 0.875rem;
    color: var(--foreground-muted);
}

.pace-card-v2__gauge {
    margin-bottom: 1rem;
}

.pace-gauge {
    height: 8px;
    background: rgba(255, 255, 255, 0.1);
    border-radius: 999px;
    position: relative;
}

.pace-gauge__fill {
    height: 100%;
    background: linear-gradient(90deg, var(--success), var(--warning), var(--destructive));
    border-radius: 999px;
}

.pace-gauge__marker {
    position: absolute;
    top: -4px;
    width: 4px;
    height: 16px;
    background: var(--foreground);
    border-radius: 2px;
    transform: translateX(-50%);
}

.pace-gauge__labels {
    display: flex;
    justify-content: space-between;
    font-size: 0.625rem;
    color: var(--foreground-muted);
    text-transform: uppercase;
    letter-spacing: 0.05em;
    margin-top: 0.5rem;
}

.pace-card-v2__hint {
    font-size: 0.75rem;
    color: var(--foreground-muted);
    margin: 0;
}

/* Section Description */
.section-description {
    font-size: 0.875rem;
    color: var(--foreground-muted);
    margin: -0.75rem 0 1.25rem 0;
}

/* Clocks Grid V2 */
.clocks-grid-v2 {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
    gap: 1rem;
}

.clock-card-v2 {
    background: var(--card-bg);
    backdrop-filter: blur(8px);
    border: 1px solid var(--card-border);
    border-radius: var(--radius);
    overflow: hidden;
}

.clock-card-v2__header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0.75rem 1rem;
    background: rgba(255, 255, 255, 0.03);
    border-bottom: 1px solid var(--card-border);
}

.clock-card-v2__name {
    font-size: 0.875rem;
    font-weight: 600;
    color: var(--foreground);
    margin: 0;
}

.clock-card-v2__body {
    padding: 1rem;
}

.clock-card-v2__ages {
    display: flex;
    gap: 1.5rem;
    margin-bottom: 0.75rem;
}

.age-block {
    display: flex;
    flex-direction: column;
}

.age-block__value {
    font-size: 1.25rem;
    font-weight: 700;
    font-family: monospace;
    color: var(--foreground);
}

.age-block__label {
    font-size: 0.625rem;
    color: var(--foreground-muted);
    text-transform: uppercase;
    letter-spacing: 0.05em;
}

.age-block--accel.positive .age-block__value {
    color: var(--destructive);
}

.age-block--accel.negative .age-block__value {
    color: var(--success);
}

.clock-card-v2__percentile {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    margin-bottom: 0.5rem;
}

.percentile-bar-mini {
    flex: 1;
    height: 4px;
    background: rgba(255, 255, 255, 0.1);
    border-radius: 2px;
    overflow: hidden;
}

.percentile-bar-mini__fill {
    height: 100%;
    background: var(--brand-primary);
    border-radius: 2px;
}

.percentile-text {
    font-size: 0.625rem;
    color: var(--foreground-muted);
    white-space: nowrap;
}

.clock-card-v2__meta {
    display: flex;
    gap: 0.5rem;
    font-size: 0.625rem;
}

.meta-label {
    color: var(--foreground-muted);
}

.meta-value {
    color: var(--foreground);
}

/* Disclaimer Box */
.disclaimer-box {
    display: flex;
    align-items: flex-start;
    gap: 0.75rem;
    padding: 1rem;
    background: rgba(139, 92, 246, 0.1);
    border: 1px solid rgba(139, 92, 246, 0.2);
    border-radius: var(--radius);
}

.disclaimer-box svg {
    width: 20px;
    height: 20px;
    color: var(--brand-primary);
    flex-shrink: 0;
    margin-top: 0.125rem;
}

.disclaimer-box p {
    font-size: 0.8125rem;
    color: var(--foreground-muted);
    margin: 0;
    line-height: 1.5;
}

.text-muted {
    color: var(--foreground-muted);
}

/* Animation */
.animate-fade-in {
    animation: fadeIn 0.5s ease-out;
}

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

/* Responsive */
@media (max-width: 1024px) {
    .report-layout {
        flex-direction: column;
    }

    .report-sidebar {
        width: 100%;
        display: flex;
        flex-wrap: wrap;
        gap: 0.5rem;
    }

    .sidebar-section {
        display: contents;
    }

    .sidebar-heading {
        width: 100%;
    }

    .sidebar-nav-btn {
        flex: 1;
        min-width: 140px;
    }

    .ai-command-panel {
        width: calc(100vw - 2rem);
        right: -0.5rem;
    }
}

/* ====================================
   KureInsights Module Styles V2
   ==================================== */

/* PRS Module */
.module-prs {
    padding: 1.5rem;
}

.prs-hero {
    margin-bottom: 2rem;
}

.hero-card--prs .hero-card__glow--blue {
    background: radial-gradient(circle at 50% 0%, rgba(59, 130, 246, 0.2), transparent 70%);
}

.hero-card__icon--blue {
    background: rgba(59, 130, 246, 0.2);
    color: #3b82f6;
}

.prs-stats {
    display: flex;
    gap: 2rem;
    margin-bottom: 1rem;
}

.prs-stat {
    display: flex;
    flex-direction: column;
}

.prs-stat__value {
    font-size: 2rem;
    font-weight: 700;
    font-family: monospace;
    color: var(--foreground);
}

.prs-stat__label {
    font-size: 0.75rem;
    color: var(--foreground-muted);
    text-transform: uppercase;
}

.prs-stat--highlight .prs-stat__value {
    color: var(--destructive);
}

/* PRS Risk Cards */
.prs-risk-cards {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
    gap: 1.25rem;
    margin-bottom: 2rem;
}

.prs-risk-card {
    background: var(--card-bg);
    backdrop-filter: blur(8px);
    border: 1px solid var(--card-border);
    border-left: 4px solid var(--brand-primary);
    border-radius: var(--radius);
    padding: 1.25rem;
    transition: all 0.3s ease;
}

.prs-risk-card:hover {
    border-color: rgba(139, 92, 246, 0.5);
    box-shadow: 0 0 20px -5px rgba(139, 92, 246, 0.2);
}

.prs-risk-card--high,
.prs-risk-card--very_high {
    border-left-color: var(--destructive);
}

.prs-risk-card--low,
.prs-risk-card--very_low {
    border-left-color: var(--success);
}

.prs-risk-card__header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 0.5rem;
}

.prs-risk-card__category {
    font-size: 0.625rem;
    text-transform: uppercase;
    letter-spacing: 0.1em;
    color: var(--foreground-muted);
}

.prs-risk-card__name {
    font-size: 1.125rem;
    font-weight: 600;
    color: var(--foreground);
    margin: 0 0 0.75rem;
}

.prs-risk-card__explanation {
    font-size: 0.875rem;
    color: var(--foreground-muted);
    line-height: 1.5;
    margin-bottom: 1rem;
}

.prs-risk-card__score {
    display: flex;
    align-items: center;
    gap: 0.5rem;
}

.prs-risk-card__score .score-label {
    font-size: 0.75rem;
    color: var(--foreground-muted);
}

.prs-risk-card__score .score-value {
    font-family: monospace;
    font-weight: 600;
}

.prs-risk-card__score .score-value.positive {
    color: var(--destructive);
}

.prs-risk-card__score .score-value.negative {
    color: var(--success);
}

.prs-risk-card__meta {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    font-size: 0.75rem;
    color: var(--foreground-muted);
    margin-top: 0.75rem;
    padding-top: 0.75rem;
    border-top: 1px solid var(--card-border);
}

/* Percentile Bar V2 */
.percentile-bar-v2 {
    position: relative;
    height: 8px;
    margin-bottom: 0.5rem;
}

.percentile-bar-v2__track {
    position: absolute;
    inset: 0;
    background: rgba(255, 255, 255, 0.1);
    border-radius: 4px;
}

.percentile-bar-v2__fill {
    position: absolute;
    left: 0;
    top: 0;
    bottom: 0;
    background: var(--brand-primary);
    border-radius: 4px;
}

.percentile-bar-v2__fill--high,
.percentile-bar-v2__fill--very_high {
    background: var(--destructive);
}

.percentile-bar-v2__fill--low,
.percentile-bar-v2__fill--very_low {
    background: var(--success);
}

.percentile-bar-v2__marker {
    position: absolute;
    top: 50%;
    width: 12px;
    height: 12px;
    background: var(--foreground);
    border-radius: 50%;
    transform: translate(-50%, -50%);
    box-shadow: 0 0 10px rgba(0, 0, 0, 0.5);
}

.percentile-bar-v2__labels {
    display: flex;
    justify-content: space-between;
    font-size: 0.625rem;
    color: var(--foreground-muted);
}

.percentile-bar-v2__value {
    color: var(--foreground);
    font-weight: 500;
}

/* Risk Legend */
.risk-legend-grid-v2 {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
    gap: 1rem;
}

.risk-legend-item-v2 {
    display: flex;
    flex-direction: column;
    gap: 0.25rem;
    padding: 0.75rem;
    background: var(--card-bg);
    border-radius: var(--radius);
    border: 1px solid var(--card-border);
}

.risk-legend-item-v2__badge {
    font-size: 0.75rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.05em;
}

.risk-legend-item-v2--very_high .risk-legend-item-v2__badge { color: var(--destructive); }
.risk-legend-item-v2--high .risk-legend-item-v2__badge { color: #f97316; }
.risk-legend-item-v2--typical .risk-legend-item-v2__badge { color: var(--foreground-muted); }
.risk-legend-item-v2--low .risk-legend-item-v2__badge { color: #22c55e; }
.risk-legend-item-v2--very_low .risk-legend-item-v2__badge { color: var(--success); }

.risk-legend-item-v2__text {
    font-size: 0.75rem;
    color: var(--foreground-muted);
}

/* Clinical Summary Module */
.module-clinical-summary {
    padding: 1.5rem;
}

.clinical-hero {
    margin-bottom: 2rem;
}

.clinical-section {
    margin-bottom: 2rem;
}

/* History Grid */
.history-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
    gap: 1rem;
    margin-bottom: 1.5rem;
}

.history-card {
    background: var(--card-bg);
    border: 1px solid var(--card-border);
    border-radius: var(--radius);
    padding: 1rem;
}

.history-card--primary {
    border-left: 3px solid var(--brand-primary);
}

.history-card--warning {
    border-left: 3px solid var(--warning);
    background: rgba(245, 158, 11, 0.05);
}

.history-card__label {
    font-size: 0.75rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    color: var(--foreground-muted);
    margin: 0 0 0.5rem;
    display: flex;
    align-items: center;
    gap: 0.5rem;
}

.history-card__content {
    font-size: 0.875rem;
    color: var(--foreground);
    margin: 0;
}

/* Vitals Grid */
.vitals-grid-v2 {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(160px, 1fr));
    gap: 1rem;
}

.vital-card {
    background: var(--card-bg);
    border: 1px solid var(--card-border);
    border-radius: var(--radius);
    padding: 1rem;
    text-align: center;
}

.vital-card__label {
    display: block;
    font-size: 0.75rem;
    color: var(--foreground-muted);
    margin-bottom: 0.5rem;
}

.vital-card__value {
    font-size: 1.25rem;
    font-weight: 700;
    font-family: monospace;
    color: var(--foreground);
}

.vital-card__unit {
    font-size: 0.75rem;
    font-weight: 400;
    color: var(--foreground-muted);
}

/* Risk Category Cards V2 */
.risk-cards-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
    gap: 1rem;
}

.risk-category-card-v2 {
    background: var(--card-bg);
    border: 1px solid var(--card-border);
    border-radius: var(--radius);
    overflow: hidden;
}

.risk-category-card-v2__header {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    padding: 0.75rem 1rem;
    background: rgba(255, 255, 255, 0.03);
    border-bottom: 1px solid var(--card-border);
    font-size: 0.875rem;
    font-weight: 600;
    color: var(--foreground);
}

.risk-category-card-v2__header svg {
    width: 18px;
    height: 18px;
    color: var(--brand-primary);
}

.risk-category-card-v2__content {
    padding: 0.75rem 1rem;
}

.risk-item-v2 {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 0.5rem 0;
    border-bottom: 1px solid rgba(255, 255, 255, 0.05);
}

.risk-item-v2:last-child {
    border-bottom: none;
}

.risk-item-v2__name {
    font-size: 0.8125rem;
    color: var(--foreground-muted);
}

.risk-item-v2__level {
    font-size: 0.75rem;
    font-weight: 600;
}

.risk-item-v2__level--high,
.risk-item-v2__level--very_high { color: var(--destructive); }
.risk-item-v2__level--accelerated { color: var(--destructive); }
.risk-item-v2__level--decelerated { color: var(--success); }
.risk-item-v2__level--negative { color: var(--success); }
.risk-item-v2__level--non_healthy { color: var(--warning); }

/* Finding Card */
.finding-card {
    background: var(--card-bg);
    border: 1px solid var(--card-border);
    border-radius: var(--radius);
    padding: 1.25rem;
    margin-bottom: 1rem;
}

.finding-card__title {
    font-size: 0.875rem;
    font-weight: 600;
    color: var(--foreground);
    margin: 0 0 0.75rem;
}

.finding-card__content {
    font-size: 0.875rem;
    color: var(--foreground-muted);
    margin: 0 0 1rem;
}

.finding-card__interpretation {
    font-size: 0.8125rem;
    color: var(--foreground-muted);
    font-style: italic;
    margin: 1rem 0 0;
    padding-top: 0.75rem;
    border-top: 1px solid var(--card-border);
}

/* Classification Badges */
.classification-badges {
    display: flex;
    gap: 0.75rem;
    margin-bottom: 1rem;
}

.classification-badge {
    padding: 0.375rem 0.75rem;
    border-radius: var(--radius-sm);
    font-size: 0.75rem;
    font-weight: 600;
}

.classification-badge--healthy { background: rgba(16, 185, 129, 0.2); color: var(--success); }
.classification-badge--non_healthy { background: rgba(245, 158, 11, 0.2); color: var(--warning); }

.confidence-badge {
    padding: 0.375rem 0.75rem;
    border-radius: var(--radius-sm);
    font-size: 0.75rem;
    background: rgba(255, 255, 255, 0.1);
    color: var(--foreground-muted);
}

.confidence-badge--high { color: var(--success); }

/* Signatures Grid */
.signatures-grid-v2 {
    display: flex;
    flex-wrap: wrap;
    gap: 0.75rem;
    margin-top: 1rem;
}

.signature-card-v2 {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.5rem 0.75rem;
    background: rgba(255, 255, 255, 0.05);
    border-radius: var(--radius-sm);
}

.signature-card-v2__name {
    font-size: 0.75rem;
    color: var(--foreground);
}

.signature-card-v2__metric {
    font-family: monospace;
    font-size: 0.75rem;
    color: var(--foreground-muted);
}

/* Clinical Impression */
.clinical-impression-card {
    background: linear-gradient(135deg, rgba(139, 92, 246, 0.1), rgba(139, 92, 246, 0.05));
    border: 1px solid rgba(139, 92, 246, 0.3);
    border-radius: var(--radius-lg);
    padding: 1.5rem;
}

.clinical-impression-card__title {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    font-size: 1rem;
    font-weight: 600;
    color: var(--foreground);
    margin: 0 0 1rem;
}

.clinical-impression-card__title svg {
    width: 20px;
    height: 20px;
    color: var(--brand-primary);
}

.clinical-impression-card__content {
    font-size: 0.9375rem;
    color: var(--foreground-muted);
    line-height: 1.6;
    margin: 0;
}

/* Plan Cards */
.plan-cards {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
    gap: 1rem;
}

.plan-card {
    background: var(--card-bg);
    border: 1px solid var(--card-border);
    border-radius: var(--radius);
    padding: 1.25rem;
}

.plan-card__title {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    font-size: 0.875rem;
    font-weight: 600;
    color: var(--foreground);
    margin: 0 0 0.75rem;
}

.plan-card__title svg {
    width: 16px;
    height: 16px;
    color: var(--brand-primary);
}

.plan-card__list {
    margin: 0;
    padding-left: 1rem;
}

.plan-card__list li {
    font-size: 0.875rem;
    color: var(--foreground-muted);
    margin-bottom: 0.5rem;
}

.plan-notes-card {
    background: var(--card-bg);
    border: 1px solid var(--card-border);
    border-radius: var(--radius);
    padding: 1.25rem;
    margin-top: 1rem;
}

.plan-notes-card__title {
    font-size: 0.875rem;
    font-weight: 600;
    color: var(--foreground);
    margin: 0 0 0.5rem;
}

.plan-notes-card__content {
    font-size: 0.875rem;
    color: var(--foreground-muted);
    margin: 0;
}

/* Social History Section */
.social-history-section,
.medications-section {
    margin-top: 1.5rem;
}

.subsection-title {
    font-size: 0.8125rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    color: var(--foreground-muted);
    margin: 0 0 0.75rem;
}

.social-history-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(180px, 1fr));
    gap: 0.75rem;
}

.social-item {
    display: flex;
    flex-direction: column;
    padding: 0.75rem;
    background: rgba(255, 255, 255, 0.03);
    border-radius: var(--radius-sm);
}

.social-item__label {
    font-size: 0.6875rem;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    color: var(--foreground-muted);
    margin-bottom: 0.25rem;
}

.social-item__value {
    font-size: 0.875rem;
    color: var(--foreground);
}

/* Medications Grid */
.medications-grid {
    display: flex;
    flex-wrap: wrap;
    gap: 0.75rem;
}

.medication-card {
    display: flex;
    flex-direction: column;
    padding: 0.75rem 1rem;
    background: var(--card-bg);
    border: 1px solid var(--card-border);
    border-radius: var(--radius);
}

.medication-card__name {
    font-size: 0.875rem;
    font-weight: 600;
    color: var(--foreground);
}

.medication-card__details {
    font-size: 0.75rem;
    color: var(--foreground-muted);
}

.history-pgx-tile {
    display: flex;
    align-items: center;
    gap: 1rem;
    padding: 1rem 1.25rem;
    border: 1px solid var(--card-border);
    border-radius: var(--radius);
    background: linear-gradient(135deg, rgba(56, 189, 248, 0.08), rgba(139, 92, 246, 0.06));
    color: inherit;
    text-decoration: none;
    transition: border-color 0.15s ease, box-shadow 0.15s ease, transform 0.15s ease;
}

.history-pgx-tile:hover,
.history-pgx-tile:focus-visible {
    border-color: rgba(56, 189, 248, 0.45);
    box-shadow: 0 0 0 1px rgba(56, 189, 248, 0.2);
    transform: translateY(-1px);
    text-decoration: none;
}

.history-pgx-tile__badge {
    flex-shrink: 0;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 3rem;
    padding: 0.35rem 0.6rem;
    border-radius: 999px;
    background: rgba(56, 189, 248, 0.22);
    color: var(--genomics-action-monitor, #38bdf8);
    font-size: 0.75rem;
    font-weight: 700;
    letter-spacing: 0.04em;
}

.history-pgx-tile__content {
    display: flex;
    flex-direction: column;
    gap: 0.25rem;
    min-width: 0;
}

.history-pgx-tile__title {
    font-size: 0.95rem;
    font-weight: 600;
    color: var(--foreground);
}

.history-pgx-tile__summary {
    font-size: 0.8125rem;
    color: var(--foreground-muted);
    line-height: 1.45;
}

.history-pgx-tile__icon {
    flex-shrink: 0;
    width: 1.25rem;
    height: 1.25rem;
    margin-left: auto;
    color: var(--foreground-muted);
}

.medication-card__delete {
    margin-top: 0.5rem;
}

/* Labs Module */
.module-labs {
    padding: 1.5rem;
}

.labs-hero {
    margin-bottom: 2rem;
}

.hero-card--labs .hero-card__glow--cyan {
    background: radial-gradient(circle at 50% 0%, rgba(34, 211, 238, 0.2), transparent 70%);
}

.hero-card__icon--cyan {
    background: rgba(34, 211, 238, 0.2);
    color: #22d3ee;
}

.notable-points-list {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
}

.notable-point {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    font-size: 0.875rem;
    color: var(--warning);
}

.notable-point svg {
    flex-shrink: 0;
    color: var(--warning);
}

.labs-section {
    margin-bottom: 2rem;
}

.labs-panel-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
    gap: 1rem;
}

.labs-panel-grid--compact {
    grid-template-columns: repeat(auto-fill, minmax(160px, 1fr));
}

.lab-value-card {
    background: var(--card-bg);
    border: 1px solid var(--card-border);
    border-radius: var(--radius);
    padding: 0.875rem;
}

.lab-value-card--high,
.lab-value-card--critical_high {
    border-left: 3px solid var(--destructive);
}

.lab-value-card--low,
.lab-value-card--critical_low {
    border-left: 3px solid var(--warning);
}

.lab-value-card__label {
    display: block;
    font-size: 0.75rem;
    color: var(--foreground-muted);
    margin-bottom: 0.375rem;
}

.lab-value-card__content {
    display: flex;
    align-items: baseline;
    gap: 0.5rem;
    flex-wrap: wrap;
}

.lab-value-card__value {
    font-size: 1.125rem;
    font-weight: 700;
    font-family: monospace;
    color: var(--foreground);
}

.lab-value-card__unit {
    font-size: 0.75rem;
    color: var(--foreground-muted);
}

.lab-flag {
    font-size: 0.625rem;
    font-weight: 600;
    text-transform: uppercase;
    padding: 0.125rem 0.375rem;
    border-radius: 3px;
}

.lab-flag--high,
.lab-flag--critical_high {
    background: rgba(239, 68, 68, 0.2);
    color: var(--destructive);
}

.lab-flag--low,
.lab-flag--critical_low {
    background: rgba(245, 158, 11, 0.2);
    color: var(--warning);
}

.lab-value-card__ref,
.lab-value-card__calc {
    display: block;
    font-size: 0.6875rem;
    color: var(--foreground-muted);
    margin-top: 0.25rem;
}

.lab-value-card__interp {
    display: block;
    font-size: 0.75rem;
    color: var(--brand-primary);
    margin-top: 0.25rem;
}

/* Differential Section */
.differential-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
    gap: 1.5rem;
    margin-top: 1rem;
}

.differential-panel {
    background: var(--card-bg);
    border: 1px solid var(--card-border);
    border-radius: var(--radius);
    padding: 1rem;
}

.differential-panel__title {
    font-size: 0.8125rem;
    font-weight: 600;
    color: var(--foreground);
    margin: 0 0 1rem;
}

.differential-bars {
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
}

.diff-bar-item {
    display: grid;
    grid-template-columns: 80px 1fr 40px;
    align-items: center;
    gap: 0.75rem;
}

.diff-bar-item__label {
    font-size: 0.75rem;
    color: var(--foreground-muted);
}

.diff-bar {
    height: 8px;
    background: rgba(255, 255, 255, 0.1);
    border-radius: 4px;
    overflow: hidden;
}

.diff-bar__fill {
    height: 100%;
    background: var(--brand-primary);
    border-radius: 4px;
}

.diff-bar__fill--blue { background: #3b82f6; }
.diff-bar__fill--green { background: #22c55e; }
.diff-bar__fill--orange { background: #f97316; }
.diff-bar__fill--purple { background: #a855f7; }

.diff-bar-item__value {
    font-size: 0.75rem;
    font-family: monospace;
    color: var(--foreground);
    text-align: right;
}

.differential-abs-grid {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
}

.diff-abs-item {
    display: flex;
    justify-content: space-between;
    padding: 0.5rem;
    background: rgba(255, 255, 255, 0.03);
    border-radius: var(--radius-sm);
}

.diff-abs-item--high,
.diff-abs-item--High {
    background: rgba(239, 68, 68, 0.1);
}

.diff-abs-item--low,
.diff-abs-item--Low {
    background: rgba(245, 158, 11, 0.1);
}

.diff-abs-item__label {
    font-size: 0.75rem;
    color: var(--foreground-muted);
}

.diff-abs-item__value {
    font-size: 0.75rem;
    font-family: monospace;
    color: var(--foreground);
}

/* Digital Biomarkers Module */
.module-digital-biomarkers {
    padding: 1.5rem;
}

.digital-hero {
    margin-bottom: 2rem;
}

.hero-card--digital .hero-card__glow--gradient {
    background: radial-gradient(circle at 50% 0%, rgba(139, 92, 246, 0.15), rgba(34, 211, 238, 0.1), transparent 70%);
}

.hero-card__icon--gradient {
    background: linear-gradient(135deg, rgba(139, 92, 246, 0.2), rgba(34, 211, 238, 0.2));
    color: var(--brand-primary);
}

/* Thresholds */
.thresholds-grid-v2 {
    display: flex;
    gap: 1rem;
    flex-wrap: wrap;
}

.threshold-card {
    display: flex;
    flex-direction: column;
    padding: 0.75rem 1.25rem;
    background: var(--card-bg);
    border: 1px solid var(--card-border);
    border-radius: var(--radius);
}

.threshold-card--high {
    border-left: 3px solid var(--destructive);
}

.threshold-card--moderate {
    border-left: 3px solid var(--warning);
}

.threshold-card__label {
    font-size: 0.6875rem;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    color: var(--foreground-muted);
}

.threshold-card--high .threshold-card__label {
    color: var(--destructive);
}

.threshold-card--moderate .threshold-card__label {
    color: var(--warning);
}

.threshold-card__value {
    font-size: 0.875rem;
    font-weight: 600;
    color: var(--foreground);
}

/* Biomarker Cards */
.biomarker-cards {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
    gap: 1rem;
}

.biomarker-card {
    background: var(--card-bg);
    border: 1px solid var(--card-border);
    border-radius: var(--radius);
    padding: 1.25rem;
}

.biomarker-card--high,
.biomarker-card--elevated,
.biomarker-card--very_high {
    border-left: 3px solid var(--destructive);
}

.biomarker-card__header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 1rem;
}

.biomarker-card__name {
    font-size: 1rem;
    font-weight: 600;
    color: var(--foreground);
    margin: 0;
}

.biomarker-card__body {
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.biomarker-card__score .score-value {
    font-size: 2rem;
    font-weight: 700;
    font-family: monospace;
    color: var(--foreground);
}

.biomarker-card__score .score-value--high,
.biomarker-card__score .score-value--elevated,
.biomarker-card__score .score-value--very_high {
    color: var(--destructive);
}

.biomarker-card__score .score-value--na {
    color: var(--foreground-muted);
    font-size: 1.25rem;
}

.biomarker-card__status {
    display: flex;
    align-items: center;
    gap: 0.5rem;
}

.status-indicator {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: var(--foreground-muted);
}

.status-indicator--active { background: var(--success); box-shadow: 0 0 10px var(--success); }
.status-indicator--elevated { background: var(--destructive); box-shadow: 0 0 10px var(--destructive); }
.status-indicator--predicted { background: var(--brand-primary); }

.status-label {
    font-size: 0.75rem;
    color: var(--foreground-muted);
}

.biomarker-card__message {
    display: flex;
    gap: 0.5rem;
    margin-top: 1rem;
    padding-top: 1rem;
    border-top: 1px solid var(--card-border);
    font-size: 0.8125rem;
    color: var(--foreground-muted);
}

.biomarker-card__message svg {
    flex-shrink: 0;
    color: var(--brand-primary);
}

.biomarker-card__message p {
    margin: 0;
}

/* Provenance Card */
.provenance-card {
    background: var(--card-bg);
    border: 1px solid var(--card-border);
    border-radius: var(--radius);
    padding: 1.25rem;
    margin-top: 2rem;
}

.provenance-card__title {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    font-size: 0.875rem;
    font-weight: 600;
    color: var(--foreground);
    margin: 0 0 0.75rem;
}

.provenance-card__title svg {
    width: 16px;
    height: 16px;
    color: var(--foreground-muted);
}

.provenance-card__content {
    font-size: 0.875rem;
    color: var(--foreground-muted);
    margin: 0;
}

/* EHR Patient Chart Header with Controls */
.ehr-patient-chart__header {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    flex-wrap: wrap;
    gap: 1rem;
    margin-bottom: 1.5rem;
}

.ehr-patient-chart__controls {
    display: flex;
    align-items: center;
    gap: 1rem;
}

/* ============================================
   KUREINSIGHTS LAYOUT SYSTEM
   Sidebar-based navigation with glassmorphism
   ============================================ */

/* Main Layout Container */
.ki-layout {
    display: flex;
    flex-direction: column;
    min-height: calc(100vh - 60px);
    padding-bottom: 120px; /* Space for AI command center */
}

/* Top Tabs Navigation */
.ki-top-tabs {
    position: sticky;
    top: 60px;
    z-index: 40;
    background: rgba(0, 0, 0, 0.8);
    backdrop-filter: blur(12px);
    border-bottom: 1px solid rgba(255, 255, 255, 0.1);
    padding: 0.5rem 0;
}

.ki-top-tabs__container {
    max-width: 1400px;
    margin: 0 auto;
    padding: 0 1rem;
}

/* Flex rather than a fixed column count: the tab set varies with the modules a
   patient actually has, and a hard-coded grid wrapped the last tab onto a
   second row. */
.ki-top-tabs__list {
    display: flex;
    gap: 0.25rem;
    background: rgba(0, 0, 0, 0.4);
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 0.5rem;
    padding: 0.25rem;
}

.ki-top-tabs__tab {
    display: flex;
    flex: 1 1 0;
    min-width: 0;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
    padding: 0.625rem 1rem;
    border-radius: 0.375rem;
    font-size: 0.875rem;
    font-weight: 500;
    color: #94a3b8;
    background: transparent;
    border: none;
    cursor: pointer;
    transition: all 0.2s ease;
    white-space: nowrap;
}

.ki-top-tabs__tab:hover {
    color: var(--brand-primary);
    background: rgba(255, 255, 255, 0.05);
}

.ki-top-tabs__tab--active {
    color: var(--brand-primary);
    background: rgba(139, 92, 246, 0.2);
    box-shadow: 0 0 15px rgba(139, 92, 246, 0.3);
    border: 1px solid rgba(139, 92, 246, 0.3);
}

.ki-top-tabs__text {
    display: none;
}

@media (min-width: 768px) {
    .ki-top-tabs__text {
        display: inline;
    }
}

/* Main Content Area */
.ki-content {
    flex: 1;
    max-width: 1400px;
    margin: 0 auto;
    padding: 1.5rem 1rem;
    width: 100%;
}

/* Main Panel States */
.ki-main-panel {
    display: none;
}

.ki-main-panel--active {
    display: block;
    animation: fadeIn 0.3s ease;
}

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

/* Reports Layout (Sidebar + Content) */
.ki-reports-layout {
    display: flex;
    gap: 1.5rem;
    align-items: flex-start;
}

/* Sidebar Navigation */
.ki-sidebar {
    width: 240px;
    flex-shrink: 0;
    position: sticky;
    top: 140px;
    max-height: calc(100vh - 180px);
    overflow-y: auto;
    padding-right: 0.5rem;
}

.ki-sidebar__section-title {
    font-size: 0.6875rem;
    font-weight: 700;
    color: #64748b;
    text-transform: uppercase;
    letter-spacing: 0.1em;
    padding: 0 0.75rem;
    margin: 1.5rem 0 0.5rem;
}

.ki-sidebar__section-title:first-child {
    margin-top: 0;
}

.ki-sidebar__btn {
    width: 100%;
    display: flex;
    align-items: center;
    gap: 0.75rem;
    padding: 0.75rem 1rem;
    border-radius: 0.5rem;
    font-size: 0.875rem;
    font-weight: 500;
    color: #94a3b8;
    background: rgba(255, 255, 255, 0.05);
    border: 1px solid transparent;
    cursor: pointer;
    transition: all 0.2s ease;
    text-align: left;
    margin-bottom: 0.25rem;
}

.ki-sidebar__btn:hover {
    background: rgba(255, 255, 255, 0.1);
    color: #f1f5f9;
}

/* Table-of-contents entries: the Reports sidebar navigates rather than
   swapping panels, so its entries are anchors. */
.ki-sidebar__btn--link {
    text-decoration: none;
}

.ki-sidebar__btn--link:focus-visible {
    outline: 2px solid var(--brand-primary);
    outline-offset: 2px;
}

.ki-sidebar__btn--active {
    background: var(--brand-primary);
    color: white;
    box-shadow: 0 0 15px rgba(139, 92, 246, 0.3);
    border-color: rgba(139, 92, 246, 0.5);
}

.ki-sidebar__empty {
    padding: 1rem;
    color: #64748b;
    font-size: 0.875rem;
}

/* Module Content Area */
.ki-module-content {
    flex: 1;
    min-width: 0;
}

.ki-module-panel {
    display: none;
}

.ki-module-panel--active {
    display: block;
    animation: fadeIn 0.3s ease;
}

/* Panel Content (for non-reports panels) */
.ki-panel-content {
    max-width: 900px;
}

.ki-panel-header {
    margin-bottom: 2rem;
}

.ki-panel-header__title {
    font-size: 1.75rem;
    font-weight: 700;
    color: var(--foreground);
    margin: 0 0 0.5rem;
}

.ki-panel-header__subtitle {
    font-size: 0.9375rem;
    color: var(--foreground-muted);
    margin: 0;
}

/* Icon Base */
.ki-icon {
    width: 1rem;
    height: 1rem;
    flex-shrink: 0;
}

/* KureInsights Cards */
.ki-card {
    background: rgba(0, 0, 0, 0.4);
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 0.75rem;
    overflow: hidden;
    backdrop-filter: blur(8px);
    margin-bottom: 1rem;
}

.ki-card__header {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    padding: 1.25rem 1.5rem;
    border-bottom: 1px solid rgba(255, 255, 255, 0.05);
}

.ki-card__title {
    font-size: 1rem;
    font-weight: 600;
    color: var(--foreground);
    margin: 0;
}

.ki-card__meta {
    padding: 0.75rem 1.5rem;
    font-size: 0.8125rem;
    color: var(--foreground-muted);
    border-bottom: 1px solid rgba(255, 255, 255, 0.05);
}

.ki-card__content {
    padding: 1.5rem;
}

.ki-card--form {
    padding: 1.5rem;
}

/* Hero Cards */
.ki-hero-card {
    position: relative;
    background: rgba(0, 0, 0, 0.4);
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 0.75rem;
    overflow: hidden;
    padding: 1.5rem;
}

.ki-hero-card__glow {
    position: absolute;
    top: 0;
    right: 0;
    width: 8rem;
    height: 8rem;
    background: rgba(139, 92, 246, 0.1);
    border-radius: 50%;
    filter: blur(3rem);
    margin-right: -4rem;
    margin-top: -4rem;
    pointer-events: none;
}

.ki-hero-card__glow--success {
    background: rgba(16, 185, 129, 0.1);
}

.ki-hero-card__glow--warning {
    background: rgba(245, 158, 11, 0.1);
}

.ki-hero-card__glow--danger {
    background: rgba(239, 68, 68, 0.1);
}

.ki-hero-card__header {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    margin-bottom: 1rem;
    position: relative;
}

.ki-hero-card__label {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    font-size: 0.75rem;
    font-weight: 600;
    color: #94a3b8;
    text-transform: uppercase;
    letter-spacing: 0.05em;
}

.ki-hero-card__label svg {
    width: 1rem;
    height: 1rem;
    color: var(--brand-primary);
}

.ki-hero-card__sublabel {
    font-size: 0.75rem;
    color: #64748b;
    margin-top: 0.25rem;
}

.ki-hero-card__value {
    font-size: 3rem;
    font-weight: 700;
    color: white;
    line-height: 1;
    letter-spacing: -0.02em;
}

.ki-hero-card__unit {
    font-size: 0.875rem;
    color: #94a3b8;
    margin-left: 0.5rem;
}

/* Big Number Display */
.ki-big-number {
    display: flex;
    align-items: baseline;
    gap: 0.5rem;
    margin-bottom: 1rem;
}

.ki-big-number__value {
    font-size: 3.5rem;
    font-weight: 700;
    color: white;
    line-height: 1;
    letter-spacing: -0.02em;
}

.ki-big-number__value--success {
    color: #10b981;
}

.ki-big-number__value--warning {
    color: #f59e0b;
}

.ki-big-number__value--danger {
    color: #ef4444;
}

.ki-big-number__unit {
    font-size: 0.875rem;
    color: #94a3b8;
}

/* Comparison Info Box */
.ki-comparison-box {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.75rem 1rem;
    background: rgba(255, 255, 255, 0.05);
    border: 1px solid rgba(255, 255, 255, 0.05);
    border-radius: 0.5rem;
}

.ki-comparison-box__icon {
    width: 1rem;
    height: 1rem;
}

.ki-comparison-box__icon--up {
    color: #ef4444;
}

.ki-comparison-box__icon--down {
    color: #10b981;
}

.ki-comparison-box__text {
    font-size: 0.875rem;
    font-weight: 500;
    color: #e2e8f0;
}

.ki-comparison-box__secondary {
    font-size: 0.75rem;
    color: #64748b;
    margin-left: auto;
}

/* Progress Bars */
.ki-progress {
    height: 0.5rem;
    background: rgba(255, 255, 255, 0.1);
    border-radius: 9999px;
    overflow: hidden;
}

.ki-progress__fill {
    height: 100%;
    border-radius: 9999px;
    transition: width 0.5s ease;
}

.ki-progress__fill--gradient {
    background: linear-gradient(to right, #10b981, #f59e0b, #ef4444);
}

.ki-progress__fill--primary {
    background: var(--brand-primary);
}

.ki-progress__fill--success {
    background: #10b981;
}

.ki-progress__fill--warning {
    background: #f59e0b;
}

.ki-progress__fill--danger {
    background: #ef4444;
}

.ki-progress__labels {
    display: flex;
    justify-content: space-between;
    font-size: 0.625rem;
    color: #64748b;
    text-transform: uppercase;
    font-weight: 600;
    margin-top: 0.5rem;
}

/* Badges */
.ki-badge {
    display: inline-flex;
    align-items: center;
    padding: 0.25rem 0.625rem;
    font-size: 0.625rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.025em;
    border-radius: 0.25rem;
    border: 1px solid;
}

.ki-badge--very-high,
.ki-badge--danger {
    color: var(--destructive-text);
    border-color: rgba(239, 68, 68, 0.3);
    background: rgba(239, 68, 68, 0.1);
}

.ki-badge--high,
.ki-badge--warning {
    color: var(--warning-text);
    border-color: rgba(245, 158, 11, 0.3);
    background: rgba(245, 158, 11, 0.1);
}

.ki-badge--typical,
.ki-badge--success {
    color: var(--success-text);
    border-color: rgba(16, 185, 129, 0.3);
    background: rgba(16, 185, 129, 0.1);
}

.ki-badge--low,
.ki-badge--info {
    color: var(--info-text);
    border-color: rgba(59, 130, 246, 0.3);
    background: rgba(59, 130, 246, 0.1);
}

.ki-badge--very-low {
    color: var(--accent-text);
    border-color: rgba(139, 92, 246, 0.3);
    background: rgba(139, 92, 246, 0.1);
}

.ki-badge--unknown {
    color: #64748b;
    border-color: rgba(100, 116, 139, 0.3);
    background: rgba(100, 116, 139, 0.1);
}

/* Data Tables */
.ki-table-wrapper {
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 0.75rem;
    overflow: hidden;
    background: rgba(0, 0, 0, 0.4);
    backdrop-filter: blur(8px);
}

.ki-table {
    width: 100%;
    border-collapse: collapse;
}

.ki-table thead {
    background: rgba(255, 255, 255, 0.05);
}

.ki-table th {
    padding: 0.75rem 1rem;
    font-size: 0.8125rem;
    font-weight: 600;
    color: #94a3b8;
    text-align: left;
    border-bottom: 1px solid rgba(255, 255, 255, 0.1);
}

.ki-table th.text-right {
    text-align: right;
}

.ki-table th.text-center {
    text-align: center;
}

.ki-table td {
    padding: 0.75rem 1rem;
    font-size: 0.875rem;
    color: #e2e8f0;
    border-bottom: 1px solid rgba(255, 255, 255, 0.05);
}

.ki-table td.text-right {
    text-align: right;
}

.ki-table td.text-center {
    text-align: center;
}

.ki-table tbody tr {
    transition: background 0.15s ease;
}

.ki-table tbody tr:hover {
    background: rgba(255, 255, 255, 0.05);
}

.ki-table tbody tr:last-child td {
    border-bottom: none;
}

.ki-table .font-mono {
    font-family: 'JetBrains Mono', monospace;
}

.ki-table .font-bold {
    font-weight: 600;
}

.ki-table .text-muted {
    color: #64748b;
}

/* Section Title */
.ki-section-title {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    font-size: 1.125rem;
    font-weight: 700;
    color: white;
    margin: 2rem 0 1rem;
}

.ki-section-title svg {
    width: 1.25rem;
    height: 1.25rem;
    color: var(--brand-primary);
}

/* Module Header */
.ki-module-header {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    margin-bottom: 1.5rem;
}

.ki-module-header__icon {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 2.5rem;
    height: 2.5rem;
    background: rgba(139, 92, 246, 0.1);
    border: 1px solid rgba(139, 92, 246, 0.2);
    border-radius: 0.5rem;
    color: var(--brand-primary);
}

.ki-module-header__icon svg {
    width: 1.25rem;
    height: 1.25rem;
}

.ki-module-header__title {
    font-size: 1.5rem;
    font-weight: 700;
    color: white;
    margin: 0;
}

.ki-module-header__subtitle {
    font-size: 0.9375rem;
    color: #94a3b8;
    margin: 0.25rem 0 0;
}

.ki-module-header__actions {
    margin-left: auto;
    flex-shrink: 0;
}

/* Grid Layouts */
.ki-grid {
    display: grid;
    gap: 1.5rem;
}

.ki-grid--2 {
    grid-template-columns: repeat(1, 1fr);
}

.ki-grid--3 {
    grid-template-columns: repeat(1, 1fr);
}

@media (min-width: 768px) {
    .ki-grid--2 {
        grid-template-columns: repeat(2, 1fr);
    }

    .ki-grid--3 {
        grid-template-columns: repeat(2, 1fr);
    }
}

@media (min-width: 1024px) {
    .ki-grid--3 {
        grid-template-columns: repeat(3, 1fr);
    }
}

/* Buttons */
.ki-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
    padding: 0.625rem 1.25rem;
    font-size: 0.875rem;
    font-weight: 500;
    border-radius: 0.5rem;
    border: none;
    cursor: pointer;
    transition: all 0.2s ease;
}

.ki-btn--primary {
    background: var(--brand-primary);
    color: white;
}

.ki-btn--primary:hover {
    background: #7c3aed;
    box-shadow: 0 0 20px rgba(139, 92, 246, 0.4);
}

.ki-btn--ghost {
    background: transparent;
    color: #94a3b8;
    border: 1px solid rgba(255, 255, 255, 0.1);
}

.ki-btn--ghost:hover {
    background: rgba(255, 255, 255, 0.05);
    color: white;
}

.ki-btn--sm {
    padding: 0.375rem 0.75rem;
    font-size: 0.8125rem;
}

.ki-btn--danger {
    color: #ef4444;
}

.ki-btn--danger:hover {
    background: rgba(239, 68, 68, 0.1);
}

/* Form Elements */
.ki-form-field {
    margin-bottom: 1rem;
}

.ki-form-field__label {
    display: block;
    font-size: 0.875rem;
    font-weight: 500;
    color: var(--foreground);
    margin-bottom: 0.5rem;
}

.ki-textarea {
    width: 100%;
    padding: 0.75rem 1rem;
    font-size: 0.875rem;
    color: var(--foreground);
    background: rgba(255, 255, 255, 0.05);
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 0.5rem;
    resize: vertical;
    font-family: inherit;
}

.ki-textarea:focus {
    outline: none;
    border-color: var(--brand-primary);
    box-shadow: 0 0 0 2px rgba(139, 92, 246, 0.2);
}

.ki-textarea::placeholder {
    color: var(--foreground-muted);
}

.ki-form-field__actions {
    display: flex;
    justify-content: flex-end;
    gap: 0.5rem;
    margin-top: 1rem;
}

/* Empty State */
.ki-empty-state {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    text-align: center;
    padding: 4rem 2rem;
}

.ki-empty-state--sm {
    padding: 2rem 1rem;
}

.ki-empty-state__icon {
    width: 4rem;
    height: 4rem;
    color: #64748b;
    margin-bottom: 1.5rem;
}

.ki-empty-state__icon svg {
    width: 100%;
    height: 100%;
}

.ki-empty-state__title {
    font-size: 1.25rem;
    font-weight: 600;
    color: var(--foreground);
    margin: 0 0 0.5rem;
}

.ki-empty-state__text {
    font-size: 0.9375rem;
    color: var(--foreground-muted);
    margin: 0 0 1.5rem;
    max-width: 400px;
}

/* Notes List */
.ki-notes-list {
    margin-top: 2rem;
}

.ki-note-item {
    background: rgba(0, 0, 0, 0.4);
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 0.75rem;
    padding: 1rem 1.25rem;
    margin-bottom: 0.75rem;
}

.ki-note-item__header {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    margin-bottom: 0.75rem;
}

.ki-note-item__meta {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    flex-wrap: wrap;
}

.ki-note-item__author {
    font-size: 0.875rem;
    font-weight: 500;
    color: #e2e8f0;
}

.ki-note-item__date {
    font-size: 0.8125rem;
    color: #64748b;
}

.ki-note-item__edited {
    font-size: 0.75rem;
    color: #64748b;
    font-style: italic;
}

.ki-note-item__actions {
    display: flex;
    gap: 0.5rem;
}

.ki-note-item__content {
    font-size: 0.9375rem;
    color: #cbd5e1;
    line-height: 1.6;
}

/* Responsive Sidebar */
@media (max-width: 1023px) {
    .ki-reports-layout {
        flex-direction: column;
    }

    .ki-sidebar {
        width: 100%;
        position: static;
        max-height: none;
        display: flex;
        flex-wrap: wrap;
        gap: 0.5rem;
        padding: 0;
        margin-bottom: 1.5rem;
    }

    .ki-sidebar__section-title {
        width: 100%;
        margin: 0.5rem 0 0.25rem;
    }

    .ki-sidebar__btn {
        width: auto;
        flex: 0 0 auto;
        margin: 0;
    }
}

/* Treatment Content */
.ki-treatment-content {
    font-size: 0.9375rem;
    color: var(--foreground);
    line-height: 1.7;
}

.ki-treatment-content h1,
.ki-treatment-content h2,
.ki-treatment-content h3 {
    color: var(--foreground);
    margin-top: 1.5rem;
    margin-bottom: 0.75rem;
}

.ki-treatment-content ul,
.ki-treatment-content ol {
    padding-left: 1.5rem;
    margin-bottom: 1rem;
}

.ki-treatment-content li {
    margin-bottom: 0.5rem;
}

/* Tabs */
.ki-tab {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.5rem 1rem;
    font-size: 0.875rem;
    font-weight: 500;
    color: #94a3b8;
    background: transparent;
    border: none;
    border-bottom: 2px solid transparent;
    cursor: pointer;
    transition: all 0.2s ease;
}

.ki-tab:hover {
    color: #e2e8f0;
}

.ki-tab--active {
    color: var(--brand-primary);
    border-bottom-color: var(--brand-primary);
}

/* Details/Accordion */
.ki-details {
    background: rgba(0, 0, 0, 0.3);
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 0.5rem;
    overflow: hidden;
}

.ki-details__summary {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.75rem 1rem;
    font-size: 0.875rem;
    font-weight: 500;
    color: #94a3b8;
    cursor: pointer;
    transition: all 0.2s ease;
    list-style: none;
}

.ki-details__summary::-webkit-details-marker {
    display: none;
}

.ki-details__summary::after {
    content: '';
    margin-left: auto;
    width: 0.5rem;
    height: 0.5rem;
    border-right: 2px solid #64748b;
    border-bottom: 2px solid #64748b;
    transform: rotate(-45deg);
    transition: transform 0.2s ease;
}

.ki-details[open] .ki-details__summary::after {
    transform: rotate(45deg);
}

.ki-details__summary:hover {
    color: #e2e8f0;
    background: rgba(255, 255, 255, 0.02);
}

.ki-details__summary svg {
    width: 1rem;
    height: 1rem;
    color: var(--brand-primary);
}

.ki-details__content {
    padding: 0 1rem 1rem;
    border-top: 1px solid rgba(255, 255, 255, 0.05);
}

.ki-details__item {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 0.5rem 0;
    border-bottom: 1px solid rgba(255, 255, 255, 0.05);
}

.ki-details__item:last-child {
    border-bottom: none;
}

.ki-details__label {
    font-size: 0.8125rem;
    color: #64748b;
}

.ki-details__value {
    font-size: 0.8125rem;
    color: #e2e8f0;
}

/* 4-column grid */
.ki-grid--4 {
    grid-template-columns: repeat(2, 1fr);
}

@media (min-width: 768px) {
    .ki-grid--4 {
        grid-template-columns: repeat(3, 1fr);
    }
}

@media (min-width: 1024px) {
    .ki-grid--4 {
        grid-template-columns: repeat(4, 1fr);
    }
}

/* Additional progress bar variants */
.ki-progress__fill--danger {
    background: linear-gradient(90deg, #ef4444, #dc2626);
}

.ki-progress__fill--success {
    background: linear-gradient(90deg, #10b981, #059669);
}

/* ============================================
   CDSS (Clinical Decision Support) Styles
   ============================================ */

.ki-card--cdss {
    background: linear-gradient(135deg, rgba(139, 92, 246, 0.08) 0%, rgba(0, 0, 0, 0.4) 100%);
    border: 1px solid rgba(139, 92, 246, 0.25);
    border-radius: var(--radius-lg);
    padding: 1.5rem;
    margin-bottom: 1.5rem;
}

.ki-card__header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 1rem;
    padding-bottom: 1rem;
    border-bottom: 1px solid rgba(255, 255, 255, 0.1);
}

.ki-card__header-content {
    display: flex;
    align-items: center;
    gap: 0.75rem;
}

.ki-card__icon {
    width: 1.5rem;
    height: 1.5rem;
    color: var(--brand-primary);
}

.ki-card__title {
    font-size: 1.125rem;
    font-weight: 600;
    color: var(--foreground);
    margin: 0;
}

.ki-badge--ai {
    background: linear-gradient(135deg, rgba(139, 92, 246, 0.3), rgba(168, 85, 247, 0.3));
    color: #c4b5fd;
    font-size: 0.6875rem;
    font-weight: 600;
    letter-spacing: 0.05em;
    padding: 0.25rem 0.625rem;
    border-radius: 9999px;
    border: 1px solid rgba(139, 92, 246, 0.4);
}

.ki-cdss-overview {
    background: rgba(0, 0, 0, 0.3);
    border: 1px solid rgba(255, 255, 255, 0.08);
    border-radius: var(--radius);
    padding: 1rem 1.25rem;
    margin-bottom: 1.5rem;
}

.ki-cdss-overview p {
    font-size: 0.9375rem;
    line-height: 1.7;
    color: var(--foreground);
    margin: 0;
}

.ki-cdss-section-title {
    font-size: 0.875rem;
    font-weight: 600;
    color: var(--brand-accent);
    text-transform: uppercase;
    letter-spacing: 0.05em;
    margin: 0 0 1rem 0;
}

.ki-cdss-list {
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
    margin-bottom: 1.5rem;
}

.ki-cdss-item {
    display: flex;
    gap: 1rem;
    padding: 1rem;
    background: rgba(0, 0, 0, 0.25);
    border: 1px solid rgba(255, 255, 255, 0.06);
    border-radius: var(--radius);
    transition: all 0.2s ease;
}

.ki-cdss-item:hover {
    border-color: rgba(139, 92, 246, 0.3);
    background: rgba(139, 92, 246, 0.05);
}

.ki-cdss-item__marker {
    flex-shrink: 0;
    width: 1.75rem;
    height: 1.75rem;
    display: flex;
    align-items: center;
    justify-content: center;
    background: linear-gradient(135deg, var(--brand-primary), #a855f7);
    color: white;
    font-size: 0.8125rem;
    font-weight: 700;
    border-radius: 0.375rem;
}

.ki-cdss-item__content {
    font-size: 0.9375rem;
    line-height: 1.6;
    color: var(--foreground);
}

/* CDSS Action Cards Grid */
.ki-cdss-actions-grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: 1rem;
}

@media (min-width: 768px) {
    .ki-cdss-actions-grid {
        grid-template-columns: repeat(2, 1fr);
    }
}

.ki-cdss-action-card {
    background: rgba(0, 0, 0, 0.3);
    border: 1px solid rgba(255, 255, 255, 0.08);
    border-radius: var(--radius);
    padding: 1.25rem;
    transition: all 0.2s ease;
}

.ki-cdss-action-card:hover {
    border-color: rgba(139, 92, 246, 0.3);
    transform: translateY(-2px);
}

.ki-cdss-action-card--high {
    border-left: 3px solid var(--destructive);
}

.ki-cdss-action-card--moderate {
    border-left: 3px solid var(--warning);
}

.ki-cdss-action-card--low {
    border-left: 3px solid var(--success);
}

.ki-cdss-action-card__header {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    margin-bottom: 0.5rem;
}

.ki-cdss-action-card__id {
    font-size: 0.6875rem;
    font-weight: 700;
    color: var(--foreground-muted);
    background: rgba(255, 255, 255, 0.08);
    padding: 0.125rem 0.5rem;
    border-radius: 0.25rem;
}

.ki-cdss-action-card__priority {
    font-size: 0.6875rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    padding: 0.125rem 0.5rem;
    border-radius: 0.25rem;
}

.ki-priority--high {
    background: rgba(239, 68, 68, 0.2);
    color: #fca5a5;
}

.ki-priority--moderate {
    background: rgba(245, 158, 11, 0.2);
    color: #fcd34d;
}

.ki-priority--low {
    background: rgba(16, 185, 129, 0.2);
    color: #6ee7b7;
}

.ki-cdss-action-card__title {
    font-size: 0.9375rem;
    font-weight: 600;
    color: var(--foreground);
    margin: 0 0 0.5rem 0;
}

.ki-cdss-action-card__summary {
    font-size: 0.8125rem;
    line-height: 1.6;
    color: var(--foreground-muted);
    margin: 0 0 1rem 0;
}

.ki-cdss-action-card__actions {
    border-top: 1px solid rgba(255, 255, 255, 0.06);
    padding-top: 0.75rem;
    margin-top: 0.75rem;
}

.ki-cdss-action-card__actions h6 {
    font-size: 0.75rem;
    font-weight: 600;
    color: var(--foreground-muted);
    text-transform: uppercase;
    letter-spacing: 0.05em;
    margin: 0 0 0.5rem 0;
}

.ki-cdss-action-card__actions ul {
    margin: 0;
    padding-left: 1rem;
}

.ki-cdss-action-card__actions li {
    font-size: 0.8125rem;
    color: var(--foreground);
    line-height: 1.5;
    margin-bottom: 0.25rem;
}

.ki-cdss-more {
    color: var(--brand-primary) !important;
    font-style: italic;
}

/* ============================================
   Treatment Plan Card Styles
   ============================================ */

.ki-card--treatment {
    background: rgba(0, 0, 0, 0.4);
    border: 1px solid rgba(16, 185, 129, 0.25);
    border-radius: var(--radius-lg);
    padding: 1.5rem;
    margin-bottom: 1.5rem;
}

.ki-card__meta {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    font-size: 0.8125rem;
    color: var(--foreground-muted);
    margin-bottom: 1rem;
}

.ki-meta-icon {
    width: 1rem;
    height: 1rem;
}

.ki-treatment-content {
    background: rgba(0, 0, 0, 0.25);
    border: 1px solid rgba(255, 255, 255, 0.06);
    border-radius: var(--radius);
    padding: 1.25rem;
    font-size: 0.9375rem;
    line-height: 1.8;
    color: var(--foreground);
    white-space: pre-wrap;
    font-family: inherit;
}

/* Form Card Styles */
.ki-card--form {
    background: rgba(0, 0, 0, 0.4);
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: var(--radius-lg);
    padding: 1.5rem;
    margin-bottom: 1.5rem;
}

.ki-form-field {
    margin-bottom: 1rem;
}

.ki-form-field__label {
    display: block;
    font-size: 0.875rem;
    font-weight: 500;
    color: var(--foreground);
    margin-bottom: 0.5rem;
}

.ki-textarea {
    width: 100%;
    background: rgba(0, 0, 0, 0.4);
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: var(--radius);
    padding: 0.875rem 1rem;
    font-size: 0.9375rem;
    color: var(--foreground);
    resize: vertical;
    min-height: 120px;
    font-family: inherit;
    line-height: 1.6;
    transition: all 0.2s ease;
}

.ki-textarea:focus {
    outline: none;
    border-color: rgba(139, 92, 246, 0.5);
    box-shadow: 0 0 0 3px rgba(139, 92, 246, 0.1);
}

.ki-textarea::placeholder {
    color: var(--foreground-muted);
}

.ki-textarea--single {
    min-height: 2.75rem;
    resize: none;
}

.ki-form-field__help {
    font-size: 0.8125rem;
    color: var(--foreground-muted);
    margin-top: 0.5rem;
    line-height: 1.5;
}

.ki-form-field__actions {
    display: flex;
    justify-content: flex-end;
    gap: 0.75rem;
    margin-top: 1rem;
}

.ki-btn__icon {
    width: 1.125rem;
    height: 1.125rem;
    margin-right: 0.5rem;
}

/* Empty State Enhancement */
.ki-empty-state {
    text-align: center;
    padding: 3rem 2rem;
    background: rgba(0, 0, 0, 0.25);
    border: 1px dashed rgba(255, 255, 255, 0.1);
    border-radius: var(--radius-lg);
}

.ki-empty-state--sm {
    padding: 2rem 1.5rem;
}

.ki-empty-state__icon {
    width: 3rem;
    height: 3rem;
    color: #475569;
    margin: 0 auto 1rem;
}

.ki-empty-state p {
    color: var(--foreground-muted);
    font-size: 0.9375rem;
    margin: 0 0 1rem 0;
    line-height: 1.6;
}

/* ============================================
   LABS V2 - Enhanced Visual Design
   ============================================ */

.module-labs-v2 {
    padding: 1.5rem;
}

/* Labs Hero V2 */
.labs-hero-v2 {
    display: flex;
    align-items: center;
    gap: 1.25rem;
    padding: 1.5rem;
    background: linear-gradient(135deg, rgba(34, 211, 238, 0.1), rgba(139, 92, 246, 0.05));
    border: 1px solid rgba(34, 211, 238, 0.2);
    border-radius: var(--radius-lg);
    margin-bottom: 1.5rem;
}

.labs-hero-v2__icon {
    width: 3.5rem;
    height: 3.5rem;
    background: linear-gradient(135deg, rgba(34, 211, 238, 0.2), rgba(34, 211, 238, 0.1));
    border-radius: var(--radius);
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}

.labs-hero-v2__icon svg {
    width: 1.75rem;
    height: 1.75rem;
    stroke: #22d3ee;
}

.labs-hero-v2__content {
    flex: 1;
}

.labs-hero-v2__title {
    font-size: 1.375rem;
    font-weight: 600;
    color: #f8fafc;
    margin: 0 0 0.25rem 0;
}

.labs-hero-v2__meta {
    display: flex;
    gap: 1rem;
    flex-wrap: wrap;
}

.labs-hero-v2__date,
.labs-hero-v2__fasting {
    display: flex;
    align-items: center;
    gap: 0.375rem;
    font-size: 0.875rem;
    color: #94a3b8;
}

.labs-hero-v2__date svg,
.labs-hero-v2__fasting svg {
    width: 1rem;
    height: 1rem;
}

.labs-hero-v2__badge {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.5rem 1rem;
    border-radius: var(--radius);
    font-size: 0.875rem;
    font-weight: 500;
    flex-shrink: 0;
}

.labs-hero-v2__badge svg {
    width: 1.125rem;
    height: 1.125rem;
}

.labs-hero-v2__badge--within_reference_limits {
    background: rgba(16, 185, 129, 0.15);
    color: #10b981;
    border: 1px solid rgba(16, 185, 129, 0.3);
}

/* Key Findings */
.labs-findings {
    background: rgba(245, 158, 11, 0.1);
    border: 1px solid rgba(245, 158, 11, 0.3);
    border-radius: var(--radius);
    padding: 1rem 1.25rem;
    margin-bottom: 1.5rem;
}

.labs-findings__header {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    font-weight: 600;
    color: #f59e0b;
    margin-bottom: 0.75rem;
}

.labs-findings__header svg {
    width: 1.125rem;
    height: 1.125rem;
}

.labs-findings__list {
    list-style: none;
    padding: 0;
    margin: 0;
}

.labs-findings__item {
    position: relative;
    padding-left: 1.25rem;
    color: #e2e8f0;
    font-size: 0.9375rem;
    line-height: 1.6;
}

.labs-findings__item::before {
    content: '';
    position: absolute;
    left: 0;
    top: 0.6em;
    width: 6px;
    height: 6px;
    background: #f59e0b;
    border-radius: 50%;
}

.labs-findings__item + .labs-findings__item {
    margin-top: 0.5rem;
}

/* Quick Stats */
.labs-quick-stats {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 1rem;
    margin-bottom: 2rem;
}

.labs-quick-stat {
    background: rgba(255, 255, 255, 0.03);
    border: 1px solid rgba(255, 255, 255, 0.08);
    border-radius: var(--radius);
    padding: 1.25rem;
    text-align: center;
}

.labs-quick-stat svg {
    width: 1.5rem;
    height: 1.5rem;
    margin-bottom: 0.5rem;
}

.labs-quick-stat--success {
    background: rgba(16, 185, 129, 0.1);
    border-color: rgba(16, 185, 129, 0.2);
}

.labs-quick-stat--success svg {
    stroke: #10b981;
}

.labs-quick-stat__value {
    display: block;
    font-size: 1.5rem;
    font-weight: 700;
    color: #f8fafc;
}

.labs-quick-stat--success .labs-quick-stat__value {
    color: #10b981;
    font-size: 1.125rem;
}

.labs-quick-stat__label {
    display: block;
    font-size: 0.8125rem;
    color: #64748b;
    margin-top: 0.25rem;
}

/* Labs Section V2 */
.labs-section-v2 {
    background: rgba(255, 255, 255, 0.02);
    border: 1px solid rgba(255, 255, 255, 0.06);
    border-radius: var(--radius-lg);
    padding: 1.5rem;
    margin-bottom: 1.5rem;
}

.labs-section-v2--clinical {
    border-color: rgba(139, 92, 246, 0.15);
}

.labs-section-v2__header {
    display: flex;
    align-items: center;
    gap: 1rem;
    margin-bottom: 1.25rem;
    padding-bottom: 1rem;
    border-bottom: 1px solid rgba(255, 255, 255, 0.06);
}

.labs-section-v2__icon {
    width: 2.5rem;
    height: 2.5rem;
    border-radius: var(--radius);
    display: flex;
    align-items: center;
    justify-content: center;
    background: rgba(139, 92, 246, 0.15);
    flex-shrink: 0;
}

.labs-section-v2__icon svg {
    width: 1.25rem;
    height: 1.25rem;
    stroke: #a78bfa;
}

.labs-section-v2__icon--vitals {
    background: rgba(236, 72, 153, 0.15);
}

.labs-section-v2__icon--vitals svg {
    stroke: #ec4899;
}

.labs-section-v2__icon--cmp {
    background: rgba(34, 211, 238, 0.15);
}

.labs-section-v2__icon--cmp svg {
    stroke: #22d3ee;
}

.labs-section-v2__icon--cbc {
    background: rgba(239, 68, 68, 0.15);
}

.labs-section-v2__icon--cbc svg {
    stroke: #ef4444;
}

.labs-section-v2__title-group {
    flex: 1;
}

.labs-section-v2__title {
    font-size: 1.125rem;
    font-weight: 600;
    color: #f8fafc;
    margin: 0;
}

.labs-section-v2__subtitle {
    font-size: 0.8125rem;
    color: #64748b;
    margin: 0.25rem 0 0 0;
}

.labs-section-v2__badge {
    font-size: 0.75rem;
    font-weight: 500;
    color: #a78bfa;
    background: rgba(139, 92, 246, 0.15);
    padding: 0.25rem 0.75rem;
    border-radius: 999px;
}

/* Panel Summary Card */
.labs-panel-summary {
    display: flex;
    align-items: flex-start;
    gap: 1rem;
    padding: 1.25rem;
    background: rgba(255, 255, 255, 0.03);
    border-radius: var(--radius);
    margin-bottom: 1.25rem;
    border-left: 3px solid #64748b;
}

.labs-panel-summary--normal {
    border-left-color: #10b981;
    background: rgba(16, 185, 129, 0.05);
}

.labs-panel-summary--attention {
    border-left-color: #f59e0b;
    background: rgba(245, 158, 11, 0.05);
}

.labs-panel-summary--concern {
    border-left-color: #ef4444;
    background: rgba(239, 68, 68, 0.05);
}

.labs-panel-summary__icon {
    width: 2.25rem;
    height: 2.25rem;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    background: rgba(255, 255, 255, 0.05);
    flex-shrink: 0;
}

.labs-panel-summary__icon svg {
    width: 1.125rem;
    height: 1.125rem;
    stroke: #94a3b8;
}

.labs-panel-summary--normal .labs-panel-summary__icon {
    background: rgba(16, 185, 129, 0.15);
}

.labs-panel-summary--normal .labs-panel-summary__icon svg {
    stroke: #10b981;
}

.labs-panel-summary--attention .labs-panel-summary__icon {
    background: rgba(245, 158, 11, 0.15);
}

.labs-panel-summary--attention .labs-panel-summary__icon svg {
    stroke: #f59e0b;
}

.labs-panel-summary__content {
    flex: 1;
}

.labs-panel-summary__title {
    font-size: 1rem;
    font-weight: 600;
    color: #f8fafc;
    margin: 0 0 0.375rem 0;
}

.labs-panel-summary__text {
    font-size: 0.875rem;
    color: #94a3b8;
    margin: 0;
    line-height: 1.5;
}

.labs-panel-summary__details {
    list-style: none;
    padding: 0;
    margin: 0.75rem 0 0 0;
}

.labs-panel-summary__details li {
    font-size: 0.8125rem;
    color: #cbd5e1;
    padding-left: 1rem;
    position: relative;
}

.labs-panel-summary__details li::before {
    content: '•';
    position: absolute;
    left: 0;
    color: #64748b;
}

.labs-panel-summary__details li + li {
    margin-top: 0.25rem;
}

.labs-panel-summary__status {
    flex-shrink: 0;
}

.labs-panel-summary__status svg {
    width: 1.5rem;
    height: 1.5rem;
    stroke: #64748b;
}

.labs-panel-summary--normal .labs-panel-summary__status svg {
    stroke: #10b981;
}

.labs-panel-summary--attention .labs-panel-summary__status svg {
    stroke: #f59e0b;
}

/* Vitals Grid */
.labs-vitals-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
    gap: 1rem;
}

.vitals-card {
    background: rgba(255, 255, 255, 0.03);
    border: 1px solid rgba(255, 255, 255, 0.06);
    border-radius: var(--radius);
    padding: 1rem;
    text-align: center;
}

.vitals-card__label {
    display: block;
    font-size: 0.75rem;
    color: #64748b;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    margin-bottom: 0.5rem;
}

.vitals-card__value-group {
    display: flex;
    align-items: baseline;
    justify-content: center;
    gap: 0.25rem;
    flex-wrap: wrap;
}

.vitals-card__value {
    font-size: 1.5rem;
    font-weight: 700;
    color: #f8fafc;
}

.vitals-card__value--bp {
    display: flex;
    align-items: baseline;
    gap: 0.125rem;
}

.vitals-card__bp-sys {
    font-size: 1.5rem;
    font-weight: 700;
    color: #f8fafc;
}

.vitals-card__bp-sep {
    color: #64748b;
}

.vitals-card__bp-dia {
    font-size: 1.25rem;
    font-weight: 600;
    color: #cbd5e1;
}

.vitals-card__unit {
    font-size: 0.8125rem;
    color: #64748b;
}

.vitals-card__flag {
    font-size: 0.6875rem;
    padding: 0.125rem 0.5rem;
    border-radius: 999px;
    margin-left: 0.25rem;
}

.vitals-card__flag--upper-normal {
    background: rgba(245, 158, 11, 0.15);
    color: #f59e0b;
}

.vitals-card__ref {
    display: block;
    font-size: 0.75rem;
    color: #475569;
    margin-top: 0.5rem;
}

/* Labs Cards Grid */
.labs-cards-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
    gap: 1rem;
}

.labs-cards-grid--compact {
    grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
}

/* Lab Card - New Design with Range Bar */
.lab-card {
    background: rgba(255, 255, 255, 0.02);
    border: 1px solid rgba(255, 255, 255, 0.06);
    border-radius: var(--radius);
    padding: 1.25rem;
    transition: all 0.2s ease;
    position: relative;
}

.lab-card:hover {
    border-color: rgba(139, 92, 246, 0.3);
    background: rgba(255, 255, 255, 0.04);
}

.lab-card[data-tooltip]:hover::after {
    content: attr(data-tooltip);
    position: absolute;
    bottom: 100%;
    left: 50%;
    transform: translateX(-50%);
    background: #1e293b;
    color: #f8fafc;
    font-size: 0.8125rem;
    padding: 0.75rem 1rem;
    border-radius: var(--radius);
    width: max-content;
    max-width: 280px;
    z-index: 100;
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.3);
    margin-bottom: 0.5rem;
    line-height: 1.5;
    border: 1px solid rgba(255, 255, 255, 0.1);
}

.lab-card--high,
.lab-card--critical-high {
    border-left: 3px solid #ef4444;
}

.lab-card--low,
.lab-card--critical-low {
    border-left: 3px solid #3b82f6;
}

.lab-card--upper-normal {
    border-left: 3px solid #f59e0b;
}

.lab-card__header {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    gap: 0.5rem;
    margin-bottom: 0.75rem;
}

.lab-card__name {
    font-size: 0.875rem;
    color: #94a3b8;
    font-weight: 500;
}

.lab-card__flag {
    display: inline-flex;
    align-items: center;
    gap: 0.25rem;
    font-size: 0.6875rem;
    font-weight: 600;
    padding: 0.125rem 0.5rem;
    border-radius: 999px;
    text-transform: uppercase;
    letter-spacing: 0.025em;
}

.lab-card__flag-icon {
    width: 0.75rem;
    height: 0.75rem;
}

.lab-card__flag--high,
.lab-card__flag--critical-high {
    background: rgba(239, 68, 68, 0.15);
    color: #ef4444;
}

.lab-card__flag--low,
.lab-card__flag--critical-low {
    background: rgba(59, 130, 246, 0.15);
    color: #3b82f6;
}

.lab-card__flag--upper-normal {
    background: rgba(245, 158, 11, 0.15);
    color: #f59e0b;
}

.lab-card__value-row {
    display: flex;
    align-items: baseline;
    gap: 0.375rem;
    margin-bottom: 1rem;
}

.lab-card__value {
    font-size: 1.75rem;
    font-weight: 700;
    color: #f8fafc;
}

.lab-card__unit {
    font-size: 0.875rem;
    color: #64748b;
}

/* Reference Range Bar */
.lab-card__range {
    margin-bottom: 0.75rem;
}

.lab-range-bar {
    position: relative;
    height: 8px;
    margin-bottom: 0.5rem;
}

.lab-range-bar__track {
    display: flex;
    height: 100%;
    border-radius: 4px;
    overflow: hidden;
}

.lab-range-bar__zone {
    height: 100%;
}

.lab-range-bar__zone--low {
    flex: 1;
    background: linear-gradient(90deg, rgba(59, 130, 246, 0.4), rgba(59, 130, 246, 0.15));
}

.lab-range-bar__zone--normal {
    flex: 2;
    background: rgba(16, 185, 129, 0.3);
}

.lab-range-bar__zone--high {
    flex: 1;
    background: linear-gradient(90deg, rgba(239, 68, 68, 0.15), rgba(239, 68, 68, 0.4));
}

.lab-range-bar__marker {
    position: absolute;
    top: 50%;
    transform: translate(-50%, -50%);
    z-index: 2;
}

.lab-range-bar__dot {
    width: 14px;
    height: 14px;
    border-radius: 50%;
    background: #f8fafc;
    border: 3px solid #10b981;
    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.3);
}

.lab-range-bar__marker--high .lab-range-bar__dot,
.lab-range-bar__marker--critical-high .lab-range-bar__dot {
    border-color: #ef4444;
}

.lab-range-bar__marker--low .lab-range-bar__dot,
.lab-range-bar__marker--critical-low .lab-range-bar__dot {
    border-color: #3b82f6;
}

.lab-range-bar__marker--upper-normal .lab-range-bar__dot {
    border-color: #f59e0b;
}

.lab-range-bar__labels {
    display: flex;
    justify-content: space-between;
}

.lab-range-bar__label {
    font-size: 0.625rem;
    color: #475569;
    text-transform: uppercase;
    letter-spacing: 0.05em;
}

.lab-card__ref {
    display: block;
    font-size: 0.75rem;
    color: #475569;
}

.lab-card__calc {
    display: block;
    font-size: 0.6875rem;
    color: #64748b;
    font-style: italic;
    margin-top: 0.375rem;
}

.lab-card__interp {
    display: block;
    font-size: 0.8125rem;
    color: #94a3b8;
    margin-top: 0.5rem;
    padding-top: 0.5rem;
    border-top: 1px solid rgba(255, 255, 255, 0.06);
}

/* Labs Interpretation Box */
.labs-interpretation {
    background: rgba(139, 92, 246, 0.05);
    border: 1px solid rgba(139, 92, 246, 0.15);
    border-radius: var(--radius);
    padding: 1rem 1.25rem;
    margin-top: 1.25rem;
}

.labs-interpretation__header {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    font-weight: 600;
    color: #a78bfa;
    font-size: 0.875rem;
    margin-bottom: 0.5rem;
}

.labs-interpretation__header svg {
    width: 1rem;
    height: 1rem;
}

.labs-interpretation__text {
    font-size: 0.9375rem;
    color: #cbd5e1;
    line-height: 1.6;
    margin: 0;
}

/* Labs Differential */
.labs-differential {
    margin-top: 1.5rem;
    padding-top: 1.5rem;
    border-top: 1px solid rgba(255, 255, 255, 0.06);
}

.labs-differential__title {
    font-size: 1rem;
    font-weight: 600;
    color: #f8fafc;
    margin: 0 0 1.25rem 0;
}

.labs-differential__grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 1.5rem;
}

@media (max-width: 768px) {
    .labs-differential__grid {
        grid-template-columns: 1fr;
    }
}

.labs-differential__subtitle {
    font-size: 0.8125rem;
    font-weight: 500;
    color: #94a3b8;
    margin: 0 0 0.75rem 0;
}

/* Differential Chart */
.diff-chart__bar {
    display: flex;
    height: 24px;
    border-radius: var(--radius);
    overflow: hidden;
    margin-bottom: 0.75rem;
}

.diff-chart__segment {
    height: 100%;
    transition: opacity 0.2s ease;
}

.diff-chart__segment:hover {
    opacity: 0.8;
}

.diff-chart__segment--neutrophils { background: #8b5cf6; }
.diff-chart__segment--lymphocytes { background: #3b82f6; }
.diff-chart__segment--monocytes { background: #10b981; }
.diff-chart__segment--eosinophils { background: #f59e0b; }
.diff-chart__segment--basophils { background: #ec4899; }

.diff-chart__legend {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem 1rem;
}

.diff-chart__legend-item {
    display: flex;
    align-items: center;
    gap: 0.375rem;
    font-size: 0.75rem;
    color: #94a3b8;
}

.diff-chart__legend-item::before {
    content: '';
    width: 8px;
    height: 8px;
    border-radius: 2px;
}

.diff-chart__legend-item--neutrophils::before { background: #8b5cf6; }
.diff-chart__legend-item--lymphocytes::before { background: #3b82f6; }
.diff-chart__legend-item--monocytes::before { background: #10b981; }
.diff-chart__legend-item--eosinophils::before { background: #f59e0b; }
.diff-chart__legend-item--basophils::before { background: #ec4899; }

/* Differential Absolute List */
.diff-abs-list {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
}

.diff-abs-item {
    display: flex;
    align-items: center;
    gap: 0.625rem;
    padding: 0.5rem 0.75rem;
    background: rgba(255, 255, 255, 0.02);
    border-radius: var(--radius-sm);
}

.diff-abs-item__dot {
    width: 8px;
    height: 8px;
    border-radius: 2px;
    flex-shrink: 0;
}

.diff-abs-item__dot--neutrophils { background: #8b5cf6; }
.diff-abs-item__dot--lymphocytes { background: #3b82f6; }
.diff-abs-item__dot--monocytes { background: #10b981; }
.diff-abs-item__dot--eosinophils { background: #f59e0b; }
.diff-abs-item__dot--basophils { background: #ec4899; }

.diff-abs-item__label {
    flex: 1;
    font-size: 0.8125rem;
    color: #94a3b8;
}

.diff-abs-item__value {
    font-size: 0.8125rem;
    font-weight: 600;
    color: #f8fafc;
}

/* Labs Legend */
.labs-legend {
    background: rgba(255, 255, 255, 0.02);
    border: 1px solid rgba(255, 255, 255, 0.06);
    border-radius: var(--radius);
    padding: 1.25rem;
    margin-top: 1rem;
}

.labs-legend__title {
    font-size: 0.9375rem;
    font-weight: 600;
    color: #f8fafc;
    margin: 0 0 1rem 0;
}

.labs-legend__items {
    display: flex;
    flex-wrap: wrap;
    gap: 1rem 2rem;
    margin-bottom: 1rem;
}

.labs-legend__item {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    font-size: 0.8125rem;
    color: #94a3b8;
}

.labs-legend__dot {
    width: 12px;
    height: 12px;
    border-radius: 50%;
    border: 2px solid;
}

.labs-legend__dot--low {
    border-color: #3b82f6;
    background: rgba(59, 130, 246, 0.2);
}

.labs-legend__dot--normal {
    border-color: #10b981;
    background: rgba(16, 185, 129, 0.2);
}

.labs-legend__dot--upper-normal {
    border-color: #f59e0b;
    background: rgba(245, 158, 11, 0.2);
}

.labs-legend__dot--high {
    border-color: #ef4444;
    background: rgba(239, 68, 68, 0.2);
}

.labs-legend__note {
    font-size: 0.8125rem;
    color: #64748b;
    margin: 0;
    padding-top: 1rem;
    border-top: 1px solid rgba(255, 255, 255, 0.06);
    line-height: 1.5;
}

/* Responsive */
@media (max-width: 640px) {
    .labs-hero-v2 {
        flex-direction: column;
        text-align: center;
    }

    .labs-hero-v2__meta {
        justify-content: center;
    }

    .labs-quick-stats {
        grid-template-columns: 1fr;
    }

    .labs-cards-grid {
        grid-template-columns: 1fr;
    }

    .labs-panel-summary {
        flex-direction: column;
        text-align: center;
    }

    .labs-panel-summary__details {
        text-align: left;
    }
}

/* ========================================
   CONVERGENCE ALERTS - Cross-Module Signal Detection
   ======================================== */

.convergence-alerts-container {
    margin-bottom: 2rem;
}

/* Header Section */
.convergence-alerts-header {
    display: flex;
    align-items: center;
    gap: 1rem;
    padding: 1.5rem;
    background: linear-gradient(135deg, rgba(139, 92, 246, 0.15) 0%, rgba(30, 27, 75, 0.3) 100%);
    border: 1px solid rgba(139, 92, 246, 0.3);
    border-radius: var(--radius-lg);
    margin-bottom: 1.5rem;
}

.convergence-alerts-header__icon {
    width: 48px;
    height: 48px;
    border-radius: 50%;
    background: linear-gradient(135deg, var(--brand-primary) 0%, #6366f1 100%);
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    box-shadow: 0 0 20px rgba(139, 92, 246, 0.4);
}

.convergence-alerts-header__icon svg {
    width: 24px;
    height: 24px;
    color: white;
}

.convergence-alerts-header__content {
    flex: 1;
}

.convergence-alerts-header__title {
    font-size: 1.25rem;
    font-weight: 600;
    color: var(--foreground);
    margin: 0 0 0.25rem 0;
}

.convergence-alerts-header__subtitle {
    font-size: 0.875rem;
    color: var(--foreground-muted);
    margin: 0;
}

.convergence-alerts-header__actions {
    margin-left: auto;
    flex-shrink: 0;
}

.convergence-alerts-header__badge {
    display: flex;
    flex-direction: column;
    align-items: center;
    padding: 0.75rem 1rem;
    background: rgba(139, 92, 246, 0.2);
    border-radius: var(--radius);
    border: 1px solid rgba(139, 92, 246, 0.3);
    margin-left: 1rem;
}

.convergence-alerts-header__badge .convergence-count {
    font-size: 1.5rem;
    font-weight: 700;
    color: var(--brand-primary);
    line-height: 1;
}

.convergence-alerts-header__badge .convergence-label {
    font-size: 0.7rem;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    color: var(--foreground-muted);
}

/* Alerts List */
.convergence-alerts-list {
    display: flex;
    flex-direction: column;
    gap: 1rem;
}

/* Individual Alert Card */
.convergence-alert {
    background: var(--card-bg);
    border: 1px solid var(--card-border);
    border-radius: var(--radius-lg);
    overflow: hidden;
    transition: all 0.3s ease;
}

.convergence-alert:hover {
    border-color: var(--card-hover-border);
}

/* Alert Severity Variants */
.convergence-alert--critical {
    border-left: 4px solid var(--destructive);
    background: linear-gradient(90deg, rgba(239, 68, 68, 0.1) 0%, var(--card-bg) 20%);
}

.convergence-alert--high {
    border-left: 4px solid var(--warning);
    background: linear-gradient(90deg, rgba(245, 158, 11, 0.08) 0%, var(--card-bg) 20%);
}

.convergence-alert--moderate {
    border-left: 4px solid var(--info);
    background: linear-gradient(90deg, rgba(59, 130, 246, 0.08) 0%, var(--card-bg) 20%);
}

.convergence-alert--low {
    border-left: 4px solid var(--success);
    background: linear-gradient(90deg, rgba(16, 185, 129, 0.08) 0%, var(--card-bg) 20%);
}

/* Alert Header */
.convergence-alert__header {
    display: flex;
    align-items: center;
    gap: 1rem;
    padding: 1rem 1.25rem;
    cursor: pointer;
}

.convergence-alert__icon {
    width: 40px;
    height: 40px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}

.convergence-alert--critical .convergence-alert__icon {
    background: rgba(239, 68, 68, 0.15);
    color: var(--destructive);
}

.convergence-alert--high .convergence-alert__icon {
    background: rgba(245, 158, 11, 0.15);
    color: var(--warning);
}

.convergence-alert--moderate .convergence-alert__icon {
    background: rgba(59, 130, 246, 0.15);
    color: var(--info);
}

.convergence-alert--low .convergence-alert__icon {
    background: rgba(16, 185, 129, 0.15);
    color: var(--success);
}

.convergence-alert__icon svg {
    width: 20px;
    height: 20px;
}

.convergence-alert__title-area {
    flex: 1;
    display: flex;
    flex-direction: column;
    gap: 0.25rem;
}

.convergence-alert__title {
    font-size: 1rem;
    font-weight: 600;
    color: var(--foreground);
    margin: 0;
}

.convergence-alert__badge {
    display: inline-flex;
    align-items: center;
    padding: 0.2rem 0.5rem;
    background: rgba(139, 92, 246, 0.15);
    border: 1px solid rgba(139, 92, 246, 0.3);
    border-radius: 9999px;
    font-size: 0.7rem;
    font-weight: 500;
    color: var(--brand-accent);
    width: fit-content;
}

.convergence-alert__toggle {
    width: 32px;
    height: 32px;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.05);
    border: 1px solid rgba(255, 255, 255, 0.1);
    color: var(--foreground-muted);
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: all 0.2s ease;
}

.convergence-alert__toggle:hover {
    background: rgba(255, 255, 255, 0.1);
    color: var(--foreground);
}

.convergence-alert__toggle svg {
    width: 16px;
    height: 16px;
    transition: transform 0.3s ease;
}

.convergence-alert.expanded .convergence-alert__toggle svg {
    transform: rotate(180deg);
}

/* Alert Summary */
.convergence-alert__summary {
    padding: 0 1.25rem 1rem 4.5rem;
}

.convergence-alert__summary p {
    margin: 0;
    font-size: 0.875rem;
    color: var(--foreground-muted);
    line-height: 1.6;
}

/* Alert Details (expandable) */
.convergence-alert__details {
    display: none;
    padding: 0 1.25rem;
    border-top: 1px solid rgba(255, 255, 255, 0.05);
    background: rgba(0, 0, 0, 0.2);
}

.convergence-alert.expanded .convergence-alert__details {
    display: block;
    padding: 1.25rem;
}

/* Signals Section */
.convergence-alert__signals {
    margin-bottom: 1.5rem;
}

.signals-header {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    font-size: 0.85rem;
    font-weight: 600;
    color: var(--foreground);
    margin: 0 0 1rem 0;
    text-transform: uppercase;
    letter-spacing: 0.05em;
}

.signals-header svg {
    width: 16px;
    height: 16px;
    color: var(--brand-primary);
}

.signals-list {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
}

.signal-item {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0.75rem 1rem;
    background: rgba(255, 255, 255, 0.03);
    border-radius: var(--radius-sm);
    border: 1px solid rgba(255, 255, 255, 0.05);
}

.signal-item__module {
    display: flex;
    align-items: center;
    gap: 0.5rem;
}

.signal-item__module-icon {
    width: 24px;
    height: 24px;
    border-radius: 4px;
    display: flex;
    align-items: center;
    justify-content: center;
}

.signal-item--prs .signal-item__module-icon {
    background: rgba(139, 92, 246, 0.2);
    color: var(--brand-primary);
}

.signal-item--proteomic .signal-item__module-icon {
    background: rgba(16, 185, 129, 0.2);
    color: var(--success);
}

.signal-item--labs .signal-item__module-icon {
    background: rgba(59, 130, 246, 0.2);
    color: var(--info);
}

.signal-item--microbiome .signal-item__module-icon {
    background: rgba(245, 158, 11, 0.2);
    color: var(--warning);
}

.signal-item--methylation .signal-item__module-icon {
    background: rgba(236, 72, 153, 0.2);
    color: #ec4899;
}

.signal-item__module-icon svg {
    width: 14px;
    height: 14px;
}

.signal-item__module-name {
    font-size: 0.75rem;
    font-weight: 500;
    color: var(--foreground-muted);
    text-transform: uppercase;
    letter-spacing: 0.03em;
}

.signal-item__content {
    display: flex;
    align-items: center;
    gap: 0.75rem;
}

.signal-item__marker {
    font-size: 0.875rem;
    color: var(--foreground);
    font-weight: 500;
}

.signal-item__value {
    font-size: 0.875rem;
    color: var(--foreground-muted);
    font-family: var(--font-mono, 'SF Mono', 'Fira Code', monospace);
}

.signal-item__indicator {
    width: 20px;
    height: 20px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
}

.signal-item__indicator svg {
    width: 12px;
    height: 12px;
}

.signal-item__indicator--elevated,
.signal-item__indicator--high {
    background: rgba(239, 68, 68, 0.2);
    color: var(--destructive);
}

.signal-item__indicator--low,
.signal-item__indicator--reduced {
    background: rgba(59, 130, 246, 0.2);
    color: var(--info);
}

.signal-item__indicator--normal {
    background: rgba(148, 163, 184, 0.2);
    color: var(--foreground-muted);
}

/* Clinical Section */
.convergence-alert__clinical {
    padding-top: 1rem;
    border-top: 1px dashed rgba(255, 255, 255, 0.1);
}

.clinical-header {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    font-size: 0.85rem;
    font-weight: 600;
    color: var(--foreground);
    margin: 0 0 0.75rem 0;
    text-transform: uppercase;
    letter-spacing: 0.05em;
}

.clinical-header svg {
    width: 16px;
    height: 16px;
    color: var(--brand-primary);
}

.clinical-text {
    font-size: 0.875rem;
    color: var(--foreground-muted);
    line-height: 1.7;
    margin: 0 0 1rem 0;
}

.clinical-actions {
    background: rgba(139, 92, 246, 0.08);
    border: 1px solid rgba(139, 92, 246, 0.2);
    border-radius: var(--radius-sm);
    padding: 1rem;
}

.clinical-actions h5 {
    font-size: 0.8rem;
    font-weight: 600;
    color: var(--brand-accent);
    margin: 0 0 0.5rem 0;
    text-transform: uppercase;
    letter-spacing: 0.03em;
}

.clinical-actions ul {
    margin: 0;
    padding-left: 1.25rem;
}

.clinical-actions li {
    font-size: 0.85rem;
    color: var(--foreground-muted);
    margin-bottom: 0.25rem;
    line-height: 1.5;
}

.clinical-actions li:last-child {
    margin-bottom: 0;
}

/* Alert Footer */
.convergence-alert__footer {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 1rem 1.25rem;
    background: rgba(0, 0, 0, 0.2);
    border-top: 1px solid rgba(255, 255, 255, 0.05);
}

.convergence-alert__action {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.5rem 1rem;
    background: rgba(139, 92, 246, 0.15);
    border: 1px solid rgba(139, 92, 246, 0.3);
    border-radius: var(--radius-sm);
    color: var(--brand-accent);
    font-size: 0.85rem;
    font-weight: 500;
    cursor: pointer;
    transition: all 0.2s ease;
}

.convergence-alert__action:hover {
    background: rgba(139, 92, 246, 0.25);
    border-color: rgba(139, 92, 246, 0.5);
}

.convergence-alert__action svg {
    width: 16px;
    height: 16px;
}

.convergence-alert__confidence {
    font-size: 0.8rem;
    color: var(--foreground-muted);
}

.convergence-alert__confidence strong {
    color: var(--foreground);
}

/* Explainer Box */
.convergence-alerts-explainer {
    display: flex;
    gap: 1rem;
    padding: 1rem 1.25rem;
    background: rgba(139, 92, 246, 0.05);
    border: 1px solid rgba(139, 92, 246, 0.15);
    border-radius: var(--radius);
    margin-top: 1.5rem;
}

.convergence-alerts-explainer .explainer-icon {
    width: 36px;
    height: 36px;
    border-radius: 50%;
    background: rgba(139, 92, 246, 0.15);
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}

.convergence-alerts-explainer .explainer-icon svg {
    width: 18px;
    height: 18px;
    color: var(--brand-primary);
}

.convergence-alerts-explainer .explainer-content h4 {
    font-size: 0.9rem;
    font-weight: 600;
    color: var(--foreground);
    margin: 0 0 0.25rem 0;
}

.convergence-alerts-explainer .explainer-content p {
    font-size: 0.8rem;
    color: var(--foreground-muted);
    line-height: 1.6;
    margin: 0;
}

/* Empty State */
.convergence-alerts-empty {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 3rem 2rem;
    background: var(--card-bg);
    border: 1px dashed rgba(255, 255, 255, 0.1);
    border-radius: var(--radius-lg);
    text-align: center;
}

.convergence-alerts-empty .empty-icon {
    width: 64px;
    height: 64px;
    border-radius: 50%;
    background: rgba(16, 185, 129, 0.1);
    display: flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 1rem;
}

.convergence-alerts-empty .empty-icon svg {
    width: 32px;
    height: 32px;
    color: var(--success);
}

.convergence-alerts-empty h3 {
    font-size: 1.1rem;
    font-weight: 600;
    color: var(--foreground);
    margin: 0 0 0.5rem 0;
}

.convergence-alerts-empty p {
    font-size: 0.875rem;
    color: var(--foreground-muted);
    margin: 0;
    max-width: 400px;
}

/* Responsive adjustments */
@media (max-width: 768px) {
    .convergence-alerts-header {
        flex-direction: column;
        text-align: center;
    }

    .convergence-alerts-header__badge {
        flex-direction: row;
        gap: 0.5rem;
    }

    .convergence-alert__header {
        flex-wrap: wrap;
    }

    .convergence-alert__summary {
        padding-left: 1.25rem;
    }

    .signal-item {
        flex-direction: column;
        align-items: flex-start;
        gap: 0.5rem;
    }

    .signal-item__content {
        width: 100%;
        justify-content: space-between;
    }

    .convergence-alert__footer {
        flex-direction: column;
        gap: 0.75rem;
    }
}

/* ========================================
   BIOLOGICAL AGE DASHBOARD
   ======================================== */

.bio-age-dashboard {
    margin-bottom: 2rem;
}

/* Dashboard Header */
.bio-age-header {
    display: flex;
    align-items: center;
    gap: 1rem;
    padding: 1.5rem;
    background: linear-gradient(135deg, rgba(139, 92, 246, 0.12) 0%, rgba(6, 182, 212, 0.08) 100%);
    border: 1px solid rgba(139, 92, 246, 0.25);
    border-radius: var(--radius-lg);
    margin-bottom: 1.5rem;
}

.bio-age-header__icon {
    width: 52px;
    height: 52px;
    border-radius: 50%;
    background: linear-gradient(135deg, var(--brand-primary) 0%, #06b6d4 100%);
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    box-shadow: 0 0 25px rgba(139, 92, 246, 0.4);
}

.bio-age-header__icon svg {
    width: 26px;
    height: 26px;
    color: white;
}

.bio-age-header__title {
    font-size: 1.35rem;
    font-weight: 600;
    color: var(--foreground);
    margin: 0 0 0.25rem 0;
}

.bio-age-header__subtitle {
    font-size: 0.9rem;
    color: var(--foreground-muted);
    margin: 0;
}

/* Summary Cards Grid */
.bio-age-summary {
    margin-bottom: 2rem;
}

.bio-age-summary__grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 1rem;
}

.summary-card {
    background: var(--card-bg);
    border: 1px solid var(--card-border);
    border-radius: var(--radius-lg);
    padding: 1.25rem;
    text-align: center;
    position: relative;
    overflow: hidden;
}

.summary-card--epigenetics {
    border-top: 3px solid #8b5cf6;
}

.summary-card--proteomics {
    border-top: 3px solid #06b6d4;
}

.summary-card--chrono {
    border-top: 3px solid #64748b;
}

.summary-card__header {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
    margin-bottom: 0.75rem;
}

.summary-card__icon {
    width: 24px;
    height: 24px;
    display: flex;
    align-items: center;
    justify-content: center;
}

.summary-card--epigenetics .summary-card__icon svg {
    color: #8b5cf6;
}

.summary-card--proteomics .summary-card__icon svg {
    color: #06b6d4;
}

.summary-card--chrono .summary-card__icon svg {
    color: #64748b;
}

.summary-card__icon svg {
    width: 20px;
    height: 20px;
}

.summary-card__label {
    font-size: 0.8rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    color: var(--foreground-muted);
}

.summary-card__value {
    display: flex;
    align-items: baseline;
    justify-content: center;
    gap: 0.25rem;
    margin-bottom: 0.5rem;
}

.summary-card__value .age-value {
    font-size: 2.5rem;
    font-weight: 700;
    color: var(--foreground);
    line-height: 1;
}

.summary-card__value .age-unit {
    font-size: 1rem;
    color: var(--foreground-muted);
}

.summary-card__delta {
    font-size: 0.85rem;
    font-weight: 500;
    padding: 0.25rem 0.75rem;
    border-radius: 9999px;
    display: inline-block;
}

.summary-card__delta--accelerated {
    background: rgba(239, 68, 68, 0.15);
    color: var(--destructive);
}

.summary-card__delta--decelerated {
    background: rgba(16, 185, 129, 0.15);
    color: var(--success);
}

.summary-card__delta--typical {
    background: rgba(148, 163, 184, 0.15);
    color: var(--foreground-muted);
}

.summary-card__pace {
    margin-top: 0.75rem;
    padding-top: 0.75rem;
    border-top: 1px dashed rgba(255, 255, 255, 0.1);
    font-size: 0.85rem;
}

.summary-card__pace .pace-label {
    color: var(--foreground-muted);
}

.summary-card__pace .pace-value {
    font-weight: 600;
    margin-left: 0.25rem;
}

.summary-card__pace .pace-value--fast {
    color: var(--destructive);
}

.summary-card__pace .pace-value--slow {
    color: var(--success);
}

.summary-card__pace .pace-value--normal {
    color: var(--foreground);
}

.summary-card__highlight {
    margin-top: 0.75rem;
    padding: 0.5rem 0.75rem;
    border-radius: var(--radius-sm);
    font-size: 0.8rem;
}

.summary-card__highlight--warning {
    background: rgba(245, 158, 11, 0.1);
    border: 1px solid rgba(245, 158, 11, 0.2);
    color: var(--warning);
}

.summary-card__note {
    font-size: 0.8rem;
    color: var(--foreground-muted);
    margin-top: 0.5rem;
}

/* Bio Age Section */
.bio-age-section {
    background: var(--card-bg);
    border: 1px solid var(--card-border);
    border-radius: var(--radius-lg);
    padding: 1.5rem;
    margin-bottom: 1.5rem;
}

.bio-age-section__header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 1.25rem;
    padding-bottom: 1rem;
    border-bottom: 1px solid rgba(255, 255, 255, 0.05);
}

.bio-age-section__title {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    font-size: 1.1rem;
    font-weight: 600;
    color: var(--foreground);
    margin: 0;
}

.bio-age-section__title svg {
    width: 20px;
    height: 20px;
    color: var(--brand-primary);
}

.bio-age-section__subtitle {
    font-size: 0.85rem;
    color: var(--foreground-muted);
}

/* Clocks Grid */
.clocks-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(180px, 1fr));
    gap: 1rem;
}

.clock-card {
    background: rgba(255, 255, 255, 0.02);
    border: 1px solid rgba(255, 255, 255, 0.06);
    border-radius: var(--radius);
    padding: 1rem;
    transition: all 0.2s ease;
}

.clock-card:hover {
    border-color: rgba(139, 92, 246, 0.3);
    transform: translateY(-2px);
}

.clock-card--accelerated {
    border-left: 3px solid var(--destructive);
}

.clock-card--decelerated {
    border-left: 3px solid var(--success);
}

.clock-card--typical {
    border-left: 3px solid var(--foreground-muted);
}

.clock-card__header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 0.75rem;
}

.clock-card__name {
    font-size: 0.85rem;
    font-weight: 600;
    color: var(--foreground);
}

.clock-card__gen {
    font-size: 0.65rem;
    padding: 0.15rem 0.4rem;
    background: rgba(139, 92, 246, 0.15);
    border-radius: 4px;
    color: var(--brand-accent);
}

.clock-card__body {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
}

.clock-card__age {
    display: flex;
    align-items: baseline;
    gap: 0.15rem;
}

.clock-age-value {
    font-size: 1.75rem;
    font-weight: 700;
    color: var(--foreground);
    line-height: 1;
}

.clock-age-unit {
    font-size: 0.75rem;
    color: var(--foreground-muted);
}

.clock-card__delta {
    font-size: 0.9rem;
    font-weight: 600;
    padding: 0.2rem 0.5rem;
    border-radius: 4px;
}

.clock-card__delta--accelerated {
    background: rgba(239, 68, 68, 0.15);
    color: var(--destructive);
}

.clock-card__delta--decelerated {
    background: rgba(16, 185, 129, 0.15);
    color: var(--success);
}

.clock-card__delta--typical {
    background: rgba(148, 163, 184, 0.15);
    color: var(--foreground-muted);
}

.clock-card__footer {
    margin-top: 0.75rem;
    padding-top: 0.5rem;
    border-top: 1px dashed rgba(255, 255, 255, 0.05);
}

.clock-card__focus {
    font-size: 0.75rem;
    color: var(--foreground-muted);
    line-height: 1.4;
}

/* Pace Section */
.pace-section {
    margin-top: 1.5rem;
}

.pace-card {
    display: flex;
    align-items: center;
    gap: 1rem;
    padding: 1.25rem;
    background: linear-gradient(90deg, rgba(139, 92, 246, 0.08) 0%, transparent 100%);
    border: 1px solid rgba(139, 92, 246, 0.2);
    border-radius: var(--radius);
}

.pace-card__icon {
    width: 48px;
    height: 48px;
    border-radius: 50%;
    background: rgba(139, 92, 246, 0.15);
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}

.pace-card__icon svg {
    width: 24px;
    height: 24px;
    color: var(--brand-primary);
}

.pace-card__content {
    flex: 1;
}

.pace-card__title {
    font-size: 0.95rem;
    font-weight: 600;
    color: var(--foreground);
    margin: 0 0 0.25rem 0;
}

.pace-card__desc {
    font-size: 0.8rem;
    color: var(--foreground-muted);
    margin: 0;
}

.pace-card__value {
    display: flex;
    align-items: baseline;
    gap: 0.15rem;
    padding: 0.5rem 1rem;
    border-radius: var(--radius);
}

.pace-card__value--fast {
    background: rgba(239, 68, 68, 0.15);
}

.pace-card__value--slow {
    background: rgba(16, 185, 129, 0.15);
}

.pace-card__value--normal {
    background: rgba(148, 163, 184, 0.1);
}

.pace-number {
    font-size: 1.75rem;
    font-weight: 700;
    line-height: 1;
}

.pace-card__value--fast .pace-number {
    color: var(--destructive);
}

.pace-card__value--slow .pace-number {
    color: var(--success);
}

.pace-card__value--normal .pace-number {
    color: var(--foreground);
}

.pace-suffix {
    font-size: 1rem;
    color: var(--foreground-muted);
}

.pace-card__interpretation {
    font-size: 0.8rem;
    color: var(--foreground-muted);
    padding: 0.5rem;
    text-align: center;
    min-width: 120px;
}

/* Organs Grid */
.organs-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
    gap: 0.75rem;
}

.organ-age-card {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    padding: 0.875rem 1rem;
    background: rgba(255, 255, 255, 0.02);
    border: 1px solid rgba(255, 255, 255, 0.06);
    border-radius: var(--radius);
    cursor: pointer;
    transition: all 0.2s ease;
}

.organ-age-card:hover {
    border-color: rgba(139, 92, 246, 0.3);
    background: rgba(255, 255, 255, 0.03);
}

.organ-age-card--accelerated {
    border-left: 3px solid var(--destructive);
}

.organ-age-card--decelerated {
    border-left: 3px solid var(--success);
}

.organ-age-card--typical {
    border-left: 3px solid var(--foreground-muted);
}

.organ-age-card__icon {
    width: 36px;
    height: 36px;
    border-radius: 8px;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}

.organ-age-card--accelerated .organ-age-card__icon {
    background: rgba(239, 68, 68, 0.1);
    color: var(--destructive);
}

.organ-age-card--decelerated .organ-age-card__icon {
    background: rgba(16, 185, 129, 0.1);
    color: var(--success);
}

.organ-age-card--typical .organ-age-card__icon {
    background: rgba(148, 163, 184, 0.1);
    color: var(--foreground-muted);
}

.organ-age-card__icon svg {
    width: 20px;
    height: 20px;
}

.organ-age-card__content {
    flex: 1;
    min-width: 0;
}

.organ-age-card__name {
    font-size: 0.85rem;
    font-weight: 600;
    color: var(--foreground);
    margin: 0 0 0.25rem 0;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.organ-age-card__values {
    display: flex;
    align-items: baseline;
    gap: 0.35rem;
    font-size: 0.8rem;
}

.organ-age-card__bio {
    font-weight: 600;
    color: var(--foreground);
}

.organ-age-card__vs {
    color: var(--foreground-muted);
    font-size: 0.7rem;
}

.organ-age-card__chrono {
    color: var(--foreground-muted);
}

.organ-age-card__delta {
    display: flex;
    flex-direction: column;
    align-items: center;
    padding: 0.35rem 0.6rem;
    border-radius: var(--radius-sm);
    min-width: 50px;
}

.organ-age-card__delta--accelerated {
    background: rgba(239, 68, 68, 0.12);
}

.organ-age-card__delta--decelerated {
    background: rgba(16, 185, 129, 0.12);
}

.organ-age-card__delta--typical {
    background: rgba(148, 163, 184, 0.1);
}

.organ-age-card__delta .delta-value {
    font-size: 0.95rem;
    font-weight: 700;
    line-height: 1;
}

.organ-age-card__delta--accelerated .delta-value {
    color: var(--destructive);
}

.organ-age-card__delta--decelerated .delta-value {
    color: var(--success);
}

.organ-age-card__delta--typical .delta-value {
    color: var(--foreground-muted);
}

.organ-age-card__delta .delta-unit {
    font-size: 0.6rem;
    color: var(--foreground-muted);
    text-transform: uppercase;
}

/* Organs Interpretation */
.organs-interpretation {
    margin-top: 1.25rem;
}

.interpretation-card {
    display: flex;
    gap: 1rem;
    padding: 1rem 1.25rem;
    background: rgba(139, 92, 246, 0.05);
    border: 1px solid rgba(139, 92, 246, 0.15);
    border-radius: var(--radius);
}

.interpretation-card__icon {
    width: 36px;
    height: 36px;
    border-radius: 50%;
    background: rgba(139, 92, 246, 0.15);
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}

.interpretation-card__icon svg {
    width: 18px;
    height: 18px;
    color: var(--brand-primary);
}

.interpretation-card__content h4 {
    font-size: 0.9rem;
    font-weight: 600;
    color: var(--foreground);
    margin: 0 0 0.5rem 0;
}

.interpretation-card__content p {
    font-size: 0.8rem;
    color: var(--foreground-muted);
    line-height: 1.6;
    margin: 0 0 0.5rem 0;
}

.interpretation-card__content p:last-child {
    margin-bottom: 0;
}

.interpretation-highlight {
    padding: 0.5rem 0.75rem;
    border-radius: var(--radius-sm);
    margin-top: 0.5rem;
}

.interpretation-highlight--warning {
    background: rgba(245, 158, 11, 0.1);
    border-left: 3px solid var(--warning);
    color: var(--warning);
}

/* Empty State */
.bio-age-empty {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 3rem 2rem;
    background: var(--card-bg);
    border: 1px dashed rgba(255, 255, 255, 0.1);
    border-radius: var(--radius-lg);
    text-align: center;
}

.bio-age-empty__icon {
    width: 64px;
    height: 64px;
    border-radius: 50%;
    background: rgba(139, 92, 246, 0.1);
    display: flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 1rem;
}

.bio-age-empty__icon svg {
    width: 32px;
    height: 32px;
    color: var(--brand-primary);
}

.bio-age-empty h3 {
    font-size: 1.1rem;
    font-weight: 600;
    color: var(--foreground);
    margin: 0 0 0.5rem 0;
}

.bio-age-empty p {
    font-size: 0.875rem;
    color: var(--foreground-muted);
    margin: 0;
    max-width: 400px;
}

/* Responsive */
@media (max-width: 768px) {
    .bio-age-summary__grid {
        grid-template-columns: 1fr;
    }

    .clocks-grid {
        grid-template-columns: repeat(2, 1fr);
    }

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

    .pace-card {
        flex-direction: column;
        text-align: center;
    }

    .interpretation-card {
        flex-direction: column;
    }
}

/* =========================================
   ACTION TRACKER COMPONENT
   Clinical Decision Support Tracker
   ========================================= */

.action-tracker {
    background: var(--card-bg);
    border: 1px solid var(--card-border);
    border-radius: var(--radius-lg);
    padding: 1.5rem;
    backdrop-filter: blur(20px);
}

/* Tracker Header */
.tracker-header {
    display: flex;
    align-items: center;
    gap: 1rem;
    margin-bottom: 1.5rem;
    padding-bottom: 1rem;
    border-bottom: 1px solid var(--card-border);
}

.tracker-header__icon {
    width: 48px;
    height: 48px;
    border-radius: var(--radius);
    background: linear-gradient(135deg, rgba(139, 92, 246, 0.2), rgba(139, 92, 246, 0.05));
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}

.tracker-header__icon svg {
    width: 24px;
    height: 24px;
    color: var(--brand-primary);
}

.tracker-header__content {
    flex: 1;
}

.tracker-header__title {
    font-size: 1.25rem;
    font-weight: 600;
    color: var(--foreground);
    margin: 0 0 0.25rem 0;
}

.tracker-header__subtitle {
    font-size: 0.875rem;
    color: var(--foreground-muted);
    margin: 0;
}

.tracker-header__stats {
    display: flex;
    gap: 1.5rem;
}

.stat-item {
    text-align: center;
}

.stat-value {
    display: block;
    font-size: 1.5rem;
    font-weight: 700;
    color: var(--brand-primary);
    line-height: 1;
}

.stat-label {
    font-size: 0.75rem;
    color: var(--foreground-muted);
    text-transform: uppercase;
    letter-spacing: 0.05em;
}

/* Filter Bar */
.tracker-filters {
    display: flex;
    gap: 0.5rem;
    margin-bottom: 1.5rem;
    flex-wrap: wrap;
}

.tracker-filter {
    padding: 0.5rem 1rem;
    border-radius: var(--radius);
    border: 1px solid var(--card-border);
    background: transparent;
    color: var(--foreground-muted);
    font-size: 0.875rem;
    font-weight: 500;
    cursor: pointer;
    transition: all 0.2s ease;
}

.tracker-filter:hover {
    border-color: var(--brand-primary);
    color: var(--foreground);
}

.tracker-filter--active {
    background: rgba(139, 92, 246, 0.15);
    border-color: var(--brand-primary);
    color: var(--brand-primary);
}

/* Tracker List */
.tracker-list {
    display: flex;
    flex-direction: column;
    gap: 1rem;
}

/* Tracker Card */
.tracker-card {
    background: rgba(0, 0, 0, 0.3);
    border: 1px solid var(--card-border);
    border-radius: var(--radius);
    overflow: hidden;
    transition: all 0.3s ease;
}

.tracker-card:hover {
    border-color: var(--card-hover-border);
}

.tracker-card--completed {
    opacity: 0.7;
    border-color: rgba(16, 185, 129, 0.3);
}

.tracker-card--completed .tracker-card__header {
    background: linear-gradient(90deg, rgba(16, 185, 129, 0.1), transparent);
}

/* Priority variants */
.tracker-card--high {
    border-left: 3px solid var(--destructive);
}

.tracker-card--medium {
    border-left: 3px solid var(--warning);
}

.tracker-card--low {
    border-left: 3px solid var(--info);
}

/* Card Header */
.tracker-card__header {
    display: flex;
    align-items: center;
    gap: 1rem;
    padding: 1rem;
    background: rgba(255, 255, 255, 0.02);
    border-bottom: 1px solid var(--card-border);
}

.tracker-card__priority {
    flex-shrink: 0;
}

.priority-badge {
    display: inline-flex;
    align-items: center;
    gap: 0.375rem;
    padding: 0.375rem 0.75rem;
    border-radius: var(--radius-sm);
    font-size: 0.75rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.05em;
}

.priority-badge svg {
    width: 14px;
    height: 14px;
}

.priority-badge--high {
    background: rgba(239, 68, 68, 0.15);
    color: var(--destructive);
}

.priority-badge--medium {
    background: rgba(245, 158, 11, 0.15);
    color: var(--warning);
}

.priority-badge--low {
    background: rgba(59, 130, 246, 0.15);
    color: var(--info);
}

.tracker-card__info {
    flex: 1;
    display: flex;
    align-items: center;
    gap: 0.75rem;
}

.tracker-card__id {
    font-size: 0.75rem;
    font-weight: 600;
    color: var(--foreground-muted);
    background: rgba(255, 255, 255, 0.05);
    padding: 0.25rem 0.5rem;
    border-radius: var(--radius-sm);
}

.tracker-card__category {
    font-size: 0.75rem;
    color: var(--foreground-muted);
}

.tracker-card__progress {
    display: flex;
    align-items: center;
    gap: 0.75rem;
}

.progress-text {
    font-size: 0.875rem;
    font-weight: 600;
    color: var(--foreground);
}

.progress-text .total-actions {
    color: var(--foreground-muted);
}

.progress-ring {
    width: 36px;
    height: 36px;
}

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

.progress-ring__bg {
    fill: none;
    stroke: rgba(255, 255, 255, 0.1);
    stroke-width: 3;
}

.progress-ring__fill {
    fill: none;
    stroke: var(--brand-primary);
    stroke-width: 3;
    stroke-linecap: round;
    transition: stroke-dasharray 0.4s ease;
}

.tracker-card--completed .progress-ring__fill {
    stroke: var(--success);
}

/* Card Summary */
.tracker-card__summary {
    padding: 1rem;
}

.tracker-card__title {
    font-size: 1rem;
    font-weight: 500;
    color: var(--foreground);
    margin: 0;
    line-height: 1.5;
}

/* Actions Section */
.tracker-card__actions {
    padding: 0 1rem 1rem;
}

.actions-header {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    font-size: 0.875rem;
    font-weight: 600;
    color: var(--foreground-muted);
    margin: 0 0 0.75rem 0;
}

.actions-header svg {
    width: 16px;
    height: 16px;
    color: var(--brand-primary);
}

.actions-list {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
}

/* Action Item */
.action-item {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    padding: 0.75rem;
    background: rgba(255, 255, 255, 0.03);
    border-radius: var(--radius-sm);
    transition: all 0.2s ease;
}

.action-item:hover {
    background: rgba(255, 255, 255, 0.05);
}

.action-item--completed {
    opacity: 0.6;
}

.action-item--completed .action-item__text {
    text-decoration: line-through;
    color: var(--foreground-muted);
}

.action-item__checkbox {
    position: relative;
    cursor: pointer;
    display: flex;
    flex-shrink: 0;
}

.action-item__checkbox input {
    position: absolute;
    opacity: 0;
    cursor: pointer;
    width: 0;
    height: 0;
}

.action-item__checkmark {
    width: 22px;
    height: 22px;
    border: 2px solid rgba(255, 255, 255, 0.2);
    border-radius: 4px;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.2s ease;
}

.action-item__checkmark svg {
    width: 14px;
    height: 14px;
    color: white;
    opacity: 0;
    transition: opacity 0.2s ease;
}

.action-item__checkbox input:checked + .action-item__checkmark {
    background: var(--success);
    border-color: var(--success);
}

.action-item__checkbox input:checked + .action-item__checkmark svg {
    opacity: 1;
}

.action-item__checkbox:hover .action-item__checkmark {
    border-color: var(--brand-primary);
}

.action-item__text {
    flex: 1;
    font-size: 0.875rem;
    color: var(--foreground);
    line-height: 1.4;
}

.action-item__actions {
    display: flex;
    gap: 0.25rem;
    opacity: 0;
    transition: opacity 0.2s ease;
}

.action-item:hover .action-item__actions {
    opacity: 1;
}

.action-item__btn {
    width: 28px;
    height: 28px;
    border: none;
    background: transparent;
    border-radius: var(--radius-sm);
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--foreground-muted);
    transition: all 0.2s ease;
}

.action-item__btn:hover {
    background: rgba(139, 92, 246, 0.15);
    color: var(--brand-primary);
}

.action-item__btn svg {
    width: 16px;
    height: 16px;
}

.action-item__btn--has-note {
    color: var(--brand-primary);
}

/* Monitoring Section */
.tracker-card__monitoring {
    padding: 0 1rem 1rem;
}

.monitoring-header {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    font-size: 0.875rem;
    font-weight: 600;
    color: var(--foreground-muted);
    margin: 0 0 0.75rem 0;
}

.monitoring-header svg {
    width: 16px;
    height: 16px;
    color: var(--info);
}

.monitoring-list {
    margin: 0;
    padding-left: 1.25rem;
    list-style: none;
}

.monitoring-list li {
    position: relative;
    font-size: 0.875rem;
    color: var(--foreground-muted);
    line-height: 1.6;
    padding-left: 0.5rem;
}

.monitoring-list li::before {
    content: '•';
    position: absolute;
    left: -1rem;
    color: var(--info);
}

/* Card Footer */
.tracker-card__footer {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0.75rem 1rem;
    background: rgba(0, 0, 0, 0.2);
    border-top: 1px solid var(--card-border);
}

.tracker-card__btn {
    display: inline-flex;
    align-items: center;
    gap: 0.375rem;
    padding: 0.5rem 0.75rem;
    border: none;
    background: transparent;
    border-radius: var(--radius-sm);
    font-size: 0.75rem;
    font-weight: 500;
    color: var(--foreground-muted);
    cursor: pointer;
    transition: all 0.2s ease;
}

.tracker-card__btn:hover {
    background: rgba(255, 255, 255, 0.05);
    color: var(--foreground);
}

.tracker-card__btn svg {
    width: 14px;
    height: 14px;
}

.tracker-card__btn--notes:hover {
    color: var(--brand-primary);
}

.tracker-card__btn--expand svg {
    transition: transform 0.3s ease;
}

/* Quick Summary */
.tracker-quick-summary {
    margin-top: 1.5rem;
    padding-top: 1.5rem;
    border-top: 1px solid var(--card-border);
}

.tracker-quick-summary h4 {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    font-size: 1rem;
    font-weight: 600;
    color: var(--foreground);
    margin: 0 0 1rem 0;
}

.tracker-quick-summary h4 svg {
    width: 18px;
    height: 18px;
    color: var(--warning);
}

.tracker-quick-summary ul {
    margin: 0;
    padding: 0;
    list-style: none;
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
}

.tracker-quick-summary li {
    font-size: 0.875rem;
    color: var(--foreground-muted);
    padding-left: 1.5rem;
    position: relative;
    line-height: 1.5;
}

.tracker-quick-summary li::before {
    content: '→';
    position: absolute;
    left: 0;
    color: var(--brand-primary);
    font-weight: 600;
}

/* Empty State */
.tracker-empty {
    text-align: center;
    padding: 3rem 2rem;
}

.tracker-empty__icon {
    width: 64px;
    height: 64px;
    margin: 0 auto 1rem;
    border-radius: 50%;
    background: rgba(139, 92, 246, 0.1);
    display: flex;
    align-items: center;
    justify-content: center;
}

.tracker-empty__icon svg {
    width: 32px;
    height: 32px;
    color: var(--brand-primary);
}

.tracker-empty h3 {
    font-size: 1.125rem;
    font-weight: 600;
    color: var(--foreground);
    margin: 0 0 0.5rem 0;
}

.tracker-empty p {
    font-size: 0.875rem;
    color: var(--foreground-muted);
    margin: 0;
    max-width: 350px;
    margin: 0 auto;
}

/* Expanded State */
.tracker-card--expanded .tracker-card__actions,
.tracker-card--expanded .tracker-card__monitoring {
    display: block;
}

/* Action Tracker Section in CDSS Panel */
.cdss-panel__action-tracker {
    margin-top: 2rem;
}

.cdss-panel__action-tracker > h4 {
    font-size: 1.125rem;
    font-weight: 600;
    color: var(--foreground);
    margin: 0 0 1rem 0;
    display: flex;
    align-items: center;
    gap: 0.5rem;
}

.cdss-panel__action-tracker > h4::before {
    content: '';
    width: 4px;
    height: 1.25em;
    background: var(--brand-primary);
    border-radius: 2px;
}

/* Action Tracker Responsive */
@media (max-width: 768px) {
    .tracker-header {
        flex-direction: column;
        align-items: flex-start;
    }

    .tracker-header__stats {
        width: 100%;
        justify-content: space-around;
        padding-top: 1rem;
        border-top: 1px solid var(--card-border);
        margin-top: 0.5rem;
    }

    .tracker-card__header {
        flex-wrap: wrap;
    }

    .tracker-card__info {
        order: 3;
        width: 100%;
        margin-top: 0.5rem;
    }

    .tracker-filters {
        overflow-x: auto;
        flex-wrap: nowrap;
        -webkit-overflow-scrolling: touch;
        padding-bottom: 0.5rem;
    }

    .tracker-filter {
        flex-shrink: 0;
    }

    .action-item__actions {
        opacity: 1;
    }
}

/* =========================================
   EDUCATIONAL EXPLAINER COMPONENTS
   Patient-friendly tooltips and modals
   ========================================= */

/* Tooltip Component */
.edu-tooltip {
    position: relative;
    display: inline-flex;
    align-items: center;
}

.edu-tooltip__trigger {
    display: inline-flex;
    align-items: center;
    gap: 0.25rem;
    cursor: help;
    border-bottom: 1px dotted rgba(139, 92, 246, 0.5);
}

.edu-tooltip__icon {
    width: 14px;
    height: 14px;
    color: var(--brand-primary);
    opacity: 0.7;
    flex-shrink: 0;
}

.edu-tooltip__content {
    position: absolute;
    bottom: 100%;
    left: 50%;
    transform: translateX(-50%);
    padding: 0.75rem 1rem;
    background: rgba(20, 20, 30, 0.98);
    border: 1px solid var(--card-border);
    border-radius: var(--radius);
    box-shadow: var(--shadow-lg);
    min-width: 200px;
    max-width: 300px;
    z-index: 100;
    opacity: 0;
    visibility: hidden;
    transition: all 0.2s ease;
    margin-bottom: 0.5rem;
}

.edu-tooltip__content::after {
    content: '';
    position: absolute;
    top: 100%;
    left: 50%;
    transform: translateX(-50%);
    border: 6px solid transparent;
    border-top-color: rgba(20, 20, 30, 0.98);
}

.edu-tooltip:hover .edu-tooltip__content {
    opacity: 1;
    visibility: visible;
}

.edu-tooltip__text {
    font-size: 0.8125rem;
    color: var(--foreground);
    line-height: 1.5;
}

/* Learn More Button */
.edu-learn-more {
    display: inline-flex;
    align-items: center;
    gap: 0.375rem;
    padding: 0.375rem 0.75rem;
    background: transparent;
    border: 1px solid var(--brand-primary);
    border-radius: var(--radius);
    color: var(--brand-primary);
    font-size: 0.75rem;
    font-weight: 500;
    cursor: pointer;
    transition: all 0.2s ease;
}

.edu-learn-more:hover {
    background: rgba(139, 92, 246, 0.1);
}

.edu-learn-more svg {
    width: 14px;
    height: 14px;
}

/* Info Card */
.edu-info-card {
    display: flex;
    gap: 1rem;
    padding: 1rem;
    background: rgba(139, 92, 246, 0.05);
    border: 1px solid rgba(139, 92, 246, 0.2);
    border-radius: var(--radius);
    margin: 1rem 0;
}

.edu-info-card--attention {
    background: rgba(245, 158, 11, 0.05);
    border-color: rgba(245, 158, 11, 0.2);
}

.edu-info-card--positive {
    background: rgba(16, 185, 129, 0.05);
    border-color: rgba(16, 185, 129, 0.2);
}

.edu-info-card--critical {
    background: rgba(239, 68, 68, 0.05);
    border-color: rgba(239, 68, 68, 0.2);
}

.edu-info-card__icon {
    flex-shrink: 0;
    width: 40px;
    height: 40px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    background: rgba(139, 92, 246, 0.1);
}

.edu-info-card--attention .edu-info-card__icon {
    background: rgba(245, 158, 11, 0.1);
}

.edu-info-card--positive .edu-info-card__icon {
    background: rgba(16, 185, 129, 0.1);
}

.edu-info-card--critical .edu-info-card__icon {
    background: rgba(239, 68, 68, 0.1);
}

.edu-info-card__icon svg {
    width: 20px;
    height: 20px;
    color: var(--brand-primary);
}

.edu-info-card--attention .edu-info-card__icon svg {
    color: var(--warning);
}

.edu-info-card--positive .edu-info-card__icon svg {
    color: var(--success);
}

.edu-info-card--critical .edu-info-card__icon svg {
    color: var(--destructive);
}

.edu-info-card__content {
    flex: 1;
    min-width: 0;
}

.edu-info-card__title {
    font-size: 0.9375rem;
    font-weight: 600;
    color: var(--foreground);
    margin: 0 0 0.25rem 0;
}

.edu-info-card__text {
    font-size: 0.875rem;
    color: var(--foreground-muted);
    margin: 0;
    line-height: 1.5;
}

/* Concept Explainer */
.edu-concept {
    background: rgba(0, 0, 0, 0.2);
    border: 1px solid var(--card-border);
    border-radius: var(--radius);
    padding: 1rem;
    margin: 0.75rem 0;
}

.edu-concept__header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
}

.edu-concept__title {
    font-size: 1rem;
    font-weight: 600;
    color: var(--foreground);
    margin: 0;
}

.edu-concept__expand {
    width: 28px;
    height: 28px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: transparent;
    border: 1px solid var(--card-border);
    border-radius: 50%;
    cursor: pointer;
    color: var(--foreground-muted);
    transition: all 0.2s ease;
}

.edu-concept__expand:hover {
    border-color: var(--brand-primary);
    color: var(--brand-primary);
}

.edu-concept__expand svg {
    width: 16px;
    height: 16px;
    transition: transform 0.3s ease;
}

.edu-concept--expanded .edu-concept__expand svg {
    transform: rotate(180deg);
}

.edu-concept__simple {
    font-size: 0.875rem;
    color: var(--foreground-muted);
    margin: 0.75rem 0 0 0;
    line-height: 1.5;
}

.edu-concept__details {
    display: none;
    margin-top: 1rem;
    padding-top: 1rem;
    border-top: 1px solid var(--card-border);
}

.edu-concept--expanded .edu-concept__details {
    display: block;
}

.edu-concept__detailed {
    font-size: 0.875rem;
    color: var(--foreground);
    margin: 0 0 1rem 0;
    line-height: 1.6;
}

.edu-concept__analogy {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
    padding: 0.75rem;
    background: rgba(139, 92, 246, 0.05);
    border-radius: var(--radius-sm);
}

.edu-concept__analogy-label {
    font-size: 0.75rem;
    font-weight: 600;
    color: var(--brand-primary);
    text-transform: uppercase;
    letter-spacing: 0.05em;
}

.edu-concept__analogy-text {
    font-size: 0.875rem;
    color: var(--foreground);
    font-style: italic;
}

/* Risk Scale Explainer */
.edu-risk-scale {
    padding: 1rem;
    background: rgba(0, 0, 0, 0.2);
    border: 1px solid var(--card-border);
    border-radius: var(--radius);
    margin: 1rem 0;
}

.edu-risk-scale__header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 0.75rem;
}

.edu-risk-scale__label {
    font-size: 0.875rem;
    font-weight: 500;
    color: var(--foreground);
}

.edu-risk-scale__value {
    font-size: 1rem;
    font-weight: 700;
    color: var(--brand-primary);
}

.edu-risk-scale__bar {
    position: relative;
    height: 12px;
    margin-bottom: 0.5rem;
}

.edu-risk-scale__zones {
    display: flex;
    height: 100%;
    border-radius: 6px;
    overflow: hidden;
}

.edu-risk-scale__zone {
    flex: 1;
}

.edu-risk-scale__zone--low {
    background: linear-gradient(90deg, var(--success), #34d399);
}

.edu-risk-scale__zone--moderate {
    background: linear-gradient(90deg, #fbbf24, var(--warning));
}

.edu-risk-scale__zone--high {
    background: linear-gradient(90deg, #f97316, var(--destructive));
}

.edu-risk-scale__marker {
    position: absolute;
    top: -6px;
    transform: translateX(-50%);
}

.edu-risk-scale__marker-dot {
    width: 16px;
    height: 16px;
    background: white;
    border: 3px solid var(--brand-primary);
    border-radius: 50%;
    box-shadow: var(--shadow-md);
}

.edu-risk-scale__marker-line {
    width: 2px;
    height: 8px;
    background: var(--brand-primary);
    margin: 0 auto;
}

.edu-risk-scale__legend {
    display: flex;
    justify-content: space-between;
    font-size: 0.75rem;
    color: var(--foreground-muted);
}

.edu-risk-scale__interpretation {
    font-size: 0.8125rem;
    color: var(--foreground-muted);
    margin: 1rem 0 0 0;
    padding: 0.75rem;
    background: rgba(255, 255, 255, 0.02);
    border-radius: var(--radius-sm);
    line-height: 1.5;
}

.edu-risk-scale__interpretation--low {
    border-left: 3px solid var(--success);
}

.edu-risk-scale__interpretation--moderate {
    border-left: 3px solid var(--warning);
}

.edu-risk-scale__interpretation--high {
    border-left: 3px solid var(--destructive);
}

/* Percentile Explainer */
.edu-percentile {
    padding: 1rem;
    background: rgba(0, 0, 0, 0.2);
    border: 1px solid var(--card-border);
    border-radius: var(--radius);
}

.edu-percentile__visual {
    margin-bottom: 1rem;
}

.edu-percentile__population {
    display: flex;
    justify-content: space-between;
    gap: 0.25rem;
}

.edu-percentile__person {
    flex: 1;
    max-width: 32px;
    color: rgba(255, 255, 255, 0.2);
    transition: color 0.3s ease;
}

.edu-percentile__person svg {
    width: 100%;
    height: auto;
}

.edu-percentile__person--highlighted {
    color: var(--brand-primary);
}

.edu-percentile__text {
    font-size: 0.9375rem;
    color: var(--foreground);
    margin: 0 0 0.5rem 0;
    line-height: 1.5;
}

.edu-percentile__subtext {
    font-size: 0.8125rem;
    color: var(--foreground-muted);
    margin: 0;
}

/* Data Source Badge */
.edu-data-source {
    display: inline-flex;
    align-items: center;
    gap: 0.25rem;
    padding: 0.25rem 0.5rem;
    background: rgba(255, 255, 255, 0.05);
    border-radius: var(--radius-sm);
    font-size: 0.6875rem;
    font-weight: 500;
    text-transform: uppercase;
    letter-spacing: 0.03em;
    color: var(--foreground-muted);
}

.edu-data-source svg {
    width: 12px;
    height: 12px;
}

.edu-data-source--genetic {
    background: rgba(139, 92, 246, 0.1);
    color: var(--brand-primary);
}

.edu-data-source--proteomic {
    background: rgba(236, 72, 153, 0.1);
    color: #ec4899;
}

.edu-data-source--metabolic {
    background: rgba(14, 165, 233, 0.1);
    color: #0ea5e9;
}

.edu-data-source--microbiome {
    background: rgba(16, 185, 129, 0.1);
    color: var(--success);
}

.edu-data-source--methylation {
    background: rgba(245, 158, 11, 0.1);
    color: var(--warning);
}

.edu-data-source--lab {
    background: rgba(99, 102, 241, 0.1);
    color: #6366f1;
}

.edu-data-source__confidence {
    padding-left: 0.25rem;
    border-left: 1px solid rgba(255, 255, 255, 0.1);
    margin-left: 0.25rem;
}

/* Glossary Term */
.edu-glossary-term {
    padding: 0.75rem 0;
    border-bottom: 1px solid var(--card-border);
}

.edu-glossary-term:last-child {
    border-bottom: none;
}

.edu-glossary-term__name {
    font-size: 1rem;
    font-weight: 600;
    color: var(--foreground);
    margin-bottom: 0.375rem;
}

.edu-glossary-term__def {
    font-size: 0.875rem;
    color: var(--foreground-muted);
    line-height: 1.5;
    margin: 0;
}

.edu-glossary-term__related {
    margin-top: 0.5rem;
    font-size: 0.8125rem;
}

.edu-glossary-term__related-label {
    color: var(--foreground-muted);
    margin-right: 0.25rem;
}

.edu-glossary-term__link {
    color: var(--brand-primary);
    text-decoration: none;
}

.edu-glossary-term__link:hover {
    text-decoration: underline;
}

/* Clinical Context Card */
.edu-clinical-context {
    background: rgba(0, 0, 0, 0.2);
    border: 1px solid var(--card-border);
    border-radius: var(--radius);
    overflow: hidden;
    margin: 1rem 0;
}

.edu-clinical-context__header {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    padding: 1rem;
    background: rgba(255, 255, 255, 0.02);
}

.edu-clinical-context__icon {
    width: 36px;
    height: 36px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    background: rgba(59, 130, 246, 0.1);
    flex-shrink: 0;
}

.edu-clinical-context__icon svg {
    width: 18px;
    height: 18px;
    color: var(--info);
}

.edu-clinical-context--positive .edu-clinical-context__icon {
    background: rgba(16, 185, 129, 0.1);
}

.edu-clinical-context--positive .edu-clinical-context__icon svg {
    color: var(--success);
}

.edu-clinical-context--attention .edu-clinical-context__icon {
    background: rgba(245, 158, 11, 0.1);
}

.edu-clinical-context--attention .edu-clinical-context__icon svg {
    color: var(--warning);
}

.edu-clinical-context--action .edu-clinical-context__icon {
    background: rgba(239, 68, 68, 0.1);
}

.edu-clinical-context--action .edu-clinical-context__icon svg {
    color: var(--destructive);
}

.edu-clinical-context__finding {
    font-size: 1rem;
    font-weight: 600;
    color: var(--foreground);
    margin: 0;
}

.edu-clinical-context__body {
    padding: 1rem;
}

.edu-clinical-context__section {
    margin-bottom: 1rem;
}

.edu-clinical-context__section:last-child {
    margin-bottom: 0;
}

.edu-clinical-context__label {
    font-size: 0.75rem;
    font-weight: 600;
    color: var(--brand-primary);
    text-transform: uppercase;
    letter-spacing: 0.05em;
    margin: 0 0 0.375rem 0;
}

.edu-clinical-context__section p {
    font-size: 0.875rem;
    color: var(--foreground-muted);
    margin: 0;
    line-height: 1.5;
}

/* Educational Modal */
.edu-modal {
    position: fixed;
    inset: 0;
    z-index: 1000;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 1rem;
    opacity: 0;
    visibility: hidden;
    transition: all 0.3s ease;
}

.edu-modal--open {
    opacity: 1;
    visibility: visible;
}

.edu-modal__backdrop {
    position: absolute;
    inset: 0;
    background: rgba(0, 0, 0, 0.7);
    backdrop-filter: blur(4px);
}

.edu-modal__container {
    position: relative;
    width: 100%;
    max-width: 600px;
    max-height: 80vh;
    background: var(--background-elevated);
    border: 1px solid var(--card-border);
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow-lg);
    display: flex;
    flex-direction: column;
    transform: translateY(20px);
    transition: transform 0.3s ease;
}

.edu-modal--open .edu-modal__container {
    transform: translateY(0);
}

.edu-modal__header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 1.25rem 1.5rem;
    border-bottom: 1px solid var(--card-border);
}

.edu-modal__title {
    font-size: 1.25rem;
    font-weight: 600;
    color: var(--foreground);
    margin: 0;
}

.edu-modal__close {
    width: 32px;
    height: 32px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: transparent;
    border: none;
    border-radius: 50%;
    color: var(--foreground-muted);
    cursor: pointer;
    transition: all 0.2s ease;
}

.edu-modal__close:hover {
    background: rgba(255, 255, 255, 0.05);
    color: var(--foreground);
}

.edu-modal__close svg {
    width: 20px;
    height: 20px;
}

.edu-modal__body {
    flex: 1;
    padding: 1.5rem;
    overflow-y: auto;
}

.edu-modal__footer {
    padding: 1rem 1.5rem;
    border-top: 1px solid var(--card-border);
    display: flex;
    justify-content: flex-end;
}

.edu-modal__btn {
    padding: 0.625rem 1.5rem;
    background: var(--brand-primary);
    border: none;
    border-radius: var(--radius);
    color: white;
    font-size: 0.875rem;
    font-weight: 500;
    cursor: pointer;
    transition: all 0.2s ease;
}

.edu-modal__btn:hover {
    background: var(--brand-accent);
}

/* Modal Content Styles */
.edu-modal-content__intro {
    font-size: 1rem;
    color: var(--foreground);
    line-height: 1.6;
    margin: 0 0 1.5rem 0;
}

.edu-modal-content h4 {
    font-size: 1rem;
    font-weight: 600;
    color: var(--foreground);
    margin: 1.5rem 0 0.75rem 0;
}

.edu-modal-content ul {
    margin: 0;
    padding-left: 1.25rem;
}

.edu-modal-content li {
    font-size: 0.9375rem;
    color: var(--foreground-muted);
    line-height: 1.6;
    margin-bottom: 0.5rem;
}

.edu-modal-content li strong {
    color: var(--foreground);
}

.edu-modal-content p {
    font-size: 0.9375rem;
    color: var(--foreground-muted);
    line-height: 1.6;
    margin: 0 0 1rem 0;
}

.edu-modal-content__tip {
    padding: 1rem;
    background: rgba(139, 92, 246, 0.1);
    border-left: 3px solid var(--brand-primary);
    border-radius: 0 var(--radius-sm) var(--radius-sm) 0;
    margin-top: 1.5rem;
    font-size: 0.875rem;
    color: var(--foreground);
    line-height: 1.5;
}

.edu-modal-content__tip strong {
    color: var(--brand-primary);
}

/* Educational Components Responsive */
@media (max-width: 768px) {
    .edu-tooltip__content {
        min-width: 160px;
        max-width: 250px;
    }

    .edu-percentile__population {
        gap: 0.125rem;
    }

    .edu-percentile__person {
        max-width: 24px;
    }

    .edu-modal__container {
        max-height: 90vh;
    }

    .edu-modal__header {
        padding: 1rem;
    }

    .edu-modal__body {
        padding: 1rem;
    }

    .edu-modal__footer {
        padding: 0.75rem 1rem;
    }
}

/* Ensure CDSS and Labs content is visible when directly embedded */
.cdss-content-visible,
.labs-content-visible {
    display: block !important;
}

/* Floating AI Chat Widget */
.floating-ai-widget {
    position: fixed;
    bottom: 8rem;
    right: 2rem;
    z-index: 1000;
    transition: all 0.3s ease;
}

.floating-ai-widget__button {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    background: var(--brand-primary);
    color: #ffffff;
    border: none;
    border-radius: 2rem;
    padding: 0.75rem 1.25rem;
    font-size: 0.9rem;
    font-weight: 600;
    cursor: pointer;
    box-shadow: 0 4px 16px rgba(var(--brand-primary-rgb), 0.3);
    transition: all 0.2s ease;
    min-width: 120px;
    justify-content: center;
}

.floating-ai-widget__button:hover {
    background: var(--brand-secondary);
    box-shadow: 0 6px 20px rgba(var(--brand-primary-rgb), 0.4);
    transform: translateY(-2px);
}

.floating-ai-widget__button:active {
    transform: translateY(0);
    box-shadow: 0 2px 8px rgba(var(--brand-primary-rgb), 0.3);
}

.floating-ai-widget__icon {
    width: 20px;
    height: 20px;
    flex-shrink: 0;
}

.floating-ai-widget__text {
    white-space: nowrap;
}

/* AI Chat Panel */
.ai-chat-panel {
    position: fixed;
    bottom: 8rem;
    right: 2rem;
    width: 400px;
    max-width: calc(100vw - 4rem);
    max-height: 480px;
    background: #ffffff;
    border-radius: 12px;
    box-shadow: 0 8px 32px rgba(var(--brand-secondary-rgb), 0.2);
    z-index: 1001;
    display: none;
    flex-direction: column;
    overflow: hidden;
}

.ai-chat-panel__header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 1rem 1.25rem;
    border-bottom: 1px solid rgba(var(--brand-secondary-rgb), 0.1);
    background: linear-gradient(135deg,
            rgba(var(--brand-secondary-rgb), 0.03) 0%,
            rgba(var(--brand-primary-rgb), 0.02) 100%);
}

.ai-chat-panel__title {
    margin: 0;
    font-size: 1.1rem;
    font-weight: 700;
    color: var(--brand-secondary);
}

.ai-chat-panel__actions {
    display: flex;
    gap: 0.5rem;
    align-items: center;
}

.ai-chat-panel__clear-btn,
.ai-chat-panel__close-btn {
    background: none;
    border: none;
    color: rgba(var(--brand-secondary-rgb), 0.7);
    cursor: pointer;
    padding: 0.25rem 0.5rem;
    font-size: 0.85rem;
    border-radius: 4px;
    transition: all 0.2s ease;
}

.ai-chat-panel__clear-btn:hover,
.ai-chat-panel__close-btn:hover {
    background: rgba(var(--brand-secondary-rgb), 0.1);
    color: var(--brand-secondary);
}

.ai-chat-panel__close-btn {
    font-size: 1.5rem;
    line-height: 1;
    padding: 0 0.5rem;
}

.ai-chat-log {
    flex: 1;
    overflow-y: auto;
    font-size: 0.9rem;
    padding: 1rem 1.25rem;
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
    min-height: 200px;
    max-height: 320px;
}

.ai-chat-log::-webkit-scrollbar {
    width: 6px;
}

.ai-chat-log::-webkit-scrollbar-track {
    background: rgba(var(--brand-secondary-rgb), 0.05);
    border-radius: 3px;
}

.ai-chat-log::-webkit-scrollbar-thumb {
    background: rgba(var(--brand-secondary-rgb), 0.2);
    border-radius: 3px;
}

.ai-chat-log::-webkit-scrollbar-thumb:hover {
    background: rgba(var(--brand-secondary-rgb), 0.3);
}

.ai-chat-log__empty {
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 2rem 1rem;
    text-align: center;
    color: rgba(var(--brand-secondary-rgb), 0.6);
    flex: 1;
}

.ai-chat-log__empty-text {
    margin: 0;
    font-size: 0.85rem;
    line-height: 1.5;
}

.ai-msg {
    margin-bottom: 0;
    display: flex;
}

.ai-msg--user {
    justify-content: flex-end;
}

.ai-msg--assistant {
    justify-content: flex-start;
}

.ai-msg__bubble {
    display: inline-block;
    padding: 8px 12px;
    border-radius: 12px;
    max-width: 85%;
    white-space: pre-wrap;
    word-wrap: break-word;
    line-height: 1.4;
}

.ai-msg--user .ai-msg__bubble {
    background: rgba(var(--brand-primary-rgb), 0.15);
    color: var(--brand-secondary);
    border: 1px solid rgba(var(--brand-primary-rgb), 0.2);
}

.ai-msg--assistant .ai-msg__bubble {
    background: rgba(var(--brand-secondary-rgb), 0.05);
    color: var(--brand-secondary);
    border: 1px solid rgba(var(--brand-secondary-rgb), 0.1);
}

.ai-chat-form {
    display: flex;
    gap: 0.5rem;
    padding: 1rem 1.25rem;
    border-top: 1px solid rgba(var(--brand-secondary-rgb), 0.1);
    background: rgba(var(--brand-secondary-rgb), 0.02);
}

.ai-chat-form__input {
    flex: 1;
    padding: 8px 12px;
    border-radius: 999px;
    border: 1px solid rgba(var(--brand-secondary-rgb), 0.2);
    font-size: 0.9rem;
    font-family: inherit;
    transition: border-color 0.2s ease;
    background: #ffffff;
}

.ai-chat-form__input:focus {
    outline: none;
    border-color: var(--brand-primary);
    box-shadow: 0 0 0 3px rgba(var(--brand-primary-rgb), 0.1);
}

.ai-chat-form__input:disabled {
    background: rgba(var(--brand-secondary-rgb), 0.05);
    cursor: not-allowed;
}

.ai-chat-form__button {
    border-radius: 999px;
    border: none;
    padding: 8px 16px;
    background: var(--brand-primary);
    color: #ffffff;
    cursor: pointer;
    font-size: 0.9rem;
    font-weight: 500;
    transition: all 0.2s ease;
    flex-shrink: 0;
}

.ai-chat-form__button:hover:not(:disabled) {
    background: var(--brand-secondary);
    transform: translateY(-1px);
    box-shadow: 0 2px 8px rgba(var(--brand-primary-rgb), 0.2);
}

.ai-chat-form__button:disabled {
    opacity: 0.6;
    cursor: not-allowed;
    transform: none;
}

.ai-chat-panel__status {
    padding: 0.5rem 1.25rem;
    font-size: 0.8rem;
    color: rgba(var(--brand-secondary-rgb), 0.7);
    min-height: 1.25rem;
    display: none;
}

.ai-chat-panel__status--error {
    color: #dc2626;
}

/* Responsive adjustments for floating AI widget */
@media (max-width: 768px) {
    .floating-ai-widget {
        bottom: 6rem;
        right: 1rem;
    }
    
    .ai-chat-panel {
        bottom: 6rem;
        right: 1rem;
        width: calc(100vw - 2rem);
        max-height: calc(100vh - 200px);
    }
    
    .floating-ai-widget__button {
        min-width: auto;
        padding: 0.75rem 1rem;
    }
    
    .floating-ai-widget__text {
        display: none;
    }
}

/* Floating Note Widget */
.floating-note-widget {
    position: fixed;
    bottom: 2rem;
    right: 2rem;
    z-index: 1000;
    transition: all 0.3s ease;
}

.floating-note-widget__button {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    background: var(--brand-primary);
    color: #ffffff;
    border: none;
    border-radius: 2rem;
    padding: 0.75rem 1.25rem;
    font-size: 0.9rem;
    font-weight: 600;
    cursor: pointer;
    box-shadow: 0 4px 16px rgba(var(--brand-primary-rgb), 0.3);
    transition: all 0.2s ease;
    min-width: 120px;
    justify-content: center;
}

.floating-note-widget__button:hover {
    background: var(--brand-secondary);
    box-shadow: 0 6px 20px rgba(var(--brand-primary-rgb), 0.4);
    transform: translateY(-2px);
}

.floating-note-widget__button:active {
    transform: translateY(0);
    box-shadow: 0 2px 8px rgba(var(--brand-primary-rgb), 0.3);
}

.floating-note-widget__icon {
    flex-shrink: 0;
    width: 20px;
    height: 20px;
}

.floating-note-widget__text {
    white-space: nowrap;
}

/* Responsive adjustments for floating widget */
@media (max-width: 768px) {
    .floating-note-widget {
        bottom: 1rem;
        right: 1rem;
    }
    
    .floating-note-widget__button {
        padding: 0.75rem;
        min-width: auto;
        border-radius: 50%;
        width: 56px;
        height: 56px;
        justify-content: center;
    }
    
    .floating-note-widget__text {
        display: none;
    }
    
    .floating-note-widget__icon {
        width: 24px;
        height: 24px;
    }
}

.customer-reports {
    margin-top: 2.5rem;
    background: #ffffff;
    border-radius: 1.25rem;
    padding: 2rem;
    box-shadow: 0 20px 48px rgba(var(--brand-secondary-rgb), 0.16);
    display: grid;
    gap: 2rem;
}

.customer-reports__header h2 {
    margin: 0 0 0.35rem;
    font-weight: 700;
    color: var(--brand-secondary);
}

.customer-reports__header p {
    margin: 0;
    color: rgba(var(--brand-secondary-rgb), 0.7);
}

.customer-reports__grid {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    gap: 1.5rem;
}

.customer-reports__card {
    background: rgba(var(--brand-secondary-rgb), 0.06);
    border-radius: 1rem;
    padding: 1.5rem;
    display: grid;
    gap: 1rem;
}

.customer-reports__card-header h3 {
    margin: 0 0 0.35rem;
    font-weight: 600;
    color: var(--brand-secondary);
}

.customer-reports__card-header p {
    margin: 0;
    color: rgba(var(--brand-secondary-rgb), 0.65);
}

.customer-reports__search {
    display: grid;
    gap: 0.35rem;
}

.customer-reports__search label {
    font-size: 0.85rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    color: rgba(var(--brand-secondary-rgb), 0.7);
}

.customer-reports__list {
    margin: 0;
    padding: 0;
    list-style: none;
    display: grid;
    gap: 0.75rem;
}

.customer-reports__item {
    display: flex;
    gap: 1rem;
    justify-content: space-between;
    align-items: center;
    background: #ffffff;
    border-radius: 0.85rem;
    padding: 0.85rem 1rem;
    box-shadow: 0 10px 24px rgba(var(--brand-secondary-rgb), 0.08);
}

.customer-reports__person {
    display: grid;
    gap: 0.2rem;
}

.customer-reports__person-name {
    font-weight: 600;
    color: var(--brand-secondary);
}

.customer-reports__person-id {
    color: rgba(var(--brand-secondary-rgb), 0.6);
    font-size: 0.9rem;
}

.customer-reports__action {
    white-space: nowrap;
}

.customer-reports__empty,
.customer-reports__no-results {
    margin: 0;
    padding: 1rem;
    border-radius: 0.75rem;
    background: rgba(var(--brand-secondary-rgb), 0.08);
    color: rgba(var(--brand-secondary-rgb), 0.7);
}

.customer-reports__coming-soon {
    padding: 1.25rem;
    border-radius: 0.85rem;
    background: rgba(var(--brand-primary-rgb), 0.16);
    display: grid;
    gap: 0.75rem;
    color: rgba(var(--brand-secondary-rgb), 0.8);
}

.customer-reports__downloads {
    padding: 1.25rem;
    border-radius: 0.85rem;
    background: rgba(var(--brand-secondary-rgb), 0.08);
    display: grid;
    gap: 1rem;
}

.customer-reports__downloads-text {
    margin: 0;
    color: rgba(var(--brand-secondary-rgb), 0.7);
}

.customer-reports__downloads-note,
.customer-reports__coming-soon-note {
    margin: 0;
    padding: 0.75rem 1rem;
    border-radius: 0.75rem;
    background: rgba(var(--brand-secondary-rgb), 0.08);
    color: rgba(var(--brand-secondary-rgb), 0.7);
    font-size: 0.95rem;
}

.customer-reports__download-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 0.75rem;
}

/* ── API key management ─────────────────────────────────── */

.manage-users__divider {
    border: none;
    border-top: 1px solid rgba(var(--brand-secondary-rgb), 0.12);
    margin: 1.25rem 0;
}

.api-key h4 {
    margin: 0 0 0.5rem;
    font-size: 1rem;
}

.api-key__masked {
    font-family: ui-monospace, SFMono-Regular, "SF Mono", Menlo, Consolas, monospace;
    font-size: 0.95rem;
    padding: 0.25rem 0.5rem;
    border-radius: 0.375rem;
    background: rgba(var(--brand-secondary-rgb), 0.08);
}

.api-key__value {
    font-family: ui-monospace, SFMono-Regular, "SF Mono", Menlo, Consolas, monospace;
    font-size: 0.9rem;
    word-break: break-all;
    padding: 0.2rem 0.4rem;
    border-radius: 0.25rem;
    background: rgba(var(--brand-secondary-rgb), 0.08);
}

.api-key__meta {
    display: grid;
    grid-template-columns: auto 1fr;
    gap: 0.25rem 0.75rem;
    margin: 0.5rem 0 0;
    font-size: 0.9rem;
    color: rgba(var(--brand-secondary-rgb), 0.7);
}

.api-key__meta dt {
    font-weight: 600;
}

.api-key__meta dd {
    margin: 0;
}

.api-key__actions {
    display: flex;
    gap: 0.5rem;
    margin-top: 0.75rem;
}

.api-key__docs {
    margin-top: 0;
}

.partner-webhook__email {
    margin-top: 1.25rem;
}

.api-key__reveal {
    margin-bottom: 1rem;
    padding: 0.75rem 1rem;
    border-radius: 0.5rem;
    background: rgba(16, 185, 129, 0.1);
    border: 1px solid rgba(16, 185, 129, 0.3);
}

.api-key__warning {
    margin: 0 0 0.5rem;
    font-weight: 600;
    font-size: 0.9rem;
    color: var(--brand-secondary);
}

.api-key__copybox {
    display: flex;
    gap: 0.5rem;
}

.api-key__input {
    flex: 1;
    font-family: ui-monospace, SFMono-Regular, "SF Mono",
        Menlo, Consolas, monospace;
    font-size: 0.85rem;
    padding: 0.4rem 0.6rem;
    border: 1px solid rgba(var(--brand-secondary-rgb), 0.2);
    border-radius: 0.375rem;
    background: #fff;
    color: var(--brand-secondary);
    cursor: text;
}

.api-key__copy-btn {
    white-space: nowrap;
    min-width: 5rem;
}

/* ===========================================================================
   Schema-driven report renderer (templates/reports/auto_report.html)
   --------------------------------------------------------------------------
   Used when FF_USE_LOCAL_TEST_DATA is False. The renderer walks a JSON
   Schema + payload and emits semantic markup; this block styles each kind
   the walker can produce: object, object-table, dynamic-map, scalar-list,
   scalar, boolean.
   ========================================================================*/

.report-auto {
    display: flex;
    flex-direction: column;
    gap: var(--report-auto-section-gap);
}

.report-auto__report {
    background: var(--card-bg);
    border: 1px solid var(--card-border);
    border-radius: var(--radius-lg);
    padding: 1.5rem;
    box-shadow: var(--shadow-sm);
}

.report-auto__report-header {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-start;
    justify-content: space-between;
    gap: 1rem;
    border-bottom: 1px solid var(--report-auto-border);
    padding-bottom: 0.75rem;
    margin-bottom: 1rem;
}

.report-auto__report-titles {
    display: flex;
    flex-direction: column;
    gap: 0.25rem;
}

.report-auto__report-title {
    margin: 0;
    font-size: 1.5rem;
    color: var(--foreground);
}

.report-auto__report-meta {
    margin: 0;
    color: var(--foreground-muted);
    font-size: 0.875rem;
    display: flex;
    gap: 0.75rem;
    flex-wrap: wrap;
}

.report-auto__report-type,
.report-auto__report-version {
    font-family: ui-monospace, SFMono-Regular, "SF Mono", Menlo, Consolas,
        monospace;
    font-size: 0.8125rem;
    color: var(--brand-accent);
}

.report-auto__chip {
    display: inline-flex;
    align-items: center;
    padding: 0.25rem 0.6rem;
    border-radius: 999px;
    font-size: 0.75rem;
    font-weight: 600;
    background: var(--report-auto-chip-bg);
    color: var(--brand-accent);
}

.report-auto__chip--ok {
    background: var(--report-auto-chip-ok-bg);
    color: var(--success);
}

.report-auto__chip--warn {
    background: var(--report-auto-chip-warn-bg);
    color: var(--warning);
}

.report-auto__warnings {
    margin: 0 0 1rem;
    border: 1px solid var(--report-auto-chip-warn-bg);
    border-radius: var(--radius-sm);
    padding: 0.5rem 0.75rem;
    background: rgba(var(--warning-rgb), 0.06);
}

.report-auto__warnings-summary {
    cursor: pointer;
    color: var(--warning);
    font-weight: 600;
    font-size: 0.875rem;
}

.report-auto__warnings-list {
    margin: 0.5rem 0 0;
    padding-left: 1.25rem;
    color: var(--foreground-muted);
    font-size: 0.8125rem;
    display: flex;
    flex-direction: column;
    gap: 0.25rem;
}

.report-auto__warnings-list code {
    font-size: 0.8125rem;
    color: var(--foreground);
}

.report-auto__warnings-hint {
    margin: 0.5rem 0 0;
    font-size: 0.75rem;
    color: var(--foreground-muted);
    font-style: italic;
}

.report-auto__group {
    margin-top: 1rem;
}

.report-auto__group--depth-0 {
    margin-top: 0;
}

.report-auto__group-header {
    margin-bottom: 0.75rem;
}

.report-auto__group-title {
    margin: 0;
    color: var(--foreground);
}

.report-auto__group--depth-0 > .report-auto__group-header > .report-auto__group-title {
    font-size: 1.25rem;
}

.report-auto__group--depth-1 > .report-auto__group-header > .report-auto__group-title {
    font-size: 1.05rem;
}

.report-auto__group--depth-2 > .report-auto__group-header > .report-auto__group-title,
.report-auto__group--depth-3 > .report-auto__group-header > .report-auto__group-title,
.report-auto__group--depth-4 > .report-auto__group-header > .report-auto__group-title {
    font-size: 0.95rem;
    color: var(--foreground-muted);
    text-transform: uppercase;
    letter-spacing: 0.04em;
}

.report-auto__group-body {
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
}

.report-auto__hint {
    margin: 0.25rem 0 0;
    color: var(--foreground-muted);
    font-size: 0.8125rem;
    font-style: italic;
}

.report-auto__field {
    display: grid;
    grid-template-columns: minmax(8rem, 0.4fr) 1fr;
    gap: 0.5rem 1rem;
    padding: 0.4rem 0;
    border-bottom: 1px dashed var(--report-auto-border);
}

.report-auto__field:last-child {
    border-bottom: none;
}

.report-auto__label {
    font-weight: 600;
    color: var(--foreground-muted);
    margin: 0;
}

.report-auto__label--required::after {
    content: " *";
    color: var(--destructive);
}

.report-auto__value {
    margin: 0;
    color: var(--foreground);
    word-break: break-word;
}

.report-auto__missing {
    color: var(--foreground-muted);
    font-style: italic;
}

.report-auto__number {
    font-variant-numeric: tabular-nums;
    font-family: ui-monospace, SFMono-Regular, "SF Mono", Menlo, Consolas,
        monospace;
}

.report-auto__badge {
    display: inline-flex;
    align-items: center;
    padding: 0.15rem 0.5rem;
    border-radius: 999px;
    font-size: 0.75rem;
    font-weight: 600;
}

.report-auto__badge--yes {
    background: rgba(var(--success-rgb), 0.18);
    color: var(--success);
}

.report-auto__badge--no {
    background: rgba(var(--destructive-rgb), 0.16);
    color: var(--destructive);
}

.report-auto__chips {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-wrap: wrap;
    gap: 0.35rem;
}

.report-auto__chip {
    display: inline-flex;
    padding: 0.15rem 0.55rem;
    border-radius: 999px;
    background: var(--report-auto-chip-bg);
    color: var(--brand-accent);
    font-size: 0.8125rem;
}

.report-auto__inline-code {
    font-family: ui-monospace, SFMono-Regular, "SF Mono", Menlo, Consolas,
        monospace;
    font-size: 0.8125rem;
    background: rgba(255, 255, 255, 0.05);
    padding: 0.1rem 0.35rem;
    border-radius: var(--radius-sm);
    color: var(--foreground);
}

.report-auto__table-wrapper {
    overflow-x: auto;
    border: 1px solid var(--report-auto-border);
    border-radius: var(--radius-sm);
}

.report-auto__table {
    width: 100%;
    border-collapse: collapse;
    font-size: 0.875rem;
}

.report-auto__table thead {
    background: rgba(var(--brand-primary-rgb), 0.08);
}

.report-auto__table th,
.report-auto__table td {
    padding: 0.5rem 0.75rem;
    text-align: left;
    border-bottom: 1px solid var(--report-auto-border);
    vertical-align: top;
}

.report-auto__table tbody tr:nth-child(even) {
    background: var(--report-auto-table-stripe);
}

.report-auto__table tbody tr:last-child td {
    border-bottom: none;
}

.report-auto__count {
    margin: 0.5rem 0 0;
    color: var(--foreground-muted);
    font-size: 0.8125rem;
}

.report-auto__map {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: 0.4rem;
}

.report-auto__map-item {
    border: 1px solid var(--report-auto-border);
    border-radius: var(--radius-sm);
    background: rgba(255, 255, 255, 0.02);
}

.report-auto__details > .report-auto__summary {
    cursor: pointer;
    padding: 0.5rem 0.75rem;
    display: flex;
    align-items: center;
    gap: 0.5rem;
}

.report-auto__map-key {
    font-family: ui-monospace, SFMono-Regular, "SF Mono", Menlo, Consolas,
        monospace;
    font-size: 0.8125rem;
    color: var(--brand-accent);
}

.report-auto__map-body {
    padding: 0.25rem 0.75rem 0.75rem;
}

.report-auto__empty,
.report-auto__empty-state {
    color: var(--foreground-muted);
    font-style: italic;
}

.report-auto__empty-state {
    padding: 1.5rem;
    background: var(--card-bg);
    border: 1px dashed var(--report-auto-border);
    border-radius: var(--radius-lg);
    text-align: center;
    font-style: normal;
}

.report-auto__empty-state-title {
    margin: 0 0 0.5rem;
    color: var(--foreground);
    font-size: 1.1rem;
}

.report-auto__empty-state-body {
    margin: 0;
    color: var(--foreground-muted);
    font-size: 0.875rem;
}

/* White-label customer setup */
.white-label {
    margin-top: 1rem;
}

.white-label__form {
    margin-bottom: 1rem;
}

.white-label__logo-preview {
    display: block;
    max-width: 180px;
    max-height: 64px;
    margin-bottom: 0.5rem;
    background: var(--card-bg);
    border: 1px solid var(--report-auto-border, rgba(148, 163, 184, 0.35));
    border-radius: var(--radius-md, 8px);
    padding: 0.5rem;
}

.white-label__status {
    display: grid;
    grid-template-columns: auto auto;
    gap: 0.35rem 1rem;
    align-items: center;
    margin: 0.75rem 0;
}

.white-label__status dt {
    font-weight: 600;
    color: var(--foreground-muted);
}

.white-label__status dd {
    margin: 0;
}

.white-label__actions {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
    align-items: center;
    margin-bottom: 1rem;
}

.white-label__records {
    margin: 1rem 0;
    overflow-x: auto;
}

.white-label__records-table {
    width: 100%;
    border-collapse: collapse;
    font-size: 0.85rem;
}

.white-label__records-table th,
.white-label__records-table td {
    text-align: left;
    padding: 0.4rem 0.6rem;
    border-bottom: 1px solid var(--report-auto-border, rgba(148, 163, 184, 0.35));
    vertical-align: top;
}

.white-label__records-table code {
    word-break: break-all;
}

.white-label__email {
    margin-top: 1rem;
}

.white-label__email-body {
    display: block;
    width: 100%;
    margin: 0.5rem 0;
    font-family: var(--font-mono, ui-monospace, SFMono-Regular, Menlo, monospace);
    font-size: 0.8rem;
    background: var(--card-bg);
    color: var(--foreground);
    border: 1px solid var(--report-auto-border, rgba(148, 163, 184, 0.35));
    border-radius: var(--radius-md, 8px);
    padding: 0.75rem;
}

/* ==========================================================================
   Data Commons asset register (admin) and public verification portal
   --------------------------------------------------------------------------
   Two BEM blocks that share a visual language because they present the same
   facts to different audiences: `.asset-register__*` for the authenticated
   admin surface, `.commons__*` for the anonymous public portal.

   The portal renders for visitors who are not logged in and may be reading on
   a phone in a meeting, so it leans on larger type and higher contrast than
   the admin panel. Both use the existing dark theme custom properties rather
   than introducing a parallel palette.
   ========================================================================== */

:root {
    --commons-verify-ok: var(--success);
    --commons-verify-fail: var(--destructive);
    --commons-verify-pending: var(--warning);
    --commons-hash-size: 0.78rem;
}

.asset-register__header {
    margin-bottom: 1.5rem;
}

.asset-register__header p {
    max-width: 70ch;
    color: var(--foreground-muted);
}

.asset-register__notice {
    display: block;
    margin: 0 0 1.5rem;
    padding: 0.9rem 1.1rem;
    border-radius: var(--radius-sm, 0.5rem);
    border-left: 4px solid var(--commons-verify-pending);
    background: rgba(var(--warning-rgb), 0.12);
    color: var(--foreground);
    line-height: 1.55;
}

.asset-register__notice--warning strong {
    color: var(--warning);
}

.asset-register__config {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-end;
    justify-content: space-between;
    gap: 1.25rem;
    margin-bottom: 1.75rem;
    padding: 1.25rem;
    border: 1px solid var(--card-border);
    border-radius: var(--radius, 0.75rem);
    background: var(--card-bg);
}

.asset-register__config-list {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(190px, 1fr));
    gap: 1rem 1.5rem;
    flex: 1 1 60%;
    margin: 0;
}

.asset-register__config-list dt,
.asset-register__digests dt {
    font-size: 0.75rem;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    color: var(--foreground-muted);
    margin-bottom: 0.2rem;
}

.asset-register__config-list dd,
.asset-register__digests dd {
    margin: 0;
    font-size: 0.9rem;
}

.asset-register__hash,
.commons__hash {
    font-family: var(--font-mono, ui-monospace, SFMono-Regular, Menlo, monospace);
    font-size: var(--commons-hash-size);
    word-break: break-all;
}

.asset-register__verification {
    margin-bottom: 1.75rem;
    padding: 1.25rem;
    border: 1px solid var(--card-border);
    border-left-width: 4px;
    border-radius: var(--radius, 0.75rem);
    background: var(--card-bg);
}

.asset-register__verification--ok {
    border-left-color: var(--commons-verify-ok);
}

.asset-register__verification--fail {
    border-left-color: var(--commons-verify-fail);
}

.asset-register__verification h2 {
    margin-top: 0;
    font-size: 1.15rem;
}

.asset-register__verification h3 {
    margin: 1.25rem 0 0.4rem;
    font-size: 0.95rem;
    color: var(--foreground-muted);
}

.asset-register__digests {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
    gap: 0.9rem 1.5rem;
    margin: 0.75rem 0 0;
}

.asset-register__hint {
    margin-top: 0.75rem;
    font-size: 0.82rem;
    color: var(--foreground-muted);
    max-width: 75ch;
}

.asset-register__table table {
    width: 100%;
    border-collapse: collapse;
}

.asset-register__table th,
.asset-register__table td {
    padding: 0.7rem 0.6rem;
    text-align: left;
    border-bottom: 1px solid var(--card-border);
    vertical-align: top;
}

.asset-register__suppressed {
    display: block;
    font-size: 0.72rem;
    color: var(--foreground-muted);
}

.asset-register__anchors {
    list-style: none;
    margin: 0;
    padding: 0;
    font-size: 0.82rem;
}

.asset-register__anchors li + li {
    margin-top: 0.3rem;
}

/* --- public portal ------------------------------------------------------- */

.commons {
    max-width: 68rem;
    margin: 0 auto;
    padding: 1.5rem 1rem 4rem;
}

.commons__header {
    margin-bottom: 1.75rem;
}

.commons__header h1 {
    margin-bottom: 0.4rem;
}

.commons__lede {
    max-width: 72ch;
    font-size: 1.02rem;
    line-height: 1.65;
    color: var(--foreground-muted);
}

/* Non-dismissible by design: an outside party must not be able to hide the
   fact that these anchors carry no durability guarantee. */
.commons__disclosure {
    margin: 0 0 2rem;
    padding: 1rem 1.2rem;
    border-radius: var(--radius-sm, 0.5rem);
    border: 1px solid rgba(var(--warning-rgb), 0.45);
    border-left-width: 4px;
    border-left-color: var(--warning);
    background: rgba(var(--warning-rgb), 0.12);
    line-height: 1.6;
}

.commons__disclosure strong {
    color: var(--warning);
}

.commons__section {
    margin-bottom: 2.5rem;
}

.commons__section h2 {
    font-size: 1.2rem;
    margin-bottom: 0.75rem;
}

.commons__metrics {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
    gap: 1rem;
    margin: 0;
}

.commons__metric {
    padding: 1rem;
    border: 1px solid var(--card-border);
    border-radius: var(--radius, 0.75rem);
    background: var(--card-bg);
}

.commons__metric dt {
    font-size: 0.74rem;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    color: var(--foreground-muted);
}

.commons__metric dd {
    margin: 0.35rem 0 0;
    font-size: 1.5rem;
    font-weight: 600;
}

.commons__metric dd small {
    display: block;
    font-size: 0.72rem;
    font-weight: 400;
    color: var(--foreground-muted);
}

.commons__table {
    width: 100%;
    border-collapse: collapse;
}

.commons__table th,
.commons__table td {
    padding: 0.7rem 0.6rem;
    text-align: left;
    border-bottom: 1px solid var(--card-border);
}

.commons__verify {
    padding: 1.25rem;
    border: 1px solid var(--card-border);
    border-radius: var(--radius, 0.75rem);
    background: var(--card-bg);
}

.commons__verify-steps {
    margin: 0.75rem 0 1.25rem 1.2rem;
    padding: 0;
    line-height: 1.7;
    color: var(--foreground-muted);
}

.commons__verify-result {
    margin-top: 1rem;
    padding: 0.9rem 1.1rem;
    border-radius: var(--radius-sm, 0.5rem);
    border-left: 4px solid var(--foreground-muted);
    background: rgba(148, 163, 184, 0.1);
    line-height: 1.55;
}

.commons__verify-result[data-state="ok"] {
    border-left-color: var(--commons-verify-ok);
    background: rgba(var(--success-rgb), 0.12);
}

.commons__verify-result[data-state="fail"] {
    border-left-color: var(--commons-verify-fail);
    background: rgba(var(--destructive-rgb), 0.12);
}

.commons__verify-result[data-state="busy"] {
    border-left-color: var(--commons-verify-pending);
    background: rgba(var(--warning-rgb), 0.12);
}

.commons__suppressed {
    color: var(--foreground-muted);
    font-style: italic;
}

.commons__footnote {
    margin-top: 2.5rem;
    padding-top: 1.25rem;
    border-top: 1px solid var(--card-border);
    font-size: 0.84rem;
    line-height: 1.65;
    color: var(--foreground-muted);
    max-width: 78ch;
}

@media (max-width: 640px) {
    .asset-register__config {
        flex-direction: column;
        align-items: stretch;
    }

    .commons__metric dd {
        font-size: 1.25rem;
    }
}

/* ============================================================================
   Patient portal
   ============================================================================
   A distinct, calmer surface from the clinical app. Patients read these pages
   once or twice, often on a phone, often anxious, so the block favours
   generous spacing, a single column, and larger type over the information
   density the provider chart is tuned for.

   Everything is namespaced .patient-portal__* and self-contained: the patient
   shell does not include the app header or footer, so it cannot inherit their
   styles.
   ========================================================================== */

.patient-portal {
    --pp-background: #f7faf8;
    --pp-surface: #ffffff;
    --pp-surface-muted: #eef7f3;
    --pp-border: #cfe0d9;
    --pp-text: #18261f;
    --pp-muted: #53645d;
    --pp-primary: #0f766e;
    --pp-primary-rgb: 15, 118, 110;
    --pp-primary-strong: #115e59;
    --pp-accent: #b7791f;
    --pp-info: #2563eb;
    --pp-max-width: 64rem;
    --pp-narrow-width: 38rem;

    background:
        linear-gradient(180deg, rgba(var(--pp-primary-rgb), 0.08), transparent 22rem),
        var(--pp-background);
    box-sizing: border-box;
    color: var(--pp-text);
    display: flex;
    flex-direction: column;
    min-height: 100vh;
    /* Staff pages pad for a fixed .site-header this shell does not render. */
    margin: 0;
    padding-top: 0;
}

/* The rest of app.css does not set a global border-box reset. Width + padding
   on the date-of-birth inputs overflowed their grid cells and painted over
   neighbouring fields. */
.patient-portal *,
.patient-portal *::before,
.patient-portal *::after {
    box-sizing: border-box;
}

.patient-portal__preview-banner {
    background: #fff7ed;
    border-bottom: 1px solid #fed7aa;
    color: #7c2d12;
    font-size: 0.9rem;
    padding: 0.75rem 1.25rem;
    text-align: center;
}

.patient-portal__header {
    background: rgba(255, 255, 255, 0.92);
    border-bottom: 1px solid var(--pp-border);
    box-shadow: 0 1px 0 rgba(17, 94, 89, 0.06);
}

.patient-portal__header-inner {
    align-items: center;
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem 1rem;
    justify-content: space-between;
    margin: 0 auto;
    max-width: var(--pp-max-width);
    padding: 0.5rem 1.25rem;
    width: 100%;
}

.patient-portal__header-inner--wide,
.patient-portal__container--wide {
    max-width: none;
}

.patient-portal__brand {
    align-items: center;
    display: flex;
    gap: 0.75rem;
    min-width: 0;
}

.patient-portal__logo {
    max-height: 2rem;
    max-width: 10rem;
    object-fit: contain;
}

.patient-portal__brand-name {
    font-size: 1.05rem;
    font-weight: 600;
    letter-spacing: 0;
}

.patient-portal__powered-by {
    border-left: 1px solid var(--pp-border);
    color: var(--pp-muted);
    font-size: 0.82rem;
    padding-left: 0.75rem;
}

.patient-portal__nav-list {
    display: flex;
    flex-wrap: wrap;
    gap: 0.35rem 1rem;
    list-style: none;
    margin: 0;
    padding: 0;
}

.patient-portal__nav-link {
    background: none;
    border: none;
    border-radius: 0.5rem;
    color: var(--pp-muted);
    cursor: pointer;
    display: inline-block;
    font: inherit;
    font-size: 0.95rem;
    padding: 0.4rem 0.6rem;
    text-decoration: none;
}

.patient-portal__nav-link:hover,
.patient-portal__nav-link:focus-visible {
    background: rgba(var(--pp-primary-rgb), 0.11);
    color: var(--pp-text);
}

.patient-portal__nav-link.is-active {
    color: var(--pp-primary-strong);
    font-weight: 600;
}

.patient-portal__logout-form {
    display: inline;
    margin: 0;
}

.patient-portal__main {
    flex: 1 0 auto;
    padding: 1.75rem 1.25rem 2rem;
}

.patient-portal__main--ehr {
    padding: 0;
}

.patient-portal--ehr .ki-layout {
    min-height: auto;
    padding-bottom: 2rem;
}

.patient-portal--ehr .ki-top-tabs {
    top: 0;
}

.ki-patient-chart-actions {
    display: flex;
    justify-content: flex-end;
    margin: 0 auto;
    max-width: 1400px;
    padding: 0.75rem 1rem 0;
}

.patient-portal__container {
    margin: 0 auto;
    max-width: var(--pp-max-width);
    width: 100%;
}

.patient-portal__card {
    background: var(--pp-surface);
    border: 1px solid var(--pp-border);
    border-radius: 0.5rem;
    box-shadow: 0 16px 40px rgba(26, 46, 38, 0.09);
    padding: 2.25rem;
}

.patient-portal__card--narrow {
    margin: 0 auto;
    max-width: var(--pp-narrow-width);
}

.patient-portal__entry-card {
    position: relative;
}

.patient-portal__entry-card::before {
    background: linear-gradient(90deg, var(--pp-primary), var(--pp-accent));
    border-radius: 0.5rem 0.5rem 0 0;
    content: "";
    height: 0.35rem;
    left: -1px;
    position: absolute;
    right: -1px;
    top: -1px;
}

.patient-portal__eyebrow {
    color: var(--pp-primary-strong);
    font-size: 0.78rem;
    font-weight: 700;
    letter-spacing: 0.08em;
    margin: 0 0 0.8rem;
    text-transform: uppercase;
}

.patient-portal__heading {
    color: var(--pp-text);
    font-size: 2rem;
    line-height: 1.25;
    margin: 0 0 1rem;
}

.patient-portal__subheading {
    color: var(--pp-text);
    font-size: 1.15rem;
    margin: 1.75rem 0 0.75rem;
}

/* 68ch rather than full width: patient-facing prose is read, not scanned. */
.patient-portal__lede {
    color: var(--pp-muted);
    font-size: 1.02rem;
    line-height: 1.7;
    margin: 0 0 1rem;
    max-width: 68ch;
}

.patient-portal__fineprint {
    color: var(--pp-muted);
    font-size: 0.86rem;
    line-height: 1.6;
    margin: 1.5rem 0 0;
}

.patient-portal__fineprint--inline {
    margin: 0;
}

.patient-portal__form {
    display: flex;
    flex-direction: column;
    gap: 1.25rem;
    margin: 1.75rem 0 0;
}

.patient-portal__field {
    display: flex;
    flex-direction: column;
    gap: 0.45rem;
}

.patient-portal__field--check {
    flex-direction: row;
}

.patient-portal__label {
    color: var(--pp-text);
    font-size: 0.95rem;
    font-weight: 600;
}

/* 1rem minimum: anything smaller triggers iOS Safari's zoom-on-focus.
   The element-qualified selectors beat the global [data-theme="light"] input
   rules that otherwise paint a purple focus ring onto these fields. */
.patient-portal input.patient-portal__input,
[data-theme="light"] .patient-portal input.patient-portal__input {
    background: #ffffff;
    border: 1px solid var(--pp-border);
    border-radius: 0.5rem;
    color: var(--pp-text);
    font: inherit;
    font-size: 1rem;
    min-height: 3rem;
    padding: 0.75rem 0.85rem;
    width: 100%;
}

.patient-portal input.patient-portal__input:focus,
.patient-portal input.patient-portal__input:focus-visible,
[data-theme="light"] .patient-portal input.patient-portal__input:focus,
[data-theme="light"] .patient-portal input.patient-portal__input:focus-visible {
    background-color: #ffffff;
    border-color: var(--pp-primary);
    box-shadow: 0 0 0 3px rgba(var(--pp-primary-rgb), 0.2);
    outline: none;
}

.patient-portal__dob-grid {
    display: grid;
    gap: 1.25rem;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) minmax(0, 1.4fr);
}

.patient-portal__dob-part {
    color: var(--pp-muted);
    display: flex;
    flex-direction: column;
    font-size: 0.82rem;
    font-weight: 600;
    gap: 0.35rem;
    min-width: 0;
}

.patient-portal__dob-part .patient-portal__input {
    font-size: 1.1rem;
    text-align: center;
}

.patient-portal__checkbox {
    align-items: flex-start;
    display: flex;
    gap: 0.65rem;
    line-height: 1.55;
}

.patient-portal__checkbox input {
    accent-color: var(--pp-primary);
    margin-top: 0.25rem;
}

.patient-portal__submit {
    align-self: flex-start;
}

.patient-portal__action-row {
    align-items: center;
    display: flex;
    flex-wrap: wrap;
    gap: 0.9rem 1rem;
}

.patient-portal__steps {
    counter-reset: pp-step;
    display: grid;
    gap: 0.75rem;
    grid-template-columns: repeat(auto-fit, minmax(0, 1fr));
    list-style: none;
    margin: 1.5rem 0 0;
    padding: 0;
}

.patient-portal__step {
    background: var(--pp-surface-muted);
    border: 1px solid var(--pp-border);
    border-radius: 0.5rem;
    color: var(--pp-muted);
    font-size: 0.82rem;
    font-weight: 700;
    padding: 0.7rem 0.75rem;
}

.patient-portal__step::before {
    counter-increment: pp-step;
    content: counter(pp-step);
    background: #ffffff;
    border: 1px solid var(--pp-border);
    border-radius: 999px;
    color: var(--pp-muted);
    display: inline-grid;
    height: 1.35rem;
    margin-right: 0.45rem;
    place-items: center;
    width: 1.35rem;
}

.patient-portal__step.is-active {
    background: rgba(var(--pp-primary-rgb), 0.1);
    border-color: rgba(var(--pp-primary-rgb), 0.35);
    color: var(--pp-primary-strong);
}

.patient-portal__step.is-active::before,
.patient-portal__step.is-complete::before {
    background: var(--pp-primary);
    border-color: var(--pp-primary);
    color: #ffffff;
}

.patient-portal__notice {
    background: #eff6ff;
    border-left: 3px solid var(--pp-info);
    border-radius: 0.5rem;
    color: #1e3a5f;
    margin: 1.5rem 0;
    padding: 1rem 1.15rem;
}

.patient-portal__notice p {
    line-height: 1.65;
    margin: 0 0 0.5rem;
}

.patient-portal__notice p:last-child {
    margin-bottom: 0;
}

.patient-portal__notice--warn {
    background: #fff7ed;
    border-left-color: #f59e0b;
    color: #7c2d12;
}

.patient-portal__notice--muted {
    background: var(--pp-surface-muted);
    border-left-color: var(--pp-border);
    color: var(--pp-muted);
}

.patient-portal__facts,
.patient-portal__preview-facts {
    display: grid;
    gap: 0.4rem 1.5rem;
    grid-template-columns: minmax(9rem, auto) 1fr;
    margin: 0 0 1rem;
}

.patient-portal__facts dt,
.patient-portal__preview-facts dt {
    color: var(--pp-muted);
    font-size: 0.9rem;
}

.patient-portal__facts dd,
.patient-portal__preview-facts dd {
    margin: 0;
}

.patient-portal__fallback-note {
    color: var(--pp-accent);
    font-size: 0.85rem;
    margin: 0.25rem 0 0;
}

.patient-portal__preview-frame {
    background: var(--pp-surface-muted);
    border: 1px dashed var(--pp-border);
    border-radius: 0.5rem;
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
    padding: 1.25rem;
}

.patient-portal__help-section {
    border-top: 1px solid var(--pp-border);
    margin-top: 1.75rem;
    padding-top: 1.25rem;
}

.patient-portal__help-section:first-of-type {
    border-top: none;
    margin-top: 0;
    padding-top: 0;
}

.patient-portal__acceptance-list {
    list-style: none;
    margin: 0;
    padding: 0;
}

.patient-portal__acceptance-list li {
    border-bottom: 1px solid var(--pp-border);
    padding: 0.65rem 0;
}

.patient-portal__acceptance-list li:last-child {
    border-bottom: none;
}

.patient-portal__acceptance-meta {
    color: var(--pp-muted);
    display: block;
    font-size: 0.85rem;
}

/* --- Legal documents --- */

.patient-portal__legal-meta {
    color: var(--pp-muted);
    font-size: 0.88rem;
    margin: 0 0 1.25rem;
}

.patient-portal__legal-section {
    border-top: 1px solid var(--pp-border);
    margin-top: 2rem;
    padding-top: 1.25rem;
}

.patient-portal__legal-section:first-of-type {
    border-top: none;
    margin-top: 0;
    padding-top: 0;
}

.patient-portal__legal-body {
    line-height: 1.75;
    max-width: 72ch;
}

.patient-portal__legal-body h1,
.patient-portal__legal-body h2,
.patient-portal__legal-body h3 {
    font-size: 1.1rem;
    margin: 1.75rem 0 0.65rem;
}

.patient-portal__legal-body p,
.patient-portal__legal-body li {
    margin: 0 0 0.85rem;
}

.patient-portal__legal-body ul,
.patient-portal__legal-body ol {
    padding-left: 1.5rem;
}

.patient-portal__legal-body table {
    border-collapse: collapse;
    margin: 1rem 0;
    width: 100%;
}

.patient-portal__legal-body th,
.patient-portal__legal-body td {
    border: 1px solid var(--pp-border);
    padding: 0.5rem 0.7rem;
    text-align: left;
}

/* Scroll rather than collapse on the acceptance screen: the text has to be
   genuinely readable for the acceptance to mean anything. */
.patient-portal__legal-body--scroll {
    background: #fbfdfc;
    border: 1px solid var(--pp-border);
    border-radius: 0.5rem;
    max-height: 22rem;
    overflow-y: auto;
    padding: 1.15rem 1.25rem;
}

.patient-portal__legal-body--scroll:focus-visible {
    outline: 3px solid rgba(var(--pp-primary-rgb), 0.2);
    outline-offset: 2px;
}

.patient-portal__legal-back {
    border-top: 1px solid var(--pp-border);
    margin: 2rem 0 0;
    padding-top: 1.25rem;
}

/* --- Results --- */

.patient-portal__results > :last-child {
    margin-bottom: 0;
}

.patient-portal__results-header {
    background: var(--pp-surface);
    border: 1px solid var(--pp-border);
    border-radius: 0.5rem;
    box-shadow: 0 16px 40px rgba(26, 46, 38, 0.08);
    margin-bottom: 1.75rem;
    padding: 2rem;
}

.patient-portal__results-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 0.75rem;
    margin-top: 1.25rem;
}

.patient-portal__report {
    background: var(--pp-surface);
    border: 1px solid var(--pp-border);
    border-radius: 0.5rem;
    margin: 1.5rem 0;
    padding: 1.5rem 1.25rem;
}

.patient-portal__empty-state {
    background: var(--pp-surface-muted);
    border: 1px solid var(--pp-border);
    border-radius: 0.5rem;
    padding: 1.5rem;
}

.patient-portal__empty-kicker {
    color: var(--pp-primary-strong);
    font-size: 0.78rem;
    font-weight: 700;
    letter-spacing: 0.08em;
    margin: 0;
    text-transform: uppercase;
}

/* --- Footer --- */

.patient-portal__footer {
    background: #edf5f1;
    border-top: 1px solid var(--pp-border);
    color: var(--pp-muted);
    font-size: 0.88rem;
    padding: 1.15rem 1.25rem;
}

.patient-portal__footer a {
    color: var(--pp-primary-strong);
}

.patient-portal__support {
    margin-bottom: 0.6rem;
}

.patient-portal__support p {
    margin: 0 0 0.25rem;
}

.patient-portal__support-title {
    color: var(--pp-text);
    font-weight: 600;
}

.patient-portal__legal-links ul {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem 1.25rem;
    list-style: none;
    margin: 0 0 1rem;
    padding: 0;
}

.patient-portal__legal-entity {
    margin: 0;
}

@media (max-width: 640px) {
    .patient-portal__main {
        padding: 1.25rem 1rem 1.5rem;
    }

    .patient-portal__card {
        padding: 1.5rem 1.15rem;
    }

    .patient-portal__heading {
        font-size: 1.4rem;
    }

    .patient-portal__dob-grid,
    .patient-portal__steps {
        grid-template-columns: 1fr;
    }

    .patient-portal__facts,
    .patient-portal__preview-facts {
        grid-template-columns: 1fr;
    }

    .patient-portal__facts dd,
    .patient-portal__preview-facts dd {
        margin-bottom: 0.6rem;
    }
}

/* ============================================================================
   Admin: patient portal configuration and legal documents
   ========================================================================== */

.portal-config__readiness {
    background: var(--card-bg);
    border: 1px solid var(--card-border);
    border-left: 3px solid var(--success);
    border-radius: var(--radius-sm);
    margin: 1rem 0 1.5rem;
    padding: 1.1rem 1.25rem;
}

.portal-config__readiness--blocked {
    border-left-color: var(--destructive);
}

.portal-config__status {
    margin: 0 0 0.85rem;
}

.portal-config__checklist {
    display: grid;
    gap: 0.4rem;
    list-style: none;
    margin: 0;
    padding: 0;
}

.portal-config__check {
    align-items: baseline;
    display: grid;
    gap: 0.5rem;
    grid-template-columns: 1.25rem minmax(0, 14rem) 1fr;
    font-size: 0.92rem;
}

.portal-config__check-mark {
    font-weight: 700;
    text-align: center;
}

.portal-config__check--ok .portal-config__check-mark {
    color: var(--success);
}

.portal-config__check--blocked .portal-config__check-mark {
    color: var(--destructive);
}

.portal-config__check--warn .portal-config__check-mark {
    color: var(--warning);
}

.portal-config__check-detail {
    color: var(--foreground-muted);
    font-size: 0.86rem;
    min-width: 0;
    overflow-wrap: anywhere;
}

.portal-config__missing {
    background: rgba(var(--destructive-rgb), 0.1);
    border-radius: var(--radius-sm);
    margin-top: 1rem;
    padding: 0.85rem 1rem;
}

.portal-config__missing p,
.portal-config__missing ul {
    margin: 0;
}

.portal-config__missing ul {
    padding-left: 1.35rem;
}

.portal-config__actions {
    margin-top: 1rem;
}

.portal-config__ux {
    border: 0;
    display: grid;
    gap: 0.75rem;
    margin: 0 0 1.25rem;
    min-width: 0;
    padding: 0;
}

.portal-config__ux legend {
    font-weight: 600;
    margin-bottom: 0.35rem;
    padding: 0;
}

.portal-config__ux-option {
    align-items: flex-start;
    border: 1px solid var(--card-border);
    border-radius: 0.5rem;
    display: flex;
    gap: 0.75rem;
    padding: 0.75rem 1rem;
}

.portal-config__ux-option input {
    margin-top: 0.2rem;
}

.portal-config__ux-option .form-help {
    display: block;
    margin-top: 0.25rem;
}

.legal-doc {
    border-top: 1px solid var(--card-border);
    margin-top: 1.75rem;
    padding-top: 1.25rem;
}

.legal-doc__title {
    margin: 0 0 0.75rem;
}

.legal-doc__current {
    display: grid;
    gap: 0.3rem 1.25rem;
    grid-template-columns: minmax(8rem, auto) 1fr;
    margin: 0 0 1rem;
}

.legal-doc__current dt {
    color: var(--foreground-muted);
    font-size: 0.88rem;
}

.legal-doc__current dd {
    margin: 0;
}

/* Monospace: markdown structure (indentation, list markers, table pipes) is
   only legible when columns line up. */
.legal-doc__editor {
    font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
    font-size: 0.88rem;
    line-height: 1.6;
    width: 100%;
}

.legal-doc__actions {
    align-items: center;
    display: flex;
    flex-wrap: wrap;
    gap: 0.75rem;
}

.legal-doc__publish {
    margin-top: 0.85rem;
}

.white-label__subhead {
    border-top: 1px solid var(--card-border);
    margin: 1.75rem 0 1rem;
    padding-top: 1.1rem;
}

.white-label__subhead:first-of-type {
    border-top: none;
    margin-top: 0;
    padding-top: 0;
}

.manage-patients__portal {
    border-top: 1px solid var(--card-border);
    margin-top: 1.5rem;
    padding-top: 1.25rem;
}

.manage-patients__portal-meta {
    display: grid;
    gap: 0.3rem 1.25rem;
    grid-template-columns: minmax(9rem, auto) 1fr;
    margin: 0.75rem 0 0;
}

.manage-patients__portal-meta dt {
    color: var(--foreground-muted);
    font-size: 0.88rem;
}

.manage-patients__portal-meta dd {
    margin: 0;
}

@media (max-width: 640px) {
    .portal-config__check {
        grid-template-columns: 1.25rem 1fr;
    }

    .portal-config__check-detail {
        grid-column: 2;
    }

    .legal-doc__current,
    .manage-patients__portal-meta {
        grid-template-columns: 1fr;
    }
}

/* ============================================
   GENOMICS DEMO MODULE
   Six body-map markers, category drawers and the PRS/PGx detail pages.
   Severity and action colours are always paired with a text label so the UI
   stays readable in high-contrast and colour-blind modes.
   ============================================ */

.genomics {
    display: flex;
    flex-direction: column;
    gap: var(--genomics-gap);
}

.genomics__header {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-start;
    justify-content: space-between;
    gap: 1rem;
}

.genomics__title {
    margin: 0;
    font-size: 1.5rem;
}

.genomics__subtitle {
    margin: 0.25rem 0 0;
    color: var(--text-secondary, #94a3b8);
}

.genomics__overview {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(11rem, 1fr));
    gap: 0.75rem;
    margin: 0;
}

.genomics__overview-item {
    padding: 0.75rem 0.9rem;
    border: 1px solid var(--genomics-border);
    border-radius: var(--radius-sm);
    background: var(--genomics-surface);
}

.genomics__overview-item dt {
    margin: 0;
    font-size: 0.78rem;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    color: var(--text-secondary, #94a3b8);
}

.genomics__overview-item dd {
    margin: 0.35rem 0 0;
    font-size: 1.35rem;
    font-weight: 600;
}

/* Overview figures that are the report's drill-down doors. The whole tile is
   the hit area; the number keeps the accessible name describing where it goes. */
.genomics__overview-item--linked {
    position: relative;
}

.genomics__overview-item--linked:hover,
.genomics__overview-item--linked:focus-within {
    border-color: var(--brand-primary);
}

.genomics__overview-door {
    padding: 0;
    border: 0;
    background: none;
    color: var(--brand-primary);
    font: inherit;
    text-align: left;
    text-decoration: none;
    cursor: pointer;
}

.genomics__overview-door::after {
    content: "";
    position: absolute;
    inset: 0;
    border-radius: var(--radius-sm);
}

.genomics__overview-door:focus-visible {
    outline: none;
}

.genomics__overview-item--linked:focus-within {
    outline: 2px solid var(--brand-primary);
    outline-offset: 2px;
}

.genomics__overview-door--headline {
    font-size: 1.15rem;
}

.genomics__layout {
    display: grid;
    grid-template-columns: minmax(22rem, 0.95fr) minmax(0, 1.05fr);
    gap: var(--genomics-gap);
    align-items: start;
}

.genomics__actions {
    margin: 0;
}

/* ---------- Body map ---------- */

.genomics-catalog {
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
    min-width: 0;
}

.genomics-catalog__lead {
    margin: 0;
    color: var(--text-secondary, #94a3b8);
    font-size: 0.92rem;
}

.genomics-catalog__list {
    display: flex;
    flex-direction: column;
    gap: 0.4rem;
    margin: 0;
    padding: 0;
    list-style: none;
}

.genomics-catalog__item {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.45rem 0.65rem;
    width: 100%;
    padding: 0.7rem 0.85rem;
    border: 1px solid var(--genomics-border);
    border-radius: var(--radius-sm);
    background: var(--genomics-surface);
    color: inherit;
    text-align: left;
    cursor: pointer;
}

.genomics-catalog__item:hover,
.genomics-catalog__item:focus-visible {
    border-color: var(--brand-primary);
}

.genomics-catalog__item:focus-visible {
    outline: 2px solid var(--brand-primary);
    outline-offset: 2px;
}

.genomics-catalog__item.genomics-marker--selected {
    border-color: var(--brand-primary);
    box-shadow: inset 3px 0 0 var(--brand-primary);
}

.genomics-catalog__name {
    font-weight: 600;
}

.genomics-catalog__value {
    color: var(--text-secondary, #94a3b8);
    font-size: 0.85rem;
}

.genomics-catalog__value--unavailable {
    font-style: italic;
}

.genomics-catalog__counts {
    display: flex;
    gap: 0.25rem;
    margin-left: auto;
}

.genomics__layout--catalog {
    grid-template-columns: minmax(16rem, 0.85fr) minmax(0, 1.15fr);
}

.genomics-map__stage {
    min-height: 30rem;
}

/* The marker is a small dot with its caption anchored beside it. The six
   hotspots sit as little as 16% of the image width apart, so the caption is
   deliberately compact and the count badges live in the legend instead. */
/* The coordinate marks the anatomy, so the dot — not the middle of the whole
   dot-plus-caption row — has to land on it. --genomics-marker-shift pulls the
   row back by half a dot; the reversed variant overrides it below. */
.genomics-marker {
    --genomics-marker-shift: -0.35rem;

    position: absolute;
    transform: translate(var(--genomics-marker-shift), -50%);
    transform-origin: left center;
    display: flex;
    align-items: center;
    gap: 0.3rem;
    padding: 0;
    border: none;
    background: none;
    color: inherit;
    cursor: pointer;
    z-index: 20;
    transition: transform 0.2s ease;
}

.genomics-marker:hover,
.genomics-marker:focus-visible {
    transform: translate(var(--genomics-marker-shift), -50%) scale(1.08);
    z-index: 30;
}

.genomics-marker--selected {
    z-index: 30;
}

.genomics-marker--selected .genomics-marker__caption {
    outline: 2px solid var(--brand-primary);
    outline-offset: 1px;
}

.genomics-marker__dot {
    position: relative;
    flex: none;
    width: 0.7rem;
    height: 0.7rem;
    border: 2px solid currentColor;
    border-radius: 50%;
    background: rgba(0, 0, 0, 0.6);
}

.genomics-marker__caption {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    padding: 0.15rem 0.35rem;
    border-radius: var(--radius-sm);
    background: rgba(0, 0, 0, 0.72);
    white-space: nowrap;
}

/* Captions point away from their neighbours. Cancer sits at the far right edge
   of the image, and Metabolism is only 16% of the image width from Immune
   System, so both hang their caption to the left of the dot. Keyed on the
   domain attribute because the class modifier carries severity, not identity. */
.genomics-marker[data-genomics-domain="cancer"],
.genomics-marker[data-genomics-domain="metabolism"] {
    --genomics-marker-shift: calc(-100% + 0.35rem);

    flex-direction: row-reverse;
    transform-origin: right center;
}

.genomics-marker__label {
    font-size: 0.62rem;
    font-weight: 700;
    letter-spacing: 0.05em;
    text-transform: uppercase;
    line-height: 1.2;
}

.genomics-marker__severity {
    font-size: 0.58rem;
    line-height: 1.2;
    /* Fixed, not themed: the caption behind it is dark in both themes. */
    color: #cbd5e1;
}

/* Markers sit on a dark translucent caption over the dark avatar render in
   both themes, so they use the -overlay severity tokens, which stay bright.
   The page-level chips and legend use the theme-aware tokens instead. */
.genomics-marker--unknown { color: var(--genomics-severity-unknown-overlay); }
.genomics-marker--typical { color: var(--genomics-severity-typical-overlay); }
.genomics-marker--attention { color: var(--genomics-severity-attention-overlay); }
.genomics-marker--elevated { color: var(--genomics-severity-elevated-overlay); }
.genomics-marker--high { color: var(--genomics-severity-high-overlay); }

.genomics-marker--typical .genomics-marker__dot { box-shadow: 0 0 10px var(--genomics-severity-typical-overlay); }
.genomics-marker--attention .genomics-marker__dot { box-shadow: 0 0 14px var(--genomics-severity-attention-overlay); }
.genomics-marker--elevated .genomics-marker__dot { box-shadow: 0 0 18px var(--genomics-severity-elevated-overlay); }
.genomics-marker--high .genomics-marker__dot { box-shadow: 0 0 22px var(--genomics-severity-high-overlay); }

/* The two badges must stay tellable apart: PRS is outlined, PGx is filled. */
.genomics-badge {
    padding: 0.05rem 0.35rem;
    border-radius: 999px;
    font-size: 0.62rem;
    font-weight: 700;
    letter-spacing: 0.03em;
}

.genomics-badge--prs {
    border: 1px solid var(--brand-primary);
    color: var(--brand-primary);
    background: transparent;
}

.genomics-badge--pgx {
    border: 1px solid transparent;
    background: rgba(56, 189, 248, 0.22);
    color: var(--genomics-action-monitor);
}

.genomics-map__legend {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(13rem, 1fr));
    gap: 0.4rem;
    margin: 0;
    padding: 0;
    list-style: none;
}

.genomics-map__legend-item {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.4rem;
    padding: 0.4rem 0.55rem;
    border: 1px solid var(--genomics-border);
    border-radius: var(--radius-sm);
    font-size: 0.8rem;
}

.genomics-map__legend-name {
    font-weight: 600;
}

.genomics-map__legend-value {
    color: var(--text-secondary, #94a3b8);
}

.genomics-map__legend-value--unavailable {
    font-style: italic;
}

.genomics-map__legend-badges {
    display: flex;
    gap: 0.25rem;
    margin-left: auto;
}

/* ---------- Drawers ---------- */

.genomics__drawers {
    display: flex;
    flex-direction: column;
    gap: var(--genomics-gap);
}

.genomics__drawer-idle {
    margin: 0;
    padding: 1.25rem;
    border: 1px dashed var(--genomics-border);
    border-radius: var(--radius-sm);
    color: var(--text-secondary, #94a3b8);
}

.genomics-drawer {
    padding: 1rem;
    border: 1px solid var(--genomics-border);
    border-radius: var(--radius);
    background: var(--genomics-surface);
}

.genomics-drawer__header {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.5rem;
}

.genomics-drawer__title {
    margin: 0;
    font-size: 1.2rem;
}

.genomics-drawer__title:focus-visible {
    outline: 2px solid var(--brand-primary);
    outline-offset: 3px;
}

.genomics-drawer__percentile {
    font-size: 0.82rem;
    color: var(--text-secondary, #94a3b8);
}

.genomics-drawer__percentile--unavailable {
    font-style: italic;
}

.genomics-drawer__description,
.genomics-drawer__interpretation {
    margin: 0.6rem 0 0;
    font-size: 0.9rem;
}

.genomics-drawer__tabs {
    display: flex;
    gap: 0.4rem;
    margin: 0.9rem 0 0.75rem;
    border-bottom: 1px solid var(--genomics-border);
}

.genomics-drawer__tab {
    padding: 0.45rem 0.75rem;
    border: none;
    border-bottom: 2px solid transparent;
    background: none;
    color: var(--text-secondary, #94a3b8);
    font-size: 0.88rem;
    cursor: pointer;
}

.genomics-drawer__tab--active {
    border-bottom-color: var(--brand-primary);
    color: inherit;
    font-weight: 600;
}

.genomics-drawer__footnote {
    margin: 0.75rem 0 0;
    font-size: 0.78rem;
    color: var(--text-secondary, #94a3b8);
}

/* ---------- Cards, chips and actions ---------- */

.genomics-cards {
    display: flex;
    flex-direction: column;
    gap: 0.6rem;
    margin: 0;
    padding: 0;
    list-style: none;
}

.genomics-cards--compact {
    margin-top: 0.6rem;
}

.genomics-card {
    padding: 0.7rem 0.85rem;
    border: 1px solid var(--genomics-border);
    border-radius: var(--radius-sm);
    background: var(--genomics-surface);
}

.genomics-card__link {
    font-weight: 600;
    text-decoration: none;
}

.genomics-card__link:hover,
.genomics-card__link:focus-visible {
    text-decoration: underline;
}

.genomics-card__meta {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.4rem;
    margin-top: 0.35rem;
    font-size: 0.8rem;
}

.genomics-card__value {
    color: var(--text-secondary, #94a3b8);
}

.genomics-card__value--unavailable {
    font-style: italic;
}

.genomics-card__summary {
    margin: 0.45rem 0 0;
    font-size: 0.85rem;
}

.genomics-chip,
.genomics-action,
.genomics-call {
    display: inline-block;
    padding: 0.1rem 0.5rem;
    border: 1px solid currentColor;
    border-radius: 999px;
    font-size: 0.72rem;
    font-weight: 700;
    letter-spacing: 0.02em;
}

.genomics-chip--unknown { color: var(--genomics-severity-unknown); }
.genomics-chip--typical { color: var(--genomics-severity-typical); }
.genomics-chip--attention { color: var(--genomics-severity-attention); }
.genomics-chip--elevated { color: var(--genomics-severity-elevated); }
.genomics-chip--high,
.genomics-chip--very_high { color: var(--genomics-severity-high); }
.genomics-chip--low,
.genomics-chip--very_low { color: var(--genomics-severity-typical); }

.genomics-action--avoid { color: var(--genomics-action-avoid); }
.genomics-action--alternative { color: var(--genomics-action-alternative); }
.genomics-action--adjust { color: var(--genomics-action-adjust); }
.genomics-action--monitor { color: var(--genomics-action-monitor); }
.genomics-action--standard { color: var(--genomics-action-standard); }
.genomics-action--informational { color: var(--genomics-action-informational); }
.genomics-action--unresolved { color: var(--genomics-action-unresolved); }

/* Unresolved calls read as unavailable, never as a reassuring result. */
.genomics-call--called { color: var(--genomics-action-monitor); }
.genomics-call--reference { color: var(--genomics-action-standard); }
.genomics-call--unknown,
.genomics-call--no_call,
.genomics-call--not_tested {
    color: var(--genomics-action-unresolved);
    border-style: dashed;
}

.genomics-empty {
    margin: 0;
    padding: 0.85rem;
    border: 1px dashed var(--genomics-border);
    border-radius: var(--radius-sm);
    color: var(--text-secondary, #94a3b8);
    font-size: 0.88rem;
}

.genomics-empty--unresolved {
    border-color: var(--genomics-action-unresolved);
    color: inherit;
}

/* Report findings offered beside the empty plan editor. Deliberately quieter
   than a plan card: these are things to read, not commitments. */
.ki-card--suggestions {
    border: 1px dashed var(--genomics-border);
    border-radius: var(--radius-lg);
    padding: 1.25rem 1.5rem;
    margin-bottom: 1.5rem;
}

.ki-card__lead {
    margin: 0 0 0.85rem;
    color: var(--text-secondary, #94a3b8);
    font-size: 0.88rem;
}

.ki-suggestion-list {
    margin: 0;
    padding: 0;
    list-style: none;
    display: grid;
    gap: 0.5rem;
}

.ki-suggestion-list__item {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.5rem;
    font-size: 0.88rem;
}

.ki-suggestion-list__name {
    font-weight: 600;
}

.ki-suggestion-list__genes {
    color: var(--text-secondary, #94a3b8);
    font-size: 0.8rem;
}

.genomics-expander {
    margin-top: 0.75rem;
    border: 1px solid var(--genomics-border);
    border-radius: var(--radius-sm);
    padding: 0.5rem 0.75rem;
}

.genomics-expander__summary {
    cursor: pointer;
    font-size: 0.85rem;
    font-weight: 600;
}

/* ---------- Detail pages ---------- */

.genomics-detail {
    display: flex;
    flex-direction: column;
    gap: var(--genomics-gap);
    max-width: 60rem;
    margin: 0 auto;
    padding: 1.5rem 0;
}

.genomics-detail__breadcrumb {
    font-size: 0.85rem;
}

.genomics-detail__eyebrow {
    margin: 0;
    font-size: 0.78rem;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: var(--text-secondary, #94a3b8);
}

.genomics-detail__title {
    margin: 0.25rem 0 0;
    font-size: 1.75rem;
}

.genomics-detail__headline {
    margin: 0.5rem 0 0;
    font-size: 1.15rem;
    font-weight: 600;
}

.genomics-detail__badges {
    display: flex;
    flex-wrap: wrap;
    gap: 0.4rem;
    margin: 0.6rem 0 0;
}

.genomics-detail__section {
    padding: 1rem;
    border: 1px solid var(--genomics-border);
    border-radius: var(--radius);
    background: var(--genomics-surface);
}

.genomics-detail__section-title {
    margin: 0 0 0.75rem;
    font-size: 1.1rem;
}

.genomics-detail__facts {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(12rem, 1fr));
    gap: 0.75rem;
    margin: 0.75rem 0 0;
}

.genomics-detail__fact dt {
    margin: 0;
    font-size: 0.76rem;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    color: var(--text-secondary, #94a3b8);
}

.genomics-detail__fact dd {
    margin: 0.25rem 0 0;
    font-size: 1rem;
}

.genomics-detail__fact-value--unavailable {
    font-style: italic;
    color: var(--text-secondary, #94a3b8);
}

.genomics-detail__prose {
    margin: 0.75rem 0 0;
    line-height: 1.6;
}

.genomics-detail__prose--clinician {
    padding-left: 0.75rem;
    border-left: 2px solid var(--genomics-border);
    color: var(--text-secondary, #94a3b8);
}

.genomics-detail__note {
    margin: 0.75rem 0 0;
    font-size: 0.8rem;
    color: var(--text-secondary, #94a3b8);
}

.genomics-detail__list {
    margin: 0;
    padding-left: 1.1rem;
    line-height: 1.6;
}

.genomics-detail__external-hint {
    font-size: 0.78rem;
    color: var(--text-secondary, #94a3b8);
}

.genomics-distribution__track {
    position: relative;
    height: 0.6rem;
    border-radius: 999px;
    background: linear-gradient(
        90deg,
        var(--genomics-severity-typical),
        var(--genomics-severity-attention),
        var(--genomics-severity-high)
    );
}

.genomics-distribution__marker {
    position: absolute;
    top: 50%;
    width: 0.85rem;
    height: 0.85rem;
    border: 2px solid var(--body-bg, #0b1020);
    border-radius: 50%;
    background: #fff;
    transform: translate(-50%, -50%);
}

.genomics-distribution__scale {
    display: flex;
    justify-content: space-between;
    margin-top: 0.35rem;
    font-size: 0.75rem;
    color: var(--text-secondary, #94a3b8);
}

.genomics-recommendation {
    padding: 0.85rem;
    border: 1px solid var(--genomics-border);
    border-radius: var(--radius-sm);
}

.genomics-recommendation + .genomics-recommendation {
    margin-top: 0.75rem;
}

.genomics-recommendation__header {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.5rem;
}

/* ---------- Search ---------- */

.genomics-search {
    display: flex;
    flex-direction: column;
    gap: 0.35rem;
    margin-bottom: 0.75rem;
}

.genomics-search__label {
    font-size: 0.82rem;
    color: var(--text-secondary, #94a3b8);
}

.genomics-search__input {
    padding: 0.5rem 0.75rem;
    border: 1px solid var(--genomics-border);
    border-radius: var(--radius-sm);
    background: var(--genomics-surface);
    color: inherit;
}

.genomics-search__status {
    margin: 0;
    font-size: 0.78rem;
    color: var(--text-secondary, #94a3b8);
}

/* ---------- Risk-score index filters ---------- */

.genomics-filters {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(11rem, 1fr));
    gap: 0.6rem 0.75rem;
    align-items: end;
    margin-bottom: 1.25rem;
    padding: 0.85rem;
    border: 1px solid var(--genomics-border);
    border-radius: var(--radius-sm);
    background: var(--genomics-surface);
}

/* The search box earns more room than the four selects beside it. */
.genomics-filters__field--search {
    grid-column: 1 / -1;
}

.genomics-filters__field {
    display: flex;
    flex-direction: column;
    gap: 0.3rem;
    min-width: 0;
}

.genomics-filters__select {
    padding: 0.45rem 0.6rem;
    border: 1px solid var(--genomics-border);
    border-radius: var(--radius-sm);
    background: var(--genomics-surface);
    color: inherit;
    font: inherit;
}

.genomics-filters .genomics-search__status {
    grid-column: 1 / -1;
}

/* ---------- Tables ---------- */

.genomics-table__wrapper {
    overflow-x: auto;
}

.genomics-table__id {
    display: block;
    font-family: var(--font-mono, ui-monospace, monospace);
    font-size: 0.68rem;
    color: var(--text-secondary, #94a3b8);
}

.genomics-table__sub {
    display: block;
    font-size: 0.72rem;
    color: var(--text-secondary, #94a3b8);
}

.genomics-table__value {
    font-variant-numeric: tabular-nums;
    font-weight: 600;
}

/* Percentile as a bar as well as a number: 89 rows of bare decimals do not
   show which models sit at the top. */
.genomics-meter {
    display: block;
    width: 100%;
    min-width: 4rem;
    height: 0.35rem;
    margin-bottom: 0.25rem;
    border-radius: 999px;
    background: var(--genomics-border);
    overflow: hidden;
}

.genomics-meter__fill {
    display: block;
    height: 100%;
    border-radius: 999px;
    background: currentColor;
}

.genomics-meter__fill--typical { color: var(--genomics-severity-typical); }
.genomics-meter__fill--attention { color: var(--genomics-severity-attention); }
.genomics-meter__fill--elevated { color: var(--genomics-severity-elevated); }
.genomics-meter__fill--high { color: var(--genomics-severity-high); }
.genomics-meter__fill--unknown { color: var(--genomics-severity-unknown); }

.genomics-table {
    width: 100%;
    border-collapse: collapse;
    font-size: 0.85rem;
}

.genomics-table__caption {
    margin-bottom: 0.5rem;
    font-size: 0.78rem;
    text-align: left;
    color: var(--text-secondary, #94a3b8);
}

.genomics-table th,
.genomics-table td {
    padding: 0.45rem 0.6rem;
    border-bottom: 1px solid var(--genomics-border);
    text-align: left;
}

/* ---------- Responsive ---------- */

@media (max-width: 1024px) {
    .genomics__layout,
    .genomics__layout--catalog {
        grid-template-columns: 1fr;
    }
}

@media (max-width: 640px) {
    .genomics-marker__severity {
        display: none;
    }

    /* Tables collapse into labelled cards on narrow screens. */
    .genomics-table thead {
        display: none;
    }

    .genomics-table,
    .genomics-table tbody,
    .genomics-table tr,
    .genomics-table th,
    .genomics-table td {
        display: block;
        width: 100%;
    }

    .genomics-table tr {
        margin-bottom: 0.75rem;
        border: 1px solid var(--genomics-border);
        border-radius: var(--radius-sm);
    }

    .genomics-table td::before {
        content: attr(data-label) ": ";
        font-weight: 600;
        color: var(--text-secondary, #94a3b8);
    }
}

@media (prefers-reduced-motion: reduce) {
    .genomics-marker {
        transition: none;
    }

    .genomics-marker:hover,
    .genomics-marker:focus-visible {
        transform: translate(var(--genomics-marker-shift), -50%);
    }
}

/* ============================================
   CLINICIAN BRIEFING
   The ranked, cited reading of a chart. Built entirely on the shared
   custom properties above so it inherits both themes; the mockups' serif
   stack and light palette are deliberately not imported.
   ============================================ */

/* The site container caps content at 960px, which leaves the ranked column
   too narrow to read a claim and its evidence table side by side. The
   briefing widens its own container to the 1400px the EHR chart already
   uses, following .patient-portal__container--wide. */
.site-content .container:has(> .briefing),
.site-content .container:has(> .briefing-tabs),
.site-content .container:has(> .briefing-file) {
    max-width: 1400px;
}

.briefing-tabs {
    display: flex;
    flex-wrap: wrap;
    align-items: stretch;
    justify-content: space-between;
    gap: 0.5rem 1rem;
    margin-top: var(--briefing-gap);
    padding: 0.15rem 0 0;
    border-bottom: 1px solid var(--briefing-border);
}

.briefing-tabs__list {
    display: flex;
    flex-wrap: wrap;
    gap: 0.15rem;
    margin: 0;
    padding: 0;
    list-style: none;
}

.briefing-tabs__tab {
    display: inline-flex;
    align-items: center;
    padding: 0.7rem 0.95rem 0.6rem;
    border: none;
    border-bottom: 2px solid transparent;
    margin-bottom: -1px;
    background: transparent;
    color: var(--foreground-muted);
    font-size: 0.9rem;
    font-weight: 600;
    line-height: 1.3;
    text-decoration: none;
}

.briefing-tabs__tab:hover,
.briefing-tabs__tab:focus-visible {
    color: var(--brand-primary);
}

.briefing-tabs__tab:focus-visible {
    outline: 2px solid var(--brand-primary);
    outline-offset: 2px;
}

.briefing-tabs__tab--active {
    color: var(--brand-primary);
    border-bottom-color: var(--brand-primary);
}

.briefing-tabs__genie {
    align-self: center;
    display: inline-flex;
    align-items: center;
    margin-bottom: 0.25rem;
    padding: 0.32rem 0.7rem;
    border: 1px solid var(--briefing-border);
    border-radius: 999px;
    background: var(--background);
    color: var(--foreground);
    font: inherit;
    font-size: 0.8rem;
    font-weight: 600;
    line-height: 1.3;
    cursor: pointer;
}

.briefing-tabs__genie:hover,
.briefing-tabs__genie:focus-visible {
    border-color: var(--brand-primary);
    color: var(--brand-primary);
}

.briefing-tabs__genie:focus-visible {
    outline: 2px solid var(--brand-primary);
    outline-offset: 2px;
}

.briefing-file {
    margin-top: var(--briefing-gap);
    padding: 1.25rem 1.1rem 1.75rem;
    background: var(--briefing-surface);
    border: 1px solid var(--briefing-border);
    border-radius: var(--radius);
}

.briefing-share {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 0.85rem 1.25rem;
    margin: 0 0 1.1rem;
    padding: 0 0 1rem;
    border-bottom: 1px solid var(--briefing-border);
}

.briefing-share__brand {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    min-width: 0;
}

.briefing-share__logo {
    display: block;
    width: auto;
    height: 2.4rem;
    max-width: 8rem;
    object-fit: contain;
}

.briefing-share__kicker {
    margin: 0;
    font-size: 0.72rem;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: var(--foreground-muted);
}

.briefing-share__name {
    margin: 0.15rem 0 0;
    font-size: 1.05rem;
    font-weight: 650;
}

.briefing-share__download {
    display: inline-flex;
    align-items: center;
    padding: 0.55rem 0.95rem;
    border-radius: var(--radius-sm);
    background: var(--brand-primary);
    color: #fff;
    font-size: 0.9rem;
    font-weight: 600;
    text-decoration: none;
}

.briefing-share__download:hover,
.briefing-share__download:focus-visible {
    filter: brightness(1.05);
}

.briefing-share__download:focus-visible {
    outline: 2px solid var(--brand-primary);
    outline-offset: 2px;
}

/* Reports now mounts the genomics module and this block is what follows it:
   the deduplicated actionable-medication list. The header, title, lead and
   section rules went with the flat packet that used to restate the report. */
.briefing-packet {
    margin-top: 1.5rem;
}

.briefing-packet__hint {
    margin: 0.35rem 0 0;
    color: var(--foreground-muted);
    font-size: 0.95rem;
}

.briefing-packet__section-title {
    margin: 0 0 0.35rem;
    font-size: 1.05rem;
    font-weight: 650;
}

.briefing-file .ki-panel-content {
    max-width: none;
}

.briefing-file .ki-sidebar {
    top: 5.5rem;
}

.briefing__hint-link {
    display: inline;
    margin-left: 0.35rem;
    font-weight: 600;
    color: var(--brand-primary);
    text-decoration: none;
}

.briefing__hint-link:hover,
.briefing__hint-link:focus-visible {
    text-decoration: underline;
}

.briefing {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 22rem;
    gap: var(--briefing-gap);
    align-items: start;
    margin-top: var(--briefing-gap);
}

.briefing__main {
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: var(--briefing-gap);
}

.briefing__section-title {
    margin: 0 0 0.35rem;
    font-size: 1.05rem;
    font-weight: 650;
    letter-spacing: -0.01em;
    color: var(--foreground);
}

.briefing__hint {
    margin: 0 0 1rem;
    font-size: 0.83rem;
    line-height: 1.55;
    color: var(--foreground-muted);
    max-width: 74ch;
}

.briefing__block {
    background: var(--briefing-surface);
    border: 1px solid var(--briefing-border);
    border-radius: var(--radius);
    padding: 1.25rem 1.35rem;
}

.briefing__claims {
    display: flex;
    flex-direction: column;
    gap: 0.85rem;
}

.briefing__empty {
    margin: 0;
    font-size: 0.9rem;
    color: var(--foreground-muted);
}

/* --- The shape of this visit --- */

.briefing__shape {
    border-left: 3px solid var(--brand-primary);
    padding: 0.15rem 0 0.15rem 1.15rem;
}

.briefing__shape-line {
    margin: 0 0 0.5rem;
    font-size: 0.95rem;
    line-height: 1.6;
    color: var(--foreground-soft);
    max-width: 78ch;
}

.briefing__shape-line--lead {
    font-size: 1.1rem;
    font-weight: 550;
    color: var(--foreground);
}

/* --- Provenance chips --- */

.briefing-cite {
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;
    padding: 0.1rem 0.5rem;
    border-radius: 999px;
    border: 1px solid currentColor;
    font-size: 0.68rem;
    font-weight: 600;
    letter-spacing: 0.02em;
    text-transform: uppercase;
    white-space: nowrap;
}

.briefing-cite__dot {
    width: 0.4rem;
    height: 0.4rem;
    border-radius: 50%;
    background: currentColor;
}

.briefing-cite--report { color: var(--briefing-cite-report); }
.briefing-cite--practice { color: var(--briefing-cite-practice); }
.briefing-cite--reasoning { color: var(--briefing-cite-reasoning); }

/* --- Claims --- */

.briefing-claim {
    background: var(--briefing-surface-raised);
    border: 1px solid var(--briefing-border);
    border-left: 3px solid var(--briefing-quiet);
    border-radius: var(--radius-sm);
    padding: 0.9rem 1rem;
}

/* Rank 1 and 2 are live prescribing changes, so they carry the only
   attention colour on the page. */
.briefing-claim--rank-1,
.briefing-claim--rank-2 { border-left-color: var(--briefing-flag); }
.briefing-claim--rank-3 { border-left-color: var(--warning-text); }
.briefing-claim--rank-4 { border-left-color: var(--briefing-cite-report); }
.briefing-claim--rank-5 { border-left-color: var(--briefing-quiet); }

/* The collapsed row. Everything a clinician needs to decide whether to open
   it: the sentence, where it came from, and why it ranked. */
.briefing-claim__summary {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 0.85rem;
    flex-wrap: wrap;
    cursor: pointer;
    list-style: none;
}

.briefing-claim__summary::-webkit-details-marker { display: none; }

.briefing-claim__summary:focus-visible {
    outline: 2px solid var(--briefing-cite-reasoning);
    outline-offset: 3px;
    border-radius: var(--radius-sm);
}

.briefing-claim__marks {
    display: inline-flex;
    align-items: center;
    gap: 0.6rem;
    flex-wrap: wrap;
    flex-shrink: 0;
}

.briefing-claim__rank {
    margin: 0;
    font-size: 0.7rem;
    font-weight: 600;
    letter-spacing: 0.03em;
    text-transform: uppercase;
    color: var(--foreground-muted);
}

.briefing-claim__headline {
    margin: 0;
    flex: 1 1 22ch;
    font-size: 0.98rem;
    font-weight: 600;
    line-height: 1.45;
    color: var(--foreground);
}

/* A chevron rather than a "show more": the row is the control, so the
   affordance belongs on the sentence, not beside it. */
.briefing-claim__headline::before {
    content: '';
    display: inline-block;
    width: 0.34rem;
    height: 0.34rem;
    margin-right: 0.55rem;
    vertical-align: middle;
    border-right: 1.5px solid var(--foreground-muted);
    border-bottom: 1.5px solid var(--foreground-muted);
    transform: rotate(-45deg);
    transition: transform 0.15s ease;
}

.briefing-claim[open] > .briefing-claim__summary .briefing-claim__headline::before {
    transform: rotate(45deg);
}

.briefing-claim__body {
    margin-top: 0.65rem;
    padding-top: 0.65rem;
    border-top: 1px solid var(--briefing-rule);
}

@media (prefers-reduced-motion: reduce) {
    .briefing-claim__headline::before { transition: none; }
}

.briefing-claim__detail {
    margin: 0 0 0.5rem;
    font-size: 0.86rem;
    line-height: 1.55;
    color: var(--foreground-soft);
    max-width: 74ch;
}

.briefing-claim__action {
    margin: 0;
    font-size: 0.86rem;
    line-height: 1.5;
    color: var(--foreground-soft);
}

.briefing-claim__action-label {
    display: block;
    font-size: 0.68rem;
    font-weight: 600;
    letter-spacing: 0.03em;
    text-transform: uppercase;
    color: var(--foreground-muted);
}

/* --- Adjacent (below-threshold) notes --- */

.briefing-adjacent {
    margin: 0.7rem 0 0;
    padding-left: 0.7rem;
    border-left: 2px dashed var(--briefing-quiet);
    font-size: 0.8rem;
    line-height: 1.55;
    color: var(--foreground-muted);
    max-width: 74ch;
}

.briefing-adjacent__label {
    display: block;
    font-size: 0.68rem;
    font-weight: 600;
    letter-spacing: 0.03em;
    text-transform: uppercase;
    color: var(--foreground-muted);
}

/* --- Evidence drawer --- */

.briefing-prov {
    margin-top: 0.7rem;
    border-top: 1px solid var(--briefing-rule);
    padding-top: 0.5rem;
}

.briefing-prov__summary {
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    cursor: pointer;
    font-size: 0.76rem;
    font-weight: 600;
    color: var(--brand-accent);
    list-style: none;
}

.briefing-prov__summary::-webkit-details-marker { display: none; }

.briefing-prov__summary::before {
    content: "\203A";
    display: inline-block;
    transition: transform 0.15s ease;
}

.briefing-prov[open] > .briefing-prov__summary::before { transform: rotate(90deg); }

.briefing-prov__summary:focus-visible {
    outline: 2px solid var(--brand-primary);
    outline-offset: 2px;
    border-radius: 2px;
}

.briefing-prov__count {
    padding: 0 0.4rem;
    border-radius: 999px;
    background: var(--surface-raised);
    font-size: 0.68rem;
    color: var(--foreground-muted);
}

.briefing-prov__body { padding-top: 0.6rem; }

.briefing-prov__table {
    width: 100%;
    border-collapse: collapse;
    font-size: 0.78rem;
}

.briefing-prov__table th {
    text-align: left;
    padding: 0.3rem 0.6rem 0.3rem 0;
    font-size: 0.66rem;
    font-weight: 600;
    letter-spacing: 0.03em;
    text-transform: uppercase;
    color: var(--foreground-muted);
    border-bottom: 1px solid var(--briefing-rule);
}

.briefing-prov__table td {
    padding: 0.5rem 0.6rem 0.5rem 0;
    vertical-align: top;
    border-bottom: 1px solid var(--briefing-rule);
    color: var(--foreground-soft);
}

.briefing-prov__table tr:last-child td { border-bottom: none; }

.briefing-prov__label {
    display: block;
    font-weight: 600;
    color: var(--foreground);
}

.briefing-prov__open {
    display: inline-block;
    margin: 0.2rem 0 0.15rem;
    font-size: 0.78rem;
    font-weight: 600;
    color: var(--brand-primary);
    text-decoration: none;
}

.briefing-prov__open:hover,
.briefing-prov__open:focus-visible {
    text-decoration: underline;
}

.briefing-prov__locator {
    display: block;
    margin-top: 0.15rem;
    font-family: var(--font-mono, ui-monospace, SFMono-Regular, Menlo, monospace);
    font-size: 0.68rem;
    color: var(--foreground-muted);
    word-break: break-all;
}

.briefing-prov__quote {
    font-style: italic;
    line-height: 1.5;
}

.briefing-prov__empty { color: var(--foreground-muted); }

.briefing-prov__limits {
    margin-top: 0.8rem;
    padding: 0.6rem 0.75rem;
    background: var(--surface-sunken);
    border-radius: var(--radius-sm);
}

.briefing-prov__limits-title {
    margin: 0 0 0.35rem;
    font-size: 0.68rem;
    font-weight: 600;
    letter-spacing: 0.03em;
    text-transform: uppercase;
    color: var(--foreground-muted);
}

.briefing-prov__limits-list {
    margin: 0;
    padding-left: 1.1rem;
    font-size: 0.76rem;
    line-height: 1.55;
    color: var(--foreground-muted);
}

/* --- Say these out loud --- */

.briefing__say-list {
    display: flex;
    flex-direction: column;
    gap: 0.8rem;
}

.briefing-say {
    border-left: 3px solid var(--foreground);
    padding: 0.2rem 0 0.2rem 0.9rem;
}

.briefing-say--done { opacity: 0.55; }

.briefing-say--done .briefing-say__line {
    text-decoration: line-through;
    text-decoration-thickness: 1px;
}

.briefing-say__top {
    display: flex;
    align-items: flex-start;
    gap: 0.65rem;
}

.briefing-say__check {
    margin-top: 0.25rem;
    width: 1rem;
    height: 1rem;
    flex: 0 0 auto;
    accent-color: var(--brand-primary);
    cursor: pointer;
}

.briefing-say__body { min-width: 0; }

.briefing-say__line {
    display: block;
    margin: 0 0 0.25rem;
    font-size: 0.95rem;
    font-weight: 600;
    line-height: 1.45;
    color: var(--foreground);
    cursor: pointer;
}

.briefing-say__why {
    margin: 0 0 0.4rem;
    font-size: 0.79rem;
    line-height: 1.5;
    color: var(--foreground-muted);
    max-width: 74ch;
}

.briefing-say__why-label {
    font-weight: 600;
    text-transform: uppercase;
    font-size: 0.66rem;
    letter-spacing: 0.03em;
    margin-right: 0.35rem;
}

/* --- Medication table --- */

.briefing-meds {
    margin: 0;
    padding: 0;
    list-style: none;
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
}

.briefing-meds__entry {
    border: 1px solid var(--briefing-border);
    border-radius: var(--radius-sm);
    padding: 0.75rem 0.9rem;
}

.briefing-meds__entry--flagged {
    border-color: rgba(var(--destructive-rgb), 0.35);
    background: rgba(var(--destructive-rgb), 0.05);
}

.briefing-meds__head {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 0.75rem;
    flex-wrap: wrap;
}

.briefing-meds__marks {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    flex-wrap: wrap;
}

.briefing-meds__body { margin-top: 0.65rem; }

.briefing-meds__drug {
    font-size: 0.95rem;
    font-weight: 650;
    color: var(--foreground);
    margin-right: 0.5rem;
}

.briefing-meds__sub {
    font-size: 0.78rem;
    color: var(--foreground-muted);
}

.briefing-meds__tag {
    display: inline-block;
    padding: 0.15rem 0.5rem;
    border-radius: var(--radius-sm);
    font-size: 0.72rem;
    font-weight: 600;
}

.briefing-meds__tag--flag {
    color: var(--briefing-flag);
    background: rgba(var(--destructive-rgb), 0.12);
}

.briefing-meds__tag--quiet {
    color: var(--foreground-muted);
    background: var(--surface-raised);
}

.briefing-meds__quiet {
    margin: 0;
    font-size: 0.83rem;
    line-height: 1.55;
    color: var(--foreground-muted);
    max-width: 68ch;
}

.briefing__gap { margin-top: 1rem; }

.briefing__gap-title {
    margin: 0 0 0.5rem;
    font-size: 0.9rem;
    font-weight: 650;
    color: var(--foreground);
}

/* --- Right rail --- */

.briefing__rail {
    display: flex;
    flex-direction: column;
    gap: 1rem;
    position: sticky;
    top: 1rem;
}

.briefing-rail__card {
    background: var(--briefing-surface);
    border: 1px solid var(--briefing-border);
    border-radius: var(--radius);
    padding: 0.9rem 1rem;
}

.briefing-rail__card--limits { background: var(--surface-sunken); }

.briefing-rail__title {
    margin: 0 0 0.35rem;
    font-size: 0.78rem;
    font-weight: 650;
    letter-spacing: 0.02em;
    text-transform: uppercase;
    color: var(--foreground);
}

.briefing-rail__note {
    margin: 0 0 0.6rem;
    font-size: 0.75rem;
    line-height: 1.5;
    color: var(--foreground-muted);
}

.briefing-rail__list {
    margin: 0;
    padding: 0;
    list-style: none;
}

.briefing-rail__item {
    padding: 0.4rem 0;
    border-bottom: 1px solid var(--briefing-rule);
}

.briefing-rail__item:last-child { border-bottom: none; }

.briefing-rail__item-name {
    display: block;
    font-size: 0.83rem;
    font-weight: 600;
    color: var(--foreground);
}

.briefing-rail__item-sub {
    display: block;
    font-size: 0.74rem;
    line-height: 1.45;
    color: var(--foreground-muted);
}

.briefing-rail__item--empty .briefing-rail__item-name {
    font-weight: 400;
    color: var(--foreground-muted);
}

.briefing-plan {
    margin: 0;
    padding: 0;
    list-style: none;
    counter-reset: briefing-plan;
}

.briefing-plan__item {
    counter-increment: briefing-plan;
    display: grid;
    grid-template-columns: 1.6rem minmax(0, 1fr) auto;
    gap: 0.55rem 0.75rem;
    align-items: start;
    padding: 0.7rem 0;
    border-bottom: 1px solid var(--briefing-rule);
    font-size: 0.9rem;
    line-height: 1.5;
}

.briefing-plan__item:last-child { border-bottom: none; }

.briefing-plan__item::before {
    content: counter(briefing-plan);
    font-weight: 650;
    color: var(--brand-primary);
}

.briefing-plan__text { min-width: 0; }

.briefing-plan__notes {
    margin-top: 1rem;
    padding-top: 0.85rem;
    border-top: 1px solid var(--briefing-rule);
}

.briefing-plan__notes-title {
    margin: 0 0 0.35rem;
    font-size: 0.78rem;
    font-weight: 650;
    letter-spacing: 0.02em;
    text-transform: uppercase;
    color: var(--foreground-muted);
}

.briefing-plan__notes-text {
    margin: 0;
    font-size: 0.88rem;
    line-height: 1.5;
    color: var(--foreground-soft);
}

.briefing-plan__rail {
    list-style: none;
    padding: 0;
}

.briefing-rail__field { margin-bottom: 0.6rem; }

.briefing-rail__field-label {
    display: block;
    font-size: 0.68rem;
    font-weight: 600;
    letter-spacing: 0.03em;
    text-transform: uppercase;
    color: var(--foreground-muted);
}

.briefing-rail__field-value {
    margin: 0.15rem 0 0;
    font-size: 0.82rem;
    line-height: 1.5;
    color: var(--foreground-soft);
}

.briefing-rail__limits {
    margin: 0;
    padding-left: 1.05rem;
    font-size: 0.74rem;
    line-height: 1.55;
    color: var(--foreground-muted);
}

.briefing-rail__limits li { margin-bottom: 0.3rem; }

/* --- Nav toggle --- */

.briefing-toggle {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 2.25rem;
    height: 2.25rem;
    border-radius: var(--radius-sm);
    border: 1px solid transparent;
    color: var(--foreground-muted);
    background: transparent;
    transition: color 0.15s ease, background 0.15s ease, border-color 0.15s ease;
}

.briefing-toggle:hover,
.briefing-toggle:focus-visible {
    color: var(--brand-accent);
    border-color: var(--card-hover-border);
    background: var(--surface-raised);
}

.briefing-toggle:focus-visible {
    outline: 2px solid var(--brand-primary);
    outline-offset: 2px;
}

.briefing-toggle--active {
    color: var(--brand-primary);
    background: rgba(var(--brand-primary-rgb), 0.14);
}

.briefing-toggle__icon {
    width: 1.15rem;
    height: 1.15rem;
}

@media (max-width: 1080px) {
    .briefing { grid-template-columns: minmax(0, 1fr); }

    .briefing__rail { position: static; }
}

@media (max-width: 720px) {
    .briefing-tabs {
        flex-direction: column;
        align-items: stretch;
    }

    .briefing-tabs__genie {
        align-self: flex-start;
    }

    .briefing-prov__table,
    .briefing-prov__table tbody,
    .briefing-prov__table tr,
    .briefing-prov__table td {
        display: block;
    }

    .briefing-prov__table thead { display: none; }

    .briefing-prov__table tr {
        padding: 0.5rem 0;
        border-bottom: 1px solid var(--briefing-rule);
    }

    .briefing-prov__table td { border-bottom: none; padding: 0.15rem 0; }
}

@media (prefers-reduced-motion: reduce) {
    .briefing-prov__summary::before,
    .briefing-toggle { transition: none; }
}

/* --- Patient summary film ---
   Three modes: the strip in the briefing, the clinician preview modal, and
   patient mode. Patient mode is a full-inset overlay *and* a fullscreen
   request: the overlay is what actually hides the briefing, so the feature
   still works on iOS Safari, which has no element fullscreen. */

.briefing-film {
    background: var(--briefing-surface);
    border: 1px solid var(--briefing-border);
    border-radius: var(--radius);
    padding: 1.1rem 1.25rem;
}

.briefing-film__strip {
    display: flex;
    gap: 1.1rem;
    align-items: flex-start;
}

.briefing-film__poster {
    position: relative;
    flex: 0 0 auto;
    width: 13rem;
    aspect-ratio: 16 / 9;
    padding: 0;
    border: 1px solid var(--briefing-border);
    border-radius: var(--radius-sm);
    overflow: hidden;
    background: var(--surface-sunken);
    cursor: pointer;
}

.briefing-film__poster:focus-visible {
    outline: 2px solid var(--brand-primary);
    outline-offset: 2px;
}

.briefing-film__poster-img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

.briefing-film__play {
    position: absolute;
    inset: 0;
    display: grid;
    place-items: center;
    color: #fff;
    background: rgba(0, 0, 0, 0.35);
    transition: background 0.15s ease;
}

.briefing-film__poster:hover .briefing-film__play { background: rgba(0, 0, 0, 0.15); }

.briefing-film__play svg { width: 2.25rem; height: 2.25rem; }

.briefing-film__duration {
    position: absolute;
    right: 0.4rem;
    bottom: 0.4rem;
    padding: 0.05rem 0.35rem;
    border-radius: 0.25rem;
    background: rgba(0, 0, 0, 0.72);
    color: #fff;
    font-size: 0.68rem;
    font-weight: 600;
}

.briefing-film__body { min-width: 0; flex: 1; }

/* Amber is the default because the common case — a film nobody has approved —
   is genuinely waiting on the clinician. The modifiers exist so it does not
   stay amber once it is not: a status line that shouts in every state stops
   carrying a signal, and the two that matter (unapproved, stale) lose their
   emphasis to the four that do not. */
.briefing-film__state {
    margin: 0 0 0.2rem;
    font-size: 0.78rem;
    font-weight: 650;
    letter-spacing: 0.02em;
    text-transform: uppercase;
    color: var(--warning-text);
}

/* Nothing is wrong and nothing is ready. */
.briefing-film__state--idle {
    color: var(--foreground-muted);
}

/* Approved and current: the settled state, and the only one with nothing to
   ask of the clinician. */
.briefing-film__state--ready {
    color: var(--success-text);
}

.briefing-film__state--failed {
    color: var(--destructive-text);
}

.briefing-film__lede {
    margin: 0 0 0.5rem;
    font-size: 0.88rem;
    line-height: 1.5;
    color: var(--foreground-soft);
    max-width: 68ch;
}

/* The empty poster stands in before a film exists, so the strip keeps its
   shape and the section does not jump when one arrives. */
.briefing-film__poster--empty {
    display: grid;
    place-items: center;
    cursor: default;
    border-style: dashed;
    opacity: 0.55;
}

/* A failure code, not a message: a generator error can quote the script it
   choked on, and the script is the patient's findings. */
.briefing-film__failure {
    margin: 0 0 0.6rem;
    padding: 0.3rem 0.55rem;
    border-radius: var(--radius-sm);
    border: 1px solid var(--destructive-text);
    color: var(--destructive-text);
    font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
    font-size: 0.76rem;
    display: inline-block;
}

/* Says out loud that approval is what stands between this film and the
   patient, so the gate reads as clinical rather than as a disabled button. */
.briefing-film__gate {
    margin: 0.55rem 0 0;
    font-size: 0.78rem;
    line-height: 1.5;
    color: var(--warning-text);
}

.briefing-film__error {
    margin: 0.55rem 0 0;
    font-size: 0.8rem;
    color: var(--destructive-text);
}

.briefing-film__spinner {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    font-size: 0.85rem;
    font-weight: 600;
    color: var(--foreground-muted);
}

.briefing-film__spinner::before {
    content: "";
    width: 0.85rem;
    height: 0.85rem;
    border: 2px solid rgba(var(--brand-primary-rgb), 0.25);
    border-top-color: var(--brand-primary);
    border-radius: 50%;
    animation: briefing-film-spin 0.8s linear infinite;
}

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

.briefing-film__coverage {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(15rem, 1fr));
    gap: 0.9rem;
    margin-bottom: 0.8rem;
    padding: 0.7rem 0.8rem;
    background: var(--surface-sunken);
    border-radius: var(--radius-sm);
}

.briefing-film__coverage-title {
    margin: 0 0 0.3rem;
    font-size: 0.68rem;
    font-weight: 650;
    letter-spacing: 0.03em;
    text-transform: uppercase;
    color: var(--foreground-muted);
}

.briefing-film__coverage-list {
    margin: 0;
    padding-left: 1rem;
    font-size: 0.78rem;
    line-height: 1.5;
    color: var(--foreground-soft);
}

.briefing-film__coverage-list li { margin-bottom: 0.2rem; }

.briefing-film__coverage-reason {
    display: block;
    font-size: 0.72rem;
    color: var(--foreground-muted);
}

.briefing-film__coverage-more { color: var(--foreground-muted); list-style: none; margin-left: -1rem; }

.briefing-film__coverage-foot {
    margin: 0.4rem 0 0;
    font-size: 0.7rem;
    color: var(--foreground-muted);
}

.briefing-film__actions {
    display: flex;
    gap: 0.6rem;
    flex-wrap: wrap;
}

/* --- Preview modal --- */

.briefing-film__modal {
    position: fixed;
    inset: 0;
    /* Above .site-header (z-index 1000), or the backdrop dims the page while
       the nav floats on top of it. */
    z-index: 1100;
    display: grid;
    place-items: center;
    padding: 1.5rem;
    background: rgba(0, 0, 0, 0.7);
}

.briefing-film__modal[hidden] { display: none; }

.briefing-film__modal-panel {
    width: min(64rem, 100%);
    max-height: 90vh;
    overflow: auto;
    padding: 1rem 1.15rem 1.25rem;
    background: var(--background-elevated);
    border: 1px solid var(--card-border);
    border-radius: var(--radius);
    box-shadow: var(--shadow-lg);
}

.briefing-film__modal-head {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 1rem;
}

.briefing-film__modal-title {
    margin: 0;
    font-size: 0.95rem;
    font-weight: 650;
    color: var(--foreground);
}

.briefing-film__modal-note {
    margin: 0.2rem 0 0.8rem;
    font-size: 0.82rem;
    color: var(--foreground-muted);
}

.briefing-film__close {
    flex: 0 0 auto;
    width: 2rem;
    height: 2rem;
    border: 1px solid var(--card-border);
    border-radius: var(--radius-sm);
    background: transparent;
    color: var(--foreground-muted);
    font-size: 1.25rem;
    line-height: 1;
    cursor: pointer;
}

.briefing-film__close:hover { color: var(--foreground); }

.briefing-film__close:focus-visible {
    outline: 2px solid var(--brand-primary);
    outline-offset: 2px;
}

.briefing-film__video {
    width: 100%;
    max-height: 70vh;
    border-radius: var(--radius-sm);
    background: #000;
    display: block;
}

/* --- Patient mode ---
   Opaque and fixed to the viewport so the briefing is gone whether or not the
   fullscreen request was honoured. */

.briefing-film__patient {
    position: fixed;
    inset: 0;
    /* Above .site-header (z-index 1000). Patient mode must hide the clinician's
       nav and account menu, not just the briefing body — their email and a
       log-out link are not part of a patient's summary. */
    z-index: 1100;
    /* Grid, not flex: definite row tracks give the video a resolvable height,
       so it letterboxes instead of overflowing at its intrinsic 1920x1080. */
    display: grid;
    grid-template-rows: auto minmax(0, 1fr) auto;
    gap: 0.75rem;
    padding: 1rem 1.25rem 1.5rem;
    background: var(--background);
}

.briefing-film__patient[hidden] { display: none; }

.briefing-film__patient:fullscreen { padding: 1.25rem 2rem 2rem; }

.briefing-film__patient::backdrop { background: var(--background); }

.briefing-film__patient-bar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
}

.briefing-film__patient-label {
    margin: 0;
    font-size: 0.78rem;
    font-weight: 600;
    letter-spacing: 0.02em;
    text-transform: uppercase;
    color: var(--foreground-muted);
}

.briefing-film__video--patient {
    width: 100%;
    height: 100%;
    min-height: 0;
    max-height: none;
    object-fit: contain;
    border-radius: 0;
    background: transparent;
}

.briefing-film__patient-caption {
    margin: 0;
    text-align: center;
    font-size: 0.8rem;
    color: var(--foreground-muted);
}

/* Stop the page behind a modal from scrolling under it. */
body.briefing-film-open { overflow: hidden; }

@media (max-width: 720px) {
    .briefing-film__strip { flex-direction: column; }

    .briefing-film__poster { width: 100%; }
}

@media (prefers-reduced-motion: reduce) {
    .briefing-film__play { transition: none; }
    .briefing-film__spinner::before { animation: none; }
}

/* ==========================================================================
   Genie — the refinement layer on the briefing
   ==========================================================================
   Deliberately a drawer rather than a column. The briefing answers the
   question first; Genie is what you open when the page did not. Citation
   chips reuse the provenance palette from .briefing-cite so a source looks
   the same whether the model named it or the ranking did.
   ========================================================================== */

.genie__launcher {
    position: fixed;
    right: 1.5rem;
    bottom: 1.5rem;
    z-index: 900;
    display: inline-flex;
    align-items: center;
    gap: 0.55rem;
    padding: 0.7rem 1.15rem;
    border: 1px solid var(--briefing-border);
    border-radius: 999px;
    background: var(--surface-raised, #14141c);
    color: var(--text-primary);
    font-family: var(--font-heading, inherit);
    font-size: 0.9rem;
    font-weight: 600;
    letter-spacing: 0.01em;
    cursor: pointer;
    box-shadow: 0 12px 32px rgba(0, 0, 0, 0.35);
    transition: transform 0.15s ease, border-color 0.15s ease;
}

.genie__launcher:hover {
    transform: translateY(-1px);
    border-color: var(--briefing-cite-reasoning);
}

.genie__launcher:focus-visible {
    outline: 2px solid var(--briefing-cite-reasoning);
    outline-offset: 2px;
}

.genie__launcher-mark {
    width: 0.6rem;
    height: 0.6rem;
    border-radius: 50%;
    background: var(--briefing-cite-reasoning);
    box-shadow: 0 0 0 3px rgba(167, 139, 250, 0.18);
}

.genie__scrim {
    position: fixed;
    inset: 0;
    z-index: 1050;
    background: rgba(4, 4, 10, 0.55);
}

.genie__drawer {
    position: fixed;
    top: 0;
    right: 0;
    bottom: 0;
    z-index: 1060;
    display: grid;
    grid-template-rows: auto auto minmax(0, 1fr) auto auto;
    width: min(30rem, 100vw);
    padding: 1.25rem;
    gap: 0.9rem;
    border-left: 1px solid var(--briefing-border);
    /* Opaque and theme-following. The drawer sits over a scrim, so anything
       translucent here reads as a wash of the page behind it. */
    background: var(--background);
    color: var(--foreground);
    box-shadow: -24px 0 60px rgba(0, 0, 0, 0.45);
}

.genie__drawer[hidden],
.genie__scrim[hidden] { display: none; }

.genie__header {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 1rem;
}

.genie__title {
    margin: 0;
    font-size: 1.15rem;
    letter-spacing: 0.01em;
}

.genie__subtitle {
    margin: 0.25rem 0 0;
    color: var(--briefing-quiet);
    font-size: 0.85rem;
}

.genie__close {
    border: 1px solid var(--briefing-border);
    border-radius: 0.5rem;
    background: transparent;
    color: var(--text-secondary, #94a3b8);
    font-size: 1.25rem;
    line-height: 1;
    padding: 0.25rem 0.55rem;
    cursor: pointer;
}

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

/* Scope is stated before the first question, not after a bad answer. */
.genie__scope {
    padding: 0.85rem 1rem;
    border: 1px solid var(--briefing-rule);
    border-radius: 0.65rem;
    background: var(--briefing-surface);
}

.genie__scope-title {
    margin: 0 0 0.5rem;
    font-size: 0.72rem;
    font-weight: 600;
    letter-spacing: 0.09em;
    text-transform: uppercase;
    color: var(--briefing-quiet);
}

.genie__scope-list {
    display: flex;
    flex-wrap: wrap;
    gap: 0.35rem;
    margin: 0;
    padding: 0;
    list-style: none;
}

.genie__scope-item {
    padding: 0.15rem 0.5rem;
    border: 1px solid var(--briefing-rule);
    border-radius: 999px;
    font-size: 0.75rem;
    color: var(--text-secondary, #94a3b8);
}

.genie__scope-empty,
.genie__scope-note {
    margin: 0.6rem 0 0;
    font-size: 0.78rem;
    line-height: 1.45;
    color: var(--briefing-quiet);
}

.genie__thread {
    overflow-y: auto;
    display: flex;
    flex-direction: column;
    gap: 0.9rem;
    padding-right: 0.25rem;
}

.genie__empty-lede {
    margin: 0 0 0.75rem;
    font-size: 0.88rem;
    color: var(--text-secondary, #94a3b8);
}

.genie__suggestions {
    display: flex;
    flex-direction: column;
    gap: 0.4rem;
    margin: 0;
    padding: 0;
    list-style: none;
}

.genie__suggestion {
    width: 100%;
    text-align: left;
    padding: 0.55rem 0.7rem;
    border: 1px solid var(--briefing-rule);
    border-radius: 0.55rem;
    background: var(--briefing-surface);
    color: var(--text-primary);
    font-size: 0.83rem;
    line-height: 1.4;
    cursor: pointer;
}

.genie__suggestion:hover { border-color: var(--briefing-cite-reasoning); }

.genie__turn-role {
    margin: 0 0 0.25rem;
    font-size: 0.68rem;
    font-weight: 600;
    letter-spacing: 0.09em;
    text-transform: uppercase;
    color: var(--briefing-quiet);
}

.genie__turn-body {
    font-size: 0.88rem;
    line-height: 1.6;
    white-space: pre-wrap;
}

.genie__turn--user .genie__turn-body {
    padding: 0.6rem 0.75rem;
    border-radius: 0.55rem;
    background: var(--briefing-surface-raised);
}

.genie__turn--error .genie__turn-body { color: var(--briefing-flag); }

/* Same three provenance colours as the claim drawers. A chip means Python
   registered the source; the model cannot mint a new colour. */
.genie__cite {
    display: inline-block;
    margin: 0 0.2rem;
    padding: 0.05rem 0.45rem;
    border-radius: 999px;
    border: 1px solid currentColor;
    font-size: 0.66rem;
    font-weight: 600;
    letter-spacing: 0.05em;
    text-transform: uppercase;
    vertical-align: baseline;
    cursor: help;
}

.genie__cite--report { color: var(--briefing-cite-report); }
.genie__cite--practice { color: var(--briefing-cite-practice); }
.genie__cite--reasoning { color: var(--briefing-cite-reasoning); }

.genie__composer {
    display: flex;
    gap: 0.5rem;
    align-items: flex-end;
}

.genie__input {
    flex: 1;
    resize: none;
    min-height: 2.6rem;
    max-height: 8rem;
    padding: 0.6rem 0.75rem;
    border: 1px solid var(--briefing-border);
    border-radius: 0.55rem;
    background: var(--briefing-surface);
    color: var(--text-primary);
    font-family: inherit;
    font-size: 0.88rem;
}

.genie__input:focus-visible {
    outline: 2px solid var(--briefing-cite-reasoning);
    outline-offset: 1px;
}

.genie__send {
    padding: 0.65rem 1.1rem;
    border: 1px solid var(--briefing-cite-reasoning);
    border-radius: 0.55rem;
    background: transparent;
    color: var(--briefing-cite-reasoning);
    font-weight: 600;
    font-size: 0.85rem;
    cursor: pointer;
}

.genie__send:disabled { opacity: 0.5; cursor: not-allowed; }

.genie__footnote {
    margin: 0;
    font-size: 0.72rem;
    color: var(--briefing-quiet);
}

/* Patient mode owns the screen. Nothing clinician-facing may sit above it. */
body.briefing-film-open .genie__launcher { display: none; }

@media (max-width: 640px) {
    .genie__drawer { width: 100vw; }
    .genie__launcher {
        right: 1rem;
        bottom: 1rem;
    }
}

@media (prefers-reduced-motion: reduce) {
    .genie__launcher { transition: none; }
}