/* Wallet layout builds on the homepage's tokens and shared components. */
* { box-sizing: border-box; }
body.homepage { margin: 0; min-height: 100vh; display: flex; flex-direction: column; }
[hidden] { display: none !important; }
.wallet-main { flex: 1; padding-block: 60px 80px; }
.wallet-heading { max-width: 760px; margin-bottom: 36px; }
.wallet-heading h1 { font-size: clamp(2rem, 5vw, 3.8rem); line-height: 1.1; letter-spacing: -.055em; margin: 12px 0 20px; overflow-wrap: anywhere; }
.wallet-heading p, .wallet-help, .wallet-form small { color: var(--home-muted); line-height: 1.65; }
.wallet-panel { padding: 28px; margin: 24px 0; border: 1px solid var(--home-line); border-radius: 22px; background: var(--home-surface); }
.wallet-panel h2 { margin-top: 0; font-size: 1.25rem; }
.wallet-auth { max-width: 560px; }
.wallet-form { display: grid; gap: 18px; }
.wallet-form label { display: grid; gap: 8px; font-size: .9rem; font-weight: 600; }
.wallet-form input, .wallet-form select { width: 100%; min-width: 0; padding: 12px 14px; border: 1px solid var(--home-control-border); border-radius: 10px; background: var(--home-soft-surface); color: var(--home-ink); font: inherit; }
.wallet-form small { font-size: .76rem; font-weight: 400; }
.wallet-form .wallet-checkbox { display: flex; align-items: center; }
.wallet-checkbox input { width: 20px; height: 20px; }
.wallet-settings { grid-template-columns: 1fr 1fr auto; align-items: start; }
.wallet-settings button { align-self: center; }
.wallet-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; }
.homepage .wallet-secondary { background: var(--home-tint); color: var(--home-ink); border: 1px solid var(--home-line); }
.homepage .home-button { cursor: pointer; font-family: inherit; }
.wallet-link, .wallet-notice a { color: var(--home-link); text-decoration: underline !important; }
.wallet-grid { display: grid; grid-template-columns: repeat(3,minmax(0,1fr)); gap: 20px; }
.homepage .wallet-account { padding: 24px; min-width: 0; }
.wallet-account-heading { display: flex; align-items: flex-start; justify-content: space-between; gap: 16px; min-height: 44px; }
.wallet-account-heading .eyebrow { min-width: 0; margin: 0; padding-top: 8px; overflow-wrap: anywhere; }
.wallet-platform-icon { display: block; flex: 0 0 44px; box-sizing: border-box; width: 44px; height: 44px; padding: 9px; border-radius: 12px; background: #65a0634b; object-fit: contain; }
.wallet-account h2 { font-size: 1.15rem; margin: 8px 0 16px; overflow-wrap: anywhere; }
.wallet-account p { overflow-wrap: anywhere; }
.wallet-copy { display: flex; align-items: center; justify-content: space-between; gap: 12px; width: 100%; padding: 14px; border: 1px solid var(--home-control-border); border-radius: 12px; background: var(--home-soft-surface); color: var(--home-ink); cursor: pointer; text-align: left; transition: background 160ms ease; }
.wallet-copy span:first-child { min-width: 0; overflow-wrap: anywhere; }
.wallet-copy span:last-child { font-size: .75rem; font-weight: 700; flex-shrink: 0; }
.wallet-copy:hover { background: var(--home-tint); border-color: var(--home-link); }
.wallet-badge { display: inline-block; padding: 5px 10px; border-radius: 20px; background: var(--home-tint); color: var(--home-secondary); font-size: .73rem; }
.wallet-account .wallet-actions { margin-top: 18px; }
.wallet-account .wallet-actions button { border: 1px solid var(--home-line); background: var(--home-surface); color: var(--home-link); border-radius: 8px; padding: 10px 12px; min-height: 44px; cursor: pointer; }
.wallet-email { font-size: .8rem; overflow-wrap: anywhere; }
.wallet-section-heading { display: flex; justify-content: space-between; align-items: center; gap: 16px; margin-top: 42px; }
.wallet-notice, #walletMessage, #dialogMessage { padding: 16px; border-radius: 12px; background: var(--home-tint); border: 1px solid var(--home-control-border); overflow-wrap: anywhere; }
#recoveryMessage, #recoverySetupMessage { padding: 16px; border-radius: 12px; background: var(--home-tint); border: 1px solid var(--home-control-border); overflow-wrap: anywhere; line-height: 1.65; }
#walletMessage { position: sticky; top: 90px; z-index: 90; }
#publicLink, #shareLink { margin-block: 16px; overflow-wrap: anywhere; }
.wallet-dialog-heading { display: flex; justify-content: space-between; align-items: center; gap: 20px; }
.wallet-dialog-heading button { background: transparent; color: inherit; border: 0; cursor: pointer; font-size: 2rem; min-width: 44px; }
#accountDialog { width: min(600px,calc(100% - 32px)); max-height: 90dvh; padding: 28px; border: 1px solid var(--home-line); border-radius: 22px; color: var(--home-ink); background: var(--home-surface); }
#accountDialog::backdrop { background: rgba(10,25,18,.65); }
summary { cursor: pointer; font-weight: 700; padding: 8px 0; }
#totpSecret { overflow-wrap: anywhere; padding: 16px; background: var(--home-tint); }
#totpQr { display: block; width: min(100%, 300px); height: auto; background: white; image-rendering: pixelated; }
.homepage .navbar-login { display: inline-flex; align-items: center; justify-content: center; }
@media (max-width: 600px) { .homepage .nav-actions .nav-link { display: none !important; } }
button:disabled { opacity: .6; cursor: wait; }
@media (max-width: 900px) { .wallet-grid { grid-template-columns: repeat(2,minmax(0,1fr)); } .wallet-settings { grid-template-columns: 1fr; } }
@media (max-width: 600px) { .wallet-main { padding-block: 32px 48px; } .wallet-grid { grid-template-columns: 1fr; } .wallet-panel, .homepage .wallet-account { padding: 20px; } .homepage .home-container { width: calc(100% - 32px); } .wallet-toolbar .home-button { flex-grow: 1; justify-content: center; } .wallet-form .wallet-actions > button { width: 100%; } .homepage .nav-actions { gap: 12px; } .homepage .nav-actions .nav-link { display: inline-block; font-size: .72rem; } }