:root{
    --navy:#0b2a3d;        /* deep marine navy */
    --navy-2:#123a52;
    --steel:#3a5a6e;
    --verdigris:#2e8a8f;   /* weathered-copper marine accent */
    --verdigris-dk:#1f6a6e;
    --brass:#c8973f;       /* brass/gold highlight */
    --shell:#f4f1ea;       /* oyster-shell surface */
    --shell-2:#e9e4d8;
    --ink:#16242c;
    --muted:#5f7280;
    --line:#d5cec0;
    --open:#2e8b57;        /* status green */
    --closed:#b23b3b;      /* status red */
    --amber:#d9a441;
    --white-tag:#ffffff;
    --red-tag:#c0392b;
    --green-tag:#3a7d44;
    --shadow:0 8px 30px rgba(11,42,61,.14);
    --radius:10px;
    --font: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
    --mono: "SF Mono", "Cascadia Mono", ui-monospace, Menlo, Consolas, monospace;
  }
  *{box-sizing:border-box}
  html,body{margin:0;padding:0}
  body{
    font-family:var(--font);
    color:var(--ink);
    background:var(--shell);
    -webkit-font-smoothing:antialiased;
  }
  button{font-family:inherit}

  /* ---------- Prototype banner ---------- */
  .proto-banner{
    background:repeating-linear-gradient(45deg,#1a1a1a,#1a1a1a 12px,#262626 12px,#262626 24px);
    color:#f4d47a;font-size:12px;letter-spacing:.14em;text-transform:uppercase;
    text-align:center;padding:5px 10px;font-weight:600;
  }

  /* ---------- Top shell ---------- */
  header.shell{
    background:var(--navy);color:#eef4f5;
    display:flex;align-items:center;gap:18px;
    padding:10px 20px;position:sticky;top:0;z-index:40;
    border-bottom:3px solid var(--brass);
  }
  .brand{display:flex;align-items:center;gap:12px;min-width:230px}
  .brand .seal-img{width:40px;height:40px;flex:none;display:block}
  .brand h1{font-size:15px;margin:0;line-height:1.1;letter-spacing:.02em}
  .brand span{font-size:11px;color:#93b4bf;letter-spacing:.1em;text-transform:uppercase}

  nav.roles{display:flex;gap:4px;flex-wrap:wrap;flex:1}
  nav.roles button{
    background:transparent;color:#b9cfd7;border:1px solid transparent;
    padding:8px 14px;border-radius:8px;font-size:13.5px;font-weight:600;cursor:pointer;
    letter-spacing:.01em;transition:.15s;
  }
  nav.roles button:hover{background:var(--navy-2);color:#fff}
  nav.roles button.active{background:var(--verdigris);color:#fff;box-shadow:0 2px 10px rgba(46,138,143,.4)}

  .stationpick{display:flex;align-items:center;gap:8px;font-size:12.5px;color:#a9c4cd}
  .stationpick select{
    background:var(--navy-2);color:#eef4f5;border:1px solid var(--steel);
    border-radius:7px;padding:6px 8px;font-size:12.5px;
  }

  /* ---------- Layout ---------- */
  main{max-width:1180px;margin:0 auto;padding:26px 20px 70px}
  .view{display:none;animation:fade .25s ease}
  .view.active{display:block}
  @keyframes fade{from{opacity:0;transform:translateY(6px)}to{opacity:1;transform:none}}

  .view-head{display:flex;align-items:flex-end;justify-content:space-between;margin-bottom:18px;gap:16px;flex-wrap:wrap}
  .view-head h2{margin:0;font-size:23px;letter-spacing:-.01em;color:var(--navy)}
  .view-head .eyebrow{font-size:11.5px;letter-spacing:.16em;text-transform:uppercase;color:var(--verdigris-dk);font-weight:700;margin-bottom:4px}
  .view-head p{margin:6px 0 0;color:var(--muted);font-size:13.5px;max-width:560px}

  .card{background:#fff;border:1px solid var(--line);border-radius:var(--radius);box-shadow:var(--shadow)}
  .pad{padding:20px 22px}

  /* ---------- Buttons ---------- */
  .btn{border:none;border-radius:8px;padding:11px 18px;font-size:14px;font-weight:600;cursor:pointer;transition:.15s;letter-spacing:.01em}
  .btn.primary{background:var(--verdigris);color:#fff}
  .btn.primary:hover{background:var(--verdigris-dk)}
  .btn.dark{background:var(--navy);color:#fff}
  .btn.dark:hover{background:var(--navy-2)}
  .btn.ghost{background:transparent;color:var(--steel);border:1px solid var(--line)}
  .btn.ghost:hover{background:var(--shell)}
  .btn.brass{background:var(--brass);color:#3a2a08}
  .btn.brass:hover{filter:brightness(1.05)}
  .btn:disabled{opacity:.45;cursor:not-allowed}
  .btn.lg{padding:15px 26px;font-size:16px}

  /* ================= KIOSK ================= */
  /* The old small "device frame" (.kiosk-frame/.kiosk-screen/.kiosk-top/.kstep/.scan-hero/
     .scan-target/.lang-switch/.lang-row/.two/.kiosk-actions/.success-hero, plus the already-dead
     .region-bar/.minimap/.reset-note) is gone as of 2026-09-23 — Kiosk.razor now uses its own
     full-width layout in Kiosk.razor.css (component-scoped), reusing only the shared primitives
     below that other pages also depend on. */

  .lic-panel{background:#fff;border:1px solid var(--line);border-radius:12px;overflow:hidden;margin-bottom:16px}
  .lic-panel .hd{background:var(--navy);color:#fff;padding:10px 16px;font-size:13px;font-weight:700;letter-spacing:.05em;display:flex;justify-content:space-between;align-items:center}
  .lic-grid{display:grid;grid-template-columns:1fr 1fr;gap:1px;background:var(--line)}
  .lic-grid .f{background:#fff;padding:10px 14px}
  .lic-grid .f label{display:block;font-size:10.5px;letter-spacing:.08em;text-transform:uppercase;color:var(--muted);margin-bottom:2px}
  .lic-grid .f b{font-size:14.5px;color:var(--ink)}
  .expired-warn{background:#fdecec;border:1px solid #f0b4b4;color:#a03030;padding:10px 14px;border-radius:8px;font-size:13px;margin-bottom:14px;display:flex;gap:8px;align-items:center;font-weight:600}

  .kform label.top{display:block;font-size:12px;font-weight:700;color:var(--navy);margin:14px 0 6px;letter-spacing:.02em}
  .kform select,.kform input{width:100%;padding:11px 12px;border:1px solid var(--line);border-radius:9px;font-size:15px;background:#fff;color:var(--ink)}
  .kform input:focus,.kform select:focus{outline:none;border-color:var(--verdigris);box-shadow:0 0 0 3px rgba(46,138,143,.15)}
  .stepper{display:flex;align-items:center;gap:0;border:1px solid var(--line);border-radius:9px;overflow:hidden;width:fit-content}
  .stepper button{width:46px;height:46px;border:none;background:var(--shell);font-size:20px;cursor:pointer;color:var(--navy)}
  .stepper button:hover{background:var(--shell-2)}
  .stepper .val{width:60px;text-align:center;font-size:18px;font-weight:700}
  .hint{font-size:12px;color:var(--muted);margin-top:4px}

  /* ================= TABLES / GRID ================= */
  .statbar{display:grid;grid-template-columns:repeat(4,1fr);gap:14px;margin-bottom:20px}
  .stat{background:#fff;border:1px solid var(--line);border-radius:var(--radius);padding:16px 18px;box-shadow:var(--shadow)}
  .stat .k{font-size:11px;letter-spacing:.1em;text-transform:uppercase;color:var(--muted);font-weight:700}
  .stat .v{font-size:30px;font-weight:700;color:var(--navy);margin-top:4px;line-height:1}
  .stat .sub{font-size:12px;color:var(--verdigris-dk);margin-top:4px;font-weight:600}

  table.grid{width:100%;border-collapse:collapse;font-size:13.5px}
  table.grid thead th{
    text-align:left;padding:11px 14px;background:var(--navy);color:#dbe7eb;
    font-size:11px;letter-spacing:.06em;text-transform:uppercase;font-weight:700;position:sticky;top:0
  }
  table.grid tbody td{padding:11px 14px;border-bottom:1px solid var(--shell-2)}
  table.grid tbody tr{cursor:pointer;transition:.12s}
  table.grid tbody tr:hover{background:var(--shell)}

  /* Dealer Portal's ticket table (2026-09-29): headers like "License #"/"Dealer Sacks" were
     wrapping to two lines as the columns narrowed against the sack-count/price inputs+Save
     buttons packed into two of them, and the card had nothing to let the table scroll instead
     of clipping when it needed more width than the viewport had. Scoped to .dealer-tickets, not
     table.grid generally, since other pages' grids haven't shown this problem and a global
     nowrap could hide a header that's genuinely meant to wrap elsewhere. */
  .table-scroll{overflow-x:auto}
  table.dealer-tickets thead th{white-space:nowrap}
  table.grid tbody tr.done{opacity:.5}
  .pill{display:inline-flex;align-items:center;gap:5px;font-size:11px;font-weight:700;padding:3px 9px;border-radius:20px;letter-spacing:.03em}
  .pill.out{background:#e5f0f1;color:var(--verdigris-dk)}
  .pill.pend{background:#fbf1dc;color:#8a6417}
  .pill.done{background:#e3f1e8;color:#276b45}
  .pill.void{background:#f2e3e3;color:#9a3838}
  .gear-tag{font-family:var(--mono);font-size:12px;color:var(--steel)}
  .toolbar{display:flex;gap:10px;align-items:center;margin-bottom:14px;flex-wrap:wrap}
  .toolbar input[type=text]{padding:9px 12px;border:1px solid var(--line);border-radius:8px;font-size:13px;min-width:200px}
  .toolbar .spacer{flex:1}

  /* ================= MODAL ================= */
  .overlay{position:fixed;inset:0;background:rgba(11,42,61,.55);backdrop-filter:blur(2px);z-index:60;display:none;align-items:flex-start;justify-content:center;padding:34px 16px;overflow:auto}
  .overlay.on{display:flex}
  .modal{background:var(--shell);border-radius:14px;max-width:760px;width:100%;box-shadow:0 30px 80px rgba(0,0,0,.4);overflow:hidden;animation:pop .2s ease}
  @keyframes pop{from{transform:scale(.97);opacity:0}to{transform:scale(1);opacity:1}}
  .modal .mhd{background:var(--navy);color:#fff;padding:16px 22px;display:flex;justify-content:space-between;align-items:center}
  .modal .mhd h3{margin:0;font-size:17px}
  .modal .mhd .tt-no{font-family:var(--mono);font-size:12px;color:#9fc0c9}
  .modal .mhd button{background:transparent;border:none;color:#cfe0e5;font-size:22px;cursor:pointer;line-height:1}
  .modal .mbody{padding:22px;max-height:70vh;overflow:auto}

  .tt-section{background:#fff;border:1px solid var(--line);border-radius:10px;margin-bottom:16px;overflow:hidden}
  .tt-section .sh{padding:9px 16px;background:var(--shell-2);font-size:11px;letter-spacing:.08em;text-transform:uppercase;font-weight:700;color:var(--steel);display:flex;justify-content:space-between}
  .tt-fields{display:grid;grid-template-columns:1fr 1fr 1fr;gap:1px;background:var(--line)}
  .tt-fields.summary-block{margin-top:10px;border-top:1px dashed var(--line);padding-top:10px}
  .tt-fields .f{background:#fff;padding:9px 14px}
  .tt-fields .f label{display:block;font-size:10px;letter-spacing:.06em;text-transform:uppercase;color:var(--muted)}
  .tt-fields .f b{font-size:14px}
  .tt-fields .f.auto{background:#f7faf7}
  /* One reef's own total-sacks row, distinguished from its dealer/harvester/personal detail rows
     below it (2026-09-17: "not easy to differentiate between different area/reef breakdowns...
     the first line... should be a different background color"), same rule-precedence trick as
     .f.auto above (equal specificity, later in the sheet wins) rather than a :first-child selector
     — this is one specific row Razor marks explicitly, not "whichever row happens to be first". */
  .tt-fields .f.header-row{background:#dbe6ee}
  .entry-row{display:grid;grid-template-columns:1.4fr 1fr;gap:12px;padding:12px 16px;align-items:center;border-bottom:1px solid var(--shell-2)}
  .entry-row:last-child{border:none}
  .entry-row label{font-size:13px;font-weight:600}
  .entry-row .sub{font-size:11.5px;color:var(--muted);font-weight:400}
  .entry-row input,.entry-row select{padding:9px 11px;border:1px solid var(--line);border-radius:8px;font-size:14px;width:100%}
  .entry-row input:focus,.entry-row select:focus{outline:none;border-color:var(--verdigris)}

  .sack-alloc{display:grid;grid-template-columns:repeat(3,1fr);gap:10px;padding:14px 16px}
  .sack-alloc .sa{border:1px solid var(--line);border-radius:9px;padding:10px;text-align:center}
  .sack-alloc .sa label{display:block;font-size:11px;color:var(--muted);text-transform:uppercase;letter-spacing:.04em;margin-bottom:6px;font-weight:700}
  .sack-alloc .sa input{width:60px;text-align:center;padding:7px;border:1px solid var(--line);border-radius:7px;font-size:16px;font-weight:700}

  .fee-box{background:var(--navy);color:#fff;border-radius:10px;padding:16px 20px;margin-top:6px}
  .fee-line{display:flex;justify-content:space-between;padding:5px 0;font-size:13.5px;color:#cfe0e5}
  .fee-line b{color:#fff}
  .fee-total{display:flex;justify-content:space-between;border-top:1px solid #2c4d5f;margin-top:8px;padding-top:10px;font-size:20px;font-weight:700}
  .fee-total .amt{color:var(--brass)}
  .change-row{display:flex;gap:10px;align-items:center;margin-top:12px;background:#0f3346;border-radius:8px;padding:10px 14px}
  .change-row label{font-size:12px;color:#9fc0c9}
  .change-row input{width:100px;padding:7px 10px;border-radius:7px;border:1px solid var(--steel);background:#0b2a3d;color:#fff;font-size:15px;font-family:var(--mono)}
  .change-row .due{margin-left:auto;font-weight:700;font-size:16px}

  /* tag previews */
  .tag-preview{display:flex;gap:10px;flex-wrap:wrap;padding:14px 16px}
  /* v2.3: multi-dealer allocations */
  .alloc-block{padding:14px 16px;border-top:1px solid var(--line);background:#fbfaf6}
  .alloc-block .sh{display:flex;justify-content:space-between;align-items:center;
    font-size:11px;letter-spacing:.7px;text-transform:uppercase;color:var(--muted);
    font-weight:700;margin-bottom:10px;padding:0}
  .alloc-row{display:grid;grid-template-columns:auto 1.5fr .7fr .8fr 1.3fr auto;gap:9px;
    align-items:end;background:#fff;border:1px solid var(--line);border-radius:8px;
    padding:10px 12px;margin-bottom:8px}
  .alloc-row .an{font-family:var(--mono);font-size:10.5px;color:var(--muted);
    white-space:nowrap;padding-bottom:8px;font-weight:700}
  .alloc-row .af{display:flex;flex-direction:column;gap:3px;min-width:0}
  .alloc-row .af label{font-size:10px;text-transform:uppercase;letter-spacing:.5px;
    color:var(--muted);font-weight:700}
  .alloc-row .af input,.alloc-row .af select{width:100%;padding:6px 8px;font-size:12.5px;
    border:1px solid var(--line);border-radius:6px;font-family:inherit}
  .alloc-row .alloc-x{background:none;border:none;color:var(--muted);font-size:19px;
    cursor:pointer;line-height:1;padding:0 2px 6px}
  .alloc-row .alloc-x:hover{color:var(--closed)}
  .dealer-batch{border-top:1px dashed var(--line);padding-top:4px}
  .dealer-batch:first-child{border-top:none}
  .dealer-batch .dbh{display:flex;justify-content:space-between;align-items:baseline;
    gap:10px;flex-wrap:wrap;padding:10px 16px 0;font-size:12.5px}
  .dealer-batch .dbh span{font-family:var(--mono);font-size:11px;color:var(--muted)}
  .tag{width:120px;border-radius:8px;padding:10px;font-size:9px;line-height:1.25;border:1px solid rgba(0,0,0,.15);box-shadow:0 3px 8px rgba(0,0,0,.12);position:relative}
  .tag.white{background:#fff;color:#222}
  .tag.red{background:var(--red-tag);color:#fff}
  .tag.green{background:var(--green-tag);color:#fff}
  .tag .tno{font-family:var(--mono);font-size:11px;font-weight:700;margin-bottom:4px}
  .tag .ttl{font-weight:700;font-size:9.5px;margin-bottom:3px}
  .tag .meta{opacity:.85}
  .tag .qty{font-size:9.5px;margin-bottom:3px;opacity:.85}
  .modal .mfoot{display:flex;gap:12px;padding:16px 22px;background:#fff;border-top:1px solid var(--line);justify-content:flex-end}

  /* ================= DASHBOARD ================= */
  .quota-card{background:#fff;border:1px solid var(--line);border-radius:var(--radius);padding:18px 20px;box-shadow:var(--shadow)}
  .quota-row{margin-bottom:15px}
  .quota-row:last-child{margin-bottom:0}
  .quota-row .top{display:flex;justify-content:space-between;font-size:13px;margin-bottom:5px}
  .quota-row .top b{color:var(--navy)}
  .quota-row .top .pct{font-weight:700;font-family:var(--mono)}
  .bar{height:12px;background:var(--shell-2);border-radius:20px;overflow:hidden}
  .bar span{display:block;height:100%;border-radius:20px;transition:width .6s ease}
  .grid2{display:grid;grid-template-columns:1.3fr 1fr;gap:18px}
  .grid2b{display:grid;grid-template-columns:1fr 1fr;gap:18px;margin-top:18px}
  .legend{display:flex;gap:16px;margin-top:8px;font-size:12px;color:var(--muted)}
  .legend i{width:11px;height:11px;border-radius:3px;display:inline-block;margin-right:5px;vertical-align:-1px}
  .sectiontitle{font-size:12px;letter-spacing:.1em;text-transform:uppercase;color:var(--steel);font-weight:700;margin:0 0 12px}
  .mplist{list-style:none;padding:0;margin:0}
  .mplist li{display:flex;justify-content:space-between;padding:8px 0;border-bottom:1px solid var(--shell-2);font-size:13.5px}
  .mplist li b{color:var(--navy)}

  /* ================= MAP ================= */
  .maplegend{display:flex;gap:18px;margin-bottom:14px;font-size:13px;align-items:center}
  .maplegend i{width:14px;height:14px;border-radius:4px;display:inline-block;margin-right:6px;vertical-align:-2px}
  .areagrid{display:grid;grid-template-columns:repeat(auto-fill,minmax(220px,1fr));gap:14px}
  .areacard{background:#fff;border:1px solid var(--line);border-left:5px solid var(--open);border-radius:10px;padding:14px 16px;box-shadow:var(--shadow)}
  .areacard.closed{border-left-color:var(--closed)}
  .areacard .ah{display:flex;justify-content:space-between;align-items:center;margin-bottom:8px}
  .areacard .ah b{font-size:15px;color:var(--navy)}
  .areacard .reefs{font-size:12.5px;color:var(--muted);line-height:1.5;margin-bottom:12px}
  .areacard .status-toggle{display:flex;align-items:center;gap:8px;font-size:12px}
  .switch{width:44px;height:24px;border-radius:20px;background:var(--closed);position:relative;cursor:pointer;transition:.2s;flex:none}
  .switch.on{background:var(--open)}
  .switch b{position:absolute;top:2px;left:2px;width:20px;height:20px;border-radius:50%;background:#fff;transition:.2s}
  .switch.on b{left:22px}
  .hist{font-size:11px;color:var(--muted);margin-top:8px;font-family:var(--mono)}

  /* ================= DEALER ================= */
  .dealer-head{display:flex;flex-wrap:wrap;gap:10px;justify-content:space-between;align-items:center;background:#fff;border:1px solid var(--line);border-radius:10px;padding:14px 20px;margin-bottom:18px;box-shadow:var(--shadow)}
  .dealer-head .who b{font-size:16px;color:var(--navy)}
  .dealer-head .who span{font-size:12.5px;color:var(--muted)}

  .note{background:#fbf6e9;border:1px solid #e6d6a8;border-radius:8px;padding:10px 14px;font-size:12.5px;color:#7a6114;margin-top:14px}
  .footer-note{text-align:center;color:var(--muted);font-size:12px;margin-top:40px}
  @media(max-width:760px){
    .statbar,.tt-fields,.sack-alloc{grid-template-columns:1fr 1fr}
    .cfg-grid-3{grid-template-columns:1fr}
    .alloc-row{grid-template-columns:1fr 1fr}
    .alloc-row .an{grid-column:1/-1;padding-bottom:0}
    .grid2,.grid2b,.two{grid-template-columns:1fr}
    nav.roles{order:3;width:100%}
    .brand{min-width:0}
  }
  :focus-visible{outline:3px solid var(--brass);outline-offset:2px}
  /* Blazor gives the heading it focuses after navigation tabindex="-1". It is not a control, so no focus box around it;
     real controls keep the ring above. */
  [tabindex="-1"]:focus-visible{outline:none}

  /* ================= v2 ADDITIONS (Glover notes) ================= */
  .btn.sm{padding:8px 13px;font-size:12.5px}
  .btn.tiny{padding:5px 11px;font-size:11.5px;border-radius:6px}
  .checkin-chip{display:flex;align-items:center;justify-content:center;gap:6px;background:#fff3cd;border:1px solid #e6b800;color:#6b4e00;font-size:14px;font-weight:700;padding:10px 14px;border-radius:10px;margin-top:12px;box-shadow:0 1px 3px rgba(0,0,0,.08)}
  table.grid tbody tr.dimmed{opacity:.5;background:var(--shell)}
  table.grid tbody tr.dimmed:hover{background:var(--shell-2)}
  .validation-msg{padding:10px 16px;font-size:12.5px;font-weight:600;color:#9a3838;background:#fdecec;border:1px solid #f0b4b4;border-radius:8px;margin:0 0 12px}
  .validation-msg.ok{color:#276b45;background:#e9f5ee;border-color:#bfe3cc}
  .sack-alloc .sa.bad input{border-color:var(--closed);background:#fdecec}
  .section-confirm{display:flex;align-items:center;justify-content:flex-end;padding:10px 16px;border-top:1px solid var(--shell-2);gap:10px}
  .section-confirm .btn:disabled{opacity:.4}
  .printed-badge{display:inline-flex;align-items:center;gap:5px;font-size:11.5px;font-weight:700;color:#276b45;margin-right:auto}
  .reef-toggles{margin-top:12px;border-top:1px dashed var(--line);padding-top:10px}
  .reef-toggles .rtt{font-size:10.5px;letter-spacing:.08em;text-transform:uppercase;color:var(--muted);font-weight:700;margin-bottom:6px}
  /* Reef Name | Open/Closed | Tonging Only (2026-09-23) — grid, not flex space-between, so the
     header labels below stay lined up with the switches under them regardless of reef name length. */
  .reef-toggles .rt-head{display:grid;grid-template-columns:1fr 74px 90px;gap:8px;padding:0 0 6px;font-size:10px;letter-spacing:.06em;text-transform:uppercase;color:var(--muted);font-weight:700}
  .reef-toggles .rt-head span{text-align:center}
  .reef-toggles .rt-head span:first-child{text-align:left}
  .reef-toggles .rt{display:grid;grid-template-columns:1fr 74px 90px;align-items:center;gap:8px;padding:4px 0;font-size:12.5px;color:var(--ink)}
  .reef-toggles .rt.off{color:var(--muted)}
  .reef-toggles .rt .rsw{justify-self:center}
  .rsw{width:38px;height:20px;border-radius:20px;background:var(--closed);position:relative;cursor:pointer;transition:.2s;flex:none}
  .rsw.on{background:var(--open)}
  .rsw b{position:absolute;top:2px;left:2px;width:16px;height:16px;border-radius:50%;background:#fff;transition:.2s}
  .rsw.on b{left:20px}
  .bar-lbl{font-size:11px;font-weight:700;color:var(--navy);text-align:center;margin-bottom:3px;font-family:var(--mono)}
  .daterange{display:flex;gap:10px;align-items:center;flex-wrap:wrap;margin-bottom:18px;background:#fff;border:1px solid var(--line);border-radius:10px;padding:12px 16px;box-shadow:var(--shadow)}
  .daterange label{font-size:12px;color:var(--muted);font-weight:700}
  .daterange input[type=date]{padding:7px 10px;border:1px solid var(--line);border-radius:8px;font-size:13px;color:var(--ink)}
  .daterange .spacer{flex:1}
  .form-modal .fg{margin-bottom:13px}
  .form-modal .fg label{display:block;font-size:11px;font-weight:700;color:var(--navy);margin-bottom:4px;letter-spacing:.03em;text-transform:uppercase}
  .form-modal .fg input,.form-modal .fg select{width:100%;padding:9px 11px;border:1px solid var(--line);border-radius:8px;font-size:14px;background:#fff}
  .form-grid{display:grid;grid-template-columns:1fr 1fr;gap:14px}
  .modal.narrow{max-width:520px}
  .void-reason p{margin:0 0 14px;font-size:14px;color:var(--ink)}
  .fin-table{width:100%;border-collapse:collapse;font-size:13.5px;margin-top:6px}
  .fin-table th,.fin-table td{text-align:left;padding:9px 12px;border-bottom:1px solid var(--shell-2)}
  .fin-table th{background:var(--shell-2);font-size:11px;letter-spacing:.05em;text-transform:uppercase;color:var(--steel)}
  .fin-table td.num{text-align:right;font-family:var(--mono)}
  .fin-table tr.tot td{font-weight:700;color:var(--navy);border-top:2px solid var(--line)}
  @media(max-width:760px){ .form-grid{grid-template-columns:1fr} }

  /* ---- kiosk Sound map ---- */
  .kioskmap-wrap{border:1px solid var(--line);border-radius:12px;overflow:hidden;background:#cfe6e6;margin-top:6px;box-shadow:inset 0 1px 6px rgba(11,42,61,.12)}
  .kioskmap-wrap svg{display:block;width:100%;height:auto}
  .mpin{cursor:pointer}
  .mpin.closed{cursor:not-allowed}
  .mpin .pin-body{transition:filter .15s, r .15s}
  .mpin.open:hover .pin-body{filter:brightness(1.12)}
  .mpin.open:focus-visible{outline:none}
  .mpin.open:focus-visible .pin-ring{opacity:.6}
  .map-legend{display:flex;gap:16px;justify-content:center;font-size:11.5px;color:var(--muted);margin-top:8px;flex-wrap:wrap}
  .map-legend i{width:12px;height:12px;border-radius:50%;display:inline-block;margin-right:5px;vertical-align:-2px}
  .map-note{font-size:11px;color:var(--muted);margin-top:6px;text-align:center;font-style:italic}

  /* ---- v2.2: open-question flag ---- */
  .flag{display:flex;gap:9px;align-items:flex-start;background:#fff8e6;border:1px solid #e8d59a;
        border-left:4px solid var(--brass);border-radius:9px;padding:10px 13px;margin:10px 0;font-size:12.5px;color:#6a5518}
  .flag b{color:#4d3d10}
  .flag .fq{font-weight:800;flex:0 0 auto;color:var(--brass)}

  /* ---- v2.2: editable config tables ---- */
  .cfg-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(340px,1fr));gap:18px;margin-top:18px}
  .cfg-grid-3{grid-template-columns:repeat(3,1fr)}
  .cfg-card{background:#fff;border:1px solid var(--line);border-radius:13px;padding:16px 18px 18px;box-shadow:0 1px 3px rgba(11,42,61,.06)}
  /* A card with more columns than the grid's default 340px track can hold (e.g. check-out/check-in
     times: two dates, two times, a note, a save button) — span the full grid width instead of
     squeezing (2026-09-16: "the season open/close box does not fit on the page"). */
  .cfg-card.wide{grid-column:1/-1}
  .cfg-card h4{margin:0 0 3px;font-size:14.5px;color:var(--navy)}
  .cfg-card .sub{font-size:11.5px;color:var(--muted);margin:0 0 11px;display:block}
  table.cfg{width:100%;border-collapse:collapse;font-size:13px}
  table.cfg th{text-align:left;padding:6px 8px;font-size:10.5px;letter-spacing:.05em;text-transform:uppercase;
               color:var(--steel);background:var(--shell-2);border-bottom:1px solid var(--line)}
  table.cfg td{padding:5px 8px;border-bottom:1px solid var(--shell-2);vertical-align:middle}
  table.cfg input,table.cfg select{width:100%;padding:5px 7px;border:1px solid var(--line);border-radius:6px;
               font:inherit;font-size:12.5px;background:#fff}
  table.cfg input[type=number]{font-family:var(--mono);text-align:right}
  table.cfg td.lbl{font-weight:600;color:var(--navy);white-space:nowrap}
  .cfg-foot{display:flex;align-items:center;gap:10px;margin-top:11px;flex-wrap:wrap}
  .cfg-saved{font-size:11.5px;color:var(--verdigris-dk);font-weight:700;display:none}


  /* ---- v2.2: user management ---- */
  .um-toolbar{display:flex;gap:10px;align-items:center;flex-wrap:wrap;margin-bottom:12px}
  .um-toolbar input,.um-toolbar select{padding:8px 11px;border:1px solid var(--line);border-radius:8px;font:inherit;font-size:13px}
  .pill.inactive{background:#eceff1;color:#78868d}
  .rolechip{display:inline-block;background:var(--shell-2);border:1px solid var(--line);border-radius:20px;
            padding:2px 10px;font-size:11.5px;color:var(--steel);font-weight:600}
  .um-mail{font-family:var(--mono);font-size:12px;color:var(--steel)}

  /* ---- v2.2: dealer reports ---- */
  .rep-filters{display:grid;grid-template-columns:repeat(auto-fit,minmax(170px,1fr));gap:12px;margin-bottom:14px}
  .rep-filters .fg label{display:block;font-size:11px;letter-spacing:.04em;text-transform:uppercase;color:var(--steel);margin-bottom:4px;font-weight:700}
  .rep-filters input,.rep-filters select{width:100%;padding:8px 10px;border:1px solid var(--line);border-radius:8px;font:inherit;font-size:13px}
  .rep-stats{display:grid;grid-template-columns:repeat(auto-fit,minmax(140px,1fr));gap:12px;margin:14px 0 4px}
  .rep-stat{background:var(--shell-2);border:1px solid var(--line);border-radius:10px;padding:12px 14px}
  .rep-stat .k{font-size:10.5px;letter-spacing:.06em;text-transform:uppercase;color:var(--steel);font-weight:700}
  .rep-stat .v{font-size:22px;font-weight:800;color:var(--navy);font-family:var(--mono);margin-top:3px}

  /* ---- Blazor Server's own circuit-error banner (Layout/MainLayout.razor) ---- */
  /* Found 2026-09-22: this div ships as part of the standard Blazor template's markup, but this
     project's custom stylesheet never carried over the CSS that hides it by default -- with no
     display:none here, it rendered visible on every single page load regardless of whether a
     real circuit error ever occurred, blazor.web.js only ever toggles it, it never created the
     hidden state in the first place. Matches the app's existing error/warning palette
     (.expired-warn/.validation-msg) rather than the generic Microsoft template's lightyellow. */
  #blazor-error-ui{display:none;position:fixed;left:0;bottom:0;width:100%;z-index:1000;
    background:#fdecec;border-top:1px solid #f0b4b4;color:#a03030;font-weight:600;font-size:13px;
    padding:10px 46px 10px 16px;box-shadow:0 -1px 6px rgba(0,0,0,.12)}
  #blazor-error-ui .reload{color:#a03030;text-decoration:underline;margin-left:6px}
  #blazor-error-ui .dismiss{cursor:pointer;position:absolute;right:16px;top:50%;transform:translateY(-50%);font-weight:700}
  /* ================= DASHBOARD v3 + MOBILE (2026-10-13) ================= */
  /* Layout reviewed as mockups (reference/dashboard-license-quota-redesign-mockup.html and
     mobile-responsive-dashboard-mockup.html). All new rules are additive and use their own
     class names (dcard, dbar, reef-list, stackable ...) so nothing here can change another
     page; the phone behavior lives in the single @media(max-width:760px) block at the end of
     this section. */
  .dcard{background:#fff;border:1px solid var(--line);border-radius:var(--radius);box-shadow:var(--shadow);padding:20px 24px;margin-bottom:18px}
  .dcard-head{display:flex;justify-content:space-between;align-items:flex-start;gap:12px;flex-wrap:wrap;margin-bottom:14px}
  .dsub{font-size:12.5px;color:var(--muted);margin-top:3px}
  .dsub-inline{text-transform:none;letter-spacing:0;font-weight:400;color:var(--muted)}
  .dpills{display:flex;gap:6px}
  .dpills button{font:inherit;font-size:11.5px;font-weight:700;padding:5px 11px;border-radius:20px;border:1px solid var(--line);background:transparent;color:var(--muted);cursor:pointer;white-space:nowrap}
  .dpills button.on{background:var(--navy);border-color:var(--navy);color:#fff}
  .dtwo{display:grid;grid-template-columns:1fr 1fr;gap:18px;margin-bottom:18px}
  .dtwo .dcard{margin-bottom:0}

  /* sacks per day: bars sized as a percent of the y-axis ceiling */
  .dplot{position:relative;height:210px;border-bottom:1px solid var(--line);margin:24px 0 0 36px}
  .dplot .gl{position:absolute;left:0;right:0;border-top:1px dashed var(--shell-2)}
  .dplot .yl{position:absolute;left:-36px;width:30px;text-align:right;font-size:10.5px;color:var(--muted);font-family:var(--mono);transform:translateY(50%)}
  .dplot .avg{position:absolute;left:0;right:0;border-top:2px dashed var(--brass);z-index:1}
  .dplot .avg span{position:absolute;right:4px;top:-18px;font-size:10.5px;font-weight:700;color:#8a5a0e;background:#fff;padding:0 4px}
  .dplot .bars{position:absolute;inset:0;display:flex;justify-content:space-around;align-items:flex-end;gap:3px;padding:0 4px}
  .dbar{flex:1;max-width:84px;height:100%;display:flex;flex-direction:column;justify-content:flex-end;align-items:center;min-width:0}
  .dbar .n{font-size:12px;font-weight:700;color:var(--navy);font-family:var(--mono);margin-bottom:3px;white-space:nowrap}
  .dbar .st{width:100%;display:flex;flex-direction:column;border-radius:5px 5px 0 0;overflow:hidden}
  .dbar.today .st{outline:2px solid var(--navy);outline-offset:2px}
  .dbar .st i{display:block}
  .dbar .d{background:var(--verdigris)}.dbar .h{background:var(--steel)}.dbar .p{background:var(--brass)}
  .dxaxis{display:flex;justify-content:space-around;margin:6px 0 0 36px;padding:0 4px;gap:3px;font-size:11.5px;color:var(--muted);font-weight:600}
  .dxaxis span{flex:1;max-width:84px;text-align:center;min-width:0;white-space:nowrap;line-height:1.25}
  .dxaxis span em{display:block;font-style:normal;font-weight:700}
  .dxaxis span.today{color:var(--navy)}
  @media(max-width:900px){.dxaxis span.near{visibility:hidden}}
  .dlegend{display:flex;gap:16px;flex-wrap:wrap;font-size:12px;color:var(--muted);margin-top:12px}
  .dlegend i{width:11px;height:11px;border-radius:3px;display:inline-block;margin-right:5px;vertical-align:-1px}
  .dlegend i.dashed{width:18px;height:0;border-radius:0;border-top:2px dashed var(--brass);vertical-align:3px}

  /* season quota + by reef: one section, one bar style */
  .qhead{display:flex;justify-content:space-between;align-items:baseline;gap:10px;margin-bottom:10px}
  .qhead b{font-size:15px;color:var(--navy)}
  .qhead .pct{font-size:28px;font-weight:700;font-family:var(--mono)}
  .qbar{height:18px;background:var(--shell-2);border-radius:20px;overflow:hidden}
  .qbar i{display:block;height:100%;border-radius:20px;transition:width .6s ease}
  .qcap{font-size:12.5px;color:var(--muted);margin-top:8px}
  .qdivider{border-top:1px dashed var(--line);margin:22px 0 18px}
  .reefhead{display:flex;justify-content:space-between;align-items:center;flex-wrap:wrap;gap:8px;margin-bottom:16px}
  .reefkey{display:flex;gap:14px;font-size:11.5px;color:var(--muted)}
  .reefkey span{display:inline-flex;align-items:center;gap:5px}
  .reefkey .dot{width:9px;height:9px;border-radius:50%;display:inline-block}
  .reefkey .dot.open{background:var(--open)}.reefkey .dot.part{background:#8a5a0e}.reefkey .dot.closed{background:var(--closed)}
  .reef-list{display:grid;grid-template-columns:1fr 1fr;gap:20px 44px}
  .reef .r1{display:flex;justify-content:space-between;align-items:baseline;gap:8px;margin-bottom:8px}
  .reef .nm{display:flex;align-items:center;flex-wrap:wrap;gap:2px 0;min-width:0}
  .reef .nm b{font-size:14px;color:var(--navy)}
  .reef .pct{font-size:20px;font-weight:700;font-family:var(--mono);white-space:nowrap}
  .reef .det{font-size:11.5px;color:#8a5a0e;flex-basis:100%;margin-top:2px}
  .spill{display:inline-flex;align-items:center;gap:5px;font-size:11px;font-weight:700;padding:2px 9px;border-radius:20px;margin-left:10px;white-space:nowrap}
  .spill i{width:7px;height:7px;border-radius:50%;display:inline-block}
  .spill.open{background:#e4f3ea;color:var(--open)}.spill.open i{background:var(--open)}
  .spill.closed{background:#fdecec;color:var(--closed)}.spill.closed i{background:var(--closed)}
  .spill.part{background:#fdf2e0;color:#8a5a0e}.spill.part i{background:#8a5a0e}

  /* harvester licenses */
  .lic-top{display:flex;justify-content:space-between;align-items:baseline;margin-bottom:14px}
  .lic-top b{font-size:15px;color:var(--navy)}
  .lic-top span{font-size:28px;font-weight:700;font-family:var(--mono);color:var(--navy)}
  .lic2{display:grid;grid-template-columns:1fr 1fr;gap:12px}
  .lic2>div,.lic-bytype{background:var(--shell);border:1px solid var(--line);border-radius:8px;padding:12px 14px}
  .lic-bytype{margin-top:12px}
  .lic2 .k,.lic-bytype .k{font-size:10.5px;letter-spacing:.06em;text-transform:uppercase;color:var(--muted);font-weight:700;margin-bottom:8px}
  .lic2 .row,.lic-bytype .row{display:flex;justify-content:space-between;gap:12px;font-size:13.5px;padding:4px 0}
  .lic2 .row b,.lic-bytype .row b{font-family:var(--mono);color:var(--navy)}

  /* boats hailed out (last 5 days): proportional stacked bars that fill the card */
  .dtwo .dcard{display:flex;flex-direction:column}
  .bwrap{flex:1;display:flex;flex-direction:column;min-height:200px}
  .bplot{position:relative;flex:1;min-height:150px;border-bottom:1px solid var(--line);margin:22px 0 0 28px}
  .bplot .gl{position:absolute;left:0;right:0;border-top:1px dashed var(--shell-2)}
  .bplot .yl{position:absolute;left:-28px;width:22px;text-align:right;font-size:10.5px;color:var(--muted);font-family:var(--mono);transform:translateY(50%)}
  .bcols{position:absolute;inset:0;display:flex;justify-content:space-around;align-items:flex-end;gap:6px;padding:0 4px}
  .bcol{flex:1;max-width:56px;height:100%;display:flex;flex-direction:column;justify-content:flex-end;align-items:center;min-width:0}
  .bcol .bn{font-size:12px;font-weight:700;color:var(--navy);font-family:var(--mono);margin-bottom:3px}
  .bcol .bst{width:100%;display:flex;flex-direction:column;border-radius:5px 5px 0 0;overflow:hidden}
  .bcol .bst i{display:block}
  .bcol .bd{background:var(--verdigris)}.bcol .bt{background:var(--brass)}
  .bx{display:flex;justify-content:space-around;gap:6px;margin:6px 0 0 28px;padding:0 4px;font-size:11px;color:var(--muted);font-weight:600}
  .bx span{flex:1;max-width:56px;text-align:center;min-width:0;white-space:nowrap}

  /* tables that become cards on a phone */
  .twrap{overflow-x:auto}
  table.stackable th.num,table.stackable td.num{text-align:right}
  table.stackable th.grp{text-align:center;border-bottom:1px solid var(--steel)}
  table.stackable .bl{border-left:1px solid var(--line)}
  table.stackable thead .bl{border-left-color:var(--steel)}
  table.stackable tr.tot td{font-weight:700;color:var(--navy);border-bottom:0}
  table.mixtable thead th{position:static}

  /* ---- Mobile-friendly header: CSS-only menu button (no JS, so it works before the circuit connects) ---- */
  .navtoggle{display:none}
  .burger{display:none;margin-left:auto;background:transparent;border:1px solid #3d5e72;color:#fff;border-radius:8px;width:42px;height:42px;font-size:20px;cursor:pointer;align-items:center;justify-content:center}

  @media(max-width:760px){
    header.shell{flex-wrap:wrap;gap:10px 12px;padding:10px 14px}
    /* The system name is long: let the brand take the space beside the menu button and wrap inside it, instead of pushing the button to its own row. */
    header.shell .brand{flex:1 1 0;min-width:0;gap:10px}
    .brand h1{font-size:14px;line-height:1.15}
    .burger{display:flex}
    /* The real checkbox sits invisibly on top of the menu button so it stays keyboard-focusable (WCAG 2.1.1) and clickable; its focus ring is drawn on the visible button. */
    .navtoggle{display:block;position:absolute;right:14px;top:10px;width:42px;height:42px;margin:0;opacity:0;cursor:pointer;z-index:2}
    .navtoggle:focus-visible ~ .burger{outline:3px solid var(--brass);outline-offset:2px}
    header.shell nav.roles,header.shell .stationpick{display:none}
    /* !important: Layout/MainLayout.razor.css scopes "header.shell form{display:inline}" with an attribute selector that outranks this rule. */
    header.shell form{display:none!important}
    .navtoggle:checked ~ nav.roles{display:flex;flex-direction:column;order:3;width:100%;gap:2px}
    .navtoggle:checked ~ nav.roles a{padding:13px 10px;border-bottom:1px solid rgba(255,255,255,.1);font-size:15px}
    .navtoggle:checked ~ .stationpick{display:flex;order:4;width:100%}
    .navtoggle:checked ~ form{display:block!important;order:5}
    main{padding:16px 14px 50px}
    .view-head h2{font-size:20px}
    .dcard{padding:15px 14px;margin-bottom:14px}
    .statbar{gap:10px;margin-bottom:10px}
    .stat{padding:12px 13px}.stat .v{font-size:24px}.stat .sub{font-size:11px}
    .dpills{width:100%;overflow-x:auto}
    .dplot{height:170px;margin-left:30px}.dplot .yl{left:-30px;width:26px}
    .dxaxis{margin-left:30px}.dxaxis span{font-size:10px}.dxaxis span.skip,.dxaxis span.near{visibility:hidden}
    .dbar .n{font-size:11px}
    .reef-list{grid-template-columns:1fr;gap:18px}
    .qhead .pct{font-size:24px}
    .dtwo,.lic2{grid-template-columns:1fr}
    .dtwo{gap:14px}
    /* wide tables -> one labeled card per row: same data, no sideways scrolling */
    table.stackable thead{display:none}
    table.stackable,table.stackable tbody,table.stackable tr,table.stackable td{display:block;width:100%}
    table.stackable tr{border:1px solid var(--line);border-radius:8px;padding:8px 10px;margin-bottom:10px;background:#fffdf8}
    table.stackable td{border:0;padding:3px 0;display:flex;justify-content:space-between;gap:12px;text-align:right}
    table.stackable td.bl{border:0}
    table.stackable td::before{content:attr(data-l);color:var(--muted);font-size:11px;letter-spacing:.06em;text-transform:uppercase;font-weight:700;text-align:left}
    table.stackable td.name{font-weight:700;color:var(--navy);font-size:15px;padding-bottom:6px;margin-bottom:4px;border-bottom:1px solid var(--shell-2)}
    table.stackable td.name::before{content:none}
    table.stackable tr.tot{background:var(--shell)}
  }

  /* ================= TRIP TICKET PORTAL, stage one (2026-10-14) ================= */
  .tt-filters{background:#fff;border:1px solid var(--line);border-radius:var(--radius);padding:11px 14px;box-shadow:var(--shadow)}
  .tt-filters label{font-size:11px;color:var(--muted);font-weight:700;text-transform:uppercase;letter-spacing:.04em}
  .tt-filters select,.tt-filters input[type=date]{padding:7px 10px;border:1px solid var(--line);border-radius:7px;font:inherit;font-size:13px}
  .tt-bulk{display:none;gap:10px;align-items:center;flex-wrap:wrap;background:#eef6f6;border:1px solid #cfe3e3;border-radius:var(--radius);padding:10px 14px;margin-bottom:14px;font-size:13px}
  .tt-bulk.on{display:flex}
  .tt-bulk label{font-size:11px;color:var(--steel);font-weight:700;text-transform:uppercase;letter-spacing:.04em}
  .tt-bulk input[type=number]{width:90px;padding:6px 8px;border:1px solid var(--line);border-radius:7px;font:inherit;font-size:13px;text-align:right}
  table.tt-queue th.num,table.tt-queue td.num{text-align:right}
  table.tt-queue tr.flagrow{background:#fff7f5}
  table.tt-queue td{vertical-align:middle}
  table.tt-queue .pill{white-space:nowrap}
  table.tt-queue th .th-sort{all:unset;cursor:pointer;font:inherit;color:inherit;text-transform:inherit;letter-spacing:inherit;white-space:nowrap}
  table.tt-queue th .th-sort:hover{text-decoration:underline}
  table.tt-queue th .th-sort:focus-visible{outline:2px solid #fff;outline-offset:2px}
  .tt-acts{display:flex;flex-direction:column;gap:5px;align-items:stretch;min-width:92px}
  .tt-acts .btn{text-align:center;white-space:nowrap}
  details.dealer-login summary{display:block;list-style:none;text-align:center;cursor:pointer;user-select:none}
  details.dealer-login summary::-webkit-details-marker{display:none}
  details.dealer-login summary::after{content:" \25BE";font-size:.85em}
  details.dealer-login[open] summary::after{content:" \25B4"}
  details.dealer-login form{margin-top:12px}
  .tt-pager{display:flex;align-items:center;gap:10px;flex-wrap:wrap;font-size:12.5px;color:var(--muted);margin-bottom:10px}
  .tt-pager .gap{flex:1}
  /* Dealers tab: thin rules between sections (Trip tickets | Sacks | timing), a group header row above the column names, and the provisional note under Intended */
  .tt-divider{border-left:1px solid var(--line)}
  thead .tt-divider{border-left-color:rgba(255,255,255,.22)}
  table.grid thead tr.tt-grouprow th{font-size:11px;letter-spacing:.1em;text-transform:uppercase;text-align:center;padding-top:6px;padding-bottom:6px;background:var(--navy-2,#143a52);color:#9fc0c9;border-bottom:1px solid rgba(255,255,255,.18)}
  .tt-prov{font-size:11.5px;font-weight:400;color:#8a5a0e;white-space:nowrap}
  .tt-in{width:72px;padding:5px 7px;border:1px solid var(--line);border-radius:6px;font:inherit;font-size:12.5px;text-align:right}
  /* Pre-filled from the harvester's intended count and NOT saved: dashed and italic so it never reads as entered. */
  .tt-in.prefill{border:1px dashed #c9a227;background:#fffaf0;font-style:italic}
  /* Edited but not yet saved. */
  .tt-in.dirty{border:2px solid var(--brass);background:#fffaf0;font-style:normal}

  /* ---- Trip Ticket Portal stages two and three (2026-10-14): tabs, variance table, review modal ---- */
  .tt-tabs{display:flex;gap:4px;border-bottom:2px solid var(--line);margin:0 0 16px;flex-wrap:wrap}
  .tt-tabs button{border:0;background:transparent;padding:10px 16px;font:inherit;font-size:14px;font-weight:600;color:var(--muted);cursor:pointer;border-bottom:3px solid transparent;margin-bottom:-2px}
  .tt-tabs button[aria-selected="true"]{color:var(--navy);border-bottom-color:var(--verdigris)}
  .tt-tabs .count{display:inline-block;background:var(--closed);color:#fff;border-radius:20px;font-size:11px;padding:1px 7px;margin-left:6px}

  .tt-variance th.num,.tt-variance td.num{text-align:right}
  .tt-variance tr.vgroup td{border-bottom:1px solid var(--shell-2)}
  .tt-variance tr.vgroup:hover{background:transparent}
  .neg{color:var(--closed);font-weight:700}
  .pos{color:#8a5a0e;font-weight:700}
  .zero{color:var(--muted)}
  .tt-match{display:inline-block;background:#e6f1f2;border:1px dashed var(--verdigris);border-radius:8px;padding:5px 10px;font-size:12px;color:var(--verdigris-dk)}

  .tt-kv{display:grid;grid-template-columns:1fr 1fr;gap:10px 18px;font-size:13px;margin-bottom:14px}
  .tt-kv span{display:block;font-size:10.5px;letter-spacing:.06em;text-transform:uppercase;color:var(--muted);font-weight:700;margin-bottom:2px}
  .tt-h{margin:16px 0 6px;font-size:12px;letter-spacing:.08em;text-transform:uppercase;color:var(--steel);font-weight:700}
  .tt-acct{display:flex;height:22px;border-radius:6px;overflow:hidden;background:var(--shell-2);margin:8px 0 6px;font-size:11px;color:#fff;font-weight:700}
  .tt-acct span{display:flex;align-items:center;justify-content:center;white-space:nowrap;overflow:hidden}
  .tt-acct .d{background:var(--verdigris)}.tt-acct .h{background:var(--steel)}.tt-acct .p{background:var(--brass)}.tt-acct .r{background:#7f8f99}
  .tt-acct .u{background:repeating-linear-gradient(45deg,#b23b3b,#b23b3b 6px,#c85a5a 6px,#c85a5a 12px)}
  .tt-reslist{list-style:none;margin:0 0 6px;padding:0}
  .tt-reslist li{display:flex;justify-content:space-between;align-items:flex-start;gap:10px;padding:8px 0;border-bottom:1px solid var(--shell-2);font-size:13px}
  .tt-reslist small{display:block;color:var(--muted);font-size:11.5px;margin-top:2px}
  .tt-log{white-space:pre-wrap;font:inherit;font-size:12.5px;background:#fff;border:1px solid var(--line);border-radius:8px;padding:10px 12px;margin:0}
  .tt-summary{background:#eef6f6;border:1px solid #cfe3e3;border-radius:8px;padding:9px 12px;font-size:13px;margin:0 0 10px;color:var(--navy)}
  .tt-summary.over{background:#fdecec;border-color:#f0b4b4;color:#9a3838}
  .tt-summary.done{background:#e9f5ee;border-color:#bfe3cc;color:#276b45}
  .tt-opt{background:#fff;border:1px solid var(--line);border-radius:8px;padding:10px 12px;margin-bottom:8px;font-size:13px}
  .tt-opt.on{border-color:var(--verdigris);background:#f2f9f9}
  .tt-opt label{font-weight:600;cursor:pointer}
  .tt-opt small{display:block;color:var(--muted);font-size:11.5px;margin:2px 0 0 24px}
  .tt-opt-in{display:flex;gap:10px;flex-wrap:wrap;margin:8px 0 0 24px}
  .tt-opt-in select,.tt-opt-in input{padding:7px 10px;border:1px solid var(--line);border-radius:7px;font:inherit;font-size:13px}
  .tt-opt-in input[type=number]{width:110px;text-align:right}
  #varNote{width:100%;padding:8px 10px;border:1px solid var(--line);border-radius:7px;font:inherit;font-size:13px}