/* ═══════════════════════════════════════════════════════════════════
   OBSIDEUM — core.css
   Complete design system. All variables. All shared components.
   UNCHAINED9. Built by Waeven Xrysmond.
═══════════════════════════════════════════════════════════════════ */

@import url('https://fonts.googleapis.com/css2?family=Cinzel:wght@400&family=Electrolize&display=swap');

/* ════════════════════════════════════════════════════════
   RESET
════════════════════════════════════════════════════════ */
*,*::before,*::after {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
  -webkit-tap-highlight-color: transparent;
}
button,[role="button"] { touch-action: manipulation; }
input,button,select,textarea { font-family: inherit; }
a { text-decoration: none; color: inherit; }
img,svg { display: block; }
[hidden] { display: none !important; } /* prevent author display rules overriding hidden attribute */

/* ════════════════════════════════════════════════════════
   VARIABLES
════════════════════════════════════════════════════════ */
:root {
  /* Foundation */
  --void:      #070709;
  --br:        #DEE4F4;
  --bd:        #909AAE;
  --dim:       #6B7090;
  --trace:     rgba(222,228,244,.055);
  --hi:        rgba(222,228,244,.09);

  /* Accent — violet primary */
  --em:        #9C3DBB;
  --em-lo:     rgba(156,61,187,.32);
  --em-tr:     rgba(156,61,187,.08);
  --em-glow:   rgba(156,61,187,.14);
  --em-dim:    rgba(156,61,187,.07);

  /* Accent — violet secondary */
  --em-2:      #BE80DC;

  /* Semantic */
  --up:        rgba(80,200,140,.88);
  --dn:        rgba(220,80,80,.82);
  --warn:      rgba(220,180,40,.82);

  /* Easing — never write ease / ease-in-out / linear in transitions */
  --ease-out:  cubic-bezier(0.0,0.0,0.2,1);
  --ease-in:   cubic-bezier(0.4,0.0,1,1);
  --ease-std:  cubic-bezier(0.4,0.0,0.2,1);
  --ease-spr:  cubic-bezier(0.16,1,0.3,1);

  /* Typography */
  --fd: 'Cinzel', serif;
  --fb: 'Electrolize', monospace;
  --fm: 'Electrolize', monospace;

  /* Spacing — 8px grid */
  --sp-1:  4px;
  --sp-2:  8px;
  --sp-3:  16px;
  --sp-4:  24px;
  --sp-5:  32px;
  --sp-6:  48px;
}

/* ════════════════════════════════════════════════════════
   BASE
════════════════════════════════════════════════════════ */
html, body {
  width: 100%;
  height: 100%;
  background: var(--void);
  background-image:
    radial-gradient(ellipse 75% 55% at 18% 85%, rgba(156,61,187,.18) 0%, transparent 58%),
    radial-gradient(ellipse 65% 48% at 82% 14%, rgba(100,30,140,.14) 0%, transparent 52%),
    radial-gradient(ellipse 90% 35% at 50% 50%, rgba(60,10,80,.10)   0%, transparent 62%);
  color: var(--bd);
  font-family: var(--fb);
  overflow: hidden;
  cursor: none;
}

/* ════════════════════════════════════════════════════════
   CANVAS LAYERS

   position: fixed — covers the full viewport in app.html.
   index.html overrides to position: absolute to confine the
   crystal within .landing-hero (canvas scrolls away with the
   hero section; scroll sections glass over the body gradient).

   NO will-change here. FX.js draws via clearRect/path/drawImage —
   it never animates the CSS transform property of the canvas element.
   will-change: transform was promoting each canvas to an isolated GPU
   compositor layer, which prevented backdrop-filter on glass panels
   from sampling the live crystal. The 2D canvas context is already
   GPU-accelerated for paint ops; the hint was both wrong and harmful.
════════════════════════════════════════════════════════ */
#crystal-canvas {
  position: fixed;
  inset: 0;
  width: 100%;
  height: 100%;
  z-index: 1;
  pointer-events: none;
}
#particle-canvas {
  position: fixed;
  inset: 0;
  width: 100%;
  height: 100%;
  z-index: 2;
  pointer-events: none;
}

/* ════════════════════════════════════════════════════════
   CURSOR — desktop only, hidden on mobile
════════════════════════════════════════════════════════ */
#cur {
  position: fixed;
  width: 24px;
  height: 24px;
  z-index: 999;
  pointer-events: none;
  transform: translate(-50%,-50%);
}
#cur::before,
#cur::after {
  content: '';
  position: absolute;
  top: 50%;
  left: 50%;
  background: var(--em);
  transition:
    width    100ms var(--ease-spr),
    height   100ms var(--ease-spr),
    background 150ms var(--ease-std);
}
#cur::before { width: 14px; height: 1px;  transform: translate(-50%,-50%); }
#cur::after  { width: 1px;  height: 14px; transform: translate(-50%,-50%); }
#cur.hl::before { width: 22px; background: var(--br); }
#cur.hl::after  { height: 22px; background: var(--br); }

/* ════════════════════════════════════════════════════════
   PAGE PHASES
   .ph  — fixed, centered (landing panels)
   .sph — fixed, scrollable (app views)
════════════════════════════════════════════════════════ */
.ph {
  position: fixed;
  top: 0; left: 0;
  width: 100%; height: 100%;
  z-index: 10;
  display: flex;
  align-items: center;
  justify-content: center;
  opacity: 0;
  pointer-events: none;
  transition: opacity 320ms var(--ease-in);
  will-change: opacity;
}
.ph.on {
  opacity: 1;
  pointer-events: all;
  transition: opacity 420ms var(--ease-out);
}

.sph {
  position: fixed;
  top: 0; left: 0;
  width: 100%; height: 100%;
  overflow-y: auto;
  overflow-x: hidden;
  z-index: 10;
  opacity: 0;
  pointer-events: none;
  transition: opacity 320ms var(--ease-in);
  -webkit-overflow-scrolling: touch;
  will-change: opacity;
}
.sph.on {
  opacity: 1;
  pointer-events: all;
  transition: opacity 420ms var(--ease-out);
}

/* ════════════════════════════════════════════════════════
   GLASSMORPHISM — three tiers, used correctly

   The crystal shader generates animated geometric shards with
   glowing violet edges. When a frosted glass panel sits in front
   of this moving light source, the violet glow bleeds through
   the blur. The panel is alive because what is behind it is alive.

   Opacity and blur are calibrated together:
   — Low enough opacity so the live crystal signal passes through
   — Low enough blur so violet detail survives diffusion
   — High saturation to amplify whatever violet reaches the surface
   — Strong border + inset highlight to define the glass edge

   .glass-s  token rows, stat cells, subtle surfaces
   .glass-p  swap card, main interactive panels
   .glass-m  sidebar, overlays, dialogs
════════════════════════════════════════════════════════ */

/* Tier 1 — surface
   6px blur preserves crystal facet detail.
   7% background lets the scene dominate.
   Saturation 140% pumps the violet that comes through. */
.glass-s {
  background: rgba(156,61,187,.07);
  backdrop-filter: blur(6px) saturate(140%);
  -webkit-backdrop-filter: blur(6px) saturate(140%);
  border: 1px solid rgba(156,61,187,.13);
}

/* Tier 2 — panel
   14px blur: diffuses without fully homogenising.
   20% background: 80% of the live crystal scene bleeds through.
   Saturation 160% ensures violet survives the blend.
   Inset top highlight at .09 — visible glass edge refraction. */
.glass-p {
  background: rgba(7,7,9,.20);
  backdrop-filter: blur(14px) saturate(160%);
  -webkit-backdrop-filter: blur(14px) saturate(160%);
  border: 1px solid rgba(156,61,187,.22);
  box-shadow:
    0 0 0 0.5px rgba(156,61,187,.14),
    0 8px 32px rgba(0,0,0,.38),
    inset 0 1px 0 rgba(232,232,240,.09);
}
.glass-p.active,
.glass-p:focus-within {
  border-color: rgba(156,61,187,.42);
  box-shadow:
    0 0 0 0.5px rgba(156,61,187,.24),
    0 0 32px rgba(156,61,187,.16),
    0 8px 32px rgba(0,0,0,.44),
    inset 0 0 40px rgba(156,61,187,.07),
    inset 0 1px 0 rgba(232,232,240,.12);
}

/* Tier 3 — modal
   26px blur: more depth, stays within 40px mobile limit.
   40% background: 60% crystal scene visible — clearly glass, not void.
   Saturation 175% — maximum pump within spec.
   Inset highlight .12 — the strongest glass surface read. */
.glass-m {
  background: rgba(7,7,9,.40);
  backdrop-filter: blur(26px) saturate(175%);
  -webkit-backdrop-filter: blur(26px) saturate(175%);
  border: 1px solid rgba(156,61,187,.28);
  box-shadow:
    0 0 0 0.5px rgba(156,61,187,.16),
    0 24px 64px rgba(0,0,0,.55),
    inset 0 1px 0 rgba(232,232,240,.12);
}

/* Input inside glass — NO backdrop-filter (causes artifacts) */
.glass-input {
  background: rgba(156,61,187,.05);
  border: 1px solid rgba(156,61,187,.10);
  color: var(--br);
  font-family: var(--fm);
  font-size: .88rem;
  letter-spacing: .04em;
  padding: .68rem 1rem;
  outline: none;
  width: 100%;
  transition:
    border-color 120ms var(--ease-std),
    box-shadow   120ms var(--ease-std);
}
.glass-input::placeholder { color: var(--dim); opacity: .38; }
.glass-input:focus {
  border-color: rgba(156,61,187,.35);
  box-shadow: 0 0 0 3px rgba(156,61,187,.08);
}

/* Fallback — browsers without backdrop-filter
   No blur available: background must be near-solid. */
@supports not (backdrop-filter: blur(1px)) {
  .glass-s { background: rgba(14,10,20,.88); }
  .glass-p { background: rgba(12,9,18,.94);  }
  .glass-m { background: rgba(9,7,15,.97);   }
}

/* ════════════════════════════════════════════════════════
   TYPOGRAPHY SCALE

   Cinzel — display only
   Electrolize — everything else

   Never bold. Never two adjacent elements within 4px of same size.
════════════════════════════════════════════════════════ */

/* Cinzel — display roles */
.t-display {
  font-family: var(--fd);
  font-weight: 400;
  font-size: clamp(3rem,8vw,5rem);
  letter-spacing: .14em;
  color: var(--br);
  line-height: .9;
}
.t-section {
  font-family: var(--fd);
  font-weight: 400;
  font-size: 2.2rem;
  letter-spacing: .10em;
  color: var(--br);
  line-height: 1;
}
.t-sub {
  font-family: var(--fd);
  font-weight: 400;
  font-size: 1.6rem;
  letter-spacing: .08em;
  color: var(--br);
  line-height: 1.1;
}

/* Electrolize — all functional text */
.t-eyebrow {
  font-family: var(--fm);
  font-size: .72rem;
  letter-spacing: .52em;
  color: var(--dim);
  text-transform: uppercase;
}
.t-btn-text {
  font-family: var(--fm);
  font-size: .76rem;
  letter-spacing: .34em;
  text-transform: uppercase;
}
.t-body {
  font-family: var(--fb);
  font-size: .88rem;
  letter-spacing: .04em;
  color: var(--bd);
  line-height: 1.7;
}
.t-emphasis {
  font-family: var(--fb);
  font-size: 1rem;
  letter-spacing: .02em;
  color: var(--br);
  line-height: 1.6;
}
.t-mono {
  font-family: var(--fm);
  font-size: .82rem;
  letter-spacing: .04em;
  color: var(--bd);
}
.t-label {
  font-family: var(--fm);
  font-size: .6rem;
  letter-spacing: .44em;
  color: var(--dim);
  text-transform: uppercase;
}

/* ════════════════════════════════════════════════════════
   BUTTONS — full architecture from decision section

   Structure:
     <button class="btn btn-primary">
       <div class="btn-pulse-ring"></div>
       <div class="btn-inner">
         <div class="glass-sheen"></div>
         <span>LABEL</span>
       </div>
     </button>

   .btn-primary  violet — primary / CTA
   .btn-white    white  — secondary
   .btn-warn     red    — destructive / high price impact

   Scan entrance: add .btn-scanning to parent container,
   JS injects .btn-scan into .btn-inner, strips animation after done.
════════════════════════════════════════════════════════ */

/* ── Outer shell — no visual, just layout + positioning ── */
.btn {
  font-family: var(--fm);
  font-size: .76rem;
  letter-spacing: .40em;
  text-transform: uppercase;
  padding: 0;
  background: transparent;
  border: none;
  outline: none;
  display: inline-flex;
  cursor: none;
  position: relative;
}
.btn:disabled { opacity: .28; pointer-events: none; }

/* ── Inner — the visual surface ── */
.btn-inner {
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 18px clamp(20px,5vw,52px);
  min-width: clamp(140px,36vw,240px);
  position: relative;
  overflow: hidden;
  transition:
    border-color 300ms var(--ease-std),
    box-shadow   400ms var(--ease-std);
}

/* Left accent bar — scaleY(0) → scaleY(1) on hover */
.btn-inner::before {
  content: '';
  position: absolute;
  left: 0; top: 0; bottom: 0;
  width: 3px;
  transform: scaleY(0);
  transform-origin: bottom;
  transition: transform 300ms var(--ease-spr);
}

/* Text sits above all pseudo layers */
.btn-inner span {
  position: relative;
  z-index: 3;
}

/* ── Glass sheen — diagonal highlight sweeps on hover ── */
.glass-sheen {
  position: absolute;
  top: 0; bottom: 0;
  width: 55%;
  background: linear-gradient(
    115deg,
    transparent 25%,
    rgba(255,255,255,.13) 48%,
    transparent 72%
  );
  transform: translateX(-160%) skewX(-15deg);
  transition: transform 700ms var(--ease-spr);
  z-index: 1;
  pointer-events: none;
  will-change: transform;
}
.btn:hover .glass-sheen { transform: translateX(160%) skewX(-15deg); }

/* ── Pulse rings — breathing outward rings around button ── */
.btn-pulse-ring {
  position: absolute;
  inset: -6px;
  pointer-events: none;
  z-index: 0;
}
.btn-pulse-ring::before,
.btn-pulse-ring::after {
  content: '';
  position: absolute;
  inset: 0;
  border: 1px solid transparent;
}

/* ── Scan bar — injected by JS on entrance ── */
.btn-scan {
  position: absolute;
  left: 0; right: 0; top: 0;
  height: 2px;
  pointer-events: none;
  z-index: 4;
  opacity: 0;
  will-change: transform, opacity;
}

/* ════ PRIMARY — violet ════ */
.btn-primary .btn-inner {
  background: rgba(156,61,187,.06);
  color: var(--br);
  border: 1px solid var(--em);
}
.btn-primary .btn-inner::before {
  background: rgba(190,128,220,.22);
  z-index: 2;
}
/* Fill gradient sweeps bottom → top on hover */
.btn-primary .btn-inner::after {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(
    155deg,
    rgba(180,60,220,.28)  0%,
    rgba(156,61,187,.16) 35%,
    rgba(156,61,187,.22) 65%,
    rgba(100,20,150,.30) 100%
  );
  transform: translateY(101%);
  transition: transform 400ms var(--ease-spr);
  z-index: 0;
}
.btn-primary:hover .btn-inner {
  border-color: var(--em);
  box-shadow: 0 0 14px rgba(156,61,187,.14);
}
.btn-primary:hover .btn-inner::before { transform: scaleY(1); }
.btn-primary:hover .btn-inner::after  { transform: translateY(0); }
.btn-primary:active .btn-inner        { transform: scale(.97); }

/* Violet pulse rings */
.btn-primary .btn-pulse-ring::before {
  border-color: rgba(156,61,187,.70);
  animation: pulse-sweep-violet 2.4s var(--ease-std) infinite;
}
.btn-primary .btn-pulse-ring::after {
  border-color: rgba(156,61,187,.35);
  animation: pulse-sweep-violet 2.4s var(--ease-std) infinite 1.2s;
}
@keyframes pulse-sweep-violet {
  0%   { opacity: 0; transform: scale(1); }
  20%  { opacity: 1; }
  100% { opacity: 0; transform: scale(1.08); border-color: rgba(156,61,187,0); }
}

/* Violet scan bar */
.btn-primary .btn-scan {
  background: linear-gradient(
    90deg,
    transparent 0%,
    rgba(156,61,187,.6) 20%,
    rgba(190,128,220,1) 50%,
    rgba(156,61,187,.6) 80%,
    transparent 100%
  );
  box-shadow:
    0 0 10px rgba(156,61,187,.9),
    0 0 24px rgba(156,61,187,.5),
    0 2px 8px rgba(156,61,187,.4);
}

/* ════ GHOST — white ════ */
.btn-white .btn-inner {
  background: rgba(156,61,187,.04);
  color: rgba(222,228,244,.65);
  border: 1px solid rgba(222,228,244,.20);
}
.btn-white .btn-inner::before {
  background: rgba(222,228,244,.40);
  z-index: 2;
}
.btn-white .btn-inner::after {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(
    155deg,
    rgba(255,255,255,.22)    0%,
    rgba(222,228,244,.12)   35%,
    rgba(222,228,244,.16)   65%,
    rgba(200,206,220,.20)  100%
  );
  transform: translateY(101%);
  transition: transform 400ms var(--ease-spr);
  z-index: 0;
}
.btn-white .btn-inner span {
  color: rgba(222,228,244,.65);
  transition: color 250ms var(--ease-std);
}
.btn-white:hover .btn-inner {
  border-color: rgba(222,228,244,.80);
  box-shadow: 0 0 10px rgba(222,228,244,.09);
}
.btn-white:hover .btn-inner span  { color: var(--br); }
.btn-white:hover .btn-inner::before { transform: scaleY(1); }
.btn-white:hover .btn-inner::after  { transform: translateY(0); }
.btn-white:active .btn-inner        { transform: scale(.97); }

/* White pulse rings */
.btn-white .btn-pulse-ring::before {
  border-color: rgba(222,228,244,.50);
  animation: pulse-sweep-white 2.4s var(--ease-std) infinite;
}
.btn-white .btn-pulse-ring::after {
  border-color: rgba(222,228,244,.22);
  animation: pulse-sweep-white 2.4s var(--ease-std) infinite 1.2s;
}
@keyframes pulse-sweep-white {
  0%   { opacity: 0; transform: scale(1); }
  20%  { opacity: 1; }
  100% { opacity: 0; transform: scale(1.08); border-color: rgba(222,228,244,0); }
}

/* White scan bar */
.btn-white .btn-scan {
  background: linear-gradient(
    90deg,
    transparent 0%,
    rgba(200,206,220,.6) 20%,
    rgba(222,228,244,1)  50%,
    rgba(200,206,220,.6) 80%,
    transparent 100%
  );
  box-shadow:
    0 0 10px rgba(222,228,244,.7),
    0 0 24px rgba(222,228,244,.35),
    0 2px 8px rgba(222,228,244,.3);
}

/* ════ WARN — red ════ */
.btn-warn .btn-inner {
  background: rgba(220,80,80,.05);
  color: var(--dn);
  border: 1px solid rgba(220,80,80,.40);
}
.btn-warn .btn-inner::before { background: rgba(220,80,80,.30); z-index: 2; }
.btn-warn .btn-inner::after {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(
    155deg,
    rgba(220,80,80,.22)  0%,
    rgba(180,40,40,.12) 35%,
    rgba(180,40,40,.16) 65%,
    rgba(140,20,20,.20) 100%
  );
  transform: translateY(101%);
  transition: transform 400ms var(--ease-spr);
  z-index: 0;
}
.btn-warn:hover .btn-inner {
  border-color: var(--dn);
  box-shadow: 0 0 28px rgba(220,80,80,.28);
}
.btn-warn:hover .btn-inner::before { transform: scaleY(1); }
.btn-warn:hover .btn-inner::after  { transform: translateY(0); }
.btn-warn:active .btn-inner        { transform: scale(.97); }

/* ════ SCAN ENTRANCE — shared keyframes ════ */
/* Container gets .btn-scanning class to trigger */
.btn-scanning .btn-scan {
  animation: btn-scan-sweep 3.5s var(--ease-std) forwards;
}
@keyframes btn-scan-sweep {
  0%,15%   { opacity: 0; transform: translateY(0); }
  17%      { opacity: 1; transform: translateY(0); }
  56%      { opacity: 0.7; transform: translateY(calc(100% + 60px)); }
  57%,100% { opacity: 0;   transform: translateY(calc(100% + 60px)); }
}

@keyframes btn-entrance {
  0%   { opacity: 0; }
  16%  { opacity: 1; }
  100% { opacity: 1; }
}

/* Violet entrance glow */
@keyframes btn-glow-violet {
  0%,16% { box-shadow: none; }
  55%    { box-shadow: 0 0 0 1px rgba(156,61,187,.9), 0 0 22px rgba(156,61,187,.9), 0 0 50px rgba(156,61,187,.55), 0 0 90px rgba(156,61,187,.25); }
  75%    { box-shadow: 0 0 0 1px rgba(156,61,187,.9), 0 0 22px rgba(156,61,187,.9), 0 0 50px rgba(156,61,187,.55), 0 0 90px rgba(156,61,187,.25); }
  100%   { box-shadow: none; }
}
/* Violet fill entrance */
@keyframes btn-fill-violet {
  0%,16%  { background: transparent; color: transparent; border-color: var(--em); }
  56%     { background: transparent; color: transparent; }
  100%    { background: rgba(156,61,187,.06); color: var(--br); }
}

/* White entrance glow */
@keyframes btn-glow-white {
  0%,16% { box-shadow: none; }
  55%    { box-shadow: 0 0 0 1px rgba(222,228,244,.9), 0 0 22px rgba(222,228,244,.7), 0 0 50px rgba(222,228,244,.35), 0 0 90px rgba(222,228,244,.12); }
  75%    { box-shadow: 0 0 0 1px rgba(222,228,244,.9), 0 0 22px rgba(222,228,244,.7), 0 0 50px rgba(222,228,244,.35), 0 0 90px rgba(222,228,244,.12); }
  100%   { box-shadow: none; }
}
/* Ghost text reveal */
@keyframes btn-white-reveal {
  0%,56%  { opacity: 0; }
  100%    { opacity: 1; }
}

/* ── Full-width modifier ── */
.btn-full          { width: 100%; }
.btn-full .btn-inner { width: 100%; min-width: 0; }

/* ── Confirm state — destructive, 2s timeout ── */
.btn.confirm .btn-inner {
  border-color: rgba(220,80,80,.60) !important;
  color: var(--dn) !important;
  background: rgba(220,80,80,.05) !important;
}

/* ════════════════════════════════════════════════════════
   SKELETON — never spinners
   Shimmer via ::after transform — compositor-only, zero paint.
   background-position animation replaced: caused repaint
   every frame while skeletons were on screen.
════════════════════════════════════════════════════════ */
.skeleton {
  background: var(--trace);
  border-radius: 2px;
  position: relative;
  overflow: hidden;
}
.skeleton::after {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(
    90deg,
    transparent              0%,
    rgba(156,61,187,.10)    50%,
    transparent             100%
  );
  transform: translateX(-100%);
  animation: skeleton-sweep 1.8s var(--ease-std) infinite;
  will-change: transform;
}
@keyframes skeleton-sweep {
  from { transform: translateX(-100%); }
  to   { transform: translateX(200%); }
}

/* Skeleton line helpers */
.skel-line        { height: .75em; border-radius: 2px; }
.skel-line + .skel-line { margin-top: .44em; }
.skel-w-80 { width: 80%; }
.skel-w-60 { width: 60%; }
.skel-w-40 { width: 40%; }

/* ════════════════════════════════════════════════════════
   SHAKE — error state
════════════════════════════════════════════════════════ */
@keyframes shake {
  0%,100% { transform: translateX(0);   }
  20%     { transform: translateX(-5px);}
  40%     { transform: translateX( 5px);}
  60%     { transform: translateX(-3px);}
  80%     { transform: translateX( 3px);}
}
.shake { animation: shake 380ms var(--ease-std); }

/* ════════════════════════════════════════════════════════
   KEYFRAMES — status, flash, entry
════════════════════════════════════════════════════════ */
@keyframes blink {
  0%,100% { opacity: 1;  }
  50%     { opacity: .2; }
}

@keyframes stat-flash {
  0%   {
    background: rgba(156,61,187,.28);
    box-shadow: inset 0 0 32px rgba(156,61,187,.18);
  }
  55%  {
    background: rgba(156,61,187,.06);
    box-shadow: inset 0 1px 0 rgba(156,61,187,.08);
  }
  100% { background: transparent; box-shadow: none; }
}
@keyframes num-flash {
  0%   {
    color: rgba(255,255,255,.97);
    text-shadow: 0 0 28px rgba(156,61,187,.9), 0 0 56px rgba(156,61,187,.3);
  }
  40%  { color: var(--em); text-shadow: 0 0 10px rgba(156,61,187,.4); }
  100% { color: var(--em); text-shadow: none; }
}
.stat-flash { animation: stat-flash 1.9s var(--ease-spr); }
.num-flash  { animation: num-flash  1.9s var(--ease-spr); }

@keyframes row-in {
  from { opacity: 0; transform: translateY(-4px); }
  to   { opacity: 1; transform: none; }
}

@keyframes toast-in {
  from { opacity: 0; transform: translateY(-8px); }
  to   { opacity: 1; transform: none; }
}

@keyframes checkmark-draw {
  from { stroke-dashoffset: 60; }
  to   { stroke-dashoffset: 0;  }
}

/* ════════════════════════════════════════════════════════
   VIEW TRANSITIONS — cinematic, never cuts

   EXIT  200ms ease-in  (accelerate out)
   ENTER 280ms ease-out (decelerate in)
════════════════════════════════════════════════════════ */
.view { will-change: opacity, transform; }
.view.leaving {
  opacity: 0;
  transform: translateY(6px);
  transition:
    opacity   200ms var(--ease-in),
    transform 200ms var(--ease-in);
  pointer-events: none;
}
.view.entering {
  opacity: 1;
  transform: translateY(0);
  transition:
    opacity   280ms var(--ease-out),
    transform 280ms var(--ease-out);
}

/* ════════════════════════════════════════════════════════
   PANEL CONTENT TRANSITIONS — right panel, desktop

   Content fades out (160ms), new content fades in (240ms).
   Never a cut.
════════════════════════════════════════════════════════ */
.panel-content { will-change: opacity; }
.panel-content.leaving {
  opacity: 0;
  transition: opacity 160ms var(--ease-in);
  pointer-events: none;
}
.panel-content.entering {
  opacity: 1;
  transition: opacity 240ms var(--ease-out);
}

/* ════════════════════════════════════════════════════════
   PANEL ENTRANCE
   Desktop: slides from right
   Mobile:  slides from bottom
════════════════════════════════════════════════════════ */
.panel-enter-desktop {
  transform: translateX(100%);
  transition: transform 320ms var(--ease-out);
}
.panel-enter-mobile {
  transform: translateY(100%);
  transition: transform 320ms var(--ease-out);
}
.panel-visible { transform: translate(0,0); }

/* ════════════════════════════════════════════════════════
   FOCUS STATES
════════════════════════════════════════════════════════ */
*:focus          { outline: none; }
*:focus-visible  {
  outline: 1.5px solid rgba(156,61,187,.50);
  outline-offset: 3px;
}

/* ════════════════════════════════════════════════════════
   SCROLLBARS
════════════════════════════════════════════════════════ */
::-webkit-scrollbar       { width: 2px; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb { background: var(--em-lo); border-radius: 1px; }

/* ════════════════════════════════════════════════════════
   TOKEN ROW — hover: left violet accent slides in
════════════════════════════════════════════════════════ */
.token-row {
  position: relative;
  border-bottom: 1px solid var(--trace);
  transition: background 140ms var(--ease-std);
  cursor: none;
}
.token-row::before {
  content: '';
  position: absolute;
  left: 0; top: 0; bottom: 0;
  width: 2px;
  background: var(--em);
  transform: scaleY(0);
  transform-origin: center;
  transition: transform 160ms var(--ease-spr);
}
.token-row:hover              { background: var(--hi); }
.token-row:hover::before      { transform: scaleY(1); }
.token-row.active             { background: var(--em-dim); }
.token-row.active::before     { transform: scaleY(1); }
.token-row.new                { animation: row-in 400ms var(--ease-spr); }

/* ════════════════════════════════════════════════════════
   STATUS DOT
════════════════════════════════════════════════════════ */
.sdot {
  width: 5px;
  height: 5px;
  border-radius: 50%;
  background: var(--dim);
  flex-shrink: 0;
  transition: background 300ms var(--ease-std);
}
.sdot.live {
  background: var(--em);
  animation: blink 2s var(--ease-std) infinite;
}

/* ════════════════════════════════════════════════════════
   TOGGLE SWITCH
   Thumb slides 200ms ease-spr. Track color 200ms ease-std.
════════════════════════════════════════════════════════ */
.toggle {
  position: relative;
  display: inline-flex;
  align-items: center;
  width: 40px;
  height: 22px;
  flex-shrink: 0;
  cursor: none;
}
.toggle input {
  opacity: 0;
  width: 0;
  height: 0;
  position: absolute;
}
.toggle-track {
  position: absolute;
  inset: 0;
  background: rgba(156,61,187,.08);
  border: 1px solid rgba(156,61,187,.18);
  border-radius: 11px;
  transition:
    background   200ms var(--ease-std),
    border-color 200ms var(--ease-std);
}
.toggle-thumb {
  position: absolute;
  top: 3px;
  left: 3px;
  width: 14px;
  height: 14px;
  border-radius: 50%;
  background: var(--dim);
  transition:
    transform  200ms var(--ease-spr),
    background 200ms var(--ease-std);
  pointer-events: none;
}
.toggle input:checked ~ .toggle-track {
  background: rgba(156,61,187,.22);
  border-color: var(--em-lo);
}
.toggle input:checked ~ .toggle-thumb {
  transform: translateX(18px);
  background: var(--em);
}
.toggle.disabled {
  opacity: .28;
  pointer-events: none;
}

/* ════════════════════════════════════════════════════════
   SEGMENT CONTROL
   Active indicator slides between segments.
   transition: left 220ms ease-spr.
════════════════════════════════════════════════════════ */
.seg-control {
  position: relative;
  display: inline-flex;
  background: rgba(156,61,187,.04);
  border: 1px solid rgba(156,61,187,.10);
  border-radius: 2px;
  padding: 3px;
}
.seg-indicator {
  position: absolute;
  top: 3px;
  left: 3px;
  height: calc(100% - 6px);
  background: rgba(156,61,187,.18);
  border: 1px solid var(--em-lo);
  border-radius: 1px;
  transition:
    left   220ms var(--ease-spr),
    width  220ms var(--ease-spr);
  pointer-events: none;
  z-index: 0;
}
.seg-btn {
  position: relative;
  z-index: 1;
  background: transparent;
  border: none;
  color: var(--dim);
  font-family: var(--fm);
  font-size: .66rem;
  letter-spacing: .34em;
  text-transform: uppercase;
  padding: .42rem 1rem;
  cursor: none;
  transition: color 160ms var(--ease-std);
  white-space: nowrap;
}
.seg-btn.active        { color: var(--br); }
.seg-btn:hover:not(.active) { color: var(--bd); }

/* ════════════════════════════════════════════════════════
   TOAST
════════════════════════════════════════════════════════ */
#toast-wrap {
  position: fixed;
  top: 1.4rem;
  right: 1.4rem;
  z-index: 9998;
  display: flex;
  flex-direction: column;
  gap: .5rem;
  pointer-events: none;
  max-width: 380px;
}
.toast {
  background: var(--void);
  border: 1px solid var(--trace);
  padding: .76rem 1.1rem;
  font-family: var(--fm);
  font-size: .72rem;
  letter-spacing: .02em;
  color: var(--bd);
  pointer-events: all;
  animation: toast-in 280ms var(--ease-spr);
  line-height: 1.55;
  transition: opacity 300ms var(--ease-std);
}
.toast.tok    { border-color: rgba(156,61,187,.44); color: var(--em-2); }
.toast.tok-ok { border-color: rgba(80,200,140,.44);  color: var(--up);   }
.toast.terr   { border-color: rgba(220,60,60,.44);   color: var(--dn);   }
.toast-lnk {
  color: var(--em-2);
  text-decoration: none;
  margin-left: .55rem;
  opacity: .7;
  cursor: none;
  transition: opacity 120ms var(--ease-std);
}
.toast-lnk:hover { opacity: 1; }

/* ════════════════════════════════════════════════════════
   SEMANTIC COLOR HELPERS
════════════════════════════════════════════════════════ */
.c-up   { color: var(--up);   }
.c-dn   { color: var(--dn);   }
.c-warn { color: var(--warn); }
.c-em   { color: var(--em);   }
.c-em2  { color: var(--em-2); }
.c-br   { color: var(--br);   }
.c-bd   { color: var(--bd);   }
.c-dim  { color: var(--dim);  }

/* ════════════════════════════════════════════════════════
   SHARED COMPONENT — SECTION LABEL
════════════════════════════════════════════════════════ */
.section-label {
  font-family: var(--fm);
  font-size: .62rem;
  letter-spacing: .56em;
  color: var(--dim);
  text-transform: uppercase;
  margin-bottom: .65rem;
}

/* ════════════════════════════════════════════════════════
   SHARED COMPONENT — DIVIDER
════════════════════════════════════════════════════════ */
.divider {
  width: 100%;
  height: 1px;
  background: var(--trace);
}

/* ════════════════════════════════════════════════════════
   SHARED COMPONENT — BADGE
════════════════════════════════════════════════════════ */
.badge {
  display: inline-flex;
  align-items: center;
  padding: .18rem .52rem;
  font-family: var(--fm);
  font-size: .54rem;
  letter-spacing: .28em;
  text-transform: uppercase;
  border: 1px solid var(--em-lo);
  color: var(--em-2);
  border-radius: 1px;
}
.badge.verified {
  border-color: rgba(80,200,140,.32);
  color: var(--up);
}

/* ════════════════════════════════════════════════════════
   SHARED COMPONENT — EMPTY STATE
   Never blank. Always has content.
════════════════════════════════════════════════════════ */
.empty-state {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: var(--sp-6) var(--sp-4);
  gap: var(--sp-3);
  text-align: center;
}
.empty-state-label {
  font-family: var(--fm);
  font-size: .68rem;
  letter-spacing: .44em;
  color: var(--dim);
  text-transform: uppercase;
}

/* ════════════════════════════════════════════════════════
   SHARED COMPONENT — ERROR STATE
════════════════════════════════════════════════════════ */
.error-row {
  display: flex;
  align-items: center;
  gap: var(--sp-2);
  padding: .6rem .75rem;
  font-family: var(--fm);
  font-size: .7rem;
  letter-spacing: .04em;
  color: var(--dn);
  border-left: 2px solid var(--dn);
  background: rgba(220,80,80,.04);
}

/* ════════════════════════════════════════════════════════
   SHARED COMPONENT — PRICE IMPACT WARNING
════════════════════════════════════════════════════════ */
.impact-row {
  padding: .5rem .75rem;
  font-family: var(--fm);
  font-size: .7rem;
  letter-spacing: .04em;
  border-left: 2px solid var(--warn);
  color: var(--warn);
  background: rgba(220,180,40,.05);
  transition: opacity 200ms var(--ease-std);
}
.impact-row.crit {
  border-color: var(--dn);
  color: var(--dn);
  background: rgba(220,80,80,.05);
}

/* ════════════════════════════════════════════════════════
   SHARED COMPONENT — SETTINGS ROW
════════════════════════════════════════════════════════ */
.settings-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--sp-4);
  padding: .9rem 0;
  border-bottom: 1px solid var(--trace);
}
.settings-row:last-child { border-bottom: none; }

.settings-row-info { display: flex; flex-direction: column; gap: .22rem; }
.settings-row-label {
  font-family: var(--fm);
  font-size: .76rem;
  letter-spacing: .04em;
  color: var(--bd);
}
.settings-row-desc {
  font-family: var(--fm);
  font-size: .64rem;
  letter-spacing: .02em;
  color: var(--dim);
  line-height: 1.55;
}

/* ════════════════════════════════════════════════════════
   SHARED COMPONENT — NAV ITEM (sidebar)
════════════════════════════════════════════════════════ */
.nav-item {
  display: flex;
  align-items: center;
  gap: var(--sp-2);
  padding: .62rem .75rem;
  font-family: var(--fm);
  font-size: .72rem;
  letter-spacing: .26em;
  text-transform: uppercase;
  color: var(--dim);
  background: transparent;
  border: none;
  cursor: none;
  position: relative;
  transition: background 140ms var(--ease-std), color 140ms var(--ease-std);
}
.nav-item::before {
  content: '';
  position: absolute;
  left: 0; top: 0; bottom: 0;
  width: 2px;
  background: var(--em);
  transform: scaleY(0);
  transform-origin: center;
  transition: transform 160ms var(--ease-spr);
}
.nav-item:hover {
  background: var(--hi);
  color: var(--bd);
}
.nav-item.active {
  color: var(--em);
}
.nav-item.active::before { transform: scaleY(1); }

/* ════════════════════════════════════════════════════════
   REDUCED MOTION
════════════════════════════════════════════════════════ */
@media (prefers-reduced-motion: reduce) {
  .ph, .sph {
    transition: none !important;
    opacity: 1 !important;
  }
  .skeleton {
    animation: none !important;
    background: var(--trace);
  }
  .sdot.live        { animation: none !important; }
  .view.leaving,
  .view.entering    { transition: none !important; }
  .panel-content.leaving,
  .panel-content.entering { transition: none !important; }
  .toggle-thumb     { transition: transform 0ms, background 0ms !important; }
  .seg-indicator    { transition: none !important; }
}

/* ════════════════════════════════════════════════════════
   MOBILE — primary-touch device detection
   Matches hover:none + pointer:coarse — excludes touch laptops
════════════════════════════════════════════════════════ */
@media (hover: none) and (pointer: coarse) {
  #cur { display: none; }
  body, button, .token-row, .nav-item { cursor: auto !important; }
  .glass-input, .btn, .btn-primary, .btn-warn,
  .seg-btn, .toggle { cursor: auto; }

  /* Cap blur — performance. Desktop values already reduced;
     mobile caps stay lower still, with saturation preserved. */
  .glass-p {
    backdrop-filter: blur(10px) saturate(150%);
    -webkit-backdrop-filter: blur(10px) saturate(150%);
  }
  .glass-m {
    backdrop-filter: blur(18px) saturate(165%);
    -webkit-backdrop-filter: blur(18px) saturate(165%);
  }
}

/* ════════════════════════════════════════════════════════
   OBS LOADING MARK
   Fixed overlay — covers viewport during async ops.
   Fade in: 240ms ease-out. Fade out: 280ms ease-out.
   JS API: window.OBSLoader.show(label?) / hide()
════════════════════════════════════════════════════════ */
.obs-loading-overlay {
  position: fixed;
  inset: 0;
  z-index: 500;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: var(--sp-4);
  background: rgba(7,7,9,.76);
  -webkit-backdrop-filter: blur(16px) saturate(120%);
  backdrop-filter: blur(16px) saturate(120%);
  opacity: 0;
  pointer-events: none;
  transition: opacity 280ms var(--ease-out);
}
.obs-loading-overlay.visible {
  opacity: 1;
  pointer-events: all;
  transition: opacity 240ms var(--ease-out);
}

/* SVG mark — overflow:visible lets the glow filter bleed cleanly */
.obs-loading-mark {
  width: 72px;
  height: 72px;
  overflow: visible;
  display: block;
}

/* Rotate facet group to align with diamond border */
#obs-facets {
  transform-box: fill-box;
  transform-origin: center;
  transform: rotate(45deg);
}

/* Status label — appears below the mark */
.obs-loading-label {
  font-family: var(--fm);
  font-size: .58rem;
  letter-spacing: .52em;
  text-transform: uppercase;
  color: var(--dim);
  line-height: 1;
  min-height: 1em; /* reserves space even when empty so layout doesn't shift */
}

/* ════════════════════════════════════════════════════════
   PHASE 8C — PORTFOLIO · SEND · RECEIVE · ACCOUNTS
════════════════════════════════════════════════════════ */

/* ── Portfolio ───────────────────────────────────────── */

.portfolio-main {
  display: flex;
  flex-direction: column;
  height: 100%;
  overflow: hidden;
}

.portfolio-balance-section {
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: var(--sp-5) var(--sp-4) var(--sp-4);
  flex-shrink: 0;
}
.portfolio-balance-section.desktop {
  align-items: flex-start;
  padding: var(--sp-4) var(--sp-4) var(--sp-3);
  border-bottom: 1px solid var(--trace);
}

.portfolio-total-label {
  font-family: var(--fm);
  font-size: .46rem;
  letter-spacing: .60em;
  text-transform: uppercase;
  color: var(--dim);
  opacity: .60;
  line-height: 1;
  margin-bottom: var(--sp-2);
}

.portfolio-total-usd {
  display: block;
  font-family: var(--fm);
  font-size: 2.6rem;
  font-weight: 400;
  letter-spacing: .02em;
  color: var(--br);
  line-height: 1;
  margin-bottom: var(--sp-1);
}

.portfolio-total-change {
  font-family: var(--fm);
  font-size: .72rem;
  letter-spacing: .04em;
  line-height: 1;
  margin-bottom: var(--sp-4);
  min-height: 1em;
}
.portfolio-total-change.up { color: var(--up); }
.portfolio-total-change.dn { color: var(--dn); }

/* Action buttons */
.portfolio-actions {
  display: flex;
  flex-direction: row;
  gap: var(--sp-5);
  justify-content: center;
}
.portfolio-balance-section.desktop .portfolio-actions {
  justify-content: flex-start;
  gap: var(--sp-4);
}

.action-btn {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 7px;
  background: transparent;
  border: none;
  outline: none;
  padding: 0;
  cursor: none;
  -webkit-tap-highlight-color: transparent;
  -webkit-user-select: none;
  user-select: none;
}

.action-btn-icon {
  width: 52px;
  height: 52px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(156,61,187,.08);
  border: 1px solid var(--em-lo);
  color: var(--em-2);
  transition:
    border-color 140ms var(--ease-std),
    background   140ms var(--ease-std),
    box-shadow   200ms var(--ease-std),
    transform    200ms var(--ease-spr);
}
.action-btn:hover  .action-btn-icon {
  border-color: var(--em);
  background: rgba(156,61,187,.14);
  box-shadow: 0 0 16px rgba(156,61,187,.22);
}
.action-btn:active .action-btn-icon {
  transform: scale(.90);
  transition: transform 80ms var(--ease-spr);
}

.action-btn-label {
  font-family: var(--fm);
  font-size: .52rem;
  letter-spacing: .28em;
  text-transform: uppercase;
  color: var(--dim);
  line-height: 1;
}

/* Portfolio assets */
.portfolio-assets-section {
  display: flex;
  flex-direction: column;
  flex: 1;
  min-height: 0;
  overflow: hidden;
}

.portfolio-section-label {
  font-family: var(--fm);
  font-size: .46rem;
  letter-spacing: .60em;
  text-transform: uppercase;
  color: var(--dim);
  opacity: .60;
  padding: var(--sp-3) var(--sp-3) var(--sp-2);
  flex-shrink: 0;
}

.portfolio-asset-list {
  flex: 1;
  overflow-y: auto;
  overflow-x: hidden;
  scrollbar-width: thin;
  scrollbar-color: rgba(156,61,187,.14) transparent;
}
.portfolio-asset-list::-webkit-scrollbar       { width: 2px; }
.portfolio-asset-list::-webkit-scrollbar-track { background: transparent; }
.portfolio-asset-list::-webkit-scrollbar-thumb { background: rgba(156,61,187,.14); border-radius: 1px; }

/* Asset rows — held and market variants */
.asset-row {
  display: flex;
  align-items: center;
  gap: var(--sp-3);
  padding: 10px var(--sp-3);
  cursor: none;
  -webkit-tap-highlight-color: transparent;
  transition: background 120ms var(--ease-std);
  position: relative;
  min-height: 56px;
}
.asset-row:hover  { background: rgba(156,61,187,.04); }
.asset-row:active { background: rgba(156,61,187,.08); }

.asset-row.held {
  border-left: 1px solid var(--em-lo);
}

.asset-row-logo-wrap {
  position: relative;
  flex-shrink: 0;
  width: 36px;
  height: 36px;
}
.asset-row-logo {
  width: 36px;
  height: 36px;
  border-radius: 50%;
  display: block;
  object-fit: cover;
}
.asset-row-logo-fallback {
  width: 36px;
  height: 36px;
  border-radius: 50%;
  background: var(--em);
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: var(--fm);
  font-size: .80rem;
  color: #fff;
  flex-shrink: 0;
}
.asset-row-chain-badge {
  position: absolute;
  bottom: -2px;
  right: -2px;
  width: 14px;
  height: 14px;
  border-radius: 50%;
  border: 1px solid rgba(7,7,9,.80);
  background: rgba(7,7,9,.80);
  display: block;
  object-fit: cover;
}

.asset-row-identity {
  display: flex;
  flex-direction: column;
  gap: 3px;
  flex: 1;
  min-width: 0;
}
.asset-row-name {
  font-family: var(--fm);
  font-size: .78rem;
  letter-spacing: .02em;
  color: var(--br);
  line-height: 1.1;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.asset-row-chain {
  font-family: var(--fm);
  font-size: .52rem;
  letter-spacing: .22em;
  color: var(--dim);
  text-transform: uppercase;
  line-height: 1;
}

.asset-row-balance {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 3px;
  flex-shrink: 0;
}
.asset-row-balance-usd {
  font-family: var(--fm);
  font-size: .78rem;
  letter-spacing: .02em;
  color: var(--br);
  line-height: 1.1;
}
.asset-row-balance-amount {
  font-family: var(--fm);
  font-size: .60rem;
  letter-spacing: .02em;
  color: var(--dim);
  line-height: 1;
}

.asset-row-price {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 3px;
  flex-shrink: 0;
  min-width: 64px;
}
.asset-row-usd {
  font-family: var(--fm);
  font-size: .78rem;
  letter-spacing: .02em;
  color: var(--br);
  line-height: 1.1;
}
.asset-row-change {
  font-family: var(--fm);
  font-size: .60rem;
  letter-spacing: .04em;
  line-height: 1;
}
.asset-row-change.up              { color: var(--up); }
.asset-row-change.dn              { color: var(--dn); }
.asset-row-change:not(.up):not(.dn) { color: var(--dim); }

/* Portfolio states */
.portfolio-error,
.portfolio-empty {
  display: flex;
  align-items: center;
  justify-content: center;
  flex-direction: column;
  gap: var(--sp-3);
  padding: var(--sp-6) var(--sp-4);
  min-height: 120px;
  font-family: var(--fm);
  font-size: .64rem;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--dim);
  text-align: center;
}
.portfolio-error { color: var(--dn); }

/* ── Send view ───────────────────────────────────────── */

.send-view {
  display: flex;
  flex-direction: column;
  padding: var(--sp-4) var(--sp-3);
  gap: var(--sp-3);
  height: 100%;
  overflow: hidden;
}

.send-step {
  display: flex;
  flex-direction: column;
  gap: var(--sp-3);
  flex: 1;
  min-height: 0;
  overflow-y: auto;
}

.send-network-chips {
  display: flex;
  flex-direction: row;
  gap: 6px;
  overflow-x: auto;
  padding-bottom: 2px;
  scrollbar-width: none;
}
.send-network-chips::-webkit-scrollbar { display: none; }

.network-chip {
  height: 28px;
  padding: 0 12px;
  border-radius: 14px;
  border: 1px solid var(--trace);
  background: transparent;
  color: var(--dim);
  font-family: var(--fm);
  font-size: .54rem;
  letter-spacing: .18em;
  text-transform: uppercase;
  white-space: nowrap;
  flex-shrink: 0;
  cursor: none;
  outline: none;
  -webkit-tap-highlight-color: transparent;
  transition:
    border-color 120ms var(--ease-std),
    color        120ms var(--ease-std),
    background   120ms var(--ease-std);
}
.network-chip.active {
  border-color: var(--em-lo);
  color: var(--em-2);
  background: rgba(156,61,187,.08);
}
.network-chip:hover:not(.active) {
  border-color: var(--em-lo);
  color: var(--em-2);
}

.send-token-list {
  display: flex;
  flex-direction: column;
  overflow-y: auto;
  flex: 1;
  min-height: 0;
}

/* Send token rows — held tokens with chain badge */
.send-token-row {
  display: flex;
  align-items: center;
  gap: var(--sp-3);
  padding: 10px var(--sp-2);
  cursor: none;
  -webkit-tap-highlight-color: transparent;
  transition: background 120ms var(--ease-std);
  min-height: 56px;
  border-bottom: 1px solid var(--trace);
}
.send-token-row:last-child  { border-bottom: none; }
.send-token-row:hover  { background: rgba(156,61,187,.04); }
.send-token-row:active { background: rgba(156,61,187,.08); }

.send-token-row-identity {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 3px;
}
.send-token-row-name  { font-family: var(--fm); font-size: .78rem; letter-spacing: .02em; color: var(--br); }
.send-token-row-chain { font-family: var(--fm); font-size: .52rem; letter-spacing: .22em; color: var(--dim); text-transform: uppercase; }
.send-token-row-amounts {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 3px;
  flex-shrink: 0;
}
.send-token-row-usd    { font-family: var(--fm); font-size: .78rem; letter-spacing: .02em; color: var(--br); }
.send-token-row-amount { font-family: var(--fm); font-size: .60rem; letter-spacing: .02em; color: var(--dim); }

.send-error,
.send-empty {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: var(--sp-3);
  padding: var(--sp-5);
  font-family: var(--fm);
  font-size: .64rem;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--dim);
  text-align: center;
}
.send-error { color: var(--dn); }

.send-selected-token-badge {
  display: flex;
  align-items: center;
  gap: var(--sp-2);
  padding: var(--sp-2) var(--sp-3);
  background: rgba(156,61,187,.06);
  border: 1px solid var(--em-lo);
  border-radius: 8px;
  flex-shrink: 0;
}

.send-recipient-wrap {
  display: flex;
  flex-direction: column;
  gap: var(--sp-2);
  flex-shrink: 0;
}
.send-recipient-input {
  width: 100%;
  box-sizing: border-box;
}

.send-ens-status {
  font-family: var(--fm);
  font-size: .62rem;
  letter-spacing: .04em;
  line-height: 1.4;
  padding: 0 var(--sp-1);
}
.send-ens-status.resolving { color: var(--dim); }
.send-ens-status.resolved  { color: var(--up); }
.send-ens-status.invalid   { color: var(--dn); }

.send-amount-wrap {
  display: flex;
  flex-direction: column;
  gap: var(--sp-2);
  flex-shrink: 0;
  animation: fadeSlideIn 200ms var(--ease-spr);
}
@keyframes fadeSlideIn {
  from { opacity: 0; transform: translateY(-6px); }
  to   { opacity: 1; transform: translateY(0); }
}

.send-amount-row {
  display: flex;
  align-items: stretch;
  gap: var(--sp-2);
}
.send-amount-input {
  flex: 1;
  min-width: 0;
  background: rgba(156,61,187,.04);
  border: 1px solid rgba(156,61,187,.14);
  border-radius: 8px;
  font-family: var(--fm);
  font-size: 1.4rem;
  letter-spacing: .02em;
  color: var(--br);
  padding: var(--sp-3) var(--sp-3);
  outline: none;
  caret-color: var(--em-2);
  -moz-appearance: textfield;
  transition: border-color 140ms var(--ease-std), background 140ms var(--ease-std);
}
.send-amount-input:focus {
  border-color: rgba(156,61,187,.32);
  background: rgba(156,61,187,.06);
}
.send-amount-input::-webkit-inner-spin-button,
.send-amount-input::-webkit-outer-spin-button { -webkit-appearance: none; display: none; }
.send-amount-input::placeholder { color: rgba(222,228,244,.18); opacity: 1; }

.send-max-btn {
  background: transparent;
  border: 1px solid var(--em-lo);
  color: var(--em-2);
  font-family: var(--fm);
  font-size: .54rem;
  letter-spacing: .20em;
  text-transform: uppercase;
  padding: 0 var(--sp-3);
  border-radius: 6px;
  cursor: none;
  outline: none;
  flex-shrink: 0;
  transition: border-color 120ms var(--ease-std), background 120ms var(--ease-std);
}
.send-max-btn:hover { border-color: var(--em); background: rgba(156,61,187,.08); }

.send-amount-usd {
  font-family: var(--fm);
  font-size: .66rem;
  letter-spacing: .04em;
  color: var(--dim);
  padding: 0 var(--sp-1);
}

.send-gas-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: var(--sp-1) var(--sp-1);
  animation: fadeSlideIn 180ms var(--ease-spr);
}
.send-gas-label { font-family: var(--fm); font-size: .56rem; letter-spacing: .28em; text-transform: uppercase; color: var(--dim); }
.send-gas-value { font-family: var(--fm); font-size: .62rem; letter-spacing: .04em; color: var(--dim); }

.send-cta {
  padding-top: var(--sp-3);
  flex-shrink: 0;
  animation: fadeSlideIn 200ms var(--ease-spr);
}

/* ── Receive view ────────────────────────────────────── */

.receive-view {
  display: flex;
  flex-direction: column;
  gap: var(--sp-3);
  padding: var(--sp-4) var(--sp-3);
  overflow-y: auto;
}

.receive-intro-note {
  font-family: var(--fm);
  font-size: .62rem;
  letter-spacing: .03em;
  line-height: 1.6;
  color: var(--dim);
  padding: var(--sp-3);
  background: rgba(156,61,187,.04);
  border: 1px solid var(--trace);
  border-radius: 8px;
  margin: 0;
}

.receive-network-list {
  display: flex;
  flex-direction: column;
  gap: 1px;
}

.receive-network-row {
  display: flex;
  align-items: center;
  gap: var(--sp-3);
  padding: var(--sp-3);
  min-height: 56px;
  transition: background 120ms var(--ease-std);
  border-bottom: 1px solid var(--trace);
}
.receive-network-row:last-of-type { border-bottom: none; }
.receive-network-row:hover        { background: rgba(156,61,187,.04); }

.receive-network-logo {
  width: 28px;
  height: 28px;
  border-radius: 50%;
  flex-shrink: 0;
  display: block;
  object-fit: cover;
}
.receive-network-info {
  display: flex;
  flex-direction: column;
  gap: 3px;
  flex: 1;
  min-width: 0;
}
.receive-network-name {
  font-family: var(--fm);
  font-size: .74rem;
  letter-spacing: .03em;
  color: var(--br);
  line-height: 1.1;
}
.receive-network-addr {
  font-family: var(--fm);
  font-size: .60rem;
  letter-spacing: .02em;
  color: var(--dim);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.receive-copy-btn,
.receive-qr-btn {
  width: 36px;
  height: 36px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: transparent;
  border: none;
  outline: none;
  color: var(--dim);
  cursor: none;
  flex-shrink: 0;
  border-radius: 6px;
  -webkit-tap-highlight-color: transparent;
  transition: color 120ms var(--ease-std), background 120ms var(--ease-std);
}
.receive-copy-btn:hover,
.receive-qr-btn:hover  { color: var(--em-2); background: rgba(156,61,187,.06); }
.receive-copy-btn:active,
.receive-qr-btn:active { color: var(--em-2); background: rgba(156,61,187,.12); }

.receive-qr-expand {
  display: flex;
  justify-content: center;
  padding: var(--sp-4);
  animation: fadeSlideIn 220ms var(--ease-spr);
}
.receive-qr-expand canvas {
  border-radius: 10px;
  display: block;
}

/* ── Accounts view ───────────────────────────────────── */

.accounts-view {
  display: flex;
  flex-direction: column;
  overflow-y: auto;
  height: 100%;
}

.accounts-section {
  padding: var(--sp-4) var(--sp-3) var(--sp-4);
  border-bottom: 1px solid var(--trace);
}
.accounts-section:last-child { border-bottom: none; }

.accounts-section-label {
  display: block;
  font-family: var(--fm);
  font-size: .46rem;
  letter-spacing: .60em;
  text-transform: uppercase;
  color: var(--dim);
  opacity: .60;
  margin-bottom: var(--sp-3);
  line-height: 1;
}

.accounts-wallet-list {
  display: flex;
  flex-direction: column;
  gap: var(--sp-2);
  margin-bottom: var(--sp-3);
}

.accounts-wallet-card {
  display: flex;
  align-items: center;
  gap: var(--sp-3);
  padding: var(--sp-3);
  border-radius: 10px;
  border: 1px solid var(--trace);
  background: rgba(255,255,255,.02);
  transition: border-color 140ms var(--ease-std);
}
.accounts-wallet-card.active {
  border-color: var(--em-lo);
  background: rgba(156,61,187,.06);
}

.accounts-wallet-type-icon {
  width: 32px;
  height: 32px;
  border-radius: 50%;
  background: rgba(156,61,187,.10);
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--em-2);
  flex-shrink: 0;
}

.accounts-wallet-info {
  display: flex;
  flex-direction: column;
  gap: 3px;
  flex: 1;
  min-width: 0;
}
.accounts-wallet-ens  { font-family: var(--fm); font-size: .78rem; letter-spacing: .02em; color: var(--br); }
.accounts-wallet-addr { font-family: var(--fm); font-size: .62rem; letter-spacing: .02em; color: var(--dim); }

.accounts-wallet-networks {
  display: flex;
  flex-direction: row;
  gap: 4px;
  margin-top: 4px;
}
.accounts-network-badge {
  width: 14px;
  height: 14px;
  border-radius: 50%;
  display: block;
  object-fit: cover;
}

.accounts-use-btn {
  background: transparent;
  border: 1px solid var(--em-lo);
  color: var(--em-2);
  font-family: var(--fm);
  font-size: .48rem;
  letter-spacing: .24em;
  text-transform: uppercase;
  padding: 5px 10px;
  border-radius: 5px;
  cursor: none;
  outline: none;
  flex-shrink: 0;
  -webkit-tap-highlight-color: transparent;
  transition: border-color 120ms var(--ease-std), background 120ms var(--ease-std);
}
.accounts-use-btn:hover { border-color: var(--em); background: rgba(156,61,187,.08); }

.accounts-add-wallet-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: var(--sp-2);
  width: 100%;
  padding: var(--sp-3);
  background: transparent;
  border: 1px dashed var(--trace);
  border-radius: 8px;
  color: var(--dim);
  font-family: var(--fm);
  font-size: .54rem;
  letter-spacing: .24em;
  text-transform: uppercase;
  cursor: none;
  outline: none;
  -webkit-tap-highlight-color: transparent;
  transition: border-color 140ms var(--ease-std), color 140ms var(--ease-std);
}
.accounts-add-wallet-btn:hover {
  border-color: var(--em-lo);
  color: var(--em-2);
}

.accounts-network-toggles {
  display: flex;
  flex-direction: column;
  gap: 1px;
}
.accounts-network-row {
  display: flex;
  align-items: center;
  gap: var(--sp-3);
  padding: var(--sp-2) 0;
  min-height: 44px;
}
.accounts-network-logo { width: 20px; height: 20px; border-radius: 50%; flex-shrink: 0; object-fit: cover; }
.accounts-network-name { font-family: var(--fm); font-size: .72rem; letter-spacing: .03em; color: var(--br); flex: 1; }

/* Toggle switch */
.accounts-toggle {
  position: relative;
  width: 32px;
  height: 18px;
  flex-shrink: 0;
  background: var(--trace);
  border-radius: 9px;
  border: none;
  outline: none;
  cursor: none;
  -webkit-tap-highlight-color: transparent;
  transition: background 200ms var(--ease-std);
}
.accounts-toggle.on { background: var(--em); }
.accounts-toggle::after {
  content: '';
  position: absolute;
  top: 2px;
  left: 2px;
  width: 14px;
  height: 14px;
  border-radius: 50%;
  background: #fff;
  transition: transform 200ms var(--ease-spr);
}
.accounts-toggle.on::after { transform: translateX(14px); }

/* ── Token panel additions ───────────────────────────── */

.token-panel-holding {
  display: flex;
  margin-bottom: var(--sp-4);
  flex-shrink: 0;
}
.token-panel-holding-inner {
  display: flex;
  flex-direction: column;
  gap: 4px;
  padding: var(--sp-3);
  background: rgba(156,61,187,.06);
  border: 1px solid var(--em-lo);
  border-radius: 8px;
  width: 100%;
}
.token-panel-holding-label {
  font-family: var(--fm);
  font-size: .44rem;
  letter-spacing: .60em;
  text-transform: uppercase;
  color: var(--dim);
  opacity: .60;
  line-height: 1;
  margin-bottom: 2px;
}
.token-panel-holding-amount {
  font-family: var(--fm);
  font-size: 1.0rem;
  letter-spacing: .02em;
  color: var(--br);
  line-height: 1.1;
}
.token-panel-holding-usd {
  font-family: var(--fm);
  font-size: .68rem;
  letter-spacing: .03em;
  color: var(--dim);
  line-height: 1;
}

.token-panel-actions {
  display: flex;
  flex-direction: row;
  gap: var(--sp-4);
  margin-bottom: var(--sp-5);
  flex-shrink: 0;
}

/* ── Mobile bottom nav — 3-tab width fix ────────────── */

/* Ensure 3 tabs distribute correctly */
#mobile-bottom-nav .mobile-nav-item { flex: 1; }