:root{
  color-scheme:dark;
  --bg:#09090c;--sidebar:#0d0d12;--surface:#111116;--surface-hover:#17151e;
  --line:#27252e;--line-soft:#24232b;--text:#edecf1;--muted:#8b8896;
  --purple:#751ed9;--purple-light:#b486ef;--purple-faint:#201329;--success:#70c6a3;
  font-family:Inter,-apple-system,BlinkMacSystemFont,"Segoe UI",system-ui,sans-serif;
  font-size:13px;font-weight:400;letter-spacing:-.012em;background:var(--bg);color:var(--text);
}
*{box-sizing:border-box}
[hidden]{display:none!important}
body{margin:0;min-width:320px}button,input,select{font:inherit}
button{cursor:pointer}button:disabled,input:disabled,select:disabled{cursor:not-allowed}
button:focus-visible,input:focus-visible,select:focus-visible{outline:2px solid var(--purple-light);outline-offset:3px}
a{color:var(--purple-light)}svg{width:17px;height:17px;stroke-width:1.6}
.shell{min-height:100vh;display:flex}
.sidebar{position:sticky;top:0;height:100vh;flex:0 0 226px;display:flex;flex-direction:column;background:var(--sidebar);border-right:1px solid var(--line);padding:23px 13px 16px}
.brand{height:56px;display:flex;align-items:flex-start;gap:11px;padding:3px 11px;font-size:12px;letter-spacing:.035em}
.brand-text{padding-top:7px;white-space:nowrap}
.brand-text strong{font-weight:760;color:#f1eff4}
.brand-muted{color:#74717e;font-weight:450}
.brand-placeholder{width:28px;height:28px;border-radius:7px;display:grid;place-items:center;flex:0 0 28px;border:1px solid #3c2b49;background:linear-gradient(160deg,#281737,#15101b);font-size:15px;color:#ccabee;font-weight:720;letter-spacing:-.04em}
.navigation{display:flex;flex-direction:column;gap:3px}
.nav-heading{margin:19px 12px 8px;color:#73707d;text-transform:uppercase;font-size:10px;font-weight:680;letter-spacing:.12em}
.nav-system{margin-top:27px}
.nav-link{width:100%;text-align:left;display:flex;align-items:center;gap:11px;padding:10px 11px;color:#9d9aa5;background:transparent;border:1px solid transparent;border-radius:7px;font-weight:520;position:relative;transition:color .16s,background .16s}
.nav-link svg{flex-shrink:0;color:inherit}
.nav-link:hover{background:#18151d;color:#ded5eb}
.nav-link.selected{color:var(--purple-light);background:var(--purple-faint);border-color:#352043;font-weight:620}
.nav-link.selected:before{content:"";position:absolute;top:7px;bottom:7px;left:0;width:2px;border-radius:1px;background:var(--purple)}
.sidebar-footer{display:flex;align-items:center;gap:10px;margin-top:auto;border-top:1px solid var(--line);padding:18px 9px 2px}
.owner-avatar,.topbar-circle{width:28px;height:28px;display:grid;place-items:center;border-radius:50%;background:#312040;border:1px solid #4d3260;color:#dcc7f3;font-size:11px;font-weight:740}
.footer-detail{display:flex;flex-direction:column;gap:4px;min-width:0;flex:1}
.footer-detail strong{font-size:11px;font-weight:600}
.footer-detail span{font-size:10px;color:var(--muted)}
.logout-button{background:transparent;color:#817b8b;border:0;padding:7px;border-radius:6px}
.logout-button:hover{background:#231629;color:var(--purple-light)}
.logout-button svg{width:16px;height:16px}
.main{flex:1;min-width:0}
.topbar{height:59px;border-bottom:1px solid var(--line);display:flex;align-items:center;justify-content:space-between;padding:0 34px;gap:15px}
.breadcrumb{font-size:12px;white-space:nowrap;color:#94919f}
.breadcrumb strong{color:var(--text);font-weight:660}
.crumb-slash{margin:0 10px;color:#5b5666}
.topbar-right{display:flex;align-items:center;gap:14px}
.preview-badge{border:1px solid #37323d;padding:6px 9px;border-radius:5px;font-size:10px;letter-spacing:.06em;color:#a8a1af;white-space:nowrap}
.topbar-circle{width:24px;height:24px;font-size:10px}
.content{padding:32px 34px 56px;max-width:1160px;margin:0 auto}
.page{display:none;animation:appear .16s ease-out}
.page.visible{display:block}
@keyframes appear{from{opacity:.8;transform:translateY(3px)}to{opacity:1;transform:none}}
.page-intro{margin-bottom:27px}
.eyebrow{font-size:10px;font-weight:650;letter-spacing:.13em;color:#706c7b;margin-bottom:11px}
h1{font-size:27px;letter-spacing:-.052em;font-weight:665;margin:0 0 6px}
h2,h3{font-size:13px;font-weight:645;margin:0;letter-spacing:-.019em}
p{margin:0;color:var(--muted);line-height:1.65}
.page-intro p{font-size:12px}
.metrics{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:12px}
.metric-card,.panel{border:1px solid var(--line);background:var(--surface);border-radius:9px}
.metric-card{padding:19px 20px}
.metric-title{font-size:11px;color:#9a97a3}
.metric-value{font-size:25px;letter-spacing:-.052em;font-weight:690;margin:13px 0 6px;overflow-wrap:anywhere}
.metric-denom{font-size:13px;font-weight:500;color:#736e80}
.metric-detail{font-size:10px;color:#817c8c}
.section-bar{display:flex;align-items:center;justify-content:space-between;gap:16px;margin:29px 0 12px}
.section-bar span{font-size:10px;color:#777280;text-align:right}
.panel-grid{display:grid;grid-template-columns:1.09fr .91fr;gap:12px}
.panel{padding:20px}
.panel-heading{display:flex;justify-content:space-between;gap:12px;align-items:center;margin-bottom:15px}
.subtle-tag,.accent-tag,.outline-tag{font-size:10px;font-weight:560;border-radius:5px;padding:5px 8px;white-space:nowrap}
.subtle-tag,.outline-tag{border:1px solid #39353f;color:#9d97a5}
.accent-tag{border:1px solid #49305a;color:#bf92fa;background:#211529}
.service-row{border-top:1px solid var(--line);display:flex;align-items:center;gap:11px;padding:14px 0}
.panel-heading+.service-row{border-top:none}
.service-symbol{height:26px;width:26px;flex:0 0 26px;border:1px solid #302b39;background:#19171e;color:#bdb2d0;border-radius:6px;display:grid;place-items:center;font-size:11px;font-weight:700}
.service-description{min-width:0;flex:1;display:flex;flex-direction:column;gap:5px}
.service-description strong{font-size:12px;font-weight:585}
.service-description span{font-size:10px;color:#7e7989}
.service-state{font-size:10px;color:#a7c7b3;white-space:nowrap}
.service-state i{display:inline-block;width:6px;height:6px;border-radius:50%;background:var(--success);margin-right:7px;vertical-align:middle}
.input-label{display:block;color:#b7b2be;font-size:11px;font-weight:560;margin-bottom:9px}
.control{display:block;background:#18161e;border:1px solid #37323e;border-radius:6px;padding:10px 11px;color:#ece8f0;outline:none;width:100%;max-width:100%;font-size:12px}
.control:focus{border-color:#8c4cc7;box-shadow:0 0 0 3px #751ed922}
.control:disabled{opacity:.55}
.quiet-note{font-size:11px;color:#7f7988;margin-top:12px;line-height:1.65}
.panel-divider{height:1px;background:var(--line);margin:18px 0}
.primary-btn,.secondary-btn{border-radius:6px;display:inline-flex;align-items:center;justify-content:space-between;gap:15px;padding:10px 13px;font-size:11px;font-weight:660;transition:filter .12s,border-color .12s}
.primary-btn{color:white;background:var(--purple);border:1px solid #8b3bf0;box-shadow:0 0 0 1px #33104933}
.primary-btn:hover{filter:brightness(1.15)}
.secondary-btn{color:#d8d1e0;border:1px solid #3b3244;background:#211c28}
.secondary-btn:hover{border-color:#6d4d83}
.milestone{display:flex;align-items:center;justify-content:space-between;gap:20px}
.milestone-title{display:block;font-size:12px;font-weight:610;margin-bottom:6px}
.milestone p{font-size:11px}
.settings-panel{max-width:880px}
.form-grid{display:grid;grid-template-columns:1fr 1fr;gap:14px;margin-bottom:18px}
.custom-league{max-width:490px;margin-bottom:12px}
.setting-row{display:flex;align-items:center;justify-content:space-between;gap:18px;padding:17px 0;border-top:1px solid var(--line)}
.setting-row strong{font-size:12px;font-weight:590}
.setting-row p{font-size:10.5px;margin-top:5px}
.toggle{position:relative;display:inline-block;cursor:pointer;flex:0 0 34px}
.toggle input{position:absolute;opacity:0;width:34px;height:20px;margin:0;cursor:pointer}
.toggle-track{display:block;width:34px;height:20px;border-radius:20px;background:#3b3641;position:relative;transition:background .18s}
.toggle-track:before{position:absolute;content:"";width:14px;height:14px;top:3px;left:3px;border-radius:50%;background:#fff;transition:transform .18s}
.toggle input:checked+.toggle-track{background:var(--purple)}
.toggle input:checked+.toggle-track:before{transform:translateX(14px)}
.toggle input:disabled+.toggle-track{opacity:.4;cursor:not-allowed}
.toggle input:focus-visible+.toggle-track{outline:2px solid var(--purple-light);outline-offset:3px}
.settings-footer{display:flex;align-items:center;justify-content:space-between;gap:18px;border-top:1px solid var(--line);padding-top:20px;margin-top:3px}
.settings-footer p{font-size:11px}
.planned-panel{max-width:810px;padding:28px}
.planned-panel h2{font-size:23px;letter-spacing:-.045em;margin:17px 0 9px}
.planned-panel>p{font-size:12px;max-width:520px}
.planned-panel .setting-row:last-child{padding-bottom:0}
.knowledge-foot{max-width:880px;margin-top:12px}
.knowledge-foot p{font-size:11px;margin:9px 0 12px}
.knowledge-foot code,.domain-code{font-family:ui-monospace,Menlo,Consolas,monospace;font-size:11px;color:#b990f5}
.domain-code span{color:#77717f;font-family:inherit}
.budget-value{font-size:28px;letter-spacing:-.06em;font-weight:670;margin:13px 0 5px}
.budget-caption{margin-top:20px}
.budget-input{max-width:150px;margin-bottom:14px}
input[type=range]{width:100%;accent-color:var(--purple);cursor:pointer}
.range-ends{display:flex;justify-content:space-between;color:#797381;font-size:10px;margin-top:6px}
.toast{position:fixed;bottom:20px;right:20px;max-width:360px;padding:12px 15px;border-radius:7px;background:#21182c;border:1px solid #614078;box-shadow:0 14px 50px #0009;color:#e9d7ff;font-size:12px;line-height:1.5;z-index:5}
.toast.error{border-color:#85494d;color:#ffd7d7;background:#2c191b}
.login-page{min-height:100vh;display:grid;place-items:center;padding:24px;background:radial-gradient(ellipse 500px 330px at 50% 50%,#17101f 0%,#0c0a11 80%,#09090c)}
.login-wrap{width:100%;max-width:400px}
.login-brand{display:flex;align-items:center;gap:10px;justify-content:center;margin-bottom:25px;font-size:12px;letter-spacing:.045em}
.login-brand strong{font-weight:760}
.login-brand .brand-muted{margin-left:-3px}
.login-card{background:#111116;border:1px solid #302935;border-radius:12px;padding:32px;box-shadow:0 25px 85px #0008}
.login-card .eyebrow{margin-bottom:12px}
.login-card h1{font-size:26px;margin-bottom:8px}
.login-card .intro-desc{font-size:12px;margin-bottom:26px}
.login-form label{display:block;font-size:11px;font-weight:600;margin-bottom:9px}
.login-form input{width:100%;height:43px;border:1px solid #40384a;background:#19151f;border-radius:6px;color:#f2ecf4;padding:0 12px;outline:0}
.login-form input:focus{border-color:#a36de7;box-shadow:0 0 0 3px #751ed92e}
.login-submit{width:100%;margin-top:17px;height:41px}
.login-footer{text-align:center;font-size:10px;color:#66616e;margin-top:21px}
.error-message{color:#f3a9b1;font-size:11px;margin:11px 0 0}
@media(max-width:900px){.sidebar{flex-basis:195px}.content{padding:27px 23px 45px}.topbar{padding:0 23px}.panel-grid{grid-template-columns:1fr}.metric-card{padding:16px}}
@media(max-width:650px){
.shell{display:block}.sidebar{position:static;height:auto;width:100%;padding:11px 10px 9px;border-right:none;border-bottom:1px solid var(--line)}
.brand{height:auto;padding:3px 7px 12px;align-items:center}.brand-text{padding-top:0}
.navigation{flex-direction:row;gap:3px;overflow:auto;scrollbar-width:none}.nav-heading,.sidebar-footer{display:none}
.nav-link{width:auto;white-space:nowrap;flex:0 0 auto;gap:7px;padding:9px 10px;font-size:11px}
.nav-link svg{width:14px;height:14px}.nav-link.selected:before{top:auto;bottom:0;left:10px;right:10px;width:auto;height:2px}
.topbar{height:46px;padding:0 15px}.topbar-circle{display:none}.preview-badge{font-size:9px}
.content{padding:23px 15px 35px}.page-intro{margin-bottom:23px}.metrics{gap:7px}.metric-card{padding:13px 11px}.metric-title{font-size:10px}.metric-value{font-size:20px}.metric-detail{font-size:9px}
.panel{padding:16px}.section-bar{margin:23px 0 11px}.section-bar span{font-size:9px}
.form-grid{grid-template-columns:1fr;gap:10px}.settings-footer{flex-direction:column;align-items:flex-start}
.login-card{padding:25px}.login-page{padding:18px}
}
@media(max-width:375px){.metrics{grid-template-columns:1fr 1fr}.metrics .metric-card:last-child{grid-column:1/-1}}

/* Real service probes: do not paint unknown or failed services green. */
.service-state.state-offline{color:#aaa1af}
