* {
            margin: 0;
            padding: 0;
            box-sizing: border-box;
            -webkit-tap-highlight-color: transparent;
        }

        body {
            font-family: 'Montserrat', sans-serif;
            background: #0a0e17;
            color: #e0e8f0;
            overflow-x: hidden;
            -webkit-font-smoothing: antialiased;
        }


        /* ===== THEME VARIABLES ===== */
        :root {
            --text-primary: #e0e8f0;
            --text-secondary: rgba(255,255,255,0.65);
            --text-muted: rgba(255,255,255,0.55);
            --text-body: rgba(255,255,255,0.8);
            --border-subtle: rgba(255,255,255,0.08);
            --border-medium: rgba(255,255,255,0.06);
            --bg-card-hover: rgba(255,255,255,0.08);
            --bg-badge-default: rgba(255,255,255,0.08);
            --text-badge-default: rgba(255,255,255,0.6);
            --badge-red-bg: rgba(220,53,69,0.2);
            --badge-red-text: #ff8a95;
            --badge-orange-bg: rgba(248,138,47,0.2);
            --badge-orange-text: #ffc08a;
            --badge-green-bg: rgba(167,207,40,0.2);
            --badge-green-text: #a7cf28;
            --badge-blue-bg: rgba(56,189,248,0.2);
            --badge-blue-text: #38bdf8;
            --text-bright: rgba(255,255,255,0.9);
            --text-semi: rgba(255,255,255,0.8);
            --text-dim: rgba(255,255,255,0.7);
        }
        body.light-mode {
            --text-primary: #1a1a1a;
            --text-secondary: #64748b;
            --text-muted: #94a3b8;
            --text-body: #475569;
            --border-subtle: rgba(0,0,0,0.08);
            --border-medium: rgba(0,0,0,0.06);
            --bg-card-hover: rgba(0,0,0,0.04);
            --bg-badge-default: rgba(0,0,0,0.06);
            --text-badge-default: #64748b;
            --badge-red-bg: rgba(220,53,69,0.08);
            --badge-red-text: #dc3545;
            --badge-orange-bg: rgba(248,138,47,0.08);
            --badge-orange-text: #d97706;
            --badge-green-bg: rgba(167,207,40,0.08);
            --badge-green-text: #4d7c0f;
            --badge-blue-bg: rgba(56,189,248,0.08);
            --badge-blue-text: #0284c7;
            --text-bright: #1a1a1a;
            --text-semi: #374151;
            --text-dim: #4b5563;
        }

        /* ===== AI ENGINE STYLES ===== */
        .ai-engine-panel { background: linear-gradient(135deg, #0a1628 0%, #132040 100%); border-radius: 16px; padding: 24px; margin-bottom: 20px; border: 1px solid rgba(56,189,248,0.2); }
        .ai-engine-header { display: flex; align-items: center; gap: 12px; margin-bottom: 16px; }
        .ai-engine-dot { width: 10px; height: 10px; background: #34d399; border-radius: 50%; animation: ai-pulse 2s infinite; }
        @keyframes ai-pulse { 0%,100% { opacity: 1; } 50% { opacity: 0.4; } }
        .ai-engine-title { color: #38bdf8; font-size: 16px; font-weight: 700; }
        .ai-engine-version { color: rgba(255,255,255,0.4); font-size: 11px; margin-left: auto; }
        .ai-tier-badges { display: flex; gap: 8px; flex-wrap: wrap; margin-bottom: 16px; }
        .ai-tier-badge { padding: 4px 10px; border-radius: 6px; font-size: 11px; font-weight: 700; }
        .ai-tier-active { background: rgba(52,211,153,0.15); color: #34d399; border: 1px solid rgba(52,211,153,0.3); }
        .ai-tier-available { background: rgba(56,189,248,0.1); color: #38bdf8; border: 1px solid rgba(56,189,248,0.2); }
        .ai-tier-pending { background: rgba(255,255,255,0.05); color: rgba(255,255,255,0.3); border: 1px solid rgba(255,255,255,0.1); }
        .ai-findings-section { margin-bottom: 16px; }
        .ai-findings-label { font-size: 12px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.5px; margin-bottom: 8px; padding: 4px 8px; border-radius: 4px; display: inline-block; }
        .ai-sev-critical { background: rgba(248,113,113,0.15); color: #f87171; }
        .ai-sev-moderate { background: rgba(251,191,36,0.15); color: #fbbf24; }
        .ai-sev-info { background: rgba(56,189,248,0.1); color: #38bdf8; }
        .ai-finding-item { background: rgba(255,255,255,0.04); border-radius: 10px; padding: 14px 16px; margin-bottom: 8px; border-left: 3px solid transparent; }
        .ai-finding-critical { border-left-color: #f87171; }
        .ai-finding-moderate { border-left-color: #fbbf24; }
        .ai-finding-info { border-left-color: #38bdf8; }
        .ai-finding-type { font-size: 11px; font-weight: 700; color: rgba(255,255,255,0.5); text-transform: uppercase; letter-spacing: 0.5px; margin-bottom: 4px; }
        .ai-finding-desc { font-size: 13px; color: rgba(255,255,255,0.85); line-height: 1.6; }
        .ai-finding-meta { font-size: 11px; color: rgba(255,255,255,0.35); margin-top: 6px; }
        .ai-insights-panel { background: rgba(255,255,255,0.04); border-radius: 12px; padding: 20px; margin-top: 16px; }
        .ai-insights-title { font-size: 14px; font-weight: 700; color: #a78bfa; margin-bottom: 12px; }
        .ai-insights-text { font-size: 13px; color: rgba(255,255,255,0.8); line-height: 1.7; }
        .ai-btn { padding: 10px 20px; border-radius: 8px; font-size: 13px; font-weight: 700; cursor: pointer; border: none; font-family: 'Montserrat', sans-serif; transition: all 0.2s; }
        .ai-btn-local { background: rgba(52,211,153,0.15); color: #34d399; border: 1px solid rgba(52,211,153,0.3); }
        .ai-btn-local:hover { background: rgba(52,211,153,0.25); }
        .ai-btn-cloud { background: rgba(56,189,248,0.15); color: #38bdf8; border: 1px solid rgba(56,189,248,0.3); }
        .ai-btn-cloud:hover { background: rgba(56,189,248,0.25); }
        .ai-actions { display: flex; gap: 10px; margin-top: 16px; flex-wrap: wrap; }

        /* ── Unified Badge System ── */
        .badge { display: inline-flex; align-items: center; padding: 4px 10px; border-radius: 6px; font-size: 12px; font-weight: 600; letter-spacing: 0.3px; white-space: nowrap; }
        .badge-critical  { background: rgba(239,68,68,0.2);    color: #fca5a5; border: 1px solid rgba(239,68,68,0.4); }
        .badge-warning   { background: rgba(245,158,11,0.2);   color: #fcd34d; border: 1px solid rgba(245,158,11,0.4); }
        .badge-info      { background: rgba(99,102,241,0.2);   color: #a5b4fc; border: 1px solid rgba(99,102,241,0.4); }
        .badge-positive  { background: rgba(34,197,94,0.2);    color: #86efac; border: 1px solid rgba(34,197,94,0.4); }
        .badge-neutral   { background: rgba(148,163,184,0.15); color: #94a3b8; border: 1px solid rgba(148,163,184,0.3); }
        .badge-monitor   { background: rgba(14,165,233,0.2);   color: #7dd3fc; border: 1px solid rgba(14,165,233,0.4); }

        /* Consent Modal */
        .metis-consent-overlay { position: fixed; top: 0; left: 0; right: 0; bottom: 0; background: rgba(0,0,0,0.7); z-index: 10000; display: flex; align-items: center; justify-content: center; }
        .metis-consent-card { background: #1a1a2e; color: #e0e0e0; border-radius: 16px; max-width: 520px; width: 90%; padding: 32px; border: 1px solid rgba(56,189,248,0.3); }
        .metis-consent-btn-decline { flex: 1; padding: 12px; border-radius: 8px; border: 1px solid #374151; background: transparent; color: #e0e0e0; cursor: pointer; font-size: 14px; font-weight: 600; font-family: 'Montserrat', sans-serif; }
        .metis-consent-btn-approve { flex: 1; padding: 12px; border-radius: 8px; border: none; background: #38bdf8; color: #0a0e17; cursor: pointer; font-size: 14px; font-weight: 600; font-family: 'Montserrat', sans-serif; }

        /* Navigation */
        .nav-bar {
            position: fixed;
            top: 0;
            left: 0;
            right: 0;
            width: 100%;
            background: #1a5276;
            padding: 0 12px;
            display: flex;
            justify-content: space-between;
            align-items: center;
            z-index: 1000;
            box-shadow: 0 2px 12px rgba(0,0,0,0.2);
            height: 56px;
            box-sizing: border-box;
            overflow: hidden;
        }

        .nav-btn {
            background: none;
            border: 1.5px solid #a7cf28;
            color: #a7cf28;
            padding: 6px 10px;
            border-radius: 8px;
            font-weight: 700;
            font-size: 12px;
            cursor: pointer;
            transition: all 0.3s;
            font-family: 'Montserrat', sans-serif;
            touch-action: manipulation;
            -webkit-user-select: none;
            user-select: none;
            white-space: nowrap;
            display: flex;
            align-items: center;
            gap: 4px;
            flex-shrink: 0;
        }

        .nav-btn:hover {
            background: #a7cf28;
            color: #001830;
        }

        .logo {
            color: white;
            font-size: 20px;
            font-weight: 800;
            letter-spacing: 1px;
            display: flex;
            align-items: center;
            flex-shrink: 1;
            min-width: 0;
        }

        /* Menu */
        .menu-overlay {
            position: fixed;
            top: 0;
            left: 0;
            right: 0;
            bottom: 0;
            background: rgba(0,0,0,0.6);
            z-index: 1998;
            display: none;
        }

        .menu-overlay.show {
            display: block;
        }

        .menu {
            position: fixed;
            top: 0;
            left: -320px;
            width: 300px;
            height: 100vh;
            background: #0d1b2e;
            box-shadow: 4px 0 20px rgba(0,0,0,0.5);
            z-index: 1999;
            transition: left 0.3s ease;
            overflow-y: auto;
        }

        .menu.open {
            left: 0;
        }

        .menu-header {
            background: linear-gradient(135deg, #1a5276 0%, #2471a3 100%);
            color: white;
            padding: 24px 20px;
            font-size: 20px;
            font-weight: 800;
            position: sticky;
            top: 0;
            z-index: 10;
        }

        .menu-section {
            padding: 20px 16px;
            border-bottom: 1px solid rgba(255,255,255,0.08);
        }

        .menu-section-title {
            font-size: 11px;
            color: rgba(255,255,255,0.45);
            font-weight: 700;
            text-transform: uppercase;
            margin-bottom: 12px;
            letter-spacing: 0.5px;
        }

        .menu-item {
            display: block;
            padding: 14px 16px;
            color: #e0e8f0;
            font-size: 15px;
            cursor: pointer;
            border-radius: 8px;
            margin-bottom: 6px;
            transition: all 0.2s;
            font-weight: 500;
            touch-action: manipulation;
            -webkit-user-select: none;
            user-select: none;
            text-decoration: none;
        }

        .menu-item:hover {
            background: rgba(167,207,40,0.15);
            transform: translateX(4px);
        }

        /* Pages */
        .page {
            display: none;
            padding: 84px 20px 40px;
            min-height: 100vh;
            max-width: 960px;
            margin: 0 auto;
        }

        .page.active {
            display: block;
        }


        /* Cards */
        .card {
            background: rgba(255,255,255,0.06);
            border: 1px solid rgba(255,255,255,0.1);
            border-radius: 16px;
            padding: 24px;
            margin-bottom: 20px;
            box-shadow: 0 2px 12px rgba(0,0,0,0.2);
            color: #e0e8f0;
        }

        .card-title {
            font-size: 22px;
            font-weight: 700;
            color: #e0e8f0;
            margin-bottom: 8px;
        }

        .card-subtitle {
            font-size: 14px;
            color: rgba(255,255,255,0.5);
            margin-bottom: 16px;
        }

        /* Alerts */
        .alert {
            background: linear-gradient(135deg, #d4edda 0%, #c3e6cb 100%);
            border: 2px solid #28a745;
            color: #155724;
            padding: 16px;
            border-radius: 12px;
            margin-bottom: 16px;
            font-weight: 600;
            line-height: 1.6;
        }

        .alert-orange {
            background: linear-gradient(135deg, #fff3cd 0%, #ffeaa7 100%);
            border-color: #f88a2f;
            color: #856404;
        }

        .alert-red {
            background: linear-gradient(135deg, #f8d7da 0%, #f5c6cb 100%);
            border-color: #dc3545;
            color: #721c24;
        }

        /* Stats */
        .stat-grid {
            display: grid;
            grid-template-columns: repeat(2, 1fr);
            gap: 16px;
            margin: 20px 0;
        }

        .stat-card {
            background: rgba(255,255,255,0.06);
            padding: 20px;
            border-radius: 12px;
            text-align: center;
            box-shadow: 0 2px 8px rgba(0,0,0,0.2);
            border: 1px solid rgba(255,255,255,0.1);
            color: #e0e8f0;
        }

        .stat-value {
            font-size: 32px;
            font-weight: 800;
            color: #a7cf28;
            margin-bottom: 4px;
        }

        .stat-label {
            font-size: 13px;
            
            font-weight: 600;
        }

        /* List Items */
        .list-item {
            border-left: 4px solid #a7cf28;
            padding: 18px;
            background: rgba(255,255,255,0.06);
            border-radius: 8px;
            margin-bottom: 14px;
            color: var(--text-primary);
        }

        .list-title {
            font-weight: 700;
            color: #e0e8f0;
            margin-bottom: 8px;
            font-size: 16px;
        }

        .list-subtitle {
            font-size: 14px;
            color: var(--text-secondary);
            line-height: 1.6;
        }

        /* Badges */
        .badge {
            background: #a7cf28;
            color: white;
            padding: 6px 14px;
            border-radius: 6px;
            font-size: 12px;
            font-weight: 700;
            display: inline-block;
            margin-top: 10px;
        }

        .badge-blue {
            background: #2196f3;
        }

        .badge-red {
            background: #dc3545;
        }

        .badge-orange {
            background: #f88a2f;
            /* WCAG 2.1 AA fix 2026-05-08: white-on-orange-500 was 2.69:1 — fail.
               Switched to dark text on orange-500 (~9.5:1) — pass.
               Veterans on screen readers / low-vision parsing the orange
               "Not Connected" badge can now actually read it. */
            color: #1a0f00;
        }

        /* Buttons */
        .action-btn {
            background: linear-gradient(135deg, #a7cf28, #8ab020);
            color: white;
            border: none;
            padding: 16px 24px;
            border-radius: 12px;
            font-size: 16px;
            font-weight: 700;
            width: 100%;
            margin-top: 16px;
            cursor: pointer;
            transition: all 0.3s;
            font-family: 'Montserrat', sans-serif;
            touch-action: manipulation;
            -webkit-user-select: none;
        }

        .action-btn:hover {
            transform: translateY(-2px);
            box-shadow: 0 6px 20px rgba(167, 207, 40, 0.4);
        }

        .action-btn-secondary {
            background: rgba(255,255,255,0.06);
            border: 2px solid #a7cf28;
            color: #a7cf28;
            padding: 16px 24px;
            border-radius: 12px;
            font-size: 16px;
            font-weight: 700;
            width: 100%;
            margin-top: 10px;
            cursor: pointer;
            transition: all 0.3s;
            font-family: 'Montserrat', sans-serif;
            touch-action: manipulation;
            -webkit-user-select: none;
            min-height: 48px;
            text-align: center;
        }
        .action-btn-secondary:hover {
            background: rgba(167,207,40,0.08);
            transform: translateY(-2px);
            box-shadow: 0 4px 12px rgba(167,207,40,0.2);
        }

        /* Big Stat */
        .big-stat {
            background: linear-gradient(135deg, #a7cf28 0%, #8ab020 100%);
            color: white;
            padding: 40px 24px;
            border-radius: 16px;
            text-align: center;
            margin: 24px 0;
            box-shadow: 0 6px 20px rgba(167, 207, 40, 0.3);
        }

        .big-stat-value {
            font-size: 56px;
            font-weight: 800;
            margin-bottom: 8px;
        }

        .big-stat-label {
            font-size: 16px;
            font-weight: 600;
            opacity: 0.9;
        }

        /* Timeline */
        .timeline {
            position: relative;
            padding-left: 40px;
        }

        .timeline-item {
            position: relative;
            padding: 20px;
            margin-bottom: 20px;
            background: rgba(255,255,255,0.06);
            border-left: 4px solid #a7cf28;
            border-radius: 8px;
            color: var(--text-primary);
        }

        .timeline-item:before {
            content: '';
            position: absolute;
            left: -14px;
            top: 24px;
            width: 20px;
            height: 20px;
            background: #a7cf28;
            border-radius: 50%;
            border: 3px solid white;
            box-shadow: 0 0 0 2px #a7cf28;
        }

        .timeline-year {
            font-weight: 800;
            color: #a7cf28;
            font-size: 16px;
            margin-bottom: 4px;
        }

        .timeline-event {
            font-size: 15px;
            
            line-height: 1.6;
        }

        .timeline-detail {
            font-size: 13px;
            color: #999;
            margin-top: 8px;
            font-style: italic;
        }

        /* Oura Graph Bars */
        .bar-chart { display: flex; align-items: flex-end; gap: 8px; height: 140px; padding: 10px 0; overflow: visible; }
        .bar-group { display: flex; flex-direction: column; align-items: center; flex: 1; min-width: 0; overflow: visible; }
        .bar { width: 100%; min-height: 4px; transition: height 0.3s; }
        .bar-label { font-size: 10px; color: rgba(255,255,255,0.8); margin-top: 6px; font-weight: 600; white-space: nowrap; }
        .bar-val { font-size: 10px; color: #fff; font-weight: 700; margin-bottom: 4px; white-space: nowrap; text-overflow: ellipsis; overflow: hidden; max-width: 100%; }
        .bar-stack { width: 100%; display: flex; flex-direction: column; border-radius: 6px 6px 0 0; overflow: hidden; }
        .bar-deep { background: #001830; }
        .bar-rem { background: #2196f3; }
        .bar-light { background: #a7cf28; }
        .bar-awake { background: #f88a2f; }
        .bar-active { background: #a7cf28; }
        .bar-inactive { background: #ddd; }
        .legend { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 12px; }
        .legend-item { display: flex; align-items: center; gap: 4px; font-size: 11px;  }
        .legend-dot { width: 10px; height: 10px; border-radius: 2px; }
        .metric-row { display: flex; justify-content: space-between; padding: 12px 0; border-bottom: 1px solid rgba(255,255,255,0.1); }
        .metric-label { font-size: 14px;  }
        .metric-value { font-size: 14px; font-weight: 700; color: #e0e8f0; }
        .metric-change { font-size: 12px; margin-left: 6px; }
        .metric-up { color: #a7cf28; }
        .metric-down { color: #dc3545; }
        .metric-flat { color: #f88a2f; }
        .insight-card { background: rgba(255,255,255,0.06); color: #e0e8f0; border-radius: 16px; padding: 20px; border: 1px solid rgba(255,255,255,0.1); box-shadow: 0 2px 12px rgba(0,0,0,0.2); cursor: pointer; transition: transform 0.15s, box-shadow 0.15s; }
        .insight-card:hover { transform: translateY(-2px); box-shadow: 0 6px 20px rgba(0,0,0,0.3); }
        .insight-card .card-title { color: #e0e8f0; font-weight: 800; font-size: 14px; margin: 8px 0 6px; }
        .insight-card .list-subtitle { font-size: 12px; opacity: 0.65; line-height: 1.5; margin-bottom: 10px; }
        .insight-card strong { color: #e0e8f0; }
        .insight-card .insight-tag { background: #001830; color: #a7cf28; }
        .btn-ghost { background: transparent; border: 1px solid rgba(255,255,255,0.15); color: rgba(255,255,255,0.6); padding: 5px 12px; border-radius: 6px; font-size: 11px; font-weight: 600; cursor: pointer; transition: background 0.15s, color 0.15s; }
        .btn-ghost:hover { background: rgba(255,255,255,0.1); color: rgba(255,255,255,0.9); }
        .insight-tag { background: rgba(167,207,40,0.2); color: #a7cf28; padding: 4px 10px; border-radius: 4px; font-size: 11px; font-weight: 700; display: inline-block; margin: 4px 4px 4px 0; }
        .alert-red { background: linear-gradient(135deg, #f8d7da 0%, #f5c6cb 100%); border: 2px solid #dc3545; color: #721c24; }
        .rx-cost { display: flex; justify-content: space-between; padding: 10px 16px; background: rgba(248,138,47,0.15); border-radius: 8px; margin-bottom: 8px; font-size: 14px; }
        .rx-cost-label { color: var(--badge-orange-text); font-weight: 600; }
        .rx-cost-value { color: #856404; font-weight: 800; }
        /* CSS-only menu toggle (works without JavaScript) */
        #menuToggle { display: none; }
        #menuToggle:checked ~ .menu-overlay { display: block; }
        #menuToggle:checked ~ .menu { left: 0; }
        .menu-close-label {
            display: block;
            padding: 16px 20px;
            text-align: right;
            font-size: 24px;
            cursor: pointer;
            color: white;
            background: linear-gradient(135deg, #1a5276 0%, #2471a3 100%);
            touch-action: manipulation;
        }

        /* Mobile Responsive */
        @media (max-width: 600px) {
            .stat-grid {
                grid-template-columns: 1fr;
            }
            .stat-value {
                font-size: 24px;
                word-break: break-word;
            }
            .stat-card {
                padding: 16px;
            }
            .card {
                padding: 18px;
                margin: 12px 0;
            }
            .card-title {
                font-size: 17px;
            }
            .rx-cost {
                flex-wrap: wrap;
            }
        }
    
/* ===== ACCESSIBILITY ===== */
/* Skip to content link */
.skip-link {
    position: absolute;
    top: -50px;
    left: 0;
    background: #a7cf28;
    color: #001830;
    padding: 12px 20px;
    z-index: 100000;
    font-weight: 700;
    font-size: 16px;
    border-radius: 0 0 8px 0;
    transition: top 0.2s;
}
.skip-link:focus { top: 0; }

/* Screen reader only */
.sr-only {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0;
}

/* Focus indicators */
*:focus-visible {
    outline: 3px solid #4A90E2 !important;
    outline-offset: 2px !important;
}

/* High contrast mode */
body.high-contrast { background: #fff !important; color: #000 !important; }
body.high-contrast .card { background: #fff !important; border: 2px solid #000 !important; color: #000 !important; }
body.high-contrast .nav-bar { background: #1a5276; }
body.high-contrast .nav-bar * { color: #fff !important; }
body.high-contrast .stat-card { background: #fff !important; border: 2px solid #000 !important; }
body.high-contrast .stat-value { color: #000 !important; }
body.high-contrast .stat-label { color: #333 !important; }
body.high-contrast .list-item { background: rgba(255,255,255,0.06) !important; border-color: #000 !important; color: #000 !important; }
body.high-contrast .list-title { color: #000 !important; }
body.high-contrast .list-subtitle { color: #222 !important; }
body.high-contrast .menu { background: #fff !important; }
body.high-contrast .menu-item { color: #000 !important; }
body.high-contrast a { color: #0000EE !important; text-decoration: underline !important; }
body.high-contrast .badge { border: 1px solid #000 !important; }
body.high-contrast .insight-card { background: #fff !important; border: 2px solid #000 !important; }
body.high-contrast .action-btn { border: 2px solid #000 !important; }

/* Dark mode */
body.dark-mode { background: #1a1a2e !important; color: #e0e0e0 !important; }
body.dark-mode .card { background: #16213e !important; border-color: #333 !important; color: #e0e0e0 !important; }
body.dark-mode .card-title { color: #a7cf28 !important; }
body.dark-mode .card-subtitle { color: #aaa !important; }
body.dark-mode .nav-bar { background: #1a5276; }
body.dark-mode .stat-card { background: #1a1a2e !important; border-color: #444 !important; }
body.dark-mode .stat-value { color: #a7cf28 !important; }
body.dark-mode .stat-label { color: #ccc !important; }
body.dark-mode .list-item { background: #1e2d4a !important; border-color: #444 !important; }
body.dark-mode .list-title { color: #e0e0e0 !important; }
body.dark-mode .list-subtitle { color: #bbb !important; }
body.dark-mode .menu { background: #16213e !important; }
body.dark-mode .menu-item { color: #e0e0e0 !important; }
body.dark-mode .menu-item:hover { background: rgba(167,207,40,0.15) !important; }
body.dark-mode .insight-card { background: #16213e !important; border-color: #444 !important; color: #e0e0e0 !important; }
body.dark-mode .action-btn { background: #a7cf28 !important; color: #001830 !important; }
body.dark-mode .rx-cost { border-color: #444 !important; }
body.dark-mode .rx-cost-label { color: #ccc !important; }
body.dark-mode .alert { color: #e0e0e0 !important; }

/* Reduced motion */
body.reduce-motion, body.reduce-motion * {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
}

/* Accessibility panel */
.a11y-fab {
    position: fixed;
    bottom: 24px;
    right: 24px;
    width: 48px;
    height: 48px;
    border-radius: 50%;
    background: #2196f3;
    color: #fff;
    border: 3px solid #fff;
    font-size: 20px;
    cursor: pointer;
    z-index: 10000;
    box-shadow: 0 4px 16px rgba(33,150,243,0.5);
    display: flex;
    align-items: center;
    justify-content: center;
    touch-action: manipulation;
    transition: all 0.3s;
}
.a11y-fab:hover { background: #1976d2; color: #fff; box-shadow: 0 6px 20px rgba(33,150,243,0.6); transform: scale(1.1); }

.a11y-panel-overlay {
    display: none;
    position: fixed;
    top: 0; left: 0; right: 0; bottom: 0;
    background: rgba(0,0,0,0.5);
    z-index: 10001;
}
.a11y-panel-overlay.open { display: block; }

.a11y-panel {
    position: fixed;
    bottom: 90px;
    right: 20px;
    width: 320px;
    max-height: 70vh;
    overflow-y: auto;
    background: white;
    border-radius: 16px;
    box-shadow: 0 8px 32px rgba(0,0,0,0.2);
    padding: 24px;
    z-index: 10002;
    display: none;
}
.a11y-panel.open { display: block; }
body.dark-mode .a11y-panel { background: #16213e; color: #e0e0e0; }

.a11y-panel h3 { margin: 0 0 16px; font-size: 18px; color: #001830; }
body.dark-mode .a11y-panel h3 { color: #a7cf28; }

.a11y-group { margin-bottom: 16px; }
.a11y-group label { display: flex; align-items: center; gap: 10px; padding: 8px 0; cursor: pointer; font-size: 14px; font-weight: 500; }
.a11y-group input[type="checkbox"] { width: 20px; height: 20px; accent-color: #a7cf28; }
.a11y-group input[type="range"] { width: 100%; accent-color: #a7cf28; }
.a11y-range-row { display: flex; align-items: center; gap: 12px; }
.a11y-range-row span { min-width: 40px; text-align: right; font-weight: 700; font-size: 14px; }
.a11y-reset-btn { width: 100%; padding: 10px; background: rgba(220,53,69,0.1); color: #dc3545; border: 1px solid #dc3545; border-radius: 8px; cursor: pointer; font-weight: 600; font-size: 14px; margin-top: 8px; }
.a11y-reset-btn:hover { background: #dc3545; color: white; }

/* ══════════════════════════════════════════════════════════════
   DASHBOARD v2 — Hero Alert, Pulse Rings, Glass & Bento
   Patient-first design system with AI correlation emphasis
   ══════════════════════════════════════════════════════════════ */

/* Hero Critical Alert */
.dash-hero-alert {
    background: linear-gradient(135deg, #1a0a0a 0%, #3d0f0f 40%, #5a1a1a 100%);
    border-radius: 20px; padding: 24px;
    color: white; position: relative; overflow: hidden;
    cursor: pointer; transition: transform 0.2s;
    border: 1px solid rgba(220,53,69,0.3);
}
.dash-hero-alert:hover { transform: translateY(-2px); box-shadow: 0 8px 24px rgba(0,0,0,0.2); }
.dash-hero-alert::before {
    content: ''; position: absolute; top: -40%; right: -20%;
    width: 200px; height: 200px;
    background: radial-gradient(circle, rgba(220,53,69,0.2), transparent 70%);
    border-radius: 50%;
}
.dash-hero-tag {
    display: inline-flex; align-items: center; gap: 6px;
    font-size: 12px; font-weight: 800; text-transform: uppercase;
    letter-spacing: 1.5px; color: #ff6b7a; margin-bottom: 12px;
}
.dash-hero-pulse {
    width: 10px; height: 10px; border-radius: 50%; background: #dc3545;
    animation: dashPulseRed 1.5s infinite;
}
@keyframes dashPulseRed {
    0%,100%{ box-shadow: 0 0 0 0 rgba(220,53,69,0.3); }
    50%{ box-shadow: 0 0 0 8px transparent; }
}
.dash-hero-alert h3 { font-size: 19px; font-weight: 800; margin-bottom: 8px; position: relative; z-index: 1; margin-top: 0; }
.dash-hero-alert p { font-size: 14px; color: rgba(255,255,255,0.82); line-height: 1.6; position: relative; z-index: 1; margin-bottom: 16px; }
.dash-hero-alert-tags { display: flex; gap: 6px; flex-wrap: wrap; margin-top: 8px; position: relative; z-index: 1; }
.dash-hero-btn {
    background: #dc3545; color: white; border: none;
    padding: 14px 24px; border-radius: 12px;
    font-weight: 800; font-size: 14px; cursor: pointer;
    font-family: 'Montserrat', sans-serif;
    position: relative; z-index: 1; transition: all 0.2s;
    min-height: 48px; touch-action: manipulation; -webkit-user-select: none;
}
.dash-hero-btn:hover { background: #e04050; transform: translateY(-1px); }

/* Pulse Data Rings Row */
.dash-pulse-row {
    display: flex; gap: 10px; margin-bottom: 16px;
    overflow-x: auto; padding: 4px 0;
    -webkit-overflow-scrolling: touch;
}
.dash-pulse-row::-webkit-scrollbar { display: none; }
.dash-pulse-card {
    flex: 1 1 0; min-width: 110px;
    background: rgba(255,255,255,0.06); border: 1px solid rgba(255,255,255,0.1);
    border-radius: 18px; padding: 18px 10px;
    text-align: center; box-shadow: 0 2px 10px rgba(0,0,0,0.2);
    cursor: pointer; transition: all 0.2s;
}
.dash-pulse-card:hover { transform: translateY(-3px); box-shadow: 0 6px 20px rgba(0,0,0,0.12); }
.dash-ring {
    width: 80px; height: 80px; border-radius: 50%; margin: 0 auto 12px;
    display: flex; align-items: center; justify-content: center;
    position: relative;
}
.dash-ring-bg { position: absolute; inset: 0; border-radius: 50%; }
.dash-ring-inner {
    width: 64px; height: 64px; border-radius: 50%;
    background: #0a0e17; display: flex; flex-direction: column;
    align-items: center; justify-content: center;
    position: relative; z-index: 1;
}
.dash-ring-val { font-size: 24px; font-weight: 900; line-height: 1; }
.dash-ring-unit { font-size: 10px; font-weight: 700; color: #888; text-transform: uppercase; letter-spacing: 0.5px; }
.dash-pulse-label { font-size: 12px; font-weight: 800; color: #e0e8f0; text-transform: uppercase; letter-spacing: 0.3px; margin-bottom: 3px; }
.dash-pulse-sub { font-size: 11px; color: #777; font-weight: 600; line-height: 1.3; }

/* Section Divider */
.dash-divider {
    display: flex; align-items: center; gap: 10px;
    padding: 8px 4px 12px;
}
.dash-divider-line { flex: 1; height: 1px; background: #ddd; }
.dash-divider-text {
    font-size: 12px; font-weight: 800; color: #888;
    text-transform: uppercase; letter-spacing: 2px; white-space: nowrap;
}

/* Glass Backdrop & Cards */
.dash-glass-wrap {
    background: linear-gradient(160deg, #001830 0%, #002a4a 35%, #0d3a2a 65%, #2a6d20 90%, #a7cf28 100%);
    border-radius: 22px; padding: 18px 14px; margin-bottom: 16px;
}
.dash-glass {
    background: rgba(255,255,255,0.10);
    backdrop-filter: blur(24px); -webkit-backdrop-filter: blur(24px);
    border: 1px solid rgba(255,255,255,0.18);
    border-radius: 18px; padding: 22px; margin-bottom: 12px;
    cursor: pointer; transition: all 0.25s ease; color: white;
    min-height: 48px;
}
.dash-glass:hover { background: rgba(255,255,255,0.18); transform: translateY(-2px); box-shadow: 0 8px 32px rgba(0,0,0,0.2); }
.dash-glass:active { transform: scale(0.98); }
.dash-glass:last-child { margin-bottom: 0; }
.dash-glass-hdr { display: flex; align-items: center; gap: 14px; margin-bottom: 12px; }
.dash-glass-ico {
    width: 48px; height: 48px; border-radius: 14px;
    background: rgba(255,255,255,0.12);
    display: flex; align-items: center; justify-content: center;
    font-size: 24px; flex-shrink: 0;
}
.dash-glass-titles { flex: 1; }
.dash-glass-title { font-size: 17px; font-weight: 800; margin-bottom: 2px; }
.dash-glass-sub { font-size: 13px; color: rgba(255,255,255,0.8); font-weight: 600; text-transform: uppercase; letter-spacing: 0.5px; }
.dash-glass-body { font-size: 15px; color: rgba(255,255,255,0.85); line-height: 1.6; margin-bottom: 12px; }
.dash-glass-foot { display: flex; align-items: center; justify-content: space-between; }
.dash-glass-badge {
    display: inline-flex; align-items: center; gap: 4px;
    font-size: 12px; font-weight: 700; padding: 6px 14px; border-radius: 10px;
}
.dash-glass-badge.bg-green { background: rgba(167,207,40,0.25); color: #c5e864; }
.dash-glass-badge.bg-red { background: rgba(220,53,69,0.25); color: #ff8a95; }
.dash-glass-badge.bg-orange { background: rgba(248,138,47,0.25); color: #ffc08a; }
.dash-glass-badge.bg-blue { background: rgba(33,150,243,0.25); color: #82c4f8; }
.dash-glass-arrow {
    width: 36px; height: 36px; border-radius: 50%;
    background: rgba(255,255,255,0.1); display: flex;
    align-items: center; justify-content: center;
    font-size: 16px; color: rgba(255,255,255,0.6); transition: all 0.2s;
}
.dash-glass:hover .dash-glass-arrow { background: rgba(255,255,255,0.2); color: white; }

/* AI Correlation Chips */
.dash-ai-row { display: flex; gap: 8px; margin-top: 10px; flex-wrap: wrap; }
.dash-ai-chip {
    font-size: 12px; font-weight: 700; padding: 5px 12px;
    border-radius: 8px; white-space: nowrap;
}
.dash-ai-chip.chip-green { background: rgba(167,207,40,0.18); color: #c5e864; }
.dash-ai-chip.chip-red { background: rgba(220,53,69,0.18); color: #ff8a95; }
.dash-ai-chip.chip-orange { background: rgba(248,138,47,0.18); color: #ffc08a; }
.dash-ai-chip.chip-default { background: rgba(167,207,40,0.18); color: #c5e864; }

/* Dashboard Footer */
.dash-footer-note {
    text-align: center; padding: 20px 0 10px;
    font-size: 12px; color: #999; font-weight: 600;
}
.dash-footer-note strong { color: #a7cf28; }

/* High contrast overrides */
body.high-contrast .dash-hero-alert { border: 2px solid #ff0000 !important; }
body.high-contrast .dash-glass { border: 2px solid #fff !important; }
body.high-contrast .dash-ai-chip { border: 1px solid currentColor; }

/* Dark mode overrides */
body.dark-mode .dash-pulse-card { background: #16213e !important; }
body.dark-mode .dash-pulse-label { color: #e0e0e0 !important; }
body.dark-mode .dash-pulse-sub { color: #aaa !important; }
body.dark-mode .dash-ring-inner { background: #16213e !important; }
body.dark-mode .dash-divider-text { color: #aaa !important; }
body.dark-mode .dash-divider-line { background: #444 !important; }

/* ===== INNER PAGE DESIGN SYSTEM ===== */

/* Page Header Banners */
.pg-header {
    background: linear-gradient(135deg, #001830 0%, #002a4a 100%);
    border-radius: 20px; padding: 24px; margin-bottom: 16px;
    color: white; position: relative; overflow: hidden;
}
.pg-header-red {
    background: linear-gradient(135deg, #1a0a0a 0%, #3d0f0f 40%, #5a1a1a 100%);
    border: 1px solid rgba(220,53,69,0.3);
}
.pg-header-green {
    background: linear-gradient(135deg, #0a1a0a 0%, #0f3d1a 40%, #1a5a2a 100%);
    border: 1px solid rgba(167,207,40,0.3);
}
.pg-header-blue {
    background: linear-gradient(135deg, #0a0a1a 0%, #0f1a3d 40%, #1a2a5a 100%);
    border: 1px solid rgba(33,150,243,0.3);
}
.pg-header-orange {
    background: linear-gradient(135deg, #1a150a 0%, #3d2a0f 40%, #5a3d1a 100%);
    border: 1px solid rgba(248,138,47,0.3);
}
.pg-header-title { font-size: 22px; font-weight: 800; margin-bottom: 4px; position: relative; z-index: 1; }
.pg-header-sub { font-size: 14px; color: rgba(255,255,255,0.88); font-weight: 600; position: relative; z-index: 1; }
.pg-header-stats {
    display: flex; gap: 16px; margin-top: 14px; flex-wrap: wrap;
    position: relative; z-index: 1;
}
.pg-header-stat {
    display: inline-flex; align-items: center; gap: 6px;
    font-size: 13px; font-weight: 700; color: rgba(255,255,255,0.85);
    background: rgba(255,255,255,0.1); padding: 6px 14px; border-radius: 10px;
}

/* Glass Page Wrapper */
.pg-glass-wrap {
    background: linear-gradient(160deg, #001830 0%, #002a4a 35%, #0d3a2a 65%, #1a4a15 100%);
    border-radius: 22px; padding: 18px 14px; margin-bottom: 16px;
}
.pg-glass-wrap-red {
    background: linear-gradient(160deg, #1a0808 0%, #2a1010 35%, #3d0f0f 65%, #4a1515 100%);
}
.pg-glass-wrap-blue {
    background: linear-gradient(160deg, #080818 0%, #0f1a3d 35%, #152550 65%, #1a3060 100%);
}

/* Glass Cards for inner pages */
.pg-glass {
    background: rgba(255,255,255,0.08);
    backdrop-filter: blur(20px); -webkit-backdrop-filter: blur(20px);
    border: 1px solid rgba(255,255,255,0.15);
    border-radius: 18px; padding: 22px; margin-bottom: 12px;
    color: white; transition: all 0.2s;
}
.pg-glass:last-child { margin-bottom: 0; }
.pg-glass-clickable { cursor: pointer; }
.pg-glass-clickable:hover { background: rgba(255,255,255,0.14); transform: translateY(-2px); box-shadow: 0 8px 32px rgba(0,0,0,0.2); }
.pg-glass-title { font-size: 17px; font-weight: 800; margin-bottom: 8px; color: white; }
.pg-glass-body { font-size: 15px; color: rgba(255,255,255,0.93); line-height: 1.7; }
.pg-glass-body strong { color: #fff; font-weight: 700; }

/* Severity indicators */
.pg-severity {
    display: inline-flex; align-items: center; gap: 6px;
    font-size: 12px; font-weight: 800; text-transform: uppercase;
    letter-spacing: 1px; margin-bottom: 10px;
}
.pg-severity-critical { color: #ff6b7a; }
.pg-severity-warning { color: #ffc08a; }
.pg-severity-info { color: #82c4f8; }
.pg-severity-good { color: #c5e864; }
.pg-severity-dot {
    width: 8px; height: 8px; border-radius: 50%;
    animation: dashPulseRed 1.5s infinite;
}
.pg-severity-critical .pg-severity-dot { background: #dc3545; }
.pg-severity-warning .pg-severity-dot { background: #f88a2f; }
.pg-severity-info .pg-severity-dot { background: #2196f3; }

/* Glass Status Badges */
.pg-glass-badge {
    display: inline-flex; align-items: center; gap: 4px;
    font-size: 12px; font-weight: 700; padding: 6px 14px; border-radius: 10px;
}
.pg-badge-green { background: rgba(167,207,40,0.25); color: #c5e864; }
.pg-badge-red { background: rgba(220,53,69,0.25); color: #ff8a95; }
.pg-badge-orange { background: rgba(248,138,47,0.25); color: #ffc08a; }
.pg-badge-blue { background: rgba(33,150,243,0.25); color: #82c4f8; }

/* AI Insight Tags (reusable in glass context) */
.bento-tag-row { display: flex; gap: 8px; flex-wrap: wrap; margin-top: 14px; }
.pg-ai-tag {
    font-size: 12px; font-weight: 700; padding: 5px 12px;
    border-radius: 8px; white-space: nowrap;
}
.pg-ai-tag-green { background: rgba(167,207,40,0.18); color: #c5e864; }
.pg-ai-tag-red { background: rgba(220,53,69,0.18); color: #ff8a95; }
.pg-ai-tag-orange { background: rgba(248,138,47,0.18); color: #ffc08a; }
.pg-ai-tag-blue { background: rgba(33,150,243,0.18); color: #82c4f8; }
.pg-ai-tag-default { background: rgba(167,207,40,0.18); color: #c5e864; }

/* Glass Action Buttons */
.pg-glass-btn {
    display: inline-flex; align-items: center; justify-content: center; gap: 8px;
    background: rgba(167,207,40,0.2); color: #c5e864;
    border: 1px solid rgba(167,207,40,0.3);
    padding: 14px 24px; border-radius: 12px; width: 100%;
    font-weight: 800; font-size: 14px; cursor: pointer;
    font-family: 'Montserrat', sans-serif;
    transition: all 0.2s; min-height: 48px;
    touch-action: manipulation; -webkit-user-select: none;
    margin-bottom: 8px;
}
.pg-glass-btn:hover { background: rgba(167,207,40,0.3); transform: translateY(-1px); }
.pg-glass-btn-red {
    background: rgba(220,53,69,0.2); color: #ff8a95;
    border-color: rgba(220,53,69,0.3);
}
.pg-glass-btn-red:hover { background: rgba(220,53,69,0.3); }
.pg-glass-btn-blue {
    background: rgba(33,150,243,0.2); color: #82c4f8;
    border-color: rgba(33,150,243,0.3);
}
.pg-glass-btn-blue:hover { background: rgba(33,150,243,0.3); }
.pg-glass-btn-outline {
    background: rgba(167,207,40,0.12); color: #a7cf28;
    border-color: rgba(167,207,40,0.4);
}
.pg-glass-btn-outline:hover { background: rgba(167,207,40,0.25); color: #c5e864; }

/* Section Labels in Glass */
.pg-glass-section {
    font-size: 13px; font-weight: 800; text-transform: uppercase;
    letter-spacing: 2px; color: rgba(255,255,255,0.75);
    padding: 10px 0 14px; margin-top: 8px;
}

/* Glass Dividers */
.pg-bento-divider {
    height: 1px; background: rgba(255,255,255,0.1);
    margin: 16px 0;
}

/* Glass List Items */
.pg-glass-list-item {
    padding: 14px 0;
    border-bottom: 1px solid rgba(255,255,255,0.08);
}
.pg-glass-list-item:last-child { border-bottom: none; }
.pg-glass-list-title { font-size: 15px; font-weight: 700; color: white; margin-bottom: 4px; }
.pg-glass-list-sub { font-size: 14px; color: rgba(255,255,255,0.9); line-height: 1.5; }

/* Bento Grid */
.pg-bento-grid {
    display: grid; grid-template-columns: repeat(2, 1fr);
    gap: 12px; margin-bottom: 16px;
}
@media (max-width: 360px) { .pg-bento-grid { grid-template-columns: 1fr 1fr !important; } .pg-bento-grid > * { min-width: 0 !important; } .pg-bento-grid > div[style*="grid-column:1/-1"] { grid-column: 1 / -1 !important; } .pg-bento-card[style*="repeat(4,1fr)"] { grid-template-columns: 1fr 1fr !important; } }
.pg-bento-card {
    background: linear-gradient(135deg, rgba(255,255,255,0.05) 0%, rgba(255,255,255,0.02) 100%);
    border: 1px solid rgba(255,255,255,0.08);
    border-radius: 14px; padding: 16px;
    color: #e0e8f0; position: relative; overflow: hidden;
    transition: transform 0.2s, box-shadow 0.2s;
}
.pg-bento-card:hover { transform: translateY(-2px); box-shadow: 0 8px 24px rgba(0,0,0,0.25); }
.pg-bento-card.span-2 { grid-column: span 2; }
.pg-bento-val { font-size: 34px; font-weight: 900; line-height: 1; margin-bottom: 4px; color: #e0e8f0; }
.pg-bento-label { font-size: 14px; font-weight: 700; color: rgba(255,255,255,0.8); }
.pg-bento-sub { font-size: 13px; color: rgba(255,255,255,0.5); margin-top: 4px; line-height: 1.4; }
.pg-bento-accent { border-left: 4px solid; }
.pg-bento-accent-red { border-color: #dc3545; }
.pg-bento-accent-orange { border-color: #f88a2f; }
.pg-bento-accent-green { border-color: #a7cf28; }
.pg-bento-accent-blue { border-color: #2196f3; }

/* ===== BENTO DESIGN SYSTEM (Dark Glass Aesthetic) ===== */

/* Bento Card Base — Dark glass with colored gradients */
.pg-bento-card {
    background: linear-gradient(135deg, rgba(255,255,255,0.05) 0%, rgba(255,255,255,0.02) 100%);
    border: 1px solid rgba(255,255,255,0.08);
    border-radius: 14px;
    padding: 16px;
    position: relative;
    overflow: hidden;
    color: #e0e8f0;
    transition: transform 0.2s, box-shadow 0.2s;
}
.pg-bento-card:hover { transform: translateY(-2px); box-shadow: 0 8px 24px rgba(0,0,0,0.25); }
.pg-bento-card.span-full, .pg-bento-card.span-2 { grid-column: 1 / -1; }

/* Bento Clickable */
.bento-clickable { cursor: pointer; }
.bento-clickable::after { content: '→'; position: absolute; top: 14px; right: 14px; font-size: 14px; font-weight: 800; color: rgba(255,255,255,0.15); transition: color 0.2s; }
.bento-clickable:hover::after { color: #a7cf28; }

/* Severity Gradient Cards — match mockup aesthetic */
.bento-severity-critical { background: linear-gradient(135deg, rgba(220,53,69,0.12) 0%, rgba(220,53,69,0.04) 100%) !important; border-color: rgba(220,53,69,0.25) !important; }
.bento-severity-moderate { background: linear-gradient(135deg, rgba(248,138,47,0.12) 0%, rgba(248,138,47,0.04) 100%) !important; border-color: rgba(248,138,47,0.25) !important; }
.bento-severity-info { background: linear-gradient(135deg, rgba(56,189,248,0.12) 0%, rgba(56,189,248,0.04) 100%) !important; border-color: rgba(56,189,248,0.25) !important; }
.bento-severity-green { background: linear-gradient(135deg, rgba(167,207,40,0.12) 0%, rgba(167,207,40,0.04) 100%) !important; border-color: rgba(167,207,40,0.25) !important; }
.bento-severity-purple { background: linear-gradient(135deg, rgba(156,39,176,0.12) 0%, rgba(156,39,176,0.04) 100%) !important; border-color: rgba(156,39,176,0.25) !important; }

/* Bento Grid — ALWAYS 2-col, override any inline 1fr */
.pg-bento-grid { display: grid; grid-template-columns: 1fr 1fr !important; gap: 12px; margin-bottom: 16px; }
.pg-bento-grid.pg-glass-layout { grid-template-columns: 1fr !important; }
/* Pages that should always be single-column glass layout */
#lab-results > .pg-bento-grid,
#wearables > .pg-bento-grid,
#genome-dashboard > .pg-bento-grid,
#genetic-risks > .pg-bento-grid,
#insights > .pg-bento-grid,
#trends > .pg-bento-grid,
#alerts > .pg-bento-grid,
#comorbidity > .pg-bento-grid,
#diagnoses > .pg-bento-grid,
#medications > .pg-bento-grid,
#pharmacogenomics > .pg-bento-grid,
#form-medications-summary > .pg-bento-grid,
#form-conditions-summary > .pg-bento-grid { grid-template-columns: 1fr !important; }
/* Nested stat grids inside single-col pages still use auto-fill */
#lab-results .pg-bento-card .pg-bento-grid,
#wearables .pg-bento-card .pg-bento-grid,
#trends .pg-bento-card .pg-bento-grid { grid-template-columns: repeat(auto-fill, minmax(120px, 1fr)) !important; }
/* Nested stat grids inside cards can use auto-fill */
.pg-bento-card .pg-bento-grid { grid-template-columns: repeat(auto-fill, minmax(120px, 1fr)) !important; }
/* ── TABLET BREAKPOINT ── */
@media (max-width: 768px) {
  /* Keep 2-col layout on mobile — bento = at a glance */
  .pg-bento-grid { grid-template-columns: 1fr 1fr !important; }
  .pg-bento-card .pg-bento-grid { grid-template-columns: repeat(auto-fill, minmax(100px, 1fr)) !important; }
  .pg-bento-grid > * { min-width: 0 !important; }
  /* Section labels MUST span full width */
  .pg-bento-grid > div[style*="grid-column:1/-1"] { grid-column: 1 / -1 !important; }
  .pg-bento-grid > div[style*="grid-column: 1/-1"] { grid-column: 1 / -1 !important; }
  /* Span-2 cards go full width in 2-col */
  .pg-bento-card[style*="grid-column:span 2"],
  .pg-bento-card[style*="grid-column: span 2"] { grid-column: 1 / -1 !important; }
  /* 3-col grids → 2-col */
  .pg-bento-grid[style*="1fr 1fr 1fr"] { grid-template-columns: 1fr 1fr !important; }
  /* Quick Stats row: 4-across → 2x2 */
  .pg-bento-card[style*="repeat(4,1fr)"] { grid-template-columns: repeat(2, 1fr) !important; grid-column: 1 / -1 !important; }
  /* Dashboard glass cards: stack vertically */
  .dash-glass-wrap { padding: 12px 10px !important; }
  .dash-glass { padding: 16px !important; margin-bottom: 10px !important; }
  /* Stat grids → single column */
  .stat-grid { grid-template-columns: 1fr !important; }
  /* Page containers */
  .page { padding: 60px 10px 30px !important; }
  /* Headers */
  .pg-header { padding: 20px 16px 16px !important; }
  .pg-header-title { font-size: 20px !important; }
  .pg-header-sub { font-size: 12px !important; }
  .pg-header-stats { gap: 8px !important; flex-wrap: wrap !important; }
  .pg-header-stat { font-size: 11px !important; }
  /* Card padding */
  .pg-bento-card { padding: 14px !important; }
  .pg-provider-card { padding: 14px !important; }
  /* Buttons */
  .pg-bento-btn, .pg-glass-btn { font-size: 13px !important; padding: 10px 14px !important; }
  /* Section headers */
  .pg-bento-section { font-size: 16px !important; padding: 10px 14px !important; }
  /* Menu */
  .menu { width: 85vw !important; max-width: 320px !important; }
  /* Nav bar */
  .nav-bar { padding: 0 8px !important; height: 48px !important; }
  .nav-bar .nav-btn { font-size: 11px !important; padding: 5px 8px !important; }
  .nav-bar .nav-btn .metis-ico { width: 1.4em !important; height: 1.4em !important; }
  .nav-bar .logo { font-size: 18px !important; }
  .nav-bar .logo img { width: 24px !important; height: 24px !important; }
  /* AI engine panel */
  .ai-engine-panel { padding: 16px !important; }
  /* Glass panels */
  .pg-glass { padding: 14px !important; }
  .pg-glass-wrap { padding: 12px !important; }
  /* Bento values */
  .pg-bento-val { font-size: 26px !important; }
  /* AI banner */
  .pg-ai-banner { padding: 10px 12px !important; font-size: 12px !important; }
  .pg-ai-tag { font-size: 9px !important; padding: 2px 6px !important; }
  /* Auto-fill grids → 1 col on narrow screens */
  .pg-bento-grid[style*="auto-fill"] { grid-template-columns: 1fr !important; }
  /* Inline flex rows that overflow */
  .bento-tag-row { gap: 4px !important; }
  .bento-tag { font-size: 10px !important; padding: 2px 8px !important; }
}

/* ── PHONE BREAKPOINT ── */
@media (max-width: 480px) {
  /* Still 2-col — bento = at a glance */
  .pg-bento-grid { grid-template-columns: 1fr 1fr !important; }
  .pg-bento-grid > * { min-width: 0 !important; }
  /* Section labels stay full width */
  .pg-bento-grid > div[style*="grid-column:1/-1"] { grid-column: 1 / -1 !important; }
  .pg-bento-grid > div[style*="grid-column: 1/-1"] { grid-column: 1 / -1 !important; }
  /* Quick Stats: 2x2 still fine */
  .pg-bento-card[style*="repeat(4,1fr)"] { grid-template-columns: repeat(2, 1fr) !important; }
  /* Compact values */
  .pg-bento-val { font-size: 22px !important; }
  /* Compact Health Score SVG */
  .pg-bento-card svg[viewBox="0 0 80 80"] { width: 60px !important; height: 60px !important; }
  /* Tighter card padding */
  .pg-bento-card { padding: 12px !important; }
  .pg-provider-card { padding: 10px !important; }
  /* Page padding */
  .page { padding: 56px 8px 24px !important; }
  /* Smaller headers */
  .pg-header { padding: 16px 12px 12px !important; }
  .pg-header-title { font-size: 17px !important; }
  /* Glass */
  .dash-glass { padding: 14px !important; }
  .pg-glass { padding: 12px !important; }
  /* Stat grid */
  .stat-grid { grid-template-columns: 1fr !important; gap: 10px !important; }
  .stat-card { padding: 14px !important; }
  .stat-value { font-size: 22px !important; }
  /* Action buttons: full width on very small phones */
  .action-btn { display: block !important; text-align: center !important; }
  /* Menu full width on small phone */
  .menu { width: 90vw !important; max-width: 300px !important; }
  /* Stack floating buttons vertically on mobile */
  .metis-feedback-fab { bottom: 80px !important; right: 16px !important; }
  .metis-help-fab { bottom: 136px !important; right: 16px !important; }
  .a11y-fab { bottom: 24px !important; right: 16px !important; }
}

/* ── CTA Button System ── */
.btn-primary {
    background: linear-gradient(135deg, #0ea5e9, #6366f1);
    color: white; border: none; border-radius: 10px;
    padding: 12px 24px; font-size: 14px; font-weight: 600;
    cursor: pointer; width: 100%; font-family: 'Montserrat', sans-serif;
    transition: opacity 0.2s;
}
.btn-primary:hover { opacity: 0.9; }
.btn-secondary {
    background: transparent; color: #0ea5e9;
    border: 1px solid rgba(14,165,233,0.4);
    border-radius: 10px; padding: 10px 24px;
    font-size: 14px; font-weight: 600; cursor: pointer; width: 100%;
    font-family: 'Montserrat', sans-serif;
    transition: background 0.2s;
}
.btn-secondary:hover { background: rgba(14,165,233,0.1); }
.card-actions { padding: 0 0 16px 0; display: flex; gap: 12px; }

/* ── Accessibility Text Scaling ── */
html.text-normal { font-size: 16px; }
html.text-large  { font-size: 20px; }
html.text-xl     { font-size: 24px; }

/* ── CYP Enzyme Card Layout ── */
.cyp-enzyme-grid, .metabolizer-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 12px;
}
.cyp-enzyme-card, .metabolizer-card {
    min-width: 140px;
    flex: 1;
    word-break: break-word;
    overflow-wrap: break-word;
}
@media (max-width: 600px) {
    .cyp-enzyme-grid, .metabolizer-grid { grid-template-columns: repeat(2, 1fr); }
}

/* ── Chart & Metric Card Fixes ── */
.chart-card-title, .metric-card h3, .pg-bento-card h3, .pg-header-title {
    white-space: normal;
    word-break: break-word;
    overflow-wrap: break-word;
}
.chart-container, .metric-chart {
    overflow: hidden;
    position: relative;
}
/* Empty bar fix — always show minimum height */
.chart-bar[data-value="0"], .chart-bar:empty {
    min-height: 4px;
    background: rgba(255,255,255,0.1);
}
.chart-bar[data-value="0"]::after {
    content: 'No data';
    font-size: 10px;
    color: rgba(255,255,255,0.4);
    position: absolute;
    bottom: 8px;
    left: 50%;
    transform: translateX(-50%);
    white-space: nowrap;
}

/* ── MOBILE: keep 2-col bentos, scale content ── */
@media (max-width: 768px) {
  /* Dashboard hero: 2-col, critical alert full-width */
  .dash-hero-grid { grid-template-columns: 1fr 1fr !important; }
  .dash-hero-grid > *:nth-child(2) { grid-column: 1 / -1 !important; }
  /* Full-width special cards */
  .pg-bento-card[style*="grid-column:span 3"],
  .pg-bento-card[style*="grid-column: span 3"] { grid-column: 1 / -1 !important; }
  /* Scale down text in small cards */
  .pg-bento-card div[style*="font-size:36px"] { font-size: 28px !important; }
  .pg-bento-card div[style*="font-size:32px"] { font-size: 26px !important; }
  .pg-bento-card div[style*="font-size:11px"][style*="uppercase"] { font-size: 10px !important; letter-spacing: 0.3px !important; }
}
@media (max-width: 380px) {
  .pg-bento-grid { gap: 8px !important; }
  .pg-bento-card { padding: 10px !important; }
  .pg-bento-card div[style*="font-size:36px"] { font-size: 24px !important; }
}
/* Badge/pill nowrap + flex-wrap fix for all screen sizes */
.pg-bento-card span[style*="inline-block"][style*="border-radius"] { white-space: nowrap !important; }
.pg-bento-card div[style*="display:flex"][style*="gap"] { flex-wrap: wrap !important; }

/* ── HEALTH SCORE RING — proper overlay, no negative margins ── */
.health-score-ring {
    position: relative;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 6px;
}
.health-score-ring svg {
    width: 64px;
    height: 64px;
}
.health-score-num {
    position: absolute;
    font-size: 28px;
    font-weight: 900;
    color: #a7cf28;
    line-height: 1;
}

/* ── DASHBOARD HERO — Intentional spacing at every breakpoint ── */
/* The hero grid on the dashboard (Health Score, Vitals, Alert, AI, Stats) */
.dash-hero {
    gap: 10px;
    margin-bottom: 14px;
}
/* Hero card base — centered content cards (Health Score, AI Correlations, Active Alerts) */
/* NOTE: !important needed to override .pg-bento-card padding rules */
.dash-hero-stat {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    text-align: center;
    padding: 16px 12px !important;
    cursor: pointer;
}
/* Hero card — vitals list (Today's Vitals) */
.dash-hero-vitals {
    display: flex;
    flex-direction: column;
    justify-content: center;
    padding: 16px 14px !important;
    cursor: pointer;
}
.dash-hero-vitals .dash-hero-metric {
    padding: 0 2px;
}
/* Hero card — alert banner (Critical Alert) */
.dash-hero-alert {
    grid-column: 1 / -1;
    padding: 14px 16px !important;
    cursor: pointer;
}
/* Quick stats row — the 4-across stats bar */
.dash-hero-quickstats {
    grid-column: 1 / -1;
    display: grid !important;
    grid-template-columns: repeat(4, 1fr) !important;
    gap: 8px !important;
    padding: 8px 4px !important;
}
.dash-hero-quickstats > div {
    text-align: center;
    cursor: pointer;
    padding: 12px 4px;
    border-radius: 10px;
    transition: background 0.2s;
}
.dash-hero-quickstats > div:hover {
    background: rgba(255,255,255,0.06);
}
/* Hero label typography */
.dash-hero-label {
    font-size: 10px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.6px;
    opacity: 0.6;
    margin-bottom: 6px;
}
/* Hero stat value typography */
.dash-hero-bignum {
    font-size: 30px;
    font-weight: 900;
    line-height: 1;
}
/* Hero metric row (vitals) */
.dash-hero-metric {
    display: flex;
    justify-content: space-between;
    align-items: baseline;
    margin-bottom: 5px;
}
.dash-hero-metric:last-child { margin-bottom: 0; }
.dash-hero-metric-label {
    font-size: 12px;
    opacity: 0.6;
}
.dash-hero-metric-val {
    font-size: 13px;
    font-weight: 800;
}
/* Vital color modifiers */
.vital-hr { color: #ce93d8; }
.vital-spo2 { color: #a7cf28; }
.vital-hrv { color: #f88a2f; }
.vital-sleep { color: #ce93d8; }
/* Vital source badge */
.vital-source-badge {
    display: inline-block;
    font-size: 9px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    color: rgba(255,255,255,0.45);
    margin-top: 8px;
}
/* Vitals card background */
.dash-hero-vitals {
    background: linear-gradient(135deg, rgba(156,39,176,0.12), rgba(156,39,176,0.04));
    border: 1px solid rgba(156,39,176,0.2);
}
/* Quick stat item typography */
.dash-quickstat-val {
    font-size: 24px;
    font-weight: 900;
    line-height: 1;
}
.dash-quickstat-label {
    font-size: 11px;
    opacity: 0.5;
    margin-top: 4px;
}
/* Quick stat color modifiers */
.stat-conditions { color: var(--badge-red-text); }
.stat-medications { color: var(--badge-blue-text); }
.stat-genelinks { color: #a7cf28; }
.stat-sleep { color: #ce93d8; }

/* ══════════════════════════════════════════════════════════════════════════ */
/* ── DESKTOP: COMMAND CENTER ──                                            */
/* The dashboard is not a grid of cards. It's a cockpit.                    */
/* Everything above the fold. 4 columns. Dense. Alive. No dead space.       */
/* ══════════════════════════════════════════════════════════════════════════ */
@media (min-width: 769px) {

    /* Break out of the 960px cage — dashboard gets room to breathe */
    #dashboard {
        max-width: 1200px !important;
        padding-left: 32px !important;
        padding-right: 32px !important;
    }

    /* ── THE GRID: 4 columns, named areas ── */
    /* Double-class selector beats .pg-bento-grid { 1fr 1fr !important } */
    .pg-bento-grid.dash-hero {
        display: grid !important;
        grid-template-columns: 1.1fr 1.6fr 0.9fr 0.9fr !important;
        grid-template-rows: auto auto auto !important;
        grid-template-areas:
            "score  vitals  ai     alerts"
            "banner banner  banner banner"
            "stats  stats   stats  stats" !important;
        gap: 10px !important;
        margin-bottom: 14px;
    }

    /* ── ASSIGN CARDS TO GRID AREAS ── */
    .pg-bento-grid.dash-hero > .dash-hero-stat:first-child {
        grid-area: score !important;
        grid-column: auto !important;
    }
    .pg-bento-grid.dash-hero > .dash-hero-vitals {
        grid-area: vitals !important;
        grid-column: auto !important;
    }
    .pg-bento-grid.dash-hero > .dash-hero-stat:nth-child(4) {
        grid-area: ai !important;
        grid-column: auto !important;
    }
    .pg-bento-grid.dash-hero > .dash-hero-stat:nth-child(5) {
        grid-area: alerts !important;
        grid-column: auto !important;
    }
    .pg-bento-grid.dash-hero > .dash-hero-alert {
        grid-row: 2 !important;
        grid-column: 1 / -1 !important;
    }
    .pg-bento-grid.dash-hero > .dash-hero-quickstats {
        grid-row: 3 !important;
        grid-column: 1 / -1 !important;
    }

    /* ── CARD PADDING — tight, purposeful ── */
    .dash-hero-stat {
        padding: 16px 14px !important;
        min-height: 0 !important;
    }
    .dash-hero-vitals {
        padding: 12px 22px !important;
        min-height: 0 !important;
    }

    /* ── ALERT BANNER: slim horizontal strip ── */
    .dash-hero-alert {
        padding: 10px 20px !important;
        display: flex !important;
        flex-direction: row !important;
        align-items: center !important;
        gap: 12px !important;
        flex-wrap: wrap !important;
        position: relative;
        overflow: hidden;
    }
    .dash-hero-alert > .dash-hero-tag {
        margin-bottom: 0 !important;
        flex-shrink: 0;
    }
    .dash-hero-alert > h3 {
        flex-shrink: 0;
    }
    .dash-hero-alert > p {
        margin-top: 0 !important;
        flex-shrink: 1;
        min-width: 0;
    }
    .dash-hero-alert > .dash-hero-alert-tags {
        margin-top: 0 !important;
        margin-left: auto;
        flex-shrink: 0;
    }

    /* ── QUICK STATS — compact strip ── */
    .dash-hero-quickstats {
        gap: 6px !important;
        padding: 8px 6px !important;
    }
    .dash-hero-quickstats > div {
        padding: 8px 6px;
    }

    /* ── VITALS: tight rows ── */
    .dash-hero-vitals .dash-hero-metric {
        padding: 1px 2px;
        margin-bottom: 2px;
    }
    .dash-hero-vitals .dash-hero-label {
        margin-bottom: 4px !important;
    }

    /* ═══ TYPOGRAPHY: fluid clamp() — scales with viewport, never breaks ═══ */
    .dash-hero-label {
        font-size: clamp(11px, 1.1vw, 14px) !important;
        letter-spacing: 1.2px;
        margin-bottom: 5px;
        opacity: 0.7;
    }
    .dash-hero-bignum {
        font-size: clamp(30px, 3.2vw, 48px);
    }
    .dash-hero-metric-label {
        font-size: clamp(13px, 1.2vw, 17px) !important;
        opacity: 0.7;
    }
    .dash-hero-metric-val {
        font-size: clamp(14px, 1.4vw, 19px) !important;
        font-weight: 900;
    }
    .dash-quickstat-val {
        font-size: clamp(20px, 2.2vw, 32px);
    }
    .dash-quickstat-label {
        font-size: clamp(10px, 0.9vw, 13px);
        margin-top: 2px;
    }
    /* (Health Score "70" now uses .health-score-num class — no inline override needed) */
    /* "+3 this week" */
    .dash-hero-stat div[style*="font-size:11px"] {
        font-size: clamp(10px, 1vw, 13px) !important;
    }
    /* Health Score ring + number */
    .health-score-ring svg {
        width: clamp(56px, 6vw, 80px) !important;
        height: clamp(56px, 6vw, 80px) !important;
    }
    .health-score-num {
        font-size: clamp(24px, 2.6vw, 38px) !important;
    }

    /* Alert text scaling */
    .dash-hero-alert h3 {
        font-size: clamp(13px, 1.3vw, 17px) !important;
    }
    .dash-hero-alert p {
        font-size: clamp(11px, 1vw, 14px) !important;
    }
    .dash-hero-alert .dash-hero-tag {
        font-size: clamp(10px, 0.9vw, 13px) !important;
    }
    .dash-hero-alert-tags span {
        font-size: clamp(9px, 0.85vw, 12px) !important;
    }

    /* ── INSIGHT CARDS: 3-across on desktop, not 2 ── */
    #dashboard > .pg-bento-grid[style*="1fr 1fr"] {
        grid-template-columns: 1fr 1fr 1fr !important;
        gap: 10px !important;
    }
    .pg-bento-card.bento-clickable div[style*="font-size:11px"] {
        font-size: clamp(11px, 1vw, 14px) !important;
    }
    .pg-bento-card.bento-clickable div[style*="font-size:14px"] {
        font-size: clamp(13px, 1.2vw, 17px) !important;
    }
    .pg-bento-card.bento-clickable div[style*="font-size:12px"][style*="opacity"] {
        font-size: clamp(11px, 1vw, 14px) !important;
    }

    /* ── AMBIENT: Health Score glow pulse ── */
    .dash-hero-stat:first-child {
        position: relative;
        overflow: hidden;
    }
    .dash-hero-stat:first-child::before {
        content: '';
        position: absolute;
        top: 50%;
        left: 50%;
        transform: translate(-50%, -50%);
        width: 100px;
        height: 100px;
        border-radius: 50%;
        background: radial-gradient(circle, rgba(167,207,40,0.1) 0%, transparent 70%);
        animation: cockpit-pulse 3s ease-in-out infinite;
        pointer-events: none;
    }

    /* ── AMBIENT: Alert card sweep ── */
    .dash-hero-alert::before {
        content: '';
        position: absolute;
        top: 0; left: 0; right: 0; bottom: 0;
        border-radius: inherit;
        background: linear-gradient(90deg, rgba(220,53,69,0.05) 0%, transparent 40%, transparent 60%, rgba(220,53,69,0.05) 100%);
        animation: alert-sweep 4s ease-in-out infinite;
        pointer-events: none;
    }
}

@keyframes cockpit-pulse {
    0%, 100% { opacity: 0.3; transform: translate(-50%, -50%) scale(0.85); }
    50% { opacity: 0.8; transform: translate(-50%, -50%) scale(1.1); }
}
@keyframes alert-sweep {
    0%, 100% { opacity: 0; }
    50% { opacity: 1; }
}

/* ── TABLET: dashboard hero tightens ── */
@media (max-width: 768px) {
    .dash-hero {
        gap: 8px;
        margin-bottom: 10px;
    }
    .dash-hero-stat {
        padding: 14px 10px !important;
    }
    .dash-hero-vitals {
        padding: 14px 16px !important;
    }
    .dash-hero-alert {
        padding: 12px 14px !important;
    }
    .dash-hero-quickstats {
        grid-template-columns: repeat(2, 1fr) !important;
        gap: 6px !important;
        padding: 6px 2px !important;
    }
    .dash-hero-quickstats > div {
        padding: 10px 4px;
    }
    .dash-hero-bignum {
        font-size: 28px;
    }
    .dash-quickstat-val {
        font-size: 22px;
    }
}

/* ── PHONE: even tighter ── */
@media (max-width: 480px) {
    .dash-hero {
        gap: 6px;
        margin-bottom: 8px;
    }
    .dash-hero-stat {
        padding: 12px 8px !important;
    }
    .dash-hero-vitals {
        padding: 12px 12px !important;
    }
    .dash-hero-alert {
        padding: 10px 12px !important;
    }
    .dash-hero-quickstats > div {
        padding: 8px 2px;
    }
    .dash-hero-bignum {
        font-size: 24px;
    }
    .dash-hero-metric {
        margin-bottom: 4px;
    }
    .dash-hero-metric-val {
        font-size: 12px;
    }
    .dash-quickstat-val {
        font-size: 20px;
    }
}

/* ── EXTRA SMALL ── */
@media (max-width: 380px) {
    .dash-hero {
        gap: 5px;
    }
    .dash-hero-stat {
        padding: 10px 6px !important;
    }
    .dash-hero-vitals {
        padding: 10px 10px !important;
    }
}

/* Bento Typography — light on dark */
.bento-card-header { display: flex; align-items: center; gap: 10px; margin-bottom: 8px; }
.bento-card-header img { flex-shrink: 0; }
.bento-card-title { font-size: 15px; font-weight: 700; color: #fff; margin-bottom: 4px; }
.bento-card-subtitle { font-size: 12px; color: rgba(255,255,255,0.5); }
.bento-card-body { font-size: 12px; color: rgba(255,255,255,0.6); line-height: 1.6; margin-bottom: 8px; }
.bento-card-footer { display: flex; align-items: center; justify-content: space-between; margin-top: 8px; }

/* Bento Metrics — large numbers as visual anchor */
.bento-metric { font-size: 36px; font-weight: 900; line-height: 1; }
.bento-metric-sm { font-size: 24px; font-weight: 800; }
.bento-metric-unit { font-size: 14px; font-weight: 600; opacity: 0.6; }
.bento-label { font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.8px; color: rgba(255,255,255,0.5); margin-bottom: 4px; }

/* Bento Tags */
.bento-tag-row { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 8px; }
.bento-tag { padding: 3px 10px; border-radius: 6px; font-size: 11px; font-weight: 700; }
.bento-tag-red { background: rgba(220,53,69,0.2); color: #ff8a95; }
.bento-tag-orange { background: rgba(248,138,47,0.2); color: #ffc08a; }
.bento-tag-green { background: rgba(167,207,40,0.2); color: #a7cf28; }
.bento-tag-blue { background: rgba(56,189,248,0.2); color: #38bdf8; }
.bento-tag-purple { background: rgba(156,39,176,0.2); color: #ce93d8; }
.bento-tag-default { background: rgba(255,255,255,0.08); color: rgba(255,255,255,0.6); }

/* Bento Badges */
.bento-badge { display: inline-block; padding: 3px 10px; border-radius: 8px; font-size: 11px; font-weight: 700; }
.bento-badge-red { background: rgba(220,53,69,0.2); color: #ff8a95; }
.bento-badge-orange { background: rgba(248,138,47,0.2); color: #ffc08a; }
.bento-badge-green { background: rgba(167,207,40,0.2); color: #a7cf28; }
.bento-badge-blue { background: rgba(56,189,248,0.2); color: #38bdf8; }

/* Bento Progress Bar */
.bento-progress { height: 4px; background: rgba(255,255,255,0.1); border-radius: 4px; overflow: hidden; margin-top: 8px; }
.bento-progress-fill { height: 100%; border-radius: 4px; }

/* Bento Sparkline */
.bento-sparkline { display: flex; align-items: flex-end; gap: 2px; height: 30px; }
.bento-spark-bar { width: 4px; border-radius: 2px; transition: height 0.3s; }

/* Bento Pill Indicators */
.bento-pill { display: flex; align-items: center; gap: 6px; padding: 6px 12px; background: rgba(255,255,255,0.05); border-radius: 20px; font-size: 12px; color: rgba(255,255,255,0.7); }
.bento-pill-dot { width: 6px; height: 6px; border-radius: 50%; }

/* Bento Expandable Detail */
.bento-detail { max-height: 0; overflow: hidden; transition: max-height 0.3s ease; }
.bento-detail.bento-open { max-height: 800px; }
.bento-detail-inner { padding: 12px 0 4px; border-top: 1px solid rgba(255,255,255,0.08); margin-top: 8px; font-size: 12px; color: rgba(255,255,255,0.6); line-height: 1.6; }

/* Bento Section Header */
.pg-bento-section { font-size: 12px; font-weight: 800; text-transform: uppercase; letter-spacing: 2px; color: rgba(255,255,255,0.4); padding: 10px 4px 14px; }

/* Light mode overrides for bento */
body.light-mode .pg-bento-card { background: white; border-color: rgba(0,0,0,0.08); color: #333; }
body.light-mode .bento-card-title { color: #001830; }
body.light-mode .bento-card-subtitle { color: #888; }
body.light-mode .bento-card-body { color: #555; }
body.light-mode .bento-label { color: #999; }
body.light-mode .pg-bento-section { color: #999; }
body.light-mode .bento-clickable::after { color: rgba(0,0,0,0.2); }
body.light-mode .bento-severity-critical { background: rgba(220,53,69,0.06) !important; }
body.light-mode .bento-severity-moderate { background: rgba(248,138,47,0.06) !important; }
body.light-mode .bento-severity-info { background: rgba(56,189,248,0.06) !important; }
body.light-mode .bento-severity-green { background: rgba(167,207,40,0.06) !important; }

/* Bento Provider Cards */
.pg-provider-card {
    background: linear-gradient(135deg, rgba(255,255,255,0.05) 0%, rgba(255,255,255,0.02) 100%);
    border: 1px solid rgba(255,255,255,0.08);
    border-radius: 14px; padding: 20px;
    margin-bottom: 12px; border-left: 4px solid #a7cf28; transition: all 0.2s;
    color: #e0e8f0;
}
.pg-provider-card:hover { transform: translateY(-2px); box-shadow: 0 8px 24px rgba(0,0,0,0.25); }
.pg-provider-card-inactive { border-color: rgba(255,255,255,0.1); }
.pg-provider-name { font-size: 16px; font-weight: 800; color: #fff; margin-bottom: 4px; }
.pg-provider-role { font-size: 14px; font-weight: 700; color: #a7cf28; margin-bottom: 6px; }
.pg-provider-detail { font-size: 14px; line-height: 1.5; color: rgba(255,255,255,0.6); }
.pg-provider-ai {
    margin-top: 10px; padding: 10px 14px; background: rgba(167,207,40,0.1);
    border-radius: 10px; font-size: 13px; color: #c5e864; line-height: 1.5;
    font-weight: 600;
}

/* Bento Section Headers */
.pg-bento-section {
    font-size: 13px; font-weight: 800; text-transform: uppercase;
    letter-spacing: 2px; color: #999; padding: 10px 4px 14px;
}

/* Bento Action Buttons */
.pg-bento-btn {
    display: inline-flex; align-items: center; justify-content: center; gap: 8px;
    background: #001830; color: white; width: 100%;
    border: none; padding: 14px 24px; border-radius: 12px;
    font-weight: 800; font-size: 14px; cursor: pointer;
    font-family: 'Montserrat', sans-serif;
    transition: all 0.2s; min-height: 48px;
    touch-action: manipulation; margin-bottom: 8px;
}
.pg-bento-btn:hover { background: #002a4a; transform: translateY(-1px); }
.pg-bento-btn-outline {
    background: transparent; color: rgba(255,255,255,0.8);
    border: 1px solid rgba(255,255,255,0.15);
}
.pg-bento-btn-outline:hover { border-color: rgba(255,255,255,0.3); background: rgba(255,255,255,0.05); }
.pg-bento-btn-red {
    background: #dc3545; color: white;
}
.pg-bento-btn-red:hover { background: #e04050; }

/* Bento Divider */
.pg-bento-divider {
    height: 1px; background: rgba(0,0,0,0.1);
    margin: 16px 0;
}

/* AI Correlation Banner (for any page) */
.pg-ai-banner {
    background: linear-gradient(135deg, #001830 0%, #0d3a2a 100%);
    border-radius: 14px; padding: 16px 18px; margin-top: 12px;
    display: flex; align-items: center; gap: 12px;
    cursor: pointer; transition: all 0.2s;
}
.pg-ai-banner:hover { transform: translateY(-2px); box-shadow: 0 4px 16px rgba(0,0,0,0.2); }
.pg-ai-banner-icon { font-size: 20px; flex-shrink: 0; }
.pg-ai-banner-text { font-size: 13px; color: rgba(255,255,255,0.85); font-weight: 600; line-height: 1.4; }
.pg-ai-banner-arrow { font-size: 14px; color: rgba(255,255,255,0.5); margin-left: auto; flex-shrink: 0; }

/* Bento is dark by default — light mode overrides */
body.light-mode .pg-bento-card { background: white !important; border-color: rgba(0,0,0,0.08) !important; color: #333 !important; }
body.light-mode .pg-bento-val { color: #001830 !important; }
body.light-mode .pg-bento-label { color: #666 !important; }
body.light-mode .pg-bento-sub { color: #999 !important; }
body.light-mode .pg-provider-card { background: white !important; }
body.light-mode .pg-provider-name { color: #001830 !important; }
body.light-mode .pg-provider-detail { color: #555 !important; }
body.light-mode .pg-provider-ai { background: rgba(167,207,40,0.08) !important; color: #5a7a10 !important; }

/* High contrast for inner pages */
body.high-contrast .pg-glass { border: 2px solid #fff !important; }
body.high-contrast .pg-bento-card { border: 2px solid #000 !important; }
body.high-contrast .pg-provider-card { border: 2px solid #000 !important; }
body.high-contrast .pg-ai-tag { border: 1px solid currentColor; }
body.high-contrast .pg-header { border: 2px solid #fff !important; }

/* ═══ CRITICAL: Force readable text on ALL glass/dark panels ═══ */
/* Override ANY inline color (color:#666, #333, #999, #001830, etc.) inside glass wraps */
.pg-glass-wrap, .pg-glass-wrap * {
    color: rgba(255,255,255,0.93) !important;
}
.pg-glass-wrap strong, .pg-glass-wrap b, .pg-glass-wrap h1,
.pg-glass-wrap h2, .pg-glass-wrap h3, .pg-glass-wrap h4 {
    color: #fff !important;
}
.pg-glass ul, .pg-glass ol { color: rgba(255,255,255,0.93) !important; }
.pg-glass ul li, .pg-glass ol li { color: rgba(255,255,255,0.93) !important; }
/* Preserve colored elements within glass */
.pg-glass-wrap .badge { color: inherit !important; }
.pg-glass-wrap .pg-ai-tag-red, .pg-glass-wrap [class*="tag-red"] { color: #ff8a95 !important; }
.pg-glass-wrap .pg-ai-tag-green, .pg-glass-wrap [class*="tag-green"] { color: #c5e864 !important; }
.pg-glass-wrap .pg-ai-tag-orange, .pg-glass-wrap [class*="tag-orange"] { color: #ffc08a !important; }
.pg-glass-wrap .pg-ai-tag-blue, .pg-glass-wrap [class*="tag-blue"] { color: #82c4f8 !important; }
.pg-glass-wrap .pg-ai-tag-default { color: rgba(255,255,255,0.7) !important; }
.pg-glass-wrap .pg-glass-section { color: rgba(255,255,255,0.75) !important; }
.pg-glass-wrap .pg-glass-btn { color: #c5e864 !important; }
.pg-glass-wrap .pg-glass-btn-outline { color: #a7cf28 !important; }
.pg-glass-wrap .pg-glass-btn-red { color: #ff8a95 !important; }
.pg-glass-wrap .pg-glass-btn-blue { color: #82c4f8 !important; }
.pg-glass-wrap .badge-red { color: #ff8a95 !important; }
.pg-glass-wrap .badge-green { color: #c5e864 !important; }
.pg-glass-wrap .badge-orange { color: #ffc08a !important; }
.pg-glass-wrap .badge-blue { color: #82c4f8 !important; }
.pg-glass-wrap .pg-severity-critical { color: #ff6b7a !important; }
.pg-glass-wrap .pg-severity-warning { color: #ffc08a !important; }
.pg-glass-wrap .pg-severity-info { color: #82c4f8 !important; }
.pg-glass-wrap .pg-severity-good { color: #c5e864 !important; }
/* Preserve green accent on styled elements like condition names */
.pg-glass-wrap [style*="color:#a7cf28"], .pg-glass-wrap [style*="color: #a7cf28"] { color: #c5e864 !important; }
.pg-glass-wrap [style*="color:#dc3545"], .pg-glass-wrap [style*="color: #dc3545"] { color: #ff8a95 !important; }
.pg-glass-wrap [style*="color:#2196f3"], .pg-glass-wrap [style*="color: #2196f3"] { color: #82c4f8 !important; }
.pg-glass-wrap [style*="color:#f88a2f"], .pg-glass-wrap [style*="color: #f88a2f"] { color: #ffc08a !important; }
.pg-glass-wrap [style*="color:#9c27b0"], .pg-glass-wrap [style*="color: #9c27b0"] { color: #ce93d8 !important; }
.pg-glass-wrap [style*="color:#ff8a95"] { color: #ff8a95 !important; }
.pg-glass-wrap [style*="color:#ffcccc"] { color: #ffcccc !important; }
.pg-glass-wrap [style*="color:#c5e864"] { color: #c5e864 !important; }
.pg-glass-wrap [style*="color:#82c4f8"] { color: #82c4f8 !important; }
/* Dark glass text on bento cards within glass */
.pg-glass-wrap .pg-bento-card, .pg-glass-wrap .pg-bento-card * {
    color: #e0e8f0 !important;
}
.pg-glass-wrap .pg-bento-card .pg-bento-label { color: #aaa !important; }
.pg-glass-wrap .pg-bento-card .pg-bento-sub { color: #888 !important; }
.pg-glass-wrap .pg-bento-card .pg-bento-val { color: #e0e8f0 !important; }
.pg-glass-wrap .pg-bento-btn, .pg-glass-wrap .action-btn { color: #a7cf28 !important; }
/* Fix header stat colors */
.pg-header, .pg-header * { color: rgba(255,255,255,0.92) !important; }
.pg-header .pg-header-title { color: white !important; }
.pg-header .pg-header-sub { color: rgba(255,255,255,0.88) !important; }
/* Also fix text inside pg-glass directly (not inside pg-glass-wrap) */
.pg-glass, .pg-glass * { color: rgba(255,255,255,0.93) !important; }
.pg-glass strong, .pg-glass b { color: #fff !important; }
.pg-glass .badge { color: inherit !important; }
.pg-glass .pg-ai-tag-red { color: #ff8a95 !important; }
.pg-glass .pg-ai-tag-green { color: #c5e864 !important; }
.pg-glass .pg-ai-tag-orange { color: #ffc08a !important; }
.pg-glass .pg-ai-tag-blue { color: #82c4f8 !important; }
.pg-glass [style*="color:#a7cf28"] { color: #c5e864 !important; }
.pg-glass [style*="color:#dc3545"] { color: #ff8a95 !important; }
.pg-glass [style*="color:#ff8a95"] { color: #ff8a95 !important; }
.pg-glass [style*="color:#ffcccc"] { color: #ffcccc !important; }
/* Fix alerts inside glass panels — use light-readable colors */
.pg-glass .alert, .pg-glass .alert * { color: #c5e864 !important; }
.pg-glass .alert-orange, .pg-glass .alert-orange * { color: #ffc08a !important; }
.pg-glass .alert-red, .pg-glass .alert-red * { color: #ff8a95 !important; }
/* Forms within glass - input fields */
.pg-glass-wrap input, .pg-glass-wrap select, .pg-glass-wrap textarea {
    color: #fff !important;
    background: rgba(255,255,255,0.1) !important;
    border-color: rgba(255,255,255,0.3) !important;
}
.pg-glass-wrap input::placeholder { color: rgba(255,255,255,0.5) !important; }
/* Upload page text overflow fix */
.pg-glass .pg-glass-body { word-break: break-word !important; overflow-wrap: break-word !important; }
/* Forms bento grid responsive — handled by main mobile media queries above */
.pg-bento-card { overflow: hidden; word-break: break-word; }

/* === GLOBAL GLASS-PANEL READABILITY FIXES === */
/* stat-card inside glass panels: dark glass background instead of white */
.pg-glass .stat-card, .pg-glass-wrap .stat-card {
    background: rgba(255,255,255,0.08) !important;
    border: 1px solid rgba(255,255,255,0.15) !important;
    border-radius: 12px !important;
}
.pg-glass .stat-card .stat-value, .pg-glass .stat-card .stat-label,
.pg-glass-wrap .stat-card .stat-value, .pg-glass-wrap .stat-card .stat-label {
    color: rgba(255,255,255,0.93) !important;
}
/* Colored stat-values keep their accent colors */
.pg-glass .stat-card .stat-value[style*="color:#f88a2f"] { color: #ffc08a !important; }
.pg-glass .stat-card .stat-value[style*="color:#2196f3"] { color: #82c4f8 !important; }
.pg-glass .stat-card .stat-value[style*="color:#a7cf28"] { color: #c5e864 !important; }
.pg-glass .stat-card .stat-value[style*="color:#dc3545"] { color: #ff8a95 !important; }
.pg-glass .stat-card .stat-value[style*="color:#001830"] { color: #c5e864 !important; }

/* Fix inline light backgrounds inside glass panels — make them dark glass */
.pg-glass div[style*="background: rgba(33,150,243,0.12)"],
.pg-glass div[style*="background: rgba(33,150,243,0.12)"],
.pg-glass div[style*="background: rgba(248,138,47,0.15)"],
.pg-glass div[style*="background: rgba(248,138,47,0.15)"],
.pg-glass div[style*="background: rgba(167,207,40,0.12)"],
.pg-glass div[style*="background: rgba(167,207,40,0.12)"],
.pg-glass div[style*="background: rgba(220,53,69,0.12)"],
.pg-glass div[style*="background: rgba(220,53,69,0.12)"],
.pg-glass div[style*="background: rgba(255,255,255,0.06)"],
.pg-glass div[style*="background: rgba(255,255,255,0.06)"],
.pg-glass div[style*="background: white"],
.pg-glass div[style*="background:white"],
.pg-glass div[style*="background: #fff"],
.pg-glass div[style*="background:#fff"] {
    background: rgba(255,255,255,0.06) !important;
    border-left-color: inherit !important;
}
/* Catch any remaining light backgrounds inside glass panels */
.pg-glass div[style*="background:#f9f9f9"],
.pg-glass div[style*="background: #f9f9f9"],
.pg-glass div[style*="background:#f0f0f0"],
.pg-glass div[style*="background: #f0f0f0"],
.pg-glass div[style*="background-color: #f5f7fa"],
.pg-glass div[style*="background:#f5f7fa"],
.pg-glass td[style*="background:#f9f9f9"],
.pg-glass td[style*="background:#f0f0f0"],
.pg-glass tr[style*="background:#f0f0f0"] {
    background: rgba(255,255,255,0.06) !important;
    color: #e0e8f0 !important;
}
/* Ensure table text in glass panels is always readable */
.pg-glass table { color: #e0e8f0; }
.pg-glass table th { color: #38bdf8 !important; }
.pg-glass table td { color: #e0e8f0; }
.pg-glass table tr { border-color: rgba(255,255,255,0.1) !important; }
/* Override ALL inline dark text inside glass panels — catch-all */
.pg-glass [style*="color:#001830"] { color: rgba(255,255,255,0.93) !important; }
.pg-glass [style*="color: #001830"] { color: rgba(255,255,255,0.93) !important; }
.pg-glass [style*="color:#333"] { color: rgba(255,255,255,0.85) !important; }
.pg-glass [style*="color: #333"] { color: rgba(255,255,255,0.85) !important; }
.pg-glass [style*="color:#666"] { color: rgba(255,255,255,0.6) !important; }
.pg-glass [style*="color: #666"] { color: rgba(255,255,255,0.6) !important; }
.pg-glass [style*="color:#555"] { color: rgba(255,255,255,0.7) !important; }
.pg-glass [style*="color: #555"] { color: rgba(255,255,255,0.7) !important; }
.pg-glass [style*="color:#222"] { color: rgba(255,255,255,0.9) !important; }
.pg-glass [style*="color: #222"] { color: rgba(255,255,255,0.9) !important; }
.pg-glass [style*="color:#155724"] { color: #c5e864 !important; }
.pg-glass [style*="color: #155724"] { color: #c5e864 !important; }
/* Override dark borders inside glass panels */
.pg-glass [style*="border-top:1px solid rgba(0,0,0"] { border-top-color: rgba(255,255,255,0.1) !important; }
.pg-glass [style*="border-bottom:1px solid rgba(0,0,0"] { border-bottom-color: rgba(255,255,255,0.1) !important; }
/* Ensure green accent (#28a745) stays visible in glass */
.pg-glass [style*="color:#28a745"] { color: #6fcf7f !important; }
.pg-glass [style*="color: #28a745"] { color: #6fcf7f !important; }
/* Insight cards inside glass panels */
.pg-glass .insight-card { background: rgba(255,255,255,0.06) !important; border-color: rgba(255,255,255,0.15) !important; color: #e0e8f0 !important; }
.pg-glass .insight-card .card-title { color: #38bdf8 !important; }
.pg-glass .insight-card strong { color: #fff !important; }
.pg-glass .insight-card .insight-tag { background: rgba(56,189,248,0.2) !important; color: #a7cf28 !important; }

/* Fix bento cards that appear inside glass-wrap — dark glass style */
.pg-glass-wrap .pg-bento-card {
    background: rgba(255,255,255,0.06) !important;
    border: 1px solid rgba(255,255,255,0.1) !important;
}
.pg-glass-wrap .pg-bento-card, .pg-glass-wrap .pg-bento-card * {
    color: #e0e8f0 !important;
}
.pg-glass-wrap .pg-bento-card .pg-bento-label { color: #aaa !important; }
.pg-glass-wrap .pg-bento-card .pg-bento-sub { color: #888 !important; }
.pg-glass-wrap .pg-bento-card .pg-bento-val { color: #e0e8f0 !important; }
.pg-glass-wrap .pg-bento-card .badge { color: white !important; }

/* Fix appointments page font sizes */
#appointments .pg-bento-card .pg-bento-val { font-size: 16px !important; }
#appointments .pg-bento-card .pg-bento-label { font-size: 12px !important; }
#appointments .pg-bento-card .pg-bento-sub { font-size: 12px !important; }

/* Fix badges inside bento cards */
.badge { display: inline-block; padding: 4px 10px; border-radius: 20px; font-size: 11px; font-weight: 700; }
.badge-green { background: #a7cf28; color: white !important; }
.badge-red { background: #dc3545; color: white !important; }
.badge-blue { background: #2196f3; color: white !important; }
/* WCAG 2.1 AA fix 2026-05-08: white-on-#f88a2f orange = 2.69:1 (fail).
   Black on orange-500 = 9.5:1 (pass). Veterans on screen readers and
   low-vision can now read orange "Not Connected" / warning badges. */
.badge-orange { background: #f88a2f; color: #1a0f00 !important; }
.badge-purple { background: #9c27b0; color: white !important; }

/* ══════════════════════════════════════════════════════════════
   LIGHT MODE — Clean Light Theme
   White backgrounds, blue accents, dark readable text
   Activated via Accessibility panel toggle
   ══════════════════════════════════════════════════════════════ */

/* --- Base --- */
body.light-mode { background: #f0f4f8 !important; color: #1a1a1a !important; }

/* --- Navigation Bar --- */
body.light-mode .nav-bar {
    background: #1a5276;
    box-shadow: 0 2px 12px rgba(0,0,0,0.08) !important;
}
body.light-mode .nav-bar .logo { color: #1a1a1a !important; }
body.light-mode .nav-btn {
    border-color: #2563eb !important;
    color: #2563eb !important;
}
body.light-mode .nav-btn:hover {
    background: #2563eb !important;
    color: white !important;
}

/* --- Menu --- */
body.light-mode .menu { background: #fff !important; }
body.light-mode .menu-header {
    background: linear-gradient(135deg, #2563eb 0%, #1d4ed8 100%) !important;
    color: white !important;
}
body.light-mode .menu-close-label {
    background: linear-gradient(135deg, #2563eb 0%, #1d4ed8 100%) !important;
    color: white !important;
}
body.light-mode .menu-section { border-bottom-color: #e5e7eb !important; }
body.light-mode .menu-section-title { color: #6b7280 !important; }
body.light-mode .menu-item { color: #374151 !important; }
body.light-mode .menu-item:hover { background: #eff6ff !important; color: #2563eb !important; }

/* --- Page Background & Cards --- */
body.light-mode .page { color: #1a1a1a !important; }
body.light-mode .card {
    background: #ffffff !important;
    border: 1px solid #e5e7eb !important;
    box-shadow: 0 2px 10px rgba(0,0,0,0.06) !important;
    color: #1a1a1a !important;
}
body.light-mode .card-title { color: #1a1a1a !important; }
body.light-mode .card-subtitle { color: #64748b !important; }

/* --- Stat Cards --- */
body.light-mode .stat-card {
    background: #ffffff !important;
    border: 1px solid #e5e7eb !important;
    box-shadow: 0 2px 8px rgba(0,0,0,0.05) !important;
}
body.light-mode .stat-value { color: #1e293b !important; }
body.light-mode .stat-label { color: #64748b !important; }

/* --- List Items --- */
body.light-mode .list-item {
    background: #f8fafc !important;
    border-left-color: #2563eb !important;
}
body.light-mode .list-title { color: #1a1a1a !important; }
body.light-mode .list-subtitle { color: #475569 !important; }

/* --- Timeline --- */
body.light-mode .timeline-item {
    background: #f8fafc !important;
    border-left-color: #2563eb !important;
}
body.light-mode .timeline-item:before {
    background: #2563eb !important;
    border-color: white !important;
    box-shadow: 0 0 0 2px #2563eb !important;
}
body.light-mode .timeline-year { color: #1a1a1a !important; }
body.light-mode .timeline-event { color: #475569 !important; }
body.light-mode .timeline-detail { color: #94a3b8 !important; }

/* --- Insight Card --- */
body.light-mode .insight-card {
    background: #ffffff !important;
    border-color: #2563eb !important;
    color: #1a1a1a !important;
}
body.light-mode .insight-card .card-title { color: #1e293b !important; }
body.light-mode .insight-tag {
    background: #eff6ff !important;
    color: #2563eb !important;
}

/* --- Buttons --- */
body.light-mode .action-btn {
    background: linear-gradient(135deg, #2563eb 0%, #1d4ed8 100%) !important;
    color: white !important;
}
body.light-mode .action-btn:hover {
    box-shadow: 0 6px 20px rgba(37,99,235,0.4) !important;
}
body.light-mode .action-btn-secondary {
    background: white !important;
    border-color: #2563eb !important;
    color: #2563eb !important;
}
body.light-mode .action-btn-secondary:hover {
    background: #eff6ff !important;
}

/* --- Alerts --- */
body.light-mode .alert {
    background: #f0fdf4 !important;
    border-color: #22c55e !important;
    color: #166534 !important;
}
body.light-mode .alert-orange {
    background: #fff7ed !important;
    border-color: #f97316 !important;
    color: #9a3412 !important;
}
body.light-mode .alert-red {
    background: #fef2f2 !important;
    border-color: #ef4444 !important;
    color: #991b1b !important;
}

/* --- Badges --- */
body.light-mode .badge-green { background: #22c55e !important; color: white !important; }
body.light-mode .badge-red { background: #ef4444 !important; color: white !important; }
body.light-mode .badge-blue { background: #2563eb !important; color: white !important; }
body.light-mode .badge-orange { background: #f97316 !important; color: white !important; }
body.light-mode .badge-purple { background: #7c3aed !important; color: white !important; }

/* --- Rx Cost --- */
body.light-mode .rx-cost {
    background: #fff7ed !important;
    border-color: #fed7aa !important;
}
body.light-mode .rx-cost-label { color: #9a3412 !important; }
body.light-mode .rx-cost-value { color: #9a3412 !important; }

/* --- Bar Chart (Oura) --- */
body.light-mode .bar-label { color: #64748b !important; }
body.light-mode .bar-val { color: #1e293b !important; }
body.light-mode .legend-item { color: #475569 !important; }
body.light-mode .metric-row { border-bottom-color: #e5e7eb !important; }
body.light-mode .metric-label { color: #475569 !important; }
body.light-mode .metric-value { color: #1e293b !important; }

/* --- Dividers --- */
body.light-mode .dash-divider-line { background: #e5e7eb !important; }
body.light-mode .dash-divider-text { color: #94a3b8 !important; }
body.light-mode .dash-footer-note { color: #94a3b8 !important; }
body.light-mode .dash-footer-note strong { color: #2563eb !important; }

/* ===== DASHBOARD LIGHT MODE ===== */

/* Hero Alert — keep dark/dramatic for emphasis */
body.light-mode .dash-hero-alert {
    background: linear-gradient(135deg, #fef2f2 0%, #fee2e2 100%) !important;
    border: 2px solid #fca5a5 !important;
    color: #991b1b !important;
}
body.light-mode .dash-hero-alert h3 { color: #991b1b !important; }
body.light-mode .dash-hero-alert p { color: #b91c1c !important; }
body.light-mode .dash-hero-tag { color: #dc2626 !important; }
body.light-mode .dash-hero-btn {
    background: #ef4444 !important;
    color: white !important;
}

/* Pulse Data Ring Cards */
body.light-mode .dash-pulse-card {
    background: #ffffff !important;
    box-shadow: 0 2px 10px rgba(0,0,0,0.06) !important;
    border: 1px solid #e5e7eb !important;
}
body.light-mode .dash-pulse-label { color: #1e293b !important; }
body.light-mode .dash-pulse-sub { color: #64748b !important; }
body.light-mode .dash-ring-inner { background: white !important; }
body.light-mode .dash-ring-val { color: #1e293b !important; }
body.light-mode .dash-ring-unit { color: #94a3b8 !important; }

/* Dashboard Glass Wrap & Cards */
body.light-mode .dash-glass-wrap {
    background: #f0f4f8 !important;
    border: 1px solid #e5e7eb !important;
    border-radius: 22px !important;
}
body.light-mode .dash-glass {
    background: #ffffff !important;
    backdrop-filter: none !important;
    -webkit-backdrop-filter: none !important;
    border: 1px solid #e5e7eb !important;
    box-shadow: 0 2px 8px rgba(0,0,0,0.05) !important;
    color: #1a1a1a !important;
}
body.light-mode .dash-glass:hover {
    background: #f8fafc !important;
    box-shadow: 0 6px 20px rgba(0,0,0,0.1) !important;
}
body.light-mode .dash-glass-title { color: #1e293b !important; }
body.light-mode .dash-glass-sub { color: #64748b !important; }
body.light-mode .dash-glass-body { color: #475569 !important; }
body.light-mode .dash-glass-ico {
    background: #eff6ff !important;
}
body.light-mode .dash-glass-arrow {
    background: #f1f5f9 !important;
    color: #94a3b8 !important;
}
body.light-mode .dash-glass:hover .dash-glass-arrow {
    background: #e2e8f0 !important;
    color: #475569 !important;
}

/* Dashboard AI Chips — solid light backgrounds */
body.light-mode .dash-ai-chip.chip-green { background: #f0fdf4 !important; color: #166534 !important; }
body.light-mode .dash-ai-chip.chip-red { background: #fef2f2 !important; color: #991b1b !important; }
body.light-mode .dash-ai-chip.chip-orange { background: #fff7ed !important; color: #9a3412 !important; }
body.light-mode .dash-ai-chip.chip-default { background: #eff6ff !important; color: #1e40af !important; }

/* Dashboard Glass Badges */
body.light-mode .dash-glass-badge.bg-green { background: #dcfce7 !important; color: #166534 !important; }
body.light-mode .dash-glass-badge.bg-red { background: #fee2e2 !important; color: #991b1b !important; }
body.light-mode .dash-glass-badge.bg-orange { background: #ffedd5 !important; color: #9a3412 !important; }
body.light-mode .dash-glass-badge.bg-blue { background: #dbeafe !important; color: #1e40af !important; }

/* ===== INNER PAGE LIGHT MODE ===== */

/* Page Headers */
body.light-mode .pg-header {
    background: linear-gradient(135deg, #2563eb 0%, #1d4ed8 100%) !important;
    border: none !important;
    color: white !important;
}
body.light-mode .pg-header-red {
    background: linear-gradient(135deg, #ef4444 0%, #dc2626 100%) !important;
}
body.light-mode .pg-header-green {
    background: linear-gradient(135deg, #22c55e 0%, #16a34a 100%) !important;
}
body.light-mode .pg-header-blue {
    background: linear-gradient(135deg, #2563eb 0%, #1d4ed8 100%) !important;
}
body.light-mode .pg-header-orange {
    background: linear-gradient(135deg, #f97316 0%, #ea580c 100%) !important;
}
body.light-mode .pg-header, body.light-mode .pg-header * { color: white !important; }

/* Glass Page Wrapper → Light card container */
body.light-mode .pg-glass-wrap,
body.light-mode .pg-glass-wrap-red,
body.light-mode .pg-glass-wrap-blue {
    background: #f0f4f8 !important;
    border: 1px solid #e5e7eb !important;
}

/* CRITICAL: Override ALL glass-wrap text to dark */
body.light-mode .pg-glass-wrap,
body.light-mode .pg-glass-wrap * {
    color: #1a1a1a !important;
}
body.light-mode .pg-glass-wrap strong,
body.light-mode .pg-glass-wrap b,
body.light-mode .pg-glass-wrap h1,
body.light-mode .pg-glass-wrap h2,
body.light-mode .pg-glass-wrap h3,
body.light-mode .pg-glass-wrap h4 {
    color: #0f172a !important;
}

/* Glass Cards → White cards with border */
body.light-mode .pg-glass {
    background: #ffffff !important;
    backdrop-filter: none !important;
    -webkit-backdrop-filter: none !important;
    border: 1px solid #e5e7eb !important;
    box-shadow: 0 2px 8px rgba(0,0,0,0.05) !important;
    color: #1a1a1a !important;
}
body.light-mode .pg-glass:hover {
    box-shadow: 0 4px 16px rgba(0,0,0,0.08) !important;
}
body.light-mode .pg-glass-clickable:hover {
    background: #f8fafc !important;
    box-shadow: 0 6px 20px rgba(0,0,0,0.1) !important;
}

/* CRITICAL: Override ALL glass text to dark */
body.light-mode .pg-glass,
body.light-mode .pg-glass * {
    color: #1a1a1a !important;
}
body.light-mode .pg-glass strong,
body.light-mode .pg-glass b {
    color: #0f172a !important;
}

/* Glass titles & body text */
body.light-mode .pg-glass-title { color: #0f172a !important; }
body.light-mode .pg-glass-body { color: #475569 !important; }
body.light-mode .pg-glass-body strong { color: #0f172a !important; }
body.light-mode .pg-glass-section { color: #64748b !important; }
body.light-mode .pg-bento-divider { background: #e5e7eb !important; }

/* Glass List Items */
body.light-mode .pg-glass-list-item {
    border-bottom-color: #e5e7eb !important;
}
body.light-mode .pg-glass-list-title { color: #1e293b !important; }
body.light-mode .pg-glass-list-sub { color: #475569 !important; }

/* Severity Indicators → solid dark-readable colors */
body.light-mode .pg-severity-critical { color: #dc2626 !important; }
body.light-mode .pg-severity-warning { color: #ea580c !important; }
body.light-mode .pg-severity-info { color: #2563eb !important; }
body.light-mode .pg-severity-good { color: #16a34a !important; }

/* Glass Badges → solid light backgrounds */
body.light-mode .pg-badge-green { background: #dcfce7 !important; color: #166534 !important; }
body.light-mode .pg-badge-red { background: #fee2e2 !important; color: #991b1b !important; }
body.light-mode .pg-badge-orange { background: #ffedd5 !important; color: #9a3412 !important; }
body.light-mode .pg-badge-blue { background: #dbeafe !important; color: #1e40af !important; }

/* AI Tags → light pill backgrounds */
body.light-mode .pg-ai-tag-green { background: #f0fdf4 !important; color: #166534 !important; }
body.light-mode .pg-ai-tag-red { background: #fef2f2 !important; color: #991b1b !important; }
body.light-mode .pg-ai-tag-orange { background: #fff7ed !important; color: #9a3412 !important; }
body.light-mode .pg-ai-tag-blue { background: #eff6ff !important; color: #1e40af !important; }
body.light-mode .pg-ai-tag-default { background: #f1f5f9 !important; color: #475569 !important; }

/* Glass Buttons → solid blue/colored */
body.light-mode .pg-glass-btn {
    background: #2563eb !important;
    color: white !important;
    border-color: #2563eb !important;
}
body.light-mode .pg-glass-btn:hover {
    background: #1d4ed8 !important;
}
body.light-mode .pg-glass-btn-red {
    background: #ef4444 !important;
    color: white !important;
    border-color: #ef4444 !important;
}
body.light-mode .pg-glass-btn-blue {
    background: #2563eb !important;
    color: white !important;
    border-color: #2563eb !important;
}
body.light-mode .pg-glass-btn-outline {
    background: white !important;
    color: #2563eb !important;
    border-color: #2563eb !important;
}
body.light-mode .pg-glass-btn-outline:hover {
    background: #eff6ff !important;
    color: #1d4ed8 !important;
}

/* Bento Cards (already light — ensure consistency) */
body.light-mode .pg-bento-card {
    background: #ffffff !important;
    box-shadow: 0 2px 10px rgba(0,0,0,0.06) !important;
    border: 1px solid #f1f5f9 !important;
}
body.light-mode .pg-bento-card, body.light-mode .pg-bento-card * { color: #1a1a1a !important; }
body.light-mode .pg-bento-val { color: #0f172a !important; }
body.light-mode .pg-bento-label { color: #475569 !important; }
body.light-mode .pg-bento-sub { color: #94a3b8 !important; }
body.light-mode .pg-bento-section { color: #64748b !important; }
body.light-mode .pg-bento-accent-red { border-color: #ef4444 !important; }
body.light-mode .pg-bento-accent-orange { border-color: #f97316 !important; }
body.light-mode .pg-bento-accent-green { border-color: #22c55e !important; }
body.light-mode .pg-bento-accent-blue { border-color: #2563eb !important; }

/* Bento Buttons */
body.light-mode .pg-bento-btn {
    background: #2563eb !important;
    color: white !important;
}
body.light-mode .pg-bento-btn:hover { background: #1d4ed8 !important; }
body.light-mode .pg-bento-btn-outline {
    background: transparent !important;
    color: #2563eb !important;
    border-color: #2563eb !important;
}

/* Provider Cards */
body.light-mode .pg-provider-card {
    background: #ffffff !important;
    border-left-color: #2563eb !important;
    box-shadow: 0 2px 10px rgba(0,0,0,0.06) !important;
}
body.light-mode .pg-provider-name { color: #0f172a !important; }
body.light-mode .pg-provider-role { color: #2563eb !important; }
body.light-mode .pg-provider-detail { color: #475569 !important; }
body.light-mode .pg-provider-ai {
    background: #eff6ff !important;
    color: #1e40af !important;
}

/* AI Banner */
body.light-mode .pg-ai-banner {
    background: linear-gradient(135deg, #eff6ff 0%, #dbeafe 100%) !important;
    border: 1px solid #bfdbfe !important;
}
body.light-mode .pg-ai-banner:hover {
    box-shadow: 0 4px 16px rgba(37,99,235,0.15) !important;
}
body.light-mode .pg-ai-banner-text { color: #1e40af !important; }
body.light-mode .pg-ai-banner-arrow { color: #93c5fd !important; }

/* Stat-cards inside glass in light mode */
body.light-mode .pg-glass .stat-card,
body.light-mode .pg-glass-wrap .stat-card {
    background: #f8fafc !important;
    border: 1px solid #e5e7eb !important;
}
body.light-mode .pg-glass .stat-card .stat-value,
body.light-mode .pg-glass .stat-card .stat-label,
body.light-mode .pg-glass-wrap .stat-card .stat-value,
body.light-mode .pg-glass-wrap .stat-card .stat-label {
    color: #1e293b !important;
}

/* Fix: Force accent colors in light mode glass */
body.light-mode .pg-glass-wrap [style*="color:#a7cf28"],
body.light-mode .pg-glass-wrap [style*="color: #a7cf28"],
body.light-mode .pg-glass [style*="color:#a7cf28"],
body.light-mode .pg-glass [style*="color: #a7cf28"] { color: #16a34a !important; }
body.light-mode .pg-glass-wrap [style*="color:#c5e864"],
body.light-mode .pg-glass [style*="color:#c5e864"] { color: #16a34a !important; }

body.light-mode .pg-glass-wrap [style*="color:#dc3545"],
body.light-mode .pg-glass-wrap [style*="color: #dc3545"],
body.light-mode .pg-glass [style*="color:#dc3545"],
body.light-mode .pg-glass [style*="color: #dc3545"] { color: #dc2626 !important; }
body.light-mode .pg-glass-wrap [style*="color:#ff8a95"],
body.light-mode .pg-glass [style*="color:#ff8a95"] { color: #dc2626 !important; }

body.light-mode .pg-glass-wrap [style*="color:#2196f3"],
body.light-mode .pg-glass-wrap [style*="color: #2196f3"],
body.light-mode .pg-glass [style*="color:#2196f3"],
body.light-mode .pg-glass [style*="color: #2196f3"] { color: #2563eb !important; }
body.light-mode .pg-glass-wrap [style*="color:#82c4f8"],
body.light-mode .pg-glass [style*="color:#82c4f8"] { color: #2563eb !important; }

body.light-mode .pg-glass-wrap [style*="color:#f88a2f"],
body.light-mode .pg-glass-wrap [style*="color: #f88a2f"],
body.light-mode .pg-glass [style*="color:#f88a2f"],
body.light-mode .pg-glass [style*="color: #f88a2f"] { color: #ea580c !important; }
body.light-mode .pg-glass-wrap [style*="color:#ffc08a"],
body.light-mode .pg-glass [style*="color:#ffc08a"] { color: #ea580c !important; }

body.light-mode .pg-glass-wrap [style*="color:#9c27b0"],
body.light-mode .pg-glass-wrap [style*="color: #9c27b0"],
body.light-mode .pg-glass [style*="color:#9c27b0"] { color: #7c3aed !important; }
body.light-mode .pg-glass-wrap [style*="color:#ce93d8"],
body.light-mode .pg-glass [style*="color:#ce93d8"] { color: #7c3aed !important; }

/* Forms within glass in light mode */
body.light-mode .pg-glass-wrap input,
body.light-mode .pg-glass-wrap select,
body.light-mode .pg-glass-wrap textarea {
    color: #1a1a1a !important;
    background: #f8fafc !important;
    border-color: #d1d5db !important;
}
body.light-mode .pg-glass-wrap input::placeholder { color: #94a3b8 !important; }

/* Inline background fixes — light mode doesn't need dark glass treatment */
body.light-mode .pg-glass div[style*="background: rgba(255,255,255,0.06)"],
body.light-mode .pg-glass div[style*="background: rgba(33,150,243"],
body.light-mode .pg-glass div[style*="background: rgba(248,138,47"],
body.light-mode .pg-glass div[style*="background: rgba(167,207,40"],
body.light-mode .pg-glass div[style*="background: rgba(220,53,69"] {
    background: #f8fafc !important;
}

/* Big Stat */
body.light-mode .big-stat {
    background: linear-gradient(135deg, #2563eb 0%, #1d4ed8 100%) !important;
    box-shadow: 0 6px 20px rgba(37,99,235,0.3) !important;
}

/* Password Gate */
body.light-mode #password-gate {
    background: linear-gradient(135deg, #f0f4f8 0%, #e2e8f0 100%) !important;
}

/* A11y Panel in light mode — keep consistent */
body.light-mode .a11y-panel { background: #ffffff !important; color: #1a1a1a !important; }
body.light-mode .a11y-panel h3 { color: #0f172a !important; }
body.light-mode .a11y-fab {
    background: #2563eb !important;
    box-shadow: 0 4px 16px rgba(37,99,235,0.4) !important;
}
body.light-mode .a11y-fab:hover { background: #1d4ed8 !important; }

/* Badge color overrides for light mode within glass */
body.light-mode .pg-glass-wrap .badge-green { background: #22c55e !important; color: white !important; }
body.light-mode .pg-glass-wrap .badge-red { background: #ef4444 !important; color: white !important; }
body.light-mode .pg-glass-wrap .badge-blue { background: #2563eb !important; color: white !important; }
body.light-mode .pg-glass-wrap .badge-orange { background: #f97316 !important; color: white !important; }
body.light-mode .pg-glass-wrap .badge { color: white !important; }

/* Smooth transition for theme switching */
body.light-mode, body.light-mode *,
body.light-mode .pg-glass-wrap, body.light-mode .pg-glass,
body.light-mode .nav-bar, body.light-mode .menu {
    transition: background 0.3s ease, color 0.3s ease, border-color 0.3s ease, box-shadow 0.3s ease !important;
}


/* Metis SVG Icon Styles */
.metis-ico { width:2em; height:2em; vertical-align:middle; display:inline-block; margin-right:6px; }
.metis-ico-lg { width:2.2em; height:2.2em; vertical-align:middle; display:inline-block; margin-right:5px; }
.metis-ico-xl { width:3em; height:3em; vertical-align:middle; display:inline-block; }

@keyframes pulse { 0%, 100% { opacity:1; } 50% { opacity:0.4; } }


        /* === BUG FIX: Registration form text readability === */
        #auth-gate input[type="text"],
        #auth-gate input[type="password"],
        #auth-gate .registration-group input {
            color: #1a202c !important;
            background: #ffffff !important;
            border: 1px solid #cbd5e0 !important;
        }
        #auth-gate input::placeholder {
            color: #a0aec0 !important;
        }
        #auth-gate input:focus {
            border-color: #a7cf28 !important;
            box-shadow: 0 0 0 2px rgba(167, 207, 40, 0.3) !important;
        }
    

/* === Data Verification Styles (from MetisKS) === */

.vq-card{background:rgba(255,255,255,0.06);border:1px solid rgba(255,255,255,0.1);border-radius:14px;padding:20px;margin-bottom:16px;border-left:4px solid #38bdf8;transition:all 0.3s}
.vq-critical{border-left-color:#f87171;background:rgba(248,113,113,0.06)}
.vq-moderate{border-left-color:#fbbf24;background:rgba(251,191,36,0.06)}
.vq-info{border-left-color:#38bdf8;background:rgba(56,189,248,0.04)}
.vq-card-header{display:flex;align-items:center;gap:10px;margin-bottom:10px;flex-wrap:wrap}
.vq-card-type{font-size:10px;font-weight:800;text-transform:uppercase;letter-spacing:0.6px;color:rgba(255,255,255,0.45);background:rgba(255,255,255,0.08);padding:3px 8px;border-radius:4px}
.vq-card-source{font-size:11px;color:rgba(255,255,255,0.4);flex:1}
.vq-sev{font-size:10px;font-weight:800;text-transform:uppercase;padding:3px 8px;border-radius:4px}
.vq-sev-critical{background:rgba(248,113,113,0.2);color:#f87171}
.vq-sev-moderate{background:rgba(251,191,36,0.2);color:#fbbf24}
.vq-sev-info{background:rgba(56,189,248,0.2);color:#38bdf8}
.vq-card-title{font-size:18px;font-weight:800;color:#e0e8f0;margin-bottom:8px}
.vq-card-desc{font-size:13px;color:rgba(255,255,255,0.75);line-height:1.6;margin-bottom:16px}
.vq-actions{display:flex;gap:8px;flex-wrap:wrap}
.vq-btn{padding:10px 16px;border-radius:8px;border:none;font-size:12px;font-weight:700;cursor:pointer;transition:all 0.2s;white-space:nowrap}
.vq-btn:hover{transform:translateY(-1px);filter:brightness(1.1)}
.vq-btn-current{background:rgba(167,207,40,0.2);color:#c5e864;border:1px solid rgba(167,207,40,0.3)}
.vq-btn-update{background:rgba(33,150,243,0.2);color:#82c4f8;border:1px solid rgba(33,150,243,0.3)}
.vq-btn-disc{background:rgba(220,53,69,0.15);color:#ff8a95;border:1px solid rgba(220,53,69,0.25)}
.vq-btn-never{background:rgba(156,39,176,0.15);color:#ce93d8;border:1px solid rgba(156,39,176,0.25)}
.vq-btn-unsure{background:rgba(255,255,255,0.08);color:rgba(255,255,255,0.6);border:1px solid rgba(255,255,255,0.15)}
.vq-progress{background:rgba(255,255,255,0.05);border-radius:12px;padding:16px;margin-bottom:20px;border:1px solid rgba(255,255,255,0.08)}
.vq-progress-bar{height:6px;background:rgba(255,255,255,0.08);border-radius:3px;overflow:hidden;margin:10px 0}
.vq-progress-fill{height:100%;background:linear-gradient(90deg,#34d399,#a7cf28);width:0%;transition:width 0.4s}
.vq-empty{text-align:center;padding:60px 20px;color:rgba(255,255,255,0.4)}
.vq-empty svg{width:80px;height:80px;opacity:0.25;margin-bottom:16px}

/* ===== PAGES CSS POLISH — April 6, 2026 ===== */
/* Section divider headings inside bento grids */
#diagnoses .pg-bento-grid > div[style*="text-transform:uppercase"],
#medications .pg-bento-grid > div[style*="text-transform:uppercase"],
#lab-results .pg-bento-grid > div[style*="text-transform:uppercase"],
#alerts .pg-bento-grid > div[style*="text-transform:uppercase"] {
    border-bottom: 1px solid rgba(255,255,255,0.06);
    padding-bottom: 6px;
    margin-top: 8px;
}

/* Condition cards — improve spacing for info-dense cards */
#diagnoses .pg-bento-card,
#medications .pg-bento-card {
    padding: 16px 18px;
}

/* Lab cards — horizontal layout on wide screens */
#lab-results .pg-bento-card > div:first-child {
    gap: 12px;
}

/* Loading / empty states — center nicely */
.pg-bento-grid > div[style*="text-align:center"] {
    grid-column: 1 / -1 !important;
}

/* Genomics page — single column for variant cards */
#genome-correlations > .pg-bento-grid { grid-template-columns: 1fr !important; }

/* Data receipt dividers — subtle separator inside source cards */
#data-integration .pg-bento-card div[style*="border-top:1px solid"] {
    margin: 8px -4px 6px;
}

/* Medication filter toggle buttons — responsive wrap */
#medications .pg-bento-grid > div[style*="display:flex"] {
    flex-wrap: wrap;
}

/* Active Sync badge pulse animation */
@keyframes syncPulse {
    0%, 100% { opacity: 1; }
    50% { opacity: 0.6; }
}
.badge-green[style*="Active Sync"] {
    animation: syncPulse 2s infinite;
}

/* ==========================================================================
   METIS CSS RESTORATION — Design System Component Library
   Spec: METIS_CSS_RESTORATION_SPEC.md (April 8, 2026)
   Rule: CSS additions only. No JS. No deletions. No inline styles on dynamic content.
   ========================================================================== */

/* ── Design Token Variables ── */
:root {
    --metis-navy:        #001830;
    --metis-navy-mid:    #003050;
    --metis-lime:        #a7cf28;
    --metis-lime-dark:   #8ab020;
    --metis-orange:      #f88a2f;
    --metis-olive:       #49682d;
    --metis-bg:          #f9f9f9;
    --metis-card-bg:     #ffffff;
    --metis-border:      #e0e0e0;
    --metis-text-dark:   #333333;
    --metis-text-mid:    #545455;
    --metis-text-light:  #666666;
    --severity-critical-bg:  #FFF5F5;
    --severity-critical-bdr: #DC3545;
    --severity-critical-txt: #842029;
    --severity-high-bg:      #F8D7DA;
    --severity-high-bdr:     #F1AEB5;
    --severity-moderate-bg:  #FFF3CD;
    --severity-moderate-bdr: #FFE69C;
    --severity-moderate-txt: #856404;
    --severity-info-bg:      #f0f9f0;
    --severity-info-bdr:     #49682d;
    --severity-low-bg:       #e8f5e9;
    --severity-low-txt:      #49682d;
}

/* ── 1. BASE CARD ── */
.metis-card {
    background: #ffffff;
    border-radius: 16px;
    padding: 16px;
    margin-bottom: 14px;
    box-shadow: 0 2px 12px rgba(0,0,0,0.08);
    border: 2px solid #e0e0e0;
    cursor: pointer;
    transition: all 0.2s;
    position: relative;
}
.metis-card:hover,
.metis-card:active {
    transform: translateY(-2px);
    box-shadow: 0 4px 16px rgba(0,0,0,0.12);
}
.metis-card.card-critical {
    border-color: #DC3545;
    background: linear-gradient(to bottom, #FFF5F5 0%, white 100%);
}
.metis-card.card-moderate {
    border-color: #f88a2f;
    background: linear-gradient(to bottom, #FFF9F0 0%, white 100%);
}
.metis-card.card-disability {
    border-color: #f88a2f;
    background: linear-gradient(to bottom, #FFF9F0 0%, white 100%);
}
.metis-card.card-info {
    border-color: #49682d;
    background: linear-gradient(to bottom, #f0f9f0 0%, white 100%);
}
.metis-card.card-ai {
    border-color: #a7cf28;
    background: linear-gradient(to bottom, #f0f9ff 0%, white 100%);
}

/* ── 2. CARD HEADER ROW ── */
.card-header {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    margin-bottom: 8px;
}
.card-footer {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding-top: 8px;
    border-top: 1px solid var(--metis-border);
    margin-top: 8px;
}
.card-meta {
    font-size: 9px;
    color: var(--metis-text-light);
    font-weight: 400;
    margin-bottom: 4px;
}
.view-details {
    color: var(--metis-olive);
    font-size: 10px;
    font-weight: 600;
    display: flex;
    align-items: center;
    gap: 4px;
}
.view-details::after {
    content: ' →';
}

/* ── 3. SEVERITY / STATUS BADGES ── */
.severity-badge {
    display: inline-block;
    padding: 3px 10px;
    border-radius: 20px;
    font-size: 8px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    margin-bottom: 8px;
    margin-right: 4px;
}
.severity-critical  { background: #DC3545; color: white; }
.severity-high      { background: #F8D7DA; color: #842029; border: 1px solid #F1AEB5; }
.severity-moderate  { background: #FFF3CD; color: #856404; border: 1px solid #FFE69C; }
.severity-low       { background: #e8f5e9; color: #49682d; }
.severity-info      { background: #49682d; color: white; }
.severity-normal    { background: #e8f5e9; color: #49682d; }
.severity-ai        { background: linear-gradient(135deg, #a7cf28 0%, #8ab020 100%); color: white; }

/* ── 4. CONDITION / TAG PILLS ── */
.condition-pill {
    background: #e8f5e9;
    color: #49682d;
    padding: 4px 9px;
    border-radius: 20px;
    font-size: 10px;
    font-weight: 600;
    display: inline-block;
    margin-bottom: 6px;
    margin-right: 4px;
}
.condition-pill.pill-critical { background: #F8D7DA; color: #842029; }
.condition-pill.pill-moderate { background: #FFF3CD; color: #856404; }
.condition-pill.pill-high     { background: #F8D7DA; color: #842029; }
.condition-pill.pill-orange   { background: #fff0e0; color: #c05b00; }
.condition-pill.pill-navy     { background: #e8eef5; color: #001830; }
.condition-pill.pill-lime     { background: #f0ffd4; color: #49682d; }

/* ── 5. DISABILITY BADGE ── */
.disability-badge {
    background: #f88a2f;
    color: white;
    width: 28px;
    height: 28px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-left: 10px;
    flex-shrink: 0;
    border: 2px solid white;
    box-shadow: 0 2px 4px rgba(248,138,47,0.3);
    font-size: 14px;
}

/* ── 6. ICD / LOINC CODE DISPLAY ── */
.code-label {
    font-size: 10px;
    color: #666666;
    font-family: 'Courier New', monospace;
    font-weight: 600;
    margin-bottom: 4px;
    letter-spacing: 0.3px;
}

/* ── 7. CONFLICT / INTERACTION ALERT INLINE ── */
.inline-alert {
    border-radius: 10px;
    padding: 8px;
    margin-bottom: 8px;
    display: flex;
    align-items: center;
    gap: 6px;
}
.inline-alert.alert-warning {
    background: #FFF3CD;
    border: 2px solid #FFE69C;
}
.inline-alert.alert-critical {
    background: #F8D7DA;
    border: 2px solid #F1AEB5;
}
.inline-alert-text {
    font-size: 9px;
    font-weight: 600;
}
.inline-alert.alert-warning .inline-alert-text { color: #856404; }
.inline-alert.alert-critical .inline-alert-text { color: #842029; }

/* ── 8. WIDGET CARD ICON ── */
.widget-icon {
    width: 40px;
    height: 40px;
    border-radius: 12px;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    font-size: 20px;
}
.widget-icon.icon-med    { background: linear-gradient(135deg, #E8EAF6 0%, #C5CAE9 100%); }
.widget-icon.icon-ai     { background: linear-gradient(135deg, #a7cf28 0%, #8ab020 100%); }
.widget-icon.icon-navy   { background: linear-gradient(135deg, #001830 0%, #003050 100%); }
.widget-icon.icon-alert  { background: linear-gradient(135deg, #F8D7DA 0%, #F1AEB5 100%); }
.widget-icon svg {
    width: 24px;
    height: 24px;
    stroke: #001830;
    fill: none;
    stroke-width: 2;
}
.widget-icon.icon-ai svg,
.widget-icon.icon-navy svg { stroke: white; }

/* ── 9. LABS — 3-COLUMN GRID WIDGET ── */
.labs-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 8px;
    margin-bottom: 8px;
}
.lab-cell {
    background: #f9f9f9;
    border-radius: 10px;
    padding: 10px 8px;
    text-align: center;
    border: 1px solid #e0e0e0;
    transition: all 0.2s;
}
.lab-cell.lab-abnormal {
    background: #FFF5F5;
    border-color: #DC3545;
}
.lab-cell.lab-high {
    background: #FFF9F0;
    border-color: #f88a2f;
}
.lab-cell.lab-normal {
    background: #f0f9f0;
    border-color: #49682d;
}
.lab-name {
    font-size: 9px;
    color: #666666;
    font-weight: 600;
    margin-bottom: 4px;
    line-height: 1.2;
}
.lab-value {
    font-size: 15px;
    font-weight: 700;
    color: #333333;
    line-height: 1;
}
.lab-cell.lab-abnormal .lab-value { color: #DC3545; }
.lab-cell.lab-high .lab-value     { color: #f88a2f; }
.lab-cell.lab-normal .lab-value   { color: #49682d; }
.lab-unit {
    font-size: 8px;
    color: #999999;
    margin-top: 2px;
}
.lab-range {
    font-size: 8px;
    color: #999999;
    margin-top: 2px;
}

/* ── 10. ALLERGIES — SEVERITY PILL TAGS ── */
.allergy-pills {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    margin-bottom: 8px;
}
.allergy-pill {
    padding: 5px 10px;
    border-radius: 20px;
    font-size: 11px;
    font-weight: 600;
    display: flex;
    align-items: center;
    gap: 4px;
}
.allergy-pill.allergy-severe   { background: #F8D7DA; color: #842029; border: 1px solid #F1AEB5; }
.allergy-pill.allergy-moderate { background: #FFF3CD; color: #856404; border: 1px solid #FFE69C; }
.allergy-pill.allergy-mild     { background: #e8f5e9; color: #49682d; border: 1px solid #c8e6c9; }
.allergy-pill.allergy-unknown  { background: #f5f5f5; color: #555555; border: 1px solid #e0e0e0; }

/* ── 11. GENOMICS — SIGNIFICANCE MINI-CARDS ── */
.genomics-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 8px;
    margin-bottom: 8px;
}
.gene-card {
    background: #f9f9f9;
    border-radius: 12px;
    padding: 10px;
    border: 1px solid #e0e0e0;
}
.gene-card.gene-pathogenic {
    background: #FFF5F5;
    border-color: #DC3545;
}
.gene-card.gene-vus {
    background: #FFF9F0;
    border-color: #f88a2f;
}
.gene-card.gene-benign {
    background: #f0f9f0;
    border-color: #49682d;
}
.gene-name {
    font-size: 12px;
    font-weight: 700;
    color: #333333;
    margin-bottom: 3px;
}
.gene-variant {
    font-size: 9px;
    color: #666666;
    font-family: 'Courier New', monospace;
    margin-bottom: 4px;
}
.gene-significance {
    font-size: 8px;
    font-weight: 700;
    text-transform: uppercase;
    padding: 2px 6px;
    border-radius: 8px;
    display: inline-block;
}
.gene-pathogenic .gene-significance { background: #DC3545; color: white; }
.gene-vus .gene-significance        { background: #f88a2f; color: white; }
.gene-benign .gene-significance     { background: #49682d; color: white; }

/* ── 12. AI INSIGHTS CARD ── */
.insights-card {
    background: white;
    border-radius: 16px;
    padding: 16px;
    margin-bottom: 14px;
    box-shadow: 0 2px 12px rgba(0,0,0,0.08);
    border: 2px solid #a7cf28;
}
.insights-card-header {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-bottom: 12px;
}
.insights-icon {
    width: 40px;
    height: 40px;
    background: linear-gradient(135deg, #a7cf28 0%, #8ab020 100%);
    border-radius: 12px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 20px;
    flex-shrink: 0;
}
.insight-row {
    background: #f9f9f9;
    border-radius: 12px;
    padding: 12px;
    margin-bottom: 8px;
    border-left: 3px solid #a7cf28;
}
.insight-row:last-child { margin-bottom: 0; }
.insight-title {
    font-size: 13px;
    font-weight: 700;
    color: #333333;
    margin-bottom: 4px;
    line-height: 1.4;
}
.insight-evidence {
    font-size: 10px;
    color: #666666;
    margin-bottom: 6px;
}
.confidence-badge {
    display: inline-block;
    background: linear-gradient(135deg, #a7cf28 0%, #8ab020 100%);
    color: white;
    padding: 2px 8px;
    border-radius: 10px;
    font-size: 9px;
    font-weight: 700;
}

/* ── 13. WIDGET SECTION HEADER ── */
.widget-section-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 12px;
}
.widget-section-title {
    font-size: 14px;
    font-weight: 700;
    color: #333333;
    display: flex;
    align-items: center;
    gap: 8px;
}
.widget-count-badge {
    background: #001830;
    color: white;
    border-radius: 12px;
    padding: 2px 8px;
    font-size: 11px;
    font-weight: 700;
}
.widget-see-all {
    color: #49682d;
    font-size: 11px;
    font-weight: 600;
    cursor: pointer;
}
.widget-see-all::after { content: ' →'; }
.widget-overflow-badge {
    text-align: center;
    padding: 8px;
    font-size: 11px;
    color: #49682d;
    font-weight: 600;
    cursor: pointer;
    border-top: 1px solid #e0e0e0;
    margin-top: 8px;
}
.widget-overflow-badge::after { content: ' →'; }

/* ── 14. DASHBOARD OUTER WIDGET CARD ── */
.dashboard-widget {
    background: white;
    border-radius: 16px;
    padding: 16px;
    margin-bottom: 16px;
    box-shadow: 0 2px 12px rgba(0,0,0,0.08);
    border: 2px solid #e0e0e0;
}
.dashboard-widget.widget-ai {
    border-color: #a7cf28;
}
.dashboard-widget.widget-alert {
    border-color: #DC3545;
}
.dashboard-widget.widget-warning {
    border-color: #f88a2f;
}

/* ── 15. ACTIVE ALERTS — FULL PAGE CARD ── */
.alert-card {
    background: white;
    border-radius: 16px;
    padding: 16px;
    margin-bottom: 14px;
    box-shadow: 0 2px 12px rgba(0,0,0,0.08);
}
.alert-card.alert-critical {
    border: 3px solid #DC3545;
    background: linear-gradient(to bottom, #FFF5F5 0%, white 100%);
}
.alert-card.alert-moderate {
    border: 3px solid #f88a2f;
    background: linear-gradient(to bottom, #FFF9F0 0%, white 100%);
}
.alert-card.alert-info {
    border: 3px solid #49682d;
    background: linear-gradient(to bottom, #f0f9f0 0%, white 100%);
}
.alert-type {
    font-size: 15px;
    font-weight: 700;
    color: #545455;
    line-height: 1.3;
    margin-bottom: 8px;
}
.alert-description {
    font-size: 12px;
    color: #545455;
    line-height: 1.5;
    font-weight: 500;
}

/* ── 16. NAV CARDS ── */
.nav-card {
    background: white;
    border-radius: 16px;
    padding: 16px;
    margin-bottom: 12px;
    box-shadow: 0 2px 12px rgba(0,0,0,0.08);
    border-left: 4px solid #a7cf28;
    display: flex;
    align-items: center;
    gap: 14px;
    cursor: pointer;
    transition: all 0.2s;
    min-height: 76px;
    text-decoration: none;
}
.nav-card:active { transform: scale(0.98); }
.nav-card.nav-standard { border-left-color: #001830; }
.nav-card.nav-ai {
    border-left-color: #a7cf28;
    background: linear-gradient(to right, #f0f9ff 0%, white 100%);
}
.nav-icon {
    width: 48px;
    height: 48px;
    border-radius: 14px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 24px;
    flex-shrink: 0;
}
.nav-icon.icon-ai     { background: linear-gradient(135deg, #a7cf28 0%, #8ab020 100%); }
.nav-icon.icon-navy   { background: linear-gradient(135deg, #001830 0%, #003050 100%); }
.nav-content { flex: 1; min-width: 0; }
.nav-title {
    font-size: 14px;
    font-weight: 700;
    color: #333333;
    margin-bottom: 3px;
}
.nav-description {
    font-size: 10px;
    color: #666666;
    line-height: 1.4;
}
.nav-badge {
    background: #DC3545;
    color: white;
    border-radius: 20px;
    padding: 4px 10px;
    font-size: 11px;
    font-weight: 700;
    flex-shrink: 0;
}

/* ── 17. DATA RECEIPT / SOURCE CARD ── */
.data-receipt {
    background: linear-gradient(to right, #f0f9ff 0%, #e8f5e9 100%);
    border-radius: 12px;
    padding: 14px;
    margin-bottom: 12px;
    border: 2px solid #49682d;
}
.data-receipt-title {
    font-size: 12px;
    font-weight: 700;
    color: #333333;
    margin-bottom: 10px;
    display: flex;
    align-items: center;
    gap: 6px;
}
.data-receipt-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 6px;
}
.data-receipt-item {
    display: flex;
    align-items: center;
    gap: 6px;
    font-size: 11px;
    color: #545455;
}
.data-receipt-check { color: #49682d; font-weight: 700; }

/* ── 18. AI BANNER ── */
.ai-banner {
    background: linear-gradient(135deg, #a7cf28 0%, #8ab020 100%);
    border-radius: 16px;
    padding: 16px;
    margin: 0 0 16px 0;
    box-shadow: 0 4px 12px rgba(167,207,40,0.3);
}
.ai-banner-header {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-bottom: 10px;
}
.ai-banner-icon {
    width: 44px;
    height: 44px;
    background: rgba(255,255,255,0.2);
    border-radius: 12px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 24px;
    flex-shrink: 0;
}
.ai-banner-title {
    font-size: 16px;
    font-weight: 700;
    color: white;
}
.ai-banner-text {
    font-size: 11px;
    color: white;
    opacity: 0.95;
    line-height: 1.5;
    margin-bottom: 10px;
}
.ai-stats-row {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 8px;
}
.ai-stat {
    background: rgba(255,255,255,0.15);
    border-radius: 10px;
    padding: 8px;
    text-align: center;
}
.ai-stat-value { font-size: 20px; font-weight: 700; color: white; }
.ai-stat-label { font-size: 9px; color: white; opacity: 0.9; margin-top: 2px; }


/* ==========================================================================
   PAGE-SPECIFIC CARD ENHANCEMENTS
   Target existing pg-bento-card elements in data page containers to improve
   visual hierarchy and match the card-based design spec.
   ========================================================================== */

/* ── Diagnoses page: enhance condition cards ── */
#owner-diagnoses-list > .pg-bento-card {
    border-radius: 16px;
    border-width: 2px;
    border-style: solid;
    border-color: rgba(255,255,255,0.12);
    margin-bottom: 4px;
    box-shadow: 0 2px 12px rgba(0,0,0,0.15);
}
#owner-diagnoses-list > .pg-bento-card > div:first-child {
    font-size: 15px !important;
    font-weight: 700 !important;
    line-height: 1.3;
    margin-bottom: 6px !important;
}
/* ICD code / meta line styling inside condition cards */
#owner-diagnoses-list > .pg-bento-card > div[style*="font-size:11px"][style*="opacity"] {
    font-family: 'Courier New', monospace;
    letter-spacing: 0.3px;
}

/* ── Medications page: enhance medication cards ── */
#owner-medications-list > .pg-bento-card {
    border-radius: 16px;
    border-width: 2px;
    border-style: solid;
    border-color: rgba(255,255,255,0.12);
    margin-bottom: 4px;
    box-shadow: 0 2px 12px rgba(0,0,0,0.15);
}
#owner-medications-list > .pg-bento-card > div:first-child {
    font-size: 15px !important;
    font-weight: 700 !important;
    line-height: 1.3;
    margin-bottom: 6px !important;
}

/* ── Lab results page: enhance lab cards ── */
#owner-labs-list > .pg-bento-card {
    border-radius: 16px;
    border-width: 2px;
    border-style: solid;
    border-color: rgba(255,255,255,0.12);
    margin-bottom: 4px;
    box-shadow: 0 2px 12px rgba(0,0,0,0.15);
}
/* Lab value prominence */
#owner-labs-list > .pg-bento-card div[style*="font-size:16px"][style*="font-weight:800"] {
    font-size: 18px !important;
    font-weight: 800 !important;
}

/* ── Alerts page: enhance alert cards ── */
#owner-alerts-list > .pg-bento-card {
    border-radius: 16px;
    border-width: 3px;
    border-style: solid;
    border-color: rgba(255,255,255,0.12);
    margin-bottom: 10px;
    box-shadow: 0 2px 12px rgba(0,0,0,0.15);
    padding: 18px;
}
/* Severity label in alerts */
#owner-alerts-list > .pg-bento-card > div:first-child {
    font-size: 10px !important;
    font-weight: 700 !important;
    text-transform: uppercase;
    letter-spacing: 0.8px;
    margin-bottom: 6px;
}
/* Alert title */
#owner-alerts-list > .pg-bento-card > div:nth-child(2) {
    font-size: 15px !important;
    font-weight: 700 !important;
    line-height: 1.3;
    margin-bottom: 6px !important;
}

/* ── Insights page: enhance insight cards ── */
#owner-insights-list > .insight-card {
    border-radius: 16px;
    margin-bottom: 10px;
    padding: 18px;
    box-shadow: 0 2px 12px rgba(0,0,0,0.15);
    border-left: 3px solid rgba(167,207,40,0.5);
}

/* ── Comorbidity page: cluster card enhancement ── */
#owner-comorbidity-list .pg-bento-card {
    border-radius: 16px;
    margin-bottom: 6px;
    box-shadow: 0 2px 12px rgba(0,0,0,0.15);
}

/* ── Genomics pages: variant card enhancement ── */
#owner-genome-dashboard-list > .pg-bento-card,
#owner-genetic-risks-list > .pg-bento-card,
#owner-genome-correlations-list > .pg-bento-card,
#owner-pharmacogenomics-list > .pg-bento-card {
    border-radius: 16px;
    border-width: 2px;
    border-style: solid;
    border-color: rgba(255,255,255,0.12);
    margin-bottom: 6px;
    box-shadow: 0 2px 12px rgba(0,0,0,0.15);
}

/* ── Care team cards ── */
#owner-careteam-list .pg-provider-card {
    border-radius: 16px;
    margin-bottom: 8px;
    box-shadow: 0 2px 12px rgba(0,0,0,0.12);
}

/* ── Timeline cards ── */
#owner-timeline-list > .pg-bento-card {
    border-radius: 16px;
    margin-bottom: 6px;
    box-shadow: 0 2px 12px rgba(0,0,0,0.15);
}

/* ── Trends cards ── */
#owner-trends-list > .pg-bento-card {
    border-radius: 16px;
    margin-bottom: 6px;
    box-shadow: 0 2px 12px rgba(0,0,0,0.15);
}

/* ── Wearables cards ── */
#owner-wearables-list > .pg-bento-card {
    border-radius: 16px;
    margin-bottom: 6px;
    box-shadow: 0 2px 12px rgba(0,0,0,0.15);
}

/* ── Dashboard insight bento cards ── */
#owner-insight-cards > .insight-card {
    border-radius: 16px;
    box-shadow: 0 2px 12px rgba(0,0,0,0.15);
    border-left: 3px solid rgba(167,207,40,0.4);
}

/* ── Dashboard widget summary cards: compact condition/med/allergy/genomic/lab pills ── */
#dash-conditions-summary > span,
#dash-allergies-summary > span {
    padding: 4px 9px;
    border-radius: 20px;
    font-size: 10px;
    font-weight: 600;
    display: inline-block;
}

/* ── Allergies section on medications page ── */
#owner-allergies-list .pg-bento-card {
    border-radius: 16px;
    box-shadow: 0 2px 12px rgba(0,0,0,0.15);
    margin-bottom: 6px;
}

/* ── Explainer blocks — unified styling ── */
/* These are the 💡 blocks inside condition/med/lab/alert cards */
#owner-diagnoses-list > .pg-bento-card > div[style*="border-left:2px solid rgba(167,207,40"],
#owner-medications-list > .pg-bento-card > div[style*="border-left:2px solid rgba(167,207,40"],
#owner-labs-list > .pg-bento-card > div[style*="border-left:2px solid rgba(167,207,40"],
#owner-alerts-list > .pg-bento-card > div[style*="border-left:2px solid"] {
    border-radius: 10px;
    font-size: 12px;
    line-height: 1.5;
}

/* ── PGx note blocks inside medication cards ── */
#owner-medications-list > .pg-bento-card > div[style*="border-left:2px solid rgba(56,189,248"] {
    border-radius: 10px;
    font-size: 12px;
    line-height: 1.5;
}

/* ── Copy for Doctor buttons — enhanced ── */
#owner-alerts-list .btn-ghost,
#owner-insights-list .btn-ghost,
.insight-card .btn-ghost {
    margin-top: 10px;
    border-radius: 8px;
    padding: 6px 14px;
    font-size: 11px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.3px;
}

/* ── AI tag pills — enhanced for data pages ── */
#owner-diagnoses-list .pg-ai-tags,
#owner-medications-list .pg-ai-tags {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    margin-top: 8px;
}
#owner-diagnoses-list .pg-ai-tag,
#owner-medications-list .pg-ai-tag {
    padding: 3px 10px;
    border-radius: 20px;
    font-size: 10px;
    font-weight: 700;
}

/* ── Medication filter buttons — polished ── */
#owner-medications-list > div:first-child .pg-glass-btn {
    border-radius: 20px;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}


/* ==========================================================================
   LIGHT MODE OVERRIDES FOR RESTORATION COMPONENTS
   ========================================================================== */

/* Light mode: Data page cards get white backgrounds with proper borders */
body.light-mode #owner-diagnoses-list > .pg-bento-card,
body.light-mode #owner-medications-list > .pg-bento-card,
body.light-mode #owner-labs-list > .pg-bento-card,
body.light-mode #owner-alerts-list > .pg-bento-card,
body.light-mode #owner-comorbidity-list .pg-bento-card,
body.light-mode #owner-genome-dashboard-list > .pg-bento-card,
body.light-mode #owner-genetic-risks-list > .pg-bento-card,
body.light-mode #owner-genome-correlations-list > .pg-bento-card,
body.light-mode #owner-pharmacogenomics-list > .pg-bento-card,
body.light-mode #owner-timeline-list > .pg-bento-card,
body.light-mode #owner-trends-list > .pg-bento-card,
body.light-mode #owner-wearables-list > .pg-bento-card {
    background: var(--metis-card-bg) !important;
    border-color: var(--metis-border) !important;
    color: var(--metis-text-dark) !important;
    box-shadow: 0 2px 12px rgba(0,0,0,0.08) !important;
}

body.light-mode #owner-diagnoses-list > .pg-bento-card > div:first-child,
body.light-mode #owner-medications-list > .pg-bento-card > div:first-child,
body.light-mode #owner-alerts-list > .pg-bento-card > div:nth-child(2) {
    color: var(--metis-text-dark) !important;
}

body.light-mode #owner-insights-list > .insight-card {
    background: var(--metis-card-bg) !important;
    border-color: rgba(0,0,0,0.08) !important;
    border-left: 3px solid var(--metis-lime) !important;
    color: var(--metis-text-dark) !important;
    box-shadow: 0 2px 12px rgba(0,0,0,0.08) !important;
}

/* Light mode: explainer blocks */
body.light-mode #owner-diagnoses-list > .pg-bento-card > div[style*="border-left:2px solid rgba(167,207,40"],
body.light-mode #owner-medications-list > .pg-bento-card > div[style*="border-left:2px solid rgba(167,207,40"],
body.light-mode #owner-labs-list > .pg-bento-card > div[style*="border-left:2px solid rgba(167,207,40"] {
    color: var(--metis-text-mid) !important;
    background: rgba(167,207,40,0.06) !important;
}

/* Light mode: allergy section */
body.light-mode #owner-allergies-list .pg-bento-card {
    background: var(--metis-card-bg) !important;
    border-color: var(--metis-border) !important;
    color: var(--metis-text-dark) !important;
}

/* Light mode: AI tag pills use more visible colors */
body.light-mode .pg-ai-tag-red { background: rgba(220,53,69,0.1) !important; color: #dc3545 !important; }
body.light-mode .pg-ai-tag-orange { background: rgba(248,138,47,0.1) !important; color: #d97706 !important; }
body.light-mode .pg-ai-tag-blue { background: rgba(33,150,243,0.1) !important; color: #1976d2 !important; }
body.light-mode .pg-ai-tag-green { background: rgba(167,207,40,0.1) !important; color: #4d7c0f !important; }

/* ══════════════════════════════════════════════════════
   RESPONSIVE — SPEC COMPONENT MOBILE OVERRIDES
   Matches existing app breakpoints: 768 → 480 → 380
   ══════════════════════════════════════════════════════ */

/* ── TABLET / LARGE PHONE (≤768px) ── */
@media (max-width: 768px) {
    /* Cards: tighter padding */
    .metis-card { padding: 14px; border-radius: 14px; }
    .insights-card { padding: 14px; border-radius: 14px; }
    .dashboard-widget { padding: 14px; border-radius: 14px; }
    .alert-card { padding: 14px; border-radius: 14px; }

    /* Labs grid: 3-col → 2-col */
    .labs-grid { grid-template-columns: repeat(2, 1fr); }

    /* AI stats row: 3-col → 2-col with last centered */
    .ai-stats-row { grid-template-columns: repeat(2, 1fr); }
    .ai-stat:last-child:nth-child(odd) { grid-column: 1 / -1; max-width: 50%; margin: 0 auto; }

    /* AI banner */
    .ai-banner { padding: 14px; border-radius: 14px; }
    .ai-banner-icon { width: 38px; height: 38px; font-size: 20px; }
    .ai-banner-title { font-size: 15px; }

    /* Nav cards: smaller icon */
    .nav-card { padding: 14px; gap: 12px; min-height: 64px; border-radius: 14px; }
    .nav-icon { width: 42px; height: 42px; border-radius: 12px; font-size: 20px; }
    .nav-title { font-size: 13px; }

    /* Widget icon */
    .widget-icon { width: 36px; height: 36px; font-size: 18px; border-radius: 10px; }

    /* Section headers */
    .widget-section-title { font-size: 13px; }
    .widget-count-badge { font-size: 10px; padding: 2px 7px; }

    /* Data receipt */
    .data-receipt { padding: 12px; border-radius: 10px; }

    /* Page-specific card enhancements: reduce padding */
    #owner-diagnoses-list > .pg-bento-card,
    #owner-medications-list > .pg-bento-card,
    #owner-labs-list > .pg-bento-card,
    #owner-alerts-list > .pg-bento-card { padding: 14px !important; border-radius: 14px !important; }
}

/* ── PHONE (≤480px) ── */
@media (max-width: 480px) {
    /* Cards: even tighter */
    .metis-card { padding: 12px; margin-bottom: 10px; border-radius: 12px; }
    .insights-card { padding: 12px; border-radius: 12px; }
    .dashboard-widget { padding: 12px; border-radius: 12px; }
    .alert-card { padding: 12px; border-radius: 12px; }

    /* Labs grid: stay 2-col, smaller cells */
    .labs-grid { gap: 6px; }
    .lab-cell { padding: 8px 6px; border-radius: 8px; }
    .lab-name { font-size: 8px; }
    .lab-value { font-size: 13px; }

    /* Genomics grid: 2-col → 1-col */
    .genomics-grid { grid-template-columns: 1fr; }
    .gene-card { padding: 8px; border-radius: 10px; }

    /* AI stats row: stack to 1-col */
    .ai-stats-row { grid-template-columns: 1fr; gap: 6px; }
    .ai-stat:last-child:nth-child(odd) { max-width: 100%; }
    .ai-stat { padding: 6px; }
    .ai-stat-value { font-size: 17px; }

    /* AI banner */
    .ai-banner { padding: 12px; border-radius: 12px; }
    .ai-banner-icon { width: 34px; height: 34px; font-size: 18px; }
    .ai-banner-title { font-size: 14px; }
    .ai-banner-text { font-size: 10px; }

    /* Nav cards: compact */
    .nav-card { padding: 12px; gap: 10px; min-height: 56px; border-radius: 12px; }
    .nav-icon { width: 38px; height: 38px; border-radius: 10px; font-size: 18px; }
    .nav-title { font-size: 12px; }
    .nav-description { font-size: 9px; }
    .nav-badge { padding: 3px 8px; font-size: 10px; }

    /* Severity badges: ensure touch-friendly size */
    .severity-badge { padding: 4px 10px; font-size: 8px; }

    /* Condition/allergy pills: wrap-friendly */
    .condition-pill { padding: 3px 8px; font-size: 9px; }
    .allergy-pill { padding: 4px 8px; font-size: 10px; }
    .allergy-pills { gap: 4px; }

    /* Disability badge: keep visible but slightly smaller */
    .disability-badge { width: 26px; height: 26px; font-size: 12px; }

    /* Insight rows */
    .insight-row { padding: 10px; border-radius: 10px; }
    .insight-title { font-size: 12px; }
    .insight-evidence { font-size: 9px; }

    /* Data receipt: stack grid */
    .data-receipt { padding: 10px; border-radius: 10px; }
    .data-receipt-grid { grid-template-columns: 1fr; gap: 4px; }
    .data-receipt-item { font-size: 10px; }

    /* Widget headers */
    .widget-section-title { font-size: 12px; }
    .widget-see-all { font-size: 10px; }
    .widget-overflow-badge { font-size: 10px; }

    /* Page-specific cards */
    #owner-diagnoses-list > .pg-bento-card,
    #owner-medications-list > .pg-bento-card,
    #owner-labs-list > .pg-bento-card,
    #owner-alerts-list > .pg-bento-card { padding: 12px !important; border-radius: 12px !important; }

    /* Inline alerts: tighter */
    .inline-alert { padding: 6px; border-radius: 8px; }
    .inline-alert-text { font-size: 8px; }
}

/* ── NARROW PHONE (≤380px) ── */
@media (max-width: 380px) {
    /* Labs grid: collapse to 1-col */
    .labs-grid { grid-template-columns: 1fr; }

    /* Nav cards: stack icon above text */
    .nav-card { flex-direction: column; align-items: flex-start; gap: 8px; min-height: auto; }

    /* Cards: minimal padding */
    .metis-card { padding: 10px; }
    .alert-card { padding: 10px; }
    .dashboard-widget { padding: 10px; }

    /* Card header: allow wrapping */
    .card-header { flex-wrap: wrap; gap: 4px; }

    /* Data receipt grid: already 1-col from 480, reduce padding */
    .data-receipt { padding: 8px; }

    /* AI banner: very compact */
    .ai-banner { padding: 10px; }
    .ai-banner-header { gap: 8px; }

    /* Diagnosis/med toggle buttons: stack on very small screens */
    #dx-filter-recent, #dx-filter-all, #med-filter-active, #med-filter-all {
        flex: 1;
        text-align: center;
    }
}

/* ══════════════════════════════════════════════════════════
   NEW HYDRATION SECTIONS — CSS (Other Claude audit output)
   Added 2026-04-16 for clinical studies, appointments,
   federal programs, family history, financial, care team,
   genomic cards, health timeline
   ══════════════════════════════════════════════════════════ */

/* Clinical Studies */
#owner-studies-list .pg-bento-card { margin-bottom: 4px; }

/* Financial Overview — big compensation number */
#owner-financial-content .pg-bento-card { overflow: hidden; }

/* Care Team — specialty badge alignment */
#owner-careteam-list .pg-bento-card {
    display: flex;
    flex-direction: column;
    gap: 4px;
}

/* Genomic cards — correlation/recommendation boxes */
#owner-genetic-risks-list .pg-bento-card,
#owner-genome-correlations-list .pg-bento-card {
    overflow: hidden;
}

/* Timeline — event rows */
#owner-timeline-list > div > div {
    transition: background 0.15s ease;
}
#owner-timeline-list > div > div:hover {
    background: rgba(255,255,255,0.03);
}

/* Year chip buttons for diagnosis history */
#dx-older-section button.pg-glass-btn {
    margin-bottom: 4px;
    transition: all 0.2s ease;
}
#dx-older-section button.pg-glass-btn:hover {
    background: rgba(167,207,40,0.12);
    border-color: rgba(167,207,40,0.25);
    color: #c5e864;
}

/* ══════════════════════════════════════════════════════════
   PHASE 6 — AI CORRELATION ENGINE PANEL
   Other Claude — 2026-05-05
   Replaces inline styles in metis-corr-engine.js with the
   full METIS v4 bento/glass design language.
   ══════════════════════════════════════════════════════════ */

/* Outer panel — nested inside .pg-bento-card */
.corr-panel {
    margin-top: 12px;
    padding: 14px 16px;
    background: rgba(167,207,40,0.04);
    border: 1px solid rgba(167,207,40,0.18);
    border-radius: 12px;
}

/* Header row: title left, confidence value right */
.corr-panel-header {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    gap: 10px;
    flex-wrap: wrap;
    margin-bottom: 6px;
}
.corr-panel-title {
    font-size: 12px;
    font-weight: 800;
    color: var(--text-primary);
}

/* Confidence block — right-aligned */
.corr-confidence-block { text-align: right; flex-shrink: 0; }
.corr-confidence-value {
    font-size: 16px;
    font-weight: 900;
    color: #a7cf28;
    line-height: 1;
}
.corr-confidence-ci {
    font-size: 10px;
    opacity: 0.5;
    margin-top: 2px;
    font-variant-numeric: tabular-nums;
}

/* Confidence progress bar */
.corr-confidence-bar-track {
    height: 3px;
    background: rgba(255,255,255,0.07);
    border-radius: 2px;
    margin: 8px 0;
    overflow: hidden;
}
.corr-confidence-bar-fill {
    height: 100%;
    background: linear-gradient(90deg, rgba(167,207,40,0.5) 0%, #a7cf28 100%);
    border-radius: 2px;
    transition: width 0.7s cubic-bezier(0.4,0,0.2,1);
}

/* Component score pills */
.corr-components {
    display: flex;
    gap: 5px;
    flex-wrap: wrap;
    margin-bottom: 10px;
}
.corr-component-pill {
    font-size: 10px;
    font-weight: 600;
    padding: 3px 8px;
    border-radius: 6px;
    background: rgba(255,255,255,0.05);
    border: 1px solid rgba(255,255,255,0.1);
    color: var(--text-secondary);
    text-transform: capitalize;
    white-space: nowrap;
}
.corr-component-pill strong { color: var(--text-primary); font-weight: 800; }

/* Claim sentence */
.corr-claim {
    font-size: 12px;
    line-height: 1.6;
    color: var(--text-primary);
    margin-bottom: 10px;
}

/* Section micro-label */
.corr-section-label {
    font-size: 10px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.6px;
    opacity: 0.5;
    margin-bottom: 6px;
}

/* Evidence chip list */
.corr-evidence-list {
    display: flex;
    flex-direction: column;
    gap: 4px;
    margin-bottom: 10px;
}
.corr-evidence-chip {
    display: flex;
    align-items: flex-start;
    gap: 8px;
    padding: 7px 10px;
    background: rgba(255,255,255,0.025);
    border-radius: 8px;
    border-left: 3px solid #64748b;
    font-size: 11px;
    line-height: 1.45;
}
.corr-evidence-chip-source {
    font-weight: 700;
    font-size: 10px;
    white-space: nowrap;
    flex-shrink: 0;
    min-width: 68px;
    color: #94a3b8;
}
.corr-evidence-chip-body { flex: 1; min-width: 0; }
.corr-evidence-chip-id {
    font-family: monospace;
    font-size: 10px;
    opacity: 0.45;
}
.corr-evidence-chip-excerpt {
    opacity: 0.8;
    margin-top: 2px;
}
.corr-evidence-chip-url {
    font-size: 10px;
    opacity: 0.4;
    text-decoration: none;
    display: block;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    max-width: 100%;
    margin-top: 2px;
}
.corr-evidence-chip-url:hover { opacity: 0.7; }
.corr-evidence-chip-strength {
    font-size: 10px;
    opacity: 0.5;
    flex-shrink: 0;
    font-variant-numeric: tabular-nums;
    align-self: flex-start;
}

/* Source-specific accent colors */
.corr-src-clinvar  { border-left-color: #a7cf28; }
.corr-src-gnomad   { border-left-color: #38bdf8; }
.corr-src-pubmed   { border-left-color: #f59e0b; }
.corr-src-reactome { border-left-color: #c084fc; }
.corr-src-gwas     { border-left-color: #fb7185; }
.corr-src-clinvar  .corr-evidence-chip-source { color: #a7cf28; }
.corr-src-gnomad   .corr-evidence-chip-source { color: #38bdf8; }
.corr-src-pubmed   .corr-evidence-chip-source { color: #f59e0b; }
.corr-src-reactome .corr-evidence-chip-source { color: #c084fc; }
.corr-src-gwas     .corr-evidence-chip-source { color: #fb7185; }

/* KG path — monospace trace */
.corr-kg-path {
    display: block;
    font-family: monospace;
    font-size: 10px;
    opacity: 0.5;
    padding: 6px 10px;
    background: rgba(255,255,255,0.025);
    border-radius: 6px;
    overflow-x: auto;
    white-space: nowrap;
    margin-bottom: 8px;
}

/* Limitations callout */
.corr-limitations {
    padding: 8px 10px;
    background: rgba(245,158,11,0.06);
    border-left: 3px solid #f59e0b;
    border-radius: 6px;
    font-size: 11px;
    line-height: 1.5;
    margin-bottom: 8px;
    color: var(--text-primary);
}
.corr-limitations-label {
    font-weight: 700;
    font-size: 10px;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    color: #f59e0b;
    margin-bottom: 3px;
}

/* Footer timestamp */
.corr-footer {
    font-size: 10px;
    opacity: 0.32;
    margin-top: 8px;
}

/* Loading state */
.corr-loading {
    margin-top: 10px;
    padding: 14px 16px;
    background: rgba(56,189,248,0.04);
    border: 1px solid rgba(56,189,248,0.16);
    border-radius: 12px;
    display: flex;
    align-items: center;
    gap: 12px;
}
.corr-loading-text { flex: 1; }
.corr-loading-title {
    font-size: 12px;
    font-weight: 700;
    color: var(--text-primary);
}
.corr-loading-sub {
    font-size: 10px;
    opacity: 0.5;
    margin-top: 2px;
    line-height: 1.5;
}

/* Error state */
.corr-error {
    margin-top: 10px;
    padding: 10px 12px;
    background: rgba(239,68,68,0.06);
    border: 1px solid rgba(239,68,68,0.2);
    border-radius: 8px;
    font-size: 12px;
    line-height: 1.5;
    color: var(--text-primary);
}

/* AI Correlation run button — compact, inline with card */
.corr-run-btn {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    margin-top: 10px;
    padding: 6px 14px;
    font-size: 11px;
    font-weight: 700;
    border-radius: 8px;
    background: rgba(167,207,40,0.11);
    color: #c5e864;
    border: 1px solid rgba(167,207,40,0.28);
    cursor: pointer;
    transition: background 0.15s, border-color 0.15s, color 0.15s;
    white-space: nowrap;
}
.corr-run-btn:hover {
    background: rgba(167,207,40,0.22);
    border-color: rgba(167,207,40,0.45);
    color: #d4f06e;
}

/* Auto-fetch toggle bar at top of Genome Correlations page */
.corr-toggle-bar {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 10px 14px;
    background: rgba(56,189,248,0.04);
    border: 1px solid rgba(56,189,248,0.14);
    border-radius: 10px;
    font-size: 12px;
    margin-bottom: 14px;
    flex-wrap: wrap;
}
.corr-toggle-bar-title {
    font-weight: 700;
    color: var(--text-primary);
    white-space: nowrap;
}
.corr-toggle-bar-label {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    cursor: pointer;
    opacity: 0.75;
    user-select: none;
}
.corr-toggle-bar-label:hover { opacity: 1; }
.corr-toggle-bar-endpoint {
    margin-left: auto;
    font-size: 10px;
    opacity: 0.35;
    font-family: monospace;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    max-width: 200px;
}

/* Custom toggle switch */
.corr-toggle-switch {
    position: relative;
    display: inline-block;
    width: 32px;
    height: 18px;
    flex-shrink: 0;
}
.corr-toggle-switch input { opacity: 0; width: 0; height: 0; position: absolute; }
.corr-toggle-knob {
    position: absolute;
    cursor: pointer;
    inset: 0;
    background: rgba(255,255,255,0.1);
    border-radius: 9px;
    border: 1px solid rgba(255,255,255,0.15);
    transition: background 0.2s, border-color 0.2s;
}
.corr-toggle-knob::before {
    content: '';
    position: absolute;
    height: 12px;
    width: 12px;
    left: 2px;
    bottom: 2px;
    background: rgba(255,255,255,0.5);
    border-radius: 50%;
    transition: transform 0.2s, background 0.2s;
}
.corr-toggle-switch input:checked + .corr-toggle-knob {
    background: rgba(56,189,248,0.35);
    border-color: rgba(56,189,248,0.5);
}
.corr-toggle-switch input:checked + .corr-toggle-knob::before {
    transform: translateX(14px);
    background: #38bdf8;
}

/* Light-mode overrides */
body.light-mode .corr-panel {
    background: rgba(167,207,40,0.05);
    border-color: rgba(100,160,20,0.25);
}
body.light-mode .corr-component-pill {
    background: rgba(0,0,0,0.04);
    border-color: rgba(0,0,0,0.1);
    color: #545455;
}
body.light-mode .corr-component-pill strong { color: #333; }
body.light-mode .corr-evidence-chip { background: rgba(0,0,0,0.025); }
body.light-mode .corr-kg-path { background: rgba(0,0,0,0.03); }
body.light-mode .corr-loading { background: rgba(56,189,248,0.04); }
body.light-mode .corr-toggle-knob { background: rgba(0,0,0,0.08); border-color: rgba(0,0,0,0.15); }
body.light-mode .corr-toggle-knob::before { background: rgba(0,0,0,0.35); }
body.light-mode .corr-run-btn { background: rgba(100,160,20,0.1); border-color: rgba(100,160,20,0.3); color: #4a7a0a; }
body.light-mode .corr-run-btn:hover { background: rgba(100,160,20,0.18); color: #3a6008; }

/* ═══════════════════════════════════════════════════════════════════════════
   v3 VISUAL LAYER (Other's mockup tokens)
   ───────────────────────────────────────────────────────────────────────────
   Sourced from /METIS MOCKUPS/v3-mockups/page-{02,03,04,10,11,12,14}.html.
   Adds dark-themed tokens + component classes used by Rad's v3 hero/zone
   back-ports in pages.html, AND the data-card shapes (claim-row, panel,
   pulse-card, nav-tile, severity tags) that owner-pages.js will emit in the
   Phase 2 hydrator pass.
   Additive only — does NOT touch pg-bento-card / pg-header / metis-card
   (load-bearing for un-back-ported pages).
   ═══════════════════════════════════════════════════════════════════════════ */

/* ─── Tokens (dark-default; matches METIS shell) ─── */
:root{
    --v3-bg:           #0a0e17;
    --v3-bg-2:         #0f1524;
    --surface:         #121b2d;
    --surface-hi:      #1a2438;
    --border-soft:     rgba(255,255,255,0.09);
    --ink:             #e8ecf4;
    --ink-dim:         #9ba8bf;
    --ink-faint:       #6a7690;
    --navy:            #08263A;
    --navy-2:          #0d3146;
    --green:           #7ED957;
    --green-soft:      rgba(126,217,87,0.14);
    --green-ink:       #b5e589;
    --green-faint:     rgba(126,217,87,0.06);
    --warn:            #f5b84a;
    --urgent:          #f88a2f;
    --urgent-soft:     rgba(248,138,47,0.10);
    --crit:            #ff6b7a;
    --crit-soft:       rgba(255,107,122,0.10);
    --info:            #7dd3fc;
    --purple:          #a78bfa;
}

/* ─── Page typography (.page-eyebrow / .page-title / .page-sub) ─── */
.page-eyebrow{font-size:12px;color:var(--ink-faint);text-transform:uppercase;letter-spacing:1.8px;font-weight:700;margin-bottom:8px;display:flex;align-items:center;gap:8px;font-family:'Montserrat',sans-serif}
.page-eyebrow svg{width:16px;height:16px;color:var(--green-ink)}
.page-title{font-family:'Montserrat',sans-serif;font-size:34px;font-weight:800;line-height:1.1;letter-spacing:-0.01em;margin-bottom:6px;color:var(--ink)}
.page-sub{font-size:15px;color:var(--ink-dim);margin-bottom:24px;line-height:1.55;max-width:720px}

/* ─── Zone framing (.zone / .zone-num / .zone-name / .zone-sub) ─── */
.zone{margin:36px 0 16px}
.zone-label{display:flex;align-items:baseline;gap:12px;margin-bottom:4px;flex-wrap:wrap}
.zone-num{font-family:'Montserrat',sans-serif;font-size:13px;font-weight:700;color:var(--green);background:var(--green-soft);padding:2px 10px;border-radius:999px;letter-spacing:1px;border:1px solid rgba(126,217,87,0.25)}
.zone-name{font-family:'Montserrat',sans-serif;font-size:18px;font-weight:800;color:var(--ink)}
.zone-sub{font-size:13px;color:var(--ink-dim);line-height:1.5;margin-top:4px}

/* ─── Hero (page-level) ─── */
/* Default hero: low-key gradient on dark surface; used by neutral pages */
.hero{background:linear-gradient(135deg,rgba(126,217,87,0.10) 0%,rgba(8,38,58,0.4) 100%);border:1.5px solid var(--border-soft);border-radius:22px;padding:28px;position:relative;overflow:hidden;color:var(--ink)}
.hero::before{content:"";position:absolute;top:-60px;right:-60px;width:240px;height:240px;background:radial-gradient(circle,rgba(126,217,87,0.16) 0%,transparent 70%);pointer-events:none}
/* Variant: claimable / benefits-positive (page-02, page-03 hero) — strong green */
.hero.hero-positive{background:linear-gradient(135deg,rgba(126,217,87,0.16) 0%,rgba(126,217,87,0.02) 100%);border-color:rgba(126,217,87,0.4)}
.hero.hero-positive::before{background:radial-gradient(circle,rgba(126,217,87,0.22) 0%,transparent 70%)}
/* Variant: urgent (alerts, critical) */
.hero.hero-urgent{background:linear-gradient(135deg,rgba(248,138,47,0.14) 0%,rgba(248,138,47,0.02) 100%);border-color:rgba(248,138,47,0.4)}
.hero.hero-urgent::before{background:radial-gradient(circle,rgba(248,138,47,0.20) 0%,transparent 70%)}
/* Variant: critical (page-14 alerts top alarm) */
.hero.hero-critical{background:linear-gradient(135deg,rgba(255,107,122,0.10) 0%,rgba(8,38,58,0.4) 100%);border-color:rgba(255,107,122,0.3)}

/* Hero row layouts */
.hero-row{display:flex;align-items:center;gap:24px;flex-wrap:wrap;position:relative;margin-bottom:18px}
.hero-num-block{flex:1;min-width:240px}
.hero-num{font-family:'Montserrat',sans-serif;font-size:64px;font-weight:800;color:var(--green-ink);line-height:1;letter-spacing:-0.02em}
.hero-num-sub{font-size:14px;color:var(--ink-dim);margin-top:6px;line-height:1.5}

/* Hero stat strip — 3- or 4-up grid below hero copy */
.hero-stats{display:grid;grid-template-columns:repeat(4,1fr);gap:14px;position:relative}
.hero-stats.cols-3{grid-template-columns:repeat(3,1fr)}
.hero-stats.cols-2{grid-template-columns:repeat(2,1fr)}
.hero-stat{padding:18px;background:rgba(8,38,58,0.55);border:1px solid var(--border-soft);border-radius:12px;text-align:left;position:relative;overflow:hidden;color:var(--ink)}
.hero-stat.primary{background:linear-gradient(135deg,rgba(126,217,87,0.14),rgba(8,38,58,0.55));border-color:rgba(126,217,87,0.35)}
.hero-stat.warn{background:linear-gradient(135deg,rgba(248,138,47,0.10),rgba(8,38,58,0.55));border-color:rgba(248,138,47,0.3)}
.hero-stat.crit{background:linear-gradient(135deg,rgba(255,107,122,0.10),rgba(8,38,58,0.55));border-color:rgba(255,107,122,0.35)}
.hero-stat.info{background:linear-gradient(135deg,rgba(125,211,252,0.10),rgba(8,38,58,0.55));border-color:rgba(125,211,252,0.3)}
/* .hero-stat-num / .hero-stat-val are aliases — both styled identically */
.hero-stat-num,
.hero-stat-val{font-family:'Montserrat',sans-serif;font-size:38px;font-weight:800;line-height:1;color:var(--ink)}
.hero-stat.primary .hero-stat-num,.hero-stat.primary .hero-stat-val,
.hero-stat.enrolled .hero-stat-val{color:var(--green-ink)}
.hero-stat.warn .hero-stat-num,.hero-stat.warn .hero-stat-val,
.hero-stat.unclaimed .hero-stat-val{color:var(--urgent)}
.hero-stat.crit .hero-stat-num,.hero-stat.crit .hero-stat-val{color:var(--crit)}
.hero-stat.info .hero-stat-num,.hero-stat.info .hero-stat-val{color:var(--info)}
.hero-stat-num-sub{font-size:13px;color:var(--ink-dim);font-weight:600}
.hero-stat-label{font-size:11px;color:var(--ink-faint);text-transform:uppercase;letter-spacing:1px;font-weight:700;margin-top:8px}
.hero-stat-detail{font-size:11px;color:var(--ink-dim);margin-top:4px;line-height:1.45}

/* Hero summary callout — 1-line takeaway under hero stats */
.hero-summary{margin-top:18px;padding:14px 16px;background:rgba(8,38,58,0.55);border:1px dashed rgba(126,217,87,0.3);border-radius:11px;font-size:13px;color:var(--ink-dim);line-height:1.55}
.hero-summary strong{color:var(--ink)}
.hero-summary .green{color:var(--green-ink);font-weight:700}
.hero-summary .warn{color:var(--urgent);font-weight:700}
.hero-summary .crit{color:var(--crit);font-weight:700}

/* ─── Alias: pg-header-stats family inherits hero-stats look ─── */
/* Lets Rad's pg-header-* back-ports pick up v3 typography for free.   */
.pg-header-stats.v3,
.hero-stats > .pg-header-stat{display:contents}
.pg-header-stat-value.v3{font-family:'Montserrat',sans-serif;font-size:38px;font-weight:800;line-height:1;color:var(--green-ink)}
.pg-header-stat-label.v3{font-size:11px;color:var(--ink-faint);text-transform:uppercase;letter-spacing:1px;font-weight:700;margin-top:8px;display:block}

/* ─── Panel (.panel + variants — used everywhere data is grouped) ─── */
.panel{background:var(--surface);border:1.5px solid var(--border-soft);border-radius:18px;overflow:hidden;color:var(--ink)}
.panel.claim{border-left:4px solid var(--green)}
.panel.panel-warn{border-left:4px solid var(--urgent)}
.panel.panel-crit{border-left:4px solid var(--crit)}
.panel.panel-info{border-left:4px solid var(--info)}
.panel-head{display:grid;grid-template-columns:auto 1fr auto;gap:18px;align-items:center;padding:20px 24px}
.panel-icon{width:56px;height:56px;border-radius:13px;background:var(--navy);display:flex;align-items:center;justify-content:center;border:1px solid rgba(126,217,87,0.25);flex-shrink:0}
.panel-icon svg{width:42px;height:42px}
.panel-meta{display:flex;flex-direction:column;gap:3px;min-width:0}
.panel-eyebrow{font-size:11px;font-weight:700;letter-spacing:1.2px;text-transform:uppercase;color:var(--green-ink);font-family:'Montserrat',sans-serif}
.panel-title{font-family:'Montserrat',sans-serif;font-size:18px;font-weight:800;line-height:1.25;color:var(--ink)}
.panel-sub{font-size:13px;color:var(--ink-dim);line-height:1.45}
.panel-impact{text-align:right}
.panel-num{font-family:'Montserrat',sans-serif;font-size:30px;font-weight:800;line-height:1;color:var(--green-ink)}
.panel-num-unit{font-size:13px;color:var(--ink-faint);font-weight:600}
.panel-body{padding:0 24px 22px;display:flex;flex-direction:column;gap:10px}

/* ─── Claim row (the data-row pattern — repeats 36+ times across mockups) ─── */
/* Phase 2 will emit this from owner-pages.js for: conditions, claimable    */
/* opportunities, ranked findings, etc.                                     */
.claim-row{display:grid;grid-template-columns:auto 1fr auto auto;gap:14px;align-items:center;padding:16px;background:rgba(8,38,58,0.45);border:1px solid var(--border-soft);border-radius:12px;color:var(--ink);text-decoration:none}
.claim-row:hover{border-color:rgba(126,217,87,0.3);background:rgba(8,38,58,0.7)}
.claim-row.exemplar{border-color:rgba(126,217,87,0.4);background:linear-gradient(135deg,rgba(126,217,87,0.08),rgba(8,38,58,0.45))}
.claim-rank{font-family:'Montserrat',sans-serif;font-size:14px;font-weight:800;color:var(--ink-faint);width:28px;text-align:center}
.claim-info{min-width:0}
.claim-title{font-family:'Montserrat',sans-serif;font-size:15px;font-weight:700;margin-bottom:3px;color:var(--ink)}
.claim-icd{font-size:11px;color:var(--ink-faint);font-family:'SF Mono','Monaco',monospace;background:rgba(255,255,255,0.04);padding:1px 7px;border-radius:5px;margin-right:6px}
.claim-evidence{display:flex;flex-wrap:wrap;gap:6px;margin-top:6px}

/* Evidence chips — citation pattern under claim/condition titles */
.ev-chip{font-size:10px;color:var(--ink-dim);background:rgba(126,217,87,0.08);border:1px solid rgba(126,217,87,0.2);padding:3px 8px;border-radius:5px;display:inline-flex;align-items:center;gap:4px}
.ev-chip strong{color:var(--green-ink);font-weight:700}
.ev-chip.confidence{background:rgba(56,189,248,0.10);border-color:rgba(56,189,248,0.25);color:var(--info)}
.ev-chip.confidence strong{color:#a8e2fa}
.ev-chip.warn{background:rgba(245,184,74,0.10);border-color:rgba(245,184,74,0.30);color:var(--warn)}
.ev-chip.crit{background:rgba(255,107,122,0.10);border-color:rgba(255,107,122,0.30);color:var(--crit)}
.ev-chip.purple{background:rgba(167,139,250,0.10);border-color:rgba(167,139,250,0.25);color:var(--purple)}
.ev-chip.purple strong{color:var(--purple)}

.claim-impact{text-align:right;font-family:'Montserrat',sans-serif;font-size:18px;font-weight:800;color:var(--green-ink);line-height:1}
.claim-impact-sub{font-size:10px;color:var(--ink-faint);text-transform:uppercase;letter-spacing:0.5px;font-weight:600;margin-top:3px}
.claim-cta{padding:10px 14px;border-radius:9px;font-size:12px;font-weight:700;text-decoration:none;display:inline-flex;align-items:center;gap:6px;white-space:nowrap;border:1.5px solid rgba(126,217,87,0.45);color:var(--green-ink);background:transparent;font-family:inherit;cursor:pointer}
.claim-cta:hover{background:var(--green-soft)}

/* ─── SC-condition row (page-03 service-connected list pattern) ─── */
.sc-list{display:flex;flex-direction:column;gap:8px}
.sc-row{display:grid;grid-template-columns:auto 1fr auto auto;gap:14px;align-items:center;padding:14px 16px;background:var(--surface);border:1px solid var(--border-soft);border-radius:12px;color:var(--ink)}
.sc-rating{font-family:'Montserrat',sans-serif;font-size:22px;font-weight:800;color:var(--green-ink);line-height:1;width:54px;text-align:center}
.sc-info{min-width:0}
.sc-name{font-family:'Montserrat',sans-serif;font-size:14px;font-weight:700;line-height:1.3;color:var(--ink)}
.sc-detail{font-size:11px;color:var(--ink-dim);margin-top:3px}
.sc-bar{width:100px;height:6px;background:rgba(126,217,87,0.15);border-radius:4px;overflow:hidden}
.sc-bar-fill{height:100%;background:linear-gradient(90deg,var(--green),var(--green-ink));border-radius:4px}
.sc-history-link{font-size:11px;color:var(--ink-faint);text-decoration:none;font-weight:600;white-space:nowrap}
.sc-history-link:hover{color:var(--green-ink)}

/* ─── Condition card (page-10 — the rich detail card) ─── */
.cond{background:var(--surface);border:1.5px solid var(--border-soft);border-radius:16px;padding:18px 20px;margin-bottom:12px;position:relative;display:grid;grid-template-columns:1fr auto;gap:14px;color:var(--ink)}
.cond:hover{background:var(--surface-hi);border-color:rgba(126,217,87,0.25)}
.cond.sc{border-left:4px solid var(--green)}
.cond.claimable{border-left:4px solid var(--info);background:linear-gradient(135deg,rgba(56,189,248,0.05),var(--surface))}
.cond.high{border-left:4px solid var(--urgent)}
.cond.standard{border-left:4px solid var(--ink-faint)}
.cond-main{min-width:0}
.cond-header{display:flex;align-items:flex-start;gap:10px;flex-wrap:wrap;margin-bottom:8px}
.cond-title{font-family:'Montserrat',sans-serif;font-size:17px;font-weight:800;line-height:1.25;color:var(--ink)}
.cond-icd{font-size:11px;color:var(--ink-faint);font-family:'SF Mono','Monaco',monospace;background:rgba(255,255,255,0.04);padding:2px 8px;border-radius:5px;margin-left:6px;vertical-align:middle}
.cond-tags{display:flex;flex-wrap:wrap;gap:5px;margin-top:5px}
.cond-plain{font-size:13px;color:var(--ink-dim);line-height:1.5;margin-bottom:10px}
.cond-meta{display:grid;grid-template-columns:1fr 1fr;gap:10px;margin-top:10px}
.cond-side{display:flex;flex-direction:column;align-items:flex-end;gap:6px;flex-shrink:0;min-width:96px}
.cond-rating{font-family:'Montserrat',sans-serif;font-size:24px;font-weight:800;line-height:1;color:var(--green-ink)}
.cond-rating-sub{font-size:10px;color:var(--ink-faint);font-weight:700;text-transform:uppercase;letter-spacing:0.5px}
.cond-actions{display:flex;flex-direction:column;gap:5px;align-items:flex-end;margin-top:6px}

/* Severity / status tags (used inside .cond-tags + standalone) */
.tag{font-size:10px;font-weight:700;letter-spacing:0.5px;padding:3px 8px;border-radius:5px;text-transform:uppercase;display:inline-flex;align-items:center;gap:4px}
.tag.sc{background:var(--green-soft);color:var(--green-ink);border:1px solid rgba(126,217,87,0.3)}
.tag.rated{background:rgba(126,217,87,0.10);color:var(--green-ink)}
.tag.severity-high{background:rgba(248,138,47,0.14);color:var(--urgent);border:1px solid rgba(248,138,47,0.3)}
.tag.severity-mod{background:rgba(245,184,74,0.14);color:var(--warn);border:1px solid rgba(245,184,74,0.3)}
.tag.severity-mild{background:rgba(125,211,252,0.10);color:var(--info)}
.tag.claimable{background:rgba(56,189,248,0.16);color:var(--info);border:1px solid rgba(56,189,248,0.4)}
.tag.crit{background:var(--crit-soft);color:var(--crit);border:1px solid rgba(255,107,122,0.35)}

/* Meta block (small key-value blocks inside cards) */
.meta-block{padding:10px 12px;background:rgba(8,38,58,0.45);border:1px solid var(--border-soft);border-radius:9px}
.meta-label{font-size:9px;font-weight:700;letter-spacing:1.2px;text-transform:uppercase;color:var(--ink-faint);margin-bottom:4px}
.meta-text{font-size:12px;color:var(--ink-dim);line-height:1.5}
.meta-text strong{color:var(--ink)}

/* AI-row callout (the "AI flagged this" inline cite under condition rows) */
.ai-row{margin-top:10px;padding:10px 12px;background:rgba(56,189,248,0.05);border:1px solid rgba(56,189,248,0.2);border-radius:9px;font-size:12px;color:var(--ink-dim);line-height:1.55;display:flex;gap:10px;align-items:flex-start}
.ai-row .ai-icon{width:22px;height:22px;border-radius:6px;background:var(--navy);display:flex;align-items:center;justify-content:center;border:1px solid rgba(56,189,248,0.3);flex-shrink:0}
.ai-row .ai-icon svg{width:14px;height:14px}
.ai-row strong{color:var(--info)}
.ai-row em{color:var(--green-ink);font-style:normal;font-weight:600}

/* Cross-link (purple) chip — KG / correlation pointers */
.link-chip{font-size:10px;color:var(--ink-dim);background:rgba(167,139,250,0.08);border:1px solid rgba(167,139,250,0.2);padding:3px 8px;border-radius:5px;text-decoration:none;display:inline-flex;align-items:center;gap:4px}
.link-chip:hover{border-color:rgba(167,139,250,0.45);color:var(--purple)}
.link-chip strong{color:var(--purple);font-weight:700}
.links-row{display:flex;flex-wrap:wrap;gap:6px;margin-top:8px}

/* ─── Pulse cards (top-row at-a-glance metrics on data pages) ─── */
.pulse{display:grid;grid-template-columns:repeat(4,1fr);gap:12px}
.pulse.cols-3{grid-template-columns:repeat(3,1fr)}
.pulse.cols-2{grid-template-columns:repeat(2,1fr)}
.pulse-card{background:var(--surface);border:1.5px solid var(--border-soft);border-radius:14px;padding:16px;display:flex;flex-direction:column;gap:6px;text-decoration:none;color:var(--ink);min-height:120px;position:relative}
.pulse-card:hover{background:var(--surface-hi);border-color:rgba(126,217,87,0.35)}
.pulse-card.urgent{border-color:rgba(248,138,47,0.35);background:linear-gradient(135deg,rgba(248,138,47,0.06),var(--surface))}
.pulse-card.warn{border-color:rgba(248,138,47,0.35);background:linear-gradient(135deg,rgba(248,138,47,0.06),var(--surface))}
.pulse-card.gap{border-color:rgba(245,184,74,0.35);background:linear-gradient(135deg,rgba(245,184,74,0.06),var(--surface))}
.pulse-card.info{border-color:rgba(56,189,248,0.35);background:linear-gradient(135deg,rgba(56,189,248,0.06),var(--surface))}
.pulse-card.crit{border-color:rgba(255,107,122,0.35);background:linear-gradient(135deg,rgba(255,107,122,0.06),var(--surface))}
.pulse-icon{width:36px;height:36px;border-radius:10px;background:var(--navy);display:flex;align-items:center;justify-content:center;border:1px solid rgba(126,217,87,0.2);margin-bottom:4px}
.pulse-icon svg{width:24px;height:24px}
.pulse-label{font-size:10px;font-weight:700;letter-spacing:1px;text-transform:uppercase;color:var(--ink-faint);font-family:'Montserrat',sans-serif}
.pulse-val{font-family:'Montserrat',sans-serif;font-size:20px;font-weight:800;line-height:1.05;color:var(--ink)}
.pulse-card.urgent .pulse-val,
.pulse-card.warn .pulse-val{color:var(--urgent)}
.pulse-card.gap .pulse-val{color:var(--warn)}
.pulse-card.info .pulse-val{color:var(--info)}
.pulse-card.crit .pulse-val{color:var(--crit)}
.pulse-sub{font-size:11px;color:var(--ink-dim);line-height:1.45}

/* ─── Crosslinks (4-up bottom nav tile row — "explore related") ─── */
.crosslinks{display:grid;grid-template-columns:repeat(4,1fr);gap:12px;margin-top:14px}
.crosslinks.cols-3{grid-template-columns:repeat(3,1fr)}
.crosslinks.cols-2{grid-template-columns:repeat(2,1fr)}
.nav-tile{background:var(--surface);border:1.5px solid var(--border-soft);border-radius:14px;padding:16px;display:flex;align-items:center;gap:12px;text-decoration:none;color:var(--ink);min-height:80px}
.nav-tile:hover{background:var(--surface-hi);border-color:rgba(126,217,87,0.35)}
.nav-tile-icon{width:42px;height:42px;border-radius:10px;background:var(--navy);display:flex;align-items:center;justify-content:center;border:1px solid rgba(126,217,87,0.2);flex-shrink:0}
.nav-tile-icon svg{width:30px;height:30px}
.nav-tile-label{font-family:'Montserrat',sans-serif;font-size:14px;font-weight:700;line-height:1.3;color:var(--ink)}
.nav-tile-sub{font-size:11px;color:var(--ink-dim)}

/* ─── Filter strip (chips above lists) ─── */
.filter-strip{display:flex;gap:8px;flex-wrap:wrap;margin-bottom:14px;align-items:center}
.filter-chip{padding:7px 14px;border-radius:999px;border:1px solid var(--border-soft);background:var(--surface);color:var(--ink-dim);font-size:12px;font-weight:600;cursor:pointer;font-family:inherit}
.filter-chip:hover{border-color:rgba(126,217,87,0.35);color:var(--ink)}
.filter-chip.active{background:var(--green);color:var(--navy);border-color:var(--green);font-weight:700}

/* ─── SMC chip (special monthly compensation indicator on rating cards) ─── */
.smc-chip{display:inline-flex;align-items:center;gap:5px;padding:5px 10px;background:var(--green-soft);border:1px solid rgba(126,217,87,0.4);color:var(--green-ink);border-radius:6px;font-size:11px;font-weight:700;letter-spacing:0.4px;text-transform:uppercase}
.smc-chip.gold{background:linear-gradient(135deg,rgba(245,184,74,0.18),rgba(245,184,74,0.06));border-color:rgba(245,184,74,0.4);color:var(--warn)}

/* ─── Data-gap card (warning callouts: "you're missing X data") ─── */
.data-gap{margin-top:14px;background:linear-gradient(135deg,rgba(245,184,74,0.10),rgba(245,184,74,0.02));border:1.5px solid rgba(245,184,74,0.4);border-radius:14px;padding:16px 18px;display:grid;grid-template-columns:auto 1fr auto;gap:14px;align-items:center;color:var(--ink)}
.data-gap-icon{width:42px;height:42px;border-radius:10px;background:var(--navy);display:flex;align-items:center;justify-content:center;border:1px solid rgba(245,184,74,0.4)}
.data-gap-icon svg{width:30px;height:30px;color:var(--warn)}
.data-gap-text{font-size:13px;color:var(--ink);line-height:1.5}
.data-gap-text strong{color:var(--warn)}
.data-gap-cta{padding:10px 14px;border-radius:9px;font-size:12px;font-weight:700;background:transparent;border:1.5px solid rgba(245,184,74,0.5);color:var(--warn);text-decoration:none;font-family:inherit;cursor:pointer;white-space:nowrap}
.data-gap-cta:hover{background:rgba(245,184,74,0.10)}

/* ─── Privacy pill / sync dot (footer + topbar indicators) ─── */
.privacy-pill{display:inline-flex;align-items:center;gap:6px;background:var(--green-soft);border:1px solid rgba(126,217,87,0.3);color:var(--green-ink);padding:6px 12px;border-radius:999px;font-size:11px;font-weight:600;letter-spacing:0.5px}
.privacy-dot{width:6px;height:6px;border-radius:50%;background:var(--green);box-shadow:0 0 6px var(--green)}
.sync-dot{width:6px;height:6px;border-radius:50%;background:var(--green);box-shadow:0 0 6px var(--green)}

/* ─── v3 Phone responsive (≤640px) ─── */
@media(max-width:640px){
    .page-title{font-size:26px}
    .hero{padding:22px 20px}
    .hero-stats,.hero-stats.cols-3{grid-template-columns:1fr 1fr;gap:8px}
    .hero-stat{padding:12px}
    .hero-stat-num,.hero-stat-val{font-size:26px}
    .hero-stat-label{font-size:9px}
    .hero-num{font-size:48px}
    .panel-head{padding:16px;grid-template-columns:auto 1fr auto;gap:12px}
    .panel-icon{width:46px;height:46px}
    .panel-icon svg{width:34px;height:34px}
    .panel-title{font-size:15px}
    .panel-num{font-size:22px}
    .panel-body{padding:0 16px 18px}
    .claim-row{grid-template-columns:1fr;padding:14px;gap:10px}
    .claim-rank{display:none}
    .claim-cta{justify-content:center}
    .pulse,.pulse.cols-3{grid-template-columns:1fr 1fr}
    .crosslinks,.crosslinks.cols-3{grid-template-columns:1fr 1fr}
    .sc-row{grid-template-columns:auto 1fr;gap:10px}
    .sc-bar,.sc-history-link{display:none}
    .cond{grid-template-columns:1fr;gap:10px;padding:14px 16px}
    .cond-side{flex-direction:row;align-items:center;justify-content:space-between;width:100%;border-top:1px solid var(--border-soft);padding-top:8px}
    .cond-actions{flex-direction:row;align-items:center;margin-top:0}
    .cond-meta{grid-template-columns:1fr;gap:6px}
}

/* ─── v3 Light-mode overrides (used by print/PDF flow) ─── */
body.light-mode{
    --surface:        #ffffff;
    --surface-hi:     #f0f4f8;
    --border-soft:    rgba(8,38,58,0.1);
    --ink:            #08263A;
    --ink-dim:        #4a5b72;
    --ink-faint:      #7a8aa0;
    --green-soft:     rgba(126,217,87,0.20);
    --green-ink:      #4a7a24;
    --warn:           #a36e10;
    --urgent:         #b86510;
    --crit:           #c92a3a;
    --info:           #1e6e9e;
    --purple:         #5e3aa3;
}
body.light-mode .hero{background:linear-gradient(135deg,rgba(126,217,87,0.10),rgba(8,38,58,0.04));border-color:rgba(8,38,58,0.12)}
body.light-mode .hero.hero-positive{background:linear-gradient(135deg,rgba(126,217,87,0.16),rgba(126,217,87,0.03));border-color:rgba(74,122,36,0.45)}
body.light-mode .hero-stat,body.light-mode .hero-summary{background:#ffffff;border-color:rgba(8,38,58,0.08);box-shadow:0 1px 3px rgba(8,38,58,0.04)}
body.light-mode .hero-stat.primary{background:linear-gradient(135deg,rgba(126,217,87,0.16),#ffffff);border-color:rgba(74,122,36,0.4)}
body.light-mode .hero-stat.warn{background:linear-gradient(135deg,rgba(248,138,47,0.10),#ffffff);border-color:rgba(184,101,16,0.4)}
body.light-mode .panel,body.light-mode .sc-row,body.light-mode .pulse-card,body.light-mode .nav-tile,body.light-mode .cond{background:#ffffff;border-color:rgba(8,38,58,0.1);box-shadow:0 1px 4px rgba(8,38,58,0.04)}
body.light-mode .claim-row{background:#f5f7fa;border-color:rgba(8,38,58,0.08)}
body.light-mode .claim-row.exemplar{background:linear-gradient(135deg,rgba(126,217,87,0.10),#f5f7fa);border-color:rgba(74,122,36,0.4)}
body.light-mode .ev-chip{background:rgba(126,217,87,0.12);border-color:rgba(74,122,36,0.25);color:#4a5b72}
body.light-mode .claim-icd,body.light-mode .cond-icd{background:rgba(8,38,58,0.06);color:var(--ink-dim)}
body.light-mode .meta-block{background:#f5f7fa;border-color:rgba(8,38,58,0.08)}
body.light-mode .data-gap{background:linear-gradient(135deg,rgba(245,184,74,0.12),rgba(245,184,74,0.03));border-color:rgba(176,118,18,0.45)}
body.light-mode .filter-chip{background:#ffffff;border-color:rgba(8,38,58,0.12)}
body.light-mode .panel-icon,body.light-mode .pulse-icon,body.light-mode .nav-tile-icon,body.light-mode .data-gap-icon,body.light-mode .ai-row .ai-icon{background:var(--navy);border-color:rgba(126,217,87,0.5)}
body.light-mode .privacy-pill{background:rgba(126,217,87,0.14);border-color:rgba(74,122,36,0.4);color:var(--green-ink)}
body.light-mode .zone-num{background:rgba(126,217,87,0.2);color:var(--green-ink);border-color:rgba(74,122,36,0.35)}
body.light-mode .smc-chip{background:rgba(126,217,87,0.18);border-color:rgba(74,122,36,0.4);color:var(--green-ink)}
body.light-mode .ai-row{background:rgba(56,189,248,0.08);border-color:rgba(30,110,158,0.3)}

/* End v3 visual layer */