:root{
  --bg:#0b0f14; --card:#121826; --muted:#9aa4b2; --text:#e6edf3; --accent:#7dd3fc; --good:#34d399; --warn:#fbbf24; --bad:#fb7185;
  --border: rgba(255,255,255,.10);
  --shadow: 0 12px 30px rgba(0,0,0,.35);
  --radius: 18px;
  --mono: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;
  --sans: ui-sans-serif, system-ui, -apple-system, Segoe UI, Roboto, Helvetica, Arial, "Apple Color Emoji","Segoe UI Emoji";
}
*{box-sizing:border-box}
body{margin:0; font-family:var(--sans); background:radial-gradient(1200px 700px at 30% 10%, rgba(125,211,252,.12), transparent 55%), var(--bg); color:var(--text);}
a{color:var(--accent); text-decoration:none}
a:hover{text-decoration:underline}
.wrap{max-width:980px; margin:0 auto; padding:28px 18px 60px;}
.header{display:flex; gap:14px; align-items:center; justify-content:space-between; margin-bottom:18px;}
.brand{display:flex; gap:12px; align-items:center}
.logo{width:42px; height:42px; border-radius:12px; background:linear-gradient(135deg, rgba(125,211,252,.9), rgba(52,211,153,.7)); box-shadow:var(--shadow)}
h1{font-size:22px; margin:0}
.tag{color:var(--muted); font-size:13px; margin-top:3px}
.card{background:rgba(18,24,38,.78); border:1px solid var(--border); border-radius:var(--radius); box-shadow:var(--shadow); padding:18px; margin-top:14px; backdrop-filter: blur(8px);}
.grid{display:grid; gap:14px}
@media(min-width:820px){ .grid{grid-template-columns: 1.2fr .8fr} }
.kv{display:grid; gap:10px}
.kv .row{display:flex; justify-content:space-between; gap:10px; padding:10px 12px; border:1px solid var(--border); border-radius:14px; background:rgba(0,0,0,.12);}
.kv .row .k{color:var(--muted); font-size:13px}
.kv .row .v{font-family:var(--mono); font-size:13px; text-align:right}
.pill{display:inline-flex; align-items:center; gap:8px; padding:7px 10px; border-radius:999px; border:1px solid var(--border); background:rgba(0,0,0,.18); font-size:13px}
.dot{width:10px; height:10px; border-radius:50%}
.dot.good{background:var(--good)} .dot.warn{background:var(--warn)} .dot.bad{background:var(--bad)}
.small{color:var(--muted); font-size:13px; line-height:1.45}
.btns{display:flex; flex-wrap:wrap; gap:10px; margin-top:10px}
.btn{display:inline-flex; align-items:center; justify-content:center; padding:10px 12px; border-radius:14px; border:1px solid var(--border); background:rgba(0,0,0,.18); color:var(--text); font-size:14px}
.btn:hover{background:rgba(255,255,255,.06); text-decoration:none}
hr{border:none; border-top:1px solid var(--border); margin:14px 0}
.timeline{display:grid; gap:10px; margin-top:10px}
.step{display:flex; gap:10px; align-items:flex-start; padding:10px 12px; border-radius:14px; border:1px solid var(--border); background:rgba(0,0,0,.12);}
.step .t{font-size:14px; margin:0}
.step .m{color:var(--muted); font-size:13px; margin-top:4px}
.badge{font-family:var(--mono); font-size:12px; color:rgba(230,237,243,.92); padding:3px 8px; border-radius:999px; border:1px solid var(--border); background:rgba(255,255,255,.06)}
.footer{margin-top:18px; color:var(--muted); font-size:12px}
code{font-family:var(--mono); font-size:12px; background:rgba(255,255,255,.06); padding:2px 6px; border-radius:10px; border:1px solid var(--border)}
input{outline:none}