:root {
    color-scheme: dark;
    font-family: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
    font-synthesis: none;
    color: var(--login-ink);
    background: var(--login-bg);
    --login-ink: #edf1f7;
    --login-bg: #0c1017;
    --login-card: #151b25;
    --login-input: #101620;
    --login-border: #2b3544;
    --login-label: #ced6e2;
    --login-muted: #98a6ba;
    --login-accent: #91b8f8;
}
* { box-sizing: border-box; }
body { margin: 0; min-width: 280px; }
button, input { font: inherit; }
a { color: inherit; }
button, a, input { -webkit-tap-highlight-color: transparent; }
button:focus-visible, a:focus-visible { outline: 2px solid #baaaff; outline-offset: 5px; }
[hidden] { display: none !important; }
.login-shell { min-height: 100vh; min-height: 100svh; display: flex; flex-direction: column; isolation: isolate; position: relative; overflow: hidden; justify-content: center; gap: 16px; padding: 28px 18px; background: var(--login-bg); }
.ambient-light { display: none; position: absolute; z-index: -1; pointer-events: none; width: min(70vw, 760px); aspect-ratio: 1; border-radius: 50%; filter: blur(70px); opacity: .08; animation: ambient-drift 18s ease-in-out infinite alternate; }
.ambient-light-one { top: -310px; left: -150px; background: radial-gradient(circle, #6550b3, transparent 65%); }
.ambient-light-two { bottom: -320px; right: -150px; background: radial-gradient(circle, #304f8b, transparent 65%); animation-delay: -9s; }
.background-grid { position: absolute; inset: 0; z-index: -1; pointer-events: none; background-image: linear-gradient(#ffffff04 1px, transparent 1px), linear-gradient(90deg, #ffffff04 1px, transparent 1px); background-size: 64px 64px; mask-image: radial-gradient(ellipse at center, #000, transparent 75%); }
.login-topbar { display: flex; align-items: center; justify-content: space-between; gap: 20px; width: 100%; max-width: 460px; margin-inline: auto; padding: 0 4px; }
.brand { display: inline-flex; align-items: center; gap: 11px; text-decoration: none; font-size: 20px; font-weight: 650; letter-spacing: -.6px; }
.brand-mark { display: grid; place-items: center; width: 38px; height: 38px; border-radius: 12px; background: #4c7bcd16; border: 1px solid #4c7bcd35; color: var(--login-accent); box-shadow: inset 0 1px #ffffff10; }
.brand-mark svg { width: 24px; height: 24px; }
.language-switcher { display: flex; align-items: center; gap: 3px; padding: 4px; border: 1px solid #ffffff0f; border-radius: 11px; background: #ffffff03; }
.language-link { padding: 8px 12px; font-size: 11px; font-weight: 500; border-radius: 7px; text-decoration: none; color: var(--login-muted); transition: color .2s, background .2s; }
.language-link:hover { color: #fff; background: #ffffff08; }
.language-link.active { color: var(--login-accent); background: #6599ee16; box-shadow: inset 0 0 0 1px #6599ee20; }
.signin-panel { display: grid; place-items: center; padding: 0; }
.signin-content { position: relative; width: 100%; max-width: 460px; padding: 26px 28px 22px; border-radius: 12px; border: 1px solid var(--login-border); background: var(--login-card); backdrop-filter: blur(28px); -webkit-backdrop-filter: blur(28px); box-shadow: 0 16px 48px #00000040; animation: card-enter .8s cubic-bezier(.2,.7,.2,1) both; }
.signin-content::before { display: none; content: ""; pointer-events: none; position: absolute; top: -1px; left: 18%; right: 18%; height: 1px; background: linear-gradient(90deg, transparent, #b6a4ff90, transparent); }
.signin-icon { display: grid; place-items: center; width: 54px; height: 54px; margin: 0 auto 14px; border-radius: 17px; color: #cabfff; background: linear-gradient(145deg, #ae99ff20, #ae99ff08); border: 1px solid #c5b4ff24; box-shadow: 0 0 32px #a389ff0b, inset 0 1px #ffffff10; }
.signin-icon svg { width: 25px; height: 25px; }
.signin-header { text-align: left; }
.signin-eyebrow { font-size: 9px; font-weight: 600; letter-spacing: 2px; color: #9c93bd; }
.signin-header h1 { margin: 0 0 6px; font-size: 28px; font-weight: 650; line-height: 1.25; letter-spacing: -1.1px; }
.signin-header p { color: var(--login-muted); font-size: 13px; line-height: 1.7; margin: 0 0 22px; }
.login-form .input { margin-bottom: 16px; }
.login-form label { display: block; font-size: 12px; font-weight: 500; color: var(--login-label); line-height: 18px; margin-bottom: 9px; }
.form-control { width: 100%; min-height: 50px; padding: 14px; border-radius: 10px; border: 1px solid var(--login-border); background: var(--login-input); color: var(--login-ink); font-size: 13px; transition: border-color .2s, box-shadow .2s, background .2s; }
.form-control::placeholder { color: #7f839c; }
.form-control:hover { border-color: #ffffff25; }
.form-control:focus { outline: none; border-color: #7299df; background: var(--login-input); box-shadow: 0 0 0 3px #5d8de51a; }
.form-control:-webkit-autofill { -webkit-text-fill-color: var(--login-ink); -webkit-box-shadow: 0 0 0 1000px #141623 inset; caret-color: var(--login-ink); }
.password-group { position: relative; }
.password-input { padding-right: 78px; }
.toggle-password { position: absolute; right: 7px; top: 33px; min-height: 36px; padding: 8px 10px; font-size: 11px; color: var(--login-accent); background: transparent; border: 0; border-radius: 6px; cursor: pointer; }
.toggle-password:hover { color: #ded5ff; background: #b3a0ff0b; }
.btn-submit { width: 100%; min-height: 50px; display: flex; align-items: center; justify-content: center; gap: 12px; margin-top: 7px; padding: 14px 18px; border: 1px solid #4f7cd0; border-radius: 10px; background: #3569c7; color: #f4f5ff; font-size: 13px; font-weight: 650; box-shadow: inset 0 1px #ffffff08; cursor: pointer; transition: transform .2s, box-shadow .2s, filter .2s; }
.btn-submit span { font-size: 20px; font-weight: 400; line-height: 1; transition: transform .2s; }
.btn-submit:hover { filter: brightness(1.08); transform: translateY(-1px); box-shadow: 0 4px 16px #00000030; }
.btn-submit:hover span { transform: translateX(3px); }
.btn-submit:active { transform: translateY(0); }
.signin-help { margin: 18px 0 0; padding-top: 16px; border-top: 1px solid #ffffff0b; color: #9497ae; font-size: 11px; line-height: 1.9; text-align: center; }
.signin-footer { width: 100%; max-width: 460px; margin-inline: auto; padding: 0 4px; display: flex; flex-direction: column; align-items: center; gap: 4px; text-align: center; color: #777c95; font-size: 10px; line-height: 1.7; }
.footer-modules { letter-spacing: .5px; }
.login-messages .message, .error-message { margin-bottom: 16px; padding: 12px 14px; font-size: 12px; line-height: 1.6; border-radius: 9px; background: #a395ff15; border: 1px solid #a395ff25; color: #d9d0ff; overflow-wrap: anywhere; }
.login-messages .error, .error-message { color: #ffc0cf; background: #ee7c9610; border-color: #ee7c9625; }
.login-messages .success { color: #a6e4d0; background: #72d4ac10; border-color: #72d4ac25; }
.login-messages .hidden { display: none; }
@keyframes card-enter { from { opacity: 0; transform: translateY(16px); } to { opacity: 1; transform: translateY(0); } }
@keyframes ambient-drift { from { transform: translate3d(0, 0, 0); } to { transform: translate3d(70px, 45px, 0); } }
@media (max-width: 600px) { .login-shell { padding: 24px 18px; gap: 14px; }.brand { font-size: 18px; }.brand-mark { width: 32px; height: 32px; border-radius: 10px; }.language-link { padding: 7px 9px; }.signin-content { padding: 24px; }.ambient-light { display: none; width: 500px; opacity: .06; } }
@media (max-width: 360px) { .login-shell { padding-inline: 14px; }.login-topbar { gap: 8px; }.brand { gap: 7px; font-size: 16px; }.language-link { padding-inline: 7px; }.signin-content { padding-inline: 20px; }.signin-header h1 { font-size: 26px; } }
@media (prefers-reduced-motion: reduce) { *, *::before, *::after { animation: none !important; transition: none !important; } }

.login-actions { display: flex; align-items: center; gap: 8px; }
.icon-button { display: grid; place-items: center; width: 38px; height: 38px; border: 1px solid var(--login-border); border-radius: 9px; color: var(--login-accent); background: var(--login-card); cursor: pointer; transition: background .2s; flex-shrink: 0; }
.icon-button:hover { background: #6498ed18; }
.icon-button svg { width: 18px; height: 18px; }
.icon-button span { display: grid; place-items: center; }
.theme-toggle .theme-icon-sun, :root.dark-mode .theme-toggle .theme-icon-moon { display: none; }
:root.dark-mode .theme-toggle .theme-icon-sun { display: grid; }
:root:not(.dark-mode) { color-scheme: light; --login-ink: #1d293b; --login-bg: #edf1f6; --login-card: #fff; --login-input: #f8fafc; --login-border: #d9e1ec; --login-label: #35445c; --login-muted: #64748b; --login-accent: #285caf; }
:root:not(.dark-mode) .form-control:-webkit-autofill { -webkit-text-fill-color: #1d293b; -webkit-box-shadow: 0 0 0 1000px #f8fafc inset; caret-color: #1d293b; }
:root:not(.dark-mode) .signin-help { border-color: var(--login-border); color: var(--login-muted); }
:root:not(.dark-mode) .language-switcher { border-color: var(--login-border); }
:root:not(.dark-mode) .language-link:hover { color: #285caf; background: #eaf0fa; }
:root:not(.dark-mode) .login-messages .error, :root:not(.dark-mode) .error-message { color: #a32940; background: #fff0f3; border-color: #e7b9c3; }
:root:not(.dark-mode) .login-messages .success { color: #22664f; background: #edf9f3; border-color: #b9dccb; }
@media (max-width: 360px) { .login-topbar { flex-wrap: wrap; }.login-actions { margin-left: auto; }.language-link { padding-inline: 6px; } }