:root {
    --bg: #0e0e11;
    --card: #15151a;
    --primary: #3d3d48;
    --primary-hover: #4c4c5a;
    --primary-light: #3f3f46;
    --primary-dark: #09090b;
    --accent: #f59e0b;
    --accent-hover: #fbbf24;
    --accent-light: #ffab63;
    --accent-dark: #b9530a;
    --text: #f4f4f5;
    --text-muted: #a8a8b0;
    --text-light: #71717a;
    --border: #2a2a31;
    --border-light: #34343c;
    --green: #10B981;
    --green-bg: #D1FAE5;
    --green-border: #A7F3D0;
    --red: #EF4444;
    --red-bg: #FEE2E2;
    --red-border: #FCA5A5;
    --yellow: #F59E0B;
    --yellow-bg: #FEF3C7;
    --yellow-border: #FCD34D;
    --blue: #3B82F6;
    --blue-bg: #DBEAFE;
    --blue-border: #BFDBFE;
    --orange: #ED7F22;
    --orange-bg: #FFF1E6;
    --orange-border: #FDE0C4;
    --sidebar: #0b0b0d;
    --sidebar-text: #fafafa;
    --sidebar-muted: rgba(250, 250, 250, 0.58);
    --sidebar-hover: rgba(255, 255, 255, 0.06);
    --sidebar-active: rgba(255, 255, 255, 0.095);
    --radius: 14px;
    --radius-sm: 9px;
    --radius-xs: 6px;
    --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.035);
    --shadow-md: 0 6px 20px rgba(0, 0, 0, 0.055);
    --shadow-lg: 0 12px 32px rgba(0, 0, 0, 0.07);
    --shadow-xl: 0 20px 50px rgba(0, 0, 0, 0.09);
    --muted: #a8a8b0;
    --shadow: 0 6px 20px rgba(0, 0, 0, 0.35);
    color-scheme: dark;
}
html[data-mrz-theme="dark"] .panel-container { color: #f4f4f5 !important; }
html[data-mrz-theme="dark"] .panel-container { color: #f4f4f5 !important; }
html[data-mrz-theme="dark"] .vpn-access-score { color: #f4f4f5 !important; }
html[data-mrz-theme="dark"] .vpn-access-modal-box { color: #f4f4f5 !important; }
html[data-mrz-theme="dark"] .create-user-modal-box { background: #17171c !important; border: 1px solid #2b2b32 !important; }
html[data-mrz-theme="dark"] .create-user-modal-close { background: #1e1e24 !important; }
html[data-mrz-theme="dark"] .create-user-modal-close:hover { background: #222228 !important; }
html[data-mrz-theme="dark"] .create-user-modal-field label { color: #e4e4e7 !important; }
html[data-mrz-theme="dark"] .create-user-modal-field input, html[data-mrz-theme="dark"] .create-user-modal-field select { border: 1px solid #2b2b32 !important; background: #17171c !important; }
html[data-mrz-theme="dark"] .table-action-manage { color: #f4f4f5 !important; }
html[data-mrz-theme="dark"] .table-action-download { color: #e4e4e7 !important; }
html[data-mrz-theme="dark"] .table-action-copy { color: var(--mrz-muted) !important; }
html[data-mrz-theme="dark"] .panel-main { color: #f4f4f5 !important; }
html[data-mrz-theme="dark"] .create-multi-user-modal-box { background: #17171c !important; }
html[data-mrz-theme="dark"] .create-multi-user-modal-field input, html[data-mrz-theme="dark"] .create-multi-user-modal-field select { border: 1px solid #2b2b32 !important; background: #17171c !important; }
html[data-mrz-theme="dark"] .create-user-modal-header h2 { color: #f4f4f5 !important; }
html[data-mrz-theme="dark"] .create-user-modal-close:hover { color: #f4f4f5 !important; }
html[data-mrz-theme="dark"] .create-user-modal-field input, html[data-mrz-theme="dark"] .create-user-modal-field select { color: #f4f4f5 !important; }
html[data-mrz-theme="dark"] .create-multi-user-modal-header h2 { color: #f4f4f5 !important; }
html[data-mrz-theme="dark"] .create-multi-user-modal-close:hover { color: #f4f4f5 !important; }
html[data-mrz-theme="dark"] .create-multi-user-modal-field input, html[data-mrz-theme="dark"] .create-multi-user-modal-field select { color: #f4f4f5 !important; }
html[data-mrz-theme="dark"] body { color: #f4f4f5 !important; }
html[data-mrz-theme="dark"] .panel-container { color: #f4f4f5 !important; }
html[data-mrz-theme="dark"] body { color: #f4f4f5 !important; }
html[data-mrz-theme="dark"] .panel-container { color: #f4f4f5 !important; }
html[data-mrz-theme="dark"] body { color: #f4f4f5 !important; }
html[data-mrz-theme="dark"] body { color: #f4f4f5 !important; }
html[data-mrz-theme="dark"] .panel-container { color: #f4f4f5 !important; }
html[data-mrz-theme="dark"] .profile-item { background: #1b1b20 !important; border: 1px solid #2b2b32 !important; }
html[data-mrz-theme="dark"] .app-link { background: #1b1b20 !important; }
html[data-mrz-theme="dark"] .app-link:hover { background: #17171c !important; }
html[data-mrz-theme="dark"] .guide-step { background: #1b1b20 !important; border: 1px solid #2b2b32 !important; }
html[data-mrz-theme="dark"] .last-connection-grid { background: #1b1b20 !important; }
html[data-mrz-theme="dark"] .last-connection-grid > div { border: 1px solid #2b2b32 !important; background: #17171c !important; }
html[data-mrz-theme="dark"] .last-connection-usage { border-top: 1px solid #2b2b32 !important; }
html[data-mrz-theme="dark"] .profile-progress-container { background: #212127 !important; }
html[data-mrz-theme="dark"] body { color: #f4f4f5 !important; }
html[data-mrz-theme="dark"] .username { color: #f4f4f5 !important; }
html[data-mrz-theme="dark"] .last-connection-title { color: #f4f4f5 !important; }
html[data-mrz-theme="dark"] .apps-title { color: #f4f4f5 !important; }
html[data-mrz-theme="dark"] .app-link:hover { color: #f4f4f5 !important; }
html[data-mrz-theme="dark"] .guide-title { color: #f4f4f5 !important; }

/* ===== MRZ SHEET-REMOVE (page canvas = theme bg, both modes) ===== */

/* ===== MRZ CANVAS (unified page background, all pages) ===== */
html[data-mrz-theme="dark"] body, html[data-mrz-theme="dark"] .panel-layout, html[data-mrz-theme="dark"] .panel-main { background: radial-gradient(circle at 78% 4%, rgba(245,158,11,.10), transparent 25%), radial-gradient(circle at 18% 45%, rgba(255,255,255,.018), transparent 30%), var(--mrz-bg) !important; }
html[data-mrz-theme="dark"] .panel-container { background: transparent !important; }

/* ===== MRZ TOKENS (semantic, single source of truth) ===== */
:root {
    --mrz-bg: var(--mrz-bg); --mrz-card: #2a1d12; --mrz-card-2: #3a2817; --mrz-input: #211510;
    --mrz-text: #fdf3e3; --mrz-text-2: #e3cba4; --mrz-muted: #8f7658;
    --mrz-border: #4a341f; --mrz-border-strong: #6b4c2c;
    --mrz-accent: #f59e0b; --mrz-accent-hover: #fbbf24; --mrz-accent-2: #fb7185;
    --mrz-accent-soft: rgba(245,158,11,.14); --mrz-accent-bd: rgba(245,158,11,.38);
    --mrz-green-tx: #86efac; --mrz-green-bg: rgba(34,197,94,.10); --mrz-green-bd: rgba(34,197,94,.25);
    --mrz-red-tx: #fda4af; --mrz-red-bg: rgba(244,63,94,.08); --mrz-red-bd: rgba(244,63,94,.25);
    --mrz-amber-tx: #fcd34d; --mrz-amber-bg: rgba(245,158,11,.10); --mrz-amber-bd: rgba(245,158,11,.30);
    --mrz-blue-tx: #93c5fd; --mrz-blue-bg: rgba(59,130,246,.10); --mrz-blue-bd: rgba(59,130,246,.30);
    --mrz-accent-tx: #fcd34d;
    --mrz-purple-tx: #c4b5fd; --mrz-purple-bg: rgba(139,92,246,.065); --mrz-purple-bd: rgba(139,92,246,.17);
    --mrz-btn-dark-bg: #26262b; --mrz-btn-dark-bd: #3f3f46; --mrz-btn-dark-tx: #f4f4f5;
    --mrz-r: 14px; --mrz-r-sm: 9px; --mrz-r-xs: 6px;
    --mrz-sh-1: 0 4px 14px rgba(0,0,0,.25); --mrz-sh-2: 0 8px 26px rgba(0,0,0,.30);
}
html[data-mrz-theme="dark"] .mrz-select { color-scheme: dark; }

/* ===== MRZ EMBER-TIDE THEME (dark) — single source of truth ===== */
html[data-mrz-theme="dark"] {
    --bg: #1c130c; --card: #2a1d12;
    --primary: #f59e0b; --primary-hover: #fbbf24; --primary-light: #fcd34d; --primary-dark: #b45309;
    --accent: #f59e0b; --accent-hover: #fbbf24; --accent-light: #fcd34d; --accent-dark: #b45309;
    --text: #fafaf9; --text-muted: #a8a29e; --text-light: #78716c;
    --border: rgba(255,255,255,.09); --border-light: rgba(255,255,255,.05);
    --green: #22c55e; --green-bg: rgba(34,197,94,.13); --green-border: rgba(34,197,94,.3);
    --red: #f43f5e; --red-bg: rgba(244,63,94,.12); --red-border: rgba(244,63,94,.3);
    --yellow: #fbbf24; --yellow-bg: rgba(251,191,36,.12); --yellow-border: rgba(251,191,36,.3);
    --blue: #38bdf8; --blue-bg: rgba(56,189,248,.12); --blue-border: rgba(56,189,248,.3);
    --orange: #f59e0b; --orange-bg: rgba(245,158,11,.12); --orange-border: rgba(245,158,11,.32);
    --sidebar: #1a1512; --sidebar-text: #faf5ef; --sidebar-muted: rgba(250,245,239,.6);
    --sidebar-hover: rgba(255,255,255,.06); --sidebar-active: rgba(245,158,11,.18);
    --radius: 14px; --radius-sm: 9px; --radius-xs: 6px;
    --shadow-sm: 0 1px 2px rgba(0,0,0,.3); --shadow-md: 0 6px 20px rgba(0,0,0,.35);
    --shadow-lg: 0 12px 32px rgba(0,0,0,.4); --shadow-xl: 0 20px 50px rgba(0,0,0,.45);
    --shadow: 0 6px 20px rgba(0,0,0,.35); --muted: #a8a29e;
    --mrz-bg: #1c130c; --mrz-card: #2a1d12; --mrz-card-2: #3a2817; --mrz-input: #211510;
    --mrz-text: #fdf3e3; --mrz-text-2: #e3cba4; --mrz-muted: #8f7658;
    --mrz-border: #4a341f; --mrz-border-strong: #6b4c2c;
    --mrz-accent: #f59e0b; --mrz-accent-hover: #fbbf24; --mrz-accent-2: #fb7185;
    --mrz-accent-soft: rgba(245,158,11,.14); --mrz-accent-bd: rgba(245,158,11,.38);
    --mrz-accent-tx: #fdba74;
    --mrz-teal: #2dd4bf; --mrz-teal-tx: #5eead4; --mrz-teal-bg: rgba(45,212,191,.13); --mrz-teal-bd: rgba(45,212,191,.32);
    --mrz-green-tx: #86efac; --mrz-green-bg: rgba(34,197,94,.13); --mrz-green-bd: rgba(34,197,94,.3);
    --mrz-red-tx: #fda4af; --mrz-red-bg: rgba(244,63,94,.12); --mrz-red-bd: rgba(244,63,94,.3);
    --mrz-amber-tx: #fcd34d; --mrz-amber-bg: rgba(251,191,36,.12); --mrz-amber-bd: rgba(251,191,36,.3);
    --mrz-blue-tx: #7dd3fc; --mrz-blue-bg: rgba(56,189,248,.12); --mrz-blue-bd: rgba(56,189,248,.3);
    --mrz-purple-tx: #c4b5fd; --mrz-purple-bg: rgba(139,92,246,.13); --mrz-purple-bd: rgba(139,92,246,.3);
    --mrz-accent-tx: #fdba74;
    --mrz-btn-dark-bg: #3a2817; --mrz-btn-dark-bd: #6b4c2c; --mrz-btn-dark-tx: #fdf3e3; --mrz-on-accent: #ffffff; --mrz-on-light: #09090b; --mrz-accent-rgb: 245,158,11; --mrz-green-rgb: 34,197,94; --mrz-red-rgb: 244,63,94; --mrz-amber-rgb: 245,158,11; --mrz-blue-rgb: 59,130,246; --mrz-purple-rgb: 139,92,246; --mrz-teal-rgb: 45,212,191; --mrz-on-accent-rgb: 255,255,255;
    --mrz-r: 14px; --mrz-r-sm: 9px; --mrz-r-xs: 6px;
    --mrz-sh-1: 0 4px 14px rgba(0,0,0,.3); --mrz-sh-2: 0 8px 26px rgba(0,0,0,.35);
    color-scheme: dark;
}

/* ===== MRZ UTIL TOKENS (dark) ===== */
html[data-mrz-theme="dark"] {
    --mrz-hi: rgba(255,255,255,.05); --mrz-lo: rgba(0,0,0,.35);
    --mrz-chart-1: oklch(0.879 0.169 91.605); --mrz-chart-2: oklch(0.769 0.188 70.08);
    --mrz-chart-3: oklch(0.666 0.179 58.318); --mrz-chart-4: oklch(0.555 0.163 48.998);
    --mrz-chart-5: oklch(0.473 0.137 46.201);
}
