:root { --bg:#0b0d12; --fg:#e9eef7; --muted:#9aa7bf; --card:#121826; --line:#23304a; --accent:#6ea8ff; }
* { box-sizing: border-box; }
body { margin: 0; font-family: system-ui, -apple-system, Segoe UI, Roboto, sans-serif; background: var(--bg); color: var(--fg); }
.top { display:flex; gap:16px; align-items:center; justify-content:space-between; padding:14px 16px; border-bottom:1px solid var(--line); position:sticky; top:0; background:rgba(11,13,18,.9); backdrop-filter: blur(8px); }
.nav-group { display:flex; gap:16px; align-items:center; flex:1; justify-content:center; }
.brand { font-weight:700; }
.nav { display:flex; gap:8px; }
.tab { background:transparent; color:var(--fg); border:1px solid var(--line); padding:8px 10px; border-radius:10px; cursor:pointer; }
.tab.active { border-color: var(--accent); }
.api { color: var(--muted); font-size: 12px; }
.api code { color: var(--fg); }

.user { color: var(--muted); font-size: 12px; margin-left: auto; }
.user code { color: var(--fg); }

.container { max-width: 980px; margin: 20px auto; padding: 0 16px 40px; display:flex; flex-direction:column; gap:16px; }
.card { background: var(--card); border:1px solid var(--line); border-radius:16px; padding:16px; }
.hidden { display:none; }

label { display:block; font-size: 12px; color: var(--muted); margin-bottom: 6px; }
input, select, textarea { width:100%; border:1px solid var(--line); background:#0f1422; color:var(--fg); padding:10px; border-radius:12px; }
textarea { resize: vertical; }

.grid2 { display:grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.grid3 { display:grid; grid-template-columns: 140px 1fr 1fr; gap: 12px; }
.span2 { grid-column: span 2; }

.actions { display:flex; gap:10px; margin-top: 10px; }
.actions.align-end { align-items:end; justify-content:flex-end; }
button { border:1px solid var(--line); background: var(--accent); color:#07101f; padding:10px 12px; border-radius:12px; cursor:pointer; font-weight:600; }
button.secondary { background: transparent; color: var(--fg); }
.muted { color: var(--muted); }
.hint { color: var(--muted); font-size: 12px; margin-top: 6px; }
.out { margin-top: 12px; background:#0f1422; border:1px solid var(--line); border-radius:12px; padding:12px; overflow:auto; max-height:500px; }