/* Baiord help centre — live product demos.

   Each demo is the real app at a 1440 × 900 laptop viewport: the actual
   sidebar (src/components/shell/sidebar.tsx), top bar (topbar.tsx), page
   header, orders table, sheet, inputs, buttons and Sonner toast, in the pixel
   values their Tailwind classes resolve to and the light tokens from
   src/app/globals.css. help.js scales the window to the page and plays a
   short loop of real work in it. Each block names the component it mirrors —
   change it only by checking that component.

   Loaded on help pages only. */

.hd {
  /* the light tokens, globals.css :root */
  --bg: oklch(0.968 0.002 286); --fg: oklch(0.22 0.003 286); --card: #fff; --popover: #fff;
  --mut: oklch(0.552 0.005 286); --bd: oklch(0.888 0.003 286); --sec: oklch(0.968 0.002 286);
  --acc: oklch(0.951 0.003 286); --side: oklch(0.985 0.001 286);
  --prim: oklch(0.915 0.222 130.7); --prim-fg: oklch(0.22 0.003 286); --link: oklch(0.52 0.15 130.7);
  --ok: oklch(0.577 0.155 152); --warn: oklch(0.702 0.161 62); --bad: oklch(0.586 0.226 27.5);
  --sh-card: 0 1px 3px rgb(0 0 0 / 0.04), 0 4px 16px rgb(0 0 0 / 0.04);
  --sh-raised: 0 4px 12px rgb(0 0 0 / 0.06), 0 16px 40px rgb(0 0 0 / 0.08);
  position: relative; margin: 32px 0 36px;
}
/* The window sits in the article column, beside the contents rail, and scales
   to fit it. On a phone it runs edge to edge. */
@media (max-width: 860px) { .help-article .hd { margin-left: -18px; margin-right: -18px; } }

.hd-stage {
  container-type: inline-size;
  position: relative; aspect-ratio: 1440 / var(--hd-h, 900); overflow: hidden;
  border-radius: 16px; background: #ececee;
  box-shadow: 0 0 0 1px rgba(15,23,42,0.08), 0 30px 70px -24px rgba(15,23,42,0.32), 0 8px 20px rgba(15,23,42,0.06);
}
@media (max-width: 860px) { .hd-stage { border-radius: 0; } }

.hd-app {
  position: absolute; left: 0; top: 0; width: 1440px; height: calc(var(--hd-h, 900) * 1px);
  transform-origin: 0 0; transform: translate(var(--tx, 0px), var(--ty, 0px)) scale(var(--k, 0.5));
  display: flex; flex-direction: column; overflow: hidden; text-align: left;
  font-family: -apple-system, BlinkMacSystemFont, "SF Pro Text", "Inter", "Helvetica Neue", Arial, sans-serif;
  font-size: 14px; line-height: 1.5; letter-spacing: -0.006em; color: var(--fg); background: var(--bg);
  font-variant-numeric: tabular-nums; -webkit-font-smoothing: antialiased;
}
/* Without script there is nothing to set --k, so step it from the frame's own
   width. A step under-fills by a few pixels at most; it never overflows. */
@container (min-width: 300px) { .hd-app { --k: 0.2083; } }
@container (min-width: 320px) { .hd-app { --k: 0.2222; } }
@container (min-width: 340px) { .hd-app { --k: 0.2361; } }
@container (min-width: 360px) { .hd-app { --k: 0.2500; } }
@container (min-width: 380px) { .hd-app { --k: 0.2639; } }
@container (min-width: 400px) { .hd-app { --k: 0.2778; } }
@container (min-width: 420px) { .hd-app { --k: 0.2917; } }
@container (min-width: 440px) { .hd-app { --k: 0.3056; } }
@container (min-width: 460px) { .hd-app { --k: 0.3194; } }
@container (min-width: 480px) { .hd-app { --k: 0.3333; } }
@container (min-width: 500px) { .hd-app { --k: 0.3472; } }
@container (min-width: 520px) { .hd-app { --k: 0.3611; } }
@container (min-width: 540px) { .hd-app { --k: 0.3750; } }
@container (min-width: 560px) { .hd-app { --k: 0.3889; } }
@container (min-width: 580px) { .hd-app { --k: 0.4028; } }
@container (min-width: 600px) { .hd-app { --k: 0.4167; } }
@container (min-width: 620px) { .hd-app { --k: 0.4306; } }
@container (min-width: 640px) { .hd-app { --k: 0.4444; } }
@container (min-width: 660px) { .hd-app { --k: 0.4583; } }
@container (min-width: 680px) { .hd-app { --k: 0.4722; } }
@container (min-width: 700px) { .hd-app { --k: 0.4861; } }
@container (min-width: 720px) { .hd-app { --k: 0.5000; } }
@container (min-width: 740px) { .hd-app { --k: 0.5139; } }
@container (min-width: 760px) { .hd-app { --k: 0.5278; } }
@container (min-width: 780px) { .hd-app { --k: 0.5417; } }
@container (min-width: 800px) { .hd-app { --k: 0.5556; } }
@container (min-width: 820px) { .hd-app { --k: 0.5694; } }
@container (min-width: 840px) { .hd-app { --k: 0.5833; } }
@container (min-width: 860px) { .hd-app { --k: 0.5972; } }
@container (min-width: 880px) { .hd-app { --k: 0.6111; } }
@container (min-width: 900px) { .hd-app { --k: 0.6250; } }
@container (min-width: 920px) { .hd-app { --k: 0.6389; } }
@container (min-width: 940px) { .hd-app { --k: 0.6528; } }
@container (min-width: 960px) { .hd-app { --k: 0.6667; } }
@container (min-width: 980px) { .hd-app { --k: 0.6806; } }
@container (min-width: 1000px) { .hd-app { --k: 0.6944; } }
@container (min-width: 1020px) { .hd-app { --k: 0.7083; } }
@container (min-width: 1040px) { .hd-app { --k: 0.7222; } }
@container (min-width: 1060px) { .hd-app { --k: 0.7361; } }
@container (min-width: 1080px) { .hd-app { --k: 0.7500; } }
@container (min-width: 1100px) { .hd-app { --k: 0.7639; } }
.hd-app * { box-sizing: border-box; }
.hd-app p, .hd-app dl, .hd-app dd, .hd-app ol { margin: 0; padding: 0; }
.hd-app li { list-style: none; padding: 0; margin: 0; }
.hd-app li::before { content: none; }
.hd-app .ic { width: 16px; height: 16px; flex: none; }
.hd-app .mut { color: var(--mut); }

.hd-cap { margin: 12px 0 0 !important; font-size: 0.8125rem !important; color: var(--muted, #64748b) !important; line-height: 1.55 !important; }
.hd-cap b { color: var(--ink, #0f172a); font-weight: 600; }
.hd-cap .live { display: inline-flex; align-items: center; gap: 6px; margin-right: 6px; font-weight: 600; color: #4d7c0f; }
.hd-cap .live i { width: 6px; height: 6px; border-radius: 50%; background: #84cc16; box-shadow: 0 0 0 3px rgba(132,204,22,0.18); }

/* — browser chrome — */
.hd-chrome { flex: none; position: relative; height: 44px; display: flex; align-items: center; gap: 8px; padding: 0 16px; background: #ececee; border-bottom: 1px solid #dcdce0; }
.hd-chrome i { width: 12px; height: 12px; border-radius: 50%; }
.hd-chrome i:nth-child(1) { background: #ff5f57; } .hd-chrome i:nth-child(2) { background: #febc2e; } .hd-chrome i:nth-child(3) { background: #28c840; }
.hd-url { position: absolute; left: 50%; top: 8px; transform: translateX(-50%); width: 460px; height: 28px; border-radius: 8px; display: flex; align-items: center; justify-content: center; gap: 6px; background: #fff; font-size: 12.5px; color: #3a3a3c; letter-spacing: 0; }
.hd-url .ic { width: 11px; height: 11px; color: var(--mut); }

.hd-win { position: relative; flex: 1; min-height: 0; display: flex; }

/* — sidebar.tsx — */
.hd-side { flex: none; width: 248px; display: flex; flex-direction: column; background: var(--side); border-right: 1px solid color-mix(in oklch, var(--bd) 60%, transparent); }
.hd-logo { flex: none; height: 64px; display: flex; align-items: center; padding: 0 20px; border-bottom: 1px solid color-mix(in oklch, var(--bd) 60%, transparent); }
.hd-logo svg { width: 160px; height: auto; color: var(--fg); }
.hd-nav { flex: 1; padding: 12px; overflow: hidden; }
.hd-grp + .hd-grp { margin-top: 12px; }
.hd-grp-l { margin-bottom: 4px; padding: 0 12px; font-size: 11px; font-weight: 500; letter-spacing: 0.025em; text-transform: uppercase; color: color-mix(in oklch, var(--mut) 80%, transparent); }
.hd-grp-i { display: grid; gap: 2px; }
.hd-link { position: relative; height: 40px; display: flex; align-items: center; gap: 10px; padding: 0 12px 0 8px; border-radius: 999px; font-size: 13px; font-weight: 500; color: var(--mut); transition: background .2s, color .2s, box-shadow .2s; }
.hd-link > span:first-child { flex: none; width: 28px; height: 28px; display: grid; place-items: center; border-radius: 50%; transition: background .2s; }
.hd-link .ic { width: 16.8px; height: 16.8px; }
.hd-link.on { background: var(--card); color: var(--fg); box-shadow: var(--sh-card), 0 0 0 1px color-mix(in oklch, var(--bd) 70%, transparent); }
.hd-link.on > span:first-child { background: var(--prim); color: var(--prim-fg); }
.hd-link.pressed { background: var(--acc); color: var(--fg); }
.hd-badge { margin-left: auto; padding: 2px 8px; border-radius: 999px; background: color-mix(in oklch, var(--warn) 15%, transparent); color: var(--warn); font-size: 11px; font-weight: 600; transition: opacity .3s, transform .3s; }
.hd-badge.gone { opacity: 0; transform: scale(0.6); }
.hd-month { margin: 0 12px 8px; padding: 14px; border-radius: 16px; background: var(--card); box-shadow: var(--sh-card), 0 0 0 1px color-mix(in oklch, var(--bd) 60%, transparent); }
.hd-month-k { display: flex; align-items: center; gap: 6px; font-size: 11px; font-weight: 500; color: var(--mut); }
.hd-month-k i { width: 6px; height: 6px; border-radius: 50%; background: var(--prim); }
.hd-month-v { margin-top: 4px; font-size: 18px; line-height: 1.25; font-weight: 600; letter-spacing: -0.02em; }
.hd-month-v span { margin-left: 6px; font-size: 11px; font-weight: 500; letter-spacing: 0; color: var(--mut); }
.hd-month-bar { margin-top: 10px; height: 6px; border-radius: 999px; background: var(--sec); overflow: hidden; }
.hd-month-bar i { display: block; height: 100%; border-radius: inherit; background: var(--prim); transition: width .5s ease-out; }
.hd-month-n { margin-top: 6px; display: flex; justify-content: space-between; font-size: 11px; color: var(--mut); }
.hd-month-n b { font-weight: 500; color: var(--fg); } .hd-month-n b.done { color: var(--ok); }
.hd-foot { padding: 0 12px 16px; display: grid; gap: 2px; }
.hd-conn { margin-top: 8px; display: flex; align-items: center; gap: 8px; padding: 10px 16px; border-radius: 999px; background: var(--sec); font-size: 12px; color: var(--mut); }
.hd-conn i { flex: none; width: 6px; height: 6px; border-radius: 50%; background: oklch(0.696 0.17 162.48); }

/* — topbar.tsx — */
.hd-col { position: relative; flex: 1; min-width: 0; display: flex; flex-direction: column; }
.hd-top { flex: none; height: 64px; display: flex; align-items: center; gap: 12px; padding: 0 28px; border-bottom: 1px solid color-mix(in oklch, var(--bd) 60%, transparent); background: color-mix(in oklch, #fff 72%, transparent); }
.hd-ib { position: relative; width: 36px; height: 36px; display: grid; place-items: center; border-radius: 50%; color: var(--fg); }
.hd-ib em { position: absolute; top: 1px; right: 1px; min-width: 16px; height: 16px; padding: 0 4px; border-radius: 999px; background: var(--bad); color: #fff; font: 500 10px/16px inherit; font-style: normal; text-align: center; }
.hd-ws { display: flex; align-items: center; gap: 6px; height: 32px; padding: 0 12px; border-radius: 999px; font-size: 13px; font-weight: 500; }
.hd-ws .ic { width: 14px; height: 14px; color: var(--mut); }
.hd-flex { flex: 1; }
.hd-search { width: 288px; height: 40px; display: flex; align-items: center; gap: 8px; padding: 0 14px 0 18px; border-radius: 999px; background: var(--sec); color: var(--mut); font-size: 13.5px; white-space: nowrap; overflow: hidden; }
.hd-search kbd { margin-left: auto; padding: 2px 6px; border-radius: 6px; background: #fff; font: 10px ui-monospace, "SF Mono", Menlo, monospace; color: var(--mut); }
.hd-avatar { width: 36px; height: 36px; border-radius: 50%; display: grid; place-items: center; background: var(--sec); font-size: 12px; font-weight: 500; }

/* — app-shell.tsx main, page-header.tsx — */
.hd-main { flex: 1; min-height: 0; padding: 40px; overflow: hidden; }
.hd-ph { margin-bottom: 32px; display: flex; flex-wrap: wrap; align-items: flex-end; justify-content: space-between; gap: 16px; }
.hd-h1 { font-size: 36px; line-height: 1.1; letter-spacing: -0.03em; font-weight: 600; }
.hd-desc { margin-top: 8px !important; font-size: 15px; line-height: 1.625; color: var(--mut); }
.hd-acts { display: flex; gap: 8px; }

/* — ui/button.tsx — */
.hd-btn { display: inline-flex; align-items: center; justify-content: center; gap: 8px; height: 40px; padding: 0 20px; border-radius: 999px; border: 1px solid transparent; font-size: 14px; font-weight: 500; white-space: nowrap; transition: background .2s, transform .12s, opacity .2s; }
.hd-btn .ic { width: 16px; height: 16px; }
.hd-btn.pri { background: var(--prim); color: var(--prim-fg); }
.hd-btn.out { background: var(--card); border-color: var(--bd); color: var(--fg); }
.hd-btn.sm { height: 32px; padding: 0 16px; font-size: 13px; gap: 6px; }
.hd-btn.sm .ic { width: 14px; height: 14px; }
.hd-btn.full { width: 100%; }
.hd-app .pressed { transform: scale(0.97); }
.hd-btn.busy { opacity: 0.6; }

/* — order-period-selector.tsx, order-filter-chips.tsx, order-tabs.tsx — */
.hd-filters { margin-bottom: 20px; display: grid; gap: 16px; }
.hd-pills { display: inline-flex; flex-wrap: wrap; align-items: center; gap: 4px; padding: 4px; border-radius: 999px; background: var(--sec); justify-self: start; }
.hd-pills span { display: inline-flex; align-items: center; gap: 6px; padding: 6px 14px; border-radius: 999px; font-size: 13px; font-weight: 500; color: var(--mut); white-space: nowrap; }
.hd-pills span.on { background: var(--card); color: var(--fg); box-shadow: 0 1px 3px rgb(0 0 0 / 0.08); }
.hd-pills .ic { width: 14px; height: 14px; }
.hd-chips { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; }
.hd-chip { display: inline-flex; align-items: center; gap: 8px; padding: 6px 14px; border-radius: 999px; border: 1px solid var(--bd); font-size: 13px; font-weight: 500; color: var(--mut); }
.hd-chip.zero { border-color: color-mix(in oklch, var(--bd) 60%, transparent); color: color-mix(in oklch, var(--mut) 70%, transparent); }
.hd-chip b { padding: 2px 6px; border-radius: 999px; background: var(--sec); font-size: 11px; font-weight: 400; color: var(--mut); }
.hd-chip.warn b { background: color-mix(in oklch, var(--warn) 15%, transparent); color: var(--warn); }
.hd-bar { margin-bottom: 16px; display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 12px; }
.hd-tabs { display: flex; flex-wrap: wrap; gap: 4px; padding: 4px; border-radius: 999px; background: var(--sec); }
.hd-tabs span { display: flex; align-items: center; gap: 8px; padding: 8px 16px; border-radius: 999px; font-size: 13px; font-weight: 500; color: var(--mut); transition: background .2s, color .2s, box-shadow .2s; }
.hd-tabs span.on { background: var(--card); color: var(--fg); box-shadow: 0 1px 3px rgb(0 0 0 / 0.08); }
.hd-tabs b { padding: 2px 6px; border-radius: 999px; font-size: 11px; font-weight: 500; background: color-mix(in oklch, var(--card) 60%, transparent); color: var(--mut); transition: opacity .3s; }
.hd-tabs b.warn { background: color-mix(in oklch, var(--warn) 15%, transparent); color: var(--warn); }
.hd-tabs b.gone { opacity: 0; }
.hd-tools { display: flex; align-items: center; gap: 8px; }
.hd-field { position: relative; display: flex; align-items: center; height: 44px; width: 100%; padding: 0 14px; border-radius: 12px; border: 1px solid var(--bd); background: var(--card); font-size: 14px; color: var(--fg); white-space: nowrap; overflow: hidden; transition: border-color .15s, box-shadow .15s; }
.hd-field.ph { color: var(--mut); }
.hd-field.focus { border-color: var(--link); box-shadow: 0 0 0 3px color-mix(in oklch, var(--link) 25%, transparent); }
.hd-field.icon { padding-left: 32px; }
.hd-field.icon .ic { position: absolute; left: 10px; width: 14px; height: 14px; color: var(--mut); }
.hd-tools .hd-field { width: 288px; height: 40px; font-size: 13.5px; }
.hd-caret { display: none; width: 1.5px; height: 18px; margin-left: 1px; background: var(--fg); animation: hd-blink 1.05s steps(1) infinite; }
.hd-field.focus .hd-caret { display: inline-block; }
@keyframes hd-blink { 50% { opacity: 0; } }

/* — orders-table.tsx — */
.hd-table { border-radius: 18px; background: var(--card); box-shadow: var(--sh-card); overflow: hidden; }
.hd-table table { width: 100%; border-collapse: collapse; font-size: 14px; margin: 0; }
.hd-table th { padding: 12px 16px; border-bottom: 1px solid color-mix(in oklch, var(--bd) 60%, transparent); font-size: 12px; font-weight: 500; color: var(--mut); text-align: left; white-space: nowrap; text-transform: none; letter-spacing: 0; }
.hd-table td { padding: 14px 16px; border-bottom: 1px solid color-mix(in oklch, var(--bd) 60%, transparent); white-space: nowrap; vertical-align: middle; font-weight: 400; color: var(--fg); }
.hd-table tr:last-child td { border-bottom: 0; }
.hd-table td:first-child { font-weight: 500; }
.hd-table .r { text-align: right; } .hd-table .c { text-align: center; }
.hd-table .mut { color: var(--mut); }
.hd-table .prod { max-width: 196px; overflow: hidden; text-overflow: ellipsis; }
.hd-table .prod em { margin-left: 6px; font-style: normal; font-size: 12px; color: var(--mut); }
.hd-table tr { transition: background .3s; }
.hd-table tr.sel { background: color-mix(in oklch, var(--prim) 8%, transparent); }
.hd-table .add { font-weight: 500; color: var(--warn); }
.hd-table .pos { font-weight: 500; color: var(--ok); } .hd-table .neg { font-weight: 500; color: var(--bad); }
.hd-table .flash { animation: hd-flash 1.2s ease-out; }
@keyframes hd-flash { 0% { background: color-mix(in oklch, var(--prim) 45%, transparent); } 100% { background: transparent; } }
.hd-table .ic.st { width: 14px; height: 14px; color: var(--mut); } .hd-table .ic.st.ok { color: var(--ok); }
.hd-dot { display: inline-block; width: 6px; height: 6px; border-radius: 50%; background: color-mix(in oklch, var(--mut) 40%, transparent); }
.hd-foot-hint { margin-top: 12px !important; font-size: 12px; color: var(--mut); }

/* — ui/sheet.tsx: overlay bg-black/10 + backdrop-blur-xs, content w-3/4 sm:max-w-md — */
.hd-over { position: absolute; inset: 0; z-index: 10; background: rgb(0 0 0 / 0.1); -webkit-backdrop-filter: blur(4px); backdrop-filter: blur(4px); opacity: 0; visibility: hidden; transition: opacity .15s ease, visibility 0s .15s; }
.hd-sheet { position: absolute; top: 0; right: 0; bottom: 0; z-index: 11; width: 448px; display: flex; flex-direction: column; background: var(--popover); border-left: 1px solid var(--bd); box-shadow: 0 10px 15px -3px rgb(0 0 0 / 0.1), 0 4px 6px -4px rgb(0 0 0 / 0.1); font-size: 12px; line-height: 1.625; opacity: 0; visibility: hidden; transform: translateX(40px); transition: opacity .2s ease, transform .2s ease, visibility 0s .2s; overflow: hidden; }
.hd-win.drawer .hd-over, .hd-win.drawer .hd-sheet { opacity: 1; visibility: visible; transform: none; transition-delay: 0s; }
.hd-x { position: absolute; top: 12px; right: 12px; width: 32px; height: 32px; display: grid; place-items: center; border-radius: 999px; color: var(--fg); }
.hd-body { position: absolute; inset: 0; overflow: hidden; transition: opacity .14s ease; }
.hd-body[hidden] { display: none; }
.hd-sh { display: flex; flex-direction: column; gap: 4px; padding: 16px; }
.hd-st { display: flex; align-items: center; gap: 8px; font-size: 14px; font-weight: 500; }
.hd-tag { display: inline-flex; align-items: center; height: 24px; padding: 0 10px; border-radius: 999px; background: color-mix(in oklch, var(--warn) 15%, transparent); color: var(--warn); font-size: 12px; font-weight: 500; }
.hd-sd { font-size: 14px; color: var(--mut); line-height: 1.5; }
.hd-sb { padding: 0 16px 32px; display: grid; gap: 20px; }
.hd-box { border-radius: 12px; background: var(--sec); padding: 16px; }
.hd-it-t { font-size: 14px; font-weight: 500; line-height: 1.5; }
.hd-it-m { margin-top: 2px !important; font-size: 12px; color: var(--mut); }
.hd-h3 { margin-bottom: 12px !important; font-size: 13px; font-weight: 600; letter-spacing: -0.01em; line-height: 1.4; }
.hd-h3 span { margin-left: 8px; font-weight: 400; color: var(--mut); }
/* cost-entry-form.tsx */
.hd-sug { margin-bottom: 14px; display: flex; flex-wrap: wrap; gap: 8px; }
.hd-sug span { padding: 6px 12px; border-radius: 999px; background: var(--card); box-shadow: 0 1px 2px rgb(0 0 0 / 0.06); font-size: 12px; line-height: 1.33; transition: background .2s, color .2s, transform .12s; }
.hd-sug span i { font-style: normal; color: var(--mut); }
.hd-sug span small { margin-left: 4px; font-size: 10px; color: var(--mut); }
.hd-sug span.hit { background: var(--prim); color: var(--prim-fg); }
.hd-sug span.hit i, .hd-sug span.hit small { color: var(--prim-fg); }
.hd-g { display: grid; gap: 12px; }
.hd-g2 { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.hd-f { display: grid; gap: 6px; }
.hd-lb { font-size: 12px; line-height: 1; }
.hd-units { font-size: 12px; color: var(--mut); }
.hd-sups { display: flex; flex-wrap: wrap; gap: 6px; padding-top: 2px; }
.hd-sups span { max-width: 100%; padding: 4px 10px; border-radius: 999px; background: var(--card); box-shadow: 0 1px 2px rgb(0 0 0 / 0.06); font-size: 12px; color: var(--mut); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; transition: background .2s, color .2s; }
.hd-sups span.on { background: var(--prim); color: var(--prim-fg); box-shadow: none; }
/* cost-history-panel.tsx, the drawer's profit breakdown */
.hd-none { font-size: 14px; color: var(--mut); }
.hd-dl { display: grid; gap: 6px; font-size: 14px; }
.hd-dl > div { display: flex; align-items: center; justify-content: space-between; }
.hd-dl dt, .hd-dl dd { font-size: 14px; color: var(--mut); }
.hd-dl dd.hl { font-weight: 500; color: var(--fg); }
.hd-sep { height: 1px; margin: 8px 0; background: var(--bd); }
.hd-dl .tot dt { font-weight: 500; color: var(--fg); }
.hd-dl .tot dd { font-weight: 600; color: var(--fg); }
.hd-dl .tot dd.pos { color: var(--ok); } .hd-dl .tot dd.neg { color: var(--bad); }
.hd-dl .tot dd small { margin-left: 8px; font-size: 12px; font-weight: 400; color: var(--mut); }
.hd-dl dd.tick { animation: hd-tick .35s ease-out; }
@keyframes hd-tick { 0% { transform: translateY(-3px); opacity: .4; } 100% { transform: none; opacity: 1; } }

/* — ui/sonner.tsx, richColors, position bottom-right — */
.hd-toasts { position: absolute; right: 24px; bottom: 24px; z-index: 20; width: 356px; display: flex; flex-direction: column; gap: 10px; pointer-events: none; }
.hd-toast { display: flex; align-items: center; gap: 8px; padding: 16px; border-radius: 18px; border: 1px solid hsl(145 92% 87%); background: hsl(143 85% 96%); color: hsl(140 100% 27%); font-size: 13px; font-weight: 500; line-height: 1.5; box-shadow: 0 4px 12px rgb(0 0 0 / 0.1); animation: hd-toast-in .4s cubic-bezier(.21,1.02,.73,1) both; }
.hd-toast .ic { width: 16px; height: 16px; }
.hd-toast.out { animation: hd-toast-out .3s ease-in both; }
@keyframes hd-toast-in { from { opacity: 0; transform: translateY(100%); } }
@keyframes hd-toast-out { to { opacity: 0; transform: translateY(8px) scale(0.96); } }

/* — the cursor, and the keys it presses — */
.hd-cursor { position: absolute; left: 0; top: 0; z-index: 40; width: 26px; height: 26px; pointer-events: none; opacity: 0; transition: transform .8s cubic-bezier(.3,.7,.2,1), opacity .25s; filter: drop-shadow(0 3px 6px rgba(0,0,0,0.25)); will-change: transform; }
.hd-cursor.show { opacity: 1; }
.hd-cursor svg { width: 26px; height: 26px; transition: transform .12s; }
.hd-cursor.down svg { transform: scale(0.82); }
.hd-key { position: absolute; z-index: 41; display: flex; gap: 6px; pointer-events: none; opacity: 0; transform: translateY(6px); transition: opacity .2s, transform .2s; }
.hd-key.show { opacity: 1; transform: none; }
.hd-key kbd { min-width: 34px; height: 34px; padding: 0 10px; display: grid; place-items: center; border-radius: 9px; background: #18181b; color: #fafafa; font: 600 15px/1 -apple-system, BlinkMacSystemFont, "Inter", sans-serif; box-shadow: 0 2px 0 #000, 0 8px 20px rgba(0,0,0,0.25); }

/* Without script the window holds its first frame. With it, help.js plays the
   loop; reduced motion shows the finished state and stops. */
.hd-stage .hd-paused { display: none; }

/* ================================================================ more of the app */

/* — ui/card.tsx — */
.hd-card { display: flex; flex-direction: column; gap: 24px; padding: 24px 0; border-radius: 18px; background: var(--card); box-shadow: var(--sh-card); font-size: 14px; }
.hd-card.sm { gap: 16px; padding: 16px 0; }
.hd-card.hl { box-shadow: var(--sh-card), 0 0 0 1px color-mix(in oklch, var(--prim) 40%, transparent); }
.hd-card > .h, .hd-card > .c { padding: 0 24px; }
.hd-card.sm > .h, .hd-card.sm > .c { padding: 0 16px; }
.hd-card > .h { display: grid; gap: 6px; }
.hd-ct { font-size: 16px; font-weight: 600; letter-spacing: -0.02em; line-height: 1.5; }
.hd-cd { font-size: 14px; line-height: 1.625; color: var(--mut); }
.hd-stack { display: grid; gap: 24px; }

/* — ui/badge.tsx — */
.hd-bdg { display: inline-flex; align-items: center; height: 24px; padding: 0 10px; border-radius: 999px; font-size: 12px; font-weight: 500; white-space: nowrap; transition: background .3s, color .3s; }
.hd-bdg.warn { background: color-mix(in oklch, var(--warn) 12%, transparent); color: var(--warn); }
.hd-bdg.ok { background: color-mix(in oklch, var(--ok) 12%, transparent); color: var(--ok); }
.hd-bdg.bad { background: color-mix(in oklch, var(--bad) 12%, transparent); color: var(--bad); }
.hd-bdg.sec { background: var(--sec); color: var(--fg); }

/* — shared segmented control (refunds-view.tsx Segmented) — */
.hd-seg { display: inline-flex; gap: 4px; padding: 4px; border-radius: 999px; background: var(--sec); }
.hd-seg span { display: flex; align-items: center; gap: 8px; padding: 8px 16px; border-radius: 999px; font-size: 13px; font-weight: 500; color: var(--mut); transition: background .2s, color .2s, box-shadow .2s; }
.hd-seg span.on { background: var(--card); color: var(--fg); box-shadow: 0 1px 3px rgb(0 0 0 / 0.08); }
.hd-seg b { padding: 2px 6px; border-radius: 999px; font-size: 11px; font-weight: 500; background: color-mix(in oklch, var(--card) 60%, transparent); color: var(--mut); }
.hd-seg b.warn { background: color-mix(in oklch, var(--warn) 15%, transparent); color: var(--warn); }

/* — recovery-strip.tsx — */
.hd-found { display: flex; align-items: flex-start; gap: 12px; padding: 16px; border-radius: 18px; border: 1px solid color-mix(in oklch, var(--ok) 25%, transparent); background: color-mix(in oklch, var(--ok) 8%, transparent); font-size: 14px; line-height: 1.625; }
.hd-found .ic { width: 20px; height: 20px; margin-top: 2px; color: var(--ok); }
.hd-found b { font-weight: 600; }
.hd-rec { display: grid; grid-template-columns: repeat(4, 1fr); gap: 16px; }
.hd-rec .hd-card { padding: 24px 0; gap: 0; }
.hd-rec .c { padding: 4px 24px; }
.hd-rec-l { display: flex; align-items: center; gap: 8px; color: var(--mut); font-size: 12px; font-weight: 500; letter-spacing: 0.025em; text-transform: uppercase; }
.hd-rec-l .ic { width: 16px; height: 16px; }
.hd-rec-l .ic.ok { color: var(--ok); } .hd-rec-l .ic.warn { color: var(--warn); } .hd-rec-l .ic.bad { color: var(--bad); }
.hd-rec-v { margin-top: 8px !important; font-size: 24px; line-height: 1.33; font-weight: 600; letter-spacing: -0.02em; }
.hd-rec-h { margin-top: 2px !important; font-size: 12px; color: var(--mut); }

/* — refund-question-card.tsx — */
.hd-q { border-radius: 18px; border: 1px solid color-mix(in oklch, var(--warn) 25%, transparent); background: color-mix(in oklch, var(--warn) 8%, transparent); padding: 20px; overflow: hidden; transition: opacity .3s ease, transform .3s ease, max-height .45s ease .1s, padding .45s ease .1s, margin .45s ease .1s, border-width .45s ease .1s; max-height: 260px; }
.hd-q.leave { opacity: 0; transform: translateY(-6px); max-height: 0; padding-top: 0; padding-bottom: 0; border-width: 0; margin-top: -16px; }
.hd-q-t { font-size: 16px; font-weight: 600; letter-spacing: -0.02em; }
.hd-q-d { margin-top: 6px !important; font-size: 14px; color: var(--mut); }
.hd-q-d b { font-weight: 500; color: var(--fg); } .hd-q-d a { font-weight: 500; color: var(--link); }
.hd-q-dt { margin-top: 4px !important; display: block; font-size: 12px; color: var(--mut); }
.hd-q-a { margin-top: 16px; display: flex; flex-wrap: wrap; gap: 8px; }
.hd-btn.ghost { background: transparent; color: var(--fg); }

/* — refunds-table.tsx — */
.hd-search-l { position: relative; width: 384px; }
.hd-search-l .hd-field { padding-left: 36px; }
.hd-search-l .ic { position: absolute; left: 12px; top: 14px; width: 16px; height: 16px; color: var(--mut); z-index: 1; }
.hd-out { font-size: 14px; color: var(--mut); } .hd-out b { font-weight: 500; color: var(--fg); } .hd-out em { margin-left: 8px; font-style: normal; color: var(--bad); }
.hd-table td .hd-bdg { vertical-align: middle; }
.hd-table .late { margin-left: 6px; font-size: 12px; color: var(--bad); }
.hd-table .act { font-size: 13px; font-weight: 500; color: var(--link); }

/* — dashboard: period-panel.tsx, profit-breakdown.tsx, live-counts.tsx — */
.hd-panels { display: grid; grid-template-columns: 1fr 1fr; gap: 24px; align-items: start; }
.hd-pcol { display: flex; flex-direction: column; gap: 12px; min-width: 0; }
.hd-pcol .gap { height: 40px; }
.hd-pcol .sel { display: flex; justify-content: flex-end; }
.hd-g2c { display: grid; grid-template-columns: 1fr 1fr; gap: 20px; }
.hd-g3c { margin-top: 20px; padding-top: 20px; border-top: 1px solid var(--bd); display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; }
.hd-fl { font-size: 13px; color: var(--mut); line-height: 1.5; }
.hd-fv { margin-top: 4px; display: flex; flex-wrap: wrap; align-items: baseline; gap: 8px; }
.hd-num { font-size: 20px; line-height: 28px; font-weight: 600; letter-spacing: -0.03em; }
.hd-num.big { font-size: 30px; line-height: 36px; }
.hd-num.pos { color: var(--ok); }
.hd-dlt { display: inline-flex; align-items: center; gap: 2px; font-size: 12px; font-weight: 500; color: var(--ok); }
.hd-dlt .ic { width: 12px; height: 12px; }
.hd-fn { margin-top: 2px !important; font-size: 12px; color: var(--mut); line-height: 1.33; }
.hd-lnk { margin-top: 6px; display: inline-flex; align-items: center; gap: 4px; font-size: 12px; font-weight: 500; color: var(--link); }
.hd-lnk .ic { width: 12px; height: 12px; transition: transform .2s; }
.hd-lnk.open .ic { transform: rotate(180deg); }
.hd-await { margin-top: 16px; display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 8px 12px; border-radius: 12px; background: color-mix(in oklch, var(--warn) 10%, transparent); font-size: 13px; line-height: 1.5; }
.hd-await b { font-weight: 500; } .hd-await i { font-style: normal; color: var(--mut); } .hd-await .ic { width: 14px; height: 14px; color: var(--mut); }
.hd-await[hidden] { display: none; }
.hd-bd { display: grid; grid-template-rows: 0fr; transition: grid-template-rows .45s cubic-bezier(.2,.65,.25,1); }
.hd-bd > div { min-height: 0; overflow: hidden; }
.hd-bd.open { grid-template-rows: 1fr; }
.hd-bd dl { margin-top: 8px; border-radius: 12px; background: color-mix(in oklch, var(--sec) 60%, transparent); padding: 12px; font-size: 13px; }
.hd-bd dl > div { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; padding: 4px 0; }
.hd-bd dt { color: var(--mut); } .hd-bd dd { white-space: nowrap; }
.hd-bd .sub { border-top: 1px solid color-mix(in oklch, var(--bd) 40%, transparent); font-weight: 500; }
.hd-bd .sub dt, .hd-bd .strong dt { color: var(--fg); }
.hd-bd .strong { border-top: 1px solid color-mix(in oklch, var(--bd) 60%, transparent); font-weight: 600; }
.hd-bd .det { display: inline-flex; align-items: center; gap: 4px; color: var(--link); }
.hd-bd .det .ic { width: 12px; height: 12px; }
.hd-bd p { margin-top: 8px !important; font-size: 12px; line-height: 1.625; color: var(--mut); }
.hd-live-l { margin: 24px 0 8px !important; font-size: 12px; font-weight: 500; color: var(--mut); }
.hd-live { display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px; }
.hd-tile { display: flex; align-items: center; gap: 12px; padding: 14px 16px; border: 1px solid var(--bd); border-radius: 24px; background: var(--card); min-width: 0; }
.hd-tile > div { flex: 1; min-width: 0; }
.hd-tile-i { width: 36px; height: 36px; flex: none; display: grid; place-items: center; border-radius: 12px; background: color-mix(in oklch, var(--prim) 25%, transparent); color: var(--link); }
.hd-tile-v { font-size: 18px; font-weight: 600; line-height: 1.25; letter-spacing: -0.02em; }
.hd-tile-n { font-size: 12px; color: var(--mut); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.hd-tile > .ic { width: 14px; height: 14px; color: var(--mut); opacity: .6; }
.hd-app .fade { transition: opacity .18s ease; } .hd-app .fade.out { opacity: 0.15; }

/* — settings/layout.tsx, settings-nav.tsx — */
.hd-stabs { display: flex; gap: 4px; border-bottom: 1px solid var(--bd); }
.hd-stabs span { margin-bottom: -1px; padding: 8px 12px; border-bottom: 2px solid transparent; font-size: 14px; font-weight: 500; color: var(--mut); }
.hd-stabs span.on { border-bottom-color: var(--prim); color: var(--fg); }
.hd-sbody { margin-top: 24px; max-width: 768px; }

/* — ui/select.tsx, ui/table.tsx — */
.hd-sel { position: relative; display: inline-flex; align-items: center; justify-content: space-between; gap: 6px; height: 44px; padding: 8px 8px 8px 14px; border-radius: 12px; border: 1px solid var(--bd); font-size: 14px; white-space: nowrap; transition: border-color .15s, box-shadow .15s; }
.hd-sel .ic { width: 16px; height: 16px; color: var(--mut); }
.hd-sel.focus { border-color: var(--link); box-shadow: 0 0 0 1px color-mix(in oklch, var(--link) 50%, transparent); }
.hd-menu { position: absolute; left: 0; top: calc(100% + 6px); z-index: 30; min-width: 144px; width: 100%; padding: 4px; border-radius: 12px; background: var(--popover); box-shadow: 0 4px 6px -1px rgb(0 0 0 / 0.1), 0 2px 4px -2px rgb(0 0 0 / 0.1), 0 0 0 1px color-mix(in oklch, var(--fg) 10%, transparent); opacity: 0; transform: scale(0.96); transform-origin: top; pointer-events: none; transition: opacity .1s, transform .1s; }
.hd-menu.open { opacity: 1; transform: none; }
.hd-menu span { position: relative; display: flex; align-items: center; padding: 8px 32px 8px 10px; border-radius: 8px; font-size: 13px; transition: background .12s; }
.hd-menu span.hov { background: var(--acc); }
.hd-menu span.sel::after { content: ""; position: absolute; right: 10px; top: 50%; width: 9px; height: 5px; margin-top: -4px; border-left: 2px solid var(--fg); border-bottom: 2px solid var(--fg); transform: rotate(-45deg); }
.hd-t { width: 100%; border-collapse: collapse; font-size: 14px; margin: 0; }
.hd-t th { height: 40px; padding: 0 8px; text-align: left; font-weight: 500; color: var(--fg); white-space: nowrap; border-bottom: 1px solid var(--bd); text-transform: none; letter-spacing: 0; font-size: 14px; }
.hd-t td { padding: 8px; border-bottom: 1px solid var(--bd); white-space: nowrap; vertical-align: middle; font-weight: 400; color: var(--fg); }
.hd-t tr:last-child td { border-bottom: 0; }
.hd-t td.mut { color: var(--mut); } .hd-t td b { font-weight: 500; } .hd-t td small { margin-left: 6px; font-size: 12px; color: var(--mut); }
.hd-t .icons { display: flex; gap: 4px; } .hd-t .icons span { width: 40px; height: 40px; display: grid; place-items: center; border-radius: 999px; color: var(--mut); }
.hd-t tr.enter td { animation: hd-row-in .45s cubic-bezier(.2,.65,.25,1) both; }
@keyframes hd-row-in { from { opacity: 0; transform: translateY(-6px); background: color-mix(in oklch, var(--prim) 30%, transparent); } }
.hd-enter { animation: hd-card-in .5s cubic-bezier(.2,.65,.25,1) both; }
@keyframes hd-card-in { from { opacity: 0; transform: translateY(-8px); } }
.hd-hidden { display: none !important; }
.hd-blurb { font-size: 12px; color: var(--mut); transition: opacity .2s; }

/* — expenses-view.tsx — */
.hd-month-nav { display: flex; align-items: center; gap: 4px; }
.hd-month-nav span.n { min-width: 176px; text-align: center; font-size: 15px; font-weight: 500; }
.hd-month-nav .hd-ib { width: 32px; height: 32px; }
.hd-tri { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; }
.hd-tri .hd-ct { font-size: 14px; font-weight: 500; color: var(--mut); letter-spacing: 0; }
.hd-tri .v { font-size: 24px; line-height: 1; font-weight: 600; letter-spacing: -0.02em; }
.hd-tri .v.pos { color: var(--ok); }
.hd-tri .n { margin-top: 10px !important; font-size: 13px; color: var(--mut); }
.hd-how p { font-size: 14px; color: var(--mut); line-height: 1.5; } .hd-how p.t { color: var(--fg); font-weight: 500; } .hd-how b { font-weight: 500; color: var(--fg); }
.hd-how { display: grid; gap: 6px; }
.hd-add { display: flex; flex-wrap: wrap; align-items: flex-end; gap: 12px; }
.hd-add .grow { flex: 1; min-width: 192px; }
.hd-chk { display: flex; align-items: center; gap: 8px; height: 44px; font-size: 14px; }
.hd-chk i { width: 16px; height: 16px; border-radius: 5px; border: 1px solid var(--bd); background: var(--card); transition: background .15s, border-color .15s; }
.hd-chk i.on { background: var(--fg); border-color: var(--fg); box-shadow: inset 0 0 0 3px var(--fg), inset 0 0 0 5px #fff; }
.hd-xl { display: grid; }
.hd-xl > div { display: flex; align-items: center; gap: 12px; padding: 12px 0; border-bottom: 1px solid color-mix(in oklch, var(--bd) 60%, transparent); font-size: 14px; }
.hd-xl > div:last-child { border-bottom: 0; }
.hd-xl .l { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.hd-xl .src { display: inline-flex; align-items: center; gap: 4px; font-size: 12px; color: var(--mut); }
.hd-xl .src .ic { width: 12px; height: 12px; }
.hd-xl .rec { font-size: 12px; color: var(--mut); }
.hd-xl .amt { font-weight: 500; }
.hd-xl .sp { width: 32px; height: 32px; display: grid; place-items: center; color: var(--mut); }
.hd-xl .sp .ic { width: 16px; height: 16px; }
.hd-xl > div.enter { animation: hd-row-in .45s cubic-bezier(.2,.65,.25,1) both; }

/* order-filter-chips.tsx, active; a field's text selected with ⌘A */
.hd-chip { transition: border-color .2s, background .2s, color .2s; }
.hd-chip.on { border-color: var(--prim); background: color-mix(in oklch, var(--prim) 20%, transparent); color: var(--fg); }
.hd-chip .x { display: none; width: 12px; height: 12px; }
.hd-chip.on .x { display: block; }
.hd-app .selall { background: color-mix(in oklch, var(--link) 28%, transparent); border-radius: 2px; }
.hd-table tbody tr.out { display: none; }

/* ================================================================ eBay connection */
.hd-conn i.ok { background: oklch(0.696 0.17 162.48); } .hd-conn i.warn { background: var(--warn); } .hd-conn i.bad { background: var(--bad); }
.hd-ws { position: relative; }
.hd-bdg.pri { background: var(--prim); color: var(--prim-fg); }
.hd-hrow { display: flex !important; align-items: flex-start; justify-content: space-between; gap: 16px; }
.hd-hrow .hd-ct { display: flex; align-items: center; gap: 8px; }
.hd-runs-l { margin-bottom: 8px !important; font-size: 12px; font-weight: 500; color: var(--mut); }
.hd-runs { display: grid; gap: 6px; font-size: 14px; }
.hd-runs > div { display: flex; align-items: center; gap: 8px; }
.hd-runs i { width: 6px; height: 6px; border-radius: 50%; background: oklch(0.696 0.17 162.48); }
.hd-runs i.warn { background: oklch(0.769 0.188 70.08); } .hd-runs i.bad { background: var(--bad); }
.hd-runs > div > span:not(.amber) { white-space: nowrap; } .hd-runs > div > i { flex: none; }
.hd-runs .w { color: var(--mut); } .hd-runs .k { font-size: 12px; text-transform: uppercase; color: var(--mut); }
.hd-runs .amber { color: oklch(0.666 0.179 58.318); }
.hd-runs > div.enter { animation: hd-row-in .45s cubic-bezier(.2,.65,.25,1) both; }
.hd-note { font-size: 14px; color: var(--mut); line-height: 1.5; } .hd-note b { font-weight: 500; color: var(--fg); text-decoration: underline; text-underline-offset: 2px; }
/* empty-state.tsx */
.hd-empty { display: flex; flex-direction: column; align-items: center; justify-content: center; padding: 80px 24px; text-align: center; border-radius: 18px; background: var(--card); box-shadow: var(--sh-card); }
.hd-empty > span:first-child { width: 56px; height: 56px; margin-bottom: 20px; display: grid; place-items: center; border-radius: 50%; background: var(--sec); color: var(--mut); }
.hd-empty > span:first-child .ic { width: 24px; height: 24px; }
.hd-empty .h3x, .hd-empty [data-h] { font-size: 18px; font-weight: 600; letter-spacing: -0.02em; }
.hd-empty p { margin-top: 8px !important; max-width: 448px; font-size: 15px; line-height: 1.625; color: var(--mut); }
.hd-empty .hd-btn { margin-top: 24px; }
/* ui/alert.tsx */
.hd-alert { display: grid; grid-template-columns: auto 1fr; gap: 2px 8px; padding: 14px 16px; border-radius: 12px; border: 1px solid var(--bd); background: var(--card); font-size: 14px; }
.hd-alert .ic { width: 16px; height: 16px; margin-top: 2px; }
.hd-alert b { font-weight: 500; } .hd-alert p { grid-column: 2; color: var(--mut); line-height: 1.5; }
.hd-alert.bad { color: var(--bad); border-color: color-mix(in oklch, var(--bad) 30%, transparent); } .hd-alert.bad p { color: color-mix(in oklch, var(--bad) 85%, var(--fg)); }
/* ui/dialog.tsx: overlay bg-black/10 blur-xs; content sm:max-w-sm rounded-xl p-4 gap-4 ring-1 */
.hd-dlg-o { position: absolute; inset: 0; z-index: 12; background: rgb(0 0 0 / 0.1); -webkit-backdrop-filter: blur(4px); backdrop-filter: blur(4px); opacity: 0; visibility: hidden; transition: opacity .12s, visibility 0s .12s; }
.hd-dlg { position: absolute; left: 50%; top: 50%; z-index: 13; width: 384px; display: grid; gap: 16px; padding: 16px; border-radius: 12px; background: var(--popover); box-shadow: 0 0 0 1px color-mix(in oklch, var(--fg) 10%, transparent), 0 10px 15px -3px rgb(0 0 0 / 0.1); font-size: 12px; line-height: 1.625; opacity: 0; visibility: hidden; transform: translate(-50%, -50%) scale(0.95); transition: opacity .12s, transform .12s, visibility 0s .12s; }
.hd-dlg.wide { width: 448px; }
.hd-win.dialog .hd-dlg-o, .hd-win.dialog .hd-dlg { opacity: 1; visibility: visible; transition-delay: 0s; }
.hd-win.dialog .hd-dlg { transform: translate(-50%, -50%); }
.hd-dlg .x { position: absolute; top: 8px; right: 8px; width: 28px; height: 28px; display: grid; place-items: center; border-radius: 999px; color: var(--mut); }
.hd-dlg-t { font-size: 14px; font-weight: 500; padding-right: 24px; }
.hd-dlg-d { margin-top: 4px !important; color: var(--mut); }
.hd-dlg ul { display: grid; gap: 8px; font-size: 14px; color: var(--mut); line-height: 1.5; }
.hd-dlg ul b { font-weight: 500; color: var(--fg); }
.hd-dlg-f { display: flex; justify-content: flex-end; gap: 8px; }
/* return-resale-dialog.tsx: its footer starts left and wraps, so a third button
   drops to a second line instead of leaving the box. No dialog child may widen it. */
.hd-dlg-f.wrap { justify-content: flex-start; flex-wrap: wrap; }
.hd-dlg > * { min-width: 0; }
.hd-btn.bad { background: var(--bad); color: #fff; }
.hd-btn.sel { background: var(--prim); color: var(--prim-fg); border-color: transparent; }
.hd-btn.off { opacity: 0.4; }
.hd-dlg .hd-field { width: 176px; }
.hd-dlg .info { font-size: 14px; color: var(--mut); line-height: 1.5; }
/* import-progress.tsx: fixed bottom-5 right-5 w-80 rounded-2xl */
.hd-imp { position: absolute; right: 20px; bottom: 20px; z-index: 19; width: 320px; padding: 16px; border-radius: 16px; border: 1px solid color-mix(in oklch, var(--bd) 60%, transparent); background: var(--card); box-shadow: var(--sh-raised); opacity: 0; transform: translateY(10px); transition: opacity .35s, transform .35s cubic-bezier(.2,.65,.25,1); pointer-events: none; }
.hd-imp.show { opacity: 1; transform: none; }
.hd-imp-h { display: flex; align-items: flex-start; gap: 10px; }
.hd-imp-h .ic { width: 16px; height: 16px; margin-top: 2px; color: var(--link); } .hd-imp-h .ic.ok { color: var(--ok); }
.hd-imp-h b { font-size: 14px; font-weight: 600; letter-spacing: -0.01em; }
.hd-imp-bar { position: relative; margin-top: 12px; height: 6px; border-radius: 999px; background: var(--sec); overflow: hidden; }
.hd-imp-bar i { position: absolute; top: 0; bottom: 0; width: 33%; border-radius: 999px; background: var(--prim); animation: hd-imp-slide 1.4s ease-in-out infinite; }
@keyframes hd-imp-slide { from { left: -33%; } to { left: 100%; } }
.hd-imp p { margin-top: 10px !important; font-size: 12px; color: var(--mut); } .hd-imp p + p { margin-top: 4px !important; }
.hd-imp .done-l { margin-top: 2px !important; }
/* the eBay step: described, not copied — the same treatment as the homepage hero */
.hd-eb { position: absolute; inset: 0; z-index: 25; display: flex; flex-direction: column; align-items: center; background: #fff; color: #191919; font-family: "Helvetica Neue", Helvetica, Arial, sans-serif; letter-spacing: 0; opacity: 0; visibility: hidden; transition: opacity .35s, visibility 0s .35s; }
.hd-win.ebay .hd-eb { opacity: 1; visibility: visible; transition-delay: 0s; }
.hd-eb-bar { align-self: stretch; height: 64px; display: flex; align-items: center; justify-content: space-between; padding: 0 48px; border-bottom: 1px solid #e5e5e5; }
.hd-eb-mark { font-size: 34px; font-weight: 700; letter-spacing: -0.06em; }
.hd-eb-user { font-size: 15px; color: #707070; }
.hd-eb-card { width: 640px; margin-top: 64px; }
.hd-eb-k { font-size: 13px; font-weight: 700; letter-spacing: 0.06em; text-transform: uppercase; color: #3665f3; margin-bottom: 8px !important; }
.hd-eb-card .h4x { margin: 0; font-size: 30px; line-height: 1.2; font-weight: 700; letter-spacing: -0.01em; }
.hd-eb-lead { margin-top: 10px !important; font-size: 16px; color: #414141; }
.hd-eb-list { margin: 20px 0; padding: 16px 22px; border: 1px solid #e5e5e5; border-radius: 16px; display: grid; gap: 11px; }
.hd-eb-list > div { display: flex; align-items: center; gap: 12px; font-size: 16px; }
.hd-eb-list .ic { width: 20px; height: 20px; color: #3665f3; }
.hd-eb-note { font-size: 14px; color: #707070; line-height: 1.5; }
.hd-eb-acts { display: flex; gap: 12px; margin-top: 22px; }
.hd-eb-btn { height: 50px; padding: 0 34px; border-radius: 999px; display: flex; align-items: center; font-size: 17px; font-weight: 700; background: #3665f3; color: #fff; transition: transform .15s, filter .15s; }
.hd-eb-btn.ghost { background: #fff; color: #3665f3; box-shadow: inset 0 0 0 1px #3665f3; }
.hd-eb-btn.pressed { filter: brightness(0.9); }
/* onboarding/page.tsx: centred card on bg-muted/40 */
.hd-onb { position: absolute; inset: 0; z-index: 24; display: flex; flex-direction: column; align-items: center; justify-content: center; background: color-mix(in oklch, var(--sec) 40%, #fff); opacity: 0; visibility: hidden; transition: opacity .35s, visibility 0s .35s; }
.hd-win.onboarding .hd-onb { opacity: 1; visibility: visible; transition-delay: 0s; }
.hd-onb > svg { width: 176px; height: auto; margin-bottom: 40px; color: var(--fg); }
.hd-onb .hd-card { width: 384px; }
.hd-onb .note { font-size: 13px; color: var(--mut); line-height: 1.5; }
/* dashboard/page.tsx, no account connected */
.hd-plug { display: flex; align-items: center; justify-content: space-between; gap: 24px; padding: 32px 24px; border-radius: 18px; background: linear-gradient(135deg, color-mix(in oklch, var(--prim) 8%, #fff), color-mix(in oklch, var(--prim) 2%, #fff)); box-shadow: var(--sh-card); }
.hd-plug > div { display: flex; align-items: center; gap: 16px; }
.hd-plug > div > span { width: 48px; height: 48px; display: grid; place-items: center; border-radius: 16px; background: color-mix(in oklch, var(--prim) 12%, transparent); color: var(--link); }
.hd-plug > div > span .ic { width: 20px; height: 20px; }
.hd-plug b { display: block; font-size: 16px; font-weight: 600; letter-spacing: -0.02em; } .hd-plug p { margin-top: 2px !important; font-size: 14px; color: var(--mut); }
/* ui/dropdown-menu.tsx: the workspace switcher */
.hd-dd { position: absolute; left: 0; top: calc(100% + 6px); z-index: 30; width: 224px; padding: 4px; border-radius: 12px; background: var(--popover); box-shadow: 0 4px 6px -1px rgb(0 0 0 / 0.1), 0 0 0 1px color-mix(in oklch, var(--fg) 10%, transparent); opacity: 0; transform: scale(0.96); transform-origin: top left; pointer-events: none; transition: opacity .1s, transform .1s; font-size: 13px; font-weight: 400; }
.hd-dd.open { opacity: 1; transform: none; }
.hd-dd .lab { padding: 6px 10px; font-size: 12px; font-weight: 500; color: var(--mut); }
.hd-dd .it { display: flex; align-items: center; gap: 8px; padding: 8px 10px; border-radius: 8px; color: var(--fg); transition: background .12s; }
.hd-dd .it.hov { background: var(--acc); } .hd-dd .it > span { flex: 1; }
.hd-dd .sep { height: 1px; margin: 4px -4px; background: var(--bd); }

/* ================================================================ orders: past prices, sheet, import, history */
.hd-back { display: inline-flex; align-items: center; gap: 4px; font-size: 14px; color: var(--mut); } .hd-back .ic { width: 16px; height: 16px; }
.hd-pp-dates { display: flex; align-items: center; gap: 8px; font-size: 14px; color: var(--mut); } .hd-pp-dates .hd-field { width: 152px; height: 36px; color: var(--fg); }
.hd-pp-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 12px 20px; border-bottom: 1px solid color-mix(in oklch, var(--bd) 60%, transparent); }
.hd-pp-head p { font-size: 14px; } .hd-pp-head b { font-weight: 500; } .hd-pp-head .mut { color: var(--mut); } .hd-pp-head .hint { font-size: 12px; color: var(--mut); }
.hd-pp-cols, .hd-pp-row { display: grid; grid-template-columns: minmax(0, 1fr) 96px 320px; gap: 16px; padding: 0 20px; }
.hd-pp-cols { padding-top: 8px; padding-bottom: 8px; border-bottom: 1px solid color-mix(in oklch, var(--bd) 60%, transparent); background: color-mix(in oklch, var(--sec) 40%, transparent); font-size: 12px; font-weight: 500; color: var(--mut); }
.hd-pp-cols span:not(:first-child) { text-align: right; }
.hd-pp-row { align-items: center; padding-top: 14px; padding-bottom: 14px; border-bottom: 1px solid color-mix(in oklch, var(--bd) 60%, transparent); border-left: 2px solid transparent; transition: background .3s, border-color .3s, opacity .4s; }
.hd-pp-row:last-child { border-bottom: 0; }
.hd-pp-row.ready { border-left-color: var(--prim); background: color-mix(in oklch, var(--prim) 4%, transparent); }
.hd-pp-row.gone { opacity: 0; }
.hd-pp-p { display: flex; align-items: center; gap: 12px; min-width: 0; }
.hd-pp-img { flex: none; width: 40px; height: 40px; display: grid; place-items: center; border-radius: 8px; background: var(--sec); color: var(--mut); }
.hd-pp-img .ic { width: 16px; height: 16px; }
.hd-pp-p .t { font-size: 14px; font-weight: 500; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.hd-pp-p .m { font-size: 12px; color: var(--mut); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .hd-pp-p .m b { font-weight: 500; color: color-mix(in oklch, var(--fg) 70%, transparent); }
.hd-pp-p .use { color: var(--link); }
.hd-pp-w { text-align: right; font-size: 14px; } .hd-pp-w b { font-weight: 500; } .hd-pp-w span { display: block; font-size: 12px; color: var(--mut); }
.hd-pp-t { display: grid; justify-items: end; gap: 6px; }
.hd-pp-t .tier { display: flex; align-items: center; gap: 8px; font-size: 12px; color: var(--mut); }
.hd-pbox { width: 112px; height: 36px; justify-content: flex-end; gap: 0; }
.hd-pbox i:first-child { font-style: normal; margin-right: auto; color: var(--mut); }
.hd-pp-t .units { width: 64px; height: 36px; justify-content: flex-end; }
.hd-pp-t .brk { display: inline-flex; align-items: center; gap: 4px; font-size: 12px; color: var(--mut); }
.hd-pp-t .brk .ic, .hd-pp-t .rm .ic { width: 12px; height: 12px; }
.hd-pp-t .rm { width: 32px; height: 32px; display: grid; place-items: center; color: var(--mut); } .hd-pp-t .sp { width: 32px; }
.hd-pp-foot { position: absolute; left: 0; right: 0; bottom: 0; z-index: 5; display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 12px 40px; border-top: 1px solid color-mix(in oklch, var(--bd) 60%, transparent); background: color-mix(in oklch, var(--bg) 95%, transparent); font-size: 14px; }
.hd-pp-foot .mut { color: var(--mut); } .hd-pp-foot b { font-weight: 500; } .hd-pp-foot .warn { color: var(--warn); }
.hd-sheet-dlg { width: 1024px; }
.hd-sh-l { font-size: 14px; color: var(--mut); line-height: 1.5; }
.hd-sh-l kbd { padding: 0 4px; border: 1px solid var(--bd); border-radius: 4px; font: inherit; font-size: 12px; }
.hd-sh-box { border: 1px solid var(--bd); border-radius: 18px; overflow: hidden; }
.hd-sht { width: 100%; border-collapse: collapse; font-size: 13px; margin: 0; }
.hd-sht th { padding: 8px; border-bottom: 1px solid var(--bd); text-align: left; font-size: 12px; font-weight: 500; color: var(--mut); background: var(--card); text-transform: none; letter-spacing: 0; white-space: nowrap; }
.hd-sht th.ed { background: color-mix(in oklch, var(--prim) 8%, transparent); }
.hd-sht td { padding: 4px 8px; border-bottom: 1px solid color-mix(in oklch, var(--bd) 60%, transparent); white-space: nowrap; color: var(--fg); font-weight: 400; transition: background .3s, opacity .3s; }
.hd-sht tr.grp td { border-bottom-color: color-mix(in oklch, var(--bd) 20%, transparent); }
.hd-sht tr:last-child td { border-bottom: 0; }
.hd-sht .n { width: 32px; text-align: center; font-size: 12px; color: var(--mut); } .hd-sht .r { text-align: right; } .hd-sht .s { font-size: 12px; } .hd-sht .mut { color: var(--mut); }
.hd-sht .pr { max-width: 220px; overflow: hidden; text-overflow: ellipsis; }
.hd-sht td.ed { padding: 2px 4px; background: color-mix(in oklch, var(--prim) 4%, transparent); }
.hd-sht .cell { display: block; height: 32px; line-height: 30px; padding: 0 8px; border: 1px solid transparent; border-radius: 6px; font-size: 13px; overflow: hidden; white-space: nowrap; }
.hd-sht .cell.r { text-align: right; } .hd-sht .cell.ph { color: var(--mut); }
.hd-sht .cell.focus { border-color: var(--prim); background: var(--card); }
.hd-sht tr.saved td { background: color-mix(in oklch, var(--ok) 8%, transparent); opacity: .6; }
.hd-sh-f { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding-top: 4px; } .hd-sh-f p { font-size: 12px; color: var(--mut); }
.hd-imp-dlg { width: 672px; }
.hd-imp-intro { font-size: 14px; color: var(--mut); line-height: 1.5; }
.hd-sample { border: 1px solid var(--bd); border-radius: 18px; overflow: hidden; }
.hd-sample .cap { padding: 8px 12px; border-bottom: 1px solid var(--bd); font-size: 12px; font-weight: 500; color: var(--mut); } .hd-sample .cap.b { border-bottom: 0; border-top: 1px solid var(--bd); font-weight: 400; }
.hd-sample table { width: 100%; border-collapse: collapse; font-size: 12px; margin: 0; }
.hd-sample th { padding: 8px 12px; text-align: left; font-size: 12px; font-weight: 600; color: var(--fg); background: color-mix(in oklch, var(--sec) 60%, transparent); white-space: nowrap; text-transform: none; letter-spacing: 0; border: 0; }
.hd-sample th em { margin-left: 4px; padding: 1px 6px; border-radius: 999px; font-style: normal; font-size: 10px; font-weight: 500; background: color-mix(in oklch, var(--prim) 15%, transparent); }
.hd-sample th em.opt { background: var(--sec); color: var(--mut); }
.hd-sample th.ign { font-weight: 500; color: color-mix(in oklch, var(--mut) 60%, transparent); } .hd-sample th.ign span { font-weight: 400; }
.hd-sample td { padding: 6px 12px; color: var(--mut); border: 0; font-weight: 400; } .hd-sample td.ign { color: color-mix(in oklch, var(--mut) 50%, transparent); }
.hd-drop { display: flex; flex-direction: column; align-items: center; gap: 12px; padding: 40px; border: 2px dashed var(--bd); border-radius: 18px; text-align: center; transition: border-color .2s, opacity .2s; }
.hd-drop .ic { width: 24px; height: 24px; color: var(--mut); } .hd-drop b { font-size: 14px; font-weight: 500; } .hd-drop span { font-size: 12px; color: var(--mut); }
.hd-drop.pressed { border-color: var(--prim); }
.hd-imp-file { font-size: 12px; color: var(--mut); }
.hd-imp-map { display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px; } .hd-imp-map .hd-sel { width: 100%; }
.hd-imp-counts { display: flex; flex-wrap: wrap; gap: 8px; }
.hd-imp-tbl { border: 1px solid var(--bd); border-radius: 18px; overflow: hidden; }
.hd-imp-tbl table { width: 100%; border-collapse: collapse; font-size: 14px; margin: 0; }
.hd-imp-tbl th { padding: 8px 12px; text-align: left; font-size: 12px; font-weight: 500; color: var(--mut); border: 0; text-transform: none; letter-spacing: 0; }
.hd-imp-tbl td { padding: 8px 12px; border-top: 1px solid var(--bd); color: var(--fg); font-weight: 400; } .hd-imp-tbl td b { font-weight: 500; } .hd-imp-tbl .r { text-align: right; } .hd-imp-tbl .mut { color: var(--mut); }
.hd-imp-f { display: flex; align-items: center; justify-content: space-between; gap: 12px; } .hd-imp-f p { font-size: 12px; color: var(--mut); }
.hd-hist { display: grid; gap: 8px; font-size: 14px; }
.hd-hist li > div { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: 0 12px; }
.hd-hist b { font-weight: 600; } .hd-hist s { color: var(--mut); } .hd-hist small { font-size: 12px; color: var(--mut); }
.hd-hist li.late { padding: 8px; border-radius: 6px; border: 1px solid rgb(252 211 77 / 0.6); background: rgb(255 251 235 / 0.4); }
.hd-hist li p { margin-top: 4px !important; font-size: 12px; color: rgb(146 64 14); }
.hd-hist li.enter { animation: hd-row-in .45s cubic-bezier(.2,.65,.25,1) both; }

/* ================================================================ products, stock, suppliers, listings */
.hd-lowbar { margin-bottom: 16px; display: flex; flex-wrap: wrap; align-items: center; gap: 8px; font-size: 14px; } .hd-lowbar .mut { color: var(--mut); }
.hd-sorts { display: flex; align-items: center; gap: 4px; font-size: 13px; }
.hd-sorts span { padding: 6px 12px; border-radius: 999px; font-weight: 500; color: var(--mut); transition: background .2s, color .2s; }
.hd-sorts span.on { background: var(--sec); color: var(--fg); } .hd-sorts span.mut { padding-right: 4px; font-weight: 400; }
.hd-pt-box { border: 1px solid var(--bd); border-radius: 8px; overflow: hidden; }
.hd-pt-box > table { min-width: max-content; }
.hd-pt { width: 100%; border-collapse: collapse; font-size: 14px; margin: 0; }
.hd-pt th { padding: 8px 12px; background: var(--sec); border-bottom: 1px solid var(--bd); font-size: 12px; font-weight: 500; color: var(--mut); text-align: left; white-space: nowrap; text-transform: none; letter-spacing: 0; }
.hd-pt td { padding: 10px 12px; border-bottom: 1px solid color-mix(in oklch, var(--bd) 60%, transparent); white-space: nowrap; vertical-align: middle; color: var(--fg); font-weight: 400; }
.hd-pt tr:last-child td { border-bottom: 0; }
.hd-pt .r, .hd-pt th.r { text-align: right; } .hd-pt .mut { color: var(--mut); } .hd-pt .pos { font-weight: 500; color: var(--ok); }
.hd-pt tbody tr { transition: transform .45s cubic-bezier(.2,.65,.25,1), opacity .3s; }
.hd-pt tbody tr.out { display: none; }
.hd-pr-t { display: flex; align-items: center; gap: 10px; min-width: 0; }
.hd-pr-t .hd-pp-img { width: 40px; height: 40px; border-radius: 6px; }
.hd-pr-t b { display: block; max-width: 210px; font-weight: 500; overflow: hidden; text-overflow: ellipsis; } .hd-pr-t small { font-size: 12px; color: var(--mut); }
/* products-table.tsx CostRange: a w-28 track, the latest buy as a dot, min and max beneath */
.hd-range { display: inline-flex; flex-direction: column; gap: 4px; width: 112px; vertical-align: middle; }
.hd-range > span { position: relative; height: 4px; border-radius: 999px; background: color-mix(in oklch, var(--mut) 20%, transparent); }
.hd-range i { position: absolute; top: 50%; width: 10px; height: 10px; border-radius: 50%; border: 2px solid var(--bg); background: var(--fg); transform: translate(-50%, -50%); }
.hd-range small { display: flex; justify-content: space-between; font-size: 11px; color: var(--mut); }
.hd-meter { display: inline-flex; flex-direction: column; align-items: flex-end; gap: 4px; }
.hd-meter i { display: block; width: 64px; height: 4px; border-radius: 999px; background: var(--sec); overflow: hidden; }
.hd-meter i b { display: block; height: 100%; border-radius: inherit; }
.hd-meter b.ok { background: var(--ok); } .hd-meter b.link { background: var(--link); } .hd-meter b.warn { background: var(--warn); } .hd-meter b.bad { background: var(--bad); }
.hd-stock { display: inline-block; padding: 2px 8px; border-radius: 999px; font-size: 12px; font-weight: 500; white-space: nowrap; transition: background .3s, color .3s; }
.hd-stock.ok { background: color-mix(in oklch, var(--ok) 12%, transparent); color: var(--ok); }
.hd-stock.warn { background: color-mix(in oklch, var(--warn) 15%, transparent); color: var(--warn); }
.hd-stock.bad { background: color-mix(in oklch, var(--bad) 12%, transparent); color: var(--bad); }
.hd-tip { position: absolute; z-index: 30; padding: 6px 10px; border-radius: 8px; background: var(--fg); color: #fff; font-size: 12px; white-space: nowrap; opacity: 0; transform: translateY(4px); transition: opacity .15s, transform .15s; pointer-events: none; }
.hd-tip.show { opacity: 1; transform: none; }
.hd-stock-dlg { width: 512px; }
.hd-stock-f { display: grid; grid-template-columns: 1fr 1fr 1.2fr auto; gap: 12px; align-items: end; }
.hd-stock-f .hd-field { width: 100%; }
.hd-batches { display: grid; gap: 6px; }
.hd-batches > div { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 8px 12px; border-radius: 12px; background: color-mix(in oklch, var(--sec) 60%, transparent); font-size: 14px; }
.hd-batches p span { margin-left: 8px; color: var(--mut); } .hd-batches small { font-size: 12px; color: var(--mut); }
.hd-batches .hd-ib { color: var(--mut); width: 36px; height: 36px; } .hd-batches .hd-ib .ic { width: 16px; height: 16px; }
.hd-batches > div.enter { animation: hd-row-in .45s cubic-bezier(.2,.65,.25,1) both; }
.hd-tiles { margin-bottom: 24px; display: grid; grid-template-columns: repeat(4, 1fr); gap: 16px; }
.hd-tiles .hd-card.warn { box-shadow: var(--sh-card), 0 0 0 1px color-mix(in oklch, var(--warn) 40%, transparent); }
.hd-tiles .hd-num { margin-top: 4px; font-size: 22px; } .hd-tiles .fade.out { opacity: .15; }
.hd-sect { margin-bottom: 12px; } .hd-sect .t { font-size: 16px; font-weight: 600; letter-spacing: -0.02em; } .hd-sect .n { margin-top: 2px !important; font-size: 13px; color: var(--mut); }
.hd-sup td b { font-weight: 500; } .hd-sup td small { margin-left: 8px; font-size: 12px; color: var(--mut); } .hd-sup .mut { color: var(--mut); }
.hd-sup th.r, .hd-sup td.r { text-align: right; }
.hd-sup tr.unk { background: rgb(245 158 11 / 0.05); } .hd-sup tr.unk td:first-child b { color: rgb(180 83 9); }
.hd-sup tr.tot td { border-top: 1px solid var(--bd); }
.hd-sup tbody tr { transition: opacity .3s, background .3s; } .hd-sup tbody tr.dim { opacity: .3; } .hd-sup tbody tr.pick { background: color-mix(in oklch, var(--sec) 80%, transparent); }
.hd-lsync { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 12px 16px; border: 1px solid var(--bd); border-radius: 8px; background: var(--bg); }
.hd-lsync b { display: block; font-size: 14px; font-weight: 500; } .hd-lsync small { font-size: 12px; color: var(--mut); }
.hd-lsync .spin .ic { animation: hd-spin 1s linear infinite; }
@keyframes hd-spin { to { transform: rotate(360deg); } }
.hd-inv th { padding: 8px 12px; background: color-mix(in oklch, var(--sec) 50%, transparent); font-size: 12px; color: var(--mut); }
.hd-inv td { padding: 10px 12px; } .hd-inv td b { font-weight: 500; } .hd-inv .r { text-align: right; } .hd-inv .mut { color: var(--mut); }
.hd-inv tr.enter td { animation: hd-row-in .5s cubic-bezier(.2,.65,.25,1) both; }

/* ================================================================ profit, reports, refunds */
/* breakdown-detail-sheet.tsx */
.hd-detail { width: 512px; }
.hd-detail .hd-sb { font-size: 13px; }
.hd-dh { margin-bottom: 6px !important; font-size: 12px; font-weight: 500; letter-spacing: 0.025em; text-transform: uppercase; color: var(--mut); }
.hd-bd-dl { padding: 12px; border-radius: 12px; background: color-mix(in oklch, var(--sec) 60%, transparent); }
.hd-bd-dl > div { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; padding: 4px 0; font-size: 13px; }
.hd-bd-dl dt { color: var(--mut); } .hd-bd-dl dt small { margin-left: 6px; font-size: 12px; } .hd-bd-dl dd { color: var(--fg); }
.hd-bd-dl .tot { border-top: 1px solid color-mix(in oklch, var(--bd) 60%, transparent); font-weight: 600; } .hd-bd-dl .tot dt { color: var(--fg); }
.hd-dn { margin-top: 6px !important; font-size: 12px; color: var(--mut); line-height: 1.5; }
.hd-dorders li { display: flex; align-items: flex-start; justify-content: space-between; gap: 12px; padding: 8px 0; border-bottom: 1px solid color-mix(in oklch, var(--bd) 60%, transparent); }
.hd-dorders li:last-child { border-bottom: 0; }
.hd-dorders p { font-size: 13px; } .hd-dorders a { font-weight: 500; color: var(--link); } .hd-dorders small { display: block; margin-top: 2px; font-size: 12px; color: var(--mut); } .hd-dorders b { font-weight: 500; white-space: nowrap; }
/* reports-view.tsx */
.hd-rep-g { display: grid; grid-template-columns: 1fr 1fr; gap: 20px; }
.hd-rep-h { display: flex; align-items: flex-start; gap: 12px; }
.hd-rep-h > span { flex: none; width: 40px; height: 40px; display: grid; place-items: center; border-radius: 12px; background: var(--sec); color: var(--mut); }
.hd-rep-h > span .ic { width: 20px; height: 20px; } .hd-rep-h .hd-cd { margin-top: 4px !important; } .hd-rep-h .hd-cd b { font-weight: 600; color: var(--fg); }
.hd-dlb { position: absolute; top: 52px; right: 16px; z-index: 26; display: flex; align-items: center; gap: 10px; width: 300px; padding: 12px 14px; border-radius: 12px; background: #fff; box-shadow: 0 0 0 1px rgb(0 0 0 / 0.08), 0 12px 30px rgb(0 0 0 / 0.16); font: 13px -apple-system, BlinkMacSystemFont, "Inter", sans-serif; opacity: 0; transform: translateY(-6px); transition: opacity .25s, transform .25s; pointer-events: none; }
.hd-dlb.show { opacity: 1; transform: none; }
.hd-dlb > span { width: 32px; height: 32px; display: grid; place-items: center; border-radius: 8px; background: #e8f0fe; color: #1a73e8; } .hd-dlb > span .ic { width: 16px; height: 16px; }
.hd-dlb b { display: block; font-weight: 500; color: #202124; } .hd-dlb small { font-size: 12px; color: #5f6368; }
/* lib/pdf/pnl-pdf.ts, page one, in the browser's PDF viewer */
.hd-pdf { position: absolute; inset: 0; z-index: 27; display: flex; flex-direction: column; background: #525659; opacity: 0; visibility: hidden; transition: opacity .3s, visibility 0s .3s; }
.hd-win.pdf .hd-pdf { opacity: 1; visibility: visible; transition-delay: 0s; }
.hd-pdf-bar { flex: none; height: 48px; display: flex; align-items: center; gap: 24px; padding: 0 20px; background: #323639; color: #f1f3f4; font: 13px -apple-system, BlinkMacSystemFont, "Inter", sans-serif; }
.hd-pdf-bar span:first-child { flex: 1; } .hd-pdf-bar .ic { width: 16px; height: 16px; }
.hd-pdf-scroll { flex: 1; overflow: hidden; padding: 24px 0; }
.hd-pdf-page { width: 640px; min-height: 905px; margin: 0 auto; padding: 46px 48px; background: #fff; box-shadow: 0 2px 10px rgb(0 0 0 / 0.4); font-family: Helvetica, Arial, sans-serif; color: #111827; letter-spacing: 0; transition: transform .9s cubic-bezier(.3,.7,.2,1); }
.hd-pdf-page .wm { width: 86px; height: auto; color: #111827; }
.hd-pdf-page .gen { margin-top: 6px !important; font-size: 11px; color: #6b7280; }
.hd-pdf-page .h2x { margin: 18px 0 2px; font-size: 27px; font-weight: 700; letter-spacing: 0; border: 0; padding: 0; }
.hd-pdf-page .sub { font-size: 11px; color: #6b7280; }
.hd-pdf-page .lines { margin-top: 20px; font-size: 12.5px; }
.hd-pdf-page .lines > div { display: flex; justify-content: space-between; gap: 16px; padding: 3px 0; }
.hd-pdf-page .lines > div.in { padding-left: 16px; color: #6b7280; } .hd-pdf-page .lines > div.in2 { padding-left: 32px; color: #6b7280; }
.hd-pdf-page .lines > div.in span:last-child, .hd-pdf-page .lines > div.in2 span:last-child { color: #111827; }
.hd-pdf-page .lines > div.b { font-weight: 700; }
.hd-pdf-page .lines > div.net { padding: 6px 0; font-size: 14.5px; font-weight: 700; } .hd-pdf-page .lines > div.net span:last-child { color: #15803d; }
.hd-pdf-page .lines > div.up span:last-child { color: #15803d; }
.hd-pdf-page .rule { display: block; height: 1px; margin: 6px 0; background: #e5e7eb; }
.hd-pdf-page .link { margin: 2px 0 6px 16px !important; font-size: 10px; color: #6b7280; } .hd-pdf-page .link u { color: #111827; }
.hd-pdf-page .note { margin: 6px 0 0 !important; font-size: 10.5px; color: #6b7280; line-height: 1.45; padding: 0; border: 0; background: none; }
.hd-pdf-page .h3x { margin: 22px 0 6px; font-size: 14px; font-weight: 700; }
/* analytics-view.tsx */
.hd-chart { position: relative; height: 280px; padding: 8px 8px 24px 60px; }
.hd-chart .grid { position: absolute; left: 60px; right: 8px; top: 8px; bottom: 24px; display: flex; flex-direction: column; justify-content: space-between; }
.hd-chart .grid i { display: block; border-top: 1px dashed var(--bd); }
.hd-line { position: absolute; left: 60px; top: 8px; width: calc(100% - 68px); height: calc(100% - 32px); overflow: visible; opacity: 0; transition: opacity .35s; }
.hd-line.on { opacity: 1; }
.hd-line path { fill: none; stroke: oklch(0.62 0.17 130.7); stroke-width: 2; vector-effect: non-scaling-stroke; stroke-linejoin: round; }
.hd-line.on path { stroke-dasharray: 2400; stroke-dashoffset: 0; animation: hd-draw 1.1s ease-out; }
@keyframes hd-draw { from { stroke-dashoffset: 2400; } }
.hd-yax { position: absolute; left: 0; top: 0; bottom: 18px; width: 52px; display: flex; flex-direction: column; justify-content: space-between; text-align: right; font-size: 12px; color: var(--mut); opacity: 0; transition: opacity .35s; }
.hd-yax.on { opacity: 1; }
.hd-xax { position: absolute; left: 60px; right: 8px; bottom: 0; display: flex; justify-content: space-between; font-size: 12px; color: var(--mut); }
.hd-an2 { display: grid; grid-template-columns: 1fr 1fr; gap: 20px; }
.hd-plist li { display: flex; align-items: center; gap: 12px; padding: 12px 0; border-bottom: 1px solid color-mix(in oklch, var(--bd) 60%, transparent); font-size: 14px; }
.hd-plist li:last-child { border-bottom: 0; } .hd-plist span { flex: 1; min-width: 0; } .hd-plist b { display: block; font-weight: 400; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .hd-plist small { font-size: 12px; color: var(--mut); }
.hd-plist em { font-style: normal; font-weight: 500; } .hd-plist em.pos { color: var(--ok); }
.hd-ins .c { display: flex; align-items: flex-start; gap: 16px; padding: 4px 24px; }
.hd-ins .c > span:first-child { flex: none; width: 40px; height: 40px; display: grid; place-items: center; border-radius: 12px; }
.hd-ins .c > span .ic { width: 20px; height: 20px; }
.hd-ins span.warn { background: color-mix(in oklch, var(--warn) 12%, transparent); color: var(--warn); }
.hd-ins span.bad { background: color-mix(in oklch, var(--bad) 12%, transparent); color: var(--bad); }
.hd-ins span.ok { background: color-mix(in oklch, var(--ok) 12%, transparent); color: var(--ok); }
.hd-ins .c > div { flex: 1; min-width: 0; } .hd-ins .c > div > p:first-child { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; }
.hd-ins b { font-weight: 600; letter-spacing: -0.01em; } .hd-ins em { font-style: normal; }
.hd-ins .b { margin-top: 6px !important; font-size: 14px; line-height: 1.625; color: var(--mut); }
.hd-ins .x { flex: none; width: 32px; height: 32px; display: grid; place-items: center; border-radius: 999px; color: var(--mut); }
.hd-ins { transition: opacity .3s, transform .3s; } .hd-ins.leave { opacity: 0; transform: translateX(12px); }
/* finance-view.tsx */
.hd-flow { display: grid; grid-template-columns: repeat(5, 1fr); border-top: 1px solid color-mix(in oklch, var(--bd) 60%, transparent); }
.hd-flow > div { padding: 16px 20px; } .hd-flow > div + div { border-left: 1px solid color-mix(in oklch, var(--bd) 60%, transparent); }
.hd-flow .hd-num { margin-top: 4px; font-size: 20px; } .hd-flow.fade.out { opacity: .15; }
.hd-fin2 { display: grid; grid-template-columns: 1fr 1.3fr; gap: 16px; } .hd-fin2 .hd-t td b { font-weight: 500; } .hd-fin2 .r { text-align: right; } .hd-fin2 .mut { color: var(--mut); }
.hd-num.pos { color: var(--ok); }
/* refunds */
.hd-wbox { padding: 16px; border-radius: 12px; border: 1px solid color-mix(in oklch, var(--warn) 25%, transparent); background: color-mix(in oklch, var(--warn) 8%, transparent); font-size: 14px; line-height: 1.5; }
.hd-wbox b { font-weight: 500; }
.hd-dts { font-size: 14px; } .hd-dts2 { display: block; font-size: 12px; color: var(--mut); }
.hd-table .t-flag, .hd-table .t-flag.claim { display: inline-flex; align-items: center; height: 24px; padding: 0 4px; border-radius: 999px; background: var(--sec); color: var(--fg); font-size: 10px; font-weight: 500; font-style: normal; }
.hd-table .s { font-size: 13px; }
.hd-bdg.pill { cursor: pointer; }
/* refund-attribution-card.tsx */
.hd-attr { margin-bottom: 32px; padding: 24px; border-radius: 18px; background: linear-gradient(135deg, color-mix(in oklch, var(--prim) 8%, #fff), color-mix(in oklch, var(--prim) 2%, #fff)); box-shadow: var(--sh-card); overflow: hidden; transition: opacity .35s, max-height .5s ease .15s, margin .5s ease .15s, padding .5s ease .15s; max-height: 400px; }
.hd-attr.leave { opacity: 0; max-height: 0; margin-bottom: 0; padding-top: 0; padding-bottom: 0; }
.hd-attr .t { font-size: 16px; font-weight: 600; letter-spacing: -0.02em; } .hd-attr .d { margin-top: 2px !important; font-size: 14px; color: var(--mut); }
.hd-attr .o { margin-top: 16px; display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.hd-attr .o > span { padding: 16px; border-radius: 18px; border: 1px solid var(--bd); background: var(--card); transition: border-color .2s, background .2s; }
.hd-attr .o > span.hov { border-color: color-mix(in oklch, var(--prim) 60%, transparent); background: color-mix(in oklch, var(--sec) 40%, #fff); }
.hd-attr .o b { display: flex; align-items: center; gap: 8px; font-weight: 500; font-size: 14px; } .hd-attr .o b .ic { width: 16px; height: 16px; color: var(--mut); }
.hd-attr .o > span > span { display: block; margin-top: 6px; font-size: 14px; line-height: 1.625; color: var(--mut); }
.hd-attr .o em { margin-top: 12px; display: inline-flex; padding: 6px 14px; border-radius: 999px; background: var(--sec); font-style: normal; font-size: 13px; font-weight: 500; }

/* ================================================================ getting started, account */
/* (auth)/layout.tsx and auth-showcase.tsx */
.hd-auth { position: absolute; inset: 0; z-index: 24; display: grid; place-items: center; background: #F8FAFC radial-gradient(rgba(15,23,42,0.08) 1px, transparent 1.4px) 0 0 / 22px 22px; color: #020617; opacity: 0; visibility: hidden; transition: opacity .35s, visibility 0s .35s; }
.hd-win.auth .hd-auth { opacity: 1; visibility: visible; transition-delay: 0s; }
.hd-auth-card { display: grid; grid-template-columns: 60fr 40fr; gap: 10px; width: 1020px; min-height: 720px; padding: 10px; border-radius: 16px; border: 1px solid rgb(226 232 240 / 0.9); background: #fff; box-shadow: 0 20px 25px -5px rgb(0 0 0 / 0.1), 0 8px 10px -6px rgb(0 0 0 / 0.1); }
.hd-auth-show { position: relative; display: flex; flex-direction: column; justify-content: space-between; padding: 32px; border-radius: 14px; overflow: hidden; color: #fff; background: radial-gradient(80% 60% at 30% 110%, rgba(174,255,70,0.22), transparent 70%), #090d11; }
.hd-auth-show .top { display: flex; align-items: center; gap: 10px; } .hd-auth-show .top svg { width: 88px; height: auto; color: #fff; }
.hd-auth-show .top i { width: 6px; height: 6px; border-radius: 50%; background: #AEFF46; box-shadow: 0 0 0 4px rgba(174,255,70,0.15); }
.hd-auth-show .pill { display: inline-flex; padding: 4px 10px; border-radius: 999px; border: 1px solid rgb(255 255 255 / 0.1); background: rgb(255 255 255 / 0.06); font-size: 10px; font-weight: 500; letter-spacing: 0.05em; text-transform: uppercase; color: #cbd5e1; }
.hd-auth-show .t { margin-top: 14px !important; font-size: 20px; font-weight: 600; letter-spacing: -0.02em; line-height: 1.3; }
.hd-auth-show .s { margin-top: 6px !important; max-width: 384px; font-size: 13px; line-height: 1.6; color: #94a3b8; }
.hd-auth-show .ord { margin-top: 16px; display: inline-flex; align-items: center; gap: 8px; padding: 4px 14px 4px 6px; border-radius: 999px; border: 1px solid rgb(255 255 255 / 0.1); background: rgb(255 255 255 / 0.05); font-size: 10px; color: #94a3b8; }
.hd-auth-show .ord i { width: 16px; height: 16px; display: grid; place-items: center; border-radius: 50%; background: rgba(174,255,70,0.15); color: #AEFF46; } .hd-auth-show .ord .ic { width: 10px; height: 10px; }
.hd-auth-show .ord b { color: rgb(255 255 255 / 0.25); font-weight: 400; } .hd-auth-show .ord em { font-style: normal; font-weight: 600; color: #fff; }
.hd-auth-show ol { margin-top: 24px; display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; }
.hd-auth-show li { padding: 10px 12px; border-radius: 12px; border: 1px solid rgb(255 255 255 / 0.08); background: rgb(255 255 255 / 0.03); }
.hd-auth-show li.on { border-color: rgba(174,255,70,0.35); background: rgba(174,255,70,0.06); }
.hd-auth-show li b { display: block; font-size: 12px; font-weight: 600; color: #fff; } .hd-auth-show li span { font-size: 10px; color: #94a3b8; }
.hd-auth-form { display: flex; flex-direction: column; justify-content: center; padding: 24px 40px; }
.hd-at { font-size: 24px; font-weight: 700; letter-spacing: -0.025em; color: #020617; }
.hd-as { margin-top: 4px !important; font-size: 14px; color: #64748b; } .hd-as b { color: #020617; }
.hd-afields { margin-top: 28px; display: grid; gap: 14px; }
.hd-afields .two { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.hd-alb { display: block; margin-bottom: 6px; font-size: 12px; font-weight: 600; letter-spacing: 0.05em; text-transform: uppercase; color: #334155; }
.hd-alb small { font-size: 11px; font-weight: 400; text-transform: none; letter-spacing: 0; color: #94a3b8; }
.hd-alb2 { display: flex; justify-content: space-between; } .hd-alb2 em { font-style: normal; font-weight: 500; text-transform: none; letter-spacing: 0; color: #0f172a; text-decoration: underline; text-underline-offset: 3px; }
.hd-ain { display: flex; align-items: center; height: 40px; padding: 0 14px; border-radius: 10px; border: 1px solid #cbd5e1; background: #fff; font-size: 14px; color: #020617; overflow: hidden; white-space: nowrap; transition: border-color .15s, box-shadow .15s; }
.hd-ain.ph { color: #94a3b8; } .hd-ain.focus { border-color: #0f172a; box-shadow: 0 0 0 3px rgb(15 23 42 / 0.08); }
.hd-ain.focus .hd-caret { display: inline-block; }
.hd-abtn { margin-top: 8px; display: inline-flex; align-items: center; justify-content: center; height: 44px; width: 100%; border-radius: 999px; background: #AEFF46; font-size: 14px; font-weight: 600; color: #020617; box-shadow: 0 1px 2px rgb(0 0 0 / 0.05); transition: transform .12s, filter .15s; }
.hd-abtn.busy { filter: saturate(.6) brightness(1.04); }
.hd-afoot { margin-top: 20px !important; font-size: 14px; color: #64748b; } .hd-afoot b { font-weight: 600; color: #020617; text-decoration: underline; text-underline-offset: 3px; }
/* shell/trial-pill.tsx */
.hd-trial { display: inline-flex; align-items: center; gap: 6px; height: 32px; padding: 0 12px; border-radius: 999px; border: 1px solid color-mix(in oklch, var(--bd) 60%, transparent); background: color-mix(in oklch, var(--sec) 60%, transparent); font-size: 12px; font-weight: 500; color: var(--mut); white-space: nowrap; transition: background .3s, color .3s, border-color .3s; }
.hd-trial .ic { width: 14px; height: 14px; } .hd-trial b { font-weight: 500; color: var(--fg); }
.hd-trial.urgent { border-color: color-mix(in oklch, var(--warn) 40%, transparent); background: color-mix(in oklch, var(--warn) 10%, transparent); color: var(--warn); }
/* plan-lapsed-overlay.tsx */
.hd-lapse { position: absolute; inset: 0; z-index: 14; display: grid; place-items: center; padding: 24px; background: color-mix(in oklch, var(--bg) 60%, transparent); -webkit-backdrop-filter: blur(12px); backdrop-filter: blur(12px); opacity: 0; visibility: hidden; transition: opacity .5s, visibility 0s .5s; }
.hd-win.lapsed .hd-lapse { opacity: 1; visibility: visible; transition-delay: 0s; }
.hd-lapse > div { width: 448px; padding: 32px; border-radius: 24px; border: 1px solid color-mix(in oklch, var(--bd) 60%, transparent); background: var(--card); text-align: center; box-shadow: var(--sh-raised); }
.hd-lapse > div > span:first-child { margin: 0 auto 20px; width: 56px; height: 56px; display: grid; place-items: center; border-radius: 16px; background: color-mix(in oklch, var(--prim) 15%, transparent); }
.hd-lapse > div > span:first-child .ic { width: 24px; height: 24px; }
.hd-lapse .h2x { margin: 0; font-size: 20px; font-weight: 600; letter-spacing: -0.02em; border: 0; padding: 0; }
.hd-lapse p { margin-top: 10px !important; font-size: 14px; line-height: 1.625; color: var(--mut); }
.hd-lapse .hd-btn { margin-top: 24px; } .hd-lapse small { display: block; margin-top: 12px; font-size: 12px; color: var(--mut); }
/* settings/billing */
.hd-bill2 { display: grid; grid-template-columns: 1fr 1fr; gap: 20px; }
.hd-planrow { display: flex; align-items: center; gap: 8px; } .hd-planrow .big { font-size: 28px; font-weight: 600; letter-spacing: -0.02em; }
.hd-trialnote { margin-top: 10px !important; font-size: 14px; color: var(--mut); line-height: 1.5; } .hd-trialnote.bad { color: var(--bad); }
.hd-planpick { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
.hd-planpick .hd-card { padding: 20px 0; } .hd-planpick .c { padding: 0 20px; }
.hd-planpick .name { font-size: 14px; font-weight: 600; }
.hd-planpick .price { font-size: 24px; font-weight: 600; letter-spacing: -0.02em; } .hd-planpick .price small { font-size: 14px; font-weight: 400; color: var(--mut); }
.hd-planpick .price span { transition: opacity .2s; }
.hd-planpick ul { display: grid; gap: 6px; font-size: 14px; color: var(--mut); } .hd-planpick li { display: flex; align-items: center; gap: 8px; } .hd-planpick li .ic { width: 14px; height: 14px; color: var(--ok); }
.hd-hint2 { margin-top: 6px !important; font-size: 12px; line-height: 1.55; color: var(--mut); } .hd-hint2 b { font-weight: 600; color: var(--fg); } .hd-hint2 .mut { color: var(--mut); }
.hd-hint2.lit { background: color-mix(in oklch, var(--prim) 18%, transparent); border-radius: 6px; padding: 4px 6px; margin-left: -6px !important; }
/* settings/activity */
.hd-acts-l > div { display: flex; align-items: center; justify-content: space-between; gap: 16px; padding: 12px 0; border-bottom: 1px solid color-mix(in oklch, var(--bd) 60%, transparent); }
.hd-acts-l > div:last-child { border-bottom: 0; }
.hd-acts-l b { display: block; font-size: 14px; font-weight: 500; } .hd-acts-l small { font-size: 12px; color: var(--mut); } .hd-acts-l span { font-size: 12px; color: var(--mut); white-space: nowrap; }
.hd-acts-l > div.warn b { color: var(--warn); }
.hd-acts-l > div { animation: hd-row-in .4s cubic-bezier(.2,.65,.25,1) both; }
/* notification-bell.tsx: PopoverContent w-96 */
.hd-ib[data-c="bell"] { position: relative; }
.hd-pop { position: absolute; right: -8px; top: calc(100% + 8px); z-index: 30; width: 384px; border-radius: 12px; background: var(--popover); box-shadow: 0 0 0 1px color-mix(in oklch, var(--fg) 10%, transparent), 0 10px 25px rgb(0 0 0 / 0.12); text-align: left; opacity: 0; transform: scale(0.97); transform-origin: top right; pointer-events: none; transition: opacity .12s, transform .12s; }
.hd-pop.open { opacity: 1; transform: none; }
.hd-pop-h { display: flex; align-items: center; justify-content: space-between; padding: 12px 16px; border-bottom: 1px solid var(--bd); }
.hd-pop-h b { font-size: 14px; font-weight: 600; } .hd-pop-h span { font-size: 12px; font-weight: 500; color: var(--link); }
.hd-pop-i { display: flex; gap: 10px; padding: 12px 16px; border-bottom: 1px solid color-mix(in oklch, var(--bd) 60%, transparent); transition: background .3s; }
.hd-pop-i.unread { background: color-mix(in oklch, var(--link) 5%, transparent); }
.hd-pop-i > i { flex: none; width: 6px; height: 6px; margin-top: 7px; border-radius: 50%; background: transparent; transition: background .3s; } .hd-pop-i.unread > i { background: var(--link); }
.hd-pop-i > span { min-width: 0; flex: 1; } .hd-pop-i .r { display: flex; justify-content: space-between; gap: 8px; } .hd-pop-i .r b { font-size: 14px; font-weight: 500; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .hd-pop-i .r small { font-size: 12px; color: var(--mut); }
.hd-pop-i .b { display: block; margin-top: 2px; font-size: 12px; line-height: 1.6; color: var(--mut); }
.hd-pop-f { display: block; padding: 10px 16px; font-size: 12px; font-weight: 500; color: var(--link); }
.hd-ib em.gone { display: none; }
.hd-nrow { display: flex; align-items: flex-start; gap: 12px; padding: 16px 20px; border-bottom: 1px solid color-mix(in oklch, var(--bd) 60%, transparent); }
.hd-nrow:last-child { border-bottom: 0; } .hd-nrow > i { flex: none; width: 6px; height: 6px; margin-top: 8px; border-radius: 50%; }
.hd-nrow > div { flex: 1; } .hd-nrow p { display: flex; align-items: center; gap: 8px; } .hd-nrow b { font-size: 14px; font-weight: 500; } .hd-nrow small { display: block; margin-top: 2px; font-size: 13px; color: var(--mut); } .hd-nrow .w { font-size: 12px; color: var(--mut); }
/* topbar.tsx avatar menu */
.hd-avatar { position: relative; }
.hd-dd-r { left: auto; right: 0; transform-origin: top right; } .hd-dd .lab b { display: block; font-size: 14px; font-weight: 500; color: var(--fg); } .hd-dd .lab small { font-size: 12px; font-weight: 400; color: var(--mut); }
.hd-dd .it .ic { width: 16px; height: 16px; color: var(--mut); }
/* support/page.tsx */
.hd-sup2 { display: grid; grid-template-columns: 1fr 1fr; gap: 24px; align-items: start; }
.hd-area { height: 112px; align-items: flex-start; padding-top: 10px; white-space: normal; line-height: 1.5; }
.hd-tix { display: grid; gap: 8px; }
.hd-tix > div { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; padding: 12px; border-radius: 12px; border: 1px solid var(--bd); font-size: 14px; }
.hd-tix .n { font-size: 12px; color: var(--mut); } .hd-tix b { flex: 1; min-width: 0; font-weight: 500; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .hd-tix small { font-size: 12px; color: var(--mut); }
.hd-tix > div.enter { animation: hd-row-in .45s cubic-bezier(.2,.65,.25,1) both; }
/* orders/outside */
.hd-table .why { white-space: normal; max-width: 460px; } .hd-table .why small { display: block; margin-top: 4px; font-size: 12px; line-height: 1.5; color: var(--mut); }
.hd-table tbody tr.out { display: none; }

/* Suppliers → Cost added by date (daily-cost-table.tsx, purchase-list.tsx) */
.hd-sect-a { display: flex; align-items: flex-end; justify-content: space-between; gap: 8px; }
.hd-showall { font-size: 14px; color: var(--fg); padding-bottom: 2px; }
.hd-showall.pressed { text-decoration: underline; text-underline-offset: 4px; }
.hd-fine { margin-top: 12px !important; font-size: 12px; color: var(--mut); }
.hd-days th.v, .hd-days td.v { width: 96px; padding-right: 0; }
.hd-days tr.mut td { color: var(--mut); }
.hd-days td.dl.b { font-weight: 500; }
.hd-days td.xs { font-size: 12px; white-space: normal; }
.hd-days tbody tr.sel > td { background: var(--sec); }
.hd-split { display: flex; flex-wrap: wrap; gap: 2px 12px; }
.hd-split > span { white-space: nowrap; }
.hd-split .mut { color: var(--mut); } .hd-split .warn, .hd-lines .warn { color: rgb(180 83 9); }
.hd-wait { font-weight: 500; color: rgb(180 83 9); }
.hd-view .ic { transition: transform .2s; } .hd-view.open .ic { transform: rotate(90deg); }
.hd-days tr.hd-open > td { padding: 12px; background: color-mix(in oklch, var(--sec) 40%, transparent); white-space: normal; }
.hd-open-c { overflow: hidden; border-radius: 10px; background: var(--card); }
.hd-open-l { padding: 12px 8px; font-size: 14px; color: var(--mut); }
.hd-lines { font-size: 14px; }
.hd-lines td .it { max-width: 288px; overflow: hidden; text-overflow: ellipsis; }
.hd-days .hd-lines td small { display: block; margin: 0; font-size: 12px; color: var(--mut); }
.hd-days .hd-lines tbody tr { animation: hd-row-in .4s cubic-bezier(.2,.65,.25,1) both; }
.hd-days .hd-lines tbody tr:nth-child(2) { animation-delay: .05s; } .hd-days .hd-lines tbody tr:nth-child(3) { animation-delay: .1s; }
.hd-days .hd-lines tbody tr:nth-child(4) { animation-delay: .15s; } .hd-days .hd-lines tbody tr:nth-child(5) { animation-delay: .2s; }
.hd-days .hd-lines tbody tr:nth-child(6) { animation-delay: .25s; }