/* RETRO THEME: black screen, neon phosphor palette (green text, cyan, amber, yellow, pink), vivid glowing buttons. */
html[data-theme="retro"] {
  --g:#33ff66; --c:#00e5ff; --y:#ffe600; --a:#ff9f1a; --p:#ff3df2; --k:#000; --card:#080a14; --dim:#2fbf5b;
  background:#000; color-scheme:dark;
}
html[data-theme="retro"] body { background:#000 !important; color:var(--g) !important; }

/* base: everything flat black with green text; specific rules below add the colour */
html[data-theme="retro"] *, html[data-theme="retro"] *::before, html[data-theme="retro"] *::after {
  font-family:"Courier New", Courier, "Liberation Mono", monospace !important;
  background-color:transparent !important; background-image:none !important;
  color:var(--g) !important; border-color:var(--dim) !important; outline-color:var(--c) !important;
  caret-color:var(--y); text-decoration-color:currentColor !important; fill:var(--g);
  box-shadow:none !important; text-shadow:none !important; border-radius:0 !important;
  backdrop-filter:none !important; filter:none !important;
}
html[data-theme="retro"] ::selection { background:var(--p); color:#000; }
html[data-theme="retro"] .reveal, html[data-theme="retro"] .rise, html[data-theme="retro"] .checks li.no { opacity:1 !important; transform:none !important; }
html[data-theme="retro"] .checks li.no { text-decoration:line-through; }
html[data-theme="retro"] .mut { color:var(--dim) !important; opacity:1 !important; }

/* decoration that relied on emoji or soft gradients */
html[data-theme="retro"] .blob, html[data-theme="retro"] .ring, html[data-theme="retro"] .ti, html[data-theme="retro"] .wave, html[data-theme="retro"] .num { display:none !important; }
html[data-theme="retro"] .hero .stage { border:1px dashed var(--p) !important; }

/* headings and links */
html[data-theme="retro"] h1 { color:var(--y) !important; text-transform:uppercase; letter-spacing:.04em; text-shadow:0 0 12px var(--y) !important; }
html[data-theme="retro"] h1 em, html[data-theme="retro"] h2 em { color:var(--p) !important; text-shadow:0 0 10px var(--p) !important; }
html[data-theme="retro"] h2, html[data-theme="retro"] h3, html[data-theme="retro"] h4 { color:var(--c) !important; text-transform:uppercase; letter-spacing:.04em; text-shadow:0 0 8px var(--c) !important; }
html[data-theme="retro"] .kicker, html[data-theme="retro"] .eyebrow { color:var(--p) !important; text-transform:uppercase; letter-spacing:.08em; border-color:var(--p) !important; }
html[data-theme="retro"] .title::before, html[data-theme="retro"] .kicker::before { content:"> "; }
html[data-theme="retro"] .pname { color:var(--a) !important; text-transform:uppercase; letter-spacing:.06em; text-shadow:0 0 8px var(--a) !important; }
html[data-theme="retro"] .amt, html[data-theme="retro"] .amt * { color:var(--y) !important; text-shadow:0 0 12px var(--y) !important; }
html[data-theme="retro"] .amt small { color:var(--dim) !important; text-shadow:none !important; }
html[data-theme="retro"] a { color:var(--c) !important; text-decoration:underline; }
html[data-theme="retro"] a:hover { background-color:var(--c) !important; color:#000 !important; text-decoration:none; }
html[data-theme="retro"] b, html[data-theme="retro"] strong { color:var(--y) !important; }
html[data-theme="retro"] .logo, html[data-theme="retro"] .logo * { color:var(--g) !important; text-decoration:none; text-transform:uppercase; letter-spacing:.06em; text-shadow:0 0 10px var(--g) !important; background-color:transparent !important; }
html[data-theme="retro"] .logo:hover { background-color:transparent !important; }
html[data-theme="retro"] .logo::after { content:"_"; animation:retro-blink 1s steps(1) infinite; }
@keyframes retro-blink { 50% { opacity:0; } }

/* boxes */
html[data-theme="retro"] .card, html[data-theme="retro"] .step, html[data-theme="retro"] .ex, html[data-theme="retro"] .signup, html[data-theme="retro"] .kpi,
html[data-theme="retro"] .preview, html[data-theme="retro"] .core, html[data-theme="retro"] .float, html[data-theme="retro"] .cookie {
  border:1px solid var(--c) !important; background-color:var(--card) !important; box-shadow:0 0 14px rgba(0,229,255,.25) !important; }
html[data-theme="retro"] .paywall { border:1px solid var(--p) !important; background-color:var(--card) !important; box-shadow:0 0 20px rgba(255,61,242,.3) !important; }
html[data-theme="retro"] .plan { border:1px solid var(--a) !important; background-color:var(--card) !important; box-shadow:0 0 14px rgba(255,159,26,.25) !important; padding:1.2rem 1rem !important; }
html[data-theme="retro"] .plan.mid { border:2px solid var(--c) !important; box-shadow:0 0 18px rgba(0,229,255,.35) !important; }
html[data-theme="retro"] .plan.pro { border:3px double var(--p) !important; box-shadow:0 0 22px rgba(255,61,242,.4) !important; }
html[data-theme="retro"] .banner { border:1px solid var(--a) !important; background-color:#1a1000 !important; color:var(--a) !important; }
html[data-theme="retro"] .banner * { color:var(--a) !important; }
html[data-theme="retro"] .banner.ok, html[data-theme="retro"] .banner.ok * { color:var(--g) !important; border-color:var(--g) !important; }
html[data-theme="retro"] .banner.test, html[data-theme="retro"] .banner.test * { color:var(--c) !important; border-color:var(--c) !important; }
html[data-theme="retro"] .apphead, html[data-theme="retro"] .nav, html[data-theme="retro"] .bar, html[data-theme="retro"] footer { border-bottom:1px solid var(--g) !important; background-color:#000 !important; }
html[data-theme="retro"] .plans { gap:1rem; }
html[data-theme="retro"] .plan .amt, html[data-theme="retro"] .paywall .plan .amt { font-size:2.2rem !important; }
html[data-theme="retro"] .strip > .wrap > div { border:1px solid var(--g) !important; }
html[data-theme="retro"] hr { border:0; border-top:1px dashed var(--dim); }

/* tables */
html[data-theme="retro"] table { border-collapse:collapse; }
html[data-theme="retro"] th { color:var(--c) !important; text-transform:uppercase; letter-spacing:.05em; border-bottom:2px solid var(--c) !important; }
html[data-theme="retro"] td { border-bottom:1px dashed var(--dim) !important; }
html[data-theme="retro"] tbody tr:hover td { background-color:#0b1a2e !important; }

/* form controls */
html[data-theme="retro"] input, html[data-theme="retro"] select, html[data-theme="retro"] textarea { border:1px solid var(--c) !important; background-color:#02060e !important; color:var(--g) !important; }
html[data-theme="retro"] input::placeholder, html[data-theme="retro"] textarea::placeholder { color:var(--dim) !important; opacity:1; }
html[data-theme="retro"] option { background-color:#000 !important; color:var(--g) !important; }
html[data-theme="retro"] input[type="checkbox"], html[data-theme="retro"] input[type="radio"] { accent-color:var(--p); }
html[data-theme="retro"] input:focus, html[data-theme="retro"] select:focus, html[data-theme="retro"] textarea:focus { outline:2px solid var(--y) !important; outline-offset:2px; box-shadow:0 0 12px var(--y) !important; }

/* BUTTONS: vivid neon blocks with glow, they lift on hover and press down on click */
html[data-theme="retro"] .btn, html[data-theme="retro"] button { text-transform:uppercase; letter-spacing:.06em; font-weight:700; cursor:pointer;
  border:2px solid var(--c) !important; color:var(--c) !important; background-color:#02060e !important; box-shadow:0 0 10px rgba(0,229,255,.5) !important;
  transition:transform .12s steps(3), box-shadow .12s !important; }
html[data-theme="retro"] .btn *, html[data-theme="retro"] button * { color:inherit !important; }
html[data-theme="retro"] .btn:hover, html[data-theme="retro"] button:hover { background-color:var(--c) !important; color:#000 !important; transform:translate(-2px,-2px); box-shadow:4px 4px 0 var(--p), 0 0 18px var(--c) !important; }
html[data-theme="retro"] .btn:active, html[data-theme="retro"] button:active { transform:translate(2px,2px); box-shadow:0 0 6px var(--c) !important; }
html[data-theme="retro"] .btn.primary { background-color:var(--g) !important; color:#000 !important; border-color:var(--g) !important; box-shadow:0 0 16px var(--g) !important; }
html[data-theme="retro"] .btn.primary:hover { background-color:var(--y) !important; border-color:var(--y) !important; color:#000 !important; box-shadow:4px 4px 0 var(--p), 0 0 20px var(--y) !important; }
html[data-theme="retro"] .btn.gold { background-color:var(--y) !important; color:#000 !important; border-color:var(--y) !important; box-shadow:0 0 16px var(--y) !important; }
html[data-theme="retro"] .btn.gold:hover { background-color:var(--p) !important; border-color:var(--p) !important; color:#000 !important; box-shadow:4px 4px 0 var(--c), 0 0 20px var(--p) !important; }
html[data-theme="retro"] .btn.primary *, html[data-theme="retro"] .btn.gold *, html[data-theme="retro"] .btn:hover *, html[data-theme="retro"] button:hover * { color:#000 !important; }
html[data-theme="retro"] button:disabled { border-style:dashed !important; box-shadow:none !important; text-decoration:line-through; background-color:#000 !important; color:var(--dim) !important; transform:none !important; }
html[data-theme="retro"] #themebtn { background-color:var(--p) !important; color:#000 !important; border:2px solid var(--p) !important; box-shadow:0 0 16px var(--p) !important; }
html[data-theme="retro"] #themebtn:hover { background-color:var(--y) !important; border-color:var(--y) !important; box-shadow:4px 4px 0 var(--c), 0 0 18px var(--y) !important; }

/* tabs: one neon colour each */
html[data-theme="retro"] nav.tabs button { transform:none; animation:none !important; }
html[data-theme="retro"] nav.tabs button[data-tab="table"] { --t:var(--c); }
html[data-theme="retro"] nav.tabs button[data-tab="favorites"] { --t:var(--y); }
html[data-theme="retro"] nav.tabs button[data-tab="profile"] { --t:var(--g); }
html[data-theme="retro"] nav.tabs button[data-tab="admin"] { --t:var(--p); }
html[data-theme="retro"] nav.tabs button[data-tab="allprog"] { --t:var(--a); }
html[data-theme="retro"] nav.tabs button { color:var(--t,var(--c)) !important; border-color:var(--t,var(--c)) !important; box-shadow:0 0 10px var(--t,var(--c)) !important; }
html[data-theme="retro"] nav.tabs button.on, html[data-theme="retro"] nav.tabs button:hover { background-color:var(--t,var(--c)) !important; color:#000 !important; box-shadow:0 0 18px var(--t,var(--c)) !important; }
html[data-theme="retro"] nav.tabs button.on *, html[data-theme="retro"] nav.tabs button:hover * { color:#000 !important; }

/* tags, scores */
html[data-theme="retro"] .tag, html[data-theme="retro"] .tag2, html[data-theme="retro"] .favcount { border:1px solid var(--p) !important; color:var(--p) !important; padding-inline:.4em; }
html[data-theme="retro"] .badge { background-color:var(--p) !important; color:#000 !important; border:0 !important; box-shadow:0 0 14px var(--p) !important; }
html[data-theme="retro"] .pill, html[data-theme="retro"] .sc, html[data-theme="retro"] .smean { border:1px solid currentColor !important; padding-inline:.4em; font-weight:700; }
html[data-theme="retro"] .smean { border:0 !important; padding:0; }
html[data-theme="retro"] [style*="--ok"] { color:var(--g) !important; text-shadow:0 0 8px var(--g) !important; }
html[data-theme="retro"] [style*="--acc"] { color:var(--y) !important; text-shadow:0 0 8px var(--y) !important; }
html[data-theme="retro"] [style*="--warn"], html[data-theme="retro"] .bad { color:var(--p) !important; text-shadow:0 0 8px var(--p) !important; }
html[data-theme="retro"] .ok { color:var(--g) !important; }
html[data-theme="retro"] .sc { color:var(--c) !important; } html[data-theme="retro"] .sc.gold { color:var(--y) !important; } html[data-theme="retro"] .sc.blue { color:var(--c) !important; }

/* lists */
html[data-theme="retro"] .checks li { display:block !important; position:relative; padding-left:2.4em; overflow-wrap:anywhere; }
html[data-theme="retro"] .checks li::before { position:absolute; left:0; top:.1em; width:1.6em; height:1.6em; border:1px solid var(--g) !important; color:var(--g) !important; text-align:center; }
html[data-theme="retro"] .checks li.no::before { border-color:var(--p) !important; color:var(--p) !important; }

/* graphics */
html[data-theme="retro"] .star { background-color:var(--y) !important; }
html[data-theme="retro"] .mark { background-color:var(--g) !important; box-shadow:0 0 12px var(--g) !important; }
html[data-theme="retro"] .mark .star { background-color:#000 !important; }
html[data-theme="retro"] svg circle { fill:none !important; stroke:var(--g) !important; }
html[data-theme="retro"] svg circle.bg { stroke:var(--p) !important; stroke-dasharray:1 6 !important; }
html[data-theme="retro"] #pbar { background-color:var(--g) !important; box-shadow:0 0 10px var(--g) !important; }
html[data-theme="retro"] #progress .bar, html[data-theme="retro"] #progress > div { border:1px solid var(--g); }
html[data-theme="retro"] .confetti i:nth-child(5n+1) { background-color:var(--g) !important; } html[data-theme="retro"] .confetti i:nth-child(5n+2) { background-color:var(--p) !important; }
html[data-theme="retro"] .confetti i:nth-child(5n+3) { background-color:var(--c) !important; } html[data-theme="retro"] .confetti i:nth-child(5n+4) { background-color:var(--y) !important; }
html[data-theme="retro"] .confetti i:nth-child(5n) { background-color:var(--a) !important; }
html[data-theme="retro"] .okpop { background-color:var(--g) !important; color:#000 !important; box-shadow:0 0 24px var(--g) !important; }
@media (prefers-reduced-motion: reduce) { html[data-theme="retro"] .logo::after { animation:none; } html[data-theme="retro"] .btn, html[data-theme="retro"] button { transition:none !important; } }
html[data-theme="retro"] a.logo:hover, html[data-theme="retro"] a.logo:hover * { color:var(--y) !important; background-color:transparent !important; text-shadow:0 0 12px var(--y) !important; }