#robinhood-wallet-control {
  position: fixed;
  z-index: 100;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  display: grid;
  justify-items: center;
  gap: 10px;
  width: min(620px, calc(100vw - 32px));
  font-family: Inter, system-ui, "Segoe UI", sans-serif;
}

#robinhood-wallet-control[hidden] { display: none !important; }
#robinhood-wallet-control.is-ready { animation: wallet-control-in .28s ease-out both; }

@keyframes wallet-control-in {
  from { opacity: 0; transform: translate(-50%, calc(-50% + 12px)) scale(.97); }
  to { opacity: 1; transform: translate(-50%, -50%) scale(1); }
}

#robinhood-wallet-button {
  position: relative;
  width: min(444px, 100%);
  aspect-ratio: 444 / 120;
  padding: 0;
  border: 0;
  color: white;
  background: transparent;
  cursor: pointer;
  filter: drop-shadow(0 14px 22px rgba(0,0,0,.6));
}

#robinhood-wallet-button[hidden] { display: none !important; }
#robinhood-wallet-button img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: contain; }
#robinhood-wallet-button span {
  position: relative;
  z-index: 1;
  display: grid;
  place-items: center;
  height: 100%;
  padding-right: 50px;
  color: #fff;
  font-size: clamp(19px, 4vw, 28px);
  font-weight: 900;
  letter-spacing: .02em;
  text-shadow: 0 2px 4px #000;
}
#robinhood-wallet-button:hover { transform: scale(1.025); filter: drop-shadow(0 0 16px rgba(255,174,0,.48)); }
#robinhood-wallet-button:focus-visible { outline: 3px solid #fff; outline-offset: 4px; border-radius: 12px; }
#robinhood-wallet-button:disabled { cursor: wait; opacity: .72; }
#robinhood-wallet-button.is-leaving { animation: connect-button-out .22s cubic-bezier(.4,0,1,1) both; pointer-events:none; }
#robinhood-wallet-button.is-returning { animation: connect-button-return .3s cubic-bezier(.16,1,.3,1) both; }

@keyframes connect-button-out {
  to { opacity:0; transform:scale(.82); filter:blur(7px) drop-shadow(0 0 24px rgba(187,255,45,.65)); }
}
@keyframes connect-button-return {
  from { opacity:0; transform:scale(.86); filter:blur(5px); }
  to { opacity:1; transform:scale(1); filter:drop-shadow(0 14px 22px rgba(0,0,0,.6)); }
}

#chain-picker {
  position:relative;
  width:min(580px,100%);
  padding:28px 26px 18px;
  overflow:hidden;
  border:1px solid rgba(181,255,48,.65);
  clip-path:polygon(0 18px,18px 0,calc(100% - 58px) 0,calc(100% - 46px) 10px,100% 10px,100% calc(100% - 18px),calc(100% - 18px) 100%,52px 100%,40px calc(100% - 10px),0 calc(100% - 10px));
  color:#f5ffe9;
  background:
    linear-gradient(rgba(178,255,44,.035) 1px,transparent 1px),
    linear-gradient(90deg,rgba(178,255,44,.035) 1px,transparent 1px),
    radial-gradient(circle at 18% 0,rgba(180,255,43,.14),transparent 42%),
    linear-gradient(145deg,rgba(12,22,20,.98),rgba(4,9,12,.98));
  background-size:22px 22px,22px 22px,auto,auto;
  box-shadow:0 0 0 1px rgba(92,151,83,.18) inset,0 24px 70px rgba(0,0,0,.7),0 0 30px rgba(157,255,44,.12);
}
#chain-picker[hidden] { display:none!important; }
#chain-picker.is-entering { animation:chain-panel-in .36s cubic-bezier(.16,1,.3,1) both; }
#chain-picker.is-leaving { animation:chain-panel-out .3s cubic-bezier(.4,0,1,1) both; pointer-events:none; }
@keyframes chain-panel-in {
  from { opacity:0; transform:perspective(700px) rotateX(-9deg) scale(.88); filter:blur(7px); }
  to { opacity:1; transform:perspective(700px) rotateX(0) scale(1); filter:blur(0); }
}
@keyframes chain-panel-out {
  to { opacity:0; transform:scale(1.06); filter:blur(8px); }
}
.chain-picker-scanline { position:absolute; z-index:0; inset:-80% 0 auto; height:55%; pointer-events:none; background:linear-gradient(transparent,rgba(192,255,62,.09),transparent); animation:chain-scan 3.4s linear infinite; }
@keyframes chain-scan { to { transform:translateY(390%); } }
.chain-picker-corner { position:absolute; z-index:1; width:32px; height:15px; pointer-events:none; border-color:#b9ff3b; }
.chain-picker-corner-tl { top:8px; left:8px; border-top:2px solid; border-left:2px solid; }
.chain-picker-corner-br { right:8px; bottom:8px; border-right:2px solid; border-bottom:2px solid; }
#chain-picker-back { position:absolute; z-index:2; top:26px; right:25px; width:34px; height:30px; border:1px solid rgba(185,255,59,.35); color:#b9ff3b; background:rgba(185,255,59,.06); font-size:18px; cursor:pointer; }
#chain-picker-back:hover,#chain-picker-back:focus-visible { outline:none; border-color:#b9ff3b; background:rgba(185,255,59,.14); box-shadow:0 0 13px rgba(185,255,59,.2); }
.chain-picker-heading { position:relative; z-index:1; margin:0 45px 22px 4px; text-align:left; }
.chain-picker-kicker { color:#9cb37b; font-family:Consolas,monospace; font-size:10px; font-weight:700; letter-spacing:.2em; text-transform:uppercase; }
.chain-picker-kicker i,.chain-choice-copy small i { display:inline-block; width:6px; height:6px; margin-right:7px; border-radius:50%; background:#b9ff3b; box-shadow:0 0 8px #b9ff3b; }
.chain-picker-heading h2 { margin:7px 0 2px; font-size:28px; line-height:1; letter-spacing:.01em; text-transform:uppercase; }
.chain-picker-heading p { margin:7px 0 0; color:#82908b; font-size:12px; }
.chain-choice { position:relative; z-index:1; display:grid; grid-template-columns:54px minmax(0,1fr) auto 20px; align-items:center; gap:14px; width:100%; min-height:78px; padding:11px 15px; border:1px solid rgba(185,255,59,.28); color:#f6ffe9; background:linear-gradient(90deg,rgba(183,255,49,.09),rgba(21,36,31,.78)); text-align:left; cursor:pointer; transition:border-color .18s,transform .18s,background .18s,box-shadow .18s; }
.chain-choice::before { content:""; position:absolute; inset:4px; border-left:2px solid rgba(185,255,59,.38); pointer-events:none; }
.chain-choice:hover,.chain-choice:focus-visible { outline:none; transform:translateX(3px); border-color:#b9ff3b; background:linear-gradient(90deg,rgba(183,255,49,.18),rgba(21,36,31,.9)); box-shadow:0 0 20px rgba(185,255,59,.13),inset 0 0 22px rgba(185,255,59,.06); }
.chain-choice-logo { display:grid; place-items:center; width:52px; height:52px; color:#b9ff3b; border:1px solid rgba(185,255,59,.42); background:rgba(185,255,59,.08); box-shadow:inset 0 0 16px rgba(185,255,59,.08); }
.chain-choice-logo svg { width:42px; height:42px; filter:drop-shadow(0 0 6px rgba(185,255,59,.45)); }
.chain-choice-copy { min-width:0; }
.chain-choice-copy strong { display:block; overflow:hidden; font-size:17px; letter-spacing:.015em; text-overflow:ellipsis; white-space:nowrap; }
.chain-choice-copy small { display:block; margin-top:6px; color:#8fa099; font-family:Consolas,monospace; font-size:10px; letter-spacing:.07em; }
.chain-choice-copy small i { width:5px; height:5px; margin-right:5px; }
.chain-choice-status { padding:4px 7px; color:#b9ff3b; border:1px solid rgba(185,255,59,.24); font-family:Consolas,monospace; font-size:9px; letter-spacing:.12em; }
.chain-choice-arrow { color:#b9ff3b; font-size:28px; }
.chain-picker-footer { position:relative; z-index:1; display:flex; justify-content:space-between; margin-top:14px; color:#596d64; font-family:Consolas,monospace; font-size:9px; letter-spacing:.12em; }

#robinhood-wallet-connected {
  display: grid;
  justify-items: center;
  gap: 12px;
  width: min(620px, calc(100vw - 28px));
}
#robinhood-wallet-connected[hidden] { display: none !important; }
.connected-wallet-display {
  display: flex;
  align-items: center;
  gap: 12px;
  min-width: 260px;
  padding: 12px 18px;
  border: 1px solid rgba(255,190,35,.7);
  border-radius: 14px;
  color: #fff;
  background: linear-gradient(180deg, rgba(35,35,38,.96), rgba(14,14,16,.96));
  box-shadow: 0 0 18px rgba(255,166,0,.22);
}
.connected-dot { width: 11px; height: 11px; border-radius: 50%; background: #a9f23d; box-shadow: 0 0 10px #a9f23d; }
.connected-copy { display: grid; gap: 2px; text-align: left; }
.connected-copy small { color: #b9b9be; font-size: 11px; text-transform: uppercase; letter-spacing: .08em; }
.connected-copy strong { font-size: 15px; }
.wallet-session-actions { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; width: 100%; }
.wallet-art-button {
  position: relative;
  aspect-ratio: 300 / 121;
  padding: 0;
  border: 0;
  color: #fff;
  background: transparent;
  cursor: pointer;
  filter: drop-shadow(0 12px 18px rgba(0,0,0,.55));
}
.wallet-art-button img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: contain; }
.wallet-art-button span {
  position: relative;
  z-index: 1;
  display: grid;
  place-items: center;
  height: 100%;
  color: #fff;
  font-size: clamp(16px, 2.4vw, 23px);
  font-weight: 900;
  text-shadow: 0 2px 4px #000;
}
#wallet-logout-button span { padding-left: 45px; }
#wallet-login-button span { padding-right: 45px; }
.wallet-art-button:hover { transform: scale(1.025); }
.wallet-art-button:focus-visible { outline: 3px solid #fff; outline-offset: 3px; border-radius: 12px; }
#robinhood-wallet-status { color: #fff; font-size: 12px; text-align: center; text-shadow: 0 2px 4px #000; }
#robinhood-wallet-status:empty { display: none; }
#robinhood-wallet-status[data-kind="error"] { color: #ffaaaa; }

#wallet-picker-backdrop {
  position: fixed;
  z-index: 10001;
  inset: 0;
  display: grid;
  place-items: center;
  padding: 24px;
  background: rgba(6,8,13,.66);
  backdrop-filter: blur(16px) saturate(.82);
  font-family: Inter, system-ui, "Segoe UI", sans-serif;
}
#wallet-picker-backdrop[hidden] { display: none !important; }
#wallet-picker {
  position: relative;
  display: grid;
  grid-template-columns: minmax(300px,.9fr) minmax(380px,1.35fr);
  width: min(880px, calc(100vw - 48px));
  max-height: min(650px, calc(100vh - 48px));
  overflow: hidden;
  color: #f8f8fb;
  border: 1px solid rgba(255,255,255,.16);
  border-radius: 28px;
  background: linear-gradient(145deg,rgba(39,41,48,.97),rgba(24,25,30,.98));
  box-shadow: 0 34px 100px rgba(0,0,0,.62);
}
#wallet-picker-close { position:absolute; z-index:2; top:18px; right:18px; width:38px; height:38px; border:1px solid rgba(255,255,255,.15); border-radius:50%; color:#fff; background:rgba(255,255,255,.1); font-size:28px; cursor:pointer; }
.wallet-picker-list-panel,.wallet-picker-info-panel { min-width:0; overflow:auto; padding:34px 32px; }
.wallet-picker-list-panel { border-right:1px solid rgba(255,255,255,.14); }
#wallet-picker h2 { margin:0 0 26px; color:#fff; font-size:23px; }
.wallet-picker-group { margin-top:20px; }
.wallet-picker-group-title { margin:0 0 8px 7px; color:#a879ff; font-size:13px; font-weight:800; text-transform:uppercase; }
.wallet-choice { display:grid; grid-template-columns:42px minmax(0,1fr) 18px; align-items:center; width:100%; min-height:54px; padding:7px 8px; border:0; border-radius:13px; color:#fff; background:transparent; text-align:left; cursor:pointer; }
.wallet-choice:hover,.wallet-choice:focus-visible { outline:none; background:rgba(255,255,255,.08); }
.wallet-choice[hidden] { display:none !important; }
.wallet-choice-icon { display:grid; place-items:center; width:34px; height:34px; border-radius:10px; color:#fff; font-weight:900; overflow:hidden; }
.wallet-choice-icon img { display:block; width:100%; height:100%; object-fit:cover; }
.wallet-icon-generic { background:linear-gradient(145deg,#747985,#343740); }
.wallet-choice-copy strong,.wallet-choice-copy small { display:block; }
.wallet-choice-copy strong { overflow:hidden; font-size:15px; text-overflow:ellipsis; white-space:nowrap; }
.wallet-choice-copy small { margin-top:2px; color:#a879ff; font-size:11px; font-weight:750; }
.wallet-choice-arrow { color:#8e919a; font-size:25px; text-align:center; }
#wallet-picker-message { min-height:18px; margin-top:16px; color:#b7bac3; font-size:12px; }
#wallet-picker-message[data-kind="error"] { color:#ff9c9c; }
.wallet-picker-info-panel { display:flex; flex-direction:column; justify-content:center; padding:58px 54px 42px; }
.wallet-picker-info-panel>h2 { text-align:center; }
.wallet-info-item { display:grid; grid-template-columns:58px minmax(0,1fr); align-items:center; gap:20px; margin:18px 0; }
.wallet-info-item h3 { margin:0 0 5px; font-size:16px; }
.wallet-info-item p { margin:0; color:#d2d3d8; font-size:13px; line-height:1.45; }
.wallet-info-art { display:grid; place-items:center; width:54px; height:54px; border:2px solid rgba(255,255,255,.75); border-radius:14px; font-size:24px; }
.wallet-info-art-assets { background:linear-gradient(145deg,#7764ff,#ffd45d); }
.wallet-info-art-login { background:linear-gradient(145deg,#76f6d0,#a46cff 65%,#ff8bb0); }
.wallet-info-actions { display:flex; flex-direction:column; align-items:center; gap:10px; margin-top:30px; }
.wallet-info-actions a { text-decoration:none; }
.wallet-info-primary { padding:11px 18px; border-radius:12px; color:#fff; background:linear-gradient(135deg,#8b5cf6,#b55cff); font-size:14px; font-weight:850; }
.wallet-info-secondary { color:#b987ff; font-size:13px; font-weight:800; }

@media(max-width:760px) {
  #robinhood-wallet-control { width:min(520px,calc(100vw - 24px)); }
  #robinhood-wallet-connected { width:min(520px,calc(100vw - 24px)); }
  #wallet-picker-backdrop { padding:12px; }
  #wallet-picker { grid-template-columns:1fr; width:min(460px,calc(100vw - 24px)); max-height:calc(100vh - 24px); border-radius:22px; }
  .wallet-picker-list-panel { border-right:0; }
  .wallet-picker-info-panel { border-top:1px solid rgba(255,255,255,.14); padding:34px 28px; }
}
@media(max-width:520px) {
  #chain-picker { padding:24px 17px 16px; }
  .chain-choice { grid-template-columns:48px minmax(0,1fr) 16px; gap:10px; padding:10px; }
  .chain-choice-logo { width:46px; height:46px; }
  .chain-choice-status { display:none; }
  .chain-picker-heading h2 { font-size:24px; }
}
@media(prefers-reduced-motion:reduce) {
  #robinhood-wallet-button.is-leaving,#robinhood-wallet-button.is-returning,#chain-picker.is-entering,#chain-picker.is-leaving { animation-duration:.01ms; }
  .chain-picker-scanline { animation:none; }
}