/* ============================================================================
 *  Onyx Wallet — V3 Phase 7 (Consolidated fullscreen — OpenSea-inspired
 *                                  polish, Klever-wallet visual language)
 *  --------------------------------------------------------------------------
 *  Sentinel:  WALLET-V3:start phase7  …  WALLET-V3:end phase7
 *
 *  Visual language follows the v3 spec (Klever feel overrides generic
 *  OpenSea where they conflict):
 *    • Deep dark surfaces  #0a0b14 / #12131e
 *    • Purple accent       #7c3aed / #a855f7
 *    • Radial purple→transparent card gradients
 *    • Rounded-2xl (~16px), thin 1px rgba(124,58,237,0.18) borders
 *    • Tabular numbers, uppercase tracking-wide labels
 *    • Horizontal scrollable pill tabs
 *    • Primary = purple gradient, secondary = ghost with purple border
 *    • 200ms cubic-bezier easing, 0.97 press-scale
 *    • Mobile-first 380px portrait (Klever in-app webview is primary)
 *
 *  Dark is the default. Light theme via [data-onyx-theme="light"] on :root.
 *  Persisted by phase7.js in localStorage as onyx.theme = 'dark' | 'light'.
 * ========================================================================== */

/* ── Design tokens (dark default) ─────────────────────────────────────── */
:root {
  --owv3-bg-0:        #0a0b14;
  --owv3-bg-1:        #12131e;
  --owv3-bg-2:        #1a1c2b;
  --owv3-surface:     rgba(20, 22, 36, 0.92);
  --owv3-card:        rgba(28, 30, 50, 0.66);
  --owv3-card-elev:   rgba(34, 36, 60, 0.86);
  --owv3-border:      rgba(124, 58, 237, 0.18);
  --owv3-border-2:    rgba(124, 58, 237, 0.32);
  --owv3-divider:     rgba(255, 255, 255, 0.06);

  --owv3-accent:      #7c3aed;
  --owv3-accent-2:    #a855f7;
  --owv3-accent-glow: rgba(124, 58, 237, 0.42);

  --owv3-text-0:      #f1f3ff;
  --owv3-text-1:      #d6d8ee;
  --owv3-text-2:      #9aa0c5;
  --owv3-text-3:      #6e7396;

  --owv3-pos:         #22c55e;
  --owv3-neg:         #ef4444;
  --owv3-warn:        #f59e0b;

  --owv3-skel-base:   rgba(255, 255, 255, 0.05);
  --owv3-skel-shine:  rgba(255, 255, 255, 0.10);

  --owv3-radius-1:    8px;
  --owv3-radius-2:    16px;
  --owv3-radius-pill: 999px;

  --owv3-ease:        cubic-bezier(.22, 1, .36, 1);
  --owv3-dur:         200ms;

  --owv3-shadow-card: 0 1px 0 rgba(255,255,255,0.03) inset, 0 8px 24px rgba(0,0,0,0.45);
  --owv3-shadow-pop:  0 18px 48px rgba(8, 6, 22, 0.6);

  --owv3-font-num:    ui-monospace, "SF Mono", Menlo, Consolas, monospace;
  --owv3-font-ui:     "Inter", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
}

/* ── Light theme — polished, not just inverted ────────────────────────── */
:root[data-onyx-theme="light"] {
  --owv3-bg-0:        #f6f5fb;
  --owv3-bg-1:        #ffffff;
  --owv3-bg-2:        #efeaff;
  --owv3-surface:     rgba(255, 255, 255, 0.96);
  --owv3-card:        rgba(255, 255, 255, 0.92);
  --owv3-card-elev:   #ffffff;
  --owv3-border:      rgba(124, 58, 237, 0.22);
  --owv3-border-2:    rgba(124, 58, 237, 0.40);
  --owv3-divider:     rgba(20, 18, 40, 0.08);

  --owv3-accent:      #6d28d9;
  --owv3-accent-2:    #9333ea;
  --owv3-accent-glow: rgba(109, 40, 217, 0.22);

  --owv3-text-0:      #1c1438;
  --owv3-text-1:      #2d2353;
  --owv3-text-2:      #5b5582;
  --owv3-text-3:      #8c87a9;

  --owv3-skel-base:   rgba(20, 18, 40, 0.06);
  --owv3-skel-shine:  rgba(20, 18, 40, 0.10);

  --owv3-shadow-card: 0 1px 0 rgba(255,255,255,0.8) inset, 0 8px 24px rgba(40, 30, 80, 0.10);
  --owv3-shadow-pop:  0 18px 48px rgba(40, 30, 80, 0.16);
}

/* ── Root overlay ─────────────────────────────────────────────────────── */
.owv3-fs {
  position: fixed; inset: 0;
  z-index: 99000;
  display: none;
  font-family: var(--owv3-font-ui);
  color: var(--owv3-text-0);
  background: radial-gradient(120% 80% at 50% -10%, rgba(124,58,237,0.18) 0%, transparent 60%), var(--owv3-bg-0);
  -webkit-font-smoothing: antialiased;
  contain: layout style paint;
}
.owv3-fs.on { display: block; }
.owv3-fs * { box-sizing: border-box; }

.owv3-fs-panel {
  position: absolute; inset: 0;
  display: flex; flex-direction: column;
  background: linear-gradient(180deg, rgba(124,58,237,0.06) 0%, transparent 240px), var(--owv3-bg-0);
  opacity: 0;
  transform: translateY(8px);
  transition: opacity var(--owv3-dur) var(--owv3-ease), transform var(--owv3-dur) var(--owv3-ease);
}
.owv3-fs.on .owv3-fs-panel { opacity: 1; transform: translateY(0); }

/* ── Header strip ─────────────────────────────────────────────────────── */
.owv3-head {
  position: sticky; top: 0; z-index: 5;
  display: flex; align-items: center; gap: 12px;
  padding: 14px 16px 12px;
  background: var(--owv3-bg-0);
  border-bottom: 1px solid var(--owv3-divider);
  backdrop-filter: saturate(140%) blur(10px);
}
.owv3-head h2 {
  margin: 0;
  font-size: 16px;
  font-weight: 600;
  letter-spacing: 0.02em;
  color: var(--owv3-text-0);
}
.owv3-head .owv3-addr {
  font-family: var(--owv3-font-num);
  font-size: 12px;
  color: var(--owv3-text-2);
  margin-left: auto;
  padding: 6px 10px;
  border: 1px solid var(--owv3-border);
  border-radius: var(--owv3-radius-pill);
  background: var(--owv3-card);
}
.owv3-x {
  appearance: none; border: 0; background: transparent;
  color: var(--owv3-text-1);
  width: 36px; height: 36px;
  border-radius: 50%;
  font-size: 18px; line-height: 1;
  cursor: pointer;
  transition: background var(--owv3-dur) var(--owv3-ease);
}
.owv3-x:hover { background: rgba(255,255,255,0.06); }
:root[data-onyx-theme="light"] .owv3-x:hover { background: rgba(20,18,40,0.06); }

/* ── Tab pill nav (horizontal scrollable) ─────────────────────────────── */
/* v3.4 — bumped bottom padding so the active pill's drop shadow doesn't
   get clipped by overflow-x:auto + collide with the card below. */
.owv3-tabs {
  display: flex; gap: 8px;
  overflow-x: auto;
  padding: 10px 16px 20px;
  background: var(--owv3-bg-0);
  border-bottom: 1px solid var(--owv3-divider);
  scrollbar-width: none;
  -webkit-overflow-scrolling: touch;
  scroll-snap-type: x proximity;
}
.owv3-tabs::-webkit-scrollbar { display: none; }
.owv3-tabs button {
  flex: 0 0 auto;
  appearance: none; border: 0; cursor: pointer;
  padding: 9px 16px;
  border-radius: var(--owv3-radius-pill);
  font: inherit; font-size: 12.5px; font-weight: 600;
  letter-spacing: 0.04em;
  color: var(--owv3-text-2);
  background: transparent;
  border: 1px solid transparent;
  transition: all var(--owv3-dur) var(--owv3-ease);
  scroll-snap-align: start;
}
.owv3-tabs button:hover {
  color: var(--owv3-text-0);
  border-color: var(--owv3-border);
  background: var(--owv3-card);
}
.owv3-tabs button.on {
  color: #fff;
  background: linear-gradient(180deg, var(--owv3-accent-2) 0%, var(--owv3-accent) 100%);
  box-shadow: 0 4px 14px var(--owv3-accent-glow);
}
.owv3-tabs button:focus-visible {
  outline: none;
  box-shadow: 0 0 0 2px var(--owv3-accent-glow), 0 4px 14px var(--owv3-accent-glow);
}
.owv3-tabs button:active { transform: scale(0.97); }

/* ── Body / scroll container ──────────────────────────────────────────── */
/* v3.4 — slight top padding bump so the first card has visual breathing
   room from the active tab pill above it. */
.owv3-body {
  flex: 1 1 auto;
  overflow-y: auto;
  overflow-x: hidden;
  padding: 20px 16px 64px;
  -webkit-overflow-scrolling: touch;
}

/* ── Cards ────────────────────────────────────────────────────────────── */
.owv3-card {
  position: relative;
  background:
    radial-gradient(140% 100% at 0% 0%, rgba(124,58,237,0.10) 0%, transparent 55%),
    var(--owv3-card);
  border: 1px solid var(--owv3-border);
  border-radius: var(--owv3-radius-2);
  padding: 18px;
  box-shadow: var(--owv3-shadow-card);
  transition: border-color var(--owv3-dur) var(--owv3-ease),
              box-shadow var(--owv3-dur) var(--owv3-ease);
}
.owv3-card + .owv3-card { margin-top: 12px; }
.owv3-card:focus-within {
  border-color: var(--owv3-border-2);
  box-shadow: var(--owv3-shadow-card), 0 0 0 3px var(--owv3-accent-glow);
}

/* ── Labels & numerics ────────────────────────────────────────────────── */
.owv3-lbl {
  font-size: 10.5px;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--owv3-text-3);
}
.owv3-num {
  font-family: var(--owv3-font-num);
  font-feature-settings: 'tnum' 1, 'lnum' 1;
  font-variant-numeric: tabular-nums lining-nums;
  letter-spacing: -0.01em;
}
.owv3-balance-xl {
  font-size: 38px;
  font-weight: 700;
  line-height: 1.05;
  margin-top: 6px;
  color: var(--owv3-text-0);
}
.owv3-balance-md {
  font-size: 22px;
  font-weight: 700;
  line-height: 1.1;
  margin-top: 6px;
  color: var(--owv3-text-0);
}
.owv3-sub {
  font-size: 12px;
  color: var(--owv3-text-2);
  margin-top: 6px;
}

/* ── Buttons ──────────────────────────────────────────────────────────── */
.owv3-btn {
  appearance: none; border: 0; cursor: pointer;
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  min-height: 44px;
  padding: 0 18px;
  border-radius: var(--owv3-radius-1);
  font: inherit; font-size: 13.5px; font-weight: 600;
  letter-spacing: 0.02em;
  color: var(--owv3-text-0);
  background: var(--owv3-card);
  border: 1px solid var(--owv3-border);
  transition: transform var(--owv3-dur) var(--owv3-ease),
              border-color var(--owv3-dur) var(--owv3-ease),
              background var(--owv3-dur) var(--owv3-ease),
              box-shadow var(--owv3-dur) var(--owv3-ease);
}
.owv3-btn:hover { border-color: var(--owv3-border-2); }
.owv3-btn:active { transform: scale(0.97); }
.owv3-btn:focus-visible { outline: none; box-shadow: 0 0 0 3px var(--owv3-accent-glow); }
.owv3-btn[disabled] { opacity: 0.55; cursor: not-allowed; }

.owv3-btn.primary {
  color: #fff;
  background: linear-gradient(180deg, var(--owv3-accent-2) 0%, var(--owv3-accent) 100%);
  border-color: transparent;
  box-shadow: 0 4px 14px var(--owv3-accent-glow);
}
.owv3-btn.primary:hover { filter: brightness(1.06); }
.owv3-btn.ghost { background: transparent; }
.owv3-btn.danger { color: #fff; background: linear-gradient(180deg, #f87171 0%, #dc2626 100%); border-color: transparent; }
.owv3-btn.full { width: 100%; }

.owv3-row { display: flex; gap: 10px; }
.owv3-row > * { flex: 1 1 0; }

/* ── Inputs ──────────────────────────────────────────────────────────── */
.owv3-field { display: flex; flex-direction: column; gap: 6px; margin-top: 12px; }
.owv3-field > .owv3-lbl { margin-bottom: 2px; }
.owv3-input {
  appearance: none; width: 100%; min-height: 44px;
  padding: 0 14px;
  border-radius: var(--owv3-radius-1);
  font: inherit; font-size: 14px;
  color: var(--owv3-text-0);
  background: var(--owv3-bg-1);
  border: 1px solid var(--owv3-border);
  transition: border-color var(--owv3-dur) var(--owv3-ease), box-shadow var(--owv3-dur) var(--owv3-ease);
}
.owv3-input:focus { outline: none; border-color: var(--owv3-border-2); box-shadow: 0 0 0 3px var(--owv3-accent-glow); }
.owv3-input.num { font-family: var(--owv3-font-num); font-variant-numeric: tabular-nums; }

/* ── Toggle / switch ─────────────────────────────────────────────────── */
.owv3-toggle { display: flex; align-items: center; justify-content: space-between; padding: 12px 0; }
.owv3-toggle .t { font-size: 14px; color: var(--owv3-text-1); }
.owv3-switch { position: relative; width: 44px; height: 26px; flex: 0 0 44px; }
.owv3-switch input { opacity: 0; width: 0; height: 0; }
.owv3-switch .slider {
  position: absolute; inset: 0;
  background: var(--owv3-bg-2);
  border: 1px solid var(--owv3-border);
  border-radius: 999px;
  transition: background var(--owv3-dur) var(--owv3-ease), border-color var(--owv3-dur) var(--owv3-ease);
  cursor: pointer;
}
.owv3-switch .slider::before {
  content: ''; position: absolute;
  left: 3px; top: 2px;
  width: 20px; height: 20px;
  border-radius: 50%;
  background: #fff;
  box-shadow: 0 2px 6px rgba(0,0,0,0.35);
  transition: transform var(--owv3-dur) var(--owv3-ease);
}
.owv3-switch input:checked + .slider {
  background: linear-gradient(180deg, var(--owv3-accent-2) 0%, var(--owv3-accent) 100%);
  border-color: transparent;
}
.owv3-switch input:checked + .slider::before { transform: translateX(18px); }
.owv3-switch input:focus-visible + .slider { box-shadow: 0 0 0 3px var(--owv3-accent-glow); }

/* ── Slider (volume) ─────────────────────────────────────────────────── */
.owv3-range { width: 100%; -webkit-appearance: none; appearance: none; background: transparent; }
.owv3-range::-webkit-slider-runnable-track {
  height: 6px; border-radius: 999px;
  background: linear-gradient(90deg, var(--owv3-accent) var(--v, 50%), var(--owv3-bg-2) var(--v, 50%));
}
.owv3-range::-webkit-slider-thumb {
  -webkit-appearance: none; appearance: none;
  width: 18px; height: 18px; border-radius: 50%;
  background: #fff;
  border: 2px solid var(--owv3-accent);
  margin-top: -6px;
  box-shadow: 0 2px 6px rgba(0,0,0,0.35);
  cursor: pointer;
}
.owv3-range::-moz-range-track {
  height: 6px; border-radius: 999px; background: var(--owv3-bg-2);
}
.owv3-range::-moz-range-thumb {
  width: 18px; height: 18px; border-radius: 50%;
  background: #fff; border: 2px solid var(--owv3-accent); cursor: pointer;
}

/* ── Skeleton loader ─────────────────────────────────────────────────── */
.owv3-skel {
  background: linear-gradient(90deg, var(--owv3-skel-base) 0%, var(--owv3-skel-shine) 50%, var(--owv3-skel-base) 100%);
  background-size: 200% 100%;
  animation: owv3-skel-shimmer 1.4s ease-in-out infinite;
  border-radius: 8px;
}
@keyframes owv3-skel-shimmer {
  0%   { background-position: 200% 0; }
  100% { background-position: -200% 0; }
}
.owv3-skel.line { height: 14px; margin: 6px 0; }
.owv3-skel.line.lg { height: 28px; }
.owv3-skel.tile { aspect-ratio: 1 / 1; }

/* ── Empty / error states ────────────────────────────────────────────── */
.owv3-empty, .owv3-err {
  padding: 36px 18px;
  text-align: center;
  color: var(--owv3-text-2);
}
.owv3-empty .ic, .owv3-err .ic { font-size: 32px; margin-bottom: 8px; opacity: 0.7; }
.owv3-empty .t, .owv3-err .t { font-size: 15px; color: var(--owv3-text-1); font-weight: 600; margin-bottom: 4px; }
.owv3-empty .s, .owv3-err .s { font-size: 13px; color: var(--owv3-text-2); margin-bottom: 14px; }

/* ── Overview balance hero ───────────────────────────────────────────── */
.owv3-hero {
  background:
    radial-gradient(120% 90% at 80% -10%, rgba(168,85,247,0.20) 0%, transparent 55%),
    radial-gradient(140% 100% at 0% 0%, rgba(124,58,237,0.16) 0%, transparent 55%),
    var(--owv3-card-elev);
  border: 1px solid var(--owv3-border-2);
  border-radius: var(--owv3-radius-2);
  padding: 22px;
  margin-bottom: 14px;
  box-shadow: var(--owv3-shadow-card);
}
.owv3-hero .owv3-balance-xl { color: var(--owv3-text-0); }
.owv3-hero .owv3-sub-row { display: flex; gap: 18px; margin-top: 16px; flex-wrap: wrap; }
.owv3-hero .owv3-sub-row > div { min-width: 0; }
.owv3-hero .owv3-sub-row .owv3-balance-md { font-size: 18px; }

/* ── Send form / Receive QR ──────────────────────────────────────────── */
.owv3-qr-wrap {
  display: flex; flex-direction: column; align-items: center; gap: 12px;
  padding: 18px;
}
.owv3-qr {
  width: 220px; height: 220px;
  padding: 14px;
  background: #fff;
  border-radius: var(--owv3-radius-2);
  box-shadow: var(--owv3-shadow-pop);
  display: flex; align-items: center; justify-content: center;
}
.owv3-qr canvas, .owv3-qr svg, .owv3-qr img { display: block; max-width: 100%; height: auto; image-rendering: pixelated; }
.owv3-qr-addr {
  font-family: var(--owv3-font-num);
  font-size: 12.5px;
  color: var(--owv3-text-1);
  word-break: break-all;
  text-align: center;
  padding: 10px 14px;
  background: var(--owv3-card);
  border: 1px solid var(--owv3-border);
  border-radius: var(--owv3-radius-1);
  max-width: 320px;
}

/* ── Staking — unified panel ─────────────────────────────────────────── */
.owv3-stake-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 12px;
  margin-bottom: 12px;
}
@media (max-width: 480px) { .owv3-stake-grid { grid-template-columns: 1fr; } }
.owv3-stake-cell { padding: 16px; border-radius: var(--owv3-radius-2); border: 1px solid var(--owv3-border); background: var(--owv3-card); }
.owv3-stake-cell .owv3-lbl { margin-bottom: 6px; }
.owv3-divrule { height: 1px; background: var(--owv3-divider); margin: 18px 0; }
.owv3-claim-row { display: flex; gap: 10px; flex-wrap: wrap; }

/* ── NFT collections ─────────────────────────────────────────────────── */
.owv3-coll {
  border: 1px solid var(--owv3-border);
  border-radius: var(--owv3-radius-2);
  background: var(--owv3-card);
  margin-bottom: 12px;
  overflow: hidden;
  transition: border-color var(--owv3-dur) var(--owv3-ease);
}
.owv3-coll.featured { border-color: var(--owv3-border-2); }
.owv3-coll-head {
  display: flex; align-items: center; gap: 12px;
  padding: 14px;
  cursor: pointer;
  user-select: none;
  transition: background var(--owv3-dur) var(--owv3-ease);
}
.owv3-coll-head:hover { background: rgba(124,58,237,0.06); }
.owv3-coll-thumb {
  width: 48px; height: 48px; flex: 0 0 48px;
  border-radius: 12px; overflow: hidden;
  background: var(--owv3-bg-2);
  border: 1px solid var(--owv3-border);
  display: flex; align-items: center; justify-content: center;
}
.owv3-coll-thumb img { width: 100%; height: 100%; object-fit: cover; display: block; }
.owv3-coll-meta { flex: 1; min-width: 0; }
.owv3-coll-name { font-size: 14px; font-weight: 600; color: var(--owv3-text-0); margin: 0; }
.owv3-coll-sub { font-size: 12px; color: var(--owv3-text-2); margin: 2px 0 0; }
.owv3-coll-count {
  font-family: var(--owv3-font-num);
  font-size: 12px; font-weight: 700;
  padding: 4px 10px;
  border-radius: 999px;
  background: rgba(124,58,237,0.18);
  color: var(--owv3-accent-2);
}
:root[data-onyx-theme="light"] .owv3-coll-count { background: rgba(109,40,217,0.14); color: var(--owv3-accent); }
.owv3-coll-arrow { color: var(--owv3-text-2); transition: transform var(--owv3-dur) var(--owv3-ease); }
.owv3-coll.open .owv3-coll-arrow { transform: rotate(90deg); }
.owv3-coll-body {
  display: none;
  padding: 12px 14px 16px;
  border-top: 1px solid var(--owv3-divider);
}
.owv3-coll.open .owv3-coll-body { display: block; }
.owv3-coll.featured .owv3-coll-name::after {
  content: ' AEGIS';
  font-size: 9.5px;
  letter-spacing: 0.18em;
  padding: 2px 6px;
  margin-left: 8px;
  border-radius: 4px;
  background: linear-gradient(180deg, var(--owv3-warn) 0%, #b45309 100%);
  color: #fff;
  vertical-align: middle;
}
.owv3-nft-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(140px, 1fr));
  gap: 10px;
}
.owv3-nft-card {
  background: var(--owv3-bg-1);
  border: 1px solid var(--owv3-border);
  border-radius: var(--owv3-radius-2);
  overflow: hidden;
  transition: transform var(--owv3-dur) var(--owv3-ease), border-color var(--owv3-dur) var(--owv3-ease);
}
.owv3-nft-card:hover { transform: translateY(-2px); border-color: var(--owv3-border-2); }
.owv3-nft-img {
  width: 100%; aspect-ratio: 1 / 1;
  background: var(--owv3-bg-2);
  display: flex; align-items: center; justify-content: center;
  font-size: 22px; color: var(--owv3-text-3);
  overflow: hidden;
}
.owv3-nft-img img { width: 100%; height: 100%; object-fit: cover; display: block; }
.owv3-nft-info { padding: 10px 12px 12px; }
.owv3-nft-name { font-size: 12.5px; font-weight: 600; color: var(--owv3-text-0); margin: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.owv3-nft-nonce { font-family: var(--owv3-font-num); font-size: 11px; color: var(--owv3-text-2); margin-top: 2px; }
.owv3-nft-tier { font-size: 10.5px; letter-spacing: 0.1em; text-transform: uppercase; color: var(--owv3-accent-2); margin-top: 4px; font-weight: 700; }
.owv3-nft-acts { display: flex; gap: 6px; padding: 0 10px 10px; }
.owv3-nft-acts .owv3-btn { min-height: 32px; padding: 0 10px; font-size: 11.5px; flex: 1; }
.owv3-nft-link {
  display: block;
  text-align: center;
  font-size: 11px;
  color: var(--owv3-text-3);
  padding: 6px 10px 8px;
  text-decoration: none;
  transition: color var(--owv3-dur) var(--owv3-ease);
}
.owv3-nft-link:hover { color: var(--owv3-accent-2); }

/* ── History list ────────────────────────────────────────────────────── */
.owv3-tx { display: flex; align-items: center; gap: 12px; padding: 14px 0; border-bottom: 1px solid var(--owv3-divider); }
.owv3-tx:last-child { border-bottom: 0; }
.owv3-tx-ic { width: 36px; height: 36px; flex: 0 0 36px; border-radius: 50%; background: var(--owv3-bg-2); display: flex; align-items: center; justify-content: center; font-size: 16px; }
.owv3-tx-meta { flex: 1; min-width: 0; }
.owv3-tx-meta .t { font-size: 13.5px; font-weight: 600; color: var(--owv3-text-0); }
.owv3-tx-meta .s { font-size: 11.5px; color: var(--owv3-text-2); margin-top: 2px; font-family: var(--owv3-font-num); }
.owv3-tx-amt { text-align: right; }
.owv3-tx-amt .a { font-family: var(--owv3-font-num); font-variant-numeric: tabular-nums; font-weight: 700; font-size: 13.5px; }
.owv3-tx-amt .a.pos { color: var(--owv3-pos); }
.owv3-tx-amt .a.neg { color: var(--owv3-neg); }
.owv3-tx-amt .s { font-size: 11px; color: var(--owv3-text-3); margin-top: 2px; }

/* ── Connected pill (header) — connected addr + balances ─────────────── */
.ow-pill.is-connected .ow-pill-balances {
  display: inline-flex; align-items: center; gap: 8px;
  margin-left: 8px;
  padding-left: 8px;
  border-left: 1px solid var(--owv3-border);
  font-family: var(--owv3-font-num);
  font-variant-numeric: tabular-nums;
  font-size: 11px;
  color: var(--owv3-text-1);
}
.ow-pill .ow-pill-balances { display: none; }

/* ── Toast (lightweight reuse) ───────────────────────────────────────── */
.owv3-toast {
  position: fixed; left: 50%; bottom: 32px;
  transform: translateX(-50%) translateY(20px);
  background: var(--owv3-bg-1);
  border: 1px solid var(--owv3-border-2);
  color: var(--owv3-text-0);
  padding: 11px 18px;
  border-radius: var(--owv3-radius-1);
  font-size: 13px;
  z-index: 99500;
  opacity: 0;
  pointer-events: none;
  transition: all var(--owv3-dur) var(--owv3-ease);
  box-shadow: var(--owv3-shadow-pop);
}
.owv3-toast.on { opacity: 1; transform: translateX(-50%) translateY(0); }
.owv3-toast.err { border-color: var(--owv3-neg); }
.owv3-toast.ok  { border-color: var(--owv3-pos); }

/* ── Modal (for confirmations / send / tx review) ────────────────────── */
.owv3-modal-back {
  position: fixed; inset: 0;
  background: rgba(6,4,16,0.66);
  backdrop-filter: blur(4px);
  z-index: 99200;
  display: flex; align-items: flex-end; justify-content: center;
  opacity: 0; transition: opacity var(--owv3-dur) var(--owv3-ease);
}
.owv3-modal-back.on { opacity: 1; }
.owv3-modal {
  width: 100%; max-width: 480px;
  background: var(--owv3-bg-1);
  border-top: 1px solid var(--owv3-border-2);
  border-radius: var(--owv3-radius-2) var(--owv3-radius-2) 0 0;
  padding: 18px 18px 28px;
  box-shadow: var(--owv3-shadow-pop);
  transform: translateY(24px);
  transition: transform var(--owv3-dur) var(--owv3-ease);
  max-height: 86vh;
  overflow-y: auto;
}
.owv3-modal-back.on .owv3-modal { transform: translateY(0); }
.owv3-modal h3 { margin: 0 0 12px; font-size: 16px; font-weight: 600; color: var(--owv3-text-0); }
@media (min-width: 720px) {
  .owv3-modal-back { align-items: center; }
  .owv3-modal { border-radius: var(--owv3-radius-2); border: 1px solid var(--owv3-border-2); }
}

/* ── KILL-PIN v1 2026-06-07 — PIN pad styles ripped.
   Klever wallet renders its own native PIN UI; no app-level PIN exists.
   Hard hide any stray .owv3-pin-* node so a stale cached HTML can never
   render a visible PIN pad. */
.owv3-pin-row,
.owv3-pin-dot,
.owv3-pin-keys,
.owv3-pin-key { display: none !important; }

/* ── Responsive — mobile-first 380px portrait (Klever in-app webview) ── */
@media (max-width: 380px) {
  .owv3-body { padding: 14px 12px 56px; }
  .owv3-balance-xl { font-size: 32px; }
  .owv3-tabs { padding: 10px 12px 18px; }
  .owv3-head { padding: 12px 12px 10px; }
  .owv3-card { padding: 14px; }
}

/* ── Suppress phase1 launcher + old phase1 fullscreen (now superseded) ─ */
.owv2-launcher { display: none !important; }
.owv2-fs { display: none !important; }

/* ── Reduced motion ──────────────────────────────────────────────────── */
@media (prefers-reduced-motion: reduce) {
  .owv3-fs-panel, .owv3-tabs button, .owv3-btn, .owv3-coll-arrow,
  .owv3-modal, .owv3-modal-back, .owv3-nft-card { transition: none !important; }
  .owv3-skel { animation: none !important; }
}

/* ── BUCKET OPTIMIZER (v3.4 2026-06-06) ─── */
.owv3-bk-list {
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.owv3-bk-row {
  display: grid;
  grid-template-columns: 1fr auto;
  grid-template-rows: auto auto;
  gap: 8px 12px;
  padding: 12px 14px;
  background: rgba(18,19,30,0.45);
  border: 1px solid rgba(124,58,237,0.18);
  border-radius: 14px;
}
.owv3-bk-left { display: flex; flex-direction: column; gap: 4px; min-width: 0; }
.owv3-bk-amt {
  font-size: 16px;
  font-weight: 700;
  font-variant-numeric: tabular-nums;
}
.owv3-bk-amt .owv3-sub { font-size: 11px; font-weight: 500; }
.owv3-bk-val {
  font-size: 13px;
  font-weight: 600;
  color: rgba(243,241,255,0.85);
  display: flex; align-items: center; gap: 8px;
  flex-wrap: wrap;
}
.owv3-bk-act {
  align-self: center;
  font-size: 12.5px !important;
  padding: 8px 16px !important;
  white-space: nowrap;
}
.owv3-bk-msg {
  grid-column: 1 / -1;
  margin-top: 2px;
  word-break: break-word;
}
.owv3-bk-badge {
  display: inline-block;
  font-size: 10.5px;
  font-weight: 700;
  letter-spacing: 0.04em;
  padding: 2px 8px;
  border-radius: 999px;
  text-transform: uppercase;
}
.owv3-bk-badge.bad   { background: rgba(220,80,90,0.18); color: #ff8a92; }
.owv3-bk-badge.warn  { background: rgba(245,158,11,0.18); color: #fbbf24; }
.owv3-bk-badge.ok    { background: rgba(34,197,94,0.18);  color: #4ade80; }
.owv3-bk-fee {
  display: inline-block;
  font-size: 11.5px;
  font-weight: 600;
  color: rgba(243,241,255,0.78);
  background: rgba(124,58,237,0.12);
  padding: 1px 7px;
  border-radius: 999px;
  margin-left: 2px;
  font-variant-numeric: tabular-nums;
}
.owv3-bk-rec {
  margin-top: 6px;
  display: flex; align-items: center; gap: 6px;
  flex-wrap: wrap;
  font-size: 12px;
  color: rgba(243,241,255,0.78);
}
.owv3-bk-rec-arrow { color: #c4b5fd; font-weight: 700; }
.owv3-bk-rec-name { font-weight: 600; color: rgba(243,241,255,0.92); }
.owv3-bk-rec-fee {
  background: rgba(34,197,94,0.12);
  color: #6ee7b7;
  padding: 1px 7px;
  border-radius: 999px;
  font-weight: 600;
  font-variant-numeric: tabular-nums;
}
.owv3-bk-rec-gain {
  background: linear-gradient(135deg, rgba(124,58,237,0.32), rgba(34,197,94,0.22));
  color: #e9e5ff;
  padding: 1px 8px;
  border-radius: 999px;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.02em;
  font-variant-numeric: tabular-nums;
}
@media (max-width: 480px) {
  .owv3-bk-row { grid-template-columns: 1fr; }
  .owv3-bk-act { width: 100%; }
}

/* ── WELCOME HERO (disconnected Overview state) — v3.1 2026-06-06 ─── */
.owv3-welcome {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  padding: 32px 24px 28px;
  gap: 14px;
  background:
    radial-gradient(120% 80% at 50% 0%, rgba(124,58,237,0.18) 0%, rgba(124,58,237,0) 60%),
    rgba(18, 19, 30, 0.55);
  border: 1px solid rgba(124,58,237,0.22);
  border-radius: 18px;
}
.owv3-welcome-glyph {
  font-size: 44px;
  line-height: 1;
  color: #c4b5fd;
  text-shadow: 0 0 24px rgba(124,58,237,0.55);
  margin-bottom: 2px;
}
.owv3-welcome-title {
  font-size: 22px;
  font-weight: 700;
  letter-spacing: 0.2px;
  color: #f3f1ff;
}
.owv3-welcome-sub {
  font-size: 13.5px;
  line-height: 1.55;
  color: rgba(243, 241, 255, 0.72);
  max-width: 360px;
}
.owv3-welcome-cta {
  margin-top: 10px;
  min-width: 220px;
  font-size: 15px;
  padding: 12px 22px;
  letter-spacing: 0.3px;
}
.owv3-welcome-foot {
  font-size: 12px;
  color: rgba(243, 241, 255, 0.55);
  margin-top: 4px;
}
.owv3-welcome-foot a {
  color: #c4b5fd;
  text-decoration: none;
  border-bottom: 1px dotted rgba(196,181,253,0.55);
}
.owv3-welcome-foot a:hover { color: #e9e5ff; }
@media (max-width: 480px) {
  .owv3-welcome { padding: 26px 18px 22px; gap: 12px; }
  .owv3-welcome-title { font-size: 19px; }
  .owv3-welcome-sub { font-size: 13px; }
  .owv3-welcome-cta { min-width: 100%; }
}

/* ── ONYX tab — Earnings Ledger headline stat grid (v1.7.1 2026-06-07) ──
   4-up at desktop, 2×2 at <480px (Klever in-app webview portrait). Tabular
   numerals already inherited via .owv3-num. Visual language: Klever purple
   gradient on the tappable Claimable cell. */
.owv3-onyx-stat-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 10px;
}
@media (max-width: 480px) {
  .owv3-onyx-stat-grid { grid-template-columns: 1fr 1fr; }
}
.owv3-onyx-stat {
  padding: 14px;
  border-radius: var(--owv3-radius-2);
  border: 1px solid var(--owv3-border);
  background: var(--owv3-card);
  min-width: 0;
}
.owv3-onyx-stat .owv3-lbl { margin-bottom: 4px; }
.owv3-onyx-stat .owv3-balance-md {
  /* Headline numbers in this grid are denser than the global .owv3-balance-md
     so 8-decimal ONYX values still fit at 380px portrait without wrapping. */
  font-size: 18px;
  line-height: 1.15;
  word-break: break-word;
}
.owv3-onyx-stat .owv3-sub { margin-top: 4px; }
/* Claimable cell — tappable when the .on modifier is applied at runtime */
.owv3-onyx-stat.tap {
  cursor: default;
  transition: transform var(--owv3-dur) var(--owv3-ease),
              border-color var(--owv3-dur) var(--owv3-ease),
              box-shadow var(--owv3-dur) var(--owv3-ease),
              background var(--owv3-dur) var(--owv3-ease);
}
.owv3-onyx-stat.tap.on {
  cursor: pointer;
  border-color: transparent;
  background: linear-gradient(180deg, rgba(124, 58, 237, 0.22) 0%, rgba(124, 58, 237, 0.10) 100%);
  box-shadow: 0 4px 14px var(--owv3-accent-glow);
}
.owv3-onyx-stat.tap.on:hover { filter: brightness(1.06); }
.owv3-onyx-stat.tap.on:active { transform: scale(0.98); }
.owv3-onyx-stat.tap.on:focus-visible { outline: none; box-shadow: 0 0 0 3px var(--owv3-accent-glow); }

/* ──────────────────────────────────────────────────────────────────────────
   SR-HEADER-PILL-MODE-SPLIT:start v1 2026-06-07 — Game Wallet overlay
   Stripped-down in-game economy view (assets/wallet-v2/game-wallet.js).
   Reuses the owv3 design tokens so it reads as the same wallet family.
   Mobile-first sheet (Klever mobile target); centers on wider screens.
   ────────────────────────────────────────────────────────────────────────── */
.owgw-fs {
  position: fixed; inset: 0; z-index: 10000;
  display: flex; align-items: flex-end; justify-content: center;
  padding: 0;
  background: rgba(6, 5, 14, 0.66);
  backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px);
  opacity: 0; visibility: hidden; pointer-events: none;
  transition: opacity var(--owv3-dur) var(--owv3-ease), visibility var(--owv3-dur);
  font-family: var(--owv3-font-ui);
}
.owgw-fs.on { opacity: 1; visibility: visible; pointer-events: auto; }
.owgw-panel {
  width: 100%; max-width: 460px;
  max-height: 92vh; overflow-y: auto;
  background: linear-gradient(180deg, var(--owv3-bg-1) 0%, var(--owv3-bg-0) 100%);
  border: 1px solid var(--owv3-border-2);
  border-bottom: none;
  border-radius: var(--owv3-radius-2) var(--owv3-radius-2) 0 0;
  box-shadow: var(--owv3-shadow-pop);
  padding: 16px 16px 22px;
  transform: translateY(16px);
  transition: transform var(--owv3-dur) var(--owv3-ease);
  -webkit-overflow-scrolling: touch;
}
.owgw-fs.on .owgw-panel { transform: translateY(0); }
@media (min-width: 560px) {
  .owgw-fs { align-items: center; padding: 24px; }
  .owgw-panel { border-bottom: 1px solid var(--owv3-border-2); border-radius: var(--owv3-radius-2); }
}
.owgw-head {
  display: flex; align-items: center; gap: 10px;
  margin-bottom: 14px;
}
.owgw-title {
  font-family: "Cinzel", var(--owv3-font-ui);
  font-size: 15px; font-weight: 600; letter-spacing: 2px; text-transform: uppercase;
  color: var(--owv3-text-0);
}
.owgw-addr {
  font: 500 11px/1 var(--owv3-font-num);
  color: var(--owv3-text-2); margin-left: auto;
  white-space: nowrap;
}
.owgw-x {
  width: 30px; height: 30px; flex: 0 0 auto;
  display: inline-flex; align-items: center; justify-content: center;
  border-radius: 999px; border: 1px solid var(--owv3-border);
  background: rgba(255,255,255,0.04); color: var(--owv3-text-1);
  font-size: 14px; line-height: 1; cursor: pointer;
  transition: border-color var(--owv3-dur), color var(--owv3-dur);
}
.owgw-x:hover { border-color: var(--owv3-accent-2); color: var(--owv3-accent-2); }
.owgw-num { font-family: var(--owv3-font-num); font-variant-numeric: tabular-nums; }
.owgw-lbl {
  font-size: 9px; font-weight: 600; letter-spacing: 1.6px; text-transform: uppercase;
  color: var(--owv3-text-3);
}
.owgw-hero {
  text-align: center;
  padding: 18px 14px 16px;
  border-radius: var(--owv3-radius-2);
  background: radial-gradient(120% 100% at 50% 0%, rgba(124,58,237,0.18) 0%, var(--owv3-card) 70%);
  border: 1px solid var(--owv3-border-2);
  box-shadow: var(--owv3-shadow-card);
  margin-bottom: 12px;
}
.owgw-amt {
  font-size: 30px; font-weight: 700; line-height: 1.1;
  color: var(--owv3-text-0);
  margin: 8px 0 14px;
  text-shadow: 0 0 18px var(--owv3-accent-glow);
}
.owgw-status {
  display: none; margin-top: 10px;
  font-size: 12px; line-height: 1.4; color: var(--owv3-text-2);
  word-break: break-word;
}
.owgw-card {
  border-radius: var(--owv3-radius-2);
  background: var(--owv3-card);
  border: 1px solid var(--owv3-border);
  box-shadow: var(--owv3-shadow-card);
  padding: 14px;
  margin-bottom: 12px;
}
.owgw-card.sm { padding: 12px; margin-bottom: 0; }
.owgw-grid {
  display: grid; grid-template-columns: 1fr 1fr; gap: 12px;
  margin-bottom: 14px;
}
.owgw-stake-row {
  display: grid; grid-template-columns: 1fr 1fr; gap: 12px; margin-top: 10px;
}
.owgw-mini-lbl {
  font-size: 9px; font-weight: 600; letter-spacing: 1.4px; text-transform: uppercase;
  color: var(--owv3-text-3); margin-bottom: 3px;
}
.owgw-mini {
  font-size: 16px; font-weight: 700; color: var(--owv3-text-1);
}
.owgw-empty {
  margin-top: 10px; font-size: 12px; line-height: 1.45; color: var(--owv3-text-3);
}
.owgw-btn {
  display: inline-flex; align-items: center; justify-content: center;
  height: 44px; padding: 0 18px;
  border-radius: var(--owv3-radius-1);
  border: 1px solid var(--owv3-border-2);
  background: rgba(255,255,255,0.03); color: var(--owv3-text-0);
  font-family: var(--owv3-font-ui); font-size: 13px; font-weight: 600; letter-spacing: 0.3px;
  cursor: pointer; transition: filter var(--owv3-dur), border-color var(--owv3-dur), opacity var(--owv3-dur);
}
.owgw-btn.full { width: 100%; }
.owgw-btn.primary {
  border: none;
  background: linear-gradient(180deg, var(--owv3-accent-2) 0%, var(--owv3-accent) 100%);
  color: #fff; box-shadow: 0 6px 18px var(--owv3-accent-glow);
}
.owgw-btn.primary:hover { filter: brightness(1.08); }
.owgw-btn.ghost { background: transparent; color: var(--owv3-text-1); }
.owgw-btn.ghost:hover { border-color: var(--owv3-accent-2); color: var(--owv3-accent-2); }
.owgw-btn:active { transform: scale(0.985); }
.owgw-btn:disabled { opacity: 0.45; cursor: not-allowed; filter: none; transform: none; }
/* SR-HEADER-PILL-MODE-SPLIT:end v1 */

/* ════════════════════════════════════════════════════════════════════════
 * ONYX-WALLET-SPLIT v1 2026-06-17 — in-game ONYX-only mode + earning card.
 * Game pages open the wallet locked to the ONYX tab; the tab nav is hidden
 * so it reads as a focused earning/claim view. The earning card surfaces
 * rate/sec, Core boost %, and offline accrual.
 * ════════════════════════════════════════════════════════════════════════ */
.owv3-fs.owv3-onyx-only .owv3-tabs { display: none; }
.owv3-fs.owv3-onyx-only .owv3-head h2::after { content: " · Earning"; color: var(--owv3-text-2); font-weight: 400; }
.owv3-earn-card { border: 1px solid var(--owv3-border-2); }
.owv3-earn-card [data-owv3-earn-rate],
.owv3-earn-card [data-owv3-earn-boost] { color: var(--owv3-warn); }
.owv3-earn-card [data-owv3-earn-offrate],
.owv3-earn-card [data-owv3-earn-offearned] { color: var(--owv3-accent-2); }