/* ============================================================================
   SellFalcon - the tool's design system (redesign, September 2026)

   Loaded on every APP page (dashboard, editor, reports, settings, account,
   support) after site.css. It owns the application shell (rail, header,
   main) and every primitive the redesign draws: buttons, inputs, chips,
   pills, segmented controls, cards, tables, menus, dialogs, toasts,
   skeletons and empty states. Page stylesheets add only their own layouts.

   Rules the redesign fixed and this file enforces:
   - Controls are 36px tall minimum inside the tool. No text under 12px.
   - Figures carry tabular numerals so nothing wiggles as they change.
   - Fills (--acc, --pos, --warn, --neg) never carry text on a flipping
     surface; text on a panel uses the *i ink of its family.
   - Empty is a middle dot, never a dash.
   - Glass is for floating chrome only, never a content card.
   - Motion is short and purposeful; prefers-reduced-motion switches it off.
   ============================================================================ */

/* ------------------------------ Motion ------------------------------------ */
@keyframes sfRise { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: none; } }
@keyframes sfIn { from { opacity: 0; transform: translateY(10px) scale(.98); } to { opacity: 1; transform: none; } }
@keyframes sfPop { from { opacity: 0; transform: translateY(5px); } to { opacity: 1; transform: none; } }
@keyframes sfFade { from { opacity: 0; } to { opacity: 1; } }
@keyframes sfOutFade { to { opacity: 0; transform: translateY(6px); } }
@keyframes sfOut { to { opacity: 0; transform: translateX(18px); max-height: 0; padding-top: 0; padding-bottom: 0; margin: 0; } }
@keyframes sfSpin { to { transform: rotate(360deg); } }
@keyframes sfShim { 100% { background-position: 200% 0; } }
/* Named by the account avatar and the Settings tab's active bar, and defined
   nowhere until now - so both animations were a no-op the browser dropped on
   the floor. A short vertical reveal, which is what a 2.5px bar beside a tab
   and a single letter in a circle were each asking for. */
@keyframes sfLetter { from { opacity: 0; transform: scaleY(.4); } to { opacity: 1; transform: none; } }
@keyframes sfPulse { 0%, 100% { box-shadow: 0 0 0 0 rgba(24, 168, 93, .45); } 55% { box-shadow: 0 0 0 6px rgba(24, 168, 93, 0); } }
@keyframes sfGrow { from { transform: scaleX(0); } to { transform: scaleX(1); } }
@keyframes sfDraw { from { stroke-dashoffset: 600; } to { stroke-dashoffset: 0; } }
@keyframes sfTick { 0% { transform: scale(.4); opacity: 0; } 60% { transform: scale(1.15); opacity: 1; } 100% { transform: none; } }
@keyframes sfZoomIn { from { opacity: 0; transform: scale(.72) translateY(18px); } 60% { opacity: 1; } to { opacity: 1; transform: none; } }
@keyframes sfSlideIn { from { opacity: 0; transform: translateX(-10px); } to { opacity: 1; transform: none; } }
@keyframes sfAiShimmer { 0% { background-position: 200% 0; } 100% { background-position: -200% 0; } }
@keyframes sfAiSpin { 0% { transform: rotate(0) scale(1); } 50% { transform: rotate(180deg) scale(1.25); } 100% { transform: rotate(360deg) scale(1); } }
@keyframes sfAiDots { 0%, 80%, 100% { opacity: .25; transform: translateY(0); } 40% { opacity: 1; transform: translateY(-2px); } }
@keyframes sfCaret { 50% { opacity: 0; } }
@keyframes sfGlow { 0% { box-shadow: 0 0 0 0 rgba(var(--acc-rgb), .45); } 100% { box-shadow: 0 0 0 14px rgba(var(--acc-rgb), 0); } }
@keyframes sfKnob { 0% { transform: scaleX(1); } 40% { transform: scaleX(1.25); } 100% { transform: scaleX(1); } }
@keyframes sfGrowY { from { transform: scaleY(0); } to { transform: scaleY(1); } }
@keyframes sfChipPop { 0% { transform: scale(.6); opacity: 0; } 55% { transform: scale(1.14); opacity: 1; } 100% { transform: none; opacity: 1; } }

/* ------------------------------ Page frame -------------------------------- */
html.app-html, html.app-html body { height: 100%; }
body.app-body {
  margin: 0;
  height: 100vh;
  height: 100dvh;
  overflow: hidden;
  font-family: var(--font-sans);
  font-size: 14px;
  line-height: 1.5;
  color: var(--ink);
  background: var(--pg);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}
.app-body ::selection { background: var(--accw); }
.app-body :focus-visible { outline: 2px solid var(--acc); outline-offset: 2px; border-radius: 6px; box-shadow: none; }
.app-body ::-webkit-scrollbar { width: 10px; height: 10px; }
.app-body ::-webkit-scrollbar-track { background: transparent; }
.app-body ::-webkit-scrollbar-thumb { background: var(--ln2); border-radius: 99px; border: 3px solid transparent; background-clip: content-box; }
.app-body a { color: var(--acci); }
.app-body a:hover { color: var(--acci); }
/* Navigation and chips are links for the right click and middle click, not
   for the blue: the rail reads in ink like the design, chips in dim. */
.app-body a.rail-item { color: var(--ink2); }
.app-body a.rail-item:hover { color: var(--ink); }
.app-body a.rail-item[aria-current="page"], .app-body a.rail-item[aria-current="page"]:hover { color: #fff; }
.app-body a.head-chip { color: var(--dim); }
.app-body a.head-chip:hover { color: var(--acci); }
.app-body a.pill { color: var(--dim); }
.app-body a.pill:hover { color: var(--ink); }
.app-body a.pill[aria-selected="true"], .app-body a.pill.on, .app-body a.pill.on:hover { color: #fff; }
.app-body button, .app-body input, .app-body select, .app-body textarea { font-family: inherit; }
.app-body button { transition: transform .14s var(--ez), background .18s var(--ez), border-color .18s var(--ez), color .18s var(--ez), box-shadow .18s var(--ez); }
.app-body button:not(:disabled):active { transform: scale(.98); }
.app-body h1, .app-body h2, .app-body h3, .app-body h4 { margin: 0; }
.app-body p { margin: 0; }
.app-body .tnum, .app-body .num { font-variant-numeric: tabular-nums; }
.app-body .ell { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; min-width: 0; }
.app-body [hidden] { display: none !important; }
/* The tool has a Support page; the public site's chat bubble never belongs here. */
.app-body .sf-bubble, .app-body .sf-bubble-panel { display: none !important; }

.app {
  height: 100%;
  display: grid;
  grid-template-columns: var(--railw, 212px) minmax(0, 1fr);
  background: var(--pg);
  color: var(--ink);
  overflow: hidden;
}
.app.rail-min, html.rail-min .app { --railw: 62px; }

/* ------------------------------ Rail -------------------------------------- */
.rail {
  position: relative;
  z-index: 30;
  display: flex;
  flex-direction: column;
  gap: 2px;
  padding: 14px 10px;
  border-right: 1px solid var(--glassbd);
  background: var(--glass);
  backdrop-filter: blur(20px) saturate(180%);
  -webkit-backdrop-filter: blur(20px) saturate(180%);
  min-width: 0;
  overflow: visible;
}
.rail-brand { display: flex; align-items: center; gap: 10px; padding: 2px 4px 12px; }
/* The mark is the way home. It reloads the dashboard from any page, so
   it is a real link rather than a script handler. */
.app-body .rail-home { display: inline-flex; align-items: center; gap: 10px; min-width: 0; border-radius: 9px; text-decoration: none; color: inherit; }
.app-body .rail-home:hover { text-decoration: none; color: inherit; }
.app-body .rail-home:hover img { transform: scale(1.04); }
.rail-brand img { transition: transform .16s var(--ez); }
.app-body .rail-home:focus-visible { outline: 2px solid var(--acc); outline-offset: 3px; }
.rail-brand img { width: 30px; height: 30px; border-radius: 8px; flex: none; }
.rail-brand b { font-size: 15.5px; font-weight: 800; letter-spacing: -.02em; color: var(--ink); white-space: nowrap; overflow: hidden; }
.rail-toggle {
  margin-left: auto;
  width: 30px; height: 30px; flex: none;
  display: grid; place-items: center;
  border: 0; border-radius: 8px;
  background: transparent; color: var(--dim);
  cursor: pointer; padding: 0;
}
.rail-toggle:hover { background: var(--pn3); color: var(--ink); }

.rail-store { position: relative; display: block; margin-bottom: 12px; }
.rail-store-btn {
  display: flex; align-items: center; gap: 9px;
  width: 100%; padding: 8px 9px;
  border: 1px solid var(--ln); border-radius: 10px;
  background: var(--pn); color: var(--ink);
  cursor: pointer; text-align: left; font: inherit;
}
.rail-store-btn:hover { border-color: var(--ln2); }
.rail-store-btn[aria-expanded="true"] { border-color: var(--acc); }
.rail-store-av {
  width: 22px; height: 22px; flex: none;
  border-radius: 6px; background: var(--acc); color: #fff;
  display: grid; place-items: center;
  font-size: 12px; font-weight: 800;
}
.rail-store-txt { min-width: 0; flex: 1; overflow: hidden; }
.rail-store-txt b { display: block; font-size: 13px; font-weight: 700; line-height: normal; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; letter-spacing: -.01em; }
.rail-store-txt small { display: block; font-size: 12px; line-height: normal; color: var(--faint); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.rail-store-btn .chev { flex: none; color: var(--faint); }
.rail-store-pop {
  position: absolute; top: calc(100% + 6px); left: 0; z-index: 340;
  width: 250px; padding: 7px;
  border: 1px solid var(--ln2); border-radius: 12px;
  background: var(--glass2);
  box-shadow: var(--sh2), inset 0 1px 0 var(--glasshi);
  animation: sfIn .16s var(--ez) both;
}
.pop-h { display: block; font-size: 12px; font-weight: 800; color: var(--faint); padding: 4px 8px 6px; }
.pop-item {
  display: flex; align-items: center; gap: 9px; width: 100%;
  padding: 8px; border: 0; border-radius: 8px;
  background: transparent; color: var(--ink);
  cursor: pointer; text-align: left; font: inherit; text-decoration: none;
  transition: background .14s var(--ez);
}
.pop-item:hover { background: var(--pn2); text-decoration: none; }
.pop-item.on { background: var(--accw); }
.pop-item .av { width: 24px; height: 24px; flex: none; border-radius: 7px; background: var(--pn3); color: var(--ink2); display: grid; place-items: center; font-size: 12px; font-weight: 800; }
.pop-item.on .av { background: var(--acc); color: #fff; }
.pop-item .tx { flex: 1; min-width: 0; }
.pop-item .tx b { display: block; font-size: 12px; font-weight: 700; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.pop-item .tx small { display: block; font-size: 12px; color: var(--dim); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.pop-item .tick { flex: none; color: var(--acci); display: none; }
.pop-item.on .tick { display: block; }
.pop-item.add { color: var(--acci); font-size: 12px; font-weight: 700; }
.pop-sep { display: block; height: 1px; background: var(--ln); margin: 6px 4px; }

.rail-nav { display: flex; flex-direction: column; gap: 2px; }
.rail-item {
  position: relative;
  display: flex; align-items: center; gap: 11px;
  width: 100%; padding: 9px 10px;
  border: 0; border-radius: var(--rw);
  background: transparent; color: var(--ink2);
  font: inherit; font-size: 13.5px; font-weight: 600; line-height: normal;
  cursor: pointer; text-align: left; text-decoration: none;
  transition: background .15s var(--ez), color .15s var(--ez);
}
.rail-item:hover { background: var(--pn3); color: var(--ink); text-decoration: none; }
.rail-item[aria-current="page"] { background: var(--acc); color: #fff; font-weight: 700; }
.rail-item[aria-current="page"]:hover { background: var(--acc); color: #fff; }
.rail-item .ic { width: 18px; height: 18px; flex: none; display: grid; place-items: center; opacity: .72; }
.rail-item[aria-current="page"] .ic { opacity: 1; }
.rail-item .rail-ini { width: 20px; height: 20px; display: grid; place-items: center; border-radius: 7px; background: linear-gradient(135deg, var(--acc), var(--acc2)); color: #fff; font-size: 9.5px; font-weight: 800; letter-spacing: .02em; line-height: 1; animation: sfTick .4s var(--ez) both; }
.rail-item[aria-current="page"] .rail-ini { background: rgba(255, 255, 255, .95); color: var(--acc2); }
/* 8 September 2026: the saved profile photo on the rail's account item. */
.rail-item .rail-ava { width: 20px; height: 20px; border-radius: 7px; object-fit: cover; display: block; background: var(--pn3); animation: sfTick .4s var(--ez) both; }
.rail-item[aria-current="page"] .rail-ava { box-shadow: 0 0 0 2px rgba(255, 255, 255, .85); }
.rail-item .lbl { flex: 1; min-width: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.rail-item .cnt {
  flex: none; min-width: 20px; height: 18px; padding: 0 6px;
  display: inline-flex; align-items: center; justify-content: center;
  border-radius: 999px; background: var(--pn3); color: var(--dim);
  font-size: 12px; font-weight: 800; font-variant-numeric: tabular-nums;
}
.rail-item .cnt.warn { background: var(--warnw); color: var(--warni); }
.rail-item .cnt.bad { background: var(--negw); color: var(--negi); }
.rail-item[aria-current="page"] .cnt { background: rgba(255, 255, 255, .95); color: var(--acc2); }
.rail-item .cnt:empty { display: none; }
.rail-item .dot { position: absolute; top: 6px; right: 7px; width: 6px; height: 6px; border-radius: 50%; background: var(--warn); display: none; }
.rail-item .dot.bad { background: var(--neg); }
.rail-grow { flex: 1; }
.rail-sep { border-top: 1px solid var(--ln); margin: 8px 0; }
.rail-nav.foot .rail-item { padding: 8px 10px; font-size: 13px; }
.rail-nav.foot .rail-item .ic { opacity: .75; }

.app.rail-min .rail-home,
.app.rail-min .rail-brand img,
.app.rail-min .rail-brand b,
.app.rail-min .rail-store-txt,
.app.rail-min .rail-store-btn .chev,
.app.rail-min .rail-item .lbl,
.app.rail-min .rail-item .cnt,
html.rail-min .app .rail-home,
html.rail-min .app .rail-brand img,
html.rail-min .app .rail-brand b,
html.rail-min .app .rail-store-txt,
html.rail-min .app .rail-store-btn .chev,
html.rail-min .app .rail-item .lbl,
html.rail-min .app .rail-item .cnt { display: none; }
.app.rail-min .rail-brand,
.app.rail-min .rail-store-btn,
.app.rail-min .rail-item,
html.rail-min .app .rail-brand,
html.rail-min .app .rail-store-btn,
html.rail-min .app .rail-item { justify-content: center; }
.app.rail-min .rail-toggle,
html.rail-min .app .rail-toggle { margin-left: 0; }
.app.rail-min .rail-item .dot.on,
html.rail-min .app .rail-item .dot.on { display: block; }

/* ------------------------------ Header ------------------------------------ */
.app-col { display: grid; grid-template-rows: 53px minmax(0, 1fr); min-width: 0; overflow: hidden; }
.app-head {
  position: relative; z-index: 20;
  display: flex; align-items: center; gap: 14px;
  padding: 0 22px;
  border-bottom: 1px solid var(--glassbd);
  background: var(--glass);
  backdrop-filter: blur(20px) saturate(180%);
  -webkit-backdrop-filter: blur(20px) saturate(180%);
  box-shadow: inset 0 1px 0 var(--glasshi);
  min-width: 0;
}
.app-head h1 { margin: 0; font-size: 16px; font-weight: 750; letter-spacing: -.022em; white-space: nowrap; flex: none; color: var(--ink); }
.gsearch { position: relative; flex: 1 1 auto; min-width: 120px; max-width: 330px; margin-left: 14px; }
/* The header search takes all the slack, so every chip after it stays pinned to
   the right edge whether or not the sync, extension and save chips are showing. */
.app-head .gsearch { margin-right: auto; }
.gsearch > svg { position: absolute; left: 11px; top: 9px; pointer-events: none; color: var(--faint); }
.gsearch input {
  width: 100%; padding: 7px 66px 7px 32px; min-height: 0;
  border: 1px solid var(--ln); border-radius: 9px;
  background: var(--pn2); color: var(--ink);
  font: inherit; font-size: 13px;
}
.gsearch input:focus { outline: none; border-color: var(--acc); box-shadow: 0 0 0 3px var(--accw); background: var(--pn); }
.gsearch .kbd-btn {
  position: absolute; right: 8px; top: 50%; transform: translateY(-50%);
  padding: 3px 7px; border: 1px solid var(--ln); border-radius: 5px;
  background: var(--pn); color: var(--faint);
  font: inherit; font-size: 12px; font-weight: 700; cursor: pointer;
}
.gsearch .kbd-btn:hover { border-color: var(--acc); color: var(--acci); }
.gsearch-pop {
  position: absolute; top: 38px; left: 0; right: 0; z-index: 320;
  padding: 6px; border: 1px solid var(--ln2); border-radius: 12px;
  background: var(--glass2); box-shadow: var(--sh2), inset 0 1px 0 var(--glasshi);
  max-height: 340px; overflow-y: auto;
  animation: sfIn .16s var(--ez) both;
}
.gsearch-hit {
  display: flex; align-items: center; gap: 10px; width: 100%;
  padding: 8px 9px; border: 0; border-radius: 8px;
  background: transparent; color: var(--ink);
  cursor: pointer; text-align: left; font: inherit; text-decoration: none;
  transition: background .14s var(--ez);
}
.gsearch-hit:hover { background: var(--pn2); text-decoration: none; }
.gsearch-hit .kind { flex: none; min-width: 46px; text-align: center; padding: 3px 7px; border-radius: 999px; font-size: 12px; font-weight: 800; letter-spacing: .03em; }
.gsearch-hit .tx { flex: 1; min-width: 0; }
.gsearch-hit .tx b { display: block; font-size: 12px; font-weight: 650; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.gsearch-hit .tx small { display: block; font-size: 12px; color: var(--faint); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.gsearch-none { display: block; padding: 14px 10px; font-size: 12px; color: var(--faint); }
.gsearch-none.bad, .gsearch-note.bad { color: var(--negi); }
.gsearch-note { display: block; padding: 8px 10px 6px; font-size: 11.5px; color: var(--faint); border-top: 1px solid var(--ln); }

.head-chip {
  display: inline-flex; align-items: center; gap: 7px; flex: none;
  padding: 5px 11px; border-radius: 999px;
  background: var(--pn2); border: 1px solid var(--ln);
  font: inherit; font-size: 12.5px; color: var(--dim); font-weight: 600;
  white-space: nowrap; text-decoration: none;
}
button.head-chip, a.head-chip { cursor: pointer; }
button.head-chip:hover, a.head-chip:hover { border-color: var(--acc); color: var(--acci); text-decoration: none; }
.head-chip .pulse { width: 6px; height: 6px; border-radius: 50%; background: var(--pos); flex: none; animation: sfPulse 2.6s var(--ez) infinite; }
#extChip .pulse { animation-delay: .8s; }
.head-chip.quiet .pulse { background: var(--warn); animation: none; }
.head-chip.bad .pulse { background: var(--neg); animation: none; }
.head-chip.off .pulse { background: var(--faint); animation: none; }
.head-chip.saved { background: var(--posw); border-color: color-mix(in srgb, var(--pos) 40%, transparent); color: var(--posi); }
.head-chip.saving { background: var(--pn2); color: var(--dim); }
.head-chip.unsaved { background: var(--pn2); border-color: var(--ln); color: var(--dim); }
.head-chip.save.bad { background: var(--negw); border-color: var(--neg); color: var(--negi); }
.head-chip.save .ic { display: grid; place-items: center; }
.head-chip.save .ic:empty { display: none; }
.head-chip.saving .ic { animation: sfSpin 1s linear infinite; }
.ibtn {
  width: 36px; height: 36px; flex: none;
  display: grid; place-items: center;
  border: 1px solid var(--ln); border-radius: 9px;
  background: var(--pn2); color: var(--dim);
  cursor: pointer; padding: 0; font: inherit; text-decoration: none;
}
.ibtn:hover { color: var(--ink); border-color: var(--ln2); text-decoration: none; }
.ibtn.on { background: var(--accw); color: var(--acci); border-color: var(--acc); }
.ibtn .spin { display: grid; place-items: center; }
.ibtn.spinning .spin { animation: sfSpin .9s linear infinite; }
.head-region {
  display: inline-flex; align-items: center; gap: 8px; height: 36px; flex: none;
  padding: 0 11px; border: 1px solid var(--ln); border-radius: 9px;
  background: var(--pn2); color: var(--ink2);
  font-size: 12.5px; font-weight: 700; white-space: nowrap;
}
.head-region .flag { display: inline-flex; width: 22px; height: 12px; border-radius: 2.5px; overflow: hidden; box-shadow: 0 0 0 1px var(--ln); }

/* ------------------------------ Main -------------------------------------- */
.app-main { overflow-y: auto; overflow-x: hidden; min-width: 0; padding: 20px 22px 44px; scroll-behavior: smooth; }
.app-wrap { max-width: 1480px; margin: 0 auto; min-width: 0; }
.view { animation: sfRise .26s var(--ez) both; min-width: 0; }
.rise { animation: sfRise .3s var(--ez) both; }
.pop-in { animation: sfPop .22s var(--ez) both; }
.d1 { animation-delay: .04s; } .d2 { animation-delay: .1s; } .d3 { animation-delay: .16s; } .d4 { animation-delay: .22s; }

/* ------------------------------ Tabs band --------------------------------- */
.band { display: flex; align-items: center; gap: 10px; margin: 0 0 14px; flex-wrap: wrap; min-width: 0; }
.band .grow, .grow { flex: 1; }
.band .vsep { width: 1px; height: 22px; background: var(--ln2); }
.pills { display: inline-flex; align-items: center; gap: 7px; flex-wrap: wrap; }
.pill {
  display: inline-flex; align-items: center; gap: 7px;
  height: 38px; padding: 0 17px;
  border: 1px solid var(--ln); border-radius: 999px;
  background: var(--pn); color: var(--dim);
  font: inherit; font-size: 13px; font-weight: 650;
  cursor: pointer; white-space: nowrap; text-decoration: none;
  transition: transform .14s var(--ez), border-color .14s var(--ez), background .14s var(--ez), color .14s var(--ez);
}
.pill:hover { transform: translateY(-1px); border-color: var(--ln2); text-decoration: none; color: var(--ink); }
.pill[aria-selected="true"], .pill.on { background: var(--acc); color: #fff; border-color: transparent; font-weight: 750; }
.pill[aria-selected="true"]:hover, .pill.on:hover { color: #fff; }
.pill .cnt {
  display: inline-flex; align-items: center; justify-content: center;
  min-width: 17px; padding: 0 5px; border-radius: 999px;
  background: var(--pn3); color: var(--dim);
  font-size: 12px; font-weight: 800; font-variant-numeric: tabular-nums;
}
.pill[aria-selected="true"] .cnt, .pill.on .cnt { background: rgba(255, 255, 255, .22); color: #fff; }
.pill .cnt:empty { display: none; }
.pill .flag { width: 7px; height: 7px; flex: none; border-radius: 50%; background: var(--warn); }
.pill .flag.bad { background: var(--neg); }
.pills.sm .pill { height: 32px; padding: 0 11px; font-size: 12.5px; gap: 6px; }
.pills.xs .pill { height: 28px; padding: 0 10px; font-size: 12px; gap: 6px; background: var(--pn2); }
.pills.xs .pill.on { background: var(--acc); }

/* ------------------------------ Buttons ----------------------------------- */
.app .btn, .app-body .btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 7px;
  min-height: 36px; padding: 0 15px;
  border: 1px solid var(--ln2); border-radius: 9px;
  background: var(--pn2); color: var(--ink);
  font: inherit; font-size: 13px; font-weight: 700; line-height: 1.2;
  cursor: pointer; white-space: nowrap; text-decoration: none;
  box-shadow: none;
  transition: transform .14s var(--ez), background .18s var(--ez), border-color .18s var(--ez), color .18s var(--ez), box-shadow .18s var(--ez);
}
.app-body .btn:hover { transform: translateY(-1px); border-color: var(--acc); color: var(--acci); box-shadow: var(--sh); background: var(--pn2); text-decoration: none; }
.app-body .btn:active { transform: scale(.98); }
.app-body .btn::after { content: none; display: none; }
.app-body .btn.primary { border-color: transparent; background: var(--acc); color: #fff; box-shadow: none; }
.app-body .btn.primary:hover { background: var(--acc2); color: #fff; box-shadow: 0 6px 16px rgba(23, 104, 242, .32); }
.app-body .btn.grad { border: 0; background: var(--grad-cta); color: #fff; box-shadow: 0 6px 16px rgba(23, 104, 242, .28); font-weight: 780; letter-spacing: -.01em; }
.app-body .btn.grad:hover { color: #fff; transform: translateY(-1px); box-shadow: 0 8px 18px rgba(23, 104, 242, .32); }
.app-body .btn.ghost { border-color: transparent; background: transparent; color: var(--acci); box-shadow: none; padding: 0 13px; }
.app-body .btn.ghost:hover { background: var(--accw); transform: none; box-shadow: none; }
.app-body .btn.danger { border-color: transparent; background: var(--neg); color: #fff; }
.app-body .btn.danger:hover { background: #d92b41; color: #fff; box-shadow: 0 6px 16px rgba(239, 64, 86, .34); }
.app-body .btn.quiet { border-color: var(--ln); background: var(--pn2); color: var(--ink2); }
.app-body .btn.quiet:hover { border-color: var(--acc); color: var(--acci); background: var(--accw); box-shadow: none; }
.app-body .btn.soft { border-color: var(--ln); background: var(--pn); color: var(--ink2); }
.app-body .btn.soft:hover { border-color: var(--ln2); color: var(--ink); box-shadow: none; transform: none; }
.app-body .btn.pos { border-color: color-mix(in srgb, var(--pos) 40%, transparent); background: var(--pn2); color: var(--posi); }
.app-body .btn.pos:hover { background: var(--posw); border-color: var(--pos); color: var(--posi); box-shadow: none; }
.app-body .btn.warn { border-color: var(--warn); background: var(--pn); color: var(--warni); }
.app-body .btn.warn:hover { background: var(--warnw); color: var(--warni); }
.app-body .btn.neg-soft { border-color: var(--ln); background: transparent; color: var(--faint); }
.app-body .btn.neg-soft:hover { border-color: var(--neg); background: var(--negw); color: var(--negi); box-shadow: none; }
.app-body .btn.dash { border-style: dashed; background: transparent; color: var(--dim); }
.app-body .btn.dash:hover { border-color: var(--acc); color: var(--acci); }
.app-body .btn.sm { min-height: 32px; height: 32px; padding: 0 11px; font-size: 12.5px; }
.app-body .btn.xs { min-height: 28px; height: 28px; padding: 0 11px; font-size: 12.5px; font-weight: 750; border-radius: 8px; }
.app-body .btn.row { min-height: 0; height: auto; padding: 5px 11px; font-size: 12.5px; border-radius: 8px; border-color: var(--ln); }
/* A11Y-001: compact controls keep their drawn size (the design is dense on
   purpose) but gain an invisible hit zone that reaches about 44px tall, so
   a hurried press or a touch screen lands. Vertical only where controls sit
   side by side, so a zone never crosses into a neighbour. Switches are left
   alone: their two pseudo-elements draw the track and the knob. */
.app-body .btn.sm, .app-body .btn.xs, .app-body .btn.row, .seg > button, .pills .pill, .xbtn, .info-btn, .kebab { position: relative; }
.app-body .btn.sm::after, .app-body .btn.xs::after, .app-body .btn.row::after, .seg > button::after, .pills .pill::after, .xbtn::after, .info-btn::after, .kebab::after {
  content: ""; display: block; position: absolute; left: 0; right: 0; top: -8px; bottom: -8px;
}
.app-body .btn.xs::after, .seg > button::after, .pills.xs .pill::after, .xbtn::after, .info-btn::after { top: -10px; bottom: -10px; }
.xbtn.sm::after, .info-btn.xs::after { top: -13px; bottom: -13px; left: -8px; right: -8px; }
.seg.mini > button::after { top: -12px; bottom: -12px; }
.app-body .btn.row:hover { box-shadow: none; transform: none; }
.app-body .btn.big { min-height: 44px; padding: 0 22px; font-size: 13.5px; font-weight: 750; border-radius: 11px; }
.app-body .btn.wide { flex: 1; }
.app-body .btn.icon { width: 36px; padding: 0; }
.app-body .btn.icon.sm { width: 32px; }
.app-body .btn[disabled], .app-body .btn:disabled, .app-body .btn[aria-disabled="true"] {
  opacity: .42; cursor: not-allowed; transform: none !important; box-shadow: none !important;
}
.app-body .btn.is-busy { cursor: progress; color: transparent !important; position: relative; pointer-events: none; }
.app-body .btn.is-busy::before {
  content: ""; position: absolute; top: 50%; left: 50%;
  width: 14px; height: 14px; margin: -7px 0 0 -7px;
  border: 2px solid rgba(255, 255, 255, .5); border-right-color: transparent;
  border-radius: 50%; animation: sfSpin .9s linear infinite;
}
.app-body .btn:not(.primary):not(.danger):not(.grad).is-busy::before { border-color: color-mix(in srgb, var(--ink) 30%, transparent); border-right-color: transparent; }
.app-body .btn .ic { display: grid; place-items: center; flex: none; }
.app-body .btn .cnt { font-size: 12px; font-weight: 750; opacity: .72; font-variant-numeric: tabular-nums; }
.linkbtn { padding: 0; border: 0; background: none; color: var(--acci); font: inherit; font-size: 12.5px; font-weight: 700; cursor: pointer; text-decoration: none; }
.linkbtn:hover { text-decoration: underline; }
.app-body .btn.on { border-color: var(--acc); background: var(--accw); color: var(--acci); }

/* ------------------------------ Inputs ------------------------------------ */
.app-body .in, .app-body select.in, .app-body textarea.in {
  width: 100%; min-height: 36px; padding: 9px 12px;
  border: 1px solid var(--ln2); border-radius: 9px;
  background: var(--pn2); color: var(--ink);
  font: inherit; font-size: 13px;
  transition: border-color .14s var(--ez), box-shadow .14s var(--ez), background .14s var(--ez);
}
.app-body textarea.in { resize: vertical; line-height: 1.55; }
.app-body .in::placeholder { color: var(--faint); }
.app-body .in:focus { outline: none; border-color: var(--acc); box-shadow: 0 0 0 3px var(--accw); background: var(--pn); }
.app-body .in[aria-invalid="true"] { border: 1.5px solid var(--neg); background: var(--negw); }
.app-body .in:disabled { background: var(--pn3); color: var(--faint); cursor: not-allowed; border-color: var(--ln); }
.app-body .in.soft { border-color: var(--ln); }
.app-body select.in {
  padding-right: 30px;
  appearance: none; -webkit-appearance: none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%234E5C75' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E");
  background-repeat: no-repeat; background-position: right 10px center; background-size: 13px;
  cursor: pointer;
}
html[data-theme="dark"] .app-body select.in { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23A4AFC5' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E"); }
.app-body input[type="checkbox"].ck, .app-body .tbl input[type="checkbox"] { width: 15px; height: 15px; margin: 0; accent-color: var(--acc); cursor: pointer; display: block; }
.field { display: grid; gap: 6px; min-width: 0; }
.field > label, .lab { font-size: 12px; font-weight: 750; color: var(--dim); }
.field > label.err, .lab.err { color: var(--negi); }
.field .hint { font-size: 12px; color: var(--faint); line-height: 1.45; }
.field .errline { display: flex; align-items: flex-start; gap: 6px; font-size: 12px; color: var(--negi); font-weight: 650; line-height: 1.45; }
.in-wrap { position: relative; display: block; }
.in-wrap .unit { position: absolute; left: 12px; top: 50%; transform: translateY(-50%); font-size: 13px; color: var(--dim); font-weight: 700; pointer-events: none; }
.in-wrap .in { padding-left: 26px; font-variant-numeric: tabular-nums; }
.in-wrap .unit.r { left: auto; right: 12px; }
.in-wrap .in.r { padding-left: 12px; padding-right: 44px; }
.in-wrap.r .in { padding-left: 12px; padding-right: 30px; }
.search { position: relative; display: inline-flex; align-items: center; min-width: 0; }
.search > svg { position: absolute; left: 10px; pointer-events: none; color: var(--faint); }
.search .in { padding-left: 30px; height: 32px; min-height: 32px; border-color: var(--ln); }
.search.round .in { border-radius: 999px; height: 38px; min-height: 38px; padding-left: 34px; background: var(--pn); box-shadow: var(--sh); }
.search.round > svg { left: 13px; }
.search.xs .in { height: 28px; min-height: 28px; padding-left: 26px; font-size: 12px; border-radius: 999px; }
.search.xs > svg { left: 9px; }

/* Segmented controls: a track of --pn2 or --pn3, the chosen segment lifts on --pn. */
.seg {
  display: inline-flex; align-items: stretch; flex: none;
  height: 32px; padding: 3px;
  border: 1px solid var(--ln); border-radius: 9px;
  /* NOT overflow: hidden. A11Y-001 hangs an invisible 44px hit zone off every
     segment, and clipping the track cut it off every segmented control on the
     tool except the period chips - which had `overflow: visible` added for
     exactly this reason and never had it generalised. The segments carry
     their own radius and sit inside the track's padding, so there is nothing
     for the track to clip. */
  background: var(--pn2); overflow: visible; box-sizing: border-box;
}
.seg > button {
  display: inline-flex; align-items: center; height: 24px; padding: 0 9px;
  border: 0; border-radius: 6px; background: transparent; color: var(--dim);
  font: inherit; font-size: 12px; font-weight: 700; line-height: 1;
  cursor: pointer; white-space: nowrap;
  transition: background .14s var(--ez), color .14s var(--ez), box-shadow .14s var(--ez);
}
.seg > button:hover { color: var(--acci); }
.seg > button[aria-pressed="true"], .seg > button.on { background: var(--pn); color: var(--acci); box-shadow: var(--sh); }
.seg.ink > button.on, .seg.ink > button[aria-pressed="true"] { color: var(--ink); font-weight: 750; }
.seg.mini { height: auto; padding: 2px; border-radius: 9px; }
.seg.mini > button { height: auto; padding: 4px 9px; }
.seg.lg { height: auto; padding: 3px; border-radius: 11px; background: var(--pn3); gap: 3px; }
.seg.lg > button { flex: 1; height: auto; min-height: 36px; justify-content: center; padding: 8px 10px; border-radius: 8px; font-size: 13px; font-weight: 650; }
.seg.lg > button.on, .seg.lg > button[aria-pressed="true"] { background: var(--pn); color: var(--ink); font-weight: 750; box-shadow: var(--sh); }

/* Switch: the knob carries a tick when on. */
.switch {
  position: relative; width: 44px; height: 24px; flex: none;
  border: 0; border-radius: 999px; padding: 2px;
  background: var(--off); cursor: pointer;
  transition: background .22s var(--ez), box-shadow .22s var(--ez);
}
/* The tick belongs to the TRACK, not the knob (design part 27): it fades in
   behind the knob as it slides right, rather than riding on top of it. */
.switch::before {
  content: ""; position: absolute; left: 7px; top: 7px;
  width: 10px; height: 10px; opacity: 0;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='rgba(255,255,255,0.9)' stroke-width='3.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m5 13 4 4L19 7'/%3E%3C/svg%3E") center / 10px no-repeat;
  transition: opacity .2s var(--ez);
}
.switch::after {
  content: ""; position: absolute; top: 2px; left: 2px;
  width: 20px; height: 20px; border-radius: 50%;
  background: #fff; box-shadow: 0 1px 3px rgba(0, 0, 0, .3);
  transition: transform .24s cubic-bezier(.34, 1.56, .64, 1);
}
.switch[aria-checked="true"] { background: var(--acc); }
.switch[aria-checked="true"]::before { opacity: 1; }
.switch[aria-checked="true"]::after { transform: translateX(20px); }
.switch:hover { filter: brightness(1.06); }
.switch:active { transform: scale(.96); }
/* The editor draws a smaller switch: 40 by 23 with a 19px knob and no tick
   (design parts 15 and 16). One primitive, two sizes, not a second control. */
.switch.sm { width: 40px; height: 23px; }
.switch.sm::before { display: none; }
.switch.sm::after { top: 2px; left: 2px; width: 19px; height: 19px; box-shadow: 0 1px 3px rgba(6, 12, 26, .3); }
.switch.sm[aria-checked="true"]::after { transform: translateX(17px); }
.switch:disabled { opacity: .5; cursor: not-allowed; }
.switch-row { display: inline-flex; align-items: center; gap: 9px; }
.switch-row .state { font-size: 12px; font-weight: 800; letter-spacing: .04em; color: var(--dim); }
.switch-row .state.on { color: var(--acci); }

/* ------------------------------ Chips, tags, kbd -------------------------- */
.chip {
  display: inline-flex; align-items: center; gap: 5px;
  padding: 2.5px 9px; border-radius: 999px;
  background: var(--pn3); color: var(--dim);
  font-size: 12px; font-weight: 750; white-space: nowrap; line-height: 1.5;
}
.chip::before { content: ""; width: 5px; height: 5px; border-radius: 50%; background: currentColor; opacity: .85; flex: none; }
.chip.nodot::before { display: none; }
.chip.ok { background: var(--posw); color: var(--posi); }
.chip.warn { background: var(--warnw); color: var(--warni); }
.chip.bad { background: var(--negw); color: var(--negi); }
.chip.acc { background: var(--accw); color: var(--acci); }
.chip.mut { background: var(--pn3); color: var(--dim); }
.chip.sm { height: 18px; padding: 0 7px; }
/* A chip whose state just changed under the seller's own press pops once,
   so the eye lands on the row that answered. */
.chip.pop { animation: sfChipPop .45s var(--ez) both; }
.tag { display: inline-flex; align-items: center; gap: 6px; padding: 4px 10px; border-radius: 999px; background: var(--pn3); color: var(--dim); font-size: 12px; font-weight: 800; white-space: nowrap; }
.tag.ok { background: var(--posw); color: var(--posi); }
.tag.warn { background: var(--warnw); color: var(--warni); }
.tag.bad { background: var(--negw); color: var(--negi); }
.tag.acc { background: var(--accw); color: var(--acci); }
.tag.caps { letter-spacing: .05em; text-transform: uppercase; padding: 3px 9px; }
.count-pill { display: inline-flex; align-items: center; justify-content: center; min-width: 17px; padding: 1px 7px; border-radius: 999px; background: var(--pn3); color: var(--dim); font-size: 12px; font-weight: 800; font-variant-numeric: tabular-nums; }
.count-pill.ok { background: var(--posw); color: var(--posi); }
.count-pill.bad { background: var(--negw); color: var(--negi); }
.count-pill.warn { background: var(--warnw); color: var(--warni); }
.count-pill.acc { background: var(--accw); color: var(--acci); }
.kbd { display: inline-flex; align-items: center; padding: 0 5px; border: 1px solid var(--ln2); border-radius: 5px; background: var(--pn); color: var(--dim); font: inherit; font-size: 12px; font-weight: 700; line-height: 1.5; }
.kbd.soft { border-color: var(--ln); background: var(--pn2); color: var(--faint); padding: 2px 6px; }
.info-btn {
  position: relative; flex: none; width: 18px; height: 18px; padding: 0;
  display: grid; place-items: center;
  border: 1px solid var(--ln2); border-radius: 50%;
  background: transparent; color: var(--dim);
  font: inherit; font-size: 12px; font-weight: 800; cursor: pointer;
}
.info-btn:hover { color: var(--acci); border-color: var(--acc); }
.info-btn.xs { width: 16px; height: 16px; }
.xbtn { flex: none; width: 26px; height: 26px; display: grid; place-items: center; border: 0; border-radius: 8px; background: transparent; color: var(--faint); cursor: pointer; padding: 0; }
.xbtn:hover { background: var(--pn3); color: var(--ink); }
.xbtn.sm { width: 20px; height: 20px; border-radius: 6px; }
.tight { position: relative; }
.tight::before { content: ""; position: absolute; left: -6px; right: -6px; top: 50%; height: 36px; transform: translateY(-18px); }

/* Icon plates. */
.ip { display: grid; place-items: center; border-radius: 7px; flex: none; background: var(--pn3); color: var(--dim); }
.ip.ok { background: var(--posw); color: var(--posi); }
.ip.warn { background: var(--warnw); color: var(--warni); }
.ip.bad { background: var(--negw); color: var(--negi); }
.ip.acc { background: var(--accw); color: var(--acci); }
.ip.mut { background: var(--pn3); color: var(--faint); }
.ip.s22 { width: 22px; height: 22px; }
.ip.s24 { width: 24px; height: 24px; }
.ip.s26 { width: 26px; height: 26px; border-radius: 8px; }
.ip.s30 { width: 30px; height: 30px; border-radius: 9px; }
.ip.s34 { width: 34px; height: 34px; border-radius: 10px; }
.ip.s38 { width: 38px; height: 38px; border-radius: 11px; }
.ip.s40 { width: 40px; height: 40px; border-radius: 12px; }
.ip.s42 { width: 42px; height: 42px; border-radius: 13px; }
.ip.s46 { width: 46px; height: 46px; border-radius: 13px; }
.ip.s52 { width: 52px; height: 52px; border-radius: 15px; }
.dotc { display: inline-block; width: 6px; height: 6px; border-radius: 50%; background: currentColor; flex: none; }

/* Monogram tiles (hue hashed from the name, set inline as --tb/--tf; these
   are the values before a name sets its own). */
.tile, .avatar { --tb: var(--pn3); --tf: var(--ink2); }
.tile.zoom { --tz: 3; }
.tile {
  display: grid; place-items: center; flex: none;
  width: 38px; height: 38px; border-radius: 9px;
  background: var(--tb); color: var(--tf);
  font-size: 14px; font-weight: 800; overflow: hidden; position: relative;
}
/* Absolute, so the monogram underneath stays put and shows through when a
   supplier photo fails to load, instead of leaving an empty coloured square. */
.tile img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; display: block; border-radius: inherit; }
.tile.s36 { width: 36px; height: 36px; border-radius: 8px; font-size: 13px; }
.tile.s30 { width: 30px; height: 30px; border-radius: 8px; font-size: 12px; }
.tile.s26 { width: 26px; height: 26px; border-radius: 7px; font-size: 12px; }
.tile.s24 { width: 24px; height: 24px; border-radius: 7px; font-size: 12px; }
.tile.s40 { width: 40px; height: 40px; border-radius: 10px; font-size: 15px; }
.tile.zoom { cursor: zoom-in; transform-origin: left center; z-index: 0; background-repeat: no-repeat; background-position: right 2px bottom 2px; background-size: 0 0; transition: transform .22s var(--ez), box-shadow .22s var(--ez), border-radius .22s var(--ez); }
/* The enlarged photo carries the design's small magnifier in its corner, so a
   hovered tile reads as a preview rather than a layout glitch. */
.tile.zoom.has-img:hover {
  transform: scale(var(--tz)); box-shadow: 0 10px 28px rgba(6, 12, 26, .28), 0 0 0 1px var(--glassbd); border-radius: 5px; z-index: 40;
  background-size: 5px 5px;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%230E1729' stroke-opacity='.7' stroke-width='3' stroke-linecap='round'%3E%3Ccircle cx='11' cy='11' r='7'/%3E%3Cpath d='m20 20-3.5-3.5M11 8v6M8 11h6'/%3E%3C/svg%3E");
}
.avatar { display: grid; place-items: center; flex: none; width: 36px; height: 36px; border-radius: 9px; background: var(--tb); color: var(--tf); font-size: 12px; font-weight: 800; letter-spacing: .02em; }
.avatar.ebay { background: var(--pn3); color: var(--ink2); }

/* ------------------------------ Cards ------------------------------------- */
.card { border: 1px solid var(--ln); border-radius: 14px; background: var(--pn); box-shadow: var(--sh); min-width: 0; }
.card.pad { padding: 16px 18px; }
.card.pad-lg { padding: 18px 20px 14px; }
.card.flat { box-shadow: none; }
.card.lift { box-shadow: var(--sh2); border-radius: 16px; }
.card-h { display: flex; align-items: center; gap: 10px; padding: 14px 18px; border-bottom: 1px solid var(--ln); flex-wrap: wrap; min-width: 0; }
.card-h.tint { background: var(--pn2); border-radius: 14px 14px 0 0; padding: 13px 18px; }
.card-h h2, .card-t { margin: 0; font-size: 13.5px; font-weight: 750; letter-spacing: -.015em; }
.card-h .sub, .card-sub { margin: 0; font-size: 12.5px; color: var(--dim); line-height: 1.45; }
.card-h .end { margin-left: auto; display: inline-flex; align-items: center; gap: 8px; }
.card-h .stack { flex: 1 1 200px; min-width: 0; }
.card-h .stack h2 { margin-bottom: 2px; }
.card-h .stack .sub { display: block; max-width: 78ch; }
.card-foot {
  display: flex; align-items: center; gap: 10px;
  padding: 10px 18px; border-top: 1px solid var(--ln);
  background: var(--pn2); font-size: 12px; color: var(--dim);
  border-radius: 0 0 14px 14px;
}
.card-body { padding: 6px 10px 10px; }
.section-t { font-size: 14.5px; font-weight: 780; letter-spacing: -.018em; }
.grid-auto { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 12px; margin-bottom: 12px; }
.grid-2 { display: grid; grid-template-columns: repeat(auto-fit, minmax(390px, 1fr)); gap: 12px; margin-bottom: 12px; }

/* Stat tiles (the automation counters, the activity tiles). */
.stat {
  display: block; width: 100%;
  border: 1px solid var(--ln); border-radius: 12px;
  background: var(--pn); box-shadow: var(--sh);
  padding: 14px 16px; min-width: 0; text-align: left;
  font: inherit; color: inherit; cursor: pointer;
  transition: transform .18s var(--ez), box-shadow .18s var(--ez), border-color .18s var(--ez), background .18s var(--ez);
}
.stat:hover { border-color: var(--ln2); transform: translateY(-2px); box-shadow: var(--sh2); }
.stat.on { border-color: var(--acc); background: var(--accw); box-shadow: 0 0 0 3px var(--accw); }
.stat.static { cursor: default; }
.stat.static:hover { transform: none; box-shadow: var(--sh); border-color: var(--ln); }
.stat .top { display: flex; align-items: center; gap: 8px; margin-bottom: 8px; min-width: 0; }
.stat .lbl { font-size: 12.5px; font-weight: 650; color: var(--dim); min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.stat .arrow { margin-left: auto; flex: none; color: var(--faint); }
.stat .v { display: block; font-size: 24px; font-weight: 800; letter-spacing: -.032em; line-height: 1.1; font-variant-numeric: tabular-nums; }
.stat .note { display: block; font-size: 12.5px; color: var(--faint); margin-top: 4px; line-height: 1.4; }
.stat.tone-ok { border-color: color-mix(in srgb, var(--pos) 34%, transparent); background: var(--posw); }
.stat.tone-warn { border-color: color-mix(in srgb, var(--warn) 34%, transparent); background: var(--warnw); }
.stat.tone-bad { border-color: color-mix(in srgb, var(--neg) 34%, transparent); background: var(--negw); }
.stat.tone-ok .v, .stat.tone-ok .lbl { color: var(--posi); }
.stat.tone-warn .v, .stat.tone-warn .lbl { color: var(--warni); }
.stat.tone-bad .v, .stat.tone-bad .lbl { color: var(--negi); }

/* Progress bars. */
.bar { position: relative; display: block; height: 4px; border-radius: 99px; background: var(--pn3); overflow: hidden; flex: 1; min-width: 0; }
.bar > i { position: absolute; left: 0; top: 0; bottom: 0; border-radius: 99px; background: var(--acc); transition: width .6s var(--ez); display: block; }
.bar.h5 { height: 5px; }
.bar.h6 { height: 6px; }
.bar.pos > i { background: var(--pos); }
.bar.warn > i { background: var(--warn); }
.bar.neg > i { background: var(--neg); }
.bar.grow > i { transform-origin: left; animation: sfGrow .8s var(--ez) .3s both; }

/* Bands: one-line status strips (cloud watch, notices). */
.cloud {
  display: flex; align-items: center; gap: 9px;
  padding: 6px 7px 6px 10px; margin-bottom: 11px;
  border-radius: 11px;
  border: 1px solid color-mix(in srgb, var(--pos) 34%, transparent);
  background: var(--posw);
  animation: sfRise .3s var(--ez) both;
  --cl: var(--posi); --cd: var(--pos);
}
.cloud .dotb { flex: none; width: 22px; height: 22px; display: grid; place-items: center; padding: 0; border: 0; border-radius: 50%; background: transparent; cursor: pointer; }
.cloud .dotb:hover { background: var(--pn); }
.cloud .dotb i { display: block; width: 10px; height: 10px; border-radius: 50%; border: 2px solid var(--cd); background: var(--cd); }
.cloud b { flex: none; font-size: 12.5px; font-weight: 780; letter-spacing: -.012em; color: var(--cl); white-space: nowrap; }
.cloud .sep { flex: none; width: 1px; height: 13px; background: color-mix(in srgb, var(--cd) 34%, transparent); }
.cloud small { flex: 1; min-width: 0; font-size: 12.5px; color: var(--dim); line-height: 1.4; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.cloud .cta { flex: none; display: inline-flex; align-items: center; gap: 5px; padding: 5px 8px 5px 10px; border: 1px solid transparent; border-radius: 8px; background: transparent; color: var(--cl); font: inherit; font-size: 12.5px; font-weight: 750; cursor: pointer; white-space: nowrap; }
.cloud .cta:hover { background: var(--pn); border-color: var(--ln2); }
.cloud.wait { --cl: var(--acci); --cd: var(--acc); border-color: color-mix(in srgb, var(--acc) 34%, transparent); background: color-mix(in srgb, var(--acc) 10%, var(--pn)); }
.cloud.wait .dotb i { background: transparent; }
.cloud.bad { --cl: var(--negi); --cd: var(--neg); border-color: color-mix(in srgb, var(--neg) 38%, transparent); background: var(--negw); }
.cloud.bad .dotb i { box-shadow: inset 0 0 0 2px var(--pn); }
.cloud.mut { --cl: var(--dim); --cd: var(--faint); border-color: var(--ln); background: var(--pn2); }
.notice { display: flex; align-items: flex-start; gap: 9px; padding: 9px 12px; border-radius: 10px; border: 1px solid color-mix(in srgb, var(--acc) 30%, transparent); background: var(--accw); color: var(--acci); font-size: 12.5px; font-weight: 650; line-height: 1.45; }
.notice.warn { border-color: var(--warn); background: var(--warnw); color: var(--warni); }
.notice.bad { border-color: var(--neg); background: var(--negw); color: var(--negi); }
.notice.ok { border-color: color-mix(in srgb, var(--pos) 40%, transparent); background: var(--posw); color: var(--posi); }
.notice.mut { border-color: var(--ln); background: var(--pn2); color: var(--ink2); }
.notice > svg { flex: none; margin-top: 2px; }

/* ------------------------------ Tables ------------------------------------ */
.tbl-wrap { overflow: visible; border-radius: 0 0 14px 14px; background: var(--pn); }
.tbl-wrap.scroll { overflow-x: auto; }
.tbl { width: 100%; border-collapse: collapse; font-size: 13px; }
.tbl th {
  text-align: left; padding: 9px 12px;
  border-bottom: 1px solid var(--ln);
  background: var(--glass);
  backdrop-filter: blur(16px) saturate(180%);
  -webkit-backdrop-filter: blur(16px) saturate(180%);
  color: var(--faint); font-size: 12.5px; font-weight: 700; letter-spacing: -.005em;
  position: sticky; top: 0; z-index: 2; white-space: nowrap;
}
.tbl th.r, .tbl td.r { text-align: right; }
.tbl th.c, .tbl td.c { text-align: center; }
.tbl td { padding: 9px 12px; border-bottom: 1px solid var(--ln); vertical-align: middle; }
.tbl td.num { font-variant-numeric: tabular-nums; white-space: nowrap; }
.tbl td.dim { color: var(--dim); }
.tbl td.faint { color: var(--faint); }
.tbl td.pos { color: var(--posi); font-weight: 700; }
.tbl td.neg { color: var(--negi); font-weight: 700; }
.tbl td.warn { color: var(--warni); font-weight: 750; }
.tbl td.strong { font-weight: 600; }
.tbl tbody tr { transition: background .14s var(--ez); }
.tbl.anim tbody tr { animation: sfRise .3s var(--ez) both; }
/* A tab switch: the new rows fade up together while the wrap's height glides
   from the old table's to the new one's (set in script, since auto cannot be
   transitioned). Rows rise one by one only on a view's first draw. */
.tbl-wrap.swap .tbl tbody, .tbl-wrap.swap .tbl-more { animation: sfSwapIn .26s var(--ez) both; }
.tbl-wrap.gliding { overflow: hidden; transition: height .28s var(--ez); }
@keyframes sfSwapIn { from { opacity: 0; transform: translateY(5px); } to { opacity: 1; transform: none; } }
.tbl tbody tr:hover { background: var(--pn2); }
.tbl tbody tr.picked { background: var(--row-picked); }
.tbl tbody tr:last-child.picked { clip-path: inset(0 round 0 0 14px 14px); }
.tbl tbody tr:last-child td { border-bottom-color: transparent; }
.tbl th.ck, .tbl td.ck { width: 40px; padding-left: 14px; padding-right: 6px; }
.ck-hit { display: grid; place-items: center; width: 26px; height: 26px; margin: -5px -5px -5px -6px; border-radius: 7px; cursor: pointer; }
.ck-hit:hover { background: var(--accw); }
.kebab {
  flex: none; width: 24px; height: 24px; padding: 0;
  display: grid; place-items: center;
  border: 1px solid var(--ln); border-radius: 7px;
  background: var(--pn2); color: var(--faint);
  cursor: pointer;
  transition: transform .14s var(--ez), box-shadow .14s var(--ez), border-color .14s var(--ez), color .14s var(--ez), background .14s var(--ez);
}
.kebab:hover, .kebab[aria-expanded="true"] { border-color: var(--acc); color: var(--acci); background: var(--accw); }
.rowmain { display: flex; align-items: center; gap: 10px; min-width: 0; }
.rowtxt { min-width: 0; --tw: 330px; }
.rowtxt .t { display: block; font-size: 13px; font-weight: 650; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: var(--tw); letter-spacing: -.005em; }
.rowtxt .t.link { cursor: pointer; transition: color .13s var(--ez); }
.rowtxt .t.link:hover { color: var(--acci); }
.rowtxt .m { display: flex; align-items: center; gap: 5px; font-size: 12px; color: var(--faint); font-variant-numeric: tabular-nums; min-width: 0; max-width: var(--tw); }
.rowtxt .m > span { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.rowtxt .m a, .rowtxt .m .lk {
  display: inline-flex; align-items: center; gap: 4px; min-width: 0;
  color: var(--dim); font-weight: 650; text-decoration: none;
  border-bottom: 1px solid transparent; white-space: nowrap;
  transition: color .13s var(--ez), border-color .13s var(--ez);
}
.rowtxt .m a:hover, .rowtxt .m .lk:hover { color: var(--acci); border-bottom-color: var(--acc); text-decoration: none; }
.rowtxt .m a.sup, .rowtxt .m .lk.sup { color: var(--acci); font-weight: 750; flex: none; }
.rowtxt .m .lk.warn, .rowtxt .m button.lk { padding: 0; border: 0; border-bottom: 1px solid transparent; background: none; color: var(--warni); font: inherit; font-size: 12px; font-weight: 750; cursor: pointer; flex: none; }
.rowtxt .m button.lk:hover { border-bottom-color: var(--warn); color: var(--warni); }
.rowtxt .vars { display: flex; align-items: center; gap: 6px 10px; flex-wrap: wrap; margin-top: 4px; font-size: 12px; color: var(--faint); max-width: var(--tw); }
.rowtxt .vars b { color: var(--ink); font-weight: 700; }
.rowtxt .vars .sku b { color: var(--ink2); font-weight: 650; font-variant-numeric: tabular-nums; }
.note-chip {
  display: inline-flex; align-items: flex-start; gap: 6px;
  margin-top: 5px; padding: 3.5px 9px;
  border-radius: 8px;
  border: 1px solid color-mix(in srgb, var(--warn) 50%, transparent);
  background: color-mix(in srgb, var(--warn) 24%, var(--pn));
  font: inherit; font-size: 12px; font-weight: 700; color: var(--warni);
  line-height: 1.45; max-width: var(--tw, 330px); text-align: left;
  cursor: pointer;
  transition: transform .14s var(--ez), box-shadow .14s var(--ez);
}
.note-chip:hover { transform: translateY(-1px); box-shadow: var(--sh); }
.note-chip > svg { flex: none; margin-top: 2px; }
.note-chip > span { min-width: 0; }
.note-chip.q { color: var(--acci); background: var(--accw); border-color: color-mix(in srgb, var(--acc) 40%, transparent); cursor: default; }
.note-chip.paused { color: var(--dim); background: var(--pn3); border-color: var(--ln2); cursor: default; }
.note-chip.q:hover, .note-chip.paused:hover { transform: none; box-shadow: none; }

/* The row above a table: search, tools, sort, count; or the selection bar. */
.toolbar {
  position: relative;
  display: flex; align-items: center; gap: 10px;
  min-height: 58px; padding: 0 16px;
  border-bottom: 1px solid var(--ln);
  border-radius: 14px 14px 0 0;
  overflow: hidden; flex-wrap: wrap;
}
.toolbar .vsep { flex: none; width: 1px; height: 26px; background: var(--ln); }
.toolbar .count { flex: none; font-size: 12.5px; color: var(--faint); font-variant-numeric: tabular-nums; white-space: nowrap; }
.toolbar .tools { display: inline-flex; align-items: center; gap: 6px; flex: none; flex-wrap: wrap; }
.toolbar .idle { display: flex; align-items: center; gap: 10px; flex: 1; min-width: 0; animation: sfPop .22s var(--ez) both; flex-wrap: wrap; }
.toolbar .search { flex: 1 1 150px; min-width: 120px; max-width: 260px; }
.toolbar .search .in { width: 100%; }
.selbar { display: flex; align-items: center; gap: 6px; flex: 1; min-width: 0; animation: sfPop .22s var(--ez) both; flex-wrap: wrap; }
.selpill {
  display: inline-flex; align-items: center; gap: 2px; flex: none;
  height: 32px; padding: 0 4px 0 11px; border-radius: 999px;
  border: 1px solid color-mix(in srgb, var(--acc) 34%, transparent);
  background: var(--accw);
}
.selpill > b { font-size: 12.5px; font-weight: 800; color: var(--acci); font-variant-numeric: tabular-nums; white-space: nowrap; }
.selpill .all { height: 22px; margin-left: 4px; padding: 0 7px; border: 0; border-radius: 999px; background: color-mix(in srgb, var(--acc) 14%, transparent); color: var(--acci); font: inherit; font-size: 12px; font-weight: 750; cursor: pointer; white-space: nowrap; }
.selpill .all:hover { background: color-mix(in srgb, var(--acc) 24%, transparent); }
.selpill .x { width: 24px; height: 24px; display: grid; place-items: center; border: 0; border-radius: 50%; background: transparent; color: var(--acci); cursor: pointer; padding: 0; }
.selpill .x:hover { background: color-mix(in srgb, var(--acc) 16%, transparent); }
.selpill.lg { height: 38px; padding: 0 4px 0 12px; gap: 8px; }
.selpill.lg .vsep { width: 1px; height: 16px; background: color-mix(in srgb, var(--acc) 30%, transparent); }
.bulk {
  display: inline-flex; align-items: center; gap: 6px; flex: none;
  height: 32px; padding: 0 6px 0 10px;
  border: 1px solid var(--ln2); border-radius: 9px;
  background: var(--pn); color: var(--ink);
  font: inherit; font-size: 12px; font-weight: 750;
  cursor: pointer; white-space: nowrap;
  transition: border-color .14s var(--ez), background .14s var(--ez), color .14s var(--ez);
}
.bulk:hover { border-color: var(--acc); color: var(--acci); }
.bulk .n { display: inline-grid; place-items: center; min-width: 20px; height: 20px; padding: 0 5px; border-radius: 6px; background: var(--pn3); font-size: 12px; font-weight: 800; font-variant-numeric: tabular-nums; }
.bulk.neg { border-color: var(--neg); background: var(--negw); color: var(--negi); }
.bulk.neg .n { background: color-mix(in srgb, var(--neg) 16%, transparent); }
.bulk.neg:hover { background: var(--neg); color: #fff; }
.bulk:disabled { border-color: var(--ln); background: transparent; color: var(--faint); cursor: not-allowed; opacity: .55; }
.bulk:disabled .n { background: var(--pn3); }
.bulk.pillish { height: 28px; border-radius: 999px; padding: 0 11px; }
.bulk-prog { position: absolute; left: 0; bottom: -1px; height: 3px; width: 0; background: var(--acc); border-radius: 0 99px 99px 0; transition: width .12s linear; }
.cap-note { display: inline-flex; align-items: center; flex: none; padding: 0 9px; height: 26px; border-radius: 8px; background: var(--warnw); color: var(--warni); font-size: 12px; font-weight: 750; white-space: nowrap; }
.prog-label { flex: none; font-size: 12px; color: var(--dim); font-weight: 700; white-space: nowrap; font-variant-numeric: tabular-nums; }

/* ------------------------------ Lists ------------------------------------- */
.rowlist { display: grid; gap: 1px; }
.rowbtn {
  display: flex; align-items: center; gap: 14px; width: 100%;
  padding: 10px 8px; border: 0; border-radius: 9px;
  background: transparent; color: inherit; font: inherit;
  cursor: pointer; text-align: left;
  transition: background .14s var(--ez), transform .14s var(--ez);
}
.rowbtn:hover { background: var(--pn2); transform: translateX(2px); }
.rowbtn.static { cursor: default; }
.rowbtn.static:hover { transform: none; }
.rowbtn .tx { flex: 1; min-width: 0; }
.rowbtn .tx b { display: block; font-size: 13px; font-weight: 650; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.rowbtn .tx small { display: block; font-size: 12px; color: var(--faint); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.rank { width: 24px; height: 24px; flex: none; display: grid; place-items: center; border-radius: 50%; background: var(--pn3); color: var(--faint); font-size: 12px; font-weight: 800; font-variant-numeric: tabular-nums; }
.rank.r1 { background: #F5D98A; color: #6B4E00; }
.rank.r2 { background: #DFE4EC; color: #4A5568; }
.rank.r3 { background: #EBCDB4; color: #6E3E17; }
.facts { display: grid; grid-template-columns: repeat(auto-fit, minmax(140px, 1fr)); gap: 1px; background: var(--ln); }
.facts > span { display: block; padding: 10px 14px; background: var(--pn2); min-width: 0; }
.facts small { display: block; font-size: 12px; font-weight: 750; color: var(--faint); letter-spacing: .02em; }
.facts b { display: block; font-size: 13px; font-weight: 750; margin-top: 2px; font-variant-numeric: tabular-nums; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.kv { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; padding: 8px 0; border-bottom: 1px solid var(--ln); font-size: 12.5px; }
.kv:last-child { border-bottom: 0; }
.kv span { color: var(--dim); }
.kv b { font-weight: 750; font-variant-numeric: tabular-nums; text-align: right; }

/* ------------------------------ Menus and popovers ------------------------ */
.menu {
  position: fixed; z-index: 460;
  width: 216px; padding: 6px; max-height: 372px;
  overflow-y: auto; overflow-x: hidden; overscroll-behavior: contain;
  border: 1px solid var(--ln2); border-radius: 11px;
  background: var(--glass2); box-shadow: var(--sh2), inset 0 1px 0 var(--glasshi);
  animation: sfIn .16s var(--ez) both;
}
.menu-item {
  display: flex; align-items: center; gap: 9px; width: 100%;
  padding: 7px 8px; border: 0; border-radius: 7px;
  background: transparent; color: var(--ink2);
  font: inherit; font-size: 12px; font-weight: 650;
  cursor: pointer; text-align: left; text-decoration: none;
  transition: background .14s var(--ez);
}
.menu-item .ic { width: 15px; height: 15px; flex: none; display: grid; place-items: center; opacity: .8; }
.menu-item:hover { background: var(--pn2); text-decoration: none; color: var(--ink); }
.menu-item.danger { color: var(--negi); }
.menu-item.danger:hover { background: var(--negw); color: var(--negi); }
.menu-item.on { background: var(--accw); color: var(--acci); font-weight: 750; }
.menu-item:disabled, .menu-item[aria-disabled="true"] { color: var(--faint); cursor: not-allowed; opacity: .5; }
.menu-item:disabled:hover { background: transparent; }
.menu-sep { display: block; height: 1px; background: var(--ln); margin: 6px 5px; }
.menu-h { display: block; font-size: 12px; font-weight: 800; letter-spacing: .06em; color: var(--faint); padding: 4px 9px 7px; }
.pop {
  position: absolute; z-index: 300; padding: 8px;
  border: 1px solid var(--ln2); border-radius: 12px;
  background: var(--glass2); box-shadow: var(--sh2), inset 0 1px 0 var(--glasshi);
  animation: sfIn .18s var(--ez) both;
}
.info-pop {
  position: fixed; z-index: 530; width: 300px;
  padding: 14px 16px;
  border: 1px solid var(--ln2); border-radius: 13px;
  background: var(--glass2); box-shadow: var(--sh2), inset 0 1px 0 var(--glasshi);
  animation: sfIn .16s var(--ez) both;
}
.info-pop .h { display: flex; align-items: baseline; gap: 8px; margin-bottom: 7px; }
.info-pop .h b { flex: 1; min-width: 0; font-size: 13px; font-weight: 780; letter-spacing: -.01em; }
.info-pop p { margin: 0 0 8px; font-size: 12.5px; color: var(--ink2); line-height: 1.6; }
.info-pop p:last-child { margin-bottom: 0; }
.info-tip { max-width: 320px; padding: 10px 13px; border: 1px solid var(--glassbd); border-radius: 11px; background: var(--glass2); box-shadow: var(--sh2), inset 0 1px 0 var(--glasshi); font-size: 12.5px; color: var(--ink2); line-height: 1.5; }

/* ------------------------------ Overlays and dialogs ---------------------- */
.overlay {
  position: fixed; inset: 0; z-index: 520;
  display: grid; place-items: center; padding: 24px;
  background: rgba(6, 12, 26, .46);
  backdrop-filter: blur(14px) saturate(160%);
  -webkit-backdrop-filter: blur(14px) saturate(160%);
  animation: sfFade .18s var(--ez) both;
}
.overlay.top { place-items: start center; padding: 11vh 20px 20px; z-index: 460; background: rgba(6, 12, 26, .42); }
.overlay.zoom { cursor: zoom-out; }
.overlay.closing { animation: sfFade .16s var(--ez) reverse forwards; }
.dlg {
  width: 100%; max-width: 460px;
  border: 1px solid var(--ln2); border-radius: 15px;
  background: var(--glass2); box-shadow: var(--sh2), inset 0 1px 0 var(--glasshi);
  padding: 22px 24px;
  animation: sfIn .2s var(--ez) both;
  cursor: default;
}
.dlg.confirm { max-width: 420px; }
.dlg.wide { max-width: 486px; padding: 0; overflow: hidden; border-radius: 16px; }
.dlg.xl { max-width: 760px; padding: 0; overflow: hidden; border-radius: 18px; border-color: var(--glassbd); }
/* 8 September 2026: the photo frame takes the room the screen gives it, up
   to 640px (the base dialog's cap would have held it under 460), so the
   1600-pixel picture the lightbox now asks for has somewhere to show. */
.dlg.photo { width: min(640px, 100%, calc(100vh - 200px)); max-width: none; padding: 0; overflow: hidden; border-radius: 18px; border-color: var(--glassbd); animation: sfZoomIn .38s var(--ez) both; }
.overlay.closing .dlg { animation: sfOutFade .16s var(--ez) forwards; }
.dlg-head { display: flex; align-items: center; gap: 12px; margin-bottom: 15px; }
.dlg-head .tx { flex: 1; min-width: 0; }
.dlg-ic { width: 34px; height: 34px; flex: none; border-radius: 10px; display: grid; place-items: center; background: var(--grad-cta); color: #fff; box-shadow: 0 5px 14px rgba(23, 104, 242, .3); }
.dlg-ic.plain { width: 38px; height: 38px; border-radius: 11px; box-shadow: none; margin-bottom: 12px; background: var(--accw); color: var(--acci); }
.dlg-ic.plain.bad { background: var(--negw); color: var(--negi); }
.dlg-ic.plain.warn { background: var(--warnw); color: var(--warni); }
.dlg-ic.plain.ok { background: var(--posw); color: var(--posi); }
.dlg h2 { margin: 0; font-size: 14.5px; font-weight: 780; letter-spacing: -.02em; }
.dlg.confirm h2 { font-size: 16px; margin-bottom: 6px; }
.dlg .lede { margin: 0 0 18px; font-size: 13px; color: var(--dim); line-height: 1.5; }
.dlg .cur { display: block; font-size: 12px; color: var(--dim); line-height: 1.4; margin-top: 2px; }
.dlg-lab { display: flex; align-items: center; gap: 8px; margin-bottom: 7px; }
.dlg-lab label { font-size: 12.5px; font-weight: 700; color: var(--dim); }
.dlg .in.big { padding: 11px 13px; border-radius: 10px; font-size: 13.5px; font-weight: 700; letter-spacing: -.01em; font-variant-numeric: tabular-nums; }
.dlg .in-wrap .unit.big { font-size: 17px; font-weight: 750; color: var(--faint); left: 14px; }
.dlg .in.money { padding-left: 32px; font-size: 17px; }
.dlg-sugg { display: flex; flex-wrap: wrap; gap: 7px; margin-top: 10px; }
.sugg { display: inline-flex; align-items: baseline; gap: 6px; padding: 7px 11px; border: 1px solid var(--ln2); border-radius: 9px; background: var(--pn2); cursor: pointer; font: inherit; animation: sfPop .3s var(--ez) both; transition: border-color .14s var(--ez), transform .14s var(--ez), box-shadow .14s var(--ez); }
.sugg:hover { border-color: var(--acc); transform: translateY(-2px); box-shadow: var(--sh); }
.sugg.best { border-color: var(--acc); background: var(--accw); }
.sugg b { font-size: 13px; font-weight: 800; color: var(--ink); font-variant-numeric: tabular-nums; letter-spacing: -.01em; }
.sugg.best b { color: var(--acci); }
.sugg small { font-size: 12px; font-weight: 650; color: var(--dim); }
.dlg-sugg.carriers { margin-top: 8px; }
.sugg.sm { padding: 5px 9px; border-radius: 8px; gap: 5px; }
.sugg.sm b { font-size: 12.5px; }
.sugg.sm small { font-size: 11.5px; }
.dlg-live { display: flex; align-items: center; gap: 8px; margin-top: 11px; padding: 9px 11px; border-radius: 9px; background: var(--posw); color: var(--posi); font-size: 12.5px; font-weight: 700; line-height: 1.45; animation: sfFade .22s var(--ez) both; }
.dlg-live::before { content: ""; flex: none; width: 6px; height: 6px; border-radius: 50%; background: currentColor; }
.dlg-live.neg { background: var(--negw); color: var(--negi); }
.dlg-live.warn { background: var(--warnw); color: var(--warni); }
.dlg-busy { display: flex; align-items: center; gap: 10px; margin-top: 12px; }
.dlg-busy .bar { height: 5px; }
.dlg-busy .bar > i { transition: width .9s var(--ez); }
.dlg-busy small { flex: none; font-size: 12px; font-weight: 700; color: var(--dim); white-space: nowrap; }
.dlg-foot { display: flex; gap: 8px; margin-top: 16px; }
.dlg-foot.end { justify-content: flex-end; gap: 9px; margin-top: 18px; }
.dlg-foot .btn.wide { min-height: 40px; border-radius: 10px; }
.dlg-foot .btn.soft { min-height: 40px; padding: 0 16px; border-radius: 10px; border-color: var(--ln2); background: var(--pn2); color: var(--ink); }
.dlg-foot .btn.soft:hover { border-color: var(--acc); color: var(--acci); }
/* A disabled call to action is a solid quiet block in the design, not a
   washed-out gradient. */
/* Quiet, and still READABLE. White on --ln2 at 60% is about 1.6:1, so the
   words on the one button that says what pressing it would do were a shape.
   A disabled control still has to be legible - it is what tells the seller
   what they are being asked to complete. */
.app-body .dlg-foot .btn.grad[disabled], .app-body .dlg-foot .btn.grad:disabled { background: var(--pn3); border: 1px solid var(--ln2); color: var(--dim); opacity: 1; }
.dlg .foot-note { margin: 12px 0 0; font-size: 12px; color: var(--faint); line-height: 1.5; }
.dlg-band { display: flex; align-items: center; gap: 12px; padding: 16px 18px; background: var(--grad-cta); color: #fff; }
.dlg-band .ip, .dlg-band .dlg-ic { background: rgba(255, 255, 255, .17); color: #fff; box-shadow: none; }
.dlg-band h2 { color: #fff; font-size: 15px; }
.dlg-band small { display: block; font-size: 12px; color: rgba(255, 255, 255, .74); margin-top: 2px; }
.dlg-band .xbtn { background: rgba(255, 255, 255, .14); color: #fff; }
.dlg-band .xbtn:hover { background: rgba(255, 255, 255, .26); color: #fff; }
.dlg-body { padding: 14px 18px 18px; }
.dlg.wide .dlg-band .xbtn { width: 26px; height: 26px; }
.dlg.wide .dlg-body .lede { margin: 0 0 12px; }
.dlg.wide .dlg-body .dlg-foot { margin-top: 14px; align-items: center; }
.steps { display: grid; }
.step { display: flex; gap: 12px; padding: 10px 0; animation: sfRise .32s var(--ez) both; }
.step .n { flex: none; width: 24px; height: 24px; border-radius: 8px; display: grid; place-items: center; background: var(--accw); color: var(--acci); font-size: 12px; font-weight: 800; }
.step b { display: block; font-size: 13px; font-weight: 750; letter-spacing: -.01em; }
.step small { display: block; font-size: 12.5px; color: var(--dim); line-height: 1.55; margin-top: 2px; text-wrap: pretty; }
.callout { margin: 9px 0 0; padding: 10px 12px; border-radius: 10px; border: 1px solid var(--ln); background: var(--pn2); font-size: 12.5px; color: var(--ink2); line-height: 1.55; text-wrap: pretty; }

/* The command palette (SF.cmdk markup, redesign look): a 520px glass box
   near the top, plain rows with the key hint on the right, one sentence of
   help in the foot. */
/* ABOVE EVERYTHING, because the key handler opens it above everything: "The
   palette answers to Cmd/Ctrl-K everywhere, dialogs included" (site/js/ui.js).
   At 460 it opened BEHIND any dialog backdrop - .overlay is 520 and .sf-modal
   is 9100 - while still taking the focus, so every keystroke went into a box
   the seller could not see. ui.css's own 9200 is the number; this rule adds
   the app's layout and must not undo it. */
.app-body .sf-cmdk { z-index: 9200; display: grid; place-items: start center; padding: 11vh 20px 20px; }
.app-body .sf-cmdk-back { background: rgba(6, 12, 26, .42); backdrop-filter: blur(12px) saturate(160%); -webkit-backdrop-filter: blur(12px) saturate(160%); animation: sfFade .16s var(--ez) both; }
.app-body .sf-cmdk-box { width: 100%; max-width: 520px; margin: 0; border: 1px solid var(--ln2); border-radius: 14px; background: var(--glass2); box-shadow: var(--sh2), inset 0 1px 0 var(--glasshi); overflow: hidden; animation: sfIn .16s var(--ez) both; }
.app-body .sf-cmdk-in { gap: 9px; padding: 12px 14px; border-bottom: 1px solid var(--ln); }
.app-body .sf-cmdk-in svg { width: 15px; height: 15px; color: var(--faint); }
.app-body .sf-cmdk-in input { font-size: 13.5px; color: var(--ink); min-height: 0; padding: 0; }
.app-body .sf-cmdk-in input::placeholder { color: var(--faint); }
.app-body .sf-cmdk-in kbd, .app-body .sf-cmdk-item .kb kbd { padding: 2px 6px; border: 1px solid var(--ln); border-bottom-width: 1px; border-radius: 5px; background: var(--pn2); color: var(--faint); font-family: inherit; font-size: 12px; font-weight: 700; line-height: normal; }
.app-body .sf-cmdk-list { max-height: 46vh; padding: 6px; overflow-x: hidden; }
.app-body .sf-cmdk-group { padding: 8px 9px 4px; font-size: 12px; font-weight: 800; letter-spacing: .06em; color: var(--faint); }
.app-body .sf-cmdk-item { gap: 10px; padding: 8px 9px; border-radius: 8px; color: var(--ink); font-size: 13px; font-weight: 600; transition: background .12s var(--ez); }
.app-body .sf-cmdk-item .tx { display: flex; align-items: baseline; gap: 6px; min-width: 0; }
.app-body .sf-cmdk-item .tx b { display: block; flex: none; max-width: 100%; font-size: 13px; font-weight: 600; color: var(--ink); }
.app-body .sf-cmdk-item .tx small { display: block; margin: 0; min-width: 0; font-size: 12px; font-weight: 500; color: var(--faint); }
.app-body .sf-cmdk-item.on, .app-body .sf-cmdk-item:hover { background: var(--pn2); }
.app-body .sf-cmdk-item .kb { opacity: 1; gap: 4px; }
.app-body .sf-cmdk-none { padding: 14px 9px; text-align: left; font-size: 12px; color: var(--faint); }
.app-body .sf-cmdk-foot { display: block; padding: 9px 14px; border-top: 1px solid var(--ln); background: var(--pn2); font-size: 12px; color: var(--faint); line-height: 1.5; }
/* The shortcuts sheet (SF.keys), the same box. */
.app-body .sf-keys { z-index: 9210; display: grid; place-items: start center; padding: 11vh 20px 20px; }
.app-body .sf-keys-back { background: rgba(6, 12, 26, .42); backdrop-filter: blur(12px) saturate(160%); -webkit-backdrop-filter: blur(12px) saturate(160%); animation: sfFade .16s var(--ez) both; }
.app-body .sf-keys-box { width: 100%; max-width: 640px; margin: 0; padding: 20px 22px 18px; border: 1px solid var(--ln2); border-radius: 14px; background: var(--glass2); box-shadow: var(--sh2), inset 0 1px 0 var(--glasshi); animation: sfIn .16s var(--ez) both; }
.app-body .sf-keys-box h2 { margin: 0 0 12px; font-size: 16px; font-weight: 780; letter-spacing: -.02em; }
.app-body .sf-keys-cols { display: block; column-count: 2; column-gap: 28px; }
.app-body .sf-keys-col { break-inside: avoid; -webkit-column-break-inside: avoid; }
.app-body .sf-keys-col h3 { margin: 8px 0 6px; font-size: 12px; font-weight: 800; letter-spacing: .06em; color: var(--faint); }
.app-body .sf-keys-row { padding: 5px 0; font-size: 13px; color: var(--ink2); }
.app-body .sf-keys-row kbd { padding: 1px 6px; border: 1px solid var(--ln); border-bottom-width: 1px; border-radius: 5px; background: var(--pn2); color: var(--dim); font-family: inherit; font-size: 12px; font-weight: 700; }
.app-body .sf-keys-note { margin: 12px 0 0; font-size: 12px; color: var(--faint); }

/* ------------------------------ Toasts (SF.toast markup, redesign look) --- */
/* FLEX, LIKE ui.css, because `display: grid` here quietly dropped its
   `flex-direction: column-reverse` and the tool stacked its toasts the
   opposite way round from every other page - and the eviction then jumped the
   stack. Only the width and the gap are the app's own. */
.app-body .sf-toasts { display: flex; flex-direction: column-reverse; gap: 9px; right: 20px; bottom: var(--sf-toast-offset); width: auto; max-width: 430px; }
.app-body .sf-toast {
  display: flex; align-items: center; gap: 10px;
  padding: 11px 11px 11px 14px;
  border-radius: 11px; border: 1px solid var(--pos);
  background: var(--glass2);
  box-shadow: var(--sh2), inset 0 1px 0 var(--glasshi);
  min-width: 272px; max-width: 430px;
  animation: sfIn .22s var(--ez) both;
}
.app-body .sf-toast.out { animation: sfOutFade .18s var(--ez) forwards; }
.app-body .sf-toast > .sf-toast-ic { width: 22px; height: 22px; flex: none; display: grid; place-items: center; border-radius: 7px; margin: 0; background: var(--posw); color: var(--posi); }
.app-body .sf-toast > .sf-toast-ic svg { width: 13px; height: 13px; stroke-width: 2.4; }
.app-body .sf-toast.success > .sf-toast-ic svg { stroke-width: 3; }
.app-body .sf-toast > .sf-toast-txt { flex: 1; min-width: 0; padding: 0; display: block; margin: 0; }
.app-body .sf-toast .sf-toast-txt > strong { display: block; font-size: 13px; font-weight: 650; color: var(--ink); line-height: 1.45; letter-spacing: 0; text-wrap: pretty; }
.app-body .sf-toast .sf-toast-txt > span { display: block; margin: 2px 0 0; font-size: 12.5px; color: var(--dim); line-height: 1.45; }
.app-body .sf-toast > .sf-toast-act { display: inline-flex; align-items: center; flex: none; margin: 0; height: 32px; padding: 0 12px; border-radius: 8px; border: 1px solid var(--ln2); background: var(--pn2); color: var(--acci); font-size: 12.5px; font-weight: 750; white-space: nowrap; }
.app-body .sf-toast .sf-toast-act:hover { border-color: var(--acc); background: var(--accw); }
.app-body .sf-toast > .sf-toast-x { width: 28px; height: 28px; flex: none; margin: 0; border-radius: 8px; color: var(--dim); display: grid; place-items: center; }
.app-body .sf-toast > .sf-toast-x:hover { background: var(--pn3); color: var(--ink); }
.app-body .sf-toast > .sf-toast-bar { display: none; }
.app-body .sf-toast.info { border-color: var(--acc); }
.app-body .sf-toast.info > .sf-toast-ic { background: var(--accw); color: var(--acci); }
.app-body .sf-toast.warning { border-color: var(--warn); }
.app-body .sf-toast.warning > .sf-toast-ic { background: var(--warnw); color: var(--warni); }
.app-body .sf-toast.danger { border-color: var(--neg); }
.app-body .sf-toast.danger > .sf-toast-ic { background: var(--negw); color: var(--negi); }
.app-body .sf-toast.success { border-color: var(--pos); }

/* SF.dialog markup, redesign look (confirm / prompt). */
.app-body .sf-modal { padding: 24px; z-index: 9100; }
.app-body .sf-modal-backdrop { background: rgba(6, 12, 26, .46); backdrop-filter: blur(14px) saturate(160%); -webkit-backdrop-filter: blur(14px) saturate(160%); animation: sfRise .18s var(--ez) both; }
.app-body .sf-modal-box {
  width: min(420px, 100%);
  padding: 22px 24px;
  border-radius: 15px; border: 1px solid var(--ln2);
  background: var(--glass2);
  box-shadow: var(--sh2), inset 0 1px 0 var(--glasshi);
  animation: sfIn .24s var(--ez) both;
}
.app-body .sf-modal-ic { width: 38px; height: 38px; border-radius: 11px; margin-bottom: 12px; background: var(--accw); color: var(--acci); }
.app-body .sf-modal-ic svg { width: 18px; height: 18px; }
.app-body .sf-modal.danger .sf-modal-ic { background: var(--negw); color: var(--negi); }
.app-body .sf-modal.warning .sf-modal-ic { background: var(--warnw); color: var(--warni); }
.app-body .sf-modal.success .sf-modal-ic { background: var(--posw); color: var(--posi); }
.app-body .sf-modal-box h2 { font-size: 16px; font-weight: 780; letter-spacing: -.02em; margin: 0 0 6px; }
.app-body .sf-modal-body { font-size: 13px; color: var(--dim); line-height: 1.5; }
.app-body .sf-modal-field { margin-top: 12px; }
.app-body .sf-modal-field label { font-size: 12.5px; font-weight: 700; color: var(--dim); }
.app-body .sf-modal-field input { height: 38px; padding: 0 12px; border-radius: 9px; border: 1px solid var(--ln2); background: var(--pn2); font-size: 13px; }
.app-body .sf-modal-field input:focus-visible { border-color: var(--acc); box-shadow: 0 0 0 3px var(--accw); }
.app-body .sf-modal-err { display: flex; align-items: center; gap: 5px; margin-top: 6px; font-size: 12px; font-weight: 650; color: var(--negi); line-height: 1.45; }
.app-body .sf-modal-foot { margin-top: 18px; gap: 9px; }
.app-body .sf-modal-foot .btn { min-height: 38px; padding: 0 16px; font-size: 13px; }
.app-body .sf-modal-foot .btn.primary, .app-body .sf-modal-foot .btn.danger { padding: 0 18px; font-weight: 750; }
.app-body .sf-modal-foot .btn.danger { background: var(--neg); box-shadow: none; }

/* Info popovers from SF.dressInfoButtons, redesign look. */
.app-body .sf-info-pop { border: 1px solid var(--ln2); border-radius: 13px; background: var(--glass2); box-shadow: var(--sh2), inset 0 1px 0 var(--glasshi); font-size: 12.5px; color: var(--ink2); line-height: 1.6; }
.app-body button[data-info] { width: 18px; height: 18px; border: 1px solid var(--ln2); border-radius: 50%; background: transparent; color: var(--dim); font-size: 12px; font-weight: 800; }
.app-body button[data-info]:hover { color: var(--acci); border-color: var(--acc); }

/* ------------------------------ Skeletons and empties --------------------- */
.skel { border: 1px solid var(--ln); border-radius: 12px; background: linear-gradient(100deg, var(--pn) 30%, var(--pn3) 50%, var(--pn) 70%); background-size: 200% 100%; animation: sfShim 1.1s linear infinite; }
.skel.r14 { border-radius: 14px; }
.skel.d1 { animation-delay: .05s; }
.skel.d2 { animation-delay: .1s; }
.skel.d3 { animation-delay: .15s; }
.skel.d4 { animation-delay: .2s; }
.skel.line { height: 11px; border: 0; border-radius: 99px; background: linear-gradient(100deg, var(--pn2) 30%, var(--pn3) 50%, var(--pn2) 70%); background-size: 200% 100%; }
.skel-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 12px; }
.skel-stack { display: grid; gap: 12px; }
.empty { padding: 54px 20px; text-align: center; animation: sfRise .3s var(--ez) both; }
.empty .ic { width: 46px; height: 46px; margin: 0 auto 12px; border-radius: 13px; display: grid; place-items: center; background: var(--pn3); color: var(--faint); }
.empty h3, .empty b.h { display: block; margin: 0 0 4px; font-size: 14px; font-weight: 750; }
.empty p { margin: 0 0 14px; font-size: 13px; color: var(--dim); }
.empty p:last-child { margin-bottom: 0; }
.empty.sm { padding: 34px 18px; display: flex; flex-direction: column; align-items: center; gap: 6px; }
.empty.sm .ic { width: 40px; height: 40px; border-radius: 12px; margin: 0; }
.empty.sm b.h { font-size: 13.5px; margin: 0; }
.empty.sm p, .empty.sm small { font-size: 12.5px; color: var(--dim); margin: 0; line-height: 1.5; }
.empty.ok .ic { background: var(--posw); color: var(--posi); animation: sfTick .5s var(--ez) both; }
.empty.acc .ic { background: var(--accw); color: var(--acci); }

/* Gate cards: signed out, no plan, first sync, cannot load. */
.gate { max-width: 520px; margin: clamp(20px, 8vh, 80px) auto; text-align: center; animation: sfRise .28s var(--ez) both; }
.gate .card { border-radius: 16px; box-shadow: var(--sh2); padding: clamp(26px, 4vw, 40px); }
.gate .ip { margin: 0 auto 16px; }
.gate h2 { margin: 0 0 8px; font-size: 20px; font-weight: 800; letter-spacing: -.026em; }
.gate p { margin: 0 0 22px; font-size: 13px; color: var(--dim); line-height: 1.6; }
.gate .acts { display: flex; gap: 9px; justify-content: center; flex-wrap: wrap; }
.gate .note { margin: 18px 0 0; font-size: 12.5px; color: var(--faint); font-variant-numeric: tabular-nums; }
.gate .note a { color: var(--acci); font-weight: 700; }
.firstrun { max-width: 720px; margin: clamp(8px, 3vh, 32px) auto; animation: sfRise .28s var(--ez) both; }
.firstrun .card { border-radius: 16px; box-shadow: var(--sh2); padding: clamp(22px, 3vw, 32px); }
.firstrun img { width: 44px; height: 44px; border-radius: 12px; margin-bottom: 16px; }
.firstrun h2 { margin: 0 0 6px; font-size: 21px; font-weight: 800; letter-spacing: -.028em; }
.firstrun .lede { margin: 0 0 8px; font-size: 13px; color: var(--dim); line-height: 1.55; max-width: 62ch; }
.firstrun .prog { display: flex; align-items: center; gap: 10px; margin: 18px 0 4px; }
.firstrun .prog .bar { height: 5px; }
.firstrun .prog b { font-size: 12.5px; font-weight: 750; color: var(--dim); font-variant-numeric: tabular-nums; }
/* The .setup / .setup-step block that used to sit here is gone. No markup on
   any page drew it - .firstrun .step above is the live first-run list - and
   its step numeral was #fff on a transparent background, so had anything ever
   used it the number would have been invisible. */
.firstrun .foot { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; margin-top: 12px; padding-top: 14px; border-top: 1px solid var(--ln); }
.firstrun .foot small { flex: 1; min-width: 200px; font-size: 12px; color: var(--faint); line-height: 1.5; }

/* Sample-shop banner. */
.demo-band {
  display: flex; align-items: flex-start; gap: 12px;
  padding: 13px 17px; margin-bottom: 14px; border-radius: 12px;
  background: linear-gradient(100deg, var(--acc), #0F4FBF); color: #fff;
  box-shadow: 0 8px 22px rgba(23, 104, 242, .28);
}
.demo-band > svg { flex: none; margin-top: 1px; opacity: .9; }
.demo-band .tx { flex: 1; min-width: 0; font-size: 13px; line-height: 1.55; }
.demo-band .tx b { font-weight: 800; }
.demo-band .acts { display: flex; gap: 8px; flex: none; flex-wrap: wrap; }
.demo-band .acts .btn { min-height: 0; height: auto; padding: 6px 13px; border: 1px solid rgba(255, 255, 255, .45); border-radius: 8px; background: rgba(255, 255, 255, .14); color: #fff; font-size: 12.5px; font-weight: 750; box-shadow: none; }
.demo-band .acts .btn:hover { background: rgba(255, 255, 255, .26); color: #fff; border-color: rgba(255, 255, 255, .6); transform: none; }
.demo-band .acts .btn.primary { border: 0; background: #fff; color: var(--acc2); font-weight: 800; }
.demo-band .acts .btn.primary:hover { background: #fff; color: var(--acc2); transform: translateY(-1px); }

/* ------------------------------ Small screens ----------------------------
   The tool is a desktop surface: the rail, the tables and the editor have no
   phone layout in the design, and there is no honest way to invent one here.
   Below 760px on a TOUCH device (a phone, a small tablet) the app grid steps
   aside and shell.js paints one gate card that says so and points back at
   the pages that do work on a phone.

   A DESKTOP WINDOW THAT IS NARROW IS A DIFFERENT CASE (September 2026
   audit): a laptop at 200% zoom, or two windows side by side, used to get
   the same refusal, and the person in front of it has a keyboard, a mouse
   and every reason to keep working. So with a fine pointer the tool stays,
   holds its desktop width and scrolls sideways instead of vanishing. */
.app-small { display: none; }
@media (max-width: 760px) and (pointer: coarse) {
  html.app-html, html.app-html body, body.app-body { height: auto; overflow: auto; }
  body.app-body > .app { display: none !important; }
  .app-small { display: block; padding: 0 18px 40px; }
  .app-small .gate { margin: clamp(24px, 10vh, 64px) auto; }
  .app-small .gate .acts .btn { width: 100%; justify-content: center; }
}
@media (max-width: 760px) and (pointer: fine) {
  html.app-html, html.app-html body { overflow-x: auto; }
  body.app-body > .app { min-width: 960px; }
}

/* ------------------------------ Print ------------------------------------- */
@media print {
  @page { size: A4; margin: 12mm 13mm; }
  html, body.app-body { overflow: visible !important; height: auto !important; background: #fff !important; }
  body:has(#sf-printwrap) .app { display: none !important; }
  [data-noprint], .rail, .app-head, .sf-toasts { display: none !important; }
  .app { display: block; height: auto; }
  .app-main { overflow: visible; padding: 0; }
  #sf-printwrap { position: static !important; inset: auto !important; padding: 0 !important; background: #fff !important; overflow: visible !important; }
}

/* ------------------------------ Reduced motion ---------------------------- */
@media (prefers-reduced-motion: reduce) {
  .app-body *, .app-body *::before, .app-body *::after { animation-duration: .01ms !important; animation-iteration-count: 1 !important; transition-duration: .01ms !important; }
}