/* Match the hero's Clash Grotesk, cream ink, charcoal and solid orange. */
.wallet-modal {
  position:fixed;inset:0;z-index:1000;display:grid;place-items:center;
  padding:24px;background:rgba(16,16,16,.82);backdrop-filter:blur(6px);
  opacity:0;visibility:hidden;pointer-events:none;
  transition:opacity .2s ease,visibility .2s ease;
  color:var(--ink);font-family:inherit;
}
.wallet-modal.is-open {opacity:1;visibility:visible;pointer-events:auto;}
.wallet-modal-dialog {
  width:min(620px,100%);max-height:calc(100dvh - 48px);
  display:flex;flex-direction:column;position:relative;
  border:1px solid #4b4947;border-top:3px solid var(--orange);
  border-radius:0;background:var(--dark);overflow:hidden;
  box-shadow:0 24px 80px rgba(0,0,0,.35);
}
.wallet-modal-header {
  display:flex;align-items:flex-start;justify-content:space-between;gap:24px;
  padding:32px 32px 26px;flex-shrink:0;
}
.wallet-modal-title {
  font-size:clamp(28px,3.2vw,40px);font-weight:700;letter-spacing:-.025em;line-height:1;
  max-width:10ch;
}
.wallet-modal-title::after {content:'.';color:var(--orange);}
.wallet-modal-subtitle {margin-top:14px;font-size:16px;line-height:1.4;color:rgba(248,248,244,.7);max-width:35ch;}
.wallet-modal-close {
  appearance:none;width:40px;height:40px;flex-shrink:0;display:grid;place-items:center;
  padding:0;border:1px solid #4b4947;border-radius:0;background:transparent;
  color:var(--ink);font-family:inherit;font-size:28px;line-height:1;cursor:pointer;
  transition:color .2s,background .2s,border-color .2s;
}
.wallet-modal-close:hover {background:var(--orange);border-color:var(--orange);color:var(--dark);}
.wallet-modal-body {padding:0 32px 32px;overflow-y:auto;overscroll-behavior:contain;}
.wallet-network-grid {display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:10px;}
.wallet-network-btn {
  appearance:none;display:flex;align-items:center;gap:14px;min-width:0;min-height:104px;
  padding:18px 16px;border:1px solid #4b4947;border-radius:0;background:transparent;
  color:var(--ink);font-family:inherit;text-align:left;cursor:pointer;
  transition:border-color .2s,background .2s;
}
.wallet-network-btn:hover {border-color:var(--orange);background:rgba(254,114,51,.07);}
.wallet-network-btn:last-child {grid-column:1/-1;min-height:88px;border-color:var(--orange);}
.wallet-network-icon {
  display:grid;place-items:center;width:36px;height:36px;flex-shrink:0;
  color:var(--orange);border-radius:0;
}
.wallet-network-icon svg {width:28px;height:28px;display:block;}
.wallet-network-icon svg [fill]:not([fill="none"]) {fill:currentColor;}
.wallet-network-icon svg [stroke] {stroke:currentColor;}
.wallet-network-copy {min-width:0;}
.wallet-network-copy strong {display:block;margin-bottom:5px;font-size:18px;line-height:1.1;font-weight:600;letter-spacing:-.01em;}
.wallet-network-copy span {display:block;font-size:13px;line-height:1.4;color:rgba(248,248,244,.6);}
.wallet-modal button:focus-visible {outline:2px solid var(--orange);outline-offset:-4px;}
.select:focus-visible {outline:2px solid var(--soft-orange);outline-offset:4px;}
@media(max-width:600px) {
  .wallet-modal {padding:20px;}
  .wallet-modal-dialog {max-height:calc(100dvh - 40px);}
  .wallet-modal-header {padding:24px 22px 22px;gap:16px;}
  .wallet-modal-title {font-size:32px;}
  .wallet-modal-subtitle {font-size:15px;margin-top:12px;}
  .wallet-modal-close {width:34px;height:34px;font-size:25px;}
  .wallet-modal-body {padding:0 22px 22px;}
  .wallet-network-grid {grid-template-columns:1fr;gap:8px;}
  .wallet-network-btn,.wallet-network-btn:last-child {min-height:72px;padding:12px 14px;}
  .wallet-network-copy strong {font-size:17px;margin-bottom:3px;}
}
@media(prefers-reduced-motion:reduce) {
  .wallet-modal,.wallet-modal button {transition:none;}
}