:root {
    --bg: #0b1020;
    --bg-top: #1b2a59;
    --panel: #141b33;
    --panel-border: #293766;
    --text: #f2f5ff;
    --muted: #9aa8d8;
    --primary: #5d8bff;
    --primary-hover: #4e79e6;
    --accent: var(--primary);
    --accent-hover: var(--primary-hover);
    --danger: #f87171;
    --ok: #22c55e;
    --surface-elevated: #0f1732;
    --surface-soft: rgba(0, 0, 0, 0.15);
    --surface-input: #0d1530;
    --label-text: #d8e1ff;
    --card-shadow: 0 18px 40px rgba(0, 0, 0, 0.35);
}

html[data-theme="dark-corporate"],
html[data-theme="default"] {
    --bg: #0b1020;
    --bg-top: #1b2a59;
    --panel: #141b33;
    --panel-border: #293766;
    --text: #f2f5ff;
    --muted: #9aa8d8;
    --primary: #5d8bff;
    --primary-hover: #4e79e6;
    --accent: var(--primary);
    --accent-hover: var(--primary-hover);
    --danger: #f87171;
    --ok: #22c55e;
}

html[data-theme="dark-ocean"],
html[data-theme="ocean"] {
    --bg: #081923;
    --bg-top: #123748;
    --panel: #102833;
    --panel-border: #2b586e;
    --text: #eaf7ff;
    --muted: #9bc0d2;
    --primary: #2e7fae;
    --primary-hover: #276d95;
    --accent: var(--primary);
    --accent-hover: var(--primary-hover);
    --danger: #f18484;
    --ok: #2aaa75;
}

html[data-theme="dark-forest"],
html[data-theme="forest"] {
    --bg: #0a1711;
    --bg-top: #1a3b2d;
    --panel: #12261d;
    --panel-border: #335c49;
    --text: #ecfff5;
    --muted: #9fc8b6;
    --primary: #2f8e66;
    --primary-hover: #287a57;
    --accent: var(--primary);
    --accent-hover: var(--primary-hover);
    --danger: #ef8686;
    --ok: #2db775;
}

html[data-theme="dark-slate"],
html[data-theme="slate"] {
    --bg: #111317;
    --bg-top: #252b36;
    --panel: #1a1f28;
    --panel-border: #3b4658;
    --text: #f1f4f9;
    --muted: #a7b0bf;
    --primary: #346ec8;
    --primary-hover: #2d5fae;
    --accent: var(--primary);
    --accent-hover: var(--primary-hover);
    --danger: #f08989;
    --ok: #31b37c;
}

html[data-theme="light-corporate"],
html[data-theme="light-paper"] {
    --bg: #f3f6fb;
    --bg-top: #dde7f5;
    --panel: #f8fbff;
    --panel-border: #d2dbe8;
    --text: #2a3a4c;
    --muted: #6d7f97;
    --primary: #2b67a4;
    --primary-hover: #245b93;
    --accent: var(--primary);
    --accent-hover: var(--primary-hover);
    --danger: #c63d4d;
    --ok: #1f8a58;
    --surface-elevated: #ffffff;
    --surface-soft: #eef3fb;
    --surface-input: #ffffff;
    --label-text: #5a6b83;
    --card-shadow: 0 14px 28px rgba(25, 42, 66, 0.12);
}

html[data-theme="light-ocean"],
html[data-theme="light-sky"] {
    --bg: #f1f8ff;
    --bg-top: #dcedfe;
    --panel: #f7fcff;
    --panel-border: #c8d9e8;
    --text: #2a3f54;
    --muted: #6a859d;
    --primary: #2a6f9f;
    --primary-hover: #24618e;
    --accent: var(--primary);
    --accent-hover: var(--primary-hover);
    --danger: #c8424f;
    --ok: #1f8f5f;
    --surface-elevated: #ffffff;
    --surface-soft: #eaf4fd;
    --surface-input: #ffffff;
    --label-text: #56718a;
    --card-shadow: 0 14px 28px rgba(26, 59, 92, 0.11);
}

html[data-theme="light-forest"],
html[data-theme="light-mint"] {
    --bg: #f2faf6;
    --bg-top: #dff1e8;
    --panel: #fbfefd;
    --panel-border: #c8d9d2;
    --text: #2b443c;
    --muted: #638075;
    --primary: #2a765f;
    --primary-hover: #236754;
    --accent: var(--primary);
    --accent-hover: var(--primary-hover);
    --danger: #b94554;
    --ok: #1f8f5f;
    --surface-elevated: #ffffff;
    --surface-soft: #e8f4ef;
    --surface-input: #ffffff;
    --label-text: #54766a;
    --card-shadow: 0 14px 28px rgba(25, 74, 54, 0.11);
}

html[data-theme="light-slate"] {
    --bg: #f3f5f8;
    --bg-top: #e3e7ee;
    --panel: #ffffff;
    --panel-border: #c0c9d7;
    --text: #243041;
    --muted: #617086;
    --primary: #365a8f;
    --primary-hover: #2f4e7b;
    --accent: var(--primary);
    --accent-hover: var(--primary-hover);
    --danger: #be4a58;
    --ok: #2a8a63;
    --surface-elevated: #ffffff;
    --surface-soft: #eef1f6;
    --surface-input: #ffffff;
    --label-text: #56657a;
    --card-shadow: 0 14px 28px rgba(34, 50, 74, 0.10);
}

* {
    box-sizing: border-box;
}

body {
    margin: 0;
    min-height: 100vh;
    font-family: "Segoe UI", Tahoma, Geneva, Verdana, sans-serif;
    background: radial-gradient(circle at top, var(--bg-top), var(--bg) 50%);
    color: var(--text);
    display: grid;
    place-items: center;
    padding: 1.5rem;
}

.card {
    width: 100%;
    max-width: 420px;
    background: var(--surface-elevated);
    border: 1px solid var(--panel-border);
    border-radius: 14px;
    padding: 1.5rem;
    box-shadow: var(--card-shadow);
}

h1 {
    margin: 0 0 .5rem 0;
    font-size: 1.5rem;
}

.brand-logo {
    display: block;
    max-width: 180px;
    width: 100%;
    height: auto;
    margin: 0 auto .85rem auto;
}

p.subtitle {
    margin: 0 0 1.25rem 0;
    color: var(--muted);
    text-align: center;
}

label {
    display: block;
    margin-bottom: .4rem;
    color: var(--label-text);
}

input {
    width: 100%;
    border: 1px solid var(--panel-border);
    background: var(--surface-input);
    color: var(--text);
    border-radius: 10px;
    padding: .75rem .85rem;
    margin-bottom: 1rem;
}

.password-field {
    position: relative;
    margin-bottom: 1rem;
}

.password-field input {
    padding-right: 2.8rem;
    margin-bottom: 0;
}

.password-toggle-btn {
    position: absolute;
    top: 50%;
    right: .45rem;
    transform: translateY(-50%);
    width: 2rem;
    height: 2rem;
    border: 0;
    border-radius: 999px;
    padding: 0;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: transparent;
    color: var(--muted);
}

.password-toggle-btn:hover {
    background: color-mix(in srgb, var(--panel-border) 35%, transparent);
}

.password-toggle-icon {
    width: 1.05rem;
    height: 1.05rem;
    display: block;
}

.login-extra-actions {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: .45rem 1rem;
    margin-top: .9rem;
    padding-top: .65rem;
    border-top: 1px solid color-mix(in srgb, var(--panel-border) 70%, transparent);
}

.recover-panel {
    margin-top: .35rem;
}

.recover-title {
    margin: 0 0 .35rem 0;
    font-size: 1.2rem;
}

.recover-subtitle {
    margin: 0 0 1rem 0;
    color: var(--muted);
    font-size: .9rem;
    line-height: 1.45;
}

.recover-actions {
    margin-top: .75rem;
    text-align: center;
}

#recover-confirm-form {
    margin-top: .85rem;
    padding-top: .9rem;
    border-top: 1px solid color-mix(in srgb, var(--panel-border) 70%, transparent);
}

.security-code-box {
    border: 1px solid var(--panel-border);
    border-radius: 10px;
    background: var(--surface-soft);
    padding: .72rem;
    display: grid;
    gap: .42rem;
    margin-bottom: .95rem;
}

.security-code-title {
    margin: 0;
    font-size: .9rem;
    font-weight: 700;
    color: var(--text);
}

.security-code-hint {
    margin: 0;
    font-size: .82rem;
    color: var(--muted);
    line-height: 1.4;
}

.security-code-label {
    margin: .1rem 0 0 0;
}

.security-code-input {
    margin-bottom: 0;
}

.security-code-actions {
    margin-top: .1rem;
}

.mfa-remember-option {
    display: flex;
    align-items: center;
    gap: .5rem;
    margin: .35rem 0 .85rem;
    color: var(--muted);
    font-size: .84rem;
    user-select: none;
}

.mfa-remember-option input[type="checkbox"] {
    width: auto;
    margin: 0;
    accent-color: var(--accent);
}

.mfa-method-switch {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: .45rem;
    margin: .1rem 0 .65rem;
}

.mfa-method-btn {
    width: 100%;
    border: 1px solid var(--panel-border);
    border-radius: 10px;
    background: var(--surface-muted);
    color: var(--text);
    padding: .55rem .6rem;
    font-size: .82rem;
    font-weight: 600;
    cursor: pointer;
}

.mfa-method-btn.is-active {
    border-color: color-mix(in srgb, var(--accent) 60%, var(--panel-border));
    background: color-mix(in srgb, var(--accent) 12%, transparent);
    color: var(--accent);
}

.mfa-email-send-link {
    margin-top: .2rem;
    margin-bottom: .2rem;
    justify-self: start;
}

.auth-divider {
    display: flex;
    align-items: center;
    gap: .75rem;
    margin: 1rem 0;
    color: var(--muted);
    font-size: .78rem;
    text-transform: uppercase;
    letter-spacing: .08em;
}

.auth-divider::before,
.auth-divider::after {
    content: "";
    flex: 1 1 auto;
    height: 1px;
    background: color-mix(in srgb, var(--panel-border) 72%, transparent);
}

.oauth-slot-wrap {
    width: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
    min-height: 44px;
}

.oauth-slot-wrap[hidden] {
    display: none !important;
}

.oauth-slot-wrap > [data-google-button] {
    width: 100%;
    display: flex;
    justify-content: center;
}

.oauth-slot-wrap > .g_id_signin {
    display: block;
    max-width: 100%;
}

.oauth-slot-wrap iframe {
    display: block;
}

.oauth-signup-box {
    margin-bottom: .2rem;
}

.oauth-alt-actions {
    margin: .5rem 0 .85rem;
    text-align: center;
}

.oauth-fallback {
    margin: .55rem 0 0;
    color: var(--muted);
    font-size: .78rem;
    text-align: center;
}

.oauth-fallback a {
    color: var(--accent);
    font-weight: 600;
}

.oauth-fallback-compat {
    margin-top: .1rem;
    font-size: .78rem;
    text-align: center;
}

.oauth-fallback-link-cta {
    min-height: 44px;
    width: 100%;
    max-width: 340px;
    margin: 0 auto;
    padding: .58rem .95rem;
    border-radius: 999px;
    border: 1px solid color-mix(in srgb, var(--panel-border) 75%, transparent);
    background: #fff;
    color: #1f1f1f;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: .6rem;
    font-size: .89rem;
    font-weight: 600;
    line-height: 1.2;
    text-decoration: none;
    box-shadow: 0 1px 2px rgba(0, 0, 0, .08);
    transition: border-color .15s ease, box-shadow .15s ease, background-color .15s ease;
}

.oauth-fallback-link-cta:hover {
    border-color: color-mix(in srgb, var(--accent) 40%, var(--panel-border));
    box-shadow: 0 2px 6px rgba(0, 0, 0, .12);
    background: color-mix(in srgb, #fff 92%, var(--surface-muted));
}

.oauth-fallback-link-cta:focus-visible {
    outline: 2px solid color-mix(in srgb, var(--accent) 50%, transparent);
    outline-offset: 2px;
}

.oauth-fallback-link-label {
    display: inline-block;
}

.oauth-google-icon {
    width: 18px;
    height: 18px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex: 0 0 18px;
}

.oauth-google-icon svg {
    width: 18px;
    height: 18px;
    display: block;
}

body.google-compat-mode .auth-divider {
    margin: .55rem 0 .2rem;
}

.link-btn {
    border: 0;
    background: transparent;
    color: var(--muted);
    padding: .2rem 0;
    font-size: .82rem;
    font-weight: 600;
    cursor: pointer;
    text-decoration: underline;
    text-decoration-thickness: 1px;
    text-underline-offset: 3px;
}

.link-btn:hover {
    color: var(--accent);
}

.link-btn:focus-visible {
    outline: 2px solid color-mix(in srgb, var(--accent) 55%, transparent);
    outline-offset: 2px;
    border-radius: 4px;
}

button:not(.password-toggle-btn):not(.link-btn):not(.mfa-method-btn) {
    width: 100%;
    border: 0;
    border-radius: 10px;
    padding: .8rem 1rem;
    background: var(--primary);
    color: white;
    font-weight: 600;
    cursor: pointer;
}

button:not(.password-toggle-btn):not(.link-btn):not(.mfa-method-btn):hover {
    background: var(--primary-hover);
}

button:not(.password-toggle-btn):not(.link-btn):not(.mfa-method-btn):disabled {
    opacity: .6;
    cursor: not-allowed;
}

.status {
    margin-top: 1rem;
    min-height: 1.25rem;
    font-size: .95rem;
}

.status[hidden] {
    display: none !important;
}

.status.error {
    color: var(--danger);
}

.status.success {
    color: var(--ok);
}

.meta-footer {
    margin-top: 1rem;
    text-align: center;
}

#app-meta {
    color: #7f8cb8;
    letter-spacing: .02em;
    font-size: .72rem;
    opacity: .9;
}

.login-alert-dialog {
    border: 1px solid var(--panel-border);
    border-radius: 14px;
    background: var(--surface-elevated);
    color: var(--text);
    box-shadow: var(--card-shadow);
    max-width: min(460px, calc(100vw - 2rem));
    width: 100%;
    padding: 0;
}

.login-alert-dialog::backdrop {
    background: rgba(7, 10, 20, 0.65);
    backdrop-filter: blur(2px);
}

.login-alert-dialog-inner {
    margin: 0;
    padding: 1.2rem 1.2rem 1rem;
}

.login-alert-dialog-inner h2 {
    margin: 0 0 .45rem;
    font-size: 1.1rem;
}

.login-alert-dialog-message {
    margin: 0;
    line-height: 1.45;
    color: var(--muted);
}

.login-alert-dialog-message.is-success {
    color: var(--ok);
}

.login-alert-dialog-message.is-error {
    color: var(--danger);
}

.login-alert-dialog-message.is-info {
    color: var(--text);
}

.login-alert-dialog-actions {
    display: flex;
    justify-content: flex-end;
    margin-top: 1rem;
}

.login-alert-dialog-actions .btn {
    min-width: 120px;
}

@media (max-width: 480px) {
    body {
        padding: .9rem;
    }

    .card {
        padding: 1.1rem;
        border-radius: 12px;
    }

    .brand-logo {
        max-width: 150px;
    }

    p.subtitle {
        font-size: .92rem;
    }
}