:root { --primary-color-rgb: 76, 69, 224; --auth-radius-sm: 14px; --auth-radius: 20px; --auth-radius-lg: 26px; --auth-accent: var(--primary-color, #4c45e0); --auth-accent-2: #22d3ee; --auth-accent-3: #a855f7; --auth-transition: all 0.3s ease; } /* ========================= LIGHT MODE ========================= */ [data-theme="light"] { --auth-bg: #eef4ff; --auth-bg-soft: #f7faff; --auth-surface: rgba(255, 255, 255, 0.88); --auth-surface-strong: rgba(255, 255, 255, 0.95); --auth-border: rgba(var(--primary-color-rgb), 0.14); --auth-border-strong: rgba(var(--primary-color-rgb), 0.24); --auth-text: #0f172a; --auth-text-soft: #475569; --auth-title: #081226; --auth-shadow: 0 14px 40px rgba(15, 23, 42, 0.07), 0 0 0 1px rgba(var(--primary-color-rgb), 0.05); --auth-glow: 0 0 0 1px rgba(var(--primary-color-rgb), 0.08), 0 0 24px rgba(var(--primary-color-rgb), 0.08), 0 0 36px rgba(34, 211, 238, 0.05); } /* ========================= DARK MODE ========================= */ [data-theme="dark"] { --auth-bg: #050814; --auth-bg-soft: #09111f; --auth-surface: rgba(11, 18, 36, 0.90); --auth-surface-strong: rgba(12, 20, 40, 0.96); --auth-border: rgba(34, 211, 238, 0.16); --auth-border-strong: rgba(var(--primary-color-rgb), 0.30); --auth-text: #e6f1ff; --auth-text-soft: #94a3b8; --auth-title: #ffffff; --auth-shadow: 0 18px 46px rgba(0, 0, 0, 0.34), 0 0 0 1px rgba(34, 211, 238, 0.07); --auth-glow: 0 0 0 1px rgba(var(--primary-color-rgb), 0.10), 0 0 24px rgba(var(--primary-color-rgb), 0.14), 0 0 44px rgba(34, 211, 238, 0.08); } /* ========================= PAGE BACKGROUND ========================= */ html, body { min-height: 100%; } body, .auth-container { background: radial-gradient(circle at top left, rgba(var(--primary-color-rgb), 0.14), transparent 24%), radial-gradient(circle at top right, rgba(34, 211, 238, 0.10), transparent 22%), radial-gradient(circle at bottom center, rgba(168, 85, 247, 0.08), transparent 26%), linear-gradient(180deg, var(--auth-bg) 0%, var(--auth-bg-soft) 100%); color: var(--auth-text) !important; } /* ========================= THEME TOGGLE ========================= */ .auth-theme-toggle { position: fixed; top: 18px; right: 18px; z-index: 1000; } .toggle-label { background: linear-gradient( 90deg, rgba(var(--primary-color-rgb), 0.18), rgba(34, 211, 238, 0.16) ) !important; border: 1px solid var(--auth-border); box-shadow: var(--auth-shadow); } /* ========================= AUTH CARD ========================= */ .auth-wrapper { max-width: 460px; width: 92vw !important; padding: 32px !important; border-radius: var(--auth-radius-lg); background: var(--auth-surface); border: 1px solid var(--auth-border); box-shadow: var(--auth-shadow); backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px); } .auth-wrapper:hover { box-shadow: var(--auth-glow), var(--auth-shadow); } /* ========================= LOGO / TITLES / TEXT ========================= */ .logo { filter: drop-shadow(0 0 12px rgba(var(--primary-color-rgb), 0.16)); } .auth-header .title, .auth-logo-text, .auth-wrapper h1, .auth-wrapper h2, .auth-wrapper h3 { color: var(--auth-title) !important; } .auth-header .description, .auth-terms, .auth-footer-line, .auth-wrapper p, .auth-wrapper small, .auth-wrapper label { color: var(--auth-text-soft) !important; } .auth-terms-link, .auth-footer-link, .auth-wrapper a { color: var(--auth-accent) !important; transition: var(--auth-transition); } .auth-terms-link:hover, .auth-footer-link:hover, .auth-wrapper a:hover { color: var(--auth-accent-2) !important; text-shadow: 0 0 12px rgba(var(--primary-color-rgb), 0.20); } /* ========================= INPUTS ========================= */ .form-control, input, select, textarea { background: rgba(255, 255, 255, 0.58) !important; border: 1px solid var(--auth-border) !important; color: var(--auth-text) !important; border-radius: var(--auth-radius-sm) !important; min-height: 52px; box-shadow: none !important; transition: var(--auth-transition); } [data-theme="dark"] .form-control, [data-theme="dark"] input, [data-theme="dark"] select, [data-theme="dark"] textarea { background: rgba(8, 15, 30, 0.92) !important; } .form-control:focus, input:focus, select:focus, textarea:focus { border-color: var(--auth-border-strong) !important; box-shadow: 0 0 0 3px rgba(var(--primary-color-rgb), 0.10), 0 0 18px rgba(var(--primary-color-rgb), 0.10) !important; outline: none !important; } .form-control::placeholder, input::placeholder, textarea::placeholder { color: var(--auth-text-soft) !important; } /* ========================= BUTTONS ========================= */ .auth-btn, .captcha-refresh, .btn.btn-secondary, .btn-primary, button { background: linear-gradient(90deg, var(--auth-accent-2), var(--auth-accent)) !important; border: none !important; color: #08101d !important; border-radius: var(--auth-radius-sm) !important; font-weight: 700; box-shadow: 0 0 14px rgba(var(--primary-color-rgb), 0.20), 0 0 28px rgba(34, 211, 238, 0.14); transition: var(--auth-transition); } .auth-btn:hover, .captcha-refresh:hover, .btn.btn-secondary:hover, .btn-primary:hover, button:hover { transform: translateY(-2px); box-shadow: 0 0 18px rgba(var(--primary-color-rgb), 0.24), 0 0 34px rgba(34, 211, 238, 0.18); } /* ========================= CAPTCHA / SMALL BLOCKS ========================= */ .captcha-text { background: rgba(var(--primary-color-rgb), 0.08) !important; border: 1px solid var(--auth-border) !important; color: var(--auth-text) !important; border-radius: var(--auth-radius-sm); } /* ========================= CHECKBOX / HELPERS ========================= */ .form-check-label, .remember-text { color: var(--auth-text-soft) !important; } /* ========================= MOBILE ========================= */ @media (max-width: 575px) { .auth-wrapper { padding: 24px !important; border-radius: 20px; } .auth-theme-toggle { top: 12px; right: 12px; } }