/* Pouncio - an operations console you can read at a glance.

   Light by default: this is watched in daylight, next to a Vinted tab, and the
   numbers have to read like a ledger. Dark is a real second theme, not a dim
   filter - the dark panels in the design (the night report, the sign-in art)
   keep their own palette in both themes, because they are ink, not surface. */

:root {
  --bg: #fafcf9; --bg-glow: rgba(188, 210, 176, .18);
  --surface: #ffffff; --surface-2: #f5f8f5; --surface-3: #edf2ee;
  --line: #dbe4dc; --line-soft: #e6ede8; --line-faint: #eff3f0;
  --ink: #152018; --ink-2: #3b4b40; --muted: #687869; --faint: #8a978e;
  --accent: #8fae86; --accent-ink: #4a6b45; --accent-bg: #edf2e8; --accent-lit: #bcd2b0;
  --accent-glow: #d8e5cf; --accent-text: #1e2f1f;
  --second: #f3e27a; --second-ink: #7a6300; --second-bg: #fdf8d2;
  --good: #4f7d4a; --good-bg: #e6f0e2;
  --warn: #8a6d00; --warn-bg: #fdf8d2; --warn-line: #f1e59c;
  --bad: #c8453d; --bad-bg: #fbecea; --bad-line: #f2cdc8;
  --offer: #7a6300; --offer-bg: #fdf8d2;

  /* Ink panels keep their own scale so a dark card looks the same in both themes. */
  --night: #182420; --night-2: #1c2a25; --night-card: #24332d; --night-line: #354640;
  --night-ink: #ffffff; --night-ink-2: #b4c3ba; --night-muted: #7d8e83;

  --display: "Bricolage Grotesque", ui-sans-serif, system-ui, sans-serif;
  --sans: "Instrument Sans", ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  --mono: "JetBrains Mono", ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;

  --radius: 14px; --radius-sm: 10px; --radius-xs: 8px;
  --shadow: 0 1px 2px rgba(21, 32, 24, .04), 0 8px 24px -16px rgba(21, 32, 24, .18);
  --shadow-flat: 0 1px 2px rgba(21, 32, 24, .04);
  --shadow-pop: 0 24px 64px rgba(21, 32, 24, .25);
  --accent-shadow: 0 6px 16px -8px rgba(143, 174, 134, .7);
  --sidebar: 240px;
}

:root[data-theme="dark"] {
  --bg: #121917; --bg-glow: rgba(188, 210, 176, .10);
  --surface: #19221f; --surface-2: #202b27; --surface-3: #26332e;
  --line: #354640; --line-soft: #28362f; --line-faint: #24302b;
  --ink: #eaf2ec; --ink-2: #b4c3ba; --muted: #7d8e83; --faint: #617768;
  --accent: #a3bf99; --accent-ink: #c6d9bd; --accent-bg: #26352a; --accent-lit: #bcd2b0;
  --accent-glow: #d8e5cf; --accent-text: #1e2f1f;
  --second: #f3e27a; --second-ink: #f0dd7a; --second-bg: #3a3413;
  --good: #8fbf86; --good-bg: #1e3022;
  --warn: #e8c94a; --warn-bg: #2f2a12; --warn-line: #4a4220;
  --bad: #f2695f; --bad-bg: #331a18; --bad-line: #4d2a27;
  --offer: #f0dd7a; --offer-bg: #3a3413;
  --shadow: 0 1px 2px rgba(0, 0, 0, .3), 0 8px 24px -16px rgba(0, 0, 0, .6);
  --shadow-flat: 0 1px 2px rgba(0, 0, 0, .3);
  --shadow-pop: 0 24px 64px rgba(0, 0, 0, .55);
}

* { box-sizing: border-box; }
/* A class that sets `display` beats the hidden attribute's UA rule, which would
   otherwise leave the boot card sitting on top of the app. */
[hidden] { display: none !important; }
html, body { height: 100%; }
body {
  margin: 0; color: var(--ink);
  background: radial-gradient(900px 400px at 100% 0%, var(--bg-glow), transparent 60%), var(--bg);
  font-family: var(--sans); font-size: 14px; line-height: 1.5;
  -webkit-font-smoothing: antialiased;
}
h1, h2, h3 { font-family: var(--display); letter-spacing: -0.02em; margin: 0; }
a { color: var(--accent-ink); text-decoration: none; }
::selection { background: var(--accent-lit); color: var(--accent-text); }
a:hover { text-decoration: underline; }
/* `color: inherit` matters: a button is a real element in several places here
   (feed rows, the price-index card, stock rows), and without this its text
   falls back to the user agent's dark default and vanishes in dark mode. */
button { font: inherit; color: inherit; cursor: pointer; }
input, select, textarea {
  font: inherit; color: var(--ink); background: var(--surface);
  border: 1px solid var(--line); border-radius: var(--radius-xs); padding: 8px 10px; width: 100%;
}
input:focus, select:focus, textarea:focus { outline: 2px solid var(--accent); outline-offset: -1px; }
:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.mono, .num { font-family: var(--mono); font-variant-numeric: tabular-nums; }
.muted { color: var(--muted); }
.small { font-size: 12px; }
.grow { flex: 1; min-width: 0; }
.right { margin-left: auto; }

@keyframes pulse { 0%, 100% { box-shadow: 0 0 0 0 rgba(143, 174, 134, .45); } 70% { box-shadow: 0 0 0 6px rgba(143, 174, 134, 0); } }
@keyframes kbell { 0% { transform: rotate(0); } 15% { transform: rotate(14deg); } 35% { transform: rotate(-11deg); } 55% { transform: rotate(7deg); } 75% { transform: rotate(-4deg); } 100% { transform: rotate(0); } }
@keyframes rise { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: none; } }
@keyframes entrar { from { opacity: 0; transform: translateX(16px); } to { opacity: 1; transform: none; } }
@keyframes slidein { from { opacity: 0; transform: translateY(-8px); } to { opacity: 1; transform: none; } }

/* ---------- boot, sign-in ---------- */
.boot { min-height: 100vh; display: grid; place-items: center; padding: 24px; }
.boot-card {
  background: var(--surface); border: 1px solid var(--line-soft); border-radius: var(--radius);
  padding: 28px; width: min(380px, 100%); display: grid; gap: 12px; box-shadow: var(--shadow);
}
/* ---------- the mark (js/brand.js, brand/*.svg) ----------
   Body in currentColor, pupil in --pupil. The brief's rules: one colour on light
   surfaces; sage body and butter pupil on night and in the dark theme, the only
   place the eye lights up; the dark green --accent-text on a sage tile. */
.pmark { display: block; flex: none; overflow: visible; }
.pmark .pupil { fill: var(--pupil, currentColor); transform-box: fill-box; transform-origin: center; }
.pmark .iris { transition: transform .6s cubic-bezier(.22, 1, .36, 1); }
.pmark .pupil.focus { animation: focus .9s cubic-bezier(.22, 1, .36, 1); }
/* The slit narrows as it locks on, then opens a touch wider: the pounce. */
@keyframes focus { 0% { transform: none; } 35% { transform: scale(.32, 1.05); } 65% { transform: scale(1.2, 1); } 100% { transform: none; } }

.logo { font-weight: 700; display: flex; gap: 10px; align-items: center; font-family: var(--display); letter-spacing: -0.02em; }
.logo .pc-tile { width: 28px; height: 28px; border-radius: 9px; }
.logo span { font-size: 16px; }
/* On an ink panel the mark sits on the night itself, no tile, eye lit. */
.logo.night { color: var(--night-ink); }
.logo.night .pmark { color: var(--accent); --pupil: var(--second); }
.logo.night .word { font-size: 18px; }
/* While the session is checked the pupil scans (state="scan"): the loader is the logo. */

/* The split sign-in: ink on the left, the form on the right. */
.signin {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));
  background: var(--surface); border: 1px solid var(--line-soft); border-radius: 16px;
  overflow: hidden; min-height: 70vh; width: min(980px, 100%); box-shadow: var(--shadow);
}
.signin-art {
  background: radial-gradient(600px 400px at 80% 0%, rgba(188, 210, 176, .28), transparent 60%), var(--night);
  color: #fff; padding: 40px; display: grid; align-content: space-between; gap: 24px;
  position: relative; overflow: hidden;
}
/* The eye in the corner, cropped, watching the form. Behind the copy, never over it. */
.signin-art .watcher {
  position: absolute; right: -56px; bottom: -64px; pointer-events: none;
  color: var(--accent); --pupil: var(--second);
}
/* The ticker stops short of the eye; on a phone there is no room for both, so
   the eye steps back behind it instead. */
.signin-art .ticker { margin-right: 112px; }
.signin-art .ticker .mono { white-space: nowrap; }
@media (max-width: 560px) {
  .signin-art .ticker { margin-right: 0; }
  .signin-art .watcher { opacity: .3; }
}
/* The glow sits behind the pupil, not on it: a CSS filter on an SVG child is
   not something every browser draws. */
.signin-art .watcher::before {
  content: ""; position: absolute; left: 36%; top: 12%; width: 34%; height: 64%; border-radius: 50%;
  background: radial-gradient(closest-side, rgba(243, 226, 122, .28), transparent);
}
.signin-art .watcher .pmark { position: relative; }
.signin-art h1 { font-size: 34px; line-height: 1.05; letter-spacing: -0.03em; text-wrap: pretty; position: relative; }
.signin-art h1 em { color: var(--accent-glow); font-style: normal; }
.signin-art .lede { margin-top: 12px; color: rgba(255, 255, 255, .85); font-size: 15px; }
.signin-art .ticker { background: rgba(255, 255, 255, .12); border-radius: 12px; padding: 14px 16px; display: grid; gap: 8px; font-size: 13px; position: relative; }
.signin-art .ticker div { display: flex; justify-content: space-between; gap: 8px; }
.signin-form { padding: 40px; display: grid; align-content: center; gap: 16px; max-width: 420px; width: 100%; margin: 0 auto; }
.signin-form h2 { font-size: 22px; font-family: var(--sans); font-weight: 600; letter-spacing: -0.01em; }
/* "You are signing in as": the one fact the confirm step exists to show. */
.confirm-who { display: grid; gap: 2px; padding: 12px 14px; border: 1px solid var(--line);
  border-radius: var(--radius-sm); background: var(--surface-2); }
.confirm-who strong { font-size: 14px; word-break: break-all; }

/* ---------- shell ---------- */
#shell { display: grid; grid-template-columns: var(--sidebar) minmax(0, 1fr); min-height: 100vh; }
.sidebar {
  background: var(--surface); border-right: 1px solid var(--line-soft);
  display: flex; flex-direction: column; gap: 14px; padding: 14px 10px 10px;
  position: sticky; top: 0; height: 100vh; overflow: hidden; transition: padding .2s ease;
}
/* Only the links scroll. The head and the foot (the kill switch above all)
   stay on screen however short the window is. The scrollbar is hidden, so it
   cannot squeeze the icon rail; a soft shadow at either end says there is more. */
#nav {
  flex: 1 1 auto; min-height: 0; overflow-x: hidden; overflow-y: auto;
  margin: 0 -10px; padding: 2px 10px;
  scrollbar-width: none; overscroll-behavior: contain;
  background:
    linear-gradient(var(--surface) 30%, transparent) top / 100% 24px no-repeat local,
    linear-gradient(transparent, var(--surface) 70%) bottom / 100% 24px no-repeat local,
    radial-gradient(farthest-side at 50% 0, rgba(21, 32, 24, .12), transparent) top / 100% 8px no-repeat scroll,
    radial-gradient(farthest-side at 50% 100%, rgba(21, 32, 24, .12), transparent) bottom / 100% 8px no-repeat scroll;
}
#nav::-webkit-scrollbar { display: none; }
/* The sidebar's head: the mark on its sage tile (pouncio-mark.css) - an open,
   blinking eye while it watches, shut and grey when everything is paused - the
   wordmark at a size that holds the corner, and a status line that says which. Ruled off from the rail so the
   hook's dashed line starts under it, not against it. */
.brandhead {
  display: flex; align-items: center; gap: 11px; padding: 2px 6px 4px; color: var(--ink); flex: none;
}
.brandhead:hover { text-decoration: none; }
.brandhead .pc-tile { transition: background .2s, transform .25s cubic-bezier(.22, 1, .36, 1); }
.brandhead:hover .pc-tile { transform: translateY(-1px) rotate(-3deg); }
.brandhead .brandtext { display: grid; gap: 1px; min-width: 0; line-height: 1.1; }
.brandhead .word { font-family: var(--display); font-weight: 700; font-size: 19px; letter-spacing: -0.035em; }
.brandhead .status {
  display: flex; align-items: center; gap: 6px; font-size: 11px; color: var(--muted);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
/* Kill switch on: the banner under the head says so, with its own Resume. Folded
   away in the icon rail, where the grey tile and the red switch say it instead
   and the banner over the page takes over. */
#shell.collapsed .pc-paused-banner { display: none; }
@media (min-width: 821px) { #shell:not(.collapsed) .killbanner { display: none; } }
.sidebar-foot { margin-top: auto; display: grid; grid-template-columns: minmax(0, 1fr); gap: 6px; flex: none; }
/* minmax(0, 1fr), not the default auto: a long workspace name would otherwise
   widen the column past the sidebar and push the kill switch off its edge. */
.sidebar-foot > * { min-width: 0; }
/* The kill switch reads as state first (a quiet line while things run) and
   only turns loud once it has been thrown. */
.killcard {
  display: flex; align-items: center; justify-content: space-between; gap: 8px;
  border: 1px solid var(--line-soft); border-radius: var(--radius-sm); padding: 6px 6px 6px 10px;
  background: var(--surface-2); margin-bottom: 4px;
}
.killcard .state { display: flex; align-items: center; gap: 7px; font-size: 12px; font-weight: 600; color: var(--ink-2); min-width: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.killcard .state i { width: 7px; height: 7px; border-radius: 50%; background: var(--good); flex: none; animation: pulse 2s ease-in-out infinite; }
.killcard .kill {
  display: inline-flex; align-items: center; gap: 5px; width: auto; flex: none;
  padding: 4px 8px; font-size: 12px; border-radius: 7px; cursor: pointer;
  background: var(--surface); color: var(--bad); border: 1px solid var(--bad-line);
}
.killcard .kill:hover { background: var(--bad-bg); }
.killcard.stopped { background: var(--bad-bg); border-color: var(--bad-line); }
.killcard.stopped .state { color: var(--bad); }
.killcard.stopped .state i { background: var(--bad); animation: none; }
.killcard.stopped .kill { background: var(--bad); color: #fff; border-color: var(--bad); }
.whoami {
  display: flex; align-items: center; gap: 10px; padding: 8px 6px 4px; line-height: 1.3;
  border-top: 1px solid var(--line-soft); margin-top: 4px;
}
.whoami .avatar {
  width: 30px; height: 30px; border-radius: 9px; background: var(--accent-bg); color: var(--accent-ink);
  display: grid; place-items: center; font-weight: 700; font-size: 11.5px; flex: none; letter-spacing: .02em;
}
.whoami .name { font-size: 13px; font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.whoami .sub { font-size: 11px; color: var(--muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.whoami .signout, .railtoggle {
  flex: none; display: grid; place-items: center; background: none; border: 0; border-radius: 8px;
  width: 30px; height: 30px; padding: 0; color: var(--muted); cursor: pointer;
}
.whoami .signout { margin-left: auto; }
.whoami .signout:hover, .railtoggle:hover { color: var(--ink); background: var(--surface-3); }
.sidehead { display: flex; align-items: center; gap: 4px; flex: none; }
.sidehead .brandhead { flex: 1; min-width: 0; }

/* Collapsed: icons only. Labels, counts and prose fold away; a count becomes a dot. */
#shell { transition: grid-template-columns .2s ease; }
#shell.collapsed { --sidebar: 64px; }
#shell.collapsed .brandhead { padding-inline: 4px; }
#shell.collapsed .brandtext,
#shell.collapsed .rail-item .label,
#shell.collapsed .rail-item .count,
#shell.collapsed .whoami > div,
#shell.collapsed .killcard .state,
#shell.collapsed .killcard .kill .label { display: none; }
#shell.collapsed .rail-label { height: 1px; padding: 0; margin: 2px 10px 6px; background: var(--line-soft); font-size: 0; }
#shell.collapsed .rail-item { justify-content: center; padding-inline: 0; }
#shell.collapsed .rail-item[data-badge]:not([data-badge=""])::after {
  content: ""; position: absolute; top: 7px; right: 10px; width: 7px; height: 7px; border-radius: 50%;
  background: var(--second); box-shadow: 0 0 0 2px var(--surface);
}
#shell.collapsed .killcard { padding: 4px; justify-content: center; background: none; border-color: transparent; }
#shell.collapsed .killcard .kill { padding: 7px; }
#shell.collapsed .whoami { flex-direction: column; gap: 6px; padding-inline: 0; }
#shell.collapsed .whoami .signout { margin-left: 0; }
#shell.collapsed .sidehead { flex-direction: column; gap: 8px; }
#shell.collapsed .railtoggle svg { transform: scaleX(-1); }

/* Every strip above the page has its own row, and the page its own flexible one:
   auto-placement would hand the 1fr row to whichever banner happens to show. */
main { min-width: 0; display: grid; grid-template-rows: auto auto auto minmax(0, 1fr); }
main > .topbar { grid-row: 1; }
main > .killbanner { grid-row: 2; }
main > .acctbanner { grid-row: 3; }
main > #view { grid-row: 4; }
/* A fill view needs a definite height to divide, or its panes size to their
   content and the page scrolls for a screen and a half before the composer. */
main.fill { height: 100vh; overflow: hidden; }
.topbar {
  position: sticky; top: 0; z-index: 5; display: flex; align-items: center; gap: 16px;
  padding: 10px 24px; border-bottom: 1px solid var(--line-soft);
  background: color-mix(in srgb, var(--bg) 90%, transparent); backdrop-filter: blur(8px);
}
.crumb { font-weight: 600; font-size: 15px; white-space: nowrap; flex: none; }
.topbar-right { display: flex; align-items: center; gap: 12px; font-size: 12px; color: var(--ink-2); white-space: nowrap; flex: none; }
.searchbtn {
  display: flex; align-items: center; gap: 10px; background: var(--surface);
  border: 1px solid var(--line); border-radius: var(--radius-sm); padding: 8px 12px;
  color: var(--muted); text-align: left; flex: 1; min-width: 0; max-width: 560px;
  margin: 0 auto; box-shadow: var(--shadow-flat);
}
.searchbtn .label { flex: 1; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; }
.searchbtn:hover { border-color: var(--accent); }
kbd {
  font-family: var(--mono); font-size: 11px; background: var(--surface-3);
  border-radius: 6px; padding: 1px 6px; color: var(--ink-2);
}
.magnifier { width: 14px; height: 14px; border: 2px solid currentColor; border-radius: 50%; flex: none; position: relative; }
.magnifier::after { content: ""; position: absolute; right: -4px; bottom: -3px; width: 5px; height: 2px; background: currentColor; transform: rotate(45deg); }
.dot { width: 8px; height: 8px; border-radius: 50%; background: var(--muted); flex: none; }
.dot.live { background: var(--good); animation: pulse 2s infinite; }
.view { padding: 24px; display: grid; gap: 20px; align-content: start; }

.killbanner {
  background: var(--bad-bg); color: var(--bad); border-bottom: 1px solid var(--bad-line);
  padding: 10px 24px; font-size: 13px; font-weight: 600;
  display: flex; justify-content: space-between; gap: 12px; align-items: center;
}

/* An account Vinted no longer accepts: nothing it was meant to do gets done, so
   this stays on every page until the person reconnects it. */
.acctbanner {
  background: var(--bad-bg); color: var(--bad); border-bottom: 1px solid var(--bad-line);
  padding: 10px 24px; font-size: 13px; font-weight: 600;
  display: flex; justify-content: space-between; gap: 12px; align-items: center;
}
.acctbanner[hidden] { display: none; }
/* The card a notification pointed at: ringed for a moment, then quiet. */
.card.flash { animation: cardflash 2.4s ease-out 1; }
@keyframes cardflash {
  0%, 60% { box-shadow: 0 0 0 3px var(--bad-line); }
  100% { box-shadow: 0 0 0 0 transparent; }
}
.acctbanner a { color: inherit; text-decoration: underline; white-space: nowrap; }

/* ---------- the nav rail ---------- */
.rail { position: relative; display: grid; gap: 12px; }
.rail-group { display: grid; gap: 1px; }
.rail-label { font-size: 10.5px; color: var(--faint); text-transform: uppercase; letter-spacing: .09em; padding: 4px 10px 5px; font-weight: 600; white-space: nowrap; }
.rail-item {
  position: relative; z-index: 1; display: flex; align-items: center; gap: 10px;
  width: 100%; text-align: left; background: transparent; border: 0; cursor: pointer;
  padding: 7px 10px; border-radius: var(--radius-xs); font: inherit; font-size: 13.5px;
  font-weight: 500; color: var(--ink-2); transition: color .15s, background .15s; white-space: nowrap;
}
.rail-item .label { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; }
.rail-item .glyph-i { flex: none; color: var(--faint); transition: color .15s; }
.rail-item:hover { background: var(--surface-2); color: var(--ink); }
.rail-item:hover .glyph-i { color: var(--ink-2); }
.rail-item.on, .rail-item.on:hover { font-weight: 600; color: var(--ink); background: transparent; }
.rail-item.on .glyph-i { color: var(--accent-ink); }
.rail-item:focus-visible { outline: 2px solid var(--accent); outline-offset: -2px; }
/* Counts are things waiting on you: butter, like the brief's Offers badge. */
.rail-item .count {
  font-family: var(--mono); font-size: 11px; background: var(--second-bg); color: var(--second-ink);
  border-radius: 999px; padding: 1px 7px; flex: none;
}
/* The pill: one tinted block that slides to whatever is open. */
.rail-pill {
  position: absolute; left: 0; right: 0; top: 0; z-index: 0; pointer-events: none; opacity: 0;
  background: var(--accent-bg); border-radius: var(--radius-xs);
  box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--accent) 22%, transparent);
  transition: transform .35s cubic-bezier(.22, 1, .36, 1), height .35s cubic-bezier(.22, 1, .36, 1), opacity .2s;
}
.rail-pill::before {
  content: ""; position: absolute; left: -10px; top: 8px; bottom: 8px; width: 3px;
  border-radius: 0 3px 3px 0; background: var(--accent);
}

/* ---------- surfaces ---------- */
.card {
  background: var(--surface); border: 1px solid var(--line-soft); border-radius: var(--radius);
  box-shadow: var(--shadow); overflow: hidden; min-width: 0;
}
.card > header {
  display: flex; align-items: center; justify-content: space-between; gap: 12px;
  padding: 14px 18px; border-bottom: 1px solid var(--line-soft); flex-wrap: wrap;
}
.card > header h2 { font-size: 14px; font-weight: 600; font-family: var(--sans); letter-spacing: 0; }
.card > header .sub { font-size: 12px; color: var(--muted); font-weight: 400; }
.card > .body { padding: 16px 18px; display: grid; gap: 14px; }
.card.flat { box-shadow: var(--shadow-flat); }
.card.attention { border-color: var(--bad-line); }
.rows { display: grid; grid-template-columns: minmax(0, 1fr); }
.rows > * { border-bottom: 1px solid var(--line-faint); }
.rows > *:last-child { border-bottom: 0; }

/* An ink panel: same in both themes, because it is a graphic, not a surface. */
.panel {
  background: radial-gradient(500px 200px at 100% 0%, rgba(188, 210, 176, .22), transparent 60%), var(--night);
  color: var(--night-ink); border-radius: 16px; padding: 20px 24px; display: grid; gap: 16px;
  box-shadow: 0 30px 60px -30px rgba(21, 32, 24, .5);
}
.panel.plain { background: var(--night-2); border-radius: var(--radius); padding: 18px 20px; box-shadow: none; }
.panel h2 { font-size: 15px; font-weight: 700; letter-spacing: -0.01em; }
.panel .eyebrow { font-size: 12px; color: var(--night-ink-2); text-transform: uppercase; letter-spacing: .08em; font-weight: 600; }
.panel .eyebrow { display: flex; align-items: center; gap: 8px; }
.panel .headline { font-size: 19px; font-weight: 600; letter-spacing: -0.01em; margin-top: 2px; }
.panel .pulse { font-size: 11px; margin-top: 6px; color: var(--accent-glow); font-family: var(--mono); }
.panel .pulse::before { content: ""; display: inline-block; width: 6px; height: 6px; border-radius: 50%; background: var(--accent-lit); margin-right: 6px; vertical-align: middle; animation: pulsedot 1.6s ease-in-out infinite; }
.panel .pulse.bad { color: #f7a49d; }
.panel .pulse.bad::before { background: #f2695f; animation: none; }
@keyframes pulsedot { 0%, 100% { opacity: .35; } 50% { opacity: 1; } }
.panel .sub { font-size: 12px; color: var(--night-muted); margin-top: 2px; }
.panel a { color: var(--second); }
.panel .stat { background: var(--night-card); border: 1px solid var(--night-line); border-radius: var(--radius-sm); padding: 12px 14px; }
.panel .stat .label { font-size: 11px; color: var(--night-ink-2); }
.panel .stat .value { font-family: var(--display); font-weight: 700; font-size: 24px; letter-spacing: -0.03em; margin-top: 2px; color: var(--accent-glow); }
.panel .stat .sub { font-size: 11px; color: var(--night-muted); margin: 0; }
.panel .bullets { display: grid; gap: 8px; border-top: 1px solid var(--night-line); padding-top: 12px; }
.panel .bullets div { display: flex; gap: 9px; font-size: 12.5px; color: #e3ece6; align-items: flex-start; }
.panel .bullets div::before { content: ""; width: 5px; height: 5px; border-radius: 50%; background: var(--accent-glow); margin-top: 7px; flex: none; }

/* ---------- numbers ---------- */
.grid { display: grid; gap: 14px; }
.auto-fit { grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); }
.auto-fit.wide { grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); }
.auto-fit.narrow { grid-template-columns: repeat(auto-fit, minmax(120px, 1fr)); }
.kpi {
  background: var(--surface); border: 1px solid var(--line-soft); border-radius: var(--radius);
  box-shadow: var(--shadow); padding: 16px 18px; display: grid; gap: 6px;
}
.kpi .label { font-size: 12px; color: var(--muted); font-weight: 500; }
.kpi .value { font-family: var(--display); font-size: 30px; font-weight: 700; letter-spacing: -0.03em; line-height: 1.1; }
.kpi .sub { font-size: 12px; color: var(--ink-2); }
.kpi.sm .value { font-size: 24px; }
.kpi.good .value { color: var(--good); }
.kpi.warn .value { color: var(--warn); }
.tile { background: var(--surface-2); border-radius: var(--radius-xs); padding: 10px; }
.tile .label { font-size: 11px; color: var(--muted); }
.tile .value { font-family: var(--mono); font-size: 16px; }
.tile.good { background: var(--good-bg); }
.tile.good .label, .tile.good .value { color: var(--good); }
.minitiles { display: grid; grid-template-columns: repeat(4, 1fr); gap: 6px; text-align: center; }
.minitiles > div { background: var(--surface-2); border-radius: var(--radius-xs); padding: 8px 4px; }
.minitiles .n { font-family: var(--mono); font-size: 16px; }
.minitiles .k { font-size: 10px; color: var(--muted); text-transform: uppercase; letter-spacing: .05em; }

/* Digit wheels. The accessible value is the screen-reader copy; the wheels are decoration. */
.roll { display: inline-flex; align-items: center; position: relative; font-variant-numeric: tabular-nums; }
.roll .sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
.wheel {
  display: inline-grid; overflow: hidden; height: 1.15em; line-height: 1.15; position: relative;
  -webkit-mask-image: linear-gradient(to bottom, rgba(0, 0, 0, 0) 0%, rgba(0, 0, 0, .5) 11%, #000 22%, #000 78%, rgba(0, 0, 0, .5) 89%, rgba(0, 0, 0, 0) 100%);
  mask-image: linear-gradient(to bottom, rgba(0, 0, 0, 0) 0%, rgba(0, 0, 0, .5) 11%, #000 22%, #000 78%, rgba(0, 0, 0, .5) 89%, rgba(0, 0, 0, 0) 100%);
}
/* Named for what it is, and not `ghost`, which is the button class: a digit
   spacer that quietly inherited a button's padding made every number 26px wide. */
.wheel .spacer { visibility: hidden; padding: 0; border: 0; background: none; }
.wheel .strip { position: absolute; left: 0; right: 0; top: 0; transition: transform .9s cubic-bezier(.22, 1, .36, 1); }
.wheel .strip span { display: flex; justify-content: center; height: 1.15em; }
@media (prefers-reduced-motion: reduce) {
  .wheel .strip { transition: none; }
  .pmark .iris { transition: none; }
  .pmark .pupil, .pmark .pupil.focus { animation: none; }
  .rail-pill, #shell, .sidebar { transition: none; }
  .killcard .state i { animation: none; }
}

/* ---------- pills, chips, switches ---------- */
.pill {
  display: inline-flex; align-items: center; gap: 5px; font-family: var(--mono);
  font-size: 11px; padding: 2px 8px; border-radius: 999px; white-space: nowrap; font-weight: 500;
  background: var(--surface-3); color: var(--ink-2);
}
.pill.good { background: var(--good-bg); color: var(--good); }
.pill.warn { background: var(--warn-bg); color: var(--warn); }
.pill.bad { background: var(--bad-bg); color: var(--bad); }
.pill.buy { background: var(--accent-bg); color: var(--accent-ink); }
.pill.offer { background: var(--offer-bg); color: var(--offer); }
.chip {
  border-radius: 999px; padding: 5px 12px; font-size: 13px; font-weight: 500;
  border: 1px solid var(--line); background: var(--surface); color: var(--ink-2);
}
.chip.on { border-color: var(--ink); background: var(--ink); color: var(--bg); }
.chip.sm { padding: 2px 10px; font-size: 12px; }
.chip.sm.on { border-color: var(--accent); background: var(--accent-bg); color: var(--accent-ink); }
.tag { border-radius: 6px; padding: 2px 8px; font-size: 13px; font-weight: 500; background: var(--accent-bg); color: var(--accent-ink); }
.tag.no { background: var(--bad-bg); color: var(--bad); }
.tag.neutral { background: var(--surface-3); color: var(--ink-2); }
.tag button { background: none; border: 0; color: inherit; opacity: .6; padding: 0 0 0 4px; font-size: 11px; }
.tag button:hover { opacity: 1; }
.tagbox {
  display: flex; gap: 6px; flex-wrap: wrap; border: 1px solid var(--line);
  border-radius: var(--radius-xs); padding: 6px 8px; background: var(--surface); align-items: center;
}
.tagbox input { border: 0; padding: 2px 4px; width: auto; flex: 1; min-width: 100px; background: transparent; }
.tagbox input:focus { outline: 0; }

.switch { width: 34px; height: 20px; border-radius: 10px; position: relative; flex: none; cursor: pointer; background: var(--line); border: 0; padding: 0; }
.switch.on { background: var(--accent); }
.switch .knob { position: absolute; top: 2px; left: 2px; width: 16px; height: 16px; border-radius: 50%; background: #fff; transition: left .18s ease; }
.switch.on .knob { left: 16px; }
.switch.lg { width: 38px; height: 22px; border-radius: 11px; }
.switch.lg .knob { width: 18px; height: 18px; }
.switch.lg.on .knob { left: 18px; }
.switch.warn.on { background: var(--warn); }

/* ---------- buttons ---------- */
.primary {
  background: linear-gradient(135deg, var(--accent-glow), var(--accent-lit)); color: var(--accent-text); border: 0;
  border-radius: var(--radius-xs); box-shadow: var(--accent-shadow); padding: 9px 14px; font-weight: 600;
}
.primary:hover { filter: brightness(1.05); }
a.primary, a.ghost { display: inline-flex; align-items: center; text-decoration: none; }
.primary.sm { padding: 6px 12px; font-size: 13px; }
.ghost {
  background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius-xs);
  padding: 9px 12px; font-weight: 600; color: var(--ink);
}
.ghost:hover { border-color: var(--accent); }
.ghost.sm { padding: 5px 10px; font-size: 12px; }
.ghost.danger { color: var(--bad); }
.ghost.round { border-radius: 999px; padding: 3px 10px; font-size: 12px; font-weight: 500; }
.dashed { background: var(--surface); border: 1px dashed var(--line); border-radius: var(--radius-xs); padding: 7px; width: 100%; color: var(--ink-2); font-size: 13px; font-weight: 500; }
.kill { border-radius: var(--radius-xs); padding: 7px; font-weight: 600; font-size: 13px; width: 100%; background: var(--surface); color: var(--bad); border: 1px solid var(--bad-line); }
.kill.on { background: var(--bad); color: #fff; border-color: var(--bad); }
.linkbtn { background: none; border: 0; color: var(--accent-ink); font-size: 12px; font-weight: 500; padding: 0; }
.linkbtn:hover { text-decoration: underline; }
.bell {
  position: relative; width: 34px; height: 34px; border-radius: 50%; background: var(--surface);
  border: 1px solid var(--line-soft); display: grid; place-items: center; color: var(--muted); flex: none;
}
.bell { cursor: pointer; transition: border-color .15s, background .15s, color .15s; }
.bell:hover, .bell.open { color: var(--ink); border-color: var(--line); background: var(--surface-2); }
.bell svg { transform-origin: 50% 12%; }

/* ---------- the bell's notification panel (js/notifications.js) ----------
   What the toasts said, kept: newest first, grouped by day, a dot on what is
   unread. Anchored under the bell; a sheet across the top on a phone. */
#bellslot { position: relative; display: flex; }
.notif-pop {
  position: absolute; top: calc(100% + 10px); right: -8px; z-index: 60;
  width: 392px; max-height: min(620px, calc(100vh - 90px)); display: flex; flex-direction: column;
  background: var(--surface); border: 1px solid var(--line-soft); border-radius: 16px;
  box-shadow: var(--shadow-pop); overflow: hidden; outline: none; white-space: normal;
  opacity: 0; transform: translateY(-6px) scale(.98); transform-origin: calc(100% - 24px) 0;
  transition: opacity .16s ease, transform .2s cubic-bezier(.22, 1, .36, 1);
}
.notif-pop.in { opacity: 1; transform: none; }
/* the little notch pointing at the bell */
.notif-pop::before {
  content: ""; position: absolute; top: -6px; right: 20px; width: 11px; height: 11px; transform: rotate(45deg);
  background: var(--surface); border-left: 1px solid var(--line-soft); border-top: 1px solid var(--line-soft);
}
.notif-pop > header {
  display: flex; align-items: center; justify-content: space-between; gap: 12px;
  padding: 16px 18px 10px; position: relative;
}
.notif-head { display: grid; gap: 1px; }
.notif-head h3 { margin: 0; font-family: var(--display); font-size: 17px; font-weight: 700; letter-spacing: -0.02em; color: var(--ink); }
.notif-head .sub { font-size: 12px; color: var(--muted); }
/* Only the list gives way to max-height. The tab row scrolls sideways, which
   drops its automatic min-height to 0, so without this a long list squashed it
   and clipped the pills (worst on All, the longest list). */
.notif-pop > header, .notif-tabs, .notif-foot { flex-shrink: 0; }
.notif-tabs { display: flex; gap: 4px; padding: 0 14px 10px; border-bottom: 1px solid var(--line-soft); overflow-x: auto; scrollbar-width: none; }
.notif-tab {
  display: inline-flex; align-items: center; gap: 6px; border: 1px solid transparent; background: none;
  color: var(--muted); font: inherit; font-size: 12.5px; font-weight: 600; padding: 5px 10px;
  border-radius: 999px; cursor: pointer; white-space: nowrap;
}
.notif-tab:hover { color: var(--ink); background: var(--surface-2); }
.notif-tab.on { color: var(--accent-ink); background: var(--accent-bg); border-color: color-mix(in srgb, var(--accent) 30%, transparent); }
.notif-tab .n { font-family: var(--mono); font-size: 10.5px; font-weight: 500; color: var(--faint); }
.notif-tab.on .n { color: var(--accent-ink); }
.notif-body { overflow-y: auto; overscroll-behavior: contain; padding: 4px 8px 8px; flex: 1 1 auto; min-height: 0; }
.notif-day {
  position: sticky; top: 0; z-index: 1; padding: 10px 10px 6px; background: var(--surface);
  font-size: 10.5px; font-weight: 600; letter-spacing: .09em; text-transform: uppercase; color: var(--faint);
}
.ni {
  position: relative; display: grid; grid-template-columns: 36px minmax(0, 1fr) auto; gap: 12px; align-items: center;
  padding: 10px 10px 10px 12px; border-radius: 12px; color: var(--ink); text-decoration: none;
  transition: background .12s;
}
a.ni:hover { background: var(--surface-2); text-decoration: none; color: var(--ink); }
.ni.unread { background: color-mix(in srgb, var(--accent-bg) 55%, transparent); }
a.ni.unread:hover { background: var(--accent-bg); }
.ni.unread::before {
  content: ""; position: absolute; left: 3px; top: 50%; width: 5px; height: 5px; margin-top: -2.5px;
  border-radius: 50%; background: var(--accent-ink);
}
.ni-icon {
  width: 36px; height: 36px; border-radius: 10px; display: grid; place-items: center;
  background: var(--night); color: var(--accent); --pupil: var(--second);
}
.ni-icon[data-tone="offer"] { background: var(--second-bg); color: var(--second-ink); --pupil: var(--second-ink); box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--second) 60%, transparent); }
.ni-icon[data-tone="bad"] { background: var(--bad-bg); color: var(--bad); --pupil: var(--bad); box-shadow: inset 0 0 0 1px var(--bad-line); }
/* the eye of a failure is shut */
.ni-icon[data-tone="bad"] .pupil { transform: scale(2.4, .12); }
.ni-text { display: grid; gap: 2px; min-width: 0; }
.ni-title { font-size: 13.5px; font-weight: 600; line-height: 1.3; }
.ni.unread .ni-title { font-weight: 700; }
.ni-sub { font-size: 12px; color: var(--muted); line-height: 1.35; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.ni-meta { display: grid; justify-items: end; gap: 5px; align-self: start; padding-top: 1px; }
.ni-meta time { font-family: var(--mono); font-size: 11px; color: var(--faint); }
.ni-meta .pc-chip { margin-left: 0; font-size: 10.5px; padding: 1px 7px; }
.notif-empty { display: grid; justify-items: center; gap: 6px; text-align: center; padding: 34px 28px 30px; color: var(--muted); font-size: 12.5px; }
.notif-empty pouncio-mark { margin-bottom: 6px; }
.notif-empty strong { color: var(--ink); font-size: 14px; }
.notif-foot { display: grid; grid-template-columns: 1fr 1fr; border-top: 1px solid var(--line-soft); background: var(--surface-2); }
.notif-link {
  display: flex; align-items: center; justify-content: space-between; gap: 8px; padding: 12px 18px;
  background: none; border: 0; font: inherit; font-size: 13px; font-weight: 600; color: var(--ink); cursor: pointer; text-align: left;
}
.notif-link + .notif-link { border-left: 1px solid var(--line-soft); }
.notif-link:hover { background: var(--surface-3); }
.notif-link .n { font-family: var(--mono); font-size: 11px; font-weight: 500; color: var(--second-ink); background: var(--second-bg); border-radius: 999px; padding: 1px 7px; }
.notif-link .muted { font-size: 11.5px; font-weight: 500; }
.notif-link::after { content: "→"; color: var(--faint); font-weight: 500; }
.notif-link > span:last-of-type { margin-left: auto; }
html.notif-open .pc-toasts { opacity: 0; pointer-events: none; transition: opacity .15s; }
@media (max-width: 560px) {
  .notif-pop { position: fixed; top: 60px; left: 12px; right: 12px; width: auto; max-height: calc(100vh - 76px); }
  .notif-pop::before { display: none; }
}
@media (prefers-reduced-motion: reduce) { html:not(.pc-motion-full) .notif-pop { transition: opacity .12s; transform: none; } }
html.pc-motion-reduced .notif-pop { transition: opacity .12s; transform: none; }
.bell.ring svg { animation: kbell .9s cubic-bezier(.36, .07, .19, .97); }
.bell .badge {
  position: absolute; top: 2px; right: 2px; min-width: 16px; height: 16px; border-radius: 999px;
  background: var(--bad); color: #fff; font-size: 10px; font-weight: 700; display: grid;
  place-items: center; padding: 0 4px; font-variant-numeric: tabular-nums;
}

/* ---------- forms ---------- */
/* align-content: a field in a row is stretched to its tallest neighbour, and
   the spare height must not go to its label and push the input down. */
.field { display: grid; gap: 5px; min-width: 0; align-content: start; }
.field > label { font-size: 12px; color: var(--ink-2); font-weight: 500; }
.field .hint { font-size: 11px; color: var(--muted); }
.fields { display: grid; gap: 12px; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); }
/* Two to a row whatever the count: fields that read as pairs, one under the other. */
.fields.pair { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px 16px; }
@media (max-width: 560px) { .fields.pair { grid-template-columns: 1fr; } }
.range { display: flex; gap: 8px; align-items: center; }
.range > span { flex: none; white-space: nowrap; }
label.inline { display: flex; gap: 10px; align-items: center; font-size: 13px; }
label.inline input { width: auto; }
.step { display: grid; gap: 12px; }
.step + .step { border-top: 1px solid var(--line-faint); padding-top: 20px; }
.step > .head { display: flex; gap: 10px; align-items: center; }
.step > .head .n {
  width: 22px; height: 22px; border-radius: 50%; background: var(--accent-bg); color: var(--accent-ink);
  display: grid; place-items: center; font-size: 11px; font-weight: 700; font-family: var(--mono); flex: none;
}
.step > .head strong { font-weight: 600; }
.step > .head .sub { font-size: 12px; color: var(--muted); }
.choices { display: grid; gap: 8px; grid-template-columns: repeat(auto-fit, minmax(160px, 1fr)); }
.choice {
  border-radius: var(--radius-sm); padding: 10px 12px; cursor: pointer; border: 1px solid var(--line);
  background: var(--surface); text-align: left; color: inherit;
  /* A button centres what it holds; a card with a shorter sub must still start at the top. */
  display: flex; flex-direction: column; justify-content: flex-start;
}
.choice.on { border-color: var(--accent); background: var(--accent-bg); }
.choice strong { font-weight: 600; font-size: 13px; display: block; }
.choice .sub { font-size: 12px; color: var(--muted); margin-top: 2px; }
.notice { border-radius: var(--radius-sm); padding: 12px 14px; display: flex; justify-content: space-between; gap: 12px; align-items: center; }
.notice.warn { background: var(--warn-bg); border: 1px solid var(--warn-line); color: var(--warn); }
.notice.warn strong { display: block; font-size: 13px; }
.notice.warn .sub { font-size: 12px; }
.notice.info { background: var(--accent-bg); color: var(--accent-ink); display: grid; gap: 4px; font-size: 12px; line-height: 1.5; }
.notice.legacy { background: var(--surface-2); border: 1px solid var(--line); }
.notice.legacy strong { display: block; font-size: 13px; }
.notice.legacy ul { margin: 6px 0; padding-left: 18px; font-size: 13px; }
.notice.legacy .sub { font-size: 12px; color: var(--muted); }

/* ---------- tables ---------- */
.tablewrap { overflow-x: auto; max-width: 100%; }
table { border-collapse: collapse; width: 100%; font-size: 13px; }
th {
  font-size: 11px; text-transform: uppercase; letter-spacing: .06em; color: var(--muted);
  font-weight: 600; background: var(--surface-2); padding: 9px 16px; text-align: left; white-space: nowrap;
}
td { padding: 10px 16px; border-top: 1px solid var(--line-faint); }
th.num, td.num { text-align: right; font-family: var(--mono); }
tbody tr.clickable { cursor: pointer; }
tbody tr.clickable:hover { background: var(--surface-2); }
tbody tr.on { background: var(--accent-bg); box-shadow: inset 3px 0 0 var(--accent); }

/* ---------- feed ---------- */
.split { display: grid; gap: 20px; grid-template-columns: minmax(0, 1.4fr) minmax(300px, 1fr); align-items: start; }
.split.wide { grid-template-columns: minmax(0, 1.7fr) minmax(260px, 1fr); }
.split.left { grid-template-columns: minmax(280px, 1fr) minmax(0, 1.5fr); }
.split.rail { grid-template-columns: minmax(220px, 260px) minmax(0, 1fr); }
.stack { display: grid; gap: 8px; align-content: start; min-width: 0; }
.stack.lg { gap: 16px; }
.bar { display: flex; gap: 10px; align-items: center; justify-content: space-between; flex-wrap: wrap; }
.bar .chips { display: flex; gap: 6px; flex-wrap: wrap; }
/* A bot's story in four numbers, each one a filter on the rows under it. */
.funnel { display: flex; gap: 6px; align-items: stretch; padding: 10px 12px; flex-wrap: wrap; }
.funnel .stage { flex: 1 1 120px; min-width: 110px; border-radius: var(--radius-sm); padding: 8px 12px; text-align: left; background: transparent; border: 1px solid transparent; cursor: pointer; color: inherit; }
.funnel .stage:hover { background: var(--surface-2); }
.funnel .stage.on { background: var(--accent-bg); border-color: var(--accent); }
.funnel .stage .n { font-family: var(--mono); font-size: 22px; letter-spacing: -0.02em; line-height: 1.1; }
.funnel .stage .k { font-size: 12px; color: var(--ink-2); margin-top: 2px; }
.funnel .stage .s { font-size: 11px; color: var(--muted); }
.funnel .arrow { align-self: center; color: var(--faint); font-size: 14px; }
.thumb { border-radius: var(--radius-xs); background: repeating-linear-gradient(135deg, var(--surface-3) 0 6px, var(--line-soft) 6px 12px); flex: none; object-fit: cover; }

/* The list and the working beside it. The working is its own sticky column
   that scrolls inside itself, so it is on screen whichever row was clicked. */
.feedbar { position: sticky; top: 60px; z-index: 4; padding: 8px 0; margin: -8px 0; background: color-mix(in srgb, var(--bg) 88%, transparent); backdrop-filter: blur(8px); }
.feedtools { display: flex; gap: 12px; align-items: center; flex: 1 1 260px; justify-content: flex-end; }
.feedsearch { max-width: 300px; padding: 6px 10px; font-size: 13px; }
.livetag { display: inline-flex; gap: 6px; align-items: center; white-space: nowrap; }
.feedsplit { display: grid; gap: 20px; grid-template-columns: minmax(0, 1.35fr) minmax(340px, 1fr); align-items: start; }
.feedcol { display: grid; gap: 8px; min-width: 0; position: relative; }
.feedlist { display: grid; gap: 6px; align-content: start; min-width: 0; transition: opacity .15s; }
.feedlist.busy { opacity: .45; pointer-events: none; }
.feedfoot { display: flex; justify-content: space-between; align-items: center; gap: 12px; padding: 4px 2px; min-height: 36px; }
.newpill {
  position: sticky; top: 112px; z-index: 3; justify-self: center; margin-bottom: -38px;
  border: 0; border-radius: 999px; padding: 6px 14px; font-size: 12px; font-weight: 600;
  background: var(--ink); color: var(--bg); box-shadow: var(--shadow-pop); animation: slidein .2s ease;
}
.newpill[hidden] { display: none; }
.feeddetail {
  position: sticky; top: 112px; height: calc(100vh - 128px); overflow: hidden;
  border-radius: var(--radius); scrollbar-width: thin; scrollbar-color: var(--line) transparent; overscroll-behavior: contain;
}
.feedscrim { display: none; }

.feedrow {
  display: grid; grid-template-columns: 52px minmax(0, 1fr) auto; gap: 12px; align-items: center;
  padding: 8px 12px 8px 8px; border-radius: 12px; cursor: pointer; background: var(--surface);
  border: 1px solid var(--line-soft); text-align: left; width: 100%;
}
.feedrow:hover { border-color: var(--line); }
.feedrow.on { border-color: var(--accent); box-shadow: 0 0 0 3px var(--accent-bg); }
.feedrow.fresh { animation: slidein .3s ease; }
.feedrow.skip { background: var(--surface-2); }
.feedrow.skip .title { font-weight: 500; color: var(--ink-2); }
.feedrow.skip .price { color: var(--muted); }
.feedrow .thumb { width: 52px; height: 52px; }
.feedrow .mid { min-width: 0; display: grid; gap: 5px; }
.feedrow .title { font-weight: 600; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.feedrow .meta { display: flex; gap: 8px; align-items: center; min-width: 0; font-size: 12px; color: var(--muted); white-space: nowrap; }
.feedrow .meta .bot { color: var(--ink-2); font-weight: 500; flex: none; }
.feedrow .meta .reason { overflow: hidden; text-overflow: ellipsis; min-width: 0; }
.feedrow .right { display: grid; gap: 1px; justify-items: end; text-align: right; }
.feedrow .price { font-family: var(--mono); font-size: 16px; letter-spacing: -0.01em; }
.feedrow .profit { font-family: var(--mono); font-size: 12px; font-weight: 500; color: var(--good); }
.feedrow .profit.loss { color: var(--bad); }
.feedrow .profit.none { color: var(--muted); }
.feedrow .ago { font-family: var(--mono); font-size: 11px; color: var(--faint); flex: none; }

.tile.bad { background: var(--bad-bg); }
.tile.bad .label, .tile.bad .value { color: var(--bad); }
.detail .why-list { display: grid; gap: 8px; }
.detail .why-list div { display: flex; gap: 8px; font-size: 13px; align-items: flex-start; }
.detail .why-list div::before { content: ""; width: 6px; height: 6px; border-radius: 50%; background: var(--accent); margin-top: 7px; flex: none; }

/* Narrow: one column, and the working slides in over the list when a row is clicked. */
@media (max-width: 1100px) {
  .feedsplit { grid-template-columns: minmax(0, 1fr); }
  .feedbar { position: static; margin: 0; padding: 0; background: none; backdrop-filter: none; }
  .newpill { position: fixed; top: 72px; left: 50%; transform: translateX(-50%); margin: 0; animation: none; }
  .feeddetail {
    position: fixed; top: 0; right: 0; bottom: 0; width: min(460px, 100vw); max-height: none; z-index: 45;
    border-radius: 0; background: var(--bg); transform: translateX(105%); transition: transform .22s ease;
    box-shadow: var(--shadow-pop);
  }
  .feeddetail.open { transform: none; }
  .feeddetail .detail { border-radius: 0; border: 0; min-height: 100%; }
  .detail .sheetclose { display: grid; place-items: center; }
  .feedscrim.open { display: block; position: fixed; inset: 0; z-index: 44; background: rgba(21, 32, 24, .35); }
}
@media (max-width: 560px) {
  .feedtools { justify-content: space-between; flex-basis: 100%; }
  .feedsearch { max-width: none; }
  .feedrow { grid-template-columns: 44px minmax(0, 1fr) auto; gap: 10px; }
  .feedrow .thumb { width: 44px; height: 44px; }
  .feedrow .meta .reason { display: none; }
}

/* ---------- accounts ---------- */
.meter { height: 6px; background: var(--surface-3); border-radius: 3px; overflow: hidden; }
.meter > span { display: block; height: 100%; border-radius: 3px; background: var(--accent); }
.meter > span.hot { background: var(--warn); }
.meter.thin { height: 4px; }
.metered { display: grid; gap: 6px; }
.metered .row { display: flex; justify-content: space-between; font-size: 12px; }
.addcard {
  border: 1px dashed var(--line); border-radius: 12px; padding: 24px; display: grid; gap: 8px;
  align-content: center; justify-items: start; cursor: pointer; background: var(--surface-2); text-align: left;
}
.addcard .plus { width: 36px; height: 36px; border-radius: var(--radius-sm); background: var(--accent-bg); color: var(--accent-ink); display: grid; place-items: center; font-size: 20px; font-weight: 600; }

/* ---------- bots ---------- */
/* The editor asks one question in a big field; everything derived from it sits
   under the field, and the knobs live in a drawer. */
.biglabel { font-size: 13px; font-weight: 600; color: var(--ink-2); }
input.hunt { font-size: 20px; font-family: var(--display); font-weight: 600; padding: 12px 14px; letter-spacing: -0.01em; }
.planhost { min-height: 22px; }
.recog { display: flex; gap: 6px; align-items: center; flex-wrap: wrap; font-size: 13px; }
.recog .grp { background: var(--accent-bg); color: var(--accent-ink); border-radius: 8px; padding: 4px 9px; font-weight: 600; font-family: var(--mono); font-size: 12px; }
.recog .grp small { font-weight: 400; color: var(--accent-ink); opacity: .75; font-family: var(--sans); }
.recog .plus { color: var(--muted); font-weight: 600; }
.recog .wants { font-weight: 600; color: var(--ink); }
label.inline.judge { padding: 8px 10px; border-radius: var(--radius-xs); background: var(--surface-2); border: 1px solid var(--line-faint); }
.catpick { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; font-size: 13px; }
.catpick input { flex: 1 1 260px; }
.catchip { display: inline-flex; gap: 4px; align-items: center; flex-wrap: wrap; background: var(--surface-2); border: 1px solid var(--line-faint); border-radius: 8px; padding: 4px 9px; font-size: 12px; color: var(--muted); }
.catchip .leaf { color: var(--ink); font-weight: 600; }
.catchip .sep { color: var(--faint); }
.catpick .linkbtn.muted { color: var(--muted); }
.catresults { flex-basis: 100%; display: grid; gap: 4px; }
.catresult { display: flex; gap: 10px; align-items: baseline; padding: 6px 10px; border-radius: 8px; border: 1px solid var(--line-faint); background: var(--surface); text-align: left; cursor: pointer; color: inherit; }
.catresult:hover { background: var(--surface-2); }
.catresult .leaf { font-weight: 600; }
.worth { display: grid; gap: 8px; grid-template-columns: repeat(auto-fit, minmax(160px, 1fr)); }
.worth .tile .sub { font-size: 11px; color: var(--muted); margin-top: 4px; }
.worth .tile.good .sub, .worth .tile.good .sub .linkbtn { color: var(--good); }
.cex { display: grid; gap: 10px; }
.variants { display: grid; border: 1px solid var(--line-faint); border-radius: var(--radius-xs); overflow: hidden; }
.variants .vrow { display: grid; grid-template-columns: minmax(0, 1fr) 120px 120px 36px; gap: 8px; align-items: center; padding: 6px 10px; border-top: 1px solid var(--line-faint); }
.variants .vrow:first-child { border-top: 0; }
.variants .vrow.head { background: var(--surface-2); color: var(--muted); font-size: 11px; text-transform: uppercase; letter-spacing: .05em; font-weight: 600; padding: 8px 10px; }
.variants .vrow.off input:not([type=checkbox]) { opacity: .5; text-decoration: line-through; }
.variants .vrow input { padding: 6px 8px; font-size: 13px; }
.variants .vrow .namecell { display: flex; gap: 8px; align-items: center; min-width: 0; }
.variants .vrow .namecell input[type=checkbox] { width: auto; flex: none; }
.variants .vrow .money { display: flex; gap: 4px; align-items: center; }
.variants .vrow.addrow { grid-template-columns: minmax(0, 1fr) auto; background: var(--surface-2); }
/* The fold under the first five: how many more, and how many of those are on. */
.variants .vmore {
  display: flex; align-items: center; gap: 6px; width: 100%; text-align: left;
  padding: 9px 12px; border: 0; border-top: 1px solid var(--line-faint); background: var(--surface);
  font-size: 12.5px; font-weight: 600; color: var(--accent-ink);
}
.variants .vmore:hover { background: var(--surface-2); }
.variants .vmore:focus-visible { outline: 2px solid var(--accent); outline-offset: -2px; }
.variants .vmore .muted { font-weight: 400; }
.variants .vmore .chev { width: 14px; font-size: 10px; text-align: center; }
@media (max-width: 640px) { .variants .vrow { grid-template-columns: minmax(0, 1fr) 90px 90px 32px; } }
.cexvariants { display: grid; font-size: 12px; border: 1px solid var(--line-faint); border-radius: var(--radius-xs); overflow: hidden; }
.cexvariants .row { display: grid; grid-template-columns: minmax(0, 1fr) 70px 60px; gap: 8px; padding: 6px 10px; border-top: 1px solid var(--line-faint); align-items: center; }
.cexvariants .row:first-child { border-top: 0; }
.cexvariants .row.head { background: var(--surface-2); color: var(--muted); font-size: 11px; text-transform: uppercase; letter-spacing: .05em; font-weight: 600; }
.cexvariants .row .name { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.cexvariants .row .mono { text-align: right; }
.safety { border-radius: var(--radius-sm); background: var(--surface-2); border: 1px solid var(--line-faint); padding: 12px 14px; font-size: 12.5px; color: var(--ink-2); }
.safety strong { display: block; margin-bottom: 6px; font-size: 13px; color: var(--ink); }
.safety ul { margin: 0; padding-left: 18px; display: grid; gap: 3px; }
details.advanced { border-top: 1px solid var(--line-faint); padding-top: 14px; }
details.advanced summary { cursor: pointer; font-weight: 600; font-size: 13px; color: var(--ink-2); list-style: none; display: flex; gap: 8px; align-items: center; }
details.advanced summary::before { content: "▸"; color: var(--muted); font-size: 11px; transition: transform .15s ease; }
details.advanced[open] summary::before { transform: rotate(90deg); }
.botcard .funnelline { font-size: 11px; color: var(--muted); font-family: var(--mono); margin-top: 8px; }
.testrow { display: grid; grid-template-columns: 22px minmax(0, 1fr) auto; gap: 10px; align-items: center; padding: 9px 0; }
.testrow .mark { font-weight: 700; color: var(--bad); text-align: center; }
.testrow.fit .mark { color: var(--good); }
.testrow .title { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 13px; }
.botcard { background: var(--surface); border: 1px solid var(--line-soft); border-radius: 12px; padding: 14px 16px; cursor: pointer; text-align: left; width: 100%; color: inherit; }
/* The grid: every bot as a card you can read at a glance, and one with a plus. */
.botgrid { display: grid; gap: 14px; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); align-items: stretch; }
.botcard.grid { display: grid; gap: 10px; align-content: start; box-shadow: var(--shadow-flat); }
.botcard.grid:hover { border-color: var(--line); box-shadow: var(--shadow); }
.botcard.grid.off { opacity: .7; }
.botcard.grid .name { font-size: 15px; font-family: var(--display); letter-spacing: -0.01em; }
.botcard.grid .meta { margin-top: 0; }
.botcard.grid .minitiles { margin-top: 2px; }
.botcard.grid .foot { display: flex; justify-content: space-between; gap: 8px; font-size: 12px; font-family: var(--mono); color: var(--ink-2); border-top: 1px solid var(--line-faint); padding-top: 10px; }
.addcard.bot { min-height: 180px; align-content: center; justify-items: start; color: inherit; }
.addcard.bot strong { font-size: 15px; font-family: var(--display); }
.linkbtn.back { padding: 0; margin-bottom: 4px; font-size: 12px; }

/* The bot editor. One reading column (--col), and the bar on top lined up
   with it: who the bot is, whether it is live, and Save - stuck under the top
   bar (--topbar-h, measured in main.js) however far the form scrolls. The card
   lets it out (a clipping card would pin it inside itself). */
.card.botedit { overflow: visible; --col: 1040px; }
.card > header.edbar {
  position: sticky; top: var(--topbar-h, 60px); z-index: 4;
  padding: 12px max(18px, calc((100% - var(--col)) / 2 + 20px)); gap: 10px 16px; background: var(--surface);
  border-radius: calc(var(--radius) - 1px) calc(var(--radius) - 1px) 0 0;
  transition: box-shadow .15s ease;
}
.card > header.edbar.stuck { border-radius: 0; box-shadow: 0 14px 22px -20px rgba(0, 0, 0, .5); }
.eb-who { display: flex; align-items: center; gap: 12px; min-width: 0; flex: 1 1 300px; }
.eb-back {
  width: 32px; height: 32px; flex: none; display: grid; place-items: center; padding: 0;
  border-radius: 50%; border: 1px solid var(--line-soft); background: var(--surface); color: var(--ink-2);
  transition: border-color .15s, background .15s, color .15s;
}
.eb-back:hover { border-color: var(--line); background: var(--surface-2); color: var(--ink); }
.eb-back:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.eb-back .glyph-i { color: inherit; }
.eb-who pouncio-mark { flex: none; }
.eb-title { min-width: 0; }
.card > header .eb-name {
  font-family: var(--display); font-size: 18px; font-weight: 650; letter-spacing: -0.015em; line-height: 1.2;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.eb-meta { display: flex; gap: 10px; align-items: center; min-width: 0; margin-top: 3px; font-size: 12.5px; color: var(--ink-2); }
.eb-does { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.eb-meta .linkbtn { flex: none; font-size: 12.5px; white-space: nowrap; }
.eb-actions { display: flex; align-items: center; justify-content: flex-end; gap: 8px; flex-wrap: wrap; }
.eb-dirty { display: inline-flex; align-items: center; gap: 7px; margin-right: 4px; font-size: 12px; font-weight: 600; color: var(--second-ink); white-space: nowrap; }
.eb-dirty[hidden] { display: none; }
.eb-dirty i { width: 7px; height: 7px; border-radius: 50%; background: var(--second); box-shadow: 0 0 0 3px var(--second-bg); flex: none; }
.eb-dirty .linkbtn { color: var(--ink-2); text-decoration: underline; text-underline-offset: 2px; }
/* Dry run or live: two words side by side, live lit in the warning colour. */
.eb-mode { display: inline-flex; gap: 2px; padding: 3px; border-radius: 9px; background: var(--surface-3); }
.eb-mode[hidden] { display: none; }
.eb-mode button {
  border: 0; background: none; padding: 4px 11px; border-radius: 6px; font-size: 12.5px; font-weight: 600;
  color: var(--muted); white-space: nowrap; transition: background .15s, color .15s;
}
.eb-mode button:hover { color: var(--ink); }
.eb-mode button:focus-visible { outline: 2px solid var(--accent); outline-offset: 1px; }
.eb-mode button.on { background: var(--surface); color: var(--ink); box-shadow: 0 1px 2px rgba(21, 32, 24, .08), 0 0 0 1px var(--line-soft); }
.eb-mode button.live.on { background: var(--warn-bg); color: var(--warn); box-shadow: 0 0 0 1px var(--warn-line); }
.eb-run {
  display: inline-flex; align-items: center; gap: 8px; cursor: pointer; font-size: 12.5px; font-weight: 600; color: var(--ink-2);
  padding: 0 12px 0 4px; margin-right: 4px; border-right: 1px solid var(--line-soft);
}
.eb-runlabel { min-width: 44px; }
.edbar.off .eb-runlabel { color: var(--muted); }
.eb-save { min-width: 64px; }
.eb-save.dirty { box-shadow: var(--accent-shadow), 0 0 0 3px var(--accent-bg); }
.eb-save:disabled { opacity: .7; cursor: progress; }
/* What live means, under the bar's row, for as long as it is (or is about to be) live. */
.edbar .eb-warn {
  flex-basis: 100%; display: flex; align-items: center; gap: 9px; padding: 7px 12px;
  border-radius: var(--radius-xs); background: var(--warn-bg); border: 1px solid var(--warn-line);
  color: var(--warn); font-size: 12.5px; font-weight: 600; line-height: 1.35;
}
.edbar .eb-warn::before { content: ""; width: 7px; height: 7px; border-radius: 50%; background: currentColor; flex: none; }
.edbar .eb-warn[hidden] { display: none; }
.edbar .eb-warn.calm { background: var(--surface-2); border-color: var(--line-faint); color: var(--ink-2); font-weight: 500; }

/* The form: sections in the order that matters, each with a heading. */
.eb-body { max-width: var(--col); margin: 0 auto; padding: 24px 20px 28px; display: grid; gap: 26px; min-width: 0; }
.eb-sec { display: grid; gap: 14px; min-width: 0; }
.eb-sec + .eb-sec { border-top: 1px solid var(--line-faint); padding-top: 26px; }
.eb-sechead { display: grid; gap: 3px; }
.eb-sechead h3 { font-size: 16px; font-weight: 650; letter-spacing: -0.01em; line-height: 1.25; }
.eb-sechead .sub { font-size: 12.5px; color: var(--muted); }
.eb-body details.advanced { padding-top: 22px; }
.eb-worth { border: 1px solid var(--line-faint); border-radius: var(--radius-sm); padding: 11px 14px; }
.eb-worth > summary, .safety.fold > summary {
  cursor: pointer; list-style: none; display: flex; flex-wrap: wrap; gap: 6px; align-items: baseline; font-size: 13px;
}
.eb-worth > summary::-webkit-details-marker, .safety.fold > summary::-webkit-details-marker { display: none; }
.eb-worth > summary::before, .safety.fold > summary::before { content: "▸"; color: var(--muted); font-size: 11px; transition: transform .15s ease; }
.eb-worth[open] > summary::before, .safety.fold[open] > summary::before { transform: rotate(90deg); }
.eb-worth[open] > summary { margin-bottom: 12px; }
.eb-worth > summary strong { font-weight: 600; color: var(--ink-2); }
.safety.fold > summary strong { display: inline; margin: 0; font-size: 12.5px; }
.safety.fold > ul { margin-top: 8px; }

/* An offer worked through: the profit a discount buys, before a listing arrives. */
.offerx {
  border: 1px solid var(--line-faint); border-radius: var(--radius-sm); padding: 14px 16px;
  display: grid; gap: 12px; min-width: 0;
}
.offerx .ox-head { display: grid; gap: 8px; }
.offerx .ox-head > strong { font-size: 13px; font-weight: 600; color: var(--ink-2); }
.offerx .ox-try { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 8px; font-size: 13px; }
.offerx .ox-try select { width: auto; max-width: 100%; }
.offerx .ox-money { display: inline-flex; align-items: center; gap: 4px; }
.offerx .ox-money input { width: 96px; }
.offerx .ox-result { display: grid; gap: 10px; }
.offerx .ox-verdict {
  font-size: 14px; line-height: 1.45; padding: 10px 12px; border-radius: var(--radius-xs);
  background: var(--surface-2); color: var(--ink-2);
}
.offerx .ox-verdict strong { font-weight: 700; }
.offerx .ox-result.sent .ox-verdict { background: var(--good-bg); color: var(--good); }
.offerx .ox-result.alert .ox-verdict { background: var(--warn-bg); color: var(--warn); }
.offerx .ox-sum { display: grid; grid-template-columns: 1fr auto; row-gap: 4px; margin: 0; font-size: 12.5px; max-width: 460px; }
.offerx .ox-sum dt { color: var(--muted); }
.offerx .ox-sum dd { margin: 0; padding-left: 16px; text-align: right; color: var(--ink-2); }
.offerx .ox-sum .tot { border-top: 1px solid var(--line-faint); padding-top: 4px; color: var(--ink-2); font-weight: 600; }
.offerx .ox-sum .net { border-top: 1px solid var(--line); padding-top: 6px; font-size: 13.5px; font-weight: 700; color: var(--ink); }
.offerx .ox-result.sent .ox-sum dd.net { color: var(--good); }
.offerx .ox-foot { margin: 0; font-size: 12px; line-height: 1.5; color: var(--muted); }

.card.botedit > .eb-danger {
  display: flex; justify-content: space-between; align-items: center; gap: 12px;
  padding: 14px max(20px, calc((100% - var(--col)) / 2 + 20px)); border-top: 1px solid var(--line-faint); font-size: 13px;
}
.eb-danger .sub { font-size: 12px; color: var(--muted); margin-top: 2px; }
@media (max-width: 720px) {
  .card > header.edbar { padding: 10px 14px; }
  .eb-who { flex-basis: 100%; gap: 10px; }
  .eb-actions { width: 100%; justify-content: flex-start; }
  .eb-actions .eb-save { margin-left: auto; }
  .eb-dirty .t { display: none; }
  .eb-body { padding: 18px 14px 22px; }
  .card.botedit > .eb-danger { padding: 14px; }
  /* Stuck on a phone, the bar keeps only what it is for: its name, live or
     not, and Save - the warning down to its lead, the unsaved note to its dot. */
  .edbar.stuck .eb-meta, .edbar.stuck .eb-warn .more, .edbar.stuck .eb-dirty .linkbtn { display: none; }
  .edbar.stuck .eb-warn { padding-block: 5px; }
}
@media (max-width: 480px) {
  /* Stuck on a narrow phone the row keeps dry run, on/off and Save on one line;
     the replay is still at the top of the page. */
  .edbar.stuck .eb-test { display: none; }
  .eb-actions { gap: 6px; }
  .eb-dirty { margin-right: 0; }
  .eb-mode button { padding-inline: 9px; }
  .eb-run { padding-right: 8px; margin-right: 0; }
  .eb-runlabel { min-width: 0; }
}

/* The flow: one question per screen, a row of steps above, back and next below. */
.wizard { max-width: 760px; margin: 0 auto; width: 100%; }
.wizard > .pane { padding: 22px 20px; display: grid; gap: 16px; min-height: 240px; align-content: start; }
.wizard > footer { display: flex; justify-content: space-between; gap: 10px; padding: 14px 20px; border-top: 1px solid var(--line-soft); }
.steps-nav { display: flex; gap: 6px; padding: 14px 20px 0; flex-wrap: wrap; }
.stepdot { display: flex; gap: 8px; align-items: center; padding: 6px 10px; border-radius: 999px; background: transparent; border: 1px solid transparent; color: var(--muted); font-size: 12px; font-weight: 600; cursor: default; }
.stepdot .n { width: 20px; height: 20px; border-radius: 50%; display: grid; place-items: center; font-family: var(--mono); font-size: 11px; background: var(--surface-3); color: var(--muted); }
.stepdot.on { color: var(--accent-ink); background: var(--accent-bg); }
.stepdot.on .n { background: var(--accent); color: var(--accent-text); }
.stepdot.done { color: var(--ink-2); cursor: pointer; }
.stepdot.done .n { background: var(--good-bg); color: var(--good); }
.stepdot:disabled { opacity: .7; }
/* Unique name on purpose: `.done` is also a step marker's state. */
.wizard-done { display: grid; gap: 12px; justify-items: center; text-align: center; padding: 40px 20px; }
.wizard-done .check { width: 56px; height: 56px; border-radius: 50%; background: var(--good-bg); color: var(--good); display: grid; place-items: center; font-size: 26px; font-weight: 700; }
.wizard-done h2 { font-family: var(--display); font-size: 22px; letter-spacing: -0.01em; }
.wizard-done p { max-width: 440px; }
.botcard.on { border-color: var(--accent); box-shadow: 0 0 0 3px var(--accent-bg); }
.botcard .top { display: flex; justify-content: space-between; gap: 10px; align-items: flex-start; }
.botcard .name { font-weight: 600; }
.botcard .name.named { display: flex; align-items: center; gap: 7px; }
.botcard .name.named .pc-chip { margin-left: 2px; }
.botcard .filterline { font-size: 12px; color: var(--muted); margin-top: 2px; }
.botcard .meta { display: flex; gap: 6px; flex-wrap: wrap; margin-top: 10px; align-items: center; }
.botcard .stats { font-size: 11px; color: var(--muted); font-family: var(--mono); }

/* ---------- inbox ---------- */
/* The inbox is the one view that owns the whole window: the shell gives the
   view the height left under the topbar, and each of the three panes scrolls on
   its own, so the composer stays put and the thread never ends in blank space. */
.view.fill { min-height: 0; grid-template-rows: minmax(0, 1fr); align-content: stretch; padding: 16px 24px; }
.inbox {
  display: grid; grid-template-columns: minmax(290px, 1fr) minmax(0, 2.2fr) minmax(250px, .95fr);
  grid-template-rows: minmax(0, 1fr); min-height: 0;
  background: var(--surface); border: 1px solid var(--line-soft); border-radius: var(--radius);
  box-shadow: var(--shadow); overflow: hidden; height: 100%;
}
.inbox > .list { border-right: 1px solid var(--line-soft); display: grid; grid-template-rows: auto minmax(0, 1fr); min-width: 0; min-height: 0; }
.inbox > .list > .head { padding: 12px; border-bottom: 1px solid var(--line-soft); display: grid; gap: 8px; }
.inbox > .list > .threads { display: grid; align-content: start; overflow-y: auto; min-height: 0; }
.inbox > .conv { display: grid; grid-template-rows: auto auto minmax(0, 1fr) auto; min-width: 0; min-height: 0; }
.inbox > .aside { border-left: 1px solid var(--line-soft); padding: 16px; display: grid; gap: 16px; align-content: start; min-width: 0; min-height: 0; overflow-y: auto; }
.inbox > .aside .photo { display: block; border-radius: var(--radius-xs); overflow: hidden; background: var(--surface-2); border: 1px solid var(--line-soft); }
.inbox > .aside .photo img { display: block; width: 100%; height: auto; max-height: 280px; object-fit: contain; }
.avatar-sm { border-radius: 50%; display: grid; place-items: center; flex: none; font-weight: 700; letter-spacing: .02em; }
.threadhead { display: flex; gap: 8px; align-items: center; padding: 9px 14px 5px; background: var(--surface-2); border-bottom: 1px solid var(--line-faint); position: sticky; top: 0; z-index: 1; }
.threadhead .label { font-size: 11px; font-weight: 700; letter-spacing: .05em; text-transform: uppercase; color: var(--ink-2); }

/* The list: search, the accounts (only with more than one), four tabs that say
   whose move it is, and rows that lead with the item's photo. Every class here
   is ib- prefixed: short names like .note and .grow already mean something. */
.ib-search { background: var(--surface-2); font-size: 13px; }
.ib-accounts { display: flex; gap: 5px; flex-wrap: wrap; }
.ib-accounts:empty { display: none; }
.ib-tabs {
  display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 2px;
  background: var(--surface-2); border: 1px solid var(--line-soft); border-radius: 10px; padding: 3px;
}
.ib-tab {
  border: 0; background: transparent; border-radius: 7px; padding: 5px 4px; font-size: 12.5px; font-weight: 600;
  color: var(--muted); display: flex; gap: 5px; align-items: center; justify-content: center; white-space: nowrap; min-width: 0;
}
.ib-tab:hover { color: var(--ink); }
.ib-tab.on { background: var(--surface); color: var(--ink); box-shadow: var(--shadow-flat); }
.ib-tab .n { font-family: var(--mono); font-size: 10.5px; font-weight: 500; color: var(--faint); }
.ib-tab.hot .n { background: var(--second); color: #3d3300; border-radius: 999px; padding: 0 6px; font-weight: 700; }
.ib-row {
  display: grid; grid-template-columns: 44px minmax(0, 1fr); gap: 11px; align-items: start;
  padding: 11px 14px 11px 11px; width: 100%; text-align: left;
  border: 0; border-bottom: 1px solid var(--line-faint); border-left: 3px solid transparent; background: var(--surface);
}
.ib-row:hover { background: var(--surface-2); }
.ib-row.unread { border-left-color: var(--accent); }
.ib-row.on { border-left-color: var(--acct, var(--accent)); background: color-mix(in srgb, var(--acct, var(--accent)) 13%, var(--surface)); }
.ib-thumb { border-radius: 8px; object-fit: cover; background: var(--surface-3); display: block; border: 1px solid var(--line-faint); flex: none; }
.ib-thumb.none { display: grid; place-items: center; }
.ib-main { min-width: 0; display: grid; gap: 1px; }
.ib-l1 { display: flex; align-items: center; gap: 6px; min-width: 0; }
.ib-who { font-weight: 600; font-size: 13px; color: var(--ink-2); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ib-row.unread .ib-who { font-weight: 700; color: var(--ink); }
.ib-dot { width: 7px; height: 7px; border-radius: 50%; background: var(--accent); flex: none; }
.ib-when { margin-left: auto; font-family: var(--mono); font-size: 11px; color: var(--faint); flex: none; }
.ib-row.unread .ib-when { color: var(--accent-ink); font-weight: 600; }
.ib-item, .ib-prev { font-size: 12px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ib-item { color: var(--ink-2); }
.ib-prev { color: var(--muted); }
.ib-row.unread .ib-prev { color: var(--ink); }
.ib-prev.system { font-style: italic; color: var(--faint); }
.ib-chips { display: flex; gap: 5px; flex-wrap: wrap; align-items: center; margin-top: 5px; min-width: 0; }
.ib-chips:empty { display: none; }
.ib-chip {
  font-size: 10.5px; font-weight: 600; line-height: 1.6; padding: 0 7px; border-radius: 999px; white-space: nowrap;
  background: var(--surface-3); color: var(--ink-2);
}
.ib-chip.reply { background: var(--accent); color: var(--accent-text); }
.ib-chip.offer { background: var(--second); color: #3d3300; }
.ib-chip.due { background: var(--bad-bg); color: var(--bad); }
.ib-chip.waiting { background: var(--surface-3); color: var(--ink-2); }
.ib-chip.closed, .ib-chip.mute, .ib-chip.offer-mute { background: transparent; color: var(--faint); box-shadow: inset 0 0 0 1px var(--line); }
.ib-chip.offer-offer { background: var(--offer-bg); color: var(--offer); }
.ib-chip.offer-good { background: var(--good-bg); color: var(--good); }
.ib-chip.offer-bad { background: var(--bad-bg); color: var(--bad); }
.ib-chip.memo { background: var(--warn-bg); color: var(--warn); }
.ib-acct { font-size: 11px; color: var(--faint); display: inline-flex; gap: 5px; align-items: center; }

/* The thread: a header, the one thing to know, the messages, the composer. */
.ib-head { display: flex; align-items: center; gap: 12px; padding: 12px 18px; border-bottom: 1px solid var(--line-soft); min-width: 0; }
.ib-head-main { min-width: 0; flex: 1; }
.ib-head-who { display: flex; gap: 8px; align-items: center; font-weight: 650; font-size: 15px; min-width: 0; }
.ib-head-sub { font-size: 12px; color: var(--muted); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ib-head-actions { display: flex; gap: 6px; align-items: center; flex: none; }
.ib-toggle {
  border: 1px solid var(--line); background: var(--surface); border-radius: 999px; padding: 4px 11px;
  font-size: 12px; font-weight: 600; color: var(--ink-2);
}
.ib-toggle:hover { border-color: var(--accent); }
.ib-toggle.on { background: var(--accent-bg); border-color: var(--accent); color: var(--accent-ink); }
.ib-toggle:disabled { opacity: .5; cursor: not-allowed; }
select.ib-lang { width: auto; padding: 4px 8px; font-size: 12px; border-radius: 999px; }
.ib-banner {
  display: flex; gap: 12px; align-items: center; justify-content: space-between; flex-wrap: wrap;
  margin: 10px 18px 0; padding: 10px 14px; border-radius: 10px; border: 1px solid var(--line-soft); background: var(--surface-2);
}
.ib-banner-text { display: grid; gap: 1px; min-width: 0; flex: 1 1 260px; font-size: 12.5px; color: var(--ink-2); }
.ib-banner-text strong { font-size: 13.5px; color: var(--ink); }
.ib-banner-actions { display: flex; gap: 6px; flex-wrap: wrap; }
.ib-banner.offer { background: var(--second-bg); border-color: var(--warn-line); }
.ib-banner.due { background: var(--bad-bg); border-color: var(--bad-line); }
.ib-banner.bad { border-left: 3px solid var(--bad); }
.ib-banner.good { background: var(--good-bg); border-color: transparent; }

.msgs { display: grid; gap: 8px; padding: 12px 18px 18px; align-content: start; background: var(--surface-2); overflow-y: auto; min-height: 0; }
.ib-day { display: flex; align-items: center; gap: 10px; color: var(--faint); font-size: 10.5px; font-weight: 700; letter-spacing: .05em; text-transform: uppercase; margin: 8px 0 2px; }
.ib-day::before, .ib-day::after { content: ""; flex: 1; height: 1px; background: var(--line-soft); }
.bubble { padding: 9px 13px; border-radius: 12px; font-size: 13px; white-space: pre-wrap; overflow-wrap: anywhere; }
.bubble .at { display: block; font-size: 10px; margin-top: 3px; font-family: var(--mono); }
.bubble.them { background: var(--surface); border: 1px solid var(--line-soft); border-bottom-left-radius: 4px; }
.bubble.them .at { color: var(--muted); }
.bubble.me { color: #fff; border-bottom-right-radius: 4px; }
.bubble.me .at { color: rgba(255, 255, 255, .75); }
.me-wrap, .them-wrap { display: grid; gap: 3px; max-width: min(74%, 560px); }
.me-wrap { justify-self: end; justify-items: end; }
.them-wrap { justify-self: start; justify-items: start; }
.me-wrap .sentas { font-size: 10.5px; color: var(--faint); display: flex; gap: 4px; align-items: center; }
.ib-tr { font-size: 12.5px; color: var(--ink-2); background: var(--accent-bg); border-radius: 8px; padding: 5px 10px; display: grid; gap: 1px; }
.ib-tr-from { font-size: 9.5px; font-weight: 700; letter-spacing: .05em; text-transform: uppercase; color: var(--accent-ink); }
.ib-notice {
  justify-self: center; display: inline-flex; gap: 8px; align-items: baseline; max-width: 90%; text-align: center;
  font-size: 12px; color: var(--muted); background: var(--surface-3); border-radius: 999px; padding: 3px 12px;
}
.ib-notice .at { font-family: var(--mono); font-size: 10px; color: var(--faint); }
.ib-notice.due { background: var(--bad-bg); color: var(--bad); font-weight: 600; }
.ib-offer {
  display: grid; gap: 3px; min-width: 210px; max-width: 300px; padding: 10px 14px; border-radius: 12px;
  background: var(--surface); border: 1px solid var(--line); box-shadow: var(--shadow-flat);
}
.ib-offer.mine { justify-self: end; border-bottom-right-radius: 4px; }
.ib-offer.theirs { justify-self: start; border-bottom-left-radius: 4px; }
.ib-offer.theirs.offer { background: var(--second-bg); border-color: var(--warn-line); }
.ib-offer.mute { opacity: .7; }
.ib-offer-top { display: flex; justify-content: space-between; gap: 10px; align-items: center; }
.ib-offer-who { font-size: 10.5px; font-weight: 700; letter-spacing: .05em; text-transform: uppercase; color: var(--muted); }
.ib-offer-price { display: flex; align-items: baseline; gap: 8px; flex-wrap: wrap; }
.ib-offer-price .amt { font-family: var(--display); font-size: 24px; font-weight: 700; letter-spacing: -0.02em; line-height: 1.15; color: var(--ink); }
.ib-offer.bad .ib-offer-price .amt { color: var(--muted); }
.ib-offer-price .was { font-family: var(--mono); font-size: 12px; color: var(--faint); }
.ib-offer-price .pct { font-family: var(--mono); font-size: 12px; font-weight: 600; color: var(--good); }
.ib-offer-missing { font-size: 12px; color: var(--muted); font-style: italic; }
.ib-offer .at { font-family: var(--mono); font-size: 10px; color: var(--faint); }
.ib-note { background: var(--warn-bg); border: 1px dashed var(--warn-line); border-radius: 10px; padding: 7px 12px; display: grid; gap: 2px; }
.msgs > .ib-note { margin: 0 8%; }
.ib-note-head { font-size: 11px; font-weight: 600; color: var(--warn); }
.ib-note-body { font-size: 13px; color: var(--ink); white-space: pre-wrap; overflow-wrap: anywhere; }

/* The composer: Reply or Internal note, the AI's buttons, the box, what the
   draft means, then saved replies, an offer, and Send beside the account. */
.ib-composer { border-top: 1px solid var(--line-soft); padding: 10px 18px 12px; display: grid; gap: 8px; background: var(--surface); }
.ib-ctop { display: flex; justify-content: space-between; align-items: center; gap: 10px; flex-wrap: wrap; }
.ib-ctabs { display: flex; gap: 2px; }
.ib-ctab { border: 0; background: transparent; padding: 3px 11px; border-radius: 999px; font-size: 12.5px; font-weight: 600; color: var(--muted); }
.ib-ctab:hover { color: var(--ink); }
.ib-ctab.on { background: var(--surface-3); color: var(--ink); }
.ib-composer.is-note .ib-ctab.on { background: var(--warn-bg); color: var(--warn); }
.ib-as { display: flex; align-items: center; gap: 6px; font-size: 12px; }
.ib-as-pill { display: inline-flex; gap: 5px; align-items: center; border: 1px solid; border-radius: 999px; padding: 0 9px; font-weight: 600; line-height: 1.7; }
.ib-ai { display: flex; gap: 6px; align-items: center; flex-wrap: wrap; }
.ib-ai-mark { color: var(--accent-ink); font-size: 11px; font-weight: 700; letter-spacing: .04em; white-space: nowrap; cursor: help; }
.ib-ai-btn {
  border: 1px solid var(--line); background: var(--surface); border-radius: 999px; padding: 3px 10px;
  font-size: 12px; font-weight: 500; color: var(--ink-2); white-space: nowrap;
}
.ib-ai-btn:hover { border-color: var(--accent); color: var(--accent-ink); background: var(--accent-bg); }
.ib-ai-btn:disabled { opacity: .5; cursor: progress; }
input.ib-ask { flex: 1 1 220px; width: auto; min-width: 180px; padding: 4px 11px; font-size: 12px; border-radius: 999px; background: var(--surface-2); }
.ib-ai-off { font-size: 12px; color: var(--faint); }
textarea.ib-box { resize: none; min-height: 44px; max-height: 220px; font-size: 13.5px; line-height: 1.45; border-radius: 10px; padding: 10px 12px; }
.ib-composer.is-note textarea.ib-box { background: var(--warn-bg); border-color: var(--warn-line); }
.ib-composer.busy textarea.ib-box {
  background: linear-gradient(90deg, var(--surface-2) 25%, var(--accent-bg) 50%, var(--surface-2) 75%);
  background-size: 400% 100%; animation: shimmer 1.4s infinite;
}
.ib-meaning {
  display: flex; gap: 10px; align-items: flex-start; justify-content: space-between;
  font-size: 12px; background: var(--accent-bg); border-radius: 8px; padding: 6px 10px; color: var(--ink-2);
}
.ib-meaning-text { display: grid; gap: 1px; min-width: 0; }
.ib-meaning-label { font-size: 9.5px; font-weight: 700; letter-spacing: .05em; text-transform: uppercase; color: var(--accent-ink); }
.ib-link { border: 0; background: none; padding: 0; color: var(--accent-ink); font-size: 12px; font-weight: 600; flex: none; }
.ib-link:hover { text-decoration: underline; }
.ib-tools { display: flex; gap: 6px; align-items: center; flex-wrap: wrap; }
.ib-tool { border: 1px solid var(--line); background: var(--surface); border-radius: 8px; padding: 5px 10px; font-size: 12px; font-weight: 500; color: var(--ink-2); }
.ib-tool:hover { border-color: var(--accent); }
.ib-hint { font-size: 11px; color: var(--faint); }
.ib-pop { border: 1px solid var(--line); border-radius: 10px; background: var(--surface-2); padding: 10px; display: grid; gap: 8px; }
.ib-pop-row { display: flex; gap: 6px; align-items: center; }
.ib-pop-row.wrap { flex-wrap: wrap; }
input.ib-pop-input { padding: 6px 10px; font-size: 13px; }
input.ib-pop-input.amt { width: 120px; font-family: var(--mono); }
.ib-pop-row .cur { font-weight: 700; color: var(--muted); }
.ib-pop-note { display: grid; gap: 2px; }
.ib-saved { display: grid; gap: 4px; max-height: 200px; overflow-y: auto; }
.ib-saved-row { display: flex; gap: 4px; align-items: stretch; }
.ib-saved-use {
  flex: 1; min-width: 0; text-align: left; border: 1px solid var(--line-soft); background: var(--surface);
  border-radius: 8px; padding: 6px 10px; display: grid; gap: 1px; font-size: 12px;
}
.ib-saved-use:hover { border-color: var(--accent); }
.ib-saved-use span { color: var(--muted); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ib-x { border: 0; background: none; color: var(--faint); font-size: 16px; padding: 0 6px; }
.ib-x:hover { color: var(--bad); }

/* Beside the thread: the item, its offers, what Vinted said, the team's notes. */
.ib-item-card { display: grid; gap: 2px; }
.ib-item-title { font-weight: 600; font-size: 13.5px; }
.ib-side { display: grid; gap: 8px; border-top: 1px solid var(--line-soft); padding-top: 12px; }
.ib-side h3 { font-family: var(--sans); font-size: 11px; font-weight: 700; letter-spacing: .05em; text-transform: uppercase; color: var(--muted); }
.ib-side-head { display: flex; justify-content: space-between; align-items: center; gap: 8px; }
.ib-deal { list-style: none; margin: 0; padding: 0; display: grid; gap: 6px; }
.ib-deal li { display: grid; grid-template-columns: minmax(0, 1fr) auto auto auto; gap: 8px; align-items: center; font-size: 12.5px; }
.ib-deal .who { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ib-deal .amt { font-family: var(--mono); font-weight: 600; }
.ib-deal .when, .ib-steps .when { font-family: var(--mono); font-size: 11px; color: var(--faint); flex: none; }
.ib-steps { list-style: none; margin: 0 0 0 4px; padding: 0 0 0 12px; display: grid; gap: 7px; border-left: 2px solid var(--line-soft); }
.ib-steps li { display: flex; justify-content: space-between; gap: 8px; font-size: 12px; color: var(--muted); position: relative; }
.ib-steps li::before { content: ""; position: absolute; left: -18px; top: 5px; width: 10px; height: 10px; border-radius: 50%; background: var(--surface); border: 2px solid var(--line); }
.ib-steps li.last { color: var(--ink); font-weight: 600; }
.ib-steps li.last::before { border-color: var(--accent); background: var(--accent); }
.note { font-size: 12px; color: var(--ink-2); background: var(--warn-bg); border-radius: var(--radius-xs); padding: 8px 10px; }

/* ---------- orders ---------- */
.ordercard {
  background: var(--surface); border: 1px solid var(--line-soft); border-radius: var(--radius);
  box-shadow: var(--shadow); padding: 14px 18px;
  display: grid; grid-template-columns: 44px minmax(0, 1fr) auto; gap: 14px; align-items: center;
}
.steps { display: flex; gap: 6px; align-items: center; flex-wrap: wrap; }
.steps span { font-size: 11px; border-radius: 999px; padding: 1px 8px; font-family: var(--mono); background: var(--surface-3); color: var(--muted); }
.steps span.done { background: var(--good-bg); color: var(--good); }
.steps span.now { background: var(--warn-bg); color: var(--warn); }
.ordernote { font-size: 12px; color: var(--warn); background: var(--warn-bg); border-radius: var(--radius-xs); padding: 8px 10px; }

/* ---------- price index ---------- */
.lookup { display: flex; gap: 8px; flex-wrap: wrap; }
.lookup input { flex: 1; min-width: 220px; border-radius: var(--radius-sm); padding: 11px 14px; font-size: 15px; }
.lookup .primary { border-radius: var(--radius-sm); padding: 11px 18px; }
.statrow { display: grid; grid-template-columns: repeat(auto-fit, minmax(140px, 1fr)); }
.statrow > div { padding: 16px 20px; }
.statrow > div + div { border-left: 1px solid var(--line-soft); }
.statrow .label { font-size: 11px; color: var(--muted); text-transform: uppercase; letter-spacing: .06em; font-weight: 600; }
.statrow .value { font-family: var(--display); font-weight: 700; font-size: 26px; letter-spacing: -0.03em; margin-top: 4px; }
.statrow .sub { font-size: 12px; color: var(--muted); }
.statrow .ceiling { background: color-mix(in srgb, var(--accent-bg) 45%, var(--surface)); }
.statrow .ceiling .value { color: var(--accent-ink); }
.spectrum { position: relative; height: 68px; margin: 10px 4px 0; }
.spectrum .track { position: absolute; left: 0; right: 0; top: 26px; height: 8px; border-radius: 4px; }
.spectrum .end { position: absolute; top: 44px; font-size: 10.5px; color: var(--faint); font-family: var(--mono); }
.spectrum .tick { position: absolute; top: 22px; width: 2px; height: 16px; }
.spectrum .tag { position: absolute; font-size: 10.5px; font-weight: 500; font-family: var(--mono); white-space: nowrap; background: none; padding: 0; border-radius: 0; }
.hist { display: flex; align-items: flex-end; gap: 5px; height: 110px; }
.hist > div { flex: 1; display: grid; gap: 5px; justify-items: center; }
.hist .n, .hist .x { font-size: 10px; color: var(--muted); font-family: var(--mono); }
.hist .bar { width: 100%; border-radius: 4px 4px 0 0; background: var(--accent-bg); }
.hist .bar.peak { background: var(--accent); }
.kv { display: grid; gap: 6px; font-size: 12px; }
.kv .row { display: flex; justify-content: space-between; gap: 10px; }
.kv .row .v { font-family: var(--mono); }

/* ---------- settings ---------- */
.tabs { display: grid; gap: 2px; align-content: start; }
.tabs a {
  display: flex; align-items: center; justify-content: space-between; gap: 8px; padding: 7px 10px;
  border-radius: var(--radius-xs); font-weight: 500; font-size: 13.5px; color: var(--ink-2);
  border: 1px solid transparent;
}
.tabs a.on { background: var(--surface); border-color: var(--line-soft); color: var(--ink); }
.plan { background: var(--surface); border-radius: 12px; padding: 18px; border: 1px solid var(--line-soft); display: grid;
  grid-template-rows: auto auto 1fr auto; }   /* the button sits on the bottom edge, level across cards */
.plan.current { border-color: var(--accent); }
.plan.top { border-color: var(--ink); }
.plan .name { font-weight: 700; font-family: var(--display); }
.plan .price { font-family: var(--display); font-weight: 700; font-size: 26px; letter-spacing: -0.03em; margin: 6px 0 10px; }
.plan .price small { font-size: 12px; color: var(--muted); font-family: var(--sans); font-weight: 500; }
.plan .feats { display: grid; gap: 5px; font-size: 13px; color: var(--ink-2); }
.plan .feats div { display: flex; gap: 8px; align-items: flex-start; }
.plan .feats div::before { content: "✓"; color: var(--accent); }
.plan .feats div > span { flex: 1; min-width: 0; }   /* every "?" in one column on the right */
.plan .feats .qhelp { margin-top: 1px; }
/* The card's own call to action only: a bare `.plan button` also caught the
   "?" beside each line and stretched it across the card. */
.plan > button { align-self: end; margin-top: 14px; width: 100%; border-radius: var(--radius-xs); padding: 8px; font-weight: 600; }
.plan .pricebox { margin: 6px 0 10px; }
.plan .pricebox .price { margin: 0; }
.plan .pricebox .billed { margin-top: 2px; }
.billing-bar { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; }
.billing-toggle .seg-b { display: inline-flex; align-items: center; gap: 6px; }
.billing-toggle .save { font: 600 11px/1 var(--mono); padding: 3px 6px; border-radius: 999px;
  background: var(--accent-bg); color: var(--accent-ink); }
.plan > button.now { background: var(--surface-3); color: var(--muted); border: 0; }
.usage { display: grid; gap: 10px; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); }
.usage > div { background: var(--surface-2); border-radius: var(--radius-sm); padding: 12px 14px; }
.usage .label { font-size: 11px; color: var(--muted); }
.usage .value { font-family: var(--mono); font-size: 20px; }
.usage .value small { color: var(--muted); font-size: 13px; }

/* ---------- onboarding ---------- */
.tasktick {
  display: flex; align-items: flex-start; gap: 12px; text-align: left; background: var(--surface);
  border: 1px solid var(--line-soft); border-radius: var(--radius); padding: 12px 14px; cursor: pointer;
  box-shadow: var(--shadow-flat), 0 3px 10px rgba(21, 32, 24, .06); width: 100%;
}
.tasktick .ring { flex: none; margin-top: 1px; }
.tasktick .ring .fill { transform-box: fill-box; transform-origin: center; transform: scale(0); transition: transform .28s cubic-bezier(.22, 1, .36, 1); }
.tasktick .ring .check { stroke-dashoffset: 1; transition: stroke-dashoffset .28s cubic-bezier(.22, 1, .36, 1) .12s; }
.tasktick .ring .idle { opacity: 1; transition: opacity .24s; }
.tasktick.done .ring .fill { transform: scale(1); }
.tasktick.done .ring .check { stroke-dashoffset: 0; }
.tasktick.done .ring .idle { opacity: 0; }
.tasktick .label {
  font-weight: 600; font-size: 14px; color: var(--ink);
  background-image: linear-gradient(currentColor, currentColor); background-repeat: no-repeat;
  background-position: 0 55%; background-size: 0% 1.5px;
  transition: background-size .38s cubic-bezier(.65, 0, .35, 1), color .3s;
}
.tasktick.done .label { color: var(--faint); background-size: 100% 1.5px; }
.tasktick .sub { font-size: 12px; color: var(--muted); }
.attention { display: grid; gap: 12px; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); align-items: center; }
.attention .item { display: flex; gap: 10px; align-items: center; }
.attention .item .dot { flex: none; }
.attention .item strong { font-weight: 600; font-size: 13px; display: block; }
.attention .item .sub { font-size: 12px; color: var(--muted); }

/* ---------- the dashboard's first view ----------
   One number the whole screen leads with (what the bots found), the day it
   came from (an hour-by-hour chart), and the funnel that shows how much was
   read to find it. Ink, like every panel, so it looks the same in both themes. */
.hero { gap: 22px; padding: 22px 26px 20px; position: relative; overflow: hidden;
  background: radial-gradient(640px 280px at 88% 0%, rgba(188, 210, 176, .2), transparent 62%),
              radial-gradient(420px 220px at 0% 100%, rgba(243, 226, 122, .07), transparent 60%), var(--night); }
.hero .top { display: flex; justify-content: space-between; align-items: center; gap: 8px 16px; flex-wrap: wrap; }
.hero .top .pulse { margin: 0; }
.hero .main { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.2fr); gap: 20px 36px; align-items: end; }
.hero .figure { font-family: var(--display); font-weight: 800; font-size: clamp(46px, 5vw, 72px); line-height: 1;
  letter-spacing: -0.045em; color: var(--accent-glow); margin-top: 6px; }
.hero .figure .roll { font-variant-numeric: normal; }
.hero .figure-label { font-size: 15px; color: var(--night-ink-2); margin-top: 10px; max-width: 44ch; line-height: 1.45; }
.hero .figure-label strong { color: var(--night-ink); font-weight: 600; }
.hero .outcomes { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 14px; }
.hero .outcome {
  display: inline-flex; align-items: center; gap: 8px; font-size: 12.5px; color: #e3ece6;
  background: var(--night-card); border: 1px solid var(--night-line); border-radius: 14px; padding: 5px 12px 5px 10px;
  max-width: 100%;
}
.hero .outcome .txt { min-width: 0; }
.hero .outcome::before { content: ""; width: 7px; height: 7px; border-radius: 50%; background: var(--night-muted); flex: none; }
.hero .outcome.dry { background: rgba(243, 226, 122, .1); border-color: rgba(243, 226, 122, .32); color: #f7eeb4; }
.hero .outcome.dry::before { background: var(--second); }
.hero .outcome.good { background: rgba(188, 210, 176, .12); border-color: rgba(188, 210, 176, .35); color: var(--accent-glow); }
.hero .outcome.good::before { background: var(--accent-lit); }
.hero .outcome.gone::before { background: #f2695f; }
.hero .outcome b { color: var(--night-ink); font-weight: 600; }
.hero .outcome button.linkish { color: var(--second); font-weight: 600; background: none; border: 0; padding: 0; font-size: inherit; margin-left: 8px; }

/* The day, hour by hour: two single-series rows on one time axis. Listings
   read is the context, in a muted sage; deals are the point, in butter. */
.activity { position: relative; display: grid; gap: 6px; outline: none; }
.activity .row-head { display: flex; justify-content: space-between; align-items: baseline; gap: 8px; font-size: 11px; color: var(--night-ink-2); }
.activity .row-head .mono { color: var(--night-muted); }
/* The padding is headroom: the peak's label sits in it, clear of the heading above. */
.activity .bars { display: grid; grid-template-columns: repeat(24, minmax(0, 1fr)); grid-template-rows: 1fr; column-gap: 3px;
  align-items: end; border-bottom: 1px solid var(--night-line); position: relative; padding-top: 16px; }
.activity .bars.read { height: 100px; }
.activity .bars.deals { height: 58px; }
.activity .bars i { display: block; width: 100%; max-width: 22px; justify-self: center; border-radius: 4px 4px 0 0;
  min-height: 0; transition: height .6s cubic-bezier(.22, 1, .36, 1), background .15s, opacity .15s; }
.activity .bars.read i { background: rgba(143, 174, 134, .55); }
.activity .bars.deals i { background: var(--second); }
.activity .bars i.partial { opacity: .6; }
/* An hour the feed read nothing in: a stub on the baseline, so the gap reads as "off", not as "no data drawn". */
.activity .bars i.off { height: 2px !important; background: var(--night-line); border-radius: 1px; }
.activity .bars i.on { background: var(--accent-glow); }
.activity .bars.deals i.on { background: #fff4b0; }
.activity .peak { position: absolute; top: 16px; transform: translate(-50%, -100%); font-family: var(--mono); font-size: 10.5px;
  color: var(--night-ink-2); pointer-events: none; white-space: nowrap; padding-bottom: 2px; }
.activity .axis { display: grid; grid-template-columns: repeat(24, minmax(0, 1fr)); column-gap: 3px; font-family: var(--mono);
  font-size: 10.5px; color: var(--night-muted); height: 14px; }
.activity .axis span { white-space: nowrap; }
.activity .axis span.end { justify-self: end; grid-column: 24; }
.activity .hit { position: absolute; top: 0; bottom: 14px; left: 0; right: 0; cursor: crosshair; }
.activity .tip {
  position: absolute; z-index: 3; pointer-events: none; min-width: 168px; transform: translateX(-50%);
  background: #0f1714; border: 1px solid var(--night-line); border-radius: var(--radius-xs); padding: 8px 10px;
  box-shadow: 0 12px 28px -12px rgba(0, 0, 0, .6); font-size: 12px; color: var(--night-ink-2); display: grid; gap: 3px;
}
.activity .tip .when { font-family: var(--mono); font-size: 11px; color: var(--night-muted); }
.activity .tip b { color: var(--night-ink); font-weight: 600; font-variant-numeric: tabular-nums; }
.activity .tip .key { display: inline-block; width: 10px; height: 2px; border-radius: 1px; vertical-align: middle; margin-right: 6px; }
.activity:focus-visible { outline: 2px solid var(--accent); outline-offset: 6px; border-radius: 6px; }
.sr-only { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }

/* How much was read to find them: five numbers, each a smaller slice of the one before. */
.hero .flow { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); border-top: 1px solid var(--night-line); padding-top: 16px; }
.hero .flow-step { position: relative; padding: 0 16px; min-width: 0; }
.hero .flow-step:first-child { padding-left: 0; }
.hero .flow-step + .flow-step { border-left: 1px solid var(--night-line); }
.hero .flow-step + .flow-step::before {
  content: ""; position: absolute; left: -5px; top: 14px; width: 8px; height: 8px; background: var(--night);
  border-top: 1px solid var(--night-line); border-right: 1px solid var(--night-line); transform: rotate(45deg);
}
.hero .flow-step .k { font-size: 11.5px; color: var(--night-ink-2); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.hero .flow-step .n { font-family: var(--display); font-weight: 700; font-size: 26px; letter-spacing: -0.03em; line-height: 1.15; color: var(--night-ink); }
.hero .flow-step .s { font-size: 11px; color: var(--night-muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.hero .flow-step.lead .n { color: var(--accent-glow); }
.hero .flow-step.last .n { color: var(--second); }
@media (max-width: 1100px) {
  .hero .main { grid-template-columns: minmax(0, 1fr); }
}
@media (max-width: 820px) {
  .hero { padding: 18px 16px 16px; }
  .hero .flow { grid-template-columns: repeat(3, minmax(0, 1fr)); row-gap: 14px; }
  .hero .flow-step:nth-child(4) { border-left: 0; padding-left: 0; }
  .hero .flow-step:nth-child(4)::before { display: none; }
}
@media (max-width: 520px) {
  .hero .flow { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .hero .flow-step { border-left: 0 !important; padding-left: 0; }
  .hero .flow-step::before { display: none; }
  .hero .flow-step .n { font-size: 22px; }
  .activity .bars { column-gap: 2px; }
}

/* The best of it, as the listings themselves. */
.finds { display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: 14px; padding: 16px 18px; }
.find {
  display: grid; grid-template-rows: auto 1fr; border: 1px solid var(--line-soft); border-radius: var(--radius-sm);
  overflow: hidden; background: var(--surface); color: inherit; min-width: 0;
  transition: transform .2s cubic-bezier(.22, 1, .36, 1), box-shadow .2s, border-color .2s;
}
.find:hover { text-decoration: none; transform: translateY(-2px); box-shadow: var(--shadow); border-color: var(--line); }
.find .ph { position: relative; height: 156px; background: repeating-linear-gradient(135deg, var(--surface-3) 0 6px, var(--line-soft) 6px 12px); }
.find .ph img { width: 100%; height: 100%; object-fit: cover; display: block; }
.find .gain {
  position: absolute; left: 10px; bottom: 10px; font-family: var(--display); font-weight: 700; font-size: 17px;
  letter-spacing: -0.02em; background: var(--second); color: #2b2400; border-radius: 8px; padding: 2px 9px;
  box-shadow: 0 6px 16px -6px rgba(0, 0, 0, .45);
}
.find .rank { position: absolute; left: 10px; top: 10px; font-family: var(--mono); font-size: 11px; color: #fff;
  background: rgba(15, 23, 20, .62); backdrop-filter: blur(4px); border-radius: 6px; padding: 1px 7px; }
.find .meta { padding: 10px 12px 12px; display: grid; gap: 4px; align-content: start; min-width: 0; }
.find .by { display: flex; justify-content: space-between; gap: 8px; font-size: 11px; color: var(--muted); }
.find .by span:first-child { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.find .t { font-weight: 600; font-size: 13.5px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.find .money { display: flex; gap: 6px; align-items: baseline; font-size: 12.5px; color: var(--ink-2); flex-wrap: wrap; }
.find .money .mono { color: var(--ink); }
.find .st { display: flex; gap: 6px; align-items: center; font-size: 12px; color: var(--muted); min-width: 0; }
.find .st span:last-child { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.find .st .dot { width: 7px; height: 7px; border-radius: 50%; flex: none; background: var(--faint); }
.find .st.would .dot { background: var(--second-ink); }
.find .st.bought .dot { background: var(--good); }
.find .st.gone .dot { background: var(--bad); }
.find .st.asked .dot { background: var(--accent); }
@media (prefers-reduced-motion: reduce) {
  html:not(.pc-motion-full) .activity .bars i { transition: none; }
  html:not(.pc-motion-full) .find { transition: none; }
}

/* ---------- overlays ---------- */
.scrim { position: fixed; inset: 0; background: rgba(21, 32, 24, .35); z-index: 50; display: grid; }
.scrim.top { align-content: start; justify-items: center; padding-top: 12vh; }
.scrim.center { place-items: center; padding: 24px; background: rgba(21, 32, 24, .45); z-index: 60; }
.cmdk { width: min(640px, 92vw); background: var(--surface); border-radius: var(--radius); box-shadow: var(--shadow-pop); overflow: hidden; }
.cmdk .search { display: flex; gap: 10px; align-items: center; padding: 14px 16px; border-bottom: 1px solid var(--line-soft); color: var(--muted); }
.cmdk .search input { border: 0; outline: 0; font-size: 15px; background: transparent; padding: 0; }
.cmdk .results { padding: 8px; display: grid; gap: 8px; max-height: 60vh; overflow: auto; }
.cmdk .group > .label { font-size: 11px; color: var(--muted); text-transform: uppercase; letter-spacing: .08em; padding: 6px 10px; font-weight: 600; }
.cmdk .hit {
  display: flex; justify-content: space-between; gap: 10px; align-items: center; padding: 8px 10px;
  border-radius: var(--radius-xs); cursor: pointer; width: 100%; background: none; border: 0; text-align: left; font-size: 14px; color: var(--ink);
}
.cmdk .hit:hover, .cmdk .hit.on { background: var(--surface-2); }
.cmdk .hit .what { display: flex; gap: 10px; align-items: center; }
.cmdk .hit .what::before { content: ""; width: 6px; height: 6px; border-radius: 50%; background: var(--accent); flex: none; }
.cmdk .hit .hint { font-size: 12px; color: var(--muted); font-family: var(--mono); }
.cmdk .paste { background: var(--accent-bg); border-radius: var(--radius-sm); padding: 10px 12px; display: flex; justify-content: space-between; gap: 10px; align-items: center; font-size: 13px; color: var(--accent-ink); }
.modal { width: min(520px, 100%); background: var(--surface); border-radius: 16px; box-shadow: var(--shadow-pop); overflow: hidden; }
.modal > header { padding: 18px 22px; border-bottom: 1px solid var(--line-soft); }
.modal > header h2 { font-weight: 700; font-size: 18px; letter-spacing: -0.01em; }
.modal > .body { padding: 18px 22px; display: grid; gap: 10px; }
.modal > footer { padding: 14px 22px; border-top: 1px solid var(--line-soft); display: flex; justify-content: flex-end; gap: 8px; }

/* ---------- toasts, empties ---------- */
/* Toasts are pouncio-mark.css's (top right, one stack, the mark in each). */
.empty { padding: 28px 20px; text-align: center; color: var(--muted); display: grid; gap: 4px; }
.empty strong { color: var(--ink); font-weight: 600; }
/* An empty feed: the mark napping above the words. */
.empty > pouncio-mark { justify-self: center; margin-bottom: 8px; }
.skeleton { border-radius: var(--radius-xs); background: linear-gradient(90deg, var(--surface-2) 25%, var(--surface-3) 50%, var(--surface-2) 75%); background-size: 400% 100%; animation: shimmer 1.4s infinite; }
@keyframes shimmer { from { background-position: 100% 0; } to { background-position: -100% 0; } }

/* ---------- narrow screens ---------- */
@media (max-width: 1100px) {
  .split, .split.wide, .split.left, .split.rail { grid-template-columns: minmax(0, 1fr); }
  .detail { position: static; }
  /* One column: the panes stack, and the page scrolls as a whole again. */
  .view.fill { min-height: auto; grid-template-rows: none; align-content: start; }
  /* ...which it cannot while main keeps the one-screen height of a fill view:
     the stacked panes were squeezed into it and the thread shrank to nothing. */
  main.fill { height: auto; overflow: visible; }
  .inbox { grid-template-columns: minmax(0, 1fr); grid-template-rows: none; height: auto; min-height: auto; }
  .inbox > .list { border-right: 0; border-bottom: 1px solid var(--line-soft); }
  .inbox > .list > .threads { max-height: 40vh; }
  .inbox > .conv > .msgs { max-height: 60vh; min-height: 240px; }
  .inbox > .aside { border-left: 0; border-top: 1px solid var(--line-soft); }
}
@media (max-width: 820px) {
  :root { --sidebar: 0px; }
  #shell, #shell.collapsed { grid-template-columns: minmax(0, 1fr); }
  .sidebar {
    position: fixed; inset: 0 auto 0 0; width: 260px; z-index: 40; transform: translateX(-100%);
    transition: transform .2s ease; box-shadow: var(--shadow-pop);
  }
  #shell.nav-open .sidebar { transform: none; }
  #shell.nav-open #scrim { display: block; }
  /* The drawer is always the full rail; collapsing is a desktop idea. */
  #shell.collapsed .brandtext { display: grid; }
  #shell.collapsed .rail-item .label, #shell.collapsed .killcard .state { display: flex; }
  #shell.collapsed .killcard .kill .label { display: inline; }
  #shell.collapsed .rail-item .count:not([hidden]) { display: inline; }
  #shell.collapsed .whoami > div { display: block; }
  #shell.collapsed .rail-item { justify-content: flex-start; padding-inline: 10px; }
  #shell.collapsed .rail-label { height: auto; margin: 0; background: none; font-size: 10.5px; padding: 4px 10px 5px; }
  #shell.collapsed .rail-item::after { display: none; }
  #shell.collapsed .killcard { padding: 6px 6px 6px 10px; justify-content: space-between; background: var(--surface-2); border-color: var(--line-soft); }
  #shell.collapsed .whoami { flex-direction: row; }
  .railtoggle { display: none; }
  .view { padding: 16px; }
  .topbar { padding: 10px 16px; gap: 10px; }
  .searchbtn .label { display: none; }
  .searchbtn kbd { display: none; }
  /* The account count is the first thing to go: the bell and the live dot say
     the same thing in the space a phone actually has. */
  #livetext { display: none; }
  .crumb { font-size: 14px; }
  .ordercard { grid-template-columns: minmax(0, 1fr); }
}
#scrim { display: none; position: fixed; inset: 0; z-index: 39; background: rgba(21, 32, 24, .35); }
.navtoggle { display: none; background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius-xs); padding: 6px 9px; }
@media (max-width: 820px) { .navtoggle { display: block; } }

/* ---------- bots page ---------- */
/* One card per bot, read top to bottom as a sentence: who it is, what it does,
   how far its last day got, and the way into its feed. */
.bots-sum { display: flex; justify-content: space-between; align-items: flex-end; gap: 16px; flex-wrap: wrap; }
.bots-sum h1 { font-size: 26px; font-weight: 700; line-height: 1.15; }
.bots-sum p { margin: 4px 0 0; font-size: 13px; }
.bcgrid { display: grid; gap: 16px; grid-template-columns: repeat(auto-fill, minmax(330px, 1fr)); align-items: stretch; }
.bcard {
  position: relative; display: grid; gap: 14px; align-content: start; padding: 18px 18px 14px;
  background: var(--surface); border: 1px solid var(--line-soft); border-radius: var(--radius);
  box-shadow: var(--shadow-flat); cursor: pointer; transition: border-color .15s, box-shadow .15s, transform .15s;
}
.bcard::before {
  content: ""; position: absolute; left: -1px; top: 18px; bottom: 18px; width: 3px; border-radius: 0 3px 3px 0;
  background: var(--good);
}
.bcard:hover { border-color: var(--line); box-shadow: var(--shadow); transform: translateY(-1px); }
.bcard:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.bcard.off { background: var(--surface-2); box-shadow: none; }
.bcard.off::before { background: var(--line); }
.bcard.off .bc-name { color: var(--ink-2); }
.bcard.off .bc-funnel { opacity: .55; }
.bcard.starved::before { background: var(--bad); }
.bc-head { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; gap: 12px; align-items: start; }
.bc-head pouncio-mark { margin-top: 2px; }
.bc-title { min-width: 0; }
.bc-name {
  font-family: var(--display); font-size: 18px; font-weight: 650; letter-spacing: -0.015em; line-height: 1.2;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.bc-hunt { font-size: 12.5px; color: var(--muted); margin-top: 2px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.bc-rule { display: flex; flex-wrap: wrap; gap: 6px 8px; align-items: center; font-size: 13px; color: var(--ink-2); }
.bc-rule > span:first-child { margin-right: 2px; }
.bc-tag {
  font-size: 11px; font-weight: 600; padding: 2px 8px; border-radius: 999px;
  background: var(--surface-3); color: var(--ink-2); white-space: nowrap;
}
.bc-tag.live { background: var(--accent-bg); color: var(--accent-ink); }
.bc-tag.warn { background: var(--warn-bg); color: var(--warn); }
.bc-funnel { display: grid; grid-template-columns: repeat(4, 1fr); gap: 2px; padding: 12px 0 2px; border-top: 1px solid var(--line-faint); }
.bc-step { display: grid; gap: 1px; padding-right: 8px; }
.bc-step .n { font-family: var(--mono); font-size: 20px; letter-spacing: -0.03em; line-height: 1.15; color: var(--ink); }
.bc-step .k { font-size: 11px; color: var(--muted); white-space: nowrap; }
.bc-step .bar { height: 3px; border-radius: 2px; background: var(--surface-3); margin-top: 6px; overflow: hidden; }
.bc-step .bar i { display: block; height: 100%; background: var(--accent); border-radius: 2px; min-width: 0; }
.bc-step.zero .n { color: var(--faint); }
.bc-warn { font-size: 12px; color: var(--bad); background: var(--bad-bg); border-radius: var(--radius-xs); padding: 7px 10px; }
.bc-foot { display: flex; justify-content: space-between; align-items: center; gap: 10px; font-size: 12px; }
.bc-status { color: var(--muted); display: inline-flex; align-items: center; gap: 7px; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.bc-status::before { content: ""; width: 7px; height: 7px; border-radius: 50%; background: var(--faint); flex: none; }
.bc-status.on { color: var(--ink-2); }
.bc-status.on::before { background: var(--good); box-shadow: 0 0 0 3px var(--good-bg); }
.bc-feed {
  border: 0; background: none; padding: 4px 0; font-size: 12.5px; font-weight: 600; color: var(--accent-ink); white-space: nowrap;
}
.bc-feed:hover { text-decoration: underline; }
.bc-add {
  display: flex; gap: 14px; align-items: center; text-align: left; padding: 18px; min-height: 120px;
  border: 1.5px dashed var(--line); border-radius: var(--radius); background: transparent; color: inherit;
  transition: border-color .15s, background .15s;
}
.bc-add:hover { border-color: var(--accent); background: var(--accent-bg); }
.bc-add .plus {
  width: 40px; height: 40px; flex: none; border-radius: 12px; display: grid; place-items: center;
  font-size: 22px; font-weight: 600; background: var(--accent-bg); color: var(--accent-ink);
}
.bc-add strong { display: block; font-family: var(--display); font-size: 16px; }
.bc-add .sub { display: block; font-size: 12.5px; color: var(--muted); margin-top: 2px; max-width: 34ch; }
@media (max-width: 560px) {
  .bcgrid { grid-template-columns: minmax(0, 1fr); }
  .bots-sum h1 { font-size: 21px; }
}

/* ---------- feed: picking a bot ---------- */
.botpick { display: flex; gap: 4px; overflow-x: auto; scrollbar-width: none; padding: 4px 4px 0; margin: -4px -4px 0;
  border-bottom: 1px solid var(--line-soft); }
.botpick::-webkit-scrollbar { display: none; }
.bp {
  flex: none; display: inline-flex; align-items: center; gap: 8px; padding: 8px 12px 10px; margin-bottom: -1px;
  border: 0; border-bottom: 2px solid transparent; background: none; font-size: 13.5px; font-weight: 500;
  color: var(--muted); white-space: nowrap; border-radius: 8px 8px 0 0;
}
.bp:hover { color: var(--ink); background: var(--surface-2); }
.bp.on { color: var(--ink); border-bottom-color: var(--ink); font-weight: 600; }
.bp-dot { width: 7px; height: 7px; border-radius: 50%; background: var(--line); flex: none; }
.bp-dot.run { background: var(--good); box-shadow: 0 0 0 3px var(--good-bg); }
.bp-name { max-width: 22ch; overflow: hidden; text-overflow: ellipsis; }

.bothead {
  display: flex; justify-content: space-between; align-items: center; gap: 16px 24px; flex-wrap: wrap;
  padding: 16px 18px; border-radius: var(--radius); background: var(--surface); border: 1px solid var(--line-soft);
  box-shadow: var(--shadow-flat);
}
.bothead.off { background: var(--surface-2); }
.bh-who { display: flex; gap: 14px; align-items: center; min-width: 0; flex: 1 1 320px; }
.bh-who h2 { font-size: 20px; font-weight: 700; line-height: 1.2; }
.bh-rule { display: flex; flex-wrap: wrap; gap: 6px 8px; align-items: center; font-size: 13px; color: var(--ink-2); margin-top: 3px; }
.bh-side { display: flex; align-items: center; gap: 18px; flex-wrap: wrap; }
.bh-steps { display: flex; align-items: baseline; gap: 10px; }
.bh-step { display: grid; justify-items: start; }
.bh-step .n { font-family: var(--mono); font-size: 19px; letter-spacing: -0.03em; line-height: 1.1; }
.bh-step .k { font-size: 11px; color: var(--muted); white-space: nowrap; }
.bh-step.zero .n { color: var(--faint); }
.bh-steps .arr { color: var(--faint); font-size: 16px; align-self: center; }
.bh-when { align-self: flex-start; font-family: var(--mono); font-size: 10px; color: var(--faint); border: 1px solid var(--line-soft); border-radius: 4px; padding: 0 4px; }

/* The one filter: a segmented control. */
.seg { display: inline-flex; gap: 2px; padding: 3px; border-radius: 10px; background: var(--surface-3); overflow-x: auto; scrollbar-width: none; max-width: 100%; }
.seg::-webkit-scrollbar { display: none; }
.seg-b { flex: none; border: 0; background: none; padding: 5px 12px; border-radius: 7px; font-size: 13px; font-weight: 500; color: var(--ink-2); white-space: nowrap; }
.seg-b:hover { color: var(--ink); }
.seg-b.on { background: var(--surface); color: var(--ink); font-weight: 600; box-shadow: 0 1px 2px rgba(21, 32, 24, .08), 0 0 0 1px var(--line-soft); }

/* ---------- feed: the item preview ---------- */
.detail.pv { display: flex; flex-direction: column; }
/* The preview fits the window: the photo shrinks with it, only the words scroll,
   and the buttons are always on screen. */
.feeddetail .detail.pv { height: 100%; }
.pv-media {
  position: relative; height: min(340px, 42%); min-height: 120px; overflow: hidden; flex: none; isolation: isolate;
  background: var(--surface-3);
}
.pv-media::before {
  content: ""; position: absolute; inset: -30px; z-index: -1;
  background: var(--img) center / cover no-repeat; filter: blur(28px) saturate(1.1); opacity: .55;
}
.pv-media.none { height: 120px; background: repeating-linear-gradient(135deg, var(--surface-3) 0 8px, var(--surface-2) 8px 16px); }
.pv-nophoto { position: absolute; inset: 0; display: grid; place-items: center; font-family: var(--mono); font-size: 12px; color: var(--muted); }
.pv-img { width: 100%; height: 100%; object-fit: contain; display: block; }
.pv-badges { position: absolute; top: 12px; left: 12px; display: flex; gap: 6px; z-index: 2; }
.pv-badges .pill { box-shadow: 0 2px 8px rgba(0, 0, 0, .15); background: var(--surface); }
.pv-badges .pill.buy { background: var(--accent-bg); }
.pv-badges .pill.warn, .pv-badges .pill.offer { background: var(--warn-bg); }
.pv-arrow {
  position: absolute; top: 50%; translate: 0 -50%; z-index: 2; width: 34px; height: 34px; border-radius: 50%;
  border: 0; display: grid; place-items: center; font-size: 22px; line-height: 1; padding-bottom: 3px;
  background: color-mix(in srgb, var(--surface) 90%, transparent); color: var(--ink);
  box-shadow: 0 2px 10px rgba(0, 0, 0, .18); opacity: 0; transition: opacity .15s;
}
.pv-arrow.prev { left: 10px; }
.pv-arrow.next { right: 10px; }
.pv-media:hover .pv-arrow, .pv-arrow:focus-visible { opacity: 1; }
@media (hover: none) { .pv-arrow { opacity: .9; } }
.pv-dots { position: absolute; bottom: 10px; left: 50%; translate: -50% 0; display: flex; gap: 5px; z-index: 2;
  padding: 4px 6px; border-radius: 999px; background: rgba(0, 0, 0, .28); }
.pv-dots button { width: 6px; height: 6px; padding: 0; border: 0; border-radius: 50%; background: rgba(255, 255, 255, .55); }
.pv-dots button.on { background: #fff; width: 14px; border-radius: 3px; }
.pv-count { position: absolute; bottom: 10px; right: 12px; z-index: 2; font-family: var(--mono); font-size: 11px;
  color: #fff; background: rgba(0, 0, 0, .35); padding: 1px 7px; border-radius: 999px; }
.sheetclose {
  display: none; position: absolute; top: 10px; right: 10px; z-index: 3; width: 34px; height: 34px; border-radius: 50%;
  border: 0; background: color-mix(in srgb, var(--surface) 90%, transparent); font-size: 20px; line-height: 1; box-shadow: var(--shadow-pop);
}

.pv-body { padding: 16px 20px 12px; display: grid; gap: 16px; align-content: start; flex: 1 1 auto; min-height: 0; overflow-y: auto; scrollbar-width: thin; scrollbar-color: var(--line) transparent; }
.pv-head .dtitle { font-family: var(--display); font-size: 20px; font-weight: 700; line-height: 1.25; letter-spacing: -0.015em; margin: 0; }
.pv-sub { display: flex; justify-content: space-between; gap: 12px; font-size: 12.5px; color: var(--muted); margin-top: 4px; }

.pv-econ { display: grid; gap: 8px; padding: 14px; border-radius: var(--radius-sm); background: var(--surface-2); }
.pv-price { display: flex; justify-content: space-between; align-items: flex-start; gap: 12px; }
.pv-ask { font-family: var(--mono); font-size: 28px; letter-spacing: -0.04em; line-height: 1.05; }
.pv-profit { display: grid; justify-items: end; text-align: right; }
.pv-profit .v { font-family: var(--mono); font-size: 20px; font-weight: 600; letter-spacing: -0.03em; color: var(--good); line-height: 1.1; }
.pv-profit .k { font-size: 11.5px; color: var(--muted); }
.pv-profit.loss .v { color: var(--bad); }
.pv-bar { display: flex; height: 8px; border-radius: 4px; overflow: hidden; background: var(--surface-3); margin-top: 4px; }
.pv-bar i { display: block; height: 100%; }
.pv-bar .cost { background: var(--ink-2); opacity: .35; }
.pv-bar .gap { background: var(--good); }
.pv-bar.loss .gap { background: var(--bad); }
.pv-scale { display: flex; justify-content: space-between; font-size: 12px; color: var(--muted); }
.pv-scale b { font-family: var(--mono); font-weight: 600; color: var(--ink-2); }

.pv-why h3 { font-family: var(--sans); font-size: 12px; font-weight: 600; letter-spacing: .06em; text-transform: uppercase; color: var(--muted); margin: 0 0 10px; }
.pv-reason { margin: 0 0 10px; font-size: 13.5px; font-weight: 500; }
.pv-why ol { list-style: none; margin: 0; padding: 0; display: grid; counter-reset: step; }
.pv-why li {
  counter-increment: step; position: relative; padding: 0 0 12px 30px; font-size: 13px; line-height: 1.45; color: var(--ink-2);
}
.pv-why li::before {
  content: counter(step); position: absolute; left: 0; top: 0; width: 20px; height: 20px; border-radius: 50%;
  display: grid; place-items: center; font-family: var(--mono); font-size: 10.5px; font-weight: 600;
  background: var(--accent-bg); color: var(--accent-ink);
}
.pv-why li:not(:last-child)::after {
  content: ""; position: absolute; left: 9.5px; top: 22px; bottom: 2px; width: 1px; background: var(--line);
}
.detail.pv.skipped .pv-why li::before { background: var(--surface-3); color: var(--muted); }

.pv-actions {
  flex: none; z-index: 2; display: grid; gap: 6px; padding: 12px 20px 14px;
  background: color-mix(in srgb, var(--surface) 94%, transparent); backdrop-filter: blur(8px);
  border-top: 1px solid var(--line-soft);
}
.pv-actions .row { display: flex; gap: 8px; align-items: center; }
.pv-actions .pv-buy { flex: 1 1 auto; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.pv-actions .row > .ghost { flex: none; }
.pv-actions .pv-vinted { text-decoration: none; white-space: nowrap; }
.pv-actions .pv-note { justify-content: space-between; font-size: 12px; }
.linkish { border: 0; background: none; padding: 0; font-size: 12px; font-weight: 600; color: var(--accent-ink); }
.linkish:hover { text-decoration: underline; }
.pv-empty { display: grid; justify-items: center; gap: 6px; text-align: center; padding: 64px 24px; margin: auto 0; }
.pv-empty strong { font-family: var(--display); font-size: 17px; margin-top: 8px; }
.pv-keys { display: inline-flex; gap: 4px; align-items: center; font-size: 12px; color: var(--muted); margin-top: 8px; }
.pv-keys kbd { font-family: var(--mono); font-size: 11px; border: 1px solid var(--line); border-bottom-width: 2px; border-radius: 4px; padding: 0 5px; background: var(--surface); }
@media (max-width: 1100px) { .feeddetail { height: auto; } .feeddetail .detail.pv { height: 100%; } .pv-media { height: clamp(200px, 40vh, 360px); } .bh-side { width: 100%; justify-content: space-between; } }

/* ---- plan locks ------------------------------------------------------------
   A tag beside whatever the plan does not include, naming the plan that does.
   Quiet on purpose: it says where the thing lives, it does not nag. */
.locktag {
  display: inline-flex; align-items: center; gap: 4px; flex: none;
  font: 600 10.5px/1 var(--mono); letter-spacing: .02em; text-transform: uppercase;
  color: var(--accent-ink); background: var(--accent-bg); border-radius: 999px; padding: 3px 7px;
  box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--accent) 30%, transparent);
}
.rail-item .locktag { margin-left: auto; }
#shell.collapsed .rail-item .locktag { display: none; }
.upsell { max-width: 640px; }
.upsell h2 { margin: 0; font-family: var(--display); font-size: 22px; }
.upsell .eyebrow { display: flex; align-items: center; gap: 6px; font-size: 12px; color: var(--muted); }
.upsell .ticks { margin: 0; padding-left: 18px; display: grid; gap: 6px; }
.lockline { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; font-size: 12.5px; color: var(--muted); }
.lockline .linkbtn { font-size: 12.5px; }
.vrow.locked { opacity: .55; }
.vrow.locked input[type=checkbox] { cursor: not-allowed; }
.choice.locked { opacity: .6; }
.choice.locked strong { display: flex; align-items: center; gap: 6px; }
/* "Plus would have bought this": the free tier's reason to pay, on the card itself. */
.wouldbuy {
  display: flex; align-items: center; gap: 8px; flex-wrap: wrap;
  padding: 7px 10px; border-radius: var(--radius-xs); font-size: 12.5px;
  background: var(--second-bg); color: var(--second-ink);
}
.wouldbuy strong { font-weight: 600; }
.wouldbuy .linkbtn { color: inherit; text-decoration: underline; }

/* ---------- settings: where Pouncio tells you ---------- */
.reach-list { display: grid; }
.reach-row {
  display: grid; grid-template-columns: auto minmax(0, 1fr) auto auto; gap: 14px; align-items: center;
  width: 100%; padding: 14px 20px; border: 0; background: none; text-align: left; color: inherit;
}
.reach-row + .reach-row { border-top: 1px solid var(--line-soft); }
button.reach-row:hover { background: var(--surface-2); }
button.reach-row:focus-visible { outline: 2px solid var(--accent); outline-offset: -2px; }
.reach-ico { display: inline-grid; place-items: center; border-radius: 10px; flex: none; }
.reach-text { display: grid; gap: 2px; min-width: 0; }
.reach-text strong { font-weight: 600; font-size: 14px; }
.reach-text .sub { font-size: 12px; color: var(--muted); overflow-wrap: anywhere; }
.reach-cta { font-size: 12px; font-weight: 600; color: var(--accent-ink); background: var(--accent-bg); border-radius: 999px; padding: 3px 10px; white-space: nowrap; }
.reach-chev { color: var(--faint); font-size: 20px; line-height: 1; }
.reach-step { display: grid; gap: 12px; }
.reach-step p { margin: 0; }
.reach-how { margin: 0; padding-left: 20px; display: grid; gap: 8px; }
.reach-how li::marker { color: var(--accent-ink); font-weight: 700; }
.reach-ok, .reach-warn { border-radius: var(--radius-xs); padding: 12px 14px; }
.reach-ok { background: var(--good-bg); color: var(--good); }
.reach-warn { background: var(--warn-bg); color: var(--warn); }
.reach-wait { display: flex; gap: 10px; align-items: center; color: var(--muted); font-size: 13px; }
.reach-code { margin: 0; padding: 12px; border-radius: var(--radius-xs); background: var(--surface-2); font-family: var(--mono); font-size: 12px; overflow-x: auto; }
@media (max-width: 520px) {
  .reach-row { grid-template-columns: auto minmax(0, 1fr) auto; }
  .reach-row .reach-chev { display: none; }
}

/* ---------- groups of accounts: several accounts buying for one bot ---------- */
.card > header h2.withlock { display: flex; align-items: center; gap: 8px; }
.grouplist { display: grid; }
.grouprow {
  display: grid; grid-template-columns: minmax(150px, 1.1fr) minmax(0, 2fr) auto auto;
  gap: 14px; align-items: center; padding: 12px 0;
}
.grouprow + .grouprow { border-top: 1px solid var(--line-soft); }
.groupmembers { display: flex; gap: 6px; flex-wrap: wrap; min-width: 0; }
.member-chip {
  display: inline-flex; align-items: center; gap: 6px; font-size: 12px; padding: 2px 9px 2px 2px;
  border-radius: 999px; background: var(--surface-2); border: 1px solid var(--line-faint);
}
.groupactions { display: flex; gap: 6px; }
.memberlist { display: grid; gap: 6px; }
.memberlist .member {
  display: flex; align-items: center; gap: 10px; flex-wrap: wrap;
  padding: 8px 10px; border-radius: var(--radius-xs); background: var(--surface-2);
}
.stepper { display: inline-flex; align-items: center; gap: 10px; }
.stepper .mono { min-width: 2ch; text-align: center; font-size: 15px; }
@media (max-width: 720px) {
  .grouprow { grid-template-columns: minmax(0, 1fr) auto; }
  .grouprow .groupmembers { grid-column: 1 / -1; order: 3; }
}

/* ---------- orders: one card per item, every account's try inside ---------- */
.ordertitle { font-weight: 600; color: inherit; text-decoration: none; overflow-wrap: anywhere; }
a.ordertitle:hover { text-decoration: underline; }
.orderhead { font-size: 13px; color: var(--ink-2); }
.ordercard img.thumb { width: 44px; height: 44px; }
.attempts summary {
  cursor: pointer; font-size: 12px; font-weight: 500; color: var(--accent-ink); width: fit-content;
  list-style: none; display: flex; gap: 6px; align-items: center;
}
.attempts summary::-webkit-details-marker { display: none; }
.attempts summary::before { content: "▸"; font-size: 10px; transition: transform .15s ease; }
.attempts[open] summary::before { transform: rotate(90deg); }
.attempts ol { list-style: none; margin: 8px 0 0; padding: 0; display: grid; gap: 4px; }
.attempt {
  display: grid; grid-template-columns: auto auto minmax(0, 1fr) auto; gap: 8px; align-items: center;
  font-size: 12.5px; padding: 6px 8px; border-radius: var(--radius-xs); background: var(--surface-2);
}
.attempt .who { font-weight: 600; }
.attempt .what { color: var(--muted); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.attempt.paid .what, .attempt.shipped .what, .attempt.delivered .what { color: var(--good); }
.attempt.payment_unknown .what { color: var(--bad); }
.attempt.needs_3ds .what, .attempt.reserved .what { color: var(--warn); }
@media (max-width: 560px) {
  .ordercard { grid-template-columns: 44px minmax(0, 1fr); align-items: start; }
  .ordercard > :last-child { grid-column: 2; justify-items: start !important; }
  .attempt { grid-template-columns: auto minmax(0, 1fr) auto; }
  .attempt .when { grid-row: 1; grid-column: 3; }
  .attempt .what { grid-column: 1 / -1; white-space: normal; }
}

/* ---------- the connect page (connect.html, js/connect.js) ----------
   A hosted Chrome streamed as pictures, so the person signs in on Vinted's own
   page. Framed as a browser window with Vinted's real address in the bar: what
   they are typing into, and whose page it is, has to be obvious at a glance. */
.cx { min-height: 100vh; }
.cx-top {
  position: sticky; top: 0; z-index: 5; display: flex; align-items: center; gap: 14px;
  padding: 11px 24px; border-bottom: 1px solid var(--line-soft);
  background: color-mix(in srgb, var(--bg) 90%, transparent); backdrop-filter: blur(8px);
}
.cx-top .brandhead { padding: 0; }
.cx-top .pc-tile { width: 30px; height: 30px; border-radius: 9px; }
.cx-top .brandhead .word { font-size: 18px; }
.cx-crumb { display: flex; align-items: center; gap: 14px; color: var(--muted); font-weight: 500; white-space: nowrap; }
.cx-crumb::before { content: ""; width: 1px; height: 18px; background: var(--line); }
.cx-back { margin-left: auto; gap: 6px; }
.cx-back:hover { text-decoration: none; }

/* The stage is sized from the viewport's height, so the whole Vinted page fits
   on screen without scrolling this one: 16:10 is the hosted browser's shape. */
.cx-main {
  display: flex; gap: 28px; align-items: flex-start; justify-content: center;
  padding: 22px 24px 32px; max-width: 1680px; margin: 0 auto;
}
.cx-stage {
  flex: 0 1 auto; min-width: 0; display: grid; gap: 16px;
  width: clamp(560px, calc((100vh - 256px) * 1.6), 1280px);
}
.cx-side { flex: 0 0 300px; display: grid; gap: 14px; position: sticky; top: 76px; }

.cx-head { display: flex; align-items: flex-end; justify-content: space-between; gap: 12px 20px; flex-wrap: wrap; }
.cx-titles { flex: 1 1 320px; min-width: 0; }
.cx-titles h1 { font-size: 24px; font-weight: 700; letter-spacing: -0.03em; line-height: 1.2; }
.cx-titles p { margin: 3px 0 0; }
.cx-meter {
  display: inline-flex; align-items: center; gap: 8px; padding: 6px 12px; flex: none;
  background: var(--surface); border: 1px solid var(--line-soft); border-radius: 999px;
  box-shadow: var(--shadow-flat); font-size: 13px; font-weight: 600; white-space: nowrap;
}
.cx-meter #expires { color: var(--muted); font-size: 12px; font-weight: 500; padding-left: 9px; border-left: 1px solid var(--line); }
.cx-meter.low #expires { color: var(--warn); }
.cx[data-state="starting"] .cx-meter .dot,
.cx[data-state="loading"] .cx-meter .dot { background: var(--second-ink); animation: pulse 2s infinite; }
.cx[data-state="saved"] .cx-meter .dot { background: var(--good); }
.cx[data-state="failed"] .cx-meter .dot,
.cx[data-state="closed"] .cx-meter .dot { background: var(--bad); }

.cx-window {
  background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius); overflow: hidden;
  box-shadow: 0 1px 2px rgba(21, 32, 24, .05), 0 28px 60px -32px rgba(21, 32, 24, .38);
}
.cx-bar {
  position: relative; display: flex; align-items: center; gap: 14px; padding: 9px 12px;
  background: var(--surface-2); border-bottom: 1px solid var(--line-soft);
}
/* Equal outer columns keep the address centred like a real browser's. */
.cx-lights, .cx-tools { flex: 1 1 0; min-width: 0; display: flex; align-items: center; }
.cx-lights { gap: 6px; }
.cx-lights i { width: 10px; height: 10px; border-radius: 50%; background: var(--line); }
.cx-tools { justify-content: flex-end; }
.cx-address {
  flex: 0 1 460px; min-width: 0; display: flex; align-items: center; gap: 7px;
  padding: 5px 13px; border-radius: 999px; background: var(--surface); border: 1px solid var(--line-soft);
  font-size: 12.5px; white-space: nowrap; overflow: hidden;
}
.cx-address svg { color: var(--good); flex: none; }
.cx-address .host { font-weight: 600; flex: none; }
.cx-address .path { color: var(--muted); overflow: hidden; text-overflow: ellipsis; margin-left: -7px; }
.cx-kbd { display: inline-flex; align-items: center; gap: 6px; font-size: 12px; color: var(--muted); white-space: nowrap; }
.cx-kbd.on { color: var(--good); font-weight: 600; }
/* Time left, as a line that drains along the bottom of the bar. */
.cx-time { position: absolute; left: 0; right: 0; bottom: -1px; height: 2px; pointer-events: none; }
.cx-time i { display: block; height: 100%; background: var(--accent); transform-origin: left; transform: scaleX(0); transition: transform 1s linear; }
.cx-time.low i { background: var(--warn); }

.cx-viewport { position: relative; aspect-ratio: var(--ar, 1280 / 800); background: var(--surface-2); }
.cx-viewport.cx-blank {
  background: linear-gradient(100deg, var(--surface-2) 30%, var(--surface-3) 50%, var(--surface-2) 70%) 0 0 / 200% 100%;
  animation: cxshimmer 1.8s linear infinite;
}
@keyframes cxshimmer { to { background-position: -200% 0; } }
#screen { display: block; width: 100%; height: 100%; outline: none; user-select: none; -webkit-user-drag: none; }
#screen:not([src]) { visibility: hidden; }
/* Focused means keys go to Vinted: say so with a ring, drawn inside so the
   window's rounded corner does not clip it. */
.cx-viewport::after {
  content: ""; position: absolute; inset: 0; pointer-events: none;
  box-shadow: inset 0 0 0 2px transparent; transition: box-shadow .15s;
}
.cx-viewport:has(#screen:focus)::after { box-shadow: inset 0 0 0 2px var(--accent); }

.cx-veil {
  position: absolute; inset: 0; display: grid; place-items: center; padding: 24px;
  background: color-mix(in srgb, var(--surface-2) 70%, transparent); backdrop-filter: blur(6px);
}
.cx-viewport.cx-blank .cx-veil { background: transparent; backdrop-filter: none; }
.cx-veil-card {
  width: min(420px, 100%); display: grid; justify-items: center; gap: 8px; text-align: center;
  background: var(--surface); border: 1px solid var(--line-soft); border-radius: var(--radius);
  box-shadow: var(--shadow); padding: 28px 28px 24px; animation: rise .3s ease-out;
}
.cx-veil-icon {
  width: 52px; height: 52px; border-radius: 15px; display: grid; place-items: center; margin-bottom: 6px;
  background: var(--accent-bg); color: var(--accent-ink);
}
.cx-veil-icon.good { background: var(--good-bg); color: var(--good); }
.cx-veil-icon.warn { background: var(--warn-bg); color: var(--warn); }
.cx-veil-icon.bad { background: var(--bad-bg); color: var(--bad); }
.cx-veil h2 { font-size: 19px; font-weight: 700; }
.cx-veil p { margin: 0; }
.cx-detail { max-width: 100%; overflow-wrap: anywhere; background: var(--surface-2); border-radius: var(--radius-xs); padding: 6px 10px; }
.cx-veil-actions { display: flex; flex-wrap: wrap; gap: 8px; justify-content: center; margin-top: 10px; }
.cx-veil-actions:empty { display: none; }

.cx-card { padding: 16px 18px; display: grid; gap: 12px; }
.cx-card h3, .cx-help h3 { font-size: 14px; font-weight: 700; display: flex; align-items: center; gap: 8px; }
.cx-steps { list-style: none; margin: 0; padding: 0; display: grid; gap: 12px; }
.cx-steps li { display: grid; grid-template-columns: 24px minmax(0, 1fr); gap: 10px; align-items: start; }
.cx-steps .n {
  width: 24px; height: 24px; border-radius: 50%; display: grid; place-items: center;
  font-family: var(--mono); font-size: 11px; font-weight: 500; background: var(--surface-3); color: var(--ink-2);
  transition: background .2s, color .2s;
}
.cx-steps li div > strong { display: block; font-size: 13px; font-weight: 600; line-height: 1.35; }
.cx-steps li div > span { display: block; font-size: 12px; color: var(--muted); margin-top: 1px; }
/* The same dots as the bot wizard's steps (.stepdot). */
.cx-steps li.now .n { background: var(--accent); color: var(--accent-text); }
.cx-steps li.done .n { background: var(--good-bg); color: var(--good); font-size: 0; }
.cx-steps li.done .n::before { content: "\2713"; font-size: 12px; font-family: var(--sans); font-weight: 700; }
.cx-trust h3 svg { color: var(--good); flex: none; }
.cx-trust ul { margin: 0; padding: 0; list-style: none; display: grid; gap: 9px; }
.cx-trust li { position: relative; padding-left: 16px; font-size: 12.5px; color: var(--ink-2); }
.cx-trust li::before { content: ""; position: absolute; left: 2px; top: .6em; width: 5px; height: 5px; border-radius: 50%; background: var(--accent); }
.cx-help { padding: 2px 4px 0; display: grid; gap: 6px; font-size: 12.5px; color: var(--muted); }
.cx-help p { margin: 0; }
.cx-help strong { color: var(--ink-2); font-weight: 600; }

@media (max-width: 1040px) {
  .cx-main { flex-direction: column; align-items: stretch; }
  .cx-stage { width: 100%; }
  .cx-side { position: static; flex: none; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); align-items: start; }
}
@media (max-width: 640px) {
  .cx-top { padding: 10px 16px; }
  .cx-crumb { display: none; }
  .cx-main { padding: 16px 16px 24px; }
  .cx-titles h1 { font-size: 20px; }
  .cx-lights { display: none; }
  .cx-tools { flex: 0 0 auto; }
  .cx-kbd #kbd-text { display: none; }
  .cx-veil-card { padding: 20px 18px 18px; }
}
@media (prefers-reduced-motion: reduce) {
  .cx-viewport.cx-blank, .cx-veil-card, .cx[data-state] .cx-meter .dot { animation: none; }
  .cx-time i { transition: none; }
}