/* ── Reset & Base ─────────────────────────────────────────────────────────── */
*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}

:root{
  --bg:#0d1117;--bg-card:#161b22;--bg-input:#0d1117;--bg-code:#010409;
  --border:#30363d;--border-focus:#58a6ff;
  --accent:#58a6ff;--accent-dim:#1f6feb;
  --green:#3fb950;--yellow:#e3b341;--red:#f85149;
  --text:#e6edf3;--text-muted:#8b949e;--text-code:#79c0ff;
  --font-sans:"Inter","Segoe UI",system-ui,sans-serif;
  --font-mono:"JetBrains Mono","Fira Code","Cascadia Code","Consolas",monospace;
  --radius:6px;--radius-lg:10px;
}

html{font-size:15px}
body{background:var(--bg);color:var(--text);font-family:var(--font-sans);line-height:1.6;min-height:100vh}

/* ── Layout ───────────────────────────────────────────────────────────────── */
.page{max-width:880px;margin:0 auto;padding:2.5rem 1.25rem 4rem}

/* ── Header ───────────────────────────────────────────────────────────────── */
header{margin-bottom:1.75rem;border-bottom:1px solid var(--border);padding-bottom:1.25rem}
.header-top{display:flex;align-items:center;gap:.6rem;margin-bottom:.3rem}
h1{font-family:var(--font-mono);font-size:1.25rem;font-weight:600;color:var(--text)}
h1 .prompt{color:var(--green);user-select:none}
h1 .cmd{color:var(--accent)}
.tagline{font-size:.8rem;color:var(--text-muted);font-family:var(--font-mono)}
.tagline .hl{color:var(--text-code)}

/* ── Card ─────────────────────────────────────────────────────────────────── */
.card{background:var(--bg-card);border:1px solid var(--border);border-radius:var(--radius-lg);padding:1.4rem;margin-bottom:1.1rem}

/* ── Form ─────────────────────────────────────────────────────────────────── */
.field{margin-bottom:.9rem}
.field:last-child{margin-bottom:0}
label{display:block;font-size:.72rem;font-family:var(--font-mono);color:var(--text-muted);margin-bottom:.3rem;text-transform:uppercase;letter-spacing:.07em}
label .req{color:var(--red);margin-left:2px}
label .opt{color:var(--text-muted);font-weight:400;text-transform:none;letter-spacing:0}

.input-wrap{position:relative;display:flex;align-items:center}
.input-prefix{position:absolute;left:.7rem;font-family:var(--font-mono);font-size:.8rem;color:var(--text-muted);pointer-events:none;user-select:none}

input[type="url"],input[type="text"],input[type="password"]{
  width:100%;background:var(--bg-input);border:1px solid var(--border);border-radius:var(--radius);
  color:var(--text);font-family:var(--font-mono);font-size:.86rem;
  padding:.5rem .75rem .5rem 2rem;outline:none;
  transition:border-color .15s,box-shadow .15s;
}
input:focus{border-color:var(--border-focus);box-shadow:0 0 0 3px rgba(88,166,255,.12)}
input::placeholder{color:var(--text-muted);opacity:.55}

.field-row{display:grid;grid-template-columns:1fr auto;gap:.75rem;align-items:end;margin-bottom:.9rem}
.field-row .field{margin-bottom:0}

/* ── Button ───────────────────────────────────────────────────────────────── */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:.4rem;background:var(--accent-dim);color:#fff;border:1px solid var(--accent);border-radius:var(--radius);font-family:var(--font-mono);font-size:.83rem;font-weight:600;padding:.5rem 1.2rem;cursor:pointer;transition:background .15s,box-shadow .15s;white-space:nowrap}
.btn:hover{background:var(--accent);box-shadow:0 0 0 3px rgba(88,166,255,.18)}
.btn:disabled{opacity:.5;cursor:not-allowed}
.btn.full{width:100%;margin-top:.4rem}
.btn-sm{font-size:.72rem;padding:.25rem .6rem;background:transparent;border:1px solid var(--border);color:var(--text-muted);border-radius:var(--radius);cursor:pointer;font-family:var(--font-mono);transition:all .12s}
.btn-sm:hover{background:var(--border);color:var(--text)}
.btn-sm.copied{border-color:var(--green);color:var(--green)}

/* ── Notice ───────────────────────────────────────────────────────────────── */
.notice{display:flex;align-items:flex-start;gap:.6rem;background:rgba(63,185,80,.08);border:1px solid rgba(63,185,80,.3);border-radius:var(--radius);padding:.65rem .9rem;font-size:.8rem;margin-top:.9rem;color:var(--green)}

/* ── Snippet panel ────────────────────────────────────────────────────────── */
.snippet-panel{background:var(--bg-card);border:1px solid var(--border);border-radius:var(--radius-lg);margin-bottom:1.1rem;overflow:hidden}
.snippet-header{display:flex;align-items:center;justify-content:space-between;padding:.55rem 1rem;border-bottom:1px solid var(--border);background:rgba(255,255,255,.02)}
.snippet-title{font-family:var(--font-mono);font-size:.72rem;color:var(--text-muted);text-transform:uppercase;letter-spacing:.08em}
.snippet-title .dot{display:inline-block;width:7px;height:7px;border-radius:50%;background:var(--green);margin-right:.45rem;animation:pulse 2s infinite}
@keyframes pulse{0%,100%{opacity:1}50%{opacity:.35}}

/* ── Tabs ─────────────────────────────────────────────────────────────────── */
.tabs{display:flex;flex-wrap:wrap;gap:2px;padding:.45rem .7rem 0;border-bottom:1px solid var(--border);background:rgba(255,255,255,.015)}
.tab{font-family:var(--font-mono);font-size:.72rem;color:var(--text-muted);padding:.28rem .65rem;border-radius:var(--radius) var(--radius) 0 0;cursor:pointer;border:1px solid transparent;border-bottom:none;transition:color .12s,background .12s;user-select:none;margin-bottom:-1px}
.tab:hover{color:var(--text);background:rgba(255,255,255,.04)}
.tab.active{color:var(--accent);background:var(--bg-card);border-color:var(--border);border-bottom-color:var(--bg-card)}

/* ── Code block ───────────────────────────────────────────────────────────── */
.code-wrap{position:relative}
.code-block{display:none;background:var(--bg-code);padding:.9rem 1.1rem;font-family:var(--font-mono);font-size:.8rem;line-height:1.75;color:var(--text-code);overflow-x:auto;white-space:pre;tab-size:2;min-height:3rem}
.code-block.active{display:block}
.c-kw{color:#ff7b72}.c-str{color:#a5d6ff}.c-var{color:#ffa657}.c-cmt{color:#8b949e;font-style:italic}.c-fn{color:#d2a8ff}.c-num{color:#79c0ff}
.url-ph{color:var(--yellow);font-style:italic}
.copy-btn-wrap{position:absolute;top:.45rem;right:.65rem}

/* ── Placeholder ──────────────────────────────────────────────────────────── */
.snippet-placeholder{padding:1.4rem 1.1rem;font-family:var(--font-mono);font-size:.8rem;color:var(--text-muted);text-align:center;background:var(--bg-code)}
.snippet-placeholder .arrow{color:var(--accent)}

/* ── Info grid ────────────────────────────────────────────────────────────── */
.info-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(160px,1fr));gap:.65rem;margin-bottom:1.1rem}
.info-item{background:var(--bg-card);border:1px solid var(--border);border-radius:var(--radius);padding:.65rem .9rem;font-family:var(--font-mono);font-size:.76rem}
.info-label{color:var(--text-muted);text-transform:uppercase;letter-spacing:.06em;font-size:.68rem;margin-bottom:.15rem}
.info-val{color:var(--green);font-size:.8rem}

/* ── Footer ───────────────────────────────────────────────────────────────── */
footer{margin-top:2rem;padding-top:1.1rem;border-top:1px solid var(--border);font-family:var(--font-mono);font-size:.72rem;color:var(--text-muted);display:flex;flex-wrap:wrap;gap:.4rem 1.25rem;align-items:center}
footer code{background:var(--bg-code);border:1px solid var(--border);border-radius:4px;padding:.1rem .35rem;color:var(--text-code);font-size:.72rem}

/* ── Error page ───────────────────────────────────────────────────────────── */
.error-card{background:var(--bg-card);border:1px solid rgba(248,81,73,.35);border-radius:var(--radius-lg);padding:2rem;max-width:600px;margin:4rem auto;font-family:var(--font-mono)}
.err-label{font-size:.7rem;text-transform:uppercase;letter-spacing:.1em;color:var(--red);margin-bottom:.5rem}
.error-card h2{font-size:1.05rem;color:var(--text);margin-bottom:.65rem}
.error-card p{font-size:.8rem;color:var(--text-muted);margin-bottom:.9rem}
.error-card a{color:var(--accent);text-decoration:none}
.error-card a:hover{text-decoration:underline}

/* ── Responsive ───────────────────────────────────────────────────────────── */
@media(max-width:600px){
  h1{font-size:1rem}
  .field-row{grid-template-columns:1fr}
  .tab{font-size:.68rem;padding:.22rem .45rem}
  .info-grid{grid-template-columns:1fr 1fr}
}