:root{
    --bg:#0a0e14;--panel:#10161f;--panel-2:#0d121a;--line:#1d2a38;--line-soft:#16212e;
    --cyan:#3fd0e0;--cyan-dim:#2a7d87;--amber:#f0a830;--amber-dim:#7a5818;
    --green:#5fd97a;--green-dim:#2f7a42;--red:#e8604c;--purple:#9a8cff;
    --ink:#cfe3ee;--ink-dim:#6f8597;--ink-faint:#42566b;
    --mono:"SFMono-Regular",ui-monospace,"Cascadia Code","Roboto Mono",Menlo,Consolas,monospace;
    --sans:"Segoe UI",system-ui,-apple-system,sans-serif;
  }
  *{box-sizing:border-box}
  html,body{margin:0;background:var(--bg);color:var(--ink);font-family:var(--sans);font-size:15px;line-height:1.5}
  body{background-image:radial-gradient(circle at 18% -10%,rgba(63,208,224,.06),transparent 45%),radial-gradient(circle at 90% 0%,rgba(240,168,48,.05),transparent 40%);min-height:100vh}
  .wrap{max-width:1180px;margin:0 auto;padding:22px 20px 90px}
  h1,h2,h3{font-weight:600;margin:0}
  .mono{font-family:var(--mono)}
  header.top{display:flex;align-items:baseline;gap:14px;flex-wrap:wrap;border-bottom:1px solid var(--line);padding-bottom:14px;margin-bottom:20px}
  header.top .glyph{font-family:var(--mono);color:var(--cyan);font-size:13px;letter-spacing:.32em}
  header.top h1{font-size:20px;letter-spacing:.02em}
  header.top .sub{color:var(--ink-dim);font-size:12.5px;font-family:var(--mono);margin-left:auto;letter-spacing:.05em}

  .cols{display:grid;grid-template-columns:1fr 1fr;gap:18px;align-items:start}
  @media(max-width:900px){.cols{grid-template-columns:1fr}}
  .panel{background:linear-gradient(180deg,var(--panel),var(--panel-2));border:1px solid var(--line);border-radius:10px;overflow:hidden}
  .panel .ph{display:flex;align-items:center;gap:10px;padding:11px 15px;border-bottom:1px solid var(--line-soft);background:rgba(63,208,224,.025)}
  .panel .ph .tag{font-family:var(--mono);font-size:10.5px;letter-spacing:.22em;color:var(--cyan-dim)}
  .panel .ph h2{font-size:14px;letter-spacing:.04em}
  .panel .ph .count{margin-left:auto;font-family:var(--mono);font-size:11px;color:var(--ink-dim)}
  .panel .body{padding:15px}

  .shipbar{display:flex;gap:14px;flex-wrap:wrap;align-items:flex-end;margin-bottom:18px;background:var(--panel);border:1px solid var(--line);border-radius:10px;padding:13px 16px}
  .fld{display:flex;flex-direction:column;gap:5px}
  .fld label{font-family:var(--mono);font-size:10px;letter-spacing:.18em;color:var(--ink-dim);text-transform:uppercase}
  input,select{background:#070b11;border:1px solid var(--line);color:var(--ink);border-radius:6px;padding:8px 10px;font-family:var(--mono);font-size:13px;outline:none}
  input:focus,select:focus{border-color:var(--cyan-dim);box-shadow:0 0 0 2px rgba(63,208,224,.12)}
  input.scu{width:104px}input.qty{width:74px}input.reward{width:130px}
  .shipbar .cap{margin-left:auto;text-align:right;font-family:var(--mono)}
  .shipbar .cap .big{font-size:22px;color:var(--cyan)}
  .shipbar .cap.over .big{color:var(--red)}
  .shipbar .cap .lbl{font-size:10px;letter-spacing:.18em;color:var(--ink-dim);text-transform:uppercase}

  button{font-family:var(--sans);cursor:pointer;border-radius:6px;border:1px solid var(--line);background:#0c121b;color:var(--ink);padding:8px 13px;font-size:13px;transition:.12s}
  button:hover{border-color:var(--cyan-dim)}
  button.primary{background:var(--cyan);color:#04161a;border-color:var(--cyan);font-weight:600}
  button.primary:hover{background:#5be0ef}
  button.ghost{background:transparent}
  button.danger:hover{border-color:var(--red);color:var(--red)}
  button:disabled{opacity:.4;cursor:not-allowed}
  .btn-sm{padding:5px 9px;font-size:12px}

  .drop{border:1.5px dashed var(--line);border-radius:9px;padding:20px 16px;text-align:center;color:var(--ink-dim);transition:.15s;cursor:pointer;background:#0a0f16}
  .drop:hover,.drop.hot{border-color:var(--cyan-dim);color:var(--ink);background:rgba(63,208,224,.04)}
  .drop strong{color:var(--cyan)}
  .drop .hint{font-size:12px;margin-top:6px;color:var(--ink-faint)}
  .ocrbar{margin-top:12px;display:none;align-items:center;gap:10px;font-family:var(--mono);font-size:12px;color:var(--amber)}
  .ocrbar.show{display:flex}
  .spin{width:13px;height:13px;border:2px solid var(--amber-dim);border-top-color:var(--amber);border-radius:50%;animation:sp .7s linear infinite}
  @keyframes sp{to{transform:rotate(360deg)}}

  /* contract editor */
  .ced{margin-top:14px;border:1px solid var(--line);border-radius:9px;padding:13px;background:#0a0f17;display:none}
  .ced.show{display:block}
  .ced .row{display:flex;gap:10px;flex-wrap:wrap;align-items:flex-end;margin-bottom:10px}
  .ced h3{font-size:12px;font-family:var(--mono);letter-spacing:.12em;color:var(--cyan-dim);text-transform:uppercase;margin:14px 0 8px}
  .stoprow{display:flex;gap:8px;align-items:center;margin-bottom:7px}
  .stoprow input.loc{flex:1;min-width:120px}
  .stoprow .pill{font-family:var(--mono);font-size:10px;padding:2px 6px;border-radius:4px;white-space:nowrap;min-width:78px;text-align:center}
  .stoprow .pill.ok{background:rgba(95,217,122,.12);color:var(--green)}
  .stoprow .pill.guess{background:rgba(240,168,48,.12);color:var(--amber)}
  .stoprow .pill.none{background:rgba(232,96,76,.12);color:var(--red)}
  .addstop{font-size:12px;color:var(--cyan);background:none;border:1px dashed var(--line);width:100%;padding:6px}
  .cedfoot{display:flex;gap:9px;margin-top:14px}

  /* contracts list */
  .contracts{display:flex;flex-direction:column;gap:10px}
  .ctr{border:1px solid var(--line);border-radius:8px;padding:12px 13px;background:#0b1018;position:relative}
  .ctr .top{display:flex;align-items:center;gap:9px;margin-bottom:8px}
  .ctr .commod{font-family:var(--mono);font-size:14px;color:var(--cyan)}
  .ctr .shape{font-family:var(--mono);font-size:10px;letter-spacing:.1em;color:var(--ink-faint);text-transform:uppercase;margin-left:auto;margin-right:26px}
  .ctr .leg{font-family:var(--mono);font-size:12.5px;display:flex;gap:7px;align-items:baseline;padding:2px 0}
  .ctr .leg .p{color:var(--green);min-width:14px}
  .ctr .leg .d{color:var(--amber);min-width:14px}
  .ctr .leg .body2{color:var(--ink-faint);font-size:11px}
  .ctr .x{position:absolute;top:10px;right:10px}
  .ctr .edit{position:absolute;top:10px;right:38px}
  .empty{color:var(--ink-faint);font-size:13px;text-align:center;padding:24px 10px;font-family:var(--mono)}

  /* plan */
  .nextcard{border:1px solid var(--cyan-dim);border-radius:10px;background:linear-gradient(180deg,rgba(63,208,224,.10),rgba(63,208,224,.02));overflow:hidden;margin-bottom:16px}
  .nextcard .nh{display:flex;align-items:center;gap:9px;padding:9px 15px;background:rgba(63,208,224,.12);border-bottom:1px solid var(--cyan-dim)}
  .nextcard .nh .tag{font-family:var(--mono);font-size:10.5px;letter-spacing:.26em;color:var(--cyan)}
  .nextcard .nh .step{margin-left:auto;font-family:var(--mono);font-size:11px;color:var(--ink-dim)}
  .nextcard .nb{padding:16px 17px}
  .nextcard .action{font-family:var(--mono);font-size:13px;letter-spacing:.12em;text-transform:uppercase;margin-bottom:7px}
  .nextcard .action.collect{color:var(--green)}
  .nextcard .action.deliver{color:var(--amber)}
  .nextcard .action.done{color:var(--cyan)}
  .nextcard .loc{font-size:23px;font-weight:600;line-height:1.2}
  .nextcard .loc .par{color:var(--ink-dim);font-size:14px;font-weight:400}
  .nextcard .man{margin-top:11px;display:flex;flex-direction:column;gap:5px}
  .nextcard .man .ln{font-family:var(--mono);font-size:13px;display:flex;gap:9px;align-items:baseline}
  .nextcard .man .ln .c{color:var(--green)}
  .nextcard .man .ln.d .c{color:var(--amber)}
  .nextcard .ctl{margin-top:15px;display:flex;gap:9px;flex-wrap:wrap}
  .hold{margin-top:13px;border-top:1px solid var(--line-soft);padding-top:11px}
  .hold .hl{font-family:var(--mono);font-size:10px;letter-spacing:.2em;color:var(--ink-dim);text-transform:uppercase;margin-bottom:6px}
  .hold .bar{height:7px;border-radius:4px;background:#0a0f16;overflow:hidden;border:1px solid var(--line)}
  .hold .bar i{display:block;height:100%;background:linear-gradient(90deg,var(--cyan-dim),var(--cyan))}
  .hold .bar i.over{background:linear-gradient(90deg,var(--amber),var(--red))}
  .hold .txt{font-family:var(--mono);font-size:12px;color:var(--ink-dim);margin-top:5px}

  .itin{display:flex;flex-direction:column}
  .stop{display:flex;gap:13px;padding:9px 2px;border-bottom:1px solid var(--line-soft)}
  .stop:last-child{border-bottom:none}
  .stop .idx{font-family:var(--mono);font-size:11px;color:var(--ink-faint);width:22px;flex:none;padding-top:3px}
  .stop .dot{width:9px;height:9px;border-radius:50%;flex:none;margin-top:6px}
  .stop.collect .dot{background:var(--green)}
  .stop.deliver .dot{background:var(--amber)}
  .stop .info{flex:1}
  .stop .info .nm{font-family:var(--mono);font-size:13.5px}
  .stop .info .act{font-size:11.5px;font-family:var(--mono)}
  .stop.collect .act{color:var(--green)}
  .stop.deliver .act{color:var(--amber)}
  .stop.done{opacity:.4}.stop.done .info .nm{text-decoration:line-through}
  .stop .dist{font-family:var(--mono);font-size:11px;color:var(--ink-faint);align-self:center}
  .stop .grip{color:var(--ink-faint);font-size:11px;cursor:grab;letter-spacing:-2px;flex:none;width:14px;opacity:0;transition:opacity .12s}
  .stop:hover .grip{opacity:1}
  .stop[draggable=true]{cursor:default}
  .stop.dragging{opacity:.4}
  .stop.over{box-shadow:inset 0 2px 0 var(--cyan)}
  .stop.broken{background:rgba(232,96,76,.06)}
  .stop.broken .dot{background:var(--red)!important;box-shadow:0 0 0 3px rgba(232,96,76,.15)}
  .stop.grp-top{border-bottom:none;padding-bottom:4px}
  .stop.grp-mid{border-bottom:none;padding-top:4px;padding-bottom:4px}
  .stop.grp-bot{padding-top:4px}
  .stop.grp-top,.stop.grp-mid,.stop.grp-bot{border-left:2px solid var(--line);padding-left:8px;margin-left:2px}
  .warn{margin-top:12px;border:1px solid var(--amber-dim);background:rgba(240,168,48,.07);color:var(--amber);border-radius:7px;padding:9px 12px;font-size:12.5px;font-family:var(--mono)}
  .totbar{display:flex;gap:18px;flex-wrap:wrap;margin-top:13px;font-family:var(--mono);font-size:12px;color:var(--ink-dim)}
  .totbar b{color:var(--ink)}
  .toolbar{display:flex;gap:8px;flex-wrap:wrap;margin-top:20px}
  .foot{margin-top:26px;color:var(--ink-faint);font-size:11.5px;font-family:var(--mono);text-align:center;letter-spacing:.04em}
  datalist{display:none}

/* ============ v3 additions ============ */
/* filter tabs on the route panel */
.rtabs{display:flex;gap:4px;margin-bottom:14px;background:#0a0f16;border:1px solid var(--line);border-radius:8px;padding:3px}
.rtabs button{flex:1;background:transparent;border:none;color:var(--ink-dim);font-family:var(--mono);font-size:11px;letter-spacing:.08em;padding:6px 4px;border-radius:6px;text-transform:uppercase}
.rtabs button.on{background:var(--cyan);color:#04161a;font-weight:600}
.rtabs button:hover:not(.on){color:var(--ink)}
.rtabs .badge{display:inline-block;margin-left:5px;font-size:10px;opacity:.7}

/* collapsible visit group */
.visit{border:1px solid var(--line);border-radius:8px;margin-bottom:8px;overflow:hidden;background:#0b1018}
.visit.done-visit{opacity:.55}
.visit .vhead{display:flex;align-items:center;gap:10px;padding:9px 12px;cursor:pointer;user-select:none}
.visit .vhead:hover{background:rgba(63,208,224,.03)}
.visit .vchev{color:var(--ink-dim);font-size:10px;transition:transform .15s;flex:none}
.visit.collapsed .vchev{transform:rotate(-90deg)}
.visit .vnum{font-family:var(--mono);font-size:11px;color:var(--ink-faint);flex:none;width:22px}
.visit .vdot{width:9px;height:9px;border-radius:50%;flex:none}
.visit .vdot.collect{background:var(--green)}
.visit .vdot.deliver{background:var(--amber)}
.visit .vdot.both{background:var(--purple)}
.visit .vname{font-family:var(--mono);font-size:13.5px;flex:1}
.visit .vmeta{font-family:var(--mono);font-size:10.5px;color:var(--ink-faint)}
.visit .vdist{font-family:var(--mono);font-size:11px;color:var(--ink-faint);flex:none}
.visit .vbody{border-top:1px solid var(--line-soft)}
.visit.collapsed .vbody{display:none}
.visit .vact{display:flex;gap:9px;align-items:center;padding:7px 12px 7px 44px;border-bottom:1px solid var(--line-soft);font-family:var(--mono);font-size:12.5px}
.visit .vact:last-child{border-bottom:none}
.visit .vact.done-act{opacity:.45}
.visit .vact.done-act .lbl{text-decoration:line-through}
.visit .vact.broken{background:rgba(232,96,76,.06)}
.visit .vact .ico{flex:none;width:14px}
.visit .vact.collect .ico{color:var(--green)}
.visit .vact.deliver .ico{color:var(--amber)}
.visit .vact .lbl{flex:1}
.visit .vact .chk{flex:none;width:16px;height:16px;border:1px solid var(--line);border-radius:4px;cursor:pointer;display:flex;align-items:center;justify-content:center;font-size:11px;color:var(--green)}
.visit .vact .chk:hover{border-color:var(--green-dim)}
.visit .vact.done-act .chk{background:rgba(95,217,122,.12);border-color:var(--green-dim)}
.visit .vgrip{color:var(--ink-faint);font-size:11px;cursor:grab;letter-spacing:-2px;flex:none;opacity:0;transition:.12s}
.visit .vhead:hover .vgrip{opacity:.7}
.visit.dragging{opacity:.4}
.visit.dropover{box-shadow:inset 0 3px 0 var(--cyan)}

/* pending-upload queue */
.uploadq{margin-top:12px;display:flex;flex-direction:column;gap:6px}
.uploadq .qitem{display:flex;align-items:center;gap:9px;font-family:var(--mono);font-size:12px;background:#0a0f17;border:1px solid var(--line);border-radius:6px;padding:6px 10px}
.uploadq .qitem .qname{flex:1;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.uploadq .qitem .qstat{font-size:10.5px;letter-spacing:.06em;text-transform:uppercase}
.uploadq .qitem .qstat.waiting{color:var(--ink-faint)}
.uploadq .qitem .qstat.ready{color:var(--amber)}
.uploadq .qitem .qstat.saved{color:var(--green)}
.uploadq .qitem .qstat.current{color:var(--cyan)}
.uploadq .qbar{display:flex;gap:8px;align-items:center;margin-top:4px}

/* data-source pill */
.srcpill{font-family:var(--mono);font-size:10.5px;padding:3px 8px;border-radius:5px;letter-spacing:.05em}
.srcpill.live{background:rgba(95,217,122,.12);color:var(--green)}
.srcpill.model{background:rgba(240,168,48,.10);color:var(--amber)}
.srcpill.loading{background:rgba(63,208,224,.10);color:var(--cyan)}

/* ============ earnings + crew split ============ */
.earn{margin-top:14px;background:#0b1018;border:1px solid var(--line);border-radius:8px;padding:12px 14px;display:flex;flex-direction:column;gap:9px}
.earn .erow{display:flex;align-items:center;gap:12px}
.earn .elabel{font-family:var(--mono);font-size:10.5px;letter-spacing:.08em;text-transform:uppercase;color:var(--ink-dim);flex:none;width:88px}
.earn .etotal{font-family:var(--mono);font-size:16px;color:var(--gold,#d4a94a);font-weight:600}
.earn .crewpick{display:flex;align-items:center;gap:8px;flex:none}
.earn .cbtn{width:24px;height:24px;border:1px solid var(--line);background:#0a0f17;color:var(--ink);border-radius:6px;font-size:15px;line-height:1;cursor:pointer;display:flex;align-items:center;justify-content:center}
.earn .cbtn:hover{border-color:var(--cyan);color:var(--cyan)}
.earn .cnum{font-family:var(--mono);font-size:14px;min-width:22px;text-align:center}
.earn .eper{margin-left:auto;font-family:var(--mono);font-size:15px;color:var(--green);font-weight:600}
.earn .eper .epp{font-size:10px;color:var(--ink-faint);font-weight:400;letter-spacing:.05em}
.earn .ewarn{font-family:var(--mono);font-size:10.5px;color:var(--amber);opacity:.85;border-top:1px solid var(--line-soft);padding-top:8px}

/* ============ screen grab ============ */
.grabrow{display:flex;align-items:center;gap:12px;margin-top:10px}
.grabrow #grabBtn{flex:none}
.grabhint{font-family:var(--mono);font-size:10.5px;color:var(--ink-dim);line-height:1.4}

/* ============ save & share ============ */
.sharebox{display:none;margin-top:12px;background:#0b1018;border:1px solid var(--line);border-radius:8px;padding:12px 14px;flex-direction:column;gap:9px}
.sharebox.show{display:flex}
.sharebox .sline{display:flex;align-items:center;gap:9px;flex-wrap:wrap}
.sharebox .slbl{font-family:var(--mono);font-size:10px;letter-spacing:.06em;text-transform:uppercase;color:var(--ink-dim);flex:none;width:130px}
.sharebox .sinput{flex:1;min-width:180px;background:#0a0f17;border:1px solid var(--line);border-radius:6px;color:var(--cyan);font-family:var(--mono);font-size:11.5px;padding:6px 9px}
.sharebox .snote{font-family:var(--mono);font-size:10.5px;color:var(--ink-faint);line-height:1.5}
.sharebox .serr{font-family:var(--mono);font-size:11.5px;color:var(--red)}
.viewbanner{width:100%;background:rgba(63,208,224,.10);border-bottom:1px solid var(--line);color:var(--cyan);font-family:var(--mono);font-size:12px;text-align:center;padding:8px 12px}
.viewbanner a{color:var(--cyan);font-weight:600}
body.viewonly .drop,body.viewonly .grabrow,body.viewonly .uploadq{display:none}

/* ============ screenshot lightbox ============ */
.ctr .shot{position:absolute;top:10px;right:64px;color:var(--cyan);display:inline-flex;align-items:center;justify-content:center;padding:4px 6px}
.ctr .shot svg{display:block}
.lightbox{position:fixed;inset:0;background:rgba(3,6,10,.88);backdrop-filter:blur(3px);z-index:1000;display:none;align-items:center;justify-content:center;padding:24px}
.lightbox.show{display:flex}
.lightbox .lb-inner{position:relative;max-width:min(1100px,94vw);max-height:92vh;display:flex;flex-direction:column;gap:8px}
.lightbox img{max-width:100%;max-height:86vh;object-fit:contain;border:1px solid var(--line);border-radius:8px;background:#04070c}
.lightbox .lb-cap{font-family:var(--mono);font-size:12px;color:var(--ink-dim);text-align:center}
.lightbox .lb-close{position:absolute;top:-12px;right:-12px;width:32px;height:32px;border-radius:50%;border:1px solid var(--line);background:#0a0f17;color:var(--ink);font-size:15px;cursor:pointer;display:flex;align-items:center;justify-content:center}
.lightbox .lb-close:hover{border-color:var(--red);color:var(--red)}

/* ============ freight elevator indicator ============ */
.elev{display:inline-flex;vertical-align:middle;align-items:center;line-height:0}
.elev svg{display:block}
.elev.ext{color:var(--green)}          /* external / ground-accessible freight elevator */
.elev.int{color:var(--ink-faint)}      /* internal freight elevator only */

/* elevator label alongside the icon */
.elev{gap:3px}
.elev-lbl{font-family:var(--mono);font-size:9px;letter-spacing:.03em;text-transform:uppercase;vertical-align:middle}
.elev.ext .elev-lbl{color:var(--green)}
.elev.int .elev-lbl{color:var(--ink-faint)}

/* ============ view tabs (Route / Cargo layout) ============ */
.viewtabs{display:inline-flex;gap:2px;margin-right:10px;background:var(--panel2,#0d1420);border:1px solid var(--line);border-radius:7px;padding:2px}
.viewtabs .vtab{font-family:var(--mono);font-size:10px;letter-spacing:.04em;text-transform:uppercase;padding:5px 9px;border:0;background:transparent;color:var(--ink-faint);border-radius:5px;cursor:pointer}
.viewtabs .vtab.on{background:var(--cyan);color:#04121a}

/* ============ cargo layout view ============ */
.laywrap{display:flex;flex-direction:column;gap:12px}
.laysum{display:flex;gap:16px;flex-wrap:wrap;font-family:var(--mono);font-size:11px;color:var(--ink-dim)}
.laysum b{color:var(--ink)}
.laylegend{display:flex;flex-direction:column;gap:4px}
.layrow{display:grid;grid-template-columns:auto 1fr auto;gap:8px 12px;align-items:center;padding:6px 8px;border:1px solid var(--line);border-radius:7px}
.layswatch{display:inline-flex;align-items:center;justify-content:center;width:22px;height:22px;border-radius:5px;border:1.5px solid;font-family:var(--mono);font-size:11px;font-weight:600}
.layloc{font-family:var(--mono);font-size:13px;color:var(--ink);display:flex;align-items:center;gap:4px}
.laymeta{font-family:var(--mono);font-size:10px;color:var(--ink-faint);grid-column:2;justify-self:start}
.laycom{font-family:var(--mono);font-size:10px;color:var(--ink-dim);grid-column:3;grid-row:1/3;justify-self:end;text-align:right;max-width:180px}
.layhint{font-family:var(--mono);font-size:10px;color:var(--ink-faint);line-height:1.5}

/* front/back side tags in the cargo layout manifest */
.sidetag{font-family:var(--mono);font-size:8px;letter-spacing:.05em;text-transform:uppercase;padding:2px 5px;border-radius:4px;border:1px solid;margin-left:2px}
.sidetag.front{color:var(--cyan);border-color:var(--cyan)}
.sidetag.back{color:var(--ink-faint);border-color:var(--line)}