:root{
  --bg:#04090d;
  --bg2:#071017;
  --panel:rgba(10,22,29,.86);
  --panel2:rgba(14,31,40,.9);
  --panel-solid:#0a161d;
  --line:#15323e;
  --line2:#1f4b5c;
  --ink:#e9f6fa;
  --muted:#87a3af;
  --faint:#5a7380;
  --acc:#38e8ff;
  --acc2:#1ea7c4;
  --amber:#ffb02e;
  --red:#ff5c70;
  --green:#4dffa6;
  --violet:#a78bfa;
  --radius:15px;
  --radius-sm:10px;
  --shadow:0 18px 48px rgba(0,0,0,.32), inset 0 1px 0 rgba(255,255,255,.025);
  --mono:ui-monospace,SFMono-Regular,Menlo,Consolas,"DejaVu Sans Mono",monospace;
  --sans:-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,"PingFang SC","Hiragino Sans GB","Microsoft YaHei",sans-serif;
  color-scheme:dark;
}
*{box-sizing:border-box}
html{
  -webkit-text-size-adjust:100%;
  text-size-adjust:100%;
  scroll-behavior:smooth;
}
html,body{margin:0;min-height:100%}
body{
  min-height:100vh;
  min-height:100dvh;
  background:var(--bg);
  color:var(--ink);
  font:14px/1.5 var(--sans);
  font-variant-numeric:tabular-nums;
  overflow-x:hidden;
  -webkit-font-smoothing:antialiased;
  -webkit-tap-highlight-color:transparent;
}
button,input,select{font:inherit;color:inherit}
button{cursor:pointer}
a{color:var(--acc);text-decoration:none}
a:hover{text-decoration:underline}
h1,h2,h3,p{margin:0}
img{max-width:100%}
[hidden]{display:none!important}
::selection{background:rgba(56,232,255,.28);color:#fff}
:focus-visible{outline:2px solid rgba(56,232,255,.75);outline-offset:2px}

.sr-only{
  position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;
  clip:rect(0,0,0,0);white-space:nowrap;border:0;
}
.skip-link{
  position:fixed;left:12px;top:-60px;z-index:100;
  padding:9px 14px;border-radius:9px;background:var(--acc);color:#041014;font-weight:700;
  transition:top .18s ease;
}
.skip-link:focus{top:12px;text-decoration:none}

.bg{
  position:fixed;inset:0;z-index:-2;pointer-events:none;
  background:
    radial-gradient(1100px 620px at 82% -14%,rgba(56,232,255,.14),transparent 62%),
    radial-gradient(900px 560px at -12% 38%,rgba(255,176,46,.075),transparent 60%),
    radial-gradient(800px 540px at 55% 110%,rgba(167,139,250,.05),transparent 62%),
    linear-gradient(180deg,#050b10 0%,#04090d 44%,#03070a 100%);
}
.bg::after{
  content:"";position:absolute;inset:0;opacity:.4;
  background-image:
    linear-gradient(rgba(56,232,255,.055) 1px,transparent 1px),
    linear-gradient(90deg,rgba(56,232,255,.055) 1px,transparent 1px);
  background-size:48px 48px;
  -webkit-mask-image:radial-gradient(ellipse at 50% 0%,#000 0%,transparent 76%);
  mask-image:radial-gradient(ellipse at 50% 0%,#000 0%,transparent 76%);
}

/* ---------- top bar ---------- */
.topbar{
  position:sticky;top:0;z-index:50;
  border-bottom:1px solid var(--line);
  background:linear-gradient(180deg,rgba(4,9,13,.97),rgba(4,9,13,.8));
  -webkit-backdrop-filter:blur(18px) saturate(140%);
  backdrop-filter:blur(18px) saturate(140%);
  box-shadow:0 10px 30px rgba(0,0,0,.28);
}
.topbar-inner{
  width:100%;max-width:2200px;margin:0 auto;
  display:flex;align-items:center;gap:14px;
  padding:11px 12px;
  padding:calc(11px + env(safe-area-inset-top)) max(12px,env(safe-area-inset-left)) 11px max(12px,env(safe-area-inset-left));
  padding-left:max(12px,env(safe-area-inset-left));
  padding-right:max(12px,env(safe-area-inset-right));
}
.brand{display:flex;align-items:center;gap:11px;min-width:0;flex:1 1 auto}
.brand-logo{
  width:42px;height:42px;flex:none;object-fit:contain;padding:3px;border-radius:50%;
  border:1px solid rgba(56,232,255,.3);
  background:radial-gradient(circle at 50% 40%,rgba(56,232,255,.18),rgba(5,10,14,.72));
  box-shadow:0 0 20px rgba(56,232,255,.2);
}
.brand-text{min-width:0}
.brand h1{font:700 17px/1.1 var(--sans);font-size:clamp(15px,1.4vw,18px);letter-spacing:.02em;white-space:nowrap}
.brand p{
  margin-top:2px;color:var(--muted);font:500 10.5px/1.25 var(--mono);
  letter-spacing:.14em;white-space:nowrap;
}
.brand-meta{display:flex;align-items:center;gap:10px;margin-left:8px;min-width:0}
.clock{
  color:var(--muted);font:600 11.5px/1 var(--mono);letter-spacing:.1em;
  padding:6px 8px;border:1px solid rgba(31,75,92,.55);border-radius:8px;
  background:rgba(8,19,25,.6);white-space:nowrap;
}
.status{
  display:inline-flex;align-items:center;gap:7px;color:var(--muted);
  font:500 11.5px/1 var(--mono);white-space:nowrap;
}
.status::before{
  content:"";width:7px;height:7px;border-radius:50%;flex:none;
  background:var(--faint);box-shadow:0 0 0 0 rgba(77,255,166,.4);
}
.status.ok{color:#a9e9cf}
.status.ok::before{background:var(--green);box-shadow:0 0 10px rgba(77,255,166,.72);animation:pulse 2s infinite}
.status.bad{color:#ffb6c0}
.status.bad::before{background:var(--red);box-shadow:0 0 10px rgba(255,92,112,.72)}
.status.loading::before{background:var(--amber);box-shadow:0 0 10px rgba(255,176,46,.65);animation:pulse 1s infinite}
@keyframes pulse{0%,100%{box-shadow:0 0 0 0 rgba(77,255,166,.38)}50%{box-shadow:0 0 0 5px rgba(77,255,166,0)}}

.controls{display:flex;align-items:center;gap:8px;flex-wrap:wrap;justify-content:flex-end;min-width:0}
.field{display:inline-flex;align-items:center;gap:6px;min-width:0}
.field-label{
  color:var(--faint);font:600 9.5px/1 var(--mono);letter-spacing:.1em;
  text-transform:uppercase;white-space:nowrap;
}
.select{
  -webkit-appearance:none;appearance:none;
  min-height:34px;max-width:210px;
  padding:7px 27px 7px 10px;border-radius:9px;
  border:1px solid var(--line2);
  background-color:rgba(8,19,25,.78);
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='6'%3E%3Cpath d='M1 1l4 4 4-4' stroke='%2387a3af' stroke-width='1.5' fill='none' stroke-linecap='round'/%3E%3C/svg%3E");
  background-repeat:no-repeat;background-position:right 9px center;
  color:var(--ink);font:600 12px/1.2 var(--sans);
  text-overflow:ellipsis;cursor:pointer;
}
.select:hover{border-color:rgba(56,232,255,.45)}
.select:disabled{opacity:.55;cursor:not-allowed}

.segmented{
  display:inline-flex;gap:2px;padding:3px;border:1px solid var(--line2);
  border-radius:10px;background:rgba(8,19,25,.72);min-width:0;
}
.seg-btn{
  border:0;background:transparent;color:var(--muted);
  min-height:28px;padding:5px 9px;border-radius:7px;
  font:600 11.5px/1 var(--sans);white-space:nowrap;transition:.15s;
}
.seg-btn:hover{color:var(--ink);background:rgba(56,232,255,.07)}
.seg-btn.is-active{
  color:#e9fdff;
  background:linear-gradient(135deg,rgba(56,232,255,.24),rgba(56,232,255,.08));
  box-shadow:inset 0 0 0 1px rgba(56,232,255,.28),0 0 12px rgba(56,232,255,.08);
}
.switch{
  display:inline-flex;align-items:center;gap:7px;min-height:34px;
  color:var(--muted);font-size:11.5px;cursor:pointer;user-select:none;white-space:nowrap;
}
.switch input{
  -webkit-appearance:none;appearance:none;flex:none;
  width:32px;height:18px;border-radius:99px;margin:0;
  background:#12222b;border:1px solid var(--line2);position:relative;cursor:pointer;transition:.2s;
}
.switch input::after{
  content:"";position:absolute;left:2px;top:2px;width:12px;height:12px;
  border-radius:50%;background:var(--faint);transition:.2s;
}
.switch input:checked{background:rgba(56,232,255,.2);border-color:rgba(56,232,255,.58)}
.switch input:checked::after{left:16px;background:var(--acc);box-shadow:0 0 8px var(--acc)}

.btn{
  display:inline-flex;align-items:center;justify-content:center;gap:6px;
  min-height:34px;padding:7px 13px;border-radius:9px;
  border:1px solid var(--line2);background:rgba(56,232,255,.06);
  color:var(--ink);font:600 12px/1 var(--sans);white-space:nowrap;transition:.15s;
}
.btn:hover{border-color:rgba(56,232,255,.6);background:rgba(56,232,255,.12)}
.btn:active{transform:scale(.98)}
.btn:disabled{opacity:.45;cursor:not-allowed;transform:none}
.btn-primary{
  border-color:rgba(56,232,255,.5);
  background:linear-gradient(135deg,rgba(56,232,255,.24),rgba(56,232,255,.08));
  color:#e6fdff;
}
.btn-primary:hover{background:linear-gradient(135deg,rgba(56,232,255,.34),rgba(56,232,255,.12))}
.btn-mini{min-height:27px;padding:4px 8px;font-size:10.5px;border-radius:7px}
.btn-refresh{flex:none}

.icon-btn{
  width:34px;height:34px;flex:none;display:inline-grid;place-items:center;
  padding:0;border:1px solid var(--line2);border-radius:9px;
  background:rgba(8,19,25,.7);color:var(--muted);
  font:600 19px/1 var(--mono);transition:.15s;
}
.icon-btn:hover{color:var(--ink);border-color:rgba(56,232,255,.5);background:rgba(56,232,255,.08)}
.icon-btn:active{transform:scale(.96)}
.icon-btn:disabled{opacity:.4;cursor:not-allowed}

/* ---------- main / kpi ---------- */
main{
  width:100%;max-width:2200px;margin:0 auto;
  padding:16px 12px 26px;
  padding:16px max(12px,env(safe-area-inset-left)) 26px max(12px,env(safe-area-inset-left));
  padding-left:max(12px,env(safe-area-inset-left));
  padding-right:max(12px,env(safe-area-inset-right));
}
.kpis{
  display:grid;
  grid-template-columns:repeat(auto-fit,minmax(145px,1fr));
  gap:10px;margin-bottom:12px;
}
.kpi{
  position:relative;overflow:hidden;min-width:0;
  padding:12px 13px 11px;border:1px solid var(--line);border-radius:13px;
  background:linear-gradient(160deg,rgba(15,34,43,.88),rgba(8,17,23,.78));
  box-shadow:inset 0 1px 0 rgba(255,255,255,.025);
}
.kpi::before{
  content:"";position:absolute;left:0;top:0;width:40px;height:2px;
  background:linear-gradient(90deg,var(--acc),transparent);
}
.kpi .k{
  color:var(--muted);font:600 10.5px/1.2 var(--sans);letter-spacing:.08em;
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis;
}
.kpi .v{
  margin-top:7px;font:700 24px/1 var(--mono);font-size:clamp(19px,2.05vw,27px);
  color:var(--ink);text-shadow:0 0 18px rgba(56,232,255,.14);
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis;
}
.kpi .v small{
  font:600 10.5px/1 var(--mono);color:var(--acc);margin-left:4px;
  letter-spacing:.04em;
}
.kpi .s{
  margin-top:6px;color:var(--faint);font:500 10.5px/1.3 var(--mono);
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis;
}
.kpi.warn::before{background:linear-gradient(90deg,var(--amber),transparent)}
.kpi.warn .v,.kpi.warn .v small{color:var(--amber)}
.kpi.good .v{color:var(--green)}
.kpi.bad .v{color:var(--red)}

.skeleton{position:relative;overflow:hidden;min-height:86px}
.skeleton::after{
  content:"";position:absolute;inset:0;
  background:linear-gradient(90deg,transparent,rgba(255,255,255,.06),transparent);
  animation:shimmer 1.4s infinite;
}
@keyframes shimmer{0%{transform:translateX(-100%)}100%{transform:translateX(100%)}}

/* ---------- layout / panels ---------- */
.layout{
  display:grid;gap:12px;align-items:stretch;
  grid-template-columns:minmax(300px,.72fr) minmax(0,1.16fr) minmax(0,.92fr);
  grid-template-areas:
    "trips detail detail"
    "trips daily insights";
}
.trips{grid-area:trips}
.detail{grid-area:detail}
.daily{grid-area:daily}
.insights{grid-area:insights}

.panel{
  min-width:0;display:flex;flex-direction:column;
  border:1px solid var(--line);border-radius:var(--radius);overflow:hidden;
  background:linear-gradient(180deg,var(--panel2),var(--panel));
  box-shadow:var(--shadow);
}
.panel-head{
  display:flex;align-items:center;justify-content:space-between;gap:10px;
  padding:12px 14px 10px;border-bottom:1px solid rgba(31,75,92,.55);flex-wrap:wrap;
}
.panel-title{min-width:0;flex:1 1 auto}
.panel-head h2{font:700 12.5px/1.2 var(--sans);letter-spacing:.06em}
.panel-head .sub{
  display:block;margin-top:4px;color:var(--faint);font:500 10.5px/1.35 var(--mono);
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis;
}

/* ---------- trips ---------- */
.trips{min-height:0}
.trip-list{
  flex:1;min-height:0;overflow:auto;padding:6px;
  max-height:calc(100dvh - 260px);
  scrollbar-width:thin;scrollbar-color:var(--line2) transparent;
  overscroll-behavior:contain;
}
.trip-list::-webkit-scrollbar{width:8px;height:8px}
.trip-list::-webkit-scrollbar-thumb{background:var(--line2);border-radius:99px}
.trip-list::-webkit-scrollbar-track{background:transparent}
.trip{
  width:100%;display:grid;grid-template-columns:minmax(0,1fr) auto;
  gap:5px 10px;text-align:left;
  padding:10px 11px;margin-bottom:5px;border:1px solid transparent;border-radius:10px;
  background:rgba(7,15,20,.56);color:var(--ink);transition:.15s;
  -webkit-appearance:none;appearance:none;
}
.trip:hover{border-color:var(--line2);background:rgba(18,44,55,.56)}
.trip.is-active{
  border-color:rgba(56,232,255,.62);
  background:linear-gradient(90deg,rgba(56,232,255,.15),rgba(56,232,255,.035));
  box-shadow:inset 0 0 0 1px rgba(56,232,255,.1);
}
.trip .when{
  min-width:0;font:600 11.5px/1.3 var(--mono);color:var(--ink);
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis;
}
.trip .km{
  font:700 14px/1 var(--mono);color:var(--acc);text-align:right;white-space:nowrap;
}
.trip .km small{font:600 9.5px/1 var(--mono);color:var(--faint);margin-left:3px}
.trip .meta{
  grid-column:1/-1;display:flex;gap:5px 10px;flex-wrap:wrap;
  color:var(--muted);font:500 10px/1.35 var(--mono);
}
.trip .meta b{color:var(--ink);font-weight:600}
.trip .meta .alert{color:var(--amber)}
.trip .meta .alert b{color:var(--amber)}
.trip-more{
  width:100%;min-height:46px;flex:none;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:3px;
  margin:2px 0 5px;padding:8px;border:1px dashed var(--line2);border-radius:10px;
  background:rgba(56,232,255,.035);color:var(--muted);font:600 11px/1.2 var(--sans);transition:.15s;
}
.trip-more small{color:var(--faint);font:500 9.5px/1 var(--mono)}
.trip-more:hover{border-color:rgba(56,232,255,.55);background:rgba(56,232,255,.08);color:var(--ink)}
.trip-more:disabled{opacity:.55;cursor:wait}
.trip-more.is-error{border-color:rgba(255,176,46,.45);color:var(--amber)}
.empty{
  padding:22px 10px;color:var(--faint);font:500 12px/1.6 var(--mono);
  text-align:center;width:100%;
}
.empty .btn{margin-top:10px}

.search{flex:none;min-width:0;width:112px}
.search input{
  width:100%;min-height:30px;padding:5px 9px;border-radius:8px;
  border:1px solid var(--line2);background:rgba(6,14,19,.72);
  color:var(--ink);font:500 11px/1 var(--mono);outline:none;
}
.search input::placeholder{color:var(--faint)}
.search input:focus{border-color:rgba(56,232,255,.55)}

/* ---------- detail ---------- */
.detail{min-height:0}
.trip-stats{
  display:flex;flex-wrap:wrap;gap:5px;padding:9px 12px 0;
  min-height:0;
}
.stat-chip{
  display:inline-flex;align-items:baseline;gap:5px;
  padding:5px 8px;border-radius:8px;
  border:1px solid rgba(31,75,92,.5);background:rgba(6,14,19,.5);
  color:var(--faint);font:500 10px/1.2 var(--mono);white-space:nowrap;
}
.stat-chip b{color:var(--ink);font-weight:700}
.stat-chip.auto b{color:var(--green)}
.stat-chip.warn b{color:var(--amber)}
.stat-chip.danger b{color:var(--red)}

.chart-pair{
  display:grid;grid-template-columns:1fr 1fr;gap:8px;
  padding:9px 8px 0;min-width:0;
}
.chart-block{
  position:relative;min-width:0;display:flex;flex-direction:column;overflow:hidden;
  border:1px solid rgba(31,75,92,.24);border-radius:12px;
  background:rgba(4,10,14,.24);
}
.chart-head{
  display:flex;align-items:center;justify-content:space-between;gap:8px;
  height:34px;padding:0 10px;color:var(--muted);
  font:600 10.5px/1.2 var(--mono);letter-spacing:.08em;
}
.chart-hint{
  display:inline-flex;align-items:center;gap:5px;
  color:var(--faint);font:500 9.5px/1 var(--mono);letter-spacing:.02em;
  white-space:nowrap;
}
.legend-dot{
  width:6px;height:6px;border-radius:2px;background:rgba(77,255,166,.6);
  box-shadow:0 0 8px rgba(77,255,166,.35);flex:none;
}
.chart{
  width:100%;height:280px;height:clamp(228px,28vh,330px);min-width:0;
}
.chart-mini{height:150px}
.map-tools{
  position:absolute;z-index:6;right:6px;top:36px;
  display:flex;align-items:center;gap:4px;
  padding:3px;border-radius:9px;
  border:1px solid rgba(31,75,92,.5);
  background:rgba(4,12,16,.82);
  -webkit-backdrop-filter:blur(8px);
  backdrop-filter:blur(8px);
}
.map-tools .icon-btn{
  width:26px;height:26px;border-radius:6px;font-size:14px;
}
.map-tools .btn-mini{height:26px;min-height:26px;padding:3px 7px}
.map-tools .icon-btn:hover,.map-tools .btn-mini:hover{border-color:rgba(56,232,255,.55)}
.detail-foot{padding:6px 14px 13px;min-height:72px}
.detail-foot h3,.insight-foot h3{
  font:700 10.5px/1.2 var(--sans);color:var(--muted);letter-spacing:.1em;
  margin:2px 0 7px;
}
.foot-count{color:var(--faint);font:500 10px/1 var(--mono);letter-spacing:0}
.alerts{display:flex;flex-wrap:wrap;gap:6px;min-height:28px}
.alert-chip{
  display:flex;align-items:center;gap:6px;max-width:100%;
  padding:5px 8px;border-radius:8px;
  border:1px solid rgba(255,176,46,.22);background:rgba(255,176,46,.07);
  color:#f3cf8a;font:500 10px/1.35 var(--mono);
}
.alert-chip .t{color:var(--faint);white-space:nowrap}
.alert-chip .n{color:var(--amber);font-weight:700;white-space:nowrap}
.alert-chip .x{min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;max-width:240px}
.alerts .empty{min-height:28px;padding:4px 0;text-align:left}

.replay-bar{
  display:flex;align-items:center;gap:8px;flex-wrap:wrap;
  margin:0 8px 8px;padding:8px 9px;
  border:1px solid rgba(56,232,255,.2);border-radius:10px;
  background:rgba(6,14,19,.72);
}
.replay-bar .range{
  flex:1 1 130px;min-width:100px;height:26px;
  accent-color:var(--acc);cursor:pointer;
}
.replay-clock{
  min-width:47px;text-align:center;color:var(--ink);
  font:600 11px/1 var(--mono);white-space:nowrap;
}

/* ---------- daily / insights ---------- */
.daily .chart{height:260px;height:clamp(224px,26vh,300px)}
.insight-grid{
  display:grid;grid-template-columns:1fr 1fr;gap:8px;padding:8px 8px 2px;
}
.insight-block{
  min-width:0;padding:8px 6px 2px;border-radius:11px;
  border:1px solid rgba(31,75,92,.24);background:rgba(4,10,14,.24);
}
.insight-label{
  display:block;padding:0 5px;color:var(--muted);
  font:600 9.5px/1.2 var(--mono);letter-spacing:.08em;white-space:nowrap;
}
.insight-block .chart{height:145px}
.insight-foot{padding:6px 13px 13px}
.tags{display:flex;flex-wrap:wrap;gap:5px;min-height:24px}
.tag{
  display:inline-flex;align-items:center;gap:5px;max-width:100%;
  padding:4px 7px;border-radius:7px;
  border:1px solid rgba(255,176,46,.18);background:rgba(255,176,46,.06);
  color:#e8c98b;font:500 9.5px/1.25 var(--mono);
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap;
}
.tag b{color:var(--amber);font-weight:700}
.tag.neutral{border-color:rgba(31,75,92,.5);background:rgba(6,14,19,.5);color:var(--faint)}
.muted{color:var(--faint);font:500 10.5px/1.4 var(--mono)}

/* ---------- footer / misc ---------- */
.foot{
  display:flex;justify-content:space-between;gap:8px 18px;flex-wrap:wrap;
  width:100%;max-width:2200px;margin:0 auto;
  padding:0 12px 22px;
  padding:0 max(12px,env(safe-area-inset-left)) calc(22px + env(safe-area-inset-bottom)) max(12px,env(safe-area-inset-left));
  padding-left:max(12px,env(safe-area-inset-left));
  padding-right:max(12px,env(safe-area-inset-right));
  color:var(--faint);font:500 10px/1.5 var(--mono);
}
.foot span:last-child{color:var(--muted)}
.foot a{color:var(--acc)}
.noscript{
  position:fixed;left:50%;top:50%;transform:translate(-50%,-50%);
  z-index:90;padding:16px 20px;border-radius:12px;
  border:1px solid var(--red);background:rgba(30,8,12,.95);color:#ffd7dc;font-size:13px;
}

/* ---------- responsive ---------- */
@media (min-width:1800px){
  .layout{
    grid-template-columns:minmax(340px,.66fr) minmax(0,1.22fr) minmax(0,.94fr);
    gap:14px;
  }
  .kpis{gap:12px}
  .kpi{padding:14px 16px 13px}
  .chart{height:300px;height:clamp(250px,27vh,360px)}
  .daily .chart{height:280px;height:clamp(240px,25vh,320px)}
}
@media (max-width:1400px){
  .layout{
    grid-template-columns:minmax(280px,.8fr) minmax(0,1.04fr) minmax(0,.9fr);
  }
  .field-label{display:none}
}
@media (max-width:1200px){
  .kpis{grid-template-columns:repeat(auto-fit,minmax(140px,1fr))}
  .brand p{display:none}
  .clock{display:none}
}
@media (max-width:1180px){
  .layout{
    grid-template-columns:minmax(270px,.82fr) minmax(0,1.18fr);
    grid-template-areas:
      "trips detail"
      "trips daily"
      "trips insights";
  }
  .trip-list{max-height:calc(100dvh - 240px)}
  .chart{height:250px;height:clamp(220px,26vh,300px)}
}
@media (max-width:900px){
  .topbar-inner{flex-wrap:wrap;gap:9px}
  .brand{flex:1 1 calc(100% - 90px)}
  .brand-logo{width:38px;height:38px}
  .brand p{display:block}
  .brand-meta{margin-left:auto}
  .clock{display:inline-block}
  .btn-refresh{order:2}
  .controls{order:3;width:100%;flex-wrap:nowrap;overflow-x:auto;justify-content:flex-start;padding-bottom:3px;scrollbar-width:none}
  .controls::-webkit-scrollbar{display:none}
  .controls>*{flex:0 0 auto}
  .field-label{display:inline-block}
  .field-device .select{max-width:190px}
  .kpis{grid-template-columns:repeat(4,minmax(0,1fr))}
}
@media (max-width:820px){
  .layout{
    grid-template-columns:minmax(0,1fr);
    grid-template-areas:
      "trips"
      "detail"
      "daily"
      "insights";
  }
  .trips{min-height:0}
  .trip-list{
    display:flex;gap:8px;overflow-x:auto;overflow-y:hidden;
    max-height:none;padding:8px;scroll-snap-type:x mandatory;
    overscroll-behavior-x:contain;-webkit-overflow-scrolling:touch;
    scrollbar-width:none;
  }
  .trip-list::-webkit-scrollbar{display:none}
  .trip{
    flex:0 0 320px;flex:0 0 min(82vw,340px);width:auto;margin-bottom:0;
    scroll-snap-align:start;
  }
  .trip .when{font-size:11px}
  .trip .meta{font-size:9.5px}
  .trip-more{width:132px;min-height:74px;align-self:stretch;margin:0}
  .search{width:130px}
  .chart{height:250px;height:clamp(220px,34vh,300px)}
  .chart-pair{grid-template-columns:1fr}
  .chart-pair .chart{height:240px;height:clamp(210px,31vh,280px)}
  .daily .chart{height:240px;height:clamp(210px,30vh,280px)}
  .detail-foot{padding-bottom:14px}
  .foot{font-size:9.5px}
}
@media (max-width:640px){
  .topbar-inner{padding-top:9px;padding-top:calc(9px + env(safe-area-inset-top));padding-bottom:9px}
  .brand{gap:9px;flex:1 1 calc(100% - 76px)}
  .brand-logo{width:35px;height:35px}
  .brand h1{font-size:14.5px}
  .brand p{font-size:9px;letter-spacing:.08em}
  .brand-meta{gap:6px;margin-left:2px}
  .clock{display:none}
  .status{font-size:10.5px}
  .status::before{width:6px;height:6px}
  .btn-refresh{padding:7px 11px;font-size:11px}
  .controls{gap:5px}
  .field-label{display:none}
  .field-refresh{display:none}
  .field-device .select{max-width:98px;max-width:clamp(98px, calc(100vw - 262px), 128px)}
  .segmented{padding:2px;gap:1px}
  .seg-btn{padding:5px 6px;font-size:10.5px;min-height:28px}
  .switch{gap:5px;font-size:10.5px}
  .alert-chip{width:100%;flex-wrap:wrap;align-items:baseline;row-gap:2px}
  .alert-chip .x{flex:1 1 100%;max-width:none;white-space:normal;overflow:visible;text-overflow:clip}
  main{padding-top:11px}
  .kpis{grid-template-columns:repeat(2,minmax(0,1fr));gap:8px;margin-bottom:10px}
  .kpi{min-height:78px;padding:10px 11px}
  .kpi .v{font-size:21px;font-size:clamp(18px,5.2vw,23px)}
  .kpi .k{font-size:9.5px}
  .kpi .s{font-size:9.5px}
  .layout{gap:10px}
  .panel-head{padding:10px 12px 8px}
  .trip-stats{gap:4px;padding:8px 10px 0}
  .stat-chip{padding:4px 7px;font-size:9.5px}
  .chart-pair{padding:8px 6px 0;gap:7px}
  .chart-head{height:32px;padding:0 9px;font-size:9.5px}
  .map-tools{top:34px;right:5px}
  .chart-hint{display:none}
  .chart-block .chart{height:230px;height:clamp(200px,30vh,260px)}
  .detail-foot{padding:6px 12px 12px}
  .insight-grid{gap:7px;padding:7px 7px 2px}
  .insight-block .chart{height:132px}
  .replay-bar{margin:0 7px 7px;padding:7px;gap:6px}
  .replay-bar .range{flex:1 1 100%;order:5;min-width:100%}
  .replay-clock{min-width:44px}
  .foot{padding-bottom:calc(18px + env(safe-area-inset-bottom))}
}
@media (max-width:420px){
  .brand p{display:none}
  .brand h1{font-size:14px}
  .kpis{grid-template-columns:repeat(2,minmax(0,1fr))}
  .kpi .v small{font-size:9.5px}
  .trip{flex-basis:86vw}
  .search{width:96px}
  .search input{font-size:10.5px}
  .insight-block .chart{height:126px}
  .chart-block .chart{height:210px;height:clamp(190px,28vh,240px)}
  .trip-nav .icon-btn{width:32px;height:32px}
}
@media (min-width:480px) and (max-width:640px){
  .field-refresh{display:inline-flex}
}
@media (max-width:374px){
  .insight-grid{grid-template-columns:1fr}
}
@media (max-width:340px){
  .switch span{display:none}
  .switch::after{content:"行驶";font-size:10px;color:var(--muted)}
  .seg-btn{padding:5px 4px}
  .field-device .select{max-width:94px}
}
@media (max-height:560px) and (orientation:landscape){
  .topbar{position:static}
  .chart-block .chart{height:190px}
  .daily .chart{height:190px}
  .trip-list{max-height:260px}
  .brand p{display:none}
}
@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{animation:none!important;transition:none!important}
  html{scroll-behavior:auto}
}