/** * Kratevia Auth Pages (Login & Register) * Clean, calm, and trustworthy authentication experience */ /* ============================================ AUTH PAGE BASE ============================================ */ .auth-page { min-height: 100vh; display: flex; align-items: center; justify-content: center; padding: clamp(0.875rem, 2.5vw, 1.5rem); position: relative; /* MOBILE FIX: Rimosso overflow:hidden per permettere scroll verticale su mobile quando il form è più alto dello schermo */ overflow-x: hidden; overflow-y: auto; } /* ============================================ AUTH THEME BACKGROUNDS PROBLEMA RISOLTO: Il JS imposta data-theme su , non su I selettori devono matchare ENTRAMBE le strutture: - html[data-theme="light"] .auth-page (impostato da JS) - .auth-page[data-theme="light"] (fallback se su body) ============================================ */ /* Light Theme Auth - RICH BACKGROUND (non bianco piatto) Gradienti delicati ambra/oro + neutri caldi per coerenza brand */ html[data-theme="light"] .auth-page, :root[data-theme="light"] .auth-page, .auth-page[data-theme="light"] { background: /* Gradiente principale ambra/oro in alto a sinistra */ radial-gradient(ellipse at 15% 10%, rgba(251, 191, 36, 0.12) 0%, transparent 45%), /* Accento viola/lavanda in basso a destra */ radial-gradient(ellipse at 85% 90%, rgba(124, 58, 237, 0.08) 0%, transparent 40%), /* Gradiente centrale tenue per profondità */ radial-gradient(ellipse at 50% 50%, rgba(251, 191, 36, 0.04) 0%, transparent 60%), /* Base: grigio caldo invece di bianco piatto */ linear-gradient(180deg, #fafaf9 0%, #f5f5f4 50%, #fafaf9 100%); } /* Dark Theme Auth */ html[data-theme="dark"] .auth-page, :root[data-theme="dark"] .auth-page, .auth-page[data-theme="dark"], .auth-page.dark-theme { background: radial-gradient(ellipse at 20% 0%, rgba(251, 191, 36, 0.15) 0%, transparent 50%), radial-gradient(ellipse at 80% 100%, rgba(124, 58, 237, 0.1) 0%, transparent 50%), var(--neutral-925); } /* Assicura che html e body coprano l'intera viewport */ html, body { min-height: 100%; } .auth-page { min-height: 100dvh; } /* Ambient elements */ .auth-ambient { position: fixed; inset: 0; pointer-events: none; z-index: 0; } .auth-ambient .glow { position: absolute; border-radius: 50%; filter: blur(80px); opacity: 0.6; } .auth-ambient .glow-1 { width: 400px; height: 400px; top: -100px; right: 10%; background: var(--accent-500); opacity: 0.15; } .auth-ambient .glow-2 { width: 300px; height: 300px; bottom: -50px; left: 10%; background: #7c3aed; opacity: 0.1; } /* Noise overlay */ .auth-noise { position: fixed; inset: 0; background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 256 256' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='noise'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.8' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23noise)'/%3E%3C/svg%3E"); opacity: 0.02; pointer-events: none; z-index: 0; } /* ============================================ AUTH CONTAINER ============================================ */ .auth-container { position: relative; z-index: 1; width: 100%; max-width: 440px; } .auth-card { background: var(--surface-primary); border: 1px solid var(--border-subtle); border-radius: var(--radius-2xl); box-shadow: var(--shadow-xl); overflow: hidden; } /* Dark theme card adjustments */ .auth-page[data-theme="dark"] .auth-card, .auth-page.dark-theme .auth-card { background: rgba(31, 31, 35, 0.8); backdrop-filter: blur(20px); border-color: rgba(255, 255, 255, 0.08); } /* ============================================ AUTH CARD TOPBAR (Home + Theme toggle) Posizionati dentro la card per UX pulita ============================================ */ .auth-card-topbar { display: flex; justify-content: space-between; align-items: center; padding: var(--space-2) var(--space-3); border-bottom: 1px solid var(--border-subtle); background: var(--surface-secondary); } /* Home link (left) */ .auth-topbar-home { display: inline-flex; align-items: center; gap: var(--space-2); min-height: 40px; padding: 0 var(--space-2-5); font-size: var(--text-sm); font-weight: var(--font-medium); color: var(--text-secondary); text-decoration: none; border-radius: var(--radius-md); transition: all var(--transition-fast); } .auth-topbar-home:hover { color: var(--text-primary); background: var(--surface-interactive-hover); } .auth-topbar-home svg { flex-shrink: 0; } /* Theme toggle (right) */ .auth-topbar-theme { display: inline-flex; align-items: center; justify-content: center; width: 40px; height: 40px; padding: 0; background: transparent; border: 1px solid var(--border-subtle); border-radius: var(--radius-md); color: var(--text-secondary); cursor: pointer; transition: all var(--transition-fast); } .auth-topbar-theme:hover { color: var(--text-primary); background: var(--surface-interactive-hover); border-color: var(--border-default); } .auth-topbar-actions { display: inline-flex; align-items: center; gap: var(--space-2); } .auth-locale-switch { display: inline-flex; align-items: center; gap: 6px; font-size: var(--text-xs); color: var(--text-tertiary); } .auth-locale-option { color: var(--text-secondary); text-decoration: none; font-weight: var(--font-medium); padding: 2px 0; display: inline-flex; align-items: center; gap: 4px; } .auth-locale-flag { display: inline-block; vertical-align: middle; border-radius: 2px; box-shadow: 0 0 0 1px rgba(0,0,0,0.08); } .auth-locale-option:hover, .auth-locale-option:focus-visible { color: var(--text-primary); } .auth-locale-option.is-active { color: var(--text-primary); font-weight: var(--font-semibold); } /* Theme toggle icons: show/hide based on theme */ .auth-topbar-theme .sun-icon, .auth-topbar-theme .moon-icon { display: none; } /* Dark theme: show sun icon (to switch to light) */ .auth-page[data-theme="dark"] .auth-topbar-theme .sun-icon, .auth-page.dark-theme .auth-topbar-theme .sun-icon { display: block; } /* Light theme: show moon icon (to switch to dark) */ .auth-page[data-theme="light"] .auth-topbar-theme .moon-icon, .auth-page:not([data-theme]):not(.dark-theme) .auth-topbar-theme .moon-icon { display: block; } /* Hide old floating elements (moved inside card) */ .auth-back, .auth-theme-toggle { display: none; } /* ============================================ AUTH HEADER ============================================ */ .auth-header { padding: var(--space-4) var(--space-6) var(--space-2-5); text-align: center; } /* Auth logo - Uses unified .ks-logo from logo.css */ .auth-header .ks-logo { margin-bottom: var(--space-2-5); justify-content: center; } .auth-title { font-family: var(--font-display); font-size: clamp(1.35rem, 1.7vw, 1.75rem); font-weight: var(--font-semibold); line-height: 1.1; color: var(--text-primary); margin-bottom: 0; } .auth-subtitle { font-size: var(--text-sm); color: var(--text-tertiary); margin: 0; } .auth-subtitle--desktop { display: block; } /* ============================================ AUTH BODY (FORM) ============================================ */ .auth-body { padding: 0 var(--space-6) var(--space-5); } .auth-form { display: flex; flex-direction: column; gap: var(--space-3); } .auth-form .form-group { margin-bottom: 0; } .auth-form .form-label { font-size: var(--text-sm); font-weight: var(--font-medium); color: var(--text-primary); margin-bottom: var(--space-1); } .form-label-row { display: flex; align-items: center; justify-content: space-between; gap: var(--space-2); min-height: 40px; } .form-label-row .form-label { margin-bottom: 0; } .auth-form .form-input { width: 100%; min-height: 44px; padding: 0.625rem var(--space-3); font-size: var(--text-base); background: var(--input-bg); border: 1px solid var(--input-border); border-radius: var(--radius-lg); color: var(--text-primary); transition: all var(--transition-fast); } .auth-form .form-input:hover { border-color: var(--border-strong); } .auth-form .form-input:focus { outline: none; border-color: var(--accent-500); box-shadow: 0 0 0 3px rgba(251, 191, 36, 0.15); } .auth-form .form-input::placeholder { color: var(--text-muted); } .form-input-shell { position: relative; } .field-status-icon { position: absolute; right: 12px; top: 50%; transform: translateY(-50%); width: 18px; height: 18px; pointer-events: none; opacity: 0; transition: opacity var(--transition-fast); } .field-status-icon::before { content: ''; display: block; width: 100%; height: 100%; border-radius: 50%; } .form-input.is-valid { border-color: color-mix(in srgb, var(--success) 65%, var(--border-default)); background: color-mix(in srgb, var(--input-bg) 95%, var(--success) 5%); } .form-input.is-invalid { border-color: color-mix(in srgb, var(--danger) 75%, var(--border-default)); background: color-mix(in srgb, var(--input-bg) 95%, var(--danger) 5%); } .form-input-shell .form-input.is-valid ~ .field-status-icon, .password-wrapper .form-input.is-valid ~ .field-status-icon { opacity: 1; } .form-input-shell .form-input.is-valid ~ .field-status-icon::before, .password-wrapper .form-input.is-valid ~ .field-status-icon::before { content: '✓'; background: rgba(34, 197, 94, 0.15); color: var(--success-dark); display: grid; place-items: center; font-size: 12px; font-weight: var(--font-bold); } .form-input-shell .form-input.is-invalid ~ .field-status-icon, .password-wrapper .form-input.is-invalid ~ .field-status-icon { opacity: 1; } .form-input-shell .form-input.is-invalid ~ .field-status-icon::before, .password-wrapper .form-input.is-invalid ~ .field-status-icon::before { content: '✕'; background: rgba(239, 68, 68, 0.14); color: var(--danger-dark); display: grid; place-items: center; font-size: 11px; font-weight: var(--font-bold); } .field-message { margin: var(--space-0-5) 0 0; min-height: 1.1rem; font-size: var(--text-xs); line-height: 1.3; color: var(--danger-dark); } .field-message.hidden { display: block !important; visibility: hidden; } .auth-forgot-link { min-height: 40px; display: inline-flex; align-items: center; justify-content: center; padding: 0 var(--space-1); border-radius: var(--radius-md); color: var(--text-accent); text-decoration: none; font-size: var(--text-sm); font-weight: var(--font-medium); } .auth-forgot-link:hover, .auth-forgot-link:focus-visible { text-decoration: underline; background: color-mix(in srgb, var(--surface-interactive-hover) 72%, transparent); } .caps-lock-indicator { margin: var(--space-1) 0 0; font-size: var(--text-xs); color: color-mix(in srgb, var(--warning-dark) 82%, var(--text-primary)); min-height: 1rem; } .caps-lock-indicator.hidden { display: block !important; visibility: hidden; } .auth-page[data-theme="dark"] .field-message, .auth-page.dark-theme .field-message { color: #fca5a5; } .auth-page[data-theme="dark"] .caps-lock-indicator, .auth-page.dark-theme .caps-lock-indicator { color: #fcd34d; } .auth-submit-slot { min-height: 44px; } /* Submit button */ .auth-submit { width: 100%; min-height: 44px; padding: 0 var(--space-6); font-family: var(--font-sans); font-size: var(--text-base); font-weight: var(--font-semibold); color: var(--neutral-900); background: var(--accent-500); border: none; border-radius: var(--radius-lg); cursor: pointer; transition: all var(--transition-fast); margin-top: 0; display: inline-flex; align-items: center; justify-content: center; gap: var(--space-2); position: relative; } .auth-submit:hover { background: var(--accent-400); box-shadow: var(--glow-accent); transform: translateY(-1px); } .auth-submit:active { transform: translateY(0); } .auth-submit:disabled { opacity: 0.6; cursor: not-allowed; transform: none; box-shadow: none; } /* ============================================ AUTH FOOTER ============================================ */ .auth-footer { padding: var(--space-4) var(--space-6); background: var(--surface-secondary); border-top: 1px solid var(--border-subtle); text-align: center; } .auth-footer p { font-size: var(--text-sm); color: var(--text-tertiary); } .auth-footer a { color: var(--text-accent); text-decoration: none; font-weight: var(--font-medium); transition: color var(--transition-fast); } .auth-footer a:hover { color: var(--accent-500); text-decoration: underline; } /* ============================================ AUTH ALERTS ============================================ */ .auth-alert { padding: var(--space-3) var(--space-4); border-radius: var(--radius-lg); font-size: var(--text-sm); margin-bottom: var(--space-3); } .auth-alert.error { background: var(--danger-light); color: var(--danger-dark); border: 1px solid var(--danger); } .auth-alert.success { background: var(--success-light); color: var(--success-dark); border: 1px solid var(--success); } .auth-alert .auth-alert-message { margin: 0; } .auth-assist-details { margin-top: var(--space-2); } .auth-assist-details summary { cursor: pointer; font-weight: var(--font-semibold); font-size: var(--text-xs); } .auth-assist-code { margin: var(--space-1) 0 0; font-size: var(--text-xs); opacity: 0.9; } /* Dark theme alerts */ .auth-page[data-theme="dark"] .auth-alert.error, .auth-page.dark-theme .auth-alert.error { background: rgba(239, 68, 68, 0.1); border-color: rgba(239, 68, 68, 0.3); color: #fca5a5; } .auth-page[data-theme="dark"] .auth-alert.success, .auth-page.dark-theme .auth-alert.success { background: rgba(34, 197, 94, 0.1); border-color: rgba(34, 197, 94, 0.3); color: #86efac; } /* ============================================ AUTH DIVIDER ============================================ */ .auth-divider { display: flex; align-items: center; gap: var(--space-2); margin: var(--space-2) 0; } .auth-divider::before, .auth-divider::after { content: ''; flex: 1; height: 1px; background: var(--border-default); } .auth-divider span { font-size: var(--text-xs); color: var(--text-muted); text-transform: uppercase; letter-spacing: var(--tracking-wide); } .auth-provider-btn { width: 100%; height: 46px; display: inline-flex; align-items: center; justify-content: center; gap: var(--space-3); border: 1px solid var(--border-default); border-radius: var(--radius-lg); text-decoration: none; color: var(--text-primary); background: var(--surface-secondary); font-weight: var(--font-semibold); transition: border-color var(--transition-fast), background-color var(--transition-fast), box-shadow var(--transition-fast); } .auth-provider-btn svg { width: 18px; height: 18px; flex-shrink: 0; } .auth-provider-btn:hover { border-color: color-mix(in srgb, var(--brand-primary) 30%, var(--border-default)); background: var(--interactive-hover); box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--brand-primary) 22%, transparent); } .auth-provider-btn:focus-visible { outline: none; border-color: color-mix(in srgb, var(--brand-primary) 32%, var(--border-default)); box-shadow: inset 0 0 0 2px rgba(251, 191, 36, 0.35); } .auth-oidc-notice { margin-bottom: var(--space-4); } .auth-oidc-title { margin: 0 0 var(--space-2); font-size: var(--text-base); font-weight: var(--font-semibold); } .auth-oidc-notice p { margin: 0 0 var(--space-2); } .auth-oidc-steps { font-size: var(--text-sm); color: inherit; } .auth-oidc-actions { display: flex; flex-wrap: wrap; gap: var(--space-2); margin-top: var(--space-2); } .auth-oidc-primary, .auth-oidc-secondary { min-height: 40px; display: inline-flex; align-items: center; justify-content: center; gap: var(--space-1); padding: 0 var(--space-3); border-radius: var(--radius-md); text-decoration: none; font-weight: var(--font-semibold); transition: transform var(--transition-fast), background-color var(--transition-fast), border-color var(--transition-fast); } .auth-oidc-primary { background: var(--surface-primary); border: 1px solid color-mix(in srgb, var(--danger) 40%, var(--border-default)); color: var(--danger-dark); } .auth-oidc-primary:hover { transform: translateY(-1px); background: color-mix(in srgb, var(--danger-light) 35%, var(--surface-primary)); } .auth-oidc-secondary { border: 1px dashed color-mix(in srgb, var(--danger) 45%, var(--border-default)); color: inherit; opacity: 0.95; } .auth-oidc-secondary span { font-size: var(--text-xs); font-weight: var(--font-medium); opacity: 0.9; } .auth-oidc-secondary:hover { transform: translateY(-1px); } .auth-login-content { opacity: 1; transform: translateY(0); max-height: 1200px; overflow: hidden; transition: opacity 180ms ease, transform 180ms ease, max-height 180ms ease; } .auth-login-content.is-collapsed { opacity: 0; transform: translateY(10px); max-height: 0; pointer-events: none; } .auth-login-content.is-revealing { animation: auth-login-reveal 180ms ease; } #oidc-login-notice { transition: opacity 180ms ease, transform 180ms ease; } #oidc-login-notice.is-dismissing { opacity: 0; transform: translateY(-10px); } @keyframes auth-login-reveal { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: translateY(0); } } /* ============================================ THEME TOGGLE ============================================ */ .auth-theme-toggle { position: absolute; top: var(--space-4); right: var(--space-4); z-index: 10; } .theme-toggle-btn { width: 40px; height: 40px; display: flex; align-items: center; justify-content: center; background: var(--surface-secondary); border: 1px solid var(--border-default); border-radius: var(--radius-lg); color: var(--text-secondary); cursor: pointer; transition: all var(--transition-fast); } .theme-toggle-btn:hover { background: var(--interactive-hover); color: var(--text-primary); } .theme-toggle-btn svg { width: 20px; height: 20px; } /* ============================================ BACK TO HOME ============================================ */ .auth-back { position: absolute; top: var(--space-4); left: var(--space-4); z-index: 10; } .auth-back a { display: flex; align-items: center; gap: var(--space-2); padding: var(--space-2) var(--space-3); font-size: var(--text-sm); color: var(--text-secondary); text-decoration: none; background: var(--surface-secondary); border: 1px solid var(--border-default); border-radius: var(--radius-lg); transition: all var(--transition-fast); } .auth-back a:hover { background: var(--interactive-hover); color: var(--text-primary); } .auth-back svg { width: 16px; height: 16px; } /* ============================================ RESPONSIVE ============================================ */ @media (max-width: 480px) { .auth-page { padding: var(--space-4); /* MOBILE FIX: Allinea al top e permette scroll naturale per raggiungere tutti gli elementi del form */ align-items: flex-start; padding-top: var(--space-8); padding-bottom: var(--space-8); min-height: 100vh; height: auto; } .auth-card { border-radius: var(--radius-xl); } .auth-header { padding: var(--space-3-5) var(--space-4) var(--space-2); } .auth-body { padding: 0 var(--space-4) var(--space-4); } .auth-footer { padding: var(--space-3) var(--space-4); } .auth-logo-icon { width: 40px; height: 40px; } .auth-logo-text { font-size: var(--text-xl); } .auth-title { font-size: clamp(1.25rem, 5vw, 1.5rem); } .auth-back, .auth-theme-toggle { position: fixed; } .auth-subtitle--desktop { display: none; } #password-strength-slot { --slot-open-height: 220px; } } @media (max-height: 760px) { .auth-subtitle--desktop { display: none; } } /* ============================================ PASSWORD VISIBILITY TOGGLE ============================================ */ .password-wrapper { position: relative; } .password-toggle { position: absolute; right: var(--space-2); top: 50%; transform: translateY(-50%); width: 40px; height: 40px; display: flex; align-items: center; justify-content: center; background: transparent; border: none; color: var(--text-muted); cursor: pointer; border-radius: var(--radius-md); transition: all var(--transition-fast); } .password-toggle:hover { color: var(--text-secondary); background: var(--interactive-hover); } .password-wrapper .form-input { padding-right: 52px; } .password-wrapper .field-status-icon { display: none; } /* Password strength meter */ .password-strength { margin-top: var(--space-3); } .password-strength-bar { width: 100%; height: 8px; border-radius: var(--radius-full); background: var(--surface-tertiary); overflow: hidden; border: 1px solid var(--border-subtle); } #password-strength-fill { display: block; height: 100%; width: 0; background: var(--danger); transition: width 180ms ease, background-color 180ms ease; } .password-strength-bar[data-level="medium"] #password-strength-fill { background: #f59e0b; } .password-strength-bar[data-level="strong"] #password-strength-fill { background: var(--success); } .password-strength-label { margin: var(--space-2) 0 0; font-size: var(--text-xs); color: var(--text-secondary); font-weight: var(--font-semibold); } .password-strength-label[data-level="weak"] { color: var(--danger); } .password-strength-label[data-level="medium"] { color: #d97706; } .password-strength-label[data-level="strong"] { color: var(--success); } .password-checklist { margin: var(--space-2) 0 0; padding-left: 18px; font-size: var(--text-xs); color: var(--text-tertiary); display: grid; gap: 4px; } .password-checklist li { list-style: disc; } .password-checklist li.is-passed { color: var(--success-dark); } .password-checklist li.is-failed { color: color-mix(in srgb, var(--danger-dark) 75%, var(--text-secondary)); } .password-checklist li.is-neutral { color: var(--text-tertiary); } .auth-progressive-slot { --slot-open-height: 168px; overflow: hidden; max-height: var(--slot-open-height); opacity: 1; transition: max-height 180ms ease, opacity 180ms ease; } .auth-progressive-slot.is-collapsed { max-height: 0; opacity: 0; pointer-events: none; } #password-strength-slot { --slot-open-height: 210px; } #confirm-password-slot { --slot-open-height: 146px; } /* ============================================ LOADING STATE ============================================ */ .auth-submit.loading { pointer-events: none; } .auth-submit__spinner { width: 16px; height: 16px; border: 2px solid rgba(24, 24, 27, 0.25); border-top-color: var(--neutral-900); border-radius: 50%; animation: spin 0.8s linear infinite; display: none; } .auth-submit.loading .auth-submit__spinner { display: inline-block; } @keyframes spin { to { transform: rotate(360deg); } } /* ============================================ FIREFOX FALLBACK - Prevent background pixelation ============================================ */ /* Firefox fallback: evita blur/backdrop che crea banding/pixelation */ @-moz-document url-prefix() { /* Disabilita TUTTI i filtri problematici */ .auth-ambient .glow, .auth-ambient .glow-1, .auth-ambient .glow-2 { filter: none !important; backdrop-filter: none !important; } /* Auth card in dark theme - rimuovi backdrop-filter */ .auth-page[data-theme="dark"] .auth-card, .auth-page.dark-theme .auth-card { backdrop-filter: none !important; -webkit-backdrop-filter: none !important; background: rgba(31, 31, 35, 0.95) !important; } /* Disabilita noise overlay che può causare problemi */ .auth-noise { display: none !important; } /* Rimuovi background-attachment fixed */ .auth-page { background-attachment: scroll !important; } /* Sostituzione completa dello sfondo con gradienti puliti */ .auth-page[data-theme="dark"], .auth-page.dark-theme { background: radial-gradient(ellipse at 20% 0%, rgba(251, 191, 36, 0.08) 0%, transparent 50%), radial-gradient(ellipse at 80% 100%, rgba(124, 58, 237, 0.05) 0%, transparent 50%), var(--neutral-925) !important; } .auth-page[data-theme="light"], .auth-page:not([data-theme]):not(.dark-theme) { background: radial-gradient(ellipse at 20% 0%, rgba(251, 191, 36, 0.04) 0%, transparent 50%), radial-gradient(ellipse at 80% 100%, rgba(124, 58, 237, 0.02) 0%, transparent 50%), var(--neutral-100) !important; } /* Disabilita completamente l'ambient container che causa problemi */ .auth-ambient { display: none !important; } } /* ============================================ FIREFOX FALLBACK ALTERNATIVO - Metodo universale ============================================ */ /* Fallback universale per tutti i browser che hanno problemi con i filtri */ @supports not (-webkit-backdrop-filter: blur(1px)) { .auth-ambient .glow, .auth-ambient .glow-1, .auth-ambient .glow-2 { filter: none !important; backdrop-filter: none !important; } .auth-page[data-theme="dark"] .auth-card, .auth-page.dark-theme .auth-card { backdrop-filter: none !important; -webkit-backdrop-filter: none !important; background: rgba(31, 31, 35, 0.95) !important; } .auth-noise { display: none !important; } .auth-ambient { display: none !important; } } /* ============================================ FIREFOX SPECIFIC FIX - Disabilita completamente gli effetti problematici ============================================ */ /* Fix specifico per Firefox usando @supports */ @supports (display: -moz-box) { .auth-ambient .glow { filter: none !important; backdrop-filter: none !important; } .auth-ambient .glow-1, .auth-ambient .glow-2 { filter: none !important; backdrop-filter: none !important; } .auth-page[data-theme="dark"] .auth-card, .auth-page.dark-theme .auth-card { backdrop-filter: none !important; -webkit-backdrop-filter: none !important; } .auth-noise { display: none !important; } /* Forza background pulito senza effetti */ .auth-page[data-theme="dark"], .auth-page.dark-theme { background: var(--neutral-925) !important; } .auth-page[data-theme="light"], .auth-page:not([data-theme]):not(.dark-theme) { background: var(--neutral-100) !important; } /* Disabilita completamente l'ambient container */ .auth-ambient { display: none !important; } }