/* SparxSolver shared site styles (light + dark, mobile-first). */
:root {
  --bg:#0f1117; --card:#171a24; --card2:#1d2130; --border:#2a2f3d; --text:#e8eaed; --muted:#9aa0b4;
  --accent:#6c8cff; --accent-ink:#0b1020; --ok:#3dd68c; --err:#ff6b6b; --warn:#ffc107; --radius:12px;
  color-scheme: dark;
}
@media (prefers-color-scheme: light) {
  :root { --bg:#f6f7fb; --card:#ffffff; --card2:#f0f2f8; --border:#dde1ea; --text:#1b1f2a; --muted:#5b6275;
    --accent:#3b5bdb; --accent-ink:#ffffff; --ok:#14804a; --err:#c92a2a; --warn:#a86b00; color-scheme: light; }
}
.topnav { display:flex; flex-wrap:wrap; align-items:center; gap:.25rem 1rem; padding:.7rem 1.25rem; border-bottom:1px solid var(--border);
  background:var(--card); font:500 .92rem system-ui,-apple-system,Segoe UI,Roboto,sans-serif; position:sticky; top:0; z-index:20; }
.topnav a { color:var(--muted); text-decoration:none; padding:.25rem .1rem; border-bottom:2px solid transparent; }
.topnav a:hover { color:var(--text); }
.topnav a[aria-current="page"] { color:var(--text); border-bottom-color:var(--accent); }
.topnav .brand { color:var(--text); font-weight:700; margin-right:.75rem; letter-spacing:.2px; }
.topnav .spacer { flex:1; }
.site { margin:0; background:var(--bg); color:var(--text); font:15px/1.55 system-ui,-apple-system,Segoe UI,Roboto,sans-serif; }
.site main { max-width:1100px; margin:0 auto; padding:1.5rem 1.25rem 3rem; }
.site main.narrow { max-width:560px; }
.site h1 { font-size:1.6rem; margin:.2rem 0 .4rem; } .site h2 { font-size:1.15rem; margin:0 0 .75rem; } .site h3 { font-size:1rem; margin:1rem 0 .5rem; }
.site a { color:var(--accent); }
.site .muted { color:var(--muted); } .site .small { font-size:.85rem; }
.site .card { background:var(--card); border:1px solid var(--border); border-radius:var(--radius); padding:1.2rem 1.25rem; margin:0 0 1rem; }
.site .grid { display:grid; gap:1rem; grid-template-columns:repeat(auto-fit,minmax(240px,1fr)); }
.site .row { display:flex; flex-wrap:wrap; gap:.5rem; align-items:center; }
.site .stat .v { font-size:1.6rem; font-weight:700; } .site .stat .k { color:var(--muted); font-size:.8rem; text-transform:uppercase; letter-spacing:.5px; }
.site button, .site .btn { font:inherit; font-size:.9rem; border-radius:8px; border:1px solid var(--border); background:var(--card2); color:var(--text);
  padding:.45rem .85rem; cursor:pointer; text-decoration:none; display:inline-block; }
.site button:hover, .site .btn:hover { border-color:var(--accent); }
.site button.primary, .site .btn.primary { background:var(--accent); color:var(--accent-ink); border-color:var(--accent); }
.site button.danger { color:var(--err); } .site button.danger:hover { border-color:var(--err); }
.site button:disabled { opacity:.5; cursor:not-allowed; }
.site input, .site select, .site textarea { font:inherit; font-size:.92rem; background:var(--bg); color:var(--text); border:1px solid var(--border);
  border-radius:8px; padding:.45rem .6rem; min-width:0; }
.site input:focus, .site select:focus, .site button:focus-visible { outline:2px solid var(--accent); outline-offset:1px; }
.site label { font-size:.85rem; color:var(--muted); display:flex; flex-direction:column; gap:.25rem; }
.site table { width:100%; border-collapse:collapse; font-size:.88rem; }
.site th, .site td { text-align:left; padding:.5rem .6rem; border-bottom:1px solid var(--border); vertical-align:top; }
.site th { color:var(--muted); font-weight:600; font-size:.78rem; text-transform:uppercase; letter-spacing:.4px; }
.site tr.clickable { cursor:pointer; } .site tr.clickable:hover td { background:var(--card2); }
.site .table-wrap { overflow-x:auto; }
.site .badge { display:inline-block; font-size:.72rem; padding:.1rem .5rem; border-radius:999px; border:1px solid var(--border); color:var(--muted); white-space:nowrap; }
.site .badge.ok { color:var(--ok); border-color:currentColor; } .site .badge.err { color:var(--err); border-color:currentColor; }
.site .badge.warn { color:var(--warn); border-color:currentColor; } .site .badge.info { color:var(--accent); border-color:currentColor; }
.site .msg { padding:.7rem .9rem; border-radius:8px; border:1px solid var(--border); background:var(--card2); margin:.75rem 0; }
.site .msg.err { border-color:var(--err); color:var(--err); } .site .msg.ok { border-color:var(--ok); color:var(--ok); }
.site .msg:empty { display:none; }
.site code, .site .mono { font-family:ui-monospace,SFMono-Regular,Consolas,monospace; font-size:.82rem; }
.site .hero { padding:2.5rem 0 1rem; } .site .hero p { font-size:1.05rem; max-width:640px; }
.site .gbtn { min-height:44px; display:flex; justify-content:center; margin:.75rem 0; }
.site .hidden { display:none !important; }
.site dialog { background:var(--card); color:var(--text); border:1px solid var(--border); border-radius:var(--radius); max-width:min(900px,96vw); width:100%; padding:1.25rem; }
.site dialog::backdrop { background:rgba(0,0,0,.55); }
.site footer { color:var(--muted); font-size:.8rem; text-align:center; padding:1.5rem; }
@media (max-width:640px) { .site main { padding:1rem .8rem 2rem; } .site th, .site td { padding:.4rem .35rem; } .site .hide-sm { display:none; } }
/* ---- tabs, drawer, toasts, confirm modal (admin + signup) ---- */
.site .tabs { display:flex; gap:.25rem; border-bottom:1px solid var(--border); margin:0 0 1rem; overflow-x:auto; scrollbar-width:none; }
.site .tabs a, .site .tabs button { background:none; border:0; border-bottom:2px solid transparent; border-radius:0; color:var(--muted); padding:.6rem .9rem; font-weight:600; white-space:nowrap; text-decoration:none; display:inline-flex; gap:.4rem; align-items:center; }
.site .tabs a:hover, .site .tabs button:hover { color:var(--text); border-color:var(--border); }
.site .tabs [aria-selected="true"], .site .tabs [aria-current="page"] { color:var(--text); border-bottom-color:var(--accent); }
.site .count { background:var(--err); color:#fff; border-radius:999px; font-size:.7rem; min-width:1.2rem; padding:0 .35rem; line-height:1.2rem; text-align:center; }
.site .count:empty, .site .count[data-n="0"] { display:none; }
.site .toolbar { display:flex; flex-wrap:wrap; gap:.5rem; align-items:center; justify-content:space-between; margin-bottom:.75rem; }
.site .actions { display:flex; flex-wrap:wrap; gap:.5rem; }
.site dialog.drawer { margin:0 0 0 auto; height:100dvh; max-height:100dvh; max-width:min(720px,100vw); width:100%; border-radius:0; border-width:0 0 0 1px; padding:0; }
.site dialog.drawer .drawer-head { position:sticky; top:0; z-index:2; background:var(--card); border-bottom:1px solid var(--border); padding:1rem 1.25rem; display:flex; gap:.75rem; align-items:center; justify-content:space-between; }
.site dialog.drawer .drawer-body { padding:1rem 1.25rem 2rem; }
.site .section { border:1px solid var(--border); border-radius:var(--radius); padding:1rem; margin:0 0 1rem; }
.site .section h3 { margin:0 0 .6rem; font-size:.8rem; text-transform:uppercase; letter-spacing:.5px; color:var(--muted); }
.site .section.danger-zone { border-color:color-mix(in srgb, var(--err) 55%, var(--border)); }
.site .section.danger-zone h3 { color:var(--err); }
.site .kv { display:grid; grid-template-columns:repeat(auto-fit,minmax(150px,1fr)); gap:.6rem 1rem; margin-bottom:1rem; }
.site .kv .k { color:var(--muted); font-size:.75rem; text-transform:uppercase; letter-spacing:.4px; }
.site dialog.modal { max-width:min(460px,94vw); }
.site dialog.modal .actions { justify-content:flex-end; margin-top:1rem; }
.site .toasts { position:fixed; right:1rem; bottom:1rem; z-index:1000; display:flex; flex-direction:column; gap:.5rem; max-width:min(420px,calc(100vw - 2rem)); }
.site .toast { background:var(--card); border:1px solid var(--border); border-left:4px solid var(--accent); border-radius:8px; padding:.7rem .9rem; box-shadow:0 6px 24px rgba(0,0,0,.25); animation:sx-in .15s ease-out; }
.site .toast.ok { border-left-color:var(--ok); } .site .toast.err { border-left-color:var(--err); }
@keyframes sx-in { from { transform:translateY(8px); opacity:0; } to { transform:none; opacity:1; } }
.site .req { border:1px solid var(--border); border-radius:var(--radius); padding:1rem; margin:0 0 .75rem; background:var(--card); }
.site .req .reason { white-space:pre-wrap; background:var(--card2); border-radius:8px; padding:.5rem .7rem; margin:.5rem 0; font-size:.9rem; }
.site textarea { width:100%; box-sizing:border-box; resize:vertical; }
.site .stack { display:flex; flex-direction:column; gap:.75rem; }
@media (max-width:640px) { .site dialog.drawer .drawer-body, .site dialog.drawer .drawer-head { padding:.8rem; } .site .actions > * { flex:1 1 auto; } .site .toolbar > * { flex:1 1 100%; } }
.site .topnav a { color:var(--muted); } .site .topnav a:hover, .site .topnav a[aria-current="page"], .site .topnav .brand { color:var(--text); }