*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

:root {
  --bg-main: #0D0F12;
  --bg-sidebar: #111318;
  --bg-sidebar-border: rgba(255,255,255,0.06);
  --bg-hover: rgba(255,255,255,0.05);
  --bg-active: rgba(56,189,248,0.08);
  --text-idle: #9CA3AF;
  --text-hover: #E2E8F0;
  --text-active: #38BDF8;
  --accent: #38BDF8;
  --accent-glow: rgba(56,189,248,0.25);
  --danger: #F87171;
  --success: #22C55E;
  --warning: #FBBF24;
  --sidebar-w: 268px;
  --sidebar-collapsed: 72px;
  --transition: cubic-bezier(0.4, 0, 0.2, 1);

  /* Unified font stack — same pairing on Landing and App so the two
     do not feel like separate products. Themes can override
     `--font-display` only to add character without breaking parity. */
  --font-display: 'Syne', sans-serif;
  --font-body: 'Syne', sans-serif;
  --font-mono: 'JetBrains Mono', ui-monospace, monospace;

  /* Radii are now CSS variables so each theme can define its own
     "feel" — currently cyber/gold share the same rounded scale. */
  --radius-card: 14px;
  --radius-btn: 10px;
  --radius-input: 9px;
  --radius-chip: 999px;

  /* Unified animation cadence. Long pulses = 2.4s, short ones = 1.6s,
     micro-transitions stay at their own values. */
  --anim-pulse: 2.4s;
  --anim-fast: 1.6s;
}

html, body { height: 100%; }
/* Prefer the dynamic viewport unit on browsers that have it — iOS
   Safari's `100vh` famously ignores the shrinking bottom address bar,
   so the inner scroll container below can get cut off and feel stuck. */
@supports (height: 100dvh) {
  html, body { height: 100dvh; }
}

body {
  font-family: 'Syne', sans-serif;
  background: var(--bg-main);
  color: var(--text-hover);
  min-height: 100vh;
  min-height: 100dvh;
  display: flex;
  overflow: hidden;
  /* Prevent iOS from chaining an inner scroll's bounce to the root
     (which is what visually "freezes" the page on mobile Safari). */
  overscroll-behavior: contain;
}

body::before {
  content: '';
  position: fixed;
  inset: 0;
  background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 256 256' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='noise'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23noise)' opacity='0.03'/%3E%3C/svg%3E");
  pointer-events: none;
  z-index: 0;
}

/* SIDEBAR */
.sidebar {
  position: sticky;
  top: 0;
  width: var(--sidebar-w);
  height: 100vh;
  height: 100dvh;
  background: var(--bg-sidebar);
  border-right: 1px solid var(--bg-sidebar-border);
  display: flex;
  flex-direction: column;
  transition: width 0.35s var(--transition);
  flex-shrink: 0;
  overflow: hidden;
  z-index: 10;
}

.sidebar.collapsed { width: var(--sidebar-collapsed); }

.sidebar::after {
  content: '';
  position: absolute;
  top: 0;
  right: -1px;
  bottom: 0;
  width: 1px;
  background: linear-gradient(to bottom, transparent, rgba(56,189,248,0.15) 40%, rgba(56,189,248,0.15) 60%, transparent);
  pointer-events: none;
}

.sidebar-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  /* Trimmed horizontal padding from 14px to 10px on each side —
     buys back ~8px of real estate for the logo text so the trailing
     "S" in "PHANTOM NUMBERS" doesn't clip. Vertical padding kept. */
  padding: 18px 10px 16px;
  border-bottom: 1px solid var(--bg-sidebar-border);
  min-height: 74px;
  gap: 6px;
  overflow: hidden;
}

/* Shaved gap 9px → 6px for +3px budget on the text column. */
.logo-wrap { display: flex; align-items: center; gap: 6px; min-width: 0; }

.logo-icon {
  width: 34px;
  height: 34px;
  border-radius: 9px;
  background: linear-gradient(145deg, #1a1f2e 0%, #0f1420 100%);
  border: 1px solid rgba(56,189,248,0.28);
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  box-shadow: 0 0 8px rgba(56,189,248,0.12);
  position: relative;
  overflow: hidden;
}

.logo-icon::before {
  content: '';
  position: absolute;
  top: -50%;
  left: -50%;
  width: 200%;
  height: 200%;
  background: radial-gradient(circle at 40% 30%, rgba(56,189,248,0.08) 0%, transparent 55%);
}

.logo-icon svg { position: relative; z-index: 1; }

.logo-text {
  display: flex;
  flex-direction: column;
  min-width: 0;
  flex: 1 1 auto;
  transition: opacity 0.25s var(--transition), max-width 0.35s var(--transition);
  white-space: nowrap;
  /* Grow to however much of the sidebar is left after icon + actions.
     Previously hard-capped at 200px, which together with the parent's
     overflow:hidden chopped the trailing "S" in "PHANTOM NUMBERS". */
  max-width: none;
  overflow: visible;
}

.logo-name {
  font-family: 'Syne', sans-serif;
  font-size: 13px;
  font-weight: 700;
  /* Tighter tracking — gains ~8px back across 15 chars without killing
     the typographic voice. */
  letter-spacing: 0.025em;
  line-height: 1.05;
  background: linear-gradient(135deg, #ffffff 0%, #38BDF8 45%, #7dd3fc 72%, #94a3b8 100%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
  filter: drop-shadow(0 0 7px rgba(56,189,248,0.4));
  display: block;
  /* Defensive: if a future sidebar width shrinks below what the text
     needs, clip with ellipsis — never overflow silently. */
  overflow: hidden;
  text-overflow: ellipsis;
  padding-right: 2px;
}

.logo-sub {
  font-family: 'JetBrains Mono', monospace;
  font-size: 8.5px;
  color: var(--text-idle);
  letter-spacing: 0.2em;
  text-transform: uppercase;
  margin-top: 3px;
}

.sidebar.collapsed .logo-text { opacity: 0; max-width: 0; pointer-events: none; }

.toggle-btn {
  width: 26px;
  height: 26px;
  border-radius: 7px;
  background: rgba(255,255,255,0.04);
  border: 1px solid rgba(255,255,255,0.08);
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  flex-shrink: 0;
  transition: background 0.2s, border-color 0.2s, transform 0.35s var(--transition);
  color: var(--text-idle);
}

.toggle-btn:hover { background: rgba(255,255,255,0.08); border-color: rgba(255,255,255,0.14); color: var(--text-hover); }
.sidebar.collapsed .toggle-btn { transform: rotate(180deg); }

.sidebar-nav {
  flex: 1;
  padding: 14px 10px;
  display: flex;
  flex-direction: column;
  gap: 2px;
  overflow: hidden;
}

.nav-section-label {
  font-family: 'JetBrains Mono', monospace;
  font-size: 9px;
  font-weight: 500;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: rgba(107,114,128,0.55);
  padding: 8px 10px 5px;
  white-space: nowrap;
  overflow: hidden;
  transition: opacity 0.2s var(--transition), max-height 0.35s var(--transition);
  max-height: 30px;
}

.sidebar.collapsed .nav-section-label { opacity: 0; max-height: 0; padding-top: 0; padding-bottom: 0; }

.nav-item {
  position: relative;
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 10px 10px;
  border-radius: 10px;
  cursor: pointer;
  text-decoration: none;
  color: var(--text-idle);
  transition: background 0.2s var(--transition), color 0.2s var(--transition);
  overflow: hidden;
  white-space: nowrap;
  min-height: 44px;
}

.nav-item:hover { background: var(--bg-hover); color: var(--text-hover); }
.nav-item:hover .nav-icon { color: var(--text-hover); }
.nav-item.active { background: var(--bg-active); color: var(--text-active); }
.nav-item.active .nav-icon { color: var(--text-active); }

.nav-item.active::before {
  content: '';
  position: absolute;
  left: 0;
  top: 20%;
  bottom: 20%;
  width: 3px;
  border-radius: 0 3px 3px 0;
  background: var(--accent);
  box-shadow: 0 0 10px var(--accent-glow);
}

.nav-item.active::after {
  content: '';
  position: absolute;
  right: 0;
  top: 0;
  bottom: 0;
  width: 40%;
  background: linear-gradient(to left, rgba(56,189,248,0.04), transparent);
  pointer-events: none;
  border-radius: 0 10px 10px 0;
}

.nav-icon {
  width: 20px;
  height: 20px;
  flex-shrink: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: color 0.2s;
  position: relative;
  z-index: 1;
}

.nav-icon svg { width: 18px; height: 18px; transition: transform 0.3s var(--transition); }

/* Active nav icon: stroke-path redraw so the active state feels alive
   instead of a static colour swap. Any <path>/<rect>/<circle>/<line>
   inside .nav-item.active .nav-icon picks up the animation. Path-length
   hint 140 is an upper bound that covers all current nav SVGs;
   over-estimating is fine — the animation still completes. */
@keyframes navIconDraw {
  from { stroke-dashoffset: 140; }
  to { stroke-dashoffset: 0; }
}
.nav-item.active .nav-icon svg * {
  stroke-dasharray: 140;
  stroke-dashoffset: 0;
  animation: navIconDraw 0.7s var(--transition) forwards;
}
.nav-item:hover .nav-icon svg { transform: scale(1.08); }
@media (prefers-reduced-motion: reduce) {
  .nav-item.active .nav-icon svg * { animation: none; stroke-dasharray: none; }
}

.nav-label {
  font-size: 13.5px;
  font-weight: 500;
  letter-spacing: 0.01em;
  transition: opacity 0.2s var(--transition);
  position: relative;
  z-index: 1;
}

.sidebar.collapsed .nav-label { opacity: 0; pointer-events: none; }

.nav-badge {
  margin-left: auto;
  background: rgba(56,189,248,0.15);
  color: var(--text-active);
  font-family: 'JetBrains Mono', monospace;
  font-size: 10px;
  font-weight: 500;
  padding: 1px 7px;
  border-radius: 20px;
  border: 1px solid rgba(56,189,248,0.2);
  flex-shrink: 0;
  transition: opacity 0.2s var(--transition);
  position: relative;
  z-index: 1;
}

.sidebar.collapsed .nav-badge { opacity: 0; pointer-events: none; }

.tooltip {
  position: absolute;
  left: calc(100% + 14px);
  top: 50%;
  transform: translateY(-50%) translateX(-6px);
  background: #1E2027;
  border: 1px solid rgba(255,255,255,0.1);
  color: #E2E8F0;
  font-size: 12px;
  font-weight: 500;
  padding: 6px 12px;
  border-radius: 8px;
  white-space: nowrap;
  pointer-events: none;
  opacity: 0;
  transition: opacity 0.18s ease, transform 0.18s ease;
  box-shadow: 0 8px 24px rgba(0,0,0,0.4);
  z-index: 999;
}

.tooltip::before {
  content: '';
  position: absolute;
  right: 100%;
  top: 50%;
  transform: translateY(-50%);
  border: 5px solid transparent;
  border-right-color: rgba(255,255,255,0.1);
}

.tooltip::after {
  content: '';
  position: absolute;
  right: calc(100% - 1px);
  top: 50%;
  transform: translateY(-50%);
  border: 5px solid transparent;
  border-right-color: #1E2027;
}

.sidebar.collapsed .nav-item:hover .tooltip { opacity: 1; transform: translateY(-50%) translateX(0); }

.nav-divider { height: 1px; background: var(--bg-sidebar-border); margin: 6px 10px; border: none; }

/* FOOTER */
.sidebar-footer {
  padding: 12px 10px;
  border-top: 1px solid var(--bg-sidebar-border);
  overflow: hidden;
  flex-shrink: 0;
}

.wallet-connect-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  width: 100%;
  padding: 10px 14px;
  border-radius: 10px;
  border: none;
  cursor: pointer;
  font-family: 'Syne', sans-serif;
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  background: linear-gradient(135deg, #0EA5E9 0%, #38BDF8 55%, #7dd3fc 100%);
  color: #0a1628;
  box-shadow: 0 4px 14px rgba(14,165,233,0.3);
  position: relative;
  overflow: hidden;
  transition: transform 0.18s, box-shadow 0.18s;
}

.wallet-connect-btn::before {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(135deg, rgba(255,255,255,0.18) 0%, transparent 55%);
  border-radius: inherit;
}

/* Deep theme-aware glow pooled under the CTA. Starts soft, brightens
   on hover. Uses accent-glow so cyber/gold both get the right
   tint without extra selectors. */
.wallet-connect-btn::after {
  content: '';
  position: absolute;
  left: 50%;
  bottom: -60%;
  width: 160%;
  height: 180%;
  transform: translateX(-50%);
  background: radial-gradient(ellipse at center, var(--accent-glow, rgba(14,165,233,0.35)) 0%, transparent 60%);
  opacity: 0.55;
  filter: blur(14px);
  pointer-events: none;
  transition: opacity 0.3s, transform 0.3s;
  z-index: 0;
}
.wallet-connect-btn:hover::after { opacity: 0.95; transform: translateX(-50%) scale(1.05); }

.wallet-connect-btn:hover { transform: translateY(-1px); box-shadow: 0 6px 20px rgba(14,165,233,0.45); }
.wallet-connect-btn span, .wallet-connect-btn svg { position: relative; z-index: 1; }

.sidebar.collapsed .wallet-connect-btn span { display: none; }
.sidebar.collapsed .wallet-connect-btn { padding: 10px; justify-content: center; }

.user-block {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px;
  border-radius: 10px;
  cursor: pointer;
  transition: background 0.2s;
  min-width: 0;
  position: relative;
}

.user-block:hover { background: var(--bg-hover); }

.avatar {
  width: 34px;
  height: 34px;
  border-radius: 9px;
  background: linear-gradient(135deg, #1a2535 0%, #0f1825 100%);
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  border: 1px solid rgba(56,189,248,0.22);
  color: var(--accent);
  position: relative;
}

.avatar-status {
  position: absolute;
  bottom: -2px;
  right: -2px;
  width: 9px;
  height: 9px;
  border-radius: 50%;
  background: #22C55E;
  border: 2px solid var(--bg-sidebar);
}

.user-info { min-width: 0; overflow: hidden; transition: opacity 0.2s var(--transition); flex: 1; }
.sidebar.collapsed .user-info { opacity: 0; pointer-events: none; }

.wallet-addr {
  font-family: 'JetBrains Mono', monospace;
  font-size: 11px;
  font-weight: 500;
  color: #94A3B8;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  line-height: 1.3;
}

.wallet-status {
  font-size: 10px;
  color: var(--text-idle);
  margin-top: 2px;
  white-space: nowrap;
  display: flex;
  align-items: center;
  gap: 4px;
}

.wallet-dot { width: 5px; height: 5px; border-radius: 50%; background: #22C55E; flex-shrink: 0; }

.disconnect-btn {
  width: 26px;
  height: 26px;
  border-radius: 7px;
  background: transparent;
  border: none;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--text-idle);
  flex-shrink: 0;
  opacity: 0;
  transition: opacity 0.2s var(--transition), background 0.2s, color 0.2s;
}

.user-block:hover .disconnect-btn { opacity: 1; background: rgba(255,255,255,0.06); color: #F87171; }
.sidebar.collapsed .disconnect-btn { display: none; }

/* Touch devices have no hover — keep the logout button always visible.
   Uses `(hover: none)` media so this applies to phones/tablets, not to
   a narrow desktop window resized by the user. */
@media (hover: none) {
  .disconnect-btn { opacity: 1; color: #F87171; }
}

/* MAIN */
.main {
  flex: 1;
  padding: 36px 44px;
  display: flex;
  flex-direction: column;
  gap: 28px;
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
  overscroll-behavior-y: contain;
  position: relative;
  z-index: 1;
  /* On iOS Safari the momentum-scroll inside `.main` sometimes stalls
     after a rubber-band bounce; a tiny transform promotes it to its
     own composited layer which restores the touch events reliably. */
  transform: translateZ(0);
}

.main-header { display: flex; flex-direction: column; gap: 6px; }

.breadcrumb {
  font-family: 'JetBrains Mono', monospace;
  font-size: 10.5px;
  color: var(--text-idle);
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.page-title { font-size: 26px; font-weight: 700; color: #F1F5F9; letter-spacing: -0.02em; }

.section-bar { display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap; }
.section-title { font-family: 'JetBrains Mono', monospace; font-size: 10.5px; letter-spacing: 0.1em; text-transform: uppercase; color: var(--text-idle); }
.section-badge { background: rgba(56,189,248,0.1); color: var(--accent); font-family: 'JetBrains Mono', monospace; font-size: 10px; padding: 2px 10px; border-radius: 20px; border: 1px solid rgba(56,189,248,0.2); }

.btn-mint-top {
  display: flex;
  align-items: center;
  gap: 7px;
  padding: 9px 20px;
  border-radius: 10px;
  border: none;
  cursor: pointer;
  font-family: 'Syne', sans-serif;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  background: linear-gradient(135deg, #0EA5E9 0%, #38BDF8 55%, #7dd3fc 100%);
  color: #0a1628;
  box-shadow: 0 4px 18px rgba(14,165,233,0.35);
  position: relative;
  overflow: hidden;
  transition: transform 0.18s, box-shadow 0.18s;
}

.btn-mint-top::before {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(135deg, rgba(255,255,255,0.2) 0%, transparent 55%);
  border-radius: inherit;
}

.btn-mint-top:hover { transform: translateY(-2px); box-shadow: 0 7px 24px rgba(14,165,233,0.52); }
.btn-mint-top:active { transform: translateY(0); }
.btn-mint-top svg, .btn-mint-top span { position: relative; z-index: 1; }

@keyframes shimmer {
  0% { transform: translateX(-100%) skewX(-12deg); }
  100% { transform: translateX(300%) skewX(-12deg); }
}

.shimmer {
  position: absolute;
  top: 0;
  left: 0;
  width: 40%;
  height: 100%;
  background: linear-gradient(to right, transparent, rgba(255,255,255,0.28), transparent);
  animation: shimmer 0.6s ease forwards;
  pointer-events: none;
}

.numbers-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(230px, 1fr)); gap: 12px; }

/* Dashboard two-column layout */
.dash-layout { display: grid; grid-template-columns: 1fr 340px; gap: 16px; align-items: start; }
.dash-codes-panel { position: sticky; top: 16px; }

/* Контейнер всплывающего уведомления нового кода. Fixed top-right,
   вне mainContent, поэтому renderPage не пересоздаёт его при
   polling-tick / смене секции. Сам `.latest-code-alert` всегда
   вставляется только сюда. */
#latestCodeToastRoot {
  position: fixed;
  top: 18px;
  right: 18px;
  left: auto;
  width: min(520px, calc(100vw - 36px));
  z-index: 900;
  pointer-events: none;
}
#latestCodeToastRoot .latest-code-alert {
  pointer-events: auto;
  margin-bottom: 0;
  box-shadow: 0 20px 48px rgba(0,0,0,0.5), 0 0 0 1px rgba(255,255,255,0.02) inset;
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
}

/* Latest code alert */
.latest-code-alert {
  background: linear-gradient(135deg, rgba(56,189,248,0.12) 0%, rgba(15,19,26,0.94) 100%);
  border: 1px solid rgba(56,189,248,0.25);
  border-radius: 14px;
  padding: 16px 20px;
  margin-bottom: 16px;
  display: flex;
  align-items: center;
  gap: 16px;
  animation: alertSlideIn 0.4s ease-out;
  /* V7: dismiss support (× button + Esc + auto-hide) */
  position: relative;
  overflow: hidden;
}
.latest-code-alert.is-dismissing {
  transition: transform 0.32s cubic-bezier(0.22, 1, 0.36, 1), opacity 0.28s ease, height 0.28s ease, margin 0.28s ease, padding 0.28s ease;
  transform: translateX(-110%) rotate(-4deg);
  opacity: 0;
  height: 0 !important;
  padding-top: 0 !important;
  padding-bottom: 0 !important;
  margin-bottom: 0 !important;
  border-width: 0 !important;
}
.latest-code-alert .lca-actions {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-shrink: 0;
}
.latest-code-alert .lca-dismiss {
  width: 30px; height: 30px;
  border-radius: 8px;
  background: rgba(255,255,255,0.04);
  border: 1px solid rgba(255,255,255,0.08);
  color: var(--text-idle);
  cursor: pointer;
  display: flex; align-items: center; justify-content: center;
  transition: background 0.18s, color 0.18s, transform 0.15s;
}
.latest-code-alert .lca-dismiss:hover {
  background: rgba(255,255,255,0.08);
  color: var(--text-hover);
  transform: rotate(90deg);
}
.latest-code-alert .lca-progress {
  position: absolute; left: 0; right: 0; bottom: 0;
  height: 2px; pointer-events: none;
  background: rgba(255,255,255,0.04);
  opacity: 0;
  transition: opacity 0.2s;
}
.latest-code-alert.is-counting-down .lca-progress {
  opacity: 1;
}
.latest-code-alert .lca-progress-bar {
  display: block; height: 100%;
  width: 100%;
  background: linear-gradient(90deg, #38BDF8, #0EA5E9);
  border-radius: 0 2px 2px 0;
}
.latest-code-alert .lca-pulse {
  width: 10px; height: 10px; border-radius: 50%;
  background: #38BDF8;
  box-shadow: 0 0 12px rgba(56,189,248,0.6);
  animation: lcaPulse var(--anim-pulse) infinite;
  flex-shrink: 0;
}
.latest-code-alert .lca-body { flex: 1; min-width: 0; }
.latest-code-alert .lca-label { font-size: 10px; text-transform: uppercase; letter-spacing: 0.1em; color: #38BDF8; font-weight: 600; margin-bottom: 4px; }
.latest-code-alert .lca-code {
  font-family: 'JetBrains Mono', monospace;
  font-size: 28px; font-weight: 700; letter-spacing: 0.15em;
  background: linear-gradient(135deg, #ffffff 0%, #38BDF8 60%, #7dd3fc 100%);
  -webkit-background-clip: text; -webkit-text-fill-color: transparent;
  background-clip: text;
}
.latest-code-alert .lca-meta { font-size: 11px; color: var(--text-idle); margin-top: 4px; }
.latest-code-alert .lca-copy {
  padding: 8px 16px; border-radius: 8px; font-size: 11px; font-weight: 600;
  background: rgba(56,189,248,0.12); border: 1px solid rgba(56,189,248,0.3);
  color: #38BDF8; cursor: pointer; transition: all 0.2s; white-space: nowrap;
}
.latest-code-alert .lca-copy:hover { background: rgba(56,189,248,0.2); border-color: rgba(56,189,248,0.5); }

/* Morse-code style pulse: three short blinks, one long, replayed
   while waiting for an SMS. Used via <span class="sms-morse"></span>
   in place of a generic spinner. Theme-colour via currentColor so
   cyber/gold skin it automatically. */
.sms-morse {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  color: var(--accent);
  vertical-align: middle;
}
.sms-morse i {
  display: inline-block;
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: currentColor;
  opacity: 0.25;
  animation: smsMorse 2.4s infinite;
}
.sms-morse i:nth-child(1) { animation-delay: 0s; }
.sms-morse i:nth-child(2) { animation-delay: 0.18s; }
.sms-morse i:nth-child(3) { animation-delay: 0.36s; }
.sms-morse i.long {
  width: 18px;
  border-radius: 3px;
  animation-name: smsMorseLong;
  animation-delay: 0.6s;
}
@keyframes smsMorse {
  0%, 18%, 100% { opacity: 0.25; box-shadow: none; }
  9% { opacity: 1; box-shadow: 0 0 8px currentColor; }
}
@keyframes smsMorseLong {
  0%, 35%, 100% { opacity: 0.25; box-shadow: none; }
  15% { opacity: 1; box-shadow: 0 0 10px currentColor; }
}

@keyframes lcaPulse {
  0%, 100% { box-shadow: 0 0 0 0 rgba(56,189,248,0.5); }
  50% { box-shadow: 0 0 0 8px rgba(56,189,248,0); }
}
@keyframes alertSlideIn {
  from { opacity: 0; transform: translateY(-8px); }
  to { opacity: 1; transform: translateY(0); }
}

/* New code highlight in list */
.sms-row.is-new {
  background: rgba(56,189,248,0.06);
  border-left: 3px solid #38BDF8;
  animation: newCodeFadeIn 0.5s ease-out;
}
.sms-row.is-new .sms-code {
  font-size: 22px;
  color: #7dd3fc;
}
@keyframes newCodeFadeIn {
  from { opacity: 0; transform: translateX(-6px); }
  to { opacity: 1; transform: translateX(0); }
}

@media (max-width: 900px) {
  .dash-layout { grid-template-columns: 1fr; }
  .dash-codes-panel { position: static; }
}

.number-card {
  background: #111318;
  border: 1px solid rgba(255,255,255,0.06);
  border-radius: var(--radius-card);
  padding: 18px;
  display: flex;
  flex-direction: column;
  gap: 14px;
  position: relative;
  /* GPU hints: hint the browser before hover fires so first tilt has
     no paint lag. transform-style preserves child 3D during rotate. */
  overflow: hidden;
  will-change: transform;
  transform-style: preserve-3d;
  perspective: 900px;
  transition: border-color 0.25s, transform 0.35s cubic-bezier(0.2, 0.8, 0.2, 1), box-shadow 0.25s;
}

/* 3D flip-lift on hover. Real tilt is handled by the JS mousemove
   tracker (see app.js); this is the baseline lift that kicks in for
   touch / no-JS so the card still feels dimensional.

   JS-driven tilt takes priority because it sets `style.transform`
   directly, winning specificity over the class. */
@media (hover: hover) and (pointer: fine) {
  .number-card:not(:hover) {
    transform: perspective(900px) rotateX(0) rotateY(0);
  }
}

.number-card:hover {
  border-color: rgba(56,189,248,0.28);
  box-shadow: 0 16px 36px -16px rgba(56,189,248,0.35), 0 4px 14px -6px rgba(0,0,0,0.6);
}
@media (prefers-reduced-motion: reduce) {
  .number-card { transition: border-color 0.25s; }
  .number-card:hover { transform: none !important; }
}

.number-card::before {
  content: '';
  position: absolute;
  top: 0;
  left: 20%;
  right: 20%;
  height: 1px;
  background: linear-gradient(to right, transparent, rgba(56,189,248,0.4), transparent);
  opacity: 0.5;
  transition: opacity 0.25s;
}

.number-card:hover::before { opacity: 1; }

.number-card::after {
  content: '';
  position: absolute;
  bottom: 0;
  right: 0;
  width: 60px;
  height: 60px;
  background: radial-gradient(circle at 100% 100%, rgba(56,189,248,0.05) 0%, transparent 65%);
}

.card-top { display: flex; align-items: center; justify-content: space-between; }

.card-status {
  display: flex;
  align-items: center;
  gap: 5px;
  font-family: 'JetBrains Mono', monospace;
  font-size: 10px;
  letter-spacing: 0.08em;
}

.card-status.active { color: #22C55E; }
.card-status.pending { color: #FBBF24; }
.card-status.minted { color: var(--accent); }

.status-dot { width: 6px; height: 6px; border-radius: 50%; flex-shrink: 0; }
.card-status.active .status-dot { background: #22C55E; animation: pulse-green var(--anim-pulse) infinite; }
.card-status.pending .status-dot { background: #FBBF24; }
.card-status.minted .status-dot { background: var(--accent); box-shadow: 0 0 6px var(--accent-glow); }

@keyframes pulse-green {
  0%, 100% { box-shadow: 0 0 0 0 rgba(34,197,94,0.5); }
  50% { box-shadow: 0 0 0 4px rgba(34,197,94,0); }
}

.card-flag { font-size: 15px; line-height: 1; }

.phone-number {
  font-family: 'JetBrains Mono', monospace;
  font-size: 17px;
  font-weight: 500;
  color: #E2E8F0;
  letter-spacing: 0.06em;
  line-height: 1;
}

.phone-number .sep { color: rgba(56,189,248,0.4); margin: 0 1px; }

.card-meta { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; }
.meta-tag {
  font-family: 'JetBrains Mono', monospace;
  /* Bumped 9px → 11px so "Phantom number" reads clearly under the
     centered phone number without overpowering it. */
  font-size: 11px;
  letter-spacing: 0.06em;
  padding: 3px 10px;
  border-radius: 5px;
  border: 1px solid;
}

.meta-tag.carrier { color: #94A3B8; border-color: rgba(148,163,184,0.2); background: rgba(148,163,184,0.05); }
.meta-tag.type { color: #A78BFA; border-color: rgba(167,139,250,0.2); background: rgba(167,139,250,0.05); }

.card-price-row { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.price-label { font-family: 'JetBrains Mono', monospace; font-size: 11px; color: var(--text-idle); }
.price-label span { color: #E2E8F0; font-size: 12px; font-weight: 500; }

/* Centered card layout (2026-04 tweak): phone number is hero-element,
   everything else (status badge, meta tag, copy button) aligns to it.
   Price and "Minted" pill removed — status badge already carries that
   info and the pill was duplicating it. */
.phone-number-centered { text-align: center; }
.card-meta-centered { justify-content: center; }
.card-copy-row {
  display: flex;
  justify-content: center;
  margin-top: 2px;
}
.card-copy-row .copy-number-btn {
  /* Wider tap-target on mobile (previously 24-30px tall under 480px) */
  min-width: 140px;
  min-height: 36px;
  padding: 8px 18px;
}

/* ─────────────── Genesis Collection supply counter (user-facing) ─────────────── */
.user-supply {
  margin-bottom: 18px;
  padding: 18px 20px;
  border: 1px solid rgba(56,189,248,0.22);
  border-radius: 14px;
  background:
    radial-gradient(400px circle at 0% 0%, rgba(56,189,248,0.08), transparent 55%),
    #111318;
  transition: border-color .3s, box-shadow .3s, opacity .3s;
}
.user-supply.rush {
  border-color: rgba(251,146,60,0.5);
  box-shadow: 0 12px 40px -18px rgba(251,146,60,0.55);
  animation: user-supply-pulse var(--anim-pulse) infinite;
}
.user-supply.sold-out { filter: grayscale(0.55); opacity: 0.8; }
@keyframes user-supply-pulse {
  0%,100% { box-shadow: 0 12px 40px -18px rgba(251,146,60,0.55); }
  50%     { box-shadow: 0 12px 50px -14px rgba(251,146,60,0.85); }
}
.user-supply-head { display:flex; align-items:center; gap:12px; margin-bottom:10px; flex-wrap:wrap; }
.user-supply-title {
  font-family: 'Syne', sans-serif; font-weight: 700; font-size: 13px;
  letter-spacing: 0.08em; text-transform: uppercase; color: #fff;
}
.user-supply-badge {
  padding: 3px 9px; border-radius: 10px;
  font-size: 10px; font-weight: 700; letter-spacing: 0.05em;
  text-transform: uppercase;
}
.user-supply-badge.rush {
  background: linear-gradient(135deg, #fdba74, #f97316 55%, #c2410c);
  color: #431407;
  box-shadow: inset 0 1px 0 rgba(255,255,255,0.4);
}
.user-supply-badge.sold-out {
  background: linear-gradient(135deg, #ef4444, #991b1b);
  color: #fff;
}
.user-supply-progress {
  height: 8px; border-radius: 999px;
  background: rgba(255,255,255,0.06); overflow: hidden;
}
.user-supply-progress-bar {
  height: 100%; border-radius: 999px;
  background: linear-gradient(90deg, #38bdf8, #7dd3fc, #38bdf8);
  background-size: 200% 100%;
  animation: user-supply-shimmer 3s linear infinite;
  transition: width .6s cubic-bezier(0.2, 0.8, 0.2, 1);
  box-shadow: 0 0 10px rgba(56,189,248,0.5);
}
.user-supply.rush .user-supply-progress-bar {
  background: linear-gradient(90deg, #f97316, #fdba74, #f97316);
  background-size: 200% 100%;
  box-shadow: 0 0 10px rgba(251,146,60,0.7);
}
@keyframes user-supply-shimmer {
  0% { background-position: 0% 0; }
  100% { background-position: 200% 0; }
}
.user-supply-stats {
  margin-top: 10px; font-family: 'JetBrains Mono', monospace;
  font-size: 18px; font-weight: 700; color: #fff;
  display: flex; align-items: baseline; gap: 6px; flex-wrap: wrap;
}
.user-supply-sep { color: var(--text-idle); font-weight: 400; }
.user-supply-pct { margin-left: auto; font-size: 12px; color: var(--text-idle); font-weight: 500; }

.minted-pill {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  font-family: 'JetBrains Mono', monospace;
  font-size: 10px;
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: #0b1220;
  padding: 3px 10px;
  border-radius: 20px;
  /* Glossy gradient + subtle highlight stripe (V5). Replaces the flat
     translucent cyan that read as "tag" rather than "achievement". */
  background:
    linear-gradient(180deg, rgba(255,255,255,0.35) 0%, rgba(255,255,255,0) 40%),
    linear-gradient(135deg, #7dd3fc 0%, #38BDF8 48%, #0891b2 100%);
  border: 1px solid rgba(125,211,252,0.55);
  box-shadow: 0 1px 2px rgba(8,145,178,0.35), inset 0 1px 0 rgba(255,255,255,0.45);
  text-shadow: 0 1px 0 rgba(255,255,255,0.25);
}

.empty-panel {
  background: #111318;
  border: 1px dashed rgba(255,255,255,0.09);
  border-radius: 14px;
  min-height: 160px;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-direction: column;
  gap: 10px;
  color: var(--text-idle);
  font-family: 'JetBrains Mono', monospace;
  font-size: 11px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

/* SMS */
.sms-block {
  background: #111318;
  border: 1px solid var(--bg-sidebar-border);
  border-radius: 16px;
  overflow: hidden;
}

.sms-block-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 16px 20px;
  border-bottom: 1px solid var(--bg-sidebar-border);
  gap: 12px;
  flex-wrap: wrap;
}

.sms-block-icon {
  width: 36px;
  height: 36px;
  border-radius: 10px;
  background: rgba(56,189,248,0.08);
  border: 1px solid rgba(56,189,248,0.18);
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--accent);
  flex-shrink: 0;
}

.sms-block-title { font-size: 14px; font-weight: 600; color: #E2E8F0; line-height: 1.2; }
.sms-block-sub { font-family: 'JetBrains Mono', monospace; font-size: 9.5px; color: var(--text-idle); letter-spacing: 0.08em; margin-top: 2px; }

.sms-number-select-wrap { position: relative; display: flex; align-items: center; }
.sms-select-arrow { position: absolute; right: 10px; pointer-events: none; color: var(--text-idle); z-index: 1; }

.sms-number-select {
  appearance: none;
  background: rgba(255,255,255,0.04);
  border: 1px solid rgba(255,255,255,0.08);
  border-radius: 9px;
  padding: 7px 34px 7px 12px;
  color: #E2E8F0;
  font-family: 'JetBrains Mono', monospace;
  font-size: 11px;
  letter-spacing: 0.04em;
  cursor: pointer;
  outline: none;
  transition: border-color 0.2s;
  min-width: 160px;
}

.sms-number-select:focus { border-color: rgba(56,189,248,0.35); }
.sms-number-select option { background: #1E2027; }

.sms-refresh-btn {
  width: 32px;
  height: 32px;
  border-radius: 8px;
  background: rgba(255,255,255,0.04);
  border: 1px solid rgba(255,255,255,0.08);
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  color: var(--text-idle);
  transition: background 0.15s, color 0.15s;
}

.sms-refresh-btn:hover { background: rgba(56,189,248,0.1); border-color: rgba(56,189,248,0.25); color: var(--accent); }

@keyframes spin { to { transform: rotate(360deg); } }
.sms-refresh-btn.spinning svg { animation: spin 0.7s linear; }

.sms-list {
  max-height: 420px;
  overflow-y: auto;
  scrollbar-width: thin;
  scrollbar-color: rgba(255,255,255,0.08) transparent;
}

.sms-list::-webkit-scrollbar { width: 4px; }
.sms-list::-webkit-scrollbar-track { background: transparent; }
.sms-list::-webkit-scrollbar-thumb { background: rgba(255,255,255,0.1); border-radius: 2px; }

.sms-date-group { padding: 14px 20px 6px; }
.sms-date-label {
  font-family: 'JetBrains Mono', monospace;
  font-size: 9.5px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: rgba(107,114,128,0.5);
}

.sms-row {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  padding: 16px 20px;
  position: relative;
  border-bottom: 1px solid rgba(255,255,255,0.04);
  cursor: pointer;
  transition: background 0.15s;
}

.sms-row:hover { background: rgba(255,255,255,0.025); }
.sms-row.unread { background: rgba(56,189,248,0.04); }
.sms-row.unread:hover { background: rgba(56,189,248,0.07); }
.sms-row:last-child { border-bottom: none; }

.sms-sender-icon {
  width: 38px;
  height: 38px;
  border-radius: 10px;
  background: rgba(56,189,248,0.09);
  border: 1px solid rgba(56,189,248,0.15);
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: 'Syne', sans-serif;
  font-size: 14px;
  font-weight: 700;
  color: var(--accent);
  flex-shrink: 0;
  text-transform: uppercase;
}

.sms-sender-icon[data-sender="G"] { background: rgba(234,67,53,0.1); border-color: rgba(234,67,53,0.2); color: #EA4335; }
.sms-sender-icon[data-sender="T"] { background: rgba(41,182,246,0.1); border-color: rgba(41,182,246,0.2); color: #29B6F6; }
.sms-sender-icon[data-sender="W"] { background: rgba(37,211,102,0.1); border-color: rgba(37,211,102,0.2); color: #25D366; }
.sms-sender-icon[data-sender="B"] { background: rgba(240,185,11,0.1); border-color: rgba(240,185,11,0.2); color: #F0B90B; }
.sms-sender-icon[data-sender="I"] { background: rgba(228,64,95,0.1); border-color: rgba(228,64,95,0.2); color: #E4405F; }
.sms-sender-icon[data-sender="A"] { background: rgba(148,163,184,0.1); border-color: rgba(148,163,184,0.2); color: #94A3B8; }
.sms-sender-icon[data-sender="M"] { background: rgba(14,165,233,0.1); border-color: rgba(14,165,233,0.2); color: #0EA5E9; }
.sms-sender-icon[data-sender="D"] { background: rgba(88,101,242,0.1); border-color: rgba(88,101,242,0.2); color: #5865F2; }
.sms-sender-icon[data-sender="C"] { background: rgba(22,82,240,0.1); border-color: rgba(22,82,240,0.2); color: #1652F0; }

.sms-row-body { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 5px; }
.sms-row-top { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.sms-row-info { display: flex; align-items: center; gap: 8px; min-width: 0; }
.sms-sender { font-size: 13px; font-weight: 600; color: #D1D5DB; }

.sms-number-tag {
  font-family: 'JetBrains Mono', monospace;
  font-size: 10px;
  color: var(--text-idle);
  background: rgba(255,255,255,0.04);
  border: 1px solid rgba(255,255,255,0.07);
  border-radius: 4px;
  padding: 1px 6px;
  white-space: nowrap;
}

.sms-time { font-family: 'JetBrains Mono', monospace; font-size: 10px; color: var(--text-idle); flex-shrink: 0; }
.sms-code-line { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }

.sms-code {
  font-family: 'JetBrains Mono', monospace;
  font-size: 22px;
  font-weight: 500;
  color: #F1F5F9;
  letter-spacing: 0.12em;
  line-height: 1;
}

.sms-row.unread .sms-code {
  color: #7dd3fc;
}

.sms-copy-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  font-family: 'JetBrains Mono', monospace;
  font-size: 12px;
  font-weight: 500;
  letter-spacing: 0.06em;
  color: var(--accent);
  background: rgba(56,189,248,0.08);
  border: 1px solid rgba(56,189,248,0.2);
  border-radius: 8px;
  padding: 8px 16px;
  cursor: pointer;
  transition: background 0.15s, color 0.15s, border-color 0.15s, transform 0.1s;
  white-space: nowrap;
  min-height: 44px;
  min-width: 44px;
  touch-action: manipulation;
}

.sms-copy-btn:hover { background: rgba(56,189,248,0.15); color: #7dd3fc; border-color: rgba(56,189,248,0.35); transform: translateY(-1px); }
.sms-copy-btn:active { transform: translateY(0); }

.sms-text {
  font-size: 11.5px;
  color: var(--text-idle);
  line-height: 1.5;
  overflow: hidden;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
}

.sms-unread-dot {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--accent);
  box-shadow: 0 0 8px var(--accent-glow);
  flex-shrink: 0;
  margin-top: 4px;
}

.sms-empty {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 10px;
  padding: 48px 20px;
}

.sms-empty span { font-family: 'JetBrains Mono', monospace; font-size: 11px; color: var(--text-idle); letter-spacing: 0.08em; }

.sms-block-footer {
  position: sticky;
  bottom: 0;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 10px 20px;
  border-top: 1px solid var(--bg-sidebar-border);
  background: rgba(20,22,28,0.92);
  backdrop-filter: blur(6px);
  z-index: 2;
}

.sms-footer-text { font-family: 'JetBrains Mono', monospace; font-size: 10px; color: var(--text-idle); }

.sms-clear-btn {
  font-family: 'JetBrains Mono', monospace;
  font-size: 10px;
  letter-spacing: 0.06em;
  color: var(--text-idle);
  background: transparent;
  border: none;
  cursor: pointer;
  padding: 2px 0;
  transition: color 0.15s;
  text-decoration: underline;
  text-decoration-color: transparent;
  text-underline-offset: 3px;
}

.sms-clear-btn:hover { color: #F87171; text-decoration-color: rgba(248,113,113,0.4); }

/* SUPPORT */
.support-layout { display: flex; gap: 20px; height: calc(100vh - 160px); }

.tickets-panel {
  width: 320px;
  flex-shrink: 0;
  background: #111318;
  border: 1px solid var(--bg-sidebar-border);
  border-radius: 14px;
  display: flex;
  flex-direction: column;
  overflow: hidden;
}

.tickets-panel-header {
  padding: 16px 18px;
  border-bottom: 1px solid var(--bg-sidebar-border);
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.tickets-panel-title { font-size: 13px; font-weight: 600; color: #E2E8F0; }

.btn-new-ticket {
  display: flex;
  align-items: center;
  gap: 5px;
  padding: 6px 12px;
  border-radius: 7px;
  border: none;
  cursor: pointer;
  font-family: 'Syne', sans-serif;
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  background: linear-gradient(135deg, #0EA5E9 0%, #38BDF8 100%);
  color: #0a1628;
  box-shadow: 0 2px 10px rgba(14,165,233,0.25);
  transition: transform 0.15s, box-shadow 0.15s;
}

.btn-new-ticket:hover { transform: translateY(-1px); box-shadow: 0 4px 14px rgba(14,165,233,0.4); }

.tickets-filter {
  display: flex;
  gap: 6px;
  padding: 10px 14px;
  border-bottom: 1px solid var(--bg-sidebar-border);
}

.filter-btn {
  font-family: 'JetBrains Mono', monospace;
  font-size: 10px;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  padding: 4px 10px;
  border-radius: 6px;
  border: 1px solid;
  cursor: pointer;
  transition: all 0.15s;
  border-color: rgba(255,255,255,0.08);
  background: transparent;
  color: var(--text-idle);
}

.filter-btn.active { background: rgba(56,189,248,0.12); border-color: rgba(56,189,248,0.3); color: var(--text-active); }
.filter-btn:not(.active):hover { background: var(--bg-hover); color: var(--text-hover); }

.tickets-list { flex: 1; overflow-y: auto; padding: 8px; display: flex; flex-direction: column; gap: 4px; }
.tickets-list::-webkit-scrollbar { width: 4px; }
.tickets-list::-webkit-scrollbar-track { background: transparent; }
.tickets-list::-webkit-scrollbar-thumb { background: rgba(255,255,255,0.1); border-radius: 2px; }

.ticket-row {
  padding: 12px 12px;
  border-radius: 10px;
  cursor: pointer;
  border: 1px solid transparent;
  transition: background 0.15s, border-color 0.15s;
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.ticket-row:hover { background: var(--bg-hover); }
.ticket-row.selected { background: var(--bg-active); border-color: rgba(56,189,248,0.2); }

.ticket-row-top { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.ticket-id { font-family: 'JetBrains Mono', monospace; font-size: 9.5px; color: var(--text-idle); letter-spacing: 0.08em; }
.ticket-date { font-family: 'JetBrains Mono', monospace; font-size: 9px; color: var(--text-idle); flex-shrink: 0; }
.ticket-subject { font-size: 12.5px; font-weight: 500; color: #C8D6E5; line-height: 1.3; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ticket-preview { font-size: 11px; color: var(--text-idle); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ticket-row-bottom { display: flex; align-items: center; gap: 6px; }

.ticket-badge {
  font-family: 'JetBrains Mono', monospace;
  font-size: 9px;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  padding: 2px 7px;
  border-radius: 4px;
  border: 1px solid;
}

.ticket-badge.open { color: #22C55E; border-color: rgba(34,197,94,0.25); background: rgba(34,197,94,0.08); }
.ticket-badge.pending { color: #FBBF24; border-color: rgba(251,191,36,0.25); background: rgba(251,191,36,0.08); }
.ticket-badge.closed { color: var(--text-idle); border-color: rgba(107,114,128,0.25); background: rgba(107,114,128,0.06); }
.ticket-badge.priority-high { color: #F87171; border-color: rgba(248,113,113,0.25); background: rgba(248,113,113,0.08); }

.ticket-detail {
  flex: 1;
  background: #111318;
  border: 1px solid var(--bg-sidebar-border);
  border-radius: 14px;
  display: flex;
  flex-direction: column;
  overflow: hidden;
}

.ticket-detail.empty { align-items: center; justify-content: center; }
.ticket-empty-state { display: flex; flex-direction: column; align-items: center; gap: 12px; }
.ticket-empty-icon { color: rgba(56,189,248,0.25); }
.ticket-empty-text { font-family: 'JetBrains Mono', monospace; font-size: 11px; color: var(--text-idle); letter-spacing: 0.08em; }

.ticket-detail-header {
  padding: 18px 20px;
  border-bottom: 1px solid var(--bg-sidebar-border);
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.detail-header-top { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.detail-subject { font-size: 15px; font-weight: 600; color: #E2E8F0; line-height: 1.3; }
.detail-meta { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.detail-meta-item { font-family: 'JetBrains Mono', monospace; font-size: 10px; color: var(--text-idle); }
.detail-meta-item span { color: #94A3B8; }

.ticket-messages { flex: 1; overflow-y: auto; padding: 16px 20px; display: flex; flex-direction: column; gap: 14px; }
.ticket-messages::-webkit-scrollbar { width: 4px; }
.ticket-messages::-webkit-scrollbar-track { background: transparent; }
.ticket-messages::-webkit-scrollbar-thumb { background: rgba(255,255,255,0.1); border-radius: 2px; }

.msg-wrap { display: flex; flex-direction: column; gap: 4px; max-width: 80%; }
.msg-wrap.user { align-self: flex-end; align-items: flex-end; }
.msg-wrap.support { align-self: flex-start; align-items: flex-start; }
.msg-from { font-family: 'JetBrains Mono', monospace; font-size: 9.5px; color: var(--text-idle); letter-spacing: 0.06em; }

.msg-bubble {
  padding: 10px 14px;
  border-radius: 12px;
  font-size: 13px;
  line-height: 1.5;
  color: #D1D5DB;
}

.msg-wrap.user .msg-bubble { background: rgba(56,189,248,0.12); border: 1px solid rgba(56,189,248,0.18); border-bottom-right-radius: 4px; }
.msg-wrap.support .msg-bubble { background: rgba(255,255,255,0.04); border: 1px solid rgba(255,255,255,0.07); border-bottom-left-radius: 4px; }

.msg-time { font-family: 'JetBrains Mono', monospace; font-size: 9px; color: rgba(107,114,128,0.6); }

.system-msg {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 8px 12px;
  border-radius: 8px;
  background: rgba(56,189,248,0.05);
  border: 1px solid rgba(56,189,248,0.1);
  font-family: 'JetBrains Mono', monospace;
  font-size: 10.5px;
  color: var(--text-idle);
  align-self: center;
  max-width: 90%;
}

.ticket-reply {
  padding: 14px 18px;
  border-top: 1px solid var(--bg-sidebar-border);
  display: flex;
  gap: 10px;
  align-items: flex-end;
}

.reply-input {
  flex: 1;
  background: rgba(255,255,255,0.04);
  border: 1px solid rgba(255,255,255,0.08);
  border-radius: 10px;
  padding: 10px 14px;
  color: #E2E8F0;
  font-family: 'Syne', sans-serif;
  font-size: 13px;
  resize: none;
  min-height: 44px;
  max-height: 120px;
  outline: none;
  transition: border-color 0.2s;
}

.reply-input:focus { border-color: rgba(56,189,248,0.3); }
.reply-input::placeholder { color: var(--text-idle); }

.reply-send {
  width: 40px;
  height: 40px;
  border-radius: 10px;
  border: none;
  cursor: pointer;
  background: linear-gradient(135deg, #0EA5E9 0%, #38BDF8 100%);
  color: #0a1628;
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 3px 12px rgba(14,165,233,0.3);
  flex-shrink: 0;
  transition: transform 0.15s, box-shadow 0.15s;
}

.reply-send:hover { transform: translateY(-1px) scale(1.05); box-shadow: 0 5px 16px rgba(14,165,233,0.45); }

/* MODAL */
.modal-overlay {
  display: none;
  position: fixed;
  inset: 0;
  z-index: 1000;
  background: rgba(0,0,0,0.7);
  backdrop-filter: blur(4px);
  align-items: center;
  justify-content: center;
  /* iOS: prevent momentum-scroll bounce bleeding through the backdrop
     when body-scroll-lock is active. overscroll-behavior stops the
     inertial scroll from reaching the document. */
  overflow: hidden;
  overscroll-behavior: contain;
  touch-action: none;
}

.modal-overlay.open { display: flex; }
.modal-overlay > * { touch-action: auto; }

.modal {
  background: #15181F;
  border: 1px solid rgba(255,255,255,0.1);
  border-radius: 16px;
  padding: 28px;
  width: 480px;
  max-width: 95vw;
  box-shadow: 0 24px 80px rgba(0,0,0,0.6);
  animation: modal-in 0.25s var(--transition);
}

@keyframes modal-in { from { opacity: 0; transform: translateY(16px) scale(0.97); } to { opacity: 1; transform: none; } }

.modal-header { display: flex; align-items: center; justify-content: space-between; margin-bottom: 22px; }
.modal-title { font-size: 16px; font-weight: 700; color: #E2E8F0; }

.modal-close {
  width: 28px;
  height: 28px;
  border-radius: 7px;
  background: rgba(255,255,255,0.06);
  border: 1px solid rgba(255,255,255,0.1);
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--text-idle);
  transition: background 0.15s, color 0.15s;
}

.modal-close:hover { background: rgba(248,113,113,0.15); color: #F87171; border-color: rgba(248,113,113,0.25); }

.form-field { display: flex; flex-direction: column; gap: 6px; margin-bottom: 16px; }
.form-label { font-family: 'JetBrains Mono', monospace; font-size: 10px; letter-spacing: 0.12em; text-transform: uppercase; color: var(--text-idle); }

.form-input, .form-select, .form-textarea {
  background: rgba(255,255,255,0.04);
  border: 1px solid rgba(255,255,255,0.08);
  border-radius: 9px;
  padding: 10px 14px;
  color: #E2E8F0;
  font-family: 'Syne', sans-serif;
  font-size: 13px;
  outline: none;
  transition: border-color 0.2s;
  width: 100%;
}

/* iOS auto-zooms inputs with font-size < 16px on focus; bump on mobile to
   keep the viewport stable. Touch-action manipulation kills the 300ms
   tap delay on older iOS Safari too. */
@media (max-width: 480px) {
  .form-input, .form-select, .form-textarea, input[type="text"], input[type="tel"], input[type="email"], input[type="password"], input[type="number"] {
    font-size: 16px;
  }
  .code-input {
    font-size: 22px;
  }
}

.form-input:focus, .form-select:focus, .form-textarea:focus { border-color: rgba(56,189,248,0.35); }
.form-input::placeholder, .form-textarea::placeholder { color: var(--text-idle); }
.form-select {
  appearance: none;
  -webkit-appearance: none;
  -moz-appearance: none;
  cursor: pointer;
  /* Custom caret — keeps dark theme consistent across browsers. */
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath fill='%23a1a8b3' d='M6 8 0 0h12z'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 14px center;
  background-size: 10px 7px;
  padding-right: 36px;
}
.form-select option { background: #1A1C22; color: #E2E8F0; }
.form-textarea { resize: vertical; min-height: 80px; }

.form-row { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }

.btn-submit {
  width: 100%;
  padding: 12px;
  border-radius: 10px;
  border: none;
  cursor: pointer;
  font-family: 'Syne', sans-serif;
  font-size: 13px;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  background: linear-gradient(135deg, #0EA5E9 0%, #38BDF8 55%, #7dd3fc 100%);
  color: #0a1628;
  box-shadow: 0 4px 16px rgba(14,165,233,0.35);
  transition: transform 0.15s, box-shadow 0.15s;
  margin-top: 4px;
  position: relative;
  overflow: hidden;
}

.btn-submit::before {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(135deg, rgba(255,255,255,0.18) 0%, transparent 55%);
}

.btn-submit:hover { transform: translateY(-1px); box-shadow: 0 6px 20px rgba(14,165,233,0.5); }

/* GENERIC PANELS */
.data-panel {
  background: #111318;
  border: 1px solid var(--bg-sidebar-border);
  border-radius: 14px;
  padding: 20px;
}

.panel-title { font-size: 15px; font-weight: 600; margin-bottom: 12px; color: #E2E8F0; }

.mono-label {
  font-family: 'JetBrains Mono', monospace;
  font-size: 10px;
  letter-spacing: 0.08em;
  color: var(--text-idle);
  text-transform: uppercase;
}

.table-list {
  display: grid;
  gap: 10px;
}

.table-row {
  display: grid;
  grid-template-columns: 1.3fr 1fr 1fr 1fr;
  gap: 10px;
  align-items: center;
  background: rgba(255,255,255,0.02);
  border: 1px solid rgba(255,255,255,0.06);
  border-radius: 10px;
  padding: 10px 12px;
}

.table-row.header {
  background: transparent;
  border: none;
  padding: 0 2px;
}

.row-number { font-family: 'JetBrains Mono', monospace; font-size: 12px; color: #E2E8F0; }

.admin-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 16px;
}

/* Admin Tabs */
.admin-tabs {
  display: flex;
  flex-wrap: wrap;
  gap: 3px;
  background: rgba(255,255,255,0.03);
  border: 1px solid rgba(255,255,255,0.06);
  border-radius: 12px;
  padding: 5px;
  margin-bottom: 20px;
}
.admin-tab {
  padding: 8px 14px;
  border-radius: 9px;
  font-size: 12px;
  font-weight: 500;
  color: var(--text-idle);
  cursor: pointer;
  white-space: nowrap;
  transition: all 0.2s;
  border: 1px solid transparent;
  background: transparent;
  display: flex;
  align-items: center;
  gap: 6px;
}
.admin-tab:hover { color: var(--text-hover); background: rgba(255,255,255,0.04); }
.admin-tab.active {
  color: var(--text-active);
  background: rgba(56,189,248,0.08);
  border-color: rgba(56,189,248,0.2);
  box-shadow: 0 0 12px rgba(56,189,248,0.06);
}
.admin-tab svg { width: 14px; height: 14px; flex-shrink: 0; }
.admin-tab-content { display: none; animation: fadeIn 0.2s ease; }
.admin-tab-content.active { display: block; }
@keyframes fadeIn { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: none; } }

.admin-stats-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(160px, 1fr));
  gap: 12px;
  margin-bottom: 20px;
}
.admin-stat-card {
  padding: 16px;
  border-radius: 12px;
  background: rgba(255,255,255,0.03);
  border: 1px solid rgba(255,255,255,0.06);
  text-align: center;
  transition: border-color 0.2s;
}
.admin-stat-card:hover { border-color: rgba(56,189,248,0.15); }
.admin-stat-value {
  font-family: 'JetBrains Mono', monospace;
  font-size: 24px;
  font-weight: 700;
  color: var(--accent);
  line-height: 1;
}
.admin-stat-label {
  font-size: 10px;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--text-idle);
  margin-top: 6px;
  font-family: 'JetBrains Mono', monospace;
}
.admin-stat-sub {
  font-size: 10px;
  color: rgba(148,163,184,0.6);
  margin-top: 3px;
}
.admin-stat-card.success .admin-stat-value { color: var(--success); }
.admin-stat-card.warning .admin-stat-value { color: var(--warning); }
.admin-stat-card.danger .admin-stat-value { color: #F87171; }

.admin-chart-wrap {
  background: rgba(255,255,255,0.03);
  border: 1px solid rgba(255,255,255,0.06);
  border-radius: 12px;
  padding: 20px;
  margin-bottom: 20px;
}

.inline-form { display: flex; gap: 10px; flex-wrap: wrap; }

.input {
  flex: 1;
  min-width: 190px;
  padding: 11px 14px;
  border-radius: 10px;
  border: 1px solid rgba(255,255,255,0.1);
  background: rgba(255,255,255,0.04);
  color: #E2E8F0;
  font-family: 'JetBrains Mono', monospace;
  outline: none;
}

.input:focus { border-color: rgba(56,189,248,0.35); }

.input[type="number"] { font-family: 'Syne', sans-serif; }

.btn {
  padding: 10px 14px;
  border-radius: 10px;
  border: none;
  cursor: pointer;
  font-weight: 600;
  font-size: 12px;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  transition: transform 0.15s, box-shadow 0.15s;
}

.btn-primary {
  background: linear-gradient(135deg, #0EA5E9 0%, #38BDF8 100%);
  color: #0a1628;
  box-shadow: 0 3px 12px rgba(14,165,233,0.3);
  position: relative;
  overflow: visible;
}

/* Deep glow pool under primary buttons. Same trick as wallet-connect
   but subtler so normal page buttons don't steal focus. */
.btn-primary::after {
  content: '';
  position: absolute;
  left: 10%;
  right: 10%;
  bottom: -40%;
  height: 80%;
  background: radial-gradient(ellipse at center, var(--accent-glow, rgba(14,165,233,0.3)) 0%, transparent 70%);
  opacity: 0.5;
  filter: blur(10px);
  pointer-events: none;
  transition: opacity 0.25s;
  z-index: -1;
}
.btn-primary:hover::after { opacity: 1; }

.btn-secondary {
  background: rgba(255,255,255,0.04);
  border: 1px solid rgba(255,255,255,0.1);
  color: #E2E8F0;
}

.btn-danger {
  background: rgba(248,113,113,0.1);
  border: 1px solid rgba(248,113,113,0.25);
  color: #F87171;
}

.btn:hover { transform: translateY(-1px); }

.hint { font-size: 11px; color: var(--text-idle); margin-top: 8px; line-height: 1.4; }

.api-list { display: grid; gap: 8px; margin-top: 12px; }

.api-row {
  font-family: 'JetBrains Mono', monospace;
  font-size: 11px;
  color: #CBD5E1;
  background: rgba(255,255,255,0.02);
  border: 1px solid rgba(255,255,255,0.06);
  border-radius: 8px;
  padding: 9px 12px;
}

.api-row span {
  color: #38BDF8;
  margin-right: 6px;
}

.link-row {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
}

.link-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  padding: 8px 12px;
  border-radius: 8px;
  font-size: 11px;
  font-family: 'JetBrains Mono', monospace;
  text-decoration: none;
  color: #94A3B8;
  border: 1px solid rgba(148,163,184,0.25);
  background: rgba(148,163,184,0.06);
}

.link-btn:hover { color: #E2E8F0; border-color: rgba(56,189,248,0.35); }

/* PAYMENT MODAL */
.payment-modal {
  position: fixed;
  inset: 0;
  display: none;
  align-items: center;
  justify-content: center;
  background: rgba(0, 0, 0, 0.75);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  z-index: 2000;
  /* Honour iPhone notch + home indicator so the card isn't clipped. */
  padding: calc(16px + env(safe-area-inset-top, 0px)) 16px calc(16px + env(safe-area-inset-bottom, 0px)) 16px;
  overflow: hidden;
  overscroll-behavior: contain;
  touch-action: none;
}

.payment-modal.show { display: flex; }

.payment-card {
  width: 100%;
  max-width: 420px;
  background: #12151C;
  border: 1px solid rgba(56,189,248,0.12);
  border-radius: 20px;
  padding: 24px;
  /* Never taller than 90vh and never taller than 600px at the same
     time — fits even short landscape viewports on phones. */
  max-height: min(90vh, 600px);
  overflow-y: auto;
  overscroll-behavior: contain;
  touch-action: auto;
  animation: payCardIn 0.3s ease-out;
}
@keyframes payCardIn { from { opacity:0; transform: scale(0.95) translateY(10px); } to { opacity:1; transform: none; } }

.payment-title { font-size: 18px; font-weight: 700; margin-bottom: 16px; text-align: center; }

/* Progress Steps */
.pay-steps { display: flex; align-items: center; justify-content: center; gap: 0; margin-bottom: 20px; }
.pay-step { display: flex; flex-direction: column; align-items: center; gap: 6px; position: relative; z-index: 1; }
.pay-step-icon {
  width: 36px; height: 36px; border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  background: rgba(255,255,255,0.06); border: 2px solid rgba(255,255,255,0.1);
  color: #64748B; font-size: 14px; transition: all 0.4s ease;
}
.pay-step-label { font-size: 9px; text-transform: uppercase; letter-spacing: 0.08em; color: #475569; transition: color 0.4s; }
.pay-step-line { width: 48px; height: 2px; background: rgba(255,255,255,0.08); margin-bottom: 18px; transition: background 0.4s; }

.pay-step.active .pay-step-icon { border-color: #38BDF8; color: #38BDF8; background: rgba(56,189,248,0.1); box-shadow: 0 0 16px rgba(56,189,248,0.2); }
.pay-step.active .pay-step-label { color: #38BDF8; }
.pay-step-line.active { background: #38BDF8; }

.pay-step.done .pay-step-icon { border-color: #22C55E; color: #22C55E; background: rgba(34,197,94,0.1); box-shadow: 0 0 12px rgba(34,197,94,0.15); }
.pay-step.done .pay-step-label { color: #22C55E; }
.pay-step-line.done { background: #22C55E; }

/* Animated progress bar */
.pay-progress-wrap { height: 3px; background: rgba(255,255,255,0.06); border-radius: 2px; margin-bottom: 20px; overflow: hidden; }
.pay-progress-bar {
  height: 100%; width: 0; border-radius: 2px;
  background: linear-gradient(90deg, #38BDF8, #7dd3fc, #38BDF8);
  background-size: 200% 100%;
  animation: payProgressShimmer 1.5s linear infinite;
  transition: width 0.6s ease;
}
@keyframes payProgressShimmer { 0% { background-position: 200% 0; } 100% { background-position: -200% 0; } }

.pay-progress-bar.done {
  background: #22C55E;
  animation: none;
}

.payment-meta { font-family: 'JetBrains Mono', monospace; font-size: 11px; color: #94A3B8; line-height: 1.6; margin-bottom: 6px; }
.payment-status { font-size: 13px; color: #CBD5E1; margin-bottom: 16px; text-align: center; font-weight: 500; }

.payment-card img {
  width: 180px; height: 180px;
  border-radius: 12px; background: #ffffff;
  display: block; margin: 0 auto 16px;
  border: 3px solid rgba(56,189,248,0.15);
}

.payment-links { display: grid; gap: 8px; margin-bottom: 16px; }

.payment-link {
  display: inline-flex; align-items: center; justify-content: center;
  padding: 12px; border-radius: 12px; text-decoration: none;
  background: rgba(56,189,248,0.06); border: 1px solid rgba(56,189,248,0.15);
  color: #38BDF8; font-size: 13px; font-weight: 600;
  font-family: 'JetBrains Mono', monospace;
  transition: all 0.2s;
}
.payment-link:hover { background: rgba(56,189,248,0.12); border-color: rgba(56,189,248,0.3); }

.payment-note { font-size: 11px; color: var(--text-idle); margin-bottom: 16px; text-align: center; }

/* Success state */
.pay-success-overlay {
  display: flex; flex-direction: column; align-items: center; gap: 16px;
  padding: 24px 0; animation: paySuccessIn 0.5s ease-out;
}
@keyframes paySuccessIn { from { opacity:0; transform: scale(0.8); } to { opacity:1; transform: none; } }

.pay-success-check {
  width: 72px; height: 72px; border-radius: 50%;
  background: rgba(34,197,94,0.1); border: 3px solid #22C55E;
  display: flex; align-items: center; justify-content: center;
  box-shadow: 0 0 30px rgba(34,197,94,0.2);
}
.pay-success-check svg { animation: payCheckDraw 0.6s ease-out 0.2s both; }
@keyframes payCheckDraw { from { stroke-dashoffset: 30; opacity:0; } to { stroke-dashoffset: 0; opacity:1; } }

.pay-success-title { font-size: 20px; font-weight: 700; color: #22C55E; }
.pay-success-number {
  font-family: 'JetBrains Mono', monospace; font-size: 22px; font-weight: 600;
  color: #E2E8F0; letter-spacing: 0.1em;
}
.pay-success-hint { font-size: 12px; color: #64748B; }

/* TOAST */
.toast-wrap {
  position: fixed;
  top: 16px;
  right: 16px;
  display: grid;
  gap: 8px;
  z-index: 3000;
}

.toast {
  min-width: 240px;
  max-width: 360px;
  border-radius: 10px;
  border: 1px solid;
  padding: 10px 12px;
  font-size: 12px;
  backdrop-filter: blur(4px);
}

.toast.success { background: rgba(34,197,94,0.16); color: #86EFAC; border-color: rgba(34,197,94,0.35); }
.toast.error { background: rgba(248,113,113,0.16); color: #FCA5A5; border-color: rgba(248,113,113,0.35); }
.toast.warning { background: rgba(251,191,36,0.16); color: #FDE68A; border-color: rgba(251,191,36,0.35); }

.hidden { display: none !important; }

/* ============================================================
   THEME SYSTEM: GOLD
   ============================================================ */
[data-theme="gold"] {
  --bg-main: #0a0a0a;
  --bg-sidebar: #0d0d0b;
  --bg-sidebar-border: rgba(201,168,76,0.1);
  --bg-hover: rgba(201,168,76,0.04);
  --bg-active: rgba(201,168,76,0.06);
  --text-idle: #8A8474;
  --text-hover: #d4d0c8;
  --text-active: #c9a84c;
  --accent: #c9a84c;
  --accent-glow: rgba(201,168,76,0.15);
  --warning: #d4a852;
  --success: #7ec88a;
  /* Gold keeps Outfit as display accent but Syne is the body — matches
     App/Landing pair, so the theme feels premium without drifting
     into a different typographic world. */
  --font-display: 'Outfit', 'Syne', sans-serif;
  --font-body: 'Syne', sans-serif;
  --radius-card: 14px;
  --radius-btn: 10px;
}

[data-theme="gold"] body {
  font-family: var(--font-body);
  background: #0a0a0a;
  color: #d4d0c8;
}

[data-theme="gold"] body::before { opacity: 0.02; }

[data-theme="gold"] body::after {
  content: '';
  position: fixed;
  top: -30%;
  left: 50%;
  transform: translateX(-50%);
  width: 800px;
  height: 800px;
  background: radial-gradient(circle, rgba(201,168,76,0.04) 0%, transparent 70%);
  pointer-events: none;
  z-index: 0;
}

[data-theme="gold"] .sidebar {
  background: linear-gradient(180deg, #0d0d0b 0%, #0a0a08 100%);
  border-right-color: rgba(201,168,76,0.1);
}

[data-theme="gold"] .sidebar::after {
  background: linear-gradient(to bottom, transparent, rgba(201,168,76,0.15) 40%, rgba(201,168,76,0.15) 60%, transparent);
}

[data-theme="gold"] .logo-icon {
  background: linear-gradient(145deg, #1a1710 0%, #0f0e08 100%);
  border-color: rgba(201,168,76,0.28);
  box-shadow: 0 0 14px rgba(201,168,76,0.18), inset 0 1px 0 rgba(255,255,255,0.06);
}

[data-theme="gold"] .logo-icon::before {
  background: radial-gradient(circle at 40% 30%, rgba(201,168,76,0.14) 0%, transparent 55%);
}

[data-theme="gold"] .logo-icon svg path { fill: rgba(201,168,76,0.16); stroke: #c9a84c; }
[data-theme="gold"] .logo-icon svg circle { fill: #c9a84c; }

[data-theme="gold"] .logo-name {
  font-family: 'Syne', sans-serif;
  background: linear-gradient(135deg, #e8d48b 0%, #c9a84c 45%, #8a6f2e 72%, #e8d48b 100%);
  -webkit-background-clip: text;
  background-clip: text;
  filter: drop-shadow(0 0 7px rgba(201,168,76,0.4));
}

[data-theme="gold"] .logo-sub { font-family: 'JetBrains Mono', monospace; }

[data-theme="gold"] .nav-item.active::before { background: #c9a84c; box-shadow: 0 0 10px rgba(201,168,76,0.25); }
[data-theme="gold"] .nav-item.active::after { background: linear-gradient(to left, rgba(201,168,76,0.04), transparent); }

[data-theme="gold"] .nav-badge {
  background: rgba(201,168,76,0.15);
  color: #c9a84c;
  border-color: rgba(201,168,76,0.2);
  font-family: 'JetBrains Mono', monospace;
}

[data-theme="gold"] .nav-section-label { font-family: 'JetBrains Mono', monospace; }
[data-theme="gold"] .nav-label { font-family: 'Outfit', sans-serif; }

[data-theme="gold"] .wallet-connect-btn {
  font-family: 'Outfit', sans-serif;
  background: linear-gradient(135deg, #8a6f2e 0%, #c9a84c 55%, #e8d48b 100%);
  color: #0a0a0a;
  box-shadow: 0 4px 14px rgba(201,168,76,0.3);
}

[data-theme="gold"] .wallet-connect-btn::before {
  background: linear-gradient(135deg, rgba(255,255,255,0.2) 0%, transparent 55%);
}

[data-theme="gold"] .wallet-connect-btn:hover { box-shadow: 0 6px 20px rgba(201,168,76,0.45); }

[data-theme="gold"] .avatar { border-color: rgba(201,168,76,0.22); }
[data-theme="gold"] .avatar svg { stroke: #c9a84c; }
[data-theme="gold"] .avatar svg circle { fill: #c9a84c; }

[data-theme="gold"] .wallet-addr { font-family: 'JetBrains Mono', monospace; }

[data-theme="gold"] .breadcrumb { font-family: 'JetBrains Mono', monospace; }

[data-theme="gold"] .page-title {
  font-family: 'Syne', sans-serif;
  color: #e8d48b;
  letter-spacing: 0.02em;
}

[data-theme="gold"] .section-title { font-family: 'JetBrains Mono', monospace; }
[data-theme="gold"] .section-badge {
  background: rgba(201,168,76,0.1);
  color: #c9a84c;
  border-color: rgba(201,168,76,0.2);
  font-family: 'JetBrains Mono', monospace;
}

[data-theme="gold"] .btn-mint-top {
  font-family: 'Outfit', sans-serif;
  background: transparent;
  border: 1px solid #c9a84c;
  color: #c9a84c;
  box-shadow: none;
}

[data-theme="gold"] .btn-mint-top::before { display: none; }

[data-theme="gold"] .btn-mint-top:hover {
  background: #c9a84c;
  color: #0a0a0a;
  box-shadow: 0 4px 20px rgba(201,168,76,0.3);
}

[data-theme="gold"] .number-card {
  background: #111111;
  border-color: rgba(201,168,76,0.1);
  border-radius: 12px;
}

[data-theme="gold"] .number-card:hover {
  border-color: rgba(201,168,76,0.25);
  box-shadow: 0 12px 40px rgba(0,0,0,0.4), 0 0 0 1px rgba(201,168,76,0.08);
}

[data-theme="gold"] .number-card::before {
  background: linear-gradient(to right, transparent 10%, #c9a84c 50%, transparent 90%);
}

[data-theme="gold"] .number-card::after {
  background: radial-gradient(circle at 100% 100%, rgba(201,168,76,0.04) 0%, transparent 65%);
}

[data-theme="gold"] .card-status { font-family: 'JetBrains Mono', monospace; }
[data-theme="gold"] .card-status.active { color: #7ec88a; }
[data-theme="gold"] .card-status.active .status-dot { background: #7ec88a; border: 1px solid rgba(255,255,255,0.2); }
[data-theme="gold"] .card-status.minted { color: #c9a84c; }
[data-theme="gold"] .card-status.minted .status-dot { background: #c9a84c; box-shadow: 0 0 6px rgba(201,168,76,0.4); border: 1px solid rgba(255,255,255,0.3); }
[data-theme="gold"] .card-status.pending { color: #d4a852; }
[data-theme="gold"] .card-status.pending .status-dot { background: #d4a852; border: 1px solid rgba(255,255,255,0.2); }

[data-theme="gold"] .phone-number {
  font-family: 'Syne', sans-serif;
  font-size: 18px;
  font-weight: 600;
  background: linear-gradient(135deg, #e8d48b 0%, #c9a84c 60%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}

[data-theme="gold"] .phone-number .sep { -webkit-text-fill-color: #8A8474; color: #8A8474; }

[data-theme="gold"] .meta-tag { font-family: 'JetBrains Mono', monospace; }
[data-theme="gold"] .meta-tag.type { color: #c9a84c; border-color: rgba(201,168,76,0.2); background: rgba(201,168,76,0.05); }
[data-theme="gold"] .meta-tag.carrier { color: #8A8474; border-color: rgba(138,132,116,0.3); }

[data-theme="gold"] .price-label { font-family: 'JetBrains Mono', monospace; }

[data-theme="gold"] .minted-pill {
  color: #c9a84c;
  background: rgba(201,168,76,0.08);
  border-color: rgba(201,168,76,0.18);
  border-width: 2px;
  font-family: 'JetBrains Mono', monospace;
}

[data-theme="gold"] .empty-panel {
  background: #111111;
  border-color: rgba(201,168,76,0.09);
  font-family: 'JetBrains Mono', monospace;
}

[data-theme="gold"] .latest-code-alert { background: linear-gradient(135deg, rgba(201,168,76,0.08) 0%, rgba(201,168,76,0.02) 100%); border-color: rgba(201,168,76,0.2); }
[data-theme="gold"] .lca-pulse { background: #c9a84c; box-shadow: 0 0 12px rgba(201,168,76,0.6); }
[data-theme="gold"] .lca-label { color: #c9a84c; }
[data-theme="gold"] .lca-code { background: linear-gradient(135deg, #e8d48b 0%, #c9a84c 60%, #8a6f2e 100%); -webkit-background-clip: text; background-clip: text; }
[data-theme="gold"] .lca-copy { background: rgba(201,168,76,0.12); border-color: rgba(201,168,76,0.3); color: #c9a84c; }
[data-theme="gold"] .sms-row.is-new { background: rgba(201,168,76,0.06); border-left-color: #c9a84c; }
[data-theme="gold"] .sms-row.is-new .sms-code { background: linear-gradient(135deg, #e8d48b 0%, #c9a84c 50%, #8a6f2e 100%); -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; }
[data-theme="gold"] .sms-block { background: #111111; border-color: rgba(201,168,76,0.1); }

[data-theme="gold"] .sms-block-header { border-bottom-color: rgba(201,168,76,0.1); }

[data-theme="gold"] .sms-block-icon {
  background: rgba(201,168,76,0.06);
  border-color: rgba(201,168,76,0.12);
  color: #c9a84c;
}

[data-theme="gold"] .sms-block-title { font-family: 'Syne', sans-serif; color: #e8d48b; }
[data-theme="gold"] .sms-block-sub { font-family: 'JetBrains Mono', monospace; }

[data-theme="gold"] .sms-number-select { font-family: 'JetBrains Mono', monospace; }
[data-theme="gold"] .sms-number-select:focus { border-color: rgba(201,168,76,0.35); }

[data-theme="gold"] .sms-refresh-btn:hover {
  background: rgba(201,168,76,0.1);
  border-color: rgba(201,168,76,0.25);
  color: #c9a84c;
}

[data-theme="gold"] .sms-list::-webkit-scrollbar-thumb { background: rgba(201,168,76,0.2); }

[data-theme="gold"] .sms-date-label { font-family: 'JetBrains Mono', monospace; }

[data-theme="gold"] .sms-row.unread { background: rgba(201,168,76,0.04); }
[data-theme="gold"] .sms-row.unread:hover { background: rgba(201,168,76,0.07); }

[data-theme="gold"] .sms-sender-icon {
  font-family: 'Syne', sans-serif;
  background: rgba(201,168,76,0.09);
  border-color: rgba(201,168,76,0.15);
  color: #c9a84c;
}

[data-theme="gold"] .sms-number-tag { font-family: 'JetBrains Mono', monospace; }
[data-theme="gold"] .sms-time { font-family: 'JetBrains Mono', monospace; }

[data-theme="gold"] .sms-code {
  font-family: 'Syne', sans-serif;
  font-size: 24px;
  font-weight: 700;
}

[data-theme="gold"] .sms-row.unread .sms-code {
  background: linear-gradient(135deg, #e8d48b 0%, #c9a84c 50%, #8a6f2e 100%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
  filter: drop-shadow(0 0 8px rgba(201,168,76,0.3));
}

[data-theme="gold"] .sms-copy-btn {
  font-family: 'JetBrains Mono', monospace;
}

[data-theme="gold"] .sms-copy-btn:hover {
  background: rgba(201,168,76,0.1);
  color: #c9a84c;
  border-color: rgba(201,168,76,0.25);
}

[data-theme="gold"] .sms-unread-dot {
  background: #c9a84c;
  box-shadow: 0 0 8px rgba(201,168,76,0.4);
}

[data-theme="gold"] .sms-block-footer { border-top-color: rgba(201,168,76,0.1); }
[data-theme="gold"] .sms-footer-text { font-family: 'JetBrains Mono', monospace; }

/* Gold: Modals, Forms, Panels */
[data-theme="gold"] .modal { background: #111111; border-color: rgba(201,168,76,0.12); }
[data-theme="gold"] .modal-title { font-family: 'Syne', sans-serif; }
[data-theme="gold"] .form-label { font-family: 'JetBrains Mono', monospace; }
[data-theme="gold"] .form-input, [data-theme="gold"] .form-select, [data-theme="gold"] .form-textarea {
  font-family: 'Outfit', sans-serif;
}
[data-theme="gold"] .form-input:focus, [data-theme="gold"] .form-select:focus, [data-theme="gold"] .form-textarea:focus {
  border-color: rgba(201,168,76,0.35);
}

[data-theme="gold"] .btn-submit {
  font-family: 'Outfit', sans-serif;
  background: linear-gradient(135deg, #8a6f2e 0%, #c9a84c 55%, #e8d48b 100%);
  color: #0a0a0a;
  box-shadow: 0 4px 16px rgba(201,168,76,0.35);
}

[data-theme="gold"] .btn-submit:hover { box-shadow: 0 6px 20px rgba(201,168,76,0.5); }

[data-theme="gold"] .data-panel { background: #111111; border-color: rgba(201,168,76,0.1); }
[data-theme="gold"] .admin-tabs { background: rgba(201,168,76,0.04); border-color: rgba(201,168,76,0.08); }
[data-theme="gold"] .admin-tab.active { background: rgba(201,168,76,0.1); border-color: rgba(201,168,76,0.2); color: #e8d48b; }
[data-theme="gold"] .admin-stat-card { background: rgba(201,168,76,0.04); border-color: rgba(201,168,76,0.08); }
[data-theme="gold"] .admin-stat-value { color: #c9a84c; }
[data-theme="gold"] .admin-chart-wrap { background: rgba(201,168,76,0.04); border-color: rgba(201,168,76,0.08); }
[data-theme="gold"] .mono-label { font-family: 'JetBrains Mono', monospace; }
[data-theme="gold"] .input { font-family: 'JetBrains Mono', monospace; }
[data-theme="gold"] .input:focus { border-color: rgba(201,168,76,0.35); }

[data-theme="gold"] .btn-primary {
  background: linear-gradient(135deg, #8a6f2e 0%, #c9a84c 100%);
  color: #0a0a0a;
  box-shadow: 0 3px 12px rgba(201,168,76,0.3);
}

[data-theme="gold"] .api-row span { color: #c9a84c; }
[data-theme="gold"] .link-btn:hover { border-color: rgba(201,168,76,0.35); }

[data-theme="gold"] .payment-card { background: #111111; border-color: rgba(201,168,76,0.12); }
[data-theme="gold"] .payment-link { color: #c9a84c; }

[data-theme="gold"] .toast.warning { background: rgba(201,168,76,0.16); color: #e8d48b; border-color: rgba(201,168,76,0.35); }

/* Gold: Support */
[data-theme="gold"] .tickets-panel { background: #111111; border-color: rgba(201,168,76,0.1); }
[data-theme="gold"] .filter-btn.active { background: rgba(201,168,76,0.12); border-color: rgba(201,168,76,0.3); color: #c9a84c; }
[data-theme="gold"] .ticket-row.selected { background: rgba(201,168,76,0.06); border-color: rgba(201,168,76,0.2); }
[data-theme="gold"] .ticket-detail { background: #111111; border-color: rgba(201,168,76,0.1); }
[data-theme="gold"] .ticket-empty-icon { color: rgba(201,168,76,0.25); }
[data-theme="gold"] .ticket-empty-text { font-family: 'JetBrains Mono', monospace; }

[data-theme="gold"] .msg-wrap.user .msg-bubble {
  background: rgba(201,168,76,0.12);
  border-color: rgba(201,168,76,0.18);
}

[data-theme="gold"] .system-msg {
  background: rgba(201,168,76,0.05);
  border-color: rgba(201,168,76,0.1);
  font-family: 'JetBrains Mono', monospace;
}

[data-theme="gold"] .reply-input { font-family: 'Outfit', sans-serif; }
[data-theme="gold"] .reply-input:focus { border-color: rgba(201,168,76,0.3); }

[data-theme="gold"] .reply-send {
  background: linear-gradient(135deg, #8a6f2e 0%, #c9a84c 100%);
  color: #0a0a0a;
  box-shadow: 0 3px 12px rgba(201,168,76,0.3);
}

[data-theme="gold"] .btn-new-ticket {
  font-family: 'Outfit', sans-serif;
  background: linear-gradient(135deg, #8a6f2e 0%, #c9a84c 100%);
  color: #0a0a0a;
  box-shadow: 0 2px 10px rgba(201,168,76,0.25);
}

[data-theme="gold"] .row-number { font-family: 'JetBrains Mono', monospace; }

/* ============================================================
   THEME SWITCHER (Admin)
   ============================================================ */
.theme-switcher { display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px; margin: 16px 0; }

.theme-card {
  border-radius: 14px;
  padding: 18px;
  cursor: pointer;
  transition: all 0.25s;
  position: relative;
  border: 2px solid transparent;
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.theme-card:hover { transform: translateY(-2px); }
.theme-card.active { border-color: currentColor; }

.theme-card.active::after {
  content: '';
  position: absolute;
  top: 10px;
  right: 10px;
  width: 22px;
  height: 22px;
  border-radius: 50%;
  background: currentColor;
  display: flex;
  align-items: center;
  justify-content: center;
}

.theme-card.active::before {
  content: '\2713';
  position: absolute;
  top: 12px;
  right: 12px;
  width: 18px;
  height: 18px;
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 1;
  font-size: 12px;
  font-weight: 700;
}

.theme-card-cyber {
  background: #111318;
  color: #38BDF8;
}

.theme-card-cyber .theme-preview { background: linear-gradient(135deg, #0D0F12 0%, #111318 100%); }
.theme-card-cyber .theme-accent { background: linear-gradient(135deg, #0EA5E9, #38BDF8, #7dd3fc); }
.theme-card-cyber::before { color: #0D0F12; }

.theme-card-gold {
  background: #111111;
  color: #c9a84c;
}

.theme-card-gold .theme-preview { background: linear-gradient(135deg, #0a0a0a 0%, #111111 100%); }
.theme-card-gold .theme-accent { background: linear-gradient(135deg, #8a6f2e, #c9a84c, #e8d48b); }
.theme-card-gold::before { color: #0a0a0a; }

.theme-preview {
  height: 40px;
  border-radius: 8px;
  position: relative;
  overflow: hidden;
}

.theme-accent {
  height: 4px;
  border-radius: 2px;
  width: 60%;
}

.theme-name {
  font-size: 14px;
  font-weight: 700;
  letter-spacing: 0.02em;
}

.theme-desc {
  font-size: 10px;
  color: inherit;
  opacity: 0.5;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}

@media (max-width: 500px) {
  .theme-switcher { grid-template-columns: 1fr; }
}

@media (max-width: 360px) {
  .table-row { grid-template-columns: 1fr; gap: 8px; }
  .section-bar { gap: 8px; flex-wrap: wrap; }
  .page-title { font-size: 18px; }
}

@media (max-width: 640px) {
  .theme-switcher { grid-template-columns: 1fr; }
}

@media (max-width: 1120px) {
  .main { padding: 26px 20px; }
  .admin-grid { grid-template-columns: 1fr; }
  .support-layout { flex-direction: column; height: auto; }
  .tickets-panel { width: 100%; max-height: 360px; }
  .ticket-detail { min-height: 380px; }
  .table-row { grid-template-columns: 1fr 1fr; }
}

/* Raised the mobile-layout cutoff from 860px → 1024px so every touch
   device (iPad portrait, iPad Air/Pro landscape narrow, every phone)
   switches to body-scroll. iOS Safari's inner-`overflow:auto` handling
   is chronically flaky: the page looks alive but elements stop
   moving after a rubber-band bounce. Letting the document scroll
   root handle it dodges all of that. */
@media (max-width: 1024px) {
  html { height: auto; }
  body { height: auto; min-height: 100vh; min-height: 100dvh; overflow-y: auto; flex-direction: column; -webkit-overflow-scrolling: touch; }
  .sidebar {
    position: static;
    width: 100%;
    height: auto;
    border-right: none;
    border-bottom: 1px solid var(--bg-sidebar-border);
    flex-shrink: 0;
  }
  .sidebar.collapsed { width: 100%; }
  .sidebar.collapsed .logo-text,
  .sidebar.collapsed .nav-label,
  .sidebar.collapsed .nav-badge,
  .sidebar.collapsed .nav-section-label,
  .sidebar.collapsed .user-info {
    opacity: 1;
    max-width: none;
    max-height: none;
    pointer-events: auto;
  }
  .sidebar.collapsed .disconnect-btn { display: flex; }
  .sidebar.collapsed .toggle-btn { transform: none; }
  /* Hide collapse toggle when the sidebar is rendered as a horizontal
     top-bar — collapsing a horizontal row doesn't fit, and previously
     clicking it left the layout in a broken "labels hidden / row still
     wide" state. The mobile hamburger replaces it. */
  .toggle-btn { display: none; }
  .tooltip { display: none !important; }
  .sidebar-nav { overflow-x: auto; flex-direction: row; gap: 6px; }
  .nav-section-label, .nav-divider { display: none; }
  .nav-item { min-width: max-content; }
  .main { overflow: visible; min-height: 0; padding-bottom: 40px; transform: none; }
}

/* Belt-and-suspenders iOS fix: any iPhone / iPad regardless of width
   falls back to document-level scrolling. Safari sets ua-string with
   "iPhone|iPad|iPod" AND honours the touch hover media query. */
@media (hover: none) and (pointer: coarse) {
  html, body { height: auto; overflow: visible; }
  body { overflow-y: auto; -webkit-overflow-scrolling: touch; flex-direction: column; }
  .sidebar { position: static; height: auto; width: 100%; }
  .main { overflow: visible; min-height: 0; transform: none; }
}

@media (max-width: 640px) {
  .form-row { grid-template-columns: 1fr; }
  .numbers-grid { grid-template-columns: 1fr; }
  .sms-code { font-size: 18px; }
  .section-bar { align-items: flex-start; }
  .sms-list { max-height: none; }
  .table-row { grid-template-columns: 1fr !important; gap: 6px; }
}

/* ============ ADMIN PANEL EMBEDDED ============ */
/* Horizontal scroll on overflow — without `overflow-x:auto` long action
   rows (Ban/Unban/Reset JWT/Push/Ticket) get clipped at narrow widths,
   and the user can't get to the right-side buttons at all. */
.adm-table-wrap {
  background: var(--bg-card, #111318); border: 1px solid var(--bg-sidebar-border, rgba(255,255,255,0.06));
  border-radius: 14px; overflow-x: auto; overflow-y: hidden;
}
.adm-table-wrap .table-toolbar {
  display: flex; align-items: center; gap: 10px; padding: 16px 20px;
  border-bottom: 1px solid var(--bg-sidebar-border); flex-wrap: wrap;
}
.adm-table-wrap .table-toolbar input,
.adm-table-wrap .table-toolbar select {
  background: rgba(255,255,255,0.04); border: 1px solid rgba(255,255,255,0.08);
  border-radius: 8px; padding: 8px 12px; color: #E2E8F0;
  font-family: 'JetBrains Mono', monospace; font-size: 11px; outline: none;
  transition: border-color 0.2s;
}
.adm-table-wrap .table-toolbar input:focus,
.adm-table-wrap .table-toolbar select:focus { border-color: rgba(56,189,248,0.35); }
.adm-table-wrap .table-toolbar input { min-width: 200px; }
.adm-table-wrap .table-toolbar select { min-width: 120px; cursor: pointer; }
.adm-table-wrap .table-toolbar select option { background: #1E2027; }

.adm-table { width: 100%; border-collapse: separate; border-spacing: 0; }
.adm-table thead { background: rgba(20,22,28,0.96); backdrop-filter: blur(6px); }
.adm-table thead th {
  position: sticky; top: 0; z-index: 4;
  background: rgba(20,22,28,0.96);
}
.adm-table th {
  font-family: 'JetBrains Mono', monospace; font-size: 10px; font-weight: 500;
  letter-spacing: 0.1em; text-transform: uppercase; color: var(--text-idle);
  padding: 12px 16px; text-align: left; border-bottom: 1px solid var(--bg-sidebar-border);
  white-space: nowrap;
}
.adm-table td {
  padding: 12px 16px; border-bottom: 1px solid rgba(255,255,255,0.03);
  font-size: 13px; color: var(--text-hover); vertical-align: middle;
}
.adm-table tr:hover td { background: rgba(255,255,255,0.02); }
.adm-table .mono { font-family: 'JetBrains Mono', monospace; font-size: 11px; }
.adm-table .text-muted { color: var(--text-idle); }

.adm-badge {
  display: inline-flex; align-items: center; gap: 4px;
  font-family: 'JetBrains Mono', monospace; font-size: 10px; font-weight: 500;
  letter-spacing: 0.06em; text-transform: uppercase;
  padding: 3px 9px; border-radius: 20px;
}
.adm-badge.completed, .adm-badge.success, .adm-badge.active { background: rgba(34,197,94,0.12); color: #86EFAC; border: 1px solid rgba(34,197,94,0.25); }
.adm-badge.pending, .adm-badge.warning, .adm-badge.open { background: rgba(251,191,36,0.12); color: #FDE68A; border: 1px solid rgba(251,191,36,0.25); }
.adm-badge.failed, .adm-badge.danger, .adm-badge.closed, .adm-badge.banned { background: rgba(248,113,113,0.12); color: #FCA5A5; border: 1px solid rgba(248,113,113,0.25); }
.adm-badge.minting, .adm-badge.info, .adm-badge.processing { background: rgba(56,189,248,0.12); color: #7DD3FC; border: 1px solid rgba(56,189,248,0.25); }
.adm-badge.admin { background: rgba(167,139,250,0.12); color: #C4B5FD; border: 1px solid rgba(167,139,250,0.25); }

.adm-pagination {
  display: flex; align-items: center; justify-content: center; gap: 4px;
  padding: 16px 20px; border-top: 1px solid var(--bg-sidebar-border);
}
.adm-page-btn {
  min-width: 34px; height: 34px; border-radius: 8px;
  border: 1px solid rgba(255,255,255,0.08); background: transparent;
  color: var(--text-idle); font-family: 'JetBrains Mono', monospace; font-size: 12px;
  cursor: pointer; display: flex; align-items: center; justify-content: center;
  transition: all 0.2s;
}
.adm-page-btn:hover:not(:disabled) { background: var(--bg-hover); color: var(--text-hover); border-color: rgba(255,255,255,0.14); }
.adm-page-btn.active { background: var(--bg-active); border-color: rgba(56,189,248,0.3); color: var(--text-active); }
.adm-page-btn:disabled { opacity: 0.3; cursor: default; }
.adm-page-info { font-family: 'JetBrains Mono', monospace; font-size: 10px; color: var(--text-idle); padding: 0 8px; }

.adm-stat-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); gap: 14px; }
.adm-stat-card {
  background: var(--bg-card, #111318); border: 1px solid var(--bg-sidebar-border); border-radius: 14px;
  padding: 20px; display: flex; flex-direction: column; gap: 8px;
  position: relative; overflow: hidden; transition: border-color 0.25s, transform 0.25s;
}
.adm-stat-card:hover { border-color: rgba(56,189,248,0.22); transform: translateY(-2px); }
/* Clickable dashboard cards — drill into the matching admin section. */
.adm-stat-card[data-drill] { cursor: pointer; }
.adm-stat-card[data-drill]:hover { border-color: var(--accent); }
.adm-stat-card[data-drill]:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.adm-stat-card[data-drill]::after {
  content: '↗'; position: absolute; top: 9px; right: 13px;
  font-family: 'JetBrains Mono', monospace; font-size: 13px;
  color: var(--text-idle); opacity: 0.3; transition: opacity 0.2s;
}
.adm-stat-card[data-drill]:hover::after { opacity: 0.85; }
.adm-stat-card::before {
  content: ''; position: absolute; top: 0; left: 20%; right: 20%; height: 1px;
  background: linear-gradient(to right, transparent, rgba(56,189,248,0.4), transparent); opacity: 0.5;
}
.adm-stat-card .val { font-family: 'JetBrains Mono', monospace; font-size: 28px; font-weight: 700; color: #F1F5F9; }
.adm-stat-card .lbl { font-family: 'JetBrains Mono', monospace; font-size: 10px; letter-spacing: 0.1em; text-transform: uppercase; color: var(--text-idle); }
.adm-stat-card .sub { font-family: 'JetBrains Mono', monospace; font-size: 10px; color: var(--text-idle); opacity: 0.7; }
.adm-stat-card.accent .val { color: var(--accent); }
.adm-stat-card.success .val { color: var(--success); }
.adm-stat-card.warning .val { color: var(--warning); }
.adm-stat-card.danger .val { color: var(--danger); }

.adm-chart-wrap {
  background: var(--bg-card, #111318); border: 1px solid var(--bg-sidebar-border); border-radius: 14px;
  padding: 20px; position: relative; margin-top: 16px;
}
.adm-chart-wrap canvas { max-height: 280px; }

.adm-charts-grid { display: grid; grid-template-columns: 1fr 300px; gap: 16px; }
.adm-charts-grid .adm-chart-main {
  background: var(--bg-card, #111318); border: 1px solid var(--bg-sidebar-border); border-radius: 14px;
  padding: 20px; position: relative; min-height: 320px;
}
.adm-charts-grid .adm-chart-main canvas { max-height: 280px; }
.adm-charts-grid .adm-chart-side {
  background: var(--bg-card, #111318); border: 1px solid var(--bg-sidebar-border); border-radius: 14px;
  padding: 20px; display: flex; flex-direction: column; align-items: center; justify-content: center;
}
.adm-charts-grid .adm-chart-side canvas { max-height: 220px; max-width: 220px; }
.adm-chart-title {
  font-family: 'JetBrains Mono', monospace; font-size: 10px; color: var(--text-idle);
  text-transform: uppercase; letter-spacing: 0.1em; margin-bottom: 12px;
}
@media (max-width: 900px) { .adm-charts-grid { grid-template-columns: 1fr; } }

.adm-wallet-full {
  font-size: 10px; word-break: break-all; line-height: 1.4; cursor: pointer;
  color: var(--text-idle); transition: color 0.2s; max-width: 180px;
}
.adm-wallet-full:hover { color: var(--accent); }

.adm-filter-bar {
  display: flex; align-items: center; gap: 10px; flex-wrap: wrap; margin-bottom: 16px;
}
.adm-filter-bar input, .adm-filter-bar select {
  background: rgba(255,255,255,0.04); border: 1px solid rgba(255,255,255,0.08);
  border-radius: 8px; padding: 8px 12px; color: #E2E8F0;
  font-family: 'JetBrains Mono', monospace; font-size: 11px; outline: none;
}
.adm-filter-bar select option { background: #1E2027; }

.adm-modal-overlay {
  position: fixed; inset: 0; background: rgba(0,0,0,0.65); z-index: 1000;
  display: none; align-items: center; justify-content: center;
  backdrop-filter: blur(4px);
}
.adm-modal-overlay.show { display: flex; }
.adm-modal-box {
  background: #161921; border: 1px solid rgba(255,255,255,0.08); border-radius: 16px;
  padding: 28px; min-width: 360px; max-width: 520px; width: 90%;
  box-shadow: 0 24px 48px rgba(0,0,0,0.5);
}
.adm-modal-title { font-size: 18px; font-weight: 700; color: #F1F5F9; margin-bottom: 12px; }
.adm-modal-body { font-size: 13px; color: var(--text-idle); margin-bottom: 20px; line-height: 1.6; white-space: pre-wrap; }
.adm-modal-actions { display: flex; gap: 10px; justify-content: flex-end; }

/* Form-mode variants: when the modal body is rendered as HTML
   (not a one-line confirm), we need normal whitespace handling
   and more horizontal breathing room for multi-field forms. */
.adm-modal-body.adm-modal-body--form { white-space: normal; margin-bottom: 20px; }
.adm-modal-box.adm-modal-box--wide { max-width: 640px; }

/* Stacked label → input → hint field used in admin modals. */
.adm-form-field { display: flex; flex-direction: column; gap: 6px; margin-bottom: 16px; }
.adm-form-field:last-child { margin-bottom: 0; }
.adm-form-field > label {
  font-size: 11px; font-weight: 700; color: #F1F5F9;
  text-transform: uppercase; letter-spacing: 0.08em;
  font-family: 'JetBrains Mono', monospace;
}
.adm-form-field > .adm-form-hint {
  font-size: 11px; color: var(--text-muted, rgba(203,213,225,0.55));
  line-height: 1.5;
}
.adm-form-field .input, .adm-form-field textarea.input {
  width: 100%; min-width: 0; flex: none;
  font-size: 13px;
  font-family: 'JetBrains Mono', monospace;
}
.adm-form-field textarea.input { resize: vertical; min-height: 44px; line-height: 1.5; }

/* Scope checkbox grid used in the Integrations modal. */
.adm-scope-grid {
  border: 1px solid rgba(255,255,255,0.1);
  border-radius: 10px;
  background: rgba(255,255,255,0.02);
  padding: 4px 12px;
}
.adm-scope-item {
  display: flex; align-items: flex-start; gap: 10px;
  padding: 10px 0;
  border-bottom: 1px dashed rgba(255,255,255,0.06);
  cursor: pointer;
}
.adm-scope-item:last-child { border-bottom: none; }
.adm-scope-item input[type="checkbox"] {
  margin-top: 2px; accent-color: #38BDF8; cursor: pointer;
}
.adm-scope-item .adm-scope-name {
  font-family: 'JetBrains Mono', monospace; font-size: 13px;
  color: #E2E8F0; font-weight: 500;
}
.adm-scope-item .adm-scope-desc {
  font-size: 11px; color: var(--text-muted, rgba(203,213,225,0.55));
  margin-top: 2px; line-height: 1.4;
}

/* Coloured notice boxes used for warnings / success / info inside modals. */
.adm-notice {
  padding: 12px 14px; border-radius: 10px;
  font-size: 12px; line-height: 1.55; margin-bottom: 16px;
}
.adm-notice--warn    { background: rgba(251,191,36,0.08); border: 1px solid rgba(251,191,36,0.25); color: #FCD34D; }
.adm-notice--danger  { background: rgba(248,113,113,0.08); border: 1px solid rgba(248,113,113,0.25); color: #FCA5A5; }
.adm-notice--success { background: rgba(34,211,166,0.08); border: 1px solid rgba(34,211,166,0.25); color: #34D399; }
.adm-notice strong { color: inherit; }

/* Code block for the API-key reveal modal. */
.adm-code-block {
  background: rgba(0,0,0,0.35);
  border: 1px solid rgba(255,255,255,0.06);
  border-radius: 10px;
  padding: 12px 14px;
  font-family: 'JetBrains Mono', monospace;
  font-size: 11px;
  color: #CBD5E1;
  line-height: 1.6;
  overflow-x: auto;
  white-space: pre;
  margin: 0;
}

/* Inline "copy-on-click" row: <input readonly> + button. */
.adm-key-reveal {
  display: flex; gap: 8px; align-items: stretch;
}
.adm-key-reveal .input {
  flex: 1; font-size: 12px; min-width: 0;
}

/* Compact row-action button — used in the integrations table (Edit /
   Rotate / Disable / Delete) so 4 actions fit on one row. */
.btn.btn-sm {
  padding: 5px 10px;
  font-size: 10.5px;
  letter-spacing: 0.03em;
  border-radius: 8px;
  margin-right: 4px;
}
.btn.btn-sm:last-child { margin-right: 0; }

/* Inline input + button row (logo URL + upload button, etc.). Override
   `.adm-form-field .input { width:100%; flex:none; }` so the input
   shrinks instead of pushing the adjacent button off the modal. */
.form-row-inline {
  display: flex;
  align-items: stretch;
  gap: 8px;
  min-width: 0;
}
.form-row-inline > .input,
.form-row-inline > .form-input {
  flex: 1 1 auto !important;
  width: auto !important;
  min-width: 0;
}
.form-row-inline > .btn {
  flex: 0 0 auto;
  white-space: nowrap;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  margin: 0;
  padding: 0 14px;
  min-height: 38px;
}

/* Generate / Paste toggle inside the integration modals. Styled as a
   two-button pill so it reads as "pick one source" rather than two
   independent actions. */
.adm-keysrc-tabs {
  display: inline-flex;
  padding: 4px;
  border-radius: 10px;
  background: rgba(255,255,255,0.04);
  border: 1px solid rgba(255,255,255,0.08);
  gap: 2px;
}
.adm-keysrc-tab {
  background: transparent;
  border: none;
  color: var(--text-idle, rgba(203,213,225,0.7));
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.03em;
  padding: 8px 14px;
  border-radius: 8px;
  cursor: pointer;
  transition: background 0.15s, color 0.15s;
  font-family: 'JetBrains Mono', monospace;
}
.adm-keysrc-tab:hover { color: #F1F5F9; }
.adm-keysrc-tab.active {
  background: rgba(56,189,248,0.18);
  color: #7DD3FC;
}

.adm-ticket-list { display: flex; flex-direction: column; gap: 10px; }
.adm-ticket-card {
  background: var(--bg-card, #111318); border: 1px solid var(--bg-sidebar-border); border-radius: 12px;
  padding: 16px 20px; cursor: pointer; transition: border-color 0.2s, transform 0.15s;
}
.adm-ticket-card:hover { border-color: rgba(56,189,248,0.2); transform: translateY(-1px); }
.adm-ticket-card.expanded { border-color: rgba(56,189,248,0.3); }
.adm-ticket-card .ticket-header { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.adm-ticket-card .ticket-title { font-size: 14px; font-weight: 600; color: #F1F5F9; }
.adm-ticket-card .ticket-meta {
  font-family: 'JetBrains Mono', monospace; font-size: 10px; color: var(--text-idle);
  margin-top: 6px; display: flex; gap: 12px; flex-wrap: wrap; align-items: center;
}
.adm-ticket-detail { margin-top: 14px; padding-top: 14px; border-top: 1px solid var(--bg-sidebar-border); }
.adm-ticket-msgs { display: flex; flex-direction: column; gap: 10px; max-height: 300px; overflow-y: auto; margin-bottom: 12px; }
.adm-ticket-msg { padding: 10px 14px; border-radius: 10px; font-size: 13px; line-height: 1.5; }
.adm-ticket-msg.user { background: rgba(56,189,248,0.08); border: 1px solid rgba(56,189,248,0.15); align-self: flex-end; max-width: 80%; }
.adm-ticket-msg.admin-msg { background: rgba(34,197,94,0.08); border: 1px solid rgba(34,197,94,0.15); align-self: flex-start; max-width: 80%; }
.adm-ticket-msg .msg-meta { font-family: 'JetBrains Mono', monospace; font-size: 9px; color: var(--text-idle); margin-top: 4px; }
.adm-reply-form { display: flex; gap: 8px; }
.adm-reply-form textarea {
  flex: 1; background: rgba(255,255,255,0.04); border: 1px solid rgba(255,255,255,0.08);
  border-radius: 8px; padding: 10px 12px; color: #E2E8F0;
  font-family: 'Syne', sans-serif; font-size: 13px; resize: vertical; min-height: 60px; outline: none;
}

.adm-bulk-textarea {
  width: 100%; min-height: 160px; background: rgba(255,255,255,0.04);
  border: 1px solid rgba(255,255,255,0.08); border-radius: 10px;
  padding: 14px 16px; color: #E2E8F0; font-family: 'JetBrains Mono', monospace;
  font-size: 12px; resize: vertical; outline: none; margin-bottom: 12px;
}

.adm-config-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(300px,1fr)); gap: 14px; }
.adm-config-item {
  background: var(--bg-card, #111318); border: 1px solid var(--bg-sidebar-border); border-radius: 12px;
  padding: 16px 20px;
}
.adm-config-item label {
  font-family: 'JetBrains Mono', monospace; font-size: 10px; letter-spacing: 0.1em;
  text-transform: uppercase; color: var(--text-idle); display: block; margin-bottom: 8px;
}
.adm-config-item input {
  width: 100%; background: rgba(255,255,255,0.04); border: 1px solid rgba(255,255,255,0.08);
  border-radius: 8px; padding: 10px 12px; color: #E2E8F0;
  font-family: 'JetBrains Mono', monospace; font-size: 12px; outline: none;
}

.adm-balance-card {
  background: linear-gradient(135deg, rgba(56,189,248,0.08), rgba(56,189,248,0.02));
  border: 1px solid rgba(56,189,248,0.2); border-radius: 14px; padding: 20px;
  display: flex; align-items: center; gap: 16px;
}
.adm-balance-card .balance-value { font-family: 'JetBrains Mono', monospace; font-size: 24px; font-weight: 700; color: var(--accent); }
.adm-balance-card .balance-label { font-family: 'JetBrains Mono', monospace; font-size: 10px; color: var(--text-idle); text-transform: uppercase; letter-spacing: 0.1em; }

.adm-loading {
  display: flex; align-items: center; justify-content: center; gap: 10px;
  padding: 40px; color: var(--text-idle); font-family: 'JetBrains Mono', monospace; font-size: 11px;
}
.adm-spinner {
  width: 24px; height: 24px; border: 2px solid rgba(56,189,248,0.2);
  border-top-color: var(--accent); border-radius: 50%; animation: admSpin 0.7s linear infinite;
}
@keyframes admSpin { to { transform: rotate(360deg); } }

.adm-profile-overlay {
  position: fixed; inset: 0; z-index: 200; background: rgba(0,0,0,0.6);
  display: none; align-items: center; justify-content: center; backdrop-filter: blur(4px);
}
.adm-profile-overlay > * { touch-action: auto; }
.adm-profile-overlay.show { display: flex; }
.adm-profile-modal {
  background: var(--bg-sidebar); border: 1px solid var(--bg-sidebar-border);
  border-radius: 12px; width: 96%; max-width: 1080px; max-height: 92vh;
  display: flex; flex-direction: column; overflow: hidden;
  box-shadow: 0 20px 60px rgba(0,0,0,0.5);
}
/* Tabs row scrolls horizontally on narrow screens so all six tab titles
   stay reachable instead of wrapping onto two lines or being clipped. */
.adm-profile-tabs {
  display: flex; flex: 0 0 auto; min-height: 43px;
  overflow-x: auto; overflow-y: hidden; flex-wrap: nowrap; scrollbar-width: thin;
  padding: 0 28px; border-bottom: 1px solid var(--bg-sidebar-border);
  background: var(--bg-sidebar);
}
.adm-profile-tabs::-webkit-scrollbar { height: 4px; }
.adm-profile-tabs::-webkit-scrollbar-thumb { background: rgba(255,255,255,0.12); border-radius: 2px; }
.adm-profile-tab { white-space: nowrap; }
@media (max-width: 720px) {
  .adm-profile-modal { width: 100%; max-width: 100%; max-height: 100vh; border-radius: 0; }
  .adm-profile-header, .adm-profile-stats, .adm-profile-content { padding-left: 16px; padding-right: 16px; }
  .adm-profile-tabs { padding-left: 16px; padding-right: 16px; }
}
.adm-profile-header {
  padding: 24px 28px; border-bottom: 1px solid var(--bg-sidebar-border);
  display: flex; flex: 0 0 auto; align-items: center; gap: 16px;
}
.adm-profile-avatar {
  width: 56px; height: 56px; border-radius: 14px;
  background: linear-gradient(135deg, #1a2535, #0f1825);
  border: 2px solid rgba(56,189,248,0.25); display: flex;
  align-items: center; justify-content: center; font-size: 22px; color: var(--accent);
}
.adm-profile-info { flex: 1; }
.adm-profile-name { font-size: 18px; font-weight: 700; color: var(--text-hover); }
.adm-profile-wallet { font-family: 'JetBrains Mono', monospace; font-size: 11px; color: var(--text-idle); margin-top: 3px; }
.adm-profile-badges { display: flex; gap: 6px; margin-top: 6px; }
.adm-profile-close {
  width: 32px; height: 32px; border-radius: 10px; border: none; cursor: pointer;
  background: rgba(255,255,255,0.05); color: var(--text-idle); font-size: 16px;
  display: flex; align-items: center; justify-content: center; transition: all 0.2s;
}
.adm-profile-close:hover { background: rgba(248,113,113,0.15); color: var(--danger); }
.adm-profile-stats {
  display: grid; grid-template-columns: repeat(auto-fill, minmax(120px, 1fr));
  flex: 0 0 auto; gap: 10px; padding: 16px 28px; border-bottom: 1px solid var(--bg-sidebar-border);
  max-height: 148px; overflow-y: auto;
}
.adm-profile-stat { text-align: center; padding: 10px; border-radius: 10px; background: var(--bg-hover); }
.adm-profile-stat .val { font-family: 'JetBrains Mono', monospace; font-size: 20px; font-weight: 700; color: var(--accent); }
.adm-profile-stat .lbl { font-size: 10px; color: var(--text-idle); text-transform: uppercase; letter-spacing: 0.08em; margin-top: 2px; }

.adm-profile-tab {
  flex: 0 0 auto; padding: 10px 16px; font-size: 12px; font-weight: 600; color: var(--text-idle);
  cursor: pointer; border-bottom: 2px solid transparent; transition: all 0.2s;
}
.adm-profile-tab:hover { color: var(--text-hover); }
.adm-profile-tab.active { color: var(--accent); border-bottom-color: var(--accent); }
.adm-profile-content { flex: 1; overflow-y: auto; overflow-x: auto; padding: 16px 28px; }

.adm-tabs { display: flex; gap: 4px; margin-bottom: 16px; }
.adm-tab-btn {
  padding: 8px 18px; border-radius: 8px; border: 1px solid rgba(255,255,255,0.08);
  background: transparent; color: var(--text-idle); font-family: 'Syne', sans-serif;
  font-size: 12px; font-weight: 600; cursor: pointer; transition: all 0.2s;
}
.adm-tab-btn.active { background: var(--bg-active); border-color: rgba(56,189,248,0.25); color: var(--text-active); }

@keyframes skeletonPulse {
  0% { opacity: 0.06; }
  50% { opacity: 0.12; }
  100% { opacity: 0.06; }
}
.skeleton { background: rgba(255,255,255,0.08); border-radius: 8px; animation: skeletonPulse var(--anim-fast) ease-in-out infinite; pointer-events: none; }
.skeleton-card { background: #111318; border: 1px solid rgba(255,255,255,0.06); border-radius: var(--radius-card); padding: 18px; display: flex; flex-direction: column; gap: 14px; }
.skeleton-line { height: 12px; background: rgba(255,255,255,0.08); border-radius: 6px; animation: skeletonPulse var(--anim-fast) ease-in-out infinite; }
.skeleton-line.w60 { width: 60%; } .skeleton-line.w40 { width: 40%; } .skeleton-line.w80 { width: 80%; } .skeleton-line.w100 { width: 100%; }

/* ── Mint progress bar (replaces a lone "Minting..." spinner) ──
   Layout: 4 dots on a horizontal rail; the active dot pulses, all
   earlier dots are filled solid, later dots hollow. Steps:
     1. Render   — PIL/animation pipeline
     2. Pay      — TONCenter confirmation
     3. Mint     — GetGems submit
     4. Sync     — on-chain + our DB flip to completed
   Timestamps go under each step when available. */
.mint-progress {
  display: flex;
  flex-direction: column;
  gap: 8px;
  padding: 10px 0;
  font-family: 'JetBrains Mono', monospace;
  font-size: 10px;
  letter-spacing: 0.08em;
  color: var(--text-idle);
}
.mint-progress-steps {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  align-items: center;
  position: relative;
  padding-top: 4px;
}
.mint-progress-steps::before {
  content: '';
  position: absolute;
  top: 12px;
  left: 12.5%;
  right: 12.5%;
  height: 2px;
  background: rgba(255,255,255,0.08);
  z-index: 0;
}
.mint-progress-steps::after {
  content: '';
  position: absolute;
  top: 12px;
  left: 12.5%;
  height: 2px;
  background: linear-gradient(to right, var(--accent), var(--accent-glow, rgba(56,189,248,0.4)));
  z-index: 1;
  width: var(--mint-progress-fill, 0%);
  transition: width 0.4s ease;
}
.mint-step { position: relative; display: flex; flex-direction: column; align-items: center; z-index: 2; gap: 4px; }
.mint-step-dot {
  width: 10px; height: 10px; border-radius: 50%;
  background: #161920; border: 2px solid rgba(255,255,255,0.2);
  transition: background 0.3s, border-color 0.3s, box-shadow 0.3s;
}
.mint-step.done .mint-step-dot { background: var(--accent); border-color: var(--accent); }
.mint-step.active .mint-step-dot {
  background: var(--accent); border-color: var(--accent);
  box-shadow: 0 0 0 0 var(--accent-glow);
  animation: mintStepPulse var(--anim-pulse, 2.4s) infinite;
}
@keyframes mintStepPulse {
  0%, 100% { box-shadow: 0 0 0 0 var(--accent-glow); }
  50% { box-shadow: 0 0 0 8px rgba(56,189,248,0); }
}
.mint-step.error .mint-step-dot { background: var(--danger, #F87171); border-color: var(--danger); }
.mint-step-label { font-size: 9px; text-transform: uppercase; }
.mint-step.active .mint-step-label, .mint-step.done .mint-step-label { color: var(--text-hover); }
.mint-step-time { font-size: 9px; color: var(--text-idle); opacity: 0.7; }
.mint-progress-eta { text-align: center; font-size: 10px; color: var(--text-idle); opacity: 0.85; }
.mint-progress-eta.warn { color: var(--warning, #FBBF24); }

/* ── Transaction timeline on number card (expand-on-click) ──
   Vertical list of events with icons and timestamps. Each row is
   clickable only if it has an href (tonviewer link) — otherwise
   it's a plain span. */
.txline { display: flex; flex-direction: column; gap: 8px; padding: 12px 0 0; }
.txline-row {
  display: grid;
  grid-template-columns: 16px 1fr auto;
  gap: 10px;
  align-items: baseline;
  font-size: 11px;
  color: var(--text-idle);
}
.txline-row .dot {
  width: 8px; height: 8px; border-radius: 50%;
  background: rgba(255,255,255,0.15);
  justify-self: center;
}
.txline-row.done .dot { background: var(--accent); }
.txline-row.error .dot { background: var(--danger, #F87171); }
.txline-row .ev {
  color: var(--text-hover);
  font-weight: 500;
  font-size: 12px;
}
.txline-row .time {
  font-family: 'JetBrains Mono', monospace;
  font-size: 10px;
  opacity: 0.7;
}
.txline-row a {
  color: var(--accent);
  text-decoration: none;
  border-bottom: 1px dashed rgba(56,189,248,0.3);
}
.txline-row a:hover { color: #7dd3fc; border-bottom-style: solid; }

/* ── Search bar used by My Numbers / SMS ── */
.list-search {
  position: relative;
  max-width: 320px;
  width: 100%;
}
.list-search input {
  width: 100%;
  padding: 8px 14px 8px 36px;
  border-radius: 10px;
  border: 1px solid rgba(255,255,255,0.08);
  background: rgba(255,255,255,0.03);
  color: #E2E8F0;
  font-family: 'JetBrains Mono', monospace;
  font-size: 13px;
  outline: none;
  transition: border-color 0.2s, background 0.2s;
}
.list-search input:focus {
  border-color: rgba(56,189,248,0.3);
  background: rgba(255,255,255,0.05);
}
.list-search::before {
  content: '';
  position: absolute;
  left: 12px; top: 50%;
  width: 14px; height: 14px;
  transform: translateY(-50%);
  background: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%239CA3AF' stroke-width='2' stroke-linecap='round'><circle cx='11' cy='11' r='7'/><line x1='21' y1='21' x2='16.65' y2='16.65'/></svg>") no-repeat center / contain;
  pointer-events: none;
}

/* ── Pin / favorite star on number cards ── */
.number-pin-btn {
  position: absolute;
  top: 10px; right: 10px;
  width: 28px; height: 28px;
  border-radius: 8px;
  border: 1px solid rgba(255,255,255,0.08);
  background: rgba(255,255,255,0.03);
  color: var(--text-idle);
  cursor: pointer;
  display: inline-flex; align-items: center; justify-content: center;
  transition: color 0.2s, background 0.2s, border-color 0.2s, transform 0.15s;
  z-index: 3;
}
.number-pin-btn:hover { transform: scale(1.08); background: rgba(255,255,255,0.06); }
.number-pin-btn.pinned { color: var(--warning, #FBBF24); border-color: rgba(251,191,36,0.35); background: rgba(251,191,36,0.1); }
.number-card.pinned { outline: 1px solid rgba(251,191,36,0.18); }

/* ── SMS bulk toolbar ── */
.sms-bulk-bar {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 8px 14px;
  background: rgba(56,189,248,0.05);
  border-bottom: 1px solid rgba(56,189,248,0.12);
  font-size: 11px;
  color: var(--text-idle);
}
.sms-bulk-bar .selected-count { color: var(--accent); font-weight: 600; }
.sms-bulk-bar button {
  padding: 4px 10px;
  border-radius: 6px;
  border: 1px solid rgba(255,255,255,0.08);
  background: rgba(255,255,255,0.03);
  color: var(--text-hover);
  cursor: pointer;
  font-size: 10px;
  font-family: 'JetBrains Mono', monospace;
  transition: background 0.15s, border-color 0.15s;
}
.sms-bulk-bar button:hover { background: rgba(255,255,255,0.06); border-color: rgba(56,189,248,0.3); }
.sms-row .sms-select {
  flex-shrink: 0;
  width: 16px; height: 16px;
  accent-color: var(--accent);
  margin-right: 8px;
}
.skeleton-line.h20 { height: 20px; } .skeleton-line.h8 { height: 8px; }

/* Admin-table skeleton — a single <tr class="skeleton-row"> animates its
   cells as light bars. JS inserts 5-10 of these rows before data loads
   and replaces them in-place once the fetch resolves. */
.adm-table tbody tr.skeleton-row td {
  background: transparent;
  border-bottom: 1px solid rgba(255,255,255,0.03);
}
.adm-table tbody tr.skeleton-row td > span {
  display: block;
  height: 12px;
  background: rgba(255,255,255,0.08);
  border-radius: 6px;
  animation: skeletonPulse var(--anim-fast) ease-in-out infinite;
  width: 70%;
}
.adm-table tbody tr.skeleton-row td:first-child > span { width: 30%; }
.adm-table tbody tr.skeleton-row td:last-child > span { width: 50%; }
.offline-banner { position: fixed; top: 0; left: 0; right: 0; z-index: 9999; background: rgba(239,68,68,0.95); color: #fff; text-align: center; padding: 8px 16px; font-family: 'JetBrains Mono', monospace; font-size: 11px; font-weight: 600; letter-spacing: 0.06em; transform: translateY(-100%); transition: transform 0.3s ease; backdrop-filter: blur(6px); }
.offline-banner.visible { transform: translateY(0); }
.session-expired-overlay { position: fixed; inset: 0; z-index: 9998; background: rgba(0,0,0,0.7); display: flex; align-items: center; justify-content: center; backdrop-filter: blur(4px); }
.session-expired-box { background: #15181F; border: 1px solid rgba(255,255,255,0.1); border-radius: 14px; padding: 28px 24px; text-align: center; max-width: 340px; width: 90%; }
.session-expired-box h3 { font-size: 16px; margin-bottom: 8px; color: #F1F5F9; }
.session-expired-box p { font-size: 12px; color: var(--text-idle); margin-bottom: 16px; line-height: 1.5; }
.session-expired-box button { display: inline-flex; align-items: center; justify-content: center; gap: 6px; padding: 10px 24px; border-radius: 10px; border: none; cursor: pointer; font-family: 'Syne', sans-serif; font-size: 12px; font-weight: 600; letter-spacing: 0.04em; text-transform: uppercase; background: linear-gradient(135deg, #0EA5E9 0%, #38BDF8 55%, #7dd3fc 100%); color: #0a1628; }
.payment-modal > div, .modal-overlay .modal, .adm-modal-box { max-height: 90vh; overflow-y: auto; }

/* ============================================================ ACCESSIBILITY & RESPONSIVE ============================================================ */
body { font-size: clamp(14px, 1.5vw, 18px); }
.page-title { font-size: clamp(20px, 3vw, 26px); }
.nav-label { font-size: clamp(12px, 1.2vw, 13.5px); }
.sms-code { font-size: clamp(16px, 2.2vw, 22px); }
.phone-number { font-size: clamp(14px, 1.8vw, 17px); }
.modal-title { font-size: clamp(14px, 1.6vw, 16px); }
.breadcrumb { font-size: clamp(9px, 1vw, 10.5px); }
.section-title { font-size: clamp(9px, 1vw, 10.5px); }
.sms-block-title { font-size: clamp(12px, 1.4vw, 14px); }
.sms-sender { font-size: clamp(11px, 1.3vw, 13px); }
.adm-stat-card .val { font-size: clamp(20px, 2.8vw, 28px); }
:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
button:focus-visible, a:focus-visible, input:focus-visible, select:focus-visible, textarea:focus-visible, .nav-item:focus-visible, .filter-btn:focus-visible, .ticket-row:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; box-shadow: 0 0 0 4px var(--accent-glow); }
:focus:not(:focus-visible) { outline: none; box-shadow: none; }
@media (prefers-reduced-motion: reduce) { *, *::before, *::after { animation-duration: 0.01ms !important; animation-iteration-count: 1 !important; transition-duration: 0.01ms !important; } .sidebar { transition: none; } .modal-overlay, .payment-modal, .adm-modal-overlay, .adm-profile-overlay { backdrop-filter: none; -webkit-backdrop-filter: none; background: rgba(0,0,0,0.85); } .toast, .offline-banner, .session-expired-overlay { backdrop-filter: none; -webkit-backdrop-filter: none; } }
/* 2FA status pill on the Security → 2FA panel. Three visual states
   match the three server states: loading, enabled, disabled.
   Uses currentColor for the dot so the label + dot stay aligned
   in shape even when theme palette changes. */
.twofa-badge {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 3px 10px;
  border-radius: 999px;
  font-size: 10px;
  font-weight: 600;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  border: 1px solid transparent;
  line-height: 1;
  white-space: nowrap;
}
.twofa-badge::before {
  content: '';
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: currentColor;
  opacity: 0.9;
}
.twofa-badge-on {
  color: #7ec88a;
  background: rgba(126,200,138,0.12);
  border-color: rgba(126,200,138,0.35);
}
.twofa-badge-on::before { box-shadow: 0 0 6px rgba(126,200,138,0.8); }
.twofa-badge-off {
  color: #94a3b8;
  background: rgba(148,163,184,0.08);
  border-color: rgba(148,163,184,0.22);
}
.twofa-badge-loading {
  color: var(--text-idle);
  background: rgba(255,255,255,0.04);
  border-color: rgba(255,255,255,0.1);
}

/* Floating help button — fixed bottom-right, always reachable.
   Hidden on the landing (login) screen; app code toggles .hidden. */
.help-fab {
  position: fixed;
  right: calc(20px + env(safe-area-inset-right, 0px));
  bottom: calc(20px + env(safe-area-inset-bottom, 0px));
  width: 48px;
  height: 48px;
  border-radius: 50%;
  border: none;
  cursor: pointer;
  z-index: 500;
  background: linear-gradient(135deg, #0EA5E9 0%, #38BDF8 55%, #7dd3fc 100%);
  color: #0a1628;
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 8px 20px rgba(14,165,233,0.35), 0 2px 6px rgba(0,0,0,0.5);
  transition: transform 0.2s, box-shadow 0.2s, background 0.2s;
}
.help-fab:hover { transform: translateY(-2px) scale(1.05); box-shadow: 0 12px 28px rgba(14,165,233,0.5); }
.help-fab:active { transform: translateY(0); }
.help-fab.hidden { display: none; }
@media (max-width: 480px) {
  .help-fab { width: 44px; height: 44px; }
}
[data-theme="gold"] .help-fab {
  background: linear-gradient(135deg, #8a6f2e 0%, #c9a84c 55%, #e8d48b 100%);
  box-shadow: 0 8px 20px rgba(201,168,76,0.35), 0 2px 6px rgba(0,0,0,0.5);
}

.sidebar-hamburger { display: none; position: fixed; top: 14px; left: 14px; z-index: 110; width: 40px; height: 40px; border-radius: 10px; background: var(--bg-sidebar); border: 1px solid var(--bg-sidebar-border); align-items: center; justify-content: center; cursor: pointer; color: var(--text-idle); transition: background 0.2s, color 0.2s; }
.sidebar-hamburger:hover { background: var(--bg-hover); color: var(--text-hover); }
.sidebar-hamburger svg { width: 20px; height: 20px; }
.sidebar-backdrop { display: none; position: fixed; inset: 0; background: rgba(0,0,0,0.5); z-index: 100; }
.sidebar-backdrop.visible { display: block; }
@media (max-width: 768px) { .sidebar-hamburger { display: flex; } .sidebar { position: fixed; left: 0; top: 0; bottom: 0; width: 268px; max-width: 80vw; transform: translateX(-100%); transition: transform 0.3s var(--transition); z-index: 105; height: 100vh; border-right: 1px solid var(--bg-sidebar-border); flex-direction: column; } .sidebar.mobile-open { transform: translateX(0); } .sidebar.collapsed { width: 268px; max-width: 80vw; } .sidebar.collapsed .logo-text, .sidebar.collapsed .nav-label, .sidebar.collapsed .nav-badge, .sidebar.collapsed .nav-section-label, .sidebar.collapsed .user-info { opacity: 1; max-width: none; max-height: none; pointer-events: auto; } .sidebar.collapsed .disconnect-btn { display: flex; } .sidebar.collapsed .wallet-connect-btn span { display: inline; } .sidebar.collapsed .wallet-connect-btn { padding: 10px 14px; justify-content: center; } .sidebar.collapsed .toggle-btn { display: none; } .sidebar-nav { flex-direction: column; overflow-y: auto; overflow-x: visible; } .nav-section-label, .nav-divider { display: block; } .toggle-btn { display: none; } .main { padding: 60px 16px 40px; overflow: visible; min-height: 100vh; width: 100%; } body { overflow-y: auto; flex-direction: column; height: auto; } html { height: auto; } .tooltip { display: none !important; } .support-layout { flex-direction: column; height: auto; } .tickets-panel { width: 100%; max-height: 360px; } .ticket-detail { min-height: 380px; } }
/* All padding / gap values below follow the 8px grid (8 / 16 / 24). */
@media (max-width: 480px) {
  .main { padding: 56px 16px 32px; gap: 16px; }
  .page-title { font-size: clamp(18px, 5vw, 22px); }
  .numbers-grid { grid-template-columns: 1fr; }
  .number-card { padding: 16px; }
  .sms-row { padding: 16px; gap: 8px; }
  .sms-sender-icon { width: 32px; height: 32px; font-size: 12px; }
  .sms-code-line { gap: 8px; }
  .sms-copy-btn { padding: 8px 16px; font-size: 10px; }
  .modal { padding: 16px; border-radius: var(--radius-card); }
  .form-row { grid-template-columns: 1fr; }
  .section-bar { flex-direction: column; align-items: flex-start; gap: 8px; }
  .latest-code-alert { flex-direction: column; text-align: center; padding: 16px; gap: 8px; }
  .latest-code-alert .lca-copy { width: 100%; text-align: center; }
  .payment-card { padding: 16px; }
  .adm-stat-grid { grid-template-columns: 1fr 1fr; }
  .toast-wrap { left: 8px; right: 8px; top: 8px; }
  .toast { max-width: none; }
  .theme-switcher { grid-template-columns: 1fr; }
}
@media (min-width: 1440px) { .main { padding: 44px 64px; max-width: 1400px; } .numbers-grid { grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); } .dash-layout { grid-template-columns: 1fr 400px; gap: 24px; } .adm-charts-grid { grid-template-columns: 1fr 360px; } .support-layout { max-width: 1200px; } .adm-stat-grid { grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); } }
@media (min-width: 769px) and (max-width: 900px) { .sidebar { width: 200px; } :root { --sidebar-w: 200px; } .main { padding: 24px 20px; } .numbers-grid { grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); } /* Tablet sidebar (200px) leaves ~140px for .logo-text after icon + gap
    + padding. Drop the logo type size so "PHANTOM NUMBERS" still fits whole. */
    .logo-name { font-size: 11.5px; letter-spacing: 0; }
    .sidebar-header { padding: 18px 8px 16px; }
    .logo-wrap { gap: 5px; }
}
[data-theme="gold"] .section-badge { border-width: 2px; }
[data-theme="gold"] .meta-tag.type { border-width: 2px; border-style: dashed; }
[data-theme="gold"] .sms-unread-dot { border: 2px solid rgba(255,255,255,0.4); }
[data-theme="gold"] .number-card:hover { border-width: 2px; }

/* ──────────────────────────────────────────────
   NFT Customization — Redesigned modal (V7)
   • Desktop: settings left / sticky preview right
   • Tablet: stacked, preview stays sticky under header
   • Mobile + Telegram Mini App: vertical flow with
     compact preview pinned under the title bar.
   Goals: cinematic glass, two-column flow, smaller
   preview, more layouts visible, buttery adaptive.
   ────────────────────────────────────────────── */
.nft-customize-overlay {
    position: fixed; inset: 0; z-index: 1100;
    background: radial-gradient(ellipse at 30% 20%, rgba(56,189,248,0.10) 0%, rgba(0,0,0,0) 55%),
                radial-gradient(ellipse at 80% 80%, rgba(236,72,153,0.08) 0%, rgba(0,0,0,0) 55%),
                rgba(6,8,14,0.86);
    display: flex; align-items: center; justify-content: center;
    backdrop-filter: blur(14px) saturate(120%);
    -webkit-backdrop-filter: blur(14px) saturate(120%);
    opacity: 0; visibility: hidden;
    transition: opacity 0.28s ease, visibility 0.28s ease;
    pointer-events: none;
    padding: 20px;
}
.nft-customize-overlay.active { opacity: 1; visibility: visible; pointer-events: auto; }

.nft-customize-panel {
    background:
      linear-gradient(180deg, rgba(255,255,255,0.02) 0%, rgba(255,255,255,0) 100%),
      var(--bg-card, #0f1118);
    border: 1px solid rgba(255,255,255,0.08);
    border-radius: 22px;
    width: min(96vw, 1120px);
    max-height: 92vh;
    overflow: hidden;
    padding: 0;
    box-shadow:
      0 40px 80px rgba(0,0,0,0.55),
      0 0 0 1px rgba(255,255,255,0.02),
      inset 0 1px 0 rgba(255,255,255,0.05);
    display: flex; flex-direction: column;
    position: relative;
    transform: translateY(12px) scale(0.98);
    opacity: 0;
    transition: transform 0.35s cubic-bezier(0.22, 1, 0.36, 1), opacity 0.25s ease;
}
.nft-customize-overlay.active .nft-customize-panel {
    transform: translateY(0) scale(1);
    opacity: 1;
}
/* Glossy gradient ring around the panel */
.nft-customize-panel::before {
    content: ''; position: absolute; inset: 0;
    border-radius: inherit; pointer-events: none;
    padding: 1px;
    background: linear-gradient(135deg,
        rgba(56,189,248,0.35) 0%,
        rgba(167,139,250,0.20) 38%,
        rgba(236,72,153,0.22) 70%,
        rgba(251,191,36,0.20) 100%);
    -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
    -webkit-mask-composite: xor; mask-composite: exclude;
    opacity: 0.55;
}

.nft-customize-header {
    display: flex; justify-content: space-between; align-items: center;
    padding: 18px 24px 14px;
    border-bottom: 1px solid rgba(255,255,255,0.06);
    background:
      linear-gradient(180deg, rgba(255,255,255,0.03), rgba(255,255,255,0)),
      var(--bg-card, #0f1118);
    flex-shrink: 0; z-index: 12;
}
.nft-customize-header-title {
    display: flex; flex-direction: column; gap: 2px;
}
.nft-customize-header h2 {
    font-size: clamp(18px, 2.2vw, 22px);
    color: var(--text-hover);
    margin: 0;
    font-weight: 700;
    letter-spacing: -0.01em;
}
.nft-customize-header-subtitle {
    font-size: 11px;
    color: var(--text-idle);
    letter-spacing: 0.08em;
    text-transform: uppercase;
    font-family: 'JetBrains Mono', monospace;
}
.nft-close-btn {
    background: rgba(255,255,255,0.04); border: 1px solid rgba(255,255,255,0.08);
    color: var(--text-idle); font-size: 22px;
    cursor: pointer; padding: 0; width: 36px; height: 36px;
    border-radius: 10px; line-height: 1;
    transition: color 0.2s, background 0.2s, transform 0.15s;
    display: flex; align-items: center; justify-content: center;
}
.nft-close-btn:hover {
    color: var(--text-hover);
    background: rgba(255,255,255,0.08);
    transform: rotate(90deg);
}

/* Two-column split body */
.nft-customize-body {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 0.78fr);
    gap: 0;
    flex: 1 1 auto;
    min-height: 0;
}

.nft-customize-settings {
    overflow-y: auto;
    overflow-x: hidden;
    padding: 22px 24px;
    scrollbar-width: thin;
    scrollbar-color: rgba(255,255,255,0.12) transparent;
}
/* Webkit-only scrollbar styling. Wrapped in @supports so Firefox doesn't
 * log "ruleset ignored — bad selector" into the dev console (the
 * standard scrollbar-* properties above already cover Firefox). */
@supports selector(::-webkit-scrollbar) {
  .nft-customize-settings::-webkit-scrollbar { width: 6px; }
  .nft-customize-settings::-webkit-scrollbar-track { background: transparent; }
  .nft-customize-settings::-webkit-scrollbar-thumb {
      background: rgba(255,255,255,0.08);
      border-radius: 4px;
  }
  .nft-customize-settings::-webkit-scrollbar-thumb:hover { background: rgba(255,255,255,0.15); }
}

.nft-customize-preview {
    padding: 22px;
    border-left: 1px solid rgba(255,255,255,0.06);
    background:
      linear-gradient(180deg, rgba(56,189,248,0.03) 0%, rgba(0,0,0,0) 70%),
      rgba(255,255,255,0.01);
    display: flex; flex-direction: column;
    overflow-y: auto;
}

.nft-preview-container {
    display: flex; flex-direction: column;
    gap: 14px;
    position: sticky;
    top: 0;
}
.nft-preview-card {
    width: 100%;
    max-width: 260px;
    margin: 0 auto;
    aspect-ratio: 1;
    border-radius: 18px;
    overflow: hidden;
    box-shadow:
      0 20px 50px rgba(0,0,0,0.55),
      0 0 0 1px rgba(255,255,255,0.06);
    transition: box-shadow 0.4s, transform 0.3s;
    position: relative;
    flex-shrink: 0;
}
.nft-preview-card:hover {
    transform: translateY(-2px);
    box-shadow:
      0 28px 60px rgba(0,0,0,0.65),
      0 0 0 1px rgba(56,189,248,0.20);
}
.nft-preview-card img {
    width: 100%; height: 100%;
    object-fit: cover;
    display: block;
    /* JS-driven smooth crossfade (V6). Kept at 0.22s so the response
       feels instant but not jerky. opacity starts at 1 — JS flips it
       down, swaps src, flips it up. */
    transition: opacity 0.22s ease;
    opacity: 1;
}
/* Shimmer animation overlay on preview card */
.nft-preview-card::before {
    content: ''; position: absolute; inset: 0; z-index: 1;
    pointer-events: none; border-radius: inherit;
    background: linear-gradient(
        105deg,
        transparent 35%,
        rgba(255,255,255,0.06) 45%,
        rgba(255,255,255,0.12) 50%,
        rgba(255,255,255,0.06) 55%,
        transparent 65%
    );
    background-size: 250% 100%;
    animation: nftShimmer 4s ease-in-out infinite;
}
@keyframes nftShimmer {
    0% { background-position: 200% 0; }
    100% { background-position: -200% 0; }
}
/* Disable shimmer glare when no animation selected */
.nft-preview-card.no-glare::before { animation: none; opacity: 0; }
/* Glow pulse around preview */
.nft-preview-card.glow-pulse {
    animation: nftGlowPulse 3s ease-in-out infinite;
}
@keyframes nftGlowPulse {
    0%, 100% { box-shadow: 0 8px 32px rgba(0,0,0,0.5); }
    50% { box-shadow: 0 8px 48px rgba(99,102,241,0.35), 0 0 20px rgba(99,102,241,0.15); }
}
.nft-preview-card.loading::after {
    content: ''; position: absolute; inset: 0;
    background: linear-gradient(90deg, transparent 30%, rgba(255,255,255,0.08) 50%, transparent 70%);
    animation: skeletonPulse 1.5s infinite;
}
.nft-preview-label {
    position: absolute; bottom: 8px; left: 50%; transform: translateX(-50%);
    background: rgba(0,0,0,0.7); color: rgba(255,255,255,0.7);
    font-size: 11px; font-weight: 600; padding: 3px 12px;
    border-radius: 8px; letter-spacing: 1px;
    pointer-events: none; text-transform: uppercase;
}

.nft-styles-grid {
    margin-bottom: 20px;
    max-height: none;
    overflow-y: visible;
    padding-right: 0;
}
.nft-styles-grid::-webkit-scrollbar { width: 4px; }
.nft-styles-grid::-webkit-scrollbar-track { background: transparent; }
.nft-styles-grid::-webkit-scrollbar-thumb { background: var(--border, #333); border-radius: 4px; }

/* Layout selector */
.nft-layout-section { margin-bottom: 16px; }
.nft-section-title {
    display: flex; align-items: baseline; gap: 10px;
    margin-bottom: 10px;
}
.nft-section-label {
    font-size: 11px; font-weight: 700; text-transform: uppercase;
    color: var(--text-idle, #888); letter-spacing: 0.08em;
}
.nft-section-count {
    font-size: 10px; color: var(--text-idle);
    opacity: 0.6; font-family: 'JetBrains Mono', monospace;
}
.nft-layout-label {
    font-size: 11px; font-weight: 600; text-transform: uppercase;
    color: var(--text-idle, #888); letter-spacing: 0.5px;
    margin-bottom: 8px;
}
/* Layouts switch from a single horizontal scroll to a 2-row wrap grid so
   all 20 macetов are visible at once without paging. Each chip carries a
   tier dot (premium/exclusive) and an inline price hint. */
.nft-layouts-scroll {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(112px, 1fr));
    gap: 8px;
    padding: 4px 0 8px;
    max-height: 180px;
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: thin;
}
.nft-layouts-scroll::-webkit-scrollbar { width: 4px; }
.nft-layouts-scroll::-webkit-scrollbar-thumb { background: rgba(255,255,255,0.08); border-radius: 2px; }
.nft-layout-chip {
    padding: 10px 12px; border-radius: 12px;
    border: 1px solid rgba(255,255,255,0.08);
    background: linear-gradient(180deg, rgba(255,255,255,0.02), rgba(255,255,255,0));
    color: var(--text-idle, #999);
    font-size: 12px; font-weight: 600;
    cursor: pointer; transition: border-color 0.2s, background 0.2s, color 0.2s, transform 0.15s;
    white-space: normal;
    position: relative;
    text-align: left;
    line-height: 1.25;
    min-height: 50px;
    display: flex; flex-direction: column; gap: 4px;
}
.nft-layout-chip:hover { border-color: rgba(56,189,248,0.45); transform: translateY(-1px); }
.nft-layout-chip.selected {
    border-color: rgba(56,189,248,0.65); color: var(--text-hover);
    background: linear-gradient(135deg, rgba(56,189,248,0.15) 0%, rgba(56,189,248,0.04) 100%);
    box-shadow: 0 0 0 1px rgba(56,189,248,0.25), 0 4px 16px rgba(56,189,248,0.15);
}
.nft-layout-chip .chip-price {
    font-size: 11px; font-weight: 400; display: block; opacity: 0.7;
}
.nft-layout-chip .chip-badge {
    position: absolute; top: -4px; right: -4px;
    width: 10px; height: 10px; border-radius: 50%;
    box-shadow: 0 0 6px currentColor, inset 0 1px 0 rgba(255,255,255,0.6);
}
/* Glossy tier dots — gradient + inner highlight so they read as jewels
   rather than flat colour chips. */
.nft-layout-chip .chip-badge.premium {
    background: linear-gradient(135deg, #fcd34d 0%, #f59e0b 55%, #b45309 100%);
    color: rgba(245,158,11,0.6);
}
.nft-layout-chip .chip-badge.exclusive {
    background: linear-gradient(135deg, #f9a8d4 0%, #ec4899 55%, #9d174d 100%);
    color: rgba(236,72,153,0.6);
}

/* Random button */
.nft-random-row {
    display: flex; justify-content: flex-end; margin-bottom: 12px;
}
.nft-random-btn {
    display: inline-flex; align-items: center; gap: 6px;
    padding: 6px 14px; border-radius: 8px;
    background: rgba(99,102,241,0.12); color: var(--accent);
    border: 1px solid rgba(99,102,241,0.25);
    font-size: 12px; font-weight: 600; cursor: pointer;
    transition: all 0.2s; font-family: 'Syne', sans-serif;
}
.nft-random-btn:hover {
    background: rgba(99,102,241,0.22); transform: scale(1.03);
}
.nft-random-btn svg { flex-shrink: 0; }

/* Tier sections */
.nft-tier-section { margin-bottom: 16px; }
.nft-tier-header {
    display: flex; align-items: baseline; gap: 10px;
    margin-bottom: 10px; padding-bottom: 6px;
    border-bottom: 1px solid var(--bg-sidebar-border, #222);
}
.nft-tier-label {
    font-size: 13px; font-weight: 700; color: var(--accent);
    text-transform: uppercase; letter-spacing: 0.06em;
}
/* Glossy tier labels (V5) — gradient text + subtle drop-shadow. Only
   applied to Premium / Exclusive so Standard keeps its quieter voice. */
.tier-premium .nft-tier-label {
    background: linear-gradient(135deg, #fde68a 0%, #f59e0b 50%, #b45309 100%);
    -webkit-background-clip: text; background-clip: text;
    -webkit-text-fill-color: transparent; color: transparent;
    filter: drop-shadow(0 1px 0 rgba(180,83,9,0.35)) drop-shadow(0 0 6px rgba(245,158,11,0.35));
}
.tier-exclusive .nft-tier-label {
    background: linear-gradient(135deg, #fbcfe8 0%, #ec4899 45%, #9d174d 100%);
    -webkit-background-clip: text; background-clip: text;
    -webkit-text-fill-color: transparent; color: transparent;
    filter: drop-shadow(0 1px 0 rgba(157,23,77,0.35)) drop-shadow(0 0 6px rgba(236,72,153,0.35));
}
.tier-premium .nft-tier-header,
.tier-exclusive .nft-tier-header {
    border-bottom-color: transparent;
    position: relative;
}
.tier-premium .nft-tier-header::after,
.tier-exclusive .nft-tier-header::after {
    content: '';
    position: absolute; left: 0; right: 0; bottom: 0;
    height: 1px;
}
.tier-premium .nft-tier-header::after {
    background: linear-gradient(to right, rgba(245,158,11,0.55), transparent);
}
.tier-exclusive .nft-tier-header::after {
    background: linear-gradient(to right, rgba(236,72,153,0.55), transparent);
}
.nft-tier-sublabel {
    font-size: 11px; color: var(--text-idle, #888);
}
.nft-tier-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(100px, 1fr));
    gap: 8px;
}

.nft-style-option {
    background: var(--bg-main);
    border: 2px solid var(--bg-sidebar-border);
    border-radius: 10px;
    padding: 10px 8px;
    cursor: pointer;
    transition: border-color 0.2s, background 0.2s, box-shadow 0.2s;
    text-align: center;
    position: relative;
}
.nft-style-option:hover {
    border-color: var(--accent);
}
.nft-style-option.selected {
    border-color: var(--accent);
    background: rgba(56,189,248,0.1);
    box-shadow: 0 0 12px rgba(56,189,248,0.25);
}
@keyframes styleSelectPop {
    0% { transform: scale(0.95); }
    50% { transform: scale(1.04); }
    100% { transform: scale(1); }
}
.style-swatch {
    width: 100%; height: 6px; border-radius: 4px;
    margin-bottom: 8px; opacity: 0.85;
}
.nft-style-option .style-name {
    font-weight: 600; color: var(--text-hover);
    font-size: 12px; margin-bottom: 2px;
    white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.nft-style-option .style-price {
    font-size: 11px; color: var(--text-idle);
}
.nft-style-option .style-price.free { color: var(--accent); }
.nft-style-option .style-badge {
    position: absolute; top: -6px; right: -6px;
    background:
      linear-gradient(180deg, rgba(255,255,255,0.45) 0%, rgba(255,255,255,0) 45%),
      linear-gradient(135deg, #7dd3fc 0%, #38BDF8 55%, #0369a1 100%);
    color: #0b1220; font-size: 10px; font-weight: 700;
    padding: 2px 9px; border-radius: 10px;
    text-transform: uppercase; letter-spacing: 0.04em;
    box-shadow: 0 2px 4px rgba(3,105,161,0.35), inset 0 1px 0 rgba(255,255,255,0.45);
    text-shadow: 0 1px 0 rgba(255,255,255,0.2);
}

.style-colors {
    display: flex; gap: 4px; justify-content: center; margin-top: 6px;
}
.style-colors .dot {
    width: 12px; height: 12px; border-radius: 50%;
    border: 1px solid rgba(255,255,255,0.2);
}

.nft-custom-colors {
    display: none;
    padding: 16px;
    background: var(--bg-main);
    border-radius: 12px;
    margin-bottom: 16px;
}
.nft-custom-colors.visible { display: block; }
.color-picker-row {
    display: flex; align-items: center; gap: 12px; margin-bottom: 12px;
}
.color-picker-row label {
    color: var(--text-idle); font-size: 13px; width: 100px;
}
.color-picker-row input[type="color"] {
    width: 48px; height: 32px; border: none; cursor: pointer;
    background: transparent; border-radius: 6px;
}
.color-picker-row .color-hex {
    color: var(--text-idle); font-size: 12px; font-family: 'JetBrains Mono', monospace;
}

.nft-effects-section {
    padding: 12px 16px; margin-bottom: 16px;
    background: var(--bg-main, #0d0f12);
    border-radius: 12px;
}
.nft-effects-section > .toggle-label {
    color: var(--text-main, #fff); font-size: 14px; font-weight: 500; margin-bottom: 2px;
}
.nft-effects-section > .toggle-hint {
    color: var(--text-idle, #999); font-size: 12px; margin-bottom: 10px;
}
.nft-effects-grid {
    display: flex; flex-direction: column; gap: 4px;
}
.nft-effect-row {
    display: flex; align-items: center; justify-content: space-between;
    padding: 5px 0;
}
.nft-effect-row .effect-name {
    color: var(--text-main, #ddd); font-size: 13px;
}
.nft-toggle-switch {
    position: relative; width: 48px; height: 26px;
    background: var(--border, #333); border-radius: 13px;
    cursor: pointer; transition: background 0.2s; flex-shrink: 0;
}
.nft-toggle-switch.active {
    background: var(--accent, #6366f1);
}
.nft-toggle-switch::after {
    content: ''; position: absolute;
    top: 3px; left: 3px; width: 20px; height: 20px;
    background: #fff; border-radius: 50%;
    transition: transform 0.2s;
}
.nft-toggle-switch.active::after {
    transform: translateX(22px);
}

/* Animation section */
.nft-animation-section {
    padding: 12px 16px; margin-bottom: 16px;
    background: var(--bg-main, #0d0f12);
    border-radius: 12px;
}
.nft-animation-header { margin-bottom: 10px; }
.nft-animation-dropdown {
    width: 100%; padding: 10px 12px;
    background: var(--bg-sidebar, #141620);
    color: var(--text-main, #fff);
    border: 1px solid var(--bg-sidebar-border, #222);
    border-radius: 8px; font-size: 13px;
    font-family: 'JetBrains Mono', monospace;
    cursor: pointer; outline: none;
    transition: border-color 0.2s;
    appearance: none;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' fill='%23888' viewBox='0 0 16 16'%3E%3Cpath d='M1.5 5.5l6.5 6.5 6.5-6.5'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right 12px center;
    padding-right: 32px;
}
.nft-animation-dropdown:focus { border-color: var(--accent); }
.nft-animation-dropdown option {
    background: var(--bg-sidebar, #141620);
    color: var(--text-main, #fff);
    padding: 8px;
}

.nft-price-summary {
    background: var(--bg-main);
    border-radius: 12px;
    padding: 16px;
    margin-bottom: 20px;
}
.nft-price-row {
    display: flex; justify-content: space-between;
    color: var(--text-idle); font-size: 14px;
    margin-bottom: 6px;
}
.nft-price-row.total {
    color: var(--text-hover); font-weight: 700; font-size: 16px;
    border-top: 1px solid var(--bg-sidebar-border); padding-top: 8px; margin-top: 8px;
}

/* Preview sidebar meta block */
.nft-preview-meta {
    display: grid;
    grid-template-columns: 1fr;
    gap: 6px;
    padding: 10px 14px;
    border-radius: 12px;
    background: rgba(255,255,255,0.02);
    border: 1px solid rgba(255,255,255,0.04);
}
.nft-preview-meta-row {
    display: flex; justify-content: space-between; align-items: baseline;
    font-size: 11px;
    gap: 10px;
}
.nft-preview-meta-label {
    color: var(--text-idle);
    text-transform: uppercase;
    letter-spacing: 0.08em;
    font-weight: 600;
}
.nft-preview-meta-value {
    color: var(--text-hover);
    font-weight: 600;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    max-width: 60%;
    text-align: right;
}

.nft-customize-actions {
    display: flex; gap: 10px;
    padding: 14px 0 4px;
    margin-top: 4px;
}
.nft-customize-actions button {
    flex: 1; padding: 14px; border-radius: 12px;
    font-weight: 700; font-size: 14px; cursor: pointer;
    border: none; transition: all 0.2s;
    font-family: 'Syne', sans-serif;
    letter-spacing: 0.02em;
}
.nft-btn-cancel {
    background: rgba(255,255,255,0.03); color: var(--text-idle);
    border: 1px solid rgba(255,255,255,0.08) !important;
    flex: 0 0 40%;
}
.nft-btn-cancel:hover { color: var(--text-hover); background: rgba(255,255,255,0.06); }
.nft-btn-proceed {
    background: linear-gradient(135deg, #38BDF8 0%, #0EA5E9 60%, #0369a1 100%);
    color: #061223;
    position: relative; overflow: hidden;
    box-shadow: 0 6px 18px rgba(56,189,248,0.35), inset 0 1px 0 rgba(255,255,255,0.35);
}
.nft-btn-proceed:hover {
    filter: brightness(1.08);
    transform: translateY(-1px);
    box-shadow: 0 10px 24px rgba(56,189,248,0.45), inset 0 1px 0 rgba(255,255,255,0.45);
}
.nft-btn-proceed .nft-btn-proceed-label {
    position: relative; z-index: 2;
}
.nft-btn-proceed .nft-btn-proceed-glint {
    position: absolute; inset: 0;
    background: linear-gradient(110deg, transparent 30%, rgba(255,255,255,0.6) 50%, transparent 70%);
    transform: translateX(-100%);
    animation: nftProceedGlint 3.6s ease-in-out infinite;
    pointer-events: none;
}
@keyframes nftProceedGlint {
    0%, 20%    { transform: translateX(-120%); opacity: 0; }
    50%        { opacity: 0.9; }
    70%, 100%  { transform: translateX(120%); opacity: 0; }
}

/* ─── Tablet: collapse to single column, preview stays near top ─── */
@media (max-width: 960px) {
    .nft-customize-overlay { padding: 12px; }
    .nft-customize-panel { border-radius: 18px; }
    .nft-customize-body { grid-template-columns: minmax(0, 1fr); }
    .nft-customize-preview {
        order: -1; border-left: none;
        border-bottom: 1px solid rgba(255,255,255,0.06);
        padding: 16px 18px;
    }
    .nft-customize-settings { padding: 16px 18px 24px; }
    .nft-preview-card { max-width: 200px; }
    .nft-preview-container { position: static; }
    /* Hide the duplicate big price on desktop-preview → rely on bottom summary */
}

/* ─── Mobile (≤640) and Telegram Mini App sizes ─── */
@media (max-width: 640px) {
    .nft-customize-overlay { padding: 0; align-items: flex-end; }
    .nft-customize-panel {
        width: 100%;
        max-height: 96vh;
        border-radius: 18px 18px 0 0;
        border-bottom: none;
    }
    .nft-customize-panel::before { opacity: 0.75; }
    .nft-customize-header { padding: 14px 18px 12px; }
    .nft-customize-header h2 { font-size: 17px; }
    .nft-customize-header-subtitle { font-size: 10px; }
    .nft-customize-preview { padding: 14px 14px 10px; }
    .nft-customize-settings { padding: 14px 14px 22px; }
    .nft-preview-card { max-width: 160px; border-radius: 14px; }
    .nft-preview-label { font-size: 9px; padding: 2px 9px; }
    .nft-preview-meta { padding: 8px 12px; }
    .nft-layouts-scroll {
        grid-template-columns: repeat(auto-fill, minmax(96px, 1fr));
        max-height: 160px;
    }
    .nft-layout-chip { font-size: 11px; padding: 8px 10px; min-height: 44px; }
    .nft-customize-actions button { padding: 12px; font-size: 13px; }
    .nft-btn-cancel { flex: 0 0 34%; }
    /* Handle bar like iOS bottom-sheet */
    .nft-customize-panel::after {
        content: ''; position: absolute;
        top: 6px; left: 50%; transform: translateX(-50%);
        width: 36px; height: 4px; border-radius: 2px;
        background: rgba(255,255,255,0.18);
        pointer-events: none;
    }
}

/* Very small screens (Telegram MiniApp on tiny phones) */
@media (max-width: 380px) {
    .nft-customize-header h2 { font-size: 16px; }
    .nft-preview-card { max-width: 140px; }
    .nft-layouts-scroll { grid-template-columns: repeat(auto-fill, minmax(88px, 1fr)); }
}

/* API Docs sidebar link */
.api-docs-link {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 6px 10px;
  margin-bottom: 6px;
  font-family: 'JetBrains Mono', monospace;
  font-size: 10px;
  color: var(--text-idle);
  text-decoration: none;
  border-radius: 6px;
  transition: all .2s;
  letter-spacing: 0.04em;
}
.api-docs-link:hover {
  color: var(--accent);
  background: rgba(56,189,248,0.06);
}

/* ─── Support ticket typing / read receipts ─── */
.msg-receipt { margin-left: 6px; font-size: 10px; opacity: 0.6; }
.msg-receipt.read { color: #38BDF8; opacity: 1; }
.typing-indicator { display: none; }
.typing-dots { display: inline-flex; gap: 3px; }
.typing-dots > span {
  width: 5px; height: 5px; border-radius: 50%;
  background: currentColor; opacity: 0.35;
  animation: typingDot 1.2s infinite ease-in-out;
}
.typing-dots > span:nth-child(2) { animation-delay: 0.15s; }
.typing-dots > span:nth-child(3) { animation-delay: 0.3s; }
@keyframes typingDot {
  0%, 80%, 100% { opacity: 0.25; transform: translateY(0); }
  40% { opacity: 1; transform: translateY(-2px); }
}
.ticket-row .unread-badge {
  display: inline-block; min-width: 16px; padding: 0 5px;
  margin-left: 6px; border-radius: 8px; background: #38BDF8;
  color: #0B1224; font-size: 10px; font-weight: 700;
  font-family: 'JetBrains Mono', monospace; text-align: center;
  line-height: 16px;
}

/* ===== TX MONITOR ===== */
.tx-mon-header {
  display: flex; align-items: center; justify-content: space-between;
  gap: 12px; flex-wrap: wrap; margin-bottom: 14px;
}
.tx-mon-sub-tabs { display: flex; gap: 6px; flex-wrap: wrap; }
.tx-mon-meta {
  font-size: 11px; color: var(--text-idle);
  font-family: 'JetBrains Mono', monospace;
  display: flex; align-items: center; gap: 6px;
}
.tx-mon-pulse::before {
  content: ''; display: inline-block; width: 6px; height: 6px;
  border-radius: 50%; background: #22c55e; margin-right: 6px;
  animation: txMonPulse 2s infinite;
}
@keyframes txMonPulse {
  0%, 100% { opacity: 1; }
  50% { opacity: 0.3; }
}
.tx-mon-live-dot {
  display: inline-block; width: 8px; height: 8px; border-radius: 50%;
  background: #ef4444; margin-left: 8px;
  animation: txLiveBlink 1.4s infinite;
}
@keyframes txLiveBlink {
  0%, 100% { opacity: 1; }
  50% { opacity: 0.3; }
}
.tx-tape-wrap { margin-top: 12px; }
.tx-tape { display: flex; flex-direction: column; gap: 6px; }
.tx-row {
  display: grid;
  grid-template-columns: 60px 110px 170px 1fr 150px;
  gap: 10px; align-items: center;
  padding: 10px 12px;
  background: rgba(255,255,255,0.02);
  border: 1px solid rgba(255,255,255,0.06);
  border-radius: 10px;
  transition: background 0.15s, border-color 0.15s;
}
.tx-row:hover { background: rgba(255,255,255,0.04); }
.tx-row-ok { border-left: 3px solid #22c55e; }
.tx-row-warn { border-left: 3px solid #eab308; background: rgba(234,179,8,0.06); }
.tx-row-orphan { border-left: 3px solid #38bdf8; background: rgba(56,189,248,0.05); }
.tx-row-ghost { border-left: 3px solid #ef4444; background: rgba(239,68,68,0.06); }
.tx-col-ts { font-family: 'JetBrains Mono', monospace; font-size: 11px; }
.tx-ago {
  display: inline-block; padding: 2px 6px; border-radius: 4px;
  background: rgba(255,255,255,0.06); color: #E2E8F0; font-weight: 700;
}
.tx-ts-abs { display: block; color: var(--text-idle); font-size: 10px; margin-top: 3px; }
.tx-col-amt { font-family: 'JetBrains Mono', monospace; }
.tx-amt-ton { font-size: 14px; font-weight: 700; color: var(--accent, #38BDF8); }
.tx-amt-usd { display: block; font-size: 10px; color: var(--text-idle); margin-top: 2px; }
.tx-col-wallets { font-family: 'JetBrains Mono', monospace; font-size: 11px; }
.tx-col-wallets > div { margin: 2px 0; }
.tx-col-comment { overflow: hidden; }
.tx-comment-txt { font-size: 11px; color: #cbd5e1; display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.tx-chips { display: flex; gap: 4px; margin-top: 4px; flex-wrap: wrap; }
.tx-chip {
  display: inline-block; padding: 2px 6px; border-radius: 10px;
  background: rgba(255,255,255,0.06); color: #cbd5e1; font-size: 10px;
  font-family: 'JetBrains Mono', monospace;
}
.tx-col-actions { text-align: right; font-family: 'JetBrains Mono', monospace; font-size: 11px; }
.tx-intent-link { margin-bottom: 4px; }
.tx-mono-link {
  color: #38BDF8; text-decoration: none; font-family: 'JetBrains Mono', monospace;
  border-bottom: 1px dashed rgba(56,189,248,0.3);
}
.tx-mono-link:hover { border-bottom-color: #38BDF8; }
.tx-hash-link { font-size: 10px; color: var(--text-idle); }
.tx-lbl {
  font-family: 'JetBrains Mono', monospace; font-size: 9px;
  color: var(--text-idle); text-transform: uppercase; letter-spacing: 0.08em;
  margin-right: 4px;
}

@media (max-width: 900px) {
  .tx-row {
    grid-template-columns: 60px 1fr;
    grid-auto-rows: min-content;
  }
  .tx-col-amt, .tx-col-wallets, .tx-col-comment, .tx-col-actions {
    grid-column: 2;
  }
}

/* Tx detail modal + generic adm modal fallback */
.adm-modal-overlay.open { display: flex; }
.adm-modal-card {
  background: #161921; border: 1px solid rgba(255,255,255,0.08);
  border-radius: 16px; padding: 20px; min-width: 320px;
  max-width: 520px; width: 92%;
  box-shadow: 0 24px 48px rgba(0,0,0,0.5);
  max-height: 90vh; overflow: auto;
}
.adm-modal-head {
  display: flex; align-items: center; justify-content: space-between;
  margin-bottom: 14px; gap: 10px;
}
.adm-modal-close {
  background: none; border: none; color: var(--text-idle);
  font-size: 24px; line-height: 1; cursor: pointer; padding: 4px 8px;
  border-radius: 6px;
}
.adm-modal-close:hover { background: rgba(255,255,255,0.06); color: #F1F5F9; }

.tx-detail-grid {
  display: grid; grid-template-columns: 1fr 1fr; gap: 10px;
  padding: 10px; background: rgba(255,255,255,0.02); border-radius: 10px;
}
.tx-timeline {
  display: flex; flex-direction: column; gap: 12px;
  padding: 12px; background: rgba(255,255,255,0.02); border-radius: 10px;
}
.tx-tl-step {
  display: grid; grid-template-columns: 16px 1fr; gap: 10px;
  position: relative;
}
.tx-tl-step:not(:last-child)::before {
  content: ''; position: absolute; left: 7px; top: 18px; bottom: -12px;
  width: 2px; background: rgba(255,255,255,0.1);
}
.tx-tl-dot {
  width: 16px; height: 16px; border-radius: 50%;
  background: #38BDF8; box-shadow: 0 0 8px rgba(56,189,248,0.4);
  margin-top: 2px;
}
.tx-tl-dot-paid, .tx-tl-dot-minted, .tx-tl-dot-nft_minted { background: #22c55e; box-shadow: 0 0 8px rgba(34,197,94,0.4); }
.tx-tl-dot-mint_failed, .tx-tl-dot-refund_pending, .tx-tl-dot-refund_processed { background: #ef4444; box-shadow: 0 0 8px rgba(239,68,68,0.4); }
.tx-tl-dot-chain_tx_observed { background: #a78bfa; box-shadow: 0 0 8px rgba(167,139,250,0.4); }
.tx-tl-step-name { font-size: 13px; font-weight: 600; color: #F1F5F9; }
.tx-tl-ts { font-size: 11px; color: var(--text-idle); margin-top: 2px; }
.tx-tl-details {
  font-size: 10px; color: var(--text-idle); margin-top: 4px;
  word-break: break-all; padding: 4px 8px;
  background: rgba(0,0,0,0.25); border-radius: 6px;
}

/* ───── Admin Health panels (observability dashboards) ───── */
.adm-h-kpi-grid {
  display: grid; gap: 10px;
  grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
}
.adm-h-kpi {
  background: rgba(255,255,255,0.03);
  border: 1px solid rgba(255,255,255,0.06);
  border-radius: 10px; padding: 12px 14px;
  transition: border-color 0.2s;
}
.adm-h-kpi:hover { border-color: rgba(56,189,248,0.2); }
.adm-h-kpi.red {
  background: rgba(248,113,113,0.08);
  border-color: rgba(248,113,113,0.3);
}
.adm-h-kpi .k {
  font-size: 11px; color: var(--text-idle); text-transform: uppercase;
  letter-spacing: 0.08em; margin-bottom: 6px;
  font-family: 'JetBrains Mono', monospace;
}
.adm-h-kpi .v {
  font-size: 20px; font-weight: 700; color: var(--text-active);
  font-family: 'JetBrains Mono', monospace;
}
.adm-h-subhdr {
  font-size: 12px; font-weight: 600;
  color: var(--text-idle);
  font-family: 'JetBrains Mono', monospace;
  text-transform: uppercase; letter-spacing: 0.1em;
  margin: 12px 0 10px;
}
.adm-h-alert {
  margin-top: 14px; padding: 10px 14px;
  background: rgba(248,113,113,0.1);
  border: 1px solid rgba(248,113,113,0.3);
  border-radius: 8px;
  color: #FCA5A5; font-size: 13px;
  font-family: 'JetBrains Mono', monospace;
}
.adm-h-errlog {
  background: rgba(0,0,0,0.25);
  border: 1px solid rgba(255,255,255,0.05);
  border-radius: 8px; padding: 6px 0;
  max-height: 260px; overflow: auto;
}
.adm-h-errrow {
  padding: 6px 12px; display: flex; gap: 10px;
  font-size: 11px; font-family: 'JetBrains Mono', monospace;
  border-bottom: 1px solid rgba(255,255,255,0.04);
}
.adm-h-errrow:last-child { border-bottom: none; }
.adm-h-errrow .ts { color: var(--text-idle); flex-shrink: 0; }
.adm-h-errrow .msg { flex: 1; word-break: break-word; color: #FCA5A5; }
.adm-h-table-wrap {
  background: rgba(255,255,255,0.02);
  border: 1px solid rgba(255,255,255,0.06);
  border-radius: 8px; overflow: auto;
}
.adm-h-table {
  width: 100%; border-collapse: collapse; font-size: 12px;
}
.adm-h-table th {
  text-align: left; padding: 8px 12px;
  background: rgba(0,0,0,0.25);
  color: var(--text-idle);
  font-size: 11px; font-weight: 600;
  text-transform: uppercase; letter-spacing: 0.06em;
  border-bottom: 1px solid rgba(255,255,255,0.08);
}
.adm-h-table td {
  padding: 8px 12px;
  border-bottom: 1px solid rgba(255,255,255,0.04);
  color: var(--text-active);
  vertical-align: middle;
}
.adm-h-table tr:last-child td { border-bottom: none; }
.adm-h-badge {
  display: inline-flex; align-items: center; justify-content: center;
  min-width: 18px; height: 18px; margin-left: 6px;
  padding: 0 5px; border-radius: 9px;
  font-size: 10px; font-weight: 800; color: #0a0c10;
  background: #F87171;
  font-family: 'JetBrains Mono', monospace;
  box-shadow: 0 0 8px rgba(248,113,113,0.5);
}
.btn.btn-xs {
  padding: 4px 10px; font-size: 10px; border-radius: 6px;
  margin-right: 4px;
}
.adm-h-empty-hint {
  padding: 10px 14px; margin-bottom: 14px;
  background: rgba(56,189,248,0.06);
  border: 1px dashed rgba(56,189,248,0.25);
  border-radius: 8px;
  color: var(--text-idle); font-size: 12px;
  font-family: 'JetBrains Mono', monospace;
}
.adm-live-log {
  background: #05070a;
  border: 1px solid rgba(255,255,255,0.08);
  border-radius: 8px;
  padding: 6px 0;
  max-height: 620px; overflow-y: auto; overflow-x: hidden;
  font-family: 'JetBrains Mono', monospace;
  font-size: 11px;
}
.ll-row {
  display: grid;
  grid-template-columns: 72px 68px 1fr;
  gap: 8px;
  padding: 2px 10px;
  border-bottom: 1px solid rgba(255,255,255,0.02);
  white-space: pre-wrap; word-break: break-all;
}
.ll-row:hover { background: rgba(56,189,248,0.04); }
.ll-t { color: var(--text-idle); flex-shrink: 0; }
.ll-l { color: #38BDF8; font-weight: 700; flex-shrink: 0; }
.ll-m { color: #cbd5e1; }
.ll-error .ll-l { color: #F87171; }
.ll-error .ll-m { color: #FCA5A5; }
.ll-warn .ll-l { color: #F59E0B; }
.ll-warn .ll-m { color: #FDE68A; }
.ll-ok .ll-l { color: #22C55E; }
.ll-dim .ll-l, .ll-dim .ll-m { color: #64748b; }

/* ─── Permissions cards ─── */
.adm-perm-cards {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(420px, 1fr));
  gap: 14px;
}
.adm-perm-card {
  background: rgba(255,255,255,0.03);
  border: 1px solid rgba(255,255,255,0.08);
  border-radius: 12px;
  padding: 14px 16px 12px;
}
.adm-perm-card-head {
  display: flex; justify-content: space-between;
  align-items: flex-start; gap: 12px;
  padding-bottom: 10px;
  border-bottom: 1px solid rgba(255,255,255,0.06);
}
.adm-perm-name {
  font-family: 'JetBrains Mono', monospace;
  font-size: 14px; font-weight: 700; color: var(--text-active);
}
.adm-perm-wallet {
  font-family: 'JetBrains Mono', monospace;
  font-size: 10px; color: var(--text-idle);
  margin-top: 3px; word-break: break-all; max-width: 240px;
}
.adm-perm-badges {
  display: flex; gap: 6px; align-items: center; flex-wrap: wrap;
  flex-shrink: 0;
}
.adm-perm-badge {
  font-size: 10px; font-weight: 800;
  padding: 3px 8px; border-radius: 6px;
  font-family: 'JetBrains Mono', monospace;
  letter-spacing: 0.06em;
}
.adm-perm-badge.env { background: rgba(168,85,247,0.2); color: #C4B5FD; }
.adm-perm-badge.super { background: rgba(168,85,247,0.35); color: #F5F3FF; }
.adm-perm-count {
  font-size: 10px; font-weight: 700;
  padding: 3px 8px; border-radius: 6px;
  background: rgba(56,189,248,0.15); color: #7DD3FC;
  font-family: 'JetBrains Mono', monospace;
}
.adm-perm-locked-msg {
  margin-top: 10px; padding: 10px 12px;
  background: rgba(168,85,247,0.08);
  border: 1px dashed rgba(168,85,247,0.3);
  border-radius: 8px;
  color: var(--text-idle); font-size: 12px;
  font-family: 'JetBrains Mono', monospace;
}
.adm-perm-groups {
  margin-top: 12px;
  display: flex; flex-direction: column; gap: 12px;
}
.adm-perm-group-title {
  font-size: 10px; font-weight: 700;
  color: var(--text-idle);
  text-transform: uppercase; letter-spacing: 0.1em;
  margin-bottom: 6px;
  font-family: 'JetBrains Mono', monospace;
}
.adm-perm-group-items {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 2px 12px;
}
.adm-perm-item {
  display: flex; align-items: center; gap: 7px;
  padding: 5px 8px; border-radius: 6px;
  font-size: 12px; color: var(--text-active);
  cursor: pointer;
  transition: background 0.15s;
}
.adm-perm-item:hover { background: rgba(56,189,248,0.06); }
.adm-perm-item input { cursor: pointer; }
.adm-perm-item input:checked + span { color: #7DD3FC; font-weight: 500; }
.adm-perm-actions {
  margin-top: 12px; padding-top: 10px;
  border-top: 1px solid rgba(255,255,255,0.06);
  display: flex; gap: 6px; flex-wrap: wrap;
}
@media (max-width: 720px) {
  .adm-perm-group-items { grid-template-columns: 1fr; }
  .adm-perm-cards { grid-template-columns: 1fr; }
}

/* ═══════════════ ADMIN LOGS TAB — redesigned ═══════════════ */
.adm-logs-overview {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
  gap: 10px;
  margin-bottom: 14px;
}
.adm-logs-stat {
  padding: 14px 16px;
  border-radius: 12px;
  background: linear-gradient(180deg, rgba(255,255,255,0.03) 0%, rgba(255,255,255,0.015) 100%);
  border: 1px solid rgba(255,255,255,0.05);
  position: relative;
  overflow: hidden;
  transition: transform 0.2s var(--transition), border-color 0.2s var(--transition);
}
.adm-logs-stat:hover { transform: translateY(-2px); border-color: rgba(56,189,248,0.25); }
.adm-logs-stat::before {
  content: '';
  position: absolute; inset: 0;
  background: radial-gradient(120% 80% at 0% 0%, var(--stat-glow, rgba(56,189,248,0.1)), transparent 55%);
  pointer-events: none;
}
.adm-logs-stat .lbl {
  font-family: 'JetBrains Mono', monospace;
  font-size: 10px; letter-spacing: 0.12em;
  text-transform: uppercase; color: var(--text-idle);
  position: relative;
}
.adm-logs-stat .val {
  font-family: 'JetBrains Mono', monospace;
  font-size: 24px; font-weight: 700;
  color: var(--stat-color, #E2E8F0);
  margin-top: 4px;
  position: relative;
}
.adm-logs-stat .sub {
  font-size: 11px; color: var(--text-idle);
  margin-top: 4px;
  position: relative;
}
.adm-logs-stat.cat-events { --stat-glow: rgba(56,189,248,0.12); --stat-color: #7DD3FC; }
.adm-logs-stat.cat-users { --stat-glow: rgba(34,211,166,0.12); --stat-color: #6EE7B7; }
.adm-logs-stat.cat-admin { --stat-glow: rgba(168,85,247,0.12); --stat-color: #C4B5FD; }
.adm-logs-stat.cat-errors { --stat-glow: rgba(248,113,113,0.12); --stat-color: #FCA5A5; }

.adm-logs-spark {
  display: flex; gap: 2px; align-items: flex-end;
  height: 28px; margin-top: 8px;
  position: relative;
}
.adm-logs-spark > span {
  flex: 1; min-width: 2px;
  background: linear-gradient(180deg, var(--stat-color, #38BDF8), rgba(56,189,248,0.2));
  border-radius: 1px;
  min-height: 1px;
  transition: opacity 0.15s;
  opacity: 0.85;
}
.adm-logs-spark > span:hover { opacity: 1; }

.adm-logs-panels {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: 10px;
  margin-bottom: 14px;
}
.adm-logs-panel {
  padding: 14px 16px;
  border-radius: 12px;
  background: rgba(255,255,255,0.02);
  border: 1px solid rgba(255,255,255,0.05);
}
.adm-logs-panel-title {
  font-family: 'JetBrains Mono', monospace;
  font-size: 10px;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  color: var(--text-idle);
  margin-bottom: 10px;
  display: flex; align-items: center; gap: 6px;
}
.adm-logs-bar-row {
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 6px;
  align-items: center;
  padding: 5px 0;
  font-size: 12px;
  cursor: pointer;
  border-radius: 5px;
  padding-left: 4px;
  transition: background 0.15s;
}
.adm-logs-bar-row:hover { background: rgba(56,189,248,0.05); }
.adm-logs-bar-row .bar-label {
  font-family: 'JetBrains Mono', monospace;
  color: var(--text-hover);
  position: relative;
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
}
.adm-logs-bar-row .bar-label::before {
  content: '';
  position: absolute; inset: 0;
  background: linear-gradient(90deg, rgba(56,189,248,0.15) 0%, rgba(56,189,248,0.05) var(--bar-pct, 0%), transparent var(--bar-pct, 0%));
  border-radius: 3px;
  pointer-events: none;
  z-index: -1;
}
.adm-logs-bar-row .bar-label span { position: relative; z-index: 1; padding-left: 2px; }
.adm-logs-bar-row .bar-count {
  font-family: 'JetBrains Mono', monospace;
  color: var(--accent);
  font-weight: 700;
  font-size: 11px;
}

.adm-logs-chips {
  display: flex;
  flex-direction: column;
  gap: 8px;
  margin-bottom: 14px;
  padding: 12px 14px;
  background: rgba(255,255,255,0.02);
  border: 1px solid rgba(255,255,255,0.05);
  border-radius: 12px;
}
.adm-logs-chips-row {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  align-items: center;
}
.adm-logs-chip-label {
  font-family: 'JetBrains Mono', monospace;
  font-size: 10px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--text-idle);
  min-width: 64px;
  padding-right: 4px;
}
.adm-chip {
  padding: 5px 12px;
  border-radius: 999px;
  background: rgba(255,255,255,0.035);
  border: 1px solid rgba(255,255,255,0.06);
  color: var(--text-idle);
  font-size: 11.5px;
  font-family: inherit;
  cursor: pointer;
  transition: all 0.18s var(--transition);
  white-space: nowrap;
  display: inline-flex;
  align-items: center;
  gap: 5px;
}
.adm-chip:hover {
  border-color: rgba(56,189,248,0.35);
  color: var(--text-hover);
  background: rgba(56,189,248,0.06);
}
.adm-chip.active {
  background: linear-gradient(135deg, rgba(56,189,248,0.18), rgba(34,211,166,0.14));
  border-color: rgba(56,189,248,0.5);
  color: #E0F2FE;
  box-shadow: 0 0 12px rgba(56,189,248,0.15);
}

/* ═══ Admin · DLQ / time-window toolbar ═══ */
.adm-dlq-toolbar {
  display: flex;
  gap: 12px;
  margin-bottom: 16px;
  flex-wrap: wrap;
  align-items: stretch;
}
.adm-dlq-toolbar-controls {
  margin-left: auto;
  display: inline-flex;
  align-items: center;
  gap: 12px;
  padding: 8px 12px;
  border-radius: 12px;
  background: linear-gradient(135deg, rgba(56,189,248,0.04), rgba(99,102,241,0.04));
  border: 1px solid rgba(56,189,248,0.16);
}
.adm-dlq-window-label {
  font-family: 'JetBrains Mono', monospace;
  font-size: 10.5px;
  text-transform: uppercase;
  letter-spacing: 0.14em;
  color: var(--text-idle);
}
.adm-segmented {
  display: inline-flex;
  background: rgba(15,23,42,0.55);
  border: 1px solid rgba(255,255,255,0.06);
  border-radius: 999px;
  padding: 3px;
  gap: 2px;
}
.adm-seg-btn {
  appearance: none;
  border: 0;
  background: transparent;
  color: var(--text-idle);
  font-family: 'JetBrains Mono', monospace;
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.04em;
  padding: 6px 14px;
  border-radius: 999px;
  cursor: pointer;
  transition: all 0.18s var(--transition);
  white-space: nowrap;
}
.adm-seg-btn:hover {
  color: #E0F2FE;
  background: rgba(56,189,248,0.08);
}
.adm-seg-btn.active {
  background: linear-gradient(135deg, #38BDF8, #22D3A6);
  color: #0F172A;
  box-shadow: 0 6px 16px rgba(56,189,248,0.32), inset 0 1px 0 rgba(255,255,255,0.35);
  text-shadow: none;
}
.adm-action-btn {
  appearance: none;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 8px 16px;
  border-radius: 10px;
  border: 1px solid rgba(56,189,248,0.45);
  background: linear-gradient(135deg, rgba(56,189,248,0.16), rgba(99,102,241,0.16));
  color: #E0F2FE;
  font-family: 'JetBrains Mono', monospace;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  transition: all 0.18s var(--transition);
}
.adm-action-btn:hover {
  border-color: rgba(56,189,248,0.7);
  background: linear-gradient(135deg, rgba(56,189,248,0.28), rgba(99,102,241,0.24));
  box-shadow: 0 6px 18px rgba(56,189,248,0.22);
  transform: translateY(-1px);
}
.adm-action-btn:active {
  transform: translateY(0);
}
.adm-action-btn-icon {
  font-size: 14px;
  display: inline-block;
}
.adm-action-btn:hover .adm-action-btn-icon {
  animation: adm-spin 0.6s ease;
}
@keyframes adm-spin {
  from { transform: rotate(0deg); }
  to   { transform: rotate(360deg); }
}

.adm-logs-advanced {
  margin-bottom: 14px;
  border-radius: 10px;
  background: rgba(255,255,255,0.02);
  border: 1px solid rgba(255,255,255,0.05);
}
.adm-logs-advanced > summary {
  list-style: none;
  cursor: pointer;
  padding: 10px 14px;
  font-family: 'JetBrains Mono', monospace;
  font-size: 11px;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--text-idle);
  transition: color 0.15s;
}
.adm-logs-advanced > summary:hover { color: var(--text-hover); }
.adm-logs-advanced > summary::-webkit-details-marker { display: none; }
.adm-logs-advanced[open] > summary { border-bottom: 1px solid rgba(255,255,255,0.05); }
.adm-logs-advanced-body {
  padding: 12px 14px;
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  align-items: center;
}
.adm-logs-advanced-body input,
.adm-logs-advanced-body select {
  padding: 6px 10px;
  border-radius: 8px;
  background: rgba(0,0,0,0.2);
  border: 1px solid rgba(255,255,255,0.06);
  color: var(--text-hover);
  font-size: 11.5px;
  font-family: 'JetBrains Mono', monospace;
  min-width: 120px;
  transition: border-color 0.15s;
}
.adm-logs-advanced-body input:focus,
.adm-logs-advanced-body select:focus {
  border-color: rgba(56,189,248,0.45);
  outline: none;
}
.adm-logs-advanced-actions {
  display: flex; gap: 6px; flex-wrap: wrap;
  margin-left: auto;
}

/* Feed row styling — one event per row, structured summary */
.adm-log-feed {
  display: flex;
  flex-direction: column;
  gap: 4px;
}
.adm-log-row {
  display: grid;
  grid-template-columns: 32px 120px 1fr auto;
  gap: 12px;
  align-items: center;
  padding: 10px 12px;
  border-radius: 10px;
  background: rgba(255,255,255,0.02);
  border: 1px solid rgba(255,255,255,0.04);
  transition: all 0.15s var(--transition);
}
.adm-log-row:hover {
  background: rgba(56,189,248,0.04);
  border-color: rgba(56,189,248,0.18);
}
.adm-log-row.expanded {
  background: rgba(56,189,248,0.05);
  border-color: rgba(56,189,248,0.25);
}
.adm-log-icon {
  width: 28px; height: 28px;
  border-radius: 8px;
  display: flex; align-items: center; justify-content: center;
  font-size: 14px;
  background: rgba(255,255,255,0.04);
  border: 1px solid rgba(255,255,255,0.06);
  flex-shrink: 0;
}
.adm-log-icon.cat-admin { background: rgba(168,85,247,0.12); border-color: rgba(168,85,247,0.28); }
.adm-log-icon.cat-login { background: rgba(34,197,94,0.12); border-color: rgba(34,197,94,0.28); }
.adm-log-icon.cat-generate { background: rgba(56,189,248,0.12); border-color: rgba(56,189,248,0.28); }
.adm-log-icon.cat-mint { background: rgba(250,204,21,0.12); border-color: rgba(250,204,21,0.28); }
.adm-log-icon.cat-payment { background: rgba(34,211,166,0.12); border-color: rgba(34,211,166,0.28); }
.adm-log-icon.cat-verify { background: rgba(99,102,241,0.12); border-color: rgba(99,102,241,0.28); }
.adm-log-icon.cat-support { background: rgba(245,158,11,0.12); border-color: rgba(245,158,11,0.28); }
.adm-log-icon.cat-wallet { background: rgba(56,189,248,0.12); border-color: rgba(56,189,248,0.28); }
.adm-log-icon.cat-other { background: rgba(148,163,184,0.12); border-color: rgba(148,163,184,0.28); }

.adm-log-verb {
  font-family: 'JetBrains Mono', monospace;
  font-size: 11px;
  padding: 2px 8px;
  border-radius: 5px;
  background: rgba(255,255,255,0.04);
  color: var(--text-hover);
  display: inline-block;
  text-align: center;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.adm-log-verb.cat-admin { background: rgba(168,85,247,0.12); color: #C4B5FD; }
.adm-log-verb.cat-login { background: rgba(34,197,94,0.12); color: #86EFAC; }
.adm-log-verb.cat-payment { background: rgba(34,211,166,0.12); color: #6EE7B7; }
.adm-log-verb.cat-mint { background: rgba(250,204,21,0.12); color: #FDE68A; }
.adm-log-verb.cat-support { background: rgba(245,158,11,0.12); color: #FCD34D; }
.adm-log-verb.cat-verify { background: rgba(99,102,241,0.12); color: #A5B4FC; }

.adm-log-summary {
  min-width: 0;
  font-size: 12.5px;
  color: var(--text-hover);
  line-height: 1.4;
}
.adm-log-summary .who {
  font-family: 'JetBrains Mono', monospace;
  color: var(--accent);
  font-size: 11.5px;
  margin-right: 6px;
}
.adm-log-summary .muted { color: var(--text-idle); }
.adm-log-summary .diff-key { color: var(--text-idle); font-family: 'JetBrains Mono', monospace; font-size: 11px; }
.adm-log-summary .diff-old { color: var(--text-idle); text-decoration: line-through; font-family: 'JetBrains Mono', monospace; font-size: 11px; }
.adm-log-summary .diff-new { color: #7DD3FC; font-family: 'JetBrains Mono', monospace; font-size: 11px; }
.adm-log-summary .subj-id { color: var(--text-idle); font-size: 11px; font-family: 'JetBrains Mono', monospace; }

.adm-log-time {
  font-family: 'JetBrains Mono', monospace;
  font-size: 10.5px;
  color: var(--text-idle);
  text-align: right;
  white-space: nowrap;
  display: flex;
  flex-direction: column;
  gap: 2px;
  align-items: flex-end;
}
.adm-log-time .rel { color: var(--accent); font-weight: 600; font-size: 11px; }

.adm-log-expand {
  grid-column: 1 / -1;
  padding: 10px 12px 2px 50px;
  font-family: 'JetBrains Mono', monospace;
  font-size: 11px;
  color: var(--text-idle);
  border-top: 1px dashed rgba(255,255,255,0.06);
  margin-top: 8px;
}
.adm-log-expand pre {
  background: rgba(0,0,0,0.3);
  padding: 8px 10px;
  border-radius: 6px;
  overflow-x: auto;
  color: var(--text-hover);
  white-space: pre-wrap;
  word-break: break-word;
}

@media (max-width: 640px) {
  .adm-log-row {
    grid-template-columns: 28px 1fr;
    grid-template-rows: auto auto;
  }
  .adm-log-verb, .adm-log-time { grid-column: 2; }
  .adm-log-summary { grid-column: 2; }
  .adm-logs-chip-label { min-width: auto; }
}

/* ═══════════════ SUPPLY — Limited-mode toggle ═══════════════ */
.adm-supply-toggle-row {
  display: flex; justify-content: space-between; align-items: center; gap: 18px;
  padding: 14px 16px;
  border-radius: 12px;
  background: linear-gradient(135deg, rgba(56,189,248,0.06), rgba(168,85,247,0.04));
  border: 1px solid rgba(56,189,248,0.18);
}
.adm-supply-toggle-title {
  font-size: 14px; font-weight: 700; color: var(--text-hover);
  font-family: var(--font-display);
}
.adm-supply-toggle-sub {
  font-size: 11.5px; color: var(--text-idle); line-height: 1.5;
  margin-top: 3px; max-width: 360px;
}
.adm-toggle {
  display: inline-flex; align-items: center; gap: 10px;
  cursor: pointer; user-select: none; flex-shrink: 0;
}
.adm-toggle input[type="checkbox"] {
  appearance: none; -webkit-appearance: none;
  position: absolute; opacity: 0; pointer-events: none;
}
.adm-toggle-track {
  position: relative; display: inline-block;
  width: 60px; height: 34px;
  background: rgba(255,255,255,0.06);
  border: 1px solid rgba(255,255,255,0.1);
  border-radius: 999px;
  transition: background 0.22s var(--transition), border-color 0.22s var(--transition);
}
.adm-toggle-thumb {
  position: absolute;
  top: 3px; left: 3px;
  width: 26px; height: 26px;
  background: linear-gradient(145deg, #ffffff, #d1d5db);
  border-radius: 50%;
  box-shadow: 0 2px 6px rgba(0,0,0,0.35);
  transition: transform 0.24s var(--transition), background 0.24s var(--transition);
}
.adm-toggle input:checked + .adm-toggle-track {
  background: linear-gradient(135deg, rgba(56,189,248,0.85), rgba(34,211,166,0.85));
  border-color: rgba(56,189,248,0.6);
  box-shadow: 0 0 14px rgba(56,189,248,0.35);
}
.adm-toggle input:checked + .adm-toggle-track .adm-toggle-thumb {
  transform: translateX(26px);
  background: linear-gradient(145deg, #ffffff, #e0f2fe);
}
.adm-toggle input:focus-visible + .adm-toggle-track {
  outline: 2px solid rgba(56,189,248,0.5);
  outline-offset: 2px;
}
.adm-toggle-state {
  font-family: 'JetBrains Mono', monospace;
  font-size: 11px; letter-spacing: 0.12em;
  font-weight: 700;
  color: var(--text-idle);
  min-width: 30px;
}
.adm-toggle input:checked ~ .adm-toggle-state {
  color: var(--accent);
}

/* ═══════════════ ADMIN TAB — section header / explainer ═══════════════ */
.adm-section-hero {
  display: flex; gap: 14px; align-items: flex-start;
  padding: 14px 18px;
  border-radius: 12px;
  background: linear-gradient(135deg, rgba(56,189,248,0.06), rgba(34,211,166,0.04));
  border: 1px solid rgba(56,189,248,0.15);
  margin-bottom: 16px;
}
.adm-section-hero-icon {
  width: 40px; height: 40px;
  border-radius: 10px;
  background: linear-gradient(145deg, rgba(56,189,248,0.22), rgba(168,85,247,0.15));
  border: 1px solid rgba(56,189,248,0.3);
  display: flex; align-items: center; justify-content: center;
  font-size: 20px; flex-shrink: 0;
  box-shadow: 0 0 14px rgba(56,189,248,0.12);
}
.adm-section-hero-title {
  font-family: var(--font-display);
  font-size: 15px; font-weight: 700; color: var(--text-hover);
}
.adm-section-hero-desc {
  font-size: 12.5px; color: var(--text-idle);
  line-height: 1.55; margin-top: 3px;
}
.adm-section-hero-desc code {
  background: rgba(0,0,0,0.3);
  border: 1px solid rgba(255,255,255,0.06);
  padding: 1px 5px; border-radius: 4px;
  font-family: 'JetBrains Mono', monospace;
  font-size: 11px; color: var(--accent);
}

/* ═══════════════ MY FEED — cards & grouping ═══════════════ */
.adm-myfeed-summary {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
  gap: 8px;
  margin-bottom: 14px;
}
.adm-myfeed-chip {
  padding: 10px 12px;
  border-radius: 10px;
  background: rgba(255,255,255,0.03);
  border: 1px solid rgba(255,255,255,0.05);
  transition: all 0.15s var(--transition);
  cursor: pointer;
}
.adm-myfeed-chip:hover { border-color: rgba(56,189,248,0.4); background: rgba(56,189,248,0.05); }
.adm-myfeed-chip .n {
  font-family: 'JetBrains Mono', monospace;
  font-size: 22px; font-weight: 700; color: var(--accent);
}
.adm-myfeed-chip .lbl {
  font-family: 'JetBrains Mono', monospace;
  font-size: 10px; text-transform: uppercase; letter-spacing: 0.1em;
  color: var(--text-idle); margin-top: 4px;
}

/* ═══════════════ PERMISSIONS — explainer hero tweaks ═══════════════ */
.adm-perm-grp-legend {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  gap: 10px;
  margin-bottom: 16px;
  padding: 14px 16px;
  border-radius: 12px;
  background: rgba(255,255,255,0.02);
  border: 1px solid rgba(255,255,255,0.05);
}
.adm-perm-grp-legend-item {
  display: flex; gap: 10px; align-items: flex-start;
  font-size: 12px;
}
.adm-perm-grp-legend-item .emoji {
  font-size: 16px; flex-shrink: 0;
}
.adm-perm-grp-legend-item .title {
  font-weight: 600; color: var(--text-hover);
  font-size: 12.5px;
}
.adm-perm-grp-legend-item .desc {
  color: var(--text-idle); font-size: 11px;
  line-height: 1.4; margin-top: 2px;
}

/* ═══════════════ BULK — safety / warnings ═══════════════ */
.adm-bulk-help {
  display: flex; gap: 10px; align-items: flex-start;
  padding: 10px 12px;
  border-radius: 10px;
  background: rgba(56,189,248,0.04);
  border: 1px solid rgba(56,189,248,0.15);
  font-size: 12px; color: var(--text-idle);
  margin-bottom: 12px; line-height: 1.5;
}
.adm-bulk-help.danger {
  background: rgba(248,113,113,0.05);
  border-color: rgba(248,113,113,0.25);
  color: #FCA5A5;
}
.adm-bulk-help code {
  background: rgba(0,0,0,0.3);
  padding: 1px 5px; border-radius: 4px;
  font-family: 'JetBrains Mono', monospace; font-size: 11px;
}

/* ═══════════════ Sidebar-footer pinned INSIDE the drawer (phones) ═══════════════ */
/* At ≤768px the sidebar is a slide-in drawer (`transform: translateX`).
   We want Profile + Disconnect (or the Connect button) to always be
   visible on the very first paint when the user opens the drawer —
   not tucked below a long scrolling nav list.
   `.sidebar-nav` becomes the only scrollable region; the footer is
   flex-shrink:0 and margin-top:auto, so it sticks to the bottom of
   the drawer regardless of how many nav items there are. Uses 100dvh
   so iOS' dynamic viewport does not push the footer below the fold. */
@media (max-width: 768px) {
  .sidebar {
    height: 100vh;
    height: 100dvh;
    max-height: 100vh;
    max-height: 100dvh;
    display: flex;
    flex-direction: column;
    overflow: hidden; /* the nav region handles its own scroll */
  }
  .sidebar-nav {
    flex: 1 1 auto;
    min-height: 0;
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
  }
  .sidebar-footer {
    flex-shrink: 0;
    margin-top: auto;
    position: sticky;
    bottom: 0;
    background: rgba(17, 19, 24, 0.96);
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    border-top: 1px solid var(--bg-sidebar-border);
    z-index: 2;
  }
}

/* In tablet range (769–1024px) the sidebar is a static top strip, not
   a drawer. The footer trails the horizontal nav and scrolls away
   with the page — make it sticky at the bottom of the viewport so
   it stays in view. */
@media (min-width: 769px) and (max-width: 1024px) {
  .sidebar-footer {
    position: sticky;
    bottom: 0;
    background: rgba(17, 19, 24, 0.94);
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
    border-top: 1px solid var(--bg-sidebar-border);
    z-index: 20;
  }
}

/* ── Docs modal (tabbed iframe viewer for /dev-guide + /docs) ── */
/* `[hidden]` rule MUST come before the base rule and use !important — otherwise
 * the base `display:flex` below wins over the HTML5 `hidden` attribute, and
 * the modal flashes full-screen (oversized headphones icon) during FOUC on
 * page refresh. */
.docs-modal-overlay[hidden] { display: none !important; }
.docs-modal-overlay {
  position: fixed;
  inset: 0;
  background: rgba(5, 7, 12, 0.78);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  z-index: 10050;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 24px;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.18s ease;
}
.docs-modal-overlay[data-open="true"] { opacity: 1; pointer-events: auto; }
.docs-modal {
  position: relative;
  width: min(1200px, 100%);
  height: min(900px, calc(100vh - 48px));
  background: #0d1117;
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: 18px;
  box-shadow: 0 30px 80px rgba(0, 0, 0, 0.6), 0 0 1px rgba(56, 189, 248, 0.15);
  display: flex;
  flex-direction: column;
  overflow: hidden;
  transform: translateY(12px) scale(0.985);
  transition: transform 0.22s ease;
}
.docs-modal-overlay[data-open="true"] .docs-modal { transform: translateY(0) scale(1); }

.docs-modal-head {
  padding: 14px 18px 0;
  border-bottom: 1px solid rgba(255, 255, 255, 0.06);
  background: linear-gradient(180deg, rgba(56, 189, 248, 0.04), rgba(255, 255, 255, 0.01));
  flex-shrink: 0;
}
.docs-modal-head-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
}
.docs-modal-head-title {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  color: #38BDF8;
  min-width: 0;
}
.docs-modal-head-title svg { flex-shrink: 0; }
.docs-modal-title {
  font-family: 'Syne', sans-serif;
  font-weight: 700;
  font-size: 15px;
  color: #E2E8F0;
  letter-spacing: 0.02em;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.docs-modal-actions { display: flex; align-items: center; gap: 8px; flex-shrink: 0; }
.docs-modal-close,
.docs-modal-open-ext {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 34px;
  height: 34px;
  border: 1px solid rgba(255, 255, 255, 0.08);
  background: rgba(255, 255, 255, 0.03);
  color: #94A3B8;
  border-radius: 10px;
  cursor: pointer;
  text-decoration: none;
  transition: all 0.15s;
  padding: 0;
}
.docs-modal-open-ext:hover {
  background: rgba(56, 189, 248, 0.12);
  color: #38BDF8;
  border-color: rgba(56, 189, 248, 0.3);
}
.docs-modal-close { color: #F87171; }
.docs-modal-close:hover {
  background: rgba(239, 68, 68, 0.14);
  color: #FCA5A5;
  border-color: rgba(239, 68, 68, 0.4);
  transform: scale(1.05);
}

/* Tabs row */
.docs-modal-tabs {
  display: flex;
  gap: 4px;
  margin-top: 12px;
  padding: 4px;
  background: rgba(0, 0, 0, 0.3);
  border: 1px solid rgba(255, 255, 255, 0.05);
  border-radius: 12px;
  width: fit-content;
}
.docs-modal-tab {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  padding: 8px 14px;
  border: 0;
  background: transparent;
  color: #94A3B8;
  font-family: 'JetBrains Mono', monospace;
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.02em;
  border-radius: 9px;
  cursor: pointer;
  transition: all 0.16s ease;
  white-space: nowrap;
}
.docs-modal-tab:hover {
  color: #E2E8F0;
  background: rgba(255, 255, 255, 0.03);
}
.docs-modal-tab.active {
  background: linear-gradient(180deg, rgba(56, 189, 248, 0.18), rgba(56, 189, 248, 0.08));
  color: #7DD3FC;
  box-shadow: 0 0 0 1px rgba(56, 189, 248, 0.25), 0 4px 12px rgba(56, 189, 248, 0.08);
}
.docs-modal-tab svg { flex-shrink: 0; }

.docs-modal-subtitle {
  padding: 10px 0 14px;
  font-size: 12px;
  color: #94A3B8;
  line-height: 1.5;
  min-height: 1em;
}

.docs-modal-body {
  flex: 1;
  min-height: 0;
  background: #0a0c10;
  position: relative;
}
.docs-modal-body iframe {
  width: 100%;
  height: 100%;
  border: 0;
  display: block;
  background: #0a0c10;
}

/* Spinner while iframe loads */
.docs-modal-loading {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  background: #0a0c10;
  pointer-events: none;
  transition: opacity 0.25s;
  opacity: 1;
}
.docs-modal-loading[data-done="true"] { opacity: 0; }
.docs-modal-spinner {
  width: 34px;
  height: 34px;
  border: 2.5px solid rgba(56, 189, 248, 0.15);
  border-top-color: #38BDF8;
  border-radius: 50%;
  animation: docsSpin 0.8s linear infinite;
}
@keyframes docsSpin { to { transform: rotate(360deg); } }

/* Floating close button for mobile — invisible on desktop.
   Sits above everything so thumb can always find it. */
.docs-modal-close-mobile {
  display: none;
  position: absolute;
  top: 10px;
  right: 10px;
  width: 44px;
  height: 44px;
  border: 1px solid rgba(239, 68, 68, 0.35);
  background: rgba(15, 18, 25, 0.95);
  color: #FCA5A5;
  border-radius: 999px;
  cursor: pointer;
  z-index: 3;
  align-items: center;
  justify-content: center;
  padding: 0;
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.5), 0 0 0 4px rgba(239, 68, 68, 0.08);
  transition: transform 0.15s, background 0.15s;
}
.docs-modal-close-mobile:active { transform: scale(0.92); }

/* Mobile — reflow header to keep close button reachable */
@media (max-width: 720px) {
  .docs-modal-overlay { padding: 0; }
  .docs-modal {
    width: 100vw;
    height: 100vh;
    height: 100dvh;
    max-height: 100vh;
    max-height: 100dvh;
    border-radius: 0;
    border-left: 0;
    border-right: 0;
    border-top: 0;
  }
  .docs-modal-head {
    padding: 12px 14px 0;
    padding-top: max(12px, env(safe-area-inset-top));
  }
  .docs-modal-head-row {
    align-items: flex-start;
    padding-right: 48px; /* room for the floating X */
  }
  .docs-modal-head-title { gap: 8px; }
  .docs-modal-title { font-size: 13px; max-width: 100%; }
  /* Hide the small desktop close button — replaced by the big floating one */
  .docs-modal-close { display: none; }
  .docs-modal-open-ext {
    width: 38px;
    height: 38px;
    border-radius: 10px;
  }
  .docs-modal-tabs {
    width: 100%;
    margin-top: 10px;
    overflow-x: auto;
    scrollbar-width: none;
  }
  .docs-modal-tabs::-webkit-scrollbar { display: none; }
  .docs-modal-tab {
    flex: 1;
    justify-content: center;
    font-size: 11px;
    padding: 9px 10px;
    min-width: 0;
  }
  .docs-modal-subtitle {
    padding: 10px 0 12px;
    font-size: 11.5px;
    line-height: 1.45;
  }
  .docs-modal-close-mobile {
    display: inline-flex;
    top: max(10px, env(safe-area-inset-top));
    right: 10px;
  }
}

/* Extra-small phones — squeeze even more */
@media (max-width: 380px) {
  .docs-modal-tab { font-size: 10.5px; padding: 9px 8px; gap: 5px; }
  .docs-modal-tab svg { width: 12px; height: 12px; }
  .docs-modal-title { font-size: 12px; }
  .docs-modal-subtitle { font-size: 11px; }
}
[hidden] { display: none !important; }

/* ════════════════════════════════════════════════════════════
   ADMIN — Sectioned Long-Page (Concept K)
   Sticky-TOC слева + длинная страница справа со всеми разделами
   как карточками; клик по карточке → drill-down в полный экран.
══════════════════════════════════════════════════════════════ */
.adm-shell {
  display: grid;
  grid-template-columns: 220px minmax(0, 1fr);
  gap: 0;
  align-items: start;
  margin-top: 8px;
}
.adm-shell .ck-toc {
  position: sticky;
  top: 16px;
  max-height: calc(100vh - 32px);
  overflow-y: auto;
  padding: 14px 10px;
  background: rgba(255,255,255,0.015);
  border: 1px solid rgba(255,255,255,0.06);
  border-radius: 12px;
  scrollbar-width: thin;
}
.adm-shell .ck-toc::-webkit-scrollbar { width: 6px; }
.adm-shell .ck-toc::-webkit-scrollbar-thumb { background: rgba(255,255,255,0.08); border-radius: 3px; }
.adm-shell .adm-main { min-width: 0; padding-left: 24px; }

.ck-toc .ck-toc-brand {
  display: flex; align-items: center; gap: 10px;
  padding: 4px 6px 12px;
  border-bottom: 1px solid rgba(255,255,255,0.06);
  margin-bottom: 10px;
}
.ck-toc .ck-toc-brand .mark {
  width: 26px; height: 26px; border-radius: 7px;
  background: linear-gradient(135deg, #F87171, #F59E0B);
  display: flex; align-items: center; justify-content: center;
  font-size: 13px;
}
.ck-toc .ck-toc-brand .nm { font-weight: 700; font-size: 13px; color: #F1F5F9; }
.ck-toc .ck-toc-brand .sub { font-size: 9.5px; color: var(--text-idle); font-family: 'JetBrains Mono', monospace; letter-spacing: 0.08em; }

.ck-toc-search {
  display: flex; align-items: center; gap: 8px;
  padding: 7px 10px;
  background: rgba(255,255,255,0.04);
  border: 1px solid rgba(255,255,255,0.08);
  border-radius: 8px;
  font-size: 12px; color: var(--text-idle);
  margin-bottom: 10px;
  cursor: text;
}
.ck-toc-search input {
  background: transparent; border: 0; outline: none;
  color: inherit; font-size: 12px; width: 100%;
  font-family: inherit;
}
.ck-toc-search .kbd {
  margin-left: auto;
  font-family: 'JetBrains Mono', monospace; font-size: 10px;
  background: rgba(255,255,255,0.04); padding: 1px 5px; border-radius: 4px;
}
.ck-toc-group { margin: 6px 0; }
.ck-toc-grouptitle {
  font-family: 'JetBrains Mono', monospace; font-size: 9.5px;
  letter-spacing: 0.12em; color: var(--text-idle);
  text-transform: uppercase;
  padding: 6px 8px;
}
.ck-toc-link {
  display: flex; align-items: center; gap: 8px;
  padding: 6px 10px; border-radius: 6px; cursor: pointer;
  font-size: 12px; color: var(--text-idle);
  transition: all 0.15s;
  position: relative;
  text-decoration: none;
}
.ck-toc-link:hover { background: rgba(255,255,255,0.04); color: var(--text-hover); }
.ck-toc-link.active {
  color: #F1F5F9;
  background: rgba(56,189,248,0.08);
}
.ck-toc-link.active::before {
  content: ""; position: absolute; left: 0; top: 6px; bottom: 6px;
  width: 2px; border-radius: 0 2px 2px 0; background: var(--accent);
}
.ck-toc-link .dot {
  width: 5px; height: 5px; border-radius: 50%;
  background: var(--text-idle); opacity: 0.4;
  flex-shrink: 0;
}
.ck-toc-link.active .dot { background: var(--accent); opacity: 1; box-shadow: 0 0 4px var(--accent); }
.ck-toc-link .badge {
  margin-left: auto;
  font-family: 'JetBrains Mono', monospace; font-size: 9px;
  padding: 1px 4px; border-radius: 4px;
  background: rgba(248,113,113,0.12); color: #F87171;
}

/* Long-page контейнер */
.ck-page { max-width: 1080px; padding-bottom: 60px; }
.ck-section {
  scroll-margin-top: 16px;
  padding-bottom: 28px;
  margin-bottom: 28px;
  border-bottom: 1px solid rgba(255,255,255,0.06);
}
.ck-section:last-child { border-bottom: 0; }
.ck-section .stitle {
  display: flex; align-items: center; gap: 12px;
  margin-bottom: 6px;
  flex-wrap: wrap;
}
.ck-section .stitle .anchor {
  font-family: 'JetBrains Mono', monospace; font-size: 11px; color: var(--text-idle);
  padding: 2px 8px; border-radius: 5px;
  background: rgba(255,255,255,0.04); border: 1px solid rgba(255,255,255,0.06);
}
.ck-section .stitle h2 {
  font-size: 22px; font-weight: 700; color: #F1F5F9; letter-spacing: -0.01em;
  margin: 0;
}
.ck-section .sdesc {
  font-size: 12.5px; color: var(--text-idle); margin-bottom: 16px;
  max-width: 720px;
}
.ck-card-row {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(170px, 1fr));
  gap: 10px;
}
.ck-card {
  background: rgba(255,255,255,0.025);
  border: 1px solid rgba(255,255,255,0.06);
  border-radius: 10px;
  padding: 14px; cursor: pointer;
  transition: all 0.15s;
  text-align: left;
  font-family: inherit;
  color: inherit;
  display: block;
}
.ck-card:hover { border-color: rgba(56,189,248,0.3); background: rgba(255,255,255,0.04); transform: translateY(-1px); }
.ck-card:focus-visible { outline: 2px solid rgba(56,189,248,0.5); outline-offset: 2px; }
.ck-card .ic-pill {
  width: 30px; height: 30px; border-radius: 7px;
  background: rgba(56,189,248,0.12); color: var(--accent);
  display: flex; align-items: center; justify-content: center; font-size: 14px;
  margin-bottom: 8px;
}
.ck-card .nm { font-size: 13px; font-weight: 600; color: #F1F5F9; margin-bottom: 2px; }
.ck-card .ds { font-size: 10.5px; color: var(--text-idle); line-height: 1.4; }
.ck-card .v {
  font-family: 'JetBrains Mono', monospace; font-size: 14px; font-weight: 700;
  color: #F1F5F9; margin-top: 8px;
}
.ck-card .v.warn { color: #F59E0B; }
.ck-card .v.bad  { color: #F87171; }
.ck-card .v.good { color: #22D3A6; }

.ck-section[data-tone="users"]  .ck-card .ic-pill { background: rgba(168,85,247,0.12);  color: #A855F7; }
.ck-section[data-tone="money"]  .ck-card .ic-pill { background: rgba(34,211,166,0.12);  color: #22D3A6; }
.ck-section[data-tone="sec"]    .ck-card .ic-pill { background: rgba(248,113,113,0.12); color: #F87171; }
.ck-section[data-tone="health"] .ck-card .ic-pill { background: rgba(245,158,11,0.12);  color: #F59E0B; }
.ck-section[data-tone="cms"]    .ck-card .ic-pill { background: rgba(244,114,182,0.12); color: #F472B6; }

/* Drill-down frame: кнопка назад + заголовок раздела */
.adm-drill-frame { padding-top: 4px; }
.adm-drill-back {
  display: inline-flex; align-items: center; gap: 8px;
  padding: 7px 12px; border-radius: 8px;
  background: rgba(56,189,248,0.08);
  border: 1px solid rgba(56,189,248,0.25);
  color: var(--accent);
  cursor: pointer;
  font-family: 'JetBrains Mono', monospace; font-size: 11px;
  margin-bottom: 14px;
  transition: all 0.15s;
}
.adm-drill-back:hover { background: rgba(56,189,248,0.16); }
.adm-drill-title {
  font-size: 22px; font-weight: 700; color: #F1F5F9;
  letter-spacing: -0.01em;
  margin: 0 0 14px;
}

/* Mobile: TOC сверху, скролл контента ниже */
@media (max-width: 900px) {
  .adm-shell { grid-template-columns: 1fr; }
  .adm-shell .ck-toc {
    position: static;
    max-height: none;
    margin-bottom: 12px;
  }
  .adm-shell .adm-main { padding-left: 0; }
  .ck-card-row { grid-template-columns: repeat(auto-fit, minmax(140px, 1fr)); }
}

/* Hide compact card values on very narrow viewports — иконка + название хватает */
@media (max-width: 480px) {
  .ck-card { padding: 12px; }
  .ck-card .v { font-size: 12px; }
}

/* Theme: gold подсветка для accent-state в TOC */
[data-theme="gold"] .ck-toc-link.active { background: rgba(201,168,76,0.1); }
[data-theme="gold"] .ck-toc-link.active::before { background: #C9A84C; }
[data-theme="gold"] .ck-toc-link.active .dot { background: #C9A84C; box-shadow: 0 0 4px #C9A84C; }
[data-theme="gold"] .ck-card:hover { border-color: rgba(201,168,76,0.35); }
[data-theme="gold"] .ck-card .ic-pill { background: rgba(201,168,76,0.12); color: #C9A84C; }
[data-theme="gold"] .adm-drill-back { background: rgba(201,168,76,0.1); border-color: rgba(201,168,76,0.3); color: #C9A84C; }
[data-theme="gold"] .adm-drill-back:hover { background: rgba(201,168,76,0.18); }

/* ─── Smart Contracts admin styles (cardsmart.md §19.2) ─── */
/* Top header card with network toggle + status counters. */
.sc-header {
  display: flex; gap: 16px; align-items: center; flex-wrap: wrap;
  background: rgba(34, 211, 238, 0.08);
  border: 1px solid rgba(34, 211, 238, 0.25);
  border-radius: 12px;
  padding: 14px 18px;
  margin-bottom: 20px;
}
.sc-header-left { display: flex; flex-direction: column; gap: 2px; }
.sc-header-title {
  font-family: 'Syne', sans-serif; font-size: 16px; font-weight: 700;
  color: var(--text-active, #38BDF8); letter-spacing: -0.01em;
}
.sc-header-sub {
  font-family: 'JetBrains Mono', monospace; font-size: 10px;
  color: var(--text-idle, #9CA3AF); letter-spacing: 0.08em; text-transform: uppercase;
}
.sc-header-net {
  display: inline-flex; gap: 4px; padding: 3px; border-radius: 8px;
  background: rgba(255,255,255,0.04); border: 1px solid rgba(255,255,255,0.05);
}
.sc-net-btn {
  padding: 6px 12px; border: 0; background: transparent; border-radius: 6px;
  color: var(--text-idle, #9CA3AF); font-family: 'JetBrains Mono', monospace;
  font-size: 11px; cursor: pointer; letter-spacing: 0.04em;
}
.sc-net-btn.active {
  background: rgba(34, 211, 238, 0.15);
  color: #22D3EE;
}
.sc-header-counters { display: inline-flex; gap: 8px; flex-wrap: wrap; }
.sc-btn-refresh {
  margin-left: auto; padding: 7px 12px; border-radius: 7px;
  border: 1px solid rgba(255,255,255,0.08); background: rgba(255,255,255,0.04);
  color: var(--text-active, #fff); cursor: pointer; font-size: 12px;
}
.sc-btn-refresh:hover { background: rgba(255,255,255,0.08); }

/* Sub-tabs strip. */
.sc-subtabs {
  display: flex; gap: 4px; overflow-x: auto;
  border-bottom: 1px solid rgba(255,255,255,0.08);
  margin-bottom: 20px;
}
.sc-subtab {
  padding: 10px 16px; background: none; border: none; cursor: pointer;
  color: var(--text-idle, #9CA3AF);
  border-bottom: 2px solid transparent;
  font-family: 'Syne', sans-serif; font-size: 13px;
  white-space: nowrap; display: inline-flex; gap: 6px; align-items: center;
  transition: color .15s ease, border-color .15s ease;
}
.sc-subtab:hover { color: var(--text-active, #fff); }
.sc-subtab.active {
  color: var(--text-active, #fff);
  border-bottom-color: #22D3EE;
}
.sc-subtab-danger { color: var(--danger, #F87171); }
.sc-subtab-danger.active { border-bottom-color: var(--danger, #F87171); }
.sc-subtab-ic { font-size: 14px; line-height: 1; }
.sc-subtab-lb { font-weight: 600; letter-spacing: 0.01em; }

/* Cards. */
.sc-card {
  background: var(--bg-sidebar, #111318);
  border: 1px solid rgba(255,255,255,0.06);
  border-radius: 12px;
  padding: 18px;
  margin-bottom: 16px;
}
.sc-card-danger {
  border-color: rgba(248, 113, 113, 0.3);
  background: rgba(248, 113, 113, 0.05);
}
.sc-card-warning { border-color: rgba(250, 204, 21, 0.25); background: rgba(250, 204, 21, 0.04); }
.sc-card-info { border-color: rgba(34, 211, 238, 0.2); background: rgba(34, 211, 238, 0.04); }
.sc-card-head {
  display: flex; align-items: center; justify-content: space-between; gap: 8px;
  margin-bottom: 12px;
}
.sc-card-title {
  font-family: 'Syne', sans-serif; font-size: 13px; font-weight: 700;
  letter-spacing: -0.01em; color: var(--text-active, #fff);
}
.sc-card-actions { display: inline-flex; gap: 6px; }
.sc-card-body { font-size: 12px; color: var(--text-idle, #9CA3AF); line-height: 1.55; margin-bottom: 12px; }

/* Sign / action buttons. */
.sc-btn-sign {
  background: linear-gradient(90deg, #22D3EE 0%, #818CF8 100%);
  color: #fff; border: none; padding: 9px 16px; border-radius: 8px;
  font-family: 'Syne', sans-serif; font-weight: 600; font-size: 12px;
  cursor: pointer; letter-spacing: 0.01em;
  transition: transform .15s ease, box-shadow .15s ease;
}
.sc-btn-sign:hover { transform: translateY(-1px); box-shadow: 0 4px 14px rgba(34, 211, 238, 0.3); }
.sc-btn-sign:disabled { opacity: 0.5; cursor: not-allowed; transform: none; box-shadow: none; }
.sc-btn-sign.sc-btn-danger {
  background: linear-gradient(90deg, #F87171 0%, #FB923C 100%);
}
.sc-btn-sign.sc-btn-success {
  background: linear-gradient(90deg, #34D399 0%, #22D3EE 100%);
}
.sc-btn-secondary {
  padding: 7px 12px; border-radius: 7px; cursor: pointer;
  background: rgba(255,255,255,0.04); border: 1px solid rgba(255,255,255,0.08);
  color: var(--text-active, #fff); font-family: 'Syne', sans-serif; font-size: 12px;
}
.sc-btn-secondary:hover { background: rgba(255,255,255,0.08); }
.sc-btn-secondary.sc-btn-danger { color: var(--danger, #F87171); border-color: rgba(248, 113, 113, 0.3); }
.sc-btn-secondary.sc-btn-danger:hover { background: rgba(248, 113, 113, 0.1); }

/* Pills (status, network, severity badges). */
.sc-pill {
  display: inline-flex; gap: 6px; align-items: center;
  padding: 4px 10px; border-radius: 999px;
  font-family: 'JetBrains Mono', monospace; font-size: 11px;
  background: rgba(255,255,255,0.06);
  color: var(--text-idle, #9CA3AF);
}
.sc-pill b { color: var(--text-active, #fff); font-weight: 600; }
.sc-pill-active   { background: rgba(34, 211, 238, 0.15);  color: #22D3EE; }
.sc-pill-paused   { background: rgba(248, 113, 113, 0.15); color: #F87171; }
.sc-pill-deploying{ background: rgba(250, 204, 21, 0.15);  color: #FACC15; }

/* KPI grid (Overview & Indexer). */
.sc-kpi-grid {
  display: grid; gap: 12px;
  grid-template-columns: repeat(auto-fit, minmax(170px, 1fr));
  margin-bottom: 16px;
}
.sc-kpi-card {
  --sc-kpi-accent: #22D3EE;
  background: var(--bg-sidebar, #111318);
  border: 1px solid rgba(255,255,255,0.06);
  border-left: 3px solid var(--sc-kpi-accent);
  border-radius: 10px;
  padding: 14px 14px 12px;
  display: flex; flex-direction: column; gap: 4px;
}
.sc-kpi-label {
  font-family: 'JetBrains Mono', monospace; font-size: 10px; letter-spacing: 0.08em;
  text-transform: uppercase; color: var(--text-idle, #9CA3AF);
}
.sc-kpi-value {
  font-family: 'Syne', sans-serif; font-size: 22px; font-weight: 700;
  letter-spacing: -0.02em; color: var(--text-active, #fff);
}
.sc-kpi-sub { font-size: 11px; color: var(--text-idle, #9CA3AF); }

/* Tables. */
.sc-items-table {
  width: 100%; border-collapse: collapse;
  background: rgba(255,255,255,0.02);
  border: 1px solid rgba(255,255,255,0.06);
  border-radius: 10px; overflow: hidden;
  font-size: 12px;
}
.sc-items-table th, .sc-items-table td {
  padding: 10px 12px; text-align: left;
  border-bottom: 1px solid rgba(255,255,255,0.04);
}
.sc-items-table th {
  font-family: 'JetBrains Mono', monospace; font-size: 10px;
  letter-spacing: 0.08em; text-transform: uppercase;
  color: var(--text-idle, #9CA3AF); font-weight: 600;
  background: rgba(255,255,255,0.03);
}
.sc-items-table tr:last-child td { border-bottom: 0; }
.sc-items-table tr[data-cid], .sc-items-table tr[data-item-idx], .sc-items-table tr[data-eid] {
  cursor: pointer; transition: background .12s ease;
}
.sc-items-table tr[data-cid]:hover,
.sc-items-table tr[data-item-idx]:hover,
.sc-items-table tr[data-eid]:hover { background: rgba(34, 211, 238, 0.06); }
.sc-items-table .mono { font-family: 'JetBrains Mono', monospace; font-size: 11px; }
.sc-op-pill {
  display: inline-block; padding: 2px 7px; border-radius: 4px;
  background: rgba(167,139,250,0.12); color: #A78BFA;
  font-family: 'JetBrains Mono', monospace; font-size: 10px;
  letter-spacing: 0.04em;
}

/* Icon-only action buttons in table rows. */
.sc-icon-btn {
  width: 26px; height: 26px; border-radius: 6px;
  border: 1px solid rgba(255,255,255,0.06); background: rgba(255,255,255,0.02);
  cursor: pointer; font-size: 13px; padding: 0;
  margin-right: 4px; color: var(--text-active, #fff);
}
.sc-icon-btn:hover { background: rgba(255,255,255,0.06); }

/* Wizard. */
.sc-wizard-stepper {
  display: flex; gap: 0; align-items: center; margin-bottom: 18px;
  border-bottom: 1px dashed rgba(255,255,255,0.06); padding-bottom: 14px;
}
.sc-wizard-step {
  display: flex; flex-direction: column; gap: 2px; align-items: center;
  padding: 6px 12px; opacity: 0.45; flex: 1;
  position: relative;
}
.sc-wizard-step.active { opacity: 1; }
.sc-wizard-step.done  { opacity: 0.75; }
.sc-wizard-step::after {
  content: ''; position: absolute; right: 0; top: 18px; height: 2px;
  width: 50%; background: rgba(255,255,255,0.06);
}
.sc-wizard-step:last-child::after { display: none; }
.sc-wizard-step.done::after { background: #22D3EE; }
.sc-wizard-step-n {
  display: inline-flex; width: 26px; height: 26px;
  align-items: center; justify-content: center; border-radius: 50%;
  background: rgba(255,255,255,0.06); font-family: 'JetBrains Mono', monospace;
  font-size: 11px; font-weight: 700;
  border: 1px solid rgba(255,255,255,0.06);
}
.sc-wizard-step.active .sc-wizard-step-n { background: #22D3EE; color: #0a0a0d; border-color: #22D3EE; }
.sc-wizard-step.done .sc-wizard-step-n { background: rgba(34, 211, 238, 0.3); color: #22D3EE; }
.sc-wizard-step-lb {
  font-family: 'JetBrains Mono', monospace; font-size: 10px;
  letter-spacing: 0.06em; text-transform: uppercase;
  color: var(--text-idle, #9CA3AF);
}
.sc-wizard-body { margin-bottom: 16px; }
.sc-wizard-foot { display: flex; gap: 10px; align-items: center; padding-top: 12px; border-top: 1px solid rgba(255,255,255,0.06); }

/* Inputs / fields. */
.sc-field { margin-bottom: 14px; }
.sc-field label {
  display: block; font-size: 12px; color: var(--text-active, #fff);
  margin-bottom: 5px; font-weight: 600;
}
.sc-field .sc-req { color: var(--danger, #F87171); margin-left: 3px; }
.sc-field .sc-hint { display: block; margin-top: 5px; font-size: 11px; color: var(--text-idle, #9CA3AF); line-height: 1.5; }
.sc-field .sc-hint code {
  background: rgba(255,255,255,0.06); padding: 1px 5px; border-radius: 3px;
  font-size: 10px; font-family: 'JetBrains Mono', monospace; color: #22D3EE;
}
.sc-input {
  width: 100%; padding: 9px 11px;
  background: rgba(0,0,0,0.3); color: var(--text-active, #fff);
  border: 1px solid rgba(255,255,255,0.08); border-radius: 7px;
  font-size: 13px; font-family: inherit;
}
.sc-input.mono { font-family: 'JetBrains Mono', monospace; font-size: 12px; }
.sc-input:focus { outline: none; border-color: #22D3EE; }
.sc-input[disabled] { opacity: 0.5; cursor: not-allowed; }
textarea.sc-input { resize: vertical; min-height: 60px; }
.sc-input-row { display: flex; gap: 8px; align-items: center; }
.sc-input-row .sc-input { flex: 1; }
.sc-field-row { display: grid; gap: 10px; grid-template-columns: 1fr 1fr; align-items: end; }
.sc-radio-row {
  display: flex; flex-direction: column; gap: 6px; padding: 8px 0;
}
.sc-radio-row label {
  display: flex; gap: 8px; align-items: center; font-weight: 400;
  font-size: 13px; padding: 4px 0;
}
.sc-inline-check { display: inline-flex; gap: 6px; align-items: center; margin-right: 14px; font-weight: 400; font-size: 12px; }
.sc-summary-row {
  display: flex; justify-content: space-between; padding: 7px 0;
  border-bottom: 1px solid rgba(255,255,255,0.04);
  font-size: 12px;
}
.sc-summary-row:last-child { border-bottom: 0; }
.sc-summary-row span:first-child { color: var(--text-idle, #9CA3AF); }
.sc-summary-row b { color: var(--text-active, #fff); }

/* JSON preview. */
.sc-json-preview {
  background: rgba(0,0,0,0.4); border: 1px solid rgba(255,255,255,0.04);
  border-radius: 8px; padding: 12px; overflow: auto; max-height: 320px;
  font-family: 'JetBrains Mono', monospace; font-size: 11px;
  color: var(--text-active, #fff); line-height: 1.5;
}

/* Toolbar above tables. */
.sc-toolbar {
  display: flex; gap: 8px; flex-wrap: wrap; align-items: center;
  margin-bottom: 12px;
}
.sc-toolbar .sc-input { width: auto; min-width: 140px; flex: 0 1 auto; }

/* Pagination. */
.sc-pagination {
  display: flex; gap: 8px; align-items: center; justify-content: center;
  margin-top: 14px; padding: 8px 0;
}
.sc-page-btn {
  padding: 6px 12px; border-radius: 6px;
  background: rgba(255,255,255,0.04); border: 1px solid rgba(255,255,255,0.08);
  color: var(--text-active, #fff); cursor: pointer; font-size: 12px;
  font-family: 'JetBrains Mono', monospace;
}
.sc-page-btn:disabled { opacity: 0.4; cursor: not-allowed; }
.sc-page-info { font-family: 'JetBrains Mono', monospace; font-size: 11px; color: var(--text-idle, #9CA3AF); }

/* Quick actions row. */
.sc-quick-actions {
  display: flex; gap: 8px; flex-wrap: wrap;
}
.sc-qa-btn {
  padding: 10px 14px; border-radius: 8px; cursor: pointer;
  background: rgba(255,255,255,0.04); border: 1px solid rgba(255,255,255,0.08);
  color: var(--text-active, #fff); font-family: 'Syne', sans-serif; font-size: 13px;
}
.sc-qa-btn:hover { background: rgba(34, 211, 238, 0.08); border-color: rgba(34, 211, 238, 0.3); }

/* Status banner (overview health). */
.sc-banner {
  padding: 10px 14px; border-radius: 8px; margin-bottom: 14px;
  font-size: 13px; font-family: 'Syne', sans-serif;
  display: flex; gap: 8px; align-items: center; flex-wrap: wrap;
}
.sc-banner-sep { opacity: 0.4; }
.sc-banner-ok   { background: rgba(34, 211, 238, 0.08); color: #22D3EE; border: 1px solid rgba(34, 211, 238, 0.2); }
.sc-banner-warn { background: rgba(250, 204, 21, 0.08); color: #FACC15; border: 1px solid rgba(250, 204, 21, 0.2); }
.sc-banner-err  { background: rgba(248, 113, 113, 0.1);  color: #F87171; border: 1px solid rgba(248, 113, 113, 0.3); }

/* Charts grid + sparkline. */
.sc-charts-grid {
  display: grid; gap: 12px; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
  margin-bottom: 16px;
}
.sc-sparkline {
  width: 100%; height: 80px; display: block;
  background: rgba(0,0,0,0.2); border-radius: 6px;
}
.sc-sparkline-empty {
  display: flex; align-items: center; justify-content: center;
  color: var(--text-idle, #9CA3AF); font-size: 11px;
  font-family: 'JetBrains Mono', monospace;
}

/* Empty/loading states. */
.sc-empty {
  padding: 28px 18px; text-align: center; color: var(--text-idle, #9CA3AF);
  font-size: 13px; font-family: 'Syne', sans-serif;
  background: rgba(255,255,255,0.02); border-radius: 10px;
  border: 1px dashed rgba(255,255,255,0.06);
}
.sc-loading {
  padding: 24px; text-align: center; color: var(--text-idle, #9CA3AF);
  font-family: 'JetBrains Mono', monospace; font-size: 12px;
}

/* Links. */
.sc-link { color: #22D3EE; text-decoration: none; }
.sc-link:hover { text-decoration: underline; }

/* Policy & danger grids. */
.sc-policy-grid {
  display: grid; gap: 12px; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
}
.sc-policy-body { display: flex; flex-direction: column; gap: 8px; }
.sc-policy-current { font-size: 12px; color: var(--text-idle, #9CA3AF); }
.sc-policy-current b { color: var(--text-active, #fff); font-family: 'JetBrains Mono', monospace; }
.sc-policy-sync { font-size: 10px; color: var(--text-idle, #9CA3AF); font-family: 'JetBrains Mono', monospace; }
.sc-policy-meta { font-size: 10px; color: var(--text-idle, #9CA3AF); font-family: 'JetBrains Mono', monospace; }

.sc-danger-grid {
  display: grid; gap: 12px; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
}

/* Modals (preflight + generic). */
.sc-modal-overlay {
  position: fixed; inset: 0;
  background: rgba(5, 7, 12, 0.78);
  -webkit-backdrop-filter: blur(8px);
  backdrop-filter: blur(8px);
  z-index: 10100;
  display: flex; align-items: center; justify-content: center;
  padding: 24px;
}
.sc-modal-box {
  width: min(640px, 100%); max-height: calc(100vh - 48px);
  background: #0d1117;
  border: 1px solid rgba(255,255,255,0.08);
  border-radius: 14px; overflow: hidden;
  display: flex; flex-direction: column;
}
.sc-modal-confirm-box {
  width: min(560px, 100%);
}
.sc-modal-head {
  display: flex; align-items: center; justify-content: space-between;
  padding: 14px 18px; border-bottom: 1px solid rgba(255,255,255,0.06);
}
.sc-modal-title {
  font-family: 'Syne', sans-serif; font-size: 15px; font-weight: 700;
  color: var(--text-active, #fff);
}
.sc-modal-close {
  background: transparent; border: 0; color: var(--text-idle, #9CA3AF);
  font-size: 24px; cursor: pointer; padding: 0 4px;
}
.sc-modal-close:hover { color: var(--text-active, #fff); }
.sc-modal-body { padding: 16px 18px; overflow: auto; font-size: 13px; color: var(--text-active, #fff); line-height: 1.6; }
.sc-modal-body details { margin-top: 10px; }
.sc-modal-body details summary { cursor: pointer; color: var(--text-idle, #9CA3AF); font-size: 12px; }
.sc-modal-grid { display: grid; gap: 8px; grid-template-columns: 1fr; margin-bottom: 12px; }
.sc-modal-grid > div { font-size: 13px; }
.sc-modal-grid b { color: var(--text-idle, #9CA3AF); font-weight: 600; margin-right: 4px; }
.sc-modal-note {
  background: rgba(34, 211, 238, 0.06); border-left: 3px solid #22D3EE;
  padding: 10px 14px; border-radius: 6px; margin-top: 12px;
  font-size: 12px; line-height: 1.6;
}
.sc-modal-note ul { margin: 6px 0 6px 18px; padding: 0; }
.sc-modal-note li { margin: 2px 0; }
.sc-modal-check {
  display: flex; gap: 8px; align-items: flex-start; padding: 6px 0; cursor: pointer;
  font-size: 12px; color: var(--text-idle, #9CA3AF);
}
.sc-modal-check input { margin-top: 3px; }
.sc-modal-foot {
  display: flex; justify-content: flex-end; gap: 8px;
  padding: 12px 18px; border-top: 1px solid rgba(255,255,255,0.06);
  background: rgba(0,0,0,0.2);
}
.sc-modal-confirm .sc-modal-box { border-color: rgba(34, 211, 238, 0.3); }
.sc-modal-tabs { display: flex; gap: 2px; border-bottom: 1px solid rgba(255,255,255,0.06); margin-bottom: 12px; }
.sc-modal-tabs .sc-tab {
  background: none; border: none; padding: 8px 12px;
  color: var(--text-idle, #9CA3AF); cursor: pointer;
  border-bottom: 2px solid transparent; font-size: 12px;
}
.sc-modal-tabs .sc-tab.active { color: var(--text-active, #fff); border-bottom-color: #22D3EE; }

/* Responsive. */
@media (max-width: 720px) {
  .sc-header { gap: 10px; }
  .sc-header-net, .sc-btn-refresh { margin-left: 0; }
  .sc-field-row { grid-template-columns: 1fr; }
  .sc-charts-grid { grid-template-columns: 1fr; }
  .sc-policy-grid, .sc-danger-grid { grid-template-columns: 1fr; }
  .sc-items-table { font-size: 11px; }
  .sc-items-table th, .sc-items-table td { padding: 7px 8px; }
}

/* Gold theme accent. */
[data-theme="gold"] .sc-subtab.active { border-bottom-color: #C9A84C; }
[data-theme="gold"] .sc-pill-active { background: rgba(201,168,76,0.15); color: #C9A84C; }
[data-theme="gold"] .sc-net-btn.active { background: rgba(201,168,76,0.15); color: #C9A84C; }
[data-theme="gold"] .sc-header { background: rgba(201,168,76,0.08); border-color: rgba(201,168,76,0.25); }
[data-theme="gold"] .sc-header-title { color: #C9A84C; }
[data-theme="gold"] .sc-btn-sign { background: linear-gradient(90deg, #C9A84C 0%, #E2B96E 100%); }
[data-theme="gold"] .sc-kpi-card { border-left-color: #C9A84C; }

/* ─── Smart Contracts admin — patch v2 (missing class fillers) ───
 * Cardsmart v1 JS uses 7 class names that the original CSS pass missed.
 * These complete the visual contract and tighten spacing. */

.sc-btn-danger {
  background: linear-gradient(90deg, #F87171 0%, #DC2626 100%);
  color: #fff;
  border: none;
  padding: 9px 16px;
  border-radius: 8px;
  font-family: 'Syne', sans-serif;
  font-weight: 600;
  font-size: 12px;
  cursor: pointer;
  letter-spacing: 0.02em;
  transition: filter 0.15s ease, transform 0.05s ease;
}
.sc-btn-danger:hover { filter: brightness(1.1); }
.sc-btn-danger:active { transform: translateY(1px); }
.sc-btn-danger:disabled { opacity: 0.5; cursor: not-allowed; }

.sc-hint {
  font-size: 11.5px;
  color: var(--text-idle);
  line-height: 1.5;
  margin: 6px 0 12px;
  font-family: 'JetBrains Mono', ui-monospace, monospace;
  opacity: 0.85;
}

.sc-req { color: #F87171; margin-left: 4px; }

.sc-diff {
  display: grid;
  grid-template-columns: 100px 1fr;
  gap: 6px 12px;
  padding: 10px 12px;
  background: rgba(255,255,255,0.02);
  border-radius: 8px;
  font-family: 'JetBrains Mono', monospace;
  font-size: 11px;
}
.sc-diff-key { color: var(--text-idle); }
.sc-diff-old { color: #F87171; text-decoration: line-through; opacity: 0.7; }
.sc-diff-new { color: #34D399; }

.sc-tab, .sc-tab-body, .sc-subtab-content {
  /* aliases for legacy class names — keep parity with .sc-card / pane */
  background: var(--bg-sidebar, rgba(255,255,255,0.02));
  border-radius: 12px;
  padding: 16px;
}

/* ── Polish pass: tighter spacing + better hierarchy ─────────────── */
.sc-header {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 14px 18px;
  background: linear-gradient(135deg, rgba(34,211,238,0.08) 0%, rgba(129,140,248,0.04) 100%);
  border: 1px solid rgba(34,211,238,0.22);
  border-radius: 14px;
  padding: 16px 20px;
  margin-bottom: 18px;
  box-shadow: 0 1px 0 rgba(255,255,255,0.04) inset;
}
.sc-header-title {
  font-family: 'Syne', sans-serif;
  font-weight: 700;
  font-size: 16px;
  color: #E5E7EB;
  letter-spacing: 0.01em;
  display: inline-flex;
  align-items: center;
  gap: 8px;
}
.sc-header-title::before {
  content: '';
  width: 8px; height: 8px;
  border-radius: 50%;
  background: #22D3EE;
  box-shadow: 0 0 12px #22D3EE;
}
.sc-header-sub {
  font-family: 'JetBrains Mono', monospace;
  font-size: 11px;
  color: rgba(229,231,235,0.55);
  letter-spacing: 0.03em;
}
.sc-header-net { display: inline-flex; gap: 4px; }
.sc-net-btn {
  padding: 5px 12px;
  border-radius: 999px;
  border: 1px solid rgba(255,255,255,0.10);
  background: transparent;
  color: var(--text-idle);
  cursor: pointer;
  font-family: 'JetBrains Mono', monospace;
  font-size: 11px;
  letter-spacing: 0.03em;
  transition: all 0.15s ease;
}
.sc-net-btn.active {
  background: rgba(34,211,238,0.15);
  color: #22D3EE;
  border-color: rgba(34,211,238,0.45);
}
.sc-header-counters {
  display: flex; gap: 14px; flex-wrap: wrap; margin-left: auto;
  font-family: 'JetBrains Mono', monospace; font-size: 11px;
  color: var(--text-idle);
}

.sc-subtabs {
  display: flex;
  gap: 2px;
  overflow-x: auto;
  border-bottom: 1px solid rgba(255,255,255,0.08);
  margin: 0 0 18px;
  padding: 0 4px;
  scrollbar-width: none;
}
.sc-subtabs::-webkit-scrollbar { display: none; }
.sc-subtab {
  padding: 10px 14px;
  border: 0;
  background: transparent;
  color: var(--text-idle);
  cursor: pointer;
  font-family: 'Syne', sans-serif;
  font-weight: 500;
  font-size: 12.5px;
  white-space: nowrap;
  letter-spacing: 0.02em;
  border-bottom: 2px solid transparent;
  transition: color 0.15s ease, border-color 0.15s ease, background 0.15s ease;
  border-radius: 6px 6px 0 0;
  display: inline-flex; align-items: center; gap: 6px;
}
.sc-subtab:hover { color: #E5E7EB; background: rgba(255,255,255,0.03); }
.sc-subtab.active {
  color: #22D3EE;
  border-bottom-color: #22D3EE;
  background: rgba(34,211,238,0.06);
}
.sc-subtab-danger { color: #F87171; }
.sc-subtab-danger.active { color: #F87171; border-bottom-color: #F87171; background: rgba(248,113,113,0.06); }

.sc-pill {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 4px 10px;
  border-radius: 999px;
  font-family: 'JetBrains Mono', monospace;
  font-size: 10.5px;
  background: rgba(255,255,255,0.06);
  letter-spacing: 0.03em;
}
.sc-pill-active   { background: rgba(34,197,94,0.15);  color: #4ADE80; }
.sc-pill-paused   { background: rgba(248,113,113,0.15); color: #F87171; }
.sc-pill-deploying { background: rgba(250,204,21,0.15); color: #FACC15; }

.sc-btn-sign {
  background: linear-gradient(90deg, #22D3EE 0%, #818CF8 100%);
  color: #0a0c10;            /* dark text on light gradient — contrast OK */
  border: none;
  padding: 11px 24px;
  border-radius: 9px;
  font-family: 'Syne', sans-serif;
  font-weight: 800;          /* bold for visibility on gradient */
  font-size: 13px;
  letter-spacing: 0.04em;
  cursor: pointer;
  text-shadow: 0 1px 0 rgba(255,255,255,0.25);
  box-shadow: 0 1px 0 rgba(255,255,255,0.35) inset,
              0 0 0 1px rgba(34,211,238,0.45),
              0 8px 24px -8px rgba(34,211,238,0.55);
  transition: filter 0.15s ease, transform 0.05s ease;
}
.sc-btn-sign:hover { filter: brightness(1.08); transform: translateY(-1px); }
.sc-btn-sign:active { transform: translateY(1px); }
.sc-btn-sign:disabled { opacity: 0.5; cursor: not-allowed; box-shadow: none; }

.sc-btn-secondary {
  background: rgba(255,255,255,0.04);
  color: #E5E7EB;
  border: 1px solid rgba(255,255,255,0.10);
  padding: 9px 18px;
  border-radius: 9px;
  font-family: 'Syne', sans-serif; font-weight: 500; font-size: 12px;
  cursor: pointer;
  transition: background 0.15s ease;
}
.sc-btn-secondary:hover { background: rgba(255,255,255,0.08); }
.sc-btn-refresh {
  padding: 6px 12px;
  border-radius: 7px;
  border: 1px solid rgba(255,255,255,0.10);
  background: rgba(255,255,255,0.03);
  color: var(--text-idle);
  font-family: 'JetBrains Mono', monospace; font-size: 11px;
  cursor: pointer;
  transition: all 0.15s ease;
}
.sc-btn-refresh:hover { background: rgba(34,211,238,0.08); color: #22D3EE; }

.sc-icon-btn {
  width: 28px; height: 28px;
  display: inline-flex; align-items: center; justify-content: center;
  border-radius: 7px;
  border: 1px solid rgba(255,255,255,0.08);
  background: rgba(255,255,255,0.03);
  color: var(--text-idle);
  cursor: pointer;
  transition: all 0.15s ease;
}
.sc-icon-btn:hover { background: rgba(34,211,238,0.10); color: #22D3EE; border-color: rgba(34,211,238,0.30); }

.sc-card {
  background: linear-gradient(180deg, rgba(255,255,255,0.025) 0%, rgba(255,255,255,0.01) 100%);
  border: 1px solid rgba(255,255,255,0.06);
  border-radius: 12px;
  padding: 18px;
  margin-bottom: 14px;
}
.sc-card-head {
  display: flex; justify-content: space-between; align-items: center;
  margin-bottom: 12px;
  gap: 12px;
}
.sc-card-title {
  font-family: 'Syne', sans-serif; font-weight: 600;
  font-size: 13px; color: #E5E7EB; letter-spacing: 0.01em;
}
.sc-card-body { font-size: 12.5px; color: rgba(229,231,235,0.85); line-height: 1.55; }
.sc-card-actions { display: flex; gap: 8px; flex-wrap: wrap; margin-top: 14px; }
.sc-card-danger {
  border-color: rgba(248,113,113,0.30);
  background: rgba(248,113,113,0.04);
}

.sc-banner {
  display: flex; align-items: center; gap: 10px;
  padding: 10px 14px;
  border-radius: 10px;
  margin-bottom: 14px;
  font-family: 'JetBrains Mono', monospace;
  font-size: 12px;
}
.sc-banner-ok    { background: rgba(34,197,94,0.08);  border: 1px solid rgba(34,197,94,0.25);  color: #4ADE80; }
.sc-banner-warn  { background: rgba(250,204,21,0.08); border: 1px solid rgba(250,204,21,0.25); color: #FACC15; }
.sc-banner-error { background: rgba(248,113,113,0.08); border: 1px solid rgba(248,113,113,0.30); color: #F87171; }
.sc-banner-sep   { opacity: 0.4; margin: 0 4px; }

.sc-kpi-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
  gap: 12px;
  margin-bottom: 18px;
}
.sc-kpi-card {
  background: rgba(255,255,255,0.025);
  border: 1px solid rgba(255,255,255,0.06);
  border-left: 3px solid #22D3EE;
  border-radius: 10px;
  padding: 14px 16px;
}
.sc-kpi-label {
  font-family: 'JetBrains Mono', monospace;
  font-size: 10.5px;
  color: var(--text-idle);
  text-transform: uppercase;
  letter-spacing: 0.08em;
  margin-bottom: 6px;
}
.sc-kpi-value {
  font-family: 'Syne', sans-serif;
  font-size: 22px;
  font-weight: 700;
  color: #E5E7EB;
}

.sc-charts-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
  gap: 12px;
  margin-bottom: 18px;
}

.sc-input {
  width: 100%;
  padding: 9px 12px;
  border-radius: 8px;
  border: 1px solid rgba(255,255,255,0.12);
  background: rgba(0,0,0,0.30);
  color: #E5E7EB;
  font-family: 'JetBrains Mono', monospace;
  font-size: 12px;
  transition: border-color 0.15s ease, background 0.15s ease;
}
.sc-input:focus { outline: 0; border-color: #22D3EE; background: rgba(34,211,238,0.04); }
.sc-input-row { display: flex; gap: 8px; align-items: center; }
.sc-field { margin-bottom: 14px; }
.sc-field-row { display: grid; grid-template-columns: 180px 1fr; gap: 12px; align-items: center; margin-bottom: 10px; }
.sc-field-label {
  font-family: 'JetBrains Mono', monospace;
  font-size: 11px;
  color: var(--text-idle);
  letter-spacing: 0.02em;
}

.sc-inline-check { display: inline-flex; align-items: center; gap: 6px; cursor: pointer; font-size: 12px; color: #E5E7EB; }

.sc-empty {
  padding: 28px 20px;
  text-align: center;
  color: var(--text-idle);
  font-family: 'JetBrains Mono', monospace;
  font-size: 12px;
  background: rgba(255,255,255,0.015);
  border: 1px dashed rgba(255,255,255,0.10);
  border-radius: 10px;
}

.sc-items-table {
  width: 100%;
  border-collapse: collapse;
  font-family: 'JetBrains Mono', monospace;
  font-size: 11.5px;
  background: rgba(255,255,255,0.015);
  border-radius: 10px;
  overflow: hidden;
}
.sc-items-table th, .sc-items-table td {
  padding: 10px 12px;
  text-align: left;
  border-bottom: 1px solid rgba(255,255,255,0.05);
}
.sc-items-table th {
  background: rgba(255,255,255,0.03);
  color: var(--text-idle);
  text-transform: uppercase;
  letter-spacing: 0.06em;
  font-size: 10.5px;
  font-weight: 600;
}
.sc-items-table tr:hover td { background: rgba(34,211,238,0.04); }
.sc-items-table tr:last-child td { border-bottom: 0; }

.sc-json-preview {
  background: rgba(0,0,0,0.40);
  border: 1px solid rgba(255,255,255,0.08);
  border-radius: 8px;
  padding: 12px 14px;
  font-family: 'JetBrains Mono', monospace;
  font-size: 11px;
  color: #A5F3FC;
  max-height: 320px;
  overflow: auto;
  white-space: pre;
  line-height: 1.55;
}

.sc-danger-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: 12px;
}

/* ─── Wallet balance cards (Overview header block) ─── */
.sc-wallets-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: 12px;
}
.sc-wallet-card {
  background: rgba(255,255,255,0.025);
  border: 1px solid rgba(255,255,255,0.06);
  border-left: 3px solid #22D3EE;
  border-radius: 10px;
  padding: 14px 16px;
  display: flex;
  flex-direction: column;
  gap: 6px;
}
.sc-wallet-head {
  display: flex; justify-content: space-between; align-items: center;
}
.sc-wallet-role {
  font-family: 'Syne', sans-serif;
  font-size: 12.5px;
  font-weight: 600;
  color: #E5E7EB;
  letter-spacing: 0.01em;
}
.sc-wallet-balance {
  font-family: 'JetBrains Mono', monospace;
  font-size: 22px;
  color: #E5E7EB;
  line-height: 1.1;
  margin-top: 2px;
}
.sc-wallet-addr {
  font-family: 'JetBrains Mono', monospace;
  font-size: 10.5px;
  color: rgba(229,231,235,0.55);
  display: inline-flex; gap: 6px; align-items: center;
}
.sc-wallet-addr code {
  background: rgba(0,0,0,0.30);
  padding: 2px 6px;
  border-radius: 4px;
}
.sc-wallet-sub {
  font-size: 10.5px;
  color: rgba(229,231,235,0.45);
  margin-top: 4px;
}
.sc-link { color: #22D3EE; text-decoration: none; }
.sc-link:hover { color: #67E8F9; }

.sc-quick-actions { display: flex; flex-wrap: wrap; gap: 8px; }
.sc-qa-btn {
  background: rgba(255,255,255,0.04);
  border: 1px solid rgba(255,255,255,0.08);
  color: #E5E7EB;
  padding: 9px 14px;
  border-radius: 9px;
  font-family: 'Syne', sans-serif;
  font-size: 12px;
  cursor: pointer;
  transition: all 0.15s ease;
}
.sc-qa-btn:hover {
  background: rgba(34,211,238,0.08);
  border-color: rgba(34,211,238,0.3);
  color: #22D3EE;
}

/* ─── Deploy success screen ─── */
.sc-success-screen {
  max-width: 880px;
  margin: 16px auto;
  padding: 28px 28px 36px;
  text-align: center;
  background: radial-gradient(circle at top, rgba(34,211,238,0.06) 0%, rgba(0,0,0,0) 60%);
  border-radius: 16px;
}
.sc-success-burst {
  display: flex;
  justify-content: center;
  margin-bottom: 14px;
  filter: drop-shadow(0 0 24px rgba(34,211,238,0.5));
  animation: scBurstIn 0.5s ease-out;
}
@keyframes scBurstIn {
  from { transform: scale(0.6); opacity: 0; }
  to   { transform: scale(1);   opacity: 1; }
}
.sc-success-h1 {
  font-family: 'Syne', sans-serif;
  font-size: 28px;
  font-weight: 700;
  color: #E5E7EB;
  margin: 0 0 10px;
  letter-spacing: -0.01em;
}
.sc-success-sub {
  font-size: 13px;
  color: rgba(229,231,235,0.65);
  line-height: 1.5;
  max-width: 540px;
  margin: 0 auto 28px;
}
.sc-success-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: 10px;
  margin-bottom: 28px;
  text-align: left;
}
.sc-success-card {
  background: rgba(255,255,255,0.025);
  border: 1px solid rgba(255,255,255,0.06);
  border-radius: 10px;
  padding: 12px 14px;
}
.sc-success-label {
  font-family: 'JetBrains Mono', monospace;
  font-size: 10px;
  color: var(--text-idle);
  text-transform: uppercase;
  letter-spacing: 0.08em;
  margin-bottom: 6px;
}
.sc-success-value {
  font-family: 'Syne', sans-serif;
  font-size: 14px;
  font-weight: 600;
  color: #E5E7EB;
}
.sc-success-mono {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  flex-wrap: wrap;
}
.sc-success-mono code {
  background: rgba(0,0,0,0.40);
  padding: 4px 8px;
  border-radius: 5px;
  font-family: 'JetBrains Mono', monospace;
  font-size: 11.5px;
  color: #A5F3FC;
}
.sc-success-h3 {
  font-family: 'Syne', sans-serif;
  font-size: 16px;
  font-weight: 700;
  color: #E5E7EB;
  margin: 6px 0 14px;
}
.sc-success-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  justify-content: center;
  margin-bottom: 22px;
}
.sc-success-checklist {
  text-align: left;
  background: rgba(34,211,238,0.04);
  border: 1px solid rgba(34,211,238,0.16);
  border-radius: 10px;
  padding: 16px 22px;
  max-width: 640px;
  margin: 12px auto 0;
}

/* Cards page collection picker (only when ≥2 cards collections are active) */
.cd-coll-picker {
  display: flex; flex-wrap: wrap; gap: 10px; align-items: center;
  margin: 16px 0 6px;
  padding: 12px 14px;
  border-radius: 12px;
  background: rgba(255,255,255,0.025);
  border: 1px solid rgba(255,255,255,0.08);
}
.cd-coll-picker-h {
  font-family: 'JetBrains Mono', monospace;
  font-size: 11px;
  letter-spacing: 0.08em;
  color: rgba(229,231,235,0.6);
  text-transform: uppercase;
  margin-right: 6px;
}
.cd-coll-chip {
  display: inline-flex; flex-direction: column; align-items: flex-start;
  gap: 2px;
  padding: 9px 14px;
  border-radius: 10px;
  background: rgba(255,255,255,0.04);
  border: 1px solid rgba(255,255,255,0.08);
  color: #E5E7EB;
  font-family: 'Syne', sans-serif;
  font-size: 13px;
  cursor: pointer;
  transition: all 0.15s ease;
}
.cd-coll-chip:hover { background: rgba(34,211,238,0.08); border-color: rgba(34,211,238,0.30); }
.cd-coll-chip.active {
  background: linear-gradient(90deg, rgba(34,211,238,0.18) 0%, rgba(129,140,248,0.16) 100%);
  border-color: rgba(34,211,238,0.55);
  color: #fff;
  box-shadow: 0 0 0 1px rgba(34,211,238,0.25);
}
.cd-coll-chip.smart.active {
  background: linear-gradient(90deg, rgba(167,139,250,0.22) 0%, rgba(34,211,238,0.18) 100%);
}
.cd-coll-chip-name { font-weight: 700; }
.cd-coll-chip-meta {
  font-family: 'JetBrains Mono', monospace;
  font-size: 10px;
  letter-spacing: 0.04em;
  color: rgba(229,231,235,0.65);
}
.cd-coll-chip.active .cd-coll-chip-meta { color: rgba(229,231,235,0.85); }

/* ─── Cards collection picker v2 — comparison cards ─── */
.cd-coll-picker-v2 {
  margin: 24px 0 8px;
  padding: 22px 24px;
  border-radius: 16px;
  background: rgba(255,255,255,0.02);
  border: 1px solid rgba(255,255,255,0.08);
}
.cd-coll-picker-title { margin-bottom: 18px; }
.cd-coll-picker-kicker {
  font-family: 'JetBrains Mono', monospace;
  font-size: 11px;
  letter-spacing: 0.18em;
  color: #22D3EE;
  text-transform: uppercase;
  margin-bottom: 4px;
  display: inline-block;
}
.cd-coll-picker-title h3 {
  font-family: 'Syne', sans-serif;
  font-size: 22px;
  font-weight: 700;
  color: #E5E7EB;
  margin: 0 0 4px;
  letter-spacing: -0.01em;
}
.cd-coll-picker-title p {
  font-size: 13px;
  color: rgba(229,231,235,0.65);
  margin: 0;
  max-width: 640px;
  line-height: 1.5;
}
.cd-coll-picker-grid {
  display: grid;
  /* Strict 2-column layout: left card (Soulbound) | right card (Standard).
   * Collapses to single column under 760px (phones). */
  grid-template-columns: 1fr 1fr;
  gap: 16px;
}
@media (max-width: 760px) {
  .cd-coll-picker-grid { grid-template-columns: 1fr; }
}
.cd-coll-card {
  text-align: left;
  background: rgba(255,255,255,0.025);
  border: 1px solid rgba(255,255,255,0.08);
  border-radius: 14px;
  padding: 18px 20px;
  cursor: pointer;
  transition: all 0.18s ease;
  display: flex;
  flex-direction: column;
  gap: 10px;
  color: #E5E7EB;
}
.cd-coll-card:hover {
  background: rgba(34,211,238,0.04);
  border-color: rgba(34,211,238,0.30);
  transform: translateY(-1px);
}
.cd-coll-card.active {
  background: linear-gradient(135deg, rgba(34,211,238,0.10) 0%, rgba(129,140,248,0.06) 100%);
  border-color: rgba(34,211,238,0.55);
  box-shadow: 0 0 0 1px rgba(34,211,238,0.25), 0 8px 30px -10px rgba(34,211,238,0.30);
}
.cd-coll-card-head {
  display: flex;
  align-items: center;
  gap: 12px;
}
.cd-coll-card-emoji {
  width: 44px; height: 44px;
  border-radius: 11px;
  display: flex; align-items: center; justify-content: center;
  font-size: 22px;
  flex-shrink: 0;
}
.cd-coll-card-titles { flex: 1; min-width: 0; }
.cd-coll-card-title {
  font-family: 'Syne', sans-serif;
  font-size: 16px;
  font-weight: 700;
  color: #E5E7EB;
  line-height: 1.2;
}
.cd-coll-card-kind {
  font-family: 'JetBrains Mono', monospace;
  font-size: 10.5px;
  color: rgba(229,231,235,0.55);
  letter-spacing: 0.04em;
  margin-top: 2px;
}
.cd-coll-card-radio {
  font-size: 22px;
  color: rgba(255,255,255,0.30);
  flex-shrink: 0;
}
.cd-coll-card.active .cd-coll-card-radio { color: #22D3EE; }
.cd-coll-card-tagline {
  font-size: 13px;
  color: rgba(229,231,235,0.75);
  line-height: 1.45;
}
.cd-coll-card-pros {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex; flex-direction: column; gap: 6px;
}
.cd-coll-card-pros li {
  display: flex;
  gap: 8px;
  font-size: 12px;
  color: rgba(229,231,235,0.82);
  line-height: 1.4;
}
.cd-coll-card-icn {
  flex-shrink: 0;
  width: 18px; text-align: center;
}
.cd-coll-card-pros li b {
  color: #fff;
  font-weight: 600;
}
.cd-coll-card-foot {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 12px;
  margin-top: auto;
  padding-top: 10px;
  border-top: 1px dashed rgba(255,255,255,0.08);
}
.cd-coll-card-price {
  font-family: 'JetBrains Mono', monospace;
}
.cd-coll-card-price b {
  font-size: 18px;
  color: #22D3EE;
  font-weight: 700;
}
.cd-coll-card-price span {
  font-size: 11px;
  color: rgba(229,231,235,0.55);
}
.cd-coll-card-use {
  font-size: 11px;
  color: rgba(229,231,235,0.55);
  text-align: right;
  max-width: 60%;
  line-height: 1.35;
}
.cd-coll-card-use b { color: #E5E7EB; }

/* ─── Selected-collection indicators ─── */

/* Pill under the hero CTA — sticks to the kicker so it stays visible
 * even after the user scrolls past the picker. */
.cd-hero-pin {
  display: inline-flex; align-items: center; gap: 10px;
  margin-top: 14px;
  padding: 10px 14px;
  border-radius: 10px;
  background: rgba(34,211,238,0.06);
  border: 1px solid rgba(34,211,238,0.25);
  max-width: 100%;
  flex-wrap: wrap;
}
.cd-hero-pin-ic { font-size: 22px; }
.cd-hero-pin-txt {
  display: flex; flex-direction: column; gap: 2px;
  font-size: 12px;
  color: rgba(229,231,235,0.85);
}
.cd-hero-pin-txt b {
  font-family: 'Syne', sans-serif;
  font-weight: 700;
  color: #fff;
  font-size: 13.5px;
}
.cd-hero-pin-txt span {
  font-family: 'JetBrains Mono', monospace;
  font-size: 11px;
  color: rgba(229,231,235,0.55);
}
.cd-hero-pin-change {
  margin-left: auto;
  padding: 6px 12px;
  border-radius: 8px;
  background: transparent;
  border: 1px solid rgba(34,211,238,0.35);
  color: #22D3EE;
  font-family: 'JetBrains Mono', monospace;
  font-size: 11px;
  cursor: pointer;
  transition: background 0.15s ease;
}
.cd-hero-pin-change:hover { background: rgba(34,211,238,0.10); }

/* Builder header callout — bigger + colored so it's the first thing the
 * user reads when they enter the builder. */
.cd-build-active {
  display: flex; align-items: center; gap: 14px;
  margin: 14px 0 20px;
  padding: 14px 18px;
  border-radius: 12px;
  border: 1px solid rgba(34,211,238,0.30);
  background: linear-gradient(135deg, rgba(34,211,238,0.08) 0%, rgba(129,140,248,0.06) 100%);
  flex-wrap: wrap;
}
.cd-build-active.is-std {
  border-color: rgba(250,204,21,0.35);
  background: linear-gradient(135deg, rgba(250,204,21,0.06) 0%, rgba(249,115,22,0.06) 100%);
}
.cd-build-active-ic {
  font-size: 32px;
  flex-shrink: 0;
}
.cd-build-active-txt {
  flex: 1; min-width: 220px;
  display: flex; flex-direction: column; gap: 4px;
}
.cd-build-active-h {
  font-family: 'Syne', sans-serif;
  font-size: 15px;
  font-weight: 700;
  color: #fff;
  letter-spacing: -0.01em;
}
.cd-build-active-sub {
  font-size: 12px;
  color: rgba(229,231,235,0.75);
  line-height: 1.45;
}
.cd-build-active-change {
  padding: 7px 14px;
  border-radius: 8px;
  background: rgba(255,255,255,0.05);
  border: 1px solid rgba(255,255,255,0.12);
  color: #E5E7EB;
  font-family: 'JetBrains Mono', monospace;
  font-size: 11.5px;
  text-decoration: none;
  white-space: nowrap;
  cursor: pointer;
  transition: background 0.15s ease;
}
.cd-build-active-change:hover { background: rgba(255,255,255,0.10); }

/* ─── Pre-mint confirmation modal (cards.js → _confirmMintTarget) ─── */
.cd-mint-confirm-overlay {
  position: fixed; inset: 0;
  background: rgba(5, 7, 12, 0.82);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  z-index: 10100;
  display: flex; align-items: center; justify-content: center;
  padding: 24px;
}
.cd-mint-confirm {
  width: min(560px, 100%);
  background: #0d1117;
  border: 1px solid rgba(34,211,238,0.25);
  border-radius: 16px;
  box-shadow: 0 30px 80px rgba(0,0,0,0.6), 0 0 1px rgba(34,211,238,0.20);
  padding: 26px 28px;
  color: #E5E7EB;
}
.cd-mint-confirm.is-std { border-color: rgba(250,204,21,0.30); }
.cd-mint-confirm-head {
  display: flex; align-items: center; gap: 14px;
  margin-bottom: 18px;
}
.cd-mint-confirm-ic { font-size: 40px; }
.cd-mint-confirm-kicker {
  font-family: 'JetBrains Mono', monospace;
  font-size: 11px;
  letter-spacing: 0.16em;
  color: #22D3EE;
  text-transform: uppercase;
  margin-bottom: 2px;
}
.cd-mint-confirm h2 {
  font-family: 'Syne', sans-serif;
  font-size: 22px;
  font-weight: 700;
  margin: 0;
  color: #fff;
}
.cd-mint-confirm-banner {
  background: rgba(255,255,255,0.03);
  border-radius: 12px;
  padding: 14px 16px;
  margin-bottom: 16px;
  display: flex; flex-direction: column; gap: 8px;
}
.cd-mc-row {
  display: flex; justify-content: space-between; align-items: flex-start;
  gap: 12px;
  font-size: 13px;
}
.cd-mc-row span {
  color: rgba(229,231,235,0.55);
  font-family: 'JetBrains Mono', monospace;
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  flex-shrink: 0;
}
.cd-mc-row b {
  color: #fff;
  font-weight: 600;
  text-align: right;
  font-size: 13px;
  line-height: 1.4;
}
.cd-mc-row b.is-yes { color: #22D3EE; }
.cd-mc-row b.is-no { color: #FACC15; }
.cd-mc-warning {
  background: rgba(248,113,113,0.06);
  border: 1px solid rgba(248,113,113,0.25);
  border-radius: 10px;
  padding: 12px 14px;
  margin-bottom: 16px;
  font-size: 12.5px;
  line-height: 1.5;
  color: rgba(255,210,210,0.95);
}
.cd-mc-warning b { color: #F87171; }
.cd-mc-note {
  background: rgba(250,204,21,0.06);
  border: 1px solid rgba(250,204,21,0.25);
  border-radius: 10px;
  padding: 12px 14px;
  margin-bottom: 16px;
  font-size: 12.5px;
  color: rgba(255,235,180,0.90);
}
.cd-mc-actions {
  display: flex; justify-content: flex-end; gap: 10px;
}
.cd-mc-actions .cd-btn { padding: 10px 18px; }

/* ─── Contract topup modal (admin_smart_contracts.js → openTopupModal) ─── */
.cd-topup-grid {
  display: grid;
  grid-template-columns: 240px 1fr;
  gap: 22px;
  align-items: flex-start;
}
@media (max-width: 600px) {
  .cd-topup-grid { grid-template-columns: 1fr; }
}
.cd-topup-qr {
  display: flex; flex-direction: column; align-items: center; gap: 8px;
  padding: 12px;
  background: rgba(34,211,238,0.04);
  border: 1px solid rgba(34,211,238,0.20);
  border-radius: 12px;
}
.cd-topup-qr-hint {
  font-family: 'JetBrains Mono', monospace;
  font-size: 10.5px;
  color: rgba(229,231,235,0.65);
  text-align: center;
  line-height: 1.4;
}
.cd-topup-info {
  display: flex; flex-direction: column; gap: 12px;
}
.cd-topup-row {
  display: flex; flex-direction: column; gap: 4px;
  padding: 10px 12px;
  border-radius: 8px;
  background: rgba(255,255,255,0.02);
}
.cd-topup-row > span {
  font-family: 'JetBrains Mono', monospace;
  font-size: 10.5px;
  color: rgba(229,231,235,0.55);
  letter-spacing: 0.06em;
  text-transform: uppercase;
}
.cd-topup-row code {
  font-family: 'JetBrains Mono', monospace;
  font-size: 11px;
  color: #A5F3FC;
  word-break: break-all;
  background: rgba(0,0,0,0.30);
  padding: 6px 8px;
  border-radius: 5px;
}
.cd-topup-row b {
  color: #fff;
  font-weight: 600;
  font-size: 14px;
}
.cd-topup-row div {
  color: rgba(229,231,235,0.80);
  font-size: 12.5px;
  line-height: 1.45;
}
.cd-topup-actions {
  display: flex; flex-direction: column; gap: 8px;
  margin-top: 4px;
}
.cd-topup-actions > button,
.cd-topup-actions > a {
  text-align: center;
  text-decoration: none;
  display: block;
}

/* Soulbound (cards_smart) teaser card on the landing — cyan accent. */
.ld-cd-card.is-smart {
  border-color: rgba(34,211,238,0.30);
  box-shadow: 0 0 0 1px rgba(34,211,238,0.15);
}

/* ─── Prominent contract address banner (Overview top) ─── */
.sc-contract-addr-banner {
  margin: 0 0 18px;
  padding: 22px 26px;
  border-radius: 14px;
  background: linear-gradient(135deg, rgba(34,211,238,0.10) 0%, rgba(129,140,248,0.07) 100%);
  border: 1px solid rgba(34,211,238,0.35);
  box-shadow: 0 8px 24px -16px rgba(34,211,238,0.5);
}
.sc-cab-head {
  display: flex; align-items: center; justify-content: space-between;
  gap: 12px; flex-wrap: wrap;
  margin-bottom: 10px;
}
.sc-cab-kicker {
  font-family: 'JetBrains Mono', monospace;
  font-size: 11px;
  letter-spacing: 0.16em;
  color: rgba(229,231,235,0.55);
  text-transform: uppercase;
}
.sc-cab-state-wrap { display: inline-flex; gap: 10px; align-items: center; flex-wrap: wrap; }
.sc-cab-warn {
  font-size: 11.5px;
  color: #FACC15;
}
.sc-cab-addr {
  font-family: 'JetBrains Mono', ui-monospace, monospace;
  font-size: 17px;
  color: #A5F3FC;
  background: rgba(0,0,0,0.40);
  padding: 12px 16px;
  border-radius: 10px;
  margin-bottom: 14px;
  word-break: break-all;
  line-height: 1.4;
  user-select: all;
  border: 1px solid rgba(34,211,238,0.20);
}
.sc-cab-actions {
  display: flex; flex-wrap: wrap; gap: 8px;
}
.sc-cab-actions > * { font-size: 12px; }

/* ─── Items registry: mini action buttons (replace icon-only buttons) ─── */
.sc-action-cell { display: flex; flex-wrap: wrap; gap: 5px; }
.sc-btn-mini {
  display: inline-flex; align-items: center; gap: 4px;
  background: rgba(255,255,255,0.04);
  border: 1px solid rgba(255,255,255,0.10);
  color: #E5E7EB;
  font-family: 'JetBrains Mono', monospace;
  font-size: 10.5px;
  padding: 5px 9px;
  border-radius: 6px;
  cursor: pointer;
  transition: all 0.15s ease;
}
.sc-btn-mini:hover { background: rgba(34,211,238,0.08); border-color: rgba(34,211,238,0.30); color: #22D3EE; }
.sc-btn-mini-warn { color: #FACC15; border-color: rgba(250,204,21,0.25); }
.sc-btn-mini-warn:hover { background: rgba(250,204,21,0.10); color: #FACC15; border-color: rgba(250,204,21,0.55); }
.sc-btn-mini-danger { color: #F87171; border-color: rgba(248,113,113,0.25); }
.sc-btn-mini-danger:hover { background: rgba(248,113,113,0.10); color: #F87171; border-color: rgba(248,113,113,0.55); }

/* ─── 2FA login modal (promptTwoFaLogin) ─── */
.tfa-modal {
  display: flex; flex-direction: column; align-items: center;
  gap: 14px;
  padding: 8px 4px 4px;
  text-align: center;
}
.tfa-ic {
  width: 76px; height: 76px;
  display: flex; align-items: center; justify-content: center;
  background: linear-gradient(135deg, rgba(34,211,238,0.15) 0%, rgba(129,140,248,0.12) 100%);
  border-radius: 50%;
  color: #22D3EE;
  box-shadow: 0 0 24px -8px rgba(34,211,238,0.55);
}
.tfa-h3 {
  font-family: 'Syne', sans-serif;
  font-size: 22px;
  font-weight: 700;
  color: #E5E7EB;
  margin: 4px 0 2px;
  letter-spacing: -0.01em;
}
.tfa-sub {
  font-size: 13px;
  color: rgba(229,231,235,0.65);
  line-height: 1.5;
  margin: 0 0 8px;
  max-width: 360px;
}
.tfa-cells {
  display: flex; gap: 8px; justify-content: center;
  margin: 6px 0 8px;
}
.tfa-cell {
  width: 44px; height: 56px;
  text-align: center;
  font-family: 'JetBrains Mono', ui-monospace, monospace;
  font-size: 26px;
  font-weight: 700;
  background: rgba(0,0,0,0.40);
  border: 1px solid rgba(255,255,255,0.10);
  border-radius: 10px;
  color: #fff;
  caret-color: #22D3EE;
  transition: all 0.15s ease;
}
.tfa-cell:focus {
  outline: none;
  border-color: #22D3EE;
  background: rgba(34,211,238,0.06);
  box-shadow: 0 0 0 3px rgba(34,211,238,0.15);
}
.tfa-cell:not(:placeholder-shown) { border-color: rgba(34,211,238,0.45); }
.tfa-backup-toggle {
  background: transparent;
  border: 1px dashed rgba(255,255,255,0.18);
  color: rgba(229,231,235,0.70);
  font-family: 'JetBrains Mono', monospace;
  font-size: 11px;
  padding: 7px 14px;
  border-radius: 8px;
  cursor: pointer;
  transition: all 0.15s ease;
}
.tfa-backup-toggle:hover { color: #22D3EE; border-color: rgba(34,211,238,0.40); }
.tfa-backup-input {
  width: 280px;
  padding: 11px 14px;
  background: rgba(0,0,0,0.40);
  border: 1px solid rgba(255,255,255,0.10);
  border-radius: 10px;
  color: #fff;
  font-family: 'JetBrains Mono', monospace;
  font-size: 16px;
  letter-spacing: 0.1em;
  text-align: center;
}
.tfa-backup-input:focus {
  outline: none;
  border-color: #22D3EE;
  background: rgba(34,211,238,0.06);
}
.tfa-err {
  font-size: 12px;
  color: #F87171;
  min-height: 16px;
  font-family: 'JetBrains Mono', monospace;
}
.tfa-actions {
  display: flex; gap: 10px;
  margin-top: 6px;
}
.tfa-btn {
  padding: 11px 22px;
  border-radius: 10px;
  font-family: 'Syne', sans-serif;
  font-weight: 600;
  font-size: 13px;
  cursor: pointer;
  border: 1px solid transparent;
  transition: all 0.15s ease;
}
.tfa-btn-ghost {
  background: transparent;
  border-color: rgba(255,255,255,0.12);
  color: rgba(229,231,235,0.80);
}
.tfa-btn-ghost:hover { background: rgba(255,255,255,0.04); }
.tfa-btn-primary {
  background: linear-gradient(90deg, #22D3EE 0%, #818CF8 100%);
  color: #0a0c10;
  box-shadow: 0 8px 24px -10px rgba(34,211,238,0.55);
}
.tfa-btn-primary:hover { filter: brightness(1.08); }
.tfa-btn-primary:disabled {
  opacity: 0.4;
  cursor: not-allowed;
  filter: grayscale(0.4);
  box-shadow: none;
}

/* ===================================================================
 * Universal styled select (Phase 5: skin native dropdowns to match
 * dark theme everywhere — admin tools, ticket modals, broadcast,
 * settings, etc.). The arrow is an inline SVG so we don't depend on
 * an asset path. Apply via `.pn-select` class OR globally to any
 * <select> inside .adm-panel / .modal-overlay / admin views.
 * =================================================================== */
.pn-select,
.adm-panel select,
.modal-overlay select,
.modal-overlay .modal select,
#admMain select,
.broadcast-form select,
.settings-page select,
.tickets-page select {
  appearance: none;
  -webkit-appearance: none;
  -moz-appearance: none;
  background-color: rgba(255,255,255,0.04);
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath fill='%23a1a8b3' d='M6 8 0 0h12z'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 12px center;
  background-size: 10px 7px;
  border: 1px solid rgba(255,255,255,0.10);
  border-radius: 10px;
  padding: 9px 32px 9px 12px;
  color: #E2E8F0;
  font-family: 'JetBrains Mono', monospace;
  font-size: 12px;
  cursor: pointer;
  outline: none;
  transition: border-color .15s ease, background-color .15s ease, box-shadow .15s ease;
}
.pn-select:hover,
.adm-panel select:hover,
.modal-overlay select:hover,
#admMain select:hover {
  background-color: rgba(255,255,255,0.06);
  border-color: rgba(255,255,255,0.16);
}
.pn-select:focus,
.adm-panel select:focus,
.modal-overlay select:focus,
#admMain select:focus,
.broadcast-form select:focus,
.settings-page select:focus,
.tickets-page select:focus {
  border-color: rgba(56,189,248,0.50);
  box-shadow: 0 0 0 3px rgba(56,189,248,0.10);
}
.pn-select:disabled,
.adm-panel select:disabled,
#admMain select:disabled {
  opacity: 0.5;
  cursor: not-allowed;
}
/* Skin <option> nodes — browsers honour bg/color only in most cases. */
.pn-select option,
.adm-panel select option,
.modal-overlay select option,
#admMain select option,
.broadcast-form select option,
.settings-page select option,
.tickets-page select option {
  background: #1A1C22;
  color: #E2E8F0;
  font-family: 'JetBrains Mono', monospace;
}

/* ===================================================================
 * Custom dropdown menu (used by user-row action menu and any place
 * we want to replace a `<select>` with a clickable list under our
 * own control). Container `.pn-dropdown`, trigger `.pn-dropdown-btn`,
 * panel `.pn-dropdown-menu`, items `.pn-dropdown-item`.
 * =================================================================== */
.pn-dropdown {
  position: relative;
  display: inline-block;
}
.pn-dropdown-btn {
  background: rgba(255,255,255,0.04);
  border: 1px solid rgba(255,255,255,0.10);
  color: #E2E8F0;
  border-radius: 10px;
  padding: 6px 12px;
  font-family: 'JetBrains Mono', monospace;
  font-size: 11px;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  transition: border-color .15s, background-color .15s;
}
.pn-dropdown-btn:hover {
  background: rgba(255,255,255,0.06);
  border-color: rgba(255,255,255,0.18);
}
.pn-dropdown-btn .caret {
  width: 8px; height: 6px; display: inline-block;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='8' height='6' viewBox='0 0 12 8'%3E%3Cpath fill='%23a1a8b3' d='M6 8 0 0h12z'/%3E%3C/svg%3E") no-repeat center / contain;
}
.pn-dropdown-menu {
  position: absolute;
  top: calc(100% + 6px);
  right: 0;
  min-width: 180px;
  background: #161821;
  border: 1px solid rgba(255,255,255,0.10);
  border-radius: 12px;
  box-shadow: 0 16px 40px -10px rgba(0,0,0,0.55), 0 0 0 1px rgba(56,189,248,0.04);
  padding: 6px;
  z-index: 1000;
  display: none;
  backdrop-filter: blur(8px);
}
.pn-dropdown.open .pn-dropdown-menu { display: block; }
.pn-dropdown-item {
  display: flex; align-items: center; gap: 8px;
  padding: 8px 12px;
  border-radius: 8px;
  color: #E2E8F0;
  font-family: 'JetBrains Mono', monospace;
  font-size: 11px;
  cursor: pointer;
  text-decoration: none;
  background: transparent;
  border: 0;
  width: 100%;
  text-align: left;
  transition: background-color .15s;
}
.pn-dropdown-item:hover { background: rgba(56,189,248,0.10); color: #E2E8F0; }
.pn-dropdown-item.danger { color: #FCA5A5; }
.pn-dropdown-item.danger:hover { background: rgba(248,113,113,0.12); }
.pn-dropdown-item.warn { color: #FDE68A; }
.pn-dropdown-item.warn:hover { background: rgba(251,191,36,0.12); }
.pn-dropdown-item .icon { width: 16px; text-align: center; opacity: 0.8; }
.pn-dropdown-divider { height: 1px; background: rgba(255,255,255,0.06); margin: 4px 2px; }

/* Custom select (replaces native <select> with our themed dropdown).
 * Markup: <div class="pn-cselect" data-value="..."><div class="pn-cselect-trigger">…</div><div class="pn-cselect-menu">…</div></div>
 */
.pn-cselect {
  position: relative;
  display: inline-block;
  width: 100%;
}
.pn-cselect-trigger {
  background: rgba(255,255,255,0.04);
  border: 1px solid rgba(255,255,255,0.10);
  border-radius: 10px;
  padding: 9px 32px 9px 12px;
  color: #E2E8F0;
  font-family: 'JetBrains Mono', monospace;
  font-size: 12px;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: space-between;
  transition: border-color .15s, background-color .15s;
}
.pn-cselect-trigger::after {
  content: "";
  width: 10px; height: 7px;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath fill='%23a1a8b3' d='M6 8 0 0h12z'/%3E%3C/svg%3E") no-repeat center / contain;
  margin-left: 8px;
  transition: transform .15s;
}
.pn-cselect.open .pn-cselect-trigger::after { transform: rotate(180deg); }
.pn-cselect-trigger:hover {
  background: rgba(255,255,255,0.06);
  border-color: rgba(255,255,255,0.18);
}
.pn-cselect.open .pn-cselect-trigger,
.pn-cselect-trigger:focus {
  border-color: rgba(56,189,248,0.50);
  box-shadow: 0 0 0 3px rgba(56,189,248,0.10);
  outline: none;
}
.pn-cselect-menu {
  position: absolute;
  top: calc(100% + 4px);
  left: 0; right: 0;
  max-height: 260px;
  overflow-y: auto;
  background: #161821;
  border: 1px solid rgba(255,255,255,0.10);
  border-radius: 10px;
  box-shadow: 0 16px 40px -10px rgba(0,0,0,0.55);
  padding: 4px;
  z-index: 1100;
  display: none;
}
.pn-cselect.open .pn-cselect-menu { display: block; }
.pn-cselect-option {
  padding: 8px 12px;
  border-radius: 6px;
  color: #E2E8F0;
  font-family: 'JetBrains Mono', monospace;
  font-size: 12px;
  cursor: pointer;
  transition: background-color .12s;
}
.pn-cselect-option:hover,
.pn-cselect-option.focused { background: rgba(56,189,248,0.10); }
.pn-cselect-option.selected { color: #7DD3FC; background: rgba(56,189,248,0.07); }
.pn-cselect-option .hint { display: block; color: var(--text-idle); font-size: 10px; margin-top: 2px; }

/* Recent Activity — boost size so it's legible after the charts. */
#admRecentActivity { font-size: 13px; line-height: 1.55; }
#admRecentActivity .ra-row {
  padding: 12px 14px;
  border-radius: 10px;
  background: rgba(255,255,255,0.02);
  border: 1px solid rgba(255,255,255,0.04);
  margin-bottom: 6px;
  display: flex; gap: 12px; align-items: center;
}
#admRecentActivity .ra-icon { font-size: 18px; line-height: 1; }
#admRecentActivity .ra-body { flex: 1; min-width: 0; }
#admRecentActivity .ra-title { font-size: 13px; color: #E2E8F0; font-weight: 500; }
#admRecentActivity .ra-sub { font-size: 11px; color: var(--text-idle); margin-top: 3px; font-family: 'JetBrains Mono', monospace; }
#admRecentActivity .ra-time { font-size: 11px; color: var(--text-idle); white-space: nowrap; font-family: 'JetBrains Mono', monospace; }