/* ===== Full themes. Each sets the palette; html[data-fx] switches on its background effects. =====
 * Accent overrides (styles2.css, loaded after this) can still recolour any theme.
 */

/* Light Space — pastel nebula, dark-ink stars */
[data-theme="lightspace"] {
  --bg: #eceeff; --card: rgba(255, 255, 255, .78); --card-solid: #ffffff; --panel: #eceeff;
  --ink: #1b1f4b; --muted: #565d8f; --line: rgba(90, 100, 200, .22);
  --g1: #7c5cff; --g2: #22b8d8; --b-light: #5547e0; --b-dark: #5547e0; --brand: var(--b-light);
  --pos: #0b8f62; --pos-soft: #d8f4e8; --neg: #d1334f; --neg-soft: #fde3e8; --warn: #9a5b00; --warn-soft: #fff0d0;
  --side: #1d2260; --side-ink: #cfd6ff; --side-active: rgba(255, 255, 255, .16); --chip: rgba(90, 100, 200, .1);
  --shadow: 0 1px 2px rgba(40, 50, 140, .08), 0 8px 26px rgba(60, 70, 180, .1);
  --tmix: 58%; --tmixc: #000; --on-primary: #fff; --blur: 8px; --neb: 22%; --neb2: 16%; --star-filter: invert(1); --star-op: .3; color-scheme: light;
}
[data-theme="lightspace"] body { background: radial-gradient(1000px 600px at 90% -10%, rgba(140, 120, 255, .28), transparent 62%), radial-gradient(900px 500px at -5% 100%, rgba(80, 200, 230, .22), transparent 62%), #eceeff; background-attachment: fixed; }

/* Daylight (plain light) keeps the :root defaults */

/* Dark — neutral charcoal, no frills */
[data-theme="dark"] {
  --bg: #0f1115; --card: #181b22; --card-solid: #181b22; --panel: #0f1115;
  --ink: #e8eaed; --muted: #9aa3ad; --line: #2c313b;
  --g1: #6ea8fe; --g2: #5eead4; --b-light: #7db3ff; --b-dark: #7db3ff; --brand: var(--b-dark);
  --pos: #4ade80; --pos-soft: rgba(74, 222, 128, .14); --neg: #f87171; --neg-soft: rgba(248, 113, 113, .15); --warn: #fbbf24; --warn-soft: rgba(251, 191, 36, .14);
  --side: #0b0d11; --side-ink: #aeb4bd; --side-active: #222731; --chip: #232730;
  --shadow: 0 1px 2px rgba(0, 0, 0, .5), 0 6px 20px rgba(0, 0, 0, .3);
  --tmix: 72%; --tmixc: #fff; --on-primary: #0b1220; color-scheme: dark;
}

/* BTC Gold — black and bitcoin orange */
[data-theme="btc"] {
  --bg: #0a0906; --card: rgba(26, 21, 13, .86); --card-solid: #19140d; --panel: #0a0906;
  --ink: #fdf6e7; --muted: #c9b793; --line: rgba(247, 147, 26, .25);
  --g1: #f7931a; --g2: #ffd166; --b-light: #ffab40; --b-dark: #ffab40; --brand: var(--b-dark);
  --pos: #86e08a; --pos-soft: rgba(134, 224, 138, .14); --neg: #ff6b5e; --neg-soft: rgba(255, 107, 94, .16); --warn: #ffd166; --warn-soft: rgba(255, 209, 102, .15);
  --side: #060504; --side-ink: #d9c8a6; --side-active: rgba(247, 147, 26, .2); --chip: rgba(247, 147, 26, .12);
  --shadow: 0 0 0 1px rgba(247, 147, 26, .06), 0 12px 36px rgba(0, 0, 0, .5);
  --tmix: 72%; --tmixc: #fff; --on-primary: #1a1000; --grid: rgba(247, 147, 26, .22); --neb: 18%; --neb2: 10%; color-scheme: dark;
}
[data-theme="btc"] body { background: radial-gradient(900px 500px at 85% -10%, rgba(247, 147, 26, .22), transparent 60%), radial-gradient(700px 400px at 0% 100%, rgba(255, 209, 102, .10), transparent 60%), #0a0906; background-attachment: fixed; }

/* Wall Street — deep green, gold, serif headlines and a ticker of your own holdings */
[data-theme="wallstreet"] {
  --bg: #06130d; --card: rgba(13, 32, 23, .9); --card-solid: #0d2017; --panel: #06130d;
  --ink: #ecf7ef; --muted: #96b5a3; --line: rgba(212, 175, 55, .24);
  --g1: #d4af37; --g2: #3ddc84; --b-light: #e6c35c; --b-dark: #e6c35c; --brand: var(--b-dark);
  --pos: #3ddc84; --pos-soft: rgba(61, 220, 132, .14); --neg: #ff5d5d; --neg-soft: rgba(255, 93, 93, .15); --warn: #e6c35c; --warn-soft: rgba(230, 195, 92, .14);
  --side: #040d09; --side-ink: #a9c9b6; --side-active: rgba(212, 175, 55, .16); --chip: rgba(212, 175, 55, .1);
  --shadow: 0 1px 2px rgba(0, 0, 0, .5), 0 8px 26px rgba(0, 0, 0, .35);
  --tmix: 72%; --tmixc: #fff; --on-primary: #101a00; --r: 8px; --font-head: Georgia, "Times New Roman", serif; color-scheme: dark;
}
[data-theme="wallstreet"] body { background: repeating-linear-gradient(90deg, rgba(255, 255, 255, .022) 0 1px, transparent 1px 46px), radial-gradient(1000px 500px at 80% -10%, rgba(212, 175, 55, .13), transparent 60%), #06130d; background-attachment: fixed; }

/* Cosy — warm paper, terracotta, rounded and soft */
[data-theme="cosy"] {
  --bg: #f6eee3; --card: #fffaf2; --card-solid: #fffaf2; --panel: #f6eee3;
  --ink: #3b2e28; --muted: #64534a; --line: #e8dac8;
  --g1: #dd8a3a; --g2: #c4604b; --b-light: #9a4416; --b-dark: #9a4416; --brand: var(--b-light);
  --pos: #3f8a4f; --pos-soft: #dff0dc; --neg: #bd4337; --neg-soft: #f8e0db; --warn: #96600f; --warn-soft: #fbebc9;
  --side: #3a2b24; --side-ink: #ecdcc8; --side-active: rgba(255, 255, 255, .12); --chip: #f1e5d4;
  --shadow: 0 1px 2px rgba(120, 80, 40, .08), 0 10px 26px rgba(150, 100, 50, .12);
  --tmix: 58%; --tmixc: #000; --on-primary: #fff; --r: 22px; --neb: 12%; --neb2: 9%;
  --font: ui-rounded, "SF Pro Rounded", "Nunito", "Quicksand", -apple-system, system-ui, sans-serif; --font-head: ui-rounded, "SF Pro Rounded", "Nunito", -apple-system, system-ui, sans-serif; color-scheme: light;
}
[data-theme="cosy"] body { background: radial-gradient(900px 500px at 90% -10%, rgba(221, 138, 58, .18), transparent 60%), radial-gradient(800px 450px at 0% 105%, rgba(196, 96, 75, .12), transparent 60%), #f6eee3; background-attachment: fixed; }

/* Locked In — black screen, green terminal text, falling code */
[data-theme="locked"] {
  --bg: #000; --card: rgba(0, 14, 6, .84); --card-solid: #010f07; --panel: #000;
  --ink: #b9ffd0; --muted: #74d594; --line: rgba(0, 255, 110, .3);
  --g1: #00ff66; --g2: #7dffb2; --b-light: #2bff88; --b-dark: #2bff88; --brand: var(--b-dark);
  --pos: #2bff88; --pos-soft: rgba(43, 255, 136, .12); --neg: #ff4d6d; --neg-soft: rgba(255, 77, 109, .14); --warn: #e8ff6a; --warn-soft: rgba(232, 255, 106, .12);
  --side: #000; --side-ink: #74d594; --side-active: rgba(0, 255, 110, .14); --chip: rgba(0, 255, 110, .08);
  --shadow: 0 0 0 1px rgba(0, 255, 110, .1), 0 0 24px rgba(0, 255, 110, .08);
  --tmix: 78%; --tmixc: #fff; --on-primary: #00140a; --r: 4px; --blur: 3px;
  --font: ui-monospace, "SF Mono", Menlo, Consolas, "Liberation Mono", monospace; --font-head: var(--font); color-scheme: dark;
}
[data-theme="locked"] .hero-num, [data-theme="locked"] h1 { text-shadow: 0 0 14px rgba(0, 255, 110, .45); }
[data-theme="locked"] .btn, [data-theme="locked"] input, [data-theme="locked"] select { border-radius: 4px; }

/* Sunset — dusk purple to ember orange */
[data-theme="sunset"] {
  --bg: #1a0f2e; --card: rgba(42, 22, 66, .78); --card-solid: #2a1642; --panel: #160b28;
  --ink: #fff1e8; --muted: #e2c8d5; --line: rgba(255, 150, 120, .24);
  --g1: #ff7a59; --g2: #ffc371; --b-light: #ff9a76; --b-dark: #ff9a76; --brand: var(--b-dark);
  --pos: #7ee2a8; --pos-soft: rgba(126, 226, 168, .14); --neg: #ff6b8b; --neg-soft: rgba(255, 107, 139, .16); --warn: #ffc371; --warn-soft: rgba(255, 195, 113, .15);
  --side: rgba(18, 9, 34, .85); --side-ink: #e6c9d6; --side-active: rgba(255, 122, 89, .2); --chip: rgba(255, 150, 120, .12);
  --shadow: 0 12px 36px rgba(10, 0, 20, .4);
  --tmix: 62%; --tmixc: #fff; --on-primary: #2a0f00; --blur: 8px; --neb: 22%; --neb2: 18%; color-scheme: dark;
}
[data-theme="sunset"] body { background: linear-gradient(180deg, #1a0f2e 0%, #3a1747 52%, #552243 82%, #6a2838 100%); background-attachment: fixed; }   /* the glow at the bottom is kept deep enough for light text to sit on it */

/* Ocean — deep teal water */
[data-theme="ocean"] {
  --bg: #04202c; --card: rgba(8, 50, 68, .72); --card-solid: #08324a; --panel: #031a24;
  --ink: #e6fbff; --muted: #92c6d4; --line: rgba(80, 200, 230, .24);
  --g1: #0ea5e9; --g2: #2dd4bf; --b-light: #4cc9f0; --b-dark: #4cc9f0; --brand: var(--b-dark);
  --pos: #5eead4; --pos-soft: rgba(94, 234, 212, .14); --neg: #ff7a8a; --neg-soft: rgba(255, 122, 138, .16); --warn: #ffd27a; --warn-soft: rgba(255, 210, 122, .15);
  --side: rgba(2, 24, 34, .88); --side-ink: #a9d4e0; --side-active: rgba(14, 165, 233, .2); --chip: rgba(80, 200, 230, .12);
  --shadow: 0 12px 36px rgba(0, 20, 30, .45);
  --tmix: 62%; --tmixc: #fff; --on-primary: #00212e; --blur: 8px; --neb: 24%; --neb2: 18%; color-scheme: dark;
}
[data-theme="ocean"] body { background: linear-gradient(180deg, #05293a 0%, #04202c 45%, #021520 100%); background-attachment: fixed; }

/* Forest — dark green with firefly stars */
[data-theme="forest"] {
  --bg: #0a1810; --card: rgba(17, 40, 27, .76); --card-solid: #11281b; --panel: #07120b;
  --ink: #ebf8ee; --muted: #9ec6aa; --line: rgba(120, 200, 140, .22);
  --g1: #4ade80; --g2: #a3e635; --b-light: #86efac; --b-dark: #86efac; --brand: var(--b-dark);
  --pos: #86efac; --pos-soft: rgba(134, 239, 172, .14); --neg: #fb7185; --neg-soft: rgba(251, 113, 133, .16); --warn: #fde047; --warn-soft: rgba(253, 224, 71, .14);
  --side: rgba(6, 17, 11, .88); --side-ink: #a8cdb4; --side-active: rgba(74, 222, 128, .16); --chip: rgba(120, 200, 140, .12);
  --shadow: 0 12px 36px rgba(0, 12, 4, .45);
  --tmix: 72%; --tmixc: #fff; --on-primary: #04170a; --blur: 8px; --neb: 18%; --neb2: 14%; --star-filter: sepia(1) saturate(5) hue-rotate(35deg); color-scheme: dark;
}
[data-theme="forest"] body { background: radial-gradient(900px 500px at 85% -10%, rgba(74, 222, 128, .14), transparent 60%), radial-gradient(800px 450px at 0% 105%, rgba(163, 230, 53, .1), transparent 60%), #0a1810; background-attachment: fixed; }

/* Neon Night — synthwave grid */
[data-theme="neon"] {
  --bg: #0b0620; --card: rgba(26, 10, 58, .8); --card-solid: #1a0a3a; --panel: #080418;
  --ink: #fdeaff; --muted: #cbaaea; --line: rgba(255, 60, 200, .32);
  --g1: #ff2bd6; --g2: #00e5ff; --b-light: #ff6ee7; --b-dark: #ff6ee7; --brand: var(--b-dark);
  --pos: #39ffb0; --pos-soft: rgba(57, 255, 176, .13); --neg: #ff5c7c; --neg-soft: rgba(255, 92, 124, .16); --warn: #fff25e; --warn-soft: rgba(255, 242, 94, .13);
  --side: rgba(7, 3, 26, .9); --side-ink: #d7b4f5; --side-active: rgba(255, 43, 214, .18); --chip: rgba(255, 60, 200, .12);
  --shadow: 0 0 0 1px rgba(255, 60, 200, .1), 0 0 30px rgba(255, 43, 214, .12);
  --tmix: 72%; --tmixc: #fff; --on-primary: #20002a; --blur: 6px; --grid: rgba(255, 43, 214, .32); --neb: 22%; --neb2: 16%; color-scheme: dark;
}
[data-theme="neon"] h1, [data-theme="neon"] .hero-num { text-shadow: 0 0 16px rgba(255, 43, 214, .55); }
[data-theme="neon"] body { background: linear-gradient(180deg, #0b0620 0%, #1b0840 70%, #2d0a52 100%); background-attachment: fixed; }

/* High Contrast — maximum legibility */
[data-theme="contrast"] {
  --bg: #000; --card: #000; --card-solid: #000; --panel: #000;
  --ink: #fff; --muted: #e4e4e4; --line: #fff;
  --g1: #ffe600; --g2: #00e5ff; --b-light: #ffe600; --b-dark: #ffe600; --brand: var(--b-dark);
  --pos: #00ff7f; --pos-soft: #003d1f; --neg: #ff5252; --neg-soft: #4a0000; --warn: #ffe600; --warn-soft: #3d3600;
  --side: #000; --side-ink: #fff; --side-active: #262626; --chip: #1f1f1f;
  --shadow: none; --tmix: 70%; --tmixc: #fff; --on-primary: #000; --r: 8px; color-scheme: dark;
}
[data-theme="contrast"] .card, [data-theme="contrast"] .table-wrap, [data-theme="contrast"] .tpl { border: 2px solid #fff; }
[data-theme="contrast"] .nav a.on { background: #ffe600; color: #000; box-shadow: none; }
[data-theme="contrast"] .sidebar { border-right: 2px solid #fff; }
[data-theme="contrast"] .chip.on, [data-theme="contrast"] .seg button.on { outline: 2px solid #ffe600; }

/* ===== Background effects ===== */
.ticker, #rain { display: none; }
html[data-fx~="rain"] #rain { display: block; position: fixed; inset: 0; width: 100%; height: 100%; z-index: 0; pointer-events: none; opacity: .5; }
html[data-fx~="ticker"] .ticker { display: block; position: fixed; left: 0; right: 0; bottom: 0; z-index: 40; background: #040d09; border-top: 1px solid rgba(212, 175, 55, .5); overflow: hidden; white-space: nowrap; font-family: ui-monospace, Menlo, Consolas, monospace; font-size: .95rem; padding: .45rem 0; }
html[data-fx~="ticker"] main { padding-bottom: 5rem; }
.tk-track { display: inline-block; padding-left: 100%; animation: tape 70s linear infinite; }
.tk-track span { margin-right: 2.4rem; color: #e6c35c; }
.tk-track b { color: #ecf7ef; margin-right: .5rem; }
.tk-track .up { color: #3ddc84; } .tk-track .dn { color: #ff5d5d; }
@keyframes tape { to { transform: translateX(-100%); } }

html[data-fx~="grid"] body::after {
  content: ""; position: fixed; left: -20%; right: -20%; bottom: 0; height: 48vh; z-index: 0; pointer-events: none;
  background-image: linear-gradient(var(--grid) 1px, transparent 1px), linear-gradient(90deg, var(--grid) 1px, transparent 1px);
  background-size: 54px 54px; transform: perspective(520px) rotateX(58deg); transform-origin: bottom;
  -webkit-mask-image: linear-gradient(transparent, #000 75%); mask-image: linear-gradient(transparent, #000 75%);
  animation: gridmove 5s linear infinite;
}
@keyframes gridmove { to { background-position: 0 54px; } }