/* AZhai NAV authentication pages — unified soft pink design */
:root {
    --auth-pink: #e96f9c;
    --auth-pink-dark: #d95789;
    --auth-pink-soft: #fff0f6;
    --auth-text: #29242a;
    --auth-muted: #8a8188;
    --auth-border: #f0e4ea;
    --auth-shadow: 0 24px 70px rgba(133, 73, 101, .11);
}
html { min-height: 100%; }
body {
    min-height: 100vh;
    padding: 24px 16px !important;
    color: var(--auth-text) !important;
    background:
        radial-gradient(ellipse at 12% 8%, rgba(255, 218, 234, .72), transparent 36%),
        radial-gradient(ellipse at 90% 92%, rgba(255, 231, 240, .85), transparent 34%),
        #faf8fa !important;
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", "PingFang SC", "Microsoft YaHei", sans-serif !important;
}
.auth-card, .card, .verify-card {
    width: min(440px, 100%) !important;
    max-width: 100%;
    margin: auto;
    padding: 34px !important;
    background: rgba(255, 255, 255, .96) !important;
    border: 1px solid rgba(240, 228, 234, .95) !important;
    border-radius: 24px !important;
    box-shadow: var(--auth-shadow) !important;
    box-sizing: border-box;
}
.auth-card h1, .card h1, .verify-card h1 {
    color: var(--auth-text) !important;
    font-size: 26px !important;
    font-weight: 750 !important;
    letter-spacing: -.5px;
    line-height: 1.35;
}
.subtitle, .desc, .verify-description {
    color: var(--auth-muted) !important;
    font-size: 13px !important;
    line-height: 1.8 !important;
}
.logo {
    width: 52px !important;
    height: 52px !important;
    margin-bottom: 22px !important;
    display: grid !important;
    place-items: center !important;
    border-radius: 17px !important;
    background: linear-gradient(145deg, #f7a7c4, #df6798) !important;
    color: #fff !important;
    font-size: 17px;
    font-weight: 850 !important;
    box-shadow: 0 9px 22px rgba(224, 103, 151, .24);
}
.form-group, .group { margin-bottom: 17px !important; }
.auth-card label, .card label, .verify-card label {
    display: block;
    margin-bottom: 8px !important;
    color: #4b4148 !important;
    font-size: 13px !important;
    font-weight: 650 !important;
}
.auth-card input:not([type="hidden"]), .card input:not([type="hidden"]), .verify-card input:not([type="hidden"]) {
    display: block;
    width: 100%;
    min-height: 46px;
    padding: 12px 14px !important;
    border: 1px solid #eadfe5 !important;
    border-radius: 12px !important;
    outline: none;
    background: #fff !important;
    color: var(--auth-text) !important;
    font: inherit;
    font-size: 14px !important;
    box-shadow: none !important;
    transition: border-color .18s ease, box-shadow .18s ease, background .18s ease;
}
.auth-card input:focus, .card input:focus, .verify-card input:focus {
    border-color: #e88bb0 !important;
    box-shadow: 0 0 0 4px rgba(233, 111, 156, .12) !important;
}
.auth-card button, .card button, .verify-card button, .verify-button {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    min-height: 46px;
    padding: 12px 16px !important;
    border: 0 !important;
    border-radius: 12px !important;
    background: linear-gradient(135deg, #ee8fb3, #df6598) !important;
    color: #fff !important;
    font-size: 14px !important;
    font-weight: 700 !important;
    text-decoration: none !important;
    cursor: pointer;
    box-shadow: 0 8px 18px rgba(223, 101, 152, .18);
    transition: transform .18s ease, box-shadow .18s ease, filter .18s ease;
}
.auth-card button:hover, .card button:hover, .verify-card button:hover, .verify-button:hover {
    transform: translateY(-1px);
    filter: saturate(1.04);
    box-shadow: 0 11px 22px rgba(223, 101, 152, .25);
}
.oauth-button {
    min-height: 46px;
    border: 1px solid #f0d5e1 !important;
    border-radius: 12px !important;
    background: #fff8fb !important;
    color: #c34f81 !important;
    font-weight: 700 !important;
}
.oauth-button:hover { border-color: #e8a1bd !important; background: #fff1f7 !important; }
.divider { color: #a79aa2 !important; }
.divider::before, .divider::after { background: #f0e4ea !important; }
.error {
    padding: 12px 14px !important;
    border: 1px solid #f8d5dc !important;
    border-radius: 12px !important;
    background: #fff3f4 !important;
    color: #b83e55 !important;
    font-size: 12px !important;
    line-height: 1.7;
}
.success {
    padding: 12px 14px !important;
    border: 1px solid #ccebd8 !important;
    border-radius: 12px !important;
    background: #effaf3 !important;
    color: #23784a !important;
    font-size: 12px !important;
    line-height: 1.7;
}
.footer { margin-top: 22px !important; color: #8a8188 !important; line-height: 1.8; }
.footer a, .auth-card a:not(.oauth-button):not(.back), .card a:not(.back), .verify-card a:not(.verify-button) {
    color: var(--auth-pink-dark) !important;
    font-weight: 700;
    text-decoration: none;
}
.back { color: #9a8e96 !important; transition: color .18s ease; }
.back:hover { color: var(--auth-pink-dark) !important; }
.verify-icon {
    background: var(--auth-pink-soft) !important;
    color: var(--auth-pink-dark);
    border: 1px solid #f8dce8;
}
.email-box {
    border: 1px solid #f0dce6 !important;
    border-radius: 13px !important;
    background: #fff8fb !important;
    color: #594751 !important;
}
.verify-tip { color: #92848d !important; }
.mail-warning {
    border: 1px solid #f5e1b8;
    border-radius: 12px !important;
}
@media (max-width: 480px) {
    body { padding: 16px 12px !important; }
    .auth-card, .card, .verify-card { padding: 26px 22px !important; border-radius: 20px !important; }
    .auth-card h1, .card h1, .verify-card h1 { font-size: 23px !important; }
}