/* ═══════════════════════════════════════════════════════════
   SmartLedger Wallet — UI
   Palette carried over from smartledger.technology; layout new.
   ═══════════════════════════════════════════════════════════ */

:root{
  /* brand */
  --bg:#020604;
  --accent:#00ff9d;
  --accent-2:#6ee7c0;
  --text:#e2e8f0;
  --muted:#a8b7c8;
  --dim:#8da2b6;
  --danger:#ff5a5a;
  --warn:#ffb547;
  --btc:#f7931a;

  /* surfaces — layered greens over near-black */
  --s-1:#060d0a;
  --s-2:#0a1512;
  --s-3:#0f1e19;
  --line:rgba(0,255,157,.10);
  --line-2:rgba(0,255,157,.18);
  --hairline:rgba(226,232,240,.07);

  /* app accents */
  --vg:#00ff9d;
  --tm:#35e0ff;
  --nh:#a78bfa;
  --rg:#ffb547;

  /* type */
  --font:'Plus Jakarta Sans',-apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,sans-serif;
  --mono:'JetBrains Mono',ui-monospace,SFMono-Regular,Menlo,monospace;

  /* shape */
  --r-sm:12px;
  --r:18px;
  --r-lg:26px;
  --r-xl:34px;

  --ease:cubic-bezier(.22,1,.36,1);
  --pad:20px;
}

*{box-sizing:border-box;-webkit-tap-highlight-color:transparent}
[hidden]{display:none !important}
html,body{margin:0;height:100%}
body{
  background:#000;
  color:var(--text);
  font-family:var(--font);
  font-size:15px;
  line-height:1.45;
  -webkit-font-smoothing:antialiased;
  overflow:hidden;
}
button{font:inherit;color:inherit;background:none;border:0;cursor:pointer}
input{font:inherit;color:inherit;background:none;border:0;outline:none;width:100%}
input::placeholder{color:#5b6d7e}
h1,h2,h3,p,ul{margin:0;padding:0}
ul{list-style:none}
svg{width:22px;height:22px;fill:none;stroke:currentColor;stroke-width:1.7;stroke-linecap:round;stroke-linejoin:round;flex:none}
.sprite{display:none}

/* ── stage / device frame ───────────────────────────────── */
.stage{
  height:100%;
  display:grid;
  place-items:center;
  background:
    radial-gradient(900px 620px at 50% -10%,rgba(0,255,157,.10),transparent 62%),
    radial-gradient(700px 520px at 82% 108%,rgba(0,255,157,.06),transparent 60%),
    #000;
}
.device{
  position:relative;
  width:min(430px,100vw);
  height:min(932px,100vh);
  background:var(--bg);
  overflow:hidden;
  display:flex;
  flex-direction:column;
  isolation:isolate;
}
@media (min-width:520px) and (min-height:760px){
  .device{
    border-radius:44px;
    border:1px solid rgba(0,255,157,.14);
    box-shadow:
      0 0 0 10px #04100c,
      0 0 0 11px rgba(0,255,157,.16),
      0 50px 120px -30px rgba(0,255,157,.22),
      0 40px 90px -40px #000;
  }
}

/* ════════════════════ ONBOARDING / AUTH ════════════════════ */
.lock{
  position:absolute;inset:0;z-index:60;
  background:var(--bg);
  transition:opacity .5s var(--ease),transform .5s var(--ease),visibility .5s;
}
.lock.is-out{opacity:0;transform:scale(1.06);visibility:hidden;pointer-events:none}
.lock__aura{
  position:absolute;inset:0;pointer-events:none;
  background:
    radial-gradient(520px 400px at 50% 12%,rgba(0,255,157,.16),transparent 65%),
    radial-gradient(420px 340px at 50% 110%,rgba(0,255,157,.08),transparent 62%);
}
.lock__scroll{
  position:relative;height:100%;
  overflow-y:auto;overscroll-behavior:contain;
  display:flex;align-items:center;justify-content:center;
  scrollbar-width:none;
}
.lock__scroll::-webkit-scrollbar{display:none}
.lock__inner{
  position:relative;width:100%;max-width:372px;
  padding:calc(env(safe-area-inset-top) + 54px) 26px calc(env(safe-area-inset-bottom) + 34px);
}
.lock__back{
  position:absolute;top:calc(env(safe-area-inset-top) + 12px);left:20px;
  width:38px;height:38px;border-radius:12px;
  display:grid;place-items:center;
  border:1px solid var(--line);color:var(--muted);
  transition:.2s;
}
.lock__back:active{background:rgba(0,255,157,.09);color:var(--accent)}

.pane{display:none;flex-direction:column;align-items:center;text-align:center}
.pane.is-on{display:flex;animation:rise .5s var(--ease) both}
.pane .field,.pane .cta{text-align:left;width:100%}

.lock__logo{width:76px;height:76px;border-radius:22px;box-shadow:0 0 44px rgba(0,255,157,.30)}
.lock__logo--sm{width:56px;height:56px;border-radius:17px;margin-bottom:4px}
.lock__title{margin-top:16px;font-size:26px;font-weight:800;letter-spacing:-.7px}
.lock__sub{color:var(--dim);font-size:13.5px;margin-top:3px}
.lock__cta{display:flex;flex-direction:column;gap:11px;width:100%;margin-top:38px}
.lock__alt{margin-top:20px;font-size:13px;color:var(--accent-2);font-weight:600;opacity:.9}
.lock__legal{margin-top:26px;font-size:11px;color:#5f7385;line-height:1.5;max-width:290px}

.step{
  font-size:10px;font-weight:800;letter-spacing:1.6px;text-transform:uppercase;
  color:var(--accent);padding:5px 11px;border-radius:999px;
  background:rgba(0,255,157,.09);border:1px solid var(--line-2);
}
.pane__title{margin-top:14px;font-size:22px;font-weight:800;letter-spacing:-.6px}
.pane__sub{margin-top:7px;font-size:13px;color:var(--dim);line-height:1.5;max-width:310px}
.pane__sub strong{color:var(--accent-2);font-weight:700}
.pane__sub em{font-style:normal;color:var(--muted);font-weight:700}
.pane .field{margin-top:16px;margin-bottom:0}

/* recovery phrase grid */
.seed{
  display:grid;grid-template-columns:1fr 1fr;gap:7px;
  width:100%;margin:20px 0 0;padding:14px;
  border-radius:var(--r-lg);
  background:linear-gradient(165deg,rgba(0,255,157,.06),var(--s-1));
  border:1px solid var(--line);
  counter-reset:w;
}
.seed li{
  counter-increment:w;
  display:flex;align-items:center;gap:8px;
  padding:8px 10px;border-radius:11px;
  background:rgba(2,6,4,.5);
  font-family:var(--mono);font-size:12.5px;font-weight:500;
  text-align:left;
}
.seed li::before{
  content:counter(w);
  font-size:9.5px;color:var(--dim);min-width:13px;
  font-family:var(--font);font-weight:700;
}
.seed__acts{display:flex;gap:9px;margin-top:12px}
.mini{
  display:inline-flex;align-items:center;gap:6px;
  padding:8px 14px;border-radius:999px;
  font-size:12px;font-weight:700;color:var(--muted);
  background:var(--s-1);border:1px solid var(--hairline);
  transition:.18s var(--ease);
}
.mini svg{width:14px;height:14px;color:var(--accent)}
.mini:active{transform:scale(.95);border-color:var(--line-2)}

/* checkbox */
.check{
  display:flex;align-items:center;gap:11px;
  width:100%;margin:20px 0 18px;cursor:pointer;text-align:left;
}
.check input{position:absolute;opacity:0;width:0;height:0}
.check__box{
  width:22px;height:22px;border-radius:7px;flex:none;
  display:grid;place-items:center;
  border:1.5px solid var(--line-2);color:transparent;
  transition:.2s var(--ease);
}
.check__box svg{width:14px;height:14px;stroke-width:2.6}
.check input:checked + .check__box{
  background:var(--accent);border-color:var(--accent);color:#02150e;
  box-shadow:0 0 16px rgba(0,255,157,.5);
}
.check__label{font-size:12.5px;color:var(--muted);line-height:1.4}

/* password meter */
.meter{
  width:100%;height:4px;border-radius:99px;margin-top:16px;
  background:rgba(226,232,240,.08);overflow:hidden;
}
.meter i{
  display:block;height:100%;width:0;border-radius:99px;
  background:var(--danger);
  transition:width .3s var(--ease),background .3s;
}
.meter__note{width:100%;text-align:left;font-size:11px;color:#5f7385;margin-top:7px;line-height:1.4}

/* OTP dots + keypad */
.pin{display:flex;gap:15px;margin-top:30px}
.pin i{
  width:12px;height:12px;border-radius:50%;
  border:1.5px solid rgba(0,255,157,.34);
  transition:all .22s var(--ease);
}
.pin i.on{
  background:var(--accent);border-color:var(--accent);
  box-shadow:0 0 14px rgba(0,255,157,.8);
  transform:scale(1.12);
}
.pin.err{animation:shake .42s}
.pin.err i{border-color:var(--danger);background:transparent;box-shadow:none}
.pin__hint{margin-top:14px;font-size:12.5px;color:var(--dim);min-height:18px;letter-spacing:.2px}
.pin__hint.bad{color:var(--danger)}
.pin__hint.good{color:var(--accent)}

.keypad{margin-top:22px;width:100%;display:grid;grid-template-columns:repeat(3,1fr);gap:11px}
.key{
  height:62px;border-radius:21px;
  background:linear-gradient(180deg,rgba(0,255,157,.055),rgba(0,255,157,.018));
  border:1px solid var(--line);
  display:flex;flex-direction:column;align-items:center;justify-content:center;gap:1px;
  transition:transform .12s var(--ease),background .2s,border-color .2s;
}
.key b{font-size:23px;font-weight:600;letter-spacing:.5px;line-height:1}
.key s{font-size:8.5px;letter-spacing:1.6px;color:var(--dim);text-decoration:none;font-weight:600}
.key--ghost{background:transparent;border-color:transparent;color:var(--muted)}
.key--ghost svg{width:22px;height:22px}
.key:active{transform:scale(.94);background:rgba(0,255,157,.13);border-color:var(--line-2)}
.key--ghost:active{background:rgba(0,255,157,.08)}

/* textarea variant */
.field__box--area{height:auto;padding:12px 14px;align-items:flex-start}
.field__box--area textarea{
  width:100%;border:0;background:none;outline:none;resize:none;
  color:var(--text);font-family:var(--mono);font-size:13.5px;line-height:1.6;
}
.field__box--area textarea::placeholder{color:#5b6d7e;font-family:var(--font)}

.cta.cta--ghost{
  background:rgba(0,255,157,.06);
  border:1px solid var(--line-2);
  color:var(--text);box-shadow:none;
}
.cta.cta--ghost:active{background:rgba(0,255,157,.12)}
.cta[disabled]{opacity:.4;pointer-events:none}
.cta.is-busy{opacity:.6;pointer-events:none}

/* ════════════════════ APP SHELL ════════════════════ */
.app{display:flex;flex-direction:column;height:100%;min-height:0;animation:fade .5s var(--ease) both}

/* ── top bar ── */
.topbar{
  flex:none;
  display:flex;align-items:center;gap:12px;
  padding:calc(env(safe-area-inset-top) + 16px) var(--pad) 12px;
  background:linear-gradient(180deg,var(--bg) 62%,transparent);
  position:relative;z-index:12;
}
.topbar__back{
  width:38px;height:38px;border-radius:12px;
  display:none;place-items:center;
  border:1px solid var(--line);color:var(--muted);
}
.topbar.has-back .topbar__back{display:grid}
.topbar.has-back .avatar{display:none}
.topbar__id{display:flex;align-items:center;gap:11px;min-width:0;flex:1}
.avatar{position:relative;flex:none}
.avatar img{
  width:40px;height:40px;border-radius:13px;display:block;
  border:1px solid rgba(0,255,157,.24);
}
.avatar__dot{
  position:absolute;right:-2px;bottom:-2px;
  width:11px;height:11px;border-radius:50%;
  background:var(--accent);border:2.5px solid var(--bg);
  box-shadow:0 0 9px rgba(0,255,157,.9);
}
.topbar__meta{display:flex;flex-direction:column;min-width:0}
.topbar__eyebrow{font-size:11px;color:var(--dim);letter-spacing:.3px}
.topbar__name{
  font-size:17px;font-weight:700;letter-spacing:-.3px;
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis;
}
.topbar__act{
  width:38px;height:38px;border-radius:12px;
  display:grid;place-items:center;
  border:1px solid var(--line);color:var(--muted);
  transition:.2s;
}
.topbar__act:active{background:rgba(0,255,157,.09);color:var(--accent)}

/* ── views ── */
.views{flex:1;min-height:0;position:relative}
.view{
  position:absolute;inset:0;
  overflow-y:auto;overscroll-behavior:contain;
  padding:4px var(--pad) 118px;
  visibility:hidden;opacity:0;
  transform:translateY(10px) scale(.985);
  transition:opacity .3s var(--ease),transform .34s var(--ease),visibility .34s;
  scrollbar-width:none;
}
.view::-webkit-scrollbar{display:none}
.view.is-active{visibility:visible;opacity:1;transform:none}

/* ════════════════════ HOME ════════════════════ */
.hero{
  position:relative;overflow:hidden;
  border-radius:var(--r-xl);
  padding:26px 22px 22px;
  background:linear-gradient(155deg,rgba(0,255,157,.13),rgba(0,255,157,.035) 46%,rgba(6,13,10,.9));
  border:1px solid var(--line-2);
  box-shadow:0 24px 50px -28px rgba(0,255,157,.4);
}
.hero__glow{
  position:absolute;top:-72px;right:-56px;
  width:220px;height:220px;border-radius:50%;
  background:radial-gradient(circle,rgba(0,255,157,.34),transparent 68%);
  filter:blur(14px);pointer-events:none;
}
.hero__label{font-size:11.5px;letter-spacing:1.5px;text-transform:uppercase;color:var(--accent-2);font-weight:700;opacity:.85}
.hero__amount{display:flex;align-items:baseline;gap:2px;margin-top:8px}
.hero__int{font-size:44px;font-weight:800;letter-spacing:-2px;line-height:1}
.hero__dec{font-size:26px;font-weight:700;color:var(--muted);letter-spacing:-1px}
.hero__cur{font-size:12px;font-weight:700;color:var(--dim);margin-left:7px;letter-spacing:.6px}
.hero__row{display:flex;gap:8px;margin-top:14px;flex-wrap:wrap}
.chip{
  font-size:11.5px;font-weight:600;padding:5px 11px;border-radius:999px;
  background:rgba(2,6,4,.5);border:1px solid var(--line);color:var(--muted);
}
.chip--mono{font-family:var(--mono);font-size:10.5px;letter-spacing:-.2px}
.chip--up{color:var(--accent);border-color:rgba(0,255,157,.3);background:rgba(0,255,157,.08)}

/* 2×2 category tiles */
.tiles{display:grid;grid-template-columns:1fr 1fr;gap:12px;margin-top:14px}
.tile{
  position:relative;overflow:hidden;
  text-align:left;
  padding:17px 15px 15px;
  border-radius:var(--r-lg);
  background:linear-gradient(170deg,var(--s-2),var(--s-1));
  border:1px solid var(--hairline);
  display:flex;flex-direction:column;gap:2px;
  min-height:126px;
  transition:transform .16s var(--ease),border-color .22s;
}
.tile:active{transform:scale(.965)}
.tile__ico{
  width:42px;height:42px;border-radius:14px;
  display:grid;place-items:center;margin-bottom:9px;
  background:rgba(0,255,157,.1);color:var(--accent);
  border:1px solid rgba(0,255,157,.2);
  transition:.25s;
}
.tile__name{font-size:15px;font-weight:700;letter-spacing:-.2px}
.tile__sub{font-size:11.5px;color:var(--dim);line-height:1.3}
.tile__glow{
  position:absolute;top:-46px;right:-46px;width:130px;height:130px;border-radius:50%;
  background:radial-gradient(circle,rgba(0,255,157,.2),transparent 66%);
  opacity:0;transition:opacity .3s;pointer-events:none;
}
.tile:active .tile__glow{opacity:1}
.tile--fin{border-color:rgba(0,255,157,.2)}
.tile--fin .tile__ico{background:rgba(0,255,157,.14);box-shadow:0 0 22px -6px rgba(0,255,157,.6)}
.tile--app .tile__ico{background:rgba(53,224,255,.11);color:var(--tm);border-color:rgba(53,224,255,.24)}
.tile--msg .tile__ico{background:rgba(167,139,250,.12);color:var(--nh);border-color:rgba(167,139,250,.26)}
.tile--not .tile__ico{background:rgba(255,181,71,.12);color:var(--rg);border-color:rgba(255,181,71,.26)}
.badge{
  position:absolute;top:14px;right:14px;
  min-width:21px;height:21px;padding:0 6px;border-radius:999px;
  background:var(--accent);color:#02150e;
  font-size:11px;font-weight:800;
  display:grid;place-items:center;
  box-shadow:0 0 16px rgba(0,255,157,.55);
}

.quick{display:flex;gap:10px;margin-top:14px}
.quick__btn{
  flex:1;height:50px;border-radius:16px;
  display:flex;align-items:center;justify-content:center;gap:7px;
  font-size:13.5px;font-weight:700;
  background:rgba(0,255,157,.055);
  border:1px solid var(--line);
  color:var(--text);
  transition:.18s var(--ease);
}
.quick__btn svg{width:17px;height:17px;color:var(--accent)}
.quick__btn:active{transform:scale(.96);background:rgba(0,255,157,.12)}

/* ════════════════════ FINANCIAL ════════════════════ */
.balance{
  position:relative;overflow:hidden;
  border-radius:var(--r-xl);
  padding:22px 22px 20px;
  background:linear-gradient(158deg,rgba(0,255,157,.15),rgba(0,255,157,.03) 50%,rgba(6,13,10,.94));
  border:1px solid var(--line-2);
  box-shadow:0 26px 54px -30px rgba(0,255,157,.45);
}
.balance__glow{
  position:absolute;top:-90px;left:-40px;width:250px;height:250px;border-radius:50%;
  background:radial-gradient(circle,rgba(0,255,157,.26),transparent 68%);
  filter:blur(18px);pointer-events:none;
}
.balance__top{display:flex;align-items:center;justify-content:space-between;position:relative}
.balance__label{font-size:11.5px;letter-spacing:1.4px;text-transform:uppercase;color:var(--accent-2);font-weight:700;opacity:.85}
.balance__eye{width:32px;height:32px;border-radius:10px;display:grid;place-items:center;color:var(--dim)}
.balance__eye svg{width:18px;height:18px}
.balance__bsv{
  position:relative;
  margin-top:10px;
  font-family:var(--mono);font-size:31px;font-weight:700;letter-spacing:-1.4px;
  text-shadow:0 0 30px rgba(0,255,157,.28);
}
.balance__bsv em{font-style:normal;font-size:15px;color:var(--accent);margin-left:5px;letter-spacing:0}
.balance__fiat{position:relative;font-size:13.5px;color:var(--muted);margin-top:3px}
.balance__spark{position:relative;height:56px;margin:12px -6px 4px;opacity:.95}
.balance__spark svg{width:100%;height:100%;display:block}
.balance__spark .spark__fill{stroke:none}
.balance__spark .spark__line{stroke:var(--accent);stroke-width:2;filter:drop-shadow(0 0 6px rgba(0,255,157,.75))}
.balance__actions{display:flex;gap:9px;margin-top:12px;position:relative}
.pill{
  flex:1;height:48px;border-radius:15px;
  display:flex;align-items:center;justify-content:center;gap:7px;
  font-size:14px;font-weight:700;letter-spacing:-.1px;
  background:rgba(2,6,4,.55);border:1px solid var(--line-2);
  transition:.18s var(--ease);
}
.pill svg{width:17px;height:17px}
.pill:active{transform:scale(.96)}
.pill--primary{
  background:linear-gradient(180deg,var(--accent),#00d886);
  color:#02150e;border-color:transparent;
  box-shadow:0 12px 26px -12px rgba(0,255,157,.9);
}
.pill--icon{flex:none;width:48px}

.section{margin-top:26px}
.section__head{display:flex;align-items:center;justify-content:space-between;margin-bottom:10px}
.section__head--flush{margin-top:6px}
.section__head h2{font-size:16px;font-weight:700;letter-spacing:-.3px}
.link{font-size:12.5px;font-weight:600;color:var(--accent-2)}
.eyebrow{font-size:11px;letter-spacing:1.5px;text-transform:uppercase;color:var(--dim);font-weight:700;margin:18px 0 10px}

/* transactions */
.txs{display:flex;flex-direction:column;gap:8px}
.tx{
  display:flex;align-items:center;gap:12px;
  padding:12px 14px;border-radius:var(--r);
  background:var(--s-1);border:1px solid var(--hairline);
  transition:.18s var(--ease);
}
.tx:active{transform:scale(.985);background:var(--s-2)}
.tx__ico{
  width:38px;height:38px;border-radius:12px;flex:none;
  display:grid;place-items:center;
}
.tx__ico svg{width:18px;height:18px}
.tx--in .tx__ico{background:rgba(0,255,157,.12);color:var(--accent)}
.tx--out .tx__ico{background:rgba(226,232,240,.07);color:var(--muted)}
.tx__body{flex:1;min-width:0}
.tx__who,.tx__meta,.tx__fiat,.tx__bsv{display:block}
.tx__who{font-size:14px;font-weight:600;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.tx__meta{font-size:11.5px;color:var(--dim);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.tx__amt{text-align:right;flex:none}
.tx__fiat{font-family:var(--mono);font-size:14px;font-weight:700;letter-spacing:-.4px}
.tx--in .tx__fiat{color:var(--accent)}
.tx__bsv{font-family:var(--mono);font-size:10px;color:var(--dim);letter-spacing:-.2px}

/* ════════════════════ APPS ════════════════════ */
.search{
  display:flex;align-items:center;gap:10px;
  height:46px;padding:0 14px;border-radius:15px;
  background:var(--s-1);border:1px solid var(--hairline);
}
.search svg{width:18px;height:18px;color:var(--dim)}
.search input{font-size:14px}

.apps{display:grid;grid-template-columns:1fr 1fr;gap:12px}
.appc{
  position:relative;overflow:hidden;text-align:left;
  padding:16px 15px;border-radius:var(--r-lg);
  background:linear-gradient(170deg,var(--s-2),var(--s-1));
  border:1px solid var(--hairline);
  display:flex;flex-direction:column;
  min-height:168px;
  transition:transform .16s var(--ease),border-color .22s;
}
.appc:active{transform:scale(.965)}
.appc__wash{
  position:absolute;top:-58px;right:-58px;width:150px;height:150px;border-radius:50%;
  background:radial-gradient(circle,var(--c),transparent 68%);
  opacity:.16;pointer-events:none;
}
.appc__ico{
  width:46px;height:46px;border-radius:15px;
  display:grid;place-items:center;
  background:color-mix(in srgb,var(--c) 13%,transparent);
  border:1px solid color-mix(in srgb,var(--c) 28%,transparent);
  color:var(--c);
  box-shadow:0 0 26px -10px var(--c);
}
.appc__ico svg{width:23px;height:23px}
.appc__name{margin-top:12px;font-size:14.5px;font-weight:700;letter-spacing:-.3px}
.appc__desc{margin-top:3px;font-size:11.5px;color:var(--dim);line-height:1.36;flex:1}
.appc__tag{
  align-self:flex-start;margin-top:10px;
  font-size:9.5px;font-weight:800;letter-spacing:.8px;text-transform:uppercase;
  padding:4px 9px;border-radius:999px;
  background:color-mix(in srgb,var(--c) 12%,transparent);
  color:var(--c);
  border:1px solid color-mix(in srgb,var(--c) 24%,transparent);
}

.promo{
  display:flex;align-items:center;gap:13px;
  margin-top:14px;padding:15px;border-radius:var(--r-lg);
  background:linear-gradient(120deg,rgba(0,255,157,.07),transparent);
  border:1px dashed var(--line-2);
}
.promo__ico{
  width:40px;height:40px;border-radius:13px;flex:none;
  display:grid;place-items:center;
  background:rgba(0,255,157,.1);color:var(--accent);
}
.promo strong{display:block;font-size:13.5px;font-weight:700}
.promo p{font-size:11.5px;color:var(--dim);line-height:1.35;margin-top:2px}
.promo__chev{width:18px;height:18px;color:var(--dim);flex:none}

/* ════════════════════ MESSAGES ════════════════════ */
.segmented{
  display:flex;gap:4px;padding:4px;border-radius:14px;
  background:var(--s-1);border:1px solid var(--hairline);
  margin-bottom:14px;
}
.seg{
  flex:1;height:34px;border-radius:10px;
  font-size:12.5px;font-weight:700;color:var(--dim);
  transition:.2s var(--ease);
}
.seg.is-on{background:rgba(0,255,157,.13);color:var(--accent);box-shadow:inset 0 0 0 1px rgba(0,255,157,.2)}

.threads{display:flex;flex-direction:column;gap:8px}
.thread{
  display:flex;align-items:center;gap:12px;
  padding:12px 14px;border-radius:var(--r);
  background:var(--s-1);border:1px solid var(--hairline);
  transition:.18s var(--ease);
}
.thread:active{transform:scale(.985);background:var(--s-2)}
.thread.is-unread{background:linear-gradient(100deg,rgba(0,255,157,.06),var(--s-1));border-color:var(--line)}
.thread__av{
  width:42px;height:42px;border-radius:14px;flex:none;
  display:grid;place-items:center;
  font-size:15px;font-weight:800;letter-spacing:-.4px;
  background:var(--s-3);color:var(--accent-2);
  border:1px solid var(--hairline);
}
.thread__body{flex:1;min-width:0}
.thread__name,.thread__time,.thread__prev{display:block}
.thread__top{display:flex;align-items:baseline;justify-content:space-between;gap:8px}
.thread__name{font-size:14px;font-weight:700;letter-spacing:-.2px}
.thread__time{font-size:10.5px;color:var(--dim);flex:none}
.thread__prev{
  font-size:12px;color:var(--dim);margin-top:1px;
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis;
}
.thread.is-unread .thread__prev{color:var(--muted)}
.thread__pip{width:8px;height:8px;border-radius:50%;background:var(--accent);flex:none;box-shadow:0 0 10px rgba(0,255,157,.8)}

/* ════════════════════ NOTIFICATIONS ════════════════════ */
.notes{display:flex;flex-direction:column;gap:8px}
.note{
  display:flex;gap:12px;
  padding:13px 14px;border-radius:var(--r);
  background:var(--s-1);border:1px solid var(--hairline);
}
.note.is-new{background:linear-gradient(100deg,rgba(0,255,157,.06),var(--s-1));border-color:var(--line)}
.note__ico{
  width:36px;height:36px;border-radius:12px;flex:none;
  display:grid;place-items:center;
  background:color-mix(in srgb,var(--c,#00ff9d) 12%,transparent);
  color:var(--c,#00ff9d);
  border:1px solid color-mix(in srgb,var(--c,#00ff9d) 24%,transparent);
}
.note__ico svg{width:17px;height:17px}
.note__body{flex:1;min-width:0}
.note__title,.note__text,.note__time{display:block}
.note__title{font-size:13.5px;font-weight:700;letter-spacing:-.2px}
.note__text{font-size:12px;color:var(--dim);line-height:1.4;margin-top:2px}
.note__time{font-size:10.5px;color:#5f7385;margin-top:5px;letter-spacing:.2px}

/* ════════════════════ TAB BAR ════════════════════ */
.tabbar{
  position:absolute;left:0;right:0;bottom:0;z-index:14;
  display:grid;grid-template-columns:repeat(5,1fr);
  gap:2px;
  padding:9px 8px calc(env(safe-area-inset-bottom) + 11px);
  background:rgba(4,10,8,.82);
  backdrop-filter:blur(24px) saturate(160%);
  -webkit-backdrop-filter:blur(24px) saturate(160%);
  border-top:1px solid var(--line);
}
.tab{
  position:relative;
  display:flex;flex-direction:column;align-items:center;gap:4px;
  padding:7px 2px 5px;border-radius:14px;
  color:#63788a;
  transition:color .22s var(--ease);
}
.tab svg{width:21px;height:21px;transition:transform .24s var(--ease)}
.tab span{font-size:9.5px;font-weight:700;letter-spacing:.1px}
.tab.is-on{color:var(--accent)}
.tab.is-on svg{transform:translateY(-1px);filter:drop-shadow(0 0 8px rgba(0,255,157,.6))}
.tab__dot{
  position:absolute;top:5px;right:calc(50% - 16px);
  width:7px;height:7px;border-radius:50%;background:var(--accent);
  box-shadow:0 0 8px rgba(0,255,157,.9);
}
.tab.is-on .tab__dot{display:none}

/* ════════════════════ SHEETS ════════════════════ */
.scrim{
  position:absolute;inset:0;z-index:70;
  background:rgba(1,4,3,.72);
  backdrop-filter:blur(3px);
  opacity:0;visibility:hidden;
  transition:opacity .32s var(--ease),visibility .32s;
}
.scrim.is-on{opacity:1;visibility:visible}
.sheet{
  position:absolute;left:0;right:0;bottom:0;z-index:80;
  max-height:92%;
  display:flex;flex-direction:column;
  border-radius:var(--r-xl) var(--r-xl) 0 0;
  background:linear-gradient(180deg,#0b1713,#050e0b 42%);
  border:1px solid var(--line-2);border-bottom:0;
  box-shadow:0 -30px 70px -30px rgba(0,255,157,.3),0 -10px 40px rgba(0,0,0,.8);
  transform:translateY(102%);
  visibility:hidden;
  transition:transform .42s var(--ease),visibility .42s;
}
.sheet.is-on{transform:none;visibility:visible}
.sheet__grab{
  width:40px;height:4px;border-radius:99px;
  background:rgba(226,232,240,.18);
  margin:11px auto 0;flex:none;
}
.sheet__head{
  flex:none;
  display:flex;align-items:center;justify-content:space-between;
  padding:12px var(--pad) 6px;
}
.sheet__head h3{font-size:18px;font-weight:700;letter-spacing:-.4px}
.sheet__x{
  width:34px;height:34px;border-radius:11px;display:grid;place-items:center;
  background:rgba(226,232,240,.06);color:var(--muted);
}
.sheet__x svg{width:18px;height:18px}
.sheet__body{
  overflow-y:auto;
  padding:12px var(--pad) calc(env(safe-area-inset-bottom) + 24px);
  scrollbar-width:none;
}
.sheet__body::-webkit-scrollbar{display:none}
.sheet__body--center{display:flex;flex-direction:column;align-items:center;text-align:center}

/* fields */
.field{display:block;margin-bottom:14px}
.field__label{display:block;font-size:11px;letter-spacing:1.2px;text-transform:uppercase;color:var(--dim);font-weight:700;margin-bottom:7px}
.field__label em{font-style:normal;color:#57697a;letter-spacing:.4px;text-transform:none;font-size:10.5px}
.field__box{
  display:flex;align-items:center;gap:10px;
  height:52px;padding:0 14px;border-radius:15px;
  background:var(--s-1);border:1px solid var(--hairline);
  transition:border-color .2s;
}
.field__box:focus-within{border-color:var(--line-2);box-shadow:0 0 0 3px rgba(0,255,157,.07)}
.field__box input{font-size:15px;font-weight:600}
.field__act{width:34px;height:34px;border-radius:10px;display:grid;place-items:center;color:var(--accent);background:rgba(0,255,157,.09);flex:none}
.field__act svg{width:17px;height:17px}

.amount{text-align:center;padding:14px 0 6px}
.amount__val{display:flex;align-items:center;justify-content:center;gap:3px}
.amount__cur{font-size:26px;font-weight:700;color:var(--muted);align-self:flex-start;margin-top:8px}
.amount__val span:nth-child(2){font-size:54px;font-weight:800;letter-spacing:-2.4px;line-height:1}
.amount__caret{width:2.5px;height:44px;background:var(--accent);border-radius:2px;animation:blink 1.1s steps(1) infinite;box-shadow:0 0 10px rgba(0,255,157,.9)}
.amount__swap{
  display:inline-flex;align-items:center;gap:6px;margin-top:12px;
  font-family:var(--mono);font-size:12px;font-weight:500;color:var(--accent-2);
  padding:6px 12px;border-radius:999px;background:rgba(0,255,157,.07);border:1px solid var(--line);
}
.amount__swap svg{width:14px;height:14px}

.presets{display:grid;grid-template-columns:repeat(4,1fr);gap:8px;margin:14px 0 18px}
.preset{
  height:42px;border-radius:13px;
  font-size:13.5px;font-weight:700;
  background:var(--s-1);border:1px solid var(--hairline);color:var(--muted);
  transition:.18s var(--ease);
}
.preset.is-on{background:rgba(0,255,157,.12);border-color:var(--line-2);color:var(--accent)}
.preset:active{transform:scale(.95)}

.feeline{
  display:flex;align-items:center;justify-content:space-between;
  padding:13px 15px;border-radius:14px;
  background:rgba(0,255,157,.04);border:1px solid var(--line);
  font-size:12.5px;color:var(--dim);margin-bottom:16px;
}
.feeline b{font-family:var(--mono);font-size:11.5px;color:var(--muted);font-weight:500}

.cta{
  width:100%;height:56px;border-radius:18px;
  font-size:15.5px;font-weight:800;letter-spacing:-.2px;
  background:linear-gradient(180deg,var(--accent),#00d886);
  color:#02150e;
  box-shadow:0 16px 34px -14px rgba(0,255,157,.85);
  transition:.18s var(--ease);
}
.cta:active{transform:scale(.975);box-shadow:0 8px 20px -12px rgba(0,255,157,.8)}

/* receive */
.qr{position:relative;margin:6px 0 16px}
.qr__frame{
  width:214px;height:214px;padding:14px;border-radius:24px;
  background:#fff;
  box-shadow:0 0 50px -8px rgba(0,255,157,.45);
  display:grid;
}
.qr__frame svg{width:100%;height:100%;display:block;border-radius:6px}
.qr__logo{
  position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);
  width:46px;height:46px;border-radius:13px;
  border:3.5px solid #fff;
}
.handle{font-size:21px;font-weight:800;letter-spacing:-.5px}
.addr{
  font-family:var(--mono);font-size:11px;color:var(--dim);
  margin-top:5px;word-break:break-all;max-width:270px;line-height:1.5;
}
.recv-actions{display:flex;gap:9px;width:100%;margin-top:18px}
.fineprint{font-size:11px;color:#5f7385;margin-top:16px;max-width:250px;line-height:1.45}

/* scanner */
.scanner{
  position:relative;width:230px;height:230px;margin:10px 0 6px;
  border-radius:26px;
  background:radial-gradient(circle at 50% 50%,rgba(0,255,157,.05),transparent 70%),#040c09;
  border:1px solid var(--hairline);overflow:hidden;
}
.scanner__c{position:absolute;width:38px;height:38px;border:3px solid var(--accent);box-shadow:0 0 14px rgba(0,255,157,.5)}
.scanner__c--tl{top:20px;left:20px;border-right:0;border-bottom:0;border-radius:12px 0 0 0}
.scanner__c--tr{top:20px;right:20px;border-left:0;border-bottom:0;border-radius:0 12px 0 0}
.scanner__c--bl{bottom:20px;left:20px;border-right:0;border-top:0;border-radius:0 0 0 12px}
.scanner__c--br{bottom:20px;right:20px;border-left:0;border-top:0;border-radius:0 0 12px 0}
.scanner__beam{
  position:absolute;left:16px;right:16px;height:2px;
  background:linear-gradient(90deg,transparent,var(--accent),transparent);
  box-shadow:0 0 16px rgba(0,255,157,.9);
  animation:beam 2.4s ease-in-out infinite;
}

/* app sheet */
.appcard{
  display:flex;align-items:center;gap:14px;
  padding:16px;border-radius:var(--r-lg);
  background:linear-gradient(150deg,color-mix(in srgb,var(--c,#00ff9d) 12%,transparent),var(--s-1));
  border:1px solid color-mix(in srgb,var(--c,#00ff9d) 22%,transparent);
  margin-bottom:16px;
}
.appcard__ico{
  width:56px;height:56px;border-radius:18px;flex:none;
  display:grid;place-items:center;
  background:color-mix(in srgb,var(--c) 15%,transparent);
  border:1px solid color-mix(in srgb,var(--c) 30%,transparent);
  color:var(--c);
  box-shadow:0 0 30px -10px var(--c);
}
.appcard__ico svg{width:27px;height:27px}
.appcard h4{margin:0;font-size:16.5px;font-weight:700;letter-spacing:-.3px}
.appcard p{font-size:12px;color:var(--dim);line-height:1.4;margin-top:3px}
.feats{display:flex;flex-direction:column;gap:9px;margin-bottom:20px}
.feat{display:flex;align-items:flex-start;gap:11px;font-size:13px;color:var(--muted);line-height:1.4}
.feat svg{width:17px;height:17px;color:var(--accent);margin-top:2px}

/* toast */
.toast{
  position:absolute;left:50%;bottom:110px;z-index:120;
  transform:translate(-50%,16px);
  padding:11px 18px;border-radius:999px;
  background:rgba(10,23,19,.95);
  border:1px solid var(--line-2);
  backdrop-filter:blur(14px);
  font-size:12.5px;font-weight:600;white-space:nowrap;
  box-shadow:0 12px 32px -12px rgba(0,255,157,.5);
  opacity:0;visibility:hidden;pointer-events:none;
  transition:opacity .28s var(--ease),transform .28s var(--ease),visibility .28s;
}
.toast.is-on{opacity:1;visibility:visible;transform:translate(-50%,0)}

/* ── animation ── */
@keyframes rise{from{opacity:0;transform:translateY(18px)}to{opacity:1;transform:none}}
@keyframes fade{from{opacity:0}to{opacity:1}}
@keyframes blink{0%,49%{opacity:1}50%,100%{opacity:0}}
@keyframes shake{10%,90%{transform:translateX(-2px)}20%,80%{transform:translateX(4px)}30%,50%,70%{transform:translateX(-7px)}40%,60%{transform:translateX(7px)}}
@keyframes beam{0%,100%{top:22px}50%{top:206px}}
.stagger{animation:rise .44s var(--ease) both}

@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{animation-duration:.01ms !important;animation-iteration-count:1 !important;transition-duration:.01ms !important}
}