.phone-field { display:flex; width:100%; height:48px; margin-top:7px; overflow:hidden; border:1px solid rgba(6,44,82,.12); border-radius:10px; background:rgba(6,44,82,.025); text-transform:none; transition:border-color .18s,box-shadow .18s; }
.phone-field:focus-within { border-color:var(--blue); box-shadow:0 0 0 3px rgba(93,157,246,.12); }
.phone-prefix { display:flex; align-items:center; flex:0 0 auto; padding:0 12px; border-right:1px solid rgba(6,44,82,.1); background:rgba(6,44,82,.055); color:#0a335b; font:700 15px ui-monospace,SFMono-Regular,Consolas,monospace; }
.phone-local { position:relative; display:block; min-width:0; flex:1; font-family:ui-monospace,SFMono-Regular,Consolas,monospace; }
.phone-local input { position:relative; z-index:2; height:100%; margin:0; border:0; border-radius:0; background:transparent; padding:0 12px; font:600 15px ui-monospace,SFMono-Regular,Consolas,monospace; box-shadow:none; }
.phone-local input:focus { border:0; box-shadow:none; }
.phone-mask { position:absolute; z-index:1; top:0; bottom:0; left:12px; display:flex; align-items:center; color:rgba(6,44,82,.24); font:500 15px ui-monospace,SFMono-Regular,Consolas,monospace; white-space:pre; pointer-events:none; }
.suggestions mark { padding:0; border-radius:2px; background:rgba(93,157,246,.17); color:inherit; font-weight:800; }
.suggestions button[aria-selected="true"] { background:rgba(93,157,246,.11); outline:2px solid rgba(93,157,246,.3); outline-offset:-2px; }
.suggestion-kind { display:block; margin-top:2px; color:var(--muted); font-size:9px; font-weight:500; }
.contact-picker { display:none; width:100%; margin:-7px 0 14px; border:0; background:transparent; color:#387dcc; text-align:left; font-size:11px; font-weight:700; }
.contact-picker.available { display:block; }
body[data-theme="dark"] .phone-field { border-color:#2b536a; background:#102b3f; }
body[data-theme="dark"] .phone-prefix { border-color:#2b536a; background:#173a50; color:#eef7fa; }
body[data-theme="dark"] .phone-mask { color:rgba(224,241,247,.22); }
body[data-theme="vision"] .phone-field { height:54px; border:2px solid #fff; background:#000; }
body[data-theme="vision"] .phone-prefix { border-right:2px solid #fff; background:#000; color:#ffe500; }
body[data-theme="vision"] .phone-mask { color:rgba(255,255,255,.48); }
body[data-theme="vision"] .phone-local input { height:100%; border:0; color:#fff; }
.access-help { display:block; width:100%; min-height:42px; margin-top:10px; border:0; background:transparent; color:#5d9df6; font-size:12px; font-weight:800; text-align:center; text-decoration:underline; text-decoration-color:rgba(93,157,246,.38); text-underline-offset:4px; }
.access-help:focus-visible { outline:3px solid rgba(93,157,246,.22); outline-offset:2px; border-radius:9px; }
.auth-hint,.password-rule { margin:-2px 2px 14px; color:var(--muted); font-size:11px; line-height:1.5; text-transform:none; }
.password-rule { margin-top:-5px; }
body[data-theme="dark"] .access-help { color:#84b7ff; }
body[data-theme="dark"] .auth-hint,body[data-theme="dark"] .password-rule { color:rgba(224,241,247,.66); }
body[data-theme="vision"] .access-help { min-height:54px; color:#ffe500; font-size:16px; }
body[data-theme="vision"] .auth-hint,body[data-theme="vision"] .password-rule { color:#fff; font-size:15px; }