/* ============================================================
   67 CC — components.css
   Reusable UI: sidebar, buttons, cards, forms, modals, toasts,
   badges, avatars. Uses only index.css tokens.
   ============================================================ */

/* SIDEBAR */
.sidebar {
  position: relative;
  width: var(--sidebar-w);
  flex-shrink: 0;
  display: flex;
  flex-direction: column;
  background: var(--bg-primary);
  border-right: 1px solid var(--border-primary);
  padding: var(--sp-3) var(--sp-2);
  overflow-y: auto;
}
.sidebar-top {
  padding: var(--sp-4) var(--sp-2) var(--sp-3);
  overflow: hidden;
  max-height: 344px; /* mascot 168px wide → ~299px tall + this chrome, no slack */
  transition: max-height 0.25s var(--ease-out), opacity 0.18s var(--ease-out) 0.1s, padding 0.25s var(--ease-out);
}
.sidebar-logo { display: flex; justify-content: center; padding: var(--sp-2); }
.sidebar-logo--mark { display: none; padding: var(--sp-2); }
.sidebar-nav { margin-top: var(--sp-2); }

/* ── Brand logo lockup ── */
.logo-lockup { display: inline-flex; align-items: center; }
.logo-img { display: block; width: auto; }

/* Full stacked: face over wordmark */
.logo-lockup--full {
  flex-direction: column;
  align-items: center;
  gap: 10px;
}
.logo-lockup--full .logo-img--mark {
  width: 72px;
  height: auto;
  filter: drop-shadow(0 2px 12px rgba(61,122,184,0.25));
  transition: filter 0.3s ease;
}
.logo-lockup--full:hover .logo-img--mark {
  filter: drop-shadow(0 4px 20px rgba(61,122,184,0.45));
}

/* Mark-only (collapsed sidebar) */
.logo-lockup--mark .logo-img--mark {
  width: 36px;
  height: 36px;
  object-fit: contain;
}

/* Wordmark text */
.logo-wordmark {
  display: flex;
  align-items: baseline;
  gap: 6px;
  letter-spacing: 4px;
  text-transform: uppercase;
  line-height: 1;
}
.logo-wordmark__bold {
  font-size: 15px;
  font-weight: 700;
  color: var(--text-primary);
}
.logo-wordmark__thin {
  font-size: 15px;
  font-weight: 700;
  color: var(--accent);
  letter-spacing: 5px;
}

/* ── Mascot loop (intro clip → seamless juggling loop) ── */
.mascot-loop-wrap { display: inline-block; position: relative; width: 172px; aspect-ratio: 720 / 1280; margin: 0 auto; }
.mascot-loop-video { position: absolute; inset: 0; width: 100%; height: 100%; display: block; pointer-events: none; }
/* Static PNG fallback (Tor onion + WebKit): the PNG's mascot is framed tighter
   than the webm rest frame — inset it a touch so the logo keeps the same air
   around it as the video version. The character also sits low inside the PNG
   canvas (~26% dead space above, ~19% below), so we nudge it up a bit — it
   reads centred/higher in the box while staying well clear of the edges. */
.mascot-loop-static { object-fit: contain; }

/* Sidebar: the mascot clip itself rests paused on its first frame — no
   separate static image underneath it, so there's nothing to keep in sync
   and nothing that can visibly seam. Hover/focus (header.js) just plays it. */
.sidebar-logo-full { position: relative; }
.sidebar-logo-full .mascot-loop-wrap {
  width: 168px;
  filter: drop-shadow(0 6px 22px rgba(61,122,184,0.32));
}
/* The mascot art is left-heavy inside its frame (bulky "6" + extended left
   glove vs thin "7"), so the geometrically centred wrap still reads as
   glued to the sidebar's left edge. Shifting the rendered frame right
   centres the character's visual mass. Applied to the media element itself
   (not the wrap) so the sidebarLogoSpring transform on the wrap is
   untouched; covers both <video> and the static PNG fallback. */
.sidebar-logo-full .mascot-loop-video { transform: translateX(10px); }

.sidebar-logo-mark .logo-img--mark { width: 36px; height: 36px; }

/* Springy reveal when sidebar expands */
.sidebar-logo .logo-img--mark,
.sidebar-logo .mascot-loop-wrap {
  transform-origin: center bottom;
  will-change: transform;
}
.sidebar--just-expanded .sidebar-logo .logo-img--mark,
.sidebar--just-expanded .sidebar-logo .mascot-loop-wrap {
  animation: sidebarLogoSpring 0.7s var(--ease-spring);
}
@keyframes sidebarLogoSpring {
  0%   { transform: scale(0.6) rotate(-6deg); opacity: 0; }
  40%  { transform: scale(1.12) rotate(4deg); opacity: 1; }
  70%  { transform: scale(0.96) rotate(-2deg); }
  100% { transform: scale(1) rotate(0); }
}

.sidebar--collapsed { width: var(--sidebar-w-collapsed); }
.sidebar--collapsed .sidebar-top { max-height: 0; opacity: 0; padding: 0; }
.sidebar--collapsed .sidebar-nav-item { justify-content: center; padding: var(--sp-2) 0; gap: 0; }
.sidebar--collapsed .sidebar-nav-label { opacity: 0; max-width: 0; }
.sidebar--collapsed .sidebar-user-card { justify-content: center; }
.sidebar--collapsed .sidebar-user-info { opacity: 0; max-width: 0; }
.sidebar--collapsed .sidebar-auth-links { display: none; }
.sidebar--collapsed .sidebar-nav { padding-top: 44px; }

.sidebar-nav { display: flex; flex-direction: column; gap: 2px; }
.sidebar-nav-item {
  display: flex;
  align-items: center;
  gap: var(--sp-3);
  padding: var(--sp-2) var(--sp-3);
  border-radius: var(--radius-card);
  color: var(--text-secondary);
  font-size: 14px;
  font-weight: 500;
  transition: background-color var(--t), color var(--t), padding 0.25s var(--ease-out), gap 0.25s var(--ease-out), transform 0.1s var(--ease-out);
  cursor: pointer;
  white-space: nowrap;
}
.sidebar-nav-item:active { transform: scale(0.97); }
/* Recolor the icon on hover only for inactive items — the active item's bg is
   --bg-active, the same hue as --accent, so an accent icon would vanish on it. */
.sidebar-nav-item:hover:not(.active) .sidebar-nav-icon { color: var(--accent); }
.sidebar-nav-item:hover:not(.active) { background: var(--bg-hover); color: var(--text-primary); }
.sidebar-nav-item.active { background: var(--bg-active); color: #fff; }
.sidebar-nav-item.active .sidebar-nav-icon { color: #fff; }
.sidebar-nav-item.active:hover { background: var(--accent-hover); }
.sidebar-nav-icon { position: relative; width: 24px; display: inline-flex; align-items: center; justify-content: center; flex-shrink: 0; transition: color var(--t); }
.sidebar-nav-icon svg { width: 22px; height: 22px; }
.sidebar-nav-badge {
  position: absolute; top: -5px; right: -8px; min-width: 16px; height: 16px; padding: 0 4px;
  background: var(--accent); color: #fff; border-radius: 8px;
  font-size: 10px; font-weight: 700; line-height: 16px; text-align: center;
  box-shadow: 0 0 0 2px var(--bg-primary);
}
.sidebar-nav-badge--dot {
  min-width: 8px; width: 8px; height: 8px; padding: 0;
  border-radius: 50%; background: var(--danger); color: transparent;
  box-shadow: none;
}
.sidebar-nav-label { flex: 1; overflow: hidden; max-width: 180px; transition: opacity 0.18s var(--ease-out) 0.1s, max-width 0.25s var(--ease-out) 0.05s; }

.sidebar-bottom { padding: var(--sp-2); }
.sidebar-spacer { flex: 1; }
.sidebar-divider { height: 1px; background: var(--border-primary); margin: var(--sp-2) 0; }

/* ── Tor mirror chip — terminal-style status line, click = copy the .onion ── */
.mirror-chip {
  display: flex; align-items: center; gap: var(--sp-2);
  font-family: var(--font-mono); font-size: 10.5px; letter-spacing: 0.4px;
  color: var(--text-secondary); cursor: pointer; user-select: none;
}
.mirror-chip__led {
  width: 7px; height: 7px; border-radius: 50%; flex-shrink: 0;
  background: var(--success);
  box-shadow: 0 0 6px var(--success);
  animation: mirrorLedBlink 2.4s ease-in-out infinite;
}
.mirror-chip--here .mirror-chip__led { animation: none; }
.mirror-chip__tag { font-weight: 700; color: var(--success); }
.mirror-chip--here .mirror-chip__tag { color: var(--accent); }
.mirror-chip__addr { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.mirror-chip:hover .mirror-chip__addr { color: var(--accent-hover); }
.mirror-chip:active { transform: translateY(1px); }
@keyframes mirrorLedBlink {
  0%, 100% { opacity: 1; }
  50% { opacity: 0.35; }
}

.sidebar-user-card {
  display: flex;
  align-items: center;
  gap: var(--sp-3);
  padding: var(--sp-2);
  border-radius: var(--radius-card);
  background: var(--bg-surface);
}
.sidebar-user-info { flex: 1; min-width: 0; overflow: hidden; max-width: 200px; transition: opacity 0.18s var(--ease-out) 0.1s, max-width 0.25s var(--ease-out) 0.05s; }
.sidebar-user-name { font-size: 14px; font-weight: 700; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.sidebar-user-role { font-size: 12px; color: var(--text-secondary); }
.sidebar-auth-links { display: flex; flex-direction: column; gap: var(--sp-2); }

.sidebar-collapse-btn {
  display: none;
  position: absolute;
  top: 18px;
  right: 10px;
  width: 26px; height: 26px;
  align-items: center; justify-content: center;
  border-radius: 7px;
  background: var(--bg-surface);
  color: var(--text-tertiary);
  cursor: pointer;
  border: 1px solid var(--border-primary);
  transition: background-color var(--t), color var(--t), border-color var(--t);
  z-index: 2;
}
.sidebar-collapse-btn:hover { background: var(--bg-hover); color: var(--accent); border-color: var(--accent); }
.sidebar-collapse-arrow { width: 15px; height: 15px; transition: transform 0.25s var(--ease-out); }
.sidebar-collapse-arrow--flipped { transform: rotate(180deg); }
.sidebar--collapsed .sidebar-collapse-btn { right: 50%; transform: translateX(50%); top: 10px; }

/* TAB BAR */
.tabbar {
  flex-shrink: 0;
  display: flex;
  align-items: stretch;
  background: var(--bg-primary);
  border-top: 1px solid var(--border-primary);
  padding-bottom: env(safe-area-inset-bottom, 0px);
  z-index: 20;
}
.tabbar__item {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 3px;
  padding: 8px 4px;
  color: var(--text-secondary);
  font-size: 11px;
  font-weight: 500;
  transition: color var(--t), transform 0.12s var(--ease-out);
}
.tabbar__item:active { transform: scale(0.9); }
.tabbar__item--active { color: var(--accent); }
.tabbar__icon { position: relative; width: 26px; height: 26px; display: inline-flex; align-items: center; justify-content: center; }
.tabbar__icon svg { width: 24px; height: 24px; }
.tabbar__badge {
  position: absolute; top: -4px; right: -8px; min-width: 16px; height: 16px; padding: 0 4px;
  background: var(--accent); color: #fff; border-radius: 8px;
  font-size: 10px; font-weight: 700; line-height: 16px; text-align: center;
  box-shadow: 0 0 0 2px var(--bg-secondary);
}
.tabbar__badge--dot {
  min-width: 8px; width: 8px; height: 8px; padding: 0;
  border-radius: 50%; background: var(--danger); color: transparent;
  box-shadow: none;
}
.tabbar__label { line-height: 1; }
/* Long labels ("Cards Checked Balance") shrink slightly and wrap onto a second
   line instead of stretching the tab or clipping. */
.tabbar__label--long { font-size: 9.5px; line-height: 1.15; text-align: center; }
@media (min-width: 769px) { .tabbar { display: none; } }

/* SPLASH */
@keyframes dogWobble {
  0%, 100% { transform: scale(0.94) rotate(-5deg); }
  50%      { transform: scale(1) rotate(5deg); }
}
.splash {
  position: fixed; inset: 0; z-index: 1000;
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: var(--sp-5);
  background: var(--bg-secondary);
  transition: opacity 0.4s ease;
}
.splash--hide { opacity: 0; pointer-events: none; }
.splash__dog { width: 150px; height: 150px; object-fit: cover; object-position: center 60%; animation: dogWobble 1.1s ease-in-out infinite; }
.splash__name { font-size: 14px; font-weight: 700; letter-spacing: 1.5px; text-transform: uppercase; color: var(--text-secondary); }

/* HERO HEADER */
.app-hero {
  position: relative;
  background: var(--grad-hero);
  color: var(--hero-on);
  padding: calc(var(--sp-5) + env(safe-area-inset-top, 0px)) var(--sp-5) var(--sp-6);
}
.app-hero__top { display: flex; align-items: center; justify-content: space-between; margin-bottom: var(--sp-5); }
.app-hero__title { font-size: 16px; font-weight: 700; }
.hero-eye {
  width: 34px; height: 34px;
  display: inline-flex; align-items: center; justify-content: center;
  border-radius: var(--radius-pill);
  background: rgba(255, 255, 255, 0.16);
  color: var(--hero-on);
}
.hero-eye svg { width: 18px; height: 18px; }
.app-hero__balance { text-align: center; }
.app-hero__amount { font-size: 34px; font-weight: 700; font-family: var(--font-mono); letter-spacing: -0.5px; }
.app-hero__label { font-size: 13px; opacity: 0.82; margin-top: 2px; }
.app-hero__actions { display: flex; justify-content: center; gap: var(--sp-6); margin-top: var(--sp-5); }
.hero-action { display: flex; flex-direction: column; align-items: center; gap: 6px; color: var(--hero-on); }
.hero-action__circle {
  width: 48px; height: 48px;
  border-radius: var(--radius-pill);
  background: rgba(255, 255, 255, 0.18);
  display: flex; align-items: center; justify-content: center;
  transition: background-color var(--t), transform var(--t);
}
.hero-action:active .hero-action__circle { transform: scale(0.92); }
.hero-action__circle svg { width: 22px; height: 22px; }
.hero-action__label { font-size: 12px; font-weight: 500; }

/* BUTTONS */
.btn, .btn-primary, .btn-secondary, .btn-danger, .btn-ghost, .btn-ghost-accent,
.btn-login, .btn-modal-cancel, .btn-modal-confirm {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--sp-2);
  height: 38px;
  padding: 0 var(--sp-4);
  border-radius: var(--radius-btn);
  font-size: 14px;
  font-weight: 700;
  white-space: nowrap;
  transition: background-color var(--t), color var(--t), transform 0.1s var(--ease-out);
}
.btn-sm { height: 30px; padding: 0 var(--sp-3); font-size: 13px; }
.btn-lg { height: 44px; padding: 0 var(--sp-6); font-size: 15px; }
.btn-full { width: 100%; }

.btn-primary, .btn-login, .btn-modal-confirm {
  background: var(--accent); color: #fff;
  box-shadow: 0 2px 10px rgba(61,122,184,0.25);
  transition: background-color var(--t), color var(--t), transform 0.12s var(--ease-out), box-shadow var(--t);
}
.btn-primary:hover, .btn-login:hover, .btn-modal-confirm:hover {
  background: var(--accent-hover);
  box-shadow: 0 4px 18px rgba(61,122,184,0.35);
  transform: translateY(-1px);
}
.btn-primary:active, .btn-login:active {
  transform: translateY(0) scale(0.985);
  box-shadow: 0 1px 6px rgba(61,122,184,0.2);
}

.btn-secondary, .btn-modal-cancel {
  background: var(--bg-input); color: var(--text-primary);
  border: 1px solid var(--border-primary);
  transition: background-color var(--t), color var(--t), border-color var(--t), transform 0.12s var(--ease-out);
}
.btn-secondary:hover, .btn-modal-cancel:hover {
  background: var(--bg-hover);
  border-color: rgba(255,255,255,0.12);
}
.btn-secondary:active, .btn-modal-cancel:active { transform: scale(0.985); }

.btn-danger {
  background: transparent; color: var(--danger); border: 1px solid var(--border-primary);
  transition: background-color var(--t), color var(--t), border-color var(--t), transform 0.12s var(--ease-out);
}
.btn-danger:hover { background: rgba(224, 96, 85, 0.12); border-color: rgba(224,96,85,0.3); }
.btn-danger:active { transform: scale(0.985); }

.btn-ghost { background: transparent; color: var(--text-secondary); }
.btn-ghost:hover { background: var(--bg-hover); color: var(--text-primary); }
.btn-ghost-accent { background: transparent; color: var(--accent); }
.btn-ghost-accent:hover { background: var(--accent-muted); }

.btn-icon {
  width: 36px; height: 36px; padding: 0;
  border-radius: var(--radius-btn);
  color: var(--text-secondary);
  display: inline-flex; align-items: center; justify-content: center;
  transition: background-color var(--t), color var(--t);
}
.btn-icon:hover { background: var(--bg-hover); color: var(--text-primary); }

button[disabled] { background: var(--bg-input) !important; color: var(--text-tertiary) !important; cursor: not-allowed; pointer-events: none; box-shadow: none !important; transform: none !important; }

/* AVATARS */
.avatar {
  display: inline-flex; align-items: center; justify-content: center;
  width: 40px; height: 40px;
  border-radius: var(--radius-pill);
  background: var(--bg-active);
  color: #fff;
  font-weight: 700;
  font-size: 15px;
  flex-shrink: 0;
  overflow: hidden;
}
.avatar img { width: 100%; height: 100%; object-fit: cover; }
.avatar svg { width: 56%; height: 56%; }
.avatar-sm { width: 28px; height: 28px; font-size: 12px; }
.avatar-md { width: 40px; height: 40px; font-size: 15px; }
.avatar-lg { width: 56px; height: 56px; font-size: 20px; }

/* BADGES */
.badge {
  display: inline-flex; align-items: center; gap: 4px;
  padding: 2px var(--sp-2);
  border-radius: var(--radius-btn);
  font-size: 11px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.4px;
  background: var(--bg-input);
  color: var(--text-secondary);
}
.badge-accent  { background: var(--accent-muted); color: var(--accent); }
.badge-success { background: rgba(79, 174, 78, 0.15); color: var(--success); }
.badge-warning { background: rgba(234, 179, 8, 0.14); color: #e5a50a; }
.badge-danger  { background: rgba(224, 96, 85, 0.15); color: var(--danger); }
.badge-gold    { background: rgba(234, 179, 8, 0.12); color: #e5a50a; }

/* FORM CONTROLS */
.form-input, .form-select, .form-textarea {
  width: 100%;
  background: var(--bg-input);
  border: 1px solid var(--border-primary);
  border-radius: var(--radius-btn);
  color: var(--text-primary);
  padding: var(--sp-2) var(--sp-3);
  outline: none;
  transition: border-color var(--t);
}
.form-input:focus, .form-select:focus, .form-textarea:focus { border-color: var(--accent); }
.form-mono { font-family: var(--font-mono); }
.form-group { margin-bottom: var(--sp-4); }
.form-label { display: block; margin-bottom: var(--sp-2); font-size: 12px; font-weight: 700; color: var(--text-secondary); }
.form-hint { margin-top: var(--sp-2); font-size: 12px; color: var(--text-tertiary); }
.form-error { margin-top: var(--sp-2); font-size: 12px; color: var(--danger); }

/* CARDS */
.card {
  background: var(--bg-primary);
  border: 1px solid var(--border-primary);
  border-radius: var(--radius-card);
  box-shadow: var(--shadow-card);
  padding: var(--sp-4);
}

/* MODALS */
#modal-root { border: none; padding: 0; background: transparent; max-width: none; max-height: none; }
#modal-root::backdrop { background: rgba(0, 0, 0, 0.5); }
.modal-overlay {
  position: fixed; inset: 0;
  display: flex; align-items: center; justify-content: center;
  padding: var(--sp-4);
  background: rgba(0, 0, 0, 0.5);
  z-index: 100;
  animation: fadeIn var(--t);
}
.modal-content {
  width: 100%; max-width: 440px;
  display: flex; flex-direction: column;
  max-height: calc(100vh - 2 * var(--sp-4));
  max-height: calc(100dvh - 2 * var(--sp-4));
  background: var(--bg-surface);
  border: 1px solid var(--border-primary);
  border-radius: var(--radius-modal);
  box-shadow: var(--shadow-modal);
  animation: scaleIn 0.18s var(--ease-out) both;
  overflow: hidden;
}
.modal-small { max-width: 360px; }
.modal-medium { max-width: 560px; }
.modal-overlay--fullscreen { align-items: stretch; justify-content: stretch; padding: 0; }
.modal-fullscreen {
  max-width: 100% !important; width: 100% !important; height: 100% !important;
  max-height: 100vh !important; max-height: 100dvh !important;
  border-radius: 0 !important; display: flex; flex-direction: column;
}
.modal-body--fullscreen { flex: 1; overflow-y: auto; min-height: 0; }
.modal-header {
  display: flex; align-items: center; justify-content: space-between;
  padding: var(--sp-4) var(--sp-5);
  border-bottom: 1px solid var(--border-primary);
  flex-shrink: 0;
}
.modal-title { font-size: 16px; font-weight: 700; }
.modal-close {
  width: 30px; height: 30px;
  border-radius: var(--radius-btn);
  color: var(--text-secondary);
  display: inline-flex; align-items: center; justify-content: center;
  font-size: 18px;
  transition: background-color var(--t), color var(--t);
}
.modal-close:hover { background: var(--bg-hover); color: var(--text-primary); }
.modal-body { padding: var(--sp-5); overflow-y: auto; min-height: 0; }
.modal-footer {
  display: flex; justify-content: flex-end; gap: var(--sp-3);
  padding: var(--sp-4) var(--sp-5);
  border-top: 1px solid var(--border-primary);
  flex-shrink: 0;
}
.modal-confirm-message { color: var(--text-secondary); margin-bottom: var(--sp-4); }
.modal-prompt-input {
  width: 100%; padding: 10px 12px;
  background: var(--bg-input); color: var(--text-primary);
  border: 1px solid var(--border-primary); border-radius: var(--radius-btn);
  font-size: 14px; outline: none; transition: border-color var(--t);
}
.modal-prompt-input:focus { border-color: var(--accent); }
/* Make it obviously a placeholder, not pre-filled text: italic + low opacity. */
.modal-prompt-input::placeholder {
  color: var(--text-muted);
  font-style: italic;
  opacity: 0.65;
}
.modal-prompt-example {
  margin-top: 8px;
  font-size: 12px;
  color: var(--text-muted);
  letter-spacing: 0.02em;
}
.modal-prompt-example em {
  color: var(--text-secondary);
  font-style: italic;
}

/* The avatar/buyer upsells moved to the shared Classic premium drawer
   (.ts-sheet--goat / .ts-sheet--studio in pages.css). */
.btn-full { width: 100%; }

/* TOASTS */
.toast-container {
  position: fixed; right: var(--sp-5); bottom: var(--sp-5); z-index: 200;
  display: flex; flex-direction: column; gap: var(--sp-2); max-width: 360px;
}
.toast-notification {
  display: flex; align-items: center; gap: 11px;
  padding: 12px 12px 12px 14px;
  background: var(--bg-surface);
  border: 1px solid var(--border-primary);
  border-radius: var(--radius-card);
  box-shadow: var(--shadow-modal);
  opacity: 0;
  transform: translateY(10px) scale(0.97);
  transition: opacity 0.15s var(--ease-out), transform 0.22s var(--ease-spring);
}
.toast-notification.toast-visible { opacity: 1; transform: translateY(0) scale(1); }

/* Icon in a tinted circular badge, colored per type. */
.toast-icon {
  flex-shrink: 0;
  display: flex; align-items: center; justify-content: center;
  width: 26px; height: 26px; border-radius: 50%;
}
.toast-icon svg { width: 15px; height: 15px; }
.toast-success .toast-icon { color: var(--success); background: color-mix(in srgb, var(--success) 16%, transparent); }
.toast-error   .toast-icon { color: var(--danger);  background: color-mix(in srgb, var(--danger) 16%, transparent); }
.toast-info    .toast-icon { color: var(--accent);  background: color-mix(in srgb, var(--accent) 18%, transparent); }
.toast-warning .toast-icon { color: var(--warning); background: color-mix(in srgb, var(--warning) 18%, transparent); }

.toast-message { flex: 1; font-size: 13px; line-height: 1.4; color: var(--text-primary); }

.toast-close {
  flex-shrink: 0;
  display: flex; align-items: center; justify-content: center;
  width: 24px; height: 24px; border-radius: 7px;
  color: var(--text-tertiary); background: none; border: none; cursor: pointer;
  transition: color var(--t), background var(--t);
}
.toast-close svg { width: 14px; height: 14px; }
.toast-close:hover { color: var(--text-primary); background: var(--bg-hover, rgba(255,255,255,0.06)); }

/* Cart-added toast — compact single-row */
.toast-notification.toast-cart {
  border-left-color: var(--accent);
  background: var(--bg-surface);
  border-color: rgba(61,122,184,0.22);
  align-items: center;
  gap: 8px;
  padding: 10px 12px;
}
.toast-cart__icon { font-size: 16px; line-height: 1; flex-shrink: 0; }
.toast-cart__msg {
  flex: 1;
  font-size: 13px;
  font-weight: 700;
  color: var(--text-primary);
  white-space: nowrap;
}
.toast-cart__goto {
  font-size: 11px;
  font-weight: 700;
  color: var(--accent);
  background: rgba(61,122,184,0.10);
  border: 1px solid rgba(61,122,184,0.28);
  border-radius: 6px;
  padding: 3px 9px;
  cursor: pointer;
  white-space: nowrap;
  flex-shrink: 0;
  transition: background var(--t), border-color var(--t);
}
.toast-cart__goto:hover { background: var(--accent-muted); border-color: var(--accent); }
/* Replayed each time another item is added to the same toast. */
.toast-notification.toast-bump { animation: toastBump 0.3s var(--ease-spring); }
@keyframes toastBump {
  0% { transform: translateY(0) scale(1); }
  40% { transform: translateY(0) scale(1.04); }
  100% { transform: translateY(0) scale(1); }
}

/* KEY DISPLAY */
.key-display-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);
}
.key-text { flex: 1; font-family: var(--font-mono); font-size: 13px; letter-spacing: 0.5px; word-break: break-all; }

/* RESPONSIVE */
@media (max-width: 768px) {
  .sidebar {
    position: fixed; top: 0; bottom: 0; left: 0; z-index: 45;
    transform: translateX(-100%); transition: transform var(--t);
  }
  .sidebar.sidebar-open { transform: translateX(0); }
  /* Тосты над таббаром (~58px) + home-indicator, иначе уезжают под него */
  .toast-container { right: var(--sp-3); left: var(--sp-3); bottom: calc(66px + env(safe-area-inset-bottom, 0px)); max-width: none; }
}
@media (max-width: 480px) {
  .modal-footer { flex-direction: column-reverse; }
  .modal-footer > * { width: 100%; }
}

/* Wallet — static crypto accept badges */
.wallet-crypto-accept { display: flex; align-items: center; gap: var(--sp-3); flex-wrap: wrap; margin-bottom: var(--sp-4); }
.wallet-crypto-accept__label { font-size: 12px; color: var(--text-tertiary); text-transform: uppercase; letter-spacing: .06em; white-space: nowrap; }
.wallet-crypto-card--static { cursor: default; opacity: .75; pointer-events: none; }

/* Поля в модалках (credit/payout/check) */
.modal-field { margin-bottom: var(--sp-4); }
.modal-field > label { display: block; font-size: 12px; font-weight: 500; color: var(--text-secondary); margin-bottom: 6px; }
.modal-note { font-size: 11px; color: var(--text-tertiary); line-height: 1.5; margin: var(--sp-2) 0 0; }