/* ============================================================
   67 CC — pages.css
   Page-specific layouts.
   ============================================================ */

/* SHARED */
.page-header { display: flex; align-items: center; justify-content: space-between; gap: var(--sp-4); margin-bottom: var(--sp-5); }
.page-header h2 { font-size: 18px; font-weight: 700; }

/* ──────────────────────────────────────
   AUTH PAGES
   ────────────────────────────────────── */
.page-auth {
  /* flex child of .main-content (the auth-mode scroller): shrink:0 lets the
     box grow past the viewport with its content so the parent can scroll
     it — without this it collapses to container height and clips. */
  flex-shrink: 0;
  min-height: 100%;
  display: flex;
  padding: var(--sp-4);
  background: var(--bg-secondary);
}
.page-auth--centered {
  flex-direction: column; padding: var(--sp-4); min-height: 100%;
  position: relative;
  background: var(--bg-secondary);
}
/* Soft accent halo behind the panel — the only "color" in the scene. */
.page-auth--centered::before {
  content: ''; position: absolute; inset: 0; pointer-events: none; z-index: 0;
  background:
    radial-gradient(85% 55% at 50% -8%, rgba(61,122,184,0.16), transparent 62%),
    radial-gradient(55% 45% at 50% 112%, rgba(61,122,184,0.05), transparent 70%);
}
/* Faint dot grid, masked so it fades out toward the edges. */
.page-auth--centered::after {
  content: ''; position: absolute; inset: 0; pointer-events: none; z-index: 0;
  background-image: radial-gradient(rgba(255,255,255,0.045) 1px, transparent 1.4px);
  background-size: 24px 24px;
  -webkit-mask-image: radial-gradient(68% 52% at 50% 34%, #000 0%, transparent 78%);
          mask-image: radial-gradient(68% 52% at 50% 34%, #000 0%, transparent 78%);
}
.page-auth--centered > * { position: relative; z-index: 1; }

/* ── Single centered panel ── */
.auth-panel {
  /* margin:auto on a flex item: centers the panel while it fits, and falls
     back to top-aligned (fully scrollable) once the panel outgrows the
     viewport — justify-content:center would clip its bottom instead. */
  width: 100%; max-width: 380px; margin: auto;
  background: var(--bg-primary);
  border: 1px solid var(--border-primary);
  border-radius: var(--radius-modal);
  padding: 20px 28px 28px;
  box-shadow: 0 24px 60px rgba(0,0,0,0.45);
  position: relative; overflow: hidden;
  animation: authIn 0.4s var(--ease-standard) both;
}
/* Hairline accent along the top edge. */
.auth-panel::after {
  content: ''; position: absolute; top: 0; left: 0; right: 0; height: 1px;
  background: linear-gradient(90deg, transparent, rgba(61,122,184,0.7), transparent);
  z-index: 2;
}
/* Soft sheen that follows the cursor across the panel.
   Position (--mx/--my) and opacity (--sheen) are eased in JS via rAF. */
.auth-panel::before {
  content: ''; position: absolute; inset: 0; pointer-events: none; z-index: 0;
  opacity: var(--sheen, 0); will-change: opacity, background;
  background: radial-gradient(440px circle at var(--mx, 50%) var(--my, 0%),
              rgba(61,122,184,0.14), transparent 60%);
}
.auth-panel > * { position: relative; z-index: 1; }
@keyframes authIn {
  from { opacity: 0; transform: translateY(10px) scale(0.985); }
  to   { opacity: 1; transform: none; }
}
.auth-panel__body {
  position: relative; z-index: 1;
  transition: opacity 0.09s ease, transform 0.09s ease, filter 0.09s ease;
}

/* ── Morph between auth panels (login ⇄ register) ── */
/* Out: the current body fades + lifts away while the panel height stays locked.
   The transition lives on the base rule (not just .morph-leave) so cancelling
   a leave mid-flight — e.g. register() failing before the swap — eases back
   in instead of snapping. */
.auth-panel.morph-leave .auth-panel__body {
  /* 0.12 вместо 0: в окне свапа остаётся призрак старого контента —
     без него панель уходит в чистый чёрный кадр между анимациями. */
  opacity: 0.12;
  transform: translateY(-8px) scale(0.975);
  filter: blur(3px);
}
/* In: the panel grows from the old height while the new body staggers in. */
.auth-panel.morph-enter { transition: height 0.34s var(--ease-standard); }
.auth-panel.morph-enter .auth-panel__body > * { animation: morphChildIn 0.18s var(--ease-standard) both; }
.auth-panel.morph-enter .auth-panel__body > *:nth-child(1) { animation-delay: 0s; }
.auth-panel.morph-enter .auth-panel__body > *:nth-child(2) { animation-delay: 0.02s; }
.auth-panel.morph-enter .auth-panel__body > *:nth-child(3) { animation-delay: 0.04s; }
.auth-panel.morph-enter .auth-panel__body > *:nth-child(4) { animation-delay: 0.06s; }
.auth-panel.morph-enter .auth-panel__body > *:nth-child(5) { animation-delay: 0.08s; }
@keyframes morphChildIn {
  from { opacity: 0; transform: translateY(10px) scale(0.98); filter: blur(3px); }
  to   { opacity: 1; transform: none; filter: blur(0); }
}

/* Head: enlarged brand + (optional) heading + subtitle. */
.auth-head { text-align: center; margin-bottom: 14px; }
.auth-brand { display: flex; justify-content: center; margin-bottom: 2px; }

/* Auth pages: the static PNG fallback (Tor/WebKit) renders edge-to-edge like
   the webm frame — no inset/offset here, the character fills the wrap the
   same way the video does. */
.auth-mascot-wrap .mascot-loop-static { padding: 0; transform: none; }

.auth-mascot-wrap { width: 172px; }

.auth-domain { display: block; font-size: 18px; font-weight: 700; letter-spacing: 2px; text-transform: uppercase; color: var(--text-secondary); margin-top: 4px; margin-bottom: 0; }
.auth-title { font-size: 21px; font-weight: 700; color: var(--text-primary); margin-top: 18px; margin-bottom: 6px; }
.auth-subtitle { font-size: 13.5px; color: var(--text-secondary); line-height: 1.45; }

/* Brand-only head (login): the big logo carries the block, subtitle sits just under it. */
.auth-head--brand { margin-bottom: 16px; }
.auth-head--brand .auth-subtitle { margin-top: 14px; }

/* Form. */
.auth-form { display: flex; flex-direction: column; gap: var(--sp-4); }
.auth-form [data-step-key] { display: flex; flex-direction: column; gap: var(--sp-4); }
.auth-form .form-group { margin: 0; }
.auth-form .form-label { display: block; font-size: 11px; font-weight: 700; letter-spacing: 1px; text-transform: uppercase; color: var(--text-tertiary); margin-bottom: 8px; }
.auth-form .form-input { height: 44px; width: 100%; background: var(--bg-input); border: 1px solid var(--border-primary); border-radius: var(--radius-btn); color: var(--text-primary); padding: 0 14px; font-size: 14px; outline: none; transition: border-color var(--t), box-shadow var(--t); }
.auth-form .form-input.form-mono, .auth-form #key { font-family: var(--font-mono); letter-spacing: 1px; }
.auth-form .form-input::placeholder { color: var(--text-tertiary); }
.auth-form .form-input:focus { border-color: var(--accent); box-shadow: 0 0 0 3px var(--accent-muted); }
.auth-form .form-input.shake { border-color: var(--danger); animation: inputShake 0.4s ease; }

/* Input with trailing paste / show-hide buttons (only one visible at a time). */
.form-input-wrap { position: relative; }
.auth-form .form-input.has-toggle { padding-right: 46px; }
.form-input-btn {
  position: absolute; top: 0; right: 0; height: 44px; width: 44px;
  display: flex; align-items: center; justify-content: center;
  background: none; border: none; padding: 0; cursor: pointer;
  color: var(--text-tertiary); transition: color var(--t);
}
.form-input-btn:hover { color: var(--text-secondary); }
.form-input-btn:active { transform: scale(0.9); }
.form-input-btn svg { width: 18px; height: 18px; }
.form-input-btn.hidden { display: none; }
.form-input-btn .hidden { display: none; }
@keyframes inputShake {
  0%, 100% { transform: translateX(0); }
  20% { transform: translateX(-6px); } 40% { transform: translateX(6px); }
  60% { transform: translateX(-4px); } 80% { transform: translateX(4px); }
}
.form-error { margin-top: 6px; font-size: 12px; color: var(--danger); }
.auth-form .form-hint { display: block; margin-top: 7px; font-size: 11px; color: var(--text-tertiary); transition: color var(--t); }
.auth-form .form-hint--err  { color: var(--danger); font-weight: 700; }
.auth-form .form-hint--lang { color: var(--warning); font-weight: 700; }
.auth-panel.panel-shake { animation: panelShake 0.42s cubic-bezier(0.36, 0.07, 0.19, 0.97); }
@keyframes panelShake {
  10%, 90% { transform: translateX(-2px); }
  20%, 80% { transform: translateX(4px); }
  30%, 50%, 70% { transform: translateX(-6px); }
  40%, 60% { transform: translateX(6px); }
}

/* Buttons inside the panel (form submit + continue). */
.auth-panel .btn-primary { height: 44px; border-radius: var(--radius-btn); font-size: 14px; font-weight: 700; background: var(--accent); border: none; color: #fff; cursor: pointer; transition: background var(--t), transform var(--t); }
.auth-panel .btn-primary::before, .auth-panel .btn-primary::after { display: none; }
.auth-panel .btn-primary:hover { background: var(--accent-hover); }
.auth-panel .btn-primary:active { background: var(--accent-active); transform: scale(0.985); }
.auth-panel .btn-full { width: 100%; }

/* Loading state — spinner + label. */
.auth-panel .btn-primary.is-loading { display: inline-flex; align-items: center; justify-content: center; gap: 9px; cursor: progress; }
.auth-panel .btn-primary.is-loading:hover { background: var(--accent); }
.btn-spinner {
  width: 16px; height: 16px; border-radius: 50%;
  border: 2px solid rgba(255, 255, 255, 0.35);
  border-top-color: #fff;
  animation: btnSpin 0.6s linear infinite;
}
@keyframes btnSpin { to { transform: rotate(360deg); } }

/* Divider. */
.auth-divider { display: flex; align-items: center; gap: 12px; margin: 20px 0 16px; }
.auth-divider::before, .auth-divider::after { content: ''; flex: 1; height: 1px; background: var(--border-primary); }
.auth-divider span { font-size: 12px; color: var(--text-tertiary); text-transform: uppercase; letter-spacing: 1px; }

/* Footer link. */
.auth-footer { text-align: center; font-size: 13px; color: var(--text-secondary); margin-top: 22px; }
.auth-footer a { color: var(--accent); font-weight: 700; }
.auth-footer a:hover { color: var(--accent-hover); }

/* Tor mirror plaque under auth forms — terminal prompt + shortened .onion. */
.auth-mirror {
  justify-content: center;
  margin-top: 18px; padding-top: 14px;
  border-top: 1px dashed var(--border-primary);
  font-size: 11px;
}
.auth-mirror::before { content: '>'; color: var(--success); font-weight: 700; margin-right: -2px; }
.auth-mirror .mirror-chip__addr { color: var(--text-tertiary); }
.auth-mirror:hover .mirror-chip__addr { color: var(--accent-hover); }

/* Registration key result. */
.key-result { background: var(--bg-input); border: 1px solid var(--border-primary); border-radius: var(--radius-card); padding: var(--sp-4); margin: 4px 0 14px; text-align: center; cursor: pointer; user-select: none; transition: border-color var(--t), background var(--t), transform var(--t); }
.key-result:hover { border-color: var(--accent); background: var(--bg-hover); }
.key-result:active { transform: scale(0.99); }
.key-result:focus-visible { outline: none; border-color: var(--accent); box-shadow: 0 0 0 3px var(--accent-muted); }
.key-value { font-family: var(--font-mono); font-size: 14px; letter-spacing: 1px; color: var(--accent); word-break: break-all; }
.key-copy-hint { display: block; margin-top: 8px; font-size: 10px; text-transform: uppercase; letter-spacing: 1px; color: var(--text-tertiary); }
.key-warning { margin: 0 0 18px; font-size: 12px; color: var(--warning); text-align: center; line-height: 1.5; }

@media (prefers-reduced-motion: reduce) {
  .auth-panel { animation: none; }
  .auth-panel::before { display: none; }
  .auth-form .form-input.shake { animation: none; }
  .auth-panel.morph-enter { transition: none; }
  .auth-panel.morph-enter .auth-panel__body > *,
  .auth-panel.morph-leave .auth-panel__body { animation: none; transition: none; }
}
@media (max-width: 480px) {
  .auth-panel { padding: 28px 20px 22px; }
}


/* HOME / PROXY LIST */
.home-page { max-width: 960px; margin: 0 auto; }
@media (min-width: 1400px) { .home-page { max-width: 1400px; } }
@media (min-width: 1900px) { .home-page { max-width: 1680px; } }
/* No inner entrance animation on .home-page/.proxy-list — the .page-enter
   transition on #main-content is the single page entrance. Inner fades used
   to replay on every rerender (filter change, loading→loaded), which read as
   a black flicker. */

/* Sort bar (sits between filter panel and proxy list) */
.sort-bar {
  display: flex;
  align-items: center;
  gap: var(--sp-3);
  background: var(--bg-primary);
  border: 1px solid var(--border-primary);
  border-radius: var(--radius-card);
  padding: var(--sp-3) var(--sp-4);
  margin-bottom: var(--sp-4);
  box-shadow: var(--shadow-card);
  flex-wrap: wrap;
}
.sort-bar__count {
  font-size: 12px;
  font-weight: 700;
  color: var(--text-secondary);
  white-space: nowrap;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  font-variant-numeric: tabular-nums;
  transition: color var(--t);
}
.sort-bar__count--bump {
  animation: countBump 0.35s var(--ease-out);
}
@keyframes countBump {
  0%   { opacity: 0.35; transform: translateY(-2px); }
  100% { opacity: 1;    transform: none; }
}

/* Sort — a single compact dropdown instead of a row of pills */
.sort-select-wrap {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 0 var(--sp-3);
  height: 32px;
  border: 1px solid var(--border-primary);
  border-radius: var(--radius-btn);
  background: var(--bg-input);
  color: var(--text-tertiary);
  cursor: pointer;
  transition: border-color var(--t), background-color var(--t);
}
.sort-select-wrap:hover { background: var(--bg-hover); border-color: var(--text-tertiary); }
.sort-select-wrap svg { flex-shrink: 0; opacity: 0.7; }
.sort-select {
  appearance: none; -webkit-appearance: none;
  background: transparent; border: none; outline: none;
  color: var(--text-primary);
  font-size: 12px; font-weight: 700;
  cursor: pointer;
}
.sort-select option { background: var(--bg-surface); color: var(--text-primary); }

/* Sort direction toggle — standalone arrow button next to the sort menu */
.sort-dir-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 32px; height: 32px;
  border: 1px solid var(--border-primary);
  border-radius: var(--radius-btn);
  background: var(--bg-input);
  color: var(--text-tertiary);
  cursor: pointer;
  transition: border-color var(--t), background-color var(--t), color var(--t);
}
.sort-dir-btn:hover { background: var(--bg-hover); border-color: var(--text-tertiary); color: var(--text-primary); }
.sort-dir-btn svg { flex-shrink: 0; }
.page-title-count {
  display: inline-flex; align-items: center; justify-content: center;
  min-width: 24px; height: 20px; padding: 0 6px;
  margin-left: 8px; border-radius: 10px;
  background: var(--accent); color: #fff;
  font-size: 11px; font-weight: 700;
}

/* FILTER PANEL */
.filter-panel {
  background: var(--bg-primary);
  border: 1px solid var(--border-primary);
  border-radius: var(--radius-card);
  padding: var(--sp-4);
  margin-bottom: var(--sp-4);
  box-shadow: var(--shadow-card);
}
.fp-row { display: grid; gap: var(--sp-3); margin-bottom: var(--sp-3); }
.fp-row:last-child { margin-bottom: 0; }

/* Сворачиваемые фильтры на телефоне: видны только avail-табы и кнопка
   «Filters ▾» — карты сразу в кадре. На десктопе тогла нет вообще. */
.fp-collapsible { display: contents; }
.fp-toggle {
  display: none;
  width: 100%; align-items: center; justify-content: space-between;
  padding: 8px 10px; margin-top: var(--sp-2);
  font-size: 13px; font-weight: 700; color: var(--text-secondary);
  background: var(--bg-input); border: 1px solid var(--border-primary);
  border-radius: var(--radius-btn); cursor: pointer;
}
.fp-toggle__left { display: inline-flex; align-items: center; gap: 6px; }
.fp-toggle__count {
  font-size: 11px; background: var(--accent); color: #fff;
  border-radius: 999px; padding: 1px 7px;
}
.fp-toggle__chev { display: inline-flex; transition: transform var(--t); }
.filter-panel--open .fp-toggle__chev { transform: rotate(180deg); }
@media (max-width: 768px) {
  .fp-toggle { display: flex; }
  .fp-collapsible { display: none; }
  .filter-panel--open .fp-collapsible { display: contents; }
  .filter-panel--open .fp-toggle { margin-bottom: var(--sp-2); }
}
/* force-mobile (телефон с десктопным вьюпортом) — то же поведение */
html.force-mobile .fp-toggle { display: flex; }
html.force-mobile .fp-collapsible { display: none; }
html.force-mobile .filter-panel--open .fp-collapsible { display: contents; }

/* Availability segmented control — prominent ALL / IN STOCK / ON REQUEST toggle. */
.fp-row--avail { display: block; }
.avail-seg {
  display: inline-flex; gap: 4px; padding: 4px;
  background: var(--bg-input); border: 1px solid var(--border-primary);
  border-radius: var(--radius-btn);
}
@media (max-width: 540px) { .avail-seg { display: flex; width: 100%; } }
.avail-seg__btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 7px;
  padding: 8px 18px; border: none; background: transparent; cursor: pointer;
  border-radius: calc(var(--radius-btn) - 3px);
  font-size: 13px; font-weight: 700; color: var(--text-secondary);
  transition: background var(--t), color var(--t), box-shadow var(--t);
  white-space: nowrap;
}
@media (max-width: 540px) { .avail-seg__btn { flex: 1; padding: 8px 6px; } }
.avail-seg__btn:hover { color: var(--text-primary); }
.avail-seg__btn--active { background: var(--bg-primary); color: var(--text-primary); box-shadow: var(--shadow-card); }
.avail-seg__btn--ok.avail-seg__btn--active { color: var(--success); }
.avail-seg__btn--on-request.avail-seg__btn--active { color: #d99a2b; }
.avail-seg__btn[data-availability="on_request"] { opacity: 0.5; cursor: not-allowed; }
.avail-seg__btn .stock-dot { width: 8px; height: 8px; }
.fp-row--4 { grid-template-columns: repeat(4, 1fr); }
.fp-row--geo { grid-template-columns: repeat(4, 1fr); }
.fp-row--bottom {
  display: flex; align-items: flex-end; gap: var(--sp-3);
}
.fp-row--bottom > .fp-field {
  /* Match a single column of the 4-col geo grid above:
     (100% - 3*gap) / 4.  gap = var(--sp-3) = 12px */
  flex: 0 0 calc((100% - 3 * 12px) / 4);
  max-width: calc((100% - 3 * 12px) / 4);
}
.fp-row--bottom > .fp-checks {
  flex: 1; min-width: 0;
}
@media (max-width: 900px) {
  .fp-row--geo { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 540px) {
  .fp-row--geo { grid-template-columns: 1fr; }
}
.fp-field--disabled .ms-trigger { opacity: 0.45; pointer-events: none; }

.fp-field { display: flex; flex-direction: column; gap: 6px; }
.fp-field__label {
  display: flex; align-items: center; height: 18px;
  font-size: 12px; font-weight: 700;
  color: var(--text-secondary); text-transform: uppercase; letter-spacing: 0.3px;
}
.fp-field__select {
  height: 40px; padding: 0 var(--sp-3);
  background: var(--bg-input);
  border: 1px solid var(--border-primary);
  border-radius: var(--radius-btn);
  color: var(--text-primary);
  font-size: 13px;
  outline: none;
  transition: border-color var(--t);
  cursor: pointer;
}
.fp-field__select:focus { border-color: var(--accent); }
.fp-field__select:disabled { opacity: 0.4; cursor: not-allowed; pointer-events: none; }

/* ── Multi-select (replaces <select> for country/state/city/brand/etc) ── */
.ms-count {
  display: inline-flex; align-items: center; justify-content: center;
  min-width: 18px; height: 16px; padding: 0 5px; margin-left: 6px;
  border-radius: 8px;
  background: var(--accent-muted); color: var(--accent);
  font-size: 10px; font-weight: 700;
}
.ms-row { display: flex; gap: 6px; align-items: stretch; }
.ms-row .ms-trigger { flex: 1; }
.ms-trigger {
  display: flex; align-items: center; justify-content: space-between;
  gap: 8px;
  height: 40px; padding: 0 var(--sp-3);
  background: var(--bg-input);
  border: 1px solid var(--border-primary);
  border-radius: var(--radius-btn);
  color: var(--text-primary);
  font-size: 13px;
  cursor: pointer;
  transition: border-color var(--t), background-color var(--t);
  width: 100%;
  text-align: left;
}
.ms-trigger:hover:not(:disabled) { border-color: var(--accent); }
.ms-trigger--active {
  background: var(--accent-muted);
  border-color: var(--accent);
  color: var(--accent);
}
.ms-trigger__text {
  flex: 1; min-width: 0;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.ms-trigger__chev { font-size: 10px; opacity: 0.6; transition: transform var(--t); }
.ms-trigger--active .ms-trigger__chev { transform: rotate(180deg); }

.ms-panel {
  position: absolute; z-index: 30;
  margin-top: 4px;
  min-width: 220px; max-width: 280px;
  background: var(--bg-surface);
  border: 1px solid var(--border-primary);
  border-radius: var(--radius-card);
  box-shadow: 0 8px 32px rgba(0, 0, 0, 0.45);
  overflow: hidden;
  animation: panelIn 0.16s var(--ease-out) both;
}
@keyframes panelIn {
  from { opacity: 0; transform: translateY(-4px) scale(0.98); }
  to   { opacity: 1; transform: none; }
}
.fp-field { position: relative; }
.ms-search {
  width: 100%; height: 32px;
  padding: 0 12px;
  background: var(--bg-input);
  border: none; border-bottom: 1px solid var(--border-primary);
  color: var(--text-primary); font-size: 13px;
  outline: none;
}
.ms-search::placeholder { color: var(--text-muted); font-style: italic; }
.ms-list {
  max-height: 240px; overflow-y: auto;
  padding: 4px;
}
.ms-option {
  display: flex; align-items: center; gap: 8px;
  padding: 7px 10px;
  border-radius: 6px;
  cursor: pointer; user-select: none;
  font-size: 13px; color: var(--text-secondary);
  transition: background-color var(--t), color var(--t);
}
.ms-option:hover { background: var(--bg-hover); color: var(--text-primary); }
.ms-option__box {
  width: 16px; height: 16px;
  border: 1.5px solid var(--border-primary);
  border-radius: 4px;
  display: inline-flex; align-items: center; justify-content: center;
  font-size: 10px; color: #fff;
  flex-shrink: 0;
  transition: background-color var(--t), border-color var(--t);
}
.ms-option--on { color: var(--text-primary); }
.ms-option--on .ms-option__box {
  background: var(--accent);
  border-color: var(--accent);
}
.ms-option__label { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ms-actions {
  border-top: 1px solid var(--border-primary);
  padding: 6px;
  display: flex; justify-content: flex-end;
}
.ms-clear {
  padding: 4px 10px;
  font-size: 11px; font-weight: 700;
  color: var(--text-muted);
  border-radius: 6px;
  transition: color var(--t), background-color var(--t);
}
.ms-clear:hover { color: var(--danger); background: var(--bg-hover); }

/* ── ZIP chip input ── */
.zip-nearby {
  display: inline-flex; align-items: center; gap: 5px;
  margin-left: auto;
  height: 18px; padding: 0 8px;
  border-radius: 999px;
  font-size: 10px; font-weight: 700;
  color: var(--text-muted);
  text-transform: uppercase; letter-spacing: 0.04em;
  cursor: pointer; user-select: none;
  transition: color var(--t), background-color var(--t);
  border: 1px solid transparent;
}
.zip-nearby:hover { color: var(--text-secondary); }
.zip-nearby input { display: none; }
.zip-nearby__box {
  width: 12px; height: 12px;
  border: 1.5px solid var(--border-primary);
  border-radius: 3px;
  display: inline-flex; align-items: center; justify-content: center;
  font-size: 9px; color: #fff;
  transition: background-color var(--t), border-color var(--t);
}
.zip-nearby--on { color: var(--accent); background: var(--accent-muted); border-color: var(--accent); }
.zip-nearby--on .zip-nearby__box { background: var(--accent); border-color: var(--accent); }
.zip-nearby--on .zip-nearby__box::after { content: '✓'; }

.zip-chips {
  display: flex; flex-wrap: wrap; gap: 5px;
  padding: 5px;
  background: var(--bg-input);
  border: 1px solid var(--border-primary);
  border-radius: var(--radius-btn);
  min-height: 40px;
  align-items: center;
  transition: border-color var(--t);
}
.zip-chips:focus-within { border-color: var(--accent); }
.zip-chip {
  display: inline-flex; align-items: center; gap: 4px;
  padding: 3px 4px 3px 8px;
  background: var(--accent-muted);
  color: var(--accent);
  border-radius: 999px;
  font-size: 12px; font-weight: 700;
  font-family: var(--font-mono);
  animation: chipIn 0.18s var(--ease-out) both;
}
@keyframes chipIn {
  from { opacity: 0; transform: scale(0.8); }
  to   { opacity: 1; transform: scale(1); }
}
.zip-chip__rm, .bin-chip__rm {
  width: 16px; height: 16px;
  display: inline-flex; align-items: center; justify-content: center;
  border-radius: 50%;
  font-size: 14px; line-height: 1;
  color: inherit; opacity: 0.7;
  transition: opacity var(--t), background-color var(--t);
}
.zip-chip__rm:hover, .bin-chip__rm:hover { opacity: 1; background: rgba(255, 255, 255, 0.1); }
.zip-input, .bin-input {
  flex: 1; min-width: 110px;
  background: transparent; border: none; outline: none;
  color: var(--text-primary);
  font-size: 13px; font-family: var(--font-mono);
  padding: 2px 4px;
}
.zip-input::placeholder, .bin-input::placeholder { color: var(--text-tertiary); }
.zip-clear, .bin-clear {
  margin-left: auto;
  padding: 3px 8px;
  font-size: 11px; font-weight: 700;
  color: var(--text-muted);
  border-radius: 6px;
  transition: color var(--t), background-color var(--t);
}
.zip-clear:hover, .bin-clear:hover { color: var(--danger); background: var(--bg-hover); }

.fp-field__textarea {
  background: var(--bg-input);
  border: 1px solid var(--border-primary);
  border-radius: var(--radius-btn);
  color: var(--text-primary);
  font-size: 13px; font-family: var(--font-mono);
  padding: var(--sp-2) var(--sp-3);
  resize: vertical; min-height: 40px;
  outline: none;
  transition: border-color var(--t);
}
.fp-field__textarea:focus { border-color: var(--accent); }

.fp-toggle {
  display: inline-flex; align-items: center; justify-content: center;
  height: 24px; padding: 0 10px;
  border-radius: var(--radius-pill);
  border: 1px solid var(--border-primary);
  background: var(--bg-input);
  color: var(--text-secondary);
  font-size: 11px; font-weight: 700;
  cursor: pointer;
  transition: all var(--t);
  align-self: flex-start; margin-top: 2px;
}
.fp-toggle:hover { border-color: var(--accent); color: var(--text-primary); }
.fp-toggle--active { background: var(--accent-muted); border-color: var(--accent); color: var(--accent); }

.fp-field--range { max-width: none; }
.fp-range {
  -webkit-appearance: none; appearance: none;
  width: 100%; height: 6px;
  background: var(--border-primary);
  border-radius: 3px;
  outline: none;
  cursor: pointer;
}
.fp-range::-webkit-slider-thumb {
  -webkit-appearance: none; appearance: none;
  width: 18px; height: 18px;
  border-radius: 50%;
  background: var(--accent);
  border: 2px solid var(--bg-surface);
  box-shadow: 0 0 4px rgba(0,0,0,0.3);
  cursor: pointer;
}
.fp-range::-moz-range-thumb {
  width: 18px; height: 18px;
  border-radius: 50%;
  background: var(--accent);
  border: 2px solid var(--bg-surface);
  box-shadow: 0 0 4px rgba(0,0,0,0.3);
  cursor: pointer;
}
.fp-range__labels {
  display: flex; justify-content: space-between;
  font-size: 12px; color: var(--text-secondary); font-variant-numeric: tabular-nums;
  margin-top: 4px;
}

/* Checkbox row pinned to the left edge of the search block. */
.fp-checks {
  display: flex;
  align-items: center;
  justify-content: flex-start;
  gap: 32px;
  padding-bottom: 8px;
}
.fp-check {
  display: flex; align-items: center; justify-content: center; gap: var(--sp-2);
  font-size: 14px; color: var(--text-secondary);
  cursor: pointer; user-select: none;
}
.fp-check input { display: none; }
.fp-check__box {
  width: 20px; height: 20px;
  border: 2px solid var(--border-primary);
  border-radius: 4px;
  display: inline-flex; align-items: center; justify-content: center;
  transition: all var(--t);
  flex-shrink: 0;
}
.fp-check input:checked ~ .fp-check__box {
  background: var(--accent); border-color: var(--accent);
}
.fp-check input:checked ~ .fp-check__box::after {
  content: '✓'; color: #fff; font-size: 12px; font-weight: 700;
}
.fp-check--green span:last-child { color: var(--success); }
.fp-check--green input:checked ~ .fp-check__box {
  background: var(--success); border-color: var(--success);
}
.fp-check--blue span:last-child { color: var(--accent); }
.fp-check--blue input:checked ~ .fp-check__box {
  background: var(--accent); border-color: var(--accent);
}

/* Proxy list */
.proxy-list {
  background: var(--bg-primary);
  border: 1px solid var(--border-primary);
  border-radius: var(--radius-card);
  overflow: clip;
}
/* When only the sort-bar / count changes (no list swap), keep things calm. */
.sort-bar { transition: opacity 0.18s var(--ease-out); }
.proxy-list__empty {
  padding: var(--sp-8) var(--sp-4); text-align: center;
}
.proxy-list__empty-icon { font-size: 40px; margin-bottom: var(--sp-3); }
.proxy-list__empty-text { font-size: 15px; font-weight: 700; }
.proxy-list__empty-hint { color: var(--text-secondary); margin-top: var(--sp-2); }

.proxy-row {
  display: flex; align-items: center; gap: var(--sp-3);
  padding: var(--sp-3) var(--sp-4);
  border-bottom: 1px solid var(--border-secondary);
  transition: background-color var(--t);
}
.proxy-row:last-child { border-bottom: none; }
.proxy-row:hover { background: var(--bg-hover); }
.proxy-row__body { flex: 1; min-width: 0; }

/* Top line: BIN → Subtype → Network → Class */
.proxy-row__top {
  display: flex; align-items: center; gap: var(--sp-2); flex-wrap: wrap;
  margin-bottom: 4px;
}
.proxy-row__bin {
  font-family: var(--font-mono);
  font-size: 16px;
  font-weight: 700;
  color: var(--text-primary);
  letter-spacing: 1px;
  margin-right: var(--sp-1);
}
.proxy-row__top .badge { padding: 2px 8px; font-size: 11px; font-weight: 700; }

/* Card class badge — distinct from gold-only */
.badge-class { background: rgba(234,179,8,0.1); color: #c8920a; border: 1px solid rgba(234,179,8,0.18); }
.badge-class--platinum  { background: rgba(148,163,184,0.12); color: #94a3b8; border-color: rgba(148,163,184,0.22); }
.badge-class--signature { background: rgba(99,102,241,0.12);  color: #818cf8; border-color: rgba(99,102,241,0.22); }
.badge-class--infinite  { background: rgba(236,72,153,0.10);  color: #f472b6; border-color: rgba(236,72,153,0.2); }
.badge-class--world     { background: rgba(20,184,166,0.10);  color: #2dd4bf; border-color: rgba(20,184,166,0.2); }
.badge-class--business  { background: rgba(251,146,60,0.10);  color: #fb923c; border-color: rgba(251,146,60,0.2); }
.badge-class--standard  { background: rgba(255,255,255,0.05); color: var(--text-secondary); border-color: rgba(255,255,255,0.08); }
.badge-class--gold      { background: rgba(234,179,8,0.1);    color: #c8920a; border-color: rgba(234,179,8,0.18); }

.badge-xs { padding: 1px 5px; font-size: 9px; }
.badge-trusted {
  padding: 1px 6px; font-size: 9px; font-weight: 700; letter-spacing: 0.3px;
  background: rgba(79,174,78,0.12); color: var(--success);
  border: 1px solid rgba(79,174,78,0.22); border-radius: 4px;
}

/* Subtype badges — each funding type gets a distinct color */
.badge-subtype {
  font-weight: 700;
  letter-spacing: 0.5px;
}
.badge-subtype--credit   { background: rgba(59, 130, 246, 0.15); color: #60a5fa; }
.badge-cb {
  background: rgba(20, 184, 166, 0.14); color: #2dd4bf;
  border: 1px solid rgba(20, 184, 166, 0.3);
  font-weight: 700; letter-spacing: 0.04em;
}
.field-tag--cb {
  color: #2dd4bf; border-color: rgba(20,184,166,0.3);
  background: rgba(20,184,166,0.08); font-weight: 600;
}
/* Checked Balance: пробитое досье (DOB/SSN) — янтарный акцент. */
.field-tag--dossier {
  color: #f5b942; border-color: rgba(245,185,66,0.35);
  background: rgba(245,185,66,0.10); font-weight: 700;
}
.badge-subtype--debit    { background: rgba(16, 185, 129, 0.15); color: #34d399; }
.badge-subtype--prepaid  { background: rgba(234, 179, 8, 0.12);  color: #facc15; }
.badge-subtype--corporate { background: rgba(168, 85, 247, 0.15); color: #c084fc; }

/* Meta line: Country · State · City · ZIP */
.proxy-row__meta {
  display: flex; align-items: center; gap: 6px;
  font-size: 12px;
  color: var(--text-secondary);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.proxy-row__meta .badge { padding: 1px 6px; font-size: 10px; }
.proxy-row__sep { color: var(--text-tertiary); font-size: 10px; }
.proxy-row__zip { font-size: 11px; }
.proxy-row__seller-line {
  display: flex; align-items: center; gap: 5px;
  margin-top: 4px;
}
.proxy-row__seller-tag {
  font-size: 9px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.4px;
  color: var(--text-tertiary); background: var(--bg-input);
  border: 1px solid rgba(255,255,255,0.07);
  padding: 1px 5px; border-radius: 4px; flex-shrink: 0;
}
.proxy-row__seller { font-style: normal; color: var(--text-secondary); font-weight: 500; font-size: 12px; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

/* Issuing bank line — shared by list rows, grid cards and cart items */
.proxy-row__bank, .proxy-card__bank {
  display: flex; align-items: center; gap: 5px;
  margin-top: 4px;
  font-size: 12px; font-weight: 500;
  color: var(--text-secondary);
  min-width: 0;
}
.proxy-row__bank svg, .proxy-card__bank svg {
  flex-shrink: 0; color: var(--accent); opacity: 0.75;
}
.proxy-row__bank span, .proxy-card__bank span {
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
/* Card balance line on grid cards (Checked Balance listings) */
.proxy-card__balance {
  display: flex; align-items: baseline; gap: 6px;
  margin-top: 6px;
  font-size: 10px; font-weight: 700; letter-spacing: 0.5px;
  text-transform: uppercase; color: var(--text-tertiary);
}
.proxy-card__balance strong {
  margin-left: auto;
  font-family: var(--font-mono); font-size: 15px; font-weight: 700;
  color: var(--success); text-transform: none; letter-spacing: 0;
}

/* Field format chips */
.proxy-row__fields {
  display: flex; flex-wrap: wrap; gap: 4px;
  margin-top: 6px;
}
.field-tag {
  font-size: 10px; font-weight: 700;
  color: #4ade80;
  background: rgba(74,222,128,0.08);
  border: 1px solid rgba(74,222,128,0.18);
  border-radius: 4px;
  padding: 1px 6px;
  letter-spacing: 0.2px;
  white-space: nowrap;
}

/* Row already in cart */
.proxy-row--in-cart {
  opacity: 0.6;
  border-left: 3px solid var(--success);
}

/* ── Compact table listing (list mode) ──────────────────────────────────── */
:root {
  /* Bank column is narrow — bank names are shown shortened ("Keybank",
     "Chase"), so no room is wasted on legal suffixes. */
  /* Columns have fixed MINIMUMS (minmax) but flex proportionally above them:
     fr weight equals the px base, so on wide screens free space is shared
     between all columns instead of being dumped into the actions column.
     Every row still uses one identical template, so alignment can't drift. */
  /* Weights are tuned to real content, not just equal growth: BANK gets the
     biggest share (long names), NETWORK next (e.g. "MASTERCARD"), TYPE
     slimmer ("CREDIT"), SELLER ~96px, flags/codes stay small. */
  --ptable-cols: minmax(72px, 72fr) minmax(90px, 85fr) minmax(70px, 65fr) minmax(110px, 135fr) minmax(64px, 64fr) minmax(56px, 56fr) minmax(50px, 50fr) minmax(58px, 58fr) minmax(52px, 52fr) minmax(96px, 96fr) 72px 120px;
  /* Same grids without the 52px Exp column — used when no listing carries
     expiry data, so the table doesn't render a column of dashes. */
  --ptable-cols-noexp: minmax(72px, 72fr) minmax(90px, 85fr) minmax(70px, 65fr) minmax(110px, 135fr) minmax(64px, 64fr) minmax(56px, 56fr) minmax(50px, 50fr) minmax(58px, 58fr) minmax(96px, 96fr) 72px 120px;
  /* Checked Balance table adds a Balance column between Seller and Price.
     Price/Actions stay FIXED px — their sticky `right` offsets depend on the
     exact width of the columns to their right, so they must never flex. */
  --ptable-cols-checked: minmax(64px, 64fr) minmax(80px, 75fr) minmax(64px, 60fr) minmax(100px, 130fr) minmax(56px, 56fr) minmax(40px, 40fr) minmax(50px, 50fr) minmax(44px, 44fr) minmax(88px, 88fr) minmax(96px, 88fr) 72px 120px;
  --ptable-cols-checked-noexp: minmax(64px, 64fr) minmax(80px, 75fr) minmax(64px, 60fr) minmax(100px, 130fr) minmax(56px, 56fr) minmax(40px, 40fr) minmax(50px, 50fr) minmax(88px, 88fr) minmax(96px, 88fr) 72px 120px;
}
.proxy-list--checked .ptable-row { grid-template-columns: var(--ptable-cols-checked); }
.proxy-list--noexp .ptable-row { grid-template-columns: var(--ptable-cols-noexp); }
.proxy-list--checked.proxy-list--noexp .ptable-row { grid-template-columns: var(--ptable-cols-checked-noexp); }
/* Lay every direct child (header row, country groups, flat rows, empty state)
   onto a single grid track sized to the WIDEST row. Without this each element
   sized to its own max-content — the head came out narrower than the rows, so
   its columns and sticky cells no longer lined up with the data beneath.
   container-type + cqw keeps children at least scrollport-wide when content
   is narrower than the viewport. */
.proxy-list--table {
  overflow-x: auto;
  display: grid;
  container-type: inline-size;
}
/* Когда внутри карточки-группы (страны / subtype-секции), фон списка
   затемняем до цвета краёв страницы — зазоры между карточками читаются
   как тёмные разделители, как поля слева и справа. Плоский режим
   (просто строки) не трогаем. */
.proxy-list--table:has(> .group-country),
.proxy-list--table:has(> .subtype-section) {
  background: var(--bg-secondary);
  /* Бордер списка проходил сквозь зазоры между карточками тонкими
     вертикальными линиями — убираем, разделение чисто тёмным фоном. */
  border: none;
  border-radius: 0;
  /* overflow-x:auto делал список scroll-контейнером → sticky-хедеры групп
     прибивались к нему и не прилипали к экрану. Группы скроллятся сами,
     внешний горизонтальный скролл не нужен. */
  overflow-x: clip;
}
.proxy-list--table > * {
  min-width: 100cqw;
}
/* Каждая группа страны скроллится горизонтально сама (внутри .gscroll), поэтому
   обёртка больше не растягивается до ширины контента — иначе внешний
   .proxy-list--table получал бы свой скроллбар и скроллил все группы разом.
   overflow: clip нужен только анимации сворачивания. */
.proxy-list--table .group-body__inner {
  min-width: 0;
  overflow: clip;
}
/* Per-country scroll container: держит широкие .ptable-row внутри себя,
   sticky-колонки (price/actions) прилипают к его правому краю.
   Скроллбар нативный, стилизованный — стилизованные ::-webkit-scrollbar
   в Chrome всегда классические и не прячутся по таймеру. */
.gscroll {
  overflow-x: scroll;
  overflow-y: clip;
  scrollbar-width: thin; /* Firefox: всегда видимый тонкий бар */
}
/* Верхний бар — тот же нативный скроллбар 1:1: scrollable трек с сайзером
   шириной scrollWidth контента; scrollLeft синкается в обе стороны. */
.gscroll-top--off,
.group-country--collapsed .gscroll-top { display: none; }
.gscroll-top__track {
  overflow-x: scroll;
  overflow-y: hidden;
  scrollbar-width: thin;
}
.gscroll-top__sizer {
  height: 1px;
}
.gscroll-top__track::-webkit-scrollbar,
.gscroll::-webkit-scrollbar {
  height: 5px;
  width: 5px;
}
.gscroll-top__track::-webkit-scrollbar-track,
.gscroll::-webkit-scrollbar-track {
  background: var(--bg-input);
  border-radius: 6px;
}
.gscroll-top__track::-webkit-scrollbar-thumb,
.gscroll::-webkit-scrollbar-thumb {
  background: var(--border);
  border-radius: 6px;
}
.ptable-row {
  display: grid;
  grid-template-columns: var(--ptable-cols);
  align-items: center;
  gap: var(--sp-2);
  padding: 0 var(--sp-2);
  /* width:100% makes rows fill a container that's wider than the fixed
     columns (e.g. inside country groups); the flexible last track absorbs the
     slack so the Add-to-cart cell always sits flush against the right edge. */
  width: 100%;
  min-width: max-content;
}
.ptable-head {
  min-height: 34px;
  background: var(--bg-surface);
  border-bottom: 1px solid var(--border-primary);
}
.ptable-head .ptable-cell {
  font-size: 10px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.4px;
  color: var(--text-tertiary);
}
.ptable-row:not(.ptable-head) {
  min-height: 42px;
  border-bottom: 1px solid var(--border-secondary);
  transition: background-color var(--t);
}
.ptable-row:not(.ptable-head):hover { background: var(--bg-hover); }
.ptable-row--in-cart:not(.ptable-head) { background: var(--accent-muted); }
.ptable-row--sold:not(.ptable-head) { opacity: 0.5; }
.ptable-cell {
  min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
  font-size: 12px; color: var(--text-primary);
}
.ptable-cell--check { display: flex; align-items: center; justify-content: center; }
.ptable-select { width: 14px; height: 14px; accent-color: var(--accent); cursor: pointer; }
.ptable-cell--bin {
  font-family: var(--font-mono); font-weight: 700; color: var(--text-primary); letter-spacing: 0.3px;
}
.ptable-cell--type, .ptable-cell--network { color: var(--text-secondary); text-transform: uppercase; font-size: 11px; letter-spacing: 0.2px; }
.ptable-cell--bank {
  color: var(--text-secondary);
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 0.2px;
}
.ptable-cell--country, .ptable-cell--state { color: var(--text-secondary); text-align: center; text-transform: uppercase; }
.ptable-cell--level { color: var(--text-secondary); text-align: center; text-transform: uppercase; font-size: 10px; letter-spacing: 0.2px; }
.ptable-cell--zip, .ptable-cell--exp, .ptable-cell--price {
  font-family: var(--font-mono); font-variant-numeric: tabular-nums;
}
/* Non-US zips (e.g. "EC1A 1BB") get clipped to the column width — a dotted
   underline hints they can be clicked to reveal the full value. */
.ptable-cell--zip--long { cursor: pointer; text-decoration: underline dotted; text-underline-offset: 3px; }
/* Длинные названия банков обрезаются как ZIP — точечное подчёркивание
   намекает, что по клику откроется полное название. */
.ptable-cell--bank--long { cursor: pointer; text-decoration: underline dotted; text-underline-offset: 3px; }
/* Price + Buy stay pinned to the right edge while the rest of the row scrolls
   under them — the two things a buyer actually needs should never require
   scrolling to find. */
.ptable-cell--price, .ptable-cell--actions {
  position: sticky;
  background: var(--bg-primary);
  z-index: 1;
}
.ptable-cell--price {
  right: 120px;
  font-weight: 700;
  padding-left: 6px;
  box-shadow: -8px 0 8px -8px rgba(0,0,0,0.35);
}
.ptable-cell--actions { right: 0; }
/* Checked Balance: Balance column sits before Price and is pinned together
   with Price/actions — it becomes the leftmost sticky cell (120+72=192px). */
.ptable-cell--balance {
  position: sticky; right: 192px;
  background: var(--bg-primary); z-index: 1;
  display: flex; flex-direction: column; justify-content: center; gap: 1px;
  padding-left: 6px;
  box-shadow: -8px 0 8px -8px rgba(0,0,0,0.35);
}
.avl-label {
  font-family: var(--font-sans); font-size: 9px; font-weight: 700;
  letter-spacing: 0.8px; text-transform: uppercase;
  color: var(--text-tertiary); white-space: nowrap;
}
.avl-val {
  font-family: var(--font-mono); font-variant-numeric: tabular-nums;
  font-weight: 700; color: var(--success); font-size: 13px;
}
.proxy-list--checked .ptable-cell--price { box-shadow: none; }
.ptable-head .ptable-cell--price, .ptable-head .ptable-cell--actions { background: var(--bg-surface); z-index: 2; }
.ptable-head .ptable-cell--balance { background: var(--bg-surface); z-index: 2; color: var(--text-tertiary); font-family: var(--font-sans); }
.ptable-row:not(.ptable-head):hover .ptable-cell--price,
.ptable-row:not(.ptable-head):hover .ptable-cell--balance,
.ptable-row:not(.ptable-head):hover .ptable-cell--actions { background: var(--bg-hover); }
/* In-cart tint on sticky cells must be opaque: accent-muted alone is 16%
   alpha, so scrolled-under columns bleed through the pinned cells. Layer the
   same tint over the solid cell base instead. */
.ptable-row--in-cart:not(.ptable-head) .ptable-cell--price,
.ptable-row--in-cart:not(.ptable-head) .ptable-cell--balance,
.ptable-row--in-cart:not(.ptable-head) .ptable-cell--actions {
  background: linear-gradient(var(--accent-muted), var(--accent-muted)), var(--bg-primary);
}
.ptable-soldout { color: var(--text-tertiary); font-family: var(--font-sans); font-weight: 500; font-size: 11px; }
.ptable-cell--data { display: flex; gap: 3px; overflow-x: auto; }
.ptable-chip {
  font-family: var(--font-mono); font-size: 9px; font-weight: 700; letter-spacing: 0.2px;
  color: var(--text-secondary); background: var(--bg-input); border: 1px solid var(--border-primary);
  border-radius: 4px; padding: 1px 4px; flex-shrink: 0;
}
.ptable-cell--tags { display: flex; gap: 4px; }
.ptable-tag {
  font-size: 9px; font-weight: 700; letter-spacing: 0.3px; border-radius: 4px; padding: 1px 5px;
}
.ptable-tag--new { color: var(--accent-hover); background: var(--accent-muted); border: 1px solid rgba(61,122,184,0.3); }
.ptable-tag--ref { color: var(--text-secondary); background: var(--bg-input); border: 1px solid var(--border-primary); }
.ptable-cell--seller { display: flex; align-items: center; gap: 4px; }
.ptable-seller-name {
  min-width: 0; flex: 1; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
  font-size: 11px; font-weight: 500; color: var(--text-primary);
}
.ptable-seller-check { color: var(--success); font-size: 12px; flex-shrink: 0; }
/* padding-right lives on the sticky cell itself, not the row: when the row
   overflows and this cell sticks to the scrollport edge, the row's own
   padding-right is scrolled off — the button would sit flush against the
   card border (and get clipped by its corner radius) without this. */
.ptable-cell--actions { display: flex; align-items: center; justify-content: flex-end; gap: 6px; overflow: visible; padding-right: var(--sp-2); }
.ptable-icon-btn {
  display: flex; align-items: center; justify-content: center;
  width: 26px; height: 26px; border-radius: var(--radius-btn);
  background: var(--bg-input); color: var(--text-secondary);
  border: 1px solid var(--border-primary); flex-shrink: 0;
  transition: background-color var(--t), color var(--t);
}
.ptable-icon-btn:hover:not(:disabled) { background: var(--bg-hover); color: var(--text-primary); }
.ptable-icon-btn--active { color: var(--accent-hover); border-color: rgba(61,122,184,0.3); }
.ptable-icon-btn:disabled { opacity: 0.4; cursor: not-allowed; }
.ptable-buy-btn {
  display: flex; align-items: center; gap: 4px; flex-shrink: 0;
  padding: 0 var(--sp-2); height: 26px; border-radius: var(--radius-btn);
  background: var(--accent); color: #fff; font-size: 11px; font-weight: 700;
  transition: background-color var(--t);
}
.ptable-buy-btn:hover:not(:disabled) { background: var(--accent-hover); }
.ptable-buy-btn:disabled { opacity: 0.4; cursor: not-allowed; }
.ptable-buy-btn--in-cart { background: var(--success); }
.ptable-buy-btn--in-cart:hover:not(:disabled) { background: var(--danger); }

.ptable-bulkbar {
  display: flex; align-items: center; gap: var(--sp-3);
  padding: var(--sp-2) var(--sp-3); margin-bottom: var(--sp-2);
  background: var(--accent-muted); border: 1px solid rgba(61,122,184,0.3);
  border-radius: var(--radius-btn); font-size: 12px; color: var(--text-primary);
}
.ptable-bulkbar > span { font-weight: 600; margin-right: auto; }

.proxy-row__aside {
  display: flex; flex-direction: column; align-items: flex-end;
  gap: 3px; flex-shrink: 0; text-align: right;
}
.proxy-row__price { font-family: var(--font-mono); font-weight: 700; font-size: 15px; }
.proxy-row__stock { font-size: 11px; }

/* In-cart button state — click to remove */
.proxy-row__cart-btn--in-cart {
  border-color: var(--success) !important;
  color: var(--success) !important;
  background: rgba(74, 222, 128, 0.08) !important;
  cursor: pointer;
  font-size: 12px;
}
.proxy-row__cart-btn--in-cart:hover {
  border-color: var(--danger) !important;
  color: var(--danger) !important;
  background: rgba(224, 96, 85, 0.1) !important;
  box-shadow: 0 2px 8px rgba(224, 96, 85, 0.15);
}
/* Swap "In cart" text to "Remove" on hover via CSS content trick */
.proxy-row__cart-btn--in-cart span {
  position: relative;
  display: inline-block;
}
.proxy-row__cart-btn--in-cart:hover span {
  color: transparent;
}
.proxy-row__cart-btn--in-cart:hover span::after {
  content: 'Remove';
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  color: var(--danger);
  white-space: nowrap;
  font-size: 12px;
  font-weight: 700;
}

/* Country flag in avatar */
.flag-avatar {
  display: inline-flex; align-items: center; justify-content: center;
  width: 40px; height: 40px;
  border-radius: var(--radius-pill);
  background: var(--bg-surface);
  font-size: 22px;
  flex-shrink: 0;
}

/* PROXY DETAIL */
.proxy-detail { display: flex; flex-direction: column; gap: var(--sp-4); padding-bottom: var(--sp-6); }
.proxy-cover {
  display: flex; align-items: center; justify-content: center;
  height: 120px;
  background: var(--grad-hero);
  border-radius: var(--radius-card);
}
.proxy-cover__icon {
  width: 64px; height: 64px;
  display: flex; align-items: center; justify-content: center;
  font-size: 36px; color: #fff;
  background: rgba(255, 255, 255, 0.18);
  border-radius: var(--radius-pill);
}
.proxy-badges { display: flex; gap: var(--sp-2); flex-wrap: wrap; }
.proxy-title { font-size: 21px; font-weight: 700; line-height: 1.25; }
.proxy-price-row { display: flex; align-items: center; gap: var(--sp-3); }
.proxy-price { font-family: var(--font-mono); font-size: 22px; font-weight: 700; color: var(--accent); }

.proxy-info-card {
  background: var(--bg-primary);
  border: 1px solid var(--border-primary);
  border-radius: var(--radius-card);
  padding: var(--sp-4);
}
.proxy-section-title {
  font-size: 13px; font-weight: 700; color: var(--text-secondary);
  text-transform: uppercase; letter-spacing: 0.5px; margin-bottom: var(--sp-3);
}
.proxy-details-grid { display: grid; grid-template-columns: 1fr 1fr; gap: var(--sp-3); }
.detail-item { display: flex; flex-direction: column; gap: 2px; }
.detail-label { font-size: 12px; color: var(--text-secondary); }
.detail-value { font-size: 14px; font-weight: 500; }
.detail-mono { font-family: var(--font-mono); font-size: 13px; }

.proxy-buybar {
  position: sticky; bottom: var(--sp-3); margin-top: var(--sp-2);
  background: var(--bg-primary);
  border: 1px solid var(--border-primary);
  border-radius: var(--radius-card);
  box-shadow: var(--shadow-modal);
  padding: var(--sp-3);
}
.proxy-buybar__bal { font-size: 12px; color: var(--text-secondary); text-align: center; margin-bottom: var(--sp-2); }

.btn-back--inline {
  display: inline-flex; align-items: center; justify-content: center;
  gap: 6px; height: 36px; padding: 0 14px 0 10px;
  border-radius: 10px;
  background: var(--bg-surface);
  border: 1px solid var(--border-primary);
  color: var(--text-primary);
  font-size: 14px; font-weight: 500; cursor: pointer;
  margin-right: var(--sp-3); white-space: nowrap;
  transition: background-color var(--t), border-color var(--t), color var(--t), transform 0.1s var(--ease-out);
}
.btn-back--inline:hover { background: var(--bg-hover); color: var(--accent); }
.btn-back--inline:active { transform: scale(0.96); }
.page-title { display: inline-flex; align-items: center; }
.page-title-text { font-size: 17px; font-weight: 700; }

/* WALLET */
.wallet-page { max-width: 1400px; margin: 0 auto; }
.wallet-section-title { font-size: 13px; font-weight: 700; color: var(--text-secondary); text-transform: uppercase; letter-spacing: 0.5px; margin-bottom: var(--sp-3); }

/* ── We accept strip ───────────────────────────────────────────────────── */
.wallet-accept-label { font-size: 11px; font-weight: 700; color: var(--text-secondary); text-transform: uppercase; letter-spacing: 0.6px; margin-bottom: var(--sp-3); }
.wallet-accept-cards { display: flex; gap: var(--sp-3); margin-bottom: var(--sp-5); flex-wrap: wrap; }
.wallet-accept-card {
  display: flex; flex-direction: column; align-items: center; gap: var(--sp-2);
  padding: var(--sp-4) var(--sp-5);
  background: var(--bg-primary);
  border: 1px solid var(--border-primary);
  border-radius: var(--radius-card);
  cursor: pointer; flex: 1; min-width: 100px;
  transition: background-color var(--t), border-color var(--t), transform 0.15s, box-shadow var(--t);
}
/* Display-only cards: no click behavior, always show coin-color border on hover */
.wallet-accept-card--display {
  cursor: default;
  border-color: color-mix(in srgb, var(--coin-color, var(--accent)) 35%, transparent);
  box-shadow: 0 0 0 1px color-mix(in srgb, var(--coin-color, var(--accent)) 15%, transparent);
}
.wallet-accept-card--display:hover {
  border-color: var(--coin-color, var(--accent));
  box-shadow: 0 0 0 1px color-mix(in srgb, var(--coin-color, var(--accent)) 35%, transparent), 0 4px 16px rgba(0,0,0,0.2);
  transform: translateY(-2px);
}
/* Selectable cards (withdrawal) */
.wallet-accept-card:not(.wallet-accept-card--display):hover { background: var(--bg-hover); transform: translateY(-2px); box-shadow: 0 4px 16px rgba(0,0,0,0.2); }
.wallet-accept-card:not(.wallet-accept-card--display):active { transform: translateY(0) scale(0.98); }
.wallet-accept-card--active { border-color: var(--coin-color, var(--accent)); box-shadow: 0 0 0 1px color-mix(in srgb, var(--coin-color, var(--accent)) 30%, transparent), 0 4px 20px color-mix(in srgb, var(--coin-color, var(--accent)) 15%, transparent); }
.wallet-accept-card__coin {
  width: 44px; height: 44px; border-radius: var(--radius-pill);
  display: flex; align-items: center; justify-content: center;
  font-size: 22px; font-weight: 900;
  background: color-mix(in srgb, var(--coin-color, var(--accent)) 18%, transparent);
  color: var(--coin-color, var(--accent));
}
.wallet-accept-card__name { font-size: 13px; font-weight: 700; }
.wallet-accept-card__code { font-size: 11px; color: var(--text-secondary); }

/* Legacy classes kept for old code paths */
.wallet-crypto-cards { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--sp-3); margin-bottom: var(--sp-5); }
.wallet-crypto-card {
  display: flex; flex-direction: column; align-items: center; gap: var(--sp-2);
  padding: var(--sp-4);
  background: var(--bg-primary);
  border: 1px solid var(--border-primary);
  border-radius: var(--radius-card);
}
.wallet-crypto-card__icon { width: 36px; height: 36px; border-radius: var(--radius-pill); display: flex; align-items: center; justify-content: center; font-weight: 700; color: #fff; background: var(--accent); }
.wallet-crypto-card__name { font-size: 13px; font-weight: 700; }
.wallet-crypto-card__symbol { font-size: 12px; color: var(--text-secondary); }

.wallet-deposit {
  background: var(--bg-primary);
  border: 1px solid var(--border-primary);
  border-radius: var(--radius-card);
  padding: var(--sp-5);
  margin-bottom: var(--sp-5);
}
.wallet-deposit__form { display: flex; flex-direction: column; gap: var(--sp-4); }
.wallet-field__label { font-size: 12px; font-weight: 700; color: var(--text-secondary); margin-bottom: var(--sp-2); display: block; }
.wallet-field__input-wrap {
  display: flex; align-items: center;
  background: var(--bg-input);
  border: 1px solid var(--border-primary);
  border-radius: var(--radius-btn);
  padding: 0 var(--sp-3);
  transition: border-color var(--t);
}
.wallet-field__input-wrap:focus-within { border-color: var(--accent); }
.wallet-field__prefix { color: var(--text-secondary); font-family: var(--font-mono); }
.wallet-field__input { flex: 1; background: transparent; border: none; outline: none; color: var(--text-primary); padding: var(--sp-2); font-family: var(--font-mono); }

.wallet-address__code {
  display: flex; align-items: center; gap: var(--sp-2);
  background: var(--bg-input);
  border: 1px solid var(--border-primary);
  border-radius: var(--radius-btn);
  padding: var(--sp-2) var(--sp-3);
  font-family: var(--font-mono); font-size: 13px; word-break: break-all;
}
.wallet-address__copy { margin-left: auto; flex-shrink: 0; }

.wallet-qr { display: flex; flex-direction: column; align-items: center; gap: var(--sp-2); }
.wallet-qr__box {
  width: 140px; height: 140px;
  background: #fff; border-radius: var(--radius-btn); padding: var(--sp-2);
  display: flex; align-items: center; justify-content: center;
}
.wallet-qr__pattern {
  width: 100%; height: 100%;
  background-image: repeating-linear-gradient(0deg, #000 0 8px, #fff 8px 16px), repeating-linear-gradient(90deg, #000 0 8px, transparent 8px 16px);
  background-blend-mode: difference;
  opacity: 0.9; border-radius: 2px;
}
.wallet-qr__hint { font-size: 12px; color: var(--text-secondary); }

/* ── Invoice box ──────────────────────────────────────────────────────── */
.wallet-invoice {
  display: flex; flex-direction: column; align-items: center; gap: var(--sp-3);
  padding: var(--sp-6); text-align: center;
}
.wallet-invoice__header { display: flex; flex-direction: column; align-items: center; gap: var(--sp-2); }
.wallet-invoice__status-icon {
  width: 48px; height: 48px;
  display: flex; align-items: center; justify-content: center;
  color: var(--accent);
}
.wallet-invoice__status-icon--ok { color: var(--success); }
.wallet-invoice__status-icon--ok svg { width: 40px; height: 40px; stroke-width: 2.5; }
.wallet-invoice__status-icon--seen { color: var(--success); }
.wallet-invoice__status-label { font-size: 15px; font-weight: 700; }
.wallet-invoice__amount { font-size: 22px; font-weight: 800; color: var(--success); font-family: var(--font-mono); }
.wallet-invoice--confirmed { text-align: center; }
.wallet-invoice--confirmed .wallet-invoice__amount { font-size: 27px; margin: 0 auto; }
.wallet-invoice--confirmed .wallet-invoice__status-label { font-size: 17px; }
.wallet-invoice__meta { display: flex; gap: var(--sp-2); font-size: 13px; }
.wallet-invoice__meta-label { color: var(--text-secondary); }
.wallet-invoice__meta-value { font-weight: 700; }
.wallet-invoice__addr-row {
  display: flex; align-items: center; gap: var(--sp-2);
  background: var(--bg-input); border: 1px solid var(--border-primary);
  border-radius: var(--radius-btn); padding: var(--sp-2) var(--sp-3);
  font-family: var(--font-mono); font-size: 12px; width: 100%;
}
.wallet-invoice__addr { flex: 1; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.wallet-invoice__copy { margin-left: auto; flex-shrink: 0; }
.wallet-invoice__hint { font-size: 12px; color: var(--text-secondary); }
.wallet-invoice__hint--warn { color: #f0c45c; margin-top: 6px; max-width: 340px; margin-left: auto; margin-right: auto; }
.wallet-invoice__btcpay-btn {
  display: flex; align-items: center; justify-content: center; gap: var(--sp-2);
  width: 100%; margin: var(--sp-4) 0 var(--sp-2);
  text-decoration: none;
}
.wallet-invoice__btcpay-btn svg { width: 16px; height: 16px; flex-shrink: 0; }
.wallet-field__hint { font-size: 11px; color: var(--text-secondary); font-weight: 400; margin-left: var(--sp-2); }
/* Deposit fee notice — крупнее и по центру, между инпутом и кнопкой */
.wallet-fee-note { font-size: 13px; color: var(--text-secondary); font-weight: 500; text-align: center; margin: calc(var(--sp-2) * -1) 0 calc(var(--sp-2) * -1); }
.wallet-fee-note b { color: var(--text-primary); }
.wallet-invoice__new { width: 100%; }
.wallet-invoice__check { width: 100%; }
/* Второй ряд действий: copy link + cancel — две кнопки в ряд,
   на узком экране переносятся в колонку. */
.wallet-invoice__secondary {
  display: flex; gap: var(--sp-2); width: 100%;
}
.wallet-invoice__secondary > * { flex: 1; }
.wallet-invoice__link-btn svg { width: 14px; height: 14px; vertical-align: -2px; }
.wallet-invoice__cancel {
  width: 100%;
  color: var(--danger);
  border-color: color-mix(in srgb, var(--danger) 35%, transparent);
}
.wallet-invoice__cancel:hover { background: color-mix(in srgb, var(--danger) 10%, transparent); }
@media (max-width: 400px) {
  .wallet-invoice__secondary { flex-direction: column; }
}
/* Прямая оплата без чекаута: компактные ряды «монета | адрес | сумма».
   Обе плашки — кликабельные (tap to copy), иконка-«кнопка» в подписи. */
.wallet-pm-list { margin: var(--sp-3) 0; width: 100%; }
.wallet-pm__warn {
  font-size: 15px; font-weight: 800; letter-spacing: .05em;
  color: var(--danger); text-align: center;
}
.wallet-pm__sub {
  font-size: 11px; color: var(--text-tertiary); text-align: center;
  margin: 3px 0 var(--sp-2);
}
.wallet-pm {
  display: flex; align-items: stretch; gap: var(--sp-2);
  margin-bottom: var(--sp-2);
}
.wallet-pm__code {
  flex: 0 0 84px; align-self: center;
  font-size: 12px; font-weight: 800; text-align: center;
}
.wallet-pm__box {
  flex: 1; min-width: 0;
  display: flex; flex-direction: column; align-items: center; gap: 1px;
  padding: 6px 10px; cursor: pointer;
  background: var(--bg-input); border: 1px solid var(--border-primary);
  border-radius: var(--radius-btn);
  color: var(--text-primary); font-family: inherit;
  transition: border-color var(--t), background var(--t);
}
.wallet-pm__box:hover { border-color: var(--accent); }
.wallet-pm__box:active { background: var(--bg-hover); }
.wallet-pm__box--amt { flex: 0 0 auto; min-width: 110px; }
.wallet-pm__val {
  font-family: var(--font-mono); font-size: 12.5px;
  max-width: 100%; overflow: hidden; text-overflow: ellipsis;
  white-space: nowrap;
}
.wallet-pm__cap {
  display: inline-flex; align-items: center; gap: 3px;
  font-size: 9px; color: var(--text-tertiary);
  text-transform: uppercase; letter-spacing: .06em;
}
.wallet-pm__cap svg { width: 10px; height: 10px; }
/* На ПК «tap to copy» приклеен к нижней кромке плашки — однозначно
   читается что плашка кликабельна. На телефоне остаётся под значением. */
@media (min-width: 769px) {
  html:not(.force-mobile) .wallet-pm__box {
    position: relative; min-height: 52px; justify-content: center;
    padding-bottom: 18px;
  }
  html:not(.force-mobile) .wallet-pm__cap { position: absolute; bottom: 4px; }
}

/* Цифровой таймер инвойса: 4 плашки MM : SS в фирменном акценте */
.inv-timer {
  display: inline-flex; align-items: center; gap: 4px;
  margin: 2px auto 4px;
}
.inv-timer__d {
  width: 38px; height: 48px; border-radius: 8px;
  display: inline-flex; align-items: center; justify-content: center;
  font-family: var(--font-mono); font-size: 24px; font-weight: 800;
  font-variant-numeric: tabular-nums;
  color: var(--accent);
  background: var(--bg-input);                       /* fallback Safari<16.2 */
  background: color-mix(in srgb, var(--accent) 10%, var(--bg-input));
  border: 1px solid var(--accent);                   /* fallback */
  border: 1px solid color-mix(in srgb, var(--accent) 35%, transparent);
}
.inv-timer__colon {
  font-size: 24px; font-weight: 800; color: var(--accent);
  padding: 0 2px;
}
@media (max-width: 768px) {
  .inv-timer__d { width: 34px; height: 44px; font-size: 21px; }
  .inv-timer__colon { font-size: 21px; }
}
html.force-mobile .inv-timer__d { width: 34px; height: 44px; font-size: 21px; }
html.force-mobile .inv-timer__colon { font-size: 21px; }
/* Красная строка над таймером — крупнее «SEND THE EXACT AMOUNT» (15px) */
.inv-warn {
  font-size: 17px; font-weight: 800; letter-spacing: .04em;
  color: var(--danger); text-align: center; margin-bottom: 2px;
}
.inv-warn-sub {
  font-size: 12px; line-height: 1.4; color: var(--text-tertiary);
  text-align: center; margin-bottom: 6px;
}

/* Персистентная плашка «инвойс протух — мониторим 24ч»:
   фикс справа внизу, живёт до крестика (localStorage). */
.exp-inv {
  position: fixed; right: 14px; bottom: 14px; z-index: 90;
  max-width: 320px; padding: 12px 34px 12px 14px;
  background: var(--bg-primary);
  border: 1px solid var(--danger);                   /* fallback Safari<16.2 */
  border: 1px solid color-mix(in srgb, var(--danger) 45%, transparent);
  border-left: 3px solid var(--danger);
  border-radius: var(--radius-card);
  box-shadow: 0 10px 30px rgba(0,0,0,.5);
}
.exp-inv__title {
  font-size: 13px; font-weight: 800; color: var(--danger);
  margin-bottom: 3px;
}
.exp-inv__text { font-size: 12px; line-height: 1.45; color: var(--text-secondary); }
.exp-inv__x {
  position: absolute; top: 6px; right: 8px;
  width: 22px; height: 22px; border: none; border-radius: 6px;
  background: transparent; color: var(--text-tertiary);
  font-size: 16px; line-height: 1; cursor: pointer;
}
.exp-inv__x:hover { color: var(--text-primary); background: var(--bg-hover); }
@media (max-width: 768px) {
  .exp-inv {
    right: 10px; left: 10px; max-width: none;
    bottom: calc(64px + env(safe-area-inset-bottom, 0px));
  }
}
html.force-mobile .exp-inv {
  right: 10px; left: 10px; max-width: none;
  bottom: calc(64px + env(safe-area-inset-bottom, 0px));
}
/* Телефон: монета + сумма в первой строке, адрес на всю ширину ниже */
@media (max-width: 768px) {
  .wallet-pm { flex-wrap: wrap; }
  .wallet-pm__code { flex: 0 0 auto; }
  .wallet-pm__box--amt { flex: 1; min-width: 0; }
  .wallet-pm__box--addr { flex: 1 1 100%; order: 3; }
}
html.force-mobile .wallet-pm { flex-wrap: wrap; }
html.force-mobile .wallet-pm__code { flex: 0 0 auto; }
html.force-mobile .wallet-pm__box--amt { flex: 1; min-width: 0; }
html.force-mobile .wallet-pm__box--addr { flex: 1 1 100%; order: 3; }

/* Spinner animation */
.wallet-spinner { width: 32px; height: 32px; animation: wallet-spin 0.9s linear infinite; }
@keyframes wallet-spin { to { transform: rotate(360deg); } }

.wallet-history { background: var(--bg-primary); border: 1px solid var(--border-primary); border-radius: var(--radius-card); overflow: hidden; margin-top: var(--sp-5); margin-bottom: var(--sp-5); }
.wallet-tx__table-wrap { overflow-x: auto; }
.wallet-tx__table-wrap > .wallet-tx__empty { padding: var(--sp-8) var(--sp-4); }
.wallet-tx__table { width: 100%; border-collapse: collapse; font-size: 13px; }
.wallet-tx__th {
  text-align: left; padding: var(--sp-3) var(--sp-4);
  color: var(--text-secondary); font-weight: 700; font-size: 12px;
  text-transform: uppercase; letter-spacing: 0.4px;
  border-bottom: 1px solid var(--border-primary);
}
.wallet-tx__cell { padding: var(--sp-3) var(--sp-4); border-bottom: 1px solid var(--border-secondary); vertical-align: middle; }
.wallet-tx__cell--amount { font-family: var(--font-mono); font-weight: 700; }
.wallet-tx__cell--date { color: var(--text-secondary); white-space: nowrap; }
.wallet-tx__empty-row td { padding: var(--sp-8); }
.wallet-tx__empty { text-align: center; color: var(--text-secondary); }
/* Мобайл: таблица обязана влезать в экран без горизонтального скролла —
   валюта всегда USD → колонку прячем, паддинги/шрифт ужимаем. */
@media (max-width: 768px) {
  .wallet-tx__table--user { font-size: 11.5px; }
  .wallet-tx__table--user .wallet-tx__th,
  .wallet-tx__table--user .wallet-tx__cell { padding: var(--sp-2) var(--sp-1); }
  .wallet-tx__table--user .wallet-tx__cell--date { white-space: normal; }
  .wallet-tx__table--user .wallet-tx__th:nth-child(3),
  .wallet-tx__table--user .wallet-tx__cell:nth-child(3) { display: none; }
}

/* PROFILE */
.page-profile { max-width: 1400px; margin: 0 auto; }

/* Keep the profile column from stretching edge-to-edge on tablet / narrow-
   desktop widths (below the 900px sidebar breakpoint) — mirrors the centered
   card look the desktop layout already gives at ≥900px. Constrained only below
   the sidebar breakpoint; at ≥900px the scroll container stays full-width
   (see the rule below) so the whole area scrolls — no dead side gutters. */
@media (max-width: 899px) {
  .main-body--hero:has(.app-hero--profile) {
    max-width: 600px; margin: 0 auto;
  }
}
/* Desktop ≥900px: ширина профиля задаётся общими правилами hero-страниц
   (index.css): 1400px, а ≥1900px — 1680px как у Cards. Отдельный кэп
   убран — он дублировал базовый и перекрывал широкоэкранный. */
.main-body--hero:has(.app-hero--profile) .app-hero--profile {
  border-radius: var(--radius-card); overflow: hidden;
}
/* Drop the inner's side padding so the menu/key cards span the same width as
   the identity card above them (which fills the column edge-to-edge). */
.main-body--hero:has(.app-hero--profile) .main-body__inner { padding: var(--sp-4) 0 var(--sp-5); }

/* Dashboard shortcut group — reads as primary against the standard menu rows. */
.menu-list--nav { border-color: var(--accent-muted); }
.menu-row--nav .menu-row__label { font-weight: 600; }
.menu-row--nav .menu-row__chev { transition: transform var(--t), color var(--t); }
.menu-row--nav:hover .menu-row__chev { transform: translateX(3px); color: var(--accent); }

/* Profile identity card — a refined dark surface from the same family as the
   menu cards (no loud blue fill). A soft accent glow + a hairline top highlight
   give it presence while staying cohesive with everything below it. */
.app-hero--profile {
  display: flex;
  flex-direction: column;
  gap: var(--sp-4);
  padding: var(--sp-5);
  text-align: left;
  color: var(--text-primary);
  background:
    radial-gradient(135% 130% at 100% 0%, rgba(90,162,230,0.16), transparent 56%),
    var(--bg-primary);
  border: 1px solid var(--border-primary);
  box-shadow: inset 0 1px 0 rgba(124,192,255,0.12);
}
.profile-hero__top {
  display: flex;
  align-items: center;
  gap: var(--sp-4);
}
.profile-hero__avatar { display: flex; flex-shrink: 0; margin: 0; position: relative; }
.profile-hero__avatar .avatar {
  width: 60px; height: 60px; font-size: 21px;
  border: 2px solid rgba(124,192,255,0.30);
  box-shadow: 0 0 0 4px rgba(61,122,184,0.10), 0 6px 16px rgba(0,0,0,0.35);
}
.profile-hero__edit-avatar {
  position: absolute; bottom: -3px; right: -3px;
  width: 23px; height: 23px;
  display: flex; align-items: center; justify-content: center;
  background: var(--accent); border: 2px solid var(--bg-primary);
  border-radius: 50%; cursor: pointer;
  color: #fff;
  transition: transform var(--t), background-color var(--t);
  box-shadow: 0 2px 8px rgba(0,0,0,0.4);
}
.profile-hero__edit-avatar:hover { transform: scale(1.1); background: var(--accent-hover); }
.profile-hero__edit-avatar svg { width: 12px; height: 12px; }
.profile-hero__info { flex: 1; min-width: 0; }
.profile-hero__name {
  font-size: 19px; font-weight: 700; line-height: 1.2; color: var(--text-primary);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.profile-hero__meta { font-size: 13px; color: var(--text-secondary); margin-top: 3px; }
.profile-hero__role {
  flex-shrink: 0; align-self: center;
  font-size: 10px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.8px;
  color: #7cc0ff;
  background: var(--accent-muted);
  border: 1px solid rgba(124,192,255,0.22);
  padding: 4px 11px; border-radius: var(--radius-pill);
}
.profile-hero__stats {
  display: flex;
  align-items: center;
  gap: var(--sp-3);
  padding-top: var(--sp-4);
  border-top: 1px solid var(--border-secondary);
}
.profile-stat { text-align: center; flex: 1; }
.profile-stat__value {
  font-size: 18px; font-weight: 700;
  font-family: var(--font-mono); color: var(--text-primary);
}
.profile-stat__label {
  font-size: 10px; color: var(--text-tertiary); margin-top: 3px;
  text-transform: uppercase; letter-spacing: 0.6px;
}
.profile-stat__divider {
  width: 1px; height: 26px;
  background: var(--border-secondary);
  flex-shrink: 0;
}

.menu-list {
  background: var(--bg-primary);
  border: 1px solid var(--border-primary);
  border-radius: var(--radius-card);
  overflow: hidden; margin-bottom: var(--sp-4);
}
.menu-row {
  display: flex; align-items: center; gap: var(--sp-3);
  padding: var(--sp-3) var(--sp-4);
  color: var(--text-primary);
  border-bottom: 1px solid var(--border-secondary);
  transition: background-color var(--t);
}
.menu-row:last-child { border-bottom: none; }
.menu-row:hover { background: var(--bg-hover); }
.menu-row__icon {
  width: 34px; height: 34px; border-radius: 9px; flex-shrink: 0;
  display: inline-flex; align-items: center; justify-content: center;
  background: var(--bg-input); color: var(--accent);
}
.menu-row__icon svg { width: 18px; height: 18px; }
.menu-row__label { flex: 1; font-weight: 500; font-size: 14.5px; }
.menu-row__chev { width: 18px; height: 18px; color: var(--text-tertiary); flex-shrink: 0; }
.menu-row__tag { font-size: 12px; color: var(--text-secondary); background: var(--bg-input); padding: 2px 8px; border-radius: var(--radius-pill); flex-shrink: 0; }
button.menu-row { width: 100%; background: none; text-align: left; font: inherit; cursor: pointer; }
.menu-row--danger { color: var(--danger); }
.menu-row--danger .menu-row__label { color: inherit; }
.menu-row--danger .menu-row__icon { color: var(--danger); background: rgba(224,96,85,0.10); }
.section-title {
  display: flex; align-items: center; gap: var(--sp-2);
  font-size: 14px; font-weight: 700; color: var(--text-secondary);
  text-transform: uppercase; letter-spacing: 0.3px;
  margin-bottom: var(--sp-3);
}
.section-title svg { color: var(--accent); }

/* Stylish access-key card */
.key-card {
  background: var(--bg-primary);
  border: 1px solid var(--border-primary);
  border-radius: var(--radius-card);
  padding: var(--sp-3) var(--sp-4) var(--sp-4);
  margin-bottom: var(--sp-4);
  position: relative; overflow: hidden;
}
.key-card::before {
  content: ''; position: absolute; inset: 0; pointer-events: none;
  background: linear-gradient(135deg, rgba(61,122,184,0.06) 0%, transparent 50%);
  opacity: 1;
}
.key-card__head {
  display: flex; align-items: center; justify-content: space-between;
  margin-bottom: var(--sp-3); position: relative;
}
.key-card__label {
  display: inline-flex; align-items: center; gap: 6px;
  font-size: 11px; font-weight: 700; text-transform: uppercase;
  letter-spacing: 0.8px; color: var(--text-secondary);
}
.key-card__label svg { color: var(--accent); }
.key-card__tools { display: flex; gap: 6px; }
.key-card__tool {
  width: 30px; height: 30px; display: inline-flex; align-items: center; justify-content: center;
  border: 1px solid var(--border-primary); border-radius: var(--radius-btn);
  background: var(--bg-input); color: var(--text-secondary); cursor: pointer;
  transition: color var(--t), border-color var(--t), background var(--t);
}
.key-card__tool:hover { color: var(--accent); border-color: var(--accent); background: var(--bg-hover); }
.key-card__tool--done { color: #27ae60; border-color: #27ae60; }
.key-card__value {
  position: relative;
  font-family: var(--font-mono); font-size: 15px; letter-spacing: 2px;
  color: var(--text-secondary); word-break: break-all; line-height: 1.5;
  transition: color var(--t), letter-spacing var(--t);
}
.key-card__value--revealed { color: var(--accent); letter-spacing: 1px; }

/* Eye Saver 3000 — theme toggle card (profile, only for the 2 eye-savers) */
button.key-card.theme-card {
  display: block; width: 100%; text-align: left; cursor: pointer;
  transition: border-color var(--t), background var(--t);
}
button.key-card.theme-card:hover { border-color: var(--accent); }
.theme-card__state {
  font-size: 10px; font-weight: 700; text-transform: uppercase; letter-spacing: .5px;
  color: var(--accent); background: var(--accent-muted);
  padding: 3px 8px; border-radius: var(--radius-pill); position: relative;
}
.theme-card__value { font-family: var(--font-sans); font-size: 13px; letter-spacing: 0; }

/* Stock indicator */
.stock-indicator { display: inline-flex; align-items: center; gap: 6px; font-size: 12px; color: var(--text-secondary); }
.stock-indicator--in-stock { color: var(--success); }
.stock-indicator--low { color: var(--warning); }
.stock-indicator--out { color: var(--danger); }
.stock-dot { width: 7px; height: 7px; border-radius: var(--radius-pill); background: var(--text-tertiary); }
.stock-dot--ok  { background: var(--success); }
.stock-dot--low { background: var(--warning); }
.stock-dot--out { background: var(--danger); }
.stock-indicator--on-request { color: #d99a2b; }
.stock-dot--on-request { background: #d99a2b; }

/* Confirm items */
.confirm-item {
  display: flex; align-items: center; justify-content: space-between;
  padding: var(--sp-3) 0;
  border-bottom: 1px solid var(--border-secondary);
}
.confirm-item:last-child { border-bottom: none; }
.confirm-label { color: var(--text-secondary); font-size: 13px; }
.confirm-value { font-weight: 700; }
.confirm-price { font-family: var(--font-mono); font-weight: 700; color: var(--accent); }

/* Data box (purchased proxy) */
.data-box {
  background: var(--bg-input);
  border: 1px solid var(--border-primary);
  border-radius: var(--radius-card);
  padding: var(--sp-3);
}
.data-content {
  font-family: var(--font-mono); font-size: 13px;
  white-space: pre-wrap; word-break: break-all;
  color: var(--text-primary); margin-bottom: var(--sp-3);
}
.data-content--raw {
  background: var(--bg-primary);
  border: 1px solid var(--border-primary);
  border-radius: var(--radius-card);
  padding: var(--sp-2) var(--sp-3);
}
/* Parsed credential table — rendered under the raw material line */
.cred-table {
  display: grid; gap: 2px;
  margin-bottom: var(--sp-3);
  border-top: 1px dashed var(--border-primary);
  padding-top: var(--sp-2);
}
.cred-row { display: flex; gap: var(--sp-3); font-family: var(--font-mono); font-size: 12px; }
.cred-label { flex: 0 0 84px; color: var(--text-secondary); text-transform: uppercase; letter-spacing: 0.5px; }
.cred-val { color: var(--text-primary); word-break: break-all; }

/* Elevation */
.wallet-deposit, .wallet-history, .wallet-crypto-card, .proxy-list, .proxy-info-card { box-shadow: var(--shadow-card); }

/* RESPONSIVE */
@media (max-width: 768px) {
  .fp-row--4 { grid-template-columns: repeat(2, 1fr); }
  .fp-row--bottom { flex-wrap: wrap; }
  .fp-row--bottom > .fp-field { flex: 0 0 calc((100% - 12px) / 2); max-width: calc((100% - 12px) / 2); }
  .fp-row--bottom > .fp-checks { flex-basis: 100%; }
  .fp-checks { display: flex; flex-wrap: wrap; gap: var(--sp-5); justify-content: flex-start; }
  .fp-check { justify-content: flex-start; }
  .wallet-crypto-cards { grid-template-columns: repeat(3, 1fr); }
}
@media (max-width: 400px) {
  .wallet-crypto-cards { grid-template-columns: 1fr; }
}
@media (max-width: 540px) {
  /* Tighter proxy rows on narrow screens */
  .proxy-row {
    padding: 10px 12px;
    gap: 8px;
    flex-wrap: nowrap;
    align-items: flex-start;
  }
  .proxy-row__body { min-width: 0; }
  .proxy-row__bin { font-size: 14px; }
  .proxy-row__top .badge { padding: 2px 6px; font-size: 10px; }
  .proxy-row__meta { font-size: 11px; }
  .proxy-row__aside {
    flex-shrink: 0;
    align-items: flex-end;
    min-width: 60px;
  }
  .proxy-row__price { font-size: 13px; }
  .proxy-row__cart-btn {
    padding: 7px 10px;
    font-size: 11px;
    gap: 4px;
    flex-shrink: 0;
  }
  .field-tag { font-size: 9px; padding: 1px 5px; }
}
@media (max-width: 480px) {
  .fp-row--4 { grid-template-columns: 1fr; }
  .proxy-details-grid { grid-template-columns: 1fr; }
  /* Stack price+button vertically on very small screens */
  .proxy-row {
    display: grid;
    grid-template-columns: 1fr auto;
    grid-template-rows: auto auto;
    grid-template-areas: "body side" "body btn";
    gap: 6px 8px;
  }
  .proxy-row__body { grid-area: body; }
  .proxy-row__aside { grid-area: side; align-items: flex-end; }
  .proxy-row__cart-btn { grid-area: btn; justify-self: end; align-self: end; }
}

/* ──────────────────────────────────────
   CART
   ────────────────────────────────────── */
.proxy-buybar__actions { display: flex; gap: var(--sp-2); }
.proxy-buybar__actions .btn-secondary { flex: 0 0 44%; }
.proxy-buybar__actions .btn-primary { flex: 1; }
@media (max-width: 480px) {
  .proxy-buybar__actions { flex-direction: column; }
  .proxy-buybar__actions .btn-secondary { flex: 0 0 auto; }
}

/* Cart page wrapper & header */
.cart-page-wrap { display: flex; flex-direction: column; gap: var(--sp-4); }

.cart-page-header {
  display: flex; align-items: center; justify-content: space-between; gap: var(--sp-4);
  background: var(--bg-primary);
  border: 1px solid var(--border-primary);
  border-radius: var(--radius-card);
  padding: var(--sp-4) var(--sp-5);
}
.cart-page-header__lead { display: flex; align-items: center; gap: var(--sp-4); min-width: 0; }
.cart-page-header__icon {
  display: inline-flex; align-items: center; justify-content: center;
  width: 48px; height: 48px; flex-shrink: 0;
  border-radius: var(--radius-card);
  background: var(--accent-muted); color: var(--accent);
}
.cart-page-header__text { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.cart-page-header__title { font-size: 22px; font-weight: 700; color: var(--text-primary); line-height: 1.2; }
.cart-page-header__sub { font-size: 13px; color: var(--text-secondary); }
.cart-page-header .btn-back--inline { margin-right: 0; flex-shrink: 0; }
.cart-page-header .btn-back--inline svg { transform: rotate(180deg); }
@media (max-width: 540px) {
  .cart-page-header { flex-direction: column; align-items: stretch; gap: var(--sp-3); }
  .cart-page-header .btn-back--inline { justify-content: center; }
}

.cart-page { display: grid; grid-template-columns: 1fr 340px; gap: var(--sp-5); align-items: start; }
@media (max-width: 768px) { .cart-page { grid-template-columns: 1fr; } }

/* One unified panel, mirroring the main page's .proxy-list */
.cart-list {
  background: var(--bg-primary);
  border: 1px solid var(--border-primary);
  border-radius: var(--radius-card);
  overflow: clip;
  box-shadow: var(--shadow-card);
}

/* Cart item — a row inside the panel, just like .proxy-row */
.cart-item {
  display: flex; align-items: center; gap: var(--sp-4);
  padding: var(--sp-4) var(--sp-5);
  border-bottom: 1px solid var(--border-secondary);
  border-left: 3px solid transparent;
  transition: background-color var(--t), border-left-color var(--t);
}
.cart-item:last-child { border-bottom: none; }
.cart-item:hover { background: var(--bg-hover); border-left-color: var(--accent); }
.cart-item__body { flex: 1; min-width: 0; }
.cart-item__right {
  display: flex; flex-direction: column; align-items: flex-end; justify-content: center; gap: 6px;
  flex-shrink: 0; min-width: 90px; align-self: center;
}
.cart-item__sub {
  font-family: var(--font-mono); font-size: 18px; font-weight: 700;
  color: var(--accent);
}
.cart-item__unit { font-size: 11px; color: var(--text-tertiary); font-family: var(--font-mono); }
.cart-item__warn { font-size: 11px; color: var(--danger); margin-top: 4px; }
.cart-item__rm {
  width: 28px; height: 28px; flex-shrink: 0;
  border: none; background: transparent; color: var(--text-tertiary);
  font-size: 18px; line-height: 1; cursor: pointer; border-radius: 6px;
  display: flex; align-items: center; justify-content: center;
  transition: background var(--t), color var(--t);
}
.cart-item__rm:hover { background: rgba(224,96,85,0.1); color: var(--danger); }

/* Qty control — reused from cart-row__qty */
.cart-row__qty { display: inline-flex; align-items: center; gap: 6px; background: var(--bg-input); border: 1px solid var(--border-primary); border-radius: 8px; padding: 2px; }
.cart-qty-btn {
  width: 26px; height: 26px; border: none; background: transparent; color: var(--text-primary);
  font-size: 15px; font-weight: 700; cursor: pointer; border-radius: 6px;
  transition: background var(--t), color var(--t);
}
.cart-qty-btn:hover:not([disabled]) { background: var(--bg-hover); color: var(--accent); }
.cart-qty-btn[disabled] { opacity: 0.4; cursor: not-allowed; }
.cart-qty-val { min-width: 22px; text-align: center; font-size: 13px; font-variant-numeric: tabular-nums; }

/* Cart summary panel */
.cart-summary {
  background: var(--bg-primary);
  border: 1px solid var(--border-primary);
  border-radius: var(--radius-card);
  padding: var(--sp-5);
  display: flex; flex-direction: column; gap: var(--sp-4);
  position: sticky; top: var(--sp-4);
  overflow: hidden;
}
.cart-summary::before {
  content: ''; position: absolute; top: 0; left: 0; right: 0; height: 1px;
  background: linear-gradient(90deg, transparent, rgba(61,122,184,0.5), transparent);
}
.cart-summary { position: sticky; top: var(--sp-4); }
.cart-summary__label {
  font-size: 13px; font-weight: 700; text-transform: uppercase; letter-spacing: 1px;
  color: var(--text-tertiary); margin-bottom: var(--sp-1);
}
.cart-summary__row { display: flex; justify-content: space-between; font-size: 15px; color: var(--text-secondary); }
.cart-summary__balance { color: var(--success); font-weight: 700; font-family: var(--font-mono); }
.cart-summary__row--total {
  padding-top: var(--sp-4); margin-top: var(--sp-1);
  border-top: 1px solid var(--border-primary);
  font-size: 20px; font-weight: 700; color: var(--text-primary);
}
.cart-summary__row--total span:last-child { color: var(--accent); font-family: var(--font-mono); }
.cart-summary__warn { font-size: 12px; color: var(--danger); text-align: center; padding: var(--sp-2); background: rgba(224,96,85,0.08); border-radius: var(--radius-btn); }

/* Checkout button — accent, prominent */
.cart-checkout-btn {
  display: flex; align-items: center; justify-content: center; gap: var(--sp-2);
  width: 100%; height: 52px;
  background: var(--accent);
  border: none; border-radius: var(--radius-btn);
  color: #fff; font-size: 16px; font-weight: 700;
  cursor: pointer; letter-spacing: 0.2px;
  transition: background var(--t), transform 0.12s var(--ease-out), box-shadow var(--t);
  box-shadow: 0 4px 16px rgba(61,122,184,0.3);
}
.cart-checkout-btn:hover { background: var(--accent-hover); box-shadow: 0 6px 24px rgba(61,122,184,0.4); transform: translateY(-1px); }
.cart-checkout-btn:active { transform: translateY(0) scale(0.99); box-shadow: none; }
.cart-checkout-btn[disabled] { background: var(--bg-input) !important; color: var(--text-tertiary) !important; box-shadow: none !important; cursor: not-allowed; transform: none !important; }
.cart-checkout-btn svg { flex-shrink: 0; }

/* Clear cart — ghost */
.cart-clear-btn {
  display: flex; align-items: center; justify-content: center;
  width: 100%; height: 42px;
  background: transparent; border: 1px solid var(--border-primary);
  border-radius: var(--radius-btn);
  color: var(--text-tertiary); font-size: 14px; font-weight: 500;
  cursor: pointer;
  transition: border-color var(--t), color var(--t), background var(--t);
}
.cart-clear-btn:hover { border-color: var(--danger); color: var(--danger); background: rgba(224,96,85,0.06); }

@media (max-width: 540px) {
  .cart-item { padding: 10px 12px; gap: var(--sp-2); }
  .cart-item__sub { font-size: 14px; }
  .cart-item__right { min-width: 80px; }
}

/* ──────────────────────────────────────
   DEMO KEYS on login
   ────────────────────────────────────── */
.demo-keys { display: flex; flex-direction: column; gap: var(--sp-2); margin-top: var(--sp-4); padding-top: var(--sp-3); border-top: 1px dashed var(--border-primary); }
.demo-keys__label { font-size: 10px; letter-spacing: 1.5px; text-transform: uppercase; color: var(--text-tertiary); text-align: center; }
.demo-key {
  display: flex; flex-direction: column; align-items: flex-start; gap: 2px;
  background: var(--bg-input); border: 1px solid var(--border-primary);
  border-radius: var(--radius-btn); padding: 8px 12px; cursor: pointer;
  color: var(--text-primary); text-align: left;
  transition: border-color var(--t), background var(--t);
}
.demo-key:hover { border-color: var(--accent); background: var(--bg-hover); }
.demo-key b { font-size: 12px; font-weight: 700; color: var(--accent); letter-spacing: 1px; text-transform: uppercase; }
.demo-key span { font-family: var(--font-mono); font-size: 11px; color: var(--text-secondary); }

/* ──────────────────────────────────────
   SHOP STATS BANNER
   ────────────────────────────────────── */
.shop-stats {
  display: grid; grid-template-columns: repeat(4, 1fr); gap: var(--sp-3);
  margin-bottom: var(--sp-4);
}
.shop-stat {
  display: flex; flex-direction: column; gap: 4px;
  background: var(--bg-primary); border: 1px solid var(--border-primary);
  border-radius: var(--radius-card); padding: var(--sp-3) var(--sp-4);
  position: relative; overflow: hidden;
}
.shop-stat::before {
  content: ''; position: absolute; top: 0; left: 0; right: 0; height: 1px;
  background: linear-gradient(90deg, transparent, rgba(61,122,184,0.5), transparent);
}
.shop-stat__num { font-size: 22px; font-weight: 700; color: var(--text-primary); letter-spacing: -0.5px; }
.shop-stat__lbl { font-size: 11px; color: var(--text-tertiary); text-transform: uppercase; letter-spacing: 1px; }
@media (max-width: 768px) { .shop-stats { grid-template-columns: repeat(2, 1fr); } }

/* ──────────────────────────────────────
   ADMIN / SELLER DASHBOARD
   ────────────────────────────────────── */
.dash-stats { display: grid; grid-template-columns: repeat(4, 1fr); gap: var(--sp-3); margin-bottom: var(--sp-4); }
.dash-stat {
  background: var(--bg-primary); border: 1px solid var(--border-primary);
  border-radius: var(--radius-card); padding: var(--sp-4);
  display: flex; flex-direction: column; gap: 4px;
  position: relative; overflow: hidden;
  box-shadow: var(--shadow-card);
  transition: border-color var(--t), box-shadow var(--t);
}
.dash-stat::before {
  content: ''; position: absolute; top: 0; left: 0; right: 0; height: 1px;
  background: linear-gradient(90deg, transparent, rgba(61,122,184,0.5), transparent);
}
.dash-stat:hover { border-color: rgba(61,122,184,0.3); box-shadow: 0 4px 20px rgba(0,0,0,0.2); }
.dash-stat__label { font-size: 11px; color: var(--text-tertiary); text-transform: uppercase; letter-spacing: 1px; }
.dash-stat__value { font-size: 24px; font-weight: 700; color: var(--accent); }
@media (max-width: 768px) { .dash-stats { grid-template-columns: repeat(2, 1fr); } }

.dash-actions { margin-bottom: var(--sp-4); }
.dash-actions .btn-primary {
  padding: 10px 20px; height: auto; font-size: 14px; font-weight: 700;
  border-radius: var(--radius-btn);
  letter-spacing: 0.3px;
}

.dash-section { margin-bottom: var(--sp-6); }
.dash-section__title {
  font-size: 13px; font-weight: 700; letter-spacing: 0.5px; text-transform: uppercase;
  color: var(--text-secondary); margin-bottom: var(--sp-3);
  display: flex; align-items: center; gap: var(--sp-2);
}
.dash-count { font-size: 11px; color: var(--text-tertiary); font-weight: 400; background: var(--bg-input); border-radius: 999px; padding: 2px 10px; border: 1px solid var(--border-secondary); }
.dash-section__head {
  display: flex; align-items: center; justify-content: space-between; gap: var(--sp-3);
  margin-bottom: var(--sp-3);
}
.dash-section__head .dash-section__title { margin-bottom: 0; }

.dash-table {
  background: var(--bg-primary); border: 1px solid var(--border-primary);
  border-radius: var(--radius-card); overflow: hidden;
  box-shadow: var(--shadow-card);
}
.dash-row {
  display: grid; grid-template-columns: 2fr 1fr 1fr 1fr auto;
  gap: var(--sp-3); padding: var(--sp-3) var(--sp-4);
  border-bottom: 1px solid var(--border-secondary);
  align-items: center; font-size: 13px;
  transition: background-color var(--t);
}
.dash-row:not(.dash-row--head):hover { background: var(--bg-hover); }
.dash-row:last-child { border-bottom: none; }
.dash-row--head {
  background: var(--bg-input); font-size: 10px; text-transform: uppercase;
  letter-spacing: 1px; color: var(--text-tertiary); font-weight: 700;
  border-bottom: 1px solid var(--border-primary);
}
.dash-row__title { color: var(--text-primary); font-weight: 500; }
.dash-mono { font-size: 12px; color: var(--text-secondary); font-variant-numeric: tabular-nums; }
.dash-row__actions { display: inline-flex; gap: 4px; justify-self: end; }
.dash-icon-btn {
  width: 28px; height: 28px; border: none; background: transparent;
  color: var(--text-tertiary); border-radius: 6px; cursor: pointer; font-size: 14px;
  transition: background var(--t), color var(--t);
}
.dash-icon-btn:hover { background: var(--bg-hover); color: var(--accent); }
.dash-empty {
  padding: var(--sp-8) var(--sp-6); text-align: center; color: var(--text-tertiary);
  background: var(--bg-primary); border: 1px solid var(--border-primary);
  border-radius: var(--radius-card); font-size: 13px; line-height: 1.6;
}
@media (max-width: 640px) {
  .dash-row { grid-template-columns: 1.6fr 1fr auto; font-size: 12px; }
  .dash-row > :nth-child(3), .dash-row > :nth-child(4) { display: none; }
}

/* Product form (admin modal) */
.prod-form { display: flex; flex-direction: column; gap: var(--sp-3); }
.prod-form label { display: flex; flex-direction: column; gap: 6px; font-size: 11px; text-transform: uppercase; letter-spacing: 1px; color: var(--text-tertiary); font-weight: 700; }
.prod-form input, .prod-form select, .prod-form textarea {
  height: 40px; padding: 0 12px; background: var(--bg-input);
  border: 1px solid var(--border-primary); border-radius: var(--radius-btn);
  color: var(--text-primary); font-size: 14px; font-family: inherit; outline: none;
  text-transform: none; letter-spacing: normal; font-weight: 400;
}
.prod-form textarea { height: auto; padding: 10px 12px; resize: vertical; }
.prod-form input:focus, .prod-form select:focus, .prod-form textarea:focus { border-color: var(--accent); }
.prod-form__grid { display: grid; grid-template-columns: 1fr 1fr; gap: var(--sp-3); }
@media (max-width: 640px) { .prod-form__grid { grid-template-columns: 1fr; } }
.prod-form__check {
  flex-direction: row !important; align-items: center; gap: 8px !important;
  text-transform: none !important; letter-spacing: normal !important;
  font-size: 13px !important; font-weight: 500 !important; color: var(--text-secondary) !important;
  cursor: pointer;
}
.prod-form__check input { width: 16px; height: 16px; accent-color: var(--accent); }
.prod-form__checked { display: flex; align-items: flex-end; gap: var(--sp-3); flex-wrap: wrap; }
.prod-form__balance { flex: 1; min-width: 160px; }

/* ──────────────────────────────────────
   BIN SEARCH (home page filter)
   ────────────────────────────────────── */
.fp-row--bin { margin-top: 0; margin-bottom: var(--sp-3); }
.fp-field--bin { width: 100%; }
.fp-field--bin .fp-field__label { display: flex; align-items: center; justify-content: flex-start; gap: var(--sp-2); }
.bin-meta { font-size: 11px; color: var(--text-tertiary); font-weight: 400; text-transform: none; letter-spacing: normal; margin-left: auto; }

.bin-chips {
  display: flex; flex-wrap: wrap; gap: 6px;
  background: var(--bg-input);
  border: 1px solid var(--border-primary);
  border-radius: var(--radius-card);
  padding: 8px;
  min-height: 44px;
  align-items: center;
  transition: border-color var(--t), box-shadow var(--t);
}
.bin-chips:focus-within { border-color: var(--accent); box-shadow: 0 0 0 3px var(--accent-muted); }

.bin-chip {
  display: inline-flex; align-items: center; gap: 6px;
  background: var(--accent-muted);
  border: 1px solid var(--accent);
  color: var(--text-primary);
  font-family: var(--font-mono); font-size: 12px; letter-spacing: 1px;
  padding: 4px 4px 4px 10px; border-radius: 999px;
  animation: binChipIn 0.18s ease-out;
}
@keyframes binChipIn { from { transform: scale(0.85); opacity: 0; } to { transform: scale(1); opacity: 1; } }
.bin-chip__rm {
  display: inline-flex; align-items: center; justify-content: center;
  width: 18px; height: 18px; border: none; background: transparent;
  color: var(--text-secondary); font-size: 16px; line-height: 1; cursor: pointer;
  border-radius: 50%; padding: 0;
  transition: background var(--t), color var(--t);
}
.bin-chip__rm:hover { background: var(--danger); color: #fff; }

.bin-input {
  flex: 1; min-width: 180px;
  background: transparent; border: none; outline: none;
  color: var(--text-primary); font-family: var(--font-mono); font-size: 13px; letter-spacing: 1px;
  padding: 4px 6px;
}
.bin-input::placeholder { color: var(--text-tertiary); font-family: var(--font-sans); letter-spacing: normal; }
.bin-clear {
  margin-left: auto;
  background: transparent; border: none; color: var(--text-tertiary);
  font-size: 11px; text-transform: uppercase; letter-spacing: 1px; cursor: pointer;
  padding: 4px 8px; border-radius: 6px;
}
.bin-clear:hover { background: var(--bg-hover); color: var(--danger); }

/* ──────────────────────────────────────
   DASHBOARD — time-range tabs
   ────────────────────────────────────── */
.dash-ranges {
  display: flex; flex-wrap: wrap; gap: 6px;
  margin-bottom: var(--sp-3);
  background: var(--bg-primary);
  border: 1px solid var(--border-primary);
  border-radius: var(--radius-card);
  padding: 6px;
}
.dash-range {
  border: none; background: transparent;
  color: var(--text-secondary);
  font-size: 12px; font-weight: 700; letter-spacing: 0.3px;
  padding: 7px 12px; border-radius: 8px;
  cursor: pointer; white-space: nowrap;
  transition: background var(--t), color var(--t);
}
.dash-range:hover { background: var(--bg-hover); color: var(--text-primary); }
.dash-range--active { background: var(--accent); color: #fff; }
.dash-range--active:hover { background: var(--accent-hover); color: #fff; }

/* Subtle indicator that this card responds to the active time window */
.dash-stat--windowed { position: relative; }
.dash-stat--windowed::after {
  content: ''; position: absolute; top: 10px; right: 10px;
  width: 6px; height: 6px; border-radius: 50%;
  background: var(--accent); box-shadow: 0 0 8px rgba(61,122,184,0.6);
}

/* ──────────────────────────────────────
   CART — Beautiful Empty State
   ────────────────────────────────────── */
.cart-empty-state {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  padding: var(--sp-8) var(--sp-4);
  min-height: 60vh;
  position: relative;
  animation: cartEmptyIn 0.5s var(--ease-standard) both;
}
@keyframes cartEmptyIn {
  from { opacity: 0; transform: translateY(16px); }
  to   { opacity: 1; transform: translateY(0); }
}

.cart-empty-state__icon {
  position: relative;
  z-index: 1;
  width: 120px;
  height: 120px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  background: linear-gradient(145deg, rgba(61,122,184,0.12), rgba(61,122,184,0.04));
  border: 1px solid rgba(61,122,184,0.15);
  color: var(--accent);
  margin-bottom: var(--sp-6);
  animation: cartIconFloat 3s ease-in-out infinite;
}
@keyframes cartIconFloat {
  0%, 100% { transform: translateY(0); }
  50%      { transform: translateY(-8px); }
}
.cart-empty-state__icon svg {
  width: 56px;
  height: 56px;
  opacity: 0.7;
}

.cart-empty-state__glow {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -65%);
  width: 220px;
  height: 220px;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(61,122,184,0.10) 0%, transparent 70%);
  pointer-events: none;
  z-index: 0;
}

.cart-empty-state__title {
  position: relative;
  z-index: 1;
  font-size: 22px;
  font-weight: 700;
  color: var(--text-primary);
  margin-bottom: var(--sp-2);
  letter-spacing: -0.3px;
}

.cart-empty-state__text {
  position: relative;
  z-index: 1;
  font-size: 14px;
  color: var(--text-secondary);
  max-width: 300px;
  line-height: 1.6;
  margin-bottom: var(--sp-6);
}

.cart-empty-state__btn {
  position: relative;
  z-index: 1;
  gap: var(--sp-2);
  padding: 0 var(--sp-6);
  box-shadow: 0 4px 20px rgba(61,122,184,0.25);
  transition: background var(--t), transform 0.15s var(--ease-out), box-shadow var(--t);
}
.cart-empty-state__btn:hover {
  transform: translateY(-1px);
  box-shadow: 0 6px 28px rgba(61,122,184,0.35);
}
.cart-empty-state__btn:active {
  transform: translateY(0) scale(0.98);
}

/* ──────────────────────────────────────
   SEARCH PRESETS
   ────────────────────────────────────── */
.presets-bar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding-top: var(--sp-3);
  margin-top: var(--sp-3);
  border-top: 1px solid var(--border-secondary);
}
.presets-bar__left {
  display: flex;
  align-items: center;
  gap: var(--sp-2);
}

.preset-save-btn,
.preset-load-btn {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  height: 32px;
  padding: 0 12px;
  border: 1px solid var(--border-primary);
  border-radius: var(--radius-btn);
  background: var(--bg-input);
  color: var(--text-secondary);
  font-size: 12px;
  font-weight: 700;
  cursor: pointer;
  transition: all var(--t);
}
.preset-save-btn:hover {
  border-color: var(--accent);
  color: var(--accent);
  background: var(--accent-muted);
}
.preset-load-btn {
  color: var(--accent);
  border-color: rgba(61,122,184,0.3);
  background: rgba(61,122,184,0.06);
}
.preset-load-btn:hover {
  border-color: var(--accent);
  background: var(--accent-muted);
}
.preset-save-btn svg,
.preset-load-btn svg {
  flex-shrink: 0;
}

.presets-dropdown {
  margin-top: var(--sp-2);
  background: var(--bg-surface);
  border: 1px solid var(--border-primary);
  border-radius: var(--radius-card);
  overflow: hidden;
  animation: presetsIn 0.18s ease-out both;
}
@keyframes presetsIn {
  from { opacity: 0; transform: translateY(-4px); }
  to   { opacity: 1; transform: translateY(0); }
}

.preset-item {
  display: flex;
  align-items: center;
  gap: var(--sp-3);
  padding: var(--sp-3) var(--sp-4);
  border-bottom: 1px solid var(--border-secondary);
  cursor: pointer;
  transition: background var(--t);
}
.preset-item:last-child { border-bottom: none; }
.preset-item:hover { background: var(--bg-hover); }

.preset-item__info {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 2px;
}
.preset-item__name {
  font-size: 13px;
  font-weight: 700;
  color: var(--text-primary);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.preset-item__summary {
  font-size: 11px;
  color: var(--text-tertiary);
  letter-spacing: 0.3px;
}

.preset-item__rm {
  flex-shrink: 0;
  width: 28px;
  height: 28px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border: none;
  background: transparent;
  color: var(--text-tertiary);
  border-radius: 6px;
  cursor: pointer;
  transition: background var(--t), color var(--t);
}
.preset-item__rm:hover {
  background: rgba(224, 96, 85, 0.12);
  color: var(--danger);
}

/* ──────────────────────────────────────
   BIN SEARCH — icon in label
   ────────────────────────────────────── */
.fp-field--bin .fp-field__label .inline-icon {
  vertical-align: -2px;
  margin-right: 2px;
  opacity: 0.6;
}

/* ──────────────────────────────────────
   COLLAPSIBLE GROUPS (Country / BIN)
   Uses CSS grid-template-rows 1fr→0fr for
   smooth height animation without JS measurement.
   ────────────────────────────────────── */

/* Shared collapse body */
.group-body {
  display: grid;
  grid-template-rows: 1fr;
  transition: grid-template-rows 0.35s var(--ease-standard);
}
.group-body--collapsed {
  display: none;
}
.group-body__inner {
  overflow: hidden;
}

/* Shared chevron */
.group__chevron {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  color: var(--text-tertiary);
  transition: transform 0.35s var(--ease-standard), color 0.15s ease;
}
.group__chevron--open {
  transform: rotate(90deg);
}

/* Shared count badge */
.group__count {
  margin-left: auto;
  font-size: 11px;
  color: var(--text-tertiary);
  letter-spacing: 0.5px;
  padding: 2px 10px;
  background: var(--bg-input);
  border-radius: 999px;
  font-variant-numeric: tabular-nums;
}

/* ── Checked Balance info banner ── */
.checked-banner {
  display: flex;
  align-items: center;
  gap: var(--sp-3);
  padding: var(--sp-3) var(--sp-4);
  margin-bottom: var(--sp-3);
  background: var(--accent-muted);
  border: 1px solid var(--accent);
  border-radius: var(--radius);
  font-size: 13px;
  line-height: 1.45;
  color: var(--fg-primary);
}
.checked-banner__icon {
  color: var(--accent);
  flex-shrink: 0;
  display: flex;
  align-items: center;
}
.checked-banner b { color: var(--accent); }

/* ── Subtype section (Checked Balance) ── та же скруглённая карточка */
.subtype-section {
  background: var(--bg-primary);
  border-radius: var(--radius-card);
  margin-bottom: var(--sp-3);
  overflow: clip;
}
.subtype-section:last-child {
  margin-bottom: 0;
}
.subtype-section__header {
  display: flex;
  align-items: center;
  gap: var(--sp-3);
  padding: var(--sp-3) var(--sp-4);
  user-select: none;
  background: var(--bg-secondary);
  border-bottom: 1px solid var(--border-secondary);
  /* Липкий по левому краю — лейбл CREDIT/DEBIT не уплывает при
     горизонтальном скролле широкой таблицы (паттерн group-country__header). */
  position: sticky;
  left: 0;
  width: 100cqw;
  z-index: 2;
}
.subtype-section__label {
  font-size: 12px;
  font-weight: 800;
  letter-spacing: 1.5px;
  text-transform: uppercase;
  color: var(--accent);
}

/* ── Country group ── каждая страна — отдельная скруглённая карточка;
   фон карточки = фону страницы, чтобы строки/цвета внутри не менялись.
   Между карточками просто зазор — тёмный фон родителя просвечивает. */
.group-country {
  background: var(--bg-primary);
  border-radius: var(--radius-card);
  margin-bottom: var(--sp-3);
  overflow: clip;
}
.group-country:last-child {
  margin-bottom: 0;
}

/* Липкий блок: верхний скроллбар + хедер страны едут вместе и не
   пропадают при прокрутке длинной группы */
.group-stick {
  position: sticky;
  top: 0;
  z-index: 3;
  background: var(--bg-primary);
}
.group-country__header {
  display: flex;
  align-items: center;
  gap: var(--sp-3);
  padding: var(--sp-3) var(--sp-4);
  cursor: pointer;
  user-select: none;
  transition: background-color 0.15s ease;
  background: var(--bg-primary);
  border-bottom: 1px solid var(--border-secondary);
}
.group-country--collapsed .group-country__header {
  border-bottom: none;
}
/* Inside the table the bar is narrower than the (content-wide) group block on
   purpose: exactly scrollport-wide, so sticky left:0 can slide it and keep the
   flag/name on screen while the wide table scrolls beneath. */
.proxy-list--table .group-country__header {
  left: 0;
  width: 100cqw;
}
.group-country__header:hover {
  background: var(--bg-hover);
}
.group-country__header:hover .group__chevron {
  color: var(--accent);
}
.group-country__header:active {
  background: rgba(61, 122, 184, 0.08);
}

.group-country__flag {
  font-size: 22px;
  line-height: 1;
}
.group-country__name {
  font-size: 14px;
  font-weight: 700;
  color: var(--text-primary);
  letter-spacing: 0.2px;
}

/* Reduced motion */
@media (prefers-reduced-motion: reduce) {
  .group-body { transition: none; }
  .group__chevron { transition: none; }
}

/* ──────────────────────────────────────
   INLINE ADD-TO-CART BUTTON (proxy row)
   ────────────────────────────────────── */
.proxy-row__cart-btn {
  flex-shrink: 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  padding: 8px 14px;
  border: 1px solid var(--accent);
  border-radius: var(--radius-btn);
  background: rgba(61, 122, 184, 0.08);
  color: var(--accent);
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.3px;
  cursor: pointer;
  transition: all 0.15s ease;
  margin-left: var(--sp-2);
  white-space: nowrap;
}
.proxy-row__cart-btn:hover {
  background: var(--accent-muted);
  border-color: var(--accent);
  box-shadow: 0 2px 8px rgba(61, 122, 184, 0.2);
  transform: translateY(-1px);
}
.proxy-row__cart-btn:active {
  transform: translateY(0) scale(0.97);
  box-shadow: none;
}
.proxy-row__cart-btn--added {
  border-color: var(--success);
  color: var(--success);
  background: rgba(74, 222, 128, 0.1);
}
.proxy-row__cart-btn:disabled {
  opacity: 0.35;
  cursor: not-allowed;
  pointer-events: none;
}
.proxy-row__cart-btn svg {
  flex-shrink: 0;
}

/* ──────────────────────────────────────
   VIEW TOGGLE BUTTON (sort bar)
   ────────────────────────────────────── */
.view-toggle {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 7px 12px;
  border: 1px solid var(--border-primary);
  border-radius: var(--radius-btn);
  background: var(--bg-input);
  color: var(--text-secondary);
  font-size: 12px;
  font-weight: 700;
  cursor: pointer;
  transition: all var(--t);
  white-space: nowrap;
  margin-left: auto;
}
.view-toggle:hover {
  color: var(--text-primary);
  background: var(--bg-hover);
}
.view-toggle--active {
  background: var(--accent-muted);
  color: var(--accent);
  border-color: var(--accent);
}
.view-toggle svg { flex-shrink: 0; opacity: 0.7; }
.view-toggle--active svg { opacity: 1; }

/* ──────────────────────────────────────
   GRID VIEW — two-column card layout
   ────────────────────────────────────── */
.proxy-list--grid {
  display: grid;
  /* minmax(0,1fr): голый 1fr == minmax(auto,1fr) — длинный неразрывный
     контент внутри карточки (ник селлера, банк) раздувал трек и вся сетка
     уезжала за край экрана на телефоне; 0-min заставляет врапиться. */
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--sp-4);
  padding: 0;
  background: transparent;
  border: none;
  box-shadow: none;
}

.proxy-card {
  display: flex;
  flex-direction: column;
  /* grid-item: без min-width:0 карточка не может сузиться меньше
     min-content — тот же источник раздувания, что и minmax выше. */
  min-width: 0;
  gap: var(--sp-3);
  padding: var(--sp-4);
  background: var(--bg-primary);
  border: 1px solid var(--border-secondary);
  border-radius: var(--radius-card);
  box-shadow: var(--shadow-card);
  transition: border-color var(--dur-2) var(--ease-standard),
              box-shadow var(--dur-2) var(--ease-standard),
              transform var(--dur-2) var(--ease-standard);
}
.proxy-card:hover {
  border-color: rgba(61, 122, 184, 0.35);
  box-shadow: 0 6px 22px rgba(0, 0, 0, 0.18);
  transform: translateY(-1px);
}
.proxy-card--in-cart {
  opacity: 0.65;
  border-left: 3px solid var(--success);
}

.proxy-card__header {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: var(--sp-2);
}
.proxy-card__badges {
  display: flex;
  align-items: center;
  gap: var(--sp-2);
  flex-wrap: wrap;
  flex: 1;
  min-width: 0;
}
.proxy-card__price {
  font-family: var(--font-mono);
  font-weight: 700;
  font-size: 18px;
  color: var(--text-primary);
  flex-shrink: 0;
}

.proxy-card__geo {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 12px;
  color: var(--text-secondary);
  flex-wrap: wrap;
}
.proxy-card__seller {
  display: flex;
  align-items: center;
  gap: 5px;
}
.proxy-card__fields {
  display: flex;
  flex-wrap: wrap;
  gap: 4px;
}
.proxy-card__footer {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-top: auto;
  padding-top: var(--sp-2);
  border-top: 1px solid var(--border-secondary);
}
.proxy-card__footer .proxy-row__cart-btn {
  margin-left: 0;
}

@media (max-width: 700px) {
  .proxy-list--grid {
    grid-template-columns: minmax(0, 1fr);
  }
  .view-toggle span { display: none; }
}

/* ──────────────────────────────────────
   ORDER CARDS — OPEN BUTTON (profile)
   ────────────────────────────────────── */
.order-card {
  background: var(--bg-primary);
  border: 1px solid var(--border-primary);
  border-radius: var(--radius-card);
  padding: var(--sp-4);
  margin-bottom: var(--sp-2);
  transition: border-color 0.2s ease, box-shadow 0.2s ease;
}
.order-card--sealed {
  border-color: rgba(61, 122, 184, 0.2);
}
.order-card--sealed:hover {
  border-color: rgba(61, 122, 184, 0.4);
  box-shadow: 0 2px 12px rgba(61, 122, 184, 0.08);
}
.order-card--revealing {
  animation: orderReveal 0.4s var(--ease-standard) both;
}
@keyframes orderReveal {
  0%   { opacity: 1; transform: scale(1); }
  50%  { opacity: 0.7; transform: scale(1.02); border-color: var(--accent); box-shadow: 0 0 20px rgba(61,122,184,0.3); }
  100% { opacity: 0; transform: scale(0.98); }
}

.order-card__header {
  display: flex;
  justify-content: space-between;
  align-items: center;
}
.order-card__title {
  font-weight: 700;
  font-size: 14px;
  color: var(--text-primary);
}
.order-card__date {
  font-size: 12px;
  color: var(--text-secondary);
  margin-top: 2px;
}
.order-card__price {
  font-family: var(--font-mono);
  font-weight: 700;
  color: var(--accent);
  font-size: 14px;
}
.order-card__data {
  margin-top: var(--sp-3);
}

/* My Cards — toolbar + selection */
.mycards-toolbar {
  display: flex; align-items: center; gap: var(--sp-2);
  margin-bottom: var(--sp-3); flex-wrap: wrap;
}
.mycards-toolbar__count {
  font-size: 13px; font-weight: 600; color: var(--text-secondary);
  margin-right: var(--sp-1);
}
.order-card__check {
  width: 16px; height: 16px; accent-color: var(--accent);
  cursor: pointer; flex-shrink: 0; margin-right: var(--sp-1);
  align-self: center;
}
.order-card--selected {
  border-color: var(--accent);
  box-shadow: 0 2px 14px rgba(61, 122, 184, 0.18);
}

.order-open-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: var(--sp-2);
  width: 100%;
  margin-top: var(--sp-3);
  padding: var(--sp-3) 0;
  border: 1px solid rgba(61, 122, 184, 0.35);
  border-radius: var(--radius-btn);
  background: rgba(61, 122, 184, 0.06);
  color: var(--accent);
  font-size: 13px;
  font-weight: 700;
  letter-spacing: 1.5px;
  cursor: pointer;
  transition: all 0.2s ease;
  box-shadow: 0 2px 8px rgba(61, 122, 184, 0.08);
}
.order-open-btn:hover {
  background: var(--accent-muted);
  border-color: var(--accent);
  box-shadow: 0 4px 18px rgba(61, 122, 184, 0.2);
  transform: translateY(-1px);
}
.order-open-btn:active {
  transform: translateY(0) scale(0.98);
  box-shadow: 0 1px 4px rgba(61, 122, 184, 0.1);
}

/* ──────────────────────────────────────
   ORDER REFUND — COUNTDOWN + BUTTON
   ────────────────────────────────────── */
.order-refund {
  margin-top: var(--sp-3);
  padding: var(--sp-3) var(--sp-3);
  border-radius: var(--radius-btn);
  border: 1px solid rgba(61, 122, 184, 0.18);
  background: rgba(61, 122, 184, 0.04);
  display: flex;
  flex-direction: column;
  gap: var(--sp-2);
}
.order-refund__row {
  display: flex;
  align-items: center;
  justify-content: space-between;
}
.order-refund__label {
  font-size: 11px;
  font-weight: 600;
  color: var(--text-secondary);
  text-transform: uppercase;
  letter-spacing: 0.5px;
}
.order-refund__timer {
  font-family: var(--font-mono);
  font-size: 13px;
  font-weight: 700;
  color: var(--accent);
  letter-spacing: 1px;
  transition: color 0.3s;
}
.order-refund__timer[data-deadline] {
  /* pulsing urgency when < 60s left — added by JS */
}
.order-refund__timer--urgent {
  color: var(--danger, #e05252);
  animation: refund-pulse 1s ease-in-out infinite;
}
@keyframes refund-pulse {
  0%, 100% { opacity: 1; }
  50%       { opacity: 0.55; }
}
.order-refund-btn {
  display: flex;
  align-items: center;
  gap: var(--sp-1);
  width: 100%;
  padding: var(--sp-2) var(--sp-3);
  border-radius: var(--radius-btn);
  border: 1px solid rgba(61, 122, 184, 0.3);
  background: transparent;
  color: var(--accent);
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.5px;
  cursor: pointer;
  transition: background 0.18s, border-color 0.18s, transform 0.15s;
  justify-content: center;
}
.order-refund-btn:hover {
  background: rgba(61, 122, 184, 0.1);
  border-color: var(--accent);
  transform: translateY(-1px);
}
.order-refund-btn:active {
  transform: scale(0.98);
}
.order-refund-btn:disabled {
  opacity: 0.5;
  cursor: default;
  transform: none;
}

/* State variants */
.order-refund--expired {
  background: rgba(255,255,255,0.02);
  border-color: var(--border-primary);
  flex-direction: row;
  align-items: center;
  gap: var(--sp-2);
  font-size: 12px;
  color: var(--text-tertiary);
  padding: var(--sp-2) var(--sp-3);
}
.order-refund--done {
  background: rgba(39, 174, 96, 0.06);
  border-color: rgba(39, 174, 96, 0.25);
  flex-direction: row;
  align-items: center;
  gap: var(--sp-2);
  font-size: 12px;
  font-weight: 600;
  color: var(--success, #27ae60);
  padding: var(--sp-2) var(--sp-3);
}
.order-refund--alive {
  background: rgba(224, 82, 82, 0.06);
  border-color: rgba(224, 82, 82, 0.25);
  flex-direction: row;
  align-items: center;
  gap: var(--sp-2);
  font-size: 12px;
  font-weight: 600;
  color: var(--danger, #e05252);
  padding: var(--sp-2) var(--sp-3);
}

/* Refund modal */
.refund-modal-body {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--sp-3);
  padding: var(--sp-5) var(--sp-2) var(--sp-3);
  text-align: center;
}
.refund-modal-icon {
  width: 56px;
  height: 56px;
  display: flex;
  align-items: center;
  justify-content: center;
}
.refund-spinner {
  width: 40px;
  height: 40px;
  border: 3px solid var(--border-primary);
  border-top-color: var(--accent);
  border-radius: 50%;
  animation: spin 0.8s linear infinite;
}
@keyframes spin { to { transform: rotate(360deg); } }
.refund-result-icon {
  font-size: 36px;
  line-height: 1;
}
.refund-result-icon--ok   { color: var(--success, #27ae60); }
.refund-result-icon--deny { color: var(--danger, #e05252); }
.refund-modal-status {
  font-size: 15px;
  font-weight: 700;
  color: var(--text-primary);
  margin: 0;
}
.refund-modal-sub {
  font-size: 12px;
  color: var(--text-secondary);
  margin: 0;
}

/* ──────────────────────────────────────
   SELLER DASHBOARD — SHOP HEADER
   ────────────────────────────────────── */
.dash-shop-header {
  display: flex; align-items: center; gap: var(--sp-3);
  margin-bottom: var(--sp-4); padding-bottom: var(--sp-3);
  border-bottom: 1px solid var(--border);
}
.dash-shop-name {
  font-size: 22px; font-weight: 700; color: var(--fg);
}
.dash-shop-role {
  font-size: 11px; font-weight: 700; text-transform: uppercase;
  letter-spacing: 1.2px; color: var(--accent);
  background: var(--accent-muted); padding: 3px 10px;
  border-radius: var(--radius-btn);
}

/* ──────────────────────────────────────
   SELLER DASHBOARD — rings + light layout
   ────────────────────────────────────── */
.sd-head {
  display: flex; align-items: center; justify-content: space-between;
  gap: var(--sp-3); flex-wrap: wrap; margin-bottom: var(--sp-4);
}
.sd-head__id { display: flex; align-items: center; gap: var(--sp-3); }
.sd-shop { font-size: 22px; font-weight: 700; color: var(--fg); }
.sd-role {
  font-size: 10px; font-weight: 700; text-transform: uppercase; letter-spacing: 1.2px;
  color: var(--accent); background: var(--accent-muted);
  padding: 3px 9px; border-radius: var(--radius-pill);
}

/* ── Back button (stats full-page view) ── */
.sd-back {
  display: inline-flex; align-items: center; gap: 6px;
  background: var(--bg-input); border: 1px solid var(--border);
  border-radius: var(--radius-pill); padding: 7px 16px 7px 10px;
  font: inherit; font-size: 13px; font-weight: 600; color: var(--fg);
  cursor: pointer; transition: background var(--t), border-color var(--t), transform var(--t);
}
.sd-back:hover { background: var(--bg-hover); border-color: var(--accent); }
.sd-back:active { transform: scale(0.97); }
.sd-back__arrow {
  display: inline-flex; transform: rotate(180deg);
  color: var(--text-secondary);
}
.sd-head--stats {
  flex-direction: row; align-items: center; gap: var(--sp-4);
}
.sd-head--stats .sd-head__id { flex: 1; }
.sd-head__actions { display: flex; gap: var(--sp-2); }
.sd-btn {
  height: 36px; padding: 0 var(--sp-4); border-radius: var(--radius-btn);
  font-size: 13px; font-weight: 600; cursor: pointer;
  background: var(--bg-input); color: var(--fg);
  border: 1px solid var(--border);
  transition: background var(--t), border-color var(--t), transform var(--t);
}
.sd-btn:hover { background: var(--bg-hover); border-color: var(--accent); }
.sd-btn:active { transform: scale(0.97); }
.sd-btn--primary { background: var(--accent); border-color: var(--accent); color: #fff; }
.sd-btn--primary:hover { background: var(--accent-hover); border-color: var(--accent-hover); }

/* Overview card: rings on the left, animated legend on the right. */
.sd-overview {
  display: flex; align-items: center; gap: var(--sp-6);
  background: var(--bg-primary); border: 1px solid var(--border-primary);
  border-radius: var(--radius-card); padding: var(--sp-5) var(--sp-6);
  margin-bottom: var(--sp-3);
}
.sd-rings-wrap { position: relative; flex-shrink: 0; width: 180px; height: 180px; }
.rings { width: 180px; height: 180px; display: block; }
.rings circle { fill: none; }
.ring-track { stroke: var(--c); opacity: 0.13; }
.ring-arc {
  stroke: var(--c); stroke-linecap: round;
  stroke-dasharray: var(--circ); stroke-dashoffset: var(--circ);
  animation: ringFill 1.1s cubic-bezier(0.22, 1, 0.36, 1) forwards;
  filter: drop-shadow(0 0 5px color-mix(in srgb, var(--c) 55%, transparent));
}
@keyframes ringFill { to { stroke-dashoffset: var(--off); } }
.sd-rings-center {
  position: absolute; inset: 0; display: flex; flex-direction: column;
  align-items: center; justify-content: center; pointer-events: none;
}
.sd-rings-center__val { font-size: 22px; font-weight: 700; font-family: var(--font-mono); color: var(--fg); letter-spacing: -0.5px; }
.sd-rings-center__lbl { font-size: 11px; color: var(--text-tertiary); text-transform: uppercase; letter-spacing: 0.5px; margin-top: 2px; }

.sd-legend { display: flex; flex-direction: column; gap: var(--sp-3); flex: 1; min-width: 0; }
.sd-legend__row { display: flex; align-items: center; gap: var(--sp-3); }
.sd-legend__dot { width: 11px; height: 11px; border-radius: 50%; flex-shrink: 0; box-shadow: 0 0 8px currentColor; }
.sd-legend__text { display: flex; flex-direction: column; flex: 1; min-width: 0; }
.sd-legend__val { font-size: 18px; font-weight: 700; font-family: var(--font-mono); color: var(--fg); line-height: 1.1; }
.sd-legend__label { font-size: 12px; color: var(--text-secondary); }
.sd-delta {
  font-size: 12px; font-weight: 700; font-variant-numeric: tabular-nums;
  padding: 2px 8px; border-radius: var(--radius-pill); flex-shrink: 0;
}
.sd-delta--up { color: var(--success); background: rgba(79, 174, 78, 0.14); }
.sd-delta--down { color: var(--danger); background: rgba(224, 96, 85, 0.14); }

/* Secondary KPI chips below the rings. */
.sd-kpis { display: grid; grid-template-columns: repeat(4, 1fr); gap: var(--sp-2); margin-bottom: var(--sp-5); }
.sd-kpi {
  display: flex; flex-direction: column; gap: 2px;
  background: var(--bg-primary); border: 1px solid var(--border-primary);
  border-radius: var(--radius-card); padding: var(--sp-3) var(--sp-4);
}
.sd-kpi:hover { border-color: rgba(61, 122, 184, 0.3); }
.sd-kpi__val { font-size: 19px; font-weight: 700; color: var(--fg); font-variant-numeric: tabular-nums; }
.sd-kpi__label { font-size: 11px; color: var(--text-tertiary); text-transform: uppercase; letter-spacing: 0.5px; }

/* Clickable rings + legend rows (drill-down) */
.rings .ring-arc, .rings .ring-track { cursor: pointer; transition: filter var(--t); }
.rings .ring-arc:hover { filter: brightness(1.3) drop-shadow(0 0 8px color-mix(in srgb, var(--c) 70%, transparent)); }
.sd-legend__row {
  display: flex; align-items: center; gap: var(--sp-3);
  background: none; border: none; font: inherit; color: inherit; text-align: left;
  cursor: pointer; padding: 6px 8px; border-radius: var(--radius-btn);
  transition: background var(--t);
}
.sd-legend__row:hover { background: var(--bg-hover); }
.sd-legend__chev { color: var(--text-tertiary); display: inline-flex; flex-shrink: 0; opacity: 0; transition: opacity var(--t), transform var(--t); }
.sd-legend__row:hover .sd-legend__chev { opacity: 1; transform: translateX(2px); }

/* Ring drill-down modal */
.md-detail__head { display: flex; align-items: baseline; flex-wrap: wrap; gap: var(--sp-2); margin-bottom: var(--sp-1); }
.md-detail__val { font-size: 30px; font-weight: 700; font-family: var(--font-mono); color: var(--fg); letter-spacing: -0.5px; }
.md-detail__sub { font-size: 12px; color: var(--text-secondary); }
.md-detail__section-title { font-size: 11px; text-transform: uppercase; letter-spacing: 0.6px; color: var(--text-tertiary); margin: var(--sp-4) 0 var(--sp-2); }
.md-bars { height: 92px; margin-bottom: var(--sp-1); }

@media (max-width: 640px) {
  .sd-overview { flex-direction: column; gap: var(--sp-4); }
  .sd-kpis { grid-template-columns: repeat(2, 1fr); }
}

/* ──────────────────────────────────────
   SELLER DASHBOARD v2 — CTAs, tiles, chart, breakdown, product cards
   ────────────────────────────────────── */

/* Prominent primary action cards */
.sd-cta { display: grid; grid-template-columns: 1fr 1fr; gap: var(--sp-3); margin-bottom: var(--sp-5); }
.sd-cta-card {
  display: flex; align-items: center; gap: var(--sp-4); text-align: left;
  padding: var(--sp-4) var(--sp-5); border-radius: var(--radius-card); cursor: pointer;
  background: var(--bg-primary); border: 1px solid var(--border-primary);
  color: var(--fg); font: inherit;
  transition: transform var(--t), border-color var(--t), box-shadow var(--t), background var(--t);
}
.sd-cta-card:hover { transform: translateY(-2px); border-color: var(--accent); box-shadow: 0 8px 24px rgba(0,0,0,0.28); }
.sd-cta-card:active { transform: translateY(0); }
.sd-cta-card__icon {
  width: 48px; height: 48px; flex-shrink: 0; border-radius: 14px;
  display: inline-flex; align-items: center; justify-content: center;
  background: var(--accent-muted); color: var(--accent);
}
.sd-cta-card__text { display: flex; flex-direction: column; gap: 2px; flex: 1; min-width: 0; }
.sd-cta-card__title { font-size: 16px; font-weight: 700; }
.sd-cta-card__sub { font-size: 12px; color: var(--text-secondary); overflow: hidden; text-overflow: ellipsis; }
.sd-cta-card__arrow { color: var(--text-tertiary); display: inline-flex; flex-shrink: 0; transition: transform var(--t); }
.sd-cta-card:hover .sd-cta-card__arrow { transform: translateX(3px); }
.sd-cta-card--primary {
  background: var(--grad-hero); border-color: transparent; color: var(--hero-on);
}
.sd-cta-card--primary .sd-cta-card__icon { background: rgba(255,255,255,0.18); color: #fff; }
.sd-cta-card--primary .sd-cta-card__sub { color: rgba(255,255,255,0.82); }
.sd-cta-card--primary .sd-cta-card__arrow { color: rgba(255,255,255,0.9); }
.sd-cta-card--primary:hover { border-color: transparent; box-shadow: 0 10px 28px rgba(47,134,214,0.35); }
.sd-cta-card--static { cursor: default; }
.sd-cta-card--static:hover { transform: none; border-color: var(--border-primary); box-shadow: none; }
.sd-cta-card--static .sd-cta-card__title { font-variant-numeric: tabular-nums; }
.sd-cta-card--static .sd-cta-card__sub { font-variant-numeric: tabular-nums; }
.sd-week-select {
  background: var(--bg-primary); border: 1px solid var(--border-primary);
  color: var(--text-primary); border-radius: var(--radius-btn, 8px);
  padding: 8px 12px; font-size: 13px; font-weight: 600; cursor: pointer;
  max-width: 100%;
}

/* Flat KPI tiles (no overlap, clean) */
.sd-stats { display: grid; grid-template-columns: repeat(4, 1fr); gap: var(--sp-3); margin-bottom: var(--sp-4); }
.sd-stat {
  display: flex; flex-direction: column; gap: 6px;
  background: var(--bg-primary); border: 1px solid var(--border-primary);
  border-radius: var(--radius-card); padding: var(--sp-4);
}
.sd-stat__label { font-size: 11px; color: var(--text-tertiary); text-transform: uppercase; letter-spacing: 0.6px; }
.sd-stat__row { display: flex; align-items: baseline; gap: var(--sp-2); flex-wrap: wrap; }
.sd-stat__val { font-size: 24px; font-weight: 700; font-variant-numeric: tabular-nums; color: var(--fg); line-height: 1.1; }
.sd-stat__val--accent { color: var(--accent); }
.sd-stat__val--success { color: var(--success); }

/* Interactive sales chart */
.sd-chart-card {
  background: var(--bg-primary); border: 1px solid var(--border-primary);
  border-radius: var(--radius-card); padding: var(--sp-4) var(--sp-5) var(--sp-3);
  margin-bottom: var(--sp-4);
}
.sd-chart-head { display: flex; align-items: flex-start; justify-content: space-between; gap: var(--sp-3); margin-bottom: var(--sp-4); }
.sd-chart-title { font-size: 15px; font-weight: 700; color: var(--fg); }
.sd-chart-sub { font-size: 12px; color: var(--text-secondary); font-variant-numeric: tabular-nums; }
.sd-toggle { display: inline-flex; background: var(--bg-input); border-radius: var(--radius-pill); padding: 2px; flex-shrink: 0; }
.sd-toggle__btn {
  border: none; background: none; cursor: pointer; font: inherit;
  font-size: 12px; font-weight: 600; color: var(--text-secondary);
  padding: 5px 14px; border-radius: var(--radius-pill); transition: background var(--t), color var(--t);
}
.sd-toggle__btn--active { background: var(--accent); color: #fff; }
.sd-chart { display: flex; align-items: flex-end; gap: 4px; height: 150px; }
.sd-chart__bar {
  flex: 1; display: flex; flex-direction: column; align-items: center; gap: 6px;
  height: 100%; justify-content: flex-end; background: none; border: none; cursor: pointer; padding: 0; font: inherit;
}
.sd-chart__fill {
  width: 100%; min-height: 3px; border-radius: 5px 5px 2px 2px;
  background: linear-gradient(180deg, var(--accent-hover), var(--accent));
  transition: height 0.45s var(--ease-out), filter var(--t);
  transform-origin: bottom; animation: barGrow 0.5s var(--ease-out) both;
}
.sd-chart__bar:hover .sd-chart__fill { filter: brightness(1.3); }
.sd-chart__x { font-size: 10px; color: var(--text-tertiary); font-variant-numeric: tabular-nums; }

/* Breakdown lists (by type / by country) */
.sd-cols { display: grid; grid-template-columns: 1fr 1fr; gap: var(--sp-4); margin-bottom: var(--sp-5); }
.sd-break {
  background: var(--bg-primary); border: 1px solid var(--border-primary);
  border-radius: var(--radius-card); padding: var(--sp-4) var(--sp-5);
}
.sd-break__title { font-size: 13px; font-weight: 700; color: var(--fg); margin-bottom: var(--sp-3); }
.sd-break__row { display: flex; align-items: center; gap: var(--sp-3); font-size: 13px; margin-bottom: var(--sp-2); }
.sd-break__row:last-child { margin-bottom: 0; }
.sd-break__name { flex: 0 0 34%; max-width: 34%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: var(--fg); }
.sd-break__bar { flex: 1; height: 7px; background: var(--bg-input); border-radius: var(--radius-pill); overflow: hidden; }
.sd-break__fill { height: 100%; border-radius: var(--radius-pill); background: linear-gradient(90deg, var(--accent), var(--accent-hover)); animation: barWidth 0.6s var(--ease-out) both; }
.sd-break__val { flex-shrink: 0; min-width: 56px; text-align: right; font-variant-numeric: tabular-nums; color: var(--text-secondary); font-weight: 600; }

/* Product cards (home-style) with seller actions */
.sp-list {
  background: var(--bg-primary); border: 1px solid var(--border-primary);
  border-radius: var(--radius-card); overflow: hidden;
}
/* Grid view: drop the list chrome so the cards stand on their own. */
.sp-list.proxy-list--grid { background: transparent; border: none; overflow: visible; }
.sp-list.proxy-list--grid .proxy-card { width: 100%; }
.proxy-card__footer-stock { display: flex; align-items: center; gap: var(--sp-2); flex-wrap: wrap; }
.sp-sold { font-size: 11px; color: var(--text-tertiary); font-variant-numeric: tabular-nums; }
.sp-actions { display: flex; flex-direction: column; gap: 6px; flex-shrink: 0; }
.sp-actions.sp-actions--row { flex-direction: row; }
.sp-act-btn {
  width: 34px; height: 34px; border-radius: var(--radius-btn); cursor: pointer;
  display: inline-flex; align-items: center; justify-content: center;
  background: var(--bg-input); border: 1px solid var(--border); color: var(--text-secondary);
  transition: background var(--t), color var(--t), border-color var(--t);
}
.sp-act-btn:hover { background: var(--bg-hover); color: var(--accent); border-color: var(--accent); }
.sp-act-btn--danger:hover { color: var(--danger); border-color: var(--danger); }

/* Sub-shops management modal */
.shops-list { display: flex; flex-direction: column; gap: 6px; margin-bottom: var(--sp-4); }
.shop-row {
  display: flex; align-items: center; gap: var(--sp-3);
  padding: 8px 12px;
  background: var(--bg-input); border: 1px solid var(--border-primary);
  border-radius: var(--radius-btn);
}
.shop-row__name { font-size: 13px; font-weight: 600; color: var(--text-primary); min-width: 0; overflow: hidden; text-overflow: ellipsis; }
.shop-row__count { margin-left: auto; font-size: 11px; color: var(--text-tertiary); flex-shrink: 0; }
.shop-rate {
  margin-left: auto; flex-shrink: 0;
  font-size: 11px; font-weight: 600; letter-spacing: .02em;
  padding: 4px 10px; border-radius: 20px; cursor: pointer;
  border: 1px solid var(--border-primary);
  background: var(--bg-primary); color: var(--text-muted);
  transition: all .15s;
}
.shop-rate--trusted {
  background: rgba(38,166,154,.15); color: var(--ok, #3fb96f);
  border-color: rgba(38,166,154,.4);
}
.shops-add { display: flex; gap: 8px; margin-bottom: var(--sp-3); }
.shops-add .modal-prompt-input { flex: 1; }

/* Sub-shop tag on a sale row */
.sd-order-shop {
  display: inline-block; margin-left: 6px; padding: 1px 7px;
  font-size: 10px; font-weight: 600; border-radius: 999px;
  background: var(--accent-muted); color: var(--accent);
  vertical-align: 1px; white-space: nowrap;
}

@media (max-width: 640px) {
  .sd-cta { grid-template-columns: 1fr; }
  .sd-stats { grid-template-columns: repeat(2, 1fr); }
  .sd-cols { grid-template-columns: 1fr; }
}

/* ──────────────────────────────────────
   BULK IMPORT
   ────────────────────────────────────── */
.btn-primary--outline {
  background: transparent;
  border: 1px solid var(--accent);
  color: var(--accent);
}
.btn-primary--outline:hover {
  background: var(--accent-muted);
}
.bulk-import__hint {
  font-size: 13px; color: var(--fg-muted); margin-bottom: var(--sp-3); line-height: 1.6;
}
.bulk-import__hint code {
  background: var(--bg-secondary); padding: 1px 5px; border-radius: 3px;
  font-size: 12px; color: var(--fg);
}
.bulk-import__textarea {
  width: 100%; resize: vertical;
  background: var(--bg-primary); border: 1px solid var(--border);
  border-radius: var(--radius); padding: var(--sp-3);
  font-family: var(--font-mono); font-size: 12px; color: var(--fg);
  min-height: 160px; line-height: 1.6;
}
.bulk-import__textarea:focus {
  outline: none; border-color: var(--accent);
  box-shadow: 0 0 0 2px rgba(61, 122, 184, 0.15);
}
.bulk-import__drop {
  margin-top: var(--sp-3); padding: var(--sp-4);
  border: 2px dashed var(--border); border-radius: var(--radius);
  text-align: center; color: var(--fg-muted); font-size: 13px;
  transition: border-color 0.2s, background 0.2s;
  cursor: pointer;
  display: flex; align-items: center; justify-content: center; gap: var(--sp-2);
}
.bulk-import__drop--active,
.bulk-import__drop:hover {
  border-color: var(--accent); background: var(--accent-muted); color: var(--accent);
}
.bulk-import__btn {
  margin-top: var(--sp-3); width: 100%;
}
.bulk-import__actions {
  display: flex; gap: var(--sp-3); justify-content: flex-end; margin-top: var(--sp-4);
}
.modal-body--fullscreen .bulk-import {
  display: flex; flex-direction: column; height: 100%;
}
.modal-body--fullscreen .bulk-import__input,
.modal-body--fullscreen .bulk-import__preview {
  flex: 1; display: flex; flex-direction: column;
}
.modal-body--fullscreen .bulk-import__textarea {
  flex: 1; min-height: 200px; resize: none;
}
.modal-body--fullscreen .bulk-import__table-wrap {
  flex: 1; max-height: none;
}
.bulk-import__table-wrap {
  max-height: 420px; overflow: auto;
}

/* Loading state */
.bulk-import__loading {
  display: flex; flex-direction: column; align-items: center;
  gap: var(--sp-3); padding: var(--sp-6) 0;
  text-align: center; color: var(--fg-muted); font-size: 14px;
}
.bulk-import__spinner {
  width: 32px; height: 32px; border: 3px solid var(--border);
  border-top-color: var(--accent); border-radius: 50%;
  animation: bulk-spin 0.8s linear infinite;
}
@keyframes bulk-spin { to { transform: rotate(360deg); } }
.bulk-import__progress { font-size: 12px; color: var(--fg-muted); }
.verify-result__list { max-height: 320px; overflow-y: auto; border: 1px solid var(--c-bord); border-radius: 8px; margin: 10px 0; }
.verify-row { padding: 7px 12px; font-size: 13px; line-height: 1.45; border-bottom: 1px solid var(--c-bord); letter-spacing: .01em; }
.verify-row:last-child { border-bottom: none; }
.verify-row--live { color: var(--ok, #3fb96f); }
.verify-row--dead { color: var(--fg-muted); opacity: .75; }
.verify-row--dead::first-letter { color: var(--err, #e05f5f); }
.verify-row--err  { color: #d9a13b; }
.bulk-import__progress .verify-count { display: block; font-size: 20px; font-weight: 600; color: var(--fg-dim); letter-spacing: .02em; }
.bulk-import__progress .verify-sub { display: block; margin-top: 4px; font-size: 12px; color: var(--fg-muted); }

/* Summary bar */
.bulk-summary {
  display: flex; flex-wrap: wrap; align-items: center; gap: var(--sp-2) var(--sp-3);
  padding: var(--sp-2) var(--sp-3); margin-bottom: var(--sp-3);
  border: 1px solid var(--border); border-radius: var(--radius);
  font-size: 13px;
}
.bulk-summary__item { display: flex; align-items: center; gap: var(--sp-1); }
.bulk-tag {
  font-size: 11px; font-weight: 700; padding: 2px 7px;
  border-radius: var(--radius-btn); background: var(--bg-secondary); color: var(--fg-muted);
}
.bulk-chip-blue {
  white-space: nowrap; font-size: 11px; font-weight: 700; padding: 4px 9px;
  border-radius: var(--radius-btn); background: rgba(30, 60, 130, 0.25); color: #7da2d4;
}
.bulk-import__price-label { white-space: nowrap; }
.bulk-zipseg {
  display: inline-flex; border: 1px solid var(--c-bord, var(--border));
  border-radius: 6px; overflow: hidden;
}
.bulk-zipseg__btn {
  padding: 7px 12px; font-size: 12px; font-weight: 700; cursor: pointer;
  background: var(--c-surf, var(--bg-input)); color: var(--fg-muted);
  border: none;
}
.bulk-zipseg__btn.is-on { background: rgba(30, 60, 130, 0.45); color: #9fc0e8; }

.bulk-tag--visa { background: rgba(30, 60, 130, 0.2); color: #7da2d4; }
.bulk-tag--mastercard { background: rgba(180, 60, 30, 0.15); color: #e08850; }
.bulk-tag--amex { background: rgba(40, 120, 80, 0.15); color: #5cba7d; }
.bulk-tag--discover { background: rgba(180, 100, 20, 0.15); color: #d4a54a; }

/* Preview table */
.bulk-table { min-width: 560px; }
.bulk-table__head {
  display: grid;
  grid-template-columns: 26px 110px 62px 46px 40px 90px 1fr 1fr 50px;
  gap: var(--sp-2); padding: var(--sp-2) var(--sp-3);
  font-size: 11px; font-weight: 700; text-transform: uppercase;
  letter-spacing: 0.5px; color: var(--fg-muted);
  border-bottom: 1px solid var(--border);
  position: sticky; top: 0; background: var(--bg-surface); z-index: 1;
}
.bulk-table__row {
  display: grid;
  grid-template-columns: 26px 110px 62px 46px 40px 90px 1fr 1fr 50px;
  gap: var(--sp-2); padding: var(--sp-2) var(--sp-3);
  font-size: 12px; border-bottom: 1px solid var(--border);
  align-items: center;
}
.bulk-table__row--edited { box-shadow: inset 2px 0 0 var(--accent, #3d7ab8); }
.bulk-table__row--error { box-shadow: inset 2px 0 0 var(--danger); background: rgba(224, 96, 85, 0.07); }
.bulk-edit-btn {
  display: inline-flex; align-items: center; justify-content: center;
  width: 24px; height: 24px; border-radius: 6px;
  background: transparent; border: 1px solid var(--border);
  color: var(--fg-muted); cursor: pointer; padding: 0;
}
.bulk-edit-btn:hover { color: var(--text-primary); border-color: var(--text-secondary); }
.bulk-edit-btn--danger { color: var(--danger); }
.bulk-edit-btn--danger:hover { color: var(--danger); border-color: var(--danger); }
/* Яркая рамка на edit/delete у строк, упавших при импорте — куда жать. */
.bulk-edit-btn--alert {
  color: var(--danger); border-color: var(--danger);
  box-shadow: 0 0 0 2px rgba(224, 96, 85, 0.35);
  animation: bulkAlertPulse 1.2s ease-in-out infinite;
}
@keyframes bulkAlertPulse {
  0%, 100% { box-shadow: 0 0 0 2px rgba(224, 96, 85, 0.35); }
  50%      { box-shadow: 0 0 0 4px rgba(224, 96, 85, 0.15); }
}
.bulk-tag--err { color: var(--danger); border: 1px solid rgba(224, 96, 85, 0.4); }
/* Результат проверки закида: dead — карта отклонена чекером, в каталог
   не попала (строка остаётся как «удалённая»), live — живая. */
.bulk-tag--dead { color: var(--danger); border: 1px solid rgba(224, 96, 85, 0.45); background: rgba(224, 96, 85, 0.08); }
.bulk-tag--live { color: #4ade80; border: 1px solid rgba(74, 222, 128, 0.35); background: rgba(74, 222, 128, 0.08); }
.bulk-table__row--dead { opacity: 0.55; box-shadow: inset 2px 0 0 var(--danger); }
.bulk-table__row--live { box-shadow: inset 2px 0 0 rgba(74, 222, 128, 0.55); }
/* Денежная подстрока карты в bulk-превью: avail credit / avail balance /
   spend по каждой позиции отдельно. */
.bulk-fin {
  grid-column: 1 / -1; display: flex; gap: 12px; flex-wrap: wrap;
  font-size: 11px; color: var(--fg-muted); padding: 2px 0 0 26px;
}
.bulk-fin__item { font-variant-numeric: tabular-nums; }
.bulk-fin__item--miss { color: var(--danger); }
.bulk-col--edit { display: flex; gap: 4px; justify-content: flex-end; }
.bulk-table__row:last-child { border-bottom: none; }
.bulk-table__row:hover { background: var(--bg-hover); }
.bulk-col--num { color: var(--fg-muted); font-size: 11px; text-align: center; }
.bulk-col--cc { font-size: 11px; }
.bulk-col--bank { font-size: 11px; color: var(--fg-muted); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.bulk-col--addr { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

.bulk-net {
  font-size: 10px; font-weight: 700; text-transform: uppercase;
  padding: 2px 6px; border-radius: var(--radius-btn);
  background: var(--bg-secondary); color: var(--fg-muted);
}
.bulk-net--visa { background: rgba(30, 60, 130, 0.2); color: #7da2d4; }
.bulk-net--mastercard { background: rgba(180, 60, 30, 0.15); color: #e08850; }
.bulk-net--amex { background: rgba(40, 120, 80, 0.15); color: #5cba7d; }
.bulk-net--discover { background: rgba(180, 100, 20, 0.15); color: #d4a54a; }
.bulk-net--jcb { background: rgba(120, 40, 40, 0.15); color: #d46a6a; }
.bulk-net--unionpay { background: rgba(40, 80, 120, 0.15); color: #6a9ed4; }

/* ──────────────────────────────────────
   FAQ PAGE
   ────────────────────────────────────── */
.faq-page { max-width: 880px; margin: 0 auto; }
/* Плавающий ассистент (пёс) фиксирован справа — на узкой центрированной
   колонке он живёт в свободном поле и не перекрывает текст. */

.faq-head { margin-bottom: var(--sp-5); }
.faq-head__top { display: flex; align-items: center; justify-content: space-between; gap: var(--sp-3); }
.faq-lang {
  display: inline-flex; padding: 3px; gap: 2px;
  background: var(--bg-input); border: 1px solid var(--border, rgba(255,255,255,.08));
  border-radius: var(--radius-pill); flex-shrink: 0;
}
.faq-lang__btn {
  border: 0; background: transparent; cursor: pointer;
  font-size: 12px; font-weight: 700; letter-spacing: .06em;
  color: var(--fg-muted); padding: 5px 14px; border-radius: var(--radius-pill);
  transition: background .15s var(--ease-out), color .15s var(--ease-out);
}
.faq-lang__btn.is-active {
  color: #06101f;
  background: var(--accent, #6ee7a8);
}
.faq-lang__btn:not(.is-active):hover { color: var(--fg); }
.af-lang-label {
  font-size: 10px; font-weight: 800; letter-spacing: .12em; text-transform: uppercase;
  color: var(--fg-muted); margin-top: 2px;
}
.faq-head__title {
  font-size: 22px; font-weight: 800; letter-spacing: -0.3px;
  background: linear-gradient(95deg, var(--fg), var(--accent));
  -webkit-background-clip: text; background-clip: text;
  -webkit-text-fill-color: transparent; color: var(--accent);
  margin-bottom: 6px;
}
.faq-head__sub { font-size: 13px; color: var(--fg-muted); }
@keyframes faqHeadIn {
  from { opacity: 0; transform: translateY(-8px); }
  to   { opacity: 1; transform: translateY(0); }
}

.faq-list {
  display: flex; flex-direction: column; gap: var(--sp-2);
  padding: 0;
}
.faq-item {
  border: 1px solid var(--border-primary); border-radius: var(--radius-card);
  background: var(--bg-primary);
  overflow: hidden;
  transition: border-color 0.25s, box-shadow 0.25s, transform 0.25s;
}
.faq-item:hover { border-color: rgba(61,122,184,0.35); }
.faq-item[open] {
  border-color: rgba(61,122,184,0.5);
  box-shadow: 0 6px 22px rgba(0,0,0,0.28), 0 0 0 1px rgba(61,122,184,0.12) inset;
}
@keyframes faqItemIn {
  from { opacity: 0; transform: translateY(14px); }
  to   { opacity: 1; transform: translateY(0); }
}
.faq-item summary { list-style: none; }
.faq-item summary::-webkit-details-marker { display: none; }

.faq-q {
  display: flex; align-items: center; gap: var(--sp-3);
  padding: var(--sp-3) var(--sp-4); cursor: pointer;
  font-size: 14px; font-weight: 500; color: var(--fg);
  transition: background 0.18s;
}
.faq-q:hover { background: var(--bg-hover); }
.faq-q__icon {
  flex-shrink: 0; width: 24px; height: 24px;
  display: inline-flex; align-items: center; justify-content: center;
  color: var(--accent);
  transition: transform 0.3s, filter 0.3s;
}
.faq-q__icon svg { width: 20px; height: 20px; }
.faq-item[open] .faq-q__icon {
  transform: scale(1.12);
  filter: drop-shadow(0 0 6px rgba(61,122,184,0.55));
}
.faq-q__text { flex: 1; }
.faq-q__chevron {
  flex-shrink: 0; color: var(--fg-muted);
  display: inline-flex;
  transition: transform 0.3s var(--ease-standard), color 0.2s;
}
.faq-item[open] .faq-q__chevron { transform: rotate(180deg); color: var(--accent); }
.faq-item[open] .faq-q { font-weight: 700; }

/* Smooth answer reveal — grid-rows trick animates height with content present */
.faq-a {
  display: grid; grid-template-rows: 1fr;
  padding: 0 var(--sp-4) 0 calc(var(--sp-4) + 24px + var(--sp-3));
  font-size: 13px; line-height: 1.7; color: var(--fg-muted);
  animation: faqAnswerIn 0.2s var(--ease-out) both;
}
.faq-a__inner { min-height: 0; padding-bottom: var(--sp-4); }
.faq-a strong { color: var(--fg); font-weight: 600; }
/* Inline seller-badge chips used in answers */
.faq-tag { display: inline-flex; align-items: center; font-size: 11px; font-weight: 700; padding: 1px 8px; border-radius: var(--radius-pill, 20px); background: var(--bg-hover); border: 1px solid var(--border); color: var(--fg-muted); white-space: nowrap; }
.faq-tag--trusted { color: var(--success); background: rgba(79,174,78,0.12); border-color: rgba(79,174,78,0.4); }

/* Goat-баннер на FAQ: одинаковый зазор сверху (от аккордеона) и снизу
   (до блока Seller FAQ) — раньше прилипал сверху. */
.faq-page [data-faq-goat] > .ts-banner { margin: var(--sp-5) 0; }

/* Seller FAQ — видимый блок для селлеров/админов */
.faq-seller-sec { margin-top: var(--sp-6); }
.faq-seller-sec__head {
  display: flex; align-items: center; gap: 10px;
  font-size: 15px; font-weight: 700; color: var(--fg);
  margin-bottom: var(--sp-3);
}
.faq-seller-sec__icon {
  width: 26px; height: 26px; flex-shrink: 0;
  display: inline-flex; align-items: center; justify-content: center;
  color: var(--accent); background: rgba(61,122,184,0.12);
  border: 1px solid rgba(61,122,184,0.3); border-radius: 8px;
}
.faq-seller-sec__count {
  font-size: 11px; font-weight: 700; color: var(--fg-muted);
  background: var(--bg-hover); border: 1px solid var(--border);
  padding: 1px 8px; border-radius: var(--radius-pill, 20px);
}

/* Seller FAQ — закрытый блок для покупателей/гостей */
.faq-seller-lock {
  margin-top: var(--sp-6);
  border: 1px solid rgba(61,122,184,0.35); border-radius: var(--radius-card);
  background: linear-gradient(135deg, rgba(61,122,184,0.10), rgba(61,122,184,0.03) 45%, var(--bg-primary) 75%);
  overflow: hidden;
}
.faq-seller-lock__head {
  display: flex; align-items: center; gap: var(--sp-3);
  padding: var(--sp-3) var(--sp-4);
  border-bottom: 1px solid rgba(61,122,184,0.18);
}
.faq-seller-lock__icon {
  width: 26px; height: 26px; flex-shrink: 0;
  display: inline-flex; align-items: center; justify-content: center;
  color: var(--accent); background: rgba(61,122,184,0.14);
  border: 1px solid rgba(61,122,184,0.35); border-radius: 8px;
}
.faq-seller-lock__title { flex: 1; font-size: 15px; font-weight: 700; color: var(--fg); }
.faq-seller-lock__badge {
  flex-shrink: 0; font-size: 10px; font-weight: 700; letter-spacing: 0.08em;
  color: var(--accent); background: rgba(61,122,184,0.12);
  border: 1px solid rgba(61,122,184,0.35);
  padding: 2px 9px; border-radius: var(--radius-pill, 20px);
}
.faq-seller-lock__body {
  display: flex; align-items: center; justify-content: space-between;
  gap: var(--sp-4); flex-wrap: wrap;
  padding: var(--sp-4);
}
.faq-seller-lock__text { flex: 1; min-width: 220px; font-size: 13px; line-height: 1.6; color: var(--fg-muted); margin: 0; }
.faq-seller-lock__cta {
  flex-shrink: 0;
  display: inline-flex; align-items: center; gap: 8px;
  padding: 10px 18px; border-radius: 10px;
  background: var(--accent); color: #fff;
  font-size: 13px; font-weight: 700; text-decoration: none;
  transition: filter 0.18s, transform 0.18s;
}
.faq-seller-lock__cta:hover { filter: brightness(1.12); transform: translateY(-1px); }
.faq-seller-lock__cta:active { transform: translateY(0); }
/* Mini example listing rows */
.faq-eg { display: flex; flex-direction: column; gap: var(--sp-2); margin: var(--sp-3) 0; }
.faq-eg__row { display: flex; align-items: center; gap: var(--sp-3); padding: var(--sp-2) var(--sp-3); border-radius: var(--radius-btn); background: var(--bg-input); border: 1px solid var(--border-secondary); }
.faq-eg__bin { font-family: var(--font-mono); font-weight: 700; color: var(--fg); }
.faq-eg__name { flex: 1; min-width: 0; color: var(--fg-muted); }
@keyframes faqAnswerIn {
  from { opacity: 0; transform: translateY(-6px); }
  to   { opacity: 1; transform: translateY(0); }
}

/* ── Floating "Clippy"-style assistant (DOG THE GOAT) ── */
.clippy {
  position: fixed; right: 18px; bottom: 88px; z-index: 30;
  display: flex; flex-direction: column; align-items: flex-end; gap: 8px;
  opacity: 0; transform: translateY(24px) scale(0.85);
  transform-origin: bottom right;
  transition: opacity 0.4s var(--ease-standard), transform 0.4s var(--ease-spring);
}
.clippy--in { opacity: 1; transform: translateY(0) scale(1); }
.clippy--out { opacity: 0; transform: translateY(16px) scale(0.85); }
@media (min-width: 769px) { .clippy { bottom: 24px; right: 24px; } }

/* Dismiss button */
.clippy__close {
  position: absolute; top: -6px; right: -6px; z-index: 4;
  width: 22px; height: 22px; padding: 0;
  display: flex; align-items: center; justify-content: center;
  border: 1px solid var(--border-primary); border-radius: 50%;
  background: var(--bg-surface); color: var(--fg-muted);
  cursor: pointer;
  transition: color 0.2s, border-color 0.2s, transform 0.2s;
}
.clippy__close:hover { color: var(--danger); border-color: var(--danger); transform: scale(1.1); }

/* Speech bubble */
.clippy__bubble {
  position: relative; max-width: 190px;
  padding: 9px 14px;
  background: var(--accent); color: #fff;
  font-size: 12.5px; font-weight: 700; line-height: 1.35;
  border-radius: 14px 14px 4px 14px;
  box-shadow: 0 10px 24px rgba(61,122,184,0.4);
  animation: clippyBubbleFloat 3.4s ease-in-out infinite;
}
.clippy__bubble::after {
  content: ''; position: absolute; right: 20px; bottom: -7px;
  border-left: 7px solid transparent; border-right: 7px solid transparent;
  border-top: 8px solid var(--accent);
}
.clippy__bubble--pop { animation: clippyBubblePop 0.42s var(--ease-spring), clippyBubbleFloat 3.4s ease-in-out 0.42s infinite; }
.clippy__bubble-link { color: #fff; text-decoration: none; display: block; }
.clippy__bubble-link:hover { text-decoration: underline; }
@keyframes clippyBubbleFloat { 0%,100% { transform: translateY(0); } 50% { transform: translateY(-4px); } }
@keyframes clippyBubblePop {
  0%   { transform: scale(0.8) translateY(4px); opacity: 0.3; }
  60%  { transform: scale(1.05); }
  100% { transform: scale(1); opacity: 1; }
}

/* The character */
.clippy__char {
  position: relative;
  width: 96px; height: 96px;
  display: flex; align-items: center; justify-content: center;
  text-decoration: none;
  cursor: pointer;
  filter: drop-shadow(0 8px 18px rgba(0,0,0,0.45));
}
.clippy__glow {
  position: absolute; inset: 8%; border-radius: 50%;
  background: radial-gradient(circle, rgba(61,122,184,0.5), transparent 66%);
  filter: blur(7px);
  animation: clippyGlow 3s ease-in-out infinite;
}
@keyframes clippyGlow {
  0%,100% { transform: scale(0.85); opacity: 0.5; }
  50%     { transform: scale(1.12); opacity: 0.9; }
}
.clippy__ring {
  position: absolute; inset: 14%;
  border: 1.5px solid rgba(61,122,184,0.55); border-radius: 50%;
  opacity: 0; animation: clippyRing 2.8s ease-out infinite;
}
.clippy__ring--2 { animation-delay: 1.4s; }
@keyframes clippyRing {
  0%   { transform: scale(0.55); opacity: 0.7; }
  100% { transform: scale(1.7); opacity: 0; }
}
.clippy__img {
  position: relative; z-index: 2;
  width: 84px; height: 84px; object-fit: contain;
  transform-origin: 50% 85%;
  animation: clippyBob 3.4s ease-in-out infinite, clippyWiggle 7s ease-in-out infinite;
  transition: transform 0.25s;
}
/* gentle idle bob */
@keyframes clippyBob {
  0%,100% { transform: translateY(0); }
  50%     { transform: translateY(-6px); }
}
/* periodic attention "look at me" shake */
@keyframes clippyWiggle {
  0%, 82%, 100% { rotate: 0deg; }
  86% { rotate: -9deg; }
  90% { rotate: 7deg; }
  94% { rotate: -5deg; }
  98% { rotate: 0deg; }
}
.clippy__char:hover .clippy__img { animation-play-state: paused; transform: scale(1.1); }
.clippy__char:active .clippy__img { transform: scale(0.94); }

/* Floating sparks */
.clippy__spark {
  position: absolute; z-index: 3;
  font-size: 15px; font-weight: 800; color: var(--accent);
  opacity: 0; pointer-events: none;
  text-shadow: 0 2px 8px rgba(61,122,184,0.6);
  animation: clippySpark 3s ease-in-out infinite;
}
.clippy__spark--1 { top: 12%; left: 8%; animation-delay: 0.4s; }
.clippy__spark--2 { top: 20%; right: 6%; color: var(--fg); font-size: 17px; animation-delay: 1.7s; }
@keyframes clippySpark {
  0%   { opacity: 0; transform: translateY(6px) scale(0.6); }
  35%  { opacity: 1; transform: translateY(-4px) scale(1); }
  65%  { opacity: 1; transform: translateY(-12px) scale(1); }
  100% { opacity: 0; transform: translateY(-22px) scale(0.7); }
}

@media (prefers-reduced-motion: reduce) {
  .faq-item, .faq-head, .faq-a { animation: none !important; }
  .clippy__bubble, .clippy__glow, .clippy__ring,
  .clippy__img, .clippy__spark { animation: none !important; }
  .clippy__spark { opacity: 0; }
}

/* ──────────────────────────────────────
   ADMIN PANEL
   ────────────────────────────────────── */
.ap-page { max-width: 1400px; margin: 0 auto; }

/* Live dot */
.ap-dot {
  display: inline-block; width: 8px; height: 8px; border-radius: 50%;
  background: var(--fg-muted);
}
.ap-dot--live {
  background: #27ae60;
  box-shadow: 0 0 6px rgba(39, 174, 96, 0.5);
  animation: ap-blink 2s ease-in-out infinite;
}
@keyframes ap-blink {
  0%, 100% { opacity: 1; }
  50% { opacity: 0.4; }
}

.ap-count {
  font-size: 11px; font-weight: 700; color: var(--fg-muted);
  background: var(--bg-input); border-radius: var(--radius-pill);
  padding: 1px 8px; font-variant-numeric: tabular-nums;
  margin-left: var(--sp-1);
}
.ap-empty {
  padding: var(--sp-5); text-align: center;
  font-size: 13px; color: var(--fg-muted);
}

/* Onion hunt — vanity address candidates */
.ap-onion-list { max-height: 300px; overflow-y: auto; }
.ap-onion-item {
  padding: var(--sp-2) var(--sp-4);
  border-bottom: 1px solid var(--border);
  font-family: var(--font-mono); font-size: 12px; letter-spacing: .3px;
  color: var(--accent); word-break: break-all; cursor: pointer;
  transition: background var(--t);
}
.ap-onion-item:last-child { border-bottom: none; }
.ap-onion-item:hover { background: var(--bg-hover); }

/* Log list */
.ap-log-list { max-height: 420px; overflow-y: auto; }
.ap-log-row {
  display: flex; align-items: center; gap: var(--sp-2);
  padding: var(--sp-2) var(--sp-4);
  border-bottom: 1px solid var(--border);
  font-size: 13px;
}
.ap-log-row:last-child { border-bottom: none; }
.ap-log-row:hover { background: var(--bg-hover); }
.ap-log-row__action { font-weight: 600; white-space: nowrap; flex-shrink: 0; }
.ap-log-row__detail { flex: 1; color: var(--fg-muted); min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ap-log-row__time { font-size: 11px; color: var(--fg-muted); white-space: nowrap; font-variant-numeric: tabular-nums; flex-shrink: 0; }
.ap-log-toggle {
  flex-shrink: 0; width: 15px; background: none; border: none; padding: 0;
  color: var(--fg-muted); cursor: pointer; font-size: 13px; line-height: 1;
  transition: transform .15s ease;
}
.ap-log-toggle--open { transform: rotate(90deg); }
.ap-log-toggle:hover { color: var(--accent); }
.ap-log-spacer { width: 15px; flex-shrink: 0; }
.ap-log-group__n { font-size: 10px; color: var(--fg-muted); font-family: var(--font-mono); flex-shrink: 0; }

/* Badges */
.ap-badge {
  display: inline-block; font-size: 10px; font-weight: 700;
  text-transform: uppercase; letter-spacing: 0.5px;
  padding: 2px 7px; border-radius: var(--radius-btn);
  background: var(--bg-secondary); color: var(--fg-muted);
  flex-shrink: 0;
}
.ap-badge--blue { background: rgba(41, 128, 185, 0.12); color: #5dade2; }
.ap-badge--cyan { background: var(--accent-muted); color: var(--accent); }
.ap-badge--green { background: rgba(39, 174, 96, 0.12); color: #2ecc71; }
.ap-badge--purple { background: rgba(142, 68, 173, 0.12); color: #bb8fce; }
.ap-badge--red { background: rgba(231, 76, 60, 0.12); color: #e74c3c; }
.ap-badge--yellow { background: rgba(234, 179, 8, 0.14); color: #e5a50a; }

/* Sellers (inside menu-list) */
.ap-seller { border-bottom: 1px solid var(--border); }
.ap-seller:last-child { border-bottom: none; }
.ap-seller summary { list-style: none; }
.ap-seller summary::-webkit-details-marker { display: none; }
.ap-seller-avatar {
  width: 24px; height: 24px; border-radius: 50%;
  background: var(--accent-muted); color: var(--accent);
  display: inline-flex; align-items: center; justify-content: center;
  font-size: 11px; font-weight: 700;
}
.ap-seller-stats { font-size: 12px; color: var(--fg-muted); flex-shrink: 0; }
.ap-seller__body { padding: var(--sp-1) var(--sp-4) var(--sp-3) calc(var(--sp-4) + 24px + var(--sp-3)); }
.ap-seller__kv {
  display: flex; justify-content: space-between; padding: var(--sp-1) 0;
  font-size: 13px; border-bottom: 1px solid var(--border);
}
.ap-seller__kv:last-child { border-bottom: none; }

/* Seller applications (admin panel) */
.ap-app {
  padding: var(--sp-3) var(--sp-4);
  border-bottom: 1px solid var(--border);
}
.ap-app:last-child { border-bottom: none; }
.ap-app__head { display: flex; align-items: flex-start; gap: var(--sp-3); }
.ap-app__info { min-width: 0; }
.ap-app__shop { font-weight: 700; font-size: 14px; }
.ap-app__meta { font-size: 12px; color: var(--fg-muted); margin-top: 2px; }
.ap-app__date { font-size: 11px; color: var(--fg-muted); margin-top: 2px; font-variant-numeric: tabular-nums; }
.ap-app__actions { display: flex; gap: var(--sp-2); justify-content: flex-end; margin-top: var(--sp-3); }

/* User management rows (admin panel) */
.ap-user { border-bottom: 1px solid var(--border); }
.ap-user:last-child { border-bottom: none; }
.ap-user__row {
  display: flex; align-items: center; gap: var(--sp-3);
  padding: var(--sp-2) var(--sp-4);
  cursor: pointer; transition: background var(--dur-fast, 0.15s);
}
.ap-user__row:hover { background: var(--bg-hover); }
.ap-user__info { flex: 1; min-width: 0; }
.ap-user__name {
  font-size: 14px; font-weight: 600; overflow: hidden; text-overflow: ellipsis;
  white-space: nowrap; display: flex; align-items: center; gap: var(--sp-2);
}
.ap-user__sub { font-size: 11px; color: var(--fg-muted); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ap-user__shops { display: flex; flex-wrap: wrap; gap: 4px; margin-top: 4px; }
.ap-shop-chip {
  display: inline-flex; align-items: center; gap: 5px;
  font-size: 10px; font-weight: 600; letter-spacing: .02em;
  color: var(--accent, #6ee7a8);
  background: color-mix(in srgb, var(--accent, #6ee7a8) 10%, transparent);
  border: 1px solid color-mix(in srgb, var(--accent, #6ee7a8) 25%, transparent);
  border-radius: 6px; padding: 2px 7px;
  max-width: 180px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.ap-shop-chip em {
  font-style: normal; font-size: 9px; font-weight: 700;
  color: var(--fg-muted);
  background: var(--surface-2, rgba(255,255,255,.06));
  border-radius: 4px; padding: 0 4px;
}
.ap-user__live { width: 7px; height: 7px; }

/* Экшены строки юзера: переимен./баланс/выплата/сабшопы + роль + бан/дел.
   На телефоне не влезают в ширину — листаются горизонтально в своём ряду. */
.ap-user__actions { display: flex; align-items: center; gap: 4px; flex-shrink: 0; }
@media (max-width: 768px) {
  .ap-user__row { gap: var(--sp-2); padding: var(--sp-2) var(--sp-3); }
  .ap-user__actions {
    flex-shrink: 1; min-width: 0; max-width: 46%;
    overflow-x: auto; overflow-y: hidden;
    scrollbar-width: none; -webkit-overflow-scrolling: touch;
  }
  .ap-user__actions::-webkit-scrollbar { display: none; }
  .ap-user__actions > * { flex-shrink: 0; }
}
html.force-mobile .ap-user__row { gap: var(--sp-2); padding: var(--sp-2) var(--sp-3); }
html.force-mobile .ap-user__actions {
  flex-shrink: 1; min-width: 0; max-width: 46%;
  overflow-x: auto; overflow-y: hidden; scrollbar-width: none;
}
html.force-mobile .ap-user__actions::-webkit-scrollbar { display: none; }
html.force-mobile .ap-user__actions > * { flex-shrink: 0; }

/* Avatar with hover-to-change overlay */
.ap-user__avatar {
  position: relative; flex-shrink: 0;
  width: 38px; height: 38px; border-radius: 50%;
  border: none; padding: 0; cursor: pointer; overflow: hidden;
  background: var(--accent-muted); color: var(--accent);
  display: inline-flex; align-items: center; justify-content: center;
  font-size: 14px; font-weight: 700;
}
.ap-user__avatar img { width: 100%; height: 100%; object-fit: cover; }
.ap-user__avatar-edit {
  position: absolute; inset: 0;
  display: flex; align-items: center; justify-content: center;
  background: rgba(0, 0, 0, 0.55); color: #fff;
  opacity: 0; transition: opacity var(--dur-fast, 0.15s);
}
.ap-user__avatar:hover .ap-user__avatar-edit { opacity: 1; }

/* Expand chevron rotates when the row is open */
.ap-user__chev {
  flex-shrink: 0; color: var(--fg-muted);
  display: inline-flex; transition: transform var(--dur-fast, 0.2s);
}
.ap-user--open .ap-user__chev { transform: rotate(90deg); }

/* Stats panel — grows up/down with a grid-rows transition */
.ap-user__stats {
  display: grid; grid-template-rows: 0fr;
  transition: grid-template-rows var(--dur, 0.25s) ease;
}
.ap-user--open .ap-user__stats { grid-template-rows: 1fr; }
.ap-user__stats-inner { overflow: hidden; }
.ap-user--open .ap-user__stats-inner {
  padding: var(--sp-1) var(--sp-4) var(--sp-3);
}
.ap-user__detail {
  font-size: 12px; color: var(--fg-muted); margin-bottom: var(--sp-2);
  word-break: break-all; user-select: text; font-variant-numeric: tabular-nums;
}
.ap-user__detail b { color: var(--fg); font-weight: 600; }
.ap-ustat-grid {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(80px, 1fr));
  gap: var(--sp-2);
}
.ap-ustat {
  display: flex; flex-direction: column; gap: 2px;
  padding: var(--sp-2);
  background: var(--bg-input); border: 1px solid var(--border);
  border-radius: var(--radius-btn);
}
.ap-ustat__val { font-size: 15px; font-weight: 700; font-variant-numeric: tabular-nums; }
.ap-ustat__label { font-size: 10px; color: var(--fg-muted); text-transform: uppercase; letter-spacing: 0.03em; }
.ap-user__foot {
  display: flex; justify-content: space-between; flex-wrap: wrap; gap: var(--sp-2);
  margin-top: var(--sp-2); font-size: 11px; color: var(--fg-muted);
  font-variant-numeric: tabular-nums;
}
.ap-role-select {
  flex-shrink: 0; height: 30px; padding: 0 var(--sp-2);
  border-radius: var(--radius-btn); border: 1px solid var(--border);
  background: var(--bg-input); color: var(--fg);
  font-size: 12px; font-weight: 600; text-transform: capitalize; cursor: pointer;
}
.ap-role-select:disabled { opacity: 0.5; cursor: not-allowed; }

/* Become-a-seller form (profile modal) */
.seller-apply__label {
  display: block; font-size: 12px; font-weight: 600;
  color: var(--fg-muted); margin: var(--sp-3) 0 var(--sp-1);
}
.seller-apply__label:first-of-type { margin-top: 0; }

/* ──────────────────────────────────────
   ADMIN DASHBOARD — analytics
   ────────────────────────────────────── */
.ap-head {
  display: flex; align-items: center; justify-content: space-between;
  gap: var(--sp-3); margin-bottom: var(--sp-4); flex-wrap: wrap;
}
.ap-head__title-row { display: flex; align-items: center; gap: var(--sp-3); }
.ap-head__title { font-size: 22px; font-weight: 700; color: var(--fg); }
@media (max-width: 768px) {
  .ap-head { gap: var(--sp-2); margin-bottom: var(--sp-3); }
  .ap-head__title { font-size: 18px; white-space: nowrap; }
  .ap-head__title-row { flex: 1 1 100%; }
  .ap-head__live { margin-left: 0; }
}
.ap-fakename { border-style: dashed; cursor: pointer; font-family: inherit; }
.ap-fakename--on {
  color: var(--fg);
  background: color-mix(in srgb, var(--accent, #6ee7a8) 22%, transparent);
  border-style: solid; border-color: var(--accent, #6ee7a8);
}
.ap-head__live {
  display: inline-flex; align-items: center; gap: 6px;
  font-size: 12px; color: var(--text-secondary);
  background: var(--bg-input); padding: 4px 10px; border-radius: var(--radius-pill);
}
.ap-head__live { margin-left: auto; }
.ap-head__back {
  font-size: 12px; font-weight: 600; color: var(--accent, #6ee7a8);
  background: color-mix(in srgb, var(--accent, #6ee7a8) 10%, transparent);
  border: 1px solid color-mix(in srgb, var(--accent, #6ee7a8) 25%, transparent);
  padding: 4px 12px; border-radius: var(--radius-pill); text-decoration: none;
}
.ap-head__back:hover { filter: brightness(1.15); }

/* KPI hero cards */
.ap-kpis { display: grid; grid-template-columns: repeat(4, 1fr); gap: var(--sp-3); margin-bottom: var(--sp-5); }
.ap-kpi {
  display: flex; flex-direction: column; gap: 6px;
  background: var(--bg-primary); border: 1px solid var(--border-primary);
  border-radius: var(--radius-card); padding: var(--sp-4);
  position: relative; overflow: hidden;
}
.ap-kpi::before {
  content: ''; position: absolute; inset: 0 auto 0 0; width: 3px; background: var(--accent);
}
.ap-kpi__top { display: flex; align-items: center; justify-content: space-between; }
.ap-kpi__icon { color: var(--accent); display: inline-flex; }
.ap-kpi__icon svg { width: 18px; height: 18px; }
.ap-kpi__val { font-size: 24px; font-weight: 700; color: var(--fg); font-variant-numeric: tabular-nums; line-height: 1.1; }
.ap-kpi__label { font-size: 11px; color: var(--text-tertiary); text-transform: uppercase; letter-spacing: 0.6px; }

/* Generic analytics card */
.ap-card {
  background: var(--bg-primary); border: 1px solid var(--border-primary);
  border-radius: var(--radius-card); padding: var(--sp-4);
  margin-bottom: var(--sp-5);
}

/* 14-day bar chart */
.ap-trend { padding: var(--sp-4) var(--sp-4) var(--sp-2); }
.ap-bars { display: flex; align-items: flex-end; gap: 6px; height: 130px; }
.ap-bar { flex: 1; display: flex; flex-direction: column; align-items: center; gap: 5px; height: 100%; justify-content: flex-end; }
.ap-bar__fill {
  width: 100%; min-height: 3px; border-radius: 4px 4px 2px 2px;
  background: linear-gradient(180deg, var(--accent-hover), var(--accent));
  transition: filter var(--t); transform-origin: bottom;
  animation: barGrow 0.5s var(--ease-out) both;
}
.ap-bar:hover .ap-bar__fill { filter: brightness(1.25); }
.ap-bar__day { font-size: 10px; color: var(--text-tertiary); font-variant-numeric: tabular-nums; }
@keyframes barGrow { from { transform: scaleY(0); } to { transform: scaleY(1); } }

/* Metric tile grid */
.ap-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: var(--sp-2); margin-bottom: var(--sp-5); }
.ap-tile {
  display: flex; flex-direction: column; gap: 3px;
  background: var(--bg-primary); border: 1px solid var(--border-primary);
  border-radius: var(--radius-card); padding: var(--sp-3) var(--sp-4);
}
.ap-tile__label { font-size: 11px; color: var(--text-tertiary); text-transform: uppercase; letter-spacing: 0.5px; }
.ap-tile__val { font-size: 18px; font-weight: 700; color: var(--fg); font-variant-numeric: tabular-nums; }
.ap-pos { color: var(--success); }
.ap-neg { color: var(--danger); }
.ap-accent { color: var(--accent); }
.ap-warn { color: #e5a50a; }
.ap-note { font-size: 11px; color: var(--text-tertiary); margin: calc(var(--sp-4) * -1 + 2px) 0 var(--sp-5); line-height: 1.5; }

/* Two-column leaderboards */
.ap-cols { display: grid; grid-template-columns: 1fr 1fr; gap: var(--sp-4); }
.ap-col { min-width: 0; }

/* Ranked list with progress bar */
.ap-rank { display: flex; flex-direction: column; gap: var(--sp-3); }
.ap-rank__row { display: flex; align-items: center; gap: var(--sp-3); font-size: 13px; }
.ap-rank__pos {
  width: 20px; height: 20px; flex-shrink: 0; border-radius: 50%;
  background: var(--bg-input); color: var(--text-secondary);
  display: inline-flex; align-items: center; justify-content: center;
  font-size: 11px; font-weight: 700;
}
.ap-rank__flag { width: 20px; text-align: center; flex-shrink: 0; }
.ap-rank__name { flex: 0 0 38%; max-width: 38%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: var(--fg); }
.ap-rank__bar { flex: 1; height: 7px; background: var(--bg-input); border-radius: var(--radius-pill); overflow: hidden; }
.ap-rank__bar-fill { height: 100%; border-radius: var(--radius-pill); background: linear-gradient(90deg, var(--accent), var(--accent-hover)); animation: barWidth 0.6s var(--ease-out) both; }
.ap-rank__val { flex-shrink: 0; font-variant-numeric: tabular-nums; color: var(--text-secondary); font-weight: 600; min-width: 64px; text-align: right; }
.ap-rank__muted { color: var(--text-tertiary); font-weight: 400; }
@keyframes barWidth { from { width: 0 !important; } }

/* Site analytics — собственная метрика в админ-панели */
.ap-an__bar { display: flex; align-items: center; gap: var(--sp-3); }
.ap-an__tiles { flex: 1; margin-bottom: 0; }
.ap-an__chev {
  flex: none; width: 34px; height: 34px; border-radius: var(--radius-card);
  border: 1px solid var(--border); background: var(--bg-input); color: var(--text-secondary);
  display: inline-flex; align-items: center; justify-content: center; cursor: pointer;
  transition: transform .2s ease, color .15s ease;
}
.ap-an__chev:hover { color: var(--fg); }
.ap-an__chev--open { transform: rotate(180deg); }
.ap-an__full { margin-top: var(--sp-4); padding-top: var(--sp-4); border-top: 1px solid var(--border); }
.ap-an__full .ap-rank__row { padding: 3px 0; }
.ap-an__full .ap-log-list { max-height: 240px; }
.ap-an__full .ap-log-row { padding: 5px 0; font-size: 12px; }
.ap-an__cols { display: grid; grid-template-columns: 1fr 1fr; gap: var(--sp-4); }
.ap-an__head { font-size: 12px; font-weight: 700; text-transform: uppercase; letter-spacing: .06em; color: var(--text-secondary); margin-bottom: var(--sp-2); }
.ap-an__hint { text-transform: none; letter-spacing: 0; font-weight: 400; opacity: .6; }
.ap-an-cal { position: relative; display: inline-flex; }
.ap-an-cal__pop {
  position: absolute; left: calc(100% + 6px); top: 0; z-index: 60;
  display: flex; align-items: center; gap: 6px;
  background: var(--bg-input); border: 1px solid var(--border);
  border-radius: var(--radius-card); padding: 8px;
  box-shadow: 0 10px 30px rgba(0,0,0,.45);
}
.ap-an-cal__pop[hidden] { display: none; }
.ap-an-cal__date {
  background: var(--bg-card, #101826); border: 1px solid var(--border);
  border-radius: 8px; color: var(--fg); padding: 4px 8px;
  font-size: 12px; font-family: inherit; color-scheme: dark; cursor: pointer;
}
.ap-an-cal__sep { color: var(--text-tertiary); font-size: 12px; }
.ap-users-scroll { max-height: 480px; overflow-y: auto; }
/* Sellers: три тайла Sales/Revenue/Earned в одну строку — строка компактная */
.ap-seller__row .ap-ustat-grid { display: flex; gap: var(--sp-2); }
.ap-seller__row .ap-ustat { min-width: 92px; }
.ap-users-modal { padding: var(--sp-4) var(--sp-5); }
.modal-fullscreen .ap-users-scroll { max-height: none; overflow-y: visible; }
@media (max-width: 900px) { .ap-an__cols { grid-template-columns: 1fr; } }

@media (max-width: 768px) {
  .ap-kpis { grid-template-columns: repeat(2, 1fr); }
  .ap-grid { grid-template-columns: repeat(2, 1fr); }
  .ap-cols { grid-template-columns: 1fr; gap: 0; }
  .ap-kpi { padding: var(--sp-3); }
  .ap-kpi__val { font-size: 19px; }
  .ap-tile { padding: var(--sp-2) var(--sp-3); }
  .ap-tile__val { font-size: 15px; }
  /* Seller-строка: три тайла не должны раздувать ряд — листаются */
  .ap-seller__row .ap-ustat-grid {
    flex-shrink: 1; min-width: 0; max-width: 55%;
    overflow-x: auto; scrollbar-width: none;
  }
  .ap-seller__row .ap-ustat-grid::-webkit-scrollbar { display: none; }
  .ap-seller__row .ap-ustat { min-width: 76px; }
  /* Аналитика: календарный поповер не уезжает за экран */
  .ap-an-cal__pop { left: auto; right: 0; }
  .ap-bars { height: 100px; }
}

/* force-mobile (телефон с десктопным вьюпортом) — те же правила */
html.force-mobile .ap-kpis { grid-template-columns: repeat(2, 1fr); }
html.force-mobile .ap-grid { grid-template-columns: repeat(2, 1fr); }
html.force-mobile .ap-cols { grid-template-columns: 1fr; gap: 0; }
html.force-mobile .ap-kpi { padding: var(--sp-3); }
html.force-mobile .ap-kpi__val { font-size: 19px; }
html.force-mobile .ap-tile { padding: var(--sp-2) var(--sp-3); }
html.force-mobile .ap-tile__val { font-size: 15px; }
html.force-mobile .ap-seller__row .ap-ustat-grid {
  flex-shrink: 1; min-width: 0; max-width: 55%;
  overflow-x: auto; scrollbar-width: none;
}
html.force-mobile .ap-seller__row .ap-ustat { min-width: 76px; }
html.force-mobile .ap-an-cal__pop { left: auto; right: 0; }

/* ──────────────────────────────────────
   GLITCH CAPTCHA (login/register)
   Dark terminal panel — a scrambled access code "decrypts" into place.
   ────────────────────────────────────── */
.captcha-block {
  padding: var(--sp-3) var(--sp-4);
  border: 1px solid var(--border);
  border-radius: var(--radius-card);
  background: var(--bg-input);
  margin-bottom: var(--sp-3);
}
.captcha-block__input .form-label { margin-bottom: 4px; font-size: 13px; }
.captcha-input {
  font-size: 18px !important; letter-spacing: 2px;
  font-weight: 600; text-align: center;
  font-variant-numeric: tabular-nums;
}
.captcha-hint {
  display: block; margin-top: 6px;
  font-size: 11px; color: var(--fg-muted); text-align: center;
}
.captcha-hint--error { color: var(--danger); font-weight: 600; }

.captcha-glitch {
  position: relative;
  overflow: hidden;
  background: var(--bg-secondary);
  border-color: rgba(61, 122, 184, 0.35);
  box-shadow: inset 0 0 24px rgba(0, 0, 0, 0.4);
}
.captcha-glitch__scanlines {
  position: absolute; inset: 0; pointer-events: none; z-index: 0;
  background: repeating-linear-gradient(
    to bottom, rgba(255, 255, 255, 0.035) 0px, rgba(255, 255, 255, 0.035) 1px,
    transparent 1px, transparent 3px
  );
  mix-blend-mode: overlay;
}
.captcha-glitch__head {
  position: relative; z-index: 1;
  display: flex; align-items: center; gap: 7px;
  font-family: var(--font-mono);
  font-size: 10.5px; letter-spacing: 0.5px; text-transform: uppercase;
  color: var(--accent); opacity: 0.85;
  margin-bottom: var(--sp-3);
}
.captcha-glitch__head > span:not(.captcha-glitch__dot) {
  flex: 1; min-width: 0;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.captcha-glitch__dot {
  width: 6px; height: 6px; border-radius: 50%;
  background: var(--accent);
  box-shadow: 0 0 6px var(--accent);
  animation: captchaDotPulse 1.6s ease-in-out infinite;
  flex-shrink: 0;
}
@keyframes captchaDotPulse {
  0%, 100% { opacity: 1; }
  50% { opacity: 0.35; }
}
.captcha-glitch__refresh {
  margin-left: auto;
  display: flex; align-items: center; justify-content: center;
  width: 22px; height: 22px; padding: 0;
  border: none; background: transparent; color: var(--fg-muted);
  cursor: pointer; border-radius: 5px;
  transition: color 0.15s, background 0.15s, transform 0.3s;
}
.captcha-glitch__refresh svg { width: 14px; height: 14px; }
.captcha-glitch__refresh:hover { color: var(--accent); background: rgba(61, 122, 184, 0.12); }
.captcha-glitch__refresh:active svg { transform: rotate(180deg); }

.captcha-glitch__code {
  position: relative; z-index: 1;
  display: flex; justify-content: center; gap: 6px;
  margin-bottom: var(--sp-3);
}
.captcha-glyph {
  display: flex; align-items: center; justify-content: center;
  width: 34px; height: 42px;
  font-family: var(--font-mono);
  font-size: 20px; font-weight: 700;
  color: var(--accent);
  background: rgba(61, 122, 184, 0.08);
  border: 1px solid rgba(61, 122, 184, 0.3);
  border-radius: 6px;
  text-shadow: 0 0 8px rgba(61, 122, 184, 0.6);
  user-select: none;
}
.captcha-glyph--locked {
  animation: captchaGlyphLock 0.28s var(--ease-standard, ease);
  color: var(--fg);
  text-shadow: 0 0 10px rgba(61, 122, 184, 0.85), 2px 0 rgba(72, 136, 201, 0.55), -2px 0 rgba(47, 98, 150, 0.55);
}
@keyframes captchaGlyphLock {
  0% { transform: translateY(-3px) scaleY(1.15); filter: blur(1.5px); }
  100% { transform: none; filter: blur(0); }
}
@media (prefers-reduced-motion: reduce) {
  .captcha-glyph--locked { animation: none; }
  .captcha-glitch__dot { animation: none; }
}

.captcha-glitch__prompt {
  display: flex; align-items: center; gap: 8px;
  background: rgba(0, 0, 0, 0.35);
  border: 1px solid rgba(61, 122, 184, 0.25);
  border-radius: 8px;
  padding: 0 var(--sp-3);
}
.captcha-glitch__caret {
  font-family: var(--font-mono); color: var(--accent);
  font-weight: 700; flex-shrink: 0;
}
.captcha-glitch__input.form-input {
  border: none; background: transparent; padding-left: 0;
  font-family: var(--font-mono); text-transform: uppercase;
}
.captcha-glitch__input.form-input:focus { box-shadow: none; }

/* ──────────────────────────────────────
   IDLE / INACTIVITY CAPTCHA
   ────────────────────────────────────── */
.idle-captcha-overlay {
  position: fixed; inset: 0; z-index: 99999;
  display: flex; align-items: center; justify-content: center;
  background: rgba(0, 0, 0, 0);
  backdrop-filter: blur(0);
  transition: background 0.4s, backdrop-filter 0.4s;
}
.idle-captcha-overlay--visible {
  background: rgba(0, 0, 0, 0.82);
  backdrop-filter: blur(12px);
}
.idle-captcha-overlay--done {
  background: rgba(0, 0, 0, 0) !important;
  backdrop-filter: blur(0) !important;
  pointer-events: none;
}
.idle-captcha-overlay--done .idle-captcha {
  transform: scale(0.9); opacity: 0;
}

.idle-captcha {
  text-align: center;
  padding: var(--sp-6);
  transition: transform 0.4s ease, opacity 0.4s ease;
}
.idle-captcha__icon {
  color: var(--accent);
  margin-bottom: var(--sp-4);
  animation: idlePulse 2s ease-in-out infinite;
}
@keyframes idlePulse {
  0%, 100% { transform: scale(1); opacity: 1; }
  50% { transform: scale(1.08); opacity: 0.85; }
}
.idle-shield {
  stroke: var(--accent); fill: rgba(61, 122, 184, 0.08);
  stroke-dasharray: 200; stroke-dashoffset: 200;
  animation: idleShieldDraw 1.2s ease forwards;
}
@keyframes idleShieldDraw {
  to { stroke-dashoffset: 0; }
}
.idle-check {
  stroke: var(--accent);
  stroke-dasharray: 40; stroke-dashoffset: 40;
  animation: idleCheckDraw 0.6s 1s ease forwards;
}
@keyframes idleCheckDraw {
  to { stroke-dashoffset: 0; }
}

/* Sup Dog mascot heckling the idle user — reuses the FAQ assistant animations. */
.idle-captcha__mascot {
  position: relative; width: 132px; height: 132px;
  margin: 0 auto var(--sp-5); display: flex; align-items: center; justify-content: center;
}
.idle-captcha__glow {
  position: absolute; inset: 10%; border-radius: 50%;
  background: radial-gradient(circle, rgba(61,122,184,0.5), transparent 66%);
  filter: blur(10px); animation: clippyGlow 3s ease-in-out infinite;
}
.idle-captcha__ring {
  position: absolute; inset: 14%; border: 1.5px solid rgba(61,122,184,0.55);
  border-radius: 50%; opacity: 0; animation: clippyRing 2.8s ease-out infinite;
}
.idle-captcha__ring--2 { animation-delay: 1.4s; }
.idle-captcha__dog {
  position: relative; z-index: 2; width: 104px; height: 104px; object-fit: contain;
  transform-origin: 50% 85%;
  animation: clippyBob 3.4s ease-in-out infinite, clippyWiggle 7s ease-in-out infinite;
  filter: drop-shadow(0 8px 18px rgba(0,0,0,0.5));
}
.idle-captcha__bubble {
  position: absolute; z-index: 4; left: 50%; bottom: calc(100% - 6px); transform: translateX(-50%);
  white-space: nowrap; font-size: 13px; font-weight: 700; color: var(--fg);
  padding: 7px 13px; border-radius: 14px;
  background: var(--bg-card, #1a1d24); border: 1px solid var(--accent);
  box-shadow: 0 6px 20px rgba(0,0,0,0.45);
}
.idle-captcha__bubble::after {
  content: ''; position: absolute; top: 100%; left: 50%; transform: translateX(-50%);
  border: 6px solid transparent; border-top-color: var(--accent);
}
.idle-captcha__bubble--pop { animation: clippyBubblePop 0.34s var(--ease-standard, ease); }
@keyframes clippyBubblePop {
  0% { transform: translateX(-50%) scale(0.86); opacity: 0; }
  60% { transform: translateX(-50%) scale(1.04); opacity: 1; }
  100% { transform: translateX(-50%) scale(1); opacity: 1; }
}

.idle-captcha__title {
  font-size: 20px; font-weight: 700; color: var(--fg);
  margin-bottom: var(--sp-1);
}
.idle-captcha__text {
  font-size: 14px; color: var(--fg-muted);
  margin-bottom: var(--sp-5);
}

.idle-captcha__slider {
  position: relative;
  width: 280px; height: 48px; margin: 0 auto;
  background: var(--bg-secondary);
  border: 1px solid var(--border);
  border-radius: 24px;
  overflow: hidden;
  user-select: none; -webkit-user-select: none;
}
.idle-captcha__fill {
  position: absolute; left: 0; top: 0; bottom: 0;
  width: 0;
  background: linear-gradient(90deg, var(--accent-muted), rgba(61, 122, 184, 0.25));
  border-radius: 24px;
  transition: width 0.05s linear;
  pointer-events: none;
}
.idle-captcha__thumb {
  position: absolute; left: 4px; top: 4px;
  width: 40px; height: 40px;
  background: var(--accent);
  border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  color: #fff;
  cursor: grab;
  transition: transform 0.05s linear, box-shadow 0.2s;
  z-index: 2;
}
.idle-captcha__thumb--active {
  cursor: grabbing;
  box-shadow: 0 0 16px rgba(61, 122, 184, 0.5);
}
.idle-captcha__label {
  position: absolute; inset: 0;
  display: flex; align-items: center; justify-content: center;
  padding-left: 48px;
  font-size: 13px; font-weight: 600; color: var(--fg-muted);
  pointer-events: none;
  transition: opacity 0.15s;
}

/* ============================================================
   ON REQUEST — cart sections, seller banners, wallet holds,
   and the Stock Requests (escrow) screen.
   ============================================================ */

/* ── Cart: two settlement lanes ── */
.cart-sections { display: flex; flex-direction: column; gap: var(--sp-5); }
.cart-section {
  border: 1px solid var(--border-primary); border-radius: var(--radius-card, 14px);
  padding: var(--sp-4); background: var(--bg-secondary, var(--bg-input));
}
.cart-section--request { border-color: rgba(217, 154, 43, 0.4); }
.cart-section__head {
  display: flex; align-items: center; justify-content: space-between;
  margin-bottom: var(--sp-3); gap: var(--sp-3); flex-wrap: wrap;
}
.cart-section__title { display: flex; align-items: center; gap: var(--sp-2); font-size: 16px; font-weight: 700; }
.cart-section__count { font-size: 13px; color: var(--text-secondary); font-variant-numeric: tabular-nums; }
.cart-section__foot { margin-top: var(--sp-3); display: flex; flex-direction: column; gap: var(--sp-2); }
.cart-note {
  display: flex; gap: var(--sp-2); align-items: flex-start;
  font-size: 12.5px; line-height: 1.5; color: var(--text-secondary);
  background: var(--bg-input); border-radius: var(--radius-btn);
  padding: var(--sp-3); margin-bottom: var(--sp-3);
}
.cart-note--request { background: rgba(217, 154, 43, 0.10); border: 1px solid rgba(217, 154, 43, 0.3); }
.cart-note svg { flex-shrink: 0; color: #d99a2b; margin-top: 1px; }
.cart-checkout-btn--request { background: #d99a2b; }
.cart-checkout-btn--request:hover:not(:disabled) { background: #c4882020; background: #c98c24; }

/* ── Seller panel: trusted banner + request inbox ── */
.sd-shop__trusted { color: var(--success); }
.sd-inbox {
  display: flex; align-items: center; gap: var(--sp-3); width: 100%;
  padding: var(--sp-3) var(--sp-4); margin-bottom: var(--sp-3);
  border: 1px solid rgba(217, 154, 43, 0.4); border-radius: var(--radius-btn);
  background: rgba(217, 154, 43, 0.10); cursor: pointer; text-align: left;
  transition: background var(--t, 0.15s);
}
.sd-inbox:hover { background: rgba(217, 154, 43, 0.18); }
.sd-inbox__icon { color: #d99a2b; flex-shrink: 0; display: inline-flex; }
.sd-inbox__text { flex: 1; min-width: 0; }
.sd-inbox__title { font-size: 14px; font-weight: 700; }
.sd-inbox__sub { font-size: 12px; color: var(--text-secondary); }
.sd-inbox__arrow { color: var(--text-secondary); display: inline-flex; }
.sd-inbox--preorder { border-color: rgba(100,160,220,0.4); background: rgba(100,160,220,0.08); }
.sd-inbox--preorder:hover { background: rgba(100,160,220,0.15); }
.sd-inbox--preorder .sd-inbox__icon { color: #64a0dc; }

.sd-trust { border-radius: var(--radius-btn); padding: var(--sp-3) var(--sp-4); margin-bottom: var(--sp-4); }
.sd-trust--ok {
  display: flex; align-items: center; gap: var(--sp-3); flex-wrap: wrap;
  background: rgba(79, 174, 78, 0.10); border: 1px solid rgba(79, 174, 78, 0.3);
}
.sd-trust__badge { font-weight: 700; color: var(--success); white-space: nowrap; }
.sd-trust--ok .sd-trust__text { font-size: 13px; color: var(--text-secondary); }
.sd-trust--upsell { background: var(--accent-muted); border: 1px solid var(--accent); }
.sd-trust__head { display: flex; gap: var(--sp-3); align-items: flex-start; }
.sd-trust__lock { color: var(--accent); flex-shrink: 0; display: inline-flex; margin-top: 2px; }
.sd-trust__title { font-size: 15px; font-weight: 700; }
.sd-trust__sub { font-size: 12.5px; color: var(--text-secondary); line-height: 1.5; margin-top: 2px; }
.sd-trust__btn { margin-top: var(--sp-3); }

/* ──────────────────────────────────────
   LOGO TRANSITION — VK-STYLE RIPPLE
   Two flat brand-colour discs bloom from the logo (origin via --lx/--ly) in a
   snappy material ripple, the PAVEL head pops at centre, then everything fades
   to reveal the page. Smoothness comes from using SOLID-colour discs (the
   compositor draws these as plain quads — scaling is free, no per-frame raster)
   sized large up-front and animated only via transform/opacity. The old version
   scaled a tiny *gradient* up ~80×, which forced a re-raster every frame and
   stuttered.
   ────────────────────────────────────── */
.logo-warp {
  position: fixed; inset: 0; z-index: 99999; pointer-events: none; overflow: hidden;
}
.logo-warp__disc {
  position: absolute; left: var(--lx); top: var(--ly);
  /* Base size already large (a full viewport-max) so the modest scale-up never
     needs a sharper re-raster — solid fill keeps it a cheap composited quad. */
  width: 100vmax; height: 100vmax; margin: -50vmax 0 0 -50vmax; border-radius: 50%;
  transform: scale(0); transform-origin: center; opacity: 1;
  will-change: transform, opacity; backface-visibility: hidden;
}
.logo-warp__disc--1 { background: var(--accent); animation: warpDisc 0.76s cubic-bezier(0.45, 0, 0.15, 1) forwards; }
.logo-warp__disc--2 { background: #5aa2e6;        animation: warpDisc 0.76s cubic-bezier(0.45, 0, 0.15, 1) 0.09s forwards; }
@keyframes warpDisc {
  0%   { transform: scale(0); opacity: 1; }
  42%  { transform: scale(3); opacity: 1; }
  58%  { transform: scale(3); opacity: 1; }
  100% { transform: scale(3); opacity: 0; }
}
.logo-warp__mark {
  position: absolute; left: 50%; top: 50%;
  width: 220px; height: 220px; object-fit: contain;
  filter: drop-shadow(0 10px 34px rgba(0,0,0,0.4));
  transform: translate(-50%, -66%) scale(0.4) rotate(-14deg);
  opacity: 0;
  will-change: transform, opacity; backface-visibility: hidden;
  animation: warpMark 0.76s cubic-bezier(0.34, 1.45, 0.64, 1) forwards;
}
@keyframes warpMark {
  0%   { opacity: 0; transform: translate(-50%, -66%) scale(0.4) rotate(-14deg); }
  34%  { opacity: 1; transform: translate(-50%, -66%) scale(1.0) rotate(2deg); }
  60%  { opacity: 1; transform: translate(-50%, -66%) scale(1.08) rotate(0deg); }
  100% { opacity: 0; transform: translate(-50%, -66%) scale(1.3) rotate(0deg); }
}
.logo-warp__domain {
  position: absolute; left: 50%; top: 50%;
  transform: translate(-50%, 46px);
  font-size: 17px; font-weight: 700; letter-spacing: 2px; text-transform: uppercase;
  color: #fff; text-shadow: 0 2px 10px rgba(0,0,0,0.35);
  white-space: nowrap;
  opacity: 0;
  will-change: opacity; backface-visibility: hidden;
  animation: warpDomain 0.76s cubic-bezier(0.34, 1.45, 0.64, 1) forwards;
}
@keyframes warpDomain {
  0%   { opacity: 0; }
  34%  { opacity: 0.92; }
  60%  { opacity: 0.92; }
  100% { opacity: 0; }
}

/* Plastic bank-card particles burst outward from both the click point and the
   centre where the mark lands — a brand flourish tying the transition to what
   the site actually sells. Fixed-size, GPU-cheap: only transform/opacity are
   animated, same as the discs above. */
.logo-warp__card {
  position: absolute; left: var(--lx); top: var(--ly);
  width: 34px; height: 48px; margin: -24px 0 0 -17px;
  border-radius: 5px;
  background: linear-gradient(135deg, #4a86c2, #1f4d7a);
  box-shadow: 0 6px 18px rgba(0,0,0,0.45), inset 0 1px 0 rgba(255,255,255,0.18);
  opacity: 0;
  transform: translate(0, 0) rotate(0deg) scale(0.5);
  will-change: transform, opacity; backface-visibility: hidden;
  animation: warpCard 0.76s cubic-bezier(0.22, 1, 0.36, 1) forwards;
}
.logo-warp__card--center { left: 50%; top: 50%; }
.logo-warp__card::before {
  /* chip */
  content: ''; position: absolute; left: 6px; top: 11px; width: 11px; height: 8px;
  background: linear-gradient(135deg, #f0d488, #b8944a); border-radius: 2px;
}
.logo-warp__card::after {
  /* faint number lines */
  content: ''; position: absolute; left: 6px; bottom: 9px; width: 21px; height: 2.5px;
  background: rgba(255,255,255,0.4); border-radius: 1px;
  box-shadow: 0 5px 0 rgba(255,255,255,0.24);
}
@keyframes warpCard {
  0%   { opacity: 0; transform: translate(0, 0) rotate(0deg) scale(0.5); }
  22%  { opacity: 1; }
  100% { opacity: 0; transform: translate(var(--tx), var(--ty)) rotate(var(--rot)) scale(1); }
}
@media (prefers-reduced-motion: reduce) {
  .logo-warp { display: none; }
}

/* ──────────────────────────────────────
   TRUSTED-SELLER UPSELL — banner + modal
   ────────────────────────────────────── */
.ts-banner {
  position: relative; width: 100%; text-align: left;
  display: flex; align-items: center; gap: var(--sp-4);
  margin-bottom: var(--sp-4); padding: var(--sp-5);
  border-radius: var(--radius-card); cursor: pointer; overflow: hidden;
  color: var(--text-primary);
  background:
    radial-gradient(120% 140% at 0% 0%, rgba(61,122,184,0.22), transparent 60%),
    linear-gradient(135deg, rgba(61,122,184,0.16), rgba(61,122,184,0.04));
  border: 1px solid var(--accent);
  box-shadow: 0 6px 26px rgba(0,0,0,0.22);
  transition: transform var(--dur-2) var(--ease-standard), box-shadow var(--dur-2) var(--ease-standard), border-color var(--dur-2);
}
.ts-banner:hover { transform: translateY(-2px); box-shadow: 0 12px 34px rgba(61,122,184,0.28); border-color: var(--accent); }
.ts-banner:active { transform: translateY(0); }
.ts-banner__glow {
  position: absolute; right: -40px; top: -60px; width: 240px; height: 240px; border-radius: 50%;
  background: radial-gradient(circle, rgba(61,122,184,0.35), transparent 65%); filter: blur(12px); pointer-events: none;
  animation: clippyGlow 4s ease-in-out infinite;
}
.ts-banner__mascot { position: relative; flex-shrink: 0; width: 72px; height: 72px; display: flex; align-items: center; justify-content: center; }
.ts-banner__ring { position: absolute; inset: 8%; border: 1.5px solid rgba(61,122,184,0.5); border-radius: 50%; opacity: 0; animation: clippyRing 2.8s ease-out infinite; }
.ts-banner__ring--2 { animation-delay: 1.4s; }
.ts-banner__dog { position: relative; z-index: 2; width: 64px; height: 64px; object-fit: contain; animation: clippyBob 3.4s ease-in-out infinite; filter: drop-shadow(0 6px 14px rgba(0,0,0,0.4)); }
.ts-banner__body { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 4px; }
.ts-banner__kicker {
  display: inline-flex; align-items: center; gap: 5px; align-self: flex-start;
  font-size: 11px; font-weight: 800; text-transform: uppercase; letter-spacing: 0.05em;
  color: var(--accent); padding: 3px 9px; border-radius: var(--radius-pill, 20px);
  background: var(--accent-muted); border: 1px solid var(--accent);
}
.ts-banner__title { font-size: 18px; font-weight: 800; line-height: 1.25; }
.ts-banner__sub { font-size: 13px; color: var(--text-secondary); line-height: 1.55; }
.ts-banner__sub b { color: var(--text-primary); }
.ts-banner__cta {
  flex-shrink: 0; display: inline-flex; align-items: center; gap: 6px; align-self: center;
  font-size: 13px; font-weight: 800; color: #fff; white-space: nowrap;
  padding: 10px 16px; border-radius: var(--radius-btn); background: var(--accent);
  box-shadow: 0 4px 14px rgba(61,122,184,0.4);
}
.ts-banner:hover .ts-banner__cta { background: var(--accent-hover, var(--accent)); }
@media (max-width: 720px) {
  .ts-banner { flex-wrap: wrap; }
  .ts-banner__cta { width: 100%; justify-content: center; }
}

/* Mascot (shared by modal head) */
.ts-hero__mascot { position: relative; flex-shrink: 0; width: 92px; height: 92px; display: flex; align-items: center; justify-content: center; }
.ts-hero__mascot--sm { width: 76px; height: 76px; }
.ts-hero__glow { position: absolute; inset: 6%; border-radius: 50%; background: radial-gradient(circle, rgba(61,122,184,0.5), transparent 66%); filter: blur(8px); animation: clippyGlow 3s ease-in-out infinite; }
.ts-hero__ring { position: absolute; inset: 12%; border: 1.5px solid rgba(61,122,184,0.55); border-radius: 50%; opacity: 0; animation: clippyRing 2.8s ease-out infinite; }
.ts-hero__ring--2 { animation-delay: 1.4s; }
.ts-hero__spark { position: absolute; z-index: 3; font-size: 15px; font-weight: 800; color: var(--accent); opacity: 0; text-shadow: 0 2px 8px rgba(61,122,184,0.6); animation: clippySpark 3s ease-in-out infinite; }
.ts-hero__spark--1 { top: 10%; left: 6%; animation-delay: 0.4s; }
.ts-hero__spark--2 { top: 18%; right: 4%; color: var(--fg); font-size: 17px; animation-delay: 1.7s; }
.ts-hero__mascot--sm .ts-hero__dog { width: 64px; height: 64px; }
.ts-hero__dog { position: relative; z-index: 2; width: 80px; height: 80px; object-fit: contain; transform-origin: 50% 85%; animation: clippyBob 3.4s ease-in-out infinite, clippyWiggle 7s ease-in-out infinite; filter: drop-shadow(0 8px 18px rgba(0,0,0,0.45)); }

.ts-tag { display: inline-flex; align-items: center; font-size: 11px; font-weight: 700; padding: 1px 7px; border-radius: var(--radius-pill, 20px); background: var(--bg-hover); border: 1px solid var(--border); color: var(--text-secondary); white-space: nowrap; }
.ts-tag--trusted { color: var(--success); background: rgba(79,174,78,0.12); border-color: rgba(79,174,78,0.4); }
.ts-tag--goat { color: var(--accent); background: var(--accent-muted); border-color: var(--accent); }
.ts-ok { color: var(--success); font-weight: 700; font-family: var(--font-mono); }
.ts-low { color: var(--danger, #d9534f); font-weight: 700; font-family: var(--font-mono); }

/* GOAT BUYER rides the exact same Classic blue skin as the Trusted-Seller
   upsell — no separate accent. (.ts-banner--goat / .ts-sheet--goat carry only
   copy differences in markup.) */

/* ── Premium purchase sheet — slide-over, landscape, animated ── */
.ts-drawer {
  position: fixed; inset: 0; z-index: 9998;
  display: flex; align-items: flex-start; justify-content: center;
  padding: 8vh var(--sp-4) calc(var(--sp-4) + env(safe-area-inset-bottom, 0px));
  overflow-y: auto; overscroll-behavior: contain;
  -webkit-overflow-scrolling: touch;
  background: radial-gradient(120% 80% at 50% 0%, rgba(20,40,66,0.55), rgba(4,7,12,0.78));
  backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px);
  opacity: 0; transition: opacity 0.28s var(--ease-standard);
}
.ts-drawer--in { opacity: 1; }
/* Exit: let the backdrop linger a touch so the sheet finishes its glide out. */
.ts-drawer--out { opacity: 0; transition: opacity 0.36s var(--ease-standard) 0.06s; }

.ts-sheet--premium {
  position: relative; width: 100%; max-width: 900px;
  border-radius: 22px; padding: 32px 34px 26px; overflow: hidden;
  background:
    radial-gradient(130% 120% at 88% -10%, rgba(90,162,230,0.20), transparent 52%),
    radial-gradient(90% 120% at 0% 110%, rgba(61,122,184,0.14), transparent 55%),
    linear-gradient(165deg, #0f1d2e 0%, #0b1320 58%, #0a1019 100%);
  border: 1px solid rgba(90,162,230,0.22);
  box-shadow: 0 34px 90px rgba(0,0,0,0.62), 0 0 70px rgba(61,122,184,0.18);
  transform: translateY(-28px) scale(0.97); opacity: 0;
  transition: transform 0.42s cubic-bezier(0.22, 1, 0.36, 1), opacity 0.42s var(--ease-standard);
}
.ts-drawer--in .ts-sheet--premium { transform: none; opacity: 1; }
/* Exit mirror: a premium ease-in "settle down & away" — the reverse of the
   overshoot entrance, timed so it isn't cut off before the overlay removes. */
.ts-drawer--out .ts-sheet--premium {
  transform: translateY(16px) scale(0.955); opacity: 0;
  transition: transform 0.4s cubic-bezier(0.55, 0, 0.68, 0), opacity 0.34s var(--ease-standard);
}
/* Clean hairline accent along the top edge (login-panel aesthetic). */
.ts-sheet--premium::after {
  content: ''; position: absolute; top: 0; left: 0; right: 0; height: 1px; z-index: 2; pointer-events: none;
  background: linear-gradient(90deg, transparent, rgba(124,192,255,0.65), transparent);
}
/* Drifting glow aura + faint tech grid (decorative, behind content) */
.ts-sheet__aura {
  position: absolute; inset: -30%; z-index: 0; pointer-events: none; filter: blur(22px);
  background:
    radial-gradient(38% 48% at 78% 14%, rgba(90,162,230,0.32), transparent 60%),
    radial-gradient(42% 52% at 14% 92%, rgba(61,122,184,0.24), transparent 60%);
  animation: tsAura 9s ease-in-out infinite alternate;
}
@keyframes tsAura { from { transform: translate(0,0) scale(1); } to { transform: translate(3%, -2%) scale(1.08); } }
.ts-sheet__grid {
  position: absolute; inset: 0; z-index: 0; pointer-events: none; opacity: 0.6;
  background-image:
    linear-gradient(rgba(255,255,255,0.028) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255,255,255,0.028) 1px, transparent 1px);
  background-size: 30px 30px;
  -webkit-mask: radial-gradient(75% 65% at 72% 16%, #000, transparent 78%);
  mask: radial-gradient(75% 65% at 72% 16%, #000, transparent 78%);
}
.ts-sheet__head, .ts-sheet__perks, .ts-sheet__foot { position: relative; z-index: 1; }
.ts-sheet__close {
  position: absolute; top: 16px; right: 16px; z-index: 3;
  width: 32px; height: 32px; border-radius: 9px; border: 1px solid transparent; cursor: pointer;
  background: rgba(255,255,255,0.05); color: var(--text-secondary); font-size: 20px; line-height: 1;
  transition: background var(--t), color var(--t), border-color var(--t);
}
.ts-sheet__close:hover { background: rgba(255,255,255,0.12); color: #fff; border-color: rgba(124,192,255,0.4); }

.ts-sheet__head { display: flex; align-items: center; gap: var(--sp-4); }
.ts-sheet__intro { min-width: 0; flex: 1; }
.ts-sheet__kicker {
  position: relative; overflow: hidden;
  display: inline-flex; align-items: center; gap: 5px;
  font-size: 10.5px; font-weight: 800; text-transform: uppercase; letter-spacing: 0.09em;
  color: #bfe0ff; padding: 4px 11px; border-radius: var(--radius-pill, 20px);
  background: linear-gradient(120deg, rgba(61,122,184,0.42), rgba(72,136,201,0.30));
  border: 1px solid rgba(124,192,255,0.45);
  box-shadow: 0 0 18px rgba(61,122,184,0.3);
}
.ts-sheet__kicker svg { position: relative; z-index: 1; }
.ts-sheet__kicker-shine {
  position: absolute; top: 0; left: -60%; width: 45%; height: 100%; pointer-events: none;
  background: linear-gradient(100deg, transparent, rgba(255,255,255,0.6), transparent);
  transform: skewX(-18deg); animation: tsShine 3.4s ease-in-out infinite;
}
@keyframes tsShine { 0% { left: -60%; } 55%, 100% { left: 150%; } }
.ts-sheet__title { font-size: 25px; font-weight: 800; letter-spacing: -0.01em; margin: 10px 0 5px; color: #fff; }
.ts-grad {
  background: linear-gradient(90deg, #8fd0ff, #5aa2e6);
  -webkit-background-clip: text; background-clip: text; color: transparent;
}
.ts-sheet__sub { font-size: 13.5px; color: var(--text-secondary); line-height: 1.5; }
.ts-sheet__sub b { color: #cfe2f5; }

/* Shared pulse — used by the celebration seal. */
@keyframes tsSealPulse {
  0%, 100% { box-shadow: 0 0 26px rgba(61,122,184,0.3), inset 0 0 20px rgba(61,122,184,0.12); }
  50%      { box-shadow: 0 0 44px rgba(61,122,184,0.55), inset 0 0 28px rgba(61,122,184,0.22); }
}

.ts-sheet__perks { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--sp-3); margin: 26px 0; }
/* Four perks read as a lopsided 3+1 in a 3-col grid — lay them out 2×2 instead. */
.ts-sheet__perks--4 { grid-template-columns: repeat(2, 1fr); }
.ts-pk {
  position: relative; overflow: hidden; padding: var(--sp-4); border-radius: 15px;
  background: linear-gradient(160deg, rgba(255,255,255,0.05), rgba(255,255,255,0.012));
  border: 1px solid rgba(124,192,255,0.14);
  transition: transform 0.25s var(--ease-standard), border-color 0.25s, box-shadow 0.25s;
}
.ts-pk:hover { transform: translateY(-4px); border-color: rgba(124,192,255,0.42); box-shadow: 0 14px 34px rgba(0,0,0,0.4), 0 0 26px rgba(61,122,184,0.2); }
.ts-pk__icon {
  display: inline-flex; align-items: center; justify-content: center; width: 38px; height: 38px;
  border-radius: 11px; color: #fff; margin-bottom: var(--sp-3);
  background: linear-gradient(135deg, #3d7ab8, #5aa2e6);
  box-shadow: 0 6px 16px rgba(61,122,184,0.4);
}
/* The lead perk (pre-orders) spans the full grid width so it reads as the headline benefit. */
.ts-pk--wide { grid-column: 1 / -1; }
.ts-pk__t { font-size: 14.5px; font-weight: 800; color: #fff; }
.ts-pk__d { font-size: 12.5px; color: var(--text-secondary); line-height: 1.55; margin-top: 5px; }
.ts-pk__d b { color: #cfe2f5; }

.ts-sheet__foot {
  display: flex; align-items: center; justify-content: space-between; gap: var(--sp-4); flex-wrap: wrap;
  padding-top: var(--sp-4); border-top: 1px solid rgba(255,255,255,0.08);
}
.ts-sheet__price { display: flex; align-items: baseline; gap: var(--sp-3); }
.ts-sheet__amt { font-family: var(--font-mono); font-size: 30px; font-weight: 800; color: #fff; text-shadow: 0 0 20px rgba(61,122,184,0.45); }
.ts-sheet__meta { font-size: 12.5px; color: var(--text-secondary); }
.ts-sheet__actions { display: flex; align-items: center; gap: var(--sp-3); }
.ts-btn-ghost {
  height: 48px; padding: 0 18px; border-radius: var(--radius-btn); cursor: pointer;
  background: transparent; border: 1px solid rgba(255,255,255,0.14); color: var(--text-secondary);
  font-size: 14px; font-weight: 700; transition: background var(--t), color var(--t), border-color var(--t);
}
.ts-btn-ghost:hover { background: rgba(255,255,255,0.06); color: #fff; border-color: rgba(255,255,255,0.28); }
/* Simple, confident CTA: solid accent, first-person label, arrow that nudges
   on hover, one light sweep on hover. No constant pulse/shine (reads cleaner). */
.ts-btn-pay {
  position: relative; overflow: hidden;
  display: inline-flex; align-items: center; gap: 4px; white-space: nowrap;
  height: 50px; padding: 0 16px 0 24px; border-radius: var(--radius-btn); border: none; cursor: pointer;
  color: #fff; font-size: 15px; font-weight: 800; letter-spacing: 0.01em;
  background: linear-gradient(180deg, #4888c9, #3d7ab8);
  box-shadow: 0 6px 18px rgba(61,122,184,0.42);
  transition: transform 0.18s, box-shadow 0.22s, background 0.22s;
}
.ts-btn-pay > span:not(.ts-btn-pay__shine) { position: relative; z-index: 1; }
.ts-btn-pay svg { position: relative; z-index: 1; transition: transform 0.2s var(--ease-standard); }
.ts-btn-pay:hover { transform: translateY(-1px); background: linear-gradient(180deg, #5293d6, #4180c0); box-shadow: 0 10px 26px rgba(61,122,184,0.6); }
.ts-btn-pay:hover svg { transform: translateX(3px); }
.ts-btn-pay:active { transform: translateY(0) scale(0.99); }
.ts-btn-pay__shine {
  position: absolute; top: 0; left: -60%; width: 42%; height: 100%; pointer-events: none; z-index: 0; opacity: 0;
  background: linear-gradient(100deg, transparent, rgba(255,255,255,0.4), transparent);
  transform: skewX(-18deg);
}
.ts-btn-pay:hover .ts-btn-pay__shine { animation: tsBtnShine 0.7s ease; }
@keyframes tsBtnShine { 0% { left: -60%; opacity: 1; } 100% { left: 150%; opacity: 1; } }

/* Staggered content reveal on open */
.ts-drawer .ts-sheet__head,
.ts-drawer .ts-sheet__foot { opacity: 0; transform: translateY(10px); }
.ts-drawer .ts-pk { opacity: 0; transform: translateY(14px) scale(0.97); }
.ts-drawer--in .ts-sheet__head { animation: tsRise 0.5s var(--ease-standard) 0.1s forwards; }
.ts-drawer--in .ts-pk { animation: tsRise 0.5s var(--ease-standard) forwards; }
.ts-drawer--in .ts-pk:nth-child(1) { animation-delay: 0.18s; }
.ts-drawer--in .ts-pk:nth-child(2) { animation-delay: 0.26s; }
.ts-drawer--in .ts-pk:nth-child(3) { animation-delay: 0.34s; }
.ts-drawer--in .ts-sheet__foot { animation: tsRise 0.5s var(--ease-standard) 0.4s forwards; }
@keyframes tsRise { to { opacity: 1; transform: none; } }

@media (max-width: 820px) {
  .ts-drawer { padding-top: 4vh; }
  .ts-seal { display: none; }
  .ts-sheet__perks { grid-template-columns: 1fr; }
  .ts-sheet__foot { flex-direction: column; align-items: stretch; }
  .ts-sheet__actions { justify-content: flex-end; }
}
@media (prefers-reduced-motion: reduce) {
  .ts-drawer, .ts-sheet--premium { transition: none; }
  .ts-sheet__aura, .ts-sheet__kicker-shine, .ts-btn-pay__shine { animation: none; }
  .ts-sheet--premium { transform: none; opacity: 1; }
  .ts-drawer .ts-sheet__head, .ts-drawer .ts-sheet__foot, .ts-drawer .ts-pk { opacity: 1; transform: none; }
}

/* ── Sup Dog character editor ── */
.dav-overlay {
  position: fixed; inset: 0; z-index: 9999; display: flex; align-items: center; justify-content: center;
  padding: var(--sp-4); background: rgba(0,0,0,0); backdrop-filter: blur(0);
  transition: background 0.32s, backdrop-filter 0.32s;
}
.dav-overlay--in { background: rgba(4,8,14,0.78); backdrop-filter: blur(10px); }
.dav-overlay--out { background: rgba(4,8,14,0); backdrop-filter: blur(0); }
.dav {
  width: min(760px, 100%); max-height: 92vh; overflow: auto;
  background:
    radial-gradient(120% 80% at 50% 0%, rgba(61,122,184,0.16), transparent 60%),
    linear-gradient(180deg, #141922, #0e1118);
  border: 1px solid rgba(124,192,255,0.18); border-radius: var(--radius-card);
  box-shadow: 0 30px 80px rgba(0,0,0,0.6); padding: var(--sp-6);
  transform: translateY(18px) scale(0.97); opacity: 0;
  transition: transform 0.36s cubic-bezier(0.22,1,0.36,1), opacity 0.36s;
}
.dav-overlay--in .dav { transform: none; opacity: 1; }
.dav-overlay--out .dav { transform: translateY(16px) scale(0.96); opacity: 0; transition: transform 0.3s cubic-bezier(0.55,0,0.68,0), opacity 0.3s; }
.dav__head { text-align: center; margin-bottom: var(--sp-4); }
.dav__title { font-size: 23px; font-weight: 800; color: #fff; }
.dav__sub { font-size: 13px; color: var(--text-secondary); margin-top: 4px; }
.dav__body { display: flex; gap: var(--sp-5); align-items: stretch; }
.dav__stage {
  flex: 0 0 240px; aspect-ratio: 1; position: relative; border-radius: 18px;
  background: radial-gradient(circle at 50% 38%, rgba(61,122,184,0.22), rgba(10,14,20,0.6) 70%);
  border: 1px solid rgba(124,192,255,0.16); overflow: hidden;
}
.dav__layers { position: absolute; inset: 0; }
.dav__layer { position: absolute; transform: translate(-50%,-50%); object-fit: contain; pointer-events: none; user-select: none; }
.dav__panel { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: var(--sp-3); }
.dav__tabs { display: flex; flex-wrap: wrap; gap: 6px; }
.dav__tab {
  padding: 7px 13px; border-radius: var(--radius-pill, 20px); cursor: pointer;
  font-size: 12.5px; font-weight: 700; color: var(--text-secondary);
  background: var(--bg-hover); border: 1px solid var(--border);
}
.dav__tab--on { color: #fff; background: var(--accent); border-color: var(--accent); }
.dav__opts {
  flex: 1; display: grid; grid-template-columns: repeat(auto-fill, minmax(64px, 1fr));
  gap: 8px; align-content: start; overflow: auto; max-height: 260px; padding: 2px;
}
.dav__opt {
  aspect-ratio: 1; border-radius: 12px; cursor: pointer; overflow: hidden;
  background: rgba(255,255,255,0.04); border: 1.5px solid rgba(124,192,255,0.14);
  display: grid; place-items: center; transition: border-color 0.18s, transform 0.18s;
}
.dav__opt:hover { transform: translateY(-2px); border-color: rgba(124,192,255,0.4); }
.dav__opt--on { border-color: var(--accent); box-shadow: 0 0 0 2px rgba(61,122,184,0.4); }
.dav__opt img { width: 100%; height: 100%; object-fit: contain; }
.dav__opt--none { color: var(--text-secondary); font-size: 20px; }
.dav__foot { display: flex; align-items: center; justify-content: space-between; gap: var(--sp-3); margin-top: var(--sp-5); }
.dav__foot-right { display: flex; align-items: center; gap: var(--sp-3); }
.dav__btn {
  display: inline-flex; align-items: center; gap: 6px; cursor: pointer;
  padding: 11px 18px; border-radius: var(--radius-btn); font-size: 14px; font-weight: 800;
}
.dav__btn--ghost { color: var(--text-secondary); background: transparent; border: 1px solid var(--border); }
.dav__btn--ghost:hover { color: var(--text-primary); border-color: var(--accent); }
.dav__btn--go { color: #fff; border: none; background: linear-gradient(180deg, #4888c9, #3d7ab8); box-shadow: 0 6px 18px rgba(61,122,184,0.42); }
.dav__btn--go:hover { transform: translateY(-1px); }
.dav__btn--go:disabled { opacity: 0.6; cursor: default; transform: none; }
@media (max-width: 620px) {
  .dav__body { flex-direction: column; }
  .dav__stage { flex-basis: auto; width: 200px; margin: 0 auto; }
}
@media (prefers-reduced-motion: reduce) {
  .dav-overlay, .dav { transition: none; }
  .dav { transform: none; opacity: 1; }
}

/* ── Post-purchase celebration salute ── */
.ts-fx {
  position: fixed; inset: 0; z-index: 100000; pointer-events: none;
  display: flex; align-items: center; justify-content: center;
  opacity: 0; transition: opacity 0.3s var(--ease-standard);
}
.ts-fx--in { opacity: 1; }
.ts-fx--out { opacity: 0; }
.ts-fx__burst { position: absolute; left: 50%; top: 46%; width: 0; height: 0; }
.ts-fx__bit {
  position: absolute; left: 0; top: 0; opacity: 0; will-change: transform, opacity;
  box-shadow: 0 0 6px rgba(0,0,0,0.25);
  animation: tsFxFly var(--dur) cubic-bezier(0.15, 0.65, 0.25, 1) var(--d) forwards;
}
@keyframes tsFxFly {
  0%   { opacity: 1; transform: translate(0, 0) scale(0.4) rotate(0); }
  16%  { transform: translate(calc(var(--tx) * 0.55), calc(var(--ty) * 0.55)) scale(1) rotate(calc(var(--r) * 0.4)); }
  100% { opacity: 0; transform: translate(var(--tx), calc(var(--ty) + 200px)) scale(0.9) rotate(var(--r)); }
}
.ts-fx__badge {
  position: relative; display: flex; flex-direction: column; align-items: center; gap: 3px;
  padding: 26px 44px; border-radius: 20px;
  background: radial-gradient(120% 130% at 50% 0%, rgba(61,122,184,0.32), rgba(15,29,46,0.94));
  border: 1px solid rgba(124,192,255,0.45);
  box-shadow: 0 22px 64px rgba(0,0,0,0.5), 0 0 56px rgba(61,122,184,0.5);
  animation: tsFxPop 0.6s var(--ease-spring) both;
}
@keyframes tsFxPop {
  0%   { opacity: 0; transform: scale(0.5); }
  60%  { opacity: 1; transform: scale(1.06); }
  100% { transform: scale(1); }
}
.ts-fx__ring { position: absolute; inset: -2px; border-radius: 22px; border: 2px solid rgba(124,192,255,0.6); opacity: 0; animation: tsFxRing 1.5s ease-out 0.15s; }
.ts-fx__ring--2 { animation-delay: 0.55s; }
@keyframes tsFxRing { 0% { opacity: 0.85; transform: scale(0.92); } 100% { opacity: 0; transform: scale(1.55); } }
.ts-fx__seal {
  display: inline-flex; align-items: center; justify-content: center; width: 64px; height: 64px;
  border-radius: 50%; color: #fff; margin-bottom: 8px;
  background: linear-gradient(135deg, #3d7ab8, #5aa2e6);
  box-shadow: 0 8px 24px rgba(61,122,184,0.55);
  animation: tsSealPulse 2s ease-in-out infinite;
}
.ts-fx__title { font-size: 22px; font-weight: 900; color: #fff; letter-spacing: -0.01em; }
.ts-fx__sub { font-size: 13px; color: var(--text-secondary); }
.ts-fx__badge { pointer-events: auto; }   /* so the Telegram CTA is tappable */
.ts-fx__cta {
  margin-top: 14px; display: inline-flex; align-items: center; gap: 7px;
  padding: 9px 16px; border-radius: var(--radius-pill, 30px);
  font-size: 13px; font-weight: 700; color: #fff; text-decoration: none;
  background: var(--grad-hero, linear-gradient(160deg, #2f86d6, #255f9c));
  box-shadow: 0 8px 22px rgba(61,122,184,0.45);
  transition: transform var(--t), box-shadow var(--t);
}
.ts-fx__cta:hover { transform: translateY(-2px); box-shadow: 0 12px 28px rgba(61,122,184,0.6); }
.ts-fx__cta--static { cursor: default; }
.ts-fx__cta--static:hover { transform: none; box-shadow: 0 8px 22px rgba(61,122,184,0.45); }
@media (prefers-reduced-motion: reduce) {
  .ts-fx__bit { display: none; }
  .ts-fx__badge, .ts-fx__seal, .ts-fx__ring { animation: none; }
}

/* ── Wallet: held funds ── */
.app-hero__held { font-size: 12px; color: #e9c270; margin-top: 4px; }
.wallet-holds { display: flex; flex-direction: column; gap: var(--sp-2); margin-bottom: var(--sp-5); }
.wallet-hold-row {
  display: flex; align-items: center; justify-content: space-between; gap: var(--sp-3);
  padding: var(--sp-3) var(--sp-4); border: 1px solid var(--border-primary);
  border-radius: var(--radius-btn); background: var(--bg-input);
}
.wallet-hold-row__amt { font-weight: 700; font-variant-numeric: tabular-nums; }
.wallet-hold-row__note { font-size: 12px; color: var(--text-secondary); text-align: right; }

/* ── Stock Requests screen ── */
.rq-page { width: 100%; max-width: 1280px; margin: 0 auto; display: flex; flex-direction: column; gap: var(--sp-5); }
.rq-layout { display: grid; grid-template-columns: 320px 1fr; gap: var(--sp-8); align-items: start; }
@media (max-width: 820px) { .rq-layout { grid-template-columns: 1fr; gap: var(--sp-4); } }

/* Left rail: deal tabs */
.rq-tabs { display: flex; flex-direction: column; gap: var(--sp-4); }
@media (max-width: 820px) { .rq-tabs { flex-direction: row; overflow-x: auto; padding-bottom: var(--sp-2); } }
.rq-tab {
  display: flex; align-items: center; gap: var(--sp-3); text-align: left;
  padding: var(--sp-4); border: 1px solid var(--border-primary); border-radius: var(--radius-card);
  background: var(--bg-primary); cursor: pointer; min-width: 240px;
  transition: border-color var(--t), background var(--t), box-shadow var(--t);
}
.rq-tab:hover { border-color: var(--border-strong, var(--accent)); }
.rq-tab--active { border-color: var(--accent); background: var(--accent-muted); box-shadow: var(--shadow-card); }
.rq-tab__avatar {
  width: 38px; height: 38px; border-radius: 50%; flex-shrink: 0;
  display: inline-flex; align-items: center; justify-content: center;
  background: var(--accent-muted); color: var(--accent); font-size: 12px; font-weight: 700;
}
.rq-tab__body { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 6px; }
.rq-tab__title { display: block; max-width: 100%; font-size: 13px; font-weight: 700; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.rq-tab__metarow { display: flex; align-items: center; gap: var(--sp-2); flex-wrap: wrap; }
.rq-tab__meta { font-size: 11px; color: var(--text-secondary); white-space: nowrap; }
.rq-tab__badge {
  flex-shrink: 0; font-size: 9px; font-weight: 800; text-transform: uppercase; letter-spacing: 0.03em;
  padding: 3px 8px; border-radius: var(--radius-pill, 20px); line-height: 1.4; white-space: nowrap;
}

/* Right: stacked panels */
.rq-detail { display: flex; flex-direction: column; gap: var(--sp-5); min-width: 0; }
.rq-panel {
  background: var(--bg-primary); border: 1px solid var(--border-primary);
  border-radius: var(--radius-card); padding: var(--sp-5); box-shadow: var(--shadow-card);
}
.rq-panel__head { display: flex; align-items: center; justify-content: space-between; gap: var(--sp-3); margin-bottom: var(--sp-3); }
.rq-panel__title { display: flex; align-items: center; gap: 7px; font-size: 13px; font-weight: 700; color: var(--text-secondary); text-transform: uppercase; letter-spacing: 0.04em; }
.rq-panel__title svg { color: var(--accent); }

/* Header panel */
.rq-head-panel__top { display: flex; justify-content: space-between; gap: var(--sp-3); align-items: flex-start; }
.rq-head-panel__id { display: flex; gap: var(--sp-3); align-items: center; min-width: 0; }
.rq-head-panel__avatar {
  width: 44px; height: 44px; border-radius: 12px; flex-shrink: 0;
  display: inline-flex; align-items: center; justify-content: center;
  background: var(--accent-muted); color: var(--accent); font-size: 14px; font-weight: 800;
}
.rq-deal-title { font-size: 17px; font-weight: 800; }
.rq-deal-geo { font-size: 12px; color: var(--text-secondary); margin-top: 2px; }
.rq-head-panel__aside { text-align: right; flex-shrink: 0; }
.rq-deal-price { font-size: 20px; font-weight: 800; margin-top: 6px; }
.rq-parties { display: flex; gap: var(--sp-4); flex-wrap: wrap; margin-top: var(--sp-3); padding-top: var(--sp-3); border-top: 1px solid var(--border-secondary); }
.rq-party { display: inline-flex; align-items: center; gap: 6px; font-size: 12.5px; color: var(--text-primary); }
.rq-party svg { color: var(--text-tertiary); }
.rq-party i { color: var(--text-tertiary); font-style: normal; font-size: 11px; }

.rq-badge { display: inline-block; padding: 4px 11px; border-radius: var(--radius-pill, 20px); font-size: 11px; font-weight: 700; }
.rq-badge--warn   { background: rgba(217,154,43,0.15); color: #d99a2b; }
.rq-badge--accent { background: var(--accent-muted); color: var(--accent); }
.rq-badge--ok     { background: rgba(79,174,78,0.15); color: var(--success); }
.rq-badge--danger { background: rgba(224,96,85,0.15); color: var(--danger); }

/* Progress stepper */
.rq-steps { display: flex; align-items: flex-start; gap: 0; padding: var(--sp-4) var(--sp-3); background: var(--bg-primary); border: 1px solid var(--border-primary); border-radius: var(--radius-card); box-shadow: var(--shadow-card); }
.rq-step { display: flex; flex-direction: column; align-items: center; text-align: center; gap: 5px; flex: 0 0 auto; width: 96px; }
.rq-step__dot {
  width: 32px; height: 32px; border-radius: 50%; display: inline-flex; align-items: center; justify-content: center;
  font-size: 13px; font-weight: 800; border: 2px solid var(--border-primary);
  background: var(--bg-input); color: var(--text-tertiary); transition: all var(--t);
}
.rq-step__label { font-size: 12px; font-weight: 700; color: var(--text-secondary); }
.rq-step__sub { font-size: 10px; color: var(--text-tertiary); }
.rq-step__line { flex: 1; height: 2px; background: var(--border-primary); margin-top: 16px; min-width: 16px; border-radius: 2px; }
.rq-step__line--done { background: var(--success); }
.rq-step--done .rq-step__dot { background: var(--success); border-color: var(--success); color: #fff; }
.rq-step--done .rq-step__label { color: var(--text-primary); }
.rq-step--active .rq-step__dot { background: var(--accent-muted); border-color: var(--accent); color: var(--accent); }
.rq-step--active .rq-step__label { color: var(--accent); }
.rq-step--cancelled .rq-step__dot { background: rgba(224,96,85,0.15); border-color: var(--danger); color: var(--danger); }
.rq-step--cancelled .rq-step__label { color: var(--danger); }

/* Delivered data: detected chips + raw */
.rq-copy { display: inline-flex; align-items: center; gap: 5px; background: transparent; border: 1px solid var(--border-primary); border-radius: var(--radius-btn); padding: 5px 10px; font-size: 12px; color: var(--accent); cursor: pointer; transition: background var(--t), border-color var(--t); }
.rq-copy:hover { background: var(--accent-muted); border-color: var(--accent); }
.rq-chips { display: flex; flex-wrap: wrap; gap: 6px; }
.rq-chip { display: inline-flex; align-items: center; gap: 5px; font-size: 11px; font-weight: 600; padding: 4px 9px; border-radius: var(--radius-pill, 20px); }
.rq-chip--on { background: rgba(79,174,78,0.12); color: var(--success); }
.rq-chip--on b { color: var(--text-primary); font-weight: 700; max-width: 160px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.rq-chip--on svg { flex-shrink: 0; }
.rq-chip--off { background: var(--bg-input); color: var(--text-tertiary); border: 1px dashed var(--border-primary); }
.rq-raw { font-family: var(--font-mono, monospace); font-size: 12.5px; white-space: pre-wrap; word-break: break-all; margin: var(--sp-3) 0 0; padding: var(--sp-3); background: var(--bg-input); border-radius: var(--radius-btn); color: var(--text-secondary); }

/* Activity feed (read-only timeline) */
.rq-feed { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: var(--sp-3); }
.rq-event { display: flex; gap: var(--sp-3); }
.rq-event__icon { width: 26px; height: 26px; flex-shrink: 0; border-radius: 50%; display: inline-flex; align-items: center; justify-content: center; background: var(--bg-input); color: var(--text-tertiary); }
.rq-event--seller .rq-event__icon { background: rgba(217,154,43,0.14); color: #d99a2b; }
.rq-event--buyer .rq-event__icon { background: var(--accent-muted); color: var(--accent); }
.rq-event__body { flex: 1; min-width: 0; }
.rq-event__head { display: flex; align-items: baseline; gap: var(--sp-2); }
.rq-event__who { font-size: 12px; font-weight: 700; }
.rq-event__time { font-size: 10px; color: var(--text-tertiary); }
.rq-event__text { font-size: 13px; line-height: 1.45; color: var(--text-secondary); margin-top: 1px; }

/* Action bar */
.rq-actionbar { display: flex; gap: var(--sp-3); flex-wrap: wrap; align-items: center; }
.rq-actionbar .btn-primary { display: inline-flex; align-items: center; gap: 7px; }
.rq-btn-ghost { background: transparent; border: 1px solid var(--border-primary); border-radius: var(--radius-btn); padding: 0 var(--sp-4); height: 40px; font-size: 14px; font-weight: 700; color: var(--text-secondary); cursor: pointer; transition: background var(--t), border-color var(--t), color var(--t); }
.rq-btn-ghost--danger:hover { background: rgba(224,96,85,0.10); border-color: var(--danger); color: var(--danger); }
.rq-btn-ghost--admin { color: var(--text-secondary); }
.rq-btn-ghost--admin:hover { background: rgba(120,120,220,0.10); border-color: #7878dc; color: #9090e0; }
.rq-wait { display: inline-flex; align-items: center; gap: 7px; font-size: 13px; color: var(--text-secondary); }
.rq-wait svg { color: #d99a2b; }
.rq-wait--sent { color: #4caf50; }

/* Seller deliver modal: live detection */
.rq-detect { margin-top: var(--sp-3); }
.rq-detect__label { font-size: 11px; text-transform: uppercase; letter-spacing: 0.04em; color: var(--text-secondary); margin-bottom: var(--sp-2); }

/* ── PRE-ORDERS (buyer request board) ── */
.po-page { padding-bottom: var(--sp-6); }
.po-section { margin-top: var(--sp-5); }
.po-section__head { display: flex; align-items: center; justify-content: space-between; gap: var(--sp-3); margin-bottom: var(--sp-3); }
.po-section__head .section-title { margin: 0; }
.po-list { display: flex; flex-direction: column; gap: var(--sp-3); }

.po-card {
  background: var(--bg-surface);
  border: 1px solid var(--border-primary);
  border-radius: var(--radius-card);
  padding: var(--sp-4);
  display: flex; flex-direction: column; gap: var(--sp-2);
}
.po-card__top { display: flex; align-items: center; justify-content: space-between; gap: var(--sp-3); }
.po-card__spec { font-weight: 600; font-size: 15px; color: var(--text-primary); }
.po-card__budget { font-size: 13px; color: var(--text-secondary); }
.po-card__budget strong { color: var(--text-primary); }
.po-card__meta { color: var(--text-muted); margin-left: 8px; }
.po-card__note { font-size: 13px; color: var(--text-secondary); background: var(--bg-input); border-radius: var(--radius-btn); padding: 8px 10px; }
.po-card__status { font-size: 12px; color: var(--text-muted); font-style: italic; }
.po-card__deliver { font-size: 13px; color: var(--text-secondary); padding: 8px 10px; background: var(--bg-input); border-radius: var(--radius-btn); }
.po-card__deliver strong { color: var(--accent); }
.po-card__deliver--ok { color: var(--success); }
.po-card__data { margin-top: 2px; }
.po-card__actions { display: flex; justify-content: flex-end; gap: var(--sp-2); margin-top: 2px; }

.po-badge { padding: 2px 9px; border-radius: 999px; font-size: 11px; font-weight: 700; letter-spacing: 0.02em; }
.po-badge--warn   { background: var(--bg-input); color: var(--text-secondary); }
.po-badge--accent { background: var(--accent-muted); color: var(--accent); }
.po-badge--ok     { background: rgba(79, 174, 78, 0.15); color: var(--success); }
.po-badge--danger { background: rgba(224, 96, 85, 0.15); color: var(--danger); }

.po-locked {
  text-align: center; padding: var(--sp-6) var(--sp-4);
  background: var(--bg-surface); border: 1px dashed var(--border-primary);
  border-radius: var(--radius-card);
  display: flex; flex-direction: column; align-items: center; gap: var(--sp-2);
}
.po-locked__icon { color: var(--accent); opacity: 0.8; }
.po-locked__title { font-size: 15px; margin: 0; }
.po-locked__text { font-size: 13px; color: var(--text-secondary); max-width: 320px; margin: 0 0 var(--sp-2); }

.po-form { display: flex; flex-direction: column; gap: var(--sp-3); }
.po-form__row { display: flex; flex-direction: column; gap: 5px; font-size: 12px; color: var(--text-secondary); }
.po-form__row span { font-weight: 500; }
.po-form__row textarea { resize: vertical; font-family: inherit; }

/* ── Profile: editable nickname + avatar chooser + simplified register ── */
.profile-hero__name-row { display: flex; align-items: center; gap: 8px; min-width: 0; }
.profile-hero__name-row .profile-hero__name { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.profile-hero__edit-name {
  flex: none; width: 22px; height: 22px; display: inline-flex; align-items: center; justify-content: center;
  border-radius: 6px; background: var(--bg-input); color: var(--text-secondary); cursor: pointer;
  border: 1px solid var(--border-primary); transition: color var(--t), border-color var(--t), background var(--t);
}
.profile-hero__edit-name:hover { color: var(--accent); border-color: var(--accent); }
.profile-hero__edit-name svg { width: 12px; height: 12px; }

.av-opt { display: flex; flex-direction: column; align-items: center; gap: var(--sp-3); }
.av-opt__preview { width: 88px; height: 88px; border: 2px solid rgba(124,192,255,0.30); box-shadow: 0 6px 18px rgba(0,0,0,0.4); }
.av-opt__label { align-self: flex-start; font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.6px; color: var(--text-secondary); }
.av-opt__hue {
  width: 100%; height: 10px; border-radius: 999px; appearance: none; -webkit-appearance: none; cursor: pointer;
  background: linear-gradient(90deg, #ff5a5a, #ffd000, #5aff7a, #00e5ff, #5a7aff, #ff5ad9, #ff5a5a);
}
.av-opt__hue::-webkit-slider-thumb { -webkit-appearance: none; width: 20px; height: 20px; border-radius: 50%; background: #fff; border: 2px solid var(--accent); box-shadow: 0 2px 6px rgba(0,0,0,0.4); cursor: pointer; }
.av-opt__hue::-moz-range-thumb { width: 18px; height: 18px; border-radius: 50%; background: #fff; border: 2px solid var(--accent); cursor: pointer; }
.av-opt__note { font-size: 12px; color: var(--text-secondary); text-align: center; margin: 0; }

/* Background-color picker (recolor) */
.av-swatches { display: flex; flex-wrap: wrap; gap: 8px; width: 100%; }
.av-swatch {
  width: 30px; height: 30px; border-radius: 50%; cursor: pointer;
  border: 2px solid rgba(255,255,255,0.15); padding: 0;
  transition: transform var(--t), border-color var(--t), box-shadow var(--t);
}
.av-swatch:hover { transform: scale(1.08); }
.av-swatch--on { border-color: #fff; box-shadow: 0 0 0 2px var(--accent); }
.av-opt__custom {
  display: flex; align-items: center; justify-content: space-between; gap: 10px;
  width: 100%; font-size: 12px; font-weight: 600; color: var(--text-secondary);
}
.av-opt__custom input[type="color"] {
  width: 44px; height: 28px; padding: 0; border: 1px solid var(--border-primary);
  border-radius: 8px; background: none; cursor: pointer;
}

/* Mocking banned login message */
.form-error--banned { font-size: 14px; color: var(--danger); text-align: center; }

/* Admin panel: one-click ban / unban toggle, inline in the user row */
.ap-ban-toggle {
  flex: none; width: 34px; height: 34px; display: inline-flex; align-items: center; justify-content: center;
  border-radius: 9px; cursor: pointer;
  color: var(--danger); background: rgba(229,72,77,0.10); border: 1px solid rgba(229,72,77,0.40);
  transition: background var(--t), color var(--t), border-color var(--t), transform var(--t);
}
.ap-ban-toggle:hover { background: rgba(229,72,77,0.22); transform: translateY(-1px); }
.ap-ban-toggle:active { transform: translateY(0); }
/* When already banned, the control reads as a calm "restore" affordance */
.ap-ban-toggle--undo {
  color: var(--text-secondary); background: var(--bg-input); border-color: var(--border-primary);
}
.ap-ban-toggle--undo:hover { color: var(--text-primary); border-color: var(--accent); background: var(--bg-hover); }
/* Delete-user sits next to ban — solid danger on hover so it reads as destructive */
.ap-ban-toggle--delete { color: var(--danger); }
.ap-ban-toggle--delete:hover { background: var(--danger); color: #fff; border-color: var(--danger); }

/* Rename-user pencil, same footprint as the ban toggle but neutral accent */
.ap-name-edit {
  flex: none; width: 34px; height: 34px; display: inline-flex; align-items: center; justify-content: center;
  border-radius: 9px; cursor: pointer;
  color: var(--text-secondary); background: var(--bg-input); border: 1px solid var(--border-primary);
  transition: background var(--t), color var(--t), border-color var(--t), transform var(--t);
}
.ap-name-edit:hover { color: var(--accent); border-color: var(--accent); background: var(--accent-muted); transform: translateY(-1px); }
.ap-name-edit:active { transform: translateY(0); }

/* "Create user" button in the Users section header */
.ap-section-head { display: flex; align-items: center; gap: var(--sp-2); }
.ap-create-user {
  margin-left: auto; padding: 5px 12px;
  border-radius: var(--radius-btn); border: 1px solid var(--border-primary);
  background: var(--bg-input); color: var(--accent);
  font-size: 12px; font-weight: 700; cursor: pointer;
  transition: border-color var(--t), background var(--t), transform var(--t);
}
.ap-create-user:hover { border-color: var(--accent); background: var(--accent-muted); }
.ap-create-user:active { transform: scale(0.96); }

/* Generated access key block in the create-user result modal */
.ap-key-result {
  padding: 12px 14px; border-radius: var(--radius-btn);
  background: var(--bg-input); border: 1px solid var(--border-primary);
  font-size: 15px; font-weight: 700; letter-spacing: 0.5px;
  color: var(--accent); text-align: center; user-select: all;
}

.register-note { color: var(--text-secondary); font-size: 13.5px; line-height: 1.55; margin: 0 0 var(--sp-4); }
.register-note b { color: var(--text-primary); }

/* Register "what you get" list — mirrors the login field block's visual weight */
.register-perks { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: var(--sp-3); }
.register-perk {
  display: flex; align-items: flex-start; gap: 12px;
  background: var(--bg-input); border: 1px solid var(--border-primary);
  border-radius: var(--radius-btn); padding: 13px 14px;
}
.register-perk__icon {
  flex: none; width: 36px; height: 36px; border-radius: 10px;
  display: flex; align-items: center; justify-content: center; font-size: 17px;
  background: var(--accent-muted); color: var(--accent);
}
.register-perk__icon svg { width: 20px; height: 20px; }
.register-perk__text { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.register-perk__text b { font-size: 13.5px; color: var(--text-primary); font-weight: 700; }
.register-perk__text span { font-size: 12px; color: var(--text-secondary); line-height: 1.45; }
.register-codename { text-align: center; font-size: 15px; color: var(--text-secondary); margin: 0 0 var(--sp-3); }
.register-codename b { color: var(--accent); font-weight: 700; }

/* Referral invite chip — register form & key-result screen */
.register-ref {
  margin-top: var(--sp-3);
  padding: 10px 14px;
  border-radius: var(--radius-btn);
  border: 1px dashed rgba(212, 175, 55, 0.45);
  background: rgba(212, 175, 55, 0.07);
  color: var(--warning, #d4af37);
  font-size: 12.5px; line-height: 1.45; text-align: center;
}
.register-ref--win { border-style: solid; }

/* Admin referral rows */
.ap-ref__slug { color: var(--accent); font-weight: 700; }
.ap-ref__url {
  cursor: copy; color: var(--accent); opacity: .85;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.ap-ref__url:hover { opacity: 1; text-decoration: underline; }

/* Referral link create/edit form — all params in one modal */
.ref-form { display: flex; flex-direction: column; gap: var(--sp-4); }
.ref-form__label {
  display: block;
  font-size: 11px; font-weight: 700; letter-spacing: .6px;
  text-transform: uppercase; color: var(--text-secondary);
}
.ref-form__label .modal-prompt-input {
  margin-top: 7px; width: 100%; box-sizing: border-box;
  text-transform: none; letter-spacing: normal;
}
.ref-form__hint {
  font-weight: 500; text-transform: none; letter-spacing: 0;
  color: var(--text-tertiary);
}
.ref-form__row { display: grid; grid-template-columns: 1fr 1fr; gap: var(--sp-3); }
.ref-form__static {
  margin-top: 7px; padding: 10px 12px;
  border: 1px dashed var(--border-primary); border-radius: var(--radius-btn);
  font-size: 14px;
}
.ref-form__note {
  margin: 0;
  padding: 10px 14px;
  border: 1px solid var(--border-primary);
  border-left: 3px solid var(--accent);
  border-radius: var(--radius-btn);
  background: var(--accent-muted);
  color: var(--text-secondary);
  font-size: 12px; line-height: 1.5;
}
@media (max-width: 480px) { .ref-form__row { grid-template-columns: 1fr; } }

/* ──────────────────────────────────────
   SELLER DASHBOARD — Search, Pagination, Order Statuses
   ────────────────────────────────────── */

/* Search input in section headers */
.sd-search-wrap {
  position: relative; display: inline-flex; align-items: center; flex: 1; max-width: 280px;
}
.sd-search {
  width: 100%; height: 36px; padding: 0 var(--sp-3) 0 36px;
  background: var(--bg-input); border: 1px solid var(--border);
  border-radius: var(--radius-pill); color: var(--fg); font: inherit; font-size: 13px;
  transition: border-color var(--t), box-shadow var(--t);
}
.sd-search::placeholder { color: var(--text-tertiary); }
.sd-search:focus {
  outline: none; border-color: var(--accent);
  box-shadow: 0 0 0 3px rgba(61, 122, 184, 0.13);
}
.sd-search-wrap::before {
  content: ''; position: absolute; left: 12px; top: 50%; transform: translateY(-50%);
  width: 14px; height: 14px;
  background: var(--text-tertiary);
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='currentColor' stroke-width='2.5' stroke-linecap='round'%3E%3Ccircle cx='11' cy='11' r='8'/%3E%3Cline x1='21' y1='21' x2='16.65' y2='16.65'/%3E%3C/svg%3E") center/contain no-repeat;
  mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='currentColor' stroke-width='2.5' stroke-linecap='round'%3E%3Ccircle cx='11' cy='11' r='8'/%3E%3Cline x1='21' y1='21' x2='16.65' y2='16.65'/%3E%3C/svg%3E") center/contain no-repeat;
  pointer-events: none;
}

/* Pagination bar */
.sd-pagination {
  display: flex; align-items: center; justify-content: center; gap: var(--sp-2);
  padding: var(--sp-3) var(--sp-4); margin-top: var(--sp-2);
}
.sd-pagination__btn {
  min-width: 34px; height: 34px; padding: 0 var(--sp-3);
  border-radius: var(--radius-btn); cursor: pointer;
  display: inline-flex; align-items: center; justify-content: center;
  background: var(--bg-input); border: 1px solid var(--border);
  color: var(--text-secondary); font: inherit; font-size: 13px; font-weight: 600;
  transition: background var(--t), border-color var(--t), color var(--t), transform var(--t);
}
.sd-pagination__btn:hover:not(:disabled) { background: var(--bg-hover); border-color: var(--accent); color: var(--accent); }
.sd-pagination__btn:active:not(:disabled) { transform: scale(0.95); }
.sd-pagination__btn:disabled { opacity: 0.35; cursor: default; }
.sd-pagination__btn--active { background: var(--accent); border-color: var(--accent); color: #fff; }
.sd-pagination__btn--active:hover { background: var(--accent-hover); }
.sd-pagination__info {
  font-size: 12px; color: var(--text-tertiary); font-variant-numeric: tabular-nums;
  padding: 0 var(--sp-2);
}

/* Section header row (search + toggle + count side-by-side) */
.dash-section__head--row {
  display: flex; align-items: center; gap: var(--sp-3); flex-wrap: wrap;
  margin-bottom: var(--sp-3);
}
.dash-section__head--row .dash-section__title { margin-bottom: 0; flex-shrink: 0; }
.dash-section__head--row .sd-search-wrap { order: 2; }
.dash-section__head--row .view-toggle { order: 3; }

/* Orders section header with filter */
.sd-orders-head {
  display: flex; align-items: center; gap: var(--sp-3); flex-wrap: wrap;
  margin-bottom: var(--sp-3);
}
.sd-orders-head .dash-section__title { flex: 1; min-width: 0; margin-bottom: 0; }
.sd-orders-filter {
  height: 34px; padding: 0 var(--sp-4) 0 var(--sp-3);
  background: var(--bg-input); border: 1px solid var(--border);
  border-radius: var(--radius-pill); color: var(--fg); font: inherit; font-size: 12px; font-weight: 600;
  cursor: pointer; transition: border-color var(--t);
  -webkit-appearance: none; appearance: none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='6'%3E%3Cpath d='M1 1l4 4 4-4' fill='none' stroke='%239ca3af' stroke-width='1.5' stroke-linecap='round'/%3E%3C/svg%3E");
  background-repeat: no-repeat; background-position: right 10px center;
  padding-right: 30px;
}
.sd-orders-filter:focus { outline: none; border-color: var(--accent); }

/* Order status badges */
.sd-order-status {
  display: inline-flex; align-items: center; gap: 4px;
  font-size: 10px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.5px;
  padding: 3px 10px; border-radius: var(--radius-pill); white-space: nowrap;
  line-height: 1.3;
}
.sd-order-status--on-sale {
  color: #22c55e; background: rgba(34, 197, 94, 0.13);
}
.sd-order-status--on-request {
  color: #d99a2b; background: rgba(217, 154, 43, 0.13);
}
.sd-order-status--requested {
  color: var(--accent); background: var(--accent-muted);
}
.sd-order-status--sold {
  color: #10b981; background: rgba(16, 185, 129, 0.15);
}
.sd-order-status--refunded {
  color: var(--danger); background: rgba(224, 96, 85, 0.13);
}
.sd-order-status--alive {
  color: #f97316; background: rgba(249, 115, 22, 0.13);
}

/* Order mode tag */
.sd-order-mode {
  font-size: 10px; font-weight: 600; text-transform: uppercase; letter-spacing: 0.3px;
  color: var(--text-tertiary); padding: 2px 7px;
  background: var(--bg-input); border-radius: var(--radius-pill);
}
.sd-order-mode--request { color: #d99a2b; background: rgba(217, 154, 43, 0.1); }
.sd-order-mode--cb { color: var(--accent); background: var(--accent-muted); }
.sd-orders-list__earned { color: #4fae4e; font-weight: 700; }

/* Enhanced order rows with status */
.dash-row--orders {
  grid-template-columns: 1.2fr 2fr 1fr 0.8fr 1.2fr 0.8fr;
  align-items: center;
}

/* ── Orders time-range pill tabs ── */
.sd-orders-ranges {
  display: inline-flex; gap: 3px; padding: 3px;
  background: var(--bg-input); border-radius: var(--radius-pill);
  flex-shrink: 0;
}
.sd-orders-range {
  border: none; background: none; cursor: pointer; font: inherit;
  font-size: 11px; font-weight: 600; color: var(--text-secondary);
  padding: 5px 12px; border-radius: var(--radius-pill);
  transition: background var(--t), color var(--t);
  white-space: nowrap;
}
.sd-orders-range:hover { background: var(--bg-hover); color: var(--text-primary); }
.sd-orders-range--active { background: var(--accent); color: #fff; }
.sd-orders-range--active:hover { background: var(--accent-hover); color: #fff; }

/* ── Redesigned orders list ── */
.sd-orders-list {
  background: var(--bg-primary); border: 1px solid var(--border-primary);
  border-radius: var(--radius-card); overflow: hidden;
}
.sd-orders-list__head {
  display: grid;
  grid-template-columns: 1.4fr 2.2fr 1fr 0.8fr 0.8fr 1.2fr 0.8fr;
  padding: 10px 18px;
  font-size: 10px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.8px;
  color: var(--text-tertiary);
  background: linear-gradient(180deg, rgba(61,122,184,0.06) 0%, transparent 100%);
  border-bottom: 1px solid var(--border-primary);
}
.sd-orders-list__row {
  display: grid;
  grid-template-columns: 1.4fr 2.2fr 1fr 0.8fr 0.8fr 1.2fr 0.8fr;
  padding: 12px 18px;
  align-items: center;
  font-size: 13px;
  border-bottom: 1px solid rgba(255,255,255,0.03);
  transition: background var(--t);
}
.sd-orders-list__row:last-child { border-bottom: none; }
.sd-orders-list__row:hover { background: var(--bg-hover); }
.sd-orders-list__row:nth-child(even) { background: rgba(255,255,255,0.015); }
.sd-orders-list__row:nth-child(even):hover { background: var(--bg-hover); }

.sd-orders-list__date { display: flex; flex-direction: column; gap: 1px; }
.sd-orders-list__date-main { font-size: 12px; color: var(--text-secondary); font-variant-numeric: tabular-nums; }
.sd-orders-list__date-ago { font-size: 10px; color: var(--text-tertiary); }
.sd-orders-list__product { font-weight: 600; color: var(--fg); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.sd-orders-list__buyer { color: var(--text-secondary); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.sd-orders-list__amount { font-weight: 700; color: var(--accent); font-variant-numeric: tabular-nums; font-family: var(--font-mono); font-size: 12px; }

/* ── Add product chooser modal ── */
.sd-add-chooser {
  display: grid; grid-template-columns: 1fr 1fr; gap: var(--sp-4);
  padding: var(--sp-2) 0;
}
.sd-add-option {
  display: flex; flex-direction: column; align-items: center; gap: var(--sp-3);
  background: var(--bg-primary); border: 1px solid var(--border-primary);
  border-radius: var(--radius-card); padding: var(--sp-6) var(--sp-5);
  cursor: pointer; text-align: center; font: inherit;
  color: var(--fg);
  transition: transform var(--t), border-color var(--t), box-shadow var(--t), background var(--t);
}
.sd-add-option:hover {
  transform: translateY(-4px);
  border-color: var(--accent);
  box-shadow: 0 12px 32px rgba(0,0,0,0.35), 0 0 0 1px var(--accent);
  background: rgba(61, 122, 184, 0.04);
}
.sd-add-option:active { transform: translateY(-1px); }
.sd-add-option__icon {
  width: 64px; height: 64px; border-radius: 16px;
  display: inline-flex; align-items: center; justify-content: center;
  background: var(--accent-muted); color: var(--accent);
  transition: background var(--t), transform var(--t);
}
.sd-add-option__icon svg { width: 28px; height: 28px; }
.sd-add-option:hover .sd-add-option__icon {
  background: var(--accent); color: #fff;
  transform: scale(1.08);
}
.sd-add-option__title { font-size: 17px; font-weight: 700; }
.sd-add-option__sub { font-size: 12px; color: var(--text-secondary); line-height: 1.5; max-width: 200px; }

/* ── Statistics modal extras ── */
.sd-stats-modal .dash-ranges { margin-bottom: var(--sp-4); }
.sd-stats-modal .sd-stats { margin-bottom: var(--sp-4); }
.sd-stats-modal .sd-chart-card { margin-bottom: var(--sp-4); }
.sd-stats-modal .sd-cols { margin-bottom: var(--sp-4); }

.sd-stats-section {
  background: var(--bg-primary); border: 1px solid var(--border-primary);
  border-radius: var(--radius-card); padding: var(--sp-4) var(--sp-5);
  margin-bottom: var(--sp-4);
}
.sd-stats-section:last-child { margin-bottom: 0; }

.sd-status-grid {
  display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--sp-2);
  margin-top: var(--sp-3);
}
.sd-status-card {
  display: flex; align-items: center; justify-content: space-between;
  padding: 10px 14px; border-radius: var(--radius-btn);
  background: var(--bg-input); border: 1px solid var(--border);
  transition: border-color var(--t);
}
.sd-status-card:hover { border-color: rgba(61,122,184,0.3); }
.sd-status-count {
  font-size: 20px; font-weight: 700; font-variant-numeric: tabular-nums;
  color: var(--fg); font-family: var(--font-mono);
}

.sd-refund-grid {
  display: grid; grid-template-columns: 1fr 1fr; gap: var(--sp-3);
  margin-top: var(--sp-3);
}
.sd-refund-card {
  display: flex; flex-direction: column; align-items: center; gap: 4px;
  padding: var(--sp-4); border-radius: var(--radius-card);
  background: var(--bg-input); border: 1px solid var(--border);
  text-align: center;
  transition: border-color var(--t);
}
.sd-refund-card:hover { border-color: rgba(61,122,184,0.3); }
.sd-refund-val {
  font-size: 32px; font-weight: 800; font-variant-numeric: tabular-nums;
  font-family: var(--font-mono); line-height: 1;
}
.sd-refund-val--good { color: var(--success); }
.sd-refund-val--warn { color: var(--danger); }
.sd-refund-label { font-size: 12px; font-weight: 700; color: var(--fg); text-transform: uppercase; letter-spacing: 0.5px; }
.sd-refund-sub { font-size: 11px; color: var(--text-tertiary); }

/* ── Responsive ── */
@media (max-width: 768px) {
  .sd-orders-ranges { flex-wrap: wrap; }
  .sd-status-grid { grid-template-columns: repeat(2, 1fr); }
  .sd-refund-grid { grid-template-columns: 1fr; }
  .sd-add-chooser { grid-template-columns: 1fr; }
}

@media (max-width: 640px) {
  .sd-search-wrap { max-width: 100%; flex-basis: 100%; order: 10; }
  .dash-section__head--row { gap: var(--sp-2); }
  .sd-orders-head { flex-direction: column; align-items: flex-start; gap: var(--sp-2); }
  .sd-orders-filter { width: 100%; }
  .sd-orders-ranges { width: 100%; }
  .sd-orders-list__head { grid-template-columns: 1fr 1fr auto; }
  .sd-orders-list__row { grid-template-columns: 1fr 1fr auto; }
  .sd-orders-list__head > :nth-child(3),
  .sd-orders-list__head > :nth-child(4),
  .sd-orders-list__head > :nth-child(5),
  .sd-orders-list__head > :nth-child(7),
  .sd-orders-list__row > :nth-child(3),
  .sd-orders-list__row > :nth-child(4),
  .sd-orders-list__row > :nth-child(5),
  .sd-orders-list__row > :nth-child(7) { display: none; }
  .sd-status-grid { grid-template-columns: 1fr 1fr; }
}

/* ============================================================
   IMPORT VIEW — full-page inline bulk import (seller dashboard)
   ============================================================ */

/* ── Import View ── */
.import-view { padding: var(--sp-4) var(--sp-5); }
@media (max-width: 1200px) {
  .import-view__grid { grid-template-columns: 1fr; }
  .import-view__sidebar { flex-direction: row; flex-wrap: wrap; }
  .import-view__sidebar > * { flex: 1 1 220px; }
}
.import-view__grid {
  display: grid;
  grid-template-columns: 1fr 256px;
  gap: var(--sp-4);
  align-items: start;
}

/* Main panel */
.import-view__panel {
  background: var(--bg-secondary);
  border: 1px solid var(--border-primary);
  border-radius: var(--radius-card);
  padding: var(--sp-5);
}
.import-view__header {
  display: flex;
  align-items: flex-start;
  gap: var(--sp-4);
  margin-bottom: var(--sp-4);
  padding-bottom: var(--sp-4);
  border-bottom: 1px solid var(--border-primary);
}
.import-view__icon {
  width: 48px; height: 48px; flex-shrink: 0;
  display: flex; align-items: center; justify-content: center;
  background: linear-gradient(135deg, rgba(59,130,246,0.18), rgba(99,102,241,0.12));
  border: 1px solid rgba(59,130,246,0.25);
  border-radius: 12px;
  color: var(--accent);
  box-shadow: 0 0 14px rgba(59,130,246,0.12);
}
.import-view__icon svg { width: 24px; height: 24px; }
.import-view__title { font-size: 17px; font-weight: 700; margin: 0 0 5px; color: var(--text-primary); }
.import-view__sub { font-size: 12.5px; color: var(--text-muted); line-height: 1.55; margin: 0; }
.import-view__batch-hint {
  font-size: 16px; font-weight: 500;
  color: var(--text-primary);
  text-align: center;
  margin: 8px 0 0;
  padding: 4px 0 2px;
  border-top: 1px solid var(--border-primary);
}
.import-view__header:has(.import-view__batch-hint) {
  padding-bottom: 8px;
  margin-bottom: 8px;
}

/* Availability pill tabs */
.import-avail-tabs {
  display: flex; gap: 6px;
  background: var(--bg-primary);
  border: 1px solid var(--border-primary);
  border-radius: 10px;
  padding: 4px;
  margin-bottom: var(--sp-4);
}
.import-avail-tab {
  flex: 1; display: flex; align-items: center; justify-content: center; gap: 5px;
  padding: 7px 10px;
  border-radius: 7px;
  font-size: 12px; font-weight: 500;
  color: var(--text-muted);
  border: none; background: none; cursor: pointer;
  transition: background 0.15s, color 0.15s, box-shadow 0.15s;
}
.import-avail-tab--active {
  background: var(--accent);
  color: #fff;
  box-shadow: 0 1px 6px rgba(59,130,246,0.35);
}
.import-avail-tab--disabled { opacity: 0.4; cursor: not-allowed; }
.import-avail-tab__desc {
  font-size: 10px; font-weight: 400;
  opacity: 0.75;
  margin-left: 2px;
}

/* Textarea label row */
.import-view__textarea-label {
  display: flex; justify-content: space-between; align-items: center;
  font-size: 11.5px; font-weight: 600; color: var(--text-muted);
  text-transform: uppercase; letter-spacing: 0.05em;
  margin-bottom: 6px;
}
.import-view__textarea-hint { font-weight: 400; text-transform: none; letter-spacing: 0; opacity: 0.7; }

.bulk-import__textarea--view {
  width: 100%; min-height: 200px; resize: vertical; box-sizing: border-box;
  background: var(--bg-primary);
  border: 1px solid var(--border-primary);
  border-radius: 8px;
  color: var(--text-primary);
  font-family: var(--font-mono, 'Courier New', monospace);
  font-size: 12px; line-height: 1.6;
  padding: 10px 12px;
  margin-bottom: var(--sp-3);
  transition: border-color 0.15s;
}
.bulk-import__textarea--view:focus { outline: none; border-color: var(--accent); }

.import-view__drop {
  border: 1.5px dashed var(--border-primary);
  border-radius: 8px; padding: 12px;
  text-align: center; color: var(--text-muted); font-size: 12.5px;
  display: flex; align-items: center; justify-content: center; gap: 8px;
  margin-bottom: var(--sp-3); cursor: pointer;
  transition: border-color 0.15s, background 0.15s, color 0.15s;
}
.import-view__drop:hover, .bulk-import__drop--active {
  border-color: var(--accent);
  background: rgba(59,130,246,0.05);
  color: var(--accent);
}

.import-view__parse-btn {
  width: 100%; margin-top: 2px;
  display: flex; align-items: center; justify-content: center;
}

.import-checked-toggle {
  display: flex; align-items: center; gap: 8px;
  margin-top: var(--sp-3); padding: 9px 12px;
  border: 1px solid var(--border-primary); border-radius: 7px;
  background: var(--bg-input);
  font-size: 12px; font-weight: 600; color: var(--text-secondary);
  cursor: pointer; user-select: none;
}
.import-checked-toggle input { width: 15px; height: 15px; accent-color: var(--accent); cursor: pointer; }
.import-checked-toggle__text em { font-style: normal; font-weight: 400; color: var(--text-tertiary); }
.import-checked-toggle:has(input:checked) { border-color: var(--accent); color: var(--text-primary); }
.import-view__confirm-btn { display: flex; align-items: center; }

.import-view__table-wrap {
  max-height: 340px; overflow-y: auto;
  border-radius: 8px; border: 1px solid var(--border-primary);
  margin: var(--sp-3) 0;
}
.import-view__actions {
  display: flex; gap: var(--sp-2) var(--sp-3); justify-content: flex-end; flex-wrap: wrap;
  padding-top: var(--sp-3);
  border-top: 1px solid var(--border-primary);
  margin-top: var(--sp-3);
}

/* ── Sidebar info cards ── */
.import-view__sidebar { display: flex; flex-direction: column; gap: var(--sp-3); }

.import-info-card {
  background: var(--bg-secondary);
  border: 1px solid var(--border-primary);
  border-radius: var(--radius-card);
  padding: var(--sp-4);
}
.import-info-card--tip { border-color: rgba(59,130,246,0.2); }

.import-info-card__title {
  font-size: 10.5px; font-weight: 700;
  color: var(--text-muted);
  text-transform: uppercase; letter-spacing: 0.07em;
  margin-bottom: var(--sp-3);
}

.import-info-row {
  display: flex; align-items: center; gap: 6px;
  font-size: 12px; color: var(--text-secondary);
  padding-bottom: var(--sp-2); margin-bottom: var(--sp-2);
  border-bottom: 1px solid var(--border-primary);
}
.import-info-row code {
  background: var(--bg-primary); border: 1px solid var(--border-primary);
  border-radius: 4px; padding: 1px 6px; font-size: 11px;
  color: var(--accent); font-family: monospace;
}

.import-info-field-list { display: flex; flex-direction: column; gap: 4px; }
.import-info-field {
  display: flex; align-items: center; gap: 7px;
  font-size: 12px; color: var(--text-secondary);
}
.import-info-field__req {
  font-size: 10px; font-weight: 700; padding: 1px 5px;
  border-radius: 4px; background: rgba(59,130,246,0.15); color: var(--accent);
  flex-shrink: 0; min-width: 36px; text-align: center;
}
.import-info-field__opt {
  font-size: 10px; font-weight: 600; padding: 1px 5px;
  border-radius: 4px; background: var(--bg-primary); color: var(--text-muted);
  border: 1px solid var(--border-primary);
  flex-shrink: 0; min-width: 36px; text-align: center;
}

.import-nets { display: flex; flex-wrap: wrap; gap: 5px; margin-bottom: var(--sp-3); }
.import-net-badge {
  padding: 3px 9px; border-radius: 5px;
  font-size: 11px; font-weight: 700; letter-spacing: 0.03em;
}
.import-net-badge--visa      { background: rgba(26,115,232,0.15); color: #5b9ef9; }
.import-net-badge--mastercard { background: rgba(234,67,53,0.13); color: #f28b82; }
.import-net-badge--amex      { background: rgba(52,168,83,0.13); color: #81c995; }
.import-net-badge--discover  { background: rgba(251,188,5,0.13); color: #fdd663; }
.import-net-badge--other     { background: var(--bg-primary); color: var(--text-muted); border: 1px solid var(--border-primary); }

.import-info-note { font-size: 11px; color: var(--text-muted); margin: 0; line-height: 1.5; }

.import-info-tip-row {
  display: flex; align-items: flex-start; gap: 8px;
  font-size: 12px; color: var(--text-secondary); line-height: 1.4;
  padding: 5px 0; border-bottom: 1px solid var(--border-primary);
}
.import-info-tip-row:last-child { border-bottom: none; }
.import-info-tip-icon { font-size: 14px; flex-shrink: 0; margin-top: 1px; }

/* ── Settlement modal (admin «Расчёт») ── */
.ap-settle__sec { margin-bottom: var(--sp-4); }
.ap-settle__head {
  font-size: 11px; font-weight: 700; text-transform: uppercase;
  letter-spacing: 0.5px; color: var(--text-tertiary); margin-bottom: var(--sp-2);
}
.ap-settle-row {
  display: flex; justify-content: space-between; gap: var(--sp-3);
  font-size: 12px; padding: 4px 0; border-bottom: 1px solid var(--border-secondary);
}
.ap-settle-row:last-child { border-bottom: none; }
.ap-settle-row > span:last-child { font-family: var(--font-mono); white-space: nowrap; }
.ap-settle-sub {
  color: var(--text-tertiary); font-size: 11px; padding-left: 12px;
  border-bottom: 1px solid var(--border-secondary);
}
.ap-settle-person {
  margin-bottom: var(--sp-2); padding-bottom: var(--sp-1);
  border-bottom: 1px dashed var(--border-primary);
}
.ap-settle-person:last-child { border-bottom: none; margin-bottom: 0; }
.ap-settle__range {
  display: flex; align-items: center; gap: var(--sp-2); flex-wrap: wrap;
  margin-bottom: var(--sp-4); padding-bottom: var(--sp-3);
  border-bottom: 1px solid var(--border-primary);
}
.ap-settle__range input[type="date"] {
  background: var(--bg-input); border: 1px solid var(--border-primary);
  border-radius: var(--radius-btn); color: var(--fg);
  font-family: var(--font-mono); font-size: 12px; padding: 5px 8px;
  color-scheme: dark;
}
.ap-settle__arrow { color: var(--text-tertiary); }
.ap-settle__btn {
  background: var(--bg-hover); border: 1px solid var(--border-primary);
  border-radius: var(--radius-btn); color: var(--fg);
  font-size: 11px; font-weight: 600; padding: 5px 10px; cursor: pointer;
}
.ap-settle__btn:hover { background: var(--bg-input); border-color: var(--accent); }

/* ≥1900px — выравниваем с .home-page (1680px): Admin Dashboard, Wallet, Profile */
@media (min-width: 1900px) {
  .ap-page, .wallet-page, .page-profile { max-width: 1680px; }
}

/* ── Friends directory (binmap-style, 67 blue) ── */
.friends-page { max-width: 1400px; margin: 0 auto; }
.friends-hero {
  padding: var(--sp-6) 0 var(--sp-5);
}
.friends-hero__badge {
  display: inline-flex; align-items: center; gap: 6px;
  font-size: 11px; font-weight: 700; letter-spacing: 0.12em;
  color: var(--accent); text-transform: uppercase;
  padding: 5px 12px; border-radius: 999px;
  background: var(--accent-muted); border: 1px solid rgba(61,122,184,.3);
}
.friends-hero__title { font-size: 26px; font-weight: 800; margin: var(--sp-3) 0 var(--sp-2); }
.friends-hero__sub { color: var(--text-secondary); font-size: 14px; max-width: 560px; }
.friends-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(230px, 1fr));
  gap: var(--sp-4);
  margin-top: var(--sp-4);
}
.friend-card {
  border-radius: var(--radius-card);
  background: var(--bg-surface);
  border: 1px solid var(--border-primary);
  overflow: hidden;
  transition: transform .18s ease, border-color .18s ease, box-shadow .18s ease;
}
.friend-card:hover {
  transform: translateY(-3px);
  border-color: var(--accent);
  box-shadow: 0 10px 30px rgba(0,0,0,.35);
}
.friend-card__banner {
  position: relative; aspect-ratio: 16 / 9;
  display: flex; align-items: center; justify-content: center;
  background: linear-gradient(160deg, #2f86d6 0%, #255f9c 100%);
}
.friend-card--gold   .friend-card__banner { background: linear-gradient(160deg, #b98a2f 0%, #8a6420 100%); }
.friend-card--violet .friend-card__banner { background: linear-gradient(160deg, #7b5fd0 0%, #54408f 100%); }
.friend-card--green  .friend-card__banner { background: linear-gradient(160deg, #3f9e6b 0%, #2a6e4a 100%); }
.friend-card--red    .friend-card__banner { background: linear-gradient(160deg, #b0564e 0%, #7e3a34 100%); }
.friend-card--cyan   .friend-card__banner { background: linear-gradient(160deg, #3d9ab8 0%, #2a6d84 100%); }
.friend-card__mark {
  font-size: 30px; font-weight: 800; color: rgba(255,255,255,.92);
  letter-spacing: .04em; text-shadow: 0 2px 12px rgba(0,0,0,.3);
}
.friend-card__img {
  position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover;
}
.friend-card__shine {
  position: absolute; inset: 0;
  background: radial-gradient(ellipse at 30% 0%, rgba(255,255,255,.18), transparent 60%);
  pointer-events: none;
}
.friend-card__body { padding: var(--sp-4); }
.friend-card__tag {
  font-size: 10px; font-weight: 700; letter-spacing: .1em;
  color: var(--accent); text-transform: uppercase; margin-bottom: 4px;
}
.friend-card__name { font-size: 16px; font-weight: 700; }
.friend-card__desc {
  font-size: 13px; color: var(--text-secondary);
  margin: 6px 0 12px; min-height: 34px;
}
.friend-card__link {
  display: inline-flex; align-items: center; gap: 4px;
  font-size: 13px; font-weight: 600; color: var(--accent);
}
.friend-card__link:hover { color: var(--accent-hover); }
.friend-card__link--soon { color: var(--text-tertiary); cursor: default; }
.friends-foot {
  display: flex; align-items: center; gap: 8px;
  margin-top: var(--sp-5); padding: var(--sp-4);
  border-radius: var(--radius-card);
  background: var(--bg-surface); border: 1px dashed var(--border-primary);
  color: var(--text-tertiary); font-size: 12px;
}
@media (max-width: 640px) {
  .friends-grid { grid-template-columns: 1fr; }
}

/* ── Friend detail page (#/friends/<slug>) ── */
.friend-page { max-width: 560px; margin: 0 auto; }
.friend-links--top { margin-top: var(--sp-4); }
.friend-page__back {
  display: inline-flex; align-items: center; gap: 4px;
  font-size: 13px; font-weight: 600; color: var(--text-secondary);
  text-decoration: none; margin-bottom: var(--sp-4);
}
.friend-page__back:hover { color: var(--accent-hover); }
.friend-hero {
  border-radius: var(--radius-card);
  background: var(--bg-surface);
  border: 1px solid var(--border-primary);
  overflow: hidden;
}
.friend-hero__banner {
  position: relative; aspect-ratio: 16 / 9;
  display: flex; align-items: center; justify-content: center;
  background: linear-gradient(160deg, #2f86d6 0%, #255f9c 100%);
}
.friend-card--gold   .friend-hero__banner { background: linear-gradient(160deg, #b98a2f 0%, #8a6420 100%); }
.friend-card--violet .friend-hero__banner { background: linear-gradient(160deg, #7b5fd0 0%, #54408f 100%); }
.friend-card--green  .friend-hero__banner { background: linear-gradient(160deg, #3f9e6b 0%, #2a6e4a 100%); }
.friend-card--red    .friend-hero__banner { background: linear-gradient(160deg, #b0564e 0%, #7e3a34 100%); }
.friend-card--cyan   .friend-hero__banner { background: linear-gradient(160deg, #3d9ab8 0%, #2a6d84 100%); }
.friend-hero__mark {
  font-size: 44px; font-weight: 800; color: rgba(255,255,255,.92);
  letter-spacing: .05em; text-shadow: 0 4px 24px rgba(0,0,0,.35);
}
.friend-hero__body { padding: var(--sp-4) var(--sp-4) var(--sp-3); }
.friend-hero__name { font-size: 19px; font-weight: 800; letter-spacing: .02em; }
.friend-hero__desc { margin-top: 4px; font-size: 13px; color: var(--text-secondary); }
.friend-section {
  margin-top: var(--sp-3); padding: var(--sp-3) var(--sp-4);
  border-radius: var(--radius-card);
  background: var(--bg-surface); border: 1px solid var(--border-primary);
}
.friend-section__title {
  display: flex; align-items: center; gap: 6px;
  font-size: 11px; font-weight: 700; letter-spacing: .12em;
  color: var(--accent); text-transform: uppercase; margin-bottom: var(--sp-3);
}
.friend-about { font-size: 14px; color: var(--text-secondary); line-height: 1.6; }
.friend-about + .friend-about { margin-top: var(--sp-2); }
.friend-tags { display: flex; flex-wrap: wrap; gap: 8px; }
.friend-tag {
  font-size: 11px; font-weight: 700; letter-spacing: .08em;
  color: var(--accent); text-transform: uppercase;
  padding: 5px 12px; border-radius: 999px;
  background: var(--accent-muted); border: 1px solid rgba(61,122,184,.3);
}
.friend-links { display: flex; flex-direction: column; gap: 8px; }
.friend-link {
  display: flex; align-items: center; gap: 8px;
  padding: 12px 14px; border-radius: var(--radius-card);
  background: rgba(255,255,255,.03);
  border: 1px solid var(--border-primary);
  color: var(--text-primary); font-size: 14px; font-weight: 600;
  text-decoration: none;
  transition: border-color .18s ease, transform .18s ease;
}
.friend-link:hover { border-color: var(--accent); transform: translateY(-1px); }
.friend-link .inline-icon:last-child { margin-left: auto; color: var(--text-tertiary); }
.friend-link--primary {
  background: var(--accent-muted); border-color: rgba(61,122,184,.4);
  color: var(--accent);
}
.friend-link--primary .inline-icon:last-child { color: var(--accent); }
.friend-link--soon { color: var(--text-tertiary); cursor: default; }
.friend-link--soon:hover { border-color: var(--border-primary); transform: none; }
.friends-empty {
  grid-column: 1 / -1; padding: var(--sp-5);
  color: var(--text-tertiary); font-size: 13px; text-align: center;
}

/* ── Friends Manager — список + builder (мотив service builder binmap.cc) ── */
.afr-new { margin-left: auto; }
.afr-list { display: flex; flex-direction: column; gap: 8px; }
.afr-row {
  display: flex; align-items: center; gap: 12px;
  padding: 10px 14px; border-radius: var(--radius-card);
  background: var(--bg-surface); border: 1px solid var(--border-primary);
  transition: border-color .15s ease;
}
.afr-row:hover { border-color: rgba(61,122,184,.4); }
.afr-thumb {
  position: relative; width: 56px; aspect-ratio: 16 / 9; flex-shrink: 0;
  border-radius: 6px; overflow: hidden;
  display: flex; align-items: center; justify-content: center;
  background: linear-gradient(160deg, #2f86d6 0%, #255f9c 100%);
}
.friend-card--gold   .afr-thumb,
.afr-thumb.friend-card--gold   { background: linear-gradient(160deg, #b98a2f 0%, #8a6420 100%); }
.friend-card--violet .afr-thumb,
.afr-thumb.friend-card--violet { background: linear-gradient(160deg, #7b5fd0 0%, #54408f 100%); }
.friend-card--green  .afr-thumb,
.afr-thumb.friend-card--green  { background: linear-gradient(160deg, #3f9e6b 0%, #2a6e4a 100%); }
.friend-card--red    .afr-thumb,
.afr-thumb.friend-card--red    { background: linear-gradient(160deg, #b0564e 0%, #7e3a34 100%); }
.friend-card--cyan   .afr-thumb,
.afr-thumb.friend-card--cyan   { background: linear-gradient(160deg, #3d9ab8 0%, #2a6d84 100%); }
.afr-thumb__mark { font-size: 11px; font-weight: 800; color: rgba(255,255,255,.92); }
.afr-thumb img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.afr-row__main { flex: 1; min-width: 0; }
.afr-row__name {
  font-size: 14px; font-weight: 700; color: var(--text-primary);
  display: flex; align-items: center; gap: 8px; flex-wrap: wrap;
}
.afr-row__sub {
  font-size: 11px; color: var(--text-tertiary); font-family: var(--font-mono);
  margin-top: 2px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.afr-chip {
  font-size: 9px; font-weight: 700; letter-spacing: .1em; text-transform: uppercase;
  color: var(--accent); padding: 2px 8px; border-radius: 999px;
  background: var(--accent-muted); border: 1px solid rgba(61,122,184,.3);
}
.afr-chip--off { color: var(--text-tertiary); background: rgba(255,255,255,.05); border-color: var(--border-primary); }
.afr-move { display: flex; flex-direction: column; gap: 3px; flex-shrink: 0; }
.afr-movebtn {
  display: flex; align-items: center; justify-content: center;
  width: 22px; height: 15px; padding: 0;
  background: var(--bg-hover); border: 1px solid var(--border-primary);
  border-radius: 4px; color: var(--text-secondary); cursor: pointer;
  transition: border-color .15s ease, color .15s ease;
}
.afr-movebtn:hover:not(:disabled) { border-color: var(--accent); color: var(--accent); }
.afr-movebtn:disabled { opacity: .28; cursor: default; }
.afr-row__actions { display: flex; align-items: center; gap: 8px; flex-shrink: 0; }
.afr-link { font-size: 12px; color: var(--accent); text-decoration: none; }
.afr-link:hover { color: var(--accent-hover); }

/* builder overlay */
#afr-builder { position: fixed; inset: 0; z-index: 150; opacity: 0; pointer-events: none; transition: opacity .28s ease; }
#afr-builder.open { opacity: 1; pointer-events: auto; }
.afr-overlay { position: absolute; inset: 0; background: rgba(7,12,18,.72); backdrop-filter: blur(6px); }
.afr-builder {
  position: absolute; inset: 2.4vh 2.4vw;
  display: flex; flex-direction: column; overflow: hidden;
  background: var(--bg-secondary);
  border: 1px solid rgba(61,122,184,.35); border-radius: 16px;
  box-shadow: 0 40px 120px rgba(0,0,0,.6), 0 0 60px -30px rgba(61,122,184,.4);
  transform: translateY(18px) scale(.985); transition: transform .3s var(--ease-out, ease);
}
#afr-builder.open .afr-builder { transform: none; }
.afr-bhead {
  display: flex; align-items: center; gap: 12px; flex-shrink: 0;
  padding: 14px 20px; border-bottom: 1px solid var(--border-primary);
  background: linear-gradient(180deg, rgba(61,122,184,.07), transparent);
}
.afr-bh-mark {
  width: 32px; height: 32px; border-radius: 9px; flex-shrink: 0;
  display: grid; place-items: center;
  background: var(--accent); color: #fff; font-weight: 800; font-size: 13px;
}
.afr-bh-title { font-size: 15px; font-weight: 700; color: var(--text-primary); }
.afr-bh-sub {
  font-family: var(--font-mono); font-size: 10px; letter-spacing: .08em;
  color: var(--text-tertiary); margin-top: 2px;
}
.afr-spacer { flex: 1; }
.afr-save {
  padding: 9px 20px; border: none; border-radius: 8px; cursor: pointer;
  background: var(--accent); color: #fff;
  font-family: var(--font-mono); font-size: 11px; font-weight: 700;
  letter-spacing: .14em; text-transform: uppercase;
  transition: background .15s ease, transform .1s ease;
}
.afr-save:hover { background: var(--accent-hover); }
.afr-save:active { transform: scale(.97); }
.afr-save:disabled { opacity: .55; cursor: default; }
.afr-x {
  width: 34px; height: 34px; flex-shrink: 0; border-radius: 9px;
  border: 1px solid var(--border-primary); background: rgba(255,255,255,.03);
  color: var(--text-secondary); font-size: 18px; line-height: 1; cursor: pointer;
  transition: all .15s ease;
}
.afr-x:hover { color: var(--text-primary); border-color: rgba(61,122,184,.5); background: var(--accent-muted); }
.afr-cols { flex: 1; display: grid; grid-template-columns: minmax(320px, 1fr) 1.15fr; min-height: 0; }
.afr-form { overflow-y: auto; padding: 20px 22px 28px; border-right: 1px solid var(--border-primary); }
.afr-preview {
  overflow-y: auto; padding: 22px 22px 28px;
  display: flex; flex-direction: column; gap: 22px;
  background: radial-gradient(130% 90% at 100% 0%, rgba(255,255,255,.02), transparent 55%), #0b131c;
}
@media (max-width: 900px) { .afr-cols { grid-template-columns: 1fr; } .afr-form { border-right: none; } }

.afr-group {
  display: flex; align-items: center; gap: 10px;
  font-family: var(--font-mono); font-size: 10px; font-weight: 700;
  letter-spacing: .22em; text-transform: uppercase; color: var(--text-tertiary);
  margin: 20px 0 12px;
}
.afr-group:first-child { margin-top: 0; }
.afr-rule { flex: 1; height: 1px; background: var(--border-primary); }
.afr-field { margin-bottom: 12px; }
.afr-label {
  display: flex; justify-content: space-between; align-items: baseline;
  font-family: var(--font-mono); font-size: 10px; letter-spacing: .16em;
  text-transform: uppercase; color: var(--text-secondary); margin-bottom: 5px;
}
.afr-hint { color: var(--text-tertiary); letter-spacing: .04em; text-transform: none; }
.afr-mono { font-family: var(--font-mono); font-size: 12px; }
.afr-2col { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.afr-swatches { display: flex; gap: 7px; flex-wrap: wrap; }
.afr-sw {
  width: 24px; height: 24px; border-radius: 7px; cursor: pointer;
  border: 1px solid rgba(255,255,255,.16); transition: transform .12s ease, box-shadow .12s ease;
}
.afr-sw:hover { transform: scale(1.12); }
.afr-sw--on { box-shadow: 0 0 0 2px var(--bg-secondary), 0 0 0 4px var(--accent); }
.afr-check { display: flex; align-items: center; gap: 8px; font-size: 13px; color: var(--text-secondary); cursor: pointer; }
.afr-links { display: flex; flex-direction: column; gap: 7px; margin-bottom: 8px; }
.afr-linkrow { display: grid; grid-template-columns: minmax(90px, .8fr) 1.4fr auto; gap: 7px; align-items: center; }
.afr-linkdel {
  width: 30px; height: 30px; border-radius: 8px; border: 1px solid var(--border-primary);
  background: none; color: var(--text-tertiary); font-size: 15px; cursor: pointer;
  transition: all .15s ease;
}
.afr-linkdel:hover { color: var(--danger); border-color: rgba(224,96,85,.4); }
.afr-add {
  padding: 7px 14px; border-radius: 8px; border: 1px dashed rgba(61,122,184,.4);
  background: none; color: var(--accent); font-size: 12px; font-weight: 600; cursor: pointer;
  transition: all .15s ease;
}
.afr-add:hover { background: var(--accent-muted); border-style: solid; }
.afr-add:disabled { opacity: .5; cursor: default; }
.afr-upload { display: flex; align-items: center; gap: 10px; margin: -6px 0 14px; }
.afr-upload .afr-hint { font-size: 10px; }
.afr-pv-wrap { position: relative; padding-top: 8px; }
.afr-pv-tag {
  position: absolute; top: 0; left: 10px; z-index: 2;
  font-family: var(--font-mono); font-size: 9px; letter-spacing: .18em;
  text-transform: uppercase; color: var(--text-tertiary);
  background: #0b131c; padding: 0 7px;
}
.afr-pv-card { max-width: 320px; }
.afr-pv-card .friend-card { pointer-events: none; }
.afr-pv-page .friend-hero { pointer-events: none; }
.afr-pv-page .friend-link { pointer-events: none; }

/* ── TOTP 2FA (admin pilot) ───────────────────────────────────────────────── */
.tfa-hint { margin-bottom: 10px; }
.tfa-hint b { color: #dbe7ff; font-size: 14px; }
.tfa-hint p { margin: 4px 0 0; font-size: 12.5px; color: #8fa3c8; line-height: 1.45; }
.tfa-code-input {
  text-align: center; letter-spacing: 8px; font-size: 20px;
  font-variant-numeric: tabular-nums; padding-left: 14px;
}
.tfa-steps { margin: 0 0 12px; padding-left: 20px; font-size: 13px; color: #a9bcd8; }
.tfa-steps li { margin: 4px 0; line-height: 1.45; }
.tfa-qr { display: flex; justify-content: center; margin: 8px 0 14px; }
.tfa-qr svg {
  display: block; width: 100%; max-width: 280px; height: auto; aspect-ratio: 1;
  border-radius: 14px; flex: none;
  box-shadow: 0 6px 22px rgba(37,99,235,.28), 0 0 0 1px rgba(147,197,253,.25);
}
@media (max-width: 480px) {
  .tfa-qr svg { max-width: 240px; }
}
.tfa-secret {
  display: flex; align-items: center; gap: 10px; margin-bottom: 10px;
  padding: 9px 12px; background: rgba(96,165,250,.08);
  border: 1px dashed rgba(96,165,250,.4); border-radius: 10px;
}
.tfa-secret__code {
  flex: 1; font-size: 14px; letter-spacing: 1.5px; color: #93c5fd;
  word-break: break-all; user-select: all;
}
.tfa-label { display: block; font-size: 12px; color: #8fa3c8; margin-bottom: 6px; }
.tfa-warn { font-size: 12px; color: #f0b866; margin: 2px 0 0; }
.tfa-btn-danger { background: linear-gradient(135deg,#b3402f,#8f2d1f) !important; }

/* ── Referral bonus плашка в кошельке ── */
.wallet-refbonus {
  display: flex; align-items: center; gap: 10px;
  margin: 0 0 14px; padding: 10px 14px;
  background: rgba(38,166,154,.10);
  border: 1px solid rgba(38,166,154,.35); border-radius: 12px;
}
.wallet-refbonus__icon { display: flex; color: #4fd1c5; flex: none; }
.wallet-refbonus__text { font-size: 13px; color: #b8cbe8; line-height: 1.45; }
.wallet-refbonus__text b { color: #4fd1c5; }

/* ── Seller Space — серый блок-разделитель во всю ширину, белый текст ── */
.wallet-seller-fn-label {
  margin: 0 0 var(--sp-5); padding: 10px 16px;
  width: 100%; box-sizing: border-box;
  display: flex; align-items: center; justify-content: space-between;
  font-family: var(--font-sans);
  font-size: 14px; font-weight: 600; letter-spacing: .18em; text-transform: uppercase;
  text-align: center; color: #fff;
  background: var(--bg-input);
  border: 1px solid var(--border-primary);
  border-radius: var(--radius-card);
}
.wallet-seller-fn-label__arrow { display: flex; color: #9db4d0; }
.wallet-seller-fn-label__arrow svg { width: 16px; height: 16px; }

/* ── Autobuy (profile) ── */
.autobuy-note { display: flex; align-items: flex-start; gap: 8px; margin: 14px 0; padding: 12px 14px; background: var(--bg-card, rgba(255,255,255,.04)); border: 1px solid var(--border-primary, rgba(255,255,255,.08)); border-radius: var(--radius-btn, 10px); color: var(--text-secondary); font-size: 13px; line-height: 1.45; }
.autobuy-note svg { flex: none; margin-top: 1px; color: var(--accent); }
.autobuy-add { width: 100%; margin-bottom: 14px; justify-content: center; min-height: 52px; font-size: 15px; font-weight: 600; gap: 8px; }
.autobuy-row { cursor: default; }
.autobuy-row__bin { font-family: var(--font-mono); letter-spacing: 1px; }
.autobuy-page { max-width: none; width: 100%; }
.ap-ref-exp--open { transform: rotate(90deg); }

/* ── Admin panel — воздух между секциями и ровные кнопки в заголовках ── */
.ap-page .wallet-section-title { margin-top: var(--sp-6); }
.ap-page .wallet-section-title > button { vertical-align: middle; }
.ap-page .wallet-section-title:not(.ap-section-head) > button { margin-left: var(--sp-1); }
.ap-page .wallet-section-title:not(.ap-section-head) > .ap-create-user { margin-left: var(--sp-2); }
.ap-page .wallet-section-title .ap-an__chev { width: 26px; height: 26px; }

/* ── Admin panel — поиск по юзерам в фуллскрин-модалке ── */
.ap-users-search { position: sticky; top: 0; z-index: 3; display: flex; flex-direction: column; align-items: center; gap: 8px; padding: var(--sp-3) var(--sp-5); background: var(--bg-surface); }
.ap-users-search__input { width: 100%; max-width: 420px; text-align: center; }
.ap-users-sort { display: flex; align-items: center; gap: 6px; }
.ap-users-sort__label { font-size: 11px; color: var(--text-muted); }
.ap-sort-chip { padding: 3px 12px; border-radius: 999px; font-size: 11px; font-weight: 600; color: var(--text-muted); background: none; border: 1px solid var(--bd, rgba(148,163,184,0.25)); cursor: pointer; transition: background .15s, color .15s, border-color .15s; }
.ap-sort-chip:hover { color: var(--text); border-color: rgba(148,163,184,0.5); }
.ap-sort-chip.is-on { background: var(--accent); color: #fff; border-color: var(--accent); box-shadow: 0 1px 6px rgba(59,130,246,0.35); }

/* Фильтр типа товара в админке — Cards / Checked Balance */
.sd-type-filter {
  display: inline-flex; align-items: center; gap: 6px;
  font-size: 12px; color: var(--text-secondary); cursor: pointer; user-select: none;
  padding: 7px 10px; border: 1px solid var(--border-primary);
  border-radius: var(--radius-btn); background: var(--bg-input);
  transition: border-color var(--t), color var(--t);
}
.sd-type-filter input { accent-color: var(--accent); margin: 0; }
.sd-type-filter:has(input:checked) { border-color: var(--accent); color: var(--text-primary); }
.sd-type-filters { display: inline-flex; gap: var(--sp-2); align-items: center; }

/* Липкая плашка ошибок bulk-импорта — справа внизу, не исчезает сама */
.bulk-issues-banner {
  position: fixed; right: 18px; bottom: 18px; z-index: 90;
  display: flex; align-items: center; gap: 12px;
  max-width: min(460px, calc(100vw - 36px));
  padding: 10px 14px;
  background: var(--bg-surface, #1b273d);
  border: 1px solid rgba(239, 83, 80, 0.55);
  border-left: 3px solid #ef5350;
  border-radius: 10px;
  box-shadow: 0 8px 28px rgba(0, 0, 0, 0.45);
  font-size: 12.5px; color: var(--text-primary, #e2e8f0);
}
.bulk-issues-banner__text { line-height: 1.4; }
.bulk-issues-banner__btn {
  flex: none; padding: 6px 12px; border-radius: 7px;
  border: 1px solid rgba(239, 83, 80, 0.6);
  background: rgba(239, 83, 80, 0.12); color: #ef9a9a;
  font-size: 12px; font-weight: 600; cursor: pointer;
  transition: background .15s;
}
.bulk-issues-banner__btn:hover { background: rgba(239, 83, 80, 0.25); }