/* ============================================================================
   SellFalcon dashboard - the page's own layouts (redesign, September 2026).
   app.css carries the shell and every primitive; this file holds only what
   the dashboard's six views arrange out of them.
   ============================================================================ */

/* ------------------------------ Tabs row ---------------------------------- */
.tabsrow { display: flex; align-items: center; gap: 10px; margin: 0 0 14px; flex-wrap: wrap; min-width: 0; animation: sfRise .26s var(--ez) both; }
.tabsrow .spacer { flex: 1; }
.tabs-search { display: inline-flex; align-items: center; gap: 10px; min-width: 0; }
.tabs-search .search .in { width: 100%; }
.tabs-count { font-size: 12.5px; color: var(--faint); white-space: nowrap; font-variant-numeric: tabular-nums; }
.tabs-sel { display: inline-flex; }
.tabsrow .btn .spin { display: grid; place-items: center; }
/* Check eBay now: a quiet bordered button on the panel, not a blue link. */
.app-body .btn.check-ebay { min-height: 0; height: auto; padding: 7px 13px; border: 1px solid var(--ln); border-radius: 9px; background: var(--pn); color: var(--ink2); font-size: 12px; font-weight: 700; box-shadow: none; }
.app-body .btn.check-ebay:hover { border-color: var(--ln2); color: var(--ink); background: var(--pn); transform: none; box-shadow: none; }
.app-body .btn.check-ebay .spin { display: grid; place-items: center; }
.app-body .inbox-top .btn.check-ebay { height: 32px; padding: 0 11px; background: var(--pn2); border-color: var(--ln); }
.btn.spinning .spin, .spin.on { animation: sfSpin .9s linear infinite; }

/* ------------------------------ Shared bits ------------------------------- */
.tile.has-img > img { position: absolute; inset: 0; width: 100%; height: 100%; }
.vsep { display: inline-block; width: 1px; height: 12px; background: var(--ln); align-self: center; flex: none; }
.spacer { flex: 1; }
.posi { color: var(--posi); } .negi { color: var(--negi); } .warni { color: var(--warni); } .acci { color: var(--acci); }
.dim { color: var(--dim); } .faint { color: var(--faint); } .strong { font-weight: 750; }
.hint { font-size: 12px; color: var(--faint); }
.empty > .ip { margin: 0 auto 12px; }
/* The Products to list empty state shows the flow (7 September 2026): three
   tiles with arrows between, the words kept to one line each. */
.empty.has-flow > b { font-size: 15px; }
.empty-flow { display: flex; align-items: flex-start; justify-content: center; gap: 6px; margin: 18px auto 2px; max-width: 520px; }
.empty-flow .ef-tile { display: grid; justify-items: center; gap: 7px; width: 132px; }
.empty-flow .ef-tile .ip { margin: 0; animation: sfPop .4s var(--ez) both; }
.empty-flow .ef-tile:nth-child(3) .ip { animation-delay: .12s; }
.empty-flow .ef-tile:nth-child(5) .ip { animation-delay: .24s; }
.empty-flow .ef-tile small { font-size: 12px; font-weight: 700; color: var(--dim); line-height: 1.35; text-align: center; }
.empty-flow .ef-arrow { display: grid; place-items: center; height: 46px; color: var(--faint); }
.empty.has-flow > .btn { margin-top: 16px; }
.empty > b { display: block; margin: 0 0 4px; font-size: 14px; font-weight: 750; }
.empty > small { display: block; font-size: 13px; color: var(--dim); line-height: 1.5; max-width: 52ch; margin: 0 auto; }
.empty > .btn { margin-top: 14px; }
.empty.sm > .ip { margin-bottom: 0; }
.empty.sm > b { font-size: 13.5px; margin: 0; }
.empty.ok > .ip { background: var(--posw); color: var(--posi); }
.empty .ip.tick { animation: sfTick .5s var(--ez) both; }
.card-h .end .btn { flex: none; }
.acts { display: inline-flex; align-items: center; justify-content: flex-end; gap: 6px; }
.dash-note { margin: 8px 0 0; font-size: 12.5px; color: var(--dim); line-height: 1.5; }
.dash-note.warn { color: var(--warni); }
.act-btn { display: inline-flex; align-items: center; gap: 6px; min-height: 30px; padding: 0 11px; border: 1px solid var(--ln); border-radius: 8px; background: var(--pn2); color: var(--ink2); font: inherit; font-size: 12.5px; font-weight: 700; cursor: pointer; white-space: nowrap; }
.act-btn:hover { border-color: var(--acc); color: var(--acci); }
.act-btn:disabled { opacity: .5; cursor: not-allowed; }

/* ------------------------------ Gates ------------------------------------- */
.gate-card { border-radius: 16px; box-shadow: var(--sh2); padding: clamp(26px, 4vw, 40px); text-align: center; }
.gate-card > .ip { margin: 0 auto 16px; }
.gate-card h2 { margin: 0 0 8px; font-size: 20px; font-weight: 800; letter-spacing: -.026em; }
.gate-card 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 !important; font-size: 12.5px !important; color: var(--faint) !important; }
.gate-note a { color: var(--acci); font-weight: 700; }
.skel-page { display: grid; gap: 12px; animation: sfFade .2s var(--ez) both; }
.firstrun .logo { display: block; }
.firstrun h2 { margin: 0 0 6px; font-size: 21px; font-weight: 800; letter-spacing: -.028em; }
.firstrun > .card > p { margin: 0 0 8px; font-size: 13px; color: var(--dim); line-height: 1.55; max-width: 62ch; }
.firstrun .progress { display: flex; align-items: center; gap: 10px; margin: 18px 0 4px; }
.firstrun .progress b { font-size: 12.5px; font-weight: 750; color: var(--dim); font-variant-numeric: tabular-nums; white-space: nowrap; }
.firstrun .steps { display: grid; grid-template-columns: 1fr; gap: 2px; margin-top: 14px; counter-reset: none; }
.firstrun .step { display: flex; gap: 13px; padding: 14px 0; margin: 0; border: 0; border-top: 1px solid var(--ln); border-radius: 0; background: transparent; box-shadow: none; animation: none; transition: none; }
.firstrun .step:hover { transform: none; box-shadow: none; border-color: var(--ln); }
.firstrun .step .btn.ghost { border-color: var(--ln2); background: var(--pn2); color: var(--ink); }
.firstrun .step .btn.ghost:hover { border-color: var(--acc); color: var(--acci); }
.firstrun .step .mark { width: 22px; height: 22px; flex: none; border-radius: 50%; border: 2px solid var(--acc); display: grid; place-items: center; font-size: 12px; font-weight: 800; color: var(--acci); }
.firstrun .step.done .mark { border-color: var(--pos); background: var(--pos); color: #fff; }
.firstrun .step.later .mark { border-color: var(--ln2); color: var(--faint); }
.firstrun .step .tx { flex: 1; min-width: 0; }
.firstrun .step .l1 { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.firstrun .step .l1 b { font-size: 13.5px; font-weight: 750; letter-spacing: -.012em; display: inline; }
.firstrun .step.done .l1 b { color: var(--dim); }
.firstrun .step.later .l1 b { color: var(--faint); }
.firstrun .step .l1 .tag { padding: 2px 7px; font-size: 12px; font-weight: 700; }
.firstrun .step .p { display: block; font-size: 12px; color: var(--dim); line-height: 1.5; margin: 3px 0 0; max-width: 60ch; }
.firstrun .step .needs { display: block; margin-top: 8px; font-size: 12px; color: var(--faint); font-weight: 650; }
.firstrun .step .btn { margin-top: 10px; }
.firstrun .notice { margin-top: 12px; }
.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; }

/* The sample shop's band: only on /demo. */
#demoBand { display: none; }
body.is-demo #demoBand { display: flex; }
.demo-band .ic { flex: none; margin-top: 1px; opacity: .9; display: grid; }

/* ------------------------------ Today ------------------------------------- */
.today-head { display: flex; align-items: baseline; gap: 10px; margin-bottom: 10px; min-width: 0; flex-wrap: wrap; }
.today-head h1 { margin: 0; font-size: 17px; font-weight: 800; letter-spacing: -.025em; line-height: 1.2; white-space: nowrap; }
.today-head p { margin: 0; font-size: 12.5px; color: var(--dim); white-space: nowrap; }
.today-head .name-nudge { display: inline-flex; align-items: center; gap: 2px; align-self: center; animation: sfPop .3s var(--ez) .4s both; }
.app-body .today-head .name-nudge .btn.xs { min-height: 0; height: 24px; padding: 0 9px 0 7px; border-radius: 999px; font-size: 12px; font-weight: 750; gap: 5px; }
.today-facts { display: inline-flex; align-items: center; gap: 6px; align-self: center; flex-wrap: wrap; }
.today-facts.end { margin-left: auto; }
.today-facts .fact { display: inline-flex; align-items: center; gap: 5px; height: 26px; padding: 0 9px; border-radius: 999px; background: var(--pn); border: 1px solid var(--ln); font-size: 12px; color: var(--dim); white-space: nowrap; }
.today-facts .fact b { color: var(--ink); font-variant-numeric: tabular-nums; }
.today-facts .fact b.posi { color: var(--posi); }
.today-facts .fact b.warni { color: var(--warni); }
.today-facts .fact b.faint { color: var(--faint); }
.today-facts .fact .dotc { width: 6px; height: 6px; }
.today-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(390px, 1fr)); gap: 12px; margin-bottom: 12px; }
/* A grid child must be allowed to shrink or the sparkline pushes the column. */
.profit-card { min-width: 0; }
.pc-top { display: flex; align-items: center; gap: 9px; margin-bottom: 6px; flex-wrap: wrap; min-width: 0; }
.pc-top .lbl { font-size: 12.5px; font-weight: 650; color: var(--dim); white-space: nowrap; }
.pc-top .trend { display: inline-flex; align-items: center; gap: 4px; padding: 2px 7px; border-radius: 999px; font-size: 12px; font-weight: 750; flex: none; background: var(--posw); color: var(--posi); transition: background .25s var(--ez), color .25s var(--ez); }
.pc-top .trend.down { background: var(--negw); color: var(--negi); }
.pc-top .trend.level { background: var(--pn3); color: var(--dim); }
.pc-top .seg { margin-left: auto; gap: 2px; }
.pc-top .seg > button { font-weight: 650; }
.pc-top .seg > button:hover { color: var(--ink); }
.pc-main { display: flex; align-items: flex-end; gap: 16px; }
.pc-main .big { font-size: 40px; font-weight: 800; letter-spacing: -.04em; line-height: 1; font-variant-numeric: tabular-nums; color: var(--ink); }
.spark-wrap { flex: 1; min-width: 0; max-width: 340px; padding-bottom: 4px; position: relative; display: block; }
.spark-tip { position: absolute; left: 0; bottom: calc(100% + 4px); transform: translateX(-50%); z-index: 3; pointer-events: none; padding: 5px 8px; border: 1px solid var(--glassbd); border-radius: 8px; background: var(--glass2); box-shadow: var(--sh2), inset 0 1px 0 var(--glasshi); white-space: nowrap; font-size: 12px; color: var(--ink2); }
.spark-tip b { color: var(--ink); font-variant-numeric: tabular-nums; }
#spSvg { width: 100%; height: 46px; overflow: visible; cursor: crosshair; display: block; }
#spSvg .fill { fill: var(--posw); transition: d .5s var(--ez); }
#spSvg .line { fill: none; stroke: var(--pos); stroke-width: 2; stroke-linejoin: round; stroke-linecap: round; stroke-dasharray: 600; animation: sfDraw 1.1s var(--ez) .15s both; }
#spSvg .end { fill: var(--pos); }
#spSvg.down .fill { fill: var(--negw); }
#spSvg.down .line, #spSvg.down .end { stroke: var(--neg); fill: none; }
#spSvg.down .end { fill: var(--neg); }
#spSvg #spHx { stroke: var(--ln2); stroke-width: 1; stroke-dasharray: 3 3; vector-effect: non-scaling-stroke; }
#spSvg #spDot { fill: var(--pos); stroke: var(--pn); stroke-width: 2; }
#spSvg.down #spDot { fill: var(--neg); }
.spark-axis { display: flex; justify-content: space-between; font-size: 12px; color: var(--faint); margin-top: 2px; }
.pc-num { display: flex; flex-direction: column; gap: 4px; min-width: 0; }
.pc-num .big-sub { font-size: 12px; color: var(--faint); font-weight: 600; white-space: nowrap; }
.pc-facts { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); margin-top: 12px; padding-top: 12px; border-top: 1px solid var(--ln); }
.pc-facts > div { min-width: 0; padding: 0 12px; border-left: 1px solid var(--ln); }
.pc-facts > div:first-child { padding-left: 0; border-left: 0; }
.pc-facts > div:last-child { padding-right: 0; }
/* The figure gets the clamp its label already has. Five columns of a profit
   strip are narrow, `white-space: nowrap` was the only rule on the value, and
   a long one spilled straight across the border-left of the column beside it. */
.pc-facts b { overflow: hidden; text-overflow: ellipsis; }
.pc-facts span { display: block; font-size: 12px; color: var(--faint); font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.pc-facts span small { font-size: 12px; font-weight: 600; color: var(--warni); }
.pc-facts b { display: block; font-size: 17px; font-weight: 750; letter-spacing: -.025em; font-variant-numeric: tabular-nums; margin-top: 2px; white-space: nowrap; }
.pc-facts b.posi { color: var(--posi); }
.pc-facts b.negi { color: var(--negi); }
.pc-facts b.faint { color: var(--faint); font-weight: 650; }
/* The card itself decides: below 520px of card (a two-column Today on a
   laptop, or a phone) the five facts wrap to three and two, and the legend
   stacks. Measured on the card, not the window, because the card's width
   is what the labels have to fit. */
.profit-card { container-type: inline-size; }
@container (max-width: 520px) {
  .pc-facts { grid-template-columns: repeat(3, minmax(0, 1fr)); row-gap: 10px; }
  .pc-facts > div:nth-child(4) { padding-left: 0; border-left: 0; }
  .pc-money .mleg { grid-template-columns: 1fr; gap: 4px; }
}
/* 8 September 2026, direction A of the profit-tile canvas: the tile's empty
   bottom band answers the big number. One bar cuts the costed orders' revenue
   into what the supplier took, what eBay took and what stayed, with a legend
   and the pence-per-pound line. It sits quieter than the figure above it on
   purpose: the same period read a second way, never a second headline. */
.pc-money { margin-top: 12px; padding: 11px 14px 12px; border: 1px solid var(--ln); border-radius: 12px; background: var(--pn2); display: flex; flex-direction: column; gap: 9px; min-width: 0; }
.pc-money .mh { display: flex; align-items: baseline; gap: 8px; flex-wrap: wrap; }
.pc-money .mh .ttl { font-size: 11px; font-weight: 750; letter-spacing: .02em; text-transform: uppercase; color: var(--faint); }
.pc-money .mh .per { margin-left: auto; font-size: 12px; color: var(--faint); white-space: nowrap; }
.pc-money .mh .per b { font-weight: 750; }
.pc-money .mbar { display: flex; height: 14px; gap: 2px; border-radius: 999px; overflow: hidden; transform-origin: left; animation: sfGrow .8s var(--ez) .25s both; }
.pc-money .mbar > i { display: block; height: 100%; min-width: 2px; transition: width .6s var(--ez); }
.pc-money .mbar > i.cost { background: #94A3B8; border-radius: 999px 0 0 999px; }
.pc-money .mbar > i.fees { background: var(--warn); }
.pc-money .mbar > i.profit { background: var(--pos); border-radius: 0 999px 999px 0; flex: 1 1 0; }
.pc-money .mbar > i.loss { background: var(--neg); border-radius: 0 999px 999px 0; }
.pc-money .mbar > i:last-child { border-radius: 0 999px 999px 0; }
.pc-money .mbar > i:first-child { border-radius: 999px 0 0 999px; }
.pc-money .mbar > i:only-child { border-radius: 999px; }
.pc-money .mleg { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; }
.pc-money .mleg > span { display: flex; align-items: center; gap: 7px; min-width: 0; font-size: 12px; color: var(--dim); white-space: nowrap; }
.pc-money .mleg > span > i { width: 9px; height: 9px; flex: none; border-radius: 3px; display: inline-block; }
.pc-money .mleg > span > i.cost { background: #94A3B8; }
.pc-money .mleg > span > i.fees { background: var(--warn); }
.pc-money .mleg > span > i.profit { background: var(--pos); }
.pc-money .mleg > span > i.loss { background: var(--neg); }
.pc-money .mleg > span > b { margin-left: auto; color: var(--ink); font-weight: 750; font-variant-numeric: tabular-nums; }
.pc-money .mleg > span > b.posi { color: var(--posi); }
.pc-money .mleg > span > b.negi { color: var(--negi); }
.pc-money .mleg > span > small { font-size: 12px; color: var(--faint); font-variant-numeric: tabular-nums; }
.pc-money.wait { align-items: flex-start; gap: 3px; }
.pc-money.wait .ttl { font-size: 11px; font-weight: 750; letter-spacing: .02em; text-transform: uppercase; color: var(--faint); }
.pc-money.wait p { margin: 0; font-size: 12.5px; color: var(--dim); line-height: 1.5; }
.pc-known { display: flex; align-items: center; gap: 10px; margin-top: 12px; flex-wrap: wrap; }
.pc-known .bar { height: 4px; flex: 1 1 120px; }
.pc-known .bar > i.grow { transform-origin: left; animation: sfGrow .8s var(--ez) .3s both; }
.pc-known small { flex: none; font-size: 12px; color: var(--faint); font-variant-numeric: tabular-nums; white-space: nowrap; }
.pc-known small b { color: var(--ink); font-weight: 750; }
.app-body .pc-known .btn.round { min-height: 0; height: auto; padding: 3px 9px; border: 1px solid var(--ln); border-radius: 999px; background: var(--pn2); color: var(--acci); font-size: 12px; font-weight: 750; box-shadow: none; }
.app-body .pc-known .btn.round:hover { border-color: var(--acc); background: var(--accw); color: var(--acci); transform: none; }
.need-card { display: flex; flex-direction: column; }
.need-card .card-h { padding: 0; border: 0; margin-bottom: 10px; flex-wrap: nowrap; }
.need-card .card-h .end.hint { margin-left: auto; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; min-width: 0; }
.need-list { display: grid; gap: 1px; flex: 1; min-width: 0; align-content: start; }
.need-row { display: flex; align-items: center; gap: 10px; width: 100%; min-width: 0; padding: 8px; border-radius: 9px; max-height: 60px; overflow: hidden; transition: background .14s var(--ez); animation: sfPop .22s var(--ez) both; }
.need-row:hover { background: var(--pn2); }
.need-row.leaving { animation: sfOut .28s var(--ez) both; }
.need-row .ip { position: relative; overflow: visible; }
.need-row .ip kbd { position: absolute; right: -5px; bottom: -5px; width: 16px; height: 16px; display: grid; place-items: center; border-radius: 5px; background: var(--pn); border: 1px solid var(--ln2); color: var(--dim); font-family: inherit; font-size: 12px; font-weight: 800; line-height: 1; }
.need-tx { flex: 1; min-width: 0; padding: 0; border: 0; background: transparent; text-align: left; font: inherit; color: inherit; cursor: pointer; }
.need-tx b { display: block; font-size: 13px; font-weight: 650; color: var(--ink); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.need-tx small { display: block; font-size: 12px; color: var(--faint); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.need-row .acts { flex: none; gap: 4px; }
.need-row .acts .ibtn { width: 26px; height: 26px; border: 0; border-radius: 7px; background: transparent; color: var(--faint); opacity: .75; }
.need-row .acts .ibtn:hover { background: var(--pn3); color: var(--ink); opacity: 1; }
.need-row .acts .btn.sm { height: 28px; min-height: 28px; padding: 0 11px; }
.need-row .acts .btn.ghost { border-color: var(--ln2); background: var(--pn); color: var(--acci); font-size: 12.5px; font-weight: 750; border-radius: 8px; }
.need-row .acts .btn.soft { border-color: var(--acc); background: var(--accw); color: var(--acci); font-size: 12.5px; font-weight: 750; border-radius: 8px; }
.need-row .acts .btn:hover { background: var(--acc); border-color: var(--acc); color: #fff; box-shadow: none; transform: none; }
.need-card .empty { flex: 1; padding: 18px; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 6px; }
.need-card .empty .ip { margin: 0; }
.need-card .empty b { font-size: 13.5px; margin: 0; }
.need-card .empty small { font-size: 12.5px; }
.app-body .need-card .empty .btn { margin-top: 4px; min-height: 0; height: auto; padding: 5px 11px; border: 1px solid var(--ln); border-radius: 8px; background: var(--pn2); color: var(--dim); font-size: 12px; font-weight: 700; box-shadow: none; }
.app-body .need-card .empty .btn:hover { border-color: var(--ln2); color: var(--ink); transform: none; }
.need-card .unknown { margin: 8px 0 0; line-height: 1.5; }
.auto-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 12px; margin-bottom: 12px; }
.auto-grid .stat .top > svg { margin-left: auto; flex: none; color: var(--faint); }
/* Seven-day bars under an automation tile: the last seven days, oldest
   first, today brightest. The number above is the chosen window; the bars
   say whether it ran this week. */
.stat .spark7 { display: flex; align-items: flex-end; gap: 3px; height: 20px; margin-top: 9px; }
.stat .spark7 > i { flex: 1; min-height: 2px; height: 0; border-radius: 3px 3px 1px 1px; background: var(--acc); opacity: .2; transform-origin: bottom; animation: sfGrowY .5s var(--ez) both; transition: height .4s var(--ez); }
.stat .spark7 > i.on { opacity: .55; }
.stat .spark7 > i.now { opacity: .95; }
.stat .spark7.none > i { opacity: .14; }
.stat .spark7.warn > i { background: var(--warn); }
.stat .spark7.ok > i { background: var(--pos); }
.stat .spark7.mut > i { background: var(--dim); }
.top-card { overflow: hidden; }
.top-card .card-h .tag { height: 22px; padding: 0 8px; font-weight: 700; background: var(--pn2); border: 1px solid var(--ln); }
.top-card .share { display: inline-flex; align-items: center; gap: 7px; font-size: 12px; color: var(--dim); font-variant-numeric: tabular-nums; white-space: nowrap; }
.top-card .share .bar { width: 56px; height: 5px; flex: none; }
.top-card .share .bar > i { background: var(--pos); }
.top-card .share b { color: var(--ink); font-weight: 750; }
.top-list { padding: 6px 10px 10px; }
.top-list .rowbtn .bar.w120 { width: 120px; flex: none; }
.top-list .rowbtn .bar > i { background: var(--pos); }
.top-list .rowbtn .money { flex: none; width: 76px; text-align: right; font-size: 13.5px; font-weight: 750; font-variant-numeric: tabular-nums; }
.top-list .rowbtn .move { flex: none; display: inline-flex; align-items: center; gap: 2px; width: 40px; justify-content: flex-end; font-size: 12px; font-weight: 750; font-variant-numeric: tabular-nums; }
.top-list .rowbtn .move .arrow { display: inline-grid; }
.top-list .rowbtn .move .arrow.down { transform: rotate(180deg); }
.top-list .rowbtn .rowtxt { flex: 1; --tw: none; }
.top-list .rowbtn .rowtxt .m { display: block; }
.app-body .top-card .card-h .btn.ghost { min-height: 0; height: auto; padding: 5px 11px; border: 1px solid var(--ln); border-radius: 8px; background: var(--pn2); color: var(--ink2); font-size: 12.5px; font-weight: 700; box-shadow: none; }
.app-body .top-card .card-h .btn.ghost:hover { border-color: var(--acc); color: var(--acci); background: var(--pn2); transform: none; }
.top-more { padding: 0 18px 14px; }
.app-body .top-more .btn { display: flex; justify-content: center; gap: 6px; width: 100%; min-height: 0; height: auto; padding: 9px 14px; border: 1px solid var(--ln); border-radius: 9px; background: var(--pn2); color: var(--ink2); font-size: 12px; font-weight: 700; box-shadow: none; }
.app-body .top-more .btn:hover { border-color: var(--acc); color: var(--acci); background: var(--pn2); transform: none; }
.top-card .empty { padding: 30px 18px; }
.top-card .empty b { display: block; margin: 0 0 4px; }

/* ------------------------------ Tables ------------------------------------ */
.tblcard { overflow: visible; isolation: isolate; }
/* The selection pill on Products to list: the count the design puts inside the
   bulk button, and a quiet Clear pill rather than a link. */
.bulk .of { min-width: 0; height: auto; padding: 0; border-radius: 0; background: none; font-size: 12px; font-weight: 750; opacity: .72; font-variant-numeric: tabular-nums; }
.selpill .selclear { height: 28px; padding: 0 10px; border: 0; border-radius: 999px; background: transparent; color: var(--acci); font: inherit; font-size: 12.5px; font-weight: 750; cursor: pointer; white-space: nowrap; }
.selpill .selclear:hover { background: var(--pn); }
.tblcard .toolbar[hidden] { display: none; }
/* WRAPPING IS WHAT KEEPS THIS BAR HONEST. app.css clips what overflows the
   toolbar so the card's rounded top corners stay clean, and cancelling the
   wrap here meant the tail of the bar - Bulk link suppliers, Download sheet -
   was simply cut off below about 1280px, with nothing to scroll and nothing on
   screen to say anything was missing. The tools stay one unbroken group; the
   bar they sit in may take a second line. */
.tblcard .toolbar, .tblcard .toolbar .idle { flex-wrap: wrap; }
.tblcard .toolbar .tools { flex-wrap: nowrap; }
.tblcard .toolbar .search { flex: 1 1 150px; min-width: 120px; max-width: 260px; }
.app-body .toolbar .tools .btn { min-height: 32px; height: 32px; padding: 0 9px; border: 1px solid var(--ln2); border-radius: 9px; background: var(--pn2); color: var(--ink2); font-size: 12px; font-weight: 700; letter-spacing: -.005em; box-shadow: none; }
.app-body .toolbar .tools .btn:hover { border-color: var(--acc); color: var(--acci); background: var(--pn2); transform: none; box-shadow: none; }
.app-body .toolbar .tools .btn.primary { border: 0; background: var(--acc); color: #fff; font-weight: 750; }
.app-body .toolbar .tools .btn.primary:hover { background: var(--acc2); color: #fff; }
.tbl-wrap .tbl { min-width: 620px; }
.tbl td .rowtxt { --tw: 330px; }
#viewTable[data-tblview="tolist"] .tbl td .rowtxt { --tw: 440px; }
#viewTable[data-tblview="orders"] .tbl .tile.zoom { --tz: 2.6; }
.tbl td.editable { cursor: pointer; position: relative; transition: background .14s var(--ez); }
.tbl td.editable:hover { background: var(--accw); color: var(--acci); border-radius: 6px; }
.tbl .views { display: inline-flex; align-items: center; gap: 5px; height: 26px; padding: 0 7px; margin: -3px -7px -3px 0; border: 0; border-radius: 7px; background: transparent; color: var(--dim); font: inherit; font-size: 13px; font-variant-numeric: tabular-nums; cursor: pointer; text-decoration: underline dotted; text-decoration-color: var(--ln2); text-underline-offset: 3px; transition: background .14s var(--ez), color .14s var(--ez); }
.tbl .views:hover { background: var(--accw); color: var(--acci); text-decoration-color: var(--acc); }
.tbl .views svg { opacity: .75; }
.tbl .views.quiet { color: var(--faint); }
.tbl .views.quiet:hover { color: var(--acci); }
.sup-act { display: block; margin-top: 5px; }
.sup-act .btn.xs { height: 24px; min-height: 24px; padding: 0 8px; font-size: 12px; }
.tbl .acts .btn.sm { height: 27px; min-height: 27px; padding: 0 11px; border: 1px solid var(--ln); border-radius: 8px; background: var(--pn2); color: var(--ink2); font-size: 12.5px; font-weight: 700; }
.tbl .acts .btn.sm:hover { border-color: var(--acc); background: var(--accw); color: var(--acci); transform: none; box-shadow: none; }
.tbl .acts .btn.discard { color: var(--faint); background: transparent; }
.tbl .acts .btn.discard:hover { border-color: var(--neg); background: var(--negw); color: var(--negi); transform: none; box-shadow: none; }
/* Quick actions (September 2026): the two or three things a row is usually
   opened for, as icons that appear on hover or keyboard focus and run the
   row menu's own item by id. Hidden until the row is looked at, so a table
   of forty rows does not show a hundred and twenty buttons. */
.tbl .acts .qa { display: inline-flex; gap: 3px; margin-right: 2px; opacity: 0; transform: translateX(6px); transition: opacity .16s var(--ez), transform .16s var(--ez); }
.tbl tbody tr:hover .qa, .tbl tbody tr:focus-within .qa, .tbl tbody tr.picked .qa { opacity: 1; transform: none; }
@media (hover: none) { .tbl .acts .qa { opacity: 1; transform: none; } }
.qa-btn { position: relative; width: 27px; height: 27px; padding: 0; display: grid; place-items: center; border: 1px solid var(--ln); border-radius: 8px; background: var(--pn); color: var(--dim); cursor: pointer; transition: transform .14s var(--ez), border-color .14s var(--ez), background .14s var(--ez), color .14s var(--ez), box-shadow .14s var(--ez); }
.qa-btn::after { content: ""; position: absolute; inset: -3px; display: block; }
.qa-btn:hover { border-color: var(--acc); background: var(--accw); color: var(--acci); transform: translateY(-1px); box-shadow: var(--sh); }
.qa-btn:active, .qa-btn.hit { transform: scale(.9); }
.qa-btn:focus-visible { outline: 2px solid var(--acc); outline-offset: 1px; }
.qa-btn kbd { position: absolute; right: -5px; bottom: -5px; width: 14px; height: 14px; display: grid; place-items: center; border-radius: 4px; background: var(--pn); border: 1px solid var(--ln2); color: var(--dim); font-family: inherit; font-size: 10px; font-weight: 800; line-height: 1; opacity: 0; transition: opacity .16s var(--ez); pointer-events: none; }
.tbl tbody tr:hover .qa-btn kbd, .tbl tbody tr:focus-within .qa-btn kbd { opacity: .95; }
/* The same group on an Inbox row: at the row's end, shown when the row is
   looked at or open. */
.msg-row .qa { display: inline-flex; gap: 3px; align-self: center; flex: none; margin-left: 4px; opacity: 0; transform: translateX(6px); transition: opacity .16s var(--ez), transform .16s var(--ez); }
.msg-row:hover .qa, .msg-row:focus-within .qa, .msg-row.open .qa { opacity: 1; transform: none; }
.msg-row:hover .qa-btn kbd, .msg-row:focus-within .qa-btn kbd { opacity: .95; }
@media (hover: none) { .msg-row .qa { opacity: 1; transform: none; } }

/* Motion once, then quiet (September 2026): a view's entrances play when it
   is first drawn or switched to, never when data arrives (renderView sets
   .still on the view). A chip that changed under a press still pops. */
.view.still .rise, .view.still .pop-in, .view.still .need-row:not(.leaving), .view.still #spSvg .line, .view.still .bar > i.grow, .view.still .pc-money .mbar, .view.still .spark7 > i, .view.still .act-tiles .stat, .view.still .act-tiles .stat .top .dotc, .view.still .empty .ip.tick, .view.still .msg-row { animation: none; }
.rowtxt .vars-line { display: flex; align-items: center; gap: 6px 10px; flex-wrap: wrap; margin-top: 4px; }
.rowtxt .vars-line b { color: var(--ink); font-weight: 700; }
.rowtxt .vars-line .sku { color: var(--ink2); font-weight: 650; }
.rowtxt .vars-line .chip.promo { height: auto; padding: 1px 7px; font-weight: 750; }
.rowtxt .m .vars { display: inline; margin: 0; }
.rowtxt .m a svg { flex: none; }
.note-chip.edit { cursor: pointer; }
.note-chip.mut { color: var(--dim); background: var(--pn3); border-color: var(--ln); cursor: default; font-weight: 650; }
.note-chip.mut:hover { transform: none; box-shadow: none; }
.tbl-more { padding: 10px 16px; border-top: 1px solid var(--ln); font-size: 12px; color: var(--faint); text-align: center; }
.pr-range { white-space: nowrap; }
.pr-range .pr-to { font-size: 11px; font-weight: 600; color: var(--faint); margin: 0 4px; }
.tbl td.faint > .faint { color: var(--faint); }
.tbl td.qty { font-weight: 600; }
.tbl td.qty.negi, .tbl td.qty.warni { font-weight: 750; }
.tbl td.sold { color: var(--ink2); font-weight: 600; }
.tbl td.profit { font-weight: 700; }
.tbl td.adrate { font-size: 12.5px; font-weight: 700; }
.tbl td .tl-soon { font-weight: 700; }
.tbl tbody tr.empty-row, .tbl tbody tr.empty-row:hover { background: transparent; }
.tbl tbody tr.empty-row > td { padding: 0; border-bottom: 0; }

/* ------------------------------ Not selling ------------------------------- */
.diag-tiles { display: grid; grid-template-columns: repeat(auto-fit, minmax(210px, 1fr)); gap: 12px; margin-bottom: 12px; }
.diag-tiles .stat.static { cursor: pointer; }
.diag-tiles .stat.static:hover { border-color: var(--ln2); box-shadow: var(--sh2); transform: translateY(-2px); }
.diag-tiles .stat.static.on { box-shadow: 0 0 0 3px var(--accw); }
.diag-tiles .stat.static.on.tone-bad { box-shadow: 0 0 0 3px var(--negw); }
.diag-tiles .stat.static.on.tone-warn { box-shadow: 0 0 0 3px var(--warnw); }
.diag-tiles .stat .lbl { display: block; font-size: 12px; font-weight: 700; margin-bottom: 3px; overflow: visible; white-space: normal; }
.diag-tiles .stat .v { margin-top: 0; }
.diag-tiles .stat .note { color: var(--dim); margin-top: 3px; }
.diag-row { display: flex; align-items: center; gap: 14px; padding: 11px 8px; border-radius: 9px; transition: background .14s var(--ez); flex-wrap: nowrap; }
#diagPane .rowlist { padding: 6px 10px 12px; gap: 0; }
.diag-row:hover { background: var(--pn2); }
.diag-row .rowtxt { flex: 1 1 240px; min-width: 0; --tw: none; }
.diag-row .btn { flex: none; }
.diag-row .rate { flex: none; display: inline-flex; align-items: center; gap: 9px; }
.diag-row .rate .bar.w96 { width: 96px; flex: none; }
.diag-row .rate b { width: 48px; text-align: right; font-size: 13px; font-weight: 750; font-variant-numeric: tabular-nums; }
.traf-sugg { margin-top: 8px; display: grid; gap: 6px; }
.traf-opt { display: flex; align-items: center; gap: 10px; padding: 7px 10px; border: 1px solid var(--ln); border-radius: 9px; background: var(--pn2); font-size: 12.5px; }
.traf-opt > span { flex: 1; min-width: 0; }
.traf-opt small { color: var(--faint); margin-left: 6px; font-variant-numeric: tabular-nums; }
.diag-row .card-h .end { margin-left: auto; }

/* ------------------------------ Dialogs ----------------------------------- */
.dlg-labrow { display: flex; align-items: center; gap: 8px; margin-bottom: 7px; }
.dlg-labrow .dlg-lab { margin: 0; font-size: 12.5px; font-weight: 700; color: var(--dim); }
.dlg .in-wrap { position: relative; display: block; }
.dlg .in-wrap .unit { position: absolute; left: 14px; top: 50%; transform: translateY(-50%); font-size: 17px; font-weight: 750; color: var(--faint); pointer-events: none; }
.dlg .in-wrap.has-prefix .in.big { padding-left: 32px; font-size: 17px; }
.dlg .in.big { width: 100%; }
.dlg textarea.in { width: 100%; min-height: 96px; font-variant-numeric: tabular-nums; }
.dlg .lede { margin: 0 0 14px; }
/* The Add a product dialog's three steps as a strip (7 September 2026). */
.dlg-steps { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; margin: 0 0 16px; padding: 0; list-style: none; }
.dlg-steps li { display: grid; justify-items: center; gap: 7px; padding: 11px 8px 10px; border: 1px solid var(--ln); border-radius: 11px; background: var(--pn2); text-align: center; animation: sfPop .3s var(--ez) both; }
.dlg-steps li:nth-child(2) { animation-delay: .08s; }
.dlg-steps li:nth-child(3) { animation-delay: .16s; }
.dlg-steps li .ip { margin: 0; }
.dlg-steps li .tx { display: grid; gap: 2px; min-width: 0; }
.dlg-steps li b { font-size: 12.5px; font-weight: 750; color: var(--ink); }
.dlg-steps li small { font-size: 12px; color: var(--dim); line-height: 1.35; }
.dlg .foot-note .linkbtn { font-size: 12px; }
.dlg-foot .btn.wide { flex: 1; }
.bulk-results { display: grid; gap: 4px; margin-top: 10px; max-height: 220px; overflow-y: auto; }
.bulk-row { display: flex; gap: 10px; align-items: baseline; padding: 6px 10px; border-radius: 8px; background: var(--pn2); font-size: 12.5px; }
.bulk-row b { flex: none; font-variant-numeric: tabular-nums; }
.bulk-row span { min-width: 0; color: var(--dim); }
.bulk-row.ok { background: var(--posw); }
.bulk-row.ok span { color: var(--posi); }
.bulk-row.bad { background: var(--negw); }
.bulk-row.bad span { color: var(--negi); }
.bulk-row.mut span { color: var(--faint); }
#autoLinkNote { margin-bottom: 4px; align-items: center; }
#autoLinkNote .tx { flex: 1; min-width: 0; }
.dlg.traffic { max-width: 720px; padding: 0 0 4px; border-color: var(--glassbd); border-radius: 18px; }
.dlg.traffic .dlg-head { padding: 16px 18px 0; margin-bottom: 12px; }
.dlg.traffic .tfacts { display: flex; align-items: flex-end; gap: 26px; padding: 4px 18px 6px; flex-wrap: wrap; }
.dlg.traffic .tf { display: grid; gap: 3px; }
.dlg.traffic .tf small { font-size: 12px; font-weight: 750; color: var(--dim); }
.dlg.traffic .tf b { font-size: 16px; font-weight: 780; letter-spacing: -.02em; font-variant-numeric: tabular-nums; }
.dlg.traffic .tf:first-child b { font-size: 30px; letter-spacing: -.04em; line-height: 1; }
.dlg.traffic .tbars { display: grid; gap: 10px; padding: 12px 18px 4px; }
.dlg.traffic .tb { display: grid; grid-template-columns: 90px 1fr 70px; align-items: center; gap: 12px; font-size: 12.5px; }
.dlg.traffic .tb small { color: var(--dim); font-weight: 700; }
.dlg.traffic .tb b { text-align: right; font-variant-numeric: tabular-nums; }
.dlg.traffic .dlg-foot { padding: 0 18px 12px; align-items: center; }
.dlg.traffic .dlg-head .xbtn { width: 32px; height: 32px; border: 1px solid var(--ln); border-radius: 50%; background: var(--pn2); color: var(--dim); }
.dlg.traffic .dlg-head .xbtn:hover { border-color: var(--acc); color: var(--acci); background: var(--pn2); }
.app-body .dlg.traffic .dlg-foot .btn.ghost { min-height: 32px; height: 32px; padding: 0 12px; border: 1px solid var(--ln2); border-radius: 9px; background: var(--pn2); color: var(--ink2); font-size: 12.5px; font-weight: 700; }
.app-body .dlg.traffic .dlg-foot .btn.ghost:hover { border-color: var(--acc); color: var(--acci); background: var(--pn2); transform: none; }
.dlg.traffic .empty { padding: 30px 18px; }
.dlg.traffic .empty b { display: block; margin: 0 0 4px; }

/* The photo lightbox. */
.dlg.photo { cursor: default; }
.lb-stage { position: relative; aspect-ratio: 1; overflow: hidden; background: var(--pn3); }
.lb-strip { display: flex; height: 100%; transition: transform .42s var(--ez); }
.lb-frame { flex: none; width: 100%; height: 100%; position: relative; display: grid; place-items: center; }
.lb-frame img { width: 100%; height: 100%; object-fit: contain; display: block; }
.lb-frame small { position: absolute; right: 14px; bottom: 12px; padding: 3px 9px; border-radius: 999px; background: rgba(6, 12, 26, .55); color: #fff; font-size: 12px; font-weight: 700; }
.lb-counter { position: absolute; left: 14px; bottom: 12px; display: inline-flex; align-items: center; gap: 6px; padding: 4px 10px; border-radius: 999px; background: rgba(6, 12, 26, .55); color: #fff; font-size: 12px; font-weight: 700; font-variant-numeric: tabular-nums; animation: sfRise .3s var(--ez) .22s both; }
.lb-nav { position: absolute; top: 50%; transform: translateY(-50%); width: 36px; height: 36px; display: grid; place-items: center; border: 0; border-radius: 50%; background: rgba(6, 12, 26, .5); color: #fff; cursor: pointer; transition: background .14s var(--ez), transform .14s var(--ez); }
.lb-nav.prev { left: 12px; } .lb-nav.next { right: 12px; }
.lb-nav:hover { background: rgba(6, 12, 26, .75); transform: translateY(-50%) scale(1.06); }
.lb-x { position: absolute; top: 12px; right: 12px; width: 32px; height: 32px; display: grid; place-items: center; border: 0; border-radius: 50%; background: rgba(6, 12, 26, .55); color: #fff; cursor: pointer; }
.lb-x:hover { background: rgba(6, 12, 26, .75); }
.lb-thumbs { display: flex; gap: 6px; padding: 12px 16px 0; animation: sfRise .3s var(--ez) .14s both; }
.lb-thumbs button { flex: 1; height: 44px; padding: 0; border: 2px solid transparent; border-radius: 9px; overflow: hidden; background: var(--pn3); cursor: pointer; opacity: .55; transition: border-color .16s var(--ez), opacity .16s var(--ez), transform .16s var(--ez); }
.lb-thumbs button img { width: 100%; height: 100%; object-fit: cover; display: block; }
.lb-thumbs button[aria-pressed="true"] { border-color: var(--acc); opacity: 1; }
.lb-thumbs button:hover { opacity: 1; transform: translateY(-1px); }
.lb-foot { display: flex; align-items: center; gap: 12px; padding: 12px 16px 15px; animation: sfRise .3s var(--ez) .18s both; }
.lb-foot .tx { flex: 1; min-width: 0; display: grid; gap: 2px; }
.lb-foot .tx b { font-size: 13.5px; font-weight: 700; letter-spacing: -.01em; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.lb-foot .tx small { font-size: 12px; color: var(--faint); font-variant-numeric: tabular-nums; }

/* The Promoted listings dialog (older markup, redesign look). */
.ord-detail { position: fixed; inset: 0; z-index: 520; display: grid; place-items: center; padding: 24px; animation: sfFade .18s var(--ez) both; }
.ord-zoom-back { position: absolute; inset: 0; background: rgba(6, 12, 26, .46); backdrop-filter: blur(14px) saturate(160%); -webkit-backdrop-filter: blur(14px) saturate(160%); }
.odd-box { position: relative; width: min(486px, 100%); max-height: 90vh; overflow: auto; border: 1px solid var(--ln2); border-radius: 16px; background: var(--glass2); box-shadow: var(--sh2), inset 0 1px 0 var(--glasshi); padding: 22px 24px; animation: sfIn .2s var(--ez) both; }
.ord-zoom-x { position: absolute; top: 14px; right: 14px; width: 26px; height: 26px; display: grid; place-items: center; border: 0; border-radius: 8px; background: transparent; color: var(--faint); cursor: pointer; }
.ord-zoom-x:hover { background: var(--pn3); color: var(--ink); }
.odd-head { display: flex; align-items: center; gap: 12px; margin-bottom: 12px; padding-right: 30px; }
.odd-title b { font-size: 14.5px; font-weight: 780; letter-spacing: -.02em; }
.odd-sub { font-size: 12px; color: var(--dim); margin-top: 2px; }
.adx-body .dash-note { margin: 0 0 10px; }
.adx-chips { display: flex; flex-wrap: wrap; gap: 7px; margin: -4px 0 12px; }
.adx-chips .act-btn small { font-size: 11.5px; font-weight: 650; color: var(--dim); }
.adx-afford { padding: 11px 13px; border-radius: 10px; border: 1px solid color-mix(in srgb, var(--acc) 30%, transparent); background: var(--accw); margin: 0 0 12px; }
/* The heading is its own line; the percentages inside the sentence stay in
   the sentence (they broke onto lines of their own before September 2026). */
.adx-afford > b { display: block; font-size: 13px; font-weight: 780; color: var(--acci); }
.adx-afford p b { font-weight: 800; color: var(--acci); }
.adx-afford p { margin: 4px 0 8px; font-size: 12.5px; color: var(--ink2); line-height: 1.5; }
.adx-field { display: grid; gap: 6px; margin: 0 0 8px; font-size: 12.5px; font-weight: 700; color: var(--dim); }
.adx-suffix { position: relative; display: block; }
.adx-suffix input, .adx-field select { width: 100%; min-height: 40px; padding: 9px 12px; border: 1px solid var(--ln2); border-radius: 10px; background: var(--pn2); color: var(--ink); font: inherit; font-size: 15px; font-weight: 700; }
.adx-suffix i { position: absolute; right: 12px; top: 50%; transform: translateY(-50%); font-style: normal; color: var(--faint); font-weight: 750; }
.adx-bar { display: flex; align-items: center; gap: 8px; margin-top: 14px; flex-wrap: wrap; }
.adx-say { font-size: 12.5px; font-weight: 700; color: var(--dim); flex-basis: 100%; }
.adx-say.bad { color: var(--negi); } .adx-say.warn { color: var(--warni); }

/* The per-variant editor (SF.modal markup, redesign look). */
.vp-box { width: min(560px, 100%); }
.vp-listing { font-weight: 750; color: var(--ink); margin: 0 0 4px; }
.vp-head, .vp-row { display: grid; grid-template-columns: 1fr 120px 90px; gap: 8px; align-items: center; }
.vp-head { padding: 10px 0 6px; font-size: 12px; font-weight: 750; color: var(--faint); }
.vp-rows { max-height: 46vh; overflow-y: auto; display: grid; gap: 6px; }
.vp-row .vlab { font-size: 12.5px; font-weight: 650; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.vp-row input { min-height: 34px; padding: 6px 9px; border: 1px solid var(--ln2); border-radius: 8px; background: var(--pn2); color: var(--ink); font: inherit; font-size: 13px; font-variant-numeric: tabular-nums; }
.vp-row input:focus { outline: none; border-color: var(--acc); box-shadow: 0 0 0 3px var(--accw); }

/* ------------------------------ Inbox ------------------------------------- */
.view.inbox { display: flex; flex-direction: column; gap: 10px; height: calc(100dvh - 132px); min-height: 560px; min-width: 0; }
.view.inbox[hidden] { display: none; }
.inbox-top { flex: none; display: flex; align-items: center; gap: 12px; padding: 8px 12px 8px 10px; border: 1px solid var(--ln); border-left: 3px solid var(--pos); border-radius: 12px; background: var(--pn); box-shadow: var(--sh); min-width: 0; flex-wrap: wrap; }
.inbox-top.warn { border-left-color: var(--warn); }
.inbox-top.bad { border-left-color: var(--neg); }
.inbox-top .pills.sm { gap: 5px; }
.inbox-top .vsep { height: 26px; }
.inbox-top .clock { flex: none; display: flex; align-items: baseline; gap: 5px; }
.inbox-top .clock b { font-size: 20px; font-weight: 800; letter-spacing: -.035em; line-height: 1; font-variant-numeric: tabular-nums; }
.inbox-top .clock b.oki { color: var(--posi); } .inbox-top .clock b.warni { color: var(--warni); } .inbox-top .clock b.badi { color: var(--negi); }
.inbox-top .clock span { font-size: 12px; font-weight: 750; color: var(--faint); }
.clock-track { flex: 1 1 120px; min-width: 100px; display: flex; align-items: center; gap: 10px; }
.clock-track .track { position: relative; display: block; flex: 1; height: 5px; border-radius: 99px; background: var(--pn3); }
.clock-track .wash { position: absolute; inset: 0; border-radius: 99px; background: linear-gradient(90deg, var(--posw), var(--warnw) 62%, var(--negw)); }
.clock-track .mid { position: absolute; left: 50%; top: -3px; width: 1px; height: 11px; background: var(--ln2); }
.clock-track .edge { position: absolute; right: 0; top: -3px; width: 2px; height: 11px; border-radius: 1px; background: var(--neg); opacity: .7; }
.clock-track .dotm { position: absolute; top: -3px; width: 11px; height: 11px; margin-left: -5px; border-radius: 50%; border: 2px solid var(--pn); box-shadow: 0 1px 3px rgba(0, 0, 0, .2); background: var(--pos); transition: left .4s var(--ez); }
.clock-track .dotm.warn { background: var(--warn); } .clock-track .dotm.bad { background: var(--neg); }
.inbox-top .chip.ok { height: 26px; padding: 0 9px; gap: 6px; }
.inbox-top .chip.ok b { font-variant-numeric: tabular-nums; }
.inbox-grid { flex: 1; min-height: 0; display: grid; grid-template-columns: minmax(290px, 330px) minmax(0, 1fr); gap: 10px; min-width: 0; }
.msg-pane, .read-pane { display: flex; flex-direction: column; min-height: 0; min-width: 0; border-radius: 13px; overflow: hidden; }
.msg-tools { flex: none; display: flex; align-items: center; gap: 9px; padding: 10px 12px; border-bottom: 1px solid var(--ln); }
.msg-tools .search { flex: 1; min-width: 0; }
.msg-tools .search .in { width: 100%; min-height: 32px; padding: 0 10px 0 28px; border-radius: 8px; font-size: 12.5px; }
.msg-tools .search > .ic { left: 9px; }
.msg-tools .count { flex: none; font-size: 12px; color: var(--faint); font-variant-numeric: tabular-nums; white-space: nowrap; }
.ckbtn { flex: none; width: 28px; height: 28px; display: grid; place-items: center; border: 1px solid var(--ln2); border-radius: 8px; background: var(--pn); cursor: pointer; padding: 0; }
.ckbtn:hover { border-color: var(--acc); }
.ckbtn i { width: 15px; height: 15px; border-radius: 4px; border: 1.5px solid var(--acc); background: transparent; display: grid; place-items: center; color: #fff; font-style: normal; }
.ckbtn.on i, .ckbtn.mixed i { background: var(--acc); }
.ckbtn.mixed i::before { content: ""; width: 8px; height: 2px; background: #fff; border-radius: 1px; }
.ckbtn.sm { width: 15px; height: 15px; border: 0; margin-top: 11px; background: transparent; }
.ckbtn.sm i { border-color: var(--ln2); }
.ckbtn.sm.on i { border-color: var(--acc); }
.msg-bulk { flex: none; display: flex; align-items: center; gap: 8px; padding: 8px 12px; border-bottom: 1px solid var(--ln); background: var(--accw); }
.msg-bulk b { font-size: 12.5px; font-weight: 750; color: var(--acci); }
.msg-bulk .ckbtn.wide { width: auto; height: 28px; display: inline-flex; align-items: center; gap: 8px; padding: 0 9px 0 6px; border-color: var(--acc); border-radius: 8px; background: var(--pn); color: var(--acci); font: inherit; font-size: 12.5px; font-weight: 750; }
.msg-bulk .ckbtn.wide i { width: 16px; height: 16px; border-radius: 5px; }
.msg-list { flex: 1; min-height: 0; overflow-y: auto; }
.msg-row { display: flex; gap: 9px; padding: 10px 12px 10px 9px; border-left: 3px solid transparent; border-bottom: 1px solid var(--ln); background: transparent; transition: background .16s var(--ez), border-color .16s var(--ez); cursor: pointer; }
.msg-row:hover { background: var(--pn2); }
.msg-row.open { background: var(--row-picked); }
.msg-row:focus-visible { outline: 2px solid var(--acc); outline-offset: -2px; }
.msg-row .avwrap { position: relative; flex: none; width: 36px; height: 36px; margin-top: 1px; }
.msg-row .av { display: grid; place-items: center; width: 36px; height: 36px; border-radius: 9px; background: var(--tb, var(--pn3)); color: var(--tf, var(--ink2)); font-size: 12px; font-weight: 800; font-style: normal; letter-spacing: .02em; overflow: hidden; }
.msg-row .av.ebay { background: var(--pn3); color: var(--ink2); }
.msg-row .av.img img { width: 100%; height: 100%; object-fit: cover; display: block; }
.msg-row .st { position: absolute; right: -2px; bottom: -2px; width: 10px; height: 10px; border-radius: 50%; border: 2px solid var(--pn); background: var(--pos); }
.msg-row .st.warn { background: var(--warn); } .msg-row .st.bad { background: var(--neg); }
.msg-row .body { flex: 1; min-width: 0; }
.msg-row .l1 { display: flex; align-items: baseline; gap: 7px; min-width: 0; }
.msg-row .l1 b { flex: 1; min-width: 0; font-size: 13px; font-weight: 650; color: var(--ink); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.msg-row .l1 b.strong { font-weight: 780; }
.msg-row .l1 small { flex: none; font-size: 12px; font-weight: 750; font-variant-numeric: tabular-nums; white-space: nowrap; }
.msg-row .l1 small.oki { color: var(--posi); } .msg-row .l1 small.warni { color: var(--warni); } .msg-row .l1 small.badi { color: var(--negi); }
.msg-row .l2 { display: block; font-size: 12.5px; color: var(--ink2); line-height: 1.4; margin: 2px 0 3px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.msg-row .l2.dim { color: var(--dim); }
.msg-row .l3 { display: flex; align-items: center; gap: 5px; font-size: 12px; color: var(--dim); min-width: 0; }
.msg-row .l3 .ref { min-width: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; font-variant-numeric: tabular-nums; }
.msg-foot { flex: none; display: flex; align-items: center; gap: 10px; padding: 7px 12px; border-top: 1px solid var(--ln); background: var(--pn2); font-size: 12px; color: var(--faint); white-space: nowrap; overflow: hidden; }
.msg-foot span { display: inline-flex; align-items: center; gap: 4px; }
.msg-foot kbd { font-family: inherit; padding: 0 5px; border: 1px solid var(--ln2); border-radius: 5px; background: var(--pn); font-size: 12px; font-weight: 700; color: var(--dim); }
.read-pane .empty { flex: 1; display: flex; flex-direction: column; align-items: center; justify-content: center; }
.read-head { flex: none; display: flex; align-items: center; gap: 11px; padding: 11px 16px; border-bottom: 1px solid var(--ln); min-width: 0; }
.read-head > .tile { border: 1px solid var(--ln); font-size: 13px; }
.read-head .tile.ebay { background: var(--pn3); color: var(--ink2); border: 1px solid var(--ln); font-size: 13px; }
.read-head .tx { flex: 1; min-width: 0; }
.read-head .l1 { display: flex; align-items: center; gap: 8px; min-width: 0; }
.read-head .l1 b { font-size: 14.5px; font-weight: 780; letter-spacing: -.018em; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.read-head .tx > small { display: block; margin-top: 2px; font-size: 12.5px; color: var(--faint); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.read-head .acts { flex: none; gap: 6px; }
.read-head .acts .btn.sm { height: 30px; min-height: 30px; padding: 0 10px; border-radius: 8px; font-size: 12px; }
.read-head .acts .btn.sm:not(.pos) { border-color: var(--ln); }
.read-head .nav { display: inline-flex; align-items: center; gap: 2px; margin-left: 4px; padding-left: 8px; border-left: 1px solid var(--ln); }
.read-head .nav .ibtn { width: 28px; height: 28px; border: 0; background: transparent; }
.read-head .nav .ibtn:disabled { opacity: .35; cursor: default; }
.read-head .nav small { font-size: 12px; color: var(--faint); font-variant-numeric: tabular-nums; white-space: nowrap; min-width: 38px; text-align: center; }
.order-strip { flex: none; display: flex; align-items: stretch; border-bottom: 1px solid var(--ln); background: var(--pn2); min-width: 0; }
.order-strip .prod { flex: 0 1 250px; min-width: 170px; display: flex; align-items: center; gap: 10px; padding: 9px 14px; border-right: 1px solid var(--ln); }
.order-strip .prod .tx { flex: 1; min-width: 0; }
.order-strip .prod b { display: block; font-size: 12px; font-weight: 700; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.order-strip .prod small { display: block; font-size: 12px; color: var(--faint); font-variant-numeric: tabular-nums; white-space: nowrap; }
.order-strip .facts { flex: 1; min-width: 0; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); background: transparent; gap: 0; }
.order-strip .facts > span { display: block; padding: 8px 12px; border-right: 1px solid var(--ln); min-width: 0; background: transparent; }
.order-strip .facts small { display: block; font-size: 12px; font-weight: 750; color: var(--faint); letter-spacing: .02em; white-space: nowrap; }
.order-strip .facts b { display: block; font-size: 12px; font-weight: 700; font-variant-numeric: tabular-nums; margin-top: 1px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.order-strip .why { flex: none; width: 34px; display: grid; place-items: center; border: 0; background: transparent; color: var(--faint); font: inherit; font-size: 12px; font-weight: 800; cursor: help; }
.thread { flex: 1; min-height: 0; overflow-y: auto; padding: 14px 18px; display: flex; flex-direction: column; gap: 10px; background: var(--pn); }
.thread .empty.sm { padding: 24px; }
.ebay-banner { display: flex; align-items: center; gap: 10px; padding: 9px 12px; border: 1px solid color-mix(in srgb, var(--acc) 30%, transparent); border-radius: 10px; background: var(--accw); color: var(--acci); font-size: 12.5px; font-weight: 650; line-height: 1.45; animation: sfPop .24s var(--ez) both; }
.ebay-banner svg { flex: none; }
.notice-card { max-width: 660px; border: 1px solid var(--ln); border-radius: 14px; background: var(--pn2); overflow: hidden; }
.notice-card .nh { display: flex; align-items: center; gap: 10px; padding: 12px 14px; border-bottom: 1px solid var(--ln); }
.notice-card .kind { flex: none; padding: 3px 9px; border-radius: 999px; font-size: 12px; font-weight: 800; letter-spacing: .05em; text-transform: uppercase; white-space: nowrap; background: var(--pn3); color: var(--dim); }
.notice-card .kind.warn { background: var(--warnw); color: var(--warni); }
.notice-card .kind.neg { background: var(--negw); color: var(--negi); }
.notice-card .kind.ok { background: var(--posw); color: var(--posi); }
.notice-card .nh b { flex: 1; min-width: 0; font-size: 14px; font-weight: 780; letter-spacing: -.012em; }
.notice-card .nh small { flex: none; font-size: 12px; color: var(--faint); white-space: nowrap; }
.notice-card .nfacts { display: grid; grid-template-columns: repeat(auto-fit, minmax(140px, 1fr)); gap: 1px; background: var(--ln); border-bottom: 1px solid var(--ln); }
.notice-card .nfacts > span { display: block; padding: 10px 14px; background: var(--pn2); min-width: 0; }
.notice-card .nfacts small { display: block; font-size: 12px; font-weight: 750; color: var(--faint); letter-spacing: .02em; }
.notice-card .nfacts 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; }
.notice-card .nbody { margin: 0; padding: 12px 14px; border-bottom: 1px solid var(--ln); font-size: 13.5px; line-height: 1.55; color: var(--ink); max-height: 360px; overflow-y: auto; }
.notice-card .nbody p { margin: 0 0 9px; overflow-wrap: anywhere; }
.notice-card .nbody p:last-child { margin-bottom: 0; }
.notice-card .nbody p b { display: block; font-size: 12px; font-weight: 750; letter-spacing: .03em; color: var(--faint); margin-bottom: 2px; }
.notice-card .nbody.dim { color: var(--dim); }
.notice-card .nauto { display: flex; align-items: flex-start; gap: 9px; padding: 11px 14px; background: var(--pn); color: var(--dim); font-size: 12.5px; line-height: 1.5; }
.notice-card .nauto svg { flex: none; margin-top: 2px; color: var(--acc); }
.notice-card .nacts { display: flex; align-items: center; gap: 8px; padding: 0 14px 14px; background: var(--pn); flex-wrap: wrap; }
.notice-card .nacts .btn { height: 34px; min-height: 34px; padding: 0 13px; font-weight: 750; }
.notice-card .nacts .btn:not(.primary) { background: var(--pn); color: var(--ink2); border-color: var(--ln2); }
.notice-card .nresolved { display: flex; align-items: center; gap: 9px; margin: 0 14px 14px; padding: 10px 12px; border-radius: 10px; background: var(--posw); color: var(--posi); font-size: 12.5px; font-weight: 700; }
.bubble { display: flex; flex-direction: column; max-width: 76%; align-self: flex-start; align-items: flex-start; animation: sfPop .28s var(--ez) both; }
.bubble.mine { align-self: flex-end; align-items: flex-end; }
.bubble .bx { display: block; padding: 9px 13px; border: 1px solid var(--ln2); border-radius: 14px 14px 14px 5px; background: var(--pn2); }
.bubble.mine .bx { border-color: var(--acc); border-radius: 14px 14px 5px 14px; background: var(--accw); box-shadow: inset -3px 0 0 var(--acc); }
.bubble p { margin: 0; font-size: 13px; color: var(--ink); line-height: 1.55; white-space: pre-line; overflow-wrap: anywhere; }
.bubble small { font-size: 12px; color: var(--faint); margin: 3px 4px 0; }
.read-note { flex: none; display: flex; align-items: center; gap: 12px; padding: 12px 16px; border-top: 1px solid var(--ln); background: var(--pn2); font-size: 12.5px; color: var(--dim); line-height: 1.5; }
.read-note svg { flex: none; color: var(--faint); }
.read-note a { color: var(--acci); font-weight: 700; }
.composer { flex: none; padding: 10px 14px 12px; border-top: 1px solid var(--ln); background: var(--pn2); }
.sr-row { display: flex; align-items: flex-start; gap: 8px; margin-bottom: 8px; min-width: 0; }
.sr-row .search.xs { flex: none; width: 126px; }
.sr-row .search.xs .in { min-height: 28px; height: 28px; padding: 0 9px 0 26px; font-size: 12px; border-radius: 999px; width: 100%; }
.sr-chips { flex: 1; min-width: 0; display: flex; align-items: center; gap: 6px; flex-wrap: wrap; }
.sr-chip { flex: none; display: inline-flex; align-items: stretch; height: 28px; border: 1px solid var(--ln); border-radius: 999px; background: var(--pn); overflow: hidden; transition: border-color .14s var(--ez), transform .14s var(--ez); }
.sr-chip:hover { border-color: var(--acc); transform: translateY(-1px); }
.sr-chip button { display: inline-flex; align-items: center; height: 100%; padding: 0 10px; border: 0; background: transparent; color: var(--ink2); font: inherit; font-size: 12px; font-weight: 650; line-height: 1; cursor: pointer; white-space: nowrap; }
.sr-chip button:hover { color: var(--acci); }
.sr-chip button.ic { width: 26px; padding: 0; justify-content: center; border-left: 1px solid var(--ln); color: var(--faint); }
.sr-chip button.ic:hover { color: var(--acci); }
.sr-chip button.ic[data-srdel] { width: 24px; }
.sr-chip button.ic[data-srdel]:hover { color: var(--negi); }
.sr-row .btn.xs.dash { padding: 0 11px; border-radius: 999px; color: var(--acci); font-size: 12px; }
.sr-row .btn.xs.dash:hover { border-color: var(--acc); background: var(--accw); color: var(--acci); }
.sr-name { display: inline-flex; align-items: center; gap: 6px; height: 28px; padding: 0 4px 0 10px; border: 1px solid var(--acc); border-radius: 999px; background: var(--accw); }
.sr-name input { width: 150px; height: 22px; padding: 0; border: 0; background: transparent; color: var(--ink); font: inherit; font-size: 12px; font-weight: 650; outline: none; min-height: 0; }
.sr-name .btn.xs { height: 22px; min-height: 22px; padding: 0 9px; border-radius: 999px; font-size: 12px; }
.sr-name .xbtn { width: 22px; height: 22px; border-radius: 50%; }
.composer .box { position: relative; }
.composer .msg-box { width: 100%; min-height: 118px; padding: 11px 13px 26px; border: 1px solid var(--ln2); border-radius: 10px; background: var(--pn); color: var(--ink); font: inherit; font-size: 13.5px; line-height: 1.55; resize: vertical; transition: border-color .14s var(--ez), box-shadow .14s var(--ez); }
.composer .msg-box:focus { border-color: var(--acc); box-shadow: 0 0 0 3px var(--accw); outline: none; }
.composer .chars { position: absolute; right: 12px; bottom: 10px; font-size: 12px; font-weight: 750; color: var(--faint); font-variant-numeric: tabular-nums; pointer-events: none; }
.composer .chars.warni { color: var(--warni); }
.composer .chars.negi { color: var(--negi); }
.composer .off-ebay { display: block; margin-top: 8px; padding: 8px 11px; border-radius: 9px; background: var(--warnw); color: var(--warni); font-size: 12px; font-weight: 650; line-height: 1.5; }
.composer .off-ebay[hidden] { display: none; }
.composer .att { display: flex; align-items: center; gap: 8px; margin-top: 8px; }
.composer .att .ph { position: relative; display: inline-flex; width: 64px; height: 64px; border-radius: 9px; overflow: hidden; border: 1px solid var(--ln2); background: var(--pn3); background-size: cover; background-position: center; }
.composer .att .ph button { position: absolute; top: 3px; right: 3px; width: 18px; height: 18px; display: grid; place-items: center; border: 0; border-radius: 50%; background: rgba(6, 12, 26, .6); color: #fff; cursor: pointer; padding: 0; }
.composer .att small { font-size: 12px; color: var(--faint); }
.send-row { display: flex; align-items: center; gap: 8px; margin-top: 8px; min-width: 0; flex-wrap: wrap; }
.send-row .btn.primary { box-shadow: 0 4px 12px rgba(23, 104, 242, .22); font-weight: 750; }
.send-row .btn.icon { width: 40px; border-color: var(--ln2); background: var(--pn); }
.send-row .btn.soft { border-color: var(--ln2); padding: 0 12px; }
.send-row .hint { min-width: 0; font-size: 12px; color: var(--faint); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.send-row .btn.primary kbd { font-family: inherit; padding: 0 5px; border-radius: 5px; background: rgba(255, 255, 255, .18); font-size: 12px; font-weight: 700; }
.send-row .btn.primary.armed { background: var(--acc2); box-shadow: 0 0 0 3px var(--accw); }
.send-row .btn.ai { position: relative; overflow: hidden; border-color: var(--ln2); background: var(--pn); color: var(--ink2); }
.send-row .btn.ai.busy { background: linear-gradient(100deg, var(--pn) 30%, var(--accw) 50%, var(--pn) 70%); background-size: 200% 100%; animation: sfAiShimmer 1.4s linear infinite; color: var(--acci); border-color: var(--acc); }
.send-row .btn.ai.busy svg { animation: sfAiSpin 1.6s var(--ez) infinite; }
.send-row .btn.ai .dots { display: inline-flex; gap: 3px; align-items: center; }
.send-row .btn.ai .dots i { width: 4px; height: 4px; border-radius: 50%; background: currentColor; animation: sfAiDots 1s var(--ez) infinite; }
.send-row .btn.ai .dots i:nth-child(2) { animation-delay: .15s; } .send-row .btn.ai .dots i:nth-child(3) { animation-delay: .3s; }
.composer .unconf { display: flex; align-items: flex-start; gap: 11px; margin-top: 10px; padding: 10px 12px; border: 1px solid var(--warn); border-radius: 11px; background: var(--warnw); }
.composer .unconf svg { flex: none; margin-top: 2px; color: var(--warni); }
.composer .unconf span { flex: 1; min-width: 0; font-size: 12.5px; color: var(--warni); font-weight: 650; line-height: 1.5; }

/* ------------------------------ Activity ---------------------------------- */
.act-tiles { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 10px; margin-bottom: 12px; }
.act-tiles .stat { padding: 12px 14px 11px; animation: sfRise .3s var(--ez) both; }
.act-tiles .stat:nth-child(2) { animation-delay: .05s; }
.act-tiles .stat:nth-child(3) { animation-delay: .1s; }
.act-tiles .stat:nth-child(4) { animation-delay: .15s; }
.act-tiles .stat .top { margin-bottom: 8px; gap: 7px; }
.act-tiles .stat .top .dotc { margin-left: auto; color: var(--acc); animation: sfPop .2s var(--ez) both; }
.act-tiles .stat .lbl { font-size: 12px; }
.act-tiles .stat .v { line-height: 1; letter-spacing: -.035em; }
.act-tiles .stat .note { font-size: 12px; margin-top: 8px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.act-card, .queue-card { overflow: hidden; }
.act-card .card-h { padding: 12px 16px; gap: 10px; }
.act-card .card-h h2 { margin-bottom: 2px; }
.act-card .card-h .tx { flex: 1 1 200px; min-width: 0; }
.act-card .card-h .tx .sub { display: block; font-size: 12px; }
.act-card .card-h .pills { flex: none; gap: 5px; }
.act-card .card-h .search.xs { flex: none; width: 160px; }
.act-card .card-h .search.xs .in { min-height: 28px; height: 28px; padding: 0 10px 0 26px; font-size: 12px; border-radius: 999px; width: 100%; }
.act-log { padding: 2px 0 6px; }
.app-body .act-card .empty .btn { min-height: 0; height: auto; padding: 6px 13px; border: 1px solid var(--ln2); border-radius: 8px; background: var(--pn2); color: var(--ink); font-size: 12.5px; font-weight: 700; box-shadow: none; margin-top: 6px; }
.app-body .act-card .empty .btn:hover { border-color: var(--acc); color: var(--acci); transform: none; }
.grp-h { display: flex; align-items: center; gap: 10px; padding: 10px 18px 4px; font-size: 12px; color: var(--faint); font-variant-numeric: tabular-nums; }
.grp-h span:first-child { font-weight: 800; letter-spacing: .06em; white-space: nowrap; }
.grp-h i { flex: 1; height: 1px; background: var(--ln); }
.act-row { position: relative; display: flex; align-items: center; gap: 12px; padding: 9px 18px 9px 16px; transition: background .14s var(--ez); }
.act-row:hover { background: var(--pn2); }
.act-row .rail-line { position: absolute; left: 66px; top: 0; bottom: 0; width: 1px; background: var(--ln); }
.act-row .when { flex: none; width: 40px; font-size: 12px; color: var(--faint); font-variant-numeric: tabular-nums; text-align: right; }
.act-row .ip { position: relative; z-index: 1; border: 2px solid var(--pn); }
.act-row .tx { flex: 1; min-width: 0; display: grid; gap: 1px; }
.act-row .tx b { font-size: 12.5px; font-weight: 700; color: var(--ink); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.act-row .tx span { font-size: 12px; color: var(--dim); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.act-row .det { flex: none; display: inline-flex; align-items: center; gap: 6px; font-size: 12px; color: var(--dim); font-variant-numeric: tabular-nums; white-space: nowrap; max-width: 40%; }
.act-row .det .pr { display: inline-flex; align-items: center; gap: 5px; }
.act-row .det .pr s { color: var(--faint); text-decoration-color: var(--faint); }
.act-row .det .pr b { font-weight: 750; }
.act-row .det .pr svg { color: var(--faint); }
.act-row .det .tag { font-weight: 650; padding: 2px 8px; max-width: 100%; overflow: hidden; text-overflow: ellipsis; display: inline-block; }
.act-row .det .tag.plain { background: transparent; color: var(--dim); }
.act-row .btn.xs { height: 26px; min-height: 26px; padding: 0 10px; font-size: 12px; border-radius: 7px; }
.act-row .btn.xs:not(.quiet) { background: var(--pn); color: var(--acci); }
.act-row .btn.xs:not(.quiet):hover { border-color: var(--acc); background: var(--accw); color: var(--acci); }
.act-row .btn:hover { transform: none; box-shadow: none; }
.act-row .btn.quiet { border-color: transparent; background: transparent; color: var(--dim); }
.act-card .card-foot .dotc, .queue-card .card-foot .dotc { width: 7px; height: 7px; }
.act-card .card-foot .tx { flex: 1; min-width: 0; }
.act-card .card-foot small { font-variant-numeric: tabular-nums; white-space: nowrap; }
.app-body .card-foot .btn .spin { display: grid; place-items: center; }
.dotc.pulse { animation: sfPulse 2.6s var(--ez) infinite; }
.dotc.pos { color: var(--pos); background: var(--pos); } .dotc.warn { color: var(--warn); background: var(--warn); } .dotc.acc { background: var(--acc); }
.queue-card .card-h { align-items: flex-start; flex-wrap: nowrap; gap: 14px; }
.queue-card .card-h h2 { margin-bottom: 3px; }
.queue-card .card-h .tx { flex: 1 1 200px; min-width: 0; }
.queue-card .card-h .tx .sub { display: block; max-width: 76ch; }
.queue-card .card-h .chip { flex: none; margin-left: auto; height: 30px; gap: 7px; padding: 0 11px; align-self: flex-start; border: 1px solid color-mix(in srgb, var(--pos) 40%, transparent); }
.queue-card .card-h .chip.ok::before { width: 7px; height: 7px; background: var(--pos); opacity: 1; animation: sfPulse 2.6s var(--ez) infinite; }
.queue-card .card-h .chip.warn { border-color: var(--warn); }
.queue-card .card-h .chip.mut { border-color: var(--ln); }
.q-list { padding: 4px 0; }
.q-row { display: flex; align-items: center; gap: 13px; padding: 12px 18px; border-bottom: 1px solid var(--ln); transition: background .14s var(--ez); }
.q-row:hover { background: var(--pn2); }
.q-row .tx { flex: 1; min-width: 0; }
.q-row .tx b { display: block; font-size: 13px; font-weight: 700; }
.q-row .tx small { display: block; font-size: 12px; color: var(--faint); margin-top: 1px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.q-row .exp { display: flex; align-items: center; gap: 8px; margin-top: 7px; max-width: 320px; }
.q-row .exp small { flex: none; margin: 0; font-variant-numeric: tabular-nums; white-space: nowrap; }
.q-row .when { flex: none; font-size: 12px; color: var(--dim); white-space: nowrap; font-variant-numeric: tabular-nums; }
.q-row .chip { flex: none; }
.q-row .btn.row { color: var(--ink2); }
.q-row .btn.row:hover { border-color: var(--neg); background: var(--negw); color: var(--negi); }
.queue-card .card-foot { border-top: 0; padding: 12px 18px; }
.queue-card .card-foot .tx { flex: 1; min-width: 0; font-size: 12.5px; font-weight: 650; }
.queue-card .card-foot .btn.xs { padding: 0 10px; background: var(--pn); font-size: 12px; }
.queue-card .card-foot .btn.xs[data-infopop] { color: var(--acci); }
.queue-card .card-foot .btn.xs:hover { border-color: var(--acc); background: var(--accw); color: var(--acci); box-shadow: none; transform: none; }

/* ------------------------------ Narrow screens ---------------------------- */
/* The tool is built for a desk. Below 1100px the tables scroll inside their
   card and the inbox stacks; nothing is hidden.

   AND THE SIDEWAYS SCROLL COSTS SOMETHING, WHICH IS THE RIGHT PRICE. Giving
   .tbl-wrap an overflow-x makes it a SCROLLPORT, and two things answer to the
   nearest scrollport rather than to the window: the sticky header, which stops
   sticking, and the hover photo preview, which scales out of its row and is
   clipped. An audit called that a bug and asked for the scroll to start lower.
   It was tried and MEASURED: at a 1000px window the Inventory card is 742px
   and the table still wants more than that, so taking the scroll away there
   does not restore the header, it cuts columns off the right-hand edge. There
   is no arrangement where a horizontally scrolling box holds a header that
   sticks to the window - whatever scrolls the table owns its sticky. Content
   you can reach beats a header that follows you, so the scroll stays, and the
   check below holds it to the part that matters: nothing is ever cut off. */
@media (max-width: 1100px) {
  .tbl-wrap { overflow-x: auto; }
  .inbox-grid { grid-template-columns: 1fr; }
  .view.inbox { height: auto; }
  .msg-list { max-height: 360px; }
  .act-tiles { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .order-strip { flex-wrap: wrap; }
  .order-strip .prod { flex-basis: 100%; border-right: 0; border-bottom: 1px solid var(--ln); }
}

/* Search boxes carry their glyph in a span, so the page never inlines SVG
   outside a template string. */
.search > .ic { position: absolute; left: 10px; display: grid; place-items: center; pointer-events: none; color: var(--faint); z-index: 1; }
.search.round > .ic { left: 13px; }
.search.xs > .ic { left: 9px; }
.app-body .need-more { display: flex; justify-content: center; gap: 6px; width: 100%; margin: 6px 0 0; min-height: 0; height: auto; padding: 7px 12px; border: 1px solid var(--ln); border-radius: 9px; background: var(--pn2); color: var(--ink2); font-size: 12px; font-weight: 700; box-shadow: none; }
.app-body .need-more:hover { border-color: var(--acc); color: var(--acci); background: var(--pn2); transform: none; box-shadow: none; }

/* The profit figure while no order in the period carries a cost. */
.pc-main .big.unknown { font-size: 22px; letter-spacing: -.02em; color: var(--dim); font-weight: 750; }

/* ====================== the supplier order review ==========================
   The dialog that says what is about to be bought. Wide because the point of
   it is the table: the eBay order, what sold, what gets bought at the
   supplier and what it costs, side by side, so the four can be read against
   each other in one look. Every rule is scoped under .dlg.sup - the orders
   table already owns .sup and .sup-act, and two meanings of one class name in
   one stylesheet is how a row ends up wearing a dialog's padding.
   ========================================================================= */
.dlg.sup { max-width: 940px; padding: 0; overflow: hidden; border-radius: 18px; border-color: var(--glassbd); }
.dlg.sup .sup-h { display: flex; align-items: flex-start; gap: 12px; padding: 18px 20px 14px; border-bottom: 1px solid var(--ln); }
.dlg.sup .sup-h .ic { display: grid; place-items: center; width: 30px; height: 30px; flex: none; border-radius: 9px; background: var(--accw); color: var(--acci); }
.dlg.sup .sup-h .tx { flex: 1; min-width: 0; }
.dlg.sup .sup-h b { display: block; font-size: 15px; font-weight: 800; letter-spacing: -.02em; }
.dlg.sup .sup-h small { display: block; margin-top: 3px; font-size: 12.5px; color: var(--dim); line-height: 1.45; }
.dlg.sup .dlg-x { width: 30px; height: 30px; flex: none; display: grid; place-items: center; border: 1px solid var(--ln); border-radius: 9px; background: var(--pn2); color: var(--dim); cursor: pointer; }
.dlg.sup .dlg-x:hover { border-color: var(--ln2); color: var(--ink); }

.dlg.sup .sup-band { display: flex; align-items: flex-start; gap: 9px; margin: 14px 20px 0; padding: 10px 12px; border: 1px solid var(--ln); border-radius: 12px; background: var(--pn2); color: var(--ink2); font-size: 12.5px; line-height: 1.5; }
.dlg.sup .sup-band svg { flex: none; margin-top: 1px; color: var(--acci); }
.dlg.sup .sup-band.warn { border-color: var(--warn); background: var(--warnw); color: var(--warni); }
.dlg.sup .sup-band.warn svg { color: var(--warni); }
.dlg.sup .sup-band b { font-weight: 750; }

.dlg.sup .sup-wait { display: flex; align-items: center; justify-content: center; gap: 10px; padding: 54px 20px; color: var(--dim); font-size: 13px; font-weight: 650; }
.dlg.sup .sup-wait svg { color: var(--acci); animation: sfSpin 1.4s linear infinite; }

.dlg.sup .sup-list { max-height: 46vh; overflow: auto; margin: 12px 8px 0; }
.dlg.sup .sup-row { display: grid; grid-template-columns: 28px 150px minmax(0, 1fr) 250px 104px; gap: 12px; padding: 11px 12px; border-bottom: 1px solid var(--ln); align-items: start; }
.dlg.sup .sup-row:last-child { border-bottom: 0; }
.dlg.sup .sup-row.off { background: var(--warnw); border-radius: 10px; border-bottom-color: transparent; }
.dlg.sup .sup-tick { display: grid; place-items: center; width: 18px; height: 18px; margin-top: 1px; border: 1.6px solid var(--ln2); border-radius: 5px; background: var(--pn); color: #fff; }
.dlg.sup .sup-row:not(.off) .sup-tick { border-color: transparent; background: var(--acc); }
.dlg.sup .sup-ord b { display: block; font-size: 12.5px; font-weight: 800; font-variant-numeric: tabular-nums; }
.dlg.sup .sup-ord small,
.dlg.sup .sup-item small,
.dlg.sup .sup-ae small,
.dlg.sup .sup-cost small { display: block; margin-top: 2px; font-size: 11.5px; color: var(--faint); line-height: 1.45; }
.dlg.sup .sup-item b { display: block; font-size: 12.5px; font-weight: 700; line-height: 1.35; }
.dlg.sup .sup-v { display: inline-flex; align-items: center; height: 17px; padding: 0 6px; margin: 3px 4px 0 0; border-radius: 5px; background: var(--pn3); color: var(--ink2); font-size: 11px; font-weight: 700; }
.dlg.sup .sup-item .qty { color: var(--acci); font-weight: 700; }
.dlg.sup .sup-ae b { display: block; font-size: 12.5px; font-weight: 700; color: var(--ink2); line-height: 1.35; }
.dlg.sup .sup-ae.blocked b { color: var(--warni); font-weight: 650; }
.dlg.sup .sup-pick { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 7px; }
.dlg.sup .sup-cost { text-align: right; font-variant-numeric: tabular-nums; }
.dlg.sup .sup-cost b { font-size: 13px; font-weight: 800; }
.dlg.sup .sup-cost b.unk { font-size: 12px; font-weight: 700; color: var(--faint); }
.dlg.sup .sup-cost .keep { color: var(--posi); font-weight: 700; }
.dlg.sup .sup-cost .lose { color: var(--negi); font-weight: 700; }

.dlg.sup .sup-foot { display: flex; align-items: center; gap: 12px; padding: 14px 20px; border-top: 1px solid var(--ln); background: var(--pn2); }
.dlg.sup .sup-foot .tx { flex: 1; min-width: 0; }
.dlg.sup .sup-foot .tx b { display: block; font-size: 13px; font-weight: 800; }
.dlg.sup .sup-foot .tx small { display: block; margin-top: 1px; font-size: 12px; color: var(--dim); }

.dlg.sup .sup-fail { display: grid; justify-items: center; gap: 12px; padding: 34px 20px; text-align: center; color: var(--negi); }
.dlg.sup .sup-fail p { margin: 0; max-width: 460px; font-size: 13px; line-height: 1.5; color: var(--ink2); }
.dlg.sup .sup-done { display: grid; justify-items: center; padding: 30px 20px 24px; text-align: center; }
.dlg.sup .sup-done .seal { display: grid; place-items: center; width: 52px; height: 52px; border-radius: 16px; background: var(--posw); color: var(--posi); margin-bottom: 14px; }
.dlg.sup .sup-done p { margin: 0; max-width: 520px; font-size: 12.5px; color: var(--dim); line-height: 1.5; }
.dlg.sup .sup-pairs { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; width: 100%; max-width: 560px; margin-top: 16px; }
.dlg.sup .sup-pairs .pair { display: flex; align-items: center; gap: 9px; padding: 9px 11px; border: 1px solid var(--ln); border-radius: 10px; background: var(--pn2); text-align: left; }
.dlg.sup .sup-pairs .pair b { font-size: 12.5px; font-weight: 800; font-variant-numeric: tabular-nums; }
.dlg.sup .sup-pairs .pair i { font-style: normal; font-size: 12.5px; font-weight: 700; font-variant-numeric: tabular-nums; color: var(--dim); }
.dlg.sup .sup-pairs .pair svg { color: var(--faint); }
.dlg.sup .sup-bad { display: grid; gap: 5px; width: 100%; max-width: 560px; margin-top: 12px; text-align: left; font-size: 12px; color: var(--negi); line-height: 1.45; }
/* The address AliExpress refused, under the refusal that named no value. */
.dlg.sup .sup-bad small { display: block; margin-top: 2px; font-size: 11.5px; color: var(--dim); font-variant-numeric: tabular-nums; }
/* An order whose outcome is UNKNOWN, which is not the same as one refused: it
   may exist at AliExpress. Warn rather than negative, because the seller's
   next move is to look rather than to fix. */
.dlg.sup .sup-bad .unsure { color: var(--warni); font-weight: 700; }
/* What fixes a held-back row, under what is wrong with it. The server has
   always sent this; nothing drew it until now. */
.dlg.sup .sup-ae.blocked .sup-fix { display: block; margin-top: 3px; font-size: 11.5px; color: var(--dim); }
/* THE PAY BUTTON HAS TO STAY REACHABLE. The dialog clips what overflows it, and
   this pane grows with the batch: ten pairs and a few refusals put the foot,
   and the one link that settles the bill, past the bottom edge with nothing to
   scroll. The pane scrolls instead, so the foot is always the last thing. */
.dlg.sup .sup-done { max-height: min(56vh, 520px); overflow: auto; overscroll-behavior: contain; }

/* The chip on an order row, beside the notes. */
.rowtxt .sup-state { display: block; margin-top: 4px; }