/* AmpConnect appearance (2026-09-13): template (classic / modern / compact) × mode (day / night).
   Classic Day lives entirely in index.html (its :root declares the --c-* tokens with today's literals). This file
   overrides the tokens for night and for the Modern palette, and holds the Modern and Compact layout rules.
   Specs: docs/superpowers/specs/2026-09-11-ui-templates-design.md, 2026-09-13-appearance-templates-design.md */

/* ── Palettes ── */
html[data-template="modern"]{
  --c-ground:#F2F0EA; --c-surface:#FFFFFF; --c-surface-2:#F7F6F2; --c-surface-3:#EEECE6;
  --c-ink:#15181F; --c-ink-2:#3A3F49; --c-ink-3:#4E525C; --c-muted:#62666F; --c-muted-2:#9A9EA8; --c-hair:#E3DFD6; --c-hair-2:#ECE9E2;
  --c-accent:#1F3B7A; --c-accent-soft:#E7EDF9; --c-accent-line:#B9C7E6; --c-accent-solid:#1F3B7A;
  --c-bad:#C9302C; --c-bad-soft:#FBE9E8; --c-btn:#15181F; --c-btn-ink:#F2F0EA;
  --c-gold:#8A6300; --c-warn-solid:#8A6300;   /* Modern day: amber text and filled amber badges readable on white */
  --c-bar:#FFFFFF; --c-bar-2:#EEECE6; --c-bar-ink:#15181F; --c-bar-muted:#62666F;
  --sk-shadow:0 1px 2px rgba(21,24,31,.04), 0 10px 30px -18px rgba(21,24,31,.25);
  --sk-sans:"Manrope",system-ui,-apple-system,"Segoe UI",sans-serif; --sk-serif:"Fraunces",Georgia,"Times New Roman",serif;
}
/* Modern 2 (2026-09-13): FleetGen structure, Apple-style colour — neutral greys, one blue, iOS system hues as calm tints
   with their darker text shades (Reetesh 11:54: "modern colours, like apple style"). Mockup: https://claude.ai/code/artifact/5d13665b-1a3c-45c4-8e9a-e5af38529fea */
html[data-template="modern2"]{
  --c-ground:#F5F5F7; --c-surface:#FFFFFF; --c-surface-2:#F9F9FB; --c-surface-3:#F2F2F7;
  --c-ink:#1D1D1F; --c-ink-2:#3A3A3C; --c-ink-3:#48484A; --c-muted:#606065; --c-muted-2:#8E8E93; --c-hair:#E5E5EA; --c-hair-2:#EFEFF4;
  --c-accent:#0058CC; --c-accent-soft:#DCEBFF; --c-accent-line:#9CC4FF; --c-accent-solid:#0071E3; --c-accent-ink:#FFFFFF;
  --c-navy:#0040DD; --c-navy-solid:#0040DD;
  --c-btn:#1D1D1F; --c-btn-ink:#FFFFFF; --c-bar:#FFFFFF; --c-bar-2:#F2F2F7; --c-bar-ink:#1D1D1F; --c-bar-muted:#606065;
  --c-bad:#C20012; --c-bad-soft:#FFE0DD; --c-bad-line:#FF9E97; --c-bad-solid:#E0281B;
  --c-ok:#1E7233; --c-ok-soft:#DCF5E3; --c-ok-line:#8ADBA3; --c-ok-solid:#23963F;
  --c-warn:#B02E00; --c-warn-soft:#FFE9CF; --c-warn-line:#FFB870; --c-warn-solid:#C24E00; --c-gold:#8A5E00; --c-highlight:#FFF1C2;
  --c-note:#8944AB; --c-note-soft:#EFE1FD; --c-note-line:#CFA6F5; --c-note-solid:#9D4EDD;
  --c-muted-solid:#606065;
  --sk-shadow:0 1px 2px rgba(0,0,0,.04), 0 8px 24px -16px rgba(0,0,0,.16);
  --sk-sans:"Manrope",system-ui,-apple-system,"Segoe UI",sans-serif; --sk-serif:"Manrope",system-ui,-apple-system,"Segoe UI",sans-serif;
  --sk-r:12px; --sk-r-sm:9px;
}
html[data-template="modern2"][data-mode="night"]{
  --c-ground:#0F0F10; --c-surface:#1C1C1E; --c-surface-2:#232326; --c-surface-3:#2C2C2E;
  --c-ink:#F5F5F7; --c-ink-2:#D1D1D6; --c-ink-3:#C7C7CC; --c-muted:#B0B0B5; --c-muted-2:#8E8E93; --c-hair:#3A3A3C; --c-hair-2:#2C2C2E;
  --c-accent:#5EAEFF; --c-accent-soft:#192F46; --c-accent-line:#2A5A9A; --c-accent-solid:#0A66D6; --c-accent-ink:#FFFFFF;
  --c-navy:#7AB0FF; --c-navy-solid:#2F62C8;
  --c-btn:#F5F5F7; --c-btn-ink:#1C1C1E; --c-bar:#1C1C1E; --c-bar-2:#2C2C2E; --c-bar-ink:#F5F5F7; --c-bar-muted:#A1A1A6;
  --c-bad:#FF6961; --c-bad-soft:#452221; --c-bad-line:#8A3A34; --c-bad-solid:#D63A30;
  --c-ok:#30D158; --c-ok-soft:#203D28; --c-ok-line:#2E7A44; --c-ok-solid:#1F8A42;
  --c-warn:#FF9F0A; --c-warn-soft:#453419; --c-warn-line:#8A6520; --c-warn-solid:#B35300; --c-gold:#FFD60A; --c-highlight:#453D1A;
  --c-note:#D08CFF; --c-note-soft:#392744; --c-note-line:#6E4A8A; --c-note-solid:#9E4FD8;
  --c-muted-solid:#636366; --c-on-solid:#FFFFFF;
  --sk-shadow:0 1px 2px rgba(0,0,0,.5), 0 12px 30px -18px rgba(0,0,0,.8);
  color-scheme:dark;
}
html[data-mode="night"]{
  --c-ground:#12151B; --c-surface:#1A1E26; --c-surface-2:#20252E; --c-surface-3:#262C36;
  --c-ink:#ECEAE3; --c-ink-2:#C8C5BD; --c-ink-3:#B4B0A6; --c-muted:#9AA0AC; --c-muted-2:#9AA0AC; --c-hair:#2B313B; --c-hair-2:#252A33;
  --c-accent:#8FB0F0; --c-accent-soft:#1E2A45; --c-accent-line:#2F4A7A; --c-accent-solid:#2F6FB5; --c-accent-ink:#FFFFFF;
  --c-navy:#A7BEF2; --c-navy-solid:#2B4A9E;
  --c-btn:#ECEAE3; --c-btn-ink:#12151B; --c-on-solid:#FFFFFF;
  --c-bar:#0C0F14; --c-bar-2:#262C36; --c-bar-ink:#ECEAE3; --c-bar-muted:#9AA0AC;
  --c-bad:#F07A75; --c-bad-soft:#3A1F1F; --c-bad-line:#6B3532; --c-bad-solid:#B23A36;
  --c-warn-solid:#8A6A1F; --c-muted-solid:#5B6270;
  --c-ok:#7CC98F; --c-ok-soft:#1B3024; --c-ok-line:#2F5A3C; --c-ok-solid:#2E7D48;
  --c-warn:#E2B36A; --c-warn-soft:#3A2E17; --c-warn-line:#6B5424; --c-gold:#D9B45A;
  --c-note:#C79BF5; --c-note-soft:#2E2140; --c-note-line:#5A3F80; --c-note-solid:#8E3BD6;
  --c-highlight:#3D3419;
  --sk-shadow:0 1px 2px rgba(0,0,0,.4), 0 12px 30px -18px rgba(0,0,0,.7);
  color-scheme:dark;
}
html[data-template="modern"][data-mode="night"]{ --c-bar:#1A1E26; --c-bar-ink:#ECEAE3; }
/* Compact keeps Classic's day palette but lifts the two light greys to readable (Classic Day itself stays untouched). */
html[data-template="compact"][data-mode="day"]{ --c-muted:#6b6960; --c-muted-2:#767369; --c-gold:#8A6300; --c-warn-solid:#8A6300; }
/* --sk-* names are aliases of the contract so every template (Classic included) can use the shared rules below. */
html{
  --sk-ground:var(--c-ground); --sk-surface:var(--c-surface); --sk-surface-2:var(--c-surface-2); --sk-surface-3:var(--c-surface-3);
  --sk-ink:var(--c-ink); --sk-ink-2:var(--c-ink-2); --sk-muted:var(--c-muted); --sk-hair:var(--c-hair); --sk-hair-2:var(--c-hair-2);
  --sk-navy:var(--c-accent); --sk-navy-ink:var(--c-accent-ink); --sk-navy-soft:var(--c-accent-soft); --sk-red:var(--c-bad); --sk-red-soft:var(--c-bad-soft);
  --sk-btn:var(--c-btn); --sk-btn-ink:var(--c-btn-ink);
  --sk-shadow:0 1px 2px rgba(20,18,10,.04), 0 10px 30px -18px rgba(20,18,10,.2); --sk-r:14px; --sk-r-sm:8px;
  --sk-sans:-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif; --sk-serif:Georgia,"Times New Roman",serif;
}

/* ── sidebar (hidden in Classic) ── */
.sk-side{display:none}

/* ═══════════════ Modern + Night ═══════════════ */
html:is([data-template="modern"],[data-template="modern2"]) body{background:var(--sk-ground);color:var(--sk-ink);font-family:var(--sk-sans);font-variant-numeric:tabular-nums;-webkit-font-smoothing:antialiased}

/* topbar → light utility bar */
html:is([data-template="modern"],[data-template="modern2"]) .topbar{background:var(--sk-surface);border-bottom:1px solid var(--sk-hair);height:56px;color:var(--sk-ink);padding:0 18px}
html:is([data-template="modern"],[data-template="modern2"]) .topbar-logo{color:var(--sk-ink);display:flex;align-items:center;gap:8px}
html:is([data-template="modern"],[data-template="modern2"]) .topbar-logo>span:not(.amp-logo-chip){color:var(--sk-muted);font-weight:700;letter-spacing:.06em;font-size:11px}
html:is([data-template="modern"],[data-template="modern2"]) .amp-logo-chip{background:#fff;border:1px solid var(--sk-hair)}
html:is([data-template="modern"],[data-template="modern2"]) .topbar-info{color:var(--sk-muted);font-weight:600}
html:is([data-template="modern"],[data-template="modern2"]) .btn-out{color:var(--sk-ink-2);border:1px solid var(--sk-hair);border-radius:999px;padding:5px 11px;background:var(--sk-surface);font-weight:600}
html:is([data-template="modern"],[data-template="modern2"]) .btn-out:hover{background:var(--sk-surface-2);color:var(--sk-ink)}
html:is([data-template="modern"],[data-template="modern2"]) .qnav-pill,html:is([data-template="modern"],[data-template="modern2"]) .sys-pill,html:is([data-template="modern"],[data-template="modern2"]) #esc-ticker{background:var(--sk-surface-2);color:var(--sk-ink);border:1px solid var(--sk-hair)}
html:is([data-template="modern"],[data-template="modern2"]) .qnav-pill:hover,html:is([data-template="modern"],[data-template="modern2"]) .sys-pill:hover{background:var(--sk-surface-3);border-color:var(--sk-hair)}
html:is([data-template="modern"],[data-template="modern2"]) .qnav-pill .qn-n.zero{background:var(--sk-surface-3);color:var(--sk-muted)}
/* ⛽ FSC readout joins the pill family (id-scoped — see the note in index.html) */
html:is([data-template="modern"],[data-template="modern2"]) #fscPill{background:var(--sk-surface-2);color:var(--sk-ink);border:1px solid var(--sk-hair)}
html:is([data-template="modern"],[data-template="modern2"]) #fscPill .fsc-k{color:var(--sk-muted)}
html:is([data-template="modern"],[data-template="modern2"]) #fscPill .fsc-wl,html:is([data-template="modern"],[data-template="modern2"]) #fscPill .fsc-wd{color:var(--sk-muted)}
html:is([data-template="modern"],[data-template="modern2"]) #fscPill[data-go="1"]:hover{background:var(--sk-surface-3);border-color:var(--sk-hair)}

/* top tabs go away, sidebar comes in */
html:not([data-template="classic"]) #a-nav{display:none}
html:not([data-template="classic"]) .sk-side{display:flex;flex-direction:column;gap:4px;position:fixed;left:0;top:56px;bottom:0;width:236px;background:var(--sk-surface);border-right:1px solid var(--sk-hair);overflow:auto;padding:12px 10px 16px;z-index:40}
.sk-grp{display:flex;flex-direction:column}
.sk-gh{display:flex;align-items:center;gap:6px;height:30px;padding:0 8px 0 10px;border:0;background:transparent;border-radius:var(--sk-r-sm);color:var(--sk-muted);font:inherit;font-size:11px;font-weight:800;letter-spacing:.04em;text-transform:uppercase;text-align:left;cursor:pointer;width:100%}
.sk-gh:hover{background:var(--sk-surface-2)}
.sk-gh svg{width:13px;height:13px;margin-left:auto;stroke:currentColor;fill:none;stroke-width:2;stroke-linecap:round;stroke-linejoin:round;transition:transform .15s ease;opacity:.7}
.sk-grp[data-open="0"] .sk-gh svg{transform:rotate(-90deg)}
.sk-items{display:flex;flex-direction:column;gap:1px;padding-bottom:6px}
.sk-grp[data-open="0"] .sk-items{display:none}
.sk-item{display:flex;align-items:center;gap:10px;height:32px;padding:0 10px;border:0;border-radius:var(--sk-r-sm);background:transparent;color:var(--sk-ink-2);font:inherit;font-size:13px;font-weight:600;text-align:left;cursor:pointer;width:100%}
.sk-item svg{width:15px;height:15px;stroke:currentColor;fill:none;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round;flex:none;opacity:.75}
.sk-item .sk-n{margin-left:auto;font-size:11px;font-weight:800;color:var(--sk-muted);background:var(--sk-surface-2);border-radius:999px;padding:1px 7px;min-width:20px;text-align:center}
.sk-item .sk-n.hot{color:var(--sk-red);background:var(--sk-red-soft)}
.sk-item:hover{background:var(--sk-surface-2);color:var(--sk-ink)}
.sk-item.on{background:var(--sk-navy-soft);color:var(--sk-navy);font-weight:800}
.sk-item.on svg{opacity:1}
.sk-item[hidden]{display:none}
.sk-foot{margin-top:auto;padding:10px 10px 0;color:var(--sk-muted);font-size:11px;border-top:1px solid var(--sk-hair-2)}
html:not([data-template="classic"]) #page-admin .main{max-width:none;margin:0 0 0 236px;padding:24px 26px 30px}
@media (max-width:900px){
  html:not([data-template="classic"]) .sk-side{display:none}
  html:not([data-template="classic"]) #a-nav{display:flex;background:var(--sk-surface);border-color:var(--sk-hair)}
  html:not([data-template="classic"]) #page-admin .main{margin-left:0;padding:16px}
  /* phone: the bar wraps instead of forcing a sideways scroll (its contents are the folded ⋯ More menu + ticker) */
  html:not([data-template="classic"]) .topbar{height:auto;min-height:52px;flex-wrap:wrap;padding:6px 12px;gap:6px 10px}
  html:not([data-template="classic"]) .topbar-logo,html:not([data-template="classic"]) .topbar-right{flex-wrap:wrap;max-width:100%;min-width:0}
  html:not([data-template="classic"]) .topbar-right{width:100%;justify-content:flex-end;gap:6px}
}

/* generic surfaces */
html:is([data-template="modern"],[data-template="modern2"]) .card{background:var(--sk-surface);border:1px solid var(--sk-hair);border-radius:var(--sk-r);box-shadow:var(--sk-shadow)}
html:is([data-template="modern"],[data-template="modern2"]) .btn{border-radius:999px;font-weight:700;border-color:var(--sk-hair);background:var(--sk-surface);color:var(--sk-ink)}
html:is([data-template="modern"],[data-template="modern2"]) .btn:hover{background:var(--sk-surface-2)}
html:is([data-template="modern"],[data-template="modern2"]) .btn-p{background:var(--sk-btn);color:var(--sk-btn-ink);border-color:var(--sk-btn)}
html:is([data-template="modern"],[data-template="modern2"]) .btn-p:hover{background:var(--sk-btn);opacity:.9}
html:is([data-template="modern"],[data-template="modern2"]) input,html:is([data-template="modern"],[data-template="modern2"]) select,html:is([data-template="modern"],[data-template="modern2"]) textarea{background:var(--sk-surface);border-color:var(--sk-hair);color:var(--sk-ink);border-radius:10px}
html:is([data-template="modern"],[data-template="modern2"]) input:focus,html:is([data-template="modern"],[data-template="modern2"]) select:focus,html:is([data-template="modern"],[data-template="modern2"]) textarea:focus{border-color:var(--sk-navy);box-shadow:0 0 0 3px var(--sk-navy-soft)}
html:is([data-template="modern"],[data-template="modern2"]) .badge{font-weight:700}
html:is([data-template="modern"],[data-template="modern2"]) .subtabs{background:var(--sk-surface);border-color:var(--sk-hair)}
html:is([data-template="modern"],[data-template="modern2"]) .stab{color:var(--sk-muted)}
html:is([data-template="modern"],[data-template="modern2"]) .stab.active{color:var(--sk-ink);border-bottom-color:var(--sk-ink)}
html[data-mode="night"] .nav-menu{background:var(--sk-surface);border-color:var(--sk-hair)}
html[data-mode="night"] .nav-menu-item{color:var(--sk-ink)}
html[data-mode="night"] .nav-menu-item:hover{background:var(--sk-surface-2)}
html:is([data-template="modern"],[data-template="modern2"]) table{color:var(--sk-ink)}
html[data-mode="night"] th,html[data-mode="night"] td{border-color:var(--sk-hair-2)}
html[data-mode="night"] .cmdk{background:var(--sk-surface);color:var(--sk-ink)}
html[data-mode="night"] .cmdk-in{border-color:var(--sk-hair)}
html[data-mode="night"] .cmdk-in input{color:var(--sk-ink)}
html[data-mode="night"] .cmdk-row.sel{background:var(--sk-surface-2)}

/* ── Shipments: tiles ── */
html:is([data-template="modern"],[data-template="modern2"]) .sx-tiles{gap:10px;grid-template-columns:repeat(auto-fit,minmax(150px,1fr))}
html:is([data-template="modern"],[data-template="modern2"]) .sx-tile{background:var(--sk-surface);border:1px solid var(--sk-hair);border-radius:var(--sk-r);padding:12px 14px 13px;box-shadow:var(--sk-shadow)}
html:is([data-template="modern"],[data-template="modern2"]) .sx-tile:hover{transform:none;box-shadow:var(--sk-shadow);border-color:var(--sk-muted)}
html:is([data-template="modern"],[data-template="modern2"]) .sx-tile.on{border-color:var(--sk-navy);box-shadow:0 0 0 1.5px var(--sk-navy)}
html:is([data-template="modern"],[data-template="modern2"]) .sx-tile .tn{font-family:var(--sk-serif);font-size:28px;font-weight:600;letter-spacing:-.015em;line-height:1.05}
html:is([data-template="modern"],[data-template="modern2"]) .sx-tile .tl{text-transform:none;letter-spacing:0;font-size:12px;font-weight:700;color:var(--sk-muted);margin-top:6px}
html:is([data-template="modern"],[data-template="modern2"]) .sx-tile .tdot{width:8px;height:8px}

/* ── Shipments: search row ── */
html:is([data-template="modern"],[data-template="modern2"]) .srow input,html:is([data-template="modern"],[data-template="modern2"]) .srow select{height:38px;border-radius:999px;padding:0 14px;font-weight:600;box-shadow:var(--sk-shadow)}
html:is([data-template="modern"],[data-template="modern2"]) .srow select{font-weight:700}
html:is([data-template="modern"],[data-template="modern2"]) .as-q-summary{color:var(--sk-ink-2);font-size:12.5px}
html:is([data-template="modern"],[data-template="modern2"]) .as-q-summary .miss{color:var(--sk-red)}
html:is([data-template="modern"],[data-template="modern2"]) .as-q-summary button{border-radius:999px;border-color:var(--sk-hair);background:var(--sk-surface);color:var(--sk-ink);font-weight:700}

/* ── Shipments: load rows ── */
html:is([data-template="modern"],[data-template="modern2"]) .ship-card{background:var(--sk-surface);border:1px solid var(--sk-hair)!important;border-radius:var(--sk-r);margin-bottom:8px;box-shadow:var(--sk-shadow);position:relative}
html:is([data-template="modern"],[data-template="modern2"]) .ship-card:hover{box-shadow:var(--sk-shadow);border-color:var(--sk-muted)!important}
html:is([data-template="modern"],[data-template="modern2"]) .ship-card.open{border-color:var(--sk-navy)!important}
html:is([data-template="modern"],[data-template="modern2"]) .sx-row{grid-template-columns:184px minmax(240px,1fr) 208px 128px 24px;gap:14px;min-height:66px;padding:0 14px 0 16px}
html:is([data-template="modern"],[data-template="modern2"]) .sx-order{font-family:var(--sk-sans);font-weight:800;font-size:14px;letter-spacing:.005em;color:var(--sk-ink)}
html:is([data-template="modern"],[data-template="modern2"]) .sx-meta{color:var(--sk-muted);font-size:11.5px}
html:is([data-template="modern"],[data-template="modern2"]) .sx-meta b{font-family:var(--sk-sans);font-weight:700;color:var(--sk-ink-2)}
html:is([data-template="modern"],[data-template="modern2"]) .sx-lane{white-space:normal;font-weight:700;font-size:13.5px;color:var(--sk-ink);text-wrap:balance}
html:is([data-template="modern"],[data-template="modern2"]) .sx-arr{color:var(--sk-muted);padding:0 4px}
html:is([data-template="modern"],[data-template="modern2"]) .sx-sub{color:var(--sk-muted);font-size:11.5px;margin-top:3px}
html:is([data-template="modern"],[data-template="modern2"]) .sx-loc{color:var(--sk-navy)}
html:is([data-template="modern"],[data-template="modern2"]) .sx-dates{font-size:12px}
html:is([data-template="modern"],[data-template="modern2"]) .sx-d span{color:var(--sk-muted);width:52px}
html:is([data-template="modern"],[data-template="modern2"]) .sx-d b{font-weight:700;color:var(--sk-ink)}
html:is([data-template="modern"],[data-template="modern2"]) .sx-badge{font-weight:800;height:26px;padding:0 10px 0 8px}
html:is([data-template="modern"],[data-template="modern2"]) .sx-chev{color:var(--sk-muted)}
html:is([data-template="modern"],[data-template="modern2"]) .ship-body{border-top:1px solid var(--sk-hair-2)}
html:is([data-template="modern"],[data-template="modern2"]) .dgrid,html:is([data-template="modern"],[data-template="modern2"]) .ditem,html:is([data-template="modern"],[data-template="modern2"]) .pod-bar{border-color:var(--sk-hair-2)}
html:is([data-template="modern"],[data-template="modern2"]) .dlbl{color:var(--sk-muted)}
html[data-mode="night"] .dval{color:var(--sk-ink)}
@media (max-width:1100px){
  html:is([data-template="modern"],[data-template="modern2"]) .sx-row{grid-template-columns:1fr 1fr 24px;grid-auto-rows:auto;padding:12px 14px;gap:8px 12px}
  html:is([data-template="modern"],[data-template="modern2"]) .sx-route{grid-column:1/3}
}

/* ═══════════════ Round 2 (2026-09-11, after Reetesh's live screenshot) ═══════════════ */
/* Anything Modern/Night-only is marked .sk-only; Classic never renders it. */
html[data-template="classic"] .sk-only{display:none}   /* hide-only: elements keep their own display (grid, flex) in the other templates */
html:not([data-template="classic"]) #page-admin .main{max-width:1560px;margin:0 auto 0 236px}

/* topbar: never wrap; fold the utility buttons */
html:not([data-template="classic"]) .topbar{flex-wrap:nowrap;gap:12px;overflow:visible}
html:not([data-template="classic"]) .topbar-right{gap:6px;flex-wrap:nowrap;min-width:0}
html:not([data-template="classic"]) .topbar .btn-out{white-space:nowrap;padding:5px 10px;font-size:12px;line-height:1.2}
html:not([data-template="classic"]) .topbar .btn-out.sk-folded{display:none}
html:is([data-template="modern"],[data-template="modern2"]) #shift-btn{background:var(--sk-surface)!important;border-color:var(--sk-hair)!important;color:var(--sk-ink)!important;max-width:220px;overflow:hidden;text-overflow:ellipsis}
html:is([data-template="modern"],[data-template="modern2"]) .topbar-info{max-width:150px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font-size:11.5px}
html:is([data-template="modern"],[data-template="modern2"]) .qnav-pill{padding:3px 8px;margin-left:4px;font-size:11.5px}
.sk-more{position:relative;display:inline-block}
.sk-more summary{list-style:none;display:inline-flex;align-items:center;gap:6px;cursor:pointer}
.sk-more summary::-webkit-details-marker{display:none}
.sk-more .sk-n{font-size:10.5px;font-weight:800;color:var(--sk-red);background:var(--sk-red-soft);border-radius:999px;padding:0 6px}
.sk-more-menu{position:absolute;top:calc(100% + 6px);right:0;min-width:200px;background:var(--sk-surface);border:1px solid var(--sk-hair);border-radius:12px;box-shadow:var(--sk-shadow);padding:4px;z-index:60}
.sk-more-item{display:flex;align-items:center;gap:8px;width:100%;padding:8px 10px;border:0;background:transparent;color:var(--sk-ink);font:inherit;font-size:13px;font-weight:600;text-align:left;border-radius:8px;cursor:pointer}
.sk-more-item:hover{background:var(--sk-surface-2)}
.sk-more-item .sk-n{margin-left:auto}
.sk-more-item[hidden]{display:none}

/* Shipments: page header + quick views */
html:not([data-template="classic"]) .sk-head{display:flex;align-items:flex-end;gap:18px;flex-wrap:wrap;margin:2px 0 16px}
.sk-h1{margin:0;font-family:var(--sk-serif);font-weight:500;font-size:34px;letter-spacing:-.02em;line-height:1;color:var(--sk-ink)}
.sk-sub{color:var(--sk-muted);font-size:13px;padding-bottom:5px}
.sk-sub b{color:var(--sk-ink);font-weight:800}
.sk-actions{margin-left:auto;display:flex;gap:8px;flex-wrap:wrap}
.sk-actions .btn{height:34px;padding:0 14px}
html:not([data-template="classic"]) .sk-views{display:inline-flex;gap:4px;padding:4px;background:var(--sk-surface);border:1px solid var(--sk-hair);border-radius:999px;margin:0 0 14px;flex-wrap:wrap}
.sk-view{border:0;background:transparent;border-radius:999px;height:30px;padding:0 13px;font:inherit;font-weight:700;font-size:13px;color:var(--sk-ink-2);display:inline-flex;align-items:center;gap:7px;cursor:pointer}
.sk-view .k{font-size:11px;font-weight:800;color:var(--sk-muted)}
.sk-view:hover{background:var(--sk-surface-2)}
.sk-view.on{background:var(--sk-btn);color:var(--sk-btn-ink)}
.sk-view.on .k{color:inherit;opacity:.75}

/* Shipments: tiles in two rows of five, with a meaning line */
html:is([data-template="modern"],[data-template="modern2"]) .sx-tiles{grid-template-columns:repeat(5,minmax(0,1fr))}
html:is([data-template="modern"],[data-template="modern2"]) .sx-tile{display:flex;flex-direction:column;gap:3px}
html:is([data-template="modern"],[data-template="modern2"]) .sx-tile .tl{order:-1;margin:0 0 2px}
html:not([data-template="classic"]) .sx-tile .ts{display:block;font-size:11.5px;color:var(--sk-muted);margin-top:2px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
@media (max-width:1300px){ html:is([data-template="modern"],[data-template="modern2"]) .sx-tiles{grid-template-columns:repeat(4,minmax(0,1fr))} }

/* Shipments: one table instead of stacked cards */
html:not([data-template="classic"]) #a-ships-table{background:var(--sk-surface);border:1px solid var(--sk-hair);border-radius:var(--sk-r);box-shadow:var(--sk-shadow);overflow:hidden}
html:not([data-template="classic"]) #a-ships-table>div{margin-bottom:0!important}
html:not([data-template="classic"]) #a-ships-table .ship-card{border:0!important;border-radius:0;margin:0;box-shadow:none;background:transparent}
html:not([data-template="classic"]) #a-ships-table>div+div{border-top:1px solid var(--sk-hair-2)}
html:not([data-template="classic"]) #a-ships-table>div>div[style*="flex"]{padding-left:10px}
html:not([data-template="classic"]) #a-ships-table .ship-card:hover{background:var(--sk-surface-2)}
html:not([data-template="classic"]) #a-ships-table .ship-card.open{background:var(--sk-surface-2);box-shadow:inset 3px 0 0 var(--sk-navy)}
html:not([data-template="classic"]) .sx-head{display:grid;grid-template-columns:16px 46px 176px minmax(200px,1fr) 200px 186px 118px 24px;gap:0 12px;align-items:center;min-height:38px;padding:0 14px 0 10px;background:var(--sk-surface-2);color:var(--sk-muted);font-size:11.5px;font-weight:800;border-bottom:1px solid var(--sk-hair-2)}
html:not([data-template="classic"]) .sx-head>div:first-child{grid-column:1/3}
html:not([data-template="classic"]) .sx-row{grid-template-columns:46px 176px minmax(200px,1fr) 200px 186px 118px 24px;gap:0 12px;min-height:70px;padding:8px 14px 8px 34px}   /* 34px clears the absolutely-positioned row checkbox */
.sx-av{width:38px;height:38px;border-radius:11px;color:var(--c-on-solid);font-weight:800;font-size:12px;display:grid;place-items:center;letter-spacing:.02em}
.sx-prog{display:flex;align-items:center;margin-top:7px;max-width:240px}
.sx-prog i{width:8px;height:8px;border-radius:50%;border:2px solid var(--pc,var(--sk-muted));background:var(--sk-surface);flex:none;display:block}
.sx-prog i.f{background:var(--pc,var(--sk-muted))}
.sx-prog b{flex:1;height:2px;background:var(--sk-hair);position:relative;margin:0 3px;display:block}
.sx-prog b::after{content:"";position:absolute;left:0;top:0;bottom:0;width:var(--p,0%);background:var(--pc,var(--sk-muted))}
.sx-car .c{font-weight:700;font-size:13px;color:var(--sk-ink);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.sx-car .c.none{color:var(--sk-muted);font-weight:600}
.sx-car .c2{color:var(--sk-muted);font-size:11.5px;margin-top:2px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.sx-docs{display:flex;gap:4px;margin-top:6px}
.sx-docs .doc{font-size:10.5px;font-weight:800;padding:1px 7px;border-radius:999px;background:var(--sk-surface-3);color:var(--sk-muted)}
.sx-docs .doc.ok{background:var(--c-ok-soft);color:var(--c-ok)}
html[data-mode="night"] .sx-docs .doc.ok{background:var(--c-ok-soft);color:var(--c-ok)}
html:not([data-template="classic"]) .sx-dates{font-size:12px;min-width:0}
html:not([data-template="classic"]) .sx-d{gap:8px}
html:not([data-template="classic"]) .sx-stat .btn-s{display:block;margin-top:6px;border-radius:999px;border:1px solid var(--sk-hair);background:var(--sk-surface);color:var(--sk-ink-2);font-weight:700;font-size:11.5px;padding:3px 10px}
html:not([data-template="classic"]) #a-ships-table .empty{padding:28px;text-align:center;color:var(--sk-muted)}
@media (max-width:1250px){
  html:not([data-template="classic"]) .sx-head{display:none}
  html:not([data-template="classic"]) .sx-row{grid-template-columns:46px 1fr 1fr 24px;grid-auto-rows:auto;padding:12px 14px 12px 4px;gap:6px 12px}
  html:not([data-template="classic"]) .sx-route{grid-column:2/4}
  html:not([data-template="classic"]) .sx-stat{justify-self:end}
}

html[data-mode="night"] .card,html[data-mode="night"] .dgrid,html[data-mode="night"] .ditem{color:var(--sk-ink)}
html[data-mode="night"] .loc-bar{background:var(--sk-surface-2);border-color:var(--sk-hair);color:var(--sk-ink-2)}

/* ── Night: the few things every template hard-codes light ── */
html[data-mode="night"] .amp-logo-chip{background:#fff;border:1px solid var(--c-hair)}
html[data-mode="night"] .login-brand{display:inline-block;background:#fff;border-radius:10px;padding:6px 14px;margin:0 auto 20px}
html[data-mode="night"] #page-login .login-card{text-align:center}
html[data-mode="night"] #page-login .login-card>*:not(.login-brand){text-align:left}

/* ── Appearance picker (all templates) ── */
.ap-menu{position:relative;display:inline-block}
.ap-pop,.sk-more-menu{--c-muted:var(--c-muted-page);--c-muted-2:var(--c-muted-2-page);--c-ink-3:var(--c-ink-3-page)}   /* undo the bar's grey scoping inside dropdowns */
.ap-menu>summary{list-style:none;display:inline-flex;align-items:center;gap:6px;cursor:pointer;white-space:nowrap}
.ap-menu>summary::-webkit-details-marker{display:none}
.ap-glyph{font-size:13px;line-height:1}
.ap-pop{position:absolute;top:calc(100% + 6px);right:0;min-width:260px;background:var(--c-surface);color:var(--c-ink);border:1px solid var(--c-hair);border-radius:12px;box-shadow:0 12px 32px -12px rgba(0,0,0,.35);padding:8px;z-index:60;text-align:left}
.ap-h{font-size:10.5px;font-weight:800;letter-spacing:.06em;text-transform:uppercase;color:var(--c-ink-3);padding:6px 8px 4px}
.ap-row{display:flex;flex-direction:column;gap:2px;width:100%;padding:8px 10px;border:1px solid transparent;border-radius:8px;background:transparent;color:var(--c-ink);font:inherit;text-align:left;cursor:pointer}
.ap-row b{font-size:13px;font-weight:700}
.ap-row span{font-size:11.5px;color:var(--c-ink-3)}
.ap-row:hover{background:var(--c-surface-2)}
.ap-row.on{border-color:var(--c-accent);background:var(--c-accent-soft)}
.ap-row.on b::after{content:" \2713";color:var(--c-accent)}
.ap-seg{display:flex;gap:4px;padding:4px 8px 6px}
.ap-opt{flex:1;padding:6px 0;border:1px solid var(--c-hair);border-radius:8px;background:var(--c-surface);color:var(--c-ink-2);font:inherit;font-size:12.5px;font-weight:700;cursor:pointer}
.ap-opt.on{background:var(--c-btn);color:var(--c-btn-ink);border-color:var(--c-btn)}
html[data-template="classic"] .topbar .ap-menu>summary{color:var(--c-bar-ink);border:1px solid rgba(255,255,255,.25);border-radius:999px;padding:4px 10px}
html[data-template="classic"] .topbar .ap-menu>summary:hover{background:var(--c-bar-2)}

/* ═══════════════ Compact (2026-09-13): dense operator view. Layout/type/density only — colours are tokens. ═══════════════ */
html[data-template="compact"] body{font-size:12.5px;line-height:1.35;font-family:-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,sans-serif;font-variant-numeric:tabular-nums}
html[data-template="compact"] .topbar{height:44px;padding:0 12px;background:var(--c-bar);color:var(--c-bar-ink);border-bottom:1px solid var(--c-hair)}
html[data-template="compact"] .topbar .btn-out{padding:4px 9px;font-size:11.5px;border-radius:6px;color:var(--c-bar-ink);border:1px solid rgba(255,255,255,.18);background:transparent}
html[data-template="compact"] .topbar .btn-out:hover{background:var(--c-bar-2)}
html[data-template="compact"] .topbar .qnav-pill,html[data-template="compact"] .topbar .sys-pill{background:var(--c-bar-2);color:var(--c-bar-ink);border:1px solid rgba(255,255,255,.12);padding:2px 7px;font-size:11px}
html[data-template="compact"] .topbar #fscPill{background:var(--c-bar-2);color:var(--c-bar-ink);border-color:var(--c-bar-2);padding:3px 9px;font-size:11.5px;gap:10px}
html[data-template="compact"] .topbar-logo{color:var(--c-bar-ink)}
html[data-template="compact"] .topbar{--c-muted:var(--c-bar-muted);--c-muted-2:var(--c-bar-muted);--c-ink-3:var(--c-bar-ink)}   /* the dark bar gets bar greys, not surface greys */
html[data-template="compact"] .topbar-logo>span:not(.amp-logo-chip){color:var(--c-bar-muted)}
html[data-template="compact"] .topbar-info{color:var(--c-bar-muted);font-size:11px;max-width:150px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
html[data-template="compact"] #shift-btn{max-width:200px;overflow:hidden;text-overflow:ellipsis}
html[data-template="compact"] .sk-side{top:44px;width:184px;gap:1px;padding:8px 6px 12px}
html[data-template="compact"] .sk-gh{height:24px;font-size:10px;padding:0 6px 0 8px}
html[data-template="compact"] .sk-item{height:26px;font-size:12px;padding:0 8px;border-radius:4px;gap:8px}
html[data-template="compact"] .sk-item svg{width:14px;height:14px}
html[data-template="compact"] .sk-item .sk-n{font-size:10px;padding:0 6px;min-width:18px}
html[data-template="compact"] #page-admin .main{max-width:none;margin:0 0 0 184px;padding:12px 16px 24px}
html[data-template="compact"] .sk-h1{font-family:inherit;font-size:18px;font-weight:700;letter-spacing:-.01em}
html[data-template="compact"] .sk-sub{font-size:12px;padding-bottom:2px}
html[data-template="compact"] .sk-head{margin:0 0 10px;gap:12px}
html[data-template="compact"] .sk-actions .btn{height:26px;padding:0 10px}
html[data-template="compact"] .sk-views{padding:2px;margin:0 0 8px;border-radius:6px}
html[data-template="compact"] .sk-view{height:24px;padding:0 9px;font-size:12px;border-radius:4px}
html[data-template="compact"] .card{background:transparent;border:0;border-top:1px solid var(--c-hair);border-radius:0;box-shadow:none;padding:10px 0;margin-bottom:8px}
html[data-template="compact"] .card .card{border-top:0;padding:6px 0}
html[data-template="compact"] .btn{padding:0 10px;height:26px;line-height:24px;font-size:12px;border-radius:6px;font-weight:600}
html[data-template="compact"] input,html[data-template="compact"] select,html[data-template="compact"] textarea{padding:3px 8px;font-size:12.5px;border-radius:6px;min-height:28px}
html[data-template="compact"] textarea{min-height:56px}
html[data-template="compact"] th{padding:5px 8px;font-size:10.5px}
html[data-template="compact"] td{padding:5px 8px;height:30px}
html[data-template="compact"] .subtabs{padding:0}
html[data-template="compact"] .stab{padding:8px 10px;font-size:12px}
/* tiles → one stat strip */
html[data-template="compact"] .sx-tiles{display:flex;flex-wrap:wrap;gap:0;margin-bottom:8px;border:1px solid var(--c-hair);border-radius:6px;background:var(--c-surface);overflow:hidden}
html[data-template="compact"] .sx-tile{flex:0 0 auto;display:flex;flex-direction:row;align-items:baseline;gap:8px;padding:6px 12px;border:0;border-right:1px solid var(--c-hair);border-radius:0;background:transparent;box-shadow:none}
html[data-template="compact"] .sx-tile:last-child{border-right:0}
html[data-template="compact"] .sx-tile:hover{transform:none;box-shadow:none;background:var(--c-surface-2);border-color:var(--c-hair)}
html[data-template="compact"] .sx-tile.on{box-shadow:inset 0 -2px 0 var(--c-accent);border-color:var(--c-hair)}
html[data-template="compact"] .sx-tile .tn{font-size:15px;font-weight:700;font-family:inherit;letter-spacing:0;line-height:1}
html[data-template="compact"] .sx-tile .tl{order:0;margin:0;font-size:10.5px;text-transform:none;letter-spacing:0;white-space:nowrap}
html[data-template="compact"] .sx-tile .ts{display:none}
html[data-template="compact"] .sx-tile .tdot{width:6px;height:6px;margin-right:0}
/* load rows */
html[data-template="compact"] #a-ships-table{border-radius:6px;box-shadow:none}
html[data-template="compact"] .ship-card{border-radius:0;margin-bottom:0;box-shadow:none}
html[data-template="compact"] .sx-head{min-height:28px;font-size:10.5px;padding:0 10px 0 8px;grid-template-columns:12px 34px 150px minmax(180px,1fr) 176px 160px 108px 18px;gap:0 10px}
html[data-template="compact"] .sx-row{min-height:40px;padding:4px 10px 4px 30px;gap:0 10px;grid-template-columns:34px 150px minmax(180px,1fr) 176px 160px 108px 18px}
html[data-template="compact"] .sx-av{width:28px;height:28px;border-radius:6px;font-size:10.5px}
html[data-template="compact"] .sx-order{font-size:12.5px;font-weight:700}
html[data-template="compact"] .sx-lane{font-size:12.5px;font-weight:600}
html[data-template="compact"] .sx-meta,html[data-template="compact"] .sx-sub,html[data-template="compact"] .sx-car .c2{font-size:11px;margin-top:1px}
html[data-template="compact"] .sx-car .c{font-size:12.5px}
html[data-template="compact"] .sx-docs{margin-top:3px}
html[data-template="compact"] .sx-prog{margin-top:4px;max-width:200px}
html[data-template="compact"] .sx-dates{font-size:11.5px}
html[data-template="compact"] .sx-badge{height:20px;padding:0 7px;font-size:10.5px;font-weight:700}
html[data-template="compact"] .sx-stat .btn-s{margin-top:4px;font-size:11px;padding:2px 8px}
html[data-template="compact"] .srow input,html[data-template="compact"] .srow select{height:28px;min-height:28px;border-radius:6px;padding:0 10px;box-shadow:none;font-weight:500}
html[data-template="compact"] .srow{gap:6px}
html[data-template="compact"] .srow select{flex:0 1 auto;max-width:168px;font-size:12px}
html[data-template="compact"] .srow input[type="text"],html[data-template="compact"] .srow input[type="search"]{flex:1 1 220px;min-width:200px}
@media (max-width:1250px){
  html[data-template="compact"] .sx-row{grid-template-columns:34px 1fr 1fr 18px;padding:8px 10px 8px 4px;gap:4px 10px}
}
html:is([data-template="modern"],[data-template="modern2"]) .sys-pill.is-down{background:var(--c-bad-solid);color:var(--c-on-solid);border-color:var(--c-bad-solid)}
html:is([data-template="modern"],[data-template="modern2"]) .sys-pill.is-degraded{background:var(--c-warn-soft);color:var(--c-warn);border-color:var(--c-warn-line)}

/* ═══════════════ Operations boards: Dock Watch, Escalations, Bazaar, Extra Charges (2026-09-13) ═══════════════ */
/* Modern */
html:is([data-template="modern"],[data-template="modern2"]) .op-tile,html:is([data-template="modern"],[data-template="modern2"]) .xc-tile{border-radius:var(--sk-r);box-shadow:var(--sk-shadow);padding:12px 14px 13px;min-width:124px}
html:is([data-template="modern"],[data-template="modern2"]) .op-tile.on{border:1px solid var(--tc);box-shadow:0 0 0 1.5px var(--tc)}
html:is([data-template="modern"],[data-template="modern2"]) .op-tile-n,html:is([data-template="modern"],[data-template="modern2"]) .xc-tile-val{font-family:var(--sk-serif);font-size:28px;font-weight:600;letter-spacing:-.015em;line-height:1.05}
html:is([data-template="modern"],[data-template="modern2"]) .op-tile-l,html:is([data-template="modern"],[data-template="modern2"]) .xc-tile-lbl{font-size:12px;font-weight:700;color:var(--c-muted);margin-top:4px}
html:is([data-template="modern"],[data-template="modern2"]) .op-card{border-radius:var(--sk-r);box-shadow:var(--sk-shadow)}
html:is([data-template="modern"],[data-template="modern2"]) .op-card.open{box-shadow:0 0 0 1.5px var(--c-accent),var(--sk-shadow)}
html:is([data-template="modern"],[data-template="modern2"]) .op-table,html:is([data-template="modern"],[data-template="modern2"]) .xc-grouped-table{background:var(--c-surface);border:1px solid var(--c-hair);border-radius:var(--sk-r);box-shadow:var(--sk-shadow);overflow:hidden;border-collapse:separate!important;border-spacing:0}
html:is([data-template="modern"],[data-template="modern2"]) .op-table th,html:is([data-template="modern"],[data-template="modern2"]) .xc-grouped-table th{background:var(--c-surface-2);color:var(--c-muted);font-size:11.5px!important;font-weight:800!important;letter-spacing:0!important;text-transform:none!important;border-bottom:1px solid var(--c-hair-2)!important}
html:is([data-template="modern"],[data-template="modern2"]) .op-table td{border-bottom:1px solid var(--c-hair-2)}
html:is([data-template="modern"],[data-template="modern2"]) .op-table tbody tr:hover td{background:var(--c-surface-2)}
html:is([data-template="modern"],[data-template="modern2"]) #fpw-tiles,html:is([data-template="modern"],[data-template="modern2"]) #esc-tiles,html:is([data-template="modern"],[data-template="modern2"]) #bazaar-tiles{gap:10px!important}
/* Compact */
html[data-template="compact"] #fpw-tiles,html[data-template="compact"] #esc-tiles,html[data-template="compact"] #bazaar-tiles,html[data-template="compact"] #xc-summary>div{gap:0!important;border:1px solid var(--c-hair);border-radius:6px;background:var(--c-surface);overflow:hidden;flex-wrap:wrap}
html[data-template="compact"] .op-tile,html[data-template="compact"] .xc-tile{display:flex;align-items:baseline;gap:7px;min-width:0!important;padding:6px 12px;border:0;border-right:1px solid var(--c-hair);border-radius:0;background:transparent!important;box-shadow:none;transform:none!important}
html[data-template="compact"] .op-tile.on,html[data-template="compact"] .xc-tile.active{border:0;border-right:1px solid var(--c-hair);box-shadow:inset 0 -2px 0 var(--tc,currentColor)!important;background:var(--c-surface-2)!important}
html[data-template="compact"] .op-tile-n,html[data-template="compact"] .xc-tile-val{font-size:15px;font-weight:700;line-height:1}
html[data-template="compact"] .op-tile-l,html[data-template="compact"] .xc-tile-lbl{font-size:10.5px;margin:0;white-space:nowrap}
html[data-template="compact"] #xc-summary .btn-out{margin-left:auto;align-self:center;padding:0 10px}
html[data-template="compact"] .op-card{border-radius:0;margin-bottom:0;border-width:0 0 1px 0}
html[data-template="compact"] .op-card:first-child{border-top-width:1px}
html[data-template="compact"] .op-card>div:first-child{padding:6px 8px!important;gap:8px!important}
html[data-template="compact"] .op-table th,html[data-template="compact"] .xc-grouped-table th{padding:4px 7px!important;font-size:10px!important}
html[data-template="compact"] .op-table td,html[data-template="compact"] .xc-grouped-table td,html[data-template="compact"] .xc-po-row td{padding:4px 7px!important;font-size:12px}
html[data-template="compact"] .op-table{font-size:12px!important}
html[data-template="compact"] #shift-btn{background:var(--c-bar-2)!important;border-color:transparent!important;color:var(--c-bar-ink)!important;max-width:200px;overflow:hidden;text-overflow:ellipsis}
/* Night: the Extra Charges contract banner keeps its manila gradient in Day (Classic-exact); at night it sits on a raised surface */
html[data-mode="night"] .xc-po-banner td{background:var(--c-surface-3)!important}
html[data-mode="night"] .xc-po-banner td::before{background:var(--c-accent)!important}

/* ═══════════════ Modern 2 (2026-09-13): FleetGen-style — white grouped sidebar, no top bar, chips, airy tables ═══════════════ */
html[data-template="modern2"] body{font-family:var(--sk-sans)}
html[data-template="modern2"] #page-admin .topbar{display:none} /* admin only: the sidebar carries sign-out + appearance; customer and carrier pages keep the bar */
html[data-template="modern2"] .sk-side{top:0;width:250px;padding:14px 12px 14px;gap:2px}
html[data-template="modern2"] #page-admin .main{margin:0 0 0 250px;max-width:none;padding:20px 22px 28px}
@media (max-width:900px){ /* phone: no sidebar, so no offset, and the bar (sign out, appearance) comes back — must sit AFTER the two rules above (same specificity) */
  html[data-template="modern2"] #page-admin .main{margin:0;padding:16px}
  html[data-template="modern2"] #page-admin .topbar{display:flex}
}
/* sidebar chrome (built for every non-classic template, shown only here) */
.sk-brand,.sk-jump,.sk-foot2{display:none}
html[data-template="modern2"] .sk-brand{display:flex;align-items:center;justify-content:space-between;padding:2px 8px 12px}
.sk-logo{display:flex;align-items:center;gap:8px;font-weight:800;font-size:16px;letter-spacing:-.02em;color:var(--c-ink)}
.sk-logo i{width:26px;height:26px;border-radius:7px;background:var(--c-btn);color:var(--c-btn-ink);display:grid;place-items:center;font-style:normal;font-size:12px;font-weight:800}
.sk-bell{position:relative;color:var(--c-muted);border:0;background:transparent;cursor:pointer;padding:4px;font:inherit}
.sk-bell svg{width:18px;height:18px;stroke:currentColor;fill:none;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round;display:block}
.sk-bell b{position:absolute;top:-4px;right:-6px;background:var(--c-bad-solid);color:var(--c-on-solid);font-size:9.5px;font-weight:800;border-radius:999px;padding:1px 5px}
.sk-bell b[hidden]{display:none}
html[data-template="modern2"] .sk-jump{display:flex;align-items:center;gap:8px;height:34px;padding:0 10px;border:1px solid var(--c-hair);border-radius:9px;color:var(--c-muted);font:inherit;font-size:12px;margin:0 2px 6px;cursor:pointer;background:var(--c-surface);white-space:nowrap;overflow:hidden;width:calc(100% - 4px);text-align:left}
.sk-jump svg{width:14px;height:14px;stroke:currentColor;fill:none;stroke-width:2;stroke-linecap:round;flex:none}
.sk-jump kbd{margin-left:auto;font:inherit;font-size:10.5px;font-weight:800;color:var(--c-muted);border:1px solid var(--c-hair);border-radius:5px;padding:1px 5px;background:var(--c-surface-2)}
html[data-template="modern2"] .sk-gh{font-size:10.5px;letter-spacing:.08em;color:var(--c-muted);height:30px;padding:0 10px}
html[data-template="modern2"] .sk-item{height:36px;font-size:13.5px;font-weight:600;color:var(--c-ink-2);border-radius:9px;gap:10px}
html[data-template="modern2"] .sk-item svg{width:17px;height:17px;stroke-width:1.7;opacity:1;color:var(--c-muted)}
html[data-template="modern2"] .sk-item:hover{background:var(--c-surface-2);color:var(--c-ink)}
html[data-template="modern2"] .sk-item.on{background:var(--c-surface-3);color:var(--c-ink);font-weight:700}
html[data-template="modern2"] .sk-item.on svg{color:var(--c-ink)}
html[data-template="modern2"] .sk-item .sk-n{font-size:10.5px;font-weight:800;padding:1px 7px;background:var(--c-surface-3);color:var(--c-ink-3)}
html[data-template="modern2"] .sk-item .sk-n.hot{background:var(--c-bad-soft);color:var(--c-bad)}
html[data-template="modern2"] .sk-foot{display:none}
html[data-template="modern2"] .sk-foot2{display:flex;flex-direction:column;gap:8px;margin-top:auto;padding-top:12px}
.sk-card{border:1px solid var(--c-hair);border-radius:10px;padding:9px 12px;display:flex;align-items:center;gap:10px;background:var(--c-surface);cursor:pointer;color:var(--c-ink);font:inherit;text-align:left;width:100%}
.sk-card .lbl{font-size:10.5px;font-weight:800;letter-spacing:.08em;text-transform:uppercase;color:var(--c-muted)}
.sk-card .v{font-weight:700;font-size:12.5px;display:flex;align-items:center;gap:6px;margin-top:1px}
.sk-card .dot{width:7px;height:7px;border-radius:50%;background:var(--c-muted-2);display:inline-block;flex:none}
.sk-card .dot.is-live{background:var(--c-ok)}.sk-card .dot.is-down{background:var(--c-bad)}.sk-card .dot.is-degraded{background:var(--c-warn)}
/* ⛽ fuel-surcharge card: two label+value pairs, same readout as the Classic top-bar chip */
.sk-card .v .k{font-size:10.5px;font-weight:800;color:var(--c-muted);margin-right:1px}
.sk-card .wk{font-size:10.5px;font-weight:600;color:var(--c-muted);margin:1px 0 2px}
.sk-card .v .k+span{font-variant-numeric:tabular-nums;margin-right:7px}
.sk-card.is-stale{border-color:var(--c-warn)}
.sk-card .av{width:34px;height:34px;border-radius:9px;background:var(--c-surface-3);color:var(--c-ink);display:grid;place-items:center;font-weight:800;font-size:12px;flex:none}
.sk-card .who{min-width:0;line-height:1.25;flex:1}
.sk-card .who b{display:block;font-size:13px}
.sk-card .who span{display:block;color:var(--c-muted);font-size:11.5px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.sk-card .chev{color:var(--c-muted-2);margin-left:auto}
.sk-user{position:relative}
.sk-user>summary{list-style:none}
.sk-user>summary::-webkit-details-marker{display:none}
.sk-user-menu{position:absolute;left:0;right:0;bottom:calc(100% + 6px);background:var(--c-surface);border:1px solid var(--c-hair);border-radius:12px;box-shadow:var(--sk-shadow);padding:6px;z-index:70;display:flex;flex-direction:column;gap:2px}
.sk-user-menu button{display:flex;align-items:center;gap:8px;width:100%;padding:8px 10px;border:0;background:transparent;color:var(--c-ink);font:inherit;font-size:13px;font-weight:600;text-align:left;border-radius:8px;cursor:pointer}
.sk-user-menu button:hover{background:var(--c-surface-2)}
.sk-user-menu .sk-n{margin-left:auto;font-size:10.5px;font-weight:800;padding:1px 7px;border-radius:999px;background:var(--c-surface-3);color:var(--c-ink-3)}
.sk-user-menu .sk-n[hidden]{display:none}
.sk-user-menu .sep{height:1px;background:var(--c-hair-2);margin:4px 2px}
.sk-user-menu .ap-menu{display:block}
.sk-user-menu .ap-menu>summary{display:flex;align-items:center;gap:8px;width:100%;padding:8px 10px;border:0;background:transparent;color:var(--c-ink);font:inherit;font-size:13px;font-weight:600;text-align:left;border-radius:8px;cursor:pointer}
.sk-user-menu .ap-menu>summary:hover{background:var(--c-surface-2)}
.sk-user-menu .ap-pop{position:static;border:0;box-shadow:none;padding:2px 0 4px;min-width:0;background:transparent}   /* opens inline: the sidebar's overflow would clip a floating panel */
.sk-user-menu{max-height:calc(100vh - 110px);overflow:auto}
/* page header, quick views, tiles, search, table */
html[data-template="modern2"] .sk-h1{font-family:var(--sk-sans);font-size:18px;font-weight:700;letter-spacing:-.01em}
html[data-template="modern2"] .sk-sub{font-size:12.5px;padding-bottom:1px}
html[data-template="modern2"] .sk-head{align-items:center;margin:0 0 14px}
html[data-template="modern2"] .btn{border-radius:999px;font-weight:700;font-size:12.5px;box-shadow:none}
html[data-template="modern2"] .btn-p{background:var(--c-btn);color:var(--c-btn-ink);border-color:var(--c-btn)}
html[data-template="modern2"] .sk-views{border-radius:10px;padding:3px}
html[data-template="modern2"] .sk-view{border-radius:8px;height:30px}
html[data-template="modern2"] .sx-tiles{gap:8px;grid-template-columns:repeat(10,minmax(0,1fr))}
@media (max-width:1300px){html[data-template="modern2"] .sx-tiles{grid-template-columns:repeat(5,minmax(0,1fr))}}
html[data-template="modern2"] .sx-tile{border-radius:10px;padding:10px 12px 11px;box-shadow:none;gap:2px}
html[data-template="modern2"] .sx-tile .tn{font-family:var(--sk-sans);font-size:20px;font-weight:800;letter-spacing:-.02em}
html[data-template="modern2"] .sx-tile .tl{font-size:11.5px;font-weight:600;color:var(--c-muted);margin:0}
html[data-template="modern2"] .sx-tile .ts{display:none}
html[data-template="modern2"] .sx-tile.on{border-color:var(--c-hair);box-shadow:0 0 0 1.5px var(--c-ink) inset}
html[data-template="modern2"] .sx-tile:hover{border-color:var(--c-hair);box-shadow:none;background:var(--c-surface-2)}
html[data-template="modern2"] .srow input,html[data-template="modern2"] .srow select{height:34px;box-shadow:none;border-radius:999px}
html[data-template="modern2"] #a-ships-table{box-shadow:none;border-radius:12px}
html[data-template="modern2"] .sx-head{background:var(--c-surface-2);font-size:11px;letter-spacing:.06em;text-transform:uppercase;color:var(--c-muted);min-height:38px}
html[data-template="modern2"] .sx-av{width:34px;height:34px;border-radius:9px;background:var(--c-surface-3)!important;color:var(--c-ink);font-size:11.5px}
html[data-template="modern2"] .sx-order{font-size:14px}
html[data-template="modern2"] .sx-badge{border-radius:999px;height:24px;font-size:11.5px;font-weight:800;padding:0 10px 0 8px}
html[data-template="modern2"] .sx-docs .doc{border-radius:999px;font-weight:800;color:var(--c-ink-3)}
html[data-template="modern2"] .sx-chev{color:var(--c-muted-2)}
html[data-template="modern2"] .sx-stat .btn-s{border-radius:8px;height:28px;font-weight:700}
html[data-template="modern2"] .card,html[data-template="modern2"] .op-card,html[data-template="modern2"] .op-table,html[data-template="modern2"] .xc-grouped-table{box-shadow:none;border-radius:12px}
html[data-template="modern2"] .op-tile,html[data-template="modern2"] .xc-tile{box-shadow:none;border-radius:10px;padding:10px 12px 11px;min-width:110px}
html[data-template="modern2"] .op-tile-n,html[data-template="modern2"] .xc-tile-val{font-family:var(--sk-sans);font-size:20px;font-weight:800}
/* load detail as a modal */
.m2-modal{display:none}
html[data-template="modern2"] .m2-modal.open{display:block;position:fixed;inset:0;z-index:900;background:rgba(16,24,40,.45)}
.m2-box{position:relative;max-width:1080px;margin:36px auto;max-height:calc(100vh - 72px);overflow:auto;background:var(--c-surface);border:1px solid var(--c-hair);border-radius:16px;box-shadow:0 30px 80px -30px rgba(16,24,40,.5)}
.m2-h{display:flex;align-items:center;gap:12px;padding:16px 18px;border-bottom:1px solid var(--c-hair);position:sticky;top:0;background:var(--c-surface);z-index:1}
.m2-h .sq{width:40px;height:40px;border-radius:10px;background:var(--c-btn);color:var(--c-btn-ink);display:grid;place-items:center;font-weight:800;flex:none}
.m2-h .t{font-weight:800;font-size:16px;display:flex;align-items:center;gap:8px;flex-wrap:wrap}
.m2-h .t small{font-weight:600;color:var(--c-muted);font-size:12.5px}
.m2-h .s{color:var(--c-muted);font-size:12px;margin-top:2px}
.m2-h .x{margin-left:auto;display:flex;gap:8px}
.m2-body{padding:14px 18px 18px}
html[data-template="modern2"] .m2-body .ship-body{border-top:0;display:block}
html[data-template="modern2"] .srow{gap:8px}
html[data-template="modern2"] .srow select{flex:0 1 auto;max-width:190px}
html[data-template="modern2"] .srow input[type="text"],html[data-template="modern2"] .srow input[type="search"]{flex:1 1 240px;min-width:220px}
/* Modern 2: the Tasks board loses Classic's amber panel and tinted cards — neutral surfaces, colour only as a thin edge */
html[data-template="modern2"] .tk-side{background:var(--c-surface);border-color:var(--c-hair)}
html[data-template="modern2"] .tk-side-h,html[data-template="modern2"] .tk-group-h{color:var(--c-muted)}
html[data-template="modern2"] .tk-card:hover{border-color:var(--c-hair);box-shadow:var(--sk-shadow);transform:none}
html[data-template="modern2"] .tk-card-pri-2{background:var(--c-surface);border-color:var(--c-hair);box-shadow:inset 3px 0 0 var(--c-bad)}
html[data-template="modern2"] .tk-card-pri-1{background:var(--c-surface);border-color:var(--c-hair);box-shadow:inset 3px 0 0 var(--c-warn)}
html[data-template="modern2"] .tk-card-mine{box-shadow:inset 3px 0 0 var(--c-accent)}
html[data-template="modern2"] .tk-card-meta .dot{color:var(--c-muted-2)}
html[data-template="modern2"] .tk-search{border-color:var(--c-hair)}
html[data-template="modern2"] .tk-card-notes{background:var(--c-surface-3);border-left-color:var(--c-warn)}
html[data-template="modern2"] .al-toggle{background:var(--c-surface-3);border-color:var(--c-hair)}

/* ═══════════════ Template gallery (2026-09-23): the user menu shows ONE row (the template in use) and opens this ═══════════════
   Reetesh 2026-09-23: "if we have 100 templates then it will be A LONG page". Search + layout filter + thumbnail grid. */
.ap-cur{display:flex;align-items:center;gap:10px;width:100%;padding:7px 8px;border:1px solid var(--c-hair);border-radius:10px;background:var(--c-surface);color:var(--c-ink);font:inherit;text-align:left;cursor:pointer}
.ap-cur:hover{background:var(--c-surface-2)}
.ap-cur .t{display:flex;flex-direction:column;min-width:0;flex:1;line-height:1.25}
.ap-cur .t b{font-size:13px;font-weight:700}
.ap-cur .t span{font-size:11.5px;color:var(--c-ink-3)}
.ap-cur .go{font-size:12px;font-weight:700;color:var(--c-accent);flex:none}
.ap-cur .ap-th{width:52px;height:34px}
.apg{display:none}
.apg.open{display:flex;align-items:flex-start;justify-content:center;position:fixed;inset:0;z-index:950;background:rgba(10,14,28,.5);padding:40px 16px;overflow:auto}
.apg-box{width:min(880px,100%);background:var(--c-surface);color:var(--c-ink);border:1px solid var(--c-hair);border-radius:16px;box-shadow:0 30px 80px -30px rgba(0,0,0,.55);display:flex;flex-direction:column;max-height:calc(100vh - 80px)}
.apg-h{display:flex;align-items:flex-start;gap:14px;padding:18px 20px 12px}
.apg-h h2{margin:0;font-size:18px;font-weight:800;letter-spacing:-.01em}
.apg-h p{margin:3px 0 0;font-size:12.5px;color:var(--c-muted)}
.apg-mode{margin-left:auto}
.apg-mode .ap-seg{padding:0;width:170px}
.apg-x{border:0;background:transparent;color:var(--c-muted);font-size:16px;cursor:pointer;padding:4px 6px;border-radius:8px}
.apg-x:hover{background:var(--c-surface-2);color:var(--c-ink)}
.apg-tools{display:flex;flex-wrap:wrap;gap:8px 12px;align-items:center;padding:0 20px 12px;border-bottom:1px solid var(--c-hair-2)}
.apg-tools input{flex:1 1 220px;height:34px;border:1px solid var(--c-hair);border-radius:9px;padding:0 12px;font:inherit;font-size:13px;background:var(--c-surface);color:var(--c-ink)}
.apg-f{display:flex;flex-wrap:wrap;gap:4px}
.apg-chip{height:30px;padding:0 12px;border:1px solid var(--c-hair);border-radius:999px;background:var(--c-surface);color:var(--c-ink-2);font:inherit;font-size:12px;font-weight:700;cursor:pointer}
.apg-chip:hover{background:var(--c-surface-2)}
.apg-chip.on{background:var(--c-btn);color:var(--c-btn-ink);border-color:var(--c-btn)}
.apg-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(190px,1fr));gap:12px;padding:16px 20px;overflow:auto}
.apg-card{display:flex;flex-direction:column;gap:4px;padding:8px 8px 11px;border:1px solid var(--c-hair);border-radius:12px;background:var(--c-surface);color:var(--c-ink);font:inherit;text-align:left;cursor:pointer}
.apg-card:hover{border-color:var(--c-muted-2)}
.apg-card.on{border-color:var(--c-accent);box-shadow:0 0 0 1.5px var(--c-accent)}
.apg-card .ap-th{width:100%;height:auto;aspect-ratio:16/10;margin-bottom:5px}
.apg-t{display:flex;align-items:center;gap:8px;padding:0 3px}
.apg-t b{font-size:13.5px;font-weight:800}
.apg-t em{font-style:normal;font-size:10.5px;font-weight:800;color:var(--c-accent);background:var(--c-accent-soft);border-radius:999px;padding:1px 7px}
.apg-d{font-size:12px;color:var(--c-muted);padding:0 3px;line-height:1.35}
.apg-l{font-size:11px;font-weight:700;color:var(--c-ink-3);padding:0 3px;margin-top:2px}
.apg-empty{grid-column:1/-1;padding:28px;text-align:center;color:var(--c-muted);font-size:13px}
.apg-foot{display:flex;align-items:center;justify-content:space-between;padding:12px 20px;border-top:1px solid var(--c-hair-2);font-size:12px;color:var(--c-muted)}
.apg :focus-visible{outline:2px solid var(--c-accent);outline-offset:2px}
@media (max-width:600px){ .apg.open{padding:0} .apg-box{border-radius:0;max-height:100vh;min-height:100vh} .apg-grid{grid-template-columns:repeat(2,minmax(0,1fr));gap:8px;padding:12px} .apg-h{flex-wrap:wrap;position:relative;padding-right:52px} .apg-x{position:absolute;top:14px;right:14px} .apg-mode{margin-left:0;order:3;width:100%} .apg-mode .ap-seg{width:100%} }
/* thumbnail: a drawing of the layout in the template's own colours (fixed day colours so every card reads the same in any mode) */
.ap-th{display:grid;position:relative;overflow:hidden;border-radius:7px;border:1px solid rgba(0,0,0,.12);background:var(--th-ground);grid-template-columns:24% 1fr;grid-template-rows:14% 1fr;flex:none}
.ap-th i{display:block}
.ap-th .tb{grid-column:1/-1;background:var(--th-bar)}
.ap-th .sd{background:var(--th-side);display:flex;flex-direction:column;gap:6%;padding:12% 12%;border-right:1px solid rgba(0,0,0,.06)}
.ap-th .sd em{display:block;height:6%;min-height:2px;border-radius:2px;background:var(--th-line)}
.ap-th .sd em.on{background:var(--th-acc)}
.ap-th .mn{display:grid;grid-template-columns:repeat(3,1fr);grid-auto-rows:min-content;gap:6%;padding:8%;align-content:start}
.ap-th .mn .k{height:0;padding-bottom:45%;background:var(--th-card);border-radius:2px;box-shadow:0 0 0 1px rgba(0,0,0,.05)}
.ap-th .mn .rw{grid-column:1/-1;height:0;padding-bottom:5%;background:var(--th-card);border-radius:2px;box-shadow:0 0 0 1px rgba(0,0,0,.05)}
.ap-th[data-b="modern2"]{grid-template-rows:1fr}
.ap-th[data-b="modern2"] .sd,.ap-th[data-b="modern2"] .mn{grid-row:1}
.ap-th[data-b="classic"]{grid-template-columns:1fr;grid-template-rows:14% 9% 1fr}
.ap-th[data-b="classic"] .tabs{background:var(--th-card);display:flex;gap:6%;align-items:center;padding:0 6%;border-bottom:1px solid rgba(0,0,0,.06)}
.ap-th[data-b="classic"] .tabs em{display:block;width:12%;height:28%;border-radius:1px;background:var(--th-line)}
.ap-th[data-b="classic"] .tabs em:first-child{background:var(--th-acc)}
.ap-th[data-b="compact"]{grid-template-columns:18% 1fr;grid-template-rows:10% 1fr}
.ap-th[data-b="compact"] .mn{grid-template-columns:repeat(6,1fr);gap:3%}
.ap-th[data-b="compact"] .mn .k{padding-bottom:22%}
.ap-th[data-b="compact"] .mn .rw{padding-bottom:3%}
.ap-th[data-t="classic"]{--th-bar:#1a1a18;--th-side:#fff;--th-ground:#f5f5f2;--th-card:#fff;--th-acc:#1a1a18;--th-line:#d6d4cc}
.ap-th[data-t="modern"]{--th-bar:#fff;--th-side:#fff;--th-ground:#F2F0EA;--th-card:#fff;--th-acc:#1F3B7A;--th-line:#E3DFD6}
.ap-th[data-t="modern2"]{--th-bar:#fff;--th-side:#fff;--th-ground:#F5F5F7;--th-card:#fff;--th-acc:#0071E3;--th-line:#E5E5EA}
.ap-th[data-t="compact"]{--th-bar:#1a1a18;--th-side:#fff;--th-ground:#f5f5f2;--th-card:#fff;--th-acc:#185fa5;--th-line:#d6d4cc}
.ap-th[data-t="ampnavy"]{--th-bar:#0F2557;--th-side:#0F2557;--th-ground:#EEF1F7;--th-card:#fff;--th-acc:#E0312B;--th-line:#3A5290}
.ap-th[data-t="amproad"]{--th-bar:#111111;--th-side:#fff;--th-ground:#E7E7E4;--th-card:#fff;--th-acc:#D7261E;--th-line:#BDBDB8}
.ap-th[data-t="cargo"]{--th-bar:#0E1840;--th-side:#fff;--th-ground:linear-gradient(#16235A 0 34%,#EEF2F9 34%);--th-card:#fff;--th-acc:#EE4A3A;--th-line:#DCE2EE}

/* ═══════════════ Themes (2026-09-23): colour + type on top of a base layout. html[data-theme] sits after every
   html[data-template] palette at the same specificity, so the theme's tokens win. ═══════════════ */

/* ── Amplify Navy (base Modern 2) — from Amplify-Onboarding-V2-Editorial-3Level.pdf: navy field, red signal, condensed caps ── */
html[data-theme="ampnavy"]{
  --c-ground:#EEF1F7; --c-surface:#FFFFFF; --c-surface-2:#F5F7FB; --c-surface-3:#E8ECF5;
  --c-ink:#0F1E45; --c-ink-2:#2A3960; --c-ink-3:#3E4C70; --c-muted:#56627F; --c-muted-2:#7E8AA6; --c-hair:#D9DFEC; --c-hair-2:#E8ECF4;
  --c-accent:#1B3D8F; --c-accent-soft:#E3EAF8; --c-accent-line:#AFC1E8; --c-accent-solid:#1B3D8F; --c-accent-ink:#FFFFFF;
  --c-navy:#1B3D8F; --c-navy-solid:#1B3D8F;
  --c-btn:#132C6B; --c-btn-ink:#FFFFFF; --c-bar:#0F2557; --c-bar-2:#1B3778; --c-bar-ink:#FFFFFF; --c-bar-muted:#B4C0DC;
  --sd-bg:#0F2557; --sd-ink:#FFFFFF; --sd-ink-2:#D3DBEF; --sd-muted:#94A4CB; --sd-hover:rgba(255,255,255,.07); --sd-on:rgba(255,255,255,.12); --sd-line:rgba(255,255,255,.13); --sd-red:#E0312B;
  --sk-sans:"Inter",system-ui,-apple-system,"Segoe UI",sans-serif; --sk-serif:"Barlow Condensed","Inter",system-ui,sans-serif; --an-cond:"Barlow Condensed","Arial Narrow",sans-serif;
  --sk-shadow:0 1px 2px rgba(15,30,69,.05), 0 10px 26px -18px rgba(15,30,69,.3);
}
html[data-theme="ampnavy"][data-mode="night"]{
  --c-ground:#0A1330; --c-surface:#111D42; --c-surface-2:#16244F; --c-surface-3:#1C2C5C;
  --c-ink:#EEF2FC; --c-ink-2:#C9D2EA; --c-ink-3:#B3BEDB; --c-muted:#9AA6C6; --c-muted-2:#7F8BAC; --c-hair:#25366A; --c-hair-2:#1C2A55;
  --c-accent:#8DB0FF; --c-accent-soft:#1A2D5E; --c-accent-line:#33509A; --c-accent-solid:#2F5BD0; --c-accent-ink:#FFFFFF;
  --c-navy:#8DB0FF; --c-navy-solid:#2F5BD0;
  --c-btn:#EEF2FC; --c-btn-ink:#0A1330; --c-bar:#070F28; --c-bar-2:#16244F; --c-bar-ink:#EEF2FC; --c-bar-muted:#9AA6C6;
  --sd-bg:#070F28; --sd-red:#D33A2F;
}
html[data-theme="ampnavy"] .sk-side{background:var(--sd-bg);border-right-color:transparent}
html[data-theme="ampnavy"] .sk-logo{color:var(--sd-ink)}
html[data-theme="ampnavy"] .sk-logo i{background:var(--sd-red);color:#FFFFFF}
html[data-theme="ampnavy"] .sk-bell{color:var(--sd-muted)}
html[data-theme="ampnavy"] .sk-jump{background:var(--sd-hover);border-color:var(--sd-line);color:var(--sd-muted)}
html[data-theme="ampnavy"] .sk-jump kbd{background:transparent;border-color:var(--sd-line);color:var(--sd-muted)}
html[data-theme="ampnavy"] .sk-gh{font-family:var(--an-cond);font-size:12.5px;font-weight:700;letter-spacing:.1em;color:var(--sd-muted)}
html[data-theme="ampnavy"] .sk-gh:hover{background:var(--sd-hover)}
html[data-theme="ampnavy"] .sk-item{color:var(--sd-ink-2)}
html[data-theme="ampnavy"] .sk-item svg{color:var(--sd-muted)}
html[data-theme="ampnavy"] .sk-item:hover{background:var(--sd-hover);color:var(--sd-ink)}
html[data-theme="ampnavy"] .sk-item.on{background:var(--sd-on);color:var(--sd-ink);box-shadow:inset 3px 0 0 var(--sd-red)}
html[data-theme="ampnavy"] .sk-item.on svg{color:var(--sd-ink)}
html[data-theme="ampnavy"] .sk-item .sk-n{background:var(--sd-line);color:var(--sd-ink)}
html[data-theme="ampnavy"] .sk-item .sk-n.hot{background:var(--sd-red);color:#FFFFFF}
html[data-theme="ampnavy"] .sk-foot2>.sk-card,html[data-theme="ampnavy"] .sk-user>summary.sk-card{background:var(--sd-hover);border-color:var(--sd-line);color:var(--sd-ink)}
html[data-theme="ampnavy"] .sk-foot2>.sk-card .lbl,html[data-theme="ampnavy"] .sk-foot2>.sk-card .wk,html[data-theme="ampnavy"] .sk-foot2>.sk-card .v .k,html[data-theme="ampnavy"] .sk-user>summary .who span,html[data-theme="ampnavy"] .sk-user>summary .chev,html[data-theme="ampnavy"] .sk-foot2>.sk-card .chev{color:var(--sd-muted)}
html[data-theme="ampnavy"] .sk-user>summary .av{background:var(--sd-red);color:#FFFFFF}
html[data-theme="ampnavy"] .sk-h1{font-family:var(--an-cond);font-size:28px;font-weight:700;text-transform:uppercase;letter-spacing:.01em;line-height:1}
html[data-theme="ampnavy"] .sx-tile .tn,html[data-theme="ampnavy"] .op-tile-n,html[data-theme="ampnavy"] .xc-tile-val{font-family:var(--an-cond);font-size:26px;font-weight:700;letter-spacing:0}
html[data-theme="ampnavy"] .card-title{font-family:var(--an-cond);font-size:14px;font-weight:700;letter-spacing:.08em;color:var(--c-ink);display:flex;align-items:center;gap:8px}
html[data-theme="ampnavy"] .card-title::before{content:"";width:14px;height:4px;background:var(--sd-red);border-radius:1px;flex:none}
html[data-theme="ampnavy"] .sx-tile.on{box-shadow:0 0 0 1.5px var(--c-accent) inset}
html[data-theme="ampnavy"] .topbar{box-shadow:inset 0 -3px 0 var(--sd-red)}

/* ── Amplify Road (base Classic) — from amplifylogistics.com: asphalt black bar, concrete ground, one red, square corners, extended heavy type ── */
html[data-theme="amproad"]{
  --c-ground:#E7E7E4; --c-surface:#FFFFFF; --c-surface-2:#F6F6F4; --c-surface-3:#ECECEA;
  --c-ink:#141414; --c-ink-2:#333333; --c-ink-3:#484848; --c-muted:#5C5C5A; --c-muted-2:#737371; --c-hair:#D2D2CE; --c-hair-2:#E4E4E1;
  --c-accent:#B8201A; --c-accent-soft:#FBE8E6; --c-accent-line:#EDB1AC; --c-accent-solid:#D7261E; --c-accent-ink:#FFFFFF;
  --c-navy:#141414; --c-navy-solid:#141414;
  --c-btn:#D7261E; --c-btn-ink:#FFFFFF; --c-bar:#111111; --c-bar-2:#2A2A2A; --c-bar-ink:#FFFFFF; --c-bar-muted:#ABABAB;
  --rd-red:#D7261E; --rd-font:"Archivo","Arial",sans-serif;
}
html[data-theme="amproad"][data-mode="night"]{
  --c-ground:#0E0E0E; --c-surface:#181818; --c-surface-2:#1F1F1F; --c-surface-3:#282828;
  --c-ink:#F1F1EF; --c-ink-2:#D0D0CC; --c-ink-3:#BDBDB8; --c-muted:#A2A29D; --c-muted-2:#878782; --c-hair:#333333; --c-hair-2:#262626;
  --c-accent:#FF6A5F; --c-accent-soft:#3A1614; --c-accent-line:#7A2A24; --c-accent-solid:#D7261E; --c-accent-ink:#FFFFFF;
  --c-navy:#F1F1EF; --c-navy-solid:#3A3A3A;
  --c-btn:#C8231B; --c-btn-ink:#FFFFFF; --c-bar:#000000; --c-bar-2:#1E1E1E; --c-bar-ink:#FFFFFF; --c-bar-muted:#A2A29D;
}
html[data-theme="amproad"] body{font-family:var(--rd-font);font-variation-settings:"wdth" 100;background:var(--c-ground)}
html[data-theme="amproad"] .topbar{box-shadow:inset 0 -3px 0 var(--rd-red)}
html[data-theme="amproad"] .topbar-logo>span:not(.amp-logo-chip):not(#esc-ticker){font-weight:900;font-variation-settings:"wdth" 125;letter-spacing:.04em}
html[data-theme="amproad"] .subtabs{background:var(--c-surface);border-bottom:1px solid var(--c-hair)}
html[data-theme="amproad"] .stab{font-weight:600;font-variation-settings:"wdth" 108}
html[data-theme="amproad"] .stab.active,html[data-theme="amproad"] .nav-group.has-active>.stab{color:var(--c-ink);border-bottom:3px solid var(--rd-red);font-weight:800}
html[data-theme="amproad"] .card-title{font-weight:900;font-variation-settings:"wdth" 125;letter-spacing:.05em;color:var(--c-ink);font-size:11.5px}
html[data-theme="amproad"] .card-title::after{content:"";display:block;width:26px;height:3px;background:var(--rd-red);margin-top:6px}
html[data-theme="amproad"] details.card>summary>.card-title::after{display:none}
html[data-theme="amproad"] .card,html[data-theme="amproad"] .ship-card{border-radius:2px}
html[data-theme="amproad"] .btn,html[data-theme="amproad"] input,html[data-theme="amproad"] select,html[data-theme="amproad"] textarea{border-radius:2px}
html[data-theme="amproad"] .btn-p{background:var(--c-btn);border-color:var(--c-btn);color:var(--c-btn-ink);font-weight:800;font-variation-settings:"wdth" 110}
html[data-theme="amproad"] .sx-tile,html[data-theme="amproad"] .op-tile,html[data-theme="amproad"] .xc-tile{border-radius:2px}
html[data-theme="amproad"] .sx-tile .tn,html[data-theme="amproad"] .op-tile-n,html[data-theme="amproad"] .xc-tile-val{font-weight:900;font-variation-settings:"wdth" 118}

/* ── Cargo Quotes (base Modern) — from cargoquotes.netlify.app/fuel-surcharge: navy band the cards float over, coral CTA, big tabular numbers ── */
html[data-theme="cargo"]{
  --c-ground:#EEF2F9; --c-surface:#FFFFFF; --c-surface-2:#F6F8FC; --c-surface-3:#EBEFF7;
  --c-ink:#0F1B3D; --c-ink-2:#2B3858; --c-ink-3:#445172; --c-muted:#58648A; --c-muted-2:#8791AD; --c-hair:#DCE2EE; --c-hair-2:#E9EDF5;
  --c-accent:#2C47B8; --c-accent-soft:#E4EAFB; --c-accent-line:#B0C0F0; --c-accent-solid:#2C47B8; --c-accent-ink:#FFFFFF;
  --c-navy:#1A2A6C; --c-navy-solid:#1A2A6C;
  --c-btn:#D23626; --c-btn-ink:#FFFFFF; --c-bar:#0E1840; --c-bar-2:#1E2A62; --c-bar-ink:#FFFFFF; --c-bar-muted:#A9B4D6;
  --cq-band:#101B47; --cq-band-2:#1B2B6B; --cq-red:#EF4B3A; --cq-peri:#9DB2FF;
  --sk-sans:"Inter",system-ui,-apple-system,"Segoe UI",sans-serif; --sk-serif:"Inter",system-ui,-apple-system,"Segoe UI",sans-serif;
  --sk-r:16px; --sk-r-sm:9px;
  --sk-shadow:0 1px 2px rgba(15,27,61,.05), 0 14px 34px -22px rgba(15,27,61,.4);
}
html[data-theme="cargo"][data-mode="night"]{
  --c-ground:#0A1030; --c-surface:#121A3E; --c-surface-2:#172150; --c-surface-3:#1D295C;
  --c-ink:#EEF2FC; --c-ink-2:#C9D2EA; --c-ink-3:#B3BEDB; --c-muted:#9AA6C6; --c-muted-2:#7F8BAC; --c-hair:#25336A; --c-hair-2:#1B2754;
  --c-accent:#9DB2FF; --c-accent-soft:#1D2A62; --c-accent-line:#3A4F9E; --c-accent-solid:#3E5BD6; --c-accent-ink:#FFFFFF;
  --c-navy:#9DB2FF; --c-navy-solid:#3E5BD6;
  --c-btn:#D23626; --c-btn-ink:#FFFFFF; --c-bar:#060B22; --c-bar-2:#172150; --c-bar-ink:#EEF2FC; --c-bar-muted:#9AA6C6;
  --cq-band:#060B22; --cq-band-2:#0F1840;
}
html[data-theme="cargo"] #page-admin{background:linear-gradient(180deg,var(--cq-band) 0,var(--cq-band-2) 190px,var(--c-ground) 190px) no-repeat,var(--c-ground);min-height:100vh}
html[data-theme="cargo"] #page-admin .topbar{background:var(--cq-band);border-bottom:1px solid rgba(255,255,255,.08);box-shadow:inset 0 3px 0 var(--cq-red);color:var(--c-bar-ink)}
html[data-theme="cargo"] #page-admin .topbar-logo>span:not(.amp-logo-chip):not(#esc-ticker){color:var(--c-bar-muted)}
html[data-theme="cargo"] #page-admin .topbar .btn-out,html[data-theme="cargo"] #page-admin .topbar .qnav-pill,html[data-theme="cargo"] #page-admin .topbar .sys-pill,html[data-theme="cargo"] #page-admin #fscPill,html[data-theme="cargo"] #page-admin #shift-btn{background:rgba(255,255,255,.07)!important;color:var(--c-bar-ink)!important;border:1px solid rgba(255,255,255,.16)!important}
html[data-theme="cargo"] #page-admin #fscPill .fsc-k,html[data-theme="cargo"] #page-admin #fscPill .fsc-wl,html[data-theme="cargo"] #page-admin #fscPill .fsc-wd,html[data-theme="cargo"] #page-admin .topbar-info{color:var(--c-bar-muted)}
html[data-theme="cargo"] #page-admin .tb-card{color:var(--c-bar-ink)}
html[data-theme="cargo"] .sk-side{background:var(--c-surface)}
html[data-theme="cargo"] .sk-item.on{background:var(--c-accent-soft);color:var(--c-navy);box-shadow:inset 3px 0 0 var(--cq-red)}
html[data-theme="cargo"] #page-admin .sk-head .sk-h1{color:#FFFFFF}
html[data-theme="cargo"] #page-admin .sk-head .sk-sub,html[data-theme="cargo"] #page-admin .sk-head .sk-sub b{color:#C9D3F2}
html[data-theme="cargo"] .sk-h1{font-family:var(--sk-sans);font-weight:800;font-size:30px;letter-spacing:-.02em}
html[data-theme="cargo"] .sx-tile .tn,html[data-theme="cargo"] .op-tile-n,html[data-theme="cargo"] .xc-tile-val{font-family:var(--sk-sans);font-weight:800;font-size:30px;letter-spacing:-.03em}
html[data-theme="cargo"] .card-title{color:var(--c-ink);font-size:14px;font-weight:800;letter-spacing:0;text-transform:none}
html[data-theme="cargo"] .btn-p{background:var(--c-btn);border-color:var(--c-btn);color:var(--c-btn-ink);box-shadow:0 8px 18px -10px var(--cq-red)}
html[data-theme="cargo"] .sk-view.on{background:var(--c-navy-solid);color:#FFFFFF}

/* ═══════════════ Quiet status colour (2026-09-23, Reetesh: "RATE REVIEW AND UPDATE … look ugly and tacky") ═══════════════
   Every template except Classic: status tints are pale washes that sit with the palette, borders are thin, and a row's
   priority shows as a 3px edge on a white row instead of a filled, outlined block. Hundreds of inline styles read these
   tokens, so the fix lands app-wide. Classic keeps its original tints (index.html :root). */
html:not([data-template="classic"]),html[data-theme]{
  --c-bad-soft:#FCEFEE; --c-bad-line:#EFC6C2;
  --c-warn-soft:#FBF3E6; --c-warn-line:#EBD3A9; --c-highlight:#FBF4DF;
  --c-ok-soft:#EAF5EE; --c-ok-line:#BBDEC7;
  --c-note-soft:#F4EEFB; --c-note-line:#D9C7EF;
}
html:not([data-template="classic"])[data-mode="night"],html[data-theme][data-mode="night"]{
  --c-bad-soft:#3A2224; --c-bad-line:#6A3A3A; --c-warn-soft:#352C1C; --c-warn-line:#66512A; --c-highlight:#353019;
  --c-ok-soft:#1D3226; --c-ok-line:#2F5A3E; --c-note-soft:#2D2340; --c-note-line:#57427A;
}
html:not([data-template="classic"]) .dtk-row,html[data-theme] .dtk-row{background:var(--c-surface);border:1px solid var(--c-hair);box-shadow:inset 3px 0 0 var(--c-accent-line)}
html:not([data-template="classic"]) .dtk-row.p1,html[data-theme] .dtk-row.p1{box-shadow:inset 3px 0 0 var(--c-warn-solid)}
html:not([data-template="classic"]) .dtk-row.p2,html[data-theme] .dtk-row.p2{box-shadow:inset 3px 0 0 var(--c-bad-solid)}
html:not([data-template="classic"]) .dtk-row:hover,html[data-theme] .dtk-row:hover{background:var(--c-surface-2)}
/* Sidebar groups (Reetesh 2026-09-23: "Home, Operations, Warehouse … doesnt pop out when you uncollapse"): an OPEN group's
   header turns full-strength ink with an accent chevron, and its items hang off a thin rail, so open vs folded reads at a glance. */
.sk-grp[data-open="1"]>.sk-gh{color:var(--c-ink)}
.sk-grp[data-open="1"]>.sk-gh svg{opacity:1;color:var(--c-accent)}
.sk-grp[data-open="1"]>.sk-items{margin-left:12px;padding-left:6px;border-left:1px solid var(--c-hair)}
.sk-grp[data-open="1"]{margin-bottom:4px}
html[data-theme="ampnavy"] .sk-grp[data-open="1"]>.sk-gh{color:var(--sd-ink)}
html[data-theme="ampnavy"] .sk-grp[data-open="1"]>.sk-gh svg{color:var(--sd-red)}
html[data-theme="ampnavy"] .sk-grp[data-open="1"]>.sk-items{border-left-color:var(--sd-line)}
html[data-theme="ampnavy"] .sk-item.on{box-shadow:inset 3px 0 0 var(--sd-red)}
/* Sidebar legibility (Reetesh 2026-10-05: "make the grid lines more thick … make heading more bold so easier to read").
   A solid 2px rule separates every group, the open-group rail is 3px in the accent tint, the sidebar edge is 2px, and
   group headings are heavier, larger and full-ink even when folded — scannable for the lowest-skill operator. */
html:not([data-template="classic"]) .sk-side{border-right:2px solid var(--c-hair)}
html:not([data-template="classic"]) .sk-grp+.sk-grp{border-top:2px solid var(--c-hair);padding-top:4px;margin-top:2px}
html:not([data-template="classic"]) .sk-grp[data-open="1"]>.sk-items{border-left:3px solid var(--c-accent-line);margin-left:12px;padding-left:6px}
html:not([data-template="classic"]) .sk-gh{font-size:12px;font-weight:900;letter-spacing:.06em;color:var(--c-ink-2)}
html:not([data-template="classic"]) .sk-grp[data-open="1"]>.sk-gh{color:var(--c-ink)}
html[data-template="compact"] .sk-gh{font-size:11px}
html[data-theme="ampnavy"] .sk-grp+.sk-grp{border-top-color:var(--sd-line)}
html[data-theme="ampnavy"] .sk-grp[data-open="1"]>.sk-items{border-left-color:var(--sd-line)}
html[data-theme="ampnavy"] .sk-gh{font-size:13px;font-weight:800;color:var(--sd-ink-2)}
html[data-theme="ampnavy"] .sk-grp[data-open="1"]>.sk-gh{color:var(--sd-ink)}

/* ── Gemini (base Modern 2, 2026-10-13) — Reetesh's Gemini design system: slate-navy sidebar, cool grey ground,
   Amplify blue actions, Inter + Roboto Mono, 8 px corners, Linear/Stripe density. Gemini's own status pairs were
   too faint for text (green #059669 / amber #D97706 / red #DC2626 on their soft fills = 3–4:1), so the TEXT shades
   are darkened to clear 4.5:1 and Gemini's values are kept as the solid fills. Night: same rule (#F87171 → #FCA5A5). ── */
.ap-th[data-t="gemini"]{--th-bar:#FFFFFF;--th-side:#0F172A;--th-ground:#F7F8FA;--th-card:#FFFFFF;--th-acc:#1D5FC4;--th-line:#E5E7EB}
html[data-theme="gemini"]{
  --c-ground:#F7F8FA; --c-surface:#FFFFFF; --c-surface-2:#F9FAFB; --c-surface-3:#F3F4F6;
  --c-ink:#111827; --c-ink-2:#1F2937; --c-ink-3:#374151; --c-muted:#5A6271; --c-muted-2:#9CA3AF; --c-hair:#E5E7EB; --c-hair-2:#F3F4F6;
  --c-accent:#1A4FA0; --c-accent-soft:#EAF1FB; --c-accent-line:#B6CDF1; --c-accent-solid:#1D5FC4; --c-accent-ink:#FFFFFF;
  --c-navy:#1D5FC4; --c-navy-solid:#1D5FC4;
  --c-btn:#1D5FC4; --c-btn-ink:#FFFFFF; --c-bar:#FFFFFF; --c-bar-2:#F3F4F6; --c-bar-ink:#111827; --c-bar-muted:#5A6271;
  --c-ok:#065F46; --c-ok-soft:#D1FAE5; --c-ok-line:#6EE7B7; --c-ok-solid:#059669;
  --c-warn:#7C2D12; --c-warn-soft:#FEF3C7; --c-warn-line:#FCD34D; --c-warn-solid:#B45309; --c-gold:#92400E; --c-highlight:#FEF9C3;
  --c-bad:#991B1B; --c-bad-soft:#FEE2E2; --c-bad-line:#FCA5A5; --c-bad-solid:#DC2626;
  --c-note:#6D28D9; --c-note-soft:#EDE9FE; --c-note-line:#C4B5FD; --c-note-solid:#7C3AED;
  --c-muted-solid:#6B7280; --c-amp:#1D5FC4; --c-ccg:#C8102E; --c-cfl:#0E7C86;
  --sd-bg:#0F172A; --sd-ink:#F8FAFC; --sd-ink-2:#CBD5E1; --sd-muted:#94A3B8; --sd-hover:rgba(255,255,255,.06); --sd-on:rgba(255,255,255,.10); --sd-line:rgba(255,255,255,.10); --sd-acc:#2563EB;
  --sk-sans:"Inter",system-ui,-apple-system,"Segoe UI",sans-serif; --sk-serif:"Inter",system-ui,-apple-system,"Segoe UI",sans-serif; --sk-mono:"Roboto Mono",ui-monospace,Menlo,monospace;
  --sk-r:8px; --sk-r-sm:6px;
  --sk-shadow:0 1px 2px rgba(17,24,39,.05);
}
html[data-theme="gemini"][data-mode="night"]{
  --c-ground:#111827; --c-surface:#1F2937; --c-surface-2:#243041; --c-surface-3:#374151;
  --c-ink:#F9FAFB; --c-ink-2:#E5E7EB; --c-ink-3:#D1D5DB; --c-muted:#B4BAC4; --c-muted-2:#6B7280; --c-hair:#374151; --c-hair-2:#2B3544;
  --c-accent:#93C5FD; --c-accent-soft:#172554; --c-accent-line:#2B4C9A; --c-accent-solid:#2563EB; --c-accent-ink:#FFFFFF;
  --c-navy:#93C5FD; --c-navy-solid:#2563EB;
  --c-btn:#2563EB; --c-btn-ink:#FFFFFF; --c-bar:#111827; --c-bar-2:#1F2937; --c-bar-ink:#F9FAFB; --c-bar-muted:#9CA3AF;
  --c-ok:#6EE7B7; --c-ok-soft:#022C22; --c-ok-line:#047857; --c-ok-solid:#059669;
  --c-warn:#FCD34D; --c-warn-soft:#451A03; --c-warn-line:#92400E; --c-warn-solid:#B45309; --c-gold:#FCD34D; --c-highlight:#422006;
  --c-bad:#FCA5A5; --c-bad-soft:#450A0A; --c-bad-line:#991B1B; --c-bad-solid:#DC2626;
  --c-note:#C4B5FD; --c-note-soft:#3B2A63; --c-note-line:#5B21B6; --c-note-solid:#7C3AED;
  --c-muted-solid:#6B7280; --c-on-solid:#FFFFFF; --c-amp:#60A5FA; --c-ccg:#F87171; --c-cfl:#2DD4BF;
  --sd-bg:#0B1120; --sd-acc:#2563EB;
  --sk-shadow:0 1px 2px rgba(0,0,0,.4);
  color-scheme:dark;
}
html[data-theme="gemini"] .sk-side{background:var(--sd-bg);border-right-color:transparent}
html[data-theme="gemini"] .sk-logo{color:var(--sd-ink)}
html[data-theme="gemini"] .sk-logo i{background:var(--sd-acc);color:#FFFFFF}
html[data-theme="gemini"] .sk-bell{color:var(--sd-muted)}
html[data-theme="gemini"] .sk-jump{background:var(--sd-hover);border-color:var(--sd-line);color:var(--sd-muted)}
html[data-theme="gemini"] .sk-jump kbd{background:transparent;border-color:var(--sd-line);color:var(--sd-muted)}
html[data-theme="gemini"] .sk-gh{font-size:11px;font-weight:600;letter-spacing:.08em;color:var(--sd-muted)}
html[data-theme="gemini"] .sk-gh:hover{background:var(--sd-hover)}
html[data-theme="gemini"] .sk-item{color:var(--sd-ink-2)}
html[data-theme="gemini"] .sk-item svg{color:var(--sd-muted)}
html[data-theme="gemini"] .sk-item:hover{background:var(--sd-hover);color:var(--sd-ink)}
html[data-theme="gemini"] .sk-item.on{background:var(--sd-on);color:var(--sd-ink);box-shadow:inset 3px 0 0 var(--sd-acc)}
html[data-theme="gemini"] .sk-item.on svg{color:var(--sd-ink)}
html[data-theme="gemini"] .sk-item .sk-n{background:var(--sd-line);color:var(--sd-ink)}
html[data-theme="gemini"] .sk-item .sk-n.hot{background:var(--sd-acc);color:#FFFFFF}
html[data-theme="gemini"] .sk-foot2>.sk-card,html[data-theme="gemini"] .sk-user>summary.sk-card{background:var(--sd-hover);border-color:var(--sd-line);color:var(--sd-ink)}
html[data-theme="gemini"] .sk-foot2>.sk-card .lbl,html[data-theme="gemini"] .sk-foot2>.sk-card .wk,html[data-theme="gemini"] .sk-foot2>.sk-card .v .k,html[data-theme="gemini"] .sk-user>summary .who span,html[data-theme="gemini"] .sk-user>summary .chev,html[data-theme="gemini"] .sk-foot2>.sk-card .chev{color:var(--sd-muted)}
html[data-theme="gemini"] .sk-user>summary .av{background:var(--sd-acc);color:#FFFFFF}
html[data-theme="gemini"] .sk-grp[data-open="1"]>.sk-gh{color:var(--sd-ink)}
html[data-theme="gemini"] .sk-grp[data-open="1"]>.sk-gh svg{color:var(--sd-acc)}
html[data-theme="gemini"] .sk-grp[data-open="1"]>.sk-items{border-left-color:var(--sd-line)}
html[data-theme="gemini"] .sk-grp+.sk-grp{border-top-color:var(--sd-line)}
html[data-theme="gemini"] .btn{border-radius:var(--sk-r);font-weight:600}
html[data-theme="gemini"] .btn-out{border-radius:var(--sk-r)}
html[data-theme="gemini"] input,html[data-theme="gemini"] select,html[data-theme="gemini"] textarea{border-radius:var(--sk-r-sm)}
html[data-theme="gemini"] .badge{font-size:11px;font-weight:600;letter-spacing:.04em;text-transform:uppercase}
html[data-theme="gemini"] .sk-h1{font-size:24px;font-weight:600;letter-spacing:-.01em}
html[data-theme="gemini"] .sx-tile .tn,html[data-theme="gemini"] .op-tile-n,html[data-theme="gemini"] .xc-tile-val{font-family:var(--sk-mono);font-weight:500;letter-spacing:0}
html[data-theme="gemini"] .card{border-radius:var(--sk-r)}

/* ═══ Five Gemini themes (2026-10-13, Reetesh): Midnight Slate, Warm Paper, Terminal, Pure Structure, Soft Contrast — base Modern 2.
   Gemini supplied Midnight in full and 3–4 anchor colours for the others ("use similar math"); the rest are derived from those anchors.
   Night grounds are deep slate / warm charcoal, never #000, and text is off-white, per Gemini's halation goal; every text pair is
   contrast-checked (tests/ui/contrast-check.js). Component rules are the Gemini theme's, re-keyed per theme. ═══ */
.ap-th[data-t="midnight"]{--th-bar:#FFFFFF;--th-side:#0F172A;--th-ground:#F1F5F9;--th-card:#FFFFFF;--th-acc:#1D5FC4;--th-line:#E2E8F0}
html[data-theme="midnight"]{
  --c-ground:#F1F5F9; --c-surface:#FFFFFF; --c-surface-2:#F8FAFC; --c-surface-3:#EEF2F6; --c-ink:#0F172A; --c-ink-2:#334155; --c-ink-3:#475569; --c-muted:#5B6B80; --c-muted-2:#94A3B8; --c-hair:#E2E8F0; --c-hair-2:#EDF1F5; --c-accent:#1D5FC4; --c-accent-soft:#EFF6FF; --c-accent-line:#BFDBFE; --c-accent-solid:#1D5FC4; --c-btn:#0F172A; --c-btn-ink:#FFFFFF; --c-bar:#FFFFFF; --c-bar-ink:#0F172A; --c-bar-muted:#5B6B80; --c-ok:#15803D; --c-ok-soft:#F0FDF4; --c-ok-line:#BBF7D0; --c-ok-solid:#15803D; --c-warn:#854D0E; --c-warn-soft:#FEFCE8; --c-warn-line:#FEF08A; --c-warn-solid:#A16207; --c-bad:#B91C1C; --c-bad-soft:#FEF2F2; --c-bad-line:#FECACA; --c-bad-solid:#DC2626; --c-note:#6D28D9; --c-note-soft:#F5F3FF; --c-highlight:#FEF9C3; --sd-bg:#0F172A; --sd-ink:#F8FAFC; --sd-ink-2:#CBD5E1; --sd-muted:#94A3B8; --sd-hover:rgba(255,255,255,.06); --sd-on:rgba(255,255,255,.10); --sd-line:rgba(255,255,255,.10); --sd-acc:#0369A1; --c-accent-ink:#FFFFFF; --c-navy:#1D5FC4; --c-navy-solid:#1D5FC4; --c-bar-2:#EEF2F6; --c-gold:#854D0E; --c-muted-solid:#5B6576; --c-on-solid:#FFFFFF; --c-note-line:#6D28D9; --c-note-solid:#7C3AED;  --sk-sans:"Inter",system-ui,-apple-system,"Segoe UI",sans-serif; --sk-serif:"Inter",system-ui,sans-serif; --sk-mono:"JetBrains Mono","Roboto Mono",ui-monospace,Menlo,monospace; --sk-r:8px; --sk-r-sm:6px; --sk-shadow:0 1px 2px rgba(15,23,42,.06);
}
html[data-theme="midnight"][data-mode="night"]{
  --c-ground:#0B1220; --c-surface:#131C2E; --c-surface-2:#1A2438; --c-surface-3:#243049; --c-ink:#E5EAF2; --c-ink-2:#CBD3E0; --c-ink-3:#B6C0D0; --c-muted:#9AA6B8; --c-muted-2:#6B7890; --c-hair:#2A3650; --c-hair-2:#1E2940; --c-accent:#8AB6F8; --c-accent-soft:#16244A; --c-accent-line:#2B4A86; --c-accent-solid:#2563EB; --c-btn:#E5EAF2; --c-btn-ink:#0B1220; --c-bar:#131C2E; --c-bar-ink:#E5EAF2; --c-bar-muted:#9AA6B8; --c-ok:#7FD99A; --c-ok-soft:#12301F; --c-ok-line:#256B40; --c-ok-solid:#15803D; --c-warn:#F2C766; --c-warn-soft:#33270F; --c-warn-line:#7A5B16; --c-warn-solid:#A16207; --c-bad:#F8A3A3; --c-bad-soft:#3B1517; --c-bad-line:#7F2A2A; --c-bad-solid:#B91C1C; --c-note:#C4B0FA; --c-note-soft:#2A1F4A; --c-highlight:#33270F; --sd-bg:#070D18; --sd-acc:#2563EB; --c-accent-ink:#FFFFFF; --c-navy:#8AB6F8; --c-navy-solid:#2563EB; --c-bar-2:#243049; --c-gold:#F2C766; --c-muted-solid:#5B6270; --c-on-solid:#FFFFFF; --c-note-line:#C4B0FA; --c-note-solid:#7C3AED; --sk-shadow:0 1px 2px rgba(0,0,0,.4); color-scheme:dark;
}
html[data-theme="midnight"] .sk-side{background:var(--sd-bg);border-right-color:transparent}
html[data-theme="midnight"] .sk-logo{color:var(--sd-ink)}
html[data-theme="midnight"] .sk-logo i{background:var(--sd-acc);color:#FFFFFF}
html[data-theme="midnight"] .sk-bell{color:var(--sd-muted)}
html[data-theme="midnight"] .sk-jump{background:var(--sd-hover);border-color:var(--sd-line);color:var(--sd-muted)}
html[data-theme="midnight"] .sk-jump kbd{background:transparent;border-color:var(--sd-line);color:var(--sd-muted)}
html[data-theme="midnight"] .sk-gh{font-size:11px;font-weight:600;letter-spacing:.08em;color:var(--sd-muted)}
html[data-theme="midnight"] .sk-gh:hover{background:var(--sd-hover)}
html[data-theme="midnight"] .sk-item{color:var(--sd-ink-2)}
html[data-theme="midnight"] .sk-item svg{color:var(--sd-muted)}
html[data-theme="midnight"] .sk-item:hover{background:var(--sd-hover);color:var(--sd-ink)}
html[data-theme="midnight"] .sk-item.on{background:var(--sd-on);color:var(--sd-ink);box-shadow:inset 3px 0 0 var(--sd-acc)}
html[data-theme="midnight"] .sk-item.on svg{color:var(--sd-ink)}
html[data-theme="midnight"] .sk-item .sk-n{background:var(--sd-line);color:var(--sd-ink)}
html[data-theme="midnight"] .sk-item .sk-n.hot{background:var(--sd-acc);color:#FFFFFF}
html[data-theme="midnight"] .sk-foot2>.sk-card,html[data-theme="midnight"] .sk-user>summary.sk-card{background:var(--sd-hover);border-color:var(--sd-line);color:var(--sd-ink)}
html[data-theme="midnight"] .sk-foot2>.sk-card .lbl,html[data-theme="midnight"] .sk-foot2>.sk-card .wk,html[data-theme="midnight"] .sk-foot2>.sk-card .v .k,html[data-theme="midnight"] .sk-user>summary .who span,html[data-theme="midnight"] .sk-user>summary .chev,html[data-theme="midnight"] .sk-foot2>.sk-card .chev{color:var(--sd-muted)}
html[data-theme="midnight"] .sk-user>summary .av{background:var(--sd-acc);color:#FFFFFF}
html[data-theme="midnight"] .sk-grp[data-open="1"]>.sk-gh{color:var(--sd-ink)}
html[data-theme="midnight"] .sk-grp[data-open="1"]>.sk-gh svg{color:var(--sd-acc)}
html[data-theme="midnight"] .sk-grp[data-open="1"]>.sk-items{border-left-color:var(--sd-line)}
html[data-theme="midnight"] .sk-grp+.sk-grp{border-top-color:var(--sd-line)}
html[data-theme="midnight"] .btn{border-radius:var(--sk-r);font-weight:600}
html[data-theme="midnight"] .btn-out{border-radius:var(--sk-r)}
html[data-theme="midnight"] input,html[data-theme="midnight"] select,html[data-theme="midnight"] textarea{border-radius:var(--sk-r-sm)}
html[data-theme="midnight"] .badge{font-size:11px;font-weight:600;letter-spacing:.04em;text-transform:uppercase}
html[data-theme="midnight"] .sk-h1{font-size:24px;font-weight:600;letter-spacing:-.01em}
html[data-theme="midnight"] .sx-tile .tn,html[data-theme="midnight"] .op-tile-n,html[data-theme="midnight"] .xc-tile-val{font-family:var(--sk-mono);font-weight:500;letter-spacing:0}
html[data-theme="midnight"] .card{border-radius:var(--sk-r)}
.ap-th[data-t="warm"]{--th-bar:#FCFBF9;--th-side:#2B231D;--th-ground:#F5F2ED;--th-card:#FCFBF9;--th-acc:#1D5FC4;--th-line:#E4DDD3}
html[data-theme="warm"]{
  --c-ground:#F5F2ED; --c-surface:#FCFBF9; --c-surface-2:#F2EFEA; --c-surface-3:#EAE6DF; --c-ink:#2B231D; --c-ink-2:#4A3F36; --c-ink-3:#63564A; --c-muted:#6A5D51; --c-muted-2:#9C8E80; --c-hair:#DED5CD; --c-hair-2:#C7BDB4; --c-accent:#A84A28; --c-accent-soft:#FCEBE6; --c-accent-line:#E0BBAF; --c-accent-solid:#A84A28; --c-btn:#2B231D; --c-btn-ink:#FCFBF9; --c-bar:#FCFBF9; --c-bar-ink:#2B231D; --c-bar-muted:#6A5D51; --c-ok:#2D7242; --c-ok-soft:#E8F4EC; --c-ok-line:#B5DBC3; --c-ok-solid:#2D7242; --c-warn:#8F5300; --c-warn-soft:#FAF0DB; --c-warn-line:#E8D09E; --c-warn-solid:#8F5300; --c-bad:#A63232; --c-bad-soft:#FCECEC; --c-bad-line:#E6BDBD; --c-bad-solid:#A63232; --c-note:#704B8C; --c-note-soft:#F4EEF7; --c-highlight:#F5DF9D; --sd-bg:#2B231D; --sd-ink:#FCFBF9; --sd-ink-2:#EAE6DF; --sd-muted:#B3A597; --sd-hover:#3D332C; --sd-on:#4A3F36; --sd-line:#4A3F36; --sd-acc:#A84A28; --c-accent-ink:#FCFBF9; --c-navy:#A84A28; --c-navy-solid:#A84A28; --c-bar-2:#EAE6DF; --c-gold:#8F5300; --c-muted-solid:#5B6576; --c-on-solid:#FFFFFF; --c-note-line:#704B8C; --c-note-solid:#7C3AED; --sk-sans:"Outfit",system-ui,-apple-system,"Segoe UI",sans-serif; --sk-serif:"Outfit",system-ui,sans-serif; --sk-mono:"JetBrains Mono","Roboto Mono",ui-monospace,Menlo,monospace; --sk-r:8px; --sk-r-sm:6px; --sk-shadow:0 1px 2px rgba(15,23,42,.06); --c-amp:#1D5FC4; --c-ccg:#C8102E; --c-cfl:#0E7C86;
}
html[data-theme="warm"][data-mode="night"]{
  --c-ground:#1A1614; --c-surface:#241E1A; --c-surface-2:#302A25; --c-surface-3:#3F3730; --c-ink:#EBE4DF; --c-ink-2:#CFC4BB; --c-ink-3:#BDB2A8; --c-muted:#B0A49A; --c-muted-2:#6B6158; --c-hair:#3B322D; --c-hair-2:#50453D; --c-accent:#E07A5F; --c-accent-soft:#3A2017; --c-accent-line:#593123; --c-accent-solid:#A84A28; --c-btn:#EBE4DF; --c-btn-ink:#1A1614; --c-bar:#241E1A; --c-bar-ink:#EBE4DF; --c-bar-muted:#B0A49A; --c-ok:#5DB07B; --c-ok-soft:#1B3322; --c-ok-line:#2D5237; --c-ok-solid:#2D7242; --c-warn:#E69A2E; --c-warn-soft:#40290A; --c-warn-line:#664312; --c-warn-solid:#8F5300; --c-bad:#E56B6B; --c-bad-soft:#421616; --c-bad-line:#6B2626; --c-bad-solid:#A63232; --c-note:#A886C2; --c-note-soft:#312140; --c-highlight:#3D2E0C; --sd-bg:#110E0C; --sd-acc:#A84A28; --c-accent-ink:#EBE4DF; --c-navy:#E07A5F; --c-navy-solid:#A84A28; --c-bar-2:#3F3730; --c-gold:#E69A2E; --c-muted-solid:#5B6270; --c-on-solid:#FFFFFF; --c-note-line:#A886C2; --c-note-solid:#7C3AED; --sk-shadow:0 1px 2px rgba(0,0,0,.4); --sd-ink:#EBE4DF; --sd-ink-2:#CFC4BB; --sd-muted:#B0A49A; --sd-hover:#241E1A; --sd-on:#302A25; --sd-line:#302A25; color-scheme:dark;
}
html[data-theme="warm"] .sk-side{background:var(--sd-bg);border-right-color:transparent}
html[data-theme="warm"] .sk-logo{color:var(--sd-ink)}
html[data-theme="warm"] .sk-logo i{background:var(--sd-acc);color:#FFFFFF}
html[data-theme="warm"] .sk-bell{color:var(--sd-muted)}
html[data-theme="warm"] .sk-jump{background:var(--sd-hover);border-color:var(--sd-line);color:var(--sd-muted)}
html[data-theme="warm"] .sk-jump kbd{background:transparent;border-color:var(--sd-line);color:var(--sd-muted)}
html[data-theme="warm"] .sk-gh{font-size:11px;font-weight:600;letter-spacing:.08em;color:var(--sd-muted)}
html[data-theme="warm"] .sk-gh:hover{background:var(--sd-hover)}
html[data-theme="warm"] .sk-item{color:var(--sd-ink-2)}
html[data-theme="warm"] .sk-item svg{color:var(--sd-muted)}
html[data-theme="warm"] .sk-item:hover{background:var(--sd-hover);color:var(--sd-ink)}
html[data-theme="warm"] .sk-item.on{background:var(--sd-on);color:var(--sd-ink);box-shadow:inset 3px 0 0 var(--sd-acc)}
html[data-theme="warm"] .sk-item.on svg{color:var(--sd-ink)}
html[data-theme="warm"] .sk-item .sk-n{background:var(--sd-line);color:var(--sd-ink)}
html[data-theme="warm"] .sk-item .sk-n.hot{background:var(--sd-acc);color:#FFFFFF}
html[data-theme="warm"] .sk-foot2>.sk-card,html[data-theme="warm"] .sk-user>summary.sk-card{background:var(--sd-hover);border-color:var(--sd-line);color:var(--sd-ink)}
html[data-theme="warm"] .sk-foot2>.sk-card .lbl,html[data-theme="warm"] .sk-foot2>.sk-card .wk,html[data-theme="warm"] .sk-foot2>.sk-card .v .k,html[data-theme="warm"] .sk-user>summary .who span,html[data-theme="warm"] .sk-user>summary .chev,html[data-theme="warm"] .sk-foot2>.sk-card .chev{color:var(--sd-muted)}
html[data-theme="warm"] .sk-user>summary .av{background:var(--sd-acc);color:#FFFFFF}
html[data-theme="warm"] .sk-grp[data-open="1"]>.sk-gh{color:var(--sd-ink)}
html[data-theme="warm"] .sk-grp[data-open="1"]>.sk-gh svg{color:var(--sd-acc)}
html[data-theme="warm"] .sk-grp[data-open="1"]>.sk-items{border-left-color:var(--sd-line)}
html[data-theme="warm"] .sk-grp+.sk-grp{border-top-color:var(--sd-line)}
html[data-theme="warm"] .btn{border-radius:var(--sk-r);font-weight:600}
html[data-theme="warm"] .btn-out{border-radius:var(--sk-r)}
html[data-theme="warm"] input,html[data-theme="warm"] select,html[data-theme="warm"] textarea{border-radius:var(--sk-r-sm)}
html[data-theme="warm"] .badge{font-size:11px;font-weight:600;letter-spacing:.04em;text-transform:uppercase}
html[data-theme="warm"] .sk-h1{font-size:24px;font-weight:600;letter-spacing:-.01em}
html[data-theme="warm"] .sx-tile .tn,html[data-theme="warm"] .op-tile-n,html[data-theme="warm"] .xc-tile-val{font-family:var(--sk-mono);font-weight:500;letter-spacing:0}
html[data-theme="warm"] .card{border-radius:var(--sk-r)}
.ap-th[data-t="terminal"]{--th-bar:#FFFFFF;--th-side:#FFFFFF;--th-ground:#F4F5F5;--th-card:#FFFFFF;--th-acc:#006D77;--th-line:#D7DBDF}
html[data-theme="terminal"]{
  --c-ground:#F4F5F5; --c-surface:#FFFFFF; --c-surface-2:#FAFAFA; --c-surface-3:#F0F1F2; --c-ink:#11181C; --c-ink-2:#303841; --c-ink-3:#4A555E; --c-muted:#56616A; --c-muted-2:#87929A; --c-hair:#D7DBDF; --c-hair-2:#C1C8CD; --c-accent:#006D77; --c-accent-soft:#E0F2F1; --c-accent-line:#B2DFDB; --c-accent-solid:#006D77; --c-btn:#11181C; --c-btn-ink:#FFFFFF; --c-bar:#FFFFFF; --c-bar-ink:#11181C; --c-bar-muted:#56616A; --c-ok:#227A32; --c-ok-soft:#E6F4EA; --c-ok-line:#C6E5CF; --c-ok-solid:#227A32; --c-warn:#965A00; --c-warn-soft:#FEF3C7; --c-warn-line:#FDE68A; --c-warn-solid:#965A00; --c-bad:#B91C1C; --c-bad-soft:#FEE2E2; --c-bad-line:#FECACA; --c-bad-solid:#B91C1C; --c-note:#5B21B6; --c-note-soft:#EDE9FE; --c-highlight:#FDE68A; --sd-bg:#FFFFFF; --sd-ink:#11181C; --sd-ink-2:#303841; --sd-muted:#56616A; --sd-hover:#F0F1F2; --sd-on:#E0F2F1; --sd-line:#D7DBDF; --sd-acc:#006D77; --c-accent-ink:#FFFFFF; --c-navy:#006D77; --c-navy-solid:#006D77; --c-bar-2:#F0F1F2; --c-gold:#965A00; --c-muted-solid:#5B6576; --c-on-solid:#FFFFFF; --c-note-line:#5B21B6; --c-note-solid:#7C3AED; --sk-sans:"JetBrains Mono",system-ui,-apple-system,"Segoe UI",sans-serif; --sk-serif:"JetBrains Mono",system-ui,sans-serif; --sk-mono:"JetBrains Mono","Roboto Mono",ui-monospace,Menlo,monospace; --sk-r:8px; --sk-r-sm:6px; --sk-shadow:0 1px 2px rgba(15,23,42,.06); --c-amp:#1D5FC4; --c-ccg:#C8102E; --c-cfl:#0E7C86;
}
html[data-theme="terminal"][data-mode="night"]{
  --c-ground:#0D1117; --c-surface:#161B22; --c-surface-2:#21262D; --c-surface-3:#30363D; --c-ink:#E6EDF3; --c-ink-2:#C9D1D9; --c-ink-3:#A8B1BB; --c-muted:#9AA1AA; --c-muted-2:#484F58; --c-hair:#30363D; --c-hair-2:#484F58; --c-accent:#4DB6AC; --c-accent-soft:#00332E; --c-accent-line:#004D40; --c-accent-solid:#00796B; --c-btn:#E6EDF3; --c-btn-ink:#0D1117; --c-bar:#161B22; --c-bar-ink:#E6EDF3; --c-bar-muted:#9AA1AA; --c-ok:#57AB5A; --c-ok-soft:#113426; --c-ok-line:#1B4D36; --c-ok-solid:#227A32; --c-warn:#D29922; --c-warn-soft:#3D2E04; --c-warn-line:#5C450A; --c-warn-solid:#965A00; --c-bad:#F85149; --c-bad-soft:#490202; --c-bad-line:#67060C; --c-bad-solid:#B91C1C; --c-note:#A78BFA; --c-note-soft:#2E1065; --c-highlight:#3D2E04; --sd-bg:#010409; --sd-ink:#E6EDF3; --sd-ink-2:#C9D1D9; --sd-muted:#9AA1AA; --sd-hover:#161B22; --sd-on:#21262D; --sd-line:#30363D; --sd-acc:#00796B; --c-accent-ink:#E6EDF3; --c-navy:#4DB6AC; --c-navy-solid:#00796B; --c-bar-2:#30363D; --c-gold:#D29922; --c-muted-solid:#5B6270; --c-on-solid:#FFFFFF; --c-note-line:#A78BFA; --c-note-solid:#7C3AED; --sk-shadow:0 1px 2px rgba(0,0,0,.4); color-scheme:dark;
}
html[data-theme="terminal"] .sk-side{background:var(--sd-bg);border-right-color:transparent}
html[data-theme="terminal"] .sk-logo{color:var(--sd-ink)}
html[data-theme="terminal"] .sk-logo i{background:var(--sd-acc);color:#FFFFFF}
html[data-theme="terminal"] .sk-bell{color:var(--sd-muted)}
html[data-theme="terminal"] .sk-jump{background:var(--sd-hover);border-color:var(--sd-line);color:var(--sd-muted)}
html[data-theme="terminal"] .sk-jump kbd{background:transparent;border-color:var(--sd-line);color:var(--sd-muted)}
html[data-theme="terminal"] .sk-gh{font-size:11px;font-weight:600;letter-spacing:.08em;color:var(--sd-muted)}
html[data-theme="terminal"] .sk-gh:hover{background:var(--sd-hover)}
html[data-theme="terminal"] .sk-item{color:var(--sd-ink-2)}
html[data-theme="terminal"] .sk-item svg{color:var(--sd-muted)}
html[data-theme="terminal"] .sk-item:hover{background:var(--sd-hover);color:var(--sd-ink)}
html[data-theme="terminal"] .sk-item.on{background:var(--sd-on);color:var(--sd-ink);box-shadow:inset 3px 0 0 var(--sd-acc)}
html[data-theme="terminal"] .sk-item.on svg{color:var(--sd-ink)}
html[data-theme="terminal"] .sk-item .sk-n{background:var(--sd-line);color:var(--sd-ink)}
html[data-theme="terminal"] .sk-item .sk-n.hot{background:var(--sd-acc);color:#FFFFFF}
html[data-theme="terminal"] .sk-foot2>.sk-card,html[data-theme="terminal"] .sk-user>summary.sk-card{background:var(--sd-hover);border-color:var(--sd-line);color:var(--sd-ink)}
html[data-theme="terminal"] .sk-foot2>.sk-card .lbl,html[data-theme="terminal"] .sk-foot2>.sk-card .wk,html[data-theme="terminal"] .sk-foot2>.sk-card .v .k,html[data-theme="terminal"] .sk-user>summary .who span,html[data-theme="terminal"] .sk-user>summary .chev,html[data-theme="terminal"] .sk-foot2>.sk-card .chev{color:var(--sd-muted)}
html[data-theme="terminal"] .sk-user>summary .av{background:var(--sd-acc);color:#FFFFFF}
html[data-theme="terminal"] .sk-grp[data-open="1"]>.sk-gh{color:var(--sd-ink)}
html[data-theme="terminal"] .sk-grp[data-open="1"]>.sk-gh svg{color:var(--sd-acc)}
html[data-theme="terminal"] .sk-grp[data-open="1"]>.sk-items{border-left-color:var(--sd-line)}
html[data-theme="terminal"] .sk-grp+.sk-grp{border-top-color:var(--sd-line)}
html[data-theme="terminal"] .btn{border-radius:var(--sk-r);font-weight:600}
html[data-theme="terminal"] .btn-out{border-radius:var(--sk-r)}
html[data-theme="terminal"] input,html[data-theme="terminal"] select,html[data-theme="terminal"] textarea{border-radius:var(--sk-r-sm)}
html[data-theme="terminal"] .badge{font-size:11px;font-weight:600;letter-spacing:.04em;text-transform:uppercase}
html[data-theme="terminal"] .sk-h1{font-size:24px;font-weight:600;letter-spacing:-.01em}
html[data-theme="terminal"] .sx-tile .tn,html[data-theme="terminal"] .op-tile-n,html[data-theme="terminal"] .xc-tile-val{font-family:var(--sk-mono);font-weight:500;letter-spacing:0}
html[data-theme="terminal"] .card{border-radius:var(--sk-r)}
.ap-th[data-t="structure"]{--th-bar:#F8F9FA;--th-side:#000000;--th-ground:#EAECEF;--th-card:#F8F9FA;--th-acc:#1D5FC4;--th-line:#CED4DA}
html[data-theme="structure"],html[data-theme="structurec"]{
  --c-ground:#EAECEF; --c-surface:#F8F9FA; --c-surface-2:#F1F3F5; --c-surface-3:#E9ECEF; --c-ink:#000000; --c-ink-2:#343A40; --c-ink-3:#495057; --c-muted:#555D65; --c-muted-2:#ADB5BD; --c-hair:#DEE2E6; --c-hair-2:#CED4DA; --c-accent:#1D5FC4; --c-accent-soft:#E6F0FC; --c-accent-line:#BAD1F2; --c-accent-solid:#1D5FC4; --c-btn:#000000; --c-btn-ink:#FFFFFF; --c-bar:#FFFFFF; --c-bar-ink:#000000; --c-bar-muted:#555D65; --c-ok:#146C43; --c-ok-soft:#D1E7DD; --c-ok-line:#A3CFBB; --c-ok-solid:#198754; --c-warn:#8A6300; --c-warn-soft:#FFF3CD; --c-warn-line:#FFE69C; --c-warn-solid:#8A6300; --c-bad:#B02A37; --c-bad-soft:#F8D7DA; --c-bad-line:#F1A8AF; --c-bad-solid:#DC3545; --c-note:#6610F2; --c-note-soft:#E0CFFC; --c-highlight:#FFE69C; --sd-bg:#000000; --sd-ink:#F8F9FA; --sd-ink-2:#DEE2E6; --sd-muted:#ADB5BD; --sd-hover:#212529; --sd-on:#343A40; --sd-line:#343A40; --sd-acc:#1D5FC4; --c-accent-ink:#FFFFFF; --c-navy:#1D5FC4; --c-navy-solid:#1D5FC4; --c-bar-2:#E9ECEF; --c-gold:#8A6300; --c-muted-solid:#5B6576; --c-on-solid:#FFFFFF; --c-note-line:#6610F2; --c-note-solid:#7C3AED; --sk-sans:"Roboto",system-ui,-apple-system,"Segoe UI",sans-serif; --sk-serif:"Roboto",system-ui,sans-serif; --sk-mono:"JetBrains Mono","Roboto Mono",ui-monospace,Menlo,monospace; --sk-r:8px; --sk-r-sm:6px; --sk-shadow:0 1px 2px rgba(15,23,42,.06); --c-amp:#1D5FC4; --c-ccg:#C8102E; --c-cfl:#0E7C86;
}
html[data-theme="structure"][data-mode="night"],html[data-theme="structurec"][data-mode="night"]{
  --c-ground:#121212; --c-surface:#1E1E1E; --c-surface-2:#2B2B2B; --c-surface-3:#3B3B3B; --c-ink:#F5F5F5; --c-ink-2:#E0E0E0; --c-ink-3:#BDBDBD; --c-muted:#B0B0B0; --c-muted-2:#757575; --c-hair:#424242; --c-hair-2:#616161; --c-accent:#60A5FA; --c-accent-soft:#172554; --c-accent-line:#1E3A8A; --c-accent-solid:#2563EB; --c-btn:#F5F5F5; --c-btn-ink:#121212; --c-bar:#1E1E1E; --c-bar-ink:#F5F5F5; --c-bar-muted:#B0B0B0; --c-ok:#4CAF50; --c-ok-soft:#1B3320; --c-ok-line:#2E5935; --c-ok-solid:#388E3C; --c-warn:#FFB300; --c-warn-soft:#422D00; --c-warn-line:#664600; --c-warn-solid:#B45309; --c-bad:#F48A88; --c-bad-soft:#4A1717; --c-bad-line:#7A2424; --c-bad-solid:#D32F2F; --c-note:#B388FF; --c-note-soft:#311B61; --c-highlight:#4A3300; --sd-bg:#0A0A0A; --sd-acc:#2563EB; --c-accent-ink:#F5F5F5; --c-navy:#60A5FA; --c-navy-solid:#2563EB; --c-bar-2:#3B3B3B; --c-gold:#FFB300; --c-muted-solid:#5B6270; --c-on-solid:#FFFFFF; --c-note-line:#B388FF; --c-note-solid:#7C3AED; --sk-shadow:0 1px 2px rgba(0,0,0,.4); --sd-ink:#F5F5F5; --sd-ink-2:#E0E0E0; --sd-muted:#B0B0B0; --sd-hover:#1E1E1E; --sd-on:#2B2B2B; --sd-line:#2B2B2B; color-scheme:dark;
}
/* Pure Structure Classic (2026-10-14, Reetesh): Classic layout (tabs across the top) in Pure Structure's colours. Classic has no
   sidebar, so Pure Structure's black sidebar becomes a black top bar; tabs get its hard 2px rule and a heavy black underline. */
.ap-th[data-t="structurec"]{--th-bar:#000000;--th-side:#F8F9FA;--th-ground:#EAECEF;--th-card:#F8F9FA;--th-acc:#000000;--th-line:#CED4DA}
html[data-theme="structurec"]{--c-bar:#000000; --c-bar-2:#1F1F1F; --c-bar-ink:#FFFFFF; --c-bar-muted:#ADB5BD}
html[data-theme="structurec"][data-mode="night"]{--c-bar:#000000; --c-bar-2:#2B2B2B; --c-bar-ink:#F5F5F5; --c-bar-muted:#B0B0B0}
html[data-theme="structurec"] body{font-family:Roboto,system-ui,sans-serif}
html[data-theme="structurec"] .subtabs{border-bottom:2px solid var(--c-ink)}
html[data-theme="structurec"] .stab{color:var(--c-ink-2);font-weight:500}
html[data-theme="structurec"] .stab.active,html[data-theme="structurec"] .nav-group.has-active>.stab{color:var(--c-ink);border-bottom:3px solid var(--c-ink);font-weight:700}
html[data-theme="structurec"] .card{border:1px solid var(--c-hair);box-shadow:none;border-radius:6px}
html[data-theme="structurec"] .btn{border-radius:6px;font-weight:500}
html[data-theme="structurec"] .stat{border:1px solid var(--c-hair);border-radius:6px}

html[data-theme="structure"] .sk-side{background:var(--sd-bg);border-right-color:transparent}
html[data-theme="structure"] .sk-logo{color:var(--sd-ink)}
html[data-theme="structure"] .sk-logo i{background:var(--sd-acc);color:#FFFFFF}
html[data-theme="structure"] .sk-bell{color:var(--sd-muted)}
html[data-theme="structure"] .sk-jump{background:var(--sd-hover);border-color:var(--sd-line);color:var(--sd-muted)}
html[data-theme="structure"] .sk-jump kbd{background:transparent;border-color:var(--sd-line);color:var(--sd-muted)}
html[data-theme="structure"] .sk-gh{font-size:11px;font-weight:600;letter-spacing:.08em;color:var(--sd-muted)}
html[data-theme="structure"] .sk-gh:hover{background:var(--sd-hover)}
html[data-theme="structure"] .sk-item{color:var(--sd-ink-2)}
html[data-theme="structure"] .sk-item svg{color:var(--sd-muted)}
html[data-theme="structure"] .sk-item:hover{background:var(--sd-hover);color:var(--sd-ink)}
html[data-theme="structure"] .sk-item.on{background:var(--sd-on);color:var(--sd-ink);box-shadow:inset 3px 0 0 var(--sd-acc)}
html[data-theme="structure"] .sk-item.on svg{color:var(--sd-ink)}
html[data-theme="structure"] .sk-item .sk-n{background:var(--sd-line);color:var(--sd-ink)}
html[data-theme="structure"] .sk-item .sk-n.hot{background:var(--sd-acc);color:#FFFFFF}
html[data-theme="structure"] .sk-foot2>.sk-card,html[data-theme="structure"] .sk-user>summary.sk-card{background:var(--sd-hover);border-color:var(--sd-line);color:var(--sd-ink)}
html[data-theme="structure"] .sk-foot2>.sk-card .lbl,html[data-theme="structure"] .sk-foot2>.sk-card .wk,html[data-theme="structure"] .sk-foot2>.sk-card .v .k,html[data-theme="structure"] .sk-user>summary .who span,html[data-theme="structure"] .sk-user>summary .chev,html[data-theme="structure"] .sk-foot2>.sk-card .chev{color:var(--sd-muted)}
html[data-theme="structure"] .sk-user>summary .av{background:var(--sd-acc);color:#FFFFFF}
html[data-theme="structure"] .sk-grp[data-open="1"]>.sk-gh{color:var(--sd-ink)}
html[data-theme="structure"] .sk-grp[data-open="1"]>.sk-gh svg{color:var(--sd-acc)}
html[data-theme="structure"] .sk-grp[data-open="1"]>.sk-items{border-left-color:var(--sd-line)}
html[data-theme="structure"] .sk-grp+.sk-grp{border-top-color:var(--sd-line)}
html[data-theme="structure"] .btn{border-radius:var(--sk-r);font-weight:600}
html[data-theme="structure"] .btn-out{border-radius:var(--sk-r)}
html[data-theme="structure"] input,html[data-theme="structure"] select,html[data-theme="structure"] textarea{border-radius:var(--sk-r-sm)}
html[data-theme="structure"] .badge{font-size:11px;font-weight:600;letter-spacing:.04em;text-transform:uppercase}
html[data-theme="structure"] .sk-h1{font-size:24px;font-weight:600;letter-spacing:-.01em}
html[data-theme="structure"] .sx-tile .tn,html[data-theme="structure"] .op-tile-n,html[data-theme="structure"] .xc-tile-val{font-family:var(--sk-mono);font-weight:500;letter-spacing:0}
html[data-theme="structure"] .card{border-radius:var(--sk-r)}
.ap-th[data-t="soft"]{--th-bar:#FFFFFF;--th-side:#111827;--th-ground:#F9FAFB;--th-card:#FFFFFF;--th-acc:#2563EB;--th-line:#E5E7EB}
html[data-theme="soft"]{
  --c-ground:#F9FAFB; --c-surface:#FFFFFF; --c-surface-2:#F3F4F6; --c-surface-3:#E5E7EB; --c-ink:#111827; --c-ink-2:#374151; --c-ink-3:#4B5563; --c-muted:#5B6472; --c-muted-2:#9CA3AF; --c-hair:#E5E7EB; --c-hair-2:#D1D5DB; --c-accent:#1D4ED8; --c-accent-soft:#DBEAFE; --c-accent-line:#BFDBFE; --c-accent-solid:#2563EB; --c-btn:#111827; --c-btn-ink:#FFFFFF; --c-bar:#FFFFFF; --c-bar-ink:#111827; --c-bar-muted:#5B6472; --c-ok:#047857; --c-ok-soft:#D1FAE5; --c-ok-line:#A7F3D0; --c-ok-solid:#059669; --c-warn:#92400E; --c-warn-soft:#FEF3C7; --c-warn-line:#FDE68A; --c-warn-solid:#B45309; --c-bad:#B91C1C; --c-bad-soft:#FEE2E2; --c-bad-line:#FECACA; --c-bad-solid:#DC2626; --c-note:#7C3AED; --c-note-soft:#EDE9FE; --c-highlight:#FDE68A; --sd-bg:#111827; --sd-ink:#F9FAFB; --sd-ink-2:#D1D5DB; --sd-muted:#9CA3AF; --sd-hover:#1F2937; --sd-on:#374151; --sd-line:#374151; --sd-acc:#2563EB; --c-accent-ink:#FFFFFF; --c-navy:#1D4ED8; --c-navy-solid:#2563EB; --c-bar-2:#E5E7EB; --c-gold:#92400E; --c-muted-solid:#5B6576; --c-on-solid:#FFFFFF; --c-note-line:#7C3AED; --c-note-solid:#7C3AED; --sk-sans:"Manrope",system-ui,-apple-system,"Segoe UI",sans-serif; --sk-serif:"Manrope",system-ui,sans-serif; --sk-mono:"JetBrains Mono","Roboto Mono",ui-monospace,Menlo,monospace; --sk-r:8px; --sk-r-sm:6px; --sk-shadow:0 1px 2px rgba(15,23,42,.06); --c-amp:#1D5FC4; --c-ccg:#C8102E; --c-cfl:#0E7C86;
}
html[data-theme="soft"][data-mode="night"]{
  --c-ground:#18181B; --c-surface:#27272A; --c-surface-2:#3F3F46; --c-surface-3:#3A3A41; --c-ink:#FAFAFA; --c-ink-2:#F4F4F5; --c-ink-3:#E4E4E7; --c-muted:#BDBDC6; --c-muted-2:#71717A; --c-hair:#3F3F46; --c-hair-2:#52525B; --c-accent:#60A5FA; --c-accent-soft:#172554; --c-accent-line:#1D4ED8; --c-accent-solid:#2563EB; --c-btn:#FAFAFA; --c-btn-ink:#18181B; --c-bar:#27272A; --c-bar-ink:#FAFAFA; --c-bar-muted:#BDBDC6; --c-ok:#34D399; --c-ok-soft:#064E3B; --c-ok-line:#065F46; --c-ok-solid:#059669; --c-warn:#FBBF24; --c-warn-soft:#451A03; --c-warn-line:#92400E; --c-warn-solid:#B45309; --c-bad:#FCA5A5; --c-bad-soft:#450A0A; --c-bad-line:#991B1B; --c-bad-solid:#DC2626; --c-note:#A78BFA; --c-note-soft:#2E1065; --c-highlight:#451A03; --sd-bg:#09090B; --sd-acc:#2563EB; --c-accent-ink:#FAFAFA; --c-navy:#60A5FA; --c-navy-solid:#2563EB; --c-bar-2:#3A3A41; --c-gold:#FBBF24; --c-muted-solid:#5B6270; --c-on-solid:#FFFFFF; --c-note-line:#A78BFA; --c-note-solid:#7C3AED; --sk-shadow:0 1px 2px rgba(0,0,0,.4); --sd-ink:#FAFAFA; --sd-ink-2:#E4E4E7; --sd-muted:#BDBDC6; --sd-hover:#18181B; --sd-on:#27272A; --sd-line:#27272A; color-scheme:dark;
}
html[data-theme="soft"] .sk-side{background:var(--sd-bg);border-right-color:transparent}
html[data-theme="soft"] .sk-logo{color:var(--sd-ink)}
html[data-theme="soft"] .sk-logo i{background:var(--sd-acc);color:#FFFFFF}
html[data-theme="soft"] .sk-bell{color:var(--sd-muted)}
html[data-theme="soft"] .sk-jump{background:var(--sd-hover);border-color:var(--sd-line);color:var(--sd-muted)}
html[data-theme="soft"] .sk-jump kbd{background:transparent;border-color:var(--sd-line);color:var(--sd-muted)}
html[data-theme="soft"] .sk-gh{font-size:11px;font-weight:600;letter-spacing:.08em;color:var(--sd-muted)}
html[data-theme="soft"] .sk-gh:hover{background:var(--sd-hover)}
html[data-theme="soft"] .sk-item{color:var(--sd-ink-2)}
html[data-theme="soft"] .sk-item svg{color:var(--sd-muted)}
html[data-theme="soft"] .sk-item:hover{background:var(--sd-hover);color:var(--sd-ink)}
html[data-theme="soft"] .sk-item.on{background:var(--sd-on);color:var(--sd-ink);box-shadow:inset 3px 0 0 var(--sd-acc)}
html[data-theme="soft"] .sk-item.on svg{color:var(--sd-ink)}
html[data-theme="soft"] .sk-item .sk-n{background:var(--sd-line);color:var(--sd-ink)}
html[data-theme="soft"] .sk-item .sk-n.hot{background:var(--sd-acc);color:#FFFFFF}
html[data-theme="soft"] .sk-foot2>.sk-card,html[data-theme="soft"] .sk-user>summary.sk-card{background:var(--sd-hover);border-color:var(--sd-line);color:var(--sd-ink)}
html[data-theme="soft"] .sk-foot2>.sk-card .lbl,html[data-theme="soft"] .sk-foot2>.sk-card .wk,html[data-theme="soft"] .sk-foot2>.sk-card .v .k,html[data-theme="soft"] .sk-user>summary .who span,html[data-theme="soft"] .sk-user>summary .chev,html[data-theme="soft"] .sk-foot2>.sk-card .chev{color:var(--sd-muted)}
html[data-theme="soft"] .sk-user>summary .av{background:var(--sd-acc);color:#FFFFFF}
html[data-theme="soft"] .sk-grp[data-open="1"]>.sk-gh{color:var(--sd-ink)}
html[data-theme="soft"] .sk-grp[data-open="1"]>.sk-gh svg{color:var(--sd-acc)}
html[data-theme="soft"] .sk-grp[data-open="1"]>.sk-items{border-left-color:var(--sd-line)}
html[data-theme="soft"] .sk-grp+.sk-grp{border-top-color:var(--sd-line)}
html[data-theme="soft"] .btn{border-radius:var(--sk-r);font-weight:600}
html[data-theme="soft"] .btn-out{border-radius:var(--sk-r)}
html[data-theme="soft"] input,html[data-theme="soft"] select,html[data-theme="soft"] textarea{border-radius:var(--sk-r-sm)}
html[data-theme="soft"] .badge{font-size:11px;font-weight:600;letter-spacing:.04em;text-transform:uppercase}
html[data-theme="soft"] .sk-h1{font-size:24px;font-weight:600;letter-spacing:-.01em}
html[data-theme="soft"] .sx-tile .tn,html[data-theme="soft"] .op-tile-n,html[data-theme="soft"] .xc-tile-val{font-family:var(--sk-mono);font-weight:500;letter-spacing:0}
html[data-theme="soft"] .card{border-radius:var(--sk-r)}
html[data-theme="terminal"] .sk-side{border-right-color:var(--sd-line)}
html[data-theme="structure"] .card,html[data-theme="structure"] .btn,html[data-theme="structure"] input,html[data-theme="structure"] select{border-width:1.5px}