/* ==========================================================================
   AIVersee — Spatial UI design system (v1, 2026-10-09)
   Deep midnight-blue atmospheric theme with glassmorphism panels.
   This stylesheet is linked AFTER each page's inline <style>, so its rules
   win ties and progressively reskin the whole site without touching markup.
   Default = dark spatial. body.light = clean light theme (theme toggle).
   ========================================================================== */

:root{
  --bg:#04060d;
  --card:rgba(15,21,42,.58);
  --ink:#f1f5fd;
  --muted:#9aa7c7;
  --line:rgba(148,163,255,.14);
  --brand:#818cf8;
  --brand-d:#a78bfa;
  --sp-cyan:#67e8f9;
  --sp-violet:#a78bfa;
  --sp-indigo:#818cf8;
  --sp-grad:linear-gradient(135deg,#6366f1,#8b5cf6 55%,#22d3ee);
  --sp-glass:rgba(15,21,42,.58);
  --sp-glass-2:rgba(22,29,58,.62);
  --sp-line:rgba(148,163,255,.14);
  --sp-line-2:rgba(148,163,255,.26);
  --sp-ink:#f1f5fd;
  --sp-muted:#9aa7c7;
  --sp-faint:#6b7694;
  --sp-shadow:0 18px 50px rgba(0,0,0,.42);
}

html{ background:#04060d; }
body{
  background:var(--bg);
  color:var(--ink);
  font-family:'Inter',system-ui,-apple-system,'Segoe UI',Arial,sans-serif;
  -webkit-font-smoothing:antialiased;
  text-rendering:optimizeLegibility;
}
/* Ambient spatial background — restrained indigo/violet/cyan glow */
body::before{
  content:""; position:fixed; inset:0; z-index:-1; pointer-events:none;
  background:
    radial-gradient(620px 420px at 10% -4%, rgba(99,102,241,.16), transparent 62%),
    radial-gradient(720px 480px at 90% 4%, rgba(139,92,246,.11), transparent 62%),
    radial-gradient(940px 620px at 50% 112%, rgba(34,211,238,.08), transparent 62%),
    radial-gradient(500px 380px at 78% 62%, rgba(99,102,241,.05), transparent 65%);
}
a{ color:inherit; }
::selection{ background:rgba(129,140,248,.35); color:#fff; }
:focus-visible{ outline:2px solid var(--sp-cyan); outline-offset:2px; border-radius:6px; }

/* ============ NAV — floating glass pill ============ */
body > nav{
  position:sticky; top:12px; z-index:50;
  max-width:1180px; margin:12px auto 0;
  background:rgba(9,13,28,.66) !important;
  -webkit-backdrop-filter:blur(20px) saturate(150%);
  backdrop-filter:blur(20px) saturate(150%);
  border:1px solid var(--sp-line);
  border-radius:20px;
  box-shadow:0 14px 44px rgba(0,0,0,.4), inset 0 1px 0 rgba(255,255,255,.07);
}
.navin{ height:68px; }
.logo{ color:var(--sp-ink); }
.logo .mark{ box-shadow:0 6px 18px rgba(99,102,241,.4), inset 0 1px 0 rgba(255,255,255,.25); }
.navlinks{ color:var(--sp-muted); }
.navlinks a.nl{ color:var(--sp-muted); transition:color .15s; }
.navlinks a.nl:hover{ color:var(--sp-ink); }
.btn{
  background:var(--sp-grad); color:#fff !important;
  border:1px solid rgba(255,255,255,.14);
  box-shadow:0 8px 24px rgba(99,102,241,.35), inset 0 1px 0 rgba(255,255,255,.22);
  transition:transform .16s, box-shadow .16s, filter .16s;
}
.btn:hover{ transform:translateY(-1px); filter:brightness(1.08); box-shadow:0 12px 30px rgba(99,102,241,.45), inset 0 1px 0 rgba(255,255,255,.22); background:var(--sp-grad); }
.dmode{
  background:rgba(148,163,255,.08); border:1px solid var(--sp-line);
  color:var(--sp-ink); border-radius:12px; transition:.15s;
}
.dmode:hover{ border-color:var(--sp-line-2); background:rgba(148,163,255,.14); }
.dmode.on{ background:rgba(129,140,248,.2); border-color:var(--sp-indigo); }

/* ============ HERO — cinematic spatial ============ */
.hero{
  background:
    radial-gradient(560px 260px at 50% -30px, rgba(99,102,241,.18), transparent 65%),
    radial-gradient(420px 200px at 82% 20%, rgba(34,211,238,.07), transparent 60%) !important;
  border:none !important; box-shadow:none !important;
  padding-top:76px !important;
}
.pill-top{
  background:rgba(129,140,248,.1); border:1px solid var(--sp-line-2);
  color:var(--sp-cyan); font-weight:600;
  -webkit-backdrop-filter:blur(8px); backdrop-filter:blur(8px);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.08);
}
.hero h1{ color:var(--sp-ink); letter-spacing:-1.8px; text-shadow:0 4px 30px rgba(99,102,241,.25); }
.hero h1 .gr{
  background:linear-gradient(94deg,var(--sp-cyan) 0%,var(--sp-indigo) 55%,var(--sp-violet) 100%);
  -webkit-background-clip:text; background-clip:text; color:transparent;
}
.hero p{ color:var(--sp-muted); }
.hero p.lead{ color:var(--sp-muted); }

/* Floating glass search */
.searchbox{
  background:rgba(13,19,38,.66);
  -webkit-backdrop-filter:blur(20px) saturate(150%);
  backdrop-filter:blur(20px) saturate(150%);
  border:1.5px solid var(--sp-line-2);
  border-radius:18px;
  box-shadow:0 18px 50px rgba(0,0,0,.45), inset 0 1px 0 rgba(255,255,255,.09);
  transition:border-color .18s, box-shadow .18s;
}
.searchbox:focus-within{
  border-color:rgba(103,232,249,.55);
  box-shadow:0 18px 50px rgba(0,0,0,.45), 0 0 0 4px rgba(103,232,249,.12), inset 0 1px 0 rgba(255,255,255,.09);
}
.searchbox .ico{ color:var(--sp-faint); }
.searchbox input{ color:var(--sp-ink); }
.searchbox input::placeholder{ color:var(--sp-faint); }
.searchbox button{ background:var(--sp-grad); box-shadow:0 8px 22px rgba(99,102,241,.4), inset 0 1px 0 rgba(255,255,255,.22); border:1px solid rgba(255,255,255,.14); }
.searchbox button:hover{ background:var(--sp-grad); filter:brightness(1.08); }
.stats b{ color:var(--sp-ink); }
.stats span{ color:var(--sp-muted); }

/* ============ CATEGORY TILES ============ */
.cat{
  background:rgba(15,21,42,.5);
  -webkit-backdrop-filter:blur(10px); backdrop-filter:blur(10px);
  border:1px solid var(--sp-line); color:var(--sp-muted);
  border-radius:13px;
}
.cat:hover{ border-color:var(--sp-line-2); color:var(--sp-ink); background:rgba(22,29,58,.6); }
.cat.on{
  background:linear-gradient(135deg,rgba(99,102,241,.28),rgba(139,92,246,.28));
  border-color:rgba(129,140,248,.55); color:#fff; font-weight:600;
  box-shadow:0 6px 20px rgba(99,102,241,.3), inset 0 1px 0 rgba(255,255,255,.12);
}
.count{ color:var(--sp-muted); }
.toolbar .sortsel, .sortsel{
  background:rgba(15,21,42,.6); border:1px solid var(--sp-line); color:var(--sp-ink);
  -webkit-backdrop-filter:blur(10px); backdrop-filter:blur(10px);
}
.sortsel option{ background:#0d1326; color:var(--sp-ink); }
.sortsel:focus{ border-color:var(--sp-cyan); outline:none; }

/* ============ SPATIAL TOOL CARDS ============ */
.grid{ perspective:1200px; }
.card{
  background:var(--sp-glass);
  -webkit-backdrop-filter:blur(18px) saturate(140%);
  backdrop-filter:blur(18px) saturate(140%);
  border:1px solid var(--sp-line);
  border-radius:20px;
  box-shadow:0 10px 32px rgba(0,0,0,.32), inset 0 1px 0 rgba(255,255,255,.07);
  transition:transform .18s ease, box-shadow .22s ease, border-color .18s ease;
  transform-style:preserve-3d;
}
@media(hover:hover) and (pointer:fine){
  .card{ will-change:transform; }
}
.card:hover{
  border-color:var(--sp-line-2);
  box-shadow:0 24px 60px rgba(0,0,0,.5), 0 0 0 1px rgba(103,232,249,.12), inset 0 1px 0 rgba(255,255,255,.1);
}
.logowrap{
  background:rgba(9,13,28,.7); border:1px solid var(--sp-line);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.06);
}
.logowrap .avatar{ text-shadow:0 2px 8px rgba(0,0,0,.4); }
.cinfo h3{ color:var(--sp-ink); }
.cinfo p{ color:var(--sp-muted); }
.hot{
  background:rgba(251,191,36,.12); color:#fcd34d; border:1px solid rgba(251,191,36,.35);
}
.price{ border:1px solid transparent; -webkit-backdrop-filter:blur(6px); backdrop-filter:blur(6px); }
.price.free{ background:rgba(34,197,94,.13); color:#4ade80; border-color:rgba(34,197,94,.3); }
.price.freemium{ background:rgba(96,165,250,.13); color:#93c5fd; border-color:rgba(96,165,250,.3); }
.price.paid{ background:rgba(251,191,36,.13); color:#fcd34d; border-color:rgba(251,191,36,.3); }
.catname{ color:var(--sp-faint); }
.visit{ color:var(--sp-cyan); }
.visit:hover{ color:#a5f3fc; }
.review{ color:var(--sp-violet); }
.review:hover{ color:#c4b5fd; }
.empty{ color:var(--sp-muted); }

/* Tool of the day */
.totd-badge{
  background:linear-gradient(135deg,#fbbf24,#f59e0b); color:#231303;
  box-shadow:0 6px 20px rgba(251,191,36,.35);
}
.totd-card{
  background:linear-gradient(rgba(17,24,48,.72),rgba(17,24,48,.72)) padding-box,
    linear-gradient(135deg,rgba(251,191,36,.6),rgba(139,92,246,.6)) border-box;
  border:2px solid transparent;
  -webkit-backdrop-filter:blur(18px); backdrop-filter:blur(18px);
  box-shadow:0 18px 50px rgba(0,0,0,.4), inset 0 1px 0 rgba(255,255,255,.08);
}
.totd-card .tinfo h3{ color:var(--sp-ink); }
.totd-card .tinfo p{ color:var(--sp-muted); }

/* ============ FAQ ============ */
.faq h2{ color:var(--sp-ink); }
.faq .sub{ color:var(--sp-muted); }
details.qa{
  background:var(--sp-glass);
  -webkit-backdrop-filter:blur(14px); backdrop-filter:blur(14px);
  border:1px solid var(--sp-line); border-radius:16px;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.06);
}
details.qa summary{ color:var(--sp-ink); }
details.qa summary::after{ color:var(--sp-cyan); }
details.qa .a{ color:var(--sp-muted); }
details.qa .a a{ color:var(--sp-cyan); }

/* ============ CTA ============ */
.cta{
  background:
    radial-gradient(420px 200px at 80% 0%, rgba(139,92,246,.22), transparent 60%),
    linear-gradient(135deg,rgba(30,27,80,.85),rgba(46,32,96,.85)) !important;
  -webkit-backdrop-filter:blur(18px); backdrop-filter:blur(18px);
  border:1px solid var(--sp-line-2);
  box-shadow:0 24px 70px rgba(0,0,0,.45), inset 0 1px 0 rgba(255,255,255,.1);
}
.cta::before{ background:rgba(139,92,246,.12); }
.cta h2{ color:#fff; }
.cta p{ color:#c9d2ee; }
.cta .btn{ background:#fff; color:#4c1d95 !important; border:none; }
.cta .btn:hover{ background:#f1f5ff; }

/* ============ FOOTER ============ */
footer{ background:rgba(5,8,17,.7) !important; border-top:1px solid var(--sp-line); }
.fin h4{ color:var(--sp-faint); }
.fin a{ color:var(--sp-muted); }
.fin a:hover{ color:var(--sp-cyan); }
.fin .about{ color:var(--sp-faint); }
.copy{ border-top:1px solid var(--sp-line); color:var(--sp-faint); }

/* ============ DRAWER (mobile menu) ============ */
.drawer{
  background:rgba(9,13,28,.92) !important;
  -webkit-backdrop-filter:blur(24px); backdrop-filter:blur(24px);
  border-left:1px solid var(--sp-line);
}
.drawer-head{ border-bottom:1px solid var(--sp-line); }
.dclose{ background:rgba(148,163,255,.1); color:var(--sp-ink); }
.dclose:hover{ background:rgba(148,163,255,.18); }
.drawer-links a{ color:var(--sp-ink); }
.drawer-links a:hover{ background:rgba(148,163,255,.1); }
.hamb{ color:var(--sp-ink); }
.drawer-ov{ background:rgba(2,4,10,.6); -webkit-backdrop-filter:blur(3px); backdrop-filter:blur(3px); }

/* ============ TOOL PAGES ============ */
.crumbs{ color:var(--sp-faint); }
.crumbs a{ color:var(--sp-muted); }
.crumbs a:hover{ color:var(--sp-cyan); }
.hero h1{ color:var(--sp-ink); }
.badges .bdg, .bdg{
  background:rgba(129,140,248,.12); color:var(--sp-indigo); border:1px solid rgba(129,140,248,.35);
}
.bdg.free{ background:rgba(34,197,94,.12); color:#4ade80; border-color:rgba(34,197,94,.35); }
.bdg.paid{ background:rgba(251,191,36,.12); color:#fcd34d; border-color:rgba(251,191,36,.35); }
.sec{
  background:var(--sp-glass);
  -webkit-backdrop-filter:blur(16px); backdrop-filter:blur(16px);
  border:1px solid var(--sp-line); border-radius:20px;
  box-shadow:0 14px 40px rgba(0,0,0,.32), inset 0 1px 0 rgba(255,255,255,.06);
}
.sec h2{ color:var(--sp-ink); }
.sec p, .sec li{ color:var(--sp-muted); }
.altcard{
  background:rgba(12,17,36,.6); border:1px solid var(--sp-line);
  -webkit-backdrop-filter:blur(10px); backdrop-filter:blur(10px);
}
.altcard:hover{ border-color:var(--sp-line-2); box-shadow:0 12px 30px rgba(0,0,0,.4); }
.altcard b{ color:var(--sp-ink); }
.altcard span{ color:var(--sp-muted); }
.altcard em{ color:var(--sp-cyan); }
.faq b{ color:var(--sp-ink); }

/* ============ COMPARE PAGE ============ */
.duel, .tcard, .spectable, .verdict, .pick, .picker{
  background:var(--sp-glass);
  -webkit-backdrop-filter:blur(16px); backdrop-filter:blur(16px);
  border:1px solid var(--sp-line); border-radius:20px;
  box-shadow:0 14px 40px rgba(0,0,0,.32), inset 0 1px 0 rgba(255,255,255,.06);
}
.duel .vsbadge, .vsbadge{
  background:var(--sp-grad); color:#fff;
  box-shadow:0 8px 24px rgba(99,102,241,.4);
}
.srow{ border-color:var(--sp-line); }
.win{ color:#4ade80; } .tie{ color:#fcd34d; }
.abtn{
  background:rgba(15,21,42,.6); border:1px solid var(--sp-line); color:var(--sp-ink);
}
.abtn:hover{ border-color:var(--sp-line-2); }
.abtn.primary, .primary{ background:var(--sp-grad); color:#fff; border:1px solid rgba(255,255,255,.14); }
.actions .lbl, .lbl{ color:var(--sp-muted); }
.desc{ color:var(--sp-muted); }
.crown{ filter:drop-shadow(0 2px 6px rgba(251,191,36,.5)); }

/* ============ PROMPT BUILDER ============ */
.builder .panel, .panel{
  background:var(--sp-glass);
  -webkit-backdrop-filter:blur(16px); backdrop-filter:blur(16px);
  border:1px solid var(--sp-line); border-radius:20px;
  box-shadow:0 14px 40px rgba(0,0,0,.32), inset 0 1px 0 rgba(255,255,255,.06);
}
.field label, .fld-toggle{ color:var(--sp-muted); }
.field input[type="text"], .field textarea, .field select,
.builder input[type="text"], .builder textarea, .builder select{
  background:rgba(8,12,26,.7); border:1px solid var(--sp-line);
  color:var(--sp-ink); border-radius:12px;
}
.field input:focus, .field textarea:focus, .field select:focus,
.builder input:focus, .builder textarea:focus{
  border-color:rgba(103,232,249,.5); outline:none;
  box-shadow:0 0 0 3px rgba(103,232,249,.1);
}
.chips .chip, .chip{
  background:rgba(15,21,42,.6); border:1px solid var(--sp-line); color:var(--sp-muted);
}
.chip:hover, .chip.on{ border-color:var(--sp-line-2); color:var(--sp-ink); }
.chip.on{ background:rgba(129,140,248,.18); }
.outbox{
  background:rgba(8,12,26,.75); border:1px solid var(--sp-line-2);
  color:var(--sp-ink);
}
.outbtns .btn{ }
.tabs .tab{ color:var(--sp-muted); }
.tabs .tab.on, .tab.on{ color:var(--sp-ink); border-color:var(--sp-cyan); }
.negbox{ background:rgba(8,12,26,.6); border:1px solid var(--sp-line); }
.tip{ color:var(--sp-faint); }

/* ============ BLOG ============ */
.kicker{ color:var(--sp-cyan); }

/* ============ CONTACT / FORMS ============ */
.cform input, .cform textarea, .cform select,
.mailcard{
  background:rgba(8,12,26,.7); border:1px solid var(--sp-line); color:var(--sp-ink);
}
.cform input:focus, .cform textarea:focus{
  border-color:rgba(103,232,249,.5); outline:none;
  box-shadow:0 0 0 3px rgba(103,232,249,.1);
}
.cform label, .fl{ color:var(--sp-muted); }

/* ============ CHAT WIDGET — spatial glass ============ */
#aichat-fab{
  background:var(--sp-grad);
  box-shadow:0 14px 36px rgba(99,102,241,.5), inset 0 1px 0 rgba(255,255,255,.25);
  border:1px solid rgba(255,255,255,.16);
}
#aichat-fab:hover{ box-shadow:0 18px 44px rgba(99,102,241,.6); }
#aichat-panel{
  background:rgba(10,15,31,.88);
  -webkit-backdrop-filter:blur(24px) saturate(150%);
  backdrop-filter:blur(24px) saturate(150%);
  border:1px solid var(--sp-line-2);
  box-shadow:0 34px 90px rgba(0,0,0,.55), inset 0 1px 0 rgba(255,255,255,.08);
}
.aichat-head{ background:linear-gradient(135deg,rgba(99,102,241,.9),rgba(139,92,246,.9)); }
#aichat-msgs{ background:rgba(5,8,17,.5); }
.aichat-m.ai{
  background:rgba(22,29,58,.75); border:1px solid var(--sp-line); color:var(--sp-ink);
  -webkit-backdrop-filter:blur(8px); backdrop-filter:blur(8px);
}
.aichat-m.ai b, .aichat-m.ai strong{ color:#fff; }
.aichat-m.ai code{ background:rgba(129,140,248,.16); color:var(--sp-cyan); }
.aichat-m.ai a{ color:var(--sp-cyan); }
.aichat-m.user{ background:linear-gradient(135deg,#6366f1,#8b5cf6); }
.aichat-tp{ background:rgba(22,29,58,.75); border:1px solid var(--sp-line); }
.aichat-sugs{ background:rgba(5,8,17,.5); border-top:1px solid var(--sp-line); }
.aichat-sug{ background:rgba(22,29,58,.7); border:1px solid var(--sp-line); color:var(--sp-muted); }
.aichat-sug:hover{ border-color:var(--sp-cyan); color:var(--sp-cyan); }
.aichat-in{ background:rgba(10,15,31,.7); border-top:1px solid var(--sp-line); }
#aichat-inp{
  background:rgba(8,12,26,.75); border:1.5px solid var(--sp-line); color:var(--sp-ink);
}
#aichat-inp::placeholder{ color:var(--sp-faint); }
#aichat-inp:focus{ border-color:var(--sp-cyan); background:rgba(8,12,26,.9); box-shadow:0 0 0 3px rgba(103,232,249,.12); }
#aichat-send{ background:var(--sp-grad); box-shadow:0 6px 18px rgba(99,102,241,.4); }

/* ============ SCROLLBAR ============ */
::-webkit-scrollbar{ width:10px; height:10px; }
::-webkit-scrollbar-track{ background:#070b16; }
::-webkit-scrollbar-thumb{ background:#232c52; border-radius:8px; border:2px solid #070b16; }
::-webkit-scrollbar-thumb:hover{ background:#2e3a6b; }

/* ==========================================================================
   LIGHT THEME (body.light) — clean, calm light spatial
   ========================================================================== */
body.light{
  --bg:#f3f5fa;
  --card:#ffffff;
  --ink:#0f172a;
  --muted:#5b6b86;
  --line:rgba(15,23,42,.1);
  --brand:#4f46e5;
  --brand-d:#4338ca;
}
body.light::before{
  background:
    radial-gradient(620px 420px at 10% -4%, rgba(99,102,241,.10), transparent 62%),
    radial-gradient(720px 480px at 90% 4%, rgba(34,211,238,.08), transparent 62%);
}
body.light{ background:#f3f5fa; color:#0f172a; }
body.light > nav{
  background:rgba(255,255,255,.78) !important;
  border:1px solid rgba(15,23,42,.09);
  box-shadow:0 12px 34px rgba(15,23,42,.1), inset 0 1px 0 rgba(255,255,255,.7);
}
body.light .navlinks, body.light .navlinks a.nl{ color:#5b6b86; }
body.light .navlinks a.nl:hover{ color:#0f172a; }
body.light .logo{ color:#0f172a; }
body.light .hamb{ color:#0f172a; }
body.light .dmode{ background:#fff; border:1px solid rgba(15,23,42,.12); color:#0f172a; }
body.light .hero{ background:radial-gradient(700px 300px at 50% -40px, rgba(79,70,229,.1), transparent) !important; }
body.light .hero h1{ color:#0f172a; text-shadow:none; }
body.light .hero h1 .gr{ background:linear-gradient(92deg,#4f46e5,#7c3aed 60%,#a855f7); -webkit-background-clip:text; background-clip:text; color:transparent; }
body.light .hero p, body.light .hero p.lead{ color:#5b6b86; }
body.light .pill-top{ background:#eef2ff; border:1px solid #e0e7ff; color:#4f46e5; box-shadow:none; }
body.light .searchbox{
  background:#fff; border:1.5px solid rgba(15,23,42,.12);
  box-shadow:0 12px 34px rgba(15,23,42,.08), inset 0 1px 0 rgba(255,255,255,.7);
}
body.light .searchbox:focus-within{ border-color:#4f46e5; box-shadow:0 12px 34px rgba(79,70,229,.14); }
body.light .searchbox input{ color:#0f172a; }
body.light .searchbox input::placeholder{ color:#94a3b8; }
body.light .searchbox .ico{ color:#94a3b8; }
body.light .stats b{ color:#0f172a; } body.light .stats span{ color:#5b6b86; }
body.light .cat{ background:#fff; border:1px solid rgba(15,23,42,.1); color:#475569; }
body.light .cat:hover{ border-color:#c7d2fe; color:#4f46e5; background:#fff; }
body.light .cat.on{ background:#4f46e5; border-color:#4f46e5; color:#fff; box-shadow:0 4px 12px rgba(79,70,229,.25); }
body.light .count{ color:#64748b; }
body.light .sortsel{ background:#fff; border:1px solid rgba(15,23,42,.12); color:#475569; }
body.light .sortsel option{ background:#fff; color:#0f172a; }
body.light .card{
  background:#fff; border:1px solid rgba(15,23,42,.09);
  box-shadow:0 8px 24px rgba(15,23,42,.06), inset 0 1px 0 rgba(255,255,255,.7);
}
body.light .card:hover{ border-color:#c7d2fe; box-shadow:0 18px 40px rgba(15,23,42,.1); }
body.light .cinfo h3{ color:#0f172a; } body.light .cinfo p{ color:#64748b; }
body.light .logowrap{ background:#f1f5f9; border:1px solid rgba(15,23,42,.09); box-shadow:none; }
body.light .hot{ background:#fef3c7; color:#b45309; border:1px solid #fde68a; }
body.light .price.free{ background:#dcfce7; color:#15803d; border-color:transparent; }
body.light .price.freemium{ background:#dbeafe; color:#1d4ed8; border-color:transparent; }
body.light .price.paid{ background:#fef3c7; color:#b45309; border-color:transparent; }
body.light .catname{ color:#94a3b8; }
body.light .visit{ color:#4f46e5; } body.light .visit:hover{ color:#4338ca; }
body.light .review{ color:#8b5cf6; }
body.light .empty{ color:#64748b; }
body.light .totd-card{
  background:linear-gradient(#fff,#fff) padding-box,linear-gradient(135deg,#f59e0b,#8b5cf6) border-box;
  box-shadow:0 16px 44px rgba(245,158,11,.14);
}
body.light .totd-card .tinfo h3{ color:#0f172a; } body.light .totd-card .tinfo p{ color:#64748b; }
body.light details.qa{ background:#fff; border:1px solid rgba(15,23,42,.09); box-shadow:none; }
body.light details.qa summary{ color:#0f172a; } body.light details.qa summary::after{ color:#4f46e5; }
body.light details.qa .a{ color:#64748b; } body.light .faq h2{ color:#0f172a; } body.light .faq .sub{ color:#64748b; }
body.light .cta{
  background:linear-gradient(135deg,#312e81,#4f46e5 60%,#7c3aed) !important;
  border:none; box-shadow:0 18px 50px rgba(79,70,229,.3);
}
body.light footer{ background:#fff !important; border-top:1px solid rgba(15,23,42,.09); }
body.light .fin h4{ color:#94a3b8; } body.light .fin a{ color:#475569; }
body.light .fin a:hover{ color:#4f46e5; } body.light .fin .about{ color:#64748b; }
body.light .copy{ border-top:1px solid rgba(15,23,42,.09); color:#94a3b8; }
body.light .drawer{ background:#fff !important; border-left:1px solid rgba(15,23,42,.09); }
body.light .drawer-head{ border-bottom:1px solid rgba(15,23,42,.09); }
body.light .dclose{ background:#f1f5f9; color:#0f172a; }
body.light .drawer-links a{ color:#0f172a; } body.light .drawer-links a:hover{ background:#f1f5f9; }
body.light .sec{ background:#fff; border:1px solid rgba(15,23,42,.09); box-shadow:0 14px 40px rgba(15,23,42,.06); }
body.light .sec h2{ color:#0f172a; } body.light .sec p, body.light .sec li{ color:#475569; }
body.light .altcard{ background:#fbfbff; border:1px solid rgba(15,23,42,.09); }
body.light .altcard b{ color:#0f172a; } body.light .altcard span{ color:#64748b; } body.light .altcard em{ color:#4f46e5; }
body.light .bdg{ background:#eef2ff; color:#4f46e5; border:1px solid #c7d2fe; }
body.light .bdg.free{ background:#ecfdf5; color:#059669; border-color:#a7f3d0; }
body.light .bdg.paid{ background:#fef3c7; color:#b45309; border-color:#fde68a; }
body.light .crumbs{ color:#94a3b8; }
body.light .duel, body.light .tcard, body.light .spectable, body.light .verdict, body.light .pick, body.light .picker,
body.light .builder .panel, body.light .panel{
  background:#fff; border:1px solid rgba(15,23,42,.09); box-shadow:0 14px 40px rgba(15,23,42,.06);
}
body.light .abtn{ background:#fff; border:1px solid rgba(15,23,42,.12); color:#0f172a; }
body.light .field input[type="text"], body.light .field textarea, body.light .field select,
body.light .builder input[type="text"], body.light .builder textarea, body.light .builder select,
body.light .cform input, body.light .cform textarea, body.light .cform select{
  background:#fff; border:1px solid rgba(15,23,42,.14); color:#0f172a;
}
body.light .chip{ background:#fff; border:1px solid rgba(15,23,42,.12); color:#475569; }
body.light .outbox{ background:#f8fafc; border:1px solid rgba(15,23,42,.12); color:#0f172a; }
body.light #aichat-panel{ background:#fff; border:1px solid #e5e9f2; box-shadow:0 30px 80px rgba(15,23,42,.22); }
body.light #aichat-msgs{ background:#f8fafc; }
body.light .aichat-m.ai{ background:#fff; border:1px solid #e5e9f2; color:#1e293b; }
body.light .aichat-m.ai b, body.light .aichat-m.ai strong{ color:#0f172a; }
body.light .aichat-m.ai code{ background:#eef2ff; color:#4f46e5; }
body.light .aichat-m.ai a{ color:#6d28d9; }
body.light .aichat-tp{ background:#fff; border:1px solid #e5e9f2; }
body.light .aichat-sugs{ background:#f8fafc; border-top:1px solid #eef1f6; }
body.light .aichat-sug{ background:#fff; border:1px solid #e5e9f2; color:#475569; }
body.light .aichat-in{ background:#fff; border-top:1px solid #eef1f6; }
body.light #aichat-inp{ background:#f8fafc; border:1.5px solid #e5e9f2; color:#0f172a; }
body.light ::-webkit-scrollbar-track{ background:#eef1f6; }
body.light ::-webkit-scrollbar-thumb{ background:#c3cbdd; border:2px solid #eef1f6; }

/* ============ MOBILE REFINEMENTS ============ */
@media(max-width:720px){
  body > nav{ margin:8px 10px 0; top:8px; border-radius:16px; }
  .navin{ height:60px; }
  .hero{ padding-top:56px !important; }
  body::before{
    background:
      radial-gradient(420px 300px at 10% -4%, rgba(99,102,241,.14), transparent 62%),
      radial-gradient(520px 360px at 90% 4%, rgba(139,92,246,.09), transparent 62%);
  }
  .card{ -webkit-backdrop-filter:blur(12px); backdrop-filter:blur(12px); }
}
/* Kill hover-lift on touch (cards keep tap feedback only) */
@media(hover:none){
  .card:hover{ transform:none; }
}

/* ============ REDUCED MOTION ============ */
@media(prefers-reduced-motion:reduce){
  *, *::before, *::after{
    animation-duration:.001s !important; animation-iteration-count:1 !important;
    transition-duration:.001s !important;
  }
  .card{ will-change:auto; }
}