/* B1W-UI-V2 -- the redesigned admin shell and theme.

   Loaded by base.html only when the v2 design is on (settings.UI_V2_DEFAULT, or the per-browser
   cookie wx_ui=v2). In that mode base.html drops its classic <style> block entirely, so this file
   is the whole stylesheet: it re-implements every shared class the pages use (.card, .btn, .table,
   .pill, .drawer, .toast ...) and keeps the classic token NAMES (--bg, --panel, --text, --muted,
   --primary ...) because ~200 templates reference them inline. Page bodies are not changed.

   Sections: 1 tokens  2 classic-token aliases  3 base  4 shell  5 shared components
             6 light-mode readability nets  7 responsive  8 embed/print.

   Light theme is deliberately NOT white: Oren found the white screens glaring (26 Sep 2026), so
   the canvas is a cool grey and cards sit one step lighter, never #fff. Text pairs are AA-checked
   against the darkest surface they appear on. */

/* ============ 1. tokens ============ */
:root{
  --font:"Nunito","Rubik",system-ui,-apple-system,"Segoe UI",sans-serif;
  --mono:ui-monospace,"Cascadia Mono",SFMono-Regular,Menlo,Consolas,monospace;
  --fs:14px; --lh:1.5; --ls:0;
  --pri:#6C58EA; --pri-2:#5A45D8; --brand:linear-gradient(145deg,#8E7DFF,#5B43E8);
  --grad-ai:linear-gradient(120deg,#0091FF 0%,#7612FA 50%,#FA12E3 100%);
  --blue:#1090E0; --green:#0E9F6E; --red:#E0445C; --orange:#E8741B; --yellow:#E5A800; --teal:#0F9D9F; --pink:#E3439F; --gray:#87909E; --purple:#7B68EE;
  --r:14px; --r-sm:10px;
  --rail-w:68px; --side-w:248px; --top-h:52px; --tab-h:60px;

  /* light (default) -- a DIMMED light theme. 28 Sep 2026 Oren, twice: the white version is far too
     bright, glare makes the page hard to read and to focus on, so the ramp was taken down to mid
     grey (cards #D9DCE2). Later the same day: that was a little too dark -- 10% brighter. The
     backgrounds below give off 10% more light than that dim (linear luminance x1.10); inks are
     unchanged. Every text pair, status inks on their tinted chips included, clears AA 4.5:1 on the
     darkest surface it appears on (checked). A user can shift this ramp two steps either way with
     the Background picker (data-bg, below). */
  --canvas:#D4D8E0; --surface:#E2E5EC; --surface-2:#DADDE4; --side:#CDD1DA; --top:#DEE1E8;
  --rail:#1E2032; --rail-ink:#A6A9BC;
  --line:#C4C9D4; --line-2:#B2B9C5;
  --ink:#262A36; --ink-2:#3E4454; --ink-3:#474D5C;
  --hover:#D2D6DF; --sel:#D4CEF0; --sel-ink:#3F2DB0; --input:#E9EBF0;
  /* status inks clear 4.5:1 on their own tinted chip backgrounds, not only on the card */
  --pri-ink:#4A36BF; --gain:#045C3E; --loss:#931C30; --warn-ink:#684500; --info-ink:#074D84;
  --teal-ink:#075A5C; --pink-ink:#921E5F; --on-pri:#FFFFFF;
  --gain-bg:rgba(6,122,82,.10); --loss-bg:rgba(184,40,63,.09); --warn-bg-2:rgba(200,140,0,.13); --info-bg:rgba(16,144,224,.10);
  --shadow-1:0 1px 2px rgba(22,28,45,.05),0 1px 1px rgba(22,28,45,.03);
  --shadow-2:0 18px 40px -12px rgba(30,20,90,.24),0 2px 6px rgba(16,24,40,.07);
  --scrim:rgba(18,20,34,.38);
  color-scheme:light;
}
[data-theme="dark"]{
  --canvas:#15161C; --surface:#1D1E26; --surface-2:#23252E; --side:#191A21; --top:#191A21;
  --rail:#0D0E14; --rail-ink:#8F93A7;
  --line:#2C2E37; --line-2:#3A3D48;
  --ink:#E8E9EE; --ink-2:#B9BDC8; --ink-3:#9AA0AD;
  --hover:#2A2C35; --sel:#2D2850; --sel-ink:#BCB2FF; --input:#191A21;
  --pri-ink:#A99CFF; --gain:#3DD39A; --loss:#FF7A8E; --warn-ink:#F2C14E; --info-ink:#6CC0FF;
  --teal-ink:#4FD1D3; --pink-ink:#FF8AC6; --on-pri:#14151B;
  --gain-bg:rgba(61,211,154,.12); --loss-bg:rgba(255,122,142,.12); --warn-bg-2:rgba(242,193,78,.13); --info-bg:rgba(108,192,255,.12);
  --shadow-1:0 1px 2px rgba(0,0,0,.35);
  --shadow-2:0 0 0 1px rgba(255,255,255,.07),0 18px 40px -12px rgba(0,0,0,.7),0 2px 8px rgba(0,0,0,.35);
  --scrim:rgba(0,0,0,.55);
  color-scheme:dark;
}
/* Font picker (user menu). Hebrew text falls back to Rubik, the only one here with Hebrew glyphs. */
html[data-font="nunito"]{--font:"Nunito","Rubik",system-ui,sans-serif;--fs:14px;--ls:0}
html[data-font="mplus"]{--font:"M PLUS Rounded 1c","Rubik",system-ui,sans-serif;--fs:13.5px;--ls:0}
html[data-font="rubik"]{--font:"Rubik",system-ui,sans-serif;--fs:13.5px;--ls:0}
html[data-font="figtree"]{--font:"Figtree","Rubik",system-ui,sans-serif;--fs:14px;--ls:0}
html[data-font="inter"]{--font:"Inter","Rubik",system-ui,sans-serif;--fs:13.5px;--ls:-.005em}
/* Background picker (user menu): two steps darker or lighter than the theme's default, per browser.
   Only the background ramp moves; inks stay put. Light steps are x1.05 luminance, dark x1.20; every
   level keeps each text pair, status chips included, at AA 4.5:1 or better (checked per level).
   The light rules exclude dark so they cannot outrank [data-theme="dark"]. */
html[data-bg="-2"]:not([data-theme="dark"]){--canvas:#CBCFD7;--surface:#D8DBE2;--surface-2:#D1D4DA;--side:#C4C8D1;--top:#D5D7DE;--line:#BCC0CB;--line-2:#AAB1BD;--hover:#C9CDD6;--sel:#CBC5E6;--input:#DFE1E6}
html[data-bg="-1"]:not([data-theme="dark"]){--canvas:#CFD3DB;--surface:#DDE0E7;--surface-2:#D5D8DF;--side:#C9CDD5;--top:#D9DCE3;--line:#C0C5CF;--line-2:#AEB5C1;--hover:#CDD1DA;--sel:#CFCAEB;--input:#E4E6EB}
html[data-bg="1"]:not([data-theme="dark"]){--canvas:#D9DDE5;--surface:#E7EAF1;--surface-2:#DFE2E9;--side:#D1D6DF;--top:#E3E6ED;--line:#C8CDD9;--line-2:#B6BDC9;--hover:#D7DBE4;--sel:#D9D3F5;--input:#EEF0F5}
html[data-bg="2"]:not([data-theme="dark"]){--canvas:#DDE2EA;--surface:#ECEFF6;--surface-2:#E4E7EE;--side:#D6DAE4;--top:#E8EBF2;--line:#CDD2DD;--line-2:#BAC1CE;--hover:#DBDFE9;--sel:#DDD7FB;--input:#F3F5FB}
html[data-bg="-2"][data-theme="dark"]{--canvas:#101116;--surface:#17181F;--surface-2:#1C1E26;--side:#13141A;--top:#13141A;--line:#24262D;--line-2:#30323C;--hover:#22242C;--sel:#252043;--input:#13141A}
html[data-bg="-1"][data-theme="dark"]{--canvas:#121319;--surface:#1A1B22;--surface-2:#1F212A;--side:#16171E;--top:#16171E;--line:#282A32;--line-2:#353842;--hover:#262830;--sel:#292449;--input:#16171E}
html[data-bg="1"][data-theme="dark"]{--canvas:#18191F;--surface:#20212A;--surface-2:#272933;--side:#1C1D25;--top:#1C1D25;--line:#31333C;--line-2:#40434F;--hover:#2E313A;--sel:#322C57;--input:#1C1D25}
html[data-bg="2"][data-theme="dark"]{--canvas:#1B1C23;--surface:#24252F;--surface-2:#2B2D38;--side:#1F2129;--top:#1F2129;--line:#363842;--line-2:#464956;--hover:#333640;--sel:#37315F;--input:#1F2129}

/* ============ 2. classic token names (templates use these inline) ============ */
:root,[data-theme="dark"]{
  --bg:var(--canvas); --panel:var(--surface); --card:var(--surface); --card2:var(--surface-2);
  --border:var(--line); --text:var(--ink); --muted:var(--ink-2); --muted2:var(--ink-3);
  --primary:var(--pri-ink); --primary-hover:var(--pri-2); --primary2:color-mix(in srgb,var(--pri) 11%,transparent);
  --success:var(--gain); --success-bg:var(--gain-bg);
  --warn:var(--warn-ink); --warn-bg:var(--warn-bg-2);
  --danger:var(--loss); --danger-bg:var(--loss-bg);
  --shadow:var(--shadow-1); --shadow-lg:var(--shadow-2);
  --radius:var(--r); --radius-sm:var(--r-sm);
  /* names a few pages use with a dark-theme fallback (var(--text2,#cbd5e1)) that no sheet defined */
  --text2:var(--ink-2); --fg:var(--ink); --accent:var(--pri-ink); --warning:var(--warn-ink); --bg2:var(--surface-2); --bg-subtle:var(--surface-2);
  --ring:0 0 0 3px color-mix(in srgb,var(--pri) 24%,transparent);
}

/* ============ 3. base ============ */
*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;text-size-adjust:100%}
body{margin:0;font-family:var(--font);font-size:var(--fs);line-height:var(--lh);letter-spacing:var(--ls);color:var(--ink);background:var(--canvas);-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;font-variant-numeric:tabular-nums}
button,input,select,textarea{font-family:inherit;letter-spacing:inherit}
a{color:var(--pri-ink);text-decoration:none}
a:hover{text-decoration:underline;text-underline-offset:2px}
code,pre,kbd,samp{font-family:var(--mono);font-size:.92em}
pre{max-width:100%;overflow:auto}
img,video,canvas,svg{max-width:100%}
h1,h2,h3,h4{color:var(--ink);letter-spacing:-.015em;line-height:1.25}
h1{font-weight:800} h2,h3{font-weight:700}
strong,b{font-weight:680}
hr{border:0;border-top:1px solid var(--line)}
:focus-visible{outline:2px solid var(--pri);outline-offset:2px}
::selection{background:color-mix(in srgb,var(--pri) 28%,transparent)}
[data-theme="dark"]{scrollbar-color:#3A3D48 transparent}
[hidden]{display:none!important}
.h1{font-size:24px;font-weight:800;letter-spacing:-.025em;margin:0}
.h2{font-size:15px;font-weight:700;letter-spacing:-.01em;margin:0}
.text-muted{color:var(--ink-2)} .text-muted2,.muted{color:var(--ink-3)}
.text-mono{font-family:var(--mono)}
.wx-i{width:18px;height:18px;fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round;flex:none}

/* ============ 4. shell ============ */
.app:not(.wx-app){display:block;min-height:100vh}
.app:not(.wx-app) > .main{display:flex;flex-direction:column;min-width:0}
.wx-app{display:grid;grid-template-columns:var(--rail-w) var(--side-w) minmax(0,1fr);min-height:100vh;
  background:linear-gradient(90deg,var(--rail) 0 var(--rail-w),var(--side) var(--rail-w) calc(var(--rail-w) + var(--side-w)),var(--canvas) 0)}
.wx-app.wx-side-off{grid-template-columns:var(--rail-w) minmax(0,1fr);background:linear-gradient(90deg,var(--rail) 0 var(--rail-w),var(--canvas) 0)}
.wx-app.wx-side-off .wx-side{display:none}

/* rail */
.wx-rail{background:var(--rail);color:var(--rail-ink);display:flex;flex-direction:column;align-items:center;gap:2px;padding:12px 0 16px;position:sticky;top:0;height:100vh;height:100dvh;overflow-y:auto;scrollbar-width:none;z-index:40}
.wx-rail::-webkit-scrollbar{display:none}
.wx-logo{width:36px;height:36px;border-radius:11px;background:var(--brand);display:grid;place-items:center;margin-bottom:10px;flex:none;color:#fff;box-shadow:inset 0 1px 0 rgba(255,255,255,.22),0 4px 12px -5px rgba(91,67,232,.75)}
.wx-logo svg{width:24px;height:24px}
.wx-logo:hover{text-decoration:none}
.wx-logo--sm{width:28px;height:28px;border-radius:8px;margin:0;box-shadow:inset 0 1px 0 rgba(255,255,255,.22)}
.wx-logo--sm svg{width:19px;height:19px}
.wx-ri{display:flex;flex-direction:column;align-items:center;gap:3px;width:62px;padding:6px 0 5px;border-radius:10px;border:0;background:none;color:inherit;font-size:12px;font-weight:600;line-height:1.2;cursor:pointer;flex:none}
.wx-ri:hover{color:#fff}
.wx-ri:hover .wx-ic{background:rgba(255,255,255,.08)}
.wx-ri[aria-pressed="true"]{color:#fff}
.wx-ri[aria-pressed="true"] .wx-ic{background:var(--pri);box-shadow:inset 0 1px 0 rgba(255,255,255,.2),0 4px 12px -5px rgba(123,104,238,.9)}
.wx-ic{display:grid;place-items:center;width:38px;height:30px;border-radius:9px;transition:background .12s}
.wx-rl{max-width:62px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}

/* section menu */
.wx-side{background:var(--side);border-right:1px solid var(--line);position:sticky;top:0;height:100vh;height:100dvh;display:flex;flex-direction:column;z-index:35;min-width:0}
.wx-ws{display:flex;align-items:center;gap:10px;padding:14px 10px 12px 16px;font-weight:800;font-size:15px;line-height:1.15;border-bottom:1px solid var(--line);flex:none}
.wx-ws small{display:block;font-size:12px;font-weight:600;color:var(--ink-3)}
.wx-ws .wx-ib{margin-left:auto}
.wx-side-body{flex:1;min-height:0;overflow-y:auto;overscroll-behavior:contain;padding:6px 0 16px}
.wx-grp[data-off]{display:none}
.wx-side-h{display:flex;align-items:center;gap:8px;padding:12px 18px 8px;font-size:12px;font-weight:700;color:var(--ink-3);letter-spacing:.07em;text-transform:uppercase}
.wx-side-h .wx-i{width:15px;height:15px}
.wx-sl{display:flex;align-items:center;gap:10px;margin:1px 10px;padding:0 10px;min-height:36px;border-radius:9px;color:var(--ink-2);font-weight:600;font-size:14px}
.wx-sl span{min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.wx-sl .wx-i{color:var(--ink-3);width:17px;height:17px}
.wx-sl:hover{background:var(--hover);color:var(--ink);text-decoration:none}
.wx-sl.is-active{background:var(--sel);color:var(--sel-ink);font-weight:700}
.wx-sl.is-active .wx-i{color:inherit}
/* while searching, every section's screens are listed */
.wx-side.wx-all .wx-grp[data-off]{display:block}
/* Spaces (Sending): campaigns by country -- wx.js fills #wxSpacesBody */
.wx-spaces-h{margin-top:8px;border-top:1px solid var(--line);padding-top:14px}
.wx-sp-all{margin-left:auto;border:0;background:none;padding:2px 6px;border-radius:6px;font:inherit;font-size:12px;font-weight:700;letter-spacing:0;text-transform:none;color:var(--pri-ink);cursor:pointer}
.wx-sp-all:hover{background:var(--hover)}
.wx-space{margin:1px 10px}
.wx-space > button{display:flex;align-items:center;gap:9px;width:100%;padding:0 10px;min-height:34px;border:0;background:none;border-radius:9px;color:var(--ink);font-weight:650;font-size:13.5px;text-align:left;cursor:pointer}
.wx-space > button:hover{background:var(--hover)}
.wx-sp-tile{display:grid;place-items:center;width:22px;height:22px;border-radius:6px;background:var(--c);background:oklch(from var(--c) min(l,.52) c h);color:#fff;font-size:12px;font-weight:800;letter-spacing:0;flex:none}
.wx-sp-n{min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.wx-sp-cnt{font-size:12px;font-weight:700;color:var(--gain);background:var(--gain-bg);border-radius:999px;padding:0 7px;line-height:18px}
.wx-sp-car{margin-left:auto;width:15px;height:15px;color:var(--ink-3);transition:transform .15s}
.wx-space.is-closed .wx-sp-car{transform:rotate(-90deg)}
.wx-space.is-closed .wx-sp-kids{display:none}
.wx-sp-kids{margin:2px 0 6px 20px;padding-left:10px;border-left:1px solid var(--line)}
.wx-sp-kids a{display:flex;align-items:center;gap:8px;padding:0 8px;min-height:30px;border-radius:8px;font-size:13px;font-weight:550;color:var(--ink-2)}
.wx-sp-kids a:hover{background:var(--hover);color:var(--ink);text-decoration:none}
.wx-sp-kids a[aria-current=page]{background:var(--sel);color:var(--sel-ink);font-weight:700}
.wx-sp-t{min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.wx-sp-d{width:8px;height:8px;border-radius:50%;background:var(--c);flex:none}
.wx-sp-live{margin-left:auto;width:7px;height:7px;border-radius:50%;background:var(--green);box-shadow:0 0 0 3px color-mix(in srgb,var(--green) 25%,transparent);flex:none}
.wx-sp-kids a.wx-sp-more{font-size:12px;font-weight:650;color:var(--pri-ink)}

/* main + top bar */
.wx-main{min-width:0;display:flex;flex-direction:column;background:var(--canvas)}
.wx-top{position:sticky;top:0;z-index:30;display:flex;align-items:center;gap:8px;height:var(--top-h);padding:0 14px 0 16px;background:color-mix(in srgb,var(--top) 92%,transparent);backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px);border-bottom:1px solid var(--line)}
.wx-crumbs{display:flex;align-items:center;gap:8px;font-size:14px;color:var(--ink-3);min-width:0;flex:0 1 auto;font-weight:600}
.wx-crumbs b{color:var(--ink);font-weight:700;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.wx-sep{color:var(--ink-3)}
.wx-search{position:relative;flex:0 1 400px;margin:0 auto;display:flex;align-items:center;gap:8px;height:36px;padding:0 10px;border-radius:10px;border:1px solid var(--line);background:var(--surface-2);color:var(--ink-3)}
.wx-search:focus-within{border-color:var(--pri);box-shadow:var(--ring)}
.wx-search input,.wx-search #wxJump{flex:1;min-width:0;height:100%;border:0!important;background:none!important;outline:0;padding:0;font-size:14px;color:var(--ink)!important;box-shadow:none!important}
.wx-search input::placeholder{color:var(--ink-3)}
.wx-search input::-webkit-search-cancel-button{display:none}
.wx-search kbd{font-size:12px;padding:1px 7px;border-radius:5px;border:1px solid var(--line-2);color:var(--ink-3);background:var(--surface)}
.wx-search-x,.wx-searchbtn{display:none!important}
.wx-qj{position:absolute;top:calc(100% + 6px);left:0;right:0;z-index:60;max-height:min(420px,70vh);overflow:auto;padding:4px;border-radius:12px;background:var(--surface);border:1px solid var(--line-2);box-shadow:var(--shadow-2)}
.wx-qj a{display:flex;align-items:center;gap:10px;min-height:38px;padding:4px 10px;border-radius:8px;color:var(--ink);font-weight:600}
.wx-qj a small{margin-left:auto;color:var(--ink-3);font-weight:600;font-size:12px}
.wx-qj a .wx-i{color:var(--ink-3)}
.wx-qj a[aria-selected="true"],.wx-qj a:hover{background:var(--sel);color:var(--sel-ink);text-decoration:none}
.wx-qj .wx-qj-empty{padding:12px;color:var(--ink-3)}
.wx-topr{display:flex;align-items:center;gap:6px;margin-left:auto;flex:none}
.wx-search + .wx-topr{margin-left:0}
.wx-ib{display:inline-grid;place-items:center;position:relative;width:36px;height:36px;border-radius:9px;border:1px solid transparent;background:none;color:var(--ink-2);cursor:pointer;flex:none;padding:0}
.wx-ib:hover{background:var(--hover);color:var(--ink);text-decoration:none}
.wx-menubtn{display:none}
.wx-app.wx-side-off .wx-sidebtn{display:inline-grid}
.wx-sidebtn{display:none}
.wx-badge-n{position:absolute;top:2px;right:1px;min-width:17px;height:17px;padding:0 4px;border-radius:99px;background:#C62E48;color:#fff;font-size:12px;font-weight:800;line-height:17px;text-align:center}
.wx-env{display:inline-flex;align-items:center;height:26px;padding:0 10px;border-radius:99px;font-size:12px;font-weight:800;letter-spacing:.02em}
.wx-env--prod{background:var(--loss-bg);color:var(--loss);box-shadow:inset 0 0 0 1px color-mix(in srgb,var(--loss) 35%,transparent)}
.wx-env--staging{background:var(--warn-bg-2);color:var(--warn-ink);box-shadow:inset 0 0 0 1px color-mix(in srgb,var(--warn-ink) 35%,transparent)}
.wx-env--local{background:var(--gain-bg);color:var(--gain)}
.wx-chip{display:inline-flex;align-items:center;height:28px;padding:0 10px;border-radius:99px;border:1px solid var(--line);background:var(--surface-2);font-size:12px;font-weight:700;color:var(--ink-2)}
.wx-chip:hover{background:var(--hover);text-decoration:none}
.wx-uiswitch{gap:6px;cursor:pointer;font-family:inherit}
.wx-uiswitch .wx-i{width:15px;height:15px}
.wx-queue{display:flex;align-items:center;gap:6px;height:28px;padding:0 10px;border-radius:99px;border:1px solid var(--line);background:var(--surface-2);cursor:help}
.wx-queue-dot{display:inline-block;width:8px;height:8px;border-radius:50%;background:var(--gray)}
.wx-queue-t{font-size:12px;font-weight:700;color:var(--ink-3);white-space:nowrap}
.wx-mwrap{position:relative;display:inline-flex}
.wx-user{display:flex;align-items:center;gap:8px;height:38px;padding:0 8px 0 3px;border-radius:99px;border:1px solid transparent;background:none;color:var(--ink);cursor:pointer;text-align:left}
.wx-user:hover{background:var(--hover)}
.wx-user-t{display:grid;font-size:13px;font-weight:700;line-height:1.15;white-space:nowrap}
.wx-user-t small{font-size:12px;font-weight:600;color:var(--ink-3)}
.wx-ava{display:inline-grid;place-items:center;width:32px;height:32px;border-radius:50%;background:#B8407A linear-gradient(135deg,#C4520C,#B3218F);color:#fff;font-size:12px;font-weight:800;flex:none}
.wx-menu{position:absolute;top:calc(100% + 6px);right:0;z-index:70;width:280px;max-width:calc(100vw - 16px);padding:6px;border-radius:12px;background:var(--surface);border:1px solid var(--line-2);box-shadow:var(--shadow-2);display:grid;gap:2px}
.wx-menu hr{margin:4px 2px}
.wx-mh{display:grid;padding:6px 8px 8px;font-size:14px;line-height:1.3}
.wx-mh small{color:var(--ink-3);font-size:12px;font-weight:600}
.wx-mlabel{padding:4px 8px 2px;font-size:12px;font-weight:700;color:var(--ink-3);letter-spacing:.06em;text-transform:uppercase}
.wx-fonts{display:grid;grid-template-columns:repeat(5,1fr);gap:4px;padding:4px}
.wx-fonts button{display:grid;justify-items:center;gap:1px;padding:6px 2px;border-radius:8px;border:1px solid var(--line);background:var(--surface-2);color:var(--ink);font-size:17px;font-weight:700;line-height:1.1;cursor:pointer}
.wx-fonts button small{font-size:12px;font-weight:600;color:var(--ink-3);font-family:var(--font)}
.wx-fonts button:hover{border-color:var(--line-2);background:var(--hover)}
.wx-fonts button[aria-checked="true"]{border-color:var(--pri);background:var(--sel);color:var(--sel-ink);box-shadow:inset 0 0 0 1px var(--pri)}
/* Background picker: same radio buttons as the fonts; each swatch shows that level's canvas and
   card colour for the theme in use. */
.wx-bgs button{font-size:13px}
.wx-bgs button i{display:block;width:26px;height:16px;border-radius:5px;border:1px solid var(--line-2);background:linear-gradient(135deg,var(--sw-c) 50%,var(--sw-s) 50%)}
.wx-bgs [data-bg="-2"]{--sw-c:#CBCFD7;--sw-s:#D8DBE2}
.wx-bgs [data-bg="-1"]{--sw-c:#CFD3DB;--sw-s:#DDE0E7}
.wx-bgs [data-bg="0"]{--sw-c:#D4D8E0;--sw-s:#E2E5EC}
.wx-bgs [data-bg="1"]{--sw-c:#D9DDE5;--sw-s:#E7EAF1}
.wx-bgs [data-bg="2"]{--sw-c:#DDE2EA;--sw-s:#ECEFF6}
[data-theme="dark"] .wx-bgs [data-bg="-2"]{--sw-c:#101116;--sw-s:#17181F}
[data-theme="dark"] .wx-bgs [data-bg="-1"]{--sw-c:#121319;--sw-s:#1A1B22}
[data-theme="dark"] .wx-bgs [data-bg="0"]{--sw-c:#15161C;--sw-s:#1D1E26}
[data-theme="dark"] .wx-bgs [data-bg="1"]{--sw-c:#18191F;--sw-s:#20212A}
[data-theme="dark"] .wx-bgs [data-bg="2"]{--sw-c:#1B1C23;--sw-s:#24252F}
.wx-mi{display:flex;align-items:center;gap:10px;width:100%;min-height:38px;padding:4px 10px;border:0;border-radius:8px;background:none;font-size:14px;font-weight:600;color:var(--ink)!important;text-align:left;cursor:pointer}
.wx-mi:hover{background:var(--hover)!important;text-decoration:none}
.wx-mi .wx-i{color:var(--ink-3)}
.wx-mi--danger,.wx-mi--danger .wx-i{color:var(--loss)!important}
.wx-scrim{display:none;position:fixed;inset:0;background:var(--scrim);z-index:34}
.wx-tabbar{display:none}

/* content column */
.content{padding:20px 24px 32px;width:100%;max-width:1600px;margin:0 auto}
.content--wide{max-width:none}
.content:has(.login-wrapper){padding:0!important;max-width:100%!important}
.main--no-sidebar{margin-left:0!important;padding-left:0!important;width:100%!important}

/* classic "switch to new design" affordance lives in the classic topbar; hide the classic
   hamburger/overlay if a page ever renders them under v2 */
.hamburger,.sidebar-overlay{display:none}

/* ============ 5. shared components (same class names as the classic base.html) ============ */
.page-header{display:flex;gap:12px;align-items:flex-start;justify-content:space-between;flex-wrap:wrap;margin-bottom:16px}
.page-header__actions{display:flex;gap:8px;flex-wrap:wrap;align-items:center}

.card{background:var(--surface);border:1px solid var(--line);border-radius:var(--r);padding:16px;margin-bottom:16px;box-shadow:var(--shadow-1);min-width:0}
.card--subtle{background:var(--surface-2);border-color:var(--line)}
.grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(200px,1fr));gap:12px}
.stat-card{padding:16px;border-radius:var(--r);border:1px solid var(--line);background:var(--surface);box-shadow:var(--shadow-1);transition:box-shadow .12s;min-width:0}
.stat-card:hover{box-shadow:var(--shadow-2)}
.stat-card__label{color:var(--ink-3);font-weight:700;font-size:12px}
.stat-card__value{font-size:26px;font-weight:800;margin-top:6px;letter-spacing:-.02em;line-height:1.15}
.stat-card__hint{margin-top:6px;color:var(--ink-3);font-size:12px}

table{width:100%;border-collapse:collapse}
th,td{text-align:left;padding:11px 10px;border-bottom:1px solid var(--line);font-size:13px;vertical-align:top}
td{color:var(--ink);font-variant-numeric:tabular-nums}
th{position:sticky;top:0;z-index:5;background:var(--surface-2);color:var(--ink-2);font-weight:700;font-size:12px;text-transform:uppercase;letter-spacing:.05em}
thead th{border-bottom:1px solid var(--line-2)}
tbody tr:hover td{background:color-mix(in srgb,var(--pri) 5%,transparent)}
.table-wrap{overflow-x:auto;overflow-y:visible;border-radius:var(--r);border:1px solid var(--line);background:var(--surface)}
.table-wrap table{border-collapse:separate;border-spacing:0}
.table-wrap th{position:sticky;top:0;z-index:5}
.table-wrap tbody tr:last-child td{border-bottom:0}

.pagination-bar{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:10px 0;flex-wrap:wrap;font-size:13px}
.pagination-bar__info{color:var(--ink-3);font-size:12px;font-weight:650}
.pagination-bar__controls{display:flex;align-items:center;gap:8px;flex-wrap:wrap}
.pagination-bar__rpp{display:inline-flex;align-items:center;gap:6px;font-size:12px;color:var(--ink-3);font-weight:650}
.pagination-bar__rpp select{width:auto;padding:4px 8px;font-size:12px;border-radius:7px;min-width:60px}
.pagination-bar .btn{font-size:12px;padding:5px 12px}

.btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;min-height:36px;padding:7px 14px;border-radius:10px;border:1px solid var(--line-2);background:var(--surface);color:var(--ink);font-weight:700;font-size:13px;line-height:1.2;cursor:pointer;text-decoration:none;white-space:nowrap;box-shadow:0 1px 1px rgba(16,24,40,.04);transition:background .12s,box-shadow .12s,transform .06s,border-color .12s}
.btn:hover{background:var(--hover);text-decoration:none}
.btn:active{transform:translateY(1px)}
.btn:focus{outline:none}
.btn:focus-visible{box-shadow:var(--ring);border-color:var(--pri)}
.btn-primary{background:var(--pri);border-color:var(--pri);color:#fff;box-shadow:0 1px 2px rgba(80,50,200,.28),inset 0 1px 0 rgba(255,255,255,.18)}
.btn-primary:hover{background:var(--pri-2);border-color:var(--pri-2);color:#fff}
.btn-danger{background:var(--loss-bg);border-color:color-mix(in srgb,var(--loss) 30%,transparent);color:var(--loss)}
.btn-danger:hover{background:color-mix(in srgb,var(--loss) 16%,transparent)}
.btn-ghost{background:transparent;border-color:var(--line-2);color:var(--ink-2)}
.btn-ghost:hover{background:var(--hover);color:var(--ink)}
.btn-sm{min-height:30px;padding:4px 10px;font-size:12px;border-radius:8px}
.btn[disabled],.btn:disabled{opacity:.5;cursor:not-allowed;transform:none!important}

.input,select,textarea{width:100%;padding:9px 12px;border-radius:10px;border:1px solid var(--line-2);background:var(--input);color:var(--ink);font-size:13px;line-height:1.35;transition:border-color .12s,box-shadow .12s}
input[type="text"],input[type="number"],input[type="email"],input[type="password"],input[type="search"],input[type="url"],input[type="tel"],input[type="date"],input[type="datetime-local"],input[type="time"]{font-size:13px}
.input:focus,select:focus,textarea:focus,input:focus{outline:none;box-shadow:var(--ring);border-color:var(--pri)}
textarea{resize:vertical}
select{background-color:var(--input);color:var(--ink)}
option,optgroup{background-color:var(--surface);color:var(--ink)}
input[type="checkbox"],input[type="radio"],input[type="range"]{accent-color:var(--pri)}
::placeholder{color:var(--ink-3);opacity:1}
label{color:var(--ink-2)}

.badge{display:inline-block;padding:2px 8px;border-radius:99px;background:color-mix(in srgb,var(--pri) 11%,transparent);border:1px solid color-mix(in srgb,var(--pri) 22%,transparent);font-size:12px;font-weight:700;color:var(--pri-ink);line-height:1.5}
.badge-ok{background:var(--gain-bg);border-color:color-mix(in srgb,var(--gain) 28%,transparent);color:var(--gain)}
.badge-warn{background:var(--warn-bg-2);border-color:color-mix(in srgb,var(--warn-ink) 28%,transparent);color:var(--warn-ink)}
.badge-bad{background:var(--loss-bg);border-color:color-mix(in srgb,var(--loss) 28%,transparent);color:var(--loss)}
/* colour-named variants pages use without defining; a page's own later rule still wins */
.badge-green,.badge-good,.badge-success{background:var(--gain-bg);border-color:color-mix(in srgb,var(--gain) 28%,transparent);color:var(--gain)}
.badge-red,.badge-err,.badge-danger{background:var(--loss-bg);border-color:color-mix(in srgb,var(--loss) 28%,transparent);color:var(--loss)}
.badge-orange,.badge-amber{background:var(--warn-bg-2);border-color:color-mix(in srgb,var(--warn-ink) 28%,transparent);color:var(--warn-ink)}
.badge-blue{background:var(--info-bg);border-color:color-mix(in srgb,var(--info-ink) 28%,transparent);color:var(--info-ink)}
.badge-gray{background:var(--surface-2);border-color:var(--line-2);color:var(--ink-2)}
.chip{display:inline-flex;align-items:center;gap:4px;padding:3px 10px;border-radius:99px;font-size:12px;font-weight:700;border:1px solid var(--line);background:var(--surface-2);color:var(--ink-2)}
.chip--ok{color:var(--gain);border-color:color-mix(in srgb,var(--gain) 30%,transparent);background:var(--gain-bg)}
.chip--warn{color:var(--warn-ink);border-color:color-mix(in srgb,var(--warn-ink) 30%,transparent);background:var(--warn-bg-2)}
.chip--bad{color:var(--loss);border-color:color-mix(in srgb,var(--loss) 30%,transparent);background:var(--loss-bg)}
.chip--info{color:var(--pri-ink);border-color:color-mix(in srgb,var(--pri) 25%,transparent);background:color-mix(in srgb,var(--pri) 11%,transparent)}
.pill{display:inline-flex;align-items:center;gap:6px;padding:4px 10px;border-radius:99px;border:1px solid var(--line);background:var(--surface-2);font-weight:700;font-size:12px;color:var(--ink-2)}
.pill--ok{border-color:color-mix(in srgb,var(--gain) 30%,transparent);background:var(--gain-bg);color:var(--gain)}
.pill--warn{border-color:color-mix(in srgb,var(--warn-ink) 30%,transparent);background:var(--warn-bg-2);color:var(--warn-ink)}
.pill--bad{border-color:color-mix(in srgb,var(--loss) 30%,transparent);background:var(--loss-bg);color:var(--loss)}
.pill--link{color:var(--ink-2);text-decoration:none;cursor:pointer}
.pill--link:hover{text-decoration:none;background:var(--hover)}
.search{display:flex;align-items:center;gap:8px;padding:8px 10px;border-radius:10px;border:1px solid var(--line-2);background:var(--input);min-width:min(320px,100%)}
.search input{width:100%;border:none;outline:none;background:transparent;color:var(--ink);font-weight:600;font-size:13px;box-shadow:none}

.empty{padding:28px;border-radius:16px;border:1px dashed var(--line-2);background:var(--surface-2);text-align:center}
.empty__icon{margin:0 auto 10px;width:44px;height:44px;display:flex;align-items:center;justify-content:center;border-radius:14px;background:var(--sel);color:var(--sel-ink)}
.empty__title{font-size:16px;font-weight:800;margin-top:6px}
.empty__desc{color:var(--ink-2);margin-top:8px;margin-bottom:12px;line-height:1.55}
.skeleton__line{height:12px;border-radius:10px;background:linear-gradient(90deg,var(--surface-2),var(--line),var(--surface-2));background-size:200% 100%;animation:wx-shimmer 1.4s infinite;margin:10px 0}
@keyframes wx-shimmer{0%{background-position:200% 0}100%{background-position:-200% 0}}
@keyframes shimmer{0%{background-position:200% 0}100%{background-position:-200% 0}}

.toasts{position:fixed;right:18px;top:calc(var(--top-h) + 12px);display:flex;flex-direction:column;gap:10px;z-index:9999}
.toast{width:360px;max-width:calc(100vw - 32px);border-radius:14px;border:1px solid var(--line-2);background:var(--surface);box-shadow:var(--shadow-2);padding:12px 14px;transition:opacity .4s ease,transform .4s ease}
.toast__title{font-weight:800}
.toast__msg{color:var(--ink-2);margin-top:4px;line-height:1.45}
.toast--success{border-color:color-mix(in srgb,var(--gain) 35%,transparent)} .toast--success .toast__title{color:var(--gain)}
.toast--error{border-color:color-mix(in srgb,var(--loss) 35%,transparent)} .toast--error .toast__title{color:var(--loss)}
.toast--info{border-color:color-mix(in srgb,var(--pri) 35%,transparent)}

.gtasks{position:fixed;bottom:18px;right:18px;z-index:9998;display:flex;flex-direction:column;gap:8px;pointer-events:none}
.gtask{width:340px;max-width:calc(100vw - 32px);border-radius:12px;border:1px solid var(--line-2);background:var(--surface);box-shadow:var(--shadow-2);padding:10px 14px;pointer-events:auto;transition:opacity .3s,transform .3s}
.gtask__label{font-size:12px;font-weight:700;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:260px}
.gtask__bar{width:100%;height:6px;background:var(--line);border-radius:3px;overflow:hidden;margin-top:6px}
.gtask__fill{height:100%;border-radius:3px;transition:width .5s ease;background:linear-gradient(90deg,var(--pri),#A78BFA)}
.gtask__fill--done{background:var(--green)} .gtask__fill--error{background:var(--red)}
.gtask__meta{display:flex;justify-content:space-between;margin-top:4px;font-size:12px;color:var(--ink-3);font-variant-numeric:tabular-nums}
.gtask--done{border-color:color-mix(in srgb,var(--gain) 30%,transparent);opacity:.9}
.gtask--error{border-color:color-mix(in srgb,var(--loss) 30%,transparent)}

@keyframes ui-spin{to{transform:rotate(360deg)}}
.ui-spinner{display:inline-block;width:14px;height:14px;border:2px solid rgba(255,255,255,.3);border-top-color:#fff;border-radius:50%;animation:ui-spin .6s linear infinite;vertical-align:middle}
.ui-spinner--dark{border-color:color-mix(in srgb,var(--ink) 15%,transparent);border-top-color:var(--pri)}

.migration-banner{display:flex;align-items:center;gap:12px;flex-wrap:wrap;padding:12px 16px;border-radius:12px;border:1px solid color-mix(in srgb,var(--loss) 35%,transparent);background:var(--loss-bg);margin-bottom:16px}
.migration-banner__icon{flex-shrink:0;width:32px;height:32px;border-radius:8px;background:color-mix(in srgb,var(--loss) 15%,transparent);display:flex;align-items:center;justify-content:center}
.migration-banner__text{flex:1;min-width:200px;font-size:13px;line-height:1.5;color:var(--ink)}
.migration-banner__text strong{color:var(--loss)}
.migration-banner__btn{flex-shrink:0}

.drawer{position:fixed;top:0;right:0;height:100vh;height:100dvh;width:min(520px,94vw);background:var(--surface);border-left:1px solid var(--line-2);box-shadow:var(--shadow-2);transform:translateX(102%);transition:transform .18s ease;z-index:9998;display:flex;flex-direction:column}
.drawer--open{transform:translateX(0)}
.drawer__top{padding:14px 16px;display:flex;align-items:center;justify-content:space-between;gap:8px;border-bottom:1px solid var(--line)}
.drawer__body{padding:16px;overflow:auto;flex:1;min-height:0}
.drawer__overlay{position:fixed;inset:0;background:var(--scrim);opacity:0;pointer-events:none;transition:opacity .18s ease;z-index:9997}
.drawer__overlay--open{opacity:1;pointer-events:auto}

dialog{border-radius:16px;border:1px solid var(--line-2);background:var(--surface);color:var(--ink);padding:0;box-shadow:var(--shadow-2);max-width:calc(100vw - 24px);max-height:calc(100dvh - 24px)}
dialog::backdrop{background:var(--scrim)}

.tip{display:inline-flex;align-items:center;justify-content:center;width:18px;height:18px;border-radius:50%;background:var(--surface-2);border:1px solid var(--line);color:var(--ink-3);font-size:12px;font-weight:700;cursor:help;position:relative;vertical-align:middle;margin-left:4px;user-select:none}
.tip:hover{background:var(--sel);color:var(--sel-ink)}
/* scale(0) at rest is load-bearing (see base.html): opacity:0 alone keeps the 260px box in the
   scrollable overflow area. Do NOT "fix" edge overflow with overflow-x:clip. */
.tip::after{content:attr(data-tip);position:absolute;bottom:calc(100% + 6px);left:50%;transform:translateX(-50%) scale(0);background:#1E2130;color:#EEF0F5;font-size:12px;font-weight:500;line-height:1.45;padding:7px 10px;border-radius:8px;white-space:normal;width:max-content;max-width:260px;box-shadow:0 6px 18px rgba(0,0,0,.25);pointer-events:none;opacity:0;transition:opacity .15s,transform 0s linear .15s;z-index:9999;text-transform:none;letter-spacing:0;text-align:left}
.tip:hover::after{opacity:1;transform:translateX(-50%) scale(1);transition:opacity .15s,transform 0s}

/* ============ 6. light-mode readability nets ============
   Many templates hard-code colours chosen for the old dark theme (inputs on #0b1020, pale
   #e8eefc text, neon status greens). Classic light mode patched some of it with !important; v2
   does the same job, mapped to the softened palette. These fire in light mode ONLY. */
:root:not([data-theme="dark"]) :is(input:not([type="checkbox"]):not([type="radio"]):not([type="range"]):not([type="color"]):not([type="submit"]):not([type="button"]):not([type="reset"]):not([type="file"]),select,textarea,.input){
  background:var(--input)!important;color:var(--ink)!important;border-color:var(--line-2)!important}
:root:not([data-theme="dark"]) :is(dialog,pre,label,div,button,section,span,td,tr)[style*="#0b1020" i],
:root:not([data-theme="dark"]) :is(div,section,span,button)[style*="#10183a" i],
:root:not([data-theme="dark"]) :is(div,section,span,button)[style*="#121a3f" i],
:root:not([data-theme="dark"]) :is(div,section,span,button)[style*="#1a1f2e" i],
:root:not([data-theme="dark"]) :is(div,section,span,button)[style*="#0f1736" i],
:root:not([data-theme="dark"]) :is(div,section,span,button)[style*="#161a22" i]{
  background:var(--surface-2)!important;color:var(--ink)!important;border-color:var(--line)!important}
:root:not([data-theme="dark"]) :is(div,section,span,button)[style*="#3a1414" i]{
  background:var(--loss-bg)!important;color:var(--ink)!important;border-color:color-mix(in srgb,var(--loss) 30%,transparent)!important}
:root:not([data-theme="dark"]) :is(div,section,span,button)[style*="#12301c" i]{
  background:var(--gain-bg)!important;color:var(--ink)!important;border-color:color-mix(in srgb,var(--gain) 30%,transparent)!important}
:root:not([data-theme="dark"]) button[style*="#1f3b7a" i]{
  background:var(--sel)!important;color:var(--sel-ink)!important;border-color:color-mix(in srgb,var(--pri) 30%,transparent)!important}
/* Classic light-theme overrides that hard-code #fff (settings drawers, campaign stat cards, lap menu,
   dialogs, import mapping). On the dimmed grey palette they would be the brightest patches on the
   page -- exactly the glare Oren asked to remove -- so they follow the surface tokens instead. */
html:root:not([data-theme="dark"]) body :is(.inline-drawer,.stat-card,.dlr-stat,.lap-menu,.map-card,.val-tooltip,.help-tooltip,dialog){
  background:var(--surface)!important;border-color:var(--line)!important;color:var(--ink)}
html:root:not([data-theme="dark"]) body .inline-drawer[open]{background:var(--surface-2)!important}
html:root:not([data-theme="dark"]) body .inline-drawer__head:hover{background:var(--hover)!important}
html:root:not([data-theme="dark"]) body :is(#commentTextarea,.lm-input,.map-select,.map-input){
  background:var(--input)!important;color:var(--ink)!important;border-color:var(--line-2)!important}
/* dark mode: the old navy surfaces clash with the neutral graphite palette; keep their (light) text */
:root[data-theme="dark"] :is(input,select,textarea)[style*="#0b1020" i]{background:var(--input)!important;border-color:var(--line-2)!important}
:root[data-theme="dark"] :is(dialog,pre,label,div,section,span,td,tr)[style*="#0b1020" i],
:root[data-theme="dark"] :is(div,section,span,button)[style*="#10183a" i],
:root[data-theme="dark"] :is(div,section,span,button)[style*="#121a3f" i],
:root[data-theme="dark"] :is(div,section,span,button)[style*="#0f1736" i]{background:var(--surface-2)!important;border-color:var(--line)!important}
:root[data-theme="dark"] button[style*="#1f3b7a" i]{background:color-mix(in srgb,var(--pri) 30%,var(--surface))!important;border-color:color-mix(in srgb,var(--pri) 45%,transparent)!important}
/* generated: known dark-theme text colours -> AA colours of the softened light palette */
:root:not([data-theme="dark"]) [style*="color:#fff" i]:not([style*="background" i]):not([style*="-color:#fff" i]):not([style*="-color: #fff" i]),
:root:not([data-theme="dark"]) [style*="color: #fff" i]:not([style*="background" i]):not([style*="-color:#fff" i]):not([style*="-color: #fff" i]),
:root:not([data-theme="dark"]) [style*="color:#ffffff" i]:not([style*="background" i]):not([style*="-color:#ffffff" i]):not([style*="-color: #ffffff" i]),
:root:not([data-theme="dark"]) [style*="color: #ffffff" i]:not([style*="background" i]):not([style*="-color:#ffffff" i]):not([style*="-color: #ffffff" i]),
:root:not([data-theme="dark"]) [style*="color:#e8eefc" i]:not([style*="background" i]):not([style*="-color:#e8eefc" i]):not([style*="-color: #e8eefc" i]),
:root:not([data-theme="dark"]) [style*="color: #e8eefc" i]:not([style*="background" i]):not([style*="-color:#e8eefc" i]):not([style*="-color: #e8eefc" i]),
:root:not([data-theme="dark"]) [style*="color:#e5e7eb" i]:not([style*="background" i]):not([style*="-color:#e5e7eb" i]):not([style*="-color: #e5e7eb" i]),
:root:not([data-theme="dark"]) [style*="color: #e5e7eb" i]:not([style*="background" i]):not([style*="-color:#e5e7eb" i]):not([style*="-color: #e5e7eb" i]),
:root:not([data-theme="dark"]) [style*="color:#eaf2ff" i]:not([style*="background" i]):not([style*="-color:#eaf2ff" i]):not([style*="-color: #eaf2ff" i]),
:root:not([data-theme="dark"]) [style*="color: #eaf2ff" i]:not([style*="background" i]):not([style*="-color:#eaf2ff" i]):not([style*="-color: #eaf2ff" i]),
:root:not([data-theme="dark"]) [style*="color:#c9d3e0" i]:not([style*="background" i]):not([style*="-color:#c9d3e0" i]):not([style*="-color: #c9d3e0" i]),
:root:not([data-theme="dark"]) [style*="color: #c9d3e0" i]:not([style*="background" i]):not([style*="-color:#c9d3e0" i]):not([style*="-color: #c9d3e0" i]),
:root:not([data-theme="dark"]) [style*="color:#dbe8ff" i]:not([style*="background" i]):not([style*="-color:#dbe8ff" i]):not([style*="-color: #dbe8ff" i]),
:root:not([data-theme="dark"]) [style*="color: #dbe8ff" i]:not([style*="background" i]):not([style*="-color:#dbe8ff" i]):not([style*="-color: #dbe8ff" i]),
:root:not([data-theme="dark"]) [style*="color:#f4f7fb" i]:not([style*="background" i]):not([style*="-color:#f4f7fb" i]):not([style*="-color: #f4f7fb" i]),
:root:not([data-theme="dark"]) [style*="color: #f4f7fb" i]:not([style*="background" i]):not([style*="-color:#f4f7fb" i]):not([style*="-color: #f4f7fb" i]),
:root:not([data-theme="dark"]) [style*="color:#e2e8f0" i]:not([style*="background" i]):not([style*="-color:#e2e8f0" i]):not([style*="-color: #e2e8f0" i]),
:root:not([data-theme="dark"]) [style*="color: #e2e8f0" i]:not([style*="background" i]):not([style*="-color:#e2e8f0" i]):not([style*="-color: #e2e8f0" i]),
:root:not([data-theme="dark"]) [style*="color:#f1f5f9" i]:not([style*="background" i]):not([style*="-color:#f1f5f9" i]):not([style*="-color: #f1f5f9" i]),
:root:not([data-theme="dark"]) [style*="color: #f1f5f9" i]:not([style*="background" i]):not([style*="-color:#f1f5f9" i]):not([style*="-color: #f1f5f9" i]),
:root:not([data-theme="dark"]) [style*="color:#f8fafc" i]:not([style*="background" i]):not([style*="-color:#f8fafc" i]):not([style*="-color: #f8fafc" i]),
:root:not([data-theme="dark"]) [style*="color: #f8fafc" i]:not([style*="background" i]):not([style*="-color:#f8fafc" i]):not([style*="-color: #f8fafc" i]),
:root:not([data-theme="dark"]) [style*="color:#eef2ff" i]:not([style*="background" i]):not([style*="-color:#eef2ff" i]):not([style*="-color: #eef2ff" i]),
:root:not([data-theme="dark"]) [style*="color: #eef2ff" i]:not([style*="background" i]):not([style*="-color:#eef2ff" i]):not([style*="-color: #eef2ff" i]),
:root:not([data-theme="dark"]) [style*="color:#dcfce7" i]:not([style*="background" i]):not([style*="-color:#dcfce7" i]):not([style*="-color: #dcfce7" i]),
:root:not([data-theme="dark"]) [style*="color: #dcfce7" i]:not([style*="background" i]):not([style*="-color:#dcfce7" i]):not([style*="-color: #dcfce7" i]){color:var(--ink)!important}
:root:not([data-theme="dark"]) [style*="color:#ffb4b4" i]:not([style*="-color:#ffb4b4" i]):not([style*="-color: #ffb4b4" i]),
:root:not([data-theme="dark"]) [style*="color: #ffb4b4" i]:not([style*="-color:#ffb4b4" i]):not([style*="-color: #ffb4b4" i]),
:root:not([data-theme="dark"]) [style*="color:#fca5a5" i]:not([style*="-color:#fca5a5" i]):not([style*="-color: #fca5a5" i]),
:root:not([data-theme="dark"]) [style*="color: #fca5a5" i]:not([style*="-color:#fca5a5" i]):not([style*="-color: #fca5a5" i]),
:root:not([data-theme="dark"]) [style*="color:#ff6b6b" i]:not([style*="-color:#ff6b6b" i]):not([style*="-color: #ff6b6b" i]),
:root:not([data-theme="dark"]) [style*="color: #ff6b6b" i]:not([style*="-color:#ff6b6b" i]):not([style*="-color: #ff6b6b" i]),
:root:not([data-theme="dark"]) [style*="color:#f87171" i]:not([style*="-color:#f87171" i]):not([style*="-color: #f87171" i]),
:root:not([data-theme="dark"]) [style*="color: #f87171" i]:not([style*="-color:#f87171" i]):not([style*="-color: #f87171" i]),
:root:not([data-theme="dark"]) [style*="color:#e57373" i]:not([style*="-color:#e57373" i]):not([style*="-color: #e57373" i]),
:root:not([data-theme="dark"]) [style*="color: #e57373" i]:not([style*="-color:#e57373" i]):not([style*="-color: #e57373" i]),
:root:not([data-theme="dark"]) [style*="color:#ef4444" i]:not([style*="-color:#ef4444" i]):not([style*="-color: #ef4444" i]),
:root:not([data-theme="dark"]) [style*="color: #ef4444" i]:not([style*="-color:#ef4444" i]):not([style*="-color: #ef4444" i]),
:root:not([data-theme="dark"]) [style*="color:#e74c3c" i]:not([style*="-color:#e74c3c" i]):not([style*="-color: #e74c3c" i]),
:root:not([data-theme="dark"]) [style*="color: #e74c3c" i]:not([style*="-color:#e74c3c" i]):not([style*="-color: #e74c3c" i]),
:root:not([data-theme="dark"]) [style*="color:#f44336" i]:not([style*="-color:#f44336" i]):not([style*="-color: #f44336" i]),
:root:not([data-theme="dark"]) [style*="color: #f44336" i]:not([style*="-color:#f44336" i]):not([style*="-color: #f44336" i]),
:root:not([data-theme="dark"]) [style*="color:#ff4444" i]:not([style*="-color:#ff4444" i]):not([style*="-color: #ff4444" i]),
:root:not([data-theme="dark"]) [style*="color: #ff4444" i]:not([style*="-color:#ff4444" i]):not([style*="-color: #ff4444" i]),
:root:not([data-theme="dark"]) [style*="color:#ff7a7a" i]:not([style*="-color:#ff7a7a" i]):not([style*="-color: #ff7a7a" i]),
:root:not([data-theme="dark"]) [style*="color: #ff7a7a" i]:not([style*="-color:#ff7a7a" i]):not([style*="-color: #ff7a7a" i]),
:root:not([data-theme="dark"]) [style*="color:#fecaca" i]:not([style*="-color:#fecaca" i]):not([style*="-color: #fecaca" i]),
:root:not([data-theme="dark"]) [style*="color: #fecaca" i]:not([style*="-color:#fecaca" i]):not([style*="-color: #fecaca" i]){color:var(--loss)!important}
:root:not([data-theme="dark"]) [style*="color:rgba(70,255,170" i]:not([style*="background-color:rgba(70,255,170" i]):not([style*="background-color: rgba(70,255,170" i]),
:root:not([data-theme="dark"]) [style*="color: rgba(70,255,170" i]:not([style*="background-color:rgba(70,255,170" i]):not([style*="background-color: rgba(70,255,170" i]),
:root:not([data-theme="dark"]) [style*="color:rgba(70, 255, 170" i]:not([style*="background-color:rgba(70,255,170" i]):not([style*="background-color: rgba(70,255,170" i]),
:root:not([data-theme="dark"]) [style*="color: rgba(70, 255, 170" i]:not([style*="background-color:rgba(70,255,170" i]):not([style*="background-color: rgba(70,255,170" i]),
:root:not([data-theme="dark"]) [style*="color:#90ff90" i]:not([style*="-color:#90ff90" i]):not([style*="-color: #90ff90" i]),
:root:not([data-theme="dark"]) [style*="color: #90ff90" i]:not([style*="-color:#90ff90" i]):not([style*="-color: #90ff90" i]),
:root:not([data-theme="dark"]) [style*="color:#4ade80" i]:not([style*="-color:#4ade80" i]):not([style*="-color: #4ade80" i]),
:root:not([data-theme="dark"]) [style*="color: #4ade80" i]:not([style*="-color:#4ade80" i]):not([style*="-color: #4ade80" i]),
:root:not([data-theme="dark"]) [style*="color:#22c55e" i]:not([style*="-color:#22c55e" i]):not([style*="-color: #22c55e" i]),
:root:not([data-theme="dark"]) [style*="color: #22c55e" i]:not([style*="-color:#22c55e" i]):not([style*="-color: #22c55e" i]),
:root:not([data-theme="dark"]) [style*="color:#2ecc71" i]:not([style*="-color:#2ecc71" i]):not([style*="-color: #2ecc71" i]),
:root:not([data-theme="dark"]) [style*="color: #2ecc71" i]:not([style*="-color:#2ecc71" i]):not([style*="-color: #2ecc71" i]),
:root:not([data-theme="dark"]) [style*="color:#4caf50" i]:not([style*="-color:#4caf50" i]):not([style*="-color: #4caf50" i]),
:root:not([data-theme="dark"]) [style*="color: #4caf50" i]:not([style*="-color:#4caf50" i]):not([style*="-color: #4caf50" i]),
:root:not([data-theme="dark"]) [style*="color:#10b981" i]:not([style*="-color:#10b981" i]):not([style*="-color: #10b981" i]),
:root:not([data-theme="dark"]) [style*="color: #10b981" i]:not([style*="-color:#10b981" i]):not([style*="-color: #10b981" i]),
:root:not([data-theme="dark"]) [style*="color:#34d399" i]:not([style*="-color:#34d399" i]):not([style*="-color: #34d399" i]),
:root:not([data-theme="dark"]) [style*="color: #34d399" i]:not([style*="-color:#34d399" i]):not([style*="-color: #34d399" i]),
:root:not([data-theme="dark"]) [style*="color:#86efac" i]:not([style*="-color:#86efac" i]):not([style*="-color: #86efac" i]),
:root:not([data-theme="dark"]) [style*="color: #86efac" i]:not([style*="-color:#86efac" i]):not([style*="-color: #86efac" i]),
:root:not([data-theme="dark"]) [style*="color:#6ee7b7" i]:not([style*="-color:#6ee7b7" i]):not([style*="-color: #6ee7b7" i]),
:root:not([data-theme="dark"]) [style*="color: #6ee7b7" i]:not([style*="-color:#6ee7b7" i]):not([style*="-color: #6ee7b7" i]){color:var(--gain)!important}
:root:not([data-theme="dark"]) [style*="color:#f59e0b" i]:not([style*="-color:#f59e0b" i]):not([style*="-color: #f59e0b" i]),
:root:not([data-theme="dark"]) [style*="color: #f59e0b" i]:not([style*="-color:#f59e0b" i]):not([style*="-color: #f59e0b" i]),
:root:not([data-theme="dark"]) [style*="color:#fbbf24" i]:not([style*="-color:#fbbf24" i]):not([style*="-color: #fbbf24" i]),
:root:not([data-theme="dark"]) [style*="color: #fbbf24" i]:not([style*="-color:#fbbf24" i]):not([style*="-color: #fbbf24" i]),
:root:not([data-theme="dark"]) [style*="color:#eab308" i]:not([style*="-color:#eab308" i]):not([style*="-color: #eab308" i]),
:root:not([data-theme="dark"]) [style*="color: #eab308" i]:not([style*="-color:#eab308" i]):not([style*="-color: #eab308" i]),
:root:not([data-theme="dark"]) [style*="color:#ffd37a" i]:not([style*="-color:#ffd37a" i]):not([style*="-color: #ffd37a" i]),
:root:not([data-theme="dark"]) [style*="color: #ffd37a" i]:not([style*="-color:#ffd37a" i]):not([style*="-color: #ffd37a" i]),
:root:not([data-theme="dark"]) [style*="color:#ffc846" i]:not([style*="-color:#ffc846" i]):not([style*="-color: #ffc846" i]),
:root:not([data-theme="dark"]) [style*="color: #ffc846" i]:not([style*="-color:#ffc846" i]):not([style*="-color: #ffc846" i]),
:root:not([data-theme="dark"]) [style*="color:#ff9800" i]:not([style*="-color:#ff9800" i]):not([style*="-color: #ff9800" i]),
:root:not([data-theme="dark"]) [style*="color: #ff9800" i]:not([style*="-color:#ff9800" i]):not([style*="-color: #ff9800" i]),
:root:not([data-theme="dark"]) [style*="color:#f39c12" i]:not([style*="-color:#f39c12" i]):not([style*="-color: #f39c12" i]),
:root:not([data-theme="dark"]) [style*="color: #f39c12" i]:not([style*="-color:#f39c12" i]):not([style*="-color: #f39c12" i]),
:root:not([data-theme="dark"]) [style*="color:#e67e22" i]:not([style*="-color:#e67e22" i]):not([style*="-color: #e67e22" i]),
:root:not([data-theme="dark"]) [style*="color: #e67e22" i]:not([style*="-color:#e67e22" i]):not([style*="-color: #e67e22" i]),
:root:not([data-theme="dark"]) [style*="color:#f97316" i]:not([style*="-color:#f97316" i]):not([style*="-color: #f97316" i]),
:root:not([data-theme="dark"]) [style*="color: #f97316" i]:not([style*="-color:#f97316" i]):not([style*="-color: #f97316" i]),
:root:not([data-theme="dark"]) [style*="color:#fcd34d" i]:not([style*="-color:#fcd34d" i]):not([style*="-color: #fcd34d" i]),
:root:not([data-theme="dark"]) [style*="color: #fcd34d" i]:not([style*="-color:#fcd34d" i]):not([style*="-color: #fcd34d" i]),
:root:not([data-theme="dark"]) [style*="color:#fde68a" i]:not([style*="-color:#fde68a" i]):not([style*="-color: #fde68a" i]),
:root:not([data-theme="dark"]) [style*="color: #fde68a" i]:not([style*="-color:#fde68a" i]):not([style*="-color: #fde68a" i]),
:root:not([data-theme="dark"]) [style*="color:#facc15" i]:not([style*="-color:#facc15" i]):not([style*="-color: #facc15" i]),
:root:not([data-theme="dark"]) [style*="color: #facc15" i]:not([style*="-color:#facc15" i]):not([style*="-color: #facc15" i]){color:var(--warn-ink)!important}
:root:not([data-theme="dark"]) [style*="color:#5aa2ff" i]:not([style*="-color:#5aa2ff" i]):not([style*="-color: #5aa2ff" i]),
:root:not([data-theme="dark"]) [style*="color: #5aa2ff" i]:not([style*="-color:#5aa2ff" i]):not([style*="-color: #5aa2ff" i]),
:root:not([data-theme="dark"]) [style*="color:#60a5fa" i]:not([style*="-color:#60a5fa" i]):not([style*="-color: #60a5fa" i]),
:root:not([data-theme="dark"]) [style*="color: #60a5fa" i]:not([style*="-color:#60a5fa" i]):not([style*="-color: #60a5fa" i]),
:root:not([data-theme="dark"]) [style*="color:#818cf8" i]:not([style*="-color:#818cf8" i]):not([style*="-color: #818cf8" i]),
:root:not([data-theme="dark"]) [style*="color: #818cf8" i]:not([style*="-color:#818cf8" i]):not([style*="-color: #818cf8" i]),
:root:not([data-theme="dark"]) [style*="color:#a78bfa" i]:not([style*="-color:#a78bfa" i]):not([style*="-color: #a78bfa" i]),
:root:not([data-theme="dark"]) [style*="color: #a78bfa" i]:not([style*="-color:#a78bfa" i]):not([style*="-color: #a78bfa" i]),
:root:not([data-theme="dark"]) [style*="color:#93c5fd" i]:not([style*="-color:#93c5fd" i]):not([style*="-color: #93c5fd" i]),
:root:not([data-theme="dark"]) [style*="color: #93c5fd" i]:not([style*="-color:#93c5fd" i]):not([style*="-color: #93c5fd" i]),
:root:not([data-theme="dark"]) [style*="color:#c4b5fd" i]:not([style*="-color:#c4b5fd" i]):not([style*="-color: #c4b5fd" i]),
:root:not([data-theme="dark"]) [style*="color: #c4b5fd" i]:not([style*="-color:#c4b5fd" i]):not([style*="-color: #c4b5fd" i]),
:root:not([data-theme="dark"]) [style*="color:#a5b4fc" i]:not([style*="-color:#a5b4fc" i]):not([style*="-color: #a5b4fc" i]),
:root:not([data-theme="dark"]) [style*="color: #a5b4fc" i]:not([style*="-color:#a5b4fc" i]):not([style*="-color: #a5b4fc" i]),
:root:not([data-theme="dark"]) [style*="color:#ce93d8" i]:not([style*="-color:#ce93d8" i]):not([style*="-color: #ce93d8" i]),
:root:not([data-theme="dark"]) [style*="color: #ce93d8" i]:not([style*="-color:#ce93d8" i]):not([style*="-color: #ce93d8" i]),
:root:not([data-theme="dark"]) [style*="color:#6c5ce7" i]:not([style*="-color:#6c5ce7" i]):not([style*="-color: #6c5ce7" i]),
:root:not([data-theme="dark"]) [style*="color: #6c5ce7" i]:not([style*="-color:#6c5ce7" i]):not([style*="-color: #6c5ce7" i]){color:var(--pri-ink)!important}
:root:not([data-theme="dark"]) [style*="color:#888" i]:not([style*="-color:#888" i]):not([style*="-color: #888" i]),
:root:not([data-theme="dark"]) [style*="color: #888" i]:not([style*="-color:#888" i]):not([style*="-color: #888" i]),
:root:not([data-theme="dark"]) [style*="color:#999" i]:not([style*="-color:#999" i]):not([style*="-color: #999" i]),
:root:not([data-theme="dark"]) [style*="color: #999" i]:not([style*="-color:#999" i]):not([style*="-color: #999" i]),
:root:not([data-theme="dark"]) [style*="color:#9ca3af" i]:not([style*="-color:#9ca3af" i]):not([style*="-color: #9ca3af" i]),
:root:not([data-theme="dark"]) [style*="color: #9ca3af" i]:not([style*="-color:#9ca3af" i]):not([style*="-color: #9ca3af" i]),
:root:not([data-theme="dark"]) [style*="color:#94a3b8" i]:not([style*="-color:#94a3b8" i]):not([style*="-color: #94a3b8" i]),
:root:not([data-theme="dark"]) [style*="color: #94a3b8" i]:not([style*="-color:#94a3b8" i]):not([style*="-color: #94a3b8" i]),
:root:not([data-theme="dark"]) [style*="color:#aaa" i]:not([style*="-color:#aaa" i]):not([style*="-color: #aaa" i]),
:root:not([data-theme="dark"]) [style*="color: #aaa" i]:not([style*="-color:#aaa" i]):not([style*="-color: #aaa" i]),
:root:not([data-theme="dark"]) [style*="color:#a0a0a0" i]:not([style*="-color:#a0a0a0" i]):not([style*="-color: #a0a0a0" i]),
:root:not([data-theme="dark"]) [style*="color: #a0a0a0" i]:not([style*="-color:#a0a0a0" i]):not([style*="-color: #a0a0a0" i]),
:root:not([data-theme="dark"]) [style*="color:#8b95a7" i]:not([style*="-color:#8b95a7" i]):not([style*="-color: #8b95a7" i]),
:root:not([data-theme="dark"]) [style*="color: #8b95a7" i]:not([style*="-color:#8b95a7" i]):not([style*="-color: #8b95a7" i]){color:var(--ink-3)!important}
/* generated: inline font sizes under 12px are raised to the 12px floor (WCAG readability, Oren's rule) */
[style*="font-size:8px"],
[style*="font-size: 8px"],
[style*="font-size:8.5px"],
[style*="font-size: 8.5px"],
[style*="font-size:9px"],
[style*="font-size: 9px"],
[style*="font-size:9.5px"],
[style*="font-size: 9.5px"],
[style*="font-size:10px"],
[style*="font-size: 10px"],
[style*="font-size:10.5px"],
[style*="font-size: 10.5px"],
[style*="font-size:11px"],
[style*="font-size: 11px"],
[style*="font-size:11.5px"],
[style*="font-size: 11.5px"],
[style*="font-size:.6rem"],
[style*="font-size: .6rem"],
[style*="font-size:.65rem"],
[style*="font-size: .65rem"],
[style*="font-size:.7rem"],
[style*="font-size: .7rem"],
[style*="font-size:.72rem"],
[style*="font-size: .72rem"],
[style*="font-size:.75rem"],
[style*="font-size: .75rem"],
[style*="font-size:0.6rem"],
[style*="font-size: 0.6rem"],
[style*="font-size:0.65rem"],
[style*="font-size: 0.65rem"],
[style*="font-size:0.7rem"],
[style*="font-size: 0.7rem"],
[style*="font-size:0.72rem"],
[style*="font-size: 0.72rem"],
[style*="font-size:0.62rem"],
[style*="font-size: 0.62rem"],
[style*="font-size:0.66rem"],
[style*="font-size: 0.66rem"],
[style*="font-size:0.68rem"],
[style*="font-size: 0.68rem"],
[style*="font-size:.62rem"],
[style*="font-size: .62rem"],
[style*="font-size:.66rem"],
[style*="font-size: .66rem"],
[style*="font-size:.68rem"],
[style*="font-size: .68rem"],
[style*="font-size:0.75rem"],
[style*="font-size: 0.75rem"],
[style*="font-size:.6em"],
[style*="font-size: .6em"],
[style*="font-size:.65em"],
[style*="font-size: .65em"],
[style*="font-size:.7em"],
[style*="font-size: .7em"],
[style*="font-size:.75em"],
[style*="font-size: .75em"],
[style*="font-size:0.7em"],
[style*="font-size: 0.7em"],
[style*="font-size:0.75em"],
[style*="font-size: 0.75em"]{font-size:12px!important}

/* ============ 6c. page contracts inside the v2 shell ============
   Page <style> blocks load after this file, so overrides here carry #app.wx-app to outrank them.

   Lists (table.lt, docs/LISTS_PAGE_HORIZONTAL_OVERFLOW.md): the table is ~1250-1480px of content
   and used to push the whole page sideways. In v2 the wrapper becomes the both-axis scroll box that
   the doc names as the coherent fix -- viewport-high, header frozen at top:0 of the box, so the
   page itself never scrolls sideways and the header still sticks on a 15,000-row list. The row
   kebab menu is position:fixed and escapes the box. Density steps A-D from the doc shave ~120px.
   On a phone (section 7) rows become cards instead. */
#app.wx-app .lt-wrap{overflow:auto;max-height:calc(100dvh - var(--top-h) - 32px);overscroll-behavior-x:contain;border-radius:inherit}
#app.wx-app .lt-wrap .lt thead th{top:0}
/* Actions stays pinned to the right edge of the box, so View/Edit/menu never need a sideways scroll.
   Classic pages only: a v2 twin (.content.wxp) lays out its own tables and must not inherit the pin. */
#app.wx-app .content:not(.wxp) .lt tr > :last-child{position:sticky;right:0;z-index:2;background:var(--surface);box-shadow:inset 1px 0 0 var(--line)}
#app.wx-app .content:not(.wxp) .lt thead tr > :last-child{z-index:11;background:var(--surface-2)}
#app.wx-app .content:not(.wxp) .lt tbody tr:hover > :last-child{background:var(--hover)}
#app.wx-app .lt th,#app.wx-app .lt td{padding-left:12px;padding-right:12px}
#app.wx-app .lt .util-detail{white-space:normal}
#app.wx-app .lt .util-bar{min-width:120px}
#app.wx-app .lt .country-cell{padding-right:8px}
#app.wx-app .lt td[style*="monospace"]{white-space:normal}
:root:not([data-theme="dark"]) #app.wx-app .lt thead th{background:var(--surface-2);color:var(--ink)}
[data-theme="dark"] #app.wx-app .lt thead th{background:var(--surface-2)}
code,pre,kbd,samp{font-size:max(12px,.92em)}
/* grid cells default to min-width:auto, so one wide table inside a 1fr column blows the grid past the
   window; its own overflow-x:auto box should absorb it instead */
#app.wx-app .content :is([style*="display:grid"],[style*="display: grid"]) > *{min-width:0}
/* rows dimmed with opacity:.5 (bot clicks, inactive postbacks) took their muted text to ~2:1; the
   row is marked by a sunk background and muted ink instead, and its status chip still says why */
#app.wx-app tr:is([style*="opacity:0.5"],[style*="opacity: 0.5"],[style*="opacity:.5"],[style*="opacity: .5"]){opacity:1!important;color:var(--ink-3)}
#app.wx-app tr:is([style*="opacity:0.5"],[style*="opacity: 0.5"],[style*="opacity:.5"],[style*="opacity: .5"]) > td{background:var(--surface-2)}
#app.wx-app :is(.copy-id-btn,.copy-name){opacity:1!important;color:var(--ink-3)}
#app.wx-app :is(.copy-id-btn,.copy-name):hover{color:var(--pri-ink)}
/* white on the reports' #e74c3c / #ef4444 buttons is 3.8:1; the same red one step deeper clears 4.5 */
#app.wx-app .btn:is([style*="background:#e74c3c" i],[style*="background: #e74c3c" i],[style*="background:#ef4444" i],[style*="background: #ef4444" i]){background:#C62E48!important;border-color:#C62E48!important}
/* campaign laps header was a fixed navy (rgba(18,26,63,.92)) under near-black light-theme text */
#app.wx-app #lapsTable thead th{background:var(--surface-2);color:var(--ink)}
#app.wx-app :is(.btn-primary,.btn.primary) :is(.muted,small){color:inherit;opacity:1}
/* button sub-captions ("manual config") were faded to .7 on top of an already muted ink */
#app.wx-app .btn small{opacity:1}
/* inline de-emphasis (opacity .6-.8 on "(optional)", secondary counts, footnotes) put muted ink under 3:1;
   the text keeps its lighter role through --ink-3 instead of transparency. Leaf text only, so a
   deliberately dimmed group or a disabled control keeps its fade */
#app.wx-app .content :is(span,small,label,div:not(:has(*))):is([style*="opacity:0.6"],[style*="opacity: 0.6"],[style*="opacity:.6"],[style*="opacity: .6"],[style*="opacity:0.7"],[style*="opacity: 0.7"],[style*="opacity:.7"],[style*="opacity: .7"],[style*="opacity:0.8"],[style*="opacity: 0.8"],[style*="opacity:.8"],[style*="opacity: .8"],[style*="color:inherit;opacity:0.5"]){opacity:1!important;color:var(--ink-3)}
/* muted captions on tinted tiles (scoring grades on rgba(...,.2)) sit on a darker ground in dark mode */
#app.wx-app .content [style*="background:rgba("] > :is(.muted,.text-muted2){color:var(--ink-2)}

/* Campaign detail (detail.html + _interventions_panel.html + the relocated settings drawers). Their
   <style> blocks were written for the old navy theme -- pale #dbe8ff/#c9d3e0 ink on rgba(255,255,255,.04)
   fills -- so in light mode the Settings menu, Campaign Control and the domains table went near-invisible.
   Colours only: ids, classes, layout and every JS hook are untouched. Both themes use the tokens. */
#app.wx-app .cc-workspace.cc-ws-open .cc-ws-inner{border-color:var(--line);background:var(--surface);box-shadow:var(--shadow-1)}
#app.wx-app .cc-ws-btn{background:var(--surface);border-color:var(--line-2);color:var(--ink);box-shadow:var(--shadow-1)}
#app.wx-app .cc-ws-btn:hover{background:var(--hover);border-color:var(--line-2)}
#app.wx-app .cc-ws-btn.cc-ws-btn-active{background:var(--pri);border-color:var(--pri);color:#fff}
#app.wx-app .cc-ws-mi{background:transparent;border-color:transparent;color:var(--ink)}
#app.wx-app .cc-ws-mi:hover{background:var(--hover);border-color:var(--line)}
#app.wx-app .cc-ws-mi.cc-ws-mi-active{background:var(--sel);border-color:color-mix(in srgb,var(--pri) 35%,transparent);color:var(--sel-ink)}
#app.wx-app .cc-ws-mi-sub{color:var(--ink-2)}
#app.wx-app #campaignControl{border-left-color:var(--pri)!important}
#app.wx-app #campaignControl > button:first-of-type{color:var(--ink)!important}
#app.wx-app .cc-toolbar{background:var(--surface-2);border-color:var(--line)}
#app.wx-app .cc-toolbar label.cc-lbl{color:var(--ink-2)}
#app.wx-app :is(.cc-input,.cc-qty){background:var(--input);border-color:var(--line-2);color:var(--ink)}
#app.wx-app .cc-input::placeholder{color:var(--ink-3)}
#app.wx-app .cc-qty[readonly]{background:var(--surface-2);border-color:var(--line);color:var(--ink-2)}
#app.wx-app .cc-seg{border-color:var(--line-2)}
#app.wx-app .cc-seg button{background:var(--surface);color:var(--ink-2);border-right-color:var(--line)}
#app.wx-app .cc-seg button:hover{background:var(--hover);color:var(--ink)}
#app.wx-app .cc-seg button.active{background:var(--sel);color:var(--sel-ink)}
#app.wx-app .cc-dropdown{background:var(--surface);border-color:var(--line-2);box-shadow:var(--shadow-2)}
#app.wx-app .cc-dd-item{color:var(--ink)}
#app.wx-app .cc-dd-item .cc-sub{color:var(--ink-2)}
#app.wx-app :is(.cc-dd-item:hover,.cc-dd-item.cc-dd-active){background:var(--sel)}
#app.wx-app .cc-chip{background:var(--sel);border-color:color-mix(in srgb,var(--pri) 35%,transparent);color:var(--sel-ink)}
#app.wx-app .cc-chip button{background:color-mix(in srgb,var(--pri) 18%,transparent);color:var(--sel-ink)}
#app.wx-app .cc-chip button:hover{background:var(--loss);color:#fff}
#app.wx-app .cc-btn{background:var(--surface);border-color:var(--line-2);color:var(--ink)}
#app.wx-app .cc-btn:hover{background:var(--hover)}
#app.wx-app .cc-btn-send{color:var(--pri-ink);border-color:color-mix(in srgb,var(--pri) 45%,transparent)}
#app.wx-app .cc-sendbar{background:color-mix(in srgb,var(--pri) 6%,var(--surface));border-color:color-mix(in srgb,var(--pri) 28%,transparent)}
#app.wx-app .cc-tablewrap{border-color:var(--line)}
#app.wx-app #campaignControl table.cc-table thead th{background:var(--surface-2);color:var(--ink-2)}
#app.wx-app #campaignControl table.cc-table tbody td{border-bottom-color:var(--line)}
#app.wx-app .cc-route-row:hover{background:var(--hover)}
#app.wx-app .cc-route-row.cc-sel{background:var(--sel)}
#app.wx-app .cc-rtag--bad{border-color:var(--loss);color:var(--loss)}
#app.wx-app .cc-rtag--warn{border-color:var(--warn-ink);color:var(--warn-ink)}
#app.wx-app #ccBudgetNote{color:var(--warn-ink)}
#app.wx-app #campaignControl table.cc-table thead th .cc-arrow{opacity:1;color:var(--ink-3)}
/* white on the old #5aa2ff "Resume review" fill was 2.6:1 */
#app.wx-app .btn-primary[style*="#5aa2ff" i]{background:var(--pri)!important;border-color:var(--pri)!important}
/* exhausted lists in the Targets picker were faded to .5 (~2.4:1); sunk row + muted ink instead,
   the red 0 free-to-send and the disabled tick still say why */
#app.wx-app table.lt-table tr.exhausted td{opacity:1;background:var(--surface-2);color:var(--ink-3)}
#app.wx-app table.lt-table tr.exhausted .lt-name{color:var(--ink-2)}
#app.wx-app :is(.pivot-dim-btn,.pivot-period-btn){border-color:var(--line-2)}
/* pivot sort hint (opacity .3) and the walk-tab separators (rgba(255,255,255,.15)) */
#app.wx-app th span[style*="opacity:0.3"]{opacity:1!important;color:var(--ink-3)}
#app.wx-app .content span[style*="color:rgba(255,255,255,0.15)"]{color:var(--ink-3)!important}
/* the laps table's first data column carries the lap id, status chips and the short-send reason;
   at 1440 it was squeezed to ~90px and wrapped into a ten-line column */
#app.wx-app #lapsTable tbody td:nth-child(2){min-width:190px}
/* Settings split: .cc-ws-inner clips (overflow:hidden) and the page forces the Lists/SIDs tables to
   overflow:visible, so the Targets table's last columns (CTR/Leads/Sales) and the scope buttons were
   cut off, not scrollable. Let the toolbar and the list sub-line wrap; whatever still does not fit
   scrolls sideways inside its own frame (no max-height, so still no nested vertical bar). */
#app.wx-app #cc-ws-content .lt-tools{flex-wrap:wrap}
#app.wx-app #cc-ws-content .lt-search{min-width:180px}
#app.wx-app #cc-ws-content .lt-scope button{white-space:nowrap}
#app.wx-app #cc-ws-content table.lt-table td.l .lt-sub{white-space:normal;min-width:220px}
#app.wx-app #cc-ws-content :is(.lt-tablewrap,.st-tablewrap,.cc-tablewrap){overflow-x:auto!important}
/* phone: the split stacks (column) but kept align-items:flex-start, so the content pane sized to its
   max-content width (~900px) inside a 350px clip. Stretch it to the column instead. */
@media (max-width:760px){
  #app.wx-app .cc-ws-split{align-items:stretch}
  #app.wx-app .cc-ws-content{width:100%}
  /* the Ad Texts and Offers tables have no wrapper of their own */
  #app.wx-app #cc-ws-content :is(table.at-table,table.of-table){display:block;max-width:100%;overflow-x:auto}
}
/* domains picker (domain_pool_picker.js renders it with navy-theme inline colours) */
:root:not([data-theme="dark"]) #app.wx-app #domain-selection-table{background:var(--surface)!important;border-color:var(--line)!important}
:root:not([data-theme="dark"]) #app.wx-app #domain-selection-table thead{background:var(--surface-2)!important}
:root:not([data-theme="dark"]) #app.wx-app #domain-selection-table :is(tr,td,div)[style*="#333"]{border-color:var(--line)!important}
:root:not([data-theme="dark"]) #app.wx-app #domain-selection-table thead tr{border-color:var(--line-2)!important}
:root:not([data-theme="dark"]) #app.wx-app #domain-selection-table [style*="color:#ddd" i]{color:var(--ink)!important}
:root:not([data-theme="dark"]) #app.wx-app #domain-selection-table [style*="color:#666" i]{color:var(--ink-3)!important}
[data-theme="dark"] #app.wx-app #domain-selection-table thead{background:var(--surface-2)!important}
/* pale greys the generated net above does not list (JS-built rows: #ddd cells, #ccc route names) */
:root:not([data-theme="dark"]) #app.wx-app .content :is([style*="color:#ddd" i],[style*="color:#ccc" i],[style*="color:#bbb" i],[style*="color:#eee" i],[style*="color:#d1d5db" i],[style*="color:#cbd5e1" i]):not([style*="-color:#" i]){color:var(--ink)!important}


/* Routes (routes.html B1W-ROUTES-SCREEN-FIX: the window scrolls, header sticks, sideways scroll only when the
   window is too narrow). The v2 rail + section menu leave ~1040px on a 1440 laptop, ~140px short of the
   table, so between the page's 1100px breakpoint and 1600px the table wraps its prose instead. */
@media (min-width:1101px) and (max-width:1600px){
  #app.wx-app .rt-table thead th{white-space:normal}
  #app.wx-app .rt-table td,#app.wx-app .rt-table thead th{padding-left:6px;padding-right:6px}
  #app.wx-app .rt-why{max-width:150px}
  #app.wx-app .rt-table td .text-muted2{white-space:normal}
}
/* generated by the B1W-UI-V2 small-text scan: page <style> rules under 12px are lifted to the
   12px floor inside the v2 shell only (#app.wx-app raises specificity above the page rule).
   Regenerate: python scripts/ui_v2_small_text_scan.py --emit <file> (scans app/templates <style> blocks). */
#app.wx-app #campaignControl table.cc-table .cc-provcol{font-size:12px!important}
#app.wx-app #campaignControl table.cc-table thead th{font-size:12px!important}
#app.wx-app #campaignControl table.cc-table thead th .cc-arrow{font-size:12px!important}
#app.wx-app #dlogs-table td.dlogs-details{font-size:12px!important}
#app.wx-app #inline-ad-texts-drawer .at-meta{font-size:12px!important}
#app.wx-app #inline-ad-texts-drawer .at-table th{font-size:12px!important}
#app.wx-app #inline-ad-texts-drawer .at-toggle{font-size:12px!important}
#app.wx-app #inline-ad-texts-drawer .at-translation{font-size:12px!important}
#app.wx-app #inline-ad-texts-drawer .translate-btn{font-size:12px!important}
#app.wx-app #inline-offers-drawer .of-redir-locked{font-size:12px!important}
#app.wx-app #inline-offers-drawer .of-redir-note{font-size:12px!important}
#app.wx-app #inline-offers-drawer .of-redir-split-sum{font-size:12px!important}
#app.wx-app #inline-offers-drawer .of-redir-split-sum button{font-size:12px!important}
#app.wx-app #inline-offers-drawer .of-redirect{font-size:12px!important}
#app.wx-app #inline-offers-drawer .of-split-foot{font-size:12px!important}
#app.wx-app #inline-offers-drawer .of-split-foot .btn{font-size:12px!important}
#app.wx-app #inline-offers-drawer .of-split-help{font-size:12px!important}
#app.wx-app #inline-offers-drawer .of-split-row .of-split-del{font-size:12px!important}
#app.wx-app #inline-offers-drawer .of-split-row input{font-size:12px!important}
#app.wx-app #inline-offers-drawer .of-split-row select{font-size:12px!important}
#app.wx-app #inline-offers-drawer .of-split-stat{font-size:12px!important}
#app.wx-app #inline-offers-drawer .of-table th{font-size:12px!important}
#app.wx-app #inline-offers-drawer .of-toggle{font-size:12px!important}
#app.wx-app #lapsTable .sending-period{font-size:12px!important}
#app.wx-app #lapsTable td{font-size:12px!important}
#app.wx-app #lapsTable th{font-size:12px!important}
#app.wx-app #ml-panel .ml-check small{font-size:12px!important}
#app.wx-app #ml-panel .ml-chip .ml-n{font-size:12px!important}
#app.wx-app #ml-panel .ml-dirty{font-size:12px!important}
#app.wx-app #ml-panel .ml-editor label{font-size:12px!important}
#app.wx-app #ml-panel .ml-hint{font-size:12px!important}
#app.wx-app #ml-panel .ml-src{font-size:12px!important}
#app.wx-app #ml-panel .ml-tag{font-size:12px!important}
#app.wx-app #panel-walk .walk-banner-timing{font-size:12px!important}
#app.wx-app #panel-walk .walk-dot{font-size:12px!important}
#app.wx-app #panel-walk .walk-evt-badge{font-size:12px!important}
#app.wx-app #panel-walk .walk-evt-snap{font-size:12px!important}
#app.wx-app #panel-walk .walk-evt-time{font-size:12px!important}
#app.wx-app #panel-walk .walk-step-label{font-size:12px!important}
#app.wx-app .ab-actions .btn small{font-size:12px!important}
#app.wx-app .ab-all-toggle{font-size:12px!important}
#app.wx-app .ab-list-stat small{font-size:12px!important}
#app.wx-app .ab-lp-info dt{font-size:12px!important}
#app.wx-app .ab-offer-card .offer-cpa-label{font-size:12px!important}
#app.wx-app .ab-offer-card .offer-name{font-size:12px!important}
#app.wx-app .ab-phone-fallback a{font-size:12px!important}
#app.wx-app .ab-step-num{font-size:12px!important}
#app.wx-app .abadge{font-size:12px!important}
#app.wx-app .at-table th .sort-arrow{font-size:12px!important}
#app.wx-app .auto-badge{font-size:12px!important}
#app.wx-app .b1w10b-btn{font-size:12px!important}
#app.wx-app .b1w10b-dialog__hint{font-size:12px!important}
#app.wx-app .b1w11-btn{font-size:12px!important}
#app.wx-app .b1w11-dialog__hint{font-size:12px!important}
#app.wx-app .btn-ghost-danger{font-size:12px!important}
#app.wx-app .bu-table th{font-size:12px!important}
#app.wx-app .c2ac-pill{font-size:12px!important}
#app.wx-app .c2ad-table code{font-size:12px!important}
#app.wx-app .c2s-badge{font-size:12px!important}
#app.wx-app .c2s-stat-nums{font-size:12px!important}
#app.wx-app .c2s-stat-pct{font-size:12px!important}
#app.wx-app .carrier-row .expand-icon{font-size:12px!important}
#app.wx-app .cc-cc{font-size:12px!important}
#app.wx-app .cc-chips-head{font-size:12px!important}
#app.wx-app .cc-rtag{font-size:12px!important}
#app.wx-app .cc-ws-mi-sub{font-size:12px!important}
#app.wx-app .dash-table th{font-size:12px!important}
#app.wx-app .dlr-section-toggle{font-size:12px!important}
#app.wx-app .dlr-stat__label{font-size:12px!important}
#app.wx-app .dlr-stat__pct{font-size:12px!important}
#app.wx-app .docs-toc .toc-h2{font-size:12px!important}
#app.wx-app .dq-bar__seg{font-size:12px!important}
#app.wx-app .dq-ring__sub{font-size:12px!important}
#app.wx-app .dr-actions .btn-mini{font-size:12px!important}
#app.wx-app .dr-archived-badge{font-size:12px!important}
#app.wx-app .dr-cc-badge{font-size:12px!important}
#app.wx-app .dr-tbl thead th{font-size:12px!important}
#app.wx-app .dre-help{font-size:12px!important}
#app.wx-app .dre-tld-chip{font-size:12px!important}
#app.wx-app .err-table td{font-size:12px!important}
#app.wx-app .err-table th{font-size:12px!important}
#app.wx-app .expand-icon{font-size:12px!important}
#app.wx-app .file-format-badge{font-size:12px!important}
#app.wx-app .filter-label{font-size:12px!important}
#app.wx-app .flow-step__order{font-size:12px!important}
#app.wx-app .flush-badge{font-size:12px!important}
#app.wx-app .fpill{font-size:12px!important}
#app.wx-app .fs{font-size:12px!important}
#app.wx-app .geo-label{font-size:12px!important}
#app.wx-app .geo-split{font-size:12px!important}
#app.wx-app .gtask__meta{font-size:12px!important}
#app.wx-app .help-icon{font-size:12px!important}
#app.wx-app .help-text{font-size:12px!important}
#app.wx-app .hlrc__sub{font-size:12px!important}
#app.wx-app .hlrc__table th{font-size:12px!important}
#app.wx-app .kpi .k{font-size:12px!important}
#app.wx-app .kpi-hint{font-size:12px!important}
#app.wx-app .la .btn{font-size:12px!important}
#app.wx-app .lc-health-pill{font-size:12px!important}
#app.wx-app .lc-list-row__cc{font-size:12px!important}
#app.wx-app .lc-list-row__nums{font-size:12px!important}
#app.wx-app .login-footer{font-size:12px!important}
#app.wx-app .lp-dim-btn{font-size:12px!important}
#app.wx-app .lp-expand-icon{font-size:12px!important}
#app.wx-app .lp-pivot-table th{font-size:12px!important}
#app.wx-app .ls{font-size:12px!important}
#app.wx-app .lt-hind{font-size:12px!important}
#app.wx-app .lt-precise{font-size:12px!important}
#app.wx-app .lt-sectlabel{font-size:12px!important}
#app.wx-app .lt-sub{font-size:12px!important}
#app.wx-app .map-label{font-size:12px!important}
#app.wx-app .matrix-tbl th{font-size:12px!important}
#app.wx-app .mp-table th{font-size:12px!important}
#app.wx-app .or-badge{font-size:12px!important}
#app.wx-app .param-info-icon{font-size:12px!important}
#app.wx-app .pivot-dim-order{font-size:12px!important}
#app.wx-app .pivot-period-btn{font-size:12px!important}
#app.wx-app .preview-table thead th{font-size:12px!important}
#app.wx-app .prov-form-hint{font-size:12px!important}
#app.wx-app .prov-label{font-size:12px!important}
#app.wx-app .prov-metric-lbl{font-size:12px!important}
#app.wx-app .provision-step{font-size:12px!important}
#app.wx-app .roi-metric__label{font-size:12px!important}
#app.wx-app .route-row .route-weight-label{font-size:12px!important}
#app.wx-app .route-subtable th{font-size:12px!important}
#app.wx-app .rr-actions .btn-mini{font-size:12px!important}
#app.wx-app .rr-actions-disabled{font-size:12px!important}
#app.wx-app .rr-audit-decision{font-size:12px!important}
#app.wx-app .rr-audit-tbl thead th{font-size:12px!important}
#app.wx-app .rr-badge{font-size:12px!important}
#app.wx-app .rr-tbl thead th{font-size:12px!important}
#app.wx-app .rrd-act{font-size:12px!important}
#app.wx-app .rrd-cond{font-size:12px!important}
#app.wx-app .rrd-mono{font-size:12px!important}
#app.wx-app .rrd-tbl thead th{font-size:12px!important}
#app.wx-app .rre-hint{font-size:12px!important}
#app.wx-app .rt-act-hint{font-size:12px!important}
#app.wx-app .rt-avail{font-size:12px!important}
#app.wx-app .rt-chip{font-size:12px!important}
#app.wx-app .rt-expand{font-size:12px!important}
#app.wx-app .rt-linkbtn{font-size:12px!important}
#app.wx-app .rt-noprice{font-size:12px!important}
#app.wx-app .rt-noprice--sm{font-size:12px!important}
#app.wx-app .rt-open__help{font-size:12px!important}
#app.wx-app .rt-preview__no{font-size:12px!important}
#app.wx-app .rt-price-save{font-size:12px!important}
#app.wx-app .rt-reopen__btn{font-size:12px!important}
#app.wx-app .rt-switch__words small{font-size:12px!important}
#app.wx-app .rt-tag{font-size:12px!important}
#app.wx-app .rt-th-sub{font-size:12px!important}
#app.wx-app .rt-type{font-size:12px!important}
#app.wx-app .rt-why{font-size:12px!important}
#app.wx-app .sample{font-size:12px!important}
#app.wx-app .sending-period{font-size:12px!important}
#app.wx-app .seq-status{font-size:12px!important}
#app.wx-app .settings-nav__sep{font-size:12px!important}
#app.wx-app .sidebar__group-header{font-size:12px!important}
#app.wx-app .sidebar__label{font-size:12px!important}
#app.wx-app .sl-dropdown-hint{font-size:12px!important}
#app.wx-app .st-chip{font-size:12px!important}
#app.wx-app .st-foot{font-size:12px!important}
#app.wx-app .st-sub{font-size:12px!important}
#app.wx-app .stat-card__hint{font-size:12px!important}
#app.wx-app .subtablink{font-size:12px!important}
#app.wx-app .super-badge{font-size:12px!important}
#app.wx-app .tip{font-size:12px!important}
#app.wx-app .tip::after{font-size:12px!important}
#app.wx-app .toggle-segs{font-size:12px!important}
#app.wx-app .type-mismatch{font-size:12px!important}
#app.wx-app .util-detail{font-size:12px!important}
#app.wx-app .v2-page .bot-strip{font-size:12px!important}
#app.wx-app .v2-page .config-label{font-size:12px!important}
#app.wx-app .v2-page .config-link{font-size:12px!important}
#app.wx-app .v2-page .kpi-label{font-size:12px!important}
#app.wx-app .v2-page .kpi-sub{font-size:12px!important}
#app.wx-app .v2-page .lap-id{font-size:12px!important}
#app.wx-app .v2-page .offer-pill{font-size:12px!important}
#app.wx-app .v2-page .qs-btn{font-size:12px!important}
#app.wx-app .v2-page .util-detail{font-size:12px!important}
#app.wx-app .v2-page .v2-badge{font-size:12px!important}
#app.wx-app .v2-page th{font-size:12px!important}
#app.wx-app .val-tooltip{font-size:12px!important}
#app.wx-app .w4-table-full th{font-size:12px!important}
#app.wx-app .why{font-size:12px!important}
#app.wx-app .why-grid dt{font-size:12px!important}
#app.wx-app .why-phase{font-size:12px!important}
#app.wx-app .why-tier{font-size:12px!important}
#app.wx-app table.lt-table th{font-size:12px!important}
#app.wx-app table.st-table th{font-size:12px!important}

/* ============ 7. responsive ============
   >=1281  rail + section menu + page, menu can be hidden (remembered).
   <=1280  section menu becomes an overlay opened from the rail or the menu button.
   <=760   phone: the rail hides too; the menu button opens rail + section menu together,
           a bottom tab bar carries the five most-used places, tables scroll inside their card. */
@media (min-width:1281px){ .wx-app.wx-side-off .wx-sidebtn{display:inline-grid} }
@media (max-width:1280px){
  .wx-app,.wx-app.wx-side-off{grid-template-columns:var(--rail-w) minmax(0,1fr);background:linear-gradient(90deg,var(--rail) 0 var(--rail-w),var(--canvas) 0)}
  .wx-app .wx-side,.wx-app.wx-side-off .wx-side{display:flex;position:fixed;left:var(--rail-w);top:0;width:min(var(--side-w),calc(100vw - var(--rail-w)));box-shadow:var(--shadow-2);transform:translateX(calc(-100% - var(--rail-w)));visibility:hidden;transition:transform .2s,visibility 0s linear .2s}
  .wx-app.wx-side-on .wx-side{transform:none;visibility:visible;transition:transform .2s}
  .wx-app.wx-side-on .wx-scrim{display:block;left:calc(var(--rail-w) + min(var(--side-w),calc(100vw - var(--rail-w))))}
  .wx-sidebtn,.wx-app.wx-side-off .wx-sidebtn{display:inline-grid}
  .wx-hide-md{display:none!important}
  .content{padding:18px 18px 28px}
  /* tablet and phone: wide tables scroll inside their own card instead of pushing the page sideways */
  .card:has(> table),.card:has(> div > table),.card:has(> form > table){overflow-x:auto;-webkit-overflow-scrolling:touch}
}
@media (max-width:1000px){
  .wx-search{flex-basis:280px}
  /* hand-written 5/6-column KPI grids (inline styles) drop to three columns */
  #app.wx-app .content [style*="grid-template-columns:repeat(5,"],#app.wx-app .content [style*="grid-template-columns:repeat(6,"]{grid-template-columns:repeat(3,minmax(0,1fr))!important}
}
@media (max-width:760px){
  :root{--top-h:54px}
  .wx-app,.wx-app.wx-side-off{grid-template-columns:minmax(0,1fr);background:var(--canvas)}
  .wx-rail{position:fixed;left:0;top:0;width:var(--rail-w);transform:translateX(-100%);visibility:hidden;transition:transform .2s,visibility 0s linear .2s}
  .wx-app.wx-side-on .wx-rail{transform:none;visibility:visible;transition:transform .2s}
  .wx-app.wx-side-on .wx-scrim{left:0}
  .wx-menubtn{display:inline-grid}
  .wx-sidebtn,.wx-app.wx-side-off .wx-sidebtn{display:none!important}
  .wx-hide-sm{display:none!important}
  .wx-top{padding:0 8px;gap:4px}
  .wx-crumbs{flex:1 1 auto;font-size:15px}
  .wx-search{display:none;position:absolute;left:8px;right:8px;top:8px;margin:0;height:38px;background:var(--surface);z-index:2}
  .wx-top.wx-searching .wx-search{display:flex}
  .wx-top.wx-searching .wx-search-x{display:inline-grid!important;width:30px;height:30px}
  .wx-searchbtn{display:inline-grid!important}
  .wx-topr{gap:2px}
  .wx-user{padding:0 3px}
  .wx-env{height:24px;padding:0 8px}
  .wx-tabbar{display:grid;grid-template-columns:repeat(5,1fr);position:fixed;left:0;right:0;bottom:0;z-index:32;height:calc(var(--tab-h) + env(safe-area-inset-bottom,0px));padding-bottom:env(safe-area-inset-bottom,0px);background:color-mix(in srgb,var(--surface) 94%,transparent);backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px);border-top:1px solid var(--line);transition:transform .2s}
  .wx-tabbar.wx-tab-hide{transform:translateY(100%)}
  .wx-tabbar a,.wx-tabbar button{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:3px;border:0;background:none;color:var(--ink-3);font-size:12px;font-weight:700;padding:0;cursor:pointer;min-width:0}
  .wx-tabbar a:hover{text-decoration:none}
  .wx-tabbar .wx-i{width:22px;height:22px}
  .wx-tabbar .is-active,.wx-tabbar [aria-expanded="true"]{color:var(--sel-ink)}
  .wx-main{padding-bottom:calc(var(--tab-h) + env(safe-area-inset-bottom,0px))}
  .gtasks{bottom:calc(var(--tab-h) + 12px + env(safe-area-inset-bottom,0px));right:12px;left:12px}
  .gtask{width:auto}
  .toasts{right:12px;left:12px;top:calc(var(--top-h) + 8px)}
  .toast{width:auto}
  .content{padding:14px 12px 24px}
  .card{padding:14px;border-radius:12px}
  .page-header{flex-direction:column;align-items:stretch}
  .page-header__actions{justify-content:flex-start}
  .h1{font-size:21px}
  .stat-card__value{font-size:22px}
  /* KPI rows: two per line on a phone instead of one screen-high stack */
  .grid:has(> .stat-card),.grid:has(> .card.stat-card){grid-template-columns:repeat(2,minmax(0,1fr))!important;gap:10px!important}
  .stat-card{padding:12px!important}
  #app.wx-app .content [style*="grid-template-columns:repeat(4,"],#app.wx-app .content [style*="grid-template-columns:repeat(5,"],#app.wx-app .content [style*="grid-template-columns:repeat(6,"]{grid-template-columns:repeat(2,minmax(0,1fr))!important}
  .stat-card{min-width:0}
  /* inline auto-fill grids whose minimum is wider than a phone (providers' 420px cards) */
  #app.wx-app .content :is([style*="minmax(420px"],[style*="minmax(340px"]){grid-template-columns:minmax(0,1fr)!important}
  #app.wx-app .ab-actions{flex-wrap:wrap}
  #app.wx-app .ab-actions .btn{min-width:0;flex:1 1 140px}
  #app.wx-app .content :is([style*="grid-template-columns:1fr 1fr"],[style*="grid-template-columns: 1fr 1fr"]){grid-template-columns:minmax(0,1fr)!important}
  /* fixed multi-column form rows (payouts' 2fr 1fr 1fr 1fr, 1fr 2fr, 240px 1fr ...) stack; stat strips of 4-5 go two-up */
  #app.wx-app .content :is([style*="grid-template-columns:2fr"],[style*="grid-template-columns: 2fr"],[style*="grid-template-columns:3fr"],[style*="grid-template-columns: 3fr"],[style*="grid-template-columns:1.5fr"],[style*="grid-template-columns: 1.5fr"],[style*="grid-template-columns:1fr 2fr"],[style*="grid-template-columns: 1fr 2fr"],[style*="grid-template-columns:240px"],[style*="grid-template-columns: 240px"],[style*="grid-template-columns:170px"],[style*="grid-template-columns: 170px"]){grid-template-columns:minmax(0,1fr)!important}
  #app.wx-app .content :is([style*="grid-template-columns:repeat(4"],[style*="grid-template-columns: repeat(4"],[style*="grid-template-columns:repeat(5"],[style*="grid-template-columns: repeat(5"]){grid-template-columns:repeat(2,minmax(0,1fr))!important}
  /* hand-written flex rows (inline styles) wrap instead of pushing the page sideways; rows that own a
     scroll or are columns are left alone */
  #app.wx-app .content :is([style*="display:flex"],[style*="display: flex"]):not([style*="flex-wrap"]):not([style*="overflow"]):not([style*="column"]){flex-wrap:wrap}
  th,td{white-space:nowrap;padding:10px 8px}
  /* 16px inputs stop iOS Safari from zooming the page on focus */
  input:not([type="checkbox"]):not([type="radio"]):not([type="range"]),select,textarea,.input{font-size:16px!important}
  .btn{min-height:40px}
  .btn-sm{min-height:34px}
  .drawer{width:100vw}
  /* card tables (table[data-wx-cards], labels set by wx.js): each row is a card of label/value
     cells in three columns; name, bars and actions take the full width. The header row stays as a
     wrap of sort chips so server-side sorting is still one tap away. */
  #app.wx-app .lt-wrap{max-height:none;overflow:visible}
  #app.wx-app table[data-wx-cards]{min-width:0!important;width:100%;display:block;border:0}
  #app.wx-app table[data-wx-cards] thead{display:block}
  #app.wx-app table[data-wx-cards] thead tr{display:flex;flex-wrap:nowrap;gap:6px;padding:10px 12px;border-bottom:1px solid var(--line);overflow-x:auto;scrollbar-width:none;-webkit-overflow-scrolling:touch}
  #app.wx-app table[data-wx-cards] thead tr::-webkit-scrollbar{display:none}
  #app.wx-app table[data-wx-cards] thead th{position:static;display:block;padding:5px 10px!important;border-radius:999px;background:var(--surface-2)!important;box-shadow:inset 0 0 0 1px var(--line)!important;font-size:12px!important;white-space:nowrap}
  #app.wx-app table[data-wx-cards] thead th:not(:has(a,input)){display:none}
  #app.wx-app table[data-wx-cards] tbody{display:block}
  #app.wx-app table[data-wx-cards] tbody tr{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:10px 12px;position:relative;padding:14px;border-bottom:1px solid var(--line)}
  #app.wx-app table[data-wx-cards] tbody td{display:block;padding:0!important;border:0!important;text-align:left!important;white-space:normal!important;min-width:0;background:none!important;font-size:14px}
  #app.wx-app table[data-wx-cards] tbody td::before{content:attr(data-label);display:block;font-family:var(--font);font-size:12px;font-weight:700;color:var(--ink-3);text-transform:none;letter-spacing:0;margin-bottom:2px}
  #app.wx-app table[data-wx-cards] tbody td[data-label=""]::before,
  #app.wx-app table[data-wx-cards] tbody td.country-cell::before,
  #app.wx-app table[data-wx-cards] tbody td.name-cell::before,
  #app.wx-app table[data-wx-cards] tbody td:has(.la)::before{display:none}
  #app.wx-app table[data-wx-cards] tbody td.name-cell,
  #app.wx-app table[data-wx-cards] tbody td:has(.la),
  #app.wx-app table[data-wx-cards] tbody td:has(.util-bar,.util-detail),
  #app.wx-app table[data-wx-cards] tbody td[colspan]{grid-column:1 / -1}
  #app.wx-app table[data-wx-cards] tbody td.country-cell{grid-column:1 / -1;order:-2;padding-right:36px!important;font-size:13px}
  #app.wx-app table[data-wx-cards] tbody td.name-cell{order:-1;max-width:none}
  #app.wx-app table[data-wx-cards] tbody td.name-cell .list-link{max-width:calc(100% - 40px);font-size:16px}
  #app.wx-app table[data-wx-cards] tbody td:has(> .item-cb){position:absolute;top:12px;right:12px}
  #app.wx-app table[data-wx-cards] tbody td:empty{display:none}
  #app.wx-app table[data-wx-cards] tr > :last-child{position:static;box-shadow:none}
  #app.wx-app table[data-wx-cards] tbody td .la{display:flex;flex-wrap:wrap;gap:8px;justify-content:flex-start}
  #app.wx-app table[data-wx-cards] tbody td .la .btn{font-size:14px;padding:8px 16px;min-height:40px}
  #app.wx-app table[data-wx-cards] tbody td .kebab-btn{min-width:44px;min-height:40px}
  #app.wx-app table[data-wx-cards] tbody tr.child-row{margin-left:14px;border-left:3px solid var(--line-2)}
  #app.wx-app table[data-wx-cards] tbody tr.child-row td.country-cell{padding-left:0!important}
}
@media (min-width:1920px){
  :root{--side-w:264px}
  .content{padding:24px 32px 40px}
}
@media (prefers-reduced-motion:reduce){*,*::before,*::after{animation:none!important;transition:none!important}}

/* ============ 8. embed + print ============ */
/* base.html's embed block hides .sidebar/.topbar; the v2 chrome has its own names. */
@media print{
  .wx-rail,.wx-side,.wx-scrim,.wx-tabbar,.wx-top{display:none!important}
  .wx-app{display:block;background:none}
  body{background:#fff}
}