:root {
    /* Operator app uses a LIGHT, high-contrast palette — deliberate:
       the app is used outdoors in direct sunlight on cheap LCD screens. */
    --ink: #0d1117;
    --ink-2: #3d444d;
    --ink-3: #6e7681;
    --paper: #ffffff;
    --paper-2: #f4f4f1;
    --paper-3: #e8e8e3;
    --line: #d8d8d2;
    --orange: #d4540f;
    --orange-2: #fff1e8;
    --green: #1a7f4b;
    --green-2: #e6f4ec;
    --amber: #b8860b;
    --amber-2: #fdf4e0;
    --red: #c0392b;
    --red-2: #fdeceb;
    --teal: #1e7a66;

    /* shell */
    --shell-bg: #0b0d12;
    --shell-surface: #12151d;
    --shell-border: #262b38;
    --shell-fg: #f2f3f7;
    --shell-muted: #a7adbc;
    --shell-faint: #6b7385;
    --shell-accent: #ff8149;

    --fd: 'Bricolage Grotesque', sans-serif;
    --fb: 'Inter', sans-serif;
    --fm: 'JetBrains Mono', monospace;
  }

  * { box-sizing: border-box; -webkit-tap-highlight-color: transparent; }
  body {
    margin: 0; background: var(--shell-bg); color: var(--shell-fg);
    font-family: var(--fb); -webkit-font-smoothing: antialiased;
    min-height: 100vh;
  }

  /* ══════ SHELL ══════ */
  .shell {
    display: grid; grid-template-columns: 210px 1fr; min-height: 100vh;
  }
  @media (max-width: 880px) {
    .shell { grid-template-columns: 1fr; }
    .rail { display: none; }
  }

  .rail {
    border-right: 1px solid var(--shell-border);
    padding: 22px 0; overflow-y: auto; height: 100vh; position: sticky; top: 0;
  }
  .rail .brand { padding: 0 20px 16px; border-bottom: 1px solid var(--shell-border); margin-bottom: 14px; }
  .rail .brand .n { font-family: var(--fd); font-weight: 700; font-size: 15px; }
  .rail .brand .s {
    font-family: var(--fm); font-size: 9.5px; color: var(--shell-faint);
    text-transform: uppercase; letter-spacing: 0.12em; margin-top: 3px;
  }
  .rail h5 {
    font-family: var(--fm); font-size: 9px; letter-spacing: 0.16em;
    text-transform: uppercase; color: var(--shell-faint);
    margin: 18px 20px 6px; font-weight: 500;
  }
  .rail a {
    display: block; padding: 7px 20px; font-size: 13px;
    color: var(--shell-muted); text-decoration: none; cursor: pointer;
    border-left: 2px solid transparent;
  }
  .rail a:hover { background: var(--shell-surface); color: var(--shell-fg); }
  .rail a.on { color: var(--shell-accent); border-left-color: var(--shell-accent); background: var(--shell-surface); }
  .rail a .idx { font-family: var(--fm); font-size: 10px; color: var(--shell-faint); margin-right: 8px; }

  /* Text sits in a left column so the phone gets the full viewport height
     without the page scrolling. Phone spans both implicit rows on the right.
     Columns and gaps are fluid so this survives browser zoom — at 125% zoom a
     1280px window reports ~1024 CSS px, which used to trip the stacked fallback. */
  .stage {
    display: grid;
    grid-template-columns: minmax(180px, 380px) auto;
    gap: 0 clamp(22px, 3.4vw, 56px);
    align-items: center;
    justify-content: center;
    align-content: center;
    padding: 16px clamp(16px, 2.6vw, 44px) 80px;
    min-height: 100vh;
  }
  .stage-head { grid-column: 1; text-align: left; }
  .stage-head h1 { font-family: var(--fd); font-size: clamp(23px, 2.3vw, 31px); font-weight: 700; margin: 0 0 9px; letter-spacing: -0.024em; line-height: 1.1; }
  .stage-head p { color: var(--shell-muted); font-size: clamp(13px, 1.1vw, 15px); margin: 0; line-height: 1.55; }
  .stage-head .tag {
    display: inline-block; font-family: var(--fm); font-size: 10.5px;
    letter-spacing: 0.15em; text-transform: uppercase; color: var(--shell-accent);
    margin-bottom: 10px;
  }

  /* 880px is the real floor: 210 rail + 16 pad + 180 text + 22 gap + 370 phone + 16 pad */
  @media (max-width: 880px) {
    .stage {
      grid-template-columns: 1fr; justify-items: center;
      padding: 24px 18px 86px; gap: 14px 0; min-height: 0;
    }
    .stage-head { text-align: center; max-width: 540px; }
    .anno { margin-top: 0 !important; }
  }

  /* ══════ PHONE ══════ */
  .phone {
    grid-column: 2; grid-row: 1 / -1;
    width: 370px;
    /* shrink to fit short viewports rather than forcing the page to scroll */
    height: min(760px, calc(100vh - 118px));
    min-height: 560px;
    background: #1c1f26; border-radius: 44px;
    padding: 11px; box-shadow: 0 30px 70px rgba(0,0,0,0.55), 0 0 0 1px rgba(255,255,255,0.06);
    position: relative; flex-shrink: 0;
  }
  @media (max-width: 880px) { .phone { grid-column: 1; grid-row: auto; height: min(760px, calc(100vh - 150px)); } }
  @media (max-width: 460px) { .phone { width: 100%; max-width: 370px; } }
  .phone .notch {
    position: absolute; top: 11px; left: 50%; transform: translateX(-50%);
    width: 120px; height: 26px; background: #1c1f26; border-radius: 0 0 16px 16px; z-index: 20;
  }
  .viewport {
    width: 100%; height: 100%; background: var(--paper); border-radius: 34px;
    overflow: hidden; position: relative; color: var(--ink);
  }

  .scr { position: absolute; inset: 0; display: none; flex-direction: column; }
  .scr.on { display: flex; }

  /* status bar */
  .sb {
    height: 40px; flex-shrink: 0; display: flex; align-items: flex-end;
    justify-content: space-between; padding: 0 22px 5px;
    font-family: var(--fm); font-size: 11px; color: var(--ink-2); font-weight: 500;
  }
  .sb .r { display: flex; gap: 5px; align-items: center; }

  .body { flex: 1; overflow-y: auto; padding: 8px 22px 22px; display: flex; flex-direction: column; }
  .body.pad0 { padding: 0; }
  .body.mid { justify-content: center; }

  /* typography inside phone */
  .h-xl { font-family: var(--fd); font-size: 30px; font-weight: 700; line-height: 1.1; letter-spacing: -0.025em; margin: 0 0 8px; color: var(--ink); }
  .h-lg { font-family: var(--fd); font-size: 24px; font-weight: 700; line-height: 1.15; letter-spacing: -0.02em; margin: 0 0 8px; color: var(--ink); }
  .h-md { font-family: var(--fd); font-size: 19px; font-weight: 600; margin: 0 0 6px; color: var(--ink); letter-spacing: -0.01em; }
  .txt { font-size: 15px; color: var(--ink-2); line-height: 1.5; margin: 0 0 10px; }
  .txt-sm { font-size: 13px; color: var(--ink-3); line-height: 1.45; margin: 0; }
  .eyebrow {
    font-family: var(--fm); font-size: 10px; letter-spacing: 0.14em;
    text-transform: uppercase; color: var(--ink-3); margin: 0 0 8px;
  }

  /* buttons — deliberately large touch targets */
  .btn {
    display: flex; align-items: center; justify-content: center; gap: 9px;
    width: 100%; min-height: 60px; border-radius: 14px; border: none;
    font-family: var(--fb); font-size: 18px; font-weight: 700;
    background: var(--orange); color: white; cursor: pointer;
    margin-top: 10px; padding: 0 16px;
  }
  .btn:active { transform: scale(0.985); }
  .btn.green { background: var(--green); }
  .btn.ghost { background: var(--paper-2); color: var(--ink); border: 2px solid var(--line); }
  .btn.red { background: var(--red); }
  .btn.sm { min-height: 48px; font-size: 15px; }
  .btn .ico { font-size: 21px; }

  .btn-row { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; margin-top: 10px; }
  .btn-row .btn { margin-top: 0; }

  /* input */
  .field {
    width: 100%; min-height: 62px; border: 2px solid var(--line); border-radius: 13px;
    padding: 0 16px; font-family: var(--fb); font-size: 21px; font-weight: 600;
    color: var(--ink); background: var(--paper); display: flex; align-items: center;
    margin-top: 8px;
  }
  .field.focus { border-color: var(--orange); }
  .field .ph { color: var(--ink-3); font-weight: 400; }

  /* OTP boxes */
  .otp { display: flex; gap: 9px; margin-top: 14px; justify-content: center; }
  .otp span {
    flex: 1; aspect-ratio: 1/1.25; border: 2px solid var(--line); border-radius: 12px;
    display: grid; place-items: center; font-family: var(--fd); font-size: 27px;
    font-weight: 700; color: var(--ink); background: var(--paper);
  }
  .otp span.filled { border-color: var(--orange); background: var(--orange-2); }

  /* keypad */
  .keypad { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; margin-top: auto; padding-top: 14px; }
  .keypad button {
    min-height: 58px; border: none; background: var(--paper-2); border-radius: 12px;
    font-family: var(--fb); font-size: 24px; font-weight: 600; color: var(--ink); cursor: pointer;
  }
  .keypad button:active { background: var(--paper-3); }

  /* big icon block */
  .icoblk { text-align: center; padding: 22px 0; }
  .icoblk .big { font-size: 74px; line-height: 1; margin-bottom: 14px; }
  .icoblk .ring {
    width: 128px; height: 128px; border-radius: 50%; margin: 0 auto 18px;
    display: grid; place-items: center; font-size: 58px;
  }
  .ring.green { background: var(--green-2); color: var(--green); }
  .ring.orange { background: var(--orange-2); color: var(--orange); }
  .ring.amber { background: var(--amber-2); color: var(--amber); }
  .ring.red { background: var(--red-2); color: var(--red); }

  /* card */
  .card {
    border: 2px solid var(--line); border-radius: 16px; padding: 16px;
    margin-top: 12px; background: var(--paper);
  }
  .card.filled { background: var(--paper-2); border-color: var(--paper-3); }
  .card.hi { border-color: var(--orange); background: var(--orange-2); }
  .card.ok { border-color: var(--green); background: var(--green-2); }
  .card .row { display: flex; justify-content: space-between; align-items: baseline; gap: 10px; padding: 7px 0; }
  .card .row + .row { border-top: 1px solid var(--line); }
  .card .row .k { font-size: 13px; color: var(--ink-3); }
  .card .row .v { font-size: 16px; color: var(--ink); font-weight: 600; text-align: right; }
  .card .row .v.big { font-family: var(--fd); font-size: 24px; font-weight: 700; }

  /* progress dots */
  .dots { display: flex; gap: 7px; justify-content: center; margin: 14px 0; }
  .dots i { width: 9px; height: 9px; border-radius: 50%; background: var(--paper-3); }
  .dots i.on { background: var(--orange); }
  .dots i.done { background: var(--green); }

  /* camera viewfinder */
  .cam { flex: 1; background: #22252c; position: relative; display: flex; flex-direction: column; }
  .cam .scene {
    flex: 1; display: grid; place-items: center; position: relative;
    background: repeating-linear-gradient(115deg, #2a2d35 0 22px, #262930 22px 44px);
  }
  .cam .sack {
    width: 165px; height: 195px; background: linear-gradient(160deg,#b8a882,#9d8f6d);
    border-radius: 10px 10px 16px 16px; position: relative;
    box-shadow: 0 16px 34px rgba(0,0,0,0.45); display: grid; place-items: center;
  }
  .cam .sack::before {
    content: ''; position: absolute; top: 9px; left: 50%; transform: translateX(-50%);
    width: 66px; height: 9px; background: #8a7d5e; border-radius: 4px;
  }
  .cam .sack .written {
    font-family: 'Bricolage Grotesque', cursive; font-size: 20px; font-weight: 700;
    color: #1f1a10; transform: rotate(-4deg); letter-spacing: 0.5px;
    border-bottom: 2px solid rgba(31,26,16,0.35); padding-bottom: 2px;
  }
  .cam .guide {
    position: absolute; inset: 15% 12%; border: 3px solid rgba(255,255,255,0.75);
    border-radius: 14px; pointer-events: none;
  }
  .cam .guide.ok { border-color: #4ade80; box-shadow: 0 0 0 4px rgba(74,222,128,0.2); }
  .cam .guide.warn { border-color: #fbbf24; box-shadow: 0 0 0 4px rgba(251,191,36,0.2); }
  .cam .guide::before, .cam .guide::after {
    content: ''; position: absolute; width: 26px; height: 26px; border: 4px solid inherit;
  }
  .cam .prompt {
    position: absolute; left: 0; right: 0; bottom: 96px; text-align: center; padding: 0 20px;
  }
  .cam .prompt .bubble {
    display: inline-flex; align-items: center; gap: 10px;
    background: rgba(13,17,23,0.9); color: white; padding: 13px 22px;
    border-radius: 30px; font-size: 21px; font-weight: 700;
    backdrop-filter: blur(8px);
  }
  .cam .prompt .bubble.ok { background: rgba(26,127,75,0.94); }
  .cam .prompt .bubble.warn { background: rgba(184,134,11,0.94); }
  .cam .shutter {
    height: 96px; flex-shrink: 0; display: grid; place-items: center;
    background: rgba(13,17,23,0.55);
  }
  .cam .shutter .ring {
    width: 66px; height: 66px; border-radius: 50%; border: 4px solid white;
    display: grid; place-items: center; cursor: pointer; background: transparent;
  }
  .cam .shutter .ring i { width: 50px; height: 50px; border-radius: 50%; background: white; display: block; }
  .cam .topbar {
    position: absolute; top: 0; left: 0; right: 0; padding: 14px 18px;
    display: flex; justify-content: space-between; align-items: center;
    color: white; font-size: 14px; font-weight: 600; z-index: 5;
    background: linear-gradient(rgba(13,17,23,0.65), transparent);
  }

  /* voice indicator */
  .voice {
    display: inline-flex; align-items: center; gap: 7px;
    font-size: 12px; color: var(--ink-3); font-family: var(--fm);
    margin-top: 8px;
  }
  .voice .wave { display: flex; gap: 2px; align-items: flex-end; height: 13px; }
  .voice .wave i { width: 3px; background: var(--orange); border-radius: 2px; animation: w 0.9s ease-in-out infinite; }
  .voice .wave i:nth-child(1) { height: 6px; animation-delay: 0s; }
  .voice .wave i:nth-child(2) { height: 12px; animation-delay: 0.15s; }
  .voice .wave i:nth-child(3) { height: 8px; animation-delay: 0.3s; }
  @keyframes w { 0%,100%{transform:scaleY(0.4)} 50%{transform:scaleY(1)} }

  /* top nav inside app */
  .appbar {
    display: flex; align-items: center; gap: 12px; padding: 4px 0 12px;
  }
  .appbar .back { font-size: 24px; color: var(--ink-2); cursor: pointer; line-height: 1; }
  .appbar .title { font-family: var(--fd); font-size: 17px; font-weight: 600; }

  /* list rows */
  .lrow { display: flex; gap: 13px; align-items: center; padding: 14px 0; border-bottom: 1px solid var(--line); }
  .lrow:last-child { border-bottom: none; }
  /* .av is also used standalone (e.g. the profile chip in a header), so it
     must not depend on being inside .lrow */
  .av {
    width: 46px; height: 46px; border-radius: 50%; background: var(--paper-2);
    display: grid; place-items: center; font-family: var(--fd); font-weight: 700;
    font-size: 16px; color: var(--ink-2); flex-shrink: 0;
  }
  .av.green { background: var(--green-2); color: var(--green); }
  .lrow .main { flex: 1; min-width: 0; }
  /* .t and .s are spans — without display:block they run together on one line */
  .lrow .main .t { display: block; font-size: 15px; font-weight: 600; color: var(--ink); line-height: 1.3; }
  .lrow .main .s { display: block; font-size: 12.5px; color: var(--ink-3); margin-top: 2px; line-height: 1.35; }
  .lrow .end { font-size: 14px; font-weight: 700; color: var(--ink); }

  /* timer bar */
  .timer { height: 7px; background: var(--paper-3); border-radius: 4px; overflow: hidden; margin: 12px 0; }
  .timer i { display: block; height: 100%; background: var(--orange); width: 62%; }

  /* badge */
  .bdg {
    display: inline-block; font-size: 11px; font-weight: 700; padding: 4px 10px;
    border-radius: 20px; font-family: var(--fm); letter-spacing: 0.04em;
  }
  .bdg.green { background: var(--green-2); color: var(--green); }
  .bdg.amber { background: var(--amber-2); color: var(--amber); }
  .bdg.orange { background: var(--orange-2); color: var(--orange); }

  /* spinner */
  .spin {
    width: 52px; height: 52px; border: 5px solid var(--paper-3);
    border-top-color: var(--orange); border-radius: 50%;
    animation: sp 0.9s linear infinite; margin: 0 auto 18px;
  }
  @keyframes sp { to { transform: rotate(360deg) } }

  /* map placeholder */
  .map {
    height: 190px; border-radius: 16px; margin-top: 12px; position: relative;
    background:
      linear-gradient(rgba(212,84,15,0.05), rgba(212,84,15,0.05)),
      repeating-linear-gradient(0deg, var(--paper-2) 0 1px, transparent 1px 30px),
      repeating-linear-gradient(90deg, var(--paper-2) 0 1px, transparent 1px 30px),
      var(--paper);
    border: 2px solid var(--line); overflow: hidden;
  }
  .map .route {
    position: absolute; top: 50%; left: 14%; right: 14%; height: 4px;
    background: var(--orange); border-radius: 2px;
  }
  .map .pin {
    position: absolute; top: 50%; transform: translate(-50%,-50%);
    width: 17px; height: 17px; border-radius: 50%; border: 4px solid white;
    box-shadow: 0 2px 8px rgba(0,0,0,0.25);
  }
  .map .pin.a { left: 14%; background: var(--green); }
  .map .pin.b { left: 86%; background: var(--red); }
  .map .pin.me { left: 48%; background: var(--orange); width: 21px; height: 21px; }

  /* ══════ HUD ══════ */
  .hud {
    position: fixed; bottom: 0; left: 0; right: 0; z-index: 60;
    background: rgba(11,13,18,0.94); backdrop-filter: blur(12px);
    border-top: 1px solid var(--shell-border);
    padding: 12px 20px; display: flex; align-items: center; justify-content: center; gap: 12px;
  }
  .hud button {
    background: var(--shell-surface); border: 1px solid var(--shell-border);
    color: var(--shell-muted); padding: 9px 16px; border-radius: 8px;
    font-family: var(--fb); font-size: 13.5px; font-weight: 600; cursor: pointer;
  }
  .hud button:hover { color: var(--shell-fg); border-color: var(--shell-faint); }
  .hud button.primary { background: var(--shell-accent); border-color: var(--shell-accent); color: #0b0d12; }
  .hud .pos { font-family: var(--fm); font-size: 12px; color: var(--shell-faint); min-width: 74px; text-align: center; }

  /* annotation */
  .anno {
    grid-column: 1; margin-top: 18px;
    background: var(--shell-surface); border: 1px solid var(--shell-border);
    border-left: 3px solid var(--shell-accent); border-radius: 10px; padding: 14px 18px;
    display: none;
  }
  .anno.on { display: block; }
  .anno .l {
    font-family: var(--fm); font-size: 9.5px; letter-spacing: 0.14em;
    text-transform: uppercase; color: var(--shell-accent); margin: 0 0 6px;
  }
  .anno p { font-size: 13.5px; color: var(--shell-muted); margin: 0; line-height: 1.55; }

  /* ---------- BACK TO INDEX ---------- */
  .rail .home {
    display: flex; align-items: center; gap: 7px;
    margin: 0 14px 12px; padding: 7px 10px;
    font-family: var(--fb); font-size: 12px; font-weight: 600;
    color: var(--shell-muted); text-decoration: none;
    background: var(--shell-surface); border: 1px solid var(--shell-border);
    border-radius: 7px;
  }
  .rail .home:hover { color: var(--shell-fg); border-color: var(--shell-faint); }
  .rail .home .ar { font-size: 14px; line-height: 1; }

  /* mobile: a floating pill, since the rail is hidden */
  .home-fab {
    display: none; position: fixed; top: 12px; left: 12px; z-index: 70;
    align-items: center; gap: 6px; padding: 8px 13px;
    background: rgba(18,21,29,.94); border: 1px solid var(--shell-border);
    border-radius: 20px; font-size: 12px; font-weight: 600;
    color: var(--shell-muted); text-decoration: none; backdrop-filter: blur(8px);
  }
  @media (max-width: 880px) { .home-fab { display: inline-flex; } }

  /* ---------- MAPS ---------- */
  /* .map keeps its CSS-drawn look as the fallback. When Google Maps mounts we
     hide the hand-drawn bits and let the real tiles show through. */
  .map.map-live { background: var(--paper-2); }
  .map.map-live .route,
  .map.map-live .pin { display: none; }
  .map .gm-style img { max-width: none; }
  .ks-map-label { text-shadow: 0 1px 3px rgba(255,255,255,.9); }