:root {
  /* Dark theme — Bitget-aligned */
  --bg:#0B0E11;
  --surface:#12161C;
  --card:#151A21;
  --card2:#1C222D;
  --border:rgba(255,255,255,.06);
  --border2:rgba(255,255,255,.10);
  --mint:#00D4AA;
  --mint-dim:rgba(0,212,170,.12);
  --green:#0ECB81;
  --red:#F6465D;
  --orange:#F0B90B;
  --blue:#3861FB;
  --text:#F0F3F8;
  --text-secondary:#C5CDD8;
  --muted:#8B93A7;
  --muted-2:#6B7280;
  --danger:#F6465D;
  --radius:12px;
  --ff:'Inter',system-ui,-apple-system,sans-serif;
  --mono:'IBM Plex Mono',monospace;
  --safe-b:env(safe-area-inset-bottom,0px);
  --nav-h:60px;
  /* Motion tokens (GPU-friendly) */
  --ease-out:cubic-bezier(.2,.8,.2,1);
  --ease-soft:cubic-bezier(.25,.1,.25,1);
  --dur-fast:120ms;
  --dur:180ms;
  --dur-slow:280ms;
}
*{box-sizing:border-box;margin:0;padding:0;-webkit-tap-highlight-color:transparent}
html,body{height:100%;background:var(--bg);color:var(--text);font-family:var(--ff);overflow-x:hidden;-webkit-font-smoothing:antialiased}
button,input,select,textarea{font-family:inherit;color:inherit}
a{color:inherit;text-decoration:none}
input,select,textarea{background:var(--card);border:1px solid var(--border);border-radius:10px;padding:14px;width:100%;font-size:.95rem;outline:none;transition:border-color .2s}
input:focus,select:focus,textarea:focus{border-color:var(--mint)}
textarea{min-height:90px;resize:vertical}
select{appearance:none;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' fill='%23848E9C'%3E%3Cpath d='M6 8L1 3h10z'/%3E%3C/svg%3E");background-repeat:no-repeat;background-position:right 12px center;padding-right:32px}
.app{max-width:430px;margin:0 auto;min-height:100%;min-height:100dvh;position:relative;background:var(--bg);display:flex;flex-direction:column}
.screen{display:none!important;flex:1;flex-direction:column;padding-bottom:calc(var(--nav-h)+var(--safe-b)+4px);overflow-y:auto;opacity:0;visibility:hidden;pointer-events:none;background:var(--bg)}
.screen.active{display:flex!important;opacity:1!important;visibility:visible!important;pointer-events:auto!important;transform:translateY(0);animation:screenIn .25s ease both;min-height:100%}
.screen.no-nav{padding-bottom:var(--safe-b)}
body.tf-open #bottomNav, body.tf-open .bottom-nav{display:none!important}
.onboard{flex:1;display:flex;flex-direction:column;align-items:center;justify-content:center;padding:32px 24px;text-align:center;gap:14px}
.rocky-hero{width:64px;height:64px;border-radius:16px;overflow:hidden;background:var(--card);border:2px solid var(--border);box-shadow:0 8px 32px rgba(0,212,170,.15);margin-bottom:8px}
.rocky-hero img{width:100%;height:100%;object-fit:cover}
.onboard h1{font-size:1.65rem;font-weight:700;letter-spacing:-.02em}
.onboard h1 span{color:var(--mint)}
.onboard p{color:var(--muted);font-size:.9rem;line-height:1.5;max-width:300px}
.hint{color:var(--muted);font-size:.75rem;line-height:1.4}
.btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;width:100%;max-width:340px;padding:14px 18px;border-radius:12px;border:none;font-weight:600;font-size:.92rem;cursor:pointer;transition:filter .15s,transform .12s,opacity .15s}
.btn:active{transform:scale(.98)}
.btn-primary{background:linear-gradient(135deg,#00D4AA,#00B894);color:#04140f;box-shadow:0 4px 16px rgba(0,212,170,.25)}
.btn-accent{background:var(--blue);color:#fff}
.btn-ghost{background:rgba(255,255,255,.05);color:var(--text);border:1px solid var(--border)}
.btn-danger{background:rgba(246,70,93,.1);color:var(--danger);border:1px solid rgba(246,70,93,.25)}
.btn:disabled{opacity:.45;cursor:not-allowed;transform:none}
.btn-sm{padding:8px 12px;font-size:.8rem;max-width:none;width:auto;border-radius:8px}
.btn-stack{display:flex;flex-direction:column;gap:10px;width:100%;max-width:340px;margin-top:10px}
.topbar{display:flex;align-items:center;justify-content:space-between;padding:12px 16px 6px;gap:10px}
.topbar .brand{display:flex;align-items:center;gap:8px;font-weight:700;font-size:.95rem}
.brand-logo{width:32px;height:32px;border-radius:10px;overflow:hidden;background:var(--card);flex-shrink:0}
.brand-logo img{width:100%;height:100%;object-fit:cover}
.network-pill{display:inline-flex;align-items:center;gap:5px;padding:5px 10px;border-radius:20px;background:var(--mint-dim);border:1px solid rgba(0,212,170,.25);color:var(--mint);font-size:.7rem;font-weight:600;cursor:pointer}
.network-pill::before{content:'';width:6px;height:6px;border-radius:50%;background:var(--mint);box-shadow:0 0 6px var(--mint)}
.portfolio{text-align:center;padding:10px 20px 16px}
.portfolio .label{color:var(--muted);font-size:.78rem;font-weight:500;margin-bottom:4px}
.portfolio .total{font-size:2rem;font-weight:700;letter-spacing:-.03em;font-variant-numeric:tabular-nums}
.portfolio .change{font-size:.78rem;color:var(--muted);margin-top:4px;font-family:var(--mono)}
.actions{display:flex;justify-content:center;gap:10px;padding:0 12px 16px;flex-wrap:wrap}
.action-btn{display:flex;flex-direction:column;align-items:center;gap:5px;background:none;border:none;color:var(--text);cursor:pointer;font-size:.7rem;font-weight:600;min-width:62px}
.action-btn .ico{width:48px;height:48px;border-radius:50%;background:var(--card);border:1px solid var(--border);display:flex;align-items:center;justify-content:center;font-size:1.15rem;transition:background .15s,border-color .15s}
.action-btn:active .ico{background:var(--card2);border-color:var(--mint)}
.section-head{display:flex;align-items:center;justify-content:space-between;padding:6px 16px 8px;font-size:.78rem;font-weight:600;color:var(--muted)}
.token-list{padding:0 12px;display:flex;flex-direction:column;gap:4px}
.token-row{display:flex;align-items:center;gap:12px;padding:12px;background:var(--card);border-radius:12px;cursor:pointer;transition:background .15s}
.token-row:active{background:var(--card2)}
.token-icon{width:40px;height:40px;border-radius:50%;display:flex;align-items:center;justify-content:center;overflow:hidden;background:var(--card2);flex-shrink:0}
.token-icon img{width:100%;height:100%;object-fit:cover}
.token-info{flex:1;min-width:0}
.token-info .name{font-weight:600;font-size:.9rem}
.token-info .sym{color:var(--muted);font-size:.72rem;margin-top:1px}
.token-bal{text-align:right}
.token-bal .amt{font-weight:600;font-size:.9rem;font-variant-numeric:tabular-nums}
.token-bal .usd{color:var(--muted);font-size:.72rem;margin-top:1px}
.panel{padding:12px 16px 20px;flex:1}
.panel h2{font-size:1.2rem;font-weight:700;margin-bottom:14px}
.back-btn{background:none;border:none;color:var(--muted);font-size:.88rem;font-weight:600;cursor:pointer;margin-bottom:10px;padding:4px 0;display:inline-flex;align-items:center;gap:4px}
.field{margin-bottom:14px}
.field label{display:block;font-size:.75rem;font-weight:600;color:var(--muted);margin-bottom:6px}
.field .hint{margin-top:5px;font-size:.72rem;color:var(--muted)}
.card{background:var(--card);border:1px solid var(--border);border-radius:var(--radius);padding:14px}
.danger-box{background:rgba(246,70,93,.08);border-color:rgba(246,70,93,.25);color:var(--danger);font-size:.82rem;line-height:1.45;margin-bottom:14px}
.warn-box{background:rgba(240,185,11,.08);border-color:rgba(240,185,11,.25);color:var(--orange);font-size:.82rem;line-height:1.45;margin-bottom:14px}
.seed-grid{display:grid;grid-template-columns:1fr 1fr 1fr;gap:6px;margin:10px 0}
.seed-word{background:var(--card);border:1px solid var(--border);border-radius:8px;padding:9px 6px;font-size:.8rem;font-family:var(--mono);text-align:center}
.seed-word span{color:var(--muted);font-size:.68rem;display:block;margin-bottom:1px}
.confirm-options{display:flex;flex-wrap:wrap;gap:8px;margin:10px 0 16px}
.confirm-opt{padding:10px 14px;border-radius:10px;background:var(--card);border:1px solid var(--border);font-size:.85rem;cursor:pointer}
.confirm-opt.selected{border-color:var(--mint);background:var(--mint-dim);color:var(--mint)}
.receive-box{display:flex;flex-direction:column;align-items:center;gap:14px;padding:16px 0}
.qr-wrap{background:#fff;border-radius:16px;padding:14px;display:flex;align-items:center;justify-content:center;box-shadow:0 4px 20px rgba(0,0,0,.3)}
#qrCanvas{display:block;border-radius:4px}
.addr-display{font-family:var(--mono);font-size:.78rem;word-break:break-all;text-align:center;background:var(--card);border:1px solid var(--border);border-radius:10px;padding:12px;width:100%;line-height:1.5}
.tx-list{padding:0 12px;display:flex;flex-direction:column;gap:4px}
.tx-row{display:flex;align-items:center;gap:12px;padding:12px;background:var(--card);border-radius:12px;cursor:pointer}
.tx-icon{width:38px;height:38px;border-radius:50%;display:flex;align-items:center;justify-content:center;font-size:1rem;flex-shrink:0}
.tx-icon.in{background:rgba(14,203,129,.12);color:var(--green)}
.tx-icon.out{background:rgba(246,70,93,.12);color:var(--red)}
.tx-icon.fail{background:rgba(240,185,11,.12);color:var(--orange)}
.tx-info{flex:1;min-width:0}
.tx-info .title{font-weight:600;font-size:.88rem}
.tx-info .meta{color:var(--muted);font-size:.7rem;margin-top:2px}
.tx-amt{text-align:right;font-weight:600;font-size:.88rem;font-variant-numeric:tabular-nums}
.tx-amt.pos{color:var(--green)}
.swap-card{background:var(--card);border:1px solid var(--border);border-radius:16px;padding:14px;margin-bottom:8px}
.swap-row{display:flex;align-items:center;gap:10px}
.swap-row input{flex:1;background:transparent;border:none;font-size:1.4rem;font-weight:600;padding:8px 0;outline:none}
.swap-token-btn{display:flex;align-items:center;gap:6px;background:var(--card2);border:1px solid var(--border);border-radius:20px;padding:6px 10px 6px 6px;font-weight:600;font-size:.85rem;cursor:pointer}
.swap-token-btn img{width:24px;height:24px;border-radius:50%}
.swap-arrow{width:36px;height:36px;border-radius:50%;background:var(--card2);border:3px solid var(--bg);display:flex;align-items:center;justify-content:center;margin:-14px auto;position:relative;z-index:2;cursor:pointer;font-size:1rem}
.swap-meta{display:flex;justify-content:space-between;font-size:.75rem;color:var(--muted);padding:8px 4px}
.dapp-grid{display:grid;grid-template-columns:1fr 1fr;gap:10px;padding:0 14px 16px}
.dapp-card{background:var(--card);border:1px solid var(--border);border-radius:14px;padding:16px 12px;text-align:center;cursor:pointer}
.dapp-card:active{border-color:var(--mint)}
.dapp-card .ico{width:44px;height:44px;border-radius:12px;margin:0 auto 8px;display:flex;align-items:center;justify-content:center;font-size:1.5rem;background:var(--card2)}
.dapp-card .name{font-weight:600;font-size:.85rem}
.dapp-card .desc{color:var(--muted);font-size:.7rem;margin-top:3px}
.settings-list{padding:0 12px;display:flex;flex-direction:column;gap:3px}
.set-item{display:flex;align-items:center;gap:12px;padding:13px 12px;background:var(--card);border-radius:11px;cursor:pointer;font-size:.88rem;font-weight:500}
.set-item:active{background:var(--card2)}
.set-item .ico{font-size:1.1rem;width:26px;text-align:center}
.set-item .arrow{margin-left:auto;color:var(--muted)}
.set-item.danger{color:var(--danger)}
.set-divider{height:1px;background:var(--border);margin:10px 14px}
.bottom-nav{position:fixed;bottom:0;left:50%;transform:translateX(-50%);width:100%;max-width:430px;height:calc(var(--nav-h)+var(--safe-b));padding-bottom:var(--safe-b);background:var(--surface);border-top:1px solid var(--border);display:flex;align-items:center;justify-content:space-around;z-index:100}
.nav-item{display:flex;flex-direction:column;align-items:center;gap:2px;background:none;border:none;color:var(--muted);font-size:.62rem;font-weight:600;cursor:pointer;padding:6px 10px}
.nav-item.active{color:var(--mint)}
.nav-item .ni{font-size:1.2rem}
#toast{position:fixed;bottom:calc(var(--nav-h)+var(--safe-b)+16px);left:50%;transform:translateX(-50%) translateY(16px);background:var(--card2);border:1px solid var(--border2);color:var(--text);padding:11px 18px;border-radius:10px;font-size:.85rem;font-weight:500;opacity:0;pointer-events:none;transition:opacity .25s,transform .25s;z-index:200;max-width:90%;text-align:center;box-shadow:0 8px 28px rgba(0,0,0,.4)}
#toast.show{opacity:1;transform:translateX(-50%) translateY(0)}
#loading{position:fixed;inset:0;background:rgba(11,14,17,.8);display:none;align-items:center;justify-content:center;z-index:300;backdrop-filter:blur(4px)}
#loading.show{display:flex}
.spinner{width:36px;height:36px;border:3px solid var(--border2);border-top-color:var(--mint);border-radius:50%;animation:spin .7s linear infinite}
@keyframes spin{to{transform:rotate(360deg)}}
#pinOverlay{position:fixed;inset:0;background:var(--bg);display:none;flex-direction:column;align-items:center;justify-content:center;z-index:400;padding:24px}
#pinOverlay.show{display:flex}
.pin-dots{display:flex;gap:12px;margin:20px 0 28px}
.pin-dot{width:12px;height:12px;border-radius:50%;border:2px solid var(--border2);transition:all .15s}
.pin-dot.filled{background:var(--mint);border-color:var(--mint)}
.pin-pad{display:grid;grid-template-columns:repeat(3,1fr);gap:12px;max-width:280px;width:100%}
.pin-key{aspect-ratio:1;border-radius:50%;background:var(--card);border:1px solid var(--border);font-size:1.25rem;font-weight:600;cursor:pointer;display:flex;align-items:center;justify-content:center}
.pin-key:active{background:var(--card2)}
.pin-key.empty{background:transparent;border:none}
.empty-state{text-align:center;padding:36px 20px;color:var(--muted)}
.empty-state .ico{font-size:2.2rem;margin-bottom:10px;opacity:.5}
.empty-state p{font-size:.88rem;line-height:1.5}
.modal-backdrop{position:fixed;inset:0;background:rgba(0,0,0,.65);display:none;align-items:flex-end;justify-content:center;z-index:250;backdrop-filter:blur(3px)}
.modal-backdrop.show{display:flex}
.modal{background:var(--surface);border-radius:18px 18px 0 0;width:100%;max-width:430px;padding:16px 16px calc(16px + var(--safe-b));max-height:85vh;overflow-y:auto}
.modal-handle{width:36px;height:4px;background:var(--border2);border-radius:2px;margin:0 auto 14px}
.modal h3{font-size:1.05rem;margin-bottom:14px}
.gas-info{display:flex;justify-content:space-between;padding:10px 12px;background:var(--card);border:1px solid var(--border);border-radius:10px;font-size:.8rem;margin-bottom:12px}
.gas-info .label{color:var(--muted)}
.gas-info .val{font-weight:600;font-family:var(--mono)}
.step-indicator{display:flex;gap:5px;margin-bottom:14px}
.step-dot{height:3px;flex:1;border-radius:2px;background:var(--border2)}
.step-dot.active,.step-dot.done{background:var(--mint)}
.step-dot.done{opacity:.45}
.mt-12{margin-top:12px}
.text-center{text-align:center}
.text-muted{color:var(--muted)}
.mono{font-family:var(--mono)}
.flex-between{display:flex;justify-content:space-between;align-items:center}

.dapp-cat.active{background:var(--mint-dim)!important;color:var(--mint)!important;border-color:rgba(0,212,170,.3)!important}
.swap-card input::placeholder{color:var(--muted);opacity:.5}

/* Bitget-like home */
.bg-balance{padding:8px 16px 4px}
.bg-balance .row{display:flex;align-items:flex-start;justify-content:space-between;gap:12px}
.bg-balance .amt{font-size:1.85rem;font-weight:700;letter-spacing:-.03em}
.bg-balance .chg{font-size:.78rem;color:var(--green);margin-top:2px}
.bg-balance .chg span{color:var(--muted);margin-left:4px}
.deposit-btn{background:#00E5C0;color:#04140f;border:none;border-radius:24px;padding:10px 20px;font-weight:700;font-size:.88rem;cursor:pointer;white-space:nowrap}
.quick-row{display:flex;justify-content:space-around;padding:12px 8px 8px}
.quick-item{display:flex;flex-direction:column;align-items:center;gap:6px;background:none;border:none;color:var(--text);cursor:pointer;font-size:.68rem;font-weight:600;min-width:64px}
.quick-item .qi{width:42px;height:42px;border-radius:14px;background:var(--card);border:1px solid var(--border);display:flex;align-items:center;justify-content:center;font-size:1.15rem}
.promo{margin:8px 14px;background:var(--card);border:1px solid var(--border);border-radius:14px;padding:14px;display:flex;gap:12px;align-items:center}
.promo .txt{flex:1;font-size:.85rem;font-weight:600;line-height:1.35}
.promo .txt a{color:var(--mint);font-size:.78rem;font-weight:600}
.news-card{margin:0 14px 8px;background:var(--card);border:1px solid var(--border);border-radius:14px;padding:14px}
.news-card .title{font-size:.88rem;font-weight:600;line-height:1.35;margin-bottom:8px}
.news-card .meta{display:flex;align-items:center;gap:8px;font-size:.75rem;color:var(--muted)}
.news-card .pct{color:var(--green);font-weight:600;margin-left:auto}
/* Wallet page Bitget */
.wal-name{display:flex;align-items:center;gap:6px;padding:4px 16px;font-size:.82rem;color:var(--muted);cursor:pointer}
.wal-name strong{color:var(--text);font-weight:600}
.action-pills{display:flex;gap:8px;padding:8px 14px 12px;justify-content:center}
.action-pill{flex:1;display:flex;align-items:center;justify-content:center;gap:6px;padding:12px 8px;background:var(--card);border:1px solid var(--border);border-radius:24px;font-size:.82rem;font-weight:600;cursor:pointer;color:var(--text)}
.action-pill .dot{width:22px;height:22px;border-radius:50%;background:rgba(0,229,192,.15);color:var(--mint);display:flex;align-items:center;justify-content:center;font-size:.75rem}
.feat-grid{display:grid;grid-template-columns:1fr 1fr;gap:10px;padding:0 14px 12px}
.feat-card{background:var(--card);border:1px solid var(--border);border-radius:14px;padding:14px;cursor:pointer}
.feat-card .fi{font-size:1.3rem;margin-bottom:6px}
.feat-card .fl{font-size:.72rem;color:var(--muted)}
.feat-card .ft{font-size:.88rem;font-weight:600;margin-top:2px}
.search-top{display:flex;align-items:center;gap:8px;padding:10px 14px 4px}
.search-top .avatar{width:32px;height:32px;border-radius:50%;overflow:hidden;flex-shrink:0;cursor:pointer}
.search-top .avatar img{width:100%;height:100%;object-fit:cover}
.search-top .search{flex:1;background:var(--card2);border:1px solid var(--border);border-radius:20px;padding:8px 14px;font-size:.82rem;color:var(--muted)}


.dep-item{display:flex;align-items:center;gap:12px;padding:14px;background:var(--card);border:1px solid var(--border);border-radius:14px;margin-bottom:8px;cursor:pointer}
.dep-item:active{background:var(--card2)}
.dep-ico{width:40px;height:40px;border-radius:50%;background:var(--card2);display:flex;align-items:center;justify-content:center;font-size:1.1rem;flex-shrink:0}
.dep-info{flex:1;min-width:0}
.dep-info .dn{font-weight:600;font-size:.9rem;display:flex;align-items:center;gap:6px}
.dep-info .dd{color:var(--muted);font-size:.72rem;margin-top:2px}
.dep-badge{font-size:.65rem;padding:2px 6px;border-radius:6px;background:var(--mint-dim);color:var(--mint);font-weight:600}
.net-item{display:flex;align-items:center;gap:12px;padding:14px 12px;border-radius:12px;cursor:pointer;margin-bottom:2px}
.net-item:active,.net-item.on{background:var(--card)}
.net-ico{width:36px;height:36px;border-radius:50%;display:flex;align-items:center;justify-content:center;font-size:1rem;flex-shrink:0}
.net-name{flex:1;font-weight:600;font-size:.92rem}
.net-check{color:var(--mint);font-weight:700}

.net-logo{width:28px;height:28px;border-radius:50%;object-fit:cover;display:block}
.net-ico{width:36px;height:36px;border-radius:50%;display:flex;align-items:center;justify-content:center;overflow:hidden;flex-shrink:0}
.tok-up{color:#0ECB81;font-size:.72rem;font-weight:600;margin-left:4px}
.tok-down{color:#F6465D;font-size:.72rem;font-weight:600;margin-left:4px}
.token-row{padding:14px 12px}
.token-info .name{font-size:.95rem;font-weight:600;letter-spacing:.01em}
.token-info .sym{display:flex;align-items:center;flex-wrap:wrap;gap:2px;margin-top:3px}
.token-bal .amt{font-size:.95rem}
.token-icon{width:42px;height:42px}


/* Bitget token list sizing */
.token-list{padding:0 12px 16px;display:flex;flex-direction:column;gap:0}
.token-row{display:flex;align-items:center;gap:12px;padding:12px 8px;background:transparent;border-radius:0;border-bottom:1px solid rgba(42,49,60,.5);cursor:pointer}
.token-row:active{background:rgba(255,255,255,.03)}
.token-icon{width:36px;height:36px;border-radius:50%;overflow:hidden;background:var(--card2);flex-shrink:0}
.token-icon img{width:100%;height:100%;object-fit:cover}
.token-info .name{font-weight:600;font-size:.92rem}
.token-info .sym{font-size:.72rem;color:var(--muted);margin-top:2px}
.token-bal .amt{font-weight:600;font-size:.92rem}
.token-bal .usd{font-size:.72rem;color:var(--muted);margin-top:2px}
.section-token{display:flex;justify-content:space-between;align-items:center;padding:8px 16px 4px;font-size:.8rem;font-weight:600;color:var(--muted)}
.section-token .left{display:flex;align-items:center;gap:6px}
.section-token .filter-btn{width:32px;height:32px;border-radius:50%;background:var(--card);border:1px solid var(--border);display:flex;align-items:center;justify-content:center;cursor:pointer;font-size:.9rem}
/* Toggle switch */
.toggle-row{display:flex;align-items:center;justify-content:space-between;padding:14px 4px;font-size:.9rem;font-weight:500}
.toggle{position:relative;width:44px;height:26px;flex-shrink:0}
.toggle input{opacity:0;width:0;height:0}
.toggle .slider{position:absolute;cursor:pointer;inset:0;background:var(--card2);border:1px solid var(--border);border-radius:26px;transition:.2s}
.toggle .slider:before{content:"";position:absolute;height:20px;width:20px;left:2px;bottom:2px;background:#fff;border-radius:50%;transition:.2s}
.toggle input:checked+.slider{background:var(--mint);border-color:var(--mint)}
.toggle input:checked+.slider:before{transform:translateX(18px)}
.pref-item{display:flex;align-items:center;justify-content:space-between;padding:16px 4px;font-size:.9rem;font-weight:500;cursor:pointer;border-bottom:1px solid rgba(42,49,60,.4)}
.pref-item .val{color:var(--muted);font-weight:500;font-size:.85rem;display:flex;align-items:center;gap:4px}

.tok-price{color:var(--muted);font-size:.72rem}
.tok-flat{color:var(--muted);font-size:.72rem;margin-left:4px}
.tok-up{color:#0ECB81 !important;font-size:.72rem;font-weight:600;margin-left:4px}
.tok-down{color:#F6465D !important;font-size:.72rem;font-weight:600;margin-left:4px}
.token-icon img{background:#1a1f27}

/* Token detail Bitget */
.td-head{display:flex;align-items:center;justify-content:center;gap:8px;padding:8px 16px 4px;position:relative}
.td-head .x{position:absolute;left:16px;background:none;border:none;color:var(--text);font-size:1.2rem;cursor:pointer}
.td-head img{width:28px;height:28px;border-radius:50%}
.td-head .tn{font-weight:700;font-size:1rem}
.td-head .tc{font-size:.72rem;color:var(--muted)}
.td-bal{text-align:center;padding:12px 16px 8px}
.td-bal .big{font-size:2rem;font-weight:700;letter-spacing:-.02em}
.td-bal .usd{color:var(--muted);font-size:.88rem;margin-top:4px}
.td-bal .chg{font-size:.78rem;margin-top:6px;color:var(--muted)}
.td-bal .chg .up{color:#0ECB81}.td-bal .chg .down{color:#F6465D}
.td-actions{display:flex;gap:8px;padding:8px 16px 12px}
.td-actions button{flex:1;padding:12px;border-radius:24px;border:none;font-weight:700;font-size:.88rem;cursor:pointer}
.td-actions .dep{background:#1a2a2e;color:var(--mint)}
.td-actions .tr{background:#1a2a2e;color:var(--text)}
.td-actions .trade{background:#00E5C0;color:#04140f}
.td-card{margin:0 14px 10px;background:var(--card);border:1px solid var(--border);border-radius:14px;padding:14px}
.td-card .label{font-size:.75rem;color:var(--muted);margin-bottom:4px}
.td-card .addr-row{display:flex;align-items:center;justify-content:space-between;gap:8px}
.td-card .addr{font-family:monospace;font-size:.8rem;word-break:break-all}
.td-grid{display:grid;grid-template-columns:1fr 1fr;gap:10px;padding:0 14px 10px}
.td-mini{background:var(--card);border:1px solid var(--border);border-radius:14px;padding:12px;font-size:.8rem}
.td-mini .t{font-weight:600;margin-bottom:4px}
.td-mini .s{color:var(--mint);font-size:.75rem}
.td-hist{margin:0 14px 16px;background:var(--card);border:1px solid var(--border);border-radius:14px;padding:12px}
.td-hist .hh{display:flex;justify-content:space-between;font-weight:600;font-size:.9rem;margin-bottom:10px}
.td-price{margin:0 14px 20px;background:var(--card);border:1px solid var(--border);border-radius:14px;padding:12px;display:flex;justify-content:space-between;align-items:center}
.td-price .p{font-size:1.1rem;font-weight:700}
/* Transfer */
.tf-token{display:flex;justify-content:center;padding:8px}
.tf-token .pill{display:inline-flex;align-items:center;gap:6px;background:var(--card);border:1px solid var(--border);border-radius:20px;padding:6px 12px;font-size:.85rem;font-weight:600}
.tf-token img{width:20px;height:20px;border-radius:50%}
.tf-amt{text-align:center;padding:16px 16px 8px}
.tf-amt input{font-size:2.2rem;font-weight:700;text-align:center;background:transparent;border:none;width:100%;outline:none}
.tf-amt .usd{color:var(--muted);font-size:.88rem}
.tf-fields{padding:8px 16px}
.tf-field{background:var(--card);border:1px solid var(--border);border-radius:12px;padding:12px 14px;margin-bottom:8px;display:flex;justify-content:space-between;align-items:center;cursor:pointer}
.tf-field .l{font-size:.75rem;color:var(--muted)}
.tf-field .v{font-size:.85rem;font-weight:600}
.tf-pct{display:flex;gap:8px;padding:4px 16px 8px}
.tf-pct button{flex:1;padding:10px;border-radius:12px;background:var(--card);border:1px solid var(--border);font-weight:600;font-size:.85rem;cursor:pointer;color:var(--text)}
.tf-pad{display:grid;grid-template-columns:repeat(3,1fr);gap:4px 8px;padding:8px 28px 12px;max-width:360px;margin:0 auto;width:100%}
.tf-pad button{padding:14px 0;border:none;background:transparent;font-size:1.55rem;font-weight:500;color:var(--text);cursor:pointer;border-radius:12px;min-height:52px;font-family:inherit;line-height:1}
.tf-pad button:active{background:rgba(255,255,255,.06)}
.tf-amt{text-align:center;padding:20px 16px 12px}
.tf-amt .display{font-size:2.4rem;font-weight:700;letter-spacing:-.02em;line-height:1.15;min-height:1.2em}
.tf-amt .display .cur{color:var(--muted);margin-left:6px}
.tf-amt .cursor{display:inline-block;width:2px;height:1.1em;background:var(--mint);vertical-align:middle;margin-right:2px;animation:blink 1s step-end infinite}
@keyframes blink{50%{opacity:0}}
.tf-next{opacity:.45;pointer-events:none;transition:opacity .15s}
.tf-next.ready{opacity:1;pointer-events:auto}

.tf-pad button{padding:16px;border:none;background:transparent;font-size:1.4rem;font-weight:600;color:var(--text);cursor:pointer;border-radius:12px}
.tf-pad button:active{background:var(--card)}
/* Address picker */
.addr-box-in{background:var(--card);border:1px solid var(--border);border-radius:14px;padding:16px;min-height:90px;margin-bottom:10px}
.addr-box-in textarea{width:100%;background:transparent;border:none;outline:none;font-size:.95rem;resize:none;min-height:60px;font-family:monospace}
.addr-btns{display:flex;gap:8px;margin-bottom:14px}
.addr-btns button{flex:1;padding:12px;border-radius:24px;border:none;background:#1a2a2e;color:var(--mint);font-weight:600;cursor:pointer}
.addr-recent{padding:0}
.addr-recent .item{display:flex;gap:10px;align-items:center;padding:12px;background:var(--card);border-radius:12px;margin-bottom:6px;cursor:pointer}
.addr-recent .item .ic{width:32px;height:32px;border-radius:8px;background:var(--card2);display:flex;align-items:center;justify-content:center}
.addr-recent .item .nm{font-weight:600;font-size:.88rem}
.addr-recent .item .ad{font-size:.7rem;color:var(--muted);font-family:monospace}

/* ===== Transitions & Animations ===== */
.screen{
  opacity:0;
  transform:translateX(12px);
  pointer-events:none;
  transition: opacity .22s ease, transform .22s ease;
}
.screen.active{
  opacity:1;
  transform:translateX(0);
  pointer-events:auto;
}
.screen.slide-back{
  transform:translateX(-12px);
}
/* Modal */
.modal-bg{
  opacity:0;
  transition: opacity .2s ease;
}
.modal-bg.show{
  opacity:1;
}
.modal{
  transform:translateY(24px);
  transition: transform .25s cubic-bezier(.2,.8,.2,1);
}
.modal-bg.show .modal{
  transform:translateY(0);
}
/* Toast */
#toast{
  transition: opacity .25s ease, transform .25s ease;
}
/* Buttons */
.btn, .action-pill, .action-btn, .quick-item, .nav-item, .token-row, .set-item, .dep-item, .net-item, .tf-pad button, .tf-pct button{
  transition: background .15s ease, transform .12s ease, opacity .15s ease, border-color .15s ease, color .15s ease;
}
.btn:active, .action-pill:active, .tf-pct button:active{
  transform:scale(.97);
}
.token-row:active, .set-item:active, .dep-item:active, .net-item:active{
  transform:scale(.99);
}
/* Bottom nav indicator feel */
.nav-item{
  transition: color .18s ease, transform .15s ease;
}
.nav-item.on, .nav-item.active{
  transform:translateY(-1px);
}
/* Loading fade */
#loading{
  opacity:0;
  transition: opacity .2s ease;
}
#loading.show{
  opacity:1;
}
/* PIN overlay */
#pinOverlay{
  opacity:0;
  transition: opacity .2s ease;
}
#pinOverlay.show{
  opacity:1;
}
/* Stagger token list */
.token-row{
  animation: fadeUp .28s ease both;
}
@keyframes fadeUp{
  from{opacity:0; transform:translateY(8px);}
  to{opacity:1; transform:translateY(0);}
}
.token-list .token-row:nth-child(1){animation-delay:.02s}
.token-list .token-row:nth-child(2){animation-delay:.04s}
.token-list .token-row:nth-child(3){animation-delay:.06s}
.token-list .token-row:nth-child(4){animation-delay:.08s}
.token-list .token-row:nth-child(5){animation-delay:.10s}
.token-list .token-row:nth-child(6){animation-delay:.12s}
.token-list .token-row:nth-child(7){animation-delay:.14s}
.token-list .token-row:nth-child(8){animation-delay:.16s}
/* Soft pulse for deposit */
.deposit-btn{
  transition: transform .15s ease, box-shadow .2s ease;
}
.deposit-btn:active{
  transform:scale(.96);
}
/* Number change subtle */
.portfolio .total, .bg-balance .amt, .td-bal .big{
  transition: opacity .2s ease;
}
@media (prefers-reduced-motion: reduce){
  .screen, .modal, .modal-bg, .token-row, #toast, #loading, #pinOverlay{
    transition:none !important;
    animation:none !important;
  }
  .screen{opacity:1; transform:none}
}


/* Button transition animations */
.btn, .action-pill, .action-btn, .quick-item, .deposit-btn,
.td-actions button, .tf-pct button, .tf-pad button, .addr-btns button,
.nav-item, .filter-btn, .net-item, .dep-item, .set-item, .token-row,
.tf-field, .tf-next, #tfNext, .cat {
  transition:
    transform .14s cubic-bezier(.2,.8,.2,1),
    background .18s ease,
    opacity .18s ease,
    border-color .18s ease,
    color .18s ease,
    box-shadow .18s ease;
}
.btn:active, .action-pill:active, .deposit-btn:active,
.td-actions button:active, .tf-pct button:active,
.addr-btns button:active, #tfNext:active {
  transform: scale(0.96);
}
.tf-pad button:active {
  transform: scale(0.92);
  background: rgba(255,255,255,.08) !important;
}
.tf-pct button:active {
  background: var(--mint-dim);
  border-color: rgba(0,212,170,.35);
  color: var(--mint);
}
.nav-item:active {
  transform: scale(0.94) translateY(-1px);
}
.token-row:active, .set-item:active, .net-item:active, .dep-item:active, .tf-field:active {
  transform: scale(0.985);
  background: rgba(255,255,255,.04);
}
/* Ripple-ish glow on primary */
.btn-primary, .deposit-btn, .td-actions .trade, #tfNext.ready {
  box-shadow: 0 0 0 0 rgba(0,229,192,0);
}
.btn-primary:active, .deposit-btn:active, .td-actions .trade:active, #tfNext.ready:active {
  box-shadow: 0 0 0 4px rgba(0,229,192,.15);
}
/* Keypad press feedback */
.tf-pad button {
  position: relative;
}
.tf-pad button::after {
  content: '';
  position: absolute;
  inset: 6px;
  border-radius: 12px;
  background: rgba(0,212,170,.12);
  opacity: 0;
  transition: opacity .15s ease;
  pointer-events: none;
}
.tf-pad button:active::after {
  opacity: 1;
}
@media (prefers-reduced-motion: reduce) {
  .btn, .tf-pad button, .tf-pct button, .nav-item, .token-row, .td-actions button {
    transition: none !important;
  }
}

/* Scrollable token area */
.screen#screen-home{
  overflow:hidden;
}
.home-scroll{
  flex:1;
  overflow-y:auto;
  -webkit-overflow-scrolling:touch;
  padding-bottom:12px;
}
.token-list{
  padding:0 12px 80px;
  display:flex;
  flex-direction:column;
  gap:0;
}
.manage-btn-wrap{
  position:sticky;
  bottom:0;
  padding:12px 16px 20px;
  background:linear-gradient(transparent, var(--bg) 30%);
  display:flex;
  justify-content:center;
  z-index:5;
}
.manage-btn{
  background:#1a2a2e;
  color:var(--mint);
  border:none;
  border-radius:24px;
  padding:12px 28px;
  font-weight:700;
  font-size:.88rem;
  cursor:pointer;
}
/* Manage tokens screen */
.mt-search{padding:0 14px 10px}
.mt-search input{border-radius:22px;background:var(--card2);padding-left:14px}
.mt-sec{padding:10px 16px 6px;font-size:.8rem;font-weight:600;color:var(--muted)}
.mt-row{display:flex;align-items:center;gap:12px;padding:12px 14px}
.mt-row .token-icon{width:36px;height:36px}
.mt-row .info{flex:1;min-width:0}
.mt-row .info .n{font-weight:600;font-size:.9rem;display:flex;align-items:center;gap:6px}
.mt-row .info .s{font-size:.7rem;color:var(--muted);margin-top:2px}
.mt-row .bal{text-align:right;margin-right:8px}
.mt-row .bal .a{font-weight:600;font-size:.9rem}
.mt-row .bal .u{font-size:.7rem;color:var(--muted)}
.badge-risk{font-size:.62rem;padding:2px 6px;border-radius:6px;background:rgba(246,70,93,.15);color:#F6465D;font-weight:700}
.mt-net-pill{display:inline-flex;align-items:center;gap:4px;font-size:.65rem;color:var(--muted)}

/* Security UI */
.sec-card{margin:12px 14px;background:var(--card);border:1px solid var(--border);border-radius:14px;padding:14px}
.sec-card h4{font-size:.9rem;margin:0 0 8px;display:flex;align-items:center;gap:8px}
.sec-card p{font-size:.78rem;color:var(--muted);line-height:1.45;margin:0 0 10px}
.sec-warn{border-color:rgba(246,70,93,.35);background:rgba(246,70,93,.08)}
.sec-ok{border-color:rgba(14,203,129,.3);background:rgba(14,203,129,.06)}
.sec-row{display:flex;align-items:center;justify-content:space-between;padding:12px 4px;border-bottom:1px solid rgba(42,49,60,.4);font-size:.88rem}
.sec-row:last-child{border-bottom:none}
#pinOverlay{position:fixed;inset:0;z-index:200;background:rgba(7,9,13,.92);display:none;align-items:center;justify-content:center;flex-direction:column;padding:24px}
#pinOverlay.show{display:flex}
.pin-box{width:100%;max-width:320px;text-align:center}
.pin-box h2{margin-bottom:6px}
.pin-dots{display:flex;gap:12px;justify-content:center;margin:20px 0}
.pin-dots span{width:12px;height:12px;border-radius:50%;background:var(--card2);border:1px solid var(--border);transition:background .15s}
.pin-dots span.on{background:var(--mint);border-color:var(--mint)}
.pin-pad{display:grid;grid-template-columns:repeat(3,1fr);gap:10px;max-width:280px;margin:0 auto}
.pin-pad button{padding:18px;border:none;border-radius:50%;background:var(--card);color:var(--text);font-size:1.3rem;font-weight:600;cursor:pointer;aspect-ratio:1;max-height:72px}
.pin-pad button:active{background:var(--card2);transform:scale(.95)}
.pin-err{color:#F6465D;font-size:.8rem;min-height:1.2em;margin-top:8px}

/* Backup guide + HW */
.guide-step{display:flex;gap:12px;padding:12px 0;border-bottom:1px solid rgba(42,49,60,.4)}
.guide-step .num{width:28px;height:28px;border-radius:50%;background:var(--mint);color:#04140f;font-weight:800;display:flex;align-items:center;justify-content:center;flex-shrink:0;font-size:.85rem}
.guide-step .body{flex:1}
.guide-step .body b{display:block;margin-bottom:4px;font-size:.9rem}
.guide-step .body span{font-size:.78rem;color:var(--muted);line-height:1.4}
.seed-grid{display:grid;grid-template-columns:1fr 1fr 1fr;gap:8px;margin:12px 0}
.seed-grid .w{background:var(--card2);border:1px solid var(--border);border-radius:10px;padding:8px;font-size:.78rem;font-family:monospace}
.seed-grid .w i{color:var(--muted);font-style:normal;margin-right:4px;font-size:.7rem}
.hw-card{display:flex;gap:12px;align-items:center;padding:14px;background:var(--card);border:1px solid var(--border);border-radius:14px;margin-bottom:10px;cursor:pointer}
.hw-card:active{transform:scale(.98)}
.hw-card .ico{width:44px;height:44px;border-radius:12px;background:var(--card2);display:flex;align-items:center;justify-content:center;font-size:1.4rem}
.hw-card .t{font-weight:700;font-size:.92rem}
.hw-card .s{font-size:.75rem;color:var(--muted);margin-top:2px}

/* ===== Beranda Bitget ===== */
.bg-top{display:flex;align-items:center;gap:8px;padding:10px 14px 6px}
.bg-top .avatar{width:36px;height:36px;border-radius:50%;background:linear-gradient(135deg,#1a3a3a,#0d2a2a);display:flex;align-items:center;justify-content:center;overflow:hidden;flex-shrink:0;position:relative}
.bg-top .avatar img{width:100%;height:100%;object-fit:cover}
.bg-top .avatar .dot{position:absolute;top:0;right:0;width:8px;height:8px;background:#f43f5e;border-radius:50%;border:2px solid var(--bg)}
.bg-top .search{flex:1;background:var(--card2);border-radius:20px;padding:8px 14px;font-size:.82rem;color:var(--muted);border:1px solid var(--border);display:flex;align-items:center;gap:6px}
.bg-top .icon-btn{width:36px;height:36px;border-radius:50%;background:var(--card);border:1px solid var(--border);display:flex;align-items:center;justify-content:center;font-size:1rem;cursor:pointer}
.bg-bal-row{display:flex;align-items:flex-start;justify-content:space-between;padding:8px 16px 4px}
.bg-bal-row .amt{font-size:2rem;font-weight:700;letter-spacing:-.03em}
.bg-bal-row .chg{font-size:.78rem;color:var(--mint);margin-top:4px}
.bg-bal-row .chg .muted{color:var(--muted)}
.bg-deposit{background:#00E5C0;color:#04140f;border:none;border-radius:22px;padding:10px 20px;font-weight:800;font-size:.88rem;cursor:pointer}
.bg-quick{display:flex;justify-content:space-around;padding:12px 8px 8px}
.bg-quick .q{display:flex;flex-direction:column;align-items:center;gap:6px;cursor:pointer;min-width:64px}
.bg-quick .q .ic{width:44px;height:44px;border-radius:14px;background:var(--card);border:1px solid var(--border);display:flex;align-items:center;justify-content:center;font-size:1.15rem}
.bg-quick .q span{font-size:.72rem;color:var(--muted);font-weight:500}
.bg-promo{margin:8px 14px;background:var(--card);border:1px solid var(--border);border-radius:16px;padding:14px;display:flex;gap:12px;align-items:center;position:relative}
.bg-promo .txt{flex:1;font-size:.88rem;font-weight:600;line-height:1.35}
.bg-promo .txt a{color:var(--mint);font-size:.8rem;font-weight:600}
.bg-promo .art{width:72px;height:72px;border-radius:12px;background:linear-gradient(135deg,#1a3a4a,#0d2030);display:flex;align-items:center;justify-content:center;font-size:2rem;flex-shrink:0}
.bg-promo .x{position:absolute;top:8px;right:8px;background:rgba(0,0,0,.4);border:none;color:#fff;width:22px;height:22px;border-radius:50%;cursor:pointer;font-size:.7rem}
.bg-sec{display:flex;justify-content:space-between;align-items:center;padding:12px 16px 6px;font-size:.85rem;font-weight:600}
.bg-sec .more{color:var(--muted);font-weight:500;font-size:.78rem;cursor:pointer}
.news-card{margin:0 14px 10px;background:var(--card);border:1px solid var(--border);border-radius:14px;padding:14px;cursor:pointer}
.news-card .title{font-size:.9rem;font-weight:600;line-height:1.4;margin-bottom:10px}
.news-card .meta{display:flex;align-items:center;justify-content:space-between}
.news-card .coin{display:flex;align-items:center;gap:8px;font-weight:700;font-size:.85rem}
.news-card .coin img{width:22px;height:22px;border-radius:50%}
.news-card .pct{font-size:.85rem;font-weight:700}
.news-card .pct.up{color:#0ECB81}
.news-card .pct.down{color:#F6465D}
.news-card .foot{font-size:.7rem;color:var(--muted);margin-top:8px}
/* Discover / DApps */
.disc-banner{margin:10px 14px;border-radius:16px;overflow:hidden;background:linear-gradient(135deg,#1a0a3a,#0a1a3a);height:140px;position:relative;display:flex;align-items:center;padding:16px}
.disc-banner .bt{font-size:1.3rem;font-weight:800;line-height:1.2}
.disc-banner .bs{font-size:.75rem;color:rgba(255,255,255,.7);margin-top:6px;max-width:60%}
.disc-tabs{display:flex;gap:16px;padding:8px 16px;overflow-x:auto;border-bottom:1px solid var(--border)}
.disc-tabs span{font-size:.88rem;color:var(--muted);font-weight:600;cursor:pointer;padding-bottom:8px;white-space:nowrap}
.disc-tabs span.on{color:var(--text);border-bottom:2px solid var(--mint)}
.dapp-row{display:flex;align-items:center;gap:12px;padding:12px 16px;cursor:pointer}
.dapp-row:active{background:rgba(255,255,255,.03)}
.dapp-row img{width:42px;height:42px;border-radius:12px;object-fit:cover;background:var(--card2)}
.dapp-row .info{flex:1;min-width:0}
.dapp-row .info .n{font-weight:700;font-size:.9rem}
.dapp-row .info .d{font-size:.72rem;color:var(--muted);margin-top:2px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.dapp-row .tag{width:32px;height:32px;border-radius:8px;object-fit:cover}
.disc-sec{padding:12px 16px 4px;font-weight:700;font-size:.9rem;display:flex;justify-content:space-between}

/* Loading spinner */
#loading{
  position:fixed;inset:0;z-index:300;background:rgba(7,9,13,.72);
  display:none;align-items:center;justify-content:center;flex-direction:column;gap:12px;
  backdrop-filter:blur(2px);
}
#loading.show{display:flex}
.spinner-ring{
  width:42px;height:42px;border-radius:50%;
  border:3px solid rgba(255,255,255,.12);
  border-top-color:var(--mint);
  animation:spin .7s linear infinite;
}
@keyframes spin{to{transform:rotate(360deg)}}
#loading .msg{font-size:.82rem;color:var(--muted);font-weight:500}
.inline-spin{
  width:16px;height:16px;border-radius:50%;
  border:2px solid rgba(255,255,255,.15);
  border-top-color:var(--mint);
  animation:spin .7s linear infinite;
  display:inline-block;vertical-align:middle;margin-right:6px;
}
.btn.loading{opacity:.7;pointer-events:none}
.btn.loading::before{
  content:'';display:inline-block;width:14px;height:14px;border-radius:50%;
  border:2px solid rgba(0,0,0,.15);border-top-color:currentColor;
  animation:spin .7s linear infinite;margin-right:8px;vertical-align:middle;
}

/* WalletConnect + RPC health UI */
.wc-modal .wc-opt{display:flex;align-items:center;gap:12px;padding:14px;background:var(--card);border:1px solid var(--border);border-radius:14px;margin-bottom:10px;cursor:pointer;transition:transform .12s,border-color .15s}
.wc-modal .wc-opt:active{transform:scale(.98)}
.wc-modal .wc-opt:hover{border-color:rgba(0,212,170,.35)}
.wc-modal .wc-opt .ico{width:44px;height:44px;border-radius:12px;display:flex;align-items:center;justify-content:center;font-size:1.4rem;background:var(--card2)}
.wc-modal .wc-opt .t{font-weight:700;font-size:.92rem}
.wc-modal .wc-opt .s{font-size:.75rem;color:var(--muted);margin-top:2px}
.rpc-status{margin:10px 14px;background:var(--card);border:1px solid var(--border);border-radius:12px;padding:12px}
.rpc-status .hd{display:flex;justify-content:space-between;align-items:center;font-size:.82rem;font-weight:600;margin-bottom:8px}
.rpc-row{display:flex;align-items:center;gap:8px;padding:6px 0;font-size:.75rem;font-family:monospace}
.rpc-row .dot{width:8px;height:8px;border-radius:50%;flex-shrink:0}
.rpc-row .dot.ok{background:#0ECB81;box-shadow:0 0 6px rgba(14,203,129,.5)}
.rpc-row .dot.fail{background:#F6465D}
.rpc-row .dot.ping{background:#F0B90B;animation:pulse 1s infinite}
.rpc-row .ms{margin-left:auto;color:var(--muted)}
@keyframes pulse{50%{opacity:.4}}
.rpc-badge{display:inline-flex;align-items:center;gap:4px;font-size:.68rem;padding:2px 8px;border-radius:10px;background:rgba(14,203,129,.12);color:#0ECB81;font-weight:600}
.rpc-badge.bad{background:rgba(246,70,93,.12);color:#F6465D}

/* WalletConnect v2 */
.wc-qr-wrap{display:flex;flex-direction:column;align-items:center;gap:10px;padding:8px 0}
.wc-qr-wrap canvas,.wc-qr-wrap img{border-radius:12px;background:#fff;padding:8px}
.wc-uri-box{font-size:.68rem;word-break:break-all;background:var(--card2);border-radius:10px;padding:10px;color:var(--muted);max-height:64px;overflow:auto;width:100%}
.wc-pid input{font-family:monospace;font-size:.8rem}
.wc-session{padding:10px 12px;background:var(--card);border:1px solid var(--border);border-radius:12px;margin-bottom:8px}
.wc-session .n{font-weight:700;font-size:.88rem}
.wc-session .u{font-size:.72rem;color:var(--muted)}

/* Bitget-style Settings + Profile panel */
.set-profile{display:flex;align-items:center;gap:12px;padding:14px;background:var(--card);border:1px solid var(--border);border-radius:16px;margin:12px 14px;cursor:pointer}
.set-profile img{width:48px;height:48px;border-radius:50%;object-fit:cover;background:var(--card2)}
.set-profile .nm{font-weight:700;font-size:1rem}
.set-profile .sub{font-size:.72rem;color:var(--muted);margin-top:3px;line-height:1.35}
.set-group{margin:10px 14px;background:var(--card);border:1px solid var(--border);border-radius:16px;overflow:hidden}
.set-group .set-item{display:flex;align-items:center;gap:12px;padding:14px 14px;border-bottom:1px solid rgba(42,49,60,.45);cursor:pointer;font-size:.9rem;font-weight:500}
.set-group .set-item:last-child{border-bottom:none}
.set-group .set-item .ic{width:28px;text-align:center;font-size:1.05rem}
.set-group .set-item .arrow{margin-left:auto;color:var(--muted)}
.set-group .set-item .right{margin-left:auto;color:var(--mint);font-size:.82rem;font-weight:600}
/* Profile slide panel */
.prof-bg{position:fixed;inset:0;background:rgba(0,0,0,.55);z-index:150;display:none;opacity:0;transition:opacity .2s}
.prof-bg.show{display:block;opacity:1}
.prof-panel{position:fixed;top:0;left:0;right:0;bottom:0;z-index:151;background:var(--bg);transform:translateY(100%);transition:transform .28s cubic-bezier(.2,.8,.2,1);overflow-y:auto;padding-bottom:40px}
.prof-bg.show .prof-panel{transform:translateY(0)}
.prof-head{display:flex;align-items:center;justify-content:space-between;padding:12px 14px}
.prof-head .icon-btn{width:36px;height:36px;border-radius:50%;border:1px solid var(--border);background:var(--card);display:flex;align-items:center;justify-content:center;cursor:pointer}
.prof-user{display:flex;align-items:center;gap:12px;padding:8px 16px 16px}
.prof-user img{width:52px;height:52px;border-radius:50%;object-fit:cover}
.prof-user .nm{font-weight:700;font-size:1.1rem}
.prof-user .bal{font-size:.85rem;color:var(--muted);margin-top:2px}
.prof-user .switch{margin-left:auto;padding:8px 14px;border-radius:20px;border:1px solid var(--border);background:var(--card);font-weight:600;font-size:.8rem;cursor:pointer}
.prof-card{margin:0 14px 12px;background:var(--card);border:1px solid var(--border);border-radius:16px;padding:12px 14px}
.prof-card .hd{display:flex;justify-content:space-between;align-items:center;font-weight:700;font-size:.9rem;margin-bottom:10px}
.prof-card .hd .dot{width:8px;height:8px;background:#f43f5e;border-radius:50%;display:inline-block;margin-right:4px}
.prof-notif{display:flex;align-items:flex-start;gap:10px;padding:8px 0;font-size:.82rem}
.prof-notif .t{flex:1}
.prof-notif .d{color:var(--muted);font-size:.72rem}
.prof-apps{display:flex;gap:12px;overflow-x:auto;padding-bottom:4px}
.prof-apps .app{display:flex;flex-direction:column;align-items:center;gap:6px;min-width:64px;cursor:pointer}
.prof-apps .app .ic{width:44px;height:44px;border-radius:14px;background:var(--card2);display:flex;align-items:center;justify-content:center;font-size:1.2rem;overflow:hidden}
.prof-apps .app .ic img{width:100%;height:100%;object-fit:cover}
.prof-apps .app span{font-size:.68rem;color:var(--muted);text-align:center;max-width:64px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.prof-tx{display:flex;align-items:center;gap:10px;padding:10px 0;border-bottom:1px solid rgba(42,49,60,.4)}
.prof-tx:last-child{border-bottom:none}
.prof-tx .ic{width:36px;height:36px;border-radius:50%;background:var(--card2);display:flex;align-items:center;justify-content:center;overflow:hidden}
.prof-tx .ic img{width:100%;height:100%;object-fit:cover}
.prof-tx .info{flex:1;min-width:0}
.prof-tx .info .t{font-weight:600;font-size:.88rem}
.prof-tx .info .s{font-size:.72rem;color:var(--muted)}
.prof-tx .amt{text-align:right;font-weight:600;font-size:.85rem}
.prof-search{position:fixed;bottom:24px;left:50%;transform:translateX(-50%);background:var(--card);border:1px solid var(--border);border-radius:24px;padding:10px 20px;display:flex;align-items:center;gap:8px;font-size:.88rem;color:var(--muted);cursor:pointer;box-shadow:0 8px 24px rgba(0,0,0,.35);z-index:152}

/* Panel transition animations */
.prof-bg{
  transition: opacity .25s ease;
}
.prof-bg .prof-panel{
  transition: transform .32s cubic-bezier(.22,1,.36,1), opacity .25s ease;
  opacity: .98;
}
.prof-bg.show .prof-panel{
  opacity: 1;
}
.modal-bg{
  transition: opacity .22s ease !important;
}
.modal-bg .modal, .modal-bg #modalBox, #modalBox.modal{
  transition: transform .3s cubic-bezier(.22,1,.36,1), opacity .22s ease !important;
}
/* Slide variants */
.prof-panel.slide-right{
  transform: translateX(-100%);
}
.prof-bg.show .prof-panel.slide-right{
  transform: translateX(0);
}
/* MetaMask connect card */
.mm-card{display:flex;align-items:center;gap:12px;padding:14px;background:linear-gradient(135deg,#1a1208,#2a1a0a);border:1px solid rgba(246,133,27,.35);border-radius:14px;margin-bottom:10px;cursor:pointer}
.mm-card .ico{width:44px;height:44px;border-radius:12px;background:#F6851B22;display:flex;align-items:center;justify-content:center}
.mm-card .ico img{width:28px;height:28px}
.mm-card .t{font-weight:700}
.mm-card .s{font-size:.75rem;color:var(--muted);margin-top:2px}
.mm-status{font-size:.72rem;padding:4px 10px;border-radius:10px;background:rgba(14,203,129,.12);color:#0ECB81;font-weight:600}
.mm-status.off{background:rgba(246,70,93,.12);color:#F6465D}

/* ===== BaseRocky v6 Additive Enhancements ===== */
:root {
  --mint: #00e6b8;
  --mint-dim: rgba(0, 230, 184, 0.12);
  --mint-glow: rgba(0, 230, 184, 0.25);
}

/* Smoother screen transitions */
.screen.active {
  animation: screenInV6 .28s cubic-bezier(.22,1,.36,1) both;
}
@keyframes screenInV6 {
  from { opacity: 0; transform: translateY(8px); }
  to { opacity: 1; transform: translateY(0); }
}

/* Gas selector */
.gas-selector { display: flex; gap: 8px; margin: 12px 0; }
.gas-option {
  flex: 1; padding: 12px 8px; background: var(--card);
  border: 1px solid var(--border); border-radius: 12px;
  text-align: center; cursor: pointer; transition: all .15s;
}
.gas-option.active { border-color: var(--mint); background: var(--mint-dim); }
.gas-option .g-label { font-size: .72rem; font-weight: 600; color: var(--muted); margin-bottom: 4px; }
.gas-option.active .g-label { color: var(--mint); }
.gas-option .g-val { font-size: .85rem; font-weight: 700; }
.gas-option .g-time { font-size: .68rem; color: var(--muted); margin-top: 2px; }

/* Address book */
.addr-book-list { display: flex; flex-direction: column; gap: 3px; }
.addr-book-row {
  display: flex; align-items: center; gap: 12px;
  padding: 13px 12px; background: var(--card); border-radius: 14px; cursor: pointer;
}
.addr-book-row:active { background: var(--card2); }
.addr-book-avatar {
  width: 40px; height: 40px; border-radius: 50%;
  background: linear-gradient(135deg, var(--mint), #3b82f6);
  display: flex; align-items: center; justify-content: center;
  font-weight: 700; font-size: .9rem; color: #031510; flex-shrink: 0;
}
.addr-book-info { flex: 1; min-width: 0; }
.addr-book-info .ab-name { font-weight: 600; font-size: .9rem; }
.addr-book-info .ab-addr {
  font-family: var(--mono); font-size: .72rem; color: var(--muted);
  margin-top: 2px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}

/* Skeleton loading */
.skeleton {
  background: linear-gradient(90deg, var(--card) 25%, var(--card2) 50%, var(--card) 75%);
  background-size: 200% 100%; animation: shimmerV6 1.4s ease infinite; border-radius: 8px;
}
@keyframes shimmerV6 { 0% { background-position: -200% 0; } 100% { background-position: 200% 0; } }
.skeleton-row {
  display: flex; align-items: center; gap: 12px;
  padding: 13px 12px; background: var(--card); border-radius: 14px; margin-bottom: 3px;
}
.skeleton-circle { width: 42px; height: 42px; border-radius: 50%; }
.skeleton-line { height: 12px; border-radius: 6px; }

/* Network status */
.net-status {
  display: none; align-items: center; justify-content: center; gap: 6px;
  padding: 6px; font-size: .7rem; font-weight: 600;
  background: rgba(246,70,93,.12); color: var(--red);
}
.net-status.offline { display: flex; }

/* Modal handle */
.modal-handle {
  width: 36px; height: 4px; background: var(--border2, #353D4A);
  border-radius: 2px; margin: 0 auto 14px;
}

/* Stronger primary button glow */
.btn-primary {
  box-shadow: 0 4px 16px rgba(0, 230, 184, 0.22);
}

/* Better focus */
button:focus-visible, input:focus-visible, select:focus-visible {
  outline: 2px solid var(--mint);
  outline-offset: 2px;
}

/* ===== Referral Center (Bitget-style) ===== */
.ref-hero {
  text-align: center;
  padding: 20px 20px 8px;
  background: linear-gradient(180deg, rgba(0,230,184,.1) 0%, transparent 100%);
  margin-bottom: 8px;
}
.ref-hero-badge {
  display: inline-block;
  padding: 4px 12px;
  border-radius: 20px;
  background: var(--mint-dim);
  border: 1px solid rgba(0,212,170,.3);
  color: var(--mint);
  font-size: .7rem;
  font-weight: 700;
  letter-spacing: .04em;
  text-transform: uppercase;
  margin-bottom: 10px;
}
.ref-hero h2 {
  font-size: 1.35rem;
  font-weight: 700;
  letter-spacing: -.02em;
  margin-bottom: 6px;
}
.ref-hero p {
  color: var(--muted);
  font-size: .85rem;
  line-height: 1.45;
  max-width: 300px;
  margin: 0 auto;
}
.ref-stats {
  display: flex;
  gap: 8px;
  padding: 8px 14px 14px;
}
.ref-stat {
  flex: 1;
  background: var(--card);
  border: 1px solid var(--border);
  border-radius: 14px;
  padding: 14px 8px;
  text-align: center;
}
.ref-stat-val {
  font-size: 1.25rem;
  font-weight: 700;
  color: var(--mint);
  font-variant-numeric: tabular-nums;
}
.ref-stat-label {
  font-size: .68rem;
  color: var(--muted);
  margin-top: 4px;
  font-weight: 500;
}
.ref-card {
  background: var(--card);
  border: 1px solid var(--border);
  border-radius: 16px;
  padding: 16px;
  margin: 0 14px 12px;
}
.ref-card-title {
  font-weight: 700;
  font-size: .92rem;
  margin-bottom: 12px;
}
.ref-code-box {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  background: var(--card2);
  border: 1px dashed var(--border2);
  border-radius: 12px;
  padding: 12px 14px;
  margin-bottom: 10px;
}
.ref-code-box span {
  font-family: var(--mono);
  font-size: 1.2rem;
  font-weight: 700;
  letter-spacing: .12em;
  color: var(--mint);
}
.ref-link-row {
  display: flex;
  gap: 8px;
  margin-bottom: 12px;
}
.ref-link-row input {
  flex: 1;
  min-width: 0;
  font-family: var(--mono);
}
.ref-share-btns {
  display: flex;
  gap: 8px;
}
.ref-bind-row {
  display: flex;
  gap: 8px;
}
.ref-bind-row input {
  flex: 1;
  min-width: 0;
  font-family: var(--mono);
  letter-spacing: .06em;
}
.ref-tiers { display: flex; flex-direction: column; gap: 8px; }
.ref-tier {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 12px;
  background: var(--card2);
  border-radius: 12px;
  border: 1px solid transparent;
}
.ref-tier.current {
  border-color: var(--mint);
  background: var(--mint-dim);
}
.ref-tier-badge {
  width: 40px;
  height: 40px;
  border-radius: 12px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: 800;
  font-size: .85rem;
  flex-shrink: 0;
  background: var(--card);
  color: var(--muted);
}
.ref-tier.current .ref-tier-badge {
  background: var(--mint);
  color: #031510;
}
.ref-tier-info { flex: 1; min-width: 0; }
.ref-tier-info .tn { font-weight: 600; font-size: .88rem; }
.ref-tier-info .td { font-size: .72rem; color: var(--muted); margin-top: 2px; }
.ref-tier-rate {
  font-weight: 700;
  font-size: .85rem;
  color: var(--mint);
  white-space: nowrap;
}
.ref-steps { display: flex; flex-direction: column; gap: 12px; }
.ref-step {
  display: flex;
  gap: 12px;
  align-items: flex-start;
}
.ref-step-n {
  width: 28px;
  height: 28px;
  border-radius: 50%;
  background: var(--mint-dim);
  color: var(--mint);
  font-weight: 700;
  font-size: .85rem;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}
.ref-step b { font-size: .88rem; }
.ref-rules {
  margin: 0;
  padding-left: 18px;
  font-size: .82rem;
  color: var(--muted);
  line-height: 1.65;
}
.ref-rules li { margin-bottom: 4px; }
.ref-rules b { color: var(--text); }
.ref-invite-list { display: flex; flex-direction: column; gap: 4px; }
.ref-invite-row {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px 0;
  border-bottom: 1px solid rgba(42,49,60,.4);
}
.ref-invite-row:last-child { border-bottom: none; }
.ref-invite-av {
  width: 36px;
  height: 36px;
  border-radius: 50%;
  background: linear-gradient(135deg, var(--mint), #3b82f6);
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: 700;
  font-size: .8rem;
  color: #031510;
  flex-shrink: 0;
}
.ref-invite-info { flex: 1; min-width: 0; }
.ref-invite-info .n { font-weight: 600; font-size: .85rem; }
.ref-invite-info .s { font-size: .7rem; color: var(--muted); margin-top: 1px; }
.ref-invite-pts { font-weight: 600; font-size: .85rem; color: var(--mint); }

/* ===== Pusat Referral — Bitget-style ===== */
.ref-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 14px 12px 10px;
  position: sticky;
  top: 0;
  background: rgba(11,14,17,.92);
  backdrop-filter: blur(12px);
  z-index: 10;
}
.ref-back {
  width: 40px; height: 40px;
  display: flex; align-items: center; justify-content: center;
  background: none; border: none; color: var(--text); cursor: pointer;
  border-radius: 50%;
}
.ref-back:active { background: var(--card); }
.ref-header-title {
  font-size: 1.05rem;
  font-weight: 600;
  letter-spacing: -.01em;
}

.ref-section-label {
  padding: 8px 18px 10px;
  font-size: .9rem;
  font-weight: 600;
  color: var(--text2, var(--text));
}

/* Promo card */
.ref-promo-card {
  position: relative;
  margin: 0 14px 16px;
  border-radius: 18px;
  overflow: hidden;
  background: linear-gradient(135deg, #0a2a28 0%, #0d3d38 40%, #0a2528 100%);
  border: 1px solid rgba(0,212,170,.2);
  cursor: pointer;
  min-height: 120px;
}
.ref-promo-bg {
  position: absolute;
  inset: 0;
  background:
    radial-gradient(ellipse at 90% 20%, rgba(0,230,184,.18), transparent 55%),
    radial-gradient(ellipse at 10% 80%, rgba(0,180,150,.1), transparent 50%);
  pointer-events: none;
}
.ref-promo-body {
  position: relative;
  display: flex;
  padding: 18px 16px;
  gap: 12px;
  z-index: 1;
}
.ref-promo-left { flex: 1; min-width: 0; }
.ref-promo-title {
  font-size: 1.15rem;
  font-weight: 700;
  color: #e8fffa;
  margin-bottom: 4px;
}
.ref-promo-desc {
  font-size: .78rem;
  color: rgba(200,240,230,.75);
  line-height: 1.4;
  margin-bottom: 12px;
}
.ref-promo-tags {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}
.ref-tag {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  font-size: .7rem;
  color: rgba(180,230,220,.85);
  font-weight: 500;
}
.ref-tag svg { opacity: .8; }
.ref-promo-right {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  justify-content: flex-start;
  flex-shrink: 0;
}
.ref-promo-badge {
  font-size: .65rem;
  font-weight: 700;
  color: #031510;
  background: linear-gradient(135deg, #7dffa8, #00e6b8);
  padding: 3px 8px;
  border-radius: 6px;
  margin-bottom: 4px;
}
.ref-promo-amount {
  font-size: 1.6rem;
  font-weight: 800;
  color: #7dffa8;
  letter-spacing: -.03em;
  line-height: 1.1;
  text-shadow: 0 0 20px rgba(125,255,168,.3);
}
.ref-promo-amount span { font-size: 1.85rem; }
.ref-promo-arrow {
  position: absolute;
  right: 12px;
  bottom: 14px;
  color: rgba(180,230,220,.5);
  z-index: 1;
}

/* Unlock trading card */
.ref-unlock-card {
  margin: 0 14px 16px;
  background: var(--card);
  border: 1px solid var(--border);
  border-radius: 20px;
  padding: 20px 18px 16px;
  box-shadow: 0 -8px 32px rgba(0,0,0,.25);
}
.ref-unlock-title {
  font-size: 1.15rem;
  font-weight: 700;
  margin-bottom: 16px;
  letter-spacing: -.02em;
}
.ref-unlock-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 12px 0;
  border-bottom: 1px solid rgba(42,49,60,.45);
}
.ref-unlock-row:last-of-type { border-bottom: none; margin-bottom: 8px; }
.ref-unlock-name {
  display: block;
  font-weight: 600;
  font-size: .92rem;
}
.ref-unlock-hint {
  display: block;
  font-size: .78rem;
  color: var(--muted);
  margin-top: 2px;
}
.ref-unlock-hint b { color: #00d4aa; font-weight: 700; }
.ref-lock-ico {
  width: 36px; height: 36px;
  border-radius: 50%;
  background: var(--card2);
  display: flex; align-items: center; justify-content: center;
  color: var(--muted);
}
.ref-lock-ico.unlocked {
  background: var(--mint-dim);
  color: var(--mint);
}

.ref-btn-primary {
  display: block;
  width: 100%;
  padding: 15px;
  border: none;
  border-radius: 28px;
  background: linear-gradient(135deg, #00e5c8, #00c4a8);
  color: #031510;
  font-weight: 700;
  font-size: .95rem;
  cursor: pointer;
  margin-top: 12px;
  transition: filter .15s, transform .12s;
}
.ref-btn-primary:active { transform: scale(.98); filter: brightness(1.05); }
.ref-btn-ghost {
  display: block;
  width: 100%;
  padding: 14px;
  border: none;
  border-radius: 28px;
  background: transparent;
  color: var(--muted);
  font-weight: 600;
  font-size: .9rem;
  cursor: pointer;
  margin-top: 4px;
}
.ref-btn-ghost:active { color: var(--text); }
.ref-btn-sm {
  padding: 10px 18px;
  border: none;
  border-radius: 12px;
  background: var(--mint);
  color: #031510;
  font-weight: 700;
  font-size: .85rem;
  cursor: pointer;
  flex-shrink: 0;
}

/* Code strip */
.ref-code-strip {
  margin: 0 14px 14px;
  background: var(--card);
  border: 1px solid var(--border);
  border-radius: 14px;
  padding: 14px 16px;
}
.ref-code-strip-label {
  font-size: .72rem;
  color: var(--muted);
  font-weight: 600;
  margin-bottom: 8px;
}
.ref-code-strip-row {
  display: flex;
  align-items: center;
  gap: 8px;
}
.ref-code-val {
  flex: 1;
  font-family: var(--mono);
  font-size: 1.25rem;
  font-weight: 700;
  letter-spacing: .14em;
  color: var(--mint);
}
.ref-icon-btn {
  width: 40px; height: 40px;
  border-radius: 12px;
  border: 1px solid var(--border);
  background: var(--card2);
  color: var(--text);
  display: flex; align-items: center; justify-content: center;
  cursor: pointer;
}
.ref-icon-btn:active { border-color: var(--mint); color: var(--mint); }

/* Mini stats */
.ref-mini-stats {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 8px;
  margin: 0 14px 14px;
}
.ref-mini-stat {
  background: var(--card);
  border: 1px solid var(--border);
  border-radius: 12px;
  padding: 12px 6px;
  text-align: center;
}
.ref-mini-val {
  font-size: .95rem;
  font-weight: 700;
  color: var(--mint);
  font-variant-numeric: tabular-nums;
}
.ref-mini-label {
  font-size: .65rem;
  color: var(--muted);
  margin-top: 3px;
}

/* Bind */
.ref-bind-card {
  margin: 0 14px 14px;
  background: var(--card);
  border: 1px solid var(--border);
  border-radius: 14px;
  padding: 14px 16px;
}
.ref-bind-title {
  display: flex;
  align-items: center;
  gap: 8px;
  font-weight: 600;
  font-size: .9rem;
  margin-bottom: 10px;
  color: var(--text);
}
.ref-bind-title svg { color: var(--mint); }
.ref-bind-row {
  display: flex;
  gap: 8px;
}
.ref-bind-row input {
  flex: 1;
  min-width: 0;
  font-family: var(--mono);
  letter-spacing: .06em;
  text-transform: uppercase;
  padding: 11px 12px;
  font-size: .9rem;
}
.ref-bound-info {
  margin-top: 8px;
  font-size: .8rem;
  color: var(--mint);
}

/* How */
.ref-how {
  margin: 0 14px 14px;
  background: var(--card);
  border: 1px solid var(--border);
  border-radius: 14px;
  padding: 16px;
}
.ref-how-title {
  font-weight: 700;
  font-size: .9rem;
  margin-bottom: 14px;
}
.ref-how-step {
  display: flex;
  gap: 12px;
  align-items: flex-start;
  margin-bottom: 14px;
}
.ref-how-step:last-child { margin-bottom: 0; }
.ref-how-num {
  width: 28px; height: 28px;
  border-radius: 50%;
  background: var(--mint-dim);
  color: var(--mint);
  font-weight: 700;
  font-size: .85rem;
  display: flex; align-items: center; justify-content: center;
  flex-shrink: 0;
}
.ref-how-text b { display: block; font-size: .88rem; margin-bottom: 2px; }
.ref-how-text span { font-size: .75rem; color: var(--muted); line-height: 1.35; }

/* Invite list */
.ref-list-card {
  margin: 0 14px 14px;
  background: var(--card);
  border: 1px solid var(--border);
  border-radius: 14px;
  padding: 14px 16px;
}
.ref-list-head {
  display: flex;
  justify-content: space-between;
  align-items: center;
  font-weight: 700;
  font-size: .9rem;
  margin-bottom: 10px;
}
.ref-empty {
  text-align: center;
  padding: 20px 10px;
  color: var(--muted);
  font-size: .85rem;
}
.ref-invite-list { display: flex; flex-direction: column; }
.ref-invite-row {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px 0;
  border-bottom: 1px solid rgba(42,49,60,.4);
}
.ref-invite-row:last-child { border-bottom: none; }
.ref-invite-av {
  width: 36px; height: 36px;
  border-radius: 50%;
  background: linear-gradient(135deg, var(--mint), #3b82f6);
  display: flex; align-items: center; justify-content: center;
  font-weight: 700; font-size: .8rem; color: #031510;
  flex-shrink: 0;
}
.ref-invite-info { flex: 1; min-width: 0; }
.ref-invite-info .n { font-weight: 600; font-size: .85rem; }
.ref-invite-info .s { font-size: .7rem; color: var(--muted); margin-top: 1px; }
.ref-invite-pts { font-weight: 600; font-size: .85rem; color: var(--mint); }

/* Share overlay */
.ref-share-overlay {
  position: fixed;
  inset: 0;
  background: rgba(0,0,0,.65);
  backdrop-filter: blur(6px);
  z-index: 220;
  display: none;
  align-items: flex-end;
  justify-content: center;
}
.ref-share-overlay.show { display: flex; }
.ref-share-sheet {
  width: 100%;
  max-width: 430px;
  background: var(--surface, #12161C);
  border-radius: 22px 22px 0 0;
  padding: 12px 0 calc(20px + var(--safe-b));
  animation: slideUp .3s cubic-bezier(.22,1,.36,1);
  max-height: 92vh;
  overflow-y: auto;
}
.ref-share-handle {
  width: 36px; height: 4px;
  background: var(--border2, #353D4A);
  border-radius: 2px;
  margin: 0 auto 12px;
}
.ref-share-title {
  text-align: center;
  font-weight: 700;
  font-size: 1rem;
  margin-bottom: 14px;
}
.ref-share-card {
  margin: 0 20px 18px;
  border-radius: 20px;
  overflow: hidden;
  background: linear-gradient(160deg, #7dfff0 0%, #5eead4 40%, #2dd4bf 100%);
  box-shadow: 0 12px 40px rgba(0,212,170,.25);
}
.ref-share-card-inner {
  padding: 22px 18px 16px;
  color: #0a1628;
}
.ref-share-headline {
  font-size: 1.55rem;
  font-weight: 800;
  line-height: 1.15;
  letter-spacing: -.02em;
  text-align: center;
}
.ref-share-headline span {
  color: #16a34a;
  -webkit-text-stroke: 1px #0a1628;
}
.ref-share-sub {
  text-align: center;
  font-size: .85rem;
  font-weight: 600;
  opacity: .75;
  margin: 4px 0 16px;
}
.ref-share-visual {
  display: flex;
  justify-content: center;
  margin-bottom: 14px;
}
.ref-share-wallet-card {
  width: 160px;
  height: 100px;
  border-radius: 14px;
  background: linear-gradient(135deg, #0c1220 0%, #152238 100%);
  border: 1px solid rgba(0,230,184,.3);
  position: relative;
  box-shadow: 0 8px 24px rgba(0,0,0,.35);
  display: flex;
  align-items: center;
  justify-content: center;
}
.ref-share-logo {
  font-size: 1.8rem;
  font-weight: 800;
  color: #00e6b8;
  letter-spacing: -.04em;
}
.ref-share-chip {
  position: absolute;
  top: 14px; left: 14px;
  width: 22px; height: 16px;
  border-radius: 3px;
  background: linear-gradient(135deg, #c9a84c, #e8d48b);
  opacity: .85;
}
.ref-share-code-line {
  text-align: center;
  font-size: .78rem;
  line-height: 1.45;
  margin-bottom: 14px;
  color: #0a1628;
}
.ref-share-code-line strong {
  font-family: var(--mono);
  font-size: 1.05rem;
  letter-spacing: .08em;
  color: #0a1628;
}
.ref-share-footer {
  display: flex;
  align-items: center;
  justify-content: space-between;
  background: rgba(255,255,255,.35);
  border-radius: 12px;
  padding: 10px 12px;
}
.ref-share-brand {
  display: flex;
  align-items: center;
  gap: 8px;
}
.ref-share-brand-ico {
  width: 32px; height: 32px;
  border-radius: 8px;
  background: #0c1220;
  color: #00e6b8;
  font-weight: 800;
  font-size: .9rem;
  display: flex; align-items: center; justify-content: center;
}
.ref-share-brand-name { font-weight: 700; font-size: .8rem; }
.ref-share-brand-sub { font-size: .65rem; opacity: .7; }
#refShareQr {
  border-radius: 6px;
  background: #fff;
}

.ref-share-actions {
  display: flex;
  justify-content: space-around;
  padding: 4px 12px 8px;
}
.ref-share-act {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 6px;
  background: none;
  border: none;
  color: var(--text);
  cursor: pointer;
  font-size: .68rem;
  font-weight: 500;
  min-width: 64px;
}
.ref-share-act-ico {
  width: 48px; height: 48px;
  border-radius: 50%;
  background: var(--card);
  border: 1px solid var(--border);
  display: flex; align-items: center; justify-content: center;
  color: var(--text);
}
.ref-share-act:active .ref-share-act-ico {
  border-color: var(--mint);
  color: var(--mint);
}

/* ===== Optimized card transitions ===== */
.ref-promo-card,
.ref-unlock-card,
.ref-code-strip,
.ref-mini-stats,
.ref-bind-card,
.ref-how,
.ref-list-card {
  opacity: 0;
  transform: translateY(16px) scale(.98);
  animation: cardEnter .45s cubic-bezier(.22, 1, .36, 1) forwards;
}
.ref-promo-card { animation-delay: .04s; }
.ref-unlock-card { animation-delay: .1s; }
.ref-code-strip { animation-delay: .16s; }
.ref-mini-stats { animation-delay: .2s; }
.ref-bind-card { animation-delay: .24s; }
.ref-how { animation-delay: .28s; }
.ref-list-card { animation-delay: .32s; }

@keyframes cardEnter {
  from {
    opacity: 0;
    transform: translateY(18px) scale(.97);
  }
  to {
    opacity: 1;
    transform: translateY(0) scale(1);
  }
}

/* Promo card hover/press micro-interaction */
.ref-promo-card {
  transition: transform .25s cubic-bezier(.22,1,.36,1), box-shadow .25s ease, border-color .2s;
  will-change: transform;
}
.ref-promo-card:active {
  transform: scale(.975);
}
.ref-promo-card:hover {
  box-shadow: 0 8px 28px rgba(0, 230, 184, .18);
  border-color: rgba(0, 230, 184, .35);
}

/* Unlock card soft rise */
.ref-unlock-card {
  transition: transform .3s cubic-bezier(.22,1,.36,1), box-shadow .3s ease;
}
.ref-unlock-card:hover {
  box-shadow: 0 12px 36px rgba(0,0,0,.3);
}

/* Lock icon unlock animation */
.ref-lock-ico {
  transition: background .3s ease, color .3s ease, transform .35s cubic-bezier(.34,1.56,.64,1);
}
.ref-lock-ico.unlocked {
  animation: unlockPop .5s cubic-bezier(.34,1.56,.64,1);
}
@keyframes unlockPop {
  0% { transform: scale(1); }
  40% { transform: scale(1.25) rotate(-8deg); }
  70% { transform: scale(.92) rotate(4deg); }
  100% { transform: scale(1) rotate(0); }
}

/* Share sheet optimized */
.ref-share-overlay {
  transition: opacity .28s ease;
  opacity: 0;
  pointer-events: none;
}
.ref-share-overlay.show {
  opacity: 1;
  pointer-events: auto;
}
.ref-share-sheet {
  transform: translateY(100%);
  transition: transform .38s cubic-bezier(.22, 1, .36, 1);
  will-change: transform;
}
.ref-share-overlay.show .ref-share-sheet {
  transform: translateY(0);
}
.ref-share-card {
  opacity: 0;
  transform: scale(.92) translateY(12px);
  transition: opacity .35s ease .08s, transform .4s cubic-bezier(.22,1,.36,1) .08s;
}
.ref-share-overlay.show .ref-share-card {
  opacity: 1;
  transform: scale(1) translateY(0);
}
.ref-share-actions {
  opacity: 0;
  transform: translateY(10px);
  transition: opacity .3s ease .15s, transform .35s cubic-bezier(.22,1,.36,1) .15s;
}
.ref-share-overlay.show .ref-share-actions {
  opacity: 1;
  transform: translateY(0);
}
.ref-share-act-ico {
  transition: transform .2s cubic-bezier(.34,1.56,.64,1), border-color .15s, color .15s, background .15s;
}
.ref-share-act:active .ref-share-act-ico {
  transform: scale(.88);
}

/* Primary/ghost button press */
.ref-btn-primary {
  transition: transform .18s cubic-bezier(.22,1,.36,1), filter .15s, box-shadow .2s;
  box-shadow: 0 4px 18px rgba(0, 229, 200, .28);
}
.ref-btn-primary:active {
  transform: scale(.97);
  box-shadow: 0 2px 10px rgba(0, 229, 200, .2);
}
.ref-btn-ghost {
  transition: color .15s, background .15s;
}

/* Mini stats stagger feel */
.ref-mini-stat {
  transition: transform .2s ease, border-color .2s;
}
.ref-mini-stat:active {
  transform: scale(.96);
}

/* Code strip copy feedback */
.ref-code-val {
  transition: color .2s, letter-spacing .25s ease;
}
.ref-code-val.copied {
  color: #7dffa8;
  letter-spacing: .18em;
}
.ref-icon-btn {
  transition: transform .2s cubic-bezier(.34,1.56,.64,1), border-color .15s, color .15s, background .15s;
}
.ref-icon-btn:active {
  transform: scale(.9);
}

/* ===== Modern QR styles ===== */
.qr-wrap-modern {
  background: #fff;
  border-radius: 20px;
  padding: 16px;
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow:
    0 8px 32px rgba(0,0,0,.35),
    0 0 0 1px rgba(0,230,184,.08);
  position: relative;
  overflow: hidden;
}
.qr-wrap-modern::after {
  content: '';
  position: absolute;
  inset: 0;
  border-radius: 20px;
  pointer-events: none;
  box-shadow: inset 0 0 0 1px rgba(0,0,0,.04);
}
.qr-host {
  width: 200px;
  height: 200px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 12px;
  overflow: hidden;
}
.qr-host canvas,
.qr-host img,
.qr-host svg {
  max-width: 100%;
  max-height: 100%;
  border-radius: 8px;
}
.qr-host-sm {
  width: 56px;
  height: 56px;
  border-radius: 8px;
  overflow: hidden;
  background: #fff;
  flex-shrink: 0;
}
.qr-host-sm canvas,
.qr-host-sm img,
.qr-host-sm svg {
  width: 56px !important;
  height: 56px !important;
  border-radius: 6px;
}

/* QR appear animation */
.qr-host {
  animation: qrFadeIn .4s cubic-bezier(.22,1,.36,1) both;
}
@keyframes qrFadeIn {
  from { opacity: 0; transform: scale(.9); }
  to { opacity: 1; transform: scale(1); }
}

/* Screen-level card transitions for home token rows etc */
.token-row,
.tx-row,
.settings-row,
.set-item {
  transition: background .15s ease, transform .15s cubic-bezier(.22,1,.36,1);
}
.token-row:active,
.tx-row:active {
  transform: scale(.985);
}

/* Modal sheet smoother */
.modal-bg.show .modal {
  animation: modalSheetIn .34s cubic-bezier(.22,1,.36,1) both;
}
@keyframes modalSheetIn {
  from { transform: translateY(100%); opacity: .6; }
  to { transform: translateY(0); opacity: 1; }
}

/* Reduce motion accessibility */
@media (prefers-reduced-motion: reduce) {
  .ref-promo-card,
  .ref-unlock-card,
  .ref-code-strip,
  .ref-mini-stats,
  .ref-bind-card,
  .ref-how,
  .ref-list-card,
  .ref-share-sheet,
  .ref-share-card,
  .ref-share-actions,
  .qr-host {
    animation: none !important;
    transition: none !important;
    opacity: 1 !important;
    transform: none !important;
  }
  .ref-share-overlay.show .ref-share-sheet,
  .ref-share-overlay.show .ref-share-card,
  .ref-share-overlay.show .ref-share-actions {
    transform: none !important;
    opacity: 1 !important;
  }
}

/* ===== Settings icons — Bitget-style outline ===== */
.set-topbar .set-title {
  font-size: 1.05rem;
  font-weight: 600;
  letter-spacing: -.01em;
}
.set-back-btn {
  width: 40px;
  height: 40px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: none;
  border: none;
  color: var(--text);
  cursor: pointer;
  border-radius: 50%;
  padding: 0;
}
.set-back-btn:active { background: var(--card); }
.set-back-btn .set-svg { width: 22px; height: 22px; }

.set-profile {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 14px 16px;
  background: var(--card);
  border: 1px solid var(--border);
  border-radius: 16px;
  margin: 8px 14px 4px;
  cursor: pointer;
}
.set-profile img {
  width: 48px;
  height: 48px;
  border-radius: 50%;
  object-fit: cover;
  background: var(--card2);
  flex-shrink: 0;
}
.set-profile-text { flex: 1; min-width: 0; }
.set-profile .nm { font-weight: 700; font-size: 1rem; }
.set-profile .sub {
  font-size: .72rem;
  color: var(--muted);
  margin-top: 3px;
  line-height: 1.35;
}
.set-arrow {
  color: var(--muted);
  display: flex;
  align-items: center;
  flex-shrink: 0;
}
.set-arrow .set-chevron { width: 18px; height: 18px; opacity: .7; }

.set-group {
  margin: 10px 14px;
  background: var(--card);
  border: 1px solid var(--border);
  border-radius: 16px;
  overflow: hidden;
}
.set-group .set-item {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 15px 16px;
  border-bottom: 1px solid rgba(42, 49, 60, .4);
  cursor: pointer;
  font-size: .92rem;
  font-weight: 500;
  color: var(--text);
  transition: background .15s;
}
.set-group .set-item:last-child { border-bottom: none; }
.set-group .set-item:active { background: rgba(255,255,255,.03); }

.set-group .set-item .ic {
  width: 24px;
  height: 24px;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  text-align: center;
  font-size: 1.05rem;
  color: var(--text2, #c5cad3);
}
.set-group .set-item .ic.ic-svg {
  color: #b0b8c4;
}
.set-group .set-item .ic.ic-accent {
  color: #2dd4bf;
}
.set-svg {
  width: 22px;
  height: 22px;
  display: block;
}
.set-chevron {
  width: 18px;
  height: 18px;
  display: block;
  opacity: .55;
}
.set-label {
  flex: 1;
  min-width: 0;
  text-align: left;
}
.set-group .set-item .arrow {
  margin-left: auto;
  color: var(--muted);
  display: flex;
  align-items: center;
}
.set-group .set-item .right {
  margin-left: auto;
  color: var(--mint);
  font-size: .82rem;
  font-weight: 600;
}

/* Footer help actions like Bitget */
.set-footer-actions {
  display: flex;
  justify-content: center;
  gap: 36px;
  padding: 28px 16px 12px;
}
.set-footer-btn {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
  background: none;
  border: none;
  color: var(--muted);
  font-size: .72rem;
  font-weight: 500;
  cursor: pointer;
  padding: 0;
}
.set-footer-ico {
  width: 48px;
  height: 48px;
  border-radius: 50%;
  background: var(--card);
  border: 1px solid var(--border);
  display: flex;
  align-items: center;
  justify-content: center;
  color: #c5cad3;
  transition: border-color .15s, color .15s;
}
.set-footer-ico .set-svg {
  width: 22px;
  height: 22px;
}
.set-footer-btn:active .set-footer-ico {
  border-color: var(--mint);
  color: var(--mint);
}

/* ===== Account sheet — Bitget style ===== */
.acc-sheet { padding: 0 4px 8px; }
.acc-hero {
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 8px 0 20px;
  text-align: center;
}
.acc-avatar-wrap {
  position: relative;
  width: 72px;
  height: 72px;
  margin-bottom: 12px;
}
.acc-avatar {
  width: 72px;
  height: 72px;
  border-radius: 50%;
  object-fit: cover;
  background: #1a2332;
  border: 2px solid var(--border);
}
.acc-avatar-badge {
  position: absolute;
  right: 0;
  bottom: 0;
  width: 22px;
  height: 22px;
  border-radius: 50%;
  background: #1c2330;
  border: 2px solid var(--bg);
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--muted);
}
.acc-name {
  font-size: 1.15rem;
  font-weight: 700;
  margin-bottom: 4px;
}
.acc-id {
  font-size: .78rem;
  color: var(--muted);
  display: inline-flex;
  align-items: center;
  gap: 4px;
  cursor: pointer;
  margin-bottom: 8px;
}
.acc-sec {
  font-size: .78rem;
  color: var(--muted);
}
.acc-sec-badge {
  font-weight: 600;
  margin-left: 4px;
}
.acc-sec-badge.mid { color: #f0b90b; }
.acc-sec-badge.ok { color: var(--green); }

.acc-list {
  background: var(--card);
  border: 1px solid var(--border);
  border-radius: 16px;
  overflow: hidden;
  margin-bottom: 18px;
}
.acc-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 16px;
  border-bottom: 1px solid rgba(42,49,60,.4);
  cursor: pointer;
  font-size: .92rem;
  font-weight: 500;
}
.acc-row:last-child { border-bottom: none; }
.acc-row:active { background: rgba(255,255,255,.03); }
.acc-row-right {
  display: flex;
  align-items: center;
  gap: 6px;
  color: var(--muted);
}
.acc-muted {
  font-size: .82rem;
  color: var(--muted);
  font-weight: 500;
}
.acc-chevron {
  width: 18px;
  height: 18px;
  opacity: .5;
}
.acc-delete-btn {
  display: block;
  width: 100%;
  padding: 14px;
  border-radius: 28px;
  border: 1.5px solid #f6465d;
  background: transparent;
  color: #f6465d;
  font-weight: 600;
  font-size: .95rem;
  cursor: pointer;
  transition: background .15s, transform .12s;
}
.acc-delete-btn:active {
  background: rgba(246,70,93,.08);
  transform: scale(.98);
}

/* ===== Bottom nav — Bitget-style SVG icons ===== */
.bottom-nav {
  position: fixed;
  bottom: 0;
  left: 50%;
  transform: translateX(-50%);
  width: 100%;
  max-width: 430px;
  height: calc(var(--nav-h) + var(--safe-b));
  padding: 6px 8px calc(6px + var(--safe-b));
  background: rgba(11, 14, 17, 0.94);
  backdrop-filter: blur(20px);
  -webkit-backdrop-filter: blur(20px);
  border-top: 1px solid rgba(42, 51, 68, 0.55);
  display: flex;
  align-items: center;
  justify-content: space-around;
  z-index: 100;
}
.nav-item {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 3px;
  background: none;
  border: none;
  color: #7a8494;
  font-size: .62rem;
  font-weight: 600;
  cursor: pointer;
  padding: 6px 10px;
  border-radius: 12px;
  min-width: 56px;
  transition: color .15s;
}
.nav-item .ni {
  font-size: 1.25rem;
  line-height: 1;
  display: flex;
  align-items: center;
  justify-content: center;
}
.nav-item .ni-svg {
  width: 24px;
  height: 24px;
}
.nav-item .ni-svg svg {
  width: 22px;
  height: 22px;
  display: block;
}
.nav-item .nl {
  font-size: .62rem;
  font-weight: 600;
  letter-spacing: .01em;
}
.nav-item.active {
  color: var(--mint);
}
.nav-item.active .ni-svg {
  color: var(--mint);
}
.nav-item:active {
  opacity: .75;
}

/* ENS hint on send */
.ens-hint {
  font-size: .72rem;
  color: var(--muted);
  max-width: 70%;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.ens-hint.ok { color: var(--green); }
.ens-hint.err { color: var(--red); }
.ens-hint.loading { color: var(--orange); }

/* Account center polish */
.acc-sec-badge.low { color: #f6465d; }
.avatar-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 10px;
  margin-top: 8px;
}
.avatar-opt {
  aspect-ratio: 1;
  border-radius: 14px;
  border: 2px solid var(--border);
  background: var(--card2);
  padding: 0;
  overflow: hidden;
  cursor: pointer;
  transition: border-color .15s, transform .12s;
}
.avatar-opt img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}
.avatar-opt.selected,
.avatar-opt:hover {
  border-color: var(--mint);
}
.avatar-opt:active { transform: scale(.95); }

.seed-grid {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  gap: 8px;
}
.seed-word {
  background: var(--card2);
  border: 1px solid var(--border);
  border-radius: 10px;
  padding: 8px 10px;
  font-size: .8rem;
  font-family: var(--mono);
  display: flex;
  gap: 6px;
  align-items: center;
}
.seed-word .n {
  color: var(--muted);
  font-size: .68rem;
  min-width: 14px;
}

.acc-avatar-wrap { cursor: pointer; }
.acc-avatar-wrap:active { opacity: .85; }

/* ===== Security Center polished ===== */
.sec-sheet { padding: 0 2px 8px; }
.sec-title-row {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 14px;
}
.sec-title-ico {
  width: 36px;
  height: 36px;
  border-radius: 10px;
  background: rgba(0, 230, 184, .1);
  color: var(--mint);
  display: flex;
  align-items: center;
  justify-content: center;
}
.sec-title {
  margin: 0;
  font-size: 1.15rem;
  font-weight: 700;
}
.sec-card {
  background: var(--card);
  border: 1px solid var(--border);
  border-radius: 16px;
  padding: 14px 16px;
  margin-bottom: 12px;
}
.sec-card.sec-warn {
  background: rgba(246, 70, 93, .08);
  border-color: rgba(246, 70, 93, .28);
}
.sec-card.sec-ok {
  background: rgba(0, 230, 184, .06);
  border-color: rgba(0, 230, 184, .22);
}
.sec-card-head {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  margin-bottom: 6px;
}
.sec-card-ico {
  color: var(--muted);
  flex-shrink: 0;
  margin-top: 2px;
}
.sec-card-title {
  font-weight: 650;
  font-size: .95rem;
}
.sec-card-sub {
  font-size: .75rem;
  color: var(--muted);
  margin-top: 2px;
}
.sec-desc {
  font-size: .82rem;
  color: var(--muted);
  line-height: 1.45;
  margin: 0 0 12px;
}
.sec-badge {
  display: inline-block;
  font-size: .82rem;
  font-weight: 700;
  padding: 2px 0;
}
.sec-badge.warn { color: #f0b90b; }
.sec-badge.ok { color: var(--green); }
.sec-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}
.sec-actions .btn-sm {
  padding: 8px 16px;
  border-radius: 20px;
  font-size: .82rem;
}

/* Radio list like Bitget */
.sec-radio-list {
  margin-top: 10px;
  border-top: 1px solid rgba(42,49,60,.4);
}
.sec-radio {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 14px 0;
  border-bottom: 1px solid rgba(42,49,60,.35);
  cursor: pointer;
  position: relative;
}
.sec-radio:last-child { border-bottom: none; }
.sec-radio input {
  position: absolute;
  opacity: 0;
  pointer-events: none;
}
.sec-radio-label {
  font-size: .9rem;
  font-weight: 500;
}
.sec-radio-dot {
  width: 20px;
  height: 20px;
  border-radius: 50%;
  border: 2px solid #5a6575;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  transition: border-color .15s;
}
.sec-radio.on .sec-radio-dot {
  border-color: #3b82f6;
}
.sec-radio-dot-in {
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background: #3b82f6;
}

.sec-links { padding: 4px 0; }
.sec-link-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: 100%;
  padding: 13px 16px;
  background: none;
  border: none;
  border-bottom: 1px solid rgba(42,49,60,.35);
  color: var(--text);
  font-size: .9rem;
  font-weight: 500;
  cursor: pointer;
  text-align: left;
}
.sec-link-row:last-child { border-bottom: none; }
.sec-link-row:active { background: rgba(255,255,255,.03); }

.sec-tips-list {
  margin: 0;
  padding-left: 18px;
  font-size: .78rem;
  color: var(--muted);
  line-height: 1.55;
}
.sec-tips-list li { margin-bottom: 4px; }


/* PIN overlay must sit above modals */
#pinOverlay {
  z-index: 500 !important;
  background: rgba(7, 9, 13, 0.96) !important;
}
#pinOverlay.show {
  display: flex !important;
}
.pin-err {
  color: #F6465D;
  font-size: .8rem;
  min-height: 1.2em;
  margin: 4px 0 0;
  text-align: center;
}

/* ===== Bitget-style Onboarding ===== */
.ob-welcome {
  position: relative;
  min-height: 100%;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  overflow: hidden;
  background: #0a1210;
}
.ob-bg {
  position: absolute;
  inset: 0;
  background:
    radial-gradient(ellipse 80% 50% at 50% 20%, rgba(45, 212, 191, .18), transparent 60%),
    linear-gradient(180deg, #1a2e2a 0%, #0a1210 55%, #07100e 100%);
}
.ob-bg::after {
  content: '';
  position: absolute;
  inset: 0;
  background: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" width="100" height="100"><circle cx="50" cy="50" r="1" fill="%23ffffff11"/></svg>');
  opacity: .4;
}
.ob-gradient {
  position: absolute;
  left: 0; right: 0; bottom: 0;
  height: 55%;
  background: linear-gradient(to top, #07100e 20%, transparent);
  pointer-events: none;
}
.ob-content {
  position: relative;
  z-index: 2;
  padding: 24px 22px calc(28px + var(--safe-b));
}
.ob-headline {
  font-size: 1.85rem;
  font-weight: 800;
  line-height: 1.2;
  letter-spacing: -.03em;
  color: #fff;
  margin-bottom: 28px;
}
.ob-accent { color: #2dd4bf; }
.ob-actions {
  display: flex;
  flex-direction: column;
  gap: 12px;
}
.ob-btn {
  display: block;
  width: 100%;
  border: none;
  border-radius: 28px;
  padding: 16px 20px;
  font-size: .95rem;
  font-weight: 700;
  cursor: pointer;
  text-align: center;
  transition: transform .12s, filter .15s;
}
.ob-btn:active { transform: scale(.98); }
.ob-btn-primary {
  background: linear-gradient(180deg, #2ee6c8, #14b8a6);
  color: #042f2e;
  box-shadow: 0 8px 24px rgba(20, 184, 166, .35);
}
.ob-btn-secondary {
  background: #134e4a;
  color: #fff;
}
.ob-btn-dark {
  background: #115e59;
  color: #fff;
  border-radius: 28px;
}
.ob-legal {
  margin-top: 18px;
  font-size: .68rem;
  color: rgba(255,255,255,.45);
  text-align: center;
  line-height: 1.45;
}

/* Bottom sheets */
.ob-sheet-bg {
  position: fixed;
  inset: 0;
  background: rgba(0,0,0,.55);
  z-index: 280;
  display: none;
  align-items: flex-end;
  justify-content: center;
}
.ob-sheet-bg.show { display: flex; }
.ob-sheet {
  width: 100%;
  max-width: 430px;
  background: #0f1c1a;
  border-radius: 20px 20px 0 0;
  padding: 10px 20px calc(24px + var(--safe-b));
  animation: obSheetIn .32s cubic-bezier(.22,1,.36,1);
}
@keyframes obSheetIn {
  from { transform: translateY(100%); }
  to { transform: translateY(0); }
}
.ob-sheet-handle {
  width: 36px;
  height: 4px;
  border-radius: 2px;
  background: rgba(255,255,255,.2);
  margin: 4px auto 16px;
}
.ob-sheet-icon {
  width: 64px;
  height: 64px;
  margin: 0 auto 12px;
  display: flex;
  align-items: center;
  justify-content: center;
}
.ob-sheet-title {
  text-align: center;
  font-size: 1.25rem;
  font-weight: 700;
  margin: 0 0 20px;
  color: #fff;
}
.ob-option {
  display: flex;
  align-items: center;
  gap: 12px;
  width: 100%;
  padding: 14px 16px;
  margin-bottom: 10px;
  background: #152624;
  border: 1px solid rgba(255,255,255,.06);
  border-radius: 14px;
  color: #fff;
  font-size: .92rem;
  font-weight: 600;
  cursor: pointer;
  text-align: left;
}
.ob-option:active { background: #1a302d; }
.ob-opt-ico {
  width: 36px;
  height: 36px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: 800;
  font-size: .9rem;
  flex-shrink: 0;
}
.ob-opt-ico.google { background: #fff; color: #4285F4; }
.ob-opt-ico.email { background: #1e3a5f; color: #7dd3fc; }
.ob-opt-ico.mpc { background: #1e293b; color: #94a3b8; font-size: .65rem; letter-spacing: .04em; }
.ob-opt-ico.hw { background: #1e293b; color: #94a3b8; }
.ob-opt-label { flex: 1; }
.ob-opt-text { flex: 1; display: flex; flex-direction: column; gap: 2px; }
.ob-opt-desc { font-size: .72rem; font-weight: 500; color: rgba(255,255,255,.45); }
.ob-opt-chevron { color: rgba(255,255,255,.35); font-size: 1.2rem; }
.ob-divider {
  display: flex;
  align-items: center;
  gap: 12px;
  margin: 14px 0;
  color: rgba(255,255,255,.35);
  font-size: .78rem;
}
.ob-divider::before,
.ob-divider::after {
  content: '';
  flex: 1;
  height: 1px;
  background: rgba(255,255,255,.1);
}

/* Import page */
.imp-page {
  padding: 12px 20px calc(24px + var(--safe-b));
  min-height: 100%;
  background: #0a1210;
}
.imp-top {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 18px;
}
.imp-back {
  width: 40px;
  height: 40px;
  border: none;
  background: none;
  color: #fff;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
}
.imp-back:active { background: rgba(255,255,255,.06); }
.imp-title {
  font-size: 1.45rem;
  font-weight: 800;
  line-height: 1.25;
  color: #fff;
  margin: 0 0 10px;
  letter-spacing: -.02em;
}
.imp-sub {
  font-size: .82rem;
  color: rgba(255,255,255,.5);
  line-height: 1.45;
  margin: 0 0 18px;
}
.imp-field-wrap {
  position: relative;
  background: #152624;
  border: 1px solid rgba(255,255,255,.08);
  border-radius: 16px;
  padding: 14px;
  min-height: 140px;
}
.imp-textarea {
  width: 100%;
  min-height: 100px;
  background: transparent;
  border: none;
  color: #fff;
  font-size: .9rem;
  line-height: 1.5;
  resize: none;
  outline: none;
  font-family: inherit;
}
.imp-textarea::placeholder { color: rgba(255,255,255,.3); }
.imp-paste {
  position: absolute;
  right: 12px;
  bottom: 12px;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 8px 14px;
  border-radius: 20px;
  border: 1px solid rgba(255,255,255,.12);
  background: #0f1c1a;
  color: #fff;
  font-size: .78rem;
  font-weight: 600;
  cursor: pointer;
}
.imp-paste:active { background: #1a302d; }

.imp-seed-hint {
  font-size: .72rem;
  margin-top: 8px;
  color: rgba(255,255,255,.4);
  min-height: 1.2em;
}
.imp-seed-hint.ok { color: #34d399; }
.imp-seed-hint.err { color: #f87171; }

/* Secure manual paste */
.sec-clip-area {
  width: 100%;
  min-height: 120px;
  background: rgba(0,0,0,.25);
  border: 1px solid rgba(255,255,255,.1);
  border-radius: 12px;
  color: #fff;
  padding: 12px;
  font-size: .9rem;
  line-height: 1.45;
  resize: vertical;
  outline: none;
  font-family: inherit;
}
.sec-clip-area:focus {
  border-color: rgba(45, 212, 191, .45);
  box-shadow: 0 0 0 3px rgba(45, 212, 191, .12);
}

/* Onboard polish + running dog */
.ob-welcome { position: relative; min-height: 100%; display: flex; flex-direction: column; justify-content: flex-end; overflow: hidden; background: #07100e; }
.ob-dog-stage {
  position: absolute;
  left: 0; right: 0;
  top: 12%;
  height: 160px;
  overflow: hidden;
  z-index: 1;
  pointer-events: none;
}
.ob-dog-runner {
  position: absolute;
  bottom: 18px;
  animation: dogRun 4.5s linear infinite;
}
.ob-dog-svg { display: block; filter: drop-shadow(0 8px 16px rgba(45,212,191,.25)); }
.dog-body { transform-origin: 60px 42px; animation: dogBounce .35s ease-in-out infinite alternate; }
.leg { transform-origin: 0 0; }
.leg-f1 { animation: legF 0.28s linear infinite; }
.leg-f2 { animation: legF 0.28s linear infinite reverse; }
.leg-b1 { animation: legB 0.28s linear infinite reverse; }
.leg-b2 { animation: legB 0.28s linear infinite; }
@keyframes dogRun {
  0% { left: -30%; transform: scaleX(1); }
  45% { left: 75%; transform: scaleX(1); }
  50% { left: 75%; transform: scaleX(-1); }
  95% { left: -25%; transform: scaleX(-1); }
  100% { left: -30%; transform: scaleX(1); }
}
@keyframes dogBounce {
  from { transform: translateY(0); }
  to { transform: translateY(-4px); }
}
@keyframes legF {
  0% { transform: rotate(28deg); }
  50% { transform: rotate(-32deg); }
  100% { transform: rotate(28deg); }
}
@keyframes legB {
  0% { transform: rotate(-30deg); }
  50% { transform: rotate(30deg); }
  100% { transform: rotate(-30deg); }
}
.ob-ground {
  position: absolute;
  left: 0; right: 0; bottom: 8px;
  height: 3px;
  background: linear-gradient(90deg, transparent, rgba(45,212,191,.35), transparent);
  border-radius: 2px;
}
.ob-slides { position: relative; min-height: 5.2rem; margin-bottom: 10px; }
.ob-slide {
  position: absolute; left: 0; right: 0;
  font-size: 1.85rem; font-weight: 800; line-height: 1.2;
  letter-spacing: -.03em; color: #fff;
  opacity: 0; transform: translateY(10px);
  transition: opacity .45s ease, transform .45s ease;
  pointer-events: none;
}
.ob-slide.active { opacity: 1; transform: translateY(0); position: relative; }
.ob-dots { display: flex; gap: 6px; margin-bottom: 20px; }
.ob-dots span {
  width: 6px; height: 6px; border-radius: 50%;
  background: rgba(255,255,255,.25);
}
.ob-dots span.on { background: #2dd4bf; width: 16px; border-radius: 4px; }
.ob-sheet-bg {
  position: fixed; inset: 0;
  background: rgba(0,0,0,.55);
  z-index: 400;
  display: none;
  align-items: flex-end;
  justify-content: center;
}
.ob-sheet-bg.show { display: flex !important; }
.seed-panel { padding-top: 24px; }
.seed-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 8px;
  margin-top: 12px;
}
.seed-word {
  background: var(--card, #152624);
  border: 1px solid rgba(255,255,255,.06);
  border-radius: 10px;
  padding: 10px 12px;
  font-size: .85rem;
}
.seed-word span { color: var(--muted, #64748b); margin-right: 6px; font-size: .75rem; }

/* ============================================================
   BaseRocky Wallet v6.1 — Polish Layer
   Non-destructive visual & interaction enhancements
   ============================================================ */

/* --- Selection & scrollbar --- */
::selection { background: rgba(0, 212, 170, 0.28); color: #fff; }
::-webkit-scrollbar { width: 5px; height: 5px; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb { background: var(--border2); border-radius: 4px; }
::-webkit-scrollbar-thumb:hover { background: var(--muted); }

/* --- Focus accessibility --- */
:focus-visible {
  outline: 2px solid var(--mint);
  outline-offset: 2px;
  border-radius: 8px;
}
button:focus:not(:focus-visible),
a:focus:not(:focus-visible) { outline: none; }

/* --- Toast variants --- */
#toast {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  min-width: 140px;
  padding: 12px 20px;
  border-radius: 12px;
  font-weight: 600;
  letter-spacing: 0.01em;
  box-shadow: 0 10px 32px rgba(0,0,0,.45), 0 0 0 1px rgba(255,255,255,.04);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
}
#toast.show { opacity: 1; transform: translateX(-50%) translateY(0); }
#toast.toast-success {
  background: linear-gradient(135deg, rgba(14,203,129,.18), rgba(14,203,129,.08));
  border-color: rgba(14,203,129,.35);
  color: #0ECB81;
}
#toast.toast-error {
  background: linear-gradient(135deg, rgba(246,70,93,.18), rgba(246,70,93,.08));
  border-color: rgba(246,70,93,.35);
  color: #F6465D;
}
#toast.toast-info {
  background: linear-gradient(135deg, rgba(56,97,251,.18), rgba(56,97,251,.08));
  border-color: rgba(56,97,251,.35);
  color: #7B9CFF;
}
#toast.toast-warn {
  background: linear-gradient(135deg, rgba(240,185,11,.18), rgba(240,185,11,.08));
  border-color: rgba(240,185,11,.35);
  color: #F0B90B;
}

/* --- Loading overlay polish --- */
#loading {
  flex-direction: column;
  gap: 14px;
  background: rgba(11,14,17,.82);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
}
#loading .msg {
  font-size: .84rem;
  color: var(--muted);
  font-weight: 500;
  letter-spacing: .02em;
}
#loading .spinner {
  width: 40px;
  height: 40px;
  border-width: 3px;
  border-top-color: var(--mint);
  box-shadow: 0 0 24px rgba(0,212,170,.15);
}

/* --- Buttons --- */
.btn {
  position: relative;
  overflow: hidden;
  transition: filter .15s, transform .12s, opacity .15s, box-shadow .2s;
}
.btn-primary {
  box-shadow: 0 4px 16px rgba(0,212,170,.25), inset 0 1px 0 rgba(255,255,255,.12);
}
.btn-primary:hover:not(:disabled) {
  filter: brightness(1.06);
  box-shadow: 0 6px 22px rgba(0,212,170,.35), inset 0 1px 0 rgba(255,255,255,.15);
}
.btn-primary:active:not(:disabled) { transform: scale(.97); }
.btn-ghost:hover:not(:disabled) {
  background: rgba(255,255,255,.08);
  border-color: var(--border2);
}
.btn.loading::after {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(90deg, transparent, rgba(255,255,255,.08), transparent);
  animation: btnShine 1.2s ease infinite;
}
@keyframes btnShine {
  0% { transform: translateX(-100%); }
  100% { transform: translateX(100%); }
}

/* --- Token rows & cards --- */
.token-row {
  transition: background .15s, transform .12s;
  border-radius: 12px;
  cursor: pointer;
}
.token-row:active { transform: scale(.985); background: var(--card2); }
.token-row:hover { background: rgba(255,255,255,.03); }

.feat-card {
  transition: border-color .2s, transform .15s, box-shadow .2s;
}
.feat-card:hover {
  border-color: rgba(0,212,170,.3);
  box-shadow: 0 4px 16px rgba(0,212,170,.08);
}
.feat-card:active { transform: scale(.97); }

.action-pill {
  transition: background .15s, transform .12s, border-color .15s;
}
.action-pill:active { transform: scale(.96); }

.set-item {
  transition: background .15s, transform .1s;
}
.set-item:active { transform: scale(.99); }

.dapp-card {
  transition: border-color .2s, transform .15s, box-shadow .2s;
}
.dapp-card:hover {
  border-color: rgba(0,212,170,.35);
  box-shadow: 0 6px 20px rgba(0,0,0,.2);
}
.dapp-card:active { transform: scale(.97); }

/* --- Empty states --- */
.empty-state {
  padding: 48px 24px;
}
.empty-state .ico {
  font-size: 2.6rem;
  margin-bottom: 14px;
  opacity: .4;
  filter: grayscale(.3);
}
.empty-state p {
  font-size: .9rem;
  line-height: 1.55;
  max-width: 260px;
  margin: 0 auto;
}
.empty-state .hint-sm {
  font-size: .78rem;
  color: var(--muted);
  margin-top: 8px;
  opacity: .75;
}

/* --- Modal polish --- */
.modal-backdrop {
  transition: opacity .25s;
  background: rgba(0,0,0,.7);
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
}
.modal {
  box-shadow: 0 -8px 40px rgba(0,0,0,.4);
  border-top: 1px solid rgba(255,255,255,.06);
}
.modal-handle {
  width: 40px;
  height: 4px;
  background: var(--border2);
  border-radius: 2px;
  margin: 0 auto 16px;
  opacity: .8;
}

/* --- PIN pad polish --- */
.pin-key {
  transition: background .12s, transform .1s, border-color .12s;
  user-select: none;
  -webkit-tap-highlight-color: transparent;
}
.pin-key:active:not(.empty) {
  background: var(--mint-dim);
  border-color: rgba(0,212,170,.4);
  transform: scale(.92);
}
.pin-dot {
  transition: all .18s cubic-bezier(.34,1.56,.64,1);
}
.pin-dot.filled {
  background: var(--mint);
  border-color: var(--mint);
  box-shadow: 0 0 10px rgba(0,212,170,.4);
  transform: scale(1.15);
}

/* --- Network status indicator --- */
.net-status {
  transition: background .3s, color .3s;
}
.net-status.online { color: var(--green); }
.net-status.offline { color: var(--red); }
.net-status.degraded { color: var(--orange); }

/* --- Balance amount polish --- */
.bg-balance .amt {
  letter-spacing: -.02em;
  font-variant-numeric: tabular-nums;
}
.token-bal .amt,
.token-bal .usd {
  font-variant-numeric: tabular-nums;
}

/* --- Pull-to-refresh visual --- */
.ptr-indicator {
  text-align: center;
  padding: 8px;
  color: var(--muted);
  font-size: .78rem;
  opacity: 0;
  transition: opacity .2s;
}
.ptr-indicator.visible { opacity: 1; }

/* --- Skeleton improvements --- */
.skeleton {
  background: linear-gradient(90deg, var(--card) 25%, var(--card2) 50%, var(--card) 75%);
  background-size: 200% 100%;
  animation: shimmerV6 1.4s ease infinite;
  border-radius: 8px;
}
.skeleton-row {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 12px 14px;
}
.skeleton-circle { width: 40px; height: 40px; border-radius: 50%; flex-shrink: 0; }
.skeleton-lines { flex: 1; display: flex; flex-direction: column; gap: 8px; }
.skeleton-line { height: 11px; border-radius: 6px; }
.skeleton-line.w60 { width: 60%; }
.skeleton-line.w40 { width: 40%; }
.skeleton-line.w80 { width: 80%; }

/* --- Input fields --- */
.field input,
.field select,
.field textarea {
  transition: border-color .2s, box-shadow .2s;
}
.field input:focus,
.field select:focus,
.field textarea:focus {
  border-color: rgba(0,212,170,.45);
  box-shadow: 0 0 0 3px rgba(0,212,170,.1);
  outline: none;
}

/* --- Bottom nav polish --- */
.nav-item {
  transition: color .2s, transform .12s;
  -webkit-tap-highlight-color: transparent;
}
.nav-item:active { transform: scale(.9); }
.nav-item.active {
  color: var(--mint);
}
.nav-item.active .ni {
  filter: drop-shadow(0 0 6px rgba(0,212,170,.35));
}

/* --- Copy feedback flash --- */
@keyframes copyFlash {
  0% { background: rgba(0,212,170,.2); }
  100% { background: transparent; }
}
.copy-flash { animation: copyFlash .6s ease; }

/* --- Screen transition smoothness --- */
.screen.active {
  animation: screenInV6 .28s cubic-bezier(.22,1,.36,1) both;
}

/* --- Safe area & mobile --- */
@supports (padding: env(safe-area-inset-bottom)) {
  .bottom-nav {
    padding-bottom: max(var(--safe-b), env(safe-area-inset-bottom));
  }
}

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

/* --- Offline banner --- */
.offline-banner {
  position: sticky;
  top: 0;
  z-index: 90;
  background: linear-gradient(90deg, rgba(246,70,93,.15), rgba(240,185,11,.12));
  border-bottom: 1px solid rgba(246,70,93,.25);
  color: #F6465D;
  font-size: .78rem;
  font-weight: 600;
  text-align: center;
  padding: 8px 12px;
  display: none;
}
.offline-banner.show { display: block; }

/* --- Success checkmark animation --- */
@keyframes checkPop {
  0% { transform: scale(0); opacity: 0; }
  50% { transform: scale(1.2); }
  100% { transform: scale(1); opacity: 1; }
}
.success-check {
  display: inline-block;
  animation: checkPop .4s cubic-bezier(.34,1.56,.64,1);
}

/* --- Referral card polish --- */
.ref-tier-card,
.ref-share-card {
  transition: transform .15s, box-shadow .2s;
}
.ref-tier-card:active,
.ref-share-card:active { transform: scale(.98); }

/* --- Address display monospace --- */
#receiveAddr,
.addr-mono,
#tdAddr {
  font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace;
  font-size: .82rem;
  letter-spacing: .02em;
  word-break: break-all;
}

/* --- Image fallback --- */
.token-icon img,
.token-row img {
  background: var(--card2);
  border-radius: 50%;
}
.token-icon img[src=""],
.token-row img[src=""] {
  opacity: 0;
}

/* --- Hide number input spinners --- */
input[type="number"]::-webkit-inner-spin-button,
input[type="number"]::-webkit-outer-spin-button {
  -webkit-appearance: none;
  margin: 0;
}
input[type="number"] { -moz-appearance: textfield; appearance: textfield; }

/* --- Long-press / context menu prevent on buttons --- */
.btn, .pin-key, .nav-item, .action-pill, .feat-card {
  -webkit-user-select: none;
  user-select: none;
  -webkit-touch-callout: none;
}

/* ============================================================
   v6.2 — Toast system, Swap polish, Web3 UX
   ============================================================ */

/* --- Toast stack system --- */
#toast {
  bottom: calc(var(--nav-h) + var(--safe-b) + 20px);
  min-width: 160px;
  max-width: min(92%, 340px);
  padding: 0;
  overflow: hidden;
  border-radius: 14px;
  background: rgba(26, 31, 39, 0.92);
  border: 1px solid var(--border2);
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
  box-shadow: 0 12px 40px rgba(0,0,0,.5), 0 0 0 1px rgba(255,255,255,.04);
  transform: translateX(-50%) translateY(24px) scale(.96);
  transition: opacity .28s cubic-bezier(.22,1,.36,1), transform .28s cubic-bezier(.22,1,.36,1);
}
#toast.show {
  opacity: 1;
  transform: translateX(-50%) translateY(0) scale(1);
}
#toast .toast-inner {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  padding: 13px 16px 12px;
}
#toast .toast-icon {
  flex-shrink: 0;
  width: 22px;
  height: 22px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: .75rem;
  font-weight: 700;
  margin-top: 1px;
}
#toast .toast-body {
  flex: 1;
  min-width: 0;
  text-align: left;
}
#toast .toast-msg {
  font-size: .86rem;
  font-weight: 600;
  line-height: 1.35;
  color: var(--text);
  word-break: break-word;
}
#toast .toast-sub {
  font-size: .72rem;
  color: var(--muted);
  margin-top: 2px;
  font-weight: 500;
}
#toast .toast-progress {
  height: 3px;
  background: rgba(255,255,255,.06);
  overflow: hidden;
}
#toast .toast-progress > i {
  display: block;
  height: 100%;
  width: 100%;
  transform-origin: left center;
  background: var(--mint);
  animation: toastProgress linear forwards;
}
@keyframes toastProgress {
  from { transform: scaleX(1); }
  to { transform: scaleX(0); }
}
#toast.toast-success { border-color: rgba(14,203,129,.35); }
#toast.toast-success .toast-icon { background: rgba(14,203,129,.18); color: #0ECB81; }
#toast.toast-success .toast-progress > i { background: #0ECB81; }
#toast.toast-error { border-color: rgba(246,70,93,.4); }
#toast.toast-error .toast-icon { background: rgba(246,70,93,.18); color: #F6465D; }
#toast.toast-error .toast-progress > i { background: #F6465D; }
#toast.toast-info { border-color: rgba(56,97,251,.35); }
#toast.toast-info .toast-icon { background: rgba(56,97,251,.18); color: #7B9CFF; }
#toast.toast-info .toast-progress > i { background: #3861FB; }
#toast.toast-warn { border-color: rgba(240,185,11,.4); }
#toast.toast-warn .toast-icon { background: rgba(240,185,11,.18); color: #F0B90B; }
#toast.toast-warn .toast-progress > i { background: #F0B90B; }

/* --- Swap screen polish --- */
.swap-panel {
  padding: 8px 14px 28px;
  max-width: 430px;
  margin: 0 auto;
}
.swap-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 18px;
  padding: 4px 2px;
}
.swap-header h2 {
  margin: 0;
  font-size: 1.08rem;
  font-weight: 700;
  letter-spacing: -.02em;
}
.swap-header .back-btn {
  margin: 0;
  width: 40px;
  height: 40px;
  border-radius: 12px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--card);
  border: 1px solid var(--border);
  color: var(--text);
  font-size: 1.1rem;
  cursor: pointer;
}
.swap-header .back-btn:active { background: var(--card2); }
.swap-net-badge {
  background: var(--card);
  border: 1px solid var(--border);
  color: var(--mint);
  font-size: .75rem;
  font-weight: 700;
  padding: 7px 12px;
  border-radius: 20px;
  cursor: pointer;
  letter-spacing: .02em;
}
.swap-net-badge:active { background: var(--card2); }

.swap-card {
  background: var(--card);
  border: 1px solid var(--border);
  border-radius: 18px;
  padding: 14px 16px 12px;
  transition: border-color .2s, box-shadow .2s;
}
.swap-card:focus-within {
  border-color: rgba(0,212,170,.35);
  box-shadow: 0 0 0 3px rgba(0,212,170,.08);
}
.swap-card-top {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 10px;
}
.swap-label {
  font-size: .78rem;
  font-weight: 600;
  color: var(--muted);
  text-transform: uppercase;
  letter-spacing: .04em;
}
.swap-bal-btn {
  background: none;
  border: none;
  color: var(--muted);
  font-size: .78rem;
  font-weight: 500;
  cursor: pointer;
  padding: 2px 0;
}
.swap-bal-btn b { color: var(--mint); font-weight: 700; }
.swap-bal-btn:active { opacity: .7; }
.swap-bal-static {
  font-size: .78rem;
  color: var(--muted);
  font-weight: 500;
}
.swap-bal-static b { color: var(--text); font-weight: 600; }

.swap-card-mid {
  display: flex;
  align-items: center;
  gap: 10px;
}
.swap-amt-input {
  flex: 1;
  min-width: 0;
  background: transparent;
  border: none;
  outline: none;
  font-size: 1.85rem;
  font-weight: 700;
  color: var(--text);
  padding: 4px 0;
  font-variant-numeric: tabular-nums;
  letter-spacing: -.02em;
}
.swap-amt-input::placeholder { color: var(--muted); opacity: .45; }
.swap-amt-input[readonly] { color: var(--text); cursor: default; }

.swap-token-btn {
  display: flex;
  align-items: center;
  gap: 7px;
  background: var(--card2);
  border: 1px solid var(--border);
  border-radius: 24px;
  padding: 6px 10px 6px 6px;
  font-weight: 700;
  font-size: .9rem;
  color: var(--text);
  cursor: pointer;
  flex-shrink: 0;
  transition: background .15s, border-color .15s, transform .1s;
}
.swap-token-btn img {
  width: 28px;
  height: 28px;
  border-radius: 50%;
  background: var(--bg);
}
.swap-token-btn:hover { border-color: rgba(0,212,170,.3); }
.swap-token-btn:active { transform: scale(.96); background: var(--bg); }
.swap-chevron { color: var(--muted); font-size: .75rem; margin-left: -2px; }

.swap-card-bot {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-top: 10px;
  gap: 8px;
  flex-wrap: wrap;
}
.swap-usd {
  font-size: .78rem;
  color: var(--muted);
  font-variant-numeric: tabular-nums;
}
.swap-pct-row {
  display: flex;
  gap: 5px;
}
.swap-pct {
  background: var(--card2);
  border: 1px solid var(--border);
  color: var(--muted);
  font-size: .7rem;
  font-weight: 700;
  padding: 4px 9px;
  border-radius: 8px;
  cursor: pointer;
  transition: all .15s;
}
.swap-pct:hover, .swap-pct.active {
  color: var(--mint);
  border-color: rgba(0,212,170,.4);
  background: var(--mint-dim);
}
.swap-pct:active { transform: scale(.94); }

.swap-arrow {
  width: 40px;
  height: 40px;
  border-radius: 12px;
  background: var(--mint);
  color: #04140f;
  border: 3px solid var(--bg);
  display: flex;
  align-items: center;
  justify-content: center;
  margin: -14px auto;
  position: relative;
  z-index: 2;
  cursor: pointer;
  box-shadow: 0 4px 14px rgba(0,212,170,.3);
  transition: transform .25s cubic-bezier(.34,1.56,.64,1), box-shadow .2s;
}
.swap-arrow:hover { box-shadow: 0 6px 20px rgba(0,212,170,.4); }
.swap-arrow:active { transform: rotate(180deg) scale(.92); }
.swap-arrow.flipped { transform: rotate(180deg); }

.swap-meta-box {
  margin: 14px 2px 4px;
  padding: 12px 14px;
  background: rgba(255,255,255,.02);
  border: 1px solid var(--border);
  border-radius: 14px;
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.swap-meta-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  font-size: .8rem;
  color: var(--muted);
}
.swap-meta-row span:last-child {
  color: var(--text);
  font-weight: 600;
  font-variant-numeric: tabular-nums;
}

.swap-cta {
  max-width: none !important;
  width: 100%;
  margin-top: 14px;
  padding: 16px !important;
  font-size: 1.02rem !important;
  border-radius: 16px !important;
  letter-spacing: .01em;
}
.swap-cta:disabled {
  opacity: .45;
  cursor: not-allowed;
}
.swap-hint {
  margin-top: 12px !important;
  font-size: .75rem !important;
}

/* Token picker modal enhancements when used for swap */
.modal .token-row {
  border-radius: 12px;
  padding: 10px 12px;
}
.modal .token-row:active {
  background: var(--mint-dim);
}

/* ============================================================
   Bitget-style Create Wallet Flow
   ============================================================ */
.bg-create-flow {
  position: fixed;
  inset: 0;
  z-index: 500;
  background: #0a0e12;
  display: none;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  max-width: 430px;
  margin: 0 auto;
}
.bg-create-flow.show { display: flex; }

.bg-cf-step {
  width: 100%;
  padding: 32px 28px;
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  animation: bgCfIn .4s cubic-bezier(.22,1,.36,1) both;
}
@keyframes bgCfIn {
  from { opacity: 0; transform: translateY(16px); }
  to { opacity: 1; transform: translateY(0); }
}

.bg-cf-icon-wrap {
  position: relative;
  width: 120px;
  height: 120px;
  margin-bottom: 28px;
  display: flex;
  align-items: center;
  justify-content: center;
}
.bg-cf-icon-ring {
  position: absolute;
  inset: 0;
  border-radius: 28px;
  border: 2px solid rgba(94,234,212,.25);
  animation: bgCfPulse 2s ease-in-out infinite;
}
.bg-cf-icon-ring.delay { inset: -10px; animation-delay: .4s; opacity: .5; }
@keyframes bgCfPulse {
  0%, 100% { transform: scale(1); opacity: .6; }
  50% { transform: scale(1.06); opacity: 1; }
}
.bg-cf-wallet-ico {
  width: 88px;
  height: 88px;
  border-radius: 22px;
  background: linear-gradient(145deg, rgba(13,148,136,.35), rgba(15,23,42,.6));
  border: 2px solid rgba(94,234,212,.4);
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 12px 40px rgba(0,212,170,.15);
  animation: bgCfFloat 2.4s ease-in-out infinite;
}
@keyframes bgCfFloat {
  0%, 100% { transform: translateY(0); }
  50% { transform: translateY(-6px); }
}
.bg-cf-dot {
  position: absolute;
  top: 8px;
  right: 14px;
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background: #f59e0b;
  box-shadow: 0 0 0 3px rgba(245,158,11,.25);
  animation: bgCfBlink 1.2s ease infinite;
}
@keyframes bgCfBlink {
  0%, 100% { opacity: 1; }
  50% { opacity: .35; }
}

.bg-cf-title {
  font-size: 1.55rem;
  font-weight: 800;
  letter-spacing: -.03em;
  color: #fff;
  margin: 0 0 12px;
  line-height: 1.25;
}
.bg-cf-sub {
  font-size: .88rem;
  color: #848E9C;
  line-height: 1.5;
  margin: 0;
  max-width: 280px;
}
.bg-cf-cta {
  margin-top: 28px !important;
  max-width: 280px !important;
  width: 100%;
  border-radius: 28px !important;
  padding: 15px !important;
  font-size: 1rem !important;
}

/* Success */
.bg-cf-check {
  margin-bottom: 20px;
  animation: bgCfCheckPop .55s cubic-bezier(.34,1.56,.64,1) both;
}
@keyframes bgCfCheckPop {
  from { transform: scale(0); opacity: 0; }
  to { transform: scale(1); opacity: 1; }
}
.bg-cf-success-burst {
  position: absolute;
  width: 200px;
  height: 200px;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(14,203,129,.12) 0%, transparent 70%);
  pointer-events: none;
  animation: bgCfBurst .8s ease-out both;
}
@keyframes bgCfBurst {
  from { transform: scale(.4); opacity: 0; }
  to { transform: scale(1.4); opacity: 1; }
}

/* PIN sheet Bitget style */
.bg-cf-pin {
  padding: 0 !important;
  height: 100%;
  justify-content: flex-end !important;
}
.bg-cf-pin-hero {
  position: absolute;
  inset: 0 0 45% 0;
  overflow: hidden;
}
.bg-cf-pin-hero-bg {
  position: absolute;
  inset: 0;
  background:
    linear-gradient(180deg, transparent 40%, #0a0e12 100%),
    radial-gradient(ellipse at 50% 30%, rgba(0,212,170,.2), transparent 55%),
    linear-gradient(160deg, #0f766e 0%, #0a0e12 60%);
}
.bg-cf-pin-sheet {
  position: relative;
  width: 100%;
  background: #12161c;
  border-radius: 22px 22px 0 0;
  padding: 12px 20px calc(20px + env(safe-area-inset-bottom, 0px));
  border-top: 1px solid rgba(255,255,255,.06);
  box-shadow: 0 -12px 40px rgba(0,0,0,.4);
  animation: bgCfSheetUp .38s cubic-bezier(.22,1,.36,1) both;
}
@keyframes bgCfSheetUp {
  from { transform: translateY(40%); opacity: .5; }
  to { transform: translateY(0); opacity: 1; }
}
.bg-cf-pin-handle {
  width: 40px;
  height: 4px;
  background: #2a313c;
  border-radius: 2px;
  margin: 0 auto 18px;
}
.bg-cf-pin-title {
  font-size: 1.2rem;
  font-weight: 700;
  color: #fff;
  margin: 0 0 6px;
  text-align: left;
}
.bg-cf-pin-hint {
  font-size: .82rem;
  color: #848E9C;
  margin: 0 0 20px;
  text-align: left;
}
.bg-cf-pin-dots {
  display: flex;
  gap: 10px;
  justify-content: center;
  margin-bottom: 10px;
}
.bg-cf-pin-dots span {
  width: 42px;
  height: 48px;
  border-radius: 12px;
  background: #1a1f27;
  border: 1.5px solid #2a313c;
  transition: border-color .15s, background .15s, box-shadow .15s;
  position: relative;
}
.bg-cf-pin-dots span.on {
  border-color: #00D4AA;
  background: rgba(0,212,170,.08);
  box-shadow: 0 0 0 3px rgba(0,212,170,.12);
}
.bg-cf-pin-dots span.on::after {
  content: '';
  position: absolute;
  top: 50%;
  left: 50%;
  width: 10px;
  height: 10px;
  margin: -5px 0 0 -5px;
  border-radius: 50%;
  background: #00D4AA;
}
.bg-cf-pin-dots span.active {
  border-color: #00D4AA;
}
.bg-cf-pin-err {
  min-height: 18px;
  font-size: .78rem;
  color: #F6465D;
  text-align: center;
  margin: 0 0 8px;
}
.bg-cf-pin-pad {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 8px;
  max-width: 320px;
  margin: 0 auto;
}
.bg-cf-pin-key {
  height: 56px;
  border: none;
  border-radius: 14px;
  background: transparent;
  color: #eaecef;
  font-size: 1.35rem;
  font-weight: 600;
  cursor: pointer;
  transition: background .12s, transform .1s;
  -webkit-tap-highlight-color: transparent;
  user-select: none;
}
.bg-cf-pin-key:active {
  background: rgba(255,255,255,.08);
  transform: scale(.94);
}
.bg-cf-pin-key.empty { pointer-events: none; }
.bg-cf-pin-key.del { font-size: 1.1rem; color: #848E9C; }
.bg-cf-pin-skip {
  display: block;
  width: 100%;
  margin-top: 12px;
  background: none;
  border: none;
  color: #848E9C;
  font-size: .85rem;
  font-weight: 600;
  padding: 12px;
  cursor: pointer;
}
.bg-cf-pin-skip:active { color: #00D4AA; }

/* ============================================================
   Smoother Loading Animations (global + create flow)
   ============================================================ */

/* --- Global loading overlay --- */
#loading {
  flex-direction: column;
  gap: 18px;
  background: rgba(8, 11, 14, 0.88);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
  transition: opacity .35s ease;
}
#loading .msg {
  font-size: .86rem;
  color: var(--muted);
  font-weight: 550;
  letter-spacing: .02em;
  animation: loadMsgPulse 1.8s ease-in-out infinite;
}
@keyframes loadMsgPulse {
  0%, 100% { opacity: .65; }
  50% { opacity: 1; }
}

.load-orb {
  position: relative;
  width: 72px;
  height: 72px;
  display: flex;
  align-items: center;
  justify-content: center;
}
.load-ring {
  position: absolute;
  border-radius: 50%;
  border: 2.5px solid transparent;
  animation: loadSpin linear infinite;
}
.load-ring.r1 {
  inset: 0;
  border-top-color: #00D4AA;
  border-right-color: rgba(0,212,170,.25);
  animation-duration: 1s;
}
.load-ring.r2 {
  inset: 8px;
  border-bottom-color: #5eead4;
  border-left-color: rgba(94,234,212,.2);
  animation-duration: 1.4s;
  animation-direction: reverse;
}
.load-ring.r3 {
  inset: 16px;
  border-top-color: rgba(0,212,170,.5);
  animation-duration: .85s;
}
.load-core {
  width: 14px;
  height: 14px;
  border-radius: 50%;
  background: radial-gradient(circle at 35% 35%, #5eead4, #00D4AA 60%, #0d9488);
  box-shadow: 0 0 18px rgba(0,212,170,.55), 0 0 40px rgba(0,212,170,.2);
  animation: loadCore 1.6s ease-in-out infinite;
}
@keyframes loadSpin {
  to { transform: rotate(360deg); }
}
@keyframes loadCore {
  0%, 100% { transform: scale(1); opacity: 1; }
  50% { transform: scale(.72); opacity: .75; }
}

.load-bar {
  width: 120px;
  height: 3px;
  border-radius: 3px;
  background: rgba(255,255,255,.06);
  overflow: hidden;
}
.load-bar > i {
  display: block;
  height: 100%;
  width: 40%;
  border-radius: 3px;
  background: linear-gradient(90deg, transparent, #00D4AA, transparent);
  animation: loadBarSlide 1.2s ease-in-out infinite;
}
@keyframes loadBarSlide {
  0% { transform: translateX(-120%); }
  100% { transform: translateX(320%); }
}

/* Legacy spinner still works if used elsewhere */
.spinner {
  width: 40px;
  height: 40px;
  border: 3px solid rgba(255,255,255,.08);
  border-top-color: #00D4AA;
  border-right-color: rgba(0,212,170,.35);
  border-radius: 50%;
  animation: spin .85s cubic-bezier(.4,.1,.3,1) infinite;
  box-shadow: 0 0 20px rgba(0,212,170,.12);
}

/* --- Create flow: orbital satellites --- */
.bg-cf-orbit {
  position: absolute;
  inset: -18px;
  border-radius: 50%;
  animation: bgCfOrbit 4s linear infinite;
  pointer-events: none;
}
.bg-cf-sat {
  position: absolute;
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: #00D4AA;
  box-shadow: 0 0 10px rgba(0,212,170,.7);
}
.bg-cf-sat.s1 { top: 0; left: 50%; margin-left: -3.5px; }
.bg-cf-sat.s2 { bottom: 12%; right: 8%; background: #5eead4; width: 5px; height: 5px; }
.bg-cf-sat.s3 { bottom: 20%; left: 6%; background: #2dd4bf; width: 4px; height: 4px; opacity: .8; }
@keyframes bgCfOrbit {
  to { transform: rotate(360deg); }
}

/* Smoother wallet icon float + glow */
.bg-cf-wallet-ico {
  animation: bgCfFloatGlow 2.8s ease-in-out infinite;
  box-shadow:
    0 12px 40px rgba(0,212,170,.18),
    0 0 0 1px rgba(94,234,212,.15) inset;
}
@keyframes bgCfFloatGlow {
  0%, 100% {
    transform: translateY(0) scale(1);
    box-shadow: 0 12px 40px rgba(0,212,170,.15), 0 0 0 1px rgba(94,234,212,.12) inset;
  }
  50% {
    transform: translateY(-8px) scale(1.03);
    box-shadow: 0 20px 48px rgba(0,212,170,.28), 0 0 0 1px rgba(94,234,212,.25) inset;
  }
}

/* Animated ellipsis on "Membuat dompet..." */
.bg-cf-ellipsis::after {
  content: '';
  display: inline-block;
  width: 1.2em;
  text-align: left;
  animation: bgCfDots 1.4s steps(4, end) infinite;
}
@keyframes bgCfDots {
  0%   { content: ''; }
  25%  { content: '.'; }
  50%  { content: '..'; }
  75%  { content: '...'; }
  100% { content: ''; }
}

/* Progress under creating */
.bg-cf-progress {
  margin-top: 28px;
  width: min(260px, 80vw);
}
.bg-cf-progress-track {
  height: 4px;
  border-radius: 4px;
  background: rgba(255,255,255,.06);
  overflow: hidden;
  margin-bottom: 12px;
}
.bg-cf-progress-track > i {
  display: block;
  height: 100%;
  width: 0%;
  border-radius: 4px;
  background: linear-gradient(90deg, #0d9488, #00D4AA, #5eead4);
  background-size: 200% 100%;
  transition: width .6s cubic-bezier(.22,1,.36,1);
  animation: bgCfBarShine 1.5s linear infinite;
}
@keyframes bgCfBarShine {
  0% { background-position: 100% 0; }
  100% { background-position: -100% 0; }
}
.bg-cf-progress-steps {
  display: flex;
  justify-content: space-between;
  font-size: .68rem;
  font-weight: 600;
  color: #4b5563;
  letter-spacing: .02em;
  text-transform: uppercase;
}
.bg-cf-progress-steps span.on {
  color: #00D4AA;
}
.bg-cf-progress-steps span.done {
  color: #5eead4;
}

/* Soft fade for create flow mount */
.bg-create-flow {
  animation: none;
}
.bg-create-flow.show {
  animation: bgFlowFadeIn .35s ease both;
}
@keyframes bgFlowFadeIn {
  from { opacity: 0; }
  to { opacity: 1; }
}

/* Success step polish */
#bgCfSuccess .bg-cf-check svg circle {
  stroke-dasharray: 190;
  stroke-dashoffset: 190;
  animation: bgCfStroke  .7s ease forwards .1s;
}
#bgCfSuccess .bg-cf-check svg path {
  stroke-dasharray: 50;
  stroke-dashoffset: 50;
  animation: bgCfStroke  .45s ease forwards .45s;
}
@keyframes bgCfStroke {
  to { stroke-dashoffset: 0; }
}

/* Reduced motion */
@media (prefers-reduced-motion: reduce) {
  .load-ring, .load-core, .load-bar > i,
  .bg-cf-orbit, .bg-cf-wallet-ico, .bg-cf-icon-ring,
  .bg-cf-ellipsis::after, .bg-cf-progress-track > i {
    animation: none !important;
  }
}

/* ============================================================
   GPU-optimized animations + Skeleton screens + Easing tokens
   ============================================================ */

:root {
  /* Easing tokens (cubic-bezier) */
  --ease-standard: cubic-bezier(0.4, 0.0, 0.2, 1);     /* Material standard */
  --ease-decelerate: cubic-bezier(0.0, 0.0, 0.2, 1);    /* Enter / decelerate */
  --ease-accelerate: cubic-bezier(0.4, 0.0, 1, 1);      /* Exit / accelerate */
  --ease-emphasized: cubic-bezier(0.2, 0.0, 0, 1);      /* Emphasized decelerate */
  --ease-spring: cubic-bezier(0.34, 1.56, 0.64, 1);     /* Soft overshoot spring */
  --ease-smooth: cubic-bezier(0.22, 1, 0.36, 1);        /* Smooth long ease-out */
  --ease-snap: cubic-bezier(0.2, 0.8, 0.2, 1);          /* Snappy UI */

  --dur-fast: 120ms;
  --dur-normal: 220ms;
  --dur-slow: 380ms;
}

/* --- GPU promotion helpers --- */
.gpu-layer {
  transform: translateZ(0);
  backface-visibility: hidden;
  -webkit-backface-visibility: hidden;
}
.gpu-animating {
  will-change: transform, opacity;
}

/* Prefer compositor-only properties on common animated nodes */
.screen.active,
.modal,
#toast,
#loading,
.bg-create-flow,
.bg-cf-step,
.bg-cf-wallet-ico,
.bg-cf-orbit,
.load-ring,
.load-core,
.load-bar > i,
.token-row,
.btn,
.nav-item,
.pin-dot,
.bg-cf-pin-dots span {
  backface-visibility: hidden;
  -webkit-backface-visibility: hidden;
}

/* Contain paint for lists (cheaper invalidation) */
.token-list,
.home-scroll,
#txList {
  contain: content;
}

/* Screen transitions — transform + opacity only */
.screen.active {
  animation: screenInGPU var(--dur-normal) var(--ease-smooth) both;
}
@keyframes screenInGPU {
  from {
    opacity: 0;
    transform: translate3d(0, 10px, 0);
  }
  to {
    opacity: 1;
    transform: translate3d(0, 0, 0);
  }
}

/* Toast — GPU friendly */
#toast {
  will-change: transform, opacity;
  transition:
    opacity var(--dur-normal) var(--ease-standard),
    transform var(--dur-normal) var(--ease-smooth);
}
#toast.show {
  transform: translate3d(-50%, 0, 0) scale(1);
}

/* Loading rings already rotate via transform — pin to GPU */
.load-ring,
.load-core,
.bg-cf-orbit,
.bg-cf-wallet-ico {
  will-change: transform;
  transform: translateZ(0);
}

/* Buttons: transform-only press */
.btn,
.action-pill,
.feat-card,
.swap-token-btn,
.bg-cf-pin-key,
.nav-item {
  transition: transform var(--dur-fast) var(--ease-standard),
              opacity var(--dur-fast) var(--ease-standard),
              filter var(--dur-fast) var(--ease-standard),
              background-color var(--dur-fast) var(--ease-standard),
              border-color var(--dur-fast) var(--ease-standard);
}
.btn:active,
.action-pill:active,
.feat-card:active,
.nav-item:active {
  transform: scale3d(0.97, 0.97, 1);
}

/* --- Skeleton screens (GPU shimmer via transform) --- */
.sk-wrap {
  display: flex;
  flex-direction: column;
  gap: 8px;
  padding: 4px 0;
}

.sk-row {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 12px 14px;
  border-radius: 14px;
  background: var(--card);
  border: 1px solid transparent;
}

.sk-avatar {
  width: 40px;
  height: 40px;
  border-radius: 50%;
  flex-shrink: 0;
  background: var(--card2);
  position: relative;
  overflow: hidden;
}

.sk-lines {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.sk-line {
  height: 11px;
  border-radius: 6px;
  background: var(--card2);
  position: relative;
  overflow: hidden;
}
.sk-line.w30 { width: 30%; }
.sk-line.w40 { width: 40%; }
.sk-line.w50 { width: 50%; }
.sk-line.w60 { width: 60%; }
.sk-line.w70 { width: 70%; }
.sk-line.w80 { width: 80%; }
.sk-line.w100 { width: 100%; }

.sk-right {
  width: 64px;
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 8px;
  flex-shrink: 0;
}

/* Transform-based shimmer (composited, no background-position) */
.sk-shimmer {
  position: relative;
  overflow: hidden;
  background: var(--card2);
}
.sk-shimmer::after {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(
    90deg,
    transparent 0%,
    rgba(255, 255, 255, 0.06) 45%,
    rgba(255, 255, 255, 0.1) 50%,
    rgba(255, 255, 255, 0.06) 55%,
    transparent 100%
  );
  transform: translate3d(-100%, 0, 0);
  animation: skShimmerGPU 1.35s var(--ease-standard) infinite;
  will-change: transform;
}
@keyframes skShimmerGPU {
  100% { transform: translate3d(100%, 0, 0); }
}

/* Stagger appearance of skeleton rows */
.sk-row {
  animation: skFadeIn var(--dur-normal) var(--ease-decelerate) both;
}
.sk-row:nth-child(1) { animation-delay: 0ms; }
.sk-row:nth-child(2) { animation-delay: 40ms; }
.sk-row:nth-child(3) { animation-delay: 80ms; }
.sk-row:nth-child(4) { animation-delay: 120ms; }
.sk-row:nth-child(5) { animation-delay: 160ms; }
.sk-row:nth-child(6) { animation-delay: 200ms; }
@keyframes skFadeIn {
  from { opacity: 0; transform: translate3d(0, 6px, 0); }
  to { opacity: 1; transform: translate3d(0, 0, 0); }
}

/* Balance skeleton on home header */
.sk-balance {
  width: 140px;
  height: 36px;
  border-radius: 10px;
  margin: 8px auto;
}

/* History skeleton */
.sk-tx-row {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 12px 4px;
}
.sk-tx-ico {
  width: 36px;
  height: 36px;
  border-radius: 50%;
}

/* Swap card skeleton */
.sk-swap-card {
  height: 110px;
  border-radius: 18px;
  margin-bottom: 12px;
}

/* Content swap: skeleton → real content fade */
.sk-exit {
  animation: skExit var(--dur-fast) var(--ease-accelerate) both;
}
@keyframes skExit {
  to { opacity: 0; transform: translate3d(0, -4px, 0); }
}

/* Pause heavy animations when tab hidden (set via JS class) */
body.tab-hidden .load-ring,
body.tab-hidden .load-core,
body.tab-hidden .load-bar > i,
body.tab-hidden .bg-cf-orbit,
body.tab-hidden .bg-cf-wallet-ico,
body.tab-hidden .sk-shimmer::after,
body.tab-hidden .ob-dog-runner,
body.tab-hidden .dog-body,
body.tab-hidden .leg {
  animation-play-state: paused !important;
}

@media (prefers-reduced-motion: reduce) {
  .sk-shimmer::after,
  .sk-row,
  .screen.active {
    animation: none !important;
  }
}

/* ============================================================
   Bitget-style Wallet Switcher
   ============================================================ */
.ws-sheet-title {
  font-size: 1.2rem;
  font-weight: 800;
  margin: 0 0 4px;
  letter-spacing: -.02em;
}
.ws-sheet-sub {
  display: flex;
  justify-content: space-between;
  align-items: center;
  font-size: .8rem;
  color: var(--muted);
  margin-bottom: 14px;
}
.ws-card {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 14px;
  border-radius: 16px;
  background: linear-gradient(135deg, rgba(0,212,170,.08), rgba(56,97,251,.06));
  border: 1px solid rgba(0,212,170,.25);
  margin-bottom: 10px;
  cursor: pointer;
  transition: transform .12s, border-color .15s;
}
.ws-card:active { transform: scale(.98); }
.ws-card.active {
  border-color: rgba(0,212,170,.55);
  box-shadow: 0 0 0 1px rgba(0,212,170,.15);
}
.ws-avatar {
  width: 42px;
  height: 42px;
  border-radius: 50%;
  background: linear-gradient(135deg, #ec4899, #8b5cf6);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.2rem;
  flex-shrink: 0;
}
.ws-info { flex: 1; min-width: 0; }
.ws-name {
  font-weight: 700;
  font-size: .95rem;
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
}
.ws-bal {
  font-size: .82rem;
  color: var(--muted);
  margin-top: 2px;
}
.ws-addr {
  font-size: .72rem;
  color: var(--muted);
  font-family: ui-monospace, monospace;
  margin-top: 2px;
}
.ws-backup-btn {
  background: rgba(0,212,170,.12);
  border: 1px solid rgba(0,212,170,.35);
  color: var(--mint);
  font-size: .72rem;
  font-weight: 700;
  padding: 6px 10px;
  border-radius: 20px;
  cursor: pointer;
  white-space: nowrap;
  flex-shrink: 0;
}
.ws-backup-btn:active { opacity: .8; }
.ws-add-btn {
  width: 100%;
  margin-top: 8px !important;
  border-radius: 28px !important;
  padding: 15px !important;
  font-size: 1rem !important;
  max-width: none !important;
}

/* Add wallet menu */
.aw-list { display: flex; flex-direction: column; gap: 8px; }
.aw-item {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 14px;
  border-radius: 14px;
  background: var(--card);
  border: 1px solid var(--border);
  cursor: pointer;
  transition: background .15s, border-color .15s;
  text-align: left;
  width: 100%;
  color: inherit;
}
.aw-item:active {
  background: var(--card2);
  border-color: rgba(0,212,170,.3);
}
.aw-ico {
  width: 40px;
  height: 40px;
  border-radius: 50%;
  background: var(--card2);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.15rem;
  flex-shrink: 0;
  color: var(--mint);
}
.aw-text { flex: 1; min-width: 0; }
.aw-title { font-weight: 700; font-size: .92rem; }
.aw-desc { font-size: .75rem; color: var(--muted); margin-top: 3px; line-height: 1.35; }
.aw-chevron { color: var(--muted); font-size: 1.1rem; }
.aw-section {
  font-size: .78rem;
  font-weight: 600;
  color: var(--muted);
  margin: 16px 0 8px;
}

/* Multi-wallet Bitget extras */
.ws-toolbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 12px;
  gap: 8px;
}
.ws-edit-btn {
  background: transparent;
  border: none;
  color: var(--mint);
  font-size: .85rem;
  font-weight: 700;
  cursor: pointer;
  padding: 4px 8px;
}
.ws-type {
  font-size: .65rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .04em;
  padding: 2px 7px;
  border-radius: 6px;
  background: rgba(255,255,255,.06);
  color: var(--muted);
}
.ws-type.seed { color: #5eead4; background: rgba(0,212,170,.12); }
.ws-type.hw { color: #a78bfa; background: rgba(139,92,246,.15); }
.ws-type.watch { color: #94a3b8; background: rgba(148,163,184,.12); }
.ws-type.imported { color: #38bdf8; background: rgba(56,189,248,.12); }
.ws-card.edit-mode { cursor: default; }
.ws-card .ws-actions {
  display: none;
  flex-direction: column;
  gap: 6px;
  flex-shrink: 0;
}
.ws-card.edit-mode .ws-actions { display: flex; }
.ws-card.edit-mode .ws-backup-btn,
.ws-card.edit-mode .ws-del { display: none !important; }
.ws-act {
  border: none;
  border-radius: 10px;
  padding: 6px 10px;
  font-size: .72rem;
  font-weight: 700;
  cursor: pointer;
  white-space: nowrap;
}
.ws-act.rename { background: rgba(255,255,255,.08); color: var(--text); }
.ws-act.delete { background: rgba(246,70,93,.15); color: #F6465D; }
.ws-empty-hint {
  text-align: center;
  padding: 20px 12px;
  color: var(--muted);
  font-size: .85rem;
}

/* Rename wallet modal */
.rn-field {
  margin: 12px 0 16px;
}
.rn-field label {
  display: block;
  font-size: .78rem;
  color: var(--muted);
  margin-bottom: 6px;
  font-weight: 600;
}
.rn-field input {
  width: 100%;
  padding: 14px 16px;
  border-radius: 14px;
  border: 1px solid var(--border);
  background: var(--card2);
  color: var(--text);
  font-size: 1rem;
  font-weight: 600;
  outline: none;
}
.rn-field input:focus {
  border-color: rgba(0,212,170,.5);
  box-shadow: 0 0 0 3px rgba(0,212,170,.12);
}
.rn-actions {
  display: flex;
  gap: 10px;
}
.rn-actions .btn { flex: 1; max-width: none !important; }

/* Hardware connect sheet */
.hw-options {
  display: flex;
  flex-direction: column;
  gap: 10px;
  margin-top: 8px;
}
.hw-opt {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 14px;
  border-radius: 14px;
  background: var(--card);
  border: 1px solid var(--border);
  cursor: pointer;
  width: 100%;
  color: inherit;
  text-align: left;
}
.hw-opt:active { border-color: rgba(0,212,170,.35); }
.hw-opt-ico {
  width: 44px;
  height: 44px;
  border-radius: 12px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.4rem;
  background: var(--card2);
  flex-shrink: 0;
}
.hw-opt-ico.ledger { background: rgba(0,0,0,.35); }
.hw-opt-ico.trezor { background: rgba(0,150,136,.15); }

/* ========== Bitget Transfer Flow ========== */
.bg-tf-flow {
  position: fixed; inset: 0; z-index: 280;
  background: #0b0e11;
  display: none; flex-direction: column;
  max-width: 480px; margin: 0 auto;
}
.bg-tf-flow.show { display: flex; }
.bg-tf-step {
  flex: 1; display: flex; flex-direction: column;
  padding: 12px 16px 20px; overflow-y: auto;
}
.bg-tf-top {
  display: flex; align-items: center; justify-content: space-between;
  margin-bottom: 12px;
}
.bg-tf-title {
  font-size: 1.05rem; font-weight: 700; margin: 0; text-align: center;
}
.bg-tf-icon-btn {
  width: 36px; height: 36px; border-radius: 50%;
  border: none; background: rgba(255,255,255,.06);
  color: var(--text); font-size: 1.1rem; cursor: pointer;
}
.bg-tf-bal-pill {
  align-self: center;
  display: inline-flex; align-items: center; gap: 8px;
  padding: 8px 14px; border-radius: 24px;
  background: rgba(255,255,255,.06);
  border: 1px solid rgba(255,255,255,.08);
  color: var(--text); font-weight: 600; font-size: .85rem;
  cursor: pointer; margin: 8px 0 18px;
}
.bg-tf-tok-ico, .bg-tf-confirm-ico {
  width: 28px; height: 28px; border-radius: 50%;
  background: linear-gradient(135deg,#6366f1,#3b82f6);
  display: flex; align-items: center; justify-content: center;
  font-size: .7rem; font-weight: 800; color: #fff;
  position: relative;
}
.bg-tf-tok-ico::after, .bg-tf-confirm-ico::after {
  content: '';
  position: absolute; right: -2px; bottom: -2px;
  width: 10px; height: 10px; border-radius: 2px;
  background: #0052FF; border: 2px solid #0b0e11;
}
.bg-tf-amount-wrap { text-align: center; margin: 12px 0 28px; }
.bg-tf-amount-row {
  display: flex; align-items: baseline; justify-content: center; gap: 8px;
}
.bg-tf-amount {
  font-size: 2.4rem; font-weight: 700; letter-spacing: -.02em;
  color: #fff; min-height: 1.2em;
}
.bg-tf-amount.empty { color: #4b5563; }
.bg-tf-sym { font-size: 1.6rem; font-weight: 700; color: #6b7280; }
.bg-tf-usd { color: var(--muted); font-size: .9rem; margin-top: 6px; }
.bg-tf-field {
  width: 100%; text-align: left;
  background: rgba(255,255,255,.04);
  border: 1px solid rgba(255,255,255,.06);
  border-radius: 14px; padding: 14px 16px;
  color: var(--text); cursor: pointer; margin-bottom: 10px;
}
.bg-tf-field-label { display: block; font-size: .75rem; color: var(--muted); margin-bottom: 4px; }
.bg-tf-field-val { font-size: .92rem; font-weight: 600; }
.bg-tf-pct {
  display: grid; grid-template-columns: repeat(4,1fr); gap: 8px;
  margin: 14px 0;
}
.bg-tf-pct button {
  border: none; border-radius: 12px;
  background: rgba(255,255,255,.06);
  color: var(--text); font-weight: 700; font-size: .85rem;
  padding: 12px 0; cursor: pointer;
}
.bg-tf-pct button:active { background: rgba(0,212,170,.15); }
/* Amount step layout — do NOT force display:flex (breaks step switching) */
#bgTfAmount.bg-tf-step {
  flex-direction: column;
  overflow: hidden;
  padding-bottom: 12px;
}
.bg-tf-pad {
  display: grid !important;
  grid-template-columns: repeat(3, 1fr) !important;
  gap: 2px 6px !important;
  margin-top: auto !important;
  padding: 4px 0 !important;
  min-height: 0 !important;
  width: 100% !important;
  flex: 1 1 auto !important;
  align-content: end !important;
  visibility: visible !important;
  opacity: 1 !important;
}
.bg-tf-pad button {
  border: none !important;
  background: transparent !important;
  color: #EAECEF !important;
  font-size: 1.4rem !important;
  font-weight: 600 !important;
  padding: 10px 0 !important;
  cursor: pointer !important;
  border-radius: 10px !important;
  min-height: 42px !important;
  font-family: inherit !important;
  line-height: 1 !important;
  -webkit-tap-highlight-color: transparent;
  touch-action: manipulation;
}
.bg-tf-pad button:active {
  background: rgba(255,255,255,.08) !important;
}
.bg-tf-pad-del {
  font-size: 1.2rem !important;
}
.bg-tf-cta {
  width: 100% !important;
  margin-top: 8px !important;
  border: none !important;
  border-radius: 28px !important;
  background: #00D4AA !important;
  color: #04120e !important;
  font-size: 1.05rem !important;
  font-weight: 800 !important;
  padding: 14px !important;
  cursor: pointer !important;
  flex-shrink: 0 !important;
  z-index: 2 !important;
}
.bg-tf-cta:disabled {
  opacity: .4 !important;
  cursor: default !important;
}
.bg-tf-pct { margin: 8px 0 !important; }
.bg-tf-pct button { padding: 10px 0 !important; }
.bg-tf-amount-wrap { margin: 8px 0 12px !important; }
.bg-tf-amount { font-size: 2.1rem !important; }

/* Recipient */
.bg-tf-addr-box {
  position: relative;
  background: rgba(255,255,255,.04);
  border-radius: 16px; padding: 14px;
  border: 1px solid rgba(255,255,255,.06);
  margin-bottom: 12px;
}
.bg-tf-addr-box textarea {
  width: 100%; border: none; background: transparent;
  color: var(--text); font-size: .95rem; resize: none;
  outline: none; font-family: ui-monospace, monospace;
  min-height: 72px;
}
.bg-tf-clear {
  position: absolute; right: 12px; bottom: 10px;
  border: none; background: transparent; color: var(--muted);
  font-size: 1.1rem; cursor: pointer;
}
.bg-tf-row-btns { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; margin-bottom: 18px; }
.bg-tf-sec-btn {
  border: none; border-radius: 24px;
  background: #0d3d42; color: #5eead4;
  font-weight: 700; padding: 12px; cursor: pointer;
}
.bg-tf-tabs { display: flex; gap: 16px; margin-bottom: 12px; }
.bg-tf-tabs button {
  border: none; background: none; color: var(--muted);
  font-weight: 700; font-size: .9rem; cursor: pointer; padding: 0;
}
.bg-tf-tabs button.on { color: var(--text); }
.bg-tf-list { display: flex; flex-direction: column; gap: 8px; flex: 1; }
.bg-tf-wallet {
  display: flex; align-items: center; gap: 12px;
  padding: 12px 14px; border-radius: 14px;
  background: rgba(255,255,255,.04); cursor: pointer;
  border: 1px solid transparent;
}
.bg-tf-wallet:active { border-color: rgba(0,212,170,.3); }
.bg-tf-wallet .av {
  width: 40px; height: 40px; border-radius: 50%;
  background: linear-gradient(135deg,#ec4899,#8b5cf6);
  display: flex; align-items: center; justify-content: center;
  font-size: 1.1rem;
}
.bg-tf-wallet .nm { font-weight: 700; font-size: .9rem; }
.bg-tf-wallet .ad { font-size: .72rem; color: var(--muted); font-family: monospace; word-break: break-all; }

/* Confirm */
.bg-tf-confirm-hero { text-align: center; margin: 12px 0 24px; }
.bg-tf-confirm-ico {
  width: 56px; height: 56px; margin: 0 auto 12px;
  font-size: .95rem;
}
.bg-tf-confirm-amt { font-size: 1.8rem; font-weight: 800; }
.bg-tf-card {
  background: rgba(255,255,255,.04);
  border-radius: 16px; padding: 14px 16px;
  margin-bottom: 10px;
}
.bg-tf-card-label { font-size: .75rem; color: var(--muted); margin-bottom: 6px; }
.bg-tf-card-addr { font-size: .85rem; font-family: monospace; word-break: break-all; line-height: 1.4; }
.bg-tf-chip {
  display: inline-block; margin-top: 8px;
  padding: 4px 10px; border-radius: 8px;
  background: rgba(255,255,255,.08); font-size: .72rem; font-weight: 600;
}
.bg-tf-row {
  display: flex; justify-content: space-between; align-items: center;
  padding: 6px 0; font-size: .88rem;
}
.bg-tf-mono { font-family: monospace; font-size: .8rem; }

/* PIN sheet */
.bg-tf-pin-step {
  background: rgba(0,0,0,.55);
  justify-content: flex-end; padding: 0;
}
.bg-tf-pin-sheet {
  background: #12151a;
  border-radius: 20px 20px 0 0;
  padding: 12px 16px 28px;
}
.bg-tf-handle {
  width: 40px; height: 4px; border-radius: 2px;
  background: rgba(255,255,255,.15); margin: 4px auto 16px;
}
.bg-tf-pin-sheet h2 { text-align: center; margin: 0 0 18px; font-size: 1.15rem; }
.bg-tf-pin-dots {
  display: flex; justify-content: center; gap: 10px; margin-bottom: 12px;
}
.bg-tf-pin-dots span {
  width: 42px; height: 48px; border-radius: 12px;
  border: 1.5px solid rgba(255,255,255,.1);
  background: rgba(255,255,255,.03);
}
.bg-tf-pin-dots span.on {
  border-color: #00D4AA;
  box-shadow: 0 0 0 1px rgba(0,212,170,.3);
}
.bg-tf-pin-dots span.filled {
  background: rgba(0,212,170,.15);
  border-color: rgba(0,212,170,.4);
}
.bg-tf-pin-err { text-align: center; color: #F6465D; font-size: .8rem; min-height: 1.2em; }

/* Sending banner */
.bg-send-banner {
  position: fixed; top: 12px; left: 50%;
  transform: translateX(-50%) translateY(-120%);
  z-index: 400; width: min(400px, calc(100% - 24px));
  transition: transform .35s cubic-bezier(.22,1,.36,1);
  pointer-events: none;
}
.bg-send-banner.show { transform: translateX(-50%) translateY(0); }
.bg-send-banner-inner {
  display: flex; align-items: center; gap: 12px;
  background: #1a1d24;
  border: 1px solid rgba(255,255,255,.08);
  border-radius: 16px;
  padding: 12px 14px;
  box-shadow: 0 12px 40px rgba(0,0,0,.45);
}
.bg-send-ico {
  width: 40px; height: 40px; border-radius: 50%;
  background: linear-gradient(135deg,#6366f1,#3b82f6);
  display: flex; align-items: center; justify-content: center;
  font-weight: 800; color: #fff; font-size: .75rem;
  position: relative; flex-shrink: 0;
}
.bg-send-ico::after {
  content: ''; position: absolute; right: -1px; bottom: -1px;
  width: 12px; height: 12px; border-radius: 3px;
  background: #0052FF; border: 2px solid #1a1d24;
}
.bg-send-text { flex: 1; min-width: 0; }
.bg-send-title { font-weight: 800; font-size: .9rem; }
.bg-send-sub { font-size: .75rem; color: var(--muted); margin-top: 2px; }
.bg-send-arrows {
  color: #00D4AA; font-weight: 900; font-size: 1.1rem;
  letter-spacing: -2px;
  animation: bgSendPulse 1s ease-in-out infinite;
}
@keyframes bgSendPulse {
  0%, 100% { opacity: .5; }
  50% { opacity: 1; }
}

/* Screen transition animations */
.screen {
  opacity: 0;
  transform: translate3d(12px, 0, 0);
  pointer-events: none;
  transition:
    opacity 220ms cubic-bezier(0.22, 1, 0.36, 1),
    transform 220ms cubic-bezier(0.22, 1, 0.36, 1);
}
.screen.active {
  opacity: 1;
  transform: translate3d(0, 0, 0);
  pointer-events: auto;
  z-index: 2;
}
.screen.screen-exit {
  opacity: 0;
  transform: translate3d(-10px, 0, 0);
}
.screen.screen-enter-from {
  opacity: 0;
  transform: translate3d(16px, 0, 0);
}

/* History list polish */
.tx-row-v2 {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 12px 4px;
  border-bottom: 1px solid rgba(255,255,255,.04);
  cursor: pointer;
}
.tx-row-v2:active { opacity: .85; }
.tx-ico {
  width: 40px; height: 40px; border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  font-size: 1rem; flex-shrink: 0;
}
.tx-ico.out { background: rgba(246,70,93,.12); color: #F6465D; }
.tx-ico.in { background: rgba(14,203,129,.12); color: #0ECB81; }
.tx-ico.fail { background: rgba(255,255,255,.06); color: var(--muted); }
.tx-main { flex: 1; min-width: 0; }
.tx-title { font-weight: 700; font-size: .9rem; }
.tx-sub { font-size: .72rem; color: var(--muted); margin-top: 2px; }
.tx-right { text-align: right; flex-shrink: 0; }
.tx-amt { font-weight: 700; font-size: .9rem; }
.tx-amt.out { color: #F6465D; }
.tx-amt.in { color: #0ECB81; }
.tx-time { font-size: .68rem; color: var(--muted); margin-top: 2px; }
.tx-filters {
  display: flex; gap: 8px; padding: 8px 0 12px; overflow-x: auto;
}
.tx-filters button {
  border: none; border-radius: 20px;
  padding: 7px 14px; font-size: .78rem; font-weight: 700;
  background: rgba(255,255,255,.06); color: var(--muted); cursor: pointer;
  white-space: nowrap;
}
.tx-filters button.on {
  background: rgba(0,212,170,.15); color: #00D4AA;
}
.tx-token-filters {
  display: flex; gap: 6px; padding: 0 0 12px; overflow-x: auto;
  flex-wrap: nowrap;
}
.tx-token-filters button {
  border: 1px solid rgba(255,255,255,.08);
  border-radius: 16px;
  padding: 5px 12px; font-size: .72rem; font-weight: 600;
  background: transparent; color: var(--muted); cursor: pointer;
  white-space: nowrap;
}
.tx-token-filters button.on {
  border-color: rgba(0,212,170,.35);
  background: rgba(0,212,170,.12);
  color: #00D4AA;
}
.tx-token-badge {
  display: inline-block;
  margin-left: 6px;
  padding: 1px 7px;
  border-radius: 8px;
  font-size: .65rem;
  font-weight: 700;
  background: rgba(255,255,255,.08);
  color: var(--muted);
  vertical-align: middle;
}

/* Address validation */
.addr-valid-ok { color: #0ECB81 !important; }
.addr-valid-bad { color: #F6465D !important; }
.bg-tf-addr-box.invalid {
  border-color: rgba(246,70,93,.45) !important;
  box-shadow: 0 0 0 3px rgba(246,70,93,.1);
}
.bg-tf-addr-box.valid {
  border-color: rgba(14,203,129,.4) !important;
}
.addr-hint {
  font-size: .75rem; margin-top: 6px; min-height: 1.2em;
}

/* === FIX: Transfer flow isolation + banner layout === */
#bgTransferFlow.bg-tf-flow,
.bg-tf-flow {
  position: fixed !important;
  inset: 0 !important;
  z-index: 500 !important;
  background: #0b0e11 !important;
  display: none;
  flex-direction: column;
  max-width: 480px;
  margin: 0 auto;
  width: 100%;
  height: 100%;
  height: 100dvh;
  overflow: hidden;
  pointer-events: auto;
}
#bgTransferFlow.bg-tf-flow.show,
.bg-tf-flow.show {
  display: flex !important;
}

/* Hide bottom nav / other chrome while transfer open */
body.tf-open #bottomNav,
body.tf-open .bottom-nav,
body.tf-open #navBar {
  display: none !important;
}
body.tf-open .screen {
  visibility: hidden !important;
  pointer-events: none !important;
}
body.tf-open #bgTransferFlow.bg-tf-flow {
  visibility: visible !important;
  pointer-events: auto !important;
}

/* Banner — fixed, never break layout of home */
#bgSendBanner.bg-send-banner,
.bg-send-banner {
  position: fixed !important;
  top: 12px !important;
  left: 50% !important;
  right: auto !important;
  bottom: auto !important;
  transform: translateX(-50%) translateY(-140%) !important;
  z-index: 600 !important;
  width: min(400px, calc(100% - 24px)) !important;
  max-width: 400px !important;
  margin: 0 !important;
  padding: 0 !important;
  pointer-events: none !important;
  transition: transform 0.35s cubic-bezier(0.22, 1, 0.36, 1) !important;
  background: transparent !important;
  border: none !important;
}
#bgSendBanner.bg-send-banner.show,
.bg-send-banner.show {
  transform: translateX(-50%) translateY(0) !important;
}
.bg-send-banner-inner {
  display: flex !important;
  flex-direction: row !important;
  align-items: center !important;
  gap: 12px !important;
  background: #1a1d24 !important;
  border: 1px solid rgba(255,255,255,.1) !important;
  border-radius: 16px !important;
  padding: 12px 14px !important;
  box-shadow: 0 12px 40px rgba(0,0,0,.5) !important;
  width: 100% !important;
  box-sizing: border-box !important;
}
.bg-send-text {
  flex: 1 1 auto !important;
  min-width: 0 !important;
  display: flex !important;
  flex-direction: column !important;
}
.bg-send-title {
  font-weight: 800 !important;
  font-size: .9rem !important;
  color: #fff !important;
  line-height: 1.25 !important;
}
.bg-send-sub {
  font-size: .75rem !important;
  color: #9ca3af !important;
  margin-top: 2px !important;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.bg-send-arrows {
  flex-shrink: 0 !important;
  color: #00D4AA !important;
  font-weight: 900 !important;
  letter-spacing: -2px !important;
}

/* Kill legacy broken banner forever */
#sendBanner,
.send-banner,
.sb-title,
.sb-arrows,
.sb-ico,
.sb-body,
.sb-sub {
  display: none !important;
  visibility: hidden !important;
  height: 0 !important;
  width: 0 !important;
  overflow: hidden !important;
  opacity: 0 !important;
  pointer-events: none !important;
  position: absolute !important;
  left: -9999px !important;
}

/* Single official banner */
#bgSendBanner {
  position: fixed !important;
  top: 12px !important;
  left: 50% !important;
  transform: translateX(-50%) translateY(-150%) !important;
  z-index: 9999 !important;
  width: min(400px, calc(100vw - 24px)) !important;
  pointer-events: none !important;
  display: block !important;
  opacity: 1 !important;
  height: auto !important;
}
#bgSendBanner.show {
  transform: translateX(-50%) translateY(0) !important;
}
#bgSendBanner .bg-send-banner-inner {
  display: flex !important;
  flex-direction: row !important;
  align-items: center !important;
  gap: 12px !important;
  background: #1a1d24 !important;
  border-radius: 16px !important;
  padding: 12px 14px !important;
  border: 1px solid rgba(255,255,255,.1) !important;
  box-shadow: 0 12px 40px rgba(0,0,0,.55) !important;
}

/* Network logos */
.net-logo {
  width: 40px; height: 40px; border-radius: 50%;
  object-fit: cover; flex-shrink: 0;
  background: #1a1d24;
}
.net-logo-fallback {
  width: 40px; height: 40px; border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  font-size: .65rem; font-weight: 800; color: #fff; flex-shrink: 0;
}

/* Transfer screen polish */
#screen-transfer .topbar .back,
#screen-tf-confirm .topbar .back,
#screen-addrpick .topbar .back {
  width: 36px; height: 36px; border-radius: 50%;
  border: none; background: rgba(255,255,255,.08);
  color: #fff; font-size: 1.1rem; cursor: pointer;
  display: flex; align-items: center; justify-content: center;
  padding: 0; min-width: 36px;
}
#screen-transfer .topbar .back:empty::before,
#screen-tf-confirm .topbar .back:empty::before {
  content: '‹';
}
#screen-transfer {
  padding-bottom: 72px;
}
body.tf-open #bottomNav { display: none !important; }

/* CRITICAL FIX: do NOT hide native transfer screens */
body.tf-open .screen {
  visibility: visible !important;
  pointer-events: auto !important;
}
body.tf-open .screen:not(.active) {
  visibility: hidden !important;
  pointer-events: none !important;
  opacity: 0 !important;
}
body.tf-open .screen.active {
  visibility: visible !important;
  pointer-events: auto !important;
  opacity: 1 !important;
  z-index: 5 !important;
}
/* Only hide nav, not all screens */
body.tf-open #bottomNav {
  display: none !important;
}

/* Ensure transfer screen is visible when active */
#screen-transfer.active,
#screen-tf-confirm.active,
#screen-addrpick.active,
#screen-token.active {
  display: flex !important;
  flex-direction: column !important;
  opacity: 1 !important;
  visibility: visible !important;
  transform: none !important;
  z-index: 5 !important;
  min-height: 100%;
  background: var(--bg, #0b0e11);
}

/* Base screen visibility safety */
.screen {
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  position: absolute;
  inset: 0;
  overflow: auto;
  transition: opacity 180ms ease;
}
.screen.active {
  opacity: 1 !important;
  visibility: visible !important;
  pointer-events: auto !important;
  position: relative;
  z-index: 2;
}

/* ============================================================
   Confirm Transfer — Bitget-style (v6.6)
   ============================================================ */
#screen-tf-confirm {
  background: var(--bg);
  padding: 0 0 calc(var(--safe-b) + 16px);
}
#screen-tf-confirm .tfc-top {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 14px 16px 8px;
  gap: 8px;
}
#screen-tf-confirm .tfc-back {
  width: 40px; height: 40px;
  border-radius: 50%;
  border: none;
  background: var(--card);
  color: var(--text);
  font-size: 1.5rem;
  line-height: 1;
  cursor: pointer;
  display: flex; align-items: center; justify-content: center;
  flex-shrink: 0;
}
#screen-tf-confirm .tfc-back:active { transform: scale(.94); }
#screen-tf-confirm .tfc-title {
  font-size: 1.05rem;
  font-weight: 700;
  margin: 0;
  text-align: center;
  flex: 1;
}
#screen-tf-confirm .tfc-top-spacer { width: 40px; flex-shrink: 0; }

#screen-tf-confirm .tfc-body {
  flex: 1;
  display: flex;
  flex-direction: column;
  padding: 8px 16px 0;
  gap: 14px;
  overflow-y: auto;
}

/* Hero amount */
#screen-tf-confirm .tfc-hero {
  text-align: center;
  padding: 18px 8px 10px;
}
#screen-tf-confirm .tfc-ico-wrap {
  position: relative;
  width: 64px; height: 64px;
  margin: 0 auto 14px;
}
#screen-tf-confirm .tfc-ico,
#screen-tf-confirm .tfc-ico-img {
  width: 64px; height: 64px;
  border-radius: 50%;
  object-fit: cover;
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: 800;
  font-size: .95rem;
  color: #fff;
  background: linear-gradient(135deg, #6366f1, #3b82f6);
  box-shadow: 0 8px 24px rgba(59, 130, 246, .25);
}
#screen-tf-confirm .tfc-ico-img {
  display: none;
  background: var(--card2);
}
#screen-tf-confirm .tfc-net-badge {
  position: absolute;
  right: -2px; bottom: -2px;
  width: 22px; height: 22px;
  border-radius: 6px;
  background: #0052FF;
  border: 2.5px solid var(--bg);
  background-size: cover;
  background-position: center;
  box-shadow: 0 2px 6px rgba(0,0,0,.35);
}
#screen-tf-confirm .tfc-amt {
  font-size: 1.85rem;
  font-weight: 800;
  letter-spacing: -.02em;
  line-height: 1.2;
  color: var(--text);
  word-break: break-word;
}
#screen-tf-confirm .tfc-usd {
  margin-top: 6px;
  font-size: .95rem;
  color: var(--muted);
  font-weight: 500;
}

/* Cards */
#screen-tf-confirm .tfc-card {
  background: var(--card);
  border: 1px solid var(--border);
  border-radius: 16px;
  padding: 14px 16px;
}
#screen-tf-confirm .tfc-card-label {
  font-size: .75rem;
  color: var(--muted);
  font-weight: 600;
  margin-bottom: 6px;
  text-transform: none;
}
#screen-tf-confirm .tfc-card-addr {
  font-size: .88rem;
  font-weight: 600;
  word-break: break-all;
  line-height: 1.4;
  color: var(--text);
}
#screen-tf-confirm .tfc-tag {
  display: inline-flex;
  margin-top: 8px;
  padding: 4px 10px;
  border-radius: 20px;
  background: var(--mint-dim);
  color: var(--mint);
  font-size: .72rem;
  font-weight: 600;
}
#screen-tf-confirm .tfc-card-meta .tfc-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 8px 0;
}
#screen-tf-confirm .tfc-card-meta .tfc-row + .tfc-row {
  border-top: 1px solid rgba(255,255,255,.05);
}
#screen-tf-confirm .tfc-row .l {
  font-size: .82rem;
  color: var(--muted);
  font-weight: 500;
  flex-shrink: 0;
}
#screen-tf-confirm .tfc-row .r {
  font-size: .84rem;
  font-weight: 600;
  color: var(--text);
  text-align: right;
  word-break: break-all;
}
#screen-tf-confirm .mono {
  font-family: var(--mono), ui-monospace, monospace;
  font-size: .8rem !important;
  letter-spacing: -.01em;
}

/* Footer CTA */
#screen-tf-confirm .tfc-footer {
  margin-top: auto;
  padding: 12px 0 8px;
}
#screen-tf-confirm .tfc-send {
  width: 100%;
  border: none;
  border-radius: 28px;
  padding: 16px 20px;
  font-size: 1rem;
  font-weight: 700;
  cursor: pointer;
  color: #04140f;
  background: linear-gradient(135deg, #00D4AA, #00B894);
  box-shadow: 0 6px 24px rgba(0, 212, 170, .35);
  transition: transform .12s, filter .15s, box-shadow .15s;
}
#screen-tf-confirm .tfc-send:active {
  transform: scale(.98);
  filter: brightness(.95);
}
#screen-tf-confirm .tfc-send:disabled {
  opacity: .5;
  cursor: not-allowed;
  box-shadow: none;
}

/* ============================================================
   Sending banner — token logo support
   ============================================================ */
.bg-send-ico-wrap {
  position: relative;
  width: 44px; height: 44px;
  flex-shrink: 0;
}
.bg-send-ico,
.bg-send-ico-img {
  width: 44px; height: 44px;
  border-radius: 50%;
  object-fit: cover;
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: 800;
  font-size: .72rem;
  color: #fff;
  background: linear-gradient(135deg, #6366f1, #3b82f6);
}
.bg-send-ico-img {
  display: none;
  background: #1a1d24;
}
.bg-send-net-dot {
  position: absolute;
  right: -1px; bottom: -1px;
  width: 14px; height: 14px;
  border-radius: 4px;
  background: #0052FF;
  border: 2px solid #1a1d24;
  box-sizing: border-box;
}
.bg-send-banner.success .bg-send-arrows { color: #0ECB81; }
.bg-send-banner.error .bg-send-arrows { color: #F6465D; }
.bg-send-banner.success .bg-send-title { color: #0ECB81; }
.bg-send-banner.error .bg-send-title { color: #F6465D; }


/* ============================================================
   Recipient address — Bitget polish (v6.6.2)
   ============================================================ */
#bgTfRecipient .bg-tf-addr-box {
  position: relative;
  background: #12161c !important;
  border: 1.5px solid rgba(0, 212, 170, 0.35) !important;
  border-radius: 16px !important;
  padding: 12px 14px 44px !important;
  margin-bottom: 14px;
  transition: border-color .2s, box-shadow .2s;
}
#bgTfRecipient .bg-tf-addr-box:focus-within {
  border-color: #00D4AA !important;
  box-shadow: 0 0 0 3px rgba(0, 212, 170, 0.12);
}
#bgTfRecipient .bg-tf-addr-label {
  display: block;
  font-size: .72rem;
  font-weight: 600;
  color: #848E9C;
  margin-bottom: 6px;
}
#bgTfRecipient .bg-tf-addr-box textarea,
#bgTfRecipient #bgTfToInput {
  width: 100% !important;
  border: none !important;
  background: transparent !important;
  color: #EAECEF !important;
  font-size: .92rem !important;
  resize: none !important;
  outline: none !important;
  font-family: ui-monospace, 'IBM Plex Mono', monospace !important;
  min-height: 68px !important;
  padding: 0 !important;
  line-height: 1.45;
}
#bgTfRecipient .bg-tf-addr-actions {
  position: absolute;
  right: 10px;
  bottom: 8px;
  display: flex;
  gap: 6px;
}
#bgTfRecipient .bg-tf-addr-act {
  display: inline-flex !important;
  align-items: center;
  gap: 4px;
  border: none !important;
  border-radius: 10px !important;
  background: rgba(255,255,255,.08) !important;
  color: #EAECEF !important;
  font-size: .72rem !important;
  font-weight: 600 !important;
  padding: 6px 10px !important;
  cursor: pointer;
}
#bgTfRecipient .bg-tf-addr-act:active {
  background: rgba(0,212,170,.2) !important;
  color: #00D4AA !important;
}
#bgTfRecipient .bg-tf-act-ico { font-size: .85rem; }

#bgTfRecipient .bg-tf-row-btns {
  display: grid !important;
  grid-template-columns: 1fr 1fr !important;
  gap: 10px !important;
  margin-bottom: 18px !important;
}
#bgTfRecipient .bg-tf-sec-btn {
  display: inline-flex !important;
  align-items: center;
  justify-content: center;
  gap: 8px;
  border: none !important;
  border-radius: 24px !important;
  background: #0d3d42 !important;
  color: #5eead4 !important;
  font-weight: 700 !important;
  font-size: .9rem !important;
  padding: 13px 12px !important;
  cursor: pointer;
  min-height: 48px;
}
#bgTfRecipient .bg-tf-sec-btn:active {
  filter: brightness(1.15);
  transform: scale(.98);
}
#bgTfRecipient .bg-tf-sec-ico {
  font-size: 1rem;
  line-height: 1;
}

#bgTfRecipient .bg-tf-tabs {
  display: flex !important;
  gap: 0 !important;
  margin-bottom: 12px !important;
  border-bottom: 1px solid rgba(255,255,255,.06);
  padding-bottom: 0;
}
#bgTfRecipient .bg-tf-tabs button {
  border: none !important;
  background: none !important;
  color: #848E9C !important;
  font-weight: 700 !important;
  font-size: .9rem !important;
  cursor: pointer;
  padding: 10px 14px !important;
  position: relative;
  border-radius: 0 !important;
}
#bgTfRecipient .bg-tf-tabs button.on {
  color: #EAECEF !important;
}
#bgTfRecipient .bg-tf-tabs button.on::after {
  content: '';
  position: absolute;
  left: 14px; right: 14px; bottom: 0;
  height: 2px;
  background: #00D4AA;
  border-radius: 2px 2px 0 0;
}

#bgTfRecipient .bg-tf-list {
  display: flex;
  flex-direction: column;
  gap: 8px;
  flex: 1;
  min-height: 80px;
  max-height: 220px;
  overflow-y: auto;
}
#bgTfRecipient .bg-tf-wallet {
  display: flex !important;
  align-items: center;
  gap: 12px;
  padding: 12px 14px !important;
  border-radius: 14px !important;
  background: #12161c !important;
  border: 1px solid rgba(255,255,255,.06) !important;
  cursor: pointer;
  color: #EAECEF !important;
  text-align: left;
  width: 100%;
}
#bgTfRecipient .bg-tf-wallet:active {
  border-color: rgba(0,212,170,.4) !important;
  background: rgba(0,212,170,.06) !important;
}
#bgTfRecipient .bg-tf-cta {
  width: 100% !important;
  margin-top: 12px !important;
  border: none !important;
  border-radius: 28px !important;
  background: linear-gradient(135deg, #00D4AA, #00B894) !important;
  color: #04120e !important;
  font-size: 1.05rem !important;
  font-weight: 800 !important;
  padding: 16px !important;
  cursor: pointer;
  box-shadow: 0 6px 24px rgba(0,212,170,.3);
}
#bgTfRecipient .bg-tf-cta:disabled {
  opacity: .4 !important;
  cursor: default !important;
  box-shadow: none !important;
}

/* Copy on confirm cards */
.bg-tf-card-label-row,
.tfc-card-label-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  margin-bottom: 6px;
}
.bg-tf-card-label-row .bg-tf-card-label,
.tfc-card-label-row .tfc-card-label {
  margin-bottom: 0;
}
.bg-tf-copy-mini,
.tfc-copy-btn {
  border: none !important;
  background: rgba(255,255,255,.08) !important;
  color: #00D4AA !important;
  font-size: .72rem !important;
  font-weight: 700 !important;
  padding: 5px 10px !important;
  border-radius: 8px !important;
  cursor: pointer;
  flex-shrink: 0;
}
.bg-tf-copy-mini:active,
.tfc-copy-btn:active {
  background: rgba(0,212,170,.2) !important;
}

/* ============================================================
   Transfer loading / sending animation polish
   ============================================================ */
.bg-send-banner-inner {
  position: relative;
  overflow: hidden;
}
.bg-send-banner.show .bg-send-banner-inner::before {
  content: '';
  position: absolute;
  left: 0; top: 0; bottom: 0;
  width: 3px;
  background: linear-gradient(180deg, #00D4AA, #3b82f6);
  border-radius: 16px 0 0 16px;
}
.bg-send-banner.show .bg-send-banner-inner::after {
  content: '';
  position: absolute;
  left: 0; right: 0; bottom: 0;
  height: 2px;
  background: linear-gradient(90deg, transparent, #00D4AA, transparent);
  background-size: 200% 100%;
  animation: brSendShimmer 1.4s ease-in-out infinite;
}
@keyframes brSendShimmer {
  0% { background-position: 100% 0; opacity: .4; }
  50% { opacity: 1; }
  100% { background-position: -100% 0; opacity: .4; }
}
.bg-send-arrows {
  animation: bgSendPulse 1s ease-in-out infinite, brArrowSlide 1.2s ease-in-out infinite;
}
@keyframes brArrowSlide {
  0%, 100% { transform: translateX(0); }
  50% { transform: translateX(3px); }
}
.bg-send-ico-wrap {
  animation: brIcoPop .35s cubic-bezier(.22,1,.36,1) both;
}
@keyframes brIcoPop {
  from { transform: scale(.6); opacity: 0; }
  to { transform: scale(1); opacity: 1; }
}
.bg-send-banner.success .bg-send-banner-inner::before {
  background: #0ECB81;
}
.bg-send-banner.error .bg-send-banner-inner::before {
  background: #F6465D;
}
.bg-send-banner.success .bg-send-banner-inner::after,
.bg-send-banner.error .bg-send-banner-inner::after {
  animation: none;
  opacity: 0;
}

/* Transfer button loading state */
.tfc-send.is-loading,
.bg-tf-cta.is-loading {
  position: relative;
  color: transparent !important;
  pointer-events: none;
}
.tfc-send.is-loading::after,
.bg-tf-cta.is-loading::after {
  content: '';
  position: absolute;
  left: 50%; top: 50%;
  width: 22px; height: 22px;
  margin: -11px 0 0 -11px;
  border: 2.5px solid rgba(4,20,15,.25);
  border-top-color: #04140f;
  border-radius: 50%;
  animation: brSpin .7s linear infinite;
}
@keyframes brSpin {
  to { transform: rotate(360deg); }
}


/* ============================================================
   Alamat penerima — Bitget style (v6.6.3)
   ============================================================ */
#screen-addrpick {
  background: #0b0e11 !important;
  padding: 0 !important;
  display: none;
  flex-direction: column;
}
#screen-addrpick.active {
  display: flex !important;
}
#screen-addrpick .ap-top {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 14px 16px 8px;
  gap: 8px;
  flex-shrink: 0;
}
#screen-addrpick .ap-back {
  width: 40px; height: 40px;
  border-radius: 50%;
  border: none;
  background: transparent;
  color: #EAECEF;
  display: flex; align-items: center; justify-content: center;
  cursor: pointer;
  padding: 0;
}
#screen-addrpick .ap-back:active { opacity: .7; }
#screen-addrpick .ap-title {
  flex: 1;
  text-align: center;
  font-size: 1.12rem;
  font-weight: 700;
  color: #fff;
  margin: 0;
}
#screen-addrpick .ap-top-sp { width: 40px; flex-shrink: 0; }

#screen-addrpick .ap-body {
  flex: 1;
  overflow-y: auto;
  padding: 8px 16px calc(var(--safe-b) + 20px);
  display: flex;
  flex-direction: column;
  gap: 14px;
}

/* Input card — large rounded like Bitget */
#screen-addrpick .ap-input-card {
  position: relative;
  background: #151a21;
  border-radius: 16px;
  border: 1px solid transparent;
  padding: 18px 16px 40px;
  min-height: 120px;
  transition: border-color .2s, box-shadow .2s;
}
#screen-addrpick .ap-input-card:focus-within {
  border-color: rgba(0, 212, 170, 0.45);
  box-shadow: 0 0 0 3px rgba(0, 212, 170, 0.1);
}
#screen-addrpick #apInput {
  width: 100% !important;
  border: none !important;
  background: transparent !important;
  color: #EAECEF !important;
  font-size: 1rem !important;
  line-height: 1.45 !important;
  resize: none !important;
  outline: none !important;
  min-height: 72px !important;
  padding: 0 !important;
  font-family: inherit !important;
}
#screen-addrpick #apInput::placeholder {
  color: #5a6270 !important;
  font-size: 1.05rem;
  font-weight: 500;
}
#screen-addrpick .ap-input-tools {
  position: absolute;
  right: 12px;
  bottom: 10px;
  display: flex;
  gap: 6px;
}
#screen-addrpick .ap-tool {
  width: 32px; height: 32px;
  border-radius: 8px;
  border: none;
  background: rgba(255,255,255,.06);
  color: #848E9C;
  display: none;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  padding: 0;
}
#screen-addrpick .ap-tool:active {
  background: rgba(0,212,170,.15);
  color: #00D4AA;
}

/* Pindai / Tempel */
#screen-addrpick .ap-actions {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 12px;
}
#screen-addrpick .ap-act {
  display: inline-flex !important;
  align-items: center;
  justify-content: center;
  gap: 8px;
  border: none !important;
  border-radius: 999px !important;
  background: #0d3a40 !important;
  color: #5eead4 !important;
  font-weight: 700 !important;
  font-size: .95rem !important;
  padding: 14px 16px !important;
  cursor: pointer;
  min-height: 50px;
}
#screen-addrpick .ap-act:active {
  filter: brightness(1.12);
  transform: scale(.98);
}
#screen-addrpick .ap-act-svg {
  flex-shrink: 0;
  opacity: .95;
}

/* Tabs */
#screen-addrpick .ap-tabs {
  display: flex;
  gap: 18px;
  padding: 4px 2px 0;
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: none;
}
#screen-addrpick .ap-tabs::-webkit-scrollbar { display: none; }
#screen-addrpick .ap-tab {
  border: none !important;
  background: none !important;
  color: #6b7280 !important;
  font-weight: 700 !important;
  font-size: .95rem !important;
  padding: 8px 0 !important;
  cursor: pointer;
  white-space: nowrap;
  border-radius: 0 !important;
  position: relative;
}
#screen-addrpick .ap-tab.on {
  color: #EAECEF !important;
}
#screen-addrpick .ap-tab.on::after {
  content: '';
  position: absolute;
  left: 0; right: 0; bottom: 0;
  height: 2px;
  background: transparent; /* Bitget often no underline — keep clean */
}

/* List rows */
#screen-addrpick .ap-list {
  display: flex;
  flex-direction: column;
  gap: 10px;
  padding-bottom: 8px;
}
#screen-addrpick .ap-row {
  display: flex !important;
  align-items: flex-start;
  gap: 12px;
  width: 100%;
  text-align: left;
  border: none !important;
  border-radius: 14px !important;
  background: #151a21 !important;
  color: #EAECEF !important;
  padding: 14px 14px !important;
  cursor: pointer;
  font-family: inherit;
}
#screen-addrpick .ap-row:active {
  background: #1a222c !important;
}
#screen-addrpick .ap-folder {
  width: 40px; height: 40px;
  border-radius: 12px;
  background: #1c2430;
  color: #8b95a5;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  margin-top: 2px;
}
#screen-addrpick .ap-avatar {
  width: 40px; height: 40px;
  border-radius: 50%;
  background: linear-gradient(135deg, #6366f1, #8b5cf6);
  color: #fff;
  font-weight: 800;
  font-size: .95rem;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}
#screen-addrpick .ap-row-body {
  flex: 1;
  min-width: 0;
}
#screen-addrpick .ap-row-title {
  font-weight: 700;
  font-size: .95rem;
  color: #EAECEF;
  margin-bottom: 3px;
}
#screen-addrpick .ap-row-addr {
  font-size: .72rem;
  color: #6b7280;
  word-break: break-all;
  line-height: 1.35;
  font-family: ui-monospace, 'IBM Plex Mono', monospace;
}
#screen-addrpick .ap-row-time {
  margin-top: 4px;
  font-size: .7rem;
  color: #5a6270;
}
#screen-addrpick .ap-empty {
  text-align: center;
  color: #6b7280;
  font-size: .9rem;
  padding: 28px 12px;
}


/* ============================================================
   Bitget Transfer Flow polish (v6.6.5)
   ============================================================ */
.bg-tf-flow {
  z-index: 9999 !important;
  background: #0b0e11 !important;
}
#bgTransferFlow.bg-tf-flow {
  z-index: 9999 !important;
  background: #0b0e11 !important;
}
body.tf-open #bgTransferFlow {
  display: flex !important;
  visibility: visible !important;
  opacity: 1 !important;
  pointer-events: auto !important;
  z-index: 9999 !important;
}
/* Gas warning card (Bitget) */
.bg-tf-gas-warn {
  display: none;
  background: #121a22;
  border: 1px solid rgba(0, 180, 216, 0.25);
  border-radius: 16px;
  padding: 16px;
  margin-bottom: 12px;
  gap: 12px;
  align-items: flex-start;
}
.bg-tf-gas-warn.show {
  display: flex;
}
.bg-tf-gas-warn-text {
  flex: 1;
  min-width: 0;
}
.bg-tf-gas-warn-title {
  color: #22d3ee;
  font-weight: 700;
  font-size: .95rem;
  margin-bottom: 6px;
  line-height: 1.3;
}
.bg-tf-gas-warn-desc {
  color: #9ca3af;
  font-size: .82rem;
  line-height: 1.45;
}
.bg-tf-gas-topup {
  flex-shrink: 0;
  border: none;
  border-radius: 999px;
  background: #22d3ee;
  color: #04120e;
  font-weight: 800;
  font-size: .85rem;
  padding: 10px 16px;
  cursor: pointer;
  align-self: center;
}
.bg-tf-tok-img {
  width: 28px; height: 28px; border-radius: 50%;
  object-fit: cover; flex-shrink: 0;
}
.bg-tf-bal-pill {
  gap: 10px !important;
}
.bg-tf-cta:disabled {
  opacity: .4 !important;
  cursor: default !important;
  box-shadow: none !important;
}
.bg-tf-cta {
  display: block !important;
  margin-top: 12px !important;
}

/* Recipient list rows */
.bg-tf-folder {
  width: 40px; height: 40px; border-radius: 12px;
  background: #1c2430; color: #8b95a5;
  display: flex; align-items: center; justify-content: center;
  flex-shrink: 0;
}
.bg-tf-wallet {
  display: flex !important;
  align-items: flex-start !important;
  gap: 12px !important;
  width: 100%;
  text-align: left;
  border: none !important;
  border-radius: 14px !important;
  background: #151a21 !important;
  color: #EAECEF !important;
  padding: 14px !important;
  cursor: pointer;
  font-family: inherit;
}
.bg-tf-wallet:active { background: #1a222c !important; }
.bg-tf-wallet .av {
  width: 40px; height: 40px; border-radius: 50%;
  background: linear-gradient(135deg,#6366f1,#8b5cf6);
  color: #fff; font-weight: 800; font-size: .95rem;
  display: flex; align-items: center; justify-content: center;
  flex-shrink: 0;
}
.bg-tf-w-body { flex: 1; min-width: 0; }
.bg-tf-wallet .nm { font-weight: 700; font-size: .95rem; margin-bottom: 3px; }
.bg-tf-wallet .ad {
  font-size: .72rem; color: #6b7280; word-break: break-all;
  font-family: ui-monospace, monospace; line-height: 1.35;
}
.bg-tf-wallet .tm { margin-top: 4px; font-size: .7rem; color: #5a6270; }
.bg-tf-empty {
  text-align: center; color: #6b7280; font-size: .9rem; padding: 28px 12px;
}

/* Confirm hero with logo */
.bg-tf-confirm-ico-wrap {
  position: relative;
  width: 64px; height: 64px;
  margin: 0 auto 14px;
}
.bg-tf-confirm-ico,
.bg-tf-confirm-img {
  width: 64px; height: 64px; border-radius: 50%;
  object-fit: cover;
  display: flex; align-items: center; justify-content: center;
  font-weight: 800; color: #fff; font-size: .95rem;
  background: linear-gradient(135deg,#6366f1,#3b82f6);
  box-shadow: 0 8px 24px rgba(59,130,246,.25);
}
.bg-tf-confirm-img { display: none; background: #1a1d24; }
.bg-tf-confirm-net {
  position: absolute; right: -2px; bottom: -2px;
  width: 20px; height: 20px; border-radius: 6px;
  background: #0052FF; border: 2.5px solid #0b0e11;
}

.bg-tf-pin-close {
  position: absolute; right: 16px; top: 12px;
  border: none; background: transparent; color: #848E9C;
  font-size: 1.1rem; cursor: pointer;
}
.bg-tf-pin-hint {
  text-align: center; color: #848E9C; font-size: .85rem; margin: 0 0 8px;
}
.bg-tf-pin-sheet { position: relative; }

/* Slide steps subtly */
.bg-tf-step {
  animation: bgTfIn .22s cubic-bezier(.22,1,.36,1) both;
}
@keyframes bgTfIn {
  from { opacity: 0; transform: translateX(12px); }
  to { opacity: 1; transform: translateX(0); }
}


/* ============================================================
   Transfer overlay — kill page conflict (v6.6.7)
   ============================================================ */
body.tf-open .screen,
body.tf-open .screen.active {
  display: none !important;
  visibility: hidden !important;
  pointer-events: none !important;
  opacity: 0 !important;
  z-index: 0 !important;
}
body.tf-open #bottomNav,
body.tf-open .bottom-nav {
  display: none !important;
}
body.tf-open #bgTransferFlow,
body.tf-open #bgTransferFlow.bg-tf-flow,
body.tf-open #bgTransferFlow.show {
  display: flex !important;
  visibility: visible !important;
  opacity: 1 !important;
  pointer-events: auto !important;
  z-index: 99999 !important;
  position: fixed !important;
  inset: 0 !important;
  background: #0b0e11 !important;
  max-width: 480px !important;
  margin: 0 auto !important;
  width: 100% !important;
  height: 100% !important;
  height: 100dvh !important;
}
body.tf-open #bgSendBanner {
  z-index: 100000 !important;
}
#screen-transfer {
  /* legacy transfer screen disabled — Bitget flow only */
  display: none !important;
}
#screen-transfer.active {
  display: none !important;
}


/* Modal must sit above Bitget transfer overlay (z 99999) */
body.tf-open .modal-backdrop,
body.tf-open #modalBackdrop,
.modal-backdrop.show {
  z-index: 100000 !important;
}


/* ===== Discover Bitget-style ===== */
.disc-promo{
  margin:12px 14px 8px;border-radius:18px;overflow:hidden;cursor:pointer;
  background:
    linear-gradient(120deg,rgba(0,82,255,.55),rgba(0,212,170,.25)),
    linear-gradient(160deg,#0b1220,#152238);
  min-height:132px;position:relative;
  border:1px solid rgba(255,255,255,.08);
}
.disc-promo-inner{padding:18px 16px 16px;position:relative;z-index:1}
.disc-promo-kicker{
  display:inline-block;font-size:.65rem;font-weight:800;letter-spacing:.08em;
  color:#9ec5ff;margin-bottom:8px
}
.disc-promo-title{font-size:1.15rem;font-weight:800;line-height:1.25;color:#fff}
.disc-promo-sub{margin-top:8px;font-size:.75rem;color:rgba(255,255,255,.7)}
.disc-open-url{
  display:block;width:calc(100% - 28px);margin:8px 14px 12px;padding:12px;
  border-radius:12px;border:1px solid rgba(0,212,170,.35);background:rgba(0,212,170,.1);
  color:#00d4aa;font-weight:700;font-size:.82rem;cursor:pointer
}
.dapp-row.bg-style{
  display:flex;align-items:center;gap:12px;padding:12px 16px;cursor:pointer;
  border-bottom:1px solid rgba(255,255,255,.04)
}
.dapp-row.bg-style:active{background:rgba(255,255,255,.03)}
.dapp-ico{
  width:44px;height:44px;border-radius:12px;overflow:hidden;flex-shrink:0;
  background:#1c2230;display:flex;align-items:center;justify-content:center
}
.dapp-ico img{width:100%;height:100%;object-fit:cover;display:block}
.dapp-chain{
  width:28px;height:28px;border-radius:8px;object-fit:cover;flex-shrink:0;
  background:#1c2230;border:1px solid rgba(255,255,255,.06)
}
.dapp-star{
  border:none;background:transparent;color:var(--muted-2);font-size:1.05rem;
  padding:6px;cursor:pointer;line-height:1;flex-shrink:0
}
.dapp-star:hover{color:#f5a623}
.disc-sec{padding:14px 16px 6px;font-weight:700;font-size:.9rem;display:flex;justify-content:space-between;align-items:center;color:#e5e7eb}
.disc-sec-more{opacity:.45;font-weight:500}
.news-row.bg-news{
  display:flex;gap:12px;padding:12px 4px;border-bottom:1px solid rgba(255,255,255,.05);cursor:pointer
}
.news-ico{
  width:40px;height:40px;border-radius:12px;overflow:hidden;flex-shrink:0;background:#1c2230
}
.news-ico img{width:100%;height:100%;object-fit:cover;display:block}
.news-title{font-size:.84rem;font-weight:600;line-height:1.35;color:var(--text)}
.news-meta{font-size:.68rem;color:#9ca3af;margin-top:4px}
.disc-tabs{gap:14px}
.disc-tabs span{font-size:.86rem}


/* ===== Beranda Bitget polish ===== */
.bg-quick{display:flex;justify-content:space-around;padding:6px 10px 14px;gap:4px}
.bg-quick .q{display:flex;flex-direction:column;align-items:center;gap:8px;flex:1;cursor:pointer;min-width:0}
.bg-quick .q span{font-size:.72rem;color:#c5cdd8;font-weight:600}
.bg-quick .q-ic{
  width:48px;height:48px;border-radius:16px;display:flex;align-items:center;justify-content:center;
  background:#1a2030;border:1px solid rgba(255,255,255,.06);color:var(--text)
}
.bg-quick .q-gift{color:#ff6b8a}
.bg-quick .q-esim{color:#5b8cff}
.bg-promo{
  margin:4px 16px 14px;padding:14px 14px;border-radius:16px;background:#151b27;
  display:flex;align-items:center;gap:12px;position:relative;border:1px solid rgba(255,255,255,.05)
}
.bg-promo .txt{flex:1;font-size:.84rem;line-height:1.4;color:#e5e7eb;font-weight:600}
.bg-promo .txt a{color:#00d4aa;font-weight:700;text-decoration:none}
.bg-promo .art-mascot{flex-shrink:0}
.bg-promo .x{
  position:absolute;top:8px;right:8px;border:none;background:rgba(0,0,0,.25);
  color:#9ca3af;width:22px;height:22px;border-radius:50%;font-size:12px;cursor:pointer
}
.bg-news-card{
  margin:0 16px 12px;padding:14px;border-radius:16px;background:#151b27;
  border:1px solid rgba(255,255,255,.05);cursor:pointer
}
.bg-news-card .nt{font-size:.9rem;font-weight:700;line-height:1.4;color:#eef2f7;margin-bottom:12px}
.bg-news-card .nr{display:flex;align-items:center;gap:10px}
.bg-news-card .ni{
  width:28px;height:28px;border-radius:50%;overflow:hidden;background:#222a3a;flex-shrink:0;
  display:flex;align-items:center;justify-content:center;font-size:.72rem;font-weight:800;color:#0a1628
}
.bg-news-card .ni img{width:100%;height:100%;object-fit:cover}
.bg-news-card .ns{font-weight:700;font-size:.82rem;color:#e5e7eb}
.bg-news-card .np{margin-left:auto;font-weight:700;font-size:.82rem}
.bg-news-card .np.up{color:#0ECB81}
.bg-news-card .np.down{color:#F6465D}
.bg-news-card .nm{margin-top:10px;font-size:.68rem;color:var(--muted)}
.bg-top .icon-btn{
  width:36px;height:36px;border-radius:12px;background:#1a2030;display:flex;align-items:center;
  justify-content:center;color:#c5cdd8;border:1px solid rgba(255,255,255,.06)
}


/* ===== Discover Bitget polish (v7) — header & search ===== */
/* Performance: only transform/opacity; no layout thrash */
@media (prefers-reduced-motion: reduce) {
  #screen-discover *,
  #screen-discover *::before,
  #screen-discover *::after {
    animation: none !important;
    transition: none !important;
  }
}

#screen-discover .disc-topbar,
.disc-topbar {
  display: flex;
  align-items: center;
  justify-content: flex-start;
  padding: 6px 8px 2px;
  gap: 2px;
  background: transparent;
  contain: layout style;
}

#screen-discover .disc-title,
.disc-topbar .disc-title {
  flex: 1;
  text-align: left;
  font-weight: 700;
  font-size: 1.12rem;
  letter-spacing: -0.01em;
  color: var(--text);
  margin: 0;
  padding: 0 4px;
  background: none !important;
  border: none !important;
  box-shadow: none !important;
}

/* Icon buttons — flat, GPU press feedback */
#screen-discover .disc-back,
#screen-discover .disc-link-btn,
#screen-discover .disc-scan-btn,
.disc-back,
.disc-link-btn,
.disc-scan-btn {
  width: 36px;
  height: 36px;
  min-width: 36px;
  padding: 0;
  margin: 0;
  border: none !important;
  outline: none !important;
  background: transparent !important;
  box-shadow: none !important;
  -webkit-appearance: none;
  appearance: none;
  color: var(--text);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  border-radius: 10px;
  flex-shrink: 0;
  transition: transform var(--dur-fast) var(--ease-out),
              opacity var(--dur-fast) var(--ease-out),
              background-color var(--dur) var(--ease-soft);
  will-change: transform;
  -webkit-tap-highlight-color: transparent;
}
#screen-discover .disc-scan-btn {
  width: 28px;
  height: 28px;
  min-width: 28px;
  color: var(--muted);
}
#screen-discover .disc-back:hover,
#screen-discover .disc-link-btn:hover,
#screen-discover .disc-scan-btn:hover {
  background: rgba(255, 255, 255, 0.05) !important;
}
#screen-discover .disc-back:active,
#screen-discover .disc-link-btn:active,
#screen-discover .disc-scan-btn:active {
  transform: scale(0.92);
  opacity: 0.85;
  background: rgba(255, 255, 255, 0.07) !important;
}
#screen-discover .disc-back svg,
#screen-discover .disc-link-btn svg,
#screen-discover .disc-scan-btn svg,
#screen-discover .disc-search-ico {
  display: block;
  flex-shrink: 0;
  pointer-events: none;
  color: currentColor;
  stroke: currentColor;
}

/* Search pill — dark theme */
#screen-discover .disc-search-wrap,
.disc-search-wrap {
  display: flex;
  align-items: center;
  gap: 10px;
  margin: 8px 16px 12px;
  padding: 0 14px;
  height: 44px;
  background: var(--card2);
  border: 1px solid var(--border);
  border-radius: 22px;
  box-shadow: none;
  transition: border-color var(--dur) var(--ease-soft),
              background-color var(--dur) var(--ease-soft);
  contain: layout style;
}
#screen-discover .disc-search-wrap:focus-within {
  border-color: rgba(0, 212, 170, 0.28);
  background: #1a212c;
}
#screen-discover .disc-search-ico,
.disc-search-ico {
  flex-shrink: 0;
  width: 18px;
  height: 18px;
  opacity: 0.55;
  color: var(--muted);
  pointer-events: none;
}
#screen-discover .disc-search,
.disc-search {
  flex: 1;
  min-width: 0;
  height: 100%;
  border: none !important;
  outline: none !important;
  background: transparent !important;
  box-shadow: none !important;
  -webkit-appearance: none;
  appearance: none;
  color: var(--text);
  font-size: 0.88rem;
  font-weight: 400;
  padding: 0;
  margin: 0;
  caret-color: var(--mint);
}
#screen-discover .disc-search:focus,
#screen-discover .disc-search:focus-visible {
  outline: none !important;
  border: none !important;
  box-shadow: none !important;
  background: transparent !important;
}
#screen-discover .disc-search::placeholder {
  color: var(--muted-2);
  opacity: 1;
  font-weight: 400;
}

/* Autofill / clear chrome */
#screen-discover input.disc-search:-webkit-autofill,
#screen-discover input.disc-search:-webkit-autofill:focus {
  -webkit-box-shadow: 0 0 0 40px var(--card2) inset !important;
  -webkit-text-fill-color: var(--text) !important;
  transition: background-color 9999s ease-out;
}
#screen-discover input.disc-search::-webkit-search-decoration,
#screen-discover input.disc-search::-webkit-search-cancel-button,
#screen-discover input.disc-search::-webkit-search-results-button,
#screen-discover input.disc-search::-webkit-search-results-decoration {
  -webkit-appearance: none;
  appearance: none;
  display: none;
}

/* Rows & tabs — smooth, cheap motion */
#screen-discover .dapp-row.bg-style {
  transition: background-color var(--dur-fast) var(--ease-soft),
              transform var(--dur-fast) var(--ease-out);
  will-change: transform;
}
#screen-discover .dapp-row.bg-style:active {
  background: rgba(255, 255, 255, 0.04);
  transform: scale(0.995);
}
#screen-discover .disc-tabs span {
  transition: color var(--dur) var(--ease-soft),
              border-color var(--dur) var(--ease-soft);
}
#screen-discover .disc-promo-bitget {
  transition: transform var(--dur) var(--ease-out),
              opacity var(--dur) var(--ease-soft);
  will-change: transform;
}
#screen-discover .disc-promo-bitget:active {
  transform: scale(0.985);
  opacity: 0.92;
}
#screen-discover .dapp-ico img {
  /* avoid layout shift */
  content-visibility: auto;
}

.disc-tabs{
  display:flex;gap:18px;padding:4px 16px 0;overflow-x:auto;
  border-bottom:1px solid rgba(255,255,255,.06);scrollbar-width:none;-ms-overflow-style:none
}
.disc-tabs::-webkit-scrollbar{display:none}
.disc-tabs span{
  font-size:.88rem;color:var(--muted);font-weight:600;cursor:pointer;
  padding:10px 0 12px;white-space:nowrap;position:relative;border-bottom:2px solid transparent
}
.disc-tabs span.on{color:var(--text);border-bottom-color:var(--mint)}

.disc-promo-bitget{
  margin:12px 14px 6px;border-radius:16px;overflow:hidden;cursor:pointer;
  min-height:148px;position:relative;
  background:
    radial-gradient(ellipse 80% 60% at 80% 40%,rgba(0,120,255,.35),transparent 55%),
    linear-gradient(145deg,#0a1628 0%,#0d1f3c 45%,#0a1528 100%);
  border:1px solid rgba(255,255,255,.07)
}
.disc-promo-badge{
  position:absolute;top:10px;right:12px;font-size:.62rem;font-weight:700;
  color:rgba(255,255,255,.55);background:rgba(0,0,0,.25);border:1px solid rgba(255,255,255,.12);
  padding:2px 7px;border-radius:6px;letter-spacing:.04em
}
.disc-promo-inner{padding:20px 18px 18px;position:relative;z-index:1}
.disc-promo-brand{
  font-size:.68rem;font-weight:800;letter-spacing:.12em;color:rgba(180,210,255,.75);margin-bottom:8px
}
.disc-promo-title{font-size:1.35rem;font-weight:800;line-height:1.2;color:#fff;letter-spacing:-.02em}
.disc-promo-sub{margin-top:10px;font-size:.8rem;color:rgba(255,255,255,.62);line-height:1.45}
.disc-promo-glow{
  position:absolute;right:-20%;top:-30%;width:70%;height:120%;
  background:radial-gradient(circle,rgba(0,180,255,.18),transparent 65%);
  pointer-events:none
}

.disc-sec{
  padding:16px 16px 6px;font-weight:700;font-size:.92rem;
  display:flex;justify-content:space-between;align-items:center;color:var(--text)
}
.disc-sec-more{opacity:.4;font-weight:500;font-size:1.1rem}

.dapp-row.bg-style{
  display:flex;align-items:center;gap:14px;padding:13px 16px;cursor:pointer;
  border-bottom:1px solid rgba(255,255,255,.035)
}
.dapp-row.bg-style:active{background:rgba(255,255,255,.03)}
.dapp-ico{
  width:46px;height:46px;border-radius:13px;overflow:hidden;flex-shrink:0;
  background:#1a2030;display:flex;align-items:center;justify-content:center;
  border:1px solid rgba(255,255,255,.06)
}
.dapp-ico img{width:100%;height:100%;object-fit:cover;display:block}
.dapp-row .info{flex:1;min-width:0}
.dapp-row .info .n{font-weight:700;font-size:.92rem;color:#f0f3f8;letter-spacing:.01em}
.dapp-row .info .d{
  font-size:.73rem;color:var(--muted);margin-top:3px;
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis
}
.dapp-chain{
  width:30px;height:30px;border-radius:9px;object-fit:cover;flex-shrink:0;
  background:#151b27;border:1px solid rgba(255,255,255,.08)
}
.dapp-chain-spacer{width:30px;flex-shrink:0}

.disc-empty{
  text-align:center;padding:40px 24px;color:var(--muted);font-size:.88rem;line-height:1.5
}
.disc-empty span{font-size:.78rem;opacity:.75}

.disc-open-url{
  display:block;width:calc(100% - 28px);margin:8px 14px 12px;padding:12px;
  border-radius:12px;border:1px solid rgba(0,212,170,.35);background:rgba(0,212,170,.1);
  color:#00d4aa;font-weight:700;font-size:.82rem;cursor:pointer
}

.disc-scroll{padding-bottom:24px}

/* Hide legacy static banner if present */
#screen-discover .disc-banner{display:none}

/* Search type=search clear button hide (Bitget clean look) */
#screen-discover input.disc-search::-webkit-search-decoration,
#screen-discover input.disc-search::-webkit-search-cancel-button,
#screen-discover input.disc-search::-webkit-search-results-button,
#screen-discover input.disc-search::-webkit-search-results-decoration{
  -webkit-appearance:none;appearance:none;display:none
}


/* ===== Performance & dark theme utilities ===== */
.gpu {
  transform: translateZ(0);
  backface-visibility: hidden;
}
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
}
/* Prefer compositing for common interactive surfaces */
.btn, .dapp-row, .token-row, .action-btn .ico, .nav-item {
  transition-property: transform, opacity, background-color, border-color, color, filter;
  transition-duration: var(--dur-fast, 120ms);
  transition-timing-function: var(--ease-out, cubic-bezier(.2,.8,.2,1));
}


/* ===== Preferences screen (Bitget) ===== */
#screen-preferences {
  background: var(--bg);
}
.pref-topbar {
  display: flex;
  align-items: center;
  padding: 8px 10px 4px;
  gap: 4px;
}
.pref-back {
  width: 40px; height: 40px;
  border: none; background: transparent; color: var(--text);
  display: inline-flex; align-items: center; justify-content: center;
  cursor: pointer; border-radius: 10px;
  transition: transform var(--dur-fast, 120ms) var(--ease-out, ease), background-color 150ms ease;
}
.pref-back:active { transform: scale(0.92); background: rgba(255,255,255,.06); }
.pref-title {
  flex: 1; text-align: center; font-weight: 700; font-size: 1.08rem; color: var(--text);
}
.pref-top-spacer { width: 40px; }
.pref-scroll { flex: 1; overflow-y: auto; padding: 12px 0 28px; }
.pref-list { padding: 8px 0; }
.pref-row {
  width: 100%;
  display: flex; align-items: center; gap: 10px;
  padding: 18px 18px;
  border: none; background: transparent;
  color: var(--text); cursor: pointer; text-align: left;
  font-family: inherit; font-size: 0.95rem; font-weight: 600;
  transition: background-color 120ms ease;
  -webkit-tap-highlight-color: transparent;
}
.pref-row:active { background: rgba(255,255,255,.04); }
.pref-row-label { flex: 1; min-width: 0; }
.pref-row-val {
  color: var(--muted); font-weight: 500; font-size: 0.88rem;
  max-width: 48%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.pref-chevron { flex-shrink: 0; color: var(--muted); opacity: 0.7; }
.pref-arrows .up { color: var(--green); font-weight: 700; }
.pref-arrows .down { color: var(--red); font-weight: 700; margin-left: 2px; }

/* Picker options in modal */
.pref-opt {
  display: flex; align-items: center; justify-content: space-between;
  padding: 16px 4px; font-size: 0.92rem; font-weight: 500;
  cursor: pointer; border-bottom: 1px solid rgba(255,255,255,.05);
  color: var(--text);
}
.pref-opt:last-child { border-bottom: none; }
.pref-opt:active { opacity: 0.85; }
.pref-opt-on { color: var(--mint); }
.pref-opt-check { color: var(--mint); font-weight: 700; font-size: 1rem; }
.pref-opt-extra { font-size: 1rem; letter-spacing: 2px; }

/* Light theme */
html[data-theme="light"] {
  --bg: #F5F6F8;
  --surface: #FFFFFF;
  --card: #FFFFFF;
  --card2: #EEF0F3;
  --border: rgba(0,0,0,.08);
  --border2: rgba(0,0,0,.12);
  --text: #0B0E11;
  --text-secondary: #3D4450;
  --muted: #6B7280;
  --muted-2: #9CA3AF;
  --mint: #00A88A;
  --mint-dim: rgba(0,168,138,.12);
}
html[data-theme="light"] body,
html[data-theme="light"] .app,
html[data-theme="light"] .screen {
  background: var(--bg);
  color: var(--text);
}
html[data-theme="light"] .bottom-nav {
  background: var(--surface);
  border-top-color: var(--border);
}
html[data-theme="light"] .pref-row:active {
  background: rgba(0,0,0,.04);
}
html[data-theme="light"] .disc-search-wrap,
html[data-theme="light"] .pref-opt {
  border-color: var(--border);
}

/* Price color invert */
html[data-price-color="inverted"] .tok-up,
html[data-price-color="inverted"] .up,
html[data-price-color="inverted"] .chg.up,
html[data-price-color="inverted"] .np.up {
  color: var(--red) !important;
}
html[data-price-color="inverted"] .tok-down,
html[data-price-color="inverted"] .down,
html[data-price-color="inverted"] .chg.down,
html[data-price-color="inverted"] .np.down {
  color: var(--green) !important;
}
html[data-price-color="standard"] .tok-up,
html[data-price-color="standard"] .up {
  color: var(--green);
}
html[data-price-color="standard"] .tok-down,
html[data-price-color="standard"] .down {
  color: var(--red);
}


/* === RTL layout === */
html.rtl,
html[dir="rtl"] {
  direction: rtl;
}

html.rtl body,
html[dir="rtl"] body {
  direction: rtl;
  text-align: right;
}

/* Mirror flex rows that rely on physical left/right */
html.rtl .topbar,
html.rtl .pref-topbar,
html.rtl .disc-topbar,
html.rtl .set-topbar,
html.rtl .bg-home-top,
html.rtl .swap-card-top,
html.rtl .swap-card-mid,
html.rtl .swap-meta-row,
html.rtl .pref-row,
html.rtl .set-item,
html.rtl .set-profile,
html.rtl .tx-row,
html.rtl .disc-row,
html.rtl .nav-item,
html.rtl .bottom-nav,
html.rtl .bg-quick,
html.rtl .action-row {
  flex-direction: row-reverse;
}

html.rtl .bottom-nav {
  flex-direction: row-reverse;
}

/* Chevrons / back arrows */
html.rtl .set-chevron,
html.rtl .set-arrow,
html.rtl .pref-row-chevron,
html.rtl .arrow {
  transform: scaleX(-1);
}

html.rtl .back,
html.rtl .set-back-btn,
html.rtl .pref-back,
html.rtl .disc-back {
  transform: scaleX(-1);
}

/* Keep numbers / addresses LTR inside RTL */
html.rtl .amt,
html.rtl .swap-amt-input,
html.rtl .balance-num,
html.rtl .addr,
html.rtl code,
html.rtl .mono,
html.rtl [data-ltr] {
  direction: ltr;
  unicode-bidi: isolate;
  text-align: left;
}

/* Padding/margin logical-ish fixes for common bars */
html.rtl .home-scroll,
html.rtl .pref-body,
html.rtl .disc-scroll {
  text-align: right;
}

html.rtl .search,
html.rtl .disc-search {
  text-align: right;
}

html.rtl .nl {
  text-align: center;
}

/* Toast stays readable */
html.rtl .toast {
  direction: rtl;
}


/* Crypto 101 / Help */
.c101-body { display: flex; flex-direction: column; gap: 12px; }
.c101-card {
  background: var(--card, #1a1d24);
  border-radius: 14px;
  padding: 14px 16px;
  border: 1px solid rgba(255,255,255,0.06);
}
.c101-card-title {
  font-weight: 600;
  font-size: 0.95rem;
  margin-bottom: 6px;
  color: var(--text, #fff);
}
.c101-card-body {
  font-size: 0.85rem;
  line-height: 1.45;
  color: var(--muted, #9aa3b2);
}
.c101-link { max-width: none; }

/* ===== Bitget-style Swap (Trading) ===== */
.bg-swap-panel {
  padding: 12px 16px 28px;
  max-width: 480px;
  margin: 0 auto;
}
.bg-swap-top {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 18px;
  gap: 10px;
}
.bg-swap-avatar {
  width: 40px; height: 40px; border-radius: 50%;
  border: none; background: rgba(255,255,255,.06);
  color: var(--text); font-size: 1.1rem; cursor: pointer;
}
.bg-swap-mode {
  display: flex; align-items: center; gap: 6px;
  padding: 8px 16px; border-radius: 999px;
  border: none; background: rgba(255,255,255,.08);
  color: var(--text); font-weight: 700; font-size: .9rem; cursor: pointer;
}
.bg-swap-mode.on { background: rgba(255,255,255,.12); }
.bg-swap-mode-ico { opacity: .7; font-size: .85rem; }
.bg-swap-top-actions { display: flex; gap: 8px; }
.bg-swap-ico-btn {
  width: 40px; height: 40px; border-radius: 12px;
  border: none; background: transparent; color: var(--muted);
  display: flex; align-items: center; justify-content: center; cursor: pointer;
}
.bg-swap-ico-btn:active { background: rgba(255,255,255,.06); }

.bg-swap-card {
  background: rgba(255,255,255,.04);
  border: 1px solid rgba(255,255,255,.06);
  border-radius: 20px;
  padding: 14px 16px 12px;
  margin-bottom: 4px;
}
.bg-swap-card-row {
  display: flex; align-items: center; justify-content: space-between;
  gap: 10px; margin-bottom: 4px;
}
.bg-swap-token {
  display: flex; align-items: center; gap: 10px;
  background: transparent; border: none; color: var(--text);
  cursor: pointer; padding: 0; text-align: left;
}
.bg-swap-token img {
  width: 32px; height: 32px; border-radius: 50%;
  background: rgba(255,255,255,.08);
}
.bg-swap-token-meta { display: flex; flex-direction: column; line-height: 1.2; }
.bg-swap-sym { font-weight: 800; font-size: 1.05rem; }
.bg-swap-bal { font-size: .72rem; color: var(--muted); margin-top: 2px; }
.bg-swap-chev { color: var(--muted); font-size: .85rem; margin-left: 2px; }
.bg-swap-max {
  border: none; border-radius: 999px;
  padding: 7px 14px; font-size: .78rem; font-weight: 700;
  background: rgba(0,0,0,.35); color: var(--text); cursor: pointer;
}
.bg-swap-max:active { opacity: .8; }
.bg-swap-out-preview {
  font-size: .85rem; color: var(--muted); font-weight: 600;
}

.bg-swap-amt-wrap { margin: 4px 0 2px; }
.bg-swap-amt {
  width: 100%; background: transparent; border: none; outline: none;
  font-size: 2.4rem; font-weight: 700; color: var(--text);
  padding: 4px 0; letter-spacing: -0.02em;
}
.bg-swap-amt::placeholder { color: rgba(255,255,255,.25); }
.bg-swap-amt-out { color: var(--muted); font-size: 1.6rem; }
.bg-swap-usd-row {
  display: flex; justify-content: space-between; align-items: center;
  font-size: .78rem; color: var(--muted); min-height: 1.2em;
}
.bg-swap-slip { opacity: .85; }

.bg-swap-mid {
  display: flex; flex-direction: column; align-items: center;
  gap: 8px; margin: -2px 0 6px; position: relative; z-index: 2;
}
.bg-swap-flip {
  width: 36px; height: 36px; border-radius: 50%;
  border: 3px solid var(--bg, #0b0e11);
  background: #1a9bff; color: #fff;
  display: flex; align-items: center; justify-content: center;
  cursor: pointer; box-shadow: 0 2px 8px rgba(26,155,255,.35);
}
.bg-swap-flip:active { transform: scale(.94); }
.bg-swap-rate-pill {
  font-size: .78rem; color: var(--muted);
  background: rgba(255,255,255,.04);
  border-radius: 999px; padding: 4px 12px;
  max-width: 90%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}

.bg-swap-meta {
  display: flex; align-items: center; justify-content: center;
  gap: 6px; font-size: .72rem; color: var(--muted);
  margin: 10px 0 14px; flex-wrap: wrap;
}
.bg-swap-meta .dot { opacity: .4; }

.bg-swap-cta {
  width: 100%; border: none; border-radius: 999px;
  padding: 16px 20px; font-size: 1.05rem; font-weight: 800;
  background: #00d4c8; color: #041018; cursor: pointer;
  box-shadow: 0 4px 20px rgba(0,212,200,.25);
}
.bg-swap-cta:disabled {
  opacity: .45; cursor: not-allowed; box-shadow: none;
}
.bg-swap-cta:not(:disabled):active { transform: scale(.985); }

.bg-swap-hist {
  margin-top: 22px;
  border-top: 1px solid rgba(255,255,255,.06);
  padding-top: 14px;
}
.bg-swap-hist-hd {
  display: flex; justify-content: space-between; align-items: center;
  font-size: .82rem; font-weight: 700; margin-bottom: 10px;
}
.bg-swap-hist-clear {
  border: none; background: transparent; color: var(--muted);
  font-size: .75rem; cursor: pointer;
}
.bg-swap-hist-list { display: flex; flex-direction: column; gap: 2px; }
.bg-swap-hist-empty {
  text-align: center; color: var(--muted); font-size: .8rem;
  padding: 16px 8px;
}
.bg-swap-hist-row {
  display: flex; align-items: center; gap: 10px;
  padding: 10px 4px; border-radius: 12px; cursor: pointer;
}
.bg-swap-hist-row:active { background: rgba(255,255,255,.04); }
.bg-swap-hist-ico {
  width: 36px; height: 36px; border-radius: 10px;
  background: rgba(0,212,200,.12); color: #00d4c8;
  display: flex; align-items: center; justify-content: center;
  font-weight: 800; font-size: .85rem;
}
.bg-swap-hist-ico.fail { background: rgba(246,70,93,.12); color: #F6465D; }
.bg-swap-hist-main { flex: 1; min-width: 0; }
.bg-swap-hist-title { font-weight: 700; font-size: .88rem; }
.bg-swap-hist-sub { font-size: .72rem; color: var(--muted); margin-top: 2px; }
.bg-swap-hist-right { text-align: right; font-size: .78rem; color: var(--muted); }

/* ===== Market / Pasar (Bitget-style) ===== */
.mkt-panel { padding: 12px 14px 28px; max-width: 480px; margin: 0 auto; }
.mkt-top {
  display: flex; align-items: center; gap: 10px; margin-bottom: 12px;
}
.mkt-avatar {
  width: 40px; height: 40px; border-radius: 50%; border: none;
  background: linear-gradient(135deg, #7dd3fc, #34d399);
  display: flex; align-items: center; justify-content: center;
  cursor: pointer; flex-shrink: 0; font-size: 1.2rem; overflow: hidden;
}
.mkt-avatar img { width: 100%; height: 100%; object-fit: cover; }
.mkt-search-wrap {
  flex: 1; display: flex; align-items: center; gap: 8px;
  background: rgba(255,255,255,.06); border-radius: 999px;
  padding: 10px 14px;
}
.mkt-search-ico { opacity: .55; font-size: .9rem; }
.mkt-search-wrap input {
  flex: 1; background: transparent; border: none; outline: none;
  color: var(--text); font-size: .88rem;
}
.mkt-search-wrap input::placeholder { color: var(--muted); }
.mkt-icon-btn {
  width: 40px; height: 40px; border-radius: 12px; border: none;
  background: transparent; color: var(--muted); font-size: 1.1rem; cursor: pointer;
}

.mkt-ticker {
  display: flex; gap: 14px; overflow-x: auto; padding: 4px 2px 12px;
  -webkit-overflow-scrolling: touch; scrollbar-width: none;
}
.mkt-ticker::-webkit-scrollbar { display: none; }
.mkt-tick {
  flex-shrink: 0; font-size: .78rem; font-weight: 700;
  white-space: nowrap; color: var(--muted);
}
.mkt-tick .sym { color: var(--text); margin-right: 4px; }
.mkt-tick.up { color: #0ECB81; }
.mkt-tick.down { color: #F6465D; }

.mkt-banner {
  display: flex; align-items: flex-start; justify-content: space-between;
  gap: 10px; background: rgba(255,255,255,.05);
  border-radius: 16px; padding: 14px 16px; margin-bottom: 14px;
  border: 1px solid rgba(255,255,255,.06);
}
.mkt-banner-title { font-weight: 800; font-size: .95rem; margin-bottom: 4px; }
.mkt-banner-sub { font-size: .78rem; color: var(--muted); line-height: 1.35; }
.mkt-banner-x {
  border: none; background: transparent; color: var(--muted);
  font-size: 1.2rem; cursor: pointer; line-height: 1; padding: 0 4px;
}

.mkt-cats {
  display: flex; gap: 8px; overflow-x: auto; padding-bottom: 12px;
  scrollbar-width: none;
}
.mkt-cats::-webkit-scrollbar { display: none; }
.mkt-cat {
  flex-shrink: 0; border: none; border-radius: 999px;
  padding: 8px 14px; font-size: .8rem; font-weight: 700;
  background: rgba(255,255,255,.06); color: var(--muted); cursor: pointer;
}
.mkt-cat.on {
  background: rgba(255,255,255,.12); color: var(--text);
}

.mkt-section-hd {
  display: flex; justify-content: space-between; align-items: center;
  margin: 4px 0 8px; padding: 0 2px;
}
.mkt-section-title { font-weight: 800; font-size: .92rem; }
.mkt-section-more {
  border: none; background: transparent; color: var(--muted);
  font-size: 1rem; cursor: pointer;
}

.mkt-list { display: flex; flex-direction: column; gap: 2px; }
.mkt-empty {
  text-align: center; color: var(--muted); padding: 28px 12px; font-size: .85rem;
}
.mkt-row {
  display: flex; align-items: center; gap: 12px;
  padding: 12px 6px; border-radius: 14px; cursor: pointer;
}
.mkt-row:active { background: rgba(255,255,255,.04); }
.mkt-ico {
  width: 40px; height: 40px; border-radius: 50%;
  background: rgba(255,255,255,.08); object-fit: cover;
  display: flex; align-items: center; justify-content: center;
  font-weight: 800; font-size: .75rem; overflow: hidden; flex-shrink: 0;
}
.mkt-ico img { width: 100%; height: 100%; object-fit: cover; }
.mkt-main { flex: 1; min-width: 0; }
.mkt-name { font-weight: 800; font-size: .95rem; }
.mkt-vol { font-size: .72rem; color: var(--muted); margin-top: 2px; }
.mkt-right { text-align: right; flex-shrink: 0; }
.mkt-price { font-weight: 700; font-size: .95rem; }
.mkt-chg { font-size: .78rem; font-weight: 700; margin-top: 2px; }
.mkt-chg.up { color: #0ECB81; }
.mkt-chg.down { color: #F6465D; }
.mkt-star {
  border: none; background: transparent; color: var(--muted);
  font-size: 1rem; cursor: pointer; padding: 4px; flex-shrink: 0;
}
.mkt-star.on { color: #f5a623; }

/* ===== Market detail chart ===== */
.md-panel { padding: 10px 14px 28px; max-width: 480px; margin: 0 auto; }
.md-top {
  display: flex; align-items: center; gap: 10px; margin-bottom: 12px;
}
.md-back {
  width: 36px; height: 36px; border-radius: 10px; border: none;
  background: rgba(255,255,255,.06); color: var(--text); font-size: 1.1rem; cursor: pointer;
}
.md-title-wrap { flex: 1; display: flex; align-items: center; gap: 10px; min-width: 0; }
.md-icon { width: 32px; height: 32px; border-radius: 50%; background: rgba(255,255,255,.08); }
.md-sym-row { display: flex; align-items: center; gap: 6px; font-weight: 800; font-size: 1.05rem; }
.md-badge {
  font-size: .65rem; font-weight: 700; padding: 2px 6px; border-radius: 6px;
  background: rgba(0,212,200,.15); color: #00d4c8;
}
.md-sub { font-size: .72rem; color: var(--muted); }
.md-fav {
  border: none; background: transparent; color: var(--muted);
  font-size: 1.25rem; cursor: pointer;
}
.md-fav.on { color: #f5a623; }

.md-price-block { margin-bottom: 12px; }
.md-price { font-size: 2rem; font-weight: 800; letter-spacing: -0.02em; }
.md-price-sub { display: flex; gap: 10px; align-items: center; font-size: .85rem; color: var(--muted); margin-top: 4px; }
.md-chg.up { color: #0ECB81; font-weight: 700; }
.md-chg.down { color: #F6465D; font-weight: 700; }

.md-stats {
  display: grid; grid-template-columns: repeat(4, 1fr); gap: 8px;
  margin-bottom: 12px;
}
.md-stat .l { font-size: .65rem; color: var(--muted); }
.md-stat .v { font-size: .78rem; font-weight: 700; margin-top: 2px; }

.md-tf-row {
  display: flex; gap: 6px; margin-bottom: 10px; overflow-x: auto;
}
.md-tf {
  border: none; border-radius: 8px; padding: 6px 12px;
  font-size: .78rem; font-weight: 700; cursor: pointer;
  background: transparent; color: var(--muted);
}
.md-tf.on { background: rgba(255,255,255,.1); color: var(--text); }

.md-chart-wrap {
  position: relative; width: 100%; height: 220px;
  background: rgba(0,0,0,.25); border-radius: 12px; overflow: hidden;
  margin-bottom: 6px;
}
.md-chart-wrap canvas { width: 100%; height: 100%; display: block; }
.md-chart-empty {
  position: absolute; inset: 0; display: flex; align-items: center; justify-content: center;
  color: var(--muted); font-size: .85rem; pointer-events: none;
}
.md-ind { font-size: .68rem; color: var(--muted); margin-bottom: 14px; padding: 0 4px; }

.md-trade {
  background: rgba(255,255,255,.04); border-radius: 16px; padding: 14px;
  border: 1px solid rgba(255,255,255,.06);
}
.md-side-tabs { display: flex; gap: 8px; margin-bottom: 12px; }
.md-side {
  flex: 1; border: none; border-radius: 10px; padding: 10px;
  font-weight: 800; font-size: .9rem; cursor: pointer;
  background: rgba(255,255,255,.06); color: var(--muted);
}
.md-side.on { background: rgba(14,203,129,.2); color: #0ECB81; }
.md-side.sell.on { background: rgba(246,70,93,.2); color: #F6465D; }
.md-trade-row { margin-bottom: 10px; }
.md-trade-row label { font-size: .75rem; color: var(--muted); display: block; margin-bottom: 6px; }
.md-amt-box {
  display: flex; align-items: center; gap: 8px;
  background: rgba(0,0,0,.3); border-radius: 12px; padding: 12px 14px;
}
.md-amt-box input {
  flex: 1; background: transparent; border: none; outline: none;
  color: var(--text); font-size: 1.1rem; font-weight: 700;
}
.md-amt-box span { font-weight: 700; color: var(--muted); }
.md-trade-meta {
  display: flex; justify-content: space-between; font-size: .75rem;
  color: var(--muted); margin-bottom: 12px;
}
.md-actions { display: flex; gap: 10px; }
.md-btn {
  flex: 1; border: none; border-radius: 999px; padding: 14px;
  font-weight: 800; font-size: 1rem; cursor: pointer;
}
.md-btn.buy { background: #0ECB81; color: #041018; }
.md-btn.sell { background: #F6465D; color: #fff; }
.md-btn:disabled { opacity: .45; cursor: not-allowed; }
.md-hint {
  margin: 12px 0 0; font-size: .72rem; color: var(--muted);
  text-align: center; line-height: 1.4;
}

/* ===== Bitget Home polish ===== */
.bg-home-top {
  display: flex; align-items: center; gap: 10px;
  padding: 12px 16px 8px;
}
.bg-home-avatar {
  width: 40px; height: 40px; border-radius: 50%; border: none;
  background: linear-gradient(135deg, #7dd3fc, #34d399);
  font-size: 1.2rem; cursor: pointer; flex-shrink: 0;
  display: flex; align-items: center; justify-content: center;
}
.bg-home-search {
  flex: 1; display: flex; align-items: center; gap: 8px;
  background: rgba(255,255,255,.06); border-radius: 999px;
  padding: 10px 14px; color: var(--muted); font-size: .85rem; cursor: pointer;
}
.bg-home-ico {
  width: 40px; height: 40px; border-radius: 12px; border: none;
  background: transparent; color: var(--muted); font-size: 1.1rem; cursor: pointer;
}
.bg-home-bal-row {
  display: flex; align-items: flex-start; justify-content: space-between;
  padding: 8px 16px 12px; gap: 12px;
}
.bg-home-bal { font-size: 2rem; font-weight: 800; letter-spacing: -0.02em; }
.bg-home-chg { font-size: .8rem; color: var(--muted); margin-top: 4px; }
.bg-home-chg.down { color: #F6465D; }
.bg-home-chg.up { color: #0ECB81; }
.bg-home-add {
  border: none; border-radius: 999px; padding: 12px 18px;
  background: #00d4c8; color: #041018; font-weight: 800; font-size: .88rem;
  cursor: pointer; white-space: nowrap; flex-shrink: 0;
}
.bg-home-pills {
  display: flex; gap: 8px; overflow-x: auto; padding: 0 16px 14px;
  scrollbar-width: none;
}
.bg-home-pills::-webkit-scrollbar { display: none; }
.bg-home-pill {
  flex-shrink: 0; border: none; border-radius: 999px;
  padding: 10px 14px; font-size: .78rem; font-weight: 700;
  background: rgba(255,255,255,.06); color: var(--text); cursor: pointer;
  display: flex; align-items: center; gap: 6px;
}
.bg-home-banner {
  margin: 0 16px 14px; padding: 14px 16px;
  background: rgba(255,255,255,.05); border-radius: 16px;
  border: 1px solid rgba(255,255,255,.06);
  display: flex; justify-content: space-between; gap: 10px;
}
.bg-home-banner-t { font-weight: 800; font-size: .92rem; margin-bottom: 4px; }
.bg-home-banner-s { font-size: .78rem; color: var(--muted); margin-bottom: 8px; }
.bg-home-banner-a {
  border: none; background: transparent; color: #00d4c8;
  font-weight: 700; font-size: .82rem; cursor: pointer; padding: 0;
}
.bg-home-banner-x {
  border: none; background: transparent; color: var(--muted);
  font-size: 1.2rem; cursor: pointer; align-self: flex-start;
}

/* Soften bottom nav labels */
.bottom-nav .nl { font-size: .65rem; }
.bottom-nav .nav-item.active { color: #00d4c8; }
.bottom-nav .nav-item.active .ni { color: #00d4c8; }

/* ===== Deposit bottom sheet (Bitget-style) ===== */
.dep-sheet { padding: 4px 4px 12px; }
.dep-title {
  font-size: 1.15rem; font-weight: 800; margin: 4px 8px 16px;
  text-align: left;
}
.dep-note {
  font-size: .85rem; color: var(--muted); line-height: 1.45;
  margin: 0 8px 14px;
}
.dep-row {
  width: 100%; display: flex; align-items: center; gap: 14px;
  padding: 14px 12px; margin-bottom: 8px;
  border: none; border-radius: 16px;
  background: rgba(255,255,255,.05);
  color: var(--text); cursor: pointer; text-align: left;
}
.dep-row:active { background: rgba(255,255,255,.08); }
.dep-row-ico {
  width: 44px; height: 44px; border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  font-weight: 800; font-size: .85rem; flex-shrink: 0;
  background: rgba(255,255,255,.1);
}
.dep-qris { background: #fff; color: #111; font-size: .7rem; letter-spacing: -0.02em; }
.dep-buy { font-size: 1.1rem; }
.dep-recv { font-size: 1.2rem; background: rgba(255,255,255,.12); }
.dep-row-body { flex: 1; min-width: 0; }
.dep-row-name {
  font-weight: 800; font-size: .95rem;
  display: flex; align-items: center; gap: 8px; flex-wrap: wrap;
}
.dep-row-desc { font-size: .75rem; color: var(--muted); margin-top: 3px; }
.dep-chev { color: var(--muted); font-size: 1.2rem; flex-shrink: 0; }
.dep-badge {
  font-size: .65rem; font-weight: 700; padding: 2px 7px;
  border-radius: 6px; background: rgba(0,212,200,.2); color: #00d4c8;
}
.dep-badge-soft {
  background: rgba(255,255,255,.08); color: var(--muted);
}

/* ===== Buy / QRIS screen (Bitget-style) ===== */
.buy-panel { padding: 8px 16px 24px; max-width: 480px; margin: 0 auto; min-height: 100%; display: flex; flex-direction: column; }
.buy-top {
  display: flex; align-items: center; justify-content: space-between;
  margin-bottom: 20px; padding-top: 4px;
}
.buy-back, .buy-more {
  width: 40px; height: 40px; border: none; border-radius: 12px;
  background: transparent; color: var(--text); font-size: 1.15rem; cursor: pointer;
}
.buy-tabs { display: flex; gap: 20px; }
.buy-tab {
  border: none; background: transparent; color: var(--muted);
  font-size: 1.05rem; font-weight: 800; cursor: pointer; padding: 6px 2px;
  position: relative;
}
.buy-tab.on { color: var(--text); }
.buy-tab.on::after {
  content: ''; position: absolute; left: 0; right: 0; bottom: 0;
  height: 2px; background: var(--text); border-radius: 2px;
}
.buy-section { margin-bottom: 22px; }
.buy-label { font-size: .8rem; color: var(--muted); margin-bottom: 10px; }
.buy-row { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.buy-asset {
  display: flex; align-items: center; gap: 8px;
  border: none; border-radius: 999px; padding: 10px 14px;
  background: rgba(255,255,255,.08); color: var(--text);
  font-weight: 800; font-size: .9rem; cursor: pointer;
}
.buy-flag { font-size: 1rem; }
.buy-amt {
  font-size: 2.2rem; font-weight: 800; letter-spacing: -0.02em;
  text-align: right; flex: 1; min-width: 0;
}
.buy-est {
  font-size: 1.35rem; font-weight: 700; color: var(--muted);
  text-align: right; flex: 1;
}
.buy-provider {
  display: flex; align-items: center; gap: 12px;
  width: 100%; border: none; border-radius: 16px;
  padding: 14px 16px; margin: 8px 0 18px;
  background: rgba(255,255,255,.06); color: var(--text);
  cursor: pointer; text-align: left;
}
.buy-prov-ico {
  width: 40px; height: 40px; border-radius: 50%;
  background: #fff; color: #111; font-weight: 800; font-size: .7rem;
  display: flex; align-items: center; justify-content: center;
}
.buy-prov-txt { flex: 1; }
.buy-prov-name { font-weight: 700; font-size: .9rem; }
.buy-prov-sub { font-size: .75rem; color: var(--muted); margin-top: 2px; }
.buy-chev { color: var(--muted); font-size: 1.2rem; }
.buy-pad {
  display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px;
  margin-top: auto; padding: 8px 0 12px;
}
.buy-key {
  border: none; border-radius: 12px; padding: 16px 0;
  background: transparent; color: var(--text);
  font-size: 1.35rem; font-weight: 600; cursor: pointer;
}
.buy-key:active { background: rgba(255,255,255,.06); }
.buy-del { font-size: 1.1rem; }
.buy-next {
  width: 100%; border: none; border-radius: 999px; padding: 16px;
  background: #00d4c8; color: #041018; font-weight: 800; font-size: 1.05rem;
  cursor: pointer; margin-top: 4px;
}
.buy-next:disabled { opacity: .4; cursor: not-allowed; }

/* Provider sheet content inside modal */
.bp-sheet { padding: 4px 6px 16px; }
.bp-title {
  font-size: 1.1rem; font-weight: 800; margin: 4px 6px 16px;
  display: flex; justify-content: space-between; align-items: center;
}
.bp-sec { font-size: .75rem; color: var(--muted); margin: 8px 6px; }
.bp-row {
  width: 100%; display: flex; align-items: center; gap: 12px;
  padding: 14px 12px; margin-bottom: 8px;
  border: 1px solid transparent; border-radius: 16px;
  background: rgba(255,255,255,.05); color: var(--text);
  cursor: pointer; text-align: left;
}
.bp-row.on {
  border-color: #00d4c8; background: rgba(0,212,200,.08);
}
.bp-ico {
  width: 40px; height: 40px; border-radius: 50%;
  background: #fff; color: #111; display: flex; align-items: center;
  justify-content: center; font-weight: 800; font-size: .7rem; flex-shrink: 0;
}
.bp-body { flex: 1; min-width: 0; }
.bp-name { font-weight: 800; font-size: .92rem; display: flex; align-items: center; gap: 8px; }
.bp-meta { font-size: .75rem; color: var(--muted); margin-top: 2px; }
.bp-badge {
  font-size: .62rem; font-weight: 700; padding: 2px 6px; border-radius: 6px;
  background: rgba(0,212,200,.2); color: #00d4c8;
}
.bp-confirm {
  width: 100%; border: none; border-radius: 999px; padding: 15px;
  background: #00d4c8; color: #041018; font-weight: 800; font-size: 1rem;
  cursor: pointer; margin-top: 12px;
}

/* ===== Splash screen — Base blue (halus) ===== */
.br-splash {
  position: fixed;
  inset: 0;
  z-index: 99999;
  display: flex;
  align-items: center;
  justify-content: center;
  background:
    radial-gradient(ellipse 90% 60% at 50% 35%, rgba(255, 255, 255, 0.18) 0%, transparent 55%),
    radial-gradient(ellipse 80% 50% at 50% 90%, rgba(0, 40, 160, 0.25) 0%, transparent 55%),
    linear-gradient(165deg, #3B7CFF 0%, #0052FF 42%, #0040D6 100%);
  transition: opacity 0.45s ease, visibility 0.45s ease;
}
.br-splash.is-hide {
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
}
.br-splash-inner {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  padding: 24px;
  animation: brSplashIn 0.6s ease-out both;
}
@keyframes brSplashIn {
  from { opacity: 0; transform: scale(0.94) translateY(10px); }
  to   { opacity: 1; transform: scale(1) translateY(0); }
}
.br-splash-logo-wrap {
  width: 128px;
  height: 128px;
  border-radius: 28px;
  overflow: hidden;
  background: #0F1218;
  box-shadow:
    0 14px 44px rgba(0, 32, 120, 0.32),
    0 0 0 3px rgba(255, 255, 255, 0.55);
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 28px;
}
.br-splash-logo {
  width: 128px;
  height: 128px;
  object-fit: cover;
  border-radius: 28px;
  display: block;
}
.br-splash-title {
  margin: 0;
  font-size: 1.5rem;
  font-weight: 700;
  letter-spacing: -0.02em;
  color: #FFFFFF;
  font-family: Inter, system-ui, sans-serif;
  text-shadow: 0 1px 8px rgba(0, 40, 140, 0.25);
}
.br-splash-tag {
  margin: 10px 0 0;
  font-size: 0.98rem;
  font-weight: 500;
  color: rgba(255, 255, 255, 0.88);
  letter-spacing: 0.01em;
  font-family: Inter, system-ui, sans-serif;
}