/* Generated from the Heatable Dashboard UI design system. Edit the design system, then re-copy. */
/* Heatable Dashboard UI: component styles. Values that are tokens come from tokens.css (tokens.json). */
:root { --sans: var(--font-sans); --mono: var(--font-mono); }
.ht-stage { padding: 16px; display: flex; flex-wrap: wrap; gap: 10px; align-items: center; }
.ht-stage.ht-stack { flex-direction: column; align-items: stretch; }
.ht-sheet { background: var(--sheet); box-shadow: var(--ring); border-radius: 12px; overflow: hidden; }

.app {
  position: relative; display: flex; width: 100%; height: 100vh; min-width: 1240px; overflow: hidden; font: 13px/1.45 var(--sans); color: var(--tp); background: var(--app);
}
.ic, .ic-s, .ic-xs { display: inline-flex; flex: none; }
.ic { width: 16px; height: 16px; } .ic-s { width: 14px; height: 14px; } .ic-xs { width: 12px; height: 12px; }
.ic svg, .ic-s svg, .ic-xs svg { width: 100%; height: 100%; }
.ic svg { stroke-width: 1.75; } .ic-s svg { stroke-width: 2; } .ic-xs svg { stroke-width: 2.4; }
.mo { display: none !important; }
.gap { flex: 1; }
.muted { color: var(--tq); }
.mono { font-family: var(--mono); font-size: 12px; }
.click, .btn, .btn2, .ib, .seg span, .chip { cursor: pointer; user-select: none; }
.lk { color: var(--ts); } .lk:hover { color: var(--tp); text-decoration: underline; text-underline-offset: 3px; }
.sheet { flex: 1; min-width: 0; margin: 8px 8px 8px 0; background: var(--sheet); border-radius: 12px; box-shadow: var(--ring); display: flex; flex-direction: column; overflow: hidden; position: relative; }
.scr { flex: 1; min-height: 0; display: flex; flex-direction: column; position: relative; }
.scroll { overflow: auto; }
.mk { width: 20px; height: 20px; border-radius: 6px; background: var(--mk); flex: none; position: relative; }
.mk::after { content: ""; position: absolute; left: 5px; right: 5px; bottom: 5px; height: 4px; border: 1.6px solid oklch(1 0 0); border-top: 0; border-radius: 0 0 6px 6px; }
:is(.dark, [data-theme="dark"]) .mk::after { border-color: oklch(0.15 0 0); }
.env { font: 650 9.5px/1 var(--sans); letter-spacing: 0.08em; color: oklch(0.45 0.2 264); background: oklch(0.95 0.03 264); box-shadow: inset 0 0 0 1px oklch(0.86 0.06 264); padding: 3px 6px; border-radius: 999px; }
:is(.dark, [data-theme="dark"]) .env { color: oklch(0.85 0.09 264); background: oklch(0.45 0.2 264 / 0.25); box-shadow: none; }
.ib { width: 28px; height: 28px; border-radius: 7px; display: inline-flex; align-items: center; justify-content: center; color: var(--ts); flex: none; }
.ib:hover { background: var(--hover); color: var(--tp); }
:where(button).ib:disabled, :where(button).ib:disabled:hover { opacity: 0.45; cursor: default; background: none; color: var(--ts); }
.kbd { font: 500 11px var(--sans); color: var(--tq); min-width: 18px; height: 18px; padding: 0 4px; box-sizing: border-box; border-radius: 4px; box-shadow: inset 0 0 0 1px var(--bd); display: inline-flex; align-items: center; justify-content: center; }
.btn .kbd { color: oklch(1 0 0 / 0.75); box-shadow: inset 0 0 0 1px oklch(1 0 0 / 0.3); }
.av { width: 20px; height: 20px; border-radius: 999px; font: 650 9px/20px var(--sans); text-align: center; flex: none; box-sizing: border-box; }
.h264 { background: oklch(0.92 0.045 264); color: oklch(0.42 0.15 264); }
.h158 { background: oklch(0.92 0.045 158); color: oklch(0.40 0.09 158); }
.h58 { background: oklch(0.93 0.055 70); color: oklch(0.45 0.11 58); }
.h29 { background: oklch(0.92 0.045 29); color: oklch(0.45 0.15 29); }
.h200 { background: oklch(0.92 0.04 200); color: oklch(0.42 0.08 200); }
.h300 { background: oklch(0.93 0.04 300); color: oklch(0.45 0.15 300); }
.hsys { background: var(--mk); color: var(--sheet); }
.hnone { background: var(--well); color: var(--tq); }
.av.dash { background: transparent; border: 1px dashed var(--tq); }
.btn { height: 30px; padding: 0 12px; border-radius: 8px; background: var(--accent); color: var(--on-accent); display: inline-flex; align-items: center; gap: 6px; font: 550 12.5px var(--sans); white-space: nowrap; box-shadow: inset 0 1px 0 oklch(1 0 0 / 0.18), 0 1px 2px oklch(0 0 0 / 0.2); flex: none; }
.btn:hover { filter: brightness(1.1); }
.btn.go { background: oklch(0.52 0.13 158); }
.btn.dim { opacity: 0.5; }
.btn.sm { height: 26px; font-size: 12px; padding: 0 10px; }
.btn2 { height: 30px; padding: 0 10px; border-radius: 8px; color: var(--t2); display: inline-flex; align-items: center; gap: 6px; font: 500 12.5px var(--sans); white-space: nowrap; box-shadow: inset 0 0 0 1px var(--bd); background: var(--sheet); flex: none; }
.btn2:hover { background: var(--hover); }
.btn2.on { background: var(--fill); color: var(--tp); }
.btn2.sm { height: 26px; font-size: 12px; padding: 0 9px; }
.btn2.ok { color: var(--ok-fg); }
.chip { height: 24px; padding: 0 8px; border-radius: 7px; box-shadow: inset 0 0 0 1px var(--bd); display: inline-flex; align-items: center; gap: 5px; font-size: 12px; color: var(--t2); white-space: nowrap; background: var(--sheet); flex: none; }
.chip b { font-weight: 600; color: var(--tp); }
.chip.muted { color: var(--ts); }
.cnt { min-width: 18px; height: 18px; border-radius: 999px; background: var(--well); color: var(--ts); font: 600 11px/18px var(--sans); text-align: center; padding: 0 5px; box-sizing: border-box; font-variant-numeric: tabular-nums; }
.prod { display: inline-flex; align-items: center; gap: 5px; height: 22px; padding: 0 7px 0 3px; border-radius: 6px; box-shadow: inset 0 0 0 1px var(--bd); font: 600 11px var(--mono); color: var(--t2); white-space: nowrap; flex: none; }
.pl { width: 16px; height: 16px; border-radius: 4px; font: 700 10px/16px var(--sans); text-align: center; color: #fff; background: oklch(0.5 0.2 285); flex: none; }
.pl.s { background: oklch(0.55 0.13 158); } .pl.t { background: oklch(0.6 0.1 195); } .pl.h { background: oklch(0.6 0.19 340); } .pl.a { background: oklch(0.6 0.15 245); } .pl.e { background: oklch(0.7 0.16 60); }
.pill { height: 22px; padding: 0 8px; border-radius: 999px; display: inline-flex; align-items: center; gap: 5px; font: 550 11.5px var(--sans); white-space: nowrap; flex: none; }
.pill.ok { background: var(--ok-bg); color: var(--ok-fg); }
.pill.warn { background: var(--warn-bg); color: var(--warn-fg); }
.pill.bad { background: var(--bad-bg); color: var(--bad-fg); }
.pill.info { background: var(--info-bg); color: var(--info-fg); }
.pill.pur { background: var(--pur-bg); color: var(--pur-fg); }
.pill.mute { background: var(--well); color: var(--ts); }
.pill.dk { background: var(--mk); color: var(--sheet); }
.seg { display: inline-flex; padding: 2px; border-radius: 8px; background: var(--well); gap: 2px; flex: none; }
.seg span { height: 24px; padding: 0 9px; border-radius: 6px; display: inline-flex; align-items: center; gap: 6px; color: var(--ts); font-weight: 500; font-size: 12px; white-space: nowrap; }
.seg span.on { background: var(--sheet); color: var(--tp); box-shadow: var(--lift); }
.seg span i.dd { width: 7px; height: 7px; border-radius: 999px; display: inline-block; }
.si { width: 14px; height: 14px; border-radius: 999px; border: 1.5px solid var(--tq); box-sizing: border-box; padding: 2px; flex: none; background-clip: content-box; display: inline-block; }

/* sidebar */
.sb { width: 236px; flex: none; display: flex; flex-direction: column; padding: 10px 8px; box-sizing: border-box; color: var(--t2); overflow: auto; scrollbar-width: none; }
.wsb { display: flex; align-items: center; gap: 8px; height: 32px; padding: 0 2px 0 6px; flex: none; margin-bottom: 6px; }
.wsb b { font-weight: 650; color: var(--tp); }
.ni { height: 28px; display: flex; align-items: center; gap: 9px; padding: 0 8px; border-radius: 6px; font-weight: 500; flex: none; color: var(--t2); white-space: nowrap; }
.ni .ic { color: var(--ts); }
.ni.click:hover { background: var(--hover); }
.ni .r { margin-left: auto; font-size: 12px; color: var(--tq); font-variant-numeric: tabular-nums; }
.ni .dotc { margin-left: auto; min-width: 16px; height: 16px; border-radius: 999px; background: var(--accent); color: var(--on-accent); font: 650 10px/16px var(--sans); text-align: center; padding: 0 4px; box-sizing: border-box; }
.ni.on, .ni.on:hover { background: var(--fill); color: var(--tp); }
.ni.on .ic { color: var(--tp); }
:where(button).ni:disabled, :where(button).ni:disabled:hover { opacity: 0.45; cursor: default; background: none; color: var(--t2); }
.sl { font: 500 12px var(--sans); color: var(--tq); padding: 16px 8px 4px; flex: none; }
.sbfoot { display: flex; align-items: center; gap: 8px; padding: 8px 6px 0; border-top: 1px solid var(--bd); margin-top: 6px; flex: none; }
.sbfoot b { font-weight: 500; color: var(--t2); flex: 1; }
.sbr { width: 52px; flex: none; display: flex; flex-direction: column; align-items: center; gap: 4px; padding: 12px 0; box-sizing: border-box; }
.sbr .ib { width: 34px; height: 34px; border-radius: 9px; }
.sbr .ib.on { background: var(--fill); color: var(--tp); }
.sbr .sep { width: 20px; height: 1px; background: var(--bd); margin: 6px 0; }
.mtop, .navbg { display: none; }

/* top bar */
.tb { height: 46px; flex: none; display: flex; align-items: center; gap: 8px; padding: 0 12px 0 18px; border-bottom: 1px solid var(--bd); }
.crumb { display: flex; align-items: center; gap: 6px; color: var(--ts); font-weight: 500; white-space: nowrap; }
.crumb .ic-s { color: var(--tq); }
.crumb b { color: var(--tp); font-weight: 600; }
.pager { color: var(--tq); font-size: 12px; margin-left: 6px; }
.vtabs { display: flex; gap: 2px; margin-left: 14px; }
.vtabs span { height: 26px; padding: 0 9px; border-radius: 6px; display: inline-flex; align-items: center; gap: 6px; color: var(--ts); font-weight: 500; white-space: nowrap; cursor: pointer; flex: none; }
.vtabs span:hover { color: var(--tp); }
.vtabs span.on { background: var(--fill); color: var(--tp); }
.vtabs span.soon { color: var(--tq); }
.vtabs em { font-style: normal; color: var(--tq); font-size: 11.5px; font-variant-numeric: tabular-nums; }
.hint { display: flex; align-items: center; gap: 8px; margin: 10px 18px 2px; padding: 8px 8px 8px 12px; border-radius: 10px; background: var(--info-bg); color: var(--info-fg); font-size: 12.5px; flex: none; }
.hint b { font-weight: 650; }
.hint .ib { width: 22px; height: 22px; color: inherit; margin-left: auto; }

/* views: every list and flow in one screen */
.fbar { display: flex; align-items: center; gap: 6px; padding: 8px 18px; border-bottom: 1px solid var(--bd2); flex: none; }
.ptok { display: inline-flex; gap: 2px; padding: 2px; border-radius: 8px; box-shadow: inset 0 0 0 1px var(--bd); flex: none; }
.ptok span { width: 20px; height: 18px; border-radius: 5px; font: 700 10px/18px var(--sans); text-align: center; color: var(--tq); cursor: pointer; }
.ptok span:hover { background: var(--hover); color: var(--tp); }
.ptok span.on { color: var(--on-accent); }
.vsplit { flex: 1; min-height: 0; display: flex; position: relative; }
.lv { flex: 1; min-width: 0; overflow: auto; padding-bottom: 96px; }
.gh { position: sticky; top: 0; z-index: 2; height: 38px; display: flex; align-items: center; gap: 8px; padding: 0 18px 0 12px; background: linear-gradient(var(--hover), var(--hover)), var(--sheet); border-bottom: 1px solid var(--bd2); cursor: pointer; user-select: none; }
.gh b { font-weight: 600; }
.gh em { font-style: normal; color: var(--tq); font-size: 12px; }
.gh .tw { color: var(--tq); transition: transform 0.15s; }
.gh.shut .tw { transform: rotate(-90deg); }
.gh .r { margin-left: auto; display: flex; align-items: center; gap: 6px; color: var(--tq); font-size: 12px; font-variant-numeric: tabular-nums; }
.gh .ib { width: 24px; height: 24px; }
.lrw { height: 42px; display: flex; align-items: center; gap: 10px; padding: 0 18px 0 12px; border-bottom: 1px solid var(--bd2); cursor: pointer; position: relative; box-sizing: border-box; }
.lrw:hover { background: var(--hover); }
.lrw.on { background: var(--fill); }
.lrw.sel { background: var(--info-bg); }
.cbx { width: 16px; height: 16px; border-radius: 4px; box-shadow: inset 0 0 0 1.5px var(--tq); display: inline-flex; align-items: center; justify-content: center; color: var(--on-accent); flex: none; opacity: 0; transition: opacity 0.1s; }
.lrw:hover .cbx, .lv.selmode .cbx { opacity: 1; }
.cbx .ic-xs { opacity: 0; }
.cbx.on { opacity: 1; background: var(--accent); box-shadow: none; }
.cbx.on .ic-xs { opacity: 1; }
.lrw .ref { font: 12px var(--mono); color: var(--tq); width: 86px; flex: none; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.lrw > .av { width: 24px; height: 24px; line-height: 24px; font-size: 9.5px; }
.rt { display: flex; align-items: baseline; gap: 8px; min-width: 0; flex: 0 1 auto; }
.rt b { font-weight: 550; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.rt em { font-style: normal; color: var(--tq); font-size: 12px; white-space: nowrap; }
.rp { margin-left: auto; display: flex; align-items: center; gap: 8px; flex: none; padding-left: 12px; }
.pp { display: inline-flex; align-items: center; gap: 6px; font-size: 12px; color: var(--ts); white-space: nowrap; font-variant-numeric: tabular-nums; flex: none; }
.pp.ch { height: 22px; padding: 0 8px; border-radius: 999px; box-shadow: inset 0 0 0 1px var(--bd); color: var(--t2); }
.pp.num { color: var(--t2); font-weight: 550; min-width: 62px; justify-content: flex-end; }
.pp.bad { color: var(--bad-fg); font-weight: 550; }
.pp .av { width: 20px; height: 20px; line-height: 20px; font-size: 8.5px; }
.board { flex: 1; min-width: 0; min-height: 0; display: flex; gap: 12px; padding: 14px 18px 96px; overflow: auto; align-items: flex-start; }
.col { width: 284px; flex: none; display: flex; flex-direction: column; gap: 8px; background: var(--hover); border-radius: 12px; padding: 8px; box-shadow: inset 0 0 0 1px var(--bd2); box-sizing: border-box; }
.colh { display: flex; align-items: center; gap: 7px; padding: 4px 4px 2px; white-space: nowrap; }
.colh b { font-weight: 650; }
.colh em { font-style: normal; color: var(--tq); font-size: 12px; }
.cards { display: flex; flex-direction: column; gap: 8px; }
.card { background: var(--sheet); border-radius: 10px; box-shadow: var(--lift); padding: 10px 11px; display: flex; flex-direction: column; gap: 7px; }
.card:hover { box-shadow: 0 0 0 1px var(--tq), 0 4px 14px oklch(0 0 0 / 0.08); }
.card.on { box-shadow: 0 0 0 1.5px var(--accent), 0 4px 14px color-mix(in oklch, var(--accent) 14%, transparent); }
.card.sel { background: var(--info-bg); }
.card .r1 { display: flex; align-items: center; gap: 8px; }
.card .r1 b { font-weight: 600; flex: 1; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.card .val { font-weight: 600; font-variant-numeric: tabular-nums; color: var(--t2); }
.card .r2 { display: flex; align-items: center; gap: 8px; color: var(--ts); font-size: 12px; }
.card .rp { margin-left: 0; padding-left: 0; flex-wrap: wrap; gap: 6px; }
.cempty { padding: 14px; text-align: center; color: var(--tq); font-size: 12px; border: 1px dashed var(--bd); border-radius: 10px; }
.peek { width: 380px; flex: none; border-left: 1px solid var(--bd); background: var(--raise); display: flex; flex-direction: column; min-height: 0; z-index: 3; }
.pkb { flex: 1; overflow: auto; padding: 18px 20px; display: flex; flex-direction: column; gap: 2px; }
.pkh { display: flex; align-items: center; gap: 12px; margin-bottom: 12px; }
.pkh .av { width: 36px; height: 36px; line-height: 36px; font-size: 12px; border-radius: 10px; }
.pkh h2 { margin: 0; font-size: 18px; font-weight: 650; letter-spacing: -0.015em; line-height: 1.2; }
.pkh .muted { font-size: 12.5px; }
.pkn { margin-top: 12px; padding: 10px 12px; border-radius: 10px; background: var(--pur-bg); color: var(--pur-fg); font-size: 12.5px; display: flex; gap: 8px; }
.selbar { position: absolute; left: 50%; bottom: 20px; transform: translateX(-50%); display: flex; align-items: center; gap: 6px; padding: 6px; border-radius: 12px; background: var(--raise); box-shadow: var(--pop); z-index: 9; animation: rise 0.18s ease-out; white-space: nowrap; }
.selbar .selc { display: inline-flex; align-items: center; gap: 4px; padding: 0 4px 0 10px; height: 28px; border-radius: 8px; box-shadow: inset 0 0 0 1px var(--bd); font-weight: 600; }
.selbar .ib { width: 22px; height: 22px; }
.pop { position: absolute; top: 44px; right: 12px; width: 320px; background: var(--raise); border-radius: 12px; box-shadow: var(--pop); padding: 14px; z-index: 12; display: flex; flex-direction: column; gap: 12px; }
.prow2 { display: flex; align-items: center; justify-content: space-between; gap: 10px; color: var(--ts); }
.plbl { font-size: 12px; color: var(--tq); font-weight: 550; }
.ptog { display: flex; flex-wrap: wrap; gap: 6px; }
.ptog span { height: 24px; padding: 0 9px; border-radius: 999px; box-shadow: inset 0 0 0 1px var(--bd); font-size: 12px; color: var(--tq); display: inline-flex; align-items: center; cursor: pointer; }
.ptog span.on { background: var(--fill); color: var(--tp); box-shadow: none; }
.drawer { position: absolute; top: 0; right: 0; bottom: 0; width: 380px; background: var(--raise); border-left: 1px solid var(--bd); box-shadow: -16px 0 40px oklch(0 0 0 / 0.1); display: flex; flex-direction: column; z-index: 10; }
.dh { height: 46px; display: flex; align-items: center; gap: 6px; padding: 0 10px 0 18px; border-bottom: 1px solid var(--bd); flex: none; }
.dh b { font-size: 14px; font-weight: 650; }
.db { flex: 1; overflow: auto; padding: 14px 18px; display: flex; flex-direction: column; gap: 6px; }
.lbl { font-size: 12px; color: var(--ts); font-weight: 550; margin-top: 10px; }
.lbl em { font-style: normal; color: var(--tq); font-weight: 450; }
.inp { height: 32px; border-radius: 8px; box-shadow: inset 0 0 0 1px var(--bd); padding: 0 10px; display: flex; align-items: center; background: var(--sheet); font-weight: 500; }
.opt { height: 36px; display: flex; align-items: center; gap: 9px; padding: 0 8px; border-radius: 8px; cursor: pointer; }
.opt:hover { background: var(--hover); }
.opt b { font-weight: 550; }
.opt em { font-style: normal; color: var(--tq); font-size: 12px; }
.cb { width: 16px; height: 16px; border-radius: 4px; box-shadow: inset 0 0 0 1.5px var(--tq); display: inline-flex; align-items: center; justify-content: center; color: var(--on-accent); flex: none; }
.cb .ic-xs { opacity: 0; }
.cb.on { background: var(--accent); box-shadow: none; }
.cb.on .ic-xs { opacity: 1; }
.sw { width: 28px; height: 16px; border-radius: 999px; background: var(--fill); position: relative; flex: none; }
.sw i { position: absolute; left: 2px; top: 2px; width: 12px; height: 12px; border-radius: 999px; background: #fff; box-shadow: 0 1px 2px oklch(0 0 0 / 0.25); transition: left 0.15s; }
.sw.on { background: var(--accent); }
.sw.on i { left: 14px; }
.dnote { margin-top: 10px; padding: 10px 12px; border-radius: 10px; background: var(--well); color: var(--ts); font-size: 12.5px; display: flex; gap: 8px; align-items: center; }
.df { height: 58px; flex: none; border-top: 1px solid var(--bd); display: flex; align-items: center; justify-content: flex-end; gap: 8px; padding: 0 18px; }
.opt i { width: 7px; height: 7px; border-radius: 999px; display: inline-block; flex: none; }

/* record pages */
.split { flex: 1; min-height: 0; display: flex; }
.main { flex: 1; min-width: 0; display: flex; flex-direction: column; }
.rec { padding: 24px 32px 0; display: flex; flex-direction: column; gap: 18px; }
.rtop { display: flex; align-items: center; gap: 16px; }
.avbig { width: 52px; height: 52px; border-radius: 14px; font: 650 18px/52px var(--sans); text-align: center; flex: none; box-shadow: var(--lift); }
.rtop h1 { margin: 0; font-size: 26px; font-weight: 650; letter-spacing: -0.028em; line-height: 1.15; display: flex; align-items: center; gap: 8px; }
.vchk { width: 18px; height: 18px; border-radius: 999px; background: var(--ok); color: #fff; display: inline-flex; align-items: center; justify-content: center; }
.vchk .ic-xs { width: 11px; height: 11px; }
.meta { display: flex; align-items: center; gap: 8px; color: var(--ts); margin-top: 5px; white-space: nowrap; }
.meta .dot { width: 3px; height: 3px; border-radius: 999px; background: var(--tq); }
.flowc { display: inline-flex; align-items: center; height: 30px; border-radius: 8px; box-shadow: inset 0 0 0 1px var(--bd); padding: 0 3px 0 10px; gap: 8px; white-space: nowrap; flex: none; }
.flowc b { font-weight: 600; display: inline-flex; align-items: center; gap: 7px; }
.flowc b i { width: 7px; height: 7px; border-radius: 999px; background: var(--ok); display: inline-block; }
.steps { display: inline-flex; gap: 2px; background: var(--well); border-radius: 6px; padding: 2px; }
.stp { height: 22px; padding: 0 9px; border-radius: 5px; display: inline-flex; align-items: center; font-size: 12px; font-weight: 500; color: var(--tq); }
.stp.on { background: var(--sheet); color: var(--ok-fg); box-shadow: var(--lift); font-weight: 600; }
.pipe { display: flex; align-items: center; }
.ps { display: flex; align-items: center; gap: 7px; font-weight: 500; color: var(--tq); white-space: nowrap; }
.ps .n { width: 16px; height: 16px; border-radius: 999px; box-sizing: border-box; border: 1.5px dashed var(--tq); display: inline-flex; align-items: center; justify-content: center; flex: none; }
.ps .n .ic-xs { width: 10px; height: 10px; opacity: 0; }
.ps.done { color: var(--ts); }
.ps.done .n { border: 0; background: var(--ok); color: #fff; }
.ps.done .ic-xs { opacity: 1; }
.ps.cur { color: var(--tp); font-weight: 600; }
.ps.cur .n { border: 1.5px solid var(--ok); padding: 2px; background: conic-gradient(var(--ok) 0 35%, transparent 0) content-box; }
.ps em { font-style: normal; font-weight: 450; color: var(--tq); font-size: 12px; }
.pline { flex: 1; height: 1px; background: var(--bd); margin: 0 12px; min-width: 12px; }
.pline.done { background: var(--ok); opacity: 0.5; }
.hl { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); border-radius: 12px; box-shadow: inset 0 0 0 1px var(--bd); }
.hc { padding: 12px 14px; display: flex; flex-direction: column; gap: 4px; min-width: 0; }
.hc + .hc { border-left: 1px solid var(--bd); }
.hc .k { font-size: 12px; color: var(--tq); display: flex; align-items: center; gap: 6px; }
.hc .v { font-size: 15px; font-weight: 650; letter-spacing: -0.012em; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; font-variant-numeric: tabular-nums; }
.hc .s { font-size: 12px; color: var(--ts); display: flex; align-items: center; gap: 6px; white-space: nowrap; overflow: hidden; }
.hc.warn .v { color: var(--warn-fg); }
.body { padding: 22px 32px 40px; display: flex; flex-direction: column; gap: 26px; }
.sh { display: flex; align-items: center; gap: 8px; margin-bottom: 10px; }
.sh h3 { margin: 0; font-size: 13.5px; font-weight: 650; }
.sh em { font-style: normal; color: var(--tq); font-size: 12.5px; }
.sh .r { margin-left: auto; display: flex; gap: 6px; align-items: center; }
.wt { width: 26px; height: 26px; border-radius: 7px; display: inline-flex; align-items: center; justify-content: center; flex: none; background: var(--well); color: var(--ts); }
.wt.warn { background: var(--warn-bg); color: var(--warn-fg); }
.wt.ok { background: var(--ok-bg); color: var(--ok-fg); }
.wt.info { background: var(--info-bg); color: var(--info-fg); }
.wt.bad { background: var(--bad-bg); color: var(--bad-fg); }
.wl { display: flex; flex-direction: column; gap: 2px; margin: 0 -8px; }
.wr { display: flex; align-items: center; gap: 10px; min-height: 42px; padding: 4px 8px; border-radius: 8px; cursor: pointer; box-sizing: border-box; }
.wr:hover { background: var(--hover); }
.wr.hot { background: var(--sheet); box-shadow: var(--lift); margin-bottom: 4px; }
.wr .wt { width: 24px; height: 24px; }
.wr .wn { flex: 1; min-width: 0; display: flex; flex-direction: column; line-height: 1.3; }
.wr .wn b { font-weight: 550; }
.wr .wn em { font-style: normal; font-size: 11.5px; color: var(--tq); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.wr .pill { height: 20px; font-size: 11px; padding: 0 7px; }
.wr.dim { min-height: 34px; }
.wr.dim .wn b { color: var(--ts); font-weight: 500; }
.wr.dim .wt { background: transparent; box-shadow: inset 0 0 0 1px var(--bd); color: var(--tq); }
.wr .sv { font-size: 12px; color: var(--tq); white-space: nowrap; }
.tl { border-radius: 12px; box-shadow: inset 0 0 0 1px var(--bd); overflow: hidden; }
.tl .lrw:last-child { border-bottom: 0; }
.tl .lrw { padding: 0 12px 0 14px; }
.tr { height: 42px; display: flex; align-items: center; gap: 12px; padding: 0 12px 0 14px; border-bottom: 1px solid var(--bd2); }
.tr:last-child { border-bottom: 0; }
.tr .ci { width: 15px; height: 15px; border-radius: 999px; box-sizing: border-box; border: 1.5px dashed var(--tq); flex: none; }
.tr .ci.now { border: 1.5px solid var(--warn); padding: 2px; background: conic-gradient(var(--warn) 0 25%, transparent 0) content-box; }
.tr b { font-weight: 550; }
.tr .ic-s { color: var(--tq); }
.tr .when { color: var(--ts); font-size: 12px; margin-left: auto; white-space: nowrap; }
.tr .when.now { color: var(--warn-fg); font-weight: 600; }
.af { display: flex; gap: 4px; }
.af span { height: 26px; padding: 0 9px; border-radius: 6px; display: inline-flex; align-items: center; gap: 5px; color: var(--ts); font-weight: 500; font-size: 12.5px; cursor: pointer; white-space: nowrap; }
.af span:hover { background: var(--hover); }
.af span em { font-style: normal; color: var(--tq); font-size: 11px; }
.af span.on { background: var(--fill); color: var(--tp); }
.composer { border-radius: 12px; box-shadow: var(--lift); background: var(--sheet); padding: 10px 10px 8px 14px; display: flex; flex-direction: column; gap: 8px; margin-bottom: 12px; }
.composer .row { display: flex; align-items: center; gap: 4px; }
.cin, .rin { border: 0; outline: 0; background: transparent; font: 13px var(--sans); color: var(--tp); padding: 2px 0; }
.cin::placeholder, .rin::placeholder { color: var(--tq); }
.ae { display: flex; gap: 12px; padding: 7px 0; align-items: flex-start; }
.ae .av { width: 24px; height: 24px; line-height: 24px; font-size: 9.5px; }
.ae .tx { flex: 1; min-width: 0; padding-top: 2px; color: var(--ts); }
.ae .tx b { color: var(--tp); font-weight: 600; }
.ae .t { color: var(--tq); white-space: nowrap; padding-top: 2px; font-size: 12px; }
.ae.new { animation: pop 0.5s ease-out; }
@keyframes pop { from { background: var(--info-bg); } to { background: transparent; } }
.rail { width: 330px; flex: none; border-left: 1px solid var(--bd); background: var(--rail); padding: 6px 0 20px; box-sizing: border-box; overflow: auto; }
/* added for dashboard-v3: stacked record rail */
.rail.ht-record-rail-stacked { width: 100%; border-left: 0; border-top: 1px solid var(--bd); }
.rs { padding: 12px 20px 14px; border-bottom: 1px solid var(--bd2); }
.rs:last-child { border-bottom: 0; }
.rsh { display: flex; align-items: center; gap: 6px; font: 600 12px var(--sans); color: var(--ts); margin-bottom: 6px; }
.rsh em { font-style: normal; font-weight: 450; color: var(--tq); }
.rsh .r { margin-left: auto; display: inline-flex; gap: 10px; align-items: center; font-weight: 500; color: var(--ts); }
.at { display: grid; grid-template-columns: 104px minmax(0, 1fr); align-items: center; min-height: 29px; margin: 0; }
.at dt { color: var(--ts); display: flex; align-items: center; gap: 8px; }
.at dt .ic-s { color: var(--tq); width: 13px; height: 13px; }
.at dd { margin: 0; color: var(--tp); font-weight: 500; display: flex; align-items: center; gap: 7px; min-width: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.at.sum { grid-template-columns: minmax(0, 1fr) auto; }
.at.sum dt { color: var(--t2); }
.at.sum dd { justify-content: flex-end; font-variant-numeric: tabular-nums; }
.at.tot { border-top: 1px solid var(--bd2); margin-top: 6px; padding-top: 6px; }
.at.tot dt { color: var(--tp); font-weight: 600; }
.at.tot dd { font-size: 15px; font-weight: 700; }
.lnk { text-decoration: underline; text-decoration-style: dotted; text-decoration-color: var(--tq); text-underline-offset: 3px; }
.inst { display: flex; align-items: center; gap: 10px; padding: 4px 0 8px; }
.inst .av { width: 32px; height: 32px; line-height: 32px; font-size: 11px; border-radius: 9px; }
.inst b { display: block; font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.inst span.e { display: flex; align-items: center; gap: 6px; color: var(--ts); font-size: 12px; }
.score { display: inline-flex; align-items: center; height: 17px; padding: 0 6px; border-radius: 999px; font: 600 10.5px var(--sans); background: var(--well); color: var(--ts); }
.thumbs { display: grid; grid-template-columns: repeat(4, 1fr); gap: 6px; }
.th { aspect-ratio: 1; border-radius: 8px; box-shadow: var(--lift); position: relative; overflow: hidden; }
.th.a { background: linear-gradient(160deg, oklch(0.78 0.06 220) 0 38%, oklch(0.62 0.07 140) 38% 60%, oklch(0.5 0.05 70) 60%); }
.th.b { background: linear-gradient(170deg, oklch(0.82 0.04 230) 0 30%, oklch(0.55 0.03 60) 30% 75%, oklch(0.45 0.06 140) 75%); }
.th.c { background: linear-gradient(150deg, oklch(0.6 0.05 60) 0 45%, oklch(0.55 0.1 240) 45% 70%, oklch(0.5 0.04 60) 70%); }
.th.d { background: linear-gradient(180deg, oklch(0.88 0.01 90) 0 55%, oklch(0.72 0.02 80) 55%); }
.th.e { background: linear-gradient(135deg, oklch(0.4 0.02 260) 0 50%, oklch(0.6 0.03 90) 50%); }
.th.more { background: var(--mk); color: var(--sheet); display: flex; align-items: center; justify-content: center; font: 600 11px var(--sans); }
.th .cap { position: absolute; left: 5px; bottom: 5px; font: 600 9.5px var(--sans); color: #fff; background: oklch(0 0 0 / 0.5); padding: 1px 5px; border-radius: 4px; }
.chips { display: flex; flex-wrap: wrap; gap: 5px; }
.mcal { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); gap: 3px; }
.mcal span { aspect-ratio: 1; border-radius: 6px; font-size: 10.5px; font-weight: 550; display: flex; align-items: center; justify-content: center; background: var(--well); color: var(--tq); }
.mcal span.hd { background: none; aspect-ratio: auto; height: 16px; font-weight: 500; }
.mcal span.f { background: var(--ok-bg); color: var(--ok-fg); }
.mcal span.b { background: var(--info-bg); color: var(--info-fg); }
.mcal span.t { box-shadow: inset 0 0 0 1.5px var(--accent); color: var(--tp); }

/* work views */
.wh { padding: 20px 32px 0; display: flex; flex-direction: column; gap: 14px; flex: none; }
.wh1 { display: flex; align-items: center; gap: 12px; }
.wh1 .wt { width: 36px; height: 36px; border-radius: 10px; }
.wh1 h1 { margin: 0; font-size: 21px; font-weight: 650; letter-spacing: -0.022em; }
.wh1 .sub { color: var(--ts); display: flex; gap: 8px; align-items: center; margin-top: 2px; font-size: 12.5px; white-space: nowrap; }
.stepper { display: flex; align-items: center; gap: 10px; padding: 10px 0 12px; border-bottom: 1px solid var(--bd); }
.sp { display: flex; align-items: center; gap: 8px; color: var(--tq); font-weight: 500; white-space: nowrap; }
.sp .n { width: 20px; height: 20px; border-radius: 999px; box-shadow: inset 0 0 0 1.5px var(--bd); font: 600 11px/20px var(--sans); text-align: center; color: var(--ts); display: inline-flex; align-items: center; justify-content: center; }
.sp.on { color: var(--tp); font-weight: 600; }
.sp.on .n { background: var(--tp); color: var(--sheet); box-shadow: none; }
.sp.done { color: var(--ts); }
.sp.done .n { background: var(--ok); color: #fff; box-shadow: none; }
.sp-line { width: 36px; height: 1px; background: var(--bd); }
.wbody { flex: 1; min-height: 0; padding: 16px 32px; display: flex; flex-direction: column; gap: 12px; overflow: auto; }
.wfoot { height: 58px; flex: none; border-top: 1px solid var(--bd); display: flex; align-items: center; gap: 10px; padding: 0 20px 0 32px; box-sizing: border-box; }
.wfoot .sum { color: var(--ts); display: flex; gap: 14px; align-items: center; }
.wfoot .sum b { color: var(--tp); font-weight: 650; font-variant-numeric: tabular-nums; }
.lt { border-radius: 12px; box-shadow: inset 0 0 0 1px var(--bd); overflow: hidden; flex: none; }
.lg { height: 32px; display: flex; align-items: center; gap: 8px; padding: 0 14px; background: var(--hover); border-bottom: 1px solid var(--bd2); font: 600 12px var(--sans); color: var(--ts); }
.lg i.dd { width: 7px; height: 7px; border-radius: 999px; display: inline-block; }
.lg em { font-style: normal; font-weight: 450; color: var(--tq); }
.lr { display: grid; grid-template-columns: minmax(0, 1fr) 92px 128px 100px 124px 28px; align-items: center; gap: 12px; height: 46px; padding: 0 10px 0 14px; border-bottom: 1px solid var(--bd2); }
.lr.head { height: 30px; font-size: 11.5px; color: var(--tq); font-weight: 500; }
.lr b { font-weight: 550; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.lr .sku { font: 12px var(--mono); color: var(--ts); }
.sel { height: 28px; border-radius: 7px; box-shadow: inset 0 0 0 1px var(--bd); display: flex; align-items: center; padding: 0 6px 0 9px; gap: 4px; font-weight: 500; background: var(--sheet); }
.sel .ic-xs { margin-left: auto; color: var(--tq); }
.sel.no { box-shadow: none; background: transparent; color: var(--tq); }
.sel.no .ic-xs { display: none; }
.qty { display: inline-flex; align-items: center; height: 28px; border-radius: 7px; box-shadow: inset 0 0 0 1px var(--bd); overflow: hidden; background: var(--sheet); }
.qty span.q { width: 28px; height: 28px; display: inline-flex; align-items: center; justify-content: center; color: var(--ts); cursor: pointer; }
.qty span.q:hover { background: var(--hover); color: var(--tp); }
.qty b { width: 30px; text-align: center; font-weight: 600; border-left: 1px solid var(--bd2); border-right: 1px solid var(--bd2); line-height: 28px; }
.del { color: var(--tq); cursor: pointer; display: inline-flex; }
.del:hover { color: var(--bad-fg); }
.addl { height: 40px; display: flex; align-items: center; gap: 8px; padding: 0 14px; color: var(--ts); font-weight: 500; cursor: pointer; }
.addl:hover { background: var(--hover); color: var(--tp); }
.note2 { display: flex; align-items: center; gap: 10px; padding: 10px 14px; border-radius: 10px; background: var(--info-bg); color: var(--info-fg); font-size: 12.5px; flex: none; }
.sup { flex: 1; min-height: 460px; display: grid; grid-template-columns: 360px minmax(0, 1fr); gap: 14px; }
.mlist { display: flex; flex-direction: column; gap: 6px; }
.mi { border-radius: 11px; box-shadow: inset 0 0 0 1px var(--bd); padding: 10px 12px; display: flex; align-items: center; gap: 11px; background: var(--sheet); cursor: pointer; }
.mi:hover { box-shadow: inset 0 0 0 1px var(--tq); }
.mi.on, .mi.on:hover { box-shadow: inset 0 0 0 1.5px var(--accent), 0 4px 14px color-mix(in oklch, var(--accent) 12%, transparent); }
.logo { width: 32px; height: 32px; border-radius: 999px; font: 800 12px/32px var(--sans); text-align: center; color: #fff; flex: none; }
.lw { background: oklch(0.55 0.2 27); } .ld { background: oklch(0.32 0.08 270); } .lc { background: oklch(0.38 0.12 255); } .lj { background: oklch(0.3 0.06 260); }
.mi b { display: block; font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.mi .dist { font-size: 12px; color: var(--ts); }
.price { margin-left: auto; display: inline-flex; align-items: center; gap: 6px; font-weight: 650; font-variant-numeric: tabular-nums; white-space: nowrap; }
.av-ic { width: 18px; height: 18px; border-radius: 999px; display: inline-flex; align-items: center; justify-content: center; flex: none; }
.av-ic .ic-xs { width: 11px; height: 11px; }
.s-best, .s-part { background: var(--warn-bg); color: var(--warn-fg); }
.s-ok { background: var(--ok-bg); color: var(--ok-fg); }
.s-miss { background: var(--bad-bg); color: var(--bad-fg); }
.legend { display: flex; gap: 14px; color: var(--ts); font-size: 12px; flex-wrap: wrap; }
.legend span { display: inline-flex; gap: 6px; align-items: center; }
.mapw { position: relative; border-radius: 12px; overflow: hidden; box-shadow: inset 0 0 0 1px var(--bd); background: var(--map-land); min-height: 460px; }
.mapw .road { position: absolute; background: var(--map-road); border-radius: 4px; }
.mapw .riv { position: absolute; background: var(--map-water); border-radius: 999px; }
.mapw .grid { position: absolute; inset: 0; background-image: linear-gradient(var(--map-line) 1px, transparent 1px), linear-gradient(90deg, var(--map-line) 1px, transparent 1px); background-size: 46px 46px; opacity: 0.6; }
.pin { position: absolute; display: flex; align-items: center; gap: 6px; padding: 3px 9px 3px 3px; border-radius: 999px; background: var(--raise); box-shadow: 0 0 0 1px oklch(0 0 0 / 0.08), 0 4px 12px oklch(0 0 0 / 0.14); font-weight: 600; font-size: 12px; white-space: nowrap; cursor: pointer; transition: transform 0.15s; }
.pin:hover { transform: translateY(-2px); }
.pin .logo { width: 22px; height: 22px; line-height: 22px; font-size: 9px; }
.pin.on { background: var(--accent); color: var(--on-accent); z-index: 2; }
.home { position: absolute; width: 34px; height: 34px; border-radius: 999px; background: var(--mk); color: var(--sheet); display: flex; align-items: center; justify-content: center; box-shadow: 0 0 0 6px color-mix(in oklch, var(--accent) 18%, transparent); }
.pick { position: absolute; left: 12px; right: 12px; bottom: 12px; border-radius: 12px; background: var(--raise); box-shadow: 0 0 0 1px oklch(0 0 0 / 0.08), 0 12px 30px oklch(0 0 0 / 0.16); padding: 14px; display: flex; flex-direction: column; gap: 10px; z-index: 3; }
.pick .r1 { display: flex; align-items: center; gap: 10px; }
.pick .r1 b { font-size: 14px; font-weight: 650; }
.grid3 { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; }
.kv { display: flex; flex-direction: column; gap: 3px; align-items: flex-start; }
.kv span.k { font-size: 11.5px; color: var(--tq); }
.kv b { font-weight: 600; font-size: 13px; }
.placed { flex: 1; overflow: auto; display: flex; justify-content: center; padding: 48px 32px; }
.pc { width: 520px; display: flex; flex-direction: column; gap: 16px; align-items: stretch; }
.bigok { width: 48px; height: 48px; border-radius: 14px; background: var(--ok-bg); color: var(--ok-fg); display: flex; align-items: center; justify-content: center; }
.bigok .ic { width: 24px; height: 24px; }
.pc h1 { margin: 0; font-size: 24px; font-weight: 650; letter-spacing: -0.02em; }
.pc p { margin: -8px 0 0; color: var(--ts); }
.pc p b { color: var(--tp); }
.box { border-radius: 12px; box-shadow: inset 0 0 0 1px var(--bd); padding: 14px 16px; }
.prow { display: flex; gap: 8px; flex-wrap: wrap; }
.acc { border-radius: 12px; box-shadow: inset 0 0 0 1px var(--bd); overflow: hidden; flex: none; }
.accr { height: 48px; display: flex; align-items: center; gap: 10px; padding: 0 12px 0 14px; border-bottom: 1px solid var(--bd2); }
.accr.click:hover { background: var(--hover); }
.accr b { font-weight: 600; }
.accr > .ic-s { color: var(--tq); }
.accr .r { margin-left: auto; display: flex; align-items: center; gap: 8px; color: var(--ts); font-size: 12px; }
.accb { padding: 6px 14px 14px 40px; border-bottom: 1px solid var(--bd2); }
.accb .thumbs { grid-template-columns: repeat(8, minmax(0, 1fr)); }
.ck { width: 18px; height: 18px; border-radius: 999px; display: inline-flex; align-items: center; justify-content: center; flex: none; }
.ck .ic-xs { width: 11px; height: 11px; }
.ck.ok { background: var(--ok); color: #fff; }
.ck.wait { box-shadow: inset 0 0 0 1.5px var(--warn); }
.sig { font: italic 600 22px/1 Georgia, serif; color: var(--t2); letter-spacing: -0.02em; }
.scorep { width: 370px; flex: none; border-left: 1px solid var(--bd); background: var(--rail); display: flex; flex-direction: column; }
.sph { padding: 18px 20px 12px; display: flex; flex-direction: column; gap: 10px; border-bottom: 1px solid var(--bd2); }
.sph .r1 { display: flex; align-items: center; gap: 8px; }
.sph .r1 b { font-size: 14px; font-weight: 650; }
.lock { display: flex; gap: 10px; align-items: center; padding: 10px 12px; border-radius: 10px; font-size: 12.5px; background: var(--warn-bg); color: var(--warn-fg); }
.lock.ok { background: var(--ok-bg); color: var(--ok-fg); }
.lock.bad { background: var(--bad-bg); color: var(--bad-fg); }
.crit { padding: 4px 20px; display: flex; flex-direction: column; overflow: auto; flex: 1; min-height: 0; }
.cr { display: flex; align-items: center; gap: 10px; padding: 9px 0; border-bottom: 1px solid var(--bd2); }
.cr:last-child { border-bottom: 0; }
.cr .lbl2 { flex: 1; min-width: 0; }
.cr .lbl2 b { display: block; font-weight: 550; }
.cr .lbl2 span { font-size: 11.5px; color: var(--tq); }
.pf { display: inline-flex; padding: 2px; border-radius: 7px; background: var(--well); gap: 2px; }
.pf span { width: 28px; height: 22px; border-radius: 5px; display: inline-flex; align-items: center; justify-content: center; color: var(--tq); cursor: pointer; }
.pf span:hover { color: var(--tp); }
.pf span.y { background: var(--ok); color: #fff; }
.pf span.n { background: var(--bad); color: #fff; }
.meter { height: 6px; border-radius: 999px; background: var(--well); overflow: hidden; display: flex; }
.meter i { display: block; height: 100%; transition: width 0.25s; }
.spf { padding: 14px 20px; border-top: 1px solid var(--bd); display: flex; flex-direction: column; gap: 10px; }
.spf .tot { display: flex; align-items: baseline; gap: 8px; }
.spf .tot b { font-size: 24px; font-weight: 700; letter-spacing: -0.02em; font-variant-numeric: tabular-nums; }
.spf .tot span { color: var(--ts); }
.spf .row { display: flex; gap: 8px; }
.spf .row > span { flex: 1; justify-content: center; }
.ta { width: 100%; min-height: 54px; border-radius: 9px; border: 0; box-shadow: inset 0 0 0 1px var(--bd); padding: 8px 10px; color: var(--tp); background: var(--sheet); box-sizing: border-box; font: 13px var(--sans); resize: none; outline: 0; }
.ta::placeholder { color: var(--tq); }

/* inbox + complaints: list and detail side by side */
.tp { flex: 1; min-height: 0; display: flex; }
.tpl { width: 400px; flex: none; border-right: 1px solid var(--bd); overflow: auto; }
.tpd { flex: 1; min-width: 0; overflow: auto; display: flex; flex-direction: column; }
.tpg { height: 32px; display: flex; align-items: center; gap: 8px; padding: 0 16px 0 14px; font: 600 12px var(--sans); color: var(--ts); background: linear-gradient(var(--hover), var(--hover)), var(--sheet); border-bottom: 1px solid var(--bd2); position: sticky; top: 0; z-index: 1; }
.ii { display: flex; gap: 11px; padding: 11px 16px 11px 14px; border-bottom: 1px solid var(--bd2); cursor: pointer; align-items: flex-start; }
.ii:hover { background: var(--hover); }
.ii.on, .ii.on:hover { background: var(--fill); }
.ii > .av { width: 26px; height: 26px; line-height: 26px; font-size: 10px; margin-top: 1px; }
.ii .tx { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.ii .l1 { display: flex; align-items: center; gap: 6px; }
.ii .l1 b { font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ii .l1 .t { margin-left: auto; color: var(--tq); font-size: 12px; white-space: nowrap; }
.ii .l2 { color: var(--ts); font-size: 12.5px; }
.ii .l3 { color: var(--tq); font-size: 12.5px; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.ii .ud { width: 7px; height: 7px; border-radius: 999px; background: var(--accent); flex: none; }
.ii.read .ud { visibility: hidden; }
.ii.read .l1 b { font-weight: 500; color: var(--t2); }
.ii .tags { display: flex; gap: 4px; flex-wrap: wrap; margin-top: 5px; }
.ii .pill { height: 19px; font-size: 10.5px; padding: 0 7px; }
.dhd { padding: 20px 32px 18px; display: flex; flex-direction: column; gap: 14px; border-bottom: 1px solid var(--bd2); }
.dhd .r1 { display: flex; align-items: center; gap: 12px; }
.dhd h2 { margin: 0; font-size: 20px; font-weight: 650; letter-spacing: -0.02em; line-height: 1.2; }
.dtags { display: flex; gap: 6px; flex-wrap: wrap; }
.ctx { display: flex; align-items: center; gap: 12px; padding: 12px 12px 12px 14px; border-radius: 12px; box-shadow: inset 0 0 0 1px var(--bd); }
.ctx b { font-weight: 600; }
.thr { padding: 20px 32px; display: flex; flex-direction: column; gap: 16px; flex: 1; }
.msg { display: flex; gap: 12px; }
.msg > .av { width: 28px; height: 28px; line-height: 28px; font-size: 10px; }
.msg .bd { flex: 1; min-width: 0; }
.msg .h { display: flex; gap: 8px; align-items: baseline; }
.msg .h b { font-weight: 600; }
.msg .h span { color: var(--tq); font-size: 12px; }
.msg p { margin: 4px 0 0; color: var(--t2); }
.msg.mail p { padding: 12px 14px; border-radius: 10px; background: var(--well); }
.msg.mine p { color: var(--tp); }
.rep { margin: 0 32px 24px; }
.sumb { display: flex; gap: 10px; padding: 12px 14px; border-radius: 12px; background: var(--pur-bg); color: var(--pur-fg); }
.sumb b { font-weight: 650; display: block; margin-bottom: 2px; }
.dempty { flex: 1; display: flex; flex-direction: column; gap: 8px; align-items: center; justify-content: center; color: var(--tq); padding: 40px; }

/* calendar */
.calh { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); border-bottom: 1px solid var(--bd); flex: none; }
.calh span { padding: 8px 10px; font-size: 12px; color: var(--tq); font-weight: 500; }
.calm { font-weight: 650; min-width: 124px; text-align: center; white-space: nowrap; }
.cal { flex: 1; min-height: 0; overflow: auto; display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); grid-auto-rows: minmax(116px, 1fr); }
.cd { border-right: 1px solid var(--bd2); border-bottom: 1px solid var(--bd2); padding: 6px; display: flex; flex-direction: column; gap: 3px; min-width: 0; }
.cd:nth-child(7n) { border-right: 0; }
.cd.out { background: var(--hover); }
.cd.out .dn { color: var(--tq); }
.dn { width: 22px; height: 22px; border-radius: 999px; display: inline-flex; align-items: center; justify-content: center; font-size: 12px; font-weight: 600; color: var(--t2); margin-bottom: 1px; flex: none; }
.cd.today .dn { background: var(--accent); color: var(--on-accent); }
.evs { display: flex; flex-direction: column; gap: 3px; min-width: 0; }
.ev { height: 22px; display: flex; align-items: center; gap: 6px; padding: 0 7px; border-radius: 6px; font-size: 12px; color: var(--t2); background: var(--well); white-space: nowrap; overflow: hidden; cursor: pointer; flex: none; }
.ev:hover { background: var(--fill); }
.ev i { width: 6px; height: 6px; border-radius: 999px; flex: none; }
.ev .pc { font: 11px var(--mono); color: var(--ts); }
.ev .nm { overflow: hidden; text-overflow: ellipsis; }
.ev.demo { background: var(--info-bg); color: var(--info-fg); font-weight: 600; }
.ev.demo .pc { color: inherit; }
.cmore { font-size: 11.5px; color: var(--tq); padding: 0 7px; cursor: pointer; }
.cmore:hover { color: var(--tp); }

/* settings */
.set { flex: 1; overflow: auto; }
.setc { max-width: 760px; margin: 0 auto; padding: 40px 32px 60px; display: flex; flex-direction: column; gap: 12px; }
.setc h1 { margin: 0; font-size: 24px; font-weight: 650; letter-spacing: -0.02em; }
.setc > p { margin: -4px 0 10px; color: var(--ts); }
.pseg { max-width: 100%; overflow-x: auto; scrollbar-width: none; margin-bottom: 6px; }
.scard { border-radius: 12px; box-shadow: inset 0 0 0 1px var(--bd); overflow: hidden; flex: none; }
.sch { height: 50px; display: flex; align-items: center; gap: 12px; padding: 0 14px; cursor: pointer; }
.sch:hover { background: var(--hover); }
.sch b { font-weight: 600; }
.sch .wt { width: 28px; height: 28px; }
.sch .r { margin-left: auto; display: flex; gap: 10px; align-items: center; color: var(--tq); font-size: 12.5px; }
.srow { height: 42px; display: flex; align-items: center; gap: 12px; padding: 0 14px 0 54px; border-top: 1px solid var(--bd2); }
.srow:hover { background: var(--hover); }
.srow b { font-weight: 500; flex: 1; }
.srow .u { color: var(--tq); font-size: 12px; }
.srow .del { opacity: 0; }
.srow:hover .del { opacity: 1; }
.sadd input { flex: 1; border: 0; outline: 0; background: transparent; font: 13px var(--sans); color: var(--tp); }
.sadd input::placeholder { color: var(--tq); }

/* overlays */
.palbg { position: absolute; inset: 0; background: oklch(0 0 0 / 0.28); display: flex; justify-content: center; align-items: flex-start; padding-top: 14vh; z-index: 20; }
.pal { width: 600px; border-radius: 14px; background: var(--raise); box-shadow: 0 0 0 1px oklch(0 0 0 / 0.1), 0 24px 70px oklch(0 0 0 / 0.3); overflow: hidden; }
.pin2 { height: 52px; display: flex; align-items: center; gap: 10px; padding: 0 16px; border-bottom: 1px solid var(--bd); color: var(--tq); }
.pq { flex: 1; min-width: 0; border: 0; outline: 0; background: transparent; font: 15px var(--sans); color: var(--tp); }
.pq::placeholder { color: var(--tq); }
.plist { padding: 6px; max-height: 380px; overflow: auto; }
.pc2 { height: 38px; display: flex; align-items: center; gap: 10px; padding: 0 10px; border-radius: 8px; color: var(--t2); cursor: pointer; }
.pc2:hover, .pc2.on { background: var(--fill); color: var(--tp); }
.pc2 b { font-weight: 550; }
.pc2 em { margin-left: auto; font-style: normal; color: var(--tq); font-size: 12px; }
.pempty { padding: 18px; text-align: center; color: var(--tq); }
.toast { position: absolute; left: 50%; bottom: 80px; transform: translateX(-50%); display: flex; align-items: center; gap: 9px; padding: 10px 14px; border-radius: 10px; background: var(--mk); color: var(--sheet); font-weight: 500; box-shadow: 0 12px 30px oklch(0 0 0 / 0.25); z-index: 30; animation: rise 0.2s ease-out; white-space: nowrap; pointer-events: none; }
@keyframes rise { from { transform: translate(-50%, 8px); opacity: 0; } to { transform: translate(-50%, 0); opacity: 1; } }

/* tablet */
@media (max-width: 1240px) {
  .app { min-width: 0; }
  .sb { width: 212px; }
  .rail { width: 290px; }
  .scorep { width: 330px; }
  .peek { width: 340px; }
  .tpl { width: 340px; }
  .rec { padding: 22px 24px 0; }
  .body { padding: 20px 24px 36px; }
  .wh { padding: 18px 24px 0; }
  .wbody { padding: 14px 24px; }
  .wfoot { padding: 0 16px 0 24px; }
  .sup { grid-template-columns: 300px minmax(0, 1fr); }
  .rtop { flex-wrap: wrap; row-gap: 12px; }
  .rtop > div:nth-child(2) { flex: 1 1 calc(100% - 68px); }
  .rtop > .gap { display: none; }
  .hl { grid-template-columns: repeat(2, minmax(0, 1fr)) !important; }
  .hc:nth-child(3) { border-left: 0; }
  .hc:nth-child(n+3) { border-top: 1px solid var(--bd); }
  .pipe { overflow-x: auto; scrollbar-width: none; }
  .vtx { overflow-x: auto; scrollbar-width: none; min-width: 0; flex: 0 1 auto; }
  .lrw .ref { display: none; }
  .dhd, .thr { padding-left: 24px; padding-right: 24px; }
  .rep { margin: 0 24px 20px; }
}

/* phone */
@media (max-width: 900px) {
  .app { flex-direction: column; height: 100dvh; }
  .hm, .sbr, .legend, .tb .kbd { display: none !important; }
  .mo { display: inline-flex !important; }
  .mtop { display: flex; align-items: center; gap: 8px; height: 52px; flex: none; padding: 0 8px; border-bottom: 1px solid var(--bd); }
  .mtop b { font-weight: 650; }
  .mtop .ib { width: 38px; height: 38px; border-radius: 9px; }
  .app:not(.navopen) .sb { display: none; }
  .sb { position: absolute; left: 0; top: 0; bottom: 0; width: min(290px, 84vw); z-index: 41; background: var(--app); box-shadow: 16px 0 40px oklch(0 0 0 / 0.22); padding-top: 12px; }
  .sb .ni { height: 36px; }
  .navbg { display: block; position: absolute; inset: 0; background: oklch(0 0 0 / 0.35); z-index: 40; }
  .sheet { margin: 0; border-radius: 0; box-shadow: none; }
  .tb { padding: 0 8px 0 14px; }
  .crumb { min-width: 0; overflow: hidden; flex: 0 1 auto; }
  .vcrumb b { display: none; }
  .vtx { margin-left: 2px; }
  .hint { margin: 8px 12px 2px; }
  .btn, .btn2 { height: 34px; }
  .tb .btn2, .tb .btn { min-width: 34px; justify-content: center; }
  .fbar { overflow-x: auto; padding: 8px 12px; scrollbar-width: none; }

  /* views */
  .gh { padding: 0 12px; }
  .lrw { height: auto; min-height: 54px; flex-wrap: wrap; padding: 9px 12px; row-gap: 5px; }
  .lrw .ref, .lrw .cbx { display: none; }
  .rt { flex: 1 1 calc(100% - 60px); }
  .rp { margin-left: 24px; padding-left: 0; width: calc(100% - 24px); flex-wrap: wrap; row-gap: 4px; }
  .lrw > .av + .rt + .rp { margin-left: 58px; width: calc(100% - 58px); }
  .rp > :nth-child(n+4) { display: none; }
  .rp .pp { min-width: 0 !important; }
  .board { padding: 12px 12px 96px; gap: 10px; scroll-snap-type: x mandatory; }
  .col { width: calc(100vw - 44px); scroll-snap-align: center; }
  .peek, .drawer { position: absolute; inset: 0; width: auto; border-left: 0; }
  .pop { left: 12px; right: 12px; width: auto; }
  .pop .seg { max-width: 100%; overflow-x: auto; scrollbar-width: none; }
  .selbar { left: 12px; right: 12px; transform: none; overflow-x: auto; animation: none; }

  /* list + detail screens: one pane at a time */
  .tpl { width: 100%; border-right: 0; }
  .tp > .tpd { display: none; }
  .tp.pd > .tpl { display: none; }
  .tp.pd > .tpd { display: flex; }
  .dhd, .thr { padding-left: 16px; padding-right: 16px; }
  .rep { margin: 0 12px 16px; }

  /* calendar: dots in the month grid */
  .calh span { padding: 6px 4px; text-align: center; }
  .cal { grid-auto-rows: minmax(64px, auto); }
  .cd { padding: 4px; align-items: center; }
  .evs { flex-direction: row; flex-wrap: wrap; justify-content: center; gap: 3px; }
  .ev { height: auto; padding: 0; background: none !important; }
  .ev .pc, .ev .nm { display: none; }
  .ev i { width: 7px; height: 7px; }
  .cmore { padding: 0; font-size: 10.5px; }
  .calm { min-width: 0; }

  /* settings */
  .setc { padding: 22px 16px 40px; }
  .srow { padding-left: 14px; }

  /* job and installer pages: one column */
  .jsplit { flex-direction: column; overflow: auto; }
  .jsplit > .main, .jsplit > .rail { display: contents; }
  .jsplit .rec { order: 1; padding: 18px 16px 0; gap: 14px; }
  .jsplit .rail > .rs { order: 4; padding: 14px 16px; border-bottom: 0; border-top: 1px solid var(--bd2); background: var(--rail); }
  .jsplit .rail > .rs:first-child { order: 2; margin-top: 16px; background: transparent; }
  .jsplit .body { order: 3; padding: 18px 16px 24px; border-top: 1px solid var(--bd2); }
  .rtop { gap: 12px; }
  .rtop > div:nth-child(2) { flex: 1 1 calc(100% - 64px); }
  .avbig { width: 44px; height: 44px; line-height: 44px; font-size: 16px; border-radius: 12px; }
  .rtop h1 { font-size: 22px; }
  .meta { flex-wrap: wrap; white-space: normal; row-gap: 4px; }
  .pline { flex: none; width: 16px; min-width: 0; margin: 0 8px; }
  .sh { flex-wrap: wrap; }
  .sh .r { margin-left: 0; width: 100%; overflow-x: auto; }
  .tl .lrw .rp { margin-left: 24px; }

  /* work views */
  .wrail { display: none; }
  .wh { padding: 14px 16px 0; gap: 10px; }
  .wh1 { flex-wrap: wrap; }
  .wh1 > .gap { display: none; }
  .wh1 > div { flex: 1 1 0; min-width: 0; }
  .wh1 h1 { font-size: 18px; }
  .wh1 .sub { white-space: normal; flex-wrap: wrap; }
  .wh1 > .seg { max-width: 100%; overflow-x: auto; scrollbar-width: none; }
  .stepper { overflow-x: auto; scrollbar-width: none; gap: 8px; }
  .sp-line { width: 12px; flex: none; }
  .wbody { padding: 12px; }
  .wfoot { height: auto; min-height: 60px; padding: 10px 12px; }
  .wfoot .sum { display: none; }
  .wfoot .btn { flex: 1; justify-content: center; }
  .lr.head { display: none; }
  .lr { grid-template-columns: minmax(0, 1fr) auto 24px; height: auto; padding: 11px 12px; row-gap: 8px; }
  .lr > :nth-child(1) { grid-area: 1 / 1 / 2 / 3; white-space: normal; }
  .lr > :nth-child(6) { grid-area: 1 / 3; }
  .lr > :nth-child(5) { grid-area: 2 / 1; justify-self: start; }
  .lr > :nth-child(4) { grid-area: 2 / 2 / 3 / 4; justify-self: end; }
  .lr > :nth-child(2), .lr > :nth-child(3) { display: none; }
  .sup { grid-template-columns: 1fr; min-height: 0; flex: none; }
  .mapw { order: -1; min-height: 0; background: none; box-shadow: none; overflow: visible; }
  .mapw .grid, .mapw .road, .mapw .riv, .mapw .home, .mapw .pin { display: none; }
  .pick { position: static; box-shadow: inset 0 0 0 1.5px var(--accent); }
  .pick .r1 { flex-wrap: wrap; }
  .grid3 { grid-template-columns: 1fr 1fr; }
  .grid3 > .kv:first-child { grid-column: 1 / -1; }
  .placed { padding: 24px 16px; }
  .pc { width: 100%; }
  .prow .btn { flex: 1; justify-content: center; }
  .ssplit { flex-direction: column; overflow: auto; }
  .ssplit > .main { flex: none; }
  .ssplit .wbody { overflow: visible; }
  .scorep { width: auto; border-left: 0; border-top: 1px solid var(--bd); }
  .crit { overflow: visible; padding: 4px 16px; }
  .sph, .spf { padding-left: 16px; padding-right: 16px; }
  .accr { height: auto; min-height: 48px; flex-wrap: wrap; padding: 10px 12px; row-gap: 6px; }
  .accr .r { flex-wrap: wrap; }
  .accb { padding: 4px 12px 12px; }
  .accb .thumbs { grid-template-columns: repeat(4, minmax(0, 1fr)); }

  .palbg { padding: 8vh 12px 0; }
  .pal { width: 100%; }
  .toast { bottom: 88px; max-width: calc(100% - 32px); white-space: normal; box-sizing: border-box; }
}
/* aligned table lists */
.lv { container-type: inline-size; }
.cw { display: contents; }
.lhd { position: sticky; top: 0; z-index: 3; height: 32px; display: flex; align-items: center; gap: 10px; padding: 0 18px 0 12px; background: var(--sheet); border-bottom: 1px solid var(--bd2); font: 500 11.5px var(--sans); color: var(--tq); box-sizing: border-box; }
.lhd > .cbx, .lhd > .si { visibility: hidden; }
.lhd .ref { width: 86px; flex: none; }
.lhd .rt { flex: 1 1 auto; }
.lhd .rt b { font-weight: 500; }
.lv.tbl .gh { top: 32px; }
.lv.tbl .rt { flex: 1 1 auto; }
.lv.tbl .rt em { overflow: hidden; text-overflow: ellipsis; }
.rp .cell { flex: none; display: flex; align-items: center; min-width: 0; overflow: hidden; box-sizing: border-box; }
.rp .cell > * { max-width: 100%; overflow: hidden; text-overflow: ellipsis; min-width: 0 !important; }
.rp .cell > .pill { display: inline-block; line-height: 20px; }
.rp .c-val, .rp .c-age { justify-content: flex-end; }
.pp.q { color: var(--tq); }
.pp.late { color: var(--warn-fg); }
@container (max-width: 1060px) { .c-age, .c-paid { display: none !important; } }
@container (max-width: 900px) { .c-date { display: none !important; } .lv.tbl .rt em { display: none; } }
@container (max-width: 760px) { .c-task { display: none !important; } }
.lk2:hover { text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 4px; }
/* Linear-style filters */
.fbar { position: relative; }
.fbtn.on { background: var(--fill); color: var(--tp); }
.fhide { display: none; }
.fch { display: inline-flex; align-items: stretch; height: 24px; border-radius: 7px; box-shadow: inset 0 0 0 1px var(--bd); font-size: 12px; color: var(--t2); white-space: nowrap; background: var(--sheet); overflow: hidden; flex: none; }
.fch > span { display: inline-flex; align-items: center; gap: 5px; padding: 0 7px; }
.fch > span + span { box-shadow: inset 1px 0 0 var(--bd2); }
.fch .fk { color: var(--ts); }
.fch .fk .ic-xs { color: var(--tq); }
.fch .fo { color: var(--tq); cursor: pointer; }
.fch .fv { font-weight: 600; color: var(--tp); cursor: pointer; max-width: 220px; overflow: hidden; text-overflow: ellipsis; display: inline-block; line-height: 24px; }
.fch .fx { color: var(--tq); cursor: pointer; padding: 0 5px; }
.fch .fo:hover, .fch .fv:hover, .fch .fx:hover { background: var(--hover); color: var(--tp); }
.fclr { font-size: 12px; color: var(--ts); cursor: pointer; padding: 0 4px; flex: none; }
.fclr:hover { color: var(--tp); }
.btn2.sm.fsave { height: 24px; font-size: 12px; padding: 0 8px; }
.fwrap { display: contents; }
.fbg { position: fixed; inset: 0; z-index: 20; }
.fpop { position: absolute; top: calc(100% + 4px); left: 12px; width: 300px; background: var(--raise); border-radius: 10px; box-shadow: var(--pop); z-index: 21; overflow: hidden; animation: rise 0.12s ease-out; }
.fsrch { display: flex; align-items: center; gap: 8px; height: 40px; padding: 0 8px 0 12px; border-bottom: 1px solid var(--bd2); color: var(--tq); }
.fsrch .fbk { width: 24px; height: 24px; margin-left: -6px; }
.fsrch input { flex: 1; min-width: 0; border: 0; outline: 0; background: transparent; font: 13px var(--sans); color: var(--tp); }
.fsrch input::placeholder { color: var(--tq); }
.fopts { max-height: 340px; overflow: auto; padding: 4px; }
.fo2 { display: flex; align-items: center; gap: 9px; height: 30px; padding: 0 8px; border-radius: 6px; cursor: pointer; color: var(--t2); }
.fo2.hi { background: var(--fill); color: var(--tp); }
.fo2:hover { background: var(--hover); color: var(--tp); }
.fo2 .ic-s, .fo2 .ic-xs { color: var(--tq); }
.fo2 .ol { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.fo2 .on2 { color: var(--tq); font-size: 11.5px; font-variant-numeric: tabular-nums; }
.fo2 .cbx { opacity: 1; }
.fo2 .av { width: 18px; height: 18px; line-height: 18px; font-size: 8px; }
.fnone { padding: 16px; text-align: center; color: var(--tq); font-size: 12px; }
@media (max-width: 900px) {
  .fpop { position: fixed; left: 12px; right: 12px; top: 104px; width: auto; }
  .lhd { display: none; }
  .rp .cell { width: auto !important; }
  .lv.tbl .gh { top: 0; }
}
.lv.tbl .rt b { flex: none; max-width: 70%; }
.lv.tbl .rt em { min-width: 0; }
        /* job page: materials, install plan, two columns on wide screens */
.jcol { display: flex; flex-direction: column; gap: 26px; min-width: 0; }
.jact { min-width: 0; }
.mr { display: flex; align-items: center; gap: 12px; min-height: 40px; padding: 6px 14px; border-bottom: 1px solid var(--bd2); box-sizing: border-box; cursor: pointer; }
.mr:hover { background: var(--hover); }
.mr:last-child { border-bottom: 0; }
.mr > .pill { width: 96px; justify-content: center; overflow: hidden; text-overflow: ellipsis; }
.mr b { font-weight: 550; flex: 1; min-width: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.mr em { font-style: normal; font-size: 11.5px; color: var(--tq); }
.mr .q { width: 28px; text-align: right; color: var(--ts); font-variant-numeric: tabular-nums; }
.mr .pr { width: 78px; text-align: right; font-variant-numeric: tabular-nums; color: var(--t2); }
.mr.tot { background: var(--hover); cursor: default; }
.mr.tot > .ic-s { width: 96px; color: var(--tq); }
.mr.tot b { font-weight: 500; color: var(--ts); }
.mr.tot .pr { font-weight: 700; color: var(--tp); }
.jmact { display: flex; align-items: center; gap: 10px; margin-top: 10px; }
.jmact em { font-style: normal; color: var(--tq); font-size: 12px; }
.pr2 { display: flex; align-items: flex-start; gap: 12px; padding: 10px 14px; border-bottom: 1px solid var(--bd2); }
.pr2:last-child { border-bottom: 0; }
.pr2 .tm { width: 40px; flex: none; font: 12px var(--mono); color: var(--tq); padding-top: 1px; }
.pr2 .dt { width: 9px; height: 9px; border-radius: 99px; box-shadow: inset 0 0 0 1.5px var(--tq); flex: none; margin-top: 4px; }
.pr2 .dt.ok { background: var(--ok); box-shadow: none; }
.pr2 b { display: block; font-weight: 550; }
.pr2 em { font-style: normal; color: var(--tq); font-size: 12px; }
.jsplit > .main { container-type: inline-size; }
@container (min-width: 1080px) {
  .jbody { display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr); gap: 28px; align-items: start; }
  .jact { position: sticky; top: 0; }
}
@media (max-width: 900px) { .mr > .pill { display: none; } .mr.tot > .ic-s { width: auto; } }

/* ---- 10-actions.css ---- */
/* button resets: the prototype used spans, these are real buttons */
button.btn, button.btn2, button.ib, button.chip { border: 0; cursor: pointer; font-family: var(--sans); }
button.btn { font: 550 12.5px var(--sans); }
button.btn.sm { font-size: 12px; }
button.btn2 { font: 500 12.5px var(--sans); }
button.btn2.sm { font-size: 12px; }
button.chip { font-size: 12px; }
button.ib { background: none; padding: 0; }
button.btn:disabled, button.btn2:disabled { cursor: default; }
kbd.kbd { font-family: var(--sans); }
.seg span { cursor: pointer; }
.btn:focus-visible, .btn2:focus-visible, .ib:focus-visible, .chip:focus-visible, .seg span:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
/* pill leading dot: same shape as the prototype's .seg i.dd */
.pill .ht-dot { width: 6px; height: 6px; border-radius: 999px; background: currentColor; display: inline-block; flex: none; }
/* staff photo: same rule as lib/people.js .pp-img */
.av.ht-photo { background-size: cover; background-position: center; color: transparent; text-shadow: none; border: 0; }
/* toast in normal flow (the prototype positions it over the page) */
.toast.ht-inline { position: static; transform: none; animation: none; display: inline-flex; }

/* ---- 20-forms.css ---- */
.ht-field { display: flex; flex-direction: column; gap: 6px; min-width: 0; }
.ht-field > .lbl { margin-top: 0; display: flex; align-items: center; gap: 6px; }
.ht-field > .lbl em { margin-left: auto; font-variant-numeric: tabular-nums; }
.ht-fhelp { font-size: 11.5px; color: var(--tq); }
.ht-fhelp.err { color: var(--bad-fg); }
.inp.err, .ta.err, .sel.err { box-shadow: inset 0 0 0 1.5px var(--bad); }
.ht-inp { gap: 6px; color: var(--tq); }
.ht-inp input { flex: 1; min-width: 0; border: 0; outline: 0; background: transparent; font: inherit; color: var(--tp); padding: 0; }
.ht-inp input::placeholder { color: var(--tq); }
.ht-inp:focus-within, .isrch:focus-within, .ht-sel:focus-within { outline: 2px solid var(--accent); outline-offset: 2px; }
.ht-suffix { color: var(--tq); font-size: 12px; }
.ta:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.isrch { height: 26px; border-radius: 7px; box-shadow: inset 0 0 0 1px var(--bd); display: inline-flex; align-items: center; gap: 6px; padding: 0 8px; color: var(--tq); background: var(--sheet); flex: none; }
.isrch input { border: 0; outline: none; background: transparent; font: 12.5px var(--sans); color: var(--tp); width: 150px; }
.isrch.lg { flex: 1; height: 34px; border-radius: 8px; padding: 0 10px; box-sizing: border-box; }
.isrch.lg input { width: 100%; font-size: 13px; }
.ht-sel { position: relative; }
.ht-sel select { appearance: none; -webkit-appearance: none; border: 0; background: transparent; font: inherit; color: var(--tp); outline: 0; height: 100%; flex: 1; min-width: 0; padding: 0 16px 0 0; cursor: pointer; }
.ht-sel .ic-xs { position: absolute; right: 6px; pointer-events: none; }
button.ht-cb, button.ht-sw, .ht-ibx { border: 0; padding: 0; font: inherit; cursor: pointer; }
button.ht-cb { background: transparent; }
button.ht-cb.on { background: var(--accent); }
button.ht-sw { background: var(--fill); }
button.ht-sw.on { background: var(--accent); }
button.ht-cb:disabled, button.ht-sw:disabled { opacity: 0.5; cursor: not-allowed; }
.ht-ibx { background: transparent; display: inline-flex; align-items: center; justify-content: center; border-radius: 6px; }
.ht-cb:focus-visible, .ht-sw:focus-visible, .ht-ibx:focus-visible, .qty .q:focus-visible, .accr:focus-visible, .pf span:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.qty .q.off { opacity: 0.4; cursor: default; }
.ht-accb { padding: 12px 14px; border-bottom: 1px solid var(--bd2); }

/* ---- 30-shell.css ---- */
/* shell: resets for real buttons/links where the prototype used divs and spans */
:where(button, a).ni { width: 100%; border: 0; background: none; font-family: inherit; font-size: inherit; line-height: inherit; text-align: left; text-decoration: none; cursor: pointer; }
:where(button).ib, :where(button).btn, :where(button).btn2 { border: 0; padding: 0; }
:where(button).btn { padding: 0 12px; }
:where(button).btn2 { padding: 0 10px; }
:where(button).ib { background: none; cursor: pointer; }
:where(button).opt { width: 100%; border: 0; background: none; font: inherit; color: inherit; text-align: left; }
button.btn:disabled { cursor: default; }
button.ht-crumb-link, a.ht-crumb-link { border: 0; background: none; padding: 0; font: inherit; cursor: pointer; text-decoration: none; }
.ni:focus-visible, .ib:focus-visible, .btn:focus-visible, .btn2:focus-visible, .opt:focus-visible, .vtabs span:focus-visible, .sp:focus-visible, .pq:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.pq:focus-visible { outline: 0; }

/* popover menu */
.pop.ht-pop-inline { position: static; }
.pop.ht-pop-menu { padding: 6px; gap: 2px; }
.ht-pop-item .ic-s { color: var(--tq); }
.ht-pop-item .ht-pop-kbd { margin-left: auto; }
.ht-pop-item.ht-danger, .ht-pop-item.ht-danger .ic-s { color: var(--bad-fg); }
.ht-pop-sep { height: 1px; background: var(--bd); margin: 4px 2px; }

/* command palette group labels */
.ht-pal-group { font: 500 12px var(--sans); color: var(--tq); padding: 8px 10px 4px; }

/* app shell: preview-friendly width (app.css pins min-width 1240px) */
.app.ht-fit { min-width: 0; }

/* ---- 40-lists.css ---- */
.ht-bare { font: inherit; border: 0; background: none; padding: 0; cursor: pointer; }
.ht-bare:focus-visible, .cbx:focus-visible, .gh:focus-visible, .lrw:focus-visible, .card:focus-visible, .lrow:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.qty button.q { width: 28px; height: 28px; display: inline-flex; align-items: center; justify-content: center; color: var(--ts); }
.qty button.q:hover { background: var(--hover); color: var(--tp); }
.del.ht-bare { color: var(--tq); }
.del.ht-bare:hover { color: var(--bad-fg); }
.ht-thicon { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; color: #fff; opacity: 0.85; }
/* premium.css integration list */
.list { border-radius: 10px; box-shadow: inset 0 0 0 1px var(--bd); background: var(--sheet); overflow: hidden; }
.lrow { display: flex; align-items: center; gap: 14px; padding: 12px 16px; min-height: 62px; box-sizing: border-box; border-bottom: 1px solid var(--bd); cursor: pointer; }
.lrow:last-child { border-bottom: 0; }
.lrow:hover { background: var(--hover); }
.lrow .tx { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.lrow .tx b { font-weight: 550; }
.lrow .tx > span { color: var(--ts); font-size: 12.5px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.lrow .rs2 { display: flex; align-items: center; gap: 10px; flex: none; font-size: 12.5px; color: var(--ts); }
.lrow.lock .logo { filter: grayscale(1); opacity: 0.45; }
.lrow.lock .tx b { color: var(--ts); }
.stt { display: inline-flex; align-items: center; gap: 7px; color: var(--ts); font-size: 12.5px; white-space: nowrap; }
.stt::before { content: ''; width: 7px; height: 7px; border-radius: 9px; background: var(--ht-stt, var(--ok)); }
.logo { width: 28px; height: 28px; border-radius: 7px; color: #fff; text-align: center; flex: none; font: 650 12.5px/28px var(--sans); box-shadow: inset 0 0 0 1px oklch(0 0 0 / 0.08); text-shadow: none; }
@media (max-width: 900px) { .lrow { padding: 12px 14px; gap: 12px; } .lrow .rs2 .btn2 { display: none; } }

/* board drag and drop (opt-in via Board onMoveCard) */
.ht-40-sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
.ht-40-drag { cursor: grab; touch-action: none; user-select: none; position: relative; }
.ht-40-dragging, .ht-40-dragging .ht-40-drag { cursor: grabbing; user-select: none; }
.ht-40-lifted { opacity: 0.4; box-shadow: inset 0 0 0 1px var(--bd2); }
.ht-40-ghost { position: fixed; z-index: 1000; margin: 0; pointer-events: none; cursor: grabbing; box-sizing: border-box; transform: rotate(1.5deg); box-shadow: 0 0 0 1.5px var(--accent), 0 12px 28px oklch(0 0 0 / 0.22); }
.ht-40-before::before, .ht-40-after::after { content: ''; position: absolute; left: 0; right: 0; height: 3px; border-radius: 3px; background: var(--accent); pointer-events: none; }
.ht-40-before::before { top: -6px; }
.ht-40-after::after { bottom: -6px; }
.col.ht-40-over { background: color-mix(in oklch, var(--accent) 8%, var(--hover)); box-shadow: inset 0 0 0 1.5px var(--accent); }
.col.ht-40-over.ht-40-deny { background: color-mix(in oklch, var(--bad-fg) 6%, var(--hover)); box-shadow: inset 0 0 0 1.5px var(--bad-fg); cursor: not-allowed; }
.col.ht-40-deny .cards::after { content: 'Not allowed here'; align-self: center; color: var(--bad-fg); font-size: 12px; padding: 4px 0; }

/* ---- 50-record.css ---- */
/* button resets: the prototype built these from spans */
.composer button.ib { border: 0; background: none; padding: 0; font: inherit; cursor: pointer; }
.composer button.btn { border: 0; cursor: pointer; }
.composer button.btn:disabled { opacity: 0.5; cursor: default; filter: none; }
.composer textarea.cin { width: 100%; resize: none; box-sizing: border-box; line-height: 1.4; min-height: 22px; field-sizing: content; }
.af span:focus-visible, .wr:focus-visible, .pin:focus-visible, .composer .ib:focus-visible, .composer .btn:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }

/* ---- 60-inbox.css ---- */
/* 60-inbox: extras app.css lacks. */
.ht-calmonth { display: flex; flex-direction: column; min-height: 0; flex: 1; }
.mcal span.ht-sel { background: var(--accent); color: var(--on-accent); }
.mcal span[role="button"], .cmore[role="button"], .sch[role="button"] { cursor: pointer; }
.ht-bare { font: inherit; border: 0; background: none; padding: 0; color: inherit; cursor: pointer; display: inline-flex; }
.ii:focus-visible, .mi:focus-visible, .ev:focus-visible, .sch:focus-visible, .mcal span:focus-visible, .cmore:focus-visible, .ht-bare:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.srow .del:focus-visible { opacity: 1; }
/* premium.css: page header */
.phead { margin-bottom: 8px; }
.phead h1 { margin: 0; font: 600 24px/1.2 var(--sans); letter-spacing: -0.022em; }
.phead p { margin: 6px 0 0; color: var(--ts); font-size: 13.5px; line-height: 1.55; max-width: 600px; }
.phead .acts { margin-top: 20px; display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
/* pim.css: brand tiles */
.blogo { width: 28px; height: 28px; border-radius: 8px; flex: none; display: inline-flex; align-items: center; justify-content: center; font: 750 10.5px var(--sans); letter-spacing: -0.02em; box-shadow: inset 0 0 0 1px oklch(0 0 0 / 0.06); }
.blogo.sm { width: 20px; height: 20px; border-radius: 6px; font-size: 8.5px; }
.blogo.lg { width: 64px; height: 64px; border-radius: 16px; font-size: 20px; box-shadow: var(--lift); }
.blogo.xl { width: 100%; height: 72px; border-radius: 10px; font-size: 18px; }
.bvi { background: oklch(0.55 0.19 27); color: #fff; }
.bwb { background: oklch(0.35 0.08 250); color: #fff; }
.bva { background: oklch(0.6 0.13 155); color: #fff; }
.bid { background: oklch(0.93 0.02 250); color: oklch(0.3 0.05 250); }
.bge { background: oklch(0.82 0.15 125); color: oklch(0.25 0.06 140); }
.bhv { background: oklch(0.85 0.15 85); color: oklch(0.25 0.04 70); }
.bfx { background: oklch(0.45 0.12 300); color: #fff; }
.bht { background: var(--mk); color: var(--sheet); }

/* ---- 70-hpd.css ---- */
/* Heat pump design components. Values copied from lib/hpd.css. */
.hd-st { width: 16px; height: 16px; border-radius: 99px; display: inline-flex; align-items: center; justify-content: center; flex: none; color: #fff; }
.hd-st.ok { background: var(--ok); } .hd-st.bad { background: var(--bad); }
.hd-st .ic-xs { width: 10px; height: 10px; }
.hd-kv { display: flex; align-items: baseline; gap: 10px; font-size: 12px; color: var(--ts); }
.hd-kv > span:last-child { margin-left: auto; color: var(--tp); font-weight: 550; font-variant-numeric: tabular-nums; text-align: right; }
.hd-kv .ok { color: var(--ok-fg); } .hd-kv .bad { color: var(--bad-fg); } .hd-kv .warn { color: var(--warn-fg); }

/* rail */
.hd-rail { width: 44px; flex: none; border-right: 1px solid var(--bd2); display: flex; flex-direction: column; align-items: center; gap: 2px; padding: 8px 0; background: var(--rail); }
.hd-rail .ib { width: 32px; height: 32px; position: relative; border: 0; background: none; padding: 0; font: inherit; }
.hd-rail .ib.on { background: var(--sheet); color: var(--tp); box-shadow: var(--lift); }
.hd-rail .ib:hover { color: var(--tp); }
.hd-rail .ib i { position: absolute; top: 5px; right: 5px; width: 6px; height: 6px; border-radius: 99px; background: var(--bad); }
.hd-rail .ib i.ok { background: var(--ok); }
.hd-rail .sep { width: 18px; height: 1px; background: var(--bd); margin: 6px 0; }
.hd-rail .ib:focus-visible, .hd-pick:focus-visible, .hd-rr:focus-visible, .hd-em:focus-visible, .hd-room:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }

/* model option (heat pump, cylinder) */
.hd-pick { display: flex; align-items: center; gap: 10px; padding: 10px; border-radius: 10px; box-shadow: inset 0 0 0 1px var(--bd); cursor: pointer; width: 100%; border: 0; background: none; font: inherit; color: inherit; text-align: left; }
.hd-pick:hover { background: var(--hover); }
.hd-pick.on { box-shadow: inset 0 0 0 1.5px var(--accent); }
.hd-pick .th { width: 34px; height: 34px; border-radius: 8px; background: var(--well); display: inline-flex; align-items: center; justify-content: center; color: var(--ts); flex: none; }
.hd-pick .nm { flex: 1; min-width: 0; }
.hd-pick .nm b { display: block; font-weight: 600; font-size: 12.5px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.hd-pick .nm em { font-style: normal; display: flex; flex-wrap: wrap; gap: 4px; margin-top: 3px; }
.hd-pick .nm em > span { white-space: nowrap; height: 18px; padding: 0 6px; border-radius: 5px; background: var(--well); font: 550 10.5px/18px var(--sans); color: var(--ts); }

/* room list */
.hd-rooms { display: flex; flex-direction: column; border-radius: 10px; box-shadow: inset 0 0 0 1px var(--bd); overflow: hidden; }
.hd-rr { display: flex; align-items: center; gap: 8px; min-height: 36px; padding: 6px 12px; border: 0; border-bottom: 1px solid var(--bd2); background: none; font: inherit; color: inherit; text-align: left; width: 100%; cursor: pointer; font-size: 12.5px; }
.hd-rr:last-child { border-bottom: 0; }
.hd-rr:hover { background: var(--hover); }
.hd-rr.on { background: var(--info-bg); }
.hd-rr .nm { flex: 1; min-width: 0; font-weight: 500; }
.hd-rr .w { font-variant-numeric: tabular-nums; color: var(--ts); }
.hd-rr .fl { font-size: 11px; color: var(--tq); }

/* emitter card */
.hd-em { border-radius: 10px; box-shadow: inset 0 0 0 1px var(--bd); padding: 10px 12px; display: flex; flex-direction: column; gap: 8px; cursor: pointer; }
.hd-em.on { box-shadow: inset 0 0 0 1.5px var(--accent); }
.hd-em .h { display: flex; align-items: center; gap: 8px; }
.hd-em .h b { flex: 1; font-weight: 600; font-size: 12.5px; }
.hd-em .h em { font-style: normal; font-size: 11.5px; color: var(--tq); }
.hd-bar { height: 6px; border-radius: 99px; background: var(--well); overflow: hidden; }
.hd-bar > span { display: block; height: 100%; border-radius: 99px; background: var(--ok); }
.hd-bar.bad > span { background: var(--bad); }
.hd-em .f { display: flex; align-items: center; gap: 8px; font-size: 12px; color: var(--ts); }
.hd-em .f .rad { flex: 1; min-width: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.hd-em .f .rad b { color: var(--tp); font-weight: 550; }
.hd-em .f .nb { font-variant-numeric: tabular-nums; white-space: nowrap; }
.hd-em .acts { display: flex; gap: 6px; }
.hd-em .acts .btn2 { height: 24px; font-size: 11.5px; padding: 0 8px; }

/* callout */
.hd-call { display: flex; gap: 10px; padding: 10px 12px; border-radius: 10px; box-shadow: inset 0 0 0 1px var(--bd); font-size: 12.5px; }
.hd-call .n { width: 20px; height: 20px; border-radius: 99px; background: var(--mk); color: var(--sheet); font: 650 10.5px/20px var(--sans); text-align: center; flex: none; }
.hd-call em { display: block; font-style: normal; color: var(--tq); font-size: 11.5px; margin-top: 2px; }

/* floor plan. .ht-hpd-cv is the canvas surface (hd-cv background) with the plan at a fixed width */
.ht-hpd-cv { position: relative; overflow: hidden; padding: 24px; background-color: var(--hover); background-image: linear-gradient(var(--bd2) 1px, transparent 1px), linear-gradient(90deg, var(--bd2) 1px, transparent 1px); background-size: 32px 32px; display: flex; justify-content: center; border-radius: 12px; }
.ht-hpd-cv .hd-plan { width: 100%; max-width: 560px; }
.hd-plan { background: var(--sheet); position: relative; aspect-ratio: 1.25; }
.hd-room { position: absolute; box-sizing: border-box; border: 2px dashed oklch(0.7 0.01 260); display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 3px; cursor: pointer; transition: background 0.15s; font: inherit; font-size: 11.5px; font-weight: 550; color: var(--tp); text-align: center; padding: 2px; background: none; }
.hd-room:hover { background: oklch(0.6 0.12 255 / 0.06); }
.hd-room.on { background: oklch(0.6 0.12 255 / 0.12); border-color: var(--info-fg); border-style: solid; z-index: 1; }
.hd-room em { font-style: normal; font-weight: 450; font-size: 10.5px; color: var(--ts); }
.hd-room.lossv em { color: var(--tp); font-weight: 600; }
.hd-wall { position: absolute; inset: 0; border: 3.5px solid var(--tp); pointer-events: none; box-sizing: border-box; }
.hd-rad { position: absolute; background: var(--sheet); border: 1.5px solid var(--ts); border-radius: 2px; pointer-events: none; box-sizing: border-box; }
.hd-rad.new { border-color: var(--accent); background: oklch(0.6 0.15 264 / 0.18); }
.hd-pipe { position: absolute; pointer-events: none; border-radius: 2px; opacity: 0.85; }
.hd-pipe.f { background: oklch(0.62 0.2 25); } .hd-pipe.r { background: oklch(0.6 0.15 250); }
.hd-dev { position: absolute; width: 28px; height: 28px; margin: -14px 0 0 -14px; border-radius: 99px; background: var(--sheet); box-shadow: inset 0 0 0 1.5px var(--tp), var(--lift); display: flex; align-items: center; justify-content: center; font: 700 8.5px var(--sans); color: var(--tp); z-index: 2; }
.hd-dev.hp { width: 46px; height: 30px; margin: -15px 0 0 -23px; border-radius: 6px; }
.hd-pin { position: absolute; width: 22px; height: 22px; margin: -22px 0 0 -11px; border-radius: 99px 99px 99px 2px; transform: rotate(-45deg); background: var(--mk); z-index: 2; display: flex; align-items: center; justify-content: center; }
.hd-pin > span { transform: rotate(45deg); color: var(--sheet); font: 700 10px var(--sans); }
.hd-ghost { position: absolute; box-sizing: border-box; border: 1px dashed var(--bd); background: oklch(0.6 0.01 260 / 0.04); display: flex; align-items: center; justify-content: center; font-size: 10.5px; color: var(--tq); pointer-events: none; }

/* inspector (static variant sits in the flow instead of floating over the canvas) */
.hd-insp { position: absolute; left: 12px; bottom: 14px; width: 250px; padding: 12px 14px; border-radius: 12px; background: var(--sheet); box-shadow: var(--pop); z-index: 4; display: flex; flex-direction: column; gap: 6px; }
.hd-insp.ht-static { position: relative; left: auto; bottom: auto; }
.hd-insp .h { display: flex; align-items: center; gap: 8px; }
.hd-insp .h b { flex: 1; font-weight: 650; }
.hd-insp .ib { width: 22px; height: 22px; border: 0; background: none; padding: 0; }

/* table */
.hd-tbl { border-radius: 12px; box-shadow: inset 0 0 0 1px var(--bd); overflow: hidden; }
.hd-tbl .t { display: flex; align-items: center; gap: 8px; padding: 12px 14px; font-weight: 650; background: var(--hover); border-bottom: 1px solid var(--bd2); }
.hd-tbl .t em { margin-left: auto; font-style: normal; font-weight: 450; color: var(--tq); font-size: 12px; }
.hd-tr { display: grid; grid-template-columns: minmax(0, 1.6fr) repeat(3, minmax(0, 1fr)); gap: 10px; align-items: center; padding: 9px 14px; border-bottom: 1px solid var(--bd2); font-size: 12.5px; }
.hd-tr:last-child { border-bottom: 0; }
.hd-tr > span:not(:first-child) { text-align: right; font-variant-numeric: tabular-nums; }
.hd-tr.hd { font-size: 11px; color: var(--tq); text-transform: uppercase; letter-spacing: 0.03em; padding-top: 7px; padding-bottom: 7px; }
.hd-tr.sv { font-weight: 650; }
.hd-tr.sv > span:not(:first-child) { color: var(--ok-fg); }

/* ---- 75-editor.css ---- */
/* RichTextEditor (customer emails and notes) */
.ht-75-ed { display: flex; flex-direction: column; background: var(--sheet); border-radius: 10px; box-shadow: inset 0 0 0 1px var(--bd); position: relative; min-width: 0; font: 13px/1.5 var(--sans); color: var(--tp); }
.ht-75-ed:focus-within { outline: 2px solid var(--accent); outline-offset: 2px; }
.ht-75-ed.err { box-shadow: inset 0 0 0 1.5px var(--bad); }
.ht-75-ed.dis { background: var(--well); color: var(--tq); }
.ht-75-ed.dis .ht-75-body { pointer-events: none; }

.ht-75-head { border-bottom: 1px solid var(--bd); display: flex; flex-direction: column; }
.ht-75-row { display: flex; align-items: center; gap: 8px; min-height: 36px; padding: 4px 12px; border-bottom: 1px solid var(--bd); flex-wrap: wrap; }
.ht-75-row:last-child { border-bottom: 0; }
.ht-75-row > .lbl { margin: 0; width: 52px; flex: none; }
.ht-75-row input { flex: 1; min-width: 120px; border: 0; outline: 0; background: transparent; font: inherit; color: var(--tp); padding: 0; height: 26px; }
.ht-75-row input.subj { font-weight: 600; }
.ht-75-row input::placeholder { color: var(--tq); font-weight: 400; }
.ht-75-chip { height: 24px; padding: 0 4px 0 8px; border-radius: 999px; background: var(--fill); color: var(--t2); display: inline-flex; align-items: center; gap: 4px; font-size: 12px; max-width: 100%; }
.ht-75-chip button { font: inherit; border: 0; background: none; color: var(--tq); width: 18px; height: 18px; border-radius: 999px; display: inline-flex; align-items: center; justify-content: center; padding: 0; cursor: pointer; }
.ht-75-chip button:hover { background: var(--hover); color: var(--tp); }
.ht-75-slot { padding: 4px 12px; }

.ht-75-bar { display: flex; align-items: center; gap: 2px; padding: 4px 6px; border-bottom: 1px solid var(--bd); flex-wrap: wrap; background: var(--rail); border-radius: 10px 10px 0 0; }
.ht-75-bar .ib { font: 650 12.5px var(--sans); border: 0; background: none; padding: 0; }
.ht-75-bar .ib:hover { background: var(--hover); color: var(--tp); }
.ht-75-bar .ib.on { background: var(--fill); color: var(--accent); }
.ht-75-bar .ib:disabled { opacity: 0.4; cursor: default; }
.ht-75-bar .ib:focus-visible { outline: 2px solid var(--accent); outline-offset: -2px; }
.ht-75-bar .ib i { font-style: italic; font-weight: 500; font-family: serif; font-size: 14px; }
.ht-75-bar .ib s { font-weight: 500; }
.ht-75-bar .ib u { font-weight: 600; }
.ht-75-sep { width: 1px; height: 16px; background: var(--bd2); margin: 0 4px; flex: none; }
.ht-75-bar .gap { flex: 1; }
.ht-75-bar .ib.wide { width: auto; padding: 0 8px; gap: 5px; font-weight: 550; }

.ht-75-body { padding: 10px 14px; outline: 0; overflow: auto; font-size: 14px; line-height: 1.6; color: var(--t2); word-break: break-word; flex: 1; }
.ht-75-ed.note .ht-75-body { padding: 8px 12px; font-size: 13px; line-height: 1.5; }
.ht-75-ed.note .ht-75-bar { padding: 2px 4px; }
.ht-75-body:empty::before, .ht-75-body p.empty::before, .ht-75-body .is-editor-empty:first-child::before { content: attr(data-placeholder); color: var(--tq); pointer-events: none; float: left; height: 0; }
.ht-75-body > :first-child { margin-top: 0; }
.ht-75-body > :last-child { margin-bottom: 0; }
.ht-75-body p { margin: 0 0 8px; }
.ht-75-body h2 { font-size: 18px; letter-spacing: -0.01em; margin: 14px 0 6px; color: var(--tp); }
.ht-75-body h3 { font-size: 15px; margin: 12px 0 4px; color: var(--tp); }
.ht-75-body ul, .ht-75-body ol { margin: 0 0 8px; padding-left: 22px; }
.ht-75-body blockquote { margin: 8px 0; padding: 2px 0 2px 12px; border-left: 3px solid var(--bd2); color: var(--ts); }
.ht-75-body hr { border: 0; border-top: 1px solid var(--bd2); margin: 12px 0; }
.ht-75-body a { color: var(--accent); text-decoration: underline; text-underline-offset: 2px; }
.ht-75-body b, .ht-75-body strong { color: var(--tp); font-weight: 650; }
.ht-75-mf { display: inline-flex; align-items: center; height: 20px; padding: 0 7px; margin: 0 1px; border-radius: 6px; background: var(--info-bg); color: var(--info-fg); font: 550 12px var(--sans); white-space: nowrap; vertical-align: baseline; user-select: all; }
.ht-75-mf.ProseMirror-selectednode { outline: 2px solid var(--accent); }

.ht-75-foot { display: flex; align-items: center; gap: 8px; padding: 4px 12px 6px; font-size: 11.5px; color: var(--tq); font-variant-numeric: tabular-nums; }
.ht-75-foot .gap { flex: 1; }
.ht-75-foot .over { color: var(--bad-fg); font-weight: 600; }
.ht-75-err { padding: 0 12px 8px; font-size: 11.5px; color: var(--bad-fg); }

.ht-75-anchor { position: relative; }
.ht-75-menu, .ht-75-link { top: calc(100% + 4px); }
.ht-75-menu { position: absolute; z-index: 12; width: 260px; max-height: 280px; overflow: auto; padding: 6px; background: var(--raise); border-radius: 12px; box-shadow: var(--pop); }
.ht-75-menu .pc2 { height: 34px; }
.ht-75-menu .pc2 em { font-family: var(--mono); font-size: 11px; }
.ht-75-menu .ht-pal-group { padding-top: 4px; }
.ht-75-menu .empty { padding: 10px; color: var(--tq); font-size: 12.5px; }
.ht-75-link { position: absolute; z-index: 12; width: 300px; padding: 10px; background: var(--raise); border-radius: 12px; box-shadow: var(--pop); display: flex; flex-direction: column; gap: 8px; }
.ht-75-link .row { display: flex; gap: 6px; justify-content: flex-end; }
.ht-75-head + .ht-75-anchor .ht-75-bar { border-radius: 0; }

/* ---- 76-notifications.css ---- */
/* NotificationsButton + NotificationsPanel: the title-bar bell and its list */
.ht-76-anchor { position: relative; display: inline-flex; }
.ht-76-bell { position: relative; }
.ht-76-bell.on { background: var(--fill); color: var(--tp); }
.ht-76-bell:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.ht-76-badge { position: absolute; top: -3px; right: -4px; min-width: 16px; height: 16px; padding: 0 4px; font: 650 10px/16px var(--sans); background: var(--accent); color: var(--on-accent); box-shadow: 0 0 0 2px var(--sheet); pointer-events: none; }
.ht-76-anchor > .ht-76-pop { position: absolute; top: calc(100% + 6px); right: 0; left: auto; z-index: 30; }
.pop.ht-76-pop { width: 400px; max-width: calc(100vw - 24px); padding: 0; gap: 0; overflow: hidden; }

.ht-76-panel { display: flex; flex-direction: column; width: 100%; min-height: 0; max-height: min(560px, 80vh); box-sizing: border-box; color: var(--tp); font: 13px/1.45 var(--sans); }
.ht-76-head { flex: none; display: flex; flex-direction: column; gap: 10px; padding: 12px 14px 10px; border-bottom: 1px solid var(--bd2); }
.ht-76-hr { display: flex; align-items: center; gap: 6px; }
.ht-76-title { margin: 0; font: 650 14px/1.2 var(--sans); letter-spacing: -0.01em; }
.ht-76-gap { flex: 1; }
.ht-76-head .seg { align-self: flex-start; }
.ht-76-scroll { flex: 1; min-height: 0; overflow-y: auto; }
.ht-76-scroll .ht-86-empty { padding: 36px 24px; }

.ht-76-gh { margin: 0; padding: 10px 16px 5px 14px; font: 600 11px/1.2 var(--sans); letter-spacing: 0.04em; text-transform: uppercase; color: var(--tq); }
.ht-76-list { list-style: none; margin: 0; padding: 0; }
.ht-76-item { position: relative; border-bottom: 1px solid var(--bd2); }
.ht-76-item:hover { background: var(--hover); }
.ht-76-open { display: flex; align-items: flex-start; gap: 11px; width: 100%; box-sizing: border-box; padding: 11px 16px 11px 14px; border: 0; background: none; font: inherit; color: inherit; text-align: left; cursor: pointer; }
.ht-76-item.has-acts .ht-76-open { padding-bottom: 8px; }
.ht-76-open:focus-visible { outline: 2px solid var(--accent); outline-offset: -2px; }

.ht-76-lead { position: relative; flex: none; display: inline-flex; margin-top: 1px; }
.ht-76-ic { width: 28px; height: 28px; border-radius: 999px; display: inline-flex; align-items: center; justify-content: center; background: var(--info-bg); color: var(--info-fg); }
.ht-76-ic.ok, .ht-76-bdg.ok { background: var(--ok-bg); color: var(--ok-fg); }
.ht-76-ic.warn, .ht-76-bdg.warn { background: var(--warn-bg); color: var(--warn-fg); }
.ht-76-ic.bad, .ht-76-bdg.bad { background: var(--bad-bg); color: var(--bad-fg); }
.ht-76-ic.info, .ht-76-bdg.info { background: var(--info-bg); color: var(--info-fg); }
.ht-76-ic.pur, .ht-76-bdg.pur { background: var(--pur-bg); color: var(--pur-fg); }
.ht-76-bdg { position: absolute; right: -4px; bottom: -4px; width: 16px; height: 16px; border-radius: 999px; display: inline-flex; align-items: center; justify-content: center; box-shadow: 0 0 0 2px var(--raise); }
.ht-76-bdg .ic-xs { width: 10px; height: 10px; }

.ht-76-tx { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.ht-76-l1 { display: flex; align-items: center; gap: 6px; }
.ht-76-t { font-weight: 600; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ht-76-item:not(.unread) .ht-76-t { font-weight: 500; color: var(--t2); }
.ht-76-time { margin-left: auto; color: var(--tq); font-size: 12px; white-space: nowrap; }
.ht-76-ud { width: 7px; height: 7px; border-radius: 999px; background: var(--accent); flex: none; }
.ht-76-item:not(.unread) .ht-76-ud { visibility: hidden; }
.ht-76-body { color: var(--ts); font-size: 12.5px; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.ht-76-meta { display: flex; align-items: center; gap: 6px; margin-top: 3px; color: var(--tq); font-size: 12px; }
.ht-76-ref { display: inline-flex; align-items: center; height: 18px; padding: 0 6px; border-radius: 5px; box-shadow: inset 0 0 0 1px var(--bd); font: 11px var(--mono); color: var(--t2); white-space: nowrap; }

.ht-76-acts { display: flex; gap: 6px; padding: 0 16px 11px 53px; }
.ht-76-tog { position: absolute; top: 7px; right: 10px; background: var(--raise); box-shadow: inset 0 0 0 1px var(--bd); opacity: 0; }
.ht-76-item:hover .ht-76-tog, .ht-76-item:focus-within .ht-76-tog { opacity: 1; }
.ht-76-item:hover .ht-76-time, .ht-76-item:hover .ht-76-ud, .ht-76-item:focus-within .ht-76-time, .ht-76-item:focus-within .ht-76-ud { opacity: 0; }
.ht-76-tog:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }

.ht-76-sr { position: absolute; width: 1px; height: 1px; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.ht-76-load { display: flex; flex-direction: column; }
.ht-76-skr { display: flex; gap: 11px; padding: 14px 16px 14px 14px; border-bottom: 1px solid var(--bd2); }
.ht-76-skt { flex: 1; display: flex; flex-direction: column; gap: 8px; padding-top: 3px; }

/* ---- 80-quote.css ---- */
/* Quote builder components (from lib/quote.css). New classes are ht-80-*; the rest keep the prototype names. */
.qhead { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; }
.qhead .tt { flex: 1; min-width: 0; display: flex; align-items: center; gap: 10px; }
.qhead h1 { margin: 0; font: 600 24px/1.2 var(--sans); letter-spacing: -0.022em; }
.qhead .acts { display: flex; align-items: center; gap: 8px; }
.qcust { margin-top: 16px; display: flex; align-items: center; gap: 12px; padding: 12px 14px; border-radius: 10px; box-shadow: inset 0 0 0 1px var(--bd); flex-wrap: wrap; }
.qcust .tx { display: flex; flex-direction: column; gap: 1px; min-width: 0; }
.qcust .tx span { color: var(--ts); font-size: 12.5px; }
.qmeta { margin-left: auto; display: flex; gap: 14px; flex-wrap: wrap; font-size: 12px; color: var(--ts); }
.qmeta > span { display: inline-flex; align-items: center; gap: 5px; }
.otab { border-radius: 10px; box-shadow: inset 0 0 0 1px var(--bd); padding: 10px 12px; display: flex; flex-direction: column; gap: 4px; cursor: pointer; min-width: 0; background: var(--sheet); }
.otab:hover { box-shadow: inset 0 0 0 1px var(--tq); }
.otab.on { box-shadow: inset 0 0 0 1.5px var(--tp); }
.otab .r1 { display: flex; align-items: center; gap: 6px; min-height: 20px; }
.otab .ht-80-lt { width: 20px; height: 20px; border-radius: 6px; background: var(--well); color: var(--ts); font: 600 11px/20px var(--sans); text-align: center; }
.otab.on .ht-80-lt { background: var(--tp); color: var(--sheet); }
.otab b { font-weight: 550; font-size: 13px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.otab .tot { font-size: 12.5px; color: var(--ts); font-variant-numeric: tabular-nums; }
.otab.add { align-items: center; justify-content: center; flex-direction: row; gap: 6px; color: var(--ts); font-size: 12.5px; font-weight: 500; box-shadow: inset 0 0 0 1px var(--bd); background: transparent; outline: 1px dashed var(--bd); outline-offset: -1px; }
.otab.add:hover { color: var(--tp); }
.recb { display: inline-flex; align-items: center; gap: 4px; font-size: 11px; font-weight: 550; color: var(--warn-fg); }
.qline { display: flex; align-items: center; gap: 12px; padding: 10px 14px; min-height: 60px; box-sizing: border-box; border-bottom: 1px solid var(--bd); }
.qline .tx { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.qline .tx b { font-weight: 550; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.qline .tx span { color: var(--ts); font-size: 12px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.qline .qtot { width: 84px; text-align: right; font-weight: 550; font-variant-numeric: tabular-nums; flex: none; }
.qline .qtot.ok, .qr2 b.ok { color: var(--ok-fg); }
.qline.ht-80-opt .ht-80-thumb { opacity: 0.75; }
.qline.fitl { min-height: 54px; }
.ht-80-list > .qline:last-child { border-bottom: 0; }
.qstep { display: inline-flex; align-items: center; gap: 1px; border-radius: 7px; box-shadow: inset 0 0 0 1px var(--bd); padding: 1px; flex: none; }
.qstep .inp { width: 38px; height: 24px; text-align: center; box-shadow: none; background: transparent; padding: 0; font-variant-numeric: tabular-nums; }
.qstep b { min-width: 26px; text-align: center; font-weight: 550; font-variant-numeric: tabular-nums; }
.qstep .ib2 { width: 22px; height: 22px; }
.qacts { display: flex; align-items: center; gap: 4px; flex: none; }
.qadd { padding: 12px 14px; background: var(--rail); display: flex; flex-direction: column; gap: 10px; }
.qadd .isrch.lg { width: 100%; background: var(--sheet); }
.qres { border-radius: 10px; box-shadow: inset 0 0 0 1px var(--bd); background: var(--sheet); overflow: hidden; }
.qr { display: flex; align-items: center; gap: 10px; padding: 8px 10px; border-bottom: 1px solid var(--bd); }
.qr:last-child { border-bottom: 0; }
.qr .tx { flex: 1; min-width: 0; display: flex; flex-direction: column; }
.qr .tx b { font-weight: 500; font-size: 12.5px; }
.qr .tx span { font-size: 11.5px; color: var(--tq); }
.qsugg { display: flex; flex-direction: column; gap: 6px; font-size: 12px; }
.qsugg.in { padding: 12px 14px; background: var(--rail); }
.qline.xl .xn { flex: 1; min-width: 0; height: 30px; }
.qline.xl .ht-80-capin .inp { width: 70px; }
.qbun { border-radius: 12px; box-shadow: inset 0 0 0 1px var(--bd); background: var(--sheet); margin-bottom: 10px; overflow: hidden; }
.qbh { display: flex; align-items: center; gap: 10px; padding: 10px 14px; border-bottom: 1px solid var(--bd); background: var(--rail); }
.qbh .tx { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 1px; }
.qbh .tx b { font-weight: 600; }
.qbh .tx span { font-size: 12px; color: var(--ts); }
.qbh .qtot { font-weight: 600; font-variant-numeric: tabular-nums; white-space: nowrap; }
.qbb { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 16px; padding: 14px; }
.qbs { display: flex; flex-direction: column; gap: 12px; min-width: 0; }
.qbb .ht-80-tres { align-self: start; min-width: 0; }
.qbf { padding: 0 14px 14px; display: flex; flex-direction: column; gap: 6px; }
.qbf:empty { display: none; }
.qsum { border-radius: 12px; box-shadow: inset 0 0 0 1px var(--bd); padding: 16px; display: flex; flex-direction: column; gap: 8px; background: var(--sheet); }
.qsum .ht-80-eyebrow { margin: 0 0 4px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.qr2 { display: flex; align-items: baseline; gap: 10px; font-size: 13px; }
.qr2 span { flex: 1; min-width: 0; color: var(--ts); display: flex; flex-direction: column; }
.qr2 span em { font-style: normal; font-size: 11.5px; color: var(--tq); }
.qr2 b { font-weight: 500; font-variant-numeric: tabular-nums; }
.qtotal { display: flex; align-items: baseline; gap: 10px; padding-top: 10px; margin-top: 2px; border-top: 1px solid var(--bd); }
.qsum > .qtotal:first-child { padding-top: 0; border-top: 0; }
.qtotal span { flex: 1; font-weight: 550; }
.qtotal b { font: 600 24px var(--sans); letter-spacing: -0.025em; font-variant-numeric: tabular-nums; }
.qdep { display: flex; flex-direction: column; gap: 6px; padding: 10px 12px; border-radius: 8px; background: var(--well); }
.qdep .qr2 { font-size: 12.5px; }
.qnote { display: flex; gap: 7px; align-items: flex-start; font-size: 12px; color: var(--ts); line-height: 1.45; }
.qnote .ic-xs { margin-top: 2px; flex: none; }
.qmg { padding: 12px 0 4px; border-top: 1px solid var(--bd); margin-top: 4px; display: flex; flex-direction: column; gap: 6px; }
.qmg .trk { height: 4px; border-radius: 4px; background: var(--fill); overflow: hidden; }
.qmg .trk i { display: block; height: 100%; border-radius: 4px; }
.qmg .capt { margin: 0; }
.ccards { display: grid; grid-template-columns: repeat(auto-fit, minmax(170px, 1fr)); gap: 10px; }
.ccard { position: relative; border-radius: 12px; box-shadow: inset 0 0 0 1px var(--bd); padding: 14px; display: flex; flex-direction: column; gap: 4px; cursor: pointer; }
.ccard:hover { box-shadow: inset 0 0 0 1px var(--tq); }
.ccard.on { box-shadow: inset 0 0 0 2px var(--tp); }
.ccard b { font-weight: 600; padding-right: 22px; }
.ccard .s { font-size: 12px; color: var(--tq); line-height: 1.4; }
.ccard .t { margin-top: 6px; font: 600 18px var(--sans); letter-spacing: -0.02em; font-variant-numeric: tabular-nums; }
.ccard .rad { position: absolute; top: 14px; right: 14px; width: 16px; height: 16px; border-radius: 99px; box-shadow: inset 0 0 0 1.5px var(--tq); display: grid; place-items: center; }
.ccard.on .rad { box-shadow: inset 0 0 0 1.5px var(--tp); }
.ccard.on .rad i { width: 8px; height: 8px; border-radius: 99px; background: var(--tp); }
.ccard .recb { margin-bottom: 2px; }
.cadds { display: flex; flex-direction: column; gap: 8px; }
.cadd { display: flex; align-items: center; gap: 10px; padding: 10px 12px; border-radius: 10px; box-shadow: inset 0 0 0 1px var(--bd); cursor: pointer; font-size: 13px; }
.cadd .ht-80-box { width: 18px; height: 18px; border-radius: 5px; box-shadow: inset 0 0 0 1.5px var(--tq); display: grid; place-items: center; color: transparent; flex: none; }
.cadd.on .ht-80-box { background: var(--tp); box-shadow: none; color: var(--sheet); }
.cadd .t { flex: 1; min-width: 0; }
.cadd b { font-weight: 500; font-variant-numeric: tabular-nums; color: var(--ts); }
.cadd.on b { color: var(--tp); }
/* shared-sheet pieces the components use (values from base/catalogue/premium/bundles.css) */
.ht-80-top .qhead + .qcust, .ht-80-top .qcust:first-child { margin-top: 16px; }
.ht-80-back { display: inline-flex; align-items: center; gap: 6px; color: var(--ts); font: inherit; font-weight: 500; cursor: pointer; margin-bottom: 16px; border: 0; background: none; padding: 0; }
.ht-80-back:hover { color: var(--tp); }
.ht-80-gap { flex: 1; }
.ht-80-sec { margin: 24px 0 10px; display: flex; align-items: center; gap: 8px; font: 650 13px var(--sans); }
.ht-80-sec em { font-style: normal; font-weight: 450; color: var(--tq); }
.ht-80-list { border-radius: 10px; box-shadow: inset 0 0 0 1px var(--bd); background: var(--sheet); overflow: hidden; }
.ht-80-none { padding: 18px 16px; color: var(--tq); font-size: 12.5px; }
.ht-80-eyebrow { font: 500 12px var(--sans); color: var(--ts); margin-bottom: 8px; }
.ht-80-capt { font-size: 12px; color: var(--tq); margin: 10px 2px 0; line-height: 1.5; }
.qadd .ht-80-capt, .qsum .ht-80-capt, .qmg .ht-80-capt { margin: 0; }
.ht-80-muted { color: var(--tq); }
.ht-80-thumb { width: 40px; height: 40px; border-radius: 9px; display: grid; place-items: center; flex: none; color: #fff; background: var(--tq); box-shadow: inset 0 0 0 1px oklch(0 0 0 / 0.08), inset 0 1px 0 oklch(1 0 0 / 0.2); }
.ht-80-ctic { width: 32px; height: 32px; border-radius: 8px; display: grid; place-items: center; flex: none; background: var(--well); color: var(--t2); box-shadow: inset 0 0 0 1px var(--bd); }
.ht-80-ib2, button.ht-80-ib2 { width: 26px; height: 26px; border-radius: 6px; display: inline-grid; place-items: center; color: var(--ts); cursor: pointer; flex: none; border: 0; background: none; padding: 0; font: inherit; }
.ht-80-ib2:hover { background: var(--hover); color: var(--tp); }
.qstep .ht-80-ib2 { width: 22px; height: 22px; }
.ht-80-capin { display: inline-flex; align-items: center; gap: 4px; color: var(--ts); }
.ht-80-chips { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; }
.ht-80-chip { display: inline-flex; align-items: center; gap: 5px; height: 26px; padding: 0 9px; border-radius: 7px; font: 500 12px var(--sans); color: var(--ts); box-shadow: inset 0 0 0 1px var(--bd); background: var(--sheet); cursor: pointer; white-space: nowrap; border: 0; }
.ht-80-chip:hover { color: var(--tp); box-shadow: inset 0 0 0 1px var(--tq); }
.ht-80-act { display: flex; flex-direction: column; margin-top: 6px; }
.ht-80-act > .btn { justify-content: center; height: 36px; }
.qmg .trk i { display: block; height: 100%; }
.qr2 b.ok, .qline .qtot.ok { color: var(--ok-fg); }
.qmg .mgv.ok { color: var(--ok-fg); } .qmg b.warn { color: var(--warn-fg); } .qmg b.bad { color: var(--bad-fg); } .qmg b.ok { color: var(--ok-fg); }
/* buttons standing in for the prototype's spans */
button.otab, button.ccard, button.cadd { border: 0; font: inherit; color: inherit; text-align: left; width: 100%; box-sizing: border-box; }
button.ccard { background: none; }
button.cadd { background: none; }
button.otab.add { text-align: center; width: auto; }
button.otab:not(.add) { width: auto; }
.otab.add { background: transparent; }
button.otab:focus-visible, button.ccard:focus-visible, button.cadd:focus-visible, .ht-80-chip:focus-visible, .ht-80-tch:focus-visible, .ht-80-ib2:focus-visible, .ht-80-back:focus-visible, .qstep .inp:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.ccard .recb { margin-bottom: 2px; }
.cadd .ht-80-box { color: transparent; }
.cadd.on .ht-80-box { color: var(--sheet); }
/* bundle slots, rule results and warnings (bundles.css) */
.ht-80-slot { display: flex; flex-direction: column; gap: 6px; }
.ht-80-slh { display: flex; align-items: baseline; gap: 8px; font-size: 12.5px; }
.ht-80-slh b { font-weight: 550; }
.ht-80-slh span { color: var(--tq); font-size: 11.5px; }
.ht-80-tchs { display: flex; flex-wrap: wrap; gap: 5px; }
.ht-80-tch { display: inline-flex; align-items: center; gap: 4px; font: 12px var(--sans); color: var(--tp); padding: 4px 9px; border-radius: 7px; box-shadow: inset 0 0 0 1px var(--bd); cursor: pointer; max-width: 100%; box-sizing: border-box; border: 0; background: none; }
.ht-80-tch:hover { box-shadow: inset 0 0 0 1px var(--tq); }
.ht-80-tch.on { box-shadow: inset 0 0 0 1.5px var(--tp); font-weight: 550; }
.ht-80-tch.rec { color: var(--warn-fg); }
.ht-80-tch.rec.on { color: var(--tp); }
.ht-80-tch.ex { color: var(--tq); text-decoration: line-through; cursor: not-allowed; background: var(--well); box-shadow: none; }
.ht-80-sq { display: flex; align-items: center; gap: 8px; font-size: 12.5px; }
.ht-80-sq .n { flex: 1; min-width: 0; }
.ht-80-tres { display: flex; flex-direction: column; gap: 7px; padding: 12px; border-radius: 10px; background: var(--well); }
.ht-80-tl { display: flex; align-items: baseline; gap: 10px; font-size: 12.5px; }
.ht-80-tl .tx { flex: 1; min-width: 0; display: flex; flex-direction: column; }
.ht-80-tl .tx b { font-weight: 500; }
.ht-80-tl .tx span { font-size: 11px; color: var(--tq); }
.ht-80-tl .tx span.by { color: var(--ok-fg); }
.ht-80-tl > b { font-weight: 500; font-variant-numeric: tabular-nums; white-space: nowrap; }
.ht-80-tl.d > b { color: var(--ok-fg); }
.ht-80-tr { display: flex; gap: 8px; align-items: flex-start; font-size: 12.5px; padding: 7px 9px; border-radius: 8px; background: var(--well); }
.ht-80-tr > div { display: flex; flex-direction: column; gap: 1px; min-width: 0; }
.ht-80-tr b { font-weight: 500; }
.ht-80-tr div span { font-size: 11px; color: var(--tq); }
.ht-80-tr .ic-xs { margin-top: 2px; flex: none; }
.ht-80-tr.ok .ic-xs { color: var(--ok-fg); }
.ht-80-tr.bad .ic-xs { color: var(--bad-fg); }
.ht-80-tr.warn .ic-xs { color: var(--warn-fg); }

@media (max-width: 900px) {
  .qhead h1 { font-size: 21px; }
  .qhead .acts { width: 100%; }
  .qmeta { margin-left: 0; width: 100%; gap: 6px 14px; }
  .qline { flex-wrap: wrap; row-gap: 8px; padding: 12px; }
  .qline .tx { flex-basis: calc(100% - 56px); }
  .qline .qstep { margin-left: 52px; }
  .qline .qtot { margin-left: auto; }
  .qline .qacts { width: 100%; justify-content: flex-end; }
  .qline.fitl { flex-wrap: nowrap; }
  .qline.fitl .tx { flex-basis: auto; }
  .qline.xl .xn { flex-basis: 100%; }
  .qline.xl .qstep { margin-left: 0; }
  .qbb { grid-template-columns: minmax(0, 1fr); padding: 12px; }
  .qbh { padding: 10px 12px; }
  .qbf { padding: 0 12px 12px; }
}

/* ---- 81-catalogue.css ---- */
/* 81-catalogue: product table, completeness, field sections, grid tables, media, brand cards (pim.css / cms.css). */
.ht-81-bch { display: inline-flex; align-items: center; gap: 7px; min-width: 0; font-size: 12.5px; color: var(--t2); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ht-81-cring { width: 18px; height: 18px; border-radius: 99px; flex: none; background: conic-gradient(var(--rc, var(--ok)) calc(var(--p) * 1%), var(--well) 0); -webkit-mask: radial-gradient(circle, transparent 5.5px, #000 6px); mask: radial-gradient(circle, transparent 5.5px, #000 6px); }
.ht-81-cpct { display: inline-flex; align-items: center; gap: 7px; font-variant-numeric: tabular-nums; font-size: 12.5px; color: var(--t2); }
.ht-81-chd { display: inline-flex; gap: 3px; }
.ht-81-chd i { width: 7px; height: 7px; border-radius: 99px; background: var(--well); box-shadow: inset 0 0 0 1px var(--bd); }
.ht-81-chd i.on { background: var(--ok); box-shadow: none; }
.ht-81-chd i.part { background: var(--warn); box-shadow: none; }
.ht-81-kind { display: inline-flex; align-items: center; gap: 6px; height: 22px; padding: 0 8px; border-radius: 6px; background: var(--well); color: var(--t2); font-size: 12px; font-weight: 500; width: fit-content; max-width: 100%; box-sizing: border-box; }
.ht-81-kind.ref { background: var(--pur-bg); color: var(--pur-fg); }
.ht-81-kind.ax { background: var(--info-bg); color: var(--info-fg); }
/* product table */
.lv.ht-81-pim .lrw { height: 46px; }
.lv.ht-81-pim .rt { flex-direction: column; align-items: flex-start; gap: 0; line-height: 1.3; flex: 1 1 auto; }
.lv.ht-81-pim .lhd .rt { flex-direction: row; }
.lv.ht-81-pim .rt em { font: 11.5px var(--mono); }
.lv.ht-81-pim .lrw > .blogo { margin-right: 2px; }
.lv.ht-81-pim .lhd > .blogo { visibility: hidden; }
.lrw.ht-81-prow { font: inherit; color: inherit; text-align: left; border-top: 0; border-left: 0; border-right: 0; background: none; width: 100%; }
.lrw.ht-81-prow:focus-visible { outline: 2px solid var(--accent); outline-offset: -2px; }
@container (max-width: 1000px) { .ht-81-c-range, .ht-81-c-upd { display: none !important; } }
@container (max-width: 820px) { .ht-81-c-chan, .ht-81-c-var { display: none !important; } }
@container (max-width: 640px) { .ht-81-c-type { display: none !important; } }
/* field sections */
.ht-81-fsec { margin-top: 30px; }
.ht-81-fsec > h3 { margin: 0; padding-bottom: 14px; font-size: 15px; font-weight: 650; letter-spacing: -0.01em; border-bottom: 1.5px dotted var(--bd); display: flex; align-items: center; gap: 10px; }
.ht-81-fsec > h3 em { font-style: normal; font-weight: 450; font-size: 12.5px; color: var(--tq); }
.ht-81-fsec > h3 .gap { flex: 1; }
.ht-81-frow { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.35fr); gap: 12px 48px; padding: 20px 0; border-bottom: 1.5px dotted var(--bd); }
.ht-81-frow .lb b { display: block; font-weight: 600; color: var(--tp); }
.ht-81-frow .lb span { display: block; color: var(--ts); margin-top: 3px; font-size: 12.5px; line-height: 1.5; max-width: 320px; }
.ht-81-fld { display: flex; flex-direction: column; gap: 8px; min-width: 0; }
.ht-81-miss { box-shadow: inset 0 0 0 1px var(--warn), 0 0 0 3px var(--warn-bg) !important; }
.ht-81-mtag { font-size: 11.5px; color: var(--warn-fg); font-weight: 600; display: inline-flex; align-items: center; gap: 5px; }
.ht-81-inh { display: inline-flex; align-items: center; gap: 6px; height: 22px; padding: 0 8px; border-radius: 6px; background: var(--pur-bg); color: var(--pur-fg); font-size: 11.5px; font-weight: 550; width: fit-content; }
@media (max-width: 900px) { .ht-81-frow { grid-template-columns: 1fr; gap: 10px; padding: 16px 0; } }
/* unit input */
.ht-81-unit { display: flex; align-items: center; max-width: 200px; border-radius: 9px; box-shadow: inset 0 0 0 1px var(--bd); overflow: hidden; background: var(--sheet); }
.ht-81-unit input { flex: 1; min-width: 0; height: 38px; box-sizing: border-box; padding: 0 12px; border: 0; outline: 0; background: transparent; font: 13.5px var(--sans); color: var(--tp); }
.ht-81-unit:focus-within { box-shadow: inset 0 0 0 1px var(--accent), 0 0 0 3px color-mix(in oklch, var(--accent) 14%, transparent); }
.ht-81-unit > span { padding: 0 12px; color: var(--tq); background: var(--hover); align-self: stretch; display: flex; align-items: center; font-size: 12.5px; border-left: 1px solid var(--bd); }
/* option pills */
.ht-81-erp { display: flex; gap: 4px; flex-wrap: wrap; }
.ht-81-erp > button { font-family: var(--sans); background: none; border: 0; height: 28px; min-width: 40px; padding: 0 8px; box-sizing: border-box; border-radius: 7px; display: inline-flex; align-items: center; justify-content: center; font-weight: 650; font-size: 12px; color: var(--ts); box-shadow: inset 0 0 0 1px var(--bd); cursor: pointer; }
.ht-81-erp.wide > button { padding: 0 12px; }
.ht-81-erp > button.on { background: oklch(0.6 0.15 150); color: #fff; box-shadow: none; }
.ht-81-erp.ht-81-pick > button.on { background: var(--mk); color: var(--sheet); }
.ht-81-erp > button:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
/* grid tables */
.ht-81-gt { border-radius: 12px; box-shadow: inset 0 0 0 1px var(--bd); overflow: hidden; }
.ht-81-gr { display: grid; grid-template-columns: var(--ht-81-cols); align-items: center; gap: 12px; min-height: 44px; padding: 6px 14px; border-bottom: 1px solid var(--bd2); box-sizing: border-box; font-size: 13px; }
.ht-81-gr:last-child { border-bottom: 0; }
.ht-81-gr.h { min-height: 32px; background: var(--hover); font-size: 11.5px; color: var(--ts); font-weight: 500; }
.ht-81-gr > * { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ht-81-gr .num { text-align: right; font-variant-numeric: tabular-nums; }
.ht-81-gr b { font-weight: 550; }
.ht-81-gr em { font-style: normal; color: var(--tq); font-size: 12px; }
.ht-81-gr .mono { font: 12px var(--mono); color: var(--t2); }
.ht-81-gr.click { cursor: pointer; }
.ht-81-gr.click:hover { background: var(--hover); }
/* media */
.ht-81-ast { display: grid; grid-template-columns: repeat(auto-fill, minmax(170px, 1fr)); gap: 10px; }
.ht-81-tile { border-radius: 12px; box-shadow: inset 0 0 0 1px var(--bd); padding: 10px; display: flex; flex-direction: column; gap: 8px; }
.ht-81-tile .th2 { height: 92px; border-radius: 8px; background: var(--well); display: flex; align-items: center; justify-content: center; color: var(--tq); }
.ht-81-tile .th2.img { background: linear-gradient(160deg, oklch(0.97 0.005 250), oklch(0.86 0.01 250)); color: oklch(0.45 0.02 250); }
.ht-81-tile .th2.doc { background: oklch(0.96 0.02 27); color: oklch(0.5 0.15 27); }
.ht-81-tile .th2.need { background: transparent; border: 1.5px dashed var(--warn); color: var(--warn-fg); }
.ht-81-tile b { font-weight: 600; font-size: 12.5px; display: block; }
.ht-81-tile em { font-style: normal; color: var(--tq); font-size: 11.5px; display: block; }
/* brand card */
.ht-81-bcard { font: inherit; color: inherit; text-align: left; border: 0; border-radius: 14px; box-shadow: inset 0 0 0 1px var(--bd); padding: 14px; display: flex; flex-direction: column; gap: 12px; cursor: pointer; background: var(--sheet); transition: box-shadow 0.15s, transform 0.15s; }
.ht-81-bcard:hover { box-shadow: inset 0 0 0 1px var(--bd), var(--lift); transform: translateY(-1px); }
.ht-81-bcard:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.ht-81-bcard .bt { display: flex; align-items: center; gap: 10px; }
.ht-81-bcard .bt b { font-weight: 650; font-size: 14px; display: block; }
.ht-81-bcard .bt em { font-style: normal; color: var(--tq); font-size: 12px; }
.ht-81-bcard .bs { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 6px; }
.ht-81-bcard .bs > span { display: flex; flex-direction: column; font-size: 11.5px; color: var(--tq); }
.ht-81-bcard .bs b { font-size: 14px; font-weight: 650; color: var(--tp); font-variant-numeric: tabular-nums; }
.ht-81-bcard .rg { display: flex; flex-wrap: wrap; gap: 4px; }
.ht-81-bcard .rg > span { height: 20px; padding: 0 7px; border-radius: 6px; background: var(--well); color: var(--ts); font-size: 11.5px; display: inline-flex; align-items: center; }
.ht-81-bcard.add { align-items: center; justify-content: center; color: var(--ts); box-shadow: none; border: 1.5px dashed var(--bd); min-height: 160px; }
/* type list */
.ht-81-tli { font: inherit; color: inherit; border: 0; background: none; text-align: left; width: 100%; display: flex; align-items: center; gap: 10px; height: 40px; padding: 0 10px; border-radius: 8px; cursor: pointer; }
.ht-81-tli:hover { background: var(--hover); }
.ht-81-tli.on { background: var(--fill); }
.ht-81-tli:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.ht-81-tli b { font-weight: 550; }
.ht-81-tli em { margin-left: auto; font-style: normal; color: var(--tq); font-size: 12px; font-variant-numeric: tabular-nums; }
.ht-81-tli .wt { width: 26px; height: 26px; border-radius: 7px; display: inline-flex; align-items: center; justify-content: center; background: var(--well); color: var(--ts); flex: none; }

/* ---- 82-bundles.css ---- */
/* Bundles and rules (from lib/bundles.css, catalogue.css, quote.css). All new classes are ht-82-. */
.ht-82-bcard { display: flex; align-items: center; gap: 10px; padding: 10px 12px; border-radius: 10px; box-shadow: inset 0 0 0 1px var(--bd); cursor: pointer; min-width: 0; background: var(--sheet); font: inherit; color: var(--tp); border: 0; text-align: left; width: 100%; box-sizing: border-box; }
.ht-82-bcard:hover { box-shadow: inset 0 0 0 1px var(--tq); }
.ht-82-bcard.on { box-shadow: inset 0 0 0 1.5px var(--tp); }
.ht-82-bcard .tx { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 1px; }
.ht-82-bcard .tx b { font-weight: 550; font-size: 13px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ht-82-bcard .tx span { font-size: 11.5px; color: var(--ts); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ht-82-bcard .tx .fr { color: var(--tp); font-variant-numeric: tabular-nums; }

.ht-82-ib { width: 26px; height: 26px; border-radius: 6px; display: inline-grid; place-items: center; color: var(--ts); cursor: pointer; flex: none; border: 0; background: none; padding: 0; font: inherit; }
.ht-82-ib:hover { background: var(--hover); color: var(--tp); }
.ht-82-btn { height: 26px; font-size: 12px; padding: 0 9px; border-radius: 8px; color: var(--t2); display: inline-flex; align-items: center; gap: 6px; font-family: var(--sans); font-weight: 500; white-space: nowrap; box-shadow: inset 0 0 0 1px var(--bd); background: var(--sheet); flex: none; border: 0; cursor: pointer; }
.ht-82-btn:hover { background: var(--hover); }
.ht-82-btn.on { background: var(--fill); color: var(--tp); }
.ht-82-btn.bad { color: var(--bad-fg); }

.ht-82-slot { border-radius: 10px; box-shadow: inset 0 0 0 1px var(--bd); background: var(--sheet); margin: 0 0 10px; }
.ht-82-sh { display: flex; align-items: center; gap: 8px; padding: 8px 10px 8px 8px; border-bottom: 1px solid var(--bd); background: var(--rail); border-radius: 10px 10px 0 0; flex-wrap: wrap; }
.ht-82-sh .grip { color: var(--tq); display: inline-flex; }
.ht-82-sn { flex: 1; min-width: 120px; height: 30px; box-sizing: border-box; border: 0; outline: none; border-radius: 8px; box-shadow: inset 0 0 0 1px var(--bd); padding: 0 10px; background: var(--sheet); font: 550 13px var(--sans); color: var(--tp); }
.ht-82-sn:focus { box-shadow: inset 0 0 0 1.5px var(--accent); }
.ht-82-sh .rl { font-size: 12px; color: var(--ts); min-width: 54px; }
.ht-82-sopt { display: flex; align-items: center; gap: 10px; padding: 8px 12px; border-bottom: 1px solid var(--bd); }
.ht-82-sopt .tx { flex: 1; min-width: 0; display: flex; flex-direction: column; }
.ht-82-sopt .tx b { font-weight: 500; font-size: 13px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ht-82-sopt .tx span { font-size: 11.5px; color: var(--tq); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ht-82-thumb { width: 28px; height: 28px; border-radius: 7px; display: grid; place-items: center; flex: none; color: #fff; box-shadow: inset 0 0 0 1px oklch(0 0 0 / 0.08), inset 0 1px 0 oklch(1 0 0 / 0.2); background: var(--ts); }
.ht-82-sfoot { padding: 8px 12px; }
.ht-82-none { padding: 12px; color: var(--tq); font-size: 12.5px; }

.ht-82-ddw { position: relative; display: inline-flex; min-width: 0; max-width: 100%; }
.ht-82-ddb { display: inline-flex; align-items: center; gap: 5px; height: 28px; padding: 0 9px; border-radius: 7px; box-shadow: inset 0 0 0 1px var(--bd); font: 12.5px var(--sans); color: var(--tp); border: 0; cursor: pointer; background: var(--sheet); white-space: nowrap; max-width: 100%; overflow: hidden; text-overflow: ellipsis; box-sizing: border-box; }
.ht-82-ddb:hover { box-shadow: inset 0 0 0 1px var(--tq); }
.ht-82-ddb .ic-xs { flex: none; color: var(--tq); }
.ht-82-dd { position: absolute; top: calc(100% + 4px); left: 0; z-index: 30; min-width: 220px; max-width: min(320px, calc(100vw - 48px)); max-height: 280px; overflow: auto; background: var(--sheet); border-radius: 10px; box-shadow: 0 0 0 1px var(--bd), 0 12px 32px oklch(0 0 0 / 0.16); padding: 4px; box-sizing: border-box; }
.ht-82-ddo { display: block; width: 100%; text-align: left; border: 0; background: none; color: var(--tp); font-family: var(--sans); padding: 6px 8px; border-radius: 6px; font-size: 12.5px; cursor: pointer; }
.ht-82-ddo:hover { background: var(--hover); }
.ht-82-ddo.on { font-weight: 600; }
.ht-82-ddh { padding: 9px 8px 6px; font-size: 10.5px; font-weight: 600; color: var(--tq); text-transform: uppercase; letter-spacing: 0.05em; }

.ht-82-rcrow { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; }
.ht-82-rw { width: 34px; font-size: 12px; color: var(--ts); text-align: right; flex: none; }
.ht-82-rv { width: 90px; height: 28px; box-sizing: border-box; border: 0; outline: none; border-radius: 8px; box-shadow: inset 0 0 0 1px var(--bd); padding: 0 10px; background: var(--sheet); font: 500 13px var(--sans); color: var(--tp); }
.ht-82-rv:focus { box-shadow: inset 0 0 0 1.5px var(--accent); }
.ht-82-rv.wide { flex: 1; width: auto; min-width: 160px; }

.ht-82-rs { display: flex; flex-direction: row; flex-wrap: wrap; gap: 4px 5px; align-items: center; font-size: 12.5px; line-height: 1.3; min-width: 0; flex: 1; margin: 0; padding: 0; border: 0; }
.ht-82-rs .rt { display: inline-block; flex: none; font-size: 12.5px; min-width: 0; color: var(--ts); }
.ht-82-rs .rp { display: inline-block; flex: none; font-size: 12.5px; min-width: 0; padding: 2px 7px; border-radius: 6px; background: var(--well); color: var(--tp); font-weight: 500; max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; box-sizing: border-box; }

.ht-82-rcard { border-radius: 10px; box-shadow: inset 0 0 0 1px var(--bd); background: var(--sheet); }
.ht-82-rcard.open { box-shadow: inset 0 0 0 1.5px var(--tp); }
.ht-82-rcard.off .ht-82-rs, .ht-82-rcard.off .rb b { opacity: 0.5; }
.ht-82-rrow { display: flex; align-items: flex-start; gap: 12px; padding: 12px 14px; cursor: pointer; }
.ht-82-rrow .ht-82-sw { margin-top: 2px; display: inline-flex; flex: none; }
.ht-82-rcard .rb { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 6px; }
.ht-82-rcard .rb b { font-weight: 550; font-size: 13px; }
.ht-82-rhit { font-size: 11.5px; color: var(--tq); white-space: nowrap; margin-top: 2px; }
.ht-82-chev { color: var(--tq); margin-top: 1px; flex: none; border: 0; background: none; padding: 0; display: inline-flex; cursor: pointer; }
.ht-82-redit { border-top: 1px solid var(--bd); padding: 14px; display: flex; flex-direction: column; gap: 10px; }
.ht-82-rsec { margin-top: 6px; font-size: 11px; font-weight: 600; text-transform: uppercase; letter-spacing: 0.05em; color: var(--tq); display: flex; gap: 8px; align-items: baseline; flex-wrap: wrap; }
.ht-82-rsec em { font-style: normal; text-transform: none; letter-spacing: 0; font-weight: 400; font-size: 12px; }

.ht-82-tst { border-radius: 12px; box-shadow: inset 0 0 0 1px var(--bd); background: var(--sheet); padding: 14px 16px 16px; display: flex; flex-direction: column; gap: 10px; }
.ht-82-th { display: flex; align-items: center; gap: 7px; }
.ht-82-th b { font-weight: 600; }
.ht-82-th .gap { flex: 1; }
.ht-82-th .muted { font-size: 12px; color: var(--tq); }
.ht-82-tsec { font-size: 10.5px; font-weight: 600; text-transform: uppercase; letter-spacing: 0.05em; color: var(--tq); margin-top: 6px; display: flex; gap: 8px; }
.ht-82-tsec .lnk { margin-left: auto; text-transform: none; letter-spacing: 0; font-weight: 500; font-size: 11.5px; cursor: pointer; border: 0; background: none; padding: 0; font-family: var(--sans); color: var(--accent-text); }

.ht-82-tres { display: flex; flex-direction: column; gap: 7px; padding: 12px; border-radius: 10px; background: var(--well); }
.ht-82-tl { display: flex; align-items: baseline; gap: 10px; font-size: 12.5px; }
.ht-82-tl .tx { flex: 1; min-width: 0; display: flex; flex-direction: column; }
.ht-82-tl .tx b { font-weight: 500; }
.ht-82-tl .tx span { font-size: 11px; color: var(--tq); }
.ht-82-tl .tx span.by { color: var(--ok-fg); }
.ht-82-tl > b { font-weight: 500; font-variant-numeric: tabular-nums; white-space: nowrap; }
.ht-82-tl.d > b { color: var(--ok-fg); }
.ht-82-qr { display: flex; align-items: baseline; gap: 10px; font-size: 13px; }
.ht-82-qr span { flex: 1; min-width: 0; color: var(--ts); display: flex; flex-direction: column; }
.ht-82-qr span em { font-style: normal; font-size: 11.5px; color: var(--tq); }
.ht-82-qr b { font-weight: 500; font-variant-numeric: tabular-nums; }
.ht-82-qr b.ok { color: var(--ok-fg); }
.ht-82-qtot { display: flex; align-items: baseline; gap: 10px; padding-top: 10px; margin-top: 2px; border-top: 1px solid var(--bd); }
.ht-82-qtot span { flex: 1; font-weight: 550; }
.ht-82-qtot b { font: 600 20px var(--sans); letter-spacing: -0.025em; font-variant-numeric: tabular-nums; }
.ht-82-capt { font-size: 12px; color: var(--tq); }

.ht-82-ttr { display: flex; flex-direction: column; gap: 6px; }
.ht-82-tr { display: flex; gap: 8px; align-items: flex-start; font-size: 12.5px; padding: 7px 9px; border-radius: 8px; background: var(--well); }
.ht-82-tr > div { display: flex; flex-direction: column; gap: 1px; min-width: 0; }
.ht-82-tr b { font-weight: 500; }
.ht-82-tr div span { font-size: 11px; color: var(--tq); }
.ht-82-tr .ic-xs { margin-top: 2px; flex: none; }
.ht-82-tr.ok .ic-xs { color: var(--ok-fg); }
.ht-82-tr.bad .ic-xs { color: var(--bad-fg); }
.ht-82-tr.rec .ic-xs { color: var(--warn-fg); }
.ht-82-tr.warn { background: var(--warn-bg); }
.ht-82-tr.warn .ic-xs { color: var(--warn-fg); }

.ht-82-bcard:focus-visible, .ht-82-ib:focus-visible, .ht-82-btn:focus-visible, .ht-82-ddb:focus-visible, .ht-82-ddo:focus-visible, .ht-82-chev:focus-visible, .ht-82-tsec .lnk:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
@media (max-width: 900px) {
  .ht-82-sh .ht-82-sn { flex-basis: 100%; }
  .ht-82-rw { width: auto; text-align: left; flex-basis: 100%; }
  .ht-82-rv.wide { min-width: 0; flex-basis: 100%; }
  .ht-82-rhit { display: none; }
}

/* ---- 83-library.css ---- */
/* Content library (from lib/library.css, on base.css) */
.ht-83-cell { flex: none; display: inline-flex; align-items: center; gap: 6px; }
.ht-83-seo { width: 8px; height: 8px; border-radius: 999px; flex: none; display: inline-block; }
.ht-83-seo.ok { background: var(--ok); } .ht-83-seo.warn { background: var(--warn); } .ht-83-seo.bad { background: var(--bad); }
.ht-83-views { width: 64px; text-align: right; font-variant-numeric: tabular-nums; color: var(--ts); }
.ht-83-upd { width: 70px; text-align: right; color: var(--tq); }
.ht-83-row { font: inherit; color: inherit; border: 0; background: none; text-align: left; width: 100%; }
.ht-83-btn { font: inherit; border: 0; background: none; padding: 0; }
.ht-83-btn.ib { background: none; }
.ht-83-tb .ht-83-saved { font-size: 12px; }

.ht-83-ttl { width: 100%; border: 0; outline: none; background: transparent; font: 700 32px/1.15 var(--sans); letter-spacing: -0.025em; color: var(--tp); margin: 26px 0 8px; padding: 0; resize: none; display: block; box-sizing: border-box; }
.ht-83-subt { width: 100%; border: 0; outline: none; background: transparent; font: 400 17px/1.45 var(--sans); color: var(--ts); padding: 0; resize: none; display: block; box-sizing: border-box; }
.ht-83-byline { display: flex; align-items: center; gap: 8px; color: var(--ts); font-size: 12.5px; margin: 12px 0 22px; flex-wrap: wrap; }
.ht-83-byline .av { width: 22px; height: 22px; line-height: 22px; }
.ht-83-byline b { color: var(--tp); font-weight: 550; }
.ht-83-dot { width: 3px; height: 3px; border-radius: 9px; background: var(--tq); }
.ht-83-wc { color: var(--tq); font-size: 12px; font-variant-numeric: tabular-nums; }

.ht-83-blk { position: relative; margin: 0 -10px; padding: 3px 10px; border-radius: 8px; color: var(--tp); font: 13px/1.45 var(--sans); }
.ht-83-blk:hover, .ht-83-blk:focus-within { background: var(--hover); }
.ht-83-hdl { position: absolute; left: -26px; top: 6px; opacity: 0; display: flex; color: var(--tq); cursor: grab; }
.ht-83-blk:hover .ht-83-hdl, .ht-83-hdl:focus-visible { opacity: 1; }
.ht-83-blk p { margin: 6px 0; font-size: 15px; line-height: 1.7; color: var(--t2); }
.ht-83-blk h2 { margin: 18px 0 4px; font-size: 21px; letter-spacing: -0.015em; }
.ht-83-blk ul { margin: 6px 0; padding-left: 22px; font-size: 15px; line-height: 1.75; color: var(--t2); }
.ht-83-blk mark { background: var(--warn-bg); color: inherit; border-radius: 3px; padding: 0 2px; }
.ht-83-blk [contenteditable]:focus { outline: none; }
.ht-83-callout { display: flex; gap: 12px; padding: 14px 16px; border-radius: 12px; background: var(--info-bg); color: var(--info-fg); font-size: 14px; line-height: 1.6; margin: 10px 0; }
.ht-83-callout.warn { background: var(--warn-bg); color: var(--warn-fg); }
.ht-83-callout.bad { background: var(--bad-bg); color: var(--bad-fg); }
.ht-83-callout b { font-weight: 650; }
.ht-83-pblk { border-radius: 12px; box-shadow: inset 0 0 0 1px var(--bd); padding: 12px 14px; display: flex; align-items: center; gap: 12px; margin: 10px 0; }
.ht-83-pblk .thumb { width: 44px; height: 44px; border-radius: 9px; background: var(--well); display: flex; align-items: center; justify-content: center; color: var(--ts); flex: none; }
.ht-83-pblk .tx { flex: 1; min-width: 0; }
.ht-83-pblk b { display: block; font-weight: 600; }
.ht-83-pblk em { font-style: normal; color: var(--tq); font-size: 12px; }

.ht-83-slash { display: flex; align-items: center; gap: 8px; color: var(--tq); font: 14px var(--sans); padding: 10px 10px; margin: 6px -10px 0; border-radius: 8px; cursor: text; border: 0; background: none; width: calc(100% + 20px); text-align: left; box-sizing: border-box; }
.ht-83-slash:hover { background: var(--hover); }
.ht-83-slash .kbd { font-size: 12px; }
.ht-83-menu { margin: 4px 0 0; border-radius: 12px; box-shadow: var(--pop); background: var(--raise); padding: 6px; width: 280px; box-sizing: border-box; font: 13px/1.45 var(--sans); color: var(--tp); }
.ht-83-menu button { display: flex; align-items: center; gap: 10px; height: 34px; padding: 0 8px; border-radius: 7px; cursor: pointer; width: 100%; border: 0; background: none; font: inherit; color: inherit; text-align: left; }
.ht-83-menu button:hover, .ht-83-menu button:focus-visible { background: var(--hover); }
.ht-83-menu button em { margin-left: auto; font-style: normal; color: var(--tq); font-size: 12px; }

.ht-83-pubst { display: flex; align-items: center; gap: 8px; padding: 10px 12px; border-radius: 10px; margin-bottom: 10px; font-size: 12.5px; }
.ht-83-pubst.chg { background: var(--warn-bg); color: var(--warn-fg); }
.ht-83-pubst.live { background: var(--ok-bg); color: var(--ok-fg); }
.ht-83-pubst.draft { background: var(--well); color: var(--ts); }
.ht-83-pubst b { font-weight: 650; }
.ht-83-chglist { margin: -2px 0 10px; padding: 0; list-style: none; font-size: 12px; color: var(--ts); }
.ht-83-chglist li { display: flex; align-items: center; gap: 6px; padding: 2px 0; }
.ht-83-chglist li::before { content: ""; width: 5px; height: 5px; border-radius: 9px; background: var(--warn); flex: none; }

.ht-83-ttl:focus-visible, .ht-83-subt:focus-visible { outline: none; }
.ht-83-btn:focus-visible, .ht-83-row:focus-visible, .ht-83-slash:focus-visible, .ht-83-menu button:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }

/* ---- 84-cms.css ---- */
/* 84-cms: form-style content record editor. Values copied from lib/cms.css. */
.ht-84-sec { margin-top: 30px; }
.ht-84-sec > h3 { margin: 0; padding-bottom: 14px; font-size: 15px; font-weight: 650; letter-spacing: -0.01em; border-bottom: 1.5px dotted var(--bd); display: flex; align-items: center; gap: 10px; }
.ht-84-sec > h3 em { font-style: normal; font-weight: 450; font-size: 12.5px; color: var(--tq); }
.ht-84-row { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.35fr); gap: 12px 48px; padding: 20px 0; border-bottom: 1.5px dotted var(--bd); }
.ht-84-row .lb b { display: block; font-weight: 600; color: var(--tp); }
.ht-84-row .lb span { display: block; color: var(--ts); margin-top: 3px; font-size: 12.5px; line-height: 1.5; max-width: 320px; }
.ht-84-fld { display: flex; flex-direction: column; gap: 8px; min-width: 0; }
.ht-84-inp { height: 38px; width: 100%; max-width: 440px; box-sizing: border-box; padding: 0 12px; border-radius: 9px; border: 0; outline: 0; box-shadow: inset 0 0 0 1px var(--bd), 0 1px 2px oklch(0 0 0 / 0.04); background: var(--sheet); font: 13.5px var(--sans); color: var(--tp); }
.ht-84-inp:focus { box-shadow: inset 0 0 0 1px var(--accent), 0 0 0 3px color-mix(in oklch, var(--accent) 14%, transparent); }
.ht-84-pfx { display: flex; max-width: 440px; border-radius: 9px; box-shadow: inset 0 0 0 1px var(--bd), 0 1px 2px oklch(0 0 0 / 0.04); background: var(--sheet); overflow: hidden; }
.ht-84-pfx > span { display: flex; align-items: center; padding: 0 10px 0 12px; color: var(--tq); white-space: nowrap; font-size: 13px; background: var(--hover); box-shadow: inset -1px 0 0 var(--bd2); }
.ht-84-pfx .ht-84-inp { box-shadow: none; border-radius: 0; max-width: none; min-width: 0; }
.ht-84-cnt { font-size: 12px; color: var(--tq); font-variant-numeric: tabular-nums; }
.ht-84-cnt.over { color: var(--bad-fg); font-weight: 600; }

.ht-84-cv0 { background: linear-gradient(160deg, oklch(0.82 0.06 230), oklch(0.62 0.09 250) 70%, oklch(0.45 0.08 260)); }
.ht-84-cv1 { background: linear-gradient(160deg, oklch(0.88 0.07 85), oklch(0.72 0.12 60) 70%, oklch(0.5 0.1 40)); }
.ht-84-cv2 { background: linear-gradient(160deg, oklch(0.85 0.06 150), oklch(0.62 0.09 160) 70%, oklch(0.42 0.07 170)); }
.ht-84-covrow { display: flex; align-items: center; gap: 20px; flex-wrap: wrap; }
.ht-84-cover { width: 132px; height: 172px; border-radius: 10px; position: relative; overflow: hidden; box-shadow: 0 0 0 4px var(--sheet), 0 0 0 5px var(--bd), 0 10px 26px oklch(0 0 0 / 0.16); }
.ht-84-cover::after { content: ""; position: absolute; left: 22%; right: 22%; bottom: 14%; height: 34%; border-radius: 4px 4px 2px 2px; background: oklch(1 0 0 / 0.92); box-shadow: 0 2px 6px oklch(0 0 0 / 0.18); }
.ht-84-cover b { position: absolute; left: 10px; right: 10px; top: 12px; color: #fff; font: 700 12px/1.25 var(--sans); text-shadow: 0 1px 4px oklch(0 0 0 / 0.3); letter-spacing: -0.01em; }

.ht-84-serp { max-width: 560px; padding: 14px 16px; border-radius: 12px; box-shadow: inset 0 0 0 1px var(--bd); background: var(--sheet); display: flex; flex-direction: column; gap: 3px; }
.ht-84-serp .u { display: flex; align-items: center; gap: 8px; font-size: 12px; color: var(--t2); }
.ht-84-serp .u i { width: 22px; height: 22px; border-radius: 99px; background: var(--well); display: inline-flex; align-items: center; justify-content: center; font: 700 10px var(--sans); color: var(--accent-text); font-style: normal; flex: none; }
.ht-84-serp .u em { font-style: normal; color: var(--tq); }
.ht-84-serp .t { font-size: 17px; color: oklch(0.45 0.18 264); line-height: 1.3; margin-top: 4px; }
:is(.dark, [data-theme="dark"]) .ht-84-serp .t { color: oklch(0.78 0.11 264); }
.ht-84-serp .d { font-size: 13px; color: var(--ts); line-height: 1.5; }

.ht-84-mcard { border-radius: 10px; box-shadow: inset 0 0 0 1px var(--bd); overflow: hidden; display: flex; flex-direction: column; background: var(--sheet); min-width: 150px; }
.ht-84-mcard .im { height: 96px; position: relative; }
.ht-84-mcard .im::after { content: ""; position: absolute; left: 30%; right: 30%; bottom: 18%; height: 40%; border-radius: 4px; background: oklch(1 0 0 / 0.9); }
.ht-84-mcard .alt { padding: 8px; display: flex; flex-direction: column; gap: 4px; }
.ht-84-mcard .alt input { height: 28px; border: 0; outline: 0; border-radius: 6px; box-shadow: inset 0 0 0 1px var(--bd); padding: 0 8px; font: 12px var(--sans); background: var(--sheet); color: var(--tp); }
.ht-84-mcard .alt input:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.ht-84-mcard .alt input.miss { box-shadow: inset 0 0 0 1px var(--warn); }
.ht-84-mcard .alt em { font-style: normal; font-size: 11px; color: var(--tq); }
.ht-84-mcard .alt em.w { color: var(--warn-fg); font-weight: 600; }
.ht-84-mcard.add { align-items: center; justify-content: center; min-height: 150px; color: var(--tq); border: 1.5px dashed var(--bd); box-shadow: none; cursor: pointer; gap: 6px; font: 12px var(--sans); background: none; padding: 0; }
.ht-84-mcard.add:hover { color: var(--tp); }
.ht-84-mcard.add:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }

.ht-84-lprod { max-width: 560px; border-radius: 12px; box-shadow: inset 0 0 0 1px var(--bd); overflow: hidden; }
.ht-84-lprod > div { display: flex; align-items: center; gap: 12px; padding: 10px 12px; border-bottom: 1px solid var(--bd2); }
.ht-84-lprod > div:last-child { border-bottom: 0; }
.ht-84-lprod .th { width: 36px; height: 36px; border-radius: 8px; background: var(--well); display: inline-flex; align-items: center; justify-content: center; color: var(--ts); flex: none; }
.ht-84-lprod .nm { flex: 1; min-width: 0; }
.ht-84-lprod .nm b { display: block; font-weight: 550; }
.ht-84-lprod .nm em { font-style: normal; font-size: 12px; color: var(--tq); }
.ht-84-lprod .pr { font-weight: 600; font-variant-numeric: tabular-nums; }
.ht-84-lprod .ib { border: 0; background: none; padding: 0; cursor: pointer; font: inherit; }
.ht-84-addp { display: flex; flex-wrap: wrap; gap: 6px; }
.ht-84-addp .chip { cursor: pointer; font-family: inherit; border: 0; }

.ht-84-tabs { display: flex; gap: 4px; margin: 26px 0 0; overflow-x: auto; scrollbar-width: none; }
.ht-84-tabs > button { height: 34px; padding: 0 13px; border-radius: 8px; display: inline-flex; align-items: center; gap: 6px; color: var(--ts); font: 550 13px var(--sans); white-space: nowrap; cursor: pointer; flex: none; border: 0; background: none; }
.ht-84-tabs > button:hover { color: var(--tp); }
.ht-84-tabs > button.on { background: var(--fill); color: var(--tp); }
.ht-84-tabs > button:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.ht-84-tabs em { display: inline-block; padding: 0 5px; box-sizing: border-box; font-style: normal; font-size: 11px; font-weight: 600; min-width: 18px; height: 18px; line-height: 18px; text-align: center; border-radius: 99px; background: var(--warn-bg); color: var(--warn-fg); }

@media (max-width: 900px) {
  .ht-84-row { grid-template-columns: 1fr; gap: 10px; padding: 16px 0; }
  .ht-84-inp, .ht-84-pfx { max-width: none; }
}

/* ---- 85-overlays.css ---- */
.ht-85-tipwrap { position: relative; display: inline-flex; }
.ht-85-tip { position: absolute; left: 50%; transform: translateX(-50%); z-index: 20; width: max-content; max-width: 240px; padding: 5px 9px; border-radius: 7px; background: var(--tp); color: var(--sheet); font: 500 12px/1.35 var(--sans); box-shadow: var(--lift); pointer-events: none; }
.ht-85-tip.ht-85-top { bottom: calc(100% + 6px); }
.ht-85-tip.ht-85-bottom { top: calc(100% + 6px); }
.ht-85-tip::after { content: ""; position: absolute; left: 50%; width: 8px; height: 8px; background: inherit; border-radius: 2px; transform: translateX(-50%) rotate(45deg); }
.ht-85-top::after { bottom: -3px; }
.ht-85-bottom::after { top: -3px; }
.ht-85-tip.ht-85-rich { width: 260px; max-width: none; padding: 12px 14px; border-radius: 12px; background: var(--raise); color: var(--ts); box-shadow: var(--pop); font-size: 12.5px; pointer-events: auto; display: flex; flex-direction: column; gap: 4px; }
.ht-85-rich::after { display: none; }
.ht-85-tip-t { font-weight: 600; color: var(--tp); font-size: 13px; }

.ht-85-menu { background: var(--raise); border-radius: 12px; box-shadow: var(--pop); padding: 6px; display: flex; flex-direction: column; gap: 2px; box-sizing: border-box; }
.ht-85-item { all: unset; box-sizing: border-box; height: 32px; display: flex; align-items: center; gap: 9px; padding: 0 8px; border-radius: 8px; cursor: pointer; font: 500 13px var(--sans); color: var(--t2); }
.ht-85-item:hover, .ht-85-item:focus-visible { background: var(--hover); color: var(--tp); }
.ht-85-item:focus-visible { outline: 2px solid var(--accent); outline-offset: -2px; }
.ht-85-item[disabled] { opacity: 0.45; cursor: default; pointer-events: none; }
.ht-85-lead { width: 14px; display: inline-flex; flex: none; color: var(--tq); }
.ht-85-checked .ht-85-lead { color: var(--accent-text); }
.ht-85-lbl { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-weight: 550; }
.ht-85-sub { color: var(--tq); }
.ht-85-danger, .ht-85-danger .ht-85-lead { color: var(--bad-fg); }
.ht-85-danger:hover, .ht-85-danger:focus-visible { background: var(--bad-bg); color: var(--bad-fg); }
.ht-85-sep { height: 1px; background: var(--bd); margin: 4px 2px; }
.ht-85-mlabel { padding: 6px 8px 4px; font: 600 11px var(--sans); color: var(--tq); text-transform: uppercase; letter-spacing: 0.04em; }

.ht-85-scrim { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; padding: 16px; background: oklch(0.15 0 0 / 0.45); z-index: 30; border-radius: inherit; }
.ht-85-dlg { background: var(--raise); border-radius: 12px; box-shadow: var(--pop); display: flex; flex-direction: column; width: 100%; max-height: 100%; box-sizing: border-box; }
.ht-85-dlg.ht-85-sm { max-width: 400px; }
.ht-85-dlg.ht-85-md { max-width: 520px; }
.ht-85-dlg.ht-85-lg { max-width: 680px; }
.ht-85-dh { display: flex; align-items: flex-start; gap: 12px; padding: 18px 18px 0; }
.ht-85-dtx { flex: 1; min-width: 0; }
.ht-85-dtitle { display: block; font: 600 15px/1.3 var(--sans); color: var(--tp); }
.ht-85-ddesc { margin: 4px 0 0; font: 400 13px/1.45 var(--sans); color: var(--ts); }
.ht-85-dx { flex: none; margin: -2px -4px 0 0; }
.ht-85-dicon { width: 32px; height: 32px; border-radius: 999px; display: inline-flex; align-items: center; justify-content: center; flex: none; background: var(--fill); color: var(--ts); }
.ht-85-dicon.ht-85-t-bad { background: var(--bad-bg); color: var(--bad-fg); }
.ht-85-dicon.ht-85-t-info { background: var(--info-bg); color: var(--info-fg); }
.ht-85-db { padding: 14px 18px 0; display: flex; flex-direction: column; gap: 12px; overflow: auto; }
.ht-85-df { display: flex; justify-content: flex-end; gap: 8px; padding: 18px; }
.ht-85-btn-bad { background: var(--bad); }
.ht-85-dlg button:focus-visible, .ht-85-tipwrap:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }

/* ---- 86-feedback.css ---- */
/* EmptyState */
.ht-86-empty { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 6px; padding: 48px 24px; text-align: center; box-sizing: border-box; }
.ht-86-empty.compact { padding: 24px 16px; }
.ht-86-emic { width: 40px; height: 40px; border-radius: 10px; background: var(--well); color: var(--ts); display: inline-flex; align-items: center; justify-content: center; margin-bottom: 6px; }
.ht-86-emt { font: 650 13.5px var(--sans); color: var(--tp); letter-spacing: -0.005em; }
.ht-86-empty p { margin: 0; max-width: 340px; font-size: 12.5px; line-height: 1.45; color: var(--t2); }
.ht-86-ema { display: flex; gap: 8px; justify-content: center; margin-top: 10px; }
/* Skeleton */
@keyframes ht-86-pulse { 0%, 100% { opacity: 1; } 50% { opacity: 0.45; } }
.ht-86-sk { display: block; background: var(--well); border-radius: 6px; animation: ht-86-pulse 1.4s ease-in-out infinite; }
.ht-86-sk-line, .ht-86-skln { height: 10px; border-radius: 999px; }
.ht-86-skln.s { height: 8px; }
.ht-86-sk-line { width: 100%; }
.ht-86-sk-block { width: 100%; border-radius: 10px; }
.ht-86-sk-avatar, .ht-86-skav { border-radius: 999px; }
.ht-86-sktext { display: flex; flex-direction: column; gap: 9px; }
.ht-86-skrow { height: 42px; display: flex; align-items: center; gap: 10px; padding: 0 18px 0 12px; border-bottom: 1px solid var(--bd2); box-sizing: border-box; }
.ht-86-skrow .ht-86-skbox { width: 14px; height: 14px; border-radius: 4px; }
.ht-86-skrow .ht-86-skav { width: 24px; height: 24px; }
.ht-86-skrt { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 5px; }
.ht-86-skrow .ht-86-skpill { width: 56px; height: 22px; border-radius: 999px; }
/* Spinner */
@keyframes ht-86-rot { to { transform: rotate(360deg); } }
.ht-86-spin { width: 16px; height: 16px; border-radius: 999px; box-sizing: border-box; border: 2px solid var(--bd); border-top-color: var(--accent); display: inline-block; flex: none; animation: ht-86-rot 0.7s linear infinite; vertical-align: -3px; }
.ht-86-spin.sm { width: 12px; height: 12px; border-width: 1.75px; vertical-align: -2px; }
.ht-86-spin.lg { width: 24px; height: 24px; border-width: 2.5px; vertical-align: middle; }
.btn .ht-86-spin { border-color: oklch(1 0 0 / 0.35); border-top-color: var(--on-accent); }
/* ProgressBar */
.ht-86-prog { display: flex; flex-direction: column; gap: 6px; min-width: 120px; }
.ht-86-progh { display: flex; justify-content: space-between; align-items: baseline; font: 500 12px var(--sans); color: var(--t2); }
.ht-86-progh em { font-style: normal; color: var(--ts); font-variant-numeric: tabular-nums; }
.ht-86-track { height: 6px; border-radius: 999px; background: var(--well); overflow: hidden; position: relative; }
.ht-86-track i { display: block; height: 100%; border-radius: 999px; background: var(--accent); transition: width 0.25s; }
.ht-86-track.ok i { background: var(--ok); }
.ht-86-track.warn i { background: var(--warn); }
.ht-86-track.bad i { background: var(--bad); }
.ht-86-track.indet i { position: absolute; width: 35%; animation: ht-86-slide 1.3s ease-in-out infinite; }
@keyframes ht-86-slide { from { left: -35%; } to { left: 100%; } }
/* StatusDot */
.ht-86-sd { display: inline-flex; align-items: center; gap: 7px; font: 500 12.5px var(--sans); color: var(--t2); white-space: nowrap; }
.ht-86-sd i { width: 8px; height: 8px; border-radius: 999px; background: var(--ok); flex: none; position: relative; }
.ht-86-sd.warn i { background: var(--warn); }
.ht-86-sd.bad i { background: var(--bad); }
.ht-86-sd.info i { background: var(--accent); }
.ht-86-sd.mute i { background: var(--tq); }
.ht-86-sd.pulse i::after { content: ""; position: absolute; inset: 0; border-radius: 999px; background: inherit; animation: ht-86-ping 1.6s ease-out infinite; }
@keyframes ht-86-ping { from { transform: scale(1); opacity: 0.55; } to { transform: scale(2.6); opacity: 0; } }
/* ErrorScreen */
.ht-86-err { display: flex; align-items: center; justify-content: center; min-height: 320px; padding: 32px 24px; box-sizing: border-box; background: var(--sheet); }
.ht-86-errbox { display: flex; flex-direction: column; align-items: center; gap: 6px; max-width: 380px; text-align: center; }
.ht-86-erric { width: 44px; height: 44px; border-radius: 12px; display: inline-flex; align-items: center; justify-content: center; margin-bottom: 8px; }
.ht-86-erric.bad { background: var(--bad-bg); color: var(--bad-fg); }
.ht-86-erric.nf { background: var(--well); color: var(--ts); }
.ht-86-errcode { font: 12px var(--mono); color: var(--tq); }
.ht-86-err h1 { margin: 0; font: 650 18px var(--sans); letter-spacing: -0.015em; color: var(--tp); }
.ht-86-err p { margin: 0; font-size: 13px; line-height: 1.45; color: var(--t2); }
.ht-86-errpre { margin: 8px 0 0; max-width: 100%; max-height: 120px; overflow: auto; padding: 10px 12px; border-radius: 8px; background: var(--well); color: var(--t2); font: 12px/1.45 var(--mono); text-align: left; box-sizing: border-box; }
/* RelativeTime */
.ht-86-rt { font-variant-numeric: tabular-nums; }
@media (prefers-reduced-motion: reduce) {
  .ht-86-sk, .ht-86-spin, .ht-86-track.indet i, .ht-86-sd.pulse i::after { animation: none; }
}

/* ---- 87-inputs.css ---- */
/* shared focus */
.ht-87-ro:focus-visible, .ht-87-adb:focus-visible, .ht-87-bgi:focus-visible, .ht-87-sw:focus-visible, .ht-87-cpt:focus-visible, .ht-87-swt:focus-visible, .ht-87-dz:focus-visible, .ht-87-lnk:focus-visible, .ht-87-th:focus-visible, .ht-87-tag button:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.ht-87-oc:focus-visible { outline: 2px solid var(--accent); outline-offset: 1px; }
.ht-87-cbx:focus-within, .ht-87-ig:focus-within { outline: 2px solid var(--accent); outline-offset: 2px; }
.ht-87-none { padding: 10px 8px; color: var(--tq); font-size: 12.5px; }

/* radio group */
.ht-87-rg { display: flex; flex-direction: column; gap: 2px; }
.ht-87-ro { display: flex; align-items: flex-start; gap: 10px; width: 100%; border: 0; background: none; font: inherit; color: var(--t2); text-align: left; cursor: pointer; }
.ht-87-ro:disabled { opacity: 0.45; cursor: not-allowed; }
.ht-87-dot { width: 16px; height: 16px; border-radius: 999px; box-shadow: inset 0 0 0 1.5px var(--bd); background: var(--sheet); flex: none; display: inline-flex; align-items: center; justify-content: center; margin-top: 1px; }
.ht-87-dot i { width: 6px; height: 6px; border-radius: 999px; background: #fff; transform: scale(0); transition: transform 0.12s; }
.ht-87-ro.on .ht-87-dot { background: var(--accent); box-shadow: none; }
.ht-87-ro.on .ht-87-dot i { transform: scale(1); }
.ht-87-rg.err .ht-87-dot { box-shadow: inset 0 0 0 1.5px var(--bad); }
.ht-87-rt { display: flex; flex-direction: column; gap: 1px; min-width: 0; flex: 1; }
.ht-87-rt b { font-weight: 550; font-size: 13px; color: var(--tp); }
.ht-87-rt em { font-style: normal; font-size: 12px; color: var(--ts); }
.ht-87-rm { margin-left: auto; font-size: 12.5px; font-weight: 600; color: var(--tp); font-variant-numeric: tabular-nums; white-space: nowrap; }
.ht-87-rg-list .ht-87-ro { padding: 7px 8px; border-radius: 8px; }
.ht-87-rg-list .ht-87-ro:hover { background: var(--hover); }
.ht-87-rg-card { display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: 8px; }
.ht-87-rg-card .ht-87-ro { padding: 12px; border-radius: 10px; background: var(--sheet); box-shadow: inset 0 0 0 1px var(--bd); }
.ht-87-rg-card .ht-87-ro:hover { background: var(--hover); }
.ht-87-rg-card .ht-87-ro.on { box-shadow: inset 0 0 0 1.5px var(--accent); background: var(--sheet); }
.ht-87-rg-card .ht-87-rm { align-self: flex-start; }

/* combobox */
.ht-87-cb { position: relative; min-width: 240px; }
.ht-87-cbx { gap: 6px; color: var(--tq); cursor: text; }
.ht-87-cbx input { flex: 1; min-width: 60px; border: 0; outline: 0; background: transparent; font: inherit; color: var(--tp); padding: 0; }
.ht-87-cbx input::placeholder { color: var(--tq); }
.ht-87-cbx.multi { height: auto; min-height: 32px; flex-wrap: wrap; padding: 4px 8px; row-gap: 4px; }
.ht-87-cbx.multi { position: relative; padding-right: 26px; }
.ht-87-cbx.multi > .ic-xs { position: absolute; right: 9px; top: 10px; }
.ht-87-tag { height: 22px; padding: 0 3px 0 8px; border-radius: 6px; background: var(--fill); color: var(--tp); font-size: 12px; font-weight: 500; display: inline-flex; align-items: center; gap: 2px; }
.ht-87-tag button { width: 16px; height: 16px; border: 0; padding: 0; border-radius: 4px; background: none; color: var(--ts); display: inline-flex; align-items: center; justify-content: center; cursor: pointer; }
.ht-87-tag button:hover { background: var(--hover); color: var(--tp); }
.ht-87-menu { position: absolute; top: calc(100% + 4px); left: 0; right: 0; z-index: 12; background: var(--raise); border-radius: 12px; box-shadow: var(--pop); padding: 6px; max-height: 240px; overflow: auto; display: flex; flex-direction: column; gap: 2px; }
.ht-87-opt.act, .ht-87-opt[data-active] { background: var(--hover); }
.ht-87-opt.on b, .ht-87-opt[data-selected] b { color: var(--tp); }
/* Hecto spike: the chevron is a real trigger button */
.ht-87-cbx > [data-part="trigger"] { border: 0; padding: 0; background: none; color: inherit; display: inline-flex; cursor: pointer; }
.ht-87-cbx.multi > [data-part="trigger"] { position: absolute; right: 9px; top: 10px; }
.ht-87-opt .ic-s { margin-left: auto; color: var(--accent-text); }
.ht-87-opt em { margin-left: auto; }
.ht-87-opt em + .ic-s { margin-left: 0; }
.ht-87-spin svg { animation: ht-87-rot 0.9s linear infinite; }
@keyframes ht-87-rot { to { transform: rotate(360deg); } }

/* slider */
.ht-87-sl { display: flex; flex-direction: column; gap: 8px; min-width: 240px; }
.ht-87-sl.dim { opacity: 0.45; pointer-events: none; }
.ht-87-slh { display: flex; align-items: baseline; justify-content: space-between; gap: 8px; }
.ht-87-slh .lbl { margin-top: 0; }
.ht-87-slh b { font-weight: 650; color: var(--tp); font-size: 13px; font-variant-numeric: tabular-nums; }
.ht-87-slt { position: relative; height: 20px; margin: 0 8px; cursor: pointer; touch-action: none; }
.ht-87-slr { position: absolute; left: -8px; right: -8px; top: 7px; height: 6px; border-radius: 999px; background: var(--well); }
.ht-87-slr i { position: absolute; top: 0; bottom: 0; background: var(--accent); border-radius: 999px; }
.ht-87-th { position: absolute; top: 2px; width: 16px; height: 16px; margin-left: -8px; border-radius: 999px; background: var(--sheet); box-shadow: inset 0 0 0 2px var(--accent), var(--lift); cursor: grab; }
.ht-87-th:active { cursor: grabbing; }
.ht-87-tip { position: absolute; bottom: 22px; left: 50%; transform: translateX(-50%); height: 20px; padding: 0 7px; border-radius: 6px; background: var(--mk); color: var(--sheet); font-size: 11.5px; font-weight: 550; display: inline-flex; align-items: center; white-space: nowrap; font-variant-numeric: tabular-nums; pointer-events: none; opacity: 0; }
.ht-87-sl.tips .ht-87-slt { margin-top: 18px; }
.ht-87-sl.tips .ht-87-tip, .ht-87-th:hover .ht-87-tip, .ht-87-th:focus-visible .ht-87-tip { opacity: 1; }
.ht-87-slm { position: relative; display: flex; justify-content: space-between; margin: 0 -2px; font-size: 11.5px; color: var(--tq); font-variant-numeric: tabular-nums; height: 14px; }
.ht-87-slm .ht-87-mrk { position: absolute; transform: translateX(-50%); }

/* otp */
.ht-87-otp { display: inline-flex; align-items: center; gap: 6px; }
.ht-87-oc { width: 38px; height: 44px; box-sizing: border-box; border: 0; border-radius: 8px; box-shadow: inset 0 0 0 1px var(--bd); background: var(--sheet); text-align: center; font: 600 18px var(--mono); color: var(--tp); padding: 0; caret-color: var(--accent); }
.ht-87-oc.cur { box-shadow: inset 0 0 0 1.5px var(--accent); }
.ht-87-oc.err { box-shadow: inset 0 0 0 1.5px var(--bad); }
.ht-87-oc:disabled { opacity: 0.45; }
.ht-87-osep { color: var(--tq); width: 8px; text-align: center; }

/* input group */
.ht-87-ig { padding: 0; overflow: hidden; gap: 0; max-width: 320px; }
.ht-87-ig.dim { opacity: 0.45; }
.ht-87-ig > input { flex: 1; min-width: 0; height: 100%; border: 0; outline: 0; background: transparent; font: inherit; color: var(--tp); padding: 0 10px; }
.ht-87-ig > input::placeholder { color: var(--tq); }
.ht-87-ad { align-self: stretch; display: flex; align-items: center; padding: 0 10px; background: var(--hover); color: var(--ts); font-size: 12.5px; font-weight: 500; }
.ht-87-ad.pre { box-shadow: inset -1px 0 0 var(--bd); }
.ht-87-ad.suf { box-shadow: inset 1px 0 0 var(--bd); }
.ht-87-adb { align-self: stretch; border: 0; padding: 0 11px; display: inline-flex; align-items: center; gap: 6px; background: var(--hover); color: var(--t2); font: 550 12.5px var(--sans); cursor: pointer; box-shadow: inset 1px 0 0 var(--bd); white-space: nowrap; }
.ht-87-adb:hover { background: var(--fill); color: var(--tp); }
.ht-87-adb:disabled { opacity: 0.45; cursor: not-allowed; }
.ht-87-ig.err .ht-87-ad, .ht-87-ig.err .ht-87-adb { box-shadow: none; }

/* button group */
.ht-87-bg { display: inline-flex; flex: none; }
.ht-87-bgi { height: 30px; padding: 0 11px; border: 0; margin-left: -1px; display: inline-flex; align-items: center; gap: 6px; background: var(--sheet); color: var(--t2); font: 500 12.5px var(--sans); box-shadow: inset 0 0 0 1px var(--bd); cursor: pointer; white-space: nowrap; border-radius: 0; position: relative; }
.ht-87-bgi:first-child { border-radius: 8px 0 0 8px; margin-left: 0; }
.ht-87-bgi:last-child { border-radius: 0 8px 8px 0; }
.ht-87-bgi:only-child { border-radius: 8px; }
.ht-87-bgi:hover { background: var(--hover); color: var(--tp); }
.ht-87-bgi.on { background: var(--fill); color: var(--tp); }
.ht-87-bgi.bad { color: var(--bad-fg); }
.ht-87-bgi:disabled { opacity: 0.45; cursor: not-allowed; }
.ht-87-bgi:focus-visible { z-index: 1; }
.ht-87-bg.sm .ht-87-bgi { height: 26px; font-size: 12px; padding: 0 9px; }

/* star rating */
.ht-87-sr { display: inline-flex; align-items: center; gap: 8px; }
.ht-87-ss { display: inline-flex; gap: 1px; }
.ht-87-sw { border: 0; background: none; padding: 2px; margin: 0; display: inline-flex; font: inherit; cursor: pointer; border-radius: 4px; }
.ro .ht-87-sw { cursor: default; padding: 0; }
.ht-87-star { position: relative; display: inline-flex; color: var(--tq); }
.ht-87-star .ic-s, .ht-87-star .ic { display: inline-flex; }
.ht-87-sf { position: absolute; left: 0; top: 0; bottom: 0; overflow: hidden; color: var(--warn); display: flex; }
.ht-87-sf svg, .ht-87-sf span { fill: currentColor; }
.ht-87-sf .ic-s, .ht-87-sf .ic { flex: none; }
.ht-87-sc { font-size: 12px; color: var(--ts); }
.ht-87-sc b { color: var(--tp); font-weight: 600; }

/* colour picker */
.ht-87-cp { position: relative; display: inline-block; }
.ht-87-cpt { border: 0; gap: 8px; width: 140px; font: inherit; color: var(--tp); cursor: pointer; }
.ht-87-cpt .ic-xs { margin-left: auto; color: var(--tq); }
.ht-87-sq { width: 16px; height: 16px; border-radius: 5px; box-shadow: inset 0 0 0 1px oklch(0 0 0 / 0.12); flex: none; }
.ht-87-hex { font-family: var(--mono); font-size: 12px; }
.ht-87-cpp { position: absolute; top: calc(100% + 4px); left: 0; z-index: 12; width: 212px; box-sizing: border-box; background: var(--raise); border-radius: 12px; box-shadow: var(--pop); padding: 12px; display: flex; flex-direction: column; gap: 12px; }
.ht-87-grid { display: grid; grid-template-columns: repeat(5, 1fr); gap: 8px; }
.ht-87-swt { width: 28px; height: 28px; border: 0; padding: 0; border-radius: 8px; cursor: pointer; color: #fff; display: inline-flex; align-items: center; justify-content: center; box-shadow: inset 0 0 0 1px oklch(0 0 0 / 0.12); }
.ht-87-swt.on { box-shadow: 0 0 0 2px var(--raise), 0 0 0 4px var(--accent); }
.ht-87-hx { display: flex; flex-direction: column; gap: 6px; }
.ht-87-hx .lbl { margin-top: 0; }
.ht-87-hx .inp input { flex: 1; min-width: 0; border: 0; outline: 0; background: transparent; font: 12.5px var(--mono); color: var(--tp); padding: 0; }
.ht-87-hx .inp:focus-within { outline: 2px solid var(--accent); outline-offset: 2px; }
.ht-87-bad { font-size: 11.5px; color: var(--bad-fg); }

/* file dropzone */
.ht-87-dz { display: flex; align-items: center; gap: 12px; padding: 18px 16px; border-radius: 12px; border: 1.5px dashed var(--bd); background: var(--sheet); box-sizing: border-box; min-width: 320px; max-width: 480px; }
.ht-87-dz.idle, .ht-87-dz.drag { cursor: pointer; flex-direction: column; text-align: center; justify-content: center; min-height: 128px; }
.ht-87-dz.idle:hover { background: var(--hover); }
.ht-87-dz.drag { border-color: var(--accent); background: var(--info-bg); }
.ht-87-dz.drag .ht-87-di { background: var(--sheet); color: var(--accent-text); }
.ht-87-dz.error { border-style: solid; box-shadow: inset 0 0 0 1px var(--bad); border-color: transparent; }
.ht-87-dz.uploading { border-style: solid; border-color: transparent; box-shadow: inset 0 0 0 1px var(--bd); }
.ht-87-dz.dim { opacity: 0.45; pointer-events: none; }
.ht-87-di { width: 36px; height: 36px; border-radius: 10px; background: var(--fill); color: var(--ts); display: inline-flex; align-items: center; justify-content: center; flex: none; }
.ht-87-di.bad { background: var(--bad-bg); color: var(--bad-fg); }
.ht-87-db { display: flex; flex-direction: column; gap: 3px; min-width: 0; flex: 1; }
.ht-87-dz.idle .ht-87-db, .ht-87-dz.drag .ht-87-db { flex: none; align-items: center; }
.ht-87-db b { font-weight: 550; color: var(--tp); font-size: 13px; }
.ht-87-db > span { font-size: 12px; color: var(--ts); }
.ht-87-dn { display: flex; justify-content: space-between; gap: 8px; font-size: 12.5px; margin-bottom: 4px; }
.ht-87-dn span { color: var(--ts); font-variant-numeric: tabular-nums; }
.ht-87-dz.error .ht-87-db b { color: var(--bad-fg); }

/* address lookup */
.ht-87-al { display: flex; flex-direction: column; gap: 8px; width: 360px; max-width: 100%; }
.ht-87-ares { background: var(--raise); border-radius: 12px; box-shadow: var(--pop); padding: 6px; display: flex; flex-direction: column; gap: 2px; }
.ht-87-aopt .ic-s { color: var(--tq); }
.ht-87-aopt b { font-weight: 500; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ht-87-aopt em { margin-left: auto; font-family: var(--mono); }
.ht-87-lnk { align-self: flex-start; border: 0; background: none; padding: 0; font: 500 12.5px var(--sans); color: var(--accent-text); cursor: pointer; border-radius: 4px; }
.ht-87-lnk:hover { text-decoration: underline; }
.ht-87-amf { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.ht-87-amf .wide { grid-column: 1 / -1; }
.ht-87-asel { display: flex; align-items: center; gap: 10px; padding: 10px 12px; border-radius: 10px; box-shadow: inset 0 0 0 1px var(--bd); background: var(--sheet); color: var(--ts); }
.ht-87-asel div { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.ht-87-asel b { color: var(--tp); font-weight: 550; font-size: 13px; }
.ht-87-asel span { font-size: 12px; }

/* ---- 88-dates.css ---- */
/* 88-dates: Calendar, DatePicker, DateRangePicker, TimePicker. Day cells match .mcal (aspect 1, radius 6, 3px gap). */
.ht-88-cal { display: flex; flex-direction: column; gap: 8px; width: 100%; min-width: 252px; }
.ht-88-calh { display: flex; align-items: center; justify-content: space-between; gap: 8px; min-height: 26px; }
.ht-88-calh b { font-size: 13px; font-weight: 600; color: var(--tp); }
.ht-88-navgap { width: 26px; height: 26px; flex: none; }
.ht-88-grid { display: grid; gap: 3px; }
.ht-88-hd { height: 16px; display: flex; align-items: center; justify-content: center; font-size: 10.5px; font-weight: 500; color: var(--tq); }
.ht-88-day { font: 550 12px var(--sans); border: 0; padding: 0; aspect-ratio: 1; border-radius: 6px; display: flex; align-items: center; justify-content: center; position: relative; background: var(--well); color: var(--t2); cursor: pointer; }
.ht-88-day:hover:not(:disabled) { background: var(--fill); color: var(--tp); }
.ht-88-day.t { box-shadow: inset 0 0 0 1.5px var(--accent); color: var(--tp); }
.ht-88-day.mid { background: var(--info-bg); color: var(--info-fg); }
.ht-88-day.ht-88-sel, .ht-88-day.ht-88-sel:hover:not(:disabled) { background: var(--accent); color: var(--on-accent); }
.ht-88-day.out { background: none; color: var(--tq); }
.ht-88-day:disabled { background: none; color: var(--tq); opacity: 0.55; cursor: not-allowed; }
.ht-88-day.full:disabled { opacity: 1; background: var(--well); }
.ht-88-sub { position: absolute; left: 0; right: 0; bottom: 3px; font: 500 9px/1 var(--sans); font-style: normal; text-align: center; color: var(--warn-fg); }
.ht-88-day.full .ht-88-sub { color: var(--tq); }
.ht-88-day.ht-88-sel .ht-88-sub, .ht-88-day.ht-88-sel .ht-88-adj { color: inherit; opacity: 0.85; }
.ht-88-adj { position: absolute; top: 2px; right: 3px; font: 500 8.5px/1 var(--sans); font-style: italic; }
.ht-88-adj.ht-88-up { color: var(--bad-fg); }
.ht-88-adj.ht-88-dn { color: var(--ok-fg); }
.ht-88-loading { min-height: 120px; display: flex; align-items: center; justify-content: center; font-size: 12px; color: var(--ts); background: var(--well); border-radius: 8px; }
.ht-88-foot { font-size: 12px; color: var(--ts); }
.ht-88-anchor { position: relative; display: inline-block; }
.ht-88-field { font: 500 12.5px var(--sans); border: 0; height: 32px; min-width: 200px; border-radius: 8px; box-shadow: inset 0 0 0 1px var(--bd); padding: 0 10px; display: inline-flex; align-items: center; gap: 8px; background: var(--sheet); color: var(--tp); text-align: left; cursor: pointer; }
.ht-88-field .v { flex: 1; white-space: nowrap; }
.ht-88-field .v.ph { color: var(--tq); font-weight: 400; }
.ht-88-field .ic, .ht-88-field .ic-s, .ht-88-field .ic-xs { color: var(--ts); }
.ht-88-field.open { box-shadow: inset 0 0 0 1.5px var(--accent); }
.ht-88-field.bad { box-shadow: inset 0 0 0 1.5px var(--bad); }
.ht-88-field:disabled { opacity: 0.5; cursor: not-allowed; }
.ht-88-pop { position: absolute; top: calc(100% + 6px); left: 0; z-index: 12; background: var(--raise); border-radius: 12px; box-shadow: var(--pop); padding: 14px; width: 280px; }
.ht-88-range { width: auto; padding: 0; display: flex; flex-direction: column; }
.ht-88-body { display: flex; }
.ht-88-presets { display: flex; flex-direction: column; gap: 2px; padding: 10px; width: 150px; border-right: 1px solid var(--bd); flex: none; }
.ht-88-preset { font: 500 12.5px var(--sans); border: 0; background: none; height: 28px; padding: 0 10px; border-radius: 7px; text-align: left; color: var(--t2); cursor: pointer; }
.ht-88-preset:hover { background: var(--hover); }
.ht-88-preset.on { background: var(--fill); color: var(--tp); font-weight: 600; }
.ht-88-months { display: flex; gap: 20px; padding: 14px; }
.ht-88-months .ht-88-cal { width: 224px; min-width: 224px; }
.ht-88-rfoot { display: flex; align-items: center; gap: 8px; padding: 10px 14px; border-top: 1px solid var(--bd); }
.ht-88-sum { flex: 1; font-size: 12px; color: var(--ts); }
.ht-88-times { width: 168px; padding: 6px; max-height: 232px; overflow-y: auto; display: flex; flex-direction: column; gap: 1px; }
.ht-88-tg { font-size: 10.5px; font-weight: 600; color: var(--tq); padding: 8px 8px 3px; }
.ht-88-time { font: 500 12.5px var(--sans); font-variant-numeric: tabular-nums; border: 0; background: none; height: 28px; padding: 0 8px; border-radius: 7px; text-align: left; color: var(--t2); cursor: pointer; flex: none; }
.ht-88-time:hover:not(:disabled) { background: var(--hover); color: var(--tp); }
.ht-88-time.ht-88-sel, .ht-88-time.ht-88-sel:hover { background: var(--accent); color: var(--on-accent); }
.ht-88-time:disabled { color: var(--tq); text-decoration: line-through; cursor: not-allowed; }
.ht-88-day:focus-visible, .ht-88-field:focus-visible, .ht-88-preset:focus-visible, .ht-88-time:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }

/* ---- 89-data.css ---- */
.ht-89-dt { background: var(--sheet); border-radius: 10px; box-shadow: inset 0 0 0 1px var(--bd); overflow: auto; position: relative; width: 100%; box-sizing: border-box; font-size: 13px; color: var(--tp); }
.ht-89-hd, .ht-89-tr { display: grid; grid-template-columns: var(--ht-89-cols); align-items: center; gap: 10px; padding: 0 18px 0 12px; box-sizing: border-box; min-width: min-content; }
.ht-89-hd { position: sticky; top: 0; z-index: 3; height: 32px; background: var(--sheet); border-bottom: 1px solid var(--bd2); font: 500 11.5px var(--sans); color: var(--tq); }
.ht-89-tr { height: 42px; border-bottom: 1px solid var(--bd2); position: relative; }
.ht-89-tr:last-child { border-bottom: 0; }
.ht-89-tr:hover { background: var(--hover); }
.ht-89-tr.ht-89-sel { background: var(--info-bg); }
.ht-89-tr.click { cursor: pointer; }
.ht-89-tr:focus-visible, .ht-89-sort:focus-visible, .ht-89-ba:focus-visible, .ht-89-fch .ht-bare:focus-visible, .ht-89-pg .ib:focus-visible, .ht-89-pg select:focus-visible, .ht-89-fb .ht-bare:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.ht-89-cbx { opacity: 1; padding: 0; color: var(--on-accent); }
.ht-89-cbx.mixed { background: var(--accent); box-shadow: none; }
.ht-89-cbx.mixed .ic-xs { opacity: 1; }
.ht-89-th { display: flex; align-items: center; min-width: 0; }
.ht-89-th.end, .ht-89-td.end { justify-content: flex-end; text-align: right; }
.ht-89-sort { display: inline-flex; align-items: center; gap: 3px; color: inherit; border-radius: 4px; }
.ht-89-sort .ic-xs { color: var(--tq); }
.ht-89-sort:hover, .ht-89-th.on .ht-89-sort { color: var(--tp); }
.ht-89-th.on .ht-89-sort .ic-xs { color: var(--tp); }
.ht-89-td { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; display: flex; align-items: center; }
.ht-89-td.ref { font: 12px var(--mono); color: var(--tq); display: block; line-height: 42px; }
.ht-89-td.money { font-variant-numeric: tabular-nums; font-weight: 550; }
.ht-89-own { display: inline-flex; align-items: center; gap: 8px; min-width: 0; }
.ht-89-own span:last-child { overflow: hidden; text-overflow: ellipsis; }
.ht-89-bulk { position: sticky; top: 0; z-index: 4; height: 32px; margin-top: -32px; display: flex; align-items: center; gap: 4px; padding: 0 10px 0 12px; background: var(--mk); color: var(--sheet); font-size: 12.5px; box-sizing: border-box; }
.ht-89-bulk b { font-weight: 600; margin-right: 8px; }
.ht-89-bulk b::after { content: '\00b7'; margin-left: 8px; opacity: 0.6; }
.ht-89-ba { display: inline-flex; align-items: center; gap: 5px; height: 24px; padding: 0 8px; border-radius: 6px; color: inherit; font-size: 12.5px; }
.ht-89-ba:hover { background: oklch(1 0 0 / 0.14); }
:is(.dark, [data-theme="dark"]) .ht-89-ba:hover { background: oklch(0 0 0 / 0.12); }
.ht-89-clr { margin-left: auto; opacity: 0.7; }
.ht-89-pg { display: flex; align-items: center; gap: 12px; height: 44px; padding: 0 12px; font-size: 12.5px; color: var(--ts); box-sizing: border-box; }
.ht-89-range b { color: var(--tp); font-weight: 600; font-variant-numeric: tabular-nums; }
.ht-89-sp { flex: 1; }
.ht-89-ps { display: inline-flex; align-items: center; gap: 8px; }
.ht-89-pg select { height: 26px; border-radius: 7px; border: 0; box-shadow: inset 0 0 0 1px var(--bd); background: var(--sheet); color: var(--tp); font: 12.5px var(--sans); padding: 0 6px; }
.ht-89-pn { font-variant-numeric: tabular-nums; }
.ht-89-pg .ib[disabled] { opacity: 0.35; cursor: default; pointer-events: none; }
.ht-89-fch .ht-bare { font: inherit; color: inherit; display: inline-flex; align-items: center; padding: 0 7px; }
.ht-89-fch .fx { padding: 0 5px; }
.ht-89-fch > .fk { padding: 0 7px; }
.ht-89-fb { flex-wrap: wrap; }
.ht-89-fb .btn2.ht-bare { font: 500 12px var(--sans); }
.ht-89-fb .fclr { background: none; border: 0; font-family: var(--sans); }
.ht-89-fetch { margin-left: auto; font-size: 12px; color: var(--tq); }
.ht-89-stat { display: flex; flex-direction: column; gap: 4px; padding: 14px 16px; border-radius: 12px; box-shadow: inset 0 0 0 1px var(--bd); background: var(--sheet); min-width: 0; box-sizing: border-box; }
.ht-89-sl { font-size: 12px; color: var(--tq); }
.ht-89-sv { font-size: 26px; font-weight: 650; letter-spacing: -0.02em; font-variant-numeric: tabular-nums; line-height: 1.2; }
.ht-89-sd { display: flex; align-items: center; gap: 8px; font-size: 12px; color: var(--ts); }
.ht-89-dl { display: inline-flex; align-items: center; gap: 2px; font-weight: 600; font-variant-numeric: tabular-nums; }
.ht-89-dl.ok { color: var(--ok-fg); }
.ht-89-dl.bad { color: var(--bad-fg); }
.ht-89-dl.flat { color: var(--ts); }
.ht-89-stat .ht-89-spark { margin-top: 8px; }
.ht-89-spark { display: block; width: 100%; overflow: visible; }
.ht-89-chart { display: flex; flex-direction: column; gap: 10px; }
.ht-89-lg { display: flex; gap: 14px; font-size: 12px; color: var(--ts); }
.ht-89-lg span, .ht-89-tip span { display: inline-flex; align-items: center; gap: 6px; }
.ht-89-lg i, .ht-89-tip i { width: 8px; height: 8px; border-radius: 3px; flex: none; }
.ht-89-plot { position: relative; }
.ht-89-plot svg { display: block; width: 100%; height: auto; }
.ht-89-gl { stroke: var(--bd2); stroke-width: 1; }
.ht-89-ax { fill: var(--tq); font: 11px var(--sans); }
.ht-89-cur { stroke: var(--tq); stroke-width: 1; stroke-dasharray: 3 3; }
.ht-89-tip { position: absolute; top: 4px; transform: translateX(-50%); background: var(--raise); box-shadow: var(--pop); border-radius: 8px; padding: 8px 10px; font-size: 12px; display: flex; flex-direction: column; gap: 4px; pointer-events: none; white-space: nowrap; z-index: 2; }
.ht-89-tip.flip { transform: translateX(-100%); }
.ht-89-tip b { font-weight: 600; }
.ht-89-tip em { font-style: normal; font-weight: 600; margin-left: 10px; font-variant-numeric: tabular-nums; }

/* ---- 90-media.css ---- */
.ht-90-file { display: flex; align-items: center; gap: 4px; background: var(--sheet); border-radius: 10px; box-shadow: var(--ring); padding: 8px 8px 8px 10px; min-width: 0; }
.ht-90-file.on { box-shadow: 0 0 0 1.5px var(--accent); }
.ht-90-open { flex: 1; min-width: 0; display: flex; align-items: center; gap: 12px; text-align: left; color: inherit; border-radius: 8px; }
.ht-90-open:focus-visible, .ht-90-lbb:focus-visible, .ht-90-strip .th:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.ht-90-ft { position: relative; width: 40px; height: 40px; border-radius: 8px; flex: none; display: flex; align-items: center; justify-content: center; overflow: hidden; background: var(--fill); color: var(--ts); }
.ht-90-ft.pdf { background: var(--bad-bg); color: var(--bad-fg); }
.ht-90-ft.image { color: var(--tp); }
.ht-90-ft.doc { background: var(--info-bg); color: var(--info-fg); }
.ht-90-ft.sheet { background: var(--ok-bg); color: var(--ok-fg); }
.ht-90-ft.video { background: var(--pur-bg); color: var(--pur-fg); }
.ht-90-ph { position: absolute; inset: 0; border-radius: 0; }
.ht-90-ft .ic { position: relative; }
.ht-90-tx { min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.ht-90-tx b { font-weight: 560; font-size: 13px; color: var(--tp); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ht-90-tx em { font-style: normal; font-size: 12px; color: var(--ts); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ht-90-act { display: flex; gap: 2px; flex: none; }
.ht-90-del:hover { background: var(--bad-bg); color: var(--bad-fg); }

.ht-90-lb { position: relative; display: flex; flex-direction: column; gap: 12px; padding: 14px 16px 16px; border-radius: 12px; background: oklch(0.2 0 0 / 0.92); color: oklch(0.98 0 0); outline: none; }
.ht-90-lbtop { display: flex; align-items: center; justify-content: space-between; }
.ht-90-count { font-size: 12.5px; font-weight: 560; font-variant-numeric: tabular-nums; padding: 3px 10px; border-radius: 999px; background: oklch(1 0 0 / 0.12); }
.ht-90-lbb { width: 32px; height: 32px; border-radius: 999px; border: 0; background: oklch(1 0 0 / 0.12); color: inherit; display: inline-flex; align-items: center; justify-content: center; cursor: pointer; flex: none; }
.ht-90-lbb:hover:not(:disabled) { background: oklch(1 0 0 / 0.22); }
.ht-90-lbb:disabled { opacity: 0.35; cursor: default; }
.ht-90-stage { display: flex; align-items: center; gap: 12px; }
.ht-90-img.th { flex: 1; aspect-ratio: 16 / 9; height: auto; border-radius: 8px; display: flex; align-items: center; justify-content: center; color: oklch(1 0 0 / 0.7); }
.ht-90-cap { text-align: center; font-size: 13px; color: oklch(1 0 0 / 0.85); }
.ht-90-strip { display: flex; justify-content: center; gap: 6px; }
.ht-90-strip .th { width: 52px; height: 36px; aspect-ratio: auto; border-radius: 6px; border: 0; padding: 0; cursor: pointer; opacity: 0.55; box-shadow: none; }
.ht-90-strip .th.on { opacity: 1; box-shadow: 0 0 0 2px oklch(0.98 0 0); }

.ht-90-doc { display: flex; flex-direction: column; background: var(--well); border-radius: 12px; box-shadow: var(--ring); overflow: hidden; }
.ht-90-bar { display: flex; align-items: center; gap: 14px; padding: 6px 10px; min-height: 44px; background: var(--sheet); box-shadow: 0 1px 0 var(--bd); }
.ht-90-dn { flex: 1; min-width: 0; display: flex; align-items: center; gap: 8px; font-weight: 560; font-size: 13px; color: var(--tp); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ht-90-grp { display: flex; align-items: center; gap: 2px; }
.ht-90-pg { min-width: 48px; text-align: center; font-size: 12.5px; color: var(--ts); font-variant-numeric: tabular-nums; }
.ht-90-bar .ib:disabled { opacity: 0.35; cursor: default; }
.ht-90-view { flex: 1; overflow: auto; padding: 20px; display: flex; justify-content: center; }
.ht-90-page { background: var(--sheet); box-shadow: var(--lift); border-radius: 3px; aspect-ratio: 1 / 1.35; padding: 7% 9%; display: flex; flex-direction: column; gap: 7px; flex: none; position: relative; }
.ht-90-page s { display: block; height: 5px; border-radius: 3px; background: var(--fill); }
.ht-90-ph1 { display: block; width: 45%; height: 9px; border-radius: 3px; background: var(--bd2); }
.ht-90-ph2 { display: block; width: 30%; height: 5px; border-radius: 3px; background: var(--fill); margin-bottom: 6px; }
.ht-90-page em { position: absolute; bottom: 5%; right: 9%; font-style: normal; font-size: 10px; color: var(--tq); }

/* ---- 91-context-menu.css ---- */
.ht-91-wrap { position: relative; }
.ht-91-root { position: fixed; left: 0; top: 0; z-index: 1000; }
.ht-91-root.ht-91-abs { position: absolute; z-index: 40; }
.ht-91-menu:focus { outline: none; }
.ht-91-sub { position: relative; }
.ht-91-sub > .ht-85-item { width: 100%; }
.ht-91-subpanel { position: absolute; left: calc(100% + 2px); top: -6px; z-index: 1; }
/* Native feel: no open animation, default cursor, full-width accent highlight. */
.ht-91-out { animation: ht-91-fade 100ms linear forwards; pointer-events: none; }
@keyframes ht-91-fade { to { opacity: 0; } }
.ht-91-menu .ht-85-item { cursor: default; }
.ht-91-menu .ht-85-item:hover, .ht-91-menu .ht-85-item:focus-visible,
.ht-91-sub > .ht-85-item[aria-expanded="true"] { background: var(--accent); color: var(--on-accent); }
.ht-91-menu .ht-85-item:focus-visible { outline: none; }
.ht-91-menu .ht-85-item:hover .ht-85-lead, .ht-91-menu .ht-85-item:focus-visible .ht-85-lead,
.ht-91-menu .ht-85-item:hover .ht-85-sub, .ht-91-menu .ht-85-item:focus-visible .ht-85-sub,
.ht-91-sub > .ht-85-item[aria-expanded="true"] :is(.ht-85-lead, .ht-85-sub) { color: var(--on-accent); }
.ht-91-menu .ht-85-item:hover .kbd, .ht-91-menu .ht-85-item:focus-visible .kbd,
.ht-91-sub > .ht-85-item[aria-expanded="true"] .kbd { color: var(--on-accent); box-shadow: none; }
.ht-91-menu .ht-85-danger:hover, .ht-91-menu .ht-85-danger:focus-visible { background: var(--bad); color: var(--on-accent); }

/* ---- 92-workspace.css ---- */
/* workspace: open records in the sidebar, split view */
.ht-92-oi { position: relative; padding: 0; cursor: default; user-select: none; -webkit-user-select: none; }
.ht-92-oi.click:hover { background: var(--hover); }
.ht-92-oi .ht-92-main { all: unset; box-sizing: border-box; flex: 1; min-width: 0; height: 100%; display: flex; align-items: center; gap: 9px; padding: 0 8px; border-radius: 6px; cursor: default; }
.ht-92-oi .ht-92-main:focus-visible, .ht-92-x:focus-visible, .ht-92-shb:focus-visible, .ht-92-act:focus-visible, .ht-92-pb:focus-visible, .ht-92-sep:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.ht-92-oi.on, .ht-92-oi.on:hover { background: var(--accent); color: var(--on-accent); }
.ht-92-oi.on .ic, .ht-92-oi.on .ht-92-m, .ht-92-oi.on .ht-92-sc, .ht-92-oi.on .ht-92-x { color: var(--on-accent); }
.ht-92-oi.on .ht-92-x:hover { background: oklch(1 0 0 / 0.2); }
.ht-92-oi.on .dotc { background: var(--on-accent); color: var(--accent); }
.ht-92-oi.on .ht-92-draft { background: var(--on-accent); }
.ht-92-oi.on.ht-92-inactive, .ht-92-inactive .ht-92-oi.on, .ht-92-inactive .ht-92-oi.on:hover { background: var(--fill); color: var(--tp); }
.ht-92-inactive .ht-92-oi.on .ic, .ht-92-oi.on.ht-92-inactive .ic { color: var(--tp); }
.ht-92-inactive .ht-92-oi.on .ht-92-m, .ht-92-oi.on.ht-92-inactive .ht-92-m { color: var(--ts); }
.ht-92-inactive .ht-92-oi.on .dotc, .ht-92-oi.on.ht-92-inactive .dotc { background: var(--accent); color: var(--on-accent); }
.ht-92-inactive .ht-92-oi.on .ht-92-draft, .ht-92-oi.on.ht-92-inactive .ht-92-draft { background: var(--warn); }
.ht-92-pinned > .ht-92-main > .ic { color: var(--accent-text, var(--accent)); }
.ht-92-t { flex: 0 1 auto; min-width: 0; overflow: hidden; text-overflow: ellipsis; }
.ht-92-m, .ht-92-sc { flex: 1 1 0; min-width: 0; overflow: hidden; text-overflow: ellipsis; font-size: 12px; color: var(--tq); font-weight: 400; }
.ht-92-sc { display: none; font-family: var(--sans); }
.ht-92-r { margin-left: auto; display: inline-flex; align-items: center; gap: 6px; flex: none; }
.ht-92-main > .ht-92-m + .ht-92-r { margin-left: 0; }
.ht-92-draft { width: 6px; height: 6px; border-radius: 999px; background: var(--warn); flex: none; }
.ht-92-x { all: unset; box-sizing: border-box; position: absolute; right: 4px; top: 50%; transform: translateY(-50%); width: 20px; height: 20px; border-radius: 5px; display: none; align-items: center; justify-content: center; color: var(--ts); cursor: default; }
.ht-92-x:hover { background: var(--fill); color: var(--tp); }
.ht-92-oi:hover .ht-92-x, .ht-92-oi:focus-within .ht-92-x { display: inline-flex; }
.ht-92-oi:hover .ht-92-r, .ht-92-oi:focus-within .ht-92-r { visibility: hidden; }
.ht-92-oi:hover .ht-92-sc, .ht-92-oi:focus-within .ht-92-sc { display: block; }
.ht-92-oi:hover .ht-92-main:has(.ht-92-sc) > .ht-92-m, .ht-92-oi:focus-within .ht-92-main:has(.ht-92-sc) > .ht-92-m { display: none; }
.ht-92-dragging { opacity: 0.45; }
.ht-92-drop-before::before, .ht-92-drop-after::after { content: ""; position: absolute; left: 6px; right: 6px; height: 2px; border-radius: 2px; background: var(--accent); }
.ht-92-drop-before::before { top: -2px; }
.ht-92-drop-after::after { bottom: -2px; }

.ht-92-sec { display: flex; flex-direction: column; flex: none; }
.ht-92-sh { display: flex; align-items: center; padding: 16px 0 4px; }
.ht-92-shb { all: unset; box-sizing: border-box; display: inline-flex; align-items: center; gap: 4px; padding: 0 8px; height: 20px; border-radius: 5px; font: 600 12px var(--sans); color: var(--tq); cursor: default; user-select: none; -webkit-user-select: none; }
.ht-92-shb:hover { color: var(--ts); }
.ht-92-shb .ic-xs { opacity: 0; margin-left: -2px; order: 3; }
.ht-92-shb:hover .ic-xs, .ht-92-shb:focus-visible .ic-xs { opacity: 1; }
.ht-92-cnt { font-variant-numeric: tabular-nums; }
.ht-92-act { all: unset; margin-left: auto; padding: 0 8px; height: 20px; display: inline-flex; align-items: center; border-radius: 5px; font: 600 12px var(--sans); color: var(--tq); cursor: default; user-select: none; -webkit-user-select: none; }
.ht-92-act:hover { color: var(--tp); background: var(--hover); }
.ht-92-list { display: flex; flex-direction: column; gap: 1px; }
.ht-92-empty { padding: 4px 8px; font-size: 12px; color: var(--tq); }

.ht-92-split { display: flex; flex: 1; min-height: 0; min-width: 0; }
.ht-92-pane { position: relative; display: flex; flex-direction: column; min-width: 0; min-height: 0; overflow: hidden; }
.ht-92-focused::before { content: ""; position: absolute; left: 0; right: 0; top: 0; height: 2px; background: var(--accent); z-index: 2; }
.ht-92-ph { flex: none; display: flex; align-items: center; gap: 8px; height: 36px; padding: 0 8px 0 14px; border-bottom: 1px solid var(--bd); font-size: 13px; color: var(--ts); }
.ht-92-ph b { font-weight: 600; color: var(--tp); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ht-92-pm { font: 12px var(--mono); color: var(--tq); white-space: nowrap; }
.ht-92-pb { all: unset; box-sizing: border-box; width: 24px; height: 24px; border-radius: 6px; display: inline-flex; align-items: center; justify-content: center; color: var(--ts); cursor: default; flex: none; }
.ht-92-pb:hover { background: var(--hover); color: var(--tp); }
.ht-92-pbody { flex: 1; min-height: 0; overflow: auto; display: flex; flex-direction: column; }
.ht-92-sep { position: relative; flex: none; width: 9px; margin: 0 -4px; z-index: 3; cursor: col-resize; touch-action: none; user-select: none; -webkit-user-select: none; }
.ht-92-sep::before { content: ""; position: absolute; left: 4px; top: 0; bottom: 0; width: 1px; background: var(--bd); }
.ht-92-ph { user-select: none; -webkit-user-select: none; cursor: default; }

/* title bar: the top 52px is one unified row; drag regions let the window move */
.ht-92-drag { -webkit-app-region: drag; app-region: drag; }
.ht-92-drag button, .ht-92-nodrag { -webkit-app-region: no-drag; app-region: no-drag; }

/* ---- 93-native.css ---- */
/* Desktop platform layer. Set on <html> by the Electron shell (never on the web build):
   data-platform  mac | windows
   data-vibrancy  on            the window has a native material (macOS vibrancy, Windows Mica) behind a transparent page
   data-window    blurred       the window is not focused
   data-traffic   sim           draws stand-in traffic lights (previews only; Electron draws the real ones) */

/* Chrome behaves like a native app: default cursor, no text selection, no hover delay */
[data-platform] :is(button, [role="button"], [role="menuitem"], [role="tab"], [role="radio"], .click, .btn, .btn2, .ib, .seg span, .chip, .ni, .lrw, .card, .gh, .ht-85-item) { cursor: default; }
[data-platform] :is(.sb, .tb, .dh, .mtop, .gh, .lh, .vtabs, .seg, .btn, .btn2, .ib, .chip, .pill, .ni, .cnt, .kbd, .ht-85-menu, .ht-85-tip) { user-select: none; -webkit-user-select: none; }
[data-platform] img { -webkit-user-drag: none; }

/* Window drag regions: the top bar and the sidebar head move the window; controls inside stay clickable */
[data-platform] :is(.tb, .ht-drag) { -webkit-app-region: drag; }
[data-platform] :is(.tb, .ht-drag) :is(button, a, input, select, textarea, [role="button"], [role="tab"], [role="radio"], [tabindex], .seg, .chip) { -webkit-app-region: no-drag; }

/* macOS: content runs to the window edges; the sidebar sits on the window material; traffic lights top left */
[data-platform="mac"] .sb { position: relative; padding-top: 52px; }
[data-platform="mac"] .sb::before { content: ""; position: absolute; inset: 0 0 auto 0; height: 52px; -webkit-app-region: drag; }
[data-platform="mac"] .sheet { margin: 0; border-radius: 0; box-shadow: -1px 0 0 var(--bd); }
[data-platform="mac"] .tb { height: 52px; }
[data-platform="mac"][data-vibrancy="on"] :is(body, .app) { background: transparent; }
[data-platform="mac"][data-vibrancy="on"] .sb { background: transparent; }
[data-platform="mac"] :is(.ht-85-menu, .pal) { background: color-mix(in oklch, var(--raise) 78%, transparent); -webkit-backdrop-filter: blur(30px) saturate(1.8); backdrop-filter: blur(30px) saturate(1.8); }
[data-platform="mac"] .ht-85-menu { border-radius: 10px; padding: 5px; }
[data-platform="mac"] .ht-85-item { height: 24px; border-radius: 5px; font-size: 13px; font-weight: 400; color: var(--tp); }
[data-platform="mac"] .ht-85-item:is(:hover, :focus-visible) { background: var(--accent); color: var(--on-accent); outline: 0; }
[data-platform="mac"] .ht-85-item:is(:hover, :focus-visible) :is(.ic, .ic-s, .kbd) { color: var(--on-accent); }
[data-platform="mac"] .ht-85-item.ht-85-danger:is(:hover, :focus-visible) { background: var(--bad); color: oklch(1 0 0); }
[data-platform="mac"][data-traffic="sim"] .sb::after { content: ""; position: absolute; top: 18px; left: 16px; width: 52px; height: 12px; background: radial-gradient(circle 6px at 6px 6px, oklch(0.7 0.19 25) 98%, transparent) 0 0 / 20px 12px repeat-x, radial-gradient(circle 6px at 26px 6px, oklch(0.83 0.16 85) 98%, transparent), radial-gradient(circle 6px at 46px 6px, oklch(0.72 0.17 150) 98%, transparent); background-repeat: no-repeat; }

/* Windows 11: Mica ground, content on a layer with a rounded top-left corner, caption buttons top right */
[data-platform="windows"] { --font-sans: "Segoe UI Variable Text", "Segoe UI", system-ui, sans-serif; }
[data-platform="windows"] .sb { padding-top: 12px; }
[data-platform="windows"] .sheet { margin: 0; border-radius: 8px 0 0 0; box-shadow: -1px -1px 0 var(--bd); }
[data-platform="windows"] .tb { padding-right: 150px; }
[data-platform="windows"][data-vibrancy="on"] :is(body, .app, .sb) { background: transparent; }
[data-platform="windows"] .ht-85-menu { border-radius: 8px; padding: 4px; }
[data-platform="windows"] .ht-85-item { height: 30px; border-radius: 4px; font-weight: 400; color: var(--tp); }

/* Unfocused window: selection and the primary action go grey, as native apps do */
[data-window="blurred"] { --accent: oklch(0.62 0.01 260); --on-accent: oklch(1 0 0); }
[data-window="blurred"] .tb { color: var(--ts); }
[data-platform][data-window="blurred"] .sb::after { filter: grayscale(1) opacity(0.45); }

/* Native apps don't animate chrome on hover */
[data-platform] :is(.ni, .lrw, .btn, .btn2, .ib, .chip, .ht-85-item) { transition: none; }

/* ---- 94-sign-in.css ---- */
/* SignInPage: window-sized sign-in on the window material */
.ht-94-page { position: relative; isolation: isolate; display: flex; flex-direction: column; width: 100%; height: 100%; min-height: 560px; box-sizing: border-box; overflow: hidden; background: var(--app); color: var(--tp); font: 13px/1.45 var(--sans); -webkit-font-smoothing: antialiased; }
[data-vibrancy="on"] .ht-94-page { background: transparent; }

/* ground: a faint dot grid that fades to the edges, and a soft accent glow behind the card */
.ht-94-bg { position: absolute; inset: 0; z-index: -1; pointer-events: none;
  background:
    radial-gradient(52% 46% at 50% 46%, color-mix(in oklch, var(--accent) 8%, transparent), transparent 72%),
    radial-gradient(color-mix(in oklch, var(--tp) 16%, transparent) 1px, transparent 1.3px) 50% 50% / 22px 22px;
  -webkit-mask-image: radial-gradient(60% 58% at 50% 46%, oklch(0 0 0) 0%, transparent 100%);
  mask-image: radial-gradient(60% 58% at 50% 46%, oklch(0 0 0) 0%, transparent 100%); }
:is(.dark, [data-theme="dark"]) .ht-94-bg { background:
    radial-gradient(52% 46% at 50% 46%, color-mix(in oklch, var(--accent) 16%, transparent), transparent 72%),
    radial-gradient(color-mix(in oklch, var(--tp) 17%, transparent) 1px, transparent 1.3px) 50% 50% / 22px 22px; }

.ht-94-drag { flex: none; height: 52px; position: relative; }
[data-platform="mac"][data-traffic="sim"] .ht-94-drag::after { content: ""; position: absolute; top: 18px; left: 16px; width: 52px; height: 12px; background: radial-gradient(circle 6px at 6px 6px, oklch(0.7 0.19 25) 98%, transparent) 0 0 / 20px 12px repeat-x, radial-gradient(circle 6px at 26px 6px, oklch(0.83 0.16 85) 98%, transparent), radial-gradient(circle 6px at 46px 6px, oklch(0.72 0.17 150) 98%, transparent); background-repeat: no-repeat; }
[data-window="blurred"] .ht-94-drag::after { filter: grayscale(1) opacity(0.45); }

.ht-94-main { flex: 1; min-height: 0; display: flex; align-items: center; justify-content: center; padding: 0 16px 40px; }
.ht-94-card { width: 100%; max-width: 380px; box-sizing: border-box; padding: 32px 32px 28px; border-radius: 12px; background: var(--sheet); box-shadow: var(--pop); }
[data-vibrancy="on"] .ht-94-card { background: color-mix(in oklch, var(--sheet) 80%, transparent); -webkit-backdrop-filter: blur(30px) saturate(1.8); backdrop-filter: blur(30px) saturate(1.8); }

.ht-94-head { display: flex; flex-direction: column; align-items: flex-start; }
.ht-94-mark { width: 36px; height: 36px; border-radius: 10px; margin-bottom: 20px; }
.ht-94-mark::after { left: 25%; right: 25%; bottom: 25%; height: 20%; border-width: 2.4px; border-radius: 0 0 8px 8px; }
.ht-94-title { margin: 0; font: 650 21px/1.2 var(--sans); letter-spacing: -0.02em; color: var(--tp); }
.ht-94-sub { margin: 6px 0 0; font-size: 13px; color: var(--ts); overflow-wrap: anywhere; }

.ht-94-form { display: flex; flex-direction: column; gap: 14px; margin-top: 24px; }
.ht-94-card .inp { height: 36px; border-radius: 8px; }
.ht-94-card .inp:has(input:disabled) { opacity: 0.6; }
.ht-94-card .ht-inp { color: var(--tp); }
.ht-94-card .ib { width: 26px; height: 26px; margin-right: -6px; }
.ht-94-eye { position: relative; }
.ht-94-eye.on { color: var(--tp); }
.ht-94-eye.on::after { content: ""; position: absolute; left: 50%; top: 50%; width: 17px; height: 1.75px; margin: -0.9px 0 0 -8.5px; background: currentColor; border-radius: 2px; transform: rotate(-45deg); box-shadow: 0 0 0 1.5px var(--sheet); }
.ht-94-msg { align-items: flex-start; }
.ht-94-msg .ic { margin-top: 1px; }
.ht-94-submit { width: 100%; height: 36px; justify-content: center; font-size: 13px; margin-top: 2px; }
.ht-94-submit .kbd { margin-left: 2px; }
.ht-94-submit[aria-disabled="true"] { cursor: default; }
.ht-94-submit[aria-disabled="true"]:not(.dim) { filter: none; }
.ht-94-link { all: unset; box-sizing: border-box; align-self: center; margin-top: -2px; padding: 2px 6px; border-radius: 5px; font: 500 12.5px var(--sans); color: var(--accent-text); cursor: pointer; }
.ht-94-link:hover { text-decoration: underline; text-underline-offset: 3px; }
.ht-94-link:disabled { opacity: 0.45; pointer-events: none; }

.ht-94-tenants { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 6px; }
.ht-94-tenant { all: unset; box-sizing: border-box; width: 100%; height: 48px; display: flex; align-items: center; gap: 12px; padding: 0 12px; border-radius: 10px; box-shadow: inset 0 0 0 1px var(--bd); color: var(--ts); cursor: pointer; }
.ht-94-tenant:hover { background: var(--hover); color: var(--tp); }
.ht-94-tenant.on { box-shadow: inset 0 0 0 1.5px var(--accent); }
.ht-94-tenant:disabled:not(.on) { opacity: 0.5; pointer-events: none; }
.ht-94-tile { width: 28px; height: 28px; border-radius: 8px; background: var(--fill); color: var(--t2); display: inline-flex; align-items: center; justify-content: center; font: 600 11.5px var(--sans); flex: none; }
.ht-94-tn { flex: 1; min-width: 0; font: 550 13.5px var(--sans); color: var(--tp); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ht-94-eye:focus-visible, .ht-94-tenant:focus-visible, .ht-94-link:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }

.ht-94-foot { position: absolute; left: 0; right: 0; bottom: 0; height: 44px; display: flex; align-items: center; justify-content: center; gap: 8px; font-size: 11.5px; color: var(--ts); font-variant-numeric: tabular-nums; }

/* ---- 95-schedule.css ---- */
/* ScheduleGrid: day, week and resource-week calendar. Tokens only. */
.ht-95 { --ht-95-gut: 52px; --ht-95-hour: 48px; --ht-95-hours: 12; display: flex; flex-direction: column; min-height: 0; height: 100%; box-sizing: border-box; background: var(--sheet); color: var(--tp); font: 13px/1.4 var(--sans); -webkit-font-smoothing: antialiased; }
.ht-95[data-view="resource-week"] { --ht-95-gut: 156px; }
.ht-95-head { display: flex; align-items: center; gap: var(--space-8); padding: var(--space-8) var(--space-12); border-bottom: 1px solid var(--bd); flex: none; }
.ht-95-nav { display: flex; align-items: center; gap: var(--space-4); }
.ht-95-range { margin-left: var(--space-4); font: 600 14px var(--sans); letter-spacing: -0.01em; font-variant-numeric: tabular-nums; white-space: nowrap; }
.ht-95-sp { flex: 1; }
.ht-95-wrap { position: relative; flex: 1; min-height: 0; display: flex; flex-direction: column; }
.ht-95-scroll { flex: 1; min-height: 0; overflow: auto; }
.ht-95-top { position: sticky; top: 0; z-index: 5; background: var(--sheet); border-bottom: 1px solid var(--bd); }
.ht-95-row { display: grid; }
.ht-95-dh { display: flex; align-items: center; justify-content: center; gap: var(--space-6); padding: var(--space-6) var(--space-8); border-left: 1px solid var(--bd2); color: var(--ts); font: 500 12px var(--sans); }
.ht-95-dd { width: 26px; height: 26px; border-radius: var(--radius-999); display: inline-flex; align-items: center; justify-content: center; color: var(--tp); font: 600 14px var(--sans); font-variant-numeric: tabular-nums; }
.ht-95-dh.today .ht-95-dn { color: var(--accent-text); }
.ht-95-dh.today .ht-95-dd { background: var(--accent); color: var(--on-accent); }
.ht-95-dh.wk .ht-95-dn { color: var(--tq); }
.ht-95-gl { padding: var(--space-6) var(--space-8) 0 0; text-align: right; font: 11px var(--mono); color: var(--tq); }
.ht-95-allday { padding-bottom: var(--space-2); }
.ht-95-ad { min-width: 0; box-sizing: border-box; border-left: 1px solid var(--bd2); }
.ht-95-span { align-self: center; margin: 0 var(--space-4); min-width: 0; z-index: 1; }
.ht-95-span.cl { margin-left: 0; border-top-left-radius: 0; border-bottom-left-radius: 0; box-shadow: none; padding-left: var(--space-6); }
.ht-95-span.cr { margin-right: 0; border-top-right-radius: 0; border-bottom-right-radius: 0; padding-right: var(--space-6); }
.ht-95-span.cl::before { content: "\2039"; font-weight: 700; margin-right: -2px; }
.ht-95-span.cr::after { content: "\203A"; font-weight: 700; margin-left: auto; }
.ht-95-ad.wk, .ht-95-col.wk, .ht-95-cell.wk { background-color: color-mix(in oklab, var(--well) 70%, transparent); }
.ht-95-ad.today, .ht-95-col.today, .ht-95-cell.today { background-color: color-mix(in oklab, var(--accent) 4%, transparent); }

.ht-95-body { position: relative; display: grid; grid-template-columns: var(--ht-95-gut) minmax(0, 1fr); outline: none; }
.ht-95-body.res { display: block; }
.ht-95-axis { position: relative; height: calc(var(--ht-95-hour) * var(--ht-95-hours)); }
.ht-95-hl { position: absolute; right: var(--space-8); transform: translateY(-50%); font: 11px var(--mono); color: var(--tq); }
.ht-95-hl.first { transform: none; top: 4px !important; }
.ht-95-cols { position: relative; display: grid; height: calc(var(--ht-95-hour) * var(--ht-95-hours)); }
.ht-95-col { position: relative; min-width: 0; border-left: 1px solid var(--bd2); cursor: cell; background-image: repeating-linear-gradient(to bottom, transparent 0, transparent calc(var(--ht-95-hour) - 1px), var(--bd2) calc(var(--ht-95-hour) - 1px), var(--bd2) var(--ht-95-hour)); }

.ht-95-ev, .ht-95-bar { --evbg: color-mix(in oklab, var(--accent) 13%, var(--sheet)); --evfg: var(--accent-text); --evbar: var(--accent); background: var(--evbg); color: var(--evfg); box-shadow: inset 3px 0 0 var(--evbar); cursor: pointer; user-select: none; box-sizing: border-box; overflow: hidden; }
.ht-95-t-ok, .ht-95-ev.t-ok, .ht-95-bar.t-ok { --evbg: var(--ok-bg); --evfg: var(--ok-fg); --evbar: var(--ok); }
.ht-95-ev.t-warn, .ht-95-bar.t-warn { --evbg: var(--warn-bg); --evfg: var(--warn-fg); --evbar: var(--warn); }
.ht-95-ev.t-danger, .ht-95-bar.t-danger { --evbg: var(--bad-bg); --evfg: var(--bad-fg); --evbar: var(--bad); }
.ht-95-ev.t-mute, .ht-95-bar.t-mute { --evbg: var(--well); --evfg: var(--t2); --evbar: var(--tq); }
.ht-95-ev { position: absolute; z-index: 1; display: flex; flex-direction: column; gap: 1px; padding: var(--space-4) var(--space-6) var(--space-4) var(--space-10); border-radius: var(--radius-6); font-size: 12px; line-height: 1.3; outline: 1px solid var(--sheet); }
.ht-95-ev.mv, .ht-95-bar.mv { touch-action: none; }
.ht-95-ev:hover, .ht-95-bar:hover { box-shadow: inset 3px 0 0 var(--evbar), inset 0 0 0 1px var(--evbar); }
.ht-95-et { display: flex; align-items: center; gap: var(--space-4); font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ht-95-em { font: 11px var(--mono); opacity: 0.8; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ht-95-bar { flex: none; height: 22px; display: flex; align-items: center; gap: var(--space-6); padding: 0 var(--space-6) 0 var(--space-10); border-radius: var(--radius-6); font-size: 12px; white-space: nowrap; }
.ht-95-tm { font: 11px var(--mono); opacity: 0.8; flex: none; }
.ht-95-bt { font-weight: 600; overflow: hidden; text-overflow: ellipsis; min-width: 0; }
.ht-95-bm { margin-left: auto; font-size: 11px; opacity: 0.75; flex: 0 3 auto; min-width: 0; overflow: hidden; text-overflow: ellipsis; }
.ht-95-ev.kb, .ht-95-bar.kb { outline: 2px solid var(--accent); outline-offset: 1px; z-index: 2; }
.ht-95-ev.lift, .ht-95-bar.lift { opacity: 0.35; }
.ht-95-ev.ghost, .ht-95-bar.ghost { opacity: 0.9; pointer-events: none; z-index: 4; box-shadow: inset 3px 0 0 var(--evbar), var(--pop); }
.ht-95-sel { position: absolute; left: 2px; right: 2px; z-index: 3; box-sizing: border-box; padding: var(--space-2) var(--space-6); border-radius: var(--radius-6); border: 1px solid var(--accent); background: color-mix(in oklab, var(--accent) 16%, transparent); color: var(--accent-text); font: 11px var(--mono); pointer-events: none; }
.ht-95-cur { position: absolute; left: 2px; right: 2px; z-index: 3; box-sizing: border-box; border-radius: var(--radius-5); outline: 2px solid var(--accent); outline-offset: -1px; background: color-mix(in oklab, var(--accent) 8%, transparent); pointer-events: none; }
.ht-95-now { position: absolute; left: 0; right: 0; z-index: 3; height: 0; border-top: 2px solid var(--bad); pointer-events: none; }
.ht-95-now::before { content: ""; position: absolute; left: -4px; top: -5px; width: 8px; height: 8px; border-radius: var(--radius-999); background: var(--bad); }

.ht-95-rrow { display: grid; grid-template-columns: var(--ht-95-gut) minmax(0, 1fr); min-height: 60px; border-bottom: 1px solid var(--bd2); }
.ht-95-rlab { display: flex; flex-direction: column; justify-content: center; gap: 1px; min-width: 0; padding: var(--space-8) var(--space-12); }
.ht-95-rlab b { font-weight: 600; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ht-95-rlab span { font-size: 11.5px; color: var(--ts); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ht-95-rcells { display: grid; min-width: 0; }
.ht-95-cell { display: flex; flex-direction: column; gap: 3px; min-width: 0; padding: var(--space-4); box-sizing: border-box; border-left: 1px solid var(--bd2); cursor: cell; }
.ht-95-cell.sel { background-color: color-mix(in oklab, var(--accent) 12%, transparent); }
.ht-95-cell.drop { background-color: color-mix(in oklab, var(--accent) 10%, transparent); box-shadow: inset 0 0 0 1px var(--accent); }
.ht-95-cell.kb { outline: 2px solid var(--accent); outline-offset: -2px; }

.ht-95-skel { position: absolute; left: 4px; right: 4px; border-radius: var(--radius-6); background: var(--fill); animation: ht-95-pulse 1.4s ease-in-out infinite; }
.ht-95-skel.bar { position: static; height: 22px; }
@keyframes ht-95-pulse { 50% { opacity: 0.45; } }
@media (prefers-reduced-motion: reduce) { .ht-95-skel { animation: none; } }
.ht-95-empty { position: absolute; inset: 0; z-index: 6; display: flex; align-items: center; justify-content: center; pointer-events: none; }
.ht-95-emptyc { padding: var(--space-10) var(--space-16); border-radius: var(--radius-10); background: var(--sheet); box-shadow: var(--ring); color: var(--ts); font: 500 13px var(--sans); }

/* ---- 96-map.css ---- */
.ht-96-map { position: relative; display: flex; height: 100%; min-height: 460px; border-radius: 12px; overflow: hidden; background: var(--map-land); color: var(--tp); font-size: 13px; box-sizing: border-box; }
.ht-96-map::after { content: ''; position: absolute; inset: 0; border-radius: inherit; box-shadow: inset 0 0 0 1px var(--bd); pointer-events: none; z-index: 20; }
.ht-96-stage { position: relative; flex: 1; min-width: 0; overflow: hidden; background: var(--map-land); }
.ht-96-stage.sea { background: var(--map-water); }
.ht-96-base { position: absolute; inset: 0; }
.ht-96-grid { position: absolute; inset: 0; background-image: linear-gradient(var(--map-line) 1px, transparent 1px), linear-gradient(90deg, var(--map-line) 1px, transparent 1px); background-size: 46px 46px; opacity: 0.6; pointer-events: none; }
.ht-96-uk { position: absolute; inset: 0; pointer-events: none; }
.ht-96-uk path { fill: var(--map-land); stroke: var(--map-line); stroke-width: 1.5; stroke-linejoin: round; }
.ht-96-stage.sea .ht-96-grid { opacity: 0.35; }

.ht-96-t-ok { --ht-96-c: var(--ok); }
.ht-96-t-warn { --ht-96-c: var(--warn); }
.ht-96-t-bad { --ht-96-c: var(--bad); }
.ht-96-t-info { --ht-96-c: var(--info-fg); }
.ht-96-t-pur { --ht-96-c: var(--pur-fg); }
.ht-96-t-mute { --ht-96-c: var(--tq); }
.ht-96-t-dk { --ht-96-c: var(--mk); }

.ht-96-pins { position: absolute; inset: 0; }
.ht-96-pin, .ht-96-cl { position: absolute; transform: translate(-50%, -50%); font: 600 12px var(--sans); cursor: pointer; border: 0; color: var(--tp); box-sizing: border-box; }
.ht-96-pin { display: flex; align-items: center; gap: 0; padding: 3px; border-radius: 999px; background: var(--raise); box-shadow: 0 0 0 1px oklch(0 0 0 / 0.08), 0 4px 12px oklch(0 0 0 / 0.14); white-space: nowrap; transition: box-shadow 0.15s; z-index: 1; }
.ht-96-dot { width: 22px; height: 22px; border-radius: 999px; background: var(--ht-96-c); color: var(--on-accent); display: inline-flex; align-items: center; justify-content: center; flex: none; }
.ht-96-t-dk .ht-96-dot { color: var(--sheet); }
.ht-96-pl { max-width: 0; opacity: 0; overflow: hidden; transition: max-width 0.15s, opacity 0.15s, margin 0.15s; }
.ht-96-pin:hover, .ht-96-pin:focus-visible, .ht-96-pin.hot, .ht-96-pin.on { z-index: 3; }
.ht-96-pin:hover .ht-96-pl, .ht-96-pin:focus-visible .ht-96-pl, .ht-96-pin.hot .ht-96-pl, .ht-96-pin.on .ht-96-pl { max-width: 160px; opacity: 1; margin: 0 7px 0 6px; }
.ht-96-pin.hot { box-shadow: 0 0 0 2px var(--accent), 0 4px 12px oklch(0 0 0 / 0.14); }
.ht-96-pin.on { background: var(--accent); color: var(--on-accent); z-index: 4; }
.ht-96-pin.on .ht-96-dot { box-shadow: 0 0 0 2px var(--on-accent); }
.ht-96-cl { min-width: 34px; height: 34px; padding: 0 8px; border-radius: 999px; background: var(--mk); color: var(--sheet); font-weight: 650; box-shadow: 0 0 0 5px color-mix(in oklch, var(--mk) 18%, transparent); font-variant-numeric: tabular-nums; z-index: 2; }
.ht-96-cl.hot { box-shadow: 0 0 0 5px color-mix(in oklch, var(--accent) 40%, transparent); }
.ht-96-pin:focus-visible, .ht-96-cl:focus-visible, .ht-96-layer:focus-visible, .ht-96-row:focus-visible, .ht-96-ctl .ib:focus-visible, .ht-96-pop .ib:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }

.ht-96-pop.pop { top: auto; right: auto; width: 264px; padding: 12px; gap: 8px; z-index: 8; }
.ht-96-pt { display: flex; align-items: center; gap: 8px; }
.ht-96-pt b { flex: 1; min-width: 0; font-size: 13px; font-weight: 600; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ht-96-pm { margin: 0; color: var(--ts); font-size: 12.5px; line-height: 1.4; }
.ht-96-pa { display: flex; flex-wrap: wrap; gap: 6px; padding-top: 2px; }

.ht-96-layers, .ht-96-ctl, .ht-96-legend { position: absolute; background: var(--raise); box-shadow: var(--lift); z-index: 6; }
.ht-96-layers { top: 12px; left: 12px; width: 192px; border-radius: 12px; padding: 6px; display: flex; flex-direction: column; gap: 1px; }
.ht-96-lh { font: 600 11.5px var(--sans); color: var(--tq); padding: 4px 8px 6px; }
.ht-96-layer { display: flex; align-items: center; gap: 8px; height: 28px; padding: 0 8px; border: 0; border-radius: 7px; background: none; font: 13px var(--sans); color: var(--tp); cursor: pointer; text-align: left; }
.ht-96-layer:hover { background: var(--hover); }
.ht-96-layer.off { color: var(--tq); }
.ht-96-layer.off .ht-96-sw { background: transparent; box-shadow: inset 0 0 0 1.5px var(--tq); }
.ht-96-ln { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ht-96-layer em { font: normal 12px var(--sans); color: var(--ts); font-variant-numeric: tabular-nums; }
.ht-96-sw { width: 10px; height: 10px; border-radius: 999px; background: var(--ht-96-c, var(--tq)); flex: none; }
.ht-96-ctl { top: 12px; right: 12px; border-radius: 10px; padding: 3px; display: flex; flex-direction: column; align-items: center; gap: 2px; }
.ht-96-sep { width: 16px; height: 1px; background: var(--bd); }
.ht-96-legend { bottom: 12px; left: 12px; border-radius: 10px; padding: 7px 11px; display: flex; flex-wrap: wrap; gap: 4px 14px; font-size: 11.5px; color: var(--ts); max-width: calc(100% - 24px); box-sizing: border-box; }
.ht-96-lg { display: inline-flex; align-items: center; gap: 6px; }
.ht-96-cs { width: 16px; height: 16px; border-radius: 999px; background: var(--mk); color: var(--sheet); font: 650 9.5px/16px var(--sans); text-align: center; }

.ht-96-state { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; z-index: 7; pointer-events: none; }
.ht-96-state > * { pointer-events: auto; }
.ht-96-state:not(.ht-96-loading) > .ht-86-empty { background: var(--raise); border-radius: 12px; box-shadow: var(--lift); padding: 20px 28px; }
.ht-96-loading { background: color-mix(in oklch, var(--sheet) 45%, transparent); }
.ht-96-chipmsg { display: inline-flex; align-items: center; gap: 8px; height: 32px; padding: 0 14px; border-radius: 999px; background: var(--raise); box-shadow: var(--lift); font-size: 12.5px; color: var(--t2); }

.ht-96-side { width: 296px; flex: none; display: flex; flex-direction: column; background: var(--sheet); border-left: 1px solid var(--bd); min-height: 0; z-index: 10; }
.ht-96-sh { display: flex; align-items: center; gap: 8px; height: 40px; padding: 0 14px; border-bottom: 1px solid var(--bd2); flex: none; }
.ht-96-sh b { font-size: 13px; font-weight: 600; }
.ht-96-sc { margin-left: auto; font-size: 12px; color: var(--ts); font-variant-numeric: tabular-nums; }
.ht-96-sl { list-style: none; margin: 0; padding: 0; overflow: auto; flex: 1; }
.ht-96-row { display: flex; align-items: center; gap: 10px; width: 100%; padding: 9px 14px; border: 0; border-bottom: 1px solid var(--bd2); background: none; color: inherit; font: 13px var(--sans); text-align: left; cursor: pointer; box-sizing: border-box; }
.ht-96-row:hover, .ht-96-row.hot { background: var(--hover); }
.ht-96-row.on { background: var(--info-bg); }
.ht-96-rt { display: flex; flex-direction: column; min-width: 0; gap: 1px; }
.ht-96-rt b { font-weight: 600; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ht-96-rt span { font-size: 12px; color: var(--ts); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

/* ---- 97-appearance.css ---- */
.ht-97-seg { flex-wrap: wrap; }
.ht-97-brand { display: inline-flex; align-items: center; gap: 6px; font: 500 12.5px var(--sans); color: var(--t2); }
.ht-97-brand .dd { width: 10px; height: 10px; border-radius: 999px; }

/* ---- 98-themes.css ---- */
/* Themes. Three switches on the root element, all optional:
   data-look   warm (light only) | dim (dark only) | contrast (both)
   data-accent teal | green | violet | rose | orange | graphite   (blue is the default)
   data-density compact | comfortable                              (regular is the default)
   A tenant brand sets --accent (and --on-accent when the accent is light) inline on the root. */

/* Native controls and scrollbars follow the theme */
:root, [data-theme="light"] { color-scheme: light; }
:is(.dark, [data-theme="dark"]) { color-scheme: dark; }
:root { scrollbar-width: thin; scrollbar-color: color-mix(in oklch, var(--ts) 40%, transparent) transparent; }

/* Looks */
[data-look="warm"]:not(:is(.dark, [data-theme="dark"])) { --app: oklch(0.962 0.009 80); --sheet: oklch(0.993 0.005 85); --rail: oklch(0.978 0.008 82); --raise: oklch(0.997 0.004 85); --fill: oklch(0.92 0.012 78); --hover: oklch(0.968 0.008 80); --well: oklch(0.948 0.01 80); --tp: oklch(0.24 0.014 60); --t2: oklch(0.37 0.016 60); --ts: oklch(0.5 0.02 60); --tq: oklch(0.6 0.018 62); --bd: oklch(0.905 0.012 78); --bd2: oklch(0.942 0.009 80); --map-land: oklch(0.945 0.025 120); --map-water: oklch(0.88 0.035 220); }
:is(.dark, [data-theme="dark"])[data-look="dim"] { --app: oklch(0.262 0.008 262); --sheet: oklch(0.298 0.009 262); --rail: oklch(0.282 0.008 262); --raise: oklch(0.345 0.01 262); --fill: oklch(1 0 0 / 0.09); --hover: oklch(1 0 0 / 0.04); --well: oklch(1 0 0 / 0.06); --tp: oklch(0.95 0.003 250); --t2: oklch(0.85 0.008 260); --ts: oklch(0.75 0.012 260); --tq: oklch(0.64 0.015 262); --bd: oklch(1 0 0 / 0.09); --bd2: oklch(1 0 0 / 0.06); --ok-fg: oklch(0.86 0.1 158); --warn-fg: oklch(0.88 0.1 70); --bad-fg: oklch(0.86 0.1 25); --info-fg: oklch(0.86 0.08 255); --pur-fg: oklch(0.87 0.09 300); --accent-text: oklch(from var(--accent) 0.8 min(c, 0.14) h); --map-land: oklch(0.32 0.012 160); --map-road: oklch(0.4 0.008 260); --map-water: oklch(0.37 0.04 240); --map-line: oklch(0.37 0.012 160); }
[data-look="contrast"] { --app: oklch(0.955 0.003 264); --fill: oklch(0.89 0.006 264); --hover: oklch(0.955 0.004 264); --well: oklch(0.93 0.005 264); --tp: oklch(0.14 0.01 260); --t2: oklch(0.22 0.012 260); --ts: oklch(0.34 0.016 260); --tq: oklch(0.45 0.016 260); --bd: oklch(0.64 0.006 264); --bd2: oklch(0.84 0.004 264); --ok-fg: oklch(0.34 0.1 158); --warn-fg: oklch(0.4 0.11 55); --bad-fg: oklch(0.4 0.16 25); --info-fg: oklch(0.36 0.14 255); --pur-fg: oklch(0.36 0.16 300); --accent-text: oklch(from var(--accent) min(l, 0.42) c h); --ring: 0 0 0 1px oklch(0 0 0 / 0.28); --lift: 0 0 0 1px oklch(0 0 0 / 0.3); --pop: 0 0 0 1px oklch(0 0 0 / 0.4), 0 16px 40px oklch(0 0 0 / 0.2); }
:is(.dark, [data-theme="dark"])[data-look="contrast"] { --app: oklch(0.1 0.004 270); --sheet: oklch(0.135 0.005 270); --rail: oklch(0.12 0.004 270); --raise: oklch(0.19 0.006 270); --fill: oklch(1 0 0 / 0.16); --hover: oklch(1 0 0 / 0.07); --well: oklch(1 0 0 / 0.09); --tp: oklch(0.99 0 0); --t2: oklch(0.93 0.004 260); --ts: oklch(0.84 0.01 260); --tq: oklch(0.74 0.014 264); --bd: oklch(1 0 0 / 0.4); --bd2: oklch(1 0 0 / 0.2); --ok-fg: oklch(0.9 0.1 158); --warn-fg: oklch(0.92 0.1 75); --bad-fg: oklch(0.88 0.1 25); --info-fg: oklch(0.88 0.08 255); --pur-fg: oklch(0.9 0.08 300); --accent-text: oklch(from var(--accent) 0.82 min(c, 0.13) h); --ring: 0 0 0 1px oklch(1 0 0 / 0.3); --lift: 0 0 0 1px oklch(1 0 0 / 0.34); --pop: 0 0 0 1px oklch(1 0 0 / 0.4), 0 16px 40px oklch(0 0 0 / 0.6); }

/* Accents: each keeps white text at 6.2:1 or better */
[data-accent="teal"] { --accent: oklch(0.48 0.082 200); }
[data-accent="green"] { --accent: oklch(0.475 0.118 155); }
[data-accent="violet"] { --accent: oklch(0.52 0.24 293); }
[data-accent="rose"] { --accent: oklch(0.515 0.206 8); }
[data-accent="orange"] { --accent: oklch(0.505 0.154 42); }
[data-accent="graphite"] { --accent: oklch(0.49 0.015 260); }

/* Density: rows, controls and bars step together */
[data-density="compact"] :is(.lrw, .tr, .srow, .ht-89-tr, .ht-86-skrow) { height: 34px; }
[data-density="compact"] .wr { min-height: 34px; padding-top: 2px; padding-bottom: 2px; }
[data-density="compact"] .gh { height: 32px; }
[data-density="compact"] .lr { height: 38px; }
[data-density="compact"] :is(.inp, .wsb, .ht-88-field) { height: 28px; }
[data-density="compact"] :is(.btn, .btn2) { height: 26px; }
[data-density="compact"] :is(.btn.sm, .btn2.sm) { height: 22px; }
[data-density="compact"] .ib { width: 24px; height: 24px; }
[data-density="compact"] .ni { height: 24px; }
[data-density="compact"] :is(.tb, .dh) { height: 40px; }
[data-density="compact"] .ht-89-hd { height: 28px; }
[data-density="comfortable"] :is(.lrw, .tr, .srow, .ht-89-tr, .ht-86-skrow) { height: 50px; }
[data-density="comfortable"] .wr { min-height: 50px; }
[data-density="comfortable"] .gh { height: 42px; }
[data-density="comfortable"] .lr { height: 54px; }
[data-density="comfortable"] :is(.inp, .wsb, .ht-88-field) { height: 36px; }
[data-density="comfortable"] :is(.btn, .btn2) { height: 34px; }
[data-density="comfortable"] :is(.btn.sm, .btn2.sm) { height: 28px; }
[data-density="comfortable"] .ib { width: 32px; height: 32px; }
[data-density="comfortable"] .ni { height: 32px; }
[data-density="comfortable"] :is(.tb, .dh) { height: 52px; }
[data-density="comfortable"] .ht-89-hd { height: 36px; }

/* Status colours for colour-blind staff: green becomes blue, red becomes vermillion, amber becomes yellow.
   Pills still carry a word; this only separates the hues. */
[data-status="cvd"] { --ok-bg: oklch(0.95 0.04 200); --ok-fg: oklch(0.42 0.074 215); --ok: oklch(0.58 0.1 215); --warn-bg: oklch(0.96 0.06 95); --warn-fg: oklch(0.47 0.095 85); --warn: oklch(0.82 0.15 90); --bad-bg: oklch(0.95 0.026 45); --bad-fg: oklch(0.5 0.15 40); --bad: oklch(0.64 0.18 42); }
:is(.dark, [data-theme="dark"])[data-status="cvd"] { --ok-bg: oklch(0.6 0.1 215 / 0.2); --ok-fg: oklch(0.82 0.08 215); --ok: oklch(0.7 0.11 215); --warn-bg: oklch(0.75 0.13 92 / 0.18); --warn-fg: oklch(0.88 0.11 95); --warn: oklch(0.84 0.15 92); --bad-bg: oklch(0.62 0.16 42 / 0.2); --bad-fg: oklch(0.82 0.1 45); --bad: oklch(0.7 0.17 42); }

/* Reduced motion: on by choice here, and always when the system asks for it */
[data-motion="reduced"] *, [data-motion="reduced"] *::before, [data-motion="reduced"] *::after { transition: none !important; animation-duration: 0.01ms !important; animation-iteration-count: 1 !important; }
@media (prefers-reduced-motion: reduce) { *, *::before, *::after { transition: none !important; animation-duration: 0.01ms !important; animation-iteration-count: 1 !important; } }

/* ---- 99-generated.css ---- */
/* Generated by dev/themes-gen.py. Do not edit. */
[data-chrome="ink"]:not(:is(.dark, [data-theme="dark"])) .app { background: oklch(0.165 0.005 270); }
[data-chrome="ink"]:not(:is(.dark, [data-theme="dark"])) :is(.sb, .mtop) { --app: oklch(0.165 0.005 270); --sheet: oklch(0.198 0.006 270); --rail: oklch(0.187 0.005 270); --raise: oklch(0.245 0.008 270); --fill: oklch(1 0 0 / 0.08); --hover: oklch(1 0 0 / 0.035); --well: oklch(1 0 0 / 0.05); --tp: oklch(0.95 0.003 250); --t2: oklch(0.84 0.008 260); --ts: oklch(0.71 0.014 260); --tq: oklch(0.56 0.018 264); --bd: oklch(1 0 0 / 0.08); --bd2: oklch(1 0 0 / 0.05); --ok-bg: oklch(0.6 0.12 158 / 0.18); --ok-fg: oklch(0.82 0.1 158); --ok: oklch(0.68 0.13 158); --warn-bg: oklch(0.7 0.14 65 / 0.18); --warn-fg: oklch(0.85 0.11 70); --warn: oklch(0.75 0.15 62); --bad-bg: oklch(0.6 0.18 25 / 0.2); --bad-fg: oklch(0.82 0.11 25); --bad: oklch(0.68 0.19 25); --info-bg: oklch(0.6 0.15 255 / 0.2); --info-fg: oklch(0.82 0.09 255); --pur-bg: oklch(0.6 0.17 300 / 0.2); --pur-fg: oklch(0.84 0.1 300); --mk: oklch(0.97 0 0); --accent: oklch(0.4547 0.2633 264); --on-accent: oklch(1 0 0); --accent-text: oklch(from var(--accent) 0.74 min(c, 0.15) h); --map-land: oklch(0.24 0.012 160); --map-road: oklch(0.33 0.008 260); --map-water: oklch(0.3 0.04 240); --map-line: oklch(0.29 0.012 160); --ring: 0 0 0 1px oklch(1 0 0 / 0.07); --lift: 0 0 0 1px oklch(1 0 0 / 0.08); --pop: 0 0 0 1px oklch(1 0 0 / 0.1), 0 16px 40px oklch(0 0 0 / 0.5); color-scheme: dark; background: oklch(0.165 0.005 270); color: var(--t2); }
[data-corners="sharp"] .ht-sheet { border-radius: 5px; }
[data-corners="sharp"] .sheet { border-radius: 5px; }
[data-corners="sharp"] .mk { border-radius: 2px; }
[data-corners="sharp"] .ib { border-radius: 3px; }
[data-corners="sharp"] .kbd { border-radius: 2px; }
[data-corners="sharp"] .btn { border-radius: 3px; }
[data-corners="sharp"] .btn2 { border-radius: 3px; }
[data-corners="sharp"] .chip { border-radius: 3px; }
[data-corners="sharp"] .prod { border-radius: 2px; }
[data-corners="sharp"] .pl { border-radius: 2px; }
[data-corners="sharp"] .seg { border-radius: 3px; }
[data-corners="sharp"] .seg span { border-radius: 2px; }
[data-corners="sharp"] .ni { border-radius: 2px; }
[data-corners="sharp"] .sbr .ib { border-radius: 4px; }
[data-corners="sharp"] .vtabs span { border-radius: 2px; }
[data-corners="sharp"] .hint { border-radius: 4px; }
[data-corners="sharp"] .ptok { border-radius: 3px; }
[data-corners="sharp"] .ptok span { border-radius: 2px; }
[data-corners="sharp"] .cbx { border-radius: 2px; }
[data-corners="sharp"] .col { border-radius: 5px; }
[data-corners="sharp"] .card { border-radius: 4px; }
[data-corners="sharp"] .cempty { border-radius: 4px; }
[data-corners="sharp"] .pkh .av { border-radius: 4px; }
[data-corners="sharp"] .pkn { border-radius: 4px; }
[data-corners="sharp"] .selbar { border-radius: 5px; }
[data-corners="sharp"] .selbar .selc { border-radius: 3px; }
[data-corners="sharp"] .pop { border-radius: 5px; }
[data-corners="sharp"] .inp { border-radius: 3px; }
[data-corners="sharp"] .opt { border-radius: 3px; }
[data-corners="sharp"] .cb { border-radius: 2px; }
[data-corners="sharp"] .dnote { border-radius: 4px; }
[data-corners="sharp"] .avbig { border-radius: 6px; }
[data-corners="sharp"] .flowc { border-radius: 3px; }
[data-corners="sharp"] .steps { border-radius: 2px; }
[data-corners="sharp"] .stp { border-radius: 2px; }
[data-corners="sharp"] .hl { border-radius: 5px; }
[data-corners="sharp"] .wt { border-radius: 3px; }
[data-corners="sharp"] .wr { border-radius: 3px; }
[data-corners="sharp"] .tl { border-radius: 5px; }
[data-corners="sharp"] .af span { border-radius: 2px; }
[data-corners="sharp"] .composer { border-radius: 5px; }
[data-corners="sharp"] .inst .av { border-radius: 4px; }
[data-corners="sharp"] .th { border-radius: 3px; }
[data-corners="sharp"] .th .cap { border-radius: 2px; }
[data-corners="sharp"] .mcal span { border-radius: 2px; }
[data-corners="sharp"] .wh1 .wt { border-radius: 4px; }
[data-corners="sharp"] .lt { border-radius: 5px; }
[data-corners="sharp"] .sel { border-radius: 3px; }
[data-corners="sharp"] .qty { border-radius: 3px; }
[data-corners="sharp"] .note2 { border-radius: 4px; }
[data-corners="sharp"] .mi { border-radius: 4px; }
[data-corners="sharp"] .mapw { border-radius: 5px; }
[data-corners="sharp"] .mapw .road { border-radius: 2px; }
[data-corners="sharp"] .pick { border-radius: 5px; }
[data-corners="sharp"] .bigok { border-radius: 6px; }
[data-corners="sharp"] .box { border-radius: 5px; }
[data-corners="sharp"] .acc { border-radius: 5px; }
[data-corners="sharp"] .lock { border-radius: 4px; }
[data-corners="sharp"] .pf { border-radius: 3px; }
[data-corners="sharp"] .pf span { border-radius: 2px; }
[data-corners="sharp"] .ta { border-radius: 4px; }
[data-corners="sharp"] .ctx { border-radius: 5px; }
[data-corners="sharp"] .msg.mail p { border-radius: 4px; }
[data-corners="sharp"] .sumb { border-radius: 5px; }
[data-corners="sharp"] .ev { border-radius: 2px; }
[data-corners="sharp"] .scard { border-radius: 5px; }
[data-corners="sharp"] .pal { border-radius: 6px; }
[data-corners="sharp"] .pc2 { border-radius: 3px; }
[data-corners="sharp"] .toast { border-radius: 4px; }
[data-corners="sharp"] .fch { border-radius: 3px; }
[data-corners="sharp"] .fpop { border-radius: 4px; }
[data-corners="sharp"] .fo2 { border-radius: 2px; }
[data-corners="sharp"] .isrch { border-radius: 3px; }
[data-corners="sharp"] .isrch.lg { border-radius: 3px; }
[data-corners="sharp"] .ht-ibx { border-radius: 2px; }
[data-corners="sharp"] .list { border-radius: 4px; }
[data-corners="sharp"] .stt::before { border-radius: 4px; }
[data-corners="sharp"] .logo { border-radius: 3px; }
[data-corners="sharp"] .ht-40-before::before, [data-corners="sharp"] .ht-40-after::after { border-radius: 2px; }
[data-corners="sharp"] .blogo { border-radius: 3px; }
[data-corners="sharp"] .blogo.sm { border-radius: 2px; }
[data-corners="sharp"] .blogo.lg { border-radius: 6px; }
[data-corners="sharp"] .blogo.xl { border-radius: 4px; }
[data-corners="sharp"] .hd-pick { border-radius: 4px; }
[data-corners="sharp"] .hd-pick .th { border-radius: 3px; }
[data-corners="sharp"] .hd-pick .nm em > span { border-radius: 2px; }
[data-corners="sharp"] .hd-rooms { border-radius: 4px; }
[data-corners="sharp"] .hd-em { border-radius: 4px; }
[data-corners="sharp"] .hd-call { border-radius: 4px; }
[data-corners="sharp"] .ht-hpd-cv { border-radius: 5px; }
[data-corners="sharp"] .hd-dev.hp { border-radius: 2px; }
[data-corners="sharp"] .hd-insp { border-radius: 5px; }
[data-corners="sharp"] .hd-tbl { border-radius: 5px; }
[data-corners="sharp"] .ht-75-ed { border-radius: 4px; }
[data-corners="sharp"] .ht-75-mf { border-radius: 2px; }
[data-corners="sharp"] .ht-75-menu { border-radius: 5px; }
[data-corners="sharp"] .ht-75-link { border-radius: 5px; }
[data-corners="sharp"] .ht-76-ref { border-radius: 2px; }
[data-corners="sharp"] .qcust { border-radius: 4px; }
[data-corners="sharp"] .otab { border-radius: 4px; }
[data-corners="sharp"] .otab .ht-80-lt { border-radius: 2px; }
[data-corners="sharp"] .qstep { border-radius: 3px; }
[data-corners="sharp"] .qres { border-radius: 4px; }
[data-corners="sharp"] .qbun { border-radius: 5px; }
[data-corners="sharp"] .qsum { border-radius: 5px; }
[data-corners="sharp"] .qdep { border-radius: 3px; }
[data-corners="sharp"] .qmg .trk { border-radius: 2px; }
[data-corners="sharp"] .qmg .trk i { border-radius: 2px; }
[data-corners="sharp"] .ccard { border-radius: 5px; }
[data-corners="sharp"] .cadd { border-radius: 4px; }
[data-corners="sharp"] .cadd .ht-80-box { border-radius: 2px; }
[data-corners="sharp"] .ht-80-list { border-radius: 4px; }
[data-corners="sharp"] .ht-80-thumb { border-radius: 4px; }
[data-corners="sharp"] .ht-80-ctic { border-radius: 3px; }
[data-corners="sharp"] .ht-80-ib2, [data-corners="sharp"] button.ht-80-ib2 { border-radius: 2px; }
[data-corners="sharp"] .ht-80-chip { border-radius: 3px; }
[data-corners="sharp"] .ht-80-tch { border-radius: 3px; }
[data-corners="sharp"] .ht-80-tres { border-radius: 4px; }
[data-corners="sharp"] .ht-80-tr { border-radius: 3px; }
[data-corners="sharp"] .ht-81-kind { border-radius: 2px; }
[data-corners="sharp"] .ht-81-inh { border-radius: 2px; }
[data-corners="sharp"] .ht-81-unit { border-radius: 4px; }
[data-corners="sharp"] .ht-81-erp > button { border-radius: 3px; }
[data-corners="sharp"] .ht-81-gt { border-radius: 5px; }
[data-corners="sharp"] .ht-81-tile { border-radius: 5px; }
[data-corners="sharp"] .ht-81-tile .th2 { border-radius: 3px; }
[data-corners="sharp"] .ht-81-bcard { border-radius: 6px; }
[data-corners="sharp"] .ht-81-bcard .rg > span { border-radius: 2px; }
[data-corners="sharp"] .ht-81-tli { border-radius: 3px; }
[data-corners="sharp"] .ht-81-tli .wt { border-radius: 3px; }
[data-corners="sharp"] .ht-82-bcard { border-radius: 4px; }
[data-corners="sharp"] .ht-82-ib { border-radius: 2px; }
[data-corners="sharp"] .ht-82-btn { border-radius: 3px; }
[data-corners="sharp"] .ht-82-slot { border-radius: 4px; }
[data-corners="sharp"] .ht-82-sn { border-radius: 3px; }
[data-corners="sharp"] .ht-82-thumb { border-radius: 3px; }
[data-corners="sharp"] .ht-82-ddb { border-radius: 3px; }
[data-corners="sharp"] .ht-82-dd { border-radius: 4px; }
[data-corners="sharp"] .ht-82-ddo { border-radius: 2px; }
[data-corners="sharp"] .ht-82-rv { border-radius: 3px; }
[data-corners="sharp"] .ht-82-rs .rp { border-radius: 2px; }
[data-corners="sharp"] .ht-82-rcard { border-radius: 4px; }
[data-corners="sharp"] .ht-82-tst { border-radius: 5px; }
[data-corners="sharp"] .ht-82-tres { border-radius: 4px; }
[data-corners="sharp"] .ht-82-tr { border-radius: 3px; }
[data-corners="sharp"] .ht-83-dot { border-radius: 4px; }
[data-corners="sharp"] .ht-83-blk { border-radius: 3px; }
[data-corners="sharp"] .ht-83-blk mark { border-radius: 2px; }
[data-corners="sharp"] .ht-83-callout { border-radius: 5px; }
[data-corners="sharp"] .ht-83-pblk { border-radius: 5px; }
[data-corners="sharp"] .ht-83-pblk .thumb { border-radius: 4px; }
[data-corners="sharp"] .ht-83-slash { border-radius: 3px; }
[data-corners="sharp"] .ht-83-menu { border-radius: 5px; }
[data-corners="sharp"] .ht-83-menu button { border-radius: 3px; }
[data-corners="sharp"] .ht-83-pubst { border-radius: 4px; }
[data-corners="sharp"] .ht-83-chglist li::before { border-radius: 4px; }
[data-corners="sharp"] .ht-84-inp { border-radius: 4px; }
[data-corners="sharp"] .ht-84-pfx { border-radius: 4px; }
[data-corners="sharp"] .ht-84-cover { border-radius: 4px; }
[data-corners="sharp"] .ht-84-cover::after { border-radius: 2px 2px 2px 2px; }
[data-corners="sharp"] .ht-84-serp { border-radius: 5px; }
[data-corners="sharp"] .ht-84-mcard { border-radius: 4px; }
[data-corners="sharp"] .ht-84-mcard .im::after { border-radius: 2px; }
[data-corners="sharp"] .ht-84-mcard .alt input { border-radius: 2px; }
[data-corners="sharp"] .ht-84-lprod { border-radius: 5px; }
[data-corners="sharp"] .ht-84-lprod .th { border-radius: 3px; }
[data-corners="sharp"] .ht-84-tabs > button { border-radius: 3px; }
[data-corners="sharp"] .ht-85-tip { border-radius: 3px; }
[data-corners="sharp"] .ht-85-tip.ht-85-rich { border-radius: 5px; }
[data-corners="sharp"] .ht-85-menu { border-radius: 5px; }
[data-corners="sharp"] .ht-85-item { border-radius: 3px; }
[data-corners="sharp"] .ht-85-dlg { border-radius: 5px; }
[data-corners="sharp"] .ht-86-emic { border-radius: 4px; }
[data-corners="sharp"] .ht-86-sk { border-radius: 2px; }
[data-corners="sharp"] .ht-86-sk-block { border-radius: 4px; }
[data-corners="sharp"] .ht-86-skrow .ht-86-skbox { border-radius: 2px; }
[data-corners="sharp"] .ht-86-erric { border-radius: 5px; }
[data-corners="sharp"] .ht-86-errpre { border-radius: 3px; }
[data-corners="sharp"] .ht-87-rg-list .ht-87-ro { border-radius: 3px; }
[data-corners="sharp"] .ht-87-rg-card .ht-87-ro { border-radius: 4px; }
[data-corners="sharp"] .ht-87-tag { border-radius: 2px; }
[data-corners="sharp"] .ht-87-tag button { border-radius: 2px; }
[data-corners="sharp"] .ht-87-menu { border-radius: 5px; }
[data-corners="sharp"] .ht-87-tip { border-radius: 2px; }
[data-corners="sharp"] .ht-87-oc { border-radius: 3px; }
[data-corners="sharp"] .ht-87-bgi:only-child { border-radius: 3px; }
[data-corners="sharp"] .ht-87-sw { border-radius: 2px; }
[data-corners="sharp"] .ht-87-sq { border-radius: 2px; }
[data-corners="sharp"] .ht-87-cpp { border-radius: 5px; }
[data-corners="sharp"] .ht-87-swt { border-radius: 3px; }
[data-corners="sharp"] .ht-87-dz { border-radius: 5px; }
[data-corners="sharp"] .ht-87-di { border-radius: 4px; }
[data-corners="sharp"] .ht-87-ares { border-radius: 5px; }
[data-corners="sharp"] .ht-87-lnk { border-radius: 2px; }
[data-corners="sharp"] .ht-87-asel { border-radius: 4px; }
[data-corners="sharp"] .ht-88-day { border-radius: 2px; }
[data-corners="sharp"] .ht-88-loading { border-radius: 3px; }
[data-corners="sharp"] .ht-88-field { border-radius: 3px; }
[data-corners="sharp"] .ht-88-pop { border-radius: 5px; }
[data-corners="sharp"] .ht-88-preset { border-radius: 3px; }
[data-corners="sharp"] .ht-88-time { border-radius: 3px; }
[data-corners="sharp"] .ht-89-dt { border-radius: 4px; }
[data-corners="sharp"] .ht-89-sort { border-radius: 2px; }
[data-corners="sharp"] .ht-89-ba { border-radius: 2px; }
[data-corners="sharp"] .ht-89-pg select { border-radius: 3px; }
[data-corners="sharp"] .ht-89-stat { border-radius: 5px; }
[data-corners="sharp"] .ht-89-lg i, [data-corners="sharp"] .ht-89-tip i { border-radius: 2px; }
[data-corners="sharp"] .ht-89-tip { border-radius: 3px; }
[data-corners="sharp"] .ht-90-file { border-radius: 4px; }
[data-corners="sharp"] .ht-90-open { border-radius: 3px; }
[data-corners="sharp"] .ht-90-ft { border-radius: 3px; }
[data-corners="sharp"] .ht-90-lb { border-radius: 5px; }
[data-corners="sharp"] .ht-90-img.th { border-radius: 3px; }
[data-corners="sharp"] .ht-90-strip .th { border-radius: 2px; }
[data-corners="sharp"] .ht-90-doc { border-radius: 5px; }
[data-corners="sharp"] .ht-90-page { border-radius: 2px; }
[data-corners="sharp"] .ht-90-page s { border-radius: 2px; }
[data-corners="sharp"] .ht-90-ph1 { border-radius: 2px; }
[data-corners="sharp"] .ht-90-ph2 { border-radius: 2px; }
[data-corners="sharp"] .ht-92-oi .ht-92-main { border-radius: 2px; }
[data-corners="sharp"] .ht-92-x { border-radius: 2px; }
[data-corners="sharp"] .ht-92-shb { border-radius: 2px; }
[data-corners="sharp"] .ht-92-act { border-radius: 2px; }
[data-corners="sharp"] .ht-92-pb { border-radius: 2px; }
[data-corners="sharp"] .ht-94-card { border-radius: 5px; }
[data-corners="sharp"] .ht-94-mark { border-radius: 4px; }
[data-corners="sharp"] .ht-94-card .inp { border-radius: 3px; }
[data-corners="sharp"] .ht-94-link { border-radius: 2px; }
[data-corners="sharp"] .ht-94-tenant { border-radius: 4px; }
[data-corners="sharp"] .ht-94-tile { border-radius: 3px; }
[data-corners="sharp"] .ht-96-map { border-radius: 5px; }
[data-corners="sharp"] .ht-96-layers { border-radius: 5px; }
[data-corners="sharp"] .ht-96-layer { border-radius: 3px; }
[data-corners="sharp"] .ht-96-ctl { border-radius: 4px; }
[data-corners="sharp"] .ht-96-legend { border-radius: 4px; }
[data-corners="sharp"] .ht-96-state:not(.ht-96-loading) > .ht-86-empty { border-radius: 5px; }
[data-corners="round"] .ht-sheet { border-radius: 18px; }
[data-corners="round"] .sheet { border-radius: 18px; }
[data-corners="round"] .mk { border-radius: 9px; }
[data-corners="round"] .ib { border-radius: 10px; }
[data-corners="round"] .kbd { border-radius: 6px; }
[data-corners="round"] .btn { border-radius: 12px; }
[data-corners="round"] .btn2 { border-radius: 12px; }
[data-corners="round"] .chip { border-radius: 10px; }
[data-corners="round"] .prod { border-radius: 9px; }
[data-corners="round"] .pl { border-radius: 6px; }
[data-corners="round"] .seg { border-radius: 12px; }
[data-corners="round"] .seg span { border-radius: 9px; }
[data-corners="round"] .ni { border-radius: 9px; }
[data-corners="round"] .sbr .ib { border-radius: 14px; }
[data-corners="round"] .vtabs span { border-radius: 9px; }
[data-corners="round"] .hint { border-radius: 15px; }
[data-corners="round"] .ptok { border-radius: 12px; }
[data-corners="round"] .ptok span { border-radius: 8px; }
[data-corners="round"] .cbx { border-radius: 6px; }
[data-corners="round"] .col { border-radius: 18px; }
[data-corners="round"] .card { border-radius: 15px; }
[data-corners="round"] .cempty { border-radius: 15px; }
[data-corners="round"] .pkh .av { border-radius: 15px; }
[data-corners="round"] .pkn { border-radius: 15px; }
[data-corners="round"] .selbar { border-radius: 18px; }
[data-corners="round"] .selbar .selc { border-radius: 12px; }
[data-corners="round"] .pop { border-radius: 18px; }
[data-corners="round"] .inp { border-radius: 12px; }
[data-corners="round"] .opt { border-radius: 12px; }
[data-corners="round"] .cb { border-radius: 6px; }
[data-corners="round"] .dnote { border-radius: 15px; }
[data-corners="round"] .avbig { border-radius: 21px; }
[data-corners="round"] .flowc { border-radius: 12px; }
[data-corners="round"] .steps { border-radius: 9px; }
[data-corners="round"] .stp { border-radius: 8px; }
[data-corners="round"] .hl { border-radius: 18px; }
[data-corners="round"] .wt { border-radius: 10px; }
[data-corners="round"] .wr { border-radius: 12px; }
[data-corners="round"] .tl { border-radius: 18px; }
[data-corners="round"] .af span { border-radius: 9px; }
[data-corners="round"] .composer { border-radius: 18px; }
[data-corners="round"] .inst .av { border-radius: 14px; }
[data-corners="round"] .th { border-radius: 12px; }
[data-corners="round"] .th .cap { border-radius: 6px; }
[data-corners="round"] .mcal span { border-radius: 9px; }
[data-corners="round"] .wh1 .wt { border-radius: 15px; }
[data-corners="round"] .lt { border-radius: 18px; }
[data-corners="round"] .sel { border-radius: 10px; }
[data-corners="round"] .qty { border-radius: 10px; }
[data-corners="round"] .note2 { border-radius: 15px; }
[data-corners="round"] .mi { border-radius: 16px; }
[data-corners="round"] .mapw { border-radius: 18px; }
[data-corners="round"] .mapw .road { border-radius: 6px; }
[data-corners="round"] .pick { border-radius: 18px; }
[data-corners="round"] .bigok { border-radius: 21px; }
[data-corners="round"] .box { border-radius: 18px; }
[data-corners="round"] .acc { border-radius: 18px; }
[data-corners="round"] .lock { border-radius: 15px; }
[data-corners="round"] .pf { border-radius: 10px; }
[data-corners="round"] .pf span { border-radius: 8px; }
[data-corners="round"] .ta { border-radius: 14px; }
[data-corners="round"] .ctx { border-radius: 18px; }
[data-corners="round"] .msg.mail p { border-radius: 15px; }
[data-corners="round"] .sumb { border-radius: 18px; }
[data-corners="round"] .ev { border-radius: 9px; }
[data-corners="round"] .scard { border-radius: 18px; }
[data-corners="round"] .pal { border-radius: 21px; }
[data-corners="round"] .pc2 { border-radius: 12px; }
[data-corners="round"] .toast { border-radius: 15px; }
[data-corners="round"] .fch { border-radius: 10px; }
[data-corners="round"] .fpop { border-radius: 15px; }
[data-corners="round"] .fo2 { border-radius: 9px; }
[data-corners="round"] .isrch { border-radius: 10px; }
[data-corners="round"] .isrch.lg { border-radius: 12px; }
[data-corners="round"] .ht-ibx { border-radius: 9px; }
[data-corners="round"] .list { border-radius: 15px; }
[data-corners="round"] .stt::before { border-radius: 14px; }
[data-corners="round"] .logo { border-radius: 10px; }
[data-corners="round"] .ht-40-before::before, [data-corners="round"] .ht-40-after::after { border-radius: 4px; }
[data-corners="round"] .blogo { border-radius: 12px; }
[data-corners="round"] .blogo.sm { border-radius: 9px; }
[data-corners="round"] .blogo.lg { border-radius: 24px; }
[data-corners="round"] .blogo.xl { border-radius: 15px; }
[data-corners="round"] .hd-pick { border-radius: 15px; }
[data-corners="round"] .hd-pick .th { border-radius: 12px; }
[data-corners="round"] .hd-pick .nm em > span { border-radius: 8px; }
[data-corners="round"] .hd-rooms { border-radius: 15px; }
[data-corners="round"] .hd-em { border-radius: 15px; }
[data-corners="round"] .hd-call { border-radius: 15px; }
[data-corners="round"] .ht-hpd-cv { border-radius: 18px; }
[data-corners="round"] .hd-rad { border-radius: 3px; }
[data-corners="round"] .hd-pipe { border-radius: 3px; }
[data-corners="round"] .hd-dev.hp { border-radius: 9px; }
[data-corners="round"] .hd-pin { border-radius: 99px 99px 99px 3px; }
[data-corners="round"] .hd-insp { border-radius: 18px; }
[data-corners="round"] .hd-tbl { border-radius: 18px; }
[data-corners="round"] .ht-75-ed { border-radius: 15px; }
[data-corners="round"] .ht-75-mf { border-radius: 9px; }
[data-corners="round"] .ht-75-menu { border-radius: 18px; }
[data-corners="round"] .ht-75-link { border-radius: 18px; }
[data-corners="round"] .ht-76-ref { border-radius: 8px; }
[data-corners="round"] .qcust { border-radius: 15px; }
[data-corners="round"] .otab { border-radius: 15px; }
[data-corners="round"] .otab .ht-80-lt { border-radius: 9px; }
[data-corners="round"] .qstep { border-radius: 10px; }
[data-corners="round"] .qres { border-radius: 15px; }
[data-corners="round"] .qbun { border-radius: 18px; }
[data-corners="round"] .qsum { border-radius: 18px; }
[data-corners="round"] .qdep { border-radius: 12px; }
[data-corners="round"] .qmg .trk { border-radius: 6px; }
[data-corners="round"] .qmg .trk i { border-radius: 6px; }
[data-corners="round"] .ccard { border-radius: 18px; }
[data-corners="round"] .cadd { border-radius: 15px; }
[data-corners="round"] .cadd .ht-80-box { border-radius: 8px; }
[data-corners="round"] .ht-80-list { border-radius: 15px; }
[data-corners="round"] .ht-80-thumb { border-radius: 14px; }
[data-corners="round"] .ht-80-ctic { border-radius: 12px; }
[data-corners="round"] .ht-80-ib2, [data-corners="round"] button.ht-80-ib2 { border-radius: 9px; }
[data-corners="round"] .ht-80-chip { border-radius: 10px; }
[data-corners="round"] .ht-80-tch { border-radius: 10px; }
[data-corners="round"] .ht-80-tres { border-radius: 15px; }
[data-corners="round"] .ht-80-tr { border-radius: 12px; }
[data-corners="round"] .ht-81-kind { border-radius: 9px; }
[data-corners="round"] .ht-81-inh { border-radius: 9px; }
[data-corners="round"] .ht-81-unit { border-radius: 14px; }
[data-corners="round"] .ht-81-erp > button { border-radius: 10px; }
[data-corners="round"] .ht-81-gt { border-radius: 18px; }
[data-corners="round"] .ht-81-tile { border-radius: 18px; }
[data-corners="round"] .ht-81-tile .th2 { border-radius: 12px; }
[data-corners="round"] .ht-81-bcard { border-radius: 21px; }
[data-corners="round"] .ht-81-bcard .rg > span { border-radius: 9px; }
[data-corners="round"] .ht-81-tli { border-radius: 12px; }
[data-corners="round"] .ht-81-tli .wt { border-radius: 10px; }
[data-corners="round"] .ht-82-bcard { border-radius: 15px; }
[data-corners="round"] .ht-82-ib { border-radius: 9px; }
[data-corners="round"] .ht-82-btn { border-radius: 12px; }
[data-corners="round"] .ht-82-slot { border-radius: 15px; }
[data-corners="round"] .ht-82-sn { border-radius: 12px; }
[data-corners="round"] .ht-82-thumb { border-radius: 10px; }
[data-corners="round"] .ht-82-ddb { border-radius: 10px; }
[data-corners="round"] .ht-82-dd { border-radius: 15px; }
[data-corners="round"] .ht-82-ddo { border-radius: 9px; }
[data-corners="round"] .ht-82-rv { border-radius: 12px; }
[data-corners="round"] .ht-82-rs .rp { border-radius: 9px; }
[data-corners="round"] .ht-82-rcard { border-radius: 15px; }
[data-corners="round"] .ht-82-tst { border-radius: 18px; }
[data-corners="round"] .ht-82-tres { border-radius: 15px; }
[data-corners="round"] .ht-82-tr { border-radius: 12px; }
[data-corners="round"] .ht-83-dot { border-radius: 14px; }
[data-corners="round"] .ht-83-blk { border-radius: 12px; }
[data-corners="round"] .ht-83-blk mark { border-radius: 4px; }
[data-corners="round"] .ht-83-callout { border-radius: 18px; }
[data-corners="round"] .ht-83-pblk { border-radius: 18px; }
[data-corners="round"] .ht-83-pblk .thumb { border-radius: 14px; }
[data-corners="round"] .ht-83-slash { border-radius: 12px; }
[data-corners="round"] .ht-83-menu { border-radius: 18px; }
[data-corners="round"] .ht-83-menu button { border-radius: 10px; }
[data-corners="round"] .ht-83-pubst { border-radius: 15px; }
[data-corners="round"] .ht-83-chglist li::before { border-radius: 14px; }
[data-corners="round"] .ht-84-inp { border-radius: 14px; }
[data-corners="round"] .ht-84-pfx { border-radius: 14px; }
[data-corners="round"] .ht-84-cover { border-radius: 15px; }
[data-corners="round"] .ht-84-cover::after { border-radius: 6px 6px 3px 3px; }
[data-corners="round"] .ht-84-serp { border-radius: 18px; }
[data-corners="round"] .ht-84-mcard { border-radius: 15px; }
[data-corners="round"] .ht-84-mcard .im::after { border-radius: 6px; }
[data-corners="round"] .ht-84-mcard .alt input { border-radius: 9px; }
[data-corners="round"] .ht-84-lprod { border-radius: 18px; }
[data-corners="round"] .ht-84-lprod .th { border-radius: 12px; }
[data-corners="round"] .ht-84-tabs > button { border-radius: 12px; }
[data-corners="round"] .ht-85-tip { border-radius: 10px; }
[data-corners="round"] .ht-85-tip::after { border-radius: 3px; }
[data-corners="round"] .ht-85-tip.ht-85-rich { border-radius: 18px; }
[data-corners="round"] .ht-85-menu { border-radius: 18px; }
[data-corners="round"] .ht-85-item { border-radius: 12px; }
[data-corners="round"] .ht-85-dlg { border-radius: 18px; }
[data-corners="round"] .ht-86-emic { border-radius: 15px; }
[data-corners="round"] .ht-86-sk { border-radius: 9px; }
[data-corners="round"] .ht-86-sk-block { border-radius: 15px; }
[data-corners="round"] .ht-86-skrow .ht-86-skbox { border-radius: 6px; }
[data-corners="round"] .ht-86-erric { border-radius: 18px; }
[data-corners="round"] .ht-86-errpre { border-radius: 12px; }
[data-corners="round"] .ht-87-rg-list .ht-87-ro { border-radius: 12px; }
[data-corners="round"] .ht-87-rg-card .ht-87-ro { border-radius: 15px; }
[data-corners="round"] .ht-87-tag { border-radius: 9px; }
[data-corners="round"] .ht-87-tag button { border-radius: 6px; }
[data-corners="round"] .ht-87-menu { border-radius: 18px; }
[data-corners="round"] .ht-87-tip { border-radius: 9px; }
[data-corners="round"] .ht-87-oc { border-radius: 12px; }
[data-corners="round"] .ht-87-bgi:only-child { border-radius: 12px; }
[data-corners="round"] .ht-87-sw { border-radius: 6px; }
[data-corners="round"] .ht-87-sq { border-radius: 8px; }
[data-corners="round"] .ht-87-cpp { border-radius: 18px; }
[data-corners="round"] .ht-87-swt { border-radius: 12px; }
[data-corners="round"] .ht-87-dz { border-radius: 18px; }
[data-corners="round"] .ht-87-di { border-radius: 15px; }
[data-corners="round"] .ht-87-ares { border-radius: 18px; }
[data-corners="round"] .ht-87-lnk { border-radius: 6px; }
[data-corners="round"] .ht-87-asel { border-radius: 15px; }
[data-corners="round"] .ht-88-day { border-radius: 9px; }
[data-corners="round"] .ht-88-loading { border-radius: 12px; }
[data-corners="round"] .ht-88-field { border-radius: 12px; }
[data-corners="round"] .ht-88-pop { border-radius: 18px; }
[data-corners="round"] .ht-88-preset { border-radius: 10px; }
[data-corners="round"] .ht-88-time { border-radius: 10px; }
[data-corners="round"] .ht-89-dt { border-radius: 15px; }
[data-corners="round"] .ht-89-sort { border-radius: 6px; }
[data-corners="round"] .ht-89-ba { border-radius: 9px; }
[data-corners="round"] .ht-89-pg select { border-radius: 10px; }
[data-corners="round"] .ht-89-stat { border-radius: 18px; }
[data-corners="round"] .ht-89-lg i, [data-corners="round"] .ht-89-tip i { border-radius: 4px; }
[data-corners="round"] .ht-89-tip { border-radius: 12px; }
[data-corners="round"] .ht-90-file { border-radius: 15px; }
[data-corners="round"] .ht-90-open { border-radius: 12px; }
[data-corners="round"] .ht-90-ft { border-radius: 12px; }
[data-corners="round"] .ht-90-lb { border-radius: 18px; }
[data-corners="round"] .ht-90-img.th { border-radius: 12px; }
[data-corners="round"] .ht-90-strip .th { border-radius: 9px; }
[data-corners="round"] .ht-90-doc { border-radius: 18px; }
[data-corners="round"] .ht-90-page { border-radius: 4px; }
[data-corners="round"] .ht-90-page s { border-radius: 4px; }
[data-corners="round"] .ht-90-ph1 { border-radius: 4px; }
[data-corners="round"] .ht-90-ph2 { border-radius: 4px; }
[data-corners="round"] .ht-92-oi .ht-92-main { border-radius: 9px; }
[data-corners="round"] .ht-92-x { border-radius: 8px; }
[data-corners="round"] .ht-92-drop-before::before, [data-corners="round"] .ht-92-drop-after::after { border-radius: 3px; }
[data-corners="round"] .ht-92-shb { border-radius: 8px; }
[data-corners="round"] .ht-92-act { border-radius: 8px; }
[data-corners="round"] .ht-92-pb { border-radius: 9px; }
[data-corners="round"] .ht-94-card { border-radius: 18px; }
[data-corners="round"] .ht-94-mark { border-radius: 15px; }
[data-corners="round"] .ht-94-card .inp { border-radius: 12px; }
[data-corners="round"] .ht-94-eye.on::after { border-radius: 3px; }
[data-corners="round"] .ht-94-link { border-radius: 8px; }
[data-corners="round"] .ht-94-tenant { border-radius: 15px; }
[data-corners="round"] .ht-94-tile { border-radius: 12px; }
[data-corners="round"] .ht-96-map { border-radius: 18px; }
[data-corners="round"] .ht-96-layers { border-radius: 18px; }
[data-corners="round"] .ht-96-layer { border-radius: 10px; }
[data-corners="round"] .ht-96-ctl { border-radius: 15px; }
[data-corners="round"] .ht-96-legend { border-radius: 15px; }
[data-corners="round"] .ht-96-state:not(.ht-96-loading) > .ht-86-empty { border-radius: 18px; }

/* added for dashboard-v3: wrapping record definition values */
.at.ht-definition-wrap { align-items: start; }
.at.ht-definition-wrap dd { display: block; white-space: normal; overflow-wrap: anywhere; overflow: visible; }

/* added for dashboard-v3: pipeline stage editor */
.ht-stage-editor { display:grid; grid-auto-flow:column; grid-auto-columns:minmax(250px,1fr); align-items:start; gap:12px; min-width:0; overflow-x:auto; padding-bottom:8px; }
.ht-stage-column { background:var(--well); border-radius:12px; padding:8px; min-width:0; display:flex; flex-direction:column; gap:8px; }
.ht-stage-heading { display:flex; align-items:center; gap:8px; padding:0 6px; min-height:30px; }
.ht-stage-heading > span:not(.ht-stage-dot) { color:var(--ts); font-size:11px; }
.ht-stage-dot { width:10px; height:10px; border-radius:50%; flex-shrink:0; }
.ht-stage-count { margin-left:auto; color:var(--tq); font-variant-numeric:tabular-nums; font-size:12px; }
.ht-stage-entry { margin:0; padding:0 6px 2px; color:var(--ts); font-size:12px; }
.ht-stage-list { display:flex; flex-direction:column; gap:5px; }
.ht-stage-sub { background:var(--sheet); border:1px solid var(--bd); border-radius:10px; padding:9px 10px 5px; min-width:0; }
.ht-stage-sub[draggable="true"] { cursor:grab; }
.ht-stage-sub:active { cursor:grabbing; }
.ht-stage-sub-open { display:grid; grid-template-columns:16px minmax(0,1fr) auto; gap:5px 7px; align-items:center; padding:0; border:0; background:transparent; color:var(--tp); font:inherit; text-align:left; width:100%; cursor:pointer; }
.ht-stage-sub-open > b { font-size:13px; overflow-wrap:anywhere; }
.ht-stage-sub-detail { grid-column:2 / -1; color:var(--ts); font-size:11px; line-height:1.4; }
.ht-stage-action { display:flex; align-items:center; gap:4px; color:var(--ts); font-size:11px; margin:5px 0 0 23px; }
.ht-stage-moves { display:flex; align-items:center; justify-content:flex-end; gap:3px; color:var(--tq); }
.ht-stage-moves > .ic-xs { margin-right:auto; }
.ht-stage-fields { display:flex; flex-direction:column; gap:14px; }
.ht-stage-field-actions { display:flex; flex-wrap:wrap; gap:8px; }
@media (max-width:900px) { .ht-stage-editor { grid-auto-flow:row; grid-template-columns:minmax(0,1fr); grid-auto-columns:unset; overflow-x:visible; } }

/* added for dashboard-v3: automation flow canvas and step cards */
.ht-auto-canvas { flex:1; min-height:500px; min-width:0; overflow:auto; background-color:var(--app); background-image:radial-gradient(circle,color-mix(in oklab,var(--tq) 26%,transparent) 1px,transparent 1.4px); background-size:20px 20px; }
.ht-auto-flow { width:max-content; min-width:100%; box-sizing:border-box; padding:28px 24px 80px; display:flex; flex-direction:column; align-items:center; }
.ht-auto-sequence,.ht-auto-node { display:flex; flex-direction:column; align-items:center; }
.ht-auto-step { width:310px; box-sizing:border-box; display:flex; gap:11px; align-items:flex-start; padding:12px 13px; border:1px solid var(--bd); border-radius:14px; background:var(--sheet); color:var(--tp); font:inherit; text-align:left; cursor:pointer; }
.ht-auto-step:hover { border-color:var(--tq); }
.ht-auto-step.is-selected,.ht-auto-step:focus-visible { outline:2px solid var(--accent); outline-offset:2px; }
.ht-auto-step.is-trigger { border-top:3px solid var(--accent); }
.ht-auto-step-icon { flex-shrink:0; display:grid; place-items:center; width:28px; height:28px; border-radius:7px; color:var(--info-fg); background:var(--info-bg); }
.ht-auto-step-body { min-width:0; display:flex; flex-direction:column; gap:3px; overflow-wrap:anywhere; }
.ht-auto-step-body small { color:var(--ts); font-size:11px; }
.ht-auto-step-body strong { font-size:13px; font-weight:600; }
.ht-auto-step-description { font-size:12px; color:var(--ts); }
.ht-auto-step-tags { display:flex; flex-wrap:wrap; gap:4px; margin-top:4px; }
.ht-auto-connector { display:flex; justify-content:center; align-items:center; height:34px; position:relative; }
.ht-auto-connector::before { content:""; position:absolute; top:0; bottom:0; border-left:1px solid var(--bd); }
.ht-auto-add { z-index:1; width:24px; height:24px; border:1px solid var(--bd); background:var(--sheet); color:var(--ts); border-radius:50%; display:grid; place-items:center; cursor:pointer; }
.ht-auto-add:hover,.ht-auto-add:focus-visible { color:var(--accent); outline:2px solid var(--accent); outline-offset:2px; }
.ht-auto-branches { display:flex; align-items:flex-start; gap:24px; padding-top:22px; }
.ht-auto-branch { display:flex; flex-direction:column; align-items:center; position:relative; border-top:1px solid var(--bd); padding-top:14px; }
.ht-auto-outcome { background:var(--well); color:var(--tp); border:1px solid var(--bd); border-radius:12px; padding:2px 9px; font-size:11px; }
@media(max-width:600px) { .ht-auto-step { width:280px; } .ht-auto-flow { padding-inline:16px; } }

/* added for dashboard-v3: phone controls */
.ht-phone-dock,.ht-phone-incoming{width:340px;max-width:100%;border-radius:16px;background:var(--raise);color:var(--tp);box-shadow:var(--pop);font:13px/1.45 var(--sans);overflow:hidden;border:1px solid var(--bd);}
.ht-phone-floating{position:fixed;right:20px;bottom:20px;z-index:90;max-height:calc(100dvh - 32px);overflow-y:auto;}
.ht-phone-preview-label{padding:6px 16px;background:var(--well);color:var(--ts);font-size:11px;}
.ht-phone-header{display:flex;align-items:center;gap:11px;padding:16px 16px 10px;}
.ht-phone-identity{flex:1;min-width:0;display:flex;flex-direction:column;overflow-wrap:anywhere;}
.ht-phone-identity b{font-weight:650;font-size:14px;}
.ht-phone-identity span{color:var(--ts);font-size:12px;font-variant-numeric:tabular-nums;}
.ht-phone-context{display:flex;align-items:center;gap:7px;margin:0 16px;padding:8px 10px;border-radius:9px;background:var(--well);color:var(--ts);font-size:12px;}
.ht-phone-context-text{flex:1;min-width:0;}
.ht-phone-meta{display:flex;flex-wrap:wrap;align-items:center;gap:6px;padding:10px 16px 0;color:var(--tq);font-size:11px;}
.ht-phone-notes{margin:10px 16px 0;}
.ht-phone-controls{display:flex;justify-content:space-between;gap:4px;padding:12px;}
.ht-phone-end{color:var(--bad-fg);background:var(--bad-bg);}
.ht-phone-keypad{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:6px;padding:12px 16px 0;}
.ht-phone-keypad output{grid-column:1/-1;min-height:24px;overflow-wrap:anywhere;color:var(--ts);}
.ht-phone-transfer{display:flex;flex-direction:column;gap:6px;padding:12px 16px 0;}
.ht-phone-wrap{display:flex;flex-direction:column;gap:12px;padding:12px 16px 16px;}
.ht-phone-follow-up{display:flex;align-items:center;gap:8px;color:var(--ts);font-size:12px;}
.ht-phone-actions{display:flex;gap:8px;padding:14px 16px 16px;}
.ht-phone-wrap .ht-phone-actions{padding:0;}
.ht-phone-actions>*{flex:1;}
.ht-phone-incoming-banner{display:flex;align-items:center;gap:7px;padding:12px 16px;background:var(--accent);color:var(--on-accent);font-weight:600;font-size:12px;}
.ht-phone-open{text-align:center;padding:0 16px 14px;}
.ht-phone-number{position:relative;display:inline-flex;align-items:center;border:0;border-bottom:1px dotted var(--tq);padding:0;background:transparent;font:inherit;color:inherit;cursor:pointer;}
.ht-phone-number-hint{display:none;position:absolute;left:0;bottom:calc(100% + 4px);align-items:center;gap:4px;padding:5px 8px;border-radius:7px;white-space:nowrap;background:var(--raise);box-shadow:var(--pop);color:var(--tp);font-size:12px;z-index:5;}
.ht-phone-number:hover .ht-phone-number-hint,.ht-phone-number:focus-visible .ht-phone-number-hint{display:inline-flex;}
.ht-phone-number:focus-visible{outline:2px solid var(--accent);outline-offset:3px;}
.ht-phone-number:disabled{cursor:default;color:var(--tq);}
.ht-phone-number:disabled .ht-phone-number-hint{display:none;}
@media(max-width:640px){.ht-phone-floating{left:12px;right:12px;bottom:12px;width:auto;max-width:calc(100vw - 24px);}}

/* added for dashboard-v3: automation run row */
.ht-auto-run { border-bottom: 1px solid var(--bd2); }
.ht-auto-run-summary { display: grid; grid-template-columns: minmax(180px, 1.4fr) minmax(100px, 1fr) minmax(180px, 1.4fr) 120px; align-items: center; gap: 16px; width: 100%; padding: 14px 16px; border: 0; background: transparent; color: var(--t); font: inherit; text-align: left; cursor: pointer; }
.ht-auto-run-summary:hover { background: var(--hover); }
.ht-auto-run-summary:focus-visible { outline: 2px solid var(--accent); outline-offset: -2px; }
.ht-auto-run-summary > span { min-width: 0; overflow-wrap: anywhere; }
.ht-auto-run-summary strong { display: block; font-weight: 600; }
.ht-auto-run-summary small { display: block; margin-top: 3px; color: var(--ts); font-size: 12px; }
.ht-auto-run-detail { padding: 8px 16px 16px; }
@media (max-width: 900px) { .ht-auto-run-summary { grid-template-columns: minmax(0, 1fr) auto; gap: 10px; } .ht-auto-run-summary > span:first-child { grid-column: 1 / -1; } .ht-auto-run-summary > span:nth-child(3) { grid-column: 1 / -1; } }