.tm-firebase-auth {
    --tm-ink: #17212b;
    --tm-muted: #66727e;
    --tm-line: #dfe5e9;
    --tm-accent: #0f766e;
    --tm-accent-dark: #115e59;
    min-height: 680px;
    padding: 72px 20px;
    background: radial-gradient(circle at 12% 10%, #d9f3ed 0, transparent 36%), linear-gradient(135deg, #f7fbfa, #eef3f5);
    color: var(--tm-ink);
}

.tm-auth-shell {
    display: grid;
    grid-template-columns: minmax(0, 0.9fr) minmax(320px, 460px);
    gap: 72px;
    align-items: center;
    max-width: 1040px;
    margin: 0 auto;
}

.tm-auth-intro {
    animation: tm-auth-rise 500ms ease-out both;
}

.tm-auth-kicker {
    margin: 0 0 14px;
    color: var(--tm-accent);
    font-size: 12px;
    font-weight: 700;
    letter-spacing: 0.14em;
    text-transform: uppercase;
}

.tm-auth-intro h1 {
    margin: 0 0 18px;
    font-size: clamp(38px, 5vw, 68px);
    line-height: 0.98;
}

.tm-auth-intro p:last-child {
    max-width: 360px;
    margin: 0;
    color: var(--tm-muted);
    font-size: 18px;
}

.tm-auth-card {
    padding: 32px;
    border: 1px solid rgba(255, 255, 255, 0.75);
    border-radius: 8px;
    background: rgba(255, 255, 255, 0.9);
    box-shadow: 0 24px 70px rgba(23, 33, 43, 0.14);
    animation: tm-auth-rise 600ms 80ms ease-out both;
}

.tm-auth-tabs {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 4px;
    margin-bottom: 24px;
    padding: 4px;
    border-radius: 6px;
    background: #edf2f3;
}

.tm-auth-tab,
.tm-auth-submit,
.tm-auth-link,
.tm-auth-signout {
    border: 0;
    font: inherit;
    cursor: pointer;
}

.tm-auth-tab {
    padding: 11px 8px;
    border-radius: 4px;
    color: var(--tm-muted);
    background: transparent;
    font-size: 13px;
    font-weight: 700;
}

.tm-auth-tab.is-active {
    color: var(--tm-ink);
    background: #fff;
    box-shadow: 0 2px 8px rgba(23, 33, 43, 0.08);
}

.tm-auth-status {
    min-height: 20px;
    margin-bottom: 12px;
    color: var(--tm-accent-dark);
    font-size: 13px;
}

.tm-auth-status.is-error {
    color: #b42318;
}

.tm-auth-form {
    display: grid;
    gap: 9px;
}

.tm-auth-form label {
    margin-top: 7px;
    color: var(--tm-ink);
    font-size: 13px;
    font-weight: 700;
}

.tm-auth-form input {
    width: 100%;
    min-height: 46px;
    box-sizing: border-box;
    padding: 11px 13px;
    border: 1px solid var(--tm-line);
    border-radius: 4px;
    color: var(--tm-ink);
    background: #fff;
}

.tm-auth-form input:focus {
    outline: 3px solid rgba(15, 118, 110, 0.16);
    border-color: var(--tm-accent);
}

.tm-auth-submit {
    min-height: 47px;
    margin-top: 15px;
    border-radius: 4px;
    color: #fff;
    background: var(--tm-accent);
    font-weight: 700;
    transition: background 180ms ease, transform 180ms ease;
}

.tm-auth-submit:hover,
.tm-auth-submit:focus-visible {
    background: var(--tm-accent-dark);
    transform: translateY(-1px);
}

.tm-auth-submit:disabled {
    cursor: wait;
    opacity: 0.65;
}

.tm-auth-divider {
    display: flex;
    align-items: center;
    gap: 12px;
    margin: 22px 0 14px;
    color: var(--tm-muted);
    font-size: 12px;
}

.tm-auth-divider::before,
.tm-auth-divider::after {
    flex: 1;
    height: 1px;
    background: var(--tm-line);
    content: '';
}

.tm-auth-google {
    width: 100%;
    min-height: 46px;
    border: 1px solid var(--tm-line);
    border-radius: 4px;
    color: var(--tm-ink);
    background: #fff;
    font: inherit;
    font-weight: 700;
    cursor: pointer;
}

.tm-auth-google:hover,
.tm-auth-google:focus-visible {
    border-color: var(--tm-accent);
    background: #f7fbfa;
}

.tm-auth-google:disabled {
    cursor: wait;
    opacity: 0.65;
}

.tm-auth-link,
.tm-auth-signout {
    justify-self: center;
    margin-top: 13px;
    color: var(--tm-accent-dark);
    background: transparent;
    font-size: 13px;
    text-decoration: underline;
}

.tm-auth-signout {
    display: block;
    margin-right: auto;
    margin-left: auto;
}

.tm-auth-form.is-hidden,
.tm-auth-signout.is-hidden,
[hidden] {
    display: none !important;
}

@keyframes tm-auth-rise {
    from { opacity: 0; transform: translateY(16px); }
    to { opacity: 1; transform: translateY(0); }
}

@media (max-width: 720px) {
    .tm-firebase-auth { min-height: 0; padding: 48px 16px; }
    .tm-auth-shell { grid-template-columns: 1fr; gap: 32px; }
    .tm-auth-intro h1 { font-size: 46px; }
    .tm-auth-card { padding: 24px; }
}

@media (prefers-reduced-motion: reduce) {
    .tm-auth-intro,
    .tm-auth-card { animation: none; }
    .tm-auth-submit { transition: none; }
}