/* ===========================================================================
   DJI Log Viewer — log.xvr.vn  (design: XVR cockpit/telemetry, dark-first)
   ========================================================================== */

:root{
  /* ink ramp */
  --ink-1000:#05080B; --ink-900:#080C11; --ink-850:#0B1117; --ink-800:#0F151D;
  --ink-750:#131B24; --ink-700:#18222D; --ink-650:#1F2A37; --ink-600:#283544;
  --ink-500:#36475A; --ink-400:#4A5C70;
  /* hairlines */
  --line-faint:rgba(255,255,255,.055); --line:rgba(255,255,255,.085); --line-strong:rgba(255,255,255,.14);
  /* fg */
  --fg-1:#EAF1F8; --fg-2:#A9B8C7; --fg-3:#6E8093; --fg-4:#4A5969; --fg-on-signal:#04141B;
  /* signal */
  --signal-300:#7FE0FA; --signal-400:#44CDF2; --signal-500:#15B5E0; --signal-600:#0E93BB; --signal-700:#0B7396;
  --signal-soft:rgba(21,181,224,.14); --signal-glow:rgba(21,181,224,.30);
  /* semantic */
  --nominal-500:#3CCF8E; --nominal-soft:rgba(60,207,142,.14);
  --caution-500:#F4B23E; --caution-soft:rgba(244,178,62,.15);
  --critical-500:#F2565C; --critical-soft:rgba(242,86,92,.15);
  /* series */
  --series-alt:#15B5E0; --series-speed:#F4B23E; --series-batt:#3CCF8E; --series-sats:#C792EA; --series-sig:#F472A6;
  /* aliases */
  --bg-app:var(--ink-900); --bg-sunken:var(--ink-850); --surface-1:var(--ink-800);
  --surface-2:var(--ink-750); --surface-card:var(--ink-700); --surface-hover:var(--ink-650); --surface-input:var(--ink-600);
  --text-strong:var(--fg-1); --text-body:var(--fg-2); --text-muted:var(--fg-3); --text-faint:var(--fg-4);
  --accent:var(--signal-500); --accent-hover:var(--signal-400); --accent-press:var(--signal-600); --focus-ring:var(--signal-400);
  --selection-bg:var(--signal-soft);
  /* fonts */
  --font-display:'Space Grotesk','IBM Plex Sans',system-ui,sans-serif;
  --font-sans:'IBM Plex Sans',system-ui,-apple-system,sans-serif;
  --font-mono:'IBM Plex Mono',ui-monospace,'SF Mono',Menlo,monospace;
  /* radii */
  --r-xs:3px; --r-sm:5px; --r-md:7px; --r-lg:10px; --r-xl:14px; --r-pill:999px;
  /* shadow */
  --shadow-1:0 1px 2px rgba(0,0,0,.45); --shadow-2:0 6px 20px rgba(0,0,0,.45); --shadow-pop:0 18px 50px rgba(0,0,0,.55);
  --inset-well:inset 0 1px 2px rgba(0,0,0,.5);
  --glow-signal:0 0 0 1px var(--signal-500),0 0 18px var(--signal-glow);
  --dur-fast:130ms; --dur:180ms; --dur-slow:260ms; --ease-out:cubic-bezier(.2,.8,.2,1); --ease-in-out:cubic-bezier(.4,0,.2,1);
  --tc:color var(--dur-fast) var(--ease-out),background-color var(--dur-fast) var(--ease-out),border-color var(--dur-fast) var(--ease-out),box-shadow var(--dur-fast) var(--ease-out),transform var(--dur-fast) var(--ease-out);
}
[data-theme="light"]{
  --bg-app:#EEF2F6; --bg-sunken:#E4EAF0; --surface-1:#F7F9FB; --surface-2:#FFFFFF;
  --surface-card:#FFFFFF; --surface-hover:#F0F4F8; --surface-input:#FFFFFF;
  --line-faint:rgba(15,30,46,.06); --line:rgba(15,30,46,.10); --line-strong:rgba(15,30,46,.16);
  --text-strong:#0C1722; --text-body:#3A4A5A; --text-muted:#647585; --text-faint:#95A4B3;
  --fg-1:#0C1722; --fg-2:#3A4A5A; --fg-3:#647585; --fg-4:#95A4B3;
  --fg-on-signal:#FFFFFF; --signal-500:#0E93BB; --signal-400:#15B5E0; --signal-soft:rgba(14,147,187,.12); --signal-glow:rgba(14,147,187,.22);
  --ink-850:#E4EAF0; --inset-well:inset 0 1px 2px rgba(15,30,46,.10);
  --shadow-1:0 1px 2px rgba(15,30,46,.08);
}

*,*::before,*::after{box-sizing:border-box}
html,body{height:100%}
body{margin:0;font-family:var(--font-sans);font-size:15px;line-height:1.5;color:var(--text-body);
  background:var(--bg-app);-webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility}
::selection{background:var(--selection-bg)}
h1,h2,h3,h4{font-family:var(--font-display);color:var(--text-strong);font-weight:600;letter-spacing:-.02em;line-height:1.1;margin:0}
code,.mono{font-family:var(--font-mono)}
code{background:var(--surface-input);border:1px solid var(--line);padding:1px 6px;border-radius:var(--r-xs);color:var(--fg-2);font-size:.92em}
a{color:var(--accent);text-decoration:none}
.muted{color:var(--text-muted)} .small{font-size:11.5px}
*::-webkit-scrollbar{width:10px;height:10px}
*::-webkit-scrollbar-thumb{background:var(--ink-600);border-radius:999px;border:2px solid var(--bg-app)}

.ds-label{font-family:var(--font-mono);font-size:11px;font-weight:500;letter-spacing:.09em;text-transform:uppercase;color:var(--text-muted)}
.ds-num{font-family:var(--font-mono);font-variant-numeric:tabular-nums;letter-spacing:.01em;color:var(--text-strong)}

/* ---------- buttons ---------- */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;height:38px;padding:0 16px;cursor:pointer;
  font-family:var(--font-sans);font-size:14px;font-weight:600;letter-spacing:.005em;border-radius:var(--r-md);
  border:1px solid transparent;white-space:nowrap;transition:var(--tc);text-decoration:none}
.btn.sm{height:30px;padding:0 12px;font-size:13px;gap:6px}
.btn.lg{height:46px;padding:0 22px;font-size:15px}
.btn .lucide,.btn svg{width:17px;height:17px}
.btn.sm .lucide,.btn.sm svg{width:15px;height:15px}
.btn.primary{background:var(--signal-500);color:var(--fg-on-signal);border-color:var(--signal-500)}
.btn.primary:hover{background:var(--signal-400);box-shadow:0 0 16px var(--signal-glow)}
.btn.primary:active{background:var(--signal-600)}
.btn.secondary{background:var(--surface-input);color:var(--fg-1);border-color:var(--line-strong)}
.btn.secondary:hover{background:var(--surface-hover)}
.btn.ghost{background:transparent;color:var(--fg-2)}
.btn.ghost:hover{background:var(--surface-hover)}
.iconbtn,.iconbtn2{display:inline-flex;align-items:center;justify-content:center;cursor:pointer;border:1px solid transparent;
  background:transparent;color:var(--fg-2);border-radius:var(--r-md);width:34px;height:34px;transition:var(--tc)}
.iconbtn:hover{background:var(--surface-hover);color:var(--fg-1)}
.iconbtn.sm{width:30px;height:30px}
.iconbtn2{background:var(--surface-input);border-color:var(--line-strong)}
.iconbtn2:hover{background:var(--surface-hover);color:var(--fg-1)}
.iconbtn .lucide,.iconbtn svg,.iconbtn2 .lucide,.iconbtn2 svg{width:18px;height:18px}

/* ---------- badge ---------- */
.badge{display:inline-flex;align-items:center;gap:7px;height:24px;padding:0 10px;border-radius:var(--r-pill);
  font-family:var(--font-mono);font-size:11.5px;font-weight:500;letter-spacing:.03em;white-space:nowrap}
.badge .bdot{width:7px;height:7px;border-radius:999px;background:currentColor}
.badge.nominal{background:var(--nominal-soft);color:var(--nominal-500)}
.badge.caution{background:var(--caution-soft);color:var(--caution-500)}
.badge.critical{background:var(--critical-soft);color:var(--critical-500)}
.badge.signal{background:var(--signal-soft);color:var(--signal-400)}
.badge.neutral{background:var(--surface-input);color:var(--fg-2)}

/* ---------- topbar ---------- */
.topbar{position:sticky;top:0;z-index:900;display:flex;align-items:center;gap:18px;height:58px;padding:0 22px;
  border-bottom:1px solid var(--line);background:var(--surface-1)}
.brand{display:flex;align-items:center;gap:11px;cursor:pointer}
.brand-logo{display:block;border-radius:7px}
.brand-text{display:flex;flex-direction:column;line-height:1}
.brand-wm{font-family:var(--font-display);font-weight:600;font-size:16px;letter-spacing:-.02em;color:var(--fg-1)}
.brand-wm .accent{color:var(--signal-400)}
.brand-sub{font-family:var(--font-mono);font-size:10px;color:var(--fg-4);margin-top:3px}
.topbar-right{margin-left:auto;display:flex;align-items:center;gap:12px}
#status.work{background:var(--signal-soft);color:var(--signal-400)}
#status.err{background:var(--critical-soft);color:var(--critical-500)}

/* ---------- screens ---------- */
.screen{}
#screen-pin{display:flex;align-items:center;justify-content:center;min-height:calc(100vh - 58px);padding:24px}

/* ---------- upload ---------- */
.upload-wrap{max-width:760px;margin:0 auto;padding:48px 24px 56px;display:flex;flex-direction:column;gap:26px}
.hero{text-align:center;display:flex;flex-direction:column;gap:12px}
.hero h1{font-size:34px;font-weight:600}
.hero p{font-size:15px;color:var(--fg-3);margin:0 auto;max-width:540px;line-height:1.55}
.filedrop{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:16px;padding:44px 32px;text-align:center;
  cursor:pointer;background:var(--surface-1);border:1.5px dashed var(--line-strong);border-radius:var(--r-xl);transition:var(--tc)}
.filedrop.over{background:var(--signal-soft);border-color:var(--signal-500);box-shadow:0 0 24px var(--signal-glow)}
.fd-ic{display:flex;align-items:center;justify-content:center;width:64px;height:64px;border-radius:var(--r-lg);
  background:var(--surface-card);border:1px solid var(--line);color:var(--fg-3)}
.filedrop.over .fd-ic{color:var(--signal-400)}
.fd-ic .lucide,.fd-ic svg{width:30px;height:30px}
.filedrop h3{font-size:19px;font-weight:600}
.filedrop p{font-size:13.5px;color:var(--fg-3);margin:0;max-width:460px;line-height:1.5}
.privacy{display:flex;align-items:center;justify-content:center;gap:8px;color:var(--fg-4);font-size:12.5px}
.privacy .lucide,.privacy svg{width:15px;height:15px}

/* ---------- pin ---------- */
.pin-card{width:100%;max-width:420px;padding:30px;background:var(--surface-card);border:1px solid var(--line-strong);
  border-radius:var(--r-xl);box-shadow:var(--shadow-2);display:flex;flex-direction:column;gap:20px;align-items:center;text-align:center}
.pin-ic{display:flex;align-items:center;justify-content:center;width:52px;height:52px;border-radius:var(--r-lg);
  background:var(--signal-soft);color:var(--signal-400)}
.pin-ic .lucide,.pin-ic svg{width:24px;height:24px}
.pin-ic.spin .lucide,.pin-ic.spin svg{animation:spin 1s linear infinite}
@keyframes spin{to{transform:rotate(360deg)}}
.pin-head{display:flex;flex-direction:column;gap:7px}
.pin-head h2{font-size:20px}
.pin-head p{font-size:13px;color:var(--fg-3);margin:0;line-height:1.5}
.pin-form{display:flex;flex-direction:column;gap:14px;width:100%;align-items:center}
.pin-input{width:100%;height:50px;text-align:center;font-size:22px;letter-spacing:.5em;color:var(--fg-1);
  background:var(--surface-input);border:1px solid var(--line-strong);border-radius:var(--r-md);outline:none;transition:var(--tc)}
.pin-input:focus{border-color:var(--signal-500);box-shadow:0 0 0 3px var(--signal-soft)}
.pin-input.err{border-color:var(--critical-500);box-shadow:0 0 0 3px var(--critical-soft)}
.pin-err{font-size:12.5px;color:var(--critical-500)}
.pin-file{display:flex;align-items:center;gap:6px;font-family:var(--font-mono);font-size:11px;color:var(--fg-4)}
.pin-file .lucide,.pin-file svg{width:13px;height:13px}
.pin-actions{display:flex;gap:10px;width:100%}
.pin-actions .btn{flex:1}
.pin-progress{width:100%;height:6px;background:var(--ink-850);border-radius:999px;overflow:hidden}
.pin-progress .pp-bar{height:100%;width:60%;background:var(--signal-500);border-radius:999px;animation:pgslide .9s var(--ease-in-out) infinite}
@keyframes pgslide{0%{margin-left:-60%}100%{margin-left:100%}}

/* ---------- dashboard ---------- */
#screen-dash{display:flex;flex-direction:column}
.subhead{display:flex;align-items:center;gap:16px;padding:14px 22px;border-bottom:1px solid var(--line);flex-wrap:wrap}
.subhead-info{display:flex;flex-direction:column;gap:3px;min-width:0}
.sh-line{display:flex;align-items:center;gap:10px;flex-wrap:wrap}
#dFile{font-size:13.5px;color:var(--fg-1)}
#dMeta{font-size:11px;color:var(--fg-4)}
.subhead-actions{margin-left:auto;display:flex;gap:8px}

.statstrip{display:grid;grid-template-columns:repeat(6,1fr);gap:12px;padding:16px 22px}
.stat-tile{display:flex;flex-direction:column;gap:10px;padding:16px;background:var(--surface-card);
  border:1px solid var(--line);border-radius:var(--r-lg);min-width:0}
.st-h{display:flex;align-items:center;justify-content:space-between;gap:8px}
.st-h .lucide,.st-h svg{width:15px;height:15px;color:var(--fg-3)}
.st-v{display:flex;align-items:baseline;gap:4px}
.st-v>span:first-child,.st-v .ds-num{font-family:var(--font-mono);font-variant-numeric:tabular-nums;font-size:26px;font-weight:600;color:var(--fg-1);line-height:1;word-break:break-word}
.st-v.signal .ds-num,.st-v.signal>span:first-child{color:var(--signal-400)}
.st-v.critical .ds-num,.st-v.critical>span:first-child{color:var(--critical-500)}
.st-v.caution .ds-num,.st-v.caution>span:first-child{color:var(--caution-500)}
.st-v.nominal .ds-num,.st-v.nominal>span:first-child{color:var(--nominal-500)}
.st-v em{font-family:var(--font-mono);font-style:normal;font-size:13px;color:var(--fg-3)}

/* tabs */
.tabs{display:flex;gap:4px;border-bottom:1px solid var(--line);padding:0 22px}
.tab{display:inline-flex;align-items:center;gap:7px;height:38px;padding:0 12px;background:transparent;border:none;cursor:pointer;
  font-family:var(--font-sans);font-size:13.5px;font-weight:500;color:var(--fg-3);border-bottom:2px solid transparent;margin-bottom:-1px;transition:var(--tc)}
.tab .lucide,.tab svg{width:15px;height:15px}
.tab:hover{color:var(--fg-2)}
.tab.on{color:var(--fg-1);font-weight:600;border-bottom-color:var(--signal-500)}
.tab.on .lucide,.tab.on svg{color:var(--signal-400)}
.tcount{font-family:var(--font-mono);font-size:11px;color:var(--fg-3);background:var(--surface-input);border-radius:999px;padding:1px 6px}
.tabbody{padding:22px}
.tabpane{}

/* panels */
.panel{display:flex;flex-direction:column;background:var(--surface-card);border:1px solid var(--line);
  border-radius:var(--r-lg);overflow:hidden;box-shadow:var(--shadow-1);min-width:0}
.panel-h{display:flex;align-items:center;gap:9px;height:44px;padding:0 14px;border-bottom:1px solid var(--line);flex-shrink:0}
.panel-h .lucide,.panel-h svg{width:16px;height:16px;color:var(--signal-400)}
.panel-h>span:not(.ph-meta):not(.ph-actions){font-family:var(--font-mono);font-size:12px;letter-spacing:.08em;text-transform:uppercase;color:var(--fg-2)}
.ph-meta{margin-left:auto;font-size:11px;color:var(--fg-4)}
.ph-actions{margin-left:auto;display:flex;gap:6px;flex-wrap:wrap}
.panel-body{padding:16px}
.panel-body.nopad{padding:0}

/* overview grid */
.grid-ov{display:grid;grid-template-columns:1.5fr 1fr;gap:16px;align-items:start}
#map{height:340px;width:100%;background:var(--ink-1000)}
.leaflet-container{background:var(--ink-1000);font-family:var(--font-sans)}
.scrub{display:flex;align-items:center;gap:12px;padding:12px 14px;border-top:1px solid var(--line)}
.scrub .lucide,.scrub svg{width:15px;height:15px;color:var(--fg-3)}
.scrub input[type=range]{flex:1;accent-color:var(--signal-500);cursor:pointer;height:4px}
.scrub #scrubPct{font-size:12px;color:var(--fg-2);white-space:nowrap}

.live-tiles{display:grid;grid-template-columns:1fr 1fr;gap:10px;margin-bottom:14px}
.batbar{display:flex;flex-direction:column;gap:7px;margin-bottom:14px}
.bb-h{display:flex;align-items:center;justify-content:space-between}
.bb-h .ds-num{font-size:12.5px;color:var(--fg-1)}
.bb-track{height:8px;background:var(--ink-850);border-radius:999px;overflow:hidden;box-shadow:var(--inset-well)}
.bb-fill{height:100%;border-radius:999px;background:var(--nominal-500);transition:width var(--dur-slow) var(--ease-out),background-color var(--dur) var(--ease-out)}
.bb-fill.caution{background:var(--caution-500)} .bb-fill.critical{background:var(--critical-500)}
.sat-row{display:flex;align-items:center;justify-content:space-between;margin-bottom:14px}
.more-tele{display:grid;grid-template-columns:1fr 1fr;gap:1px;background:var(--line);border:1px solid var(--line);border-radius:var(--r-md);overflow:hidden}
.more-tele .mt{background:var(--surface-card);padding:9px 12px}
.more-tele .mt .k{font-family:var(--font-mono);font-size:10.5px;letter-spacing:.06em;text-transform:uppercase;color:var(--fg-4)}
.more-tele .mt .v{font-family:var(--font-mono);font-variant-numeric:tabular-nums;font-size:13.5px;color:var(--fg-1);margin-top:2px}

/* charts */
.grid-ch{display:grid;grid-template-columns:1fr 1fr;gap:16px}
.chbox{height:240px}
.chbox canvas{width:100%!important;height:100%!important}

/* events */
.events{display:flex;flex-direction:column}
.ev{display:flex;gap:14px;padding:12px 4px;border-bottom:1px solid var(--line-faint)}
.ev:last-child{border-bottom:none}
.ev .et{font-family:var(--font-mono);font-variant-numeric:tabular-nums;font-size:13px;color:var(--fg-3);width:52px;flex-shrink:0}
.ev .edot{width:9px;height:9px;border-radius:999px;margin-top:5px;flex-shrink:0}
.ev .ebody{display:flex;flex-direction:column;gap:2px}
.ev .elabel{font-size:13.5px;color:var(--fg-1);font-weight:500}
.ev .edetail{font-family:var(--font-mono);font-size:11.5px;color:var(--fg-4)}

/* details */
.details{display:grid;grid-template-columns:repeat(auto-fill,minmax(280px,1fr));gap:1px;background:var(--line);border:1px solid var(--line);border-radius:var(--r-md);overflow:hidden}
.details .row{background:var(--surface-card);padding:9px 14px;display:flex;justify-content:space-between;gap:12px}
.details .row .dk{color:var(--fg-3);font-size:12.5px}
.details .row .dv{font-family:var(--font-mono);font-size:12.5px;color:var(--fg-1);text-align:right;word-break:break-word}
#frameInfo{margin-top:12px}

/* ---------- responsive ---------- */
@media(max-width:1100px){.statstrip{grid-template-columns:repeat(3,1fr)}}
@media(max-width:900px){
  .grid-ov{grid-template-columns:1fr}
  .grid-ch{grid-template-columns:1fr}
}
@media(max-width:560px){
  .statstrip{grid-template-columns:repeat(2,1fr)}
  .hero h1{font-size:26px}
  .brand-sub{display:none}
  .tabbody{padding:14px}
  .tabs{padding:0 12px}
  .subhead,.statstrip{padding-left:14px;padding-right:14px}
}