/* 音希 统一品牌主题层
   用途：覆盖对话首页、登录/订阅/个人页的品牌视觉。
   视觉方向：半真实幼年版、晨曦、声音、希望。 */
:root {
    --brand-primary: #4C557A;
    --brand-primary-dark: #2F3438;
    --brand-accent: #B9A7E8;
    --brand-sky: #8BC7E8;
    --brand-gold: #E9C96A;
    --brand-rice: #F7F3EA;
    --brand-cream: #FFFDF8;
    --brand-earth: #7B725D;
    --brand-coral: #EFA58C;
    --brand-ink: #2F3438;
    --brand-border: color-mix(in srgb, var(--brand-accent) 42%, transparent);
    --brand-card: rgba(255, 255, 255, 0.88);
    --brand-avatar: url("/z6-assets/z6音希300.jpg");
}

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-gold) 22%, transparent), transparent 28%),
        radial-gradient(circle at 86% 22%, color-mix(in srgb, var(--brand-sky) 20%, transparent), transparent 30%),
        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,.82), transparent 32%),
        radial-gradient(circle at 88% 20%, color-mix(in srgb, var(--brand-sky) 18%, transparent), transparent 34%),
        linear-gradient(135deg, var(--brand-rice) 0%, var(--brand-cream) 48%, color-mix(in srgb, var(--brand-accent) 16%, #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,.54), rgba(255,255,255,.08));
}

.page-container {
    align-items: center;
    justify-content: center;
    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) 16%, 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-gold) 42%, #fff);
    box-shadow: 0 10px 26px color-mix(in srgb, var(--brand-primary) 20%, transparent);
}

.brand-logo {
    color: var(--brand-primary-dark) !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) 32%, 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) 22%, 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-sky) 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-sky) 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; }
}

/* 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,.82) !important; box-shadow: 0 10px 26px rgba(47,52,56,.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 .auth-card,
    body.jihe-auth-page .auth-card { max-width: 400px !important; padding: 26px 20px 22px !important; }
    body.brand-auth-page .auth-card::before,
    body.jihe-auth-page .auth-card::before { width: 64px !important; height: 64px !important; min-width: 64px !important; min-height: 64px !important; margin-bottom: 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: 420px) {
    body.brand-auth-page .auth-card,
    body.jihe-auth-page .auth-card { width: min(100%, 380px) !important; }
    body.brand-auth-page .code-row,
    body.jihe-auth-page .code-row { display: grid !important; grid-template-columns: minmax(0, 1fr) auto !important; gap: 10px !important; align-items: stretch !important; }
    body.brand-auth-page .code-row .form-input,
    body.jihe-auth-page .code-row .form-input { min-width: 0 !important; }
    body.brand-auth-page .code-row .btn-secondary,
    body.jihe-auth-page .code-row .btn-secondary { white-space: nowrap !important; min-width: 108px !important; padding-left: 12px !important; padding-right: 12px !important; }
}

@media (max-width: 360px) {
    body.brand-auth-page .code-row,
    body.jihe-auth-page .code-row { grid-template-columns: 1fr !important; }
    body.brand-auth-page .code-row .btn-secondary,
    body.jihe-auth-page .code-row .btn-secondary { width: 100% !important; }
}