:root { --bg:#0a0a12; --panel:#11131c; --line:rgba(120,140,200,.18); --text:#dbe4ff; --text2:#9aa6c8;
  --accent:#58a6ff; --green:#56d364; --amber:#e3b341; --red:#f85149; color-scheme: dark; }
* { box-sizing: border-box; }
body { margin:0; padding: 0 16px 32px; background: radial-gradient(circle at 50% -10%, #161a2e 0%, var(--bg) 60%) fixed;
  color: var(--text); font: 15px/1.55 ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; }
header, main, footer { max-width: 1080px; margin: 0 auto; }
h1 { color: var(--amber); margin: 20px 0 4px; letter-spacing: .5px; }
.sub { margin: 0 0 10px; color: var(--text); }
.muted { color: var(--text2); }
.pills { display:flex; flex-wrap:wrap; gap:6px; margin: 8px 0 14px; }
.pill { border:1px solid var(--line); border-radius:999px; padding:2px 10px; font-size:.8rem; color:var(--text2); }
.pill.ok { color: var(--green); border-color: rgba(86,211,100,.4); }
.pill.warn { color: var(--amber); border-color: rgba(227,179,65,.4); }
.pill.bad { color: var(--red); border-color: rgba(248,81,73,.4); }
nav { display:flex; flex-wrap:wrap; gap:6px; border-bottom:1px solid var(--line); padding-bottom:10px; }
nav button[aria-current="true"] { color: var(--amber); border-color: var(--amber); }
section { padding-top: 14px; }
button { background:#1b2233; color: var(--text); border:1px solid var(--line); border-radius:8px; padding:7px 12px;
  font: inherit; cursor:pointer; }
button.primary { color: var(--amber); }
button:disabled { opacity:.45; cursor:not-allowed; }
input, select, textarea { width:100%; background:#0c0e16; color: var(--text); border:1px solid var(--line);
  border-radius:8px; padding:7px 9px; font: inherit; }
label { display:block; font-size:.85rem; color: var(--text2); margin: 6px 0; }
label > input, label > select, label > textarea { margin-top:4px; color: var(--text); }
.row { display:flex; flex-wrap:wrap; gap:8px; align-items:center; margin: 8px 0; }
.row > input { flex: 1 1 240px; width:auto; }
.grid3, .grid4 { display:grid; gap: 0 10px; }
.grid3 { grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); }
.grid4 { grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); }
.log { background: var(--panel); border:1px solid var(--line); border-radius:12px; padding:10px; min-height:160px;
  max-height:52vh; overflow-y:auto; margin: 10px 0; }
.msg { margin: 0 0 12px; }
.msg .who { font-size:.75rem; color: var(--text2); }
.msg.user .body { color: var(--text); }
.msg.assistant .who { color: var(--amber); }
.msg .body { white-space: pre-wrap; overflow-wrap: anywhere; }
.out { background: var(--panel); border:1px solid var(--line); border-radius:12px; padding:12px; white-space: pre-wrap;
  overflow-wrap:anywhere; min-height: 60px; max-height: 70vh; overflow:auto; }
.out.refused { border-color: rgba(248,81,73,.5); color: #ffb3ad; }
.card { background: var(--panel); border:1px solid var(--line); border-radius:12px; padding:14px; }
.mantra { color: var(--amber); font-weight:600; margin-bottom:6px; }
.oath { font-style: italic; opacity:.88; margin-bottom:10px; }
.kv { display:grid; grid-template-columns: max-content 1fr; gap:4px 14px; margin:0; }
.kv dt { color: var(--text2); } .kv dd { margin:0; overflow-wrap:anywhere; }
.tablewrap { overflow-x:auto; margin: 8px 0; }
table { width:100%; border-collapse: collapse; font-size:.88rem; }
th { text-align:left; color: var(--text2); background:#161a28; }
th, td { padding:6px 8px; border-bottom:1px solid var(--line); overflow-wrap:anywhere; }
tr.bad td { color: var(--red); }
code { background: rgba(88,166,255,.10); padding: 1px 5px; border-radius: 4px; }
a { color: var(--accent); }
footer { margin-top: 24px; color: var(--text2); font-size:.85rem; }