/* auth.css — Cubbly login/register page styles
   Matches Lovable AuthShell + Field components exactly. */

.auth-page {
    min-height: 100vh;
    display: flex;
    flex-direction: column;
    background: #F7FAFC;
    color: #384653;
    font-family: 'Chiron GoRound TC', system-ui, sans-serif;
    -webkit-font-smoothing: antialiased;
}

.auth-header {
    padding: 1rem 1.5rem;
}
.auth-header a {
    display: inline-flex;
    align-items: center;
    text-decoration: none;
}
.auth-header img {
    height: 2.25rem; /* h-9 = 36px */
    width: auto;
}
/* Text fallback if no logo image */
.auth-header__text {
    font-family: 'Chiron GoRound TC', sans-serif;
    font-weight: 700;
    font-size: 1.25rem;
    color: #437E9C;
    text-decoration: none;
}

.auth-main {
    flex: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 1rem 1rem 2.5rem;
}

.auth-card {
    width: 100%;
    max-width: 28rem; /* max-w-md = 448px */
    border-radius: 1rem; /* rounded-2xl = 16px */
    background: #FFFFFF;
    padding: 2rem; /* p-8 = 32px */
    box-shadow: 0 1px 2px rgba(0,0,0,0.05); /* shadow-sm */
    border: 1px solid #E6EAEE;
}

.auth-card h1 {
    font-size: 1.5rem; /* text-2xl = 24px */
    font-weight: 700; /* font-bold */
    letter-spacing: -0.025em; /* tracking-tight */
    color: #1F2A33;
    margin: 0;
}

.auth-card__subtitle {
    margin-top: 0.25rem; /* mt-1 */
    font-size: 0.875rem; /* text-sm = 14px */
    color: #6B7886;
}

.auth-form {
    margin-top: 1.5rem; /* mt-6 */
}
.auth-form > * + * {
    margin-top: 1rem; /* space-y-4 = 16px */
}

.auth-field {
    display: block;
}
.auth-field__label {
    display: block;
    margin-bottom: 0.375rem; /* mb-1.5 = 6px */
    font-size: 0.75rem; /* text-xs = 12px */
    font-weight: 600; /* font-semibold */
    text-transform: uppercase;
    letter-spacing: 0.05em; /* tracking-wide */
    color: #6B7886;
}
.auth-field__input {
    width: 100%;
    border: 1px solid #E6EAEE;
    border-radius: 0.5rem; /* rounded-lg = 8px */
    padding: 0.625rem 0.75rem; /* px-3 py-2.5 = 12px h, 10px v */
    font-size: 0.875rem; /* text-sm = 14px */
    color: #384653;
    background: #FFFFFF;
    outline: none;
    font-family: inherit;
    box-sizing: border-box;
}
.auth-field__input:focus {
    box-shadow: 0 0 0 2px rgba(67,126,156,0.15);
    border-color: #437E9C;
}
.auth-field__input::placeholder {
    color: #A0AEB8;
}

.auth-btn {
    width: 100%;
    border: none;
    border-radius: 0.5rem; /* rounded-lg = 8px */
    padding: 0.625rem; /* py-2.5 = 10px */
    font-size: 0.875rem; /* text-sm = 14px */
    font-weight: 600; /* font-semibold */
    color: #FFFFFF;
    background: #437E9C;
    cursor: pointer;
    transition: opacity 0.15s;
    font-family: inherit;
}
.auth-btn:hover {
    opacity: 0.9;
}

.auth-footer {
    margin-top: 1.5rem; /* mt-6 */
    text-align: center;
    font-size: 0.875rem; /* text-sm = 14px */
    color: #6B7886;
}
.auth-footer a {
    font-weight: 600; /* font-semibold */
    color: #437E9C;
    text-decoration: none;
}
.auth-footer a:hover {
    text-decoration: underline;
}

/* Error message */
.auth-error {
    padding: 0.75rem 1rem;
    border-radius: 0.5rem;
    background: #FEF2F2;
    border: 1px solid #FECACA;
    color: #991B1B;
    font-size: 0.875rem;
    margin-bottom: 1rem;
    display: none;
}
.auth-error.is-visible {
    display: block;
}