/* ===================================================== Auth Pages Styles ===================================================== */ .auth-logo { text-align: center; margin-bottom: var(--spacing-xl); } .auth-logo h1 { font-size: var(--font-size-2xl); color: var(--color-primary); font-weight: var(--font-weight-bold); } .auth-logo p { color: var(--color-text-secondary); font-size: var(--font-size-sm); margin-top: var(--spacing-xs); } .auth-divider { display: flex; align-items: center; gap: var(--spacing-md); margin: var(--spacing-lg) 0; color: var(--color-text-muted); font-size: var(--font-size-sm); } .auth-divider::before, .auth-divider::after { content: ''; flex: 1; height: 1px; background-color: var(--color-border); } .auth-footer { text-align: center; margin-top: var(--spacing-lg); font-size: var(--font-size-sm); color: var(--color-text-secondary); } .auth-footer a { color: var(--color-primary); font-weight: var(--font-weight-medium); } .auth-footer a:hover { text-decoration: underline; } .password-toggle { position: absolute; right: 12px; top: 50%; transform: translateY(-50%); cursor: pointer; color: var(--color-text-muted); background: none; border: none; font-size: var(--font-size-sm); } .password-wrapper { position: relative; } .password-strength { height: 4px; border-radius: var(--radius-full); background-color: var(--color-bg); margin-top: var(--spacing-xs); overflow: hidden; } .password-strength-bar { height: 100%; border-radius: var(--radius-full); transition: width var(--transition-base), background-color var(--transition-base); } .password-strength-bar.weak { width: 25%; background-color: var(--color-danger); } .password-strength-bar.fair { width: 50%; background-color: var(--color-warning); } .password-strength-bar.good { width: 75%; background-color: var(--color-info); } .password-strength-bar.strong { width: 100%; background-color: var(--color-success); } /* ===================================================== Dark Neon theme (mesma identidade da landing page) Ativado com ===================================================== */ body.auth-dark { background: #060c06; /* Redefine as variáveis do tema para o dark (afeta textos/estilos inline) */ --color-text: #ddeedd; --color-text-secondary: #8aab8a; --color-text-muted: #587858; color: var(--color-text); } /* Grade de pontos + glow de fundo */ body.auth-dark .auth-layout { position: relative; } body.auth-dark .auth-layout::before { content: ''; position: fixed; inset: 0; background-image: radial-gradient(circle, rgba(74,222,128,0.09) 1px, transparent 1px); background-size: 36px 36px; -webkit-mask-image: radial-gradient(ellipse 80% 70% at 50% 45%, black 20%, transparent 80%); mask-image: radial-gradient(ellipse 80% 70% at 50% 45%, black 20%, transparent 80%); pointer-events: none; } body.auth-dark .auth-layout::after { content: ''; position: fixed; width: 700px; height: 700px; border-radius: 50%; background: radial-gradient(circle, rgba(74,222,128,0.06) 0%, transparent 65%); top: 50%; left: 50%; transform: translate(-50%, -50%); pointer-events: none; } body.auth-dark .auth-card { position: relative; z-index: 1; background: #0d180d; border: 1px solid rgba(74,222,128,0.15); border-radius: 20px; box-shadow: 0 16px 48px rgba(0,0,0,0.5); } /* Logo */ .auth-logo-img { height: 64px; width: auto; margin: 0 auto 10px; display: block; filter: drop-shadow(0 0 20px rgba(74,222,128,0.25)); } body.auth-dark .auth-logo p { color: #8aab8a; } /* Formulário */ body.auth-dark .form-label { color: #ddeedd; } body.auth-dark .form-input { background: #122012; border-color: rgba(74,222,128,0.18); color: #ddeedd; } body.auth-dark .form-input::placeholder { color: #587858; } body.auth-dark .form-input:focus { border-color: #4ade80; box-shadow: 0 0 0 3px rgba(74,222,128,0.15); background: #122012; } body.auth-dark .form-input.error { border-color: #f87171; } body.auth-dark .form-error { color: #f87171; } body.auth-dark .form-hint { color: #8aab8a; } body.auth-dark .password-toggle { color: #8aab8a; } body.auth-dark .password-strength { background-color: rgba(255,255,255,0.08); } /* Botão principal em verde neon */ body.auth-dark .btn-primary { background: #4ade80; border-color: #4ade80; color: #000; font-weight: 800; box-shadow: 0 0 22px rgba(74,222,128,0.25); transition: all 0.2s ease; } body.auth-dark .btn-primary:hover:not(:disabled) { background: #6ee89a; border-color: #6ee89a; box-shadow: 0 0 34px rgba(74,222,128,0.45); transform: translateY(-1px); } body.auth-dark .btn-primary:disabled { opacity: 0.7; } /* Links */ body.auth-dark .auth-card a { color: #4ade80; } body.auth-dark .auth-footer { color: #8aab8a; } body.auth-dark .auth-footer a { color: #4ade80; } body.auth-dark .auth-divider { color: #587858; } body.auth-dark .auth-divider::before, body.auth-dark .auth-divider::after { background-color: rgba(74,222,128,0.15); } /* Card de aceite dos Termos (register) em dark */ body.auth-dark .terms-box { background: #122012; border-color: rgba(74,222,128,0.18); } body.auth-dark .terms-box:hover { border-color: rgba(74,222,128,0.35); } body.auth-dark .terms-box.accepted { background: rgba(74,222,128,0.08); border-color: #4ade80; box-shadow: 0 0 0 3px rgba(74,222,128,0.15); } body.auth-dark .terms-check-ui { background: #0d180d; border-color: rgba(74,222,128,0.35); } body.auth-dark .terms-box.accepted .terms-check-ui { background: #4ade80; border-color: #4ade80; } body.auth-dark .terms-check-ui svg { stroke: #000; } body.auth-dark .terms-text { color: #ddeedd; } body.auth-dark .terms-text a { color: #4ade80; } body.auth-dark .terms-badge { color: #4ade80; } body.auth-dark .terms-box.terms-error-state { border-color: #f87171; box-shadow: 0 0 0 3px rgba(248,113,113,0.15); }