:root { color-scheme: dark; --bg:#0d1114; --panel:#151b1f; --panel2:#1b2328; --line:#2b363d; --text:#edf4f1; --muted:#91a09a; --accent:#45d29a; --wait:#e1ad59; --load:#8275dc; font-family:Inter,ui-sans-serif,system-ui,sans-serif; }
* { box-sizing:border-box; } body { margin:0; min-height:100vh; background:radial-gradient(circle at 50% 0,#193029 0,var(--bg) 38%); color:var(--text); } main { width:min(1400px,calc(100% - 28px)); margin:auto; padding:28px 0 50px; display:grid; gap:14px; }
.hero,.toolbar,.card header { display:flex; align-items:center; justify-content:space-between; gap:14px; } h1 { margin:3px 0; font-size:clamp(28px,5vw,52px); letter-spacing:-.05em; } p { margin:0; color:var(--muted); }.eyebrow { color:var(--accent); font-size:11px; letter-spacing:.1em; }
button,select { border:1px solid var(--line); border-radius:9px; background:var(--panel2); color:var(--text); padding:9px 11px; }.status { padding:10px 12px; border-radius:10px; background:var(--panel); font-size:12px; }
.priority-control > div { display:grid; grid-template-columns:minmax(180px,1fr) minmax(150px,.5fr) auto; align-items:end; gap:10px; }.priority-control label { display:grid; gap:6px; color:var(--muted); font-size:10px; }.priority-control input { width:100%; border:1px solid var(--line); border-radius:9px; background:var(--panel2); color:var(--text); padding:9px 11px; }.priority-control button { color:var(--accent); font-weight:700; }
.pause-control { border-color:var(--wait); background:color-mix(in srgb,var(--wait) 10%,var(--panel2)); font-weight:700; }.pause-control.paused { border-color:var(--accent); background:color-mix(in srgb,var(--accent) 12%,var(--panel2)); }.pause-control:disabled { opacity:.55; cursor:wait; }
.kpis { display:grid; grid-template-columns:repeat(auto-fit,minmax(180px,1fr)); gap:12px; }.kpis article,.card { border:1px solid var(--line); border-radius:15px; background:color-mix(in srgb,var(--panel) 88%,transparent); padding:16px; }.kpis article { display:grid; gap:5px; }.kpis small,.card small { color:var(--muted); }.kpis strong { font-size:23px; }.kpis span { color:var(--muted); font-size:11px; }
.charts { display:grid; grid-template-columns:minmax(0,1.6fr) minmax(260px,.8fr); gap:12px; }.card { display:grid; gap:14px; }.card header span,.card header small { font-size:10px; }.latency,.throughput-chart { min-height:190px; color:var(--muted); font-size:10px; }.latency { display:grid; align-content:space-between; gap:4px; }.latency-row { display:grid; grid-template-columns:18px minmax(0,1fr) 48px; align-items:center; gap:7px; }.bar { height:7px; display:flex; overflow:hidden; border-radius:4px; background:var(--panel2); }.bar i { height:100%; }.bar .wait { background:var(--wait); }.bar .load { background:var(--load); }.bar .run { background:var(--accent); }
.throughput-chart { display:flex; align-items:stretch; justify-content:space-around; gap:4px; }.column { flex:1; display:grid; grid-template-rows:minmax(0,1fr) 13px; align-items:end; text-align:center; }.column i { display:block; width:100%; max-width:16px; justify-self:center; border-radius:4px 4px 2px 2px; background:linear-gradient(var(--accent),#197451); }.slots { display:flex; flex-wrap:wrap; gap:8px; color:var(--muted); font-size:11px; }.slots span { padding:8px 10px; border:1px solid var(--line); border-radius:9px; background:var(--panel2); }
.live-inference header > span { display:flex; align-items:center; gap:8px; }.pulse { width:8px; height:8px; border-radius:50%; background:var(--accent); box-shadow:0 0 9px var(--accent); animation:pulse 1.4s ease-in-out infinite; }.live-inference.idle .pulse { background:var(--muted); box-shadow:none; animation:none; }
.live-agents { display:flex; flex-wrap:wrap; gap:8px; }.agent-pill { display:inline-grid; grid-template-columns:8px auto auto; align-items:center; gap:7px; padding:7px 10px; border:1px solid var(--line); border-radius:999px; background:var(--panel2); }.agent-pill i { width:8px; height:8px; border-radius:50%; background:var(--muted); }.agent-pill.active i { background:var(--accent); box-shadow:0 0 8px color-mix(in srgb,var(--accent) 65%,transparent); }.agent-pill.waiting i { background:var(--wait); box-shadow:0 0 8px color-mix(in srgb,var(--wait) 55%,transparent); }.agent-pill.waiting.reserved { border-color:color-mix(in srgb,var(--wait) 48%,var(--line)); }.agent-pill strong { font-size:10px; }.agent-pill small { color:var(--muted); font-size:9px; }
.agent-pill.actionable { max-width:100%; grid-template-columns:8px auto minmax(0,1fr) auto; padding-right:5px; }.agent-pill.actionable small { overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.agent-pill .queue-release { align-self:center; min-height:25px; border:1px solid color-mix(in srgb,var(--accent) 50%,var(--line)); border-radius:999px; background:color-mix(in srgb,var(--accent) 12%,var(--panel)); color:var(--accent); padding:4px 9px; font-size:8px; line-height:1; font-weight:800; white-space:nowrap; cursor:pointer; transition:background .16s ease,border-color .16s ease,transform .16s ease; }.agent-pill .queue-release:hover { background:color-mix(in srgb,var(--accent) 20%,var(--panel)); border-color:var(--accent); transform:translateY(-1px); }.agent-pill .queue-release:focus-visible { outline:2px solid var(--accent); outline-offset:2px; }.agent-pill .queue-release:disabled { opacity:.55; cursor:wait; transform:none; }
.agent-pill.released { border-color:color-mix(in srgb,var(--accent) 62%,var(--line)); background:color-mix(in srgb,var(--accent) 8%,var(--panel2)); }.agent-pill .queue-released { color:var(--accent); padding:4px 8px; border-radius:999px; background:color-mix(in srgb,var(--accent) 14%,var(--panel)); font-size:8px; line-height:1; font-weight:800; white-space:nowrap; }
.agent-pill.priority { border-color:color-mix(in srgb,var(--accent) 55%,var(--line)); }
.live-slots { display:grid; grid-template-columns:repeat(auto-fit,minmax(240px,1fr)); gap:10px; }.live-slots article { display:grid; gap:9px; padding:12px; border:1px solid var(--line); border-radius:11px; background:var(--panel2); }.live-slots article.generating { border-color:color-mix(in srgb,var(--accent) 45%,var(--line)); }.live-slots article > div:first-child,.live-stats { display:flex; justify-content:space-between; gap:9px; }.live-slots article > div:first-child span,.live-stats,.live-slots article > small,.live-empty { color:var(--muted); font-size:10px; }.live-progress { height:8px; overflow:hidden; border-radius:5px; background:var(--bg); }.live-progress i { display:block; height:100%; border-radius:inherit; background:linear-gradient(90deg,#197451,var(--accent)); transition:width .35s ease; }.live-progress.indeterminate i { width:34%; background:linear-gradient(90deg,transparent,var(--accent),transparent); animation:generation 1.25s ease-in-out infinite; }.live-empty { margin:0; }
.agent-columns { grid-template-columns:repeat(auto-fit,minmax(300px,1fr)); align-items:start; }.agent-column { min-width:0; display:grid; gap:10px; padding:11px; border:1px solid var(--line); border-radius:14px; background:color-mix(in srgb,var(--panel) 76%,transparent); }.agent-column.priority { border-color:color-mix(in srgb,var(--accent) 58%,var(--line)); box-shadow:inset 0 0 0 1px color-mix(in srgb,var(--accent) 12%,transparent); }.agent-column > header { display:grid; grid-template-columns:minmax(0,1fr) auto auto; align-items:center; gap:9px; padding:1px 2px 5px; }.agent-column > header > span { display:flex; min-width:0; align-items:center; gap:8px; }.agent-column > header > span i { width:8px; height:8px; flex:0 0 auto; border-radius:50%; background:var(--accent); box-shadow:0 0 8px color-mix(in srgb,var(--accent) 60%,transparent); }.agent-column > header strong { overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }.agent-column > header small { color:var(--muted); font-size:9px; white-space:nowrap; }.priority-star { width:32px; height:32px; display:grid; place-items:center; padding:0; border-color:var(--line); color:var(--wait); font-size:18px; line-height:1; cursor:pointer; }.agent-column.priority .priority-star { border-color:var(--wait); background:color-mix(in srgb,var(--wait) 12%,var(--panel2)); }.priority-star:focus-visible { outline:2px solid var(--wait); outline-offset:2px; }
.live-slots article.waiting-request { border-color:color-mix(in srgb,var(--wait) 60%,var(--line)); background:color-mix(in srgb,var(--wait) 9%,var(--panel2)); }.waiting-request > div:first-child span { color:var(--wait) !important; font-weight:750; }.waiting-request.released { border-color:color-mix(in srgb,var(--accent) 58%,var(--line)); background:color-mix(in srgb,var(--accent) 8%,var(--panel2)); }.waiting-request.released > div:first-child span { color:var(--accent) !important; }.waiting-request .queue-release { justify-self:end; }
.live-stats .slot-elapsed { color:var(--accent); font-weight:750; }
.slot-client { margin-right:auto; padding:3px 6px; border-radius:999px; background:color-mix(in srgb,var(--accent) 13%,var(--panel2)); color:var(--accent) !important; font-size:8px !important; }
.live-slots article.slot-complete { border-color:color-mix(in srgb,var(--accent) 62%,var(--line)); background:color-mix(in srgb,var(--accent) 9%,var(--panel2)); }.live-slots article.slot-complete.just-completed { animation:slot-finished .42s cubic-bezier(.2,.8,.2,1) both; }
.completion-label { color:var(--accent) !important; font-weight:700; }.completion-message { display:flex; align-items:center; gap:9px; color:var(--text); font-size:11px; }.completion-message i { width:25px; height:25px; display:grid; place-items:center; border-radius:50%; background:var(--accent); color:#092219; font-style:normal; font-weight:900; box-shadow:0 0 16px color-mix(in srgb,var(--accent) 45%,transparent); }.slot-complete.just-completed .completion-message i { animation:check-pop .5s cubic-bezier(.2,1.7,.4,1) both; }.live-slots article.slot-complete.fading { pointer-events:none; animation:slot-fade .6s ease forwards; }
.table-wrap { overflow:auto; border:1px solid var(--line); border-radius:10px; } table { width:100%; border-collapse:collapse; white-space:nowrap; font-size:10px; } th,td { padding:9px; text-align:left; border-bottom:1px solid var(--line); } th { color:var(--muted); } tr:last-child td { border-bottom:0; }
@keyframes pulse { 50% { opacity:.4; transform:scale(.78); } }
@keyframes generation { from { transform:translateX(-105%); } to { transform:translateX(300%); } }
@keyframes slot-finished { from { opacity:0; transform:translateY(5px) scale(.98); } to { opacity:1; transform:none; } }
@keyframes check-pop { from { transform:scale(.2) rotate(-25deg); opacity:0; } to { transform:scale(1) rotate(0); opacity:1; } }
@keyframes slot-fade { to { opacity:0; transform:translateY(-7px) scale(.98); } }
@media(prefers-reduced-motion:reduce) { .live-slots article.slot-complete,.completion-message i,.live-slots article.slot-complete.fading { animation-duration:.01ms; } }
@media(max-width:760px) { .hero { align-items:flex-start; flex-direction:column; }.toolbar { width:100%; flex-wrap:wrap; justify-content:flex-start; }.toolbar .pause-control { order:3; flex-basis:100%; }.agent-columns { grid-template-columns:1fr; }.charts { grid-template-columns:1fr; } main { width:min(100% - 18px,1400px); padding-top:16px; } }
.login-page { min-height:100dvh; }.login-shell { min-height:100dvh; display:grid; place-items:center; padding:20px; }.login-card { width:min(100%,390px); display:grid; gap:14px; padding:28px; border:1px solid var(--line); border-radius:20px; background:color-mix(in srgb,var(--panel) 94%,transparent); box-shadow:0 24px 80px #0008; }.login-card h1 { margin:0; font-size:30px; }.login-card label { display:grid; gap:6px; color:var(--muted); font-size:11px; }.login-card input { width:100%; border:1px solid var(--line); border-radius:10px; background:var(--panel2); color:var(--text); padding:12px; font-size:16px; }.login-card button { margin-top:4px; color:var(--accent); font-weight:700; }.app-mark { width:48px; height:48px; display:grid; place-items:center; border-radius:14px; background:#193029; color:var(--accent); font-size:25px; font-weight:800; }.login-error { min-height:18px; color:#ff7d83; font-size:11px; }