.auth-page { min-height: 62vh; display: grid; place-items: center; padding: clamp(32px, 7vw, 76px) 20px; background: radial-gradient(ellipse at 50% 0%, rgba(58, 111, 190, .12), transparent 62%), var(--color-bg); }
.auth-modal-backdrop { position: fixed; z-index: 300; inset: 0; display: grid; place-items: center; overflow-y: auto; padding: max(16px, env(safe-area-inset-top)) max(16px, env(safe-area-inset-right)) max(16px, env(safe-area-inset-bottom)) max(16px, env(safe-area-inset-left)); background: rgba(8, 20, 38, .68); backdrop-filter: blur(5px); }
.auth-modal { margin: auto; }
.auth-dialog { position: relative; width: min(100%, 500px); padding: clamp(25px, 6vw, 46px); border: 1px solid var(--color-border); border-radius: var(--radius-lg); background: var(--color-surface); box-shadow: 0 24px 70px rgba(17, 35, 58, .14); }
.auth-close { position: absolute; top: 14px; right: 18px; color: var(--color-text-dim); font-size: 28px; line-height: 1; }
.auth-dialog h1 { margin: 0 0 12px; font-size: clamp(30px, 5vw, 40px); }
.auth-intro { color: var(--color-text-muted); font-size: 15px; line-height: 1.6; }
.auth-options { display: grid; gap: 12px; margin-top: 28px; }
.auth-provider { display: flex; align-items: center; justify-content: center; gap: 12px; min-height: 50px; padding: 10px 16px; border: 1px solid var(--color-border); border-radius: var(--radius-md); color: var(--color-text); font-weight: 600; }
.auth-provider:hover { border-color: var(--color-primary); background: var(--color-primary-light); }
.auth-provider-mark { display: inline-grid; width: 25px; height: 25px; place-items: center; border-radius: 50%; background: var(--color-bg-hover); font-size: 12px; }
.auth-provider-icon { width: 20px; height: 20px; flex: 0 0 auto; object-fit: contain; }
.auth-provider-icon--github { filter: grayscale(1); }
.auth-status { display: inline-flex; align-items: center; gap: 7px; margin-left: 10px; color: var(--color-text-muted); font: 500 11px/1.4 var(--font-mono); letter-spacing: 0; text-transform: none; vertical-align: middle; }
.auth-status span,.history-count-dot { width: 7px; height: 7px; border-radius: 50%; background: #27865a; box-shadow: 0 0 0 3px rgba(39,134,90,.12); }
.auth-security { margin: 22px 0 0; padding: 13px 14px; border: 1px solid var(--color-border); border-radius: var(--radius-md); background: var(--color-bg-elevated); color: var(--color-text-muted); font-size: 12px; line-height: 1.6; }
.auth-error, .auth-setup { margin-top: 18px; color: var(--color-danger, #b42318); font-size: 13px; line-height: 1.5; }
.auth-setup { color: var(--color-text-muted); }
.auth-back { display: inline-block; margin-top: 22px; color: var(--color-text-muted); font-size: 13px; }
@media(max-width:520px){.auth-page{padding:24px 14px}.auth-dialog{padding:28px 22px}.auth-status{display:flex;margin:9px 0 0}.auth-modal-backdrop{align-items:start}.auth-modal{margin:auto 0}}