/* 溪溪 统一品牌主题层
   用途：覆盖对话首页、登录/订阅/个人页的品牌视觉。
   后续调整该站 VI，优先修改这一份文件。 */
:root {
    --brand-primary: #3F7E88;
    --brand-primary-dark: #234B55;
    --brand-accent: #72AFA9;
    --brand-gold: #BBA86C;
    --brand-rice: #F2F8F5;
    --brand-cream: #FFFFFA;
    --brand-earth: #637B78;
    --brand-lotus: #B9DDE7;
    --brand-ink: #26383A;
    --brand-border: color-mix(in srgb, var(--brand-accent) 42%, transparent);
    --brand-card: rgba(255, 255, 255, 0.88);
    --brand-avatar: url("https://z15.xblog.pro/uploads/share/share_z15_static.jpg?v=20260709");
}
body { color: var(--brand-ink); }
.status-bar { background: var(--brand-primary) !important; }
.chat-messages,
.chat-container {
    background:
        radial-gradient(circle at 18% 10%, color-mix(in srgb, var(--brand-lotus) 18%, transparent), transparent 30%),
        radial-gradient(circle at 86% 20%, color-mix(in srgb, var(--brand-accent) 18%, transparent), transparent 32%),
        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; }
body.brand-auth-page {
    background:
        radial-gradient(circle at 18% 18%, rgba(255,255,255,.84), transparent 32%),
        radial-gradient(circle at 86% 22%, color-mix(in srgb, var(--brand-lotus) 16%, transparent), transparent 34%),
        linear-gradient(135deg, var(--brand-rice) 0%, var(--brand-cream) 50%, color-mix(in srgb, var(--brand-accent) 14%, #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,.52), rgba(255,255,255,.08));
}
.page-container {
    align-items: center !important;
    justify-content: center !important;
    padding-left: clamp(18px, 5vw, 80px);
    padding-right: clamp(18px, 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: '';
    flex: 0 0 auto;
    display: block;
    width: 72px;
    height: 72px;
    min-width: 72px;
    min-height: 72px;
    margin: 0 auto 12px;
    border-radius: 50%;
    background: var(--brand-avatar) center / cover no-repeat;
    border: 3px solid rgba(255,255,255,.84);
    box-shadow: 0 10px 26px color-mix(in srgb, var(--brand-primary) 22%, transparent);
}
.brand-logo {
    color: var(--brand-primary-dark) !important;
    text-align: center !important;
    line-height: 1.22 !important;
    white-space: nowrap !important;
    letter-spacing: 4px !important;
    text-shadow: 0 1px 0 rgba(255,255,255,.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) 36%, transparent) !important;
    background: rgba(255,255,255,.78) !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-accent) 20%, 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-accent) 100%) !important;
    color: #fff !important;
    box-shadow: 0 10px 22px color-mix(in srgb, var(--brand-primary-dark) 18%, transparent);
}
.btn-primary:hover:not(:disabled) {
    filter: brightness(1.04);
    transform: translateY(-1px);
}
.btn-secondary {
    background: color-mix(in srgb, var(--brand-gold) 18%, #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-gold) 28%, #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) 24%, 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) 34%, 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-gold)) !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,.32), rgba(255,255,255,.76)); }
    .page-container {
        align-items: center !important;
        justify-content: center !important;
        padding: max(14px, env(safe-area-inset-top)) 16px max(18px, env(safe-area-inset-bottom)) !important;
        min-height: 100svh !important;
    }
    .auth-card { padding-top: 26px !important; }
    .brand-logo { letter-spacing: 3px !important; }
}