:root { color-scheme: dark; --bg:#101812; --panel:#17221b; --line:#26362a; --text:#edf4ed; --muted:#91a397; --green:#8fe0a7; --red:#ff8b83; --yellow:#f0c878; }
* { box-sizing:border-box; }
body { margin:0; background:radial-gradient(ellipse at 50% -20%,#22372a 0,transparent 55%),var(--bg); color:var(--text); font:15px/1.5 'DM Sans',system-ui,sans-serif; }
button,input { font:inherit; }
button { cursor:pointer; }
.shell { width:min(980px,100%); margin:0 auto; padding:20px 24px 30px; }
.topbar,.top-actions,.brand,.heading-row,.section-heading,.metric-top,.session-head,.session-actions,.container-row { display:flex; align-items:center; }
.topbar,.heading-row,.section-heading,.metric-top,.session-head { justify-content:space-between; }
.topbar { min-height:46px; margin-bottom:34px; }
.brand { gap:10px; color:var(--text); text-decoration:none; font-weight:700; letter-spacing:.08em; font-size:13px; }
.brand-mark { display:grid; place-items:center; width:31px; height:31px; border:1px solid #5d8065; border-radius:9px; color:var(--green); font-family:'DM Mono',monospace; }
.muted,.session-meta,.metric-note,.container-status,footer { color:var(--muted); }
.top-actions { gap:16px; }
.connection,.pill { display:inline-flex; align-items:center; gap:7px; font-size:12px; color:var(--green); }
.connection i,.pill i,.container-dot { width:7px; height:7px; border-radius:50%; background:currentColor; box-shadow:0 0 12px currentColor; }
.connection.offline { color:var(--red); }
.quiet,.refresh { border:1px solid var(--line); color:var(--muted); background:transparent; border-radius:9px; padding:8px 12px; }
.quiet:hover,.refresh:hover { color:var(--text); border-color:#5e7964; }
h1,h2,h3,p { margin-top:0; }
h1 { margin-bottom:0; font-size:clamp(27px,5vw,38px); letter-spacing:-.045em; }
h2 { margin:0; font-size:21px; letter-spacing:-.025em; }
.accent { color:var(--green); }
.eyebrow { margin:0 0 6px; color:var(--green); font:11px 'DM Mono',monospace; letter-spacing:.12em; }
.updated { margin:8px 0 19px; color:var(--muted); font:12px 'DM Mono',monospace; }
.panel { border:1px solid var(--line); border-radius:14px; background:linear-gradient(145deg,rgba(255,255,255,.025),transparent 65%),var(--panel); }
.login { max-width:500px; margin:8vh auto; padding:32px; }
.login h1 { margin-bottom:8px; }
.login>p:not(.eyebrow) { color:var(--muted); }
form label { display:block; margin:22px 0 7px; font-size:13px; }
.password-row { display:flex; gap:8px; }
input { min-width:0; flex:1; color:var(--text); border:1px solid var(--line); border-radius:9px; background:#0e1711; padding:11px 12px; }
.password-row button { border:0; border-radius:9px; padding:10px 14px; color:#112017; background:var(--green); font-weight:700; }
.error { min-height:22px; margin:7px 0 0; color:var(--red); font-size:13px; }
.heading-row { margin-bottom:0; }
.refresh { width:40px; height:40px; font-size:23px; line-height:1; }
.metrics { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:12px; }
.metric { min-height:124px; padding:15px 16px; }
.metric-top { color:var(--muted); font-size:13px; }
.metric-top span:last-child { color:var(--text); font:12px 'DM Mono',monospace; }
.track { height:6px; margin:13px 0 11px; border-radius:8px; overflow:hidden; background:#28372c; }
.track progress { display:block; width:100%; height:6px; appearance:none; border:0; background:#28372c; }
.track progress::-webkit-progress-bar { border-radius:8px; background:#28372c; }
.track progress::-webkit-progress-value { border-radius:8px; background:var(--green); }
.track progress::-moz-progress-bar { border-radius:8px; background:var(--green); }
.warn .track progress::-webkit-progress-value { background:var(--yellow); }.warn .track progress::-moz-progress-bar { background:var(--yellow); }
.danger .track progress::-webkit-progress-value { background:var(--red); }.danger .track progress::-moz-progress-bar { background:var(--red); }
.metric strong { font:500 19px 'DM Mono',monospace; }
.metric strong small { color:var(--muted); font-size:12px; }
.metric-note { display:block; margin-top:3px; font-size:12px; }
.load-numbers { display:flex; gap:14px; margin:17px 0 13px; }
.load-numbers strong { font-size:22px; }
.section { margin-top:32px; }
.section-heading { margin-bottom:13px; }
.heading-actions { display:flex; align-items:center; gap:14px; }
.external-link { color:var(--green); text-decoration:none; font-size:12px; }.external-link:hover { text-decoration:underline; }
.count { color:var(--muted); font:12px 'DM Mono',monospace; }
.session-list { display:grid; gap:9px; }
.session { padding:14px 16px; }
.session-head { align-items:flex-start; gap:10px; }
.agent { color:var(--green); text-transform:uppercase; font:10px 'DM Mono',monospace; letter-spacing:.08em; }
.session h3 { margin:3px 0 2px; font-size:15px; font-weight:600; }
.session-meta { font:11px 'DM Mono',monospace; }
.pill { flex:none; margin-top:4px; color:var(--muted); border:1px solid var(--line); padding:4px 8px; border-radius:99px; }
.pill.good { color:var(--green); }
.pill i { width:6px; height:6px; }
.session-actions { justify-content:flex-end; margin-top:12px; }
.action-button { border:1px solid #3b5140; border-radius:8px; background:#1c2b20; color:var(--green); padding:7px 11px; font-size:12px; }
.action-button.stop { border-color:#59413e; color:var(--red); background:#2b201f; }
.action-button:disabled { opacity:.5; cursor:wait; }
.container-list { display:grid; gap:7px; }
.container-row { flex-wrap:wrap; gap:10px; padding:10px 13px; font-size:13px; }
.container-dot { flex:none; width:7px; height:7px; color:var(--red); background:currentColor; box-shadow:none; }
.container-dot.running { color:var(--green); }
.container-row strong { min-width:120px; font-weight:600; }
.container-status { margin-right:auto; font-size:12px; }
.container-stat { color:var(--muted); font:11px 'DM Mono',monospace; }
.failed-list { padding:14px; border-color:#5b4039; color:#ffc2a8; font:12px/1.8 'DM Mono',monospace; }
.placeholder { padding:20px; color:var(--muted); text-align:center; }
.notice { position:fixed; right:20px; bottom:20px; max-width:min(440px,calc(100vw - 40px)); padding:12px 16px; border:1px solid #3b6b4a; border-radius:10px; background:#1a3021; box-shadow:0 12px 36px #0008; }
.error-notice { border-color:#75433e; background:#382322; }
footer { margin-top:36px; text-align:center; font-size:11px; }
.hidden { display:none !important; }
@media(max-width:600px) { .shell { padding:14px 14px 25px; }.topbar { margin-bottom:24px; }.metrics { gap:8px; }.metric { min-height:117px; padding:12px; }.metric strong { font-size:16px; }.load-numbers { gap:9px; }.load-numbers strong { font-size:18px; }.session { padding:12px; }.session-head { flex-direction:column; }.pill { margin-top:0; }.container-row { gap:7px; }.container-row strong { min-width:calc(100% - 28px); }.container-status { margin-left:17px; }.login { margin:7vh auto; padding:24px 19px; } }