:root{
  --bg: #0b1020;
  --bg-soft: #10162a;
  --card: #0e1326;
  --ink: #e7f0ff;
  --ink-dim: #a6b5d1;
  --brand: #3DD6FF;
  --brand-2: #7C4DFF;
  --success: #10b981;
  --danger: #ef4444;
  --muted: #5f6b88;
}
*{ box-sizing:border-box; }
html, body {
  background: linear-gradient(160deg, var(--bg), #0c1429 60%, #0a0f1c);
  color: var(--ink);
  font-family: 'Poppins', system-ui, -apple-system, Segoe UI, Roboto, 'Helvetica Neue', Arial, 'Noto Sans', 'Apple Color Emoji', 'Segoe UI Emoji';
  min-height: 100%;
}
a { color: var(--brand); }
.navbar {
  background: rgba(13,19,40,.6);
  backdrop-filter: blur(8px);
  border-bottom: 1px solid rgba(255,255,255,.06);
}
.logo-badge{
  display:inline-flex; align-items:center; justify-content:center;
  width:40px; height:40px; border-radius:12px;
  background: radial-gradient(100% 100% at 0% 0%, var(--brand) 0%, var(--brand-2) 100%);
  color:#0b1020; font-weight:800;
  box-shadow: 0 8px 30px rgba(61,214,255,.3);
}
.hero{
  padding: 72px 0 24px;
  background:
    radial-gradient(900px 260px at 10% -10%, rgba(61,214,255,.08), transparent 60%),
    radial-gradient(900px 260px at 90% -10%, rgba(124,77,255,.09), transparent 60%);
}
.hero h1{ font-weight:800; letter-spacing:.5px; }
.btn-brand{
  background: linear-gradient(135deg, var(--brand), var(--brand-2));
  color:#00131f; border:none; font-weight:700;
  box-shadow:0 8px 22px rgba(61,214,255,.25);
}
.btn-brand:hover{ filter:brightness(1.05); color:#00131f; }
.card{
  background: linear-gradient(180deg, var(--card), #0c1324);
  border:1px solid rgba(255,255,255,.06);
  border-radius:16px; color:var(--ink);
  box-shadow: 0 10px 40px rgba(0,0,0,.35);
}
.card .card-header{ border-bottom:1px solid rgba(255,255,255,.06); }
.muted{ color: var(--ink-dim); }
pre, code {
  color:#e8f2ff; background:#0a0f1d; border:1px solid rgba(255,255,255,.06);
  border-radius:12px; padding:16px; display:block; white-space:pre-wrap; word-wrap:break-word;
}
.badge-soft{ background: rgba(61,214,255,.12); color: var(--brand); border:1px solid rgba(61,214,255,.2); }
footer{ color:var(--muted); }
.form-control, .form-select, .input-group-text{
  background:#0a1020; border:1px solid rgba(255,255,255,.12); color:var(--ink);
}
.form-control:focus{ border-color:var(--brand); box-shadow: 0 0 0 .25rem rgba(61,214,255,.15); }
.table{ color:var(--ink); }
.table thead{ color:#a6b5d1; }
.copy-btn{ cursor:pointer; }