/* ============================================================
   SimX — Industrial UAS Operations Trainer

   Flight interface follows the DJI Pilot 2 layout so the habits
   transfer directly. Every screen is sized to fit one page: the
   document itself never scrolls, only designated panels do.
   ============================================================ */

:root{
  --bg:#05070a;
  --panel:rgba(9,12,16,.86);
  --panel-solid:#0b0f14;
  --line:rgba(150,175,195,.16);
  --line-strong:rgba(150,190,210,.32);
  --text:#e6edf3;
  --dim:#8296a5;
  --dimmer:#5a6a76;
  --dji-green:#31d158;
  --dji-orange:#ff9500;
  --dji-red:#ff3b30;
  --dji-blue:#4aa3ff;
  --accent:#31d158;
  --accent-2:#7fe3ff;
  --sand:#d9b779;
  --warn:#ffc043;
  --bad:#ff5f52;
  --good:#4ade80;
  --mono:"SFMono-Regular",Consolas,"Liberation Mono",Menlo,monospace;
  --ui:"Segoe UI",Inter,Roboto,system-ui,sans-serif;
}

/* ------------------------------------------------------------------
   Light theme — the management surfaces.

   Scoped to the screens and overlays rather than applied globally, on
   purpose. The flight interface is an instrument panel: DJI Pilot 2 is
   dark because a bright UI beside a camera feed wrecks your judgement
   of exposure, and outdoors in Saudi sun a white HUD is unreadable.
   Everything you do *around* the flight — choosing a mission, working
   the pre-flight, planning a route, reading a debrief — takes the
   house style. Settings → Interface → Flight deck can darken or
   lighten the HUD separately for anyone who disagrees.
   ------------------------------------------------------------------ */
body.light #screens,
body.light #gallery,
body.light #bigmap{
  --bg:#f6f7fa;
  --panel:#ffffff;
  --panel-solid:#ffffff;
  --line:#e4e7ee;
  --line-strong:#ccd2de;
  --text:#141a21;
  --dim:#5c6673;
  --dimmer:#8a93a0;
  --accent:#0f8a4a;
  --accent-2:#1f6feb;
  --dji-blue:#1f6feb;
  --dji-green:#0f8a4a;
  --sand:#9a7434;
  --warn:#a8660a;
  --bad:#c0362c;
  --good:#0f8a4a;
  color:var(--text);
}
body.light #screens .screen{background:var(--bg)}
body.light .menu-bg{opacity:.05}
body.light .card,body.light .mcard,body.light .fleet-card,body.light .pf-item,
body.light .db-row,body.light .pane,body.light .free-config{background:#fff}
body.light ::-webkit-scrollbar-track{background:rgba(0,0,0,.04)}
body.light ::-webkit-scrollbar-thumb{background:rgba(20,26,33,.22)}

*{box-sizing:border-box;margin:0;padding:0}
html,body{height:100%;overflow:hidden;background:var(--bg);color:var(--text);font-family:var(--ui)}
body{-webkit-font-smoothing:antialiased;user-select:none}
canvas#viewport{position:fixed;inset:0;width:100%;height:100%;display:block;z-index:0}
.hidden{display:none !important}
button{font-family:var(--ui);cursor:pointer;border:none;background:none;color:inherit}
h1,h2,h3{font-weight:650;letter-spacing:.01em}
h3{font-size:.7rem;text-transform:uppercase;letter-spacing:.15em;color:var(--dim);
   margin:.9rem 0 .4rem;border-bottom:1px solid var(--line);padding-bottom:.28rem}
h3:first-child{margin-top:0}
small{font-size:.72em}
::-webkit-scrollbar{width:7px;height:7px}
::-webkit-scrollbar-track{background:rgba(255,255,255,.03)}
::-webkit-scrollbar-thumb{background:rgba(150,190,210,.24);border-radius:6px}

/* ============================================================
   FLIGHT INTERFACE — DJI Pilot 2 layout
   ============================================================ */
/* Every flight-deck panel is laid out in these units, so one setting scales the
   whole instrument panel without moving anything relative to anything else. */
:root{--hud-scale:1}
#hud{position:fixed;inset:0;z-index:5;pointer-events:none;font-family:var(--ui);font-size:12px}
#hud button{pointer-events:auto}
/* Interface size. Each panel is scaled about the corner it is anchored to, so
   it grows inwards from its own edge and its anchor never moves — zooming the
   panels instead would scale their offsets too and pull the layout apart. */
#leftrail{transform:scale(var(--hud-scale));transform-origin:top left}
/* Anchored top and bottom, so the box stays put and the type scales inside it */
#keypanel{font-size:calc(10px * var(--hud-scale))}
#bottomleft{transform:scale(var(--hud-scale));transform-origin:bottom left}
#rightrail,#mission-panel,#expo{transform:scale(var(--hud-scale));transform-origin:top right}
#campip{transform:scale(var(--hud-scale));transform-origin:bottom right}
#botbar{transform:translateX(-50%) scale(var(--hud-scale));transform-origin:bottom center}
#radiolog{transform:translateX(-50%) scale(var(--hud-scale));transform-origin:bottom center}

/* ---------- top bar ---------- */
#topbar{position:absolute;top:0;left:0;right:0;height:38px;display:flex;align-items:center;
  background:#000;border-bottom:1px solid rgba(255,255,255,.07);padding:0 6px;gap:8px}
#tb-back{width:34px;height:34px;font-size:22px;color:#fff;line-height:1}
#tb-menu{width:34px;height:34px;font-size:19px;color:#fff;letter-spacing:1px}
#tb-warn{flex:1;min-width:0;display:flex;align-items:center}
#v-warning{font-size:13px;font-weight:600;color:var(--dji-orange);white-space:nowrap;
  overflow:hidden;text-overflow:ellipsis;padding:4px 12px;border-radius:3px}
#v-warning.crit{background:var(--dji-red);color:#fff;animation:pulse 1.1s infinite}
#v-warning.warn{background:var(--dji-orange);color:#1a1000}
@keyframes pulse{0%,60%{opacity:1}61%,100%{opacity:.45}}
#tb-mode{position:absolute;left:50%;transform:translateX(-50%);text-align:center;pointer-events:none}
#tb-mode span{font-size:15px;font-weight:600;color:var(--dji-orange);letter-spacing:.02em}
#tb-mode small{display:block;font-size:9.5px;color:var(--dim);letter-spacing:.12em;text-transform:uppercase}
#tb-mode.atti span{color:var(--dji-red)}
#tb-mode.sport span{color:#ff6b3d}
#tb-mode.cine span{color:var(--dji-blue)}
.tb-right{display:flex;align-items:center;gap:14px;margin-left:auto;padding-right:2px}
.tb-item{display:flex;align-items:center;gap:5px;font-family:var(--mono);font-size:13px}
.tb-item b{font-weight:600}
.ic-sat{width:14px;height:14px;display:inline-block;
  background:currentColor;color:var(--dji-red);
  -webkit-mask:radial-gradient(circle at 3px 11px,#000 3px,transparent 3px),
    linear-gradient(45deg,transparent 45%,#000 45%,#000 55%,transparent 55%);}
.ic-rc,.ic-hd{font-style:normal;font-size:10px;font-weight:700;border:1.5px solid var(--dji-green);
  color:var(--dji-green);border-radius:3px;padding:1px 4px;letter-spacing:.04em}
.ic-rc.low,.ic-hd.low{border-color:var(--dji-orange);color:var(--dji-orange)}
.ic-rc.crit,.ic-hd.crit{border-color:var(--dji-red);color:var(--dji-red)}
.batt{gap:7px}
.ic-batt{width:26px;height:13px;border:1.5px solid #fff;border-radius:2.5px;position:relative;
  display:inline-block;padding:1.5px}
.ic-batt::after{content:"";position:absolute;right:-4px;top:3px;width:2.5px;height:5px;background:#fff;border-radius:0 1px 1px 0}
#batt-fill{display:block;height:100%;width:100%;background:#fff;border-radius:1px;transition:width .4s,background .4s}
.batt span{display:flex;flex-direction:column;line-height:1.12}
.batt small{font-size:9.5px;color:var(--dim)}

/* ---------- battery budget strip ---------- */
#progstrip{position:absolute;top:38px;left:0;right:0;height:4px;background:rgba(255,255,255,.10)}
#prog-flown{position:absolute;left:0;top:0;bottom:0;background:var(--dji-green);width:0}
#progstrip span{position:absolute;top:-2px;width:8px;height:8px;border-radius:50%;transform:translateX(-50%)}
#prog-home{background:var(--dji-orange)}
#prog-now{background:#fff}

/* ---------- left rail ---------- */
#leftrail{position:absolute;left:10px;top:64px;display:flex;flex-direction:column;gap:16px;align-items:center}
.gim-ind,.att-ind{position:relative;width:44px;text-align:center}
.gim-ind svg,.att-ind svg{width:40px;height:auto;overflow:visible}
#gim-arm{stroke:var(--dji-blue);stroke-width:3;stroke-linecap:round;transform-origin:20px 30px}
.gim-ind circle{fill:none;stroke:var(--dji-blue);stroke-width:2}
#att-arrow{fill:#fff;stroke:var(--dji-green);stroke-width:2;transform-origin:20px 20px}
.gim-ind span,.att-ind span{display:block;font-family:var(--mono);font-size:10px;color:#fff;
  text-shadow:0 1px 3px #000;margin-top:2px}
#automation-badge{font-size:9.5px;letter-spacing:.13em;padding:3px 7px;border-radius:3px;
  background:rgba(74,163,255,.2);border:1px solid var(--dji-blue);color:var(--dji-blue);text-transform:uppercase}

/* ---------- feed overlay ---------- */
#feed{position:absolute;inset:44px 96px 74px 66px;pointer-events:none}
#sensor-tag{position:absolute;left:50%;top:8px;transform:translateX(-50%);
  border:1.5px solid var(--dji-green);color:var(--dji-green);font-family:var(--mono);
  font-size:15px;font-weight:600;padding:5px 16px;border-radius:3px;letter-spacing:.06em;white-space:nowrap}
#reticle{position:absolute;left:50%;top:50%;width:88px;height:70px;transform:translate(-50%,-50%)}
#reticle i{position:absolute;width:18px;height:14px;border:2px solid var(--dji-green)}
#reticle i:nth-child(1){left:0;top:0;border-right:0;border-bottom:0}
#reticle i:nth-child(2){right:0;top:0;border-left:0;border-bottom:0}
#reticle i:nth-child(3){left:0;bottom:0;border-right:0;border-top:0}
#reticle i:nth-child(4){right:0;bottom:0;border-left:0;border-top:0}
#reticle::before,#reticle::after{content:"";position:absolute;left:50%;top:50%;width:16px;height:2px;
  background:var(--dji-green);opacity:.85}
#reticle::before{transform:translate(-50%,-50%) rotate(45deg)}
#reticle::after{transform:translate(-50%,-50%) rotate(-45deg)}
#reticle.locked i{border-color:#fff;box-shadow:0 0 8px rgba(49,209,88,.9)}
#reticle-zoom{position:absolute;left:50%;top:calc(100% + 8px);transform:translateX(-50%);
  color:var(--dji-green);font-family:var(--mono);font-size:17px;font-weight:600}
#rec-dot{position:absolute;right:8px;top:8px;display:flex;align-items:center;gap:7px;
  background:rgba(0,0,0,.55);padding:4px 10px;border-radius:14px}
#rec-dot i{width:9px;height:9px;border-radius:50%;background:var(--dji-red);animation:pulse 1.3s infinite}
#rec-time{font-family:var(--mono);font-size:12px;color:#fff}
#feed-stamp{position:absolute;right:8px;bottom:6px;font-family:var(--mono);font-size:11px;
  color:rgba(255,255,255,.72);text-shadow:0 1px 3px #000;letter-spacing:.04em}
#gas-panel{position:absolute;left:8px;bottom:8px;background:rgba(0,0,0,.62);border:1px solid var(--line);
  border-radius:4px;padding:8px 12px;min-width:170px}
#gas-panel label{font-size:9.5px;letter-spacing:.14em;color:var(--dim);display:block}
#gas-panel b{font-family:var(--mono);font-size:26px;font-weight:500;color:var(--dji-green);line-height:1.05}
#gas-panel small{font-family:var(--mono);font-size:11px;color:var(--dim);margin-left:5px}
#gas-panel.alarm b{color:var(--dji-red)}
#gas-panel.caution b{color:var(--dji-orange)}
.gas-bar{height:4px;background:rgba(255,255,255,.14);border-radius:2px;margin:6px 0 4px;overflow:hidden}
.gas-bar i{display:block;height:100%;background:var(--dji-green);width:0;transition:width .2s,background .2s}
#gas-panel.alarm .gas-bar i{background:var(--dji-red)}
#gas-panel.caution .gas-bar i{background:var(--dji-orange)}
#gas-peak{font-family:var(--mono);font-size:10px;color:var(--dimmer)}

/* contact tool — probe, brush, scanner */
#tool-panel{position:absolute;left:8px;bottom:8px;background:rgba(0,0,0,.66);border:1px solid var(--line);
  border-radius:4px;padding:8px 11px;min-width:230px}
.tp-head{display:flex;justify-content:space-between;align-items:baseline;gap:10px;margin-bottom:3px}
.tp-head b{font-family:var(--mono);font-size:12px;letter-spacing:.08em;color:#fff}
#tool-state{font-family:var(--mono);font-size:10px;letter-spacing:.1em;color:var(--dimmer)}
#tool-panel.armed #tool-state{color:var(--dji-orange)}
#tool-panel.contact #tool-state{color:var(--dji-green)}
.tp-target{font-size:10.5px;color:var(--dim);line-height:1.35;margin-bottom:5px;
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.tp-bar{height:4px;background:rgba(255,255,255,.14);border-radius:2px;overflow:hidden}
.tp-bar i{display:block;height:100%;width:0;background:var(--dji-orange);transition:width .12s}
#tool-panel.contact .tp-bar i{background:var(--dji-green)}
.tp-why{font-size:10px;color:var(--dji-orange);margin-top:4px;line-height:1.35;min-height:12px}
.tp-reading{display:flex;align-items:baseline;gap:5px;margin-top:5px;padding-top:5px;
  border-top:1px solid rgba(255,255,255,.12)}
.tp-reading b{font-family:var(--mono);font-size:22px;color:var(--dji-green);line-height:1}
.tp-reading small{font-family:var(--mono);font-size:10px;color:var(--dim)}
.tp-reading span{margin-left:auto;font-family:var(--mono);font-size:10.5px;color:var(--dim)}
.tp-reading.bad b{color:var(--dji-red)}
.tp-reading.bad span{color:var(--dji-red)}

/* ---------- exposure strip ---------- */
#expo{position:absolute;right:96px;top:52px;display:flex;align-items:stretch;gap:0;
  background:rgba(0,0,0,.62);border-radius:4px;overflow:hidden;pointer-events:auto}
#expo>span{display:flex;flex-direction:column;align-items:center;justify-content:center;
  padding:5px 11px;border-right:1px solid rgba(255,255,255,.08);min-width:52px}
#expo label{font-size:9.5px;color:#c9d3da;letter-spacing:.04em}
#expo b{font-family:var(--mono);font-size:13px;color:#fff;font-weight:500}
#expo b.lock{font-size:11px}
#expo button{padding:5px 11px;font-size:15px;border-right:1px solid rgba(255,255,255,.08);opacity:.75}
#expo button.active{opacity:1;background:rgba(49,209,88,.18)}

/* ---------- right rail ---------- */
#rightrail{position:absolute;right:8px;top:96px;bottom:78px;display:flex;flex-direction:column;
  align-items:center;gap:12px;width:78px}
.zoomcol{display:flex;flex-direction:column;align-items:center;gap:5px;background:rgba(0,0,0,.55);
  border-radius:20px;padding:8px 0;width:34px;flex:0 0 auto}
.zoomcol button{width:26px;height:26px;font-size:17px;color:#fff;border-radius:50%;
  background:rgba(255,255,255,.10)}
.zoom-track{width:3px;height:110px;background:rgba(255,255,255,.22);position:relative;border-radius:2px}
#zoom-knob{position:absolute;left:-5px;width:13px;height:3px;background:var(--dji-orange);border-radius:2px}
#zoom-val{font-family:var(--mono);font-size:10px;color:#fff}
.rr-buttons{display:flex;flex-direction:column;gap:8px;align-items:center}
.rr-buttons button{width:42px;height:42px;border-radius:50%;background:rgba(0,0,0,.55);
  color:#fff;font-size:16px;display:flex;align-items:center;justify-content:center;
  border:1px solid rgba(255,255,255,.12)}
.rr-buttons button.on{background:rgba(49,209,88,.28);border-color:var(--dji-green)}
#rr-sensor{font-size:9.5px;font-weight:700;letter-spacing:.03em;line-height:1.1;text-align:center}
/* Key hint on every rail control: the cursor is captured in flight, so the key
   is the primary way in and the button is the reminder. */
.rr-buttons button i,#semi-tools button i{position:absolute;font-family:var(--mono);font-style:normal;
  font-size:8px;font-weight:400;color:var(--dimmer);letter-spacing:0}
.rr-buttons button{position:relative}
.rr-buttons button i{bottom:2px;left:0;right:0;text-align:center}
#semi-tools button{position:relative}
#semi-tools button i{right:5px;top:50%;transform:translateY(-50%)}
#semi-tools{display:flex;flex-direction:column;gap:6px;width:100%}
#semi-tools button{font-size:10px;font-weight:700;letter-spacing:.08em;padding:7px 0;border-radius:4px;
  background:rgba(0,0,0,.55);border:1px solid rgba(255,255,255,.14);color:#fff}
#semi-tools button.arm{background:var(--dji-blue);border-color:var(--dji-blue);color:#001424}
#route-ctl{width:100%;background:rgba(0,0,0,.6);border:1px solid var(--line);border-radius:5px;
  padding:8px 7px;display:flex;flex-direction:column;gap:6px;margin-top:auto}
.rc-status{display:flex;flex-direction:column;align-items:center;line-height:1.2}
.rc-status b{font-size:10px;letter-spacing:.06em}
.rc-status small{font-family:var(--mono);font-size:11px;color:var(--dji-green)}
#route-ctl button{font-size:10px;font-weight:700;letter-spacing:.08em;padding:6px 0;border-radius:3px;
  background:rgba(255,255,255,.1);color:#fff}
#rc-toggle{background:var(--dji-green);color:#04220e}
#rc-toggle.paused{background:var(--dji-orange);color:#1a1000}

/* ---------- bottom bar ---------- */
#botbar{position:absolute;left:50%;bottom:6px;transform:translateX(-50%);display:flex;align-items:center;
  gap:22px}
.bb-block{display:flex;flex-direction:column;gap:2px;min-width:96px}
.bb-row{display:flex;align-items:baseline;gap:5px;justify-content:flex-end}
.bb-row label{font-size:9.5px;color:#c2ccd4;letter-spacing:.06em;min-width:26px}
.bb-row b{font-family:var(--mono);font-size:19px;font-weight:500;color:var(--dji-green);
  text-shadow:0 1px 4px #000;min-width:56px;text-align:right}
.bb-row small{font-size:9.5px;color:#93a3ad}
.bb-row.alert b{color:var(--dji-red)}
#compass-rose{position:relative;width:96px;height:96px}
#compass-rose canvas{width:100%;height:100%}
#rose-hdg{position:absolute;left:50%;top:-3px;transform:translateX(-50%);font-family:var(--mono);
  font-size:12px;color:var(--dji-green);text-shadow:0 1px 3px #000}

/* ---------- picture-in-picture map ---------- */
#bottomleft{position:absolute;left:8px;bottom:8px;display:flex;gap:8px;align-items:flex-end}
#pipmap{position:relative;width:190px;height:138px;border-radius:5px;overflow:hidden;
  border:1px solid rgba(255,255,255,.2);background:#0a0e12;pointer-events:auto;cursor:pointer}
#pipmap canvas{width:100%;height:100%;display:block}
.mm-scale{position:absolute;left:5px;bottom:3px;font-family:var(--mono);font-size:9px;color:#cfe;
  text-shadow:0 1px 2px #000}

/* ---------- drone camera picture-in-picture ---------- */
#campip{position:absolute;right:8px;bottom:86px;width:320px;
  background:rgba(6,9,12,.82);border:1px solid var(--line-strong);border-radius:5px;
  display:flex;flex-direction:column;overflow:hidden;pointer-events:auto;backdrop-filter:blur(4px)}
#campip.hidden{display:none}
#campip.collapsed .cp-body,#campip.collapsed .cp-grip{display:none}
.cp-head{display:flex;align-items:center;justify-content:space-between;gap:6px;
  padding:3px 4px 3px 8px;border-bottom:1px solid var(--line);cursor:default}
.cp-head b{font-size:9.5px;letter-spacing:.1em;color:var(--accent-2)}
#cp-collapse{width:20px;height:18px;font-size:11px;color:var(--dim);border-radius:3px}
#cp-collapse:hover{background:rgba(255,255,255,.1);color:var(--text)}
.cp-body{position:relative;line-height:0}
.cp-body canvas{width:100%;height:auto;display:block}
.cp-grip{height:12px;cursor:nwse-resize;background:
  linear-gradient(135deg,transparent 55%,var(--line-strong) 55% 62%,transparent 62%,
  transparent 70%,var(--line-strong) 70% 77%,transparent 77%);
  background-position:right center;background-repeat:no-repeat;background-size:16px 12px}

/* ---------- obstacle radar ---------- */
#radar{position:relative;width:140px;height:138px;border-radius:5px;
  border:1px solid rgba(255,255,255,.2);background:rgba(8,12,16,.7);pointer-events:none;
  display:flex;flex-direction:column;align-items:center;justify-content:flex-start;overflow:hidden}
#radar.alarm{border-color:rgba(255,59,48,.85);box-shadow:0 0 12px rgba(255,59,48,.35)}
#radar canvas{width:134px;height:118px;display:block;margin-top:1px}
.rd-head{display:flex;justify-content:space-between;align-items:baseline;width:100%;
  padding:0 6px 3px;font-family:var(--mono);font-size:9px;color:var(--dim)}
.rd-head .bad{color:var(--bad)}
.rd-head .warn{color:var(--warn)}
.rd-head b{font-size:11px;color:var(--fg)}

/* ---------- sign in ---------- */
#screen-login{display:flex;align-items:center;justify-content:center}
.login-card{position:relative;width:min(430px,92vw);background:var(--panel);
  border:1px solid var(--line);border-radius:10px;padding:34px 34px 28px;text-align:center;
  box-shadow:0 12px 40px rgba(0,0,0,.16)}
.login-mark{height:56px;width:auto;border-radius:8px;background:#fff;padding:4px 8px;
  box-shadow:0 1px 4px rgba(0,0,0,.14)}
.login-card h1{font-size:30px;font-weight:200;letter-spacing:.11em;margin:16px 0 2px}
.login-card h1 span{color:var(--accent);font-weight:600}
.login-sub{font-size:10.5px;letter-spacing:.13em;text-transform:uppercase;color:var(--dim)}
.login-body{font-size:12.5px;line-height:1.6;color:var(--dim);margin:20px 0 22px}
#login-google{width:100%;display:flex;align-items:center;justify-content:center;gap:10px}
.g-mark{display:inline-flex;align-items:center;justify-content:center;width:20px;height:20px;
  border-radius:50%;background:#fff;color:#4285f4;font-weight:700;font-size:13px}
.login-note{font-size:11px;color:var(--dimmer);margin-top:16px}
.login-note b{color:var(--dim)}
.login-err{margin-top:14px;font-size:12px;line-height:1.5;color:var(--bad);
  background:rgba(192,54,44,.10);border:1px solid rgba(192,54,44,.32);border-radius:4px;padding:9px 12px}

/* Signed-in pilot on the menu header */
.brand-user{display:flex;align-items:center;gap:8px;margin-left:auto;padding-bottom:4px}
.brand-user img{width:26px;height:26px;border-radius:50%}
.brand-user .bu-who{text-align:right;line-height:1.25}
.brand-user .bu-who b{display:block;font-size:12px;font-weight:600}
.brand-user .bu-who small{font-size:10px;color:var(--dim)}
.brand-user button{font-size:10.5px;color:var(--dim);border:1px solid var(--line);
  border-radius:3px;padding:4px 9px}
.brand-user button:hover{color:var(--text);border-color:var(--line-strong)}

/* ---------- instructor console ---------- */
#instructor{position:absolute;right:8px;bottom:8px;width:290px;max-height:calc(100% - 120px);
  background:rgba(10,6,6,.92);border:1px solid rgba(255,149,0,.5);border-radius:5px;
  backdrop-filter:blur(8px);display:flex;flex-direction:column;pointer-events:auto;z-index:36}
#instructor.hidden{display:none}
.ic-head{padding:6px 9px;border-bottom:1px solid rgba(255,149,0,.3)}
.ic-head b{display:block;font-size:11px;text-transform:uppercase;letter-spacing:.09em;color:var(--warn)}
.ic-head span{font-size:9px;color:var(--dimmer);line-height:1.3;display:block;margin-top:2px}
.ic-list{padding:5px;overflow-y:auto}
.ic-cat{font-size:8.5px;text-transform:uppercase;letter-spacing:.09em;color:var(--dimmer);margin:6px 0 2px 3px}
.ic-btn{display:flex;justify-content:space-between;align-items:center;width:100%;
  padding:4px 7px;margin-bottom:2px;border-radius:3px;font-size:10.5px;text-align:left;
  background:rgba(255,255,255,.05);border:1px solid transparent;color:var(--text)}
.ic-btn:hover{background:rgba(255,149,0,.18);border-color:rgba(255,149,0,.5)}
.ic-btn.fired{opacity:.4}
.ic-btn i{font-style:normal;font-family:var(--mono);font-size:8.5px;color:var(--dimmer)}
.ic-btn.crit i{color:var(--bad)}

/* ---------- always-on shortcut panel ----------
   Docked on the left rail, visible for the whole flight. A trainee should
   never have to stop flying to remember which key the light is on. */
#keypanel{position:absolute;left:8px;top:238px;bottom:156px;width:186px;
  background:rgba(6,9,12,.62);border:1px solid var(--line);
  border-radius:5px;backdrop-filter:blur(6px);display:flex;flex-direction:column;
  pointer-events:auto;overflow:hidden}
#keypanel.hidden{display:none}
.kp-head{display:flex;justify-content:space-between;align-items:baseline;padding:5px 8px;
  border-bottom:1px solid var(--line)}
.kp-head b{font-size:1em;text-transform:uppercase;letter-spacing:.09em;color:var(--accent)}
.kp-head span{font-family:var(--mono);font-size:.9em;color:var(--dimmer)}
/* Scrolls rather than clipping: a shortcut list that silently loses its last
   section is worse than one with a scrollbar on a short window. */
.kp-list{padding:4px 6px 6px;overflow-y:auto;scrollbar-width:thin}
.kp-sec{font-size:.85em;text-transform:uppercase;letter-spacing:.09em;color:var(--dimmer);
  margin:5px 0 2px;padding-left:2px}
.kp-sec:first-child{margin-top:1px}
.kp-row{display:flex;gap:.6em;align-items:center;padding:1px 0;font-size:1em;line-height:1.3}
.kp-row span{flex:0 0 6.2em;display:flex;gap:2px;justify-content:flex-start}
.kp-row b{font-weight:400;color:var(--dim);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.kp-row kbd{font-family:var(--mono);font-size:.85em;background:rgba(255,255,255,.10);
  border:1px solid rgba(255,255,255,.16);border-radius:2px;padding:0 3px;color:var(--fg)}

/* ---------- mission scope ---------- */
#mission-panel{position:absolute;right:96px;top:96px;width:250px;max-height:calc(100% - 260px);
  background:rgba(6,9,12,.72);border:1px solid var(--line);border-radius:5px;
  display:flex;flex-direction:column;backdrop-filter:blur(6px)}
.mp-head{display:flex;justify-content:space-between;align-items:center;padding:6px 10px;
  border-bottom:1px solid var(--line)}
.mp-head span:first-child{font-size:11px;font-weight:600;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
#mp-score{color:var(--sand);font-family:var(--mono);font-size:13px;font-weight:700;margin-left:8px}
.mp-phase{padding:3px 10px;font-size:9px;letter-spacing:.16em;color:var(--dji-green);
  background:rgba(49,209,88,.08);text-transform:uppercase}
#mp-objectives{list-style:none;overflow-y:auto;flex:1;padding:3px 0;min-height:0}
#mp-objectives li{padding:5px 10px 5px 26px;position:relative;font-size:11px;line-height:1.4;
  color:var(--dim);border-bottom:1px solid rgba(150,175,195,.06)}
#mp-objectives li::before{content:"○";position:absolute;left:9px;top:5px;color:var(--dimmer)}
#mp-objectives li.active{color:var(--text);background:rgba(127,227,255,.05)}
#mp-objectives li.active::before{content:"▶";color:var(--accent-2)}
#mp-objectives li.done{color:var(--good)}
#mp-objectives li.done::before{content:"✔";color:var(--good)}
#mp-objectives li.failed{color:var(--bad)}
#mp-objectives li.failed::before{content:"✖";color:var(--bad)}
.obj-prog{display:block;height:3px;background:rgba(255,255,255,.1);margin-top:4px;border-radius:2px;overflow:hidden}
.obj-prog i{display:block;height:100%;background:var(--accent-2);transition:width .3s}
.obj-sub{display:block;color:var(--dimmer);font-size:9.5px;margin-top:2px}
.mp-hint{padding:6px 10px;font-size:10.5px;color:var(--sand);border-top:1px solid var(--line);
  background:rgba(217,183,121,.06);line-height:1.45}

/* ---------- messages ---------- */
/* Above the bottom bar and centred, so it cannot land on the telemetry no
   matter how narrow the window gets. It used to be anchored left of the
   centred bar and overlapped it below about 1200px. */
#radiolog{position:absolute;left:50%;transform:translateX(-50%);bottom:112px;
  width:min(520px,calc(100vw - 940px));min-width:260px;
  display:flex;flex-direction:column-reverse;gap:3px;pointer-events:none}
.rl{background:rgba(0,0,0,.62);border-left:2px solid var(--dim);padding:4px 8px;font-size:10.5px;
  color:var(--dim);animation:rlIn .3s ease-out;line-height:1.4}
.rl b{color:var(--text);font-weight:600}
.rl.radio{border-color:var(--accent-2)}.rl.radio b{color:var(--accent-2)}
.rl.warn{border-color:var(--warn);color:#e5cf9a}.rl.warn b{color:var(--warn)}
.rl.bad{border-color:var(--bad);color:#f0b3ad}.rl.bad b{color:var(--bad)}
.rl.good{border-color:var(--good);color:#b6ecc6}.rl.good b{color:var(--good)}
@keyframes rlIn{from{opacity:0;transform:translateX(-12px)}to{opacity:1;transform:none}}

#toasts{position:absolute;left:50%;top:78px;transform:translateX(-50%);display:flex;flex-direction:column;
  gap:5px;align-items:center;width:520px}
.toast{padding:7px 16px;border-radius:4px;font-size:12.5px;backdrop-filter:blur(6px);border:1px solid;
  animation:tIn .28s cubic-bezier(.2,1.2,.4,1);text-align:center}
.toast.good{background:rgba(20,70,44,.92);border-color:var(--good);color:#d3f7e0}
.toast.bad{background:rgba(80,24,20,.92);border-color:var(--bad);color:#ffd6d2}
.toast.warn{background:rgba(80,58,12,.92);border-color:var(--warn);color:#ffeec2}
.toast.info{background:rgba(12,38,58,.92);border-color:var(--accent-2);color:#d3eeff}
.toast b{display:block;font-size:10px;letter-spacing:.14em;text-transform:uppercase;opacity:.8;margin-bottom:2px}
@keyframes tIn{from{opacity:0;transform:translateY(-14px) scale(.96)}to{opacity:1;transform:none}}

#flash{position:absolute;inset:0;background:#fff;opacity:0;pointer-events:none}
#flash.go{animation:fl .2s ease-out}
@keyframes fl{0%{opacity:.8}100%{opacity:0}}
#rth-banner{position:absolute;left:50%;top:52px;transform:translateX(-50%);background:var(--dji-red);
  color:#fff;padding:6px 20px;font-size:12.5px;letter-spacing:.06em;border-radius:3px;animation:pulse 1.5s infinite}
#mode-banner{position:absolute;left:50%;top:46%;transform:translate(-50%,-50%);font-size:38px;font-weight:200;
  letter-spacing:.28em;color:rgba(255,255,255,.92);text-shadow:0 2px 20px #000;opacity:0;pointer-events:none}
#mode-banner.show{animation:mb 1.1s ease-out}
@keyframes mb{0%{opacity:0;transform:translate(-50%,-50%) scale(1.14)}20%,70%{opacity:1}100%{opacity:0}}
#click-hint{position:absolute;left:50%;bottom:120px;transform:translateX(-50%);font-size:12px;
  color:rgba(255,255,255,.72);background:rgba(0,0,0,.55);padding:6px 16px;border-radius:16px}
#click-hint.hidden{display:none}
#click-hint b{font-family:var(--mono);background:rgba(255,255,255,.14);border-radius:3px;padding:0 5px}
/* Detached: the HUD stops swallowing clicks so dialogs are reachable */
body.detached #hud{pointer-events:none}
body.detached #hud button,body.detached #pipmap,body.detached #keypanel{pointer-events:auto}
/* Attached: the cursor is the camera, so it should not be sitting on the
   picture. Pointer lock hides it; this covers the case where the browser
   refuses the lock and the look still has to work. */
body.attached #app,body.attached canvas{cursor:none}

/* ============================================================
   OVERLAYS
   ============================================================ */
#bigmap,#gallery{position:fixed;inset:0;z-index:28;background:rgba(3,5,7,.985);display:flex;
  flex-direction:column;padding:14px 18px;backdrop-filter:blur(6px)}
.bm-head,.gal-head{display:flex;align-items:center;gap:16px;padding-bottom:10px;
  border-bottom:1px solid var(--line);margin-bottom:10px}
.bm-head b,.gal-head b{font-size:14px}
.bm-head span,.gal-head span{font-size:11.5px;color:var(--dim)}
#bm-close,#gal-close{margin-left:auto;font-size:18px;color:var(--dim);width:30px;height:30px}
#bm-close:hover,#gal-close:hover{color:#fff}
#bigmap canvas{flex:1;min-height:0;width:100%;object-fit:contain;background:#070b0e;
  border:1px solid var(--line);border-radius:4px}
.bm-legend{display:flex;gap:18px;font-size:11px;color:var(--dim);font-family:var(--mono);
  flex-wrap:wrap;justify-content:center;padding-top:9px}
.bm-legend i{display:inline-block;width:9px;height:9px;border-radius:50%;margin-right:5px;vertical-align:middle}

.gal-tabs{display:flex;gap:4px}
.gal-tab{padding:4px 12px;font-size:11.5px;color:var(--dim);border-radius:3px;border:1px solid transparent}
.gal-tab.active{color:var(--accent);border-color:var(--accent);background:rgba(49,209,88,.1)}
.gal-body{flex:1;min-height:0;display:grid;grid-template-columns:1fr 420px;gap:16px}
#gal-grid{overflow-y:auto;display:grid;grid-template-columns:repeat(auto-fill,minmax(148px,1fr));
  gap:8px;align-content:start;padding-right:6px}
#gal-detail{border:1px solid var(--line);border-radius:5px;padding:12px;display:flex;flex-direction:column;
  gap:10px;overflow:hidden}
#gal-detail img{width:100%;border-radius:4px;border:1px solid var(--line)}
.gal-empty{color:var(--dimmer);font-size:13px;margin:auto}
.gal-meta{display:grid;grid-template-columns:auto 1fr;gap:4px 12px;font-size:12px}
.gal-meta dt{color:var(--dimmer)}
.gal-meta dd{color:var(--text);font-family:var(--mono);font-size:11.5px}
.shot{border:1px solid var(--line);border-radius:4px;overflow:hidden;position:relative;background:#000;cursor:pointer}
.shot img{width:100%;display:block;aspect-ratio:16/9;object-fit:cover}
.shot .lbl{position:absolute;left:0;right:0;bottom:0;background:linear-gradient(0deg,rgba(0,0,0,.94),transparent);
  padding:12px 5px 3px;font-size:9px;font-family:var(--mono);color:#cfe}
.shot.hit{border-color:var(--good)}.shot.miss{border-color:rgba(255,95,82,.5)}
.shot.sel{outline:2px solid var(--accent)}
.shot .badge{position:absolute;top:3px;right:3px;font-size:9px;padding:1px 5px;border-radius:8px;font-family:var(--mono)}
.shot.hit .badge{background:rgba(20,80,40,.94);color:#cdf5da}
.shot.miss .badge{background:rgba(110,30,25,.94);color:#ffd6d2}
.shot.clip .badge{background:rgba(20,50,90,.94);color:#cfe4ff}

#pause{position:fixed;inset:0;z-index:30;background:rgba(4,7,10,.88);backdrop-filter:blur(7px);
  display:flex;align-items:center;justify-content:center}
.pause-card{background:var(--panel-solid);border:1px solid var(--line-strong);border-radius:6px;
  padding:22px 28px;width:min(680px,92vw);max-height:88vh;display:flex;flex-direction:column}
.pause-card h2{font-size:19px;margin-bottom:12px}
#pause-objectives{overflow-y:auto;max-height:34vh}
.pause-btns{display:flex;gap:9px;margin-top:16px;flex-wrap:wrap}
#pause-help{margin-top:14px;border-top:1px solid var(--line);padding-top:12px;overflow-y:auto;max-height:38vh}

/* ============================================================
   SCREENS — every one fits a single page
   ============================================================ */
#screens{position:fixed;inset:0;z-index:20;pointer-events:none}
.screen{position:absolute;inset:0;display:none;pointer-events:auto;overflow:hidden;
  background:radial-gradient(ellipse at 50% -10%,#101f2b 0%,#070a0e 55%,#04060a 100%)}
.screen.active{display:flex;flex-direction:column;animation:scIn .28s ease-out}
@keyframes scIn{from{opacity:0}to{opacity:1}}

/* ---------- menu ---------- */
.menu-bg{position:absolute;inset:0;pointer-events:none;opacity:.5;
  background:radial-gradient(circle at 84% 18%,rgba(217,183,121,.14),transparent 46%),
   radial-gradient(circle at 12% 82%,rgba(31,107,74,.2),transparent 52%),
   repeating-linear-gradient(115deg,transparent 0 44px,rgba(255,255,255,.013) 44px 45px)}
.brand{position:relative;padding:16px 30px 0;display:flex;align-items:flex-end;gap:16px;flex-wrap:wrap;flex:0 0 auto}
.brandmark{height:42px;width:auto;border-radius:6px;align-self:center;
  background:#fff;padding:3px 6px;box-shadow:0 1px 3px rgba(0,0,0,.18)}
.logo{font-size:32px;font-weight:200;letter-spacing:.12em;line-height:1;white-space:nowrap}
.logo span{color:var(--accent);font-weight:600}
.tagline{color:var(--dim);font-size:11px;letter-spacing:.12em;text-transform:uppercase;padding-bottom:5px}
.tagline .dot{color:var(--sand);margin:0 8px}
.tabs{display:flex;gap:2px;margin-left:auto}
.tab{padding:8px 16px;color:var(--dim);font-size:11.5px;letter-spacing:.08em;
  border-bottom:2px solid transparent;transition:.15s;text-transform:uppercase}
.tab:hover{color:var(--text);background:rgba(255,255,255,.03)}
.tab.active{color:var(--accent);border-bottom-color:var(--accent)}
.tabpanes{position:relative;flex:1;min-height:0;padding:12px 30px;display:flex;flex-direction:column}
.pane{display:none;flex:1;min-height:0;flex-direction:column}
.pane.active{display:flex;animation:scIn .22s}

.sector-filter{display:flex;gap:6px;flex-wrap:wrap;margin-bottom:10px;flex:0 0 auto}
.chip{padding:4px 12px;border:1px solid var(--line);border-radius:20px;font-size:11px;color:var(--dim);
  transition:.15s;background:rgba(255,255,255,.02)}
.chip:hover{border-color:var(--line-strong);color:var(--text)}
.chip.active{background:rgba(49,209,88,.13);border-color:var(--accent);color:var(--accent)}

.mission-grid{flex:1;min-height:0;overflow-y:auto;display:grid;
  grid-template-columns:repeat(auto-fill,minmax(232px,1fr));gap:10px;align-content:start;padding-right:6px}
.mcard{background:linear-gradient(160deg,rgba(18,26,34,.92),rgba(10,14,19,.96));border:1px solid var(--line);
  border-radius:5px;overflow:hidden;transition:.16s;cursor:pointer;position:relative;display:flex;flex-direction:column}
.mcard:hover{border-color:var(--accent);transform:translateY(-2px);box-shadow:0 8px 24px rgba(0,0,0,.5)}
.mcard-art{height:76px;position:relative;overflow:hidden;border-bottom:1px solid var(--line)}
.mcard-art canvas{width:100%;height:100%;display:block}
.mcard-body{padding:8px 10px 10px;flex:1;display:flex;flex-direction:column}
.mcard-sector{font-size:8.5px;letter-spacing:.16em;color:var(--sand);text-transform:uppercase;margin-bottom:3px}
.mcard h4{font-size:12.5px;font-weight:600;margin-bottom:4px;line-height:1.28}
.mcard p{font-size:10.5px;color:var(--dim);line-height:1.42;flex:1;
  display:-webkit-box;-webkit-line-clamp:3;-webkit-box-orient:vertical;overflow:hidden}
.mcard-foot{display:flex;gap:5px;align-items:center;margin-top:7px;font-size:9px;color:var(--dimmer);flex-wrap:wrap}
.pill{padding:1px 7px;border:1px solid var(--line);border-radius:9px}
.pill.d1{color:#7fe3ff;border-color:rgba(127,227,255,.4)}
.pill.d2{color:var(--warn);border-color:rgba(255,192,67,.4)}
.pill.d3{color:var(--bad);border-color:rgba(255,95,82,.4)}
.mcard-best{position:absolute;top:6px;right:6px;background:rgba(20,80,44,.92);border:1px solid var(--good);
  color:#cdf5da;font-size:9px;padding:1px 7px;border-radius:10px;font-family:var(--mono)}

.menu-foot{flex:0 0 auto;padding:8px 30px;border-top:1px solid var(--line);display:flex;
  justify-content:space-between;gap:16px;font-size:10.5px;color:var(--dimmer);background:rgba(5,7,10,.9)}

/* ---------- generic form furniture ---------- */
.card{background:rgba(14,19,25,.8);border:1px solid var(--line);border-radius:5px;padding:12px 14px;margin-bottom:10px}
.card h4{font-size:12.5px;margin-bottom:8px}
.row{display:flex;gap:12px;flex-wrap:wrap;align-items:center;margin-bottom:8px}
.row label{font-size:11.5px;color:var(--dim);min-width:150px}
select,input[type=text],input[type=number]{background:#0c1218;border:1px solid var(--line);color:var(--text);
  padding:5px 9px;border-radius:3px;font-family:var(--ui);font-size:12px;min-width:170px}
select:focus,input:focus{outline:none;border-color:var(--accent)}
input[type=range]{width:200px;accent-color:var(--accent)}
input[type=checkbox]{accent-color:var(--accent);width:14px;height:14px}
.val{font-family:var(--mono);color:var(--accent-2);font-size:11.5px;min-width:54px}

button.primary{background:var(--accent);color:#04220e;font-weight:650;padding:8px 20px;border-radius:3px;
  letter-spacing:.05em;font-size:12.5px;transition:.15s}
button.primary:hover{background:#4ee473;box-shadow:0 0 16px rgba(49,209,88,.32)}
button.primary:disabled{background:#25382c;color:#5d7a70;cursor:not-allowed;box-shadow:none}
button.primary.big{padding:10px 30px;font-size:13.5px}
button.ghost{border:1px solid var(--line-strong);color:var(--dim);padding:7px 16px;border-radius:3px;font-size:12px}
button.ghost:hover{border-color:var(--text);color:var(--text)}
button.ghost.tiny{padding:4px 10px;font-size:10.5px;opacity:.5;letter-spacing:.03em}
button.ghost.tiny:hover{opacity:1}
button.danger{border:1px solid var(--bad);color:var(--bad);padding:7px 16px;border-radius:3px;font-size:12px}
button.danger:hover{background:rgba(255,95,82,.13)}
button.back{color:var(--dim);font-size:12.5px;padding:5px 10px}
button.back:hover{color:var(--accent)}

/* ---------- briefing ---------- */
.brief-wrap{flex:1;min-height:0;display:flex;flex-direction:column;padding:14px 26px 12px;gap:10px}
.brief-top{display:flex;align-items:flex-start;gap:18px;flex:0 0 auto}
.brief-tag{font-size:9.5px;letter-spacing:.18em;color:var(--sand);text-transform:uppercase;margin-bottom:3px}
.brief-top h1{font-size:21px;font-weight:600;line-height:1.15}
.brief-meta{display:flex;gap:6px;flex-wrap:wrap;margin-left:auto;font-size:10px;font-family:var(--mono);color:var(--dim)}
.brief-meta span{border:1px solid var(--line);padding:2px 8px;border-radius:3px}
.brief-cols{flex:1;min-height:0;display:grid;grid-template-columns:1fr 1fr 310px;gap:20px}
.brief-col{min-height:0;overflow-y:auto;padding-right:6px}
.brief-col p{font-size:12.5px;line-height:1.6;color:#b6c5d1}
.brief-list{list-style:none}
.brief-list li{padding:5px 0 5px 20px;position:relative;font-size:12px;line-height:1.5;color:#adbdc9;
  border-bottom:1px solid rgba(150,175,195,.07)}
.brief-list li::before{content:"▸";position:absolute;left:2px;color:var(--accent)}
.brief-list li b{color:var(--text)}
.brief-list.warn li::before{content:"⚠";color:var(--warn);font-size:10px}
.brief-list.reg li::before{content:"§";color:var(--sand)}
.brief-side{min-height:0;overflow-y:auto;background:rgba(12,17,23,.7);border:1px solid var(--line);
  border-radius:5px;padding:10px 14px;padding-right:8px}
.cond-grid{display:grid;grid-template-columns:1fr 1fr;gap:6px}
.cond{background:rgba(255,255,255,.03);border:1px solid rgba(150,175,195,.1);border-radius:3px;padding:5px 8px}
.cond label{display:block;font-size:8.5px;letter-spacing:.13em;color:var(--dimmer);margin-bottom:2px}
.cond b{font-family:var(--mono);font-size:12.5px;color:var(--accent-2);font-weight:500}
.cond.alert b{color:var(--warn)}
.picker{display:flex;flex-direction:column;gap:5px}
.opt{border:1px solid var(--line);border-radius:4px;padding:6px 9px;transition:.15s;text-align:left;width:100%}
.opt:hover{border-color:var(--line-strong);background:rgba(255,255,255,.03)}
.opt.sel{border-color:var(--accent);background:rgba(49,209,88,.1)}
.opt .on{display:flex;justify-content:space-between;align-items:baseline;gap:6px}
.opt .on b{font-size:12px;font-weight:600}
.opt .on em{font-style:normal;font-family:var(--mono);font-size:9.5px;color:var(--sand)}
.opt small{display:block;color:var(--dim);font-size:10.5px;margin-top:2px;line-height:1.4}
.opt.locked{opacity:.4;cursor:not-allowed}
.picker.seg{flex-direction:row;flex-wrap:wrap}
.picker.seg .opt{flex:1;min-width:82px;text-align:center;padding:6px 4px}
.picker.seg .opt .on{justify-content:center}
.sensor-list{display:flex;flex-direction:column;gap:3px}
.sensor-row{display:flex;align-items:baseline;gap:7px;font-size:11px;padding:3px 6px;
  background:rgba(255,255,255,.03);border-radius:3px}
.sensor-row b{font-family:var(--mono);font-size:10px;color:var(--dji-green);min-width:34px}
.sensor-row span{color:var(--dim);font-size:10.5px}
.sensor-row em{margin-left:auto;font-style:normal;font-family:var(--mono);font-size:9.5px;color:var(--dimmer)}
.brief-actions{flex:0 0 auto;display:flex;align-items:center;gap:14px;justify-content:flex-end;
  border-top:1px solid var(--line);padding-top:10px}
#brief-warn{margin-right:auto;font-size:11.5px;color:var(--warn)}

/* ---------- pre-flight ---------- */
.pf-wrap{flex:1;min-height:0;display:flex;flex-direction:column;padding:14px 24px 12px;gap:10px}
.pf-top{display:flex;align-items:flex-start;gap:18px;flex:0 0 auto}
.pf-top h1{font-size:19px}
.pf-sub{color:var(--dim);font-size:11.5px;line-height:1.5;max-width:900px;margin-top:3px}
.pf-progress{margin-left:auto;text-align:right}
.pf-progress b{font-family:var(--mono);font-size:22px;color:var(--accent)}
.pf-progress span{display:block;font-size:9.5px;color:var(--dimmer);letter-spacing:.12em;text-transform:uppercase}
.pf-body{flex:1;min-height:0;display:grid;grid-template-columns:190px 1fr 1fr;gap:14px}
.pf-cats{display:flex;flex-direction:column;gap:3px;overflow-y:auto;min-height:0}
.pf-cat{text-align:left;padding:8px 10px;border-radius:4px;border:1px solid transparent;
  font-size:11.5px;color:var(--dim);display:flex;align-items:center;gap:8px}
.pf-cat:hover{background:rgba(255,255,255,.03);color:var(--text)}
.pf-cat.active{background:rgba(49,209,88,.1);border-color:var(--accent);color:var(--text)}
.pf-cat i{font-style:normal;font-family:var(--mono);font-size:10px;margin-left:auto;color:var(--dimmer)}
.pf-cat.done i{color:var(--good)}
.pf-items{overflow-y:auto;min-height:0;display:flex;flex-direction:column;gap:4px;padding-right:5px}
.pf-item{display:flex;gap:9px;padding:8px 10px;border:1px solid var(--line);border-radius:4px;
  cursor:pointer;transition:.13s;align-items:flex-start;background:rgba(255,255,255,.015)}
.pf-item:hover{border-color:var(--line-strong);background:rgba(255,255,255,.035)}
.pf-item.sel{border-color:var(--accent-2);background:rgba(127,227,255,.06)}
.pf-item .tick{width:16px;height:16px;border:1.5px solid var(--dimmer);border-radius:3px;flex-shrink:0;
  margin-top:1px;display:flex;align-items:center;justify-content:center;font-size:11px;color:transparent}
.pf-item.checked .tick{border-color:var(--good);background:var(--good);color:#04220e}
.pf-item .txt{font-size:11.5px;line-height:1.45;flex:1}
.pf-item .txt small{display:block;color:var(--dimmer);font-size:10.5px;margin-top:2px}
.pf-item.checked .txt{color:var(--good)}
.pf-item .tagi{font-size:8.5px;letter-spacing:.12em;padding:1px 6px;border-radius:8px;flex-shrink:0;
  border:1px solid var(--dji-blue);color:var(--dji-blue);margin-top:1px}
.pf-item.hazard .tagi{border-color:var(--bad);color:var(--bad)}
.pf-evidence{border:1px solid var(--line);border-radius:5px;background:rgba(10,14,19,.75);
  overflow-y:auto;min-height:0;padding:12px 14px}
.pf-noev{color:var(--dimmer);font-size:12px;text-align:center;margin-top:40px}
.pf-actions{flex:0 0 auto;display:flex;gap:12px;justify-content:flex-end;align-items:center;
  border-top:1px solid var(--line);padding-top:10px}
#pf-msg{margin-right:auto;font-size:11.5px;color:var(--warn)}

/* evidence viewers */
.ev-title{font-size:13px;font-weight:600;margin-bottom:3px}
.ev-sub{font-size:11px;color:var(--dim);line-height:1.5;margin-bottom:10px}
.ev-q{font-size:12px;color:var(--sand);margin:10px 0 7px;font-weight:600}
.ev-choices{display:flex;flex-direction:column;gap:5px}
.ev-choice{text-align:left;padding:7px 10px;border:1px solid var(--line);border-radius:4px;font-size:11.5px;
  line-height:1.4}
.ev-choice:hover{border-color:var(--line-strong);background:rgba(255,255,255,.03)}
.ev-choice.right{border-color:var(--good);background:rgba(74,222,128,.12);color:#d6f7e2}
.ev-choice.wrong{border-color:var(--bad);background:rgba(255,95,82,.12);color:#ffd9d5}
.ev-feedback{margin-top:9px;padding:8px 10px;border-radius:4px;font-size:11.5px;line-height:1.5}
.ev-feedback.ok{background:rgba(20,70,44,.5);border:1px solid var(--good);color:#d3f7e0}
.ev-feedback.no{background:rgba(80,24,20,.5);border:1px solid var(--bad);color:#ffd6d2}
.ev-canvas{width:100%;border:1px solid var(--line);border-radius:4px;background:#070b0e;display:block}
.ev-doc{border:1px solid var(--line-strong);border-radius:5px;padding:12px 14px;margin-bottom:8px;
  background:linear-gradient(160deg,#eef2ee,#dfe6df);color:#12202a;font-family:"Times New Roman",serif;
  position:relative;overflow:hidden}
.ev-doc.dark{background:linear-gradient(160deg,#132030,#0d1620);color:#dbe6ee;font-family:var(--ui)}
.ev-doc h5{font-size:12px;letter-spacing:.05em;margin-bottom:2px}
.ev-doc .docrow{display:flex;gap:8px;font-size:11px;padding:1.5px 0}
.ev-doc .docrow label{min-width:118px;color:#44586a;font-weight:600}
.ev-doc.dark .docrow label{color:var(--dim)}
.ev-doc .docrow b{font-weight:600}
.ev-doc .seal{position:absolute;right:10px;top:10px;width:52px;height:52px;border:2px solid rgba(20,70,110,.35);
  border-radius:50%;display:flex;align-items:center;justify-content:center;font-size:8px;text-align:center;
  color:rgba(20,70,110,.5);transform:rotate(-12deg);line-height:1.1;padding:4px}
.ev-doc .expired{color:#a8201a;font-weight:700}
.ev-doc .valid{color:#116b34;font-weight:700}
.ev-docsel{display:flex;gap:6px;margin-bottom:8px;flex-wrap:wrap}
.ev-docsel button{padding:4px 10px;font-size:10.5px;border:1px solid var(--line);border-radius:3px;color:var(--dim)}
.ev-docsel button.active{border-color:var(--accent);color:var(--accent);background:rgba(49,209,88,.1)}
.ev-gauge{display:flex;gap:14px;align-items:center;margin-bottom:10px}
.ev-readout{font-family:var(--mono)}
.ev-readout b{display:block;font-size:30px;color:var(--accent-2);line-height:1}
.ev-readout small{font-size:10px;color:var(--dim)}
.ev-table{width:100%;border-collapse:collapse;font-size:11px;margin-top:6px}
.ev-table th{text-align:left;color:var(--dimmer);font-size:9px;letter-spacing:.1em;padding:3px 5px;
  border-bottom:1px solid var(--line);text-transform:uppercase}
.ev-table td{padding:3px 5px;border-bottom:1px solid rgba(150,175,195,.07);font-family:var(--mono)}
.ev-table tr.over td{color:var(--bad)}

/* ---------- planner ---------- */
.pl-wrap{flex:1;min-height:0;display:flex}
.pl-side{width:290px;flex:0 0 auto;background:rgba(9,13,18,.94);border-right:1px solid var(--line);
  display:flex;flex-direction:column;min-height:0}
.pl-head{display:flex;align-items:center;gap:8px;padding:10px 12px;border-bottom:1px solid var(--line)}
.pl-head b{font-size:13px}
.pl-tools{display:flex;gap:4px;padding:8px 10px;border-bottom:1px solid var(--line);flex-wrap:wrap}
.pl-tool{flex:1;min-width:64px;padding:7px 4px;border:1px solid var(--line);border-radius:4px;
  font-size:10px;color:var(--dim);letter-spacing:.06em;text-align:center}
.pl-tool.active{border-color:var(--accent);color:var(--accent);background:rgba(49,209,88,.1)}
.pl-params{flex:1;min-height:0;overflow-y:auto;padding:10px 12px}
.pl-row{display:flex;align-items:center;gap:8px;margin-bottom:6px}
.pl-row label{flex:1;font-size:11px;color:var(--dim)}
.pl-row input,.pl-row select{min-width:0;width:104px;padding:4px 7px;font-size:11.5px}
.pl-summary{border-top:1px solid var(--line);padding:9px 12px;font-size:11px;line-height:1.6;
  color:var(--dim);max-height:190px;overflow-y:auto}
.pl-summary b{color:var(--text);font-family:var(--mono)}
.pl-actions{display:flex;gap:8px;padding:10px 12px;border-top:1px solid var(--line)}
.pl-actions button{flex:1}
.pl-map{flex:1;min-width:0;position:relative;background:#070b0e}
.pl-map canvas{position:absolute;inset:0;width:100%;height:100%;cursor:crosshair}
.pl-mapinfo{position:absolute;left:12px;top:12px;font-family:var(--mono);font-size:11px;color:#cfe;
  background:rgba(0,0,0,.55);padding:5px 10px;border-radius:3px;line-height:1.5}
.pl-maphint{position:absolute;left:50%;bottom:14px;transform:translateX(-50%);font-size:11.5px;
  color:rgba(255,255,255,.8);background:rgba(0,0,0,.6);padding:6px 16px;border-radius:16px}

/* ---------- debrief ---------- */
.db-wrap{flex:1;min-height:0;display:flex;flex-direction:column;padding:14px 26px 12px;gap:8px}
.db-head{display:flex;justify-content:space-between;align-items:flex-start;gap:20px;
  border-bottom:1px solid var(--line);padding-bottom:10px;flex:0 0 auto}
.db-tag{font-size:9.5px;letter-spacing:.18em;color:var(--sand);text-transform:uppercase;margin-bottom:3px}
.db-head h1{font-size:20px}
.db-score{text-align:right}
#db-grade{font-size:40px;font-weight:200;line-height:1}
#db-grade.pass{color:var(--good)}#db-grade.fail{color:var(--bad)}#db-grade.marg{color:var(--warn)}
#db-points{font-family:var(--mono);color:var(--dim);font-size:12px}
.db-cols{flex:1;min-height:0;display:grid;grid-template-columns:1fr 1fr 440px;gap:20px}
.db-col{min-height:0;display:flex;flex-direction:column}
.db-scroll{overflow-y:auto;min-height:0;padding-right:5px}
.db-scroll.short{max-height:26%}
.db-row{display:flex;gap:9px;align-items:center;padding:6px 9px;border:1px solid var(--line);border-radius:4px;
  margin-bottom:5px;background:rgba(255,255,255,.02)}
.db-row .ic{width:18px;text-align:center;font-size:13px;flex-shrink:0}
.db-row.ok .ic{color:var(--good)}.db-row.no .ic{color:var(--bad)}.db-row.part .ic{color:var(--warn)}
.db-row .nm{flex:1;font-size:11.5px;line-height:1.4}
.db-row .nm small{display:block;color:var(--dimmer);font-size:10px;margin-top:1px}
.db-row .pt{font-family:var(--mono);font-size:11.5px;color:var(--sand);flex-shrink:0}
.db-row .pt.neg{color:var(--bad)}
#db-track{width:100%;max-width:420px;border:1px solid var(--line);border-radius:4px;background:#080c10;flex:0 0 auto}
#db-gallery{display:grid;grid-template-columns:repeat(auto-fill,minmax(112px,1fr));gap:6px;
  overflow-y:auto;min-height:0;padding-right:5px}
.db-actions{flex:0 0 auto;display:flex;gap:12px;justify-content:flex-end;border-top:1px solid var(--line);padding-top:9px}
.empty{color:var(--dimmer);font-size:12px;padding:24px;text-align:center;border:1px dashed var(--line);border-radius:5px}

/* ---------- loading ---------- */
#screen-loading.active{align-items:center;justify-content:center}
.load-wrap{width:min(560px,86vw);text-align:center}
.load-logo{font-size:36px;font-weight:200;letter-spacing:.2em;margin-bottom:22px}
.load-logo span{color:var(--accent);font-weight:600}
.load-bar{height:3px;background:rgba(255,255,255,.1);border-radius:2px;overflow:hidden}
#load-fill{height:100%;width:0;background:linear-gradient(90deg,#1f6b4a,var(--accent));transition:width .25s}
.load-msg{margin-top:12px;font-family:var(--mono);font-size:11.5px;color:var(--dim);letter-spacing:.08em}
.load-tip{margin-top:24px;font-size:12px;color:var(--dimmer);line-height:1.65;font-style:italic}
.load-tip b{color:var(--sand);font-style:normal}

/* ---------- controls reference ---------- */
.ctrl-scroll{flex:1;min-height:0;overflow-y:auto;padding-right:6px}
.ctrl-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(268px,1fr));gap:14px}
.ctrl-block h4{font-size:11px;letter-spacing:.13em;text-transform:uppercase;color:var(--accent);
  margin-bottom:7px;border-bottom:1px solid var(--line);padding-bottom:5px}
.kb{display:flex;justify-content:space-between;gap:10px;padding:3px 0;font-size:11.5px;color:var(--dim);
  border-bottom:1px solid rgba(150,175,195,.06);align-items:center}
.kb b{color:var(--text);font-weight:500;text-align:right;flex:1}
kbd{font-family:var(--mono);background:#161d24;border:1px solid var(--line-strong);border-bottom-width:2px;
  border-radius:3px;padding:1px 6px;font-size:10.5px;color:var(--accent-2);margin-right:2px;white-space:nowrap}

/* ---------- fleet + training record ---------- */
.fleet-grid{flex:1;min-height:0;overflow-y:auto;display:grid;
  grid-template-columns:repeat(auto-fit,minmax(320px,1fr));gap:12px;align-content:start;padding-right:6px}
.fleet-card{border:1px solid var(--line);border-radius:5px;padding:12px 14px;background:rgba(14,19,25,.8)}
.fleet-card h4{font-size:14px;margin-bottom:2px}
.fleet-card .cls{font-size:10px;letter-spacing:.12em;color:var(--sand);text-transform:uppercase;margin-bottom:8px}
.fleet-card p{font-size:11.5px;color:var(--dim);line-height:1.5;margin-bottom:8px}
.fleet-specs{display:grid;grid-template-columns:repeat(3,1fr);gap:5px;margin-bottom:8px}
.fleet-specs div{background:rgba(255,255,255,.03);border-radius:3px;padding:4px 6px}
.fleet-specs label{display:block;font-size:8px;letter-spacing:.1em;color:var(--dimmer)}
.fleet-specs b{font-family:var(--mono);font-size:12px;color:var(--accent-2)}
.tr-summary{display:grid;grid-template-columns:repeat(auto-fit,minmax(130px,1fr));gap:10px;margin-bottom:12px;flex:0 0 auto}
.tr-stat{background:rgba(14,19,25,.8);border:1px solid var(--line);border-radius:5px;padding:10px 12px}
.tr-stat label{display:block;font-size:8.5px;letter-spacing:.14em;color:var(--dimmer);margin-bottom:4px}
.tr-stat b{font-family:var(--mono);font-size:21px;font-weight:400;color:var(--accent-2)}
.tr-table{flex:1;min-height:0;overflow-y:auto;padding-right:5px}
table.log{width:100%;border-collapse:collapse;font-size:11.5px}
table.log th{text-align:left;padding:6px 9px;color:var(--dimmer);font-size:8.5px;letter-spacing:.13em;
  border-bottom:1px solid var(--line);font-weight:500;text-transform:uppercase;position:sticky;top:0;background:#080b0f}
table.log td{padding:6px 9px;border-bottom:1px solid rgba(150,175,195,.07);color:#adbdc9}
.gr{font-family:var(--mono);font-weight:600}
.gr.pass{color:var(--good)}.gr.fail{color:var(--bad)}.gr.marg{color:var(--warn)}
.settings-scroll,.free-scroll{flex:1;min-height:0;overflow-y:auto;padding-right:6px}

@media (max-width:1400px){
  .brief-cols{grid-template-columns:1fr 1fr 270px}
  .db-cols{grid-template-columns:1fr 1fr 340px}
  #mission-panel{width:210px}
}
@media (max-width:1150px){
  .brief-cols{grid-template-columns:1fr 260px}
  .brief-col:nth-child(2){display:none}
  .db-cols{grid-template-columns:1fr 320px}
  .db-col:nth-child(2){display:none}
  .pf-body{grid-template-columns:160px 1fr 1fr}
}