/* ui.css — design C «Диспетчерская»: shared components (window.PFUI markup).
   Ported from pf-private/redesign/c-control.html («base.css» + «ui.css» + overlays) with the contract §3.1 rename map.
   Rules:
   - every selector contains a .ui-* class; no bare element selectors, no old class names;
   - colours/sizes come only from tokens.css, which exist only under :root.ui-c;
   - the app has NO base reset (the mockup had one), and its inline <style> carries global
     label / input[type=text] / h1 / h2 / button font-size rules — every component below resets what it needs;
   - layout switches: phone ≤599px, rail 600–1023px, full ≥1024px; touch density (max-width:599px),(pointer:coarse).
   Form controls (.ui-in and bare controls inside .ui-fm/.ui-tb/.ui-drw/.ui-pal) carry :root.ui-c on their hover/focus
   states only, to beat ui-compat.css (0,3,1) and the global :focus-visible outline. */

/* ───────── icons + utilities ───────── */
.ui-i{width:16px;height:16px;fill:none;stroke:currentColor;stroke-width:1.75;stroke-linecap:round;stroke-linejoin:round;flex-shrink:0;vertical-align:middle;overflow:visible}
.ui-i.s{width:14px;height:14px}
.ui-i.l{width:20px;height:20px}
.ui-num{font-variant-numeric:tabular-nums}
.ui-mono{font-family:var(--font-mono);font-size:.92em;font-variant-numeric:tabular-nums}
.ui-t2{color:var(--text-2)}
.ui-t3{color:var(--text-3)}
.ui-up{color:var(--ok)}
.ui-dn{color:var(--crit)}
.ui-wr{color:var(--warn)}
.ui-sr{position:absolute;width:1px;height:1px;margin:-1px;padding:0;border:0;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
.ui-kbd{display:inline-block;font:500 10.5px/1 var(--font-mono);padding:3px 5px;border:1px solid var(--border);border-radius:var(--r-sm);color:var(--text-3);background:var(--surface-2);white-space:nowrap;font-style:normal}
.ui-sp{flex:1}
.ui-ct{font:500 var(--fs-xs) var(--font-mono);color:var(--text-3);font-style:normal;white-space:nowrap}

/* ───────── page layout ───────── */
.ui-page{display:flex;flex-direction:column;gap:14px;width:100%;max-width:1520px;min-width:0;margin:0 auto;color:var(--text);font-size:var(--fs-md);line-height:var(--lh)}
.ui-g2{display:grid;grid-template-columns:minmax(0,1fr) 384px;gap:14px;align-items:start}
.ui-col{display:flex;flex-direction:column;gap:14px;min-width:0}
.ui-g2s{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:14px;align-items:start}

/* in-content page header: title · subtitle · actions, then a tab row */
.ui-ph{display:grid;grid-template-columns:minmax(0,1fr) auto;grid-template-areas:"t r" "n n";align-items:center;column-gap:12px;row-gap:6px;min-width:0}
.ui-ph-t{grid-area:t;display:flex;align-items:baseline;gap:10px;min-width:0}
.ui-ph-t :is(h1,h2,h3){display:block;margin:0;font-size:var(--fs-xl);font-weight:var(--fw-semibold);line-height:var(--lh-tight);letter-spacing:-.01em;color:var(--text);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;min-width:0}
.ui-ph-s{font-size:var(--fs-sm);color:var(--text-3);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;min-width:0}
.ui-ph-r{grid-area:r;display:flex;align-items:center;gap:8px}
.ui-ph>.ui-tabs{grid-area:n;height:var(--tab-h);border-bottom:1px solid var(--border)}
.ui-crumb{display:flex;align-items:center;gap:8px;min-width:0;font-size:var(--fs-md)}
.ui-crumb>b{font-weight:var(--fw-semibold);color:var(--text);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;min-width:0}

/* ───────── tabs (shell header and page header) ───────── */
.ui-tabs{display:flex;align-self:stretch;min-width:0;overflow-x:auto;overflow-y:hidden;scrollbar-width:none;padding-right:16px;-webkit-mask-image:linear-gradient(90deg,black calc(100% - 24px),transparent);mask-image:linear-gradient(90deg,black calc(100% - 24px),transparent)}
.ui-tabs::-webkit-scrollbar{display:none}
.ui-tab{-webkit-appearance:none;appearance:none;position:relative;display:flex;align-items:center;gap:6px;flex-shrink:0;margin:0;padding:0 10px;border:0;border-radius:0;background:transparent;color:var(--text-2);font:inherit;font-size:var(--fs-md);font-weight:var(--fw-medium);white-space:nowrap;cursor:pointer;transition:color var(--t-fast)}
.ui-tab:is([aria-selected=true],.on){color:var(--text)}
.ui-tab:is([aria-selected=true],.on)::after{content:"";position:absolute;left:10px;right:10px;bottom:0;height:2px;border-radius:2px 2px 0 0;background:var(--accent)}

/* ───────── buttons ───────── */
.ui-btn{-webkit-appearance:none;appearance:none;display:inline-flex;align-items:center;justify-content:center;gap:6px;flex-shrink:0;height:var(--ctl-h);margin:0;padding:0 12px;border:1px solid var(--border-strong);border-radius:var(--r-md);background:var(--surface);color:var(--text);font:inherit;font-size:var(--fs-md);font-weight:var(--fw-medium);line-height:1;white-space:nowrap;text-decoration:none;cursor:pointer;transition:background var(--t-fast),border-color var(--t-fast),color var(--t-fast)}
.ui-btn.pri{background:var(--fill);color:var(--on-fill);border-color:var(--fill-border)}
.ui-btn.ghost{background:transparent;border-color:transparent;color:var(--text-2)}
.ui-btn.dng{background:var(--crit);border-color:var(--crit);color:var(--on-crit)}
.ui-btn.dng-t{color:var(--crit)}
.ui-btn.sm{height:calc(var(--ctl-h) - 4px);padding:0 9px;font-size:var(--fs-sm)}
.ui-btn:is(:disabled,[aria-disabled=true]){opacity:.5;cursor:default;pointer-events:none}
.ui-ibtn{-webkit-appearance:none;appearance:none;position:relative;display:inline-grid;place-items:center;flex-shrink:0;width:var(--ctl-h);height:var(--ctl-h);margin:0;padding:0;border:0;border-radius:var(--r-md);background:transparent;color:var(--text-2);font:inherit;font-size:var(--fs-md);line-height:1;cursor:pointer;transition:background var(--t-fast),color var(--t-fast)}
.ui-ibtn.sm{width:26px;height:26px}
.ui-ibtn[aria-pressed=true]{background:var(--surface-3);color:var(--text)}
.ui-ibtn:disabled{opacity:.4;cursor:default;pointer-events:none}
.ui-lnk{-webkit-appearance:none;appearance:none;margin:0;padding:0;border:0;background:none;color:var(--accent);font:inherit;font-size:inherit;font-weight:var(--fw-medium);text-align:inherit;text-decoration:none;cursor:pointer}

/* ───────── segmented control ───────── */
.ui-seg{display:inline-flex;gap:2px;flex-shrink:0;padding:2px;background:var(--surface-2);border:1px solid var(--border);border-radius:var(--r-md)}
.ui-seg>button{-webkit-appearance:none;appearance:none;display:inline-flex;align-items:center;justify-content:center;gap:6px;height:calc(var(--ctl-h) - 6px);margin:0;padding:0 10px;border:0;border-radius:var(--r-sm);background:transparent;color:var(--text-2);font:inherit;font-size:var(--fs-md);font-weight:var(--fw-medium);line-height:1;white-space:nowrap;cursor:pointer;transition:background var(--t-fast),color var(--t-fast)}
.ui-seg>button:is([aria-pressed=true],.on){background:var(--raise);color:var(--text);box-shadow:0 0 0 1px var(--border-strong)}
.ui-seg>button em{font:500 var(--fs-xs) var(--font-mono);color:var(--text-3);font-style:normal}
.ui-seg.xs>button{height:22px;padding:0 7px;font-size:var(--fs-xs)}
.ui-seg.full{display:flex;width:100%}
.ui-seg.full>button{flex:1;min-width:0}

/* ───────── chips · severity pills · dots · avatars ───────── */
.ui-chip{display:inline-flex;align-items:center;gap:6px;flex-shrink:0;height:calc(var(--ctl-h) - 2px);margin:0;padding:0 9px;border:1px solid var(--border);border-radius:var(--r-md);background:var(--surface);color:var(--text-2);font:inherit;font-size:var(--fs-sm);font-weight:var(--fw-medium);line-height:1;white-space:nowrap;transition:border-color var(--t-fast),color var(--t-fast)}
button.ui-chip{-webkit-appearance:none;appearance:none;cursor:pointer}
.ui-chip:is(.on,[aria-pressed=true]){background:var(--accent-soft);border-color:var(--accent-line);color:var(--text)}
.ui-chip.add{border-style:dashed;border-color:var(--border-strong)}
.ui-chip .k{color:var(--text-2);font-weight:var(--fw-regular)}
.ui-chip .x{-webkit-appearance:none;appearance:none;display:grid;place-items:center;width:20px;height:20px;margin:0 -5px 0 0;padding:0;border:0;border-radius:var(--r-sm);background:transparent;color:var(--text-2);font:inherit;cursor:pointer}
.ui-pill{display:inline-flex;align-items:center;gap:6px;flex-shrink:0;height:20px;padding:0 7px;border-radius:var(--r-sm);background:var(--surface-2);color:var(--text-2);font-size:var(--fs-sm);font-weight:var(--fw-medium);font-style:normal;line-height:1;white-space:nowrap;vertical-align:middle}
.ui-pill::before{content:"";width:6px;height:6px;border-radius:50%;background:currentColor;flex-shrink:0}
.ui-pill.nodot::before{display:none}
.ui-pill.ok{color:var(--ok);background:var(--ok-bg)}
.ui-pill.warn{color:var(--warn);background:var(--warn-bg)}
.ui-pill.crit{color:var(--crit);background:var(--crit-bg)}
.ui-pill.info{color:var(--info);background:var(--info-bg)}
.ui-pill.ai{color:var(--ai);background:var(--ai-bg)}
.ui-dot{display:inline-block;flex-shrink:0;width:8px;height:8px;border-radius:50%;background:var(--text-3);vertical-align:middle;font-style:normal}
.ui-dot.ok{background:var(--ok)}
.ui-dot.warn{background:var(--warn)}
.ui-dot.crit{background:var(--crit)}
.ui-dot.info{background:var(--info)}
.ui-av{display:inline-grid;place-items:center;flex-shrink:0;width:24px;height:24px;border-radius:50%;overflow:hidden;background:var(--surface-3);color:var(--text-2);font-size:10px;font-weight:var(--fw-semibold);font-style:normal;line-height:1;letter-spacing:.02em}
.ui-av.xs{width:22px;height:22px;font-size:9.5px}
.ui-av.lg{width:36px;height:36px;font-size:12px}
.ui-av.sq{border-radius:var(--r-md)}
.ui-av.ai{background:var(--ai-bg);color:var(--ai)}
.ui-av.ok{background:var(--ok-bg);color:var(--ok)}
.ui-av.warn{background:var(--warn-bg);color:var(--warn)}
.ui-av.crit{background:var(--crit-bg);color:var(--crit)}
.ui-av.info{background:var(--info-bg);color:var(--info)}
.ui-av>img{width:100%;height:100%;object-fit:cover}

/* ───────── panel ───────── */
.ui-pn{min-width:0;overflow:hidden;background:var(--surface);color:var(--text);border:1px solid var(--border);border-radius:var(--r-lg);line-height:var(--lh)}
.ui-pn-h{display:flex;align-items:center;gap:8px;min-height:44px;padding:0 14px;border-bottom:1px solid var(--border)}
.ui-pn-h:last-child{border-bottom:0}
.ui-pn-h :is(h2,h3,h4){display:block;min-width:0;margin:0;font-size:var(--fs-md);font-weight:var(--fw-semibold);line-height:var(--lh-tight);color:var(--text);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.ui-pn-h .r{display:flex;align-items:center;gap:8px;min-width:0;margin-left:auto}
.ui-pn-b{padding:14px}
.ui-pn-f{display:flex;align-items:center;gap:8px;padding:10px 14px;border-top:1px solid var(--border);font-size:var(--fs-sm)}

/* ───────── KPI cards + sparkline + meter ───────── */
/* Grid lines: each card draws the line on its LEADING edges (left/top) onto the earlier neighbour, which is already
   painted, so the line stays visible; the panel's overflow:hidden clips the lines that fall outside the grid. */
.ui-kpis{display:grid;grid-template-columns:repeat(auto-fit,minmax(176px,1fr))}
.ui-kpi{position:relative;display:flex;flex-direction:column;gap:6px;min-width:0;padding:14px 16px 12px;background:var(--surface);color:var(--text);text-align:left;box-shadow:-1px 0 0 var(--border),0 -1px 0 var(--border);transition:background var(--t-fast)}
.ui-kpi[role=button]{cursor:pointer}
.ui-kpi-l{font-size:var(--fs-sm);font-weight:var(--fw-medium);color:var(--text-2);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.ui-kpi:is(.st-ok,.st-warn,.st-crit,.st-info) .ui-kpi-l::before{content:"";display:inline-block;width:6px;height:6px;margin:0 6px 1px 0;border-radius:50%;vertical-align:middle;background:var(--text-3)}
.ui-kpi.st-ok .ui-kpi-l::before{background:var(--ok)}
.ui-kpi.st-warn .ui-kpi-l::before{background:var(--warn)}
.ui-kpi.st-crit .ui-kpi-l::before{background:var(--crit)}
.ui-kpi.st-info .ui-kpi-l::before{background:var(--info)}
.ui-kpi-v{font-size:var(--fs-3xl);font-weight:var(--fw-semibold);line-height:1.1;letter-spacing:var(--ls-num);font-variant-numeric:tabular-nums;color:var(--text);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.ui-kpi-v small{margin-left:5px;font-size:.5em;font-weight:var(--fw-regular);letter-spacing:0;color:var(--text-2)}
.ui-kpis.sm .ui-kpi-v{font-size:var(--fs-2xl)}
.ui-kpi-f{display:flex;flex-wrap:wrap;align-items:flex-end;justify-content:space-between;gap:6px 8px;min-height:20px}
.ui-kpi-f>.ui-spark{margin-left:auto}
.ui-kpi-d{display:inline-flex;flex:1 1 auto;align-items:flex-start;gap:4px;min-width:0;font-size:var(--fs-sm);font-weight:var(--fw-medium);line-height:1.3;color:var(--text-3)}
.ui-kpi-d>.ui-i{margin-top:1px}
.ui-kpi-d.up{color:var(--ok)}
.ui-kpi-d.dn{color:var(--crit)}
.ui-kpi-d.wr{color:var(--warn)}
.ui-kpi-m{margin-top:2px;padding-top:8px;border-top:1px solid var(--border-soft);font-size:var(--fs-xs);color:var(--text-3);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.ui-spark{display:block;flex-shrink:0;overflow:visible;color:var(--accent)}
.ui-spark.ok{color:var(--ok)}
.ui-spark.warn{color:var(--warn)}
.ui-spark.crit{color:var(--crit)}
.ui-spark.info{color:var(--info)}
.ui-spark .sa{fill:currentColor;stroke:none;opacity:.12}
.ui-spark .sl{fill:none;stroke:currentColor;stroke-width:1.5;stroke-linejoin:round;stroke-linecap:round}
.ui-spark .sn{fill:none;stroke:var(--text-3);stroke-width:1;stroke-dasharray:3 3}
.ui-spark .sd{fill:currentColor;stroke:var(--surface);stroke-width:2}
.ui-meter{display:block;min-width:48px;height:4px;border-radius:2px;overflow:hidden;background:var(--surface-3)}
.ui-meter>i{display:block;height:100%;border-radius:2px;background:var(--accent)}
.ui-meter.ok>i{background:var(--ok)}
.ui-meter.warn>i{background:var(--warn)}
.ui-meter.crit>i{background:var(--crit)}
.ui-meter.info>i{background:var(--info)}

/* ───────── table (desktop) + card list (phone) ───────── */
.ui-tbl-w{min-width:0;overflow-x:auto}
.ui-tbl{width:100%;border-collapse:separate;border-spacing:0;color:var(--text);font-size:var(--fs-md)}
.ui-tbl th{height:32px;padding:0 12px;border-bottom:1px solid var(--border);background:var(--surface);color:var(--text-3);font-size:var(--fs-sm);font-weight:var(--fw-medium);text-align:left;vertical-align:middle;white-space:nowrap}
.ui-tbl td{height:var(--row-h);padding:0 12px;border-bottom:1px solid var(--border-soft);vertical-align:middle;white-space:nowrap;font-stretch:var(--wdth-dense)}
.ui-tbl tbody tr:last-child td{border-bottom:0}
.ui-tbl tbody tr:is([data-cgo],[role=button],[tabindex]){cursor:pointer}
.ui-tbl tr.sel td{background:var(--accent-soft)}
.ui-tbl tr.sel td:first-child{box-shadow:inset 2px 0 0 var(--accent)}
.ui-tbl .num{text-align:right;font-variant-numeric:tabular-nums}
.ui-tbl td.t{max-width:0;width:38%;overflow:hidden;text-overflow:ellipsis}
.ui-tbl td.t b{font-weight:var(--fw-medium)}
.ui-tbl td.act{width:40px;padding:0 6px;text-align:right}
.ui-tbl tr.grp td{height:36px;border-bottom:1px solid var(--border);background:var(--canvas);cursor:default}
.ui-tbl tr.grp .gi{display:flex;align-items:center;gap:10px}
.ui-tbl.tall td{height:46px}
.ui-tbl tr.off td{opacity:.55}
.ui-ml{display:none;margin:0;padding:0;list-style:none}
.ui-ml>li{display:flex;align-items:center;gap:12px;min-height:64px;padding:10px 16px;border-bottom:1px solid var(--border-soft)}
.ui-ml>li:last-child{border-bottom:0}
.ui-ml>li:is([data-cgo],[role=button],[tabindex]){cursor:pointer}
.ui-ml>li.mlg{gap:10px;min-height:40px;border-bottom:1px solid var(--border);background:var(--canvas);cursor:default}
.ui-ml>li.off{opacity:.55}
.ui-ml>li.sel{background:var(--accent-soft);box-shadow:inset 2px 0 0 var(--accent)}
.ui-ml .lead{display:inline-flex;flex-shrink:0}
.ui-ml .m{flex:1;min-width:0}
.ui-ml .m>b{display:block;font-weight:var(--fw-medium);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.ui-ml .m>small{display:block;font-size:var(--fs-sm);color:var(--text-3);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.ui-ml .v{text-align:right;font-weight:var(--fw-medium);font-variant-numeric:tabular-nums;white-space:nowrap}

/* ───────── toolbar · search · sums · pagination · empty · skeleton ───────── */
.ui-tb{display:flex;align-items:center;flex-wrap:wrap;gap:8px;min-width:0}
.ui-pn>.ui-tb{padding:10px 14px;border-bottom:1px solid var(--border)}
.ui-search{position:relative;display:block;flex-shrink:0;width:240px;max-width:100%;margin:0;font-weight:var(--fw-regular)}
.ui-search>.ui-i{position:absolute;left:9px;top:50%;transform:translateY(-50%);color:var(--text-3);pointer-events:none}
.ui-sumline{display:flex;flex-wrap:wrap;gap:4px 20px;color:var(--text-2);font-size:var(--fs-sm)}
.ui-sumline b{color:var(--text);font-weight:var(--fw-semibold);font-variant-numeric:tabular-nums}
.ui-sumline .ui-dn b{color:var(--crit)}
.ui-sum3{display:flex;flex-wrap:wrap;gap:10px 28px;padding:12px 14px;border-bottom:1px solid var(--border)}
.ui-sum3:last-child{border-bottom:0}
.ui-sum3>div{display:flex;flex-direction:column;gap:2px;min-width:0}
.ui-sum3 small{font-size:var(--fs-xs);color:var(--text-3)}
.ui-sum3 b{font-size:var(--fs-xl);font-weight:var(--fw-semibold);letter-spacing:var(--ls-num);font-variant-numeric:tabular-nums;white-space:nowrap}
.ui-pg{display:flex;align-items:center;gap:6px;min-height:40px;padding:6px 8px 6px 14px;border-top:1px solid var(--border);color:var(--text-3);font-size:var(--fs-sm)}
.ui-empty{display:flex;flex-direction:column;align-items:center;gap:6px;padding:36px 16px;color:var(--text);text-align:center}
.ui-empty .ic{display:grid;place-items:center;width:40px;height:40px;margin-bottom:6px;border-radius:50%;background:var(--surface-2);color:var(--text-2)}
.ui-empty>b{font-size:var(--fs-lg);font-weight:var(--fw-semibold)}
.ui-empty>p{max-width:46ch;margin:0 0 8px;color:var(--text-2)}
.ui-empty.sm{gap:4px;padding:18px 16px}
.ui-empty.sm .ic{width:32px;height:32px;margin-bottom:2px}
.ui-empty.sm>b{font-size:var(--fs-md)}
.ui-skl{padding:6px 0}
.ui-skr{display:flex;align-items:center;gap:16px;height:var(--row-h);padding:0 14px;border-bottom:1px solid var(--border-soft)}
.ui-skr:last-child{border-bottom:0}
.ui-skr .ui-sk:nth-child(2){margin-left:auto}
.ui-sk{display:block;height:10px;border-radius:var(--r-sm);background:linear-gradient(90deg,var(--surface-2) 0,var(--surface-3) 40%,var(--surface-2) 80%) 0 0/300% 100%;animation:ui-sh 1.4s linear infinite}
@keyframes ui-sh{to{background-position:-150% 0}}

/* ───────── rows: actionable · signal · navigation · brief · key-value · tiles · alert ───────── */
.ui-row{display:flex;align-items:center;flex-wrap:wrap;gap:8px 12px;padding:11px 14px;border-bottom:1px solid var(--border-soft);transition:opacity var(--t-panel),transform var(--t-panel)}
.ui-row:last-child{border-bottom:0}
.ui-row>.m{flex:1;min-width:0}
.ui-row .m>b{display:block;font-weight:var(--fw-medium);overflow-wrap:anywhere}
.ui-row .m>small{display:flex;align-items:center;flex-wrap:wrap;gap:5px;font-size:var(--fs-sm);color:var(--text-3)}
.ui-row .acts{display:flex;flex-wrap:wrap;justify-content:flex-end;gap:4px;flex-shrink:0}
.ui-row>.full{flex:1 0 100%;min-width:0}
.ui-row.gone{opacity:0;transform:translateX(12px)}
.ui-sig{display:grid;grid-template-columns:104px minmax(0,1fr) auto 48px minmax(40px,auto);grid-template-areas:"p x w t a";align-items:center;gap:12px;min-height:42px;padding:6px 14px;border-bottom:1px solid var(--border-soft);transition:background var(--t-fast)}
.ui-sig:last-child{border-bottom:0}
.ui-sig:is([role=button],[data-cgo]){cursor:pointer}
.ui-sig>.ui-pill{grid-area:p;justify-self:start;max-width:100%}
.ui-sig>.tx{grid-area:x;min-width:0;overflow-wrap:anywhere}
.ui-sig>.w{grid-area:w;max-width:240px;color:var(--text-3);font-size:var(--fs-sm);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.ui-sig>time{grid-area:t;font:var(--fs-xs) var(--font-mono);color:var(--text-3);text-align:right;white-space:nowrap}
.ui-sig>.a{grid-area:a;justify-self:end;display:flex;align-items:center;gap:4px}
.ui-li{-webkit-appearance:none;appearance:none;display:flex;align-items:center;gap:12px;width:100%;min-height:44px;margin:0;padding:8px 14px;border:0;border-bottom:1px solid var(--border-soft);border-radius:0;background:transparent;color:var(--text);font:inherit;font-size:var(--fs-md);line-height:var(--lh-tight);text-align:left;text-decoration:none;cursor:pointer;transition:background var(--t-fast)}
.ui-li:last-child{border-bottom:0}
.ui-li>.ui-i{color:var(--text-2)}
.ui-li>.ui-i:last-child:not(:first-child){color:var(--text-3)}
.ui-li .lbl{flex:1;min-width:0;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.ui-li .meta{flex-shrink:0;max-width:45%;color:var(--text-3);font-size:var(--fs-sm);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.ui-li:is(.on,[aria-current=page],[aria-current=true],[aria-selected=true]){background:var(--accent-soft)}
.ui-li:disabled{opacity:.5;cursor:default}
.ui-brief{display:flex;align-items:flex-start;gap:12px;padding:12px 14px}
.ui-brief>.m{flex:1;min-width:0}
.ui-brief .bh{display:flex;align-items:baseline;flex-wrap:wrap;gap:8px;margin-bottom:2px}
.ui-brief .bh>b{font-weight:var(--fw-semibold)}
.ui-brief .bh>span:not(.ui-pill){font-size:var(--fs-sm);color:var(--text-3)}
.ui-brief p{margin:0;color:var(--text)}
.ui-brief p b{font-weight:var(--fw-semibold)}
.ui-kv{margin:0}
.ui-kv>div{display:flex;align-items:center;justify-content:space-between;gap:12px;min-height:38px;padding:0 14px;border-bottom:1px solid var(--border-soft)}
.ui-kv>div:last-child{border-bottom:0}
.ui-kv dt{color:var(--text-2)}
.ui-kv dd{margin:0;font-weight:var(--fw-semibold);font-variant-numeric:tabular-nums;text-align:right}
.ui-tiles{display:grid;grid-template-columns:repeat(auto-fill,minmax(176px,1fr))}
.ui-tile{-webkit-appearance:none;appearance:none;position:relative;display:flex;flex-direction:column;align-items:stretch;gap:2px;min-width:0;margin:0;padding:12px 14px;border:0;border-radius:0;background:var(--surface);color:var(--text);font:inherit;font-size:var(--fs-md);text-align:left;cursor:pointer;box-shadow:-1px 0 0 var(--border),0 -1px 0 var(--border);transition:background var(--t-fast)}
.ui-tile[aria-pressed=true]{background:var(--accent-soft)}
.ui-tile[aria-pressed=true]::after{content:"";position:absolute;left:0;right:0;bottom:0;height:2px;background:var(--accent)}
.ui-tile .n{display:flex;align-items:center;gap:6px;min-width:0;font-size:var(--fs-sm);font-weight:var(--fw-medium);color:var(--text-2);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.ui-tile .b{margin-top:6px;font-size:var(--fs-xl);font-weight:var(--fw-semibold);letter-spacing:var(--ls-num);font-variant-numeric:tabular-nums;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.ui-tile .b small{margin-left:3px;font-size:.75em;font-weight:var(--fw-regular);letter-spacing:0;color:var(--text-2)}
.ui-tile>small{font-size:var(--fs-xs);color:var(--text-3);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.ui-alert{display:flex;align-items:flex-start;gap:8px;padding:10px 12px;border:1px solid var(--border);border-radius:var(--r-md);background:var(--surface-2);color:var(--text);font-size:var(--fs-md);line-height:var(--lh)}
.ui-alert>.ui-i{margin-top:2px}
.ui-alert p{margin:0}
.ui-alert.ok{background:var(--ok-bg);border-color:color-mix(in srgb,var(--ok) 35%,transparent);box-shadow:inset 3px 0 0 var(--ok)}
.ui-alert.warn{background:var(--warn-bg);border-color:color-mix(in srgb,var(--warn) 35%,transparent);box-shadow:inset 3px 0 0 var(--warn)}
.ui-alert.crit{background:var(--crit-bg);border-color:color-mix(in srgb,var(--crit) 35%,transparent);box-shadow:inset 3px 0 0 var(--crit)}
.ui-alert.info{background:var(--info-bg);border-color:color-mix(in srgb,var(--info) 35%,transparent);box-shadow:inset 3px 0 0 var(--info)}
.ui-alert.ok>.ui-i{color:var(--ok)}
.ui-alert.warn>.ui-i{color:var(--warn)}
.ui-alert.crit>.ui-i{color:var(--crit)}
.ui-alert.info>.ui-i{color:var(--info)}

/* ───────── forms ───────── */
.ui-fm{display:flex;flex-direction:column;gap:16px;min-width:0}
.ui-fl{display:flex;flex-direction:column;gap:6px;min-width:0}
.ui-fl>:is(label,.lb){display:block;margin:0;font-size:var(--fs-sm);font-weight:var(--fw-medium);line-height:var(--lh-tight);color:var(--text-2)}
.ui-help{display:block;margin:0;font-size:var(--fs-xs);line-height:var(--lh);color:var(--text-3)}
.ui-row2{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:12px}
.ui-amt{position:relative}
.ui-amt>span{position:absolute;right:12px;top:50%;transform:translateY(-50%);color:var(--text-3);pointer-events:none}
.ui-drop{position:relative;display:flex;align-items:center;gap:12px;margin:0;padding:14px;border:1px dashed var(--border-input);border-radius:var(--r-md);background:var(--field);color:var(--text-2);font-size:var(--fs-md);font-weight:var(--fw-regular);cursor:pointer;transition:border-color var(--t-fast)}
.ui-drop>input{position:absolute;inset:0;width:100%;height:100%;margin:0;opacity:0;cursor:pointer}
.ui-drop b{display:block;font-weight:var(--fw-medium);color:var(--text)}
.ui-drop small{display:block;font-size:var(--fs-sm);color:var(--text-3)}
.ui-drop .ic{display:grid;place-items:center;flex-shrink:0;width:36px;height:36px;border-radius:var(--r-md);background:var(--surface-2)}
.ui-drop:is(.on,:focus-within){border-color:var(--accent)}
.ui-swl{display:inline-flex;align-items:center;gap:8px;min-height:var(--ctl-h);margin:0;font-size:var(--fs-sm);font-weight:var(--fw-regular);color:var(--text-2);white-space:nowrap;cursor:pointer;-webkit-user-select:none;user-select:none}

/* text controls: .ui-in anywhere + bare controls inside .ui-fm/.ui-tb/.ui-drw/.ui-pal (and nowhere else).
   0,1,1 beats the app's global input[type=text] (padding 13px 14px, margin-bottom 14px) by order. */
input.ui-in,select.ui-in,textarea.ui-in,
:where(.ui-fm,.ui-tb,.ui-drw,.ui-pal) input:not([type=checkbox],[type=radio],[type=file],[type=range],[type=hidden],[type=color],[type=button],[type=submit],[type=reset],[type=image]),
:where(.ui-fm,.ui-tb,.ui-drw,.ui-pal) select:not([multiple],[size]),
:where(.ui-fm,.ui-tb,.ui-drw,.ui-pal) textarea{-webkit-appearance:none;appearance:none;display:block;width:100%;min-width:0;height:var(--ctl-h);margin:0;padding:0 10px;border:1px solid var(--border-input);border-radius:var(--r-md);background:var(--field);box-shadow:none;color:var(--text);font:inherit;font-size:var(--fs-input);line-height:normal;font-variant-numeric:tabular-nums;transition:border-color var(--t-fast),box-shadow var(--t-fast)}
select.ui-in,
:where(.ui-fm,.ui-tb,.ui-drw,.ui-pal) select:not([multiple],[size]){padding-right:30px;background:var(--field) var(--chev) no-repeat right 8px center/16px;text-overflow:ellipsis;cursor:pointer}
textarea.ui-in,
:where(.ui-fm,.ui-tb,.ui-drw,.ui-pal) textarea{height:auto;min-height:76px;padding:8px 10px;line-height:var(--lh);resize:vertical}
input.ui-in::-webkit-calendar-picker-indicator,:where(.ui-fm,.ui-tb,.ui-drw,.ui-pal) input::-webkit-calendar-picker-indicator{opacity:.65;cursor:pointer}
/* поле с подсказками (list=…): та же стрелка, что у select; нативный треугольник Chrome прозрачный, но по-прежнему открывает список */
input.ui-in[list]{padding-right:30px;background:var(--field) var(--chev) no-repeat right 8px center/16px}
input.ui-in[list]::-webkit-calendar-picker-indicator{opacity:0}
input.ui-in::-webkit-search-cancel-button,:where(.ui-fm,.ui-tb,.ui-drw,.ui-pal) input::-webkit-search-cancel-button{display:none;-webkit-appearance:none}
:root.ui-c :is(input,select,textarea).ui-in:hover,
:root.ui-c :where(.ui-fm,.ui-tb,.ui-drw,.ui-pal) :is(input:not([type=checkbox],[type=radio],[type=file],[type=range]),select,textarea):hover{border-color:var(--text-3)}
:root.ui-c :is(input,select,textarea).ui-in:focus,
:root.ui-c :where(.ui-fm,.ui-tb,.ui-drw,.ui-pal) :is(input:not([type=checkbox],[type=radio],[type=file],[type=range]),select,textarea):focus{outline:none;border-color:var(--accent);box-shadow:0 0 0 3px var(--accent-soft)}
:root.ui-c :is(input,select,textarea).ui-in:disabled,
:root.ui-c :where(.ui-fm,.ui-tb,.ui-drw,.ui-pal) :is(input,select,textarea):disabled{opacity:.55;cursor:default}
/* inside a toolbar, direct controls keep their natural width */
.ui-tb>input.ui-in,.ui-tb>select.ui-in,
:where(.ui-tb)>input:not([type=checkbox],[type=radio],[type=file],[type=range],[type=hidden]),
:where(.ui-tb)>select:not([multiple],[size]){width:auto;flex:none}
.ui-search>input{width:100%;padding-left:30px}
.ui-amt>input{height:calc(var(--ctl-h) + 8px);padding-right:38px;text-align:right;font-size:var(--fs-xl);font-weight:var(--fw-semibold);font-variant-numeric:tabular-nums}
/* checkbox + switch */
input.ui-cb,input.ui-sw{-webkit-appearance:none;appearance:none;position:relative;flex-shrink:0;width:16px;height:16px;margin:0;padding:0;border:1px solid var(--border-input);border-radius:var(--r-sm);background:var(--field);vertical-align:middle;cursor:pointer;transition:background-color var(--t-fast),border-color var(--t-fast),background-position var(--t-fast) var(--ease)}
input.ui-cb:checked{background:var(--accent) var(--tick) center/12px no-repeat;border-color:var(--accent)}
input.ui-sw{width:30px;height:18px;border-radius:9px;background-color:var(--surface-3);background-image:radial-gradient(circle closest-side,var(--text-2) 92%,transparent 100%);background-repeat:no-repeat;background-size:12px 12px;background-position:2px 50%}
input.ui-sw:checked{background-color:var(--accent);border-color:var(--accent);background-image:radial-gradient(circle closest-side,var(--on-accent) 92%,transparent 100%);background-position:14px 50%}
:is(input.ui-cb,input.ui-sw):disabled{opacity:.5;cursor:default}

/* ───────── overlays: scrim · drawer · palette · toasts (markup from ui.js) ───────── */
.ui-scrim{position:fixed;inset:0;z-index:var(--z-scrim);background:var(--scrim);opacity:0;pointer-events:none;transition:opacity var(--t-panel) var(--ease)}
.ui-scrim.on{opacity:1;pointer-events:auto}
.ui-drw{position:fixed;top:0;right:0;bottom:0;z-index:var(--z-drw);display:flex;flex-direction:column;width:min(560px,100%);padding-top:var(--safe-t);background:var(--surface);color:var(--text);border-left:1px solid var(--border-strong);box-shadow:var(--shadow-pop);font-size:var(--fs-md);line-height:var(--lh);transform:translateX(102%);visibility:hidden;transition:transform var(--t-panel) var(--ease),visibility 0s var(--t-panel)}
.ui-drw.on{transform:none;visibility:visible;transition:transform var(--t-panel) var(--ease),visibility 0s}
.ui-drw>.grab,.ui-pal>.grab{display:none}
.ui-drw-h{display:flex;align-items:center;flex-shrink:0;gap:8px;min-height:52px;padding:8px 10px 8px 16px;border-bottom:1px solid var(--border)}
.ui-drw-h .ttl2{display:flex;flex-direction:column;flex:1;min-width:0}
.ui-drw-h .ttl2>b{font-size:var(--fs-lg);font-weight:var(--fw-semibold);line-height:var(--lh-tight);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;outline:none}
.ui-drw-h .ttl2>b:focus-visible{outline:none}
.ui-drw-h .ttl2>small{font-size:var(--fs-xs);color:var(--text-3)}
.ui-drw-b{flex:1;min-height:0;overflow:auto;overscroll-behavior:contain;-webkit-overflow-scrolling:touch;padding:18px 16px 24px}
.ui-drw-f{display:flex;align-items:center;flex-wrap:wrap;flex-shrink:0;gap:8px;padding:12px 16px calc(12px + var(--safe-b));border-top:1px solid var(--border);background:var(--surface)}
.ui-pal{position:fixed;left:50%;top:9%;z-index:var(--z-pal);display:flex;flex-direction:column;width:min(620px,calc(100% - 32px));max-height:78%;overflow:hidden;background:var(--surface);color:var(--text);border:1px solid var(--border-strong);border-radius:var(--r-lg);box-shadow:var(--shadow-pop);font-size:var(--fs-md);line-height:var(--lh);opacity:0;visibility:hidden;transform:translate(-50%,-6px);transition:opacity var(--t-fast) var(--ease),transform var(--t-fast) var(--ease),visibility 0s var(--t-fast)}
.ui-pal.on{opacity:1;visibility:visible;transform:translate(-50%,0);transition:opacity var(--t-fast) var(--ease),transform var(--t-fast) var(--ease),visibility 0s}
.ui-pal-in{display:flex;align-items:center;flex-shrink:0;gap:10px;height:50px;padding:0 14px;border-bottom:1px solid var(--border);color:var(--text-3)}
.ui-pal-in>input{flex:1;width:auto;height:48px;padding:0;border:0;background:transparent;color:var(--text);font-size:var(--fs-lg)}
:root.ui-c .ui-pal-in>input:is(:hover,:focus){border:0;box-shadow:none;outline:none}
.ui-pal-l{flex:1;min-height:0;overflow:auto;overscroll-behavior:contain;padding:4px 6px 8px}
.ui-pal-g{padding:10px 8px 4px;font-size:var(--fs-xs);font-weight:var(--fw-medium);color:var(--text-3)}
.ui-pal-i{-webkit-appearance:none;appearance:none;position:relative;display:flex;align-items:center;gap:10px;width:100%;height:36px;margin:0;padding:0 10px;border:0;border-radius:var(--r-md);background:transparent;color:var(--text);font:inherit;font-size:var(--fs-md);text-align:left;cursor:pointer}
.ui-pal-i>.ui-i{color:var(--text-2)}
.ui-pal-i .lbl{flex:none;max-width:62%;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.ui-pal-i .meta{flex:1;min-width:0;padding-left:12px;text-align:right;font-size:var(--fs-sm);color:var(--text-3);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.ui-pal-i.on{background:var(--surface-3)}
.ui-pal-i.on::before{content:"";position:absolute;left:0;top:8px;bottom:8px;width:2px;border-radius:2px;background:var(--accent)}
.ui-pal-i.cur .meta{color:var(--accent)}
.ui-pal-f{display:flex;align-items:center;flex-wrap:wrap;flex-shrink:0;gap:6px;padding:8px 14px;border-top:1px solid var(--border);font-size:var(--fs-xs);color:var(--text-3)}
.ui-pal-none{padding:28px;text-align:center;color:var(--text-3)}
.ui-toasts{position:fixed;left:50%;bottom:calc(20px + var(--safe-b));z-index:var(--z-toast);display:flex;flex-direction:column;align-items:center;gap:8px;width:max-content;max-width:calc(100% - 32px);transform:translateX(-50%);pointer-events:none;font-size:var(--fs-md);line-height:var(--lh)}
.ui-toast{pointer-events:auto;display:flex;align-items:center;gap:10px;max-width:100%;min-height:40px;padding:6px 6px 6px 12px;background:var(--raise);color:var(--text);border:1px solid var(--border-strong);border-radius:var(--r-lg);box-shadow:var(--shadow-pop);animation:ui-tin var(--t-panel) var(--ease)}
.ui-toast>.ui-i{color:var(--ok)}
.ui-toast.warn>.ui-i{color:var(--warn)}
.ui-toast.crit>.ui-i{color:var(--crit)}
.ui-toast.info>.ui-i{color:var(--info)}
.ui-toast>.tx{min-width:0;padding:4px 6px 4px 0;overflow-wrap:anywhere}
.ui-toast>button{-webkit-appearance:none;appearance:none;flex-shrink:0;height:28px;margin:0;padding:0 10px;border:0;border-radius:var(--r-sm);background:transparent;color:var(--accent);font:inherit;font-size:var(--fs-md);font-weight:var(--fw-semibold);cursor:pointer}
.ui-toast.out{opacity:0;transform:translateY(6px);transition:opacity var(--t-fast),transform var(--t-fast)}
@keyframes ui-tin{from{opacity:0;transform:translateY(8px)}}

/* ───────── hover (real pointers only — no sticky hover after a tap) ───────── */
@media (hover:hover){
  .ui-btn:hover{background:var(--surface-2)}
  .ui-btn.pri:hover{background:var(--fill-hover)}
  .ui-btn.ghost:hover{background:var(--surface-2);color:var(--text)}
  .ui-btn.dng:hover{background:color-mix(in srgb,var(--crit) 88%,var(--text))}
  .ui-ibtn:hover{background:var(--surface-2);color:var(--text)}
  .ui-lnk:hover{text-decoration:underline;text-underline-offset:3px}
  .ui-tab:hover{color:var(--text)}
  .ui-seg>button:hover{color:var(--text)}
  button.ui-chip:hover{color:var(--text);border-color:var(--border-strong)}
  .ui-chip .x:hover{background:var(--surface-3);color:var(--text)}
  .ui-kpi[role=button]:hover{background:var(--surface-2)}
  .ui-tbl tbody tr:hover td{background:var(--surface-2)}
  .ui-tbl tbody tr.grp:hover td{background:var(--canvas)}
  .ui-tbl tbody tr.sel:hover td{background:var(--accent-soft)}
  .ui-ml>li:is([data-cgo],[role=button],[tabindex]):hover{background:var(--surface-2)}
  .ui-sig:is([role=button],[data-cgo]):hover{background:var(--surface-2)}
  .ui-li:hover{background:var(--surface-2)}
  .ui-li:is(.on,[aria-current=page],[aria-current=true],[aria-selected=true]):hover{background:var(--accent-soft)}
  .ui-tile:hover{background:var(--surface-2)}
  .ui-tile[aria-pressed=true]:hover{background:var(--accent-soft)}
  .ui-pal-i:not(.on):hover{background:var(--surface-2)}
  .ui-drop:hover{border-color:var(--accent)}
  .ui-toast>button:hover{background:var(--surface-3)}
}
/* press feedback on touch */
.ui-li:active,.ui-tile:active,.ui-pal-i:active,.ui-kpi[role=button]:active,.ui-sig:is([role=button],[data-cgo]):active,.ui-ml>li:is([data-cgo],[role=button],[tabindex]):active{background:var(--surface-2)}

/* ───────── focus: inset rings where a scroller/panel would clip the outer ring (0,4,0 beats ui-compat) ───────── */
:root.ui-c :is(.ui-tab,.ui-kpi,.ui-tile,.ui-li,.ui-pal-i,.ui-sig,.ui-row):focus-visible{outline:2px solid var(--accent);outline-offset:-2px}
:root.ui-c :is(.ui-tbl tr,.ui-ml>li):focus-visible{outline:2px solid var(--accent);outline-offset:-2px}

/* ───────── responsive: rail and phone layout ───────── */
@media (max-width:1023px){
  .ui-g2{grid-template-columns:minmax(0,1fr)}
}
@media (min-width:600px){
  .ui-only-ph{display:none!important}
}
@media (max-width:599px){
  .ui-only-dk{display:none!important}
  .ui-page{gap:12px}
  .ui-g2s{grid-template-columns:minmax(0,1fr)}
  .ui-ph{row-gap:4px}
  .ui-pn-h{flex-wrap:wrap;row-gap:2px;padding:8px 14px}
  .ui-kpis{grid-template-columns:repeat(2,minmax(0,1fr))}
  .ui-kpi{padding:12px}
  .ui-kpi .ui-spark{display:none}
  .ui-tiles{grid-template-columns:repeat(2,minmax(0,1fr))}
  .ui-ml{display:block}
  .ui-tb{flex-wrap:nowrap;overflow-x:auto;margin:0 -16px;padding:0 16px 2px;scrollbar-width:none;-webkit-overflow-scrolling:touch}
  .ui-tb::-webkit-scrollbar{display:none}
  .ui-pn>.ui-tb{margin:0;padding:10px 14px}
  .ui-pn-b .ui-tb{margin:0 -14px;padding:0 14px 2px}
  .ui-search{flex:1 0 200px;width:auto}
  .ui-sum3{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px}
  .ui-row .acts{width:100%}
  .ui-row .acts>.ui-btn{flex:1}
  .ui-sig{grid-template-columns:minmax(0,1fr) auto;grid-template-areas:"p t" "x x" "w a";gap:4px 10px;padding:12px 16px}
  .ui-sig>.w{max-width:none}
  /* overlays become bottom sheets */
  .ui-drw{top:calc(24px + var(--safe-t));width:100%;padding-top:0;border-left:0;border-top:1px solid var(--border-strong);border-radius:var(--r-lg) var(--r-lg) 0 0;transform:translateY(102%)}
  .ui-drw.on{transform:none}
  .ui-drw>.grab,.ui-pal>.grab{display:block;flex-shrink:0;width:36px;height:4px;margin:8px auto 0;border-radius:2px;background:var(--border-strong)}
  .ui-pal{top:auto;bottom:0;left:0;width:100%;max-height:88%;padding-bottom:var(--safe-b);border-width:1px 0 0;border-radius:var(--r-lg) var(--r-lg) 0 0;transform:translateY(100%)}
  .ui-pal.on{transform:none}
  .ui-pal-i{height:48px}
  .ui-toasts{bottom:calc(var(--bottombar-h) + 16px + var(--safe-b))}
  :root.ui-c.ui-has-act .ui-toasts{bottom:calc(var(--bottombar-h) + 80px + var(--safe-b))}
}

/* ───────── touch targets ≥40px (phones and coarse pointers) ───────── */
@media (max-width:599px),(pointer:coarse){
  .ui-btn,.ui-ibtn,.ui-chip,.ui-seg>button,.ui-tab,.ui-li,.ui-pal-i,.ui-tile,.ui-swl,.ui-toast>button,
  input.ui-in,select.ui-in,
  :where(.ui-fm,.ui-tb,.ui-drw,.ui-pal) input:not([type=checkbox],[type=radio],[type=file],[type=range],[type=hidden]),
  :where(.ui-fm,.ui-tb,.ui-drw,.ui-pal) select:not([multiple],[size]){min-height:40px}
  .ui-ibtn,.ui-ibtn.sm{min-width:40px;min-height:40px}
  .ui-chip .x{width:32px;min-height:40px;margin-right:-9px}
  button.ui-lnk:not(:is(p,small,.ui-help,.ui-alert,.ui-sumline) *){display:inline-flex;align-items:center;min-height:40px}
  .ui-li{min-height:52px}
  .ui-pill{height:24px}
  .ui-pal-i{height:48px}
  /* checkbox / switch: 40px hit box, same visual size — transparent border + negative margin, 1px line drawn inset */
  input.ui-cb,input.ui-sw{border-style:solid;border-color:transparent;background-clip:padding-box}
  input.ui-cb{width:40px;height:40px;margin:-10px;border-width:10px;border-radius:14px;box-shadow:inset 0 0 0 1px var(--border-input)}
  input.ui-cb:checked{background-color:var(--accent);background-image:var(--tick);background-position:center;background-size:14px;background-repeat:no-repeat;background-clip:padding-box;border-color:transparent;box-shadow:inset 0 0 0 1px var(--accent)}
  input.ui-sw{width:52px;height:40px;margin:-11px;border-width:11px;border-radius:20px;box-shadow:inset 0 0 0 1px var(--border-input)}
  input.ui-sw:checked{border-color:transparent;box-shadow:inset 0 0 0 1px var(--accent)}
  :root.ui-c :is(input.ui-cb,input.ui-sw):focus-visible{outline-offset:-8px}
}
@media (prefers-reduced-motion:reduce){
  .ui-sk{animation:none}
  .ui-toast{animation:none}
}