/* Themes: set "theme" in content.js to "modern", "lab", or "classic". */
.hero-deco { display: none; }
.uicon { display: none; }
.hero-stats { display: none; }
.unit-head { display: block; }

/* ============ MODERN ============ */
body.theme-modern {
  --bg: #f4f6fb; --card: #fff; --text: #0f1b3d; --muted: #566083; --line: #e1e6f2;
  --accent: #2b59ff; --accent-soft: #e9eeff; --radius: 18px;
  font-family: "Inter", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
}
@media (prefers-color-scheme: dark) {
  html:not([data-mode="light"]) body.theme-modern { --bg: #0c1224; --card: #141b33; --text: #eaeefc; --muted: #9ba6c9; --line: #232c4d; --accent: #7f9cff; --accent-soft: #1b2548; }
}
html[data-mode="dark"] body.theme-modern { --bg: #0c1224; --card: #141b33; --text: #eaeefc; --muted: #9ba6c9; --line: #232c4d; --accent: #7f9cff; --accent-soft: #1b2548; }

body.theme-modern header.site { background: color-mix(in srgb, var(--card) 85%, transparent); backdrop-filter: blur(8px); position: sticky; top: 0; z-index: 5; }
body.theme-modern .brand { letter-spacing: -.01em; }
body.theme-modern .hero { padding: 56px 0 24px; }
body.theme-modern .hero h1 { font-size: clamp(2.2rem, 7vw, 3.6rem); letter-spacing: -.03em; line-height: 1.05; }
body.theme-modern .hero .tagline { font-size: 1.2rem; max-width: 34ch; margin-top: 12px; }
body.theme-modern .hero-stats { display: block; margin-top: 20px; font-size: .95rem; color: var(--muted); max-width: 46ch; }
body.theme-modern .hero .btn { padding: 11px 18px; border-radius: 12px; }
body.theme-modern h2.section { font-size: 1.4rem; letter-spacing: -.02em; margin-top: 44px; }
body.theme-modern .card { border-radius: var(--radius); border: 1px solid var(--line); box-shadow: 0 1px 2px rgba(15,27,61,.04), 0 8px 24px -12px rgba(15,27,61,.12); transition: transform .15s ease, box-shadow .15s ease, border-color .15s; }
body.theme-modern a.unit-card { display: block; text-decoration: none; color: inherit; padding: 20px; }
body.theme-modern a.unit-card:hover { transform: translateY(-3px); border-color: var(--accent); box-shadow: 0 14px 30px -14px rgba(43,89,255,.35); }
body.theme-modern .uicon { display: grid; place-items: center; width: 56px; height: 56px; border-radius: 14px; background: var(--accent-soft); color: var(--accent); margin-bottom: 14px; }
body.theme-modern .eyebrow { text-transform: none; letter-spacing: 0; font-size: .85rem; color: var(--muted); font-weight: 600; }
body.theme-modern .unit-card h3 { margin: 2px 0 6px; font-size: 1.15rem; letter-spacing: -.01em; }
body.theme-modern .unit-head { display: flex; gap: 16px; align-items: center; padding-top: 6px; }
body.theme-modern .unit-head .uicon { flex: none; margin: 0; }
body.theme-modern .unit-head .eyebrow { margin-top: 0; }

/* ============ LAB (graph paper) ============ */
body.theme-lab {
  --bg: #f7f9f4; --card: #fffffe; --text: #14233f; --muted: #51607c; --line: #cfd9e6;
  --accent: #1f4fd6; --accent-soft: #e6edff; --radius: 3px; --pen: #d23b2f;
  --grid: rgba(31,79,214,.10); --grid2: rgba(31,79,214,.05);
  background-color: var(--bg);
  background-image: linear-gradient(var(--grid) 1px, transparent 1px), linear-gradient(90deg, var(--grid) 1px, transparent 1px),
    linear-gradient(var(--grid2) 1px, transparent 1px), linear-gradient(90deg, var(--grid2) 1px, transparent 1px);
  background-size: 100px 100px, 100px 100px, 20px 20px, 20px 20px;
  font-family: "Atkinson Hyperlegible", "Segoe UI", system-ui, sans-serif;
}
@media (prefers-color-scheme: dark) {
  html:not([data-mode="light"]) body.theme-lab { --bg: #0d1a2e; --card: #12233c; --text: #e6eefb; --muted: #9db0cf; --line: #2a4066; --accent: #8fb0ff; --accent-soft: #1a2f55; --pen: #ff8b7e;
    --grid: rgba(143,176,255,.12); --grid2: rgba(143,176,255,.055); }
}
html[data-mode="dark"] body.theme-lab { --bg: #0d1a2e; --card: #12233c; --text: #e6eefb; --muted: #9db0cf; --line: #2a4066; --accent: #8fb0ff; --accent-soft: #1a2f55; --pen: #ff8b7e;
    --grid: rgba(143,176,255,.12); --grid2: rgba(143,176,255,.055); }

body.theme-lab header.site { background: var(--card); border-bottom: 2px solid var(--text); position: relative; }
body.theme-lab header.site::after { content: ""; position: absolute; left: 0; right: 0; bottom: -10px; height: 8px;
  background: repeating-linear-gradient(90deg, var(--text) 0 1px, transparent 1px 10px); opacity: .55; }
body.theme-lab .brand { font-family: ui-monospace, "SF Mono", Menlo, Consolas, monospace; font-size: 1.05rem; }
body.theme-lab .hero { position: relative; padding: 52px 0 24px; overflow: visible; }
body.theme-lab .hero-text { position: relative; z-index: 1; }
body.theme-lab .hero h1 { font-size: clamp(2rem, 6vw, 3.2rem); line-height: 1.08; letter-spacing: -.02em; }
body.theme-lab .hero .tagline { margin-top: 10px; max-width: 36ch; }
body.theme-lab .hero-stats { display: block; margin-top: 18px; padding-left: 12px; border-left: 3px solid var(--pen); font-size: .92rem; color: var(--muted); max-width: 46ch; }
body.theme-lab .hero-deco { display: block; position: absolute; left: 0; bottom: 0; width: 56%; height: 170px; color: var(--accent); opacity: .55; pointer-events: none; overflow: hidden; z-index: 0; }
body.theme-lab .hero-deco svg { width: 100%; height: 100%; stroke-width: 3.5; }
body.theme-lab .hero-deco text { fill: var(--pen); stroke: none; font: italic 600 40px Georgia, "Times New Roman", serif; }
body.theme-lab .hero-deco text.eq { fill: var(--muted); font-size: 16px; }
body.theme-lab .hero-deco .vec { stroke: var(--pen); }
body.theme-lab .hero-deco .ground { stroke: var(--text); opacity: .5; }
body.theme-lab .hero-deco .path-faint { opacity: .35; }
body.theme-lab .hero-deco .ball { fill: var(--pen); stroke: none; }
body.theme-lab .hero-deco .path-draw { stroke-dasharray: 1; stroke-dashoffset: 1; animation: draw 2.4s ease-out .3s forwards; }
@keyframes draw { to { stroke-dashoffset: 0; } }
body.theme-lab .hero-deco text.eq { display: none; }
@media (max-width: 760px) { body.theme-lab .hero-deco { width: 100%; height: 120px; opacity: .6; } body.theme-lab .hero { padding-bottom: 24px; } body.theme-lab .hero-deco { position: relative; margin-bottom: 8px; } }
body.theme-lab .hero .btn, body.theme-lab .btn { border-radius: 3px; border-width: 1.5px; border-color: var(--text); }
body.theme-lab .btn.primary { border-color: var(--accent); }
body.theme-lab h2.section { font-family: ui-monospace, "SF Mono", Menlo, Consolas, monospace; font-size: 1.05rem; margin-top: 40px; display: inline-block; background: var(--card); padding: 2px 10px 2px 0; border-bottom: 2px solid var(--pen); }
body.theme-lab .card { border-radius: 3px; border: 1.5px solid var(--text); box-shadow: 4px 4px 0 var(--line); }
body.theme-lab a.unit-card { display: block; position: relative; text-decoration: none; color: inherit; padding: 16px 16px 20px; transition: transform .12s ease, box-shadow .12s ease; }
body.theme-lab a.unit-card::after { content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 6px;
  background: repeating-linear-gradient(90deg, var(--text) 0 1px, transparent 1px 8px); opacity: .35; }
body.theme-lab a.unit-card:hover { transform: translate(-2px,-2px); box-shadow: 6px 6px 0 var(--accent); }
body.theme-lab .uicon { display: block; color: var(--accent); margin-bottom: 8px; }
body.theme-lab .uicon svg { stroke-width: 1.8; }
body.theme-lab .eyebrow { font-family: ui-monospace, "SF Mono", Menlo, Consolas, monospace; text-transform: none; letter-spacing: 0; color: var(--pen); font-size: .82rem; }
body.theme-lab .unit-card h3 { margin: 2px 0 6px; font-size: 1.1rem; }
body.theme-lab .unit-head { display: flex; gap: 16px; align-items: center; background: var(--card); border: 1.5px solid var(--text); box-shadow: 4px 4px 0 var(--line); padding: 14px 18px; margin-top: 8px; }
body.theme-lab .unit-head .uicon { margin: 0; flex: none; }
body.theme-lab .unit-head .eyebrow { margin-top: 0; }

@media (prefers-reduced-motion: reduce) {
  body.theme-lab .hero-deco .path-draw { animation: none; stroke-dashoffset: 0; }
  body.theme-modern .card, body.theme-lab a.unit-card { transition: none; }
}

/* ===== feature styling per theme ===== */
body.theme-lab .search input[type=search], body.theme-lab .tool-row input, body.theme-lab .tool-row select { border-radius: 3px; border-color: var(--text); }
body.theme-lab .result, body.theme-lab .quiz-q, body.theme-lab .worked { border-radius: 3px; }
body.theme-lab .result:hover { box-shadow: 3px 3px 0 var(--accent); }
body.theme-lab .rtype { font-family: ui-monospace, "SF Mono", Menlo, Consolas, monospace; color: var(--pen); }
body.theme-lab .search-label, body.theme-lab .tool h2 { font-family: ui-monospace, "SF Mono", Menlo, Consolas, monospace; }
body.theme-lab .tool { padding: 18px; }
body.theme-lab .sf-d.is-sig { background: transparent; border-bottom: 3px solid var(--pen); border-radius: 0; }
body.theme-lab .qr svg { border: 1.5px solid var(--text); border-radius: 0; }
body.theme-modern .search input[type=search] { border-radius: 14px; padding: 14px 16px; }
body.theme-modern .result { border-radius: 12px; }
body.theme-modern .tool-row input, body.theme-modern .tool-row select { border-radius: 10px; }
.unit-head { gap: 16px; }

body.theme-lab .stat, body.theme-lab .reason, body.theme-lab .quick-link, body.theme-lab .setup textarea { border-radius: 3px; }
body.theme-lab .quick-link, body.theme-lab .reason { border-color: var(--text); }
body.theme-lab .stat-n { font-family: ui-monospace, "SF Mono", Menlo, Consolas, monospace; }
body.theme-lab .mp-title, body.theme-lab .plan h2 { font-family: ui-monospace, "SF Mono", Menlo, Consolas, monospace; }
body.theme-lab .toast { border-radius: 3px; }
body.theme-lab .prefs { border-radius: 3px; }
body.theme-modern .myprog, body.theme-modern .plan { border-radius: var(--radius); }
body.theme-modern .quick-link { border-radius: 14px; }