/* Mark 100 theme — from hotspot-redesign-package (Sep 22 2026). Blur and the Google-Fonts download removed for scroll performance / offline. */
/* Hotspot — shared presentation system.
   This file contains presentation only. Role maps, event handlers, data models,
   calculations, form fields, and module routing are retained from the upload. */

@media screen {
  :root, body[data-hs-page] {
    --hs-font:-apple-system,BlinkMacSystemFont,"Segoe UI",Arial,sans-serif;
    --hs-bg:#090d15; --hs-surface:#111824; --hs-raised:#171f2d;
    --hs-border:#283447; --hs-border-soft:#202a3b; --hs-text:#edf2fa; --hs-muted:#99a8bc;
    --hs-electric:#4f8cff; --hs-electric-2:#91b6ff; --hs-live:#00C805;
    --hs-alert:#ED1B2D; --hs-warning:#f5a623;
    --hs-radius:14px; --hs-radius-sm:9px; --hs-radius-lg:20px;
    --hs-shadow:0 7px 24px -14px #000b;
    --hs-bloom:0 0 0 1px #4f8cff22,0 8px 28px -18px #4f8cff88;
    --bg:#090d15!important; --bg2:#0e1420!important;
    --surface:#111824!important; --surface-2:#171f2d!important;
    --card:#111824!important; --panel:#111824!important; --panel2:#171f2d!important;
    --line:#283447!important; --line2:#37465b!important; --border:#283447!important;
    --ink:#edf2fa!important; --ink-2:#c3cfe0!important; --ink-3:#99a8bc!important;
    --txt:#edf2fa!important; --text:#edf2fa!important;
    --muted:#99a8bc!important; --dim:#99a8bc!important; --mut:#99a8bc!important;
    --muted2:#8090a8!important; --muted-2:#8090a8!important; --dim2:#8090a8!important;
    --blue:#4f8cff!important; --brand:#4f8cff!important; --acc:#4f8cff!important; --pri:#4f8cff!important;
    --brand-mid:#3779e6!important; --brand-soft:#142440!important;
    --green:#00C805!important; --good:#00C805!important; --ok:#00C805!important;
    --red:#ED1B2D!important; --bad:#ED1B2D!important; --crit:#ED1B2D!important;
    --ok-bg:#0c2419!important; --greenbg:#0c2419!important;
    --bad-bg:#2c141c!important; --redbg:#2c141c!important; --crit-bg:#2c141c!important;
    --radius:14px!important; --radius-lg:20px!important;
  }
  html { color-scheme:dark; background:#090d15; }
  body[data-hs-page] {
    background:radial-gradient(ellipse 80% 36rem at 85% -8rem,#15253d77,transparent 76%),#090d15!important;
    color:var(--hs-text); font-family:var(--hs-font)!important; font-size:14px; line-height:1.5;
    -webkit-font-smoothing:antialiased; text-rendering:optimizeLegibility;
  }
  body[data-hs-page]::before { display:none!important; }
  body[data-hs-page] :is(button,input,select,textarea,h1,h2,h3,h4,.mono,.num,.n,.money) {font-family:var(--hs-font)!important;}
  body[data-hs-page] :is(h1,h2,h3,h4) {color:var(--hs-text);font-weight:650;line-height:1.25;}
  body[data-hs-page] h1 {font-size:30px!important;letter-spacing:-.045em!important;}
  body[data-hs-page] h2 {font-size:20px;letter-spacing:-.025em;}
  body[data-hs-page] h3 {font-size:17px;letter-spacing:-.02em;}
  body[data-hs-page] :is(.muted,.mut,.sub,.sub2,.note,.hint,.small,.card-sub,.pagesub,.section-subtitle) {font-size:13px;color:var(--hs-muted);line-height:1.55;}
  body[data-hs-page] :is(.tiny,.eyebrow,.navsec,.nav-section-title,.saved) {font-size:12px;}
  body[data-hs-page] :is(.num,.n,.money,.mono,.val,.value,.v) {font-variant-numeric:tabular-nums;}
  body[data-hs-page] :is(.wrap,main,.content,.page) {max-width:1600px;}
  body[data-hs-page] :is(.wrap,main,.content,.page,.app) {background:transparent!important;}
  body[data-hs-page] :is(.kpis,.cards,.grid,.grid2,.grid3,.grid-2,.grid-3,.grid-4) {gap:16px;}

  /* Clean, stationary surfaces. State-bearing borders keep their original colors. */
  body[data-hs-page] :is(.card,.kpi,.store-card,.panel,.box,.tile,.block,.stat,.metric,.widget,.wk-hero) {
    border-radius:var(--hs-radius)!important;
    background:linear-gradient(150deg,#17213044,transparent 65%),var(--hs-surface)!important;
    box-shadow:var(--hs-shadow),inset 0 1px 0 #ffffff03!important;
    animation:none!important;filter:none!important;
  }
  body[data-hs-page] :is(.card,.panel,.box) {overflow:visible;}
  body[data-hs-page] :is(.card,.kpi,.store-card,.box,.tile,.stat,.metric,.widget,.cell):hover {
    transform:none!important;filter:none!important;box-shadow:var(--hs-shadow),inset 0 1px 0 #ffffff04!important;
  }
  body[data-hs-page] :is(.card-h,.ph,.panel-head,.sectiontitle,.subhd) {font-size:16px;font-weight:600;letter-spacing:-.018em;}
  body[data-hs-page] :is(.card-t,.card-title) {font-size:16px!important;font-weight:600!important;letter-spacing:-.02em;}
  body[data-hs-page] :is(.card>.ph,.panel>.ph) {padding:18px 20px;border-bottom:1px solid var(--hs-border-soft);}
  body[data-hs-page] :is(.card>.pb,.panel>.pb) {padding:18px 20px;}
  body[data-hs-page] .kpi {min-width:0;}
  body[data-hs-page] .kpi :is(.lab,.label,.l) {letter-spacing:0!important;text-transform:none!important;font-weight:500;color:#aab8cc!important;}
  body[data-hs-page] .kpi :is(.val,.value,.v) {font-weight:600!important;letter-spacing:-.045em!important;line-height:1.25!important;margin-top:12px;}
  body[data-hs-page] .kpi :is(.sub,.s,.note,.delta) {font-size:12px!important;line-height:1.5;letter-spacing:0;}
  body[data-hs-page] :is(.kpi,.card,.panel)::after {animation:none!important;}

  /* A single set of controls across every department. */
  body[data-hs-page] :is(.btn,.button,button.btn-sm,button.btn-block) {
    min-height:40px;padding:9px 15px;border-radius:9px!important;font-size:14px!important;
    line-height:1.35;font-weight:600!important;letter-spacing:0!important;
    box-shadow:none!important;text-shadow:none!important;animation:none!important;
    transition:background-color .15s,border-color .15s,color .15s!important;
  }
  body[data-hs-page] :is(.btn.sm,.btn-sm) {min-height:34px;padding:7px 11px;font-size:13px!important;}
  body[data-hs-page] :is(.btn,.button):hover {transform:none!important;filter:none!important;box-shadow:none!important;}
  body[data-hs-page] :is(.btn.pri,.btn.primary,.btn-primary) {
    background:linear-gradient(180deg,#548ffd,#3d7bea)!important;color:#fff!important;border:1px solid #609bff!important;
  }
  body[data-hs-page] :is(.btn.pri,.btn.primary,.btn-primary):hover {background:#548ffd!important;}
  body[data-hs-page] :is(.btn.ghost,.btn-ghost,.btn.secondary,.btn-secondary) {
    color:#cad5e5!important;background:#172130!important;border:1px solid #34435b!important;
  }
  body[data-hs-page] :is(.btn.del,.btn.danger,.btn-danger) {color:#ff8993!important;background:#30161f!important;border:1px solid #74313d!important;}
  body[data-hs-page] :is(button,input,select,textarea):focus-visible {outline:2px solid #8db6ff!important;outline-offset:3px;}
  body[data-hs-page] :is(button,input,select,textarea):disabled {cursor:not-allowed!important;}
  body[data-hs-page] :is(input:not([type=checkbox]):not([type=radio]):not([type=range]):not([type=hidden]):not([type=color]),select,textarea) {
    background:#0c1320!important;color:#e5edf9;border:1px solid #34435b;border-radius:9px!important;
    font-size:14px!important;font-weight:400;line-height:1.45;padding:10px 12px;box-shadow:none!important;
  }
  body[data-hs-page] :is(input,textarea)::placeholder {color:#7b8ba4;opacity:1;}
  body[data-hs-page] :is(input,select,textarea):focus {border-color:#729eea!important;}
  body[data-hs-page] :is(.field>label,.fld>label,.form-row>label,label.f,.f>label,.lbl) {font-size:13px!important;font-weight:500;letter-spacing:0!important;text-transform:none!important;line-height:1.55;}
  body[data-hs-page] :is(input[type=checkbox],input[type=radio]) {accent-color:#4f8cff;}
  body[data-hs-page] :is(.cellinput,.cellin,td input,td select) {padding:7px 8px!important;min-height:32px;}
  body[data-hs-page] :is(.cellinput,.cellin) {border-radius:5px!important;}
  body[data-hs-page] :is(.tag,.pill,.badge) {border-radius:7px;font-size:12px;letter-spacing:0;text-transform:none;animation:none!important;}
  body[data-hs-page] :is(.pos,.positive,.num.pos,.n.pos,.val.pos,.value.pos) {text-shadow:0 0 20px #00c80520!important;}
  body[data-hs-page] :is(.neg,.negative,.num.neg,.n.neg,.val.neg,.value.neg) {text-shadow:0 0 20px #ed1b2d25!important;}

  /* Navigation has the same selection, size and spacing everywhere. */
  body[data-hs-page] :is(.topbar,header,.header,.app-header,.top) {
    background:#0d1420eb;
    border-color:var(--hs-border-soft);box-shadow:none!important;
  }
  body[data-hs-page] :is(nav,.nav,.tabs,.subtabs,.topnav,.navtop) {box-shadow:none!important;}
  body[data-hs-page] :is(nav button,nav a,.nav button,.nav a,.tab,.subtab,.topnav button,.navtop button,.navi) {
    font-size:14px!important;font-weight:500!important;letter-spacing:0!important;line-height:1.4;
    min-height:40px;border-radius:9px;box-shadow:none!important;text-shadow:none!important;
    transition:background-color .15s,color .15s,border-color .15s!important;
  }
  body[data-hs-page] :is(nav button,nav a,.nav button,.nav a,.tab,.subtab,.topnav button,.navtop button,.navi):hover {
    transform:none!important;background:#1a263a!important;color:#fff!important;box-shadow:none!important;text-shadow:none!important;
  }
  body[data-hs-page] :is(nav button.active,nav a.active,nav button.on,.nav button.on,.tab.active,.subtab.active,.topnav button.active,.navtop button.active,.navi.on) {
    background:linear-gradient(110deg,#233d64,#172a44)!important;color:#dbe9ff!important;
    border-color:#527fb7!important;box-shadow:inset 0 1px 0 #aacdff10!important;text-shadow:none!important;
  }
  body[data-hs-page] :is(.navsec,.nav-section-title,.grpttl) {font-size:12px!important;letter-spacing:.08em!important;font-weight:500!important;color:#7f92ae!important;}
  body[data-hs-page] :is(.topnav,.navtop) {gap:6px;padding:12px 0;border-bottom:1px solid var(--hs-border-soft);background:transparent!important;}
  body[data-hs-page] :is(.topnav,.navtop)>button {padding:9px 14px;white-space:nowrap;}
  body[data-hs-page] :is(.side,.sidebar) {background:linear-gradient(180deg,#101827,#0b101a)!important;border-color:var(--hs-border-soft)!important;box-shadow:none!important;}

  /* Tables share one hierarchy; totals and status colors keep their existing meaning. */
  body[data-hs-page] table {font-size:14px!important;font-variant-numeric:tabular-nums;border-collapse:separate;border-spacing:0;}
  body[data-hs-page] th {
    background:#141e2e!important;color:#a4b4cc!important;font-weight:500!important;font-size:12px!important;
    text-transform:none!important;letter-spacing:.01em!important;padding:12px 14px!important;border-color:#29364b!important;line-height:1.45;
  }
  body[data-hs-page] td {padding:12px 14px;border-color:#202c3f!important;font-size:14px;line-height:1.45;}
  body[data-hs-page] tbody tr:hover {background:#142138!important;box-shadow:none!important;transform:none!important;}
  body[data-hs-page] :is(.tablewrap,.table-wrap,.tbl-wrap) {overflow:auto;max-width:100%;border-radius:11px;}
  body[data-hs-page] :is(tfoot td,tr.tot td,tr.total td,tr.totrow td) {background:#172439;border-top:1px solid #3c5271!important;font-weight:600;}
  body[data-hs-page] :is(.empty,.allgood) {border-radius:14px;color:#a8b7ce;line-height:1.65;padding:28px 20px;}
  body[data-hs-page] :is(.alert-row,.alert,.notice,.notification) {border-radius:10px;animation:none!important;}
  body[data-hs-page] :is(.alert-row,.alert,.notice,.notification):hover {transform:none!important;box-shadow:none!important;}
  body[data-hs-page] :is(.modal,.dialog) {background:#111a29!important;border-color:#3a4b66!important;border-radius:18px!important;box-shadow:0 28px 90px #0009!important;}
  body[data-hs-page] :is(.mh,.modalhead,.modal-h) {font-size:18px!important;font-weight:600;letter-spacing:-.02em;border-color:var(--hs-border);}
  body[data-hs-page] :is(.mf,.modalfoot,.modal-f) {border-color:var(--hs-border);}
  body[data-hs-page] :is(.dot,.status-dot) {animation:none!important;}
  body[data-hs-page] ::-webkit-scrollbar {width:8px;height:8px;}
  body[data-hs-page] ::-webkit-scrollbar-track {background:#0d1521;}
  body[data-hs-page] ::-webkit-scrollbar-thumb {background:#34455f;border-radius:8px;border:2px solid #0d1521;}
  body[data-hs-page] ::selection {background:#426ca7;color:white;}

  /* Main portal — authenticating and routing remains the original application. */
  body[data-hs-page=portal] #app-view {background:transparent!important;}
  body[data-hs-page=portal] .sidebar {width:260px;flex-basis:260px;padding:14px 10px 0;}
  body[data-hs-page=portal] .sidebar::after {display:none;}
  body[data-hs-page=portal] .sidebar .brand {padding:14px 14px 26px;}
  body[data-hs-page=portal] .sidebar .brand .topbar-logo {height:27px;max-width:172px;object-fit:contain;}
  body[data-hs-page=portal] .nav-search-wrap {padding:0 6px 14px;}
  body[data-hs-page=portal] .nav-search {height:42px!important;background:#0c1320!important;}
  body[data-hs-page=portal] #tabs {background:transparent!important;padding:0 4px 20px;}
  body[data-hs-page=portal] .nav-section {margin-top:9px;gap:4px;}
  body[data-hs-page=portal] .nav-section-title {padding:12px 12px 8px;}
  body[data-hs-page=portal] .tab {padding:10px 12px;min-height:42px;}
  body[data-hs-page=portal] .tab.active {border:1px solid #456896!important;}
  body[data-hs-page=portal] .subnav {border-left:1px solid #304664;margin:6px 0 9px 16px;animation:none;}
  body[data-hs-page=portal] .subnav .subitem {font-size:13px;min-height:38px;padding:9px 11px;color:#9cacc3;}
  body[data-hs-page=portal] .subnav .subitem.active {background:#1a2d47;color:#dbe9ff;}
  body[data-hs-page=portal] .side-foot {margin:0 -10px;padding:17px 17px;gap:8px;background:#0c1422;border-color:#253247;}
  body[data-hs-page=portal] .side-foot .pill {white-space:normal;font-size:12px;background:transparent;padding:0;color:#c5d3e8;font-weight:600;}
  body[data-hs-page=portal] .side-foot .lo {font-size:12px;font-weight:500;color:#afbed3;}
  body[data-hs-page=portal] #build-tag {margin-inline:-10px;background:#0c1422;font-size:11px!important;color:#7788a3!important;padding:0 17px 13px!important;}
  body[data-hs-page=portal] .main>#content {padding:30px!important;}
  body[data-hs-page=portal] :is(#frames,.appframe) {background:#090d15!important;}
  body[data-hs-page=portal] .app.nav-collapsed .sidebar {width:0;flex-basis:0;padding:0;}
  body[data-hs-page=portal] .nav-toggle {width:30px;height:30px;border-color:#34445a;background:#182234;color:#b0c4e2;}
  body[data-hs-page=portal] #auth-view {background:radial-gradient(ellipse at 73% 18%,#24497455,transparent 52%),radial-gradient(ellipse at 15% 90%,#0d345540,transparent 50%),#080d16!important;padding:40px;}
  body[data-hs-page=portal] #auth-bg {opacity:.12!important;}
  body[data-hs-page=portal] #auth-view .auth-card {
    max-width:970px;width:100%;padding:60px;display:grid;grid-template-columns:minmax(230px,.95fr) minmax(300px,1fr);column-gap:64px;
    background:linear-gradient(130deg,#152338dd,#0e1523ee 62%)!important;border:1px solid #344860;border-radius:24px!important;
    box-shadow:0 36px 100px #0007,0 0 80px -38px #4f8cffaa!important;animation:none!important;
  }
  body[data-hs-page=portal] #auth-view .auth-logo {grid-column:1;grid-row:1;width:210px;max-width:100%;margin:0 0 44px;animation:none;filter:none;}
  body[data-hs-page=portal] #auth-view .auth-title {grid-column:1;grid-row:2;font-family:var(--hs-font)!important;font-size:38px!important;font-weight:600;line-height:1.18;letter-spacing:-.05em;text-align:left;margin:0;max-width:290px;}
  body[data-hs-page=portal] #auth-view .auth-rule {grid-column:1;grid-row:3;width:48px;height:3px;margin:26px 0;background:#4f8cff;box-shadow:0 0 22px #4f8cff70;}
  body[data-hs-page=portal] #auth-view .role-grid {grid-column:2;grid-row:1 / 7;align-self:center;gap:10px;border:0;background:transparent;border-radius:0;overflow:visible;}
  body[data-hs-page=portal] #auth-view .role-btn {min-height:66px;padding:18px 20px!important;background:#151f30;border:1px solid #344761!important;border-radius:12px;box-shadow:none;}
  body[data-hs-page=portal] #auth-view .role-btn:hover {background:#1d3150;border-color:#699bdf!important;box-shadow:0 0 24px -12px #4f8cff88;}
  body[data-hs-page=portal] #auth-view .role-name {font-size:15px;letter-spacing:0;text-transform:none;font-weight:600;}
  body[data-hs-page=portal] #auth-view .role-arrow {color:#80a3d3;font-size:22px;}
  body[data-hs-page=portal] #auth-view :is(#pw-screen,#mgr-screen) {grid-column:2;grid-row:1 / 6;align-self:center;}
  body[data-hs-page=portal] #auth-view .auth-step-label {font-size:23px;font-weight:600;letter-spacing:-.025em;}
  body[data-hs-page=portal] #auth-view .auth-step-sub {font-size:14px;line-height:1.6;margin-top:8px;}
  body[data-hs-page=portal] #auth-view .form-row label {font-size:13px;letter-spacing:0;text-transform:none;color:#b1c0d7;margin-bottom:7px;}
  body[data-hs-page=portal] #auth-view .input {min-height:48px;font-size:16px!important;}
  body[data-hs-page=portal] #auth-view .btn {min-height:48px;border-radius:10px;background:linear-gradient(180deg,#548ffd,#3d7bea);}
  @media (min-width:1001px) {
  /* Mark 102: left column centered on its own side — logo, title, rule and footer centered horizontally,
     and the whole group centered vertically against the button list. */
  body[data-hs-page=portal] #auth-view .auth-card {grid-template-rows:1fr auto auto auto auto 1fr;align-items:center;}
  body[data-hs-page=portal] #auth-view .auth-logo {grid-row:2!important;justify-self:center;display:block;margin:0 0 32px!important;}
  body[data-hs-page=portal] #auth-view .auth-title {grid-row:3!important;justify-self:center;text-align:center!important;max-width:340px;}
  body[data-hs-page=portal] #auth-view .auth-rule {grid-row:4!important;justify-self:center;margin:24px auto 0!important;}
  body[data-hs-page=portal] #auth-view .auth-foot {grid-row:5!important;justify-self:center;text-align:center!important;margin:28px 0 0!important;align-self:start!important;}
  body[data-hs-page=portal] #auth-view .role-grid {grid-row:1 / 7!important;align-self:center!important;display:flex;flex-direction:column;gap:12px;margin:0;padding:0;}
  body[data-hs-page=portal] #auth-view :is(#pw-screen,#mgr-screen) {grid-row:1 / 7!important;align-self:center;}
  body[data-hs-page=portal] #auth-view .role-btn {margin:0;}
  body[data-hs-page=portal] #auth-view #auth-banner {grid-column:1 / 3;grid-row:6;}
  }
  body[data-hs-page=portal] #auth-view .auth-foot {grid-column:1;grid-row:4;font-size:12px;text-align:left;line-height:1.5;letter-spacing:0;margin:24px 0 0;padding:0;border:0;color:#7f91ac;align-self:end;}
  body[data-hs-page=portal] #auth-view .banner {grid-column:2;grid-row:6;}
  body[data-hs-page=portal] #auth-view .link-btn {color:#9baecb;font-size:14px;}

  /* Layout adapters preserve each module's own controls and page states. */
  body[data-hs-page]:not([data-hs-page=portal])>main {padding:28px;}
  body[data-hs-page]:not([data-hs-page=portal])>.wrap {padding:24px 28px 60px;}
  body[data-hs-page]:not([data-hs-page=portal]) :is(.main>.view,.main>#view) {padding:26px 28px;}
  body[data-hs-page]:not([data-hs-page=portal])>.top,
  body[data-hs-page]:not([data-hs-page=portal])>header {padding:19px 28px;gap:18px;border-bottom:1px solid #283447;}
  body[data-hs-page]:not([data-hs-page=portal])>header>.brand {font-size:16px;letter-spacing:-.015em;font-weight:650;}
  body[data-hs-page]:not([data-hs-page=portal])>header>nav {background:transparent;gap:5px;}
  body[data-hs-page]:not([data-hs-page=portal]) main>.top {background:transparent!important;padding:0 0 23px;margin-bottom:20px;border-bottom:1px solid #283447;}
  body[data-hs-page]:not([data-hs-page=portal]) main>.nav {background:#101927!important;padding:5px;gap:4px;border-color:#283447;margin-bottom:24px;}
  body[data-hs-page]:not([data-hs-page=portal]) :is(.main>.top,.main>.topbar) {padding:24px 28px;}
  body[data-hs-page] :is(.sidebar,.side) .brand {font-size:18px;font-weight:650;letter-spacing:-.025em;}
  body[data-hs-page=operator] .main {padding:28px;}
  body[data-hs-page=operator] .main>.topbar {padding:0 0 24px;border-bottom:1px solid #283447;margin-bottom:18px;}
  body[data-hs-page=operator] .main>#view {padding:24px 0;}
  body[data-hs-page=operator] .topbar h1 {font-size:32px!important;}
  body[data-hs-page=operator] .card>.ph {padding:0 0 16px;}
  body[data-hs-page=operator] .card.metric {padding:20px;}
  body[data-hs-page=assistant] .wrap {padding-top:0!important;}
  body[data-hs-page=assistant] .navtop {padding:12px 0;margin-top:0;}
  body[data-hs-page=financials] .view {max-width:1600px;}
  body[data-hs-page=cfo] main {padding:28px!important;}
  body[data-hs-page=cfo] .topnav {padding:12px 28px;background:#0d1420!important;}
  body[data-hs-page=simcon] main {max-width:1600px;}
  body[data-hs-page=simcon] .ph {margin:20px 0 16px;}
  body[data-hs-page=simcon] .kpi .val {font-size:clamp(17px,1.55vw,24px)!important;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}
  body[data-hs-page=projections] .stores {padding:5px;background:#111a29;border:1px solid #283447;border-radius:12px;gap:5px;}
  body[data-hs-page=projections] .stores button {font-size:14px;padding:9px 14px;border-radius:8px;}
  body[data-hs-page=health] .hero {border-radius:16px;background:linear-gradient(115deg,#172b48,#101a2a);border:1px solid #314761;padding:24px;}
  body[data-hs-page=stationbooks] :is(.bg-white,.bg-ink-50,.bg-slate-50,.bg-gray-50) {background:#111824!important;}
  body[data-hs-page=stationbooks] :is(.text-ink-900,.text-ink-800,.text-slate-900,.text-gray-900) {color:#edf2fa!important;}
  body[data-hs-page=stationbooks] :is(.rounded-lg,.rounded-xl) {border-radius:14px;}
  body[data-hs-page=stationbooks] button {font-size:14px;min-height:36px;}

  @media (max-width:1000px) {
    body[data-hs-page=portal] #auth-view .auth-card {padding:40px;column-gap:36px;}
    body[data-hs-page=portal] #auth-view .auth-title {font-size:32px!important;}
    body[data-hs-page] .kpi {}
  }
  @media (max-width:768px) {
    body[data-hs-page=portal] .sidebar {width:min(300px,88vw);flex-basis:auto;padding:10px 10px 0;}
    body[data-hs-page=portal] .mtopbar {background:#0d1420ee!important;border-bottom:1px solid #304461;box-shadow:none!important;}
    body[data-hs-page=portal] .main>#content {padding:18px!important;}
    body[data-hs-page=portal] #tabs {flex-direction:column;overflow-x:hidden;}
    body[data-hs-page=portal] .tab {min-height:46px;}
    body[data-hs-page=portal] #auth-view {padding:24px 18px;}
    body[data-hs-page=portal] #auth-view .auth-card {display:flex;flex-direction:column;gap:0;max-width:470px;padding:34px 26px;}
    body[data-hs-page=portal] #auth-view .auth-logo {width:170px;margin:0 auto 25px;}
    body[data-hs-page=portal] #auth-view .auth-title {max-width:100%;font-size:27px!important;text-align:center;}
    body[data-hs-page=portal] #auth-view .auth-rule {margin:22px auto 28px;}
    body[data-hs-page=portal] #auth-view :is(.role-grid,#pw-screen,#mgr-screen) {width:100%;}
    body[data-hs-page=portal] #auth-view .auth-foot {margin:26px auto 0;text-align:center;}
    body[data-hs-page=portal] #auth-view .banner {width:100%;}
    body[data-hs-page] h1 {font-size:25px!important;}
    body[data-hs-page]:not([data-hs-page=portal])>main,
    body[data-hs-page]:not([data-hs-page=portal])>.wrap,
    body[data-hs-page]:not([data-hs-page=portal]) :is(.main>.view,.main>#view),
    body[data-hs-page=cfo] main {padding:18px!important;}
    body[data-hs-page]:not([data-hs-page=portal])>.top,
    body[data-hs-page]:not([data-hs-page=portal])>header,
    body[data-hs-page]:not([data-hs-page=portal]) :is(.main>.top,.main>.topbar) {padding:17px 18px;gap:12px;}
    body[data-hs-page] :is(.topnav,.navtop) {flex-wrap:nowrap;overflow-x:auto;}
    body[data-hs-page] :is(.topnav,.navtop)>button {flex-shrink:0;}
    body[data-hs-page] :is(input:not([type=checkbox]):not([type=radio]):not([type=range]):not([type=hidden]),select,textarea) {font-size:16px!important;}
    body[data-hs-page] :is(.cellinput,.cellin,td input,td select) {font-size:14px!important;}
    body[data-hs-page=operator] .main {padding:18px;}
    body[data-hs-page=operator] .main>.topbar {padding:0 0 18px;}
    body[data-hs-page=cfo] .topnav {padding:10px 18px;}
    body[data-hs-page] :is(.kpis,.cards,.grid,.grid2,.grid3,.grid-2,.grid-3,.grid-4) {gap:12px;}
    body[data-hs-page] th {padding:10px!important;}
    body[data-hs-page] td {padding:11px 10px;}
  }
  @media (max-width:430px) {
    body[data-hs-page] .kpis {}
    body[data-hs-page] .kpi {}
    body[data-hs-page] .kpi :is(.val,.value,.v) {}
    body[data-hs-page=portal] #auth-view .auth-card {padding:30px 21px;}
  }
  @media (prefers-reduced-motion:reduce) {
    body[data-hs-page] *,body[data-hs-page] *::before,body[data-hs-page] *::after {animation:none!important;transition:none!important;scroll-behavior:auto!important;}
  }
}
@media screen {
  body[data-hs-page] :is(p,span,div,a,button,input,select,textarea,label,td,th,li):not(.ti):not([class^="ti-"]):not([class*=" ti-"]) {font-family:var(--hs-font);}
  body[data-hs-page] :is(.card,.panel,.box) {border-color:var(--hs-border);}
  body[data-hs-page] .card {padding:20px;}
  body[data-hs-page] .card:has(>.ph):has(>.pb) {padding:0;}
  body[data-hs-page] :is(.pos,.green,.cin,.money-in,.deposit,.inflow,.up-val,.text-good),
  body[data-hs-page] :is(.pos,.green,.cin,.money-in,.deposit,.inflow,.up-val,.text-good) * {color:#00e676!important;text-shadow:0 0 18px #00e67635!important;}
  body[data-hs-page] :is(.neg,.red,.cout,.money-out,.withdrawal,.outflow,.down-val,.text-bad),
  body[data-hs-page] :is(.neg,.red,.cout,.money-out,.withdrawal,.outflow,.down-val,.text-bad) * {color:#ff4d61!important;text-shadow:0 0 18px #ff2f4938!important;}
  body[data-hs-page] :is(.card.alert,.card.bad,.card.crit,.row-red,.cal-day.neg) {border-color:#933044!important;background:linear-gradient(130deg,#301522,#191321)!important;}
  body[data-hs-page] :is(.card.ok,.row-green) {border-color:#235c45!important;}
  body[data-hs-page] .neg-first td {background:#351922!important;border-color:#753346!important;}
  body[data-hs-page] .neg-first td:first-child {box-shadow:inset 3px 0 #ff4d61;}
  body[data-hs-page] .bighero.red {border-color:#a83b4f!important;background:linear-gradient(110deg,#391524,#191321)!important;}
  body[data-hs-page] .bighero.green {border-color:#287757!important;background:linear-gradient(110deg,#103829,#101b23)!important;}
}
@media screen and (max-width:768px) {
  body[data-hs-page] .card:has(table) {min-width:0;max-width:100%;overflow-x:auto;}
  body[data-hs-page] .card:has(table) :is(h2,.sub,.note) {white-space:normal;}
  body[data-hs-page]:not([data-hs-page=portal])>header {align-items:center;}
  body[data-hs-page]:not([data-hs-page=portal])>header>nav {flex-wrap:nowrap;white-space:nowrap;order:3;width:100%;}
  body[data-hs-page]:not([data-hs-page=portal])>header>.saved {margin-left:auto;font-size:12px;}
}

/* ═══ Mark 105 — device-aware layout (phone · iPad · laptop · big screen) ═══════════════════════════
   1. KPI numbers are sized by the CARD's own width (container queries), never the window — a number can
      never run past its card edge, whether the card is 1 of 8 on a 4K screen or 1 of 2 on a phone.
   2. Every KPI is a column: label (reserved 2 lines) → number → note. Numbers in the same row line up
      even when one label wraps and its neighbour's doesn't.
   3. Grids re-flow by device tier; tables scroll inside their card; tap targets ≥ 44px on touch.       */
@media screen {
  body[data-hs-page] .kpi {container-type:inline-size;display:flex!important;flex-direction:column;justify-content:flex-start;min-width:0;overflow:hidden;}
  body[data-hs-page] .kpi :is(.lab,.label,.l) {min-height:2.7em;line-height:1.35!important;display:flex;align-items:flex-end;overflow-wrap:anywhere;}
  body[data-hs-page] .kpi :is(.val,.value,.v) {margin-top:8px!important;line-height:1.15!important;}
  body[data-hs-page] .kpi :is(.val,.value,.v) span {font-size:.5em;}
  body[data-hs-page] .kpi :is(.sub,.s,.note,.delta) {margin-top:6px;overflow-wrap:anywhere;}
  body[data-hs-page] :is(.kpis,.cards,.stat-grid,.metrics,.bignums,.kpi-grid) {align-items:stretch;}
  body[data-hs-page] :is(.tablewrap,.table-wrap,.tbl-wrap) {max-width:100%;overflow-x:auto;-webkit-overflow-scrolling:touch;}
  body[data-hs-page] :is(td,th).n,body[data-hs-page] :is(td,th).num {white-space:nowrap;}

  /* big screens: roomy, cap line length */
  @media (min-width:1600px) {
    body[data-hs-page] .kpis {}
  }
  /* laptops */
  @media (min-width:1025px) and (max-width:1599px) {
    body[data-hs-page] .kpis {}
    body[data-hs-page] .kpi {}
  }
  /* iPad / tablets (portrait + landscape) */
  @media (min-width:641px) and (max-width:1024px) {
    body[data-hs-page] .kpis {}
    body[data-hs-page] .kpi {}
    body[data-hs-page] :is(.projgrid,.vend-grid,.storegrid) {grid-template-columns:repeat(2,minmax(0,1fr))!important;}
    body[data-hs-page] :is(.g2,.grid2,.grid-2) {grid-template-columns:1fr 1fr;}
  }
  /* phones */
  @media (max-width:640px) {
    body[data-hs-page] .kpis {}
    body[data-hs-page] .kpi {}
    body[data-hs-page] .kpi :is(.lab,.label,.l) {}
    body[data-hs-page] .kpi :is(.val,.value,.v) {}
    body[data-hs-page] :is(.projgrid,.vend-grid,.storegrid,.g2,.g3,.grid2,.grid3,.grid-2,.grid-3,.entry,.calc) {grid-template-columns:1fr!important;}
    body[data-hs-page] :is(.ph,.row,.filters,.top) {flex-wrap:wrap;}
    body[data-hs-page] :is(.nav,.seg,.stores,.topnav,.subnav) {flex-wrap:nowrap!important;overflow-x:auto;-webkit-overflow-scrolling:touch;scrollbar-width:none;}
    body[data-hs-page] :is(.nav,.seg,.stores,.topnav,.subnav)>button {flex:0 0 auto;}
    body[data-hs-page] .modal {width:100%!important;max-height:calc(100dvh - 24px);}
  }
  /* touch devices: comfortable tap targets */
  @media (pointer:coarse) {
    body[data-hs-page] :is(button,.btn,select,.tab) {min-height:44px;}
  }
}

/* Mark 109 — login role buttons: everything centered */
body[data-hs-page=portal] #auth-view .role-grid{align-items:stretch;width:100%;max-width:560px;margin-left:auto!important;margin-right:auto!important;}
body[data-hs-page=portal] #auth-view .role-btn{position:relative;justify-content:center!important;text-align:center!important;padding-left:48px!important;padding-right:48px!important;}
body[data-hs-page=portal] #auth-view .role-btn:hover{padding-left:48px!important;}
body[data-hs-page=portal] #auth-view .role-name{flex:0 1 auto;text-align:center;}
body[data-hs-page=portal] #auth-view .role-arrow{position:absolute;right:20px;top:50%;transform:translateY(-50%);}
body[data-hs-page=portal] #auth-view .role-btn:hover .role-arrow{transform:translate(3px,-50%);}

.hs-theme-btn{display:flex;align-items:center;gap:8px;margin:4px 12px 2px;padding:8px 12px;border-radius:10px;border:1px solid rgba(255,255,255,.12);background:rgba(255,255,255,.04);color:#c9d3e6;font:600 12.5px -apple-system,BlinkMacSystemFont,'Segoe UI',sans-serif;cursor:pointer;width:calc(100% - 24px)}
.hs-theme-btn:hover{border-color:#4f8cff}
#auth-view .hs-theme-btn.hs-theme-float,.hs-theme-float{position:fixed!important;right:16px!important;bottom:16px!important;top:auto!important;left:auto!important;z-index:50;width:auto!important;margin:0!important}

/* Mark 130 light mode — native Apple-style white theme (colours from the Mark 126–129 design pass, made flat: no glow, no blur).
   Dark stays the default; /theme-mode.js also lightens any tool's own built-in dark colours when light is on.
   This intentionally replaces the old full-page inversion treatment above.
   Application structure, status semantics, permissions and module behavior are unchanged. */
@media screen {
  html.hs-light,
  html.hs-light-child {
    filter:none!important;
    color-scheme:light!important;
    background:#fff!important;
  }
  html.hs-light :is(img,video,picture,.hs-keep-color),
  html.hs-light-child :is(img,video,picture,.hs-keep-color){filter:none!important}

  :is(html.hs-light,html.hs-light-child) body,
  :is(html.hs-light,html.hs-light-child) body[data-hs-page] {
    color-scheme:light!important;
    background:#fff!important;background-image:none!important;
    color:#1d1d1f!important;
    --hs-bg:#fff!important;--hs-surface:#fff!important;--hs-raised:#fbfbfd!important;
    --hs-border:#d9d9df!important;--hs-border-soft:#e7e7ec!important;
    --hs-text:#1d1d1f!important;--hs-muted:#6e6e73!important;
    --hs-electric:#0071e3!important;--hs-electric-2:#409cff!important;
    --hs-live:#1a9b48!important;--hs-alert:#d70015!important;--hs-warning:#a86400!important;
    --hs-shadow:0 1px 2px rgba(0,0,0,.035),0 10px 34px rgba(0,0,0,.065)!important;
    --hs-bloom:0 0 0 1px rgba(0,113,227,.10),0 12px 28px rgba(0,113,227,.08)!important;
    --bg:#fff!important;--bg2:#fbfbfd!important;
    --surface:#fff!important;--surface-2:#fbfbfd!important;--card:#fff!important;--panel:#fff!important;--panel2:#fbfbfd!important;
    --line:#dedee3!important;--line2:#d1d1d6!important;--border:#dedee3!important;
    --ink:#1d1d1f!important;--ink-2:#424245!important;--ink-3:#6e6e73!important;
    --txt:#1d1d1f!important;--text:#1d1d1f!important;
    --muted:#6e6e73!important;--dim:#6e6e73!important;--mut:#6e6e73!important;
    --muted2:#86868b!important;--muted-2:#86868b!important;--dim2:#86868b!important;
    --blue:#0071e3!important;--brand:#0071e3!important;--acc:#0071e3!important;--pri:#0071e3!important;
    --brand-mid:#0068d1!important;--brand-soft:#eaf4ff!important;
    --green:#188a42!important;--good:#188a42!important;--ok:#188a42!important;
    --red:#d70015!important;--bad:#d70015!important;--crit:#d70015!important;
    --ok-bg:#edf8f1!important;--greenbg:#edf8f1!important;
    --bad-bg:#fff0f1!important;--redbg:#fff0f1!important;--crit-bg:#fff0f1!important;
    --shadow-sm:0 1px 2px rgba(0,0,0,.04)!important;
    --shadow:0 8px 28px rgba(0,0,0,.07)!important;
    --shadow-lg:0 24px 70px rgba(0,0,0,.12)!important;
  }

  :is(html.hs-light,html.hs-light-child) body[data-hs-page] :is(h1,h2,h3,h4){color:#1d1d1f!important}
  :is(html.hs-light,html.hs-light-child) body[data-hs-page] :is(.muted,.mut,.sub,.sub2,.note,.hint,.small,.card-sub,.pagesub,.section-subtitle){color:#6e6e73!important}

  /* White content cards with quiet separation and real depth. */
  :is(html.hs-light,html.hs-light-child) body:not(#hsA):not(#hsB) :is(.card,.kpi,.store-card,.panel,.box,.tile,.block,.stat,.metric,.widget,.wk-hero,.modal,.sheet,dialog,.auth-card,.login-card){
    background:#fff!important;background-image:none!important;
    border-color:#dedee3!important;
    box-shadow:0 1px 2px rgba(0,0,0,.035),0 10px 32px rgba(0,0,0,.06)!important;
  }
  :is(html.hs-light,html.hs-light-child) body:not(#hsA):not(#hsB) :is(.card,.kpi,.store-card,.panel,.box,.tile,.stat,.metric,.widget,.cell):hover{
    border-color:#d2d2d7!important;
    box-shadow:0 2px 4px rgba(0,0,0,.04),0 14px 38px rgba(0,0,0,.075)!important;
  }
  :is(html.hs-light,html.hs-light-child) body[data-hs-page] .kpi :is(.lab,.label,.l){color:#6e6e73!important}
  :is(html.hs-light,html.hs-light-child) body[data-hs-page] .kpi :is(.val,.value,.v){color:#1d1d1f}

  /* Frosted navigation and headers; glass is restrained to chrome. */
  :is(html.hs-light,html.hs-light-child) body:not(#hsA):not(#hsB) :is(.topbar,header,.header,.app-header,.top,.mtopbar,.nav-search,.topnav,.navtop){
    background:rgba(251,251,253,.82)!important;background-image:none!important;
    border-color:#dedee3!important;
    box-shadow:0 1px 0 rgba(0,0,0,.035)!important;
  }
  :is(html.hs-light,html.hs-light-child) body:not(#hsA):not(#hsB) :is(.sidebar,.side){
    background:rgba(248,248,250,.90)!important;background-image:none!important;
    border-color:#dedee3!important;box-shadow:1px 0 0 rgba(0,0,0,.025)!important;
  }
  :is(html.hs-light,html.hs-light-child) body[data-hs-page] :is(nav button,nav a,.nav button,.nav a,.tab,.subtab,.topnav button,.navtop button,.navi){color:#515154!important}
  :is(html.hs-light,html.hs-light-child) body[data-hs-page] :is(nav button,nav a,.nav button,.nav a,.tab,.subtab,.topnav button,.navtop button,.navi):hover{
    background:#ededf0!important;color:#1d1d1f!important;
  }
  :is(html.hs-light,html.hs-light-child) body[data-hs-page] :is(nav button.active,nav a.active,nav button.on,.nav button.on,.tab.active,.subtab.active,.topnav button.active,.navtop button.active,.navi.on){
    background:#e7f2ff!important;background-image:linear-gradient(180deg,#edf6ff,#e4f1ff)!important;
    color:#0066cc!important;border-color:#b7d8fa!important;
    box-shadow:inset 0 1px 0 rgba(255,255,255,.9),0 1px 3px rgba(0,113,227,.08)!important;
  }
  :is(html.hs-light,html.hs-light-child) body[data-hs-page] :is(.navsec,.nav-section-title,.grpttl){color:#86868b!important}

  /* Controls use familiar macOS proportions and feedback. */
  :is(html.hs-light,html.hs-light-child) body[data-hs-page] :is(input:not([type=checkbox]):not([type=radio]):not([type=range]):not([type=hidden]):not([type=color]),select,textarea){
    background:#fff!important;color:#1d1d1f!important;border-color:#cfcfd5!important;
    box-shadow:inset 0 1px 2px rgba(0,0,0,.025)!important;
  }
  :is(html.hs-light,html.hs-light-child) body[data-hs-page] :is(input,textarea)::placeholder{color:#98989d!important}
  :is(html.hs-light,html.hs-light-child) body[data-hs-page] :is(input,select,textarea):focus{
    border-color:#0071e3!important;box-shadow:0 0 0 3px rgba(0,113,227,.14)!important;outline:none!important;
  }
  :is(html.hs-light,html.hs-light-child) body[data-hs-page] :is(.btn.pri,.btn.primary,.btn-primary){
    background:#0071e3!important;background-image:linear-gradient(180deg,#1482ed,#0071e3)!important;
    border-color:#0071e3!important;color:#fff!important;box-shadow:0 1px 2px rgba(0,76,153,.18)!important;
  }
  :is(html.hs-light,html.hs-light-child) body[data-hs-page] :is(.btn.ghost,.btn-ghost,.btn.secondary,.btn-secondary),
  :is(html.hs-light,html.hs-light-child) body:not(#hsA):not(#hsB) :is(.chip,.pill,.tag,.seg button,.stores button,.btn:not(.pri):not(.ok):not(.primary):not(.danger)){
    background:#f7f7f9!important;color:#424245!important;border-color:#d7d7dc!important;box-shadow:0 1px 2px rgba(0,0,0,.025)!important;
  }
  :is(html.hs-light,html.hs-light-child) body:not(#hsA):not(#hsB) :is(.chip.on,.chip.active,.seg button.on,.stores button.on,.tab.on,.tab.active){
    background:#e7f2ff!important;color:#0066cc!important;border-color:#b7d8fa!important;
  }
  :is(html.hs-light,html.hs-light-child) body[data-hs-page] :is(.btn.del,.btn.danger,.btn-danger){background:#fff1f2!important;color:#d70015!important;border-color:#f2c4c9!important}

  /* Data stays quiet and readable; status colours retain their meaning. */
  :is(html.hs-light,html.hs-light-child) body[data-hs-page] th{background:#f5f5f7!important;color:#6e6e73!important;border-color:#dedee3!important}
  :is(html.hs-light,html.hs-light-child) body[data-hs-page] td{color:#2c2c2e;border-color:#e7e7ec!important}
  :is(html.hs-light,html.hs-light-child) body[data-hs-page] tbody tr:hover{background:#f5f9ff!important}
  :is(html.hs-light,html.hs-light-child) body[data-hs-page] :is(tfoot td,tr.tot td,tr.total td,tr.totrow td){background:#f1f6fc!important;border-color:#cad8e8!important}
  :is(html.hs-light,html.hs-light-child) body[data-hs-page] :is(.pos,.positive,.num.pos,.n.pos,.val.pos,.value.pos,.green,.cin,.money-in,.deposit,.inflow,.up-val,.text-good),
  :is(html.hs-light,html.hs-light-child) body[data-hs-page] :is(.pos,.positive,.num.pos,.n.pos,.val.pos,.value.pos,.green,.cin,.money-in,.deposit,.inflow,.up-val,.text-good) *{color:#188a42!important;text-shadow:none!important}
  :is(html.hs-light,html.hs-light-child) body[data-hs-page] :is(.neg,.negative,.num.neg,.n.neg,.val.neg,.value.neg,.red,.cout,.money-out,.withdrawal,.outflow,.down-val,.text-bad),
  :is(html.hs-light,html.hs-light-child) body[data-hs-page] :is(.neg,.negative,.num.neg,.n.neg,.val.neg,.value.neg,.red,.cout,.money-out,.withdrawal,.outflow,.down-val,.text-bad) *{color:#d70015!important;text-shadow:none!important}
  :is(html.hs-light,html.hs-light-child) body[data-hs-page] :is(.card.alert,.card.bad,.card.crit,.row-red,.cal-day.neg){background:#fff5f5!important;background-image:none!important;border-color:#efb4bb!important}
  :is(html.hs-light,html.hs-light-child) body[data-hs-page] :is(.card.ok,.row-green){background:#f2faf5!important;border-color:#b8dfc5!important}
  :is(html.hs-light,html.hs-light-child) body[data-hs-page] .neg-first td{background:#fff1f2!important;border-color:#f1c4c9!important}
  :is(html.hs-light,html.hs-light-child) body[data-hs-page] .bighero.red{background:#fff2f3!important;background-image:none!important;border-color:#e9adb5!important}
  :is(html.hs-light,html.hs-light-child) body[data-hs-page] .bighero.green{background:#f1faf4!important;background-image:none!important;border-color:#b2dec0!important}
  :is(html.hs-light,html.hs-light-child) body[data-hs-page] ::-webkit-scrollbar-track{background:#f1f1f3}
  :is(html.hs-light,html.hs-light-child) body[data-hs-page] ::-webkit-scrollbar-thumb{background:#c7c7cc;border-color:#f1f1f3}
  :is(html.hs-light,html.hs-light-child) body[data-hs-page] ::selection{background:#cde6ff;color:#1d1d1f}

  /* Portal shell and sign-in receive the same native treatment. */
  html.hs-light body[data-hs-page=portal] :is(#frames,.appframe){background:#f5f5f7!important}
  html.hs-light body[data-hs-page=portal] .nav-search{background:#fff!important;border-color:#d7d7dc!important}
  html.hs-light body[data-hs-page=portal] .subnav{border-color:#cfddeb!important}
  html.hs-light body[data-hs-page=portal] .subnav .subitem{color:#6e6e73!important}
  html.hs-light body[data-hs-page=portal] .subnav .subitem.active{background:#e7f2ff!important;color:#0066cc!important}
  html.hs-light body[data-hs-page=portal] :is(.side-foot,#build-tag){background:#f2f2f4!important;background-image:none!important;border-color:#dedee3!important;color:#6e6e73!important}
  html.hs-light body[data-hs-page=portal] .side-foot :is(.pill,.lo){color:#515154!important}
  html.hs-light body[data-hs-page=portal] .nav-toggle{background:#fff!important;color:#515154!important;border-color:#d7d7dc!important;box-shadow:0 2px 8px rgba(0,0,0,.08)!important}
  html.hs-light body[data-hs-page=portal] #auth-view{
    background:#fff!important;
  }
  html.hs-light body[data-hs-page=portal] #auth-bg{opacity:.035!important}
  html.hs-light body[data-hs-page=portal] #auth-view .auth-card{
    background:rgba(255,255,255,.82)!important;background-image:none!important;
    border-color:rgba(0,0,0,.10)!important;box-shadow:0 32px 90px rgba(0,0,0,.12),inset 0 1px 0 rgba(255,255,255,.9)!important;
  }
  html.hs-light body[data-hs-page=portal] #auth-view .role-btn{background:#fff!important;border-color:#dedee3!important;box-shadow:0 1px 2px rgba(0,0,0,.03)!important;color:#1d1d1f!important}
  html.hs-light body[data-hs-page=portal] #auth-view .role-btn:hover{background:#f7faff!important;border-color:#8fc2f4!important;box-shadow:0 10px 28px rgba(0,113,227,.10)!important}
  html.hs-light body[data-hs-page=portal] #auth-view :is(.role-arrow,.link-btn){color:#0071e3!important}
  html.hs-light body[data-hs-page=portal] #auth-view :is(.auth-foot,.auth-step-sub){color:#6e6e73!important}
  html.hs-light body[data-hs-page=portal] #auth-view .form-row label{color:#515154!important}

  html.hs-light img[src*="hotspot-logo"],html.hs-light-child img[src*="hotspot-logo"]{content:url(/hotspot-logo-light.png);filter:none!important}
  :is(html.hs-light,html.hs-light-child) .hs-theme-btn{background:rgba(255,255,255,.78)!important;color:#424245!important;border-color:#d7d7dc!important;box-shadow:0 2px 10px rgba(0,0,0,.06)!important;}
  :is(html.hs-light,html.hs-light-child) .hs-theme-btn:hover{background:#fff!important;border-color:#9cc8f1!important;color:#0066cc!important}
}

/* Mark 127 — light-only consistency pass.
   Status is communicated through small labels and text. Large colored banners and dark islands are removed. */
@media screen {
  
  :is(html.hs-light,html.hs-light-child) body[data-hs-page] :is(.banner,.alert,.notice,.notification,.alert-row,.callout,.hero,.bighero,.wk-hero){
    background:#fff!important;background-image:none!important;color:#1d1d1f!important;
    border-color:#dedee3!important;box-shadow:0 1px 2px rgba(0,0,0,.03),0 8px 24px rgba(0,0,0,.05)!important;
  }
  :is(html.hs-light,html.hs-light-child) body[data-hs-page] :is(.banner,.alert,.notice,.notification,.alert-row,.callout,.hero,.bighero,.wk-hero) :is(h1,h2,h3,h4,strong,b){color:#1d1d1f!important;text-shadow:none!important}
  :is(html.hs-light,html.hs-light-child) body[data-hs-page] :is(.banner,.alert,.notice,.notification,.alert-row,.callout,.hero,.bighero,.wk-hero) :is(p,span,small,.sub,.muted,.note){text-shadow:none!important}
  :is(html.hs-light,html.hs-light-child) body[data-hs-page] :is(.modal,.dialog,.sheet,dialog){background:#fff!important;background-image:none!important;color:#1d1d1f!important;border-color:#d1d1d6!important;box-shadow:0 28px 90px rgba(0,0,0,.16)!important}
  :is(html.hs-light,html.hs-light-child) body[data-hs-page] :is(.seg,.tabs,.chips,.stores,.subnav,.topnav,.navtop){background:#f2f2f4!important;background-image:none!important;border-color:#dedee3!important}
  :is(html.hs-light,html.hs-light-child) body[data-hs-page] :is(.saved,.status,.state,.tag,.pill,.badge){text-shadow:none!important;box-shadow:none!important}
  :is(html.hs-light,html.hs-light-child) body[data-hs-page] :is(.panel,.card,.kpi,.box,.tile,.block,.stat,.metric,.widget,.store-card){background:#fff!important;background-image:none!important}
  :is(html.hs-light,html.hs-light-child) body[data-hs-page] :is(.overlay,.modal-bg,.backdrop){background:rgba(29,29,31,.28)!important;background-image:none!important}
  :is(html.hs-light,html.hs-light-child) body[data-hs-page] :is(.code,.mono-box,pre){background:#f5f5f7!important;color:#1d1d1f!important;border-color:#dedee3!important}
  html.hs-light body[data-hs-page=portal] #auth-view .banner{background:#fff!important;color:#1d1d1f!important;border-color:#dedee3!important}
}

/* Mark 128 — framed Sites shell fix. The hosted portal is embedded, so it receives
   hs-light-child. Keep the entire portal shell and sign-in screen natively light. */
@media screen {
  :is(html.hs-light,html.hs-light-child) body[data-hs-page=portal]{background:#f5f5f7!important;color:#1d1d1f!important}
  :is(html.hs-light,html.hs-light-child) body[data-hs-page=portal] #auth-view{
    min-height:100vh!important;background:#fff!important;color:#1d1d1f!important;
  }
  :is(html.hs-light,html.hs-light-child) body[data-hs-page=portal] #auth-bg{opacity:.025!important}
  :is(html.hs-light,html.hs-light-child) body[data-hs-page=portal] #auth-view .auth-card{
    background:#fff!important;background-image:none!important;border:1px solid #dedee3!important;
    box-shadow:0 24px 70px rgba(0,0,0,.11)!important;color:#1d1d1f!important;
  }
  :is(html.hs-light,html.hs-light-child) body[data-hs-page=portal] #auth-view :is(.auth-title,.auth-step-label,.role-name){color:#1d1d1f!important;text-shadow:none!important}
  :is(html.hs-light,html.hs-light-child) body[data-hs-page=portal] #auth-view :is(.auth-foot,.auth-step-sub,.role-desc){color:#6e6e73!important;text-shadow:none!important}
  :is(html.hs-light,html.hs-light-child) body[data-hs-page=portal] #auth-view .auth-rule{background:#0071e3!important;box-shadow:none!important}
  :is(html.hs-light,html.hs-light-child) body[data-hs-page=portal] #auth-view .role-btn{
    background:#fff!important;background-image:none!important;border:1px solid #d7d7dc!important;color:#1d1d1f!important;box-shadow:none!important;
  }
  :is(html.hs-light,html.hs-light-child) body[data-hs-page=portal] #auth-view .role-btn:hover{background:#f5f9ff!important;border-color:#8fc2f4!important;box-shadow:0 6px 18px rgba(0,113,227,.08)!important}
  :is(html.hs-light,html.hs-light-child) body[data-hs-page=portal] #auth-view :is(.role-arrow,.link-btn){color:#0071e3!important}
  :is(html.hs-light,html.hs-light-child) body[data-hs-page=portal] #auth-view .form-row label{color:#515154!important}
  :is(html.hs-light,html.hs-light-child) body[data-hs-page=portal] #auth-view :is(.input,input){background:#fff!important;color:#1d1d1f!important;border-color:#c7c7cc!important}
  :is(html.hs-light,html.hs-light-child) body[data-hs-page=portal] #app-view{background:#f5f5f7!important;background-image:none!important;color:#1d1d1f!important}
  :is(html.hs-light,html.hs-light-child) body[data-hs-page=portal] :is(#frames,.appframe){background:#f5f5f7!important}
  :is(html.hs-light,html.hs-light-child) body[data-hs-page=portal] :is(.sidebar,.mtopbar){background:#f8f8fa!important;background-image:none!important;border-color:#dedee3!important;color:#1d1d1f!important}
  :is(html.hs-light,html.hs-light-child) body[data-hs-page=portal] .sidebar::after{display:none!important}
  :is(html.hs-light,html.hs-light-child) body[data-hs-page=portal] :is(.tab,.subitem,.mobile-view-name){color:#515154!important;text-shadow:none!important}
  :is(html.hs-light,html.hs-light-child) body[data-hs-page=portal] .tab.active{background:#e7f2ff!important;background-image:none!important;color:#0066cc!important;border-color:#b7d8fa!important;box-shadow:inset 3px 0 #0071e3!important}
  :is(html.hs-light,html.hs-light-child) body[data-hs-page=portal] .subnav .subitem.active{background:#edf6ff!important;color:#0066cc!important}
  :is(html.hs-light,html.hs-light-child) body[data-hs-page=portal] :is(.nav-search,.nav-toggle,.nav-reopen,.mmenu){background:#fff!important;color:#424245!important;border-color:#d7d7dc!important;box-shadow:none!important}
  :is(html.hs-light,html.hs-light-child) body[data-hs-page=portal] :is(.side-foot,#build-tag){background:#f2f2f4!important;background-image:none!important;color:#6e6e73!important;border-color:#dedee3!important}
  :is(html.hs-light,html.hs-light-child) body[data-hs-page=portal] .side-foot :is(.pill,.lo){background:transparent!important;color:#515154!important}
}

/* Mark 130 — light mode: no decorative grid / glow layers behind pages */
:is(html.hs-light,html.hs-light-child) body::before,
:is(html.hs-light,html.hs-light-child) body::after{display:none!important}
:is(html.hs-light,html.hs-light-child) body:not(#hsA) :is(.card,.kpi,.panel,.box,.tile,.stat,.metric,.widget,.store-card)::before,
:is(html.hs-light,html.hs-light-child) body:not(#hsA) :is(.card,.kpi,.panel,.box,.tile,.stat,.metric,.widget,.store-card)::after{background-image:none!important;box-shadow:none!important}

/* Mark 132 — light mode depth + stronger colour. Apple "grouped" look: soft grey page, white tiles that lift off it,
   and clearer status colours so green / red / gold / blue tiles read apart at a glance. */
@media screen {
  :is(html.hs-light,html.hs-light-child){background:#f2f2f7!important}
  :is(html.hs-light,html.hs-light-child) body,
  :is(html.hs-light,html.hs-light-child) body[data-hs-page]{
    background:#f2f2f7!important;
    --hs-bg:#f2f2f7!important;--bg:#f2f2f7!important;
    --green:#1a9e45!important;--good:#1a9e45!important;--ok:#1a9e45!important;--hs-live:#1a9e45!important;
    --red:#e3162f!important;--bad:#e3162f!important;--crit:#e3162f!important;--hs-alert:#e3162f!important;
    --gold:#d48800!important;--warn:#d48800!important;--hs-warning:#d48800!important;
    --blue:#0071e3!important;--brand:#0071e3!important;--acc:#0071e3!important;--pri:#0071e3!important;
    --ok-bg:#e3f6e9!important;--greenbg:#e3f6e9!important;--bad-bg:#fde8eb!important;--redbg:#fde8eb!important;--crit-bg:#fde8eb!important;
  }
  html.hs-light body[data-hs-page=portal] :is(#frames,.appframe,#app-view,.main){background:#f2f2f7!important}

  /* tiles lift off the page */
  :is(html.hs-light,html.hs-light-child) body:not(#hsA):not(#hsB) :is(.card,.kpi,.store-card,.panel,.box,.tile,.stat,.metric,.widget,.wk-hero){
    background:#fff!important;border:1px solid #e1e1e7!important;
    box-shadow:0 1px 1px rgba(0,0,0,.04),0 3px 8px rgba(0,0,0,.06),0 14px 32px -10px rgba(0,0,0,.14)!important;
  }
  :is(html.hs-light,html.hs-light-child) body:not(#hsA):not(#hsB) :is(.card,.kpi,.store-card,.panel,.box,.tile,.stat,.metric,.widget):hover{
    border-color:#d4d4dc!important;box-shadow:0 1px 2px rgba(0,0,0,.05),0 6px 14px rgba(0,0,0,.08),0 20px 40px -12px rgba(0,0,0,.18)!important;
  }
  /* tiles inside tiles stay flat so the page doesn't get busy */
  :is(html.hs-light,html.hs-light-child) body:not(#hsA):not(#hsB) :is(.card,.panel,.box) :is(.card,.kpi,.tile,.stat,.metric,.box){
    box-shadow:0 1px 2px rgba(0,0,0,.05),0 4px 12px -4px rgba(0,0,0,.08)!important;
  }

  /* coloured KPI tiles: a strong accent stripe + matching number */
  :is(html.hs-light,html.hs-light-child) body[data-hs-page] .kpi{position:relative;overflow:hidden}
  :is(html.hs-light,html.hs-light-child) body:not(#hsA):not(#hsB):not(#hsC) :is(.kpi.g,.kpi.green,.kpi.good,.kpi.ok){box-shadow:inset 4px 0 0 #1a9e45,0 1px 1px rgba(0,0,0,.04),0 3px 8px rgba(0,0,0,.06),0 14px 32px -10px rgba(0,0,0,.14)!important}
  :is(html.hs-light,html.hs-light-child) body:not(#hsA):not(#hsB):not(#hsC) :is(.kpi.r,.kpi.red,.kpi.bad,.kpi.crit){box-shadow:inset 4px 0 0 #e3162f,0 1px 1px rgba(0,0,0,.04),0 3px 8px rgba(0,0,0,.06),0 14px 32px -10px rgba(0,0,0,.14)!important}
  :is(html.hs-light,html.hs-light-child) body:not(#hsA):not(#hsB):not(#hsC) :is(.kpi.y,.kpi.gold,.kpi.warn,.kpi.amber){box-shadow:inset 4px 0 0 #e59a00,0 1px 1px rgba(0,0,0,.04),0 3px 8px rgba(0,0,0,.06),0 14px 32px -10px rgba(0,0,0,.14)!important}
  :is(html.hs-light,html.hs-light-child) body:not(#hsA):not(#hsB):not(#hsC) :is(.kpi.b,.kpi.blue,.kpi.tax,.kpi.info){box-shadow:inset 4px 0 0 #0071e3,0 1px 1px rgba(0,0,0,.04),0 3px 8px rgba(0,0,0,.06),0 14px 32px -10px rgba(0,0,0,.14)!important}
  :is(html.hs-light,html.hs-light-child) body:not(#hsA):not(#hsB):not(#hsC) :is(.kpi.g,.kpi.green,.kpi.good,.kpi.ok) :is(.val,.value,.v){color:#138a3a!important}
  :is(html.hs-light,html.hs-light-child) body:not(#hsA):not(#hsB):not(#hsC) :is(.kpi.r,.kpi.red,.kpi.bad,.kpi.crit) :is(.val,.value,.v){color:#d0102a!important}
  :is(html.hs-light,html.hs-light-child) body:not(#hsA):not(#hsB):not(#hsC) :is(.kpi.y,.kpi.gold,.kpi.warn,.kpi.amber) :is(.val,.value,.v){color:#b86e00!important}
  :is(html.hs-light,html.hs-light-child) body:not(#hsA):not(#hsB):not(#hsC) :is(.kpi.b,.kpi.blue,.kpi.info) :is(.val,.value,.v){color:#0066cc!important}
  :is(html.hs-light,html.hs-light-child) body[data-hs-page] .kpi.tax :is(.val,.value,.v){color:#138a3a!important}

  /* status text + pills with real colour */
  :is(html.hs-light,html.hs-light-child) body[data-hs-page] :is(.up,.pos,.positive,.good,.ok-t,.green){color:#138a3a!important}
  :is(html.hs-light,html.hs-light-child) body[data-hs-page] :is(.dn,.neg,.negative,.bad-t,.red){color:#d0102a!important}
  :is(html.hs-light,html.hs-light-child) body:not(#hsA):not(#hsB) :is(.pill,.tag,.badge,.chip).g,
  :is(html.hs-light,html.hs-light-child) body:not(#hsA):not(#hsB) :is(.pill,.tag,.badge).green{background:#dff5e6!important;color:#0f7a33!important;border-color:#9fdcb3!important}
  :is(html.hs-light,html.hs-light-child) body:not(#hsA):not(#hsB) :is(.pill,.tag,.badge,.chip).r,
  :is(html.hs-light,html.hs-light-child) body:not(#hsA):not(#hsB) :is(.pill,.tag,.badge).red{background:#fde4e8!important;color:#c20d25!important;border-color:#f5a8b3!important}
  :is(html.hs-light,html.hs-light-child) body:not(#hsA):not(#hsB) :is(.pill,.tag,.badge,.chip).y,
  :is(html.hs-light,html.hs-light-child) body:not(#hsA):not(#hsB) :is(.pill,.tag,.badge).gold{background:#fff1d6!important;color:#a35f00!important;border-color:#f3cf85!important}
  :is(html.hs-light,html.hs-light-child) body:not(#hsA):not(#hsB) :is(.pill,.tag,.badge).b{background:#e1efff!important;color:#0060c7!important;border-color:#a9cff8!important}

  /* table headers + totals a touch stronger so rows separate */
  :is(html.hs-light,html.hs-light-child) body[data-hs-page] th{background:#f2f2f7!important;color:#5f5f66!important}
  :is(html.hs-light,html.hs-light-child) body[data-hs-page] :is(tfoot td,tr.tot td,tr.total td,tr.totrow td){background:#eef4fc!important;color:#1d1d1f!important;font-weight:700}
  :is(html.hs-light,html.hs-light-child) body[data-hs-page] tbody tr:nth-child(even) td{background:#fbfbfd}
}
/* Mark 132 — selected tab / chip always clearly highlighted in light mode */
:is(html.hs-light,html.hs-light-child) body:not(#hsA):not(#hsB):not(#hsC) :is(.seg button.on,.seg button.active,.chip.on,.chip.active,.stores button.on,.tab.on,.tab.active,.tabs button.on,.tabs button.active,.topnav button.active,.topnav button.on,.navtop button.active,nav button.active,nav button.on,.mtabs button.on,.mtabs button.active,[role=tab][aria-selected=true]){
  background:#0071e3!important;background-image:none!important;color:#fff!important;border-color:#0071e3!important;box-shadow:0 1px 2px rgba(0,60,140,.25),0 4px 10px -2px rgba(0,113,227,.35)!important}

/* Mark 133 — light mode brand palette (Sunny's panel):
     #2B2D42 ink navy · #8D99AE slate · #EDF2F4 cloud · #EF233C red · #D90429 deep red
   Navy = text, headings and the "selected" state. Red = main action buttons + accents.
   Green / gold stay for good / warning so status still reads at a glance. The Hotspot logo is an image and is not recoloured. */
@media screen {
  :is(html.hs-light,html.hs-light-child){background:#edf2f4!important}
  :is(html.hs-light,html.hs-light-child) body,
  :is(html.hs-light,html.hs-light-child) body[data-hs-page]{
    background:#edf2f4!important;color:#2b2d42!important;
    --hs-bg:#edf2f4!important;--bg:#edf2f4!important;--bg2:#f5f8f9!important;--surface-2:#f5f8f9!important;--panel2:#f5f8f9!important;--hs-raised:#f5f8f9!important;
    --hs-text:#2b2d42!important;--ink:#2b2d42!important;--txt:#2b2d42!important;--text:#2b2d42!important;--ink-2:#3f4259!important;
    --hs-muted:#5c6780!important;--muted:#5c6780!important;--dim:#5c6780!important;--mut:#5c6780!important;--ink-3:#5c6780!important;
    --muted2:#8d99ae!important;--muted-2:#8d99ae!important;--dim2:#8d99ae!important;
    --hs-border:#d3dae3!important;--hs-border-soft:#e1e7ec!important;--line:#d9e0e7!important;--line2:#c6cfdb!important;--border:#d9e0e7!important;
    --blue:#2b2d42!important;--brand:#2b2d42!important;--pri:#2b2d42!important;--acc:#ef233c!important;--hs-electric:#2b2d42!important;--hs-electric-2:#8d99ae!important;
    --brand-soft:#e4e8ef!important;--red:#d90429!important;--bad:#d90429!important;--crit:#d90429!important;--hs-alert:#d90429!important;
  }
  html.hs-light body[data-hs-page=portal] :is(#frames,.appframe,#app-view,.main){background:#edf2f4!important}

  :is(html.hs-light,html.hs-light-child) body[data-hs-page] :is(h1,h2,h3,h4,.card-t,.card-title){color:#2b2d42!important}
  :is(html.hs-light,html.hs-light-child) body[data-hs-page] :is(.muted,.mut,.sub,.sub2,.note,.hint,.small,.card-sub,.pagesub,.section-subtitle,.tiny){color:#5c6780!important}
  :is(html.hs-light,html.hs-light-child) body[data-hs-page] :is(.eyebrow,.kicker,.overline){color:#ef233c!important}

  /* tiles: white on cloud, slate hairline */
  :is(html.hs-light,html.hs-light-child) body:not(#hsA):not(#hsB) :is(.card,.kpi,.store-card,.panel,.box,.tile,.stat,.metric,.widget,.wk-hero){
    border-color:#d3dae3!important;box-shadow:0 1px 1px rgba(43,45,66,.05),0 3px 8px rgba(43,45,66,.07),0 14px 32px -10px rgba(43,45,66,.18)!important}

  /* selected tab / chip = navy */
  :is(html.hs-light,html.hs-light-child) body:not(#hsA):not(#hsB):not(#hsC) :is(.seg button.on,.seg button.active,.chip.on,.chip.active,.stores button.on,.tab.on,.tab.active,.tabs button.on,.tabs button.active,.topnav button.active,.topnav button.on,.navtop button.active,nav button.active,nav button.on,.mtabs button.on,.mtabs button.active,[role=tab][aria-selected=true]){
    background:#2b2d42!important;color:#fff!important;border-color:#2b2d42!important;box-shadow:0 1px 2px rgba(43,45,66,.3),0 4px 10px -2px rgba(43,45,66,.35)!important}
  /* main action buttons = brand red */
  :is(html.hs-light,html.hs-light-child) body:not(#hsA):not(#hsB):not(#hsC) :is(.btn.pri,.btn.primary,.btn-primary,.btn.ok,button.pri,button.primary){
    background:#ef233c!important;background-image:none!important;border-color:#ef233c!important;color:#fff!important;box-shadow:0 1px 2px rgba(217,4,41,.25),0 4px 10px -3px rgba(239,35,60,.45)!important}
  :is(html.hs-light,html.hs-light-child) body:not(#hsA):not(#hsB):not(#hsC) :is(.btn.pri,.btn.primary,.btn-primary,.btn.ok,button.pri,button.primary):hover{background:#d90429!important;border-color:#d90429!important}
  /* secondary buttons / chips: slate outline */
  :is(html.hs-light,html.hs-light-child) body:not(#hsA):not(#hsB) :is(.chip,.seg button,.stores button,.btn:not(.pri):not(.ok):not(.primary):not(.danger)){background:#fff!important;color:#2b2d42!important;border-color:#c6cfdb!important}
  :is(html.hs-light,html.hs-light-child) body[data-hs-page] :is(input,select,textarea):focus{border-color:#2b2d42!important;box-shadow:0 0 0 3px rgba(141,153,174,.35)!important}

  /* KPI accents: blue → navy, bad → deep red */
  :is(html.hs-light,html.hs-light-child) body:not(#hsA):not(#hsB):not(#hsC) :is(.kpi.b,.kpi.blue,.kpi.info){box-shadow:inset 4px 0 0 #2b2d42,0 1px 1px rgba(43,45,66,.05),0 3px 8px rgba(43,45,66,.07),0 14px 32px -10px rgba(43,45,66,.18)!important}
  :is(html.hs-light,html.hs-light-child) body:not(#hsA):not(#hsB):not(#hsC) :is(.kpi.b,.kpi.blue,.kpi.info) :is(.val,.value,.v){color:#2b2d42!important}
  :is(html.hs-light,html.hs-light-child) body:not(#hsA):not(#hsB):not(#hsC) :is(.kpi.r,.kpi.red,.kpi.bad,.kpi.crit){box-shadow:inset 4px 0 0 #d90429,0 1px 1px rgba(43,45,66,.05),0 3px 8px rgba(43,45,66,.07),0 14px 32px -10px rgba(43,45,66,.18)!important}
  :is(html.hs-light,html.hs-light-child) body:not(#hsA):not(#hsB):not(#hsC) :is(.kpi.r,.kpi.red,.kpi.bad,.kpi.crit) :is(.val,.value,.v){color:#d90429!important}
  :is(html.hs-light,html.hs-light-child) body[data-hs-page] :is(.dn,.neg,.negative,.bad-t,.red){color:#d90429!important}
  :is(html.hs-light,html.hs-light-child) body:not(#hsA):not(#hsB) :is(.pill,.tag,.badge,.chip).r,
  :is(html.hs-light,html.hs-light-child) body:not(#hsA):not(#hsB) :is(.pill,.tag,.badge).red{background:#fde3e7!important;color:#d90429!important;border-color:#f6a3ae!important}
  :is(html.hs-light,html.hs-light-child) body:not(#hsA):not(#hsB) :is(.pill,.tag,.badge).b{background:#e4e8ef!important;color:#2b2d42!important;border-color:#c6cfdb!important}

  /* tables */
  :is(html.hs-light,html.hs-light-child) body[data-hs-page] th{background:#edf2f4!important;color:#5c6780!important;border-color:#d9e0e7!important}
  :is(html.hs-light,html.hs-light-child) body[data-hs-page] td{border-color:#e4e9ee!important}
  :is(html.hs-light,html.hs-light-child) body[data-hs-page] tbody tr:nth-child(even) td{background:#f7f9fa}
  :is(html.hs-light,html.hs-light-child) body[data-hs-page] :is(tfoot td,tr.tot td,tr.total td,tr.totrow td){background:#e4e8ef!important;color:#2b2d42!important}

  /* portal menu: navy selection with a red edge */
  :is(html.hs-light,html.hs-light-child) body[data-hs-page=portal] :is(.sidebar,.mtopbar){background:#fff!important;border-color:#d3dae3!important}
  :is(html.hs-light,html.hs-light-child) body[data-hs-page=portal] :is(.tab,.subitem){color:#3f4259!important}
  :is(html.hs-light,html.hs-light-child) body[data-hs-page=portal] .nav-section-title{color:#8d99ae!important}
  :is(html.hs-light,html.hs-light-child) body:not(#hsA):not(#hsB):not(#hsC)[data-hs-page=portal] .tab.active{background:#2b2d42!important;color:#fff!important;border-color:#2b2d42!important;box-shadow:inset 3px 0 0 #ef233c!important}
  :is(html.hs-light,html.hs-light-child) body[data-hs-page=portal] .subnav .subitem.active{background:#edf2f4!important;color:#2b2d42!important;box-shadow:inset 3px 0 0 #ef233c!important}
  :is(html.hs-light,html.hs-light-child) body[data-hs-page=portal] :is(.side-foot,#build-tag){background:#f5f8f9!important;color:#5c6780!important}
  :is(html.hs-light,html.hs-light-child) body[data-hs-page=portal] #auth-view{background:#edf2f4!important}
  :is(html.hs-light,html.hs-light-child) body[data-hs-page=portal] #auth-view .auth-rule{background:#ef233c!important}
  :is(html.hs-light,html.hs-light-child) body[data-hs-page=portal] #auth-view :is(.role-arrow,.link-btn){color:#ef233c!important}
  :is(html.hs-light,html.hs-light-child) body[data-hs-page=portal] #auth-view .role-btn:hover{border-color:#8d99ae!important;background:#f5f8f9!important}
}
html.hs-light #hai-fab{background:#ef233c!important;background-image:none!important;border-color:#ef233c!important;color:#fff!important;box-shadow:0 6px 18px -4px rgba(239,35,60,.5)!important}
html.hs-light #hai-fab:hover{background:#d90429!important}

/* Mark 134 — light mode: deeper tiles and raised, pressable buttons */
@media screen {
  :is(html.hs-light,html.hs-light-child) body:not(#a1):not(#a2):not(#a3):not(#a4) :is(.card,.kpi,.store-card,.panel,.box,.tile,.stat,.metric,.widget,.wk-hero){
    border:1px solid #cfd7e0!important;border-radius:16px!important;
    box-shadow:0 1px 2px rgba(43,45,66,.10),0 4px 10px rgba(43,45,66,.10),0 18px 40px -14px rgba(43,45,66,.34)!important;
  }
  :is(html.hs-light,html.hs-light-child) body:not(#a1):not(#a2):not(#a3):not(#a4) :is(.card,.kpi,.store-card,.panel,.box,.tile,.stat,.metric,.widget):hover{
    transform:translateY(-1px);box-shadow:0 2px 3px rgba(43,45,66,.12),0 8px 18px rgba(43,45,66,.13),0 26px 52px -16px rgba(43,45,66,.40)!important;
  }
  :is(html.hs-light,html.hs-light-child) body:not(#a1):not(#a2):not(#a3):not(#a4) :is(.card,.panel,.box) :is(.card,.kpi,.tile,.stat,.metric,.box){
    box-shadow:0 1px 2px rgba(43,45,66,.08),0 6px 14px -6px rgba(43,45,66,.22)!important;
  }
  /* coloured stripe on KPI tiles, kept with the deeper shadow */
  :is(html.hs-light,html.hs-light-child) body:not(#a1):not(#a2):not(#a3):not(#a4):not(#a5) :is(.kpi.g,.kpi.green,.kpi.good,.kpi.ok){box-shadow:inset 5px 0 0 #1a9e45,0 1px 2px rgba(43,45,66,.10),0 4px 10px rgba(43,45,66,.10),0 18px 40px -14px rgba(43,45,66,.34)!important}
  :is(html.hs-light,html.hs-light-child) body:not(#a1):not(#a2):not(#a3):not(#a4):not(#a5) :is(.kpi.r,.kpi.red,.kpi.bad,.kpi.crit){box-shadow:inset 5px 0 0 #d90429,0 1px 2px rgba(43,45,66,.10),0 4px 10px rgba(43,45,66,.10),0 18px 40px -14px rgba(43,45,66,.34)!important}
  :is(html.hs-light,html.hs-light-child) body:not(#a1):not(#a2):not(#a3):not(#a4):not(#a5) :is(.kpi.y,.kpi.gold,.kpi.warn,.kpi.amber){box-shadow:inset 5px 0 0 #e59a00,0 1px 2px rgba(43,45,66,.10),0 4px 10px rgba(43,45,66,.10),0 18px 40px -14px rgba(43,45,66,.34)!important}
  :is(html.hs-light,html.hs-light-child) body:not(#a1):not(#a2):not(#a3):not(#a4):not(#a5) :is(.kpi.b,.kpi.blue,.kpi.info,.kpi.tax){box-shadow:inset 5px 0 0 #2b2d42,0 1px 2px rgba(43,45,66,.10),0 4px 10px rgba(43,45,66,.10),0 18px 40px -14px rgba(43,45,66,.34)!important}

  /* buttons: raised, with a soft top light and a press-down */
  :is(html.hs-light,html.hs-light-child) body:not(#a1):not(#a2):not(#a3) :is(.btn,button.btn,.chip,.seg button,.stores button,.subnav button,.mtabs button,.topnav button,.navtop button,.tabs button){
    background-image:linear-gradient(180deg,#ffffff,#f1f4f7)!important;border:1px solid #c3ccd8!important;color:#2b2d42!important;
    box-shadow:inset 0 1px 0 rgba(255,255,255,.9),0 1px 2px rgba(43,45,66,.14),0 3px 8px -2px rgba(43,45,66,.18)!important;
    transition:transform .08s ease,box-shadow .12s ease!important;
  }
  :is(html.hs-light,html.hs-light-child) body:not(#a1):not(#a2):not(#a3) :is(.btn,button.btn,.chip,.seg button,.stores button,.subnav button,.mtabs button,.topnav button,.navtop button,.tabs button):hover{
    box-shadow:inset 0 1px 0 rgba(255,255,255,.9),0 2px 4px rgba(43,45,66,.16),0 6px 14px -3px rgba(43,45,66,.24)!important;
  }
  :is(html.hs-light,html.hs-light-child) body:not(#a1):not(#a2):not(#a3) :is(.btn,button.btn,.chip,.seg button,.stores button,.subnav button,.mtabs button,.topnav button,.navtop button,.tabs button):active{
    transform:translateY(1px);box-shadow:inset 0 1px 2px rgba(43,45,66,.18),0 1px 1px rgba(43,45,66,.08)!important;
  }
  /* selected = navy, raised */
  :is(html.hs-light,html.hs-light-child) body:not(#a1):not(#a2):not(#a3):not(#a4) :is(.seg button.on,.seg button.active,.chip.on,.chip.active,.stores button.on,.tab.on,.tab.active,.tabs button.on,.tabs button.active,.subnav button.active,.subnav button.on,.topnav button.active,.topnav button.on,.navtop button.active,nav button.active,nav button.on,.mtabs button.on,.mtabs button.active,[role=tab][aria-selected=true]){
    background:#2b2d42!important;background-image:linear-gradient(180deg,#3a3d5a,#2b2d42)!important;color:#fff!important;border-color:#23253a!important;
    box-shadow:inset 0 1px 0 rgba(255,255,255,.14),0 2px 4px rgba(43,45,66,.30),0 6px 14px -4px rgba(43,45,66,.45)!important;
  }
  /* main actions = brand red, raised */
  :is(html.hs-light,html.hs-light-child) body:not(#a1):not(#a2):not(#a3):not(#a4) :is(.btn.pri,.btn.primary,.btn-primary,.btn.ok,button.pri,button.primary){
    background:#ef233c!important;background-image:linear-gradient(180deg,#f4435a,#e41c35)!important;color:#fff!important;border-color:#cc0a28!important;
    box-shadow:inset 0 1px 0 rgba(255,255,255,.25),0 2px 4px rgba(217,4,41,.30),0 8px 18px -6px rgba(239,35,60,.55)!important;
  }
  :is(html.hs-light,html.hs-light-child) body:not(#a1):not(#a2):not(#a3):not(#a4) :is(.btn.pri,.btn.primary,.btn-primary,.btn.ok,button.pri,button.primary):hover{background-image:linear-gradient(180deg,#ef233c,#d90429)!important}
  /* inputs sit slightly inset */
  :is(html.hs-light,html.hs-light-child) body:not(#a1):not(#a2) :is(input:not([type=checkbox]):not([type=radio]):not([type=range]):not([type=hidden]):not([type=color]),select,textarea){
    border-color:#c3ccd8!important;box-shadow:inset 0 1px 2px rgba(43,45,66,.10)!important;
  }
  html.hs-light body[data-hs-page=portal] .sidebar{box-shadow:1px 0 0 #d3dae3,6px 0 24px -12px rgba(43,45,66,.25)!important}
}

/* Mark 135 — light mode: clean side menu + floating tables and charts */
@media screen {
  /* side menu: flat list, no boxed buttons. Hover = soft cloud; selected = cloud with navy text and a red edge */
  html.hs-light body:not(#a1):not(#a2):not(#a3):not(#a4):not(#a5)[data-hs-page=portal] .sidebar :is(.tab,.subitem,button.tab,nav button,.tabs button){
    background:transparent!important;background-image:none!important;border:0!important;box-shadow:none!important;transform:none!important;
    color:#3f4259!important;border-radius:10px!important;font-weight:500!important;
  }
  html.hs-light body:not(#a1):not(#a2):not(#a3):not(#a4):not(#a5)[data-hs-page=portal] .sidebar :is(.tab,.subitem,button.tab,nav button,.tabs button):hover{
    background:#edf2f4!important;color:#2b2d42!important;
  }
  html.hs-light body:not(#a1):not(#a2):not(#a3):not(#a4):not(#a5)[data-hs-page=portal] .sidebar :is(.tab.active,.tab.on,.subitem.active,nav button.active,.tabs button.active){
    background:#e6ebf1!important;background-image:none!important;color:#2b2d42!important;font-weight:650!important;
    box-shadow:inset 3px 0 0 #ef233c!important;
  }
  html.hs-light body[data-hs-page=portal] .sidebar .nav-section-title{color:#8d99ae!important;letter-spacing:.08em}
  html.hs-light body[data-hs-page=portal] .sidebar .nav-search{background:#f5f8f9!important;border:1px solid #d3dae3!important;box-shadow:none!important}
  html.hs-light body[data-hs-page=portal] .sidebar .hs-theme-btn{background:#fff!important;border:1px solid #d3dae3!important;box-shadow:0 1px 2px rgba(43,45,66,.08)!important}
  html.hs-light body[data-hs-page=portal] .sidebar .nav-toggle{background:#fff!important;border:1px solid #d3dae3!important;box-shadow:0 1px 2px rgba(43,45,66,.08)!important}

  /* tables float as their own white panel */
  :is(html.hs-light,html.hs-light-child) body:not(#a1):not(#a2) table:not(.cal):not(.calendar){
    background:#fff!important;border-collapse:separate!important;border-spacing:0!important;border-radius:12px!important;overflow:hidden;
    border:1px solid #d3dae3!important;
    box-shadow:0 1px 2px rgba(43,45,66,.08),0 6px 16px -4px rgba(43,45,66,.16),0 18px 36px -18px rgba(43,45,66,.28)!important;
  }
  :is(html.hs-light,html.hs-light-child) body:not(#a1):not(#a2) table:not(.cal):not(.calendar) thead th{border-bottom:1px solid #d3dae3!important}
  :is(html.hs-light,html.hs-light-child) body:not(#a1):not(#a2) table:not(.cal):not(.calendar) tbody tr:hover td{background:#f1f5f8!important}

  /* charts float too: any box that directly holds a chart canvas, plus the simple bar charts */
  :is(html.hs-light,html.hs-light-child) body:not(#a1):not(#a2) :is(div,section,figure):has(> canvas),
  :is(html.hs-light,html.hs-light-child) body:not(#a1):not(#a2) :is(.chart,.chart-wrap,.chartbox,.chart-card,.bars,.spark,.sparkline,.trend){
    background:#fff!important;border:1px solid #d3dae3!important;border-radius:12px!important;padding:10px 12px!important;
    box-shadow:0 1px 2px rgba(43,45,66,.08),0 6px 16px -4px rgba(43,45,66,.16),0 18px 36px -18px rgba(43,45,66,.28)!important;
  }
  :is(html.hs-light,html.hs-light-child) body:not(#a1):not(#a2) .bars i{box-shadow:0 2px 6px -2px rgba(43,45,66,.35)!important}
}

/* Mark 140 — dark mode: tiles lose the "glass" (see-through tint, diagonal sheen layers, frosted highlight)
   and become solid. Glows, blooms, hover lift and animations are all kept. Light mode is not affected. */
@media screen {
  html:not(.hs-light):not(.hs-light-child) body:not(#g1):not(#g2):not(#g3) :is(.card,.kpi,.store-card,.panel,.box,.tile,.block,.stat,.metric,.widget,.wk-hero,.cell){
    background-color:#131923!important;background-image:none!important;backdrop-filter:none!important;-webkit-backdrop-filter:none!important;
  }
  html:not(.hs-light):not(.hs-light-child) body:not(#g1):not(#g2):not(#g3) :is(.card,.panel,.box) :is(.card,.kpi,.tile,.stat,.metric,.box,.cell){background-color:#18202c!important}
  /* the static glass sheen layers on tiles */
  html:not(.hs-light):not(.hs-light-child) body:not(#g1):not(#g2) :is(.card,.kpi,.store-card,.panel,.box,.tile,.block,.stat,.metric,.widget,.wk-hero,.cell)::before,
  html:not(.hs-light):not(.hs-light-child) body:not(#g1):not(#g2) :is(.card,.kpi,.store-card,.panel,.box,.tile,.block,.stat,.metric,.widget,.wk-hero,.cell)::after{background-image:none!important;backdrop-filter:none!important}
}
/* Mark 141 — light mode status tags keep their colour everywhere */
:is(html.hs-light,html.hs-light-child) body:not(#a1):not(#a2):not(#a3):not(#a4) :is(.tag,.pill,.badge).g{background:#dff5e6!important;color:#0f7a33!important;border-color:#9fdcb3!important}
:is(html.hs-light,html.hs-light-child) body:not(#a1):not(#a2):not(#a3):not(#a4) :is(.tag,.pill,.badge).r{background:#fde3e7!important;color:#d90429!important;border-color:#f6a3ae!important}
:is(html.hs-light,html.hs-light-child) body:not(#a1):not(#a2):not(#a3):not(#a4) :is(.tag,.pill,.badge).y{background:#fff1d6!important;color:#a35f00!important;border-color:#f3cf85!important}

/* Mark 149 — light mode tones from Sunny's reference (Payroll & time clock screen):
   soft neutral grey page · crisp white cards with a light shadow · near-black text · RED for anything selected
   or main actions · small red uppercase labels · bold condensed numbers · dark-to-red header with the white logo.
   Green / gold still mean good / warning. The logo is never recoloured (dark header uses the original white logo). */
@media screen {
  :is(html.hs-light,html.hs-light-child){background:#f4f4f6!important}
  :is(html.hs-light,html.hs-light-child) body,
  :is(html.hs-light,html.hs-light-child) body[data-hs-page]{
    background:#f4f4f6!important;color:#16161a!important;
    --hs-bg:#f4f4f6!important;--bg:#f4f4f6!important;--bg2:#f8f8fa!important;--surface-2:#f8f8fa!important;--panel2:#f8f8fa!important;--hs-raised:#f8f8fa!important;
    --hs-text:#16161a!important;--ink:#16161a!important;--txt:#16161a!important;--text:#16161a!important;--ink-2:#2c2c31!important;
    --hs-muted:#66666d!important;--muted:#66666d!important;--dim:#66666d!important;--mut:#66666d!important;--ink-3:#66666d!important;
    --muted2:#8e8e95!important;--muted-2:#8e8e95!important;--dim2:#8e8e95!important;
    --hs-border:#e4e4e9!important;--hs-border-soft:#ececf0!important;--line:#e6e6eb!important;--line2:#d9d9df!important;--border:#e6e6eb!important;
    --blue:#16161a!important;--brand:#2563eb!important;--pri:#2563eb!important;--acc:#2563eb!important;--hs-electric:#2563eb!important;--hs-electric-2:#60a5fa!important;
    --brand-soft:#eaf1ff!important;--red:#d7262e!important;--bad:#d7262e!important;--crit:#d7262e!important;--hs-alert:#d7262e!important;
  }
  :is(html.hs-light,html.hs-light-child) body[data-hs-page=portal] :is(#frames,.appframe,#app-view,.main){background:#f4f4f6!important}

  /* type: near-black headings, blue labels — fonts unchanged (Mark 152: Sunny wants the same fonts as before) */
  :is(html.hs-light,html.hs-light-child) body[data-hs-page] :is(h1,h2,h3,h4,.card-t,.card-title){color:#16161a!important}
  :is(html.hs-light,html.hs-light-child) body[data-hs-page] :is(h1,.pagetitle,.page-title){}
  :is(html.hs-light,html.hs-light-child) body:not(#c1):not(#c2):not(#c3) :is(.kpi,.stat,.metric,.tile) :is(.val,.value,.v,.big,.num,.sv,.fv){}
  :is(html.hs-light,html.hs-light-child) body:not(#c1):not(#c2):not(#c3) :is(.kpi,.stat,.metric,.tile) :is(.l,.lbl,.lab,.label,.k,.kl,.sl,.fl,.cap,.ttl){
    color:#2563eb!important}
  :is(html.hs-light,html.hs-light-child) body[data-hs-page] :is(.muted,.mut,.sub,.sub2,.note,.hint,.small,.card-sub,.pagesub,.section-subtitle,.tiny){color:#66666d!important}
  :is(html.hs-light,html.hs-light-child) body[data-hs-page] :is(.eyebrow,.kicker,.overline){color:#2563eb!important}

  /* cards: clean white, hairline, soft shadow (lighter than before) */
  :is(html.hs-light,html.hs-light-child) body:not(#c1):not(#c2):not(#c3):not(#c4):not(#c5):not(#c6) :is(.card,.kpi,.store-card,.panel,.box,.tile,.stat,.metric,.widget,.wk-hero){
    background:#fff!important;background-image:none!important;border:1px solid #e8e8ed!important;border-radius:18px!important;
    box-shadow:0 1px 2px rgba(20,20,30,.04),0 6px 20px -6px rgba(20,20,30,.10)!important;
  }
  :is(html.hs-light,html.hs-light-child) body:not(#c1):not(#c2):not(#c3):not(#c4):not(#c5):not(#c6) :is(.card,.kpi,.store-card,.panel,.box,.tile,.stat,.metric,.widget):hover{
    transform:none;box-shadow:0 1px 2px rgba(20,20,30,.05),0 10px 26px -8px rgba(20,20,30,.16)!important;
  }
  :is(html.hs-light,html.hs-light-child) body:not(#c1):not(#c2):not(#c3):not(#c4):not(#c5):not(#c6) :is(.card,.panel,.box) :is(.card,.kpi,.tile,.stat,.metric,.box){
    box-shadow:0 1px 2px rgba(20,20,30,.04)!important;border-radius:14px!important;
  }
  /* status stripes keep their colour; the old navy "info" stripe becomes ink */
  :is(html.hs-light,html.hs-light-child) body:not(#c1):not(#c2):not(#c3):not(#c4):not(#c5):not(#c6):not(#c7) :is(.kpi.g,.kpi.green,.kpi.good,.kpi.ok){box-shadow:inset 4px 0 0 #1a9e45,0 1px 2px rgba(20,20,30,.04),0 6px 20px -6px rgba(20,20,30,.10)!important}
  :is(html.hs-light,html.hs-light-child) body:not(#c1):not(#c2):not(#c3):not(#c4):not(#c5):not(#c6):not(#c7) :is(.kpi.r,.kpi.red,.kpi.bad,.kpi.crit){box-shadow:inset 4px 0 0 #d7262e,0 1px 2px rgba(20,20,30,.04),0 6px 20px -6px rgba(20,20,30,.10)!important}
  :is(html.hs-light,html.hs-light-child) body:not(#c1):not(#c2):not(#c3):not(#c4):not(#c5):not(#c6):not(#c7) :is(.kpi.y,.kpi.gold,.kpi.warn,.kpi.amber){box-shadow:inset 4px 0 0 #e59a00,0 1px 2px rgba(20,20,30,.04),0 6px 20px -6px rgba(20,20,30,.10)!important}
  :is(html.hs-light,html.hs-light-child) body:not(#c1):not(#c2):not(#c3):not(#c4):not(#c5):not(#c6):not(#c7) :is(.kpi.b,.kpi.blue,.kpi.info,.kpi.tax){box-shadow:inset 4px 0 0 #16161a,0 1px 2px rgba(20,20,30,.04),0 6px 20px -6px rgba(20,20,30,.10)!important}
  :is(html.hs-light,html.hs-light-child) body:not(#c1):not(#c2):not(#c3):not(#c4):not(#c5):not(#c6):not(#c7) :is(.kpi.b,.kpi.blue,.kpi.info) :is(.val,.value,.v){color:#16161a!important}
  :is(html.hs-light,html.hs-light-child) body:not(#c1):not(#c2):not(#c3):not(#c4):not(#c5):not(#c6):not(#c7) :is(.kpi.r,.kpi.red,.kpi.bad,.kpi.crit) :is(.val,.value,.v){color:#d7262e!important}

  /* buttons & chips: white with a hairline (flat, like the reference) */
  :is(html.hs-light,html.hs-light-child) body:not(#c1):not(#c2):not(#c3):not(#c4):not(#c5) :is(.btn,button.btn,.chip,.seg button,.stores button,.subnav button,.mtabs button,.mchips button,.vtabs button,.viewtabs button,.topnav button,.navtop button,.tabs button){
    background:#fff!important;background-image:none!important;border:1px solid #dedee4!important;color:#16161a!important;
    box-shadow:0 1px 2px rgba(20,20,30,.05)!important;
  }
  :is(html.hs-light,html.hs-light-child) body:not(#c1):not(#c2):not(#c3):not(#c4):not(#c5) :is(.btn,button.btn,.chip,.seg button,.stores button,.subnav button,.mtabs button,.mchips button,.vtabs button,.viewtabs button,.topnav button,.navtop button,.tabs button):hover{
    background:#f7f7f9!important;border-color:#cfcfd6!important;
  }
  /* selected = RED (was navy) */
  :is(html.hs-light,html.hs-light-child) body:not(#c1):not(#c2):not(#c3):not(#c4):not(#c5):not(#c6) :is(.seg button.on,.seg button.active,.chip.on,.chip.active,.stores button.on,.tab.on,.tab.active,.tabs button.on,.tabs button.active,.subnav button.active,.subnav button.on,.topnav button.active,.topnav button.on,.navtop button.on,.navtop button.active,.mtabs button.on,.mchips button.on,.vtabs button.on,.viewtabs button.active,button.on,button.active,.pill.on,.pill.active){
    background:#2563eb!important;background-image:linear-gradient(180deg,#3b82f6,#2563eb)!important;color:#fff!important;border-color:#1d4ed8!important;
    box-shadow:0 1px 2px rgba(29,78,216,.25),0 6px 14px -6px rgba(37,99,235,.55)!important;
  }
  /* main actions = red */
  :is(html.hs-light,html.hs-light-child) body:not(#c1):not(#c2):not(#c3):not(#c4):not(#c5):not(#c6) :is(.btn.pri,.btn.primary,.btn-primary,.btn.ok,button.pri,button.primary){
    background:#2563eb!important;background-image:linear-gradient(180deg,#3b82f6,#2563eb)!important;color:#fff!important;border-color:#1d4ed8!important;
    box-shadow:0 1px 2px rgba(29,78,216,.25),0 8px 18px -8px rgba(37,99,235,.6)!important;
  }
  :is(html.hs-light,html.hs-light-child) body:not(#c1):not(#c2):not(#c3):not(#c4):not(#c5):not(#c6) :is(.btn.pri,.btn.primary,.btn-primary,.btn.ok,button.pri,button.primary):hover{background-image:linear-gradient(180deg,#2563eb,#1d4ed8)!important}

  /* inputs: white, soft hairline, red focus ring */
  :is(html.hs-light,html.hs-light-child) body:not(#c1):not(#c2):not(#c3) :is(input:not([type=checkbox]):not([type=radio]):not([type=range]):not([type=hidden]):not([type=color]),select,textarea){
    background:#fff!important;border-color:#dcdce2!important;box-shadow:none!important;border-radius:10px;color:#16161a!important}
  :is(html.hs-light,html.hs-light-child) body:not(#c1):not(#c2):not(#c3) :is(input,select,textarea):focus{border-color:#2563eb!important;box-shadow:0 0 0 3px rgba(37,99,235,.15)!important}

  /* tables: white, uppercase dark headers, hairline rows, no zebra */
  :is(html.hs-light,html.hs-light-child) body:not(#c1):not(#c2):not(#c3) table:not(.cal):not(.calendar){border:1px solid #e8e8ed!important;border-radius:14px!important;box-shadow:0 1px 2px rgba(20,20,30,.04),0 6px 20px -8px rgba(20,20,30,.10)!important}
  :is(html.hs-light,html.hs-light-child) body:not(#c1):not(#c2):not(#c3) th{background:#fff!important;color:#16161a!important;border-color:#ececf0!important}
  :is(html.hs-light,html.hs-light-child) body:not(#c1):not(#c2):not(#c3) td{border-color:#efeff3!important}
  :is(html.hs-light,html.hs-light-child) body:not(#c1):not(#c2):not(#c3) tbody tr:nth-child(even) td{background:#fff}
  :is(html.hs-light,html.hs-light-child) body:not(#c1):not(#c2):not(#c3) table:not(.cal):not(.calendar) tbody tr:hover td{background:#fafafb!important}
  :is(html.hs-light,html.hs-light-child) body:not(#c1):not(#c2):not(#c3) :is(tfoot td,tr.tot td,tr.total td,tr.totrow td){background:#f6f6f8!important;color:#16161a!important}
  :is(html.hs-light,html.hs-light-child) body:not(#c1):not(#c2) :is(.pill,.tag,.badge).b{background:#f1f1f4!important;color:#16161a!important;border-color:#dedee4!important}

  /* portal: dark-to-red header band with the original white logo; white menu with a red "you are here" */
  :is(html.hs-light,html.hs-light-child) body[data-hs-page=portal] .sidebar{background:#fff!important;box-shadow:1px 0 0 #e6e6eb!important}
  :is(html.hs-light,html.hs-light-child) body[data-hs-page=portal] .sidebar .brand,
  :is(html.hs-light,html.hs-light-child) body[data-hs-page=portal] .mtopbar{background:linear-gradient(90deg,#0b1020 0%,#111d3f 55%,#1e3a8a 100%)!important;border-bottom:3px solid #2563eb!important}
  :is(html.hs-light,html.hs-light-child) body[data-hs-page=portal] .sidebar .brand{margin:0 0 10px!important;padding-top:18px!important;padding-bottom:14px!important}
  :is(html.hs-light,html.hs-light-child) body[data-hs-page=portal] :is(.sidebar .brand,.mtopbar) img[src*="hotspot-logo"]{content:url(/hotspot-logo.png)!important}
  :is(html.hs-light,html.hs-light-child) body[data-hs-page=portal] .mtopbar :is(.mobile-view-name,.mmenu){color:#fff!important}
  :is(html.hs-light,html.hs-light-child) body[data-hs-page=portal] .sidebar .brand .nav-toggle{background:rgba(255,255,255,.08)!important;border:1px solid rgba(255,255,255,.18)!important;color:#fff!important}
  :is(html.hs-light,html.hs-light-child) body:not(#c1):not(#c2):not(#c3):not(#c4):not(#c5):not(#c6)[data-hs-page=portal] .sidebar :is(.tab,.subitem,button.tab,nav button,.tabs button){color:#2c2c31!important;background:transparent!important;border:0!important;box-shadow:none!important}
  :is(html.hs-light,html.hs-light-child) body:not(#c1):not(#c2):not(#c3):not(#c4):not(#c5):not(#c6)[data-hs-page=portal] .sidebar :is(.tab,.subitem,button.tab,nav button,.tabs button):hover{background:#f4f4f6!important;color:#16161a!important}
  :is(html.hs-light,html.hs-light-child) body:not(#c1):not(#c2):not(#c3):not(#c4):not(#c5):not(#c6):not(#c7)[data-hs-page=portal] .sidebar :is(.tab.active,.tab.on,.subitem.active,nav button.active,.tabs button.active){
    background:#eaf1ff!important;background-image:none!important;color:#1d4ed8!important;font-weight:700!important;box-shadow:inset 3px 0 0 #2563eb!important}
  :is(html.hs-light,html.hs-light-child) body[data-hs-page=portal] .sidebar .nav-section-title{color:#2563eb!important}
  :is(html.hs-light,html.hs-light-child) body[data-hs-page=portal] .sidebar .nav-search{background:#f6f6f8!important;border:1px solid #e3e3e8!important}
  :is(html.hs-light,html.hs-light-child) body[data-hs-page=portal] :is(.side-foot,#build-tag){background:#fafafb!important;color:#66666d!important}
  :is(html.hs-light,html.hs-light-child) body[data-hs-page=portal] #auth-view{background:#f4f4f6!important}
  :is(html.hs-light,html.hs-light-child) body[data-hs-page=portal] #auth-view .auth-rule{background:#2563eb!important}
  :is(html.hs-light,html.hs-light-child) body[data-hs-page=portal] #auth-view :is(.role-arrow,.link-btn){color:#2563eb!important}
  :is(html.hs-light,html.hs-light-child) body[data-hs-page=portal] #auth-view .role-btn:hover{border-color:#2563eb!important;background:#fff!important}
}
:is(html.hs-light,html.hs-light-child) #hai-fab{background:#2563eb!important;border-color:#2563eb!important}
/* Mark 149 — text inside a selected (red) chip/tab stays white */
:is(html.hs-light,html.hs-light-child) body:not(#c1):not(#c2):not(#c3):not(#c4):not(#c5):not(#c6):not(#c7) :is(.seg button.on,.seg button.active,.chip.on,.chip.active,.stores button.on,.tabs button.on,.tabs button.active,.mtabs button.on,.mchips button.on,.vtabs button.on,button.on,button.active,.pill.on,.pill.active) *{color:rgba(255,255,255,.88)!important}
/* Mark 149 — phone top bar: same dark-to-red band as the menu header */
:is(html.hs-light,html.hs-light-child) body:not(#c1):not(#c2):not(#c3):not(#c4)[data-hs-page=portal] .mtopbar{background:linear-gradient(90deg,#0b1020 0%,#111d3f 55%,#1e3a8a 100%)!important;background-color:#0e1630!important;border-bottom:3px solid #2563eb!important;box-shadow:0 4px 14px -6px rgba(10,16,40,.5)!important}
:is(html.hs-light,html.hs-light-child) body:not(#c1):not(#c2):not(#c3):not(#c4):not(#c5):not(#c6):not(#c7)[data-hs-page=portal] .mtopbar .mmenu{background:rgba(255,255,255,.10)!important;background-image:none!important;border:1px solid rgba(255,255,255,.28)!important;color:#fff!important;box-shadow:none!important}
:is(html.hs-light,html.hs-light-child) body[data-hs-page=portal] .mtopbar .mmenu *{color:#fff!important;stroke:#fff!important}

/* Mark 150 — light mode keeps the glows and motion (Sunny: "keep our glows").
   Same Mark 149 tones, plus a soft red glow around tiles, a red glowing top edge, hover lift + brighter glow,
   and glowing red selected/primary buttons. Dark mode is not touched. */
@media screen {
  :is(html.hs-light,html.hs-light-child) body:not(#e1):not(#e2):not(#e3):not(#e4):not(#e5):not(#e6):not(#e7) :is(.card,.kpi,.store-card,.panel,.box,.tile,.stat,.metric,.widget,.wk-hero){
    position:relative;
    box-shadow:0 0 0 1px rgba(37,99,235,.05),0 1px 2px rgba(20,20,30,.05),0 10px 28px -10px rgba(20,20,30,.14),0 14px 40px -18px rgba(37,99,235,.28)!important;
    transition:transform .18s ease,box-shadow .22s ease,border-color .22s ease!important;
  }
  :is(html.hs-light,html.hs-light-child) body:not(#e1):not(#e2):not(#e3):not(#e4):not(#e5):not(#e6):not(#e7) :is(.card,.kpi,.store-card,.panel,.box,.tile,.stat,.metric,.widget):hover{
    transform:translateY(-2px)!important;border-color:rgba(37,99,235,.28)!important;
    box-shadow:0 0 0 1px rgba(37,99,235,.12),0 2px 4px rgba(20,20,30,.06),0 16px 36px -12px rgba(20,20,30,.18),0 18px 48px -14px rgba(37,99,235,.42)!important;
  }
  /* glowing red top edge on KPI tiles (same idea as the blue edge in dark mode) */
  :is(html.hs-light,html.hs-light-child) body:not(#e1):not(#e2):not(#e3) :is(.kpi,.stat,.metric)::before{
    content:""!important;position:absolute!important;left:14px!important;right:14px!important;width:auto!important;top:0!important;bottom:auto!important;height:2px!important;border-radius:2px;pointer-events:none;transform:none!important;animation:none!important;
    background:linear-gradient(90deg,rgba(37,99,235,0),#2563eb 30%,#60a5fa 50%,#2563eb 70%,rgba(37,99,235,0))!important;
    box-shadow:0 0 10px rgba(37,99,235,.55)!important;opacity:.85;
  }
  /* tiles inside tiles: lighter glow so the page isn't busy */
  :is(html.hs-light,html.hs-light-child) body:not(#e1):not(#e2):not(#e3):not(#e4):not(#e5):not(#e6):not(#e7):not(#e8) :is(.card,.panel,.box) :is(.card,.kpi,.tile,.stat,.metric,.box){
    box-shadow:0 1px 2px rgba(20,20,30,.05),0 8px 22px -12px rgba(37,99,235,.22)!important;
  }
  /* selected + primary: red with a glow, and they lift on hover */
  :is(html.hs-light,html.hs-light-child) body:not(#e1):not(#e2):not(#e3):not(#e4):not(#e5):not(#e6):not(#e7) :is(.seg button.on,.seg button.active,.chip.on,.chip.active,.stores button.on,.tabs button.on,.tabs button.active,.subnav button.active,.topnav button.active,.topnav button.on,.mtabs button.on,.mchips button.on,.vtabs button.on,.viewtabs button.active,button.on,button.active,.pill.on,.btn.pri,.btn.primary,.btn-primary,button.pri,button.primary){
    box-shadow:0 1px 2px rgba(29,78,216,.25),0 0 0 1px rgba(37,99,235,.25),0 6px 18px -4px rgba(37,99,235,.55),0 0 22px -6px rgba(96,165,250,.6)!important;
    transition:transform .15s ease,box-shadow .2s ease!important;
  }
  :is(html.hs-light,html.hs-light-child) body:not(#e1):not(#e2):not(#e3):not(#e4):not(#e5):not(#e6):not(#e7) :is(.btn.pri,.btn.primary,.btn-primary,button.pri,button.primary):hover{transform:translateY(-1px)!important;box-shadow:0 2px 4px rgba(29,78,216,.3),0 10px 24px -6px rgba(37,99,235,.65),0 0 28px -6px rgba(96,165,250,.7)!important}
  /* plain buttons get a soft hover glow */
  :is(html.hs-light,html.hs-light-child) body:not(#e1):not(#e2):not(#e3):not(#e4):not(#e5) :is(.btn,button.btn,.chip,.seg button,.stores button,.mtabs button,.mchips button,.vtabs button,.viewtabs button,.topnav button,.navtop button,.tabs button):not(.on):not(.active):not(.pri):not(.primary):hover{
    border-color:rgba(37,99,235,.35)!important;box-shadow:0 0 0 3px rgba(37,99,235,.08),0 4px 12px -4px rgba(37,99,235,.30)!important}
  /* side menu: the active item glows a little */
  :is(html.hs-light,html.hs-light-child) body:not(#e1):not(#e2):not(#e3):not(#e4):not(#e5):not(#e6):not(#e7):not(#e8)[data-hs-page=portal] .sidebar :is(.tab.active,.tab.on,.subitem.active){
    box-shadow:inset 3px 0 0 #2563eb,0 6px 16px -8px rgba(37,99,235,.45)!important}
  /* header band: soft red glow under it */
  :is(html.hs-light,html.hs-light-child) body[data-hs-page=portal] .sidebar .brand{box-shadow:0 8px 22px -10px rgba(37,99,235,.55)!important}
  /* tables + charts: faint red bloom like the tiles */
  :is(html.hs-light,html.hs-light-child) body:not(#e1):not(#e2):not(#e3):not(#e4) table:not(.cal):not(.calendar){box-shadow:0 1px 2px rgba(20,20,30,.05),0 10px 28px -12px rgba(20,20,30,.12),0 14px 36px -20px rgba(37,99,235,.25)!important}
}
@media (prefers-reduced-motion:reduce){ :is(html.hs-light,html.hs-light-child) :is(.card,.kpi,.btn,button):hover{transform:none!important} }

/* Mark 151 — Sunny: "make the red blue". Light-mode accent (selected, main buttons, labels, glows, header band) is blue; red now only means bad / negative. */

/* Mark 153 — light mode clean-up from Sunny's Fuel Ops screenshot ("something just doesn't seem right"):
   the blue glow under tiles was spilling into a haze between cards, store cards lost their status edge,
   done rows were a loud bright green, and store cards had dead space on top. */
@media screen {
  /* calmer glow: tight and soft, no haze between cards */
  :is(html.hs-light,html.hs-light-child) body:not(#f1):not(#f2):not(#f3):not(#f4):not(#f5):not(#f6):not(#f7):not(#f8) :is(.card,.kpi,.store-card,.panel,.box,.tile,.stat,.metric,.widget,.wk-hero){
    box-shadow:0 1px 2px rgba(20,20,30,.05),0 4px 14px -6px rgba(20,20,30,.10),0 2px 10px -4px rgba(37,99,235,.10)!important;
  }
  :is(html.hs-light,html.hs-light-child) body:not(#f1):not(#f2):not(#f3):not(#f4):not(#f5):not(#f6):not(#f7):not(#f8) :is(.card,.kpi,.store-card,.panel,.box,.tile,.stat,.metric,.widget):hover{
    border-color:rgba(37,99,235,.30)!important;
    box-shadow:0 2px 4px rgba(20,20,30,.06),0 10px 24px -10px rgba(20,20,30,.16),0 4px 18px -6px rgba(37,99,235,.28)!important;
  }
  :is(html.hs-light,html.hs-light-child) body:not(#f1):not(#f2):not(#f3):not(#f4):not(#f5):not(#f6):not(#f7):not(#f8):not(#f9) :is(.card,.panel,.box) :is(.card,.kpi,.tile,.stat,.metric,.box){
    box-shadow:0 1px 2px rgba(20,20,30,.04)!important;
  }
  :is(html.hs-light,html.hs-light-child) body:not(#f1):not(#f2):not(#f3):not(#f4):not(#f5) table:not(.cal):not(.calendar){box-shadow:0 1px 2px rgba(20,20,30,.05),0 4px 14px -6px rgba(20,20,30,.10)!important}

  /* Fuel Ops store cards: keep the status edge (green caught up / amber needs attention / red order fuel) */
  :is(html.hs-light,html.hs-light-child) body:not(#f1):not(#f2):not(#f3):not(#f4):not(#f5):not(#f6):not(#f7):not(#f8):not(#f9) .scard.up{box-shadow:inset 4px 0 0 #1a9e45,0 1px 2px rgba(20,20,30,.05),0 4px 14px -6px rgba(20,20,30,.10)!important}
  :is(html.hs-light,html.hs-light-child) body:not(#f1):not(#f2):not(#f3):not(#f4):not(#f5):not(#f6):not(#f7):not(#f8):not(#f9) .scard.attn{box-shadow:inset 4px 0 0 #e59a00,0 1px 2px rgba(20,20,30,.05),0 4px 14px -6px rgba(20,20,30,.10)!important}
  :is(html.hs-light,html.hs-light-child) body:not(#f1):not(#f2):not(#f3):not(#f4):not(#f5):not(#f6):not(#f7):not(#f8):not(#f9) .scard.under{box-shadow:inset 4px 0 0 #d7262e,0 1px 2px rgba(20,20,30,.05),0 4px 14px -6px rgba(20,20,30,.10)!important}
  :is(html.hs-light,html.hs-light-child) body[data-hs-page] .scard::after{display:none!important}
  :is(html.hs-light,html.hs-light-child) body[data-hs-page] .scard .storehd{margin-top:2px!important}

  /* task rows: soft, not neon */
  :is(html.hs-light,html.hs-light-child) body:not(#f1):not(#f2):not(#f3):not(#f4) .check{background:#fafafb!important;border:1px solid #ececf0!important;box-shadow:none!important}
  :is(html.hs-light,html.hs-light-child) body:not(#f1):not(#f2):not(#f3):not(#f4) .check.done{background:#f3fbf6!important;border-color:#cfeedc!important;box-shadow:none!important}
  :is(html.hs-light,html.hs-light-child) body:not(#f1):not(#f2):not(#f3):not(#f4) .check.done .ico{background:#1a9e45!important;color:#fff!important;box-shadow:0 2px 8px -2px rgba(26,158,69,.45)!important}
  :is(html.hs-light,html.hs-light-child) body:not(#f1):not(#f2):not(#f3):not(#f4) .check.done :is(.tiny){color:#4b7a5c!important}
  :is(html.hs-light,html.hs-light-child) body:not(#f1):not(#f2):not(#f3):not(#f4) .check.done .cap::after{color:#1a9e45!important}

  /* grade tiles: white, hairline, status colour on the left edge only */
  :is(html.hs-light,html.hs-light-child) body:not(#f1):not(#f2):not(#f3):not(#f4) .sd-tile{background:#fff!important;border:1px solid #ececf0!important;box-shadow:0 1px 2px rgba(20,20,30,.04)!important}
  :is(html.hs-light,html.hs-light-child) body:not(#f1):not(#f2):not(#f3):not(#f4):not(#f5) .sd-tile.now{box-shadow:inset 3px 0 0 #d7262e,0 1px 2px rgba(20,20,30,.04)!important}
  :is(html.hs-light,html.hs-light-child) body:not(#f1):not(#f2):not(#f3):not(#f4):not(#f5) .sd-tile.soon{box-shadow:inset 3px 0 0 #e59a00,0 1px 2px rgba(20,20,30,.04)!important}
}
/* Cosmetic 154 — canonical shared sizing, typography, and responsive layout.
   This section owns presentation only. Existing glows, shimmer, pulse,
   transforms and status effects above and in polish.css remain intact.
   Page-specific calendars, heatmaps, canvas charts, and state colors retain
   their original behavior. Print styles are unaffected. */
@media screen {
  body[data-hs-page] {
    --hs-space:16px; --hs-pad:20px; --hs-control:40px;
    --hs-radius:14px; --hs-radius-sm:9px;
  }
  body[data-hs-page] :is(.card,.kpi,.panel,.store-card) {box-sizing:border-box;min-width:0;border-radius:var(--hs-radius)!important;}
  body[data-hs-page] .card {padding:var(--hs-pad)!important;}
  body[data-hs-page] .card:has(>.ph):has(>.pb) {padding:0!important;}
  body[data-hs-page] :is(.card>.ph,.panel>.ph,.card>.pb,.panel>.pb) {padding:var(--hs-pad)!important;}
  body[data-hs-page] :is(.kpis,.cards,.grid2,.grid3,.grid-2,.grid-3,.grid-4) {gap:var(--hs-space);}
  body[data-hs-page] .kpis {grid-template-columns:repeat(auto-fit,minmax(min(100%,180px),1fr))!important;gap:var(--hs-space)!important;}
  body[data-hs-page] .kpi {padding:var(--hs-pad)!important;}
  body[data-hs-page] :is(.kpi,.cards>.card) :is(.lab,.label,.l) {font-size:13px!important;line-height:1.4!important;letter-spacing:0!important;}
  /* Keep the full amount visible, including long balances on phones. */
  body[data-hs-page] .kpi :is(.val,.value,.v) {
    font-size:clamp(20px,14cqi,30px)!important;line-height:1.25!important;
    white-space:normal!important;overflow:visible!important;text-overflow:clip!important;
    overflow-wrap:anywhere;max-width:100%;
  }
  body[data-hs-page] .cards>.card :is(.value,.val) {white-space:normal!important;overflow-wrap:anywhere;line-height:1.25;}
  body[data-hs-page] :is(.tiny,.hint,.note,.small,.saved,.status,.tag,.pill,.badge,.chip,.spill) {font-size:12px!important;line-height:1.45!important;}
  body[data-hs-page] :is(.muted,.pagesub,.card-sub,.section-subtitle,.field>label,.fld>label,label.f,.lbl) {font-size:13px!important;line-height:1.5;}
  body[data-hs-page] :is(h1,h2,h3) {text-wrap:balance;}
  body[data-hs-page] :is(.btn,.button,.btn-sm) {min-height:var(--hs-control);border-radius:var(--hs-radius-sm)!important;font-size:14px!important;line-height:1.4;padding:9px 14px;}
  body[data-hs-page] :is(.btn.sm,.btn-sm) {min-height:34px;padding:7px 11px;font-size:13px!important;}
  body[data-hs-page] :is(.filters,.toolbar,.controls) {gap:12px;align-items:center;flex-wrap:wrap;}
  body[data-hs-page] :is(.filters,.toolbar,.controls)>* {min-width:0;max-width:100%;}
  body[data-hs-page] :is(.tablewrap,.table-wrap,.tbl-wrap,.tw,.gridwrap,.scroll) {
    min-width:0;max-width:100%;overflow-x:auto;overscroll-behavior-inline:contain;
    scrollbar-width:thin;scrollbar-color:var(--hs-muted) var(--hs-surface);
  }
  body[data-hs-page] :is(th,td) {font-variant-numeric:tabular-nums;}
  body[data-hs-page] :is(th,td):is(.num,.n,.money) {white-space:nowrap;}
  body[data-hs-page] th {font-size:12px!important;line-height:1.45!important;letter-spacing:.01em!important;}
  body[data-hs-page] :is(.tablewrap,.table-wrap,.tbl-wrap,.tw)>table {min-width:600px;}
  body[data-hs-page=portal] .sidebar .brand small {font-size:12px!important;letter-spacing:.06em;white-space:normal;line-height:1.5;}
  body[data-hs-page=portal] .sidebar .brand {flex-wrap:wrap;gap:10px;padding-bottom:18px;}
  body[data-hs-page=portal] .nav-section-title {font-size:12px!important;font-weight:700!important;letter-spacing:.06em!important;}
  body[data-hs-page=portal] .subnav .subitem {font-size:14px!important;line-height:1.4;min-height:40px;white-space:normal;}
  body[data-hs-page=portal] .sidebar :is(.tab.active,.subitem.active) {font-weight:700!important;border-inline-start:3px solid var(--hs-electric)!important;}
  body[data-hs-page=portal] .sidebar :is(.tab[aria-expanded=true],.tab:has(+.subnav)) {font-weight:700!important;}
  body[data-hs-page=schedule] :is(.dsub,.rowhead .rh,.crole,.legend,.heatkey,.blktime,.blkmeta,.needbadge,.rolechip,.pickrow .meta,.needtbl td.hr .rg) {font-size:12px!important;line-height:1.4;}
  body[data-hs-page=schedule] :is(.ghead,.rowhead.hcol,.scard) {font-size:13px!important;}
  body[data-hs-page=schedule] .scard {overflow-wrap:anywhere;}
  body[data-hs-page=operator] :is(.signal span,.day .d,.day .dj,.day .act button,.vend .days i,.wkh,.bottom-nav button) {font-size:12px!important;line-height:1.4;}
  body[data-hs-page=fuelops] :is(.tk-oct,.tk-sub,.gmk,.dl,.sd-tile .tiny) {font-size:12px!important;line-height:1.4;height:auto;}
  /* Explicit light palette for secondary operational surfaces. The existing
     lightener remains a fallback for legacy inline colors and unknown nodes. */
  :is(html.hs-light,html.hs-light-child) body[data-hs-page] {
    --hs-muted:#5b6575!important;--muted:#5b6575!important;--dim:#5b6575!important;
    --muted2:#657084!important;--dim2:#657084!important;--muted-2:#657084!important;
    --hs-border-soft:#e2e7ef!important;
  }
  :is(html.hs-light,html.hs-light-child) body[data-hs-page] :is(.signal,.day,.tankrow,.schedgrid,.ghead,.rowhead,.sday,.gridwrap,.bottom-nav) {background-color:#f5f7fb!important;color:#202938!important;border-color:#d7deea!important;}
  :is(html.hs-light,html.hs-light-child) body[data-hs-page] :is(.signal span,.day .d,.day .dj,.tk-oct,.tk-sub,.gmk,.dl,.dsub,.rowhead .rh,.crole,.legend,.heatkey,.blktime,.blkmeta,.wkh) {color:#5b6575!important;}
  :is(html.hs-light,html.hs-light-child) body[data-hs-page=schedule] .scard:not(.open) {background-color:#eaf1ff!important;color:#1d4ed8!important;}
  :is(html.hs-light,html.hs-light-child) body[data-hs-page=schedule] .scard.open {background-color:#fff4df!important;color:#875300!important;}
  :is(html.hs-light,html.hs-light-child) body[data-hs-page] :is(.tablewrap,.table-wrap,.tbl-wrap,.tw,.gridwrap,.scroll) {scrollbar-color:#8491a6 #f1f4f9;}
  @media(max-width:820px) {
    body[data-hs-page] {--hs-space:12px;--hs-pad:16px;}
    body[data-hs-page] :is(.kpis,.bignums,.kpi-grid,.stat-grid,.stats,.metrics) {grid-template-columns:repeat(2,minmax(0,1fr))!important;}
    body[data-hs-page] .cards {grid-template-columns:repeat(auto-fit,minmax(min(100%,180px),1fr))!important;}
  }
  @media(max-width:640px) {
    body[data-hs-page] {--hs-space:12px;--hs-pad:14px;--hs-control:44px;}
    body[data-hs-page] :is(.kpis,.bignums,.kpi-grid,.stat-grid,.stats,.metrics) {grid-template-columns:repeat(2,minmax(0,1fr))!important;gap:12px!important;}
    body[data-hs-page] :is(.kpi-grid,.stat-grid,.stats,.metrics)>* {min-width:0;overflow-wrap:anywhere;}
    body[data-hs-page] :is(.grid2,.grid3,.grid-2,.grid-3,.grid-4,.form-grid) {grid-template-columns:minmax(0,1fr)!important;}
    body[data-hs-page] :is(input:not([type=checkbox]):not([type=radio]):not([type=range]):not([type=hidden]),select,textarea) {font-size:16px!important;max-width:100%;}
    body[data-hs-page] :is(.card,.panel):has(table) {min-width:0;max-width:100%;overflow-x:auto;}
    body[data-hs-page] .modal :is(.mh,.mf,.modalhead,.modalfoot) {flex-wrap:wrap;gap:10px;}
    body[data-hs-page=portal] .main>#content {padding-bottom:calc(92px + env(safe-area-inset-bottom))!important;}
    body[data-hs-page=portal] #hai-fab {right:max(14px,env(safe-area-inset-right))!important;bottom:calc(14px + env(safe-area-inset-bottom))!important;}
    body[data-hs-page=portal] .hs-theme-float {bottom:calc(78px + env(safe-area-inset-bottom))!important;}
    body[data-hs-page=operator] .main {padding-bottom:calc(112px + env(safe-area-inset-bottom));}
    body[data-hs-page=operator] .bottom-nav button {overflow-wrap:anywhere;min-width:0;min-height:44px;}
    body[data-hs-page=operator] .bottom-nav {align-items:stretch;}
    body[data-hs-page=portal] .sidebar .subnav {overflow-x:visible;white-space:normal;}
  }
  @media(max-width:359px) {
    body[data-hs-page] :is(.kpis,.bignums,.kpi-grid,.stat-grid,.stats,.metrics) {grid-template-columns:minmax(0,1fr)!important;}
  }
}

/* (from Sunny's uploaded ops-deploy-mark-166-cosmetic.zip, folded into Mark 167) */
/* Mark 166 — cosmetic finish. Keeps the existing palette, fonts and layouts. */
@media screen {
  html:not(.hs-light):not(.hs-light-child) body[data-hs-page] :is(.card,.kpi,.store-card,.panel,.box,.tile,.stat,.metric,.widget):not(.bad,.crit,.warn,.ok,.good,.r,.g,.y) {
    border-color:rgba(113,150,209,.25);
    box-shadow:0 7px 24px -15px rgba(0,0,0,.8),0 0 18px -15px rgba(79,140,255,.58),inset 0 1px 0 rgba(255,255,255,.055);
  }
  html:not(.hs-light):not(.hs-light-child) body[data-hs-page] :is(.card,.kpi,.store-card,.panel,.box,.tile,.stat,.metric,.widget):not(.bad,.crit,.warn,.ok,.good,.r,.g,.y):hover {
    border-color:rgba(122,169,248,.42);
    box-shadow:0 9px 25px -15px rgba(0,0,0,.8),0 0 22px -14px rgba(79,140,255,.65),inset 0 1px 0 rgba(255,255,255,.07);
  }
  /* Preserve visible status colors and give negative figures a restrained glow. */
  html:not(.hs-light):not(.hs-light-child) body[data-hs-page] :is(.neg,.negative,.amount-negative) {
    text-shadow:0 0 12px rgba(237,27,45,.24);
  }
  body[data-hs-page] :is(button,input,select,textarea) { -webkit-tap-highlight-color:transparent; }
  body[data-hs-page] :is(button,input,select,textarea,a):focus-visible {
    outline:2px solid #80adff; outline-offset:2px;
  }
  body[data-hs-page] :is(.tablewrap,.table-wrap,.tbl-wrap,.scroll) {
    scrollbar-color:rgba(113,150,209,.45) transparent;
  }
  @media (prefers-reduced-motion:reduce) {
    body[data-hs-page] :is(.card,.kpi,.store-card,.panel,.box,.tile,.stat,.metric,.widget,button,.btn,.tab,.subtab) {
      animation-duration:.01ms!important; animation-iteration-count:1!important; transition-duration:.01ms!important;
    }
  }
}

/* ═══ Mark 174 — FRESH (Sunny, Nov 2026: "lets deploy this" — the interactive design). Replaces the Mark 163 glass + Mark 165 Vision glass.
   Clean solid surfaces: one calm page colour, solid cards with a thin line + small shadow, violet accent, green/red/amber only for status.
   Dark is the default; light uses the same rules with the light tokens. All colours come from the --fz-* tokens below. ═══ */
html{--fz-bg:#0a0d14;--fz-card:#121722;--fz-ink:#eef1f7;--fz-ink2:#c3cad8;--fz-mut:#8b94a7;--fz-line:#222a38;--fz-soft:#1a2130;--fz-acc:#7b7bff;--fz-accbg:#1d2140;--fz-good:#34d399;--fz-goodbg:#0f2a20;--fz-bad:#ff6b70;--fz-badbg:#2d1416;--fz-warn:#fbbf24;--fz-warnbg:#2b2110;--fz-side:#0e121b;--fz-thead:#151b27;--fz-input:#0e1320;--fz-hover:#171d2a;--fz-sh:0 1px 2px rgba(0,0,0,.3),0 1px 3px rgba(0,0,0,.35);--fz-sh2:0 24px 60px -20px rgba(0,0,0,.75)}
html.hs-light,html.hs-light-child{--fz-bg:#f6f7f9;--fz-card:#ffffff;--fz-ink:#0b1220;--fz-ink2:#3c4657;--fz-mut:#6b7385;--fz-line:#e7e9ef;--fz-soft:#f3f4f7;--fz-acc:#5b5bf6;--fz-accbg:#eef0ff;--fz-good:#0f9d58;--fz-goodbg:#e7f6ee;--fz-bad:#e5484d;--fz-badbg:#fdecec;--fz-warn:#d97706;--fz-warnbg:#fff4e0;--fz-side:#ffffff;--fz-thead:#fafbfc;--fz-input:#ffffff;--fz-hover:#f8f9fb;--fz-sh:0 1px 2px rgba(16,24,40,.04),0 1px 3px rgba(16,24,40,.06);--fz-sh2:0 24px 60px -20px rgba(16,24,40,.35)}
@media screen {
  html:not(#h1):not(#h2):not(#h3){background:var(--fz-bg)!important}
  html:not(#h1):not(#h2):not(#h3) body:not(#f1):not(#f2):not(#f3):not(#f4):not(#f5):not(#f6):not(#f7):not(#f8):not(#f9):not(#f10):not(#f11):not(#f12):not(#f13):not(#f14){background:var(--fz-bg)!important;background-image:none!important;
    --bg:var(--fz-bg)!important;--panel:var(--fz-card)!important;--panel2:var(--fz-soft)!important;--card:var(--fz-card)!important;--surface:var(--fz-card)!important;--line:var(--fz-line)!important;--border:var(--fz-line)!important;
    --ink:var(--fz-ink)!important;--text:var(--fz-ink)!important;--hs-text:var(--fz-ink)!important;--muted:var(--fz-mut)!important;--hs-muted:var(--fz-mut)!important;--mut:var(--fz-mut)!important;--dim:var(--fz-mut)!important;
    --blue:var(--fz-acc)!important;--acc:var(--fz-acc)!important;--brand:var(--fz-acc)!important;--pri:var(--fz-acc)!important}
  html:not(#h1):not(#h2):not(#h3) body:not(#f1):not(#f2):not(#f3):not(#f4):not(#f5):not(#f6):not(#f7):not(#f8):not(#f9):not(#f10):not(#f11):not(#f12):not(#f13):not(#f14)::before,html:not(#h1):not(#h2):not(#h3) body:not(#f1):not(#f2):not(#f3):not(#f4):not(#f5):not(#f6):not(#f7):not(#f8):not(#f9):not(#f10):not(#f11):not(#f12):not(#f13):not(#f14)::after{display:none!important}
  html:not(#h1):not(#h2):not(#h3) body:not(#f1):not(#f2):not(#f3):not(#f4):not(#f5):not(#f6):not(#f7):not(#f8):not(#f9):not(#f10):not(#f11):not(#f12):not(#f13):not(#f14) :is(.app,.main,.content,#content,#frames,.page,.wrap,.container,#view,#app,main,.auth-shell){background-color:transparent!important;background-image:none!important}
  html:not(#h1):not(#h2):not(#h3) body:not(#f1):not(#f2):not(#f3):not(#f4):not(#f5):not(#f6):not(#f7):not(#f8):not(#f9):not(#f10):not(#f11):not(#f12):not(#f13):not(#f14) iframe.appframe{background:var(--fz-bg)!important}
  html.hs-embedded body:not(#f1):not(#f2):not(#f3):not(#f4):not(#f5):not(#f6):not(#f7):not(#f8):not(#f9):not(#f10):not(#f11):not(#f12):not(#f13):not(#f14){border:0!important;border-radius:0!important;box-shadow:none!important}

  /* cards */
  html:not(#h1):not(#h2):not(#h3) body:not(#f1):not(#f2):not(#f3):not(#f4):not(#f5):not(#f6):not(#f7):not(#f8):not(#f9):not(#f10):not(#f11):not(#f12):not(#f13):not(#f14) :is(.card,.kpi,.store-card,.panel,.box,.tile,.block,.stat,.metric,.widget,.wk-hero,.hero,.bighero,.wcard,.flownode,.sd-tile,.vend,.mgrwrap,.strip,.wkv,.store,.chart-card,.grade){background:var(--fz-card)!important;background-image:none!important;border:1px solid var(--fz-line)!important;border-radius:14px!important;box-shadow:var(--fz-sh)!important;backdrop-filter:none!important;-webkit-backdrop-filter:none!important}
  html:not(#h1):not(#h2):not(#h3) body:not(#f1):not(#f2):not(#f3):not(#f4):not(#f5):not(#f6):not(#f7):not(#f8):not(#f9):not(#f10):not(#f11):not(#f12):not(#f13):not(#f14) :is(.card,.kpi,.store-card,.panel,.box,.tile,.block,.stat,.metric,.widget,.wk-hero,.hero,.bighero,.wcard,.flownode,.sd-tile,.vend,.mgrwrap,.strip,.wkv,.store,.chart-card,.grade) :is(.card,.kpi,.store-card,.panel,.box,.tile,.block,.stat,.metric,.widget,.wk-hero,.hero,.bighero,.wcard,.flownode,.sd-tile,.vend,.mgrwrap,.strip,.wkv,.store,.chart-card,.grade){background:var(--fz-soft)!important;box-shadow:none!important;border-radius:12px!important}
  html:not(#h1):not(#h2):not(#h3) body:not(#f1):not(#f2):not(#f3):not(#f4):not(#f5):not(#f6):not(#f7):not(#f8):not(#f9):not(#f10):not(#f11):not(#f12):not(#f13):not(#f14) :is(.card,.kpi,.store-card,.panel,.box,.tile,.block,.stat,.metric,.widget,.wk-hero,.hero,.bighero,.wcard,.flownode,.sd-tile,.vend,.mgrwrap,.strip,.wkv,.store,.chart-card,.grade)::before,html:not(#h1):not(#h2):not(#h3) body:not(#f1):not(#f2):not(#f3):not(#f4):not(#f5):not(#f6):not(#f7):not(#f8):not(#f9):not(#f10):not(#f11):not(#f12):not(#f13):not(#f14) :is(.card,.kpi,.store-card,.panel,.box,.tile,.block,.stat,.metric,.widget,.wk-hero,.hero,.bighero,.wcard,.flownode,.sd-tile,.vend,.mgrwrap,.strip,.wkv,.store,.chart-card,.grade)::after{background-image:none!important;backdrop-filter:none!important;box-shadow:none!important}
  html:not(#h1):not(#h2):not(#h3) body:not(#f1):not(#f2):not(#f3):not(#f4):not(#f5):not(#f6):not(#f7):not(#f8):not(#f9):not(#f10):not(#f11):not(#f12):not(#f13):not(#f14) :is(.card,.kpi,.store-card,.panel,.box,.tile,.block,.stat,.metric,.widget,.wk-hero,.hero,.bighero,.wcard,.flownode,.sd-tile,.vend,.mgrwrap,.strip,.wkv,.store,.chart-card,.grade):is(.bad,.crit,.danger,.red,.neg,.over){border-color:color-mix(in srgb,var(--fz-bad) 45%,var(--fz-line))!important}
  html:not(#h1):not(#h2):not(#h3) body:not(#f1):not(#f2):not(#f3):not(#f4):not(#f5):not(#f6):not(#f7):not(#f8):not(#f9):not(#f10):not(#f11):not(#f12):not(#f13):not(#f14) :is(.card,.kpi,.store-card,.panel,.box,.tile,.block,.stat,.metric,.widget,.wk-hero,.hero,.bighero,.wcard,.flownode,.sd-tile,.vend,.mgrwrap,.strip,.wkv,.store,.chart-card,.grade):is(.warn,.amber,.yellow,.y){border-color:color-mix(in srgb,var(--fz-warn) 45%,var(--fz-line))!important}
  html:not(#h1):not(#h2):not(#h3) body:not(#f1):not(#f2):not(#f3):not(#f4):not(#f5):not(#f6):not(#f7):not(#f8):not(#f9):not(#f10):not(#f11):not(#f12):not(#f13):not(#f14) :is(.card,.kpi,.store-card,.panel,.box,.tile,.block,.stat,.metric,.widget,.wk-hero,.hero,.bighero,.wcard,.flownode,.sd-tile,.vend,.mgrwrap,.strip,.wkv,.store,.chart-card,.grade):is(.ok,.good,.green,.g){border-color:color-mix(in srgb,var(--fz-good) 40%,var(--fz-line))!important}
  html:not(#h1):not(#h2):not(#h3) body:not(#f1):not(#f2):not(#f3):not(#f4):not(#f5):not(#f6):not(#f7):not(#f8):not(#f9):not(#f10):not(#f11):not(#f12):not(#f13):not(#f14) :is(.kpi,.stat,.metric,.tile,.card,.sd-tile,.vend) :is(.l,.lbl,.lab,.label,.k,.kl,.klabel,.sl,.fl,.cap,.ttl),html:not(#h1):not(#h2):not(#h3) body:not(#f1):not(#f2):not(#f3):not(#f4):not(#f5):not(#f6):not(#f7):not(#f8):not(#f9):not(#f10):not(#f11):not(#f12):not(#f13):not(#f14) :is(.eyebrow,.kicker,.overline){color:var(--fz-mut)!important}

  /* bars + sidebar */
  html:not(#h1):not(#h2):not(#h3) body:not(#f1):not(#f2):not(#f3):not(#f4):not(#f5):not(#f6):not(#f7):not(#f8):not(#f9):not(#f10):not(#f11):not(#f12):not(#f13):not(#f14) .sidebar{background:var(--fz-side)!important;background-image:none!important;border-right:1px solid var(--fz-line)!important;box-shadow:none!important;backdrop-filter:none!important;-webkit-backdrop-filter:none!important;border-radius:0!important;margin:0!important}
  html:not(#h1):not(#h2):not(#h3) body:not(#f1):not(#f2):not(#f3):not(#f4):not(#f5):not(#f6):not(#f7):not(#f8):not(#f9):not(#f10):not(#f11):not(#f12):not(#f13):not(#f14) .sidebar::after{display:none!important}
  html:not(#h1):not(#h2):not(#h3) body:not(#f1):not(#f2):not(#f3):not(#f4):not(#f5):not(#f6):not(#f7):not(#f8):not(#f9):not(#f10):not(#f11):not(#f12):not(#f13):not(#f14) :is(.topbar,.mtopbar,.sticky,.topnav,.subnav-bar,.toolbar,header.app-header,.subtabs){background:var(--fz-card)!important;background-image:none!important;backdrop-filter:none!important;-webkit-backdrop-filter:none!important;border-color:var(--fz-line)!important;box-shadow:none!important}
  html:not(#h1):not(#h2):not(#h3) body:not(#f1):not(#f2):not(#f3):not(#f4):not(#f5):not(#f6):not(#f7):not(#f8):not(#f9):not(#f10):not(#f11):not(#f12):not(#f13):not(#f14) .bottom-nav{background:var(--fz-card)!important;backdrop-filter:none!important;-webkit-backdrop-filter:none!important;border-top:1px solid var(--fz-line)!important;border-radius:0!important;margin:0!important}

  /* pop-ups */
  html:not(#h1):not(#h2):not(#h3) body:not(#f1):not(#f2):not(#f3):not(#f4):not(#f5):not(#f6):not(#f7):not(#f8):not(#f9):not(#f10):not(#f11):not(#f12):not(#f13):not(#f14) :is(.modal,.dialog,dialog,.sheet-modal,.hai-panel,.dropdown,.menu,.popover,.auth-card){background:var(--fz-card)!important;background-image:none!important;backdrop-filter:none!important;-webkit-backdrop-filter:none!important;border:1px solid var(--fz-line)!important;box-shadow:var(--fz-sh2)!important}
  html:not(#h1):not(#h2):not(#h3) body:not(#f1):not(#f2):not(#f3):not(#f4):not(#f5):not(#f6):not(#f7):not(#f8):not(#f9):not(#f10):not(#f11):not(#f12):not(#f13):not(#f14) :is(.backdrop,.modal-bg,.overlay,.nav-backdrop){background:rgba(8,10,16,.55)!important;backdrop-filter:blur(2px)!important;-webkit-backdrop-filter:blur(2px)!important}

  /* inputs */
  html:not(#h1):not(#h2):not(#h3) body:not(#f1):not(#f2):not(#f3):not(#f4):not(#f5):not(#f6):not(#f7):not(#f8):not(#f9):not(#f10):not(#f11):not(#f12):not(#f13):not(#f14) :is(input:not([type=checkbox]):not([type=radio]):not([type=range]):not([type=color]),select,textarea){background-color:var(--fz-input)!important;background-image:none;border:1px solid var(--fz-line)!important;color:var(--fz-ink)!important;border-radius:10px!important;box-shadow:none}
  html:not(#h1):not(#h2):not(#h3) body:not(#f1):not(#f2):not(#f3):not(#f4):not(#f5):not(#f6):not(#f7):not(#f8):not(#f9):not(#f10):not(#f11):not(#f12):not(#f13):not(#f14) :is(input,select,textarea):focus{border-color:var(--fz-acc)!important;box-shadow:0 0 0 3px var(--fz-accbg)!important;outline:none!important}
  html:not(#h1):not(#h2):not(#h3) body:not(#f1):not(#f2):not(#f3):not(#f4):not(#f5):not(#f6):not(#f7):not(#f8):not(#f9):not(#f10):not(#f11):not(#f12):not(#f13):not(#f14) :is(input,textarea)::placeholder{color:var(--fz-mut)!important}
  html:not(#h1):not(#h2):not(#h3) body:not(#f1):not(#f2):not(#f3):not(#f4):not(#f5):not(#f6):not(#f7):not(#f8):not(#f9):not(#f10):not(#f11):not(#f12):not(#f13):not(#f14) :is(input[type=checkbox],input[type=radio]){accent-color:var(--fz-acc)}

  /* buttons: white/dark-card = normal, violet = selected or main action */
  html:not(#h1):not(#h2):not(#h3) body:not(#f1):not(#f2):not(#f3):not(#f4):not(#f5):not(#f6):not(#f7):not(#f8):not(#f9):not(#f10):not(#f11):not(#f12):not(#f13):not(#f14) :is(.stores-bar button,.subtabs button,.subtab,.chip,.seg button,#vtabs button,#mchips button,.btn.ghost,.btn-ghost,.btn.sm,.topnav button,.tabbar button):not(.on):not(.active):not(.sel):not([aria-selected=true]){background:var(--fz-card)!important;background-image:none!important;border:1px solid var(--fz-line)!important;color:var(--fz-ink2)!important;box-shadow:none!important;backdrop-filter:none!important}
  html:not(#h1):not(#h2):not(#h3) body:not(#f1):not(#f2):not(#f3):not(#f4):not(#f5):not(#f6):not(#f7):not(#f8):not(#f9):not(#f10):not(#f11):not(#f12):not(#f13):not(#f14) :is(.stores-bar button,.subtabs button,.subtab,.chip,.seg button,#vtabs button,#mchips button,.btn.ghost,.btn-ghost,.topnav button,.tabbar button):not(.on):not(.active):not(.sel):not([aria-selected=true]):hover{border-color:color-mix(in srgb,var(--fz-acc) 45%,var(--fz-line))!important;color:var(--fz-ink)!important}
  html:not(#h1):not(#h2):not(#h3) body:not(#f1):not(#f2):not(#f3):not(#f4):not(#f5):not(#f6):not(#f7):not(#f8):not(#f9):not(#f10):not(#f11):not(#f12):not(#f13):not(#f14) :is(.btn.pri,.btn.primary,.btn-primary,.topnew,.stores-bar button.on,.subtabs .on,.subtabs .active,.subtab.active,.seg button.on,.seg>.on,.chip.on,.chip.active,#vtabs button.on,#mchips button.on,.tabbar button.on,.topnav button.on,.pill.on,button[aria-selected=true]):not(.tab){background:var(--fz-acc)!important;background-image:none!important;border-color:var(--fz-acc)!important;color:#fff!important;box-shadow:none!important}
  html:not(#h1):not(#h2):not(#h3) body:not(#f1):not(#f2):not(#f3):not(#f4):not(#f5):not(#f6):not(#f7):not(#f8):not(#f9):not(#f10):not(#f11):not(#f12):not(#f13):not(#f14) :is(.btn,.btn-sm,.stores-bar button,.subtab,.seg button,.chip,#vtabs button,#mchips button,.tabbar button){border-radius:10px!important}

  /* tables */
  html:not(#h1):not(#h2):not(#h3) body:not(#f1):not(#f2):not(#f3):not(#f4):not(#f5):not(#f6):not(#f7):not(#f8):not(#f9):not(#f10):not(#f11):not(#f12):not(#f13):not(#f14) :is(table,tbody,tr){background-color:transparent!important}
  html:not(#h1):not(#h2):not(#h3) body:not(#f1):not(#f2):not(#f3):not(#f4):not(#f5):not(#f6):not(#f7):not(#f8):not(#f9):not(#f10):not(#f11):not(#f12):not(#f13):not(#f14) thead th{background:var(--fz-thead)!important;color:var(--fz-mut)!important;border-color:var(--fz-line)!important}
  html:not(#h1):not(#h2):not(#h3) body:not(#f1):not(#f2):not(#f3):not(#f4):not(#f5):not(#f6):not(#f7):not(#f8):not(#f9):not(#f10):not(#f11):not(#f12):not(#f13):not(#f14) :is(td,th){border-color:var(--fz-line)!important}
  html:not(#h1):not(#h2):not(#h3) body:not(#f1):not(#f2):not(#f3):not(#f4):not(#f5):not(#f6):not(#f7):not(#f8):not(#f9):not(#f10):not(#f11):not(#f12):not(#f13):not(#f14) tbody tr:hover>td{background-color:var(--fz-hover)!important}

  /* scrollbars */
  html:not(#h1):not(#h2):not(#h3) body:not(#f1):not(#f2):not(#f3):not(#f4):not(#f5):not(#f6):not(#f7):not(#f8):not(#f9):not(#f10):not(#f11):not(#f12):not(#f13):not(#f14) *{scrollbar-color:color-mix(in srgb,var(--fz-mut) 45%,transparent) transparent;scrollbar-width:thin}
}
@media (prefers-reduced-motion:reduce){ html:not(#h1):not(#h2):not(#h3) body:not(#f1):not(#f2):not(#f3):not(#f4):not(#f5):not(#f6):not(#f7):not(#f8):not(#f9):not(#f10):not(#f11):not(#f12):not(#f13):not(#f14) *{animation-duration:.01ms!important;transition-duration:.01ms!important} }
/* Mark 174 — Fresh portal shell (sidebar items, top bar, ⌘K search, alerts drawer) */
@media screen {
  html:not(#h1):not(#h2):not(#h3) body:not(#f1):not(#f2):not(#f3):not(#f4):not(#f5):not(#f6):not(#f7):not(#f8):not(#f9):not(#f10):not(#f11):not(#f12):not(#f13):not(#f14) .sidebar .brand{padding:18px 14px 12px 18px!important;background:transparent!important;border:0!important;box-shadow:none!important;margin:0!important;border-radius:0!important}
  html:not(#h1):not(#h2):not(#h3) body:not(#f1):not(#f2):not(#f3):not(#f4):not(#f5):not(#f6):not(#f7):not(#f8):not(#f9):not(#f10):not(#f11):not(#f12):not(#f13):not(#f14) .sidebar .brand .topbar-logo{height:24px!important}
  html:not(#h1):not(#h2):not(#h3) body:not(#f1):not(#f2):not(#f3):not(#f4):not(#f5):not(#f6):not(#f7):not(#f8):not(#f9):not(#f10):not(#f11):not(#f12):not(#f13):not(#f14) .nav-toggle{background:var(--fz-card)!important;border:1px solid var(--fz-line)!important;color:var(--fz-mut)!important}
  html:not(#h1):not(#h2):not(#h3) body:not(#f1):not(#f2):not(#f3):not(#f4):not(#f5):not(#f6):not(#f7):not(#f8):not(#f9):not(#f10):not(#f11):not(#f12):not(#f13):not(#f14) .nav-search{background:var(--fz-input)!important;border:1px solid var(--fz-line)!important;color:var(--fz-ink)!important;height:36px!important}
  html:not(#h1):not(#h2):not(#h3) body:not(#f1):not(#f2):not(#f3):not(#f4):not(#f5):not(#f6):not(#f7):not(#f8):not(#f9):not(#f10):not(#f11):not(#f12):not(#f13):not(#f14) .nav-section-title{color:var(--fz-mut)!important;font-size:11px!important;font-weight:650!important;letter-spacing:0!important;text-transform:none!important;padding:12px 12px 5px!important}
  html:not(#h1):not(#h2):not(#h3) body:not(#f1):not(#f2):not(#f3):not(#f4):not(#f5):not(#f6):not(#f7):not(#f8):not(#f9):not(#f10):not(#f11):not(#f12):not(#f13):not(#f14) .sidebar .tab{display:flex!important;align-items:center!important;gap:11px!important;min-height:36px!important;padding:8px 11px!important;border:0!important;border-radius:9px!important;background:transparent!important;background-image:none!important;box-shadow:none!important;color:var(--fz-ink2)!important;font-weight:560!important;font-size:13.5px!important}
  html:not(#h1):not(#h2):not(#h3) body:not(#f1):not(#f2):not(#f3):not(#f4):not(#f5):not(#f6):not(#f7):not(#f8):not(#f9):not(#f10):not(#f11):not(#f12):not(#f13):not(#f14) .sidebar .tab:hover{background:var(--fz-soft)!important;color:var(--fz-ink)!important}
  html:not(#h1):not(#h2):not(#h3) body:not(#f1):not(#f2):not(#f3):not(#f4):not(#f5):not(#f6):not(#f7):not(#f8):not(#f9):not(#f10):not(#f11):not(#f12):not(#f13):not(#f14) .sidebar .tab.active{background:var(--fz-accbg)!important;color:var(--fz-acc)!important;box-shadow:none!important}
  html:not(#h1):not(#h2):not(#h3) body:not(#f1):not(#f2):not(#f3):not(#f4):not(#f5):not(#f6):not(#f7):not(#f8):not(#f9):not(#f10):not(#f11):not(#f12):not(#f13):not(#f14) .sidebar .tab .caret{color:var(--fz-mut)!important}
  html:not(#h1):not(#h2):not(#h3) body:not(#f1):not(#f2):not(#f3):not(#f4):not(#f5):not(#f6):not(#f7):not(#f8):not(#f9):not(#f10):not(#f11):not(#f12):not(#f13):not(#f14) .sidebar .fz-i{width:17px;height:17px;flex:0 0 17px;stroke:currentColor;fill:none;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round;opacity:.8}
  html:not(#h1):not(#h2):not(#h3) body:not(#f1):not(#f2):not(#f3):not(#f4):not(#f5):not(#f6):not(#f7):not(#f8):not(#f9):not(#f10):not(#f11):not(#f12):not(#f13):not(#f14) .sidebar .tab.active .fz-i{opacity:1}
  html:not(#h1):not(#h2):not(#h3) body:not(#f1):not(#f2):not(#f3):not(#f4):not(#f5):not(#f6):not(#f7):not(#f8):not(#f9):not(#f10):not(#f11):not(#f12):not(#f13):not(#f14) .subnav{border-left:1px solid var(--fz-line)!important;margin:2px 0 6px 19px!important;background:transparent!important}
  html:not(#h1):not(#h2):not(#h3) body:not(#f1):not(#f2):not(#f3):not(#f4):not(#f5):not(#f6):not(#f7):not(#f8):not(#f9):not(#f10):not(#f11):not(#f12):not(#f13):not(#f14) .subnav .subitem{color:var(--fz-mut)!important;background:transparent!important;border-radius:8px!important;font-weight:560!important;font-size:12.5px!important;min-height:32px!important}
  html:not(#h1):not(#h2):not(#h3) body:not(#f1):not(#f2):not(#f3):not(#f4):not(#f5):not(#f6):not(#f7):not(#f8):not(#f9):not(#f10):not(#f11):not(#f12):not(#f13):not(#f14) .subnav .subitem:hover{background:var(--fz-soft)!important;color:var(--fz-ink)!important}
  html:not(#h1):not(#h2):not(#h3) body:not(#f1):not(#f2):not(#f3):not(#f4):not(#f5):not(#f6):not(#f7):not(#f8):not(#f9):not(#f10):not(#f11):not(#f12):not(#f13):not(#f14) .subnav .subitem.active{background:var(--fz-accbg)!important;color:var(--fz-acc)!important}
  html:not(#h1):not(#h2):not(#h3) body:not(#f1):not(#f2):not(#f3):not(#f4):not(#f5):not(#f6):not(#f7):not(#f8):not(#f9):not(#f10):not(#f11):not(#f12):not(#f13):not(#f14) .side-foot{background:transparent!important;border-top:1px solid var(--fz-line)!important}
  html:not(#h1):not(#h2):not(#h3) body:not(#f1):not(#f2):not(#f3):not(#f4):not(#f5):not(#f6):not(#f7):not(#f8):not(#f9):not(#f10):not(#f11):not(#f12):not(#f13):not(#f14) .side-foot .pill{background:var(--fz-soft)!important;color:var(--fz-ink2)!important;border:1px solid var(--fz-line)!important}
  html:not(#h1):not(#h2):not(#h3) body:not(#f1):not(#f2):not(#f3):not(#f4):not(#f5):not(#f6):not(#f7):not(#f8):not(#f9):not(#f10):not(#f11):not(#f12):not(#f13):not(#f14) .side-foot .lo{color:var(--fz-mut)!important}html:not(#h1):not(#h2):not(#h3) body:not(#f1):not(#f2):not(#f3):not(#f4):not(#f5):not(#f6):not(#f7):not(#f8):not(#f9):not(#f10):not(#f11):not(#f12):not(#f13):not(#f14) .side-foot .lo:hover{color:var(--fz-ink)!important}
  html:not(#h1):not(#h2):not(#h3) body:not(#f1):not(#f2):not(#f3):not(#f4):not(#f5):not(#f6):not(#f7):not(#f8):not(#f9):not(#f10):not(#f11):not(#f12):not(#f13):not(#f14) .hs-theme-btn{background:var(--fz-card)!important;border:1px solid var(--fz-line)!important;color:var(--fz-ink2)!important;box-shadow:none!important}
  html:not(#h1):not(#h2):not(#h3) body:not(#f1):not(#f2):not(#f3):not(#f4):not(#f5):not(#f6):not(#f7):not(#f8):not(#f9):not(#f10):not(#f11):not(#f12):not(#f13):not(#f14) #build-tag{color:var(--fz-mut)!important;opacity:.7}
  html:not(#h1):not(#h2):not(#h3) body:not(#f1):not(#f2):not(#f3):not(#f4):not(#f5):not(#f6):not(#f7):not(#f8):not(#f9):not(#f10):not(#f11):not(#f12):not(#f13):not(#f14) .nav-reopen{background:var(--fz-card)!important;border:1px solid var(--fz-line)!important;color:var(--fz-ink2)!important;box-shadow:var(--fz-sh)!important}
  /* top bar */
  .fz-top{display:flex;align-items:center;gap:10px;flex:0 0 auto;height:58px;padding:0 20px;background:var(--fz-bg);border-bottom:1px solid var(--fz-line)}
  .fz-title{font-weight:700;font-size:16px;letter-spacing:-.01em;color:var(--fz-ink);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;min-width:0;max-width:30%}
  .fz-search{flex:1;max-width:460px;margin-left:16px;display:flex;align-items:center;gap:9px;background:var(--fz-card);border:1px solid var(--fz-line);border-radius:10px;padding:8px 12px;color:var(--fz-mut);box-shadow:var(--fz-sh);cursor:text;font:inherit;font-size:13px;text-align:left}
  .fz-search:hover{border-color:color-mix(in srgb,var(--fz-acc) 40%,var(--fz-line))}
  .fz-search span{flex:1}
  .fz-search kbd{font:600 11px ui-monospace,monospace;border:1px solid var(--fz-line);border-radius:6px;padding:1px 6px;color:var(--fz-mut)}
  .fz-sp{flex:1}
  .fz-ib{width:38px;height:38px;border-radius:10px;border:1px solid var(--fz-line);background:var(--fz-card);display:grid;place-items:center;box-shadow:var(--fz-sh);position:relative;cursor:pointer;color:var(--fz-ink2);padding:0}
  .fz-ib:hover{color:var(--fz-ink);border-color:color-mix(in srgb,var(--fz-acc) 40%,var(--fz-line))}
  .fz-i{width:17px;height:17px;stroke:currentColor;fill:none;stroke-width:1.9;stroke-linecap:round;stroke-linejoin:round}
  .fz-cnt{position:absolute;top:-5px;right:-5px;min-width:18px;height:18px;padding:0 5px;border-radius:999px;background:var(--fz-bad);color:#fff;font:700 10.5px/18px system-ui,sans-serif;text-align:center;border:2px solid var(--fz-bg)}
  .main.frames-on>.fz-top,.main>.fz-top{display:flex}
  .fz-mib{width:40px;height:40px;border-radius:11px;border:1px solid var(--fz-line);background:var(--fz-card);color:var(--fz-ink2);display:none;place-items:center;position:relative;padding:0;cursor:pointer}
  /* ⌘K + drawer */
  .fz-ov{position:fixed;inset:0;background:rgba(8,10,16,.5);display:none;z-index:400;align-items:flex-start;justify-content:center;padding:10vh 16px}
  .fz-ov.show{display:flex}
  #fzDrawerOv{background:rgba(8,10,16,.35)}
  .fz-dlg{background:var(--fz-card);border:1px solid var(--fz-line);border-radius:16px;box-shadow:var(--fz-sh2);width:min(560px,100%);overflow:hidden}
  html:not(#h1):not(#h2):not(#h3) body:not(#f1):not(#f2):not(#f3):not(#f4):not(#f5):not(#f6):not(#f7):not(#f8):not(#f9):not(#f10):not(#f11):not(#f12):not(#f13):not(#f14) .fz-dlg input{width:100%;border:0!important;border-bottom:1px solid var(--fz-line)!important;border-radius:0!important;padding:16px 18px!important;font-size:15px!important;background:transparent!important;color:var(--fz-ink)!important;outline:none;box-shadow:none!important}
  .fz-res{max-height:52vh;overflow:auto;padding:6px}
  .fz-it{display:flex;align-items:center;gap:10px;padding:9px 12px;border-radius:9px;cursor:pointer;color:var(--fz-ink);font-size:14px}
  .fz-it.on,.fz-it:hover{background:var(--fz-accbg);color:var(--fz-acc)}
  .fz-it small{margin-left:auto;color:var(--fz-mut);font-size:12px}
  .fz-none{color:var(--fz-mut);padding:16px 12px;font-size:13px}
  .fz-drawer{position:fixed;top:0;right:0;bottom:0;width:min(400px,100%);background:var(--fz-card);border-left:1px solid var(--fz-line);box-shadow:var(--fz-sh2);z-index:410;transform:translateX(105%);transition:transform .22s;display:flex;flex-direction:column}
  .fz-drawer.show{transform:none}
  .fz-dh{display:flex;align-items:center;justify-content:space-between;padding:16px 18px;border-bottom:1px solid var(--fz-line);color:var(--fz-ink);font-size:15px;padding-top:calc(16px + env(safe-area-inset-top))}
  .fz-db{overflow:auto;padding:6px 12px}
  .fz-li{display:flex;align-items:center;gap:12px;padding:11px 6px;border-top:1px solid var(--fz-line);border-radius:8px;cursor:pointer;color:var(--fz-ink)}.fz-li:first-child{border-top:0}.fz-li:hover{background:var(--fz-soft)}
  .fz-li b{font-size:13.5px;font-weight:650}.fz-li small{display:block;color:var(--fz-mut);font-size:12px}
  .fz-ic{width:34px;height:34px;border-radius:10px;display:grid;place-items:center;flex:0 0 34px}.fz-ic svg{width:17px;height:17px;fill:none;stroke-width:2;stroke:currentColor;stroke-linecap:round;stroke-linejoin:round}
  .fz-bad .fz-ic{background:var(--fz-badbg);color:var(--fz-bad)}.fz-warn .fz-ic{background:var(--fz-warnbg);color:var(--fz-warn)}.fz-info .fz-ic{background:var(--fz-accbg);color:var(--fz-acc)}
  /* portal content area + loading/error cards on the Fresh tokens */
  html:not(#h1):not(#h2):not(#h3) body:not(#f1):not(#f2):not(#f3):not(#f4):not(#f5):not(#f6):not(#f7):not(#f8):not(#f9):not(#f10):not(#f11):not(#f12):not(#f13):not(#f14) #frames,html:not(#h1):not(#h2):not(#h3) body:not(#f1):not(#f2):not(#f3):not(#f4):not(#f5):not(#f6):not(#f7):not(#f8):not(#f9):not(#f10):not(#f11):not(#f12):not(#f13):not(#f14) .appframe{background:var(--fz-bg)!important}
  html:not(#h1):not(#h2):not(#h3) body:not(#f1):not(#f2):not(#f3):not(#f4):not(#f5):not(#f6):not(#f7):not(#f8):not(#f9):not(#f10):not(#f11):not(#f12):not(#f13):not(#f14) .mtopbar{background:var(--fz-card)!important;border-bottom:1px solid var(--fz-line)!important;box-shadow:none!important}
  html:not(#h1):not(#h2):not(#h3) body:not(#f1):not(#f2):not(#f3):not(#f4):not(#f5):not(#f6):not(#f7):not(#f8):not(#f9):not(#f10):not(#f11):not(#f12):not(#f13):not(#f14) .mtopbar .mmenu{background:var(--fz-card)!important;border:1px solid var(--fz-line)!important;color:var(--fz-ink2)!important}
  html:not(#h1):not(#h2):not(#h3) body:not(#f1):not(#f2):not(#f3):not(#f4):not(#f5):not(#f6):not(#f7):not(#f8):not(#f9):not(#f10):not(#f11):not(#f12):not(#f13):not(#f14) .mobile-view-name{color:var(--fz-ink)!important}
}
@media (max-width:768px){
  .fz-top{display:none!important}
  .fz-mib{display:grid}
  .mtopbar .mobile-view-name{flex:1;min-width:0}
  .mtopbar .mmenu{margin-left:0!important}
}

/* Mark 174 — dark-text logo on light surfaces, white logo in dark; the old blue Ask AI button becomes the Fresh accent */
html.hs-light body:not(#f1):not(#f2):not(#f3):not(#f4):not(#f5):not(#f6):not(#f7):not(#f8):not(#f9):not(#f10):not(#f11):not(#f12):not(#f13):not(#f14) img[src*="hotspot-logo"],html.hs-light-child body:not(#f1):not(#f2):not(#f3):not(#f4):not(#f5):not(#f6):not(#f7):not(#f8):not(#f9):not(#f10):not(#f11):not(#f12):not(#f13):not(#f14) img[src*="hotspot-logo"]{content:url(/hotspot-logo-light.png)!important;filter:none!important}
html:not(#h1):not(#h2):not(#h3) body:not(#f1):not(#f2):not(#f3):not(#f4):not(#f5):not(#f6):not(#f7):not(#f8):not(#f9):not(#f10):not(#f11):not(#f12):not(#f13):not(#f14) #hai-fab{background:var(--fz-acc)!important;background-image:none!important;border-color:var(--fz-acc)!important;color:#fff!important;box-shadow:0 8px 20px -8px rgba(91,91,246,.6)!important}

html:not(#h1):not(#h2):not(#h3) body:not(#f1):not(#f2):not(#f3):not(#f4):not(#f5):not(#f6):not(#f7):not(#f8):not(#f9):not(#f10):not(#f11):not(#f12):not(#f13):not(#f14) .fz-i,html:not(#h1):not(#h2):not(#h3) body:not(#f1):not(#f2):not(#f3):not(#f4):not(#f5):not(#f6):not(#f7):not(#f8):not(#f9):not(#f10):not(#f11):not(#f12):not(#f13):not(#f14) .fz-i *{stroke:currentColor!important;fill:none!important}