/* 静禾 z4 统一品牌主题层
   用途：覆盖对话首页、登录/订阅/个人页的品牌视觉。
   以后调整 z4 VI，优先改这一份文件。 */
:root {
    --jihe-leaf: #8E914A;
    --jihe-leaf-dark: #6F7140;
    --jihe-sprout: #C9CA8A;
    --jihe-rice: #FBF7EA;
    --jihe-cream: #FFFBF0;
    --jihe-wheat: #D7A948;
    --jihe-earth: #8A6F4C;
    --jihe-ink: #4F5130;
    --jihe-mist: #DCE3DA;
    --jihe-border: rgba(201, 180, 106, 0.34);
    --jihe-card: rgba(255, 251, 240, 0.88);
    --jihe-avatar: url('/z4-assets/z4静禾300.jpg');
    --jihe-hero: url('/z4-assets/z4静禾品牌缩略图.png');
}

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

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

.chat-messages,
.chat-container {
    background: linear-gradient(135deg, #F7F1E3, #FBF7EA) !important;
}

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

.message-content,
.lotus-message .message-content {
    border-color: rgba(201, 180, 106, 0.28) !important;
}

button,
.send-button,
.voice-button,
#voiceBtn {
    --jihe-button-start: var(--jihe-leaf);
    --jihe-button-end: var(--jihe-leaf-dark);
}

/* phone-auth 通用覆盖 */
body.jihe-auth-page {
    background:
        radial-gradient(circle at 18% 18%, rgba(255, 250, 228, 0.92), transparent 34%),
        linear-gradient(135deg, rgba(251, 247, 234, 0.96) 0%, rgba(244, 236, 210, 0.88) 48%, rgba(220, 227, 218, 0.88) 100%),
        var(--jihe-hero) center right 24% / min(92vw, 860px) no-repeat;
    min-height: 100vh;
}

body.jihe-auth-page::before {
    content: '';
    position: fixed;
    inset: 0;
    pointer-events: none;
    background: linear-gradient(90deg, rgba(255, 251, 240, 0.92) 0%, rgba(255, 251, 240, 0.74) 42%, rgba(255, 251, 240, 0.2) 100%);
}

.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(--jihe-card);
    border-color: var(--jihe-border);
    box-shadow: 0 22px 56px rgba(111, 113, 64, 0.14);
    backdrop-filter: blur(14px);
}

.auth-card::before {
    content: '';
    display: block;
    width: 82px;
    height: 82px;
    margin: -6px auto 16px;
    border-radius: 50%;
    background: var(--jihe-avatar) center / cover no-repeat;
    border: 3px solid rgba(215, 169, 72, 0.38);
    box-shadow: 0 10px 26px rgba(142, 145, 74, 0.2);
}

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

.brand-slogan {
    color: var(--jihe-earth) !important;
    letter-spacing: 4px;
}

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

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

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

.form-input,
textarea {
    border-color: rgba(142, 145, 74, 0.38) !important;
    background: rgba(255, 255, 255, 0.76) !important;
    color: #393B24 !important;
}

.form-input:focus,
textarea:focus {
    border-color: var(--jihe-leaf) !important;
    box-shadow: 0 0 0 3px rgba(142, 145, 74, 0.14) !important;
}

.form-input::placeholder {
    color: rgba(93, 90, 58, 0.48) !important;
}

.btn-primary {
    background: linear-gradient(135deg, var(--jihe-leaf) 0%, var(--jihe-leaf-dark) 100%) !important;
    color: #fff !important;
    box-shadow: 0 10px 22px rgba(111, 113, 64, 0.18);
}

.btn-primary:hover:not(:disabled) {
    background: linear-gradient(135deg, #9DA05B 0%, #626536 100%) !important;
    transform: translateY(-1px);
}

.btn-secondary {
    background: rgba(215, 169, 72, 0.22) !important;
    color: var(--jihe-leaf-dark) !important;
    border: 1px solid rgba(215, 169, 72, 0.28) !important;
}

.btn-secondary:hover:not(:disabled) {
    background: rgba(215, 169, 72, 0.34) !important;
}

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

.message.success,
.notification.success {
    background: #F4F8E7 !important;
    color: var(--jihe-leaf-dark) !important;
    border-color: #DCE8B8 !important;
}

.message.info,
.notification.info {
    background: #F7F1DE !important;
    color: var(--jihe-earth) !important;
    border-color: #E7D6A5 !important;
}

.avatar-preview {
    background: var(--jihe-rice) !important;
    border-color: rgba(142, 145, 74, 0.38) !important;
}

.avatar-preview:hover {
    border-color: var(--jihe-leaf) !important;
    background: #F4F8E7 !important;
}

.progress-fill {
    background: linear-gradient(90deg, var(--jihe-leaf), var(--jihe-wheat)) !important;
}

.plan-card:hover,
.plan-card.selected,
.gender-option:hover,
.gender-option.selected {
    border-color: var(--jihe-leaf) !important;
}

.plan-card.selected,
.gender-option.selected {
    background: rgba(244, 248, 231, 0.82) !important;
    color: var(--jihe-leaf-dark) !important;
}

.agreement-modal {
    background: var(--jihe-cream) !important;
    border-color: rgba(201, 180, 106, 0.28) !important;
    box-shadow: 0 20px 60px rgba(142, 145, 74, 0.16) !important;
}

.agreement-overlay {
    background: rgba(79, 81, 48, 0.38) !important;
}

@media (max-width: 720px) {
    body.jihe-auth-page {
        background:
            linear-gradient(180deg, rgba(255, 251, 240, 0.88) 0%, rgba(251, 247, 234, 0.95) 46%, rgba(244, 236, 210, 0.96) 100%),
            var(--jihe-hero) center top 6% / 118vw no-repeat;
    }

    body.jihe-auth-page::before {
        background: linear-gradient(180deg, rgba(255, 251, 240, 0.55), rgba(255, 251, 240, 0.94));
    }

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

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

    .brand-logo {
        font-size: 28px;
    }

    .brand-slogan {
        letter-spacing: 2px;
        line-height: 1.6;
    }
}