/* Hosted Bionic identity: the owner-selected Totality direction. */
:root { color-scheme: dark; background: #141414; color: #f3eee9; font-family: "Bionic Tomorrow", "Avenir Next", Avenir, "Segoe UI", system-ui, sans-serif; }
body { background: #141414; color: #f3eee9; }
.shell { padding: 48px 20px; }
.panel { width: min(100%, 460px); padding: 40px; border: 1px solid #2c2926; border-radius: 4px; background: radial-gradient(ellipse 110% 70% at 20% 100%, #f5793a05, transparent 70%), #141414; box-shadow: none; }
.brand-row { gap: 8px; margin-bottom: 24px; color: #bfb8b0; }
.brand-row .bionic-button__mark { height: 26px; width: 26px; overflow: visible; flex: none; }
.eyebrow { color: #bfb8b0; font-size: 11px; letter-spacing: .08em; }
h1 { color: #f3eee9; font: 300 clamp(24px, 5vw, 30px)/1.15 "Bionic Tomorrow", system-ui, sans-serif; letter-spacing: -.04em; }
.copy { margin: 16px 0 24px; color: #bfb8b0; font-size: 13px; line-height: 1.7; }
button { background: #1b1917; color: #f3eee9; border: 1px solid #ffc79738; border-radius: 3px; font-weight: 500; }
.mode-switch, .recovery-method-switch { border-radius: 3px; padding: 3px; gap: 3px; background: #1b1917; border-color: #ffc79716; }
.mode-switch button, .recovery-method-switch button { min-height: 40px; border-radius: 2px; font-size: 12px; }
.mode-switch button[aria-selected="true"], .recovery-method-switch button[aria-selected="true"] { background: #ffc79716; color: #ffc797; box-shadow: none; border: 0; }
input { border-radius: 3px; background: transparent; border-color: #f3eee940; color: #f3eee9; font-size: 14px; }
input:focus { border-color: #ffc797; outline-color: #ffc79730; }
label, .suggestion strong, .capability p, .recovery-panel h2, .wallet-link-head h2 { color: #f3eee9; }
.form { gap: 14px; }
.actions { margin-top: 8px; gap: 12px; }
.auth-divider { display: flex; align-items: center; gap: 12px; color: #bfb8b0; font-size: 11px; letter-spacing: .18em; text-transform: uppercase; margin: 24px 0 12px; }
.auth-divider::before, .auth-divider::after { content: ""; flex: 1; height: 1px; background: #f3eee92b; }
.recovery-entry { margin: 0; }
.text-action { color: #d1b69f; text-decoration-color: #ffc79750; background: transparent; border: 0; box-shadow: none; font-size: 12px; }
.sharing-note { margin: 20px 0 0; text-align: center; color: #bfb8b0; font-size: 11px; line-height: 1.6; }
.security-footer { text-align: center; margin: 20px 0 0; font-size: 10px; line-height: 1.7; }
.security-footer a { color: #bfb8b0; text-underline-offset: 3px; }
.suggestion, .capability, .recovery-panel, .wallet-recovery-result, .backup-codes-panel, .wallet-link-result, .choice-card, .status { border-color: #ffc79729; border-radius: 3px; background: #ffffff03; }
.choice-card:has(input:checked) { background: #ffc7970c; border-color: #ffc79770; }
.choice-card input, .destructive-confirmation input { accent-color: #f5a66d; }
.confirmation-number, .wallet-link-state, .wallet-link-url { color: #ffc797; }
:focus-visible { outline: 3px solid #ffc797; outline-offset: 4px; }
.embedded .shell { padding: 0; }
.embedded .panel { width: 100%; border: 0; border-radius: 0; padding: 28px 24px; }
.embedded h1 { font-size: clamp(24px, 6vw, 30px); }
.embedded .copy { font-size: 13px; }
@media(max-width:480px) { .shell { padding: 0; } .panel { padding: 32px 24px; border: 0; min-height: 100dvh; } .mode-switch button { min-height: 40px; } }
@media(prefers-reduced-motion:reduce) { *, *::before, *::after { transition: none !important; } }

.panel:has(#recovery-entry[hidden]) .auth-divider { display: none; }