:root { color-scheme: dark; font-family: system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif; color: #edf0f7; background: #080b13; }
* { box-sizing: border-box; }
[hidden] { display: none !important; }
body { margin: 0; min-height: 100vh; min-height: 100svh; display: grid; place-items: center; padding: 32px 18px; background: radial-gradient(ellipse at 25% 10%, #392b672e, transparent 55%), radial-gradient(ellipse at 90% 90%, #17485826, transparent 55%), #080b13; }
.login-shell { width: min(100%, 420px); }
.login-brand { display: flex; align-items: center; justify-content: center; gap: 11px; margin-bottom: 26px; color: #f2f4f8; text-decoration: none; font-size: 20px; letter-spacing: -.6px; font-weight: 700; }
.login-brand strong { color: #b7a5ed; font-weight: 500; }
.login-card { border: 1px solid #ffffff12; border-radius: 16px; padding: 28px; background: linear-gradient(150deg, #181d2c, #101520); box-shadow: 0 22px 80px #0005; }
.login-mark { width: 44px; height: 44px; display: grid; place-items: center; color: #c4afff; background: #8b5cf619; border: 1px solid #a78bfa26; border-radius: 13px; margin-bottom: 22px; }
.login-mark svg { width: 23px; height: 23px; }
.login-card-heading { display: flex; align-items: center; justify-content: space-between; gap: 16px; margin-bottom: 22px; }
.login-card-heading .login-mark { margin-bottom: 0; }
.login-theme-toggle { width: 42px; height: 42px; display: grid; place-items: center; padding: 0; border: 1px solid #a78bfa26; border-radius: 12px; background: #8b5cf60b; color: #c4afff; cursor: pointer; }
.login-theme-toggle:hover { background: #8b5cf61c; border-color: #a78bfa55; }
h1 { font-size: 23px; line-height: 1.2; letter-spacing: -.8px; margin: 0 0 9px; }
.login-description { font-size: 13px; line-height: 1.6; color: #939cb0; margin: 0 0 27px; }
label { display: block; font-size: 12px; color: #c7cede; font-weight: 600; margin: 0 0 9px; }
input { width: 100%; font: inherit; font-size: 14px; color: #f2f4f8; background: #090e18; border: 1px solid #ffffff15; border-radius: 10px; outline: none; padding: 13px 14px; transition: border-color .15s, box-shadow .15s; }
input:focus { border-color: #a78bfa; box-shadow: 0 0 0 3px #a78bfa14; }
input::placeholder { color: #586278; }
#loginEmail, #signupEmail, .signup-password-field { margin-bottom: 18px; }
.field-hint { float: right; font-size: 10px; color: #939cb0; font-weight: 400; }
.password-field { position: relative; }
.password-field input { padding-right: 48px; }
.password-toggle { position: absolute; right: 5px; top: 4px; width: 38px; height: 38px; display: grid; place-items: center; border: 0; border-radius: 7px; background: transparent; color: #8590a6; cursor: pointer; }
.password-toggle:hover { background: #ffffff07; color: #c7cede; }
.password-toggle svg { width: 19px; height: 19px; }
.login-error { font-size: 12px; line-height: 1.5; color: #fca5a5; min-height: 18px; margin: 15px 0 12px; }
.login-success { margin: -10px 0 20px; padding: 10px 12px; border: 1px solid #6ee7b72e; border-radius: 10px; background: #10b9810c; color: #a7f3d0; font-size: 12px; line-height: 1.6; }
.login-submit { width: 100%; display: flex; justify-content: center; align-items: center; gap: 12px; padding: 13px; font: inherit; font-size: 14px; font-weight: 650; border: 1px solid #c4b5fd20; border-radius: 10px; background: #8b5cf6; color: white; cursor: pointer; transition: background .15s; }
.login-submit:hover { background: #986cf8; }
.login-submit:disabled { cursor: wait; opacity: .65; }
.auth-mode { display: flex; justify-content: center; flex-wrap: wrap; gap: 4px 6px; margin: 20px 0 0; padding-top: 18px; border-top: 1px solid #ffffff0c; color: #939cb0; font-size: 12px; line-height: 1.7; }
.auth-mode button { border: 0; padding: 0; background: transparent; color: #c4afff; font: inherit; font-weight: 600; cursor: pointer; }
.auth-mode button:hover { color: #e3d8ff; text-decoration: underline; }
.auth-mode button:disabled { opacity: .65; cursor: wait; }
button:focus-visible, a:focus-visible { outline: 2px solid #c4b5fd; outline-offset: 3px; }
.login-footer { font-size: 11px; color: #626d82; text-align: center; margin: 23px 0 0; }
.google-continue { width:100%; min-height:44px; padding:10px 14px; display:flex; align-items:center; justify-content:center; gap:10px; border:1px solid #ffffff24; border-radius:10px; background:#ffffff07; color:#edf0f7; font:inherit; font-size:13px; font-weight:600; cursor:pointer; }
.google-continue:hover:not(:disabled) { background:#ffffff0d; border-color:#ffffff40; }
.google-continue:disabled { opacity:.5; cursor:default; }
.google-mark { font-size:19px; font-weight:750; color:#70a7ff; }
.google-hint { margin:8px 0 0; font-size:10px; line-height:1.6; text-align:center; color:#939cb0; }
.auth-divider { display:flex; align-items:center; gap:10px; margin:18px 0; font-size:10px; color:#939cb0; }
.auth-divider::before, .auth-divider::after { content:''; height:1px; background:#ffffff12; flex:1; }
@media (max-width: 420px) { body { padding: 24px 16px; } .login-card { padding: 24px 20px; } .login-brand { font-size: 18px; margin-bottom: 20px; } input { font-size: 16px; } .field-hint { float: none; display: block; margin-top: 4px; } }
@media (prefers-reduced-motion: reduce) { * { transition: none !important; } }

:root[data-theme="light"] { color-scheme: light; color: #182338; background: #f4f6fb; }
[data-theme="light"] body { background: radial-gradient(ellipse at 25% 10%, #8b5cf615, transparent 55%), radial-gradient(ellipse at 90% 90%, #0ea5e912, transparent 55%), #f4f6fb; }
[data-theme="light"] .login-brand { color: #182338; }
[data-theme="light"] .login-brand strong { color: #7250b7; }
[data-theme="light"] .login-card { background: linear-gradient(150deg, #fff, #f9faff); border-color: #dce2ee; box-shadow: 0 22px 70px #33415512; }
[data-theme="light"] .login-mark, [data-theme="light"] .login-theme-toggle { color: #7551c4; background: #8b5cf60e; border-color: #8b5cf62b; }
[data-theme="light"] .login-theme-toggle:hover { background: #8b5cf61a; border-color: #8b5cf65a; }
[data-theme="light"] .login-description, [data-theme="light"] .field-hint, [data-theme="light"] .auth-mode { color: #66738a; }
[data-theme="light"] label { color: #44516a; }
[data-theme="light"] input { color: #182338; background: #fff; border-color: #d9e0ec; }
[data-theme="light"] input:focus { border-color: #8b5cf6; box-shadow: 0 0 0 3px #8b5cf615; }
[data-theme="light"] input::placeholder { color: #8893a6; }
[data-theme="light"] .password-toggle { color: #66738a; }
[data-theme="light"] .password-toggle:hover { background: #8b5cf60c; color: #7250b7; }
[data-theme="light"] .login-error { color: #b42335; }
[data-theme="light"] .login-success { color: #047857; background: #10b9810b; border-color: #10b98132; }
[data-theme="light"] .auth-mode { border-color: #dce2ee; }
[data-theme="light"] .auth-mode button { color: #7551c4; }
[data-theme="light"] .auth-mode button:hover { color: #5d35a8; }
[data-theme="light"] .login-footer { color: #78849a; }