:root { --black:#050705; --panel:#0d100d; --panel2:#121612; --line:#283028; --green:#76b900; --green2:#9fe227; --text:#f4f7f2; --muted:#8c968b; --danger:#ef6b64; }
* { box-sizing:border-box; }
html,body { margin:0; min-height:100%; background:var(--black); color:var(--text); font:15px/1.5 Inter,ui-sans-serif,system-ui,-apple-system,sans-serif; }
button,input,select,textarea { font:inherit; }
button,a.ghost { border:1px solid var(--line); color:var(--text); background:#101410; padding:11px 16px; border-radius:5px; cursor:pointer; text-decoration:none; transition:.18s; }
button:hover,a.ghost:hover { border-color:#526050; transform:translateY(-1px); }
button.primary { background:var(--green); color:#071000; border-color:var(--green); font-weight:800; }
button:disabled { opacity:.45; cursor:wait; transform:none; }
em { color:var(--green2); font-style:normal; }
code { color:#b9df79; }
.eyebrow { color:var(--green2); font-size:11px; font-weight:900; letter-spacing:.22em; }
.login-shell { position:fixed; inset:0; display:grid; place-items:center; background:radial-gradient(circle at 35% 20%,#15220b 0,transparent 34%),linear-gradient(135deg,#050705,#090d08); z-index:10; }
.login-card { width:min(520px,calc(100% - 36px)); padding:48px; border:1px solid var(--line); background:rgba(10,13,10,.96); box-shadow:0 40px 100px #000; }
.login-card h1,.view h1 { font-size:clamp(34px,4vw,60px); line-height:1.02; letter-spacing:-.045em; margin:15px 0; }
.login-card p { color:var(--muted); }
label { display:flex; flex-direction:column; gap:7px; color:#b7c0b5; font-weight:700; font-size:13px; }
input,select,textarea { width:100%; color:var(--text); border:1px solid var(--line); background:#080b08; padding:12px 13px; border-radius:4px; outline:none; }
input:focus,select:focus,textarea:focus { border-color:var(--green); box-shadow:0 0 0 2px rgba(118,185,0,.12); }
.login-card button { width:100%; margin-top:18px; }
.login-card small { display:block; margin-top:20px; color:#677067; }
.error { color:var(--danger)!important; min-height:1.5em; }
.app-shell { min-height:100vh; display:grid; grid-template-columns:240px 1fr; grid-template-rows:74px 1fr; }
header { grid-column:1/-1; display:flex; align-items:center; justify-content:space-between; padding:0 30px; border-bottom:1px solid var(--line); background:rgba(5,7,5,.92); position:sticky; top:0; z-index:5; }
.brand { display:flex; align-items:center; gap:13px; letter-spacing:.16em; font-size:12px; }
.brand small { display:block; color:var(--muted); font-size:9px; margin-top:3px; }
.mark { width:38px; height:38px; display:grid; place-items:center; color:#081000; background:var(--green); font:900 25px Georgia; }
.header-actions,.button-row { display:flex; align-items:center; gap:9px; }
.status-pill { display:flex; align-items:center; gap:9px; border:1px solid var(--line); border-radius:999px; padding:9px 13px; color:var(--muted); font-size:11px; font-weight:800; text-transform:uppercase; letter-spacing:.1em; }
.status-pill i { width:7px; height:7px; border-radius:50%; background:#596059; }
.status-pill.running i { background:var(--green2); box-shadow:0 0 14px var(--green); }
.status-pill.error i { background:var(--danger); }
aside { grid-row:2; border-right:1px solid var(--line); padding:28px 16px; display:flex; flex-direction:column; justify-content:space-between; position:sticky; top:74px; height:calc(100vh - 74px); }
nav { display:flex; flex-direction:column; gap:5px; }
nav button { border-color:transparent; background:transparent; text-align:left; color:var(--muted); font-weight:700; }
nav button span { color:#586157; font:10px ui-monospace,monospace; margin-right:12px; }
nav button.active { color:#fff; background:#121712; border-color:#273126; box-shadow:inset 3px 0 var(--green); }
.aside-note { border-top:1px solid var(--line); padding:20px 10px 0; display:flex; gap:10px; color:#a7b0a5; }
.aside-note i { width:7px; height:7px; margin-top:7px; border-radius:50%; background:var(--green); box-shadow:0 0 10px var(--green); }
.aside-note small { display:block; color:#687068; margin-top:5px; }
main { min-width:0; background-image:linear-gradient(rgba(118,185,0,.018) 1px,transparent 1px),linear-gradient(90deg,rgba(118,185,0,.018) 1px,transparent 1px); background-size:72px 72px; }
.view { display:none; padding:52px clamp(28px,5vw,78px); max-width:1500px; margin:auto; }
.view.active { display:block; }
.view.full-height { height:calc(100vh - 74px); }
.title-row { display:flex; align-items:flex-start; justify-content:space-between; gap:30px; margin-bottom:40px; }
.title-row.compact h1 { font-size:44px; margin:10px 0 3px; }
.title-row p { color:var(--muted); max-width:720px; margin:0; }
.metrics { display:grid; grid-template-columns:repeat(3,1fr); gap:14px; }
.metrics article,.flow-card,.notice,.form-section,.preview-card { border:1px solid var(--line); background:rgba(13,16,13,.93); }
.metrics article { padding:26px; border-top:2px solid #344132; }
.metrics span { color:var(--green2); font-size:10px; font-weight:900; letter-spacing:.18em; }
.metrics b { display:block; font-size:25px; margin:12px 0 4px; text-transform:capitalize; }
.metrics small { color:var(--muted); }
.flow-card { display:flex; align-items:center; justify-content:space-around; margin-top:16px; padding:34px 25px; }
.flow-card>i { color:var(--green); font-size:24px; }
.flow-node { display:grid; grid-template-columns:36px 1fr; column-gap:10px; }
.flow-node span { grid-row:1/3; width:30px; height:30px; display:grid; place-items:center; border:1px solid #4e722b; color:var(--green2); font:10px monospace; }
.flow-node b { font-size:18px; }
.flow-node small { color:var(--muted); }
.notice { border-left:3px solid var(--green); padding:22px 25px; margin-top:16px; }
.notice p { color:var(--muted); margin:4px 0 0; }
.transfer-grid { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:16px; align-items:start; }
.transfer-card { min-width:0; padding:30px; border:1px solid var(--line); border-top:2px solid #40512f; background:rgba(13,16,13,.94); }
.transfer-card h2 { margin:10px 0 8px; font-size:24px; }.transfer-card>p{min-height:68px;margin:0 0 24px;color:var(--muted)}
.transfer-actions { display:flex; justify-content:flex-end; gap:9px; margin-bottom:18px; }
.import-row { display:grid; grid-template-columns:minmax(0,1fr) auto; gap:9px; align-items:end; }.credential-card .import-row{grid-template-columns:minmax(0,1fr) minmax(0,1fr)}
.import-row input[type="file"] { min-width:0; padding:9px; color:var(--muted); }.import-row input[type="file"]::file-selector-button{margin-right:10px;padding:6px 9px;border:1px solid var(--line);background:#151a15;color:#d9dfd6;cursor:pointer}
.password-grid { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:12px; margin-bottom:12px; }
.transfer-wide { width:100%; margin-top:12px; }.transfer-card hr{height:1px;margin:25px 0;border:0;background:var(--line)}
.hf-space-card{grid-column:1/-1;border-top-color:var(--green);background:linear-gradient(115deg,rgba(118,185,0,.08),rgba(13,16,13,.96) 42%)}
.hf-space-card>p{min-height:0;max-width:920px}.hf-export-layout{display:flex;align-items:center;justify-content:space-between;gap:24px}.hf-export-points{display:flex;flex-wrap:wrap;gap:7px}.hf-export-points span{padding:7px 10px;border:1px solid #334026;background:#0b0f09;color:#9acb55;font:700 10px/1.2 ui-monospace,monospace;letter-spacing:.08em}.hf-export-layout button{flex:0 0 auto}
.transfer-warning { display:block; margin-top:14px; color:#727c71; }.transfer-warning code{font-size:11px}
.checkbox-row { flex-direction:row; align-items:center; margin-top:12px; color:#8f998d; font-weight:500; }.checkbox-row input{width:auto;accent-color:var(--green)}
.form-section { display:grid; grid-template-columns:240px 1fr; gap:38px; padding:30px; margin-bottom:14px; }
.form-section h2 { margin:8px 0 5px; }
.form-section p { margin:0; color:var(--muted); }
.step { color:var(--green); font:11px monospace; }
.field-grid { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:20px; }
.model-config-editor { min-width:0; }
.json-editor { min-height:330px; resize:vertical; color:#cfe9a9; font:12px/1.55 ui-monospace,SFMono-Regular,Menlo,monospace; tab-size:2; }
.model-config-actions { display:flex; align-items:center; justify-content:space-between; gap:16px; margin-top:10px; }
.model-config-actions>small { color:var(--muted); }
.model-config-actions>div { display:flex; gap:8px; }
label button.test { align-self:flex-start; padding:5px 9px; color:var(--green2); background:transparent; border:0; font-size:11px; }
.result { min-height:24px; color:var(--muted); margin-top:14px; white-space:pre-wrap; }
.result.ok { color:var(--green2); }.result.bad { color:var(--danger); }
.console-command { display:flex; align-items:center; gap:14px; padding:10px 14px; margin-bottom:10px; border:1px solid var(--line); background:#090c09; color:#8a9489; overflow:hidden; }
.console-command span { flex:none; color:var(--green); font:700 10px/1 ui-monospace,monospace; letter-spacing:.15em; }
.console-command code { overflow:auto; white-space:nowrap; color:#c8d2c6; font:12px/1.4 ui-monospace,monospace; }
.view[data-view-panel="terminal"].active { display:flex; flex-direction:column; }
.view[data-view-panel="terminal"] .title-row { flex:none; }
.document-shelf { flex:none; display:flex; align-items:center; gap:14px; min-height:43px; padding:8px 12px; margin-bottom:10px; border:1px solid var(--line); background:#090c09; overflow:hidden; }
.document-shelf>span { flex:none; color:var(--green); font:700 10px/1 ui-monospace,monospace; letter-spacing:.15em; }
#document-list { display:flex; align-items:center; gap:7px; min-width:0; overflow:auto; }
#document-list>small { color:var(--muted); white-space:nowrap; }
.document-chip { display:flex; align-items:center; gap:7px; flex:none; padding:5px 6px 5px 9px; border:1px solid #344132; background:#121712; color:#c8d2c6; font:11px/1.3 ui-monospace,monospace; }
.document-chip button { width:20px; height:20px; padding:0; border:0; background:transparent; color:#788277; line-height:1; }
.document-chip button:hover { color:var(--danger); transform:none; }
.terminal-shell { flex:1; border:1px solid var(--line); background:#020302; min-height:360px; box-shadow:0 25px 70px #000; }
.terminal-top { height:38px; display:flex; align-items:center; gap:7px; padding:0 13px; color:#697268; background:#111511; border-bottom:1px solid var(--line); font:11px monospace; }
.terminal-top i { width:8px; height:8px; border-radius:50%; background:#3d463c; }.terminal-top i:first-child{background:#874b47}.terminal-top i:nth-child(2){background:#8a742e}.terminal-top i:nth-child(3){background:#507b28}.terminal-top span{margin-left:9px}
#terminal { height:calc(100% - 38px); padding:12px; }
.editor-tabs { display:flex; border:1px solid var(--line); background:#101410; }
.editor-tabs button { border:0; border-right:1px solid var(--line); border-radius:0; color:var(--muted); }
.editor-tabs button.active { color:var(--green2); background:#090c09; }
.editor-tabs span { margin-left:auto; align-self:center; padding:0 15px; color:var(--muted); font-size:11px; }
.code-editor { display:none; height:55vh; resize:vertical; border-radius:0; font:13px/1.6 ui-monospace,SFMono-Regular,Menlo,monospace; tab-size:2; }.code-editor.active{display:block}
.view[data-view-panel="preview"].active { display:flex; flex-direction:column; }
.preview-title { flex:none; margin-bottom:22px; }
.preview-actions { display:flex; align-items:stretch; gap:9px; }
.preview-auth { min-width:340px; display:grid; grid-template-columns:9px 1fr auto; align-items:center; gap:11px; padding:9px 10px 9px 13px; border:1px solid var(--line); background:#0b0e0b; }
.preview-auth>i { width:8px; height:8px; border-radius:50%; background:#687068; }
.preview-auth[data-state="connected"]>i { background:var(--green2); box-shadow:0 0 14px var(--green); }
.preview-auth[data-state="error"]>i,.preview-auth[data-state="expired"]>i { background:var(--danger); }
.preview-auth b,.preview-auth small { display:block; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.preview-auth b { font-size:12px; }.preview-auth small { max-width:220px; color:var(--muted); font-size:10px; }
.preview-auth button { padding:7px 9px; color:var(--green2); font-size:10px; font-weight:800; }
.preview-card { flex:1; min-height:480px; max-width:1100px; width:100%; margin:0 auto; display:flex; flex-direction:column; overflow:hidden; box-shadow:0 28px 80px rgba(0,0,0,.4); }
.preview-card-header { flex:none; min-height:64px; display:flex; align-items:center; justify-content:space-between; padding:12px 18px; border-bottom:1px solid var(--line); background:linear-gradient(90deg,#111711,#0b0e0b); }
.preview-card-header>div { display:flex; align-items:center; gap:11px; }.preview-card-header b,.preview-card-header small{display:block}.preview-card-header small{color:var(--muted);font-size:10px}
.preview-card-header .preview-release { min-width:0; display:grid; grid-template-columns:auto auto; justify-items:end; column-gap:10px; row-gap:2px; }
.preview-release>span { grid-column:1/-1; color:#687068; font:700 9px ui-monospace,monospace; letter-spacing:.1em; text-transform:uppercase; }
.preview-release>small { color:#778076; font:800 8px ui-monospace,monospace; letter-spacing:.12em; }
.preview-release>code { max-width:430px; overflow:hidden; color:var(--green2); font:700 9px ui-monospace,SFMono-Regular,Menlo,monospace; text-overflow:ellipsis; white-space:nowrap; }
.preview-agent-mark { width:36px; height:36px; display:grid; place-items:center; color:#0a1204; background:var(--green); font:900 22px Georgia; }
.preview-card-header small i { display:inline-block; width:6px; height:6px; margin-right:6px; border-radius:50%; background:#5f685f; }.preview-card-header small.active i{background:var(--green2);box-shadow:0 0 8px var(--green)}
#preview-messages { flex:1; min-height:280px; overflow:auto; padding:28px clamp(20px,4vw,48px); display:flex; flex-direction:column; gap:22px; scroll-behavior:smooth; background:radial-gradient(circle at 50% 0,rgba(118,185,0,.035),transparent 34%); }
.empty { margin:auto; text-align:center; color:var(--muted); }.empty span{display:grid;place-items:center;margin:auto auto 14px;width:52px;height:52px;border:1px solid #40512f;background:#17200f;color:var(--green2);font:28px Georgia}.empty b,.empty small{display:block}.empty b{color:#dfe5dc;font-size:16px}.empty small{margin-top:5px}
.preview-message { display:flex; align-items:flex-start; gap:12px; max-width:min(82%,780px); animation:preview-in .18s ease-out; }.preview-message.user{align-self:flex-end;flex-direction:row-reverse}.preview-message.agent{align-self:flex-start}
.preview-avatar { flex:none; width:34px; height:34px; display:grid; place-items:center; border:1px solid #40512f; background:#151b11; color:var(--green2); font:800 10px ui-monospace,monospace; }.preview-message.user .preview-avatar{background:var(--green);border-color:var(--green);color:#081000}
.preview-message-body { min-width:0; }.preview-message-body>small{display:block;margin:0 0 6px;color:#727b71;font:800 9px ui-monospace,monospace;letter-spacing:.12em}.preview-message.user .preview-message-body>small{text-align:right}
.preview-bubble { padding:14px 17px; border:1px solid #30372f; border-radius:3px 15px 15px 15px; background:#151915; color:#edf1eb; overflow-wrap:anywhere; line-height:1.55; }.preview-message.user .preview-bubble{border-color:#609127;border-radius:15px 3px 15px 15px;background:linear-gradient(135deg,#76b900,#8bc72d);color:#081000;white-space:pre-wrap}.preview-message.error .preview-bubble{border-color:#713c38;background:#241211;color:#ffc1bd;white-space:pre-wrap}
.markdown-content>:first-child { margin-top:0; }.markdown-content>:last-child { margin-bottom:0; }
.markdown-content p { margin:.65em 0; }.markdown-content h1,.markdown-content h2,.markdown-content h3,.markdown-content h4,.markdown-content h5,.markdown-content h6{margin:1.05em 0 .42em;color:#f5f8f2;line-height:1.22}.markdown-content h1{font-size:1.42em}.markdown-content h2{font-size:1.25em}.markdown-content h3{font-size:1.1em}.markdown-content ul,.markdown-content ol{margin:.65em 0;padding-left:1.55em}.markdown-content li+li{margin-top:.24em}.markdown-content li>p{margin:.3em 0}
.markdown-content a { color:var(--green2); text-decoration-color:#557d2a; text-underline-offset:3px; }.markdown-content a:hover{color:#c3f574}.markdown-content strong{color:#fff}.markdown-content hr{height:1px;margin:1.1em 0;border:0;background:#384237}.markdown-content blockquote{margin:.8em 0;padding:.45em .9em;border-left:3px solid var(--green);background:#10150d;color:#b8c2b5}.markdown-content code{padding:.12em .35em;border:1px solid #354032;border-radius:3px;background:#090c09;color:#bfe77d;font:12px/1.5 ui-monospace,SFMono-Regular,Menlo,monospace}
.markdown-content pre { position:relative; max-width:100%; margin:.85em 0; padding:15px 15px 13px; overflow:auto; border:1px solid #333d32; border-radius:5px; background:#050705; }.markdown-content pre code{padding:0;border:0;background:transparent;color:#dce7d6;white-space:pre;font-size:11px}.markdown-copy{position:absolute;top:7px;right:7px;padding:4px 7px;border-color:#394338;background:#101510;color:#9eaa9b;font:800 8px ui-monospace,monospace;text-transform:uppercase}.markdown-table{max-width:100%;margin:.85em 0;overflow:auto;border:1px solid #30392f}.markdown-content table{width:100%;border-collapse:collapse;font-size:12px}.markdown-content th,.markdown-content td{padding:8px 10px;border:1px solid #30392f;text-align:left;vertical-align:top}.markdown-content th{background:#111810;color:var(--green2);font-size:10px;letter-spacing:.04em}.markdown-content tbody tr:nth-child(even){background:#101410}
.preview-bubble.typing { display:flex; align-items:center; gap:5px; min-width:62px; min-height:48px; }.preview-bubble.typing i{width:6px;height:6px;border-radius:50%;background:var(--green);animation:preview-dot 1s infinite ease-in-out}.preview-bubble.typing i:nth-child(2){animation-delay:.14s}.preview-bubble.typing i:nth-child(3){animation-delay:.28s}
#preview-form { flex:none; padding:13px 14px 10px; border-top:1px solid var(--line); background:#090c09; }#preview-form textarea{min-height:48px;max-height:160px;resize:none;border:0;background:#111511;padding:14px 15px;box-shadow:inset 0 0 0 1px #293128}#preview-form textarea:focus{box-shadow:inset 0 0 0 1px var(--green)}
.preview-compose-footer { display:flex; align-items:center; justify-content:space-between; gap:15px; padding:9px 2px 0 7px; }.preview-compose-footer small{color:#697268;font-size:10px}.preview-compose-footer kbd{padding:1px 4px;border:1px solid #343d33;background:#121612;color:#9ba499;font:9px ui-monospace,monospace}.preview-compose-footer button{display:flex;align-items:center;justify-content:center;gap:9px;min-width:104px;padding:9px 13px}.preview-compose-footer button b{font-size:17px;line-height:1}
@keyframes preview-in { from{opacity:0;transform:translateY(5px)} to{opacity:1;transform:none} }
@keyframes preview-dot { 0%,60%,100%{opacity:.3;transform:translateY(0)} 30%{opacity:1;transform:translateY(-3px)} }
.logs { height:calc(100% - 120px); overflow:auto; margin:0; padding:22px; border:1px solid var(--line); background:#020302; color:#a6c57b; font:12px/1.6 ui-monospace,monospace; white-space:pre-wrap; }
#toast { position:fixed; right:24px; bottom:24px; max-width:430px; padding:13px 17px; background:#18220f; color:#dfffa9; border:1px solid #4c7029; box-shadow:0 15px 50px #000; opacity:0; transform:translateY(12px); pointer-events:none; transition:.2s; z-index:20; }#toast.show{opacity:1;transform:none}#toast.bad{background:#281211;color:#ffc1bd;border-color:#873e3a}
[hidden] { display:none!important; }
@media(max-width:900px){.model-config-actions{align-items:stretch;flex-direction:column}.model-config-actions>div{flex-wrap:wrap}.transfer-grid,.password-grid{grid-template-columns:1fr}.transfer-card>p{min-height:0}.import-row,.credential-card .import-row{grid-template-columns:1fr}.transfer-actions{justify-content:stretch;flex-direction:column}.hf-export-layout{align-items:stretch;flex-direction:column}.hf-export-layout button{width:100%}}
@media(max-width:900px){.app-shell{grid-template-columns:1fr;grid-template-rows:64px auto 1fr}header{padding:0 14px}.header-actions .ghost{display:none}aside{grid-row:2;position:static;width:100%;height:auto;padding:8px;border-right:0;border-bottom:1px solid var(--line);overflow:auto}nav{flex-direction:row}nav button{white-space:nowrap}.aside-note{display:none}main{grid-row:3}.view{padding:28px 18px}.title-row{display:block}.title-row .button-row{margin-top:20px;flex-wrap:wrap}.preview-actions{margin-top:18px;flex-direction:column}.preview-auth{min-width:0}.preview-card{min-height:560px}.preview-card-header .preview-release{display:none}.preview-message{max-width:94%}.preview-compose-footer small{display:none}.metrics,.field-grid{grid-template-columns:1fr}.form-section{grid-template-columns:1fr}.flow-card{align-items:stretch;gap:10px;flex-direction:column}.flow-card>i{transform:rotate(90deg);align-self:center}}