/* The account entry and wallet picker use the same dialog and signing flow. */
#wallet-dialog {
  width: min(440px, calc(100% - 32px));
  max-height: min(780px, 88dvh);
  padding: 20px;
  color: var(--ink);
  background: #111a26;
  border: 1px solid #3a4656;
  border-radius: 20px;
  box-shadow: 0 30px 100px #0008;
  overflow-x: hidden;
  overflow-y: auto;
  overscroll-behavior: contain;
  scrollbar-width: thin;
  scrollbar-color: #536078 transparent;
}
#wallet-dialog::backdrop {background: #030811b8; backdrop-filter: blur(7px);}
#wallet-dialog .dialog-head {gap: 8px; align-items: center; margin-block-end: 8px;}
#wallet-dialog #dialog-title {flex: 1; min-width: 0; margin: 0; font: 600 19px/1.3 var(--display); letter-spacing: -.025em;}
#wallet-dialog .dialog-head button {display: inline-grid; place-items: center; flex: none; width: 44px; height: 44px; padding: 0; border: 1px solid transparent; border-radius: 50%; background: transparent; color: #b9c5d3; font-size: 25px; line-height: 1;}
#wallet-dialog .dialog-head button:hover {background: #202b3a; color: var(--ink);}
#wallet-dialog .dialog-head button:focus-visible {outline: 2px solid var(--gold); outline-offset: 1px;}
#wallet-dialog #dialog-back {font-size: 22px;}
#wallet-dialog #dialog-message {margin: 0 2px 17px; color: #a8b8cb; font-size: 13px; line-height: 1.55;}
#wallet-dialog #dialog-message:empty {display: none;}
#wallet-dialog #dialog-actions {display: flex; flex-direction: column; align-items: stretch; gap: 10px;}
#wallet-dialog #dialog-actions > * {width: 100%; min-width: 0; border-radius: 11px;}
#wallet-dialog #dialog-actions > :is(.access-welcome,.account-overview,.wallet-picker,.access-wallet-list,.wallet-options) {padding: 0; border: 0; background: none; color: inherit;}
#wallet-dialog #dialog-actions > :is(button,a):not(.wallet-choice) {display: flex; align-items: center; justify-content: space-between; gap: 12px; min-height: 45px; padding: 10px 14px; text-align: start; font-weight: 550; border-color: #354355; color: #cad5e1;}
#wallet-dialog #dialog-actions > :is(button,a):not(.wallet-choice):hover {background: #1c2837; border-color: #6a6558;}
#wallet-dialog #dialog-actions .access-danger {color: #e4b4b4;}

#wallet-dialog .access-welcome {text-align: center; padding: 10px 2px 2px;}
.access-emblem {display: inline-grid; place-items: center; width: 91px; height: 91px; margin: 9px auto 22px; border-radius: 50%; border: 1px solid #716145; background: radial-gradient(circle at 40% 30%, #65523966, #1b252e 72%); box-shadow: 0 0 34px #e5c27a0a;}
.access-emblem img {display: block;}
#wallet-dialog .access-welcome h3 {margin: 0 12px; font: 580 26px/1.14 var(--display); letter-spacing: -.04em;}
#wallet-dialog .access-intro {max-width: 315px; margin: 12px auto 25px; color: #aab8c8; font-size: 14px; line-height: 1.6;}
#wallet-dialog .access-primary {display: flex; width: 100%; align-items: center; justify-content: center; gap: 12px; min-height: 54px; padding: 13px 16px; border: 1px solid #f2d69d; border-radius: 11px; background: #f2d69d; color: #24201a; font-weight: 650; font-size: 14px;}
#wallet-dialog .access-primary:hover {background: #ffe3ae;}
.access-primary svg {width: 22px; height: 22px; flex: none;}
.access-primary .access-chevron {margin-inline-start: auto;}
#wallet-dialog .access-explore {display: inline-block; min-height: 44px; margin-block-start: 11px; padding: 10px 16px; border: 0; background: none; color: #bdc9d6; font-size: 13px;}
.access-explore:hover {text-decoration: underline; text-underline-offset: 4px;}

#wallet-dialog #dialog-actions .wallet-choice {display: flex; align-items: center; justify-content: flex-start; gap: 12px; width: 100%; min-height: 65px; padding: 11px 13px; border: 1px solid #344254; border-radius: 12px; background: #162130; color: var(--ink); text-align: start;}
#wallet-dialog #dialog-actions .wallet-choice:hover {border-color: #9c8b66; background: #1e2a39;}
#wallet-dialog #dialog-actions .wallet-choice::after {margin-inline-start: auto; flex: none; border-color: #9eadbf; width: 6px; height: 6px;}
.wallet-choice-icon {position: relative; display: inline-grid; place-items: center; width: 37px; height: 37px; flex: none; border-radius: 11px; overflow: hidden; background: #2b3747; color: #e4d1ad; font-size: 12px; letter-spacing: .02em;}
.wallet-choice-icon img {position: absolute; width: 100%; height: 100%; object-fit: contain;}
.wallet-choice-copy {display: flex; flex-direction: column; flex: 1; min-width: 0; gap: 2px;}
.wallet-choice-copy strong {font-size: 14px; font-weight: 600; overflow-wrap: anywhere;}
.wallet-choice-copy small {color: #a2b4c8; font-size: 11px; line-height: 1.4;}
#wallet-dialog .wallet-search, #wallet-dialog input[type='search'] {display: block; width: 100%; min-height: 46px; margin: 0 0 12px; padding: 10px 14px; color: var(--ink); border: 1px solid #3b495b; border-radius: 10px; background: #0d1520; font: 400 14px/1.4 var(--body);}
#wallet-dialog input[type='search']::placeholder {color: #8d9daf;}
#wallet-dialog .wallet-list, #wallet-dialog .access-wallet-list {display: grid; gap: 8px;}
#wallet-dialog .wallet-empty {padding: 16px 5px; color: #a5b5c7; font-size: 13px; line-height: 1.5;}
#wallet-dialog .wallet-options {margin-block-start: 6px;}
#wallet-dialog .wallet-options summary {display: flex; align-items: center; justify-content: space-between; gap: 12px; min-height: 46px; padding: 10px 3px; color: #bdc8d5; font-size: 13px; cursor: pointer; list-style: none;}
#wallet-dialog .wallet-options summary::-webkit-details-marker {display: none;}
#wallet-dialog .wallet-options summary::after {content: '+'; color: var(--gold); font-size: 19px;}
#wallet-dialog .wallet-options[open] summary::after {content: '−';}
#wallet-dialog .wallet-options h3 {margin-block: 12px 8px; font-size: 12px; color: #a4b4c7;}
#wallet-dialog .wallet-options .wallet-guide {min-height: 55px; padding: 12px 3px; border-color: #2d3a4a;}
#wallet-dialog .wallet-guide strong {font-size: 13px; color: #d9e1e8;}
#wallet-dialog .wallet-guide small {font-size: 11px; color: #9baec3;}

.account-identity {display: flex; align-items: center; gap: 13px; margin-block: 13px 15px;}
.account-portrait {display: grid; place-items: center; width: 58px; height: 58px; flex: none; overflow: hidden; border: 1px solid #6c6049; border-radius: 50%; background: radial-gradient(circle at 30% 20%, #6753326e, #202b38); color: var(--gold);}
.account-portrait svg {width: 27px; height: 27px;}
.account-portrait img {display: block; width: 100%; height: 100%; object-fit: cover;}
.account-identity-copy {display: grid; gap: 4px; min-width: 0;}
.account-name {font: 600 20px/1.2 var(--display); overflow-wrap: anywhere;}
.account-provider {color: #a6b6c8; font-size: 12px;}
.account-network {display: inline-flex; align-items: center; gap: 7px; padding: 4px 8px; border: 1px solid #334837; border-radius: 5px; color: #afd5b9; background: #192c242e; font-size: 10px; letter-spacing: .02em;}
.account-network i {width: 5px; height: 5px; border-radius: 50%; background: #a4d4b3;}
.account-address {display: flex; align-items: center; gap: 10px; margin-block: 14px 19px; padding: 12px; border: 1px solid #2f3e50; border-radius: 10px; background: #0e1722;}
.account-address bdi {flex: 1; min-width: 0; overflow-wrap: anywhere; color: #c3ced9; font: 400 11px/1.6 var(--mono);}
.account-copy {display: inline-flex; flex-direction: column; align-items: center; justify-content: center; gap: 4px; min-width: 50px; min-height: 46px; flex: none; padding: 6px; border: 0; border-radius: 7px; background: #1e2b3b; color: var(--gold); font-size: 10px;}
.account-copy:hover {background: #29384c;}
.account-copy svg {width: 16px; height: 16px;}
.account-copy {max-width: 38%; overflow-wrap: anywhere;}
#wallet-dialog .account-copy-feedback {margin: -9px 0 14px; color: var(--gold); font-size: 12px; line-height: 1.4;}
.account-shortcuts {display: grid; gap: 7px; margin-block-end: 7px;}
.account-shortcut {display: flex; align-items: center; gap: 13px; width: 100%; min-height: 65px; padding: 12px; border: 1px solid #2e3c4d; border-radius: 10px; background: #152130; color: var(--ink); text-align: start;}
.account-shortcut:hover {border-color: #756e5a; background: #1d2a3c;}
.account-shortcut > svg {width: 22px; height: 22px; flex: none; color: #c6b48e;}
.account-shortcut > span:not(.access-chevron) {display: grid; gap: 3px; flex: 1; min-width: 0;}
.account-shortcut strong {font-size: 13px; font-weight: 600;}
.account-shortcut small {font-size: 11px; line-height: 1.4; color: #a3b4c7;}
.access-chevron {flex: none; font-size: 21px; color: inherit; font-weight: 400; line-height: 1;}
html[dir='rtl'] #wallet-dialog .wallet-choice::after {transform: rotate(-135deg);}
html[dir='rtl'] #dialog-back, html[dir='rtl'] .account-shortcut > .access-chevron {transform: scaleX(-1);}
html:is(:lang(ar),:lang(ur),:lang(hi),:lang(bn)) #wallet-dialog :is(h2,h3,.account-name) {letter-spacing: normal; line-height: 1.4;}

@media(max-width:720px) {
  #wallet-dialog {position: fixed; inset: auto 0 0; width: 100%; max-width: none; max-height: 86dvh; margin: 0; padding: 15px 20px max(20px, env(safe-area-inset-bottom)); border-width: 1px 0 0; border-radius: 23px 23px 0 0;}
  #wallet-dialog::before {content: ''; display: block; width: 32px; height: 4px; margin: 0 auto 8px; border-radius: 4px; background: #49596b;}
  #wallet-dialog .dialog-head {margin-block-end: 6px;}
  #wallet-dialog #dialog-title {font-size: 19px;}
  #wallet-dialog .access-welcome {padding-block: 0 3px;}
  .access-emblem {width: 75px; height: 75px; margin-block: 6px 18px;}
  .access-emblem img {width: 45px; height: 45px;}
  #wallet-dialog .access-welcome h3 {font-size: 25px;}
  #wallet-dialog .access-intro {margin-block: 10px 22px; font-size: 13px;}
  .account-identity {margin-block-start: 7px;}
}
@media(max-width:360px) {
  #wallet-dialog {padding-inline: 15px;}
  #wallet-dialog #dialog-title {font-size: 18px;}
  .account-address {padding: 9px; gap: 7px;}
  .account-copy {min-width: 45px;}
}
@media(prefers-reduced-motion:no-preference) {
  #wallet-dialog[open] {animation: access-arrive .18s ease-out;}
  @keyframes access-arrive {from {opacity: .2; transform: translateY(12px);} to {opacity: 1; transform: translateY(0);}}
}

/* A fixed search field and a separately scrolling directory work on small screens. */
#wallet-dialog[data-access-view='wallets'] {display: flex; flex-direction: column; overflow: hidden;}
#wallet-dialog:not([open]) {display:none;}
#wallet-dialog[data-access-view='wallets'] #dialog-actions {min-height:0; flex:1;}
.wallet-picker,.wallet-browser {display:flex; flex-direction:column; min-height:0;}
.wallet-browser[hidden],.wallet-detail[hidden] {display:none;}
.wallet-search-box {position:relative; flex:none;}
#wallet-dialog .wallet-search-box input {margin:0; padding-inline:42px 43px; min-height:48px; border-radius:13px;}
#wallet-dialog .wallet-search-box input:focus {outline:2px solid #e3ca94; outline-offset:2px;}
.wallet-search-icon {position:absolute; inset-inline-start:15px; top:10px; font:24px/1 sans-serif; color:#a7b6c8; pointer-events:none;}
#wallet-dialog .wallet-search-clear {position:absolute; inset-inline-end:4px; top:4px; width:40px; height:40px; padding:0; border:0; background:none; color:#bdc9d6; font:23px/1 sans-serif;}
.wallet-search-clear[hidden] {display:none;}
.wallet-search::-webkit-search-cancel-button {display:none;}
.wallet-result-count {margin:12px 2px 6px; color:#95a5b9; font-size:11px; flex:none;}
.wallet-results {overflow-y:auto; overscroll-behavior:contain; min-height:90px; max-height:390px; padding:2px 4px 4px 2px; scrollbar-width:thin; scrollbar-color:#46576d transparent;}
.wallet-result-group {display:grid; gap:6px;}
.wallet-result-group + .wallet-result-group {margin-block-start:16px;}
.wallet-result-group h3 {margin:7px 1px; font-size:12px; color:#c5d1de; font-weight:500;}
#wallet-dialog .wallet-picker .wallet-choice {min-height:62px; border-color:transparent; background:#172230;}
#wallet-dialog .wallet-picker .wallet-choice:focus-visible {outline:2px solid #e3ca94; outline-offset:-2px;}
.wallet-picker .wallet-choice-icon {color:var(--wallet-color,#e4d1ad); background:color-mix(in srgb,var(--wallet-color,#e4d1ad) 14%,#172230);}
.wallet-picker [data-wallet-status='connect'] small {color:#a6dcbd;}
.wallet-missing {border-top:1px solid #2a3749; margin-block-start:12px; flex:none; padding-block-start:7px;}
.wallet-missing summary {padding:7px 2px; font-size:12px; color:#c5d1de; cursor:pointer;}
.wallet-missing p,.wallet-detail p {color:#a7b7ca; font-size:13px; line-height:1.6;}
.wallet-empty strong {color:#dae4ef; font-weight:550;}
.wallet-empty p {margin-block:6px;}
.wallet-detail {overflow-y:auto; padding:4px 1px;}
.wallet-detail h3 {font:600 24px/1.3 var(--display); margin:17px 0 9px; overflow-wrap:anywhere;}
.wallet-detail-network {display:inline-flex; padding:4px 9px; font-size:10px; color:#b3c7d8; border:1px solid #3b4b5f; border-radius:20px;}
#wallet-dialog .wallet-detail-back {border:0; padding:8px 0; background:none; color:#d6c397; font-size:12px;}
#wallet-dialog .wallet-detail-link {display:flex; justify-content:center; min-height:46px; align-items:center; padding:10px 14px; margin-block:9px; border:1px solid #a99670; border-radius:10px; color:#e8d4ad; background:#282a29; font-size:13px;}
.wallet-detail-footnote {font-size:11px!important; margin-block:18px 0;}
#wallet-dialog .access-google {display:flex; align-items:center; justify-content:center; gap:12px; width:100%; min-height:52px; border:1px solid #b5c0cc; border-radius:11px; background:#e8edf3; color:#202632; font-size:14px; font-weight:600;}
#wallet-dialog .access-google:disabled {opacity:.55; cursor:not-allowed;}
.google-mark {font:bold 22px/1 Arial,sans-serif;}
.google-status {margin:8px 3px; color:#a7b7ca; font-size:11px; line-height:1.5;}
.google-status:empty {display:none;}
.access-divider {display:flex; align-items:center; gap:12px; margin:17px 0; color:#9fafc2; font-size:11px;}
.access-divider::before,.access-divider::after {content:''; height:1px; background:#344254; flex:1;}
#wallet-dialog #dialog-actions > .wallet-funds {padding:0; border:0; background:none; color:inherit;}
.wallet-funds {text-align:start; font-size:13px; line-height:1.5;}
.wallet-funds .funds-section {padding-block:12px; border-block-end:1px solid #344254;}
.wallet-funds h3 {margin:4px 0 10px; font:550 17px/1.3 var(--display);}
.wallet-funds p {color:#aebed0; margin-block:7px;}
.wallet-funds .funds-address {display:block; padding:12px; overflow-wrap:anywhere; border:1px solid #344254; border-radius:10px; background:#0c1521; font:12px/1.6 ui-monospace,monospace;}
.wallet-funds .funds-actions {display:flex; flex-wrap:wrap; gap:8px; margin-block:10px;}
#wallet-dialog .wallet-funds :is(button,a) {display:inline-flex; align-items:center; justify-content:center; min-height:44px; padding:9px 12px; border:1px solid #465567; border-radius:9px; background:#1b2938; color:#e5d2ab; font:500 12px/1.4 var(--body); text-align:center;}
#wallet-dialog .wallet-funds button:disabled {opacity:.5; cursor:not-allowed;}
.wallet-funds .funds-form {display:grid; gap:10px;}
.wallet-funds label {display:grid; gap:5px; font-size:12px; color:#c5d1de;}
.wallet-funds input {width:100%; min-height:44px; padding:10px 12px; border:1px solid #465567; border-radius:9px; background:#0c1521; color:var(--ink); font:13px/1.4 var(--body); box-sizing:border-box;}
.wallet-funds .funds-preview {padding:12px; margin-block:12px; border:1px solid #b29a68; border-radius:11px; background:#242923; overflow-wrap:anywhere;}
.wallet-funds .funds-preview dl {margin:0;}
.wallet-funds .funds-preview dt {font-size:11px; color:#aebed0; margin-block-start:8px;}
.wallet-funds .funds-preview dd {margin:0; font-size:13px;}
.wallet-funds .funds-status {font-size:12px; overflow-wrap:anywhere;}
.wallet-funds .funds-receipt {overflow-wrap:anywhere; font-size:12px;}
@media(max-width:720px){.wallet-results {max-height:40dvh;} #wallet-dialog[data-access-view='wallets'] {max-height:86dvh;} .wallet-missing p {font-size:12px;}}