:root{
  --bg:#070b16;
  --panel:rgba(255,255,255,.06);
  --text:#eaf0ff;
  --muted:rgba(234,240,255,.72);
  --line:rgba(255,255,255,.12);
  --shadow:0 30px 80px rgba(0,0,0,.45);
  --radius:18px;
}
*{box-sizing:border-box}
body{
  margin:0;
  font-family:system-ui,-apple-system,"Segoe UI",Roboto,Arial;
  color:var(--text);
  background:linear-gradient(180deg,#050814,#070b16 40%,#050814);
}
.container{max-width:1100px;margin:0 auto;padding:24px}
.nav{
  display:flex;justify-content:space-between;align-items:center;gap:12px;
  padding:12px 14px;border:1px solid var(--line);
  background:rgba(255,255,255,.04);
  border-radius:999px;
}
.brand{display:flex;align-items:center;gap:10px}
.brand-name{font-weight:800}
.badge{font-size:12px;color:var(--muted);border:1px solid var(--line);padding:6px 10px;border-radius:999px}
.nav-actions{display:flex;gap:10px}
.btn{
  border:1px solid var(--line);
  background:rgba(255,255,255,.06);
  color:var(--text);
  padding:10px 14px;border-radius:12px;
  cursor:pointer;
}
.btn.primary{
  border-color:rgba(91,231,196,.35);
  background:rgba(91,231,196,.12);
}
.hero{display:grid;grid-template-columns:1.2fr .8fr;gap:16px;margin-top:16px}
@media(max-width:900px){.hero{grid-template-columns:1fr}}
.card{
  border:1px solid var(--line);
  background:rgba(255,255,255,.04);
  border-radius:var(--radius);
  padding:18px;
  box-shadow:var(--shadow);
}
.h-title{margin:0 0 8px;font-size:26px}
.h-sub{margin:0 0 12px;color:var(--muted)}
.form{display:grid;gap:10px;margin-top:10px}
input{
  padding:10px 12px;border-radius:12px;
  border:1px solid var(--line);
  background:rgba(0,0,0,.18);
  color:var(--text);
}
pre{
  background:rgba(0,0,0,.20);
  border:1px solid var(--line);
  padding:10px;border-radius:12px;
  overflow:auto;
}
.tabs{display:flex;gap:10px;margin-top:10px}
.small{font-size:12px;color:var(--muted)}
.toast{
  position:fixed;left:50%;bottom:20px;transform:translateX(-50%);
  background:rgba(0,0,0,.7);border:1px solid var(--line);
  padding:10px 14px;border-radius:12px;opacity:0;pointer-events:none;
  transition:.2s opacity;
}
.toast.show{opacity:1}