/* FragSearcher - auth / dashboard / admin pages. Reuses tokens from style.css. */

/* The [hidden] attribute must always win. Several components set their own
   display (.nav-badge inline-flex, .dm-thread/.dm-thread-empty flex, .msg-pane
   grid), which would otherwise override [hidden] and leave the element visible
   (a stray "0" badge, or the "Select a conversation" panel overlapping a thread). */
[hidden] { display: none !important; }

/* Sticky, glassy navigation bar. Overrides the hero-style .header from
   style.css: translucent dark glass + blur so page content scrolls behind it,
   a hairline underline, and a soft shadow that reads as "floating". Kept below
   the notif/msg popovers (z-index 60) so those still layer on top. */
/* The navigation bar stays dark in both themes: it is chrome, not content,
   and everything in it is lettered for a dark ground. What changes is that it
   is now made of the same material as the panels - the same blur, the same
   bright top rim, the same inner wall - instead of being a flat maroon slab
   with a hard edge, which is what made the page read as two unrelated halves.
   The accent survives as a tint in the glass rather than as a fill. */
.header--slim {
  position: sticky;
  top: 0;
  z-index: 50;
  padding: 12px 24px;
  overflow: visible;
  background: linear-gradient(180deg,
    rgba(30,12,18,0.72) 0%,
    rgba(18,9,14,0.78) 100%);
  -webkit-backdrop-filter: saturate(170%) blur(22px);
  backdrop-filter: saturate(170%) blur(22px);
  border-bottom: 1px solid rgba(255,255,255,0.10);
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,0.22),
    inset 0 -1px 0 rgba(0,0,0,0.30),
    0 10px 34px rgba(12,8,14,0.34);
}
/* The hero radial-glow overlay is too heavy for a compact bar - drop it. */
.header--slim::after { display: none; }
.acct-header { display: flex; align-items: center; justify-content: space-between; gap: 16px; }
.acct-nav { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.acct-nav-links { display: flex; align-items: center; gap: 2px; flex-wrap: wrap; }

.acct-link {
  position: relative; color: rgba(255,255,255,0.78); text-decoration: none;
  font-size: 0.86rem; font-weight: 500; padding: 7px 13px; border-radius: var(--r-pill);
  transition: color var(--t), background var(--t);
}
.acct-link:hover { color: #fff; background: rgba(255,255,255,0.12); }
.acct-link.is-active { color: #fff; background: rgba(255,255,255,0.16); font-weight: 600; }
.acct-link--admin { color: var(--gold-2); }
.acct-link--admin:hover { color: var(--gold-2); background: rgba(224,179,74,0.16); }
.acct-link--admin.is-active { color: var(--gold-2); background: rgba(224,179,74,0.2); }

/* Divider between primary nav and the account cluster */
.acct-sep { align-self: stretch; width: 1px; margin: 4px 4px; background: rgba(255,255,255,0.18); }

/* Account cluster: avatar + name + logout */
.acct-me { display: flex; align-items: center; gap: 10px; }
.acct-id {
  display: inline-flex; align-items: center; gap: 9px; text-decoration: none;
  padding: 4px 4px 4px 4px; border-radius: var(--r-pill); transition: background var(--t);
}
.acct-id:hover { background: rgba(255,255,255,0.1); }
.acct-avatar {
  flex-shrink: 0; width: 30px; height: 30px; border-radius: 50%;
  object-fit: cover; background: rgba(255,255,255,0.15);
  box-shadow: 0 2px 10px var(--accent-glow), inset 0 1px 0 rgba(255,255,255,0.25);
}

/* Shared circular avatar used across forum, dashboard, admin and messaging. */
.avatar {
  flex-shrink: 0; border-radius: 50%; object-fit: cover; display: inline-block;
  background: rgba(0,0,0,0.06); vertical-align: middle;
}
.avatar--xs { width: 20px; height: 20px; }
.avatar--sm { width: 28px; height: 28px; }
.avatar--md { width: 40px; height: 40px; }
.avatar--lg { width: 88px; height: 88px; }
.acct-who { color: rgba(255,255,255,0.75); font-size: 0.82rem; font-weight: 500; }
/* The header stays dark in both themes, so a staff name on it needs the
   light shades whatever the page theme is: the admin red measured 1.8:1
   here and the moderator amber 3.2:1. */
.acct-who.uname--admin { color: #ff9ba5 !important; }
.acct-who.uname--mod   { color: #ffb14d !important; }
/* Default ghost button - sits on light glass cards, so it needs dark ink and a
   visible edge (white-on-translucent used to disappear against the card). */
.acct-btn {
  border: 1px solid rgba(17,17,34,0.16); background: rgba(17,17,34,0.045);
  color: var(--ink); border-radius: var(--r-pill); padding: 8px 16px; font: inherit;
  font-size: 0.85rem; font-weight: 600; cursor: pointer; text-decoration: none;
  transition: background var(--t), transform var(--t);
}
.acct-btn:hover { background: rgba(17,17,34,0.09); color: var(--ink); transform: translateY(-1px); }
.acct-btn--primary {
  color: #fff;
  background: linear-gradient(135deg, var(--accent-2), var(--accent));
  border-color: transparent; box-shadow: 0 4px 16px var(--accent-glow);
}
/* The same ghost button also lives in the dark header (Log out) - keep it white
   there, but leave the accent "Sign in" primary button untouched. */
.header .acct-btn:not(.acct-btn--primary) {
  border-color: rgba(255,255,255,0.28); background: rgba(255,255,255,0.1); color: #fff;
}
.header .acct-btn:not(.acct-btn--primary):hover {
  background: rgba(255,255,255,0.2); color: #fff;
}

.acct-main { flex: 1; max-width: 860px; width: 100%; margin: 0 auto; padding: 32px 24px 56px; }
/* Content-heavy pages (forum, staff, browser-extension) opt into a shared wider
   column so their multi-column / grid layouts aren't squeezed by the 860px cap. */
.acct-main--wide { max-width: 1100px; }

.glass-card {
  background: var(--glass-strong); border: 1px solid var(--glass-edge);
  border-radius: var(--r-card); box-shadow: var(--e-2); padding: 26px;
}

/* Flash messages */
.flash-wrap { display: flex; flex-direction: column; gap: 8px; margin-bottom: 18px; }
.flash { padding: 12px 16px; border-radius: var(--r-ctrl); font-size: 0.9rem; border: 1px solid transparent; }
.flash--info    { background: rgba(224,248,235,0.85); color: #0d7a3e; border-color: rgba(160,220,185,0.6); }
/* 'success' is flashed from Python (e.g. Reddit connect) but had no rule, so it
   rendered as a bare transparent box. Give it the same green treatment as info. */
.flash--success { background: rgba(224,248,235,0.85); color: #0d7a3e; border-color: rgba(160,220,185,0.6); }
.flash--error   { background: rgba(253,232,232,0.85); color: #b53434; border-color: rgba(240,180,180,0.6); }

/* Login */
.auth-card { max-width: 420px; margin: 24px auto; text-align: center; }
.auth-title { font-size: 1.5rem; font-weight: 700; margin-bottom: 6px; }
.auth-sub { color: var(--ink-2); font-size: 0.9rem; margin-bottom: 22px; }
.oauth-btn {
  display: flex; align-items: center; justify-content: center; gap: 10px;
  width: 100%; padding: 13px 16px; margin-bottom: 10px; border-radius: var(--r-ctrl);
  font: inherit; font-size: 0.92rem; font-weight: 600; text-decoration: none;
  border: 1px solid var(--glass-line); background: #fff; color: var(--ink);
  transition: transform var(--t), box-shadow var(--t); box-shadow: var(--e-1);
}
.oauth-btn:hover { transform: translateY(-1px); box-shadow: var(--e-2); }
/* Facebook's own blue puts white text at 4.23:1; a shade down clears AA. */
.oauth-btn--facebook { background: #1770e8; color: #fff; border-color: transparent; }
.oauth-btn--apple { background: #000; color: #fff; border-color: transparent; }
.oauth-ico { font-weight: 800; width: 18px; text-align: center; }
.oauth-form { margin: 0; }

/* Clickwrap Terms/Privacy consent on the login page. */
.auth-consent { margin: 4px 0 16px; }
.auth-consent-label {
  display: flex; align-items: flex-start; gap: 10px;
  font-size: 0.86rem; line-height: 1.4; color: var(--ink-2); cursor: pointer;
}
.auth-consent-check { margin-top: 2px; width: 16px; height: 16px; flex: 0 0 auto; cursor: pointer; }
.auth-consent-label a { color: var(--ink); text-decoration: underline; }
.auth-consent-hint { margin: 8px 0 0; font-size: 0.82rem; color: var(--danger, #c0392b); }
/* Sign-in controls stay clickable (so a click can surface the hint) but read as
   inactive until the box is ticked. */
.oauth-btn.is-disabled,
.acct-btn.is-disabled { opacity: 0.45; cursor: not-allowed; box-shadow: none; }
.oauth-btn.is-disabled:hover { transform: none; box-shadow: none; }
.auth-divider { display: flex; align-items: center; gap: 12px; color: var(--ink-3); font-size: 0.8rem; margin: 18px 0; }
.auth-divider::before, .auth-divider::after { content: ''; flex: 1; height: 1px; background: var(--glass-line); }
.magic-form { text-align: left; }
.magic-label { display: block; font-size: 0.82rem; font-weight: 600; color: var(--ink-2); margin-bottom: 8px; }
.magic-row { display: flex; gap: 8px; }
.magic-input {
  flex: 1; padding: 12px 14px; border-radius: var(--r-ctrl); border: 1px solid var(--glass-edge);
  font: inherit; font-size: 0.9rem; outline: none; background: rgba(255,255,255,0.7);
}
.magic-input:focus { border-color: rgba(226,55,68,0.5); box-shadow: 0 0 0 3px var(--accent-soft); }
.magic-hint { font-size: 0.76rem; color: var(--ink-3); margin-top: 8px; }
.auth-legal { font-size: 0.75rem; color: var(--ink-3); margin-top: 20px; }

/* Dashboard */
.dash-head { margin-bottom: 22px; }
.dash-title { font-size: 1.7rem; font-weight: 700; }
.dash-sub { color: var(--ink-2); font-size: 0.92rem; margin-top: 4px; }
.pill { display: inline-block; font-size: 0.7rem; font-weight: 600; padding: 2px 9px; border-radius: var(--r-pill);
  background: var(--accent-soft); color: var(--accent-ink); margin-left: 6px; }
.pill--admin { background: rgba(226,55,68,0.16); color: #ad1520; }
/* ADA-friendly high-contrast amber-yellow (dark text on solid yellow, >10:1). */
.pill--mod { background: #ffd100; color: #2b2200; }
.dash-section { margin-bottom: 20px; }
.dash-section-hd { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-bottom: 14px; }
.dash-section-hd h2 { font-size: 1.05rem; font-weight: 700; }
.dash-note { font-size: 0.8rem; color: var(--ink-3); }
.dash-empty { color: var(--ink-2); font-size: 0.9rem; }
.dash-mini-title { font-size: 0.86rem; font-weight: 700; margin: 18px 0 8px; color: var(--ink-2); }
.dash-subtitle { font-size: 0.74rem; font-weight: 700; margin: 12px 0 6px; color: var(--ink-3); text-transform: uppercase; letter-spacing: 0.5px; }
.inline-heart { color: var(--accent); font-weight: 600; white-space: nowrap; }
/* This file loads after style.css, so its accent text needs its own dark
   value rather than a place on the shared list there. */
:root[data-theme="dark"] .inline-heart { color: #ff9ba5; }

/* Watchlist: one card per saved search, mirroring the homepage "Latest
   Searches" rail - name, listing count, and lowest price for each size. */
.fav-list { list-style: none; display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: 10px; }
.fav-item { display: flex; align-items: stretch; gap: 6px; padding: 4px; border-radius: var(--r-ctrl); background: rgba(255,255,255,0.5); border: 1px solid var(--glass-line); }
.fav-card { display: flex; align-items: flex-start; gap: 12px; flex: 1; min-width: 0; padding: 8px; border-radius: 10px; text-decoration: none; transition: background var(--t); }
.fav-card:hover { background: rgba(255,255,255,0.7); }
.fav-img { width: 46px; height: 46px; flex-shrink: 0; object-fit: contain; border-radius: 8px; background: #fff; }
.fav-img--ph { display: flex; align-items: center; justify-content: center; font-size: 1.3rem; }
.fav-body { display: flex; flex-direction: column; flex: 1; min-width: 0; }
.fav-name { font-weight: 600; font-size: 0.9rem; color: var(--ink); text-transform: capitalize; overflow-wrap: anywhere; }
.fav-card:hover .fav-name { color: var(--accent); }
.fav-meta { display: block; font-size: 0.74rem; color: var(--ink-3); margin-top: 2px; }
.fav-stale { font-style: italic; }
.fav-age { font-size: 0.68rem; color: var(--ink-3); opacity: 0.85; margin-top: 4px; }
.fav-sizes { display: flex; flex-direction: column; gap: 3px; margin-top: 6px; }
.fav-size { display: flex; gap: 8px; font-size: 0.78rem; }
.fav-size-ml { color: var(--ink-2); font-weight: 700; min-width: 42px; flex-shrink: 0; }
.fav-size-prices { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.fav-remove { border: none; background: transparent; color: var(--ink-3); font-size: 1rem; cursor: pointer; padding: 6px; border-radius: 8px; align-self: flex-start; }
.fav-remove:hover { background: rgba(229,72,77,0.12); color: var(--danger); }

.dash-danger .danger-btn, .danger-btn {
  border: 1px solid rgba(229,72,77,0.4); background: rgba(229,72,77,0.08); color: #b02a2f;
  border-radius: var(--r-ctrl); padding: 10px 18px; font: inherit; font-weight: 600; font-size: 0.88rem; cursor: pointer;
  transition: background var(--t);
}
.danger-btn:hover { background: rgba(229,72,77,0.16); }
.danger-btn--sm { padding: 6px 12px; font-size: 0.78rem; }

/* Admin */
.dash-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 14px; margin-bottom: 20px; }
.stat-card { display: flex; flex-direction: column; gap: 4px; padding: 18px; }
.stat-card--wide { grid-column: 1 / -1; }
.stat-num { font-size: 1.8rem; font-weight: 700; letter-spacing: -0.5px; }
.stat-lbl { font-size: 0.74rem; font-weight: 600; text-transform: uppercase; letter-spacing: 0.6px; color: var(--ink-3); }
.stat-proxy { font-size: 0.82rem; color: var(--ink-2); word-break: break-word; }
.table-scroll { overflow-x: auto; -webkit-overflow-scrolling: touch; }
.admin-table { width: 100%; border-collapse: collapse; font-size: 0.85rem; }
.admin-table th { text-align: left; font-size: 0.72rem; text-transform: uppercase; letter-spacing: 0.5px; color: var(--ink-3); padding: 6px 10px; border-bottom: 1px solid var(--glass-line); }
.admin-table td { padding: 9px 10px; border-bottom: 1px solid var(--glass-line); color: var(--ink); }
.admin-table a { color: var(--accent); text-decoration: none; }
.admin-table code { white-space: normal; overflow-wrap: anywhere; }
/* html and body are overflow-x: clip, so a table wider than the viewport is
   cut off rather than scrollable -- the legal pages' tables lost their last
   column on a phone. Tighter cells and a break anywhere keep them in. */
@media (max-width: 600px) {
  .admin-table { font-size: 0.8rem; }
  .admin-table th, .admin-table td { padding: 8px 6px; overflow-wrap: anywhere; }
}
.mini-btn { display: inline-block; font-size: 0.74rem; font-weight: 600; padding: 4px 10px; border-radius: 8px; border: 1px solid var(--glass-edge); background: var(--glass); color: var(--ink-2); cursor: pointer; text-decoration: none; margin-right: 4px; }
.mini-btn:hover { border-color: rgba(226,55,68,0.4); color: var(--accent); }
.mini-btn--danger:hover { border-color: rgba(229,72,77,0.4); color: var(--danger); }
.mini-btn--warn:hover { border-color: rgba(214,138,20,0.5); color: #b8730a; }

/* ── Nav: Messages / Alerts unread badge (corner superscript) ─────────────── */
.acct-link--msg, .acct-link--notif { position: relative; }

/* Icon action cluster (Alerts / Messages / Admin) - kept together and set off
   from the text links so the icons read as a group, not a lone stray glyph. */
.acct-tools { display: flex; align-items: center; gap: 2px; }
.acct-link--icon {
  display: inline-flex; align-items: center; justify-content: center;
  width: 36px; height: 36px; padding: 8px; box-sizing: border-box;
}
.acct-icon { display: block; }

.nav-badge {
  position: absolute; top: 0; right: 1px;
  display: inline-flex; align-items: center; justify-content: center;
  min-width: 16px; height: 16px; padding: 0 4px;
  border-radius: 8px; background: var(--danger, #e5484d); color: #fff;
  font-size: 0.62rem; font-weight: 700; line-height: 1;
  box-shadow: 0 0 0 2px #351319;
}

/* ── Alerts popover (top-right dropdown) ──────────────────────────────────── */
.notif-pop {
  position: fixed; top: 68px; right: 24px; z-index: 60;
  width: 360px; max-width: calc(100vw - 32px);
  max-height: min(70vh, 520px); display: flex; flex-direction: column;
  background: var(--panel, #fff); color: var(--ink);
  -webkit-backdrop-filter: saturate(160%) blur(20px);
  backdrop-filter: saturate(160%) blur(20px);
  border: 1px solid var(--glass-line); border-radius: var(--r-ctrl);
  box-shadow: 0 18px 48px rgba(17,17,34,0.22), 0 2px 8px rgba(17,17,34,0.08);
  overflow: hidden;
  animation: notif-pop-in 0.16s ease-out;
}
@keyframes notif-pop-in {
  from { opacity: 0; transform: translateY(-8px); }
  to   { opacity: 1; transform: translateY(0); }
}
.notif-pop-head {
  display: flex; align-items: center; gap: 10px;
  padding: 12px var(--s4); border-bottom: 1px solid var(--glass-line);
}
.notif-pop-title { font-weight: 700; font-size: 0.95rem; color: var(--ink); }
.notif-pop-all { margin-left: auto; font-size: 0.8rem; color: var(--accent); text-decoration: none; }
.notif-pop-all:hover { text-decoration: underline; }
.notif-pop-close {
  border: none; background: transparent; color: var(--ink-3); cursor: pointer;
  font-size: 1.25rem; line-height: 1; padding: 0 2px; border-radius: 6px;
  transition: color var(--t), background var(--t);
}
.notif-pop-close:hover { color: var(--ink); background: var(--glass-hi); }
.notif-pop-body { overflow-y: auto; padding: var(--s3); }
.notif-pop-msg { margin: 0; padding: var(--s4); text-align: center; color: var(--ink-3); font-size: 0.88rem; }

/* Compact notification rows inside the popover */
.notif-pop .notif-list { list-style: none; margin: 0; padding: 0; }
.notif-pop .notif {
  display: flex; align-items: stretch;
  border-radius: var(--r-ctrl); margin-bottom: var(--s2); overflow: hidden;
  border: 1px solid var(--glass-line); background: var(--glass);
}
.notif-pop .notif:last-child { margin-bottom: 0; }
.notif-pop .notif--unread { border-left: 3px solid var(--accent); background: var(--accent-soft); }
.notif-pop .notif-link { flex: 1 1 auto; display: flex; align-items: flex-start; gap: 10px; padding: 10px 12px; text-decoration: none; color: var(--ink); min-width: 0; }
.notif-pop .notif-link:hover { background: var(--glass-hi); }
.notif-pop .notif-dismiss {
  flex: none; width: 34px; align-self: stretch;
  border: none; border-left: 1px solid var(--glass-line);
  background: none; cursor: pointer; color: var(--ink-3);
  font-size: 18px; line-height: 1;
  transition: color var(--t), background var(--t);
}
.notif-pop .notif-dismiss:hover { color: var(--ink); background: var(--glass-hi); }
.notif-pop .notif-dismiss:disabled { opacity: .5; cursor: default; }
.notif-pop .notif-actions { display: flex; justify-content: flex-end; margin-bottom: var(--s2); }
.notif-pop .notif-clear {
  border: 1px solid var(--glass-line); background: var(--glass); color: var(--ink-2);
  border-radius: var(--r-ctrl); padding: 3px 10px; font-size: 12px; cursor: pointer;
  transition: color var(--t), background var(--t), border-color var(--t);
}
.notif-pop .notif-clear:hover { color: var(--ink); background: var(--glass-hi); }
.notif-pop .notif-clear:disabled { opacity: .5; cursor: default; }
.notif-pop .notif-av { margin-top: 1px; }
.notif-pop .notif-body { flex: 1; min-width: 0; }
.notif-pop .notif-text { display: block; font-size: 13px; }
.notif-pop .notif-text strong { color: var(--ink); }
.notif-pop .notif-snippet {
  display: block; font-size: 12px; color: var(--ink-2); margin-top: 3px;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.notif-pop .notif-time { display: block; font-size: 11px; color: var(--ink-3); margin-top: 3px; }
.notif-pop .notif-empty { margin: 0; padding: 0; border: none; background: transparent; }
.notif-pop .forum-empty { margin: 0; padding: var(--s4) var(--s2); text-align: center; color: var(--ink-3); font-size: 0.86rem; }

/* Dark-mode --panel is only 62% opaque; with the backdrop blur that still lets
   content bleed through, so use a near-solid tint for the alerts/messages pop. */
:root[data-theme="dark"] .notif-pop { background: rgba(30,29,41,0.94); }

@media (max-width: 560px) {
  .notif-pop { top: 60px; right: 8px; left: 8px; width: auto; }
}

/* ── Messages popover ─────────────────────────────────────────────────────────
   Reuses the alerts-popover shell (.notif-pop) but drops in the live inbox. The
   inbox normally lays out as two side-by-side columns; here it stacks into one
   narrow column (conversation list above, thread below) to fit the dropdown.
   NB: every rule is scoped under `.msg-pop` so it out-specifies the base
   `.msg-pane` / `.dm-*` rules (which appear later in this file) - otherwise the
   pane stays display:grid and the thread gets squeezed into a sliver. */
.msg-pop { width: 400px; max-height: min(80vh, 640px); }
.msg-pop .msg-pop-body { flex: 1 1 auto; min-height: 0; padding: 0; overflow: hidden;
  display: flex; flex-direction: column; }
/* Stack the two columns and let the whole chain shrink so nothing (esp. the
   composer at the very bottom of the thread) gets clipped on short windows. */
.msg-pop .msg-pane--pop { display: flex; flex-direction: column;
  grid-template-columns: none; flex: 1 1 auto; min-height: 0; }
.msg-pop .dm-list-col { flex: 0 0 auto; max-height: 190px; border-right: none;
  border-bottom: 1px solid var(--glass-line); }
.msg-pop .dm-thread-col { flex: 1 1 auto; min-height: 0; }
.msg-pop .dm-thread { flex: 1 1 auto; min-height: 0; }
.msg-pop .dm-messages { flex: 1 1 auto; min-height: 0; max-height: none; }
/* The forum popover uses the longer image-link placeholder. Give it room for
   two wrapped lines while empty, including when JS focuses it. Once the
   user types, the normal one-line auto-growing composer takes over. */
.msg-pop .dm-send-input:placeholder-shown { min-height: 64px; }
@media (max-width: 560px) {
  .msg-pop { top: 60px; right: 8px; left: 8px; width: auto; max-height: min(82vh, 620px); }
}

/* ── Admin: tabbed sections ───────────────────────────────────────────────── */
.admin-tabs { display: flex; flex-wrap: wrap; gap: 4px; margin-bottom: 18px; border-bottom: 1px solid var(--glass-line); }
.admin-tab {
  position: relative; border: none; background: transparent; color: var(--ink-2);
  font: inherit; font-size: 0.9rem; font-weight: 600; padding: 10px 16px; cursor: pointer;
  border-radius: 10px 10px 0 0; display: inline-flex; align-items: center; gap: 7px;
  transition: color var(--t), background var(--t);
}
.admin-tab:hover { color: var(--accent); background: var(--accent-soft); }
.admin-tab.active { color: var(--accent); }
:root[data-theme="dark"] .admin-tab.active { color: #ff9ba5; }
.admin-tab.active::after {
  content: ''; position: absolute; left: 12px; right: 12px; bottom: -1px; height: 2px;
  background: var(--accent); border-radius: 2px;
}
.admin-tab .badge-unread { font-size: 0.62rem; padding: 1px 6px; }
.admin-tab-link {
  position: relative; display: inline-flex; align-items: center; gap: 7px;
  padding: 10px 16px; border-radius: 10px 10px 0 0; color: var(--accent);
  background: var(--accent-soft); font-size: .9rem; font-weight: 700;
  text-decoration: none;
}
.admin-tab-link:hover { background: rgba(226,55,68,.16); }

/* The admin console has enough destinations to need a small information
   architecture of its own. Keep the compact underline tabs on the member
   dashboard, but present admin destinations as grouped, touch-friendly
   controls so unrelated tools no longer compete in one crowded row. */
.admin-nav {
  display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px;
  margin-bottom: 20px;
}
.admin-nav-group {
  min-width: 0; padding: 14px; border: 1px solid var(--glass-line);
  border-radius: var(--r-card); background: var(--glass);
  box-shadow: var(--e-1);
}
.admin-nav-heading {
  display: flex; align-items: baseline; justify-content: space-between; gap: 8px;
  margin-bottom: 11px; padding: 0 2px 10px; border-bottom: 1px solid var(--glass-line);
}
.admin-nav-title {
  display: inline-flex; align-items: center; gap: 7px; color: var(--ink);
  font-size: .82rem; font-weight: 800; letter-spacing: .04em; text-transform: uppercase;
}
.admin-nav-title::before {
  content: ''; width: 8px; height: 8px; flex: 0 0 auto; border-radius: 50%;
  background: var(--accent); box-shadow: 0 0 0 4px var(--accent-soft);
}
.admin-nav-group--content .admin-nav-title::before { background: var(--gold); box-shadow: 0 0 0 4px rgba(224,179,74,.16); }
.admin-nav-group--operations .admin-nav-title::before { background: var(--success); box-shadow: 0 0 0 4px rgba(31,157,85,.14); }
.admin-nav-note { color: var(--ink-3); font-size: .7rem; text-align: right; }
.admin-nav-actions { display: flex; flex-wrap: wrap; gap: 7px; }
.admin-nav .admin-tab,
.admin-nav .admin-tab-link {
  position: relative; display: inline-flex; flex: 1 1 auto; align-items: center;
  justify-content: center; min-height: 38px; margin: 0; padding: 8px 11px;
  border: 1px solid var(--glass-edge); border-radius: 10px; background: var(--glass-strong);
  color: var(--ink-2); font: inherit; font-size: .79rem; font-weight: 700;
  line-height: 1.2; text-align: center; text-decoration: none; cursor: pointer;
  box-shadow: none; transition: color var(--t), border-color var(--t), background var(--t), transform var(--t), box-shadow var(--t);
}
.admin-nav .admin-tab:hover,
.admin-nav .admin-tab-link:hover {
  color: var(--accent); border-color: rgba(226,55,68,.45); background: var(--accent-soft);
  transform: translateY(-1px);
}
.admin-nav .admin-tab.active {
  color: #fff; border-color: transparent;
  background: linear-gradient(135deg, var(--accent-2), var(--accent));
  box-shadow: 0 5px 14px var(--accent-glow);
}
.admin-nav .admin-tab.active::after { display: none; }
.admin-nav .admin-tab.active .badge-unread { background: #fff; color: var(--accent); }
.admin-nav .admin-tab .badge-unread,
.admin-nav .admin-tab-link .badge-unread { margin-left: 1px; }

@media (max-width: 900px) {
  .admin-nav { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .admin-nav-group--operations { grid-column: 1 / -1; }
}
@media (max-width: 620px) {
  .admin-nav { grid-template-columns: 1fr; }
  .admin-nav-group--operations { grid-column: auto; }
  .admin-nav-heading { align-items: flex-start; flex-direction: column; gap: 3px; }
  .admin-nav-note { text-align: left; }
  .admin-nav .admin-tab, .admin-nav .admin-tab-link { flex-basis: calc(50% - 4px); }
}
@media (max-width: 380px) {
  .admin-nav .admin-tab, .admin-nav .admin-tab-link { flex-basis: 100%; }
}
/* Ensure a hidden panel stays hidden even when it sets its own display
   (e.g. .msg-pane uses display:grid, which would otherwise beat [hidden]). */
.admin-panel[hidden] { display: none !important; }
.scraper-recent-failures { margin-top: 22px; scroll-margin-top: 84px; }
.scraper-recent-failures:focus { outline: none; }

.admin-pagination {
  display: flex; align-items: center; justify-content: space-between; gap: 12px;
  margin-top: 16px; padding-top: 14px; border-top: 1px solid var(--glass-line);
}
.admin-pagination__summary { color: var(--ink-3); font-size: .8rem; white-space: nowrap; }
.admin-pagination__links { display: flex; align-items: center; justify-content: flex-end; gap: 5px; flex-wrap: wrap; }
.admin-page-link {
  display: inline-flex; align-items: center; justify-content: center; min-width: 32px; height: 32px;
  padding: 0 8px; border: 1px solid var(--glass-line); border-radius: 8px;
  background: var(--glass); color: var(--ink-2); font-size: .82rem; font-weight: 600;
  text-decoration: none; box-sizing: border-box;
}
.admin-page-link:hover { border-color: var(--accent); color: var(--accent); }
.admin-page-link.is-current { background: var(--accent); border-color: var(--accent); color: #fff; }
.admin-page-gap { color: var(--ink-3); padding: 0 3px; }

@media (max-width: 620px) {
  .admin-pagination { align-items: flex-start; flex-direction: column; }
  .admin-pagination__links { justify-content: flex-start; }
}

/* Admin email studio */
.email-mode-tabs { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:10px; margin:0 0 18px; }
.email-mode-tab { text-align:left; padding:14px 16px; border:1px solid var(--glass-line); border-radius:11px; background:var(--glass); color:var(--ink); font:inherit; font-weight:700; cursor:pointer; }
.email-mode-tab span { display:block; margin-top:3px; color:var(--ink-3); font-size:.75rem; font-weight:400; }
.email-mode-tab.is-active { border-color:var(--accent); box-shadow:inset 3px 0 var(--accent); }
[data-email-mode-panel][hidden] { display:none !important; }
.email-template-bar { display:flex; gap:10px; overflow-x:auto; padding:4px 0 16px; }
.email-template { min-width:170px; text-align:left; border:1px solid var(--glass-line); border-radius:10px; padding:11px 13px; background:var(--glass); color:var(--ink); cursor:pointer; text-decoration:none; box-sizing:border-box; }
.email-template:hover { border-color:var(--accent); }
.email-template span { display:block; color:var(--ink-3); font-size:.75rem; margin-top:3px; }
.email-template--saved { border-style:dashed; }
.email-workspace { display:grid; grid-template-columns:150px minmax(360px,1fr) minmax(240px,.72fr); gap:16px; align-items:start; }
.email-palette,.email-preview { border:1px solid var(--glass-line); border-radius:12px; padding:14px; background:rgba(255,255,255,.16); }
.email-palette h3,.email-preview h3,.email-history h3 { margin:0 0 8px; font-size:.9rem; }
.email-block-tool { display:block; width:100%; margin:7px 0; padding:9px; border:1px solid var(--glass-line); border-radius:8px; background:var(--glass); color:var(--ink); cursor:grab; text-align:left; }
.email-fields { display:grid; grid-template-columns:.8fr 1.2fr .8fr; gap:10px; }
.email-preheader-field { grid-column:1/-1; }
.email-fields label { font-size:.75rem; font-weight:600; }
.email-fields .modal-input { display:block; width:100%; margin-top:4px; box-sizing:border-box; }
.email-audience-count { margin:8px 0; font-size:.78rem; color:var(--ink-3); }
.email-canvas { min-height:320px; padding:14px; border:2px dashed var(--glass-line); border-radius:12px; background:#fff; color:#242424; }
.email-canvas--mobile { max-width:390px; margin-left:auto; margin-right:auto; }
.email-canvas.is-over { border-color:var(--accent); background:#fff8f8; }
.email-drop-hint { text-align:center; color:#888; padding:110px 10px; margin:0; }
.email-editor-block { position:relative; border:1px solid #e4e4e4; padding:12px 40px 12px 12px; margin:7px 0; border-radius:8px; background:#fff; cursor:grab; }
.email-editor-block:hover { border-color:#aaa; }
.email-editor-block.is-selected { outline:2px solid var(--accent); outline-offset:2px; box-shadow:0 5px 18px rgba(0,0,0,.08); }
.email-editor-block.dragging { opacity:.45; }
.email-editor-block input,.email-editor-block textarea { width:100%; box-sizing:border-box; border:1px solid transparent; border-radius:6px; padding:8px; font:inherit; resize:vertical; background:transparent; color:inherit; }
.email-editor-block input:hover,.email-editor-block textarea:hover,.email-editor-block input:focus,.email-editor-block textarea:focus { border-color:#ccc; outline:none; background:rgba(255,255,255,.45); }
.email-editor-block--heading input { font-weight:750; line-height:1.2; }
.email-inline-content { min-height:1.25em; outline:none; cursor:text; white-space:pre-wrap; }
.email-inline-content--text { line-height:1.65; }
.email-inline-button { display:inline-block; min-width:80px; padding:12px 20px; font-weight:700; outline:none; cursor:text; }
.email-secondary-field { display:block; width:min(100%,420px) !important; margin:10px auto 0; border:1px dashed #bbb !important; background:rgba(255,255,255,.9) !important; font-size:.75rem !important; color:#555 !important; }
.email-image-stage { min-height:100px; display:grid; place-items:center; border:1px dashed #ccc; color:#6b6b7a; overflow:hidden; }
.email-image-stage img { display:block; max-width:100%; height:auto; }
.email-product-edit,.email-product-preview { display:flex; align-items:center; gap:18px; text-align:left; }
.email-product-edit>img,.email-product-preview>img,.email-product-placeholder { width:140px; max-width:35%; border-radius:10px; object-fit:cover; }
.email-product-placeholder { min-height:120px; display:grid; place-items:center; background:#f1f1f1; color:#6b6b7a; font-size:.75rem; }
.email-product-edit>div,.email-product-preview>span { flex:1; min-width:0; }
.email-product-edit .email-inline-content,.email-product-preview strong,.email-product-preview b,.email-product-preview a { display:block; margin:5px 0; }
.email-social-edit { text-align:center; }
.email-social-edit .email-secondary-field { display:inline-block; width:30% !important; margin:10px 1% 0; }
.email-editor-block .block-url { margin-top:6px; font-size:.8rem; }
.email-editor-block .block-remove { position:absolute; right:8px; top:8px; border:0; background:#f4f4f4; border-radius:50%; width:25px; height:25px; cursor:pointer; }
.email-actions { display:flex; justify-content:flex-end; gap:8px; margin-top:12px; }
.email-preview { background:#f5f5f5; min-height:360px; }
.email-builder-toolbar { display:flex; align-items:center; justify-content:space-between; gap:8px; flex-wrap:wrap; margin:8px 0; padding:7px; border:1px solid var(--glass-line); border-radius:9px; }
.email-toolbar-group { display:flex; gap:4px; }
.email-builder-toolbar .is-active { color:#fff; background:var(--accent); border-color:var(--accent); }
.email-preview-name { margin-left:auto; font-size:.75rem; color:var(--ink-3); }
.email-preview-name input { width:90px; margin-left:4px; padding:5px 7px; border:1px solid var(--glass-line); border-radius:6px; }
.email-inspector { background:var(--glass); border:1px solid var(--glass-line); padding:12px; border-radius:9px; margin-bottom:14px; }
#emailInspectorFields { display:grid; grid-template-columns:1fr 1fr; gap:9px; }
#emailInspectorFields label { display:flex; flex-direction:column; gap:4px; font-size:.72rem; font-weight:600; }
#emailInspectorFields select { padding:6px; border:1px solid var(--glass-line); border-radius:6px; }
#emailInspectorFields input[type=color] { width:100%; height:31px; border:0; background:transparent; }
#emailInspectorFields output { font-weight:400; color:var(--ink-3); }
.email-inspector-actions { grid-column:1/-1; display:flex; flex-wrap:wrap; gap:5px; }
.email-inbox-preview { display:flex; gap:5px; white-space:nowrap; overflow:hidden; padding:9px 10px; margin-bottom:8px; border:1px solid #ddd; border-radius:7px; background:white; color:#333; font:12px Arial,sans-serif; }
.email-inbox-preview span { overflow:hidden; text-overflow:ellipsis; color:#777; }
#emailPreviewBody { background:#fff; border-radius:9px; padding:22px; font-family:Arial,sans-serif; color:#333; overflow-wrap:anywhere; }
.email-preview-body--mobile { width:320px; max-width:100%; margin:auto; box-sizing:border-box; }
#emailPreviewBody h1 { font-size:25px; }
#emailPreviewBody img { max-width:100%; height:auto; }
.email-history { display:flex; flex-direction:column; gap:5px; margin-top:20px; padding-top:15px; border-top:1px solid var(--glass-line); font-size:.78rem; }
.email-automation-head,.email-automation-card { display:flex; align-items:center; justify-content:space-between; gap:14px; }
.email-automation-head h3 { margin-bottom:3px; }
.email-automation-form { display:grid; grid-template-columns:1fr 1fr 1fr 1fr; gap:12px; margin:16px 0; padding:16px; border:1px solid var(--glass-line); border-radius:12px; background:var(--glass); }
.email-automation-form>label { font-size:.75rem; font-weight:600; }
.email-automation-form .modal-input { display:block; width:100%; box-sizing:border-box; margin-top:4px; }
.email-automation-form .email-actions,.email-automation-form .modal-err { grid-column:1/-1; }
.email-automation-list { display:flex; flex-direction:column; gap:10px; margin-top:14px; }
.email-automation-card { padding:15px; border:1px solid var(--glass-line); border-radius:11px; background:rgba(255,255,255,.15); }
.email-automation-card h4 { display:inline-block; margin:0 0 3px 8px; }
.email-automation-card p { margin:3px 0; }
.email-automation-actions { display:flex; align-items:center; gap:10px; }
@media (max-width:1050px) { .email-workspace { grid-template-columns:130px 1fr; } .email-preview { grid-column:1/-1; } }
@media (max-width:680px) { .email-mode-tabs { grid-template-columns:1fr; }.email-workspace { display:block; } .email-palette { display:flex; flex-wrap:wrap; gap:6px; margin-bottom:12px; } .email-palette h3,.email-palette p { width:100%; } .email-block-tool { width:auto; margin:0; } .email-fields,.email-automation-form { grid-template-columns:1fr; } .email-preview { margin-top:12px; } .email-automation-card { align-items:flex-start; flex-direction:column; } }

/* Admin: ad manager */
.ad-admin-form {
  display: flex;
  flex-direction: column;
  gap: 10px;
  padding: 12px;
  border: 1px solid var(--glass-line);
  border-radius: 10px;
  background: rgba(255,255,255,0.24);
}
.ad-form-grid {
  display: grid;
  grid-template-columns: minmax(0, 1.2fr) minmax(0, 1fr) minmax(0, 1fr) minmax(0, 0.7fr);
  gap: 10px;
}
.ad-form-grid--wide { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.ad-form-grid > *,
.ad-admin-form > *,
#adsPanel .msg-actions > * { min-width: 0; }
/* Affiliate settings block (inside the Ads panel). */
.dash-mini-title--sm { font-size: 0.8rem; margin: 16px 0 8px; }
.aff-universal {
  padding: 10px 12px;
  border: 1px solid var(--glass-line);
  border-radius: 10px;
  background: rgba(255,255,255,0.16);
}
.aff-table td { vertical-align: top; }
.aff-table .aff-net { min-width: 190px; }
.aff-params { display: flex; flex-direction: column; gap: 8px; min-width: 240px; }
.aff-param-group { display: flex; flex-direction: column; gap: 6px; }
.aff-param-lbl { font-size: 0.78rem; }
.aff-param-lbl .modal-input { margin-top: 3px; }

/* Ads is a wide configuration surface. The shared proxy layout is intentionally
   narrow elsewhere, but it made affiliate credentials cramped and forced the
   low-contrast glass rows to overlap visually. */
#adsPanel .proxy-grid,
#adsPanel .ad-affiliate-form { width: 100%; max-width: none; box-sizing: border-box; }
#adsPanel,
#adsPanel .proxy-grid,
#adsPanel .ad-admin-form,
#adsPanel .table-scroll { min-width: 0; max-width: 100%; }
#adsPanel .table-scroll { overflow-x: auto; overflow-y: hidden; }
#adsPanel .ad-admin-form,
#adsPanel .ad-admin-preview {
  background: var(--surface, #fff);
  border-color: var(--glass-edge);
  color: var(--ink);
  box-shadow: 0 8px 24px rgba(18, 22, 38, 0.08);
}
#adsPanel .ad-admin-form .dash-note,
#adsPanel .ad-admin-form .proxy-hint,
#adsPanel .ad-admin-form .modal-label { color: var(--ink-2); }
#adsPanel .ad-admin-form .modal-input {
  display: block;
  width: 100%;
  max-width: 100%;
  min-width: 0;
  background: var(--surface, #fff);
  border-color: var(--glass-edge);
  color: var(--ink);
  box-sizing: border-box;
}
#adsPanel .ad-admin-form .modal-input:focus-visible {
  outline: 3px solid color-mix(in srgb, var(--accent) 32%, transparent);
  outline-offset: 2px;
  border-color: var(--accent);
}
#adsPanel .ad-admin-form .msg-actions {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 10px;
}
.ad-affiliate-form .aff-universal {
  background: var(--glass-strong, rgba(255,255,255,0.78));
  border-color: var(--glass-edge);
}
.ad-affiliate-form .table-scroll { width: 100%; }
.aff-table { table-layout: fixed; width: 100%; min-width: 0; }
.aff-table th {
  color: var(--ink-2);
  background: var(--glass-strong, rgba(255,255,255,0.78));
}
.aff-table th:nth-child(1) { width: 30%; }
.aff-table th:nth-child(2) { width: 70%; }
.aff-table td {
  color: var(--ink);
  background: var(--surface, #fff);
  border-bottom-color: var(--glass-edge);
}
.aff-table tbody tr:nth-child(even) td { background: var(--glass-strong, rgba(245,246,250,0.92)); }
.aff-table .dash-note { color: var(--ink-2); line-height: 1.45; }
.aff-table .modal-input {
  background: var(--surface, #fff);
  border-color: var(--glass-edge);
  color: var(--ink);
}
.aff-table td,
.aff-table .aff-param-group,
.aff-table .aff-param-lbl { overflow-wrap: anywhere; }
.aff-table td { min-width: 0; overflow: hidden; }
.aff-table .aff-param-group[hidden] { display: none; }
.aff-config-cell {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  width: 100%;
  max-width: 100%;
  min-width: 0;
  align-items: start;
  gap: 10px;
}
.aff-config-cell > .aff-net {
  grid-column: 1;
  width: min(100%, 360px);
  min-width: 0;
}
.aff-config-cell > .aff-params {
  grid-column: 1;
  width: 100%;
  min-width: 0;
}
.aff-config-cell input,
.aff-config-cell select { max-width: 100%; min-width: 0; box-sizing: border-box; }
.aff-config-cell .aff-param-lbl { margin: 0; }
.aff-table .modal-input:focus-visible {
  outline: 3px solid color-mix(in srgb, var(--accent) 32%, transparent);
  outline-offset: 2px;
  border-color: var(--accent);
}
.ad-active-check {
  align-self: end;
  min-height: 39px;
  margin: 0;
}
.ad-admin-preview { width: 100%; max-width: none; box-sizing: border-box; }
.ad-admin-table td { vertical-align: top; }

@media (max-width: 900px) {
  #adsPanel .ad-form-grid,
  #adsPanel .ad-form-grid--wide { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  #adsPanel .ad-active-check { align-self: start; }
  .aff-config-cell > .aff-net { width: 100%; }
}

/* ── Admin: account manager ───────────────────────────────────────────────── */
.acct-search {
  border: 1px solid var(--glass-edge); background: var(--glass); color: var(--ink);
  border-radius: 9px; padding: 7px 12px; font: inherit; font-size: 0.84rem; min-width: 220px;
}
.acct-search:focus { outline: none; border-color: rgba(226,55,68,0.5); }
.acct-manager-tools { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; justify-content: flex-end; }
.admin-table--accounts td { vertical-align: middle; }
.acct-user { line-height: 1.3; }
.acct-user-card { display: flex; align-items: center; gap: 10px; min-width: 10rem; }
.acct-avatar-cell { flex-shrink: 0; }
.acct-user-info { display: flex; flex-direction: column; gap: 1px; min-width: 0; }
.acct-name { font-weight: 600; color: var(--ink); }
.acct-handle { font-size: 0.78rem; color: var(--accent); }
.acct-email { font-size: 0.75rem; color: var(--ink-3); }
.acct-meta { font-size: 0.72rem; color: var(--ink-3); }
.acct-user-info .pill { align-self: flex-start; margin-top: 2px; }
.acct-signal-stack { display: flex; flex-direction: column; gap: 2px; min-width: 7rem;
  font-size: 0.75rem; color: var(--ink-2); line-height: 1.35; overflow-wrap: anywhere; }
.acct-signal-stack strong { color: var(--ink); font-weight: 700; }
.acct-warn { color: #9a5b00; font-weight: 700; }
.col-actions { white-space: nowrap; }
.acct-row--banned { background: rgba(229,72,77,0.05); }
.ban-pill { display: inline-block; font-size: 0.7rem; font-weight: 700; padding: 2px 9px;
  border-radius: var(--r-pill); background: rgba(229,72,77,0.14); color: var(--danger, #e5484d); }
.ok-pill { display: inline-block; font-size: 0.7rem; font-weight: 600; padding: 2px 9px;
  border-radius: var(--r-pill); background: rgba(40,170,90,0.13); color: #1f9254; }

/* ── Modals (ban / message) ───────────────────────────────────────────────── */
.modal-backdrop {
  position: fixed; inset: 0; z-index: 9999; display: flex; align-items: center;
  justify-content: center; padding: 20px; background: rgba(10,10,30,0.5); backdrop-filter: blur(3px);
}
.modal-backdrop[hidden] { display: none; }
.modal-card { width: 100%; max-width: 420px; }
.modal-card h3 { font-size: 1.15rem; font-weight: 700; margin-bottom: 4px; }
.modal-sub { font-size: 0.85rem; color: var(--accent); font-weight: 600; margin-bottom: 14px; }
.modal-label { display: block; font-size: 0.78rem; font-weight: 600; color: var(--ink-2); margin: 12px 0 5px; }
.modal-check { display: flex; align-items: center; gap: 8px; margin: 6px 0 10px;
  font-size: 0.8rem; color: var(--ink-2); }
.modal-opt { font-weight: 400; color: var(--ink-3); }
.modal-req { font-weight: 600; color: var(--danger, #e5484d); }
.modal-err { color: var(--danger, #e5484d); font-size: 0.8rem; margin-top: 8px; min-height: 0; }
.modal-input {
  width: 100%; border: 1px solid var(--glass-edge); background: var(--glass); color: var(--ink);
  border-radius: 9px; padding: 9px 12px; font: inherit; font-size: 0.88rem; resize: vertical;
}
.modal-input:focus { outline: none; border-color: rgba(226,55,68,0.5); }
.modal-actions { display: flex; justify-content: flex-end; gap: 10px; margin-top: 18px; }
.modal-note { font-size: 0.8rem; color: var(--ink-2); margin: 0 0 12px; line-height: 1.5; }
/* Buy/Sell/Trade editor: three compact number fields side by side. */
.bst-edit-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; }
.bst-edit-grid .modal-label { margin-top: 0; }
.bst-edit-grid .modal-input { margin-top: 4px; }

/* ── Messaging inbox ──────────────────────────────────────────────────────── */
.msg-pane { display: grid; grid-template-columns: 260px 1fr; gap: 0; padding: 0; overflow: hidden; min-height: 460px; }
.dm-list-col { border-right: 1px solid var(--glass-line); display: flex; flex-direction: column; min-height: 0; }
.dm-compose { display: flex; gap: 8px; padding: 14px; border-bottom: 1px solid var(--glass-line); }
.dm-compose-field { position: relative; flex: 1; min-width: 0; }
.dm-to-input { width: 100%; box-sizing: border-box; border: 1px solid var(--glass-edge); background: var(--glass);
  color: var(--ink); border-radius: 9px; padding: 8px 11px; font: inherit; font-size: 0.84rem; }
.dm-to-input:focus { outline: none; border-color: rgba(226,55,68,0.5); }
.dm-compose .acct-btn { padding: 8px 14px; }
.dm-suggest { position: absolute; z-index: 40; top: calc(100% + 4px); left: 0; right: 0;
  list-style: none; margin: 0; padding: 4px; max-height: 260px; overflow-y: auto; overflow-x: hidden;
  background: var(--surface, var(--glass)); border: 1px solid var(--glass-edge);
  border-radius: 10px; box-shadow: 0 12px 32px rgba(0,0,0,0.28); }
.dm-suggest-item { display: flex; align-items: center; gap: 9px; padding: 7px 9px;
  border-radius: 7px; cursor: pointer; min-width: 0; }
.dm-suggest-item.active { background: rgba(226,55,68,0.12); }
.dm-suggest-name { font-size: 0.84rem; color: var(--ink); font-weight: 600; white-space: nowrap;
  flex: 1 1 auto; min-width: 0; overflow: hidden; text-overflow: ellipsis; }
.dm-suggest-real { font-size: 0.76rem; color: var(--ink-3); margin-left: auto; flex: 0 1 auto;
  max-width: 42%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.dm-compose-msg { font-size: 0.76rem; padding: 0 14px; min-height: 0; margin: 0; }
.dm-compose-msg.err { color: var(--danger, #e5484d); padding-top: 6px; }
.dm-list { list-style: none; margin: 0; padding: 0; overflow-y: auto; flex: 1; }
.dm-empty { padding: 18px 14px; color: var(--ink-3); font-size: 0.85rem; }
.dm-conv { position: relative; display: flex; align-items: center; gap: 10px; padding: 12px 14px; border-bottom: 1px solid var(--glass-line); cursor: pointer; transition: background var(--t); }
.dm-conv:hover { background: rgba(226,55,68,0.05); }
/* Per-row "delete conversation" affordance. Faint by default (so it's reachable
   on touch too) and lifts to full accent on hover/focus of the row. */
.dm-conv-del { position: absolute; top: 50%; right: 6px; transform: translateY(-50%); display: inline-flex;
  align-items: center; justify-content: center; width: 22px; height: 22px; padding: 0; border: none;
  border-radius: 50%; background: var(--panel); color: var(--ink-2); font-size: 0.9rem; line-height: 1;
  cursor: pointer; opacity: 0; transition: opacity var(--t), background var(--t), color var(--t); }
.dm-conv:hover .dm-conv-del, .dm-conv:focus-within .dm-conv-del, .dm-conv-del:focus-visible { opacity: 0.75; }
.dm-conv-del:hover { opacity: 1; background: rgba(226,55,68,0.12); color: var(--accent); }
@media (hover: none) { .dm-conv-del { opacity: 0.55; } }
.dm-conv.active { background: rgba(226,55,68,0.1); }
.dm-conv-av { flex-shrink: 0; }
.dm-conv-main { flex: 1; min-width: 0; }
.dm-conv-top { display: flex; justify-content: space-between; align-items: baseline; gap: 8px; }
.dm-conv-name { font-weight: 600; font-size: 0.88rem; color: var(--ink); }
.dm-conv.has-unread .dm-conv-name { font-weight: 700; }
.dm-conv-time { font-size: 0.72rem; color: var(--ink-3); flex-shrink: 0; }
.dm-conv-bottom { display: flex; justify-content: space-between; align-items: center; gap: 8px; margin-top: 2px; }
.dm-conv-preview { font-size: 0.8rem; color: var(--ink-3); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.dm-unread { display: inline-flex; align-items: center; justify-content: center; min-width: 18px; height: 18px;
  padding: 0 5px; border-radius: 9px; background: var(--accent); color: #fff; font-size: 0.68rem; font-weight: 700; flex-shrink: 0; }

.dm-thread-col { display: flex; flex-direction: column; min-height: 0; }
.dm-thread-empty { flex: 1; display: flex; align-items: center; justify-content: center; padding: 30px; text-align: center; color: var(--ink-3); font-size: 0.9rem; }
.dm-thread { display: flex; flex-direction: column; min-height: 0; flex: 1; }
.dm-thread-hd { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 14px 18px; border-bottom: 1px solid var(--glass-line); }
.dm-thread-who { display: inline-flex; align-items: center; gap: 9px; font-weight: 700; font-size: 0.95rem; color: var(--ink); text-decoration: none; min-width: 0; }
/* Minimize/close the open chat back to the list. */
.dm-thread-close { flex-shrink: 0; display: inline-flex; align-items: center; justify-content: center;
  width: 30px; height: 30px; padding: 0; border: none; border-radius: 50%; background: transparent;
  color: var(--ink-3); cursor: pointer; transition: background var(--t), color var(--t); }
.dm-thread-close:hover { background: rgba(226,55,68,0.12); color: var(--accent); }
.dm-thread-close:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.dm-thread-name { display: inline-flex; align-items: center; }
.dm-messages { flex: 1; overflow-y: auto; padding: 16px 18px; display: flex; flex-direction: column; gap: 8px; min-height: 200px; max-height: 52vh; }

/* ── Slim, subtle scrollbars for the messaging scroll areas ─────────────────
   Replaces the chunky default bar with a thin, rounded, translucent thumb that
   only shows up when there's overflow, and darkens on hover. */
.dm-messages, .dm-list, .dm-emoji-panel {
  scrollbar-width: thin;                                  /* Firefox */
  scrollbar-color: rgba(17,17,34,0.22) transparent;
}
.dm-messages::-webkit-scrollbar,
.dm-list::-webkit-scrollbar,
.dm-emoji-panel::-webkit-scrollbar { width: 8px; }
.dm-messages::-webkit-scrollbar-track,
.dm-list::-webkit-scrollbar-track,
.dm-emoji-panel::-webkit-scrollbar-track { background: transparent; }
.dm-messages::-webkit-scrollbar-thumb,
.dm-list::-webkit-scrollbar-thumb,
.dm-emoji-panel::-webkit-scrollbar-thumb {
  background: rgba(17,17,34,0.18); border-radius: 999px;
  border: 2px solid transparent; background-clip: padding-box;
}
.dm-messages:hover::-webkit-scrollbar-thumb,
.dm-list:hover::-webkit-scrollbar-thumb,
.dm-emoji-panel:hover::-webkit-scrollbar-thumb { background: rgba(17,17,34,0.32); background-clip: padding-box; }

.dm-msg { display: flex; flex-direction: column; max-width: 78%; }
.dm-msg--mine { align-self: flex-end; align-items: flex-end; }
.dm-msg--theirs { align-self: flex-start; align-items: flex-start; }
.dm-bubble { padding: 9px 13px; border-radius: 14px; font-size: 0.88rem; line-height: 1.4; word-wrap: break-word; white-space: pre-wrap; }
/* Messages I send: muted white. Messages sent to me: a very faint red tint with
   dark text, so red emoji/text stay legible (a solid red bubble hid them). */
.dm-msg--mine .dm-bubble { background: #f4f4f7; border: 1px solid var(--glass-line); color: var(--ink); border-bottom-right-radius: 4px; }
.dm-msg--theirs .dm-bubble { background: rgba(226,55,68,0.08); border: 1px solid rgba(226,55,68,0.22); color: var(--ink); border-bottom-left-radius: 4px; }
.dm-msg--official .dm-bubble { background: rgba(200,150,30,0.12); border: 1px solid rgba(200,150,30,0.3); color: var(--ink); }
.dm-official-tag { font-size: 0.66rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.4px; color: var(--gold-2, #8a5f00); margin-bottom: 2px; }
/* Meta row under each bubble: timestamp, "(edited)" marker, and (on my own
   messages) the Edit / Unsend actions, which stay hidden until hover/focus. */
.dm-msg-meta { display: flex; align-items: center; gap: 8px; margin-top: 2px; }
.dm-msg--mine .dm-msg-meta { flex-direction: row-reverse; }
.dm-msg-time { font-size: 0.68rem; color: var(--ink-3); }
.dm-edited { font-size: 0.66rem; color: var(--ink-3); font-style: italic; }
.dm-act {
  border: none; background: none; padding: 0; cursor: pointer; font: inherit;
  font-size: 0.68rem; font-weight: 600; color: var(--ink-3);
  opacity: 0; transition: opacity 0.12s, color 0.12s;
}
.dm-msg:hover .dm-act, .dm-msg:focus-within .dm-act { opacity: 1; }
.dm-act:hover { color: var(--accent); text-decoration: underline; }
.dm-act-unsend:hover { color: var(--danger, #e5484d); }

/* Inline edit form that replaces the bubble while editing. */
.dm-edit-form { display: flex; flex-direction: column; gap: 6px; width: min(320px, 78vw); }
.dm-edit-input { width: 100%; min-height: 38px; }
.dm-edit-actions { display: flex; gap: 6px; justify-content: flex-end; }
.dm-edit-actions .acct-btn { padding: 5px 12px; font-size: 0.78rem; }

/* Links in bubbles: keep them legible on both the light (mine) and coloured
   (theirs) bubble backgrounds. */
.dm-bubble a { color: inherit; text-decoration: underline; text-underline-offset: 2px; word-break: break-word; }
/* The "theirs" bubble is a faint red tint - use the accent red for links on every
   state so they stay legible (and beat any global anchor colour). */
.dm-msg--theirs .dm-bubble a,
.dm-msg--theirs .dm-bubble a:link,
.dm-msg--theirs .dm-bubble a:visited,
.dm-msg--theirs .dm-bubble a:hover,
.dm-msg--theirs .dm-bubble a:active { color: var(--accent) !important; text-decoration-color: rgba(226,55,68,0.5); }
/* Optimistic states: a just-sent message is dimmed until the server confirms,
   and turns red-tinted if it fails to send. */
.dm-msg--pending .dm-bubble { opacity: 0.55; }
.dm-msg--failed .dm-bubble { background: rgba(229,72,77,0.12); border: 1px solid rgba(229,72,77,0.4); color: var(--danger, #e5484d); }

/* ── Image attachments ────────────────────────────────────────────────────── */
.dm-img-link { display: inline-block; max-width: 240px; border-radius: 14px; overflow: hidden;
  border: 1px solid var(--glass-line); line-height: 0; }
.dm-msg--mine .dm-img-link { border-bottom-right-radius: 4px; }
.dm-msg--theirs .dm-img-link { border-bottom-left-radius: 4px; }
.dm-img { display: block; width: 100%; height: auto; max-height: 320px; object-fit: cover; cursor: zoom-in; }
.dm-img-link--gallery { position: relative; margin: 0 9px 9px 0; overflow: visible;
  box-shadow: 4px 4px 0 var(--surface), 5px 5px 0 var(--glass-line),
    8px 8px 0 var(--surface), 9px 9px 0 var(--glass-line); }
.dm-img-link--gallery .dm-img { border-radius: inherit; }
.dm-img-count { position: absolute; right: 8px; bottom: 8px; padding: 4px 7px;
  border-radius: 999px; background: rgba(12,8,12,0.76); color: #fff;
  font-size: 0.72rem; font-weight: 700; line-height: 1; letter-spacing: 0.01em;
  box-shadow: 0 2px 8px rgba(0,0,0,0.28); pointer-events: none; }
/* A bubble that follows an image gets a little breathing room. */
.dm-img-link + .dm-bubble { margin-top: 4px; }
.dm-msg--pending .dm-img-link { opacity: 0.6; }

/* Full-screen lightbox for viewing a shared image (one shared instance). */
.dm-lightbox { position: fixed; inset: 0; z-index: 200; display: flex; align-items: center; justify-content: center;
  padding: 32px; background: rgba(12,8,12,0.82); -webkit-backdrop-filter: blur(4px); backdrop-filter: blur(4px);
  cursor: zoom-out; animation: dm-lightbox-in 0.14s ease; }
@keyframes dm-lightbox-in { from { opacity: 0; } to { opacity: 1; } }
.dm-lightbox-img { max-width: min(94vw, 1100px); max-height: 90vh; width: auto; height: auto; object-fit: contain;
  border-radius: 12px; box-shadow: 0 24px 70px rgba(0,0,0,0.55); cursor: default; }
.dm-lightbox-close { position: absolute; top: 18px; right: 22px; width: 40px; height: 40px; border-radius: 50%;
  border: none; background: rgba(255,255,255,0.16); color: #fff; font-size: 1.05rem; line-height: 1; cursor: pointer;
  display: inline-flex; align-items: center; justify-content: center; transition: background 0.12s; }
.dm-lightbox-close:hover { background: rgba(255,255,255,0.3); }
.dm-lightbox-nav { position: absolute; top: 50%; transform: translateY(-50%); z-index: 1;
  width: 48px; height: 56px; border: none; border-radius: 14px;
  background: rgba(255,255,255,0.16); color: #fff; font-size: 2.6rem; line-height: 1;
  cursor: pointer; display: inline-flex; align-items: center; justify-content: center;
  transition: background 0.12s; }
.dm-lightbox-nav:hover { background: rgba(255,255,255,0.3); }
.dm-lightbox-prev { left: 22px; }
.dm-lightbox-next { right: 22px; }
.dm-lightbox-counter { position: absolute; left: 50%; bottom: 18px; transform: translateX(-50%);
  padding: 5px 10px; border-radius: 999px; background: rgba(12,8,12,0.72);
  color: #fff; font-size: 0.78rem; font-weight: 700; line-height: 1; }
/* Freeze the page behind the open lightbox. */
body.dm-lightbox-open { overflow: hidden; }

/* Staged-attachment chip, shown above the composer before the message is sent. */
.dm-image-preview { padding: 8px 14px 0; }
.dm-image-preview-inner { display: inline-flex; align-items: center; gap: 8px; padding: 6px 8px;
  background: var(--glass); border: 1px solid var(--glass-line); border-radius: 12px; }
.dm-image-thumb { width: 40px; height: 40px; object-fit: cover; border-radius: 8px; border: 1px solid var(--glass-line); }
.dm-image-status { font-size: 0.78rem; color: var(--ink-3); }
.dm-image-preview--loading .dm-image-status { color: var(--ink-3); }
.dm-image-remove { flex: none; width: 22px; height: 22px; border: none; background: none; cursor: pointer;
  color: var(--ink-3); font-size: 0.85rem; line-height: 1; border-radius: 6px; }
.dm-image-remove:hover { background: var(--glass-2, rgba(0,0,0,0.06)); color: var(--ink); }

.dm-image-btn { flex: none; width: 38px; height: 38px; border: 1px solid var(--glass-edge);
  background: var(--glass); border-radius: 12px; line-height: 0; cursor: pointer; color: var(--ink-2, #565663);
  display: inline-flex; align-items: center; justify-content: center; padding: 0;
  transition: background 0.12s, border-color 0.12s, color 0.12s; }
.dm-image-btn svg { display: block; }
.dm-image-btn:hover { background: var(--glass-2, rgba(0,0,0,0.04)); border-color: rgba(226,55,68,0.5); color: var(--accent); }

/* Composer: a toolbar row (emoji + attach) stacked above the input row. */
.dm-send { display: flex; flex-direction: column; gap: 8px; padding: 12px 14px; border-top: 1px solid var(--glass-line); position: relative; }
.dm-send-tools { display: flex; gap: 6px; align-items: center; }
.dm-send-row { display: flex; gap: 8px; align-items: flex-end; }
.dm-send-input { flex: 1; border: 1px solid var(--glass-edge); background: var(--glass); color: var(--ink);
  border-radius: 12px; padding: 9px 13px; font: inherit; font-size: 0.88rem; line-height: 1.4;
  min-height: 40px; resize: none; max-height: 140px;
  /* Auto-grows up to max-height, then scrolls - but hide the ugly scrollbar
     chrome (wheel/keys still scroll a long draft). */
  overflow-y: auto; scrollbar-width: none; -ms-overflow-style: none; }
.dm-send-input:placeholder-shown { min-height: 64px; }
.dm-send-input::-webkit-scrollbar { width: 0; height: 0; display: none; }
.dm-send-input:focus { outline: none; border-color: rgba(226,55,68,0.5); }

/* ── Emoji picker ─────────────────────────────────────────────────────────── */
.dm-emoji-btn { flex: none; width: 38px; height: 38px; border: 1px solid var(--glass-edge);
  background: var(--glass); border-radius: 12px; font-size: 1.15rem; line-height: 1; cursor: pointer;
  display: inline-flex; align-items: center; justify-content: center; padding: 0; transition: background 0.12s, border-color 0.12s; }
.dm-emoji-btn:hover { background: var(--glass-2, rgba(0,0,0,0.04)); border-color: rgba(226,55,68,0.5); }
.dm-emoji-panel { position: absolute; bottom: calc(100% + 6px); left: 12px; z-index: 20;
  width: 288px; max-height: 216px; overflow-y: auto; padding: 8px;
  background: var(--surface, #fff); border: 1px solid var(--glass-line); border-radius: 12px;
  box-shadow: 0 10px 30px rgba(0,0,0,0.18);
  display: grid; grid-template-columns: repeat(8, 1fr); gap: 2px; }
.dm-emoji { border: none; background: none; cursor: pointer; font-size: 1.25rem; line-height: 1;
  padding: 4px; border-radius: 8px; }
.dm-emoji:hover { background: var(--glass-2, rgba(0,0,0,0.06)); }

/* ── Banned / appeal page ─────────────────────────────────────────────────── */
.banned-card { max-width: 480px; margin: 24px auto; text-align: center; }
.banned-icon { font-size: 2.4rem; line-height: 1; margin-bottom: 8px; }
.banned-reason {
  text-align: left; margin: 16px 0; padding: 12px 14px; border-radius: var(--r-ctrl);
  background: rgba(229,72,77,0.06); border: 1px solid rgba(229,72,77,0.2);
}
.banned-reason-lbl { font-size: 0.7rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.5px; color: var(--danger, #e5484d); }
.banned-reason p { color: var(--ink); font-size: 0.9rem; margin-top: 3px; }
.banned-appeal-intro { text-align: left; font-size: 0.86rem; color: var(--ink-2); margin: 6px 0 12px; }
.appeal-form { text-align: left; }
.appeal-form .modal-input { margin-bottom: 12px; }
.appeal-submit { width: 100%; }
.banned-appealed {
  text-align: left; margin: 14px 0; padding: 12px 14px; border-radius: var(--r-ctrl);
  background: rgba(224,248,235,0.7); border: 1px solid rgba(160,220,185,0.6); color: #0d7a3e; font-size: 0.9rem;
}
.appeal-ban-reason { font-size: 0.8rem; color: var(--ink-3); margin: 2px 0 6px; font-style: italic; }

@media (max-width: 640px) {
  .acct-main { padding: 20px 14px 44px; }
  .glass-card { padding: 18px 16px; }

  /* Messaging inbox stacks to one column */
  .msg-pane { grid-template-columns: 1fr; }
  .dm-list-col { max-height: 220px; border-right: none; border-bottom: 1px solid var(--glass-line); }
  .dm-messages { max-height: 46vh; }
  .dm-msg { max-width: 88%; }

  /* Section headers (title + search/button) wrap instead of overflowing */
  .dash-section-hd { flex-wrap: wrap; }
  .acct-search { width: 100%; min-width: 0; }

}

@media (max-width: 1000px) {
  /* The account columns need enough room for status and actions. */
  .admin-table--accounts thead { display: none; }
  .admin-table--accounts,
  .admin-table--accounts tbody,
  .admin-table--accounts tr,
  .admin-table--accounts td { display: block; width: 100%; }
  .admin-table--accounts tr {
    border: 1px solid var(--glass-line); border-radius: 12px;
    padding: 12px 14px; margin-bottom: 12px;
  }
  .admin-table--accounts td { border: none; padding: 3px 0; }
  .admin-table--accounts td[data-label]::before {
    content: attr(data-label) ': '; color: var(--ink-3);
    font-size: 0.72rem; font-weight: 600; margin-right: 4px;
  }
  .admin-table--accounts .acct-user { margin-bottom: 4px; }
  .admin-table--accounts .acct-email { max-width: none; }
  .admin-table--accounts .acct-row-actions { margin-top: 8px; }
}

@media (max-width: 640px) {
  .ad-form-grid,
  .ad-form-grid--wide { grid-template-columns: 1fr; }

  .aff-table { table-layout: auto; min-width: 0; }
  .aff-table thead { display: none; }
  .aff-table,
  .aff-table tbody,
  .aff-table tr,
  .aff-table td { display: block; width: 100%; }
  .aff-table tr {
    border: 1px solid var(--glass-edge); border-radius: 12px;
    overflow: hidden; margin-bottom: 12px;
  }
  .aff-table td { border: 0; padding: 10px 12px; }
  .aff-table td + td { border-top: 1px solid var(--glass-line); }
  .aff-table .aff-net,
  .aff-table .aff-params { width: 100%; min-width: 0; }

  /* Modals fit small screens */
  .modal-card { padding: 20px 16px; }
  .modal-actions { flex-wrap: wrap; }
}

/* Legal pages */
.legal { max-width: 720px; margin: 0 auto; line-height: 1.6; }
.legal h1 { font-size: 1.7rem; font-weight: 700; margin-bottom: 6px; }
.legal h2 { font-size: 1.05rem; font-weight: 700; margin: 22px 0 8px; }
.legal p, .legal li { color: var(--ink-2); font-size: 0.92rem; }
.legal ul { padding-left: 20px; margin: 8px 0; }
.legal-updated { font-size: 0.8rem; color: var(--ink-3); margin-bottom: 12px; }
.legal code, .admin-table code { background: rgba(20,20,50,0.06); padding: 1px 6px; border-radius: 5px; font-size: 0.85em; }
/* Regional legal variant switcher */
.legal-region { margin: 0 0 20px; padding: 12px 14px; border: 1px solid var(--glass-line);
  border-radius: 12px; background: var(--accent-soft, rgba(226,55,68,0.06)); }
.legal-region-note { margin: 0 0 10px; font-size: 0.85rem; color: var(--ink-2); }
.legal-region-note a { color: var(--accent); text-decoration: none; }
.legal-region-note a:hover { text-decoration: underline; }
.legal-region-pills { display: flex; flex-wrap: wrap; gap: 6px; }
.legal-region-pill { display: inline-flex; align-items: center; gap: 4px; padding: 4px 10px;
  border: 1px solid var(--glass-line); border-radius: 999px; background: var(--panel, #fff);
  color: var(--ink-2); font-size: 0.82rem; text-decoration: none; line-height: 1.4; }
.legal-region-pill:hover { border-color: rgba(226,55,68,0.4); color: var(--accent); }
.legal-region-pill.is-active { background: var(--accent); border-color: transparent; color: #fff; font-weight: 600; }
.legal-region-pill.is-active:hover { color: #fff; }
/* Dark theme: --line is never defined, so the light-oriented fallback borders
   above go near-invisible on the dark surface. Restore contrast with
   light-on-dark hairlines. */
:root[data-theme="dark"] .legal-region { border-color: rgba(255,255,255,0.12); }
:root[data-theme="dark"] .legal-region-pill { border-color: rgba(255,255,255,0.16); }
:root[data-theme="dark"] .legal-region-pill:hover { border-color: rgba(226,55,68,0.55); }

/* Cookie banner */
.cookie-banner { position: fixed; left: 16px; right: 16px; bottom: 16px; z-index: 9998; display: flex; justify-content: center; }
/* Higher specificity than the rule above so the `hidden` attribute actually
   hides it (a plain `.cookie-banner{display:flex}` otherwise overrides the
   browser's default [hidden]{display:none}). */
.cookie-banner[hidden] { display: none; }
.cookie-banner-inner {
  position: relative; display: flex; flex-direction: column; gap: 12px; max-width: 640px; width: 100%;
  background: rgba(22,22,32,0.94); color: #fff; border-radius: var(--r-ctrl);
  padding: 16px 48px 16px 18px; box-shadow: 0 12px 40px rgba(0,0,0,0.35);
  -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px);
}
.cookie-banner-close {
  position:absolute; top:8px; right:10px; width:32px; height:32px; padding:0;
  border:0; border-radius:50%; background:transparent; color:#fff; font:inherit;
  font-size:1.35rem; line-height:1; cursor:pointer;
}
.cookie-banner-close:hover, .cookie-banner-close:focus-visible { background:rgba(255,255,255,.16); }
.cookie-banner-close:disabled { opacity:.55; cursor:wait; }
.cookie-banner-copy { flex: 1; min-width: 0; }
.cookie-banner-copy > strong { display:block; margin-bottom:4px; }
.cookie-banner-text { font-size: 0.82rem; color: rgba(255,255,255,0.85); flex: 1; }
.cookie-banner-status { display:block; min-height:1em; margin-top:4px; font-size:.75rem; color:rgba(255,255,255,.68); }
.cookie-banner-text a { color: var(--gold-2); }
.cookie-banner-actions { display:flex; gap:8px; flex-wrap:wrap; justify-content:flex-end; }
.cookie-banner-btn {
  border: 1px solid rgba(255,255,255,.45); background: rgba(255,255,255,.08); color: #fff;
  border-radius: var(--r-pill); padding: 9px 20px; font: inherit; font-weight: 600; font-size: 0.84rem;
  cursor: pointer; white-space: nowrap;
}
/* In the manage/edit flow, "Reject optional" is a small, low-key control on
   the far left; Save/Edit stay grouped on the right. */
.cookie-banner.is-managing #cookieReject {
  margin-right: auto; align-self: center; padding: 5px 12px;
  font-size: 0.74rem; font-weight: 500;
  background: rgba(0,0,0,.35); border-color: rgba(255,255,255,.18); color: rgba(255,255,255,.78);
}
.cookie-banner.is-managing #cookieReject:hover { background: rgba(0,0,0,.5); color: #fff; }
.cookie-banner-btn:hover { background:rgba(255,255,255,.16); }
.cookie-banner-btn:disabled { opacity:.55; cursor:wait; }
.footer-cookie-settings { appearance:none; border:0; padding:0; background:none; color:inherit; font:inherit; cursor:pointer; text-decoration:underline; }

/* Cookie settings manager (per-category toggles) */
.cookie-settings { margin: 10px 0 2px; }
.cookie-settings[hidden] { display:none; }
.cookie-cat { display:flex; flex-direction:column; gap:10px; margin:0; padding:0; border:0; }
.cookie-cat-row {
  display:flex; align-items:flex-start; gap:10px; padding:10px 12px;
  background:rgba(255,255,255,.05); border:1px solid rgba(255,255,255,.12);
  border-radius:var(--r-ctrl); cursor:pointer;
}
.cookie-cat-row:hover { background:rgba(255,255,255,.08); }
.cookie-cat-row input[type="checkbox"] { margin-top:2px; width:16px; height:16px; flex:0 0 auto; accent-color: var(--gold-2); cursor:pointer; }
.cookie-cat-row input[type="checkbox"]:disabled { cursor:default; opacity:.7; }
.cookie-cat-copy { font-size:.78rem; line-height:1.4; color:rgba(255,255,255,.78); }
.cookie-cat-copy > strong { display:block; color:#fff; font-size:.82rem; margin-bottom:1px; }

/* Light theme: the banner defaults above are a dark glass toast (white text on
   near-black). In light mode that reads as an out-of-place dark slab, so recolor
   it to a light card. Gated on :not([data-theme="dark"]) so it also covers the
   no-attribute fallback (storage-exception case), while dark keeps the glass. */
:root:not([data-theme="dark"]) .cookie-banner-inner {
  background: rgba(255,255,255,0.97); color: var(--ink);
  border: 1px solid rgba(20,20,50,0.12);
  box-shadow: 0 12px 40px rgba(20,20,50,0.18);
}
:root:not([data-theme="dark"]) .cookie-banner-close { color: var(--ink-2); }
:root:not([data-theme="dark"]) .cookie-banner-close:hover,
:root:not([data-theme="dark"]) .cookie-banner-close:focus-visible { background: rgba(20,20,50,0.08); }
:root:not([data-theme="dark"]) .cookie-banner-text { color: var(--ink-2); }
:root:not([data-theme="dark"]) .cookie-banner-status { color: var(--ink-3); }
:root:not([data-theme="dark"]) .cookie-banner-text a { color: var(--accent); }
:root:not([data-theme="dark"]) .cookie-banner-btn {
  border-color: rgba(20,20,50,0.18); background: rgba(20,20,50,0.03); color: var(--ink);
}
:root:not([data-theme="dark"]) .cookie-banner-btn:hover { background: rgba(20,20,50,0.08); }
:root:not([data-theme="dark"]) .cookie-banner.is-managing #cookieReject {
  background: rgba(20,20,50,0.06); border-color: rgba(20,20,50,0.14); color: var(--ink-3);
}
:root:not([data-theme="dark"]) .cookie-banner.is-managing #cookieReject:hover {
  background: rgba(20,20,50,0.12); color: var(--ink);
}
:root:not([data-theme="dark"]) .cookie-cat-row {
  background: rgba(20,20,50,0.03); border-color: rgba(20,20,50,0.10);
}
:root:not([data-theme="dark"]) .cookie-cat-row:hover { background: rgba(20,20,50,0.06); }
:root:not([data-theme="dark"]) .cookie-cat-row input[type="checkbox"] { accent-color: var(--accent); }
:root:not([data-theme="dark"]) .cookie-cat-copy { color: var(--ink-2); }
:root:not([data-theme="dark"]) .cookie-cat-copy > strong { color: var(--ink); }

/* Profile / username editor */
/* Profile picture editor (Account tab) */
.avatar-edit { display: flex; align-items: center; gap: 20px; flex-wrap: wrap; }
.avatar-edit .avatar--lg { border: 1px solid var(--glass-edge); box-shadow: var(--e-1); }
.avatar-edit-controls { flex: 1; min-width: 220px; }
.avatar-edit-controls .dash-note { margin: 0 0 12px; }
.avatar-btns { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.avatar-btns label { cursor: pointer; }

/* Default-avatar colour picker (shown only when there's no uploaded photo). */
.avatar-color { margin-top: 16px; }
.avatar-color .dash-note { margin: 0 0 10px; }
.swatches { display: flex; flex-wrap: wrap; gap: 8px; }
.swatch {
  width: 26px; height: 26px; border-radius: 50%; padding: 0; cursor: pointer;
  background: var(--sw, var(--ink-3));
  border: 2px solid transparent; box-shadow: 0 0 0 1px var(--glass-edge);
  transition: transform var(--t), box-shadow var(--t);
}
.swatch:hover { transform: scale(1.12); }
.swatch--on {
  border-color: var(--surface, #fff);
  box-shadow: 0 0 0 2px var(--accent);
}
/* The custom-colour chip wraps a native colour input showing a rainbow hint. */
.swatch--custom {
  position: relative; overflow: hidden;
  background: conic-gradient(red, yellow, lime, aqua, blue, magenta, red);
}
.swatch--custom input[type="color"] {
  position: absolute; inset: -4px; width: calc(100% + 8px); height: calc(100% + 8px);
  padding: 0; border: none; background: none; cursor: pointer; opacity: 0;
}

.profile-label { display: block; font-size: 0.78rem; font-weight: 600; color: var(--ink-2); margin-bottom: 8px; }
.username-edit { display: flex; align-items: center; gap: 8px; }
.username-at {
  align-self: stretch; display: inline-flex; align-items: center;
  color: var(--ink-3); font-weight: 600;
}
.username-input {
  flex: 1; max-width: 260px; padding: 10px 12px; border-radius: var(--r-ctrl);
  border: 1px solid var(--glass-edge); font: inherit; font-size: 0.9rem; outline: none;
  background: rgba(255,255,255,0.7);
}
.username-input:focus { border-color: rgba(226,55,68,0.5); box-shadow: 0 0 0 3px var(--accent-soft); }
.username-msg { font-size: 0.8rem; margin-top: 8px; min-height: 1em; }
.username-msg.ok { color: var(--success); }
.username-msg.err { color: var(--danger); }

/* Spacing between the account note and the destructive button */
.delete-form { margin-top: 18px; }

/* Toggle switch (settings) */
.toggle-row { display: flex; align-items: center; gap: 16px; cursor: pointer; }
.toggle-txt { flex: 1; display: flex; flex-direction: column; gap: 3px; }
.toggle-txt strong { font-size: 0.92rem; }
.toggle-note { font-size: 0.78rem; color: var(--ink-3); line-height: 1.4; }
.toggle-input { position: absolute; opacity: 0; width: 0; height: 0; }
.toggle-switch {
  position: relative; flex-shrink: 0; width: 46px; height: 26px; border-radius: 999px;
  background: rgba(20,20,50,0.16); transition: background var(--t);
}
.toggle-switch::after {
  content: ''; position: absolute; top: 3px; left: 3px; width: 20px; height: 20px;
  border-radius: 50%; background: #fff; box-shadow: 0 1px 3px rgba(0,0,0,0.25);
  transition: transform var(--t);
}
.toggle-input:checked + .toggle-switch { background: linear-gradient(135deg, var(--accent-2), var(--accent)); }
.toggle-input:checked + .toggle-switch::after { transform: translateX(20px); }
.toggle-input:focus-visible + .toggle-switch { box-shadow: 0 0 0 3px var(--accent-soft); }

/* Contact / bug form */
.contact-card { max-width: 520px; text-align: left; }
.contact-form { display: flex; flex-direction: column; }
.field-label { font-size: 0.8rem; font-weight: 600; color: var(--ink-2); margin: 14px 0 6px; display: block; }
.field-label .opt { font-weight: 400; color: var(--ink-3); }
.magic-input.full, .full { width: 100%; max-width: none; }
.contact-textarea {
  width: 100%; padding: 12px 14px; border-radius: var(--r-ctrl); border: 1px solid var(--glass-edge);
  font: inherit; font-size: 0.9rem; outline: none; background: rgba(255,255,255,0.7); resize: vertical;
}
.contact-textarea:focus { border-color: rgba(226,55,68,0.5); box-shadow: 0 0 0 3px var(--accent-soft); }
.seg { display: flex; gap: 10px; flex-wrap: wrap; }
.seg-opt { display: inline-flex; align-items: center; gap: 6px; font-size: 0.86rem; color: var(--ink-2);
  padding: 8px 12px; border: 1px solid var(--glass-edge); border-radius: var(--r-ctrl); cursor: pointer; background: rgba(255,255,255,0.5); }
.seg-opt:has(input:checked) { border-color: rgba(226,55,68,0.5); background: var(--accent-soft); color: var(--accent-ink); }
/* Honeypot - visually removed but still in the DOM for bots to trip on */
.hp-field { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }

/* Admin messages */
.badge-unread { font-size: 0.68rem; font-weight: 700; background: var(--danger); color: #fff;
  padding: 2px 8px; border-radius: var(--r-pill); vertical-align: middle; margin-left: 6px; }
.msg-list { list-style: none; display: flex; flex-direction: column; gap: 10px; }
.msg-item { padding: 12px 14px; border-radius: var(--r-ctrl); border: 1px solid var(--glass-line); background: rgba(255,255,255,0.5); }
.msg-item.unread { border-left: 3px solid var(--accent); background: rgba(252,231,232,0.5); }
.msg-head { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; font-size: 0.8rem; color: var(--ink-3); margin-bottom: 6px; }
.msg-cat { font-size: 0.66rem; font-weight: 700; text-transform: uppercase; padding: 2px 8px; border-radius: 6px;
  background: rgba(120,120,130,0.14); color: var(--ink-2); }
.msg-cat--bug { background: rgba(229,72,77,0.14); color: #b02a2f; }
.msg-cat--contact { background: var(--accent-soft); color: var(--accent-ink); }
.msg-cat--accessibility { background: rgba(37,99,235,0.14); color: #1d4ed8; }
.msg-cat--privacy,
.msg-cat--privacy_appeal { background: rgba(147,51,234,0.14); color: #7e22ce; }
.msg-cat--copyright { background: rgba(202,138,4,0.16); color: #a16207; }
.msg-cat--tida { background: rgba(220,38,38,0.16); color: #b91c1c; }

/* Reports & Bugs sub-tabs: filter the message list by submission type. */
.msg-subtabs { display: flex; flex-wrap: wrap; gap: 6px; margin: 4px 0 14px; }
.msg-subtab {
  display: inline-flex; align-items: center; gap: 6px;
  font-size: 0.78rem; font-weight: 600; color: var(--ink);
  padding: 5px 12px; border-radius: var(--r-pill);
  border: 1px solid var(--glass-line); background: rgba(255,255,255,0.5);
  text-decoration: none; transition: background 0.12s, color 0.12s, border-color 0.12s;
}
.msg-subtab:hover { border-color: var(--accent); color: var(--accent-ink); }
.msg-subtab.is-active { background: var(--accent); color: #fff; border-color: var(--accent); }
.msg-subtab__count {
  font-size: 0.7rem; font-weight: 700; padding: 0 6px; border-radius: var(--r-pill);
  background: rgba(0,0,0,0.08); color: inherit;
}
.msg-subtab.is-active .msg-subtab__count { background: rgba(255,255,255,0.28); }
.msg-subtab__unread {
  font-size: 0.66rem; font-weight: 700; padding: 0 6px; border-radius: var(--r-pill);
  background: var(--danger); color: #fff;
}
.msg-subtab.is-active .msg-subtab__unread { background: #fff; color: var(--danger); }
.msg-from { color: var(--ink-2); word-break: break-word; }
.msg-from a { color: var(--accent); text-decoration: none; }
.msg-date { margin-left: auto; }
.msg-body { font-size: 0.9rem; color: var(--ink); white-space: pre-wrap; line-height: 1.5; }
.msg-actions { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 10px; }

/* Home page account nav lives inside the sticky slim header (.acct-nav, rendered
   server-side like the internal pages), so it shares the standard nav styling. */

/* Reddit trader-reputation linking (account settings) */
.reddit-pane { display: none; margin-top: 4px; }
.reddit-link[data-state="verified"] .reddit-pane--verified,
.reddit-link[data-state="oauth"]    .reddit-pane--oauth,
.reddit-link[data-state="pending"]  .reddit-pane--pending,
.reddit-link[data-state="request"]  .reddit-pane--request { display: block; }
.reddit-note-input {
  display: block; margin-top: 8px; margin-bottom: 12px; max-width: 520px;
  min-height: 84px; resize: vertical;
}
.reddit-rejected { color: #b02a2f; }
.reddit-pendmark { margin-right: 4px; }
.reddit-steps { margin: 10px 0; padding-left: 20px; color: var(--ink-2); font-size: 0.9rem; line-height: 1.8; }
.reddit-token { display: inline-flex; align-items: center; gap: 8px; margin-left: 4px; }
.reddit-token code, .rreq-code code {
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size: 0.86rem;
  background: var(--accent-soft); color: var(--accent-ink);
  padding: 3px 8px; border-radius: var(--r-pill); user-select: all;
}
.rreq-code { margin: 6px 0; font-size: 0.86rem; color: var(--ink-2); }
.reddit-signin { display: inline-flex; align-items: center; gap: 8px; text-decoration: none; background: #ff4500; }
.reddit-signin:hover { background: #e03d00; }
.reddit-mark {
  display: inline-flex; align-items: center; justify-content: center;
  width: 18px; height: 18px; border-radius: 50%; background: #fff; color: #ff4500;
  font-size: 0.7rem; line-height: 1;
}
.reddit-connected { font-size: 0.95rem; color: var(--ink); margin: 4px 0; }
.reddit-check {
  display: inline-flex; align-items: center; justify-content: center;
  width: 18px; height: 18px; border-radius: 50%; margin-right: 4px;
  background: rgba(31,157,85,0.16); color: #1f9d55; font-size: 0.72rem; font-weight: 800;
}
.reddit-counts { margin-bottom: 12px; }
.reddit-counts .reddit-synced { color: var(--ink-2); }
.reddit-link .username-msg.is-error { color: #b02a2f; }

/* Compact icon-only header. This engages as soon as the full header's account
   controls (avatar + logout) would wrap onto a second line - which happens
   around 1024px for typical usernames. The word-mark is hidden, the icon logo
   is pinned to the far left, and every control flows to the right on one row. */
@media (max-width: 1024px) {
  .acct-header { align-items: center; gap: 8px 10px; flex-wrap: nowrap; }
  .logo-word { display: none; }
  .acct-nav { flex: 1; justify-content: flex-end; gap: 6px 8px; }
  .acct-nav-links { gap: 4px; }
  .acct-me { gap: 8px; }
  .acct-sep { display: none; }
}

/* Phone widths: stack the cookie banner. */
@media (max-width: 600px) {
  .cookie-banner-inner { flex-direction: column; align-items: stretch; text-align: center; }
}

/* On very narrow phones, drop the username label to keep everything on one row
   (the avatar still links to the dashboard). */
@media (max-width: 420px) {
  .acct-who { display: none; }
  .acct-id { padding: 4px; }
}

/* ── Friends ─────────────────────────────────────────────────────────────── */
/* A small button variant used inside dense friend rows. */
.acct-btn--sm { padding: 5px 12px; font-size: 0.78rem; }

/* ── Admin: shipping models ──────────────────────────────────────────────── */
.ship-admin-actions { display: flex; align-items: center; gap: 14px; flex-wrap: wrap; margin: 6px 0 14px; }
.ship-table-wrap { overflow-x: auto; }
.ship-table { width: 100%; border-collapse: collapse; font-size: 0.86rem; }
.ship-table th, .ship-table td { text-align: left; padding: 8px 10px; border-bottom: 1px solid rgba(255,255,255,0.09); vertical-align: top; }
.ship-table th { font-weight: 600; color: #ffffffb0; font-size: 0.78rem; text-transform: uppercase; letter-spacing: 0.03em; }
.ship-row--unknown { background: rgba(224,179,74,0.06); }
.ship-type { display: inline-block; padding: 2px 8px; border-radius: var(--r-pill); font-size: 0.72rem; font-weight: 600; background: #ffffff1f; }
.ship-type--free, .ship-type--free_over, .ship-type--percent_free_over { background: rgba(46,160,110,0.28); }
.ship-type--flat, .ship-type--percent { background: rgba(90,140,200,0.28); }
.ship-type--unknown { background: rgba(224,179,74,0.28); }
.ship-detail { max-width: 340px; }
.ship-note { display: block; color: #ffffff8a; font-size: 0.76rem; margin-top: 2px; }
.ship-badge { display: inline-block; margin-left: 6px; padding: 1px 7px; border-radius: var(--r-pill); font-size: 0.68rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.03em; vertical-align: middle; }
.ship-badge--blocked { background: rgba(224,110,74,0.28); color: #ffd7c7; }
.ship-blocked-banner { margin: 0 0 14px; padding: 10px 12px; border-radius: var(--r-md, 8px); background: rgba(224,110,74,0.10); border: 1px solid rgba(224,110,74,0.28); color: #ffffffc4; font-size: 0.82rem; line-height: 1.45; }
.ship-blocked-banner .ship-badge { margin-left: 2px; }
.ship-actions { white-space: nowrap; }
.ship-actions .acct-btn { margin-left: 4px; }
.ship-edit-form { margin-top: 18px; }
.ship-edit-title { margin: 0 0 12px; font-size: 0.98rem; }
.ship-edit-buttons { display: flex; gap: 10px; margin-top: 14px; }

/* Auto-scrapers tab */
.scraper-sched-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap: 14px; margin: 6px 0 18px; }
.scraper-sched-card { padding: 14px 16px; border-radius: var(--r-md, 10px); background: var(--glass); border: 1px solid var(--glass-edge); }
.scraper-sched-hd { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin-bottom: 6px; }
.scraper-sched-hd h3 { margin: 0; font-size: 0.95rem; }
.scraper-sched-detail { margin: 0 0 8px; font-size: 0.82rem; color: #ffffffbf; line-height: 1.45; }
.scraper-sched-meta { margin: 0; font-size: 0.8rem; color: #ffffff9c; }
.scraper-q-lbl { display: flex; flex-direction: column; gap: 4px; font-size: 0.78rem; color: #ffffffb0; }
.scraper-q-lbl .modal-input { min-width: 180px; }
.scraper-table td { vertical-align: middle; }
.scraper-table td:first-child { white-space: nowrap; }
.scraper-row--failed { background: rgba(224,110,74,0.07); }
.scraper-muted { color: #ffffff85; font-size: 0.8rem; }
.scraper-badge { display: inline-block; margin-right: 5px; padding: 1px 8px; border-radius: var(--r-pill); font-size: 0.68rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.03em; vertical-align: middle; background: #ffffff1f; }
.scraper-badge--on { background: rgba(46,160,110,0.28); color: #c8f5df; }
.scraper-badge--off { background: rgba(224,110,74,0.28); color: #ffd7c7; }
.scraper-badge--fail { background: rgba(224,110,74,0.28); color: #ffd7c7; }
.scraper-badge--muted { background: #ffffff1a; color: #ffffffb0; }
.link-btn { background: none; border: none; padding: 0; margin: 0; font: inherit; color: var(--accent, #7db7ff); text-decoration: underline; cursor: pointer; }

.friends-add { margin: 4px 0 18px; }
.friends-add-form { display: flex; gap: 8px; flex-wrap: wrap; align-items: stretch; }
/* Bordered field with a leading "@" affix, matching the DM compose and deal-log
   username inputs. The field is relative so the autocomplete list can anchor to it. */
.friends-add-field { position: relative; flex: 1; min-width: 180px; display: flex; align-items: center;
  gap: 6px; box-sizing: border-box; border: 1px solid var(--glass-edge); background: var(--glass);
  border-radius: 9px; padding: 0 11px; transition: border-color 0.15s, box-shadow 0.15s; }
.friends-add-field:focus-within { border-color: rgba(226,55,68,0.5); box-shadow: 0 0 0 3px rgba(226,55,68,0.12); }
.friends-add-at { color: var(--ink-3); font-weight: 700; font-size: 0.9rem; flex: 0 0 auto; }
.friends-add-input { flex: 1; min-width: 0; border: 0; background: transparent; color: var(--ink);
  padding: 9px 0; font: inherit; font-size: 0.84rem; }
.friends-add-input:focus { outline: none; }
.friends-add-suggest { position: absolute; z-index: 40; top: calc(100% + 4px); left: 0; right: 0;
  list-style: none; margin: 0; padding: 4px; max-height: 260px; overflow-y: auto; overflow-x: hidden;
  background: var(--surface, var(--glass)); border: 1px solid var(--glass-edge);
  border-radius: 10px; box-shadow: 0 12px 32px rgba(0,0,0,0.28); }
.friends-add-item { display: flex; align-items: center; gap: 9px; padding: 7px 9px;
  border-radius: 7px; cursor: pointer; min-width: 0; }
.friends-add-item.active { background: rgba(226,55,68,0.12); }
.friends-add-item .avatar { flex: 0 0 auto; }
.friends-add-name { font-size: 0.84rem; color: var(--ink); font-weight: 600; white-space: nowrap;
  flex: 1 1 auto; min-width: 0; overflow: hidden; text-overflow: ellipsis; }
.friends-add-real { font-size: 0.76rem; color: var(--ink-3); margin-left: auto; flex: 0 1 auto;
  max-width: 42%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.friends-add-msg { min-height: 1.1em; margin-top: 6px; font-size: 0.82rem; color: var(--ink-3); }
.friends-add-msg.ok { color: #1f9d55; }
.friends-add-msg.err { color: #b02a2f; }

.friends-group { margin-top: 18px; }
.friends-group-title { font-size: 0.8rem; font-weight: 700; text-transform: uppercase;
  letter-spacing: 0.5px; color: var(--ink-3); margin-bottom: 8px; }
.friends-count { color: var(--ink-3); font-weight: 600; margin-left: 4px; }
.friends-list { list-style: none; display: flex; flex-direction: column; gap: 8px; margin: 0; padding: 0; }
.friends-empty { padding: 14px; color: var(--ink-3); font-size: 0.85rem;
  border: 1px dashed var(--glass-line); border-radius: var(--r-ctrl); }

.friend-item { display: flex; align-items: center; gap: 10px; padding: 8px 10px;
  border: 1px solid var(--glass-line); border-radius: var(--r-ctrl); background: rgba(255,255,255,0.5); }
/* A row about a person, not a blue link: it reads as the card's own text. */
.friend-id { display: flex; align-items: center; gap: 10px; flex: 1; min-width: 0; text-decoration: none; color: var(--ink); }
.friend-av-wrap { position: relative; flex-shrink: 0; display: inline-flex; }
.friend-av-wrap .presence-dot { position: absolute; right: -2px; bottom: -2px;
  width: 10px; height: 10px; margin: 0;
  border: 2px solid #fff; border-radius: 50%; }
.friend-meta { min-width: 0; display: flex; flex-direction: column; gap: 1px; }
.friend-name { font-weight: 600; font-size: 0.88rem; color: var(--ink);
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.friend-rep { font-size: 0.7rem; font-weight: 700; color: var(--accent-ink); }
.friend-actions { display: flex; align-items: center; gap: 6px; flex-shrink: 0; }
.friend-pending { font-size: 0.75rem; color: var(--ink-3); font-style: italic; }

/* Friends shown in the messages list (no conversation yet). */
.dm-list-divider { padding: 10px 14px 4px; font-size: 0.68rem; font-weight: 700;
  text-transform: uppercase; letter-spacing: 0.6px; color: var(--ink-3); }
.dm-conv-preview--muted { color: var(--ink-3); font-style: italic; }

/* Profile page: friend button + friends grid. */
.friend-action { display: inline-flex; gap: 6px; }
.profile-friends { list-style: none; display: flex; flex-wrap: wrap; gap: 14px; margin: 4px 0 0; padding: 0; }
.profile-friend-link { display: flex; flex-direction: column; align-items: center; gap: 6px;
  width: 64px; text-decoration: none; }
.profile-friend-av-wrap { position: relative; display: inline-flex; }
.profile-friend-av-wrap .presence-dot { position: absolute; right: 0; bottom: 0;
  width: 10px; height: 10px; margin: 0;
  border: 2px solid #fff; border-radius: 50%; }
.profile-friend-name { font-size: 0.74rem; color: var(--ink-2); max-width: 64px;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.forum-panel-count { font-size: 0.8rem; color: var(--ink-3); font-weight: 600; }
.notif--friend .notif-snippet { color: var(--ink-2); }

/* ── Admin: proxy control panel ─────────────────────────────────────────── */
.proxy-grid { display: flex; flex-direction: column; gap: 1.1rem; max-width: 560px; }
#sitesPanel .proxy-grid { max-width: 680px; }
.proxy-row { display: flex; justify-content: space-between; align-items: flex-start;
  gap: 1rem; flex-wrap: wrap; }
.proxy-row--toggle { align-items: center; }
.proxy-lbl { display: block; font-weight: 600; color: var(--ink); font-size: 0.9rem; }
.site-dot { display: inline-block; width: 10px; height: 10px; border-radius: 50%;
  margin-right: 7px; vertical-align: middle; }
.site-toggle-controls { display: flex; align-items: center; gap: 1rem; flex: none; }
.site-toggle-controls .switch, .site-toggle-controls .site-switch-lbl { width: 46px; text-align: center; flex: none; }
.site-switch-lbl { font-size: 0.72rem; font-weight: 600; color: var(--ink-3); }
.site-toggle-head { align-items: center; padding-bottom: 0; opacity: 0.8; }
.site-toggle-head .proxy-lbl { font-size: 0.72rem; text-transform: uppercase; letter-spacing: 0.03em; }
.proxy-hint { display: block; font-weight: 400; font-size: 0.76rem; color: var(--ink-3);
  margin-top: 2px; max-width: 42ch; }
.proxy-field { display: flex; gap: 6px; align-items: center; }
.proxy-field input { width: 130px; padding: 6px 10px; border-radius: var(--r-ctrl);
  border: 1px solid var(--glass-edge); background: var(--glass); color: var(--ink);
  font-size: 0.85rem; }
.proxy-field input:focus { outline: none; border-color: var(--accent); }
.proxy-field .mini-btn { margin-right: 0; padding: 6px 14px; }

.proxy-usage { background: var(--glass); border: 1px solid var(--glass-line);
  border-radius: var(--r-card); padding: 0.9rem 1rem; }
.proxy-usage-head, .proxy-usage-foot { display: flex; justify-content: space-between;
  align-items: baseline; gap: 1rem; }
.proxy-used { font-weight: 700; color: var(--ink); font-variant-numeric: tabular-nums; }
.proxy-bar { height: 9px; border-radius: 999px; background: var(--glass-strong);
  overflow: hidden; margin: 8px 0; }
.proxy-bar-fill { height: 100%; width: 0; border-radius: 999px;
  background: linear-gradient(90deg, var(--success), var(--accent-2));
  transition: width 0.35s ease; }
.proxy-bar-fill--hot { background: linear-gradient(90deg, var(--gold-2), var(--danger)); }
.proxy-warn { margin: 8px 0 0; font-size: 0.78rem; color: var(--danger); font-weight: 600; }
.proxy-msg { min-height: 1.1em; margin: 0; font-size: 0.8rem; color: var(--ink-3); }
.proxy-msg--ok { color: var(--success); }
.proxy-msg--err { color: var(--danger); }
.proxy-off .proxy-usage { opacity: 0.55; }

/* Admin panels use a wider workspace for tables, with narrower readable forms. */
.acct-main.admin-workspace { max-width: 1240px; }
.admin-workspace .admin-panel { min-width: 0; padding: clamp(14px, 2.5vw, 26px); }
.admin-workspace :is(.support-panel, .email-studio) {
  position: relative;
  left: auto;
  transform: none;
  width: 100%;
  max-width: none;
}
.admin-overview-action {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px 14px;
  margin-bottom: 20px;
}
.admin-workspace .dash-sub { max-width: 75ch; }
.admin-workspace .admin-panel > .dash-section-hd {
  align-items: flex-start;
  flex-wrap: wrap;
  gap: 10px 16px;
  margin-bottom: 18px;
}
.admin-workspace .dash-section-hd h2 { margin: 0; line-height: 1.35; }
.admin-workspace .dash-section-hd--sub {
  margin-top: 24px;
  padding-top: 20px;
  border-top: 1px solid var(--glass-line);
}
.admin-workspace .dash-section-hd--sub h3 { margin: 0 0 6px; line-height: 1.35; }
.admin-workspace [data-panel="quota"] .proxy-msg:empty { display: none; }
.admin-workspace .dash-section-hd > div { min-width: 0; }
.admin-workspace .dash-section-hd > .dash-note { flex-basis: 100%; }
.admin-workspace .dash-section-hd .dash-note,
.admin-workspace .admin-panel > .dash-note { display: block; max-width: 78ch; }
.admin-workspace .dash-section-hd h2 + .dash-note { margin-top: 4px; }
.admin-workspace .admin-panel > .dash-note { margin: 0 0 14px; }
.admin-workspace :is(.table-scroll, .ship-table-wrap) { max-width: 100%; min-width: 0; }
.admin-workspace .admin-table :is(th, td) {
  padding: 10px 12px;
  line-height: 1.45;
  overflow-wrap: anywhere;
}
.admin-workspace .admin-table .mini-btn { margin: 2px 4px 2px 0; }
.admin-workspace .admin-table--accounts .acct-status,
.admin-workspace .admin-table--accounts .acct-status :is(.ok-pill, .ban-pill) {
  white-space: nowrap;
  overflow-wrap: normal;
}
.admin-workspace .admin-table--accounts th.acct-status { width: 1%; }
.admin-workspace .admin-table--accounts .col-actions { white-space: normal; }
.admin-workspace .acct-row-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  min-width: 9rem;
}
.admin-workspace .acct-row-actions .mini-btn { margin: 0; white-space: nowrap; }
.admin-workspace .scraper-activity-table { min-width: 48rem; table-layout: fixed; }
.admin-workspace .scraper-activity-table :is(th, td):nth-child(1) { width: 9.5rem; }
.admin-workspace .scraper-activity-table :is(th, td):nth-child(2) { width: 10rem; }
.admin-workspace .scraper-activity-table :is(th, td):nth-child(3) { width: 10rem; }
.admin-workspace .scraper-activity-table :is(th, td):nth-child(5) { width: 7.5rem; }
.admin-workspace .scraper-activity-table :is(th, td):not(:nth-child(4)) { overflow-wrap: normal; }
.admin-workspace .scraper-activity-table td:nth-child(3) { overflow-wrap: break-word; }
.admin-workspace .scraper-activity-table :is(th, td):nth-child(2),
.admin-workspace .scraper-sites-table :is(th, td):first-child { white-space: nowrap; }
.admin-workspace .admin-table:not(.admin-table--accounts) td { vertical-align: top; }
.admin-workspace .admin-cell-note { display: block; margin-top: 4px; }
.admin-workspace :is(.msg-actions, .ship-edit-buttons, .email-actions, .email-automation-actions, .merge-admin-actions) {
  flex-wrap: wrap;
  align-items: center;
  gap: 8px;
}
.admin-workspace :is(.msg-actions, .ship-edit-buttons, .email-actions, .email-automation-actions, .merge-admin-actions) .mini-btn { margin: 0; }
.admin-workspace :is(.mini-btn, .acct-btn, .danger-btn) {
  min-width: 0;
  max-width: 100%;
  white-space: normal;
  line-height: 1.35;
}
.admin-workspace .mini-btn {
  display: inline-flex;
  align-items: center;
  min-height: 32px;
  padding: 5px 10px;
}
.admin-workspace .admin-inline-form {
  display: flex;
  align-items: flex-end;
  justify-content: flex-start;
  flex-wrap: wrap;
  gap: 8px;
  margin: 0 0 14px;
}
.admin-workspace .admin-inline-form :is(label, .acct-search) {
  flex: 1 1 220px;
  min-width: 0;
  max-width: min(100%, 400px);
  margin: 0;
}
.admin-workspace .admin-inline-form :is(.mini-btn, .acct-search, .modal-input) {
  min-height: var(--form-control-h);
  margin-right: 0;
}
.admin-subsection {
  display: grid;
  gap: 12px;
  min-width: 0;
  margin-top: 24px;
  padding-top: 20px;
  border-top: 1px solid var(--glass-line);
}
.admin-subsection :is(h3, h4, p, .admin-inline-form) { margin: 0; }
.admin-subsection > .dash-note { max-width: 78ch; }
.admin-subsection > [role="status"]:empty { display: none; }
.admin-block-list { list-style: none; margin: 0; padding: 0; display: grid; gap: 6px; }
.admin-block-list li { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 12px; }
.admin-workspace .acct-user-info { gap: 3px; }
.admin-workspace .proxy-hint { margin-top: 4px; line-height: 1.45; }
.admin-workspace .proxy-field { flex-wrap: wrap; }
.admin-workspace .support-search input { font-size: .875rem; }
.admin-workspace .support-reader-actions { margin: 14px 0; }
.admin-workspace .support-reader-actions .acct-btn { padding: 7px 10px; }
.admin-workspace .email-workspace { grid-template-columns: 140px minmax(0, 1fr) minmax(220px, .72fr); }
.admin-workspace .email-fields { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.admin-workspace :is(.email-fields, .email-workspace, .email-automation-form) > * { min-width: 0; }
.admin-workspace .email-automation-form { grid-template-columns: repeat(4, minmax(0, 1fr)); }
@media (max-width: 920px) {
  .admin-workspace .email-workspace { grid-template-columns: 130px minmax(0, 1fr); }
  .admin-workspace .email-preview { grid-column: 1 / -1; }
  .admin-workspace .email-automation-form { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 680px) {
  .admin-workspace > .dash-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
  .admin-workspace > .dash-grid .stat-card { padding: 12px; }
  .admin-workspace .admin-table :is(th, td) { padding: 8px; }
  .admin-workspace .admin-table:not(.admin-table--accounts, .aff-table, .scraper-activity-table) { min-width: 34rem; }
  .admin-workspace :is(.email-workspace, .email-fields, .email-automation-form),
  .admin-workspace #adsPanel .ad-form-grid { grid-template-columns: minmax(0, 1fr); }
  .admin-workspace .acct-user-card { min-width: 0; }
  .admin-workspace .support-search { gap: 6px; padding: 10px; }
  .admin-workspace .support-search .acct-btn { padding-inline: 10px; }
}
@media (max-width: 620px) {
  .admin-workspace .admin-nav { gap: 8px; }
  .admin-workspace .admin-nav-group { padding: 10px; }
  .admin-workspace .admin-nav-heading {
    flex-direction: row;
    flex-wrap: wrap;
    margin-bottom: 7px;
    padding-bottom: 6px;
  }
  .admin-workspace .admin-nav-actions {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(min(100%, 96px), 1fr));
    gap: 6px;
  }
  .admin-workspace .admin-nav :is(.admin-tab, .admin-tab-link) { min-height: 36px; padding: 6px 8px; }
}
@media (max-width: 420px) {
  .admin-workspace .admin-inline-form :is(label, .acct-search) { flex-basis: 100%; }
}

/* Toggle switch */
.switch { position: relative; display: inline-block; width: 46px; height: 26px; flex: none; }
.switch input { opacity: 0; width: 0; height: 0; }
.switch-slider { position: absolute; inset: 0; cursor: pointer; border-radius: 999px;
  background: var(--glass-strong); border: 1px solid var(--glass-edge);
  transition: background 0.2s ease; }
.switch-slider::before { content: ""; position: absolute; height: 18px; width: 18px;
  left: 3px; top: 3px; border-radius: 50%; background: var(--ink-3);
  transition: transform 0.2s ease, background 0.2s ease; }
.switch input:checked + .switch-slider { background: var(--accent-soft);
  border-color: var(--accent); }
.switch input:checked + .switch-slider::before { transform: translateX(20px);
  background: var(--accent); }
.switch input:focus-visible + .switch-slider { box-shadow: 0 0 0 3px var(--accent-glow); }

/* ── Partner tab (dashboard) + partner review (admin) ──
   A connected retailer manages their own stores here; staff see the same rows
   in the admin Partners tab. Both reuse the account surfaces above - only the
   store row, the status pills and the form grid are new. ── */
.pill--partner { background: rgba(56,120,255,0.16); color: #2a55b8; }

.partner-store-list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 10px; }
.partner-store {
  display: flex; align-items: center; gap: 12px; flex-wrap: wrap;
  border: 1px solid var(--glass-line); border-radius: var(--r-ctrl); padding: 14px 16px;
}
.partner-store-main { flex: 1 1 240px; min-width: 0; display: flex; flex-direction: column; gap: 3px; }
.partner-store-domain { font-weight: 650; font-size: 0.95rem; word-break: break-all; }
.partner-store-meta { font-size: 0.82rem; color: var(--ink-3); }
.partner-store-meta code { background: var(--accent-soft); color: var(--accent-ink); padding: 1px 6px; border-radius: 5px; font-size: 0.95em; }
.partner-store-note { font-size: 0.82rem; color: var(--ink-2); }
.partner-store-actions { flex: 0 0 auto; }

.partner-status--submitted { background: rgba(200,150,30,0.16); color: #8a6a10; }
.partner-status--verified  { background: rgba(8,120,58,0.14); color: var(--success); }
.partner-status--needs_info{ background: rgba(56,120,255,0.16); color: #2a55b8; }
.partner-status--revoked   { background: rgba(189,37,48,0.13); color: var(--danger); }

.partner-form .username-input { width: 100%; max-width: 520px; }
.partner-form select.username-input { max-width: 520px; }
.partner-form-grid {
  display: grid; grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 0 18px; max-width: 520px;
}
.partner-notes { min-height: 84px; resize: vertical; }
.partner-check { display: flex; align-items: center; gap: 8px; margin: 16px 0 4px; font-size: 0.88rem; color: var(--ink-2); }
.partner-form .req { color: var(--accent-ink); }
.partner-form .opt { font-weight: 400; color: var(--ink-3); }

@media (max-width: 620px) {
  .partner-form-grid { grid-template-columns: 1fr; }
  .partner-store { align-items: flex-start; }
}

:root[data-theme="dark"] .pill--partner,
:root[data-theme="dark"] .partner-status--needs_info { background: rgba(90,150,255,0.22); color: #9dc0ff; }
:root[data-theme="dark"] .partner-status--submitted { background: rgba(224,179,74,0.18); color: #e8b866; }
:root[data-theme="dark"] .partner-status--verified { background: rgba(40,170,90,0.18); color: #5cd897; }
:root[data-theme="dark"] .partner-status--revoked { background: rgba(229,72,77,0.18); color: #ff9ba1; }

/* Partner store is answered by the retailer's own API rather than our scraper. */
.partner-store-live { font-size: 0.82rem; color: var(--success); }
.partner-site-select {
  width: auto; min-width: 150px; max-width: 200px;
  padding: 5px 8px; font-size: 0.82rem;
}
:root[data-theme="dark"] .partner-store-live { color: #5cd897; }

/* Phone app shell: the header and the dashboard's section strip.
   These live here rather than style.css because this file is loaded after it
   and owns .acct-nav-links and .admin-tabs. */
@media (max-width: 600px) {
  /* The header was carrying the section links as well, which the bottom tab
     bar now does, so it wrapped onto two crowded rows on every page. It keeps
     what the bar cannot: the logo, the theme switch, the staff and message
     icons, who you are, and the way out. */
  .acct-nav-links { display: none; }
  .acct-nav { gap: 6px; }
  .acct-sep { display: none; }
  .acct-who { max-width: 7.5em; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
  .acct-link--icon { min-width: 36px; min-height: 36px; }
  /* Everything that is left has to sit on one row at 375px, so the pieces
     give up the width they do not need. */
  .header--slim { padding-left: 12px; padding-right: 12px; }
  .acct-nav { flex-wrap: nowrap; }
  .logo-word { display: none; }
  .acct-me { gap: 6px; }
  .acct-me .acct-btn { padding: 6px 11px; font-size: .78rem; }
  .acct-avatar { width: 30px; height: 30px; }

  /* Dashboard sections scroll sideways as one strip instead of wrapping onto
     a second and third line. */
  .admin-tabs {
    flex-wrap: nowrap;
    overflow-x: auto;
    overscroll-behavior-x: contain;
    scroll-snap-type: x proximity;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
    padding-bottom: 2px;
  }
  .admin-tabs::-webkit-scrollbar { display: none; }
  .admin-tabs .admin-tab { flex: 0 0 auto; scroll-snap-align: start; }

  /* Remove buttons that were a bare letter become a proper target. */
  .fav-remove, .alert-remove, .collection-remove {
    display: inline-flex; align-items: center; justify-content: center;
    min-width: 36px; min-height: 36px; border-radius: 10px;
  }
}

/* ── Account merge ── */
.merge-list { list-style: none; margin: 14px 0 0; padding: 0; display: grid; gap: 10px; }
.merge-row {
  display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 12px;
  padding: 13px 15px; border: 1px solid var(--glass-line); border-radius: var(--r-sm);
  background: var(--glass); font-size: 0.9rem;
}
.merge-row--incoming { border-color: rgba(226,55,68,0.34); }
.merge-row .dash-note { display: block; margin-top: 3px; }
.merge-row-actions { display: flex; gap: 8px; flex-wrap: wrap; }
.merge-form { margin-top: 16px; }
.merge-form-row { display: flex; gap: 8px; flex-wrap: wrap; align-items: center; margin-top: 6px; }
.merge-form-row .modal-input { flex: 1 1 260px; min-width: 0; }
.merge-admin-row { display: flex; gap: 14px; flex-wrap: wrap; margin-top: 4px; }
.merge-admin-row .dash-label { flex: 1 1 200px; display: grid; gap: 5px; }
.merge-admin-actions { display: flex; gap: 8px; margin-top: 14px; flex-wrap: wrap; }
.merge-preview {
  margin: 14px 0 0; padding: 13px 15px; max-height: 280px; overflow: auto;
  border: 1px solid var(--glass-line); border-radius: var(--r-sm);
  background: var(--glass); color: var(--ink-2);
  font-size: 0.82rem; line-height: 1.6; white-space: pre-wrap; overflow-wrap: anywhere;
}

/* Support inbox: category rail, message list, and reading pane. */
.support-panel{padding:24px!important}.support-eyebrow{font-size:.65rem;font-weight:800;letter-spacing:.14em;color:var(--ink-2);text-transform:uppercase}.support-panel h2{margin:7px 0 9px}.support-inbox{display:grid;grid-template-columns:164px minmax(0,1fr);border:1px solid var(--glass-line);border-radius:18px;overflow:hidden;background:var(--glass-bg,rgba(128,128,128,.04))}.support-folders{padding:18px 12px;border-right:1px solid var(--glass-line)}.support-folders h3{font-size:.65rem;letter-spacing:.12em;text-transform:uppercase;color:var(--ink-2);margin:10px 10px}.support-folders h3:not(:first-child){margin-top:28px}.support-folder{display:flex;align-items:center;justify-content:space-between;gap:8px;padding:10px;border-radius:8px;color:var(--ink);text-decoration:none;font-size:.79rem;margin:3px 0;transition:background .15s}.support-folder:hover{background:rgba(128,128,128,.12)}.support-folder.is-active{background:var(--accent);color:#fff;font-weight:700}.support-folder.is-category-active{box-shadow:inset 2px 0 var(--accent);background:rgba(128,128,128,.1)}.support-folder span{font-size:.7rem;opacity:.65}.support-priority{font-size:.71rem;line-height:1.6;margin:24px 10px 5px;color:var(--ink-2)}.support-mailbox{min-width:0}.support-search{display:flex;gap:10px;padding:15px;border-bottom:1px solid var(--glass-line)}.support-search input{flex:1;min-width:0;background:rgba(128,128,128,.06);border:1px solid var(--glass-line);border-radius:10px;padding:10px 12px;color:var(--ink);font:inherit}.support-columns{display:grid;grid-template-columns:minmax(220px,35%) minmax(0,1fr);min-height:560px}.support-list{border-right:1px solid var(--glass-line);max-height:920px;overflow:auto}.support-row{display:block;width:100%;padding:18px 15px;border:0;border-bottom:1px solid var(--glass-line);background:transparent;color:var(--ink);font:inherit;text-align:left;cursor:pointer;transition:background .15s}.support-row:hover,.support-row:focus-visible{background:rgba(128,128,128,.12)}.support-row.is-selected{background:rgba(220,38,56,.08);box-shadow:inset 3px 0 var(--accent)}.support-row.is-unread .support-row-subject{font-weight:800}.support-row-top,.support-row-bottom{display:flex;align-items:center;justify-content:space-between;gap:10px}.support-row-top strong{font-size:.84rem;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.support-row-top time{font-size:.66rem;white-space:nowrap;color:var(--ink-2)}.support-row-subject{display:block;font-size:.8rem;margin:7px 0}.support-reference{color:var(--ink-2);font-weight:400}.support-row-preview{display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;font-size:.76rem;line-height:1.6;color:var(--ink-2)}.support-row-bottom{font-size:.65rem;color:var(--ink-2);margin-top:12px;flex-wrap:wrap}.support-new{color:var(--accent)!important;font-weight:700}.support-reader{padding:24px;min-width:0;max-height:920px;overflow:auto}.support-reader h3{margin:10px 0;font-size:1.2rem}.support-address{font-size:.82rem;overflow-wrap:anywhere;margin:0 0 8px}.support-date{font-size:.7rem;color:var(--ink-2)}.support-reader-actions{display:flex;flex-wrap:wrap;gap:8px;margin:20px 0}.support-reader-actions .acct-btn{font-size:.74rem}.support-original,.support-history{border-top:1px solid var(--glass-line);padding-top:18px;margin-top:20px}.support-reader h4{font-size:.75rem;margin:0 0 14px;letter-spacing:.02em}.support-message-text{white-space:pre-wrap;overflow-wrap:anywhere;font-size:.86rem;line-height:1.75;margin:8px 0}.support-reply-record{border:1px solid var(--glass-line);border-radius:12px;padding:16px;margin:12px 0}.support-reply-meta,.support-reply-state{font-size:.69rem;line-height:1.6;color:var(--ink-2);display:block;margin:6px 0}.support-reply-record strong{font-size:.8rem}.support-compose{padding:20px;border:1px solid var(--glass-line);border-radius:14px;margin-top:24px;background:rgba(128,128,128,.04)}.support-compose-from{font-size:.72rem;line-height:1.7;overflow-wrap:anywhere;color:var(--ink-2);margin:0 0 20px}.support-compose label{display:block;font-size:.75rem;font-weight:650;margin:16px 0}.support-compose input,.support-compose select,.support-compose textarea{display:block;width:100%;box-sizing:border-box;padding:10px 12px;border:1px solid var(--glass-line);border-radius:9px;margin-top:8px;font:inherit;color:var(--ink);background:var(--surface,#fff)}.support-compose select option{background:var(--surface,#fff);color:var(--ink)}.support-compose textarea{resize:vertical;line-height:1.65;min-height:180px}.support-compose-help,.support-compose-notice{font-size:.72rem;line-height:1.65;color:var(--ink-2);margin:20px 0}.support-compose-footer{display:flex;align-items:center;flex-wrap:wrap;gap:14px;margin-top:20px}.support-send-status{font-size:.75rem;line-height:1.6}.support-reader-empty,.support-list-empty{padding:70px 20px;text-align:center;color:var(--ink-2)}.support-reader-empty>span{font-size:2.5rem;opacity:.5}.support-reader-empty p,.support-list-empty p{font-size:.85rem;line-height:1.7;max-width:280px;margin:12px auto}.support-status{font-size:.8rem;line-height:1.6;margin:12px 0 0}.support-status.is-error{color:var(--danger,#dc3545)}
@media(min-width:1350px){.support-panel,.email-studio{max-width:1240px;width:calc(100vw - 110px);position:relative;left:50%;transform:translateX(-50%);box-sizing:border-box}}@media(max-width:950px){.support-inbox{grid-template-columns:1fr}.support-folders{display:flex;flex-wrap:wrap;gap:4px;border-right:0;border-bottom:1px solid var(--glass-line);padding:12px}.support-folders h3,.support-priority{display:none}.support-folder{font-size:.7rem;padding:8px}.support-columns{grid-template-columns:minmax(190px,34%) minmax(0,1fr)}.support-reader{padding:18px}.support-panel{padding:16px!important}}@media(max-width:650px){.support-columns{grid-template-columns:1fr}.support-list{max-height:340px;border-right:0;border-bottom:1px solid var(--glass-line)}.support-reader{max-height:none}.support-row{padding:13px}.support-reader-empty{padding:36px 15px}.support-compose{padding:16px}}

.support-compose input,.support-compose select,.support-compose textarea{background-color:var(--input-bg,#fff);font-family:inherit;font-size:.82rem;font-weight:400}.support-compose select{background-repeat:no-repeat;background-position:right 12px center;background-size:12px 8px;padding-right:36px}.support-compose textarea{scroll-margin:24px}

.support-email-preview{display:block;width:100%;height:650px;box-sizing:border-box;border:1px solid var(--glass-line);border-radius:12px;margin-top:20px;background:#f0edf3}.support-email-preview[hidden]{display:none}
.support-message-frame{display:block;width:100%;height:clamp(340px,60vh,620px);box-sizing:border-box;border:1px solid var(--glass-line);border-radius:10px;margin-top:10px;background:#fff}

.support-mailbox{display:flex;flex-direction:column}.support-columns{flex:1}.support-retention-note{margin:0;padding:12px 16px;font-size:.75rem;line-height:1.6;color:var(--ink-2);border-bottom:1px solid var(--glass-line)}
.support-inbox[data-folder="trash"] [data-support-category]{display:none}
.support-toolbar{display:flex;flex-wrap:wrap;gap:8px}
.support-compose--new{margin-top:0}