/* Melo Voice — five designs. Steppe is the default (style.css / editor.css); the other four live here and are
   switched with <html data-theme="...">. :root[data-theme] has the same weight as :root.ed-page and comes later, so it wins. */

/* ---------------------------------------------------------------- 2. Ақ — light, airy, Apple-like */
:root[data-theme="light"] {
  --night: #f6f7f9; --night-2: #ffffff; --night-3: #eef1f5; --line: #dfe3ea;
  --paper: #1d2433; --mist: #6b7585; --sun: #e2603f; --sky: #2f7ae5; --alert: #d9483b;
  --grad: linear-gradient(135deg, #ff8a5c, #e2603f); --on-grad: #ffffff; --btn-shadow: 0 6px 18px rgba(226, 96, 63, .25);
  --glow: 0 0 0 1px rgba(226, 96, 63, .35), 0 10px 26px rgba(29, 36, 51, .10);
  --surface: #ffffff; --surface-flat: #fbfcfd; --bar: #ffffff; --glass: rgba(255, 255, 255, .95); --glass-soft: rgba(255, 255, 255, .7);
  --tile: #ffffff; --tile-hover: #ffffff; --seg-bg: #eef1f5; --seg-on: #ffffff;
  --accent-soft: rgba(226, 96, 63, .10); --accent-line: rgba(226, 96, 63, .45);
  --title-grad: linear-gradient(180deg, #1d2433, #3a4456);
  --hero-light: radial-gradient(45% 60% at 72% 45%, rgba(47, 122, 229, .10), transparent 70%), radial-gradient(35% 50% at 88% 70%, rgba(226, 96, 63, .10), transparent 70%);
  --ornament: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='48' height='16' viewBox='0 0 48 16'%3E%3Cg fill='none' stroke='%238a96a8' stroke-width='1.1' stroke-linecap='round'%3E%3Cpath d='M24 15C24 7 18 3.5 14 5.5C10 7.5 11 12.5 15 11.5C18 10.7 17 7.6 15 7.6'/%3E%3Cpath d='M24 15C24 7 30 3.5 34 5.5C38 7.5 37 12.5 33 11.5C30 10.7 31 7.6 33 7.6'/%3E%3Cpath d='M0 15H8M40 15H48'/%3E%3C/g%3E%3C/svg%3E"); --orn-opacity: .25;
  --ed-grid: rgba(29, 36, 51, .06); --ed-wave: rgba(47, 122, 229, .10);
  --dev-mid: #e0a43a; --dev-off: #d9483b;
  --radius-m: 14px; --radius-l: 22px;
  color-scheme: light;
}
:root[data-theme="light"] .tile, :root[data-theme="light"] .pack, :root[data-theme="light"] .panel,
:root[data-theme="light"] .job, :root[data-theme="light"] .drop, :root[data-theme="light"] .meter { box-shadow: 0 1px 2px rgba(29,36,51,.05), 0 6px 18px rgba(29,36,51,.06); }
:root[data-theme="light"] .btn:not(.primary), :root[data-theme="light"] .ghost { background: #ffffff; }

/* ---------------------------------------------------------------- 3. Неон — synthwave night */
:root[data-theme="neon"] {
  --night: #0b0716; --night-2: #120b22; --night-3: #1b1233; --line: #2a1f45;
  --paper: #f2ecff; --mist: #9b8fc0; --sun: #ff4fd8; --sky: #2ef2ff; --alert: #ff5c7a;
  --grad: linear-gradient(135deg, #ff4fd8 0%, #8b5cf6 55%, #2ef2ff 100%); --on-grad: #ffffff;
  --btn-shadow: 0 0 22px rgba(255, 79, 216, .45);
  --glow: 0 0 0 1px rgba(255, 79, 216, .6), 0 0 28px rgba(255, 79, 216, .35);
  --surface: linear-gradient(180deg, #170e2b, #110a20); --surface-flat: #0e0819; --bar: linear-gradient(180deg, #160d2a, #0b0716);
  --glass: rgba(18, 11, 34, .94); --glass-soft: rgba(18, 11, 34, .6);
  --tile: linear-gradient(160deg, rgba(255,79,216,.08), rgba(46,242,255,.05)); --tile-hover: linear-gradient(160deg, rgba(255,79,216,.16), rgba(46,242,255,.10));
  --seg-bg: #0b0716; --seg-on: linear-gradient(135deg, rgba(255,79,216,.25), rgba(46,242,255,.18));
  --accent-soft: rgba(255, 79, 216, .18); --accent-line: rgba(255, 79, 216, .6);
  --title-grad: linear-gradient(90deg, #ff9ff0, #b8a4ff 50%, #9be9ff);
  --hero-light: radial-gradient(40% 60% at 70% 40%, rgba(255,79,216,.25), transparent 70%), radial-gradient(40% 60% at 90% 75%, rgba(46,242,255,.18), transparent 70%);
  --orn-opacity: 0;
  --ed-grid: rgba(155, 143, 192, .08); --ed-wave: rgba(46, 242, 255, .12);
  --dev-mid: #ffb86b; --dev-off: #ff5c7a;
  --radius-m: 16px; --radius-l: 22px;
}
:root[data-theme="neon"] .site .top::before, :root[data-theme="neon"] .ed-top::before { height: 2px; background: linear-gradient(90deg, #ff4fd8, #8b5cf6, #2ef2ff); box-shadow: 0 0 12px rgba(255,79,216,.6); }
:root[data-theme="neon"] .brand { color: #ff4fd8; filter: drop-shadow(0 0 6px rgba(255,79,216,.7)); }
:root[data-theme="neon"] .tile svg, :root[data-theme="neon"] .tools-nav a.on svg { filter: drop-shadow(0 0 8px #ff4fd8); }

/* ---------------------------------------------------------------- 4. Ою-өрнек — lapis blue and gold, Kazakh ornament */
:root[data-theme="oyu"] {
  --night: #0b1733; --night-2: #10204a; --night-3: #172a5c; --line: #23397a;
  --paper: #f6eedb; --mist: #a9b3cf; --sun: #e2b84a; --sky: #46d0c3; --alert: #ef8a6f;
  --grad: linear-gradient(135deg, #f3d77a, #d29a2f); --on-grad: #1a1203; --btn-shadow: 0 6px 20px rgba(226, 184, 74, .3);
  --glow: 0 0 0 1px rgba(226, 184, 74, .6), 0 8px 26px rgba(226, 184, 74, .2);
  --surface: linear-gradient(180deg, #12245200, #12245200), linear-gradient(180deg, #11224e, #0d1b40);
  --surface-flat: #0d1b3e; --bar: linear-gradient(180deg, #102252, #0b1733);
  --glass: rgba(16, 32, 74, .95); --glass-soft: rgba(16, 32, 74, .6);
  --tile: linear-gradient(180deg, #13275a, #0f2050); --tile-hover: linear-gradient(180deg, #183066, #10224f);
  --seg-bg: #0b1733; --seg-on: linear-gradient(180deg, #1d3570, #152a5c);
  --accent-soft: rgba(226, 184, 74, .14); --accent-line: rgba(226, 184, 74, .6);
  --title-grad: linear-gradient(180deg, #fff3d6, #e2b84a);
  --hero-light: radial-gradient(45% 60% at 72% 45%, rgba(70, 208, 195, .14), transparent 70%), radial-gradient(35% 50% at 30% 20%, rgba(226, 184, 74, .12), transparent 70%);
  --ornament: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='64' height='22' viewBox='0 0 64 22'%3E%3Cg fill='none' stroke='%23e2b84a' stroke-width='1.4' stroke-linecap='round'%3E%3Cpath d='M32 20C32 9 24 4 18.5 6.8C13 9.5 14.5 16.5 20 15.2C24 14.2 22.8 10 20 10'/%3E%3Cpath d='M32 20C32 9 40 4 45.5 6.8C51 9.5 49.5 16.5 44 15.2C40 14.2 41.2 10 44 10'/%3E%3Cpath d='M0 20H12M52 20H64'/%3E%3Cpath d='M3 11l3-3 3 3-3 3z M55 11l3-3 3 3-3 3z' fill='%23e2b84a' stroke='none'/%3E%3C/g%3E%3C/svg%3E"); --orn-opacity: .55; --orn-size: 64px 22px;
  --ed-grid: rgba(246, 238, 219, .06); --ed-wave: rgba(70, 208, 195, .10);
  --dev-mid: #f0a95a; --dev-off: #ef8a6f;
  --display: "PT Serif", Georgia, serif;
}
:root[data-theme="oyu"] .site .top::after, :root[data-theme="oyu"] .ed-top::after { bottom: -11px; height: 22px; }
:root[data-theme="oyu"] .hero h1, :root[data-theme="oyu"] .stage-title, :root[data-theme="oyu"] .tool-grid h2,
:root[data-theme="oyu"] .pricing h2, :root[data-theme="oyu"] .brand { font-family: var(--display); letter-spacing: 0; }
:root[data-theme="oyu"] .split, :root[data-theme="oyu"] .tile, :root[data-theme="oyu"] .pack, :root[data-theme="oyu"] .panel { border-color: rgba(226, 184, 74, .35); }
:root[data-theme="oyu"] .split { position: relative; }
:root[data-theme="oyu"] .split::after { content: ""; position: absolute; left: 12px; right: 12px; bottom: -11px; height: 22px; background: var(--ornament) repeat-x center / var(--orn-size); opacity: .7; }

/* ---------------------------------------------------------------- 5. Аналог — warm hardware console */
:root[data-theme="analog"] {
  --night: #1b1813; --night-2: #221e18; --night-3: #2c271f; --line: #3b342a;
  --paper: #efe6d2; --mist: #a59a85; --sun: #ff8a3d; --sky: #9fbf5a; --alert: #e5533d;
  --grad: linear-gradient(180deg, #ffa25e, #e8702a); --on-grad: #1b1206;
  --btn-shadow: inset 0 1px 0 rgba(255,255,255,.25), 0 2px 0 #0e0c09;
  --glow: 0 0 0 1px rgba(255, 138, 61, .5), 0 2px 0 #0e0c09;
  --surface: linear-gradient(180deg, #26211a, #1f1b15); --surface-flat: #1d1a14; --bar: linear-gradient(180deg, #2a251d, #1f1b15);
  --glass: rgba(34, 30, 24, .97); --glass-soft: rgba(34, 30, 24, .8);
  --tile: linear-gradient(180deg, #27221b, #201c16); --tile-hover: linear-gradient(180deg, #2e281f, #221e18);
  --seg-bg: #15120e; --seg-on: linear-gradient(180deg, #3a3328, #2c271f);
  --accent-soft: rgba(255, 138, 61, .14); --accent-line: rgba(255, 138, 61, .55);
  --title-grad: linear-gradient(180deg, #efe6d2, #efe6d2);
  --hero-light: radial-gradient(40% 55% at 72% 45%, rgba(255, 138, 61, .10), transparent 70%);
  --orn-opacity: 0;
  --ed-grid: rgba(239, 230, 210, .05); --ed-wave: rgba(159, 191, 90, .10);
  --dev-mid: #e6b450; --dev-off: #e5533d;
  --radius-s: 3px; --radius-m: 4px; --radius-l: 6px;
  --display: "JetBrains Mono", ui-monospace, monospace;
}
:root[data-theme="analog"] .btn, :root[data-theme="analog"] .ghost, :root[data-theme="analog"] .round,
:root[data-theme="analog"] .seg, :root[data-theme="analog"] .seg button, :root[data-theme="analog"] .credits { border-radius: 4px; }
:root[data-theme="analog"] .btn:not(.primary), :root[data-theme="analog"] .ghost { box-shadow: inset 0 1px 0 rgba(255,255,255,.05), 0 2px 0 #0e0c09; }
:root[data-theme="analog"] .hero h1, :root[data-theme="analog"] .stage-title, :root[data-theme="analog"] .time,
:root[data-theme="analog"] .meter b, :root[data-theme="analog"] .pack b, :root[data-theme="analog"] .brand { font-family: var(--display); letter-spacing: -.02em; }
:root[data-theme="analog"] .site .top::before, :root[data-theme="analog"] .ed-top::before { height: 2px; background: repeating-linear-gradient(90deg, #3b342a 0 6px, transparent 6px 10px); }

/* design picker */
.theme-pick { padding: 6px 8px; font-size: 13px; }