:root{
  --bg:#090a0f; --bg2:#0e1018; --grid:#141820; --text:#e9f0ff; --muted:#a6b4c7;
  --neon:#00ff9d; --cyan:#00e5ff; --pink:#ff47d2; --vio:#a072ff; --gold:#ffdc5e;
  --panel:rgba(255,255,255,.06); --border:rgba(255,255,255,.12)
}
*{box-sizing:border-box} html,body{margin:0;min-height:100%} body{
  color:var(--text);
  background:
   radial-gradient(900px 700px at 110% -20%, rgba(160,114,255,.10), transparent 60%),
   radial-gradient(800px 900px at -10% 110%, rgba(255,71,210,.10), transparent 60%),
   linear-gradient(180deg,var(--bg),var(--bg2));
  font-family:Inter,system-ui,Segoe UI,Roboto,Helvetica,Arial,sans-serif; line-height:1.65
}
.neo-grid{position:fixed;inset:0;pointer-events:none;opacity:.18;z-index:0;
  background-image:linear-gradient(var(--grid) 1px,transparent 1px),
                   linear-gradient(90deg,var(--grid) 1px,transparent 1px);
  background-size:40px 40px,40px 40px; mask-image:radial-gradient(70% 70% at 50% 50%, black, transparent 90%)
}
.wrap{max-width:1240px;margin:0 auto;padding:0 18px;position:relative;z-index:1}
.row{display:flex;align-items:center;gap:12px}.grow{flex:1}
.grid-2{display:grid;grid-template-columns:1fr 1fr;gap:24px}
.grid-3{display:grid;grid-template-columns:1fr 1fr 1fr;gap:24px}
.grid-4{display:grid;grid-template-columns:repeat(4,1fr);gap:24px}
@media(max-width:1024px){.grid-4{grid-template-columns:1fr 1fr}.grid-2,.grid-3{grid-template-columns:1fr}}
.hdr{position:sticky;top:0;background:rgba(9,10,15,.85);backdrop-filter:blur(8px);border-bottom:1px solid var(--border);z-index:20}
.hdr-row{padding:12px 0}
.brand{gap:10px;text-decoration:none} .brand .frog{height:40px;width:40px;border-radius:12px;border:1px solid var(--border) }
.brandname{font-weight:900;letter-spacing:.4px;background:linear-gradient(90deg,var(--neon),var(--cyan),var(--pink));-webkit-background-clip:text;color:transparent}
.nav a{color:#cfe4ff;margin-right:16px;text-decoration:none}.nav a:hover{color:#fff}
.badge{display:inline-flex;align-items:center;gap:8px;border:1px solid var(--border);border-radius:999px;padding:4px 10px;font-size:.75rem;background:rgba(255,255,255,.06)}
.btn{padding:11px 15px;border-radius:12px;border:1px solid var(--border);cursor:pointer;color:#000;background:#fff;transition:transform .05s, box-shadow .2s}
.btn:active{transform:translateY(1px)}
.btn.primary{background:linear-gradient(180deg,var(--cyan),#7df2ff);box-shadow:0 8px 24px rgba(0,229,255,.28)}
.btn.neon{background:linear-gradient(180deg,#baffdc,var(--neon));color:#050a08;box-shadow:0 10px 28px rgba(0,255,157,.28)}
.btn.pink{background:linear-gradient(180deg,#ffc9f2,var(--pink)); color:#12040f; box-shadow:0 10px 28px rgba(255,71,210,.28)}
.btn.ghost{background:transparent;color:#e9f0ff;border:1px dashed var(--border)}
.input,select,textarea{width:100%;padding:11px 12px;border-radius:11px;border:1px solid var(--border);background:rgba(255,255,255,.04);color:#e9f0ff}
.input.slim{padding:8px 10px}
.card{background:var(--panel);border:1px solid var(--border);border-radius:18px;padding:16px;box-shadow:0 12px 48px rgba(0,0,0,.25)}
.hero{padding:52px 0 22px 0}
h1,h2,h3{margin:0 0 8px 0}
h1.neo{font-size:48px;line-height:1.05;background:linear-gradient(90deg,var(--neon),var(--cyan),var(--pink));-webkit-background-clip:text;color:transparent}
.small{font-size:.86rem}.muted{color:var(--muted)}.strong{font-weight:800}
.hero-img{border-radius:18px;border:1px solid var(--border);background:linear-gradient(180deg,rgba(255,255,255,.04),rgba(255,255,255,.02));overflow:hidden}
.hero-img img{width:100%;display:block}
.kbd{padding:2px 6px;border-radius:6px;border:1px solid var(--border);background:rgba(255,255,255,.08);font-size:.75rem}
.ftr{margin-top:36px;padding:24px 0;border-top:1px solid var(--border)}
.toast{position:fixed;right:16px;bottom:16px;background:rgba(0,0,0,.85);color:#fff;padding:10px 14px;border-radius:12px;border:1px solid var(--border);z-index:100;display:none}
.table{width:100%;border:1px solid var(--border);border-radius:12px;overflow:hidden}
.table th{background:rgba(255,255,255,.06);font-size:.8rem;color:#9ca3af;padding:8px;text-align:left}
.table td{border-top:1px solid var(--border);padding:8px;font-size:.95rem}
.tag{display:inline-block;border:1px solid var(--border);padding:2px 8px;border-radius:999px;font-size:.75rem;margin:2px;background:rgba(255,255,255,.06)}
.hide{display:none}