/* B1W-UI-V2-PAGES: component kit for the redesigned pages (app/templates/v2/...).
   GENERATED from docs/redesign-v2/wx-shell.css + wx-aud.css (the mockup), minus the mockup's own
   frame (rail/side/top/search: the real shell in _ui_v2/ replaces it) and its review-only demo
   controls. Every rule is scoped under .wxp, the class a v2 page puts on <main class="content">,
   so classic pages never see it. Page-specific rules live in each v2 template, also under .wxp. */

/* ---- token bridge: the mockup's names on top of wx.css's palette ---- */
.content.wxp{padding:0;max-width:none;container-type:inline-size}
.wxp{--bg:var(--surface);--card:var(--surface);--shadow:var(--shadow-1);--shadow-lg:var(--shadow-2);
  --indigo:#4F5BD5;--grad:linear-gradient(100deg,#6E56FF 0%,#A24BF3 55%,#E8509E 100%);--ff:normal;
  --tlo:0;--thi:.44}
/* --thi caps the oklch lightness of tinted text (chips, tags, status). .44 rather than .5 since the
   light theme was dimmed to mid grey (28 Sep 2026): L .5 fell to ~4:1 on a tinted chip, .44 is ~5:1. */
[data-theme=dark] .wxp{--tlo:.76;--thi:1}
.wxp{font-feature-settings:var(--ff)}
.wxp a{color:inherit}
.wxp a:hover{text-decoration:none}
.wxp h1,.wxp h2,.wxp h3{color:inherit}

/* ---- utilities, colour helpers, metric identity colours ---- */
.wxp .i{width:16px;height:16px;fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round;flex:none}
.wxp .mono,.wxp .num{font-variant-numeric:tabular-nums}
.wxp h1,.wxp h2,.wxp h3,.wxp .v,.wxp .big{letter-spacing:-.02em}
.wxp .mono{font-family:var(--mono);font-size:.92em}
.wxp .muted{color:var(--ink-3)}
.wxp .gain{color:var(--gain)}
.wxp .loss{color:var(--loss)}
.wxp .sp{flex:1}
.wxp [hidden]{display:none!important}
.wxp :focus-visible{outline:2px solid var(--pri);outline-offset:2px;border-radius:6px}
.wxp .sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
.wxp .c-blue{--c:var(--blue)}
.wxp .c-green{--c:var(--green)}
.wxp .c-red{--c:var(--red)}
.wxp .c-orange{--c:var(--orange)}
.wxp .c-yellow{--c:var(--yellow)}
.wxp .c-teal{--c:var(--teal)}
.wxp .c-pink{--c:var(--pink)}
.wxp .c-gray{--c:var(--gray)}
.wxp .c-purple{--c:var(--purple)}
.wxp .c-indigo{--c:var(--indigo)}
.wxp .pill{display:inline-flex;align-items:center;gap:4px;height:22px;padding:0 8px;border-radius:99px;font-size:12px;font-weight:600;white-space:nowrap;
  background:color-mix(in srgb,var(--c,var(--gray)) 13%,transparent);color:color-mix(in srgb,var(--c,var(--gray)) 78%,var(--ink));color:oklch(from var(--c,var(--gray)) clamp(var(--tlo),l,var(--thi)) c h)}
.wxp .pill .d{width:7px;height:7px;border-radius:50%;background:var(--c,var(--gray))}
.wxp .tile{display:inline-grid;place-items:center;width:24px;height:24px;border-radius:7px;background:var(--c);background:oklch(from var(--c) min(l,.52) c h);color:#fff;flex:none;font-size:12px;font-weight:700}
.wxp .tile .i{width:14px;height:14px;stroke-width:2}
.wxp .tile.soft{background:color-mix(in srgb,var(--c) 15%,transparent);color:var(--c);color:oklch(from var(--c) clamp(var(--tlo),l,var(--thi)) c h)}
.wxp{--m-sent:var(--blue);--m-dlv:var(--teal);--m-click:var(--purple);--m-lead:var(--orange);--m-sale:var(--green);--m-cost:var(--red);--m-rev:var(--indigo);--m-roi:var(--pink)}
.wxp :is([data-col=sent],[data-col=billed],[data-k=sent],[data-m=sent]){--mc:var(--m-sent)}
.wxp [data-m=dlv]{--mc:var(--m-dlv)}
.wxp :is([data-col=clicks],[data-col=ctr],[data-k=clicks],[data-k=ctr],[data-k=clk],[data-m=click]){--mc:var(--m-click)}
.wxp :is([data-col=leads],[data-col=c2r],[data-k=leads],[data-k=c2r],[data-k=lds],[data-m=lead]){--mc:var(--m-lead)}
.wxp :is([data-col=sales],[data-k=sales],[data-k=sls],[data-m=sale]){--mc:var(--m-sale)}
.wxp :is([data-col=cost],[data-col=cpl],[data-col=cps],[data-k=cost],[data-k=cpc],[data-k=cpl],[data-k=cps],[data-k=cst],[data-m=cost]){--mc:var(--m-cost)}
.wxp :is([data-col=revenue],[data-k=revenue],[data-m=rev]){--mc:var(--m-rev)}
.wxp :is([data-col=profit],[data-col=roi],[data-k=profit],[data-k=roi],[data-k=pr],[data-m=roi]){--mc:var(--m-roi)}
.wxp th:is([data-col=sent],[data-col=billed],[data-col=clicks],[data-col=ctr],[data-col=leads],[data-col=c2r],[data-col=sales],[data-col=cost],[data-col=cpl],[data-col=cps],[data-col=revenue],[data-col=profit],[data-col=roi],[data-k=sent],[data-k=clicks],[data-k=ctr],[data-k=clk],[data-k=leads],[data-k=c2r],[data-k=lds],[data-k=sales],[data-k=sls],[data-k=cost],[data-k=cpc],[data-k=cpl],[data-k=cps],[data-k=cst],[data-k=revenue],[data-k=profit],[data-k=roi],[data-k=pr]){box-shadow:inset 0 -2px 0 color-mix(in srgb,var(--mc) 70%,transparent)}
.wxp .kpi[data-m] > .lb::before,.wxp .t[data-m] > span:first-child::before{content:"";display:inline-block;width:6px;height:6px;border-radius:50%;background:var(--mc);flex:none}
.wxp .t[data-m] > span:first-child::before{margin-right:8px;vertical-align:.12em}

/* ---- avatars ---- */
.wxp .ava{display:inline-grid;place-items:center;width:30px;height:30px;border-radius:50%;background:#B8407A linear-gradient(135deg,#C4520C,#B3218F);color:#fff;font-size:12px;font-weight:700;flex:none;border:2px solid var(--bg)}
.wxp .ava.sm{width:24px;height:24px;font-size:12px}
.wxp .ava.ai{background:#6A1FD6 var(--grad-ai)}
.wxp .ava.b{background:#0B7493 linear-gradient(135deg,#0B6FB3,#0A7A7C)}
.wxp .ava.g{background:#2F7A33 linear-gradient(135deg,#0A7A55,#4A7F10)}

/* ---- icon buttons ---- */
.wxp .ib{display:inline-grid;place-items:center;width:32px;height:32px;border-radius:8px;border:1px solid transparent;background:none;color:var(--ink-2)}
.wxp .ib:hover{background:var(--hover);color:var(--ink)}
.wxp .ib.bd{border-color:var(--line)}

/* ---- buttons, cards, KPI strip, segmented control, menus ---- */
.wxp .btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;height:32px;padding:0 12px;border-radius:10px;border:1px solid var(--line-2);background:var(--bg);color:var(--ink);font-weight:600;font-size:13px;box-shadow:0 1px 1px rgba(16,24,40,.03);white-space:nowrap;transition:background .12s,box-shadow .12s,transform .06s}
.wxp .btn:hover{background:var(--hover)}
.wxp .btn:active{transform:translateY(1px)}
.wxp .btn.pri{background:var(--pri);background:oklch(from var(--pri) min(l,.52) c h);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)}
.wxp .btn.pri:hover{background:var(--pri-2)}
.wxp .btn.ai{border:0;color:#fff;background:#6A1FD6 var(--grad-ai);box-shadow:0 4px 14px -6px #7612FA}
.wxp .btn.ai:hover{filter:brightness(1.06)}
.wxp .btn.danger{color:var(--loss)}
.wxp .btn.ghost{border-color:transparent;background:none;color:var(--ink-2)}
.wxp .btn.ghost:hover{background:var(--hover);color:var(--ink)}
.wxp .btn.sm{height:28px;padding:0 8px;font-size:12.5px;border-radius:7px}
.wxp .btn[disabled]{opacity:.45;cursor:not-allowed;transform:none}
.wxp .btn.pri[disabled]{opacity:1;background:color-mix(in srgb,var(--ink-3) 14%,transparent);border-color:transparent;color:var(--ink-3);box-shadow:none}
.wxp .split-btn{display:inline-flex}
.wxp .split-btn .btn:first-child{border-top-right-radius:0;border-bottom-right-radius:0}
.wxp .split-btn .btn:last-child{border-top-left-radius:0;border-bottom-left-radius:0;padding:0 8px;border-left:1px solid rgba(255,255,255,.28)}
.wxp .card{background:var(--card);border:1px solid var(--line);border-radius:var(--r);box-shadow:var(--shadow);min-width:0}
.wxp .ch{display:flex;align-items:center;gap:8px;padding:8px 16px;min-height:48px;border-bottom:1px solid var(--line)}
.wxp .ch h2,.wxp .ch h3{margin:0;font-size:14px;font-weight:650;letter-spacing:-.015em}
.wxp .ch .aux{font-size:12px;color:var(--ink-3)}
.wxp .ch .tile{width:24px;height:24px}
.wxp .kgrid{display:grid;grid-auto-flow:column;grid-auto-columns:minmax(0,1fr)}
.wxp .kpi{padding:12px 16px 16px;border-left:1px solid var(--line);min-width:0}
.wxp .kpi:first-child{border-left:0}
.wxp .kpi .lb{display:flex;align-items:center;gap:8px;font-size:12px;color:var(--ink-3);font-weight:500;white-space:nowrap}
.wxp .kpi .lb i{width:6px;height:6px;border-radius:50%;background:var(--c)}
.wxp .kpi .v{font-size:23px;font-weight:650;letter-spacing:-.025em;margin-top:4px;line-height:1.15;font-variant-numeric:tabular-nums;white-space:nowrap}
.wxp .kpi .s{font-size:12px;color:var(--ink-3);margin-top:2px;white-space:nowrap}
.wxp .seg{display:inline-flex;padding:3px;border-radius:9px;background:color-mix(in srgb,var(--ink-3) 13%,transparent);gap:2px}
.wxp .seg label{position:relative}
.wxp .seg input{position:absolute;opacity:0;inset:0;margin:0;cursor:pointer}
.wxp .seg span{display:block;padding:4px 12px;border-radius:7px;font-size:13px;font-weight:600;color:var(--ink-2)}
.wxp .seg input:checked + span{background:var(--card);color:var(--ink);box-shadow:var(--shadow)}
.wxp .seg input:focus-visible + span{outline:2px solid var(--pri)}
.wxp .seg.sm span{padding:3px 8px;font-size:12px}
.wxp .mwrap{position:relative;display:inline-flex}
.wxp .menu{position:absolute;top:calc(100% + 6px);right:0;z-index:45;min-width:230px;padding:4px;border-radius:11px;background:var(--card);border:1px solid var(--line-2);box-shadow:var(--shadow-lg);display:grid;gap:1px;text-align:left}
.wxp .menu[hidden]{display:none!important}
.wxp .menu .mi{display:flex;align-items:center;gap:8px;width:100%;min-height:32px;padding:4px 8px;border:0;border-radius:7px;background:none;font-size:13px;font-weight:500;color:var(--ink);text-align:left;white-space:nowrap}
.wxp .menu .mi:hover:not([disabled]){background:var(--hover)}
.wxp .menu .mi .i{color:var(--ink-3)}
.wxp .menu .mi.danger{color:var(--loss)}
.wxp .menu .mi.danger .i{color:var(--loss)}
.wxp .menu .mi.good{color:var(--gain)}
.wxp .menu .mi.good .i{color:var(--gain)}
.wxp .menu .mi[disabled]{opacity:1;color:var(--ink-3);cursor:not-allowed}
.wxp .menu .mi small{margin-left:auto;padding-left:16px;font-size:12px;color:var(--ink-3);font-weight:500}
.wxp .menu .mi .tag{margin-left:auto;font-size:12px;font-weight:700;padding:1px 8px;border-radius:5px;background:var(--sel);color:var(--sel-ink)}
.wxp .menu.desc{width:300px;max-width:calc(100vw - 16px)}
.wxp .menu .mi.d2{align-items:flex-start;padding:8px 8px;white-space:normal}
.wxp .menu .mi.d2 > .i{margin-top:2px;flex:none}
.wxp .menu .mi .mt{display:grid;gap:1px;min-width:0;flex:1}
.wxp .menu .mi .mt b{font-weight:600;font-size:13px}
.wxp .menu .mi .mt em{font-style:normal;font-size:12px;line-height:1.35;color:var(--ink-3);font-weight:450}
.wxp .menu hr{border:0;border-top:1px solid var(--line);margin:4px 2px}
.wxp .menu .mh{padding:8px 8px 3px;font-size:12px;font-weight:650;color:var(--ink-3);letter-spacing:.05em;text-transform:uppercase}
.wxp .menu label.mi{cursor:pointer}
.wxp .menu label.mi input{accent-color:var(--pri);margin:0}
.wxp .menu.cols{min-width:200px;max-height:380px;overflow:auto;grid-template-columns:1fr 1fr;min-width:320px}

/* ---- tags and Proposed markers ---- */
.wxp .ptag{display:inline-block;font-size:12px;font-weight:700;padding:1px 8px;border-radius:5px;background:var(--sel);color:var(--sel-ink);letter-spacing:.02em}
.wxp .proposed{border-style:dashed;border-color:color-mix(in srgb,var(--pri) 45%,var(--line-2));background:color-mix(in srgb,var(--pri) 3%,var(--card))}
.wxp .proposed > .ch h2::after{content:"Proposed";margin-left:8px;font-size:12px;font-weight:700;padding:2px 8px;border-radius:5px;background:var(--sel);color:var(--sel-ink);vertical-align:1px}
.wxp .proposed .pnote{margin:12px 16px 0;padding:8px 8px;border-radius:8px;font-size:12.5px;background:var(--sel);color:var(--sel-ink)}

/* ---- toast and dark polish ---- */
.wxp .toast{position:fixed;left:50%;bottom:78px;transform:translateX(-50%);z-index:50;display:flex;align-items:center;gap:8px;padding:12px 16px;border-radius:11px;background:#17171F;color:#fff;font-size:13.5px;box-shadow:var(--shadow-lg);animation:wxk-up .2s ease-out;max-width:calc(100vw - 32px)}
.wxp .toast .i{color:#6EE7B7}
[data-theme=dark] .wxp{scrollbar-color:#3A3D48 transparent}
[data-theme=dark] .wxp ::selection{background:#4A3F8F;color:#fff}
[data-theme=dark] .wxp .toast{background:#ECEDF1;color:#16171C}
[data-theme=dark] .wxp .toast .i{color:#0B8A5E}
[data-theme=dark] .wxp :is(input,select,textarea):not([type=checkbox]):not([type=radio]):not([type=range])::placeholder{color:#7F8491}
@keyframes wxk-up{from{opacity:0;transform:translate(-50%,8px)}}

/* ---- reduced motion ---- */
@media (prefers-reduced-motion:reduce){
.wxp *{animation:none!important;transition:none!important}
}

/* ---- readability ---- */
.wxp .pill .muted{color:var(--ink-2)}
.wxp th small{font-size:max(11px,.85em)}

/* ---- page parts (wx-aud.css) ---- */
.wxp .page{padding:16px 24px 48px;display:grid;gap:16px;min-width:0;grid-template-columns:minmax(0,1fr)}
.wxp .phead{display:flex;align-items:center;gap:8px;flex-wrap:wrap}
.wxp .phead .title{display:flex;align-items:center;gap:12px;min-width:0;flex:1}
.wxp .phead .tile.big{width:36px;height:36px;border-radius:10px;background:linear-gradient(145deg,#1FA6E8,#0F7FC2);box-shadow:inset 0 1px 0 rgba(255,255,255,.22),0 4px 12px -6px rgba(16,144,224,.8)}
.wxp .phead .tile.big.teal{background:linear-gradient(145deg,#1BB5B7,#0B8587);box-shadow:inset 0 1px 0 rgba(255,255,255,.22),0 4px 12px -6px rgba(15,157,159,.8)}
.wxp .phead .tile.big.violet{background:var(--brand);box-shadow:inset 0 1px 0 rgba(255,255,255,.22),0 4px 12px -6px rgba(91,67,232,.8)}
.wxp .phead .tile.big.orange{background:linear-gradient(145deg,#F59A45,#D8650F);box-shadow:inset 0 1px 0 rgba(255,255,255,.22),0 4px 12px -6px rgba(232,116,27,.8)}
.wxp .phead .tile.big .i{width:18px;height:18px}
.wxp .phead h1{margin:0;font-size:21px;font-weight:750;letter-spacing:-.025em;line-height:1.2;overflow-wrap:anywhere}
.wxp .phead p{margin:1px 0 0;font-size:12.5px;color:var(--ink-3)}
.wxp .phead .hbtns{display:flex;gap:8px;flex-wrap:wrap}
.wxp .back{display:inline-flex;align-items:center;gap:4px;font-size:12.5px;font-weight:650;color:var(--ink-3)}
.wxp .back:hover{color:var(--pri);color:oklch(from var(--pri) clamp(var(--tlo),l,var(--thi)) c h)}
.wxp .back .i{width:14px;height:14px;transform:rotate(90deg)}
.wxp .bc{display:flex;align-items:center;gap:8px;flex-wrap:wrap;font-size:12.5px;color:var(--ink-3)}
.wxp .bc a{font-weight:650;color:var(--ink-2)}
.wxp .bc a:hover{color:var(--pri);color:oklch(from var(--pri) clamp(var(--tlo),l,var(--thi)) c h);text-decoration:underline;text-underline-offset:2px}
.wxp .bc .sep{color:var(--line-2)}
.wxp .ptabs{position:sticky;top:50px;z-index:12;display:flex;gap:4px;margin:0 -24px;padding:0 24px;background:var(--bg);border-bottom:1px solid var(--line);overflow-x:auto;scrollbar-width:none}
.wxp .ptabs::-webkit-scrollbar{display:none}
.wxp .ptabs a{display:inline-flex;align-items:center;gap:8px;height:40px;padding:0 12px;font-size:13px;font-weight:650;color:var(--ink-3);border-bottom:2px solid transparent;white-space:nowrap}
.wxp .ptabs a:hover{color:var(--ink)}
.wxp .ptabs a[aria-current=page]{color:var(--ink);border-bottom-color:var(--pri)}
.wxp .ptabs a .i{width:15px;height:15px}
.wxp .ptabs .cnt{font-size:12px;font-weight:700;padding:0 8px;border-radius:99px;background:color-mix(in srgb,var(--ink-3) 13%,transparent);color:var(--ink-2)}
.wxp .note{display:flex;gap:8px;align-items:flex-start;padding:8px 16px;border-radius:12px;border:1px solid color-mix(in srgb,var(--c,var(--yellow)) 40%,var(--line));border-left:3px solid var(--c,var(--yellow));background:color-mix(in srgb,var(--c,var(--yellow)) 6%,var(--card));font-size:12.5px;line-height:1.5;color:var(--ink-2)}
.wxp .note > .i{width:15px;height:15px;color:color-mix(in srgb,var(--c,var(--yellow)) 75%,var(--ink));color:oklch(from var(--c,var(--yellow)) clamp(var(--tlo),l,var(--thi)) c h);margin-top:2px}
.wxp .note b{color:var(--ink)}
.wxp .note a{color:var(--pri);color:oklch(from var(--pri) clamp(var(--tlo),l,var(--thi)) c h);font-weight:650}
.wxp .note ul{margin:4px 0 0;padding-left:16px}
.wxp .note li{margin:2px 0}
.wxp .note.red{--c:var(--red)}
.wxp .note.green{--c:var(--green)}
.wxp .note.blue{--c:var(--blue)}
.wxp .note.violet{--c:var(--purple)}
.wxp .flash{display:flex;align-items:flex-start;gap:8px;padding:12px 16px;border-radius:12px;font-size:13px;font-weight:600;border:1px solid}
.wxp .flash .i{width:16px;height:16px;margin-top:1px;flex:none}
.wxp .flash .x{margin-left:auto;border:0;background:none;color:inherit;opacity:.6;padding:0 2px}
.wxp .flash.ok{background:color-mix(in srgb,var(--gain) 9%,var(--card));border-color:color-mix(in srgb,var(--gain) 35%,var(--line));color:color-mix(in srgb,var(--gain) 80%,var(--ink))}
.wxp .flash.err{background:color-mix(in srgb,var(--loss) 9%,var(--card));border-color:color-mix(in srgb,var(--loss) 38%,var(--line));color:color-mix(in srgb,var(--loss) 80%,var(--ink))}
.wxp .flash.err ul{margin:4px 0 0;padding-left:16px;font-weight:500}
.wxp .card > .cb{padding:16px}
.wxp .ch .sp{flex:1}
.wxp .ch p{margin:0;font-size:12px;color:var(--ink-3)}
.wxp .ch.wrap{flex-wrap:wrap;row-gap:4px}
.wxp .ch .badge{margin-left:auto}
.wxp .grid2{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:16px}
.wxp .grid3{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:16px}
.wxp .grid4{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:16px}
.wxp .split{display:grid;grid-template-columns:minmax(0,1fr) 340px;gap:16px;align-items:start}
.wxp .stack{display:grid;gap:16px;min-width:0}
.wxp .stats{display:grid;grid-template-columns:repeat(auto-fit,minmax(128px,1fr));border-top:1px solid var(--line)}
.wxp .stats.nob{border-top:0}
.wxp .st{padding:12px 16px;border-left:1px solid var(--line);min-width:0}
.wxp .stats .st:first-child{border-left:0}
.wxp .st .lb{display:flex;align-items:center;gap:8px;font-size:12px;color:var(--ink-3);font-weight:550;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.wxp .st .lb::before{content:"";width:6px;height:6px;border-radius:50%;background:var(--c,var(--ink-3));flex:none}
.wxp .st .v{font-size:21px;font-weight:700;letter-spacing:-.02em;line-height:1.2;margin-top:4px;font-variant-numeric:tabular-nums;white-space:nowrap}
.wxp .st .s{font-size:12px;color:var(--ink-3);margin-top:2px;line-height:1.35}
.wxp .st.good .v{color:var(--gain)}
.wxp .st.bad .v{color:var(--loss)}
.wxp .st.warn .v{color:color-mix(in srgb,var(--yellow) 72%,var(--ink));color:oklch(from var(--yellow) clamp(var(--tlo),l,var(--thi)) c h)}
.wxp .st.info .v{color:var(--blue);color:oklch(from var(--blue) clamp(var(--tlo),l,var(--thi)) c h)}
.wxp .st.hero .v{font-size:28px}
.wxp .dcard{padding:16px;display:grid;gap:8px;align-content:start}
.wxp .dcard .dh{display:flex;align-items:center;gap:8px;font-size:12px;font-weight:650;color:var(--ink-3);text-transform:uppercase;letter-spacing:.05em}
.wxp .dcard .dh .tile{width:24px;height:24px}
.wxp .dcard .big{font-size:26px;font-weight:750;line-height:1.1;font-variant-numeric:tabular-nums}
.wxp .dcard .kv2{display:grid;grid-template-columns:auto 1fr;gap:4px 12px;font-size:12.5px}
.wxp .dcard .kv2 dt{color:var(--ink-3)}
.wxp .dcard .kv2 dd{margin:0;text-align:right;font-weight:650;font-variant-numeric:tabular-nums}
.wxp .meter{height:8px;border-radius:4px;background:color-mix(in srgb,var(--ink-3) 15%,transparent);overflow:hidden}
.wxp .meter > i{display:block;height:100%;border-radius:4px;background:var(--c,var(--green))}
.wxp .meter.lg{height:12px;border-radius:6px}
.wxp .u-g{--c:var(--green)}
.wxp .u-o{--c:var(--yellow)}
.wxp .u-r{--c:var(--red)}
.wxp .sbar{display:flex;height:12px;border-radius:6px;overflow:hidden;background:color-mix(in srgb,var(--ink-3) 12%,transparent);gap:2px}
.wxp .sbar > i{display:block;height:100%;background:var(--c);min-width:2px}
.wxp .legend{display:flex;flex-wrap:wrap;gap:4px 16px;font-size:12px;color:var(--ink-2)}
.wxp .legend span{display:inline-flex;align-items:center;gap:8px}
.wxp .legend span::before{content:"";width:8px;height:8px;border-radius:2px;background:var(--c)}
.wxp .legend b{font-variant-numeric:tabular-nums}
.wxp .kv{display:grid;grid-template-columns:repeat(auto-fit,minmax(180px,1fr));gap:12px 24px;padding:16px;margin:0}
.wxp .kv > div{min-width:0}
.wxp .kv dt{font-size:12px;font-weight:650;color:var(--ink-3);text-transform:uppercase;letter-spacing:.05em}
.wxp .kv dd{margin:2px 0 0;font-size:13px;font-weight:600;overflow-wrap:anywhere}
.wxp details.fold > summary{list-style:none;cursor:pointer;display:flex;align-items:center;gap:8px;padding:8px 16px;min-height:48px;font-weight:650;font-size:14px}
.wxp details.fold > summary::-webkit-details-marker{display:none}
.wxp details.fold > summary .car{margin-left:auto;color:var(--ink-3);transition:transform .15s;transform:rotate(-90deg)}
.wxp details.fold[open] > summary .car{transform:none}
.wxp details.fold[open] > summary{border-bottom:1px solid var(--line)}
.wxp .stp{display:inline-flex;align-items:center;gap:4px;height:22px;padding:0 8px;border-radius:99px;font-size:12px;font-weight:700;background:color-mix(in srgb,var(--c,var(--gray)) 13%,transparent);color:color-mix(in srgb,var(--c,var(--gray)) 85%,var(--ink));color:oklch(from var(--c,var(--gray)) clamp(var(--tlo),l,var(--thi)) c h);white-space:nowrap}
.wxp .stp::before{content:"";width:6px;height:6px;border-radius:50%;background:var(--c,var(--gray))}
.wxp .stp.pulse::before{animation:wxk-pl 1.2s ease-in-out infinite}
@keyframes wxk-pl{50%{box-shadow:0 0 0 4px color-mix(in srgb,var(--c) 30%,transparent)}}
.wxp .cc{display:inline-grid;place-items:center;height:20px;min-width:28px;padding:0 4px;border-radius:5px;border:1px solid var(--line-2);font-size:12px;font-weight:800;letter-spacing:.04em;color:var(--ink-2);flex:none}
.wxp .tag{display:inline-flex;align-items:center;height:20px;padding:0 8px;border-radius:6px;font-size:12px;font-weight:700;background:color-mix(in srgb,var(--c,var(--gray)) 12%,transparent);color:color-mix(in srgb,var(--c,var(--gray)) 85%,var(--ink));color:oklch(from var(--c,var(--gray)) clamp(var(--tlo),l,var(--thi)) c h);white-space:nowrap}
.wxp .dtable{width:100%;border-collapse:separate;border-spacing:0;font-size:13px;font-variant-numeric:tabular-nums}
.wxp .dtable th{position:sticky;top:50px;z-index:4;background:var(--card);padding:8px 8px;font-size:12px;font-weight:650;color:var(--ink-3);border-bottom:1px solid var(--line-2);white-space:nowrap;text-align:right}
.wxp .dtable.tabs-on th{top:91px}
.wxp .dtable td{padding:0 8px;height:44px;border-bottom:1px solid var(--line);white-space:nowrap;text-align:right}
.wxp .dtable tbody tr:last-child td{border-bottom:0}
.wxp .dtable tbody tr:hover > td{background:var(--hover)}
.wxp .dtable th:first-child,.wxp .dtable td:first-child{padding-left:16px}
.wxp .dtable th:last-child,.wxp .dtable td:last-child{padding-right:16px}
.wxp .dtable .l{text-align:left}
.wxp .dtable .c{text-align:center}
.wxp .dtable td.w{white-space:normal;min-width:180px;padding-top:8px;padding-bottom:8px}
.wxp .dtable td a.n{font-weight:700;color:var(--ink)}
.wxp .dtable td a.n:hover{color:var(--pri);color:oklch(from var(--pri) clamp(var(--tlo),l,var(--thi)) c h);text-decoration:underline;text-underline-offset:2px}
.wxp .dtable td small{display:block;font-size:12px;color:var(--ink-3);line-height:1.35}
.wxp .dtable th a{color:inherit}
.wxp .dtable th a:hover{color:var(--ink)}
.wxp .dtable th .ar{opacity:.4;font-size:12px;margin-left:2px}
.wxp .dtable th.on{color:var(--ink)}
.wxp .dtable th.on .ar{opacity:1;color:var(--pri);color:oklch(from var(--pri) clamp(var(--tlo),l,var(--thi)) c h)}
.wxp .dtable tr.empty td{height:auto;padding:40px 16px;text-align:center;color:var(--ink-3);white-space:normal}
.wxp .dtable tr.empty td b{display:block;color:var(--ink);font-size:14px;margin-bottom:4px}
.wxp .tscroll{overflow-x:visible;position:relative}
@container (max-width:640px){
.wxp .tscroll{overflow-x:auto}
.wxp .tscroll .dtable th{position:static}
}
.wxp .acts{display:inline-flex;gap:4px;align-items:center;justify-content:flex-end}
.wxp .acts .btn.sm{height:28px;padding:0 8px}
.wxp .btn.orange{color:var(--orange);color:oklch(from var(--orange) clamp(var(--tlo),l,var(--thi)) c h);border-color:color-mix(in srgb,var(--orange) 35%,var(--line-2))}
.wxp .btn.orange:hover{background:color-mix(in srgb,var(--orange) 8%,var(--bg))}
.wxp .btn.green{color:var(--gain);border-color:color-mix(in srgb,var(--gain) 35%,var(--line-2))}
.wxp .btn.green:hover{background:color-mix(in srgb,var(--gain) 8%,var(--bg))}
.wxp .btn.red{color:var(--loss);border-color:color-mix(in srgb,var(--loss) 35%,var(--line-2))}
.wxp .btn.red:hover{background:color-mix(in srgb,var(--loss) 8%,var(--bg))}
.wxp .btn.solid-red{background:#B8283F;border-color:#B8283F;background:oklch(from var(--loss) min(l,.52) c h);border-color:oklch(from var(--loss) min(l,.52) c h);color:#fff}
.wxp .pager{display:flex;align-items:center;gap:8px;flex-wrap:wrap;padding:8px 16px;border-top:1px solid var(--line);font-size:12.5px;color:var(--ink-3)}
.wxp .pager b{color:var(--ink)}
.wxp .pager .pg{display:inline-flex;gap:4px;margin-left:auto}
.wxp .masked{letter-spacing:.02em}
.wxp .form{display:grid;gap:16px;padding:16px}
.wxp .fld{display:grid;gap:4px;min-width:0}
.wxp .fld > label,.wxp .fld > .lab{font-size:12.5px;font-weight:700;color:var(--ink)}
.wxp .fld .req{color:var(--loss)}
.wxp .fld .opt{font-weight:500;color:var(--ink-3)}
.wxp .fld .help{font-size:12px;color:var(--ink-3);line-height:1.45}
.wxp .fld .err{font-size:12px;color:var(--loss);font-weight:600}
.wxp .fin,.wxp .fsel2{height:38px;width:100%;border:1px solid var(--line-2);border-radius:10px;background:var(--input);padding:0 12px;font-size:13.5px;color:var(--ink);outline:0;min-width:0}
.wxp textarea.fin{height:auto;min-height:76px;padding:8px 12px;resize:vertical;line-height:1.45}
.wxp .fsel2{padding-right:32px}
.wxp .fin:focus,.wxp .fsel2:focus{border-color:var(--pri);box-shadow:0 0 0 3px color-mix(in srgb,var(--pri) 18%,transparent)}
.wxp .fin.bad,.wxp .fsel2.bad{border-color:var(--loss)}
.wxp .fin[readonly]{background:color-mix(in srgb,var(--ink-3) 6%,var(--input));color:var(--ink-2)}
.wxp .frow{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:16px}
.wxp .chk{display:flex;align-items:flex-start;gap:8px;font-size:13px;line-height:1.45;cursor:pointer}
.wxp .chk input{width:16px;height:16px;margin:2px 0 0;accent-color:var(--pri);flex:none}
.wxp .chk small{display:block;color:var(--ink-3);font-size:12px}
.wxp .radios{display:grid;gap:8px}
.wxp .radio{display:flex;gap:12px;align-items:flex-start;padding:12px;border:1px solid var(--line-2);border-radius:12px;cursor:pointer;background:var(--card)}
.wxp .radio:hover{border-color:color-mix(in srgb,var(--pri) 45%,var(--line-2))}
.wxp .radio:has(input:checked){border-color:var(--pri);background:color-mix(in srgb,var(--pri) 5%,var(--card));box-shadow:0 0 0 3px color-mix(in srgb,var(--pri) 12%,transparent)}
.wxp .radio input{margin:3px 0 0;accent-color:var(--pri);width:16px;height:16px;flex:none}
.wxp .radio b{display:block;font-size:13px}
.wxp .radio span{font-size:12px;color:var(--ink-3);line-height:1.45}
.wxp .radio small{display:block;font-size:12px;color:var(--ink-3);line-height:1.45;margin-top:2px}
.wxp .radio .rec{display:inline-block;margin-left:8px;font-size:12px;font-weight:700;padding:1px 8px;border-radius:5px;background:color-mix(in srgb,var(--gain) 14%,transparent);color:var(--gain);color:oklch(from var(--gain) clamp(var(--tlo),l,calc(var(--thi) - .06)) c h)}
.wxp .factions{display:flex;gap:8px;justify-content:flex-end;flex-wrap:wrap;padding:12px 16px;border-top:1px solid var(--line)}
.wxp .factions .sp{flex:1}
.wxp .drop{display:grid;place-items:center;gap:8px;padding:32px 16px;border:1.5px dashed var(--line-2);border-radius:14px;background:color-mix(in srgb,var(--pri) 3%,var(--card));text-align:center;cursor:pointer;transition:border-color .12s,background .12s}
.wxp .drop:hover,.wxp .drop.over{border-color:var(--pri);background:color-mix(in srgb,var(--pri) 7%,var(--card))}
.wxp .drop .dic{width:44px;height:44px;border-radius:12px;display:grid;place-items:center;background:var(--sel);color:var(--sel-ink)}
.wxp .drop .dic .i{width:22px;height:22px}
.wxp .drop b{font-size:14px}
.wxp .drop span{font-size:12.5px;color:var(--ink-3)}
.wxp .drop .fmts{display:flex;gap:4px;justify-content:center;flex-wrap:wrap}
.wxp .filechip{display:flex;align-items:center;gap:12px;padding:12px;border:1px solid var(--line-2);border-radius:12px;background:var(--card)}
.wxp .filechip .fi{width:40px;height:40px;border-radius:10px;display:grid;place-items:center;font-size:12px;font-weight:800;color:#fff;background:linear-gradient(145deg,#19B37B,#0B8A5E);flex:none}
.wxp .filechip .fi.csv{background:linear-gradient(145deg,#4AA8F0,#1872C4)}
.wxp .filechip b{display:block;font-size:13px;overflow-wrap:anywhere}
.wxp .filechip small{font-size:12px;color:var(--ink-3)}
.wxp .filechip .btn{margin-left:auto}
.wxp .steps{display:flex;gap:8px;align-items:center;flex-wrap:wrap;font-size:12.5px;font-weight:650;color:var(--ink-3)}
.wxp .steps span{display:inline-flex;align-items:center;gap:8px}
.wxp .steps span i{display:inline-grid;place-items:center;width:22px;height:22px;border-radius:50%;border:1.5px solid var(--line-2);font-style:normal;font-size:12px}
.wxp .steps span.on{color:var(--ink)}
.wxp .steps span.on i{background:var(--pri);background:oklch(from var(--pri) min(l,.52) c h);border-color:var(--pri);color:#fff}
.wxp .steps span.done{color:var(--ink-2)}
.wxp .steps span.done i{background:color-mix(in srgb,var(--gain) 14%,transparent);border-color:transparent;color:var(--gain)}
.wxp .steps .ln{width:24px;height:1.5px;background:var(--line-2)}
.wxp .prog{height:10px;border-radius:5px;background:color-mix(in srgb,var(--ink-3) 15%,transparent);overflow:hidden}
.wxp .prog > i{display:block;height:100%;width:0;border-radius:5px;background:repeating-linear-gradient(45deg,var(--c,var(--purple)) 0 10px,color-mix(in srgb,var(--c,var(--purple)) 75%,#fff) 10px 20px);background-size:28px 28px;animation:wxk-stripe 1s linear infinite;transition:width .4s}
@keyframes wxk-stripe{to{background-position:28px 0}}
.wxp .prog.done > i{background:var(--green);animation:none}
.wxp .prog.fail > i{background:var(--red);animation:none}
.wxp .prow{display:flex;justify-content:space-between;gap:8px;font-size:12px;color:var(--ink-3);flex-wrap:wrap}
.wxp .prow b{font-variant-numeric:tabular-nums;color:var(--ink)}
.wxp dialog.dlg{border:1px solid var(--line-2);border-radius:14px;background:var(--card);color:var(--ink);padding:0;width:min(560px,calc(100vw - 24px));box-shadow:var(--shadow-lg);max-height:calc(100vh - 40px)}
.wxp dialog.dlg::backdrop{background:rgba(10,10,20,.45);backdrop-filter:blur(2px)}
.wxp .dlg .dh{display:flex;align-items:center;gap:8px;padding:16px 16px 8px}
.wxp .dlg .dh h3{margin:0;font-size:16px;font-weight:750}
.wxp .dlg .dh .ib{margin-left:auto}
.wxp .dlg .db{padding:8px 16px 16px;display:grid;gap:8px;font-size:13px;line-height:1.55;color:var(--ink-2)}
.wxp .dlg .db p{margin:0}
.wxp .dlg .db b{color:var(--ink)}
.wxp .dlg .df{display:flex;gap:8px;justify-content:flex-end;padding:12px 16px;border-top:1px solid var(--line)}
.wxp .big-n{font-size:26px;font-weight:800;color:var(--loss);letter-spacing:-.02em;margin:8px 0;text-align:center}
.wxp .center{text-align:center}
.wxp .overlay{position:fixed;inset:0;z-index:60;display:grid;place-items:center;background:rgba(10,10,20,.5);backdrop-filter:blur(3px);padding:16px}
.wxp .overlay .ovc{width:min(440px,100%);background:var(--card);border:1px solid var(--line-2);border-radius:16px;box-shadow:var(--shadow-lg);padding:24px;display:grid;gap:12px;text-align:center}
.wxp .overlay h3{margin:0;font-size:17px}
.wxp .overlay .ph{font-size:13px;color:var(--ink-3)}
.wxp .ring{--p:0;--c:var(--green);width:112px;height:112px;border-radius:50%;display:grid;place-items:center;flex:none;background:conic-gradient(var(--c) calc(var(--p) * 1%),color-mix(in srgb,var(--ink-3) 15%,transparent) 0)}
.wxp .ring > div{width:88px;height:88px;border-radius:50%;background:var(--card);display:grid;place-items:center;align-content:center;text-align:center}
.wxp .ring b{font-size:22px;font-weight:800;line-height:1;font-variant-numeric:tabular-nums}
.wxp .ring small{font-size:12px;color:var(--ink-3);font-weight:650;margin-top:2px}
.wxp .muted-s{font-size:12px;color:var(--ink-3)}
.wxp .mono-s{font-family:var(--mono);font-size:12px}
.wxp .chips{display:flex;gap:8px;flex-wrap:wrap}
.wxp .chipc{display:inline-flex;align-items:center;gap:8px;height:26px;padding:0 12px;border-radius:99px;border:1px solid var(--line-2);font-size:12px;font-weight:600;background:var(--card)}
.wxp .chipc b{font-variant-numeric:tabular-nums;color:var(--ink-3);font-weight:700}
.wxp .tip{display:inline-grid;place-items:center;width:16px;height:16px;border-radius:50%;border:1px solid var(--line-2);font-size:12px;font-weight:800;color:var(--ink-3);cursor:help;vertical-align:1px}
@container (max-width:1100px){
.wxp .split{grid-template-columns:minmax(0,1fr)}
.wxp .grid4{grid-template-columns:repeat(2,minmax(0,1fr))}
}
@container (max-width:760px){
.wxp .grid2,.wxp .grid3{grid-template-columns:minmax(0,1fr)}
.wxp .frow{grid-template-columns:minmax(0,1fr)}
.wxp .dtable .hm{display:none}
}
@container (max-width:640px){
.wxp .page{padding:12px 8px 64px;gap:12px}
.wxp .phead h1{font-size:18px}
.wxp .ptabs{margin:0 -8px;padding:0 8px}
.wxp .grid4{grid-template-columns:repeat(2,minmax(0,1fr));gap:8px}
.wxp .st{padding:8px 12px}
.wxp .st .v{font-size:18px}
.wxp .st.hero .v{font-size:22px}
.wxp .dtable th:first-child,.wxp .dtable td:first-child{padding-left:8px}
.wxp .dtable th:last-child,.wxp .dtable td:last-child{padding-right:8px}
.wxp .dtable .hs{display:none}
.wxp .dtable td.w{min-width:0}
.wxp .phead .hbtns{width:100%}
.wxp .phead .hbtns .btn{flex:1}
.wxp .factions .btn{flex:1}
.wxp .dcard{padding:12px}
.wxp .dcard .big{font-size:22px}
}

/* ---- action cells wrap at mid widths ---- */
@container (max-width:1100px){
.wxp .dtable td .acts{flex-wrap:wrap;row-gap:4px}
}

/* ---- fit to the real shell ---- */
/* the real top bar is --top-h tall, not the mockup's 50px */
.wxp .ptabs{top:var(--top-h)}
.wxp .dtable th{top:var(--top-h)}
.wxp .dtable.tabs-on th{top:calc(var(--top-h) + 41px)}
/* the phone tab bar sits above the page bottom */
@media (max-width:760px){ .wxp .toast{bottom:calc(var(--tab-h) + 16px + env(safe-area-inset-bottom,0px))} }
/* neutralise wx.css's generic classic rules where the kit reuses the same class/element */
.wxp .card{padding:0;margin-bottom:0}
.wxp .btn{min-height:0;line-height:normal;text-decoration:none}
.wxp .btn:focus-visible{box-shadow:none}
.wxp .pill{border:0}
.wxp .toast{width:auto;border:0}
.wxp .dtable th{text-transform:none;letter-spacing:0;vertical-align:middle}
.wxp .dtable td{vertical-align:middle}
.wxp .fld > label,.wxp .chk,.wxp .radio{color:var(--ink)}
@media (max-width:760px){
  .wxp .card{padding:0;border-radius:var(--r)}
  .wxp .btn{min-height:0}
  .wxp .dtable th,.wxp .dtable td{white-space:nowrap}
}
/* per-page escape to the classic layout */
.wxp .wxp-classic{font-size:12px;font-weight:650;color:var(--ink-3)}
.wxp .wxp-classic:hover{color:var(--pri-ink)}