/* Roma Tech — admin console */
:root{
  --bg:#081222; --panel:#0f1e35; --panel-2:#13253f; --panel-3:#1a2f4d;
  --side:#0c1a2e;
  --line:#1b3050; --line-2:#24405f;
  --fg:#e9f1fd; --dim:#8ea6c6; --faint:#6680a5;
  --accent:#2563eb; --accent-2:#3b82f6; --accent-3:#60a5fa;

  --green:#22c55e; --blue:#3b82f6; --purple:#8b5cf6; --gold:#eab308; --teal:#10b981;
  --red:#ef4444; --amber:#f59e0b; --grey:#94a3b8;

  --r:16px; --r-sm:10px;
  --sidebar:248px; --rail:308px;
  --font:'Inter',system-ui,-apple-system,'Segoe UI',sans-serif;
  --mono:ui-monospace,'SF Mono',Menlo,monospace;
  color-scheme:dark;
}
*{box-sizing:border-box}
html,body{height:100%}
body{margin:0;background:var(--bg);color:var(--fg);font-family:var(--font);font-size:14px;
  line-height:1.45;-webkit-font-smoothing:antialiased}
h1,h2,h3,h4{margin:0;font-weight:650;letter-spacing:-.01em}
button,input,select,textarea{font:inherit;color:inherit}
a{color:inherit;text-decoration:none}
:focus-visible{outline:2px solid var(--accent-2);outline-offset:2px;border-radius:8px}
.num{font-variant-numeric:tabular-nums}
::-webkit-scrollbar{width:9px;height:9px}
::-webkit-scrollbar-thumb{background:var(--line-2);border-radius:8px;border:2px solid var(--bg)}

/* ======================= shell: sidebar | main | rail ================ */
.shell{display:grid;grid-template-columns:var(--sidebar) minmax(0,1fr) var(--rail);min-height:100%}
.shell.no-rail{grid-template-columns:var(--sidebar) minmax(0,1fr)}
.shell.no-rail .rail{display:none}

/* ---------------- sidebar ---------------- */
.side{background:var(--side);border-right:1px solid var(--line);display:flex;flex-direction:column;
  position:sticky;top:0;height:100vh}
.brand{display:flex;align-items:center;gap:11px;padding:19px 18px 17px}
.brand .logo{width:36px;height:36px;border-radius:11px;background:linear-gradient(150deg,#3b82f6,#1d4ed8);
  display:grid;place-items:center;flex:none;box-shadow:0 6px 18px -6px rgba(59,130,246,.75)}
.brand h1{font-size:18px;letter-spacing:-.02em}
.brand span{display:block;font-size:10.5px;color:var(--faint);font-weight:500;margin-top:1px}
.nav{padding:4px 11px;overflow-y:auto;flex:1}
.nav a{display:flex;align-items:center;gap:12px;padding:10px 12px;border-radius:var(--r-sm);
  color:var(--dim);font-size:13.5px;font-weight:500;margin-bottom:3px}
.nav a:hover{background:var(--panel-2);color:var(--fg)}
.nav a.on{background:var(--accent);color:#fff;font-weight:600;
  box-shadow:0 8px 20px -10px rgba(37,99,235,.95)}
.nav a .ic{width:19px;height:19px;flex:none}
.nav .badge{margin-left:auto;background:var(--red);color:#fff;font-size:10.5px;font-weight:700;
  border-radius:999px;padding:1px 6px;min-width:19px;text-align:center}
.nav a.on .badge{background:rgba(255,255,255,.28)}
.me{display:flex;align-items:center;gap:11px;padding:14px 16px;border-top:1px solid var(--line);cursor:pointer}
.me:hover{background:var(--panel-2)}
.me .meta{min-width:0;flex:1}
.me .meta b{display:block;font-size:13.5px;font-weight:600}
.me .meta span{font-size:11px;color:var(--faint)}
.me .chev{color:var(--faint);font-size:17px}

/* ---------------- main ---------------- */
.main{min-width:0;padding:20px 22px 30px;display:flex;flex-direction:column;gap:17px}

.top{display:flex;align-items:flex-start;gap:14px;flex-wrap:wrap}
.top .hello h2{font-size:23px;letter-spacing:-.02em}
.top .hello p{margin:3px 0 0;color:var(--dim);font-size:13.5px}
.top .tools{margin-left:auto;display:flex;align-items:center;gap:10px;flex-wrap:wrap}
.pill{display:inline-flex;align-items:center;gap:9px;background:var(--panel);border:1px solid var(--line);
  border-radius:11px;padding:8px 14px;font-size:13px;font-weight:600;white-space:nowrap}
.pill .ic{color:var(--dim)}
.pill .div{width:1px;height:15px;background:var(--line-2)}
.wx{display:inline-flex;align-items:center;gap:8px;font-size:13px;font-weight:600;white-space:nowrap}
.wx span{color:var(--dim);font-weight:500}

/* ---------------- KPI tiles ---------------- */
.kpis{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:14px}
.kpi{border-radius:var(--r);padding:15px 16px 14px;min-width:0;
  background:linear-gradient(145deg,color-mix(in srgb,var(--tone) 28%,var(--panel)),
                                    color-mix(in srgb,var(--tone) 13%,var(--panel)));
  border:1px solid color-mix(in srgb,var(--tone) 46%,transparent)}
.kpi .hd{display:flex;align-items:center;gap:11px}
.kpi .ic{width:42px;height:42px;border-radius:12px;display:grid;place-items:center;flex:none;
  background:var(--tone);font-size:19px;line-height:1;box-shadow:0 8px 18px -8px var(--tone)}
.kpi .lbl{font-size:12.5px;color:#d6e5fa;font-weight:600;min-width:0;line-height:1.25}
/* value and delta share a baseline row so a long number can never collide */
/* wraps the delta under the value on a narrow tile instead of truncating it */
.kpi .foot{display:flex;align-items:flex-end;justify-content:space-between;gap:4px 9px;
  margin-top:11px;flex-wrap:wrap}
.kpi .v{font-size:26px;font-weight:700;letter-spacing:-.025em;line-height:1.05;min-width:0}
.kpi .delta{text-align:right;line-height:1.25;flex:none;padding-bottom:2px}
.kpi .delta b{display:block;font-size:12px;font-weight:700}
.kpi .delta span{font-size:10px;color:var(--faint);white-space:nowrap}
.up{color:#4ade80}.down{color:#f87171}
/* tone names must match the `tone` field the API sends in /api/dashboard */
.kpi[data-tone=green]{--tone:#16a34a}
.kpi[data-tone=blue]{--tone:#2563eb}
.kpi[data-tone=violet],.kpi[data-tone=purple]{--tone:#7c3aed}
.kpi[data-tone=gold]{--tone:#d97706}
.kpi[data-tone=teal]{--tone:#059669}
.kpi:not([data-tone]){--tone:#2563eb}

/* ---------------- cards ---------------- */
.card{background:var(--panel);border:1px solid var(--line);border-radius:var(--r);min-width:0}
.card>header{display:flex;align-items:center;gap:10px;padding:14px 16px;border-bottom:1px solid var(--line)}
.card>header h3{font-size:15px}
.card>header .act{margin-left:auto;display:flex;gap:8px;align-items:center}
.card .body{padding:15px 16px}
.link{color:var(--accent-3);font-size:12.5px;font-weight:600;cursor:pointer;background:none;border:0;padding:0}
.link:hover{text-decoration:underline}

/* ---------------- map ---------------- */
.maprow{display:grid;grid-template-columns:minmax(0,1fr) 286px;gap:15px}
.mapwrap{position:relative;border-radius:var(--r);overflow:hidden;border:1px solid var(--line);background:#0b1a2e}
#map{height:496px}
#map-full{height:min(70vh,660px)}
#map-terr{height:300px}
.leaflet-container{background:#0b1a2e!important;font-family:var(--font)!important}
.darken .leaflet-tile-pane{filter:invert(1) hue-rotate(186deg) brightness(.92) contrast(.88) saturate(.5)}
.leaflet-control-attribution{background:rgba(8,18,34,.75)!important;color:var(--faint)!important;font-size:9.5px!important}
.leaflet-control-attribution a{color:var(--faint)!important}
.leaflet-bar a{background:var(--panel)!important;color:var(--fg)!important;border-color:var(--line)!important;
  width:28px!important;height:28px!important;line-height:28px!important}
.leaflet-bar a:hover{background:var(--panel-3)!important}
.leaflet-top.leaflet-left{top:52px;left:12px}

.maptoggle{position:absolute;left:12px;top:12px;z-index:600;display:flex;gap:4px;
  background:rgba(12,26,46,.9);border:1px solid var(--line);border-radius:11px;padding:4px;backdrop-filter:blur(8px)}
.maptoggle button{background:transparent;border:0;border-radius:8px;padding:6px 15px;font-size:12.5px;
  font-weight:600;color:var(--dim);cursor:pointer}
.maptoggle button.on{background:var(--accent);color:#fff}

.legend{position:absolute;right:12px;top:12px;z-index:600;width:172px;background:rgba(12,26,46,.92);
  border:1px solid var(--line);border-radius:13px;padding:13px 14px;backdrop-filter:blur(10px)}
.legend h4{font-size:13px;margin-bottom:10px}
.legend .lrow{display:flex;align-items:center;gap:9px;font-size:12.5px;color:#cbd9ee;padding:3.5px 0}
.legend .dot{width:11px;height:11px;border-radius:50%;flex:none}
.legend .sep{height:1px;background:var(--line);margin:12px 0}

.pin-badge{background:transparent!important;border:0!important}
.pin-badge .wrap{display:inline-flex;align-items:center;gap:9px;background:rgba(12,26,46,.95);
  border:1px solid var(--line-2);border-radius:999px;padding:4px 14px 4px 4px;white-space:nowrap;
  box-shadow:0 10px 26px -12px #000}
.pin-badge .av{width:30px;height:30px;border-radius:50%;display:grid;place-items:center;font-size:11px;
  font-weight:700;color:#06101f;flex:none;border:2px solid rgba(255,255,255,.25)}
.pin-badge b{font-size:12.5px;font-weight:650;display:block;line-height:1.2}
.pin-badge i{font-size:11px;color:var(--dim);font-style:normal}

/* ---------------- live team ---------------- */
.lrow2{display:flex;align-items:center;gap:11px;padding:11px 0;border-bottom:1px solid var(--line)}
.lrow2:last-child{border-bottom:0}
.av{width:38px;height:38px;border-radius:50%;display:grid;place-items:center;font-size:13px;font-weight:700;
  color:#06101f;flex:none}
.av.sm{width:28px;height:28px;font-size:10.5px}
.av.lg{width:52px;height:52px;font-size:17px}
.lrow2 .who{min-width:0;flex:1}
.lrow2 .who b{display:block;font-size:13.5px;font-weight:650}
.lrow2 .who .st{font-size:12px;font-weight:600;display:flex;align-items:center;gap:6px;margin-top:1px}
.lrow2 .who .sub{font-size:11.5px;color:var(--faint);margin-top:2px}
.st i{width:7px;height:7px;border-radius:50%;display:inline-block}
.st.on_route{color:#4ade80}.st.on_route i{background:#4ade80}
.st.in_area{color:var(--accent-3)}.st.in_area i{background:var(--accent-3)}
.st.on_break{color:#fbbf24}.st.on_break i{background:#fbbf24}
.st.offline{color:var(--faint)}.st.offline i{background:var(--faint)}

.btn{background:var(--panel-3);border:1px solid var(--line-2);border-radius:9px;padding:6px 14px;
  font-size:12.5px;font-weight:600;color:var(--dim);cursor:pointer}
.btn:hover{color:var(--fg);border-color:var(--accent-2)}
.btn.primary{background:var(--accent);border-color:var(--accent);color:#fff}
.btn.primary:hover{filter:brightness(1.12)}
.btn.sm{padding:4px 11px;font-size:11.5px}
.btn.wide{width:100%;justify-content:center;text-align:center;padding:11px}

/* ---------------- activity rail ---------------- */
.rail{background:var(--panel);border-left:1px solid var(--line);padding:20px 18px 24px;
  position:sticky;top:0;height:100vh;overflow-y:auto}
.rail .rh{display:flex;align-items:center;margin-bottom:6px}
.rail .rh h3{font-size:16px}
.rail .rh .link{margin-left:auto}
.fitem{display:flex;gap:12px;padding:12px 0;border-bottom:1px solid var(--line)}
.fitem:last-child{border-bottom:0}
.fic{width:34px;height:34px;border-radius:10px;display:grid;place-items:center;flex:none}
.fitem .ft{flex:1;min-width:0}
.fitem .ft b{display:block;font-size:13px;font-weight:650;line-height:1.3}
.fitem .ft span{font-size:11.5px;color:var(--faint);display:block;white-space:nowrap;overflow:hidden;
  text-overflow:ellipsis;margin-top:1px}
.fitem time{font-size:10.5px;color:var(--faint);white-space:nowrap;padding-top:2px}

/* ---------------- tabs ---------------- */
.tabs{display:inline-flex;background:var(--panel-2);border:1px solid var(--line);border-radius:10px;padding:3px;gap:2px}
.tabs button{background:transparent;border:0;border-radius:8px;padding:6px 14px;font-size:12.5px;
  font-weight:600;color:var(--dim);cursor:pointer}
.tabs button.on{background:var(--accent);color:#fff}

/* ---------------- tables ---------------- */
table{width:100%;border-collapse:collapse;font-size:13px}
th{text-align:left;font-size:10.5px;letter-spacing:.07em;text-transform:uppercase;color:var(--faint);
  font-weight:600;padding:0 10px 10px;border-bottom:1px solid var(--line)}
td{padding:10px;border-bottom:1px solid var(--line);vertical-align:middle}
tbody tr:last-child td{border-bottom:0}
tbody tr:hover{background:var(--panel-2)}
.rank{width:28px;height:28px;border-radius:9px;background:var(--panel-3);display:grid;place-items:center;
  font-size:12px;font-weight:700;color:var(--dim)}
.medal{font-size:17px;line-height:1}
.chip{display:inline-flex;align-items:center;gap:6px;font-size:11px;font-weight:600;border-radius:999px;
  padding:3px 10px;background:var(--panel-3);color:var(--dim);border:1px solid var(--line-2)}
.chip .dot{width:7px;height:7px;border-radius:50%}
.chip.ok{background:rgba(34,197,94,.15);color:#4ade80;border-color:rgba(34,197,94,.35)}
.chip.warn{background:rgba(234,179,8,.15);color:#fbbf24;border-color:rgba(234,179,8,.35)}
.chip.bad{background:rgba(239,68,68,.15);color:#f87171;border-color:rgba(239,68,68,.35)}
.money{font-variant-numeric:tabular-nums;font-weight:650}

/* ---------------- territory ---------------- */
.tgrid{display:grid;grid-template-columns:repeat(auto-fit,minmax(168px,1fr));gap:12px}
.tcard{background:var(--panel-2);border:1px solid var(--line);border-radius:13px;padding:13px}
.tcard .nm{display:flex;align-items:center;gap:8px;font-size:13px;font-weight:650}
.tcard .nm i{width:10px;height:10px;border-radius:50%;flex:none}
.tcard .pc{font-size:27px;font-weight:700;margin:9px 0 3px;letter-spacing:-.025em}
.tcard .mt{font-size:11.5px;color:var(--faint)}
.bar{height:6px;border-radius:99px;background:var(--panel-3);overflow:hidden;margin-top:10px}
.bar i{display:block;height:100%;border-radius:99px}
.layers{position:absolute;right:12px;top:12px;z-index:600;width:158px;background:rgba(12,26,46,.92);
  border:1px solid var(--line);border-radius:13px;padding:12px 13px;backdrop-filter:blur(10px)}
.layers h4{font-size:12.5px;margin-bottom:9px}
.layers label{display:flex;align-items:center;gap:9px;font-size:12.5px;color:#cbd9ee;padding:4px 0;cursor:pointer}
.layers input{accent-color:var(--accent);width:14px;height:14px}

/* ---------------- stages ---------------- */
.stages{display:grid;grid-template-columns:repeat(auto-fit,minmax(148px,1fr));gap:12px}
.stage{background:var(--panel-2);border:1px solid var(--line);border-radius:13px;padding:13px}
.stage h4{font-size:10.5px;color:var(--faint);text-transform:uppercase;letter-spacing:.07em}
.stage .n{font-size:26px;font-weight:700;margin-top:6px;letter-spacing:-.02em}
.stage .v{font-size:12px;color:var(--faint);font-variant-numeric:tabular-nums}

/* commission summary boxes */
.csum{display:grid;grid-template-columns:repeat(3,1fr);gap:11px}
.cbox{background:var(--panel-2);border:1px solid var(--line);border-radius:12px;padding:12px;text-align:center}
.cbox span{display:block;font-size:11px;color:var(--faint);font-weight:600}
.cbox b{display:block;font-size:21px;font-weight:700;margin-top:5px;letter-spacing:-.02em}

/* ---------------- forms ---------------- */
.filters{display:flex;gap:9px;align-items:center;flex-wrap:wrap}
select,input[type=text],input[type=search],textarea{background:var(--panel-2);border:1px solid var(--line-2);
  border-radius:10px;padding:8px 11px;font-size:13px;outline:none;min-width:0}
select:focus,input:focus,textarea:focus{border-color:var(--accent-2)}
.search{flex:1 1 180px;display:flex;align-items:center;gap:8px;background:var(--panel-2);
  border:1px solid var(--line-2);border-radius:10px;padding:0 11px}
.search input{border:0;background:transparent;padding:8px 0;width:100%}

/* ---------------- lead drawer ---------------- */
.drawer{position:fixed;inset:0 0 0 auto;width:min(430px,100%);background:var(--panel);
  border-left:1px solid var(--line);z-index:900;display:flex;flex-direction:column;
  box-shadow:-26px 0 70px -34px #000;transform:translateX(100%);transition:transform .22s ease}
.drawer.open{transform:none}
.drawer header{display:flex;align-items:center;gap:10px;padding:15px 17px;border-bottom:1px solid var(--line)}
.drawer .scroll{overflow-y:auto;padding:17px;flex:1}
.scrim{position:fixed;inset:0;background:rgba(3,8,17,.62);z-index:890;opacity:0;pointer-events:none;transition:opacity .2s}
.scrim.on{opacity:1;pointer-events:auto}
.leadhead{display:flex;align-items:center;gap:13px}
.leadhead .nm{font-size:17px;font-weight:650}
.leadhead .sub{font-size:12px;color:var(--faint);margin-top:2px}
.tl{position:relative;padding-left:22px;margin-top:4px}
.tl::before{content:"";position:absolute;left:6px;top:7px;bottom:7px;width:2px;background:var(--line-2)}
.tlrow{position:relative;padding:9px 0}
.tlrow::before{content:"";position:absolute;left:-19px;top:14px;width:10px;height:10px;border-radius:50%;
  background:var(--tone,var(--accent-2));box-shadow:0 0 0 3px var(--panel)}
.tlrow b{font-size:12.5px;font-weight:650;display:block}
.tlrow span{font-size:11.5px;color:var(--faint)}
.tlrow time{font-size:11px;color:var(--faint);font-variant-numeric:tabular-nums}
.dispo{display:grid;gap:8px;margin-top:12px}
.dispo button{display:flex;align-items:center;gap:11px;border:0;border-radius:11px;padding:12px 14px;
  font-size:13.5px;font-weight:650;cursor:pointer;color:#06101f;text-align:left}
.dispo button .gl{width:22px;height:22px;border-radius:7px;background:rgba(0,0,0,.18);display:grid;
  place-items:center;font-size:12px;flex:none}
.dispo button:hover{filter:brightness(1.08)}
.dispo button.muted{background:var(--panel-2);color:var(--fg);border:1px solid var(--line-2)}

/* ---------------- mobile mockups ---------------- */
.phones{display:flex;gap:18px;flex-wrap:wrap}
.phone{width:234px;flex:none;background:#0b1a2e;border:7px solid #16263d;border-radius:30px;overflow:hidden;
  box-shadow:0 22px 50px -26px #000}
.phone .sbar{display:flex;justify-content:space-between;align-items:center;padding:7px 14px 4px;
  font-size:10.5px;color:var(--dim);font-weight:600}
.phone .ph{padding:9px 14px}
.phone .ph h4{font-size:14px}
.phone .ph .sub{font-size:11px;color:var(--faint)}
.phone .stats{display:flex;text-align:center;padding:10px 6px;border-block:1px solid var(--line)}
.phone .stats div{flex:1}
.phone .stats b{display:block;font-size:19px;font-weight:700}
.phone .stats span{font-size:9.5px;color:var(--faint)}
.phone .pmap{height:124px;background:#13253f;position:relative;overflow:hidden}
.phone .nxt{padding:10px 12px;border-top:1px solid var(--line)}
.phone .tabbar{display:flex;border-top:1px solid var(--line);padding:7px 0 9px}
.phone .tabbar div{flex:1;text-align:center;font-size:9px;color:var(--faint)}
.phone .tabbar div.on{color:var(--accent-3)}
.onshift{background:rgba(34,197,94,.18);color:#4ade80;border:1px solid rgba(34,197,94,.4);
  font-size:10px;font-weight:700;border-radius:999px;padding:2px 9px}

.empty{padding:28px 10px;text-align:center;color:var(--faint);font-size:13px}
.empty b{display:block;color:var(--dim);margin-bottom:5px;font-size:13.5px}
.toast{position:fixed;left:50%;bottom:24px;transform:translateX(-50%);background:#e9f1fd;color:#081222;
  padding:10px 18px;border-radius:999px;font-size:12.5px;font-weight:650;z-index:999}
.spark{display:flex;align-items:flex-end;gap:4px;height:58px}
.spark i{flex:1;background:var(--accent-2);border-radius:3px 3px 0 0;min-height:3px}
.spark i.alt{background:#4ade80}
.grid2{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:15px}

/* ---------------- responsive ---------------- */
.menubtn{display:none}
@media (max-width:1500px){ .shell{grid-template-columns:var(--sidebar) minmax(0,1fr)} .rail{display:none} }
@media (max-width:1220px){ .kpis{grid-template-columns:repeat(3,minmax(0,1fr))} .maprow{grid-template-columns:minmax(0,1fr)} .grid2{grid-template-columns:minmax(0,1fr)} }
@media (max-width:900px){
  .shell{grid-template-columns:minmax(0,1fr)}
  .side{position:fixed;left:0;top:0;bottom:0;width:var(--sidebar);z-index:950;transform:translateX(-100%);
    transition:transform .2s}
  .side.open{transform:none}
  .menubtn{display:inline-grid;place-items:center;width:40px;height:40px;border-radius:11px;
    background:var(--panel);border:1px solid var(--line);cursor:pointer}
  .main{padding:15px 15px 28px}
}
@media (max-width:620px){ .kpis{grid-template-columns:repeat(2,minmax(0,1fr))} .legend{display:none} .csum{grid-template-columns:1fr} }
@media (prefers-reduced-motion:reduce){*{transition:none!important}}

/* ---- sign-in ---- */
.loginwrap{position:fixed;inset:0;z-index:100;display:grid;place-items:center;background:var(--bg,#0b1a2e);padding:16px}
.logincard{width:min(360px,100%);display:flex;flex-direction:column;gap:14px;padding:28px;border-radius:14px;
  background:var(--panel,#13263f);border:1px solid var(--line,#24405f)}
.logincard h2{margin:0;font-size:22px}
.logincard p{margin:0;color:var(--faint,#8ea6c6);font-size:13px}
.logincard label{display:flex;flex-direction:column;gap:6px;font-size:12px;color:var(--faint,#8ea6c6)}
.logincard input{padding:10px 12px;border-radius:8px;border:1px solid var(--line,#24405f);background:var(--panel-2,#0f2036);
  color:inherit;font:inherit;font-size:14px}
.loginerr{min-height:18px;font-size:12.5px;color:#f87171}

/* ---- KPI tiles are links ---- */
a.kpi{display:block;color:inherit;text-decoration:none;cursor:pointer;transition:transform .12s,box-shadow .12s}
a.kpi:hover{transform:translateY(-2px);box-shadow:0 8px 22px rgba(0,0,0,.35)}
a.kpi:focus-visible{outline:2px solid var(--tone);outline-offset:2px}

/* ---- address search results ---- */
.addrbox{padding:14px 16px;border-top:1px solid var(--line);font-size:13px}
.addrbox .ah{display:flex;flex-direction:column;gap:3px;margin-bottom:10px}
.addrbox .ah span{color:var(--faint);font-size:12px}
.addrbox .ar{display:grid;grid-template-columns:repeat(auto-fill,minmax(250px,1fr));gap:10px}
.addrbox .ao{display:flex;align-items:center;gap:10px;padding:10px 12px;border:1px solid var(--line-2);border-radius:10px;background:var(--panel-2)}
.addrbox .ao i{width:11px;height:11px;border-radius:50%;flex:none}
.addrbox .ao span{flex:1;min-width:0;display:flex;flex-direction:column}
.addrbox .ao em{font-style:normal;color:var(--faint);font-size:11.5px}

/* ---- pipeline stage filter ---- */
button.stage{font:inherit;color:inherit;text-align:left;cursor:pointer;transition:border-color .12s,background .12s,transform .12s}
button.stage:hover{transform:translateY(-1px);border-color:var(--line-2)}
button.stage.on{border-color:var(--blue,#3b82f6);background:color-mix(in srgb,var(--blue,#3b82f6) 16%,var(--panel))}
button.stage:focus-visible{outline:2px solid var(--blue,#3b82f6);outline-offset:2px}

/* ============================ light theme ============================ */
.themebtn{width:38px;height:38px;border-radius:11px;border:1px solid var(--line-2);background:var(--panel);
  color:var(--dim);display:grid;place-items:center;cursor:pointer;flex:none}
.themebtn:hover{color:var(--fg);background:var(--panel-2)}
.themebtn svg{width:18px;height:18px}

:root[data-theme=light]{
  --bg:#f3f6fb; --panel:#ffffff; --panel-2:#f1f5fb; --panel-3:#e6edf7;
  --side:#ffffff;
  --line:#dde5f0; --line-2:#c9d5e6;
  --fg:#0f1d33; --dim:#4d6283; --faint:#6a7d99;
  --accent:#2563eb; --accent-2:#2563eb; --accent-3:#1d4ed8;
  color-scheme:light;
}
:root[data-theme=light] .kpi .lbl{color:var(--fg)}
:root[data-theme=light] .kpi{background:linear-gradient(145deg,color-mix(in srgb,var(--tone) 16%,#fff),color-mix(in srgb,var(--tone) 6%,#fff));
  border-color:color-mix(in srgb,var(--tone) 38%,#fff)}
:root[data-theme=light] .up,:root[data-theme=light] .st.on_route,:root[data-theme=light] .chip.ok,
:root[data-theme=light] .onshift{color:#15803d}
:root[data-theme=light] .down,:root[data-theme=light] .chip.bad,:root[data-theme=light] .loginerr{color:#b91c1c}
:root[data-theme=light] .st.on_route i{background:#16a34a}
:root[data-theme=light] .st.on_break,:root[data-theme=light] .chip.warn{color:#b45309}
:root[data-theme=light] .st.on_break i{background:#d97706}
:root[data-theme=light] .spark i.alt{background:#16a34a}
/* glass panels floating over the map */
:root[data-theme=light] .maptoggle,:root[data-theme=light] .legend,:root[data-theme=light] .layers,
:root[data-theme=light] .pin-badge .wrap{background:rgba(255,255,255,.94);border-color:var(--line-2);color:var(--fg)}
:root[data-theme=light] .legend .lrow,:root[data-theme=light] .layers label{color:var(--fg)}
:root[data-theme=light] .pin-badge .wrap{box-shadow:0 8px 22px -12px rgba(15,29,51,.5)}
:root[data-theme=light] .mapwrap{background:#e6edf7}
:root[data-theme=light] .scrim{background:rgba(15,29,51,.35)}
:root[data-theme=light] .toast{background:#0f1d33;color:#fff}
:root[data-theme=light] .brand .logo,:root[data-theme=light] .nav a.on{box-shadow:0 6px 16px -8px rgba(37,99,235,.6)}
:root[data-theme=light] a.kpi:hover{box-shadow:0 8px 22px rgba(15,29,51,.16)}
:root[data-theme=light] .drawer{box-shadow:none}
:root[data-theme=light] .drawer.open{box-shadow:-26px 0 70px -34px rgba(15,29,51,.5)}
:root[data-theme=light] .loginwrap{background:var(--bg)}

/* ---- settings forms & dialogs ---- */
.sform{display:grid;gap:14px;max-width:560px}
.fld{display:flex;flex-direction:column;gap:6px;font-size:12px;color:var(--dim)}
.fld>span{font-weight:600;color:var(--fg);font-size:12.5px}
.fld em{font-style:normal;color:var(--faint);font-size:11.5px;line-height:1.4}
.fld.inline{flex-direction:row;align-items:flex-start;gap:11px}
.fld.inline input{margin-top:3px}
.fld.inline span{display:flex;flex-direction:column;gap:3px}
.sform input:not([type=checkbox]):not([type=color]),.dlg input:not([type=checkbox]),.dlg select,#stlist input:not([type=checkbox]):not([type=color]){
  padding:9px 11px;border-radius:9px;border:1px solid var(--line-2);background:var(--panel-2);color:var(--fg);font-size:13.5px;width:100%}
.sform input:disabled{opacity:.6;cursor:not-allowed}
.srow{display:flex;gap:10px;align-items:center;flex-wrap:wrap}
.hint{color:var(--faint);font-size:12px}
#stlist input[type=color]{width:34px;height:28px;padding:0;border:1px solid var(--line-2);border-radius:7px;background:none}
#stlist table{min-width:0}
tr.off td{opacity:.55}
.btn.danger{color:#f87171;border-color:color-mix(in srgb,#ef4444 45%,var(--line-2))}
.btn.danger:hover{background:color-mix(in srgb,#ef4444 14%,var(--panel))}
dialog.dlg{border:1px solid var(--line-2);border-radius:14px;background:var(--panel);color:var(--fg);padding:0;width:min(400px,calc(100vw - 32px))}
dialog.dlg::backdrop{background:rgba(3,8,17,.6)}
dialog.dlg form{display:flex;flex-direction:column;gap:13px;padding:22px}
dialog.dlg h3{font-size:16px}
dialog.dlg p{margin:0;color:var(--dim);font-size:13px}
dialog.dlg label{display:flex;flex-direction:column;gap:6px;font-size:12.5px;color:var(--dim)}
.dlg .dact{display:flex;justify-content:flex-end;gap:10px;margin-top:4px}

/* ---- rep app preview ---- */
.repwrap{display:flex;gap:28px;flex-wrap:wrap;align-items:flex-start}
.phoneframe{width:min(390px,100%);height:min(780px,78vh);flex:none;border:9px solid var(--panel-3);border-radius:38px;overflow:hidden;background:var(--bg);box-shadow:0 24px 60px -30px rgba(0,0,0,.6)}
.phoneframe iframe{width:100%;height:100%;border:0;display:block}
.repinfo{flex:1;min-width:260px}
.repinfo h4{margin:0 0 8px;font-size:13px}
.repinfo ul{margin:0 0 18px;padding-left:18px;color:var(--dim);font-size:13px;line-height:1.7}
.repinfo a{color:var(--accent-3)}