@import url('https://fonts.googleapis.com/css2?family=Bebas+Neue&family=Inter:wght@400;500;600;700;800&family=JetBrains+Mono:wght@400;500&display=swap');
:root {
  --bg:#000000; --surface:#0a0a0a; --surface2:#141414;
  --border:#ffffff0f; --border2:#ffffff1a;
  --accent:#ff6600; --accent2:#ff8533; --accent-glow:#ff660040;
  --text:#f5f5f5; --text2:#a3a3a3; --text3:#666666;
  --green:#22c55e; --amber:#f59e0b; --blue:#3b82f6; --purple:#a855f7;
  --radius:10px; --radius-sm:6px;
}
*{margin:0;padding:0;box-sizing:border-box;-webkit-tap-highlight-color:transparent}
html,body{height:100%;overflow:hidden;background:var(--bg)}
body{color:var(--text);font-family:'Inter',system-ui,sans-serif;font-size:14px;display:flex;flex-direction:column;-webkit-font-smoothing:antialiased}

/* ── HEADER ── */
header{
  position:relative;z-index:2101;
  display:flex;align-items:center;gap:12px;padding:0 16px;height:52px;
  padding-top:env(safe-area-inset-top,0px);
  height:calc(52px + env(safe-area-inset-top,0px));
  border-bottom:1px solid var(--border);flex-shrink:0;
  background:linear-gradient(180deg,#0f0f0f 0%,#000 100%);
  box-shadow:0 1px 0 var(--accent-glow),0 4px 24px #00000080;
}
.tracboss-wordmark{
  font-family:'Bebas Neue',Impact,'Arial Narrow',sans-serif;
  font-weight:400;letter-spacing:.04em;text-transform:uppercase;line-height:1;
  color:#fff;
}
.tracboss-wordmark .tb-boss{color:var(--accent)}
.logo{
  display:flex;align-items:center;gap:6px;font-size:16px;flex-shrink:0;
}
.logo-mark{height:24px;width:auto;flex-shrink:0;display:block}
.file-info{font-family:'JetBrains Mono',monospace;font-size:11px;color:var(--text3);flex:1;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
#file-name{color:var(--text2)}
.hdr-btn{
  background:var(--surface2);border:1px solid var(--border2);color:var(--text2);
  height:34px;padding:0 14px;border-radius:var(--radius-sm);font-size:12px;font-weight:600;
  cursor:pointer;display:flex;align-items:center;gap:6px;
  font-family:'Inter',sans-serif;flex-shrink:0;transition:all .2s;
}
a.hdr-btn{text-decoration:none;color:var(--text2)}
a.hdr-btn.primary{color:#000}
.hdr-actions{
  display:flex;align-items:center;gap:8px;margin-left:auto;flex-shrink:0;
}
.hdr-divider{
  width:1px;height:22px;background:var(--border2);flex-shrink:0;
}
#login-btn{
  min-width:76px;justify-content:center;padding:0 18px;
  font-weight:700;letter-spacing:.03em;
  box-shadow:0 0 18px #ff660025;
}
#login-btn:hover{box-shadow:0 0 24px #ff660045}
.hdr-btn:hover{border-color:var(--accent);color:var(--accent);background:#ff66000d}
.hdr-btn.primary{background:var(--accent);border-color:var(--accent);color:#000}
.hdr-btn.primary:hover{background:var(--accent2);border-color:var(--accent2);color:#000}
body:not(.app-loaded) .hdr-viewer-only{display:none!important}

/* ── LANDING HERO ── */
#drop-overlay{
  position:fixed;inset:0;z-index:2000;overflow-x:hidden;overflow-y:auto;
  -webkit-overflow-scrolling:touch;overscroll-behavior-y:contain;
  background:#000;
  padding:calc(16px + 52px + env(safe-area-inset-top,0px)) 20px calc(28px + env(safe-area-inset-bottom,0px));
}
#drop-overlay.hidden{display:none}
.hero-bg{position:fixed;inset:0;pointer-events:none;overflow:hidden;z-index:0}
.hero-video{
  position:absolute;inset:0;width:100%;height:100%;
  object-fit:cover;object-position:center 42%;
  opacity:.6;
  filter:brightness(.9) contrast(1.1) saturate(.95);
}
.hero-video-scrim{
  position:absolute;inset:0;
  background:
    radial-gradient(ellipse 90% 70% at 50% 45%,#00000026 0%,#0000008c 80%),
    linear-gradient(180deg,#0000009e 0%,#00000040 40%,#00000080 100%);
}
.hero-glow{
  position:absolute;top:-20%;left:50%;transform:translateX(-50%);
  width:140%;height:70%;
  background:radial-gradient(ellipse at center,#ff660028 0%,#ff440008 40%,transparent 70%);
}
.hero-glow2{
  position:absolute;bottom:-10%;right:-20%;width:60%;height:50%;
  background:radial-gradient(ellipse,#ff660015 0%,transparent 70%);
}
.hero-grid{
  position:absolute;inset:0;opacity:.04;
  background-image:linear-gradient(var(--accent) 1px,transparent 1px),linear-gradient(90deg,var(--accent) 1px,transparent 1px);
  background-size:64px 64px;
}
.hero-lines{
  position:absolute;inset:0;
  background:repeating-linear-gradient(105deg,transparent,transparent 80px,#ff660006 80px,#ff660006 81px);
  animation:heroLines 12s linear infinite;
}
@keyframes heroLines{from{transform:translateX(0)}to{transform:translateX(-81px)}}
@media (prefers-reduced-motion:reduce){
  .hero-lines{animation:none}
}
.landing{
  position:relative;z-index:1;width:100%;max-width:1100px;
  margin:0 auto;
  min-height:calc(100dvh - 48px);
  display:flex;flex-direction:column;justify-content:center;
}
.landing-grid{display:grid;grid-template-columns:1.1fr 0.9fr;gap:32px;align-items:center}
.landing-visual{position:relative;display:flex;flex-direction:column;gap:16px}
/* Brand row — desktop: logo + caption side by side */
.tb-brand-stack{
  display:flex;align-items:center;gap:clamp(14px,2.5vw,28px);
  width:auto;max-width:100%;flex-shrink:0;
}
.tb-brand-logo-wrap{flex-shrink:0;width:min(210px,38vw)}
.tb-logo-hero{width:100%;height:auto;display:block;margin:0;filter:drop-shadow(0 0 20px #ff660050)}
.tb-brand-caption{
  display:flex;flex-direction:column;justify-content:center;gap:clamp(4px,.6vw,8px);
  min-width:0;
}
.tracboss-side-title{
  margin:0;font-size:clamp(52px,6.8vw,78px);letter-spacing:.14em;line-height:.92;
  white-space:nowrap;
}
.tracboss-side-tag{
  margin:0;
  font-family:'Bebas Neue',Impact,'Arial Narrow',sans-serif;
  font-weight:400;font-size:clamp(28px,3.6vw,48px);
  letter-spacing:.22em;line-height:.95;text-transform:uppercase;
  color:var(--accent);white-space:nowrap;
}
/* Mobile-only: TRACBOSS tucked under OSS on the logo */
.tracboss-sub-mobile{display:none}
.track-stage{
  position:relative;border-radius:16px;overflow:hidden;
  background:linear-gradient(145deg,#0d0d0d,#050505);
  border:1px solid #ffffff12;
  box-shadow:0 0 0 1px #ff660015,0 24px 64px #000000cc,inset 0 1px 0 #ffffff08;
  aspect-ratio:4/3;min-height:220px;
}
.track-stage-label{
  position:absolute;top:10px;left:12px;z-index:3;
  font-size:9px;font-weight:700;letter-spacing:.14em;text-transform:uppercase;
  color:var(--accent);background:#00000090;padding:4px 10px;border-radius:999px;
  border:1px solid #ff660030;
}
#landing-track-svg{width:100%;height:100%;display:block}
.track-path-bg{fill:none;stroke:#ffffff10;stroke-width:3;stroke-linejoin:round;stroke-linecap:round}
.track-path-glow{
  fill:none;stroke:url(#trackGrad);stroke-width:2.5;stroke-linejoin:round;stroke-linecap:round;
  stroke-dasharray:8 6;animation:trackDash 1.2s linear infinite;
  filter:drop-shadow(0 0 6px #ff6600);
}
.track-path-hot{fill:none;stroke:#ff6600;stroke-width:3;stroke-linejoin:round;stroke-linecap:round;opacity:.9}
.track-rider{fill:#ff6600;filter:drop-shadow(0 0 8px #ff6600)}
@keyframes trackDash{to{stroke-dashoffset:-28}}
.hero-showcase{
  position:relative;display:block;width:100%;max-width:620px;margin:0 auto;
  border-radius:18px;overflow:hidden;
  background:linear-gradient(145deg,#141414,#050505);
  border:1px solid #ffffff14;
  box-shadow:0 28px 72px #000000b8,0 0 0 1px #ff660018,0 0 48px #ff660014;
  transform:translateZ(0);
  transition:transform .25s ease,border-color .25s ease,box-shadow .25s ease;
}
.hero-showcase::before{
  content:'';position:absolute;inset:0;z-index:1;pointer-events:none;
  background:linear-gradient(135deg,#ffffff1a 0%,transparent 28%,transparent 70%,#ff660014 100%);
}
.hero-showcase::after{
  content:'';position:absolute;inset:auto 12% 0;height:2px;z-index:2;pointer-events:none;
  background:linear-gradient(90deg,transparent,var(--accent),transparent);
  box-shadow:0 0 18px var(--accent-glow);
}
.hero-showcase:hover{
  transform:translateY(-3px) scale(1.01);
  border-color:#ff660050;
  box-shadow:0 34px 86px #000000d0,0 0 0 1px #ff660030,0 0 64px #ff660020;
}
.hero-showcase-img{
  display:block;width:100%;height:auto;object-fit:contain;
  transition:transform .35s ease,filter .35s ease;
}
.hero-showcase:hover .hero-showcase-img{transform:scale(1.015);filter:saturate(1.06) contrast(1.04)}
.landing-cta{display:flex;flex-direction:column;gap:20px}
.landing-hook{
  font-size:clamp(17px,2.2vw,21px);font-weight:700;line-height:1.35;color:#fff;max-width:440px;
}
.landing-hook em{font-style:normal;color:var(--accent)}
.landing-copy{display:flex;flex-direction:column;gap:12px;max-width:440px}
.landing-tag{font-size:14px;color:var(--text2);line-height:1.65;margin:0;text-align:justify}
.landing-tag strong{color:var(--text);font-weight:600}
.landing-tag em{font-style:normal;color:var(--accent);font-weight:600}
.feat-row{display:flex;flex-wrap:wrap;gap:6px}
.feat{
  display:flex;align-items:center;gap:6px;padding:6px 12px;border-radius:999px;
  background:#ffffff05;border:1px solid #ffffff0d;font-size:11px;font-weight:600;
  color:var(--text2);letter-spacing:.05em;text-transform:uppercase;
}
.feat-dot{width:6px;height:6px;border-radius:50%;background:var(--c,var(--accent));box-shadow:0 0 6px var(--c,var(--accent))}
.landing-actions{display:flex;flex-wrap:wrap;gap:12px}
.landing-btn{
  position:relative;overflow:hidden;
  display:inline-flex;align-items:center;justify-content:center;gap:10px;
  height:52px;padding:0 28px;border-radius:12px;font-size:15px;font-weight:700;
  font-family:'Inter',sans-serif;cursor:pointer;
  border:1px solid #ffffff18;
  background:linear-gradient(180deg,#1c1c1c 0%,#101010 100%);
  color:var(--text);
  box-shadow:
    inset 0 1px 0 #ffffff12,
    inset 0 -1px 0 #00000080,
    0 6px 20px #00000070,
    0 1px 3px #00000090;
  transition:transform .15s ease,box-shadow .15s ease,border-color .15s ease;
  -webkit-tap-highlight-color:transparent;
  text-decoration:none;
}
.landing-btn::before{
  content:'';position:absolute;inset:0;border-radius:inherit;pointer-events:none;
  background:linear-gradient(180deg,rgba(255,255,255,.08) 0%,transparent 48%);
}
.landing-btn svg{width:18px;height:18px;flex-shrink:0;position:relative;z-index:1}
.landing-btn:hover{
  border-color:#ff660055;
  box-shadow:
    inset 0 1px 0 #ffffff16,
    inset 0 -1px 0 #00000080,
    0 8px 28px #00000080,
    0 0 20px #ff660018;
}
.landing-btn:active{transform:scale(.98)}
.landing-btn.primary{
  border:1px solid #ff994455;
  background:linear-gradient(180deg,#ff9533 0%,#ff6600 52%,#e85a00 100%);
  color:#000;
  box-shadow:
    inset 0 1px 0 #ffc299,
    inset 0 -2px 0 #cc5500,
    0 8px 28px #ff660045,
    0 4px 12px #00000090;
  text-shadow:0 1px 0 #ffffff35;
}
.landing-btn.primary::before{
  background:linear-gradient(180deg,rgba(255,255,255,.28) 0%,transparent 50%);
}
.landing-btn.primary:hover{
  box-shadow:
    inset 0 1px 0 #ffc299,
    inset 0 -2px 0 #cc5500,
    0 10px 36px #ff660055,
    0 6px 16px #00000090;
}
.landing-btn.primary:active{
  transform:scale(.98);
  box-shadow:
    inset 0 2px 4px #cc5500,
    0 4px 16px #ff660030;
}
.drop-box{
  padding:16px 20px;text-align:center;cursor:pointer;
  border:1px dashed #ffffff18;border-radius:var(--radius);
  background:#ffffff03;transition:all .2s;
}
.drop-box:hover,.drop-box.drag-over{border-color:var(--accent);background:#ff66000a;box-shadow:inset 0 0 24px #ff660008}
.drop-hint{font-size:12px;color:var(--text3)}
.drop-hint strong{color:var(--text2)}
#file-input{display:none}
#progress-wrap{display:none;flex-direction:column;align-items:stretch;gap:10px;width:100%}
#progress-wrap.visible{display:flex}
.progress-bar-outer{width:100%;height:5px;background:var(--surface2);border-radius:999px;overflow:hidden}
.progress-bar-inner{height:100%;background:linear-gradient(90deg,var(--accent),var(--accent2));border-radius:999px;width:0%;transition:width .15s;box-shadow:0 0 12px var(--accent-glow)}
#progress-label{font-family:'JetBrains Mono',monospace;font-size:12px;color:var(--text3)}

/* ════════════════════════════════════════════
   DESKTOP LAYOUT  (default, ≥ 768px)
   Top: map (flex:1) + sidebar (fixed 240px)
   Bottom: chart panel (fixed 220px)
   ════════════════════════════════════════════ */
#app{display:flex;flex-direction:column;flex:1;overflow:hidden;min-height:0}
#app.hidden{display:none}

#top-pane{display:flex;flex:1;min-height:0;border-bottom:1px solid var(--border)}

#map-wrap{flex:1;position:relative;min-width:0}
#map{width:100%;height:100%}
.leaflet-container{background:#050505}
.leaflet-tile{filter:invert(.9) hue-rotate(180deg) brightness(.75) contrast(.95) saturate(.3)}
.tb-marker{width:16px;height:16px;background:var(--accent);border:2px solid #fff;border-radius:50%;box-shadow:0 0 0 4px var(--accent-glow),0 0 16px var(--accent),0 2px 8px #000a;cursor:grab}
.tb-marker:active{cursor:grabbing}

#sidebar{width:260px;flex-shrink:0;background:var(--surface);border-left:1px solid var(--border);display:flex;flex-direction:column;overflow-y:auto}
.sb-section{padding:12px 14px;border-bottom:1px solid var(--border);flex-shrink:0}
.sec-label{font-size:10px;font-weight:700;letter-spacing:.12em;color:var(--accent);text-transform:uppercase;margin-bottom:10px}
.gauge-grid{display:grid;grid-template-columns:1fr 1fr;gap:8px}
.gauge{
  background:linear-gradient(135deg,#161616 0%,#101010 100%);
  border:1px solid var(--border);border-radius:var(--radius);
  padding:10px 12px;position:relative;overflow:hidden;
  border-left:3px solid transparent;transition:border-color .2s;
}
.gauge.c-accent{border-left-color:var(--accent)}
.gauge.c-green{border-left-color:var(--green)}
.gauge.c-amber{border-left-color:var(--amber)}
.gauge.c-blue{border-left-color:var(--blue)}
.gauge.c-purple{border-left-color:var(--purple)}
.gauge-bar{position:absolute;bottom:0;left:0;right:0;height:2px;background:var(--accent);transform-origin:left;transition:transform .08s;opacity:.8}
.gauge-label{font-size:10px;font-weight:600;letter-spacing:.08em;color:var(--text3);text-transform:uppercase;margin-bottom:4px}
.gauge-val{font-family:'JetBrains Mono',monospace;font-size:22px;font-weight:500;color:var(--text);line-height:1}
.gauge-unit{font-size:10px;color:var(--text3);margin-top:2px}
.gauge.full{grid-column:1/-1}
.gauge.c-accent .gauge-val{color:var(--accent)}
.gauge.c-green  .gauge-val{color:var(--green)}  .gauge.c-green  .gauge-bar{background:var(--green)}
.gauge.c-amber  .gauge-val{color:var(--amber)}  .gauge.c-amber  .gauge-bar{background:var(--amber)}
.gauge.c-blue   .gauge-val{color:var(--blue)}   .gauge.c-blue   .gauge-bar{background:var(--blue)}
.gauge.c-purple .gauge-val{color:var(--purple)}  .gauge.c-purple .gauge-bar{background:var(--purple)}
.coord-row{display:flex;justify-content:space-between;margin-bottom:3px}
.coord-key{font-size:10px;font-weight:600;letter-spacing:.1em;color:var(--text3);text-transform:uppercase}
.coord-val{font-family:'JetBrains Mono',monospace;font-size:11px;color:var(--text2)}
.stat-row{display:flex;justify-content:space-between;padding:3px 0;border-bottom:1px solid var(--border);font-size:12px}
.stat-row:last-child{border-bottom:none}
.stat-key{color:var(--text3)}
.stat-val{font-family:'JetBrains Mono',monospace;font-size:11px;color:var(--text2)}

/* chart panel */
#bottom-pane{height:220px;flex-shrink:0;display:flex;flex-direction:column;background:var(--bg)}
#chart-toolbar{display:flex;align-items:center;gap:8px;padding:8px 14px;border-bottom:1px solid var(--border);background:var(--surface);flex-shrink:0;flex-wrap:wrap}
.ch-toggle{
  font-size:10px;font-weight:600;letter-spacing:.06em;padding:5px 12px;border-radius:999px;
  border:1px solid var(--border2);background:#ffffff05;color:var(--text3);
  cursor:pointer;text-transform:uppercase;transition:all .2s;-webkit-appearance:none;appearance:none;
}
.ch-toggle:hover{border-color:var(--ch-color,var(--accent));color:var(--ch-color,var(--accent))}
.ch-toggle.on{border-color:var(--ch-color,var(--accent));color:var(--ch-color,var(--accent));background:color-mix(in srgb,var(--ch-color,var(--accent)) 15%,transparent);box-shadow:0 0 12px color-mix(in srgb,var(--ch-color,var(--accent)) 25%,transparent)}
#chart-time-row{display:flex;align-items:center;gap:12px;padding:6px 14px;border-bottom:1px solid var(--border);background:#080808;flex-shrink:0}
.play-btn{
  background:var(--accent);border:none;color:#000;width:32px;height:32px;border-radius:var(--radius-sm);
  font-size:13px;font-weight:700;cursor:pointer;display:flex;align-items:center;justify-content:center;
  flex-shrink:0;transition:all .2s;box-shadow:0 0 16px var(--accent-glow);
}
.play-btn:hover,.play-btn:active{background:var(--accent2);transform:scale(1.05)}
.ts-label{font-family:'JetBrains Mono',monospace;font-size:11px;color:var(--text3);min-width:80px;text-align:right;flex-shrink:0}
.speed-wrap{display:flex;align-items:center;gap:5px;flex-shrink:0}
.speed-wrap label{font-size:10px;font-weight:600;letter-spacing:.08em;color:var(--text3);text-transform:uppercase;white-space:nowrap}
#speed-range{-webkit-appearance:none;appearance:none;width:72px;height:3px;background:var(--border2);border-radius:2px;outline:none;cursor:pointer}
#speed-range::-webkit-slider-thumb{-webkit-appearance:none;width:12px;height:12px;background:var(--accent);border-radius:50%;cursor:pointer}
#speed-range::-moz-range-thumb{width:12px;height:12px;background:var(--accent);border-radius:50%;border:none;cursor:pointer}
#speed-val{font-family:'JetBrains Mono',monospace;font-size:10px;color:var(--text2);min-width:24px;text-align:left}
#chart-wrap{flex:1;position:relative;min-height:0;cursor:crosshair;touch-action:none}
#chart-canvas{display:block;width:100%;height:100%}

/* tab bar — hidden on desktop */
#tab-bar{display:none}

/* mobile viewer extras (hidden on desktop) */
#mobile-gauge-bar,#diag-fab,#diag-backdrop{display:none}
#diag-fab{
  align-items:center;justify-content:center;
  width:44px;height:44px;border-radius:50%;
  background:#141414ee;border:1px solid var(--border2);
  color:var(--text2);font-size:18px;cursor:pointer;
  box-shadow:0 4px 16px #00000080;backdrop-filter:blur(8px);
  -webkit-tap-highlight-color:transparent;
}
#diag-fab.has-err{border-color:#f59e0b;color:#f59e0b;box-shadow:0 0 16px #f59e0b40}
#diag-backdrop{
  position:fixed;inset:0;background:rgba(0,0,0,.55);
  z-index:1550;opacity:0;pointer-events:none;transition:opacity .2s;
}
body.diag-open #diag-backdrop{opacity:1;pointer-events:auto}
#diag-sheet-head{display:none}

/* ════════════════════════════════════════════
   MOBILE VIEWER  (< 768px)
   Full-width map · live gauge strip · chart
   Diagnostics in bottom sheet (FAB toggle)
   ════════════════════════════════════════════ */
@media (max-width: 767px) {
  header{
    padding-top:env(safe-area-inset-top,0px);
    height:calc(48px + env(safe-area-inset-top,0px));
    padding-left:10px;padding-right:10px;
  }
  .logo .logo-mark{display:none}
  .file-info{max-width:42vw}

  #app{flex-direction:column;min-height:0}
  #top-pane{
    flex:1 1 40%;min-height:34vh;
    flex-direction:column;border-bottom:none;
  }
  #map-wrap{flex:1;min-height:0;width:100%;position:relative}

  /* diagnostics: off-canvas bottom sheet */
  #sidebar{
    display:flex;flex-direction:column;
    position:fixed;left:0;right:0;bottom:0;
    width:100%;max-height:min(62vh,480px);
    z-index:1600;
    transform:translateY(100%);
    transition:transform .28s cubic-bezier(.32,.72,0,1);
    background:linear-gradient(180deg,#141414,#0a0a0a);
    border-top:1px solid #ff660030;
    border-radius:16px 16px 0 0;
    box-shadow:0 -12px 40px #000000cc;
    overflow:hidden;
  }
  body.diag-open #sidebar{transform:translateY(0)}
  #diag-sheet-head{
    display:flex;flex-direction:column;align-items:center;
    padding:10px 14px 8px;flex-shrink:0;border-bottom:1px solid var(--border);
  }
  .diag-grabber{width:40px;height:4px;background:#3a3a3a;border-radius:2px;margin-bottom:10px}
  .diag-sheet-row{display:flex;width:100%;align-items:center;justify-content:space-between}
  .diag-title{font-size:13px;font-weight:600;color:var(--text)}
  .diag-close{
    width:32px;height:32px;border-radius:8px;border:1px solid var(--border);
    background:var(--surface2);color:var(--text2);font-size:18px;line-height:1;cursor:pointer;
  }
  #sidebar .sb-section:not(#error-panel){display:none}
  #error-panel > .sec-label{display:none}
  #error-panel{
    flex:1;overflow-y:auto;padding:14px 14px max(14px,env(safe-area-inset-bottom));
    width:100%;border-bottom:none;
  }
  #error-panel .sec-label{font-size:11px;margin-bottom:8px}
  #err-status-text{font-size:12px}
  .err-grid{grid-template-columns:repeat(3,1fr);gap:6px;margin-top:8px}
  .err-btn{font-size:9px;padding:7px 4px;border-radius:6px}
  .err-section-label{font-size:9px;margin-top:6px;padding-top:6px}

  #diag-fab{
    display:flex;position:absolute;bottom:10px;right:10px;z-index:450;
  }

  /* live values strip between map and chart */
  #mobile-gauge-bar{
    display:flex;flex-shrink:0;
    overflow-x:auto;-webkit-overflow-scrolling:touch;
    scrollbar-width:none;gap:8px;
    padding:8px 10px;
    background:var(--surface);
    border-top:1px solid var(--border);
    border-bottom:1px solid var(--border);
  }
  #mobile-gauge-bar::-webkit-scrollbar{display:none}
  .mg-chip{
    flex-shrink:0;display:flex;flex-direction:column;align-items:center;gap:2px;
    min-width:68px;padding:6px 10px;border-radius:8px;
    background:var(--surface2);border:1px solid var(--border);
    border-bottom:2px solid var(--c,var(--accent));
  }
  .mg-lbl{font-size:8px;font-weight:700;letter-spacing:.08em;text-transform:uppercase;color:var(--text3)}
  .mg-val{font-family:'JetBrains Mono',monospace;font-size:14px;font-weight:600;color:var(--c,var(--accent));line-height:1}
  .mg-empty{font-size:11px;color:var(--text3);padding:4px 0}

  #bottom-pane{
    flex:1 1 36%;min-height:30vh;max-height:44vh;
    height:auto;flex-shrink:0;
    padding-bottom:env(safe-area-inset-bottom,0px);
  }

  #chart-toolbar{
    flex-wrap:nowrap;overflow-x:auto;-webkit-overflow-scrolling:touch;
    scrollbar-width:none;padding:5px 10px;gap:5px;
  }
  #chart-toolbar::-webkit-scrollbar{display:none}
  .ch-toggle{padding:5px 10px;font-size:10px;white-space:nowrap;flex-shrink:0}
  #open-ch-picker{padding:5px 10px;font-size:10px}

  #chart-time-row{padding:5px 10px;gap:8px;flex-wrap:nowrap}
  .play-btn{width:36px;height:36px;font-size:14px;flex-shrink:0}
  .ts-label{font-size:10px;min-width:0;flex:1;text-align:right}
  .speed-wrap{flex-shrink:0}
  .speed-wrap label{display:none}
  #speed-range{width:52px}
  #speed-val{font-size:9px;min-width:20px}

  #chart-legend-mobile{display:none}
  #chart-wrap{flex:1;min-height:0}

  /* ── Split / Classic layout on mobile ── */
  body.split-mode #top-pane,
  body.split-mode #bottom-pane,
  body.split-mode #mobile-gauge-bar{display:none!important}
  body.split-mode #split-pane{
    display:flex!important;flex-direction:column;
    flex:1;min-height:0;overflow:hidden;
  }
  body.split-mode #split-left{
    width:100%;flex:0 0 auto;max-height:none;
    border-right:none;border-bottom:1px solid var(--border);
  }
  body.split-mode #split-map-wrap{
    flex:none;height:min(32vh,220px);min-height:150px;
  }
  body.split-mode #split-gauges{
    max-height:none;padding:8px 10px;overflow:visible;
  }
  body.split-mode #split-gauges .sec-label{font-size:9px;margin-bottom:6px}
  body.split-mode #split-gauges .gauge-grid{grid-template-columns:repeat(3,1fr);gap:6px}
  body.split-mode #split-gauges .gauge.full{grid-column:span 1}
  body.split-mode #split-gauges .gauge{padding:7px 8px;border-radius:8px}
  body.split-mode #split-gauges .gauge-label{font-size:8px;margin-bottom:2px}
  body.split-mode #split-gauges .gauge-val{font-size:15px}
  body.split-mode #split-gauges .gauge-unit{font-size:8px;margin-top:1px}
  body.split-mode #split-right{flex:1;min-height:0}
  body.split-mode #split-toolbar{
    padding:4px 10px;gap:4px;flex-wrap:nowrap;overflow:hidden;
  }
  body.split-mode #split-toolbar>span{
    font-size:8px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;min-width:0;
  }
  body.split-mode #split-time-row{
    padding:5px 10px;gap:8px;flex-wrap:nowrap;
    padding-bottom:max(5px,env(safe-area-inset-bottom,0px));
  }
  body.split-mode #split-time-row .speed-wrap label{display:none}
  body.split-mode #split-speed-range{width:52px}
  body.split-mode #split-speed-val{font-size:9px;min-width:20px}
  body.split-mode #split-ts-label{font-size:10px;min-width:0;flex:1;text-align:right}
  body.split-mode #split-play-btn{width:36px;height:36px;font-size:14px}
  body.split-mode #split-charts{
    flex:1;min-height:0;overflow-y:scroll;overflow-x:hidden;
    -webkit-overflow-scrolling:touch;
    scrollbar-gutter:stable;
    scrollbar-width:auto;
    padding-right:calc(2px + env(safe-area-inset-right,0px));
    touch-action:pan-y;
  }
  body.split-mode #split-charts::-webkit-scrollbar{width:18px}
  body.split-mode #split-charts::-webkit-scrollbar-track{
    background:#141414;border-left:1px solid #ffffff12;
    margin:6px 0;border-radius:12px;
  }
  body.split-mode #split-charts::-webkit-scrollbar-thumb{
    background:linear-gradient(180deg,#ff8533,#ff6600);
    border-radius:12px;border:3px solid #141414;min-height:56px;
  }
  body.split-mode #split-charts::-webkit-scrollbar-thumb:active{background:#ff6600}
  body.split-mode .sub-chart-wrap{
    flex:none;height:min(26vh,180px);min-height:130px;
  }
  body.split-mode .sub-edit-btn{
    top:5px;right:5px;padding:5px 9px;font-size:11px;
    min-width:30px;min-height:28px;border-radius:6px;
  }
  body.split-mode .sub-vstrip{top:5px;left:5px}
  body.split-mode .sub-vstrip span{font-size:9px;line-height:1.25}
}

#drop-footer{
  position:relative;z-index:1;flex-shrink:0;grid-column:1/-1;
  margin-top:16px;font-size:11px;color:var(--text3);text-align:center;
  padding:0 8px calc(8px + env(safe-area-inset-bottom,0px));
}

/* ── LANDING TABLET + MOBILE (incl. iPad Mini @ 768px) ── */
@media(max-width:1024px){
  #drop-overlay{
    padding:calc(12px + 52px + env(safe-area-inset-top,0px)) 24px calc(36px + env(safe-area-inset-bottom,0px));
  }
  .landing{
    max-width:720px;min-height:auto;justify-content:flex-start;
    padding-bottom:12px;
  }
  .landing-grid{
    display:flex;flex-direction:column;gap:22px;align-items:stretch;
  }
  .landing-visual,.landing-cta{display:contents}

  .tb-brand-stack{
    order:1;display:flex;align-items:center;justify-content:center;
    width:100%;max-width:620px;margin:0 auto;gap:clamp(14px,3vw,24px);
  }
  .tb-brand-logo-wrap{width:min(175px,24vw)}
  .tb-brand-caption{display:flex}
  .tracboss-sub-mobile{display:none}
  .tracboss-side-title{font-size:clamp(34px,5.5vw,52px);letter-spacing:.1em}
  .tracboss-side-tag{font-size:clamp(16px,2.4vw,26px);letter-spacing:.18em}

  .landing-hook{
    order:2;text-align:center;max-width:560px;margin:0 auto;
    font-size:clamp(17px,2.4vw,21px);padding:0 8px;
  }
  .track-stage{
    order:3;width:100%;max-width:680px;margin:0 auto;
    aspect-ratio:21/10;max-height:min(36vh,320px);min-height:180px;
    border-radius:14px;
  }
  .hero-showcase{order:4;width:100%;max-width:680px;margin:0 auto;border-radius:16px}
  .landing-copy{order:5;max-width:640px;margin:0 auto;gap:12px;padding:0 4px}
  .landing-tag{font-size:14px;line-height:1.6;text-align:justify}
  .feat-row{
    order:6;justify-content:center;gap:8px;
    display:flex;flex-wrap:wrap;max-width:640px;margin:0 auto;width:100%;
  }
  .feat{padding:7px 12px;font-size:11px}
  .landing-actions{
    order:7;justify-content:center;gap:12px;
    flex-direction:column;width:100%;max-width:640px;margin:0 auto;
  }
  .landing-btn{
    flex:none;width:100%;max-width:none;height:54px;font-size:15px;
    border-radius:14px;
  }
  .landing-btn.primary{
    box-shadow:
      inset 0 1px 0 #ffc299,
      inset 0 -2px 0 #cc5500,
      0 10px 32px #ff660050,
      0 6px 14px #000000a0;
  }
  .landing-btn:not(.primary){
    border-color:#ff660028;
    box-shadow:
      inset 0 1px 0 #ffffff14,
      inset 0 -1px 0 #00000090,
      0 8px 24px #00000080,
      0 0 0 1px #ff660012;
  }
  .drop-box{order:8;width:100%;max-width:640px;margin:0 auto;padding:16px 20px}
  #progress-wrap{order:9;width:100%;max-width:640px;margin:0 auto}
  #drop-footer{
    order:10;width:100%;margin-top:16px;
    font-size:11px;line-height:1.45;
    padding-bottom:calc(16px + env(safe-area-inset-bottom,0px));
  }
}

@media(max-width:767px){
  #drop-overlay{
    padding:calc(8px + 52px + env(safe-area-inset-top,0px)) 16px calc(32px + env(safe-area-inset-bottom,0px));
  }
  .landing{max-width:100%;padding-bottom:8px}
  .landing-grid{gap:18px}

  .tb-brand-stack{display:block;width:min(145px,52%);margin:4px auto 0}
  .tb-brand-logo-wrap{position:relative;width:100%}
  .tb-brand-caption{display:none}
  .tracboss-sub-mobile{
    display:block;position:absolute;
    left:73%;top:70%;transform:translateX(-50%);
    margin:0;font-size:clamp(13px,4vw,20px);letter-spacing:.025em;line-height:1;
    white-space:nowrap;pointer-events:none;
  }
  .landing-hook{font-size:16px;padding:0 4px}
  .track-stage{aspect-ratio:16/10;max-height:none}
  .track-stage-label{font-size:8px;padding:3px 8px;top:8px;left:8px;letter-spacing:.1em}
  .hero-showcase{
    width:100%;max-width:420px;border-radius:14px;
    box-shadow:0 18px 48px #000000b8,0 0 0 1px #ff660018,0 0 34px #ff660012;
  }
  .hero-showcase:hover{transform:none}
  .landing-copy{gap:10px;padding:0 2px}
  .landing-tag{font-size:13px;line-height:1.55}
  .feat-row{
    display:grid;grid-template-columns:repeat(3,1fr);gap:6px;
  }
  .feat{justify-content:center;padding:7px 8px;font-size:10px}
  .landing-actions{flex-direction:column;gap:12px}
  .landing-btn{width:100%;max-width:none;height:54px;font-size:15px;border-radius:14px}
  .drop-box{padding:14px 16px}
  #drop-footer{margin-top:12px;font-size:10px;padding-bottom:calc(12px + env(safe-area-inset-bottom,0px))}

  /* app header */
  header{padding:0 10px;gap:6px;padding-top:env(safe-area-inset-top,0px)}
  .hdr-actions{gap:5px}
  .hdr-divider{height:18px}
  #login-btn{min-width:64px;padding:0 14px;font-size:11px}
  .logo{font-size:11px;gap:4px}
  .logo-mark{height:18px;width:auto}
  .file-info{font-size:10px;flex:1;min-width:0}
  .hdr-btn{height:36px;padding:0 10px;font-size:11px}
  .hdr-btn.primary{padding:0 12px}

  /* channel modal */
  #ch-modal-backdrop{padding:10px;align-items:flex-end}
  #ch-modal{max-height:85vh;border-radius:16px 16px 0 0;max-width:100%}
}
@media(max-width:380px){
  .feat-row{grid-template-columns:repeat(2,1fr)}
  .tracboss-sub-mobile{font-size:12px;top:69.5%;left:72.5%}
  .hdr-btn{min-width:36px;padding:0 10px}
  .hdr-btn .hdr-txt{font-size:0}
  .hdr-btn .hdr-txt::before{font-size:13px;font-weight:700}
  .hdr-btn[onclick="goHome()"] .hdr-txt::before{content:'⌂'}
  .hdr-btn[onclick="loadDemo()"] .hdr-txt::before{content:'▶'}
  button.hdr-btn[onclick*="file-input"] .hdr-txt::before{content:'↑'}
  #login-btn{min-width:58px;padding:0 12px}
  #login-btn .hdr-txt{font-size:11px}
  #login-btn .hdr-txt::before{display:none}
  .hdr-divider{display:none}
  #mode-btn .hdr-txt::before{content:'⊞'}
  body.split-mode #mode-btn .hdr-txt::before{content:'⊟'}
}

/* ── CHANNEL PICKER MODAL ── */
#ch-modal-backdrop{position:fixed;inset:0;background:rgba(0,0,0,.85);backdrop-filter:blur(8px);z-index:3000;display:none;align-items:center;justify-content:center;padding:16px}
#ch-modal-backdrop.open{display:flex}
#ch-modal{background:linear-gradient(180deg,#141414 0%,#0a0a0a 100%);border:1px solid #ffffff15;border-radius:16px;width:100%;max-width:440px;max-height:90vh;display:flex;flex-direction:column;overflow:hidden;box-shadow:0 24px 64px #000000cc,0 0 0 1px #ff660020}
#ch-modal-header{display:flex;align-items:center;justify-content:space-between;padding:16px 18px;border-bottom:1px solid var(--border);flex-shrink:0}
#ch-modal-header h3{font-size:15px;font-weight:700;letter-spacing:-.01em;color:var(--text)}
.ch-modal-close{background:none;border:none;color:var(--text3);font-size:18px;cursor:pointer;padding:0 4px;line-height:1}
.ch-modal-close:hover{color:var(--text)}
#ch-modal-sub{font-size:11px;color:var(--text3);padding:8px 16px;border-bottom:1px solid var(--border);flex-shrink:0}
#ch-modal-sub span{color:var(--accent)}
#ch-preset-row{display:flex;align-items:center;gap:6px;padding:10px 16px;border-bottom:1px solid var(--border);flex-shrink:0;flex-wrap:wrap}
#ch-preset-row label{font-size:10px;font-weight:600;letter-spacing:.1em;color:var(--text3);text-transform:uppercase;flex-shrink:0}
.preset-btn{font-size:10px;font-weight:600;letter-spacing:.06em;padding:3px 9px;border-radius:4px;border:1px solid var(--border2);background:transparent;color:var(--text3);cursor:pointer;text-transform:uppercase;transition:all .15s}
.preset-btn:hover{border-color:var(--accent);color:var(--accent)}
#ch-list{overflow-y:auto;flex:1;padding:8px 16px}
.ch-row{display:flex;align-items:center;gap:10px;padding:7px 0;border-bottom:1px solid var(--border);cursor:pointer}
.ch-row:last-child{border-bottom:none}
.ch-row:hover .ch-row-name{color:var(--text)}
.ch-color-dot{width:10px;height:10px;border-radius:50%;flex-shrink:0}
.ch-row-name{font-size:13px;font-weight:500;color:var(--text2);flex:1}
.ch-row-unit{font-size:11px;color:var(--text3);min-width:40px;text-align:right}
.ch-row input[type=checkbox]{accent-color:var(--accent);width:16px;height:16px;cursor:pointer;flex-shrink:0}
.ch-row.disabled .ch-row-name{color:var(--text3)}
.ch-row.disabled .ch-color-dot{opacity:.3}
#ch-modal-footer{padding:10px 16px;border-top:1px solid var(--border);display:flex;justify-content:flex-end;gap:8px;flex-shrink:0}
.modal-btn{font-size:12px;font-weight:600;letter-spacing:.04em;padding:8px 18px;border-radius:var(--radius-sm);cursor:pointer;border:1px solid var(--border2);background:transparent;color:var(--text2);text-transform:uppercase;transition:all .2s}
.modal-btn:hover{border-color:var(--text2);color:var(--text)}
.modal-btn.primary{background:var(--accent);border-color:var(--accent);color:#000;font-weight:700}
.modal-btn.primary:hover{background:var(--accent2);border-color:var(--accent2)}
#open-ch-picker{
  font-size:10px;font-weight:600;letter-spacing:.06em;padding:5px 12px;border-radius:999px;
  border:1px solid var(--accent);background:#ff660012;color:var(--accent);
  cursor:pointer;text-transform:uppercase;transition:all .2s;flex-shrink:0;
}
#open-ch-picker:hover{background:#ff660025;box-shadow:0 0 12px var(--accent-glow)}

/* ── ERROR PANEL ── */
#error-panel{padding:10px 12px;border-bottom:1px solid var(--border);flex-shrink:0}
.err-grid{display:grid;grid-template-columns:1fr 1fr;gap:4px;margin-top:6px}
.err-btn{font-family:'Inter',sans-serif;font-size:9px;font-weight:700;letter-spacing:.05em;text-transform:uppercase;padding:5px 4px;border-radius:var(--radius-sm);border:none;cursor:default;text-align:center;line-height:1.2;transition:background .2s,color .2s}
.err-ok  {background:#1a2e1a;color:#3dba6e}
.err-warn{background:#2e2400;color:#f0a020}
.err-err {background:#2e0f0f;color:#e84040}
.err-section-label{grid-column:1/-1;font-size:9px;font-weight:700;letter-spacing:.12em;color:var(--text3);text-transform:uppercase;margin-top:4px;padding-top:4px;border-top:1px solid var(--border)}
.err-section-label:first-child{border-top:none;margin-top:0;padding-top:0}
#err-status{display:flex;align-items:center;gap:6px;font-size:11px;font-weight:600;color:var(--text3)}
#err-indicator{width:8px;height:8px;border-radius:50%;background:var(--text3);flex-shrink:0;transition:background .2s}
#err-indicator.ok  {background:#3dba6e}
#err-indicator.warn{background:#f0a020}
#err-indicator.err {background:#e84040;box-shadow:0 0 6px #e84040}

/* ════════════════════════════════════════════
   SPLIT MODE  (body.split-mode)
   Desktop: map+gauges left · stacked charts right
   Mobile: map → gauges → scrollable chart stack
   ════════════════════════════════════════════ */
body.split-mode #top-pane   { display:none }
body.split-mode #bottom-pane{ display:none }
body.split-mode #split-pane { display:flex }

#split-pane{
  display:none; /* shown only in split-mode */
  flex:1;min-height:0;
}

/* Left column */
#split-left{
  display:flex;flex-direction:column;
  width:360px;flex-shrink:0;
  border-right:1px solid var(--border);
  min-height:0;
}
#split-map-wrap{
  flex:1;min-height:0;position:relative;
}
#split-map-wrap #map{ width:100%;height:100% }
#split-gauges{
  flex-shrink:0;
  border-top:1px solid var(--border);
  background:var(--surface);
  padding:10px 12px;
  overflow-y:auto;
  max-height:38%;
}

/* Right column: stacked charts */
#split-right{
  flex:1;min-height:0;display:flex;flex-direction:column;
  background:var(--bg);
}
/* toolbar + time row shared across all sub-charts */
#split-toolbar{
  display:flex;align-items:center;gap:6px;flex-wrap:wrap;
  padding:5px 12px;border-bottom:1px solid var(--border);
  background:var(--surface);flex-shrink:0;
}
#split-time-row{
  display:flex;align-items:center;gap:10px;
  padding:4px 12px;border-bottom:1px solid var(--border);
  background:var(--surface);flex-shrink:0;
}
/* stack of sub-charts */
#split-charts{
  flex:1;min-height:0;display:flex;flex-direction:column;
  overflow:hidden;
}
.sub-chart-wrap{
  flex:1;min-height:0;position:relative;
  border-bottom:1px solid var(--border);
}
.sub-chart-wrap:last-child{ border-bottom:none }
.sub-canvas{ display:block;width:100%;height:100%;cursor:crosshair;touch-action:none }
.sub-vstrip{
  position:absolute;top:4px;left:6px;
  display:flex;flex-direction:column;gap:1px;
  pointer-events:none;
}
.sub-vstrip span{
  font-family:'JetBrains Mono',monospace;font-size:10px;font-weight:500;line-height:1.35;
}
.sub-edit-btn{
  position:absolute;top:3px;right:4px;
  background:var(--surface2);border:1px solid var(--border2);
  color:var(--text3);font-size:10px;font-weight:600;
  padding:2px 6px;border-radius:4px;cursor:pointer;z-index:10;
  transition:color .15s,border-color .15s;
}
.sub-edit-btn:hover{color:var(--accent);border-color:var(--accent)}