:root {
  --bg: #141618;
  --panel: #1b1e21;
  /* A card sits ON a panel and a popover sits ABOVE everything. Both were being written as var(--card),
     which was never defined, so they resolved to transparent and the page showed straight through. */
  --card: #212529;
  --pop: #272c32;
  --line: #2a2e33;
  --text: #e8eaed;
  --muted: #80868e;
  --muted2: #9aa1a9;            /* small labels: ~6.3:1 on the panel (AA for 11–12px text) */
  --ok: #4cc38a; --warn: #f0a545; --bad: #f06565; --info: #6aa2ff; --series2: #a78bfa;
  --accent: #2f7cf6;
  --ring: #2fd3e0;
  --mono: 'JetBrains Mono', ui-monospace, SFMono-Regular, Menlo, monospace;
  --bubble-in: #262a2f;
  --bubble-out: #2f7cf6;
}
button { transition: box-shadow .15s; }
.login button:not(.dev):hover, .composer #sendBtn:hover, .quick form button:hover, .linkForm button:hover {
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--ring) 55%, transparent);
}
* { box-sizing: border-box; }
html, body { height: 100%; margin: 0; }
body {
  font: 14px/1.45 -apple-system, BlinkMacSystemFont, "Inter", "Segoe UI", sans-serif;
  color: var(--text);
  background: var(--bg);
  -webkit-font-smoothing: antialiased;
}
input, textarea, button { font: inherit; color: inherit; }
input, textarea { background: var(--bg); color: var(--text); }
::placeholder { color: var(--muted); }
button { cursor: pointer; }

/* scrollbars */
* { scrollbar-width: thin; scrollbar-color: #3a3f46 transparent; }
::-webkit-scrollbar { width: 8px; height: 8px; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb { background: #3a3f46; border-radius: 8px; border: 2px solid transparent; background-clip: padding-box; }
::-webkit-scrollbar-thumb:hover { background: var(--muted); background-clip: padding-box; }
::-webkit-scrollbar-button { display: none; }

/* login */
.login {
  height: 100%;
  display: grid;
  place-items: center;
}
.login form {
  width: 300px;
  display: grid;
  gap: 10px;
}
.login h1 { font-size: 15px; font-weight: 600; margin: 0 0 6px; }
.login input {
  padding: 10px 12px;
  border: 1px solid var(--line);
  border-radius: 12px;
  background: var(--panel);
  outline: none;
}
.login input:focus { border-color: var(--accent); }
.login button {
  padding: 10px;
  border: 0;
  border-radius: 12px;
  background: var(--accent);
  color: #fff;
}
.login .dev {
  background: none;
  color: var(--muted);
  padding: 4px;
}
.login .error { color: #f06565; font-size: 13px; min-height: 1.2em; }

/* app */
.app {
  height: 100vh;
  height: 100dvh;
  overflow: hidden;                 /* the document itself never scrolls: a stray overflowing element can't push the app up */
  display: grid;
  grid-template-columns: 220px min(var(--side, 280px), 42vw) 1fr;
  grid-template-rows: minmax(0, 1fr);
}
.app > * { min-height: 0; }         /* grid items scroll inside themselves instead of growing the row */
.rail {
  background: var(--panel);
  border-right: 1px solid var(--line);
  display: flex;
  flex-direction: column;
  padding: 8px;
  gap: 2px;
}
.rail .brand {
  display: flex; align-items: center; gap: 10px;
  padding: 8px 12px 14px;
  font-weight: 600; font-size: 14px; letter-spacing: -0.01em; white-space: nowrap;
}
.rail .brand .logo { position: relative; width: 26px; height: 26px; }
.rail .brand img { width: 26px; height: 26px; border-radius: 7px; display: block; }
.rail .brand .hat { position: absolute; width: 22px; height: 17px; top: -10px; left: -6px; transform: rotate(-12deg); }
.rail button {
  height: 40px; padding: 0 12px;
  border: 0; border-radius: 12px;
  background: none; color: var(--muted);
  display: flex; align-items: center; gap: 12px;
  font-weight: 500; text-align: left;
}
.rail button:hover { color: var(--text); background: var(--bg); }
.rail button.active { background: var(--bg); color: var(--text); }
.rail button.active svg { color: var(--accent); }
.rail svg { width: 20px; height: 20px; fill: currentColor; flex: none; }
.rail .bottom { margin-top: auto; }
.rail .me { display: flex; align-items: center; gap: 10px; padding: 8px 6px 8px 8px; }
.rail .me .avatar { width: 28px; height: 28px; font-size: 12px; }
.rail .me .meName { flex: 1; font-weight: 500; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.rail .me button { width: 30px; height: 30px; border: 0; border-radius: 8px; background: none; color: var(--muted); display: grid; place-items: center; }
.rail .me button:hover { color: var(--text); background: var(--bg); }
.rail .me button svg { width: 18px; height: 18px; }
.rail #settingsBtn { margin-bottom: 8px; }
.linkForm.rep { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.linkForm.rep select { padding: 9px 12px; border: 1px solid var(--line); border-radius: 12px; background: var(--bg); color: var(--text); outline: none; }
.linkForm.rep .hint { grid-column: 1 / -1; }
.settings .list .chat .role { color: var(--muted); font-size: 12px; margin-right: 8px; }
.settings .list .chat .mini { padding: 5px 10px; border: 1px solid var(--line); border-radius: 10px; background: none; color: var(--text); font-size: 12px; margin-left: 4px; }
.settings .list .chat .mini:hover { background: var(--bg); }
.settings .list .chat .mini.danger:hover { color: #f06565; }
#settings, #deals, #payouts, #stats, #home, #followups, #commission, #emails { overflow-y: auto; }   /* long pages scroll inside the app frame */
.tabs { display: flex; gap: 4px; padding: 12px 16px 0; border-bottom: 1px solid var(--line); }
.tabs button { background: none; border: 0; border-bottom: 2px solid transparent; color: var(--muted); font-size: 14px; font-weight: 600; padding: 8px 14px; cursor: pointer; margin-bottom: -1px; }
.tabs button:hover { color: var(--text); }
.tabs button.active { color: var(--text); border-bottom-color: var(--accent); }
.settings { width: 760px; }
/* ── payouts page: type scale = stat 22/600 › section 15/600 › body 14 › meta 12; spacing 8/16/24 ── */
.card.admin.payouts { padding-top: 12px; }
.card.admin .pagebar { display: flex; justify-content: flex-end; align-items: center; gap: 12px; margin-bottom: 8px; }
.card.admin .pagebar .updated { color: var(--muted2); font-size: 12px; }
.card.admin .mini.spin { color: var(--muted); }
.card.admin .mini.spin::before { content: ''; display: inline-block; width: 10px; height: 10px; margin-right: 6px; border: 2px solid var(--muted); border-top-color: transparent; border-radius: 50%; animation: spin .8s linear infinite; vertical-align: -1px; }
@keyframes spin { to { transform: rotate(360deg); } }
.card.admin .counters { display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap: 16px 24px; padding: 8px 0 16px; border-bottom: 1px solid var(--line); }
.card.admin .statgroup small { display: block; color: var(--muted2); font-size: 12px; font-weight: 600; letter-spacing: .02em; text-transform: uppercase; margin-bottom: 8px; }
.card.admin .stats { display: grid; grid-template-columns: repeat(auto-fit, minmax(96px, 1fr)); gap: 8px; }
.card.admin .stat { display: flex; flex-direction: column; gap: 2px; padding: 8px 10px; border: 1px solid transparent; border-radius: 10px; background: var(--bg); color: var(--text); text-align: left; cursor: default; }
.card.admin .stat b { font-size: 22px; font-weight: 600; line-height: 1.1; }
.card.admin .stat span { font-size: 12px; color: var(--muted2); }
.card.admin .stat.hot { cursor: pointer; border-color: rgba(47,124,246,.45); }
.card.admin .stat.hot b { color: var(--info); }
.card.admin .stat.hot b::before { content: ''; display: inline-block; width: 8px; height: 8px; border-radius: 50%; background: var(--accent); margin-right: 6px; vertical-align: 3px; }
.card.admin .stat.hot:hover { background: var(--line); }
.card.admin .stat.zero { opacity: .45; }
.card.admin .stat.money b { font-size: 18px; }
.card.admin .setting { display: flex; flex-direction: column; gap: 4px; padding: 16px 0; border-bottom: 1px solid var(--line); }
.card.admin .switch { display: inline-flex; align-items: center; gap: 10px; cursor: pointer; font-size: 14px; }
.card.admin .switch input { position: absolute; opacity: 0; width: 0; height: 0; }
.card.admin .switch .track { width: 36px; height: 20px; border-radius: 10px; background: var(--line); position: relative; transition: background .15s; flex: none; }
.card.admin .switch .track::after { content: ''; position: absolute; top: 2px; left: 2px; width: 16px; height: 16px; border-radius: 50%; background: #fff; transition: left .15s; }
.card.admin .switch input:checked + .track { background: var(--accent); }
.card.admin .switch input:checked + .track::after { left: 18px; }
.card.admin .switch input:focus-visible + .track { outline: 2px solid var(--accent); outline-offset: 2px; }
.card.admin .setting .help { color: var(--muted2); font-size: 12px; }
.card.admin section.queue { margin-top: 24px; }
.card.admin section.queue h2 { display: flex; justify-content: space-between; align-items: center; margin: 0 0 8px; font-size: 15px; font-weight: 600; color: var(--text); text-transform: none; letter-spacing: 0; }
.card.admin section.queue h2 .n { color: var(--muted2); font-weight: 500; margin-left: 4px; }
.card.admin section.queue.empty { margin-top: 12px; }
.card.admin section.queue.empty h2 { font-size: 13px; color: var(--muted2); font-weight: 500; }
.card.admin section.queue.empty .list { display: none; }
.card.admin section.queue.flash { animation: secflash 1.4s ease-out; }
@keyframes secflash { 0% { background: rgba(47,124,246,.16); } 100% { background: transparent; } }
.card.admin section.queue .list { display: grid; gap: 8px; }
.card.admin article.order { border: 1px solid var(--line); border-radius: 12px; padding: 10px 14px 8px; background: var(--bg); display: grid; gap: 4px; }
.card.admin article.order .top, .card.admin article.order .mid, .card.admin article.order .foot { display: flex; justify-content: space-between; align-items: center; gap: 8px; flex-wrap: wrap; }
.card.admin article.order .name { font-weight: 600; font-size: 14px; }
.card.admin article.order .meta { color: var(--muted2); font-size: 12px; }
.card.admin article.order .meta time { border-bottom: 1px dotted var(--muted); cursor: help; }
.card.admin article.order .amt { font-size: 15px; font-weight: 600; }
.card.admin article.order .amounts { font-size: 13px; color: var(--text); }
.card.admin article.order .note { font-size: 12px; color: var(--muted2); font-style: italic; }
.card.admin article.order .foot { margin-top: 4px; }
.card.admin .tools { display: inline-flex; gap: 4px; }
.card.admin .icobtn { width: 28px; height: 26px; padding: 0; display: inline-flex; align-items: center; justify-content: center; border: 1px solid var(--line); border-radius: 8px; background: none; color: var(--muted2); font-size: 12px; cursor: pointer; text-decoration: none; }
.card.admin .icobtn:hover { color: var(--text); background: var(--line); }
.card.admin .mini.primary { background: var(--accent); border-color: var(--accent); color: #fff; }
.card.admin .mini.primary:hover { background: #4a8cf7; }
.card.admin .muted { color: var(--muted2); }
.card.admin .warn { color: var(--warn); }
.card.admin .chartsec h2 .sum { font-size: 12px; font-weight: 500; color: var(--muted2); }
.card.admin .chartsec h2 .sum b { color: var(--text); font-weight: 600; }
.card.admin .chartctl { display: flex; justify-content: flex-end; padding: 2px 4px 4px; }
.card.admin .chk { display: inline-flex; align-items: center; gap: 6px; font-size: 12px; color: var(--muted2); cursor: pointer; }
.card.admin .chk input { accent-color: var(--series2); }
.card.admin .chk::before { content: ''; width: 10px; height: 10px; border-radius: 2px; background: var(--series2); }
.card.admin .card.chart .chart svg { height: auto; }
.card.admin .card.chart .lbl { font-size: 12px; fill: var(--muted2); }
.card.admin .card.chart .avg { stroke: var(--text); stroke-width: 1; stroke-dasharray: 4 4; opacity: .55; }
.card.admin .card.chart .avgl { fill: var(--text); opacity: .8; }
.card.admin .card.chart .fill2 { fill: var(--series2); }
.card.admin .card.chart .zero { fill: var(--muted); opacity: .6; }
.card.admin :is(button, a, input, [tabindex]):focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
body.admin-open #snow { display: none; }
.toast { position: fixed; right: 16px; bottom: 16px; z-index: 30; padding: 10px 14px; border-radius: 10px; background: var(--panel); border: 1px solid var(--line); color: var(--text); font-size: 13px; box-shadow: 0 8px 24px rgba(0,0,0,.4); max-width: 420px; }
.toast.ok { border-color: rgba(76,195,138,.5); }
.toast.bad { border-color: rgba(240,101,101,.6); color: #f6a3a3; }
.card.admin h2 .right { display: inline-flex; gap: 6px; }
.card.admin .acts { display: inline-flex; gap: 4px; align-items: center; flex: none; margin-left: 8px; }
.card.admin .acts .mini, .card.admin .mini { padding: 5px 10px; border: 1px solid var(--line); border-radius: 10px; background: none; color: var(--text); font-size: 12px; cursor: pointer; text-decoration: none; }
.card.admin .mini:hover { background: var(--bg); }
.card.admin .mini.danger:hover { color: #f06565; }
.card.admin .list .chat { cursor: default; }
.card.admin .list .chat.aff { cursor: pointer; }
.card.admin #affList { display: grid; gap: 8px; }
.card.admin #affList .label { padding: 4px 0; }
.card.admin .list .chat .body { flex: 1; min-width: 0; }
.card.admin .preview.wrap { white-space: normal; }
.card.admin .mono, .card.admin code { font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size: 11px; }
.card.admin .seg { display: inline-flex; gap: 2px; background: var(--bg); border-radius: 10px; padding: 2px; }
.card.admin .seg button { border: 0; background: none; color: var(--muted); font-size: 12px; padding: 4px 10px; border-radius: 8px; cursor: pointer; }
.card.admin .seg button.on { background: var(--panel); color: var(--text); }
.card.admin .mini-input { margin: 0; padding: 4px 10px; border: 1px solid var(--line); border-radius: 10px; background: var(--bg); font-size: 12px; width: 150px; }
.card.admin .card.chart.inner { margin: 0; }
.card.admin details summary { color: var(--muted); font-size: 11px; cursor: pointer; }
.card.admin pre { white-space: pre-wrap; font-size: 11px; color: var(--muted); margin: 4px 0 0; }
.card.admin .rank { width: 24px; color: var(--muted); font-weight: 600; }
.card.admin .right { margin-left: auto; }
.card.admin .numrow { display: flex; justify-content: space-between; align-items: center; padding: 6px 0; font-size: 13px; }
.card.admin .edit { cursor: pointer; border-bottom: 1px dashed var(--muted); }
.card.admin .edit:hover { color: var(--accent); border-bottom-color: var(--accent); }
.pillst { display: inline-flex; align-items: center; gap: 5px; font-size: 12px; font-weight: 500; padding: 2px 9px 2px 7px; border-radius: 999px; background: var(--panel); border: 1px solid var(--line); color: var(--muted2); flex: none; white-space: nowrap; }
.pillst i { font-style: normal; font-size: 11px; }
.pillst.ok { color: var(--ok); border-color: rgba(76,195,138,.4); }
.pillst.warn { color: var(--warn); border-color: rgba(240,165,69,.45); }
.pillst.bad { color: var(--bad); border-color: rgba(240,101,101,.5); }
.pillst.info { color: var(--info); border-color: rgba(106,162,255,.45); }
.modal .nums .wallets { grid-column: 1 / -1; display: grid; gap: 4px; font-size: 12px; }
.modal .nums .wallets .w { display: flex; gap: 8px; align-items: baseline; }
.modal .nums .wallets .w span { width: 120px; color: var(--muted); flex: none; }
.modal .nums .wallets .w code { cursor: pointer; border-bottom: 1px dashed var(--muted); word-break: break-all; font-size: 11px; }
.modal .nums .wallets .w code:empty::before { content: 'add'; color: var(--accent); }
.modal .nums .recent { grid-column: 1 / -1; font-size: 12px; display: grid; gap: 2px; }
.modal .nums .recent .top { display: flex; justify-content: space-between; }
.modal .nums .danger-zone { grid-column: 1 / -1; padding-top: 6px; }
/* every .mini rule is scoped to .card.admin / .settings, so this button fell through to the
   browser default: a light box inheriting the modal's near-white text, i.e. unreadable. */
.modal .nums .danger-zone .mini { padding: 5px 10px; border: 1px solid var(--line); border-radius: 10px;
  background: #e6e6e6; color: #000; font-size: 12px; font-weight: 500; cursor: pointer; }
.modal .nums .danger-zone .mini.danger:hover { background: #f06565; color: #fff; border-color: #f06565; }
.modal .nums .edit { cursor: pointer; border-bottom: 1px dashed var(--muted); }
.modal .box.wide { max-height: 85vh; overflow-y: auto; }
.settings { flex: none; margin: 24px auto; width: 640px; max-width: calc(100% - 32px); display: flex; flex-direction: column; gap: 16px; }
.settings .card { padding: 8px 20px 20px; }
.settings h2 { font-size: 13px; font-weight: 600; color: var(--muted); margin: 12px 0 8px; display: flex; align-items: center; justify-content: space-between; }
.settings .hint { font-size: 12px; color: var(--muted); margin-top: 8px; }
.settings h2 .mini { padding: 4px 10px; border: 1px solid var(--line); border-radius: 10px; background: none; color: var(--muted); font-size: 12px; font-weight: 500; cursor: pointer; }
.settings h2 .mini:hover { background: var(--bg); color: var(--text); }
.avatar.coin { display: inline-flex; align-items: center; justify-content: center; }
.avatar.saved { background: var(--accent); display: inline-flex; align-items: center; justify-content: center; }
.msg .fwd { color: var(--accent); font-weight: 600; font-size: 13px; padding: 0 0 3px; }
.msg.out .fwd { color: #fff; opacity: .92; }
.msg.photo .fwd, .msg.video .fwd, .msg.album .fwd { padding: 6px 10px 6px; }
.msg.photo:has(.fwd) > a, .msg.video:has(.fwd) > video { border-top-left-radius: 0; border-top-right-radius: 0; }
.settings .wallet .mono { font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size: 11px; word-break: break-all; white-space: normal; }
.settings .wallet .bal { text-align: right; margin-right: 8px; }
.settings .wallet .bal b { display: block; font-size: 13px; }
.settings .wallet .bal small { color: var(--muted); font-size: 11px; }
.settings .wallet.low .bal small { color: #f0a545; }
.settings .list .chat { cursor: default; }
.settings .list .chat .name { flex: 1; min-width: 0; }
.settings .list .chat .name small { white-space: normal; }
.settings .list .chat .arch { padding: 6px 12px; border: 1px solid var(--line); border-radius: 10px; background: none; color: var(--text); font-size: 13px; }
.settings .list .chat .arch:hover { background: var(--bg); }
.linkToggle { margin-top: 12px; padding: 9px; width: 100%; border: 1px dashed var(--line); border-radius: 12px; background: none; color: var(--accent); font-weight: 500; }
.linkToggle:hover { background: var(--bg); }
.linkForm { margin-top: 10px; }
.settings .list .chat:hover { background: none; }
.linkForm { display: grid; gap: 8px; }
.linkForm input { padding: 9px 12px; border: 1px solid var(--line); border-radius: 12px; outline: none; }
.linkForm input:focus { border-color: var(--accent); }
.linkForm button { padding: 9px; border: 0; border-radius: 12px; background: var(--accent); color: #fff; }
.linkForm button:disabled { opacity: .5; cursor: default; }
.hint { color: var(--muted); font-size: 12px; min-height: 1.2em; }
.hint.err { color: #f06565; }
.err { color: #f06565; font-weight: 500; }
.page { grid-column: 2 / 4; display: flex; flex-direction: column; overflow: hidden; }
#snow { position: fixed; inset: 0; z-index: 0; pointer-events: none; }
.app > .rail, .app > .side, .app > .main, .app > .page { position: relative; z-index: 1; }
.page { position: relative; }
.page header { background: var(--bg); }
.welcome {
  margin: 48px 16px 8px;
  text-align: center;
  font: italic 700 44px/1.2 "Playfair Display", Georgia, "Times New Roman", serif;
  letter-spacing: -0.01em;
  background: linear-gradient(90deg, var(--accent), var(--ring));
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}
.cards {
  display: grid;
  grid-template-columns: repeat(2, 220px);
  gap: 12px;
  padding: 16px;
  justify-content: center;
}
.card {
  background: var(--panel);
  border: 1px solid var(--line);
  border-radius: 14px;
  padding: 14px 16px;
}
.card small { display: block; color: var(--muted); font-size: 12px; margin-bottom: 6px; }
.card > b { font-size: 28px; font-weight: 600; }
.card.wide { grid-column: 1 / -1; display: flex; flex-wrap: wrap; gap: 8px 32px; }
.card.wide small { width: 100%; }
.card.accounts { display: block; }
.card.chart { display: block; position: relative; }
.card.chart .chart svg { width: 100%; height: 160px; display: block; }
.card.chart .grid { stroke: var(--line); stroke-width: 1; }
.card.chart .axis { stroke: var(--muted); stroke-width: 1; opacity: .6; }
.card.chart .lbl { fill: var(--muted); font-size: 10px; }
/* the per-rep chart draws one bar per day and labels every one, so its viewBox is as wide as the day
   count: let it scale to its own aspect instead of being squeezed into a fixed 160px height */
.card.chart .chart#repChart svg { height: auto; }
.card.chart .lbl.day { font-size: 9px; }
.card.chart .lbl.mon { font-size: 9px; fill: var(--muted2); font-weight: 600; }
.card.chart .fill { fill: var(--accent); }
.card.chart .zero { fill: var(--line); }
.card.chart .hit { fill: transparent; }
.card.chart .bar:hover .fill { fill: #5a95f8; }
.card.chart .bar:hover .hit { fill: rgba(255,255,255,.04); }
.card.chart .tip { position: absolute; pointer-events: none; background: var(--bg); border: 1px solid var(--line); color: var(--text); font-size: 12px; padding: 4px 8px; border-radius: 8px; white-space: nowrap; }
.card.accounts .list { display: flex; flex-direction: column; gap: 2px; }
.card.accounts .list .chat { padding: 6px 8px; border-radius: 10px; cursor: pointer; }
.card.accounts .list .chat:hover { background: var(--bg); }
.card.accounts .list .name { flex: 1; min-width: 0; font-weight: 500; }
.stat span { display: block; color: var(--muted); font-size: 12px; }
.stat b { font-size: 18px; font-weight: 600; }
.scene { position: absolute; left: 0; right: 0; bottom: 0; width: 100%; height: 190px; pointer-events: none; }
@keyframes winter-twinkle { 0%, 100% { opacity: 1; } 50% { opacity: .45; } }
.scene .bulb { animation: winter-twinkle 4.2s ease-in-out infinite; }
@media (prefers-reduced-motion: reduce) { .scene .bulb { animation: none; } }
.page header {
  height: 52px; padding: 0 16px; display: flex; align-items: center;
  border-bottom: 1px solid var(--line); font-weight: 600;
}
.side {
  position: relative;
  border-right: 1px solid var(--line);
  background: var(--panel);
  display: flex;
  flex-direction: column;
  overflow: hidden;
}
.side header, .main header {
  height: 52px;
  padding: 0 16px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  border-bottom: 1px solid var(--line);
  font-weight: 600;
}
.side header button {
  background: none; border: 0; color: var(--muted); padding: 0; font-weight: 400;
}
.side header #sideTitle { display: flex; align-items: center; gap: 6px; }
.side header .back { position: relative; display: inline-flex; width: 30px; height: 30px; margin: -3px 2px -3px -6px; align-items: center; justify-content: center; cursor: pointer; color: var(--muted); border-radius: 50%; }
.side header .back svg { width: 24px; height: 24px; }
.side header .back:hover { background: var(--line); }
.side header .back b { position: absolute; top: -4px; right: -4px; min-width: 18px; height: 18px; padding: 0 5px; border-radius: 9px; background: var(--accent); color: #fff; font-size: 11px; font-weight: 600; display: grid; place-items: center; border: 2px solid var(--panel); box-sizing: content-box; }
.side header .back:hover { color: var(--text); }
.side header button:hover { color: var(--text); }
.search {
  margin: 8px 8px 0;
  padding: 8px 12px;
  border: 1px solid var(--line);
  border-radius: 12px;
  outline: none;
}
.search:focus { border-color: var(--accent); }
.chats { overflow-y: auto; flex: 1; overscroll-behavior: contain; }
.label { color: var(--muted); font-size: 12px; padding: 10px 12px 4px; }
.chat .preview b { color: var(--text); font-weight: 600; }
.chat .preview .thumb { width: 18px; height: 18px; object-fit: cover; border-radius: 3px; vertical-align: -4px; margin-right: 5px; }
.msg.flash { outline: 2px solid var(--ring); }
.selbar, .pinbar, .replybar { display: flex; align-items: center; gap: 10px; padding: 8px 16px; border-bottom: 1px solid var(--line); background: var(--panel); font-size: 13px; }
.replybar { border-bottom: 0; border-top: 1px solid var(--line); }
/* the selection toolbar takes the chat header's place (like Telegram) instead of pushing the messages down — a
   drag-select used to shift the whole list by one row the moment it started, so it picked the message above */
.selbar { position: absolute; top: 0; left: 0; right: 0; height: 52px; box-sizing: border-box; z-index: 6; }
.selbar button { padding: 6px 12px; border: 0; border-radius: 10px; background: var(--accent); color: #fff; font-weight: 600; }
.selbar button b { font-weight: 400; opacity: .8; margin-left: 4px; }
.selbar button.danger { background: #c4453d; }
.selbar button.x { margin-left: auto; background: none; color: var(--muted); font-size: 18px; }
.pinbar { cursor: pointer; }
.pinbar .lbl, .replybar .lbl { color: var(--accent); font-weight: 600; white-space: nowrap; }
.pinbar .txt, .replybar .txt { flex: 1; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; color: var(--muted); }
.replybar button { background: none; border: 0; color: var(--muted); font-size: 18px; }
.messages.selecting .msg { cursor: pointer; }
.messages.dragging, .messages.dragging * { user-select: none; }
.messages.selecting .msg::before { content: ''; position: absolute; left: calc(var(--row-w, 800px) - 50px - 20px - 20px); top: 50%; width: 20px; height: 20px; margin-top: -10px; border: 2px solid var(--muted); border-radius: 50%; box-sizing: border-box; }
.messages.selecting .msg.selected::before { background: var(--accent) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12l5 5 9-10'/%3E%3C/svg%3E") center/12px no-repeat; }

.messages.selecting .msg.selected::before { border-color: var(--accent); }
.messages { overflow-x: hidden; }
.messages.selecting .msg.selected::after { content: ''; position: absolute; inset: -1px -9999px; background: rgba(47,124,246,.22); pointer-events: none; z-index: -1; }
.msg .quote { border-left: 2px solid currentColor; padding: 2px 8px; margin-bottom: 4px; font-size: 13px; opacity: .85; border-radius: 4px; background: rgba(255,255,255,.08); }
.msg .quote b { display: block; font-size: 12px; }
/* the reaction on a chat-list row, where Telegram puts it: right of the preview, by the unread badge */
.chat .react { flex: none; margin-left: 6px; font-size: 13px; line-height: 1; }
.msg .reacts { display: flex; gap: 4px; margin-top: 4px; }
.msg.photo .reacts, .msg.video .reacts, .msg.album .reacts, .msg.file .reacts { padding: 0 8px 6px; }
.msg .reacts span { display: inline-flex; align-items: center; gap: 4px; padding: 3px 6px 3px 8px; border-radius: 12px; background: rgba(255,255,255,.14); font-size: 14px; line-height: 1; cursor: pointer; }
.msg .reacts span:hover { background: rgba(255,255,255,.22); }
.msg .reacts span.me { box-shadow: inset 0 0 0 1px rgba(255,255,255,.35); }
.msg .reacts i.avatar { width: 18px; height: 18px; font-size: 10px; font-style: normal; margin-left: -6px; }
.msg .reacts i.avatar:first-of-type { margin-left: 0; }
.menu.msgmenu { background: none; border: 0; box-shadow: none; padding: 0; min-width: 0; }
.menu.msgmenu .reactions {
  display: inline-flex; gap: 2px; padding: 4px 6px; margin-bottom: 6px;
  background: var(--panel); border: 1px solid var(--line); border-radius: 999px;
  box-shadow: 0 8px 24px rgba(0,0,0,.4);
}
.menu.msgmenu .reactions button { width: 34px; height: 34px; padding: 0; justify-content: center; font-size: 21px; border-radius: 50%; }
.menu.msgmenu .reactions button:hover { transform: scale(1.25); background: none; }
.menu.msgmenu .items {
  min-width: 190px; padding: 6px;
  background: var(--panel); border: 1px solid var(--line); border-radius: 14px;
  box-shadow: 0 8px 24px rgba(0,0,0,.4);
}
.menu.msgmenu .items button { padding: 9px 14px; gap: 16px; font-size: 14px; }
.menu.msgmenu .items button svg { width: 20px; height: 20px; color: var(--text); opacity: .85; }
.modal { position: fixed; inset: 0; z-index: 20; background: rgba(0,0,0,.5); display: grid; place-items: center; }
.modal .box { width: 360px; max-height: 70vh; background: var(--panel); border: 1px solid var(--line); border-radius: 14px; display: flex; flex-direction: column; overflow: hidden; }
.modal header { display: flex; justify-content: space-between; align-items: center; padding: 12px 16px; font-weight: 600; }
.modal .box.wide { width: 720px; max-width: calc(100vw - 32px); padding-bottom: 12px; }
.modal .nums { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px 16px; padding: 0 16px 12px; }
.modal .nums .stat span { display: block; color: var(--muted); font-size: 12px; }
.modal .nums .stat b { font-size: 20px; font-weight: 600; }
.modal .box .card.chart { margin: 0 12px; }
.modal header button { background: none; border: 0; color: var(--muted); font-size: 20px; }
.modal input { margin: 0 12px 8px; padding: 8px 12px; border: 1px solid var(--line); border-radius: 10px; outline: none; }
.modal .list { overflow-y: auto; padding: 0 8px 8px; }
.modal .list .chat[data-archive] { cursor: pointer; }
.modal .list .chat[data-archive]:hover { background: var(--bg); }
.modal .dialog { width: 340px; padding: 20px 22px 14px; gap: 14px; }
.modal .dialog p { margin: 0; font-size: 15px; }
.modal .dialog label { display: flex; align-items: center; gap: 10px; font-size: 14px; cursor: pointer; }
.modal .dialog input[type=checkbox] { width: 20px; height: 20px; accent-color: var(--accent); }
.modal .dialog .actions { display: flex; justify-content: flex-end; gap: 6px; }
.modal .dialog small { display: block; margin-top: -8px; }
.ghostbar { display: flex; align-items: center; gap: 8px; padding: 8px 16px; background: rgba(240,165,69,.12); color: #f0a545; font-size: 13px; border-bottom: 1px solid var(--line); }
.ghost-take { margin-left: auto; flex: none; background: #f0a545; color: #14181d; border: 0; border-radius: 6px; padding: 5px 12px; font: 600 12.5px/1 inherit; cursor: pointer; }
.ghost-take:hover { filter: brightness(1.08); }
.ghost-take:disabled { opacity: .6; cursor: default; }
.chat .held { display: inline-block; margin-right: 6px; padding: 0 6px; border-radius: 999px; background: rgba(240,165,69,.18); color: #f0a545; font-size: 11px; }
.modal .dialog .actions button { padding: 8px 14px; border: 0; border-radius: 10px; background: none; color: var(--accent); font-weight: 600; text-transform: none; }
.modal .dialog .actions button:hover { background: var(--bg); }
.modal .dialog .actions button:focus { outline: none; }
.modal .dialog .actions button:focus-visible { background: var(--bg); }
.unread-banner { align-self: stretch; text-align: center; margin: 8px 0; padding: 5px; background: var(--panel); color: var(--muted); font-size: 13px; border-radius: 8px; }
.date-sep { align-self: center; margin: 10px 0 6px; user-select: none; }
.date-sep span { display: inline-block; padding: 4px 10px; border-radius: 999px; background: #23272c; color: var(--muted2); font-size: 12.5px; font-weight: 600; }
.resizer {
  position: absolute;
  top: 0; right: -4px; bottom: 0;
  width: 8px;
  cursor: col-resize;
  z-index: 1;
}
.resizing { cursor: col-resize; user-select: none; }
.chats { padding: 8px; }
.chat {
  padding: 10px 12px;
  cursor: pointer;
  border-radius: 12px;
  margin-bottom: 2px;
}
.chat:hover { background: var(--bg); }
.chat.active { background: var(--bg); box-shadow: inset 0 0 0 1px var(--line); }
.chat .top { display: flex; justify-content: space-between; align-items: baseline; gap: 8px; }
.chat .name { font-weight: 600; }
.chat .account { color: var(--muted); font-size: 12px; white-space: nowrap; }
.chat .preview {
  color: var(--muted);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  margin-top: 2px;
  flex: 1;
}
.chat.row { display: flex; align-items: center; gap: 12px; }
.chat.row .name { flex: 1; }
.chat .body { flex: 1; min-width: 0; }
.chat .body .name { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.avatar { position: relative; overflow: hidden; }
.chat .av { position: relative; flex: none; display: block; }
.chat .av .on { position: absolute; right: 0; bottom: 0; width: 12px; height: 12px; border-radius: 50%; background: var(--ok); border: 2px solid var(--panel); }
.chat:hover .av .on, .chat.active .av .on { border-color: var(--bg); }
.chat .name .prem { color: var(--accent); vertical-align: -2px; margin-left: 4px; }
.avatar img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.tick { display: inline-flex; margin-right: 4px; vertical-align: middle; color: var(--accent); }
.tick svg { width: 12px; height: 10px; fill: none; stroke: currentColor; stroke-width: 2.2; stroke-linecap: round; stroke-linejoin: round; }
.tick svg + svg { margin-left: -7px; }
.doclink { color: var(--accent); display: inline-flex; align-items: center; gap: 4px; vertical-align: middle; }
.doclink svg { width: 14px; height: 14px; flex: none; }
.avatar {
  width: 40px; height: 40px; border-radius: 50%; flex: none; object-fit: cover;
  background: var(--accent); color: #fff; font-weight: 600;
  display: grid; place-items: center;
}
.badge {
  flex: none;
  min-width: 20px; height: 20px; padding: 0 6px;
  border-radius: 10px;
  background: var(--accent); color: #fff;
  font-size: 12px; font-weight: 600;
  display: grid; place-items: center;
  margin-top: 2px;
}
.empty { color: var(--muted); padding: 24px 16px; text-align: center; }
.pill {
  margin: auto;
  padding: 5px 12px;
  border-radius: 999px;
  background: var(--panel);
  color: var(--muted);
  font-size: 13px;
}

.main { display: flex; flex-direction: column; overflow: hidden; background: var(--bg); }
.main header span { color: var(--muted); font-weight: 400; margin-left: 8px; font-size: 12px; }
.main header .iconbtn.back-m { display: none; }
.main header .iconbtn { margin-left: auto; width: 34px; height: 34px; border: 0; border-radius: 50%; background: none; color: var(--muted); display: inline-flex; align-items: center; justify-content: center; cursor: pointer; }
.main header .iconbtn svg { width: 20px; height: 20px; }
.main header .iconbtn:hover { background: var(--line); color: var(--text); }
.main header .status { color: var(--muted); font-weight: 400; font-size: 12px; line-height: 1.2; min-height: 1.2em; }
.main header .status.online { color: var(--accent); }
.msg.pending .meta { opacity: .45; }
.msg.pending .tick { display: none; }
.msg.pending .meta::after { content: '◷'; font-size: 12px; }
.msg.failed { outline: 2px solid #f06565; }
.menu {
  position: fixed; z-index: 10; min-width: 200px; padding: 4px;
  background: var(--panel); border: 1px solid var(--line); border-radius: 12px;
  box-shadow: 0 8px 24px rgba(0,0,0,.4);
}
.menu button { display: flex; align-items: center; gap: 12px; width: 100%; text-align: left; padding: 8px 12px; border: 0; border-radius: 8px; background: none; color: var(--text); }
.menu button svg { width: 18px; height: 18px; flex: none; color: var(--muted); }
.menu button:hover { background: var(--bg); }
.menu button.danger, .menu button.danger svg { color: #f06565; }
/* composer menu: label · shortcut, separators, a Formatting submenu that opens to the right */
.menu.editmenu { min-width: 220px; }
.menu.editmenu hr { border: 0; border-top: 1px solid var(--line); margin: 4px 0; }
.menu.editmenu button, .menu.editmenu .sub { justify-content: space-between; gap: 24px; padding: 7px 12px; position: relative; }
.menu.editmenu .sub { display: flex; align-items: center; border-radius: 8px; cursor: default; }
.menu.editmenu .sub:hover { background: var(--bg); }
.menu.editmenu button kbd { font: inherit; font-size: 12px; color: var(--muted); }
.menu.editmenu button i { font-style: normal; color: var(--muted); }
.menu.editmenu button:disabled { color: var(--muted); cursor: default; }
.menu.editmenu button:disabled:hover { background: none; }
.menu.editmenu .submenu { display: none; position: absolute; left: 100%; bottom: -4px; min-width: 240px; padding: 4px; background: var(--panel); border: 1px solid var(--line); border-radius: 12px; box-shadow: 0 8px 24px rgba(0,0,0,.4); }
.menu.editmenu .sub:hover .submenu, .menu.editmenu .submenu:hover { display: block; }
@media (max-width: 760px) { .menu.editmenu .submenu { left: auto; right: 100%; } }
.badge.dot { min-width: 10px; width: 10px; height: 10px; padding: 0; }
.badge.muted { background: var(--muted); }
.badge.reply { background: none; border: 1.5px solid var(--accent); color: var(--accent); font-size: 12px; line-height: 1; }
.chat .pin { width: 16px; height: 16px; color: var(--muted); flex: none; margin-top: 2px; }
.avatar.arch { background: #3d4652; color: #e3e7ec; font-size: 18px; display: inline-flex; align-items: center; justify-content: center; }
.avatar.arch .cut { stroke: #3d4652; }
.settings .list .chat[data-archive] { cursor: pointer; }
.settings .list .chat[data-archive]:hover { background: var(--bg); }
.log { margin-top: 8px; padding: 8px 10px; background: var(--bg); border-radius: 10px; font-size: 13px; max-height: 240px; overflow-y: auto; white-space: pre-wrap; }
.log div { padding: 2px 0; }
.log .me { color: var(--accent); }
.log time { color: var(--muted); font-size: 11px; margin-right: 6px; }
.messages {
  flex: 1;
  overflow-y: auto;
  overscroll-behavior: contain;
  padding: 14px 20px 14px 50px;
  display: flex;
  flex-direction: column;
  gap: 2px;
}
.msg {
  position: relative;
  flex: none; /* flex column + overflow:hidden bubbles would otherwise shrink to 0 */
  /* The time is floated, and a float does not add to a plain block's height: the bubble ended at the last
     line of TEXT and the time sat in the padding below it, 1px from the edge. flow-root makes the bubble
     contain its own float, so the time gets the full 5px of padding under it (owner, 2026-10-03). */
  display: flow-root;
  max-width: min(62%, 380px);
  padding: 5px 9px 5px 10px;
  border-radius: 13px;
  white-space: pre-wrap;
  word-break: break-word;
  font-size: 14px;
  line-height: 1.4;
}
.msg.in { background: var(--bubble-in); align-self: flex-start; }
.msg.out { background: var(--bubble-out); color: #fff; align-self: flex-start; }
.msg.in:not(.first) { border-top-left-radius: 5px; }
.msg.in:not(.last) { border-bottom-left-radius: 5px; }
.msg.out:not(.first) { border-top-left-radius: 5px; }
.msg.out:not(.last) { border-bottom-left-radius: 5px; }
.msg.first { margin-top: 6px; }
.msg .meta {
  float: right;
  display: inline-flex; align-items: center; gap: 3px;
  /* NOT tucked into the corner: the bubble is rounded 13px, and the negative margins put the time 6px from
     the right edge and 2px from the bottom — which is outside that curve, so on a phone the glyphs poked
     through the corner (owner, 2026-10-03, with a screenshot: the bubble ended at x=186 and the time ran
     to x=202). Sitting in the padding keeps it clear of the radius at every size. */
  margin: 6px 2px 3px 8px;
  font-size: 11px; line-height: 1;
  opacity: .8;
  user-select: none;
}
.msg .meta .by { font-weight: 600; letter-spacing: .01em; opacity: .85; }
/* Who handled this chat, as a small card on the FAR RIGHT of the header (owner, 2026-10-02) — it used to sit
   under the customer's name, where it read like part of their status. */
#title { justify-content: flex-start; }      /* so the card below hugs the right edge, next to the search icon */
/* the search icon also carries margin-left:auto, and two auto margins SPLIT the free space — which left the card
   stranded mid-header. The card takes the slack; the icon just sits next to it. */
#title .handled + .iconbtn { margin-left: 0; }
#title .who { min-width: 0; }
#title .handled { margin-left: auto; margin-right: 10px; display: flex; align-items: center; gap: 4px 8px;
  max-width: 45%; overflow: hidden; padding: 4px 9px; border: 1px solid var(--line); border-radius: 9px;
  background: var(--bg); font-size: 11px; font-weight: 400; color: var(--muted); white-space: nowrap; }
#title .handled span { display: inline-flex; gap: 4px; align-items: baseline; }
#title .handled b { font-weight: 600; color: var(--text); opacity: .9; }
#title .handled .plus { display: none; }
@media (max-width: 760px) {
  #title .handled { max-width: 46%; margin-right: 4px; padding: 3px 7px; font-size: 10.5px; }
  #title .handled .more { display: none; }                 /* the rest would clip; the count below stands in */
  #title .handled .plus { display: inline-flex; color: var(--muted); }
}
.msg .meta .tick { color: inherit; margin: 0; }
.msg .meta .tick svg { width: 13px; height: 11px; }
.msg .mav { position: absolute; bottom: 0; width: 26px; height: 26px; font-size: 11px; }
.in .mav { left: -38px; }
.out .mav { left: -38px; }
.messages { padding-right: 20px; }

.staged {
  display: flex; flex-wrap: wrap; gap: 10px;
  padding: 8px 16px; border-top: 1px solid var(--line); background: var(--panel);
  font-size: 12px; color: var(--muted);
}
.staged .att { position: relative; display: flex; flex-direction: column; align-items: center; gap: 4px; width: 72px; }
.staged .att img { width: 72px; height: 56px; object-fit: cover; border-radius: 8px; }
.staged .att .doclink { width: 72px; height: 56px; justify-content: center; background: var(--bg); border-radius: 8px; }
.staged .att .doclink svg { width: 22px; height: 22px; }
.staged .att small { width: 100%; text-align: center; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.staged .att button { position: absolute; top: -6px; right: -6px; width: 20px; height: 20px; border: 0; border-radius: 50%; background: var(--bg); color: var(--text); font-size: 13px; line-height: 1; }
.staged .att button:hover { background: #f06565; }
.composer {
  display: flex;
  align-items: flex-end;
  gap: 4px;
  padding: 8px 10px;
  border-top: 1px solid var(--line);
  background: var(--panel);
}
.composer #input {
  flex: 1; min-width: 0;
  padding: 9px 8px;
  outline: none;
  max-height: 140px; overflow-y: auto;
  font-size: 14px;
  line-height: 1.4;
  white-space: pre-wrap; word-break: break-word;
}
.composer #input:empty::before { content: attr(placeholder); color: var(--muted); pointer-events: none; }
.composer #input code { font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size: 13px; background: rgba(255,255,255,.08); border-radius: 4px; padding: 0 3px; }
.composer #input .spoiler { background: rgba(255,255,255,.14); border-radius: 3px; }
.composer #input a { color: var(--accent); }
.composer .icon {
  width: 38px; height: 38px; flex: none;
  border: 0; border-radius: 50%;
  background: none; color: var(--muted);
  display: grid; place-items: center;
}
.composer .icon svg { width: 22px; height: 22px; display: block; }
.composer .icon:hover { color: var(--text); background: var(--bg); }
.composer .send { color: var(--accent); }
.composer .send:hover { color: var(--ring); background: none; }
.composer .send:disabled { opacity: .4; cursor: default; }
emoji-picker {
  position: absolute; right: 60px; bottom: 62px; z-index: 5;
  width: 360px; height: 440px;
  --num-columns: 8;
  --background: var(--panel);
  --border-color: var(--line);
  --input-border-color: var(--line);
  --input-font-color: var(--text);
  --input-placeholder-color: var(--muted);
  --indicator-color: var(--accent);
  --category-font-color: var(--muted);
  --button-hover-background: var(--bg);
  --button-active-background: var(--bg);
  --outline-color: var(--accent);
  --emoji-size: 1.5rem;
  --num-columns: 9;
  border-radius: 14px;
  box-shadow: 0 8px 24px rgba(0,0,0,.4);
  overflow: hidden;
}
.msg.sticker { padding: 0; background: none !important; overflow: visible; }
.msg.sticker img, .msg.sticker video, .msg.sticker .lottie { width: 160px; height: 160px; object-fit: contain; display: block; }
.msg.sticker .over { bottom: 2px; right: 2px; }
@media (hover: hover) { .msg.sticker .over { opacity: 0; transition: opacity .15s; } .msg.sticker:hover .over { opacity: 1; } }
.msg.album { padding: 0; width: 380px; max-width: min(62%, 380px); }
.msg.album .grid { display: grid; gap: 2px; grid-template-columns: 1fr; border-radius: inherit; overflow: hidden; }
.msg.album:has(.cap:not([hidden])) .grid { border-bottom-left-radius: 0; border-bottom-right-radius: 0; }
.msg.album .grid a { display: block; overflow: hidden; }
.msg.album .grid img { width: 100%; height: 100%; object-fit: cover; aspect-ratio: 1; max-height: none; }
.msg.album .grid.n1 img { aspect-ratio: auto; max-height: 320px; }
.msg.album .grid.n2, .msg.album .grid.n3, .msg.album .grid.n4 { grid-template-columns: 1fr 1fr; }
.msg.album .grid.n3 a:first-child { grid-column: span 2; }
.msg.album .grid.n3 a:first-child img { aspect-ratio: 2; }
.msg.album .grid.n5, .msg.album .grid.n6, .msg.album .grid.n7, .msg.album .grid.n8, .msg.album .grid.n9, .msg.album .grid.n10 { grid-template-columns: 1fr 1fr 1fr; }
.msg.album .grid.n5 a:first-child, .msg.album .grid.n7 a:first-child { grid-column: span 3; }
.msg.album .grid.n5 a:first-child img, .msg.album .grid.n7 a:first-child img { aspect-ratio: 3; }
.msg.album .grid.n8 a:first-child, .msg.album .grid.n8 a:nth-child(2) { grid-column: span 1; }
.msg.album .grid.n8 a:first-child { grid-column: span 2; }
.msg.album .grid.n8 a:first-child img { aspect-ratio: 2; }
.msg.album .grid.n10 a:first-child { grid-column: span 3; }
.msg.album .grid.n10 a:first-child img { aspect-ratio: 3; }
.msg.album .cap { padding: 6px 10px 6px 12px; display: flow-root; }
.msg.photo, .msg.video { padding: 0; width: 380px; max-width: min(62%, 380px); }
.msg.photo > a, .msg.video > video { display: block; border-radius: inherit; overflow: hidden; }
.msg.photo:has(.cap) > a, .msg.video:has(.cap) > video { border-bottom-left-radius: 0; border-bottom-right-radius: 0; }
.msg.photo .cap, .msg.video .cap { padding: 6px 10px 6px 12px; display: flow-root; }
.msg .cap .meta { margin-bottom: 0; }
.msg img, .msg video { display: block; width: 100%; height: auto; max-height: min(520px, 60vh); object-fit: contain; }
.msg .over { position: absolute; right: 8px; bottom: 6px; padding: 3px 7px; border-radius: 10px; background: rgba(0,0,0,.5); color: #fff; }
.msg .over .meta { float: none; margin: 0; opacity: 1; }
.msg audio { display: block; max-width: 100%; }
.msg a { color: inherit; }
.msg .lnk { color: var(--link, #6ab3f3); text-decoration: none; }          /* Telegram: coloured, underline on hover */
.msg .lnk:hover { text-decoration: underline; text-underline-offset: 2px; }
/* a link whose target was not an allowed scheme (javascript:, data:…): the words stay, the click does not */
.msg .lnk.off { color: var(--muted, #8b9aa8); text-decoration: underline dotted; cursor: help; }
.msg code { font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size: 13px; background: rgba(0,0,0,.22); border-radius: 4px; padding: 0 4px; }
.msg .spoiler { background: currentColor; border-radius: 3px; cursor: pointer; }
.msg .spoiler.open { background: rgba(0,0,0,.18); }
.msg .bq { display: block; border-left: 2px solid currentColor; padding-left: 8px; margin: 2px 0; opacity: .9; }
.msg.file { padding: 8px 10px 8px 8px; }
.doc { display: flex; align-items: center; gap: 10px; text-decoration: none; }
.doc .ico {
  width: 34px; height: 34px; border-radius: 50%; flex: none;
  display: grid; place-items: center;
  background: var(--accent); color: #fff;
}
.out .doc .ico { background: rgba(255,255,255,.22); }
.doc b { display: block; font-weight: 500; }
.doc small { display: block; font-size: 12px; opacity: .8; }

.quick {
  position: absolute;
  bottom: 62px;
  left: 16px;
  width: 360px;
  background: var(--panel);
  border: 1px solid var(--line);
  border-radius: 14px;
  box-shadow: 0 8px 24px rgba(0,0,0,.4);
  max-height: 50vh;
  display: flex;
  flex-direction: column;
}
.main { position: relative; }
#quickList { overflow-y: auto; }
.quick.deal { left: auto; right: 16px; width: 320px; }
.quick.deal .head { padding: 10px 12px; font-weight: 600; border-bottom: 1px solid var(--line); }
.quick.deal form { flex-direction: column; gap: 8px; padding: 10px 12px 12px; }
.quick.deal .chains { display: flex; flex-wrap: wrap; gap: 6px; }
.quick.deal .chains button { padding: 6px 10px; border: 1px solid var(--line); border-radius: 10px; background: none; color: var(--text); font-size: 12px; cursor: pointer; }
.quick.deal .chains button.on { border-color: var(--accent); background: rgba(47,124,246,.18); }
.quick.deal .chains button small { color: var(--muted); font-size: 11px; }
.quick.deal input { margin: 0; }
.quick.deal #dealGo { padding: 8px 12px; border: 0; border-radius: 10px; background: var(--accent); color: #fff; font-weight: 600; cursor: pointer; }
.quick.deal #dealGo:disabled { opacity: .5; cursor: default; }
.quick.deal .hint { font-size: 12px; color: var(--muted); min-height: 1.2em; }
.quick.deal .hint.err { color: #f06565; }
.quick .item {
  display: flex;
  gap: 8px;
  padding: 8px 12px;
  margin: 4px 4px 0;
  border-radius: 10px;
  cursor: pointer;
}
.quick .item:hover { background: var(--bg); }
.quick .item b { color: var(--accent); font-weight: 600; flex: none; }
.quick .item span { flex: 1; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; color: var(--muted); }
.quick .item button { background: none; border: 0; color: var(--muted); padding: 0 4px; }
.quick .item button:hover { color: #f06565; }
.quick form { display: flex; gap: 6px; padding: 8px; }
.quick input { flex: 1; border: 1px solid var(--line); border-radius: 10px; padding: 6px 8px; outline: none; background: var(--bg); }
.quick form button { border: 0; border-radius: 10px; background: var(--accent); color: #fff; padding: 0 10px; }
[hidden] { display: none !important; }

/* payouts page */
.card.payout { display: block; }
.card.payout form { display: flex; gap: 8px; margin-top: 4px; }
.card.payout input { flex: 1; min-width: 0; padding: 9px 12px; border: 1px solid var(--line); border-radius: 12px; outline: none; font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size: 13px; }
.card.payout input:focus { border-color: var(--accent); }
.card.payout input::placeholder { color: var(--muted); }
.card.payout button { padding: 9px 16px; border: 0; border-radius: 12px; background: var(--accent); color: #fff; font-weight: 600; }
.card.payout button:hover { box-shadow: 0 0 0 3px rgba(47,124,246,.25); }
.card.payout button:disabled { opacity: .5; cursor: default; }
.card.payout .hint { margin-top: 8px; }
.card.payout .hint:empty { display: none; }
.card.payout .hint.err { color: var(--bad); }
.card.payout .hint.ok { color: var(--ok); }
.quick.deal .hint.warn { color: var(--warn); line-height: 1.4; margin: 2px 0 6px; }
.card.accounts .list .chat.po { display: grid; grid-template-columns: minmax(0, 1fr) 150px 190px; align-items: center; gap: 12px; cursor: default; }
.card.accounts .list .chat.po:hover { background: none; }
.card.accounts .list .chat.po .name small { display: block; color: var(--muted2); font-weight: 400; }
.card.accounts .list .chat.po .amt { text-align: right; font-weight: 600; white-space: nowrap; }
.card.accounts .list .chat.po .amt small { display: block; font-weight: 400; }
.card.accounts .list .chat.po .st { display: flex; justify-content: flex-end; gap: 6px; }
.card.accounts .list .chat.po .pillst { min-width: 0; }
.card.accounts .list .chat.po a.pillst.link { text-decoration: none; cursor: pointer; }
.card.accounts .list .chat.po a.pillst.link:hover { background: rgba(76,195,138,.12); }
@media (max-width: 600px) { .card.accounts .list .chat.po { grid-template-columns: minmax(0, 1fr) 120px 150px; gap: 8px; } }
.quick.deal .hint.split { color: var(--muted2); }
.quick.deal .chains button:disabled { opacity: .3; cursor: not-allowed; }
.quick.deal .hint.split b { color: var(--text); font-weight: 600; }

/* ── phones: one column, bottom tab bar, list OR conversation ───────────────────────────────── */
@media (max-width: 760px) {
  .app { grid-template-columns: 1fr; grid-template-rows: minmax(0, 1fr) auto; }
  .app > .rail, .app > .side, .app > .main, .app > .page { grid-column: 1; }
  .rail { grid-row: 2; order: 2; flex-direction: row; align-items: stretch; justify-content: space-around; gap: 0;
          padding: 4px 6px calc(4px + env(safe-area-inset-bottom)); border-right: 0; border-top: 1px solid var(--line); }
  .rail .brand { display: none; }
  .rail button { flex: 1; height: auto; min-width: 0; flex-direction: column; justify-content: center; gap: 3px; padding: 6px 0; font-size: 9.5px; font-weight: 500; letter-spacing: -0.01em; text-align: center; border-radius: 10px; }
  .rail button .lbl { max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
  .rail button svg { width: 22px; height: 22px; }
  .rail #settingsBtn { margin-bottom: 0; }
  .rail .bottom { margin-top: 0; }
  .rail .me { flex: 0 0 auto; padding: 0; gap: 0; }
  .rail .me .meName, .rail .me .avatar { display: none; }              /* the bar is for tabs: just the log-out icon */
  .rail .me button { flex: none; padding: 6px 8px; }
  .side, .main, .page { grid-row: 1; }
  .side { border-right: 0; }
  .side .resizer { display: none; }
  .side:not([hidden]) { display: flex; }
  .main:not([hidden]) { display: none; }
  body.chat-open .side:not([hidden]) { display: none; }
  body.chat-open .main:not([hidden]) { display: flex; }
  .main header .iconbtn.back-m { display: inline-flex; margin: 0 4px 0 -8px; }
  .main header { padding: 0 10px; }
  .messages { padding: 10px 10px 10px 12px; }
  .msg { max-width: 84%; }
  .msg.album, .msg.photo, .msg.video { max-width: 80%; }
  .composer #input, .search, .quick.deal input, .card.payout input, .linkForm input, .modal input, .login input { font-size: 16px; }   /* iOS: no zoom on focus */
  .composer #emojiBtn { display: none; }                        /* the phone keyboard has emoji */
  emoji-picker { left: 8px; right: 8px; width: auto; height: 60vh; }
  .quick, .quick.deal { left: 8px; right: 8px; width: auto; max-height: 55vh; }
  .welcome { margin: 20px 12px 4px; font-size: 32px; }
  .cards { grid-template-columns: 1fr 1fr; gap: 10px; padding: 12px; }
  .card { padding: 12px 14px; }
  .card > b { font-size: 24px; }
  .scene { display: none; }
  .page { overflow-y: auto; }
  .settings { width: auto; max-width: none; margin: 8px 8px 16px; gap: 10px; }
  .settings .card { padding: 6px 12px 14px; }
  .tabs { overflow-x: auto; padding: 8px 8px 0; scrollbar-width: none; -webkit-overflow-scrolling: touch; }
  .tabs::-webkit-scrollbar { display: none; }
  .tabs button { flex: none; padding: 8px 10px; font-size: 13px; }
  .card.admin .counters { grid-template-columns: 1fr; gap: 12px; }
  .card.admin .stats { grid-template-columns: repeat(3, 1fr); }
  .card.admin article.order .top, .card.admin article.order .mid, .card.admin article.order .foot { flex-wrap: wrap; gap: 4px 10px; }
  .settings .list .chat { flex-wrap: wrap; row-gap: 6px; }
  .settings .list .chat .mini { margin-left: 0; }
  .modal .box, .modal .box.wide, .modal .dialog { width: calc(100vw - 24px); max-width: none; }
  .modal .nums { grid-template-columns: repeat(2, 1fr); }
  .card.accounts .list .chat.po { grid-template-columns: minmax(0, 1fr) auto; }
  .card.accounts .list .chat.po .st { grid-column: 1 / -1; justify-content: flex-start; }
  .selbar { padding: 8px 10px; }
  .ghostbar { font-size: 12px; }
}

/* overview: the attention list + the numbers card */
.card.admin .pagebar .ttl { margin: 0 auto 0 0; font-size: 15px; font-weight: 600; color: var(--text); }
.card.admin.attn .pagebar { justify-content: flex-start; padding-top: 12px; margin-bottom: 4px; }
.card.admin .attn .item { display: flex; align-items: center; gap: 12px; padding: 10px 4px; border-top: 1px solid var(--line); }
.card.admin .attn .item:first-child { border-top: 0; }
.card.admin .attn .item[data-tab-go] { cursor: pointer; }
.card.admin .attn .item[data-tab-go]:hover { background: var(--bg); border-radius: 10px; }
.card.admin .attn .dot { flex: none; width: 9px; height: 9px; border-radius: 50%; background: var(--muted); }
.card.admin .attn .item.bad .dot { background: var(--bad); }
.card.admin .attn .item.warn .dot { background: var(--warn); }
.card.admin .attn .item.info .dot { background: var(--info); }
.card.admin .attn .body { flex: 1; min-width: 0; }
.card.admin .attn .t { font-size: 14px; font-weight: 500; }
.card.admin .attn .s { font-size: 12px; color: var(--muted2); margin-top: 2px; }
.card.admin .attn .acts { display: inline-flex; gap: 4px; align-items: center; flex: none; }
.card.admin .attn .allclear { padding: 18px 4px 12px; color: var(--ok); font-weight: 500; }
.card.admin.stats { padding-top: 12px; }
.card.admin.stats .counters { border-bottom: 0; padding-bottom: 8px; }
.card.admin.stats .stat.money b { font-size: 17px; }

/* admin looking at the portal as a rep */
.viewas { position: fixed; right: 16px; bottom: 16px; z-index: 30; display: inline-flex; align-items: center; gap: 10px; padding: 8px 12px 8px 14px; border: 1px solid rgba(240,165,69,.5); border-radius: 999px; background: var(--panel); color: var(--text); font-size: 13px; box-shadow: 0 8px 24px rgba(0,0,0,.4); }
.viewas b { color: var(--warn); }
.viewas em { font-style: normal; font-weight: 600; color: #fff; background: var(--accent); padding: 4px 10px; border-radius: 999px; }
.viewas:hover em { background: #4a8cf7; }
@media (max-width: 760px) { .viewas, .toast { right: 10px; left: 10px; max-width: none; bottom: calc(66px + env(safe-area-inset-bottom)); } }


/* ── Deals board (from the owner's Claude Design "Deals" artboard) ───────────────────────────── */
#deals { background: radial-gradient(1200px 620px at 50% -180px, rgba(29,39,51,.9) 0%, rgba(20,24,29,0) 62%); font-family: 'DM Sans', -apple-system, BlinkMacSystemFont, sans-serif; color: #e7ecf2; }
#deals > .welcome { display: none; }
.dz { width: 100%; max-width: 1080px; margin: 0 auto; padding: 0 20px 80px; }   /* flex column: without a width the block shrinks to its content until rows load */
.dz-head h1 { margin: 0; font-family: 'Instrument Serif', Georgia, serif; font-style: italic; font-weight: 400; font-size: 64px; line-height: 1; letter-spacing: -.01em; color: #6fb6cd; text-shadow: 0 0 34px rgba(111,182,205,.34); }
.dz-summary { display: grid; grid-template-columns: repeat(auto-fit, minmax(190px, 1fr)); gap: 12px; margin-bottom: 18px; }
.dz-card { position: relative; overflow: hidden; padding: 18px 20px; border-radius: 16px; background: linear-gradient(150deg, var(--tint), rgba(31,38,45,.9) 60%); border: 1px solid var(--edge); }
.dz-card.green { --tint: rgba(111,216,176,.14); --edge: rgba(111,216,176,.26); --lbl: #7fc9a9; --val: #eafaf2; --sub: #86a396; }
.dz-card.violet { --tint: rgba(169,154,214,.16); --edge: rgba(169,154,214,.28); --lbl: #b3a5dd; --val: #f0ecfa; --sub: #9a93b0; }
.dz-card .shine { position: absolute; inset: 0; background: linear-gradient(100deg, transparent 40%, var(--tint) 50%, transparent 60%); background-size: 240% 100%; animation: dzsweep 5.5s linear infinite; }
@keyframes dzsweep { from { background-position: 120% 0; } to { background-position: -120% 0; } }
.dz-card small { position: relative; display: block; font-size: 11px; letter-spacing: .14em; text-transform: uppercase; color: var(--lbl); margin: 0; }
.dz-card b { position: relative; display: block; margin-top: 8px; font-size: 30px; font-weight: 700; letter-spacing: -.02em; color: var(--val); }
.dz-card > span:last-child { position: relative; display: block; margin-top: 4px; font-size: 12px; color: var(--sub); }
.dz-panel { border-radius: 22px; background: rgba(28,34,40,.86); border: 1px solid rgba(255,255,255,.08); box-shadow: 0 30px 70px -30px rgba(0,0,0,.8); backdrop-filter: blur(6px); }
.dz-bar { display: flex; flex-wrap: wrap; align-items: center; gap: 12px; padding: 16px 18px; border-bottom: 1px solid rgba(255,255,255,.06); }
.dz-tabs { display: flex; gap: 4px; padding: 4px; border-radius: 12px; background: rgba(0,0,0,.28); }
.dz-tabs button { display: flex; align-items: center; gap: 7px; padding: 8px 14px; border: 0; border-radius: 9px; font: 500 13px 'DM Sans', sans-serif; color: #93a3b1; background: transparent; cursor: pointer; transition: all .18s ease; }
.dz-tabs button:hover { filter: brightness(1.25); }
.dz-tabs button.on { background: linear-gradient(140deg, rgba(111,182,205,.9), rgba(88,158,182,.78)); color: #0d1418; box-shadow: 0 4px 18px -6px rgba(111,182,205,.8); }
.dz-tabs button b { padding: 1px 6px; border-radius: 6px; font-size: 11px; font-weight: 700; background: rgba(255,255,255,.09); color: inherit; }
.dz-search { position: relative; flex: 1 1 220px; min-width: 0; }
.dz-search input { width: 100%; padding: 10px 14px 10px 36px; border-radius: 11px; border: 1px solid rgba(255,255,255,.09); background: rgba(0,0,0,.26); color: #e7ecf2; font: 13px 'DM Sans', sans-serif; outline: none; }
.dz-search input:focus { border-color: rgba(111,182,205,.55); box-shadow: 0 0 0 3px rgba(111,182,205,.13); }
.dz-search .lens { position: absolute; left: 13px; top: 50%; transform: translateY(-50%); width: 11px; height: 11px; border: 1.5px solid #6d7d8b; border-radius: 50%; pointer-events: none; }
.dz-refresh { display: flex; align-items: center; gap: 8px; padding: 10px 16px; border-radius: 11px; border: 1px solid rgba(111,182,205,.3); background: rgba(111,182,205,.11); color: #9ed3e3; font: 500 13px 'DM Sans', sans-serif; cursor: pointer; }
.dz-refresh:hover { background: rgba(111,182,205,.2); }
.dz-refresh .dot { width: 7px; height: 7px; border-radius: 50%; background: #6fd8b0; animation: dzpulse 2.4s ease-in-out infinite; }
@keyframes dzpulse { 0%, 100% { box-shadow: 0 0 0 0 rgba(111,216,176,.5); } 50% { box-shadow: 0 0 0 5px rgba(111,216,176,0); } }
.dz-rows { display: flex; flex-direction: column; }
.dz-row { position: relative; display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 16px 22px; align-items: center; padding: 20px 22px 20px 24px; border-bottom: 1px solid rgba(255,255,255,.05); transition: background .16s ease; }
.dz-row:hover { background: rgba(255,255,255,.028); }
.dz-row::before { content: ''; position: absolute; left: 0; top: 14%; bottom: 14%; width: 3px; border-radius: 0 3px 3px 0; background: var(--hue); }
.dz-row.mine::after { content: 'you'; position: absolute; right: 22px; top: 8px; font-size: 10px; letter-spacing: .08em; text-transform: uppercase; color: #6fb6cd; opacity: .8; }
.dz-main { min-width: 0; }
.dz-title { display: flex; flex-wrap: wrap; align-items: baseline; gap: 10px; }
.dz-title .merchant { font-size: 17px; font-weight: 700; letter-spacing: -.01em; color: #f2f6fa; }
.dz-title .id { font-family: 'JetBrains Mono', monospace; font-size: 12px; color: #6d7d8b; }
.dz-meta { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin-top: 8px; }
.dz-meta .chip { display: inline-flex; align-items: center; gap: 6px; padding: 3px 9px; border-radius: 7px; font-size: 11.5px; font-weight: 500; background: color-mix(in srgb, var(--hue) 12%, transparent); color: var(--hue); }
.dz-meta .chip i { width: 6px; height: 6px; border-radius: 50%; background: var(--hue); }
.dz-meta .who { font-size: 12px; color: #8b9aa8; }
.dz-addr { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; margin-top: 10px; }
.dz-addr .box { display: flex; align-items: center; gap: 8px; min-width: 0; max-width: 100%; background: rgba(0,0,0,.24); border-radius: 7px; padding: 4px 9px 4px 6px; }
.dz-addr .cp { flex: none; display: inline-flex; align-items: center; justify-content: center; width: 20px; height: 20px; padding: 0; border: 0; border-radius: 5px; background: transparent; color: #8b9aa8; font-size: 12px; line-height: 1; cursor: pointer; transition: all .15s ease; }
.dz-addr .cp svg { width: 13px; height: 13px; transform: rotate(-20deg); }
.dz-addr .cp:hover { background: rgba(255,255,255,.08); color: #9ed3e3; }
.dz-addr .cp.ok { color: #7fd6a8; }
.dz-addr code { font-family: 'JetBrains Mono', monospace; font-size: 11.5px; color: #7f8f9d; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.dz-addr .lnk { padding: 5px 9px; border-radius: 7px; border: 1px solid rgba(255,255,255,.09); color: #8b9aa8; font-size: 11px; text-decoration: none; }
.dz-addr .lnk:hover { color: #9ed3e3; border-color: rgba(111,182,205,.4); }
.dz-addr .lnk.tx { border-color: rgba(111,216,176,.26); color: #7fd6a8; }
.dz-note { margin-top: 10px; font-family: 'Instrument Serif', Georgia, serif; font-style: italic; font-size: 14px; color: #a99ad6; }
.dz-side { display: flex; align-items: center; gap: 20px; }
.dz-amt { text-align: right; }
.dz-amt .usd { font-size: 22px; font-weight: 700; letter-spacing: -.02em; color: #eafaf2; min-height: 1em; }
.dz-amt .usd.dim { color: #6d7d8b; }
.dz-amt .sub { margin-top: 4px; font-family: 'JetBrains Mono', monospace; font-size: 11.5px; color: #7f8f9d; }
.dz-amt .short { margin-top: 5px; display: inline-block; padding: 2px 7px; border-radius: 6px; font-size: 11px; font-weight: 600; background: rgba(224,180,106,.14); color: #e0b46a; }
.dz-pill { flex: none; min-width: 74px; text-align: center; padding: 7px 12px; border-radius: 999px; font-size: 12px; font-weight: 600; letter-spacing: .02em; border: 1px solid; }
.dz-pill.paid { background: rgba(111,216,176,.14); color: #7fd6a8; border-color: rgba(111,216,176,.32); }
.dz-pill.unpaid { background: rgba(111,182,205,.1); color: #8fc6d8; border-color: rgba(111,182,205,.28); }
.dz-empty { padding: 60px 20px; text-align: center; color: #6d7d8b; font-size: 14px; }
.dz-empty.err { color: #f06565; }
.dz-foot { display: flex; justify-content: space-between; align-items: center; padding: 14px 18px; font-size: 12px; color: #6d7d8b; }
@media (max-width: 760px) {
  .dz { padding: 0 10px 40px; }
  .dz-head { padding: 22px 0 16px; }
  .dz-head h1 { font-size: 44px; }
  .dz-row { grid-template-columns: 1fr; gap: 12px; padding: 14px 14px 14px 18px; }
  .dz-side { justify-content: space-between; }
  .dz-amt { text-align: left; }
  .dz-row.mine::after { top: 6px; right: 12px; }
  .dz-search input { font-size: 16px; }
}

/* ── Home (from the owner's Claude Design "Home" artboard) ───────────────────────────────────── */
#home { background: radial-gradient(1200px 620px at 50% -180px, rgba(29,39,51,.9) 0%, rgba(20,24,29,0) 62%); font-family: 'DM Sans', -apple-system, BlinkMacSystemFont, sans-serif; color: #e7ecf2; }
.hz-bar { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 12px; padding: 16px 18px; border-bottom: 1px solid rgba(255,255,255,.06); }
.hz-lbl { font-size: 13px; font-weight: 700; letter-spacing: .02em; color: #e7ecf2; }
.hz-rows { display: flex; flex-direction: column; }
.hz-row { position: relative; display: grid; grid-template-columns: auto minmax(0, 1fr) auto; align-items: center; gap: 14px; padding: 14px 20px; border-bottom: 1px solid rgba(255,255,255,.05); cursor: pointer; transition: background .16s ease; }
.hz-row:hover { background: rgba(255,255,255,.035); }
.hz-row::before { content: ''; position: absolute; left: 0; top: 16%; bottom: 16%; width: 3px; border-radius: 0 3px 3px 0; background: transparent; }
.hz-row.hot::before { background: var(--tint); }
.hz-row .av { flex: none; display: flex; align-items: center; justify-content: center; width: 38px; height: 38px; border-radius: 50%; overflow: hidden; background: var(--tint-bg); border: 1px solid var(--tint-edge); font-size: 14px; font-weight: 700; letter-spacing: .02em; color: var(--tint-fg); }
.hz-row .av img { width: 100%; height: 100%; object-fit: cover; }
.hz-row .body { min-width: 0; display: flex; flex-direction: column; }
.hz-row .nm { font-size: 15px; font-weight: 500; color: #9aa8b5; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.hz-row.hot .nm { font-weight: 700; color: #f2f6fa; }
.hz-row .sub { margin-top: 3px; font-size: 12px; color: #93a3b1; }
.hz-row.hot .sub { color: #b6c8d4; }
.hz-row .right { display: flex; align-items: center; gap: 12px; }
.hz-row .cnt { min-width: 34px; text-align: center; padding: 5px 10px; border-radius: 999px; font-size: 13px; font-weight: 700; background: linear-gradient(140deg, #6fb6cd, #589eb6); color: #0d1418; animation: hzpulse 2.6s ease-in-out infinite; }
@keyframes hzpulse { 0%, 100% { box-shadow: 0 0 0 0 rgba(111,182,205,.45); } 50% { box-shadow: 0 0 0 6px rgba(111,182,205,0); } }
.hz-row .clear { display: flex; align-items: center; gap: 6px; font-size: 12px; color: #8fb3a2; }
.hz-row .clear i { width: 15px; height: 15px; border-radius: 50%; border: 1px solid rgba(111,216,176,.4); display: flex; align-items: center; justify-content: center; font-size: 9px; font-style: normal; color: #7fd6a8; }
.hz-row .chev { font-size: 15px; color: #5c6b78; }
.hz-zero { padding: 48px 20px; text-align: center; }
.hz-zero .big { font-family: 'Instrument Serif', Georgia, serif; font-style: italic; font-size: 24px; color: #7fd6a8; }
.hz-zero .sm { margin-top: 6px; font-size: 13px; color: #6d7d8b; }
/* who is on the portal right now — admins only, above the account rows */
.hz-pres { display: flex; flex-wrap: wrap; gap: 8px; padding: 12px 18px; border-bottom: 1px solid rgba(255,255,255,.06); }
.hz-pres .rp { display: inline-flex; align-items: center; gap: 8px; padding: 6px 12px; border-radius: 999px; font-size: 12.5px; background: rgba(255,255,255,.03); border: 1px solid rgba(255,255,255,.06); color: #8b9aa8; cursor: default; }
.hz-pres .rp i { flex: none; width: 7px; height: 7px; border-radius: 50%; background: #55636f; }
.hz-pres .rp.on { background: rgba(111,216,176,.1); border-color: rgba(111,216,176,.26); color: #bfe7d6; }
.hz-pres .rp.on i { background: #6fd8b0; animation: rppulse 2.6s ease-in-out infinite; }
@keyframes rppulse { 0%, 100% { box-shadow: 0 0 0 0 rgba(111,216,176,.5); } 50% { box-shadow: 0 0 0 5px rgba(111,216,176,0); } }
@media (max-width: 760px) { .hz-row { padding: 12px 14px; } .hz-pres { padding: 10px 14px; } }

/* ── Statistics (from the owner's Claude Design "Statistics" artboard) ───────────────────────── */
#stats { background: radial-gradient(1200px 620px at 50% -180px, rgba(29,39,51,.9) 0%, rgba(20,24,29,0) 62%); font-family: 'DM Sans', -apple-system, BlinkMacSystemFont, sans-serif; color: #e7ecf2; }
.sz-views { display: inline-flex; gap: 4px; margin-top: 0; padding: 5px; border-radius: 14px; background: rgba(0,0,0,.3); border: 1px solid rgba(255,255,255,.06); }
.sz-views button { padding: 10px 26px; border: 0; border-radius: 10px; font: 700 14px 'DM Sans', sans-serif; letter-spacing: .01em; color: #93a3b1; background: transparent; cursor: pointer; transition: all .2s ease; }
.sz-views button:hover { filter: brightness(1.2); }
.sz-views button.on[data-v="income"] { background: linear-gradient(140deg, rgba(111,216,176,.92), rgba(67,163,130,.85)); color: #0d1418; box-shadow: 0 5px 20px -7px rgba(111,216,176,.9); }
.sz-views button.on[data-v="activity"] { background: linear-gradient(140deg, rgba(111,182,205,.92), rgba(88,158,182,.85)); color: #0d1418; box-shadow: 0 5px 20px -7px rgba(111,182,205,.9); }
.sz-sec { display: flex; align-items: center; gap: 14px; margin-bottom: 14px; }
.sz-sec .note { font-size: 12px; }
.sz-sec .note.green { color: #86a396; }
.sz-sec .note.teal { color: #8fa8b6; }
.sz-sec .line { flex: 1; height: 1px; background: rgba(255,255,255,.06); }
.sz-range button { padding: 7px 13px; font-size: 12.5px; }
.sz-range button.on { background: linear-gradient(140deg, rgba(255,255,255,.16), rgba(255,255,255,.08)); color: #e7ecf2; box-shadow: none; }
.sz-cards { display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: 12px; animation: szfade .3s ease both; }
@keyframes szfade { from { opacity: 0; transform: translateY(4px); } to { opacity: 1; transform: none; } }
.sz-card { position: relative; overflow: hidden; padding: 20px 22px; border-radius: 18px; background: rgba(31,38,45,.82); border: 1px solid rgba(255,255,255,.07); }
/* the rep's withdrawable balance — a cut the split could not route to their wallet */
.sz-bal { display: flex; flex-wrap: wrap; align-items: center; gap: 14px; margin-top: 12px; padding: 18px 22px;
  border-radius: 18px; border: 1px solid rgba(111,216,176,.28); background: linear-gradient(150deg, rgba(111,216,176,.12), rgba(31,38,45,.9) 62%); }
.sz-bal.asked { border-color: rgba(214,178,106,.32); background: linear-gradient(150deg, rgba(214,178,106,.12), rgba(31,38,45,.9) 62%); }
.sz-bal .l { display: grid; gap: 2px; flex: 1; min-width: 180px; }
.sz-bal .l small { font-size: 11px; letter-spacing: .04em; text-transform: uppercase; color: var(--muted); }
.sz-bal .l b { font-size: 26px; font-weight: 600; line-height: 1.1; }
.sz-bal .l .sub { font-size: 12px; color: var(--muted); }
.sz-bal .r { flex: none; }
.sz-bal .asked-lbl { font-size: 12px; color: #d6b26a; }
/* email work: the same card in the mailbox's teal, so it does not read as a BTC withdrawal */
.sz-bal.mailwork { border-color: rgba(111,182,205,.28); background: linear-gradient(150deg, rgba(111,182,205,.12), rgba(31,38,45,.9) 62%); }
.sz-bal.mailwork .asked-lbl { color: #8fc6d8; }
.sz-bal .to { flex-basis: 100%; font-size: 11px; color: var(--muted); }
.sz-bal .to code { font-size: 11px; word-break: break-all; }
.sz-card.hero.green { --tint: rgba(111,216,176,.15); background: linear-gradient(150deg, rgba(111,216,176,.16), rgba(31,38,45,.9) 62%); border-color: rgba(111,216,176,.28); }
.sz-card.hero.teal { --tint: rgba(111,182,205,.15); background: linear-gradient(150deg, rgba(111,182,205,.16), rgba(31,38,45,.9) 62%); border-color: rgba(111,182,205,.28); }
.sz-card .shine { position: absolute; inset: 0; background: linear-gradient(100deg, transparent 40%, var(--tint) 50%, transparent 60%); background-size: 240% 100%; animation: dzsweep 5.5s linear infinite; }
.sz-card small { position: relative; display: block; font-size: 11px; letter-spacing: .14em; text-transform: uppercase; color: #7fa9bd; margin: 0; }
.sz-card.hero.green small { color: #7fc9a9; }
.sz-card.hero.teal small { color: #8fc6d8; }
.sz-card b { position: relative; display: block; margin-top: 8px; font-size: 38px; font-weight: 700; line-height: 1; letter-spacing: -.03em; color: #e7ecf2; }
.sz-card.hero.green b { color: #eafaf2; }
.sz-card.hero.teal b { color: #eaf6fb; }
.sz-card .sub { position: relative; margin-top: 10px; display: flex; align-items: center; gap: 7px; font-size: 12px; color: #9fb5c3; }
.sz-card .badge { display: inline-flex; align-items: center; gap: 4px; padding: 2px 7px; border-radius: 6px; font-weight: 700; background: rgba(111,216,176,.16); color: #7fd6a8; }
.sz-chart { margin-top: 12px; padding: 22px 24px 18px; }
.sz-chart .ttl { font-size: 13px; font-weight: 700; color: #e7ecf2; }
.sz-chart .sum { margin-top: 4px; font-size: 12px; color: #93a3b1; }
.sz-plot { position: relative; margin-top: 22px; display: grid; grid-template-columns: 46px minmax(0, 1fr); gap: 10px; }
.sz-plot .yaxis { position: relative; height: 190px; }
.sz-plot .yaxis span { position: absolute; right: 0; transform: translateY(-50%); font-family: 'JetBrains Mono', monospace; font-size: 10.5px; color: #7f8f9d; }
.sz-plot .area { position: relative; height: 190px; }
.sz-plot .area .grid { position: absolute; left: 0; right: 0; height: 1px; background: rgba(255,255,255,.055); }
.sz-plot .area .avg { position: absolute; left: 0; right: 0; height: 1px; background: repeating-linear-gradient(90deg, rgba(169,154,214,.6) 0 5px, transparent 5px 10px); }
.sz-plot .area .avgl { position: absolute; right: 0; transform: translateY(-140%); font-size: 10.5px; letter-spacing: .04em; color: #b3a5dd; }
.sz-plot .bars { position: absolute; inset: 0; display: flex; align-items: flex-end; }
.sz-plot .bar { position: relative; flex: 1 1 0; min-width: 0; height: 100%; display: flex; flex-direction: column; justify-content: flex-end; }
.sz-plot .fill { width: 100%; border-radius: 4px 4px 2px 2px; transform-origin: bottom; animation: szgrow .6s cubic-bezier(.2,.8,.3,1) both; transition: background .15s ease; }
@keyframes szgrow { from { transform: scaleY(0); } to { transform: scaleY(1); } }
.sz-plot .bars.green .fill { background: linear-gradient(180deg, #6fd8b0, #43a382); }
.sz-plot .bars.green .fill.hot { background: linear-gradient(180deg, #96e8c8, #6fd8b0); box-shadow: 0 0 18px -2px rgba(111,216,176,.7); }
.sz-plot .bars.teal .fill { background: linear-gradient(180deg, #6fb6cd, #4d8ba3); }
.sz-plot .bars.teal .fill.hot { background: linear-gradient(180deg, #8fd0e4, #6fb6cd); box-shadow: 0 0 18px -2px rgba(111,182,205,.7); }
.sz-plot .fill.zero { background: rgba(255,255,255,.055) !important; box-shadow: none !important; }
/* earned but not sent yet: same green family one step down, hatched so it reads as pending without relying on
   colour, 2px of surface between it and the solid part below (owner, 2026-10-03) */
.sz-plot .bars.green .fill.pending { background: repeating-linear-gradient(45deg, rgba(255,255,255,.17) 0 3px, rgba(255,255,255,0) 3px 7px), #17825f; }
.sz-plot .bars.green .bar:hover .fill.pending { background: repeating-linear-gradient(45deg, rgba(255,255,255,.24) 0 3px, rgba(255,255,255,0) 3px 7px), #1d9a71; }
.sz-plot .fill.stacked { margin-bottom: 2px; }
.sz-plot .fill.under { border-radius: 0 0 2px 2px; }
.sz-legend { margin-top: 10px; display: flex; flex-wrap: wrap; gap: 6px 16px; font-size: 11.5px; color: #93a3b1; }
.sz-legend span { display: inline-flex; align-items: center; gap: 6px; }
.sz-legend .sw { width: 10px; height: 10px; border-radius: 3px; flex: none; }
.sz-legend .sw.paid { background: linear-gradient(180deg, #6fd8b0, #43a382); }
.sz-legend .sw.owed { background: repeating-linear-gradient(45deg, rgba(255,255,255,.17) 0 3px, rgba(255,255,255,0) 3px 7px), #17825f; }
.sz-plot .tip { position: absolute; left: 50%; transform: translateX(-50%); white-space: nowrap; padding: 6px 9px; border-radius: 8px; background: #0e1418; border: 1px solid rgba(255,255,255,.16); font-size: 11.5px; color: #e7ecf2; box-shadow: 0 10px 24px -10px rgba(0,0,0,.9); z-index: 2; pointer-events: none; }
.sz-plot .xaxis { position: relative; height: 18px; margin-top: 8px; }
.sz-plot .xaxis span { position: absolute; transform: translateX(-50%); font-family: 'JetBrains Mono', monospace; font-size: 10.5px; color: #7f8f9d; white-space: nowrap; }
.sz-foot { margin-top: 14px; padding-top: 14px; border-top: 1px solid rgba(255,255,255,.06); display: flex; flex-wrap: wrap; gap: 18px; font-size: 12px; color: #93a3b1; }
.sz-foot strong { color: #e7ecf2; font-weight: 700; }
@media (max-width: 760px) {
  .sz-views button { padding: 8px 18px; }
  .sz-card b { font-size: 30px; }
  .sz-plot { grid-template-columns: 40px minmax(0, 1fr); }
  .sz-plot .xaxis span:nth-child(even) { display: none; }
}

/* ── Admin panel (from the owner's Claude Design "Admin Panel" board) ─────────────────────────── */
#settings { display: flex; flex-direction: column; background: #14181d; font-family: 'DM Sans', -apple-system, BlinkMacSystemFont, sans-serif; color: #e7ecf2; }
#settings .settings { display: none; }
.adm-nav { position: sticky; top: 0; z-index: 5; display: flex; align-items: stretch; gap: 26px; padding: 0 28px; background: rgba(23,28,33,.96); border-bottom: 1px solid rgba(255,255,255,.07); backdrop-filter: blur(8px); }
.adm-nav .brand { display: flex; align-items: center; gap: 9px; padding-right: 8px; font-size: 13px; font-weight: 700; letter-spacing: .02em; color: #6fb6cd; }
.adm-nav .brand i { width: 7px; height: 7px; border-radius: 50%; background: #6fb6cd; }
.adm-nav .tabs { display: flex; flex-wrap: wrap; gap: 2px; min-width: 0; padding: 0; border: 0; }
.adm-nav .tabs button { position: relative; display: flex; align-items: center; gap: 7px; padding: 15px 14px 14px; border: 0; margin: 0; border-radius: 0; background: transparent; color: #8b9aa8; font: 500 13px 'DM Sans', sans-serif; white-space: nowrap; cursor: pointer; transition: color .15s ease; box-shadow: inset 0 -2px 0 0 transparent; }
.adm-nav .tabs button:hover { color: #e7ecf2; }
.adm-nav .tabs button.active { color: #e7ecf2; font-weight: 600; box-shadow: inset 0 -2px 0 0 #6fb6cd; }
.adm-nav .tabs button b { padding: 1px 6px; border-radius: 5px; font-size: 10.5px; font-weight: 700; background: rgba(111,182,205,.16); color: #8fc6d8; }
.adm-nav .tabs button b.bad { background: rgba(224,122,122,.16); color: #e79292; }
.adm-nav .grow { flex: 1; }
.adm-nav .upd { align-self: center; font-size: 12px; color: #7f8f9d; }
.adm-nav .adm-btn { align-self: center; margin-left: 10px; }
.adm { max-width: 1440px; width: 100%; margin: 0 auto; padding: 22px 28px 70px; }
.adm-btn { padding: 7px 12px; border-radius: 8px; border: 1px solid rgba(255,255,255,.1); background: rgba(255,255,255,.04); color: #b9c6d2; font: 500 12px 'DM Sans', sans-serif; cursor: pointer; white-space: nowrap; }
.adm-btn:hover { background: rgba(255,255,255,.09); color: #e7ecf2; }
.adm-btn.primary { border-color: rgba(111,216,176,.34); background: rgba(111,216,176,.12); color: #8fe0c0; font-weight: 600; }
.adm-btn.primary:hover { background: rgba(111,216,176,.22); }
.adm-btn.accent { border-color: rgba(111,182,205,.3); background: rgba(111,182,205,.11); color: #9ed3e3; font-weight: 600; }
.adm-btn.accent:hover { background: rgba(111,182,205,.2); }
.adm-btn.danger { border-color: rgba(224,122,122,.3); background: rgba(224,122,122,.1); color: #e79292; }
.adm-btn.tiny { padding: 3px 8px; font-size: 10.5px; }
.adm-btn.ok { color: #7fd6a8; }
.adm-btn:disabled { opacity: .5; cursor: default; }
.adm-input { box-sizing: border-box; padding: 9px 12px; border-radius: 9px; border: 1px solid rgba(255,255,255,.09); background: rgba(0,0,0,.24); color: #e7ecf2; font: 12.5px 'DM Sans', sans-serif; outline: none; }
.adm-input:focus { border-color: rgba(111,182,205,.5); }
.adm-input.grow { flex: 1 1 220px; min-width: 0; }
.adm-seg { display: flex; gap: 3px; padding: 3px; border-radius: 10px; background: rgba(0,0,0,.28); }
.adm-seg button { padding: 7px 13px; border: 0; border-radius: 8px; background: transparent; color: #93a3b1; font: 500 12.5px 'DM Sans', sans-serif; cursor: pointer; display: flex; align-items: center; gap: 6px; }
.adm-seg button:hover { filter: brightness(1.2); }
.adm-seg button.on { background: linear-gradient(140deg, rgba(111,182,205,.9), rgba(88,158,182,.78)); color: #0d1418; }
.adm-seg button b { padding: 1px 6px; border-radius: 6px; font-size: 11px; font-weight: 700; background: rgba(255,255,255,.12); color: inherit; }
.adm .muted, .adm-nav .muted { color: #7f8f9d; font-size: 12px; }
.adm .mono { font-family: 'JetBrains Mono', monospace; font-size: 11px; }
.adm-card { border-radius: 14px; background: #1b2126; border: 1px solid rgba(255,255,255,.06); overflow: hidden; display: flex; flex-direction: column; min-width: 0; }
.adm-card.gap { margin-top: 14px; }
.adm-card.narrow { max-width: 640px; }
.adm-card.stat { padding: 16px 18px; }
.adm-card.stat small { font-size: 10.5px; letter-spacing: .12em; text-transform: uppercase; color: #7fa9bd; }
.adm-card.stat b { margin-top: 7px; font-size: 24px; font-weight: 700; letter-spacing: -.02em; }
.adm-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 14px 18px; border-bottom: 1px solid rgba(255,255,255,.055); }
.adm-head .t { font-size: 13px; font-weight: 600; display: inline-flex; align-items: center; gap: 9px; }
.adm-head .right { display: inline-flex; align-items: center; gap: 10px; }
.adm-head .tt { display: flex; align-items: baseline; gap: 12px; }
.adm-head.wrap { flex-wrap: wrap; justify-content: flex-start; }
.adm-head.tools { padding: 12px 18px; }
#settings .badge { padding: 1px 7px; border-radius: 5px; font-size: 11px; font-weight: 700; }
.badge.bad { background: rgba(224,122,122,.16); color: #e79292; }
.badge.info { background: rgba(111,182,205,.14); color: #8fc6d8; }
.badge.warn { background: rgba(224,180,106,.16); color: #e6be7d; }
.adm-grid { display: grid; gap: 14px; align-items: stretch; }
.adm-grid.ov { grid-template-columns: minmax(0, 2fr) minmax(0, 1fr); }
.adm-grid.two { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
.adm-grid.four { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.adm-grid.audit { grid-template-columns: minmax(0, 1.2fr) minmax(0, 1fr); }
.adm-grid.gap { margin-top: 14px; }
.adm-col { display: grid; gap: 14px; align-content: start; }
.adm-toolbar { display: flex; flex-wrap: wrap; align-items: center; gap: 12px; margin-bottom: 14px; }
.adm-empty { padding: 44px 18px; text-align: center; font-size: 13px; color: #7f8f9d; }
.adm-empty.err { color: #f06565; }
.adm-foot { padding: 13px 18px; font-size: 12px; color: #7f8f9d; }
/* overview */
.adm-alert { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; align-items: center; gap: 12px; padding: 13px 18px; border-bottom: 1px solid rgba(255,255,255,.04); }
.adm-alert:hover { background: rgba(255,255,255,.022); }
.adm-alert[data-go] { cursor: pointer; }
.adm-alert .dot { width: 7px; height: 7px; border-radius: 50%; background: #e0b46a; }
.adm-alert.high .dot { background: #e07a7a; }
.adm-alert .t { font-size: 13.5px; font-weight: 600; color: #e7ecf2; }
.adm-alert.high .t { color: #f0a3a3; }
.adm-alert .s { margin-top: 3px; font-size: 12px; color: #93a3b1; }
.adm-alert .acts { display: inline-flex; gap: 6px; }
.adm-clear { flex: 1 1 auto; display: flex; flex-direction: column; align-items: center; justify-content: center; min-height: 64px; padding: 20px 18px; text-align: center; }
.adm-clear .ok { display: inline-flex; align-items: center; gap: 8px; font-size: 13px; font-weight: 600; color: #8fe0c0; }
.adm-clear .ok i { width: 16px; height: 16px; border-radius: 50%; border: 1px solid rgba(111,216,176,.45); display: flex; align-items: center; justify-content: center; font-size: 9px; font-style: normal; }
.adm-clear .s { margin-top: 5px; font-size: 12px; color: #7f8f9d; }
.adm-cells { display: grid; grid-template-columns: 1fr 1fr; }
.adm-cells.three { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.adm-cells .cell { padding: 14px 18px; border-bottom: 1px solid rgba(255,255,255,.04); border-right: 1px solid rgba(255,255,255,.04); }
.adm-cells .cell small { display: block; min-height: 26px; font-size: 10.5px; letter-spacing: .12em; text-transform: uppercase; color: #7fa9bd; }
.adm-cells .cell b { display: block; margin-top: 6px; font-size: 20px; font-weight: 700; letter-spacing: -.02em; color: #e7ecf2; }
.adm-cells .cell b.green { color: #8fe0c0; }
.adm-cells .cell b.violet { color: #c3b7e6; }
.adm-cells .cell span { display: block; margin-top: 4px; font-size: 11.5px; color: #93a3b1; }
.adm-cells.act .cell small { min-height: 0; margin-top: 4px; letter-spacing: 0; text-transform: none; font-size: 11.5px; color: #93a3b1; }
.adm-cells.act .cell b { margin-top: 0; }
.adm-cells.three .cell { padding: 16px 18px; }
.adm-cells.three .cell b { font-size: 24px; margin-top: 4px; }
/* stats */
.adm-btn.owners { display: inline-flex; align-items: center; gap: 8px; }
.adm-btn.owners i { width: 16px; height: 2px; border-radius: 2px; background: #a99ad6; }
.adm-btn.owners.on { border-color: rgba(169,154,214,.45); background: rgba(169,154,214,.14); color: #c3b7e6; }
.adm-btn.trend { display: inline-flex; align-items: center; gap: 8px; }
.adm-btn.trend i { width: 16px; height: 2px; border-radius: 2px; background: #e7ecf2; }
.adm-btn.trend.on { border-color: rgba(231,236,242,.32); background: rgba(231,236,242,.1); color: #e7ecf2; }
.adm-btn.cume.on { border-color: rgba(111,182,205,.34); background: rgba(111,182,205,.12); color: #9ed3e3; }
.adm-head.wrap .right { margin-left: auto; flex-wrap: wrap; }
.adm-seg button:disabled { opacity: .35; cursor: default; }
.adm-seg button:disabled:hover { filter: none; }
.adm-plot { display: grid; grid-template-columns: 52px minmax(0, 1fr); gap: 10px; padding: 20px 18px 14px; }
.adm-plot .yaxis { position: relative; height: 210px; }
.adm-plot .yaxis span { position: absolute; right: 0; transform: translateY(-50%); font-family: 'JetBrains Mono', monospace; font-size: 10.5px; color: #7f8f9d; }
.adm-plot .area { position: relative; height: 210px; }
.adm-plot .area .grid { position: absolute; left: 0; right: 0; height: 1px; background: rgba(255,255,255,.05); }
.adm-plot .bars { position: absolute; inset: 0; display: flex; align-items: flex-end; }
.adm-plot .bar { position: relative; flex: 1 1 0; min-width: 0; height: 100%; display: flex; align-items: flex-end; }
.adm-plot .fill { width: 100%; min-height: 2px; border-radius: 3px 3px 1px 1px; background: linear-gradient(180deg, #6fb6cd, #4d8ba3); transform-origin: bottom; animation: szgrow .5s cubic-bezier(.2,.8,.3,1) both; }
.adm-plot .fill.hot { background: linear-gradient(180deg, #8fd0e4, #6fb6cd); }
.adm-plot .fill.split { background: linear-gradient(to top, #9184cc 0 var(--o), #6fb6cd var(--o) 100%); }
.adm-plot .fill.split.hot { background: linear-gradient(to top, #b3a5dd 0 var(--o), #8fd0e4 var(--o) 100%); }
.adm-plot .fill.zero { background: rgba(255,255,255,.05) !important; }
.adm-plot .area .ma { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; pointer-events: none; z-index: 2; }
.adm-plot .area .ma polyline { fill: none; stroke: #e7ecf2; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; opacity: .85; }
.adm-plot .tip { position: absolute; left: 50%; transform: translateX(-50%); white-space: nowrap; padding: 6px 9px; border-radius: 8px; background: #0e1418; border: 1px solid rgba(255,255,255,.16); font-size: 11.5px; color: #e7ecf2; z-index: 3; pointer-events: none; }
.adm-plot .tip.left { left: 0; transform: none; }
.adm-plot .tip.right { left: auto; right: 0; transform: none; }
.adm-plot .xaxis { position: relative; height: 16px; margin-top: 8px; }
.adm-plot .xaxis span { position: absolute; font-family: 'JetBrains Mono', monospace; font-size: 10.5px; color: #7f8f9d; white-space: nowrap; }
.adm-split { padding: 16px 18px; }
.adm-split .bar { display: flex; height: 10px; border-radius: 6px; overflow: hidden; background: rgba(0,0,0,.3); }
.adm-split .bar i.own { background: linear-gradient(90deg, #a99ad6, #8f7fc4); }
.adm-split .bar i.fee { background: linear-gradient(90deg, #6fb6cd, #4d8ba3); }
.adm-split .rows { margin-top: 14px; display: grid; gap: 10px; }
.adm-split .r { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; align-items: center; gap: 10px; }
.adm-split .r i { width: 9px; height: 9px; border-radius: 3px; }
.adm-split .r i.own { background: #a99ad6; }
.adm-split .r i.fee { background: #6fb6cd; }
.adm-split .r span { font-size: 12.5px; color: #b9c6d2; }
.adm-split .r b { font-family: 'JetBrains Mono', monospace; font-size: 12.5px; font-weight: 500; color: #e7ecf2; }
.adm-month { display: grid; grid-template-columns: 72px minmax(0, 1fr) auto; align-items: center; gap: 12px; padding: 9px 18px; border-bottom: 1px solid rgba(255,255,255,.04); }
.adm-month:hover { background: rgba(255,255,255,.022); }
.adm-month .l, .adm-month .v { font-family: 'JetBrains Mono', monospace; font-size: 11.5px; }
.adm-month .l { color: #93a3b1; }
.adm-month .v { color: #e7ecf2; }
.adm-month .track { height: 6px; border-radius: 4px; background: rgba(0,0,0,.28); overflow: hidden; }
.adm-month .track i { display: block; height: 100%; border-radius: 4px; background: linear-gradient(90deg, #6fb6cd, #4d8ba3); }
.adm-month .track i.partial { background: repeating-linear-gradient(115deg, rgba(111,182,205,.55) 0 5px, rgba(111,182,205,.22) 5px 10px); }
/* orders */
.adm-order { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 14px; align-items: start; padding: 14px 18px; border-bottom: 1px solid rgba(255,255,255,.04); }
.adm-order:hover { background: rgba(255,255,255,.022); }
.adm-order .top { display: flex; flex-wrap: wrap; align-items: center; gap: 9px; }
.adm-order .item { font-size: 14px; font-weight: 600; color: #f2f6fa; }
.adm-order .acct { padding: 2px 7px; border-radius: 5px; font-size: 10.5px; font-weight: 700; letter-spacing: .04em; }
.adm-order .addr { margin-top: 6px; font-size: 12.5px; line-height: 1.5; color: #a4b3bf; overflow-wrap: anywhere; }   /* a long unbroken field must not widen the card */
.adm-order .items { margin-top: 4px; font-size: 12.5px; line-height: 1.5; color: #cdd8e1; }
.adm-order .items b { font-weight: 600; color: #7f8f9d; margin-right: 4px; }
.adm-order .top .tg { font-size: 11.5px; color: #8b9aa8; overflow-wrap: anywhere; }
.adm-order .meta { margin-top: 6px; display: flex; align-items: center; gap: 12px; }
.adm-order .meta .mono { font-size: 11.5px; color: #8b9aa8; }
.adm-order .link { padding: 0; border: 0; background: transparent; color: #7fc9dc; font: 11.5px 'DM Sans', sans-serif; cursor: pointer; }
.adm-order .raw { margin: 8px 0 0; padding: 10px 12px; border-radius: 8px; background: rgba(0,0,0,.3); border: 1px solid rgba(255,255,255,.06); font: 11.5px/1.6 'JetBrains Mono', monospace; color: #93a3b1; white-space: pre-wrap; }
.adm-order .acts { display: flex; flex-wrap: wrap; gap: 8px; justify-content: flex-end; }
/* affiliates */
.adm-cellgrid { display: grid; grid-template-columns: repeat(auto-fill, minmax(320px, 1fr)); }
.adm-cellgrid.wide { grid-template-columns: repeat(auto-fill, minmax(360px, 1fr)); }
.adm-aff { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; align-items: center; gap: 12px; padding: 12px 18px; border-bottom: 1px solid rgba(255,255,255,.04); border-right: 1px solid rgba(255,255,255,.04); }
.adm-aff:hover { background: rgba(255,255,255,.022); }
.adm-aff.click { cursor: pointer; }
.adm-avatar { position: relative; overflow: hidden; width: 32px; height: 32px; border-radius: 50%; display: inline-flex; align-items: center; justify-content: center; font-size: 12.5px; font-weight: 700; flex: none; }
.adm-avatar img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.adm-avatar.rank { background: rgba(111,182,205,.14); color: #8fc6d8; }
.adm-aff .n { font-size: 13.5px; font-weight: 600; color: #f2f6fa; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.adm-aff .h { margin-top: 2px; font-family: 'JetBrains Mono', monospace; font-size: 11px; color: #7f8f9d; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.adm-aff .right { text-align: right; display: flex; flex-direction: column; gap: 4px; align-items: flex-end; }
.adm-aff .e { font-size: 13px; font-weight: 700; color: #7f8f9d; }
.adm-aff .e.green { color: #8fe0c0; }
.adm-aff .s { font-size: 11px; color: #7f8f9d; }
/* wallets */
.adm-chip { width: 30px; height: 30px; border-radius: 50%; display: inline-flex; align-items: center; justify-content: center; font-size: 11px; font-weight: 700; flex: none; }
.adm-chip.sm { width: 22px; height: 22px; font-size: 9px; }
.adm-wallet { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; align-items: center; gap: 12px; padding: 13px 18px; border-bottom: 1px solid rgba(255,255,255,.04); }
.adm-wallet .n { font-size: 13px; font-weight: 600; color: #f2f6fa; }
.adm-wallet .h { margin-top: 3px; color: #7f8f9d; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.adm-wallet .right { text-align: right; }
.adm-wallet .right .mono { font-size: 12px; font-weight: 500; color: #e7ecf2; }
.adm-wallet .right .s { margin-top: 3px; display: flex; align-items: center; justify-content: flex-end; gap: 6px; font-size: 11px; color: #93a3b1; }
.adm-recv { padding: 13px 18px; border-bottom: 1px solid rgba(255,255,255,.04); border-right: 1px solid rgba(255,255,255,.04); }
.adm-recv .top { display: flex; align-items: center; justify-content: space-between; gap: 9px; }
.adm-recv .nm { display: flex; align-items: center; gap: 9px; min-width: 0; font-size: 12.5px; font-weight: 600; color: #f2f6fa; }
.adm-recv .acts { display: flex; gap: 6px; }
.adm-recv .sub { margin-top: 5px; font-size: 11.5px; }
.adm-recv .nm .ok { color: #7fd1a8; } .adm-recv .nm .err { color: #e79292; }
.adm-recv .acts .adm-btn { padding: 4px 10px; font-size: 11px; }
.adm-recv .addrs { margin-top: 8px; display: grid; gap: 5px; }
.adm-recv .a { display: flex; align-items: center; gap: 8px; min-width: 0; }
.adm-recv .a .n { flex: none; color: #5c6b78; }
.adm-recv .a code { flex: 1 1 auto; min-width: 0; color: #93a3b1; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.adm-recv .a input { flex: 1 1 auto; min-width: 0; padding: 5px 8px; border-radius: 6px; border-color: rgba(111,182,205,.4); }
/* people */
.adm-acct { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; align-items: center; gap: 12px; padding: 12px 18px; border-bottom: 1px solid rgba(255,255,255,.04); }
.adm-acct:hover { background: rgba(255,255,255,.022); }
.adm-acct .nm { font-size: 13.5px; font-weight: 600; color: #f2f6fa; }
.adm-acct .meta { margin-top: 2px; color: #7f8f9d; }
.adm-acct .acct-btns { display: flex; gap: 8px; }
/* account saver backup panel */
.bkp-head { display: flex; align-items: center; gap: 12px; padding: 10px 12px 8px; }
.bkp-head .muted { font-size: 12px; line-height: 1.4; }
#bkpSave { flex: none; align-self: flex-start; }
.bkp-row { padding: 9px 10px; border-radius: 10px; }
.bkp-row:hover { background: var(--bg); }
.bkp-row .top { display: flex; justify-content: space-between; align-items: baseline; }
.bkp-row .top .name { font-size: 13px; font-weight: 600; color: #f2f6fa; }
.bkp-row .top .account { font-size: 11px; color: var(--muted); }
.bkp-row .preview { font-size: 12px; color: #9fb0bd; margin-top: 2px; }
.bkp-restore { border-top: 1px solid rgba(255,255,255,.06); margin-top: 6px; padding: 12px; display: grid; gap: 8px; }
.bkp-rlabel { font-size: 12px; line-height: 1.4; }
.bkp-rrow { display: flex; gap: 8px; }
.bkp-rrow select { flex: 1; min-width: 0; padding: 7px 10px; border-radius: 8px; border: 1px solid rgba(255,255,255,.1); background: rgba(255,255,255,.04); color: #d7e2ec; font: 500 12px 'DM Sans', sans-serif; }
.bkp-plan { background: rgba(255,255,255,.03); border: 1px solid rgba(255,255,255,.07); border-radius: 10px; padding: 10px; display: grid; gap: 8px; }
.bkp-plan-h { font-size: 12.5px; color: #e8eef4; }
.bkp-plan-list { list-style: none; margin: 0; padding: 0; display: grid; gap: 3px; font-size: 12px; }
.bkp-plan-list li { display: flex; justify-content: space-between; gap: 10px; color: #b9c6d2; }
.bkp-plan-list li em { color: #7f8f9d; font-style: normal; text-align: right; }
.bkp-plan-list li.done { color: #6fd8b0; } .bkp-plan-list li.failed { color: #f0a0a0; } .bkp-plan-list li.skipped { color: #7f8f9d; }
.bkp-plan .err { color: #f0a0a0; font-size: 12px; }
.bkp-plan .bkp-ok { color: #6fd8b0; font-size: 12px; }
.bkp-uname { font-size: 12px; color: #b9c6d2; display: flex; gap: 6px; align-items: center; }
.adm-linkform { display: grid; gap: 8px; padding: 12px 18px; border-bottom: 1px solid rgba(255,255,255,.04); }
.adm-linkform .hint { font-size: 12px; }
.adm-login { padding: 13px 18px; border-bottom: 1px solid rgba(255,255,255,.04); }
.adm-login:hover { background: rgba(255,255,255,.022); }
.adm-login .top { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; align-items: center; gap: 12px; }
.adm-login .nm { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; }
.adm-login .name { font-size: 13.5px; font-weight: 600; color: #f2f6fa; }
.adm-login .role { padding: 1px 7px; border-radius: 5px; font-size: 10.5px; font-weight: 700; letter-spacing: .04em; background: rgba(111,182,205,.14); color: #8fc6d8; }
.adm-login .role.admin { background: rgba(169,154,214,.16); color: #b3a5dd; }
.adm-login .role.viewer { background: rgba(139,154,168,.16); color: #a8b4c0; }
.adm-login .role.click { cursor: pointer; }
.adm-login .role.click:hover { filter: brightness(1.25); }
.adm-login .pct { padding: 0; border: 0; background: none; font-family: 'JetBrains Mono', monospace; font-size: 11px; color: #8b9aa8; cursor: pointer; border-bottom: 1px dashed rgba(139,154,168,.5); }
.adm-login .paused { padding: 1px 7px; border-radius: 5px; font-size: 10.5px; font-weight: 700; background: rgba(224,180,106,.16); color: #e6be7d; }
.adm-login .meta { margin-top: 3px; color: #7f8f9d; }
.adm-login .meta.click { cursor: pointer; border-bottom: 1px dashed rgba(127,143,157,.4); display: inline-block; }
.adm-login .right { text-align: right; }
.adm-login .right b { display: block; font-size: 13px; font-weight: 700; color: #e7ecf2; }
.adm-login .right small { display: block; margin-top: 2px; font-size: 11px; color: #7f8f9d; }
.adm-login .right b.owes { margin-top: 8px; color: #6fd8b0; }   /* a rep cut the split could not route — owed until the admin pays it by hand */
.adm-login .acts { margin-top: 10px; display: flex; flex-wrap: wrap; gap: 7px; }
.adm-login .acts .adm-btn { padding: 6px 11px; font-size: 11.5px; }
.adm-login .acts input { padding: 4px 8px; border-radius: 7px; border: 1px solid rgba(111,182,205,.4); background: rgba(0,0,0,.3); color: #e7ecf2; font-size: 12px; outline: none; }
.adm-addlogin { margin-top: auto; display: grid; grid-template-columns: 1fr 1fr; gap: 8px; padding: 14px 18px; }
.adm-addlogin .adm-btn.primary { background: linear-gradient(140deg, rgba(111,182,205,.95), rgba(88,158,182,.85)); border: 0; color: #0d1418; font-weight: 700; padding: 9px 12px; }
.adm-addlogin .hint { grid-column: 1 / -1; font-size: 12px; }
/* settings */
.adm-toggle { display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: center; gap: 14px; padding: 14px 18px; border-bottom: 1px solid rgba(255,255,255,.04); cursor: pointer; }
.adm-toggle:hover { background: rgba(255,255,255,.022); }
.adm-toggle .l { font-size: 13px; font-weight: 500; color: #e7ecf2; }
.adm-toggle .h { margin-top: 3px; font-size: 12px; line-height: 1.45; color: #93a3b1; }
.adm-toggle .track { flex: none; width: 40px; height: 22px; border-radius: 999px; padding: 2px; background: rgba(255,255,255,.12); transition: background .18s ease; box-sizing: border-box; display: block; }
.adm-toggle .track i { display: block; width: 18px; height: 18px; border-radius: 50%; background: #93a3b1; transition: transform .18s ease; }
.adm-toggle .track.on { background: rgba(111,182,205,.85); }
.adm-toggle .track.on i { background: #0d1418; transform: translateX(18px); }
/* audit */
.adm-block { padding: 13px 18px; border-bottom: 1px solid rgba(255,255,255,.04); }
.adm-block:hover { background: rgba(255,255,255,.022); }
.adm-block .top { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: 8px; font-size: 13px; }
.adm-block .top b { font-weight: 700; color: #f2f6fa; }
.adm-block .mid { margin-top: 8px; display: flex; flex-wrap: wrap; align-items: center; gap: 8px; font-size: 12px; color: #a4b3bf; }
.adm-block .kind { padding: 2px 8px; border-radius: 999px; font-size: 10.5px; font-weight: 700; letter-spacing: .04em; border: 1px solid rgba(224,122,122,.4); color: #e79292; }
.adm-block .txt { margin-top: 8px; padding: 9px 11px; border-radius: 8px; background: rgba(0,0,0,.3); font-size: 11.5px; color: #93a3b1; overflow: hidden; text-overflow: ellipsis; }
.adm-log { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 12px; padding: 12px 18px; border-bottom: 1px solid rgba(255,255,255,.04); }
.adm-log:hover { background: rgba(255,255,255,.022); }
.adm-log i { margin-top: 5px; width: 6px; height: 6px; border-radius: 50%; }
.adm-log .top { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: 8px; }
.adm-log .k { font-size: 12.5px; font-weight: 600; color: #e7ecf2; }
.adm-log .d { margin-top: 3px; font-size: 11.5px; line-height: 1.5; color: #93a3b1; word-break: break-all; }
/* inactive-affiliate check (2026-09-28): a held split on the Overview + the Affiliates → Affiliate activity card */
.adm-alert.dead { grid-template-columns: auto minmax(0, 1fr); box-shadow: inset 3px 0 0 #e0b46a; }
.adm-alert.dead .acts { grid-column: 2; flex-wrap: wrap; margin-top: 2px; }
.adm-state { display: inline-block; padding: 2px 8px; border-radius: 999px; font-size: 10.5px; font-weight: 700; letter-spacing: .04em; background: rgba(255,255,255,.07); color: #93a3b1; white-space: nowrap; }
.adm-state.bad { background: rgba(224,122,122,.16); color: #e79292; }
.adm-state.warn { background: rgba(224,180,106,.16); color: #e6be7d; }
.adm-state.ok { background: rgba(111,216,176,.14); color: #8fe0c0; }
.adm-head .right .actn { margin: 0 6px 0 -4px; font-size: 12px; color: #b9c6d2; }
.adm-tablewrap { overflow-x: auto; }
.adm-table { width: 100%; border-collapse: collapse; font-size: 12.5px; }
.adm-table th { padding: 10px 12px; text-align: left; font-size: 10.5px; font-weight: 600; letter-spacing: .1em; text-transform: uppercase; color: #7fa9bd; border-bottom: 1px solid rgba(255,255,255,.055); white-space: nowrap; }
.adm-table td { padding: 11px 12px; vertical-align: top; color: #cdd8e1; border-bottom: 1px solid rgba(255,255,255,.04); }
.adm-table th:first-child, .adm-table td:first-child { padding-left: 18px; }
.adm-table tr:hover td { background: rgba(255,255,255,.022); }
.adm-table td b { color: #f2f6fa; font-weight: 600; }
.adm-table td .muted { font-size: 11px; }
.adm-table td.nowrap { white-space: nowrap; }
.adm-table td.why { min-width: 220px; max-width: 360px; font-size: 11.5px; line-height: 1.45; color: #93a3b1; }
.adm-meter { margin-top: 5px; width: 90px; height: 4px; border-radius: 3px; background: rgba(0,0,0,.3); overflow: hidden; }
.adm-meter i { display: block; height: 100%; background: #6fb6cd; }
.adm-meter.bad i { background: #e07a7a; }
.adm-meter.warn i { background: #e0b46a; }
.adm-meter.ok i { background: #6fd8b0; }
.adm-sw { width: 40px; height: 22px; padding: 2px; border: 0; border-radius: 999px; background: rgba(255,255,255,.12); cursor: pointer; transition: background .18s ease; }
.adm-sw i { display: block; width: 18px; height: 18px; border-radius: 50%; background: #93a3b1; transition: transform .18s ease; }
.adm-sw.on { background: rgba(111,182,205,.85); }
.adm-sw.on i { background: #0d1418; transform: translateX(18px); }
.adm-sw:disabled { opacity: .5; cursor: default; }
@media (max-width: 900px) {
  /* phones: iOS Safari stops painting a sticky + backdrop-filter bar inside a scrolling page once the
     page grows (the nav flashed, then left a blank band), and the one-row strip wrapped into 3 ragged
     rows. So: a plain block — Admin + Refresh on one line, every tab visible as a button grid below. */
  .adm-nav { position: static; flex-wrap: wrap; align-items: center; gap: 10px 12px; padding: 12px 12px 12px;
             overflow: visible; background: #171c21; backdrop-filter: none; -webkit-backdrop-filter: none; }
  .adm-nav .brand { order: 0; padding-right: 0; }
  .adm-nav .grow { order: 1; }
  .adm-nav .upd { display: none; }
  .adm-nav .adm-btn { order: 2; margin-left: 0; }
  .adm-nav .tabs { order: 3; flex: 1 0 100%; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 6px; overflow: visible; }
  .adm-nav .tabs button { justify-content: center; padding: 9px 4px; border-radius: 9px; background: rgba(255,255,255,.045); font-size: 12.5px; box-shadow: none; }
  .adm-nav .tabs button.active { background: rgba(111,182,205,.16); box-shadow: inset 0 0 0 1px rgba(111,182,205,.45); }
  .adm { padding: 14px 12px 60px; }
  .adm-grid.ov, .adm-grid.two, .adm-grid.audit { grid-template-columns: minmax(0, 1fr); }
  .adm-grid.four { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .adm-cells.three { grid-template-columns: 1fr 1fr; }
  .adm-order { grid-template-columns: minmax(0, 1fr); }
  .adm-order .acts { justify-content: flex-start; }
  .adm-addlogin { grid-template-columns: 1fr; }
}
@media (max-width: 360px) { .adm-nav .tabs { grid-template-columns: repeat(3, minmax(0, 1fr)); } }   /* "Orders 541" needs the room */
.adm-cells .cell.click { cursor: pointer; }
.adm-cells .cell.click:hover { background: rgba(255,255,255,.022); }
/* the pickers (an account in Messages, a store in Emails): the same unread pill + chevron as Home */
.chats .chat:is([data-account], [data-store]) { padding: 12px 12px 12px 12px; }
.chats .chat:is([data-account], [data-store]) .acct-right { display: flex; align-items: center; gap: 12px; margin-left: auto; }
.chats .chat:is([data-account], [data-store]) .cnt { min-width: 34px; text-align: center; padding: 5px 10px; border-radius: 999px; font-size: 13px; font-weight: 700; background: linear-gradient(140deg, #6fb6cd, #589eb6); color: #0d1418; animation: hzpulse 2.6s ease-in-out infinite; }
.chats .chat:is([data-account], [data-store]) .chev { font-size: 15px; color: #5c6b78; }

/* a message the portal can't render (contact card, location, poll): a stub, not a dropped message */
.msg .unsup { opacity: .7; font-style: italic; }

/* the owner's account: other admins can't change or remove it */
#reps .role.owner { background: rgba(230, 162, 74, .16); color: #e6a24a; }

/* ── one transaction, opened from the Transactions list (the owner's "Transaction Detail" board) ── */
.dz-row.open { cursor: pointer; }
.dz-row.open:focus-visible { outline: 2px solid var(--accent); outline-offset: -2px; }
.modal.tx { align-items: flex-start; padding: 48px 20px; overflow-y: auto; background: rgba(8,11,15,.72); backdrop-filter: blur(6px); animation: veilIn .16s ease both; }
@keyframes veilIn { from { opacity: 0; } to { opacity: 1; } }
@keyframes sheetIn { from { opacity: 0; transform: translateY(14px) scale(.985); } to { opacity: 1; transform: none; } }
.tx-sheet { width: 100%; max-width: 640px; border-radius: 18px; background: var(--panel); border: 1px solid rgba(255,255,255,.09);
  box-shadow: 0 30px 80px rgba(0,0,0,.6); overflow: hidden; animation: sheetIn .22s cubic-bezier(.2,.8,.3,1) both; }
.tx-sheet header { display: grid; grid-template-columns: minmax(0,1fr) auto; gap: 14px; align-items: start; padding: 20px 22px 18px;
  border-bottom: 1px solid rgba(255,255,255,.06); background: linear-gradient(140deg, rgba(111,182,205,.1), transparent 62%); }
.tx-sheet header.paid { background: linear-gradient(140deg, rgba(111,216,176,.12), transparent 62%); }
.tx-sheet .nm { display: flex; flex-wrap: wrap; align-items: baseline; gap: 10px; }
.tx-sheet .nm .merchant { font-size: 21px; font-weight: 700; letter-spacing: -.01em; }
.tx-sheet .nm .id { font-family: var(--mono, monospace); font-size: 13px; color: #8b9aa8; }
.tx-sheet .pills { display: flex; flex-wrap: wrap; align-items: center; gap: 9px; margin-top: 9px; }
.tx-sheet .pills .chip { display: inline-flex; align-items: center; gap: 6px; padding: 3px 10px; border-radius: 999px; font-size: 11.5px;
  font-weight: 600; background: color-mix(in srgb, var(--hue) 16%, transparent); color: var(--hue); }
.tx-sheet .pills .chip i { width: 5px; height: 5px; border-radius: 50%; background: var(--hue); }
.tx-sheet .pills .dz-pill { min-width: 0; padding: 3px 10px; font-size: 11.5px; }
.tx-sheet .amt { display: flex; align-items: flex-start; }
.tx-sheet .amt .x { width: 30px; height: 30px; border-radius: 9px; border: 1px solid rgba(255,255,255,.1); background: rgba(255,255,255,.04);
  color: #93a3b1; font-size: 15px; line-height: 1; cursor: pointer; }
.tx-sheet .amt .x:hover { background: rgba(255,255,255,.1); color: var(--text); }
.tx-note.paused { color: #e79292; background: rgba(224,122,122,.08); }
.dz-pill.paused { color: #e79292; background: rgba(224,122,122,.12); border-color: rgba(224,122,122,.3); }
.tx-note { margin: 0; padding: 12px 22px; font-size: 12.5px; color: #e0b46a; background: rgba(230,180,106,.07); border-bottom: 1px solid rgba(255,255,255,.06); }
.tx-sheet section { padding: 20px 22px 4px; }
.tx-sheet h4 { margin: 0 0 14px; font-size: 10.5px; letter-spacing: .14em; text-transform: uppercase; color: #7fa9bd; font-weight: 600; }
.tx-time { list-style: none; margin: 0; padding: 0; }
.tx-time li { position: relative; display: grid; grid-template-columns: 22px minmax(0,1fr); gap: 12px; }
.tx-time li > i { display: block; width: 11px; height: 11px; margin: 2px auto 0; border-radius: 50%;
  border: 2px solid rgba(255,255,255,.18); background: transparent; }
/* the connector is drawn on the ROW, so it always reaches the next dot however tall the text is
   (sizing it off the 11px dot left a gap under every step) */
.tx-time li:not(.last)::after { content: ''; position: absolute; left: 10px; top: 16px; bottom: -2px; width: 2px;
  background: rgba(255,255,255,.1); }
.tx-time li.done > i { background: #6fd8b0; border-color: rgba(111,216,176,.35); }
.tx-time li.done:not(.last)::after { background: rgba(111,216,176,.3); }
.tx-time li.cur > i { border-color: #6fb6cd; background: #6fb6cd; animation: dotPulse 2s ease-in-out infinite; }
@keyframes dotPulse { 0%,100% { box-shadow: 0 0 0 0 rgba(111,182,205,.5); } 50% { box-shadow: 0 0 0 7px rgba(111,182,205,0); } }
.tx-time li > div { padding-bottom: 16px; }
.tx-time .row { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: 8px; }
.tx-time .row b { font-size: 13.5px; font-weight: 600; color: #8b9aa8; }
.tx-time li.done .row b, .tx-time li.cur .row b { color: var(--text); }
.tx-time li.cur .row b { color: #9ed3e3; }
.tx-time time { font-family: var(--mono, monospace); font-size: 11px; color: #7f8f9d; }
.tx-time p { margin: 3px 0 0; font-size: 12px; line-height: 1.5; color: #7f8f9d; }
.tx-time li.done p, .tx-time li.cur p { color: #93a3b1; }
.tx-facts { display: grid; grid-template-columns: 1fr 1fr; gap: 1px; border-radius: 12px; background: rgba(255,255,255,.055); overflow: hidden; }
.tx-facts > div { padding: 11px 14px; background: var(--panel); }
/* an odd number of facts used to leave one tile empty (it showed as a bare grid-coloured block) */
.tx-facts > div:last-child:nth-child(odd) { grid-column: 1 / -1; }
.tx-facts span { display: block; font-size: 11px; color: #7f8f9d; }
.tx-facts b { display: block; margin-top: 4px; font-size: 12.5px; font-weight: 500; overflow-wrap: anywhere; }
.tx-facts b.mono { font-family: var(--mono, monospace); }
.tx-hash { display: grid; grid-template-columns: 62px minmax(0,1fr); align-items: baseline; gap: 10px; margin-top: 8px; padding: 10px 13px;
  border-radius: 10px; background: rgba(0,0,0,.3); border: 1px solid rgba(255,255,255,.055); }
.tx-hash .k { font-size: 11px; color: #7f8f9d; }
.tx-hash code { min-width: 0; font-family: var(--mono, monospace); font-size: 11.5px; color: #b9c6d2; line-height: 1.5;
  white-space: normal; overflow-wrap: anywhere; user-select: all; }
.tx-hash code.dim { color: #5c6b78; }
.tx-sheet footer { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 10px; margin-top: 16px; padding: 14px 22px;
  border-top: 1px solid rgba(255,255,255,.06); background: rgba(0,0,0,.18); }
.tx-sheet footer > div { display: flex; flex-wrap: wrap; gap: 8px; }
.tx-sheet footer .adm-btn { text-decoration: none; }
.tx-sheet footer .adm-btn.go { border: 0; background: linear-gradient(140deg, rgba(111,182,205,.95), rgba(88,158,182,.85)); color: #0d1418; font-weight: 700; }
@media (max-width: 620px) {
  .modal.tx { padding: 12px; }
  .tx-sheet header, .tx-sheet section, .tx-sheet footer { padding-left: 16px; padding-right: 16px; }
  .tx-facts { grid-template-columns: 1fr; }
  .tx-hash { grid-template-columns: 56px minmax(0,1fr); }
}

/* ── HWB spreadsheet (admin): the owner's "HWB Dropship Order Tracker", editable in place ─────────── */
/* nine tabs: keep them on ONE row on a desktop — the "Updated …" note is the first thing to give way */
@media (min-width: 901px) {
  .adm-nav .tabs { flex-wrap: nowrap; }
  .adm-nav .tabs button { padding-left: 12px; padding-right: 12px; }
  .adm-nav .upd { white-space: nowrap; }
}
@media (min-width: 901px) and (max-width: 1500px) { .adm-nav .upd { display: none; } }
@media (max-width: 900px) {
  .adm-nav .tabs button.wide { grid-column: 1 / -1; }
}
/* HWB group topics: who wrote each message */
.msg .who { font-weight: 600; font-size: 13px; padding: 0 0 3px; }
.chat .preview .who { color: var(--text); }
/* HWB group row (Telegram-style: topic names under the group) and its topic list */
.chat.grp .name .grpi { vertical-align: -2px; margin-right: 5px; color: var(--muted); }
.chat.grp .avatar { border-radius: 30%; }                                   /* Telegram draws a forum as a rounded square */
.chat.grp .avatar img { border-radius: 30%; }
.chat.grp .name .grpi { color: inherit; opacity: .9; }
.chat.grp .chips { display: flex; gap: 10px; flex: 1; min-width: 0; overflow: hidden; white-space: nowrap; margin: 2px 0 0 -7px; font-size: 13px; color: var(--muted); }
.chat.grp .chips > span { flex: none; }
.chat.grp .chips span.hot { color: var(--text); font-weight: 600; }
.chat.grp .chips span.lead { color: var(--text); padding: 1px 7px 0; border-radius: 7px 7px 0 0; background: rgba(255,255,255,.07); }
.chat.grp .chips span.more { color: var(--muted); }
.chat.grp .preview.lastline { flex: 0 1 auto; padding: 1px 7px 2px; margin: 0 0 0 -7px; border-radius: 0 7px 7px 7px; background: rgba(255,255,255,.07); }
.chat.grp .preview .go { margin-left: 5px; color: var(--muted); }
/* topic list rows, like Telegram's: a small icon (no avatar circle), title + 🔒/date, "Name: preview" + pin/badge */
.chat.topic { padding-top: 9px; padding-bottom: 9px; }
.chat.topic .av { width: 26px; flex: 0 0 26px; display: flex; justify-content: center; align-self: flex-start; padding-top: 1px; }
.chat.topic .tico { display: inline-grid; place-items: center; width: 20px; height: 20px; color: #fff; font-weight: 700; font-size: 11px; line-height: 1; }
.chat.topic .tico.emo { font-size: 16px; }
.chat.topic .tico.hash svg { stroke-width: 2.8; }
.chat.topic .pin { align-self: center; }
.chat.topic .tico.hash { color: var(--muted); }
.chat.topic .tico.bub { border-radius: 50% 50% 50% 18%; }
.chat.topic .preview .from { color: var(--accent); }
.chat.topic .account .lock { color: var(--muted); margin-right: 5px; vertical-align: -1px; }
.chat .badge.muted { background: #4b5968; }
.side header .subt { display: block; font-size: 11.5px; font-weight: 400; color: var(--muted); }
/* group topic bubbles, like Telegram: the name once per run, the member's avatar/initials on the run's last bubble */
.msg:not(.first) > .who { display: none; }
.msg .avatar.mav { font-size: 13px; font-weight: 600; letter-spacing: .02em; }
.msg .quote.g { border-left-color: var(--qc); background: color-mix(in srgb, var(--qc) 14%, transparent); }
.msg .quote.g b { color: var(--qc); }
.msg .quote.g .ql { display: block; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
/* Telegram details: service lines, "edited", pin mark, admin titles, ☆ Premium */
.svc { align-self: center; margin: 6px 0; max-width: 80%; text-align: center; user-select: none; }
.svc span { display: inline-block; padding: 4px 11px; border-radius: 999px; background: #23272c; color: var(--muted2); font-size: 12.5px; font-weight: 600; }
.msg .meta .ed { margin-right: 4px; }
.msg .meta .pm { margin-right: 4px; vertical-align: -1px; opacity: .8; }
.msg .who { display: flex; align-items: baseline; gap: 5px; }
.msg .who .prem { color: currentColor; opacity: .75; width: 12px; height: 12px; align-self: center; }
.msg .who .rank { margin-left: auto; padding: 0 7px; border-radius: 8px; font-size: 11.5px; font-weight: 400; opacity: .85;
  background: color-mix(in srgb, currentColor 16%, transparent); }                                   /* "owner", tinted like the name */
.msg img.ce { width: 1.3em; height: 1.3em; vertical-align: -0.3em; object-fit: contain; }
/* a reply quote shrinks to the bubble (its ellipsis) instead of widening it */
.msg .quote.g { width: 0; min-width: 100%; box-sizing: border-box; }
/* Telegram's tail: the last bubble of a run, beside the avatar */
.msg.text.last, .msg.file.last, .msg.unsupported.last { border-bottom-left-radius: 0; }
/* the tail and the selection band share ::after: a SELECTED bubble shows the full-width band, not a clipped tail */
.messages.selecting .msg.selected::after { clip-path: none; width: auto; height: auto; }
.messages.selecting .msg.selected.first::after { top: -7px; }             /* cover the gap above a new run too */
.msg.text.last::after, .msg.file.last::after, .msg.unsupported.last::after {
  content: ''; position: absolute; left: -6px; bottom: 0; width: 7px; height: 11px; background: inherit;
  clip-path: path('M7 0 L7 11 L0 11 C3 10 6 7 7 0 Z'); }
.chat .preview { white-space: pre; }
.chat .preview .thumb { margin-left: 2px; }
/* round-2 review details */
.msg.file .doc { margin-bottom: 8px; }                                      /* a caption doesn't sit on the file */
.msg.file .doc:last-child { margin-bottom: 0; }
.doc b { font-weight: 600; }
.date-sep span, .svc span { color: #f1f4f7; }
.msg .meta .ed { margin-right: 0; }
@media (min-width: 761px) {
  .msg .mav { width: 32px; height: 32px; font-size: 13px; }
  .in .mav, .out .mav { left: -42px; }
  .unread-banner { margin: 8px -20px 8px -50px; border-radius: 0; }       /* Telegram: edge to edge */
}
.chat.grp .name .grpi { opacity: 1; width: 18px; height: 13px; margin-right: 4px; vertical-align: -1px; }
.chat.grp .av { align-self: flex-start; margin-top: 3px; }
.chat.grp .chips { margin-top: 0; }
.chat.grp .chips span.lead { padding-top: 4px; }
.chat.grp .preview.lastline { margin-top: -1px; }
.chat .preview .doclink { display: inline; vertical-align: baseline; }
.chat .preview .doclink svg { vertical-align: -2px; margin-right: 0; }
.chat.topic .tico.hash svg { width: 20px; height: 20px; transform: skewX(-12deg); }
/* round-3 review details */
@media (min-width: 761px) {
  .messages { padding-left: 57px; }                                         /* Telegram: avatar ~16px in, ~9px to the bubble */
  .in .mav, .out .mav { left: -41px; }
  .unread-banner { margin-left: -57px; }
}
.doc .ico { width: 44px; height: 44px; }
.doc .ico svg { width: 22px; height: 22px; }
.doc b { margin-bottom: 3px; }
.msg.file .doc { margin-bottom: 13px; }
.msg.file .doc:last-child { margin-bottom: 0; }
.msg.in .meta, .msg.in .doc small { color: #8d959c; opacity: 1; }            /* Telegram's dim grey time / size */
.msg .meta { position: relative; top: 3px; }
.msg .meta .pm { width: 13px; height: 13px; }
.date-sep { margin: 8px 0 2px; }
.svc { margin: 4px 0; }
.chat.grp .chips { align-items: baseline; }                                 /* the boxed topic and the rest on one baseline */
.chat.grp .name .grpi { width: 20px; height: 20px; margin-right: 3px; vertical-align: -4px; }
.chat.grp .av { margin-top: -2px; }
.chat.topic { padding-left: 4px; gap: 9px; }
.chat.topic .tico.hash svg { width: 18px; height: 18px; transform: skewX(-10deg); stroke-width: 3; }
.chat.grp .preview.lastline { display: inline-flex; min-width: 0; max-width: 100%; box-sizing: border-box; }
.chat.grp .preview.lastline .pt { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: pre; }
.chat.grp .preview.lastline .go { flex: none; }                                /* "›" stays visible when the text is cut */
/* round-4 review details */
.msg.text, .msg.file, .msg.unsupported { padding-top: 8px; }
.msg .who { padding-bottom: 0; }
.msg .who + .doc { margin-top: 4px; }
.msg .meta .pm { width: 13px; height: 13px; opacity: 1; }
.msg.in .meta, .msg.in .doc small { color: #78828a; }
.msg .meta { top: 4px; }
.date-sep { margin: 10px 0 0; }                                             /* 12px before a pill, 8px from a pill to a bubble */
.svc { margin: 10px 0 0; }
.chat.topic { padding-left: 0; gap: 7px; margin-bottom: 1px; }
.chat.topic .tico.hash { width: 26px; }
.chat.topic .tico.hash svg { width: 26px; height: 26px; stroke-width: 3.2; }
/* dragging a pinned chat, like Telegram */
.chats .chat[draggable="true"] { -webkit-user-drag: element; }
.chats .chat.dragging { opacity: .55; background: var(--bg); }
/* HWB spreadsheet page (left rail, everyone) */
.rail .lbl .short { display: none; }
@media (max-width: 760px) { .rail .lbl .full { display: none; } .rail .lbl .short { display: inline; } }   /* the bottom bar: "HWB" */
/* HWB is its own section of the rail: a line above it (a short upright one in the phone's bottom bar) */
.rail .rail-sep { flex: none; height: 1px; margin: 8px 14px; background: var(--line); }
@media (max-width: 760px) { .rail .rail-sep { width: 1px; height: 30px; margin: 0 2px; align-self: center; } }

/* phones: four tabs + More, and no bar inside a chat (owner, 2026-10-11) */
.rail #moreBtn, .more-sheet { display: none; }
@media (max-width: 760px) {
  .rail > button[data-view]:not([data-view="home"]):not([data-view="accounts"]):not([data-view="emails"]):not([data-view="deals"]),
  .rail .rail-sep, .rail .me { display: none; }
  .rail #moreBtn { display: flex; }
  .rail button { font-size: 10.5px; gap: 4px; padding: 7px 0 6px; }
  .rail .rbadge.more-dot { width: 9px; height: 9px; min-width: 0; padding: 0; top: 5px; margin-left: 8px; border-radius: 50%; }
  body.chat-open > .rail { display: none; }
  body.chat-open .composer { padding-bottom: calc(8px + env(safe-area-inset-bottom)); }
  .more-sheet:not([hidden]) { display: block; position: fixed; inset: 0; z-index: 19; background: rgba(0, 0, 0, .45); }
  .more-card { position: absolute; left: 10px; right: 10px; bottom: calc(72px + env(safe-area-inset-bottom)); display: grid;
               grid-template-columns: 1fr 1fr; gap: 4px; padding: 8px; background: var(--panel); border: 1px solid var(--line);
               border-radius: 16px; box-shadow: 0 12px 32px rgba(0, 0, 0, .45); }
  .more-card button { display: flex; align-items: center; gap: 12px; min-height: 50px; padding: 0 12px; border: 0; border-radius: 10px;
                      background: none; color: var(--text); font: inherit; font-size: 14.5px; text-align: left; cursor: pointer; }
  .more-card button:active, .more-card button.active { background: var(--bg); }
  .more-card button.active svg { color: var(--accent); }
  .more-card button span { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
  .more-card svg { flex: none; width: 22px; height: 22px; fill: currentColor; color: var(--muted); }
  .more-card button:last-child { grid-column: 1 / -1; color: #f0a3a1; }
  .more-card button:last-child svg { fill: none; color: #f0a3a1; }
  .more-card .rbadge { position: static; margin: 0; padding: 0 7px; border-radius: 8px; font-size: 11px; font-weight: 700; line-height: 18px; background: var(--accent); color: #fff; }
}

/* which accounts a rep works (Settings → Portal logins) */
.acct-pick { flex-basis: 100%; margin: 6px 0 2px; }
.acct-boxes { display: flex; flex-wrap: wrap; gap: 6px 14px; margin-top: 4px; }
.acct-box { display: inline-flex; align-items: center; gap: 6px; font-size: 12.5px; color: #cdd8e1; cursor: pointer; }
.acct-box small { font-size: 10px; color: #6fd8b0; border: 1px solid rgba(111,216,176,.35); border-radius: 4px; padding: 0 4px; }
.acct-acts { display: flex; gap: 8px; margin-top: 8px; }
#repForm .acct-pick { grid-column: 1 / -1; }
#repForm #repRole { align-self: start; }

/* a send that failed is not "sent": no ticks, a red mark instead of the clock (2026-09-28) */
.msg.failed .tick { display: none; }
.msg.failed .meta::after { content: '!'; color: #f06565; font-weight: 700; font-size: 12px; }
/* touch screens: a long press opens the message / chat menu (app.js), so it must not start the OS's own
   text-selection or image callout; the menu's "Copy Text" copies a message */
@media (pointer: coarse) {
  .messages .msg, .chats .chat { -webkit-touch-callout: none; -webkit-user-select: none; user-select: none; }
  /* a held photo or link would start a drag instead of the menu */
  .messages .msg img, .messages .msg a, .messages .msg video { -webkit-user-drag: none; }
}

/* Panic tab (2026-09-29): one row per control, the ON ones tinted red */
#adminTabs .panic-tab { color: #e79292; }
.adm-card.panic .panic-row { display: flex; align-items: center; gap: 14px; padding: 14px 18px; border-top: 1px solid rgba(255,255,255,.06); }
.adm-card.panic .panic-row:first-child { border-top: 0; }
.adm-card.panic .panic-row.on { background: rgba(224,122,122,.07); }
.adm-card.panic .panic-row .txt { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 3px; }
.adm-card.panic .panic-row .txt span { font-size: 12.5px; color: var(--muted, #93a3b1); }
.adm-card.panic .panic-row .txt em { font-style: normal; font-size: 12px; color: #93a3b1; }
.adm-card.panic .panic-row.on .txt em { color: #e79292; font-weight: 600; }
.adm-card.panic .panic-out div { font-size: 12px; margin-top: 3px; }
.adm-card.panic .panic-out .ok { color: #8fe0c0; }
.adm-card.panic .panic-out .err { color: #e79292; }
@media (max-width: 640px) { .adm-card.panic .panic-row { flex-direction: column; align-items: stretch; } }
/* Tracking card (2026-09-29) */
.quick.deal.track { width: 340px; }
.quick.deal .row2 { display: flex; gap: 8px; }
.quick.deal .row2 input { flex: 1; min-width: 0; }
.quick.deal #trackGo { padding: 8px 12px; border: 0; border-radius: 10px; background: var(--accent); color: #fff; font-weight: 600; cursor: pointer; }
.quick.deal #trackGo:disabled { opacity: .6; cursor: default; }

/* Commission page — the size-tiered rep schedule (2026-09-30). Same title + summary-card + panel
   rhythm as Transactions; a focused column width so the panel is never a sparse empty box. */
@media (max-width: 760px) {           /* the four filter tabs: a grid that fits (2×2 on a phone), never a strip off the edge */
  #fuFilter { width: 100%; display: grid; grid-template-columns: repeat(auto-fit, minmax(120px, 1fr)); }
  #fuFilter button { justify-content: center; padding: 8px 6px; white-space: nowrap; }
}
.cz-card { padding: 22px 24px 24px; }
/* Follow-ups (2026-10-01) */
.rail-badge { margin-left: auto; min-width: 18px; height: 18px; padding: 0 6px; border-radius: 9px; display: inline-flex; align-items: center; justify-content: center; font: 700 11px 'DM Sans', sans-serif; background: #6fb6cd; color: #0d1418; }
.rail-badge[hidden] { display: none; }
.fu-note { font-size: 12px; color: #7f8f9d; flex: 1; min-width: 200px; }
.fu-list { padding: 12px 14px 16px; display: grid; gap: 10px; }
.fu-row { padding: 14px 16px; border-radius: 16px; background: rgba(0,0,0,.22); border: 1px solid rgba(255,255,255,.06); display: grid; gap: 7px; }
.fu-top { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.fu-tier { font: 600 12px 'DM Sans', sans-serif; padding: 3px 9px; border-radius: 8px; white-space: nowrap; }
.fu-tier.checkout { background: rgba(111,216,176,.14); color: #6fd8b0; }
.fu-tier.hot { background: rgba(240,160,100,.14); color: #f0a064; }
.fu-tier.warm { background: rgba(230,200,110,.14); color: #e6c86e; }
.fu-name { font-weight: 600; color: #f2f6fa; min-width: 0; overflow-wrap: anywhere; }
.fu-name i { font-style: normal; color: #7f8f9d; font-weight: 400; }
.fu-meta { margin-left: auto; font-size: 12px; color: #93a3b1; white-space: nowrap; }
.fu-why { font-size: 13px; color: #d7e2ec; }
.fu-sub { font-size: 12px; color: #7f8f9d; }
.fu-suggest { display: flex; gap: 10px; align-items: flex-start; padding: 9px 11px; border-radius: 10px; background: rgba(111,182,205,.07); font-size: 12.5px; line-height: 1.45; color: #b9c6d2; }
.fu-suggest span { flex: 1; font-style: italic; min-width: 0; }
.fu-suggest button { flex: none; font: 600 11px 'DM Sans', sans-serif; padding: 4px 10px; border-radius: 7px; border: 1px solid rgba(255,255,255,.12); background: transparent; color: #b9c6d2; cursor: pointer; }
.fu-suggest button:hover { border-color: rgba(111,182,205,.5); color: #f2f6fa; }
.fu-suggest.warn { background: rgba(240,160,100,.09); color: #f0c49a; }
.fu-auto { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; padding: 12px 18px; border-bottom: 1px solid rgba(255,255,255,.06); }
.fu-auto-lbl { font-size: 12px; font-weight: 600; color: #93a3b1; text-transform: uppercase; letter-spacing: .06em; }
.fu-auto .dz-tabs button { padding: 6px 12px; font-size: 12.5px; }
.fu-auto-sum { flex: 1; min-width: 180px; font-size: 12px; color: #7f8f9d; }
.fu-log { max-height: 420px; overflow-y: auto; padding: 8px 14px; border-bottom: 1px solid rgba(255,255,255,.06); display: grid; gap: 6px; }
.fu-logrow { display: grid; grid-template-columns: 64px 108px 1fr; gap: 4px 10px; align-items: baseline; padding: 8px 10px; border-radius: 10px; background: rgba(255,255,255,.03); font-size: 12.5px; }
.fu-logrow .t { color: #7f8f9d; font-size: 11.5px; }
.fu-logrow .who { color: #c6d0d9; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.fu-logrow .what { grid-column: 2 / 4; color: #aab6c1; }
.fu-logrow .what i { display: block; color: #7f8f9d; font-style: normal; }
.fu-res { font-weight: 600; font-size: 11.5px; }
.fu-res i { font-style: normal; font-weight: 500; opacity: .7; }
.fu-res.ok { color: #7fd1a8; } .fu-res.bad { color: #f0a08a; } .fu-res.wait { color: #e6c27a; }
.fu-autonote { font-size: 12px; color: #c9b27a; }
.adm-block.ra .mid .kind { font-weight: 600; }
.adm-block.ra .mid span:not(.kind) { white-space: pre-line; }   /* the low-activity digest is one line per rep */
.adm-block.ra.bad .mid .kind { color: #e79292; }
.adm-block.ra.warn .mid .kind { color: #e6c27a; }
.adm-block.ra.muted .mid .kind { color: #93a3b1; }
@media (max-width: 900px) { .adm-card.ra-card .adm-head { flex-wrap: wrap; } }
.fu-res.muted { color: #7f8f9d; }
.fu-good { color: #7fd1a8; } .fu-bad { color: #f0a08a; }
.adm-card .fu-auto { border-bottom: 1px solid rgba(255,255,255,.06); }
.adm-card .fu-log { max-height: 560px; border-bottom: 0; }
.adm-card .fu-logrow .what { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 10px; }
.adm-card .fu-logrow .what i { flex: 1; min-width: 160px; }
.dz-tabs.fu-mini button { padding: 5px 10px; font-size: 12px; }
.adm-head .dz-tabs.fu-mini { margin-left: auto; }
.adm-card .fu-logrow .what .adm-btn { margin-left: auto; }
@media (max-width: 760px) {
  .adm-head:has(.fu-mini) { flex-wrap: wrap; gap: 10px; }
  .adm-head .dz-tabs.fu-mini { margin-left: 0; width: 100%; overflow-x: auto; }
}
@media (max-width: 760px) { .fu-logrow { grid-template-columns: 1fr auto; } .fu-logrow .who, .fu-logrow .what { grid-column: 1 / 3; } }
.fu-suggest.warn span { font-style: normal; }
.fu-acts { display: flex; gap: 8px; flex-wrap: wrap; }
.fu-empty { padding: 34px 16px; text-align: center; color: #7f8f9d; font-size: 13px; }
@media (max-width: 760px) {                          /* the rail is a bottom tab bar here: pin the badge to the icon */
  .rail button { position: relative; }
  /* the label must be a BLOCK for its overflow/ellipsis to clip — as an inline span its nowrap text set each button's
     minimum width, so with Follow-ups added the bar overflowed a 360px phone (review 2026-10-01) */
  .rail button .lbl { display: block; }
  .app > .rail { min-width: 0; }      /* …and its grid column (1fr = minmax(auto, 1fr)) must not grow to fit every full label */
  .rail-badge { position: absolute; top: 1px; left: calc(50% + 4px); margin: 0; height: 16px; min-width: 16px; padding: 0 4px; font-size: 10px; }
}
@media (max-width: 600px) { .fu-meta { margin-left: 0; width: 100%; } .fu-row { padding: 12px; } }
.cz-lead { margin: 0 auto 18px; text-align: center; font: 400 14px 'DM Sans', sans-serif; color: var(--muted2); line-height: 1.55; max-width: 500px; }
.cz-lead b { color: var(--text); font-weight: 600; }
.cz-table { border: 1px solid rgba(255,255,255,.09); border-radius: 14px; overflow: hidden; background: rgba(0,0,0,.22); }
.cz-row { display: flex; align-items: center; justify-content: space-between; padding: 16px 22px; border-bottom: 1px solid rgba(255,255,255,.06); }
.cz-row:last-child { border-bottom: 0; }
.cz-row .cz-size { font: 500 15px 'DM Sans', sans-serif; color: var(--text); }
.cz-row .cz-pct { font: 700 17px 'JetBrains Mono', monospace; color: #6fb6cd; }
.cz-row.cz-hd { padding: 11px 22px; background: rgba(0,0,0,.28); }
.cz-row.cz-hd span { font: 600 11px 'DM Sans', sans-serif; letter-spacing: .12em; text-transform: uppercase; color: var(--muted); }
.cz-row.top { background: rgba(111,182,205,.06); }
.cz-row.top .cz-pct { color: #7fd8b0; }               /* the top (best) rate stands out */

/* Settings tab: cards sit adjacent in a 2-column grid (was stacking full-width) */
.settings-grid { align-items: start; }
.settings-grid .span2 { grid-column: 1 / -1; }

/* Prompts settings — price-calculator config (2026-09-30) */
#prompts { padding: 14px 18px 16px; }
#prompts .pr-key.adm-recv { padding: 0 0 12px; margin-bottom: 14px; border-right: 0; }
.pr-block { margin-bottom: 18px; }
.pr-block > label, .pr-acc > label { display: block; font: 600 13px 'DM Sans', sans-serif; color: var(--text); margin: 0 0 6px; }
.pr-block > label .muted, .pr-acc > label .muted { font-weight: 400; }
textarea.pr-ta { width: 100%; box-sizing: border-box; resize: vertical; min-height: 56px; padding: 10px 12px; border: 1px solid var(--line); border-radius: 10px; background: var(--bg); color: var(--text); font: 400 13px 'DM Sans', sans-serif; line-height: 1.5; outline: none; }
textarea.pr-ta:focus { border-color: var(--accent); box-shadow: 0 0 0 3px rgba(47,124,246,.12); }
textarea.pr-ta.promo { margin-top: 6px; border-color: rgba(224,180,106,.35); }   /* the running promotion, set apart from shipping */
/* the promotion as a number, and what the stored price list is (owner, 2026-10-03) */
/* the Accounts tab: pick an account on the left, edit its profile and quick replies on the right */
.ae { display: grid; grid-template-columns: minmax(180px, 230px) minmax(0, 1fr); gap: 14px; align-items: start; }
.ae-side { padding-bottom: 8px; }
.ae-acct { display: flex; flex-direction: column; gap: 1px; width: 100%; padding: 9px 14px; border: 0; border-left: 2px solid transparent; background: none; text-align: left; cursor: pointer; }
.ae-acct:hover { background: rgba(255,255,255,.04); }
.ae-acct.on { border-left-color: var(--accent); background: rgba(47,124,246,.08); }
.ae-acct .nm { font: 600 13px 'DM Sans', sans-serif; color: var(--text); }
.ae-acct .n { font-size: 11px; color: var(--muted); }
.ae-off { padding: 14px 16px; font-size: 12.5px; color: #e0b46a; }
.ae-prof { display: flex; gap: 16px; padding: 4px 16px 16px; border-bottom: 1px solid var(--line); }
.ae-photo { position: relative; flex: none; width: 72px; }
.ae-photo img, .ae-photo span { display: block; width: 72px; height: 72px; border-radius: 50%; object-fit: cover; background: rgba(255,255,255,.06); }
.ae-photo-btn { display: block; margin-top: 6px; text-align: center; font-size: 11px; color: var(--accent); cursor: pointer; }
.ae-fields { flex: 1; min-width: 0; display: grid; grid-template-columns: 1fr 1fr; gap: 9px 12px; }
.ae-fields label { display: flex; flex-direction: column; gap: 4px; font: 600 11.5px 'DM Sans', sans-serif; color: var(--muted); }
.ae-fields label.wide { grid-column: 1 / -1; }
.ae-fields input { padding: 8px 10px; border: 1px solid var(--line); border-radius: 9px; background: var(--bg); color: var(--text); font: 400 13px 'DM Sans', sans-serif; outline: none; }
.ae-fields input:focus { border-color: var(--accent); box-shadow: 0 0 0 3px rgba(47,124,246,.12); }
.ae-prof-save { grid-column: 1 / -1; display: flex; gap: 8px; }
.ae-qr { padding: 12px 16px 16px; }
.ae-qr-head { display: flex; align-items: center; justify-content: space-between; margin-bottom: 8px; font-size: 13px; color: var(--text); }
.ae-row { border: 1px solid var(--line); border-radius: 11px; margin-bottom: 7px; background: var(--bg); overflow: hidden; }
.ae-row.open { border-color: rgba(47,124,246,.4); }
.ae-row-top { display: flex; align-items: center; gap: 10px; width: 100%; padding: 9px 12px; border: 0; background: none; cursor: pointer; text-align: left; }
.ae-row-top b { font: 600 12.5px 'JetBrains Mono', monospace; color: var(--text); }
.ae-row-top .n { font-size: 11.5px; color: var(--muted); }
.ae-row-top .chev { margin-left: auto; color: var(--muted); }
.ae-edit { padding: 2px 12px 12px; }
.ae-msg { margin-bottom: 9px; padding: 9px; border: 1px solid var(--line); border-radius: 10px; background: var(--card); }
/* One message is edited at a time (owner, 2026-10-05: the old three-row textarea per message meant "you can
   barely see anything while editing it"). The others collapse to a single clickable line. */
button.ae-msg.shut { display: flex; align-items: center; gap: 9px; width: 100%; text-align: left; cursor: pointer;
  font: 400 12.5px/1.45 'DM Sans', sans-serif; color: var(--muted); padding: 8px 10px; }
button.ae-msg.shut:hover { border-color: var(--accent); color: var(--text); }
.ae-msg .num { flex: none; min-width: 18px; height: 18px; display: inline-flex; align-items: center; justify-content: center;
  border-radius: 6px; background: var(--bg); color: var(--muted); font-size: 10.5px; font-weight: 600; padding: 0 5px; }
.ae-msg.shut .peek { flex: 1; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ae-msg.shut .peek i { opacity: .55; }
.ae-msg.open { border-color: var(--accent); }
.ae-bar { display: flex; align-items: center; gap: 3px; flex-wrap: wrap; margin-bottom: 7px; }
.ae-bar .grow { flex: 1; }
.ae-f { min-width: 26px; height: 24px; padding: 0 6px; border: 1px solid transparent; border-radius: 6px;
  background: none; color: var(--muted); font: 600 12px/1 'DM Sans', sans-serif; cursor: pointer; }
.ae-f:hover { background: var(--bg); color: var(--text); border-color: var(--line); }
.ae-f[data-k="italic"] { font-style: italic; }
.ae-f[data-k="underline"] { text-decoration: underline; }
.ae-f[data-k="strike"] { text-decoration: line-through; }
.ae-prev { display: inline-flex; align-items: center; gap: 5px; color: var(--muted); font-size: 11.5px; cursor: pointer; }
/* the tall box the owner asked for: about three times the old one, and it grows with the message */
.ae-in { width: 100%; box-sizing: border-box; min-height: 190px; max-height: 52vh; overflow-y: auto;
  padding: 10px 11px; border: 1px solid var(--line); border-radius: 8px; background: var(--bg); color: var(--text);
  font: 400 13.5px/1.6 'DM Sans', sans-serif; outline: none; white-space: pre-wrap; word-break: break-word; }
.ae-in:focus { border-color: var(--accent); }
.ae-in:empty::before { content: attr(data-ph); color: var(--muted); }
.ae-in code { font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size: 12.5px;
  background: rgba(127,143,157,.16); border-radius: 4px; padding: 0 3px; }
.ae-in a { color: var(--accent); }
.ae-in .spoiler { background: rgba(127,143,157,.3); border-radius: 3px; }
emoji-picker.floating { position: fixed; right: auto; bottom: auto; z-index: 60; }
.ae-msg-foot { display: flex; align-items: center; gap: 8px; margin-top: 7px; font-size: 11.5px; }
.ae-file { color: var(--text); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; max-width: 220px; }
.ae-attach { color: var(--accent); cursor: pointer; }
.ae-x { padding: 2px 7px; border: 1px solid var(--line); border-radius: 7px; background: none; color: var(--muted); font-size: 11px; cursor: pointer; }
.ae-x:hover:not([disabled]) { color: var(--text); border-color: var(--muted); }
.ae-x[disabled] { opacity: .35; cursor: default; }
.ae-msg-foot .grow, .ae-edit-foot .grow { flex: 1; }
.ae-add { margin-bottom: 10px; }
.ae-edit-foot { display: flex; align-items: center; gap: 8px; padding-top: 4px; border-top: 1px solid var(--line); margin-top: 4px; padding-top: 10px; }
.ae-copy { margin-top: 12px; padding-top: 10px; border-top: 1px dashed var(--line); }
.ae-copy-lbl { font-size: 11.5px; color: var(--muted); margin-bottom: 6px; }
.ae-copy-list { display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: 9px; }
.ae-copy-list label { display: inline-flex; align-items: center; gap: 6px; padding: 5px 9px; border: 1px solid var(--line); border-radius: 9px; font-size: 12px; color: var(--text); cursor: pointer; }
.ae-copy-list label.has { color: var(--muted); }
.ae-copy-list label i { font-style: normal; font-size: 10.5px; color: var(--muted); }
@media (max-width: 900px) {
  .ae { grid-template-columns: 1fr; }
  .ae-side { max-height: 210px; overflow-y: auto; }
  .ae-prof { flex-direction: column; }
  .ae-fields { grid-template-columns: 1fr; }
}

/* email quick replies: one card per canned answer, saved on its own */
.mq-list { display: grid; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); gap: 12px; }
.mq-stores { display: inline-flex; margin-bottom: 12px; }
.mq-row { display: flex; flex-direction: column; gap: 7px; padding: 11px; border: 1px solid var(--line); border-radius: 12px; background: var(--bg); }
.mq-row input.mq-name { padding: 8px 10px; border: 1px solid var(--line); border-radius: 9px; background: var(--card); color: var(--text); font: 600 13px 'DM Sans', sans-serif; outline: none; }
.mq-row textarea.mq-body { width: 100%; box-sizing: border-box; resize: vertical; padding: 9px 11px; border: 1px solid var(--line); border-radius: 9px; background: var(--card); color: var(--text); font: 400 13px/1.5 'DM Sans', sans-serif; outline: none; }
.mq-row input.mq-name:focus, .mq-row textarea.mq-body:focus { border-color: var(--accent); box-shadow: 0 0 0 3px rgba(47,124,246,.12); }
.mq-foot { display: flex; align-items: center; gap: 8px; }
.mq-foot .muted { flex: 1; font-size: 11.5px; }

/* the parcel weight on the shipping card: only shown for the services that CREATE a shipment */
.trk-wt { display: flex; align-items: center; gap: 8px; margin: 6px 0 2px; flex-wrap: wrap; }
.trk-wt label { font: 600 12px 'DM Sans', sans-serif; color: var(--text); }
.trk-wt input { flex: 0 0 92px; width: 92px; max-width: 92px; padding: 7px 9px; border: 1px solid var(--line); border-radius: 9px; background: var(--bg); color: var(--text); font: 400 13px 'JetBrains Mono', monospace; outline: none; }
.trk-wt input:focus { border-color: var(--accent); box-shadow: 0 0 0 3px rgba(47,124,246,.12); }
.trk-wt .unit { font: 400 12px 'DM Sans', sans-serif; color: var(--muted); margin-left: -4px; }
.trk-wt .hint { flex: 1 1 180px; min-width: 0; font-size: 11.5px; }
.pr-pct { display: flex; align-items: center; gap: 8px; margin-top: 6px; flex-wrap: wrap; }
.pr-pct label { font: 600 12px 'DM Sans', sans-serif; color: var(--text); }
.pr-pct .muted { font-size: 11.5px; flex: 1 1 220px; min-width: 0; }
select.pr-sel { padding: 6px 8px; border: 1px solid var(--line); border-radius: 8px; background: var(--bg); color: var(--text); font: 400 12.5px 'DM Sans', sans-serif; outline: none; max-width: 260px; }
select.pr-sel:focus { border-color: var(--accent); box-shadow: 0 0 0 3px rgba(47,124,246,.12); }
input.pr-num { width: 72px; padding: 6px 8px; border: 1px solid var(--line); border-radius: 8px; background: var(--bg); color: var(--text); font: 400 13px 'JetBrains Mono', monospace; outline: none; }
input.pr-num:focus { border-color: var(--accent); box-shadow: 0 0 0 3px rgba(47,124,246,.12); }
.pr-warn { margin: 0 0 6px; padding: 7px 10px; border-radius: 8px; background: rgba(240,165,69,.10); border: 1px solid rgba(240,165,69,.30); color: #f0a545; font: 400 12px 'DM Sans', sans-serif; line-height: 1.45; }
/* Price calculator: the questions it asks before pricing, and the line-by-line review before sending */
.pq { margin-top: 8px; padding: 10px 12px; border: 1px solid rgba(224,180,106,.35); border-radius: 10px; background: rgba(224,180,106,.06); }
.pq-head { font-size: 12px; font-weight: 600; color: #e6c27a; margin-bottom: 8px; }
.pq-item { padding: 8px 0; border-top: 1px solid rgba(255,255,255,.05); }
.pq-item:first-child { border-top: 0; padding-top: 0; }
.pq-ask { font-size: 13px; color: var(--text); }
.pq-about { margin-top: 2px; font-size: 11.5px; color: var(--muted); }
.pq-opts { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 6px; }
.pq-opt { padding: 3px 9px; border: 1px solid var(--line); border-radius: 999px; background: var(--bg); color: var(--text); font-size: 12px; cursor: pointer; }
.pq-opt:hover { border-color: var(--accent); }
.pq-in { width: 100%; box-sizing: border-box; margin-top: 6px; padding: 7px 10px; border: 1px solid var(--line); border-radius: 8px; background: var(--bg); color: var(--text); font: 400 13px 'DM Sans', sans-serif; outline: none; }
.pq-in:focus { border-color: var(--accent); }
.pq-lines { margin-top: 8px; padding: 10px 12px; border: 1px solid var(--line); border-radius: 10px; }
.pq-lines .pq-head { color: var(--muted); }
/* With questions and a line-by-line review the panel grows past its 50vh: let it scroll, or the rep cannot
   reach "Answer and calculate" at all (seen in the browser at 1280x900 and 390x844, 2026-10-02). */
/* Both tall panels scroll inside themselves. Without this the last button sits below the fold and is simply
   unreachable (the price panel, 2026-10-02; the shipping card the same day, once it grew the autofill rows). */
.quick.price, .quick.track { max-height: min(78vh, calc(100vh - 110px)); overflow-y: auto; overscroll-behavior: contain; }
.pq-line { display: flex; align-items: center; gap: 8px; padding: 5px 0; font-size: 12.5px; }
/* name on its own line above the unit price: in a 320px panel the single row squeezed the name to
   "Retatrutide …" and the rep could not tell which line they were changing (seen 2026-10-02) */
.pq-line .txt { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 1px; }
.pq-line .nm { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.pq-line .up { color: var(--muted); font-size: 11px; white-space: nowrap; }
.pq-line .qty { width: 64px; padding: 4px 6px; border: 1px solid var(--line); border-radius: 7px; background: var(--bg); color: var(--text); font: 400 12.5px 'DM Sans', sans-serif; }
.pq-line .drop { width: 24px; height: 24px; padding: 0; border: 0; border-radius: 6px; background: none; color: var(--muted); cursor: pointer; font-size: 13px; }
.pq-line .drop:hover { color: #e79292; background: rgba(224,122,122,.12); }
.pr-acc { margin: 0 0 14px; }
.pr-save { margin-top: 6px; display: flex; justify-content: flex-end; }

/* The price calculator is HIDDEN (owner, 2026-10-05: "remove the AI calculator, don't delete the code, just hide it").
   Its composer button, its panel and its Prompts card in Admin → Settings never show; the code and the API stay.
   Delete this rule to bring it back. !important because the composer re-shows #priceBtn on every chat it opens. */
#priceBtn, #price, .adm-card:has(> #prompts) { display: none !important; }

/* Price calculator panel (2026-09-30) — a popover above the composer, like /deal and Shipping */
.quick.deal.price { width: 340px; }
.quick.deal.price > *:not(.head) { margin: 8px 12px 0; }
.quick.deal.price > *:last-child { margin-bottom: 12px; }
.quick.deal.price textarea { box-sizing: border-box; resize: vertical; min-height: 130px; padding: 8px 10px; border: 1px solid var(--line); border-radius: 10px; background: var(--bg); color: var(--text); font: 400 13px 'DM Sans', sans-serif; line-height: 1.5; outline: none; }
.quick.deal.price textarea:focus { border-color: var(--accent); }
.quick.deal.price .prow { display: flex; gap: 8px; }
.quick.deal.price .prow button { flex: 1; padding: 8px 10px; border: 0; border-radius: 10px; background: var(--accent); color: #fff; font: 600 13px 'DM Sans', sans-serif; cursor: pointer; }
.quick.deal.price .prow button:disabled { opacity: .5; cursor: default; }
.quick.deal.price .prow button.ghost { background: none; border: 1px solid var(--line); color: var(--text); }
.quick.deal.price .quote { white-space: pre-wrap; font: 400 13px 'DM Sans', sans-serif; color: var(--text); line-height: 1.55; max-height: 320px; overflow: auto; padding: 10px 12px; border: 1px solid var(--line); border-radius: 10px; background: rgba(0,0,0,.22); }

/* Shipping & order card: autofill evidence, the saved order, and the admin tab's lines/total/tracking
   (owner goal, 2026-10-02). */
.track .prow { display: flex; gap: 8px; margin: 2px 0 6px; }
.track .prow button { flex: 1; }
.ship-ev { margin: 4px 0 8px; padding: 7px 9px; border: 1px solid var(--line); border-radius: 8px;
  background: rgba(255,255,255,.02); font-size: 11px; color: var(--muted); max-height: 110px; overflow-y: auto; }
.ship-ev div { margin: 2px 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ship-ev b { color: var(--text); opacity: .8; font-weight: 600; margin-right: 5px; }
.ord { margin: 6px 0 2px; padding: 8px 10px; border: 1px solid var(--line); border-radius: 9px; background: rgba(255,255,255,.03); }
.ord-h { font-size: 12.5px; font-weight: 700; color: var(--text); }
.ord-i { font-size: 11.5px; color: var(--muted); margin-top: 2px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ord-t { margin-top: 5px; display: flex; flex-wrap: wrap; gap: 5px; }
.ord-t .trk { padding: 2px 7px; border-radius: 6px; background: rgba(76,175,131,.16); color: #74d6a6; font-size: 11px; }
.adm-order .by { padding: 2px 7px; border-radius: 5px; background: rgba(255,255,255,.06); color: var(--muted); font-size: 10.5px; font-weight: 600; }
.adm-order .olines { display: flex; flex-wrap: wrap; gap: 5px 8px; margin-top: 5px; }
.adm-order .ol { overflow-wrap: anywhere; padding: 2px 8px; border-radius: 6px; background: rgba(255,255,255,.045); font-size: 11.5px; color: var(--muted); }
.adm-order .ol b { color: #e9eef4; font-weight: 600; }
.adm-order .ol i { font-style: normal; opacity: .85; }
.adm-order .ototal { margin-top: 5px; font-size: 12.5px; color: #e9eef4; }
.adm-order .otrack { margin-top: 6px; display: flex; flex-wrap: wrap; gap: 6px; }
.adm-order .otrack .trk { padding: 3px 9px; border-radius: 6px; background: rgba(76,175,131,.15); color: #74d6a6; font-size: 11.5px; }

/* Transactions: pick a rep, pick an affiliate, choose the order (owner, 2026-10-02). Styled like the search box
   next to them — a native select renders as a grey system widget here, which looked unfinished beside it. */
.dz-pick { position: relative; display: inline-flex; align-items: center; flex: 0 0 auto; }
.dz-pick > span { display: none; }      /* its text is drawn on the button instead (app.js enhancePicker) */
.dz-pick select {
  appearance: none; -webkit-appearance: none;
  padding: 10px 32px 10px 14px; border-radius: 11px; border: 1px solid rgba(255,255,255,.09);
  background: rgba(0,0,0,.26); color: #e7ecf2; font: 13px 'DM Sans', sans-serif; line-height: 1.2;
  cursor: pointer; outline: none; max-width: 190px; text-overflow: ellipsis;
  /* the chevron, drawn rather than the platform's own */
  background-image: linear-gradient(45deg, transparent 50%, #7e8e9c 50%), linear-gradient(135deg, #7e8e9c 50%, transparent 50%);
  background-position: calc(100% - 17px) calc(50% + 1px), calc(100% - 12px) calc(50% + 1px);
  background-size: 5px 5px, 5px 5px; background-repeat: no-repeat;
}
.dz-pick select:hover { border-color: rgba(255,255,255,.16); }
.dz-pick select:focus { border-color: rgba(111,182,205,.55); box-shadow: 0 0 0 3px rgba(111,182,205,.13); }

/* The native list is replaced by our own (app.js `enhancePicker`), because the OPEN list of a <select> is
   drawn by the operating system and no stylesheet reaches it (owner, 2026-10-03: "the css is pretty cooked
   here relative to the rest of the page"). The select stays in the DOM, hidden, as the source of truth. */
.dz-pick select { display: none; }
.dz-pick .dz-face {
  display: inline-flex; align-items: center; min-height: 40px; width: 100%;
  padding: 10px 30px 10px 14px; border-radius: 11px; border: 1px solid rgba(255,255,255,.09);
  background: rgba(0,0,0,.26); color: #e7ecf2; font: 13px 'DM Sans', sans-serif; line-height: 1.2;
  cursor: pointer; outline: none; text-align: left;
  background-image: linear-gradient(45deg, transparent 50%, #7e8e9c 50%), linear-gradient(135deg, #7e8e9c 50%, transparent 50%);
  background-position: calc(100% - 17px) calc(50% + 1px), calc(100% - 12px) calc(50% + 1px);
  background-size: 5px 5px, 5px 5px; background-repeat: no-repeat;
}
.dz-pick .dz-face:hover { border-color: rgba(255,255,255,.16); }
.dz-pick .dz-face:focus-visible,
.dz-pick .dz-face[aria-expanded="true"] { border-color: rgba(111,182,205,.55); box-shadow: 0 0 0 3px rgba(111,182,205,.13); }
.dz-pick .dz-name { display: block; max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
/* A filter that is ON: the control takes the panel's accent, so nothing is hidden by the tidier label.
   background-COLOR only — the `background` shorthand resets the chevron's image, size and position with
   it, which tiled the gradient across the whole button and painted it solid. */
.dz-pick.set .dz-face { border-color: rgba(111,182,205,.5); background-color: rgba(111,182,205,.12); color: #a8d8e7; }
/* the list itself, in the panel's own language: same radius family, same border, same shadow */
.dz-pop {
  position: absolute; z-index: 60; top: calc(100% + 6px); left: 0; min-width: 100%; max-width: 260px;
  max-height: min(320px, 50vh); overflow-y: auto; overscroll-behavior: contain;
  display: flex; flex-direction: column; gap: 2px; padding: 6px;
  border-radius: 14px; border: 1px solid rgba(255,255,255,.1); background: rgba(22,28,34,.98);
  box-shadow: 0 26px 60px -24px rgba(0,0,0,.9); backdrop-filter: blur(8px);
}
.dz-pop button {
  flex: none; padding: 9px 12px; border: 0; border-radius: 9px; background: transparent; cursor: pointer;
  font: 13px 'DM Sans', sans-serif; color: #c7d2dc; text-align: left; white-space: nowrap;
  overflow: hidden; text-overflow: ellipsis;
}
.dz-pop button:hover, .dz-pop button:focus-visible { background: rgba(255,255,255,.07); color: #e7ecf2; outline: none; }
.dz-pop button.on { background: linear-gradient(140deg, rgba(111,182,205,.9), rgba(88,158,182,.78)); color: #0d1418; font-weight: 500; }
.dz-pop::-webkit-scrollbar { width: 8px; }
.dz-pop::-webkit-scrollbar-thumb { background: rgba(255,255,255,.14); border-radius: 8px; border: 2px solid transparent; background-clip: padding-box; }
.dz-pop::-webkit-scrollbar-track { background: transparent; }
@media (max-width: 760px) {
  .dz-pick { flex: 1 1 140px; }
  .dz-pick .dz-face { width: 100%; max-width: none; }
  .dz-pop { max-width: none; right: 0; }        /* a phone has no room to hang off the side */
}


/* ── Emails: the shared mailbox (owner, 2026-10-04). Same panel language as Transactions ─────── */
#emails { background: radial-gradient(1200px 620px at 50% -180px, rgba(29,39,51,.9) 0%, rgba(20,24,29,0) 62%); font-family: 'DM Sans', -apple-system, BlinkMacSystemFont, sans-serif; color: #e7ecf2; }
#emails > .welcome { display: none; }
.mz-earned { margin-left: auto; font-size: 12px; color: #7fd6a8; white-space: nowrap; }
/* the card is sized to the window rather than a flat 64vh: more of the thread on screen, and a composer
   that is not a four-line slot (owner, 2026-10-04) */
#emails .dz-panel { display: flex; flex-direction: column; min-height: 500px; }   /* height: the page frame, below */
#emails .mz-split { flex: 1; min-height: 0; }
/* first screen: pick a store. Only its rows show, in a card no wider than a list needs; inside a store, only the mailbox */
#emails:not(.in-store) .dz-panel { height: auto; min-height: 0; }
#emails:not(.in-store) :is(.dz-bar, .mz-split, .dz-foot) { display: none; }
#emails.in-store .mz-stores { display: none; }
#emails .mz-stores { flex: none; overflow: visible; }
.dz-head .back { display: inline-flex; width: 44px; height: 44px; margin-right: 6px; vertical-align: 6px; align-items: center; justify-content: center; border-radius: 50%; color: var(--muted); cursor: pointer; text-shadow: none; }
.dz-head .back svg { width: 30px; height: 30px; }
.dz-head .back:hover { background: var(--line); color: var(--text); }
.mz-split { display: grid; grid-template-columns: minmax(260px, 340px) minmax(0, 1fr); align-items: stretch; }
.mz-list { height: 100%; min-height: 0; overflow-y: auto; border-right: 1px solid rgba(255,255,255,.06); }
.mz-row {
  display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 2px 10px;
  padding: 13px 16px; border-bottom: 1px solid rgba(255,255,255,.05); cursor: pointer; transition: background .16s ease;
}
.mz-row:hover { background: rgba(255,255,255,.035); }
.mz-row.on { background: rgba(111,182,205,.09); box-shadow: inset 3px 0 0 #6fb6cd; }
.mz-row .who { display: flex; align-items: center; gap: 6px; min-width: 0; font-size: 13.5px; font-weight: 600; color: #cfd9e2; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.mz-row.hot .who { color: #f2f6fa; }
.mz-row .who .dot { flex: none; width: 7px; height: 7px; border-radius: 50%; background: #6fb6cd; }
.mz-row .at { font-size: 11px; color: #6d7d8b; white-space: nowrap; }
/* Save for later. The row is a two-column grid (who | time); the star sits between them, so the grid gains a
   column rather than the time being pushed around. */
.mz-row { grid-template-columns: minmax(0, 1fr) auto auto; }
.mz-star { flex: none; width: 24px; height: 24px; padding: 0; border: 0; border-radius: 7px; background: none;
  color: #5d6b78; font-size: 14px; line-height: 1; cursor: pointer; opacity: 0; transition: opacity .14s ease, color .14s ease; }
.mz-row:hover .mz-star, .mz-star.on, .mz-star:focus-visible { opacity: 1; }
.mz-star:hover { background: rgba(255,255,255,.07); color: #d9c57a; }
.mz-star.on { color: #e3c75d; }
@media (hover: none) { .mz-star { opacity: 1; } }          /* no hover on a phone: the star is always there */
.mz-readstar { flex: none; margin-left: auto; padding: 6px 11px; border: 1px solid rgba(255,255,255,.1);
  border-radius: 9px; background: rgba(255,255,255,.04); color: #b9c6d2; font: 500 12px 'DM Sans', sans-serif;
  white-space: nowrap; cursor: pointer; }
.mz-readstar:hover { filter: brightness(1.2); }
.mz-readstar.on { border-color: rgba(227,199,93,.4); background: rgba(227,199,93,.12); color: #e3c75d; }
/* Four text tabs do not fit a phone. Needs reply / All stay as words (they are the working views); Saved and
   Hidden become compact marks, which is what they are: a label and a lid, not peers of the inbox. */
/* Four tabs must not squeeze "Needs reply" onto two lines when the counts reach three digits. The row keeps
   its own width and scrolls if it ever has to, rather than crushing the words. */
.mz-tabs { flex: none; max-width: 100%; overflow-x: auto; scrollbar-width: none; }
.mz-tabs::-webkit-scrollbar { display: none; }
.mz-tabs button { white-space: nowrap; flex: none; }
.mz-tabs .pill { padding: 8px 10px; gap: 5px; }
.mz-tabs .pill b { font-size: 11px; }
.mz-tabs button[data-v="starred"].on { color: #e3c75d; }
.ord-track { margin-top: 8px; padding: 8px 10px; border-radius: 9px; background: rgba(255,255,255,.05);
  font-size: 12.5px; color: #cfd9e2; display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.ord-track b { font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size: 13px; color: #f2f6fa; }
.ord-track i { font-style: normal; color: #8b9aa8; font-size: 11.5px; }
.ord-track.err { background: rgba(214,106,106,.12); color: #e8a0a0; }
.ord-pick { display: flex; gap: 8px; flex-wrap: wrap; }
.mz-row .subj { grid-column: 1 / -1; font-size: 13px; color: #a9b6c2; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.mz-row.hot .subj { color: #e7ecf2; font-weight: 500; }
.mz-row .prev { grid-column: 1 / -1; font-size: 12px; color: #6d7d8b; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.mz-row .tags { grid-column: 1 / -1; margin-top: 4px; display: flex; gap: 6px; }
.mz-row .tags i { padding: 1px 7px; border-radius: 6px; font-size: 10.5px; font-style: normal; background: rgba(255,255,255,.06); color: #8b9aa8; }

.mz-read { display: flex; flex-direction: column; height: 100%; min-height: 0; overflow-y: auto; overscroll-behavior: contain; }
.mz-head { position: sticky; top: 0; z-index: 1; display: flex; align-items: center; gap: 10px; padding: 14px 18px; border-bottom: 1px solid rgba(255,255,255,.06); background: rgba(28,34,40,.96); backdrop-filter: blur(6px); }
.mz-back { display: none; flex: none; width: 30px; height: 30px; padding: 0; border: 1px solid rgba(255,255,255,.1); border-radius: 9px; background: rgba(255,255,255,.04); color: #b9c6d2; font-size: 20px; line-height: 1; cursor: pointer; }
.mz-h-main { min-width: 0; }
.mz-h-subj { font-size: 15px; font-weight: 600; color: #f2f6fa; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.mz-h-sub { margin-top: 2px; font-size: 11.5px; color: #6d7d8b; }
.mz-ghost { padding: 9px 18px; font-size: 12px; color: #e0b46a; background: rgba(224,180,106,.1); border-bottom: 1px solid rgba(224,180,106,.2); }
.mz-msgs { flex: 1; padding: 14px 18px; display: flex; flex-direction: column; gap: 12px; }
.mz-msg { padding: 12px 14px; border-radius: 14px; border: 1px solid rgba(255,255,255,.07); background: rgba(0,0,0,.2); }
.mz-msg.out { border-color: rgba(111,182,205,.22); background: rgba(111,182,205,.07); }
.mz-msg.pending { opacity: .62; }
.mz-m-head { display: flex; flex-wrap: wrap; align-items: baseline; gap: 8px; margin-bottom: 7px; }
.mz-m-head b { font-size: 13px; font-weight: 600; color: #e7ecf2; }
.mz-m-head i { font-size: 11px; font-style: normal; color: #6fb6cd; }
/* sender authentication (2026-10-14): nothing is shown when the email really is from the address it claims */
.mz-m-head .mz-auth { font-size: 10.5px; font-style: normal; font-weight: 600; letter-spacing: .02em;
  padding: 2px 7px; border-radius: 999px; color: #f0c37a; background: rgba(240,195,122,.12);
  border: 1px solid rgba(240,195,122,.3); }
.mz-m-head .mz-auth.bad { color: #f0a3a1; background: rgba(240,163,161,.14); border-color: rgba(240,163,161,.42); }
.mz-warn { margin: 0 0 8px; padding: 8px 10px; border-radius: 8px; font-size: 12px; line-height: 1.45;
  color: #f0c37a; background: rgba(240,195,122,.09); border: 1px solid rgba(240,195,122,.22); }
.mz-warn.bad { color: #f0a3a1; background: rgba(240,163,161,.1); border-color: rgba(240,163,161,.3); }
.mz-m-head span { margin-left: auto; font-size: 11px; color: #6d7d8b; }
/* Ignore / Unhide: bottom right of an incoming email, under its time */
.mz-m-foot { display: flex; justify-content: flex-end; margin-top: 8px; }
.mz-ign { padding: 3px 10px; border: 1px solid rgba(255,255,255,.1); border-radius: 8px; background: transparent; color: #8b9aa8; font: 500 11px 'DM Sans', sans-serif; cursor: pointer; }
.mz-ign:hover { color: #e7ecf2; border-color: rgba(255,255,255,.2); }
.mz-ign:disabled { opacity: .5; cursor: default; }
.mz-body { font-size: 13.5px; line-height: 1.55; color: #c7d2dc; white-space: pre-wrap; overflow-wrap: anywhere; }
/* the history a mail client quotes under every reply: one small chip, folded away, because the thread
   above it already shows each of those messages as its own bubble */
.mz-quoted { margin-top: 8px; }
.mz-qbtn { display: inline-flex; align-items: center; gap: 7px; padding: 1px 9px 3px; border-radius: 8px; border: 1px solid rgba(255,255,255,.1); background: rgba(255,255,255,.04); color: #8f9fae; font: 600 13px/1.25 'DM Sans', sans-serif; letter-spacing: 1px; cursor: pointer; }
.mz-qbtn:hover { background: rgba(255,255,255,.09); color: #c7d2dc; }
.mz-qbtn i { font: 400 11.5px/1 'DM Sans', sans-serif; font-style: normal; letter-spacing: 0; }
.mz-quoted:not(.open) .mz-qbtn i { display: none; }
.mz-quoted:not(.open) pre { display: none; }
.mz-quoted pre { margin: 9px 0 0; padding-left: 11px; border-left: 2px solid rgba(255,255,255,.13); color: #7e8c99; font: 12.5px/1.5 'DM Sans', sans-serif; white-space: pre-wrap; overflow-wrap: anywhere; }
.mz-atts { margin-top: 10px; display: flex; flex-wrap: wrap; gap: 8px; }
.mz-att { display: inline-flex; align-items: center; gap: 7px; max-width: 100%; padding: 6px 10px; border-radius: 9px; border: 1px solid rgba(255,255,255,.1); background: rgba(255,255,255,.04); color: #b9c6d2; font-size: 12px; text-decoration: none; }
.mz-att:hover { background: rgba(255,255,255,.09); color: #e7ecf2; }
.mz-att svg { flex: none; width: 15px; height: 15px; }
.mz-att span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
/* the customer behind the email: their name is the thread's heading and opens the popup; the popup itself
   is the portal's own .modal, so it is the same dialog as everything else here */
.mz-h-who { display: inline-flex; align-items: center; gap: 6px; max-width: 100%; padding: 0; border: 0; background: none; color: #f2f6fa; font: 600 15px 'DM Sans', sans-serif; cursor: pointer; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.mz-h-who:hover { color: #8fd0e4; }
.mz-h-who i { font-style: normal; color: #6fb6cd; }
.mz-pop { width: 620px; }
.mz-pop header { padding: 14px 16px 2px; font-size: 15px; color: #f2f6fa; }
.mz-pop-sub { padding: 0 16px 10px; font-size: 12px; color: var(--muted); overflow-wrap: anywhere; }
.mz-pop .list { padding: 0 16px 16px; }
.mz-pop-note { padding: 2px 0 12px; font-size: 12.5px; color: var(--muted); }
.mz-pop-note.err { color: #e0b46a; }
.ord { margin-bottom: 11px; padding: 11px 13px; border: 1px solid var(--line); border-radius: 13px; background: rgba(0,0,0,.18); }
.ord-top { display: flex; align-items: center; gap: 9px; }
.ord-top b { font: 600 13px 'JetBrains Mono', monospace; color: #e7ecf2; }
.ord-at { margin-left: auto; font-size: 11px; color: var(--muted); }
.ord-st { padding: 1px 8px; border-radius: 7px; font-size: 10.5px; font-weight: 600; background: rgba(255,255,255,.07); color: #9fb0bf; }
.ord-st.paid, .ord-st.delivered { background: rgba(95,201,139,.16); color: #7fd8a6; }
.ord-st.shipped, .ord-st.dropshipped { background: rgba(111,182,205,.16); color: #8fd0e4; }
.ord-st.unpaid { background: rgba(224,180,106,.14); color: #e0b46a; }
.ord-items { margin-top: 8px; display: flex; flex-direction: column; gap: 3px; font-size: 12.5px; color: #c7d2dc; }
.ord-items i { font-style: normal; color: var(--muted); }
.ord-items b { font-weight: 600; color: #e7ecf2; }
.ord-sum { margin-top: 8px; display: flex; align-items: center; gap: 8px; font-size: 12px; color: #8b9aa8; }
.ord-sum b { margin-left: auto; font-size: 13px; color: #f2f6fa; }
.ord-coin { padding: 1px 7px; border-radius: 6px; font-size: 10.5px; background: rgba(255,255,255,.06); color: #9fb0bf; }
.ord-ship { margin-top: 7px; font-size: 12px; color: #a9b6c2; overflow-wrap: anywhere; }
.ord-ship .k { display: inline-block; min-width: 62px; padding-right: 8px; color: var(--muted); }
.ord-ship.dim { color: var(--muted); }
.ord-pick { margin-top: 10px; }
.mz-q-price { display: flex; align-items: baseline; gap: 10px; padding: 2px 0 12px; }
.mz-q-price b { font-size: 24px; color: #7fd8a6; }
.mz-q-price span { font-size: 12px; color: #8b9aa8; }
.mz-q-warn { margin-bottom: 12px; padding: 9px 11px; border-radius: 9px; font-size: 11.5px; background: rgba(224,180,106,.1); color: #e0b46a; }
.mz-q-coin { display: flex; align-items: center; gap: 10px; padding-bottom: 14px; font-size: 12px; color: #8b9aa8; }
.mz-q-coin select { flex: 1; padding: 8px 10px; border: 1px solid var(--line); border-radius: 9px; background: rgba(0,0,0,.3); color: #e7ecf2; font: 400 12.5px 'DM Sans', sans-serif; outline: none; }
.mz-q-foot { display: flex; gap: 8px; justify-content: flex-end; }
.mz-q-foot .adm-btn { flex: 0 0 auto; }
/* the test email: deliverability, checked from the page the mail lands on (owner, 2026-10-05) */
.mz-bar-end { margin-left: auto; display: flex; align-items: center; gap: 12px; }
.mz-t-row { display: flex; align-items: center; gap: 10px; padding-bottom: 12px; font-size: 12px; color: #8b9aa8; }
.mz-t-row label { flex: 0 0 68px; }
.mz-t-row input, .mz-t-row select { flex: 1; min-width: 0; padding: 8px 10px; border: 1px solid var(--line); border-radius: 9px; background: rgba(0,0,0,.3); color: #e7ecf2; font: 400 12.5px 'DM Sans', sans-serif; outline: none; }
.mz-t-row input:focus, .mz-t-row select:focus { border-color: rgba(122,162,255,.5); }
#mzTestOut.ok { color: #7fd8a6; }
@media (max-width: 680px) {
  .mz-pop { width: 100%; max-width: calc(100vw - 24px); max-height: 82vh; }
  .mz-q-foot { flex-wrap: wrap; }
}

/* the canned answers, over the composer: the name first, then as much of the text as fits on one line */
.mz-quicks { max-height: 232px; overflow-y: auto; margin-bottom: 9px; border: 1px solid rgba(255,255,255,.1); border-radius: 12px; background: rgba(0,0,0,.3); }
.mz-quicks button[data-q] { display: block; width: 100%; padding: 9px 12px; border: 0; border-bottom: 1px solid rgba(255,255,255,.055); background: none; text-align: left; cursor: pointer; }
.mz-quicks button[data-q]:last-child { border-bottom: 0; }
.mz-quicks button[data-q]:hover { background: rgba(111,182,205,.1); }
.mz-quicks button[data-q] b { display: block; font-size: 12.5px; font-weight: 600; color: #e7ecf2; }
.mz-quicks button[data-q] span { display: block; margin-top: 2px; font-size: 11.5px; color: #78879a; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.mz-q-empty { padding: 11px 12px; font-size: 12px; color: #6d7d8b; }
.mz-reply { position: sticky; bottom: 0; padding: 12px 18px 14px; border-top: 1px solid rgba(255,255,255,.07); background: rgba(24,29,34,.97); backdrop-filter: blur(6px); }
.mz-reply textarea { width: 100%; height: clamp(150px, 26vh, 240px); min-height: 0; padding: 11px 13px; border-radius: 12px; border: 1px solid rgba(255,255,255,.1); background: rgba(0,0,0,.26); color: #e7ecf2; font: 13.5px/1.5 'DM Sans', sans-serif; outline: none; resize: vertical; }
.mz-reply textarea:focus { border-color: rgba(111,182,205,.55); box-shadow: 0 0 0 3px rgba(111,182,205,.13); }
.mz-reply-foot { display: flex; flex-wrap: wrap; align-items: center; justify-content: flex-end; gap: 9px; margin-top: 9px; }
.mz-reply-foot .hint { order: 2; flex: 1 0 100%; min-width: 0; font-size: 11.5px; color: #6d7d8b; overflow-wrap: anywhere; }
/* the composer tracks the window (26vh, floored at ~7 lines and capped at ~12) instead of a fixed height:
   a flat 11 lines left barely two bubbles of conversation on a 768px laptop. Dragging it still overrides. */
.rail button { position: relative; }
.rail .rbadge { margin-left: auto; padding: 1px 7px; border-radius: 8px; font-size: 11px; font-weight: 700; background: var(--accent); color: #fff; }
@media (max-width: 760px) {        /* the bottom bar stacks icon over label: the count rides the icon instead */
  .rail .rbadge { position: absolute; top: 2px; left: 50%; margin: 0 0 0 4px; padding: 0 5px; font-size: 10px; line-height: 15px; }
}

@media (max-width: 860px) {
  #emails .dz-head .back { width: 34px; height: 34px; margin-right: 2px; vertical-align: 3px; }
  #emails .dz-head .back svg { width: 24px; height: 24px; }
  .mz-split { grid-template-columns: 1fr; }
  #emails .dz-panel { height: auto; min-height: 0; }
  .mz-list { height: auto; border-right: 0; }
  .mz-read { display: none; height: auto; }
  .mz-back { display: grid; place-items: center; }
  body.mz-reading .mz-list { display: none; }
  body.mz-reading .mz-read { display: flex; }
  .mz-earned { margin-left: 0; }
  .mz-bar-end { margin-left: 0; flex-wrap: wrap; }
  #emails .dz-foot { flex-direction: column; align-items: flex-start; gap: 4px; }   /* the two lines used to overlap */
  .mz-reply textarea { min-height: 112px; font-size: 16px; }   /* iOS zooms a field under 16px */
  /* two buttons plus the hint do not fit one phone-width line, and "contact@tropichems.com" cannot wrap,
     so the hint used to run underneath them: give it its own line below the buttons */
  .mz-reply-foot #mzQuoteBtn { margin-left: auto; }
}

/* ── Updates: the internal update centre (owner, 2026-10-06; redesigned to their mock) ───────────
   A noticeboard: a chip saying what kind of thing it is, the headline, what changed, and a row of
   reactions that doubles as "who has actually seen this". */
.uz-sub { margin: -6px 0 16px; font-size: 13px; color: var(--muted); text-align: center; }
.uz-list { display: flex; flex-direction: column; gap: 10px; padding: 14px 16px 18px; overflow-y: auto; }
.uz-sec { margin: 6px 2px 0; padding-bottom: 7px; border-bottom: 1px solid rgba(255,255,255,.07);
  font-size: 10.5px; letter-spacing: .14em; text-transform: uppercase; color: #6d7d8b; }
.uz-sec:first-child { margin-top: 0; }
.uz-item { position: relative; padding: 15px 18px; border: 1px solid var(--line); border-left: 3px solid var(--line);
  border-radius: 12px; background: var(--card); cursor: pointer; transition: border-color .16s ease, background .16s ease; }
.uz-item:hover { background: rgba(255,255,255,.03); }
.uz-item.new { background: rgba(111,182,205,.05); }
.uz-item.important { border-left-color: #d9a441; }
.uz-item.urgent { border-left-color: #d66a6a; }
.uz-item.normal.new { border-left-color: #6fb6cd; }
.uz-top { display: flex; align-items: center; gap: 8px; margin-bottom: 9px; }
.uz-top .grow { flex: 1; }
.uz-item h3 { margin: 0 0 6px; font-size: 16px; font-weight: 600; color: #f2f6fa; }
.uz-new { display: inline-flex; align-items: center; gap: 6px; font-size: 11.5px; color: #8fd0e4; }
.uz-new i { width: 6px; height: 6px; border-radius: 50%; background: #6fb6cd; }
.uz-pin { padding: 2px 8px; border-radius: 7px; font-size: 10.5px; color: #9fb0bd; background: rgba(255,255,255,.06); }
.uz-pri { flex: none; padding: 3px 9px; border-radius: 7px; font-size: 10.5px; font-weight: 600;
  letter-spacing: .02em; background: rgba(255,255,255,.07); color: #9fb0bd; }
.uz-pri.important { background: rgba(217,164,65,.16); color: #e3bb6b; }
.uz-pri.urgent { background: rgba(214,106,106,.18); color: #e8a0a0; }
.uz-body { font-size: 13.5px; line-height: 1.65; color: #c6d2dd; white-space: pre-wrap; word-break: break-word; }
.uz-foot { display: flex; align-items: center; gap: 10px; margin-top: 12px; font-size: 11.5px; color: #7f8f9d; }
.uz-foot .grow { flex: 1; }
.uz-by { font-family: 'JetBrains Mono', ui-monospace, monospace; font-size: 11px; white-space: nowrap; }
.uz-react { display: inline-flex; gap: 6px; }
.uz-rx { display: inline-flex; align-items: center; gap: 5px; padding: 4px 10px; border: 1px solid var(--line);
  border-radius: 9px; background: rgba(255,255,255,.04); font-size: 13px; line-height: 1; cursor: pointer;
  transition: background .14s ease, border-color .14s ease; }
.uz-rx:hover { background: rgba(255,255,255,.09); }
.uz-rx.on { border-color: rgba(111,182,205,.5); background: rgba(111,182,205,.15); }
.uz-rx b { font-size: 11px; font-weight: 600; color: #cfd9e2; }
.au-label { flex: 1; min-width: 150px; max-width: 260px; padding: 7px 10px; border: 1px solid var(--line);
  border-radius: 8px; background: var(--bg); color: var(--text); font: 400 13px 'DM Sans', sans-serif; outline: none; }
.au-pin { display: inline-flex; align-items: center; gap: 6px; font-size: 12.5px; color: var(--muted); cursor: pointer; }
/* the urgent bar: over every page, until it is read or waved away */
/* The app is a full-height grid that never scrolls, so a bar floating over it would cover whatever is at the
   top and swallow clicks meant for it. It gets its own strip instead: the app is shortened by exactly the
   banner's height (box-sizing + padding-top) and the bar sits in it. */
.app.has-banner { padding-top: var(--banner-h, 44px); box-sizing: border-box; }
/* z-index 15: above the app, BELOW a dialog (20) and the emoji picker (60). An urgent bar painting over an
   open confirm box would have hidden the thing the person was answering. */
.uz-banner { position: fixed; top: 0; left: 0; right: 0; z-index: 15; display: flex; align-items: center; gap: 10px;
  padding: 10px 16px; background: linear-gradient(90deg, rgba(214,106,106,.22), rgba(214,106,106,.10));
  border-bottom: 1px solid rgba(214,106,106,.35); backdrop-filter: blur(6px); font-size: 13px; color: #f2f6fa; }
.uz-banner b { font-weight: 600; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.uz-banner .grow { flex: 1; }
.uz-x { width: 26px; height: 26px; padding: 0; border: 0; border-radius: 7px; background: rgba(255,255,255,.06);
  color: #e8dada; font-size: 16px; line-height: 1; cursor: pointer; }
.uz-x:hover { background: rgba(255,255,255,.12); }
/* the admin side */
.au-form .adm-input { width: 100%; }
.au-form input.adm-input { height: 38px; }
.au-form textarea.adm-input { min-height: 120px; resize: vertical; font-size: 13px; line-height: 1.55; }
.au-form .adm-input:focus { border-color: var(--accent); }
.au-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px 18px; align-items: end; }
.au-people { display: flex; flex-wrap: wrap; gap: 7px; }
.au-people label { display: inline-flex; align-items: center; gap: 6px; min-height: 32px; box-sizing: border-box; padding: 6px 11px;
  border: 1px solid var(--line); border-radius: 999px; font-size: 12.5px; color: #b9c6d2; cursor: pointer; }
.au-people label.on { border-color: var(--accent); background: rgba(111,182,205,.12); color: #e7eef4; }
.au-hint { font-size: 12px; color: #93a3b1; }
/* History: one flat row per update, the Orders rhythm; the priority is the chip's colour */
.au-item { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 10px 18px; align-items: start;
  padding: 14px 18px; border-bottom: 1px solid rgba(255,255,255,.04); }
.au-main { min-width: 0; }
.au-item-top { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.au-item-top b { font-size: 13px; font-weight: 600; color: #e7ecf2; }
.au-item-sub { margin-top: 4px; font-size: 12px; color: #7f8f9d; }
.au-item-body { margin-top: 8px; max-width: 72ch; font-size: 12.5px; line-height: 1.55; color: #a9b6c2; white-space: pre-wrap;
  word-break: break-word; max-height: 110px; overflow: hidden; }
.au-item-act { display: flex; align-items: center; gap: 8px; }
.au-seen { margin-right: 6px; white-space: nowrap; font-size: 12px; color: #93a3b1; cursor: pointer;
  border-bottom: 1px dotted rgba(127,143,157,.5); }
.au-readers { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 8px; font-size: 11.5px; color: #b9c6d2; }
.au-readers i { font-style: normal; color: #7f8f9d; }
.au-readers .dim { color: #7f8f9d; }
@media (max-width: 760px) {
  .au-grid { grid-template-columns: minmax(0, 1fr); }
  .au-item { grid-template-columns: minmax(0, 1fr); }
  .au-item-act { flex-wrap: wrap; }
}
@media (max-width: 760px) {
  .uz-list { padding: 10px 10px 16px; }
  .uz-banner { padding: 9px 10px; gap: 7px; font-size: 12px; }
  .uz-banner b { flex: 1; }
  .au-lbl { min-width: 0; flex-basis: 100%; }
}

/* A 13th admin tab (Updates, 2026-10-06) pushed the row into the "Refresh" button on a 1280px screen: the
   tabs wrapped onto a second line and the two overlapped. The row now gives ground instead of colliding -
   it tightens, then scrolls, and the Refresh side keeps its own space. */
/* ABOVE 900px only: below that the admin nav is a button GRID (see the phone rules), and these would give
   its cells 22px of side padding and turn the grid into a scroller. */
@media (min-width: 901px) {
  .adm-nav { gap: 14px; }
  .adm-nav .tabs { flex-wrap: nowrap; overflow-x: auto; scrollbar-width: none; }
  .adm-nav .tabs::-webkit-scrollbar { display: none; }
  .adm-nav .tabs button { padding-left: 11px; padding-right: 11px; flex: none; }
  .adm-nav .grow { flex: 1 1 0; min-width: 8px; }
  .adm-nav .upd, .adm-nav .adm-btn { flex: none; }
}
/* the feed fills its page, like the mailbox does, instead of floating in the middle of the snow */
/* Every page declares its own .dz-head: there is no shared one, so a page without this rule gets a heading with
   no padding at all, jammed into the top edge and clipped (the italic serif ascenders were cut off). Matched to
   the Emails page, which has the same full-height panel underneath it. */
#updates .dz { padding-bottom: 40px; }         /* a real gap under the card, not the shared 80px of tail */
/* The page is a flex column, so the panel FILLS what is left under the heading rather than guessing at a
   height: the subtitle and the urgent banner both change it, and a magic number ran the card off screen. */
#updates .dz { display: flex; flex-direction: column; min-height: 0; flex: 1; }
.uz .dz-panel { flex: 1; min-height: 240px; display: flex; flex-direction: column; overflow: hidden; }
.uz .uz-list { flex: 1; min-height: 0; }
@media (max-width: 760px) {
  #updates .dz { display: block; }
  .uz .dz-panel { flex: none; min-height: 0; overflow: visible; }
  .uz-list { overflow: visible; }
}
/* Panic is the emergency control: it stays visible at the right edge of the row however far the tabs scroll. */
/* The tab itself is SOLID, and the fade sits just outside its left edge: fading across its own box let a tab
   scrolled underneath show through next to the word Panic (People peeked out as "P Panic"). */
.adm-nav .tabs .panic-tab { position: sticky; right: var(--modw, 0px); z-index: 1; padding-left: 14px; background: rgb(23,28,33); }
.adm-nav .tabs [data-tab="audit"] { position: sticky; right: 0; z-index: 1; background: rgb(23,28,33); }
.adm-nav .tabs .panic-tab::before { content: ""; position: absolute; top: 0; bottom: 0; right: 100%; width: 32px;
  pointer-events: none; background: linear-gradient(90deg, rgba(23,28,33,0), rgb(23,28,33)); opacity: 0; }
.adm-nav .tabs.more .panic-tab::before { opacity: 1; }   /* only while tabs are hidden behind Panic (app.js) */

.hz-up { border-bottom: 1px solid rgba(255,255,255,.06); }
.hz-up .uz-list { padding-top: 12px; }
.hz-up .hz-bar .grow { flex: 1; }
.hz-top .hz-pres { padding: 0; border: 0; }
.hz-top .grow { flex: 1; }

/* Activity · 1 day: the hours still to come today are drawn faint */
.bars.hourly .bar.later { opacity: .35; }

/* 👍 on an update */
.uz-react { display: flex; align-items: center; gap: 10px; margin-top: 10px; }
.uz-thumb { display: inline-flex; align-items: center; gap: 6px; padding: 4px 11px; border: 1px solid var(--line);
  border-radius: 999px; background: rgba(255,255,255,.04); color: #b9c6d2; font: 500 13px 'DM Sans', sans-serif; cursor: pointer;
  transition: background .15s ease, border-color .15s ease; }
.uz-thumb:hover { background: rgba(255,255,255,.08); }
.uz-thumb.on { border-color: rgba(111,182,205,.55); background: rgba(111,182,205,.16); color: #e7eef4; }
.uz-thumb b { font-weight: 600; font-size: 12px; }
.uz-who { font-size: 12px; color: #9fb0bd; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; min-width: 0; }
.uz-who.dim { color: #6d7d8b; }

/* ── Leaderboard (owner, 2026-10-06, to their design) ──────────────────────────────────────────── */
/* every page declares its own .dz-head: without this the heading has no padding and sits on the subtitle */
.lb-sub { margin: 0 0 18px; font-size: 13px; color: var(--muted); text-align: center; }
.lb-top { display: grid; grid-template-columns: 1.1fr .9fr; gap: 16px; margin-bottom: 16px; }
.lb-hero { padding: 22px 24px; border-radius: 18px; border: 1px solid rgba(255,255,255,.08);
  background: linear-gradient(150deg, rgba(111,216,176,.10), rgba(31,38,45,.9) 62%); }
.lb-hero small, .lb-card small { display: block; font-size: 11px; letter-spacing: .14em; text-transform: uppercase; color: #7fc9a9; }
.lb-card small { color: #8b9aa8; }
.lb-who { display: flex; align-items: center; gap: 13px; margin: 14px 0 18px; }
.lb-who b { display: block; font-size: 26px; font-weight: 700; letter-spacing: -.02em; line-height: 1.15; color: #f2f6fa; }
.lb-who .sub { display: block; margin-top: 3px; font-size: 12.5px; color: #9fb0bd; }
.lb-stats { display: grid; grid-template-columns: repeat(3, auto); gap: 26px; justify-content: start; }
.lb-stats b { display: block; font-size: 30px; font-weight: 700; letter-spacing: -.02em; color: #f2f6fa; }
.lb-stats b.green, .lb-card b.green, .lb-row .e.green { color: #7fe0b5; }
.lb-stats span { display: block; margin-top: 3px; font-size: 11.5px; color: #86a396; }
.lb-side { display: flex; flex-direction: column; gap: 16px; }
.lb-card { flex: 1; padding: 18px 22px; border-radius: 18px; border: 1px solid rgba(255,255,255,.08); background: rgba(28,34,40,.86); }
.lb-card b { display: block; margin: 8px 0 4px; font-size: 30px; font-weight: 700; letter-spacing: -.02em; color: #f2f6fa; }
.lb-card span { font-size: 12px; color: #8b9aa8; }
.lb-head, .lb-row { display: grid; grid-template-columns: 34px 1fr auto auto; align-items: center; gap: 14px; padding: 13px 20px; }
.lb-head { font-size: 11px; letter-spacing: .12em; text-transform: uppercase; color: #7f8f9d; border-bottom: 1px solid rgba(255,255,255,.06); }
.lb-row { border-bottom: 1px solid rgba(255,255,255,.05); row-gap: 9px; }
.lb-row:last-of-type { border-bottom: 0; }
.lb-row.me { background: rgba(111,182,205,.06); }
.lb-row .r { font-size: 14px; color: #7f8f9d; }
.lb-row .w { display: flex; align-items: center; gap: 11px; min-width: 0; }
.lb-row .av, .lb-hero .av { flex: none; width: 34px; height: 34px; border-radius: 50%; display: inline-flex;
  align-items: center; justify-content: center; background: rgba(111,182,205,.18); color: #cfe6ef; font-size: 13px; font-weight: 600; }
.lb-hero .av { width: 46px; height: 46px; font-size: 17px; }
.lb-row .nm b { display: block; font-size: 14px; color: #f2f6fa; }
.lb-row .nm i { font-style: normal; font-size: 11.5px; color: #7f8f9d; }
.lb-row .e { font-size: 15px; font-weight: 600; text-align: right; }
.lb-row .e.dim { color: #6d7d8b; }
.lb-row .d { min-width: 64px; font-size: 15px; color: #cfd9e2; text-align: right; }
.lb-row .bar { grid-column: 2 / 4; height: 4px; border-radius: 999px; background: rgba(255,255,255,.07); overflow: hidden; }
.lb-row .bar i { display: block; height: 100%; border-radius: 999px; background: linear-gradient(90deg, #6fb6cd, #7fe0b5); }
.lb-row .pct { font-size: 11.5px; color: #7f8f9d; text-align: right; }
.lb-none { margin-top: 14px; font-size: 13.5px; color: #9fb0bd; }
@media (max-width: 860px) {
  .lb-top { grid-template-columns: 1fr; }
  .lb-side { flex-direction: row; }
  .lb-stats { gap: 18px; }
  .lb-stats b, .lb-card b { font-size: 24px; }
  .lb-who b { font-size: 28px; }
  .lb-head, .lb-row { padding: 12px 14px; gap: 10px; grid-template-columns: 24px 1fr auto auto; }
  .lb-row .d { min-width: 44px; }
}

/* ── Products to add (owner, 2026-10-06) ──────────────────────────────────────────────────────── */
#prods .dz { display: flex; flex-direction: column; min-height: 0; flex: 1; padding-bottom: 40px; }
/* one card: what this is and the form on top, then search, tabs and the list (owner, 2026-10-06) */
.pz-sub { margin: 0 0 14px; font-size: 13px; color: var(--muted); }
.pz-new { padding: 18px 20px 18px; border-bottom: 1px solid rgba(255,255,255,.06); }
.pz-form { display: grid; grid-template-columns: 1.4fr 1fr auto; gap: 12px 14px; align-items: end; }
.pz-form label { display: flex; flex-direction: column; gap: 5px; font-size: 11.5px; color: var(--muted); }
.pz-form label.wide { grid-column: 1 / -1; }
.pz-form input { padding: 9px 11px; border: 1px solid var(--line); border-radius: 9px; background: var(--bg);
  color: var(--text); font: 400 13.5px 'DM Sans', sans-serif; outline: none; }
.pz-form input:focus { border-color: var(--accent); }
.pz-form .adm-btn { height: 38px; padding: 0 26px; }
.pz-panel { flex: 1; min-height: 200px; display: flex; flex-direction: column; overflow: hidden; }
.pz-panel > .pz-new { overflow: visible; position: relative; z-index: 5; }
.pz-bar { gap: 12px; flex-wrap: wrap; }
.pz-search { margin-left: auto; width: 240px; max-width: 100%; padding: 8px 12px; border: 1px solid var(--line); border-radius: 9px;
  background: var(--bg); color: var(--text); font: 400 13px 'DM Sans', sans-serif; outline: none; }
.pz-search:focus { border-color: var(--accent); }
.dz-tabs.dim { opacity: .4; }               /* a search looks across every tab, so the tabs step back */
.pz-list { flex: 1; min-height: 0; overflow-y: auto; display: flex; flex-direction: column; gap: 10px; padding: 14px 16px 18px; }
.pz-item { display: flex; gap: 14px; padding: 14px 16px; border: 1px solid var(--line); border-left: 3px solid var(--line);
  border-radius: 12px; background: var(--card); }
.pz-item.added { border-left-color: #7fe0b5; }
.pz-item.declined { border-left-color: #d66a6a; opacity: .75; }
.pz-main { flex: 1; min-width: 0; }
.pz-top { display: flex; align-items: center; gap: 9px; flex-wrap: wrap; }
.pz-top b { font-size: 14.5px; color: #f2f6fa; }
.pz-acct { padding: 2px 8px; border-radius: 7px; font-size: 11px; background: rgba(255,255,255,.06); color: #9fb0bd; }
.pz-st { padding: 2px 8px; border-radius: 7px; font-size: 10.5px; font-weight: 600; }
.pz-st.added { background: rgba(111,216,176,.16); color: #7fe0b5; }
.pz-st.declined { background: rgba(214,106,106,.16); color: #e8a0a0; }
.pz-by { margin-top: 6px; font-size: 11.5px; color: #7f8f9d; }
.pz-dec { margin-top: 6px; padding: 6px 10px; border-radius: 8px; background: rgba(255,255,255,.04);
  font-size: 12px; color: #b9c6d2; }
@media (max-width: 760px) {
  #prods .dz { display: block; }
  .pz-panel { flex: none; overflow: visible; }
  .pz-list { overflow: visible; }
  .pz-form { grid-template-columns: 1fr; }
  .pz-search { width: 100%; }
  .pz-item { flex-direction: column; }
  }
/* the account field: a themed combobox, because a native <datalist> popup cannot be styled */
.pz-combo { position: relative; }
.pz-caret { position: absolute; right: 11px; bottom: 15px; width: 0; height: 0; pointer-events: none;
  border: 4px solid transparent; border-top-color: #7f8f9d; }
.pz-combo input { padding-right: 26px; }
.pz-menu { position: absolute; top: 100%; left: 0; right: 0; z-index: 25; margin-top: 4px; max-height: 232px;
  overflow-y: auto; padding: 5px; border: 1px solid var(--line); border-radius: 10px; background: var(--pop);
  box-shadow: 0 14px 34px rgba(0,0,0,.5); }
.pz-opt { padding: 8px 10px; border-radius: 7px; font-size: 13.5px; color: var(--text); cursor: pointer; }
.pz-opt:hover, .pz-opt.hi { background: rgba(111,182,205,.16); }

/* ── Spin the wheel (owner, 2026-10-06, ported from "Spin The Wheel.html") ─────────────────────
   Measurements come straight from the design: the rotor carries the bezel, the pegs AND the face, so the
   rim turns with the wheel; the face is inset 5.2% inside the bezel, which is what leaves the dark rim the
   pegs sit on; the badges hang at top -5.6%, just outside it. */
#wheel .dz { padding-bottom: 40px; align-items: stretch; }
/* the container query belongs on the FULL-WIDTH wrapper: putting it on the flex column makes the column's
   width depend on the cqw units inside it, and the whole page collapses to content width */
.wz-panel { position: relative; container-type: inline-size; width: 100%; box-sizing: border-box;
  overflow: hidden; padding: 0; }
.wz-glow { position: absolute; inset: 0; pointer-events: none;
  background: radial-gradient(760px 560px at 50% 55%, rgba(227,190,120,.10), transparent 70%),
              radial-gradient(600px 240px at 50% 0%, rgba(227,190,120,.07), transparent 70%); }
.wz-col { position: relative; width: 100%; box-sizing: border-box; display: flex; flex-direction: column;
  align-items: center; gap: clamp(14px, 2.2cqw, 22px);
  padding: clamp(18px, 3cqw, 32px) clamp(14px, 4cqw, 40px) clamp(20px, 3cqw, 36px); }
#wheel .dz-head h1 { margin: 0; text-align: center; font-family: 'Instrument Serif', Georgia, serif; font-style: italic;
  font-weight: 400; font-size: clamp(34px, 5vw, 56px); line-height: 1.05; color: #6fb6cd;
  text-shadow: 0 0 28px rgba(111,182,205,.25); }
#wheel .wz.gold .dz-head h1 {             /* needs the #wheel id to outrank the base title colour */ color: #e8d3a2; text-shadow: 0 0 28px rgba(227,201,143,.35); }
.wz-meter { display: flex; flex-direction: column; align-items: center; width: 100%; max-width: 400px; }
.wz-count { display: flex; align-items: baseline; gap: 10px; }
.wz-count b { font-size: clamp(38px, 10cqw, 52px); font-weight: 700; line-height: 1; letter-spacing: -.03em; color: #f2f6fa; }
.wz.gold .wz-count b { color: #f1e2bd; }
.wz-count span { font-size: clamp(14px, 3.6cqw, 16px); font-weight: 500; color: #b9c6d2; }
.wz-next { width: 100%; margin-top: clamp(12px, 2cqw, 16px); }
.wz-nrow { display: flex; justify-content: space-between; gap: 10px; font-size: 12.5px; color: #b9c6d2; }
.wz-nrow span:last-child { font-family: var(--mono); color: #e7ecf2; }
.wz-bar { position: relative; height: 8px; margin-top: 8px; border-radius: 6px; background: rgba(0,0,0,.42);
  box-shadow: inset 0 1px 2px rgba(0,0,0,.4); }
.wz-bar i { position: relative; display: block; height: 100%; border-radius: 6px;
  background: linear-gradient(90deg, #4d8ba3, #6fb6cd 55%, #8fe0c0); box-shadow: 0 0 12px rgba(143,224,192,.35);
  transition: width .4s ease; }
.wz-bar em { position: absolute; right: -2px; top: -3px; bottom: -3px; width: 22px; border-radius: 6px;
  background: radial-gradient(closest-side, rgba(255,255,255,.95), rgba(255,255,255,0));
  animation: wzShimmer 1.6s ease-in-out infinite; }
@keyframes wzShimmer { 0%,100% { opacity: .25; transform: translateX(-6px); } 50% { opacity: 1; transform: translateX(2px); } }
.wz-pips { display: flex; align-items: center; gap: 12px; margin-top: 12px; }
.wz-pipset { display: flex; align-items: center; gap: 7px; }
.wz-pip { width: 12px; height: 12px; border-radius: 50%; box-sizing: border-box;
  border: 1.5px solid rgba(255,255,255,.16); background: rgba(255,255,255,.05); }
.wz-pip.last { width: 17px; height: 17px; border-color: rgba(227,201,143,.55); background: rgba(227,201,143,.10);
  animation: wzPip 2.2s ease-in-out infinite; }
.wz-pip.on { border-color: rgba(246,236,210,.7); background: radial-gradient(circle at 35% 30%, #f6ecd2, #d9bc7e); }
@keyframes wzPip { 0%,100% { box-shadow: 0 0 6px rgba(227,201,143,.45); } 50% { box-shadow: 0 0 16px rgba(227,201,143,.95); } }
.wz-pipl { font-size: 12.5px; font-weight: 600; color: #c9c0ad; }
.wz-pipl.ready { color: #e3c98f; }

.wz-stage { position: relative; width: min(94cqw, 520px); aspect-ratio: 1; padding: 4.5%; box-sizing: border-box; }
.wz-inner { position: relative; width: 100%; height: 100%; container-type: inline-size; }
.wz-halo { position: absolute; inset: -6%; border-radius: 50%; pointer-events: none;
  background: radial-gradient(circle, rgba(111,182,205,.18), transparent 66%); }
.wz.gold .wz-halo { background: radial-gradient(circle, rgba(227,201,143,.22), transparent 66%); }
.wz-rotor { position: absolute; inset: 0; will-change: transform; }
.wz-bezel { position: absolute; inset: 0; border-radius: 50%; box-sizing: border-box;
  background: linear-gradient(160deg, #2c353d, #171c21 55%, #12161a); border: 1px solid rgba(255,255,255,.1);
  box-shadow: 0 4cqw 9cqw rgba(0,0,0,.55), inset 0 1px 0 rgba(255,255,255,.08); }
.wz.gold .wz-bezel { background: linear-gradient(160deg, #5b4a2b, #2a2217 55%, #1a160f); border-color: rgba(227,201,143,.5); }
.wz-pegs, .wz-badges, .wz-labels, .wz-div { position: absolute; inset: 0; pointer-events: none; }
.wz-spoke { position: absolute; inset: 0; pointer-events: none; }
.wz-peg { position: absolute; left: 50%; top: 1.15%; width: 2.2%; height: 2.2%; margin-left: -1.1%;
  border-radius: 50%; background: #d5edf4; box-shadow: 0 0 1.6cqw rgba(159,215,232,.75);
  animation: wzPeg 2.4s ease-in-out infinite; }
.wz.gold .wz-peg { background: #e3c98f; box-shadow: 0 0 1.6cqw rgba(227,201,143,.7); }
@keyframes wzPeg { 0%,100% { opacity: 1; } 50% { opacity: .35; } }
.wz-face { position: absolute; inset: 5.2%; border-radius: 50%; overflow: hidden;
  box-shadow: inset 0 0 0 2px rgba(0,0,0,.4), inset 0 0 6cqw rgba(0,0,0,.35); }
.wz-dv { position: absolute; left: 50%; top: 0; height: 50%; transform-origin: 50% 100%; }
.wz-gloss { position: absolute; inset: 0; border-radius: 50%; pointer-events: none;
  background: radial-gradient(circle at 50% 28%, rgba(255,255,255,.13), transparent 52%); }
.wz-lbox { position: absolute; left: 50%; transform: translateX(-50%); display: flex; flex-direction: column;
  align-items: center; gap: .6cqw; }
.wz-lbox i { font-size: 4.4cqw; font-weight: 700; font-style: normal; line-height: 1;
  text-shadow: 0 0 2cqw rgba(207,233,241,.6); }
.wz-lbox span { line-height: 1; white-space: nowrap; }
.wz-badge { position: absolute; left: 50%; top: -5.6%; transform: translateX(-50%); padding: .5cqw 1.5cqw;
  border-radius: 999px; font-size: 2.7cqw; font-weight: 800; letter-spacing: .02em; line-height: 1.2;
  white-space: nowrap; border: 1px solid; }
.wz-pointer { position: absolute; left: 50%; top: -4%; width: 8.5%; height: 11%; margin-left: -4.25%;
  transform-origin: 50% 22%; z-index: 4; filter: drop-shadow(0 1cqw 1.4cqw rgba(0,0,0,.6)); }
.wz-pointer b { display: block; width: 100%; height: 100%;
  background: linear-gradient(180deg, #f6fbfd, #9ed3e3); clip-path: polygon(50% 100%, 0 20%, 20% 0, 80% 0, 100% 20%); }
.wz.gold .wz-pointer b { background: linear-gradient(180deg, #fffaf0, #e3c98f); }
.wz-pointer u { position: absolute; left: 30%; top: 8%; width: 18%; height: 40%; background: rgba(255,255,255,.75);
  clip-path: polygon(0 0, 100% 0, 30% 100%); opacity: .8; }
.wz-hub { position: absolute; left: 50%; top: 50%; width: 21%; height: 21%; transform: translate(-50%,-50%);
  z-index: 3; border-radius: 50%; border: .7cqw solid rgba(255,255,255,.18); cursor: pointer;
  font: 800 3.6cqw 'DM Sans', sans-serif; letter-spacing: .12em; color: #0d1418;
  background: radial-gradient(circle at 50% 32%, #a8dcea, #4d8ba3); animation: wzHub 1.8s ease-in-out infinite; }
.wz-hub:hover:not(:disabled) { filter: brightness(1.1); }
.wz.gold .wz-hub { color: #2a1d08; border-color: rgba(246,236,210,.4);
  background: radial-gradient(circle at 50% 32%, #f6ecd2, #c9a865); }
.wz-hub:disabled { color: #8b9aa8; background: radial-gradient(circle at 50% 32%, #3a454e, #222a30);
  animation: none; cursor: default; }
@keyframes wzHub { 0%,100% { box-shadow: 0 0 0 0 rgba(111,182,205,.5), 0 1.4cqw 4cqw rgba(0,0,0,.5); }
                   50% { box-shadow: 0 0 0 2.4cqw rgba(111,182,205,0), 0 1.4cqw 4cqw rgba(0,0,0,.5); } }

/* the result sits ON the wheel as a card, it does not veil the whole circle */
.wz-over { position: absolute; inset: 0; z-index: 8; pointer-events: none; }
.wz-over > * { pointer-events: auto; }
.wz-card { position: absolute; left: 50%; top: 50%; width: 66%; transform: translate(-50%,-50%);
  padding: 5cqw 4.5cqw 4cqw; box-sizing: border-box; border-radius: 5cqw; text-align: center;
  background: linear-gradient(165deg, color-mix(in srgb, var(--ink) 15%, transparent), rgba(27,33,38,.94) 55%);
  border: 1px solid color-mix(in srgb, var(--ink) 47%, transparent); backdrop-filter: blur(10px);
  box-shadow: 0 4cqw 10cqw rgba(0,0,0,.6), 0 0 10cqw color-mix(in srgb, var(--ink) 27%, transparent);
  animation: wzPop .5s cubic-bezier(.2,.9,.3,1.25) both; }
@keyframes wzPop { 0% { opacity: 0; transform: translate(-50%,-50%) scale(.7); }
  60% { opacity: 1; transform: translate(-50%,-50%) scale(1.04); } 100% { opacity: 1; transform: translate(-50%,-50%) scale(1); } }
.wz-card small { font-size: 2.6cqw; font-weight: 700; letter-spacing: .24em; text-transform: uppercase; color: var(--ink); }
.wz-card b { display: block; margin-top: 1.5cqw; font-size: 17cqw; font-weight: 800; line-height: 1;
  letter-spacing: -.04em; color: var(--ink); text-shadow: 0 0 6cqw color-mix(in srgb, var(--ink) 27%, transparent); }
.wz-card span { display: block; margin-top: 1.8cqw; font-size: 3.2cqw; color: #b9c6d2; }
.wz-cbtn { margin-top: 4cqw; width: 100%; padding: 2.6cqw 3cqw; border: 0; border-radius: 3cqw; cursor: pointer;
  font: 700 3.4cqw 'DM Sans', sans-serif; color: #0d1418; background: linear-gradient(140deg, #a8ecd2, #6fd8b0); }
.wz-cbtn:hover { filter: brightness(1.1); }
.wz-cbtn.gold { color: #231a0b; background: linear-gradient(140deg, #f1e2bd, #d9bc7e); }
.wz-toastrow { display: flex; align-items: center; justify-content: center; min-height: 46px; margin-top: -6px; }
.wz-toast { display: flex;
  align-items: center; gap: 11px; padding: 9px 18px; border-radius: 999px; white-space: nowrap;
  border: 1px solid color-mix(in srgb, var(--ink) 40%, transparent); background: rgba(27,33,38,.92);
  box-shadow: 0 0 26px color-mix(in srgb, var(--ink) 20%, transparent); animation: wzToast .3s ease both; }
@keyframes wzToast { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: none; } }
.wz-toast b { font-size: 20px; color: var(--ink); }
.wz-toast span { font-size: 12px; color: #9fb0bd; }
.wz-again { position: absolute; left: 50%; top: 31%; transform: translate(-50%,-50%) rotate(-8deg);
  display: flex; flex-direction: column; align-items: center; gap: 1cqw; padding: 2.4cqw 6cqw 2.8cqw;
  border-radius: 4cqw; border: 1.5px solid rgba(207,233,241,.45); background: rgba(16,22,27,.92);
  animation: wzStamp .45s cubic-bezier(.2,.9,.3,1.25) both; }
@keyframes wzStamp { 0% { opacity: 0; transform: translate(-50%,-50%) rotate(-8deg) scale(1.6); }
  55% { opacity: 1; transform: translate(-50%,-50%) rotate(-8deg) scale(.94); }
  100% { opacity: 1; transform: translate(-50%,-50%) rotate(-8deg) scale(1); } }
.wz-again b { font-size: 7cqw; color: #e2f4fa; }
.wz-again span { font-size: 2.8cqw; color: #9fb0bd; }
.wz-unlock, .wz-jack { position: absolute; left: 50%; top: 50%; width: 74%; transform: translate(-50%,-50%);
  padding: 5cqw 4.5cqw; box-sizing: border-box; border-radius: 5cqw; text-align: center;
  border: 1px solid rgba(227,201,143,.5); background: rgba(22,20,14,.95); backdrop-filter: blur(10px);
  box-shadow: 0 4cqw 10cqw rgba(0,0,0,.6), 0 0 10cqw rgba(227,201,143,.25);
  animation: wzPop .5s cubic-bezier(.2,.9,.3,1.25) both; }
.wz-unlock small, .wz-jack small { font-size: 2.6cqw; font-weight: 700; letter-spacing: .24em; color: #e3c98f; }
.wz-unlock b, .wz-jack b { display: block; margin-top: 1.5cqw; font-size: 6.4cqw; font-weight: 800; color: #f1e2bd; }
.wz-jack b { font-size: 17cqw; letter-spacing: -.04em; }
.wz-unlock span, .wz-jack span { display: block; margin-top: 1.8cqw; font-size: 3cqw; color: #c6d2dd; }
.wz-jack em { display: block; margin-top: 1cqw; font-size: 2.6cqw; font-style: normal; color: #9fb0bd; }

.wz-actions { display: flex; align-items: center; gap: 10px; width: 100%; max-width: 340px; }
.wz-btn { flex: 1; padding: 16px 28px; border: 0; border-radius: 16px; cursor: pointer;
  font: 700 15px 'DM Sans', sans-serif; color: #0d1418;
  background: linear-gradient(140deg, #8fe0c0, #6fb6cd); box-shadow: 0 12px 32px rgba(111,182,205,.28); }
.wz.gold .wz-btn { color: #231a0b; background: linear-gradient(140deg, #f1e2bd, #d9bc7e); box-shadow: 0 12px 32px rgba(227,201,143,.3); }
.wz-btn.free { background: linear-gradient(140deg, #e2f4fa, #9ed3e3); }
.wz-btn:disabled { color: #8b9aa8; background: rgba(255,255,255,.06); box-shadow: none; cursor: default; }
.wz-live { position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden;
  clip: rect(0 0 0 0); white-space: nowrap; border: 0; }
.wz-recent { width: 100%; margin-top: 6px; overflow: hidden; }
.wz-rlbl { margin-bottom: 8px; font-size: 10.5px; letter-spacing: .14em; text-transform: uppercase;
  color: #6d7d8b; text-align: center; }
.wz-track { display: flex; gap: 26px; white-space: nowrap; animation: wzMarquee 26s linear infinite; }
.wz-track:empty { animation: none; }
@keyframes wzMarquee { from { transform: translateX(0); } to { transform: translateX(-50%); } }
.wz-tk { display: inline-flex; align-items: center; gap: 7px; font-size: 12px; color: #9fb0bd; }
.wz-tk i { width: 6px; height: 6px; border-radius: 50%; flex: none; }
.wz-tk b { color: #d4dde5; font-weight: 600; }
.wz-tk u { font-weight: 700; text-decoration: none; }
.wz-off { margin-top: 4px; font-size: 12.5px; color: var(--muted); }
.wz-conf { position: absolute; top: 50%; left: 50%; z-index: 7; border-radius: 2px; pointer-events: none;
  animation: wzConf 1.5s cubic-bezier(.17,.67,.35,1) forwards; }
@keyframes wzConf { 0% { opacity: 1; transform: translate(-50%,-50%) rotate(0deg) scale(.6); }
  100% { opacity: 0; transform: translate(calc(-50% + var(--x) * 4), calc(-50% + var(--y) * 4)) rotate(var(--r)) scale(1); } }
@media (prefers-reduced-motion: reduce) {
  .wz-peg, .wz-hub, .wz-track, .wz-bar em, .wz-pip.last { animation: none !important; }
  .wz-conf { animation-duration: .6s; }
}

/* ── admin: the wheel's dials and win ledger (owner, 2026-10-06; rebuilt on the panel's parts 2026-10-07) ── */
.sw-state { padding: 2px 8px; border-radius: 6px; font-size: 11px; font-weight: 600; background: rgba(255,255,255,.07); color: #9fb0bd; }
.sw-state:empty { display: none; }
.sw-state.on { background: rgba(111,216,176,.16); color: #7fe0b5; }
.sw-in { display: flex; align-items: center; gap: 6px; height: 38px; box-sizing: border-box; padding: 0 12px;
  border: 1px solid rgba(255,255,255,.09); border-radius: 9px; background: rgba(0,0,0,.24); color: #7f8f9d; }
.sw-in:focus-within { border-color: var(--accent); }
.sw-in input { flex: 1; min-width: 0; height: 36px; padding: 0; border: 0; background: none; color: #e7ecf2;
  font: 600 13px 'DM Sans', sans-serif; outline: none; }
/* one row per win, the Orders row rhythm: name, wheel, amount, time */
.sw-win { display: grid; grid-template-columns: minmax(0, 1fr) auto 90px 110px;
  grid-template-areas: "who wh amt when"; align-items: center; gap: 14px;
  padding: 12px 18px; border-bottom: 1px solid rgba(255,255,255,.04); font-size: 13px; }
.sw-who { grid-area: who; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-weight: 600; color: #e7ecf2; }
.sw-wh { grid-area: wh; justify-self: start; padding: 2px 8px; border-radius: 6px; font-size: 11px; font-weight: 600;
  background: rgba(255,255,255,.06); color: #9fb0bd; }
.sw-wh.gold { background: rgba(246,196,69,.13); color: #f6c445; }
.sw-amt { grid-area: amt; justify-self: end; font-weight: 700; color: #8fe0c0; }
.sw-amt.gold { color: #f6c445; }
.sw-when { grid-area: when; justify-self: end; white-space: nowrap; }
@media (max-width: 760px) {
  .sw-win { grid-template-columns: minmax(0, 1fr) auto; grid-template-areas: "who amt" "wh when"; row-gap: 6px; }
}
/* the ticker reads as the card's footer */
.wz-recent { margin-top: 10px; padding-top: 18px; border-top: 1px solid rgba(255,255,255,.06); }

/* ── Page headings in plain bold sans (owner, 2026-10-06: "it's too fancy") ─────────────────────────
   The sizes above were tuned for a thin italic serif, which reads far smaller than a bold sans at the same
   pixel size, so they come down with the change. :is() carries an ID's weight, so this outranks the
   per-page size rules (#home, #stats, ...) wherever they sit in the file. */
:is(#home, #stats, #deals, #emails, #updates, #prods, #wheel, #commission, #settings, #followups, #board, #guides, #subs) .dz-head h1,
.dz-head h1 {
  font-family: 'DM Sans', sans-serif; font-style: normal; font-weight: 700;
  font-size: 40px; line-height: 1.1; letter-spacing: -.025em;
}
@media (max-width: 760px) {
  :is(#home, #stats, #deals, #emails, #updates, #prods, #wheel, #commission, #settings, #followups, #board, #guides, #subs) .dz-head h1,
  .dz-head h1 { font-size: 30px; }
}
.pz-paid { padding: 2px 8px; border-radius: 7px; font-size: 10.5px; font-weight: 700;
  background: rgba(111,216,176,.14); color: #7fe0b5; }
/* admin: approve / deny products */
.apz-list { display: flex; flex-direction: column; }
.apz-row { display: flex; align-items: flex-start; gap: 14px; padding: 14px 18px; border-bottom: 1px solid rgba(255,255,255,.04); }
.apz-main { flex: 1; min-width: 0; }
.apz-top { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; min-height: 32px; }
.apz-top b { font-size: 14px; font-weight: 600; color: #f2f6fa; }
.apz-by { margin-top: 2px; font-size: 12px; color: #7f8f9d; }
.apz-why { margin-top: 6px; max-width: 72ch; font-size: 12.5px; line-height: 1.5; color: #a9b6c2; }
.apz-act { flex: none; display: flex; gap: 8px; }
@media (max-width: 760px) { .apz-row { flex-direction: column; align-items: stretch; } .apz-act { justify-content: flex-end; } }
.wz-skip { margin-top: -6px; padding: 6px 14px; border: 1px solid rgba(227,201,143,.4); border-radius: 10px;
  background: rgba(227,201,143,.08); color: #e3c98f; font: 600 12px 'DM Sans', sans-serif; cursor: pointer; }
.wz-skip:hover { background: rgba(227,201,143,.16); }

/* ── ONE PAGE FRAME FOR EVERY PANE (owner, 2026-10-06: "normalise this ... for each pane") ──────────────
   Measured before this: titles sat 24, 26, 32 or 56px from the top, the gap from title to card was anything
   from 10 to 44px, cards started 80 to 144px down, and the first card was 560, 640 or 1040px wide, because
   every page carried its own heading padding and some their own width. Those rules are gone; this is the only
   place the frame is set. A page that needs something between its title and its card puts it INSIDE the card,
   so the card never moves. */
:root { --pg-top: 32px; --pg-gap: 20px; --pg-w: 1080px; --pg-bottom: 40px; }
@media (max-width: 760px) { :root { --pg-top: 22px; --pg-gap: 16px; --pg-bottom: 24px; } }
:is(#home, #stats, #deals, #emails, #updates, #prods, #wheel, #commission, #followups, #board, #guides, #subs) .dz { max-width: var(--pg-w); }
:is(#home, #stats, #deals, #emails, #updates, #prods, #wheel, #commission, #followups, #board, #guides, #subs) .dz-head {
  position: relative; height: auto; display: block; padding: var(--pg-top) 0 var(--pg-gap);
  border: 0; background: none; text-align: center;
}
/* the pages whose card fills the window all stop the same distance from the bottom */
:is(#updates, #prods, #emails, #wheel) .dz { padding-bottom: var(--pg-bottom); }
/* the gold chip sits in the title's top padding, so turning gold never pushes the card down */
#wheel /* the Updates "3 new from ..." line lives in the card's bar now, not between the title and the card */
.uz .dz-bar .uz-sub { margin: 0; text-align: left; font-size: 12.5px; }

/* ── the frame, part two: what the per-pane review turned up ─────────────────────────────────────── */
/* A page taller than the window SCROLLS. .page clipped its overflow, so on any window under ~940px the
   wheel's Spin button was cut off and could not be reached at all. */
:is(#home, #stats, #deals, #emails, #updates, #prods, #wheel, #commission, #followups, #board, #guides, #subs) { overflow-y: auto; }
/* an empty summary row kept its 18px margin and pushed the Transactions card below every other card */
.dz-summary:empty { display: none; }
/* Statistics: its view tabs sit below the title, not inside it, so the title block is the same as everywhere */
.sz-top { text-align: center; margin-bottom: 14px; }
/* Emails inbox: the back arrow hangs to the LEFT of the title, so it no longer makes the title line taller */
#emails .dz-head h1 { position: relative; display: inline-block; }
#emails .dz-head h1 .back { position: absolute; right: 100%; top: 50%; transform: translateY(-50%); margin: 0 8px 0 0; }
/* Emails inbox fills the window and stops the same 40px from the bottom as Updates and Products */
#emails .dz { display: flex; flex-direction: column; flex: 1; min-height: 0; }
#emails.in-store .dz-panel { flex: 1; }
/* the wheel sizes to the window, so the Spin button is on screen without scrolling down to ~740px tall */
.wz-stage { width: min(94cqw, clamp(300px, calc(100vh - 440px), 520px)); }
@media (max-width: 760px) {
  #emails .dz { display: block; }
  .wz-stage { width: 94vw; }
}

/* ── First load: one shared "Loading…" state (owner, 2026-10-06: "looks weird when you first open it") ──
   Before a page's data arrives its cards keep their size and place but show this, instead of a false state:
   "No updates yet", "Waiting 0", "Inbox zero", a blank wheel, an empty strip. JS clears it with pageReady(). */
.dz.is-loading .dz-panel { position: relative; min-height: 120px; }
.dz.is-loading .dz-panel > *, .dz.is-loading .sz-cards, .dz.is-loading .dz-summary { visibility: hidden; }
.dz.is-loading .dz-panel::after {
  content: "Loading…"; position: absolute; inset: 0; z-index: 2; display: grid; place-items: center;
  border-radius: inherit; color: var(--muted); font: 500 13px 'DM Sans', sans-serif; letter-spacing: .02em;
  background: linear-gradient(100deg, transparent 30%, rgba(255,255,255,.035) 50%, transparent 70%) 0 0 / 220% 100%;
  animation: pgLoad 1.4s linear infinite;
}
@keyframes pgLoad { from { background-position: 160% 0; } to { background-position: -60% 0; } }
@media (prefers-reduced-motion: reduce) { .dz.is-loading .dz-panel::after { animation: none; } }
/* the progress bar starts EMPTY: an unset width used to render it full until the first numbers came in */
.wz-bar i { width: 0; }
/* the Leaderboard's hero and side cards are empty until its numbers land, like every other first load */
.dz.is-loading .lb-top { visibility: hidden; }

/* ── Guides (owner, 2026-10-06) ─────────────────────────────────────────────────────────────────── */
.gd-panel { display: flex; flex-direction: column; min-height: 320px; }

/* Guides: a preview card per guide (owner, 2026-10-07), in place of the dropdown. The icon tile is the
   warm gradient from the owner's design; the title is the card heading AND the page heading, the subtext
   is the card only. auto-fit keeps the row full at any width and collapses to one column on a phone. */
.gd-cards { display: grid; gap: 14px; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); }
.gd-card {
  display: flex; align-items: center; gap: 14px; width: 100%; padding: 16px 16px 16px 14px;
  border: 1px solid var(--line); border-radius: 14px; background: var(--card);
  text-align: left; cursor: pointer; color: inherit; font: inherit;
  transition: border-color .15s, background .15s, transform .15s;
}
.gd-card:hover { border-color: rgba(209,176,110,.45); background: var(--pop); transform: translateY(-1px); }
.gd-card:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.gd-ico {
  flex: none; display: grid; place-items: center; width: 46px; height: 46px; border-radius: 12px;
  background: linear-gradient(145deg, #dcc08a 0%, #b08f52 55%, #9a7a42 100%);
  box-shadow: 0 6px 16px rgba(176,143,82,.22);
}
.gd-ico svg { width: 24px; height: 24px; fill: none; stroke: #2b2112; stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; }
.gd-ico.lg { width: 52px; height: 52px; border-radius: 14px; }
.gd-ico.lg svg { width: 27px; height: 27px; }
.gd-ctxt { display: flex; flex-direction: column; gap: 3px; min-width: 0; flex: 1; }
.gd-ctxt b { font-size: 15.5px; font-weight: 650; color: #f2f6fa; line-height: 1.3; }
.gd-ctxt small { font-size: 13px; line-height: 1.45; color: var(--muted); }
.gd-go { flex: none; width: 18px; height: 18px; fill: none; stroke: var(--muted); stroke-width: 1.8;
         stroke-linecap: round; stroke-linejoin: round; transition: stroke .15s, transform .15s; }
.gd-card:hover .gd-go { stroke: #d1b06e; transform: translateX(2px); }

/* the opened guide: back arrow, icon, title, and the "updated" line under it */
/* `header.gd-head`, not `.gd-head`: the page-wide `.page header` rule (height 52px, padding 0 16px) is a
   class+type selector and outranks a bare class, which pinned this bar to exactly the icon's height so the
   tile filled it edge to edge with no breathing room. */
.page header.gd-head {
  height: auto; display: flex; align-items: center; gap: 14px; padding: 14px 18px;
  border-bottom: 1px solid var(--line); font-weight: 400;
  /* the page-wide `.page header` paints a SQUARE var(--bg) here, which covered the rounded panel's top
     corners and its border (owner's screenshot, 2026-10-09): let the panel show through instead */
  background: transparent; border-radius: 22px 22px 0 0;
}
.gd-back { flex: none; display: grid; place-items: center; width: 34px; height: 34px; border-radius: 9px;
           border: 1px solid var(--line); background: none; cursor: pointer; }
.gd-back svg { width: 18px; height: 18px; fill: none; stroke: #cfdae3; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.gd-back:hover { background: rgba(255,255,255,.07); }
.gd-htxt { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.gd-htxt h2 { margin: 0; font-size: 19px; font-weight: 700; color: #f2f6fa; line-height: 1.25;
              overflow-wrap: anywhere; }
.gd-meta { font-size: 11.5px; color: var(--muted); }
/* the guide itself, and the admin editor, share one typography so what an admin writes is what reps read */
.gd-body { padding: 22px 26px 28px; font-size: 14.5px; line-height: 1.7; color: #d4dde5; overflow-wrap: anywhere; }
.gd-body > :first-child { margin-top: 0; }
.gd-body h2 { margin: 1.4em 0 .5em; font-size: 20px; font-weight: 700; color: #f2f6fa; }
.gd-body h3 { margin: 1.2em 0 .4em; font-size: 16px; font-weight: 700; color: #e8eef3; }
.gd-body p, .gd-body div { margin: 0 0 .7em; }
.gd-body ul, .gd-body ol { margin: 0 0 .9em; padding-left: 1.4em; }
.gd-body li { margin: .2em 0; }
.gd-body a { color: #7fc9dc; text-decoration: underline; }
.gd-body blockquote { margin: 0 0 .9em; padding: 4px 14px; border-left: 3px solid rgba(111,182,205,.5); color: #b9c6d2; }
.gd-body code, .gd-body pre { font-family: var(--mono); font-size: 13px; background: rgba(255,255,255,.06); border-radius: 5px; }
.gd-body code { padding: 1px 5px; }
.gd-body pre { padding: 10px 12px; overflow-x: auto; }
.gd-body hr { border: 0; border-top: 1px solid var(--line); margin: 1.2em 0; }
.gd-empty { color: var(--muted); }
/* An image placed in a guide. It never exceeds the column, and `wide` fills it (owner, 2026-10-07). */
.gd-body img { display: block; max-width: 100%; height: auto; margin: 1em 0; border-radius: 10px; border: 1px solid var(--line); }
.gd-body img.wide { width: 100%; }
.gd-body figure { margin: 1em 0; }
.gd-body figure img { margin: 0 0 .4em; }
.gd-body figcaption { font-size: 12.5px; color: var(--muted); text-align: center; }
/* admin editor */
.ag-head { display: flex; align-items: center; gap: 12px; }
.ag-head h2 { margin: 0; }
.ag-head .grow, .ag-actions .grow { flex: 1; }
.ag-list { display: flex; flex-direction: column; }
.ag-row { display: flex; align-items: center; gap: 14px; padding: 14px 18px; border-bottom: 1px solid rgba(255,255,255,.04); }
.ag-row:last-child { border-bottom: 0; }
.ag-main { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.ag-main b { font-size: 14px; color: #f2f6fa; }
.ag-main small { font-size: 12px; color: #7f8f9d; }
.ag-act { display: flex; gap: 8px; }
.ag-label { display: flex; flex-direction: column; gap: 6px; margin: 12px 0; font-size: 11.5px; color: var(--muted); }
.ag-label input { padding: 9px 11px; border: 1px solid var(--line); border-radius: 9px; background: var(--bg); color: var(--text);
  font: 600 14px 'DM Sans', sans-serif; outline: none; }
.ag-label input:focus { border-color: var(--accent); }
.ag-tools { display: flex; align-items: center; gap: 4px; flex-wrap: wrap; padding: 6px; border: 1px solid var(--line);
  border-bottom: 0; border-radius: 10px 10px 0 0; background: rgba(255,255,255,.03); }
.ag-tools button { min-width: 32px; height: 30px; padding: 0 9px; border: 0; border-radius: 7px; background: none; color: #cfd9e2;
  font: 600 13px 'DM Sans', sans-serif; cursor: pointer; }
.ag-tools button:hover { background: rgba(255,255,255,.08); }
.ag-sep { width: 1px; height: 18px; margin: 0 4px; background: var(--line); }
.ag-edit { min-height: 260px; max-height: 60vh; overflow-y: auto; border: 1px solid var(--line); border-radius: 0 0 10px 10px;
  background: var(--bg); outline: none; }
.ag-edit:focus { border-color: rgba(47,124,246,.6); }
.ag-edit:empty::before { content: attr(data-ph); color: var(--muted); }
.ag-actions { display: flex; align-items: center; gap: 8px; }
@media (max-width: 760px) { .gd-body { padding: 16px 14px 20px; } .ag-row { flex-wrap: wrap; align-items: flex-start; } .ag-row .ag-main { flex: 1 1 0; } .ag-row .ag-act { flex-basis: 100%; justify-content: flex-end; } }

/* A deal paid more than once: one row per payment, under Details in the transaction sheet
   (owner, 2026-10-07). Mirrors .tx-hash so the sheet keeps one visual language. */
.tx-splits { margin-top: 8px; }
.tx-splits > .k { display: block; color: var(--muted); font-size: 12px; margin-bottom: 6px; }
.tx-split {
  display: flex; align-items: center; gap: 8px; flex-wrap: wrap;
  background: var(--pop); border-radius: 8px; padding: 8px 10px; margin-bottom: 6px;
}
.tx-split .n {
  flex: none; width: 18px; height: 18px; border-radius: 50%;
  background: rgba(255,255,255,.08); color: var(--muted);
  font-size: 11px; line-height: 18px; text-align: center;
}
.tx-split time { color: var(--muted); font-size: 12px; }
.tx-split code { flex: 1 1 100%; word-break: break-all; font-size: 12px; color: var(--muted); }
.tx-split code.dim { opacity: .6; font-style: italic; }

/* The guide editor: subtext field, icon picker and the image/quote/code tools (owner, 2026-10-07) */
.ag-label small { display: block; margin-top: 4px; font-size: 11.5px; color: var(--muted); font-weight: 400; }
.ag-icons { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 6px; }
.ag-ico {
  display: grid; place-items: center; width: 40px; height: 40px; padding: 0; cursor: pointer;
  border: 1px solid var(--line); border-radius: 10px; background: rgba(255,255,255,.04);
  transition: border-color .15s, background .15s;
}
.ag-ico svg { width: 20px; height: 20px; fill: none; stroke: #cfdae3; stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; }
.ag-ico:hover { background: rgba(255,255,255,.09); }
.ag-ico.on { border-color: #b08f52; background: linear-gradient(145deg, #dcc08a 0%, #b08f52 55%, #9a7a42 100%); }
.ag-ico.on svg { stroke: #2b2112; }
.ag-ico.sm { width: 34px; height: 34px; border-radius: 9px; flex: none;
             background: linear-gradient(145deg, #dcc08a 0%, #b08f52 55%, #9a7a42 100%); border-color: transparent; }
.ag-ico.sm svg { width: 18px; height: 18px; stroke: #2b2112; }
.ag-main em { display: block; font-size: 12.5px; font-style: normal; color: var(--muted); }
/* an image dropped or pasted into the editor obeys the same bounds as the published guide */
.ag-edit img { max-width: 100%; height: auto; }

@media (max-width: 560px) {
  .gd-cards { grid-template-columns: 1fr; gap: 12px; }
  .gd-head { padding: 13px 14px; gap: 11px; }
  .gd-htxt h2 { font-size: 17px; }
  .gd-body { padding: 16px 15px 22px; font-size: 14px; }
  .gd-ico { width: 42px; height: 42px; border-radius: 11px; }
  .gd-ico svg { width: 22px; height: 22px; }
  .gd-ico.lg { width: 44px; height: 44px; }
  .gd-ico.lg svg { width: 23px; height: 23px; }
}

/* On a phone every tab in a segmented row is a real tap target. The Statistics range row shrinks its
   padding (.sz-range) and came out 30px tall, under the 32px floor the rest of the UI keeps to. */
@media (max-width: 560px) {
  .dz-tabs button { min-height: 34px; }
  .sz-range button { padding: 7px 12px; min-height: 34px; }
}

/* A spin win that went straight into the rep's balance: a statement, not a button (owner, 2026-10-07) */
.sw-paid { font-size: 12px; color: var(--muted); white-space: nowrap; text-align: right; }

/* The Panic tab's title sits in the card head, so the tiny `.adm-head .t` (13px) made "🚨 Panic controls"
   wrap over two lines beside the subtext (owner, 2026-10-07: "make it say Panic and be bigger"). Shorter
   title plus a larger line keeps it on one row and reads at a glance. */
.adm-card.panic > .adm-head { align-items: center; }
.adm-card.panic > .adm-head .t { font-size: 20px; font-weight: 650; letter-spacing: -0.01em; }

/* `.grow` only had flex-grow inside .adm-nav, .adm-input and .ae-bar; in .dz-bar it collapsed, so the
   "1 new from admin / Mark all read" line sat left-clustered instead of filling the bar (owner,
   2026-10-07 screenshot). The Updates and Emails bars both use this spacer, so scoping it to .dz-bar
   fixes both without disturbing anything else. */
.dz-bar > .grow { flex: 1; }

/* Transactions refresh icon (owner, 2026-10-07). Matches the dz-pick height so it sits level in the bar;
   the spin plays while a fetch is in flight. */
.dz-refresh {
  display: inline-grid; place-items: center; width: 36px; height: 36px; padding: 0;
  border: 1px solid var(--line); border-radius: 9px; background: rgba(255,255,255,.04);
  color: #cfdae3; cursor: pointer; transition: background .15s, border-color .15s;
}
.dz-refresh svg { width: 16px; height: 16px; fill: currentColor; }
.dz-refresh:hover { background: rgba(255,255,255,.09); border-color: rgba(255,255,255,.14); }
.dz-refresh:disabled { opacity: .6; cursor: default; }
.dz-refresh.spin svg { animation: dz-spin 0.9s linear infinite; }
@keyframes dz-spin { to { transform: rotate(360deg); } }

/* ── Admin panel: shared parts for cards whose body is MARKUP (ADMIN-REFORMAT-GOAL.md, 2026-10-07) ──────────
   .adm-card has no padding by design: its JS-rendered rows carry their own 18px gutter. A form, a note or a
   switch goes in .adm-body so it gets the same gutter, and labels and notes share the panel's secondary styles
   (the .adm-toggle hint and the .adm-head muted line) instead of each tab inventing its own. */
.adm-body { display: flex; flex-direction: column; gap: 14px; padding: 16px 18px 18px; }
.adm-note { margin: 0; max-width: 72ch; font-size: 12px; line-height: 1.5; color: #93a3b1; }
.adm-note.warn { color: #e3bb6b; }
.adm-field { display: flex; flex-direction: column; gap: 6px; min-width: 0; font-size: 12px; font-weight: 500; color: #c6d2dd; }
.adm-field > .adm-seg { align-self: flex-start; }
.adm-check { display: inline-flex; align-items: center; gap: 9px; min-height: 38px; font-size: 13px; color: #e7ecf2; cursor: pointer; }
.adm-check input { width: 16px; height: 16px; margin: 0; accent-color: var(--accent); }
.adm-actions { display: flex; align-items: flex-end; gap: 12px; flex-wrap: wrap; }
.adm-actions > .adm-field { flex: 1 1 200px; }
.adm-actions > .adm-btn { height: 38px; padding: 0 22px; }
.adm-link { display: inline-flex; align-items: center; min-height: 32px; margin: -8px 0; padding: 0; border: 0;
  background: none; font: inherit; color: var(--accent); cursor: pointer; }
.adm-link:hover { text-decoration: underline; }
/* A card title never breaks: when the head's secondary line does not fit beside it, the line wraps BELOW the
   title (.adm-head already wraps) instead of squeezing the title onto two lines at phone width. */
.adm-head > .t { flex-shrink: 0; max-width: 100%; }
@media (max-width: 900px) {
  /* a stat strip drops to two columns here, so an odd last cell would sit beside an empty slot: let it span */
  .adm-cells > .cell:last-child:nth-child(odd) { grid-column: 1 / -1; }
}
/* One stat strip across the panel (P9): the base strip said 20px values in 14px cells and .three said 24px in
   16px cells, so Overview, Stats and every new strip disagreed. One size, one padding. */
.adm-cells .cell, .adm-cells.three .cell { padding: 16px 18px; }
.adm-cells .cell b, .adm-cells.three .cell b { font-size: 22px; }
.adm-cells.four { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.adm-toggle .h { max-width: 72ch; }
.adm-actions > .adm-field { max-width: 420px; }
@media (max-width: 900px) { .adm-cells.four { grid-template-columns: 1fr 1fr; } }
@media (max-width: 900px) {
  /* a segmented control is tapped with a thumb here: 32px, the floor the rest of the panel keeps */
  .adm-seg button { min-height: 32px; }
}

/* an account chip anywhere in the panel: the Orders one (.adm-order .acct), tinted per account by tintOf().
   NOT .adm-acct: that is People's linked-account ROW (style.css ~1299), and a chip rule under that name restyled it. */
.adm-tint { padding: 2px 7px; border-radius: 5px; font-size: 10.5px; font-weight: 700; letter-spacing: .04em; }
/* every list row's actions centre on its TITLE line: the title line is as tall as a button (P5) */
.adm-order .top { min-height: 32px; }
.au-item-top { min-height: 32px; }
.au-item-top b, .sw-who { font-size: 14px; color: #f2f6fa; }
.adm-body:not(:last-child) { border-bottom: 1px solid rgba(255,255,255,.04); }

.adm-hint { display: block; font-size: 12px; font-weight: 400; line-height: 1.45; color: #93a3b1; }
.adm-field > .adm-input { width: 100%; }
#agEditor .adm-field > .adm-input { height: 38px; }
.adm-note, .adm-hint, .adm-toggle .h { text-wrap: pretty; }

/* ── Reference-tab pass (ADMIN-REFORMAT-GOAL.md, 2026-10-07): the originally good tabs, held to the same nine ── */
.adm-table th:last-child, .adm-table td:last-child { padding-right: 18px; }
@media (max-width: 900px) {
  /* Overview's alert rows: the actions drop under the text (the panel's own .adm-alert.dead layout) instead of
     squeezing the text to a 60px column and running past the card */
  .adm-alert { grid-template-columns: auto minmax(0, 1fr); }
  .adm-alert .acts { grid-column: 2; flex-wrap: wrap; }
  .adm-head .right { flex-wrap: wrap; max-width: 100%; }
  /* the account picker flows with the page instead of scrolling inside a 210px box */
  .ae-side { max-height: none; overflow: visible; }
  /* a wallet address wraps in full on a phone rather than hiding behind an ellipsis */
  .adm-wallet .h { white-space: normal; overflow-wrap: anywhere; }
  /* 32px tap targets, the floor the rest of the panel keeps */
  .adm .adm-btn, .adm .adm-btn.tiny { min-height: 32px; }
  .adm .adm-order .link, .adm .pct { display: inline-flex; align-items: center; min-height: 32px; }
  .adm .adm-sw { height: 32px; width: 50px; margin: -5px; border: 5px solid transparent; background-clip: padding-box; }
}
@media (max-width: 760px) {
  /* the affiliate activity table becomes one labelled stack per affiliate: eight columns cannot fit a phone */
  #actList .adm-table, #actList .adm-table tbody, #actList .adm-table tr, #actList .adm-table td { display: block; width: auto; }
  #actList .adm-table thead { display: none; }
  #actList .adm-table tr { padding: 12px 18px; border-bottom: 1px solid rgba(255,255,255,.04); }
  #actList .adm-table td, #actList .adm-table td:first-child, #actList .adm-table td:last-child { padding: 3px 0; border: 0; }
  #actList .adm-table td[data-label]::before { content: attr(data-label); display: block; margin-bottom: 1px; font-size: 10.5px;
    letter-spacing: .1em; text-transform: uppercase; color: #7fa9bd; }
}
@media (max-width: 900px) {
  /* a segmented filter with more options than a phone is wide wraps onto a second line inside the card */
  .adm-head .adm-seg { flex-wrap: wrap; max-width: 100%; }
  .acct-pick label { min-height: 32px; display: inline-flex; align-items: center; }
}
.adm-body > .adm-seg { align-self: flex-start; }

/* ── Final-review pass: everything lines up on the FIRST line, nothing stretches into dead space ── */
.adm-toggle { align-items: start; }
.adm-toggle .track { margin-top: -2px; }
.adm-alert { align-items: start; }
.adm-alert .dot { margin-top: 6px; }
.adm-alert .acts { margin-top: -6px; }
.ag-row { align-items: flex-start; }
.ag-main b { display: flex; align-items: center; min-height: 32px; }
.ag-row .ag-ico.sm { margin-top: -1px; }
/* owner, 2026-10-07: "I want to fix all gaps. It's fine if the card has to expand with empty space."
   A card stretches to its row's height, so a short card never leaves a hole beside a tall neighbour. */
.adm-grid, .adm-grid.two, .settings-grid, .adm-grid.audit { align-items: stretch; }
.adm-month { grid-template-columns: 52px minmax(0, 1fr) 96px; }
.adm-month .v { text-align: right; }
@media (max-width: 900px) {
  /* on a phone the head's secondary line, or its right-hand group, sits UNDER the title, never squeezed beside it */
  .adm-head > .muted, .adm-head > .right { flex-basis: 100%; }
  .adm-head > .right { justify-content: flex-start; }
  .adm-alert .acts { margin-top: 4px; }
}
@media (max-width: 900px) { .adm-head { flex-wrap: wrap; row-gap: 6px; } }
/* blind round 2: row descriptions share the alert-row description colour; neutral row titles are #f2f6fa
   everywhere; a count badge never makes one card head taller than its neighbour's */
.ag-main em { color: #93a3b1; }
.adm-alert .t { color: #f2f6fa; }
.adm-head .t { line-height: 20px; }
.adm-head .t .badge { line-height: 16px; padding-top: 1px; padding-bottom: 1px; }
@media (max-width: 760px) {
  /* phone: row actions start under the row's TEXT, as Overview and Updates place them */
  .ag-row .ag-act { justify-content: flex-start; padding-left: 48px; }
  .apz-act { justify-content: flex-start; }
}
.adm-head .t .badge, .adm-head .t .sw-state { box-sizing: border-box; height: 18px; display: inline-flex; align-items: center;
  padding-top: 0; padding-bottom: 0; line-height: 1; }
.adm-head > .badge { box-sizing: border-box; height: 18px; display: inline-flex; align-items: center; padding-top: 0; padding-bottom: 0; line-height: 1; }
@media (min-width: 901px) {
  /* an alert row with five buttons took ~400px of an 806px card and squeezed the title to ~317px, so it broke
     over two lines while the space under the buttons stayed empty. The group wraps now; the text keeps the card. */
  .adm-alert .acts { flex-wrap: wrap; justify-content: flex-end; max-width: 240px; }
}
/* final blind: one stat cell, not two builds of it. The base said margin-top 6px and .three said 4px, so the
   same pattern measured 2px apart between Overview and Stats. */
.adm-cells .cell b, .adm-cells.three .cell b { margin-top: 5px; }
/* the "nothing needs you" state is centred in its card (owner, 2026-10-10: left-aligned it read as broken) */
/* a held row placed its buttons below the text while every other alert row pinned them top-right.
   DESKTOP ONLY: .adm-alert.dead outranks the phone rule on specificity, so unscoped it kept three columns at
   390px and drew its buttons ON TOP of its own title. */
@media (min-width: 901px) {
  .adm-alert.dead { grid-template-columns: auto minmax(0, 1fr) auto; }
  .adm-alert.dead .acts { grid-column: auto; margin-top: -6px; }
}
@media (max-width: 900px) {
  .adm-alert.dead { grid-template-columns: auto minmax(0, 1fr); }
  .adm-alert.dead .acts { grid-column: 2; margin-top: 4px; }
}
/* final blind: one alert row rhythm (rows sat ~8px tighter than every other tab's), and one segmented-control
   fill wherever it appears (the toolbar's and the card-header's differed in fill and border) */
.adm-alert { padding: 14px 18px; }
.adm-toolbar .adm-seg, .adm-head .adm-seg { background: rgba(0,0,0,.28); border: 0; }
.adm-toolbar { gap: 14px; margin-bottom: 14px; }
/* Orders' address line used a grey nothing else in the panel uses, at a different leading */
.adm-order .addr { font-size: 12.5px; line-height: 1.5; color: #93a3b1; }
/* an asker is the same chip Orders uses for its handler ("by leon"), so one kind of name looks one way */
.apz-by { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.apz-by .by { padding: 2px 7px; border-radius: 5px; background: rgba(255,255,255,.06); color: var(--muted);
  font-size: 10.5px; font-weight: 600; }
.apz-by .n { font-size: 12px; color: #7f8f9d; }

/* ── Rep pages: phone tap targets (ADMIN-REFORMAT-GOAL.md follow-up, 2026-10-07) ──────────────────────────
   A reaction chip, a copy button and the deal links were 20-28px tall on a phone, under the 32px floor the
   rest of the portal keeps. Phone-only and size-only: nothing moves on desktop. */
@media (max-width: 900px) {
  .uz-rx { min-height: 32px; box-sizing: border-box; }
  .dz-addr .cp { width: 32px; height: 32px; }   /* .cp alone loses to .dz-addr .cp on specificity */
  .lnk { min-height: 32px; box-sizing: border-box; display: inline-flex; align-items: center; }
}
@media (max-width: 900px) {
  /* a connected-bot row is flex/nowrap: on a phone its buttons were painted over the bot's @name */
  .adm-recv .top { flex-wrap: wrap; }
  .adm-recv .acts { flex: none; }
}
/* A native checkbox paints a pure-white box, the only one in the panel; every other control is a dark fill with
   a 1px border. Scoped to the admin panel's own checkboxes. */
.adm .adm-check input[type=checkbox], .adm .acct-pick label input[type=checkbox], .adm .au-people label input[type=checkbox] {
  appearance: none; -webkit-appearance: none; flex: none; width: 16px; height: 16px; margin: 0; box-sizing: border-box;
  border: 1px solid rgba(255,255,255,.22); border-radius: 5px; background: rgba(0,0,0,.24); cursor: pointer;
  display: inline-grid; place-content: center; }
.adm .adm-check input[type=checkbox]::before, .adm .acct-pick label input[type=checkbox]::before,
.adm .au-people label input[type=checkbox]::before {
  content: ""; width: 9px; height: 9px; transform: scale(0); transition: transform .12s ease;
  box-shadow: inset 1em 1em var(--accent); clip-path: polygon(14% 44%, 0 65%, 50% 100%, 100% 16%, 80% 0%, 43% 62%); }
.adm .adm-check input[type=checkbox]:checked, .adm .acct-pick label input[type=checkbox]:checked,
.adm .au-people label input[type=checkbox]:checked { border-color: rgba(111,182,205,.55); }
.adm .adm-check input[type=checkbox]:checked::before, .adm .acct-pick label input[type=checkbox]:checked::before,
.adm .au-people label input[type=checkbox]:checked::before { transform: scale(1); }

/* ── payments a rep has been SENT, on their own Income view (owner, 2026-10-08) ───────────────── */
/* The balance card above says what is still owed; this says what has already arrived, with the
   transaction id, so a rep never has to read their wallet history to find out (Joao's $147). */
.sz-pays { margin-top: 12px; border: 1px solid var(--line); border-radius: 18px; overflow: hidden; background: rgba(31,38,45,.55); }
.sz-pays .h { padding: 11px 18px; font-size: 11px; letter-spacing: .04em; text-transform: uppercase; color: var(--muted);
  border-bottom: 1px solid var(--line); }
.sz-pay { display: flex; align-items: center; gap: 14px; padding: 12px 18px; border-bottom: 1px solid var(--line); font-size: 13px; }
.sz-pay:last-child { border-bottom: 0; }
.sz-pay b { font-size: 15px; font-weight: 600; min-width: 84px; color: #6fd8b0; }
.sz-pay .when { color: var(--muted); min-width: 120px; }
.sz-pay .det { color: var(--muted); flex: 1; }
.sz-pay a { color: #8fc6d8; font-size: 12px; word-break: break-all; }
.sz-pay .muted { font-size: 12px; }
@media (max-width: 640px) {
  .sz-pay { flex-wrap: wrap; gap: 6px 12px; }
  .sz-pay .det { flex-basis: 100%; }
}

/* ── Pay representatives: the admin records a payment they sent by hand ──────────────────────── */
.adm-card.payreps { margin-top: 14px; }
.pr-sum { padding: 12px 18px; font-size: 13px; color: var(--muted); border-bottom: 1px solid var(--line); }
.pr-sum b { color: var(--text); font-size: 15px; }
.pr-row { display: grid; grid-template-columns: minmax(150px, 1.1fr) 120px minmax(180px, 1.2fr) minmax(240px, 1.6fr);
  align-items: center; gap: 12px 16px; padding: 14px 18px; border-bottom: 1px solid var(--line); }
.pr-row:last-child { border-bottom: 0; }
.pr-row.due { background: rgba(111,216,176,.05); }
.pr-row.flash { animation: prflash 1.4s ease-out; }
@keyframes prflash { 0%, 40% { background: rgba(214,178,106,.16); } 100% { background: transparent; } }
.pr-who { display: grid; gap: 3px; min-width: 0; }
.pr-who small { font-size: 11px; color: var(--muted); }
.pr-who small a { color: #8fc6d8; }
.pr-amt { display: grid; gap: 2px; font-size: 18px; font-weight: 600; }
.pr-amt.owes { color: #e0b46a; }
.pr-amt.muted { color: var(--muted); font-weight: 500; }
.pr-amt small { font-size: 10px; font-weight: 400; letter-spacing: .04em; text-transform: uppercase; color: var(--muted); }
.pr-addr { display: flex; align-items: center; gap: 8px; min-width: 0; }
.pr-addr code { font-size: 11px; word-break: break-all; color: var(--muted); }
.pr-pay { display: flex; align-items: center; gap: 8px; }
.pr-pay .pr-txid { flex: 1; min-width: 0; font-size: 11px; }
.pr-pay .hint { font-size: 11px; color: var(--muted); }
@media (max-width: 900px) {
  .pr-row { grid-template-columns: 1fr 110px; }
  .pr-addr, .pr-pay { grid-column: 1 / -1; }
}

/* ── Automatic tracking card (owner, 2026-10-08) ─────────────────────────────────────────────── */
/* It spends money unattended, so the card leads with state and counts, not with its switches. */
.at-top { display: flex; flex-wrap: wrap; align-items: center; gap: 18px; padding: 4px 0 14px; }
.at-state { display: grid; gap: 2px; min-width: 110px; }
.at-state small { font-size: 10px; letter-spacing: .06em; text-transform: uppercase; color: var(--muted); }
.at-state b { font-size: 15px; font-weight: 600; }
.at-acts { display: flex; gap: 6px; margin-left: auto; }
.at-nums { display: flex; flex-wrap: wrap; align-items: center; gap: 12px; padding: 4px 0 12px; font-size: 12px; color: var(--muted); }
.at-nums label { display: flex; align-items: center; gap: 7px; }
.at-nums input { width: 76px; font-size: 12px; }
.at-list { border: 1px solid var(--line); border-radius: 14px; overflow: hidden; margin-top: 10px; }
.at-list .h { padding: 9px 14px; font-size: 10px; letter-spacing: .06em; text-transform: uppercase;
  color: var(--muted); border-bottom: 1px solid var(--line); }
.at-row { display: flex; align-items: baseline; gap: 12px; padding: 9px 14px; font-size: 12px;
  border-bottom: 1px solid var(--line); }
.at-row:last-child { border-bottom: 0; }
.at-row b { min-width: 128px; font-weight: 600; }
.at-row .to { flex: 1; color: var(--muted); min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.at-row .when { color: var(--muted); flex: none; }
.at-row .ok { color: #6fd8b0; }
.at-row .bad { color: var(--bad); }
@media (max-width: 720px) {
  .at-acts { margin-left: 0; }
  .at-row { flex-wrap: wrap; gap: 4px 10px; }
  .at-row .to { flex-basis: 100%; white-space: normal; }
}

/* ── Blocked email senders / deleted here (owner, 2026-10-08) ────────────────────────────────── */
.mb-store + .mb-store { margin-top: 16px; }
.mb-h { font-size: 11px; letter-spacing: .05em; text-transform: uppercase; color: var(--muted);
  padding: 8px 0; border-bottom: 1px solid var(--line); }
.mb-h.sub { margin-top: 12px; }
.mb-row { display: flex; align-items: baseline; gap: 12px; padding: 9px 2px; font-size: 12px;
  border-bottom: 1px solid var(--line); }
.mb-row:last-child { border-bottom: 0; }
.mb-row b { min-width: 170px; max-width: 320px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.mb-row > span { color: var(--muted); }
.mb-row > span:first-of-type { color: var(--text); flex: none; }
.mb-row .muted { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.mb-row button { flex: none; }
.mb-none { padding: 10px 2px; font-size: 12px; color: var(--muted); }
/* the two destructive actions in a thread sit apart from Ignore */
.mz-m-foot .mz-del, .mz-m-foot .mz-blk { margin-left: 8px; }
.mz-m-foot .mz-blk { color: var(--bad); }
@media (max-width: 720px) {
  .mb-row { flex-wrap: wrap; gap: 4px 10px; }
  .mb-row b, .mb-row .muted { max-width: 100%; white-space: normal; }
}

/* ── reordering guides (owner, 2026-10-09) ───────────────────────────────────────────────────── */
.ag-move { display: flex; flex-direction: column; gap: 2px; flex: none; }
.ag-mv { width: 26px; height: 22px; padding: 0; border: 1px solid var(--line); border-radius: 7px;
  background: transparent; color: var(--muted2); font-size: 12px; line-height: 1; cursor: pointer; }
.ag-mv:hover:not([disabled]) { color: var(--text); border-color: #3a4048; background: rgba(255,255,255,.04); }
.ag-mv:focus-visible { outline: 2px solid var(--accent); outline-offset: 1px; }
.ag-mv[disabled] { opacity: .25; cursor: default; }

/* ── resizing an image in a guide (owner, 2026-10-09) ─────────────────────────────────────────── */
/* A sized image keeps its share of the column and its own proportions. */
.gd-body img[data-w] { max-width: 100%; height: auto; }
.ag-host { position: relative; }
.ag-edit img { cursor: pointer; }
.ag-edit img.ag-sel { outline: 2px solid var(--accent); outline-offset: 2px; }
.ag-imgbar { position: absolute; z-index: 5; display: flex; align-items: center; gap: 2px; padding: 3px;
  border: 1px solid var(--line); border-radius: 10px; background: var(--pop);
  box-shadow: 0 6px 22px rgba(0,0,0,.45); }
.ag-imgbar button { padding: 5px 9px; border: 0; border-radius: 7px; background: transparent;
  color: var(--muted2); font: inherit; font-size: 12px; cursor: pointer; }
.ag-imgbar button:hover { color: var(--text); background: rgba(255,255,255,.06); }
.ag-imgbar button.on { color: #fff; background: var(--accent); }
.ag-imgw { padding: 0 8px 0 6px; font-size: 11px; color: var(--muted); font-variant-numeric: tabular-nums; }
.ag-imggrip { position: absolute; z-index: 5; width: 18px; height: 18px; border-radius: 50%;
  background: var(--accent); border: 3px solid var(--pop); cursor: nwse-resize; touch-action: none;
  box-shadow: 0 2px 8px rgba(0,0,0,.5); }
.ag-imgbar[hidden], .ag-imggrip[hidden] { display: none; }

/* ── the guide editor says what the caret is in (owner, 2026-10-09) ──────────────────────────── */
/* The line's own style lights up (Heading / Subheading / Text / a list), and so do bold & co., so a heading is
   visible as a heading BEFORE anything is typed into it. */
.ag-tools button.on { background: rgba(47,124,246,.22); color: #fff; box-shadow: inset 0 0 0 1px rgba(47,124,246,.55); }
.ag-tools button.ag-blk { font-size: 12px; font-weight: 600; }
/* Stats → Messages chart (incoming vs rep replies), same plot as the income chart */
.sm-legend { display: flex; flex-wrap: wrap; gap: 6px 16px; padding: 12px 18px 0; font-size: 11.5px; color: #9aa8b4; }
.sm-legend span { display: inline-flex; align-items: center; gap: 7px; }
.sm-legend .sw { width: 10px; height: 10px; border-radius: 3px; background: #6fb6cd; }
.sm-legend .sw.out { background: #9184cc; }
.sm-legend .ln { width: 16px; height: 2px; border-radius: 2px; background: #bfe6f1; }
.sm-legend .ln.out { background: #d2caf0; }
.adm-plot .bar.pair { gap: 1px; }
.adm-plot .bar.pair .fill { width: 50%; }
.adm-plot .fill.out { background: linear-gradient(180deg, #a497d8, #7d70bb); }
.adm-plot .fill.out.hot { background: linear-gradient(180deg, #c2b6e8, #a497d8); }
.adm-plot .area .ma polyline.inc { stroke: #bfe6f1; }
.adm-plot .area .ma polyline.out { stroke: #d2caf0; }
.adm-head .right .adm-seg { margin-right: 6px; }
.adm-plot .tip .muted { color: #7f8f9d; }
/* affiliate sheet: the split's base + Change % sit under the big number, not in its font (2026-10-09) */
#repStatsNums .stat b small { font-size: 12px; font-weight: 500; color: var(--muted); }
#repStatsNums .stat b button.mini[data-edit="split"] { display: block; margin-top: 6px; font-family: inherit; font-size: 12px; font-weight: 600; line-height: 1; padding: 6px 10px; border-radius: 8px; border: 1px solid var(--line); background: var(--pop); color: var(--text); cursor: pointer; }
#repStatsNums .stat b button.mini[data-edit="split"]:hover { border-color: var(--accent); }
/* one thread per customer (2026-10-09): each email that starts a new subject says so above its body */
.mz-m-subj { font-size: 12.5px; font-weight: 600; color: #9fb3c4; margin: -3px 0 6px; }

/* ── Emails laid out like Messages (owner, 2026-10-09) ─────────────────────────────────────────────────────
   A sidebar beside the rail (the same width as the chat list) with the mailboxes, then the mailbox's tabs, search
   and conversations; the email opens in the pane on the right. Overrides the old centred-card page frame. */
#emails { background: var(--bg); overflow: hidden; padding: 0; }
#emails .dz.mzs { max-width: none; width: 100%; height: 100%; margin: 0; padding: 0; display: grid;
  grid-template-columns: min(var(--side, 280px), 42vw) minmax(0, 1fr); grid-template-rows: minmax(0, 1fr); }
#emails .mz-side { display: flex; flex-direction: column; min-height: 0; min-width: 0; background: var(--panel); border-right: 1px solid var(--line); }
#emails .mz-side-head { flex: none; height: 52px; display: flex; align-items: center; padding: 0 16px; border-bottom: 1px solid var(--line);
  font-weight: 600; font-size: 15px; color: var(--text); }
#emails .mz-side-head #mzTitle { display: flex; align-items: center; gap: 6px; min-width: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
#emails .mz-side-head .back { position: relative; display: inline-flex; flex: none; width: 30px; height: 30px; margin: -3px 2px -3px -6px; align-items: center;
  justify-content: center; cursor: pointer; color: var(--muted); border-radius: 50%; }
#emails .mz-side-head .back svg { width: 24px; height: 24px; }
#emails .mz-side-head .back:hover { background: var(--line); color: var(--text); }
#emails .mz-stores { flex: 1; min-height: 0; overflow-y: auto; padding: 8px; }
#emails .mz-side-bar { flex: none; display: flex; flex-direction: column; align-items: stretch; gap: 8px; padding: 10px; border-bottom: 1px solid var(--line); }
#emails .mz-side-bar .mz-tabs { display: flex; flex-wrap: wrap; gap: 4px; }
#emails .mz-side-bar .dz-search { width: 100%; }
#emails .mz-side-bar .mz-bar-end { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
#emails .mz-side-bar .mz-bar-end:not(:has(:not([hidden]))) { display: none; }
#emails .mz-list { flex: 1; min-height: 0; height: auto; overflow-y: auto; border-right: 0; }
#emails .mz-side .dz-foot { flex: none; display: flex; flex-direction: column; align-items: flex-start; gap: 2px; padding: 8px 12px;
  font-size: 11.5px; border-top: 1px solid var(--line); }
#emails .mz-read { display: flex; flex-direction: column; height: 100%; min-height: 0; overflow-y: auto; background: var(--bg); }
#emails:not(.in-store) :is(.mz-side-bar, .mz-list, .dz-foot) { display: none; }
#emails.in-store .mz-stores { display: none; }
@media (max-width: 760px) {
  #emails .dz.mzs { grid-template-columns: 1fr; }
  #emails .mz-side { border-right: 0; }
  #emails .mz-read { display: none; }
  body.mz-reading #emails .mz-side { display: none; }
  body.mz-reading #emails .mz-read { display: flex; }
}
/* the Delete and Block buttons under an email: the same quiet outline as Ignore (Delete rendered as a blank white box) */
.mz-m-foot .mz-del, .mz-m-foot .mz-blk { padding: 3px 10px; border: 1px solid rgba(255,255,255,.1); border-radius: 8px; background: transparent;
  color: #8b9aa8; font: 500 11px inherit; font-family: inherit; font-size: 11px; cursor: pointer; }
.mz-m-foot .mz-del:hover { color: #e7ecf2; border-color: rgba(255,255,255,.2); }
.mz-m-foot .mz-blk { color: var(--bad); }
.mz-m-foot .mz-blk:hover { border-color: rgba(240,101,101,.5); }
/* in the sidebar the bar is a column: the search box must not grow (its 220px flex basis became its HEIGHT), and
   the four tabs share one row */
#emails .mz-side-bar .dz-search { flex: none; }
#emails .mz-side-bar .mz-tabs { flex-wrap: nowrap; justify-content: space-between; }
#emails .mz-side-bar .mz-tabs button { flex: 1 1 auto; justify-content: center; padding: 7px 8px; gap: 5px; font-size: 12.5px; white-space: nowrap; }
/* "Send a test email" hidden from the UI (owner, 2026-10-09); CSS only, the code is kept */
#mzTestBtn { display: none !important; }
#emails .mz-side-bar .mz-bar-end:not(:has(.mz-earned:not([hidden]))) { display: none; }
/* one inbox with Telegram-style counts (2026-10-09): the number of emails they sent since our last reply */
.mz-row .pline { grid-column: 1 / -1; display: flex; align-items: center; gap: 8px; min-width: 0; }
.mz-row .pline .prev { flex: 1; min-width: 0; }
.mz-row .mzb { flex: none; min-width: 20px; height: 20px; padding: 0 6px; border-radius: 10px; display: inline-grid; place-items: center;
  background: var(--accent); color: #fff; font-size: 11.5px; font-weight: 700; line-height: 1; }
/* Emails reply bar, Telegram-like (owner, 2026-10-09: "when I scroll up the write your reply box covers the screen"):
   only the emails scroll; the reply is a compact bar under them that grows with what is typed, never over them */
.mz-read { overflow: hidden; }
.mz-read .mz-msgs { flex: 1 1 auto; min-height: 0; overflow-y: auto; overscroll-behavior: contain; }
.mz-reply.tgc { position: static; flex: none; padding: 8px 14px 10px; background: rgba(24,29,34,.98); backdrop-filter: none; }
.mz-reply.tgc .mz-tools { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; margin-bottom: 6px; }
.mz-reply.tgc .mz-tools:not(:has(button:not([hidden]))) { display: none; }
.mz-reply.tgc .mz-chip { height: 26px; padding: 0 11px; border-radius: 13px; border: 1px solid rgba(255,255,255,.12); background: transparent;
  color: #a9b6c2; font: 500 12px/1 inherit; cursor: pointer; }
.mz-reply.tgc .mz-chip:hover { background: rgba(255,255,255,.06); color: #e7ecf2; }
.mz-reply.tgc .mz-tools .hint { margin-left: auto; font-size: 11px; color: #6d7d8b; }
.mz-reply.tgc .mz-row-in { display: flex; align-items: flex-end; gap: 8px; }
.mz-reply.tgc textarea { flex: 1; height: 42px; min-height: 42px; max-height: 180px; padding: 10px 14px; border-radius: 21px; resize: none; overflow-y: auto; line-height: 1.45; }
.mz-reply.tgc .mz-sendb { flex: none; width: 42px; height: 42px; border-radius: 50%; border: 0; display: grid; place-items: center;
  background: var(--accent); color: #fff; cursor: pointer; }
.mz-reply.tgc .mz-sendb svg { width: 20px; height: 20px; }
.mz-reply.tgc .mz-sendb:disabled { opacity: .5; cursor: default; }
@media (max-width: 760px) {
  .mz-reply.tgc { padding: 6px 10px calc(8px + env(safe-area-inset-bottom)); }
  .mz-reply.tgc textarea { min-height: 44px; height: 44px; max-height: 132px; font-size: 16px; }
  .mz-reply.tgc .mz-sendb { width: 44px; height: 44px; }
  .mz-reply.tgc .mz-chip { height: 32px; }
}
.mz-reply.tgc .mz-sendb.busy { opacity: .5; }
/* chat search: the customer's @username after their name (search matches either, owner 2026-10-10) */
#chats .chat .name .uname { font-weight: 400; color: var(--muted, #8b95a1); }
/* Stats, 2026-10-10: "Where the money went" full width with every leg; DMs month by month beside income months */
.adm-split .bar { gap: 2px; background: transparent; }
.adm-split .bar i { min-width: 0; }
.adm-split .bar i.o1, .adm-split .r i.o1 { background: #a99ad6; }
.adm-split .bar i.o2, .adm-split .r i.o2 { background: #cfc4f2; }
.adm-split .bar i.af, .adm-split .r i.af { background: #6fb6cd; }
.adm-split .bar i.rf, .adm-split .r i.rf { background: #8fd8c4; }
.adm-split .bar i.rp, .adm-split .r i.rp { background: #e0b765; }
.adm-split .bar i.fee, .adm-split .r i.fee { background: #7d8792; }
.adm-split .rows { grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); column-gap: 28px; }
.adm-split .r span em { display: block; font-style: normal; font-size: 11px; color: #6d7d8b; margin-top: 1px; }
.adm-split .r b small { margin-left: 8px; font-size: 11px; color: #8b97a3; font-weight: 400; }
.adm-split .r.tot { grid-column: 1 / -1; border-top: 1px solid rgba(255,255,255,.06); padding-top: 10px; }
.adm-split .r.tot i { background: transparent; }
.adm-month.sm2 { grid-template-columns: 72px minmax(0, 1fr) auto; }
.adm-month.sm2 .tracks { display: grid; gap: 3px; }
.adm-month.sm2 .track i.inc { background: #6fb6cd; }
.adm-month.sm2 .track i.out { background: #9184cc; }
.adm-month.sm2 .v .muted { color: #6d7d8b; }
.sm-dot { display: inline-block; width: 8px; height: 8px; border-radius: 2px; margin: 0 4px 0 8px; vertical-align: middle; }
.sm-dot.inc { background: #6fb6cd; } .sm-dot.out { background: #9184cc; }
.adm-month.sm2 .track { height: 4px; }
.adm-month { grid-template-columns: 74px minmax(0, 1fr) 96px; }
.adm-month .l { white-space: nowrap; }
.adm-split .rows { grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); row-gap: 14px; }
/* Where the money went, 2026-10-10: one Owners segment, and colours that are clearly apart. The four categorical
   hues are the dataviz reference palette's first four dark steps in their fixed order, validated on the card surface
   (#1b2128): worst adjacent CVD dE 8.4, normal-vision 19.8, all >= 3:1. Network fees is the neutral "rest". */
.adm-split .bar i.own, .adm-split .r i.own { background: #3987e5; }
.adm-split .bar i.af, .adm-split .r i.af { background: #d95926; }
.adm-split .bar i.rf, .adm-split .r i.rf { background: #199e70; }
.adm-split .bar i.rp, .adm-split .r i.rp { background: #c98500; }
.adm-split .bar i.fee, .adm-split .r i.fee { background: #6b7480; }
.adm-split .r.sub span { padding-left: 2px; color: #93a0ac; }
.adm-split .r.sub i { background: transparent; border-left: 2px solid rgba(57,135,229,.45); border-radius: 0; height: 14px; width: 9px; }
/* Accounts tab (2026-10-10): the linked-accounts card sits above the profile / quick-reply editor */
.adm-tab[data-tab="accounts"] > .adm-card.gap-b { margin-bottom: 16px; }
/* Updates & guides share one admin tab (2026-10-10): the guides cards follow the updates ones */
.adm-tab[data-tab="updates"] .au-guides { margin-top: 16px; display: grid; gap: 16px; }
/* Stats → Messages: the rep picker (2026-10-10) */
.sm-rep { height: 30px; padding: 0 28px 0 10px; font-size: 12.5px; margin-right: 8px; min-width: 130px; }
/* ── The affiliate window (2026-10-10): the admin panel's cells, tabs and rows, nothing of its own palette ── */
#affCard .box.ac { width: min(860px, calc(100vw - 32px)); max-height: calc(100vh - 48px); display: flex; flex-direction: column; padding: 0; overflow: hidden; }
#affCard header { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 16px 18px; border-bottom: 1px solid rgba(255,255,255,.07); }
#affCard .ac-title { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; font-size: 15px; font-weight: 600; color: #e7ecf2; }
#affCard .ac-chips { display: inline-flex; gap: 6px; flex-wrap: wrap; }
#affCard .ac-chip { font-size: 11px; font-weight: 600; padding: 2px 8px; border-radius: 6px; background: rgba(255,255,255,.06); color: #a9b6c2; }
#affCard .ac-chip.ok { background: rgba(76,195,138,.14); color: #8fe0c0; } #affCard .ac-chip.bad { background: rgba(224,122,122,.14); color: #e79292; }
#affCard .ac-chip.warn { background: rgba(240,165,69,.14); color: #f0c37a; }
#affCard header button { background: none; border: 0; color: #8b9aa8; font-size: 20px; cursor: pointer; }
#affCard .ac-cells { padding: 14px 18px 4px; }
#affCard .ac-tabs { margin: 10px 18px 0; align-self: flex-start; }
#affCard .ac-body { flex: 1 1 auto; overflow-y: auto; padding: 14px 18px 18px; min-height: 260px; }
#affCard .ac-danger { display: flex; gap: 8px; justify-content: flex-end; padding: 12px 18px; border-top: 1px solid rgba(255,255,255,.07); }
#affCard .ac-sec { margin-bottom: 18px; }
#affCard .ac-sec h4 { margin: 0 0 8px; font-size: 12px; font-weight: 600; letter-spacing: .02em; color: #93a3b1; text-transform: none; }
#affCard .ac-row { display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: center; gap: 10px; padding: 9px 0; border-bottom: 1px solid rgba(255,255,255,.05); font-size: 13px; color: #cfd9e2; }
#affCard .ac-row .k { color: #93a3b1; } #affCard .ac-row .v { font-family: 'JetBrains Mono', monospace; font-size: 12.5px; color: #e7ecf2; }
#affCard .ac-row .sub { display: block; font-size: 11.5px; color: #6d7d8b; margin-top: 2px; }
#affCard .ac-note { font-size: 12px; color: #7f8f9d; margin: 4px 0 10px; max-width: 72ch; }
#affCard .ac-bars { display: flex; align-items: flex-end; gap: 3px; height: 110px; padding: 6px 0; border-bottom: 1px solid rgba(255,255,255,.08); }
#affCard .ac-bars i { flex: 1; min-height: 2px; border-radius: 3px 3px 0 0; background: #3987e5; opacity: .85; }
#affCard .ac-bars i.z { background: rgba(255,255,255,.07); }
#affCard .ac-bars i:hover { opacity: 1; }
#affCard .ac-axis { display: flex; justify-content: space-between; font-size: 10.5px; color: #6d7d8b; margin-top: 4px; font-family: 'JetBrains Mono', monospace; }
#affCard .ac-codes { display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: 10px; }
#affCard .ac-code { display: inline-flex; align-items: center; gap: 6px; padding: 5px 6px 5px 10px; border-radius: 8px; background: rgba(255,255,255,.05); border: 1px solid rgba(255,255,255,.08); font-family: 'JetBrains Mono', monospace; font-size: 12.5px; color: #e7ecf2; }
#affCard .ac-code small { font-family: inherit; color: #6d7d8b; font-size: 10.5px; }
#affCard .ac-code button { border: 0; background: none; color: #8b9aa8; cursor: pointer; font-size: 14px; line-height: 1; padding: 0 2px; }
#affCard .ac-code button:hover { color: #e79292; }
#affCard .ac-form { display: grid; grid-template-columns: repeat(auto-fit, minmax(170px, 1fr)); gap: 8px; align-items: end; margin-bottom: 6px; }
#affCard .ac-form .adm-input { width: 100%; }
#affCard .ac-form .wide { grid-column: 1 / -1; }
#affCard .ac-table { width: 100%; border-collapse: collapse; font-size: 12.5px; }
#affCard .ac-table th { text-align: left; font-weight: 600; color: #7f8f9d; font-size: 11.5px; padding: 6px 8px; border-bottom: 1px solid rgba(255,255,255,.08); }
#affCard .ac-table td { padding: 7px 8px; border-bottom: 1px solid rgba(255,255,255,.04); color: #cfd9e2; }
#affCard .ac-table td.n { font-family: 'JetBrains Mono', monospace; text-align: right; }
#affCard .ac-wallet { display: grid; grid-template-columns: 110px minmax(0, 1fr) auto; gap: 10px; align-items: center; padding: 9px 0; border-bottom: 1px solid rgba(255,255,255,.05); }
#affCard .ac-wallet code { font-family: 'JetBrains Mono', monospace; font-size: 12px; color: #e7ecf2; overflow-wrap: anywhere; }
#affCard .ac-wallet .k { font-size: 13px; color: #cfd9e2; } #affCard .ac-wallet .k small { display: block; color: #6d7d8b; font-size: 11px; }
@media (max-width: 760px) {
  #affCard .box.ac { width: 100vw; max-height: 100vh; border-radius: 0; }
  #affCard .ac-wallet { grid-template-columns: 1fr auto; } #affCard .ac-wallet code { grid-column: 1 / -1; }
  #affCard .ac-table .opt { display: none; }
}
#affCard .ac-cells { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 0; padding: 12px 18px 0; }
#affCard .ac-cells .cell { padding: 10px 12px; min-width: 0; }
#affCard .ac-cells .cell b { font-size: 18px; margin-top: 4px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
#affCard .ac-cells .cell span { font-size: 11.5px; overflow-wrap: anywhere; }
#affCard .ac-form .adm-input, #affCard .ac-form .adm-btn { box-sizing: border-box; width: 100%; min-width: 0; margin: 0; height: 36px; }
#affCard .ac-form .adm-btn { white-space: nowrap; }
@media (max-width: 760px) { #affCard .ac-cells { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
/* the affiliate window's Money tab: one row per action, one form open at a time */
#affCard .ac-act { border: 1px solid rgba(255,255,255,.07); border-radius: 12px; margin-bottom: 10px; background: rgba(255,255,255,.015); }
#affCard .ac-act.open { border-color: rgba(57,135,229,.35); background: rgba(57,135,229,.04); }
#affCard .ac-act-h { display: flex; align-items: center; justify-content: space-between; gap: 14px; padding: 12px 14px; }
#affCard .ac-act-h b { display: block; font-size: 13.5px; color: #e7ecf2; font-weight: 600; }
#affCard .ac-act-h span { display: block; font-size: 12px; color: #7f8f9d; margin-top: 2px; }
#affCard .ac-act-h .adm-btn { flex: none; }
#affCard .ac-act-f { padding: 0 14px 14px; }
#affCard .ac-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px 12px; }
#affCard .ac-field { display: flex; flex-direction: column; gap: 5px; min-width: 0; }
#affCard .ac-field > span { font-size: 11.5px; color: #93a3b1; }
#affCard .ac-field.wide { grid-column: 1 / -1; }
#affCard .ac-field .adm-input { box-sizing: border-box; width: 100%; height: 36px; margin: 0; }
#affCard .ac-act-b { display: flex; justify-content: flex-end; gap: 8px; margin-top: 12px; }
@media (max-width: 760px) { #affCard .ac-grid { grid-template-columns: 1fr; } #affCard .ac-act-h { flex-wrap: wrap; } }
#affCard .ac-danger { align-items: center; }
#affCard .ac-paused { margin-right: auto; font-size: 12.5px; color: #f0c37a; }
/* Settings: grouped under small section headings (2026-10-10) */
.settings-grid > .set-h { margin: 18px 2px -4px; font-size: 11.5px; font-weight: 600; letter-spacing: .08em; text-transform: uppercase; color: #7f8f9d; }
.settings-grid > .set-h:first-child { margin-top: 0; }
.adm-grid.two.settings-grid { align-items: start; }
#mailBlocked { padding: 0 16px 6px; }
/* Overview → Health */
.hl-list { padding: 4px 0; }
.hl-row { display: grid; grid-template-columns: 10px minmax(120px, auto) 1fr; align-items: baseline; gap: 10px; padding: 7px 16px; font-size: 12.5px; }
.hl-row + .hl-row { border-top: 1px solid rgba(255,255,255,.04); }
.hl-row i { width: 8px; height: 8px; border-radius: 50%; background: #5fc98b; align-self: center; }
.hl-row.warn i { background: #e6b450; } .hl-row.off i { background: #6b7a87; } .hl-row.bad i { background: #e5605d; box-shadow: 0 0 0 3px rgba(229,96,93,.18); }
.hl-row b { color: #dde5ec; font-weight: 600; white-space: nowrap; }
.hl-row span { color: #8494a2; min-width: 0; overflow-wrap: anywhere; }
.hl-row.bad span { color: #f0a3a1; } .hl-row.warn span { color: #d9bf86; }
.hl-bad { color: #f0a3a1; }
@media (max-width: 760px) { .hl-row { grid-template-columns: 10px 1fr; } .hl-row span { grid-column: 2; } }
/* Accounts editor: the right panel runs down beside the whole list instead of stopping at its header (owner, 2026-10-10) */
@media (min-width: 901px) {
  .ae { align-items: stretch; }
  .ae-main { display: flex; flex-direction: column; }
}

/* ── Admin: the tabs are a LEFT SIDEBAR on desktop (owner, 2026-10-10); phones keep the button grid ── */
@media (min-width: 901px) {
  #settings { flex-direction: row; align-items: flex-start; }
  #settings > .adm-nav { position: sticky; top: 0; flex: none; width: 196px; height: 100%; min-height: 100%; box-sizing: border-box;
    flex-direction: column; align-items: stretch; gap: 0; padding: 18px 10px 14px; border-bottom: 0; border-right: 1px solid rgba(255,255,255,.07);
    overflow-y: auto; scrollbar-width: none; }
  #settings > .adm-nav::-webkit-scrollbar { display: none; }
  #settings > main.adm { flex: 1; min-width: 0; }
  #settings > .adm-nav .brand { padding: 0 10px 14px; }
  #settings > .adm-nav .tabs { flex-direction: column; flex-wrap: nowrap; gap: 1px; overflow: visible; }
  #settings > .adm-nav .tabs button { width: 100%; padding: 8px 10px; border-radius: 8px; font-size: 13.5px; text-align: left; justify-content: flex-start; box-shadow: none; }
  #settings > .adm-nav .tabs button:hover { background: rgba(255,255,255,.04); }
  #settings > .adm-nav .tabs button.active { background: rgba(111,182,205,.13); color: #e7ecf2; box-shadow: inset 2px 0 0 #6fb6cd; }
  #settings > .adm-nav .tabs button b { margin-left: auto; }
  /* Panic and Moderation were pinned to the right of the old bar: plain items here */
  #settings > .adm-nav .tabs .panic-tab, #settings > .adm-nav .tabs [data-tab="audit"] { position: static; right: auto; padding-left: 10px; background: transparent; }
  #settings > .adm-nav .tabs .panic-tab.active { background: rgba(224,122,122,.12); box-shadow: inset 2px 0 0 #e07a7a; }
  #settings > .adm-nav .tabs .panic-tab::before { display: none; }
  #settings > .adm-nav .grow { flex: 1; min-height: 16px; }
  #settings > .adm-nav .upd { display: block; padding: 0 10px 8px; white-space: normal; font-size: 11.5px; }
  #settings > .adm-nav .adm-btn { margin: 0 6px; }
}
@media (min-width: 901px) and (max-width: 1200px) { #settings .adm-grid.two { grid-template-columns: minmax(0, 1fr); } }
.lb-period { display: flex; margin: -4px 0 16px; }

/* ── Admin → Workers: the in-panel spreadsheet (owner, 2026-10-10) ───────────────────────────────────────────── */
.ws-card { min-height: 0; }
.ws-card .adm-head .muted.bad { color: #f0a3a1; }
.ws-bar { display: flex; align-items: center; flex-wrap: wrap; gap: 2px; padding: 8px 12px; border-bottom: 1px solid rgba(255,255,255,.055); }
.ws-b { position: relative; display: inline-flex; align-items: center; justify-content: center; width: 32px; height: 32px; padding: 0;
  border: 0; border-radius: 8px; background: transparent; color: #93a3b1; cursor: pointer; }
.ws-b:hover:not(:disabled) { background: rgba(255,255,255,.06); color: #e7ecf2; }
.ws-b.on { background: rgba(111,182,205,.16); color: #cfe9f2; }
.ws-b:disabled { opacity: .35; cursor: default; }
.ws-swatch { position: absolute; left: 8px; right: 8px; bottom: 4px; height: 3px; border-radius: 2px; box-shadow: 0 0 0 1px rgba(255,255,255,.12); }
.ws-sep { width: 1px; height: 20px; margin: 0 6px; background: rgba(255,255,255,.08); }
.ws-grow { flex: 1; }
.ws-bar .adm-btn { margin-left: 6px; }
.ws-grid { position: relative; height: calc(100vh - 230px); min-height: 360px; overflow: auto; outline: none;
  background: #171c21; font: 13px 'DM Sans', sans-serif; color: #e7ecf2; overscroll-behavior: contain; }
.ws-t { table-layout: fixed; border-collapse: separate; border-spacing: 0; user-select: none; }
.ws-t th, .ws-t td { height: 30px; box-sizing: border-box; padding: 0 9px; overflow: hidden; white-space: nowrap; text-overflow: ellipsis;
  border-right: 1px solid rgba(255,255,255,.06); border-bottom: 1px solid rgba(255,255,255,.06); }
.ws-t td { cursor: cell; }
.ws-t thead th { position: sticky; top: 0; z-index: 2; height: 28px; background: #1f262c; color: #7f8f9d;
  font: 600 11px 'DM Sans', sans-serif; text-align: center; letter-spacing: .04em; }
.ws-t .ws-rh { position: sticky; left: 0; z-index: 1; background: #1f262c; color: #7f8f9d; font: 500 11px 'DM Sans', sans-serif;
  text-align: center; padding: 0; cursor: default; }
.ws-t .ws-corner { left: 0; z-index: 3; cursor: pointer; }
.ws-t .ws-ch, .ws-t .ws-rh { user-select: none; }
.ws-t .ws-ch.on, .ws-t .ws-rh.on { background: #263a44; color: #cfe9f2; }
/* the header's divider IS the resize handle: the line you can see is the thing you grab (the header cell clips
   its children at its padding edge, so a handle beside a real border left that border pixel ungrabbable) */
.ws-t thead th.ws-ch { border-right: 0; }
.ws-rz { position: absolute; top: 0; right: 0; width: 8px; height: 100%; cursor: col-resize; z-index: 4;
  box-shadow: inset -1px 0 rgba(255,255,255,.06); }
.ws-rz:hover { background: rgba(111,182,205,.45); }
/* the selection tints over whatever fill a cell has; the active cell gets the accent outline */
.ws-t td.ws-sel { box-shadow: inset 0 0 0 9999px rgba(111,182,205,.13); }
.ws-t td.ws-act { outline: 2px solid #6fb6cd; outline-offset: -2px; }
.ws-ed { position: absolute; z-index: 5; box-sizing: border-box; margin: 0; padding: 0 9px; border: 0; border-radius: 0;
  outline: 2px solid #6fb6cd; outline-offset: -2px; background: #11161a; color: #e7ecf2; font: 13px 'DM Sans', sans-serif;
  box-shadow: 0 6px 18px rgba(0,0,0,.45); }
.ws-pop, .ws-menu { position: fixed; z-index: 30; border-radius: 10px; background: #222a31; border: 1px solid rgba(255,255,255,.08);
  box-shadow: 0 12px 32px rgba(0,0,0,.5); font: 12.5px 'DM Sans', sans-serif; color: #dde5ec; }
.ws-pop { padding: 10px; }
.ws-pop-t { margin: 0 2px 8px; font-size: 11.5px; color: #7f8f9d; }
.ws-pop-g { display: grid; grid-template-columns: repeat(5, 24px); gap: 6px; }
.ws-pop-g button { width: 24px; height: 24px; padding: 0; border-radius: 6px; border: 1px solid rgba(255,255,255,.14); cursor: pointer; }
.ws-pop-g button:hover { outline: 2px solid #6fb6cd; outline-offset: 1px; }
.ws-pop-g button.none { background: linear-gradient(135deg, transparent 45%, #e5605d 45% 55%, transparent 55%) #171c21; }
.ws-menu { padding: 5px; min-width: 190px; }
.ws-menu button { display: block; width: 100%; padding: 8px 11px; border: 0; border-radius: 7px; background: transparent;
  color: inherit; font: inherit; text-align: left; cursor: pointer; }
.ws-menu button:hover { background: rgba(111,182,205,.14); }
.ws-menu i { display: block; height: 1px; margin: 4px 6px; background: rgba(255,255,255,.07); }
@media (max-width: 760px) { .ws-grid { height: calc(100vh - 280px); } .ws-bar .adm-btn { margin-left: 0; } }
/* Affiliates bar: roster filters | the two other views (owner, 2026-10-10: "clean up") */
#affFilter .aff-sep { width: 1px; align-self: stretch; margin: 4px 6px; background: rgba(255,255,255,.1); }
/* Stats → Month by month · DMs: the month reps started shows its incoming from BEFORE that day in grey, uncounted
   (owner, 2026-10-10: "only on september") */
.adm-month .track.split { display: flex; }
.adm-month .track.split i { flex: none; }
.adm-month .track i.pre { background: #4a5560; border-radius: 4px 0 0 4px; }
.adm-month .track i.pre + i.inc { border-radius: 0 4px 4px 0; }

/* ── Admin sidebar groups: Sales / Content / Admin, each a header you click (owner, 2026-10-10) ───────────────── */
/* Phones keep the flat 4-column grid: the wrappers vanish and the buttons stay direct grid items. */
#adminTabs .tgrp, #adminTabs .gsub { display: contents; }
#adminTabs .ghead { display: none; }
@media (min-width: 901px) {
  #settings > .adm-nav .tabs .tgrp { display: block; margin-top: 10px; }
  #settings > .adm-nav .tabs .gsub { display: none; }
  #settings > .adm-nav .tabs .tgrp.open .gsub { display: block; }
  #settings > .adm-nav .tabs .ghead { display: flex; align-items: center; gap: 7px; width: 100%; padding: 6px 10px; border: 0;
    border-radius: 8px; background: transparent; cursor: pointer; font: inherit; font-size: 11.5px; font-weight: 600;
    letter-spacing: .07em; text-transform: uppercase; color: #7f8f9d; text-align: left; box-shadow: none; }
  #settings > .adm-nav .tabs .ghead:hover { color: #c6d2dc; background: transparent; }
  #settings > .adm-nav .tabs .ghead::after { content: ""; width: 5px; height: 5px; margin-left: auto; border-right: 1.5px solid currentColor;
    border-bottom: 1.5px solid currentColor; transform: rotate(-45deg); transition: transform .15s ease; }
  #settings > .adm-nav .tabs .tgrp.open .ghead::after { transform: rotate(45deg); }
  #settings > .adm-nav .tabs .gsub button { padding-left: 20px; }
  #settings > .adm-nav .tabs .ghead .gb { margin-left: 0; padding: 1px 6px; border-radius: 5px; font-size: 10.5px; font-weight: 700;
    letter-spacing: 0; background: rgba(111,182,205,.16); color: #8fc6d8; }
  #settings > .adm-nav .tabs .ghead .gb.bad { min-width: 7px; height: 7px; padding: 0; border-radius: 50%; background: #e5605d; }
}

/* an azte.co voucher (owner, 2026-10-11): marked for the admin who redeems it; a rep only ever gets the placeholder */
.msg.voucher { outline: 2px solid #f0a545; outline-offset: 2px; }
.msg.voucher::before { content: '🎟 Voucher'; display: block; margin: 0 0 4px; font-size: 11px; font-weight: 700; color: #f0a545; }

/* trusted affiliates, on Affiliate activity (owner, 2026-10-11) */
.act-trust { min-width: 150px; }
.act-trust .act-how { margin-top: 4px; font-size: 11.5px; white-space: nowrap; }
.act-trust .act-perm { display: flex; margin-top: 6px; font-size: 12px; white-space: nowrap; }
.act-trust .act-how a { color: var(--accent); text-decoration: none; }
.act-trust .act-how a:hover { text-decoration: underline; }

/* Products -> Product lists: one editable text per source (owner, 2026-10-11) */
.spl-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(340px, 1fr)); gap: 12px; padding: 0 18px 18px; }
.spl-card { display: flex; flex-direction: column; gap: 8px; min-width: 0; padding: 12px; border: 1px solid var(--line); border-radius: 12px; background: var(--bg); }
.spl-head { display: flex; align-items: baseline; gap: 8px; min-width: 0; }
.spl-head b { flex: none; }
.spl-head .muted { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 11.5px; }
.spl-text { width: 100%; box-sizing: border-box; height: 220px; resize: vertical; font: 12.5px/1.5 ui-monospace, SFMono-Regular, Menlo, monospace; white-space: pre-wrap; }
.spl-foot { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.spl-n { font-size: 11.5px; }
.spl-n.bad { color: #f0a3a1; }
@media (max-width: 760px) { .spl-grid { grid-template-columns: 1fr; padding: 0 12px 12px; } .spl-text { font-size: 16px; } }
.spl-st { font-size: 11.5px; }
.spl-st.bad { color: #f0a3a1; }

/* flat-rate proofs (owner, 2026-10-11) */
.fl-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(320px, 1fr)); gap: 12px; padding: 0 18px 18px; }
.fl-card { display: flex; gap: 12px; min-width: 0; padding: 12px; border: 1px solid var(--line); border-radius: 12px; background: var(--bg); }
.fl-shot { flex: none; width: 110px; height: 150px; border-radius: 8px; overflow: hidden; background: var(--panel); }
.fl-shot img { width: 100%; height: 100%; object-fit: cover; display: block; }
.fl-body { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 6px; }
.fl-top { display: flex; align-items: baseline; gap: 8px; flex-wrap: wrap; }
.fl-cap { font-size: 13px; line-height: 1.45; word-break: break-word; }
.fl-act { margin-top: auto; display: flex; align-items: center; gap: 6px; flex-wrap: wrap; }
.fl-usd { display: inline-flex; align-items: center; gap: 4px; }
.fl-usd input { width: 84px; }
.fl-done { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; padding: 10px 18px; border-top: 1px solid var(--line); font-size: 13px; }
@media (max-width: 760px) { .fl-grid { grid-template-columns: 1fr; padding: 0 12px 12px; } .fl-usd input { font-size: 16px; } }

/* ── Submissions (owner, 2026-10-11): flat-rate proofs reviewed in bulk; public/subs.js ─────────────────────────── */
#subs { overflow-y: auto; background: radial-gradient(1200px 620px at 50% -180px, rgba(29,39,51,.9) 0%, rgba(20,24,29,0) 62%);
  font-family: 'DM Sans', -apple-system, BlinkMacSystemFont, sans-serif; color: #e7ecf2; }
#subs .dz.sb { padding-bottom: 140px; }          /* the shared page frame (width, title) applies; room for the bar */
.sb-sum { margin: 0; padding: 14px 20px 0; font-size: 13.5px; color: #8b9aa8; }   /* inside the card, like every page */
.sb-sum b { color: #e7ecf2; font-weight: 700; }
.sb-panel { overflow: visible; }
.sb-bar { position: sticky; top: 0; z-index: 4; background: rgba(28,34,40,.97); }   /* under the summary line, inside the card */
.sb-sel { max-width: 220px; padding: 9px 12px; border-radius: 11px; border: 1px solid rgba(255,255,255,.09); background: rgba(0,0,0,.26); color: #e7ecf2; font: 13px 'DM Sans', sans-serif; }
.sb-search { flex: 0 1 220px; }
.sb-seg { display: flex; gap: 2px; padding: 3px; border-radius: 10px; background: rgba(0,0,0,.28); }
.sb-seg button { padding: 6px 10px; border: 0; border-radius: 7px; background: transparent; color: #93a3b1; font: 500 12px 'DM Sans', sans-serif; cursor: pointer; }
.sb-seg button.on { background: rgba(111,182,205,.22); color: #dff1f7; }
.sb-hint { display: flex; flex-wrap: wrap; gap: 6px 18px; padding: 10px 20px 0; font-size: 12px; color: #6d7d8b; }
.sb-hint kbd, .sb-view kbd { padding: 0 5px; border-radius: 4px; border: 1px solid rgba(255,255,255,.14); font: 11px 'JetBrains Mono', monospace; color: #b9c6d1; background: rgba(255,255,255,.04); }
.sb-body { padding: 8px 20px 20px; outline: none; }
.sb-body.is-loading { opacity: .55; transition: opacity .2s; }
.sb-new { display: block; margin: 12px auto 0; padding: 7px 16px; border-radius: 999px; border: 1px solid rgba(111,182,205,.45); background: rgba(111,182,205,.16); color: #bfe3ee; font: 600 12.5px 'DM Sans', sans-serif; cursor: pointer; }
.sb-group { margin-top: 18px; }
.sb-ghead { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 14px; padding: 0 2px 10px; background: none !important; }
.sb-gwho { display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 10px; }
.sb-gwho b { font-size: 15px; color: #f2f6fa; }
.sb-gwho > span { font-size: 12.5px; color: #8b9aa8; }
.sb-gdup { padding: 1px 8px; border-radius: 6px; font-size: 11.5px; font-weight: 600; color: #f0c674; background: rgba(240,198,116,.12); }
.sb-ghead q { flex: 1 1 260px; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 13px; color: #b9c6d1; quotes: '“' '”'; }
.sb-gsel { margin-left: auto; padding: 6px 13px; border-radius: 9px; border: 1px solid rgba(111,182,205,.35); background: rgba(111,182,205,.1); color: #9ed3e3; font: 600 12px 'DM Sans', sans-serif; cursor: pointer; }
.sb-gsel.on { background: rgba(111,182,205,.85); color: #0d1418; border-color: transparent; }
.sb-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(var(--sb-w, 150px), 1fr)); gap: 10px; }
.sz-s .sb-grid { --sb-w: 108px; }
.sz-l .sb-grid { --sb-w: 220px; }
.sb-card { position: relative; aspect-ratio: 3 / 5; overflow: hidden; border-radius: 12px; background: #11161b; border: 1px solid rgba(255,255,255,.07);
  cursor: pointer; user-select: none; transition: transform .12s ease, box-shadow .12s ease, border-color .12s ease; }
.sb-card img { display: block; width: 100%; height: 100%; object-fit: cover; object-position: top; pointer-events: none; }
.sb-card:hover { border-color: rgba(111,182,205,.45); }
.sb-card.focus { box-shadow: 0 0 0 2px rgba(255,255,255,.55); }
.sb-card.on { border-color: transparent; box-shadow: 0 0 0 3px #6fb6cd, 0 10px 28px -12px rgba(111,182,205,.7); transform: scale(.975); }
.sb-card.on img { filter: brightness(.82); }
.sb-chk { position: absolute; top: 8px; left: 8px; width: 22px; height: 22px; border-radius: 50%; border: 2px solid rgba(255,255,255,.85); background: rgba(0,0,0,.35); box-shadow: 0 1px 4px rgba(0,0,0,.5); }
.sb-card.on .sb-chk { border-color: #6fb6cd; background: #6fb6cd url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M9.5 16.2 5.3 12l-1.4 1.4 5.6 5.6L20.1 8.4 18.7 7z' fill='%230d1418'/%3E%3C/svg%3E") center / 16px no-repeat; }
#subs:not(.sb-pend) .sb-chk { display: none; }
.sb-id { position: absolute; top: 9px; right: 8px; padding: 1px 6px; border-radius: 6px; font: 11px 'JetBrains Mono', monospace; color: #dfe7ee; background: rgba(0,0,0,.55); }
.sb-dup { position: absolute; top: 36px; left: 8px; right: 8px; padding: 3px 7px; border-radius: 7px; font-size: 11px; font-weight: 700; text-align: center; color: #1b1405; background: #f0c674; }
.sb-st { position: absolute; top: 36px; right: 8px; max-width: calc(100% - 16px); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; padding: 2px 8px; border-radius: 7px; font-size: 11.5px; font-weight: 700; }
.sb-st.ok { color: #0d1d16; background: #6fd8b0; }
.sb-st.bad { color: #2a0f0f; background: #e79292; }
.sb-zoom { position: absolute; right: 8px; bottom: 46px; width: 30px; height: 30px; display: grid; place-items: center; border: 0; border-radius: 9px; background: rgba(0,0,0,.6); opacity: 0; cursor: zoom-in; transition: opacity .12s; }
.sb-zoom svg { width: 16px; height: 16px; fill: #e7ecf2; }
.sb-card:hover .sb-zoom, .sb-card.focus .sb-zoom { opacity: 1; }
@media (hover: none) { .sb-zoom { opacity: 1; } }
.sb-foot { position: absolute; left: 0; right: 0; bottom: 0; display: flex; flex-wrap: wrap; align-items: baseline; gap: 0 8px; padding: 22px 9px 8px; font-size: 11.5px; color: #c4d0da;
  background: linear-gradient(to top, rgba(8,11,14,.95), rgba(8,11,14,.7) 60%, transparent); }
.sb-foot b { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 12.5px; color: #fff; }
.sb-foot em { flex-basis: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-style: normal; color: #93a3b1; }
.sz-s .sb-foot { padding-top: 16px; font-size: 10.5px; } .sz-s .sb-foot em, .sz-s .sb-id { display: none; }
.sb-more { padding: 6px 20px 22px; text-align: center; }
.sb-bal-sum { margin: 12px 2px 14px; font-size: 15px; font-weight: 700; color: #eafaf2; }
.sb-bal td, .sb-bal th { padding: 10px 12px; }

/* the bar that decides the selection */
.sb-act { position: fixed; left: 0; right: 0; bottom: 18px; z-index: 18; display: flex; justify-content: center; padding: 0 16px; pointer-events: none; }
.sb-act-in { pointer-events: auto; display: flex; flex-wrap: wrap; align-items: center; gap: 10px 12px; max-width: 1100px; padding: 12px 14px 12px 18px; border-radius: 18px;
  background: rgba(22,28,34,.97); border: 1px solid rgba(111,182,205,.32); box-shadow: 0 24px 60px -18px rgba(0,0,0,.9), 0 0 0 1px rgba(0,0,0,.4); backdrop-filter: blur(10px); }
.sb-n { font-size: 14px; color: #c4d0da; white-space: nowrap; }
.sb-n b { font-size: 18px; color: #fff; margin-right: 2px; }
.sb-n small { margin-left: 4px; font-size: 12.5px; color: #8b9aa8; }
.sb-vals { display: flex; flex-wrap: wrap; gap: 4px; }
.sb-vals button { padding: 7px 10px; border-radius: 9px; border: 1px solid rgba(255,255,255,.1); background: rgba(255,255,255,.04); color: #d8e2ea; font: 600 12.5px 'DM Sans', sans-serif; cursor: pointer; }
.sb-vals button.on { border-color: #6fd8b0; background: rgba(111,216,176,.16); color: #bff0dc; }
.sb-usd { display: flex; align-items: center; gap: 4px; padding: 0 10px; border-radius: 10px; border: 1px solid rgba(255,255,255,.12); background: rgba(0,0,0,.3); }
.sb-usd span { color: #8b9aa8; font-weight: 700; }
.sb-usd input { width: 64px; padding: 8px 0; border: 0; outline: none; background: transparent; color: #fff; font: 600 14px 'DM Sans', sans-serif; }
.sb-usd:focus-within { border-color: rgba(111,216,176,.6); }
.sb-go { padding: 9px 16px; border: 0; border-radius: 11px; font: 700 13px 'DM Sans', sans-serif; cursor: pointer; white-space: nowrap; }
.sb-go.ok { color: #0d1d16; background: linear-gradient(140deg, #7ee3bd, #5cc59c); box-shadow: 0 6px 18px -8px rgba(111,216,176,.8); }
.sb-go.ok.armed { background: linear-gradient(140deg, #f3d38a, #e3b45c); color: #1b1405; box-shadow: 0 0 0 3px rgba(240,198,116,.3); }
.sb-go.bad { color: #f5c6c6; background: rgba(231,146,146,.14); border: 1px solid rgba(231,146,146,.35); }
.sb-go:disabled { opacity: .55; cursor: progress; }
.sb-decw { position: relative; }
.sb-reasons { position: absolute; bottom: calc(100% + 10px); left: 0; display: flex; flex-direction: column; min-width: 200px; padding: 6px; border-radius: 13px;
  background: #1c242b; border: 1px solid rgba(255,255,255,.1); box-shadow: 0 18px 40px -12px rgba(0,0,0,.85); }
.sb-reasons button { padding: 9px 12px; border: 0; border-radius: 8px; background: transparent; color: #e7ecf2; font: 500 13px 'DM Sans', sans-serif; text-align: left; cursor: pointer; }
.sb-reasons button:hover { background: rgba(231,146,146,.14); }
.sb-x { width: 32px; height: 32px; border: 0; border-radius: 9px; background: rgba(255,255,255,.06); color: #b9c6d1; font-size: 20px; line-height: 1; cursor: pointer; }
body.sb-acting .toast { bottom: 96px; }

/* the large viewer */
.sb-view { position: fixed; inset: 0; z-index: 30; display: grid; grid-template-columns: 56px minmax(0, 1fr) 56px 340px; align-items: center; background: rgba(6,9,12,.92); backdrop-filter: blur(6px); }
.sb-fig { margin: 0; height: 100vh; display: grid; place-items: center; padding: 24px 0; }
.sb-fig img { max-width: 100%; max-height: calc(100vh - 48px); border-radius: 12px; box-shadow: 0 30px 80px -20px rgba(0,0,0,.9); background: #11161b; }
.sb-nav { height: 64px; border: 0; background: transparent; color: #e7ecf2; font-size: 44px; cursor: pointer; opacity: .75; }
.sb-nav:hover { opacity: 1; }
.sb-nav:disabled { opacity: .15; cursor: default; }
.sb-side { align-self: stretch; display: flex; flex-direction: column; gap: 14px; padding: 28px 22px; overflow-y: auto; background: rgba(22,28,34,.96); border-left: 1px solid rgba(255,255,255,.07); }
.sb-vhead b { display: block; font-size: 19px; color: #fff; }
.sb-vhead span { font-size: 12.5px; color: #8b9aa8; }
.sb-vcap { margin: 0; padding: 10px 12px; border-radius: 10px; background: rgba(0,0,0,.25); font-size: 13.5px; line-height: 1.45; color: #d8e2ea; white-space: pre-wrap; }
.sb-vdup { display: flex; gap: 10px; padding: 10px; border-radius: 10px; background: rgba(240,198,116,.1); border: 1px solid rgba(240,198,116,.35); font-size: 12.5px; color: #f3dfb0; }
.sb-vdup img { width: 54px; height: 90px; object-fit: cover; object-position: top; border-radius: 6px; flex: none; }
.sb-vdup a { color: #f0c674; }
.sb-vsel { display: flex; align-items: center; gap: 8px; font-size: 13px; color: #c4d0da; }
.sb-vact { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; }
.sb-vact .sb-vals { flex-basis: 100%; }
.sb-vdec { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; font-size: 12.5px; color: #8b9aa8; }
.sb-vdec button { padding: 6px 10px; border-radius: 8px; border: 1px solid rgba(231,146,146,.3); background: rgba(231,146,146,.08); color: #f0c2c2; font: 500 12px 'DM Sans', sans-serif; cursor: pointer; }
.sb-vst { padding: 10px 12px; border-radius: 10px; font-weight: 700; }
.sb-vst.approved { background: rgba(111,216,176,.14); color: #bff0dc; }
.sb-vst.declined { background: rgba(231,146,146,.14); color: #f5c6c6; }
.sb-vpos { margin-top: auto; display: flex; flex-wrap: wrap; justify-content: space-between; gap: 6px; font-size: 12px; color: #6d7d8b; }
.sb-close { position: absolute; top: 14px; right: 356px; width: 40px; height: 40px; border: 0; border-radius: 50%; background: rgba(255,255,255,.08); color: #fff; font-size: 26px; line-height: 1; cursor: pointer; }
body.sb-viewing { overflow: hidden; }

@media (max-width: 900px) {
  #subs .dz.sb { padding-bottom: 170px; }
  .sb-bar { gap: 8px; padding: 12px; }
  .sb-bar .dz-tabs { width: 100%; overflow-x: auto; }
  .sb-sel, .sb-search { flex: 1 1 140px; max-width: none; }
  .sb-hint { display: none; }
  .sb-body { padding: 4px 10px 14px; }
  .sb-grid { --sb-w: 104px; gap: 7px; }
  .sz-l .sb-grid { --sb-w: 150px; }
  .sz-s .sb-grid { --sb-w: 80px; }
  .sb-act { bottom: calc(70px + env(safe-area-inset-bottom)); padding: 0 8px; }
  .sb-act-in { gap: 8px; padding: 10px 12px; }
  .sb-vals { order: 5; flex-basis: 100%; }
  body.sb-acting .toast { bottom: calc(190px + env(safe-area-inset-bottom)); }
  .sb-view { grid-template-columns: 40px minmax(0, 1fr) 40px; grid-template-rows: minmax(0, 1fr) auto; }
  .sb-fig { height: auto; max-height: 58vh; padding: 12px 0 6px; }
  .sb-fig img { max-height: 56vh; }
  .sb-side { grid-column: 1 / -1; max-height: 42vh; padding: 14px 16px calc(14px + env(safe-area-inset-bottom)); border-left: 0; border-top: 1px solid rgba(255,255,255,.07); }
  .sb-close { right: 10px; top: 10px; }
}
.sb-hint { align-items: center; padding: 10px 20px 2px; }
.sb-keys { display: flex; flex-wrap: wrap; gap: 6px 18px; }
.sb-keys[hidden] { display: none; }
.sb-sizel { font-size: 12px; color: #6d7d8b; }
.sb-hint .grow { flex: 1; }
.sb-go kbd { border-color: rgba(13,29,22,.3); background: rgba(13,29,22,.12); color: #0d1d16; }
@media (max-width: 900px) { .sb-hint { display: flex; padding: 8px 10px 0; } .sb-keys { display: none; } }
.sb-hint .sb-seg + .sb-sizel { margin-left: 8px; }
@media (max-width: 900px) { .sb-hint { flex-wrap: wrap; justify-content: flex-end; gap: 8px; } }
/* drag to select: the box, and no text selection while it is drawn */
.sb-lasso { position: fixed; z-index: 17; pointer-events: none; border: 1.5px solid #6fb6cd; border-radius: 6px; background: rgba(111,182,205,.14); }
body.sb-dragging, body.sb-dragging * { user-select: none !important; cursor: crosshair !important; }
.sb-sample { position: absolute; left: 8px; bottom: 50px; padding: 1px 7px; border-radius: 6px; font-size: 10.5px; font-weight: 700; letter-spacing: .04em; text-transform: uppercase; color: #d9d2ff; background: rgba(120,100,220,.75); }
.sb-samples { color: #b3a5dd; }
.sb-samples .sb-gsel { margin-left: 6px; padding: 3px 10px; border-color: rgba(169,154,214,.4); background: rgba(169,154,214,.12); color: #d3c9f2; }

/* Submissions is wider than the other pages (owner, 2026-10-11: "expand the card, make it wider and add a bit more
   padding on the left and right"): a grid of hundreds of screenshots wants the room. #subs .dz.sb outranks the shared
   frame's :is(#subs) .dz; on a phone the frame is unchanged. */
#subs .dz.sb { max-width: 1400px; }
@media (min-width: 901px) {
  #subs .dz-panel .sb-bar { padding: 18px 32px; }
  #subs .sb-sum { padding: 16px 32px 0; }
  #subs .sb-hint { padding: 12px 32px 2px; }
  #subs .sb-body { padding: 8px 32px 28px; }
  #subs .sb-more { padding: 6px 32px 26px; }
}

/* ── Stats → By source (owner, 2026-10-11): small multiples + one source emphasised in the income chart ────────── */
.adm-plot .fill.src { background: linear-gradient(to top, #6fb6cd 0 var(--o), rgba(255,255,255,.13) var(--o) 100%); }
.ss { display: flex; flex-direction: column; padding: 4px 8px 10px; }
.ss-row { display: grid; grid-template-columns: minmax(120px, 1.2fr) minmax(90px, 1fr) minmax(70px, .8fr) 92px 52px; align-items: center;
  gap: 14px; width: 100%; padding: 9px 12px; border: 0; border-radius: 10px; background: transparent; color: #d8e2ea;
  font: 500 13px 'DM Sans', sans-serif; text-align: left; cursor: pointer; }
.ss-row + .ss-row { border-top: 1px solid rgba(255,255,255,.04); }
.ss-row:hover { background: rgba(255,255,255,.035); }
.ss-row.on { background: rgba(111,182,205,.12); box-shadow: inset 3px 0 0 #6fb6cd; }
.ss-row .nm { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: #f2f6fa; font-weight: 600; }
.ss-row .spark { width: 100%; height: 26px; overflow: visible; }
.ss-row .spark polyline { fill: none; stroke: #6fb6cd; stroke-width: 1.6; stroke-linejoin: round; stroke-linecap: round; }
.ss-row .share { height: 6px; border-radius: 3px; background: rgba(255,255,255,.06); overflow: hidden; }
.ss-row .share i { display: block; height: 100%; border-radius: 3px; background: #6fb6cd; }
.ss-row b { text-align: right; font-variant-numeric: tabular-nums; color: #f2f6fa; }
.ss-row small { text-align: right; font-variant-numeric: tabular-nums; color: #8b9aa8; }
.ss-row.none .nm { color: #93a3b1; font-weight: 500; font-style: italic; }
.ss-row.none .spark polyline { stroke: #6d7d8b; }
.ss-row.none .share i { background: #6d7d8b; }
@media (max-width: 760px) {
  .ss-row { grid-template-columns: minmax(0, 1fr) 70px 78px 44px; gap: 10px; padding: 9px 8px; }
  .ss-row .share { display: none; }
}

/* ── Admin → Affiliates → Partners (owner, 2026-10-11: "vault") ────────────────────────────────────────────── */
.pt-row + .pt-row { border-top: 1px solid rgba(255,255,255,.06); }
.pt-top { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: 6px 14px; padding: 14px 18px 4px; }
.pt-name b { font-size: 15px; color: #f2f6fa; }
.pt-name code { font: 12px 'JetBrains Mono', monospace; color: #c3b7e6; }
.pt-due { font-size: 13px; font-weight: 700; color: #8b9aa8; }
.pt-due.owed { color: #f0c674; }
.pt-act { display: flex; flex-direction: row; flex-wrap: wrap; align-items: center; justify-content: flex-start; gap: 10px 14px; text-align: left; }
.pt-act > * { margin: 0; }
.pt-add { display: inline-flex; gap: 6px; align-items: center; }
.pt-add .adm-input { width: 90px; }
.pt-deals { flex-basis: 100%; }
.pt-deals summary { cursor: pointer; color: #9ed3e3; font-size: 13px; margin: 4px 0 8px; }

/* the time and an Open chat button sit together at the right of a log row (2026-10-12) */
.adm-end { display: inline-flex; align-items: center; gap: 10px; flex-shrink: 0; }

/* a follow-up lead waiting on a rep in this chat (owner, 2026-10-12): gold instead of the blue unread badge */
.badge.gold { background: #e3b341; color: #1d1708; }

/* People -> a rep -> Payout address (owner, 2026-10-12): the inline editor below the row actions */
.btc-edit { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; margin-top: 10px; }
.btc-edit input { flex: 1 1 320px; min-width: 0; font: 13px var(--mono, monospace); padding: 8px 10px; border-radius: 8px; border: 1px solid rgba(255,255,255,.12); background: rgba(0,0,0,.25); color: inherit; }
.btc-edit .hint { flex-basis: 100%; font-size: 12px; color: #8b9aa8; }

/* Updates: rich text + pictures (owner, 2026-10-12) */
.au-fmt { display: flex; flex-wrap: wrap; align-items: center; gap: 4px; margin: 6px 0 6px; }
.au-fmt .grow { flex: 1; }
.au-fmt button { min-width: 32px; height: 30px; padding: 0 9px; border-radius: 7px; border: 1px solid rgba(255,255,255,.1);
  background: rgba(255,255,255,.04); color: inherit; font: 13px/1 inherit; cursor: pointer; }
.au-fmt button:hover { background: rgba(255,255,255,.09); }
.au-ed { min-height: 150px; max-height: 460px; overflow: auto; white-space: pre-wrap; word-break: break-word; line-height: 1.5; cursor: text; }
.au-ed:empty::before { content: attr(data-ph); color: #6f7d8a; pointer-events: none; }
.au-ed code, .uz-body code { font-family: var(--mono, ui-monospace, monospace); font-size: .92em; background: rgba(255,255,255,.07); padding: 1px 4px; border-radius: 4px; }
.au-imgs { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 8px; }
.au-imgs:empty { display: none; }
.au-im { position: relative; width: 112px; height: 84px; border-radius: 9px; overflow: hidden; background: rgba(0,0,0,.3); }
.au-im img { width: 100%; height: 100%; object-fit: cover; display: block; }
.au-imx { position: absolute; top: 4px; right: 4px; width: 22px; height: 22px; border-radius: 50%; border: 0; background: rgba(0,0,0,.7);
  color: #fff; font-size: 15px; line-height: 22px; cursor: pointer; }
.uz-imgs { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 8px; margin-top: 12px; }
.uz-imgs img { width: 100%; aspect-ratio: 4 / 3; object-fit: cover; border-radius: 10px; display: block; background: rgba(0,0,0,.2); }
.uz-imgs.one { grid-template-columns: minmax(0, 560px); }
.uz-imgs.one img { aspect-ratio: auto; max-height: 460px; object-fit: contain; }
.au-item-imgs { display: flex; gap: 6px; margin-top: 8px; flex-wrap: wrap; }
.au-item-imgs img { width: 64px; height: 48px; object-fit: cover; border-radius: 6px; }

/* Accounts -> Compare a quick reply on every account (admin amex, 2026-10-12) */
.ae-cmp { padding: 12px 14px 4px; }
.ae-cmp-l { display: grid; gap: 6px; font-size: 12px; color: #8b9aa8; }
.ae-cmp-l select { width: 100%; }
.ae-cmp-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(320px, 100%), 1fr)); gap: 12px; padding: 14px 18px 18px; }
.ae-cmp-card { border: 1px solid rgba(255,255,255,.08); border-radius: 12px; background: rgba(255,255,255,.02); padding: 12px 14px; min-width: 0; }
.ae-cmp-card.missing { border-style: dashed; opacity: .75; }
.ae-cmp-head { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin-bottom: 8px; }
.ae-cmp-head .grow { flex: 1; }
.ae-ver { font-size: 11px; font-weight: 600; padding: 2px 8px; border-radius: 999px; background: rgba(111,182,205,.14); color: #8fc6d8; }
.ae-ver.v1 { background: rgba(230,180,106,.14); color: #e0b46a; }
.ae-ver.v2 { background: rgba(165,140,230,.15); color: #b8a5ee; }
.ae-ver.v3 { background: rgba(224,122,122,.14); color: #e79292; }
.ae-ver.off { background: rgba(255,255,255,.06); color: #8b9aa8; }
.ae-cmp-msgs { display: grid; gap: 8px; }
.ae-cmp-m { background: rgba(0,0,0,.18); border-radius: 9px; padding: 8px 10px; font-size: 13px; line-height: 1.45; overflow-wrap: anywhere; }
.ae-cmp-m .ae-file { display: inline-block; margin-bottom: 4px; }

/* Every control the browser draws itself (owner, 2026-10-12: "fix dropdown css, this is in multiple places"): with no
   colour scheme declared, the open list of a <select> came up light grey under the portal's white text, with a light
   scrollbar beside it, on every dropdown in the portal. The site is dark everywhere, so say so once. */
:root { color-scheme: dark; }
select option, select optgroup { background-color: var(--pop); color: var(--text); }
select option:checked { background-color: #2c5d86; color: #fff; }
select option:disabled { color: #6f7d8a; }

/* each compare card is a notepad: rich text, files, messages, delete (owner, 2026-10-12) */
.ae-cmp-ed { min-height: 22px; outline: none; white-space: pre-wrap; word-break: break-word; cursor: text; border-radius: 6px; }
.ae-cmp-ed:empty::before { content: attr(data-ph); color: #6f7d8a; pointer-events: none; }
.ae-cmp-ed:focus { box-shadow: 0 0 0 2px rgba(111,182,205,.45); }
.ae-cmp-m:focus-within { background: rgba(0,0,0,.28); }
.ae-cmp-ed code { font-family: var(--mono, ui-monospace, monospace); font-size: .92em; background: rgba(255,255,255,.07); padding: 1px 4px; border-radius: 4px; }
.ae-cmp-ed .spoiler { background: rgba(255,255,255,.14); border-radius: 3px; }
.ae-cmp-st { font-size: 11.5px; color: #8b9aa8; }
.ae-cmp-st.bad { color: #e79292; }
.ae-cmp-fmt { display: flex; flex-wrap: wrap; gap: 3px; margin: -2px 0 8px; }
.ae-cmp-fmt button { min-width: 26px; height: 24px; padding: 0 7px; border-radius: 6px; border: 1px solid rgba(255,255,255,.08);
  background: rgba(255,255,255,.03); color: #b9c3cc; font-size: 12px; cursor: pointer; }
.ae-cmp-fmt button:hover { background: rgba(255,255,255,.09); color: #fff; }
.ae-cmp-mtop { display: flex; align-items: center; gap: 6px; margin-bottom: 4px; min-height: 18px; }
.ae-cmp-mtop .grow { flex: 1; }
.ae-cmp-mb { font-size: 11px; color: #7f8d99; background: none; border: 0; padding: 0 2px; cursor: pointer; }
.ae-cmp-mb:hover { color: #cfd8df; text-decoration: underline; }
.ae-cmp-m:not(:hover):not(:focus-within) .ae-cmp-mb { opacity: .55; }
.ae-cmp-add { margin-top: 8px; font-size: 12px; color: #8fc6d8; background: none; border: 0; padding: 2px 0; cursor: pointer; }
.ae-cmp-add:hover { text-decoration: underline; }
.ae-cmp-del { width: 24px; height: 24px; border-radius: 50%; border: 1px solid rgba(224,122,122,.25); background: rgba(224,122,122,.08);
  color: #e79292; font-size: 15px; line-height: 21px; cursor: pointer; padding: 0; }
.ae-cmp-del:hover { background: rgba(224,122,122,.2); }
.ae-cmp-card { position: relative; }
.ae-cmp-card:has(.ae-cmp-del) .ae-cmp-head { padding-right: 30px; }
.ae-cmp-del { position: absolute; top: 10px; right: 10px; }
.ae-cmp-head { margin-bottom: 4px; }
.ae-cmp-sub { display: flex; align-items: center; gap: 8px; margin-bottom: 8px; min-height: 24px; }
.ae-cmp-sub .grow { flex: 1; }
.ae-cmp-mtop .ae-file { flex: 1 1 auto; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ae-cmp-mb { flex: none; white-space: nowrap; }

/* Rep warnings: a several-line detail (the low-activity list) sits under its label, not beside it */
.adm-block .ra-lines { margin-top: 6px; font-size: 13px; line-height: 1.6; color: #c3ccd4; }

/* an affiliate making a proof screenshot (owner, 2026-10-12) */
.proofbar { padding: 9px 16px; font-size: 13px; line-height: 1.45; color: #f3dfae; background: rgba(227,179,65,.12); border-bottom: 1px solid rgba(227,179,65,.25); }
.proofbar b { color: #f0c674; }

/* a vouch chat (owner, 2026-10-12) */
.vouchbar { display: flex; align-items: center; gap: 12px; padding: 9px 16px; font-size: 13px; line-height: 1.45;
  color: #cfe3d2; background: rgba(111,216,176,.1); border-bottom: 1px solid rgba(111,216,176,.22); }
.vouchbar .t { flex: 1; min-width: 0; }
.vouchbar b { color: #8fe0b8; }
.vouchbar button { flex: none; padding: 6px 12px; border-radius: 8px; border: 1px solid rgba(111,216,176,.35);
  background: rgba(111,216,176,.14); color: #bdf0d6; font: 600 12.5px inherit; cursor: pointer; }
.vouchbar button:hover:not(:disabled) { background: rgba(111,216,176,.24); }
.vouchbar button.on { background: rgba(111,216,176,.3); color: #eafff4; }
.vz-row { display: flex; align-items: center; gap: 10px; padding: 11px 18px; border-top: 1px solid rgba(255,255,255,.05); }
.vz-row:first-child { border-top: 0; }
.vz-row .body { flex: 1; min-width: 0; }
.vz-row .meta { font-size: 11.5px; color: #8b9aa8; margin-top: 2px; }

/* Home: an account whose waiting chats are already read wears the gold count (owner, 2026-10-12) */
.hz-row .cnt.gold { background: #e3b341; color: #1d1708; }

.ae-cmp-top { padding: 14px 18px 0; }
.ae-cmp-top { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; }
.ae-cmp-top .muted { font-size: 11.5px; }

/* the note that goes out with a batch decision (owner, 2026-10-12): it takes the leftover width of the bar */
.sb-note { flex: 1 1 220px; min-width: 180px; padding: 9px 12px; border-radius: 10px; color: #fff;
  border: 1px solid rgba(255,255,255,.12); background: rgba(255,255,255,.04); outline: none;
  font: 500 13px 'DM Sans', sans-serif; }
.sb-note::placeholder { color: #7f8c99; }
.sb-note:focus { border-color: rgba(111,182,205,.6); background: rgba(255,255,255,.07); }
@media (max-width: 760px) { .sb-note { flex-basis: 100%; order: 9; } }

/* $0 = declined (owner, 2026-10-13): the one button says so before it is pressed */
.sb-go.ok.declining { color: #f7dada; background: linear-gradient(140deg, #d98585, #c46a6a); box-shadow: 0 6px 18px -8px rgba(231,146,146,.8); }
.sb-go.ok.declining.armed { background: linear-gradient(140deg, #f3d38a, #e3b45c); color: #1b1405; }