/* PWA-only styles: login gate + install affordances. Layered on top of the reused style.css. */ /* Hide the dashboard until the session check completes, so a refresh never flashes the app before the login gate (or before we know you're signed in). Revealed by adding `.algam-authed` to in bootApp(). */ .app { visibility: hidden; } body.algam-authed .app { visibility: visible; } /* Full-screen splash shown while /api/me is being checked. */ #auth-checking { position: fixed; inset: 0; z-index: 9998; display: flex; align-items: center; justify-content: center; background: radial-gradient(1200px 600px at 50% -10%, #1b1d24, #0c0d11 70%); } #auth-checking .auth-spinner { width: 34px; height: 34px; border: 3px solid #2a2f3a; border-top-color: #7c5cff; border-radius: 50%; animation: auth-spin 0.7s linear infinite; } @keyframes auth-spin { to { transform: rotate(360deg); } } #auth-overlay { position: fixed; inset: 0; z-index: 9999; display: flex; align-items: center; justify-content: center; background: radial-gradient(1200px 600px at 50% -10%, #1b1d24, #0c0d11 70%); padding: 24px; } .auth-card { width: 100%; max-width: 360px; background: #14161c; border: 1px solid #262a33; border-radius: 16px; padding: 32px 28px; box-shadow: 0 24px 60px rgba(0, 0, 0, 0.5); } .auth-logo { font-size: 22px; font-weight: 700; letter-spacing: 0.5px; color: #f2f3f5; margin: 0 0 4px; } .auth-logo span { color: #7c5cff; } .auth-sub { color: #8b8f9a; font-size: 13px; margin: 0 0 24px; } .auth-label { display: block; font-size: 12px; color: #a6abb5; margin-bottom: 8px; } .auth-input { width: 100%; box-sizing: border-box; background: #0e1015; border: 1px solid #2a2f3a; border-radius: 10px; color: #f2f3f5; font-size: 15px; padding: 12px 14px; outline: none; transition: border-color 0.15s; } .auth-input:focus { border-color: #7c5cff; } .auth-otp { letter-spacing: 10px; text-align: center; font-size: 22px; font-weight: 600; } .auth-btn { width: 100%; margin-top: 16px; background: #7c5cff; color: #fff; border: none; border-radius: 10px; padding: 12px 14px; font-size: 15px; font-weight: 600; cursor: pointer; transition: background 0.15s, opacity 0.15s; } .auth-btn:hover { background: #6a4bf0; } .auth-btn:disabled { opacity: 0.5; cursor: default; } .auth-link { width: 100%; margin-top: 10px; background: none; border: none; color: #8b8f9a; font-size: 12px; cursor: pointer; } .auth-link:hover { color: #c9ccd3; } .auth-msg { min-height: 18px; margin: 14px 0 0; font-size: 12px; color: #8b8f9a; text-align: center; } .auth-msg-error { color: #ff6b6b; } .auth-msg-ok { color: #4ade80; } /* Small logout affordance injected into the header. */ #algam-logout { background: none; border: 1px solid var(--border, #2a2f3a); color: var(--text-muted, #8b8f9a); border-radius: 8px; padding: 4px 10px; font-size: 12px; cursor: pointer; } #algam-logout:hover { color: #f2f3f5; }