/* ============================================================
   WALLET SETUP — COMPLETE
   Every line related to wallet setup/creation/import
   Extracted from claude-style.css
   ============================================================ */

/* ══════════════════════════════════════════════════════════════════
   WALLET SETUP PAGE — Claude design system (wsp-*)
   Dark mode base + full light mode overrides.
   Font: Inter (Claude scale). Tokens mirror claude-style.css.
   ══════════════════════════════════════════════════════════════════ */

/* ── Layout root ── */
.wsp-root {
  display: flex;
  flex-direction: column;
  border: none;
  justify-content: space-between;
  min-height: 100%;
  background: var(--bg, #000000);
  font-family: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  -webkit-font-smoothing: antialiased;
  overflow-y: auto;
  overscroll-behavior: contain;
  scrollbar-width: none;
}

.wsp-root::-webkit-scrollbar { display: none; }

/* ── Outer card wrapper ── */
.wsp-card {
  position: relative;
  overflow: hidden;
  margin: 8px 0;
  border-radius: 24px;
  border: none;
  background: none;
  display: flex;
  flex-direction: column;
}

.wsp-card .wsp-decor { display: none; }
.wsp-decor { position: absolute; width: 170px; height: 170px; pointer-events: none; background-image: radial-gradient(rgba(var(--accent-sky-rgb), 0.4) 1px, transparent 1.6px); background-size: 12px 12px; opacity: .4; }
.wsp-decor-tl { top: 0; left: 0; -webkit-mask-image: radial-gradient(circle at 0 0, black, transparent 70%); mask-image: radial-gradient(circle at 0 0, black, transparent 70%); }
.wsp-decor-br { bottom: 0; right: 0; -webkit-mask-image: radial-gradient(circle at 100% 100%, black, transparent 70%); mask-image: radial-gradient(circle at 100% 100%, black, transparent 70%); }

/* ── Hero section ── */
.wsp-hero {
  position: relative;
  z-index: 1;
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 64px 28px 28px;
  text-align: center;
  gap: 20px;
}

/* ── Logo ring ── */
.wsp-logo-ring {
  position: relative;
  width: 156px;
  height: 156px;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-top: 0;
  margin-bottom: 4px;
}
.wsp-logo-ring::before,
.wsp-logo-ring::after {
  content: '';
  position: absolute;
  border-radius: 50%;
  border: 1px solid rgba(var(--accent-sky-rgb), .4);
}
.wsp-logo-ring::before {
  width: 100%;
  height: 100%;
  opacity: .12;
  box-shadow: inset 0 0 14px rgba(var(--accent-sky-rgb), .7);
  animation: wsp-ring-expand 4.5s ease-in-out infinite;
}
.wsp-logo-ring::after {
  width: 76%;
  height: 76%;
  opacity: .18;
  box-shadow: 0 0 12px rgba(var(--accent-sky-rgb), .7);
  animation: wsp-ring-contract 3.2s ease-in-out infinite;
  animation-delay: .3s;
}

@keyframes wsp-ring-expand {
  0%, 100% { transform: scale(1); opacity: .14; }
  50%      { transform: scale(1.08); opacity: .32; }
}

@keyframes wsp-ring-contract {
  0%, 100% { transform: scale(1); opacity: .22; }
  50%      { transform: scale(0.92); opacity: .42; }
}

.wsp-logo-orbit {
  position: absolute;
  top: 50%;
  left: 50%;
  width: 1px;
  height: 1px;
  animation: wsp-ring-spin 30s linear infinite;
}

.wsp-orbit-logo {
  position: absolute;
  top: 0;
  left: 0;
  width: 15px;
  height: 15px;
  margin: -7.5px 0 0 -7.5px;
  opacity: .5;
  display: none; /* orbiting icon ring removed for a cleaner, single-mark logo */
}

@keyframes wsp-ring-spin {
  from { transform: rotate(0deg); }
  to   { transform: rotate(360deg); }
}

@media (prefers-reduced-motion: reduce) {
  .wsp-logo-orbit { animation: none; }
}

@media (prefers-reduced-motion: reduce) {
  .wsp-logo-ring::before,
  .wsp-logo-ring::after {
    animation: none;
  }
}

/* ── Logo ──
   Recolored via CSS mask (alpha channel of the halftone PNG) so it
   follows html[data-accent="..."] instead of a hardcoded gold bitmap.
   Element is a <div>, not <img>; background-color supplies the color. */
.wsp-logo {
  position: relative;
  z-index: 1;
  width: 118px;
  height: 118px;
  object-fit: contain;
  filter: none;
  margin: 0;
  display: inline-block;
  background-color: var(--text-sky);
  -webkit-mask-image: url(../illustrations/logo.png);
  mask-image: url(../illustrations/logo.png);
  -webkit-mask-size: contain;
  mask-size: contain;
  -webkit-mask-repeat: no-repeat;
  mask-repeat: no-repeat;
  -webkit-mask-position: center;
  mask-position: center;
}

/* ── Title ── */
.wsp-title {
  font-family: "Montserrat", sans-serif;
  font-size: 26px;
  font-weight: 700;
  letter-spacing: -0.02em;
  color: var(--text-normal-tier);
  line-height: 1.25;
}

.wsp-title-accent { color: var(--text-sky); }

/* ── Subtitle ── */
.wsp-sub {
  font-family: "Montserrat", sans-serif;
  font-size: 13.5px;
  font-weight: 400;
  color: var(--muted2);
  opacity: .82;
  line-height: 1.6;
  max-width: 260px;
  letter-spacing: -0.005em;
}

/* ── "More about" link ── */
.wsp-more {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  font-family: "Montserrat", sans-serif;
  font-size: 11px;
  font-weight: 700;
  color: var(--text-sky);
  text-decoration: none;
  letter-spacing: -0.005em;
  transition: background 150ms ease, border-color 150ms ease, transform 100ms ease;
  margin-top: 4px;
  padding: 7px 8px 7px 18px;
  border: 1px solid rgba(var(--accent-sky-rgb), 0.15);
  border-radius: 999px;
  background: linear-gradient(180deg, rgba(var(--accent-sky-rgb), 0.09), rgba(var(--accent-sky-rgb), 0.02));
}

.wsp-more-arrow {
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  width: 22px;
  height: 22px;
  border-radius: 50%;
  background: var(--text-sky);
  color: var(--text-on-accent);
  transition: transform 150ms ease;
}

.wsp-more:hover {
  border-color: rgba(var(--accent-sky-rgb), 0.6);
  background: linear-gradient(180deg, rgba(var(--accent-sky-rgb), 0.14), rgba(var(--accent-sky-rgb), 0.03));
}

.wsp-more:hover .wsp-more-arrow { transform: translateX(2px); }
.wsp-more:active { transform: scale(0.97); }

/* ── Footer (bottom anchor) ── */
.wsp-footer {
  position: sticky;
  bottom: 0;
  z-index: 1;
  padding: 0 0 8px;
  display: flex;
  flex-direction: column;
  gap: 12px;
}

/* ── Footer card wrapper ── */
.wsp-footer-card {
  border: none;
  border-radius: 18px;
  padding: 16px 24px 24px;
  display: flex;
  flex-direction: column;
  gap: 16px;
}

body.sidebar-is-expanded .wsp-footer-card {
  padding-left: 16px;
}

/* ── Agree row ── */
.wsp-agree {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 9px;
  font-family: "Montserrat", sans-serif;
  font-size: 12.5px;
  font-weight: 400;
  color: var(--muted2);
  opacity: .82;
  padding: 0 2px 4px;
  letter-spacing: -0.01em;
  line-height: 1.5;
  user-select: none;
}

.wsp-agree strong {
  font-weight: 600;
  color: var(--muted2);
}

/* ── Checkbox ── */
.wsp-agree input[type=checkbox] {
  width: 15px !important;
  height: 15px !important;
  min-width: 15px !important;
  max-width: 15px !important;
  max-height: 15px !important;
  aspect-ratio: 1 / 1;
  border-radius: 4px;
  border: 1px solid var(--text-sky);
  appearance: none;
  -webkit-appearance: none;
  background: transparent;
  cursor: pointer;
  flex-shrink: 0;
  box-sizing: border-box;
  padding: 0;
  margin: 0;
  transition: border-color 150ms ease, background 150ms ease;
}

.wsp-agree input[type=checkbox]:checked {
  background: var(--text-sky);
  border-color: var(--text-sky);
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 12'%3E%3Cpath d='M2 6l3 3 5-5' stroke='%23fff' stroke-width='2' fill='none' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
  background-size: 66%;
  background-repeat: no-repeat;
  background-position: center;
}

/* ── Shared icon/chevron for footer buttons ── */
.wsp-btn-ico {
  flex: 0 0 auto;
  width: 34px;
  height: 34px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
}

.wsp-btn-label { flex: 1; text-align: center; }
.wsp-btn-chevron { display: none; }

/* ── Create New Wallet button ── */
.wsp-btn-create {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 12px;
  width: 100%;
  box-sizing: border-box;
  margin: 0 auto;
  padding: 15px 16px;
  border-radius: 50px;
  border: none;
  background: var(--text-sky);
  color: var(--text-on-accent);
  font-family: "Montserrat", sans-serif;
  font-size: 14px;
  font-weight: 600;
  letter-spacing: -0.005em;
  cursor: pointer;
  transition: opacity 150ms ease, transform 100ms ease, box-shadow 150ms ease;
}

.wsp-btn-create .wsp-btn-ico { background: rgba(0, 0, 0, 0.15); color: var(--gold); }
.wsp-btn-create .wsp-btn-chevron { color: var(--gold); }

.wsp-btn-create:hover {
  opacity: 0.92;
  transform: translateY(-1px);
}

.wsp-btn-create:active { transform: translateY(0); opacity: 1; }

/* ── OR divider ── */
.wsp-divider {
  display: flex;
  align-items: center;
  gap: 10px;
  font-family: "Montserrat", sans-serif;
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.06em;
  color: var(--muted2);
  opacity: .6;
}
.wsp-divider::before,
.wsp-divider::after {
  content: '';
  flex: 1;
  height: 1px;
  background: linear-gradient(90deg, transparent, rgba(var(--accent-sky-rgb), 0.35));
}
.wsp-divider::after {
  background: linear-gradient(90deg, rgba(var(--accent-sky-rgb), 0.35), transparent);
}

/* ── Import link button ── */
.wsp-btn-import {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 12px;
  width: 100%;
  box-sizing: border-box;
  margin: 0 auto;
  padding: 15px 16px;
  border: 1px solid rgba(var(--accent-sky-rgb), 0.3);
  border-radius: 50px;
  background: transparent;
  color: var(--text-sky);
  font-family: "Montserrat", sans-serif;
  font-size: 14px;
  font-weight: 600;
  letter-spacing: -0.005em;
  cursor: pointer;
  transition: opacity 150ms ease;
}

.wsp-btn-import .wsp-btn-ico { background: rgba(var(--accent-sky-rgb), 0.12); color: var(--text-sky); }
.wsp-btn-import .wsp-btn-chevron { color: var(--text-sky); }

.wsp-btn-import:hover { opacity: 0.75; }

.wsp-btn-connect {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 12px;
  width: 100%;
  box-sizing: border-box;
  margin: 0 auto;
  padding: 15px 16px;
  border: 1px solid rgba(var(--accent-sky-rgb), 0.3);
  border-radius: 50px;
  background: transparent;
  color: var(--text-sky);
  font-family: "Montserrat", sans-serif;
  font-size: 14px;
  font-weight: 600;
  letter-spacing: -0.005em;
  cursor: pointer;
  transition: opacity 150ms ease;
}

.wsp-btn-connect .wsp-btn-ico { background: rgba(var(--accent-sky-rgb), 0.12); color: var(--text-sky); }
.wsp-btn-connect .wsp-btn-chevron { color: var(--text-sky); }

.wsp-btn-connect:hover { opacity: 0.75; }

/* ── Shake animation for unchecked submit ── */
@keyframes wsp-shake {
  0%, 100% { transform: translateX(0); }
  25%       { transform: translateX(-6px); }
  75%       { transform: translateX(6px); }
}

/* ── Agree alert modal animations ── */
@keyframes wspAlertFadeIn {
  from { opacity: 0; }
  to   { opacity: 1; }
}

@keyframes wspAlertSlideUp {
  from { opacity: 0; transform: translateY(16px) scale(0.97); }
  to   { opacity: 1; transform: translateY(0)    scale(1);    }
}

/* ══ More About modal ══ */
.wsp-about-topbar {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  padding: 8px 8px 8px;
  flex-shrink: 0;
  width: 100%;
  box-sizing: border-box;
}

.wsp-about-back {
  background: rgba(255,255,255,0.07);
  border: 1px solid var(--bb-border);
  color: var(--muted2);
  width: 34px;
  height: 34px;
  border-radius: 50%;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: background 150ms, color 150ms;
  flex-shrink: 0;
}

.wsp-about-back:hover {
  background: rgba(255,255,255,0.13);
  color: var(--muted2);
}

.wsp-about-content {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 20px 8px 0;
  width: 100%;
  box-sizing: border-box;
  text-align: center;
}

.wsp-about-logo {
  width: 72px;
  height: 72px;
  object-fit: contain;
  margin-bottom: 14px;
  display: inline-block;
  background-color: var(--text-sky);
  -webkit-mask-image: url(../illustrations/logo.png);
  mask-image: url(../illustrations/logo.png);
  -webkit-mask-size: contain;
  mask-size: contain;
  -webkit-mask-repeat: no-repeat;
  mask-repeat: no-repeat;
  -webkit-mask-position: center;
  mask-position: center;
}

body.sidebar-is-expanded .wsp-about-content {
  padding-left: 16px;
}

.wsp-about-body {
  width: 100%;
  font-size: 14px;
  font-weight: 400;
  color: var(--muted2);
  line-height: 1.7;
  letter-spacing: -0.01em;
  text-align: center;
}

.wsp-about-body p { margin: 0 0 20px; }

.wsp-about-cards {
  display: flex;
  flex-direction: column;
  gap: 10px;
  margin: 0 0 22px;
}

.wsp-about-card {
  display: flex;
  align-items: center;
  gap: 13px;
  background: #131412;
  border: none;
  border-radius: 14px;
  padding: 13px 14px;
  text-align: left;
  transition: background 150ms ease, border-color 150ms ease;
}

.wsp-about-card:hover {
  background: rgba(var(--accent-sky-rgb), 0.05);
}

.wsp-about-icon {
  display: none;
}

.wsp-about-card-text { flex: 1; min-width: 0; }

.wsp-about-card-title {
  font-size: 13.5px;
  font-weight: 600;
  color: var(--text-normal-tier);
  letter-spacing: -0.01em;
  line-height: 1.35;
  margin-bottom: 3px;
  border: none;
}

.wsp-about-card-desc {
  font-size: 11.5px;
  font-weight: 400;
  color: var(--muted2);
  opacity: .8;
  letter-spacing: -0.005em;
  line-height: 1.5;
  border: none;
}

.wsp-about-card-chevron {
  display: none;
}

.wsp-about-footer-divider {
  display: flex;
  align-items: center;
  gap: 10px;
  margin: 4px 0 12px;
}

.wsp-about-footer-line {
  flex: 1;
  height: 1px;
  background: linear-gradient(90deg, transparent, rgba(var(--accent-sky-rgb), 0.35));
}

.wsp-about-footer-divider .wsp-about-footer-line:last-child {
  background: linear-gradient(90deg, rgba(var(--accent-sky-rgb), 0.35), transparent);
}

.wsp-about-footer-mark {
  width: 20px;
  height: 20px;
  object-fit: contain;
  flex-shrink: 0;
}

.wsp-about-footnote {
  color: var(--text-dim-tier) !important;
  font-size: 12px !important;
  text-align: center;
}

.wsp-about-footnote-accent { color: var(--text-sky); font-weight: 600; }
.wsp-about-footnote-dot { color: var(--text-sky); opacity: .7; }

body.theme-light .wsp-about-back,
html[data-theme="light"] .wsp-about-back {
  background: rgba(0,0,0,0.06);
  border-color: var(--bb-border);
  color: var(--muted2);
}

body.theme-light .wsp-about-back:hover,
html[data-theme="light"] .wsp-about-back:hover { color: var(--muted2); }

body.theme-light .wsp-about-body,
html[data-theme="light"] .wsp-about-body { color: var(--muted2); }

body.theme-light .wsp-about-card,
html[data-theme="light"] .wsp-about-card {
  background: #FFFFFF;
}

body.theme-light .wsp-about-card:hover,
html[data-theme="light"] .wsp-about-card:hover {
  background: rgba(var(--accent-sky-rgb), 0.06);
}

body.theme-light .wsp-about-icon,
html[data-theme="light"] .wsp-about-icon {
  background: rgba(var(--accent-sky-rgb), 0.1);
  border-color: rgba(var(--accent-sky-rgb), 0.45);
}

/* ══════════════════════════════════════════════════════════════════
   WALLET SETUP — LIGHT MODE
   ══════════════════════════════════════════════════════════════════ */
body.theme-light .wsp-root,
html[data-theme="light"] .wsp-root {
  background: #FFFFFF;
}

body.theme-light .wsp-card,
html[data-theme="light"] .wsp-card {
  background: none;
  border: none;
}

body.theme-light .wsp-footer-card,
html[data-theme="light"] .wsp-footer-card {
  border-color: var(--bb-border);
}

body.theme-light .wsp-title,
html[data-theme="light"] .wsp-title {
  color: var(--text-normal-tier);
}

body.theme-light .wsp-sub,
html[data-theme="light"] .wsp-sub {
  color: var(--muted2);
}

body.theme-light .wsp-more,
html[data-theme="light"] .wsp-more {
  color: #b8790a;
  border-color: rgba(184, 121, 10, 0.35);
  background: linear-gradient(180deg, rgba(var(--accent-sky-rgb), 0.12), rgba(var(--accent-sky-rgb), 0.03));
}

body.theme-light .wsp-more-arrow,
html[data-theme="light"] .wsp-more-arrow {
  background: var(--text-sky);
  color: var(--text-on-accent);
}

body.theme-light .wsp-more:hover,
html[data-theme="light"] .wsp-more:hover {
  border-color: rgba(184, 121, 10, 0.55);
}

body.theme-light .wsp-divider,
html[data-theme="light"] .wsp-divider {
  color: var(--muted2);
}

body.theme-light .wsp-agree,
html[data-theme="light"] .wsp-agree {
  color: var(--muted2);
}

body.theme-light .wsp-agree strong,
html[data-theme="light"] .wsp-agree strong {
  color: var(--muted2);
}

body.theme-light .wsp-agree input[type=checkbox],
html[data-theme="light"] .wsp-agree input[type=checkbox] {
  border-color: var(--text-sky);
}

body.theme-light .wsp-agree input[type=checkbox]:checked,
html[data-theme="light"] .wsp-agree input[type=checkbox]:checked {
  background: var(--text-sky);
  border-color: var(--text-sky);
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 12'%3E%3Cpath d='M2 6l3 3 5-5' stroke='%23fff' stroke-width='2' fill='none' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
  background-size: 66%;
  background-repeat: no-repeat;
  background-position: center;
}

body.theme-light .wsp-btn-create,
html[data-theme="light"] .wsp-btn-create {
  background: var(--text-sky);
  color: var(--text-on-accent);
}

body.theme-light .wsp-btn-import,
html[data-theme="light"] .wsp-btn-import {
  color: var(--text-sky);
  border-color: rgba(var(--accent-sky-rgb), 0.4);
}

body.theme-light .wsp-btn-connect,
html[data-theme="light"] .wsp-btn-connect {
  color: var(--text-sky);
  border-color: rgba(var(--accent-sky-rgb), 0.4);
}

/* Light mode — More about sheet */
body.theme-light .wsp-about-sheet,
html[data-theme="light"] .wsp-about-sheet {
  background: #ffffff;
  border-color: var(--bb-border);
}

body.theme-light .wsp-about-close,
html[data-theme="light"] .wsp-about-close {
  background: rgba(0,0,0,0.06);
  border-color: var(--bb-border);
  color: var(--muted2);
}

body.theme-light .wsp-about-close:hover,
html[data-theme="light"] .wsp-about-close:hover {
  background: rgba(0,0,0,0.10);
  color: var(--muted2);
}

body.theme-light .wsp-about-title,
html[data-theme="light"] .wsp-about-title {
  color: var(--text-normal-tier);
}

body.theme-light .wsp-about-body,
html[data-theme="light"] .wsp-about-body {
  color: var(--muted2);
}

/* ═══════════════════════════════════════════════════════════════
   WALLET CREATE FLOW — theme-aware, matches wsp- design system
═══════════════════════════════════════════════════════════════ */

/* Root — transparent so parent overlay controls the bg */
.wc-root {
  display: flex;
  flex-direction: column;
  min-height: 100%;
  background: var(--bg, #000000);
  font-family: var(--ff-base);
  -webkit-font-smoothing: antialiased;
  overflow-y: auto;
  overscroll-behavior: contain;
  scrollbar-width: none;
  color: var(--muted2);
}

.wc-root::-webkit-scrollbar { display: none; }

/* ── Top bar — no border, back button floated right ── */
.wc-topbar {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  padding: var(--space-3) var(--space-4) var(--space-2);
  flex-shrink: 0;
  position: relative;
  z-index: 1;
}

/* ── Hero decorative dot-arcs (behind logo) ── */
.wc-hero-decor {
  position: absolute;
  top: 40px;
  left: 0;
  right: 0;
  height: 200px;
  pointer-events: none;
  overflow: hidden;
}
.wc-hero-decor::before,
.wc-hero-decor::after {
  content: '';
  position: absolute;
  top: 20px;
  width: 140px;
  height: 140px;
  background-image: radial-gradient(rgba(var(--accent-sky-rgb), 0.45) 1px, transparent 1.6px);
  background-size: 12px 12px;
  opacity: .4;
}
.wc-hero-decor::before { left: -30px; -webkit-mask-image: radial-gradient(circle at 30% 40%, black, transparent 68%); mask-image: radial-gradient(circle at 30% 40%, black, transparent 68%); }
.wc-hero-decor::after { right: -30px; -webkit-mask-image: radial-gradient(circle at 70% 40%, black, transparent 68%); mask-image: radial-gradient(circle at 70% 40%, black, transparent 68%); }

/* ── Logo glow (create/import hero) ── */
.wc-logo-glow {
  filter: drop-shadow(0 0 16px rgba(var(--accent-sky-rgb), 0.5));
  position: relative;
  z-index: 1;
}

/* ── Back button — exact wsp-about-back circle style ── */
.wc-back-btn {
  background: rgba(255,255,255,0.07);
  border: none;
  color: var(--btn-clr);
  width: 34px;
  height: 34px;
  border-radius: 50%;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: background 150ms, color 150ms;
  flex-shrink: 0;
  border: 1px solid var(--bb-border)!important;
}

.wc-back-btn:hover {
  background: rgba(255,255,255,0.13);
  color: var(--gold);
}

/* Light theme override */
body.theme-light .wc-back-btn,
html[data-theme="light"] .wc-back-btn {
  background: #ffffff;
  border: none;
  color: var(--bg);
  border: 1px solid var(--bb-border)!important;
}

body.theme-light .wc-back-btn:hover,
html[data-theme="light"] .wc-back-btn:hover {
  background: #f5f5f5;
  color: var(--sdv5-bg-hero);
}

/* ── Scrollable body ── */
.wc-body {
  flex: 1;
  padding: var(--space-2) var(--space-4) var(--space-10);
  display: flex;
  flex-direction: column;
  align-items: center;
}

.wc-body > * { width: 100%; }

/* ── Loading state ── */
.wc-loader {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: var(--space-3);
  padding: var(--space-10) var(--space-5);
}

.wc-spinner {
  width: 28px;
  height: 28px;
  border: 2px solid var(--gold-b);
  border-top-color: var(--text-sky);
  border-radius: var(--radius-full);
  animation: wc-spin 0.8s linear infinite;
}

@keyframes wc-spin {
  from { transform: rotate(0deg); }
  to   { transform: rotate(360deg); }
}

.wc-loader-label {
  font-family: var(--ff-base);
  font-size: var(--fs-sm);
  font-weight: var(--fw-normal);
  color: var(--muted2);
  letter-spacing: var(--ls-normal);
}

/* ── Section label — theme-aware ── */
.wc-label {
  font-family: var(--ff-base);
  font-size: var(--fs-xs);
  font-weight: var(--fw-semibold);
  color: var(--muted2);
  text-transform: uppercase;
  letter-spacing: var(--ls-wider);
  margin-bottom: var(--space-3);
  text-align: center;
}

/* ── Mnemonic grid — pro redesign ── */
.wc-mnemonic-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 8px;
  margin-bottom: 10px;
}

.wc-mnemonic-grid .mnemonic-word {
  background: rgba(255,255,255,0.04);
  border: 1px solid var(--bb-border);
  border-radius: 14px;
  padding: 10px 8px 12px;
  text-align: center;
  position: relative;
  transition: background 150ms ease, border-color 150ms ease, box-shadow 150ms ease;
  backdrop-filter: blur(8px);
}

.wc-mnemonic-grid .mnemonic-word:hover {
  background: rgba(var(--accent-sky-rgb),0.06);
  border-color: rgba(var(--accent-sky-rgb),0.28);
  border: 1px solid var(--bb-border);
}

/* ── Number badge — top center ── */
.wc-mnemonic-grid .mnemonic-idx {
  font-family: 'IBM Plex Mono', monospace;
  font-size: 13px;
  font-weight: 700;
  color: var(--muted2);
  background: var(--text-sky);
  border-radius: 5px;
  padding: 1px 6px;
  display: inline-block;
  margin-bottom: 6px;
  line-height: 1.5;
  letter-spacing: .02em;
}

/* ── Word text ── */
.wc-mnemonic-grid .mnemonic-text {
  font-family: var(--ff-base);
  font-size: 15px;
  font-weight: 500;
  color: var(--muted2);
  letter-spacing: .01em;
  display: block;
  line-height: 1.3;
  transition: filter 200ms ease;
}

/* ── Blurred state ── */
.wc-mnemonic-grid.phrases-hidden .mnemonic-text {
  filter: blur(6px);
  user-select: none;
}

/* ── Sidebar expanded: shrink word font to fit narrower content area ── */
body.sidebar-is-expanded .wc-mnemonic-grid .mnemonic-text {
  font-size: 11px;
}

/* ── Eye toggle row ── */
.mnemonic-eye-row {
  display: flex;
  justify-content: center;
  margin-top: 10px;
  margin-bottom: 10px;
}

.mnemonic-eye-btn {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  background: rgba(255,255,255,0.05);
  border: 1px solid var(--bb-border);
  border-radius: 20px;
  padding: 7px 16px 7px 12px;
  color: var(--text-white-a85);
  font-family: var(--ff-base);
  font-size: 12px;
  font-weight: 500;
  cursor: pointer;
  transition: background 150ms ease, border-color 150ms ease, color 150ms ease;
}

.mnemonic-eye-btn:hover {
  background: rgba(var(--accent-sky-rgb),0.10);
  border-color: rgba(var(--accent-sky-rgb),0.35);
  color: var(--text-sky);
}

.mnemonic-eye-btn svg { flex-shrink: 0; }

/* Light mode overrides for redesigned cards */
body.theme-light .wc-mnemonic-grid .mnemonic-word,
html[data-theme="light"] .wc-mnemonic-grid .mnemonic-word {
  background: #FFFFFF;
  border-color: var(--bb-border);
  border: 1px solid var(--bb-border)!important;
  backdrop-filter: none;
}

body.theme-light .wc-mnemonic-grid .mnemonic-word:hover,
html[data-theme="light"] .wc-mnemonic-grid .mnemonic-word:hover {
  background: rgba(var(--accent-sky-rgb),0.07);
  border-color: rgba(var(--accent-sky-rgb),0.30);
  border: 1px solid var(--bb-border);
}

body.theme-light .wc-mnemonic-grid .mnemonic-idx,
html[data-theme="light"] .wc-mnemonic-grid .mnemonic-idx {
  background: #c6900a;
  color: var(--muted2);
}

body.theme-light .wc-mnemonic-grid .mnemonic-text,
html[data-theme="light"] .wc-mnemonic-grid .mnemonic-text {
  color: var(--muted2);
}

body.theme-light .mnemonic-eye-btn,
html[data-theme="light"] .mnemonic-eye-btn {
  background: rgba(0,0,0,0.04);
  border-color: var(--bb-border);
  color: var(--text-black-a85);
}

body.theme-light .mnemonic-eye-btn:hover,
html[data-theme="light"] .mnemonic-eye-btn:hover {
  background: rgba(var(--accent-sky-rgb),0.08);
  border-color: rgba(var(--accent-sky-rgb),0.35);
  color: var(--accent-sky-light);
}

/* ── Copy phrase button — outlined ghost ── */
.wc-copy-btn {
  width: 100%;
  padding: 14px;
  border-radius: 14px;
  border: none;
  background: var(--text-sky);
  color: var(--text-on-accent);
  font-family: var(--ff-base);
  font-size: var(--fs-lg);
  font-weight: var(--fw-semibold);
  letter-spacing: var(--ls-normal);
  cursor: pointer;
  transition: opacity 150ms ease, transform 100ms ease, box-shadow 150ms ease;
  border: 1px solid var(--bb-border)!important;
}

.wc-copy-btn:hover {
  opacity: 0.92;
  transform: translateY(-1px);
  border: 1px solid var(--bb-border)!important;
}

.wc-copy-btn:active { transform: translateY(0); opacity: 1; }

body.theme-light .wc-copy-btn,
html[data-theme="light"] .wc-copy-btn {
  background: var(--text-sky);
  color: var(--text-on-accent);
  border: 1px solid var(--bb-border)!important;
}

body.theme-light .wc-copy-btn:hover,
html[data-theme="light"] .wc-copy-btn:hover {
  opacity: 0.92;
  border: 1px solid var(--bb-border)!important;
}

/* ── Save button — sky blue var(--text-sky) ── */
.wc-save-btn {
  width: 100%;
  padding: 16px;
  border-radius: 14px;
  border: none;
  background: var(--text-sky);
  color: var(--text-on-accent);
  font-family: var(--ff-base);
  font-size: var(--fs-lg);
  font-weight: var(--fw-semibold);
  letter-spacing: var(--ls-normal);
  cursor: pointer;
  transition: opacity 150ms ease, transform 100ms ease, box-shadow 150ms ease;
  border: 1px solid var(--bb-border)!important;
}

.wc-save-btn:hover {
  opacity: 0.92;
  transform: translateY(-1px);
  border: 1px solid var(--bb-border)!important;
}

.wc-save-btn:active {
  transform: translateY(0);
  opacity: 1;
}

/* ── Light theme overrides ── */
body.theme-light .wc-root,
html[data-theme="light"] .wc-root {
  background: #FFFFFF;
  color: var(--muted2);
}

body.theme-light .wc-label,
html[data-theme="light"] .wc-label {
  color: var(--muted2);
}

body.theme-light .wc-loader-label,
html[data-theme="light"] .wc-loader-label {
  color: var(--muted2);
}

body.theme-light .wc-spinner,
html[data-theme="light"] .wc-spinner {
  border-color: var(--bb-border);
  border-top-color: var(--text-sky);
}

body.theme-light .wc-save-btn,
html[data-theme="light"] .wc-save-btn {
  background: var(--text-sky);
  color: var(--text-on-accent);
  border: none;
  border: 1px solid var(--bb-border)!important;
}

body.theme-light .wc-save-btn:hover,
html[data-theme="light"] .wc-save-btn:hover {
  opacity: 0.92;
  border: 1px solid var(--bb-border)!important;
}

/* ══════════════════════════════════════════════
   IMPORT WALLET — matches wc-* create style
   ══════════════════════════════════════════════ */

/* ── Header block ── */
.wc-import-header {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 6px;
  margin-bottom: 18px;
  margin-top: 4px;
}

.wc-import-icon {
  width: 48px;
  height: 48px;
  border-radius: 14px;
  background: rgba(var(--accent-sky-rgb),0.12);
  border: 1px solid rgba(var(--accent-sky-rgb),0.22);
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--text-sky);
  margin-bottom: 2px;
  border: 1px solid var(--bb-border);
}

.wc-import-title {
  font-family: var(--ff-base);
  font-size: 17px;
  font-weight: 700;
  color: var(--text-normal-tier);
  letter-spacing: -0.01em;
}

.wc-import-subtitle {
  font-family: var(--ff-base);
  font-size: var(--fs-xs);
  font-weight: var(--fw-normal);
  color: var(--muted2);
  letter-spacing: var(--ls-normal);
}

/* ── Warning banner ── */
.wc-import-warning {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  background: rgba(251,191,36,0.07);
  border: 1px solid rgba(251,191,36,0.20);
  border-radius: 12px;
  padding: 11px 13px;
  margin-bottom: 20px;
  width: 100%;
  box-sizing: border-box;
}

.wc-import-warning-icon {
  flex-shrink: 0;
  color: var(--ref-tag-warn);
  margin-top: 1px;
}

.wc-import-warning span {
  font-family: var(--ff-base);
  font-size: var(--fs-xs);
  font-weight: var(--fw-normal);
  color: var(--state-warning-text);
  line-height: 1.55;
}

/* "Private key is hidden — tap to reveal again" banner uses the active
   theme accent instead of the generic amber warning tone, since it's an
   informational tap-target, not a real warning. */
#pk-hidden-card {
  background: rgba(var(--accent-sky-rgb), .08) !important;
  border-color: rgba(var(--accent-sky-rgb), .28) !important;
}
#pk-hidden-card .wc-import-warning-icon,
#pk-hidden-card span {
  color: rgb(var(--accent-sky-rgb)) !important;
}

/* ── Fields container ── */
.wc-import-fields {
  width: 100%;
  display: flex;
  flex-direction: column;
  gap: 0;
  margin-bottom: 16px;
}

/* ── Inputs ── */
.wc-import-input {
  width: 100%;
  box-sizing: border-box;
  background: rgba(255,255,255,0.05);
  border: 1px solid var(--bb-border);
  border-radius: 12px;
  padding: 11px 13px;
  font-family: 'IBM Plex Mono', 'Courier New', monospace;
  font-size: 15px;
  font-weight: 400;
  color: var(--muted2);
  outline: none;
  transition: border-color 150ms ease, box-shadow 150ms ease, background 150ms ease;
  margin-bottom: 8px;
  -webkit-appearance: none;
  appearance: none;
}

.wc-import-textarea {
  resize: none;
  line-height: 1.6;
  font-size: 20px;
}

.wc-import-input::placeholder {
  color: var(--text-dim-tier);
  font-size: 15px;
}

.wc-import-input:focus {
  border-color: rgba(var(--accent-sky-rgb),0.45);
  background: rgba(var(--accent-sky-rgb),0.05);
  border: 1px solid var(--bb-border);
}

/* ── Primary CTA button ── */
.wc-import-btn {
  width: 100%;
  padding: 15px;
  border-radius: 14px;
  border: none;
  background: var(--text-sky);
  color: var(--text-on-accent);
  font-family: var(--ff-base);
  font-size: var(--fs-lg);
  font-weight: var(--fw-semibold);
  letter-spacing: var(--ls-normal);
  cursor: pointer;
  display: flex;
  align-items: center;
  gap: 8px;
  transition: opacity 150ms ease, transform 100ms ease, box-shadow 150ms ease;
  border: 1px solid var(--bb-border)!important;
  margin-top: 2px;
}

.wc-import-btn-label { flex: 1; text-align: center; }
.wc-import-btn-chevron { flex-shrink: 0; }

.wc-import-btn:hover:not(:disabled) {
  opacity: 0.92;
  transform: translateY(-1px);
  border: 1px solid var(--bb-border)!important;
}

.wc-import-btn:active:not(:disabled) {
  transform: translateY(0);
  opacity: 1;
}

.wc-import-btn:disabled {
  opacity: 0.55;
  cursor: not-allowed;
  transform: none;
}

/* ── Light theme ── */
body.theme-light .wc-import-icon,
html[data-theme="light"] .wc-import-icon {
  background: rgba(198, 144, 10,0.09);
  border-color: rgba(198, 144, 10,0.20);
  color: var(--accent-sky-light);
}

body.theme-light .wc-import-title,
html[data-theme="light"] .wc-import-title {
  color: var(--text-normal-tier);
}

body.theme-light .wc-import-subtitle,
html[data-theme="light"] .wc-import-subtitle {
  color: var(--muted2);
}

body.theme-light .wc-import-warning,
html[data-theme="light"] .wc-import-warning {
  background: rgba(217,119,6,0.06);
  border-color: rgba(217,119,6,0.18);
}

body.theme-light .wc-import-warning span,
html[data-theme="light"] .wc-import-warning span {
  color: var(--state-warning-text-light);
}

body.theme-light .wc-import-warning-icon,
html[data-theme="light"] .wc-import-warning-icon {
  color: var(--state-warning-icon);
}

body.theme-light .wc-import-input,
html[data-theme="light"] .wc-import-input {
  background: #FFFFFF;
  border-color: var(--bb-border);
  color: var(--muted2);
}

body.theme-light .wc-import-input::placeholder,
html[data-theme="light"] .wc-import-input::placeholder {
  color: var(--text-dim-tier);
}

body.theme-light .wc-import-input:focus,
html[data-theme="light"] .wc-import-input:focus {
  border-color: rgba(198, 144, 10,0.40);
  background: rgba(198, 144, 10,0.04);
  border: 1px solid var(--bb-border);
}

body.theme-light .wc-import-btn,
html[data-theme="light"] .wc-import-btn {
  background: var(--text-sky);
  color: var(--text-on-accent);
  border: 1px solid var(--bb-border)!important;
}

body.theme-light .wc-import-btn:hover:not(:disabled),
html[data-theme="light"] .wc-import-btn:hover:not(:disabled) {
  opacity: 0.92;
  border: 1px solid var(--bb-border)!important;
}

/* ══════════════════════════════════════════════
   SEED PHRASE GRID — 12-word card boxes
   ══════════════════════════════════════════════ */

/* Label row: "Recovery Phrase" + paste-all button */
.wc-seed-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: 100%;
  margin-bottom: 10px;
}

/* ── Instructional hint under section header ── */
.wc-seed-hint {
  display: flex;
  align-items: flex-start;
  gap: 8px;
  font-family: var(--ff-base);
  font-size: 12.5px;
  font-weight: 400;
  color: var(--muted2);
  line-height: 1.5;
  margin: -2px 0 12px;
  text-align: left;
}
.wc-seed-hint svg { flex-shrink: 0; margin-top: 2px; color: var(--text-sky); }

/* ── Caption under Import & Encrypt button ── */
.wc-import-caption {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  font-family: var(--ff-base);
  font-size: 11.5px;
  font-weight: 400;
  color: var(--text-dim-tier);
  margin-top: 12px;
  text-align: center;
}
.wc-import-caption svg { flex-shrink: 0; color: var(--text-dim-tier); }

.wc-seed-paste-all {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  background: rgba(var(--accent-sky-rgb),0.10);
  border: 1px solid rgba(var(--accent-sky-rgb),0.22);
  border-radius: 20px;
  padding: 5px 12px 5px 9px;
  color: var(--text-sky);
  font-family: var(--ff-base);
  font-size: 11px;
  font-weight: 600;
  cursor: pointer;
  transition: background 150ms, box-shadow 150ms;
  letter-spacing: 0.01em;
}

.wc-seed-paste-all:hover {
  background: rgba(var(--accent-sky-rgb),0.18);
  border: 1px solid var(--bb-border);
}

.wc-seed-paste-all:active { opacity: 0.82; }

/* 3-column grid */
.wc-seed-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 8px;
  width: 100%;
}

/* Individual card */
.wc-seed-card {
  position: relative;
  background: rgba(255,255,255,0.04);
  border: 1px solid var(--bb-border);
  border-radius: 14px;
  padding: 10px 8px 12px;
  display: flex;
  flex-direction: column;
  gap: 6px;
  text-align: center;
  transition: background 150ms ease, border-color 150ms ease, box-shadow 150ms ease;
  backdrop-filter: blur(8px);
  min-width: 0;
}

.wc-seed-card:hover {
  background: rgba(var(--accent-sky-rgb),0.06);
  border-color: rgba(var(--accent-sky-rgb),0.28);
  border: 1px solid var(--bb-border)!important;
}

.wc-seed-card:focus-within,
/* Import seed grid — make input behave exactly like div.mnemonic-text */
.wc-seed-grid .mnemonic-word {
  padding: 10px 8px 12px;
}

.wc-seed-grid input.mnemonic-text {
  /* Kill browser UA input defaults so height matches div.mnemonic-text */
  padding: 0;
  margin: 0;
  border: none;
  outline: none;
  box-sizing: content-box;
  height: auto;
  min-height: unset;
  -webkit-appearance: none;
  appearance: none;
  display: block;
  width: 100%;
  font-family: var(--ff-base);
  font-size: 15px;
  font-weight: 500;
  color: var(--muted2);
  text-align: center;
  letter-spacing: .01em;
  line-height: 1.3;
}

/* Input field background — the field itself, not the tile it sits in */
#wc-seed-grid input.mnemonic-text {
  background: #000000;
}

body.theme-light #wc-seed-grid input.mnemonic-text,
html[data-theme="light"] #wc-seed-grid input.mnemonic-text {
  background: #FFFFFF;
}

.wc-seed-grid input.mnemonic-text::placeholder {
  color: var(--text-dim-tier);
  font-size: 11px;
}

.wc-seed-grid .mnemonic-word:focus-within {
  border-color: rgba(var(--accent-sky-rgb),0.50);
  background: rgba(var(--accent-sky-rgb),0.05);
  border: 1px solid var(--bb-border);
}

/* Number badge — outlined gold style
   NOTE: the import-grid JS renders each badge with class "mnemonic-idx"
   (reused from the Create Wallet screen's solid-fill style), so without
   this override the outlined .wc-seed-card-num rule below never applies
   to the Import Wallet grid. Scoping to #wc-seed-grid wins on specificity
   over the plain .mnemonic-idx rule and doesn't clash with
   .wc-mnemonic-grid .mnemonic-idx (different ancestor, never matches here). */
#wc-seed-grid .mnemonic-idx {
  font-family: 'IBM Plex Mono', monospace;
  font-size: 13px;
  font-weight: 700;
  color: var(--text-sky);
  background: rgba(var(--accent-sky-rgb), 0.08);
  border: 1px solid rgba(var(--accent-sky-rgb), 0.5);
  border-radius: 6px;
  padding: 1px 7px;
  display: inline-block;
  line-height: 1.5;
  letter-spacing: .02em;
  align-self: center;
  margin: 0 auto 8px;
  user-select: none;
  text-align: center;
}

body.theme-light #wc-seed-grid .mnemonic-idx,
html[data-theme="light"] #wc-seed-grid .mnemonic-idx {
  background: rgba(198, 144, 10, 0.10);
  border-color: rgba(198, 144, 10, 0.5);
  color: #c6900a;
}

/* Create-wallet reveal screen (#mnemonic-grid) — match Import screen's outlined badge style */
#mnemonic-grid.wc-mnemonic-grid .mnemonic-idx {
  font-family: 'IBM Plex Mono', monospace;
  font-size: 13px;
  font-weight: 700;
  color: var(--text-sky);
  background: rgba(var(--accent-sky-rgb), 0.08);
  border: 1px solid rgba(var(--accent-sky-rgb), 0.5);
  border-radius: 6px;
  padding: 1px 7px;
  display: inline-block;
  line-height: 1.5;
  letter-spacing: .02em;
  margin-bottom: 6px;
  user-select: none;
  text-align: center;
}

body.theme-light #mnemonic-grid.wc-mnemonic-grid .mnemonic-idx,
html[data-theme="light"] #mnemonic-grid.wc-mnemonic-grid .mnemonic-idx {
  background: rgba(198, 144, 10, 0.10);
  border-color: rgba(198, 144, 10, 0.5);
  color: #c6900a;
}

.wc-seed-card-num {
  font-family: 'IBM Plex Mono', monospace;
  font-size: 13px;
  font-weight: 700;
  color: var(--text-sky);
  background: rgba(var(--accent-sky-rgb), 0.08);
  border: 1px solid rgba(var(--accent-sky-rgb), 0.5);
  border-radius: 6px;
  padding: 1px 7px;
  display: inline-block;
  line-height: 1.5;
  letter-spacing: .02em;
  align-self: center;
  margin-bottom: 6px;
  user-select: none;
  text-align: center;
}

/* Word input */
.wc-seed-card-input {
  width: 100%;
  background: transparent;
  border: none;
  outline: none;
  font-family: var(--ff-base);
  font-size: 15px;
  font-weight: 500;
  color: var(--muted2);
  padding: 2px 4px;
  min-width: 0;
  text-overflow: ellipsis;
  text-align: center;
  letter-spacing: .01em;
  line-height: 1.3;
  -webkit-appearance: none;
  appearance: none;
}

.wc-seed-card-input::placeholder {
  color: var(--text-dim-tier);
  font-size: 11px;
}

/* Flash animations */
@keyframes wsc-flash-ok {
  0%   { border-color: rgba(var(--accent-sky-rgb),0.80); border: 1px solid var(--bb-border); }
  100% { border-color: var(--bb-border); box-shadow: none; }
}

@keyframes wsc-flash-err {
  0%   { border-color: rgba(239,68,68,0.80); border: 1px solid var(--bb-border); }
  100% { border-color: var(--bb-border); box-shadow: none; }
}

.wc-seed-card.wsc-flash-ok, .mnemonic-word.wsc-flash-ok   { animation: wsc-flash-ok  0.6s ease forwards; }
.wc-seed-card.wsc-flash-err, .mnemonic-word.wsc-flash-err { animation: wsc-flash-err 0.6s ease forwards; }

/* ── Mnemonic-style seed cards: blur words when hidden ── */
.wc-seed-grid.phrases-hidden .wc-seed-card-input,
.wc-seed-grid.phrases-hidden .mnemonic-text {
  filter: blur(6px);
  user-select: none;
  pointer-events: none;
}

.wc-seed-grid.phrases-hidden .wc-seed-card-num,
.wc-seed-grid.phrases-hidden .mnemonic-idx {
  /* keep number badge readable */
  filter: none;
}

/* ── Private key input with eye + paste icons ── */
.wc-privkey-wrap {
  position: relative;
  width: 100%;
}

.wc-privkey-wrap .wc-import-input {
  padding-right: 76px;
  width: 100%;
  box-sizing: border-box;
  margin-bottom: 0;
}

.wc-privkey-eye,
.wc-privkey-paste {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  background: none;
  border: none;
  padding: 4px 5px;
  cursor: pointer;
  color: var(--muted2);
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 6px;
  transition: color 150ms ease, background 150ms ease;
}

.wc-privkey-eye  { right: 40px; }
.wc-privkey-paste { right: 10px; }

.wc-privkey-eye:hover,
.wc-privkey-paste:hover {
  color: var(--text-sky);
  background: rgba(var(--accent-sky-rgb),0.10);
}

body.theme-light .wc-privkey-eye,
body.theme-light .wc-privkey-paste,
html[data-theme="light"] .wc-privkey-eye,
html[data-theme="light"] .wc-privkey-paste {
  color: var(--muted2);
}

body.theme-light .wc-privkey-eye:hover,
body.theme-light .wc-privkey-paste:hover,
html[data-theme="light"] .wc-privkey-eye:hover,
html[data-theme="light"] .wc-privkey-paste:hover {
  color: var(--accent-sky-light);
  background: rgba(198, 144, 10,0.09);
}

/* ── Light theme ── */
body.theme-light .wc-seed-paste-all,
html[data-theme="light"] .wc-seed-paste-all {
  background: rgba(198, 144, 10,0.08);
  border-color: rgba(198, 144, 10,0.20);
  color: var(--accent-sky-light);
}

body.theme-light .wc-seed-paste-all:hover,
html[data-theme="light"] .wc-seed-paste-all:hover {
  background: rgba(198, 144, 10,0.15);
}

body.theme-light .wc-seed-card,
html[data-theme="light"] .wc-seed-card {
  background: #FFFFFF;
  border-color: var(--bb-border);
  border: 1px solid var(--bb-border)!important;
  backdrop-filter: none;
}

body.theme-light .wc-seed-card:hover,
html[data-theme="light"] .wc-seed-card:hover {
  background: rgba(var(--accent-sky-rgb),0.07);
  border-color: rgba(var(--accent-sky-rgb),0.30);
  border: 1px solid var(--bb-border)!important;
}

body.theme-light .wc-seed-card:focus-within,
html[data-theme="light"] .wc-seed-card:focus-within {
  border-color: rgba(198, 144, 10,0.45);
  background: rgba(198, 144, 10,0.04);
  border: 1px solid var(--bb-border)!important;
}

body.theme-light .wc-seed-card-num,
html[data-theme="light"] .wc-seed-card-num {
  background: #c6900a;
  color: var(--text-normal-tier);
}

body.theme-light .wc-seed-card-input,
html[data-theme="light"] .wc-seed-card-input {
  color: var(--muted2);
}

body.theme-light .wc-seed-card-input::placeholder,
html[data-theme="light"] .wc-seed-card-input::placeholder {
  color: var(--text-dim-tier);
}
/* ============================================================
   WALLET CSS — COMPLETE
   Every line related to the wallet functionality
   ============================================================ */

/* ═══════════ WALLET NAV BADGE ═══════════ */
.wallet-nav-badge{
  position:absolute;top:8px;right:calc(50% - 22px);
  background:var(--gold);color:var(--sdv5-bg-hero);font-size:8px;font-weight:800;
  border-radius:99px;padding:1px 4px;min-width:14px;text-align:center;
  display:none;
}
.wallet-nav-badge.show{display:block}
.nav-btn.active.wallet-nav::after{background:var(--gold)}
.nav-btn.wallet-nav.active{color:var(--gold)}

/* ═══════════ WALLET POPUP PANEL — FULLSCREEN OVERLAY ═══════════ */
/* [migrated to overlay.css] */

/* [migrated to overlay.css] */

@keyframes walletFadeIn{from{opacity:0;transform:translateY(10px)}to{opacity:1;transform:translateY(0)}}
/* [panel CSS migrated to overlay.css] */


/* Wallet Header */
.wallet-header{
  display:flex;align-items:center;justify-content:space-between;
  padding:14px 16px 12px;border-bottom:1px solid var(--gold-b);
  background:linear-gradient(135deg,rgba(208,208,208,.07) 0%,rgba(6,6,8,.6) 100%);
  flex-shrink:0;gap:8px
}
.wallet-header-left{display:flex;align-items:center;gap:10px}
.wallet-orb{
  width:30px;height:30px;border-radius:9px;flex-shrink:0;
  background:linear-gradient(145deg,#D0D0D0,#E5E5E5);
  display:flex;align-items:center;justify-content:center;font-size:15px;
  border: 1px solid var(--bb-border);font-weight:800;letter-spacing:-.3px;color:var(--gold)}
.wallet-subtitle{font-size:11px;font-weight:700;color:var(--muted2);letter-spacing:.03em;text-transform:uppercase}
.wallet-close-btn{
  background:transparent;border:1px solid var(--gold-b);border-radius:8px;
  width:28px;height:28px;display:flex;align-items:center;justify-content:center;
  color:var(--muted2);font-size:16px;cursor:pointer;transition:all .15s
}
.wallet-close-btn:hover{color:var(--text);border-color:var(--gold-bb)}

/* Chain Selector Bar */
.wallet-chain-bar{
  display:flex;align-items:center;gap:6px;padding:10px 14px;
  border-bottom:1px solid rgba(208,208,208,.06);flex-shrink:0;overflow-x:auto;
  scrollbar-width:none;
}
.wallet-chain-bar::-webkit-scrollbar{display:none}
.chain-chip{
  display:flex;align-items:center;gap:5px;
  background:var(--input);border:1px solid var(--gold-b);border-radius:99px;
  padding:5px 11px;font-size:11px;font-weight:700;cursor:pointer;
  transition:all .15s;white-space:nowrap;flex-shrink:0;color:var(--muted2)
}
.chain-chip:hover{background:var(--gold-dim);color:var(--gold);border-color:var(--gold-bb)}
.chain-chip.active{background:var(--gold-dim);color:var(--gold);border-color:var(--gold-bb)}
.chain-chip-dot{width:6px;height:6px;border-radius:50%;background:currentColor;opacity:.6}

/* Portfolio Summary */
.wallet-portfolio{
  padding:16px 16px 12px;border-bottom:1px solid rgba(208,208,208,.06);flex-shrink:0
}
.portfolio-total-label{font-size:10px;font-weight:700;color:var(--muted);text-transform:uppercase;letter-spacing:.06em;margin-bottom:4px}
.portfolio-total{font-size:32px;font-weight:800;letter-spacing:-1px;color: var(--text-normal-tier);line-height:1;margin-bottom:8px}
.portfolio-total span{font-size:14px;font-weight:600;color:var(--muted2)}
.portfolio-change{display:inline-flex;align-items:center;gap:4px;font-size:12px;font-weight:700;padding:3px 9px;border-radius:99px}
.portfolio-change.up{color: var(--muted2);background:rgba(255,255,255,.1);border:1px solid var(--bb-border)}
.portfolio-change.dn{color:var(--red);background:rgba(255,64,64,.08);border:1px solid rgba(255,64,64,.18)}
.portfolio-change.neutral{color:var(--muted2);background:rgba(255,255,255,.05);border:1px solid var(--bb-border)}

/* Action Buttons */
.wallet-actions{
  display:grid;grid-template-columns:repeat(4,1fr);gap:8px;
  padding:10px 14px 12px;border-bottom:1px solid rgba(208,208,208,.06);flex-shrink:0
}
.wallet-action-btn{
  display:flex;flex-direction:column;align-items:center;gap:5px;
  background:var(--input);border:1px solid var(--gold-b);border-radius:12px;
  padding:10px 6px;cursor:pointer;transition:all .15s;color:var(--muted2)
}
.wallet-action-btn:hover{background:var(--gold-dim);color:var(--gold);border-color:var(--gold-bb);transform:translateY(-1px)}
.wallet-action-btn.active-action{background:var(--gold-dim);color:var(--gold);border-color:var(--gold-bb)}
.wallet-action-icon{font-size:18px;line-height:1}
.wallet-action-label{font-size:10px;font-weight:700;letter-spacing:.03em}

/* Tab Bar */
.wallet-tabs{
  display:flex;border-bottom:1px solid var(--gold-b);flex-shrink:0
}
.wallet-tab{
  flex:1;padding:10px 0;font-size:12px;font-weight:700;text-align:center;
  cursor:pointer;color:var(--muted2);border-bottom:2px solid transparent;
  transition:all .15s;letter-spacing:.02em
}
.wallet-tab.active{color:var(--gold);border-bottom-color:var(--gold)}

/* Content panels */
.wallet-content{flex:1;overflow-y:auto;overscroll-behavior:contain}

/* Token list */
.wallet-token-list{padding:6px 10px 12px}
.wallet-token-row{
  display:flex;align-items:center;gap:10px;
  padding:10px 8px;border-radius:11px;cursor:pointer;transition:background .12s
}
.wallet-token-row:hover{background:rgba(208,208,208,.04)}
.wt-avatar{
  width:38px;height:38px;border-radius:50%;background:var(--gold-dim);
  border:1px solid var(--gold-b);display:flex;align-items:center;justify-content:center;
  font-size:14px;font-weight:800;color: var(--muted2);flex-shrink:0;overflow:hidden;position:relative
}
.wt-avatar img{width:100%;height:100%;object-fit:cover;border-radius:50%}
.wt-chain-badge{
  position:absolute;bottom:-2px;right:-2px;width:14px;height:14px;
  border-radius:50%;border:1.5px solid var(--card);background:var(--bg);
  display:flex;align-items:center;justify-content:center;font-size:8px
}
.wt-info{flex:1;min-width:0}
.wt-sym{font-size:14px;font-weight:700;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.wt-name{font-size:11px;color:var(--muted2);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.wt-right{text-align:right;flex-shrink:0}
.wt-value{font-family:"Montserrat", sans-serif;font-size:13px;font-weight:600;color:var(--text)}
.wt-bal{font-size:10px;color:var(--muted2);font-family:"Montserrat", sans-serif}
.wt-change{font-size:10px;font-weight:700}
.wt-change.up{color:var(--green)}
.wt-change.dn{color:var(--red)}

/* Address Display */
.wallet-address-row{
  display:flex;align-items:center;gap:6px;padding:8px 14px;
  background:rgba(208,208,208,.03);border-top:1px solid rgba(208,208,208,.05);
  flex-shrink:0;cursor:pointer
}
.wallet-address-row:hover .wallet-address-text{color:var(--gold)}
.wallet-address-label{font-size:11px;font-weight:800;text-transform:uppercase;color:var(--muted);flex-shrink:0;letter-spacing:.04em}
.wallet-address-text{font-family:"Montserrat", sans-serif;font-size:10px;color:var(--muted2);flex:1;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;transition:color .15s}
.wallet-copy-btn{font-size:12px;flex-shrink:0;opacity:.5;transition:opacity .15s}
.wallet-address-row:hover .wallet-copy-btn{opacity:1}

/* Send / Receive / Swap panels */
.wallet-action-panel{
  padding:14px 16px;border-top:1px solid var(--gold-b);flex-shrink:0;
  animation:panelIn .2s cubic-bezier(.2,.8,.4,1)
}
@keyframes panelIn{from{opacity:0;transform:translateY(10px)}to{opacity:1;transform:translateY(0)}}
.wap-title{font-size:13px;font-weight:800;color: var(--text-normal-tier);margin-bottom:12px;display:flex;align-items:center;gap:6px}
.wap-title-icon{font-size:16px}
.wap-input-label{font-size:10px;font-weight:700;color:var(--muted);text-transform:uppercase;letter-spacing:.05em;margin-bottom:5px}
.wap-input{
  width:100%;background:var(--input);border:1px solid var(--gold-b);border-radius:10px;
  padding:10px 13px;font-family:"Montserrat", sans-serif;font-size:12px;
  color: var(--muted2);outline:none;transition:border-color .15s;margin-bottom:10px
}
.wap-input:focus{border-color:var(--gold-bb)}
.wap-input::placeholder{color:var(--muted)}
.wap-row{display:grid;grid-template-columns:1fr 1fr;gap:8px;margin-bottom:10px}
.wap-token-select{
  width:100%;background:var(--input);border:1px solid var(--gold-b);border-radius:10px;
  padding:10px 13px;font-family:"Montserrat", sans-serif;font-size:12px;color: var(--muted2);
  outline:none;cursor:pointer;-webkit-appearance:none;appearance:none;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='8' height='5'%3E%3Cpath d='M0 0l4 5 4-5z' fill='%23ffffff'/%3E%3C/svg%3E");
  background-repeat:no-repeat;background-position:right 10px center;padding-right:28px
}
.wap-btn{
  width:100%;background:linear-gradient(135deg,#D0D0D0,#E5E5E5);border:none;
  border-radius:12px;padding:13px;font-family:"Montserrat", sans-serif;
  font-weight:800;font-size:14px;color:var(--sdv5-bg-hero);cursor:pointer;
  transition:box-shadow .2s,transform .2s;letter-spacing:-.2px
}
.wap-btn:hover:not(:disabled){border: 1px solid var(--bb-border)!important;transform:scale(1.01)}
.wap-btn:disabled{opacity:.35;cursor:not-allowed}
.wap-btn.secondary{background:transparent;border:1px solid var(--gold-b);color:var(--gold)}
.wap-btn.secondary:hover{background:var(--gold-dim)}
.wap-gas{font-family:"Montserrat", sans-serif;font-size:10px;color:var(--muted2);margin-bottom:10px;display:flex;align-items:center;gap:4px}
.wap-gas-dot{width:6px;height:6px;border-radius:50%;background:var(--green);animation:gasPulse 2s infinite}
@keyframes gasPulse{0%,100%{opacity:.4}50%{opacity:1}}

/* QR Code Display */
.wallet-qr-wrap{
  display:flex;flex-direction:column;align-items:center;gap:12px;padding:16px 0
}
.wallet-qr-canvas{border:3px solid var(--gold-b);border-radius:12px;background:#fff;padding:8px}
.wallet-qr-addr{font-family:"Montserrat", sans-serif;font-size:11px;color:var(--muted2);text-align:center;word-break:break-all;max-width:240px;line-height:1.5}
.wallet-qr-copy{
  background:var(--gold-dim);border:1px solid var(--gold-b);border-radius:8px;
  padding:6px 16px;font-family:"Montserrat", sans-serif;font-size:12px;font-weight:700;
  color: var(--muted2);cursor:pointer;transition:all .15s
}
.wallet-qr-copy:hover{background:rgba(208,208,208,.2)}

/* TX History */
.wallet-tx-list{padding:6px 10px 20px}
.wallet-tx-row{
  display:flex;align-items:center;gap:10px;
  padding:10px 8px;border-radius:11px;cursor:pointer;
  transition:background .12s;border-bottom:1px solid rgba(208,208,208,.04)
}
.wallet-tx-row:hover{background:rgba(208,208,208,.04)}
.wtx-icon{
  width:34px;height:34px;border-radius:50%;background:var(--input);
  border:1px solid var(--gold-b);display:flex;align-items:center;justify-content:center;
  font-size:14px;flex-shrink:0
}
.wtx-icon.recv{background:rgba(255,255,255,.08);border-color:var(--bb-border)}
.wtx-icon.sent{background:rgba(255,64,64,.06);border-color:rgba(255,64,64,.18)}
.wtx-icon.swap{background:var(--gold-dim);border-color:var(--gold-b)}
.wtx-info{flex:1;min-width:0}
.wtx-type{font-size:12px;font-weight:700;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.wtx-time{font-size:10px;color:var(--muted2)}
.wtx-right{text-align:right;flex-shrink:0}
.wtx-amount{font-family:"Montserrat", sans-serif;font-size:12px;font-weight:600}
.wtx-amount.recv{color:var(--green)}
.wtx-amount.sent{color:var(--red)}
.wtx-status{font-size:10px;font-weight:700;border-radius:99px;padding:1px 6px;display:inline-block;margin-top:2px}
.wtx-status.ok{color: var(--muted2);background:rgba(255,255,255,.1);border:1px solid var(--bb-border)}
.wtx-status.pending{color: var(--muted2);background:rgba(255,255,255,.1);border:1px solid var(--bb-border)}

/* Wallet creation / import flow */
.wallet-setup-panel { padding: 20px 16px; display: flex; flex-direction: column; gap: 14px; }
.wallet-setup-title { font-size: 18px; font-weight: 800; text-align: center; margin-bottom: 4px; }
.wallet-setup-sub   { font-size: 12px; color: var(--muted2); text-align: center; line-height: 1.5; margin-bottom: 4px; }
.wallet-setup-option {
  display: flex; align-items: center; gap: 12px;
  background: var(--input); border: 1px solid var(--gold-b); border-radius: 14px;
  padding: 14px 16px; cursor: pointer; transition: all .15s;
}
.wallet-setup-option:hover   { background: var(--gold-dim); border-color: var(--gold-bb); }
.wallet-setup-option-icon    { font-size: 24px; flex-shrink: 0; }
.wallet-setup-option-info    { flex: 1; min-width: 0; }
.wallet-setup-option-title   { font-size: 13px; font-weight: 700; margin-bottom: 2px; }
.wallet-setup-option-desc    { font-size: 11px; color: var(--muted2); line-height: 1.4; }
.wallet-setup-option-arr     { font-size: 16px; color: var(--muted2); flex-shrink: 0; }

/* Mnemonic display */
.mnemonic-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:7px;margin:10px 0}
.mnemonic-word{
  background:var(--input);border:1px solid var(--gold-b);border-radius:8px;
  padding:7px 8px;text-align:center;
}
.mnemonic-idx{font-size:10px;color:var(--muted);font-family:"Montserrat", sans-serif}
.mnemonic-text{font-size:12px;font-weight:600;color: var(--muted2);font-family:"Montserrat", sans-serif}

/* Security warning */
.security-warning{
  background:rgba(255,64,64,.07);border:1px solid rgba(255,64,64,.2);
  border-radius:10px;padding:10px 13px;font-size:11px;color:var(--red);
  line-height:1.5;display:flex;align-items:flex-start;gap:8px
}
.security-warning-icon{font-size:16px;flex-shrink:0;margin-top:1px}

/* Loading state */
.wallet-loading{
  display:flex;flex-direction:column;align-items:center;justify-content:center;
  gap:12px;padding:40px 20px;color:var(--muted2)
}
.wallet-loading-spinner{
  width:32px;height:32px;border:3px solid rgba(208,208,208,.15);
  border-top-color:var(--gold);border-radius:50%;animation:spin .7s linear infinite
}
.wallet-empty{padding:32px 20px;text-align:center;color:var(--muted);font-size:13px;line-height:1.6}

/* Connected wallet indicator */
.wallet-connected-badge{
  display:inline-flex;align-items:center;gap:4px;
  font-size:9px;font-weight:700;padding:2px 7px;border-radius:99px;
  background:rgba(255,255,255,.09);border:1px solid var(--bb-border);color:var(--green)
}
.wallet-connected-dot{width:5px;height:5px;border-radius:50%;background:var(--green);animation:gasPulse 2s infinite}

/* Import / create modals */
.wsetup-step{padding:16px}
.wsetup-back{
  background:transparent;border:none;color:var(--muted2);cursor:pointer;
  font-size:20px;padding:0 4px;margin-bottom:10px;display:flex;align-items:center;gap:6px;
  font-family:"Montserrat", sans-serif;font-size:12px;font-weight:700;transition:color .15s
}
.wsetup-back:hover{color:var(--gold)}

/* Export Private Key screen — reuses wc-import-btn / wc-import-warning /
   wc-privkey-wrap / wc-privkey-eye / wc-privkey-paste / wc-import-caption.
   Only the PIN "field" needs a small helper since it's a clickable div
   standing in for an <input> (opens the PIN modal instead of typing). */
.pk-pin-field{display:flex;align-items:center;gap:8px;cursor:pointer;transition:border-color 150ms ease,background 150ms ease}
.pk-pin-field:hover{border-color:rgba(var(--accent-sky-rgb),.35)}
.pk-pin-field.entered{border-color:rgba(76,175,80,.35);background:rgba(76,175,80,.06)}

/* ── Export Private Key: header now reuses .wpin-back-btn / .wpin-topbar
       and .wsp-logo-ring from the PIN panel, so no page-specific rules
       are needed here anymore. ── */

/* ── Verify card ── */
.pk-verify-card{
  border:1px solid var(--gold-b);border-radius:16px;padding:18px 16px;
  background:rgba(var(--accent-sky-rgb),.03);margin-top:18px;margin-bottom:0;
  transition:opacity 200ms ease
}
.pk-verify-header{
  display:flex;align-items:center;justify-content:center;gap:7px;
  color:var(--text-sky);font-size:12px;font-weight:800;letter-spacing:.06em;
  text-transform:uppercase;margin-bottom:6px
}
.pk-verify-subtitle{font-size:12px;color:var(--muted2);text-align:center;margin-bottom:14px}

/* ── Puzzle photo + piece/slot ── */
.pk-captcha-puzzle{
  position:relative;height:170px;border-radius:12px;overflow:hidden;margin-bottom:16px;
  background-image:linear-gradient(rgba(var(--accent-sky-rgb),.82),rgba(var(--accent-sky-rgb),.82)),url('../illustrations/pk-captcha-bg.jpg');
  background-blend-mode:color,normal;background-size:cover;background-position:center;
  box-shadow:inset 0 0 0 1px rgba(var(--accent-sky-rgb),.15)
}
.pk-captcha-puzzle::before{
  content:'';position:absolute;inset:0;background:rgba(0,0,0,.22);pointer-events:none
}
.pk-captcha-slot-canvas{position:absolute;top:0;left:0;pointer-events:none}
.pk-captcha-piece-canvas{
  position:absolute;top:0;left:0;cursor:grab;touch-action:none
}

/* ── Export Private Key: locked-state UI is fully automated now (the
       captcha success handler goes straight to the reveal flow), so the
       button, PIN row, divider and caption are kept in the DOM only for
       the JS to reference — they should never actually be shown. ── */
#pk-reveal-btn,
#pk-pin-wrap-holder,
#pk-locked-divider,
#pk-locked-caption {
  display: none !important;
}

/* Security section (Biometric Sign-in / Set PIN) was removed along
   with those features — no DOM elements use these classes anymore. */

/* ── Slider ── */
.pk-captcha-slider{
  position:relative;height:48px;border-radius:24px;overflow:hidden;
  background:#000000;border:1px solid var(--gold-b);user-select:none
}
body.theme-light .pk-captcha-slider,
html[data-theme="light"] .pk-captcha-slider {
  background:#FFFFFF;
}
.pk-captcha-slider-fill{position:absolute;top:0;left:0;bottom:0;width:0;background:rgba(var(--accent-sky-rgb),.18)}
.pk-captcha-slider-track-label{
  position:absolute;inset:0;display:flex;align-items:center;justify-content:center;
  font-size:12.5px;color:var(--text-dim-tier);pointer-events:none;letter-spacing:.02em;
  transition:opacity .15s ease
}
.pk-captcha-handle{
  position:absolute;top:3px;left:3px;width:42px;height:42px;border-radius:50%;
  background:var(--text-sky);color: var(--text-on-accent);display:flex;align-items:center;justify-content:center;
  cursor:grab;box-shadow:0 2px 10px rgba(var(--accent-sky-rgb),.4);touch-action:none;transition:left .18s ease,background .15s ease
}
.pk-captcha-handle.dragging{cursor:grabbing;transition:none}
.pk-captcha-slider.verified{border-color:rgba(76,175,80,.4)}
.pk-captcha-slider.verified .pk-captcha-handle{background:var(--green);color:#fff}
.pk-captcha-slider.shake{animation:pk-captcha-shake .35s ease}
@keyframes pk-captcha-shake{
  0%,100%{transform:translateX(0)}
  20%{transform:translateX(-6px)}
  40%{transform:translateX(5px)}
  60%{transform:translateX(-4px)}
  80%{transform:translateX(3px)}
}

/* ── Post-slide verification readout (shows a % while we gate the PIN
       screen for a moment after the puzzle is solved) ── */
.pk-captcha-progress{
  display:flex;flex-direction:column;align-items:center;gap:10px;padding:6px 0 2px
}
.pk-captcha-progress-label{
  font-size:12.5px;color:var(--muted2);letter-spacing:.02em
}
.pk-captcha-progress-bar{
  width:100%;height:6px;border-radius:3px;overflow:hidden;background:rgba(var(--accent-sky-rgb),.12)
}
.pk-captcha-progress-fill{
  height:100%;width:0;background:var(--text-sky);border-radius:3px;transition:width .1s linear
}
.pk-captcha-progress-pct{
  font-size:20px;font-weight:800;color:var(--text-sky);letter-spacing:.02em;font-variant-numeric:tabular-nums
}

/* ── Locked-section divider (dashed line + lock icon) ── */
.pk-locked-divider{display:flex;align-items:center;gap:10px;margin:18px 0}
.pk-locked-divider-line{flex:1;height:1px;border-top:1px dashed var(--gold-b)}
.pk-locked-divider-icon{
  width:26px;height:26px;border-radius:50%;flex-shrink:0;
  border:1px solid var(--gold-b);color:var(--muted2);
  display:flex;align-items:center;justify-content:center
}

/* Phantom / Tonkeeper connect buttons */
.ext-wallet-btn{
  display:flex;align-items:center;gap:12px;
  background:var(--input);border:1px solid var(--gold-b);border-radius:12px;
  padding:12px 14px;cursor:pointer;transition:all .15s;width:100%;margin-bottom:8px
}
.ext-wallet-btn:hover{background:var(--gold-dim);border-color:var(--gold-bb)}
.ext-wallet-btn-logo{width:32px;height:32px;border-radius:8px;object-fit:cover;flex-shrink:0;font-size:20px;display:flex;align-items:center;justify-content:center}
.ext-wallet-btn-info{flex:1;text-align:left}
.ext-wallet-btn-name{font-size:13px;font-weight:700}
.ext-wallet-btn-desc{font-size:10px;color:var(--muted2)}
.ext-wallet-btn-status{font-size:10px;font-weight:700;padding:2px 7px;border-radius:99px;flex-shrink:0}
.ext-wallet-btn-status.detected{color:var(--green);background:rgba(255,255,255,.1);border:1px solid var(--bb-border)}
.ext-wallet-btn-status.install{color:var(--muted2);background:var(--input);border:1px solid var(--gold-b)}

/* Solana purple accent */
.sol-accent{color:var(--chain-solana)}
/* TON blue */
.ton-accent{color:var(--chain-ton)}

/* ═══════════ PIN PANEL TOPBAR ═══════════════ */
.wpin-topbar {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  padding: 10px 12px 4px;
  flex-shrink: 0;
  background: none !important;
}
.wpin-back-btn {
  width: 34px; height: 34px;
  border-radius: 50%;
  background: #131412;
  border: none;
  color: var(--text-white-a85);
  cursor: pointer;
  display: flex; align-items: center; justify-content: center;
  flex-shrink: 0;
  transition: background 150ms, color 150ms;
}
.wpin-back-btn:hover { background: #222222; color: var(--gold); }
.wpin-back-btn svg { width: 18px; height: 18px; }

body:not(.sidebar-is-collapsed) ._wpin_boxes {
  gap: 10px;
}
body:not(.sidebar-is-collapsed) ._wpin_box {
  width: 12px;
  height: 12px;
  min-width: 12px;
}
/* [migrated to overlay.css] */


/* Extra bottom padding so phone keyboard never covers buttons */
#wpin-panel-body {
  padding-bottom: max(env(keyboard-inset-height, 0px) + 24px, 120px) !important;
  scroll-padding-bottom: 24px;
}
/* [migrated to overlay.css] */

/* [migrated to overlay.css] */

/* [migrated to overlay.css] */

/* [migrated to overlay.css] */


body.theme-light .wpin-back-btn,
html[data-theme="light"] .wpin-back-btn {
  background: #FFFFFF;
  border: none;
  color: var(--sdv5-accent);
}
body.theme-light .wpin-back-btn:hover,
html[data-theme="light"] .wpin-back-btn:hover {
  background: #FFFFFF;
  color: var(--sdv5-bg-hero);
}

/* ── Wallet popup (Bybit redesign) ── */
/* [migrated to overlay.css] */

/* [migrated to overlay.css] */


body.theme-light .wallet-mode-menu {
  background: #ffffff !important;
  border-color: var(--bb-border) !important;
}

body.theme-light .wallet-address-text { color: var(--text-normal-tier) !important; }
body.theme-light .wt-name { color: var(--text-normal-tier) !important; 
}

/* ============================================================
   WALLET DASHBOARD — COMPLETE
   Every line related to the wallet dashboard functionality
   Extracted from claude-style.css
   ============================================================ */

/* ═══════════════════════════════════════════════════════════════════════
   WALLET DASHBOARD — Claude-style visual restyle
   Covers: panel shell, hero card, action bar, assets card,
           security card + rows, activity link.
   Full dark + light mode. Loads last — wins by being last-defined.
   ═══════════════════════════════════════════════════════════════════════ */

/* ── Panel shell ─────────────────────────────────────────────────────── */
/* [panel CSS migrated to overlay.css] */


/* [panel CSS migrated to overlay.css] */

/* [migrated to overlay.css] */


/* ── sdv5-wallet scroll container ────────────────────────────────────── */
.sdv5-wallet {
  font-family: var(--ff-base) !important;
}

/* ── Hero card ───────────────────────────────────────────────────────── */
.sdv5-wallet .sdv5-w-unified-hero {
  background: #131412 !important;
  border: 1px solid var(--bb-border) !important;
  border-radius: 14px !important;
  border: 1px solid var(--bb-border)!important;
  margin-bottom: 8px !important;
}

/* ── Action bar (DEPOSIT / SEND / SWAP) ──────────────────────────────── */
.hex-actions {
  background: rgba(255,255,255,0.025) !important;
  border: 1px solid var(--bb-border) !important;
  border-radius: var(--radius-xl) !important;
  border: 1px solid var(--bb-border)!important;
  backdrop-filter: blur(16px) !important;
  -webkit-backdrop-filter: blur(16px) !important;
  margin-bottom: 12px !important;
  overflow: hidden !important;
}

/* ── Action card buttons — use header panel gradient instead of sky-blue ── */
#wallet-actions-card .cta-single-button {
  background: linear-gradient(145deg, #343434, #262626) !important;
  border: 1px solid var(--bb-border) !important;
}
#wallet-actions-card .cta-single-button:hover {
  background: linear-gradient(145deg, #3a3a3a, #2c2c2c) !important;
}
#wallet-actions-card .cta-button-text {
  letter-spacing: 0.10em !important;
  font-weight: 600 !important;
}
body.theme-light #wallet-actions-card .cta-single-button,
html[data-theme="light"] #wallet-actions-card .cta-single-button {
  background: #FFFFFF !important;
  border: 1px solid var(--bb-border) !important;
}
body.theme-light #wallet-actions-card .cta-single-button:hover,
html[data-theme="light"] #wallet-actions-card .cta-single-button:hover {
  background: #FFFFFF !important;
}
body.theme-light #wallet-actions-card .cta-button-text,
html[data-theme="light"] #wallet-actions-card .cta-button-text {
  color: var(--sdv5-accent) !important;
}

/* Shrink Deposit/Send/Swap labels when the sidebar is expanded — the
   narrower content area would otherwise clip the uppercase labels. */
body.sidebar-is-expanded #wallet-actions-card .cta-button-text {
  font-size: 10.5px !important;
  letter-spacing: 0.03em !important;
}

/* ── Action card — plain background, no frame/panel chrome ────────────── */
#wallet-actions-card.rz-frame {
  background: none !important;
  border: none !important;
  padding: 0 !important;
  box-shadow: none !important;
}
#wallet-actions-card .rz-cta-panel {
  background: none !important;
  border: none !important;
  padding: 0 !important;
  box-shadow: none !important;
}

/* ── (wa-divider removed — the Assets card now sits flush against the
   section below it with no separator line) ── */

/* ── Action tiles — MEXC-style: circular dark icon badge + label below,
   3 columns, wraps to as many rows as needed ── */
#wallet-actions-card .wa-action-tiles {
  display: grid !important;
  grid-template-columns: repeat(3, 1fr) !important;
  gap: 16px 6px !important;
  padding: 4px 2px 2px !important;
}
#wallet-actions-card .wa-action-tile {
  display: flex !important;
  flex-direction: column !important;
  align-items: center !important;
  justify-content: flex-start !important;
  gap: 7px !important;
  background: none !important;
  border: none !important;
  padding: 0 !important;
  cursor: pointer !important;
  font-family: inherit !important;
}
#wallet-actions-card .wa-action-tile-icon {
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  width: 58px !important;
  height: 58px !important;
  border-radius: 50% !important;
  background: rgba(255,255,255,0.055) !important;
  color: var(--text-white-a90) !important;
  transition: background 150ms ease, transform 100ms ease !important;
}
#wallet-actions-card .wa-action-tile:hover .wa-action-tile-icon {
  background: rgba(var(--accent-sky-rgb),0.14) !important;
  color: var(--text-sky) !important;
}
#wallet-actions-card .wa-action-tile:active .wa-action-tile-icon {
  transform: scale(0.94) !important;
}
#wallet-actions-card .wa-action-tile-icon svg {
  width: 28px !important;
  height: 28px !important;
  stroke: currentColor !important;
}
#wallet-actions-card .wa-action-tile-label {
  font-size: 12.5px !important;
  font-weight: 600 !important;
  color: var(--text-white-a70, var(--text-white-a90)) !important;
  text-align: center !important;
  line-height: 1.25 !important;
  max-width: 98px !important;
}

/* Light theme */
body.theme-light #wallet-actions-card .wa-action-tile-icon,
html[data-theme="light"] #wallet-actions-card .wa-action-tile-icon {
  background: rgba(0,0,0,0.045) !important;
  color: var(--text-black-a80, #222) !important;
}
body.theme-light #wallet-actions-card .wa-action-tile:hover .wa-action-tile-icon,
html[data-theme="light"] #wallet-actions-card .wa-action-tile:hover .wa-action-tile-icon {
  background: rgba(var(--accent-sky-rgb),0.18) !important;
  color: #b8860b !important;
}
body.theme-light #wallet-actions-card .wa-action-tile-label,
html[data-theme="light"] #wallet-actions-card .wa-action-tile-label {
  color: var(--text-black-a80, #222) !important;
}

/* ── Token logos — rounded square instead of circle ───────────────────── */
#wallet-assets-card .sdv5-w-asset-row .asset .logo,
#wallet-assets-card .sdv5-w-asset-row .asset .logo img {
  border-radius: 10px !important;
}
#wallet-assets-card .sdv5-w-asset-row .asset .logo {
  background: #000000 !important;
  border: 1px solid var(--bb-border)!important;
}
body.theme-light #wallet-assets-card .sdv5-w-asset-row .asset .logo,
html[data-theme="light"] #wallet-assets-card .sdv5-w-asset-row .asset .logo {
  background: #ffffff !important;
  border: 1px solid var(--bb-border)!important;
}

.hex-actions::before {
  background: linear-gradient(90deg,
    transparent 0%,
    rgba(255,255,255,0.08) 35%,
    rgba(255,255,255,0.12) 50%,
    rgba(255,255,255,0.08) 65%,
    transparent 100%
  ) !important;
}

.hex-btn + .hex-btn {
  border-left: 1px solid var(--bb-border) !important;
}

.hex-btn-inner {
  padding: 16px 10px !important;
  transition: background var(--duration-fast) var(--ease-out), box-shadow var(--duration-fast) var(--ease-out) !important;
}

.hex-btn:hover .hex-btn-inner {
  background: rgba(255,255,255,0.04) !important;
  border: 1px solid var(--bb-border)!important;
}

.hex-btn:active .hex-btn-inner {
  background: rgba(255,255,255,0.07) !important;
  border: 1px solid var(--bb-border)!important;
}

.hex-label {
  font-family: var(--ff-base) !important;
  font-size: var(--fs-xs) !important;
  font-weight: var(--fw-semibold) !important;
  letter-spacing: 0.10em !important;
  color: var(--muted2) !important;
}

/* ── Assets card ─────────────────────────────────────────────────────── */
.sdv5-w-assets {
  background: rgba(255,255,255,0.025) !important;
  border: 1px solid var(--bb-border) !important;
  border-radius: var(--radius-xl) !important;
  border: 1px solid var(--bb-border)!important;
  backdrop-filter: blur(16px) !important;
  -webkit-backdrop-filter: blur(16px) !important;
  margin-bottom: 12px !important;
  overflow: hidden !important;
}

.sdv5-w-assets-head {
  padding: 14px 18px 12px !important;
  border-bottom: 1px solid var(--bb-border) !important;
  background: rgba(255,255,255,0.018) !important;
}

.sdv5-w-assets-icon {
  width: 30px; height: 30px;
  border-radius: 8px !important;
  background: rgba(99,102,241,0.18) !important;
  border: 1px solid rgba(99,102,241,0.30) !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  color: var(--accent-indigo-soft) !important;
  flex-shrink: 0;
}

.sdv5-w-assets-head .ttl {
  font-family: var(--ff-base) !important;
  font-size: var(--fs-sm) !important;
  font-weight: var(--fw-semibold) !important;
  letter-spacing: 0.06em !important;
  text-transform: uppercase !important;
  color: var(--text-normal-tier) !important;
}

.sdv5-w-asset-table {
  padding: 0 10px 6px !important;
  grid-template-columns: 1.8fr 1fr 1fr !important;
}

.sdv5-w-asset-table .h {
  font-family: var(--ff-base) !important;
  font-size: 10px !important;
  font-weight: var(--fw-semibold) !important;
  color: var(--muted2) !important;
}
.sdv5-w-asset-table .h:nth-child(2) {
  text-align: center !important;
}
.sdv5-w-asset-table .h.change,
.sdv5-w-asset-row .change {
  display: none !important;
}

.sdv5-w-asset-row > div {
  font-family: var(--ff-base) !important;
  font-size: var(--fs-sm) !important;
  border-bottom: 1px solid var(--bb-border) !important;
  padding: 7px 0 !important;
}
.sdv5-w-asset-row > div.right:nth-child(2) {
  justify-content: center !important;
}
.sdv5-w-asset-row > div.right:nth-child(3) {
  justify-content: flex-end !important;
}

/* ── Assets card — plain background, no frame/panel chrome ────────────── */
#wallet-assets-card.rz-frame {
  background: none !important;
  border: none !important;
  padding: 0 !important;
  box-shadow: none !important;
}
#wallet-assets-card .rz-cta-panel {
  background: none !important;
  border: none !important;
  padding: 0 !important;
  box-shadow: none !important;
}

/* ── Assets card header — flat, no fill, gold-bottom border, matching
   the Timer/Snapshot card header on the Airdrop page ── */
#wallet-assets-card .rz-cta-header {
  background: none !important;
  border: none !important;
  border-bottom: 2px solid var(--bb-border) !important;
  border-radius: 0 !important;
  margin: 0 0 8px 0 !important;
  padding: 0 0 8px 0 !important;
}
body.theme-light #wallet-assets-card .rz-cta-header {
  background: none !important;
}
#wallet-assets-card .rz-cta-header .rz-section-label {
  font-size: 15px !important;
}
#wallet-assets-card .rz-cta-body {
  padding: 0 !important;
}

/* ── Wallet Security card — plain background + flat border-bottom header,
   matching the Assets / Timer / Snapshot card treatment ── */
#wallet-security-card.rz-frame {
  background: none !important;
  border: none !important;
  padding: 0 !important;
  box-shadow: none !important;
}
#wallet-security-card .rz-cta-panel {
  background: none !important;
  border: none !important;
  padding: 0 !important;
  box-shadow: none !important;
}
#wallet-security-card .rz-cta-header {
  background: none !important;
  border: none !important;
  border-bottom: 2px solid var(--bb-border) !important;
  border-radius: 0 !important;
  margin: 0 0 8px 0 !important;
  padding: 0 0 8px 0 !important;
}
body.theme-light #wallet-security-card .rz-cta-header {
  background: none !important;
}
#wallet-security-card .rz-cta-header .rz-section-label {
  font-size: 15px !important;
}
#wallet-security-card .rz-cta-body {
  padding: 0 !important;
}

.sdv5-w-asset-row .asset .name {
  font-family: var(--ff-base) !important;
  font-size: var(--fs-sm) !important;
  font-weight: var(--fw-semibold) !important;
  color: var(--text-normal-tier) !important;
}

.sdv5-w-asset-row .asset .sub {
  display: none !important;
}

/* ── Bottom grid + Security card ─────────────────────────────────────── */
.sdv5-w-bottom-grid {
  grid-template-columns: 1fr !important;
  gap: 12px !important;
  margin-bottom: 12px !important;
}

.sdv5-w-bottom-card {
  background: rgba(255,255,255,0.025) !important;
  border: 1px solid var(--bb-border) !important;
  border-radius: var(--radius-xl) !important;
  padding: 18px 18px 12px !important;
  border: 1px solid var(--bb-border)!important;
  backdrop-filter: blur(16px) !important;
  -webkit-backdrop-filter: blur(16px) !important;
}

.sdv5-w-bottom-head {
  font-family: var(--ff-base) !important;
  font-size: var(--fs-xs) !important;
  font-weight: var(--fw-bold) !important;
  letter-spacing: 0.10em !important;
  text-transform: uppercase !important;
  color: var(--muted2) !important;
  margin-bottom: 14px !important;
}

/* Security rows */
.sdv5-w-sec-row {
  display: flex !important;
  align-items: center !important;
  gap: 12px !important;
  padding: 10px 14px !important;
  margin-bottom: 8px !important;
  background: #131412 !important;
  border: 1px solid var(--bb-border) !important;
  border-radius: var(--radius-lg) !important;
  transition: background var(--duration-fast) var(--ease-out),
              border-color var(--duration-fast) var(--ease-out) !important;
}

.sdv5-w-sec-row:hover {
  background: rgba(255,255,255,0.055) !important;
  border-color: var(--bb-border) !important;
}

.sdv5-w-sec-row:last-of-type {
  margin-bottom: 4px !important;
}

.sdv5-w-sec-row .ico {
  width: 30px; height: 30px;
  border-radius: var(--radius-md) !important;
  background: rgba(255,255,255,0.06) !important;
  border: 1px solid var(--bb-border) !important;
  display: inline-flex; align-items: center; justify-content: center;
  color: var(--muted2) !important;
  flex-shrink: 0;
}

.sdv5-w-sec-row .body .t1 {
  font-family: var(--ff-base) !important;
  font-size: var(--fs-sm) !important;
  font-weight: var(--fw-semibold) !important;
  color: var(--muted2) !important;
}

.sdv5-w-sec-row .body .t2 {
  font-family: var(--ff-base) !important;
  font-size: var(--fs-xs) !important;
  font-weight: var(--fw-normal) !important;
  color: var(--muted2) !important;
}

.sdv5-w-sec-row .check {
  width: 22px; height: 22px;
  border-radius: 50% !important;
  display: inline-flex; align-items: center; justify-content: center;
  color: var(--accent-sky-a80) !important;
  flex-shrink: 0;
}

.sdv5-w-activity-link {
  font-family: var(--ff-base) !important;
  font-size: var(--fs-xs) !important;
  font-weight: var(--fw-semibold) !important;
  color: var(--accent-sky-a70) !important;
  letter-spacing: 0.01em !important;
  padding: 10px 0 4px !important;
  transition: color var(--duration-fast) !important;
}

.sdv5-w-activity-link:hover {
  color: var(--accent-sky-a100) !important;
}

/* ── Light mode overrides ─────────────────────────────────────────────── */
/* [panel CSS migrated to overlay.css] */


body.theme-light .sdv5-wallet,
html[data-theme="light"] .sdv5-wallet {
  background: #FFFFFF !important;
}

body.theme-light .hex-actions,
html[data-theme="light"] .hex-actions {
  background: #ffffff !important;
  border-color: var(--bb-border) !important;
  border: 1px solid var(--bb-border)!important;
}

body.theme-light .hex-actions::before,
html[data-theme="light"] .hex-actions::before {
  background: linear-gradient(90deg,
    transparent, rgba(0,0,0,0.05) 50%, transparent
  ) !important;
}

body.theme-light .hex-btn + .hex-btn,
html[data-theme="light"] .hex-btn + .hex-btn {
  border-left-color: var(--bb-border) !important;
}

body.theme-light .hex-label,
html[data-theme="light"] .hex-label {
  color: var(--muted2) !important;
}

body.theme-light .hex-btn:hover .hex-label,
html[data-theme="light"] .hex-btn:hover .hex-label {
  color: var(--text-black-a85) !important;
}

body.theme-light .hex-btn:hover .hex-btn-inner,
html[data-theme="light"] .hex-btn:hover .hex-btn-inner {
  background: #FFFFFF !important;
  border: 1px solid var(--bb-border)!important;
}

body.theme-light .sdv5-w-assets,
html[data-theme="light"] .sdv5-w-assets {
  background: #ffffff !important;
  border-color: var(--bb-border) !important;
  border: 1px solid var(--bb-border)!important;
}

body.theme-light .sdv5-w-assets-head,
html[data-theme="light"] .sdv5-w-assets-head {
  background: rgba(0,0,0,0.02) !important;
  border-bottom-color: var(--bb-border) !important;
}

body.theme-light .sdv5-w-assets-head .ttl,
html[data-theme="light"] .sdv5-w-assets-head .ttl {
  color: var(--text-normal-tier) !important;
}

body.theme-light .sdv5-w-asset-table .h,
html[data-theme="light"] .sdv5-w-asset-table .h {
  color: var(--muted2) !important;
  border-bottom-color: var(--bb-border) !important;
}

body.theme-light .sdv5-w-asset-row > div,
html[data-theme="light"] .sdv5-w-asset-row > div {
  border-bottom-color: var(--bb-border) !important;
}

body.theme-light .sdv5-w-asset-row .asset .name,
html[data-theme="light"] .sdv5-w-asset-row .asset .name {
  color: var(--text-normal-tier) !important;
}

body.theme-light .sdv5-w-asset-row .asset .sub,
html[data-theme="light"] .sdv5-w-asset-row .asset .sub {
  color: var(--muted2) !important;
}

body.theme-light .sdv5-w-asset-row > div.right,
html[data-theme="light"] .sdv5-w-asset-row > div.right {
  color: var(--muted2) !important;
}

body.theme-light .sdv5-w-bottom-card,
html[data-theme="light"] .sdv5-w-bottom-card {
  background: #ffffff !important;
  border-color: var(--bb-border) !important;
  border: 1px solid var(--bb-border)!important;
}

body.theme-light .sdv5-w-bottom-head,
html[data-theme="light"] .sdv5-w-bottom-head {
  color: var(--muted2) !important;
}

body.theme-light .sdv5-w-sec-row,
html[data-theme="light"] .sdv5-w-sec-row {
  background: rgba(0,0,0,0.025) !important;
  border-color: var(--bb-border) !important;
}

body.theme-light .sdv5-w-sec-row:hover,
html[data-theme="light"] .sdv5-w-sec-row:hover {
  background: rgba(0,0,0,0.05) !important;
  border-color: var(--bb-border) !important;
}

body.theme-light .sdv5-w-sec-row .ico,
html[data-theme="light"] .sdv5-w-sec-row .ico {
  background: rgba(0,0,0,0.05) !important;
  border-color: var(--bb-border) !important;
  color: var(--muted2) !important;
}

body.theme-light .sdv5-w-sec-row .body .t1,
html[data-theme="light"] .sdv5-w-sec-row .body .t1 {
  color: var(--muted2) !important;
}

body.theme-light .sdv5-w-sec-row .body .t2,
html[data-theme="light"] .sdv5-w-sec-row .body .t2 {
  color: var(--muted2) !important;
}

body.theme-light .sdv5-w-sec-row .check,
html[data-theme="light"] .sdv5-w-sec-row .check {
  color: var(--accent-sky-light-a85) !important;
}

body.theme-light .sdv5-w-activity-link,
html[data-theme="light"] .sdv5-w-activity-link {
  color: var(--accent-sky-light-a80) !important;
}

/* ── Light mode: Assets + Security card section label ────────────────── */
body.theme-light #wallet-assets-card .rz-section-label,
html[data-theme="light"] #wallet-assets-card .rz-section-label,
body.theme-light #wallet-security-card .rz-section-label,
html[data-theme="light"] #wallet-security-card .rz-section-label {
  color: var(--muted2) !important;
}

body.theme-light .sdv5-w-activity-link:hover,
html[data-theme="light"] .sdv5-w-activity-link:hover {
  color: var(--accent-sky-light-a100) !important;
}

/* ═══════════════════════════════════════════════════════════════════════
   WALLET HERO — sky-blue background + sidebar-style toggle pill
   ═══════════════════════════════════════════════════════════════════════ */

/* Hero card: card-gray in dark, light-card-gray in light mode */
.sdv5-wallet .sdv5-w-unified-hero {
  background: none !important;
  border: 0px solid var(--bb-border) !important;
  padding: 0px !important;
}
body.theme-light .sdv5-wallet .sdv5-w-unified-hero,
html[data-theme="light"] .sdv5-wallet .sdv5-w-unified-hero {
  background: none !important;
  border: 0px solid var(--bb-border) !important;
  padding: 0px !important;
}

/* Text elements forced bright for readability on the dark artwork, in both themes */
.sdv5-wallet .sdv5-w-unified-hero .sdv5-w-uh-value-head .lbl {
  color: var(--text-white-a85) !important;
  font-size: 9px !important;
  letter-spacing: 0.14em !important;
}

.sdv5-wallet .sdv5-w-unified-hero .sdv5-w-hero-addr {
  color: var(--text-white-a85) !important;
}

.sdv5-wallet .sdv5-w-unified-hero .sdv5-w-hero-addr .copy {
  color: var(--text-white-a85) !important;
}

.sdv5-wallet .sdv5-w-unified-hero .sdv5-w-uh-amount {
  color: var(--text-white-a90) !important;
}

.sdv5-wallet .sdv5-w-unified-hero .sdv5-w-change {
  background: rgba(255,255,255,0.12) !important;
  border-color: var(--bb-border) !important;
  color: var(--text-white-a85) !important;
}

.sdv5-wallet .sdv5-w-unified-hero .sdv5-w-base-line {
  color: var(--text-white-a85) !important;
}

.sdv5-wallet .sdv5-w-unified-hero .sdv5-w-base-line .dot {
  background: rgba(255,255,255,0.75) !important;
  border-color: var(--bb-border) !important;
}

.sdv5-wallet .sdv5-w-unified-hero .sdv5-w-uh-value-head .range {
  background: rgba(255,255,255,0.10) !important;
  border-color: var(--bb-border) !important;
  color: var(--text-white-a90) !important;
}

.sdv5-wallet .sdv5-w-unified-hero .sdv5-w-uh-value-head .range:hover {
  background: rgba(255,255,255,0.18) !important;
  border-color: var(--bb-border) !important;
  color: var(--text-normal-tier) !important;
}

/* Orb gem plate — white card on blue */
.sdv5-wallet .sdv5-w-uh-orb-gem {
  background: transparent !important;
  border-color: transparent !important;
  border: 0px solid var(--bb-border)!important;
}

/* ── Toggle pill: match sidebar style exactly ── */
.sdv5-wallet .sdv5-w-unified-hero .wh-wmode-pill {
  background: rgba(255,255,255,0.12) !important;
  border: 0px solid var(--bb-border) !important;
  border-radius: 8px !important;
  padding: 3px !important;
  gap: 2px !important;
}

.sdv5-wallet .sdv5-w-unified-hero .wh-wmode-pill .wmode-seg {
  border-radius: 6px !important;
  font-family: var(--ff-base) !important;
  font-size: 11px !important;
  font-weight: 600 !important;
  letter-spacing: 0.01em !important;
  color: var(--text-white-a85) !important;
  background: transparent !important;
  padding: 4px 8px !important;
  transition: background 150ms ease, color 150ms ease, box-shadow 150ms ease !important;
}

.sdv5-wallet .sdv5-w-unified-hero .wh-wmode-pill .wmode-seg:hover {
  color: var(--text-white-a90) !important;
  background: rgba(255,255,255,0.10) !important;
}

.sdv5-wallet .sdv5-w-unified-hero .wh-wmode-pill .wmode-seg.sb-wmode-opt--active {
  background: rgba(255,255,255,0.22) !important;
  color: var(--gold) !important;
  border: 0px solid var(--bb-border)!important;
}

/* ── Hero email display + pill positioning ── */
.wh-email-display {
  font-family: var(--ff-base) !important;
  font-size: 13px !important;
  font-weight: 500 !important;
  color: var(--muted2) !important;
  letter-spacing: 0.01em !important;
}

.sdv5-wallet .sdv5-w-uh-title {
  padding-right: 150px !important;
}

.sdv5-wallet .sdv5-w-unified-hero .wh-wmode-pill {
  top: 14px !important;
  right: 14px !important;
}

/* ── Hero card: tighter padding ── */
.sdv5-wallet .sdv5-w-unified-hero,
body.theme-light .sdv5-wallet .sdv5-w-unified-hero,
html[data-theme="light"] .sdv5-wallet .sdv5-w-unified-hero {
  padding-left: 2px !important;
  padding-right: 2px !important;
  min-height: unset !important;
}

/* ── Bottom row: change badge + base-line on SAME ROW via grid ── */
.sdv5-w-bottom-row {
  display: grid !important;
  grid-template-columns: auto 1fr !important;
  align-items: center !important;
  gap: 10px !important;
  margin-top: 0 !important;
  width: 100% !important;
}

.sdv5-w-bottom-row .sdv5-w-change {
  display: inline-flex !important;
  margin-bottom: 0 !important;
  flex-shrink: 0 !important;
  white-space: nowrap !important;
}

.sdv5-w-bottom-row .sdv5-w-base-line {
  display: flex !important;
  align-items: center !important;
  gap: 6px !important;
  font-size: 11px !important;
  word-break: normal !important;
  overflow-wrap: normal !important;
  white-space: nowrap !important;
  min-width: 0 !important;
}

.sdv5-w-bottom-row .sdv5-w-base-line span {
  overflow: hidden !important;
  text-overflow: ellipsis !important;
  white-space: nowrap !important;
  min-width: 0 !important;
}

/* Refresh button — Claude-style icon button */
.sdv5-w-base-line .refresh {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  width: 22px !important;
  height: 22px !important;
  border-radius: 6px !important;
  background: rgba(255,255,255,0.10) !important;
  border: 1px solid var(--bb-border) !important;
  color: var(--muted2) !important;
  padding: 0 !important;
  cursor: pointer !important;
  flex-shrink: 0 !important;
  transition: background 150ms ease, color 150ms ease !important;
}

.sdv5-w-base-line .refresh:hover {
  background: rgba(255,255,255,0.18) !important;
  color: var(--muted2) !important;
}

.sdv5-w-base-line .refresh svg {
  display: block !important;
  transition: transform 300ms ease !important;
}

.sdv5-w-base-line .refresh:active svg {
  transform: rotate(180deg) !important;
}

/* ═══════════════════════════════════════════════════════════════════════
   HERO CARD — full restructure: clean grid layout, all themes
   ═══════════════════════════════════════════════════════════════════════ */

/* ── Hero shell: flat flex column, no overflow issues ── */
.sdv5-wallet .sdv5-w-unified-hero {
  display: flex !important;
  flex-direction: column !important;
  gap: 6px !important;
  padding-left: 2px !important;
  padding-right: 2px !important;
  min-height: unset !important;
  position: relative !important;
  overflow: hidden !important;
}

/* ── Row 1: avatar + name/mode (left) + manage-security icon (right) ── */
.wh-top-row {
  display: grid !important;
  grid-template-columns: 1fr auto !important;
  align-items: center !important;
  gap: 4px !important;
  width: 100% !important;
}

.wh-top-left {
  display: flex !important;
  align-items: center !important;
  gap: 4px !important;
  min-width: 0 !important;
}

.wh-avatar {
  display: none !important;
}

.wh-avatar img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;
  display: block !important;
}

.wh-top-name-wrap {
  display: flex !important;
  align-items: center !important;
  gap: 4px !important;
  min-width: 0 !important;
}

.wh-top-name {
  font-family: var(--ff-base) !important;
  font-size: 14.5px !important;
  font-weight: 700 !important;
  color: var(--text-white-a90) !important;
  letter-spacing: -0.01em !important;
  line-height: 1.2 !important;
  white-space: nowrap !important;
  overflow: hidden !important;
  text-overflow: ellipsis !important;
  min-width: 0 !important;
}

.wh-top-name span,
.wh-top-name .wh-email-display {
  font-family: var(--ff-base) !important;
  font-size: 14.5px !important;
  font-weight: 700 !important;
  color: var(--text-white-a90) !important;
  letter-spacing: -0.01em !important;
}

/* Toggle pill — small, sits right beside the name */
.wh-top-row .wh-wmode-pill {
  position: static !important;
  top: unset !important;
  right: unset !important;
  width: auto !important;
  flex-shrink: 0 !important;
  margin: 0 !important;
}

/* ── Right-side group: mode toggle + manage-security icon, close together ── */
.wh-top-right {
  display: flex !important;
  align-items: center !important;
  gap: 8px !important;
  flex-shrink: 0 !important;
}

/* ── Manage Security icon button — sits beside the mode toggle ── */
.wh-manage-security-icon-btn {
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  width: 30px !important;
  height: 30px !important;
  min-width: 30px !important;
  border-radius: 50% !important;
  background: rgba(255, 255, 255, 0.06) !important;
  border: 1px solid var(--bb-border) !important;
  color: var(--gold) !important;
  cursor: pointer !important;
  padding: 0 !important;
  flex-shrink: 0 !important;
  transition: opacity 150ms ease, transform 100ms ease, background 150ms ease !important;
}

.wh-manage-security-icon-btn:hover {
  background: rgba(var(--accent-sky-rgb), 0.12) !important;
  opacity: 0.95 !important;
}

.wh-manage-security-icon-btn:active {
  transform: translateY(1px) scale(0.96) !important;
}

.wh-manage-security-icon-btn svg {
  display: block !important;
}

body.theme-light .wh-manage-security-icon-btn,
html[data-theme="light"] .wh-manage-security-icon-btn {
  background: rgba(0, 0, 0, 0.05) !important;
  color: var(--text-sky) !important;
  border-color: rgba(0,0,0,0.12) !important;
}

/* ═══════════════════════════════════════════════════════════════════
   CONNECTED-WALLET HEADER — sits above the hero card. Connected
   wallet app name on the left, address + connected wallet's own logo
   together in one pill on the right (populated from AppKit once the
   session is known).
   ═══════════════════════════════════════════════════════════════════ */
.wh-connected-header {
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  gap: 8px !important;
  padding: 2px 2px 22px !important;
  border-bottom: 1px solid var(--bb-border) !important;
}

.wh-connected-name {
  font-family: var(--ff-base) !important;
  font-size: 12.5px !important;
  font-weight: 700 !important;
  color: var(--text-white-a60) !important;
  letter-spacing: -0.01em !important;
  white-space: nowrap !important;
  overflow: hidden !important;
  text-overflow: ellipsis !important;
  min-width: 0 !important;
}

.wh-connected-right {
  display: flex !important;
  align-items: center !important;
  gap: 6px !important;
  flex-shrink: 0 !important;
}

/* ── Single pill holding both the address and the connected wallet's
     own logo together ── */
.wh-connected-addr-pill {
  display: flex !important;
  align-items: center !important;
  gap: 8px !important;
  background: rgba(255, 255, 255, 0.06) !important;
  border: 1px solid var(--bb-border) !important;
  border-radius: 10px !important;
  padding: 8px 14px !important;
}

.wh-connected-right .sdv5-mono {
  font-size: 11.5px !important;
  color: var(--text-white-a60) !important;
  letter-spacing: -0.01em !important;
  line-height: 1 !important;
}

.wh-connected-wallet-logo {
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  width: 22px !important;
  height: 22px !important;
  border-radius: 0 !important;
  overflow: hidden !important;
  color: var(--text-white-a60) !important;
  flex-shrink: 0 !important;
}

.wh-connected-wallet-logo img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;
  display: block !important;
}

body.theme-light .wh-connected-name,
html[data-theme="light"] .wh-connected-name {
  color: var(--text-black-a60) !important;
}

body.theme-light .wh-connected-addr-pill,
html[data-theme="light"] .wh-connected-addr-pill {
  background: rgba(0, 0, 0, 0.05) !important;
  border-color: rgba(0,0,0,0.12) !important;
}

body.theme-light .wh-connected-right .sdv5-mono,
html[data-theme="light"] .wh-connected-right .sdv5-mono {
  color: var(--text-black-a60) !important;
}

body.theme-light .wh-connected-wallet-logo,
html[data-theme="light"] .wh-connected-wallet-logo {
  color: var(--text-black-a60) !important;
}

/* ═══════════════════════════════════════════════════════════════════
   PROMO AD AUTO-SCROLLER
   ═══════════════════════════════════════════════════════════════════ */
.wa-market-widget {
  margin-bottom: 8px;
}

/* ── Promo ad auto-scroller ── */
.wa-mkt-ad {
  position: relative;
  border-radius: 14px;
  overflow: hidden;
  border: 1px solid var(--bb-border);
  background: rgba(var(--accent-sky-rgb),0.10);
}

.wa-mkt-ad-track {
  display: flex;
  width: 100%;
  transition: transform 420ms cubic-bezier(.4,0,.2,1);
}

.wa-mkt-ad-slide {
  flex: 0 0 100%;
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 13px 44px 13px 14px;
  cursor: pointer;
  user-select: none;
}

.wa-mkt-ad-icon {
  font-size: 22px;
  line-height: 1;
  flex-shrink: 0;
  width: 36px;
  height: 36px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  background: rgba(var(--accent-sky-rgb),0.14);
}

.wa-mkt-ad-copy {
  flex: 1;
  min-width: 0;
}

.wa-mkt-ad-title {
  font-size: 12.5px;
  font-weight: 700;
  color: var(--text-white-a90);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.wa-mkt-ad-sub {
  font-size: 10.8px;
  color: var(--text-white-a38);
  margin-top: 2px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.wa-mkt-ad-count {
  position: absolute;
  top: 9px;
  right: 11px;
  z-index: 2;
  font-size: 10px;
  font-weight: 700;
  font-variant-numeric: tabular-nums;
  color: var(--text-white-a70, var(--text-white-a90));
  background: rgba(0,0,0,0.35);
  border: 1px solid var(--bb-border);
  border-radius: 999px;
  padding: 2px 8px;
  pointer-events: none;
}

body.theme-light .wa-mkt-ad {
  border-color: rgba(0,0,0,0.10);
  background: rgba(var(--accent-sky-rgb),0.14);
}
body.theme-light .wa-mkt-ad-title {
  color: var(--text-black-a80, #222);
}
body.theme-light .wa-mkt-ad-sub {
  color: var(--text-gray-60, #6b6b7d);
}

/* Card is narrower when the sidebar is expanded — tighten spacing and
   scale text/icon down so the title doesn't run into the counter pill. */
body.sidebar-is-expanded .wa-mkt-ad-slide {
  padding: 11px 46px 11px 12px;
  gap: 9px;
}
body.sidebar-is-expanded .wa-mkt-ad-icon {
  width: 30px;
  height: 30px;
  font-size: 18px;
}
body.sidebar-is-expanded .wa-mkt-ad-title {
  font-size: 11.5px;
}
body.sidebar-is-expanded .wa-mkt-ad-sub {
  font-size: 10px;
}
body.sidebar-is-expanded .wa-mkt-ad-count {
  font-size: 9px;
  padding: 2px 6px;
  right: 8px;
}
body.theme-light .wa-mkt-ad-count {
  background: rgba(255,255,255,0.55);
  color: var(--text-black-a80, #222);
}

/* ══════════════════════════════════════════════════════════════════
   PROMO GRID — auto-sliding image card (left) + synced detail card
   ══════════════════════════════════════════════════════════════════ */
.wh-promo-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 8px;
  margin-bottom: 8px;
}

.wh-promo-img-card {
  position: relative;
  height: 132px;
  border-radius: 14px;
  overflow: hidden;
  border: 1px solid var(--bb-border);
}

.wh-promo-img-count {
  position: absolute;
  top: 9px;
  right: 9px;
  z-index: 2;
  font-size: 10px;
  font-weight: 700;
  font-variant-numeric: tabular-nums;
  color: var(--text-white-a70, var(--text-white-a90));
  background: rgba(0,0,0,0.35);
  border: 1px solid var(--bb-border);
  border-radius: 999px;
  padding: 2px 8px;
  pointer-events: none;
}
body.theme-light .wh-promo-img-count {
  background: rgba(255,255,255,0.55);
  color: var(--text-black-a80, #222);
}

.wh-promo-img-track {
  display: flex;
  width: 100%;
  height: 100%;
  transition: transform 420ms cubic-bezier(.4,0,.2,1);
}

.wh-promo-img-slide {
  flex: 0 0 100%;
  height: 100%;
  background-size: cover;
  background-position: center;
  display: flex;
  align-items: center;
  justify-content: center;
}

.wh-promo-img-icon {
  font-size: 34px;
  line-height: 1;
  filter: drop-shadow(0 2px 6px rgba(0,0,0,0.35));
}

.wh-promo-img-dots {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 9px;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 5px;
  z-index: 2;
}

.wh-promo-img-dot {
  width: 5px;
  height: 5px;
  border-radius: 50%;
  background: rgba(255,255,255,0.4);
  cursor: pointer;
  transition: background 150ms ease, transform 150ms ease;
}

.wh-promo-img-dot.active {
  background: #fff;
  transform: scale(1.25);
}

.wh-promo-detail-card {
  height: 132px;
  border-radius: 14px;
  overflow: hidden;
  border: 1px solid var(--bb-border);
  background: rgba(var(--accent-sky-rgb),0.10);
  padding: 14px;
  display: flex;
  flex-direction: column;
  justify-content: center;
  min-width: 0;
}

.wh-promo-detail-eyebrow {
  font-size: 9.5px;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--text-sky);
  margin-bottom: 6px;
}

.wh-promo-detail-title {
  font-size: 13.5px;
  font-weight: 700;
  color: var(--text-white-a90);
  margin-bottom: 6px;
  overflow: hidden;
  text-overflow: ellipsis;
  display: -webkit-box;
  -webkit-line-clamp: 1;
  -webkit-box-orient: vertical;
}

.wh-promo-detail-desc {
  font-size: 11px;
  line-height: 1.4;
  color: var(--text-white-a38);
  overflow: hidden;
  text-overflow: ellipsis;
  display: -webkit-box;
  -webkit-line-clamp: 4;
  -webkit-box-orient: vertical;
}

body.theme-light .wh-promo-img-card,
body.theme-light .wh-promo-detail-card {
  border-color: rgba(0,0,0,0.10);
}
body.theme-light .wh-promo-detail-card {
  background: rgba(var(--accent-sky-rgb),0.14);
}
body.theme-light .wh-promo-detail-title {
  color: var(--text-black-a80, #222);
}
body.theme-light .wh-promo-detail-desc {
  color: var(--text-gray-60, #6b6b7d);
}
body.theme-light .wh-promo-img-dot {
  background: rgba(0,0,0,0.25);
}
body.theme-light .wh-promo-img-dot.active {
  background: #222;
}

/* Narrower hero column when the sidebar is expanded — stack the two
   cards instead of squeezing them side by side. */
body.sidebar-is-expanded .wh-promo-grid {
  grid-template-columns: 1fr;
}
body.sidebar-is-expanded .wh-promo-img-card,
body.sidebar-is-expanded .wh-promo-detail-card {
  height: 108px;
}

/* ── Address row ── */
.sdv5-wallet .sdv5-w-unified-hero .sdv5-w-hero-addr {
  display: flex !important;
  align-items: center !important;
  gap: 6px !important;
  font-family: var(--ff-mono) !important;
  font-size: 11.5px !important;
  color: var(--text-white-a90) !important;
  padding-bottom: 8px !important;
  margin-bottom: 4px !important;
  cursor: pointer !important;
  word-break: normal !important;
  width: fit-content !important;
}

.sdv5-wallet .sdv5-w-unified-hero .sdv5-w-hero-addr .copy {
  color: var(--text-white-a90) !important;
  background: transparent !important;
  border: none !important;
  padding: 0 !important;
  cursor: pointer !important;
  display: inline-flex !important;
  align-items: center !important;
}

/* TOTAL VALUE label + eye toggle */
.sdv5-wallet .sdv5-w-unified-hero .sdv5-w-uh-value-head {
  display: flex !important;
  align-items: center !important;
  gap: 6px !important;
  margin-bottom: 2px !important;
  margin-top: 2px !important;
}

.sdv5-wallet .sdv5-w-unified-hero .sdv5-w-uh-value-head .lbl {
  font-size: 10.5px !important;
  font-weight: 500 !important;
  letter-spacing: 0.01em !important;
  color: var(--muted2) !important;
  text-transform: none !important;
}

.wh-eye-btn {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  background: transparent !important;
  border: none !important;
  padding: 0 !important;
  cursor: pointer !important;
  color: var(--muted2) !important;
  line-height: 0 !important;
}

.wh-eye-btn .wh-eye-closed { display: none !important; }
.sdv5-w-unified-hero.wh-balances-hidden .wh-eye-btn .wh-eye-open { display: none !important; }
.sdv5-w-unified-hero.wh-balances-hidden .wh-eye-btn .wh-eye-closed { display: inline-flex !important; }

/* Real vs masked balance values — toggled by .wh-balances-hidden on the hero root */
.sdv5-w-unified-hero .wh-masked-val { display: none !important; letter-spacing: 0.12em !important; }
.sdv5-w-unified-hero.wh-balances-hidden .wh-real-val { display: none !important; }
.sdv5-w-unified-hero.wh-balances-hidden .wh-masked-val { display: inline-flex !important; align-items: center !important; }

/* Dollar amount */
.sdv5-wallet .sdv5-w-unified-hero .sdv5-w-uh-amount {
  font-family: var(--ff-base) !important;
  font-size: 30px !important;
  font-weight: 700 !important;
  letter-spacing: -0.02em !important;
  line-height: 1.15 !important;
  color: var(--text-white-a90) !important;
  margin-bottom: 0 !important;
}

.sdv5-wallet .sdv5-w-unified-hero .sdv5-w-uh-amount .ccy {
  font-size: 13px !important;
  font-weight: 500 !important;
  color: var(--muted2) !important;
  margin-left: 6px !important;
  letter-spacing: 0 !important;
}

/* Chain-native equivalent line, small + muted, sits directly under the amount */
.wh-sub-equiv {
  display: flex !important;
  align-items: center !important;
  gap: 6px !important;
  font-size: 11.5px !important;
  color: var(--muted2) !important;
  margin-top: 2px !important;
}

.wh-sub-equiv .wh-equiv-net {
  color: var(--muted2) !important;
  opacity: 0.75 !important;
}

.wh-sub-equiv .refresh {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  width: 18px !important;
  height: 18px !important;
  border-radius: 5px !important;
  background: rgba(255,255,255,0.10) !important;
  border: 1px solid var(--bb-border) !important;
  color: var(--muted2) !important;
  padding: 0 !important;
  cursor: pointer !important;
  flex-shrink: 0 !important;
  margin-left: auto !important;
  transition: background 150ms ease, color 150ms ease !important;
}

.wh-sub-equiv .refresh:hover {
  background: rgba(255,255,255,0.18) !important;
}

.wh-sub-equiv .refresh svg {
  display: block !important;
  transition: transform 300ms ease !important;
}

.wh-sub-equiv .refresh:active svg {
  transform: rotate(180deg) !important;
}

/* Today's P&L row */
.wh-pnl-row {
  display: flex !important;
  align-items: center !important;
  gap: 8px !important;
  font-size: 12px !important;
  margin-top: 10px !important;
}

.wh-pnl-label {
  color: var(--text-white-a90) !important;
  font-weight: 500 !important;
}

.wh-pnl-value {
  font-weight: 600 !important;
}

.wh-pnl-value.up { color: var(--text-sky) !important; }
.wh-pnl-value.down { color: #FF5555 !important; }

/* Divider between P&L and the balance split */
.wh-hero-divider {
  height: 1px !important;
  background: rgba(255,255,255,0.10) !important;
  margin: 12px 0 !important;
}

/* Available balance / In Vaults split — two even columns */
.wh-balance-split {
  display: grid !important;
  grid-template-columns: 1fr 1fr !important;
  gap: 8px !important;
}

.wh-balance-col {
  display: flex !important;
  flex-direction: column !important;
  gap: 4px !important;
  min-width: 0 !important;
}

.wh-balance-col--right {
  text-align: right !important;
  align-items: flex-end !important;
}

.wh-balance-label {
  font-size: 11px !important;
  color: var(--muted2) !important;
  white-space: nowrap !important;
  overflow: hidden !important;
  text-overflow: ellipsis !important;
}

.wh-balance-value {
  font-size: 14px !important;
  font-weight: 600 !important;
  color: var(--text-white-a90) !important;
  white-space: nowrap !important;
  overflow: hidden !important;
  text-overflow: ellipsis !important;
}

/* ═══════════════════════════════════════════════════════════════════════
   HERO CARD — light mode text-color overrides
   The rules above hardcode --text-white-a85/90 assuming the hero stays
   black; now that the hero card is #F0F0F0 in light mode, those need
   dark-text counterparts here (kept last so they win the cascade).
   ═══════════════════════════════════════════════════════════════════════ */
body.theme-light .wh-top-name,
body.theme-light .wh-top-name span,
body.theme-light .wh-top-name .wh-email-display {
  color: var(--text-black-a80, #222) !important;
}

body.theme-light .sdv5-wallet .sdv5-w-unified-hero .sdv5-w-hero-addr {
  color: var(--text-black-a80, #222) !important;
  border-bottom-color: rgba(0,0,0,0.14) !important;
}
body.theme-light .sdv5-wallet .sdv5-w-unified-hero .sdv5-w-hero-addr .copy {
  color: var(--text-black-a80, #222) !important;
}

body.theme-light .sdv5-wallet .sdv5-w-unified-hero .sdv5-w-uh-amount {
  color: var(--text-black-a80, #222) !important;
}

body.theme-light .wh-pnl-label {
  color: var(--text-black-a80, #222) !important;
}

body.theme-light .wh-balance-value {
  color: var(--text-black-a80, #222) !important;
}

body.theme-light .wh-hero-divider {
  background: rgba(0,0,0,0.10) !important;
}

body.theme-light .wh-sub-equiv .refresh {
  background: rgba(0,0,0,0.05) !important;
}
body.theme-light .wh-sub-equiv .refresh:hover {
  background: rgba(0,0,0,0.09) !important;
}

/* Mode toggle pill — dark translucent track/hover so it reads on the light card */
body.theme-light .sdv5-wallet .sdv5-w-unified-hero .wh-wmode-pill {
  background: rgba(0,0,0,0.06) !important;
}
body.theme-light .sdv5-wallet .sdv5-w-unified-hero .wh-wmode-pill .wmode-seg {
  color: var(--text-black-a40, #666) !important;
}
body.theme-light .sdv5-wallet .sdv5-w-unified-hero .wh-wmode-pill .wmode-seg:hover {
  color: var(--text-black-a80, #222) !important;
  background: rgba(0,0,0,0.05) !important;
}
body.theme-light .sdv5-wallet .sdv5-w-unified-hero .wh-wmode-pill .wmode-seg.sb-wmode-opt--active {
  background: rgba(0,0,0,0.08) !important;
  color: var(--text-sky) !important;
}

/* FIXED BOTTOM ACTION NAV (Reward) removed along with the Reward
   button/page — .wallet-bottom-nav / .pbn-item rules removed with it. */

/* Leave a little breathing room at the bottom of the wallet page below
   the last card (assets list / promo grid). */
.sdv5-wallet {
  padding-bottom: 24px !important;
}

/* ═══════════════════════════════════════════════════════════════════
   LIVE HERO SPARKLINE — small real-time chart inline with the
   TOTAL VALUE / big-amount row, backed by the persisted portfolio
   history ring-buffer (updates via walletUpdateChartInPlace).
   ═══════════════════════════════════════════════════════════════════ */
.wh-value-chart-row {
  display: flex !important;
  align-items: flex-end !important;
  justify-content: space-between !important;
  gap: 14px !important;
  width: 100% !important;
}
.wh-value-text-col {
  display: flex !important;
  flex-direction: column !important;
  min-width: 0 !important;
  flex: 1 1 auto !important;
}
.wh-hero-spark {
  position: relative !important;
  flex: 0 0 auto !important;
  width: 104px !important;
  height: 48px !important;
  margin-bottom: 2px !important;
  padding-right: 8px !important;
}
body.sidebar-is-expanded .wh-hero-spark {
  width: 78px !important;
  height: 38px !important;
}
.wh-hero-spark svg {
  width: 100% !important;
  height: 100% !important;
  display: block !important;
  overflow: visible !important;
}
.wh-spark-line {
}
.wh-spark-ref {
  display: none !important;
}
.wh-spark-dot {
  position: absolute !important;
  width: 6px !important;
  height: 6px !important;
  border-radius: 50% !important;
  background: var(--text-sky) !important;
  transform: translate(calc(-50% - 8px), -50%) !important;
}
.wh-spark-dot.down {
  background: #FF5555 !important;
}