/* ============================================================
   Yomikit themes — palette + layout per body.vN.
   Cycled by the theme nav in the title bar (see app.js THEMES).
   Default is V3 Synthwave.
   ============================================================ */

/* V1 — City-Pop · Split */
body.v1 {
  --bg:#14071f; --bg2:#1e0a33; --panel:#1c0b2e; --field:#0e0518;
  --text:#ead9ff; --head:#ff4d9e; --muted:#9a7bc8; --faint:#5a3f7a;
  --hot:#ff4d9e; --cool:#2de2e6;
  --line:rgba(255,77,158,0.26); --glow:rgba(255,77,158,0.45);
  --maxw:1040px;
  --inputH:280px; --inputF:1.05rem; --furiH:280px; --furiF:1.5rem;
}
body.v1 .panes { flex-direction: row; }

/* V2 — Amber CRT · Stack */
body.v2 {
  --bg:#0c0a05; --bg2:#15110a; --panel:#100d07; --field:#080703;
  --text:#f5b73c; --head:#ffd24a; --muted:#b3812e; --faint:#6b4d12;
  --hot:#ffd24a; --cool:#b3812e;
  --line:rgba(255,176,0,0.22); --glow:rgba(255,176,0,0.5);
  --maxw:1120px;
  --inputH:170px; --inputF:1.4rem; --furiH:420px; --furiF:1.9rem;
}

/* V3 — Synthwave · Reading-focused (DEFAULT). Header borrows City-Pop neon. */
body.v3 {
  --bg:#1a0820; --bg2:#2a0a2e; --panel:#210a28; --field:#120414;
  --text:#ffe0f0; --head:#ff6ec7; --muted:#c98bd9; --faint:#6e3a6e;
  --hot:#ff8e3c; --cool:#4d9fff;
  --line:rgba(255,110,199,0.26); --glow:rgba(255,110,199,0.5);
  --maxw:1120px;
  --inputH:110px; --inputF:1.25rem; --furiH:540px; --furiF:3rem;
}
body.v3 .titlebar h1 {
  color: #ff4d9e;
  text-shadow: 0 0 10px rgba(255,77,158,0.65), 0 0 30px rgba(255,77,158,0.5);
}
body.v3 .titlebar h1 .jp { color: #2de2e6; }
body.v3 .led.on { background: #ff4d9e; box-shadow: 0 0 12px rgba(255,77,158,0.7); }

/* V4 — Steins;Gate Lab · Wide split */
body.v4 {
  --bg:#0e120d; --bg2:#141a12; --panel:#11160f; --field:#090c08;
  --text:#c7d4bd; --head:#d8b15a; --muted:#7e8c6e; --faint:#4a5340;
  --hot:#d8b15a; --cool:#8fae6b;
  --line:rgba(143,174,107,0.22); --glow:rgba(216,177,90,0.4);
  --maxw:1280px;
  --inputH:300px; --inputF:1.1rem; --furiH:300px; --furiF:1.55rem;
}
body.v4 .panes { flex-direction: row; }

/* V5 — Green Phosphor · Stack */
body.v5 {
  --bg:#030a04; --bg2:#061206; --panel:#050d05; --field:#020602;
  --text:#33ff66; --head:#8aff9f; --muted:#1f9c3f; --faint:#0e5520;
  --hot:#8aff9f; --cool:#1f9c3f;
  --line:rgba(51,255,102,0.22); --glow:rgba(51,255,102,0.45);
  --maxw:1120px;
  --inputH:170px; --inputF:1.4rem; --furiH:420px; --furiF:1.9rem;
}

@media (max-width: 760px) {
  body.v1 .panes, body.v4 .panes { flex-direction: column; }
}