: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;

    /* 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);
}

/* ============================================
   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;
    --foreground-muted: #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-treatment-content,
[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"] .finding-item:hover {
    background: rgba(0, 0, 0, 0.06);
}

[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;
}

.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;
}

.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: #fff;
    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: 90px; /* 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;
}

.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;
}

.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: 999;
}

.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__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);
}

.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;
}

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

.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);
}

.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;
    gap: 2rem;
}

.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(12rem, 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 h1,
.manage-users__header h2 {
    font-weight: 700;
    margin-bottom: 0.5rem;
    color: var(--foreground);
}

.manage-users__grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(240px, 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;
}

.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);
}

.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: flex;
    flex-wrap: wrap;
    gap: 1rem;
    align-items: flex-end;
    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);
}

.manage-patients__upload .form-field {
    flex: 1 1 260px;
    margin: 0;
}

.manage-patients__grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(240px, 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 table {
    width: 100%;
    border-collapse: collapse;
    background: rgba(255, 255, 255, 0.02);
    border-radius: var(--radius);
    overflow: hidden;
}

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

.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);
}

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

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

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

/* 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: repeat(auto-fit, minmax(280px, 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;
}

.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__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__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__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;
}

.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: #e2e8f0;
}

.treatment-plan-content p:last-child {
    margin-bottom: 0;
}

.treatment-plan-content strong {
    color: #fff;
    font-weight: 600;
}

.treatment-plan-content em {
    color: #94a3b8;
    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: #cbd5e1;
}

.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: #94a3b8;
}

.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: white;
    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: #fbbf24;
}

/* PGx Result Text - Dark Theme Overrides for embedded HTML content */
.pgx-result-text {
    font-size: 0.875rem;
    color: #cbd5e1;
    line-height: 1.6;
}

.pgx-result-text p {
    margin: 0 0 0.5rem;
    color: #cbd5e1 !important;
}

.pgx-result-text p:last-child {
    margin-bottom: 0;
}

.pgx-result-text span {
    color: #cbd5e1 !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: #cbd5e1 !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: #f59e0b !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: #a78bfa !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;
}

.body-node:hover {
    transform: 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 */
.body-node--brain {
    top: 15%;
    left: 49%;
    transform: translateX(-50%);
}

.body-node--heart {
    top: 28%;
    left: 51%;
    transform: translateX(-50%);
}

.body-node--liver {
    top: 35%;
    left: 45%;
    transform: translateX(-50%);
}

.body-node--gut {
    top: 42%;
    left: 50%;
    transform: translateX(-50%);
}

.body-node--joints {
    top: 70%;
    left: 52%;
    transform: translateX(-50%);
}

.body-node--muscle {
    top: 55%;
    left: 50%;
    transform: translateX(-50%);
}

.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);
}

/* ====================================
   Mode Toggle Component
   ==================================== */
.mode-toggle {
    display: inline-flex;
    gap: 0.25rem;
    padding: 0.25rem;
    background: rgba(0, 0, 0, 0.4);
    border-radius: var(--radius);
    border: 1px solid var(--card-border);
}

.mode-toggle__btn {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.5rem 1rem;
    border: none;
    border-radius: calc(var(--radius) - 2px);
    background: transparent;
    color: var(--foreground-muted);
    font-size: 0.8125rem;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.2s ease;
}

.mode-toggle__btn:hover {
    color: var(--foreground);
    background: rgba(255, 255, 255, 0.05);
}

.mode-toggle__btn--active {
    background: rgba(139, 92, 246, 0.2);
    color: var(--brand-primary);
    box-shadow: 0 0 15px -3px rgba(139, 92, 246, 0.4);
}

.mode-toggle__icon {
    width: 16px;
    height: 16px;
}

/* View Mode Content Visibility */
[data-view-mode="patient"] .clinician-only {
    display: none !important;
}

[data-view-mode="clinician"] .patient-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;
}

.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);
}

/* 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;
}

.ki-top-tabs__list {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    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;
    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;
}

.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: white;
    margin: 0 0 0.5rem;
}

.ki-panel-header__subtitle {
    font-size: 0.9375rem;
    color: #94a3b8;
    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: white;
    margin: 0;
}

.ki-card__meta {
    padding: 0.75rem 1.5rem;
    font-size: 0.8125rem;
    color: #64748b;
    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: #ef4444;
    border-color: rgba(239, 68, 68, 0.3);
    background: rgba(239, 68, 68, 0.1);
}

.ki-badge--high,
.ki-badge--warning {
    color: #f59e0b;
    border-color: rgba(245, 158, 11, 0.3);
    background: rgba(245, 158, 11, 0.1);
}

.ki-badge--typical,
.ki-badge--success {
    color: #10b981;
    border-color: rgba(16, 185, 129, 0.3);
    background: rgba(16, 185, 129, 0.1);
}

.ki-badge--low,
.ki-badge--info {
    color: #3b82f6;
    border-color: rgba(59, 130, 246, 0.3);
    background: rgba(59, 130, 246, 0.1);
}

.ki-badge--very-low {
    color: #8b5cf6;
    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: #e2e8f0;
    margin-bottom: 0.5rem;
}

.ki-textarea {
    width: 100%;
    padding: 0.75rem 1rem;
    font-size: 0.875rem;
    color: #e2e8f0;
    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: #64748b;
}

.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: white;
    margin: 0 0 0.5rem;
}

.ki-empty-state__text {
    font-size: 0.9375rem;
    color: #94a3b8;
    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;
}

/* Mode Toggle Position */
.ki-mode-toggle {
    position: fixed;
    top: 70px;
    right: 1rem;
    z-index: 50;
}

/* 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: #cbd5e1;
    line-height: 1.7;
}

.ki-treatment-content h1,
.ki-treatment-content h2,
.ki-treatment-content h3 {
    color: white;
    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: #f8fafc;
    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: #cbd5e1;
    margin: 0;
}

.ki-cdss-section-title {
    font-size: 0.875rem;
    font-weight: 600;
    color: #a78bfa;
    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: #e2e8f0;
}

/* 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: #64748b;
    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: #f8fafc;
    margin: 0 0 0.5rem 0;
}

.ki-cdss-action-card__summary {
    font-size: 0.8125rem;
    line-height: 1.6;
    color: #94a3b8;
    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: #64748b;
    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: #cbd5e1;
    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: #64748b;
    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: #e2e8f0;
    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: #e2e8f0;
    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: #e2e8f0;
    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: #64748b;
}

.ki-form-field__help {
    font-size: 0.8125rem;
    color: #64748b;
    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: #64748b;
    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: repeat(auto-fit, minmax(280px, 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;
}

.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;
}