:root {
    --bg: #09131b;
    --bg-elevated: #0d1d28;
    --panel: rgba(11, 27, 37, 0.92);
    --panel-strong: rgba(13, 35, 47, 0.98);
    --card: rgba(13, 39, 52, 0.88);
    --card-strong: rgba(16, 48, 63, 0.98);
    --ink: #ecf7fb;
    --muted: #a7c0cb;
    --muted-2: #7f9aa6;
    --line: rgba(188, 239, 246, 0.15);
    --line-strong: rgba(83, 226, 214, 0.34);
    --primary-accent: #32e2c2;
    --accent: var(--primary-accent);
    --secondary-accent: #62c5ff;
    --accent-2: var(--secondary-accent);
    --accent-3: #5ce095;
    --danger: #ff8d98;
    --warn: #f4d18a;
    --shadow: 0 22px 56px rgba(0, 0, 0, 0.34);
    --shadow-soft: 0 12px 28px rgba(0, 0, 0, 0.22);
    --radius-xl: 20px;
    --radius-lg: 14px;
    --radius-md: 10px;
    --radius-panel: var(--radius-xl);
    --action-border: color-mix(in srgb, var(--accent) 34%, var(--line));
    --action-bg: linear-gradient(135deg, color-mix(in srgb, var(--accent) 22%, transparent), color-mix(in srgb, var(--accent-2) 15%, transparent)), color-mix(in srgb, var(--card-strong) 90%, var(--bg));
    --action-bg-hover: linear-gradient(135deg, color-mix(in srgb, var(--accent) 36%, transparent), color-mix(in srgb, var(--accent-2) 26%, transparent)), color-mix(in srgb, var(--card-strong) 94%, var(--bg));
    --action-text: var(--ink);
    --action-secondary-border: color-mix(in srgb, var(--accent-2) 34%, var(--line));
    --action-secondary-bg: color-mix(in srgb, var(--accent-2) 17%, var(--card));
    --action-primary-bg: color-mix(in srgb, var(--accent) 17%, var(--card));
    --zip-panel-surface: radial-gradient(circle at 92% 0, color-mix(in srgb, var(--accent-2) 16%, transparent), transparent 30%), linear-gradient(155deg, color-mix(in srgb, var(--accent) 9%, transparent), color-mix(in srgb, var(--panel) 96%, var(--bg)) 42%), var(--panel);
    --zip-node-surface: color-mix(in srgb, var(--card) 88%, transparent);
    --zip-node-surface-strong: color-mix(in srgb, var(--card-strong) 92%, var(--panel));
}

* {
    box-sizing: border-box;
    margin: 0;
    padding: 0;
}

html,
body {
    width: 100%;
    max-width: 100%;
    overflow-x: hidden;
}

@supports (overflow: clip) {
    html,
    body { overflow-x: clip; }
}

body {
    min-height: 100vh;
    padding: 18px;
    background:
        linear-gradient(135deg, rgba(50, 226, 194, 0.09), transparent 28%),
        linear-gradient(315deg, rgba(98, 197, 255, 0.08), transparent 32%),
        linear-gradient(180deg, #071018, var(--bg) 36%, #07151c);
    color: var(--ink);
    font: 400 15px/1.5 Inter, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
}

a {
    color: inherit;
}

button,
input,
select,
textarea {
    font: inherit;
}

img,
svg,
iframe,
ins.adsbygoogle {
    max-width: 100%;
}

h1,
h2,
h3,
h4 {
    font-family: Manrope, Inter, system-ui, sans-serif;
    letter-spacing: 0;
}

:focus-visible {
    outline: 3px solid rgba(98, 197, 255, 0.58);
    outline-offset: 3px;
}

@media (max-width: 680px) {
    body {
        padding: 10px;
    }
}

/* Theme system for the NEU staging build. Keep palette changes centralized here. */
html {
    color-scheme: dark;
}

body {
    background:
        linear-gradient(135deg, var(--theme-glow-a, rgba(50, 226, 194, 0.09)), transparent 28%),
        linear-gradient(315deg, var(--theme-glow-b, rgba(98, 197, 255, 0.08)), transparent 32%),
        linear-gradient(180deg, var(--theme-bg-start, #071018), var(--bg) 36%, var(--theme-bg-end, #07151c));
}

html[data-theme="dark"] {
    --bg: #050509;
    --bg-elevated: #0b0b12;
    --panel: rgba(9, 9, 16, 0.96);
    --panel-strong: rgba(13, 13, 23, 0.99);
    --card: rgba(16, 16, 27, 0.92);
    --card-strong: rgba(20, 20, 34, 0.99);
    --ink: #f7f8ff;
    --muted: #b5b8c8;
    --muted-2: #8d92a6;
    --line: rgba(205, 207, 232, 0.14);
    --line-strong: rgba(172, 146, 255, 0.42);
    --primary-accent: #a98cff;
    --secondary-accent: #62d6ff;
    --accent-3: #ff8fcb;
    --warn: #ffd166;
    --shadow: 0 24px 62px rgba(0, 0, 0, 0.62);
    --shadow-soft: 0 14px 34px rgba(0, 0, 0, 0.46);
    --theme-glow-a: rgba(169, 140, 255, 0.16);
    --theme-glow-b: rgba(255, 143, 203, 0.08);
    --theme-bg-start: #020204;
    --theme-bg-end: #090812;
}

html[data-theme="amoled"] {
    --bg: #000000;
    --bg-elevated: #010101;
    --panel: rgba(0, 0, 0, 0.99);
    --panel-strong: rgba(2, 2, 2, 0.995);
    --card: rgba(3, 3, 3, 0.985);
    --card-strong: rgba(6, 6, 6, 0.995);
    --ink: #f4fffc;
    --muted: #a4bab4;
    --muted-2: #78948c;
    --line: rgba(73, 255, 205, 0.15);
    --line-strong: rgba(57, 255, 201, 0.58);
    --primary-accent: #39ffc9;
    --secondary-accent: #7fffe0;
    --accent-3: #a7ff6a;
    --danger: #ff8793;
    --warn: #f2ce78;
    --shadow: 0 0 0 1px rgba(57, 255, 201, 0.055);
    --shadow-soft: 0 0 0 1px rgba(57, 255, 201, 0.045);
    --theme-glow-a: rgba(57, 255, 201, 0.028);
    --theme-glow-b: rgba(127, 255, 224, 0.015);
    --theme-bg-start: #000000;
    --theme-bg-end: #000000;
    --action-border: rgba(57, 255, 201, 0.34);
    --action-bg: linear-gradient(135deg, rgba(57, 255, 201, 0.14), rgba(127, 255, 224, 0.035)), #030303;
    --action-bg-hover: linear-gradient(135deg, rgba(57, 255, 201, 0.29), rgba(127, 255, 224, 0.09)), #050505;
    --action-secondary-border: rgba(127, 255, 224, 0.3);
    --action-secondary-bg: rgba(127, 255, 224, 0.085);
    --action-primary-bg: rgba(57, 255, 201, 0.105);
    --zip-panel-surface: radial-gradient(circle at 92% 0, rgba(127, 255, 224, 0.055), transparent 28%), linear-gradient(155deg, rgba(57, 255, 201, 0.025), #000 42%), #000;
    --zip-node-surface: rgba(3, 3, 3, 0.99);
    --zip-node-surface-strong: rgba(6, 6, 6, 0.995);
}

html[data-theme="light"] {
    color-scheme: light;
    --bg: #eef4f7;
    --bg-elevated: #ffffff;
    --panel: rgba(255, 255, 255, 0.94);
    --panel-strong: rgba(255, 255, 255, 0.98);
    --card: rgba(255, 255, 255, 0.92);
    --card-strong: rgba(248, 252, 253, 0.98);
    --ink: #142532;
    --muted: #526b79;
    --muted-2: #6e8794;
    --line: rgba(41, 80, 98, 0.17);
    --line-strong: rgba(0, 137, 168, 0.38);
    --primary-accent: #008fa7;
    --secondary-accent: #3b71d6;
    --accent-3: #168a55;
    --danger: #b4233c;
    --warn: #8a5a00;
    --shadow: 0 22px 52px rgba(45, 74, 91, 0.18);
    --shadow-soft: 0 11px 26px rgba(45, 74, 91, 0.12);
    --theme-glow-a: rgba(0, 143, 167, 0.13);
    --theme-glow-b: rgba(59, 113, 214, 0.1);
    --theme-bg-start: #f8fbfc;
    --theme-bg-end: #e7eff3;
}

html[data-theme="graphite"] {
    --bg: #101316;
    --bg-elevated: #181d22;
    --panel: rgba(21, 26, 31, 0.94);
    --panel-strong: rgba(27, 33, 39, 0.99);
    --card: rgba(28, 34, 40, 0.91);
    --card-strong: rgba(35, 42, 49, 0.99);
    --ink: #f1f5f7;
    --muted: #b5c0c6;
    --muted-2: #8d9aa3;
    --line: rgba(210, 222, 228, 0.15);
    --line-strong: rgba(156, 184, 198, 0.42);
    --primary-accent: #a8c3d1;
    --secondary-accent: #7dd3c7;
    --accent-3: #c6a8ff;
    --warn: #e6c27a;
    --shadow: 0 24px 58px rgba(0, 0, 0, 0.5);
    --shadow-soft: 0 13px 32px rgba(0, 0, 0, 0.34);
    --theme-glow-a: rgba(168, 195, 209, 0.1);
    --theme-glow-b: rgba(125, 211, 199, 0.08);
    --theme-bg-start: #0b0d10;
    --theme-bg-end: #151a1f;
}

html[data-theme="ocean"] {
    --bg: #031b31;
    --bg-elevated: #062c4c;
    --panel: rgba(5, 38, 68, 0.94);
    --panel-strong: rgba(6, 52, 88, 0.99);
    --card: rgba(7, 58, 92, 0.91);
    --card-strong: rgba(8, 76, 116, 0.99);
    --ink: #eefaff;
    --muted: #afd3e7;
    --muted-2: #83b4cc;
    --line: rgba(149, 224, 255, 0.2);
    --line-strong: rgba(87, 206, 255, 0.48);
    --primary-accent: #33c7ff;
    --secondary-accent: #00f0c8;
    --accent-3: #8cb8ff;
    --warn: #ffd36e;
    --theme-glow-a: rgba(51, 199, 255, 0.2);
    --theme-glow-b: rgba(0, 240, 200, 0.12);
    --theme-bg-start: #021020;
    --theme-bg-end: #042947;
}

html[data-theme="forest"] {
    --bg: #08160f;
    --bg-elevated: #0d2118;
    --panel: rgba(11, 32, 23, 0.93);
    --panel-strong: rgba(13, 43, 29, 0.98);
    --card: rgba(14, 45, 31, 0.9);
    --card-strong: rgba(16, 58, 38, 0.98);
    --ink: #effaf3;
    --muted: #abc6b7;
    --muted-2: #83a693;
    --line: rgba(188, 238, 205, 0.16);
    --line-strong: rgba(92, 224, 149, 0.38);
    --primary-accent: #5ce095;
    --secondary-accent: #d0d66a;
    --accent-3: #63d6c5;
    --warn: #f1c96b;
    --theme-glow-a: rgba(92, 224, 149, 0.11);
    --theme-glow-b: rgba(208, 214, 106, 0.08);
    --theme-bg-start: #041008;
    --theme-bg-end: #0a1c12;
}

html[data-theme="sunset"] {
    --bg: #1e0f0b;
    --bg-elevated: #2a1711;
    --panel: rgba(42, 22, 15, 0.94);
    --panel-strong: rgba(57, 28, 18, 0.99);
    --card: rgba(63, 31, 20, 0.91);
    --card-strong: rgba(78, 39, 24, 0.99);
    --ink: #fff6ef;
    --muted: #dfbca9;
    --muted-2: #b98f7b;
    --line: rgba(255, 207, 173, 0.17);
    --line-strong: rgba(255, 152, 92, 0.44);
    --primary-accent: #ff9b63;
    --secondary-accent: #ffd166;
    --accent-3: #ff6fa8;
    --warn: #ffe08a;
    --theme-glow-a: rgba(255, 155, 99, 0.16);
    --theme-glow-b: rgba(255, 111, 168, 0.08);
    --theme-bg-start: #120806;
    --theme-bg-end: #2a140d;
}

html[data-theme="rose"] {
    --bg: #1b0d18;
    --bg-elevated: #271424;
    --panel: rgba(38, 18, 34, 0.94);
    --panel-strong: rgba(53, 24, 48, 0.99);
    --card: rgba(58, 26, 52, 0.91);
    --card-strong: rgba(72, 31, 64, 0.99);
    --ink: #fff3fb;
    --muted: #dfb8d3;
    --muted-2: #b88aa9;
    --line: rgba(255, 190, 232, 0.18);
    --line-strong: rgba(255, 121, 194, 0.46);
    --primary-accent: #ff79c2;
    --secondary-accent: #b99cff;
    --accent-3: #ffd1e8;
    --warn: #ffd166;
    --theme-glow-a: rgba(255, 121, 194, 0.16);
    --theme-glow-b: rgba(185, 156, 255, 0.1);
    --theme-bg-start: #110711;
    --theme-bg-end: #2a1025;
}