/* auth-extra.css — small additions for auth pages only.
   Loaded AFTER style.css so it can reuse existing tokens/classes
   (.compare-card, .btn-primary, .compare-field, .form-error) without
   touching the main stylesheet. */

.auth-wrap {
    max-width: 440px;
    margin: 64px auto;
    padding: 0 16px;
}
.auth-wrap .compare-card { max-width: 100%; }
.auth-links {
    text-align: center;
    margin-top: 16px;
    font-size: 14px;
}
.auth-links a { color: var(--accent, #1a73e8); text-decoration: none; }
.auth-links a:hover { text-decoration: underline; }
.auth-note {
    font-size: 13px;
    color: #5f6368;
    margin-top: 8px;
}
/* Centers the badge reliably in every browser — inline-block sizes to its
   own content and text-align on the parent centers it, unlike width:
   fit-content which some browsers/webviews silently ignore (falling back
   to a full-width block, which is what was happening before). */
#compare-section { text-align: center; }

.quota-badge {
    display: inline-block;
    max-width: 560px;
    font-size: 14px;
    line-height: 1.5;
    color: #3c4043;
    background: #f1f5f9;
    border-radius: 14px;
    padding: 10px 18px;
    margin: 12px 0 0;
    text-align: center;
    white-space: normal; /* let the whole thing wrap as one paragraph, not per-item */
}
.quota-badge.low { background: #fef2f2; color: #b91c1c; }
.quota-badge .quota-count {
    font-size: 17px;
    font-weight: 700;
    color: #1a3f7a;
}
.quota-badge.low .quota-count { color: #b91c1c; }
.quota-badge a {
    color: var(--accent, #1a73e8);
    font-weight: 600;
    text-decoration: none;
    white-space: nowrap; /* keep "Sign up" itself from splitting across a line break */
}
.quota-badge a:hover { text-decoration: underline; }

@media (max-width: 480px) {
    .quota-badge {
        max-width: calc(100% - 32px);
        font-size: 13px;
        padding: 10px 16px;
    }
    .quota-badge .quota-count { font-size: 15px; }
}
.otp-input {
    letter-spacing: 10px;
    font-size: 24px;
    text-align: center;
    font-family: 'Roboto Mono', monospace;
}

.loading-pct {
    display: block;
    font-size: 32px;
    font-weight: 700;
    color: var(--accent, #1a73e8);
    font-variant-numeric: tabular-nums;
    margin-bottom: 6px;
}
.loading-bar-fill {
    width: 0%;
    height: 100%;
    background: var(--accent, #1a73e8);
    border-radius: 4px;
    animation: none; /* override the old infinite slide keyframe */
    transition: width 0.25s ease-out;
}
 
.otp-input {
    letter-spacing: 10px;
    font-size: 24px;
    text-align: center;
    font-family: 'Roboto Mono', monospace;
}