/* Shared styles for the auth pages: login, forgot, reset, welcome, admin/users. Self-contained and *light*-themed. The SPA itself keeps its own dark default — see styles.css and the `data-theme` attribute on . */ /* App version badge — small print, bottom-right. Mirrors the rule in styles.css; duplicated here so auth pages don't have to pull the SPA stylesheet. Hidden at phone widths (see the media block at the foot of this file). */ .app-version { position: fixed; bottom: 0.5rem; right: 0.7rem; z-index: 5; font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; font-size: 0.7rem; font-weight: 500; letter-spacing: 0.06em; color: #6c757d; opacity: 0.7; pointer-events: none; white-space: nowrap; } @media (max-width: 700px) { .app-version { display: none !important; } } /* GDPR / cookie disclaimer banner — light-theme variant for the auth pages. Same dismissal logic; just a brighter card. */ .privacy-banner { position: fixed; left: 50%; bottom: 1rem; transform: translateX(-50%); z-index: 1400; max-width: 42rem; width: calc(100% - 2rem); display: flex; align-items: center; gap: 0.9rem; padding: 0.75rem 0.95rem; background: rgba(255, 255, 255, 0.97); border: 1px solid rgba(0, 0, 0, 0.12); border-radius: 0.5rem; box-shadow: 0 14px 36px rgba(0, 0, 0, 0.18); color: #212529; font-size: 0.82rem; line-height: 1.45; } .privacy-banner[hidden] { display: none !important; } .privacy-banner-body { flex: 1; min-width: 0; } .privacy-banner-body strong { display: inline-block; margin-right: 0.3rem; color: #0d6efd; } .privacy-banner-link { color: #0d6efd; margin-left: 0.4rem; white-space: nowrap; text-decoration: none; } .privacy-banner-link:hover { text-decoration: underline; } .privacy-banner-btn { flex-shrink: 0; padding: 0.4rem 0.95rem; font-size: 0.82rem; font-weight: 600; background: #0d6efd; color: #fff; border: 0; border-radius: 0.3rem; cursor: pointer; } .privacy-banner-btn:hover { filter: brightness(1.07); } .privacy-banner-actions { display: flex; gap: 0.5rem; flex-shrink: 0; } .privacy-banner-btn-secondary { flex-shrink: 0; padding: 0.4rem 0.95rem; font-size: 0.82rem; font-weight: 500; background: transparent; color: #495057; border: 1px solid rgba(0, 0, 0, 0.18); border-radius: 0.3rem; cursor: pointer; } .privacy-banner-btn-secondary:hover { border-color: #0d6efd; color: #0d6efd; } @media (max-width: 600px) { .privacy-banner { flex-direction: column; align-items: stretch; bottom: 0.5rem; } .privacy-banner-actions { flex-direction: column; } .privacy-banner-btn, .privacy-banner-btn-secondary { width: 100%; } } /* Footer link the auth pages can drop into the bottom of their shell so the privacy notice is reachable after the banner is dismissed. */ .auth-footer { margin: 1.5rem auto 0; text-align: center; font-size: 0.78rem; color: var(--auth-muted); } .auth-footer a { color: var(--auth-muted); text-decoration: none; } .auth-footer a:hover { color: var(--auth-text); text-decoration: underline; } :root { --auth-bg-1: #ffffff; --auth-bg-2: #e2efe5; --auth-card: rgba(255, 255, 255, 0.92); --auth-text: #212529; --auth-muted: #6c757d; --auth-border: rgba(0, 0, 0, 0.1); --auth-accent: #198754; /* dark green, readable on light bg */ --auth-input-bg: #ffffff; --auth-input-border: #ced4da; --auth-error-bg: #f8d7da; --auth-error-fg: #842029; --auth-success-bg: #d1e7dd; --auth-success-fg: #0f5132; --auth-info-bg: #cff4fc; --auth-info-fg: #055160; } html, body { height: 100%; margin: 0; background: linear-gradient(180deg, var(--auth-bg-1) 0%, var(--auth-bg-2) 100%); color: var(--auth-text); font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif; font-size: 14px; } a { color: var(--auth-accent); text-decoration: none; } a:hover { text-decoration: underline; } .auth-shell { min-height: 100vh; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 1.5rem; padding: 1.5rem; } /* Optional full-screen video backdrop for the public auth pages (landing / login). The page adds class="auth-video" to and includes