
:root{
  --bg:#07111f;--panel:#111f38;--panel2:#193056;--line:rgba(255,255,255,.11);
  --text:#f7fbff;--muted:#9eb2d2;--accent:#5bc0be;--gold:#ffd166;
  --danger:#ff7a8a;--ok:#7cf2bd;--shadow:0 18px 48px rgba(0,0,0,.32)
}
*{box-sizing:border-box}
body{margin:0;min-height:100vh;background:radial-gradient(1100px 620px at 20% -10%,rgba(91,192,190,.2),transparent 60%),var(--bg);color:var(--text);font-family:Inter,system-ui,sans-serif}
a{color:inherit}button,input,select{font:inherit}button{cursor:pointer}
.hidden{display:none!important}.muted{color:var(--muted)}.ok{color:var(--ok)}.err{color:var(--danger)}
.top{position:sticky;top:0;z-index:20;background:rgba(7,17,31,.86);backdrop-filter:blur(15px);border-bottom:1px solid var(--line)}
.topin{max-width:1180px;margin:auto;padding:14px 18px;display:flex;gap:12px;align-items:center;justify-content:space-between}
.brand h1{margin:0;font-size:21px}.brand small{color:var(--muted)}
.nav{display:flex;gap:8px;flex-wrap:wrap;align-items:center}
.btn,.pill{padding:10px 13px;border-radius:13px;border:1px solid var(--line);background:rgba(255,255,255,.06);color:var(--text)}
.btn.primary{background:rgba(91,192,190,.18);border-color:rgba(91,192,190,.45)}
.btn.wallet{background:rgba(255,209,102,.15);border-color:rgba(255,209,102,.45)}
.btn:disabled{opacity:.4;cursor:not-allowed}
.wrap{max-width:1180px;margin:auto;padding:22px 18px 56px}
.card{background:rgba(17,31,56,.88);border:1px solid var(--line);border-radius:20px;box-shadow:var(--shadow);overflow:hidden;margin-bottom:16px}
.hd{padding:17px 18px;border-bottom:1px solid var(--line);display:flex;gap:12px;align-items:center;justify-content:space-between}
.bd{padding:18px}
.balance-grid{display:grid;grid-template-columns:repeat(5,1fr);gap:11px}
.balance{padding:15px;border-radius:16px;background:rgba(255,255,255,.045);border:1px solid var(--line)}
.balance span{display:block;color:var(--muted);font-size:12px}.balance b{display:block;font-size:21px;margin-top:6px;word-break:break-word}
.walletline{font-size:13px;word-break:break-all}
.tiers{display:grid;grid-template-columns:repeat(3,1fr);gap:12px}
.tier{padding:17px;border-radius:17px;border:1px solid var(--line);background:rgba(255,255,255,.035);cursor:pointer}
.tier.active{outline:3px solid var(--gold)}.tier h3{margin:0 0 8px}.amount{font-size:30px;font-weight:900}
.actions{display:flex;gap:10px;flex-wrap:wrap;margin-top:14px}
.grid{display:grid;grid-template-columns:1fr 1fr;gap:16px}
.row{display:flex;gap:9px;flex-wrap:wrap;align-items:center}
input,select{padding:12px;border-radius:12px;border:1px solid var(--line);background:rgba(255,255,255,.055);color:var(--text);outline:none}
input{flex:1;min-width:180px}
.ledger{display:grid;gap:8px;max-height:310px;overflow:auto}
.ledger-item{padding:11px;border-radius:13px;background:rgba(255,255,255,.04);display:flex;justify-content:space-between;gap:10px}
.notice{padding:13px;border-radius:14px;border:1px solid rgba(255,209,102,.3);background:rgba(255,209,102,.08);color:#ffe8a8}
.toast{position:fixed;right:18px;bottom:18px;z-index:50;max-width:430px;padding:13px 15px;border-radius:14px;background:#132540;border:1px solid var(--line);box-shadow:var(--shadow)}
@media(max-width:900px){.balance-grid{grid-template-columns:repeat(2,1fr)}.tiers,.grid{grid-template-columns:1fr}}
@media(max-width:560px){.wrap{padding:14px 11px 40px}.topin{align-items:flex-start}.balance-grid{grid-template-columns:1fr}.actions .btn{width:100%}}

hr{opacity:.7}

@media(max-width:700px){
  .topin{display:grid;grid-template-columns:1fr}
  .nav{justify-content:flex-start}
  .row .btn{max-width:100%}
}

.mobile-wallet-help{
  position:fixed;
  inset:0;
  z-index:100;
  display:grid;
  place-items:center;
  padding:18px;
  background:rgba(0,0,0,.72);
}
.mobile-wallet-help-card{
  width:min(620px,100%);
  padding:18px;
  border-radius:18px;
  border:1px solid var(--line);
  background:#132540;
  box-shadow:var(--shadow);
}
.mobile-wallet-help-head{
  display:flex;
  align-items:flex-start;
  justify-content:space-between;
  gap:12px;
  margin-bottom:14px;
}
.mobile-url-preview{
  display:block;
  margin-top:12px;
  padding:11px;
  border-radius:12px;
  border:1px solid var(--line);
  background:rgba(0,0,0,.25);
  color:#cfe1ff;
  word-break:break-all;
  white-space:normal;
}

.wallet-connect-card{
  width:min(680px,100%);
  padding:18px;
  border-radius:20px;
  border:1px solid var(--line);
  background:#132540;
  box-shadow:var(--shadow);
}
.wallet-connect-options{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:12px;
  margin:15px 0;
}
.wallet-option{
  min-height:138px;
  padding:17px;
  text-align:left;
  border:1px solid var(--line);
  border-radius:17px;
  background:rgba(255,255,255,.045);
  color:var(--text);
}
.wallet-option b{
  display:block;
  margin-bottom:8px;
  font-size:18px;
}
.wallet-option span{
  display:block;
  color:var(--muted);
  line-height:1.45;
}
.wallet-option:hover{
  border-color:rgba(91,192,190,.55);
  transform:translateY(-1px);
}
.primary-option{
  background:rgba(91,192,190,.12);
  border-color:rgba(91,192,190,.38);
}
.wallet-security-note{
  margin-top:13px;
  padding-top:13px;
  border-top:1px solid var(--line);
}
@media(max-width:700px){
  .wallet-connect-options{grid-template-columns:1fr}
  .wallet-option{min-height:112px}
}

.wallet-overview .hd{align-items:flex-start}
.wallet-actions{justify-content:flex-end}
.wallet-panel{
  margin-top:18px;
  padding:16px;
  border:1px solid var(--line);
  border-radius:18px;
  background:rgba(255,255,255,.035);
}
.wallet-panel-grid{
  display:grid;
  grid-template-columns:repeat(4,minmax(0,1fr));
  gap:12px;
}
.wallet-panel-grid>div{
  min-width:0;
  padding:12px;
  border-radius:14px;
  background:rgba(255,255,255,.035);
}
.wallet-panel-grid span{
  display:block;
  color:var(--muted);
  font-size:12px;
  margin-bottom:5px;
}
.wallet-panel-grid b{
  display:block;
  overflow:hidden;
  text-overflow:ellipsis;
  white-space:nowrap;
}
.status-good{color:#77e6ae}
.status-muted{color:var(--muted)}
.danger-soft{border-color:rgba(255,105,135,.4);color:#ff8ca4}
.wallet-note{margin:12px 0 0;line-height:1.45}
.balance.onchain{border-color:rgba(91,192,190,.28)}
@media(max-width:760px){
  .wallet-overview .hd{display:block}
  .wallet-actions{margin-top:12px;justify-content:stretch}
  .wallet-actions .btn{flex:1}
  .wallet-panel-grid{grid-template-columns:1fr 1fr}
}
@media(max-width:430px){
  .wallet-panel-grid{grid-template-columns:1fr}
  .wallet-panel .row{display:grid;grid-template-columns:1fr}
}

.wallet-chooser-backdrop{
  position:fixed;inset:0;z-index:10000;
  display:grid;place-items:center;padding:18px;
  background:rgba(3,8,20,.78);backdrop-filter:blur(10px)
}
.wallet-chooser-card{
  width:min(620px,100%);max-height:min(820px,94vh);overflow:auto;
  border:1px solid rgba(255,255,255,.12);border-radius:22px;
  background:#121d33;color:#fff;box-shadow:0 30px 90px rgba(0,0,0,.5)
}
.wallet-chooser-head{
  display:flex;justify-content:space-between;align-items:flex-start;gap:16px;
  padding:20px;border-bottom:1px solid rgba(255,255,255,.09)
}
.wallet-chooser-head h2{margin:0 0 5px}
.wallet-chooser-head p{margin:0;color:var(--muted,#9db0cf)}
.wallet-chooser-section{padding:18px 20px 4px}
.wallet-chooser-section h3{margin:0 0 10px;font-size:14px;color:var(--muted,#9db0cf)}
.wallet-provider-list{display:grid;gap:9px}
.wallet-provider-row{
  width:100%;display:grid;grid-template-columns:46px 1fr auto;align-items:center;gap:12px;
  padding:12px;border:1px solid rgba(255,255,255,.1);border-radius:15px;
  background:rgba(255,255,255,.045);color:#fff;text-align:left;cursor:pointer
}
.wallet-provider-row:hover{background:rgba(91,192,190,.12);border-color:rgba(91,192,190,.35)}
.wallet-provider-row b,.wallet-provider-row small{display:block}
.wallet-provider-row small{margin-top:3px;color:var(--muted,#9db0cf)}
.wallet-provider-icon{
  width:42px;height:42px;display:grid;place-items:center;border-radius:12px;
  background:rgba(255,255,255,.08);overflow:hidden;font-weight:800
}
.wallet-provider-icon img{width:100%;height:100%;object-fit:cover}
.wallet-provider-action{color:#77e6d1;font-weight:700}
.walletconnect-row{margin-bottom:12px}
.wallet-chooser-status{margin:16px 20px;padding:12px;border-radius:13px;background:rgba(255,255,255,.05)}
.wallet-chooser-status.pending{color:#ffd166}
.wallet-chooser-status.success{color:#70e2a6}
.wallet-chooser-status.error{color:#ff8195}
.wallet-security{margin:0;padding:0 20px 20px;color:var(--muted,#9db0cf);line-height:1.45}
.wallet-empty{padding:14px;border:1px dashed rgba(255,255,255,.15);border-radius:14px;color:var(--muted,#9db0cf)}
@media(max-width:560px){
  .wallet-chooser-backdrop{padding:0;align-items:end}
  .wallet-chooser-card{width:100%;max-height:88vh;border-radius:22px 22px 0 0}
  .wallet-provider-row{grid-template-columns:42px 1fr auto}
}

.wallet-mobile-help{margin:0 0 12px;color:var(--muted,#9db0cf);line-height:1.45}
.wallet-mobile-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:10px}
.wallet-mobile-app{display:flex;align-items:center;gap:10px;padding:12px;border:1px solid rgba(255,255,255,.1);border-radius:15px;background:rgba(255,255,255,.045);color:#fff;text-align:left}
.wallet-mobile-app:hover{background:rgba(91,192,190,.12);border-color:rgba(91,192,190,.35)}
.wallet-mobile-app b,.wallet-mobile-app small{display:block}
.wallet-mobile-app small{margin-top:3px;color:var(--muted,#9db0cf)}
.wallet-mobile-logo{flex:0 0 42px;width:42px;height:42px;display:grid;place-items:center;border-radius:12px;font-weight:900;font-size:18px}
.metamask-logo{background:#f6851b}.trust-logo{background:#3375bb}.phantom-logo{background:#ab9ff2;color:#211a42}
@media(max-width:620px){.wallet-mobile-grid{grid-template-columns:1fr}.wallet-mobile-app{min-height:66px}}

.wallet-browser-grid{
  display:grid;
  grid-template-columns:repeat(3,minmax(0,1fr));
  gap:10px
}
.wallet-browser-button{
  display:flex;
  align-items:center;
  gap:10px;
  min-width:0;
  padding:12px;
  border:1px solid rgba(255,255,255,.1);
  border-radius:15px;
  background:rgba(255,255,255,.045);
  color:#fff;
  text-align:left
}
.wallet-browser-button:hover{
  border-color:rgba(91,192,190,.42);
  background:rgba(91,192,190,.12)
}
.wallet-browser-button b,
.wallet-browser-button small{display:block}
.wallet-browser-button small{
  margin-top:3px;
  color:var(--muted,#9db0cf)
}
.wallet-browser-logo{
  flex:0 0 42px;
  width:42px;
  height:42px;
  display:grid;
  place-items:center;
  border-radius:12px;
  font-weight:900;
  font-size:18px
}
.metamask-browser .wallet-browser-logo{background:#f6851b}
.trust-browser .wallet-browser-logo{background:#3375bb}
.coinbase-browser .wallet-browser-logo{background:#1652f0}
@media(max-width:620px){
  .wallet-browser-grid{grid-template-columns:1fr}
  .wallet-browser-button{min-height:66px}
}

.wallet-browser-grid.four-wallets{
  grid-template-columns:repeat(2,minmax(0,1fr))
}
.binance-browser .wallet-browser-logo{
  background:#f3ba2f;
  color:#161616
}
.wallet-browser-note{
  margin-top:12px;
  padding:11px 12px;
  border:1px solid rgba(243,186,47,.28);
  border-radius:12px;
  background:rgba(243,186,47,.08);
  color:var(--muted,#9db0cf);
  line-height:1.4
}
@media(max-width:620px){
  .wallet-browser-grid.four-wallets{
    grid-template-columns:1fr
  }
}
