@import url('https://fonts.googleapis.com/css2?family=Inter:opsz,wght@14..32,400;14..32,450;14..32,500;14..32,600;14..32,700&display=swap');

/* ============================================================================
   lw.css — Lifeworks design layer
   ----------------------------------------------------------------------------
   EVERYTHING here is scoped under html[data-skin="new"]. With the skin off this
   file has zero effect, so it can never break an existing page. The skin is
   toggled per user from the Account menu (auth.js, stored in localStorage).

   Specificity note: the prefix is html[data-skin="new"]:root — (0,2,1) — which
   deliberately outranks both each page's own `:root` token block (0,1,0) and
   auth.js's runtime light-theme overrides html[data-theme="light"] (0,1,1).
   That is how this restyles the app without editing 20 pages of inline CSS.

   Principles:
     - Semantic colour (green/red) is reserved for DATA. Interface state uses
       the accent. The old build used GitHub green for both, which is the main
       reason every screen read as "generated".
     - Neutrals are warm, not blue-black.
     - Numbers are tabular everywhere, so columns align optically.
     - Borders are used sparingly; hierarchy comes from surface + space.
   ========================================================================== */

/* ---------- Tokens: dark (default) ---------- */
html[data-skin="new"]:root{
  --bg:#0c0c10;
  --surface:#141419;          /* cards */
  --surface-2:#1b1b22;        /* raised: table heads, inputs, chips */
  --surface-3:#22222b;        /* hover */
  --line:#262630;
  --line-soft:#1d1d25;

  --text:#f4f4f7;
  --text-2:#a8a8b6;           /* secondary copy */
  --muted:#7b7b8c;            /* tertiary / labels */

  --accent:#7d8cff;           /* interactive state ONLY */
  --accent-soft:rgba(125,140,255,.14);
  --accent-line:rgba(125,140,255,.42);
  --accent-text:#aab3ff;
  --accent-strong:#5560e8;   /* filled surfaces: white text needs ~5:1, --accent gives 2.8:1 */
  /* pill text. A pill tints its own hue at ~16%, so in LIGHT mode the label must be
     darker than the token or it lands ~2.7:1 on its own background. */
  --pos-ink:var(--pos); --neg-ink:var(--neg); --warn-ink:var(--warn);
  --brand-ink:var(--brand); --wm-ink:var(--wm); --purple-ink:var(--purple);
  --pill-ink:var(--muted);

  --pos:#46c07a;              /* data only */
  --neg:#f2565c;              /* data only */
  --warn:#e0a33c;
  --brand:#ff9e3d;            /* Amazon-ish marketplace accent */
  --wm:#4d9bff;               /* Walmart */
  --purple:#a97bf0;

  --chart-grid:rgba(255,255,255,.07);
  --chart-legend:#a8a8b6;
  /* categorical series palette; themeCharts() in auth.js maps the legacy chart
     colours onto these so the 9 charting pages follow the skin unedited */
  --c1:#ff9e3d;  /* Amazon / brand      */
  --c2:#5ac8fa;  /* Seller             */
  --c3:#46c07a;  /* positive / organic */
  --c4:#f2565c;  /* negative           */
  --c5:#e0a33c;  /* amber              */
  --c6:#a97bf0;  /* purple             */
  --c7:#4d9bff;  /* Walmart            */

  --shadow-1:0 1px 2px rgba(0,0,0,.4);
  --shadow-2:0 8px 24px -8px rgba(0,0,0,.6);
  --shadow-pop:0 16px 44px -12px rgba(0,0,0,.72);

  --r-sm:6px; --r-md:9px; --r-lg:13px;
  --sp-1:4px; --sp-2:8px; --sp-3:12px; --sp-4:16px; --sp-5:24px; --sp-6:32px;

  /* legacy aliases so existing page CSS keeps resolving */
  --card:var(--surface);
  --panel:var(--surface);
  --panel2:var(--surface-2);
  --green:var(--pos);
  --red:var(--neg);
  --amber:var(--warn);
  --blue:var(--wm);
  --accent2:var(--wm);
  --head:var(--surface-2);
  --sub:var(--muted);

  color-scheme:dark;
}

/* ---------- Tokens: light ---------- */
html[data-skin="new"][data-theme="light"]:root{
  --bg:#f7f6f3;               /* warm paper, not cold grey */
  --surface:#ffffff;
  --surface-2:#f1efea;
  --surface-3:#e9e6df;
  --line:#e2ded5;
  --line-soft:#eeebe4;

  --text:#1a1a1f;
  --text-2:#55555f;
  --muted:#84848f;

  --accent:#4f5bd5;
  --accent-soft:rgba(79,91,213,.10);
  --accent-line:rgba(79,91,213,.38);
  --accent-text:#3f4ac0;
  --accent-strong:#4a55cc;
  --pos-ink:#116638; --neg-ink:#9e2a2e; --warn-ink:#75500a;
  --brand-ink:#8a4710; --wm-ink:#0f4d98; --purple-ink:#5a3492;
  --pill-ink:var(--text-2);

  --pos:#1f8f52;
  --neg:#cf3b40;
  --warn:#9a6a10;
  --brand:#c2681a;
  --wm:#1667c8;
  --purple:#7b4bc0;

  --chart-grid:rgba(20,20,30,.09);
  --chart-legend:#55555f;
  --c1:#c2681a; --c2:#0b7fb8; --c3:#1f8f52; --c4:#cf3b40;
  --c5:#9a6a10; --c6:#7b4bc0; --c7:#1667c8;

  --shadow-1:0 1px 2px rgba(24,22,18,.06);
  --shadow-2:0 8px 22px -10px rgba(24,22,18,.18);
  --shadow-pop:0 18px 46px -14px rgba(24,22,18,.26);

  color-scheme:light;
}

/* ---------- Base ---------- */
html[data-skin="new"]:root body{
  background:var(--bg);
  color:var(--text);
  font-family:'Inter',-apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,Helvetica,Arial,sans-serif;
  font-size:14px;
  line-height:1.5;
  letter-spacing:-.006em;
  -webkit-font-smoothing:antialiased;
  -moz-osx-font-smoothing:grayscale;
  font-variant-numeric:tabular-nums;
  font-feature-settings:'cv05' 1,'ss03' 1;
}
html[data-skin="new"]:root .wrap{max-width:1360px;padding:var(--sp-5) var(--sp-5) 64px}
html[data-skin="new"]:root ::selection{background:var(--accent-soft);color:var(--text)}

/* Focus: visible, consistent, accent-coloured. */
html[data-skin="new"]:root :focus-visible{
  outline:2px solid var(--accent);
  outline-offset:2px;
  border-radius:var(--r-sm);
}

/* Scrollbars follow the palette instead of the OS default. */
html[data-skin="new"]:root *::-webkit-scrollbar{width:11px;height:11px}
html[data-skin="new"]:root *::-webkit-scrollbar-track{background:transparent}
html[data-skin="new"]:root *::-webkit-scrollbar-thumb{background:var(--surface-3);border-radius:99px;border:3px solid var(--bg)}
html[data-skin="new"]:root *::-webkit-scrollbar-thumb:hover{background:var(--muted)}

/* ---------- Typography ---------- */
html[data-skin="new"]:root h1,
html[data-skin="new"]:root h2{
  letter-spacing:-.022em;
  font-weight:600;
  line-height:1.2;
}
html[data-skin="new"]:root h1{font-size:25px;margin:0 0 2px}
html[data-skin="new"]:root h2{font-size:19px}
html[data-skin="new"]:root .card h3{
  font-size:14px;
  font-weight:600;
  letter-spacing:-.012em;
  text-transform:none;           /* kill the uppercase micro-label look */
  color:var(--text);
  margin:0 0 var(--sp-4);
}
html[data-skin="new"]:root .sub{
  color:var(--text-2);
  font-size:13px;
  letter-spacing:0;
  margin:2px 0 var(--sp-5);
}
html[data-skin="new"]:root .muted{color:var(--muted)}
html[data-skin="new"]:root .note{
  color:var(--muted);
  font-size:12px;
  line-height:1.55;
  background:var(--surface-2);          /* pages hardcode a teal/blue tint here */
  border:1px solid var(--line-soft);
  border-left:2px solid var(--accent-line);
  border-radius:var(--r-md);
  padding:10px 13px;
}
html[data-skin="new"]:root .asinline{font-size:11.5px;color:var(--muted);letter-spacing:-.004em;max-width:100%}
/* Product titles carry a hardcoded px max-width (300/340/240... per page). A
   narrower content column — the sidebar takes 238px — pushed the title past the
   cell so it dropped below the thumbnail.
   ⚠️ The first attempt (`max-width:100%`) made it WORSE: auto table layout
   IGNORES a percentage max-width while computing intrinsic widths, so the
   title contributed its full width to the column, the table's min-content
   exploded, and — because a bare `1fr` grid track is `minmax(auto,1fr)` and so
   cannot shrink below its content — it crushed the neighbouring card
   (Top brands went 491px -> 202px, ratio 1.4 -> 7.3).
   The working combination is two parts:
     1. min-width:0 on the grid ITEMS, which defeats the blowout without
        touching each page's own column ratios (they differ: 1.4fr 1fr,
        1fr 1fr 1fr, and some already use minmax).
     2. max-width:0 on the title cell — the standard table-ellipsis trick. The
        tables all set width:100%, so the column takes its fair share of a
        DEFINITE table width, and the title's percentage then resolves. */
html[data-skin="new"]:root .cols>*,
html[data-skin="new"]:root .cols2>*,
html[data-skin="new"]:root .cols3>*{min-width:0}
/* Keep each page's own px title width (that sizing was correct); the only real
   problem was the LINE BREAK between the thumbnail and the title, which appears
   because a replaced element next to an atomic inline is a break opportunity.
   nowrap removes it. On narrow windows the table then exceeds its card and the
   existing .scroll container scrolls — which is what it is for, and is how the
   app behaved before the rail. */
html[data-skin="new"]:root td:has(>.pttl){white-space:nowrap}
html[data-skin="new"]:root .mono{
  font-family:ui-monospace,'SF Mono',SFMono-Regular,Menlo,Consolas,monospace;
  font-size:.92em;
  letter-spacing:-.01em;
}
html[data-skin="new"]:root .loading{
  color:var(--muted);
  padding:56px var(--sp-4);
  text-align:center;
  font-size:13px;
}
html[data-skin="new"]:root a{color:var(--accent-text);text-decoration:none}
html[data-skin="new"]:root a:hover{text-decoration:underline;text-underline-offset:2px}

/* ---------- Header ---------- */
html[data-skin="new"]:root .hdr{
  background:var(--bg);
  background:color-mix(in srgb,var(--bg) 82%,transparent);
  -webkit-backdrop-filter:saturate(180%) blur(14px);
  backdrop-filter:saturate(180%) blur(14px);
  border-bottom:1px solid var(--line-soft);
  padding:var(--sp-2) 0;
}
html[data-skin="new"]:root .hdr-in{
  max-width:1360px;
  gap:var(--sp-5);
  padding-left:var(--sp-5);
  padding-right:var(--sp-5);
}
html[data-skin="new"]:root .hdr .logo{height:28px;opacity:.95}

/* ⚠️ Nav icon sizing MUST live outside the >=1024px sidebar block. An <svg> with
   no width/height stretches to fill its container, so when this rule was only
   inside the desktop media query every icon rendered full-screen-width on
   phones. It is global; the rail only changes layout around it. */
html[data-skin="new"]:root .lwni{
  width:16px; height:16px;
  min-width:16px; min-height:16px;   /* belt-and-braces against flex/SVG stretch */
  flex:0 0 16px;
  opacity:.9;
}
/* the mobile drawer stacks nav rows as blocks — keep icon and label on one line */
html[data-skin="new"]:root .hdr-in.lwopen .lwgbtn,
html[data-skin="new"]:root .hdr-in.lwopen .tabs>a,
html[data-skin="new"]:root .hdr-in.lwopen .lwmenu a{
  display:flex; align-items:center; gap:10px;
}
html[data-skin="new"]:root .hdr .tabs{gap:2px}
html[data-skin="new"]:root .hdr .tabs a,
html[data-skin="new"]:root .lwgbtn{
  color:var(--text-2);
  background:transparent;
  border:1px solid transparent;
  border-radius:var(--r-md);
  padding:7px 11px;
  font-size:13px;
  font-weight:500;
  letter-spacing:-.008em;
  transition:background .14s ease,color .14s ease;
}
html[data-skin="new"]:root .hdr .tabs a:hover,
html[data-skin="new"]:root .lwgbtn:hover{background:var(--surface-2);color:var(--text)}
html[data-skin="new"]:root .hdr .tabs a.active,
html[data-skin="new"]:root .lwgbtn.active{
  background:var(--accent-soft);
  border-color:var(--accent-line);
  color:var(--accent-text);
  box-shadow:none;
  font-weight:550;
}
html[data-skin="new"]:root .hdr .upd{color:var(--muted);font-size:11.5px;font-weight:450}

/* Dropdown menus (auth.js) */
html[data-skin="new"]:root .lwmenu{
  background:var(--surface);
  border:1px solid var(--line);
  border-radius:var(--r-lg);
  box-shadow:var(--shadow-pop);
  padding:5px;
}
/* ⚠️ The rule above is the DESKTOP fly-out card. In the <=760px hamburger drawer the
   sub-menu is an inline list, and auth.js already asks for flat styling — but its
   `.hdr-in.lwopen .lwmenu` (0,3,0) loses to the (0,3,1) rule above, so the card leaked
   into the drawer and every group rendered as a nested panel. Restore flat + indent. */
html[data-skin="new"]:root .hdr-in.lwopen .lwmenu{
  background:none;
  border:0;
  border-left:1px solid var(--line);
  border-radius:0;
  box-shadow:none;
  padding:2px 0 6px 12px;
  margin:0 0 2px 14px;
}
html[data-skin="new"]:root .hdr .tabs .lwmenu a,
html[data-skin="new"]:root .lwacct .lwmenu a{
  color:var(--text-2);
  font-size:13px;
  font-weight:450;
  border-radius:var(--r-sm);
  padding:8px 10px;
}
html[data-skin="new"]:root .hdr .tabs .lwmenu a:hover,
html[data-skin="new"]:root .lwacct .lwmenu a:hover{background:var(--surface-2);color:var(--text)}
html[data-skin="new"]:root .hdr .tabs .lwmenu a.active,
html[data-skin="new"]:root .lwacct .lwmenu a.active{color:var(--accent-text);background:var(--accent-soft);font-weight:550}

/* ---------- Cards ---------- */
html[data-skin="new"]:root .card,
html[data-skin="new"]:root .lwcard{
  background:var(--surface);
  border:1px solid var(--line-soft);
  border-radius:var(--r-lg);
  box-shadow:var(--shadow-1);
  padding:var(--sp-5);
}

/* ---------- KPI blocks ---------- */
html[data-skin="new"]:root .kpis{gap:var(--sp-3)}
html[data-skin="new"]:root .kpi{
  background:var(--surface);
  border:1px solid var(--line-soft);
  border-radius:var(--r-lg);
  padding:15px 16px 14px;
  box-shadow:var(--shadow-1);
}
html[data-skin="new"]:root .kpi .lbl{
  color:var(--muted);
  font-size:12px;
  font-weight:500;
  text-transform:none;          /* was UPPERCASE + letter-spaced */
  letter-spacing:0;
  margin-bottom:5px;
}
html[data-skin="new"]:root .kpi .val{
  /* fluid: the dashboard packs 8 KPIs into one row, so a fixed size overflows
     the card as soon as a value gets long. clamp keeps it large on wide screens
     and shrinks before it can spill. */
  font-size:clamp(16px,1.45vw,24px);
  font-weight:600;
  letter-spacing:-.032em;
  line-height:1.15;
  font-variant-numeric:tabular-nums;
  color:var(--text);
}
html[data-skin="new"]:root .kpi .sub2{color:var(--muted);font-size:11.5px;margin-top:4px;letter-spacing:0}

/* ---------- Tables ---------- */
html[data-skin="new"]:root table{
  font-size:13px;
  border-collapse:collapse;
  font-variant-numeric:tabular-nums;
}
html[data-skin="new"]:root th{
  background:var(--surface-2);
  color:var(--text-2);
  font-size:11.5px;
  font-weight:600;
  letter-spacing:.002em;
  text-transform:none;
  text-align:left;
  padding:9px 11px;
  border-bottom:1px solid var(--line);
  white-space:nowrap;
}
html[data-skin="new"]:root td{
  padding:9px 11px;
  border-bottom:1px solid var(--line-soft);
  vertical-align:middle;
}
html[data-skin="new"]:root tbody tr:last-child td{border-bottom:0}
html[data-skin="new"]:root tbody tr:hover td{background:var(--surface-2)}
html[data-skin="new"]:root td.num,
html[data-skin="new"]:root th.num{text-align:right;font-variant-numeric:tabular-nums}
html[data-skin="new"]:root .scroll{border-radius:var(--r-md)}

/* Product thumbnails */
html[data-skin="new"]:root .pimg{
  border-radius:var(--r-sm);
  background:var(--surface-2);
  border:1px solid var(--line-soft);
}

/* ---------- Controls ---------- */
html[data-skin="new"]:root .controls{
  background:var(--surface);
  border:1px solid var(--line-soft);
  border-radius:var(--r-lg);
  padding:12px 14px;
  gap:10px;
  box-shadow:var(--shadow-1);
}
html[data-skin="new"]:root .controls label{color:var(--muted);font-size:12px;font-weight:500}
html[data-skin="new"]:root select,
html[data-skin="new"]:root input[type=text],
html[data-skin="new"]:root input[type=search],
html[data-skin="new"]:root input[type=number],
html[data-skin="new"]:root input[type=date],
html[data-skin="new"]:root input[type=email],
html[data-skin="new"]:root input[type=password],
html[data-skin="new"]:root textarea,
html[data-skin="new"]:root .lwcard input,
html[data-skin="new"]:root .lwai-in{
  background:var(--surface-2);
  border:1px solid var(--line);
  border-radius:var(--r-md);
  color:var(--text);
  font-family:inherit;
  font-size:13px;
  padding:7px 10px;
  transition:border-color .14s ease,box-shadow .14s ease;
}
html[data-skin="new"]:root select:hover,
html[data-skin="new"]:root input:hover,
html[data-skin="new"]:root textarea:hover{border-color:var(--surface-3)}
html[data-skin="new"]:root select:focus,
html[data-skin="new"]:root input:focus,
html[data-skin="new"]:root textarea:focus{
  outline:none;
  border-color:var(--accent-line);
  box-shadow:0 0 0 3px var(--accent-soft);
}
html[data-skin="new"]:root ::placeholder{color:var(--muted);opacity:1}
html[data-skin="new"]:root input[type=checkbox],
html[data-skin="new"]:root input[type=radio]{accent-color:var(--accent-strong)}

html[data-skin="new"]:root .btn{
  background:var(--surface-2);
  border:1px solid var(--line);
  border-radius:var(--r-md);
  color:var(--text);
  font-family:inherit;
  font-size:13px;
  font-weight:500;
  letter-spacing:-.006em;
  padding:7px 12px;
  cursor:pointer;
  transition:background .14s ease,border-color .14s ease,transform .1s ease;
}
html[data-skin="new"]:root .btn:hover{background:var(--surface-3);border-color:var(--surface-3)}
html[data-skin="new"]:root .btn:active{transform:translateY(.5px)}
html[data-skin="new"]:root .btn.active,
html[data-skin="new"]:root .btn.on{
  background:var(--accent-soft);
  border-color:var(--accent-line);
  color:var(--accent-text);
}

/* ---------- Primary / filled buttons: interface state, so accent not green ---------- */
html[data-skin="new"]:root .btn.primary,
html[data-skin="new"]:root .btn.green,
html[data-skin="new"]:root .steps span.on{
  background:var(--accent-strong);
  border-color:var(--accent-strong);
  color:#fff;
  font-weight:550;
}
html[data-skin="new"]:root .btn.primary:hover,
html[data-skin="new"]:root .btn.green:hover{filter:brightness(1.08)}

/* ---------- Page-local surfaces that hardcoded a legacy grey ---------- */
html[data-skin="new"]:root .grp,
html[data-skin="new"]:root .det,
html[data-skin="new"]:root .ain{background:var(--surface-2);border-color:var(--line-soft);color:var(--text)}
html[data-skin="new"]:root .grp-hd:hover,
html[data-skin="new"]:root tr.q:hover td{background:var(--surface-3)}
html[data-skin="new"]:root .det td,
html[data-skin="new"]:root .det em,
html[data-skin="new"]:root .det table.md td{color:var(--text-2)}
html[data-skin="new"]:root .det table.md th{background:var(--surface-3);color:var(--text)}
html[data-skin="new"]:root .det code{background:var(--surface-3);border-color:var(--line)}
html[data-skin="new"]:root .det blockquote{border-left-color:var(--accent-line);color:var(--text-2)}

/* ---------- Data semantics (green/red are DATA, never chrome) ---------- */
html[data-skin="new"]:root .up,
html[data-skin="new"]:root .pos,
html[data-skin="new"]:root .good,
html[data-skin="new"]:root .ok{color:var(--pos)}
html[data-skin="new"]:root .down,
html[data-skin="new"]:root .neg,
html[data-skin="new"]:root .bad,
html[data-skin="new"]:root .short{color:var(--neg)}

/* ---------- AI chat widget (auth.js) ---------- */
html[data-skin="new"]:root #lwai-btn{
  background:var(--accent-strong);
  border:0;
  color:#fff;
  border-radius:99px;
  font-family:inherit;
  font-weight:550;
  font-size:13px;
  box-shadow:var(--shadow-2);
}
html[data-skin="new"]:root #lwai-panel{
  background:var(--surface);
  border:1px solid var(--line);
  border-radius:var(--r-lg);
  box-shadow:var(--shadow-pop);
}
html[data-skin="new"]:root .lwai-hd,
html[data-skin="new"]:root .lwai-foot{background:var(--surface-2);border-color:var(--line-soft)}
html[data-skin="new"]:root .lwai-hd b,
html[data-skin="new"]:root #lwai-title{color:var(--text);font-weight:600;letter-spacing:-.012em}
html[data-skin="new"]:root .lwai-a{background:var(--surface-2);border-color:var(--line-soft);color:var(--text);border-radius:var(--r-md)}
html[data-skin="new"]:root .lwai-a th{background:var(--surface-3);color:var(--text)}
html[data-skin="new"]:root .lwai-a td{color:var(--text-2)}
html[data-skin="new"]:root .lwai-a code{background:var(--surface-3);border-color:var(--line);border-radius:var(--r-sm)}
html[data-skin="new"]:root .lwai-li{background:var(--surface);border-color:var(--line-soft);border-radius:var(--r-md)}
html[data-skin="new"]:root .lwai-hist:hover{background:var(--surface-2);color:var(--text)}

/* ---------- Login / modal overlay ---------- */
html[data-skin="new"]:root #lwov{background:var(--bg)}
html[data-skin="new"]:root #lwov.lwmodal{background:rgba(6,6,10,.62);-webkit-backdrop-filter:blur(3px);backdrop-filter:blur(3px)}
html[data-skin="new"]:root .lwcard{box-shadow:var(--shadow-pop)}
html[data-skin="new"]:root .lwcard h2{color:var(--text)}

/* ============================================================================
   Component coverage pass — controls, badges and modals that live in the pages'
   own CSS. Two recurring problems are fixed here:
     1. Interface state was painted with SEMANTIC colour (green/cyan), the same
        conflation the palette work removed from the nav. State -> --accent.
     2. Status pills set `background: rgba(<legacy hex>,.15)` with a tokenised
        text colour, so under a new palette the tint and the text disagree.
        color-mix() re-derives the tint from the token; where it is unsupported
        the declaration is simply dropped and the page's own rgba still applies.
   ========================================================================== */

/* ---------- Date presets / segmented controls / multiselects ---------- */
html[data-skin="new"]:root .preset{padding:6px 11px}
html[data-skin="new"]:root .preset.active{
  background:var(--accent-soft);
  border-color:var(--accent-line);
  color:var(--accent-text);
  font-weight:550;
}
html[data-skin="new"]:root .seg{border-color:var(--line);border-radius:var(--r-md)}
html[data-skin="new"]:root .seg button{
  border:0;
  background:var(--surface-2);
  color:var(--text-2);
  font-family:inherit;
  font-weight:500;
  padding:7px 15px;
}
html[data-skin="new"]:root .seg button:hover{background:var(--surface-3);color:var(--text)}
html[data-skin="new"]:root .seg button.on{background:var(--accent-strong);color:#fff;font-weight:550}

html[data-skin="new"]:root .ms-btn{
  background:var(--surface-2);          /* was var(--bg): no contrast against the controls bar */
  border-color:var(--line);
  border-radius:var(--r-md);
  color:var(--text);
  font-family:inherit;
  font-size:13px;
}
html[data-skin="new"]:root .ms-btn:hover{background:var(--surface-3);border-color:var(--surface-3)}
html[data-skin="new"]:root .ms-panel{
  background:var(--surface);
  border-color:var(--line);
  border-radius:var(--r-lg);
  box-shadow:var(--shadow-pop);
  padding:5px;
}
html[data-skin="new"]:root .ms-row{border-radius:var(--r-sm);padding:6px 9px}
html[data-skin="new"]:root .ms-row:hover{background:var(--surface-2)}
html[data-skin="new"]:root .steps span{background:var(--surface-2);border-color:var(--line);border-radius:999px}
html[data-skin="new"]:root .steps span.done{color:var(--pos);border-color:color-mix(in srgb,var(--pos) 45%,transparent)}

/* ---------- Status pills ---------- */
html[data-skin="new"]:root .badge,
html[data-skin="new"]:root .tag{
  font-weight:600;
  letter-spacing:0;
  border-radius:999px;
}
html[data-skin="new"]:root .badge{font-size:11px;padding:2px 9px}
html[data-skin="new"]:root .b-rep,
html[data-skin="new"]:root .b-ship,
html[data-skin="new"]:root .badge.admin,
html[data-skin="new"]:root .badge.active,
html[data-skin="new"]:root .tag.a{background:color-mix(in srgb,var(--pos) 16%,transparent);color:var(--pos-ink)}
html[data-skin="new"]:root .b-ok,
html[data-skin="new"]:root .b-closed,
html[data-skin="new"]:root .tag.s{background:color-mix(in srgb,var(--wm) 17%,transparent);color:var(--wm-ink)}
html[data-skin="new"]:root .b-oos,
html[data-skin="new"]:root .tag.v{background:color-mix(in srgb,var(--brand) 17%,transparent);color:var(--brand-ink)}
html[data-skin="new"]:root .b-low,
html[data-skin="new"]:root .b-recv{background:color-mix(in srgb,var(--warn) 17%,transparent);color:var(--warn-ink)}
html[data-skin="new"]:root .b-unp,
html[data-skin="new"]:root .badge.inact{background:color-mix(in srgb,var(--neg) 16%,transparent);color:var(--neg-ink)}
html[data-skin="new"]:root .b-new{background:color-mix(in srgb,var(--purple) 18%,transparent);color:var(--purple-ink)}
html[data-skin="new"]:root .b-non,
html[data-skin="new"]:root .b-work,
html[data-skin="new"]:root .badge.member{background:var(--surface-3);color:var(--pill-ink)}
html[data-skin="new"]:root .cov-red{color:var(--neg)}
html[data-skin="new"]:root .cov-amber{color:var(--warn)}
html[data-skin="new"]:root .cov-ok{color:var(--pos)}
html[data-skin="new"]:root .warn{color:var(--warn)}
html[data-skin="new"]:root .err{color:var(--neg)}
html[data-skin="new"]:root .btn.danger{color:var(--neg);border-color:color-mix(in srgb,var(--neg) 38%,var(--line))}
html[data-skin="new"]:root .btn.danger:hover{background:color-mix(in srgb,var(--neg) 12%,transparent);border-color:var(--neg)}

/* ---------- Modals / overlays ---------- */
html[data-skin="new"]:root .ov{
  background:rgba(8,8,14,.60);
  -webkit-backdrop-filter:blur(3px);
  backdrop-filter:blur(3px);
}
html[data-skin="new"]:root .modal{
  background:var(--surface);
  border-color:var(--line);
  border-radius:var(--r-lg);
  box-shadow:var(--shadow-pop);
}
html[data-skin="new"]:root .modal .mh,
html[data-skin="new"]:root .modal .mf{border-color:var(--line-soft);background:var(--surface-2)}
html[data-skin="new"]:root .modal .mh b,
html[data-skin="new"]:root .modal h3{letter-spacing:-.014em;font-weight:600}
html[data-skin="new"]:root .x{color:var(--text-2);border-radius:var(--r-sm)}
/* ⚠️ listings' thumbnail remove button is white-on-black over a product photo.
   The generic .x rule above (0,2,1) outranks its own `.thumb .x` (0,2,0) and
   turned the glyph grey-on-black. Restore it explicitly. */
html[data-skin="new"]:root .thumb .x{color:#fff}
/* ai-log hardcodes a VS-Code blue for SQL, which is 1.3:1 on a light surface.
   --wm-ink is blue in both themes and dark enough in light mode. */
html[data-skin="new"]:root .sql{color:var(--wm-ink)}
html[data-skin="new"]:root .x:hover{color:var(--text);background:var(--surface-3)}
html[data-skin="new"]:root .spin{border-color:var(--line);border-top-color:var(--accent)}

/* ---------- Row labels / links in data grids ---------- */
html[data-skin="new"]:root .nm a{color:var(--text);font-weight:500}
html[data-skin="new"]:root .nm a:hover{color:var(--accent-text)}
html[data-skin="new"]:root .nm .c{color:var(--muted);font-size:11.5px}
html[data-skin="new"]:root .mut,
html[data-skin="new"]:root .gate{color:var(--muted)}
html[data-skin="new"]:root .dn{color:var(--neg)}
html[data-skin="new"]:root .fld label{color:var(--muted);font-size:12px;font-weight:500}

/* ============================================================================
   Per-page components. Same three problems recur across every page, so they are
   grouped by problem rather than by page:
     A. `background:var(--bg)` on a control — under this palette --bg is the PAGE
        ground, and the control sits inside a --surface card, so it disappears.
     B. selection/active state painted with --accent (too light for white text)
        or with semantic green. State -> --accent-strong / --accent.
     C. pills tinted with frozen legacy rgba while their label follows a token.
   Product photography keeps its white plate throughout — that is correct.
   ========================================================================== */

/* ---------- A. controls that used the page ground ---------- */
html[data-skin="new"]:root .pkr input,
html[data-skin="new"]:root .ovform input,
html[data-skin="new"]:root .boxrow input,
html[data-skin="new"]:root .head .chip{
  background:var(--surface-2);
  border-color:var(--line);
  color:var(--text);
  border-radius:var(--r-md);
}
html[data-skin="new"]:root .prod{
  background:var(--surface-2);
  border-color:var(--line-soft);
  border-radius:var(--r-md);
}
html[data-skin="new"]:root .prod:hover{border-color:var(--accent-line)}
html[data-skin="new"]:root .prod.sel{
  border-color:var(--accent);
  box-shadow:0 0 0 1px var(--accent) inset;
}
html[data-skin="new"]:root .sql,
html[data-skin="new"]:root .res{background:var(--surface-2);border-color:var(--line-soft);border-radius:var(--r-md)}
html[data-skin="new"]:root .selbar{
  background:color-mix(in srgb,var(--surface) 92%,transparent);
  -webkit-backdrop-filter:blur(10px);
  backdrop-filter:blur(10px);
  border-top:1px solid var(--line);
}

/* ---------- B. selection + active state ---------- */
html[data-skin="new"]:root .daybtn{background:var(--surface-2);border-color:var(--line);border-radius:var(--r-md)}
html[data-skin="new"]:root .daybtn:hover{background:var(--surface-3);border-color:var(--surface-3)}
html[data-skin="new"]:root .daybtn.active,
html[data-skin="new"]:root .daybtn.cmp.active{        /* was --accent w/ dark ink, and semantic green */
  background:var(--accent-strong);
  border-color:var(--accent-strong);
  color:#fff;
  font-weight:550;
}
html[data-skin="new"]:root .optcard{border-color:var(--line-soft);border-radius:var(--r-md)}
html[data-skin="new"]:root .optcard:hover{border-color:var(--accent-line)}
html[data-skin="new"]:root .optcard.sel{             /* selection is state, not "good" */
  border-color:var(--accent);
  background:var(--accent-soft);
}
html[data-skin="new"]:root .scard{background:var(--surface-2);border-color:var(--line-soft);border-radius:var(--r-md)}
html[data-skin="new"]:root .scard:hover{border-color:var(--line)}
html[data-skin="new"]:root .scard.on{border-color:var(--accent-line);background:var(--accent-soft)}
html[data-skin="new"]:root .tabbtn.active{border-color:var(--accent-line);color:var(--accent-text)}
html[data-skin="new"]:root .pkr-row{border-color:var(--line-soft)}
html[data-skin="new"]:root .pkr-row.act,
html[data-skin="new"]:root .pkr-row:hover{background:var(--surface-2)}
html[data-skin="new"]:root .pkrdd{
  background:var(--surface);
  border-color:var(--line);
  border-radius:var(--r-lg);
  box-shadow:var(--shadow-pop);
}
/* checkbox accents were semantic green */
html[data-skin="new"]:root .adtoggles input,
html[data-skin="new"]:root .ms-row input{accent-color:var(--accent-strong)}

/* ---------- C. pills on frozen legacy tints ---------- */
html[data-skin="new"]:root .pill{border-radius:999px;font-weight:600;letter-spacing:0}
html[data-skin="new"]:root .pill.v,
html[data-skin="new"]:root .tag.vendor,
html[data-skin="new"]:root .pill.pending{background:color-mix(in srgb,var(--brand) 17%,transparent);color:var(--brand-ink)}
html[data-skin="new"]:root .pill.s,
html[data-skin="new"]:root .tag.seller{background:color-mix(in srgb,var(--wm) 17%,transparent);color:var(--wm-ink)}
html[data-skin="new"]:root .pill.ok,
html[data-skin="new"]:root .pill.shipped,
html[data-skin="new"]:root .tag.combined,
html[data-skin="new"]:root .b-sent{background:color-mix(in srgb,var(--pos) 16%,transparent);color:var(--pos-ink)}
html[data-skin="new"]:root .pill.no,
html[data-skin="new"]:root .pill.bad,
html[data-skin="new"]:root .b-error{background:color-mix(in srgb,var(--neg) 16%,transparent);color:var(--neg-ink)}
html[data-skin="new"]:root .pill.lo{background:color-mix(in srgb,var(--warn) 17%,transparent);color:var(--warn-ink)}
html[data-skin="new"]:root .b-queued,
html[data-skin="new"]:root .b-expired{background:var(--surface-3);color:var(--pill-ink)}
html[data-skin="new"]:root .you{background:color-mix(in srgb,var(--wm) 17%,transparent);color:var(--wm-ink)}
html[data-skin="new"]:root .btn.ai,
html[data-skin="new"]:root .sugg{
  background:color-mix(in srgb,var(--purple) 12%,transparent);
  border-color:color-mix(in srgb,var(--purple) 45%,transparent);
  color:var(--purple-ink);
}
html[data-skin="new"]:root .btn.warn{color:var(--warn);border-color:color-mix(in srgb,var(--warn) 40%,var(--line))}

/* ---------- Hardcoded greys / accent2 links that predate the tokens ---------- */
html[data-skin="new"]:root .rs .ttl,
html[data-skin="new"]:root .p .asin a,
html[data-skin="new"]:root .setcmp,
html[data-skin="new"]:root .who{color:var(--accent-text)}
html[data-skin="new"]:root .zero,
html[data-skin="new"]:root .p .noimg,
html[data-skin="new"]:root .when,
html[data-skin="new"]:root .tiny,
html[data-skin="new"]:root .hint,
html[data-skin="new"]:root .whcell,
html[data-skin="new"]:root .qty,
html[data-skin="new"]:root .foot,
html[data-skin="new"]:root .ovhint,
html[data-skin="new"]:root .grp-n,
html[data-skin="new"]:root .pasin,
html[data-skin="new"]:root .rngwrap,
html[data-skin="new"]:root .split,
html[data-skin="new"]:root .meta{color:var(--muted)}
html[data-skin="new"]:root .rs .noimg{background:var(--surface-3);color:var(--text-2)}
html[data-skin="new"]:root .msg.err{color:var(--neg)}
html[data-skin="new"]:root .msg.ok{color:var(--pos)}
html[data-skin="new"]:root .cnt.warn{color:var(--warn)}
html[data-skin="new"]:root .cnt.over{color:var(--neg)}

/* ---------- Uppercase micro-labels: the last of the generated-dashboard tell ---------- */
html[data-skin="new"]:root .fldhdr label,
html[data-skin="new"]:root .sc-l{
  text-transform:none;
  letter-spacing:0;
  font-size:12px;
  font-weight:500;
  color:var(--muted);
}

/* ---------- Page-specific surfaces ---------- */
html[data-skin="new"]:root .head{background:var(--surface);border-color:var(--line-soft);border-radius:var(--r-lg)}
html[data-skin="new"]:root .kpi.hero{
  background:linear-gradient(135deg,var(--surface),color-mix(in srgb,var(--accent) 12%,var(--surface)));
  border-color:var(--accent-line);
}
html[data-skin="new"]:root .ovwrap{
  background:rgba(8,8,14,.60);
  -webkit-backdrop-filter:blur(3px);
  backdrop-filter:blur(3px);
}
html[data-skin="new"]:root .ovbox{
  background:var(--surface);
  border-color:var(--line);
  border-radius:var(--r-lg);
  box-shadow:var(--shadow-pop);
}
html[data-skin="new"]:root .ovform label{color:var(--muted)}
/* Financials: the frozen first column must match the surface it floats over */
html[data-skin="new"]:root .mtx td:first-child{background:var(--surface)}
html[data-skin="new"]:root .mtx th:first-child{background:var(--surface-2)}
html[data-skin="new"]:root .mtx tr.tot td:first-child{background:color-mix(in srgb,var(--warn) 10%,var(--surface))}

/* ============================================================================
   SIDEBAR NAVIGATION (>= 1024px only)
   ----------------------------------------------------------------------------
   Done entirely in CSS. No page markup changes, so auth.js's injectNavTabs,
   enforcePageAccess (which keys off filenames) and the post-render enhancer
   (which keys off .asinline / tr[data-asin]) are all untouched, and the whole
   thing disappears with the skin.

   The header element becomes a fixed left rail and `body` gets a matching
   padding-left. Position:fixed resolves against the viewport, not the padded
   body, so the rail still sits flush at x=0 — and modals/overlays (fixed,
   inset:0) still cover the full screen including the rail, which is correct.

   Below 1024px nothing here applies: the existing top bar and the <=760px
   hamburger drawer in auth.js keep working exactly as they do today.
   ========================================================================== */
@media (min-width:1024px){
  html[data-skin="new"]:root{--rail:238px}
  html[data-skin="new"]:root body{padding-left:var(--rail)}

  html[data-skin="new"]:root .hdr{
    position:fixed; left:0; top:0; bottom:0; width:var(--rail);
    padding:0; z-index:150;
    background:var(--surface);
    border-bottom:0;
    border-right:1px solid var(--line-soft);
    -webkit-backdrop-filter:none; backdrop-filter:none;
    overflow:visible;          /* MUST stay visible or the fly-out menus clip */
  }
  html[data-skin="new"]:root .hdr-in{
    flex-direction:column; align-items:stretch; flex-wrap:nowrap;
    height:100%; max-width:none; margin:0; gap:2px;
    padding:20px 13px 14px;
  }
  html[data-skin="new"]:root .hdr .logo{
    height:26px; width:auto; align-self:flex-start; margin:0 6px 22px; opacity:.95;
  }

  /* Nav fills the top; margin-bottom:auto pushes every later child to the
     bottom regardless of which utilities a given page actually has. */
  html[data-skin="new"]:root .hdr .tabs{
    flex-direction:column; align-items:stretch; width:100%; gap:1px;
    margin-bottom:auto;
  }
  html[data-skin="new"]:root .lwgrp{display:block; width:100%}
  html[data-skin="new"]:root .lwgbtn,
  html[data-skin="new"]:root .hdr .tabs>a{
    display:flex; width:100%; box-sizing:border-box;
    justify-content:flex-start; text-align:left;
    padding:8px 11px; font-size:13.5px; border-radius:var(--r-md);
  }
  html[data-skin="new"]:root .lwcar{margin-left:auto; opacity:.6}
  /* a rail reads better with a leading marker than a filled pill */
  html[data-skin="new"]:root .hdr .tabs>a.active,
  html[data-skin="new"]:root .lwgbtn.active{
    background:var(--accent-soft);
    border-color:transparent;
    box-shadow:inset 2px 0 0 var(--accent);
    color:var(--accent-text);
  }

  /* Sub-pages render INLINE, not as fly-outs. A fly-out is a top-nav idiom; a
     rail has the vertical room and the whole IA is only 6 groups / 10 children,
     so showing it all is both cheaper to scan and one click instead of two.
     (The group button itself still navigates to its first child — that is what
     auth.js wires it to do — so it reads as a section label, not a disclosure.) */
  html[data-skin="new"]:root .lwgrp>.lwgbtn{
    background:none; border:0; box-shadow:none;
    color:var(--muted); font-size:11.5px; font-weight:600;
    padding:15px 11px 4px;
  }
  html[data-skin="new"]:root .lwgrp>.lwgbtn:hover{background:none; color:var(--text-2)}
  html[data-skin="new"]:root .lwgrp>.lwgbtn.active{background:none; box-shadow:none; color:var(--muted)}
  html[data-skin="new"]:root .lwgrp>.lwgbtn .lwcar{display:none}
  html[data-skin="new"]:root .lwgrp>.lwmenu{
    display:flex; position:static; margin:0; padding:0; min-width:0; gap:1px;
    background:none; border:0; box-shadow:none;
  }
  /* icons: stroke-only, currentColor, so they follow theme + active state */
  html[data-skin="new"]:root .lwni{width:16px; height:16px; flex:0 0 16px; opacity:.9}
  html[data-skin="new"]:root .hdr .tabs>a,
  html[data-skin="new"]:root .lwgbtn{gap:9px; align-items:center}
  /* the group header is a section label when expanded; its children carry the
     icons, so showing one here too is noise. It returns in the mini rail. */
  html[data-skin="new"]:root .lwgrp>.lwgbtn>.lwni{display:none}
  html[data-skin="new"]:root .hdr .tabs .lwmenu a{
    display:flex; align-items:center; gap:9px;
    padding:7px 11px 7px 14px; border-radius:var(--r-md);
  }
  html[data-skin="new"]:root .hdr .tabs .lwmenu a.active{
    background:var(--accent-soft); color:var(--accent-text);
    box-shadow:inset 2px 0 0 var(--accent); font-weight:550;
  }
  /* the nav list may scroll; the account menu is OUTSIDE it, so its fly-out
     is unaffected — .hdr itself must still never get an overflow (it clips). */
  html[data-skin="new"]:root .hdr .tabs{overflow-y:auto; min-height:0}

  /* Account is the only remaining fly-out; it opens up-and-right from the foot. */
  html[data-skin="new"]:root .lwmenu{
    top:-4px; left:100%; right:auto; margin-left:10px; min-width:198px;
  }
  html[data-skin="new"]:root .lwacct>.lwmenu{
    left:100%; right:auto; top:auto; bottom:-4px;
  }

  /* Bottom cluster: export, account, then the timestamp. */
  html[data-skin="new"]:root .hdr-in #lwxls{order:1; width:100%; margin:8px 0 0}
  html[data-skin="new"]:root .hdr-in .lwacct{order:2; width:100%; margin:4px 0 0}
  html[data-skin="new"]:root .lwacct>.lwgbtn{width:100%}
  html[data-skin="new"]:root .hdr-in .upd{
    order:3; margin:10px 6px 0; padding-top:10px;
    border-top:1px solid var(--line-soft);
    white-space:normal; line-height:1.4; font-size:11px;
  }

  /* Content column */
  html[data-skin="new"]:root .wrap{max-width:1240px; padding-top:26px}

  /* ---- collapse / expand ----------------------------------------------
     Collapsed slides the rail out and drops the body padding, so the wide
     grids (Financials P&L, Sales Detail) get the full 238px back. There is
     no icon set in this app, so an icon-only rail is not an option; the
     toggle stays pinned at the screen edge as the way back. */
  html[data-skin="new"]:root .hdr{transition:transform .18s ease}
  html[data-skin="new"]:root body{transition:padding-left .18s ease}
  html[data-skin="new"][data-rail="mini"]:root{--rail:64px}
  /* the logo is hidden here, so reserve the top strip for the fixed toggle
     or the first icon renders underneath it */
  html[data-skin="new"][data-rail="mini"]:root .hdr-in{padding:52px 8px 14px}
  html[data-skin="new"][data-rail="mini"]:root .hdr .logo{display:none}
  html[data-skin="new"][data-rail="mini"]:root .lwnl,
  html[data-skin="new"][data-rail="mini"]:root .lwcar,
  html[data-skin="new"][data-rail="mini"]:root .hdr-in .upd{display:none}
  html[data-skin="new"][data-rail="mini"]:root .hdr .tabs>a,
  html[data-skin="new"][data-rail="mini"]:root .lwgrp>.lwgbtn,
  html[data-skin="new"][data-rail="mini"]:root .hdr-in #lwxls,
  html[data-skin="new"][data-rail="mini"]:root .lwacct>.lwgbtn{
    justify-content:center; padding:10px 0; font-size:0; gap:0;
  }
  html[data-skin="new"][data-rail="mini"]:root .lwgrp>.lwgbtn{color:var(--text-2); margin-top:6px}
  html[data-skin="new"][data-rail="mini"]:root .lwgrp>.lwgbtn>.lwni{display:block}
  html[data-skin="new"][data-rail="mini"]:root .lwgrp>.lwgbtn.active{
    background:var(--accent-soft); color:var(--accent-text); box-shadow:inset 2px 0 0 var(--accent);
  }
  /* children fold back into a fly-out. ⚠️ .tabs must drop its scroll here or it clips them. */
  html[data-skin="new"][data-rail="mini"]:root .hdr .tabs{overflow:visible}
  html[data-skin="new"][data-rail="mini"]:root .lwgrp>.lwmenu{
    position:absolute; display:none; top:-4px; left:100%; margin-left:10px; min-width:202px;
    background:var(--surface); border:1px solid var(--line); border-radius:var(--r-lg);
    box-shadow:var(--shadow-pop); padding:5px;
  }
  html[data-skin="new"][data-rail="mini"]:root .lwgrp:hover>.lwmenu,
  html[data-skin="new"][data-rail="mini"]:root .lwgrp.lwo>.lwmenu{display:flex}
  html[data-skin="new"][data-rail="mini"]:root .lwmenu .lwnl{display:inline}
  html[data-skin="new"][data-rail="mini"]:root .hdr .tabs .lwmenu a{font-size:13.5px; padding:8px 11px}

  html[data-skin="new"]:root #lwrail{
    position:fixed; top:14px; left:calc(var(--rail) - 34px); z-index:200;
    display:inline-flex; align-items:center; justify-content:center;
    width:26px; height:26px; padding:0;
    background:var(--surface-2); border:1px solid var(--line); color:var(--text-2);
    border-radius:var(--r-sm); cursor:pointer; font-size:12px; line-height:1;
    font-family:inherit; transition:left .18s ease,background .14s ease;
  }
  html[data-skin="new"]:root #lwrail:hover{background:var(--surface-3); color:var(--text)}
  html[data-skin="new"]:root #lwrail::before{content:'\00AB'}
  html[data-skin="new"][data-rail="mini"]:root #lwrail{left:19px}
  html[data-skin="new"][data-rail="mini"]:root #lwrail::before{content:'\00BB'}
}
/* the toggle is meaningless outside the rail layout */
@media (max-width:1023px){ html[data-skin="new"]:root #lwrail{display:none} }

/* ---------- Motion ---------- */
@media (prefers-reduced-motion:reduce){
  html[data-skin="new"]:root *{transition:none!important;animation:none!important}
}

/* ---------- Mobile ---------- */
@media (max-width:640px){
  html[data-skin="new"]:root .wrap{padding:var(--sp-4) var(--sp-4) 48px}
  html[data-skin="new"]:root .hdr-in{padding-left:var(--sp-4);padding-right:var(--sp-4);gap:var(--sp-3)}
  html[data-skin="new"]:root .card{padding:var(--sp-4);border-radius:var(--r-md)}
  html[data-skin="new"]:root .kpi .val{font-size:22px}
  html[data-skin="new"]:root h1{font-size:21px}
  html[data-skin="new"]:root th,
  html[data-skin="new"]:root td{padding:8px 9px;font-size:12.5px}
}