.auth-gate { position:fixed; inset:0; z-index:100; display:grid; place-items:center; overflow-y:auto; overscroll-behavior:contain; padding:20px; background:rgba(21,12,25,.72); backdrop-filter:blur(12px); }
.auth-gate[hidden] { display:none !important; }
.app-startup-loader { position:fixed; inset:0; z-index:110; display:grid; place-items:center; padding:20px; background:rgba(21,12,25,.92); color:#fff; opacity:1; transition:opacity .24s ease,transform .24s ease; }
.app-startup-loader[hidden] { display:none !important; }
.app-startup-loader.is-leaving { opacity:0; transform:scale(1.01); pointer-events:none; }
.app-startup-loader-card { display:grid; justify-items:center; gap:12px; text-align:center; }
.app-startup-loader-card strong { font-size:1.12rem; }
.app-startup-loader-card span:last-child { color:#f5c6d9; }
.app-startup-mark { display:grid; place-items:center; width:52px; height:52px; border:2px solid #f6a6c5; border-radius:50%; color:#fff; background:#ca3d73; animation:startup-pulse 1s ease-in-out infinite; }
@keyframes startup-pulse { 50% { transform:scale(1.1); opacity:.78; } }
.auth-stage { width:min(420px,100%); }
.auth-card { padding:28px; border-radius:8px; background:#fffafd; color:#382b3b; box-shadow:0 24px 70px rgba(0,0,0,.35); }
.auth-card h1 { margin:0 0 16px; font-size:1.8rem; }
.auth-intro { margin:0 0 20px; color:#735d6e; line-height:1.45; }
.auth-links { display:flex; justify-content:space-between; gap:12px; margin-top:18px; }
.auth-links button { min-height:auto; padding:3px 0; border:0; border-radius:0; background:transparent; color:#a52f60; font-weight:700; text-decoration:underline; }
.auth-links button:last-child { margin-left:auto; }
.auth-form { display:grid; gap:10px; }
.register-step { display:grid; gap:10px; animation:registerStepIn .18s ease-out both; }
.register-step[hidden] { display:none !important; }
@keyframes registerStepIn { from { opacity:0; transform:translateX(12px); } to { opacity:1; transform:translateX(0); } }
.register-progress { margin:0; color:#a52f60; font-size:.85rem; font-weight:800; text-align:center; }
.register-step-actions { display:grid; grid-template-columns:1fr 1fr; gap:10px; }
.auth-form .register-back { background:#f2e5eb; color:#793357; }
.remember-login { display:flex !important; align-items:center; gap:8px; font-weight:600 !important; color:#705466; }
.remember-login input { width:auto !important; accent-color:#cf336d; }
.password-field { display:grid; grid-template-columns:minmax(0,1fr) 42px; align-items:stretch; }
.auth-form .password-field input { border-radius:6px 0 0 6px; }
.password-field.has-check { grid-template-columns:minmax(0,1fr) 42px 38px; }
.password-field.has-check .password-toggle { border-radius:0 !important; }
.password-toggle { min-height:0 !important; padding:0 !important; border:1px solid #d8bcc9 !important; border-left:0 !important; border-radius:0 6px 6px 0 !important; background:#f8edf2 !important; color:#a52f60 !important; font-size:1rem; }
.password-rules { display:flex; flex-wrap:wrap; gap:6px 10px; color:#806477; font-size:.84rem; }
.password-anchor { position:relative; }
.password-hint-popup { display:block; box-sizing:border-box; width:100%; margin-top:7px; padding:10px; border:1px solid #e0a2b7; border-radius:6px; background:#fffafd; box-shadow:0 8px 20px rgba(71,35,55,.18); }
.password-hint-popup[hidden] { display:none !important; }
.password-rule-example { flex-basis:100%; }
.password-match-ok { color:#16825f; font-size:.84rem; font-weight:800; }
.password-rules [data-password-rule]::before { content:"× "; color:#a12e48; font-weight:900; }
.auth-field-feedback { margin:0; color:#a12e48; font-weight:800; }
.auth-field-feedback::before { content:"× "; }
.auth-field-feedback.is-success { color:#16825f; }
.auth-field-feedback.is-success::before { content:"✓ "; }
.field-help { color:#806477; font-size:.82rem; font-weight:600; line-height:1.35; }
.auth-form input[aria-invalid="true"] { border-color:#ba3455; box-shadow:0 0 0 2px rgba(186,52,85,.14); }
.auth-form label,.account-settings label,.letter-settings label { display:grid; gap:5px; font-weight:700; }
.auth-form input,.account-settings input,.letter-settings input,.letter-settings textarea,.letter-settings select { width:100%; min-width:0; padding:10px; border:1px solid #d8bcc9; border-radius:6px; font:inherit; color:inherit; background:white; }
.auth-input-check { display:grid; grid-template-columns:minmax(0,1fr) 38px; }
.auth-input-check input { border-radius:6px 0 0 6px !important; }
.field-check { display:grid; place-items:center; min-width:38px; border:1px solid #d8bcc9; border-left:0; border-radius:0 6px 6px 0; background:#f8edf2; font-weight:900; }
.field-check.is-valid { color:#16825f; }
.field-check.is-invalid { color:#a12e48; }
.auth-form button,.account-settings button,.letter-settings button { min-height:42px; border-radius:6px; background:#cf336d; color:white; font-weight:800; }
#authStatus { min-height:22px; margin:12px 4px 0; color:#fff; font-weight:700; text-align:center; }
.account-settings,.letter-settings { display:grid; gap:14px; }
.account-settings form,.letter-settings form { display:grid; gap:10px; }
.settings-actions { display:flex; gap:8px; }
.settings-actions button { flex:1; }
.invite-box { display:grid; gap:6px; }
.invite-box p { overflow-wrap:anywhere; margin:0; }
.pair-management { display:grid; gap:9px; padding-top:12px; border-top:1px solid #e2ced8; }
.pair-management p { margin:0; }
.pair-management button.danger,.pair-invite-actions .danger { background:#a12e48; }
#pairDeleteRequest { display:grid; gap:8px; padding:10px; border:1px solid #d79aac; border-radius:6px; background:#fff0f4; }
.letter-question-list { display:grid; gap:7px; }
.letter-editor-heading { margin:4px 0 0; color:#793357; font-size:1rem; }
.letter-editor-help { margin:0; color:#705466; font-size:.88rem; line-height:1.35; }
.letter-question-item { display:flex; align-items:center; gap:8px; padding:9px; border:1px solid #dfcad4; border-radius:6px; }
.letter-question-item strong { flex:1; overflow-wrap:anywhere; }
.letter-question-item button { min-height:32px; padding:5px 8px; }
body.auth-locked { overflow:hidden; }
.pair-invite-dialog { width:min(420px,calc(100% - 32px)); padding:24px; border:0; border-radius:8px; background:#fffafd; color:#2d2030; box-shadow:0 24px 70px rgba(0,0,0,.35); }
.pair-invite-dialog::backdrop { background:rgba(21,12,25,.55); backdrop-filter:blur(4px); }
.pair-invite-dialog .eyebrow { color:#b22f66; }
.pair-invite-dialog h2 { margin:0 0 10px; color:#3a2640; }
.pair-invite-dialog p:not(.eyebrow) { margin:0 0 16px; color:#4b384c; line-height:1.45; }
.pair-invite-dialog input { box-sizing:border-box; width:100%; padding:10px; border:1px solid #d8bcc9; border-radius:6px; background:#fffafd; color:#4d3444; font:inherit; }
.pair-invite-dialog input::placeholder { color:#765b6e; opacity:1; }
.pair-invite-actions { display:flex; justify-content:flex-end; gap:8px; margin-top:14px; }
.pair-invite-actions button { min-height:40px; padding:0 13px; border-radius:6px; background:#cf336d; color:#fff; font-weight:800; }
.pair-invite-actions #closePairInviteButton { background:#f2e5eb; color:#793357; }
body[data-theme="dark"] .auth-card { background:#241b29; color:#f8eef5; }
body[data-theme="dark"] .auth-form input,body[data-theme="dark"] .account-settings input,body[data-theme="dark"] .letter-settings input,body[data-theme="dark"] .letter-settings textarea,body[data-theme="dark"] .letter-settings select { background:#342b39; color:#fff; border-color:#6b5667; }
body[data-theme="dark"] .password-toggle { background:#342b39 !important; border-color:#6b5667 !important; color:#ffb2cf !important; }
body[data-theme="dark"] .pair-invite-dialog { background:#2a2030; color:#fff3f8; }
body[data-theme="dark"] .pair-invite-dialog h2 { color:#fff3f8; }
body[data-theme="dark"] .pair-invite-dialog p:not(.eyebrow) { color:#f3dce7; }
body[data-theme="dark"] .pair-invite-dialog input { background:#3b2e40; border-color:#806678; color:#fff5f9; }
@media (max-width:680px) {
  .auth-gate { display:block; padding:16px 16px calc(32px + env(safe-area-inset-bottom)); }
  .auth-stage { margin:0 auto; }
  .auth-card { padding:22px; }
  .auth-card h1 { margin-bottom:12px; }
  .auth-intro { margin-bottom:16px; }
  .auth-form { gap:8px; }
}
@media (prefers-reduced-motion: reduce) { .app-startup-loader { transition:none; } .app-startup-mark,.register-step { animation:none; } }