:root { --ink:#eef2ed; --muted:#929a92; --line:#29312d; --panel:#111714; --accent:#b8ff5a; --danger:#ff765f; }
* { box-sizing:border-box; }
body { margin:0; min-height:100vh; color:var(--ink); background:#080c0a; font-family:Inter,ui-sans-serif,system-ui,sans-serif; }
body::before { content:""; position:fixed; inset:0; pointer-events:none; background:radial-gradient(circle at 75% 10%,rgba(98,145,65,.18),transparent 28%),linear-gradient(rgba(255,255,255,.018) 1px,transparent 1px),linear-gradient(90deg,rgba(255,255,255,.018) 1px,transparent 1px); background-size:auto,48px 48px,48px 48px; }
.shell { position:relative; max-width:1480px; margin:auto; padding:24px 32px 48px; }
header { height:64px; display:flex; align-items:center; justify-content:space-between; border-bottom:1px solid var(--line); }
.brand { display:flex; align-items:center; gap:12px; font-weight:750; letter-spacing:.12em; font-size:13px; }
.mark,.avatar { display:grid; place-items:center; background:var(--accent); color:#10150e; font-weight:900; }
.mark { width:30px; height:30px; border-radius:8px 2px 8px 2px; }
.status { display:flex; gap:9px; align-items:center; color:var(--muted); font-size:12px; text-transform:uppercase; letter-spacing:.1em; }
.status span { width:8px; height:8px; border-radius:50%; background:#e8b64b; box-shadow:0 0 12px currentColor; }
.status.ready span { background:var(--accent); }.status.failed span { background:var(--danger); }
main { display:grid; grid-template-columns:minmax(220px,.65fr) minmax(480px,1.45fr) minmax(240px,.65fr); gap:28px; padding-top:55px; align-items:start; }
.eyebrow { margin:0 0 15px; color:var(--accent); font:700 11px/1.2 ui-monospace,SFMono-Regular,monospace; letter-spacing:.18em; }
h1 { margin:0; font-size:clamp(42px,5vw,74px); line-height:.94; letter-spacing:-.055em; font-weight:720; }
h1 em { color:var(--muted); font-style:normal; font-weight:420; }
.lede { max-width:360px; margin-top:28px; color:var(--muted); font-size:15px; line-height:1.7; }
.console,.panel { border:1px solid var(--line); background:rgba(17,23,20,.92); box-shadow:0 20px 70px rgba(0,0,0,.25); }
.console { min-height:690px; display:grid; grid-template-rows:auto 1fr auto; }
.console-head { padding:24px 26px; border-bottom:1px solid var(--line); display:flex; justify-content:space-between; align-items:center; }
h2 { margin:0; font-size:20px; }.console-head .eyebrow { margin-bottom:6px; }
button { font:inherit; cursor:pointer; }.quiet { align-self:center; border:0; background:none; color:var(--muted); font-size:12px; }.quiet:hover { color:var(--ink); }
.messages { height:470px; overflow:auto; padding:26px; scrollbar-color:#344038 transparent; }
.message { display:flex; gap:11px; margin-bottom:20px; align-items:flex-start; }
.message.user { justify-content:flex-end; }.message.user .bubble { background:#253020; border-color:#35432e; }.message.error .bubble { border-color:#63362f; color:#ffb4a7; }
.avatar { flex:0 0 28px; height:28px; border-radius:8px 2px; font-size:11px; }
.bubble { max-width:82%; padding:12px 15px; border:1px solid var(--line); background:#171e1a; color:#dce2dc; line-height:1.55; white-space:pre-wrap; overflow-wrap:anywhere; font-size:14px; }
form { padding:18px 20px; border-top:1px solid var(--line); }
.composer { display:flex; align-items:flex-end; gap:12px; padding:10px 10px 10px 15px; border:1px solid #39433e; background:#0c110e; }
textarea { width:100%; max-height:130px; resize:none; border:0; outline:0; color:var(--ink); background:transparent; font:inherit; line-height:1.5; }
.composer button { flex:0 0 40px; height:40px; border:0; background:var(--accent); color:#10150e; font-size:22px; }
.composer button:disabled { opacity:.35; cursor:wait; }.form-meta { display:flex; justify-content:space-between; margin-top:9px; color:#69716b; font-size:10px; }
.settings { display:grid; gap:18px; }.panel { padding:22px; }.panel label:not(.switch) { display:block; margin-top:16px; color:var(--muted); font-size:11px; }
.panel input[type="text"],.panel input[type="password"] { width:100%; margin-top:7px; padding:11px 10px; border:1px solid var(--line); outline:0; background:#090e0b; color:var(--ink); font:12px ui-monospace,monospace; }
.panel input:focus { border-color:#5c704f; }.switch { display:flex; gap:10px; align-items:center; margin-top:18px; color:#c6ccc6; font-size:12px; }
.switch input { position:absolute; opacity:0; }.switch span { width:34px; height:18px; border-radius:10px; background:#303731; position:relative; }.switch span::after { content:""; position:absolute; width:12px; height:12px; left:3px; top:3px; border-radius:50%; background:#879087; transition:.2s; }.switch input:checked+span { background:#506b3d; }.switch input:checked+span::after { transform:translateX(16px); background:var(--accent); }
.hint { color:#69716b; font-size:10px; line-height:1.55; margin:18px 0 0; }.diagnostics dl { margin:0; }.diagnostics dl div { padding:12px 0; border-top:1px solid var(--line); }.diagnostics dt { color:#69716b; font-size:10px; text-transform:uppercase; }.diagnostics dd { margin:5px 0 0; font:11px ui-monospace,monospace; overflow-wrap:anywhere; }
.sr-only { position:absolute; width:1px; height:1px; overflow:hidden; clip:rect(0,0,0,0); }
@media(max-width:1050px){ main{grid-template-columns:1fr 2fr}.settings{grid-column:1/-1;grid-template-columns:1fr 1fr}.intro{padding-top:20px} }
@media(max-width:720px){ .shell{padding:14px}.status{font-size:0}main{display:block;padding-top:28px}.intro{margin-bottom:30px}.console{min-height:620px}.messages{height:410px}.settings{display:grid;grid-template-columns:1fr;margin-top:18px}.form-meta span:first-child{display:none} }