:root { --bg:#0b0c0f; --card:#111319; --muted:#8a8f98; --fg:#e8eaf0; --accent:#06ed94; }
* { box-sizing: border-box; }
html,body { margin:0; padding:0; background:var(--bg); color:var(--fg); font:14px/1.4 system-ui, -apple-system, Segoe UI, Roboto, Ubuntu, sans-serif; }
a { color: var(--fg); text-decoration: none; }

.topbar { display:flex; align-items:center; gap:8px; padding:10px 16px; border-bottom:1px solid #20222b; background:#0d0f14; position:sticky; top:0; }
.brand { font-weight:700; letter-spacing:0.5px; }
.host { color:var(--muted); }
.grow { flex:1; }
.sep { width:1px; height:20px; background:#2a2d36; margin:0 8px; }

.wrap { max-width: 960px; margin: 24px auto; padding: 0 16px; display:grid; gap:16px; }
.card { background: var(--card); border:1px solid #262a33; border-radius:10px; padding:16px; }
h2 { margin:0 0 8px; font-size:16px; }
.row { display:flex; flex-wrap:wrap; gap:8px; align-items:center; margin:8px 0; }
label { color: var(--muted); margin: 6px 0; display:inline-block; }

input, select, textarea { background:#0d0f14; color:var(--fg); border:1px solid #2b2f3a; border-radius:8px; padding:8px 10px; }
textarea { width:100%; resize:vertical; font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, "Liberation Mono", monospace; }

.btn { background:#141824; border:1px solid #2b2f3a; color:var(--fg); border-radius:8px; padding:8px 12px; cursor:pointer; }
.btn:hover { border-color:#3a3f4c; }
.btn.subtle { opacity:0.8; }
.btn.subtle:hover { opacity:1; }

.pill { padding:4px 8px; border-radius:999px; border:1px solid #2b2f3a; font-size:12px; color:var(--muted); }
.pill.ok { color:#0f6; border-color:#0f6; }
.pill.bad { color:#f66; border-color:#f66; }

.pre { background:#0d0f14; border:1px solid #2b2f3a; border-radius:8px; padding:10px; overflow:auto; max-height:280px; }