:root {
  color-scheme: dark;
  --bg: #080c18;
  --bg2: #0d1220;
  --bg3: #131928;
  --surface: #161d2e;
  --surface2: #1c2438;
  --surface3: #222c42;
  --border: rgba(100, 130, 200, 0.12);
  --border2: rgba(100, 130, 200, 0.22);
  --text: #c8d4f0;
  --text2: #7a8ab0;
  --text3: #4a5878;
  --accent: #4fc3f7;
  --accent2: #7c4dff;
  --gold: #ffd54f;
  --green: #69f0ae;
  --red: #ff6b6b;
  --orange: #ffb74d;
  --purple: #ce93d8;
  --on-accent: #08111f;
  --mono: 'JetBrains Mono', monospace;
  --sans: 'DM Sans', sans-serif;
  --serif: 'Crimson Pro', serif;
  --r: 8px;
  --hdr: 52px;
  --hdr2: 42px;
  --overlay: rgba(2, 8, 20, .68);
  --overlay-ring: rgba(255, 255, 255, .025);
  --focus-ring: rgba(79, 195, 247, .08);
  --panel-shadow-left: 2px 0 12px rgba(0, 0, 0, .16);
  --panel-shadow-right: -2px 0 12px rgba(0, 0, 0, .16);
  --accent-soft: rgba(79, 195, 247, .1);
  --accent-soft-strong: rgba(79, 195, 247, .18);
  --accent-border: rgba(79, 195, 247, .25);
  --accent-border-strong: rgba(79, 195, 247, .4);
  --accent-glow: 0 0 14px rgba(79, 195, 247, .35);
  --tab-hover-bg: rgba(255, 255, 255, .035);
  --tab-active-bg: rgba(79, 195, 247, .11);
  --tab-active-border: rgba(79, 195, 247, .28);
  --tab-active-line: rgba(79, 195, 247, .95);
  --tab-overflow-shadow: rgba(2, 7, 16, .62);
  --purple-soft: rgba(206, 147, 216, .14);
  --purple-border: rgba(206, 147, 216, .3);
  --green-soft: rgba(105, 240, 174, .1);
  --green-border: rgba(105, 240, 174, .3);
  --gold-soft: rgba(255, 213, 79, .12);
  --gold-border: rgba(255, 213, 79, .3);
  --orange-soft: rgba(255, 183, 77, .1);
  --orange-border: rgba(255, 183, 77, .3);
  --red-soft: rgba(255, 107, 107, .1);
  --red-border: rgba(255, 107, 107, .3);
  --canvas-glow-a: rgba(79, 195, 247, .035);
  --canvas-glow-b: rgba(124, 77, 255, .03);
  --state-active-fill: rgba(79, 195, 247, .18);
  --state-active-shadow: drop-shadow(0 0 7px rgba(79, 195, 247, .45));
  --state-reject-fill: rgba(255, 107, 107, .1);
  --marquee-fill: rgba(79, 195, 247, .1);
  --minimap-viewport: rgba(79, 195, 247, .6);
  --shadow-sm: 0 2px 8px rgba(0, 0, 0, .35);
  --shadow-md: 0 4px 18px rgba(0, 0, 0, .45);
  --shadow-lg: 0 20px 60px rgba(0, 0, 0, .6);
  --transition-fast: 0.12s ease;
  --transition-base: 0.18s ease;
}

:root[data-theme="light"] {
  color-scheme: light;
  --bg: #eef4fb;
  --bg2: #f8fbff;
  --bg3: #e8f0f8;
  --surface: #ffffff;
  --surface2: #f4f8fd;
  --surface3: #e1eaf5;
  --border: rgba(41, 73, 109, 0.12);
  --border2: rgba(41, 73, 109, 0.2);
  --text: #16324a;
  --text2: #496277;
  --text3: #7d92a6;
  --accent: #178ed8;
  --accent2: #6858e8;
  --gold: #b7791f;
  --green: #198b63;
  --red: #cb4545;
  --orange: #d97706;
  --purple: #8458cf;
  --on-accent: #f8fbff;
  --overlay: rgba(24, 45, 70, .18);
  --overlay-ring: rgba(255, 255, 255, .75);
  --focus-ring: rgba(23, 142, 216, .14);
  --panel-shadow-left: 2px 0 18px rgba(34, 58, 86, .12);
  --panel-shadow-right: -2px 0 18px rgba(34, 58, 86, .12);
  --accent-soft: rgba(23, 142, 216, .1);
  --accent-soft-strong: rgba(23, 142, 216, .16);
  --accent-border: rgba(23, 142, 216, .22);
  --accent-border-strong: rgba(23, 142, 216, .34);
  --accent-glow: 0 10px 24px rgba(23, 142, 216, .18);
  --tab-hover-bg: rgba(22, 50, 74, .05);
  --tab-active-bg: rgba(23, 142, 216, .095);
  --tab-active-border: rgba(23, 142, 216, .28);
  --tab-active-line: rgba(23, 142, 216, .92);
  --tab-overflow-shadow: rgba(113, 136, 167, .36);
  --purple-soft: rgba(132, 88, 207, .12);
  --purple-border: rgba(132, 88, 207, .24);
  --green-soft: rgba(25, 139, 99, .1);
  --green-border: rgba(25, 139, 99, .24);
  --gold-soft: rgba(183, 121, 31, .11);
  --gold-border: rgba(183, 121, 31, .24);
  --orange-soft: rgba(217, 119, 6, .1);
  --orange-border: rgba(217, 119, 6, .24);
  --red-soft: rgba(203, 69, 69, .09);
  --red-border: rgba(203, 69, 69, .24);
  --canvas-glow-a: rgba(23, 142, 216, .055);
  --canvas-glow-b: rgba(104, 88, 232, .04);
  --state-active-fill: rgba(23, 142, 216, .12);
  --state-active-shadow: drop-shadow(0 8px 18px rgba(23, 142, 216, .14));
  --state-reject-fill: rgba(203, 69, 69, .08);
  --marquee-fill: rgba(23, 142, 216, .08);
  --minimap-viewport: rgba(23, 142, 216, .45);
  --shadow-sm: 0 2px 10px rgba(31, 53, 80, .08);
  --shadow-md: 0 10px 28px rgba(31, 53, 80, .12);
  --shadow-lg: 0 20px 56px rgba(31, 53, 80, .16);
}

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

html,
body {
  height: 100%;
  overflow: hidden;
}

body {
  font-family: var(--mono);
  background: var(--bg);
  color: var(--text);
  display: flex;
  flex-direction: column;
  user-select: none;
}

/* Re-enable selection only where it makes sense */
input,
textarea,
select,
.code-box,
.def-box,
.slist,
.gram-output,
.rp-section-body,
.algo-output,
.theory-content {
  user-select: text;
}

::-webkit-scrollbar {
  width: 4px;
  height: 4px;
}

::-webkit-scrollbar-track {
  background: transparent;
}

::-webkit-scrollbar-thumb {
  background: var(--border2);
  border-radius: 2px;
}