:root{
  --bg:#070a14;
  --panel:rgba(255,255,255,.05);
  --panel2:rgba(255,255,255,.03);
  --line:rgba(255,255,255,.10);
  --ink:#eaf0ff;
  --muted:#a7b1cf;
  --acc:#7c3aed;
  --acc2:#22c55e;
  --warn:#f59e0b;
  --bad:#ef4444;
  --radius:18px;
  --shadow: 0 18px 60px rgba(0,0,0,.55);
}
*{box-sizing:border-box}
html,body{height:100%}
body{
  margin:0;
  font-family:system-ui,-apple-system,Segoe UI,Roboto,Inter,Arial;
  color:var(--ink);
  background:
    radial-gradient(900px 500px at 15% 10%, rgba(124,58,237,.35), transparent 60%),
    radial-gradient(900px 500px at 85% 15%, rgba(34,197,94,.22), transparent 55%),
    radial-gradient(800px 420px at 55% 100%, rgba(245,158,11,.15), transparent 60%),
    linear-gradient(180deg, #050815, #070a14 30%, #070a14);
}
a{color:inherit;text-decoration:none}
.container{max-width:1100px;margin:0 auto;padding:24px}
.nav{
  display:flex;justify-content:space-between;align-items:center;
  margin-bottom:18px;gap:14px;flex-wrap:wrap
}
.brand{
  display:flex;align-items:center;gap:10px;font-weight:900;letter-spacing:.6px
}
.logo{
  width:34px;height:34px;border-radius:12px;
  background:linear-gradient(135deg, rgba(124,58,237,.9), rgba(34,197,94,.55));
  box-shadow:0 10px 30px rgba(124,58,237,.25);
}
.badge{
  font-size:12px;padding:6px 10px;border:1px solid var(--line);
  border-radius:999px;color:var(--muted);background:rgba(0,0,0,.18)
}
.card{
  position:relative;
  background:linear-gradient(180deg, rgba(255,255,255,.07), rgba(255,255,255,.03));
  border:1px solid var(--line);
  border-radius:var(--radius);
  padding:18px;
  box-shadow:var(--shadow);
  overflow:hidden;
}
.card::before{
  content:"";
  position:absolute;inset:-2px;
  background:radial-gradient(420px 180px at 15% 15%, rgba(124,58,237,.25), transparent 60%),
             radial-gradient(420px 180px at 85% 20%, rgba(34,197,94,.18), transparent 60%);
  pointer-events:none;
}
.card > *{position:relative}
.grid{display:grid;grid-template-columns:1.2fr .8fr;gap:16px}
@media(max-width:960px){.grid{grid-template-columns:1fr}}
h1{margin:0 0 10px 0;font-size:30px;line-height:1.15}
h2{margin:0 0 10px 0;font-size:16px;color:var(--muted);font-weight:700;text-transform:uppercase;letter-spacing:.08em}
p{margin:0 0 12px 0;color:var(--muted);line-height:1.55}
.small{font-size:12px}
input,select,textarea{
  width:100%;
  padding:12px 12px;
  border-radius:14px;
  border:1px solid rgba(255,255,255,.12);
  background:rgba(0,0,0,.25);
  color:var(--ink);
  outline:none;
  transition: transform .06s ease, border-color .2s ease;
}
input:focus,select:focus,textarea:focus{
  border-color:rgba(124,58,237,.55);
  box-shadow:0 0 0 4px rgba(124,58,237,.12);
}
textarea{
  min-height:260px;resize:vertical;
  font-family:ui-monospace,SFMono-Regular,Menlo,Monaco,Consolas,monospace;
  font-size:13px;line-height:1.55;
}
label{display:block;margin:12px 0 6px 0;color:var(--muted);font-size:13px}
.btn{
  display:inline-flex;align-items:center;justify-content:center;gap:8px;
  padding:10px 14px;border-radius:14px;
  border:1px solid rgba(255,255,255,.14);
  background:rgba(255,255,255,.05);
  color:var(--ink);
  cursor:pointer;
  transition: transform .06s ease, background .2s ease, border-color .2s ease;
}
.btn:hover{background:rgba(255,255,255,.07);border-color:rgba(255,255,255,.20)}
.btn:active{transform:translateY(1px)}
.btn.primary{
  border:none;
  background:linear-gradient(90deg, rgba(124,58,237,.95), rgba(34,197,94,.55));
  box-shadow:0 18px 40px rgba(124,58,237,.18);
}
.btn.danger{
  background:rgba(239,68,68,.14);
  border:1px solid rgba(239,68,68,.35)
}
.row{display:flex;gap:10px;flex-wrap:wrap;align-items:center}
hr{border:none;border-top:1px solid rgba(255,255,255,.10);margin:16px 0}
.msg{
  padding:10px 12px;border-radius:14px;border:1px solid rgba(255,255,255,.14);
  background:rgba(0,0,0,.22);color:var(--muted)
}
.msg.good{border-color:rgba(34,197,94,.35);background:rgba(34,197,94,.10);color:#d1ffe6}
.msg.bad{border-color:rgba(239,68,68,.35);background:rgba(239,68,68,.10);color:#ffd0d0}
.table{width:100%;border-collapse:separate;border-spacing:0 10px}
.table td,.table th{padding:12px 12px;border-top:1px solid rgba(255,255,255,.12);border-bottom:1px solid rgba(255,255,255,.12)}
.table tr td:first-child,.table tr th:first-child{border-left:1px solid rgba(255,255,255,.12);border-top-left-radius:14px;border-bottom-left-radius:14px}
.table tr td:last-child,.table tr th:last-child{border-right:1px solid rgba(255,255,255,.12);border-top-right-radius:14px;border-bottom-right-radius:14px}
.mono{font-family:ui-monospace,SFMono-Regular,Menlo,Monaco,Consolas,monospace}
.kbd{font-family:ui-monospace,Menlo,monospace;font-size:12px;border:1px solid rgba(255,255,255,.16);padding:2px 8px;border-radius:10px;background:rgba(0,0,0,.25);color:var(--ink)}
.footer{margin-top:22px;color:var(--muted);font-size:12px;opacity:.85}
.hero{display:flex;gap:14px;align-items:flex-start;justify-content:space-between;flex-wrap:wrap}
.hero .pill{
  padding:8px 10px;border-radius:999px;border:1px solid rgba(255,255,255,.12);
  background:rgba(0,0,0,.22);color:var(--muted);font-size:12px
}