:root {
  color-scheme: dark;
  --bg:#0a0d0e;
  --panel:#111516;
  --panel-2:#151a1b;
  --line:#2a302f;
  --text:#f3efe6;
  --muted:#a9aea9;
  --gold:#e4b84e;
  --gold-2:#806828;
  --green:#69bf48;
  --green-2:#203d20;
  --blue:#5d91d8;
  --red:#ef5c52;
  --amber:#e7ad35;
  --radius:10px;
  font-family: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
}
*{box-sizing:border-box}
html,body{margin:0;min-height:100%;background:var(--bg);color:var(--text)}
body{font-size:14px}
button,input,select{font:inherit}
button{color:inherit}
a{color:var(--gold)}
.hidden{display:none!important}
.muted{color:var(--muted)}
.eyebrow{margin:0 0 4px;color:var(--gold);font-size:11px;font-weight:800;letter-spacing:.16em}
.app-shell{display:grid;grid-template-columns:246px 1fr;min-height:100vh}
.sidebar{position:sticky;top:0;height:100vh;padding:22px 14px;border-right:1px solid var(--line);background:linear-gradient(180deg,#0c1011,#090c0d);display:flex;flex-direction:column}
.brand{display:flex;align-items:center;gap:11px;padding:0 8px 24px;color:#f0c961;font-family:Georgia,serif;font-size:19px;font-weight:700}
.brand-mark{display:grid;place-items:center;width:50px;height:50px;border:2px solid var(--gold);border-radius:50%;color:var(--gold);font-family:Georgia,serif;font-size:32px}
.brand-mark.small{width:34px;height:34px;font-size:23px}
#nav{display:grid;gap:5px}
.nav-item{width:100%;display:flex;align-items:center;gap:13px;padding:12px 14px;border:1px solid transparent;border-radius:8px;background:transparent;text-align:left;color:#e6e7e2;cursor:pointer}
.nav-item:hover{background:#121718}
.nav-item.active{border-color:#5f4e22;background:linear-gradient(90deg,#171814,#111514);color:var(--gold)}
.nav-item span{font-size:14px}
.sidebar-foot{margin-top:auto;padding:16px;border:1px solid var(--line);border-radius:9px;display:grid;gap:11px;background:#111514}
.sidebar-foot a{font-size:12px;color:var(--muted)}
.status-line{display:flex;align-items:center;gap:8px;font-size:12px}
.dot{display:inline-block;width:9px;height:9px;border-radius:50%;background:#67706d;box-shadow:0 0 0 3px rgba(103,112,109,.15)}
.dot.good{background:var(--green);box-shadow:0 0 0 3px rgba(105,191,72,.16)}
.dot.bad{background:var(--red);box-shadow:0 0 0 3px rgba(239,92,82,.16)}
.main{min-width:0;padding:0 22px 28px}
.topbar{height:76px;display:flex;align-items:center;justify-content:space-between;border-bottom:1px solid var(--line)}
.topbar h1{margin:0;font-size:25px;font-weight:700}
.top-actions{display:flex;align-items:center;gap:12px}
.domain{color:var(--muted);font-size:12px}
.pill{display:inline-flex;align-items:center;gap:8px;padding:8px 11px;border:1px solid var(--line);border-radius:999px;background:#101415;font-size:12px}
.button{border:1px solid #3a403f;border-radius:7px;background:#131718;padding:9px 13px;cursor:pointer}
.button:hover{border-color:#656d6a}
.button.primary{border-color:#e1b84e;background:linear-gradient(180deg,#eccb72,#d9a93c);color:#17130a;font-weight:750}
.button.full{width:100%}
.view{padding-top:18px}
.alert{margin:14px 0 0;padding:11px 14px;border:1px solid #6d5420;border-radius:8px;background:#211b0f;color:#f1cd72}
.alert.danger{border-color:#70322e;background:#241211;color:#ffaaa3}
.loading-card{margin-top:20px;padding:32px;border:1px solid var(--line);border-radius:var(--radius);background:var(--panel);color:var(--muted)}
.toolbar{display:flex;gap:10px;align-items:center;flex-wrap:wrap;margin-bottom:14px}
.toolbar .spacer{flex:1}
.input,.select{min-height:38px;padding:8px 11px;border:1px solid #343a39;border-radius:7px;background:#0e1213;color:var(--text);outline:none}
.input:focus,.select:focus{border-color:var(--gold-2)}
.input.search{min-width:310px}
.period-tabs{display:flex;border:1px solid var(--line);border-radius:7px;overflow:hidden}
.period-tabs button{border:0;border-right:1px solid var(--line);padding:9px 14px;background:#111516;cursor:pointer}
.period-tabs button:last-child{border-right:0}
.period-tabs button.active{background:#2a2517;color:#f0c65b}
.grid{display:grid;gap:14px}
.kpis{grid-template-columns:repeat(5,minmax(140px,1fr));margin-bottom:14px}
.card{border:1px solid var(--line);border-radius:var(--radius);background:linear-gradient(145deg,#131718,#0f1314);overflow:hidden}
.card-pad{padding:16px}
.card h2,.card h3{margin:0}
.card-head{display:flex;align-items:center;justify-content:space-between;padding:14px 16px;border-bottom:1px solid var(--line)}
.card-head h2{font-size:16px}
.kpi{padding:15px 16px;min-height:112px}
.kpi .label{color:#d8dbd5;font-size:13px}
.kpi .value{margin:8px 0 5px;font-size:31px;line-height:1;font-weight:750}
.kpi .sub{font-size:11px;color:var(--muted)}
.green{color:var(--green)} .gold{color:var(--gold)} .red{color:var(--red)} .blue{color:var(--blue)}
.layout-main{grid-template-columns:minmax(0,1.7fr) minmax(320px,.8fr)}
.layout-equal{grid-template-columns:1fr 1fr}
.stack{display:grid;gap:14px}
.table-wrap{overflow:auto}
table{width:100%;border-collapse:collapse;font-size:12px}
th{padding:11px 12px;border-bottom:1px solid var(--line);color:#bfc4bf;text-align:left;font-weight:600;white-space:nowrap}
td{padding:11px 12px;border-bottom:1px solid #242a29;vertical-align:middle}
tbody tr{cursor:pointer}
tbody tr:hover{background:#151a19}
tbody tr.selected{background:#211f17;outline:1px solid #715d29;outline-offset:-1px}
.badge{display:inline-flex;align-items:center;gap:6px;padding:4px 7px;border-radius:6px;background:#252b2a;color:#dfe3dd;font-size:11px;white-space:nowrap}
.badge.good{background:#284923;color:#bdf2ab}.badge.warn{background:#554116;color:#ffe09a}.badge.bad{background:#51201d;color:#ffb7b1}.badge.info{background:#183754;color:#b8d9ff}
.progress{height:7px;border-radius:99px;background:#2c3231;overflow:hidden}
.progress>span{display:block;height:100%;border-radius:inherit;background:linear-gradient(90deg,#5aac3d,#79d455)}
.progress.gold>span{background:linear-gradient(90deg,#b78220,#efc85d)}
.chart{height:260px;padding:20px 16px 14px;display:flex;align-items:flex-end;gap:7px;border-bottom:1px solid #242a29;background:repeating-linear-gradient(to top,transparent 0,transparent 51px,#222827 52px)}
.chart-col{flex:1;height:100%;display:flex;align-items:flex-end;gap:2px;position:relative;min-width:8px}
.chart-col span{display:block;flex:1;min-height:2px;border-radius:3px 3px 0 0}
.chart-col .improved{background:var(--green)}
.chart-col .new{background:var(--gold)}
.chart-col .regressed{background:var(--red)}
.chart-col label{position:absolute;bottom:-30px;left:50%;transform:translateX(-50%);font-size:9px;color:var(--muted);white-space:nowrap}
.chart-legend{display:flex;gap:18px;padding:14px 16px;color:var(--muted);font-size:11px}
.legend-dot{display:inline-block;width:9px;height:9px;margin-right:6px;border-radius:2px}
.legend-dot.improved{background:var(--green)}.legend-dot.new{background:var(--gold)}.legend-dot.regressed{background:var(--red)}
.donut{--p:50;--c:var(--green);width:132px;height:132px;border-radius:50%;background:conic-gradient(var(--c) calc(var(--p)*1%),#29302e 0);display:grid;place-items:center;margin:8px auto;position:relative}
.donut:after{content:"";position:absolute;width:78px;height:78px;border-radius:50%;background:#121617}
.donut strong{position:relative;z-index:1;font-size:24px}
.split-metric{display:grid;grid-template-columns:1fr auto;gap:6px;padding:12px 0;border-bottom:1px solid #272c2b}
.split-metric:last-child{border-bottom:0}
.queue-row,.event-row{display:grid;grid-template-columns:auto 1fr auto;gap:12px;align-items:center;padding:11px 14px;border-bottom:1px solid #252b2a}
.queue-row:last-child,.event-row:last-child{border-bottom:0}
.queue-index{width:25px;height:25px;display:grid;place-items:center;border-radius:50%;background:#222826;color:var(--muted);font-size:11px}
.row-title{font-weight:650}.row-sub{margin-top:3px;color:var(--muted);font-size:11px}
.empty{padding:28px;text-align:center;color:var(--muted)}
.cohort-row{display:grid;grid-template-columns:160px 70px 1fr 55px;gap:12px;align-items:center;padding:13px 15px;border-bottom:1px solid #252b2a}
.metric-list{display:grid;gap:2px}
.process-band{display:flex;align-items:center;justify-content:space-between;padding:14px 16px;margin-bottom:14px;border:1px solid #315c2c;border-radius:9px;background:#101810}
.process-band.off{border-color:#6a352f;background:#1b1110}
.process-left{display:flex;align-items:center;gap:10px;font-weight:700}
.stepper{display:grid;grid-template-columns:repeat(5,1fr);gap:8px;padding:16px}
.step{padding:12px 8px;border:1px solid var(--line);border-radius:8px;text-align:center;color:var(--muted);font-size:11px}
.step.active{border-color:#786324;background:#211d12;color:var(--gold)}
.loop-flow{display:grid;grid-template-columns:repeat(5,1fr);gap:10px;padding:18px 16px}
.loop-node{position:relative;padding:13px 9px;border:1px solid #4c432a;border-radius:8px;text-align:center;background:#161714}
.loop-node:not(:last-child):after{content:"→";position:absolute;right:-15px;top:38%;color:var(--gold)}
.drawer{position:fixed;z-index:10;top:0;right:0;width:min(430px,92vw);height:100vh;padding:20px;border-left:1px solid var(--line);background:#0e1213;box-shadow:-18px 0 50px rgba(0,0,0,.45);overflow:auto}
.drawer-top{display:flex;justify-content:space-between;gap:12px;align-items:flex-start;border-bottom:1px solid var(--line);padding-bottom:14px;margin-bottom:14px}
.drawer-close{border:0;background:transparent;font-size:22px;cursor:pointer}
.detail-grid{display:grid;grid-template-columns:130px 1fr;gap:9px;font-size:12px}
.detail-grid dt{color:var(--muted)}.detail-grid dd{margin:0;word-break:break-word}
.settings-grid{display:grid;grid-template-columns:minmax(0,1fr) 330px;gap:14px}
.setting-row{display:grid;grid-template-columns:1fr auto;gap:16px;padding:14px 16px;border-bottom:1px solid #252b2a}
.setting-row:last-child{border-bottom:0}
.toggle{width:40px;height:22px;border-radius:99px;background:#313735;position:relative}
.toggle:after{content:"";position:absolute;width:16px;height:16px;left:3px;top:3px;border-radius:50%;background:#d9ded8}
.toggle.on{background:#4b9536}.toggle.on:after{left:21px}
.login-page{min-height:100vh;display:grid;place-items:center;padding:20px;background:radial-gradient(circle at 50% 20%,#18201e,#090c0d 55%)}
.login-card{width:min(420px,100%);padding:34px;border:1px solid #303633;border-radius:14px;background:#101415;box-shadow:0 28px 80px rgba(0,0,0,.45);text-align:center}
.login-card .brand-mark{margin:0 auto 18px}
.login-card h1{margin:5px 0 10px}
.login-card form{text-align:left;margin-top:24px}
.login-card label{display:block;margin-bottom:7px;color:#d8dbd5}
.login-card input{width:100%;padding:12px;border:1px solid #3d4441;border-radius:7px;background:#090c0d;color:white;margin-bottom:12px}
.form-error{color:#ff8e87;font-size:12px}
@media (max-width:1100px){.kpis{grid-template-columns:repeat(3,1fr)}.layout-main,.layout-equal,.settings-grid{grid-template-columns:1fr}.app-shell{grid-template-columns:205px 1fr}}
@media (max-width:760px){.app-shell{display:block}.sidebar{position:relative;width:100%;height:auto}.sidebar-foot{display:none}#nav{grid-template-columns:repeat(4,1fr)}.nav-item{justify-content:center;padding:9px}.nav-item span{display:none}.main{padding:0 12px 20px}.topbar{height:auto;padding:14px 0;align-items:flex-start}.top-actions{flex-wrap:wrap;justify-content:flex-end}.domain{display:none}.kpis{grid-template-columns:repeat(2,1fr)}.input.search{min-width:100%;width:100%}.cohort-row{grid-template-columns:1fr 60px}.cohort-row .progress{grid-column:1/-1}.chart{height:220px}.loop-flow{grid-template-columns:1fr}.loop-node:not(:last-child):after{content:"↓";right:auto;left:50%;top:auto;bottom:-17px}}