:root { color-scheme: dark; --bg:#0b0e13; --panel:#141923; --panel-soft:#10151e; --line:#293345; --text:#eef2f7; --muted:#9aa7ba; --accent:#8faeff; --accent-2:#806eed; --good:#64d39a; --bad:#ff7e88; }
* { box-sizing:border-box; }
body { margin:0; min-height:100vh; background:radial-gradient(circle at 20% -10%,#1d2a45 0,transparent 38%),var(--bg); color:var(--text); font:15px/1.5 system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif; }
button,input,textarea,select { font:inherit; }
button { cursor:pointer; }
.shell { width:min(1440px,100%); margin:auto; padding:18px; }
.hidden { display:none !important; }
.card { background:rgba(20,25,35,.94); border:1px solid var(--line); border-radius:18px; box-shadow:0 18px 50px rgba(0,0,0,.22); }
.auth-card { width:min(430px,100%); margin:10vh auto 0; padding:28px; }
.brand { display:flex; align-items:center; gap:12px; margin-bottom:22px; }
.brand h1 { margin:0; letter-spacing:-.04em; font-size:31px; }
.brand p { margin:2px 0 0; color:var(--muted); }
.brand-mark { display:grid; place-items:center; width:42px; height:42px; border-radius:13px; background:linear-gradient(135deg,#79a9ff,#8a70ef); color:#08101e; font-size:25px; font-weight:800; }
.brand.compact { margin:0; gap:10px; }.brand.compact .brand-mark { width:34px; height:34px; border-radius:10px; font-size:18px; }.brand.compact strong { display:block; font-size:19px; line-height:1.1; }.top-subtitle { display:block; color:var(--muted); font-size:11px; margin-top:2px; }
.stack { display:flex; flex-direction:column; gap:14px; }
label { display:flex; flex-direction:column; gap:7px; color:#cbd5e3; font-weight:600; }
input,textarea,select { width:100%; color:var(--text); background:#0f141d; border:1px solid #334057; border-radius:11px; padding:11px 12px; outline:none; }
textarea { resize:vertical; min-height:72px; }.prompt-form textarea { min-height:64px; }
input:focus,textarea:focus,select:focus { border-color:var(--accent); box-shadow:0 0 0 3px rgba(143,174,255,.12); }
button { border:0; border-radius:10px; padding:10px 15px; color:var(--text); background:#273247; }.primary { background:linear-gradient(135deg,#6fa5ff,#806eed); color:#fff; font-weight:750; }.primary:hover { filter:brightness(1.08); }.small { padding:8px 11px; font-size:13px; }.ghost { padding:7px 9px; color:#b9c8df; background:transparent; border:1px solid transparent; }.ghost:hover { border-color:var(--line); background:#182132; }.link-button { text-decoration:none; display:inline-flex; align-items:center; white-space:nowrap; }
.error { color:var(--bad); margin:0; }.muted,.hint { color:var(--muted); }.hint { font-size:13px; margin:0; }.empty { color:var(--muted); padding:35px 15px; text-align:center; }
.app-frame { min-height:calc(100vh - 36px); }.topbar { display:flex; justify-content:space-between; align-items:center; padding:3px 2px 18px; }.top-actions { display:flex; align-items:center; gap:8px; }.badge { color:var(--good); border:1px solid rgba(100,211,154,.35); background:rgba(100,211,154,.08); border-radius:99px; padding:4px 10px; font-size:12px; }
.app-layout { display:grid; grid-template-columns:230px minmax(0,1fr); gap:18px; align-items:start; }.app-sidebar { min-height:calc(100vh - 105px); display:flex; flex-direction:column; padding:12px 6px; border-right:1px solid rgba(41,51,69,.8); }.sidebar-caption,.eyebrow,.field-caption { color:var(--muted); text-transform:uppercase; letter-spacing:.1em; font-size:10px; font-weight:750; }.sidebar-caption { padding:0 10px 10px; }.tabs { display:flex; flex-direction:column; gap:4px; }.tab { width:100%; display:grid; grid-template-columns:26px 1fr; grid-template-rows:auto auto; gap:0 4px; text-align:left; border-radius:11px; background:transparent; color:#b4c0d2; padding:11px 10px; }.tab:hover,.tab.active { color:#fff; background:#1a2434; }.tab.active { box-shadow:inset 2px 0 var(--accent); }.nav-icon { grid-row:1 / span 2; align-self:center; color:#8ea9df; font-size:17px; }.nav-hint { grid-column:2; color:var(--muted); font-size:11px; font-weight:400; }.sidebar-footer { margin-top:auto; display:flex; align-items:center; gap:8px; color:var(--muted); font-size:12px; padding:12px 10px; }.status-dot { width:7px; height:7px; border-radius:50%; background:var(--good); box-shadow:0 0 10px var(--good); }
.main-content { min-width:0; }.tab-panel { min-width:0; }.page-head { display:flex; justify-content:space-between; align-items:flex-end; gap:16px; margin:4px 0 18px; }.page-head h2 { margin:2px 0 2px; letter-spacing:-.04em; font-size:30px; }.page-head p { margin:0; color:var(--muted); }.section-head { display:flex; justify-content:space-between; align-items:flex-start; gap:12px; margin:0 0 14px; }.section-head.sub { margin-top:28px; }.section-head h3 { margin:1px 0 0; letter-spacing:-.025em; }
.chat-layout { display:grid; grid-template-columns:minmax(220px,290px) minmax(0,1fr); gap:14px; min-height:610px; }.session-list,.conversation { overflow:hidden; min-width:0; }.list-head,.conversation-head { padding:14px 16px; border-bottom:1px solid var(--line); display:flex; justify-content:space-between; gap:12px; align-items:center; }.list-head strong { display:block; }.small-text { display:block; font-size:11px; margin-top:1px; }.conversation-head { min-height:74px; }.conversation-head h3 { margin:0; font-size:17px; }.conversation-actions { display:flex; align-items:center; gap:9px; }.compact-label { width:210px; font-size:11px; gap:4px; }.compact-label select { padding:8px 10px; font-size:13px; font-weight:500; }.list { padding:8px; max-height:545px; overflow:auto; }.session-item { display:block; width:100%; text-align:left; background:transparent; margin-bottom:5px; padding:11px; border-radius:11px; }.session-item:hover,.session-item.active { background:#202b3e; }.session-item strong { display:block; overflow:hidden; white-space:nowrap; text-overflow:ellipsis; }.session-item span { color:var(--muted); font-size:12px; }.icon-button { padding:2px 7px; font-size:20px; background:transparent; color:var(--muted); }
.messages { padding:18px; height:470px; overflow:auto; display:flex; flex-direction:column; gap:12px; }.message { padding:12px 14px; border-radius:13px; max-width:92%; white-space:pre-wrap; overflow-wrap:anywhere; }.message.user { margin-left:auto; background:#263a60; }.message.assistant { background:#1b2534; }.message.tool { background:#171d28; color:#bdc8d9; font-size:13px; }.message-head { color:var(--muted); font-size:11px; margin-bottom:5px; text-transform:uppercase; letter-spacing:.06em; }.prompt-form { padding:12px; border-top:1px solid var(--line); display:grid; grid-template-columns:150px 1fr auto; gap:9px; align-items:end; }.prompt-form button { align-self:stretch; }.prompt-controls { width:auto; }.prompt-controls label { font-size:12px; }.prompt-controls select { padding:9px; }
.composer-card { padding:18px; }.model-bar { display:flex; justify-content:space-between; align-items:center; gap:16px; padding:12px 14px; background:#101722; border:1px solid var(--line); border-radius:13px; }.model-bar strong { display:block; margin-top:2px; }.model-bar select { width:min(420px,55%); }.grid { display:grid; gap:12px; }.grid.two { grid-template-columns:1fr 1fr; }
.run-list,.provider-list { display:grid; gap:10px; }.run,.provider { padding:14px 16px; background:#151c27; border:1px solid var(--line); border-radius:14px; }.run-top,.provider-top { display:flex; justify-content:space-between; gap:12px; align-items:flex-start; }.run pre { white-space:pre-wrap; max-height:280px; overflow:auto; color:#cbd6e7; font:12px/1.45 ui-monospace,SFMono-Regular,Consolas,monospace; }.status { font-size:12px; border-radius:99px; padding:3px 8px; background:#263247; }.status.completed { color:var(--good); }.status.failed { color:var(--bad); }.status.running,.status.starting { color:var(--accent); }.model-tags { display:flex; flex-wrap:wrap; gap:6px; margin-top:10px; }.model-tags span { color:#c6d5ee; background:#202b3e; border:1px solid #30405b; border-radius:99px; padding:3px 8px; font-size:11px; }
.provider-output { white-space:pre-wrap; min-height:50px; max-height:430px; overflow:auto; margin:0; padding:13px; background:#0d121a; border:1px solid var(--line); border-radius:11px; color:#d6e0ee; font:13px/1.5 ui-monospace,SFMono-Regular,Consolas,monospace; }
.toast { position:fixed; left:50%; bottom:18px; transform:translateX(-50%); background:#eaf0fb; color:#0b1220; padding:10px 14px; border-radius:10px; box-shadow:0 10px 30px #0008; z-index:4; }
@media (max-width:900px) { .app-layout { grid-template-columns:1fr; }.app-sidebar { min-height:0; padding:0 0 12px; border-right:0; border-bottom:1px solid rgba(41,51,69,.8); }.sidebar-caption,.sidebar-footer { display:none; }.tabs { flex-direction:row; overflow:auto; }.tab { min-width:145px; }.chat-layout { grid-template-columns:1fr; min-height:0; }.session-list { max-height:245px; }.list { max-height:180px; }.messages { height:52vh; min-height:300px; } }
@media (max-width:650px) { .shell { padding:10px; }.topbar { padding-bottom:12px; }.top-actions .ghost { font-size:12px; }.page-head { align-items:flex-start; flex-direction:column; }.page-head h2 { font-size:26px; }.conversation-head { align-items:flex-start; flex-direction:column; }.conversation-actions { width:100%; justify-content:space-between; }.compact-label { width:min(100%,240px); }.prompt-form { grid-template-columns:1fr; }.prompt-form button { min-height:44px; }.model-bar { align-items:flex-start; flex-direction:column; }.model-bar select { width:100%; }.grid.two { grid-template-columns:1fr; }.tab { min-width:130px; }.tab .nav-hint { display:none; } }