/* Identity gate — shared by desktop and mobile shells */
body.auth-locked { overflow: hidden; }
.auth-gate { position: fixed; inset: 0; z-index: 3000; display: grid; place-items: center; padding: 20px; background: rgba(236, 241, 250, .58); backdrop-filter: blur(22px) saturate(150%); -webkit-backdrop-filter: blur(22px) saturate(150%); }
.auth-gate[hidden] { display: none; }
.auth-gate::before { content: ''; position: absolute; inset: 0; pointer-events: none; background: radial-gradient(420px 320px at 84% 12%, rgba(90, 200, 250, .25), transparent 72%), radial-gradient(360px 300px at 14% 88%, rgba(175, 82, 222, .15), transparent 74%); }
.auth-card { position: relative; width: min(410px, calc(100vw - 32px)); padding: 28px; overflow: hidden; border: 1px solid rgba(255, 255, 255, .88); border-radius: 28px; background: linear-gradient(145deg, rgba(255, 255, 255, .82), rgba(242, 247, 255, .66)); box-shadow: 0 30px 80px rgba(41, 58, 94, .22), inset 0 1px rgba(255, 255, 255, .98); backdrop-filter: blur(30px) saturate(170%); -webkit-backdrop-filter: blur(30px) saturate(170%); }
.auth-card::before { content: ''; position: absolute; inset: 0 24% 72% 0; pointer-events: none; background: linear-gradient(120deg, rgba(255, 255, 255, .72), transparent); }
.auth-card > * { position: relative; z-index: 1; }
.auth-brand { display: flex; align-items: center; gap: 10px; margin-bottom: 25px; }
.auth-brand-mark { display: grid; place-items: center; width: 42px; height: 42px; border-radius: 14px; color: #fff; font: 800 23px Manrope, -apple-system, sans-serif; background: linear-gradient(145deg, #007aff, #af52de); box-shadow: 0 11px 25px rgba(0, 122, 255, .24), inset 0 1px rgba(255,255,255,.55); }
.auth-brand-copy strong { display: block; color: #1d1d1f; font-size: 16px; letter-spacing: .02em; }
.auth-brand-copy span { display: block; margin-top: 3px; color: #8e8e93; font: 9px 'DM Mono', monospace; letter-spacing: .12em; text-transform: uppercase; }
.auth-kicker { color: #007aff; font: 10px 'DM Mono', monospace; letter-spacing: .16em; }
.auth-card h1 { margin: 8px 0 8px; color: #1d1d1f; font-size: 28px; letter-spacing: -.055em; }
.auth-card p { margin: 0; color: #6e6e73; font-size: 12px; line-height: 1.65; }
.auth-form { margin-top: 22px; }
.auth-label { display: block; margin-bottom: 8px; color: #6e6e73; font-size: 11px; font-weight: 650; }
.auth-input-wrap { display: flex; align-items: center; gap: 9px; height: 50px; padding: 0 13px; border: 1px solid rgba(60, 60, 67, .16); border-radius: 15px; background: rgba(255, 255, 255, .74); box-shadow: inset 0 1px rgba(255,255,255,.94); transition: border-color .18s ease, box-shadow .18s ease, background .18s ease; }
.auth-input-wrap:focus-within { border-color: rgba(0, 122, 255, .64); background: #fff; box-shadow: 0 0 0 4px rgba(0, 122, 255, .12), inset 0 1px rgba(255,255,255,.98); }
.auth-input-icon { color: #007aff; font-size: 17px; }
.auth-input-wrap input { min-width: 0; flex: 1; height: 100%; border: 0; outline: 0; background: transparent; color: #1d1d1f; font-size: 16px; letter-spacing: .12em; }
.auth-input-wrap input::placeholder { color: #a1a1a6; letter-spacing: 0; }
.auth-submit { width: 100%; height: 48px; margin-top: 13px; border: 1px solid rgba(255,255,255,.72); border-radius: 15px; color: #fff; background: linear-gradient(135deg, #007aff, #5ac8fa 55%, #af52de); box-shadow: 0 13px 25px rgba(0, 122, 255, .22), inset 0 1px rgba(255,255,255,.46); font-size: 13px; font-weight: 700; transition: transform .18s ease, filter .18s ease; }
.auth-submit:hover { filter: brightness(1.04) saturate(1.05); transform: translateY(-1px); }
.auth-submit:active { transform: translateY(0) scale(.985); }
.auth-submit:focus-visible { outline: 3px solid rgba(0, 122, 255, .22); outline-offset: 2px; }
.auth-message { min-height: 18px; margin-top: 10px !important; color: #ff3b30 !important; font-size: 11px !important; }
.auth-message:empty { margin-top: 0 !important; }
.auth-note { display: flex; align-items: center; gap: 6px; margin-top: 14px !important; color: #8e8e93 !important; font-size: 10px !important; }
.auth-note::before { content: '◉'; color: #34c759; font-size: 9px; }
.auth-gate.is-error .auth-card { animation: auth-shake .34s ease both; }
@keyframes auth-shake { 20% { transform: translateX(-7px); } 40% { transform: translateX(6px); } 60% { transform: translateX(-4px); } 80% { transform: translateX(3px); } }
@media (max-width: 600px) {
  .auth-gate { align-items: center; padding: 16px 12px calc(16px + env(safe-area-inset-bottom)); }
  .auth-card { width: 100%; padding: 24px 20px 20px; border-radius: 28px 28px 21px 21px; }
  .auth-brand { margin-bottom: 21px; }
  .auth-card h1 { font-size: 26px; }
}
@media (prefers-reduced-motion: reduce) { .auth-card, .auth-submit { animation: none !important; transition: none !important; } }