@font-face{font-family:Inter;src:url('/fonts/inter.woff2') format('woff2');font-weight:100 900;font-display:swap;unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+2000-206F,U+2074,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
@font-face{font-family:Inter;src:url('/fonts/inter-greek.woff2') format('woff2');font-weight:100 900;font-display:swap;unicode-range:U+0370-03FF}

:root{
  --font:Inter,'Segoe UI',system-ui,-apple-system,Arial,sans-serif;
  --bg:#f3f5f2; --surface:#ffffff; --surface-2:#f8faf7; --surface-3:#eef2ec; --line:#e2e8e0; --line-strong:#cfd8cc;
  --ink:#16241e; --ink-2:#3c4c44; --muted:#6b7a72; --faint:#97a39c;
  --brand:#173c2e; --brand-2:#235440; --brand-ink:#ffffff; --lime:#c5ed9d; --lime-2:#e6f7d4; --lime-ink:#2d5a1b;
  --side:#0f2a20; --side-2:#163829; --side-ink:#b9cdbf; --side-active:#c5ed9d;
  --moving:#1f9d55; --idle:#e09a18; --stopped:#3d6fd6; --offline:#8b958f; --nodata:#c3cac5;
  --danger:#d23f3f; --danger-bg:#fdecec; --warn:#b7791f; --warn-bg:#fdf3e1; --ok:#1f9d55; --ok-bg:#e7f6ec; --info:#2f6bd6; --info-bg:#e9f0fd; --purple:#7c4dcc; --purple-bg:#f1ebfb;
  --shadow-sm:0 1px 2px rgba(16,40,30,.06); --shadow:0 1px 2px rgba(16,40,30,.05),0 4px 16px rgba(16,40,30,.06); --shadow-lg:0 12px 40px rgba(10,30,20,.18);
  --r-sm:8px; --r:12px; --r-lg:16px; --side-w:236px; --top-h:64px;
  color-scheme:light;
}
[data-theme=dark]{
  --bg:#0c1411; --surface:#131e19; --surface-2:#17241e; --surface-3:#1d2c25; --line:#24352d; --line-strong:#30453b;
  --ink:#e6eee9; --ink-2:#c3cfc8; --muted:#8fa197; --faint:#64766c;
  --brand:#c5ed9d; --brand-2:#d6f4b8; --brand-ink:#10241b; --lime-2:#22351f; --lime-ink:#c5ed9d;
  --side:#08110d; --side-2:#12201a;
  --danger-bg:#3a1a1a; --warn-bg:#3a2c12; --ok-bg:#12301f; --info-bg:#152541; --purple-bg:#271b3d;
  --shadow:0 1px 2px rgba(0,0,0,.3),0 4px 16px rgba(0,0,0,.25); --shadow-lg:0 12px 40px rgba(0,0,0,.5);
  color-scheme:dark;
}
*{box-sizing:border-box}
html,body{height:100%}
body{margin:0;font-family:var(--font);font-size:14px;line-height:1.45;background:var(--bg);color:var(--ink);-webkit-font-smoothing:antialiased;font-feature-settings:'cv11','ss01','tnum'}
h1,h2,h3,h4,p{margin:0}
button,input,select,textarea{font:inherit;color:inherit}
button{cursor:pointer;background:none;border:0;padding:0}
button:disabled{opacity:.55;cursor:not-allowed}
a{color:inherit}
svg:not(.leaflet-zoom-animated):not(.chart){width:18px;height:18px}
svg{fill:none;stroke:currentColor;stroke-width:1.7;stroke-linecap:round;stroke-linejoin:round;flex-shrink:0;vertical-align:middle}
:focus-visible{outline:2px solid #5d9b3c;outline-offset:2px}
[hidden]{display:none!important}
.symbols{position:absolute;width:0;height:0;overflow:hidden}
.num{font-variant-numeric:tabular-nums}
.muted{color:var(--muted)}
.sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0)}

/* ---------- shell ---------- */
.app{display:flex;min-height:100vh}
.sidebar{position:fixed;inset:0 auto 0 0;width:var(--side-w);background:var(--side);color:var(--side-ink);display:flex;flex-direction:column;z-index:1200;transition:width .18s ease}
.brand{height:var(--top-h);display:flex;align-items:center;gap:11px;padding:0 17px;border-bottom:1px solid #ffffff10;flex-shrink:0}
.brand img{border-radius:9px}
.brand-text{display:flex;flex-direction:column;min-width:0;white-space:nowrap}
.brand-text strong{color:#fff;font-size:15px;letter-spacing:-.2px;font-weight:650}
.brand-text span{font-size:11px;color:#86a090}
.nav{flex:1;overflow-y:auto;padding:10px 10px 16px;scrollbar-width:thin;scrollbar-color:#2a4537 transparent}
.nav-group{margin-top:14px}
.nav-label{font-size:10.5px;letter-spacing:.09em;text-transform:uppercase;color:#6f8a7b;padding:0 10px 6px;font-weight:600;white-space:nowrap}
.nav a{display:flex;align-items:center;gap:11px;height:38px;padding:0 10px;border-radius:9px;text-decoration:none;color:var(--side-ink);font-size:13.5px;font-weight:500;white-space:nowrap;position:relative}
.nav a svg{width:19px;height:19px;color:#88a595}
.nav a:hover{background:var(--side-2);color:#e7f0ea}
.nav a.active{background:#1e3f2f;color:#fff}
.nav a.active svg{color:var(--side-active)}
.nav a.active::before{content:'';position:absolute;left:-10px;top:9px;bottom:9px;width:3px;border-radius:0 3px 3px 0;background:var(--side-active)}
.nav .count{margin-left:auto;background:#d23f3f;color:#fff;font-size:10.5px;font-weight:700;min-width:19px;height:19px;border-radius:10px;display:grid;place-items:center;padding:0 5px}
.sidebar-foot{display:flex;align-items:center;justify-content:space-between;gap:8px;padding:12px 14px;border-top:1px solid #ffffff10}
.mode-chip{display:flex;align-items:center;gap:7px;font-size:11px;font-weight:650;letter-spacing:.06em;color:#d6e7da;background:#173426;border:1px solid #28503b;border-radius:20px;padding:5px 10px;white-space:nowrap;overflow:hidden}
.mode-chip i{width:7px;height:7px;border-radius:50%;background:#8b958f;flex-shrink:0}
.mode-chip.is-live i{background:#4ade80;box-shadow:0 0 0 3px #4ade8033}
.mode-chip.is-demo{background:#3a2f12;border-color:#6b5420;color:#f5d98b}
.mode-chip.is-demo i{background:#f5b937}
.sidebar .icon-button{color:#88a595}
.sidebar .icon-button:hover{background:var(--side-2);color:#fff}
body.collapsed{--side-w:68px}
body.collapsed .brand-text,body.collapsed .nav-label,body.collapsed .nav a span,body.collapsed .mode-chip span{display:none}
body.collapsed .nav a{justify-content:center;padding:0}
body.collapsed .nav .count{position:absolute;top:3px;right:3px;min-width:16px;height:16px;font-size:9.5px}
body.collapsed .sidebar-foot{flex-direction:column}
body.collapsed .brand{justify-content:center;padding:0}
.main{margin-left:var(--side-w);flex:1;min-width:0;display:flex;flex-direction:column;transition:margin .18s ease}
.topbar{height:var(--top-h);position:sticky;top:0;z-index:1100;background:color-mix(in srgb,var(--surface) 92%,transparent);backdrop-filter:blur(10px);border-bottom:1px solid var(--line);display:flex;align-items:center;gap:18px;padding:0 22px}
.page-title{min-width:0}
.crumb{font-size:11.5px;color:var(--muted);white-space:nowrap}
.page-title h1{font-size:18px;font-weight:650;letter-spacing:-.3px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.global-search{margin-left:auto;display:flex;align-items:center;gap:9px;height:38px;width:min(360px,32vw);padding:0 10px 0 12px;border:1px solid var(--line);border-radius:10px;background:var(--surface-2);color:var(--muted);font-size:13px}
.global-search span{flex:1;text-align:left;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.global-search:hover{border-color:var(--line-strong)}
kbd{font-family:var(--font);font-size:10.5px;border:1px solid var(--line);border-bottom-width:2px;border-radius:5px;padding:1px 5px;color:var(--muted);background:var(--surface);white-space:nowrap}
.topbar-actions{display:flex;align-items:center;gap:6px}
.icon-button{width:36px;height:36px;border-radius:9px;display:grid;place-items:center;color:var(--ink-2);position:relative;flex-shrink:0}
.icon-button:hover{background:var(--surface-3)}
.icon-button.active{background:var(--lime-2);color:var(--lime-ink)}
.lang-label{font-size:12px;font-weight:700;letter-spacing:.03em}
.bell .badge{position:absolute;top:3px;right:2px;background:var(--danger);color:#fff;font-size:10px;font-weight:700;min-width:17px;height:17px;border-radius:9px;display:grid;place-items:center;padding:0 4px;border:2px solid var(--surface)}
.feed-pill{display:flex;align-items:center;gap:7px;font-size:12px;font-weight:600;color:var(--warn);background:var(--warn-bg);padding:6px 11px;border-radius:20px;white-space:nowrap;margin-right:4px}
.feed-pill i{width:7px;height:7px;border-radius:50%;background:currentColor}
.feed-pill.ok{color:var(--ok);background:var(--ok-bg)}
.feed-pill.ok i{animation:pulse 2s infinite}
@keyframes pulse{0%{box-shadow:0 0 0 0 color-mix(in srgb,var(--ok) 50%,transparent)}70%{box-shadow:0 0 0 7px transparent}100%{box-shadow:0 0 0 0 transparent}}
.clock{font-size:12.5px;color:var(--muted);font-variant-numeric:tabular-nums;padding:0 6px;white-space:nowrap}
.mobile-menu{display:none}
.notice{flex-shrink:0;margin:14px 22px 0;padding:10px 14px;border-radius:10px;background:var(--warn-bg);color:var(--warn);font-size:13px;display:flex;gap:10px;align-items:center}
.view{flex:1;min-height:0;outline:none;padding:20px 22px 28px}
.view.full{padding:0;flex:1;min-height:0;overflow:hidden}
body:has(.view.full) .main{height:100vh}

/* ---------- primitives ---------- */
.card{background:var(--surface);border:1px solid var(--line);border-radius:var(--r);box-shadow:var(--shadow-sm)}
.card-head{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:14px 16px 0}
.card-head h2,.card-head h3{font-size:14px;font-weight:650;letter-spacing:-.1px}
.card-head .sub{font-size:12px;color:var(--muted)}
.card-body{padding:14px 16px 16px}
.btn{display:inline-flex;align-items:center;justify-content:center;gap:7px;height:36px;padding:0 14px;border-radius:9px;font-size:13px;font-weight:600;background:var(--brand);color:var(--brand-ink);border:1px solid transparent;white-space:nowrap}
.btn:hover{filter:brightness(1.08)}
.btn.secondary{background:var(--surface);color:var(--ink);border-color:var(--line-strong)}
.btn.secondary:hover{background:var(--surface-3);filter:none}
.btn.ghost{background:transparent;color:var(--ink-2)}
.btn.ghost:hover{background:var(--surface-3);filter:none}
.btn.sm{height:30px;padding:0 10px;font-size:12px;border-radius:8px}
.btn svg{width:16px;height:16px}
.chip{display:inline-flex;align-items:center;gap:6px;height:24px;padding:0 9px;border-radius:12px;font-size:11.5px;font-weight:600;background:var(--surface-3);color:var(--ink-2);white-space:nowrap}
.chip.ok{background:var(--ok-bg);color:var(--ok)}.chip.warn{background:var(--warn-bg);color:var(--warn)}.chip.danger{background:var(--danger-bg);color:var(--danger)}.chip.info{background:var(--info-bg);color:var(--info)}.chip.purple{background:var(--purple-bg);color:var(--purple)}
.chip svg{width:13px;height:13px}
.dot{width:8px;height:8px;border-radius:50%;display:inline-block;flex-shrink:0;background:var(--offline)}
.s-moving{--c:var(--moving)}.s-idle{--c:var(--idle)}.s-stopped{--c:var(--stopped)}.s-offline{--c:var(--offline)}.s-nodata{--c:var(--nodata)}
.dot[class*=s-]{background:var(--c)}
.state-pill{display:inline-flex;align-items:center;gap:6px;height:24px;padding:0 10px;border-radius:12px;font-size:12px;font-weight:650;color:var(--c);background:color-mix(in srgb,var(--c) 13%,transparent)}
.state-pill::before{content:'';width:7px;height:7px;border-radius:50%;background:var(--c)}
.seg{display:inline-flex;background:var(--surface-3);border-radius:9px;padding:3px;gap:2px}
.seg button{height:28px;padding:0 11px;border-radius:7px;font-size:12.5px;font-weight:600;color:var(--muted);white-space:nowrap;display:inline-flex;align-items:center;gap:6px}
.seg button.on{background:var(--surface);color:var(--ink);box-shadow:var(--shadow-sm)}
.seg button .n{font-size:11px;color:var(--faint);font-weight:600}
.field{display:flex;flex-direction:column;gap:5px}
.field>span{font-size:11.5px;font-weight:600;color:var(--muted)}
.input,select.input{height:36px;border:1px solid var(--line-strong);border-radius:9px;background:var(--surface);padding:0 11px;font-size:13px;min-width:0;width:100%}
.input:focus{outline:2px solid color-mix(in srgb,var(--moving) 40%,transparent);border-color:var(--moving)}
.search-box{position:relative}
.search-box svg{position:absolute;left:10px;top:50%;transform:translateY(-50%);color:var(--faint);width:16px;height:16px}
.search-box .input{padding-left:33px}
.toggle{display:inline-flex;align-items:center;gap:9px;font-size:13px;cursor:pointer;user-select:none}
.toggle input{appearance:none;width:34px;height:20px;border-radius:10px;background:var(--line-strong);position:relative;cursor:pointer;transition:background .15s;margin:0;flex-shrink:0}
.toggle input::after{content:'';position:absolute;top:2px;left:2px;width:16px;height:16px;border-radius:50%;background:#fff;box-shadow:0 1px 2px #0003;transition:left .15s}
.toggle input:checked{background:var(--moving)}
.toggle input:checked::after{left:16px}
.empty{display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center;gap:8px;padding:40px 20px;color:var(--muted)}
.empty svg{width:34px;height:34px;color:var(--faint);stroke-width:1.4}
.empty strong{color:var(--ink);font-size:14px}
.spinner{width:22px;height:22px;border-radius:50%;border:2.5px solid var(--line-strong);border-top-color:var(--moving);animation:spin .8s linear infinite}
@keyframes spin{to{transform:rotate(360deg)}}
.loading{display:flex;align-items:center;justify-content:center;gap:12px;padding:40px;color:var(--muted)}
.skeleton{background:linear-gradient(90deg,var(--surface-3),var(--surface-2),var(--surface-3));background-size:200% 100%;animation:sk 1.2s infinite;border-radius:6px}
@keyframes sk{to{background-position:-200% 0}}
.grid{display:grid;gap:16px}
.row{display:flex;align-items:center;gap:10px}
.spacer{flex:1}
.section-title{font-size:15px;font-weight:650;margin-bottom:10px}
.help{font-size:12px;color:var(--muted)}
.tag{font-size:10.5px;font-weight:700;letter-spacing:.05em;text-transform:uppercase;color:var(--muted)}

/* ---------- KPI ---------- */
.kpis{display:grid;grid-template-columns:repeat(6,minmax(0,1fr));gap:14px}
.kpi{padding:14px 16px;display:flex;flex-direction:column;gap:6px;position:relative;overflow:hidden;cursor:default}
.kpi.link{cursor:pointer}.kpi.link:hover{border-color:var(--line-strong)}
.kpi-top{display:flex;align-items:center;justify-content:space-between;font-size:12.5px;color:var(--muted);font-weight:550}
.kpi-top svg{width:17px;height:17px;color:var(--c,var(--faint))}
.kpi-value{font-size:28px;font-weight:680;letter-spacing:-1px;line-height:1.1;font-variant-numeric:tabular-nums}
.kpi-value small{font-size:13px;color:var(--muted);font-weight:550;letter-spacing:0;margin-left:3px}
.kpi-foot{font-size:11.5px;color:var(--muted)}
.kpi::after{content:'';position:absolute;left:0;top:0;bottom:0;width:3px;background:var(--c,transparent)}
.statusbar{display:flex;height:10px;border-radius:6px;overflow:hidden;background:var(--surface-3);gap:2px}
.statusbar span{display:block;background:var(--c);transition:flex .4s}
.legend{display:flex;flex-wrap:wrap;gap:14px;font-size:12px;color:var(--muted)}
.legend span{display:inline-flex;align-items:center;gap:6px}
.legend b{color:var(--ink);font-weight:650}

/* ---------- overview ---------- */
.ov-grid{display:grid;grid-template-columns:minmax(0,1.7fr) minmax(320px,1fr);gap:16px;margin-top:16px}
.ov-grid>.card:first-child{display:flex;flex-direction:column}
.ov-map{flex:1;min-height:420px;border-radius:0 0 var(--r) var(--r);overflow:hidden;position:relative}
.attention{display:flex;flex-direction:column;max-height:470px;overflow:auto}
.att-row{display:flex;gap:11px;padding:11px 16px;border-top:1px solid var(--line);align-items:flex-start;cursor:pointer;text-align:left;width:100%}
.att-row:hover{background:var(--surface-2)}
.att-ico{width:30px;height:30px;border-radius:8px;display:grid;place-items:center;flex-shrink:0;background:var(--surface-3);color:var(--ink-2)}
.att-ico.danger{background:var(--danger-bg);color:var(--danger)}.att-ico.warn{background:var(--warn-bg);color:var(--warn)}.att-ico.info{background:var(--info-bg);color:var(--info)}
.att-ico svg{width:16px;height:16px}
.att-row strong{font-size:13px;font-weight:600;display:block}
.att-row p{font-size:12px;color:var(--muted)}
.att-row .time{margin-left:auto;font-size:11.5px;color:var(--faint);white-space:nowrap}
.ov-bottom{display:grid;grid-template-columns:minmax(0,1.3fr) minmax(0,1fr) minmax(0,1fr);gap:16px;margin-top:16px}
.toplist{display:flex;flex-direction:column;gap:9px}
.toplist-row{display:grid;grid-template-columns:minmax(0,1fr) 90px 56px;gap:10px;align-items:center;font-size:12.5px}
.toplist-row .name{white-space:nowrap;overflow:hidden;text-overflow:ellipsis;font-weight:550}
.bar-track{height:7px;background:var(--surface-3);border-radius:4px;overflow:hidden}
.bar-track span{display:block;height:100%;background:var(--moving);border-radius:4px}
.toplist-row .v{text-align:right;font-variant-numeric:tabular-nums;color:var(--ink-2)}
.feed{display:flex;flex-direction:column}
.feed-row{display:flex;gap:10px;align-items:center;padding:8px 0;border-top:1px solid var(--line);font-size:12.5px}
.feed-row:first-child{border-top:0}
.feed-row .ev-ico{width:26px;height:26px;border-radius:7px;display:grid;place-items:center;flex-shrink:0}
.feed-row .ev-ico svg{width:14px;height:14px}
.feed-row .what{flex:1;min-width:0}
.feed-row .what strong{font-weight:600;display:block;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.feed-row .what span{color:var(--muted);font-size:11.5px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;display:block}
.feed-row time{font-size:11.5px;color:var(--faint);white-space:nowrap}
.ev-danger{background:var(--danger-bg);color:var(--danger)}.ev-warn{background:var(--warn-bg);color:var(--warn)}.ev-info{background:var(--info-bg);color:var(--info)}.ev-ok{background:var(--ok-bg);color:var(--ok)}.ev-neutral{background:var(--surface-3);color:var(--ink-2)}.ev-purple{background:var(--purple-bg);color:var(--purple)}
.score-ring{position:relative;width:120px;height:120px;flex-shrink:0}
.score-ring svg{width:120px;height:120px;transform:rotate(-90deg)}
.score-ring circle{stroke-width:10;fill:none}
.score-ring .val{position:absolute;inset:0;display:flex;flex-direction:column;align-items:center;justify-content:center}
.score-ring .val strong{font-size:30px;font-weight:700;letter-spacing:-1px;line-height:1}
.score-ring .val span{font-size:11px;color:var(--muted);margin-top:3px}

/* ---------- live map ---------- */
.live{display:grid;grid-template-columns:340px minmax(0,1fr);height:100%;position:relative}
.live.with-detail{grid-template-columns:340px minmax(0,1fr) 384px}
.panel{background:var(--surface);border-right:1px solid var(--line);display:flex;flex-direction:column;min-height:0}
.panel-head{padding:14px 14px 10px;display:flex;flex-direction:column;gap:10px;border-bottom:1px solid var(--line)}
.panel-head .row{gap:8px}
.state-filters{display:grid;grid-template-columns:repeat(5,1fr);gap:4px}
.state-filters button{display:flex;flex-direction:column;align-items:center;gap:1px;padding:6px 2px;border-radius:8px;border:1px solid var(--line);font-size:10.5px;color:var(--muted);font-weight:600}
.state-filters button b{font-size:16px;color:var(--ink);font-weight:700;font-variant-numeric:tabular-nums;display:flex;align-items:center;gap:5px}
.state-filters button b::before{content:'';width:7px;height:7px;border-radius:50%;background:var(--c,var(--ink-2))}
.state-filters button[data-s=all] b::before{display:none}
.state-filters button.on{border-color:var(--c,var(--brand));background:color-mix(in srgb,var(--c,var(--moving)) 9%,transparent)}
.vlist{flex:1;overflow-y:auto;min-height:0}
.vrow{display:flex;gap:11px;align-items:center;padding:10px 14px;border-bottom:1px solid var(--line);cursor:pointer;width:100%;text-align:left;position:relative}
.vrow:hover{background:var(--surface-2)}
.vrow.sel{background:color-mix(in srgb,var(--moving) 8%,var(--surface))}
.vrow.sel::before{content:'';position:absolute;left:0;top:0;bottom:0;width:3px;background:var(--moving)}
.v-ico{width:38px;height:38px;border-radius:10px;display:grid;place-items:center;flex-shrink:0;background:color-mix(in srgb,var(--c) 13%,transparent);color:var(--c);position:relative}
.v-ico svg{width:20px;height:20px}
.v-ico .hd{position:absolute;inset:-4px;display:grid;place-items:center;pointer-events:none}
.v-ico .hd svg{width:9px;height:9px;transform:translateY(-22px);color:var(--c)}
.v-main{flex:1;min-width:0}
.v-name{display:block;font-weight:620;font-size:13px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.v-sub{font-size:12px;color:var(--muted);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;display:flex;align-items:center;gap:6px}
.v-sub b{color:var(--c);font-weight:600}
.v-side{display:flex;flex-direction:column;align-items:flex-end;gap:4px;flex-shrink:0}
.v-side time{font-size:11px;color:var(--faint)}
.v-badges{display:flex;gap:3px}
.v-badge{height:18px;min-width:18px;padding:0 4px;border-radius:5px;display:grid;place-items:center;font-size:10px;font-weight:700;background:var(--surface-3);color:var(--ink-2)}
.v-badge svg{width:11px;height:11px}
.v-badge.danger{background:var(--danger-bg);color:var(--danger)}.v-badge.warn{background:var(--warn-bg);color:var(--warn)}.v-badge.cold{background:var(--info-bg);color:var(--info)}
.panel-foot{padding:9px 14px;border-top:1px solid var(--line);font-size:11.5px;color:var(--muted);display:flex;justify-content:space-between;gap:10px}
.mapwrap{position:relative;min-width:0;min-height:0}
.mapwrap .map{position:absolute;inset:0}
.map-tools{position:absolute;top:12px;left:12px;z-index:500;display:flex;gap:6px;flex-wrap:wrap}
.map-tools .tool{height:34px;padding:0 11px;display:inline-flex;align-items:center;gap:7px;background:var(--surface);border:1px solid var(--line);border-radius:9px;box-shadow:var(--shadow);font-size:12.5px;font-weight:600;color:var(--ink-2)}
.map-tools .tool.on{background:var(--brand);border-color:var(--brand);color:var(--brand-ink)}
.map-tools .tool svg{width:16px;height:16px}
.map-stats{position:absolute;bottom:14px;left:12px;z-index:500;background:var(--surface);border:1px solid var(--line);border-radius:10px;box-shadow:var(--shadow);padding:8px 12px;font-size:12px;display:flex;gap:14px}
.map-stats span{display:flex;align-items:center;gap:6px;color:var(--muted)}
.map-stats b{color:var(--ink);font-variant-numeric:tabular-nums}
.leaflet-container{background:var(--surface-3);font-family:var(--font)}
.tiles-light{filter:grayscale(.85) brightness(1.04) contrast(.92)}
.tiles-dark{filter:invert(1) hue-rotate(180deg) brightness(.82) contrast(.9) saturate(.4)}
[data-theme=dark] .tiles-standard{filter:brightness(.82) contrast(1.05)}
.leaflet-control-zoom a{background:var(--surface)!important;color:var(--ink)!important;border-color:var(--line)!important}
.leaflet-bar{border:1px solid var(--line)!important;box-shadow:var(--shadow)!important;border-radius:9px!important;overflow:hidden}
.leaflet-control-attribution{background:color-mix(in srgb,var(--surface) 85%,transparent)!important;color:var(--muted)!important;font-size:10.5px}
.leaflet-control-attribution a{color:var(--ink-2)!important}
.leaflet-tooltip{background:var(--surface);color:var(--ink);border:1px solid var(--line);box-shadow:var(--shadow);border-radius:8px;font-family:var(--font);font-size:12px;padding:5px 9px}
.leaflet-tooltip-top::before{border-top-color:var(--surface)}
.leaflet-popup-content-wrapper{border-radius:10px;background:var(--surface);color:var(--ink)}
.leaflet-popup-tip{background:var(--surface)}
.vmarker{position:relative;width:34px;height:34px}
.vmarker .body{position:absolute;inset:4px;border-radius:50%;background:var(--c);border:2.5px solid #fff;box-shadow:0 2px 6px rgba(0,0,0,.3);display:grid;place-items:center;color:#fff}
.vmarker .body svg{width:14px;height:14px;stroke-width:2.1}
.vmarker .head{position:absolute;inset:0;display:flex;justify-content:center}
.vmarker .head svg{width:12px;height:12px;color:var(--c);margin-top:-6px;filter:drop-shadow(0 0 1.5px #fff) drop-shadow(0 0 1px #fff)}
.vmarker.sel .body{box-shadow:0 0 0 4px color-mix(in srgb,var(--c) 35%,transparent),0 2px 6px rgba(0,0,0,.3);transform:scale(1.12)}
.vmarker .label{position:absolute;top:36px;left:50%;transform:translateX(-50%);white-space:nowrap;background:var(--surface);color:var(--ink);font-size:11px;font-weight:650;padding:2px 7px;border-radius:6px;box-shadow:var(--shadow);border:1px solid var(--line)}
.marker-cluster-custom{background:none}
.mcluster{width:40px;height:40px;border-radius:50%;background:color-mix(in srgb,var(--brand) 18%,transparent);display:grid;place-items:center}
.mcluster span{width:30px;height:30px;border-radius:50%;background:var(--brand);color:var(--brand-ink);display:grid;place-items:center;font-weight:700;font-size:12px;box-shadow:0 2px 6px rgba(0,0,0,.25)}
.pmarker{width:24px;height:24px;border-radius:7px;display:grid;place-items:center;color:#fff;font-size:11px;font-weight:700;border:2px solid #fff;box-shadow:0 1px 5px rgba(0,0,0,.35)}
.pmarker svg{width:13px;height:13px;stroke-width:2.2}

/* detail drawer */
.detail{background:var(--surface);border-left:1px solid var(--line);display:flex;flex-direction:column;min-height:0}
.detail-head{padding:14px 16px 12px;border-bottom:1px solid var(--line)}
.detail-head .row{align-items:flex-start}
.detail-head h2{font-size:16px;font-weight:680;letter-spacing:-.2px;line-height:1.25}
.detail-head .meta{font-size:12px;color:var(--muted);margin-top:2px}
.detail-speed{display:flex;align-items:flex-end;gap:16px;margin-top:12px}
.detail-speed .big{font-size:34px;font-weight:700;letter-spacing:-1.2px;line-height:1;font-variant-numeric:tabular-nums}
.detail-speed .big small{font-size:13px;color:var(--muted);font-weight:550;letter-spacing:0;margin-left:3px}
.detail-actions{display:grid;grid-template-columns:repeat(2,1fr);gap:6px;margin-top:12px}
.detail-actions .btn{padding:0 6px;font-size:12px;height:34px}
.tabs{display:flex;gap:2px;padding:0 12px;border-bottom:1px solid var(--line)}
.tabs button{height:40px;padding:0 10px;font-size:12.5px;font-weight:600;color:var(--muted);border-bottom:2px solid transparent;margin-bottom:-1px}
.tabs button.on{color:var(--ink);border-bottom-color:var(--moving)}
.detail-body{flex:1;overflow-y:auto;padding:4px 16px 20px}
.dsec{padding:14px 0;border-bottom:1px solid var(--line)}
.dsec:last-child{border-bottom:0}
.dsec h3{font-size:11px;font-weight:700;letter-spacing:.07em;text-transform:uppercase;color:var(--muted);margin-bottom:10px;display:flex;align-items:center;gap:7px}
.dsec h3 svg{width:15px;height:15px}
.kv{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:10px 14px}
.kv div{display:flex;flex-direction:column;gap:1px;min-width:0}
.kv span{font-size:11.5px;color:var(--muted)}
.kv strong{font-size:14px;font-weight:620;font-variant-numeric:tabular-nums;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.kv strong.na{color:var(--faint);font-weight:500;font-size:13px}
.kv .wide{grid-column:1/-1}
.gauge-line{height:8px;border-radius:5px;background:var(--surface-3);overflow:hidden;margin-top:6px}
.gauge-line span{display:block;height:100%;border-radius:5px;background:var(--c,var(--moving))}
.temp-tiles{display:grid;grid-template-columns:repeat(2,1fr);gap:8px}
.temp-tile{border:1px solid var(--line);border-radius:10px;padding:9px 11px;display:flex;flex-direction:column;gap:2px}
.temp-tile span{font-size:11.5px;color:var(--muted)}
.temp-tile strong{font-size:20px;font-weight:700;letter-spacing:-.5px}
.temp-tile.bad{border-color:color-mix(in srgb,var(--danger) 45%,transparent);background:var(--danger-bg)}
.temp-tile.bad strong{color:var(--danger)}
.temp-tile.good strong{color:var(--info)}
.attr-table{width:100%;border-collapse:collapse;font-size:12.5px}
.attr-table td{padding:7px 0;border-bottom:1px solid var(--line);vertical-align:top}
.attr-table td:last-child{text-align:right;font-weight:600;font-variant-numeric:tabular-nums}
.attr-table .k{color:var(--faint);font-size:11px;font-family:ui-monospace,Consolas,monospace}
.attr-group{font-size:11px;font-weight:700;letter-spacing:.07em;text-transform:uppercase;color:var(--muted);padding:14px 0 4px}
.conf{font-size:10px;font-weight:700;padding:1px 5px;border-radius:4px;background:var(--warn-bg);color:var(--warn);margin-left:5px}
.conf.unknown{background:var(--surface-3);color:var(--muted)}
.signal-bars{display:inline-flex;align-items:flex-end;gap:2px;height:14px}
.signal-bars i{width:3.5px;border-radius:1px;background:var(--line-strong)}
.signal-bars i.on{background:var(--moving)}

/* ---------- history ---------- */
.history{display:grid;grid-template-columns:340px minmax(0,1fr);height:100%}
.history .mapcol{display:grid;grid-template-rows:minmax(0,1fr) auto;min-width:0;min-height:0}
.hist-controls{padding:14px;display:flex;flex-direction:column;gap:10px;border-bottom:1px solid var(--line)}
.presets{display:flex;flex-wrap:wrap;gap:5px}
.presets button{height:28px;padding:0 10px;border-radius:7px;border:1px solid var(--line);font-size:12px;font-weight:600;color:var(--ink-2)}
.presets button.on{background:var(--brand);color:var(--brand-ink);border-color:var(--brand)}
.stat-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:1px;background:var(--line);border-bottom:1px solid var(--line)}
.stat-grid div{background:var(--surface);padding:10px 12px;display:flex;flex-direction:column;gap:1px}
.stat-grid span{font-size:11px;color:var(--muted)}
.stat-grid strong{font-size:15px;font-weight:680;font-variant-numeric:tabular-nums}
.trip-list{flex:1;overflow-y:auto;min-height:0}
.trip{display:grid;grid-template-columns:26px minmax(0,1fr) auto;gap:10px;padding:10px 14px;border-bottom:1px solid var(--line);cursor:pointer;align-items:start;width:100%;text-align:left}
.trip:hover{background:var(--surface-2)}
.trip.sel{background:color-mix(in srgb,var(--moving) 8%,var(--surface))}
.trip .tn{width:24px;height:24px;border-radius:7px;display:grid;place-items:center;font-size:11px;font-weight:700;background:var(--surface-3);color:var(--ink-2)}
.trip.stop .tn{background:var(--info-bg);color:var(--info)}
.trip strong{font-size:12.5px;font-weight:620;display:block}
.trip p{font-size:11.5px;color:var(--muted);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.trip .r{text-align:right;font-size:12px;font-weight:620;font-variant-numeric:tabular-nums;white-space:nowrap}
.trip .r span{display:block;font-size:11px;color:var(--muted);font-weight:500}
.player{background:var(--surface);border-top:1px solid var(--line);padding:10px 16px 12px}
.player-row{display:flex;align-items:center;gap:12px;flex-wrap:wrap}
.play-btn{width:38px;height:38px;border-radius:50%;background:var(--brand);color:var(--brand-ink);display:grid;place-items:center;flex-shrink:0}
.play-btn svg{width:16px;height:16px}
.player-time{font-variant-numeric:tabular-nums;font-size:13px;font-weight:650;min-width:110px}
.player-time span{display:block;font-size:11.5px;color:var(--muted);font-weight:500}
.player-readout{display:flex;gap:14px;font-size:12px;color:var(--muted);margin-left:auto;flex-wrap:wrap}
.player-readout span{white-space:nowrap}
.player-readout b{color:var(--ink);font-variant-numeric:tabular-nums;font-size:13px}
.timeline{position:relative;height:96px;margin-top:8px;cursor:crosshair;user-select:none}
.timeline svg{width:100%;height:100%;display:block;overflow:visible}
.speed-legend{display:flex;gap:10px;font-size:11px;color:var(--muted);align-items:center}
.speed-legend i{width:16px;height:4px;border-radius:2px;display:inline-block;margin-right:4px;vertical-align:middle}

/* ---------- reports / tables ---------- */
.rep{display:grid;grid-template-columns:300px minmax(0,1fr);gap:16px;align-items:start}
.rep-side{position:sticky;top:calc(var(--top-h) + 20px);display:flex;flex-direction:column;gap:14px;max-height:calc(100vh - var(--top-h) - 40px);overflow:auto}
.rtypes{display:flex;flex-direction:column;gap:2px;padding:6px}
.rtypes button{display:flex;align-items:center;gap:10px;padding:9px 10px;border-radius:9px;text-align:left;font-size:13px;font-weight:600;color:var(--ink-2)}
.rtypes button span{display:block;font-size:11.5px;color:var(--muted);font-weight:500}
.rtypes button.on{background:var(--lime-2);color:var(--lime-ink)}
.rtypes button.on svg{color:var(--lime-ink)}
.rtypes button svg{color:var(--faint);width:18px;height:18px}
.vpicker{max-height:260px;overflow:auto;border:1px solid var(--line);border-radius:9px}
.vpicker label{display:flex;align-items:center;gap:9px;padding:7px 10px;border-bottom:1px solid var(--line);font-size:12.5px;cursor:pointer}
.vpicker label:last-child{border-bottom:0}
.vpicker label:hover{background:var(--surface-2)}
.vpicker input{accent-color:var(--moving)}
.vpicker .grp{background:var(--surface-2);font-weight:650;font-size:11.5px;color:var(--muted)}
.table-wrap{overflow:auto;max-height:calc(100vh - var(--top-h) - 220px)}
table.data{width:100%;border-collapse:separate;border-spacing:0;font-size:12.5px}
table.data th{position:sticky;top:0;background:var(--surface-2);text-align:left;font-weight:650;font-size:11.5px;color:var(--muted);padding:9px 12px;border-bottom:1px solid var(--line);white-space:nowrap;cursor:pointer;user-select:none;z-index:1}
table.data th.r,table.data td.r{text-align:right}
table.data th .arr{opacity:.4;margin-left:3px}
table.data th.sorted .arr{opacity:1;color:var(--moving)}
table.data td{padding:9px 12px;border-bottom:1px solid var(--line);white-space:nowrap;font-variant-numeric:tabular-nums}
table.data tbody tr:hover td{background:var(--surface-2)}
table.data tbody tr.click{cursor:pointer}
table.data tfoot td{font-weight:700;background:var(--surface-2);position:sticky;bottom:0;border-top:1px solid var(--line-strong)}
table.data .vname{font-weight:600;max-width:260px;overflow:hidden;text-overflow:ellipsis}
.rep-head{display:flex;align-items:center;gap:12px;padding:14px 16px;border-bottom:1px solid var(--line);flex-wrap:wrap}
.rep-head h2{font-size:15px;font-weight:680}
.rep-head .sub{font-size:12px;color:var(--muted)}
.rep-kpis{display:grid;grid-template-columns:repeat(auto-fit,minmax(140px,1fr));gap:1px;background:var(--line);border-bottom:1px solid var(--line)}
.rep-kpis div{background:var(--surface);padding:12px 16px}
.rep-kpis span{font-size:11.5px;color:var(--muted);display:block}
.rep-kpis strong{font-size:20px;font-weight:700;letter-spacing:-.5px;font-variant-numeric:tabular-nums}
.grade{display:inline-grid;place-items:center;width:26px;height:26px;border-radius:7px;font-weight:800;font-size:13px;color:#fff}
.grade.A{background:#1f9d55}.grade.B{background:#5fae3a}.grade.C{background:#d4a20f}.grade.D{background:#e07b18}.grade.E{background:#d23f3f}
.mini-bar{display:inline-block;width:70px;height:6px;border-radius:3px;background:var(--surface-3);overflow:hidden;vertical-align:middle;margin-right:7px}
.mini-bar span{display:block;height:100%;background:var(--c,var(--moving))}

/* ---------- eco ---------- */
.eco-top{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,2fr);gap:16px}
.eco-hero{display:flex;gap:20px;align-items:center;padding:18px}
.eco-parts{display:grid;grid-template-columns:repeat(4,1fr);gap:12px;padding:18px}
.eco-part{display:flex;flex-direction:column;gap:6px}
.eco-part span{font-size:12px;color:var(--muted)}
.eco-part strong{font-size:22px;font-weight:700;letter-spacing:-.5px}
.eco-part p{font-size:11.5px;color:var(--faint)}
.leader{display:flex;flex-direction:column}
.leader-row{display:grid;grid-template-columns:28px 34px minmax(0,1.4fr) minmax(0,1fr) repeat(4,minmax(60px,.6fr));gap:12px;align-items:center;padding:10px 16px;border-top:1px solid var(--line);font-size:12.5px}
.leader-row.head{font-size:11px;font-weight:650;color:var(--muted);text-transform:uppercase;letter-spacing:.05em;border-top:0;background:var(--surface-2)}
.leader-row .rank{font-weight:700;color:var(--faint);text-align:center}
.leader-row .nm strong{display:block;font-weight:620;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.leader-row .nm span{font-size:11.5px;color:var(--muted)}
.leader-row .c{text-align:right;font-variant-numeric:tabular-nums}

/* ---------- cold chain ---------- */
.cc-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(360px,1fr));gap:16px}
.cc-card{padding:0;overflow:hidden}
.cc-head{display:flex;align-items:center;gap:10px;padding:14px 16px 10px}
.cc-head h3{font-size:14px;font-weight:650;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.cc-head p{font-size:11.5px;color:var(--muted)}
.cc-temps{display:grid;grid-template-columns:repeat(auto-fit,minmax(84px,1fr));gap:8px;padding:0 16px}
.cc-temp{flex:1;border-radius:10px;background:var(--surface-2);padding:10px 12px}
.cc-temp span{font-size:11.5px;color:var(--muted)}
.cc-temp span{white-space:nowrap}
.cc-temp strong{display:block;white-space:nowrap;font-size:24px;font-weight:700;letter-spacing:-1px;line-height:1.15}
.cc-temp.bad{background:var(--danger-bg)}.cc-temp.bad strong{color:var(--danger)}
.cc-chart{height:120px;padding:6px 8px 0}
.cc-foot{display:flex;gap:12px;align-items:center;padding:10px 16px;border-top:1px solid var(--line);font-size:12px;color:var(--muted);flex-wrap:wrap}
.cc-foot .input{width:70px;height:28px;padding:0 7px;font-size:12px}

/* ---------- alerts ---------- */
.alerts{display:grid;grid-template-columns:260px minmax(0,1fr);gap:16px;align-items:start}
.alert-cats{display:flex;flex-direction:column;gap:2px;padding:8px}
.alert-cats button{display:flex;align-items:center;gap:10px;padding:8px 10px;border-radius:8px;font-size:13px;font-weight:600;color:var(--ink-2);text-align:left}
.alert-cats button.on{background:var(--lime-2);color:var(--lime-ink)}
.alert-cats button .n{margin-left:auto;font-size:11.5px;color:var(--muted);font-weight:600}
.alert-list .feed-row{padding:11px 16px}
.alert-list .feed-row.unread{background:color-mix(in srgb,var(--info) 5%,transparent)}
.alert-list .feed-row.unread .what strong::after{content:'';display:inline-block;width:7px;height:7px;border-radius:50%;background:var(--info);margin-left:7px;vertical-align:middle}

/* ---------- geofences / vehicles / data / settings ---------- */
.split{display:grid;grid-template-columns:360px minmax(0,1fr);height:100%}
.gf-row{display:flex;gap:11px;padding:11px 14px;border-bottom:1px solid var(--line);cursor:pointer;width:100%;text-align:left;align-items:center}
.gf-row:hover,.gf-row.sel{background:var(--surface-2)}
.gf-swatch{width:30px;height:30px;border-radius:8px;flex-shrink:0;display:grid;place-items:center;color:#fff}
.gf-swatch svg{width:15px;height:15px}
.coverage{display:grid;grid-template-columns:repeat(auto-fill,minmax(230px,1fr));gap:14px}
.cov-card{padding:14px 16px;display:flex;flex-direction:column;gap:6px}
.cov-card h3{font-size:13.5px;font-weight:650}
.cov-card p{font-size:12px;color:var(--muted);min-height:34px}
.cov-card strong{font-size:22px;font-weight:700}
.cov-card strong small{font-size:12px;color:var(--muted);font-weight:500}
.settings{max-width:900px;display:flex;flex-direction:column;gap:16px}
.set-row{display:flex;align-items:center;justify-content:space-between;gap:20px;padding:14px 16px;border-top:1px solid var(--line)}
.set-row:first-of-type{border-top:0}
.set-row strong{font-size:13.5px;font-weight:620;display:block}
.set-row p{font-size:12px;color:var(--muted)}
.set-row .ctl{flex-shrink:0;display:flex;align-items:center;gap:8px}

/* ---------- palette & toasts ---------- */
.palette{position:fixed;inset:0;background:rgba(8,20,14,.45);z-index:3000;display:flex;justify-content:center;align-items:flex-start;padding-top:12vh}
.palette-box{width:min(620px,92vw);background:var(--surface);border-radius:14px;box-shadow:var(--shadow-lg);overflow:hidden;border:1px solid var(--line)}
.palette-input{display:flex;align-items:center;gap:10px;padding:0 16px;border-bottom:1px solid var(--line)}
.palette-input input{flex:1;height:54px;border:0;background:none;font-size:16px;outline:none}
.palette-input svg{color:var(--faint)}
.palette-results{max-height:50vh;overflow:auto;padding:6px}
.pal-item{display:flex;align-items:center;gap:11px;padding:9px 11px;border-radius:9px;cursor:pointer;width:100%;text-align:left}
.pal-item.on,.pal-item:hover{background:var(--surface-3)}
.pal-item .meta{margin-left:auto;font-size:11.5px;color:var(--muted)}
.pal-group{font-size:10.5px;font-weight:700;letter-spacing:.08em;text-transform:uppercase;color:var(--faint);padding:10px 11px 4px}
.toasts{position:fixed;right:18px;bottom:18px;z-index:4000;display:flex;flex-direction:column;gap:8px;align-items:flex-end}
.toast{display:flex;gap:11px;align-items:flex-start;min-width:280px;max-width:380px;background:var(--surface);border:1px solid var(--line);border-left:4px solid var(--c,var(--info));border-radius:10px;box-shadow:var(--shadow-lg);padding:11px 14px;font-size:13px;animation:tin .22s ease}
.toast strong{display:block;font-weight:650}
.toast p{font-size:12px;color:var(--muted)}
.toast svg{color:var(--c,var(--info));margin-top:1px}
@keyframes tin{from{transform:translateY(8px);opacity:0}}

/* ---------- charts ---------- */
.chart{width:100%;height:auto;display:block;overflow:visible;stroke:none;stroke-width:1}
.chart text{stroke:none}
.leaflet-container svg{stroke-linecap:round}
.leaflet-overlay-pane svg path{fill:revert-layer}
.chart text{font-family:var(--font);font-size:10.5px;fill:var(--muted)}
.chart .grid line{stroke:var(--line);stroke-width:1}
.chart .axis{stroke:var(--line-strong)}
.chart-tip{position:absolute;pointer-events:none;background:var(--surface);border:1px solid var(--line);box-shadow:var(--shadow);border-radius:8px;padding:6px 9px;font-size:12px;white-space:nowrap;z-index:20;transform:translate(-50%,-100%);margin-top:-8px}
.chart-tip b{font-variant-numeric:tabular-nums}
.chart-box{position:relative}

/* ---------- responsive ---------- */
@media (max-width:1380px){.kpis{grid-template-columns:repeat(3,minmax(0,1fr))}}
@media (max-width:1500px){.ov-bottom{grid-template-columns:1fr 1fr}.ov-bottom>:first-child{grid-column:1/-1}.live.with-detail{grid-template-columns:300px minmax(0,1fr) 360px}}
@media (max-width:1200px){.ov-grid,.eco-top{grid-template-columns:1fr}.rep,.alerts{grid-template-columns:1fr}.rep-side{position:static;max-height:none}.live{grid-template-columns:300px minmax(0,1fr)}.live.with-detail{grid-template-columns:minmax(0,1fr) 360px}.live.with-detail .panel{display:none}.clock{display:none}.eco-parts{grid-template-columns:1fr 1fr}}
@media (max-width:860px){
  .sidebar{transform:translateX(-100%);transition:transform .2s;width:250px}
  body.menu-open .sidebar{transform:none}
  body.menu-open .brand-text,body.menu-open .nav-label,body.menu-open .nav a span{display:block}
  .main{margin-left:0}.mobile-menu{display:grid}.global-search{width:auto;flex:0 0 auto}.global-search span,.global-search kbd{display:none}.feed-pill span{display:none}
  .kpis{grid-template-columns:repeat(2,minmax(0,1fr))}.ov-bottom{grid-template-columns:1fr}
  .view{padding:14px}.view.full{height:auto;overflow:visible}
  .live,.live.with-detail,.history,.split{grid-template-columns:1fr;height:auto}
  .live .panel,.live.with-detail .panel{display:flex;max-height:44vh}
  .mapwrap{height:60vh}.detail{border-left:0;border-top:1px solid var(--line)}
  .live>*,.history>*,.split>*{min-width:0}.map-tools{right:52px}.map-tools .tool{height:30px;padding:0 8px;font-size:11.5px}.notice{margin:10px 14px 0;font-size:12px}
  .topbar{gap:8px;padding:0 10px}.topbar-actions{gap:2px}
  .history .mapcol{grid-template-rows:60vh auto}
  .leader-row{grid-template-columns:24px 30px minmax(0,1fr) 60px}.leader-row>:nth-child(n+5){display:none}
  .page-title h1{font-size:16px}.crumb{display:none}
}
@media print{
  .sidebar,.topbar,.rep-side,.no-print,.toasts{display:none!important}
  .main{margin:0}.view{padding:0}.rep{display:block}.card{box-shadow:none;border:0}
  .table-wrap{max-height:none;overflow:visible}table.data th{position:static}
  body{background:#fff;color:#000}
}
@media (prefers-reduced-motion:reduce){*{animation:none!important;transition:none!important}}

.dt-pair{display:grid;grid-template-columns:1fr;gap:8px}

/* ---------- compliance, forms ---------- */
.modal{border:0;padding:0;background:transparent;max-width:min(860px,96vw);width:100%;color:var(--ink)}
.modal::backdrop{background:rgba(8,20,14,.45)}
.modal-box{background:var(--surface);border-radius:14px;box-shadow:var(--shadow-lg);border:1px solid var(--line);display:flex;flex-direction:column;max-height:90vh}
.modal-head{display:flex;align-items:flex-start;gap:12px;padding:16px 18px;border-bottom:1px solid var(--line)}.modal-head>div{flex:1}.modal-head h2{font-size:17px;font-weight:680}
.modal-body{padding:16px 18px;overflow:auto}.modal-foot{display:flex;gap:8px;align-items:center;padding:12px 18px;border-top:1px solid var(--line)}
.form-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px 14px}.form-grid .wide{grid-column:1/-1}
.form-grid textarea.input{height:auto;padding:9px 11px;resize:vertical}.field-check{align-self:end;height:36px}
.form-error{color:var(--danger);font-size:13px;margin-top:10px;min-height:16px}.danger-text{color:var(--danger)!important}
.docs-head,.doc-row{display:grid;grid-template-columns:1.6fr 1fr 1fr .95fr .95fr 36px;gap:6px;align-items:center}
.docs-head{font-size:11px;color:var(--muted);font-weight:600;margin:4px 0}.doc-row{margin-bottom:6px}.doc-row .input{height:34px;padding:0 7px;font-size:12.5px}
.docs-box+.btn{margin-top:4px;align-self:flex-start}
.avatar{width:36px;height:36px;border-radius:50%;background:var(--lime-2);color:var(--lime-ink);display:grid;place-items:center;font-weight:700;font-size:13px;flex-shrink:0}.avatar.lg{width:56px;height:56px;font-size:19px}
.profile-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:16px;align-items:start}
.doc-list{display:flex;flex-direction:column;gap:8px}.doc-item{display:flex;gap:12px;align-items:center;padding:10px 12px;border:1px solid var(--line);border-radius:10px}
.doc-item.expired{border-color:color-mix(in srgb,var(--danger) 40%,transparent);background:var(--danger-bg)}.doc-item.soon{border-color:color-mix(in srgb,var(--warn) 40%,transparent);background:var(--warn-bg)}
.doc-ico{width:32px;height:32px;border-radius:8px;background:var(--surface-3);display:grid;place-items:center;flex-shrink:0}
.tacho-gauges{display:grid;grid-template-columns:repeat(3,1fr);gap:12px}.tg span{font-size:11.5px;color:var(--muted);display:block}.tg strong{font-size:20px;font-weight:700}
.day-bars{display:flex;gap:6px;align-items:flex-end;height:120px;margin-top:16px}.day-bar{flex:1;display:flex;flex-direction:column;align-items:center;gap:4px;height:100%}
.day-bar .stack{flex:1;width:100%;max-width:34px;background:var(--surface-3);border-radius:6px;display:flex;flex-direction:column-reverse;overflow:hidden}.day-bar .drive{background:var(--moving)}.day-bar .work{background:var(--idle)}
.day-bar small{font-size:10px;color:var(--muted);white-space:nowrap}
.focus-row td{background:color-mix(in srgb,var(--moving) 7%,var(--surface))!important}.detail-row td{background:var(--surface-2);white-space:normal}
.day-table{display:grid;grid-template-columns:repeat(auto-fill,minmax(170px,1fr));gap:8px;margin-bottom:8px}.day-table>div{background:var(--surface);border:1px solid var(--line);border-radius:9px;padding:8px 10px;display:flex;flex-direction:column;font-size:12px;gap:2px}
.rules{margin:0 0 12px;padding-left:18px;display:flex;flex-direction:column;gap:6px;font-size:13px}
.tire-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(330px,1fr));gap:12px;padding:14px 16px}
.tire-card{border:1px solid var(--line);border-radius:12px;padding:12px;display:flex;flex-direction:column;gap:6px}
.tire-row{display:flex;gap:10px;align-items:center;padding:6px;border-radius:8px;width:100%}.tire-row:hover{background:var(--surface-2)}
.tire-ico{width:30px;height:30px;border-radius:8px;display:grid;place-items:center;background:var(--surface-3)}.tire-ico.danger{background:var(--danger-bg);color:var(--danger)}.tire-ico.warn{background:var(--warn-bg);color:var(--warn)}.tire-ico.ok{background:var(--ok-bg);color:var(--ok)}
.seg button svg{width:15px;height:15px}.flip{transform:scaleX(-1)}
@media (max-width:1200px){.profile-grid{grid-template-columns:1fr}}
@media (max-width:860px){.form-grid{grid-template-columns:1fr}.docs-head{display:none}.doc-row{grid-template-columns:1fr 1fr;padding:8px;border:1px solid var(--line);border-radius:8px}.tacho-gauges{grid-template-columns:1fr}}