.phone-entry-row{display:flex;flex-wrap:wrap;gap:10px;margin-top:14px}.phone-entry-row .phone-entry{flex:1;min-width:145px}.phone-panel{width:min(460px,calc(100vw - 32px));max-height:calc(100dvh - 40px);overflow:auto;padding:26px;border:1px solid #46515b;border-radius:16px;background:#1c2227;color:#edf0f3}.phone-panel::backdrop{background:#080c11bd;backdrop-filter:blur(4px)}.phone-panel header{display:flex;align-items:center;justify-content:space-between;gap:16px}.phone-panel h2{font-size:22px;margin:0}.phone-panel .icon-close{background:transparent;border:0;color:#aeb9c2;width:32px;height:32px;font-size:24px;cursor:pointer}.phone-intro{font-size:13px;line-height:1.7;color:#a6b1bb;margin:14px 0 20px}.phone-panel form{display:grid;gap:14px}.phone-field{display:grid;gap:8px;font-size:13px}.phone-verification{display:grid;gap:14px}.phone-verification[hidden]{display:none}.phone-panel input:not([type=checkbox]){box-sizing:border-box;min-width:0;width:100%;height:44px;background:#14191e;border:1px solid #46515b;border-radius:8px;color:#edf0f3;padding:10px 12px;font:inherit}.phone-panel input:focus-visible{outline:2px solid #efb47f;outline-offset:2px}.phone-number{display:flex;align-items:center;gap:10px}.phone-number>span{color:#a6b1bb;font-size:13px}.phone-code-row{display:flex;gap:10px}.phone-panel .phone-code-row button{flex-shrink:0;min-height:44px;padding:8px 14px;background:#293139;border:1px solid #46515b;border-radius:8px;color:#edf0f3;cursor:pointer}.phone-panel .phone-submit{height:44px;background:var(--accent);color:#21170d;border:0;border-radius:8px;font:inherit;font-weight:600;cursor:pointer}.phone-panel button:disabled{opacity:.5;cursor:not-allowed}.phone-notice{font-size:13px;line-height:1.7;color:#efb47f;margin:0;min-height:22px;overflow-wrap:anywhere}.phone-check{display:flex;align-items:flex-start;gap:8px;font-size:12px;color:#a6b1bb;line-height:1.6}.phone-check input{margin-top:3px;accent-color:var(--accent)}.phone-links{display:flex;flex-wrap:wrap;justify-content:space-between;gap:12px}.phone-panel .phone-link{background:transparent;border:0;color:#b8c5cf;font:inherit;font-size:12px;padding:6px 0;cursor:pointer}.phone-account{padding:20px 0;border-top:1px solid #ffffff16;margin-top:20px}.phone-account p{font-size:13px;color:#a6b1bb}@media(max-width:480px){.phone-panel{padding:20px}.phone-panel h2{font-size:20px}}

.phone-panel{text-align:left;box-sizing:border-box}.phone-panel header{position:static;background:none;padding:0;margin:0;min-height:0;border:0}.phone-panel button{font-family:inherit}.phone-panel .phone-links button{width:auto}.phone-panel .phone-check input{width:16px;height:16px;flex:0 0 16px}

/* Phone authentication stays inside the existing account card, never in a modal. */
.auth-methods{display:flex;gap:8px;padding:5px;background:#11171b;border:1px solid #364047;border-radius:10px;margin:0 0 24px}
.auth-card .auth-methods button,.security-recovery .auth-methods button{flex:1;width:auto;min-height:40px;margin:0;padding:8px 12px;border:1px solid transparent;border-radius:7px;background:transparent;color:#aebbc5;font-size:14px}
.auth-card .auth-methods button[aria-pressed=true],.security-recovery .auth-methods button[aria-pressed=true]{color:#ffbd89;background:#ed9a601a;border-color:#ed9a6055}
.phone-mode-active>#login-form,.phone-mode-active>#register-form,.phone-mode-active>#security-recovery-form,.phone-mode-active>#security-title,.phone-mode-active>#security-intro,.phone-mode-active>#security-result{display:none!important}
.auth-card>.phone-panel,.security-recovery>.phone-panel,.phone-account>.phone-panel{position:static;display:block;width:100%;max-height:none;overflow:visible;margin:0;padding:0;border:0;border-radius:0;background:transparent;box-shadow:none;transform:none}
.phone-panel header{align-items:flex-start}.phone-panel h2{font-size:22px;line-height:1.4}.phone-panel header .phone-link{white-space:nowrap;margin:0}
.phone-panel form .phone-field{margin:0;gap:8px}.phone-panel form .phone-check{display:flex;margin:0}.phone-panel form .phone-check input{min-height:16px;padding:0;margin:3px 0 0;width:16px}
.phone-panel .phone-number input,.phone-panel .phone-code-row input{height:44px;margin:0}.phone-panel .phone-links{margin:0}.phone-panel .phone-submit{width:100%;margin:0}
.phone-panel .phone-links button{margin:0}.phone-account>.phone-panel{margin-top:20px;max-width:520px}

.phone-panel>.phone-links{display:flex;justify-content:stretch;gap:6px;margin:0 0 20px;border-bottom:1px solid #ffffff14;padding-bottom:8px}
.phone-panel>.phone-links button{flex:1;min-width:0;padding:8px 4px;border-radius:6px;white-space:normal;font-size:13px}
.phone-panel>.phone-links button[aria-pressed=true]{color:#ffbd89;background:#ed9a601a}
.phone-panel .phone-field>span:first-child{font-size:13px}.phone-mode-active>.phone-panel header{gap:10px}.phone-panel header .phone-link{font-size:12px}

.phone-panel header .phone-link[hidden]{display:none!important}.phone-panel>.phone-links button{font-size:12px;padding:8px 2px}.phone-panel>.phone-links button:first-child{white-space:nowrap}

.phone-panel .phone-links a{color:#b8c5cf;font-size:13px;text-decoration:none;padding:6px 0}.phone-panel .phone-links a:hover{color:#ffbd89}.auth-card .auth-methods button{white-space:normal;padding:8px;font-size:13px}

.security-recovery.phone-mode-active>.security-links,.security-recovery.phone-mode-active>.eyebrow{display:none}

.security-grid{grid-template-columns:repeat(3,minmax(0,1fr))}.security-grid>.phone-account{padding:0;border:0;margin:0}.security-grid>.phone-account .security-email{font-size:inherit;color:inherit}.phone-binding-dialog{margin:auto;box-shadow:0 24px 80px #0008}.phone-binding-dialog header .phone-link{font-size:26px;line-height:1;width:32px;height:32px;padding:0}.phone-binding-dialog .phone-links:empty{display:none}@media(max-width:760px){.security-grid{grid-template-columns:1fr}.security-grid>.phone-account{padding-top:18px;border-top:1px solid var(--line,#354047)}}

.phone-binding-dialog{padding:24px}.phone-binding-dialog .phone-submit{width:auto;min-width:108px;justify-self:end;padding:8px 18px}.phone-binding-dialog .phone-notice{padding-bottom:12px;border-bottom:1px solid #ffffff16}.phone-binding-dialog .security-state[hidden]{display:none}

/* Shared authentication layout: both methods use the same card and footer. */
:is(.auth-card,.security-recovery)>.auth-footer,.security-recovery>.security-links{display:flex;justify-content:space-between;flex-wrap:wrap;gap:12px;margin:24px 0 0;font-size:13px}
:is(.auth-footer,.security-links) a{color:var(--accent);text-decoration:none}
:is(.auth-footer,.security-links) a:hover{text-decoration:underline}
.security-recovery.phone-mode-active>.security-links{display:flex}
.security-recovery>.eyebrow{display:none}
:is(.auth-card,.security-recovery) h1,:is(.auth-card,.security-recovery) h2{font-size:24px;line-height:1.4;margin:0 0 8px}
:is(.auth-card,.security-recovery) .phone-intro,#security-intro{font-size:14px;line-height:1.7;margin:0 0 24px;color:var(--muted)}
:is(.auth-card,.security-recovery) .phone-panel form{display:block;margin:0}
:is(.auth-card,.security-recovery) .phone-verification{display:block}
:is(.auth-card,.security-recovery) .phone-verification[hidden]{display:none}
:is(.auth-card,.security-recovery) .phone-field{margin:18px 0;font-size:14px}
:is(.auth-card,.security-recovery) .phone-field>span:first-child{font-size:14px}
:is(.auth-card,.security-recovery,.phone-binding-dialog) input:not([type=checkbox]){height:44px;min-height:44px;background:#111617;border:1px solid #ffffff28;color:var(--text);font:inherit}
:is(.auth-card,.security-recovery) button[type=submit]{height:44px;min-height:44px;margin:4px 0 0;padding:9px 16px;border:0;border-radius:8px;background:var(--accent);color:#181a18;font-size:14px;font-weight:600}
.phone-notice:empty,.phone-links:empty{display:none}
.phone-panel .phone-notice{min-height:0;margin:12px 0}
.phone-panel .phone-check{margin:18px 0!important}

.phone-panel .password-field input{padding-right:50px}
.phone-panel .password-toggle svg{width:20px;height:20px;fill:none;stroke:currentColor;stroke-width:1.6}
.phone-binding-dialog .phone-notice{padding:0;border:0}
.phone-binding-dialog .hh-frame-body>.phone-intro{margin:0}
.phone-binding-dialog .hh-frame-body>.phone-verification{display:grid;gap:16px}
.phone-binding-dialog .hh-frame-body>.phone-verification[hidden]{display:none}
.phone-binding-dialog .hh-frame-body .phone-field{margin:0}
.phone-binding-dialog .hh-frame-body>.phone-notice:empty{display:none}
.phone-binding-dialog .hh-frame-footer>.phone-submit{margin:0;min-height:40px;height:auto}
/* Account security: aligned, content-sized rows instead of uneven columns. */
.account-security .security-grid{display:grid;grid-template-columns:1fr;gap:0}
.account-security .security-grid>section{display:grid;grid-template-columns:minmax(130px,180px) minmax(0,1fr) auto;column-gap:24px;row-gap:6px;align-items:center;padding:22px 0;margin:0;border:0}
.account-security .security-grid>section+section{border-top:1px solid var(--line)}
.account-security .security-grid h3{grid-column:1;grid-row:1 / 3;margin:0;font-size:15px}
.account-security .security-grid .security-email{grid-column:2;grid-row:1;margin:0;font-size:15px;color:var(--text)}
.account-security .security-grid .security-muted{grid-column:2;grid-row:2;margin:0;font-size:13px}
.account-security .security-grid button{grid-column:3;grid-row:1 / 3;margin:0;min-width:116px;height:40px}
.account-security .security-grid button[hidden],.security-state[hidden]{display:none}
@media(max-width:640px){.account-security .security-grid>section{grid-template-columns:minmax(0,1fr) auto;gap:10px 16px}.account-security .security-grid h3{grid-column:1;grid-row:1}.account-security .security-grid .security-email{grid-column:1;grid-row:2}.account-security .security-grid .security-muted{grid-column:1 / -1;grid-row:3}.account-security .security-grid button{grid-column:2;grid-row:1 / 3;min-width:0}}

:is(.auth-card,.security-recovery) .phone-panel form .phone-field{margin:18px 0;gap:8px;font-size:14px}
.account-security .security-grid>section:not(:has(.security-email)) .security-muted{grid-row:1 / 3}

.phone-binding-dialog form,.phone-binding-dialog .phone-verification{display:block}.phone-binding-dialog .phone-verification[hidden]{display:none}.phone-binding-dialog form .phone-field{margin:18px 0;font-size:14px}.phone-binding-dialog .phone-submit{display:block;margin:20px 0 0 auto}.phone-binding-dialog .phone-field>span:first-child{font-size:14px}

body.security-page{min-height:100dvh;display:flow-root;background:var(--bg)}body.security-page::before{display:none}.security-page .security-recovery{background:var(--surface);border-color:var(--line);border-radius:14px}

/* Form options share typography, alignment and control colors across methods. */
:is(.auth-card,.security-recovery,.phone-binding-dialog) form label:is(.check-row,.phone-check){display:flex;align-items:flex-start;gap:10px;margin:18px 0!important;font-family:inherit;font-size:13px;font-weight:400;line-height:1.6;color:var(--muted);cursor:pointer}
:is(.auth-card,.security-recovery,.phone-binding-dialog) form label:is(.check-row,.phone-check) input[type=checkbox]{box-sizing:border-box;flex:0 0 16px;width:16px;height:16px;min-height:0;padding:0;margin:2px 0 0;accent-color:var(--accent)}