:root{--bg:#f4f7f2;--card:#fff;--line:#dce6df;--text:#173c37;--muted:#5d7268;--accent:#1d614d;--accent-soft:#e7f2ea;--ok:#418964;--warn:#d79a50;--danger:#9b3328;--btn2:#edf2ed;--btn2-text:#344c41;
  font-family:Inter,ui-sans-serif,system-ui,sans-serif;color:var(--text);background:var(--bg);font-synthesis:none;color-scheme:light}
@media (prefers-color-scheme:dark){:root{--bg:#141a18;--card:#1d2522;--line:#2f3b36;--text:#e3ece7;--muted:#9fb1a8;--accent:#3f9a78;--accent-soft:#22352d;--ok:#5cb38a;--warn:#e0a865;--danger:#f08a78;--btn2:#2a3430;--btn2-text:#d5e1db;color-scheme:dark}}
*{box-sizing:border-box}
body{margin:0;min-width:280px;background:var(--bg)}
main{width:min(100%,520px);margin:auto;padding:16px 16px 24px}
header,.row{display:flex;align-items:center;justify-content:space-between;gap:10px}
.brand{font-size:23px;letter-spacing:-1.4px;font-weight:800}
.brand span{color:#e5aa68;font-size:11px;margin-left:3px}
.context{display:flex;align-items:center;gap:7px;font-size:11px;color:var(--muted);text-align:right}
.context-dot{width:7px;height:7px;background:var(--warn);border-radius:50%;flex:none}
.context-dot[data-connected=true]{background:var(--ok)}
.card{background:var(--card);border:1px solid var(--line);border-radius:12px;padding:16px;margin-top:12px}
h1{font-size:16px;margin:0}
h2{font-size:13px;margin:0}
p{line-height:1.5;font-size:12px}
.pill{font-size:10px;background:var(--accent-soft);border-radius:20px;padding:6px 9px;white-space:nowrap}
.pill[data-running=true]{background:#d8f4db;color:#21652b}
fieldset{border:0;padding:0;margin:16px 0 0}
legend{font-size:12px;font-weight:650;margin-bottom:9px}
.language-options{display:flex;gap:7px;flex-wrap:wrap}
.language-options label{display:flex;gap:6px;align-items:center;padding:8px 10px;border:1px solid var(--line);border-radius:7px;cursor:pointer;font-size:12px}
.language-options label:has(input:checked){background:var(--accent-soft);border-color:var(--ok)}
.language-options label:has(input:disabled){cursor:default;opacity:.7}
.language-options input{accent-color:var(--accent);margin:0}
.hint{color:var(--muted);font-size:11px;margin:9px 0 0}
.usage{font-size:12px;margin:14px 0 0;padding:10px 12px;border-radius:8px;background:var(--accent-soft)}
.usage[data-low=true]{background:#fbefd9;color:#7a4b12}
.buttons{display:flex;gap:8px;margin-top:16px}
button{border:0;background:var(--accent);color:#fff;font:inherit;font-size:12px;font-weight:650;padding:11px 14px;border-radius:7px;cursor:pointer}
button.secondary{background:var(--btn2);color:var(--btn2-text)}
button:disabled{opacity:.45;cursor:not-allowed}
button:focus-visible,input:focus-visible{outline:3px solid var(--warn);outline-offset:3px}
.error{font-size:11px;color:var(--danger);margin:10px 0 0;min-height:0}
.error:empty{display:none}
#setup{border-top:1px solid var(--line);margin-top:14px;padding-top:4px}
.setup-list{list-style:none;padding:0;margin:12px 0 0;display:grid;gap:6px;font-size:11px}
.setup-list li{display:flex;gap:8px;align-items:flex-start;color:var(--muted)}
.setup-list li::before{content:"";flex:none;width:12px;height:12px;margin-top:1px;border:1.5px solid var(--line);border-radius:50%}
.setup-list li[data-done=true]{color:var(--ok)}
.setup-list li[data-done=true]::before{background:var(--ok);border-color:var(--ok)}
.bot-list{list-style:none;padding:0;margin:12px 0 0;display:grid;gap:6px;font-size:11px}
.bot-list li{display:flex;flex-direction:column;gap:2px;padding:8px 10px;border:1px solid var(--line);border-radius:8px}
.bot-list li[data-state=ready]{border-color:var(--ok)}
.bot-list li[data-state=failed]{border-color:#c0583f;color:var(--danger)}
.bot-list span{color:var(--muted)}
.diagnostics{border-style:dashed}
footer{font-size:10px;line-height:1.6;color:var(--muted);text-align:center;margin-top:14px}
[hidden]{display:none!important}