:root {
  --bg: #0e0a07;
  --panel: #2a1e17;
  --panel-soft: #37271d;
  --ink: #f7e7cc;
  --ink-soft: #d9bd97;
  --accent: #53d8df;
  --accent-2: #d8a56a;
  --accent-3: #f08a3c;
  --good: #72d6ab;
  --danger: #ff7a57;
  --bg-grad-a: rgba(85, 216, 223, 0.22);
  --bg-grad-b: rgba(240, 138, 60, 0.18);
  --bg-base-top: #140f0b;
  --bg-base-mid: #0d0906;
  --bg-base-bot: #19120d;
  --glow-1: #47c4cd;
  --glow-2: #c37737;
  --radius: 18px;
  --shadow: 0 16px 36px rgba(0, 0, 0, 0.48);
  --panel-min-height: 62vh;
}

* {
  box-sizing: border-box;
}

body {
  margin: 0;
  min-height: 100vh;
  font-family: "Rajdhani", sans-serif;
  background:
    radial-gradient(circle at 15% 10%, var(--bg-grad-a), transparent 30%),
    radial-gradient(circle at 90% 85%, var(--bg-grad-b), transparent 38%),
    linear-gradient(160deg, var(--bg-base-top) 0%, var(--bg-base-mid) 45%, var(--bg-base-bot) 100%);
  color: var(--ink);
  position: relative;
  overflow-x: hidden;
}

body::before {
  content: "";
  position: fixed;
  inset: 0;
  pointer-events: none;
  background:
    linear-gradient(rgba(255, 255, 255, 0.03) 1px, transparent 1px) 0 0 / 100% 22px,
    linear-gradient(90deg, rgba(255, 255, 255, 0.02) 1px, transparent 1px) 0 0 / 22px 100%;
  mix-blend-mode: soft-light;
}

.bg-glow {
  position: fixed;
  z-index: 0;
  filter: blur(30px);
  opacity: 0.55;
  pointer-events: none;
}

.bg-glow-one {
  top: -80px;
  right: -40px;
  width: 240px;
  height: 240px;
  background: var(--glow-1);
}

.bg-glow-two {
  bottom: 10%;
  left: -80px;
  width: 260px;
  height: 260px;
  background: var(--glow-2);
}

body[data-theme="chrome"] {
  --panel: #1f232b;
  --panel-soft: #2a303a;
  --ink: #edf2fb;
  --ink-soft: #c4cddd;
  --accent: #6ec8ff;
  --accent-2: #b9c4d7;
  --accent-3: #8ca2c5;
  --good: #73d3b0;
  --danger: #ff7b82;
  --bg-grad-a: rgba(130, 170, 220, 0.22);
  --bg-grad-b: rgba(215, 225, 245, 0.14);
  --bg-base-top: #10131a;
  --bg-base-mid: #171b24;
  --bg-base-bot: #0c1017;
  --glow-1: #8cb2d8;
  --glow-2: #8b96a8;
  --item-odd: linear-gradient(145deg, #334563, #232e41);
  --item-even: linear-gradient(145deg, #233a4f, #3a2f46);
}

body[data-theme="neon-circuit"] {
  --panel: #141a2d;
  --panel-soft: #1c2440;
  --ink: #dbf7ff;
  --ink-soft: #9ed6e7;
  --accent: #3ef7dc;
  --accent-2: #00cfff;
  --accent-3: #ff6fd8;
  --bg-grad-a: rgba(0, 207, 255, 0.28);
  --bg-grad-b: rgba(255, 111, 216, 0.2);
  --bg-base-top: #080a17;
  --bg-base-mid: #0a0d1f;
  --bg-base-bot: #090b19;
  --glow-1: #00d0ff;
  --glow-2: #ff74dd;
  --item-odd: linear-gradient(145deg, #163b57, #1d2259);
  --item-even: linear-gradient(145deg, #2b1d66, #1a4a5d);
}

body[data-theme="obsidian"] {
  --panel: #1c1b1d;
  --panel-soft: #2a2628;
  --ink: #f5ece5;
  --ink-soft: #c6b5aa;
  --accent: #f97352;
  --accent-2: #c5aa91;
  --accent-3: #d8602f;
  --bg-grad-a: rgba(143, 75, 61, 0.24);
  --bg-grad-b: rgba(180, 150, 130, 0.12);
  --bg-base-top: #101011;
  --bg-base-mid: #0b0b0c;
  --bg-base-bot: #171415;
  --glow-1: #b05846;
  --glow-2: #685953;
  --item-odd: linear-gradient(145deg, #403233, #2c2329);
  --item-even: linear-gradient(145deg, #2e2320, #49312a);
}

body[data-theme="ember-forge"] {
  --panel: #2f1a12;
  --panel-soft: #3d2418;
  --ink: #ffe9d2;
  --ink-soft: #dbb997;
  --accent: #ffad5c;
  --accent-2: #ffcb84;
  --accent-3: #ff6d2e;
  --bg-grad-a: rgba(255, 112, 46, 0.27);
  --bg-grad-b: rgba(255, 206, 132, 0.16);
  --bg-base-top: #1a0f0b;
  --bg-base-mid: #130a07;
  --bg-base-bot: #26140f;
  --glow-1: #ff9a4a;
  --glow-2: #ff5f2f;
  --item-odd: linear-gradient(145deg, #5a2919, #3a1a13);
  --item-even: linear-gradient(145deg, #4b1e13, #633518);
}

body[data-theme="emerald-core"] {
  --panel: #12261f;
  --panel-soft: #193329;
  --ink: #e7fff3;
  --ink-soft: #a5d6bf;
  --accent: #5be3b1;
  --accent-2: #8ff4ce;
  --accent-3: #42b288;
  --bg-grad-a: rgba(91, 227, 177, 0.25);
  --bg-grad-b: rgba(71, 179, 146, 0.16);
  --bg-base-top: #08120e;
  --bg-base-mid: #091710;
  --bg-base-bot: #112118;
  --glow-1: #57d8ac;
  --glow-2: #2f8f70;
  --item-odd: linear-gradient(145deg, #1d4e3d, #15362c);
  --item-even: linear-gradient(145deg, #154235, #2a5840);
}

body[data-theme="arctic-grid"] {
  --panel: #122335;
  --panel-soft: #193047;
  --ink: #ebf7ff;
  --ink-soft: #b1ccde;
  --accent: #8dd8ff;
  --accent-2: #b9e9ff;
  --accent-3: #78a9d8;
  --bg-grad-a: rgba(141, 216, 255, 0.24);
  --bg-grad-b: rgba(112, 169, 216, 0.14);
  --bg-base-top: #08101a;
  --bg-base-mid: #0b1622;
  --bg-base-bot: #10202f;
  --glow-1: #8bd8ff;
  --glow-2: #6a93c5;
  --item-odd: linear-gradient(145deg, #1f466a, #1a314a);
  --item-even: linear-gradient(145deg, #1b3c58, #355171);
}

body[data-theme="sunset-drive"] {
  --panel: #3a1b2e;
  --panel-soft: #4e2540;
  --ink: #ffe8d8;
  --ink-soft: #d7a9a0;
  --accent: #ff8d7a;
  --accent-2: #ffbe87;
  --accent-3: #ff5ea3;
  --bg-grad-a: rgba(255, 94, 163, 0.2);
  --bg-grad-b: rgba(255, 190, 135, 0.2);
  --bg-base-top: #1b0c1b;
  --bg-base-mid: #2b1230;
  --bg-base-bot: #1c1022;
  --glow-1: #ff6fab;
  --glow-2: #ff9d5c;
  --item-odd: linear-gradient(145deg, #5a2444, #3a1c35);
  --item-even: linear-gradient(145deg, #4c2140, #613127);
}

body[data-theme="royal-violet"] {
  --panel: #251737;
  --panel-soft: #31204a;
  --ink: #f4eaff;
  --ink-soft: #c2a8d6;
  --accent: #b08dff;
  --accent-2: #d3b5ff;
  --accent-3: #7ee7ff;
  --bg-grad-a: rgba(176, 141, 255, 0.24);
  --bg-grad-b: rgba(126, 231, 255, 0.14);
  --bg-base-top: #100b1b;
  --bg-base-mid: #180f29;
  --bg-base-bot: #130d20;
  --glow-1: #ad8bff;
  --glow-2: #75dfff;
  --item-odd: linear-gradient(145deg, #3d2a66, #2b214a);
  --item-even: linear-gradient(145deg, #31265a, #2b4a66);
}

body[data-theme="retro-arcade"] {
  --panel: #1d1a2f;
  --panel-soft: #262242;
  --ink: #f5f1b9;
  --ink-soft: #c8c28a;
  --accent: #58f177;
  --accent-2: #f6df5c;
  --accent-3: #ff63b5;
  --bg-grad-a: rgba(88, 241, 119, 0.22);
  --bg-grad-b: rgba(255, 99, 181, 0.2);
  --bg-base-top: #0b0a17;
  --bg-base-mid: #111026;
  --bg-base-bot: #171430;
  --glow-1: #51ea73;
  --glow-2: #ff60b3;
  --item-odd: linear-gradient(145deg, #2d2a55, #203c41);
  --item-even: linear-gradient(145deg, #2f254d, #4d3f25);
}

body[data-theme="crystal-cathedral"] {
  --panel: #151933;
  --panel-soft: #23356a;
  --ink: #e8fbff;
  --ink-soft: #abd9f2;
  --accent: #9cf9ff;
  --accent-2: #9ad2ff;
  --accent-3: #cf9dff;
  --bg-grad-a: rgba(154, 210, 255, 0.32);
  --bg-grad-b: rgba(207, 157, 255, 0.24);
  --bg-base-top: #080b1e;
  --bg-base-mid: #101738;
  --bg-base-bot: #0a1230;
  --glow-1: #8de7ff;
  --glow-2: #ce9dff;
  --item-odd: linear-gradient(140deg, rgba(130, 220, 255, 0.2), rgba(120, 145, 255, 0.18));
  --item-even: linear-gradient(140deg, rgba(210, 135, 255, 0.22), rgba(135, 220, 255, 0.16));
}

body[data-theme="crystal-cathedral"]::before {
  background:
    conic-gradient(from 30deg, rgba(154, 210, 255, 0.22), rgba(207, 157, 255, 0.2), rgba(154, 210, 255, 0.22)),
    repeating-linear-gradient(120deg, rgba(255, 255, 255, 0.08) 0 1px, transparent 1px 18px);
  mix-blend-mode: screen;
}

body[data-theme="toxic-candy"] {
  --panel: #1f1223;
  --panel-soft: #35123a;
  --ink: #f8ffe2;
  --ink-soft: #c6d68f;
  --accent: #9cff00;
  --accent-2: #ff4db8;
  --accent-3: #6dff68;
  --bg-grad-a: rgba(156, 255, 0, 0.22);
  --bg-grad-b: rgba(255, 77, 184, 0.22);
  --bg-base-top: #16091a;
  --bg-base-mid: #250d2c;
  --bg-base-bot: #0f1310;
  --glow-1: #9eff00;
  --glow-2: #ff4db8;
  --item-odd: linear-gradient(150deg, #3e1546, #272a12);
  --item-even: linear-gradient(150deg, #28122f, #3f142a);
}

body[data-theme="lava-laser"] {
  --panel: #2b100f;
  --panel-soft: #471214;
  --ink: #ffe8d4;
  --ink-soft: #e2a67a;
  --accent: #ff3d00;
  --accent-2: #ffcc00;
  --accent-3: #ff4d7a;
  --bg-grad-a: rgba(255, 61, 0, 0.28);
  --bg-grad-b: rgba(255, 204, 0, 0.18);
  --bg-base-top: #1b0907;
  --bg-base-mid: #2a0a08;
  --bg-base-bot: #210f0a;
  --glow-1: #ff5a00;
  --glow-2: #ffcc00;
  --item-odd: linear-gradient(145deg, #521617, #2f0e0f);
  --item-even: linear-gradient(145deg, #3b0f11, #5a2c0b);
}

body[data-theme="biohazard-pop"] {
  --panel: #0f1f0e;
  --panel-soft: #1a3318;
  --ink: #f3ffe4;
  --ink-soft: #b8d38a;
  --accent: #d4ff00;
  --accent-2: #3cff7a;
  --accent-3: #f5ff6c;
  --bg-grad-a: rgba(212, 255, 0, 0.22);
  --bg-grad-b: rgba(60, 255, 122, 0.15);
  --bg-base-top: #080f07;
  --bg-base-mid: #101c0f;
  --bg-base-bot: #152713;
  --glow-1: #d4ff00;
  --glow-2: #54ff88;
  --item-odd: linear-gradient(145deg, #294423, #1b2d18);
  --item-even: linear-gradient(145deg, #1f381d, #3f5623);
}

body[data-theme="aurora-glitch"] {
  --panel: #11182e;
  --panel-soft: #1a2450;
  --ink: #eff9ff;
  --ink-soft: #a8c5ee;
  --accent: #4ef8ff;
  --accent-2: #7c8cff;
  --accent-3: #ff60d4;
  --bg-grad-a: rgba(78, 248, 255, 0.2);
  --bg-grad-b: rgba(255, 96, 212, 0.2);
  --bg-base-top: #090d1d;
  --bg-base-mid: #0d1230;
  --bg-base-bot: #150d2f;
  --glow-1: #4ef8ff;
  --glow-2: #ff60d4;
  --item-odd: linear-gradient(145deg, #1b2f63, #1f2051);
  --item-even: linear-gradient(145deg, #301b63, #1f3151);
}

body[data-theme="inferno-cyber"] {
  --panel: #24100f;
  --panel-soft: #3b1716;
  --ink: #ffe6dc;
  --ink-soft: #e0a996;
  --accent: #ff5740;
  --accent-2: #ff9e00;
  --accent-3: #ff00f0;
  --bg-grad-a: rgba(255, 87, 64, 0.24);
  --bg-grad-b: rgba(255, 0, 240, 0.2);
  --bg-base-top: #130707;
  --bg-base-mid: #250b0c;
  --bg-base-bot: #240a1a;
  --glow-1: #ff6d49;
  --glow-2: #ff00f0;
  --item-odd: linear-gradient(145deg, #4a1818, #2e1324);
  --item-even: linear-gradient(145deg, #2e1324, #5e2413);
}

body[data-theme="ocean-plasma"] {
  --panel: #0f2130;
  --panel-soft: #143649;
  --ink: #e5fbff;
  --ink-soft: #9fcedb;
  --accent: #00f5ff;
  --accent-2: #3c9dff;
  --accent-3: #2bffc0;
  --bg-grad-a: rgba(60, 157, 255, 0.2);
  --bg-grad-b: rgba(43, 255, 192, 0.2);
  --bg-base-top: #08141c;
  --bg-base-mid: #0b2330;
  --bg-base-bot: #0b1a2c;
  --glow-1: #3c9dff;
  --glow-2: #2bffc0;
  --item-odd: linear-gradient(145deg, #11405b, #10324d);
  --item-even: linear-gradient(145deg, #10324d, #114f43);
}

body[data-theme="monochrome-noise"] {
  --panel: #202020;
  --panel-soft: #2d2d2d;
  --ink: #f3f3f3;
  --ink-soft: #bdbdbd;
  --accent: #ffffff;
  --accent-2: #b0b0b0;
  --accent-3: #808080;
  --bg-grad-a: rgba(255, 255, 255, 0.08);
  --bg-grad-b: rgba(140, 140, 140, 0.12);
  --bg-base-top: #111;
  --bg-base-mid: #171717;
  --bg-base-bot: #0c0c0c;
  --glow-1: #9a9a9a;
  --glow-2: #5c5c5c;
  --item-odd: linear-gradient(145deg, #343434, #1f1f1f);
  --item-even: linear-gradient(145deg, #1f1f1f, #444);
}

body[data-theme="candy-chaos"] {
  --panel: #2f1230;
  --panel-soft: #4a1a48;
  --ink: #fff0ff;
  --ink-soft: #f0b7de;
  --accent: #ff4bc1;
  --accent-2: #6effff;
  --accent-3: #ffd84e;
  --bg-grad-a: rgba(255, 75, 193, 0.24);
  --bg-grad-b: rgba(110, 255, 255, 0.22);
  --bg-base-top: #180b1d;
  --bg-base-mid: #32103a;
  --bg-base-bot: #251032;
  --glow-1: #ff4bc1;
  --glow-2: #6effff;
  --item-odd: linear-gradient(145deg, #5a1a58, #2f1a5c);
  --item-even: linear-gradient(145deg, #2f1a5c, #5c3b1a);
}

body[data-theme="void-rainbow"] {
  --panel: #140d22;
  --panel-soft: #24143c;
  --ink: #f1ecff;
  --ink-soft: #b8abda;
  --accent: #ff3d81;
  --accent-2: #3de4ff;
  --accent-3: #8fff3d;
  --bg-grad-a: rgba(255, 61, 129, 0.2);
  --bg-grad-b: rgba(61, 228, 255, 0.2);
  --bg-base-top: #090613;
  --bg-base-mid: #120a21;
  --bg-base-bot: #150c2a;
  --glow-1: #ff3d81;
  --glow-2: #3de4ff;
  --item-odd: linear-gradient(145deg, #2c1456, #3a1540);
  --item-even: linear-gradient(145deg, #3a1540, #1b3656);
}

body[data-theme="custom"] {
  --panel: var(--custom-panel, #1f1a2f);
  --panel-soft: var(--custom-panel-soft, #2e2442);
  --ink: var(--custom-ink, #f6f0ff);
  --ink-soft: var(--custom-ink-soft, #ccbfe6);
  --accent: var(--custom-accent, #63f1ff);
  --accent-2: var(--custom-accent-2, #ffc46e);
  --accent-3: var(--custom-accent-3, #ff72d1);
  --bg-grad-a: var(--custom-fade-a, rgba(99, 241, 255, 0.2));
  --bg-grad-b: var(--custom-fade-b, rgba(255, 114, 209, 0.2));
  --bg-base-top: var(--custom-bg-top, #130f1e);
  --bg-base-mid: var(--custom-bg-mid, #171430);
  --bg-base-bot: var(--custom-bg-bot, #1c152b);
  --glow-1: var(--custom-accent, #63f1ff);
  --glow-2: var(--custom-accent-3, #ff72d1);
  --item-odd: linear-gradient(145deg, color-mix(in srgb, var(--custom-item-odd, #3550aa) 74%, #15131f), color-mix(in srgb, var(--custom-item-even, #7d2d85) 52%, #1b1531));
  --item-even: linear-gradient(145deg, color-mix(in srgb, var(--custom-item-even, #7d2d85) 72%, #15131f), color-mix(in srgb, var(--custom-item-odd, #3550aa) 48%, #1b1531));
}

body:is(
  [data-theme="steampunk2077"],
  [data-theme="chrome"],
  [data-theme="neon-circuit"],
  [data-theme="obsidian"],
  [data-theme="ember-forge"],
  [data-theme="emerald-core"],
  [data-theme="arctic-grid"],
  [data-theme="sunset-drive"],
  [data-theme="royal-violet"],
  [data-theme="retro-arcade"],
  [data-theme="crystal-cathedral"],
  [data-theme="toxic-candy"],
  [data-theme="lava-laser"],
  [data-theme="biohazard-pop"],
  [data-theme="aurora-glitch"],
  [data-theme="inferno-cyber"],
  [data-theme="ocean-plasma"],
  [data-theme="monochrome-noise"],
  [data-theme="candy-chaos"],
  [data-theme="void-rainbow"],
  [data-theme="custom"]
) .mission-item:nth-child(odd) {
  background: var(--item-odd);
}

body:is(
  [data-theme="steampunk2077"],
  [data-theme="chrome"],
  [data-theme="neon-circuit"],
  [data-theme="obsidian"],
  [data-theme="ember-forge"],
  [data-theme="emerald-core"],
  [data-theme="arctic-grid"],
  [data-theme="sunset-drive"],
  [data-theme="royal-violet"],
  [data-theme="retro-arcade"],
  [data-theme="crystal-cathedral"],
  [data-theme="toxic-candy"],
  [data-theme="lava-laser"],
  [data-theme="biohazard-pop"],
  [data-theme="aurora-glitch"],
  [data-theme="inferno-cyber"],
  [data-theme="ocean-plasma"],
  [data-theme="monochrome-noise"],
  [data-theme="candy-chaos"],
  [data-theme="void-rainbow"],
  [data-theme="custom"]
) .mission-item:nth-child(even) {
  background: var(--item-even);
}

body:is(
  [data-theme="steampunk2077"],
  [data-theme="chrome"],
  [data-theme="neon-circuit"],
  [data-theme="obsidian"],
  [data-theme="ember-forge"],
  [data-theme="emerald-core"],
  [data-theme="arctic-grid"],
  [data-theme="sunset-drive"],
  [data-theme="royal-violet"],
  [data-theme="retro-arcade"],
  [data-theme="crystal-cathedral"],
  [data-theme="toxic-candy"],
  [data-theme="lava-laser"],
  [data-theme="biohazard-pop"],
  [data-theme="aurora-glitch"],
  [data-theme="inferno-cyber"],
  [data-theme="ocean-plasma"],
  [data-theme="monochrome-noise"],
  [data-theme="candy-chaos"],
  [data-theme="void-rainbow"],
  [data-theme="custom"]
) .action-btn:nth-of-type(odd) {
  background: linear-gradient(140deg, var(--accent-2), var(--accent-3));
  color: #111;
}

body:is(
  [data-theme="steampunk2077"],
  [data-theme="chrome"],
  [data-theme="neon-circuit"],
  [data-theme="obsidian"],
  [data-theme="ember-forge"],
  [data-theme="emerald-core"],
  [data-theme="arctic-grid"],
  [data-theme="sunset-drive"],
  [data-theme="royal-violet"],
  [data-theme="retro-arcade"],
  [data-theme="crystal-cathedral"],
  [data-theme="toxic-candy"],
  [data-theme="lava-laser"],
  [data-theme="biohazard-pop"],
  [data-theme="aurora-glitch"],
  [data-theme="inferno-cyber"],
  [data-theme="ocean-plasma"],
  [data-theme="monochrome-noise"],
  [data-theme="candy-chaos"],
  [data-theme="void-rainbow"],
  [data-theme="custom"]
) .action-btn:nth-of-type(even) {
  background: linear-gradient(140deg, var(--accent), var(--panel-soft));
  color: #111;
}

.custom-theme-overlay {
  position: fixed;
  inset: 0;
  z-index: 44;
  padding: 0.5rem;
  background: rgba(4, 8, 16, 0.76);
}

.custom-theme-overlay.hidden {
  display: none;
}

.custom-theme-card {
  max-width: 820px;
  margin: 0 auto;
  height: 100%;
  overflow: auto;
  border-radius: 14px;
  border: 1px solid var(--accent-2);
  background: linear-gradient(160deg, var(--panel-soft), var(--panel));
  box-shadow: var(--shadow);
  padding: 0.7rem;
  display: grid;
  gap: 0.5rem;
}

.custom-theme-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 0.4rem 0.55rem;
}

.custom-theme-grid label {
  display: grid;
  gap: 0.15rem;
  margin: 0;
  font-size: 0.8rem;
  color: var(--ink-soft);
}

.custom-theme-grid input[type="color"] {
  width: 100%;
  height: 2.2rem;
  border: 1px solid var(--accent-2);
  border-radius: 8px;
  background: var(--panel);
  padding: 0.15rem;
}

.custom-theme-preview {
  border: 1px solid var(--accent-2);
  border-radius: 10px;
  padding: 0.5rem;
  display: grid;
  gap: 0.42rem;
}

.custom-theme-preview-buttons {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 0.4rem;
}

.hero,
main,
footer {
  position: relative;
  z-index: 1;
}

.hero {
  padding: 1rem 1rem 0.4rem;
}

.hero-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 0.7rem;
}

.hero-top-tools {
  display: grid;
  gap: 0.25rem;
  justify-items: end;
  margin-top: 0.2rem;
}

.hero-top-tools label {
  margin: 0;
  font-size: 0.78rem;
  color: var(--ink-soft);
}

.hero-top-tools #themeSelect {
  width: min(230px, 70vw);
}

.hero-badge {
  display: inline-block;
  background: linear-gradient(90deg, var(--accent), #6ef7cf);
  color: #06211d;
  font-weight: 800;
  font-size: 0.8rem;
  padding: 0.35rem 0.75rem;
  border-radius: 999px;
  margin-bottom: 0.55rem;
}

h1,
h2,
h3 {
  font-family: "Aldrich", sans-serif;
  margin: 0;
  line-height: 1.08;
  letter-spacing: 0.5px;
}

h1 {
  font-size: clamp(1.9rem, 3vw + 1rem, 3.1rem);
  letter-spacing: 0.5px;
}

.hero p {
  margin: 0.4rem 0 0.8rem;
  color: var(--ink-soft);
  max-width: 760px;
}

.hero-stats {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 0.55rem;
}

.stat-card {
  background: linear-gradient(160deg, var(--panel-soft), var(--panel));
  border: 1px solid var(--accent-2);
  border-radius: 12px;
  padding: 0.55rem;
  box-shadow: var(--shadow);
  min-height: 78px;
  text-align: left;
}

.stat-card .label {
  display: block;
  font-size: 0.74rem;
  color: var(--ink-soft);
}

.stat-card .value {
  display: block;
  font-size: 1.05rem;
  font-weight: 800;
}

.stat-icon {
  display: inline-block;
  font-size: 0.95rem;
  margin-top: 0.1rem;
}

.stat-card-xp .value {
  margin-top: 0.1rem;
}

.xp-track {
  margin-top: 0.3rem;
  height: 6px;
  border-radius: 999px;
  background: rgba(62, 247, 255, 0.2);
  overflow: hidden;
}

.xp-fill {
  width: 0;
  height: 100%;
  border-radius: 999px;
  background: #3ef7ff;
  transition: width 260ms ease;
}

.stat-card-crown {
  width: 100%;
  appearance: none;
  cursor: pointer;
  color: inherit;
  font: inherit;
}

.crown-icon {
  font-size: 1.15rem;
  line-height: 1;
}

main {
  padding: 0.9rem;
  max-width: 960px;
  margin: 0 auto;
}

.tab-nav {
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: 0.4rem;
  margin-bottom: 0.8rem;
}

.tab-btn {
  border: 0;
  border-radius: 14px;
  padding: 0.7rem 0.35rem;
  min-height: 54px;
  font-weight: 700;
  font-size: 0.86rem;
  line-height: 1.1;
  text-align: center;
  white-space: normal;
  background: linear-gradient(160deg, var(--panel-soft), var(--panel));
  color: var(--ink);
  border: 1px solid var(--accent-2);
}

.tab-btn span {
  display: inline-block;
}

.tab-btn.active {
  background: linear-gradient(90deg, var(--accent-2), var(--accent-3));
  color: #111;
}

.tab-btn:disabled {
  opacity: 1;
  background: var(--panel);
  color: var(--ink-soft);
  filter: grayscale(0.35);
  box-shadow: inset 0 0 0 1px var(--accent-2);
  cursor: not-allowed;
}

.panel {
  display: none;
  background: linear-gradient(160deg, var(--panel-soft), var(--panel));
  border: 1px solid var(--accent-2);
  border-radius: var(--radius);
  padding: 0.95rem;
  box-shadow: var(--shadow);
  min-height: var(--panel-min-height);
}

.panel.active {
  display: block;
  animation: lift 280ms ease;
}

body.reader-mode .hero,
body.reader-mode .tab-nav,
body.reader-mode footer {
  display: none;
}

body.reader-mode main {
  padding-top: 0.55rem;
}

body.reader-mode #reader.panel.active {
  min-height: calc(100vh - 1.1rem);
}

@keyframes lift {
  from {
    transform: translateY(8px);
    opacity: 0;
  }
  to {
    transform: translateY(0);
    opacity: 1;
  }
}

.section-copy {
  margin: 0.2rem 0 0.85rem;
  color: var(--ink-soft);
}

.mission-list {
  list-style: none;
  padding: 0;
  margin: 0;
  display: grid;
  gap: 0.5rem;
}

.mission-item {
  background: var(--panel-soft);
  border-radius: 12px;
  padding: 0.75rem;
  border: 1px solid var(--accent-2);
  display: grid;
  gap: 0.45rem;
}

.mission-main {
  display: flex;
  justify-content: space-between;
  gap: 0.6rem;
  align-items: center;
}

.mission-meta {
  color: var(--ink-soft);
  font-size: 0.85rem;
}

.plan-actions {
  display: grid;
  gap: 0.45rem;
}

.mission-item.locked {
  opacity: 0.72;
}

.action-btn[disabled] {
  opacity: 0.55;
  cursor: not-allowed;
}

.action-btn.done {
  background: linear-gradient(90deg, var(--accent), var(--accent-2));
  color: #111;
}

.hidden {
  display: none;
}

.workspace-actions {
  display: grid;
  gap: 0.45rem;
  margin: 0.55rem 0 0.7rem;
}

.reading-workspace {
  margin-top: 0.7rem;
}

.plan-detail {
  background: var(--panel);
  border: 1px solid var(--accent-2);
  border-radius: 10px;
  padding: 0.55rem;
  display: grid;
  gap: 0.35rem;
}

.section-title {
  color: var(--ink);
}

.section-reference {
  color: var(--accent-2);
}

.section-summary {
  color: var(--ink-soft);
}

.section-actions {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 0.35rem;
}

.tracker-panel {
  display: grid;
  gap: 0.6rem;
}

.tracker-controls {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 0.45rem;
}

.tracker-field {
  display: grid;
  gap: 0.2rem;
}

.tracker-field span {
  font-size: 0.78rem;
  color: var(--ink-soft);
}

.tracker-field select {
  min-height: 36px;
  border-radius: 10px;
  border: 1px solid var(--accent-2);
  background: var(--panel);
  color: var(--ink);
  font: inherit;
  padding: 0.25rem 0.45rem;
}

.tracker-dash {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 0.45rem;
}

.tracker-dash-item {
  border: 1px solid var(--accent-2);
  border-radius: 10px;
  background: var(--panel);
  padding: 0.45rem 0.55rem;
  display: grid;
  gap: 0.2rem;
}

.tracker-dash-item span {
  font-size: 0.78rem;
  color: var(--ink-soft);
}

.tracker-book-list {
  display: grid;
  gap: 0.55rem;
}

.tracker-book-card {
  border: 1px solid var(--accent-2);
  border-radius: 12px;
  background: var(--panel-soft);
  padding: 0.6rem;
  display: grid;
  gap: 0.5rem;
}

.tracker-book-card header {
  display: grid;
  gap: 0.15rem;
}

.tracker-book-card header h3 {
  margin: 0;
  font-size: 1rem;
}

.tracker-book-card header span {
  color: var(--ink-soft);
  font-size: 0.8rem;
}

.tracker-chapter-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(40px, 1fr));
  gap: 0.35rem;
}

.tracker-chapter-btn {
  min-height: 42px;
  border-radius: 10px;
  border: 1px solid var(--accent-2);
  background: var(--panel);
  color: var(--ink);
  font: inherit;
  font-size: 0.9rem;
  font-weight: 800;
}

.tracker-chapter-not {
  background: var(--panel);
}

.tracker-chapter-start {
  background: color-mix(in srgb, var(--accent) 22%, var(--panel) 78%);
}

.tracker-chapter-half {
  background: color-mix(in srgb, var(--accent-2) 36%, var(--panel) 64%);
  color: #111;
}

.tracker-chapter-complete {
  background: linear-gradient(90deg, var(--accent-2), var(--accent-3));
  color: #111;
}

.section-status {
  font-weight: 800;
}

.reader-controls {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 0.45rem;
  margin-bottom: 0.35rem;
}

.reader-topline {
  display: flex;
  justify-content: space-between;
  gap: 0.5rem;
  align-items: center;
  margin-bottom: 0.45rem;
}

.reader-back-btn {
  min-height: 38px;
  padding: 0.45rem 0.65rem;
  font-size: 0.82rem;
}

.reader-xp-card {
  border: 1px solid var(--accent-2);
  border-radius: 9px;
  padding: 0.26rem 0.44rem;
  background: linear-gradient(160deg, var(--panel-soft), var(--panel));
  width: 116px;
  max-width: 40vw;
  margin-left: auto;
}

.reader-xp-card span {
  display: block;
  font-size: 0.72rem;
  font-weight: 800;
}

.reader-xp-track {
  margin-top: 0.22rem;
  height: 5px;
  border-radius: 999px;
  background: rgba(62, 247, 255, 0.2);
  overflow: hidden;
}

.reader-xp-fill {
  width: 0;
  height: 100%;
  border-radius: 999px;
  background: #3ef7ff;
  transition: width 220ms ease;
}

.reader-font-row {
  display: grid;
  grid-template-columns: auto 1fr auto;
  gap: 0.45rem;
  align-items: center;
  margin-bottom: 0.45rem;
}

.reader-font-row label,
.reader-font-row span {
  font-size: 0.8rem;
  color: var(--ink-soft);
}

.reader-font-row input[type="range"] {
  width: 100%;
}

.reader-sticky {
  position: sticky;
  top: 0;
  z-index: 4;
  background: linear-gradient(160deg, var(--panel-soft), var(--panel));
  padding-bottom: 0.45rem;
  margin-bottom: 0.45rem;
}

.reader-field {
  display: grid;
  gap: 0.2rem;
  margin: 0;
}

.reader-field span {
  font-size: 0.8rem;
  color: var(--ink-soft);
}

.reader-book-title {
  margin: 0.3rem 0 0.55rem;
  color: var(--accent-2);
  font-size: clamp(1.2rem, 2.2vw + 0.7rem, 1.7rem);
  line-height: 1.1;
}

.reader-text {
  background: var(--panel);
  border: 1px solid var(--accent-2);
  border-radius: 10px;
  padding: 0.75rem;
  margin: 0.35rem 0 0.7rem;
  min-height: 180px;
  max-height: none;
  overflow: visible;
  white-space: normal;
  font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", monospace;
  font-size: 0.95rem;
  line-height: 1.45;
}

#reader .reader-text {
  min-height: 52vh;
}

.verse-line {
  display: block;
  width: 100%;
  text-align: left;
  border: 0;
  background: transparent;
  color: var(--ink);
  font: inherit;
  line-height: inherit;
  padding: 0.2rem 0.1rem;
  border-radius: 6px;
  transition: filter 0.18s ease, opacity 0.18s ease, background-color 0.18s ease, color 0.18s ease;
}

.verse-line.locked {
  cursor: not-allowed;
  opacity: 0.58;
}

.verse-line:focus {
  outline: none;
}

.verse-line:focus-visible {
  box-shadow: inset 0 0 0 1px var(--accent-2);
}

.verse-line:disabled {
  pointer-events: none;
}

.verse-line.active {
  background: var(--accent-2);
  color: #111;
  filter: none;
  opacity: 1;
}

.reader-bottom-controls {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 0.45rem;
  margin-top: 0.35rem;
}

.reader-bottom-controls .action-btn {
  min-height: 44px;
  font-size: 0.86rem;
  padding: 0.55rem 0.6rem;
}

.read-to-me-toggle {
  border: 1px solid var(--accent-2);
  border-radius: 10px;
  min-height: 44px;
  padding: 0.38rem 0.5rem;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.5rem;
  background: linear-gradient(160deg, var(--panel-soft), var(--panel));
  font-weight: 700;
  color: var(--ink);
}

.read-to-me-toggle span {
  font-size: 0.82rem;
}

.read-to-me-toggle input {
  accent-color: var(--accent);
}

.reader-voice-controls {
  margin-top: 0.35rem;
  display: grid;
  gap: 0.45rem;
  grid-template-columns: repeat(2, minmax(0, 1fr));
}

.plan-status {
  display: inline-block;
  padding: 0.2rem 0.5rem;
  border-radius: 999px;
  font-weight: 800;
  font-size: 0.75rem;
  margin-right: 0.35rem;
}

.plan-status.not-ready {
  background: rgba(210, 225, 255, 0.18);
  color: #d8e5ff;
}

.plan-status.partial {
  background: rgba(255, 202, 58, 0.22);
  color: #ffe08a;
}

.plan-status.ready {
  background: rgba(86, 227, 159, 0.2);
  color: #8df4be;
}

.plan-status.reading-not-started {
  background: rgba(210, 225, 255, 0.18);
  color: #d8e5ff;
}

.plan-status.reading-started {
  background: rgba(255, 202, 58, 0.22);
  color: #ffe08a;
}

.plan-status.reading-complete {
  background: rgba(86, 227, 159, 0.2);
  color: #8df4be;
}

.plan-status.locked {
  background: rgba(255, 107, 138, 0.22);
  color: #ffc0cf;
}

.status-row {
  display: flex;
  flex-wrap: wrap;
  gap: 0.35rem;
}

.complete-btn,
.action-btn {
  border: 1px solid var(--accent-2);
  border-radius: 10px;
  padding: 0.75rem 0.9rem;
  min-height: 48px;
  font-weight: 800;
  font-size: 0.95rem;
  line-height: 1.1;
  background: linear-gradient(160deg, var(--panel-soft), var(--panel));
  color: var(--ink);
}

.dev-tools {
  margin-top: 0.5rem;
  display: grid;
  gap: 0.45rem;
  grid-template-columns: minmax(0, 1fr);
}

.game-launch {
  margin-top: 0.55rem;
  display: grid;
  gap: 0.45rem;
  grid-template-columns: repeat(2, minmax(0, 1fr));
}

.game-launch-extra {
  margin-top: 0.42rem;
}

.footer-btn {
  min-height: 38px;
  padding: 0.48rem 0.62rem;
  font-size: 0.82rem;
}

.dev-only {
  background: #394255;
  color: #d6dded;
  font-size: 0.82rem;
  min-height: 44px;
  padding: 0.6rem 0.8rem;
}

.dove-game {
  position: fixed;
  inset: 0;
  z-index: 40;
  background:
    radial-gradient(circle at 15% 10%, var(--bg-grad-a), transparent 35%),
    radial-gradient(circle at 85% 90%, var(--bg-grad-b), transparent 40%),
    linear-gradient(175deg, #0a1524 0%, #0d2340 60%, #183d57 100%);
  padding: 0.7rem;
  display: grid;
  gap: 0.5rem;
  grid-template-rows: auto auto 1fr auto;
  user-select: none;
  -webkit-user-select: none;
  -webkit-touch-callout: none;
}

.dove-game * {
  user-select: none;
  -webkit-user-select: none;
  -webkit-touch-callout: none;
}

.dove-game.hidden {
  display: none;
}

.dove-game-topbar {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 0.55rem;
}

.dove-game-topbar h2 {
  margin: 0;
}

.dove-game-actions {
  display: flex;
  gap: 0.45rem;
}

.dove-canvas {
  width: 100%;
  height: 100%;
  min-height: 62vh;
  border-radius: 14px;
  border: 1px solid var(--accent-2);
  background: linear-gradient(180deg, #9fd2f8 0%, #d8eefd 55%, #81b5d9 100%);
  box-shadow: var(--shadow);
  touch-action: none;
}

#lightGameOverlay {
  grid-template-rows: auto auto minmax(0, 1fr) auto;
}

#lightGameOverlay .dove-canvas {
  height: 100%;
  min-height: 62vh;
  max-height: none;
}

body.game-mode {
  overflow: hidden;
}

.world3d {
  position: fixed;
  inset: 0;
  z-index: 41;
  background:
    radial-gradient(circle at 12% 8%, var(--bg-grad-a), transparent 34%),
    radial-gradient(circle at 88% 90%, var(--bg-grad-b), transparent 40%),
    linear-gradient(180deg, #111321 0%, #0f1728 100%);
  padding: 0.7rem;
  display: grid;
  gap: 0.5rem;
  grid-template-rows: auto auto 1fr;
  user-select: none;
  -webkit-user-select: none;
  -webkit-touch-callout: none;
}

.world3d * {
  user-select: none;
  -webkit-user-select: none;
  -webkit-touch-callout: none;
}

.world3d.hidden {
  display: none;
}

.world3d-canvas-wrap {
  border: 1px solid var(--accent-2);
  border-radius: 12px;
  overflow: hidden;
  min-height: 65vh;
  box-shadow: var(--shadow);
  background: #0f1524;
  touch-action: none;
}

.world3d-canvas-wrap canvas {
  display: block;
  width: 100%;
  height: 100%;
}

.david-game {
  position: fixed;
  inset: 0;
  z-index: 42;
  background:
    radial-gradient(circle at 15% 8%, var(--bg-grad-a), transparent 35%),
    radial-gradient(circle at 85% 92%, var(--bg-grad-b), transparent 40%),
    linear-gradient(180deg, #1a1e2f 0%, #161d31 100%);
  padding: 0.35rem;
  display: grid;
  gap: 0.25rem;
  grid-template-rows: auto auto minmax(0, 1fr) auto;
  height: 100dvh;
  user-select: none;
  -webkit-user-select: none;
  -webkit-touch-callout: none;
  overflow: hidden;
}

.david-game * {
  user-select: none;
  -webkit-user-select: none;
  -webkit-touch-callout: none;
}

.david-game.hidden {
  display: none;
}

.david-canvas {
  width: 100%;
  height: 100%;
  min-height: 62vh;
  max-height: none;
  border-radius: 14px;
  border: 1px solid var(--accent-2);
  background: linear-gradient(180deg, #95c9ff 0%, #d6e9ff 60%, #c49a61 100%);
  box-shadow: var(--shadow);
  touch-action: none;
}

.david-playfield {
  position: relative;
  min-height: 0;
  height: 100%;
}

.david-power-controls {
  position: absolute;
  top: 0.45rem;
  right: 0.45rem;
  z-index: 3;
  width: min(32vw, 138px);
  display: grid;
  gap: 0.12rem;
  padding: 0.32rem 0.4rem;
  border-radius: 10px;
  background: color-mix(in srgb, var(--panel) 78%, transparent);
  border: 1px solid color-mix(in srgb, var(--accent-2) 70%, transparent);
}

.david-power-controls label {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin: 0;
  font-size: 0.72rem;
  color: var(--ink-soft);
}

.david-power-controls input[type="range"] {
  width: 100%;
  height: 18px;
  padding: 0;
  accent-color: var(--accent);
}

@media (max-width: 768px) {
  .dove-game,
  .david-game {
    min-height: 100dvh;
    height: 100dvh;
    padding-bottom: calc(0.7rem + env(safe-area-inset-bottom));
  }

}

@media (max-width: 480px) {
  .david-game .dove-game-topbar h2 {
    font-size: 1.1rem;
  }

  .david-game .dove-game-actions .action-btn {
    min-height: 40px;
    padding: 0.5rem 0.55rem;
    font-size: 0.8rem;
  }

  .david-power-controls {
    width: min(38vw, 130px);
    top: 0.35rem;
    right: 0.35rem;
    padding: 0.28rem 0.34rem;
  }

  .david-power-controls label {
    font-size: 0.68rem;
  }

  .david-help {
    display: none;
  }
}

.action-btn.done {
  background: linear-gradient(140deg, #285148, #193730);
  color: #c3f3de;
}

.complete-btn.done {
  background: var(--good);
  color: #073726;
}

.memory-controls {
  margin-bottom: 0.6rem;
}

label {
  display: block;
  font-size: 0.9rem;
  margin-bottom: 0.25rem;
}

select,
input[type="number"],
textarea {
  width: 100%;
  border-radius: 10px;
  border: 1px solid var(--accent-2);
  background: var(--panel);
  color: var(--ink);
  padding: 0.55rem;
  font-family: inherit;
}

#readChapterInput:disabled {
  opacity: 1;
  color: var(--ink);
}

#readChapterInput,
#readVerseInput {
  padding: 0.38rem 0.5rem;
  min-height: 38px;
  font-size: 0.92rem;
}

#verseSelect {
  min-height: 52px;
  padding: 0.75rem 0.8rem;
  font-size: 1rem;
  font-weight: 700;
}

.memory-card {
  background: var(--panel);
  border-radius: 12px;
  padding: 0.8rem;
}

.verse-reference {
  margin: 0;
  color: var(--accent-2);
  font-weight: 800;
}

.verse-text {
  margin: 0.45rem 0 0.8rem;
  font-size: 1.1rem;
  line-height: 1.5;
  font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", monospace;
}

.memory-actions {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 0.45rem;
}

.memory-actions .strong,
#witnessForm .strong {
  background: linear-gradient(90deg, #4ecdd5, #8ee8ef);
  color: #062b2f;
}

.hint-row {
  margin-top: 0.72rem;
  display: flex;
  gap: 0.65rem;
  align-items: center;
  color: var(--ink-soft);
  font-size: 0.9rem;
}

input[type="range"] {
  flex: 1;
}

.witness-grid {
  display: grid;
  gap: 0.65rem;
}

.mini-card {
  background: var(--panel);
  border-radius: 12px;
  padding: 0.75rem;
  border: 1px solid var(--accent-2);
}

.referral-card {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: 0.6rem;
  align-items: center;
  margin-bottom: 0.6rem;
}

.referral-qr {
  width: 120px;
  height: 120px;
  border-radius: 10px;
  background: #fff;
  padding: 6px;
}

.small-list {
  margin: 0.4rem 0 0;
  padding-left: 1rem;
  display: grid;
  gap: 0.28rem;
}

#witnessForm label {
  margin-top: 0.2rem;
}

#witnessForm button {
  margin-top: 0.45rem;
}

.compact .mission-item {
  grid-template-columns: 1fr auto;
  align-items: center;
}

.reward-track {
  display: grid;
  gap: 0.45rem;
}

.reward-item {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 0.5rem;
  padding: 0.65rem;
  border-radius: 10px;
  background: var(--panel);
  border: 1px solid var(--accent-2);
}

.reward-item.unlocked {
  background: linear-gradient(140deg, #1a6b56, #13473c);
  border-color: rgba(120, 255, 196, 0.6);
}

body.crown-bronze {
  --accent-2: #d5965f;
}

body.crown-silver {
  --accent-2: #cfd6f0;
}

body.crown-gold {
  --accent-2: #ffd866;
}

body.crown-sapphire {
  --accent-2: #7ab6ff;
}

.prize-note {
  margin-top: 0.7rem;
}

footer {
  text-align: center;
  color: var(--ink-soft);
  font-size: 0.84rem;
  padding: 0.9rem;
}

@media (max-width: 480px) {
  .hero {
    padding: 0.45rem 0.75rem 0.2rem;
  }

  h1 {
    font-size: clamp(1.4rem, 4vw + 0.7rem, 1.9rem);
  }

  .hero p {
    display: none;
  }

  .hero-head {
    align-items: center;
  }

  .hero-top-tools #themeSelect {
    width: min(170px, 54vw);
  }

  .hero-stats {
    gap: 0.35rem;
  }

  .stat-card {
    padding: 0.4rem;
  }

  .stat-card .label {
    font-size: 0.68rem;
  }

  .stat-card .value {
    font-size: 0.92rem;
  }

  main {
    padding: 0.6rem;
  }

  .tab-nav {
    gap: 0.33rem;
    margin-bottom: 0.55rem;
  }

  .tab-btn {
    min-height: 56px;
    padding: 0.72rem 0.25rem;
    font-size: 0.8rem;
  }

  .tracker-dash {
    grid-template-columns: minmax(0, 1fr);
  }

  .reader-bottom-controls {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .reader-voice-controls {
    grid-template-columns: minmax(0, 1fr);
  }

  .custom-theme-grid {
    grid-template-columns: minmax(0, 1fr);
  }
}

@media (min-width: 700px) {
  :root {
    --panel-min-height: 56vh;
  }

  .hero {
    padding: 1.2rem 1.4rem 0.6rem;
  }

  main {
    padding: 1rem 1.4rem 1.4rem;
  }

  .tab-nav {
    grid-template-columns: repeat(5, minmax(0, 1fr));
  }

  .tab-btn {
    border-radius: 999px;
    padding: 0.75rem 1.05rem;
    font-size: 0.95rem;
    white-space: nowrap;
  }

  .witness-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .memory-actions {
    grid-template-columns: repeat(4, minmax(0, 1fr));
  }

  .plan-actions {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .workspace-actions {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .reader-controls {
    max-width: 440px;
  }
}