/* =====================================================================
   ToadsHub design kit — shared look for every page.
   Use: <link rel="stylesheet" href="/toads-ui.css">  (dark by default,
   <html data-theme="light"> for light mode)
   ===================================================================== */
:root {
  --bg:#0a0f1f; --bg2:#0f1630; --panel:#131b36; --panel2:#1a2447; --line:rgba(255,255,255,.08); --line2:rgba(255,255,255,.14);
  --text:#eef2ff; --muted:#8e9bc4; --faint:#5b6690;
  --brand:#7c5cff; --brand2:#00d4ff; --pink:#ff5c8a; --lime:#a3e635; --sun:#fbbf24;
  --good:#22c55e; --ok:#f59e0b; --bad:#ef4444; --none:#26305a;
  --grad:linear-gradient(135deg, var(--brand), var(--brand2));
  --radius:18px; --shadow:0 10px 30px rgba(0,0,0,.35);
  --font:'Inter','Segoe UI',system-ui,-apple-system,Roboto,Arial,sans-serif;
}
[data-theme="light"] {
  --bg:#f4f6fc; --bg2:#eef1fa; --panel:#ffffff; --panel2:#f1f4fb; --line:rgba(15,23,42,.08); --line2:rgba(15,23,42,.14);
  --text:#0f172a; --muted:#5b6785; --faint:#94a3b8; --none:#e2e8f0; --shadow:0 10px 30px rgba(15,23,42,.08);
}
* { box-sizing:border-box; }
html, body { margin:0; }
body {
  font-family:var(--font); color:var(--text); min-height:100vh; -webkit-font-smoothing:antialiased;
  background:
    radial-gradient(1100px 560px at 0% -10%, rgba(124,92,255,.22), transparent 60%),
    radial-gradient(900px 480px at 110% -5%, rgba(0,212,255,.14), transparent 60%),
    var(--bg);
  background-attachment:fixed;
}
[data-theme="light"] body { background:radial-gradient(1100px 560px at 0% -10%, rgba(124,92,255,.10), transparent 60%), radial-gradient(900px 480px at 110% -5%, rgba(0,212,255,.10), transparent 60%), var(--bg); }
a { color:inherit; }
.hidden { display:none !important; }
.muted { color:var(--muted); }
.wrap { max-width:1180px; margin:0 auto; padding:0 18px; }

/* ---------- buttons, inputs ---------- */
.btn { display:inline-flex; align-items:center; justify-content:center; gap:8px; padding:11px 16px; border-radius:14px; border:1px solid transparent;
  font:700 14px var(--font); cursor:pointer; text-decoration:none; transition:transform .12s, filter .15s, background .15s; white-space:nowrap; color:var(--text); }
.btn:active { transform:scale(.97); }
.btn-primary { background:var(--grad); color:#fff; box-shadow:0 6px 18px rgba(124,92,255,.35); }
.btn-primary:hover { filter:brightness(1.08); }
.btn-ghost { background:var(--panel2); border-color:var(--line); }
.btn-ghost:hover { border-color:var(--line2); }
.btn-danger { background:rgba(239,68,68,.12); border-color:rgba(239,68,68,.35); color:#f87171; }
.btn-sm { padding:7px 11px; font-size:13px; border-radius:11px; }
.btn-block { width:100%; }
.icon-btn { width:40px; height:40px; border-radius:12px; display:inline-grid; place-items:center; background:var(--panel2); border:1px solid var(--line); cursor:pointer; font-size:18px; color:var(--text); text-decoration:none; }
.icon-btn:hover { border-color:var(--line2); }
.input, select.input { width:100%; padding:13px 14px; border-radius:14px; border:1px solid var(--line2); background:var(--panel2); color:var(--text); font:500 15px var(--font); outline:none; transition:border .15s, box-shadow .15s; }
.input:focus { border-color:var(--brand); box-shadow:0 0 0 4px rgba(124,92,255,.18); }
.input::placeholder { color:var(--faint); }

/* ---------- top bar ---------- */
.topbar { position:sticky; top:0; z-index:50; backdrop-filter:blur(16px); -webkit-backdrop-filter:blur(16px); background:color-mix(in srgb, var(--bg) 78%, transparent); border-bottom:1px solid var(--line); }
.topbar .wrap { display:flex; align-items:center; gap:14px; height:66px; }
.logo { display:flex; align-items:center; gap:10px; font-weight:900; font-size:20px; letter-spacing:-.3px; text-decoration:none; }
.logo .mark { width:38px; height:38px; border-radius:12px; display:grid; place-items:center; background:var(--grad); font-size:22px; box-shadow:0 6px 16px rgba(124,92,255,.4); }
.logo small { display:block; font-size:11px; font-weight:600; color:var(--muted); letter-spacing:.3px; }
.spacer { flex:1; }

/* segmented tabs */
.seg { display:inline-flex; background:var(--panel2); border:1px solid var(--line); border-radius:14px; padding:4px; gap:4px; }
.seg button { border:0; background:transparent; color:var(--muted); font:700 14px var(--font); padding:9px 16px; border-radius:10px; cursor:pointer; }
.seg button.on { background:var(--panel); color:var(--text); box-shadow:0 2px 10px rgba(0,0,0,.18); }
[data-theme="light"] .seg button.on { background:#fff; }

/* avatar + menu */
.avatar { width:40px; height:40px; border-radius:50%; overflow:hidden; display:grid; place-items:center; background:var(--grad); font-size:20px; border:2px solid var(--line2); cursor:pointer; flex:none; }
.avatar img { width:100%; height:100%; object-fit:cover; }
.avatar.lg { width:76px; height:76px; font-size:36px; border-width:3px; border-color:var(--brand); cursor:default; }
.menu { position:absolute; right:0; top:52px; min-width:240px; background:var(--panel); border:1px solid var(--line2); border-radius:16px; box-shadow:var(--shadow); padding:8px; z-index:60; }
.menu .who { padding:10px 12px 12px; border-bottom:1px solid var(--line); margin-bottom:6px; }
.menu .who b { display:block; font-size:15px; }
.menu a, .menu button { display:flex; align-items:center; gap:10px; width:100%; padding:11px 12px; border-radius:11px; border:0; background:none; color:var(--text); font:600 14px var(--font); text-decoration:none; cursor:pointer; text-align:left; }
.menu a:hover, .menu button:hover { background:var(--panel2); }
.menu .sep { height:1px; background:var(--line); margin:6px 0; }
.menu .tag { margin-left:auto; font-size:10px; font-weight:800; letter-spacing:.8px; padding:3px 7px; border-radius:6px; background:rgba(124,92,255,.18); color:#c4b5fd; }

/* ---------- cards, chips, tiles ---------- */
.card { background:var(--panel); border:1px solid var(--line); border-radius:var(--radius); padding:18px; box-shadow:var(--shadow); }
.card h2, .card h3 { margin:0 0 6px; letter-spacing:-.2px; }
.chip { display:inline-flex; align-items:center; gap:6px; padding:8px 14px; border-radius:999px; background:var(--panel2); border:1px solid var(--line); font:700 13px var(--font); color:var(--text); cursor:pointer; white-space:nowrap; }
.chip.on { background:var(--grad); color:#fff; border-color:transparent; }
.chips { display:flex; gap:8px; overflow-x:auto; scrollbar-width:none; padding:2px 0 6px; }
.chips::-webkit-scrollbar { display:none; }
.pill { display:inline-block; padding:4px 10px; border-radius:999px; font-size:11px; font-weight:800; letter-spacing:.6px; text-transform:uppercase; background:rgba(124,92,255,.16); color:#b9a8ff; }
[data-theme="light"] .pill { color:#6d4dff; }
.stat { background:var(--panel2); border:1px solid var(--line); border-radius:14px; padding:10px 14px; }
.stat b { font-size:20px; display:block; }
.stat span { font-size:12px; color:var(--muted); font-weight:600; }
.bar { height:9px; border-radius:6px; background:var(--none); overflow:hidden; }
.bar > div { height:100%; border-radius:6px; background:var(--grad); }

/* ---------- flip cards ---------- */
.flip { perspective:1400px; }
.flip .inner { position:relative; width:100%; height:100%; transition:transform .6s cubic-bezier(.2,.8,.2,1); transform-style:preserve-3d; }
.flip.flipped .inner { transform:rotateY(180deg); }
.flip .face { position:absolute; inset:0; backface-visibility:hidden; -webkit-backface-visibility:hidden; border-radius:var(--radius); overflow:hidden;
  background:var(--panel); border:1px solid var(--line); box-shadow:var(--shadow); display:flex; flex-direction:column; }
.flip .back { transform:rotateY(180deg); }
.flip .scroll { overflow:auto; flex:1; padding:16px; }
.flip-hint { font-size:11px; color:var(--faint); font-weight:700; letter-spacing:.5px; }

/* ---------- modal ---------- */
.modal { position:fixed; inset:0; z-index:100; background:rgba(5,8,20,.65); backdrop-filter:blur(6px); display:grid; place-items:center; padding:16px; }
.modal .box { width:100%; max-width:420px; background:var(--panel); border:1px solid var(--line2); border-radius:22px; padding:22px; box-shadow:var(--shadow); text-align:center; }
.modal .box h3 { margin:6px 0 8px; font-size:20px; }
.modal .box .msg { color:var(--muted); font-size:15px; margin-bottom:18px; line-height:1.45; }

/* ---------- toast ---------- */
.toast { position:fixed; left:50%; bottom:22px; transform:translateX(-50%); background:var(--panel); border:1px solid var(--line2); padding:12px 18px; border-radius:14px; box-shadow:var(--shadow); font-weight:700; z-index:120; }

@media (max-width:640px) {
  .topbar .wrap { height:60px; gap:10px; }
  .logo small { display:none; }
  .hide-sm { display:none !important; }
}
@media (min-width:641px) { .show-sm { display:none !important; } }