:root{
  --bg1:#070a12;
  --bg2:#0b1530;
  --card:rgba(255,255,255,.06);
  --border:rgba(255,255,255,.10);
  --text:#eaf0ff;
  --muted:rgba(234,240,255,.75);
  --accent:#2a6df4;
  --accent2:#7c4dff;

  --danger:rgba(255,77,77,.14);
  --dangerBorder:rgba(255,77,77,.35);

  --ok:rgba(77,255,180,.12);
  --okBorder:rgba(77,255,180,.30);

  --shadow:0 18px 50px rgba(0,0,0,.35);
  --radius:18px;
}

/* Reset */
*{ box-sizing:border-box }
html,body{ height:100% }

body{
  margin:0;
  font-family: system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif;
  color:var(--text);
  background:
    radial-gradient(1200px 600px at 10% 10%, rgba(124,77,255,.25), transparent 55%),
    radial-gradient(900px 600px at 90% 20%, rgba(42,109,244,.25), transparent 55%),
    linear-gradient(160deg, var(--bg1), var(--bg2));
}

a{ color:#9dc2ff; text-decoration:none }
a:hover{ text-decoration:underline }

/* Layout */
.container{
  max-width:980px;
  margin:0 auto;
  padding:24px 16px 40px;
}

.grid{
  display:grid;
  grid-template-columns:1fr;
  gap:14px;
}

@media (min-width:860px){
  .grid{ grid-template-columns:1.25fr .75fr; }
}

/* Header */
.topbar{
  display:flex;
  align-items:center;
  justify-content:space-between;
  margin-bottom:14px;
  gap:12px;
}

.brand{
  display:flex;
  align-items:center;
  gap:10px;
  font-weight:800;
  letter-spacing:.2px;
}

.badge{
  font-size:12px;
  padding:4px 10px;
  border-radius:999px;
  background:rgba(255,255,255,.08);
  border:1px solid rgba(255,255,255,.10);
  color:var(--muted);
}

/* Cards */
.card{
  background:var(--card);
  border:1px solid var(--border);
  border-radius:var(--radius);
  box-shadow:var(--shadow);
  backdrop-filter: blur(10px);
  padding:18px;
}

/* Typography */
h1{
  font-size:20px;
  margin:0 0 12px;
}
p{ margin:8px 0; color:var(--muted); line-height:1.55 }
.small{ font-size:12px; color:var(--muted) }

hr{
  border:0;
  border-top:1px solid rgba(255,255,255,.10);
  margin:16px 0;
}

/* Forms */
label{
  display:block;
  font-size:13px;
  color:var(--muted);
  margin:12px 0 6px;
}

input, select{
  width:100%;
  padding:12px;
  border-radius:14px;
  border:1px solid rgba(255,255,255,.14);
  background:rgba(5,10,25,.45);
  color:var(--text);
  outline:none;
}

input::placeholder{ color:rgba(234,240,255,.45) }

input:focus, select:focus{
  border-color:rgba(42,109,244,.7);
  box-shadow:0 0 0 4px rgba(42,109,244,.18);
}

button{
  width:100%;
  margin-top:14px;
  padding:12px;
  border-radius:14px;
  border:0;
  cursor:pointer;
  font-weight:750;
  color:white;
  background:linear-gradient(90deg, var(--accent), var(--accent2));
  box-shadow:0 12px 30px rgba(42,109,244,.22);
}

button:hover{ filter:brightness(1.05) }
button:active{ transform:translateY(1px) }

.note{
  font-size:12px;
  color:var(--muted);
  margin-top:10px;
}

/* Alerts */
.error, .ok{
  border-radius:14px;
  padding:12px;
  margin:12px 0;
  font-size:13px;
}

.error{
  background:var(--danger);
  border:1px solid var(--dangerBorder);
}

.ok{
  background:var(--ok);
  border:1px solid var(--okBorder);
}

/* Key/Value box */
.kv{
  display:grid;
  grid-template-columns:1fr auto;
  gap:6px 12px;
  padding:12px;
  border-radius:14px;
  border:1px solid rgba(255,255,255,.10);
  background:rgba(0,0,0,.12);
}

.kv div:nth-child(odd){ color:var(--muted) }
.kv div:nth-child(even){ font-weight:700 }

/* Code blocks */
code{
  display:block;
  white-space:normal;
  word-break:break-word;
  padding:10px 12px;
  border-radius:12px;
  background:rgba(0,0,0,.20);
  border:1px solid rgba(255,255,255,.10);
  color:rgba(234,240,255,.90);
  margin-top:8px;
}

/* Sidebar steps */
.h2{
  font-size:13px;
  color:var(--muted);
  text-transform:uppercase;
  letter-spacing:.12em;
  margin:14px 0 8px;
}

.steps{
  display:flex;
  flex-direction:column;
  gap:10px;
  margin-top:10px;
}

.step{
  display:flex;
  gap:10px;
  align-items:flex-start;
  padding:12px;
  border-radius:14px;
  border:1px solid rgba(255,255,255,.10);
  background:rgba(0,0,0,.12);
  opacity:.55;
}

.step.active{
  opacity:1;
  background:linear-gradient(90deg, rgba(42,109,244,.22), rgba(124,77,255,.22));
  border-color:rgba(42,109,244,.45);
  box-shadow:0 8px 24px rgba(42,109,244,.28);
}

.step.done{
  opacity:.9;
  background:rgba(77,255,180,.16);
  border-color:rgba(77,255,180,.35);
}

.step .num{
  width:28px;
  height:28px;
  border-radius:999px;
  display:flex;
  align-items:center;
  justify-content:center;
  font-weight:800;
  background:rgba(255,255,255,.12);
  border:1px solid rgba(255,255,255,.25);
  flex:0 0 auto;
}

.step.active .num{
  background:linear-gradient(90deg,var(--accent),var(--accent2));
  border:none;
}

.step.done .num{
  background:rgba(77,255,180,.35);
  border:none;
}

.step .title{ font-weight:800 }
.step .desc{
  margin-top:2px;
  font-size:12px;
  color:var(--muted);
  line-height:1.45;
}

/* Pills */
.pills{
  display:flex;
  flex-wrap:wrap;
  gap:8px;
  margin-top:10px;
}

.pill{
  font-size:12px;
  padding:6px 10px;
  border-radius:999px;
  background:rgba(255,255,255,.08);
  border:1px solid rgba(255,255,255,.10);
  color:var(--muted);
}

/* Hide sidebar on mobile */
@media (max-width:859px){
  .side-steps{ display:block }
}

/* Mobile touch optimization */
@media (max-width:520px){
  .container{ padding:18px 12px 36px }
  .card{ padding:16px }
  input, select, button{ padding:14px 12px }
  h1{ font-size:18px }
}

/* Desktop spacing */
@media (min-width:520px){
  .container{ padding:32px 18px 60px }
  .card{ padding:22px }
  h1{ font-size:22px }
}