* {
            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.5);
            --text-muted: rgba(255,255,255,0.4);
            --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;
        }

        /* 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,
#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; }
.badge-orange { background: #f88a2f; color: white !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}