*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}
/* Dark theme (default) */
:root,[data-theme="dark"]{
  --accent:#6d28d9;--accent-dark:#5b21b6;--accent-light:#c4b5fd;
  --bg:#0f0f0f;--bg2:#1a1a1a;--bg3:#242424;
  --card:#1e1e1e;--border:#2e2e2e;
  --text:#f5f5f5;--muted:#888;--subtle:#555;
  --danger:#ef4444;--success:#22c55e;--gold:#f59e0b;
  --shadow:rgba(0,0,0,0.4);
}
/* Light theme */
[data-theme="light"]{
  --accent:#6d28d9;--accent-dark:#5b21b6;--accent-light:#6d28d9;
  --bg:#f8f8f8;--bg2:#ffffff;--bg3:#f0f0f0;
  --card:#ffffff;--border:#e0e0e0;
  --text:#111111;--muted:#666666;--subtle:#999999;
  --danger:#dc2626;--success:#16a34a;--gold:#d97706;
  --shadow:rgba(0,0,0,0.08);
}
body{font-family:-apple-system,BlinkMacSystemFont,'Segoe UI',sans-serif;background:var(--bg);color:var(--text);min-height:100vh}
nav{padding:.9rem 2rem;background:var(--bg);border-bottom:1px solid var(--border);display:flex;align-items:center;justify-content:space-between;position:sticky;top:0;z-index:100;backdrop-filter:blur(8px)}
.logo{font-size:1.25rem;font-weight:800;letter-spacing:-.03em;text-decoration:none;color:var(--text);display:flex;align-items:center;gap:8px}
.logo-mark{background:var(--accent);color:#fff;font-size:.7rem;font-weight:700;padding:2px 7px;border-radius:6px}
.logo-dot{color:var(--accent)}
.nav-right{display:flex;align-items:center;gap:10px}
.nav-right a{font-size:.85rem;color:var(--muted);text-decoration:none;transition:color .15s}
.nav-right a:hover{color:var(--text)}
[data-theme="light"] .nav-right a{color:var(--muted)}
[data-theme="light"] .btn-primary{color:#fff !important}
[data-theme="light"] .btn-ghost{color:var(--text)}
[data-theme="light"] nav{background:#fff;border-bottom:1px solid #e0e0e0}
.btn{display:inline-flex;align-items:center;justify-content:center;padding:.6rem 1.25rem;border-radius:10px;font-size:.875rem;font-weight:600;cursor:pointer;text-decoration:none;transition:all .15s;border:none;white-space:nowrap;min-height:40px}
.theme-toggle{background:none;border:1px solid var(--border);border-radius:8px;width:34px;height:34px;cursor:pointer;font-size:1rem;display:flex;align-items:center;justify-content:center;transition:all .15s;flex-shrink:0}
.theme-toggle:hover{border-color:var(--accent);background:var(--bg3)}
.btn-primary{background:var(--accent);color:#fff}.btn-primary:hover{background:var(--accent-dark)}
.btn-ghost{background:none;border:1px solid var(--border);color:var(--muted)}.btn-ghost:hover{border-color:var(--accent);color:var(--text)}
.btn-gold{background:var(--gold);color:#111}.btn-gold:hover{background:#d97706}
.btn-sm{padding:.4rem .9rem;font-size:.8rem;min-height:34px}
.btn-full{width:100%;display:flex}
.btn:disabled{opacity:.5;cursor:not-allowed}
footer{text-align:center;padding:2rem 1.5rem;font-size:.78rem;color:var(--subtle);border-top:1px solid var(--border);margin-top:2rem;line-height:1.8}
footer strong{color:var(--accent-light)}
footer a{color:var(--subtle);text-decoration:none}
footer a:hover{color:var(--muted)}
.overlay{display:none;position:fixed;inset:0;background:rgba(0,0,0,.7);z-index:200;align-items:flex-end;justify-content:center;padding:0;overflow-y:auto}
.overlay.show{display:flex}
.modal{background:var(--card);border:1px solid var(--border);border-top-left-radius:16px;border-top-right-radius:16px;padding:2rem;width:100%;max-width:100%;text-align:center;max-height:90vh;overflow-y:auto;margin-top:auto}
.modal.wide{text-align:left}
.modal h3{font-size:.95rem;font-weight:700;margin-bottom:1rem;color:var(--text)}
.modal img{width:200px;height:200px;border:1px solid var(--border);border-radius:8px;margin-bottom:1rem;background:#fff}
.mbtns{display:flex;gap:8px;justify-content:center;margin-top:1rem}
@media(min-width:641px){
  .overlay{align-items:center;padding:1rem}
  .modal{border-radius:16px;max-width:340px;width:100%;margin-top:0}
  .modal.wide{max-width:500px}
}
input[type=text],input[type=email],input[type=password],input[type=url],input[type=number]{width:100%;padding:.7rem 1rem;border:1px solid var(--border);border-radius:10px;font-size:16px;outline:none;background:var(--bg2);color:var(--text);transition:border-color .15s;-webkit-appearance:none}
input:focus{border-color:var(--accent);background:var(--bg3)}
input::placeholder{color:var(--subtle)}
input:disabled{opacity:.4;cursor:not-allowed}
.fg{margin-bottom:1rem}
label{display:block;font-size:.78rem;font-weight:600;color:var(--muted);margin-bottom:5px;text-transform:uppercase;letter-spacing:.04em}
.info-icon{font-size:.8rem;cursor:pointer;color:var(--muted);user-select:none;vertical-align:middle}
.info-icon:hover{color:var(--accent-light)}
.tip{display:none;font-size:.78rem;color:var(--muted);background:var(--bg3);border:1px solid var(--border);border-radius:8px;padding:.6rem .8rem;margin-bottom:.5rem;line-height:1.5}
.tip.show{display:block}
.tip code{color:var(--accent-light);font-size:.75rem;background:var(--bg2);padding:1px 5px;border-radius:4px}
.pro-lbl{color:var(--gold);font-size:.65rem;font-weight:700;margin-left:4px}
@media(max-width:640px){
  nav{padding:.75rem 1rem}
  .logo{font-size:1.1rem}
  .logo-mark{display:none}
  .nav-right a.btn{padding:.35rem .75rem;font-size:.78rem}
  footer{padding:1.5rem 1rem;font-size:.75rem}
}