/* ============================================================
   Recall — extension popup (360×600)
   Design tokens lifted from the Reva design file.
   ============================================================ */
:root{
  --bg:#F4F1ED; --card:#FFFFFF; --card2:#F8F5F1; --text:#171512; --muted:#8A857D;
  --line:#EFEBE4; --icon:#6E6A64; --tint:#FFF6EF; --tint2:#FFEAD7;
  --ac:#FF5E1A; --ac2:#FF8A34; --up:#12A150; --down:#E5484D;
}
[data-theme="dark"]{
  --bg:#0B0B0E; --card:#16161B; --card2:#1E1E25; --text:#F3F2F0; --muted:#8E8A82;
  --line:#2A2A31; --icon:#B6B1A9; --tint:#251C15; --tint2:#2E1F12;
  --up:#3DD68C; --down:#FF6369;
}
*{box-sizing:border-box;margin:0;padding:0;-webkit-tap-highlight-color:transparent}
html,body{width:360px;height:600px;overflow:hidden}
body{background:var(--bg);color:var(--text);
  font-family:-apple-system,'SF Pro Text',system-ui,'Segoe UI',BlinkMacSystemFont,sans-serif;
  font-size:14px;-webkit-font-smoothing:antialiased;display:flex;flex-direction:column}
button{font:inherit;color:inherit;background:none;border:none;cursor:pointer}
input,textarea,select{font:inherit;color:inherit}
::-webkit-scrollbar{width:0;height:0}
.hide{display:none!important}
.mono{font-family:ui-monospace,SFMono-Regular,Menlo,monospace}
.dsp{font-family:'Space Grotesk','SF Pro Display',system-ui,sans-serif;font-weight:700;letter-spacing:-.02em}

/* ---------- top bar ---------- */
.top{display:flex;align-items:center;gap:8px;padding:12px 14px;flex:none}
.acct{display:flex;align-items:center;gap:8px;background:var(--card);border:1px solid var(--line);
  border-radius:99px;padding:5px 11px 5px 5px;transition:.14s;min-width:0}
.acct:hover{border-color:var(--ac)}
.acct .av{width:26px;height:26px;border-radius:50%;background:linear-gradient(150deg,var(--ac2),var(--ac));flex:none}
.acct b{font-size:13.5px;font-weight:600;max-width:120px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.acct svg{width:13px;height:13px;color:var(--muted);flex:none}
.chip-net{display:flex;align-items:center;gap:6px;background:var(--card2);color:var(--muted);
  border-radius:99px;padding:6px 10px;font-size:11.5px;font-weight:700;margin-left:auto;flex:none}
.chip-net i{background:var(--muted)}
.chip-conn{display:flex;align-items:center;gap:6px;background:rgba(18,161,80,.12);color:var(--up);
  border-radius:99px;padding:6px 11px;font-size:12px;font-weight:700;flex:none;margin-left:auto}
.chip-conn i{width:6px;height:6px;border-radius:50%;background:currentColor;display:block}
.chip-net i{width:6px;height:6px;border-radius:50%;background:currentColor;display:block}
.iconbtn{width:32px;height:32px;border-radius:10px;background:var(--card);border:1px solid var(--line);
  display:grid;place-items:center;color:var(--icon);flex:none;transition:.14s}
.iconbtn:hover{color:var(--text);border-color:var(--ac)}
.iconbtn svg{width:16px;height:16px}

/* ---------- screens ---------- */
.screen{flex:1;min-height:0;overflow-y:auto;padding:0 14px 14px}
.shead{display:flex;align-items:center;gap:8px;padding:2px 0 14px;flex:none}
.shead .back{width:30px;height:30px;border-radius:9px;background:var(--card);border:1px solid var(--line);
  display:grid;place-items:center;color:var(--icon)}
.shead .back svg{width:16px;height:16px}
.shead h2{flex:1;text-align:center;font-size:16px;font-weight:700;font-family:'Space Grotesk',system-ui,sans-serif;letter-spacing:-.02em}
.shead .sp{width:30px;flex:none}

/* ---------- balance + actions ---------- */
.bal-wrap{text-align:center;padding:6px 0 16px}
.bal-lbl{font-size:12.5px;color:var(--muted);font-weight:500}
.bal{font-family:'Space Grotesk','SF Pro Display',system-ui,sans-serif;font-weight:700;
  font-size:38px;letter-spacing:-.03em;line-height:1.1;margin-top:3px}
.bal .c{color:#C7C2B8;font-size:24px}
.bal-sub{font-size:13px;font-weight:600;color:var(--up);margin-top:4px}
.bal-sub.flat{color:var(--muted)}

.acts{display:grid;grid-template-columns:repeat(4,1fr);gap:8px;margin-bottom:14px}
.acts button{display:flex;flex-direction:column;align-items:center;gap:6px}
.acts .sq{width:100%;height:58px;border-radius:15px;background:var(--card);border:1px solid var(--line);
  display:grid;place-items:center;color:var(--ac);transition:.14s}
.acts button:hover .sq{border-color:var(--ac)}
.acts .sq svg{width:19px;height:19px}
.acts span{font-size:11.5px;font-weight:600;color:var(--muted)}
.acts button.pri .sq{background:linear-gradient(160deg,var(--ac2),var(--ac));border-color:transparent;color:#fff;
  box-shadow:0 8px 18px -6px rgba(255,94,26,.6)}
.acts button.pri span{color:var(--text)}

/* ---------- cards + rows ---------- */
.card{background:var(--card);border:1px solid var(--line);border-radius:18px;overflow:hidden}
.row{display:flex;align-items:center;gap:11px;padding:12px 13px;border-top:1px solid var(--line);transition:.13s}
.row:first-child{border-top:none}
.row.click{cursor:pointer}
.row.click:hover{background:var(--card2)}
.ic{width:38px;height:38px;border-radius:50%;display:grid;place-items:center;font-weight:800;
  font-size:14px;color:#fff;flex:none}
.ic.sq{border-radius:12px}
.row .m{flex:1;min-width:0}
.row .m b{display:block;font-size:14px;font-weight:600;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.row .m small{font-size:12px;color:var(--muted);display:block}
.row .m small .up{color:var(--up)} .row .m small .dn{color:var(--down)}
.row .r{text-align:right;white-space:nowrap}
.row .r b{display:block;font-size:14px;font-weight:600}
.row .r small{font-size:12px;color:var(--muted)}

.empty{text-align:center;padding:34px 18px;color:var(--muted);font-size:12.5px;line-height:1.6}
.empty b{display:block;color:var(--text);font-size:14px;margin-bottom:5px}
.lbl-sec{font-size:11px;font-weight:700;letter-spacing:.08em;text-transform:uppercase;
  color:var(--muted);margin:16px 4px 8px}

/* ---------- buttons ---------- */
/* One primary button everywhere: flat orange, tall, fully rounded, no gradient
   and no shadow. `pri` and `dark` were two different heavy CTAs (a glowing
   gradient and a black bar); both now resolve to this single shape so the
   Continue/Send/Confirm buttons read the same on every screen. */
.btn{display:flex;align-items:center;justify-content:center;gap:8px;width:100%;height:56px;
  border-radius:999px;font-size:16px;font-weight:600;letter-spacing:-.01em;transition:.16s}
.btn.pri,.btn.dark{background:var(--ac);color:#fff;box-shadow:none}
.btn.pri:hover,.btn.dark:hover{background:var(--purple-strong,#F2652F);opacity:1}
.btn.pri:active,.btn.dark:active{transform:scale(.99)}
.btn.sec{background:var(--card);border:1px solid var(--line)}
.btn.sec:hover{border-color:var(--ac)}
.btn.ghost{background:var(--card2)}
.btn:disabled{opacity:.4;pointer-events:none;box-shadow:none}
.btn svg{width:18px;height:18px}
.btn-row{display:grid;grid-template-columns:1fr 1fr;gap:9px}

/* ---------- send ---------- */
.amt-big{text-align:center;padding:10px 0 4px}
.amt-big .lbl{font-size:12.5px;color:var(--muted);font-weight:500;margin-bottom:2px}
.amt-in{display:flex;align-items:baseline;justify-content:center;gap:8px}
.amt-in input{border:none;background:none;outline:none;width:150px;text-align:right;
  font-family:'Space Grotesk',system-ui,sans-serif;font-weight:700;font-size:40px;letter-spacing:-.03em}
.amt-in span{font-family:'Space Grotesk',system-ui,sans-serif;font-weight:700;font-size:22px;color:var(--muted)}
.amt-conv{font-size:12.5px;color:var(--muted);margin-top:4px}
.field{margin-bottom:10px}
.field label{display:block;font-size:12px;font-weight:600;color:var(--muted);margin-bottom:6px}
.inp{width:100%;height:46px;background:var(--card);border:1px solid var(--line);border-radius:14px;
  padding:0 13px;font-size:14px;outline:none;transition:.14s}
.inp:focus{border-color:var(--ac)}
.inp::placeholder{color:var(--muted)}
textarea.inp{height:84px;padding:12px 13px;resize:none;line-height:1.55}
.kv{display:flex;justify-content:space-between;gap:10px;padding:11px 13px;font-size:13px;border-top:1px solid var(--line)}
.kv:first-child{border-top:none}
.kv .k{color:var(--muted)}
.kv .v{font-weight:600;text-align:right;min-width:0;overflow:hidden;text-overflow:ellipsis}

.rev{display:flex;align-items:center;gap:11px;background:linear-gradient(135deg,var(--ac2),var(--ac));
  border-radius:15px;padding:12px 13px;color:#fff;width:100%;text-align:left;margin:12px 0;
  box-shadow:0 12px 24px -12px rgba(255,94,26,.65);transition:.2s}
.rev.off{background:var(--card2);color:var(--muted);box-shadow:none}
.rev.na{opacity:.5;pointer-events:none}
.rev .ic2{width:34px;height:34px;border-radius:11px;background:rgba(255,255,255,.22);display:grid;place-items:center;flex:none}
.rev.off .ic2{background:var(--line)}
.rev .ic2 svg{width:17px;height:17px}
.rev .t{flex:1;min-width:0}
.rev .t b{display:block;font-size:13.5px;font-weight:700}
.rev .t small{font-size:11.5px;opacity:.88}
.sw{width:44px;height:26px;border-radius:99px;background:rgba(255,255,255,.32);position:relative;flex:none;transition:.2s}
.rev.off .sw{background:var(--line)}
.sw::after{content:'';position:absolute;top:3px;left:3px;width:20px;height:20px;border-radius:50%;
  background:#fff;transition:.2s;box-shadow:0 1px 3px rgba(0,0,0,.25)}
.rev:not(.off) .sw::after{left:21px}
.foot-note{font-size:11.5px;color:var(--muted);text-align:center;margin-top:10px;line-height:1.5}

/* asset picker */
.pick{display:flex;align-items:center;gap:11px;padding:10px 12px;border-radius:14px;width:100%;
  border:1.5px solid var(--line);background:var(--card);margin-bottom:7px;text-align:left;transition:.14s}
.pick:hover{border-color:var(--ac)}
.pick.on{border-color:var(--ac);background:var(--tint)}
.pick .m{flex:1;min-width:0}
.pick .m b{display:block;font-size:14px;font-weight:600}
.pick .m small{font-size:11.5px;color:var(--muted)}
.pick .r{font-size:13px;font-weight:600}

/* receive */
.qr-card{background:#fff;border-radius:18px;padding:18px;text-align:center;border:1px solid var(--line)}
.qr-card canvas,.qr-card svg{width:180px;height:180px;image-rendering:pixelated}
.qr-lbl{font-size:12px;color:#8A857D;margin-top:12px}
.qr-addr{font-size:13px;font-weight:700;color:#171512;margin-top:2px;word-break:break-all;
  font-family:ui-monospace,Menlo,monospace;line-height:1.5}
.asset-pill{display:flex;align-items:center;gap:9px;background:var(--card);border:1px solid var(--line);
  border-radius:99px;padding:7px 13px 7px 7px;margin:0 auto 14px;font-size:14px;font-weight:600}
.asset-pill .ic{width:28px;height:28px;font-size:12px}

/* activity filters */
.filters{display:flex;gap:6px;margin-bottom:12px;overflow-x:auto;padding-bottom:2px}
.filters button{flex:none;padding:7px 13px;border-radius:99px;font-size:12.5px;font-weight:600;
  background:var(--card);border:1px solid var(--line);color:var(--muted);transition:.14s}
.filters button.on{background:var(--ac);border-color:var(--ac);color:#fff}

.pend{background:linear-gradient(135deg,var(--tint),var(--tint2));border:1px solid rgba(255,94,26,.22);
  border-radius:16px;padding:12px;margin-bottom:10px}
.pend .top2{display:flex;align-items:flex-start;gap:10px}
.pend .top2 .ic{width:34px;height:34px;border-radius:11px;background:var(--card);color:var(--ac)}
.pend .top2 .ic svg{width:16px;height:16px}
.pend .top2 .m{flex:1;min-width:0}
.pend .top2 .m b{font-size:13.5px;font-weight:700;display:block}
.pend .top2 .m small{font-size:11.5px;color:var(--muted)}
.pend .top2 .r{text-align:right;white-space:nowrap}
.pend .top2 .r b{font-size:13.5px;display:block}
.pend .top2 .r small{font-size:11.5px;color:var(--muted)}
.pend .btns{display:grid;grid-template-columns:1fr 1fr;gap:8px;margin-top:11px}
.pend .btns button{height:38px;border-radius:11px;font-size:12.5px;font-weight:700;background:var(--card);transition:.14s}
.pend .btns .c{color:var(--ac);border:1px solid rgba(255,94,26,.28)}
.pend .btns .c:hover{background:var(--ac);color:#fff}
.pend .btns .s{color:var(--text);border:1px solid var(--line)}

/* onboarding */
.ob{padding:6px 4px}
.ob .mark{width:56px;height:56px;border-radius:17px;margin:10px auto 14px;
  background:linear-gradient(150deg,var(--ac2),var(--ac));display:grid;place-items:center;
  box-shadow:0 10px 22px -8px rgba(255,94,26,.6)}
.ob .mark svg{width:30px;height:30px;color:#fff}
.ob h1{font-family:'Space Grotesk',system-ui,sans-serif;font-size:21px;font-weight:700;
  letter-spacing:-.02em;text-align:center;margin-bottom:5px}
.ob p.lead{font-size:13px;color:var(--muted);text-align:center;line-height:1.5;margin-bottom:18px}
.tabs2{display:flex;gap:4px;background:var(--card2);padding:4px;border-radius:99px;margin-bottom:14px}
.tabs2 button{flex:1;height:34px;border-radius:99px;font-size:12.5px;font-weight:700;color:var(--muted)}
.tabs2 button.on{background:var(--ac);color:#fff}
.pgrid{display:grid;grid-template-columns:repeat(3,1fr);gap:6px;transition:filter .3s}
.phrase{position:relative;margin-bottom:12px}
.phrase.locked .pgrid{filter:blur(6px);pointer-events:none;user-select:none}
.pw{display:flex;align-items:center;gap:5px;background:var(--card);border:1px solid var(--line);
  border-radius:9px;padding:8px 7px;font-size:11.5px;font-weight:600}
.pw i{font-style:normal;color:var(--muted);font-size:10px;min-width:11px}
.reveal{position:absolute;inset:0;display:grid;place-items:center;gap:6px;cursor:pointer;color:var(--text)}
.phrase:not(.locked) .reveal{display:none}
.reveal svg{width:26px;height:26px}
.reveal span{font-size:12px;font-weight:700}
.check{display:flex;align-items:center;gap:10px;margin-bottom:12px;cursor:pointer;font-size:13px;font-weight:600}
.check .box{width:22px;height:22px;border-radius:7px;border:2px solid var(--line);flex:none;
  display:grid;place-items:center;color:transparent;transition:.14s}
.check .box svg{width:12px;height:12px}
.check.on .box{background:var(--ac);border-color:var(--ac);color:#fff}
.warn{display:flex;gap:9px;background:var(--tint);border:1px solid var(--tint2);border-radius:13px;
  padding:11px 12px;font-size:11.5px;line-height:1.5;margin-bottom:12px}
.warn svg{width:15px;height:15px;flex:none;color:var(--ac);margin-top:1px}
.err{font-size:11.5px;color:var(--down);margin:-4px 0 8px;min-height:14px}

/* toast / overlay */
.toast{position:fixed;left:14px;right:14px;top:12px;background:var(--text);color:var(--card);
  padding:11px 14px;border-radius:13px;font-size:12.5px;font-weight:600;z-index:60;
  opacity:0;transform:translateY(-10px);pointer-events:none;transition:.22s;text-align:center}
.toast.on{opacity:1;transform:translateY(0)}
.toast.bad{background:var(--down);color:#fff}
.fx{position:fixed;inset:0;background:color-mix(in srgb,var(--bg) 93%,transparent);backdrop-filter:blur(5px);
  z-index:70;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:13px;
  opacity:0;pointer-events:none;transition:.2s;text-align:center;padding:0 26px}
.fx.on{opacity:1;pointer-events:auto}
.ring{width:44px;height:44px;border-radius:50%;border:3px solid var(--line);border-top-color:var(--ac);
  animation:spin .8s linear infinite}
@keyframes spin{to{transform:rotate(360deg)}}
.fx b{font-size:14px}.fx small{font-size:12px;color:var(--muted)}

/* asset row change % */
.row .m small .up{color:var(--up);font-weight:600}
.row .m small .dn{color:var(--down);font-weight:600}
/* subtle footer links */
.footlinks{display:flex;gap:8px;margin-top:12px}
.footlinks button{flex:1;display:flex;align-items:center;justify-content:center;gap:6px;height:40px;
  border-radius:12px;background:var(--card);border:1px solid var(--line);font-size:12.5px;
  font-weight:600;color:var(--muted);transition:.14s}
.footlinks button:hover{color:var(--ac);border-color:var(--ac)}
.footlinks svg{width:15px;height:15px}
/* logos render as svg */
svg.ic{border-radius:50%;flex:none;display:block}

/* receive: chain picker */
.chainrow{display:flex;gap:6px;justify-content:center;margin-bottom:14px}
.chainpick{display:flex;align-items:center;gap:7px;background:var(--card);border:1.5px solid var(--line);
  border-radius:99px;padding:6px 12px 6px 6px;font-size:12.5px;font-weight:600;color:var(--muted);transition:.14s}
.chainpick.on{border-color:var(--ac);color:var(--text);background:var(--tint)}
.chainpick svg,.chainpick .ic{width:22px;height:22px;font-size:10px}

/* ============================================================
   LOCK SCREEN
   ============================================================ */
.lock{position:relative;height:100%;display:flex;flex-direction:column;align-items:center;
  padding:64px 26px 22px;overflow:hidden;animation:lk-in .5s cubic-bezier(.22,1,.36,1) both}
@keyframes lk-in{from{opacity:0;transform:translateY(10px)}to{opacity:1;transform:none}}
/* warm glow + faint arcs behind everything */
.lock::before{content:'';position:absolute;inset:-20% -30%;z-index:0;pointer-events:none;
  background:
    radial-gradient(46% 34% at 50% 12%, rgba(255,138,52,.30), transparent 70%),
    radial-gradient(40% 30% at 12% 42%, rgba(255,94,26,.16), transparent 72%),
    radial-gradient(48% 34% at 92% 74%, rgba(255,160,90,.20), transparent 72%);
  animation:lk-drift 14s ease-in-out infinite alternate}
@keyframes lk-drift{to{transform:translate3d(0,-14px,0) scale(1.06)}}
.lock .arcs{position:absolute;inset:0;z-index:0;pointer-events:none;opacity:.5}
.lock .arcs circle{fill:none;stroke:rgba(255,94,26,.16);stroke-width:1}
[data-theme="dark"] .lock::before{
  background:
    radial-gradient(46% 34% at 50% 12%, rgba(255,138,52,.20), transparent 70%),
    radial-gradient(40% 30% at 12% 42%, rgba(255,94,26,.12), transparent 72%),
    radial-gradient(48% 34% at 92% 74%, rgba(255,160,90,.12), transparent 72%)}
[data-theme="dark"] .lock .arcs circle{stroke:rgba(255,94,26,.14)}
.lock > *:not(.arcs):not(.lock-vid):not(.lock-scrim){position:relative;z-index:1}

.lock .mark{width:84px;height:84px;border-radius:26px;display:grid;place-items:center;
  background:linear-gradient(155deg,#FF9147,var(--ac));
  box-shadow:0 18px 40px -14px rgba(255,94,26,.75);animation:lk-float 4.6s ease-in-out infinite}
.lock .mark svg{width:44px;height:44px;color:#fff;animation:lk-spin 7s cubic-bezier(.65,0,.35,1) infinite}
@keyframes lk-float{0%,100%{transform:translateY(0)}50%{transform:translateY(-8px)}}
@keyframes lk-spin{0%,74%{transform:rotate(0)}90%,100%{transform:rotate(-360deg)}}

.lock h1{font-family:'Space Grotesk',system-ui,sans-serif;font-size:27px;font-weight:700;
  letter-spacing:-.03em;margin:30px 0 8px;animation:lk-in .5s .06s both}
.lock p{font-size:14px;color:var(--muted);text-align:center;margin-bottom:26px;animation:lk-in .5s .1s both}
.lock .fieldwrap{width:100%;animation:lk-in .5s .14s both}
.lock .inp{height:58px;border-radius:18px;font-size:15px;text-align:left;padding:0 20px;
  background:var(--card);border-color:rgba(255,94,26,.16)}
.lock .inp:focus{border-color:var(--ac);box-shadow:0 0 0 4px rgba(255,94,26,.12)}
.lock .spacer{flex:1;min-height:16px}
.lock .btn{height:56px;border-radius:999px;font-size:16px;animation:lk-in .5s .18s both}
.lock .forgot{margin-top:14px;font-size:13px;font-weight:700;color:var(--muted);padding:8px}
.lock .forgot:hover{color:var(--ac)}
.lock .err{text-align:left;padding-left:4px}
.shake{animation:shake .42s cubic-bezier(.36,.07,.19,.97)}
@keyframes shake{10%,90%{transform:translateX(-2px)}20%,80%{transform:translateX(4px)}
  30%,50%,70%{transform:translateX(-7px)}40%,60%{transform:translateX(7px)}}

/* ============================================================
   TOKEN DETAIL
   ============================================================ */
.tk-head{text-align:center;padding:4px 0 10px;animation:lk-in .35s both}
.tk-name{display:flex;align-items:center;justify-content:center;gap:8px;font-size:15px;font-weight:700}
.tk-price{font-family:'Space Grotesk',system-ui,sans-serif;font-weight:700;font-size:40px;
  letter-spacing:-.03em;margin-top:8px;line-height:1.05}
.tk-delta{display:flex;align-items:center;justify-content:center;gap:8px;margin-top:7px;font-size:14px;font-weight:700}
.tk-delta .badge2{padding:3px 9px;border-radius:8px;font-size:13px}
.tk-delta.up{color:var(--up)} .tk-delta.up .badge2{background:rgba(18,161,80,.15)}
.tk-delta.dn{color:var(--down)} .tk-delta.dn .badge2{background:rgba(229,72,77,.15)}
.tk-chart{height:190px;margin:14px 0 6px;position:relative}
.tk-chart svg{width:100%;height:100%;overflow:visible}
.tk-chart .spin{position:absolute;inset:0;display:grid;place-items:center;color:var(--muted);font-size:12px}
.tk-line{stroke-dasharray:2000;stroke-dashoffset:2000;animation:draw 1.1s cubic-bezier(.4,0,.2,1) forwards}
@keyframes draw{to{stroke-dashoffset:0}}
.tk-dot{animation:pop .3s .9s both}
@keyframes pop{from{r:0;opacity:0}to{opacity:1}}
.ranges2{display:flex;gap:3px;background:var(--card2);padding:4px;border-radius:99px;margin:10px 0 16px}
.ranges2 button{flex:1;height:32px;border-radius:99px;font-size:11.5px;font-weight:700;color:var(--muted);transition:.16s}
.ranges2 button.on{background:var(--ac);color:#fff}
.tk-stats{display:grid;grid-template-columns:1fr 1fr;gap:9px}
.tk-stat{background:var(--card);border:1px solid var(--line);border-radius:14px;padding:12px 13px}
.tk-stat small{display:block;font-size:11.5px;color:var(--muted);margin-bottom:3px}
.tk-stat b{font-size:15px;font-weight:700}
.hidden-note{font-size:11.5px;color:var(--muted);text-align:center;margin-top:10px}

/* ============================================================
   SEND MODE  ·  SEND  ·  TRANSFER CREATED
   ============================================================ */
.q-title{font-family:'Space Grotesk',system-ui,sans-serif;font-size:21px;font-weight:700;
  letter-spacing:-.03em;margin:2px 0 4px}
.q-sub{font-size:13.5px;color:var(--muted);margin-bottom:16px}

.mode{width:100%;text-align:left;background:var(--card);border:2px solid var(--line);
  border-radius:18px;padding:14px;margin-bottom:11px;transition:.16s}
.mode:hover{border-color:rgba(255,94,26,.45)}
.mode.on{border-color:var(--ac);box-shadow:0 10px 26px -14px rgba(255,94,26,.55)}
.mode .top{display:flex;align-items:flex-start;gap:12px}
.mode .mi{width:44px;height:44px;border-radius:13px;display:grid;place-items:center;flex:none;
  background:var(--card2);color:var(--icon)}
.mode.on .mi{background:linear-gradient(150deg,var(--ac2),var(--ac));color:#fff}
.mode .mi svg{width:21px;height:21px}
.mode .mt{flex:1;min-width:0}
.mode .mt b{display:block;font-size:15.5px;font-weight:700;letter-spacing:-.01em}
.mode .tag{display:inline-block;margin-top:5px;font-size:11.5px;font-weight:700;
  padding:3px 9px;border-radius:8px;background:var(--card2);color:var(--muted)}
.mode.on .tag{background:var(--tint2);color:var(--ac)}
.mode .rad{width:24px;height:24px;border-radius:50%;border:2px solid var(--line);flex:none;
  display:grid;place-items:center;color:transparent;transition:.16s}
.mode.on .rad{background:var(--ac);border-color:var(--ac);color:#fff}
.mode .rad svg{width:13px;height:13px}
.mode p{font-size:13px;color:var(--muted);line-height:1.5;margin-top:11px}

/* send */
.asset-sel{display:flex;align-items:center;gap:9px;background:var(--card);border:1px solid var(--line);
  border-radius:99px;padding:6px 13px 6px 6px;margin:0 auto 14px;font-size:14.5px;font-weight:700;width:max-content}
.asset-sel svg.chev{width:14px;height:14px;color:var(--muted)}
.big-amt{text-align:center}
.big-amt .row{display:flex;align-items:baseline;justify-content:center;gap:9px}
.big-amt input{border:none;background:none;outline:none;width:auto;max-width:190px;text-align:right;
  font-family:'Space Grotesk',system-ui,sans-serif;font-weight:700;font-size:46px;letter-spacing:-.035em}
.big-amt .sym{font-family:'Space Grotesk',system-ui,sans-serif;font-weight:700;font-size:24px;color:#C7C2B8}
.conv-pill{display:inline-flex;align-items:center;gap:7px;background:var(--card);border:1px solid var(--line);
  border-radius:99px;padding:6px 13px;font-size:12.5px;color:var(--muted);margin-top:10px}
.pcts{display:grid;grid-template-columns:repeat(4,1fr);gap:7px;margin:14px 0}
.pcts button{height:36px;border-radius:11px;background:var(--card);border:1px solid var(--line);
  font-size:12.5px;font-weight:700;color:var(--text);transition:.14s}
.pcts button:hover{border-color:var(--ac)}
.pcts button.on{background:var(--tint);border-color:var(--ac);color:var(--ac)}
.pcts .left{background:var(--card2);border-color:transparent;color:var(--muted);pointer-events:none}
.to-row{display:flex;align-items:center;gap:11px;padding:13px}
.to-row .av2{width:38px;height:38px;border-radius:50%;flex:none;display:grid;place-items:center;
  color:#fff;font-weight:800;font-size:15px;background:linear-gradient(140deg,#8B7BF0,#4A87F2)}
.to-row .tt{flex:1;min-width:0}
.to-row .tt small{display:block;font-size:12px;color:var(--muted)}
.to-row .tt input{border:none;background:none;outline:none;width:100%;font-size:14.5px;font-weight:700;
  color:var(--text);padding:0}
.to-row .tt input::placeholder{color:var(--muted);font-weight:500}
.to-row .chev{width:16px;height:16px;color:var(--muted);flex:none}

/* transfer created */
.created{text-align:center;padding:14px 0 4px;animation:lk-in .45s both}
.created .ring2{width:84px;height:84px;border-radius:50%;margin:0 auto 18px;display:grid;place-items:center;
  background:linear-gradient(150deg,var(--ac2),var(--ac));color:#fff;
  box-shadow:0 18px 38px -14px rgba(255,94,26,.75);animation:pop2 .5s cubic-bezier(.34,1.56,.64,1) both}
@keyframes pop2{from{transform:scale(.6);opacity:0}to{transform:scale(1);opacity:1}}
.created .ring2 svg{width:38px;height:38px}
.created h2{font-family:'Space Grotesk',system-ui,sans-serif;font-size:22px;font-weight:700;letter-spacing:-.025em}
.created p{font-size:13.5px;color:var(--muted);margin-top:6px;line-height:1.5}
.created p b{color:var(--text)}
.linkbox{display:flex;align-items:center;gap:9px;border:1.5px dashed rgba(255,94,26,.35);
  border-radius:14px;padding:11px 13px;margin-top:14px;background:var(--tint)}
.linkbox svg{width:15px;height:15px;color:var(--ac);flex:none}
.linkbox .u{flex:1;min-width:0;font-size:12px;font-family:ui-monospace,Menlo,monospace;color:var(--text);
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.linkbox button{font-size:12.5px;font-weight:700;color:var(--ac);flex:none}
.status-dot{display:inline-flex;align-items:center;gap:6px}
.status-dot i{width:7px;height:7px;border-radius:50%;background:var(--ac);display:block}

/* welcome shares the lock backdrop */
.lock.welcome{padding:52px 26px 20px}
.lock .mark.big{width:112px;height:112px;border-radius:34px}
.lock .mark.big svg{width:58px;height:58px}
.lock.welcome h1{font-size:34px;margin:26px 0 10px}
.lock.welcome p{font-size:14px;line-height:1.55;margin-bottom:0}
.lock .fine{font-size:11.5px;color:var(--muted);text-align:center;margin-top:14px;line-height:1.5}

/* dApp approval */
.approve{display:flex;flex-direction:column;height:100%}
.ap-title{font-family:'Space Grotesk',system-ui,sans-serif;font-size:17px;font-weight:700;
  letter-spacing:-.02em;text-align:center;padding:4px 0 10px}
.origin{display:flex;align-items:center;justify-content:center;gap:8px;background:var(--card2);
  border-radius:99px;padding:7px 14px;font-size:13px;font-weight:600;width:max-content;margin:0 auto 4px}
.origin .fav{width:16px;height:16px;border-radius:5px;background:#6E7BF2;display:block;flex:none}
.ap-body{flex:1;display:flex;flex-direction:column;padding-top:18px}
.ap-lbl{font-size:13px;color:var(--muted);text-align:center}
.approve .big-amt .num{font-family:'Space Grotesk',system-ui,sans-serif;font-weight:700;
  font-size:44px;letter-spacing:-.035em}
.ap-usd{font-size:13px;color:var(--muted);text-align:center;margin-top:6px}
.ap-body .rev{margin-top:auto;margin-bottom:12px}

/* ---------- lock screen with the brand video ---------- */
.lock.has-video{padding:0;justify-content:flex-end;overflow:hidden}
/* The rolling coin sits low in the frame, so the video runs as a band across
   the top and is anchored near its own bottom edge — that lands the coin just
   above the heading instead of behind the password field. */
.lock-vid{position:absolute;left:0;right:0;top:0;width:100%;height:66%;
  object-fit:cover;object-position:50% 78%;z-index:0;
  animation:vid-in .8s ease both}
@keyframes vid-in{from{opacity:0;transform:scale(1.04)}to{opacity:1;transform:none}}
.lock-scrim{position:absolute;inset:0;z-index:1;pointer-events:none;background:
  linear-gradient(180deg,
    rgba(244,241,237,0)   0%,
    rgba(244,241,237,0)   38%,
    rgba(244,241,237,.40) 48%,
    rgba(244,241,237,.76) 55%,
    rgba(244,241,237,.95) 61%,
    var(--bg)             66%)}
[data-theme="dark"] .lock-scrim{background:
  linear-gradient(180deg,
    rgba(11,11,14,0)   0%,
    rgba(11,11,14,0)   38%,
    rgba(11,11,14,.50) 48%,
    rgba(11,11,14,.84) 55%,
    rgba(11,11,14,.96) 61%,
    var(--bg)          66%)}
.lock-inner{position:relative;z-index:2;width:100%;padding:0 26px 22px;
  display:flex;flex-direction:column;align-items:center}
.lock.has-video h1{margin:0 0 8px;animation:lk-in .5s .25s both}
.lock.has-video p{margin-bottom:22px;animation:lk-in .5s .3s both}
.lock.has-video .fieldwrap{animation:lk-in .5s .35s both}
.lock.has-video .btn{width:100%;animation:lk-in .5s .4s both}
.lock.has-video .forgot{margin-top:12px}
/* the video lock screen bleeds to the popup edges */
.screen:has(.lock.has-video){padding:0}
.lock.has-video{height:100%}

/* send: centred stack per the design */
.send-mid{display:flex;flex-direction:column;align-items:center}
.send-mid .asset-sel{margin-bottom:16px}
.send-mid .big-amt{width:100%}
.big-amt .row{display:flex;align-items:baseline;justify-content:center;gap:10px}
.big-amt input{width:auto;min-width:1ch;field-sizing:content;text-align:right}
.conv-pill{display:inline-flex;align-items:center;gap:8px;cursor:pointer}
.conv-pill svg{width:14px;height:14px;opacity:.75}
.send-mid .pcts{width:100%}
.send-mid .card{width:100%}
.to-row .chev{width:16px;height:16px;color:var(--muted);flex:none}

/* accounts */
.acct-row{display:flex;align-items:center;gap:12px;width:100%;text-align:left;background:var(--card);
  border:1.5px solid var(--line);border-radius:16px;padding:12px 13px;margin-bottom:9px;transition:.14s}
.acct-row:hover{border-color:rgba(255,94,26,.45)}
.acct-row.on{border-color:var(--ac);background:var(--tint)}
.acct-row .av3{width:38px;height:38px;border-radius:50%;flex:none;display:grid;place-items:center;
  color:#fff;font-weight:800;font-size:15px}
.acct-row .m{flex:1;min-width:0}
.acct-row .m b{display:block;font-size:15px;font-weight:600}
.acct-row .m small{font-size:12px;color:var(--muted)}
.acct-row .tick{width:24px;height:24px;border-radius:50%;background:var(--ac);color:#fff;
  display:grid;place-items:center}
.acct-row .tick svg{width:13px;height:13px}

/* pending header */
.pend-head{display:flex;align-items:baseline;justify-content:space-between;padding:2px 4px 12px}
.pend-head b{font-family:'Space Grotesk',system-ui,sans-serif;font-size:17px;font-weight:700;letter-spacing:-.02em}
.pend-head span{font-size:13px;color:var(--ac);font-weight:700}
.pend .cd{color:var(--ac);font-weight:600}

/* verified tick + row value colours, matching the design */
.row .m b{display:flex;align-items:center;gap:6px}
.verified{width:15px;height:15px;border-radius:50%;background:var(--muted);color:#fff;opacity:.45;
  display:inline-grid;place-items:center;flex:none}
.verified svg{width:9px;height:9px}
.row .r small.up{color:var(--up);font-weight:600}
.row .r small.dn{color:var(--down);font-weight:600}

/* receive: one row per network with QR + copy */
.recv-row .m small{font-size:12px}
.rbtns{display:flex;gap:7px;flex:none}
.rb{width:36px;height:36px;border-radius:12px;background:var(--card2);border:1px solid var(--line);
  display:grid;place-items:center;color:var(--icon);transition:.14s}
.rb:hover{border-color:var(--ac);color:var(--ac)}
.rb svg{width:17px;height:17px}

/* ---------- swap ---------- */
.swap-card{background:var(--card);border:1px solid var(--line);border-radius:20px;padding:14px 16px 13px}
.sc-top{display:flex;justify-content:space-between;font-size:13px;color:var(--muted);margin-bottom:6px}
.sc-mid{display:flex;align-items:center;gap:10px}
.sc-mid input{flex:1;min-width:0;border:none;background:none;outline:none;color:var(--text);
  font-family:'Space Grotesk',system-ui,sans-serif;font-weight:700;font-size:34px;letter-spacing:-.03em}
.sc-mid input::placeholder{color:var(--text);opacity:1}
.sc-mid input:read-only{color:var(--text)}
.sc-usd{font-size:13px;color:var(--muted);margin-top:4px;min-height:18px}
.tok{display:flex;align-items:center;gap:8px;background:var(--card2);border:1px solid var(--line);
  border-radius:99px;padding:6px 11px 6px 6px;font-size:14.5px;font-weight:700;flex:none;transition:.14s}
.tok:hover{border-color:var(--ac)}
.tok svg:last-child{width:14px;height:14px;color:var(--muted)}
.tok img.ic,.tok .ic{border-radius:50%}
.swap-flip{display:flex;justify-content:center;margin:-14px 0;position:relative;z-index:2}
.swap-flip button{width:44px;height:44px;border-radius:15px;background:var(--card);
  border:1px solid var(--line);display:grid;place-items:center;color:var(--ac);
  box-shadow:0 2px 10px rgba(23,21,18,.07);transition:.2s}
.swap-flip button:hover{border-color:var(--ac);transform:rotate(180deg)}
.swap-flip svg{width:19px;height:19px}
.sw-pair{display:flex;align-items:center;justify-content:center;gap:14px;padding:18px 0 4px}
.sw-pair .arr{width:22px;height:22px;color:var(--ac);flex:none}
.sw-line{text-align:center;font-family:'Space Grotesk',system-ui,sans-serif;font-weight:700;
  font-size:22px;letter-spacing:-.025em;margin-top:14px}
.sw-usd{text-align:center;font-size:13px;color:var(--muted);margin-top:5px}
#tkResults .pick img.ic{border-radius:50%}

/* swap: a disabled review button should read as waiting, not broken */
#swGo:disabled{opacity:1;background:var(--card2);color:var(--muted);box-shadow:none}
.swap-card + .card{margin-top:16px}
/* full-height column so a screen's primary button can sit at the bottom */
.col{display:flex;flex-direction:column;min-height:calc(100% - 46px)}
.col .spacer{flex:1;min-height:22px}
.col > .btn{margin-top:0}

/* ---------- token picker ---------- */
.tk-search{display:flex;align-items:center;gap:9px;background:var(--card);border:1px solid var(--line);
  border-radius:14px;padding:0 13px;height:46px;margin-bottom:12px}
.tk-search svg{width:17px;height:17px;color:var(--muted);flex:none}
.tk-search input{flex:1;min-width:0;border:none;background:none;outline:none;font-size:14.5px;color:var(--text)}
.tk-search input::placeholder{color:var(--muted)}
.tk-search:focus-within{border-color:var(--ac)}
.tk-list{display:flex;flex-direction:column;gap:7px}
.tk-row{display:flex;align-items:center;gap:12px;width:100%;text-align:left;background:var(--card);
  border:1px solid var(--line);border-radius:15px;padding:10px 12px;transition:.13s}
.tk-row:hover{border-color:var(--ac);background:var(--tint)}
.tk-row .m{flex:1;min-width:0}
.tk-row .m b{display:flex;align-items:center;gap:6px;font-size:15px;font-weight:600}
.tk-row .m small{display:block;font-size:12.5px;color:var(--muted);overflow:hidden;
  text-overflow:ellipsis;white-space:nowrap}
.tk-row .r{font-size:13.5px;font-weight:600;color:var(--muted);flex:none}
.tk-row img.ic{border-radius:50%;object-fit:cover}
.tk-skel{height:58px;border-radius:15px;background:linear-gradient(90deg,var(--card2),var(--line),var(--card2));
  background-size:200% 100%;animation:shimmer 1.3s linear infinite}
@keyframes shimmer{from{background-position:200% 0}to{background-position:-200% 0}}
.unver{width:15px;height:15px;border-radius:50%;background:var(--gold,#F5A524);color:#fff;
  display:inline-grid;place-items:center;font-size:10px;font-weight:800;flex:none}

/* a network that didn't answer must be visible, not rounded down to zero */
.net-warn{display:flex;align-items:center;gap:8px;flex-wrap:wrap;margin:2px 0 10px;
  padding:10px 12px;border-radius:12px;background:var(--tint2);color:#8A4B22;
  font-size:12px;line-height:1.45}
[data-theme="dark"] .net-warn{background:#2E1F12;color:#E9B98F}
.net-warn button{font-size:12px;font-weight:700;color:var(--ac);text-decoration:underline;padding:0}

/* ---- add / connect account ---- */
.add-list{display:flex;flex-direction:column;gap:8px}
.add-row{display:flex;align-items:center;gap:12px;width:100%;text-align:left;
  background:var(--card);border:1px solid var(--line);border-radius:16px;padding:13px 14px;transition:.14s}
.add-row:hover{border-color:var(--ac)}
.add-row.dis{opacity:.45;pointer-events:none}
.add-ic{width:40px;height:40px;border-radius:13px;background:var(--card2);color:var(--ac);
  display:grid;place-items:center;flex:none}
.add-ic svg{width:19px;height:19px}
.add-row .m{min-width:0}
.add-row .m b{display:block;font-size:14.5px;font-weight:600}
.add-row .m small{display:block;font-size:12px;color:var(--muted);margin-top:1px;
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.acct-row .watch-tag{font-size:10.5px;font-weight:700;letter-spacing:.04em;text-transform:uppercase;
  color:var(--muted);background:var(--card2);border-radius:6px;padding:3px 7px}

/* ---- opening ----
   The popup used to appear fully formed and then repaint once the balances
   arrived, which read as a glitch. Now it settles in: the shell rises, and a
   cached figure breathes until the real one lands. */
@keyframes pop-in{from{opacity:0;transform:translateY(6px) scale(.985)}to{opacity:1;transform:none}}
body{animation:pop-in .26s cubic-bezier(.2,.7,.3,1) both}
.top{animation:pop-in .3s .02s cubic-bezier(.2,.7,.3,1) both}
.screen{animation:pop-in .34s .05s cubic-bezier(.2,.7,.3,1) both}

@keyframes settle{0%,100%{opacity:1}50%{opacity:.52}}
.bal.settling{animation:settle 1.1s ease-in-out infinite}

/* rows arrive in sequence rather than all at once */
@keyframes row-in{from{opacity:0;transform:translateY(5px)}to{opacity:1;transform:none}}
.screen .card .row{animation:row-in .3s cubic-bezier(.2,.7,.3,1) both}
.screen .card .row:nth-child(1){animation-delay:.02s}
.screen .card .row:nth-child(2){animation-delay:.05s}
.screen .card .row:nth-child(3){animation-delay:.08s}
.screen .card .row:nth-child(4){animation-delay:.11s}
.screen .card .row:nth-child(5){animation-delay:.14s}
.screen .card .row:nth-child(n+6){animation-delay:.17s}
.acts button{animation:pop-in .3s .06s cubic-bezier(.2,.7,.3,1) both}

@media(prefers-reduced-motion:reduce){
  body,.top,.screen,.screen .card .row,.acts button{animation:none}
  .bal.settling{animation:none;opacity:.7}
}

/* =========================================================================
   DESIGN PASS
   The screen was shouting: an oversized balance, a glowing button, three
   different shapes doing the same job, and a purple tick on an orange brand.
   Same layout, calmer execution — one shape language, one accent, and type
   that steps down instead of jumping.
   ========================================================================= */

/* balance: smaller, and the cents recede rather than change colour entirely */
.bal-wrap{padding:14px 0 20px}
.bal-lbl{font-size:12px;font-weight:500;color:var(--muted);letter-spacing:.01em}
.bal{font-size:34px;letter-spacing:-.035em;margin-top:5px}
.bal .c{font-size:34px;color:var(--text);opacity:.28}
.bal-sub{font-size:12.5px;font-weight:600;margin-top:6px;letter-spacing:-.005em}
.bal-sub.dn{color:var(--down)}

/* actions: one shape, no glow. The primary reads as primary through colour. */
.acts{gap:9px;margin-bottom:18px}
.acts .sq{height:52px;border-radius:14px}
.acts .sq svg{width:18px;height:18px}
.acts span{font-size:11px;font-weight:500;letter-spacing:.01em}
.acts button.pri .sq{background:var(--ac);box-shadow:none}
.acts button.pri:hover .sq{background:var(--purple-strong,#F2652F)}
.acts button:hover .sq{border-color:var(--ac)}

/* the verified tick was purple on an orange brand — one accent, not two */
.verified{color:var(--muted);opacity:.5}
.verified svg{width:12px;height:12px}

/* token rows: quieter, and the numbers line up on a single scale */
.row .m b{font-size:14px;font-weight:600;letter-spacing:-.01em}
.row .m small{font-size:12.5px;color:var(--muted);margin-top:1px}
.row .r b{font-size:14px;font-weight:600}
.row .r small{font-size:12px}
.ic{width:34px;height:34px}

/* the three buttons at the bottom were pills competing with the actions —
   they are secondary, so they should read as secondary */
.footlinks{display:grid;grid-template-columns:repeat(3,1fr);gap:0;margin-top:16px;
  border-top:1px solid var(--line);padding-top:6px}
.footlinks button{display:flex;align-items:center;justify-content:center;gap:7px;
  height:42px;background:none;border:none;border-radius:10px;
  font-size:12.5px;font-weight:500;color:var(--muted);transition:.14s}
.footlinks button:hover{color:var(--text);background:var(--card2)}
.footlinks svg{width:15px;height:15px;opacity:.8}

/* send mode: the cards were ballooned — same content, less air */
.mode{padding:16px 16px 15px;border-radius:16px}
.mode .top{gap:12px}
.mode .mi{width:40px;height:40px;border-radius:12px}
.mode .mi svg{width:19px;height:19px}
.mode .mt b{font-size:15.5px;letter-spacing:-.015em}
.mode .tag{font-size:11px;font-weight:600;padding:2px 8px;border-radius:6px;margin-top:3px}
.mode p{font-size:12.5px;line-height:1.5;margin-top:11px;color:var(--muted)}
.mode .rad{width:22px;height:22px}
.q-title{font-size:21px;letter-spacing:-.025em;margin-bottom:3px}
.q-sub{font-size:13px;color:var(--muted);margin-bottom:16px}

/* empty networks: present but recessive, and reachable in one tap */
.row.zero .m b,.row.zero .r b{color:var(--muted);font-weight:500}
.row.zero .ic{opacity:.5}
.more-nets{display:block;width:100%;margin-top:9px;height:38px;border-radius:11px;
  background:none;border:none;color:var(--muted);font-size:12.5px;font-weight:500;transition:.14s}
.more-nets:hover{color:var(--text);background:var(--card2)}

/* =========================================================================
   HOME, RESTRUCTURED
   Laid out the way a wallet people already use lays it out: the balance sits
   left rather than centred, the address is a chip you can copy, the four
   actions carry equal weight, and a token row reads name + move on the left,
   value over amount on the right. Cream and orange instead of charcoal.
   ========================================================================= */

.acct-bar{display:flex;align-items:center;margin:2px 0 14px}
.addr-chip{display:flex;align-items:center;gap:8px;height:34px;padding:0 11px 0 7px;
  background:var(--card);border:1px solid var(--line);border-radius:11px;
  font-size:12.5px;font-weight:500;color:var(--muted);transition:.14s;max-width:100%}
.addr-chip:hover{border-color:var(--ac);color:var(--text)}
.addr-chip svg{width:14px;height:14px;flex:none}
.chain-stack{display:flex;align-items:center;flex:none}
.chain-stack svg,.chain-stack .ic{width:18px;height:18px;border-radius:50%;
  margin-right:-6px;box-shadow:0 0 0 2px var(--card)}
.chain-stack > *:last-child{margin-right:2px}

.bal-block{padding:2px 0 18px}
.bal-block .bal{font-size:40px;line-height:1.05;letter-spacing:-.04em;text-align:left}
.bal-block .bal .c{font-size:40px;opacity:.26}
.bal-block .bal-sub{text-align:left;font-size:14px;font-weight:600;color:var(--up);margin-top:6px}
.bal-block .bal-sub.flat{color:var(--muted);font-weight:500}
.bal-block .bal-sub.dn{color:var(--down)}

/* four actions of equal weight — no hero button */
.acts{grid-template-columns:repeat(4,1fr);gap:8px;margin-bottom:18px}
.acts button{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:7px;
  height:66px;border-radius:14px;background:var(--card);border:1px solid var(--line);
  color:var(--ac);transition:.14s}
.acts button:hover{border-color:var(--ac);background:var(--tint)}
.acts button svg{width:19px;height:19px}
.acts button span{font-size:11.5px;font-weight:600;color:var(--text)}

/* tabs */
.tabs{display:flex;gap:20px;border-bottom:1px solid var(--line);margin-bottom:12px}
.tab{position:relative;padding:0 0 10px;background:none;border:none;
  font-size:14px;font-weight:600;color:var(--muted);transition:.14s}
.tab:hover{color:var(--text)}
.tab.on{color:var(--text)}
.tab.on::after{content:"";position:absolute;left:0;right:0;bottom:-1px;height:2px;
  background:var(--ac);border-radius:2px}
.tab .cnt{font-style:normal;display:inline-grid;place-items:center;min-width:17px;height:17px;
  padding:0 5px;margin-left:6px;border-radius:9px;background:var(--ac);color:#fff;
  font-size:10.5px;font-weight:700;vertical-align:1px}

.filter-row{display:flex;align-items:center;justify-content:space-between;margin-bottom:8px}
.net-pill{display:flex;align-items:center;gap:7px;height:32px;padding:0 12px;
  background:var(--card);border:1px solid var(--line);border-radius:10px;
  font-size:12.5px;font-weight:600;color:var(--text);transition:.14s}
.net-pill:hover{border-color:var(--ac)}
.net-pill svg{width:14px;height:14px;color:var(--muted)}
.filter-note{font-size:12px;color:var(--muted)}

/* token rows, MetaMask's information order */
.tok-list{display:flex;flex-direction:column}
.trow{display:flex;align-items:center;gap:12px;padding:11px 4px;border-radius:12px;transition:.13s}
.trow:hover{background:var(--card)}
.trow .m{flex:1;min-width:0}
.trow .m b{display:block;font-size:14.5px;font-weight:600;letter-spacing:-.01em;
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.trow .m small{display:block;font-size:12.5px;font-weight:600;margin-top:2px}
.trow .m small.up{color:var(--up)} .trow .m small.dn{color:var(--down)}
.trow .m small.mut{color:var(--muted);font-weight:500}
.trow .r{text-align:right;white-space:nowrap}
.trow .r b{display:block;font-size:14.5px;font-weight:600}
.trow .r small{display:block;font-size:12.5px;color:var(--muted);margin-top:2px}
.trow.zero{opacity:.55}
/* the stacked chain marks were colliding — give them room to read as a stack */
.chain-stack svg,.chain-stack .ic{width:17px;height:17px;margin-right:-5px;
  box-shadow:0 0 0 1.5px var(--card)}

/* ---- top bar, matched to the reference ----
   Account name as plain text with a chevron; a menu button on the right.
   The avatar pill, the "Connected" badge and the theme toggle are gone —
   none of them exist in the layout this is modelled on. */
.top{padding:14px 14px 6px;gap:8px}
.acct{display:flex;align-items:center;gap:5px;background:none;border:none;padding:0;
  border-radius:8px;height:auto}
.acct:hover{background:none;border-color:transparent}
.acct b{font-size:17px;font-weight:600;letter-spacing:-.02em;max-width:190px}
.acct svg{width:16px;height:16px;color:var(--muted)}
.burger{position:relative;width:36px;height:36px;margin-left:auto;border-radius:10px;
  display:grid;place-items:center;background:none;border:none;color:var(--text);transition:.14s}
.burger:hover{background:var(--card2)}
.burger svg{width:20px;height:20px}
.burger .dot{position:absolute;top:6px;right:6px;width:8px;height:8px;border-radius:50%;
  background:var(--ac);box-shadow:0 0 0 2px var(--bg)}

/* actions: filled surfaces, no outline — flat like the reference */
.acts button{background:var(--card);border:none;box-shadow:none}
.acts button:hover{background:var(--tint)}

.filter-tools{display:flex;align-items:center;gap:2px}
.filter-tools button{width:32px;height:32px;border-radius:9px;display:grid;place-items:center;
  background:none;border:none;color:var(--muted);transition:.14s}
.filter-tools button:hover{background:var(--card2);color:var(--text)}
.filter-tools svg{width:17px;height:17px}

/* ---- send mode, compact ----
   It was a full-page interstitial with three stacked headings and two cards
   the size of posters, to answer a question with two answers. One heading,
   two rows, done. */
.shead-sub{font-size:13px;color:var(--muted);text-align:center;margin:-6px 0 16px;line-height:1.45}
.mode{display:flex;align-items:flex-start;gap:12px;width:100%;text-align:left;
  padding:14px;margin-bottom:9px;border-radius:14px;
  background:var(--card);border:1.5px solid var(--line);transition:.14s}
.mode:hover{border-color:var(--ac)}
.mode.on{border-color:var(--ac);background:var(--tint)}
.mode .mi{width:36px;height:36px;border-radius:11px;flex:none;display:grid;place-items:center;
  background:var(--card2);color:var(--muted);box-shadow:none}
.mode.on .mi{background:var(--ac);color:#fff}
.mode .mi svg{width:17px;height:17px}
.mode .mt{flex:1;min-width:0}
.mode .mt b{display:block;font-size:14.5px;font-weight:600;letter-spacing:-.01em}
.mode .mt .tag{font-style:normal;font-size:11px;font-weight:600;color:var(--muted);
  background:var(--card2);border-radius:5px;padding:2px 6px;margin-left:5px;vertical-align:1px}
.mode.on .mt .tag{color:var(--ac);background:rgba(255,94,26,.12)}
.mode .mt small{display:block;font-size:12.5px;line-height:1.5;color:var(--muted);margin-top:4px}
.mode .rad{width:20px;height:20px;flex:none;margin-top:8px;border-radius:50%;
  border:1.5px solid var(--line);display:grid;place-items:center;color:transparent;transition:.14s}
.mode.on .rad{background:var(--ac);border-color:var(--ac);color:#fff}
.mode .rad svg{width:11px;height:11px}
.rev.dead{opacity:.55;pointer-events:none}
.rev.dead .sw{display:none}

/* ---- waking up ----
   The first paint comes from a tiny script with no event handlers, so for a
   moment the wallet looks ready and answers nothing. Rather than let people
   tap a dead screen, show that it is still coming up. */
body.booting .acts button,
body.booting .trow,
body.booting .tab,
body.booting .net-pill,
body.booting .addr-chip{pointer-events:none;opacity:.5}
body.booting::after{
  content:"";position:fixed;left:0;top:0;height:2px;width:100%;z-index:999;
  background:linear-gradient(90deg,transparent,var(--ac),transparent);
  background-size:40% 100%;background-repeat:no-repeat;
  animation:boot-bar 1.1s ease-in-out infinite}
@keyframes boot-bar{0%{background-position:-40% 0}100%{background-position:140% 0}}
@media(prefers-reduced-motion:reduce){body.booting::after{animation:none;opacity:.4}}

/* =========================================================================
   TYPE — SF Pro throughout, medium as the resting weight

   Space Grotesk was doing the headings and every number, which gave the
   wallet two typefaces arguing with each other. One family now, and 500
   instead of 400 as the default: SF Pro at medium reads sharper at small
   sizes, which is most of this interface.

   -apple-system resolves to SF Pro on Apple platforms and falls back
   gracefully everywhere else, so no font file ships.
   ========================================================================= */
:root{
  --sf:-apple-system,'SF Pro Text','SF Pro Display',BlinkMacSystemFont,
       system-ui,'Segoe UI',Roboto,Helvetica,Arial,sans-serif;
}
body{font-family:var(--sf);font-weight:500;letter-spacing:-.006em}
button,input,textarea,select{font-family:var(--sf);font-weight:500}

/* everything that used to reach for Space Grotesk */
.dsp,.shead h2,.bal,.amt-in input,.amt-in span,.ob h1,.lock h1,.tk-price,.q-title,
.sec-title,.acct b,.card-cap{font-family:var(--sf)}

/* display numbers and titles: semibold, tightened — SF needs less tracking
   than a grotesk at the same size */
.bal,.amt-in input,.tk-price{font-weight:600;letter-spacing:-.035em}
.amt-in span{font-weight:600;letter-spacing:-.02em}
.shead h2,.ob h1,.lock h1,.q-title{font-weight:600;letter-spacing:-.022em}
.acct b{font-weight:600;letter-spacing:-.02em}

/* body copy and labels sit at medium; only the emphasis goes heavier */
.row .m b,.trow .m b,.trow .r b,.row .r b,.mode .mt b,.add-row .m b,
.kv .v,.btn,.acts button span,.tab{font-weight:600}
.row .m small,.trow .m small,.trow .r small,.mode .mt small,.add-row .m small,
.kv .k,.bal-lbl,.q-sub,.shead-sub,.filter-note{font-weight:500}