:root{
  --bg:#0b1020;
  --panel:#121734;
  --muted:#9aa4d6;
  --ac:#2f7bff;
  --txt:#eaf0ff;
  --ring:#3951ff;
}

*{box-sizing:border-box}
html,body{height:100%}
body{
  margin:0; font-family: Inter,system-ui,Segoe UI,Roboto,Helvetica,Arial,sans-serif;
  background:linear-gradient(180deg,#0c1030,#0b0f20); color:var(--txt);
}

/* Layout */
.site-header{padding:16px 24px;}
.site-main{min-height:60vh;display:grid;place-items:center;padding:24px}
.hero{text-align:center;max-width:560px;margin:auto}
.hero h1{margin:0 0 10px}
.muted{color:var(--muted)}
.muted.sm{font-size:13px}

/* Bouton */
.wallet-btn{
  appearance:none; border:0; border-radius:12px; padding:.8rem 1rem;
  font-weight:700; font-size:15px; cursor:pointer;
  background:var(--ac); color:#fff; box-shadow:0 6px 16px rgba(47,123,255,.35);
  display:inline-flex; align-items:center; gap:.55rem;
  transition:transform .1s ease, box-shadow .2s ease;
  touch-action: manipulation;
}
.wallet-btn:hover{transform:translateY(-1px); box-shadow:0 10px 22px rgba(47,123,255,.45)}
.wallet-btn:active{transform:translateY(0)}
.wallet-btn .icon{width:20px;height:20px;display:inline-block}

/* Overlay / modal */
#wallet-overlay{
  position:fixed; inset:0; display:none;
  align-items:center; justify-content:center;
  background:rgba(5,8,20,.6); backdrop-filter: blur(6px);
  z-index: 9999; touch-action:none; overscroll-behavior:contain;
}
#wallet-modal{
  width:min(92vw,520px); background:var(--panel); border:1px solid #1e2450;
  border-radius:16px; box-shadow: 0 20px 80px rgba(0,0,0,.45);
  padding:16px 16px 12px;
}
#wallet-modal h3{margin:6px 8px 12px;font-size:18px}
.wallet-hint{color:var(--muted);font-size:13px}
.wallet-close{
  margin-left:auto; background:#1a2050; color:#c9d3ff; border:1px solid #27306f;
  padding:.45rem .7rem; border-radius:10px; cursor:pointer;
}
.wallet-close:hover{background:#202a65}

/* Liste wallets */
.wallet-list{
  display:grid; grid-template-columns:1fr; gap:8px; margin:8px 0 12px;
}
.wallet-item{
  display:flex; align-items:center; gap:10px; padding:10px 12px;
  background:#0f1431; border:1px solid #1d2452; border-radius:12px;
  cursor:pointer; user-select:none;
}
.wallet-item:hover{border-color:#2a3bb0; box-shadow: inset 0 0 0 1px #2a3bb0}
.wallet-item img,.wallet-fallback-icon{
  width:24px;height:24px;display:inline-block; margin-right:4px;vertical-align:middle;
}
.wallet-item strong{font-weight:700}

/* Pied de modal */
.wallet-foot{
  display:flex; align-items:center; gap:10px; padding:6px 8px 2px;
  border-top:1px dashed #252c66; margin-top:8px;
}