/* 小愈 z2 统一品牌主题层
   用途：覆盖对话首页、登录/订阅/个人页的品牌视觉。
   后续调整该站 VI，优先修改这一份文件。 */
:root {
    --brand-primary: #D4897B;
    --brand-primary-dark: #C27466;
    --brand-accent: #E8B4B0;
    --brand-rice: #FFF5F0;
    --brand-cream: #FDF8F5;
    --brand-earth: #8F6F63;
    --brand-ink: #4A3728;
    --brand-border: color-mix(in srgb, var(--brand-accent) 45%, transparent);
    --brand-card: rgba(255, 255, 255, 0.86);
    --brand-avatar: url("https://z2.xblog.pro/uploads/avatars/ai_avatar_20260531075546_6a1be982d24a9.jpg");
}

body {
    color: var(--brand-ink);
}

/* 对话首页覆盖 */
.status-bar {
    background: var(--brand-primary) !important;
}

.chat-messages,
.chat-container {
    background: linear-gradient(135deg, var(--brand-rice), var(--brand-cream)) !important;
}

.lotus-message .message-avatar,
.message-avatar.lotus-avatar {
    background-color: var(--brand-primary) !important;
}

.message-content,
.lotus-message .message-content {
    border-color: color-mix(in srgb, var(--brand-accent) 34%, transparent) !important;
}

/* phone-auth 通用覆盖 */
body.brand-auth-page {
    background:
        radial-gradient(circle at 18% 18%, rgba(255, 255, 255, 0.82), transparent 32%),
        linear-gradient(135deg, var(--brand-rice) 0%, var(--brand-cream) 52%, color-mix(in srgb, var(--brand-accent) 18%, #ffffff) 100%);
    min-height: 100vh;
}

body.brand-auth-page::before {
    content: '';
    position: fixed;
    inset: 0;
    pointer-events: none;
    background: linear-gradient(90deg, rgba(255,255,255,0.5), rgba(255,255,255,0.08));
}

.page-container {
    justify-content: flex-start;
    padding-left: clamp(22px, 8vw, 120px);
    padding-right: clamp(22px, 5vw, 80px);
}

.auth-card,
.profile-card,
.plan-card {
    position: relative;
    z-index: 1;
    background: var(--brand-card);
    border-color: var(--brand-border);
    box-shadow: 0 22px 56px color-mix(in srgb, var(--brand-primary-dark) 18%, transparent);
    backdrop-filter: blur(14px);
}

.auth-card::before {
    content: '';
    display: block;
    width: 82px;
    height: 82px;
    margin: -6px auto 16px;
    border-radius: 50%;
    background: var(--brand-avatar) center / cover no-repeat;
    border: 3px solid color-mix(in srgb, var(--brand-accent) 45%, transparent);
    box-shadow: 0 10px 26px color-mix(in srgb, var(--brand-primary) 22%, transparent);
}

.brand-logo {
    color: var(--brand-primary-dark) !important;
    text-shadow: 0 1px 0 rgba(255, 255, 255, 0.75);
}

.brand-slogan,
.auth-footer {
    color: var(--brand-earth) !important;
}

a,
.auth-footer a,
.auth-footer .agreement-link {
    color: var(--brand-primary) !important;
}

a:hover,
.auth-footer .agreement-link:hover {
    color: var(--brand-primary-dark) !important;
}

.form-label {
    color: var(--brand-ink) !important;
}

.form-input,
textarea {
    border-color: color-mix(in srgb, var(--brand-primary) 38%, transparent) !important;
    background: rgba(255, 255, 255, 0.76) !important;
    color: var(--brand-ink) !important;
}

.form-input:focus,
textarea:focus {
    border-color: var(--brand-primary) !important;
    box-shadow: 0 0 0 3px color-mix(in srgb, var(--brand-primary) 16%, transparent) !important;
}

.form-input::placeholder {
    color: color-mix(in srgb, var(--brand-earth) 58%, transparent) !important;
}

.btn-primary {
    background: linear-gradient(135deg, var(--brand-primary) 0%, var(--brand-primary-dark) 100%) !important;
    color: #fff !important;
    box-shadow: 0 10px 22px color-mix(in srgb, var(--brand-primary-dark) 20%, transparent);
}

.btn-primary:hover:not(:disabled) {
    filter: brightness(1.04);
    transform: translateY(-1px);
}

.btn-secondary {
    background: color-mix(in srgb, var(--brand-accent) 24%, #fff) !important;
    color: var(--brand-primary-dark) !important;
    border: 1px solid color-mix(in srgb, var(--brand-accent) 32%, transparent) !important;
}

.btn-secondary:hover:not(:disabled) {
    background: color-mix(in srgb, var(--brand-accent) 34%, #fff) !important;
}

.btn-accent,
.toast.info {
    background: var(--brand-primary) !important;
}

.message.success,
.notification.success {
    background: color-mix(in srgb, var(--brand-rice) 78%, #fff) !important;
    color: var(--brand-primary-dark) !important;
    border-color: color-mix(in srgb, var(--brand-primary) 26%, transparent) !important;
}

.message.info,
.notification.info {
    background: color-mix(in srgb, var(--brand-cream) 78%, #fff) !important;
    color: var(--brand-earth) !important;
    border-color: color-mix(in srgb, var(--brand-accent) 32%, transparent) !important;
}

.avatar-preview {
    background: var(--brand-rice) !important;
    border-color: color-mix(in srgb, var(--brand-primary) 38%, transparent) !important;
}

.avatar-preview:hover,
.plan-card:hover,
.plan-card.selected,
.gender-option:hover,
.gender-option.selected {
    border-color: var(--brand-primary) !important;
}

.progress-fill {
    background: linear-gradient(90deg, var(--brand-primary), var(--brand-accent)) !important;
}

.plan-card.selected,
.gender-option.selected {
    background: color-mix(in srgb, var(--brand-rice) 82%, #fff) !important;
    color: var(--brand-primary-dark) !important;
}

.agreement-modal {
    background: var(--brand-cream) !important;
    border-color: color-mix(in srgb, var(--brand-accent) 32%, transparent) !important;
    box-shadow: 0 20px 60px color-mix(in srgb, var(--brand-primary-dark) 18%, transparent) !important;
}

.agreement-overlay {
    background: color-mix(in srgb, var(--brand-primary-dark) 42%, transparent) !important;
}

@media (max-width: 720px) {
    body.brand-auth-page {
        background: linear-gradient(180deg, var(--brand-rice) 0%, var(--brand-cream) 100%);
    }

    body.brand-auth-page::before {
        background: linear-gradient(180deg, rgba(255,255,255,0.32), rgba(255,255,255,0.76));
    }

    .page-container {
        align-items: flex-end;
        justify-content: center;
        padding: 24px 18px;
        min-height: 100vh;
    }

    .auth-card {
        padding-top: 28px;
    }
}

/* 2026-06-09: WeChat mobile login lift - keep auth card closer to top */
@media (max-width: 720px) {
    body.jihe-auth-page {
        min-height: 100svh;
    }

    body.jihe-auth-page .page-container {
        align-items: flex-start !important;
        justify-content: center !important;
        min-height: 100svh !important;
        padding: max(14px, env(safe-area-inset-top)) 16px 18px !important;
    }

    body.jihe-auth-page .auth-card {
        margin-top: clamp(10px, 4vh, 28px) !important;
        padding: 22px 20px 20px !important;
    }

    body.jihe-auth-page .auth-card::before {
        width: 64px !important;
        height: 64px !important;
        margin: -2px auto 10px !important;
    }

    body.jihe-auth-page .brand-logo {
        font-size: 27px !important;
        margin-bottom: 0 !important;
    }

    body.jihe-auth-page .brand-slogan {
        margin-bottom: 18px !important;
        line-height: 1.45 !important;
    }

    body.jihe-auth-page .form-group {
        margin-bottom: 13px !important;
    }

    body.jihe-auth-page .auth-footer {
        margin-top: 14px !important;
    }
}

@media (max-width: 720px) and (max-height: 700px) {
    body.jihe-auth-page .page-container {
        padding-top: max(8px, env(safe-area-inset-top)) !important;
    }

    body.jihe-auth-page .auth-card {
        margin-top: 6px !important;
        padding-top: 18px !important;
        padding-bottom: 18px !important;
    }

    body.jihe-auth-page .auth-card::before {
        width: 56px !important;
        height: 56px !important;
        margin-bottom: 8px !important;
    }

    body.jihe-auth-page .brand-slogan {
        margin-bottom: 14px !important;
    }
}

/* 2026-06-09: WeChat mobile login center correction */
@media (max-width: 720px) {
    body.brand-auth-page,
    body.jihe-auth-page {
        min-height: 100svh;
    }

    body.brand-auth-page .page-container,
    body.jihe-auth-page .page-container {
        align-items: center !important;
        justify-content: center !important;
        min-height: 100svh !important;
        padding: max(12px, env(safe-area-inset-top)) 16px max(16px, env(safe-area-inset-bottom)) !important;
    }

    body.brand-auth-page .auth-card,
    body.jihe-auth-page .auth-card {
        margin-top: 0 !important;
        margin-bottom: 0 !important;
        padding: 24px 20px 22px !important;
    }

    body.brand-auth-page .auth-card::before,
    body.jihe-auth-page .auth-card::before {
        width: 64px !important;
        height: 64px !important;
        margin: -2px auto 10px !important;
    }

    body.brand-auth-page .brand-logo,
    body.jihe-auth-page .brand-logo {
        font-size: 27px !important;
        margin-bottom: 0 !important;
    }

    body.brand-auth-page .brand-slogan,
    body.jihe-auth-page .brand-slogan {
        margin-bottom: 18px !important;
        line-height: 1.45 !important;
    }
}

@media (max-width: 720px) and (max-height: 700px) {
    body.brand-auth-page .auth-card,
    body.jihe-auth-page .auth-card {
        padding-top: 20px !important;
        padding-bottom: 20px !important;
    }

    body.brand-auth-page .auth-card::before,
    body.jihe-auth-page .auth-card::before {
        width: 58px !important;
        height: 58px !important;
        margin-bottom: 8px !important;
    }

    body.brand-auth-page .brand-slogan,
    body.jihe-auth-page .brand-slogan {
        margin-bottom: 14px !important;
    }
}

/* 2026-06-09: Final stable login identity layout */
body.brand-auth-page .auth-card,
body.jihe-auth-page .auth-card {
    display: flex !important;
    flex-direction: column !important;
    align-items: stretch !important;
    overflow: visible !important;
}

body.brand-auth-page .auth-card::before,
body.jihe-auth-page .auth-card::before {
    flex: 0 0 auto !important;
    display: block !important;
    width: 72px !important;
    height: 72px !important;
    min-width: 72px !important;
    min-height: 72px !important;
    margin: 0 auto 12px !important;
    border-radius: 50% !important;
    background-position: center center !important;
    background-size: cover !important;
    background-repeat: no-repeat !important;
    border: 3px solid rgba(255, 255, 255, 0.82) !important;
    box-shadow: 0 10px 26px rgba(32, 61, 55, 0.16) !important;
}

body.brand-auth-page .brand-logo,
body.jihe-auth-page .brand-logo {
    display: block !important;
    width: 100% !important;
    margin: 0 0 4px !important;
    text-align: center !important;
    line-height: 1.22 !important;
    white-space: nowrap !important;
    letter-spacing: 6px !important;
}

body.brand-auth-page .brand-slogan,
body.jihe-auth-page .brand-slogan {
    display: block !important;
    width: 100% !important;
    margin: 0 0 22px !important;
    text-align: center !important;
    line-height: 1.5 !important;
    letter-spacing: 3px !important;
    white-space: normal !important;
}

body.brand-auth-page .message,
body.jihe-auth-page .message,
body.brand-auth-page .form-group,
body.jihe-auth-page .form-group,
body.brand-auth-page .btn-primary,
body.jihe-auth-page .btn-primary,
body.brand-auth-page .auth-footer,
body.jihe-auth-page .auth-footer {
    width: 100% !important;
}

@media (max-width: 720px) {
    body.brand-auth-page .page-container,
    body.jihe-auth-page .page-container {
        align-items: center !important;
        justify-content: center !important;
        min-height: 100svh !important;
        padding: max(14px, env(safe-area-inset-top)) 16px max(18px, env(safe-area-inset-bottom)) !important;
    }

    body.brand-auth-page .auth-card,
    body.jihe-auth-page .auth-card {
        max-width: 400px !important;
        padding: 26px 20px 22px !important;
        margin: 0 auto !important;
    }

    body.brand-auth-page .auth-card::before,
    body.jihe-auth-page .auth-card::before {
        width: 68px !important;
        height: 68px !important;
        min-width: 68px !important;
        min-height: 68px !important;
        margin-bottom: 11px !important;
    }

    body.brand-auth-page .brand-logo,
    body.jihe-auth-page .brand-logo {
        font-size: 27px !important;
    }

    body.brand-auth-page .brand-slogan,
    body.jihe-auth-page .brand-slogan {
        margin-bottom: 20px !important;
        font-size: 13px !important;
    }
}

@media (max-width: 360px) {
    body.brand-auth-page .auth-card,
    body.jihe-auth-page .auth-card {
        padding-left: 18px !important;
        padding-right: 18px !important;
    }

    body.brand-auth-page .brand-logo,
    body.jihe-auth-page .brand-logo {
        letter-spacing: 4px !important;
    }

    body.brand-auth-page .brand-slogan,
    body.jihe-auth-page .brand-slogan {
        letter-spacing: 2px !important;
    }
}

/* 2026-06-09: z2 login real avatar element, prevents pseudo/avatar text overlap */
body.z2-login-page .auth-card::before {
    content: none !important;
    display: none !important;
}

body.z2-login-page .login-brand-avatar {
    flex: 0 0 auto !important;
    display: block !important;
    width: 72px !important;
    height: 72px !important;
    min-width: 72px !important;
    min-height: 72px !important;
    margin: 0 auto 12px !important;
    border-radius: 50% !important;
    background: var(--brand-avatar) center center / cover no-repeat !important;
    border: 3px solid rgba(255, 255, 255, 0.86) !important;
    box-shadow: 0 10px 26px rgba(74, 55, 40, 0.16) !important;
}

body.z2-login-page .brand-logo {
    margin-top: 0 !important;
}

@media (max-width: 720px) {
    body.z2-login-page .login-brand-avatar {
        width: 68px !important;
        height: 68px !important;
        min-width: 68px !important;
        min-height: 68px !important;
        margin-bottom: 11px !important;
    }
}