:root {
    --bg: #F0F7F3;
    --card-bg: #FFFFFF;
    --text: #2C3E50;
    --text-secondary: #5A6A62;
    --text-muted: #8DA89A;
    --primary: #4A6F62;
    --primary-light: #6A8C7F;
    --primary-bg: #E6F0EB;
    --bazi-card-bg: #F6FAF8;
    --bazi-surface: #FFFFFF;
    --border: #C9D8D0;
    --accent: #7EB8C9;
    --accent-light: #D0EAF2;
    --success: #3E7C67;
    --warning: #A67C52;
    --danger: #945A5A;
    --radius: 16px;
    --radius-sm: 10px;
    --radius-xs: 6px;
    --shadow: 0 1px 3px rgba(74, 111, 98, 0.06);
    --shadow-md: 0 2px 8px rgba(74, 111, 98, 0.08);
    --shadow-lg: 0 4px 16px rgba(74, 111, 98, 0.12);
    --font: "PingFang SC", "Noto Sans SC", "Microsoft YaHei", -apple-system, sans-serif;
    --font-serif: "Noto Serif SC", "Source Han Serif SC", "SimSun", "STSong", serif;
    --max-width: 720px;
    --transition: 0.2s ease;
    --bamboo-opacity: 0.7;
    --bamboo-sway-duration: 4s;
    --dandelion-scale: 2;
    --tip-bg: rgba(255, 255, 255, 0.88);
    --tip-border: rgba(201, 216, 208, 0.85);
    --tip-shadow: 0 4px 16px rgba(74, 111, 98, 0.14);
}

[data-theme="dark"] {
    --bg: #1A2320;
    --card-bg: #222E29;
    --text: #E0E8E3;
    --text-secondary: #9AACA3;
    --text-muted: #5A6A62;
    --primary: #7EB8A0;
    --primary-light: #9CCEB8;
    --primary-bg: #1E2E27;
    --bazi-card-bg: #1F2B27;
    --bazi-surface: #283530;
    --border: #2E3D35;
    --accent: #6AACBF;
    --accent-light: #1E353D;
    --shadow: 0 1px 3px rgba(0,0,0,0.3);
    --shadow-md: 0 2px 8px rgba(0,0,0,0.4);
    --shadow-lg: 0 4px 16px rgba(0,0,0,0.5);
    --bamboo-opacity: 0.45;
    --bamboo-sway-duration: 4s;
    --dandelion-scale: 2;
    --tip-bg: rgba(34, 46, 41, 0.9);
    --tip-border: rgba(58, 77, 69, 0.85);
    --tip-shadow: 0 4px 20px rgba(0, 0, 0, 0.45);
}

* { margin: 0; padding: 0; box-sizing: border-box; }

body {
    font-family: var(--font);
    background: var(--bg);
    background-image:
        radial-gradient(ellipse at 20% 0%, rgba(126, 184, 201, 0.08) 0%, transparent 50%),
        radial-gradient(ellipse at 80% 100%, rgba(74, 111, 98, 0.06) 0%, transparent 50%),
        radial-gradient(ellipse at 50% 50%, rgba(166, 124, 82, 0.03) 0%, transparent 70%);
    color: var(--text);
    line-height: 1.6;
    -webkit-font-smoothing: antialiased;
    -webkit-text-size-adjust: 100%;
    text-size-adjust: 100%;
    min-height: 100vh;
    overflow-x: hidden;
}

[data-theme="dark"] body {
    background-image:
        radial-gradient(ellipse at 20% 0%, rgba(106, 172, 191, 0.06) 0%, transparent 50%),
        radial-gradient(ellipse at 80% 100%, rgba(126, 184, 160, 0.05) 0%, transparent 50%),
        radial-gradient(ellipse at 50% 50%, rgba(160, 120, 80, 0.03) 0%, transparent 70%);
}

.app-container {
    max-width: var(--max-width);
    margin: 0 auto;
    padding: 0 20px;
    min-height: 100vh;
    display: flex;
    flex-direction: column;
}

.app-header {
    padding: 32px 0 8px;
    position: relative;
    border-bottom: 1px solid var(--border);
    margin-bottom: 4px;
}

.header-inner {
    text-align: center;
    position: relative;
}

.app-title {
    font-size: 28px;
    font-weight: 700;
    color: var(--primary);
    letter-spacing: 4px;
}

.app-subtitle {
    font-size: 13px;
    color: var(--text-muted);
    margin-top: 4px;
    letter-spacing: 2px;
}

/* ===== Particle Canvas ===== */
#particleCanvas {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 0;
    pointer-events: none;
}

/* ===== Bamboo Grove (SVG) ===== */
.bamboo-grove {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    pointer-events: none;
    z-index: 0;
    overflow: hidden;
}

/* ===== Dandelion collision cursor glow ===== */
.cursor-glow {
    position: fixed;
    pointer-events: none;
    z-index: 1;
    border-radius: 50%;
    background: radial-gradient(circle, rgba(195,185,175,0.15) 0%, rgba(195,185,175,0.05) 50%, transparent 70%);
    transform: translate(-50%, -50%);
    transition: opacity 0.12s ease, width 0.12s ease, height 0.12s ease;
}

.bamboo-svg {
    position: absolute;
    bottom: 0;
    transform-origin: bottom center;
    will-change: transform;
}

.bamboo-svg.b1 { left: 4%; width: 48px; height: 70%; }
.bamboo-svg.b2 { left: 16%; width: 40px; height: 62%; }
.bamboo-svg.b3 { right: 18%; width: 36px; height: 55%; }
.bamboo-svg.b4 { right: 8%; width: 30px; height: 48%; }
.bamboo-svg.b5 { right: 30%; width: 26px; height: 42%; }

[data-theme="dark"] .bamboo-svg rect { opacity: 0.65; }
[data-theme="dark"] .bamboo-svg line { opacity: 0.6; }
[data-theme="dark"] .bamboo-svg .bamboo-leaf-group path { opacity: 0.55; }
[data-theme="dark"] .bamboo-svg .bamboo-leaf-group line { opacity: 0.5; }
[data-theme="dark"] .bamboo-svg .bamboo-leaf path { opacity: 0.5; }
[data-theme="dark"] .bamboo-svg .bamboo-leaf line { opacity: 0.45; }

.bamboo-leaf {
    transform-origin: 0px 0px;
    will-change: transform;
    animation: bambooLeafSway 2.6s ease-in-out infinite;
}

/* V3.3.24修复: 竹子摇曳改为纯CSS(不再依赖外链anime.js CDN,避免国内/离线加载失败后静止) */
@keyframes bambooSway {
    0%, 100% { transform: rotate(-2.2deg); }
    50% { transform: rotate(2.2deg); }
}
@keyframes bambooLeafSway {
    0%, 100% { transform: rotate(-4deg); }
    50% { transform: rotate(4deg); }
}
.bamboo-svg { animation: bambooSway 3.6s ease-in-out infinite; }
.bamboo-svg.b1 { animation-duration: 3.1s; }
.bamboo-svg.b2 { animation-duration: 3.9s; animation-delay: -1.4s; }
.bamboo-svg.b3 { animation-duration: 3.4s; animation-delay: -2.2s; }
.bamboo-svg.b4 { animation-duration: 4.2s; animation-delay: -0.7s; }
.bamboo-svg.b5 { animation-duration: 3.0s; animation-delay: -1.9s; }

@media (max-width: 768px) {
    .bamboo-svg.b1 { width: 36px; height: 55%; }
    .bamboo-svg.b2 { width: 30px; height: 48%; }
    .bamboo-svg.b3 { width: 26px; height: 42%; }
    .bamboo-svg.b4 { display: none; }
    .bamboo-svg.b5 { display: none; }

    /* 大运Tab移动端适配 */
    .dayun-tab {
        padding: 8px 4px 6px;
        min-width: 40px;
        font-size: 10px;
    }
    .dayun-tab-gz { font-size: 12px; }
    .dayun-tab-year { font-size: 9px; }
    .dayun-tab-age { font-size: 9px; }
    .dayun-tab-shensha { display: none; }

    /* 流年列表移动端 */
    .liunian-item {
        padding: 6px 8px;
        gap: 6px;
    }
    .liunian-year { font-size: 12px; min-width: 36px; }
    .liunian-ganzhi { font-size: 12px; min-width: 28px; }
    .liunian-score { font-size: 11px; padding: 1px 6px; }
    .liunian-desc { font-size: 11px; }

    .liunian-header { gap: 8px; }

    /* 命盘摘要卡片移动端 */
    .date-text { font-size: 12px; }
    .date-sep { margin: 0 6px; }
    .summary-dm-value { font-size: 14px; }
    .summary-dm-desc { font-size: 12px; }
    .summary-dm-icon { font-size: 16px; }
    .pattern-badge { font-size: 13px; padding: 4px 10px; }
    .liunian-header-ganzhi { font-size: 16px; }
    .liunian-header-years { font-size: 12px; }
}

/* ===== THEME TOGGLE ===== */
.theme-toggle {
    background: none;
    border: none;
    font-size: 20px;
    cursor: pointer;
    padding: 14px 8px;
    transition: transform 0.3s ease;
    line-height: 1;
    margin-left: auto;
    align-self: center;
}

.theme-toggle:hover {
    transform: scale(1.2);
}

.main-content { flex: 1; padding-bottom: 40px; }

.page { padding-top: 12px; }
.page.hidden { display: none; }
.hidden { display: none !important; }

/* V3.1.2: 独立报告页统一返回按钮(轻量小箭头,与标题对齐) */
.report-back-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 28px;
    height: 28px;
    color: var(--text-secondary);
    text-decoration: none;
    border-radius: 6px;
    transition: color 0.2s ease, background 0.2s ease;
    flex-shrink: 0;
}
.report-back-btn:hover { color: var(--primary); background: var(--primary-bg, rgba(74,111,98,0.08)); }
.report-back-btn svg { display: block; }

.page-header {
    display: flex;
    align-items: center;
    gap: 12px;
    margin-bottom: 16px;
}

.page-header h2 {
    font-size: 20px;
    color: var(--primary);
    letter-spacing: 2px;
}

.bazi-input-card {
    margin-top: 8px;
}

.back-btn {
    background: none;
    border: 1px solid var(--border);
    color: var(--text-secondary);
    padding: 6px 14px;
    border-radius: var(--radius-xs);
    cursor: pointer;
    font-size: 13px;
    font-family: var(--font);
    transition: var(--transition);
}

.back-btn:hover { background: var(--primary-bg); color: var(--primary); border-color: var(--primary); }

.card {
    background: var(--card-bg);
    border-radius: var(--radius);
    padding: 24px;
    box-shadow: var(--shadow);
    margin-bottom: 16px;
    border: 1px solid var(--border);
    transition: var(--transition);
}

.card:hover { box-shadow: var(--shadow-md); }

.fade-in {
    animation: fadeIn 0.4s ease;
    animation-fill-mode: both;
}

@keyframes fadeIn {
    from { opacity: 0; }
    to { opacity: 1; }
}

/* ===== HOME PAGE ===== */

/* ===== HERO SECTION ===== */
.hero-section {
    position: relative;
    min-height: 100vh;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    margin: -12px -20px 0;
    padding: 60px 20px 40px;
    overflow: hidden;
}

.hero-section::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    pointer-events: none;
    z-index: 0;
    opacity: 0.15;
    background-image:
        url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24'%3E%3Ccircle cx='6' cy='6' r='1.5' fill='%234A6F62' opacity='0.6'/%3E%3Ccircle cx='14' cy='3' r='1' fill='%234A6F62' opacity='0.3'/%3E%3Ccircle cx='3' cy='14' r='1' fill='%237EB8C9' opacity='0.5'/%3E%3Ccircle cx='18' cy='10' r='1.2' fill='%237EB8C9' opacity='0.4'/%3E%3Ccircle cx='10' cy='18' r='1' fill='%23A67C52' opacity='0.3'/%3E%3Ccircle cx='20' cy='20' r='1.5' fill='%23945A5A' opacity='0.25'/%3E%3C/svg%3E");
    background-size: 48px 48px;
}

.hero-section::after {
    content: '';
    position: absolute;
    bottom: 0;
    left: 50%;
    transform: translateX(-50%);
    width: 80%;
    height: 1px;
    background: linear-gradient(90deg, transparent, var(--primary-light), transparent);
    opacity: 0.3;
}

.hero-content {
    position: relative;
    z-index: 1;
    text-align: center;
    animation: floatUp 0.9s ease-out;
}

.hero-title {
    font-size: 52px;
    font-weight: 800;
    background: linear-gradient(135deg, #4A6F62 0%, #6A8C7F 40%, #4A6F62 70%, #6A8C7F 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
    letter-spacing: 12px;
    margin-bottom: 8px;
    line-height: 1.2;
}

[data-theme="dark"] .hero-title {
    background: linear-gradient(135deg, #7EB8A0 0%, #9CCEB8 40%, #7EB8A0 70%, #8BC4A8 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
}

.hero-subtitle {
    font-size: 16px;
    color: var(--text-muted);
    letter-spacing: 8px;
    margin-bottom: 28px;
    font-weight: 300;
    position: relative;
    display: inline-block;
}

.hero-subtitle::after {
    content: '';
    position: absolute;
    bottom: -8px;
    left: 50%;
    transform: translateX(calc(-50% - 1.5px));
    width: calc(100% - 5px);
    height: 1px;
    background: linear-gradient(135deg, #4A6F62 0%, #6A8C7F 40%, #4A6F62 70%, #6A8C7F 100%);
    opacity: 0.25;
    border-radius: 1px;
}

/* ===== NAVIGATION BAR ===== */
.app-nav {
    border-bottom: 1px solid var(--border);
    background: var(--bg);
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    position: sticky;
    top: 0;
    z-index: 200;
    box-shadow: 0 1px 0 rgba(74, 111, 98, 0.06);
    isolation: isolate;
}

[data-theme="dark"] .app-nav {
    background: var(--bg);
    box-shadow: 0 1px 0 rgba(0, 0, 0, 0.2);
}

.nav-list {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 4px;
    padding: 0 calc(16px + env(safe-area-inset-left, 0px)) 0 calc(16px + env(safe-area-inset-right, 0px));
    max-width: var(--max-width);
    margin: 0 auto;
    overflow: visible;
    -webkit-overflow-scrolling: touch;
}

.nav-item {
    padding: 14px 18px;
    font-size: 14px;
    color: var(--text-secondary);
    text-decoration: none;
    border: none;
    background: transparent;
    cursor: pointer;
    font-family: var(--font);
    white-space: nowrap;
    transition: all 0.25s ease;
    position: relative;
    letter-spacing: 1px;
}

.nav-item:hover {
    color: var(--primary);
    background: rgba(74, 111, 98, 0.06);
    border-radius: var(--radius-xs);
}

[data-theme="dark"] .nav-item:hover {
    background: rgba(126, 184, 160, 0.08);
}

.nav-item.active {
    color: var(--primary);
    font-weight: 600;
}

.nav-item.active::after {
    content: '';
    position: absolute;
    bottom: 6px;
    left: 50%;
    transform: translateX(-50%);
    width: 50px;
    height: 2px;
    background: var(--primary);
    border-radius: 1px;
}

.nav-item.active[data-page="home"]::after {
    width: 25px;
}

.nav-dropdown {
    position: relative;
}

.nav-dropdown span {
    cursor: pointer;
}

.nav-submenu {
    position: absolute;
    top: 100%;
    left: 50%;
    transform: translateX(-50%);
    background: rgba(255, 255, 255, 0.92);
    backdrop-filter: blur(16px);
    -webkit-backdrop-filter: blur(16px);
    border: 1px solid var(--border);
    border-radius: var(--radius-sm);
    box-shadow: 0 8px 32px rgba(74, 111, 98, 0.15);
    min-width: 140px;
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
    transition: all 0.25s ease;
    z-index: 300;
    padding: 4px 0;
}

[data-theme="dark"] .nav-submenu {
    background: rgba(34, 46, 41, 0.94);
    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.4);
}

.nav-submenu.show {
    opacity: 1;
    visibility: visible;
    pointer-events: all;
}

.nav-sub-item {
    display: block;
    padding: 10px 18px;
    font-size: 13px;
    color: var(--text-secondary);
    text-decoration: none;
    transition: all 0.2s ease;
    letter-spacing: 1px;
    white-space: nowrap;
}

.nav-sub-item:hover {
    background: rgba(74, 111, 98, 0.06);
    color: var(--primary);
}

[data-theme="dark"] .nav-sub-item:hover {
    background: rgba(126, 184, 160, 0.1);
}

.nav-sub-item:first-child {
    border-radius: var(--radius-sm) var(--radius-sm) 0 0;
}

.nav-sub-item:last-child {
    border-radius: 0 0 var(--radius-sm) var(--radius-sm);
}

/* ===== DAY MASTER BADGE ===== */
.day-master-badge {
    display: flex;
    align-items: center;
    gap: 16px;
    padding: 16px 20px;
    background: linear-gradient(135deg, var(--primary-bg), var(--bg));
    border-radius: var(--radius);
    border: 1px solid var(--border);
    margin-bottom: 16px;
}

.dm-icon {
    font-size: 42px;
    filter: drop-shadow(0 2px 4px rgba(74, 111, 98, 0.2));
    margin-top: -2px;
}

.dm-info {
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.dm-label {
    font-size: 12px;
    color: var(--text-muted);
    letter-spacing: 2px;
}

.dm-value {
    font-size: 22px;
    font-weight: 700;
    color: var(--primary);
    letter-spacing: 3px;
}

.dm-desc {
    font-size: 13px;
    color: var(--text-secondary);
}


.hero-slogan {
    font-size: 15px;
    color: var(--text-secondary);
    letter-spacing: 2px;
    line-height: 1.8;
    margin-bottom: 48px;
    animation: fadeIn 1s ease 0.4s both;
    max-width: 420px;
    margin-left: auto;
    margin-right: auto;
}

.hero-cards {
    display: flex;
    gap: 16px;
    justify-content: center;
    animation: fadeIn 1s ease 0.6s both;
}

/* V3.3.6: 仅移动端首页三卡片整体上移6px(不影响PC布局) */
@media (max-width: 600px) {
    .hero-cards {
        position: relative;
        top: -6px;
    }
}

.hero-card {
    flex: 1;
    max-width: 285px;
    min-width: 210px;
    background: rgba(255, 255, 255, 0.65);
    backdrop-filter: blur(24px);
    -webkit-backdrop-filter: blur(24px);
    border: 1px solid rgba(74, 111, 98, 0.15);
    border-radius: var(--radius);
    padding: 32px 22px;
    text-align: center;
    cursor: pointer;
    transition: all 0.4s cubic-bezier(0.25, 0.46, 0.45, 0.94);
    position: relative;
    overflow: hidden;
}

.hero-card::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background-image:
        radial-gradient(circle at 20% 80%, rgba(126, 184, 201, 0.06) 0%, transparent 50%),
        radial-gradient(circle at 80% 20%, rgba(74, 111, 98, 0.04) 0%, transparent 50%);
    pointer-events: none;
    transition: opacity 0.4s ease;
}

.hero-card::after {
    content: '';
    position: absolute;
    inset: 0;
    background: linear-gradient(135deg, rgba(126, 184, 201, 0.06), transparent 40%, transparent 60%, rgba(74, 111, 98, 0.04));
    pointer-events: none;
    opacity: 0;
    transition: opacity 0.4s ease;
}

[data-theme="dark"] .hero-card {
    background: rgba(34, 46, 41, 0.65);
    border-color: rgba(126, 184, 160, 0.15);
}

.hero-card:hover {
    transform: translateY(-8px);
    box-shadow: 0 20px 50px rgba(74, 111, 98, 0.18);
    border-color: var(--primary);
}

.hero-card:hover::after {
    opacity: 1;
}

[data-theme="dark"] .hero-card:hover {
    box-shadow: 0 20px 50px rgba(126, 184, 160, 0.2);
}

.hero-card-icon {
    font-size: 38px;
    margin-bottom: 16px;
    display: block;
    filter: drop-shadow(0 2px 4px rgba(74, 111, 98, 0.1));
}
/* V3.3.24: 首页八字命理hero卡SVG太极,1em随卡片字号与今日运势/星座星盘emoji字形同大小 */
.hero-card-icon svg { width: 1em; height: 1em; display: block; margin: 0 auto; }
/* V3.3.24修复: SVG图标容器与emoji卡同高(1.6em行高),图标/标题/小字对齐 */
.hero-card-icon:has(svg) {
    height: 1.6em;
    display: flex;
    align-items: center;
    justify-content: center;
}

.hero-card-title {
    font-size: 17px;
    font-weight: 700;
    color: var(--primary);
    margin-bottom: 8px;
    letter-spacing: 3px;
}

.hero-card-desc {
    font-size: 12px;
    color: var(--text-secondary);
    line-height: 1.9;
    letter-spacing: 1px;
    font-weight: 500;
    text-align: center;
    white-space: normal;
    word-break: normal;
    overflow-wrap: break-word;
}

/* V3.3.5: 首页三卡片文案 - PC显示四字词, 移动端(<=600px)显示三字词(各两套文案,不互相影响) */
.hero-desc-mobile {
    display: none;
}
@media (max-width: 600px) {
    .hero-desc-pc {
        display: none;
    }
    .hero-desc-mobile {
        display: block;
    }
}

.scroll-indicator {
    position: absolute;
    bottom: 30px;
    left: 50%;
    transform: translateX(-50%);
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 6px;
    z-index: 1;
    /* V3.3.25: 随首页渐变出现而淡入(先隐藏→延迟淡入), 再持续跳动 */
    opacity: 0;
    animation: bounce 2s ease-in-out infinite, scrollIndicatorIn 0.9s ease-out 0.9s both;
}
@keyframes scrollIndicatorIn {
    from { opacity: 0; }
    to { opacity: 1; }
}

.scroll-indicator span {
    display: block;
    width: 8px;
    height: 8px;
    border-right: 2px solid var(--primary);
    border-bottom: 2px solid var(--primary);
    transform: rotate(45deg);
    opacity: 0.5;
}

.scroll-indicator span:nth-child(2) { animation-delay: 0.15s; }
.scroll-indicator span:nth-child(3) { animation-delay: 0.3s; }

/* ===== BRAND SECTION ===== */
.brand-section {
    padding: 60px 0 20px;
    text-align: center;
    position: relative;
}

.brand-section::before {
    content: '';
    position: absolute;
    top: 20px;
    left: 50%;
    transform: translateX(-50%);
    width: 60px;
    height: 2px;
    background: linear-gradient(90deg, transparent, var(--primary-light), transparent);
    border-radius: 1px;
}

.brand-title {
    font-size: 28px;
    font-weight: 700;
    color: var(--primary);
    letter-spacing: 6px;
    margin-bottom: 16px;
}

.brand-desc {
    font-size: 14px;
    color: var(--text-secondary);
    line-height: 2;
    max-width: 520px;
    margin: 0 auto 48px;
    letter-spacing: 1px;
}

.kline-chart-wrapper {
    background: var(--card-bg);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    padding: 0;
    margin-bottom: 16px;
    overflow: hidden;
    position: relative;
}

.fortune-kline-canvas {
    display: block;
    width: 100%;
    height: 300px;
    background: var(--card-bg);
}

.kline-legend {
    display: flex;
    justify-content: center;
    gap: 32px;
    padding: 12px 0;
    font-size: 12px;
    letter-spacing: 1px;
    border-top: 1px solid var(--border);
    background: var(--bg);
}

.kline-legend-up {
    color: #EF4444;
    font-weight: 600;
}

.kline-legend-down {
    color: #22C55E;
    font-weight: 600;
}

[data-theme="dark"] .kline-legend-up {
    color: #F87171;
}

[data-theme="dark"] .kline-legend-down {
    color: #4ADE80;
}

.trust-section {
    padding: 60px 24px 40px;
}

.trust-badges {
    display: flex;
    justify-content: center;
    gap: 32px;
    margin-bottom: 28px;
    flex-wrap: wrap;
}

.trust-badge {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 14px;
    color: var(--primary);
    font-weight: 600;
    letter-spacing: 2px;
    padding: 8px 20px;
    background: var(--card-bg);
    border: 1px solid var(--border);
    border-radius: 24px;
}

.trust-badge-icon {
    font-size: 16px;
    color: #4CAF50;
    filter: grayscale(0);
}

[data-theme="dark"] .trust-badge-icon {
    color: #66BB6A;
}

.trust-pillars {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 20px;
    margin-bottom: 20px;
}

.trust-pillar {
    background: var(--card-bg);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    padding: 24px 24px;
    text-align: center;
    transition: var(--transition);
    position: relative;
    overflow: hidden;
}

.trust-pillar::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 3px;
    background: linear-gradient(90deg, var(--primary-light), var(--accent), var(--primary-light));
    opacity: 0;
    transition: opacity 0.3s ease;
}

.trust-pillar:hover {
    border-color: var(--primary);
    box-shadow: var(--shadow-md);
    transform: translateY(-2px);
}

.trust-pillar:hover::before {
    opacity: 1;
}

.trust-pillar-icon {
    font-size: 32px;
    margin-bottom: 12px;
}

.trust-pillar h4 {
    font-size: 15px;
    color: var(--primary);
    margin-bottom: 8px;
    letter-spacing: 2px;
}

.trust-pillar p {
    font-size: 12px;
    color: var(--text-secondary);
    line-height: 1.7;
}

.trust-disclaimer {
    font-size: 13px;
    color: var(--text-secondary);
    line-height: 1.8;
}

.home-section-label {
    font-size: 16px;
    font-weight: 600;
    color: var(--primary);
    letter-spacing: 6px;
    text-align: center;
    padding: 48px 0 20px;
    text-transform: uppercase;
    position: relative;
}

.home-section-label::before {
    content: '';
    display: block;
    width: 40px;
    height: 2px;
    background: linear-gradient(90deg, transparent, var(--primary-light), transparent);
    border-radius: 1px;
    margin: 0 auto 14px;
}
.home-section-label.home-no-line::before { display: none; }

.home-section-label::after {
    display: none;
}

.home-intro { text-align: center; padding: 8px 0; }

.intro-text {
    font-size: 14px;
    color: var(--text-secondary);
    line-height: 1.8;
    letter-spacing: 1px;
}

.home-grid { display: flex; flex-direction: column; gap: 12px; }

.card-entry {
    cursor: pointer;
    position: relative;
    padding: 20px 24px 20px 64px;
    transition: all 0.3s ease;
}

.card-entry:hover {
    border-color: var(--primary);
    box-shadow: var(--shadow-md);
    transform: translateX(6px);
    background: var(--primary-bg);
}

.card-entry h3 { font-size: 17px; color: var(--primary); margin-bottom: 4px; }
.card-entry p { font-size: 12px; color: var(--text-muted); }

.entry-icon {
    position: absolute;
    left: 20px;
    top: 50%;
    transform: translateY(-50%);
    font-size: 24px;
}
/* V3.3.24: 首页八字命理卡用SVG太极,与其他卡图标同大小 */
.entry-icon svg { width: 24px; height: 24px; display: block; }

.entry-arrow {
    position: absolute;
    right: 20px;
    top: 50%;
    transform: translateY(-50%);
    color: var(--text-muted);
    font-size: 18px;
    transition: var(--transition);
}

.card-entry:hover .entry-arrow { color: var(--primary); right: 16px; }

/* 宝典秘籍：修复a标签继承浏览器默认链接颜色(紫色)，确保使用主题色 */
a.card-entry, a.card-entry:hover, a.card-entry h3, a.card-entry p, a.card-entry .entry-icon {
    color: inherit;
    text-decoration: none;
}
a.card-entry .entry-icon { color: var(--primary); }
a.card-entry h3 { color: var(--primary); }
a.card-entry p { color: var(--text-muted); }
a.card-entry:hover { color: inherit; background: var(--primary-bg); }
a.card-entry:hover h3 { color: var(--primary); }
a.card-entry:hover .entry-arrow { color: var(--primary); }

.sub-card-entry {
    cursor: pointer;
    position: relative;
    padding: 16px 20px 16px 56px;
    margin-bottom: 10px;
    background: var(--bg);
    border: 1px solid var(--border);
    transition: var(--transition);
}

.sub-card-entry:last-child { margin-bottom: 0; }

.sub-card-entry:hover {
    border-color: var(--primary);
    box-shadow: var(--shadow-md);
    transform: translateX(4px);
}

.sub-card-entry h3 { font-size: 15px; color: var(--primary); margin-bottom: 2px; }
.sub-card-entry p { font-size: 12px; color: var(--text-muted); }

.sub-card-entry .entry-icon {
    left: 16px;
    font-size: 22px;
}

.sub-card-entry .entry-arrow {
    right: 16px;
    font-size: 16px;
}

.sub-card-entry:hover .entry-arrow { color: var(--primary); right: 12px; }

/* ===== FORM ===== */
.form-row { display: flex; gap: 12px; margin-bottom: 16px; }
.form-row .form-group { flex: 1; }
.form-row .form-group:has(#baziHour) { flex: 0.8; }
.form-row .form-group:has(#baziGender) { flex: 0.8; }
.form-row-city { margin-top: 0; }

#baziInputForm.bazi-input-card {
    overflow: visible;
    position: relative;
    z-index: 1;
}

.form-group { margin-bottom: 16px; }

.form-group label {
    display: block;
    font-size: 13px;
    color: var(--text-secondary);
    margin-bottom: 6px;
    letter-spacing: 1px;
}

.form-group input,
.form-group select {
    width: 100%;
    padding: 9px 14px;
    border: 1px solid var(--border);
    border-radius: 8px;
    font-size: 14px;
    font-family: var(--font);
    background: var(--card-bg);
    -webkit-appearance: none;
    appearance: none;
    min-height: 40px;
    box-sizing: border-box;
    transition: border-color 0.2s;
}
.form-group input {
    transition: all 0.25s ease;
}

/* V3.1.68: 添加身份表单字段(含出生城市)加可见内嵌背景色,在PC(--card-bg)与移动端(--bg)弹窗底色上均有对比 */
.profile-edit-modal .form-group input,
.profile-edit-modal .form-group select,
.profile-edit-modal .city-tree-trigger {
    background: color-mix(in srgb, var(--text) 6%, transparent);
}
/* V3.1.69: 添加身份所有字段空值(占位)统一置灰,选中后恢复正文色 */
.profile-edit-modal select { color: #aaa; -webkit-text-fill-color: #aaa; }
.profile-edit-modal select:valid { color: var(--text); -webkit-text-fill-color: var(--text); }
.profile-edit-modal input::placeholder { color: #aaa; -webkit-text-fill-color: #aaa; }

/* 八字四个下拉框：占位灰色，选中后黑色（无动画，select没有transition） */
#baziInputForm select {
    color: #aaa;
}
#baziInputForm select:valid {
    color: var(--text);
}

/* 八字表单：出生日期、出生时辰、出生城市、性别 下拉箭头透明度 */
#baziInputForm .select-arrow,
#baziInputForm .time-picker-arrow,
#baziInputForm .city-tree-arrow {
    opacity: 0.55;
}

.form-group input:hover,
.form-group select:hover {
    border-color: var(--primary-light);
}

.form-group input:focus,
.form-group select:focus {
    outline: none;
    border-color: var(--primary);
    box-shadow: 0 0 0 3px rgba(74, 111, 98, 0.1);
}

/* 选择框placeholder态：直接设置disabled option颜色 */
select option:disabled {
    color: #aaa;
}
select option:not(:disabled) {
    color: var(--text);
}

/* ===== 城市树形下拉组件 ===== */
.city-tree-dropdown {
    position: relative;
    width: 100%;
    z-index: 1;
}
.city-tree-dropdown.open {
    z-index: 150;
}

.city-tree-trigger {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 9px 11px;
    background: var(--card-bg);
    border: 1px solid var(--border);
    border-radius: 8px;
    color: var(--text);
    font-size: 14px;
    cursor: pointer;
    min-height: 40px;
    transition: border-color 0.2s;
    box-sizing: border-box;
}
.city-tree-trigger:hover { border-color: var(--primary-light); }
.city-tree-dropdown.open .city-tree-trigger {
    border-color: var(--primary);
    box-shadow: 0 0 0 3px rgba(74, 111, 98, 0.1);
}

.city-tree-placeholder {
    color: #aaa;
    font-size: 14px;
}
.city-tree-trigger.has-value .city-tree-placeholder {
    color: var(--text);
}

.city-tree-arrow {
    font-size: 10px;
    color: var(--text-muted);
    transition: transform 0.2s;
    opacity: 0.8;
}
.city-tree-dropdown.open .city-tree-arrow {
    transform: rotate(180deg);
}

.city-tree-panel {
    position: absolute;
    top: 100%;
    left: 0;
    right: 0;
    margin-top: 4px;
    background: var(--card-bg);
    border: 1px solid var(--border);
    border-radius: 8px;
    max-height: 320px;
    overflow: hidden;
    box-shadow: var(--shadow-lg);
}

.city-tree-search {
    padding: 8px;
    border-bottom: 1px solid var(--border);
}
.city-tree-search input {
    width: 100%;
    padding: 7px 10px;
    background: var(--bg);
    border: 1px solid var(--border);
    border-radius: 6px;
    color: var(--text);
    font-size: 13px;
    outline: none;
    box-sizing: border-box;
}
.city-tree-search input:focus {
    border-color: var(--primary);
}
.city-tree-search input::placeholder {
    color: var(--text-muted);
}

.city-tree-list {
    overflow-y: auto;
    max-height: 260px;
    min-height: 100px;
    padding: 4px 0;
}

/* 树节点 */
.city-tree-node {}
.city-tree-node-header {
    display: flex;
    align-items: center;
    padding: 7px 12px;
    cursor: pointer;
    color: var(--text);
    font-size: 13px;
    transition: background 0.15s;
    user-select: none;
}
.city-tree-node-header:hover {
    background: var(--primary-bg);
}
.city-tree-node-header .node-expand-icon {
    font-size: 8px;
    color: var(--text-muted);
    width: 16px;
    flex-shrink: 0;
    transition: transform 0.2s;
    text-align: center;
}
.city-tree-node-header .node-name {
    flex: 1;
}
.city-tree-node-header .node-count {
    font-size: 11px;
    color: var(--text-muted);
    margin-left: 6px;
}

/* 一级节点（省份） */
.city-tree-node.level-province > .city-tree-node-header {
    font-weight: 600;
    color: var(--text);
    padding: 8px 14px;
    border-bottom: 1px solid var(--border);
}
.city-tree-node.level-province > .city-tree-node-header .node-expand-icon {
    color: var(--text-secondary);
    font-size: 9px;
}

/* 展开状态 */
.city-tree-node.expanded > .city-tree-node-header .node-expand-icon {
    transform: rotate(90deg);
}
.city-tree-node.expanded > .city-tree-children {
    display: block;
}

/* 子节点容器 */
.city-tree-children {
    display: none;
    background: var(--bg);
}
.city-tree-children .city-tree-node-header {
    padding: 6px 12px 6px 30px;
    font-size: 13px;
    color: var(--text-secondary);
    border-bottom: 1px solid var(--border);
}
.city-tree-children .city-tree-node-header:hover {
    background: var(--primary-bg);
    color: var(--text);
}

/* 选中态 */
.city-tree-node-header.selected {
    background: var(--primary-bg) !important;
    color: var(--primary) !important;
}

/* 搜索无结果 */
.city-tree-empty {
    padding: 20px;
    text-align: center;
    color: var(--text-muted);
    font-size: 13px;
}

/* 直辖市直接选择 */
.city-tree-node.level-direct > .city-tree-node-header {
    padding: 7px 14px;
    border-bottom: 1px solid var(--border);
    font-weight: 500;
    color: var(--text);
}

/* ===== 时间选择组件（小时+分钟） ===== */
.time-picker-group {
    display: flex;
    align-items: center;
    gap: 4px;
}
.time-picker-dropdown {
    position: relative;
    flex: 1;
    z-index: 1;
}
.time-picker-dropdown.open {
    z-index: 150;
}
.time-picker-trigger {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 9px 11px;
    background: var(--card-bg);
    border: 1px solid var(--border);
    border-radius: 8px;
    color: var(--text);
    font-size: 14px;
    cursor: pointer;
    min-height: 40px;
    transition: border-color 0.2s;
    box-sizing: border-box;
}
.time-picker-trigger:hover { border-color: var(--primary-light); }
.time-picker-dropdown.open .time-picker-trigger {
    border-color: var(--primary);
    box-shadow: 0 0 0 3px rgba(74, 111, 98, 0.1);
}
.time-picker-placeholder {
    color: #aaa;
    font-size: 14px;
}
.time-picker-trigger.has-value .time-picker-placeholder {
    color: var(--text);
}
.time-picker-arrow {
    font-size: 10px;
    color: var(--text-muted);
    transition: transform 0.2s;
    opacity: 0.8;
}
.time-picker-dropdown.open .time-picker-arrow {
    transform: rotate(180deg);
}
.time-picker-panel {
    position: absolute;
    top: 100%;
    left: 0;
    right: 0;
    margin-top: 4px;
    background: var(--card-bg);
    border: 1px solid var(--border);
    border-radius: 8px;
    max-height: 320px;
    overflow: hidden;
    box-shadow: var(--shadow-lg);
}
.time-picker-search {
    padding: 8px;
    border-bottom: 1px solid var(--border);
}
.time-picker-search input {
    width: 100%;
    padding: 7px 10px;
    background: var(--bg);
    border: 1px solid var(--border);
    border-radius: 6px;
    color: var(--text);
    font-size: 13px;
    outline: none;
    box-sizing: border-box;
}
.time-picker-search input:focus {
    border-color: var(--primary);
}
.time-picker-search input::placeholder {
    color: var(--text-muted);
}
.time-picker-list {
    overflow-y: auto;
    max-height: 260px;
    padding: 4px 0;
}
.time-picker-item {
    display: flex;
    align-items: center;
    padding: 7px 14px;
    cursor: pointer;
    color: var(--text);
    font-size: 13px;
    transition: background 0.15s;
    user-select: none;
    border-bottom: 1px solid var(--border);
}
.time-picker-item:hover {
    background: var(--primary-bg);
}
.time-picker-item.selected {
    background: var(--primary-bg) !important;
    color: var(--primary) !important;
    font-weight: 600;
}
.time-picker-item .item-label {
    flex: 1;
}
.time-picker-item .item-sub {
    font-size: 11px;
    color: var(--text-muted);
    margin-left: 6px;
}
.time-picker-empty {
    padding: 20px;
    text-align: center;
    color: var(--text-muted);
    font-size: 13px;
}

/* 表单字段校验错误高亮 - 已废弃，改为toast提示 */

.form-group select {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 12 12'%3E%3Cpath fill='%238DA89A' d='M6 8L1 3h10z'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right 12px center;
    padding-right: 32px;
}

/* ===== 自定义 select 箭头包装器 ===== */
.select-arrow-wrap {
    position: relative;
    flex: 1;
    min-width: 0;
}

.select-arrow-wrap select {
    width: 100%;
    padding-right: 22px;
    background-image: none !important;
}

.select-arrow {
    position: absolute;
    right: 11px;
    top: 50%;
    transform: translateY(-50%);
    font-size: 10px;
    color: var(--text-muted);
    pointer-events: none;
    transition: transform 0.2s;
    line-height: 1;
    z-index: 1;
    opacity: 0.8;
}

.select-arrow-wrap:focus-within .select-arrow {
    transform: translateY(-50%) rotate(180deg);
}

/* ===== DATE INPUT WRAP ===== */
.date-input-wrap {
    display: flex;
    gap: 6px;
    align-items: center;
}

/* ===== LUNAR PICKER ===== */
.lunar-toggle {
    flex-shrink: 0;
    padding: 9px 10px;
    min-width: 44px;
    border: 1px solid var(--border);
    border-radius: 8px;
    background: var(--card-bg);
    color: var(--text-secondary);
    font-size: 14px;
    font-family: var(--font);
    cursor: pointer;
    transition: border-color 0.2s;
    white-space: nowrap;
    text-align: center;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 4px;
    min-height: 40px;
    box-sizing: border-box;
}

.lunar-toggle-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 16px;
    height: 16px;
    font-size: 14px;
    line-height: 1;
    transition: transform 0.5s cubic-bezier(0.4, 0, 0.2, 1);
    transform: rotate(0deg);
}

.lunar-toggle-text {
    display: inline-block;
    line-height: 1;
}

.lunar-toggle:hover {
    border-color: var(--primary);
    color: var(--primary);
}

.lunar-toggle.active {
    background: var(--primary);
    color: #fff;
    border-color: var(--primary);
}

.lunar-picker {
    display: flex;
    gap: 6px;
    flex: 1;
}

.lunar-picker.hidden { display: none; }

.lunar-select {
    width: 100%;
    padding: 9px 4px;
    border: 1px solid var(--border);
    border-radius: 8px;
    font-size: 14px;
    font-family: var(--font);
    background: var(--card-bg);
    color: var(--text);
    cursor: pointer;
    -webkit-appearance: none;
    appearance: none;
    min-height: 40px;
    transition: border-color 0.2s;
    box-sizing: border-box;
}

/* ===== SOLAR PICKER ===== */
.solar-picker {
    display: flex;
    gap: 6px;
    flex: 1;
}

.solar-picker.hidden { display: none; }

.solar-select {
    width: 100%;
    padding: 9px 4px;
    border: 1px solid var(--border);
    border-radius: 8px;
    font-size: 14px;
    font-family: var(--font);
    background: var(--card-bg);
    color: var(--text);
    cursor: pointer;
    -webkit-appearance: none;
    appearance: none;
    min-height: 40px;
    transition: border-color 0.2s;
    box-sizing: border-box;
}

#baziSolarYearWrap {
    flex: 1.5;
}

#baziLunarYearWrap {
    flex: 1.5;
}

#baziSolarMonthWrap,
#baziSolarDayWrap,
#baziLunarMonthWrap,
#baziLunarDayWrap {
    flex: 1.35;
}

.solar-select:hover,
.lunar-select:hover {
    border-color: var(--primary-light);
}

.solar-select:focus,
.lunar-select:focus {
    outline: none;
    border-color: var(--primary);
    box-shadow: 0 0 0 3px rgba(74, 111, 98, 0.1);
}

/* ===== PERIOD TABS ===== */
.period-tabs {
    display: flex;
    gap: 6px;
    margin-bottom: 16px;
    flex-wrap: wrap;
}

.period-btn {
    padding: 7px 16px;
    border: 1px solid var(--border);
    border-radius: 20px;
    background: var(--card-bg);
    color: var(--text-secondary);
    font-size: 12px;
    font-family: var(--font);
    cursor: pointer;
    transition: all 0.25s ease;
}

.period-btn:hover { border-color: var(--primary); color: var(--primary); background: var(--primary-bg); }

.period-btn.active {
    background: var(--primary);
    color: #fff;
    border-color: var(--primary);
    box-shadow: 0 2px 8px rgba(74, 111, 98, 0.25);
}

/* ===== BUTTONS ===== */
.btn-primary {
    background: var(--primary);
    color: #fff;
    border: none;
    padding: 12px 24px;
    border-radius: var(--radius-sm);
    font-size: 15px;
    font-family: var(--font);
    cursor: pointer;
    letter-spacing: 2px;
    transition: all 0.25s ease;
    position: relative;
    overflow: hidden;
}

.btn-primary::after {
    content: '';
    position: absolute;
    top: 50%;
    left: 50%;
    width: 0;
    height: 0;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.2);
    transform: translate(-50%, -50%);
    transition: width 0.6s ease, height 0.6s ease;
}

.btn-primary:hover { background: var(--primary-light); transform: translateY(-1px); box-shadow: var(--shadow-md); }
.btn-primary:active::after { width: 300px; height: 300px; }

.btn-secondary {
    background: var(--bg);
    color: var(--text);
    border: 1px solid var(--border);
    padding: 10px 20px;
    border-radius: var(--radius-sm);
    font-size: 14px;
    font-family: var(--font);
    cursor: pointer;
    transition: all 0.25s ease;
}

.btn-secondary:hover { border-color: var(--primary); color: var(--primary); background: var(--primary-bg); transform: translateY(-1px); }

.btn-full { width: 100%; }

/* ===== K-LINES CHART ===== */
.klines-container {
    margin: 16px 0;
    border: none;
    border-radius: 0;
    background: transparent;
    box-shadow: none;
    overflow: hidden;
}

.klines-tabs {
    display: flex;
    gap: 0;
    border-bottom: 1px solid var(--border);
    background: var(--primary-bg);
    border-radius: 0;
}

.klines-tab {
    flex: 1;
    padding: 10px 0;
    border: none;
    background: transparent;
    color: var(--text-muted);
    font-size: 13px;
    font-family: var(--font);
    cursor: pointer;
    transition: all 0.25s ease;
    position: relative;
}

.klines-tab:hover {
    color: var(--primary);
    background: rgba(74, 111, 98, 0.06);
}

.klines-tab.active {
    color: var(--primary);
    font-weight: 600;
    background: var(--card-bg);
}

.klines-tab.active::after {
    content: '';
    position: absolute;
    bottom: 0;
    left: 50%;
    transform: translateX(-50%);
    width: 24px;
    height: 2px;
    background: var(--primary);
    border-radius: 1px;
}

.klines-canvas {
    width: 100%;
    height: auto;
    display: block;
    padding: 12px;
    background: transparent;
    border: none;
    border-radius: 0;
}

/* ===== BAZI MODULE TABS ===== */
.bazi-module-tabs {
    display: flex;
    gap: 0;
    background: var(--bazi-card-bg);
    border-radius: var(--radius);
    padding: 4px;
    margin-bottom: 8px;
    box-shadow: var(--shadow);
    border: 1px solid var(--border);
}

.bazi-module-tab {
    flex: 1;
    padding: 10px 16px;
    border: none;
    background: none;
    color: var(--text-secondary);
    font-size: 14px;
    font-family: var(--font);
    cursor: pointer;
    border-radius: var(--radius-sm);
    transition: all 0.25s ease;
    position: relative;
    text-align: center;
}

.bazi-module-tab:hover {
    color: var(--primary);
}

.bazi-module-tab.active {
    color: var(--primary);
    background: var(--primary-bg);
    font-weight: 600;
    box-shadow: none;
}

.bazi-module-content {
    display: none;
}

.bazi-module-content.active {
    display: block;
    animation: fadeIn 0.3s ease;
}

/* 命理推演模块 - 顶部间距与运势推演保持一致 */
#baziModuleAnalysis {
    padding-top: 12px;
}

/* 占位 option 显示 */
select option:disabled {
    color: var(--text-muted);
}

/* Bazi fortune period tabs - single row */
#baziModuleFortune .period-tabs {
    display: flex;
    gap: 6px;
    padding: 12px 16px 0;
    margin-bottom: 12px;
}

#baziModuleFortune .period-btn {
    flex: 1;
    padding: 6px 0;
    border: 1px solid var(--border);
    border-radius: 6px;
    background: var(--bazi-surface);
    color: var(--text-secondary);
    font-size: 12px;
    font-family: var(--font);
    cursor: pointer;
    transition: all 0.25s ease;
    text-align: center;
}

#baziModuleFortune .period-btn:hover {
    border-color: var(--primary);
    color: var(--primary);
    background: var(--primary-bg);
}

#baziModuleFortune .period-btn.active {
    background: var(--primary);
    color: #fff;
    border-color: var(--primary);
}

@keyframes fadeIn {
    from { opacity: 0; transform: translateY(8px); }
    to { opacity: 1; transform: translateY(0); }
}

/* ===== RELATIONSHIP PAGES ===== */
.relationship-form {
    display: flex;
    flex-direction: column;
}

.relationship-dual {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 16px;
    margin-bottom: 16px;
}

.relationship-side {
    padding: 16px;
    background: var(--bg);
    border: 1px solid var(--border);
    border-radius: var(--radius-sm);
}

.relationship-side-title {
    font-size: 14px;
    color: var(--primary);
    margin-bottom: 12px;
    letter-spacing: 2px;
    text-align: center;
}

.role-selector {
    display: flex;
    gap: 8px;
    flex-wrap: wrap;
}

.role-btn {
    flex: 1;
    min-width: 60px;
    padding: 8px 12px;
    border: 1px solid var(--border);
    border-radius: 20px;
    background: var(--card-bg);
    color: var(--text-secondary);
    font-size: 13px;
    font-family: var(--font);
    cursor: pointer;
    transition: var(--transition);
    text-align: center;
}

.role-btn:hover {
    border-color: var(--primary);
    color: var(--primary);
}

.role-btn.active {
    background: var(--primary);
    color: #fff;
    border-color: var(--primary);
}

.relationship-result {
    margin-top: 16px;
}

.relationship-score {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 20px;
    margin-bottom: 20px;
    padding: 20px;
    background: linear-gradient(135deg, var(--primary-bg), var(--bg));
    border-radius: var(--radius);
    border: 1px solid var(--border);
}

.relationship-score .score-number {
    font-size: 56px;
    font-weight: 800;
    color: var(--primary);
    line-height: 1;
}

.relationship-score .score-label {
    font-size: 14px;
    color: var(--text-secondary);
    letter-spacing: 2px;
}

.relationship-dimensions {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 12px;
    margin: 16px 0;
}

.relationship-dimension {
    padding: 14px;
    background: var(--bg);
    border-radius: var(--radius-sm);
    border: 1px solid var(--border);
}

.relationship-dimension .dim-name {
    font-size: 12px;
    color: var(--text-muted);
    margin-bottom: 6px;
}

.relationship-dimension .dim-bar-wrap {
    height: 6px;
    background: var(--border);
    border-radius: 3px;
    overflow: hidden;
    margin-bottom: 4px;
}

.relationship-dimension .dim-bar-fill {
    height: 100%;
    background: var(--primary);
    border-radius: 3px;
    transition: width 0.6s ease;
}

.relationship-dimension .dim-value {
    font-size: 11px;
    color: var(--primary);
    font-weight: 600;
}

.share-button {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    margin-top: 8px;
}

@supports (color: color-mix(in srgb, white, black)) {
    :root {
        --bazi-card-bg: color-mix(in srgb, var(--primary) 4%, #ffffff);
        --bazi-surface: color-mix(in srgb, var(--primary) 1.5%, #ffffff);
    }
    [data-theme="dark"] {
        --bazi-card-bg: color-mix(in srgb, var(--primary) 11%, #222E29);
        --bazi-surface: color-mix(in srgb, var(--primary) 6%, #2A3832);
    }
}

/* 八字命理页：卡片底色与星座页一致（--card-bg）；深度解读预览卡除外 */
#pageBazi .card:not(.deep-interp-preview) {
    background: var(--card-bg);
}

#pageBazi .chart-summary-card {
    background: var(--card-bg);
}

#pageBazi .bazi-chart-card {
    background: var(--card-bg);
}

#pageBazi .bazi-collapsible-card.analysis-plain-card,
#pageBazi .bazi-collapsible-card.pattern-card,
#pageBazi .bazi-collapsible-card.wuxing-card,
#pageBazi .bazi-collapsible-card.yongshen-card,
#pageBazi .bazi-collapsible-card.sanyuan-card,
#pageBazi .bazi-collapsible-card.dayun-card {
    background: var(--card-bg);
}

#pageBazi .pattern-status-card {
    background: var(--card-bg);
}
#pageBazi .pattern-status-card.status-good {
    background: color-mix(in srgb, #3E7C67 8%, var(--card-bg));
}
#pageBazi .pattern-status-card.status-warn {
    background: color-mix(in srgb, #A67C52 10%, var(--card-bg));
}
#pageBazi .pattern-status-card.status-accent {
    background: color-mix(in srgb, #7EB8C9 10%, var(--card-bg));
}
#pageBazi .pattern-status-card.status-muted {
    background: var(--card-bg);
}

/* ===== BAZI CHART ===== */
/* ===== 命盘摘要卡片 ===== */
.chart-summary-card {
    padding: 19px 20px 20px;
    background: linear-gradient(135deg, var(--primary-bg), var(--bazi-card-bg));
    border: 1px solid var(--border);
    border-radius: var(--radius);
    position: relative;
    overflow: hidden;
}
.chart-summary-card::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 3px;
    background: linear-gradient(90deg, var(--primary), var(--accent), var(--primary));
    opacity: 0.55;
}
.chart-summary { display: flex; flex-direction: column; gap: 12px; }
.summary-row {
    display: flex; flex-wrap: wrap; gap: 8px 12px;
    align-items: center;
}
.summary-row.date-row {
    gap: 0 12px;
    align-items: center;
    flex-wrap: wrap;
}
.date-text {
    font-size: 13px;
    color: var(--text-secondary);
    white-space: nowrap;
}
.date-sep {
    color: var(--border);
    margin: 0 10px;
    font-size: 12px;
}
.summary-row.pattern-row {
    padding: 12px;
    margin-top: 3px;
    background: var(--bg);
    border-radius: var(--radius-sm);
    border: 1px dashed var(--border);
    gap: 10px 16px;
    display: flex;
    align-items: center;
}
.summary-dm-block {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    font-size: 14px;
    font-weight: 600;
    color: var(--primary);
}
.summary-dm-icon {
    font-size: 18px;
    flex-shrink: 0;
}
.summary-dm-value {
    color: var(--primary);
    font-weight: 700;
    font-size: 15px;
    white-space: nowrap;
}
.summary-dm-desc {
    color: var(--text-secondary);
    font-weight: 400;
    font-size: 13px;
    white-space: nowrap;
}

/* ===== 10行命盘表格 ===== */
.bazi-chart-card {
    padding: 0 20px 24px;
    overflow: hidden;
    position: relative;
    background: var(--bazi-card-bg);
    border: 1px solid var(--border);
}
.bazi-chart-card::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 3px;
    background: linear-gradient(90deg, var(--primary), var(--accent), var(--primary));
    opacity: 0.55;
}
.bazi-chart-card .chart-title {
    padding-top: 21px;
    margin-bottom: 20px;
}
.chart-title {
    font-size: 17px;
    color: var(--primary);
    margin-bottom: 20px;
    font-weight: 700;
    letter-spacing: 3px;
    text-align: left;
}
.chart-title-text {
    position: relative;
    display: inline-block;
    padding-bottom: 14px;
}
.chart-title-text::after {
    content: '';
    position: absolute;
    bottom: 0;
    left: 0;
    width: 100%;
    height: 2px;
    background: linear-gradient(90deg, var(--primary-light), transparent);
    border-radius: 1px;
}
.chart-title.no-gradient .chart-title-text::after {
    display: none;
}

/* ===== 八字分析折叠卡片 ===== */
.bazi-collapsible-card {
    border: 1px solid var(--border);
    padding: 0;
    overflow: hidden;
    transition: all 0.3s ease;
    cursor: default;
}
.bazi-collapsible-card.analysis-plain-card,
.bazi-collapsible-card.pattern-card,
.bazi-collapsible-card.wuxing-card,
.bazi-collapsible-card.yongshen-card,
.bazi-collapsible-card.sanyuan-card,
.bazi-collapsible-card.dayun-card {
    padding: 0;
    background: var(--bazi-card-bg);
}
.bazi-collapsible-card .bazi-card-header {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 16px 20px;
    background: var(--primary-bg);
    cursor: pointer;
    user-select: none;
    border-radius: 8px;
}
.bazi-collapsible-card .bazi-card-icon {
    font-size: 22px;
    line-height: 1;
    flex-shrink: 0;
    width: 32px;
    height: 32px;
    display: flex;
    align-items: center;
    justify-content: center;
}
.bazi-collapsible-card .bazi-card-title-wrap {
    flex: 1;
}
.bazi-collapsible-card .bazi-card-title-wrap h4 {
    font-size: 15px;
    color: var(--primary);
    letter-spacing: 1px;
    font-weight: 600;
    margin: 0;
}
.bazi-collapsible-card .bazi-card-subtitle {
    font-size: 12px;
    color: var(--text-muted);
    margin: 3px 0 0 0;
    letter-spacing: 0.5px;
}
.bazi-collapsible-card .bazi-card-arrow {
    font-size: 12px;
    color: var(--text-muted);
    transition: transform 0.3s ease;
    flex-shrink: 0;
}
.bazi-collapsible-card.expanded .bazi-card-arrow {
    transform: rotate(180deg);
}
.bazi-collapsible-card .bazi-card-body {
    max-height: 0;
    overflow: hidden;
    transition: max-height 0.35s ease-out, padding 0.35s ease-out;
    padding: 0 20px;
}
.bazi-collapsible-card.expanded .bazi-card-body {
    max-height: 3000px;
    padding-top: 20px;
    padding-bottom: 10px;
}
.bazi-collapsible-card .bazi-card-body .chart-title {
    display: none;
}
.bazi-collapsible-card .bazi-card-body .chart-title-text {
    display: none;
}
.bazi-collapsible-card:has(.bazi-card-header:hover) {
    border-color: rgba(74, 111, 98, 0.4);
}
.bazi-collapsible-card .bazi-card-header:hover {
    background: rgba(74, 111, 98, 0.12);
}
/* 八字分析折叠卡：内容区点击不触发整卡 hover 阴影，避免内嵌小卡片「变色」 */
#pageBazi .bazi-collapsible-card:hover {
    box-shadow: var(--shadow);
}
.bazi-chart-table {
    display: grid;
    grid-template-columns: 60px 1fr 1fr 1fr 1fr;
    border: 1px solid var(--border);
    border-radius: var(--radius);
    overflow: visible;
    font-size: 13px;
    font-family: var(--font);
}
.bazi-table-header {
    display: contents;
}
.bazi-table-header .bazi-cell {
    background: linear-gradient(180deg, var(--primary-bg), rgba(74,111,98,0.06));
    color: var(--primary);
    font-weight: 900;
    font-size: 14px;
    padding: 14px 8px;
    border-bottom: 1px solid rgba(74,111,98,0.45);
    letter-spacing: 3px;
    position: relative;
    font-family: var(--font-serif);
}
.bazi-table-header .bazi-cell:first-child {
    border-radius: var(--radius) 0 0 0;
}
.bazi-table-header .bazi-cell.taiji-cell {
    font-size: 25px;
    color: var(--primary);
    opacity: 0.8;
}
.bazi-table-header .bazi-cell:last-child {
    border-radius: 0 var(--radius) 0 0;
}
.bazi-table-row {
    display: contents;
}
.bazi-table-row:nth-child(odd) .bazi-cell {
    background: var(--bg);
}
.bazi-table-row:nth-child(even) .bazi-cell {
    background: var(--bazi-surface);
}
.bazi-cell {
    padding: 10px 8px;
    text-align: center;
    border-bottom: 1px solid rgba(74,111,98,0.25);
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 3px;
    min-height: 48px;
    line-height: 1.5;
    transition: background 0.2s ease, box-shadow 0.2s ease;
}
.bazi-cell.label-cell {
    background: linear-gradient(180deg, var(--primary-bg), rgba(74,111,98,0.04)) !important;
    color: var(--primary);
    font-weight: 700;
    font-size: 12px;
    border-right: 1px solid rgba(74,111,98,0.25);
    letter-spacing: 2px;
    padding: 10px 6px;
}
.bazi-cell.day-pillar {
}
.bazi-cell.day-pillar::before {
    display: none;
}
[data-theme="dark"] .bazi-cell.day-pillar {
}
[data-theme="dark"] .bazi-cell.day-pillar::before {
}

/* 天干/地支五行色 */
.wuxing-sub {
    font-size: 10px;
    color: var(--text-muted);
    letter-spacing: 1px;
}

/* 藏干 */
.hidden-stem {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    text-align: center;
    font-size: 12px;
    font-weight: 600;
    line-height: 1.2;
    white-space: nowrap;
    margin: 2px 1px;
    padding: 2px 6px;
    border-radius: 6px;
    background: rgba(0,0,0,0.03);
    transition: transform 0.15s ease, box-shadow 0.15s ease;
}
.hidden-stem:hover {
    transform: scale(1.15);
    box-shadow: 0 2px 8px rgba(0,0,0,0.1);
}
[data-theme="dark"] .hidden-stem {
    background: rgba(255,255,255,0.06);
}

/* 副星 */
.sub-star {
    display: inline-block;
    font-size: 11px;
    color: var(--text-muted);
    margin: 0 2px;
    padding: 1px 4px;
    border-radius: 4px;
    transition: background 0.15s ease;
}

/* 神煞标签 - 金色主题 */
.shensha-tag {
    display: inline-block;
    font-size: 11px;
    padding: 2px 8px;
    margin: 2px;
    border-radius: 10px;
    background: #FFF8DC;
    border: 1px solid rgba(255, 215, 0, 0.35);
    color: #B8860B;
    white-space: nowrap;
    transition: all 0.2s ease;
    cursor: default;
    font-weight: 600;
    letter-spacing: 0.5px;
    box-shadow: 0 1px 2px rgba(0,0,0,0.04);
}
.shensha-tag:hover {
    background: linear-gradient(135deg, #FFD700, #FFC000);
    color: #5C3A00;
    border-color: #DAA520;
    transform: translateY(-1px);
    box-shadow: 0 2px 8px rgba(255, 215, 0, 0.35);
}
/* 负面神煞标签：灰紫色，与正面金色形成反差 */
.shensha-tag-negative {
    background: #F0EEF2;
    border-color: rgba(160, 140, 180, 0.35);
    color: #7B688A;
}
.shensha-tag-negative:hover {
    background: linear-gradient(135deg, #D5C8E0, #C4B5D0);
    color: #4A3B5A;
    border-color: #A892B8;
    box-shadow: 0 2px 8px rgba(120, 100, 160, 0.3);
}
.no-data {
    color: var(--text-muted);
    font-size: 12px;
    opacity: 1;
}

/* 天干地支行特殊样式 - 核心信息突出 */
.row-stem .bazi-cell,
.row-branch .bazi-cell {
    font-family: "Noto Serif SC", "Source Han Serif SC", "SimSun", "STSong", serif;
    font-size: 18px;
    font-weight: 700;
    min-height: 56px;
    padding: 12px 8px;
}
.row-stem .label-cell,
.row-branch .label-cell {
    font-family: var(--font);
    font-size: 12px;
}

/* 主星行样式 */
.row-main-star .bazi-cell {
    color: var(--primary);
    font-size: 13px;
}
.row-main-star .bazi-cell:not(.label-cell) {
    font-weight: 400;
}

/* 命盘表格行分组 - 核心行与辅助行视觉区分 */
.row-stem .bazi-cell,
.row-branch .bazi-cell,
.row-main-star .bazi-cell {
    border-bottom: 1px solid rgba(74,111,98,0.25);
}
.row-hidden .bazi-cell,
.row-sub-star .bazi-cell {
    border-bottom: 1px solid rgba(74,111,98,0.25);
}

/* 表格行悬停效果 */
.bazi-table-row .bazi-cell {
    transition: background 0.2s ease, box-shadow 0.2s ease;
}
.bazi-table-row:hover .bazi-cell {
    background: var(--primary-bg) !important;
}
.bazi-table-row:hover .bazi-cell.label-cell {
    background: linear-gradient(180deg, var(--primary-bg), rgba(74,111,98,0.08)) !important;
}
.bazi-table-row:hover .bazi-cell.day-pillar {
}

/* ===== 胎元/命宫/身宫 ===== */
.extra-pillars-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
    gap: 10px;
}
.extra-pillar-item {
    background: var(--bazi-surface);
    border: 1px solid var(--border);
    border-radius: 10px;
    padding: 12px 14px;
    text-align: center;
}
.extra-pillar-label {
    font-size: 12px;
    color: var(--text-muted);
    letter-spacing: 2px;
    margin-bottom: 4px;
}
.extra-pillar-gz {
    font-family: "Noto Serif SC", "Source Han Serif SC", "SimSun", "STSong", serif;
    font-size: 20px;
    font-weight: 700;
    letter-spacing: 3px;
    color: var(--text);
    margin-bottom: 6px;
}
.extra-pillar-sha {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 4px;
}
.extra-pillar-line {
    font-size: 12px;
    line-height: 1.7;
    color: var(--text-secondary);
    margin-bottom: 4px;
}

/* ===== 三垣命盘（胎元 / 命宫 / 身宫） ===== */
/* --- Tab 系统 --- */
.sy-tab-bar {
    display: flex;
    gap: 0;
    background: var(--bazi-surface);
    border: 1px solid var(--border);
    border-radius: 12px 12px 0 0;
    overflow: hidden;
}
.sy-tab {
    flex: 1;
    text-align: center;
    padding: 8px 0;
    font-size: 13px;
    font-weight: 600;
    color: var(--text-secondary);
    cursor: pointer;
    border-bottom: 2px solid var(--border);
    transition: color 0.2s, border-color 0.2s;
}
.sy-tab:hover { color: var(--text); }
.sy-tab.active {
    color: var(--primary);
    border-bottom-color: var(--primary);
}
.sy-tab-contents {
    position: relative;
    background: var(--bazi-surface);
    border: 1px solid var(--border);
    border-top: none;
    border-radius: 0 0 12px 12px;
    padding: 12px 16px 14px;
}
.sy-tab-content { display: none; }
.sy-tab-content.active { display: block; }
.sy-tab-contents .sanyuan-palace {
    border: none;
    border-radius: 0;
    padding: 0;
    background: none;
}
.sanyuan-intro {
    font-size: 12px;
    line-height: 1.7;
    color: var(--text-secondary);
    margin: 2px 0 12px;
    padding: 8px 12px;
    background: var(--primary-bg);
    border-radius: 8px;
    border: 1px solid var(--border);
}
.sanyuan-palace {
    background: var(--bazi-surface);
    border: 1px solid var(--border);
    border-radius: 12px;
    padding: 14px 16px;
    display: flex;
    flex-direction: column;
    gap: 7px;
    position: relative;
}
.sy-icon {
    font-size: 18px;
}
.sy-name {
    font-size: 16px;
    font-weight: 700;
    color: var(--text);
}
.sy-stage {
    font-size: 10px;
    color: var(--text-muted);
    background: var(--primary-bg);
    border: 1px solid var(--border);
    border-radius: 20px;
    padding: 2px 8px;
    margin-left: auto;
    white-space: nowrap;
    transform: translateY(2px);
    align-self: center;
}
.sy-gz-row {
    display: flex;
    align-items: flex-end;
    gap: 10px;
}
.sy-gz {
    font-family: "Noto Serif SC", "Source Han Serif SC", "SimSun", "STSong", serif;
    font-size: 26px;
    font-weight: 700;
    letter-spacing: 3px;
    color: var(--text);
}
.sy-nayin {
    font-size: 12px;
    color: var(--text-muted);
    cursor: help;
    transform: translateY(-5px);
}
.sy-wx-row {
    font-size: 12px;
    color: var(--text-secondary);
}
.sy-ten-row {
    font-size: 12px;
    color: var(--text-secondary);
    cursor: default;
}
.sy-hidden {
    cursor: help;
}
.sy-sha-row {
    display: flex;
    flex-wrap: wrap;
    gap: 4px;
    min-height: 22px;
}
.sy-element {
    align-self: flex-start;
    font-size: 11px;
    font-weight: 600;
    border-radius: 6px;
    padding: 2px 10px;
    cursor: help;
}
.sy-role-good {
    color: #1e7d4f;
    background: rgba(107, 155, 107, 0.14);
    border: 1px solid rgba(107, 155, 107, 0.45);
}
.sy-role-bad {
    color: #b23a3a;
    background: rgba(217, 74, 74, 0.12);
    border: 1px solid rgba(217, 74, 74, 0.4);
}
.sy-role-neutral {
    color: var(--text-secondary);
    background: var(--primary-bg);
    border: 1px solid var(--border);
}
.sy-meaning {
    font-size: 12px;
    line-height: 1.75;
    color: var(--text-muted);
}
.sy-stage-row {
    font-size: 11px;
    color: var(--text-secondary);
    cursor: help;
}
.sy-traits {
    display: flex;
    flex-direction: column;
    gap: 5px;
    margin-top: 2px;
}
.sy-trait {
    font-size: 12px;
    line-height: 1.7;
    color: var(--text);
    background: var(--primary-bg);
    padding: 4px 8px;
}
.sy-trait-dot {
    color: var(--primary);
    margin-right: 4px;
    font-size: 9px;
    vertical-align: 1px;
}

/* 动态关系 */
.sanyuan-relations {
    margin-top: 16px;
}
.sy-rel-title {
    font-size: 14px;
    font-weight: 700;
    color: var(--text);
    margin-bottom: 10px;
    letter-spacing: 1px;
}
.sy-rel-group {
    margin-bottom: 12px;
}
.sy-rel-group-title {
    font-size: 12px;
    font-weight: 600;
    color: var(--text-secondary);
    margin-bottom: 6px;
    letter-spacing: 1px;
}
.sy-rel-item {
    display: flex;
    align-items: flex-start;
    gap: 8px;
    padding: 7px 10px;
    border-radius: 8px;
    border: 1px solid var(--border);
    background: var(--bazi-surface);
    margin-bottom: 6px;
    flex-wrap: wrap;
}
.sy-rel-badge {
    flex: 0 0 auto;
    font-size: 11px;
    font-weight: 700;
    color: #fff;
    border-radius: 5px;
    padding: 1px 7px;
    line-height: 1.6;
    cursor: help;
}
.sy-rel-冲 .sy-rel-badge { background: #D94A4A; }
.sy-rel-合 .sy-rel-badge { background: #6B9B6B; }
.sy-rel-害 .sy-rel-badge { background: #C9A44B; }
.sy-rel-text {
    font-size: 12px;
    font-weight: 600;
    color: var(--text);
}
.sy-rel-layer {
    font-size: 10px;
    color: var(--text-muted);
    border: 1px solid var(--border);
    border-radius: 4px;
    padding: 0 5px;
    line-height: 1.6;
}
.sy-rel-detail {
    flex: 1 1 100%;
    font-size: 12px;
    line-height: 1.7;
    color: var(--text-secondary);
}
.sy-rel-empty {
    font-size: 12px;
    color: var(--text-muted);
    padding: 8px 10px;
    border: 1px dashed var(--border);
    border-radius: 8px;
}

/* 干支五行色增强 */
.stem-gan, .branch-zhi {
    display: inline-block;
    font-family: "Noto Serif SC", "Source Han Serif SC", "SimSun", "STSong", serif;
    font-size: 16px;
    font-weight: 700;
    line-height: 1.3;
    letter-spacing: 2px;
    text-shadow: 0 1px 2px rgba(0,0,0,0.06);
}
.stem-wuxing, .branch-wuxing {
    font-size: 12px;
    letter-spacing: 1px;
    margin-top: 2px;
    line-height: 1;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    height: 16px;
}

/* 五行图标通用样式 */
.wx-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 14px;
    height: 14px;
    font-size: 12px;
    line-height: 1;
    vertical-align: middle;
}
.wx-svg {
    display: inline-block;
    vertical-align: middle;
    width: 14px;
    height: auto;
    flex-shrink: 0;
}
/* V3.3.25: 五行图标等高中线对齐(SVG金 与 emoji图标 混排时保持一致), 避免金图标偏高 */
.wx-svg, .wx-icon { vertical-align: middle; }
.wx-icon { height: 14px; line-height: 14px; }
.wx-svg { width: 14px; height: 14px; transform: translateY(2px); }

/* 纯图标悬停提示 */
.wx-icon-tip {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: transform 0.2s ease;
    position: relative;
}
.wx-icon-tip:hover {
    transform: scale(1.2);
}
.wx-icon-tip::after {
    content: attr(data-wx);
    position: absolute;
    bottom: calc(100% + 4px);
    left: 50%;
    transform: translateX(-50%);
    background: var(--text);
    color: var(--bg);
    font-size: 11px;
    padding: 3px 8px;
    border-radius: 4px;
    white-space: nowrap;
    pointer-events: none;
    opacity: 0;
    z-index: 10;
}
.wx-icon-tip:hover::after {
    opacity: 1;
}

/* 藏干区域样式增强 */
.hidden-stems-group {
    display: flex;
    gap: 3px;
    justify-content: center;
    align-items: center;
    flex-direction: column;
    flex-wrap: nowrap;
}

/* 副星区域样式增强 */
.sub-stars-group {
    display: flex;
    gap: 3px;
    justify-content: center;
    align-items: center;
    flex-direction: column;
    flex-wrap: nowrap;
}

/* 神煞区域样式增强 */
.shensha-group {
    display: flex;
    gap: 4px;
    justify-content: center;
    align-items: center;
    flex-direction: column;
    flex-wrap: nowrap;
    width: 100%;
}

/* 纳音行特殊样式 */
.row-na-yin .bazi-cell {
    font-size: 12px;
    color: var(--text-secondary);
    font-style: italic;
}

/* 空亡行样式 */
.row-xun-kong .bazi-cell {
    color: var(--text-secondary);
    font-size: 12px;
}
.row-xun-kong .bazi-cell:not(.label-cell) {
    font-weight: 400;
}

/* 最后一行（神煞）底部圆角 */
.row-shensha .bazi-cell {
    min-height: auto;
    padding: 8px 4px;
}
.row-shensha .bazi-cell:first-child {
    border-radius: 0 0 0 var(--radius);
}
.row-shensha .bazi-cell:last-child {
    border-radius: 0 0 var(--radius) 0;
}

/* 命盘表格整体阴影 */
.bazi-chart-table {
    box-shadow: 0 2px 12px rgba(74,111,98,0.06);
}

/* 暗色主题命盘表格增强 */
[data-theme="dark"] .bazi-chart-table {
    box-shadow: 0 2px 12px rgba(0,0,0,0.3);
}
[data-theme="dark"] .bazi-table-header .bazi-cell {
    background: linear-gradient(180deg, rgba(74,111,98,0.15), rgba(74,111,98,0.06));
}
[data-theme="dark"] .bazi-cell.label-cell {
    background: linear-gradient(180deg, rgba(74,111,98,0.15), rgba(74,111,98,0.04)) !important;
}
[data-theme="dark"] .shensha-tag {
    background: rgba(255, 215, 0, 0.1);
    border-color: rgba(255, 215, 0, 0.25);
    color: #FFD700;
}
[data-theme="dark"] .shensha-tag:hover {
    background: linear-gradient(135deg, rgba(255, 215, 0, 0.25), rgba(255, 192, 0, 0.2));
    color: #FFF8DC;
    border-color: #FFD700;
    box-shadow: 0 2px 8px rgba(255, 215, 0, 0.2);
}
[data-theme="dark"] .stem-gan, [data-theme="dark"] .branch-zhi {
    text-shadow: 0 1px 3px rgba(0,0,0,0.2);
}
[data-theme="dark"] .bazi-table-row:hover .bazi-cell {
    background: rgba(126,184,160,0.08) !important;
}
[data-theme="dark"] .bazi-table-row:hover .bazi-cell.label-cell {
    background: linear-gradient(180deg, rgba(126,184,160,0.15), rgba(126,184,160,0.06)) !important;
}

/* ===== 格局分析卡片 ===== */
.pattern-card { padding: 16px; }
.pattern-header {
    display: flex; align-items: center; gap: 10px;
    margin-bottom: 12px;
    justify-content: flex-start;
}
.pattern-badge {
    font-size: 15px; font-weight: 700;
    padding: 6px 14px; border-radius: 12px;
}
.pattern-strength-badge {
    font-size: 13px; padding: 4px 12px;
    background: var(--bg); border: 1px solid var(--border);
    border-radius: 10px; color: var(--text-secondary);
}
.pattern-strength-badge.strong {
    color: #C62828; background: #FFEBEE; border-color: #EF9A9A;
    font-weight: 600;
}
.pattern-strength-badge.weak {
    color: #1565C0; background: #E3F2FD; border-color: #90CAF9;
    font-weight: 600;
}
[data-theme="dark"] .pattern-strength-badge.strong {
    background: rgba(198,40,40,0.15); border-color: rgba(239,154,154,0.3);
    color: #EF9A9A;
}
[data-theme="dark"] .pattern-strength-badge.weak {
    background: rgba(21,101,192,0.15); border-color: rgba(144,202,249,0.3);
    color: #90CAF9;
}
.pattern-desc {
    font-size: 13px; color: var(--text-secondary);
    line-height: 1.7; margin-bottom: 12px;
}

/* 强弱分析 */
.strength-analysis {
    display: flex; align-items: center; gap: 12px;
    margin-bottom: 12px;
    padding: 10px 14px;
    background: var(--bg); border-radius: 10px;
}
.strength-detail {
    font-size: 13px; color: var(--text-secondary);
    flex: 1;
}
.strength-factors { display: flex; gap: 6px; }
.factor-tag {
    font-size: 11px; padding: 3px 10px;
    border-radius: 8px;
    background: var(--card-bg);
    border: 1px solid var(--border);
    color: var(--text-muted);
}
.factor-tag.active {
    background: var(--primary-bg);
    color: var(--primary);
    border-color: var(--primary);
    font-weight: 600;
}

/* 特殊格局 */
.special-pattern-info {
    margin-bottom: 12px;
    padding: 10px 14px;
    background: #FFF3E0; border-radius: 10px;
    border: 1px solid #FFB74D;
}
[data-theme="dark"] .special-pattern-info {
    background: rgba(230,81,0,0.1); border-color: rgba(255,183,77,0.2);
}
.special-pattern-badge {
    font-size: 13px; font-weight: 700;
    color: #E65100;
}
.special-pattern-desc {
    font-size: 12px; color: #BF360C;
    margin-top: 6px;
}
[data-theme="dark"] .special-pattern-desc {
    color: #FFB74D;
}

/* 格局判定网格 */
.pattern-status-section { margin-bottom: 14px; }
.pattern-status-title {
    font-size: 12px; font-weight: 600; color: var(--text-muted);
    letter-spacing: 0.5px; margin-bottom: 8px;
}
.pattern-status-grid {
    display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px;
}
.pattern-status-card {
    padding: 10px 12px;
    background: var(--bazi-card-bg);
    border: 1px solid var(--border);
    border-radius: var(--radius-sm);
    min-height: 88px;
    -webkit-tap-highlight-color: transparent;
}
.pattern-status-card.status-good {
    border-color: rgba(62, 124, 103, 0.45);
    background: color-mix(in srgb, #3E7C67 8%, var(--bazi-card-bg));
}
.pattern-status-card.status-warn {
    border-color: rgba(166, 124, 82, 0.5);
    background: color-mix(in srgb, #A67C52 10%, var(--bazi-card-bg));
}
.pattern-status-card.status-accent {
    border-color: rgba(126, 184, 201, 0.45);
    background: color-mix(in srgb, #7EB8C9 10%, var(--bazi-card-bg));
}
.pattern-status-card.status-muted {
    background: var(--bazi-card-bg);
}
.psc-head { display: flex; align-items: center; gap: 6px; margin-bottom: 4px; }
.psc-icon { font-size: 14px; line-height: 1; }
.psc-title { font-size: 11px; color: var(--text-muted); font-weight: 600; cursor: help; }
.psc-label { font-size: 14px; font-weight: 700; color: var(--primary); margin-bottom: 4px; }
.psc-desc { font-size: 11px; line-height: 1.45; color: var(--text-secondary); margin: 0; }
.psc-tags { display: flex; flex-wrap: wrap; gap: 4px; margin-top: 6px; }
.psc-tag {
    font-size: 10px; padding: 2px 6px; border-radius: 6px;
    background: var(--card-bg); border: 1px solid var(--border); color: var(--text-muted);
}
.psc-tag.active { background: var(--primary-bg); color: var(--primary); border-color: var(--primary); }

/* 十神分布 */
.gods-dist {
    display: flex; flex-wrap: wrap; align-items: center;
    gap: 6px; margin-bottom: 12px;
}
.gods-label {
    font-size: 12px; color: var(--text-muted);
}
.god-tag {
    font-size: 11px; padding: 2px 8px;
    background: var(--bg); border: 1px solid var(--border);
    border-radius: 8px; color: var(--text-secondary);
}

/* 喜用神 */
.yongshen-section {
    margin-top: 4px;
    padding: 14px;
    background: var(--bg);
    border-radius: 12px;
    border: 1px solid var(--border);
}
.yongshen-title {
    font-size: 13px; color: var(--primary);
    margin-bottom: 10px;
}
.yongshen-row {
    display: flex; flex-direction: column; gap: 8px;
}
.yongshen-item {
    display: flex; align-items: flex-start; gap: 8px;
}
.ys-label {
    font-size: 11px; font-weight: 700; padding: 2px 8px;
    border-radius: 6px; white-space: nowrap;
    min-width: 36px; text-align: center;
}
.yongshen-item.xi .ys-label {
    background: #E8F5E9; color: #2E7D32;
}
.yongshen-item.yong .ys-label {
    background: #E3F2FD; color: #1565C0;
}
.yongshen-item.ji .ys-label {
    background: #FFEBEE; color: #C62828;
}
[data-theme="dark"] .yongshen-item.xi .ys-label {
    background: rgba(46,125,50,0.2); color: #81C784;
}
[data-theme="dark"] .yongshen-item.yong .ys-label {
    background: rgba(21,101,192,0.2); color: #64B5F6;
}
[data-theme="dark"] .yongshen-item.ji .ys-label {
    background: rgba(198,40,40,0.2); color: #EF9A9A;
}
.ys-value {
    font-size: 12px; color: var(--text-secondary);
    line-height: 1.5;
    display: inline-flex;
    align-items: center;
    gap: 6px;
}
.yongshen-suggestions {
    display: flex; flex-wrap: wrap; gap: 8px;
    margin-top: 10px; padding-top: 10px;
    border-top: 1px solid var(--border);
}
.sug-item {
    font-size: 11px; color: var(--text-muted);
    padding: 3px 10px;
    background: var(--card-bg);
    border-radius: 8px;
}

/* ===== 五行分析卡片 ===== */
.wuxing-card { padding: 16px; }

/* 雷达图 + 颜色块 布局 */
.wuxing-chart-wrap {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 20px;
    margin-bottom: 16px;
    padding: 12px;
}
.wuxing-radar {
    flex: 0 0 318px;
    width: 318px;
    height: 318px;
    margin-left: -40px;
    margin-top: 20px;
}
.wuxing-radar-svg {
    width: 100%;
    height: 100%;
}
.wuxing-blocks {
    flex: 1;
    max-width: 200px;
    height: 318px;
    display: flex;
    flex-direction: column;
    margin-left: 15px;
    justify-content: center;
    gap: 14px;
    padding-left: 5px;
}
.wx-block {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 8px 12px;
    background: var(--bazi-surface);
    border-radius: 8px;
    border-left: 3px solid;
    transition: var(--transition);
}
.wx-block:hover {
    background: var(--primary-bg);
    transform: translateX(2px);
}
.wx-block-dm {
    background: var(--primary-bg);
}
.wx-block-icon {
    flex: 0 0 14px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    height: 14px;
}
.wx-block-info {
    flex: 1;
    display: flex;
    flex-direction: column;
    gap: 4px;
    min-width: 0;
}
.wx-block-name {
    font-size: 13px;
    font-weight: 600;
    color: var(--text-primary);
}
.wx-block-name small {
    font-size: 11px;
    color: var(--primary);
    font-weight: 400;
}
.wx-block-bar-wrap {
    display: block;
    width: 100%;
    height: 4px;
    background: var(--border);
    border-radius: 2px;
    overflow: hidden;
}
.wx-block-bar {
    display: block;
    height: 100%;
    border-radius: 2px;
    transition: width 0.6s ease;
}
.wx-block-count {
    font-size: 16px;
    font-weight: 700;
    color: var(--text-primary);
    min-width: 24px;
    text-align: center;
}

/* 五行文字分析 */
.wx-analysis-text {
    padding: 16px;
}
.wx-analysis-text p {
    font-size: 13px;
    color: var(--text-secondary);
    line-height: 1.8;
    margin-bottom: 10px;
}
.wx-analysis-text p:last-child {
    margin-bottom: 0;
}
.wx-balance-badge {
    display: inline-block; font-size: 12px; font-weight: 600; color: var(--primary);
    background: var(--primary-bg); border: 1px solid rgba(74, 111, 98, 0.2);
    padding: 3px 10px; border-radius: 8px; margin: -4px 0 10px 0;
}
.wx-meta-row { display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: 10px; }
.wx-meta-chip {
    font-size: 11px; padding: 4px 10px; border-radius: 8px;
    background: var(--bg); border: 1px solid var(--border); color: var(--text-secondary);
}

/* 四柱五行分析模块 */
.wx-section {
    margin: 0;
    padding: 16px;
    background: var(--bg);
    border: 1px solid var(--border);
    border-radius: 10px;
}
.wx-section + .wx-section {
    margin-top: 14px;
}
.wx-section-title {
    font-size: 13px;
    font-weight: 600;
    color: var(--primary);
    letter-spacing: 0.5px;
    margin: 0 0 12px 0;
    padding: 0;
    text-align: center;
}
.wx-divider {
    height: 1px;
    background: var(--border);
    margin: 12px 0;
}

/* 三垣五行分析 tab */
.wx-section .sy-tab-bar {
    margin: 0 -16px;
    padding: 0 16px;
    background: transparent;
    border: none;
    border-bottom: 1px solid var(--border);
    border-radius: 0;
    position: relative;
}
.wx-section .sy-tab-indicator {
    position: absolute;
    bottom: -1px;
    height: 2px;
    background: var(--primary);
    transition: left 0.3s ease;
    z-index: 1;
}
.wx-section .sy-tab {
    font-size: 13px; padding: 7px 0;
    border-bottom: none;
}
.wx-section .sy-tab:nth-child(2) {
    transform: translateX(-13px);
}
.wx-section .sy-tab:nth-child(3) {
    transform: translateX(-1.5px);
}
.wx-section .sy-tab:last-child {
    transform: translateX(7px);
}
.wx-section .sy-tab.active {
    border-bottom: none;
    color: var(--primary);
    font-weight: 700;
}
.wx-section .sy-tab-contents {
    background: transparent;
    border: none;
    padding: 12px 0 0;
}
.wx-section .sy-tab-content {
    animation: floatUp 0.25s ease;
}
/* 宫位头部行 */
.sy-wx-head {
    display: flex; align-items: center; gap: 6px;
    padding-bottom: 6px;
    margin-bottom: 8px;
    border-bottom: 1px solid var(--border);
}
.sy-wx-icon { font-size: 15px; }
.sy-wx-name { font-size: 14px; font-weight: 700; color: var(--text); }
.sy-wx-gz { font-size: 14px; font-weight: 700; color: var(--primary); }
/* 内容区 */
.sy-wx-body { display: flex; flex-direction: column; gap: 8px; }
.sy-wx-head-row {
    display: flex;
    align-items: center;
    justify-content: flex-start;
    gap: 10px;
    font-size: 14px;
}
.sy-wx-head-row .sy-wx-gz {
    font-size: 14px;
    font-weight: 700;
    color: var(--primary);
}
.sy-wx-ele-inline {
    display: inline-flex;
    gap: 4px;
    align-items: center;
}
.sy-wx-ele-inline .wx-chip {
    font-size: 11px;
    padding: 0 5px;
}
.sy-wx-sep {
    color: var(--text-muted);
    font-size: 12px;
}
.sy-wx-cell {
    display: flex; align-items: center; gap: 6px;
    font-size: 12px; color: var(--text-secondary); flex-wrap: wrap;
}
.sy-wx-label { font-size: 12px; color: var(--text-muted); flex-shrink: 0; min-width: 28px; }
.wx-chip {
    display: inline-flex; align-items: center; gap: 3px;
    font-size: 12px; font-weight: 600;
    border: 1px solid; border-radius: 6px;
    padding: 1px 6px; background: var(--card-bg);
}
.sy-wx-cell .sy-role-good { color: #16A34A; font-weight: 700; background: none; border: none; }
.sy-wx-cell .sy-role-bad { color: #DC2626; font-weight: 700; background: none; border: none; }
.sy-wx-cell .sy-role-neutral { color: var(--text-secondary); font-weight: 600; background: none; border: none; }
.sy-wx-note {
    font-size: 12px; color: var(--text-secondary);
    line-height: 1.6;
    padding: 0;
    margin-top: 2px;
}
/* 与四柱生克 */
.sy-wx-pillars {
    margin-top: 6px;
    padding-top: 8px;
    border-top: 1px solid var(--border);
}
.sy-wx-subtitle {
    font-size: 12px; font-weight: 600; color: var(--text);
    margin-bottom: 6px;
}
.sy-wx-pillar-grid {
    display: flex; flex-direction: column; gap: 6px;
}
.sy-wx-pillar {
    display: flex; align-items: center; flex-wrap: wrap; gap: 6px;
    padding: 6px 0;
    border-bottom: 1px solid rgba(74,111,98,0.08);
}
.sy-wx-pillar:last-child { border-bottom: none; }
.sy-wx-pillar-top {
    display: flex; align-items: center; gap: 4px; flex-shrink: 0;
}
.sy-wx-pillar-name {
    font-size: 12px; font-weight: 700; color: var(--text);
}
.sy-wx-pillar-gz {
    font-size: 12px; font-weight: 600; color: var(--primary);
}
.sy-wx-pillar-wx {
    display: inline-flex; align-items: center; gap: 3px;
}
.sy-wx-pillar-wx .wx-chip { font-size: 11px; padding: 0 5px; }
.sy-wx-pillar-rel {
    display: inline-flex; align-items: center; gap: 3px;
}
.sy-wx-pillar-rel .sy-rel-badge { font-size: 11px; }
.sy-wx-pillar-note {
    font-size: 11px; color: var(--text-secondary); line-height: 1.4;
    width: 100%;
}
@media (max-width: 480px) {
    .sy-wx-pillar { flex-wrap: wrap; }
}
/* 生克徽章 */
.sy-wx-cell .sy-rel-badge,
.sy-wx-pillar-rel .sy-rel-badge {
    display: inline-block; font-size: 11px; font-weight: 700;
    padding: 1px 7px; border-radius: 6px; color: #fff;
}
.sy-wx-cell .sy-rel-生, .sy-wx-pillar-rel .sy-rel-生 { background: #16A34A; }
.sy-wx-cell .sy-rel-同, .sy-wx-pillar-rel .sy-rel-同 { background: #4A90D9; }
.sy-wx-cell .sy-rel-泄, .sy-wx-pillar-rel .sy-rel-泄 { background: #D4A017; }
.sy-wx-cell .sy-rel-克, .sy-wx-pillar-rel .sy-rel-克 { background: #DC2626; }
.sy-wx-cell .sy-rel-耗, .sy-wx-pillar-rel .sy-rel-耗 { background: #C9A44B; }
[data-theme="dark"] .sy-wx-note { background: rgba(255,255,255,0.04); }
[data-theme="dark"] .wx-section .sy-tab-contents { background: transparent; border: none; }

@media (max-width: 600px) {
    .pattern-status-grid { grid-template-columns: 1fr; }
    .wuxing-chart-wrap {
        flex-direction: column;
        align-items: center;
        gap: 8px;
        padding: 8px;
    }
    .wuxing-radar {
        width: 160px;
        height: 160px;
        margin-left: 0;
        margin-top: 0;
        flex: none;
    }
    .wuxing-blocks {
        width: 100%;
        max-width: 100%;
        height: auto;
        flex-direction: row;
        flex-wrap: wrap;
        margin-left: 0;
        padding-left: 0;
        gap: 6px;
        justify-content: center;
    }
    .wx-block {
        padding: 4px 8px;
        gap: 6px;
        flex: 0 0 auto;
        min-width: 60px;
    }
    .wx-block-icon { flex: 0 0 12px; height: 12px; }
    .wx-block-name { font-size: 11px; }
    .wx-block-count { font-size: 14px; }
    .wx-analysis-text p {
        font-size: 12px;
    }
}

/* ===== 大运卡片 ===== */
.dayun-card { padding: 16px; }

/* 大运趋势图 - 新 */
.dayun-chart-wrap {
    margin-bottom: 16px;
    padding: 12px;
    background: var(--bg);
    border-radius: var(--radius-sm);
    border: 1px solid var(--border);
}
.dayun-chart {
    display: flex;
    gap: 6px;
}
.dayun-chart-yaxis {
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    font-size: 10px;
    color: var(--text-muted);
    padding-right: 4px;
    min-width: 20px;
    text-align: right;
}
.dayun-chart-content {
    flex: 1;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
}
.dayun-chart-inner {
    width: 100%;
}
.dayun-svg {
    display: block;
    width: 100%;
    height: auto;
}
.dayun-dot {
    cursor: pointer;
    transition: r 0.2s;
}
.dayun-dot:hover { r: 6; }
.dayun-dot-glow {
    animation: pulseRing 2s ease-in-out infinite;
}
@keyframes pulseRing {
    0%, 100% { opacity: 0.6; r: 9; }
    50% { opacity: 0.2; r: 12; }
}
.dayun-chart-labels {
    display: flex;
    margin-top: 4px;
    width: 100%;
}
.dayun-chart-label {
    flex: 1;
    text-align: center;
    font-size: 10px;
    color: var(--text-muted);
    display: flex;
    flex-direction: column;
    gap: 1px;
    min-width: 50px;
}
.dayun-chart-gz {
    font-size: 11px;
    font-weight: 600;
    color: var(--text-secondary);
}
.dayun-chart-year {
    font-size: 9px;
    color: var(--text-muted);
}
.dayun-chart-age {
    font-size: 9px;
    color: var(--text-muted);
}

/* 大运列表 - 新增强 */
.dayun-scroll { overflow-x: auto; -webkit-overflow-scrolling: touch; }
.dayun-row {
    display: flex; gap: 8px; padding-bottom: 4px;
}
.dayun-item {
    flex-shrink: 0;
    text-align: center;
    padding: 10px 12px;
    background: var(--bg);
    border: 1px solid var(--border);
    border-radius: 10px;
    transition: var(--transition);
    min-width: 76px;
}
.dayun-item.current {
    border-color: var(--primary);
    background: var(--primary-bg);
    box-shadow: 0 0 0 2px rgba(74,144,217,0.15);
}
.dayun-ganzhi {
    font-size: 14px; font-weight: 700;
    color: var(--text); margin-bottom: 4px;
}
.dayun-item.current .dayun-ganzhi { color: var(--primary); }
.dayun-years {
    font-size: 11px;
    color: var(--text-secondary);
    margin-bottom: 2px;
}
.dayun-age {
    font-size: 11px; color: var(--text-muted);
}
.dayun-score {
    font-size: 12px; font-weight: 700;
    margin-top: 4px;
    padding: 2px 6px;
    border-radius: 6px;
    display: inline-block;
}
.dayun-score.good { color: #2E7D32; background: #E8F5E9; }
.dayun-score.warning { color: #E65100; background: #FFF3E0; }
.dayun-score.danger { color: #C62828; background: #FFEBEE; }
[data-theme="dark"] .dayun-score.good { background: rgba(46,125,50,0.2); color: #81C784; }
[data-theme="dark"] .dayun-score.warning { background: rgba(230,81,0,0.2); color: #FFB74D; }
[data-theme="dark"] .dayun-score.danger { background: rgba(198,40,40,0.2); color: #EF9A9A; }

/* ===== 大运Tab + 流年面板（合一） ===== */
.dayun-liunian-panel {
    margin-top: 12px;
    padding: 0;
    background: var(--bg);
    border-radius: var(--radius-sm);
    border: 1px solid var(--border);
    overflow: hidden;
}

.dayun-liunian-panel .dayun-tabs-wrap {
    margin-top: 0;
    padding: 0;
    background: transparent;
    border: none;
    border-radius: 0;
}

.dayun-liunian-panel .dayun-tabs {
    border-bottom: 1px solid var(--border);
}

.dayun-liunian-panel .liunian-content {
    padding: 12px;
}

.dayun-tabs-wrap {
    padding: 0;
    background: var(--bg);
    border-radius: var(--radius-sm);
    border: 1px solid var(--border);
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
    -ms-overflow-style: none;
}
.dayun-tabs-wrap::-webkit-scrollbar { display: none; }

.dayun-tabs {
    display: flex;
    gap: 0;
    border-bottom: 2px solid var(--border);
    min-width: max-content;
    width: 100%;
}

.dayun-tab {
    flex: 1 1 auto;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 2px;
    padding: 10px 6px 8px;
    border: none;
    border-bottom: 2px solid transparent;
    margin-bottom: -2px;
    background: transparent;
    color: var(--text-muted);
    font-family: var(--font);
    font-size: 11px;
    cursor: pointer;
    transition: all 0.25s ease;
    -webkit-tap-highlight-color: transparent;
    touch-action: manipulation;
    min-width: 48px;
    white-space: nowrap;
}

.dayun-tab:hover {
    color: var(--primary);
    background: var(--primary-bg);
}

.dayun-tab:active {
    transform: scale(0.96);
}

.dayun-tab.active {
    color: var(--primary);
    border-bottom-color: var(--primary);
    font-weight: 500;
}

.dayun-tab.is-current {
    background: var(--primary-bg);
}

.dayun-tab.is-current .dayun-tab-gz {
    color: var(--primary);
    font-weight: 700;
}

.dayun-tab-gz {
    font-size: 14px;
    font-weight: 600;
    color: var(--text);
    transition: color 0.25s ease;
}

.dayun-tab-year {
    font-size: 10px;
    color: var(--text-secondary);
}

.dayun-tab.active .dayun-tab-year,
.dayun-tab.active .dayun-tab-age {
    color: var(--primary);
}

.dayun-tab-age {
    font-size: 10px;
    color: var(--text-muted);
}

.dayun-tab-shensha {
    font-size: 9px;
    line-height: 1.3;
    color: var(--text-muted);
    max-width: 72px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    display: inline-block;
}

.dayun-tab.active .dayun-tab-shensha {
    color: var(--primary);
}

/* ===== 流年列表 ===== */
@keyframes liunianFadeIn {
    from { opacity: 0; transform: translateY(6px); }
    to { opacity: 1; transform: translateY(0); }
}

.liunian-list {
    display: flex;
    flex-direction: column;
    gap: 6px;
    max-height: 360px;
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
}

.liunian-item {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 8px 10px;
    background: var(--bazi-surface);
    border-radius: 8px;
    border: 1px solid var(--border);
    transition: background 0.2s ease;
}

.liunian-item:hover {
    background: var(--primary-bg);
}

.liunian-year {
    font-size: 13px;
    font-weight: 700;
    color: var(--text);
    min-width: 42px;
}

.liunian-ganzhi {
    font-size: 14px;
    font-weight: 600;
    color: var(--text-secondary);
    min-width: 32px;
}

.liunian-score {
    font-size: 12px;
    font-weight: 700;
    padding: 2px 8px;
    border-radius: 10px;
    min-width: 28px;
    text-align: center;
}

.liunian-score.ln-good {
    color: #2E7D32;
    background: #E8F5E9;
}

.liunian-score.ln-neutral {
    color: #E65100;
    background: #FFF3E0;
}

.liunian-score.ln-bad {
    color: #C62828;
    background: #FFEBEE;
}

[data-theme="dark"] .liunian-score.ln-good {
    background: rgba(46,125,50,0.25);
    color: #81C784;
}

[data-theme="dark"] .liunian-score.ln-neutral {
    background: rgba(230,81,0,0.2);
    color: #FFB74D;
}

[data-theme="dark"] .liunian-score.ln-bad {
    background: rgba(198,40,40,0.25);
    color: #EF9A9A;
}

.liunian-desc {
    flex: 1;
    font-size: 12px;
    color: var(--text-secondary);
    line-height: 1.4;
}

/* ===== 深度解读卡片 ===== */
.interpretation-card { padding: 16px 20px; }

/* ===== 八字深度解读 玻璃态预览卡片 ===== */
.deep-interp-preview {
    position: relative;
    overflow: hidden;
    padding: 0;
    background: linear-gradient(160deg, rgba(55,95,80,0.44) 0%, rgba(65,115,95,0.34) 25%, rgba(90,145,120,0.22) 50%, rgba(130,180,155,0.14) 75%, rgba(180,210,195,0.06) 100%);
    backdrop-filter: blur(20px) saturate(1.2);
    -webkit-backdrop-filter: blur(20px) saturate(1.2);
    border: 1px solid rgba(255, 255, 255, 0.35);
    border-radius: var(--radius);
    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.10), 0 2px 8px rgba(0, 0, 0, 0.05), inset 0 1px 0 rgba(255, 255, 255, 0.25);
    transition: all 0.4s cubic-bezier(0.25, 0.46, 0.45, 0.94);
    cursor: pointer;
}
/* 卡片纹理叠加层 */
.deep-interp-preview::before {
    content: '';
    position: absolute;
    inset: 0;
    z-index: 0;
    pointer-events: none;
    opacity: 0.20;
    background-image:
        repeating-linear-gradient(0deg, transparent, transparent 2px, rgba(74,111,98,0.10) 2px, rgba(74,111,98,0.10) 3px),
        repeating-linear-gradient(90deg, transparent, transparent 2px, rgba(74,111,98,0.07) 2px, rgba(74,111,98,0.07) 3px);
    border-radius: var(--radius);
}
/* 渐变边框模拟（覆盖在border之上） */
.deep-interp-preview .deep-interp-border {
    position: absolute;
    inset: -1px;
    z-index: 3;
    pointer-events: none;
    border-radius: var(--radius);
    border: 1px solid transparent;
    background: linear-gradient(135deg, rgba(255,255,255,0.35) 0%, rgba(255,255,255,0.05) 40%, rgba(255,255,255,0.15) 70%, rgba(255,255,255,0.25) 100%) border-box;
    -webkit-mask: linear-gradient(#fff 0 0) padding-box, linear-gradient(#fff 0 0);
    -webkit-mask-composite: xor;
    mask: linear-gradient(#fff 0 0) padding-box, linear-gradient(#fff 0 0);
    mask-composite: exclude;
}
/* 顶部装饰线 */
.deep-interp-preview::after {
    content: '';
    position: absolute;
    top: 0;
    left: 15%;
    right: 15%;
    height: 1px;
    z-index: 4;
    pointer-events: none;
    background: linear-gradient(90deg, transparent, rgba(74,111,98,0.35), rgba(74,111,98,0.15), transparent);
}

[data-theme="dark"] .deep-interp-preview {
    background: linear-gradient(160deg, rgba(25,55,42,0.60) 0%, rgba(30,65,50,0.44) 25%, rgba(40,80,62,0.28) 50%, rgba(55,100,80,0.16) 75%, rgba(80,130,110,0.08) 100%);
    border: 1px solid rgba(255, 255, 255, 0.10);
    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.20), 0 2px 8px rgba(0, 0, 0, 0.10), inset 0 1px 0 rgba(255, 255, 255, 0.04);
}
/* 暗色模式纹理 */
[data-theme="dark"] .deep-interp-preview::before {
    opacity: 0.18;
    background-image:
        repeating-linear-gradient(0deg, transparent, transparent 2px, rgba(126,184,160,0.08) 2px, rgba(126,184,160,0.08) 3px),
        repeating-linear-gradient(90deg, transparent, transparent 2px, rgba(126,184,160,0.05) 2px, rgba(126,184,160,0.05) 3px);
}
/* 暗色模式渐变边框 */
[data-theme="dark"] .deep-interp-preview .deep-interp-border {
    background: linear-gradient(135deg, rgba(255,255,255,0.12) 0%, rgba(255,255,255,0.02) 40%, rgba(255,255,255,0.06) 70%, rgba(255,255,255,0.10) 100%) border-box;
}
/* 暗色模式装饰线 */
[data-theme="dark"] .deep-interp-preview::after {
    background: linear-gradient(90deg, transparent, rgba(126,184,160,0.3), rgba(126,184,160,0.15), transparent);
}

.deep-interp-preview:hover {
    transform: translateY(-4px);
    box-shadow: 0 16px 48px rgba(0, 0, 0, 0.25), 0 4px 12px rgba(0, 0, 0, 0.12);
    border-color: rgba(255, 255, 255, 0.4);
}

[data-theme="dark"] .deep-interp-preview:hover {
    box-shadow: 0 16px 48px rgba(0, 0, 0, 0.25), 0 4px 12px rgba(0, 0, 0, 0.12);
    border-color: rgba(255, 255, 255, 0.1);
}

/* 玻璃态光晕 */
.deep-interp-glow {
    position: absolute;
    top: -40%;
    right: -20%;
    width: 60%;
    height: 140%;
    background: radial-gradient(ellipse at center, rgba(180, 210, 190, 0.15) 0%, transparent 70%);
    pointer-events: none;
    transition: opacity 0.4s ease;
}
/* 第二光晕（左下角） */
.deep-interp-glow2 {
    position: absolute;
    bottom: -30%;
    left: -15%;
    width: 50%;
    height: 120%;
    background: radial-gradient(ellipse at center, rgba(160, 180, 200, 0.10) 0%, transparent 70%);
    pointer-events: none;
    transition: opacity 0.4s ease;
}

[data-theme="dark"] .deep-interp-glow {
    background: radial-gradient(ellipse at center, rgba(126, 184, 160, 0.1) 0%, transparent 70%);
}

[data-theme="dark"] .deep-interp-glow2 {
    background: radial-gradient(ellipse at center, rgba(106, 172, 191, 0.08) 0%, transparent 70%);
}

.deep-interp-preview:hover .deep-interp-glow {
    opacity: 1.5;
}

.deep-interp-preview:hover .deep-interp-glow2 {
    opacity: 1.8;
}

/* 玻璃态内容 */
.deep-interp-content {
    position: relative;
    z-index: 1;
    padding: 28px 28px 24px;
    text-align: center;
    overflow: hidden;
    border-radius: var(--radius);
}

.deep-interp-icon {
    font-size: 36px;
    margin-bottom: 12px;
    filter: drop-shadow(0 2px 4px rgba(74, 111, 98, 0.15));
}

.deep-interp-title {
    font-size: 18px;
    font-weight: 700;
    color: #D4E8D8;
    letter-spacing: 3px;
    margin-bottom: 12px;
    text-shadow: 0 1px 2px rgba(0,0,0,0.2);
    position: relative;
}
.deep-interp-title::after {
    content: '';
    display: block;
    width: 40px;
    height: 1px;
    margin: 10px auto 0;
    background: linear-gradient(90deg, transparent, rgba(255,255,255,0.3), transparent);
}

[data-theme="light"] .deep-interp-title {
    color: #2C5A44;
    text-shadow: none;
}
[data-theme="light"] .deep-interp-title::after {
    background: linear-gradient(90deg, transparent, rgba(74,111,98,0.2), transparent);
}

.deep-interp-desc {
    font-size: 13px;
    color: rgba(255,255,255,0.82);
    line-height: 1.9;
    margin-bottom: 8px;
    max-width: 520px;
    margin-left: auto;
    margin-right: auto;
    letter-spacing: 0.5px;
}

[data-theme="light"] .deep-interp-desc {
    color: rgba(50,80,65,0.85);
}

.deep-interp-count {
    font-size: 13px;
    color: rgba(255,255,255,0.6);
    line-height: 1.6;
    margin-bottom: 16px;
    letter-spacing: 1px;
}

[data-theme="light"] .deep-interp-count {
    color: rgba(50,80,65,0.65);
}

.deep-interp-arrow {
    display: inline-block;
    font-size: 13px;
    color: rgba(255,255,255,0.9);
    font-weight: 600;
    letter-spacing: 2px;
    padding: 8px 24px;
    border: 1px solid rgba(255,255,255,0.35);
    border-radius: 24px;
    transition: all 0.3s ease;
    background: rgba(255,255,255,0.08);
}

[data-theme="light"] .deep-interp-arrow {
    color: rgba(50,80,65,0.85);
    border-color: rgba(50,80,65,0.25);
    background: rgba(255,255,255,0.3);
}

.deep-interp-preview:hover .deep-interp-arrow {
    background: rgba(255,255,255,0.2);
    color: #fff;
    border-color: rgba(255,255,255,0.6);
    box-shadow: 0 4px 16px rgba(0, 0, 0, 0.3);
    transform: translateY(-1px);
}

[data-theme="light"] .deep-interp-preview:hover .deep-interp-arrow {
    background: rgba(42,90,70,0.12);
    color: #1A3A2C;
    border-color: rgba(42,90,70,0.4);
    box-shadow: 0 4px 16px rgba(42,90,70,0.15);
}

@media (max-width: 600px) {
    .deep-interp-content {
        padding: 20px 12px 18px;
    }
    .deep-interp-icon {
        font-size: 28px;
        margin-bottom: 8px;
    }
    .deep-interp-title {
        font-size: 16px;
    }
    .deep-interp-desc {
        font-size: 12px;
        line-height: 1.7;
    }
    .deep-interp-arrow {
        font-size: 12px;
        padding: 6px 18px;
    }
}
/* ===== 八字深度解读 付费弹窗（主页面） ===== */
.deep-paywall-overlay {
    position: fixed; top: 0; left: 0; right: 0; bottom: 0;
    background: rgba(0,0,0,0.6); z-index: 9999;
    display: flex; align-items: center; justify-content: center;
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
    animation: paywallFadeIn 0.3s ease;
}
@keyframes paywallFadeIn {
    from { opacity: 0; }
    to { opacity: 1; }
}
.deep-paywall-card {
    background: var(--card-bg, #FFF);
    border-radius: 16px;
    padding: 28px 24px 20px;
    max-width: 380px; width: 90%;
    position: relative;
    text-align: center;
    box-shadow: 0 20px 60px rgba(0,0,0,0.3);
    animation: paywallSlideUp 0.4s cubic-bezier(0.16, 1, 0.3, 1);
}
@keyframes paywallSlideUp {
    from { opacity: 0; transform: translateY(30px) scale(0.96); }
    to { opacity: 1; transform: translateY(0) scale(1); }
}
.deep-paywall-icon { font-size: 36px; margin-bottom: 10px; }
.deep-paywall-close {
    position: absolute; top: 12px; right: 14px;
    width: 28px; height: 28px; line-height: 28px;
    text-align: center; font-size: 16px; cursor: pointer;
    border-radius: 50%; color: var(--text-secondary);
    transition: all 0.2s; background: var(--bg, #F8F6F2);
}
.deep-paywall-close:hover { background: var(--border, #E8E4DC); }
.deep-paywall-card h2 {
    font-size: 18px; color: var(--primary, #4A90D9);
    margin-bottom: 6px; letter-spacing: 1px;
}
.deep-paywall-price {
    font-size: 30px; font-weight: 800; color: #F5A623;
    margin: 12px 0 6px;
}
.deep-paywall-price small { font-size: 14px; font-weight: 400; }
.deep-paywall-benefits {
    text-align: left; padding: 12px 14px; margin: 12px 0;
    background: rgba(245,238,225,0.5); border-radius: 10px;
    font-size: 13px; color: var(--text-secondary, #6B6B6B);
    line-height: 1.8; list-style: none;
}
.deep-paywall-benefits li {
    list-style: none; padding-left: 20px; position: relative;
}
.deep-paywall-benefits li::before {
    content: '✓'; position: absolute; left: 0;
    color: #4CAF50; font-weight: 700;
}
.deep-paywall-methods {
    display: flex; gap: 12px; justify-content: center; margin: 16px 0;
}
.deep-pay-method {
    flex: 1; max-width: 140px; padding: 10px 14px;
    border: 2px solid var(--border, #E8E4DC); border-radius: 10px;
    cursor: pointer; text-align: center;
    transition: all 0.25s ease; background: var(--card-bg, #FFF);
    display: inline-flex; align-items: center; justify-content: center; gap: 6px;
}
.deep-pay-method:hover { border-color: var(--primary, #4A90D9); }
.deep-pay-method.selected {
    border-color: var(--primary, #4A90D9);
    background: rgba(74,144,217,0.08);
}
.deep-pay-method-icon { font-size: 22px; display: inline-flex; align-items: center; justify-content: center; flex-shrink: 0; }
.deep-pay-method-icon img { display: block; width: 22px; height: 22px; object-fit: contain; }
.deep-pay-method-name { font-size: 13px; color: var(--text-secondary, #6B6B6B); white-space: nowrap; }
.deep-paywall-btn {
    width: 100%; padding: 12px; border: none; border-radius: 10px;
    font-size: 15px; font-family: inherit; cursor: pointer;
    letter-spacing: 2px; transition: all 0.25s ease; font-weight: 600;
}
.deep-paywall-btn.primary {
    background: #F5A623; color: #fff; margin-top: 2px;
}
.deep-paywall-btn.primary:hover {
    opacity: 0.9; transform: translateY(-1px);
    box-shadow: 0 4px 16px rgba(245,166,35,0.3);
}
.deep-paywall-btn.primary:disabled { opacity: 0.5; cursor: not-allowed; transform: none; }
.deep-paywall-hint {
    font-size: 11px; color: var(--text-muted, #999); margin-top: 12px;
}
/* ===== 支付二维码（首页付费弹窗） ===== */
.deep-paywall-qr-area {
    display: none; margin: 12px 0 8px; text-align: center;
}
.deep-paywall-qr-area.show { display: block; }
.deep-paywall-qr-area img {
    width: 200px; height: 200px; border-radius: 6px;
    background: #fff; padding: 4px;
    box-shadow: 0 2px 12px rgba(0,0,0,0.1);
}
.deep-paywall-qr-area .deep-paywall-qr-label {
    font-size: 12px; color: var(--text-muted, #999); margin-top: 4px;
}
.deep-paywall-qr-area .qr-loading {
    width: 200px; height: 200px; margin: 0 auto;
    display: flex; align-items: center; justify-content: center;
}
.deep-paywall-qr-area .qr-loading::after {
    content: ''; display: block;
    width: 32px; height: 32px;
    border: 3px solid var(--border, #E8E4DC);
    border-top-color: var(--text-muted, #999);
    border-radius: 50%; animation: qrSpin 0.8s linear infinite;
}
.deep-paywall-qr-area .qr-loading.hidden { display: none; }
@keyframes qrSpin { to { transform: rotate(360deg); } }
@media (max-width: 600px) {
    .deep-paywall-card { padding: 20px 16px; max-height: 90vh; overflow-y: auto; }
    .deep-paywall-price { font-size: 26px; margin: 8px 0 4px; }
    .deep-pay-method { padding: 6px 10px; flex-direction: column; gap: 3px; }
    .deep-pay-method-icon { font-size: 18px; }
    .deep-paywall-benefits { font-size: 12px; padding: 10px; margin: 10px 0; }
    .deep-paywall-qr-area img { width: 140px; height: 140px; }
}
@media (max-width: 480px) {
    .deep-paywall-card { padding: 16px 14px; }
    .deep-paywall-icon { display: none; }
    .deep-paywall-card h2 { font-size: 15px; margin-bottom: 4px; }
    .deep-paywall-price { font-size: 20px; margin: 8px 0 4px; }
    .deep-pay-method { padding: 5px 8px; flex-direction: column; gap: 2px; }
    .deep-pay-method-icon { font-size: 16px; }
    .deep-pay-method-name { font-size: 10px; }
    .deep-paywall-btn { font-size: 12px; padding: 8px; }
    .deep-paywall-benefits { font-size: 11px; padding: 8px 10px; line-height: 1.7; margin: 8px 0; }
    .deep-paywall-methods { margin: 10px 0; gap: 8px; }
    .deep-paywall-qr-area { margin: 8px 0; }
    .deep-paywall-qr-area img { width: 120px; height: 120px; }
    .deep-paywall-hint { font-size: 10px; margin-top: 8px; }
    .deep-paywall-card p[style] { font-size: 11px !important; margin: 2px 0 8px !important; }
}
/* ===== 八字深度解读 ===== */
.interp-nav {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    margin-bottom: 20px;
    padding: 10px 12px;
    background: var(--card-bg);
    border-radius: 10px;
    border: 1px solid var(--border);
}
.interp-nav-item {
    display: inline-block;
    padding: 4px 10px;
    font-size: 12px;
    color: var(--text-secondary);
    background: var(--bg);
    border: 1px solid var(--border);
    border-radius: 6px;
    text-decoration: none;
    transition: all 0.2s;
    white-space: nowrap;
}
.interp-nav-item:hover {
    color: var(--primary);
    border-color: var(--primary);
    background: var(--primary-bg);
}

.interp-section {
    border-bottom: 1px solid var(--border);
    padding: 16px 0;
    scroll-margin-top: 20px;
}
.interp-section:last-child { border-bottom: none; }
.interp-title {
    font-size: 15px; font-weight: 700;
    color: var(--primary);
    padding: 4px 0 10px;
    letter-spacing: 1px;
}
.interp-content {
    font-size: 13px; color: var(--text-secondary);
    line-height: 2.0; text-align: justify;
    padding: 0 4px 8px;
}
.interp-content p {
    margin-bottom: 10px;
}

/* 五行高亮 */
.wx-hl { font-weight: 600; }
.wx-hl.wx-jin { color: #D4A017; }
.wx-hl.wx-mu { color: #6B9B6B; }
.wx-hl.wx-shui { color: #4A90D9; }
.wx-hl.wx-huo { color: #D94A4A; }
.wx-hl.wx-tu { color: #C9A44B; }
[data-theme="dark"] .wx-hl.wx-jin { color: #F0C040; }
[data-theme="dark"] .wx-hl.wx-mu { color: #81C784; }
[data-theme="dark"] .wx-hl.wx-shui { color: #64B5F6; }
[data-theme="dark"] .wx-hl.wx-huo { color: #EF5350; }
[data-theme="dark"] .wx-hl.wx-tu { color: #FFD54F; }

@media (max-width: 768px) {
    .interp-nav { gap: 4px; padding: 8px; }
    .interp-nav-item { font-size: 11px; padding: 3px 8px; }
    .interp-title { font-size: 14px; }
    .interp-content { font-size: 12px; line-height: 1.8; }
}

/* ===== FORTUNE SCORE ===== */
.fortune-score {
    display: flex;
    align-items: center;
    gap: 16px;
    margin-bottom: 16px;
}

.score-circle {
    width: 64px;
    height: 64px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 22px;
    font-weight: 700;
    flex-shrink: 0;
}

.score-circle.good { background: #E6F0EB; color: #3E7C67; }
.score-circle.warning { background: #F5EDE0; color: #A67C52; }
.score-circle.danger { background: #F0E6E6; color: #945A5A; }

[data-theme="dark"] .score-circle.good { background: #1B3A2B; color: #5EC49A; }
[data-theme="dark"] .score-circle.warning { background: #3A2E1B; color: #D4A86C; }
[data-theme="dark"] .score-circle.danger { background: #3A1B1B; color: #D46C6C; }

.score-info h3 {
    font-size: 17px;
    color: var(--text);
    margin-bottom: 2px;
}

.score-info p {
    font-size: 13px;
    color: var(--text-secondary);
}

/* ===== FORTUNE GRID ===== */
.fortune-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 12px;
    margin-top: 16px;
}

.fortune-item {
    padding: 14px;
    background: var(--bg);
    border-radius: var(--radius-sm);
    border: 1px solid var(--border);
    text-align: center;
}

.fortune-item .label {
    font-size: 12px;
    color: var(--text-muted);
    margin-bottom: 6px;
}

.fortune-item .stars {
    font-size: 16px;
    color: var(--warning);
    margin-bottom: 4px;
}

.fortune-item .value {
    font-size: 12px;
    color: var(--text-secondary);
    line-height: 1.5;
}

/* ===== LUCKY ITEMS ROW ===== */
.lucky-items-row {
    display: flex;
    gap: 12px;
    margin-top: 16px;
}

/* V3.0优化: 幸运卡片颜色与运势四维度卡片(.fortune-item)一致,略深15% */
.lucky-item {
    flex: 1;
    padding: 14px 12px;
    background: #E0EBE3;
    border: 1px solid #B8C9BE;
    border-radius: var(--radius-sm);
    text-align: center;
    transition: transform 0.2s ease, box-shadow 0.2s ease;
}

[data-theme="dark"] .lucky-item {
    background: #1E2622;
    border: 1px solid #2D3A2F;
}

/* 星盘运势幸运卡片:与星座维度卡片一致,略深15% */
#zodiacFortuneResult .lucky-item {
    background: rgba(228, 232, 244, 0.8);
    border: 1px solid rgba(196, 203, 223, 0.55);
}
[data-theme="dark"] #zodiacFortuneResult .lucky-item {
    background: rgba(38, 44, 65, 0.5);
    border: 1px solid rgba(52, 58, 79, 0.4);
}

.lucky-item:hover {
    transform: translateY(-2px);
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.12);
}

.lucky-item .lucky-icon {
    font-size: 22px;
    margin-bottom: 6px;
}

.lucky-item .lucky-label {
    font-size: 11px;
    color: var(--text-muted);
    margin-bottom: 4px;
    letter-spacing: 1px;
}

.lucky-item .lucky-value {
    font-size: 16px;
    font-weight: 700;
    color: var(--text);
    letter-spacing: 1px;
}

/* ===== FORTUNE PART ===== */
.fortune-part {
    margin: 12px 0;
    padding: 14px;
    background: var(--bg);
    border-radius: var(--radius-sm);
    border: 1px solid var(--border);
}

/* ===== DO-DONT LISTS ===== */
.do-dont {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 12px;
    margin-top: 8px;
}

.do-list, .dont-list {
    padding: 12px;
    border-radius: var(--radius-sm);
    background: var(--card-bg);
    border: 1px solid var(--border);
}

.do-list h5 { font-size: 13px; color: var(--success); margin-bottom: 8px; }
.dont-list h5 { font-size: 13px; color: var(--danger); margin-bottom: 8px; }

.do-list ul, .dont-list ul {
    list-style: none;
    font-size: 12px;
    color: var(--text-secondary);
    line-height: 1.8;
}

.do-list li::before { content: '• '; color: var(--success); }
.dont-list li::before { content: '• '; color: var(--danger); }

/* ===== WEEKLY / DAILY LIST ===== */
.weekly-list {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.weekly-day {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 10px 12px;
    background: var(--bg);
    border-radius: var(--radius-xs);
    border: 1px solid var(--border);
    font-size: 13px;
}

.weekly-day.highlight {
    border-color: var(--success);
    background: rgba(107, 155, 107, 0.05);
}

.weekly-day .day-label {
    min-width: 48px;
    color: var(--primary);
    font-weight: 600;
}

.weekly-day .day-score {
    min-width: 32px;
    text-align: center;
    font-weight: 700;
    font-size: 14px;
}

.weekly-day .day-desc {
    flex: 1;
    color: var(--text-secondary);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

/* ===== SHARE SECTION ===== */
.share-section {
    margin-top: 0;
    padding-top: 0;
}

.share-card {
    background: linear-gradient(135deg, var(--primary-bg), var(--card-bg), var(--bg));
    border: 1px solid var(--border);
    border-radius: var(--radius);
    padding: 20px 24px;
    text-align: center;
    margin-bottom: 16px;
    position: relative;
    overflow: hidden;
}

.share-card .weather-canvas {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    pointer-events: none;
    z-index: 0;
}

.share-card-content {
    position: relative;
    z-index: 1;
}

.share-card::before {
    display: none;
}

.share-card-top {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 16px;
    margin-top: -8px;
}

.share-date {
    font-size: 12px;
    color: var(--text-muted);
}

.share-card-body {
    display: flex;
    flex-direction: column;
    align-items: center;
}

.share-score {
    font-size: 48px;
    font-weight: 700;
    color: var(--primary);
    line-height: 1;
    margin-bottom: 8px;
}

.score-unit {
    font-size: 18px;
    font-weight: 400;
    margin-left: 2px;
}

.share-weather {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: 4px;
}

.weather-icon {
    font-size: 32px;
    line-height: 1;
}

.weather-label {
    font-size: 14px;
    color: var(--text-secondary);
    font-weight: 500;
}

.share-verdict {
    font-size: 18px;
    color: var(--text);
    margin-bottom: 12px;
}

.share-detail {
    font-size: 13px;
    color: var(--text-secondary);
    line-height: 1.8;
}

.share-actions {
    text-align: center;
}


/* ===== PROGRESS BARS ===== */
.progress-bars {
    display: flex;
    flex-direction: column;
    gap: 10px;
    margin-bottom: 16px;
}

.progress-item {
    display: flex;
    align-items: center;
    gap: 8px;
}

.dim-label {
    font-size: 12px;
    font-weight: 600;
    color: var(--text-secondary);
    min-width: 16px;
}

.progress-bar-wrap {
    flex: 1;
    height: 8px;
    background: var(--bg);
    border-radius: 4px;
    overflow: hidden;
    border: 1px solid var(--border);
}

.progress-bar-fill {
    height: 100%;
    background: var(--primary);
    border-radius: 4px;
    transition: width 0.6s ease;
}

/* ===== TRAITS ===== */
.traits {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 12px;
    margin: 16px 0;
}

.trait {
    padding: 14px;
    background: var(--bg);
    border-radius: var(--radius-sm);
    border: 1px solid var(--border);
}

.trait h5 { font-size: 13px; margin-bottom: 8px; }
.trait p { font-size: 12px; color: var(--text-secondary); line-height: 1.7; }


/* ===== LOADING OVERLAY ===== */
.loading-overlay {
    position: fixed;
    top: 0; left: 0; right: 0; bottom: 0;
    background: rgba(240, 247, 243, 0.85);
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    z-index: 1000;
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.3s ease;
}

/* V3.0优化: 页面加载准备状态,内容透明不显示,避免半透明loading遮罩透出未就绪骨架 */
.page.is-preparing { opacity: 0; }

[data-theme="dark"] .loading-overlay {
    background: rgba(26, 35, 32, 0.85);
}

.loading-overlay.show { opacity: 1; pointer-events: all; }

.loading-overlay p {
    margin-top: 16px;
    font-size: 14px;
    color: var(--text-secondary);
    letter-spacing: 2px;
}

.loading-spinner {
    width: 36px;
    height: 36px;
    border: 3px solid var(--border);
    border-top-color: var(--primary);
    border-radius: 50%;
    animation: spin 0.8s linear infinite;
}

@keyframes spin { to { transform: rotate(360deg); } }

/* ===== MODAL ===== */
.modal-overlay {
    position: fixed;
    top: 0; left: 0; right: 0; bottom: 0;
    background: rgba(0,0,0,0.5);
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 2000;
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.3s ease;
    padding: 20px;
}

.modal-overlay.show { opacity: 1; pointer-events: all; }

.modal-content {
    background: var(--card-bg);
    border-radius: var(--radius);
    padding: 28px;
    max-width: 500px;
    width: 100%;
    max-height: 85vh;
    overflow-y: auto;
    box-shadow: var(--shadow-lg);
}

.modal-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 20px;
}

.modal-header h3 {
    font-size: 18px;
    color: var(--primary);
}

.btn-close {
    background: none;
    border: none;
    font-size: 24px;
    color: var(--text-muted);
    cursor: pointer;
    padding: 0 4px;
    line-height: 1;
}

/* ===== TEST ===== */
.test-progress-wrap {
    display: flex;
    align-items: center;
    gap: 12px;
    margin-bottom: 20px;
}

.test-progress-bar {
    flex: 1;
    height: 6px;
    background: var(--bg);
    border-radius: 3px;
    overflow: hidden;
}

.test-progress-fill {
    height: 100%;
    background: var(--primary);
    border-radius: 3px;
    transition: width 0.3s ease;
}

#testCounter {
    font-size: 12px;
    color: var(--text-muted);
    min-width: 40px;
    text-align: right;
}

.test-question {
    font-size: 15px;
    color: var(--text);
    margin-bottom: 16px;
    line-height: 1.6;
    font-weight: 500;
}

.test-options {
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.test-option {
    padding: 14px 16px;
    border: 1px solid var(--border);
    border-radius: var(--radius-sm);
    background: var(--card-bg);
    color: var(--text);
    font-size: 14px;
    font-family: var(--font);
    cursor: pointer;
    text-align: left;
    transition: var(--transition);
}

.test-option:hover { border-color: var(--primary); background: var(--primary-bg); }

.test-option.selected { border-color: var(--primary); background: var(--primary-bg); color: var(--primary); }

.test-nav {
    display: flex;
    justify-content: space-between;
    margin-top: 20px;
    gap: 12px;
}

.test-nav button { flex: 1; }

/* ===== RESULT AREA ===== */
.result-area {
    opacity: 0;
    max-height: 0;
    overflow: hidden;
    transition: opacity 0.4s ease, max-height 0.6s ease;
}

.result-area.show {
    opacity: 1;
    max-height: 8000px;
    overflow: visible;
}

.error-box {
    background: #F0E6E6;
    border: 1px solid #D4A0A0;
    color: #945A5A;
    padding: 14px 18px;
    border-radius: var(--radius-sm);
    font-size: 14px;
    margin-top: 12px;
}

[data-theme="dark"] .error-box {
    background: #3A1B1B;
    border-color: #945A5A;
    color: #D46C6C;
}

/* ===== FOOTER ===== */
.app-footer {
    text-align: center;
    padding: 32px 0 40px;
    color: var(--text-muted);
    font-size: 12px;
    letter-spacing: 2px;
    border-top: 1px solid var(--border);
    margin-top: 20px;
}
/* V3.1.2: 移动端隐藏底部横线和东方智慧文案 */
@media (max-width: 768px) {
    .app-footer { display: none !important; }
}

/* ===== ANIMATION KEYFRAMES ===== */
@keyframes floatUp {
    from {
        opacity: 0;
        transform: translateY(30px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

@keyframes bounce {
    0%, 20%, 50%, 80%, 100% {
        transform: translateX(-50%) translateY(0);
    }
    40% {
        transform: translateX(-50%) translateY(-12px);
    }
    60% {
        transform: translateX(-50%) translateY(-4px);
    }
}

@keyframes glow {
    from {
        box-shadow: 0 4px 20px rgba(74, 111, 98, 0.08);
    }
    to {
        box-shadow: 0 8px 32px rgba(74, 111, 98, 0.2);
    }
}

.lunar-selects {
    display: flex;
    gap: 6px;
    flex: 1;
    width: 100%;
}

/* ===== RESPONSIVE ===== */
@media (max-width: 600px) {
    .app-container { padding: 0 14px; padding-bottom: env(safe-area-inset-bottom, 0); }
    .app-title { font-size: 24px; }
    .card { padding: 18px; }
    .bazi-chart-card { padding: 0 12px 16px; }
    .bazi-chart-card .chart-title { padding-top: 16px; margin-bottom: 14px; }
    .bazi-chart-table { font-size: 12px; grid-template-columns: 48px 1fr 1fr 1fr 1fr; }
    .bazi-cell { padding: 8px 4px; min-height: 40px; }
    .bazi-cell.label-cell { min-width: 40px; font-size: 10px; padding: 8px 2px; }
    .bazi-table-header .bazi-cell { font-size: 12px; padding: 10px 4px; letter-spacing: 1px; }
    .row-stem .bazi-cell, .row-branch .bazi-cell { font-size: 15px; min-height: 48px; padding: 10px 4px; }
    .stem-gan, .branch-zhi { font-size: 14px; }
    .stem-wuxing, .branch-wuxing { font-size: 9px; }
    .hidden-stem { font-size: 11px; padding: 2px 5px; }
    .shensha-tag { font-size: 10px; padding: 1px 5px; }
    .chart-title { font-size: 15px; margin-bottom: 14px; }
    .chart-title-text { padding-bottom: 10px; }
    .analysis-tabs { grid-template-columns: repeat(5, 1fr); gap: 4px; }
    .analysis-tab { padding: 5px 2px; font-size: 12px; }
    .fortune-grid { grid-template-columns: 1fr 1fr; }
    .do-dont { grid-template-columns: 1fr; }
    .traits { grid-template-columns: 1fr; }
    .form-row { flex-direction: column; }
    .fortune-score { flex-direction: column; text-align: center; }
    .score-info { text-align: center; }
    .card-entry { padding: 16px 16px 16px 50px; }
    .entry-icon { font-size: 20px; left: 14px; }

    .nav-list {
        gap: 0;
        padding: 0 8px;
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
        scrollbar-width: none;
        justify-content: flex-start;
    }
    .nav-list::-webkit-scrollbar { display: none; }
    .nav-item {
        padding: 12px 12px;
        font-size: 13px;
        flex-shrink: 0;
    }
    .theme-toggle {
        padding: 12px 4px;
        font-size: 18px;
    }

    .hero-section {
        min-height: 85vh;
        padding: 40px 14px 30px;
        margin: -12px -14px 0;
    }

    .hero-title {
        font-size: 36px;
        letter-spacing: 8px;
    }

    .hero-subtitle {
        font-size: 13px;
        letter-spacing: 5px;
    }

    .hero-slogan {
        font-size: 13px;
        margin-bottom: 28px;
    }

    /* V3.1.2 已删除冲突的旧规则,统一使用文件末尾的V3.1新规则 */
    /* .hero-cards, .hero-card, .trust-pillars 移动端规则已迁移到文件末尾 */

    .trust-badges {
        gap: 12px;
    }

    .trust-badge {
        font-size: 12px;
        padding: 6px 14px;
        letter-spacing: 1px;
    }

    .fortune-kline-canvas {
        height: 180px;
    }
    .kline-chart-wrapper {
        margin-bottom: 16px;
    }
    .kline-legend {
        gap: 12px;
        padding: 6px 0;
        font-size: 9px;
    }

    .relationship-dual {
        grid-template-columns: 1fr;
        gap: 12px;
    }

    .relationship-side {
        padding: 14px;
    }

    .relationship-score {
        flex-direction: column;
        gap: 8px;
    }

    .relationship-score .score-number {
        font-size: 42px;
    }

    .relationship-dimensions {
        grid-template-columns: 1fr;
    }

    .role-selector {
        gap: 6px;
    }

    .role-btn {
        flex: 1 1 calc(50% - 6px);
        min-width: 0;
        font-size: 12px;
        padding: 6px 10px;
    }

    .klines-canvas {
        padding: 8px;
    }

    .klines-tab {
        font-size: 11px;
        padding: 6px 0;
    }

    .date-input-wrap {
        flex-direction: column;
        align-items: stretch;
    }

    .lunar-toggle {
        text-align: center;
    }

    .lunar-selects {
        flex-direction: column;
    }

    /* 命理推演概览行移动端适配 */
    .summary-row.date-row {
        flex-wrap: nowrap;
        gap: 4px 4px;
        min-width: 0;
    }
    .summary-row.date-row .date-text {
        font-size: 11px;
        white-space: nowrap;
        flex-shrink: 1;
        min-width: 0;
    }
    .summary-row.date-row .date-sep {
        margin: 0 2px;
        flex-shrink: 0;
    }
    .summary-row.pattern-row {
        flex-wrap: wrap;
        gap: 6px;
        padding: 10px;
    }
    .summary-dm-block {
        flex-wrap: wrap;
        gap: 4px;
        font-size: 13px;
        max-width: calc(100% - 110px);
    }
    .summary-dm-icon {
        font-size: 15px;
    }
    .summary-dm-desc {
        font-size: 12px;
        width: 100%;
        margin-top: 4px;
    }
    .summary-dm-value {
        font-size: 13px;
    }
    .summary-row .pattern-badge,
    .chart-summary-card .pattern-badge {
        font-size: 11px;
        padding: 3px 8px;
        margin-left: auto !important;
        align-self: flex-start;
        margin-top: 1px;
    }
}

@media (max-width: 380px) {
    .bazi-chart-table { grid-template-columns: 36px 1fr 1fr 1fr 1fr; }
    .bazi-cell { padding: 6px 2px; font-size: 11px; min-height: 36px; }
    .bazi-cell.label-cell { font-size: 9px; }
    .row-stem .bazi-cell, .row-branch .bazi-cell { font-size: 14px; min-height: 42px; }
    .stem-gan, .branch-zhi { font-size: 12px; }
    .hidden-stem { font-size: 10px; padding: 2px 4px; }
    .shensha-tag { font-size: 9px; padding: 1px 4px; }
    .fortune-grid { grid-template-columns: 1fr; }

    /* V3.3.7: 极小屏确保命盘概述日期字段一行完整 */
    .summary-row.date-row {
        gap: 4px 3px;
    }
    .summary-row.date-row .date-text {
        font-size: 10px;
    }
    .summary-row.date-row .date-sep {
        margin: 0 1px;
    }

    .hero-title {
        font-size: 28px;
        letter-spacing: 6px;
    }

    .hero-slogan {
        font-size: 12px;
    }

    .hero-cards {
        gap: 8px;
    }

    .hero-card {
        padding: 16px 8px;
    }

    .hero-card-icon {
        font-size: 22px;
    }

    .hero-card-title {
        font-size: 14px;
        letter-spacing: 1px;
    }

    .hero-card-desc {
        font-size: 11px;
        line-height: 1.6;
        letter-spacing: 0;
    }
}
        gap: 8px;
    }

    .hero-card {
        padding: 16px 12px;
    }

    .hero-card-icon {
        font-size: 24px;
    }

    .hero-card-title {
        font-size: 15px;
    }

    .brand-title {
        font-size: 20px;
    }

    .brand-desc {
        font-size: 13px;
    }

    .brand-trust {
        padding: 16px;
    }
}

/* ===== SHARE PAGE ===== */
.share-page-active {
    max-width: 520px;
    margin: 0 auto;
    padding: 20px;
}

.share-page-active .card {
    animation: floatUp 0.5s ease;
}

.share-page-active .input-field {
    width: 100%;
    padding: 12px 16px;
    border: 1px solid var(--border);
    border-radius: var(--radius-sm);
    background: var(--card-bg);
    color: var(--text);
    font-size: 14px;
    font-family: var(--font);
    margin-bottom: 12px;
}

.share-page-active .input-field:focus {
    outline: none;
    border-color: var(--primary);
    box-shadow: 0 0 0 3px rgba(74, 111, 98, 0.15);
}

.share-page-active label {
    display: block;
    font-size: 13px;
    color: var(--text-secondary);
    margin-bottom: 6px;
    font-weight: 500;
}

/* ===== 统一主题面板（命盘分析 / 五行分析 / 喜用神 内嵌区块） ===== */
.bazi-theme-panel,
.analysis-plain-card .analysis-item,
.yongshen-dayun-section,
.yongshen-year-section,
.yongshen-month-section {
    background: var(--bg);
    border: 1px solid var(--border);
    border-radius: 10px;
}

/* ===== 命盘分析卡片（新） ===== */
.analysis-plain-card {
    padding: 16px;
}
/* 命盘分析 Tabs */
.analysis-fixed-section {
    margin-bottom: 16px;
    padding-bottom: 16px;
    border-bottom: 1px solid var(--border);
}
.analysis-tabs {
    display: grid;
    grid-template-columns: repeat(5, 1fr);
    gap: 6px;
    margin-bottom: 18px;
}
.analysis-tab {
    padding: 6px 0;
    font-size: 13px;
    border: 1px solid var(--border);
    border-radius: 20px;
    background: var(--bg);
    color: var(--text-muted);
    cursor: pointer;
    transition: all 0.2s ease;
    font-family: var(--font);
    white-space: nowrap;
    text-align: center;
    justify-self: stretch;
}
.analysis-tab:hover {
    border-color: var(--primary);
    color: var(--primary);
    background: var(--primary-bg);
}
.analysis-tab.active {
    background: var(--primary);
    color: #fff;
    border-color: var(--primary);
    font-weight: 600;
    box-shadow: 0 2px 8px rgba(74,111,98,0.25);
}
.analysis-tab-panels {
    position: relative;
}
.analysis-tab-panel {
    display: none;
    animation: tabFadeIn 0.25s ease;
}
.analysis-tab-panel.active {
    display: block;
}
@keyframes tabFadeIn {
    from { opacity: 0; transform: translateY(6px); }
    to { opacity: 1; transform: translateY(0); }
}
.analysis-item {
    margin-bottom: 14px;
    padding: 12px 14px;
    transition: var(--transition);
}
.analysis-item:last-child {
    margin-bottom: 0;
}
.analysis-item:hover {
    border-color: var(--primary-light);
    box-shadow: var(--shadow);
}
.analysis-item-header {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-bottom: 8px;
}
.analysis-icon {
    font-size: 16px;
    width: 24px;
    text-align: center;
}
.analysis-label {
    font-size: 14px;
    font-weight: 700;
    color: var(--primary);
    letter-spacing: 1px;
}
.analysis-item-body p {
    font-size: 14px;
    color: var(--text-secondary);
    line-height: 1.8;
}
.analysis-hl {
    display: inline-block;
    padding: 1px 8px;
    margin: 0 2px;
    background: var(--primary-bg);
    border-radius: 4px;
    font-weight: 600;
    font-size: 13px;
    color: var(--primary);
}
.analysis-hl-subtle {
    display: inline-block;
    padding: 0;
    margin: 0;
    background: transparent;
    border-radius: 0;
    font-weight: 600;
    font-size: 13px;
    color: var(--primary);
    opacity: 0.65;
}
[data-theme="dark"] .analysis-hl {
    background: rgba(74,111,98,0.15);
}
[data-theme="dark"] .analysis-hl-subtle {
    background: transparent;
}
[data-theme="dark"] .analysis-tab {
    background: rgba(255,255,255,0.05);
    border-color: rgba(255,255,255,0.1);
    color: rgba(255,255,255,0.6);
}
[data-theme="dark"] .analysis-tab:hover {
    border-color: var(--primary);
    color: var(--primary);
    background: rgba(74,111,98,0.15);
}
[data-theme="dark"] .analysis-tab.active {
    background: var(--primary);
    color: #fff;
    border-color: var(--primary);
    box-shadow: 0 2px 8px rgba(74,111,98,0.4);
}

/* ===== 喜用神独立卡片（新） ===== */
.yongshen-card {
    padding: 16px;
}
.yongshen-card .yongshen-row {
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    gap: 16px;
    text-align: center;
}
.yongshen-card .yongshen-item {
    flex: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 6px;
    padding: 10px 8px;
    border-radius: 10px;
    background: rgba(74,111,98,0.06);
    border: 1px solid rgba(74,111,98,0.15);
    cursor: pointer;
    position: relative;
    transition: all 0.2s ease;
}
.yongshen-card .yongshen-item:hover {
    transform: translateY(-2px);
    box-shadow: 0 4px 12px rgba(74,111,98,0.12);
}
/* 悬停提示 - 由 body 级浮层 .ys-float-tip 渲染，避免被折叠卡片 overflow 裁切 */
.yongshen-card .yongshen-item::after {
    display: none;
}
.yongshen-card .ys-label {
    cursor: help;
}
.yongshen-card .ys-label::after {
    display: none;
}
.ys-float-tip {
    position: fixed;
    z-index: 10050;
    max-width: 280px;
    padding: 8px 12px;
    font-size: 12px;
    line-height: 1.55;
    color: var(--text);
    background: var(--tip-bg);
    border: 1px solid var(--tip-border);
    border-radius: var(--radius-xs);
    box-shadow: var(--tip-shadow);
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    pointer-events: none;
    opacity: 0;
    visibility: hidden;
    transition: opacity 0.15s ease, visibility 0.15s ease;
}
.ys-float-tip.show {
    opacity: 1;
    visibility: visible;
}
.yongshen-card .yongshen-item .ys-label {
    font-size: 13px;
    font-weight: 700;
    padding: 3px 12px;
    border-radius: 6px;
    white-space: nowrap;
}
.yongshen-card .yongshen-item.xi .ys-label {
    background: rgba(74,111,98,0.15); color: var(--primary);
}
.yongshen-card .yongshen-item.yong .ys-label {
    background: rgba(74,111,98,0.15); color: var(--primary);
}
.yongshen-card .yongshen-item.ji .ys-label {
    background: rgba(74,111,98,0.15); color: var(--primary);
}
[data-theme="dark"] .yongshen-card .yongshen-item.xi .ys-label {
    background: rgba(74,111,98,0.25); color: #81C784;
}
[data-theme="dark"] .yongshen-card .yongshen-item.yong .ys-label {
    background: rgba(74,111,98,0.25); color: #81C784;
}
[data-theme="dark"] .yongshen-card .yongshen-item.ji .ys-label {
    background: rgba(74,111,98,0.25); color: #81C784;
}
[data-theme="dark"] .yongshen-card .yongshen-item:hover {
    box-shadow: 0 4px 12px rgba(0,0,0,0.3);
}
.yongshen-card .ys-value {
    font-size: 14px;
    color: var(--text-secondary);
    line-height: 1.4;
}
.yongshen-card .yongshen-suggestions {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin-top: 12px;
    padding-top: 12px;
    border-top: 1px solid var(--border);
}
.yongshen-card .sug-item {
    font-size: 12px;
    color: var(--text-muted);
    padding: 4px 12px;
    background: var(--bazi-surface);
    border: 1px solid var(--border);
    border-radius: 8px;
}

/* ===== 喜用神：大环境 / 年度 / 月度（统一主题色） ===== */
.yongshen-dayun-section,
.yongshen-year-section,
.yongshen-month-section {
    margin-top: 14px;
    padding: 14px 16px;
}
.yongshen-dayun-section .analysis-item-header .analysis-label,
.yongshen-year-section .analysis-item-header .analysis-label,
.yongshen-month-section .analysis-item-header .analysis-label {
    color: var(--primary);
}
.yongshen-dayun-info {
    margin-top: 10px;
}
.dy-header {
    display: flex;
    align-items: center;
    gap: 10px;
    flex-wrap: wrap;
    margin-bottom: 12px;
}
.dy-tag {
    font-size: 12px;
    font-weight: 700;
    padding: 3px 12px;
    border-radius: 6px;
    white-space: nowrap;
}
.dy-tag.dy-good {
    background: #E8F5E9;
    color: #2E7D32;
}
.dy-tag.dy-bad {
    background: #FFEBEE;
    color: #C62828;
}
.dy-tag.dy-warn {
    background: #FFF8E1;
    color: #E65100;
}
.dy-tag.dy-neutral {
    background: #EAF4FC;
    color: #5B9BD5;
}
[data-theme="dark"] .dy-tag.dy-good {
    background: rgba(46,125,50,0.2);
    color: #81C784;
}
[data-theme="dark"] .dy-tag.dy-bad {
    background: rgba(198,40,40,0.2);
    color: #EF9A9A;
}
[data-theme="dark"] .dy-tag.dy-warn {
    background: rgba(230,81,0,0.2);
    color: #FFB74D;
}
[data-theme="dark"] .dy-tag.dy-neutral {
    background: rgba(91, 155, 213, 0.18);
    color: #8EC5F0;
}
.dy-name {
    font-size: 15px;
    font-weight: 700;
    color: var(--text-primary);
}
.dy-age {
    font-size: 12px;
    color: var(--text-muted);
}
.dy-detail p {
    font-size: 13px;
    color: var(--text-secondary);
    line-height: 1.7;
    margin-bottom: 8px;
}
.dy-detail ul {
    margin: 4px 0 0 0;
    padding-left: 20px;
}
.dy-detail ul li {
    font-size: 12px;
    color: var(--text-muted);
    line-height: 1.7;
}

/* 益处文字样式 */
.ys-benefit-good {
    color: #2E7D32;
    font-weight: 700;
}
.ys-benefit-bad {
    color: #E65100;
    font-weight: 700;
}
.ys-benefit-neutral {
    color: var(--text-muted);
    font-weight: 600;
}
[data-theme="dark"] .ys-benefit-good {
    color: #81C784;
}
[data-theme="dark"] .ys-benefit-bad {
    color: #FFB74D;
}

/* ===== 年度五行分析 ===== */
.yongshen-year-info {
    margin-top: 10px;
}
.yongshen-year-info p {
    font-size: 13px;
    color: var(--text-secondary);
    line-height: 1.7;
    margin-bottom: 8px;
}
.yongshen-year-info ul {
    margin: 4px 0 0 0;
    padding-left: 20px;
}
.yongshen-year-info ul li {
    font-size: 12px;
    color: var(--text-muted);
    line-height: 1.7;
}

/* ===== 月度五行分析表格 ===== */
.yongshen-month-table-wrap {
    margin-top: 10px;
    overflow-x: auto;
    border-radius: var(--radius-sm);
    border: 1px solid rgba(74, 111, 98, 0.15);
    overflow: hidden;
}
.yongshen-month-table {
    width: 100%;
    table-layout: fixed;
    border-collapse: collapse;
    font-size: 12px;
}
.yongshen-month-table col {
    width: 16.666%;
}
.yongshen-month-table thead th {
    padding: 10px 6px;
    background: linear-gradient(180deg, rgba(74, 111, 98, 0.14), rgba(74, 111, 98, 0.06));
    color: var(--primary);
    font-weight: 700;
    font-size: 11px;
    text-align: center;
    vertical-align: middle;
    border-bottom: 1px solid rgba(74, 111, 98, 0.22);
    white-space: nowrap;
    letter-spacing: 0.5px;
}
[data-theme="dark"] .yongshen-month-table thead th {
    background: linear-gradient(180deg, rgba(74, 111, 98, 0.28), rgba(74, 111, 98, 0.12));
    color: var(--primary-light);
    border-bottom-color: rgba(74, 111, 98, 0.35);
}
.yongshen-month-table tbody td {
    padding: 8px 6px;
    border-bottom: 1px solid rgba(74, 111, 98, 0.1);
    vertical-align: middle;
    line-height: 1.5;
    text-align: center;
    background: transparent;
}
.yongshen-month-table tbody tr:nth-child(even) td {
    background: rgba(255, 255, 255, 0.35);
}
[data-theme="dark"] .yongshen-month-table tbody tr:nth-child(even) td {
    background: rgba(255, 255, 255, 0.04);
}
.yongshen-month-table tbody tr:hover td {
    background: rgba(74, 111, 98, 0.08);
}
.yongshen-month-table tbody tr.month-good td {
    background: rgba(46, 125, 50, 0.04);
}
.yongshen-month-table tbody tr.month-bad td {
    background: rgba(198, 40, 40, 0.04);
}
[data-theme="dark"] .yongshen-month-table tbody tr:hover td {
    background: rgba(74, 111, 98, 0.14);
}
[data-theme="dark"] .yongshen-month-table tbody tr.month-good td {
    background: rgba(46, 125, 50, 0.08);
}
[data-theme="dark"] .yongshen-month-table tbody tr.month-bad td {
    background: rgba(198, 40, 40, 0.08);
}
.month-name {
    font-weight: 600;
    color: var(--text-primary);
    white-space: nowrap;
}
.month-range {
    display: block;
    font-size: 10px;
    color: var(--text-muted);
    font-weight: 400;
}
.month-gz {
    white-space: nowrap;
}
.month-gan, .month-zhi {
    font-family: var(--font-serif, 'Noto Serif SC', serif);
    font-weight: 700;
    font-size: 14px;
}
.month-gan {
    margin-right: 2px;
}
.wx-tag {
    display: inline-flex;
    align-items: center;
    gap: 2px;
    padding: 1px 8px;
    border-radius: 4px;
    font-size: 11px;
    font-weight: 600;
}
.month-benefit {
    font-weight: 600;
    white-space: nowrap;
    font-size: 12px;
    text-align: center;
}
.month-caution {
    text-align: center;
}
.month-caution-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 52px;
    padding: 4px 12px;
    font-size: 11px;
    font-family: var(--font);
    font-weight: 600;
    color: var(--primary);
    background: var(--card-bg);
    border: 1px solid rgba(74, 111, 98, 0.35);
    border-radius: 14px;
    cursor: pointer;
    transition: var(--transition);
    -webkit-tap-highlight-color: transparent;
}
.month-caution-btn:hover {
    background: var(--primary-bg);
    border-color: var(--primary);
}
.month-caution-btn:active {
    transform: scale(0.96);
}
.month-caution-empty {
    font-size: 12px;
    color: var(--text-muted);
}

/* 月度注意事项弹窗 */
.month-caution-overlay {
    position: fixed;
    inset: 0;
    z-index: 10060;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 20px;
    background: rgba(26, 35, 32, 0.45);
    animation: monthCautionFadeIn 0.2s ease;
}
.month-caution-modal {
    position: relative;
    width: min(420px, 100%);
    max-height: min(70vh, 520px);
    overflow: hidden;
    display: flex;
    flex-direction: column;
    background: var(--card-bg);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    box-shadow: var(--shadow-lg);
}
.month-caution-modal-close {
    position: absolute;
    top: 10px;
    right: 10px;
    width: 28px;
    height: 28px;
    border: none;
    border-radius: 50%;
    background: var(--bg);
    color: var(--text-muted);
    font-size: 14px;
    cursor: pointer;
    transition: var(--transition);
}
.month-caution-modal-close:hover {
    color: var(--primary);
    background: var(--primary-bg);
}
.month-caution-modal-title {
    margin: 0;
    padding: 18px 44px 12px 18px;
    font-size: 15px;
    font-weight: 700;
    color: var(--primary);
    border-bottom: 1px solid var(--border);
}
.month-caution-modal-body {
    padding: 14px 18px 18px;
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
}
.month-caution-modal-list {
    margin: 0;
    padding-left: 18px;
    color: var(--text-secondary);
    font-size: 13px;
    line-height: 1.75;
}
.month-caution-modal-list li + li {
    margin-top: 8px;
}
.month-caution-modal-empty {
    margin: 0;
    font-size: 13px;
    color: var(--text-muted);
    text-align: center;
}
@keyframes monthCautionFadeIn {
    from { opacity: 0; }
    to { opacity: 1; }
}

@media (max-width: 600px) {
    .yongshen-month-table {
        font-size: 11px;
    }
    .yongshen-month-table col { width: auto; }
    .yongshen-month-table col:nth-child(1) { width: 24%; }
    .yongshen-month-table col:nth-child(2) { width: 14%; }
    .yongshen-month-table col:nth-child(3),
    .yongshen-month-table col:nth-child(4) { width: 10%; }
    .yongshen-month-table col:nth-child(5) { width: 16%; }
    .yongshen-month-table col:nth-child(6) { width: 16%; }
    .yongshen-month-table thead th {
        font-size: 10px;
        padding: 6px 2px;
    }
    .yongshen-month-table tbody td {
        padding: 6px 2px;
    }
    .month-gan, .month-zhi {
        font-size: 12px;
    }
    .month-caution-btn {
        min-width: 40px;
        padding: 3px 8px;
        font-size: 10px;
    }
    .month-caution-empty {
        font-size: 11px;
    }
}

/* ============================================================
   星座星盘推演系统样式（独立于八字模块，深空蓝金调主题）
   ============================================================ */

:root {
    --zodiac-primary: #3A5A8C;
    --zodiac-primary-light: #5A7AAC;
    --zodiac-primary-bg: #F4F6FA;
    --zodiac-accent: #E8C97A;
    --zodiac-border: #D8DDE8;
    --zodiac-glow: rgba(58, 90, 140, 0.15);
}

[data-theme="dark"] {
    --zodiac-primary: #4A6A9C;
    --zodiac-primary-light: #6A8ABC;
    --zodiac-primary-bg: #2A3045;
    --zodiac-accent: #F0D68A;
    --zodiac-border: #3A4055;
    --zodiac-glow: rgba(74, 106, 156, 0.2);
}

/* 星座输入卡片 - 与八字输入卡片结构一致 */
.zodiac-input-card {
    margin-top: 8px;
    border: 1px solid var(--zodiac-border);
}

.zodiac-input-card .btn-primary {
    background: linear-gradient(135deg, var(--zodiac-primary), var(--zodiac-primary-light));
}

/* 星座表单：下拉框占位灰色，选中后正常色（与八字表单完全一致） */
#zodiacInputForm select {
    color: #aaa;
}
#zodiacInputForm select:valid {
    color: var(--text);
}
#zodiacInputForm .select-arrow,
#zodiacInputForm .time-picker-arrow,
#zodiacInputForm .city-tree-arrow {
    opacity: 0.55;
}

/* 24H/12H 切换按钮 - 已移除 */

/* 模块切换Tab - 胶囊式分段控件 */
.zodiac-module-tabs {
    display: flex;
    gap: 0;
    background: var(--card-bg);
    border-radius: var(--radius);
    padding: 4px;
    margin-bottom: 8px;
    box-shadow: var(--shadow);
    border: 1px solid var(--zodiac-border);
}

.zodiac-module-tab {
    flex: 1;
    padding: 10px 16px;
    border: none;
    background: none;
    color: var(--text-secondary);
    font-size: 14px;
    font-family: var(--font);
    cursor: pointer;
    border-radius: var(--radius-sm);
    transition: all 0.25s ease;
    position: relative;
    text-align: center;
}

.zodiac-module-tab:hover {
    color: var(--zodiac-primary);
}

.zodiac-module-tab.active {
    color: var(--zodiac-primary);
    background: rgba(123, 94, 167, 0.12);
    font-weight: 600;
    box-shadow: none;
}

.zodiac-module-content {
    animation: zodiacFadeIn 0.3s ease;
}

@keyframes zodiacFadeIn {
    from { opacity: 0; transform: translateY(8px); }
    to { opacity: 1; transform: translateY(0); }
}

/* 星盘推演模块顶部间距 */
#zodiacModuleChart {
    padding-top: 12px;
}

/* 星盘卡片副标题 */
.zodiac-chart-subtitle {
    font-size: 12px;
    color: var(--text-muted);
    line-height: 1.5;
    margin-top: 4px;
    font-weight: 400;
}

/* 功能卡片标题区域 */
.zodiac-card-title-wrap {
    flex: 1;
    min-width: 0;
}

.zodiac-card-subtitle {
    font-size: 12px;
    color: var(--text-muted);
    line-height: 1.5;
    margin-top: 2px;
    font-weight: 400;
    letter-spacing: 0;
}

/* 星盘轮盘交互 */
.zodiac-wheel-container {
    position: relative;
}

.zodiac-wheel-canvas {
    cursor: pointer;
    transition: filter 0.2s ease;
}

.zodiac-wheel-canvas:hover {
    filter: brightness(1.05);
}

/* ===== 3D星盘样式 ===== */
.zodiac-3d-chart-card { overflow: visible; }

.zodiac-3d-controls {
    display: flex;
    gap: 8px;
    align-items: center;
}

.zodiac-3d-btn {
    width: 36px;
    height: 36px;
    border: 1px solid var(--border, #e8e4ea);
    border-radius: 8px;
    background: var(--card-bg, #fff);
    color: var(--text-secondary, #6B6B6B);
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.2s ease;
    flex-shrink: 0;
}
/* 3D 星盘右上角全屏按钮（透明玻璃态，叠在深色画布上） */
.zodiac-3d-fs-btn {
    position: absolute;
    top: 10px;
    right: 10px;
    z-index: 40;
    width: 30px;
    height: 30px;
    border-radius: 8px;
    background: transparent;
    border: 1px solid rgba(255, 255, 255, 0.38);
    color: rgba(255, 255, 255, 0.92);
    backdrop-filter: blur(4px);
    -webkit-backdrop-filter: blur(4px);
    box-shadow: none;
}
.zodiac-3d-fs-btn:hover {
    background: rgba(255, 255, 255, 0.12);
    color: #fff;
    border-color: rgba(255, 255, 255, 0.55);
    transform: scale(1.05);
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.18);
}
.zodiac-3d-fs-btn:active {
    transform: scale(0.96);
    background: rgba(255, 255, 255, 0.08);
}
[data-theme="light"] .zodiac-3d-fs-btn,
[data-theme="dark"] .zodiac-3d-fs-btn {
    background: transparent;
    border-color: rgba(255, 255, 255, 0.38);
    color: rgba(255, 255, 255, 0.92);
    box-shadow: none;
}
[data-theme="light"] .zodiac-3d-fs-btn:hover,
[data-theme="dark"] .zodiac-3d-fs-btn:hover {
    background: rgba(255, 255, 255, 0.12);
    color: #fff;
    border-color: rgba(255, 255, 255, 0.55);
}
.zodiac-3d-btn:hover {
    background: var(--primary-bg, rgba(123,94,167,0.08));
    color: var(--primary, #7B5EA7);
    border-color: var(--primary, #7B5EA7);
    transform: scale(1.06);
    box-shadow: 0 0 12px rgba(123, 94, 167, 0.35);
}
.zodiac-3d-btn:active {
    transform: scale(0.94);
    box-shadow: 0 0 6px rgba(123, 94, 167, 0.25);
}

.zodiac-3d-container {
    position: relative;
    width: 100%;
    height: 500px;
    min-height: 400px;
    border-radius: var(--radius, 12px);
    overflow: hidden;
    background: #020108;
    cursor: grab;
}
.zodiac-3d-container:active { cursor: grabbing; }
.zodiac-3d-container canvas { display: block; width: 100% !important; height: 100% !important; }

.zodiac-3d-container.zodiac-3d-fullscreen {
    position: fixed;
    top: 0; left: 0;
    width: 100vw;
    height: 100vh;
    z-index: 99999;
    border-radius: 0;
}

/* 全屏退出按钮：与页面外卡片按钮一致，左移留白 */
.zodiac-3d-exit-fullscreen {
    display: none;
    position: absolute;
    top: 16px;
    right: 28px;
    z-index: 50;
    width: 36px;
    height: 36px;
    background: var(--card-bg, #fff);
    border: 1px solid var(--border, #e8e4ea);
    color: var(--text-secondary, #6B6B6B);
    border-radius: 8px;
    box-shadow: 0 1px 6px rgba(0, 0, 0, 0.1);
    backdrop-filter: none;
}
.zodiac-3d-exit-fullscreen:hover {
    background: var(--primary-bg, rgba(123, 94, 167, 0.08));
    color: var(--primary, #7B5EA7);
    border-color: var(--primary, #7B5EA7);
    transform: scale(1.06);
    box-shadow: 0 0 12px rgba(123, 94, 167, 0.25);
}
.zodiac-3d-exit-fullscreen:active {
    transform: scale(0.94);
}
.zodiac-3d-exit-fullscreen svg {
    transition: transform 0.2s ease;
}
.zodiac-3d-exit-fullscreen:hover svg {
    transform: rotate(90deg);
}

.zodiac-3d-loading {
    position: absolute;
    top: 50%; left: 50%;
    transform: translate(-50%, -50%);
    text-align: center;
    color: rgba(255,255,255,0.7);
    font-size: 14px;
    z-index: 5;
}
.zodiac-3d-loading .loading-spinner {
    width: 32px; height: 32px;
    border: 3px solid rgba(255,255,255,0.15);
    border-top-color: rgba(255,255,255,0.6);
    border-radius: 50%;
    animation: spin 0.8s linear infinite;
    margin: 0 auto 10px;
}

.zodiac-3d-tooltip {
    position: absolute;
    pointer-events: none;
    background: rgba(5,8,20,0.92);
    border: 1px solid rgba(100,140,200,0.3);
    border-radius: 10px;
    padding: 10px 14px;
    font-size: 13px;
    line-height: 1.6;
    color: #D8E0F0;
    max-width: 260px;
    z-index: 100;
    backdrop-filter: blur(8px);
    box-shadow: 0 4px 20px rgba(0,0,0,0.5);
    transition: opacity 0.15s ease;
}
.zodiac-3d-tooltip .tt-title {
    font-size: 15px;
    font-weight: 700;
    color: #8AB4F8;
    margin-bottom: 4px;
}
.zodiac-3d-tooltip .tt-desc {
    font-size: 12px;
    color: #A0A8C0;
}

/* 交互指引提示 */
.zodiac-3d-hint {
    position: absolute;
    bottom: 12px;
    left: 50%;
    transform: translateX(-50%);
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 6px 16px;
    background: rgba(10,10,30,0.6);
    border-radius: 20px;
    font-size: 12px;
    color: rgba(180,200,240,0.7);
    pointer-events: none;
    z-index: 50;
    backdrop-filter: blur(4px);
    /* 任务5：移除淡出动画，提示语持续显示 */
    opacity: 0.8;
}
.zodiac-3d-hint .hint-icon {
    color: rgba(200,180,255,0.8);
    font-size: 14px;
    /* 任务5：图标轻微脉动，增加视觉指引 */
    animation: hintPulse 2.5s ease-in-out infinite;
}
@keyframes hintPulse {
    0%, 100% { opacity: 0.6; transform: scale(1); }
    50% { opacity: 1; transform: scale(1.15); }
}

/* 底部星座信息卡片 */
.zodiac-3d-cards {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 10px;
    padding: 14px 0 0;
}

.zodiac-3d-mini-card {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 12px;
    border-radius: var(--radius-sm, 10px);
    background: var(--primary-bg, rgba(123,94,167,0.08));
    border: 2px solid transparent;
    cursor: pointer;
    transition: all 0.25s ease;
}
.zodiac-3d-mini-card:hover {
    transform: translateY(-2px);
    box-shadow: 0 4px 12px rgba(0,0,0,0.1);
}
.zodiac-3d-mini-card.active {
    border-color: var(--primary, #7B5EA7);
    box-shadow: 0 0 16px rgba(123,94,167,0.3);
}

.zodiac-3d-mini-icon {
    font-size: 24px;
    line-height: 1;
    flex-shrink: 0;
}

.zodiac-3d-mini-info { min-width: 0; }
.zodiac-3d-mini-label {
    font-size: 11px;
    color: var(--text-muted, #999);
    margin-bottom: 2px;
}
.zodiac-3d-mini-value {
    font-size: 15px;
    font-weight: 700;
    color: var(--primary, #7B5EA7);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

@media (max-width: 600px) {
    .zodiac-3d-container { height: 380px; min-height: 320px; }
    .zodiac-3d-cards { grid-template-columns: repeat(2, 1fr); }
}

.zodiac-wheel-tooltip {
    position: absolute;
    background: rgba(0, 0, 0, 0.85);
    color: #fff;
    font-size: 12px;
    line-height: 1.6;
    padding: 8px 12px;
    border-radius: 6px;
    pointer-events: none;
    z-index: 100;
    white-space: nowrap;
    box-shadow: 0 4px 12px rgba(0,0,0,0.2);
    transform: translate(-50%, -100%);
    margin-top: -8px;
}

.zodiac-wheel-hint {
    text-align: center;
    font-size: 12px;
    color: var(--text-muted);
    padding: 8px 0 4px;
    letter-spacing: 1px;
}

.zodiac-wheel-detail {
    margin-top: 12px;
    padding: 16px;
    background: var(--zodiac-primary-bg);
    border-radius: var(--radius-sm);
    border-left: 3px solid var(--zodiac-primary);
    font-size: 13px;
    line-height: 1.8;
    color: var(--text-secondary);
    animation: zodiacFadeIn 0.3s ease;
}

.zodiac-wheel-detail .detail-title {
    font-size: 15px;
    font-weight: 600;
    color: var(--zodiac-primary);
    margin-bottom: 8px;
    display: flex;
    align-items: center;
    gap: 8px;
}

.zodiac-wheel-detail .detail-close {
    float: right;
    cursor: pointer;
    color: var(--text-muted);
    font-size: 16px;
    line-height: 1;
    padding: 2px 6px;
    border-radius: 4px;
    transition: all 0.2s;
}

.zodiac-wheel-detail .detail-close:hover {
    color: var(--danger);
    background: rgba(220, 53, 69, 0.1);
}

/* 星盘深度解读箭头 - 蓝色系(与八字箭头结构一致) */
.zodiac-deep-interp-arrow {
    display: inline-block;
    font-size: 13px;
    color: rgba(255,255,255,0.9);
    font-weight: 600;
    letter-spacing: 2px;
    padding: 8px 24px;
    border: 1px solid rgba(255,255,255,0.35);
    border-radius: 24px;
    transition: all 0.3s ease;
    background: rgba(255,255,255,0.08);
    cursor: pointer;
}

[data-theme="light"] .zodiac-deep-interp-arrow {
    color: rgba(40,60,100,0.85);
    border-color: rgba(40,60,100,0.25);
    background: rgba(255,255,255,0.3);
}

.zodiac-deep-interp-preview:hover .zodiac-deep-interp-arrow {
    background: rgba(58, 90, 140, 0.25);
    color: #fff;
    border-color: rgba(255,255,255,0.6);
    box-shadow: 0 4px 16px rgba(58, 90, 140, 0.2);
    transform: translateY(-1px);
}

[data-theme="light"] .zodiac-deep-interp-preview:hover .zodiac-deep-interp-arrow {
    background: rgba(58,90,140,0.12);
    color: #1A2A4C;
    border-color: rgba(58,90,140,0.4);
    box-shadow: 0 4px 16px rgba(58,90,140,0.15);
}

/* 运势推演时间筛选Tab - 与八字模块完全一致 */
#zodiacModuleFortune .period-tabs {
    display: flex;
    gap: 6px;
    padding: 12px 16px 0;
    margin-bottom: 12px;
}

#zodiacModuleFortune .period-btn {
    flex: 1;
    padding: 6px 0;
    border: 1px solid var(--border);
    border-radius: 6px;
    background: var(--card-bg);
    color: var(--text-secondary);
    font-size: 12px;
    font-family: var(--font);
    cursor: pointer;
    transition: all 0.25s ease;
    text-align: center;
}

#zodiacModuleFortune .period-btn:hover {
    border-color: var(--zodiac-primary);
    color: var(--zodiac-primary);
    background: var(--zodiac-primary-bg);
}

#zodiacModuleFortune .period-btn.active {
    background: var(--zodiac-primary);
    color: #fff;
    border-color: var(--zodiac-primary);
}

/* 星盘轮盘卡片 */
.zodiac-chart-card {
    border: 1px solid var(--zodiac-border);
    text-align: left;
    margin-bottom: 16px;
}

/* 星盘3D卡片顶部边框装饰（与八字命盘卡片一致，适配星盘主题色） */
.zodiac-3d-chart-card {
    position: relative;
    overflow: hidden;
}
.zodiac-3d-chart-card::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 3px;
    background: linear-gradient(90deg, var(--zodiac-primary), var(--zodiac-accent), var(--zodiac-primary));
    opacity: 0.55;
    z-index: 2;
    pointer-events: none;
}

/* 出生星盘标题横线（与四柱八字命盘标题样式一致，适配星盘主题色） */
.zodiac-3d-chart-card .zodiac-chart-header h3 {
    position: relative;
    display: inline-block;
    padding-bottom: 14px;
    margin-bottom: 8px;
    font-size: 17px;
    font-weight: 700;
    letter-spacing: 3px;
    color: var(--zodiac-primary);
}
.zodiac-3d-chart-card .zodiac-chart-header h3::after {
    content: '';
    position: absolute;
    bottom: 0;
    left: 0;
    width: 100%;
    height: 2px;
    background: linear-gradient(90deg, var(--zodiac-primary), transparent);
    border-radius: 1px;
}

/* 星盘文字统计模块（取代原星座图形） */
.zodiac-chart-stats {
    padding: 10px 0 2px 0;
}

.zodiac-stats-loading {
    text-align: center;
    color: var(--text-muted);
    padding: 30px 0;
    font-size: 14px;
}

/* 任务7：四大核心位置轻量化 - 移除卡片背景，改为简洁行内展示 */
.zodiac-stats-grid {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    margin-bottom: 8px;
    text-align: center;
    align-items: center;
    justify-content: center;
    padding: 10px 0;
    border-top: 1px dashed var(--border, #E0E5EE);
    border-bottom: 1px dashed var(--border, #E0E5EE);
}

.zodiac-stats-item {
    background: transparent;
    border-radius: 0;
    padding: 2px 10px;
    border: none;
    border-right: 1px solid var(--border, #E0E5EE);
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font-size: 13px;
}
.zodiac-stats-item:last-child { border-right: none; }

.zodiac-stats-icon {
    font-size: 18px;
    margin-bottom: 0;
    line-height: 1;
}

.zodiac-stats-label {
    font-size: 11px;
    color: var(--text-muted);
    margin-bottom: 0;
    margin-right: 2px;
}

.zodiac-stats-value {
    font-size: 13px;
    font-weight: 600;
    color: var(--zodiac-primary);
}

.zodiac-stats-row {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin-bottom: 0;
    padding: 10px 4px;
    justify-content: center;
    border-top: 1px dashed var(--border, #E0E5EE);
    border-bottom: 1px dashed var(--border, #E0E5EE);
}

.zodiac-stats-tag {
    font-size: 12px;
    color: var(--text-secondary);
    background: transparent;
    padding: 2px 8px;
    border-radius: 12px;
    border: 1px dashed var(--border, #E0E5EE);
}

.zodiac-stats-tag strong {
    color: var(--zodiac-primary);
}

.zodiac-stats-phase {
    font-size: 12px;
    color: var(--text-secondary);
    background: transparent;
    padding: 2px 8px;
    border-radius: 12px;
    border: 1px dashed var(--border, #E0E5EE);
}

.zodiac-stats-phase strong {
    color: var(--zodiac-primary);
}

/* 任务3：底部三字段一行展示 - 统一中点分隔符 */
.zodiac-stats-row-inline {
    display: flex;
    flex-wrap: nowrap;
    align-items: center;
    justify-content: center;
    gap: 10px;
    margin-top: 8px;
    padding: 8px 12px;
    border-top: 1px dashed var(--border, #E0E5EE);
    background: linear-gradient(90deg, rgba(58,90,140,0.02), rgba(232,201,122,0.03), rgba(58,90,140,0.02));
    border-radius: 0 0 10px 10px;
    font-size: 13px;
    line-height: 1.6;
}

.zodiac-stats-row-inline .zodiac-stats-tag,
.zodiac-stats-row-inline .zodiac-stats-phase {
    border: none;
    padding: 0;
    white-space: nowrap;
    color: var(--text-secondary);
}

.zodiac-stats-row-inline .zodiac-stats-tag strong,
.zodiac-stats-row-inline .zodiac-stats-phase strong {
    color: var(--zodiac-primary);
    font-weight: 600;
}

/* 任务3：统一中点分隔符 - 替代原 border-right 避免渲染成"）"形状 */
.zodiac-stats-row-inline .zodiac-stats-sep {
    color: var(--text-muted);
    font-size: 14px;
    opacity: 0.6;
    flex: none;
}

@media (max-width: 600px) {
    .zodiac-stats-row-inline {
        flex-wrap: wrap;
        justify-content: flex-start;
        gap: 6px 8px;
        font-size: 12px;
    }
    .zodiac-stats-row-inline .zodiac-stats-sep {
        display: none;
    }
    .zodiac-stats-row-inline .zodiac-stats-tag,
    .zodiac-stats-row-inline .zodiac-stats-phase {
        flex: 1 1 100%;
        border-bottom: 1px dashed var(--border, #E0E5EE);
        padding: 4px 0;
    }
    .zodiac-stats-row-inline .zodiac-stats-phase {
        border-bottom: none;
    }
}

@media (max-width: 600px) {
    .zodiac-stats-grid {
        flex-direction: row;
        flex-wrap: wrap;
        gap: 4px;
    }
    .zodiac-stats-item {
        padding: 2px 6px;
        font-size: 12px;
    }
}

.zodiac-chart-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 16px;
    flex-wrap: wrap;
    gap: 8px;
}

.zodiac-chart-header h3 {
    font-size: 18px;
    color: var(--zodiac-primary);
    letter-spacing: 2px;
}

.zodiac-chart-summary {
    font-size: 13px;
    color: var(--text-secondary);
    background: var(--zodiac-primary-bg);
    padding: 4px 12px;
    border-radius: 12px;
}

.zodiac-wheel-container {
    display: flex;
    justify-content: center;
    align-items: center;
    padding: 12px 0;
}

.zodiac-wheel-canvas {
    max-width: 100%;
    height: auto;
    border-radius: 50%;
    box-shadow: 0 0 20px var(--zodiac-glow);
}

.zodiac-chart-legend {
    display: flex;
    justify-content: center;
    gap: 20px;
    margin-top: 12px;
    flex-wrap: wrap;
}

.zodiac-legend-item {
    display: flex;
    align-items: center;
    gap: 6px;
    font-size: 12px;
    color: var(--text-secondary);
}

.legend-dot {
    width: 10px;
    height: 10px;
    border-radius: 50%;
    display: inline-block;
}

.legend-dot.sun-dot { background: #FFB347; box-shadow: 0 0 6px #FFB347; }
.legend-dot.moon-dot { background: #C0C0C0; box-shadow: 0 0 6px #C0C0C0; }
.legend-dot.asc-dot { background: var(--zodiac-accent); box-shadow: 0 0 6px var(--zodiac-accent); }
.legend-dot.planet-dot { background: var(--zodiac-primary); box-shadow: 0 0 6px var(--zodiac-primary); }

/* 星盘功能卡片 - 上下间距24px */
.zodiac-chart-cards {
    display: flex;
    flex-direction: column;
    gap: 16px;
    margin-top: 0;
}
.zodiac-chart-cards .card {
    margin-bottom: 0;
}

.zodiac-chart-function-card {
    border: 1px solid var(--zodiac-border);
    padding: 0;
    overflow: hidden;
    transition: all 0.3s ease;
    cursor: pointer;
}

.zodiac-chart-function-card:hover {
    border-color: var(--zodiac-primary);
    box-shadow: 0 2px 12px var(--zodiac-glow);
    transform: translateY(-2px);
}

.zodiac-card-header {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 16px 20px;
    background: var(--zodiac-primary-bg);
    transition: background 0.2s ease;
    border-radius: 8px;
}

.zodiac-card-icon {
    font-size: 22px;
    line-height: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 32px;
    height: 32px;
    flex-shrink: 0;
}

.zodiac-card-header h4 {
    font-size: 15px;
    color: var(--zodiac-primary);
    letter-spacing: 1px;
    font-weight: 600;
    margin: 0;
    line-height: 1.3;
}

.zodiac-card-arrow {
    font-size: 12px;
    color: var(--text-muted);
    transition: transform 0.3s ease;
}

.zodiac-chart-function-card.expanded .zodiac-card-arrow {
    transform: rotate(180deg);
}

.zodiac-card-body {
    max-height: 0;
    overflow: hidden;
    transition: max-height 0.35s ease-out, padding 0.35s ease-out;
}

.zodiac-chart-function-card.expanded .zodiac-card-body {
    max-height: 2000px;
    padding-top: 5px;
}

/* 卡片底部总结 */
.zodiac-card-summary {
    margin-top: 16px;
    padding: 12px 14px;
    background: var(--primary-bg);
    border-radius: var(--radius-sm);
    font-size: 13px;
    line-height: 1.7;
    color: var(--text);
    border-left: 3px solid var(--primary);
}

/* 星座分析四子卡片 */
/* ===== 星座分析 Tab 容器（缩小30-40%，淡雅扁平风格） ===== */
.zodiac-constellation-tabs {
    background: var(--card-bg);
    border: 1px solid var(--border, #e8e4ea);
    border-radius: var(--radius-sm, 10px);
    padding: 10px;  /* 原14px → 10px，缩小约30% */
    overflow: hidden;
}

/* Tab 头部：4个标签均匀分布 */
.zodiac-constellation-tab-header {
    display: flex;
    gap: 4px;
    background: var(--bg);
    border-radius: 8px;
    padding: 3px;
    margin-bottom: 10px;
}
.zodiac-constellation-tab-btn {
    flex: 1;
    padding: 6px 4px;
    border: none;
    background: transparent;
    color: var(--text-secondary);
    font-size: 12px;
    font-weight: 500;
    font-family: inherit;
    cursor: pointer;
    border-radius: 6px;
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: center;
    gap: 4px;
    line-height: 1.3;
    position: relative;
    overflow: hidden;
}
.zodiac-constellation-tab-btn .tab-logo {
    font-size: 14px;
    line-height: 1;
}
.zodiac-constellation-tab-btn .tab-type {
    font-size: 13px;
}
.zodiac-constellation-tab-btn:hover {
    color: var(--primary, #3A5A8C);
    background: rgba(58, 90, 140, 0.04);
}

/* 任务5：四个主题差异化选中状态UI（差异化配色） */
/* 太阳 tab 选中：暖金色光晕 */
.zodiac-constellation-tab-btn.active[data-tab="sun"] {
    background: linear-gradient(135deg, rgba(232,184,106,0.18), rgba(232,184,106,0.08));
    color: #8C6D3F;
    box-shadow: 0 2px 6px rgba(232, 184, 106, 0.25), inset 0 -2px 0 #E8B86A;
    font-weight: 600;
}

/* 月亮 tab 选中：清冷蓝灰光晕 */
.zodiac-constellation-tab-btn.active[data-tab="moon"] {
    background: linear-gradient(135deg, rgba(74,106,156,0.16), rgba(74,106,156,0.06));
    color: #4A6A8C;
    box-shadow: 0 2px 6px rgba(74, 106, 156, 0.22), inset 0 -2px 0 #6A8AB0;
    font-weight: 600;
}

/* 上升 tab 选中：青绿光晕 */
.zodiac-constellation-tab-btn.active[data-tab="asc"] {
    background: linear-gradient(135deg, rgba(74,122,110,0.16), rgba(74,122,110,0.06));
    color: #4A7A6E;
    box-shadow: 0 2px 6px rgba(74, 122, 110, 0.22), inset 0 -2px 0 #6A9A8E;
    font-weight: 600;
}

/* 天顶 tab 选中：深紫灰光晕 */
.zodiac-constellation-tab-btn.active[data-tab="mc"] {
    background: linear-gradient(135deg, rgba(90,74,122,0.16), rgba(90,74,122,0.06));
    color: #5A4A7A;
    box-shadow: 0 2px 6px rgba(90, 74, 122, 0.22), inset 0 -2px 0 #7A6A9A;
    font-weight: 600;
}

/* 通用 active 兜底（无 data-tab 属性时） */
.zodiac-constellation-tab-btn.active {
    background: var(--card-bg);
    color: var(--primary, #3A5A8C);
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.06);
    font-weight: 600;
}
.zodiac-constellation-tab-btn.active .tab-sign-name {
    color: var(--primary, #3A5A8C);
}

/* Tab 内容面板 */
.zodiac-constellation-tab-panel {
    display: none;
    animation: zodiacTabFadeIn 0.35s ease;
}
.zodiac-constellation-tab-panel.active {
    display: block;
}
@keyframes zodiacTabFadeIn {
    from { opacity: 0; transform: translateY(4px); }
    to { opacity: 1; transform: translateY(0); }
}

/* 单个星座分析卡片（紧凑版） */
.zodiac-constellation-card {
    background: transparent;
    border-radius: 0;
    padding: 0;
    border: none;
    position: relative;
}

/* 形象化星座logo */
.constellation-icon.vivid {
    font-size: 26px;
    line-height: 1;
    filter: drop-shadow(0 1px 2px rgba(0,0,0,0.1));
}

/* 12星座专属形状背景（SVG星座连线图案） */
.sign-bg-aries::before {
    background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 100'><g fill='none' stroke='%23E57373' stroke-width='1.2' stroke-linecap='round'><polyline points='20,75 35,50 50,65 65,40 80,55'/></g><g fill='%23E57373'><circle cx='20' cy='75' r='2.5'/><circle cx='35' cy='50' r='2.5'/><circle cx='50' cy='65' r='2.5'/><circle cx='65' cy='40' r='2.5'/><circle cx='80' cy='55' r='2.5'/></g></svg>");
}
.sign-bg-taurus::before {
    background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 100'><g fill='none' stroke='%23D4A157' stroke-width='1.2' stroke-linecap='round'><polyline points='25,30 50,25 75,40 70,70 40,75 25,55 25,30'/></g><g fill='%23D4A157'><circle cx='25' cy='30' r='2.5'/><circle cx='50' cy='25' r='2.5'/><circle cx='75' cy='40' r='2.5'/><circle cx='70' cy='70' r='2.5'/><circle cx='40' cy='75' r='2.5'/><circle cx='25' cy='55' r='2.5'/></g></svg>");
}
.sign-bg-gemini::before {
    background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 100'><g fill='none' stroke='%2390CAF9' stroke-width='1.2' stroke-linecap='round'><line x1='35' y1='25' x2='35' y2='75'/><line x1='65' y1='25' x2='65' y2='75'/><line x1='35' y1='25' x2='65' y2='25'/><line x1='35' y1='75' x2='65' y2='75'/></g><g fill='%2390CAF9'><circle cx='35' cy='25' r='2.5'/><circle cx='65' cy='25' r='2.5'/><circle cx='35' cy='75' r='2.5'/><circle cx='65' cy='75' r='2.5'/></g></svg>");
}
.sign-bg-cancer::before {
    background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 100'><g fill='none' stroke='%2380CBC4' stroke-width='1.2' stroke-linecap='round'><path d='M25,40 Q40,20 55,40 Q70,60 85,40'/><path d='M25,60 Q40,80 55,60 Q70,40 85,60'/></g><g fill='%2380CBC4'><circle cx='25' cy='40' r='2.5'/><circle cx='55' cy='40' r='2.5'/><circle cx='85' cy='40' r='2.5'/><circle cx='25' cy='60' r='2.5'/><circle cx='55' cy='60' r='2.5'/><circle cx='85' cy='60' r='2.5'/></g></svg>");
}
.sign-bg-leo::before {
    background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 100'><g fill='none' stroke='%23FFB74D' stroke-width='1.2' stroke-linecap='round'><circle cx='60' cy='55' r='15'/><polyline points='30,30 45,45 30,60'/></g><g fill='%23FFB74D'><circle cx='60' cy='55' r='2.5'/><circle cx='30' cy='30' r='2.5'/><circle cx='45' cy='45' r='2.5'/><circle cx='30' cy='60' r='2.5'/></g></svg>");
}
.sign-bg-virgo::before {
    background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 100'><g fill='none' stroke='%23A5D6A7' stroke-width='1.2' stroke-linecap='round'><polyline points='25,75 35,40 45,65 55,30 65,60 75,35'/><line x1='25' y1='75' x2='75' y2='75'/></g><g fill='%23A5D6A7'><circle cx='25' cy='75' r='2.5'/><circle cx='35' cy='40' r='2.5'/><circle cx='45' cy='65' r='2.5'/><circle cx='55' cy='30' r='2.5'/><circle cx='65' cy='60' r='2.5'/><circle cx='75' cy='35' r='2.5'/></g></svg>");
}
.sign-bg-libra::before {
    background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 100'><g fill='none' stroke='%23CE93D8' stroke-width='1.2' stroke-linecap='round'><line x1='20' y1='70' x2='80' y2='70'/><path d='M30,70 Q50,40 70,70'/></g><g fill='%23CE93D8'><circle cx='20' cy='70' r='2.5'/><circle cx='50' cy='45' r='2.5'/><circle cx='80' cy='70' r='2.5'/><circle cx='30' cy='70' r='2.5'/><circle cx='70' cy='70' r='2.5'/></g></svg>");
}
.sign-bg-scorpio::before {
    background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 100'><g fill='none' stroke='%23E57373' stroke-width='1.2' stroke-linecap='round'><polyline points='20,60 30,40 40,60 50,40 60,60 70,40 80,30 85,40'/></g><g fill='%23E57373'><circle cx='20' cy='60' r='2.5'/><circle cx='30' cy='40' r='2.5'/><circle cx='40' cy='60' r='2.5'/><circle cx='50' cy='40' r='2.5'/><circle cx='60' cy='60' r='2.5'/><circle cx='70' cy='40' r='2.5'/><circle cx='80' cy='30' r='2.5'/><circle cx='85' cy='40' r='2.5'/></g></svg>");
}
.sign-bg-sagittarius::before {
    background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 100'><g fill='none' stroke='%23FFB74D' stroke-width='1.2' stroke-linecap='round'><line x1='25' y1='75' x2='75' y2='25'/><polyline points='60,25 75,25 75,40'/></g><g fill='%23FFB74D'><circle cx='25' cy='75' r='2.5'/><circle cx='75' cy='25' r='2.5'/><circle cx='60' cy='25' r='2.5'/><circle cx='75' cy='40' r='2.5'/></g></svg>");
}
.sign-bg-capricorn::before {
    background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 100'><g fill='none' stroke='%2390A4AE' stroke-width='1.2' stroke-linecap='round'><polyline points='25,30 40,55 55,40 70,65 80,55'/></g><g fill='%2390A4AE'><circle cx='25' cy='30' r='2.5'/><circle cx='40' cy='55' r='2.5'/><circle cx='55' cy='40' r='2.5'/><circle cx='70' cy='65' r='2.5'/><circle cx='80' cy='55' r='2.5'/></g></svg>");
}
.sign-bg-aquarius::before {
    background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 100'><g fill='none' stroke='%234FC3F7' stroke-width='1.2' stroke-linecap='round'><polyline points='20,45 30,35 40,45 50,35 60,45 70,35 80,45'/><polyline points='25,65 35,55 45,65 55,55 65,65 75,55'/></g><g fill='%234FC3F7'><circle cx='20' cy='45' r='2.5'/><circle cx='40' cy='45' r='2.5'/><circle cx='60' cy='45' r='2.5'/><circle cx='80' cy='45' r='2.5'/><circle cx='25' cy='65' r='2.5'/><circle cx='45' cy='65' r='2.5'/><circle cx='65' cy='65' r='2.5'/></g></svg>");
}
.sign-bg-pisces::before {
    background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 100'><g fill='none' stroke='%2380CBC4' stroke-width='1.2' stroke-linecap='round'><path d='M30,25 Q15,50 30,75'/><path d='M70,25 Q85,50 70,75'/><line x1='30' y1='50' x2='70' y2='50' stroke-dasharray='3,3'/></g><g fill='%2380CBC4'><circle cx='30' cy='25' r='2.5'/><circle cx='30' cy='75' r='2.5'/><circle cx='70' cy='25' r='2.5'/><circle cx='70' cy='75' r='2.5'/><circle cx='30' cy='50' r='2.5'/><circle cx='70' cy='50' r='2.5'/></g></svg>");
}

.constellation-card-top {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    margin-bottom: 8px;
}
/* 合并行：星座名左对齐 + 三个特质右对齐 */
.constellation-card-top-merged {
    justify-content: space-between;
    margin-bottom: 0;
}
.constellation-name-wrap {
    display: flex;
    align-items: center;
    gap: 8px;
    flex-shrink: 0;
}
.constellation-icon {
    font-size: 22px;
    line-height: 1;
}
.constellation-name {
    font-size: 16px;
    font-weight: 700;
    color: var(--primary, #4A6F62);
}
.constellation-label {
    font-size: 11px;
    color: var(--text-muted);
    background: var(--card-bg);
    padding: 2px 8px;
    border-radius: 10px;
    margin-left: auto;
}

/* ===== 星座标识：淡雅扁平主题标签（替代徽章样式） ===== */
.constellation-tag {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 11px;
    font-weight: 500;
    letter-spacing: 0.5px;
    padding: 2px 9px;
    margin-left: auto;
    border-radius: 4px;  /* 扁平化矩形，无圆弧装饰 */
    border: 1px solid transparent;
    position: relative;
    min-width: 36px;
    text-align: center;
    line-height: 1.5;
    /* 无阴影、无渐变、无装饰点 - 严格扁平化 */
}
/* 太阳标签：暖灰金（淡雅） */
.constellation-tag.tag-sun {
    color: #8C6D3F;
    background: rgba(232, 184, 106, 0.12);
    border-color: rgba(232, 184, 106, 0.28);
}
/* 月亮标签：清冷蓝灰（淡雅） */
.constellation-tag.tag-moon {
    color: #4A6A8C;
    background: rgba(74, 106, 156, 0.10);
    border-color: rgba(74, 106, 156, 0.24);
}
/* 上升标签：青灰绿（淡雅） */
.constellation-tag.tag-asc {
    color: #4A7A6E;
    background: rgba(74, 122, 110, 0.10);
    border-color: rgba(74, 122, 110, 0.24);
}
/* 天顶标签：深紫灰蓝（淡雅） */
.constellation-tag.tag-mc {
    color: #5A4A7A;
    background: rgba(90, 74, 122, 0.10);
    border-color: rgba(90, 74, 122, 0.24);
}

/* 兼容旧 class 名（防止其他位置引用） */
.constellation-badge {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 11px;
    font-weight: 500;
    letter-spacing: 0.5px;
    padding: 2px 9px;
    margin-left: auto;
    border-radius: 4px;
    border: 1px solid transparent;
    min-width: 36px;
    text-align: center;
    line-height: 1.5;
}
.constellation-badge.badge-sun { color: #8C6D3F; background: rgba(232, 184, 106, 0.12); border-color: rgba(232, 184, 106, 0.28); }
.constellation-badge.badge-moon { color: #4A6A8C; background: rgba(74, 106, 156, 0.10); border-color: rgba(74, 106, 156, 0.24); }
.constellation-badge.badge-asc { color: #4A7A6E; background: rgba(74, 122, 110, 0.10); border-color: rgba(74, 122, 110, 0.24); }
.constellation-badge.badge-mc { color: #5A4A7A; background: rgba(90, 74, 122, 0.10); border-color: rgba(90, 74, 122, 0.24); }

.constellation-tags {
    display: flex;
    flex-wrap: wrap;
    gap: 4px;
    margin-bottom: 8px;
    justify-content: center;  /* 任务6：元素/特质/守护星三个标签居中对齐 */
    align-items: center;
}
.constellation-tags .constellation-tag {
    margin-left: 0;  /* 移除 auto 推右，保持居中流式排布 */
}

/* 合并行右侧标签组：右对齐 */
.constellation-tags-spread {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: 6px;
}
.constellation-tags-spread .constellation-tag {
    margin: 0;
    padding: 3px 6px;
    white-space: nowrap;
}
/* 注意：.constellation-tag 主样式见前面"淡雅扁平主题标签"定义，此处不再重复 */
.constellation-desc {
    font-size: 13px;
    line-height: 1.7;
    color: var(--text-secondary);
}

/* ===== 任务1新增：详细内容区块样式（性格特质/行为特征/综合评语） ===== */
.constellation-detail-block {
    margin-top: 8px;
    padding-top: 8px;
    border-top: 1px dashed var(--border, #e8e4ea);
}
.constellation-detail-block .detail-label {
    font-size: 11px;
    font-weight: 600;
    color: var(--primary, #3A5A8C);
    margin-bottom: 4px;
    margin-top: 6px;
    letter-spacing: 0.5px;
}
.constellation-traits {
    list-style: none;
    padding: 0;
    margin: 0 0 6px 0;
}
.constellation-traits li {
    font-size: 12px;
    line-height: 1.65;
    color: var(--text-secondary);
    padding: 2px 0 2px 14px;
    position: relative;
}
.constellation-traits li::before {
    content: '·';
    position: absolute;
    left: 4px;
    color: var(--primary, #3A5A8C);
    font-weight: bold;
    font-size: 14px;
    top: 0;
}
.constellation-behavior {
    font-size: 12px;
    line-height: 1.7;
    color: var(--text-secondary);
    padding: 6px 8px;
    background: var(--bg, #f7f5fa);
    border-radius: 6px;
    margin-bottom: 6px;
}
.constellation-summary-line {
    font-size: 11px;
    color: var(--text-muted);
    font-style: italic;
    padding: 4px 0 0 0;
    border-top: 1px dotted var(--border, #e8e4ea);
    margin-top: 4px;
}

/* 综合评语（四星合参） */
.zodiac-comprehensive-summary {
    margin-top: 12px !important;
    padding: 12px 14px !important;
    background: linear-gradient(135deg, rgba(58, 90, 140, 0.04), rgba(90, 74, 122, 0.04)) !important;
    border-left: 3px solid var(--primary, #3A5A8C) !important;
    border-radius: 6px;
}
.zodiac-comprehensive-summary .summary-title {
    font-size: 13px;
    font-weight: 700;
    color: var(--primary, #3A5A8C);
    margin-bottom: 6px;
    letter-spacing: 1px;
}
.zodiac-comprehensive-summary .summary-content {
    font-size: 13px;
    line-height: 1.8;
    color: var(--text-secondary);
}
.zodiac-comprehensive-summary .summary-content b {
    color: var(--primary, #3A5A8C);
    font-weight: 600;
}

@media (max-width: 480px) {
    .zodiac-constellation-grid { grid-template-columns: 1fr; }
    .zodiac-constellation-tab-btn { font-size: 11px; padding: 5px 2px; }
    .zodiac-constellation-tab-btn .tab-sign-name { font-size: 9px; }
}

.zodiac-card-content {
    padding: 20px;
    font-size: 14px;
    line-height: 1.8;
    color: var(--text-secondary);
}

/* 星盘总览内容 */
.zodiac-overview-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 12px;
    margin-bottom: 16px;
}

.zodiac-overview-item {
    background: var(--zodiac-primary-bg);
    padding: 12px;
    border-radius: var(--radius-sm);
    text-align: center;
}

.zodiac-overview-item .label {
    font-size: 12px;
    color: var(--text-muted);
    margin-bottom: 4px;
}

.zodiac-overview-item .value {
    font-size: 18px;
    font-weight: 700;
    color: var(--zodiac-primary);
}

.zodiac-overview-item .icon {
    font-size: 24px;
    margin-bottom: 4px;
}

/* 行星位置表 */
.zodiac-planet-table {
    width: 100%;
    border-collapse: collapse;
    font-size: 13px;
}

.zodiac-planet-table th {
    text-align: left;
    padding: 8px 6px;
    color: var(--zodiac-primary);
    border-bottom: 2px solid var(--zodiac-border);
    font-weight: 600;
}

.zodiac-planet-table td {
    padding: 8px 6px;
    border-bottom: 1px solid var(--border);
}

.zodiac-planet-row:hover {
    background: var(--zodiac-primary-bg);
}

.zodiac-planet-icon {
    font-size: 16px;
}

.zodiac-planet-name {
    font-weight: 600;
    color: var(--text);
}

.zodiac-sign-badge {
    display: inline-flex;
    align-items: center;
    gap: 3px;
    padding: 2px 8px;
    background: var(--zodiac-primary-bg);
    border-radius: 10px;
    font-size: 12px;
    color: var(--zodiac-primary);
}

/* 相位列表 */
.zodiac-aspect-list {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

/* 相位分析tab标签栏 */
.zodiac-aspect-tabs {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    margin-bottom: 14px;
    padding-bottom: 10px;
    border-bottom: 1px solid var(--zodiac-border);
}
.zodiac-aspect-tab {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 6px 12px;
    background: var(--bg);
    border: 1px solid var(--zodiac-border);
    border-radius: 18px;
    font-size: 12px;
    color: var(--text-secondary);
    cursor: pointer;
    transition: all 0.2s ease;
}
.zodiac-aspect-tab:hover {
    border-color: var(--zodiac-primary);
    color: var(--zodiac-primary);
}
.zodiac-aspect-tab.active {
    background: var(--zodiac-primary);
    border-color: var(--zodiac-primary);
    color: #fff;
}
.zodiac-aspect-tab[data-nature="harmonious"].active {
    background: var(--success);
    border-color: var(--success);
}
.zodiac-aspect-tab[data-nature="challenging"].active {
    background: var(--danger);
    border-color: var(--danger);
}
.zodiac-aspect-tab .tab-icon { font-size: 14px; }
.zodiac-aspect-tab .tab-count {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 18px;
    height: 18px;
    padding: 0 5px;
    background: rgba(255,255,255,0.25);
    border-radius: 9px;
    font-size: 11px;
    font-weight: 600;
}
.zodiac-aspect-tab:not(.active) .tab-count {
    background: var(--zodiac-primary-bg);
    color: var(--zodiac-primary);
}

/* 相位tab内容面板 */
.zodiac-aspect-panel {
    display: none;
    animation: aspectPanelFade 0.25s ease;
}
.zodiac-aspect-panel.active {
    display: block;
}
@keyframes aspectPanelFade {
    from { opacity: 0; transform: translateY(4px); }
    to { opacity: 1; transform: translateY(0); }
}

/* 相位类型解释卡片 */
.zodiac-aspect-explain {
    background: var(--zodiac-primary-bg);
    border-radius: var(--radius-sm);
    padding: 12px 14px;
    margin-bottom: 12px;
    border-left: 3px solid var(--zodiac-primary);
}
.zodiac-aspect-explain .explain-meaning,
.zodiac-aspect-explain .explain-advice {
    font-size: 13px;
    line-height: 1.7;
    color: var(--text);
}
.zodiac-aspect-explain .explain-advice {
    margin-top: 6px;
}
.zodiac-aspect-explain .explain-label {
    display: inline-block;
    padding: 1px 8px;
    margin-right: 8px;
    background: var(--zodiac-primary);
    color: #fff;
    border-radius: 10px;
    font-size: 11px;
    font-weight: 600;
    vertical-align: middle;
}
.zodiac-aspect-explain .explain-advice .explain-label {
    background: var(--zodiac-accent);
    color: #4a3a10;
}

.zodiac-aspect-item {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 10px 12px;
    background: var(--bg);
    border-radius: var(--radius-sm);
    border-left: 3px solid var(--border);
    font-size: 13px;
}

.zodiac-aspect-item.harmonious {
    border-top-color: var(--success);
}

.zodiac-aspect-item.challenging {
    border-top-color: var(--danger);
}

.zodiac-aspect-item.neutral {
    border-top-color: var(--text-muted);
}

.zodiac-aspect-planets {
    font-weight: 600;
    color: var(--text);
    min-width: 100px;
}

.zodiac-aspect-type {
    color: var(--zodiac-primary);
    font-weight: 600;
    min-width: 60px;
}

.zodiac-aspect-desc {
    color: var(--text-secondary);
    flex: 1;
    font-size: 12px;
}

/* 元素模式左右布局：左侧雷达图 + 右侧整合数据展示（任务2优化） */
.zodiac-elements-layout {
    display: flex;
    gap: 18px;
    align-items: stretch;  /* 改为 stretch 让左右两侧等高，消除视觉断层 */
    flex-wrap: wrap;
    margin-bottom: 4px;
    background: linear-gradient(135deg, rgba(58,90,140,0.03), rgba(232,201,122,0.04));
    border: 1px solid var(--border, #E0E5EE);
    border-radius: 14px;
    padding: 14px 16px;
    box-sizing: border-box;
}
/* 雷达图区域 */
.zodiac-elements-radar {
    flex: 0 0 300px;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 2px;
    margin-bottom: 0;
}
/* 右侧整合数据区：四元素+三模式统一容器，无缝衔接 */
.zodiac-elements-bars {
    flex: 1 1 320px;
    min-width: 240px;
    padding: 4px 6px 4px 12px;
    border-left: 1px dashed var(--border, #E0E5EE);  /* 虚线分隔，视觉自然过渡 */
    display: flex;
    flex-direction: column;
    justify-content: space-between;  /* 均匀分布消除留白 */
}
/* 子区块标题统一紧凑 */
.zodiac-elements-bars h4 {
    margin: 0 0 8px !important;
    padding-bottom: 4px;
    border-bottom: 1px solid var(--border, #E0E5EE);
    font-size: 13px !important;
    color: var(--zodiac-primary) !important;
    display: flex;
    align-items: center;
    gap: 6px;
}
.zodiac-elements-bars h4::before {
    content: '';
    width: 4px;
    height: 12px;
    background: var(--zodiac-primary);
    border-radius: 2px;
}
.zodiac-elements-bars h4 + .zodiac-element-bar {
    margin-top: 2px;
}
@media (max-width: 600px) {
    .zodiac-elements-layout { flex-direction: column; align-items: stretch; padding: 10px; }
    .zodiac-elements-radar { flex: none; justify-content: center; }
    .zodiac-elements-bars { flex: 1 1 auto; width: 100%; border-left: none; border-top: 1px dashed var(--border, #E0E5EE); padding: 10px 0 0; }
}

/* 元素分布条 */
.zodiac-element-bar {
    margin-bottom: 8px;
}

.zodiac-element-bar .bar-header {
    display: flex;
    justify-content: space-between;
    margin-bottom: 4px;
    font-size: 12px;
}

.zodiac-element-bar .bar-label {
    color: var(--text);
    font-weight: 600;
}

.zodiac-element-bar .bar-value {
    color: var(--text-secondary);
}

.zodiac-element-bar .bar-track {
    height: 7px;
    background: var(--bg);
    border-radius: 4px;
    overflow: hidden;
}

.zodiac-element-bar .bar-fill {
    height: 100%;
    border-radius: 4px;
    transition: width 0.5s ease;
}

.zodiac-element-bar .bar-fill.fire { background: linear-gradient(90deg, #E83938, #FF6B5C); }
.zodiac-element-bar .bar-fill.earth { background: linear-gradient(90deg, #8B9A6E, #A8B88A); }
.zodiac-element-bar .bar-fill.air { background: linear-gradient(90deg, #F4C430, #FFD960); }
.zodiac-element-bar .bar-fill.water { background: linear-gradient(90deg, #4A90D9, #6AB0E8); }

.zodiac-element-bar .bar-fill.basic { background: linear-gradient(90deg, var(--zodiac-primary), var(--zodiac-primary-light)); }
.zodiac-element-bar .bar-fill.fixed { background: linear-gradient(90deg, var(--zodiac-accent), #F0D68A); }
.zodiac-element-bar .bar-fill.mutable { background: linear-gradient(90deg, var(--accent), var(--accent-light)); }

/* 任务9：元素模式紧凑布局 - 大幅减少长度 */
.zodiac-elements-bars-compact {
    padding: 4px 6px 4px 12px !important;
    gap: 8px;
}
.zodiac-elements-bars-compact .elem-section {
    display: flex;
    flex-direction: column;
    gap: 4px;
}
.zodiac-elements-bars-compact .elem-section-title {
    font-size: 12px;
    color: var(--zodiac-primary);
    font-weight: 600;
    padding: 2px 0;
    border-bottom: 1px solid var(--border, #E0E5EE);
    margin-bottom: 2px;
}
.zodiac-elements-bars-compact .elem-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;  /* 四元素：2x2 网格 */
    gap: 4px 10px;
}
.zodiac-elements-bars-compact .elem-grid-3 {
    grid-template-columns: 1fr 1fr 1fr;  /* 三模式：1x3 网格 */
}
.zodiac-elements-bars-compact .elem-cell {
    display: flex;
    flex-direction: column;
    gap: 2px;
}
.zodiac-elements-bars-compact .elem-cell-head {
    display: flex;
    justify-content: space-between;
    align-items: center;
    font-size: 11px;
}
.zodiac-elements-bars-compact .elem-cell-label {
    color: var(--text);
    font-weight: 600;
}
.zodiac-elements-bars-compact .elem-cell-val {
    color: var(--text-secondary);
    font-size: 10px;
}
.zodiac-elements-bars-compact .bar-track {
    height: 5px;  /* 比原来 7px 更细 */
}
@media (max-width: 600px) {
    .zodiac-elements-bars-compact .elem-grid {
        grid-template-columns: 1fr 1fr;
    }
    .zodiac-elements-bars-compact .elem-grid-3 {
        grid-template-columns: 1fr;
    }
}

/* 任务1：雷达图优化 - 垂直布局，雷达图居中放大，下方进度条 */
.zodiac-elements-layout-v2 {
    flex-direction: column;
    align-items: center;
    gap: 14px;
    padding: 16px 14px;
}
.zodiac-elements-radar-v2 {
    flex: none;
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: center;  /* 雷达图居中 */
    padding: 0;
    margin-bottom: 4px;
}
.zodiac-elements-radar-v2 canvas {
    max-width: 100%;
    height: auto;
}
.zodiac-elements-bars-v2 {
    width: 100%;
    flex: none;
    border-left: none;
    border-top: 1px dashed var(--border, #E0E5EE);
    padding: 12px 4px 4px;
    display: flex;
    flex-direction: column;
    gap: 12px;
}
.zodiac-elements-bars-v2 .elem-section-title {
    font-size: 13px;
    font-weight: 600;
    color: var(--zodiac-primary);
    padding: 4px 0 6px;
    border-bottom: 1px solid var(--border, #E0E5EE);
    margin-bottom: 6px;
    display: flex;
    align-items: center;
    gap: 6px;
}
.zodiac-elements-bars-v2 .elem-section-title::before {
    content: '';
    width: 4px;
    height: 12px;
    background: var(--zodiac-primary);
    border-radius: 2px;
}
.zodiac-elements-bars-v2 .elem-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);  /* 四元素一行4列 */
    gap: 8px 12px;
}
.zodiac-elements-bars-v2 .elem-grid-3 {
    grid-template-columns: repeat(3, 1fr);  /* 三模式一行3列 */
}
.zodiac-elements-bars-v2 .elem-cell {
    display: flex;
    flex-direction: column;
    gap: 4px;
}
.zodiac-elements-bars-v2 .elem-cell-head {
    display: flex;
    justify-content: space-between;
    align-items: center;
    font-size: 12px;
}
.zodiac-elements-bars-v2 .elem-cell-label {
    color: var(--text);
    font-weight: 600;
}
.zodiac-elements-bars-v2 .elem-cell-val {
    color: var(--text-secondary);
    font-size: 11px;
}
.zodiac-elements-bars-v2 .bar-track {
    height: 8px;  /* 加粗进度条，视觉更清晰 */
    background: rgba(0,0,0,0.05);
    border-radius: 4px;
    overflow: hidden;
}
[data-theme="dark"] .zodiac-elements-bars-v2 .bar-track {
    background: rgba(255,255,255,0.08);
}

/* 任务1：差异化颜色方案 - 进度条 v2 */
.zodiac-elements-bars-v2 .bar-fill-v2 {
    height: 100%;
    border-radius: 4px;
    transition: width 0.6s ease;
}
/* 四元素：火=橙红渐变，土=棕褐渐变，风=青绿渐变，水=蓝色渐变 */
.zodiac-elements-bars-v2 .bar-fill-v2.fire {
    background: linear-gradient(90deg, #FF7043, #FFAB91);
    box-shadow: 0 0 6px rgba(255,112,67,0.4);
}
.zodiac-elements-bars-v2 .bar-fill-v2.earth {
    background: linear-gradient(90deg, #8D6E63, #BCAAA4);
    box-shadow: 0 0 6px rgba(141,110,99,0.4);
}
.zodiac-elements-bars-v2 .bar-fill-v2.air {
    background: linear-gradient(90deg, #66BB6A, #A5D6A7);
    box-shadow: 0 0 6px rgba(102,187,106,0.4);
}
.zodiac-elements-bars-v2 .bar-fill-v2.water {
    background: linear-gradient(90deg, #42A5F5, #90CAF9);
    box-shadow: 0 0 6px rgba(66,165,245,0.4);
}
/* 三模式：基本=紫色，固定=金色，变动=青色 */
.zodiac-elements-bars-v2 .bar-fill-v2.basic {
    background: linear-gradient(90deg, #7E57C2, #B39DDB);
    box-shadow: 0 0 6px rgba(126,87,194,0.4);
}
.zodiac-elements-bars-v2 .bar-fill-v2.fixed {
    background: linear-gradient(90deg, #FFB300, #FFD54F);
    box-shadow: 0 0 6px rgba(255,179,0,0.4);
}
.zodiac-elements-bars-v2 .bar-fill-v2.mutable {
    background: linear-gradient(90deg, #26A69A, #80CBC4);
    box-shadow: 0 0 6px rgba(38,166,154,0.4);
}

@media (max-width: 600px) {
    .zodiac-elements-bars-v2 .elem-grid {
        grid-template-columns: 1fr 1fr;
    }
    .zodiac-elements-bars-v2 .elem-grid-3 {
        grid-template-columns: 1fr 1fr 1fr;
    }
}

/* 过境推演 */
.zodiac-transit-item {
    padding: 12px;
    background: var(--bg);
    border-radius: var(--radius-sm);
    margin-bottom: 8px;
    border-left: 3px solid var(--zodiac-primary);
}

/* 星盘运势四维度卡片 - 紫色主题（底色淡化20%） */
#zodiacFortuneResult .fortune-item {
    background: rgba(244, 246, 250, 0.8);
    border: 1px solid rgba(216, 221, 232, 0.55);
    border-radius: var(--radius-sm);
}

[data-theme="dark"] #zodiacFortuneResult .fortune-item {
    background: rgba(42, 48, 69, 0.5);
    border: 1px solid rgba(58, 64, 85, 0.4);
}

#zodiacFortuneResult .fortune-item .label {
    color: var(--zodiac-primary);
}

/* V3.1.2: 星盘运势晴雨表小字描述精简 - PC+移动端统一限制行数 */
#zodiacFortuneResult .share-detail {
    display: -webkit-box !important;
    -webkit-line-clamp: 2 !important;
    -webkit-box-orient: vertical !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
    max-height: 3.6em !important;
}
#zodiacFortuneResult .fortune-item .value {
    display: -webkit-box !important;
    -webkit-line-clamp: 2 !important;
    -webkit-box-orient: vertical !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
    max-height: 3em !important;
}

.zodiac-transit-header {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-bottom: 6px;
    flex-wrap: wrap;
}

.zodiac-transit-planet {
    font-weight: 600;
    color: var(--zodiac-primary);
}

.zodiac-transit-aspect {
    font-size: 12px;
    padding: 2px 8px;
    background: var(--zodiac-primary-bg);
    border-radius: 8px;
    color: var(--zodiac-primary);
}

.zodiac-transit-desc {
    font-size: 13px;
    color: var(--text-secondary);
    line-height: 1.6;
}

/* 运势概览 */
.zodiac-fortune-overview {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 12px;
}

.zodiac-fortune-card {
    padding: 16px;
    background: var(--zodiac-primary-bg);
    border-radius: var(--radius-sm);
    text-align: center;
}

.zodiac-fortune-card .period {
    font-size: 13px;
    color: var(--text-muted);
    margin-bottom: 8px;
}

.zodiac-fortune-card .score {
    font-size: 28px;
    font-weight: 700;
    color: var(--zodiac-primary);
}

.zodiac-fortune-card .verdict {
    font-size: 12px;
    color: var(--text-secondary);
    margin-top: 4px;
}

/* ===== 星盘深度解读 玻璃态预览卡片（与八字深度解读结构完全一致） ===== */
.zodiac-deep-interp-preview {
    position: relative;
    overflow: hidden;
    padding: 0;
    background: linear-gradient(160deg, rgba(40,70,120,0.44) 0%, rgba(55,85,135,0.34) 25%, rgba(80,110,160,0.22) 50%, rgba(120,150,190,0.14) 75%, rgba(160,185,215,0.06) 100%);
    backdrop-filter: blur(20px) saturate(1.2);
    -webkit-backdrop-filter: blur(20px) saturate(1.2);
    border: 1px solid rgba(255, 255, 255, 0.35);
    border-radius: var(--radius);
    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.10), 0 2px 8px rgba(0, 0, 0, 0.05), inset 0 1px 0 rgba(255, 255, 255, 0.25);
    transition: all 0.4s cubic-bezier(0.25, 0.46, 0.45, 0.94);
    cursor: pointer;
}

.zodiac-deep-interp-preview::before {
    content: '';
    position: absolute;
    inset: 0;
    z-index: 0;
    pointer-events: none;
    opacity: 0.20;
    background-image:
        repeating-linear-gradient(0deg, transparent, transparent 2px, rgba(58,90,140,0.10) 2px, rgba(58,90,140,0.10) 3px),
        repeating-linear-gradient(90deg, transparent, transparent 2px, rgba(58,90,140,0.07) 2px, rgba(58,90,140,0.07) 3px);
    border-radius: var(--radius);
}

.zodiac-deep-interp-preview .zodiac-deep-interp-border {
    position: absolute;
    inset: -1px;
    z-index: 3;
    pointer-events: none;
    border-radius: var(--radius);
    border: 1px solid transparent;
    background: linear-gradient(135deg, rgba(255,255,255,0.35) 0%, rgba(255,255,255,0.05) 40%, rgba(255,255,255,0.15) 70%, rgba(255,255,255,0.25) 100%) border-box;
    -webkit-mask: linear-gradient(#fff 0 0) padding-box, linear-gradient(#fff 0 0);
    -webkit-mask-composite: xor;
    mask: linear-gradient(#fff 0 0) padding-box, linear-gradient(#fff 0 0);
    mask-composite: exclude;
}

.zodiac-deep-interp-preview::after {
    content: '';
    position: absolute;
    top: 0;
    left: 15%;
    right: 15%;
    height: 1px;
    z-index: 4;
    pointer-events: none;
    background: linear-gradient(90deg, transparent, rgba(58,90,140,0.35), rgba(58,90,140,0.15), transparent);
}

[data-theme="dark"] .zodiac-deep-interp-preview {
    background: linear-gradient(160deg, rgba(20,35,60,0.60) 0%, rgba(28,45,75,0.44) 25%, rgba(40,60,95,0.28) 50%, rgba(60,85,125,0.16) 75%, rgba(85,115,155,0.08) 100%);
    border: 1px solid rgba(255, 255, 255, 0.10);
    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.20), 0 2px 8px rgba(0, 0, 0, 0.10), inset 0 1px 0 rgba(255, 255, 255, 0.04);
}

[data-theme="dark"] .zodiac-deep-interp-preview::before {
    opacity: 0.18;
    background-image:
        repeating-linear-gradient(0deg, transparent, transparent 2px, rgba(90,122,172,0.08) 2px, rgba(90,122,172,0.08) 3px),
        repeating-linear-gradient(90deg, transparent, transparent 2px, rgba(90,122,172,0.05) 2px, rgba(90,122,172,0.05) 3px);
}

[data-theme="dark"] .zodiac-deep-interp-preview .zodiac-deep-interp-border {
    background: linear-gradient(135deg, rgba(255,255,255,0.12) 0%, rgba(255,255,255,0.02) 40%, rgba(255,255,255,0.06) 70%, rgba(255,255,255,0.10) 100%) border-box;
}

[data-theme="dark"] .zodiac-deep-interp-preview::after {
    background: linear-gradient(90deg, transparent, rgba(90,122,172,0.3), rgba(90,122,172,0.15), transparent);
}

.zodiac-deep-interp-preview:hover {
    transform: translateY(-4px);
    box-shadow: 0 16px 48px rgba(0, 0, 0, 0.25), 0 4px 12px rgba(0, 0, 0, 0.12);
}

.zodiac-deep-interp-glow {
    position: absolute;
    width: 200px;
    height: 200px;
    border-radius: 50%;
    background: radial-gradient(circle, rgba(58,90,140,0.15) 0%, transparent 70%);
    top: -60px;
    right: -40px;
    z-index: 1;
    pointer-events: none;
    transition: transform 0.6s ease;
}

.zodiac-deep-interp-glow2 {
    position: absolute;
    width: 180px;
    height: 180px;
    border-radius: 50%;
    background: radial-gradient(circle, rgba(232,201,122,0.10) 0%, transparent 70%);
    bottom: -50px;
    left: -30px;
    z-index: 1;
    pointer-events: none;
    transition: transform 0.6s ease;
}

.zodiac-deep-interp-preview:hover .zodiac-deep-interp-glow {
    transform: scale(1.3) translate(-10px, 10px);
}

.zodiac-deep-interp-preview:hover .zodiac-deep-interp-glow2 {
    transform: scale(1.2) translate(10px, -10px);
}

.zodiac-deep-interp-content {
    position: relative;
    z-index: 2;
    padding: 28px 28px 24px;
    text-align: center;
    overflow: hidden;
    border-radius: var(--radius);
}

.zodiac-deep-interp-icon {
    font-size: 36px;
    margin-bottom: 12px;
    filter: drop-shadow(0 2px 4px rgba(58, 90, 140, 0.15));
}

.zodiac-deep-interp-title {
    color: #D4E0F0;
    font-size: 18px;
    font-weight: 700;
    margin-bottom: 12px;
    letter-spacing: 3px;
    text-shadow: 0 1px 2px rgba(0,0,0,0.2);
    position: relative;
}
.zodiac-deep-interp-title::after {
    content: '';
    display: block;
    width: 40px;
    height: 1px;
    margin: 10px auto 0;
    background: linear-gradient(90deg, transparent, rgba(255,255,255,0.3), transparent);
}

[data-theme="light"] .zodiac-deep-interp-title {
    color: #2A4A7C;
    text-shadow: none;
}
[data-theme="light"] .zodiac-deep-interp-title::after {
    background: linear-gradient(90deg, transparent, rgba(58,90,140,0.2), transparent);
}

.zodiac-deep-interp-desc {
    color: rgba(255,255,255,0.82);
    font-size: 13px;
    line-height: 1.9;
    margin-bottom: 8px;
    max-width: 520px;
    margin-left: auto;
    margin-right: auto;
    letter-spacing: 0.5px;
}

[data-theme="light"] .zodiac-deep-interp-desc {
    color: rgba(40,60,100,0.85);
}

.zodiac-deep-interp-count {
    color: rgba(255,255,255,0.6);
    font-size: 13px;
    line-height: 1.6;
    margin-bottom: 16px;
    letter-spacing: 1px;
}

[data-theme="light"] .zodiac-deep-interp-count {
    color: rgba(40,60,100,0.65);
}

/* 响应式 */
@media (max-width: 600px) {
    .zodiac-deep-interp-content { padding: 20px 28px 36px; }
    .zodiac-deep-interp-icon { font-size: 28px; margin-bottom: 8px; }
    .zodiac-deep-interp-title { font-size: 16px; }
    .zodiac-deep-interp-desc { font-size: 12px; line-height: 1.7; }
    .zodiac-deep-interp-arrow { font-size: 12px; padding: 6px 18px; }
}

@media (max-width: 380px) {
    .zodiac-wheel-canvas { max-width: 280px; }
    .zodiac-overview-grid { grid-template-columns: 1fr; }
    .zodiac-fortune-overview { grid-template-columns: 1fr; }
    .zodiac-card-header { padding: 12px 14px; }
    .zodiac-card-content { padding: 14px; }
    .zodiac-deep-interp-content { padding: 18px 14px; }
}

@media (min-width: 381px) and (max-width: 768px) {
    .zodiac-wheel-canvas { max-width: 340px; }
}

@media (max-width: 768px) {
    .nav-list { overflow-x: auto; -webkit-overflow-scrolling: touch; white-space: nowrap; }
    .nav-list::-webkit-scrollbar { height: 0; }
}


/* ============================================================
   V3.0 新增页面基础样式(运势/合盘/对话/我的)
   ============================================================ */

/* ===== 运势页 ===== */
.fortune-tabs {
    display: flex;
    gap: 0;
    background: var(--bazi-card-bg, var(--card-bg));
    border-radius: var(--radius);
    padding: 4px;
    margin-bottom: 8px;
    box-shadow: var(--shadow, 0 2px 8px rgba(0,0,0,0.06));
    border: 1px solid var(--border);
}
.fortune-tab {
    flex: 1;
    padding: 6px 16px;
    border: none;
    background: none;
    color: var(--text-secondary);
    font-size: 13px;
    font-weight: 500;
    cursor: pointer;
    border-radius: var(--radius-sm);
    transition: all 0.25s ease;
    font-family: var(--font);
    text-align: center;
}
.fortune-tab:hover { color: var(--primary); }
.fortune-tab.active {
    color: var(--primary);
    background: var(--primary-bg, rgba(74,111,98,0.08));
    font-weight: 600;
    box-shadow: none;
}
/* V3.0优化: 时间筛选Tab与八字模块Tab对齐,全宽均分,不再挤在左边 */
.fortune-period-tabs {
    display: flex;
    gap: 0;
    background: var(--card-bg);
    border-radius: var(--radius);
    padding: 4px;
    margin-bottom: 8px;
    box-shadow: var(--shadow);
    border: 1px solid var(--border);
}
.fortune-period-btn {
    flex: 1;
    padding: 7px 10px;
    border: none;
    background: none;
    color: var(--text-secondary);
    font-size: 13px;
    font-weight: 500;
    cursor: pointer;
    transition: all 0.25s ease;
    font-family: var(--font);
    text-align: center;
    border-radius: var(--radius-sm);
    white-space: nowrap;
}
.fortune-period-btn:hover { color: var(--primary); }
.fortune-period-btn.active {
    color: var(--primary);
    background: var(--primary-bg, rgba(74,111,98,0.08));
    font-weight: 600;
    box-shadow: none;
}

/* ===== 合盘页 ===== */
/* V3.0优化: 合盘Tab与八字模块Tab(.bazi-module-tabs)样式规格完全一致 */
.composite-cards {
    display: flex;
    gap: 0;
    background: var(--card-bg);
    border-radius: var(--radius);
    padding: 4px;
    margin-bottom: 8px;
    box-shadow: var(--shadow);
    border: 1px solid var(--border);
}
.composite-card {
    flex: 1;
    padding: 6px 16px;
    border: none;
    background: none;
    color: var(--text-secondary);
    border-radius: var(--radius-sm);
    text-align: center;
    cursor: pointer;
    transition: all 0.25s ease;
    font-size: 13px;
    font-weight: 500;
    font-family: var(--font);
}
.composite-card:hover {
    color: var(--primary);
}
.composite-card.active {
    color: var(--primary);
    background: var(--primary-bg);
    font-weight: 600;
    box-shadow: none;
}

/* V3.0优化: 合盘宣传banner(精细化大气设计) */
.comp-banner {
    /* V3.1.7: PC端banner上移一点并缩短与卡片间距 */
    margin: 4px 0 12px; border-radius: 18px; overflow: hidden;
    position: relative;
    border: 1px solid rgba(212,160,23,0.35);
    box-shadow: 0 16px 48px rgba(61,95,80,0.22), 0 4px 12px rgba(212,160,23,0.15), inset 0 1px 0 rgba(255,255,255,0.15);
}
.comp-banner-bg {
    position: absolute; inset: 0;
    background:
        radial-gradient(ellipse 60% 80% at 8% 50%, rgba(212,160,23,0.28) 0%, transparent 50%),
        radial-gradient(ellipse 50% 70% at 92% 25%, rgba(126,184,160,0.20) 0%, transparent 50%),
        radial-gradient(ellipse 70% 60% at 50% 100%, rgba(212,160,23,0.15) 0%, transparent 55%),
        radial-gradient(circle at 75% 65%, rgba(58,90,140,0.12) 0%, transparent 40%),
        linear-gradient(135deg, #2D4B3E 0%, #3D5F50 25%, #4A6F62 50%, #5B8A7B 75%, #8A6B0E 100%);
    opacity: 1;
}
/* V3.0优化: 星点纹理叠加层(星点+菱形格栅,营造命理宇宙感) */
.comp-banner-bg::after {
    content: ''; position: absolute; inset: 0; pointer-events: none;
    background-image:
        radial-gradient(circle at 15% 20%, rgba(255,255,255,0.7) 1px, transparent 1.5px),
        radial-gradient(circle at 30% 60%, rgba(255,235,180,0.5) 1px, transparent 1.5px),
        radial-gradient(circle at 48% 30%, rgba(255,255,255,0.4) 1px, transparent 1.5px),
        radial-gradient(circle at 65% 50%, rgba(255,235,180,0.6) 1px, transparent 1.5px),
        radial-gradient(circle at 80% 18%, rgba(255,255,255,0.5) 1px, transparent 1.5px),
        radial-gradient(circle at 90% 65%, rgba(255,235,180,0.4) 1px, transparent 1.5px),
        radial-gradient(circle at 40% 80%, rgba(255,255,255,0.3) 1px, transparent 1.5px),
        radial-gradient(circle at 58% 12%, rgba(255,255,255,0.4) 1px, transparent 1.5px),
        radial-gradient(circle at 22% 40%, rgba(255,235,180,0.3) 1px, transparent 1.5px),
        radial-gradient(circle at 72% 82%, rgba(255,255,255,0.4) 1px, transparent 1.5px),
        repeating-linear-gradient(45deg, transparent, transparent 28px, rgba(212,160,23,0.03) 28px, rgba(212,160,23,0.03) 29px),
        repeating-linear-gradient(-45deg, transparent, transparent 28px, rgba(255,255,255,0.02) 28px, rgba(255,255,255,0.02) 29px);
    opacity: 0.9;
}
[data-theme="dark"] .comp-banner-bg {
    background:
        radial-gradient(ellipse 60% 80% at 8% 50%, rgba(212,160,23,0.20) 0%, transparent 50%),
        radial-gradient(ellipse 50% 70% at 92% 25%, rgba(126,184,160,0.15) 0%, transparent 50%),
        radial-gradient(ellipse 70% 60% at 50% 100%, rgba(212,160,23,0.10) 0%, transparent 55%),
        radial-gradient(circle at 75% 65%, rgba(58,90,140,0.10) 0%, transparent 40%),
        linear-gradient(135deg, #1E3A2F 0%, #2D4A3F 25%, #3D5F52 50%, #34524A 75%, #6B5308 100%);
    opacity: 1;
}
.comp-banner-content {
    /* V3.1.7: PC端banner内容高度缩短 */
    position: relative; padding: 26px 32px; display: flex; align-items: center; justify-content: center; gap: 22px;
}
/* V3.1.2: 删除描述小字后,剩余内容(图标+标题)居中显示 */
.comp-banner-content-centered {
    display: flex; align-items: center; justify-content: center;
}
.comp-banner-icon {
    font-size: 42px; width: 72px; height: 72px; border-radius: 50%;
    display: flex; align-items: center; justify-content: center;
    background: rgba(255,255,255,0.12); backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px);
    border: 1px solid rgba(255,255,255,0.30); flex-shrink: 0;
    box-shadow: 0 4px 20px rgba(0,0,0,0.15), inset 0 1px 0 rgba(255,255,255,0.2);
}
.comp-banner-text h3 {
    color: #fff; font-size: 22px; font-weight: 800; margin: 0 0 6px; letter-spacing: 2px;
    text-shadow: 0 2px 12px rgba(0,0,0,0.3);
    background: linear-gradient(90deg, #fff 0%, #FFE8B0 50%, #fff 100%);
    -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent;
}
.comp-banner-text p { color: rgba(255,255,255,0.90); font-size: 13px; margin: 0; line-height: 1.6; text-shadow: 0 1px 6px rgba(0,0,0,0.2); }
.comp-banner-features {
    position: relative; padding: 14px 32px 20px; display: flex; gap: 12px; flex-wrap: wrap;
}
.comp-banner-feature {
    color: rgba(255,255,255,0.95); font-size: 12px; font-weight: 600;
    background: rgba(255,255,255,0.12); padding: 6px 16px; border-radius: 20px;
    border: 1px solid rgba(255,255,255,0.22); backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px);
    transition: all 0.25s ease;
}
.comp-banner-feature:hover { background: rgba(255,255,255,0.20); transform: translateY(-1px); }

/* V3.0优化: 合盘类型选择弹窗 */
.comp-type-modal-content {
    background: var(--card-bg); border-radius: 16px; padding: 28px 24px;
    max-width: 480px; width: 90%; position: relative;
    box-shadow: 0 20px 60px rgba(0,0,0,0.2);
    animation: compTypeModalIn 0.3s ease;
}
/* V3.0优化: 合盘方式弹窗叉号放在右侧 */
.comp-type-modal-content .v3-page-modal-close {
    position: absolute; top: 12px; right: 12px;
}
@keyframes compTypeModalIn { from { opacity: 0; transform: translateY(20px) scale(0.95); } to { opacity: 1; transform: translateY(0) scale(1); } }
.comp-type-modal-title { text-align: center; font-size: 20px; font-weight: 700; margin: 0 0 6px; color: var(--text-primary); }
.comp-type-modal-desc { text-align: center; font-size: 13px; color: var(--text-secondary); line-height: 1.7; letter-spacing: 0.3px; margin: 4px 0 24px; }
.comp-type-desc-main { font-weight: 600; color: var(--text-primary); }
.comp-type-desc-sep { color: var(--text-secondary); margin: 0 2px; }
.comp-type-desc-highlight {
    font-weight: 700;
    background: linear-gradient(135deg, var(--primary) 0%, color-mix(in srgb, var(--primary) 55%, #d4a04a) 100%);
    -webkit-background-clip: text; background-clip: text;
    -webkit-text-fill-color: transparent;
    padding: 0 2px;
}
/* V3.0优化: 合盘方式纯文字两行样式 */
.comp-type-text-list { display: flex; flex-direction: column; gap: 12px; }
.comp-type-text-item {
    padding: 16px 20px; border-radius: 12px; cursor: pointer;
    border: 1px solid var(--border); background: var(--bg);
    transition: all 0.25s ease; display: flex; align-items: center; gap: 12px;
}
.comp-type-text-item:hover { border-color: var(--primary); background: var(--primary-bg); transform: translateX(4px); }
.comp-type-text-name { font-size: 16px; font-weight: 700; color: var(--text); white-space: nowrap; }
.comp-type-text-desc { font-size: 13px; color: var(--text-muted); letter-spacing: 1px; }
.comp-type-cards { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }
/* V3.1.2优化: 合盘方式大卡片样式,适配弹窗内显示 */
.comp-type-cards-v2 { grid-template-columns: 1fr 1fr; gap: 12px; margin-top: 8px; }
.comp-type-card {
    padding: 24px 16px; border-radius: 14px; cursor: pointer; text-align: center;
    border: 2px solid var(--border); transition: all 0.25s ease; position: relative; overflow: hidden;
    background: var(--card-bg);
}
.comp-type-card::before {
    content: ''; position: absolute; top: -30%; right: -30%;
    width: 120%; height: 120%; border-radius: 50%;
    opacity: 0.10; pointer-events: none; transition: all 0.3s ease;
    filter: blur(2px);
}
.comp-type-card::after {
    content: ''; position: absolute; bottom: -50%; left: -30%;
    width: 100%; height: 100%; border-radius: 50%;
    opacity: 0.06; pointer-events: none; transition: all 0.3s ease;
    filter: blur(3px);
}
.comp-type-card:hover { transform: translateY(-3px); box-shadow: 0 8px 24px rgba(0,0,0,0.1); }
.comp-type-card:hover::before { transform: scale(1.1); opacity: 0.16; }
.comp-type-card:hover::after { transform: scale(1.1); opacity: 0.10; }
.comp-type-card .comp-type-card-icon { font-size: 36px; margin-bottom: 10px; position: relative; z-index: 1; }
.comp-type-card h4 { font-size: 16px; font-weight: 700; margin: 0 0 12px; position: relative; z-index: 1; }
.comp-type-card-tags { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; max-width: 160px; margin: 0 auto; position: relative; z-index: 1; }
/* V3.1.2: 八字合盘/星盘合盘卡片配色 - 增强背景设计 */
.comp-type-card.comp-type-bazi {
    border-color: rgba(74,111,98,0.35);
    background:
        radial-gradient(circle at top right, rgba(74,111,98,0.14), transparent 60%),
        linear-gradient(135deg, rgba(74,111,98,0.10), rgba(74,111,98,0.03));
    box-shadow: inset 0 1px 0 rgba(255,255,255,0.4), 0 2px 8px rgba(74,111,98,0.06);
}
.comp-type-card.comp-type-bazi::before {
    background: radial-gradient(circle, rgba(74,111,98,0.5), transparent 70%);
}
.comp-type-card.comp-type-bazi::after {
    background: radial-gradient(circle, rgba(74,111,98,0.4), transparent 70%);
}
.comp-type-card.comp-type-bazi:hover { border-color: var(--primary); box-shadow: 0 10px 28px rgba(74,111,98,0.18), inset 0 1px 0 rgba(255,255,255,0.4); }
.comp-type-card.comp-type-zodiac {
    border-color: rgba(74,106,156,0.35);
    background:
        radial-gradient(circle at top right, rgba(74,106,156,0.14), transparent 60%),
        linear-gradient(135deg, rgba(74,106,156,0.10), rgba(74,106,156,0.03));
    box-shadow: inset 0 1px 0 rgba(255,255,255,0.4), 0 2px 8px rgba(74,106,156,0.06);
}
.comp-type-card.comp-type-zodiac::before {
    background: radial-gradient(circle, rgba(74,106,156,0.5), transparent 70%);
}
.comp-type-card.comp-type-zodiac::after {
    background: radial-gradient(circle, rgba(74,106,156,0.4), transparent 70%);
}
.comp-type-card.comp-type-zodiac:hover { border-color: #4A6A9C; box-shadow: 0 10px 28px rgba(74,106,156,0.18), inset 0 1px 0 rgba(255,255,255,0.4); }
.comp-type-card.comp-type-zodiac .comp-type-card-icon { color: #4A6A9C; }
.comp-type-card.comp-type-bazi .comp-type-card-icon {
    color: var(--primary);
    display: flex; align-items: center; justify-content: center;
}
.comp-type-card.comp-type-bazi .comp-type-card-icon svg {
    width: 36px; height: 36px; display: block;
}
.comp-type-tag {
    font-size: 13px; font-weight: 600; padding: 6px 0; border-radius: 8px;
    background: rgba(255,255,255,0.06); border: 1px solid rgba(0,0,0,0.06);
    color: var(--text-secondary); letter-spacing: 2px;
}
.comp-type-bazi { background: linear-gradient(135deg, rgba(74,111,98,0.08), rgba(74,111,98,0.02)); }
.comp-type-bazi:hover { border-color: var(--primary); }
.comp-type-bazi .comp-type-tag { background: rgba(74,111,98,0.08); color: var(--primary); border-color: rgba(74,111,98,0.15); }
.comp-type-zodiac { background: linear-gradient(135deg, rgba(74,106,156,0.08), rgba(74,106,156,0.02)); }
.comp-type-zodiac:hover { border-color: #4A6A9C; }
.comp-type-zodiac .comp-type-tag { background: rgba(74,106,156,0.08); color: #4A6A9C; border-color: rgba(74,106,156,0.15); }

/* ===== 对话页 ===== */
.chat-list {
    padding: 0 14px 24px;
}
/* V3.1.2: 对话页外层Tab(全部对话/运势推送/消息中心) - 胶囊式设计参考运势模块 */
.chat-page-tabs {
    display: flex;
    gap: 0;
    background: var(--card-bg);
    border-radius: var(--radius);
    padding: 4px;
    margin: 4px 14px 8px;    /* V3.x: 顶部间距与合盘页首个元素(4px)一致,不再多留12px */
    box-shadow: var(--shadow, 0 2px 8px rgba(0,0,0,0.06));
    border: 1px solid var(--border);
    position: sticky;
    top: 0;
    z-index: 20;
    /* V3.1.2: 防止卡片滚动穿过tab(backdrop-filter创建stacking context让sticky始终在卡片之上) */
    isolation: isolate;
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
}
/* V3.1.2: 卡片设置 position:relative + z-index低于tab,确保滚动时不穿过sticky tab */
.chat-msg-card, .chat-card { position: relative; z-index: 1; }
.chat-page-tab {
    flex: 1;
    padding: 8px 12px;
    background: none;
    border: none;
    color: var(--text-secondary);
    font-size: 13px;
    font-weight: 500;
    cursor: pointer;
    transition: all 0.25s ease;
    position: relative;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 4px;
    letter-spacing: 1px;
    border-radius: var(--radius-sm);
    font-family: var(--font);
    text-align: center;
    overflow: visible;
}
.chat-page-tab:hover { color: var(--primary); }
.chat-page-tab.active {
    color: var(--primary);
    background: var(--primary-bg, rgba(74,111,98,0.08));
    font-weight: 600;
    box-shadow: none;
}
/* V3.1.3: Tab红点改为右上角小红点(参考主流APP设计),不显示数字 */
/* V3.2.4: 红点绑定文字右上角(非tab卡片),7.2px正圆(原9px缩小20%),标准警示红 */
.chat-tab-dot {
    display: inline-block;
    width: 7.2px;
    height: 7.2px;
    background: #F53F3F;
    border-radius: 50%;
    box-sizing: border-box;
    flex-shrink: 0;
    font-size: 0;
    line-height: 0;
    overflow: hidden;
    /* 水平: 红点左边缘距文字最右侧 6px */
    margin-left: 6px;
    /* 垂直: 红点下边缘距文字最顶端 -3px(红点向上偏移,微微探出文字上方) */
    transform: translateY(-3px);
    /* 极淡阴影,轻微悬浮质感 */
    box-shadow: 0 0.5px 1px rgba(0,0,0,0.12);
}
/* 兼容旧class名 chat-tab-badge,同样改为小红点样式 */
.chat-tab-badge {
    display: inline-block;
    width: 7.2px;
    height: 7.2px;
    background: #F53F3F;
    border-radius: 50%;
    box-sizing: border-box;
    flex-shrink: 0;
    margin-left: 6px;
    transform: translateY(-3px);
    box-shadow: 0 0.5px 1px rgba(0,0,0,0.12);
    padding: 0;
    min-width: 0;
    font-size: 0;
    line-height: 0;
}
/* 卡片级红点已废弃,保留class以防遗漏引用但不显示 */
.chat-card-badge {
    display: none !important;
}
.chat-tab-panel { animation: fadeInTab 0.2s ease; }
@keyframes fadeInTab { from { opacity: 0; transform: translateY(4px); } to { opacity: 1; transform: translateY(0); } }
/* V3.1.83: 对话页三个Tab冻结顶部菜单栏——改用自包含flex滚动布局(比sticky更可靠,sticky会被body的overflow-x:hidden破坏):
   #pageChat作为flex列,高度撑满;Tab栏flex:0 0 auto固定不动;内容面板flex:1内部滚动,绝不越过Tab栏 */
#pageChat {
    display: flex;
    flex-direction: column;
    height: 100%;
    min-height: 0;
}
#pageChat .chat-page-tabs {
    position: static;
    flex: 0 0 auto;
}
/* PC端:面板不自滚动,交回浏览器窗口(避免多出一个内部滚动条);移动端在媒体查询内恢复内部滚动 */
#pageChat .chat-tab-panel {
    flex: 1 1 auto;
    min-height: 0;
    overflow: visible;
}
@media (max-width: 600px) {
    #pageChat .chat-tab-panel {
        overflow-y: auto;
        -webkit-overflow-scrolling: touch;
    }
}
/* V3.1.2: 运势推送/消息中心内嵌容器 - 左右与Tab对齐14px,上8px下24px */
.msg-center-inline { padding: 0 14px 24px; }
/* V3.1.2: 内嵌消息列表容器使用flex布局,统一卡片间距 */
.msg-center-inline .chat-modal-messages { padding: 0; gap: 8px; }
.msg-center-inline .chat-msg-card { margin-bottom: 0; }
.chat-list-item {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 14px 12px;
    border-bottom: 1px solid var(--border);
    cursor: pointer;
    transition: background 0.2s ease;
}
.chat-list-item:hover { background: var(--bg); }
.chat-list-item .chat-icon {
    width: 40px;
    height: 40px;
    border-radius: 50%;
    background: var(--primary-bg);
    color: var(--primary);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 18px;
    flex-shrink: 0;
}
.chat-list-item .chat-info { flex: 1; min-width: 0; }
.chat-list-item .chat-title {
    font-size: 14px;
    font-weight: 600;
    color: var(--text);
    margin-bottom: 2px;
}
.chat-list-item .chat-desc {
    font-size: 12px;
    color: var(--text-muted);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.chat-list-item .chat-badge {
    background: #E5484D;
    color: #fff;
    font-size: 11px;
    padding: 2px 7px;
    border-radius: 10px;
    min-width: 18px;
    text-align: center;
}

/* V3.0优化: 对话列表卡片化 */
.chat-list-header { padding: 20px 14px 12px; text-align: center; }
.chat-list-header h3 { font-size: 20px; font-weight: 700; color: var(--text); margin-bottom: 4px; }
.chat-list-header p { font-size: 13px; color: var(--text-muted); }
.chat-list-grid { padding: 0; display: flex; flex-direction: column; gap: 10px; }
.chat-card {
    display: flex; align-items: center; gap: 14px;
    padding: 14px 16px; background: var(--card-bg);
    border: 1px solid var(--border); border-radius: 14px;
    cursor: pointer; transition: transform 0.2s ease, box-shadow 0.2s ease, border-color 0.2s ease;
    position: relative; will-change: transform;
}
.chat-card:hover {
    border-color: rgba(74,111,98,0.3);
    box-shadow: 0 2px 8px rgba(74,111,98,0.06), 0 8px 24px rgba(74,111,98,0.04);
    transform: translateY(-1px);
}
.chat-card:active { transform: scale(0.99); transition: transform 0.1s ease; }
.chat-card-icon-wrap {
    width: 44px; height: 44px; border-radius: 12px;
    display: flex; align-items: center; justify-content: center;
    font-size: 20px; flex-shrink: 0;
    line-height: 1;  /* V3.1.2修复: emoji baseline对齐,确保在容器中垂直居中 */
}
.chat-card-avatar-img {
    width: 30px; height: 30px; object-fit: contain; border-radius: 50%;
}
.chat-card-icon-bare {
    background: transparent !important;
    border-radius: 50%;
}
.chat-card-icon-bare .chat-card-avatar-img {
    width: 42px; height: 42px; border-radius: 50%;
}
.chat-card-icon-wrap.free { background: #DCFCE7; color: #16A34A; }
.chat-card-icon-wrap.msg { background: #FEF3C7; color: #D97706; }
.chat-card-icon-wrap.paid { background: #4A6F6218; color: #4A6F62; }
.chat-icon-composite_bazi { background: #FAF9F6 !important; }  /* V3.3.23: 去掉容器scale(圆形恢复标准大小),八卦由内容缩放放大 */
.chat-icon-composite_zodiac { background: #7C3AED18; }
/* V3.3.23修复: 八字合盘八卦☯比星座♈/✨小,内容scale 1.25放大到一致大小(图标不变) */
.comp-bazi-icon { display: flex; align-items: center; justify-content: center; line-height: 1; }
.comp-bazi-icon svg { width: 22px; height: 22px; display: block; }
.chat-card-icon-wrap.vip { background: linear-gradient(135deg, #FEF3C7, #FDE68A); color: #B45309; }
/* V3.1.2修复: 皇冠emoji在圆形头像中居中,禁止放大缩小 */
.chat-card-icon-wrap.vip { line-height: 1; padding-top: 0; }
/* V3.3.23修复: 保留原👑emoji图标,flex完美居中(去掉原translateY手调偏移) */
.vip-crown-emoji {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    height: 100%;
    line-height: 1;
}
/* V3.3.23修复: 对话窗口皇冠头像flex完美居中(去掉原translateY(-4.5px)手调偏移,真实手机端各字体不一致) */
.vip-crown-modal { display: inline-flex; align-items: center; justify-content: center; line-height: 1; }
.chat-card-vip { border: 2px solid #F59E0B; background: linear-gradient(135deg, rgba(254,243,199,0.3), var(--card-bg)); }
.chat-card-vip:hover { border-color: #D97706; box-shadow: 0 4px 16px rgba(245,158,11,0.15); }
.chat-tag.vip-tag { background: #FEF3C7; color: #B45309; font-weight: 600; }
.chat-card-body { flex: 1; min-width: 0; }
.chat-card-title {
    font-size: 15px; font-weight: 600; color: var(--text);
    margin-bottom: 2px; display: flex; align-items: center; gap: 8px; flex-wrap: wrap;
    letter-spacing: 0.3px;
}
.chat-card-desc { font-size: 12px; color: var(--text-muted); letter-spacing: 0.2px; }
.chat-card .chat-badge {
    background: #E5484D; color: #fff; font-size: 11px;
    padding: 2px 7px; border-radius: 10px; min-width: 18px; text-align: center;
}
.chat-arrow { color: var(--text-muted); font-size: 18px; flex-shrink: 0; opacity: 0.5; transition: opacity 0.2s ease, transform 0.2s ease; }
.chat-card:hover .chat-arrow { opacity: 1; transform: translateX(2px); }
.chat-tag {
    font-size: 11px; padding: 2px 8px; border-radius: 10px;
    font-weight: 500; white-space: nowrap; letter-spacing: 0.3px;
}
.chat-tag.free { background: #DCFCE7; color: #16A34A; }
.chat-tag.paid { background: #DBEAFE; color: #2563EB; }
.chat-tag.unlock { background: #FEF3C7; color: #D97706; }
.chat-tag.used { background: #F3F4F6; color: var(--text-muted); }

/* V3.0优化: 对话弹窗 */
.chat-modal-overlay {
    position: fixed; top: 0; left: 0; right: 0; bottom: 0;
    background: rgba(0,0,0,0.5); z-index: 1500;
    display: flex; align-items: center; justify-content: center;
    backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px);
    padding: 16px;
}
.chat-modal-box {
    background: var(--card-bg); border-radius: var(--radius);
    width: 100%; max-width: 520px; height: 80vh; max-height: 640px;
    display: flex; flex-direction: column; overflow: hidden;
    box-shadow: 0 20px 60px rgba(0,0,0,0.3);
    animation: floatUp 0.3s ease;
}
.chat-modal-header {
    display: flex; align-items: center; justify-content: center;
    padding: 14px 20px; border-bottom: 1px solid var(--border);
    flex-shrink: 0; position: relative;
}
.chat-modal-header h3 { font-size: 16px; font-weight: 700; color: var(--text); display: flex; align-items: center; justify-content: center; gap: 8px; }
.agent-icon {
    width: auto; height: 44px;
    object-fit: contain; flex-shrink: 0;
    background: transparent !important;
    border-radius: 0;
}
/* V3.2: 对话页头部头像容器(与列表图标一致: emoji 或 agent 图) */
/* V3.1.2修复: 皇冠头像与标题垂直居中对齐 */
.chat-modal-avatar {
    width: 44px; height: 44px; flex-shrink: 0;
    display: inline-flex; align-items: center; justify-content: center;
    background: transparent; border-radius: 0; overflow: hidden; vertical-align: middle;
    line-height: 1;
}
.chat-modal-avatar img { width: 100%; height: 100%; object-fit: contain; }
.chat-modal-avatar .chat-avatar-emoji { font-size: 28px; line-height: 1; display: inline-flex; align-items: center; justify-content: center; }
/* V3.1.3: 全局深度咨询对话页标题栏logo上移1px */
.chat-modal-avatar.avatar-type-vip { transform: translateY(0.5px); }
/* V3.1.3: 全局深度咨询对话页标题左移2px */
.chat-modal-avatar.avatar-type-vip + .chat-modal-title { margin-left: -2px; }
/* V3.1.2: 八字合盘咨询对话页头部头像背景改为米白色 */
.chat-modal-avatar.avatar-type-composite_bazi {
    background: #FAF9F6 !important;
    border-radius: 12px;
}
/* V3.1.2: 八字合盘对话消息列表中的bot头像也用米白色背景 */
#chatModalOverlay .msg-avatar.avatar-type-composite_bazi {
    background: #FAF9F6 !important;
    border-radius: 8px;
}
.chat-modal-close {
    position: absolute; right: 14px; top: 50%; transform: translateY(-50%);
    background: transparent; border: none; font-size: 18px;
    color: var(--text-muted); cursor: pointer; padding: 4px 8px;
    border-radius: 6px; transition: all 0.2s;
}
.chat-modal-close:hover { background: var(--bg); color: var(--text); }
.chat-modal-body { flex: 1; overflow-y: auto; display: flex; flex-direction: column; min-height: 0; }
.chat-modal-messages {
    flex: 1; overflow-y: auto; padding: 14px;
    display: flex; flex-direction: column; gap: 12px;
    min-height: 0;
}
.chat-modal-footer { flex-shrink: 0; border-top: 1px solid var(--border); }
.chat-scope-banner {
    padding: 10px 16px; background: var(--primary-bg);
    color: var(--text-secondary); font-size: 12px; line-height: 1.6;
    border-bottom: 1px solid var(--border);
}
.chat-scope-banner strong { color: var(--primary); }
/* V3.1.86: 剩余次数改为居中胶囊(取代大橙条),避免与提示条视觉竞争 */
.chat-remaining-bar {
    align-self: center;
    display: inline-flex; align-items: center; gap: 4px;
    padding: 3px 10px; border-radius: 999px;
    background: rgba(217,119,6,0.12); color: #D97706;
    font-size: 12px; margin: 0 auto 10px;
}
.chat-remaining-bar strong { font-size: 13px; }
.chat-remaining-bar.exhausted { background: rgba(0,0,0,0.06); color: var(--text-muted); }
.chat-input-area {
    display: flex; gap: 8px; padding: 12px 16px;
}
.chat-input-wrap {
    flex: 1; position: relative; display: flex; flex-direction: column;
}
.chat-input {
    flex: none; padding: 12px 14px; border: 1px solid var(--border);
    border-radius: 10px; background: var(--bg); color: var(--text);
    font-size: 14px; font-family: var(--font); outline: none;
    min-height: 44px; max-height: 120px; resize: none; line-height: 1.5;
    box-sizing: border-box;
}
.chat-input::placeholder {
    font-size: 14px;
    color: var(--text-muted);
}
.chat-input:focus {
    outline: none; border-color: var(--primary);
    box-shadow: 0 0 0 3px rgba(74,144,217,0.1);
}
.chat-input:disabled { opacity: 0.5; cursor: not-allowed; }
/* V3.x: 对话框基础层全局生效（不依赖媒体查询，避免浏览器缓存导致移动端样式不生效）
   标题+头像居中、banner/剩余条/输入框两侧完整延伸到弹窗边缘 */
.chat-modal-header {
    min-height: 56px !important;
    padding: 8px 14px !important;
    box-sizing: border-box !important;
    align-items: center !important;
    justify-content: center !important;
    border-bottom: 1px solid var(--border) !important;
}
.chat-modal-header h3 {
    position: static !important;
    flex: 0 0 auto !important;
    margin: 0 auto !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
}
.chat-scope-banner {
    margin: 0 !important;
    width: 100% !important;
    border-radius: 0 !important;
    padding: 10px 14px !important;
    box-sizing: border-box !important;
}
.chat-remaining-bar {
    align-self: stretch !important;
    width: 100% !important;
    margin: 0 0 10px !important;
    border-radius: 0 !important;
    justify-content: center !important;
    padding: 8px 14px !important;
    box-sizing: border-box !important;
}
.chat-input-area {
    padding: 10px 0 !important;
}
.chat-input-area .chat-send-btn {
    margin-right: 10px !important;
}
.chat-char-count {
    position: absolute;
    bottom: 6px;
    right: 10px;
    font-size: 11px;
    color: var(--text-muted);
    line-height: 1;
    z-index: 1;
    pointer-events: none;
    background: var(--bg);
    padding: 2px 5px;
    border-radius: 4px;
}
.chat-send-btn {
    padding: 12px 20px; background: var(--primary); color: #fff;
    border: none; border-radius: 10px;
    font-size: 14px; font-weight: 600; font-family: var(--font);
    cursor: pointer; letter-spacing: 1px;
    transition: all 0.2s; white-space: nowrap;
}
.chat-send-btn:hover { opacity: 0.9; }
.chat-send-btn:disabled { opacity: 0.4; cursor: not-allowed; }

/* ===== V3.1.86: 对话气泡行 / 头像 / typing / 快捷提问(通用,所有对话弹窗受益) ===== */
.chat-scope-icon { flex-shrink: 0; vertical-align: -2px; margin-right: 4px; }
.chat-msg-row { display: flex; align-items: flex-start; gap: 8px; width: 100%; }
.chat-msg-row.bot-row { justify-content: flex-start; }
.chat-msg-row.user-row { justify-content: flex-end; }
.chat-msg-avatar {
    width: 38px; height: 38px; flex-shrink: 0;   /* 放大 25% (30 -> 38) */
    display: flex; align-items: center; justify-content: center;
    background: transparent;        /* 与头部 .agent-icon 一致: 无圆形底色/边框 */
    border-radius: 50%;             /* v372: 对齐列表裸头像(无边框圆形) */
    overflow: hidden;                /* 防止去背景图溢出到气泡下方 */
}
.chat-msg-avatar img { width: 100%; height: 100%; object-fit: contain; border-radius: 50%; }
/* V3.2: 对话气泡内 emoji 头像(与列表图标一致) */
.chat-avatar-emoji { font-size: 22px; line-height: 1; }
/* IM 风格气泡圆角: 自己右下小角,对方左下小角 */
.chat-msg.bot { border-radius: 4px 16px 16px 16px; align-self: auto; }
.chat-msg.user { border-radius: 16px 4px 16px 16px; align-self: auto; }
/* typing 三点呼吸动画 */
.chat-typing-dots { display: inline-flex; gap: 4px; align-items: center; }
.chat-typing-dots span {
    width: 6px; height: 6px; border-radius: 50%;
    background: var(--text-muted); opacity: .4;
    animation: typingBounce 1.2s infinite ease-in-out;
}
.chat-typing-dots span:nth-child(2) { animation-delay: .2s; }
.chat-typing-dots span:nth-child(3) { animation-delay: .4s; }
@keyframes typingBounce {
    0%, 60%, 100% { opacity: .3; transform: translateY(0); }
    30% { opacity: 1; transform: translateY(-4px); }
}
/* 快捷提问 chips */
.chat-quick-questions {
    display: flex; flex-direction: column; gap: 5px;
    margin-top: 14px;
}
.chat-quick-chip {
    padding: 5px 10px; font-size: 11px; line-height: 1.3;
    border: 1px solid var(--border); border-radius: 6px;
    background: var(--bg); color: var(--text-secondary);
    cursor: pointer; transition: all .15s;
    text-align: left; position: relative;
}
.chat-quick-chip::after { content: ' ›'; font-weight: bold; color: var(--primary); }
.chat-quick-chip:active { opacity: .7; }
/* V3.2.4: 合盘选择关系选项(与每日运势快捷问题样式一致) */
.chat-relation-questions {
    display: flex; flex-direction: column; gap: 8px;
    padding: 4px 16px 20px;
}
.chat-relation-chip {
    padding: 10px 14px; font-size: 13px; line-height: 1.4;
    border: 1px solid var(--border); border-radius: 8px;
    background: var(--bg); color: var(--text);
    cursor: pointer; transition: all .15s;
    text-align: left; position: relative;
}
.chat-relation-chip:hover { border-color: var(--primary); color: var(--primary); }
.chat-relation-chip::after { content: ' ›'; font-weight: bold; color: var(--primary); position: absolute; right: 12px; top: 50%; transform: translateY(-50%); }
/* V3.2.4: 每日运势快捷问题与合盘选择tab边框颜色加深10%(原50%透明 -> 60%) */
#chatModalOverlay .chat-quick-chip { border-color: color-mix(in srgb, var(--border) 60%, transparent); }
#chatModalOverlay .chat-relation-chip { border-color: color-mix(in srgb, var(--border) 60%, transparent); }
/* 字数统计: 仅临近上限(>400)时显示 */
.chat-char-count { transition: opacity .2s, color .2s; }
.chat-char-count.hidden { opacity: 0; visibility: hidden; }
.chat-char-count.warn { color: #D97706; }
.chat-char-count.over { color: #E53E3E; }

/* 兼容旧版 chat-conversation(保留但隐藏,统一用弹窗) */
.chat-conversation { display: none !important; }

/* 移动端对话弹窗适配 */
@media (max-width: 640px) {
    .chat-modal-box { height: 90vh; max-height: none; border-radius: var(--radius) var(--radius) 0 0; }
    .chat-card { padding: 14px; }
    .chat-card-icon-wrap { width: 42px; height: 42px; font-size: 20px; }
    .chat-card-title { font-size: 14px; }
    .chat-list-header h3 { font-size: 18px; }
}

.chat-conversation {
    display: none;
    flex-direction: column;
    height: calc(100vh - 180px);
}
.chat-conversation.active { display: flex; }
.chat-header {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 12px 16px;
    border-bottom: 1px solid var(--border);
}
.chat-back-btn {
    background: transparent;
    border: none;
    color: var(--text-secondary);
    font-size: 18px;
    cursor: pointer;
    padding: 4px 8px;
}
.chat-messages {
    flex: 1;
    overflow-y: auto;
    padding: 16px;
    display: flex;
    flex-direction: column;
    gap: 12px;
}
.chat-msg {
    max-width: 85%;
    padding: 10px 14px;
    border-radius: 12px;
    font-size: 13px;
    line-height: 1.7;
    word-wrap: break-word;
    animation: msgIn 0.3s ease;
}
/* 智能体结构化回答: 段落间距与加粗标题 */
.chat-answer p { margin: 0 0 8px; }
.chat-answer p:last-child { margin-bottom: 0; }
.chat-answer strong { font-weight: 700; color: var(--text); }
@keyframes msgIn {
    from { opacity: 0; transform: translateY(8px); }
    to { opacity: 1; transform: translateY(0); }
}
.chat-msg.user {
    align-self: flex-end;
    background: var(--primary);
    color: #fff;
}
.chat-msg.bot {
    align-self: flex-start;
    background: var(--bg);
    border: 1px solid var(--border);
    color: var(--text-secondary);
}
.chat-input-area {
    display: flex;
    gap: 8px;
    padding: 12px 16px;
    border-top: 1px solid var(--border);
    background: var(--card-bg);
}
.chat-input-wrap {
    flex: 1; position: relative; display: flex; flex-direction: column;
}
.chat-input {
    flex: none;
    padding: 12px 14px;
    border: 1px solid var(--border);
    border-radius: 10px;
    background: var(--bg);
    color: var(--text);
    font-size: 13px;
    font-family: var(--font);
    outline: none;
    min-height: 44px;
    max-height: 120px;
    resize: none;
    line-height: 1.5;
    box-sizing: border-box;
}
.chat-input:focus {
    outline: none; border-color: var(--primary);
    box-shadow: 0 0 0 3px rgba(74,144,217,0.1);
}
.chat-char-count {
    position: absolute;
    bottom: 6px;
    right: 10px;
    font-size: 11px;
    color: var(--text-muted);
    line-height: 1;
    z-index: 1;
    pointer-events: none;
}
.chat-send-btn {
    padding: 12px 20px;
    background: var(--primary);
    color: #fff;
    border: none;
    border-radius: 10px;
    font-size: 14px;
    font-weight: 600;
    cursor: pointer;
    font-family: var(--font);
    letter-spacing: 1px;
    transition: all 0.2s;
    white-space: nowrap;
}
.chat-send-btn:hover { opacity: 0.9; }
.chat-send-btn:disabled { opacity: 0.4; cursor: not-allowed; }
.chat-scope-banner {
    background: rgba(74, 111, 98, 0.08);
    color: var(--primary);
    font-size: 12px;
    padding: 8px 14px;
    text-align: center;
    border-bottom: 1px solid rgba(74, 111, 98, 0.15);
}

/* ===== 我的页 ===== */
.profile-menu {
    padding: 6px 16px;
    background: var(--card-bg);
    border-radius: 16px;
    border: 1px solid var(--border);
    box-shadow: 0 2px 12px rgba(74,111,98,0.06);
    margin: 0 16px;
    overflow: hidden;
}
.profile-menu-item {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 15px 16px;
    border-bottom: 1px solid rgba(74,111,98,0.08);
    cursor: pointer;
    transition: background 0.2s ease;
    font-size: 14px;
    color: var(--text);
}
.profile-menu-item:last-child { border-bottom: none; }
.profile-menu-item:hover { background: rgba(74,111,98,0.05); }
.profile-menu-item:active { background: rgba(74,111,98,0.08); }
.profile-menu-item .menu-icon {
    font-size: 18px;
    width: 24px;
    text-align: center;
}
.profile-menu-item .menu-arrow {
    margin-left: auto;
    color: var(--text-muted);
    font-size: 14px;
}
.profile-header {
    display: flex;
    align-items: center;
    gap: 16px;
    padding: 22px 20px;
    margin: 16px 16px 14px;
    border-radius: 16px;
    background: linear-gradient(135deg, rgba(74,111,98,0.14) 0%, rgba(74,111,98,0.06) 60%, rgba(212,175,55,0.08) 100%);
    border: 1px solid rgba(74,111,98,0.18);
    box-shadow: 0 4px 14px rgba(74,111,98,0.08), inset 0 1px 0 rgba(255,255,255,0.5);
    position: relative;
    overflow: hidden;
}
.profile-header::before {
    content: '';
    position: absolute;
    top: -30px; right: -30px;
    width: 120px; height: 120px;
    border-radius: 50%;
    background: radial-gradient(circle, rgba(212,175,55,0.18) 0%, transparent 70%);
    pointer-events: none;
}
.profile-avatar {
    width: 64px;
    height: 64px;
    border-radius: 50%;
    overflow: hidden;
    flex-shrink: 0;
    border: none;
    box-shadow: none;
    background: transparent;
}
.profile-avatar svg { width: 100%; height: 100%; display: block; }
.profile-info { flex: 1; min-width: 0; position: relative; z-index: 1; }
.profile-phone {
    font-size: 17px;
    font-weight: 700;
    color: var(--text);
    margin-bottom: 6px;
    letter-spacing: 0.5px;
}
.profile-vip-tag {
    display: inline-flex; align-items: center; gap: 4px;
    font-size: 11px; padding: 4px 11px; border-radius: 12px;
    font-weight: 600;
    letter-spacing: 0.3px;
}
.profile-vip-tag.yearly { background: linear-gradient(135deg, #FEF3C7, #FDE68A); color: #92400E; border: 1px solid rgba(212,175,55,0.4); }
.profile-vip-tag.monthly { background: linear-gradient(135deg, #FEF3C7, #FDE68A); color: #92400E; border: 1px solid rgba(212,175,55,0.4); }
.profile-vip-tag.none { background: rgba(125,125,125,0.1); color: var(--text-muted); border: 1px solid var(--border); }
[data-theme="dark"] .profile-vip-tag.monthly { background: linear-gradient(135deg, rgba(212,175,55,0.22), rgba(212,175,55,0.12)); color: #FDE68A; border-color: rgba(212,175,55,0.35); }
[data-theme="dark"] .profile-header {
    background: linear-gradient(135deg, rgba(74,111,98,0.22) 0%, rgba(74,111,98,0.10) 60%, rgba(212,175,55,0.14) 100%);
    border-color: rgba(74,111,98,0.32);
    box-shadow: 0 4px 14px rgba(0,0,0,0.3), inset 0 1px 0 rgba(255,255,255,0.05);
}
[data-theme="dark"] .profile-avatar { border: none; box-shadow: none; background: transparent; }
.profile-menu-item.logout-item { color: var(--danger); }
.profile-menu-item.logout-item .menu-icon { color: var(--danger); }

/* V3.3: 会员套餐卡片（紧凑版） */
.membership-plans {
    display: flex; flex-direction: column; gap: 32px;
    padding: 0 20px 6px;
    margin-top: 14px;
}
.membership-status-card { margin: 6px 16px 0; }
.membership-status-card .sub-card { padding: 8px 10px; margin-bottom: 5px; }
.membership-status-card .sub-card:last-child { margin-bottom: 0; }

.plan-card {
    border-radius: 14px; padding: 20px 16px 14px;
    display: flex; flex-direction: column; align-items: center;
    position: relative; transition: all 0.25s ease;
    overflow: hidden;
    text-align: center;
    border: 2px solid transparent;
}

/* 年卡 - 暖金奢华渐变背景（推荐，排第一） */
.plan-card.plan-yearly {
    background:
        radial-gradient(circle at 80% 0%, rgba(255,255,255,0.45) 0%, transparent 50%),
        linear-gradient(160deg, #FEF3C7 0%, #FDE68A 35%, #FCD34D 70%, #FEF3C7 100%);
    border-color: rgba(217,119,6,0.5);
    box-shadow: 0 4px 14px rgba(217,119,6,0.12), inset 0 1px 0 rgba(255,255,255,0.6);
}
.plan-card.plan-yearly::before {
    content: '';
    position: absolute;
    top: -40px; right: -40px;
    width: 80px; height: 80px;
    border-radius: 50%;
    background: radial-gradient(circle, rgba(255,255,255,0.55) 0%, transparent 70%);
    pointer-events: none;
}
/* 年卡推荐角标（卡片内部，不溢出） */
.plan-badge-yearly {
    position: absolute; top: 10px; right: 10px;
    background: linear-gradient(135deg, #F59E0B, #D97706);
    color: #fff;
    font-size: 10px; padding: 2px 8px; border-radius: 6px;
    font-weight: 700; box-shadow: 0 2px 6px rgba(217,119,6,0.35);
}

/* 月卡 - 翡翠青绿渐变背景 */
.plan-card.plan-monthly {
    background:
        radial-gradient(circle at 80% 0%, rgba(255,255,255,0.4) 0%, transparent 50%),
        linear-gradient(160deg, #DCFCE7 0%, #BBF7D0 35%, #A7F3D0 70%, #DCFCE7 100%);
    border-color: rgba(34,197,94,0.4);
    box-shadow: 0 4px 14px rgba(34,197,94,0.10), inset 0 1px 0 rgba(255,255,255,0.6);
}
.plan-card.plan-monthly::before {
    content: '';
    position: absolute;
    top: -40px; right: -40px;
    width: 80px; height: 80px;
    border-radius: 50%;
    background: radial-gradient(circle, rgba(255,255,255,0.5) 0%, transparent 70%);
    pointer-events: none;
}

.plan-card:hover { transform: translateY(-1px); }
.plan-card.plan-yearly:hover { box-shadow: 0 6px 20px rgba(217,119,6,0.28); }
.plan-card.plan-monthly:hover { box-shadow: 0 6px 20px rgba(34,197,94,0.22); }

.plan-icon { font-size: 28px; margin-bottom: 4px; position: relative; z-index: 1; filter: drop-shadow(0 1px 2px rgba(0,0,0,0.08)); }
.plan-name { font-size: 14px; font-weight: 700; color: var(--text); margin-bottom: 4px; position: relative; z-index: 1; }
.plan-price { display: flex; align-items: baseline; justify-content: center; gap: 2px; margin-bottom: 2px; position: relative; z-index: 1; }
.plan-price-num { font-size: 26px; font-weight: 800; color: #B45309; line-height: 1; }
.plan-card.plan-monthly .plan-price-num { color: #16A34A; }
.plan-price-unit { font-size: 11px; color: var(--text-secondary); }
.plan-saving { font-size: 11px; color: #B45309; font-weight: 600; margin-bottom: 8px; min-height: 14px; position: relative; z-index: 1; }
.plan-card.plan-monthly .plan-saving { color: #16A34A; }
.plan-features { width: 100%; margin-bottom: 10px; flex: 1; position: relative; z-index: 1; text-align: left; }
.plan-feature { font-size: 12px; color: var(--text); line-height: 1.8; display: flex; align-items: center; gap: 5px; }
.plan-feat-icon { font-size: 12px; flex-shrink: 0; }

/* 按钮样式区分 */
.btn-yearly {
    font-size: 13px; padding: 8px 0; width: 100%;
    background: linear-gradient(135deg, #F59E0B, #D97706);
    color: #fff; border: none; border-radius: 10px;
    font-weight: 700; cursor: pointer;
    box-shadow: 0 3px 10px rgba(217,119,6,0.3);
    transition: all 0.2s ease;
    position: relative; z-index: 1;
}
.btn-yearly:hover { box-shadow: 0 5px 14px rgba(217,119,6,0.45); }
.btn-monthly {
    font-size: 13px; padding: 8px 0; width: 100%;
    background: linear-gradient(135deg, #22C55E, #16A34A);
    color: #fff; border: none; border-radius: 10px;
    font-weight: 700; cursor: pointer;
    box-shadow: 0 3px 10px rgba(34,197,94,0.3);
    transition: all 0.2s ease;
    position: relative; z-index: 1;
}
.btn-monthly:hover { box-shadow: 0 5px 14px rgba(34,197,94,0.45); }

.membership-tip { font-size: 10px; color: var(--text-muted); text-align: center; padding: 4px 20px 6px; line-height: 1.5; }
#membershipModal .v3-page-modal-body { padding: 10px 0 6px; }
#membershipModal .v3-page-modal-content {
    background: linear-gradient(180deg, var(--primary-bg) 0%, var(--card-bg) 120px);
    border: 1px solid rgba(74,111,98,0.15);
    box-shadow: 0 20px 60px rgba(74,111,98,0.18);
}
#membershipModal .v3-page-modal-header {
    background: transparent;
    border-bottom: 1px solid rgba(74,111,98,0.1);
}
[data-theme="dark"] #membershipModal .v3-page-modal-content {
    background: linear-gradient(180deg, var(--primary-bg) 0%, var(--card-bg) 120px);
    border: 1px solid rgba(126,184,160,0.15);
    box-shadow: 0 20px 60px rgba(0,0,0,0.35);
}

/* ===== V3.2.3: 会员中心三Tab ===== */
.membership-tabs {
    display: flex;
    gap: 4px;
    padding: 0 16px 6px;
    background: transparent;
}
.membership-tab {
    flex: 1;
    text-align: center;
    padding: 8px 0 10px;
    font-size: 14px;
    font-weight: 600;
    color: var(--text-muted);
    cursor: pointer;
    border-bottom: 2px solid transparent;
    transition: color .2s, border-color .2s;
    user-select: none;
}
.membership-tab:hover { color: var(--primary); }
.membership-tab.active {
    color: var(--primary);
    border-bottom-color: var(--primary);
}
[data-theme="dark"] .membership-tab { color: rgba(255,255,255,0.55); }
[data-theme="dark"] .membership-tab:hover { color: var(--primary); }

/* 已开通权益 */
.membership-card {
    background: var(--card-bg);
    border: 1px solid var(--border);
    border-radius: var(--radius-md, 12px);
    padding: 12px 14px;
    margin: 0 16px 10px;
}
.membership-card-head {
    display: flex;
    align-items: center;
    gap: 10px;
    padding-bottom: 8px;
    border-bottom: 1px dashed var(--border);
    margin-bottom: 8px;
}
.membership-card-head .sub-icon { font-size: 20px; }
.membership-card-head .sub-info { flex: 1; }
.membership-card-head .sub-info strong { font-size: 15px; color: var(--text); display: block; }
.membership-card-head .sub-info small { font-size: 11px; color: var(--text-muted); }
.membership-card-head .sub-status {
    margin-left: auto;
    padding: 2px 8px;
    border-radius: 20px;
    font-size: 11px;
    font-weight: 600;
}
.membership-card-head .sub-status.active { background: rgba(22,163,74,0.1); color: #16A34A; }
.membership-card-head .sub-status.expired { background: rgba(107,114,128,0.12); color: var(--text-muted); }
.benefit-item { margin-bottom: 4px; }
.benefit-item-row {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 3px 0;
    font-size: 12px;
}
.benefit-item-row span { color: var(--text-muted); }
.benefit-item-row b { font-weight: 600; color: var(--text); font-size: 12px; }
.benefit-item-row b.sub-status { padding: 2px 8px; border-radius: 20px; font-size: 11px; }
.benefit-item-row b.sub-status.active { background: rgba(22,163,74,0.1); color: #16A34A; }
.benefit-item-row b.sub-status.expired { background: rgba(107,114,128,0.12); color: var(--text-muted); }
.membership-benefit-block { margin-top: 6px; }
.bb-title { font-size: 12px; font-weight: 600; color: var(--text-secondary, var(--text)); margin-bottom: 4px; }
.bb-list { list-style: none; padding: 0; margin: 0; }
.bb-list li {
    font-size: 12px;
    color: var(--text-secondary, var(--text));
    padding: 3px 0;
    line-height: 1.5;
}

/* ===== V3.2.3: 保存桌面教程 ===== */
.save-desktop-tabs {
    display: flex;
    gap: 4px;
    padding: 0 16px 6px;
    background: transparent;
}
.save-desktop-tab {
    flex: 1;
    text-align: center;
    padding: 8px 0 10px;
    font-size: 14px;
    font-weight: 600;
    color: var(--text-muted);
    cursor: pointer;
    border-bottom: 2px solid transparent;
    transition: color .2s, border-color .2s;
    user-select: none;
}
.save-desktop-tab:hover { color: var(--primary); }
.save-desktop-tab.active {
    color: var(--primary);
    border-bottom-color: var(--primary);
}
[data-theme="dark"] .save-desktop-tab { color: rgba(255,255,255,0.55); }
[data-theme="dark"] .save-desktop-tab:hover { color: var(--primary); }
#saveDesktopModal .v3-page-modal-body {
    padding: 25px 16px 16px;
    overflow-y: auto;
    flex: 1 1 auto;
    min-height: 0;
}
.save-desktop-card {
    background: var(--card-bg);
    border: 1px solid var(--border);
    border-radius: var(--radius-md, 12px);
    padding: 12px 14px;
    margin-bottom: 10px;
}
.save-desktop-step-head { display: flex; align-items: flex-start; gap: 10px; }
.save-desktop-step-head .step-num {
    flex-shrink: 0;
    width: 22px; height: 22px;
    border-radius: 50%;
    background: var(--primary);
    color: #fff;
    font-size: 12px;
    font-weight: 700;
    display: flex; align-items: center; justify-content: center;
    margin-top: 1px;
}
.save-desktop-step-head b { font-size: 14px; color: var(--text); display: block; }
.save-desktop-step-head p { font-size: 12px; color: var(--text-muted); margin: 3px 0 0; line-height: 1.6; }
.save-desktop-step-head p b { display: inline; font-size: 12px; color: var(--primary); font-weight: 600; }
.save-desktop-illus { margin-top: 10px; }
#saveDesktopModal .save-desktop-card svg { display: block; margin: 10px auto 0; }
.save-desktop-tip {
    font-size: 12px;
    color: var(--text-muted);
    text-align: center;
    padding: 6px 12px 4px;
    line-height: 1.6;
    font-weight: 700;
}
.save-desktop-section { margin-bottom: 4px; }
.save-desktop-section-title {
    font-size: 14px;
    font-weight: 700;
    color: var(--primary);
    padding: 5px 0 6px;
    margin-top: -7px;
    display: flex;
    align-items: center;
    gap: 6px;
}
.save-desktop-section:first-child .save-desktop-section-title {
    margin-top: -12px;
}
.save-desktop-section-title .section-icon { font-size: 16px; }
.save-desktop-divider {
    height: 1px;
    background: var(--border);
    margin: 12px 0;
    position: relative;
}

/* 暗黑模式 */
[data-theme="dark"] .plan-card.plan-yearly {
    background:
        radial-gradient(circle at 80% 0%, rgba(255,255,255,0.10) 0%, transparent 50%),
        linear-gradient(160deg, rgba(217,119,6,0.22) 0%, rgba(217,119,6,0.10) 70%, rgba(217,119,6,0.18) 100%);
    border-color: rgba(217,119,6,0.42);
}
[data-theme="dark"] .plan-card.plan-monthly {
    background:
        radial-gradient(circle at 80% 0%, rgba(255,255,255,0.08) 0%, transparent 50%),
        linear-gradient(160deg, rgba(34,197,94,0.18) 0%, rgba(34,197,94,0.08) 70%, rgba(34,197,94,0.15) 100%);
    border-color: rgba(34,197,94,0.35);
}
[data-theme="dark"] .btn-yearly {
    background: linear-gradient(135deg, rgba(217,119,6,0.8), rgba(180,83,9,0.9));
}
[data-theme="dark"] .btn-monthly {
    background: linear-gradient(135deg, rgba(34,197,94,0.8), rgba(22,163,74,0.9));
}

/* ===== 通用模态/登录窗 ===== */
.login-modal, .profile-edit-modal, .feedback-modal {
    position: fixed;
    inset: 0;
    background: rgba(0,0,0,0.5);
    display: none;
    align-items: center;
    justify-content: center;
    z-index: 1000;
    padding: 20px;
}
.login-modal.active, .profile-edit-modal.active, .feedback-modal.active {
    display: flex;
}
.login-modal-content, .feedback-modal-content {
    background: var(--card-bg);
    border-radius: var(--radius);
    padding: 28px 24px;
    width: 100%;
    max-width: 360px;
    box-shadow: 0 20px 60px rgba(0,0,0,0.3);
    animation: floatUp 0.3s ease;
}
/* 创建身份窗口加宽(V3.0优化: 合盘调用需要更宽窗口展示完整表单) */
.profile-edit-modal-content {
    background: var(--card-bg);
    border-radius: var(--radius);
    padding: 32px 28px;
    width: 100%;
    max-width: 560px;
    box-shadow: 0 20px 60px rgba(0,0,0,0.3);
    animation: floatUp 0.3s ease;
    max-height: 90vh;
    overflow-y: auto;
    position: relative;
    /* V3.3.9: flex列布局,表单区独立滚动,保存按钮固定底部(首次登录完善信息时始终可见) */
    display: flex;
    flex-direction: column;
}
.profile-edit-modal-content .profile-edit-body {
    flex: 1 1 auto;
    min-height: 0;
    overflow-y: auto;
}
.profile-edit-modal-content .modal-btn-row {
    flex-shrink: 0;
    background: var(--card-bg);
    margin-top: 12px;
    padding: 12px 0 calc(12px + env(safe-area-inset-bottom, 0px));
    position: static;
    z-index: auto;
}
/* V3.3.10: 首次登录完善信息(force-mode)保存按钮 position:fixed 固定视口底部,
   不依赖任何布局/滚动容器,任何情况下都可见;键盘弹起时由JS按visualViewport差值上移 */
.profile-edit-modal.force-mode .modal-btn-row {
    position: fixed;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 100;
    background: var(--card-bg);
    padding: 12px 16px calc(12px + env(safe-area-inset-bottom, 0px));
    margin: 0;
    border-top: 1px solid var(--border);
    box-shadow: 0 -2px 10px rgba(0,0,0,0.06);
}
.profile-edit-modal.force-mode .profile-edit-body {
    padding-bottom: calc(76px + env(safe-area-inset-bottom, 0px));
}
/* V3.3.25: PC端完善弹窗保存条随弹窗内容显示(不fixed贴视口底), 移动端保持fixed */
@media (min-width: 769px) {
    .profile-edit-modal.force-mode .modal-btn-row {
        position: static;
        left: auto;
        right: auto;
        bottom: auto;
        box-shadow: none;
        border-radius: 0 0 var(--radius) var(--radius);
    }
    /* V3.3.25: PC端去掉为fixed底部条预留的下内边距, 消除保存/渠道码下方大量留白 */
    .profile-edit-modal.force-mode .profile-edit-body { padding-bottom: 0; flex: none; }
    .profile-edit-modal.force-mode .profile-edit-modal-content { padding-bottom: 14px; }
    .profile-edit-modal.force-mode .modal-btn-row { padding: 4px 0 10px; margin-top: 0; border-top: none; }
}


/* V3.0优化: 通用宽内容弹窗(通讯录/会员/报告等) */
.v3-page-modal {
    position: fixed;
    inset: 0;
    background: rgba(0,0,0,0.5);
    display: none;
    align-items: center;
    justify-content: center;
    z-index: 1000;
    padding: 20px;
}
.v3-page-modal.active { display: flex; }
.v3-page-modal-content {
    background: var(--card-bg);
    border-radius: var(--radius);
    width: 100%;
    max-width: 680px;
    box-shadow: 0 20px 60px rgba(0,0,0,0.3);
    animation: floatUp 0.3s ease;
    max-height: 90vh;
    display: flex;
    flex-direction: column;
    overflow: hidden;
}
.v3-page-modal-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 16px 24px;
    border-bottom: 1px solid var(--border);
    flex-shrink: 0;
}
.v3-page-modal-header h3 {
    font-size: 17px;
    font-weight: 600;
    color: var(--text);
    margin: 0;
}

/* V3.1.65: PC端合盘结果独立大窗口(移动端@media max-width:768px内已有全屏覆盖,不影响移动端) */
#compositeResultPage .composite-result-page-content {
    position: relative;
    width: 100%;
    max-width: 760px;
    max-height: 88vh;
    margin: auto;
    display: flex;
    flex-direction: column;
    background: var(--card-bg);
    border-radius: 16px;
    overflow: hidden;
    box-shadow: 0 20px 60px rgba(0, 0, 0, 0.35);
}
.composite-result-title-bar {
    position: sticky;
    top: 0;
    z-index: 5;
    display: flex;
    align-items: center;
    justify-content: center;
    height: 48px;
    box-sizing: border-box;
    flex-shrink: 0;
    background: color-mix(in srgb, var(--card-bg) 76%, var(--primary));
    border-bottom: 1px solid color-mix(in srgb, var(--primary) 16%, transparent);
}
.composite-result-back {
    position: absolute;
    left: 10px;
    top: 0;
    transform: none;
    height: 48px;
    padding: 0 7.5px 13px 12.5px;
    display: flex;
    align-items: flex-end;
    justify-content: center;
    border: none;
    background: transparent;
    color: var(--primary);
    line-height: 1;
    cursor: pointer;
    border-radius: 8px;
    z-index: 6;
}
.composite-result-back svg { width: 20px; height: 20px; }
.composite-result-back:active { opacity: 0.6; }
/* V3.1.66: PC端大窗口标题栏右侧叉号关闭按钮(移动端结果页用返回箭头,不渲染此按钮) */
.composite-result-close {
    position: absolute;
    right: 10px;
    top: 0;
    transform: none;
    height: 48px;
    width: 34px;
    display: flex;
    align-items: center;
    justify-content: center;
    border: none;
    background: transparent;
    color: var(--primary);
    font-size: 17px;
    line-height: 1;
    cursor: pointer;
    border-radius: 8px;
    z-index: 6;
}
.composite-result-close:active { opacity: 0.6; }
.composite-result-title-bar.theme-zodiac .composite-result-close { color: var(--zodiac-primary); }
.composite-result-title {
    font-size: 15px;
    font-weight: 700;
    letter-spacing: 2px;
    color: var(--primary);
    font-family: var(--font);
}
.composite-result-title-bar.theme-zodiac {
    background: color-mix(in srgb, var(--card-bg) 86.5%, var(--zodiac-primary));
    border-bottom-color: color-mix(in srgb, var(--zodiac-primary) 12%, transparent);
}
.composite-result-title-bar.theme-zodiac .composite-result-back { color: var(--zodiac-primary); }
.composite-result-title-bar.theme-zodiac .composite-result-title { color: var(--zodiac-primary); }
#compositeResultPage .composite-result-page-body {
    flex: 1;
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
    padding: 24px;
}
#compositeResultPage .composite-result-page-body .loading {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    min-height: 50vh;
}
/* PC端: 我的模块四个子页面(会员/通讯录/我的报告/问题反馈)标题居中 */
#membershipModal .v3-page-modal-header,
#contactsModal .v3-page-modal-header,
#reportsModal .v3-page-modal-header,
#feedbackModal .v3-page-modal-header,
#saveDesktopModal .v3-page-modal-header {
    justify-content: center !important;
}
#membershipModal .v3-page-modal-header h3,
#contactsModal .v3-page-modal-header h3,
#reportsModal .v3-page-modal-header h3,
#feedbackModal .v3-page-modal-header h3,
#saveDesktopModal .v3-page-modal-header h3 {
    flex: 1 !important;
    text-align: center !important;
}
.v3-page-modal-close {
    width: 32px;
    height: 32px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    background: var(--bg);
    color: var(--text-muted);
    font-size: 18px;
    cursor: pointer;
    border: none;
    transition: var(--transition);
}
.v3-page-modal-close:hover { background: var(--border); color: var(--text); }
.v3-page-modal-body {
    padding: 20px 24px;
    overflow-y: auto;
    flex: 1;
}
@media (max-width: 640px) {
    .v3-page-modal { padding: 0; }
    .v3-page-modal-content { max-width: 100%; max-height: 100vh; border-radius: 0; }
}

.login-modal-content h3, .profile-edit-modal-content h3, .feedback-modal-content h3 {
    text-align: center;
    margin-bottom: 16px;
    font-size: 16px;
    color: var(--text);
}
.login-modal-content .form-group,
.profile-edit-modal-content .form-group,
.feedback-modal-content .form-group {
    margin-bottom: 14px;
}
/* V3.0优化: 模态框内form-row与八字表单布局一致(两列网格) */
.profile-edit-modal-content .form-row {
    margin-bottom: 14px;
}
.profile-edit-modal-content .form-row .form-group {
    margin-bottom: 0;
}
.login-modal-content label,
.profile-edit-modal-content label,
.feedback-modal-content label {
    display: block;
    font-size: 13px;
    color: var(--text-secondary);
    margin-bottom: 6px;
    font-weight: 500;
}
.login-modal-content input,
.profile-edit-modal-content input,
.profile-edit-modal-content select,
.feedback-modal-content input,
.feedback-modal-content textarea {
    width: 100%;
    padding: 10px 14px;
    border: 1px solid var(--border);
    border-radius: var(--radius-sm);
    background: var(--bg);
    color: var(--text);
    font-size: 14px;
    font-family: var(--font);
    outline: none;
    box-sizing: border-box;
}
.login-modal-content input:focus,
.profile-edit-modal-content input:focus,
.profile-edit-modal-content select:focus,
.feedback-modal-content input:focus,
.feedback-modal-content textarea:focus {
    border-color: var(--primary);
}
/* V3.0优化: 身份字段置灰不可编辑样式 */
.profile-edit-modal-content select.select-locked,
.profile-edit-modal-content select:disabled {
    background: var(--border); color: var(--text-muted); cursor: not-allowed; opacity: 0.6;
}
/* V3.0优化: 模态框按钮横向排列,取消按钮在左主按钮在右,视觉协调不突兀 */
.modal-btn-row {
    display: flex;
    gap: 12px;
    margin-top: 12px;
}
.modal-btn-row .btn-text {
    flex: 0 0 auto;
    padding: 10px 20px;
    font-size: 14px;
}
.modal-btn-row .btn-primary {
    flex: 1;
    margin-top: 0;
}
.login-modal-content .btn-primary,
.profile-edit-modal-content .btn-primary,
.feedback-modal-content .btn-primary {
    margin-top: 0;
}
.sms-code-row {
    display: flex;
    gap: 8px;
}
.sms-code-row input { flex: 1; }
.sms-code-btn {
    padding: 10px 14px;
    background: var(--primary-bg);
    color: var(--primary);
    border: 1px solid var(--primary);
    border-radius: var(--radius-sm);
    font-size: 13px;
    cursor: pointer;
    white-space: nowrap;
    font-family: var(--font);
}
.sms-code-btn:disabled { opacity: 0.5; cursor: not-allowed; }

/* ===== 统一付费墙(与八字深度解读报告页风格一致) ===== */
.paywall-overlay {
    position: fixed; top: 0; left: 0; right: 0; bottom: 0;
    background: rgba(0,0,0,0.6); z-index: 2000;
    display: flex; align-items: center; justify-content: center;
    backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px);
    padding: 20px;
}
.paywall-card {
    background: linear-gradient(145deg, rgba(255,255,255,0.96) 0%, rgba(250,247,240,0.97) 50%, rgba(245,238,225,0.96) 100%);
    border: 1px solid rgba(180,170,150,0.35);
    border-radius: var(--radius);
    padding: 18px 22px 14px; max-width: 380px; width: 100%;
    position: relative; text-align: center;
    box-shadow: 0 20px 60px rgba(0,0,0,0.2), 0 4px 16px rgba(0,0,0,0.08), inset 0 1px 0 rgba(255,255,255,0.6);
    animation: floatUp 0.4s cubic-bezier(0.16, 1, 0.3, 1);
    max-height: 100dvh; overflow: hidden;
    /* V3.3.18: 无滚动条,内容超屏时由JS整体缩放适配一屏 */
    display: flex;
    flex-direction: column;
}
[data-theme="dark"] .paywall-card {
    background: linear-gradient(145deg, rgba(30,42,38,0.96) 0%, rgba(26,35,32,0.97) 50%, rgba(34,46,41,0.96) 100%);
    border-color: rgba(74,111,98,0.25);
    box-shadow: 0 20px 60px rgba(0,0,0,0.4), 0 4px 16px rgba(0,0,0,0.2), inset 0 1px 0 rgba(255,255,255,0.05);
}
.paywall-icon { font-size: 30px; margin-bottom: 6px; }
.paywall-card h2 { font-size: 18px; color: var(--primary); margin-bottom: 4px; letter-spacing: 1px; }
.paywall-close {
    position: absolute; top: 12px; right: 14px;
    width: 28px; height: 28px; line-height: 28px;
    text-align: center; font-size: 16px; cursor: pointer;
    border-radius: 50%; color: var(--text-secondary);
    transition: all 0.2s; background: rgba(0,0,0,0.05);
}
.paywall-close:hover { background: var(--border); }
.paywall-price { font-size: 30px; font-weight: 800; color: var(--warning, #F5A623); margin: 8px 0 4px; }
.paywall-price small { font-size: 14px; font-weight: 400; }
.paywall-gift { font-size: 13px; color: var(--text-muted); margin: 4px 0 12px; }
.paywall-benefits {
    text-align: left; padding: 9px 12px; margin: 10px 0;
    background: rgba(245,238,225,0.5); border-radius: 10px;
    font-size: 13px; color: var(--text-secondary); line-height: 1.6;
}
[data-theme="dark"] .paywall-benefits {
    background: rgba(26,26,26,0.5);
}
.paywall-benefits li { list-style: none; padding-left: 20px; position: relative; }
.paywall-benefits li::before { content: '✓'; position: absolute; left: 0; color: var(--success, #3E7C67); font-weight: 700; }
.paywall-methods { display: flex; gap: 12px; justify-content: center; margin: 16px 0; }
.pay-method {
    flex: 1; max-width: 140px; padding: 10px 14px;
    border: 2px solid var(--border); border-radius: 10px;
    cursor: pointer; text-align: center;
    transition: all 0.25s ease; background: var(--card-bg);
    display: inline-flex; align-items: center; justify-content: center; gap: 6px;
}
.pay-method:hover { border-color: var(--primary); }
.pay-method.selected { border-color: var(--primary); background: var(--primary-bg, rgba(74,111,98,0.1)); }
.pay-method-icon { font-size: 22px; }
.pay-method-name { font-size: 13px; color: var(--text-secondary); white-space: nowrap; }
.paywall-btn {
    width: 100%; padding: 10px; border: none; border-radius: 10px;
    font-size: 15px; font-family: var(--font); cursor: pointer;
    letter-spacing: 2px; transition: all 0.25s ease; font-weight: 600;
}
.paywall-btn.primary { background: var(--warning, #F5A623); color: #fff; margin-top: 2px; }
.paywall-btn.primary:hover { opacity: 0.9; transform: translateY(-1px); box-shadow: 0 4px 16px rgba(245,166,35,0.3); }
.paywall-btn.primary:disabled { opacity: 0.5; cursor: not-allowed; transform: none; }
/* V3.x: 次级按钮行(位于我已支付之上)+ 次级按钮(保存二维码/切换为支付宝)；
   与我已支付同色系(警告橙),用"描边+透明底"明显弱化主次层级 */
.paywall-secondary-row { display: flex; gap: 10px; margin-top: 2px; margin-bottom: 4px; }
.paywall-secondary-btn {
    flex: 1; min-width: 0; padding: 9px 12px; border-radius: 10px;
    font-size: 13px; font-family: var(--font); font-weight: 700;
    color: var(--warning, #F5A623);
    background: rgba(245,166,35,0.05);
    border: 1.5px solid rgba(245,166,35,0.55); cursor: pointer;
    letter-spacing: 1px; transition: all 0.2s ease;
    white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
    display: inline-flex; align-items: center; justify-content: center; gap: 6px;
    box-shadow: inset 0 0 0 1px rgba(255,255,255,0.05);
}
.paywall-secondary-btn:hover {
    background: rgba(245,166,35,0.12);
    border-color: var(--warning, #F5A623);
    box-shadow: 0 3px 12px rgba(245,166,35,0.22);
    transform: translateY(-1px);
}
.paywall-secondary-btn:disabled {
    opacity: 0.5; cursor: not-allowed; transform: none; box-shadow: none;
}
.paywall-secondary-btn:active {
    background: rgba(245,166,35,0.18);
    transform: translateY(0);
    box-shadow: inset 0 2px 6px rgba(245,166,35,0.20);
}
.paywall-secondary-btn .sec-btn-icon { width: 16px; height: 16px; object-fit: contain; display: inline-block; }
.paywall-secondary-btn #v3QrSaveIcon { transform: translate(3px, 2.5px); mix-blend-mode: multiply; }
.paywall-hint { font-size: 11px; color: var(--text-muted); margin-top: 12px; }
.paywall-qr-area { display: none; margin: 8px 0 4px; text-align: center; }
.paywall-qr-area.show { display: block; }
.paywall-btn {
    width: 100%; padding: 10px; border: none; border-radius: 10px;
    font-size: 15px; font-family: var(--font); cursor: pointer;
    letter-spacing: 2px; transition: all 0.25s ease; font-weight: 600;
    flex-shrink: 0;
}
/* V3.3.22: 卡片内容均匀分布(space-between),按钮自然在底部附近,间距协调无突兀 */
.paywall-card > .paywall-btn {
    margin-top: 8px;
}
.paywall-qr-area img { width: 200px; height: 200px; border-radius: 6px; box-shadow: 0 2px 12px rgba(0,0,0,0.1); }

/* V3.3.15: 移动端付费墙动态适配一屏展示完整(不锁定比例,二维码/卡片随屏幕自适应,无内部滚动) */
@media (max-width: 600px) {
    .paywall-card { padding: 10px 14px 8px; max-height: 96dvh; }
    .paywall-icon { font-size: 20px; margin-bottom: 2px; }
    .paywall-card h2 { font-size: 14px; margin-bottom: 2px; }
    .paywall-price { font-size: 22px; margin: 3px 0 2px; }
    .paywall-price small { font-size: 12px; }
    .paywall-gift { margin: 2px 0 5px; font-size: 11px; }
    .paywall-benefits { padding: 5px 9px; margin: 5px 0; font-size: 11px; line-height: 1.5; }
    .paywall-benefits li { margin: 1px 0; }
    .paywall-qr-area { margin: 3px 0 2px; }
    /* 二维码不锁定固定比例,随屏幕宽度自适应(小屏自动缩小) */
    .paywall-qr-area img { width: min(120px, 34vw); height: auto; aspect-ratio: 1; }
    .paywall-qr-area .qr-loading { width: min(120px, 34vw); height: min(120px, 34vw); }
    .paywall-secondary-row { margin-bottom: 5px; gap: 8px; }
    .paywall-btn { padding: 9px 12px; font-size: 13px; }
    .pay-method-title { font-size: 12px; margin-bottom: 5px; }
    .pay-method-btn { padding: 7px 10px; font-size: 12px; }
    .paywall-qr-area .qr-label, .paywall-qr-area .qr-single-label { font-size: 10px; }
    .paywall-hint { font-size: 10px; margin-top: 5px; }
    .paywall-secondary-btn { font-size: 12px; padding: 7px 10px; }
}
.paywall-qr-area .qr-label { font-size: 12px; color: var(--text-muted); margin-top: 4px; }
.paywall-qr-area .qr-loading { width: 200px; height: 200px; margin: 0 auto; display: flex; align-items: center; justify-content: center; }
.paywall-qr-area .qr-loading::after { content: ''; display: block; width: 32px; height: 32px; border: 3px solid var(--border, #E8E4DC); border-top-color: var(--text-muted, #999); border-radius: 50%; animation: qrSpin 0.8s linear infinite; }
.paywall-qr-area .qr-loading.hidden { display: none; }
@keyframes qrSpin { to { transform: rotate(360deg); } }

.pay-method-select {
    display: flex; flex-direction: column; align-items: center; gap: 10px; padding: 12px 0;
}
.pay-method-title {
    font-size: 15px; font-weight: 600; color: var(--text-primary); margin-bottom: 4px;
}
.pay-method-btn {
    display: flex; align-items: center; justify-content: center; gap: 12px; width: 100%; max-width: 280px;
    padding: 10px 18px; border-radius: 12px; border: 1.5px solid var(--border);
    background: var(--bg-secondary); cursor: pointer; transition: all 0.2s;
}
.pay-method-btn:hover {
    border-color: var(--primary); background: var(--bg-primary);
    box-shadow: 0 2px 12px rgba(0,0,0,0.06);
}
.pay-method-btn img {
    width: 32px; height: 32px; border-radius: 0; transform: translateY(2px) !important;
}
.pay-method-btn span {
    font-size: 15px; font-weight: 500; color: var(--text-primary);
}

.qr-single {
    display: flex; flex-direction: column; align-items: center; gap: 6px; padding: 6px 0;
}
.qr-single img {
    width: 170px; height: 170px; border-radius: 8px;
    box-shadow: 0 4px 16px rgba(0,0,0,0.1);
}
.qr-single-label {
    font-size: 13px; color: var(--text-muted); font-weight: 500;
}
.qr-switch-btn {
    font-size: 13px; color: var(--primary, #4A6F62); cursor: pointer;
    text-decoration: underline; margin-top: 4px;
}
.qr-switch-btn:hover { opacity: 0.7; }
.paywall-qr-area .qr-save-btn {
    display: inline-block; margin-top: 8px; padding: 6px 16px;
    font-size: 12px; color: var(--primary, #4A6F62); background: var(--bg, #FDFBF7);
    border: 1px solid var(--border, #E8E4DC); border-radius: 20px; cursor: pointer;
    transition: all 0.2s ease;
}
.paywall-qr-area .qr-save-btn:hover { background: var(--primary, #4A6F62); color: #fff; border-color: var(--primary, #4A6F62); }

/* ===== 内联解锁卡片(V3.0优化: 完全复制八字/星盘模块paywall-card样式,仅更新文案) ===== */
@keyframes modalSlideUp {
    from { opacity: 0; transform: translateY(30px) scale(0.96); }
    to { opacity: 1; transform: translateY(0) scale(1); }
}
.unlock-card.unlock-card-v2 {
    display: flex; flex-direction: column; align-items: center; text-align: center;
    gap: 0; padding: 28px 24px 20px;
    background: linear-gradient(145deg, rgba(255,255,255,0.96) 0%, rgba(250,247,240,0.97) 50%, rgba(245,238,225,0.96) 100%);
    backdrop-filter: blur(24px) saturate(1.2);
    -webkit-backdrop-filter: blur(24px) saturate(1.2);
    border: 1px solid rgba(180,170,150,0.35);
    border-radius: var(--radius, 12px);
    margin: 16px 0; position: relative;
    box-shadow: 0 8px 40px rgba(0,0,0,0.08), 0 2px 12px rgba(0,0,0,0.05), inset 0 1px 0 rgba(255,255,255,0.6);
    animation: modalSlideUp 0.4s cubic-bezier(0.16, 1, 0.3, 1);
}
[data-theme="dark"] .unlock-card.unlock-card-v2 {
    background: linear-gradient(145deg, rgba(30,28,24,0.97) 0%, rgba(22,20,17,0.98) 50%, rgba(18,16,14,0.97) 100%);
    border: 1px solid rgba(255,255,255,0.06);
    box-shadow: 0 8px 40px rgba(0,0,0,0.3), 0 2px 12px rgba(0,0,0,0.15), inset 0 1px 0 rgba(255,255,255,0.03);
}
.unlock-card-v2 .unlock-card-icon {
    font-size: 36px; margin-bottom: 10px;
    width: auto; height: auto; border-radius: 0;
    display: block; background: none; border: none; box-shadow: none;
}
.unlock-card-v2 .unlock-card-title {
    font-size: 18px; color: var(--primary);
    margin-bottom: 6px; letter-spacing: 1px;
}
.unlock-card-v2 .unlock-card-price {
    font-size: 30px; font-weight: 800; color: var(--warning, #F5A623);
    margin: 12px 0 6px;
}
.unlock-card-v2 .unlock-card-price small {
    font-size: 14px; font-weight: 400;
}
.unlock-card-v2 .unlock-card-desc {
    font-size: 13px; color: var(--text-muted); line-height: 1.6;
    margin: 4px 0 12px; max-width: 100%;
}
.unlock-card-v2 .unlock-card-features {
    text-align: left; padding: 12px 14px; margin: 12px 0;
    background: rgba(245,238,225,0.5); border-radius: 10px;
    font-size: 13px; color: var(--text-secondary); line-height: 1.8;
    width: 100%; max-width: 100%; border: none;
}
[data-theme="dark"] .unlock-card-v2 .unlock-card-features { background: rgba(26,26,26,0.5); }
.unlock-card-v2 .unlock-card-features li { list-style: none; padding-left: 20px; position: relative; }
.unlock-card-v2 .unlock-card-features li::before {
    content: '✓'; position: absolute; left: 0;
    color: var(--success, #4CAF50); font-weight: 700;
}
.unlock-card-v2 .unlock-card-btn {
    width: 100%; padding: 12px; border: none; border-radius: 10px;
    font-size: 15px; font-family: var(--font); cursor: pointer;
    letter-spacing: 2px; transition: all 0.25s ease;
    font-weight: 600;
    background: var(--warning, #F5A623); color: #fff;
    margin-top: 2px;
}
.unlock-card-v2 .unlock-card-btn:hover {
    opacity: 0.9; transform: translateY(-1px);
    box-shadow: 0 4px 16px rgba(245,166,35,0.3);
}
.unlock-card-v2 .unlock-card-btn:active { transform: translateY(0); }
/* V3.0优化: 移除主题色变体,统一使用八字/星盘模块一致样式 */
/* 对话页运势推送: 移除月卡卡片四角阴影(保留卡片背景/边框/边距) */
.chat-modal-messages .fortune-sub-cards .unlock-card-v2 { box-shadow: none; }

/* ===== 运势双卡并排布局(V3.1.3: 月卡+年卡) ===== */
.fortune-sub-cards {
    display: flex; gap: 16px; flex-wrap: wrap;
}
.fortune-sub-cards .unlock-card-v2 {
    flex: 1; min-width: 240px; margin: 0;
}
/* 运势模块单卡自适应宽度(无外层card包裹时) */
#fortuneResult .fortune-sub-cards .unlock-card-v2 { width: 100%; min-width: 0; }
#baziFortuneResult .fortune-sub-cards .unlock-card-v2 { width: 100%; min-width: 0; }
#zodiacFortuneResult .fortune-sub-cards .unlock-card-v2 { width: 100%; min-width: 0; }
@media (max-width: 520px) {
    .fortune-sub-cards { flex-direction: column; }
    .fortune-sub-cards .unlock-card-v2 { min-width: 0; }
}

/* ============================================================
   V3.0 四模块增强样式(合盘/对话/我的)
   ============================================================ */

/* ===== 通用 ===== */
.required { color: #DC2626; margin-left: 2px; }
.empty-mini { text-align: center; color: var(--text-muted); font-size: 13px; padding: 16px; }
.char-count { text-align: right; font-size: 12px; color: var(--text-muted); margin-top: 4px; }
.chat-loading { text-align: center; color: var(--text-muted); padding: 24px; font-size: 14px; }
.chat-empty { text-align: center; color: var(--text-muted); padding: 40px 0; font-size: 13px; line-height: 1.8; }
.chat-empty .chat-empty-icon { font-size: 40px; margin-bottom: 8px; }
.chat-empty p { font-size: 14px; margin-bottom: 4px; }
.chat-empty small { font-size: 12px; color: var(--text-muted); }
.chat-empty .btn-primary { margin-top: 12px; padding: 8px 20px; font-size: 13px; }
.chat-limit-tip { background: rgba(217, 119, 6, 0.1); color: #D97706; font-size: 12px; padding: 8px 12px; border-radius: var(--radius-sm); margin-top: 8px; text-align: center; }

/* ===== 合盘表单 ===== */
/* V3.1.6: PC端缩短合盘卡片高度,减少内部空白 */
/* V3.1.8: PC端卡片进一步缩短,按钮在卡片内重新上下居中(上20=下20) */
/* V3.1.58: PC端卡片顶部增加呼吸感(我的信息标题头部间距),整体高度略增 */
.comp-form-card { padding: 28px 20px 12px; }
/* V3.1.6: PC端收紧section间距,缩短卡片 */
/* V3.1.8: PC端section间距进一步收紧 */
/* V3.1.42: 删除"我的信息"↔"对方信息"中间的横线(虚线border-bottom) */
.comp-form-section { margin-bottom: 6px; padding-bottom: 6px; }
.comp-form-section:last-of-type { border-bottom: none; padding-bottom: 0; }
/* V3.1.2: t8 增加标题与选择控件的间距 */
/* V3.1.8: PC端标题与内容间距缩短 */
/* V3.1.58: PC端两标题居中(移除translateX(6px),改justify-content:center) */
/* V3.1.59: PC端两标题上移6px(transform被移动端!important覆盖,不影响移动端) */
.comp-form-section-title { font-size: 13px; font-weight: 600; color: var(--primary); margin-bottom: 10px; display: flex; align-items: center; gap: 6px; letter-spacing: 1px; line-height: 1; justify-content: center; transform: translateY(-6px); }
/* V3.1.60: PC端仅"选择对方信息"标题在-6px基础上下移2px(→-4px);更高优先级仅作用于PC,移动端!important仍覆盖 */
.comp-form-section:nth-of-type(2) .comp-form-section-title { transform: translateY(-4px); }
.comp-form-icon { font-size: 15px; line-height: 1; display: inline-flex; align-items: center; justify-content: center; width: 18px; height: 18px; }
/* V3.1.8: PC端己方信息最小高度微调 */
.comp-self-info { min-height: 30px; }
.comp-self-empty { font-size: 13px; color: var(--text-muted); padding: 8px 12px; background: var(--bg); border-radius: var(--radius-sm); border: 1px dashed var(--border); }
.comp-form-row { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
/* V3.1.6: PC端按钮上下间距相等(各14px),卡片缩短后居中 */
/* V3.1.8: PC端按钮上下间距再收紧(各8px),卡片缩短后真正居中 */
/* V3.1.59: PC端开始合盘按钮上移6px(transform被移动端!important覆盖,不影响移动端) */
/* V3.1.60: PC端开始合盘按钮在-6px基础上再下移7px(→1px) */
/* V3.1.61: PC端开始合盘按钮再下移3px(→4px) */
/* V3.1.62: PC端开始合盘按钮上移1.5px(→2.5px) */
.comp-submit-btn { margin-top: 8px; margin-bottom: 8px; font-size: 15px; padding: 14px; transform: translateY(2.5px); }

/* V3.0 合盘身份选择器 */
.comp-profile-picker { display: flex; gap: 8px; align-items: stretch; }
.comp-profile-select {
    flex: 1; padding: 10px 12px; border: 1px solid var(--border);
    border-radius: var(--radius-sm); background: var(--bg); color: var(--text);
    font-size: 14px; font-family: var(--font); outline: none; cursor: pointer;
    min-width: 0;
}
.comp-profile-select:focus { border-color: var(--primary); }
/* V3.1.86: 占位项"请选择对方身份"(value="")置灰显示;选中真实身份后恢复正常色 */
.comp-profile-select:invalid { color: var(--text-muted); }
.comp-profile-select option { color: var(--text); }
.comp-profile-select option[value=""] { color: var(--text-muted); }
.comp-add-profile-btn {
    flex-shrink: 0; padding: 0 14px; font-size: 13px; white-space: nowrap;
    background: var(--bg); color: var(--text-muted);
    border: 1px solid var(--border); border-radius: var(--radius-sm);
    cursor: pointer; font-family: var(--font); transition: all 0.2s;
}
.comp-add-profile-btn:hover { background: var(--card-bg); color: var(--text); border-color: var(--text-muted); }
/* V3.1.8: PC端对方信息详情上间距微调 */
/* V3.1.64: PC端"选择对方信息"小卡片下移5px(6→11);移动端13px!important覆盖不受影响 */
.comp-profile-detail { margin-top: 11px; min-height: 0; }

/* V3.0重构: 信息展示区高端磨砂玻璃风格,三行两列布局 */
.comp-profile-summary {
    display: flex; flex-direction: column; align-items: stretch;
    /* V3.1.8: PC端概要信息内/外边距收紧,缩短卡片 */
    gap: 4px; padding: 10px 16px; margin-bottom: 6px;
    background: linear-gradient(145deg, rgba(255,255,255,0.55), rgba(244,250,247,0.4));
    backdrop-filter: blur(12px) saturate(1.2); -webkit-backdrop-filter: blur(12px) saturate(1.2);
    border: 1px solid rgba(74,111,98,0.12);
    border-radius: 16px;
    box-shadow: inset 0 1px 0 rgba(255,255,255,0.6), 0 2px 8px rgba(74,111,98,0.05), 0 8px 24px rgba(74,111,98,0.04);
    position: relative; overflow: hidden;
    transition: transform 0.25s ease, box-shadow 0.25s ease, border-color 0.25s ease;
}
.cps-row {
    display: flex; align-items: stretch; gap: 0;
}
.comp-profile-summary::before {
    content: ''; position: absolute; top: 0; left: 0; right: 0; height: 3px;
    border-radius: 16px 16px 0 0;
}
.comp-summary-me::before { background: linear-gradient(90deg, var(--primary), rgba(74,111,98,0.3)); }
/* V3.0优化: 对方信息色改为深松青(与八字竹青同系,命理青色系,层次区分) */
.comp-summary-other::before { background: linear-gradient(90deg, #2D5A3D, rgba(45,90,61,0.3)); }
/* 星盘合盘对方信息色: 雅致蓝(与己方深蓝协调) */
.comp-result-zodiac .comp-summary-other::before { background: linear-gradient(90deg, #5A7AAC, rgba(91,122,172,0.3)); }
.comp-profile-summary:hover {
    transform: translateY(-2px);
    box-shadow: inset 0 1px 0 rgba(255,255,255,0.6), 0 4px 12px rgba(74,111,98,0.08), 0 12px 32px rgba(74,111,98,0.08);
    border-color: rgba(74,111,98,0.25);
}
.cps-item {
    flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 3px;
    padding: 2px 12px; position: relative;
    transition: background 0.2s ease;
}
.cps-item:not(:last-child)::after {
    content: ''; position: absolute; right: 0; top: 15%; bottom: 15%; width: 1px;
    background: rgba(74,111,98,0.1);
}
.cps-item:hover { background: rgba(74,111,98,0.04); border-radius: 6px; }
.cps-label { font-size: 10px; color: var(--text-muted); letter-spacing: 1.5px; text-transform: uppercase; font-weight: 500; }
.cps-value {
    font-size: 14px; color: var(--text); font-weight: 600;
    white-space: nowrap; overflow: hidden; text-overflow: ellipsis; letter-spacing: 0.3px;
}
.cps-item.cps-warn .cps-value { color: var(--warning); }
[data-theme="dark"] .comp-profile-summary {
    background: linear-gradient(145deg, rgba(30,42,38,0.6), rgba(26,35,32,0.5));
    border-color: rgba(74,111,98,0.2);
    box-shadow: inset 0 1px 0 rgba(255,255,255,0.08), 0 2px 8px rgba(0,0,0,0.2), 0 8px 24px rgba(0,0,0,0.15);
}
[data-theme="dark"] .cps-item:not(:last-child)::after { background: rgba(255,255,255,0.08); }
[data-theme="dark"] .cps-item:hover { background: rgba(255,255,255,0.04); }

/* ===== 合盘结果(V3.0精细化UI) ===== */
/* V3.0优化: 移除水平padding,使结果卡片与表单卡片左右对齐 */
.comp-result { padding: 0 0 32px; }
.comp-result .card { background: var(--card-bg); border-radius: var(--radius); border: 1px solid var(--border); box-shadow: 0 2px 12px rgba(0,0,0,0.04); overflow: hidden; }
/* V3.0修复: 深度解读卡片样式不被.comp-result .card覆盖,恢复八字/星盘模块原始玻璃态样式 */
.comp-result .deep-interp-preview {
    background: linear-gradient(160deg, rgba(55,95,80,0.44) 0%, rgba(65,115,95,0.34) 25%, rgba(90,145,120,0.22) 50%, rgba(130,180,155,0.14) 75%, rgba(180,210,195,0.06) 100%);
    border: 1px solid rgba(255, 255, 255, 0.35);
    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.10), 0 2px 8px rgba(0, 0, 0, 0.05), inset 0 1px 0 rgba(255, 255, 255, 0.25);
}
.comp-result .zodiac-deep-interp-preview {
    background: linear-gradient(160deg, rgba(40,70,120,0.44) 0%, rgba(55,85,135,0.34) 25%, rgba(80,110,160,0.22) 50%, rgba(120,150,190,0.14) 75%, rgba(160,185,215,0.06) 100%);
    border: 1px solid rgba(255, 255, 255, 0.35);
    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.10), 0 2px 8px rgba(0, 0, 0, 0.05), inset 0 1px 0 rgba(255, 255, 255, 0.25);
}

/* 标签(合并到分数卡片顶部) - V3.0优化: 左对齐评语 */
.comp-score-tags { display: flex; gap: 8px; justify-content: flex-start; margin-bottom: 14px; flex-wrap: wrap; }
.comp-role-tag, .comp-type-tag { font-size: 12px; padding: 4px 14px; border-radius: 14px; font-weight: 600; letter-spacing: 0.5px; white-space: nowrap; flex-shrink: 0; }
.comp-role-tag { background: linear-gradient(135deg, #FEF3C7, #FDE68A); color: #92400E; border: 1px solid rgba(146,64,14,0.15); }
.comp-type-tag { background: var(--primary-bg); color: var(--primary); border: 1px solid rgba(74,111,98,0.15); }

/* 综合评分卡片基础样式(V3.0优化: 通用布局,八字/星盘各自覆盖颜色) */
.comp-score-card {
    padding: 24px 28px; margin-bottom: 12px;
    border-radius: 16px;
    position: relative; overflow: hidden;
}
.comp-score-card::before {
    content: none;
}
.comp-score-card::after {
    content: ''; display: none;
}
/* V3.0优化: 八字合盘背景渐变(竹青主题色) */
.comp-result-bazi .comp-score-card {
    background:
        radial-gradient(circle at 20% 50%, rgba(255,255,255,0.08) 0%, transparent 50%),
        linear-gradient(135deg, rgba(74,111,98,0.12) 0%, rgba(106,140,121,0.08) 50%, var(--card-bg) 100%);
    border: 1px solid rgba(74,111,98,0.22);
    box-shadow: 0 10px 36px rgba(74,111,98,0.14), 0 2px 8px rgba(212,160,23,0.08), inset 0 1px 0 rgba(255,255,255,0.6);
}
[data-theme="dark"] .comp-result-bazi .comp-score-card {
    background:
        radial-gradient(circle at 20% 50%, rgba(255,255,255,0.03) 0%, transparent 50%),
        linear-gradient(135deg, rgba(74,111,98,0.18) 0%, rgba(106,140,121,0.12) 50%, var(--card-bg) 100%);
}
.comp-result-bazi .comp-type-tag {
    background: rgba(74,111,98,0.12);
    color: #4A6F62;
    border: 1px solid rgba(74,111,98,0.18);
}
[data-theme="dark"] .comp-result-bazi .comp-type-tag {
    background: rgba(106,140,121,0.15);
    color: #7EB8A0;
}
.comp-result-bazi .comp-section-title {
    color: #4A6F62;
}
.comp-result-bazi .comp-chapter-num {
    background: linear-gradient(135deg, #4A6F62, #6A8C79);
    box-shadow: 0 4px 12px rgba(74,111,98,0.3), 0 2px 4px rgba(74,111,98,0.2);
}
.comp-result-bazi .comp-vs {
    background: transparent;
    color: #4A6F62;
}
[data-theme="dark"] .comp-result-bazi .comp-vs {
    background: transparent;
    color: #7EB8A0;
}
/* V3.0优化: 星盘合盘主题色(蓝色系,与星盘模块一致) */
/* V3.0修复: 星盘合盘背景始终用蓝色,不被评级红色覆盖 */
.comp-result-zodiac .comp-score-card {
    background:
        radial-gradient(circle at 20% 50%, rgba(255,255,255,0.08) 0%, transparent 50%),
        linear-gradient(135deg, rgba(58,90,140,0.12) 0%, rgba(91,122,172,0.08) 50%, var(--card-bg) 100%);
    border: 1px solid rgba(58,90,140,0.22);
    box-shadow: 0 10px 36px rgba(58,90,140,0.14), 0 2px 8px rgba(91,122,172,0.08), inset 0 1px 0 rgba(255,255,255,0.6);
}
[data-theme="dark"] .comp-result-zodiac .comp-score-card {
    background:
        radial-gradient(circle at 20% 50%, rgba(255,255,255,0.03) 0%, transparent 50%),
        linear-gradient(135deg, rgba(58,90,140,0.18) 0%, rgba(91,122,172,0.12) 50%, var(--card-bg) 100%);
}
.comp-result-zodiac .comp-type-tag {
    background: rgba(58,90,140,0.12);
    color: #3A5A8C;
    border: 1px solid rgba(58,90,140,0.18);
}
[data-theme="dark"] .comp-result-zodiac .comp-type-tag {
    background: rgba(91,122,172,0.15);
    color: #8BAACF;
}
.comp-result-zodiac .comp-section-title {
    color: #3A5A8C;
}
.comp-result-zodiac .comp-chapter-num {
    background: linear-gradient(135deg, #3A5A8C, #5A7AAC);
    box-shadow: 0 4px 12px rgba(58,90,140,0.3), 0 2px 4px rgba(58,90,140,0.2);
}
/* V3.0优化: 星盘合盘全卡片蓝色主题适配 */
.comp-result-zodiac .comp-party {
    background: linear-gradient(160deg, var(--card-bg) 0%, rgba(243,247,252,0.6) 100%);
}
.comp-result-zodiac .comp-party.me::before {
    background: linear-gradient(90deg, #3A5A8C, rgba(58,90,140,0.3));
}
.comp-result-zodiac .comp-party.me .comp-party-avatar {
    background: linear-gradient(135deg, #3A5A8C, rgba(58,90,140,0.7));
}
/* V3.0优化: 星盘合盘对方命盘卡片色(雅致蓝,与己方协调) */
.comp-result-zodiac .comp-party.other::before {
    background: linear-gradient(90deg, #5A7AAC, rgba(91,122,172,0.3));
}
.comp-result-zodiac .comp-party.other .comp-party-avatar {
    background: linear-gradient(135deg, #5A7AAC, rgba(91,122,172,0.7));
}
/* V3.1新增: 星盘合盘星座头像样式(显示太阳星座emoji,替代"我/TA"占位字) */
.comp-party-avatar-zodiac {
    font-size: 28px !important;
    line-height: 1;
    background: linear-gradient(135deg, rgba(232,201,122,0.18), rgba(58,90,140,0.12)) !important;
    border: 1px solid rgba(232,201,122,0.35);
}
.comp-result-zodiac .comp-party.me .comp-party-avatar-zodiac,
.comp-result-zodiac .comp-party.other .comp-party-avatar-zodiac {
    background: linear-gradient(135deg, rgba(232,201,122,0.18), rgba(58,90,140,0.12)) !important;
}
.comp-result-zodiac .comp-section-title::before {
    background: #3A5A8C;
}
.comp-result-zodiac .comp-section-title {
    border-bottom-color: rgba(58,90,140,0.15);
}
.comp-result-zodiac .comp-dim-fill {
    background: linear-gradient(90deg, #3A5A8C, rgba(91,122,172,0.6));
}
.comp-result-zodiac .comp-dim-summary::before {
    color: #3A5A8C;
}
.comp-result-zodiac .comp-factor-item:hover {
    background: rgba(58,90,140,0.06);
}
.comp-result-zodiac .comp-chapter-preview:hover {
    background: rgba(58,90,140,0.06);
}
.comp-result-zodiac .comp-chapter-preview:hover .comp-chapter-num {
    box-shadow: 0 4px 12px rgba(58,90,140,0.4), 0 0 0 6px rgba(58,90,140,0.1);
}
.comp-result-zodiac .comp-score-bg {
    background-image:
        repeating-linear-gradient(45deg, transparent, transparent 20px, rgba(212,160,23,0.03) 20px, rgba(212,160,23,0.03) 21px),
        repeating-linear-gradient(-45deg, transparent, transparent 20px, rgba(58,90,140,0.04) 20px, rgba(58,90,140,0.04) 21px);
}
[data-theme="dark"] .comp-result-zodiac .comp-party {
    background: linear-gradient(160deg, var(--card-bg) 0%, rgba(26,32,42,0.6) 100%);
}
/* V3.0优化: 精致纹理背景层 */
.comp-score-bg {
    position: absolute; inset: 0; pointer-events: none; opacity: 0.4;
    background-image:
        repeating-linear-gradient(45deg, transparent, transparent 20px, rgba(212,160,23,0.03) 20px, rgba(212,160,23,0.03) 21px),
        repeating-linear-gradient(-45deg, transparent, transparent 20px, rgba(74,111,98,0.03) 20px, rgba(74,111,98,0.03) 21px);
}
/* V3.0优化: 命理主题精致插画层(绝对定位右侧,半透明装饰) */
.comp-score-illustration {
    position: absolute; right: -20px; top: 50%; transform: translateY(-50%);
    width: 180px; height: 180px; pointer-events: none; opacity: 0.55;
    z-index: 0;
}
.comp-illust-svg { width: 100%; height: 100%; display: block; }
.comp-result-zodiac .comp-score-illustration { opacity: 0.5; }
[data-theme="dark"] .comp-score-illustration { opacity: 0.35; }
/* 移动端缩小插画避免遮挡内容 */
@media (max-width: 768px) {
    .comp-score-illustration { width: 120px; height: 120px; right: -15px; opacity: 0.4; }
}
@media (max-width: 480px) {
    .comp-score-illustration { width: 90px; height: 90px; right: -10px; opacity: 0.3; }
}
.comp-score-content { position: relative; z-index: 1; display: flex; flex-direction: column; gap: 14px; }
/* V3.1: 评语+身份同行布局,身份标签贴评语最右侧;min-height撑起原"身份+类型"tags行高度,使删除tags后卡片高度恢复 */
.comp-score-verdict-row { display: flex; align-items: flex-end; gap: 12px; flex-wrap: wrap; }
/* V3.0重构: 评语使用衬线字体,作为视觉焦点 */
.comp-score-verdict { font-size: 26px; font-weight: 800; letter-spacing: 4px; font-family: 'Noto Serif SC', var(--font); line-height: 1.3; }
/* V3.0重构: 星级标识(不显示分数,只显示等级) */
.comp-score-stars { display: flex; gap: 4px; margin-top: -4px; align-items: baseline; }
.comp-score-star { font-size: 18px; color: rgba(212,160,23,0.25); line-height: 1; }
.comp-score-star.active { color: #D4A017; text-shadow: 0 0 8px rgba(212,160,23,0.4); }
/* V3.1新增: 星级后的总分数,与星级自然衔接(用细分隔线区隔,字号略大,衬线字体) */
.comp-score-value {
    font-size: 22px;
    font-weight: 700;
    margin-left: 12px;
    padding-left: 12px;
    border-left: 1px solid rgba(212,160,23,0.3);
    font-family: 'Noto Serif SC', var(--font);
    line-height: 1;
    letter-spacing: 1px;
}
.comp-score-value small {
    font-size: 12px;
    font-weight: 500;
    margin-left: 2px;
    opacity: 0.85;
}
@media (max-width: 768px) {
    .comp-score-value { font-size: 18px; margin-left: 10px; padding-left: 10px; }
    .comp-score-value small { font-size: 11px; }
}
/* V3.0重构: 描述文案增加引号装饰 */
.comp-score-desc {
    font-size: 13px; color: var(--text-secondary); line-height: 1.8; max-width: 520px;
    position: relative; padding-left: 16px; font-style: italic;
    margin-top: 36px;
}
.comp-score-desc::before {
    content: '"'; position: absolute; left: 0; top: -4px;
    font-size: 28px; color: var(--score-color, var(--primary)); opacity: 0.4;
    font-family: Georgia, serif; line-height: 1;
}
.comp-dim-locked-text { color: var(--text-muted); font-style: italic; }
.comp-dim-score-blur { font-size: 18px; font-weight: 700; color: var(--primary); margin-left: auto; filter: blur(3px); user-select: none; }

/* 双方命盘概览 */
.comp-parties {
    display: grid; grid-template-columns: 1fr auto 1fr;
    gap: 10px; align-items: center; margin-bottom: 14px;
}
/* V3.0重构: 双方命盘概览 - 头像+大字号命主+胶囊标签+连接线 */
.comp-party {
    background: linear-gradient(160deg, var(--card-bg) 0%, rgba(244,250,247,0.6) 100%);
    border: 1px solid var(--border);
    border-radius: 16px; padding: 18px 14px; text-align: center;
    box-shadow: 0 2px 10px rgba(0,0,0,0.04), inset 0 1px 0 rgba(255,255,255,0.5);
    transition: transform 0.25s ease, box-shadow 0.25s ease;
    position: relative; overflow: hidden;
}
.comp-party::before { content: ''; position: absolute; top: 0; left: 0; right: 0; height: 3px; }
.comp-party.me::before { background: linear-gradient(90deg, var(--primary), rgba(74,111,98,0.3)); }
/* V3.0优化: 对方命盘卡片色改为深松青(与竹青同系,命理青色系) */
.comp-party.other::before { background: linear-gradient(90deg, #2D5A3D, rgba(45,90,61,0.3)); }
.comp-party:hover { transform: translateY(-3px); box-shadow: 0 8px 24px rgba(0,0,0,0.08), inset 0 1px 0 rgba(255,255,255,0.5); }
/* V3.0重构: 头像占位区 */
.comp-party-avatar {
    width: 48px; height: 48px; border-radius: 50%;
    margin: 0 auto 10px; display: flex; align-items: center; justify-content: center;
    font-size: 22px; color: #fff; font-weight: 700;
    box-shadow: 0 4px 12px rgba(0,0,0,0.12), inset 0 1px 0 rgba(255,255,255,0.3);
}
.comp-party.me .comp-party-avatar { background: linear-gradient(135deg, var(--primary), rgba(74,111,98,0.7)); }
.comp-party.other .comp-party-avatar { background: linear-gradient(135deg, #2D5A3D, rgba(45,90,61,0.7)); }
.comp-party-label { font-size: 10px; color: var(--text-muted); margin-bottom: 10px; letter-spacing: 1.5px; text-transform: uppercase; font-weight: 600; }
/* V3.0重构: 命主大字号 */
.comp-party-dm, .comp-party-sun { font-size: 22px; font-weight: 800; color: var(--text); letter-spacing: 1px; font-family: 'Noto Serif SC', var(--font); }
.comp-party-wx { font-size: 12px; color: var(--text-secondary); margin-top: 4px; }
/* V3.0重构: 胶囊标签 */
.comp-party-pillars, .comp-party-moon, .comp-party-asc {
    font-size: 11px; color: var(--text-muted); margin-top: 8px;
    display: inline-flex; align-items: center; gap: 4px;
    padding: 3px 10px; border-radius: 10px;
    background: var(--bg); border: 1px solid var(--border);
}
/* V3.1新增: 第二行卡片tabs容器,两个tab之间自然间隔 */
.comp-party-tabs {
    display: flex; align-items: center; justify-content: center;
    gap: 10px; margin-top: 8px; flex-wrap: wrap;
}
.comp-party-tabs > .comp-party-pillars,
.comp-party-tabs > .comp-party-moon,
.comp-party-tabs > .comp-party-asc {
    margin-top: 0;
}
/* V3.1新增: 用神tab样式(纯图标展示,提高z-index确保tooltip悬停提示可见) */
.comp-party-yong {
    position: relative;
    z-index: 5;
    gap: 6px;
}
.comp-party-yong .wx-icon-tip {
    position: relative;
    z-index: 6;
}
/* V3.0重构: 连接线动画(双圆融合SVG图标) */
.comp-vs {
    width: 44px; height: 44px; border-radius: 50%;
    display: flex; align-items: center; justify-content: center;
    background: transparent;
    animation: compVsPulse 2.5s ease-in-out infinite;
}
.comp-vs svg { width: 100%; height: 100%; display: block; }
@keyframes compVsPulse {
    0%, 100% { transform: scale(1); }
    50% { transform: scale(1.08); }
}
[data-theme="dark"] .comp-party { background: linear-gradient(160deg, var(--card-bg) 0%, rgba(30,42,38,0.6) 100%); box-shadow: 0 2px 10px rgba(0,0,0,0.2), inset 0 1px 0 rgba(255,255,255,0.05); }
@media (prefers-reduced-motion: reduce) { .comp-vs { animation: none; } }

/* 章节标题 */
.comp-section-title {
    font-size: 15px; font-weight: 700; margin-bottom: 14px; color: var(--text);
    padding-bottom: 10px; border-bottom: 2px solid var(--primary-bg);
    display: flex; align-items: center; gap: 6px;
}
.comp-section-title::before { content: ''; width: 3px; height: 16px; background: var(--primary); border-radius: 2px; }

/* 五维评分卡片 */
.comp-dims-card { padding: 20px; margin-bottom: 14px; }
.comp-dims-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.comp-dim-card {
    background: linear-gradient(135deg, var(--bg) 0%, rgba(255,255,255,0.5) 100%);
    border-radius: 12px; padding: 14px 16px;
    border: 1px solid var(--border);
    transition: transform 0.2s ease, box-shadow 0.2s ease;
    position: relative; overflow: hidden;
}
[data-theme="dark"] .comp-dim-card { background: linear-gradient(135deg, var(--bg) 0%, rgba(255,255,255,0.02) 100%); }
.comp-dim-card:hover { transform: translateY(-2px); box-shadow: 0 4px 12px rgba(0,0,0,0.06); }
.comp-dim-head { display: flex; align-items: center; gap: 8px; margin-bottom: 10px; }
/* V3.0重构: 维度图标彩色背景圆 */
.comp-dim-icon {
    font-size: 15px; width: 28px; height: 28px; border-radius: 50%;
    display: flex; align-items: center; justify-content: center;
    flex-shrink: 0;
}
.comp-dim-icon[data-dim="emotion"] { background: #FCE7F3; color: #DB2777; }
.comp-dim-icon[data-dim="communication"] { background: #DBEAFE; color: #2563EB; }
.comp-dim-icon[data-dim="cooperation"] { background: #DCFCE7; color: #16A34A; }
.comp-dim-icon[data-dim="conflict"] { background: #FEE2E2; color: #DC2626; }
.comp-dim-icon[data-dim="stability"] { background: #EDE9FE; color: #7C3AED; }
.comp-dim-name { flex: 1; font-size: 13px; color: var(--text); font-weight: 600; letter-spacing: 0.3px; }
/* V3.0重构: 模糊分数进度条(暗示有分数,需解锁) */
.comp-dim-bar {
    height: 6px; background: var(--border); border-radius: 3px; overflow: hidden;
    box-shadow: inset 0 1px 2px rgba(0,0,0,0.06); margin-bottom: 8px; position: relative;
}
.comp-dim-fill {
    height: 100%; border-radius: 3px;
    background: linear-gradient(90deg, var(--primary), rgba(212,160,23,0.6));
    filter: blur(2.5px); user-select: none;
    animation: dimBarShimmer 2s ease-in-out infinite;
}
@keyframes dimBarShimmer {
    0%, 100% { opacity: 0.7; }
    50% { opacity: 1; }
}
.comp-dim-summary { font-size: 11px; color: var(--text-muted); line-height: 1.7; position: relative; padding-left: 10px; }
.comp-dim-summary::before { content: '"'; position: absolute; left: 0; top: -2px; color: var(--primary); opacity: 0.4; font-size: 14px; }

/* 章节预览卡片 */
.comp-chapters-card { padding: 20px; margin-bottom: 14px; }
.comp-chapter-preview {
    display: flex; gap: 12px; padding: 12px 10px;
    border-bottom: 1px dashed var(--border);
    transition: transform 0.2s ease, background 0.2s ease;
    border-radius: 8px; position: relative;
}
.comp-chapter-preview:hover { background: var(--primary-bg); transform: translateX(3px); }
.comp-chapter-preview:last-child { border-bottom: none; }
/* V3.0重构: 序号徽章增加光晕 */
.comp-chapter-num {
    width: 32px; height: 32px;
    background: linear-gradient(135deg, var(--primary), rgba(74,111,98,0.7));
    color: #fff; border-radius: 50%;
    display: flex; align-items: center; justify-content: center;
    font-size: 14px; font-weight: 700; flex-shrink: 0;
    box-shadow: 0 2px 8px rgba(74,111,98,0.3), 0 0 0 4px rgba(74,111,98,0.06);
    transition: box-shadow 0.2s ease, transform 0.2s ease;
}
.comp-chapter-preview:hover .comp-chapter-num {
    transform: scale(1.1);
    box-shadow: 0 4px 12px rgba(74,111,98,0.4), 0 0 0 6px rgba(74,111,98,0.1);
}
.comp-chapter-body { flex: 1; min-width: 0; }
.comp-chapter-body h4 { font-size: 14px; color: var(--text); margin-bottom: 4px; font-weight: 600; }
/* V3.0重构: 预览文案增加渐隐遮罩 */
.comp-chapter-body p {
    font-size: 12px; color: var(--text-muted); line-height: 1.6;
    -webkit-mask-image: linear-gradient(to bottom, black 50%, transparent 100%);
    mask-image: linear-gradient(to bottom, black 50%, transparent 100%);
}
.comp-preview-hint { text-align: center; font-size: 12px; color: var(--text-muted); margin: 8px 0 12px; }
.comp-pay-btn { font-size: 15px; padding: 12px; }
.comp-unlock-wrap { margin-top: 20px; width: 100%; box-sizing: border-box; }
.comp-unlock-wrap .unlock-card-v2 { width: 100%; box-sizing: border-box; }

/* ===== 对话列表增强 ===== */
.chat-icon.msg { background: #FEF3C7; color: #D97706; }
.chat-icon.free { background: #DCFCE7; color: #16A34A; }
.chat-icon.paid { background: #DBEAFE; color: #2563EB; }
.chat-tag { font-size: 10px; padding: 2px 6px; border-radius: 8px; font-weight: 500; margin-left: 6px; vertical-align: middle; min-width: 52px; text-align: center; display: inline-block; }
.chat-tag.free { background: #DCFCE7; color: #16A34A; }
.chat-tag.paid { background: #DBEAFE; color: #2563EB; }
.chat-tag.used { background: #f0f2f0; color: #aab5a8; }
.chat-tag.unlock { background: #FEF3C7; color: #D97706; }
.chat-arrow { color: var(--text-muted); font-size: 16px; }
.chat-scope-banner { background: linear-gradient(90deg, rgba(74,111,98,0.1), rgba(74,111,98,0.05)); color: var(--text-secondary); font-size: 12px; padding: 10px 14px; line-height: 1.6; border-bottom: 1px solid rgba(74,111,98,0.15); }
.chat-scope-banner strong { color: var(--primary); }
.chat-scope-banner.member { background: linear-gradient(90deg, rgba(212,175,55,0.15), rgba(212,175,55,0.08)); border-bottom-color: rgba(212,175,55,0.3); }
.chat-scope-banner.member strong { color: #B8860B; }
.chat-scope-banner.vip { background: linear-gradient(90deg, rgba(245,158,11,0.15), rgba(245,158,11,0.08)); border-bottom-color: rgba(245,158,11,0.3); color: #92400E; }
.chat-scope-banner.vip strong { color: #B45309; }
.chat-typing {
    align-self: flex-start; padding: 10px 14px;
    display: flex; gap: 4px;
}
.chat-typing span {
    width: 7px; height: 7px; border-radius: 50%;
    background: var(--text-muted);
    animation: typingBounce 1.2s ease-in-out infinite;
}
.chat-typing span:nth-child(2) { animation-delay: 0.2s; }
.chat-typing span:nth-child(3) { animation-delay: 0.4s; }
@keyframes typingBounce {
    0%,100% { transform: translateY(0); }
    50% { transform: translateY(-6px); }
}

/* ===== 消息卡片 ===== */
/* V3.0优化: 消息中心卡片区别于其他卡片,增强不透明度+渐变背景+左侧色条 */
/* V3.1.2优化: 卡片宽度跟随容器,内边距与Tab对齐,卡片间距12px更舒展 */
.chat-msg-card {
    background: linear-gradient(135deg, rgba(255,255,255,0.98) 0%, rgba(248,246,242,0.97) 100%);
    backdrop-filter: blur(12px) saturate(1.1);
    -webkit-backdrop-filter: blur(12px) saturate(1.1);
    border-radius: var(--radius);
    padding: 16px 18px; margin-bottom: 6px;
    cursor: pointer; transition: var(--transition);
    border: 1px solid rgba(180,170,150,0.3);
    /* V3.1.86: 消息中心对话卡片上边框颜色深度与运势推送一致(3px #9DB8AE) */
    border-top: 3px solid #9DB8AE;
    box-shadow: 0 2px 12px rgba(0,0,0,0.06), 0 1px 4px rgba(0,0,0,0.03);
}
[data-theme="dark"] .chat-msg-card {
    background: linear-gradient(135deg, rgba(36,36,36,0.98) 0%, rgba(30,28,24,0.97) 100%);
    border: 1px solid rgba(255,255,255,0.08);
    border-top: 3px solid #9DB8AE;
    box-shadow: 0 2px 12px rgba(0,0,0,0.3), 0 1px 4px rgba(0,0,0,0.2);
}
.chat-msg-card.unread { background: linear-gradient(135deg, rgba(74,111,98,0.12) 0%, rgba(212,160,23,0.08) 100%); border-top-color: #9DB8AE; }
.chat-msg-card-head { display: flex; align-items: center; gap: 6px; margin-bottom: 6px; flex-wrap: wrap; }
.chat-msg-type-icon { font-size: 16px; }
.chat-msg-title { flex: 1; font-size: 13px; font-weight: 600; color: var(--text); }
.chat-msg-type-badge { font-size: 10px; padding: 2px 8px; border-radius: 10px; font-weight: 600; white-space: nowrap; background: var(--primary-bg); color: var(--primary); border: 1px solid rgba(74,111,98,0.15); }
.chat-msg-dot { width: 8px; height: 8px; background: #DC2626; border-radius: 50%; flex-shrink: 0; }
.chat-msg-time { font-size: 11px; color: var(--text-muted); }
/* V3.1.86: 服务消息卡片右下角时间(替代原头部时间,避免与正文有效期时间重复) */
.chat-msg-time-bottom { font-size: 11px; color: var(--text-muted); text-align: right; margin-top: 16px; padding-top: 10px; border-top: 1px solid var(--border); }

/* V3.0优化: 消息中心分页器 */
.msg-pagination { display: flex; align-items: center; justify-content: center; gap: 12px; padding: 16px 0 8px; border-top: 1px solid var(--border); margin-top: 12px; }
.msg-page-btn { padding: 6px 16px; border: 1px solid var(--border); border-radius: var(--radius-sm); background: var(--card-bg); color: var(--text); font-size: 13px; cursor: pointer; transition: var(--transition); font-family: var(--font); }
.msg-page-btn:hover:not(.disabled) { border-color: var(--primary); color: var(--primary); background: var(--primary-bg); }
.msg-page-btn.disabled { opacity: 0.4; cursor: not-allowed; }
.msg-page-info { font-size: 13px; color: var(--text-secondary); font-weight: 600; }

/* V3.0优化: 消息中心在对话列表中的独特样式 */
.chat-card-msg {
    background: linear-gradient(135deg, rgba(74,111,98,0.06) 0%, rgba(212,160,23,0.04) 100%);
    border: 1px solid rgba(74,111,98,0.15);
    border-radius: 14px;
}
.chat-card-msg .chat-card-icon-wrap.msg {
    background: linear-gradient(135deg, rgba(74,111,98,0.15), rgba(212,160,23,0.10));
    color: var(--primary);
}

/* V3.1.3: 每日运势标签与付费解锁标签统一尺寸(继承基础chat-tag) */
.chat-tag.free { font-weight: 600; }
.msg-overall { font-size: 13px; color: var(--text); line-height: 1.6; margin-bottom: 6px; }
.msg-text { font-size: 13px; color: var(--text-secondary); line-height: 1.6; word-break: break-all; }
.msg-time { font-size: 11px; color: var(--text-muted); margin-top: 4px; }
/* V3.0优化: 消息中心结构化样式 */
.msg-dims { display: grid; grid-template-columns: repeat(5, 1fr); gap: 4px 6px; margin: 8px 0; }
.msg-dim-item { display: flex; flex-direction: column; align-items: center; padding: 6px 4px; background: var(--bg); border-radius: 6px; font-size: 11px; }
.msg-dim-name { color: var(--text-secondary); margin-bottom: 2px; }
.msg-dim-score { font-weight: 400; font-size: 14px; }
.msg-alerts { margin-top: 8px; border-radius: 8px; padding: 10px 12px; }
.msg-alerts-lucky { background: rgba(22,163,74,0.12); border: 1px solid rgba(22,163,74,0.3); }
.msg-alerts-caution { background: rgba(245,158,11,0.12); border: 1px solid rgba(245,158,11,0.30); }
.msg-alerts-none { display: flex; align-items: center; justify-content: center; padding: 24px 0; }
.msg-alerts-none-text { font-size: 13px; color: var(--text-muted); letter-spacing: 2px; }
.msg-alert-item { padding: 6px 0; border-top: 1px solid rgba(0,0,0,0.05); }
.msg-alert-item:first-of-type { border-top: none; }
.msg-alert-head { display: flex; justify-content: space-between; align-items: center; margin-bottom: 3px; }
.msg-alert-name { font-size: 12px; font-weight: 600; color: var(--text); padding: 0 2.5px; }
.msg-alert-score { font-size: 10px; font-weight: 400; }
.msg-alert-item.lucky .msg-alert-score { color: #16A34A; }
.msg-alert-item.caution .msg-alert-score { color: #D97706; }
.msg-alert-date {
    font-size: 11px;
    font-weight: 600;
    color: var(--primary);
    background: var(--primary-bg);
    padding: 1px 7px;
    border-radius: 8px;
    letter-spacing: 0.5px;
    /* V3.3.24修复: 不同日期(含0/1/8等)数字字形宽度不同导致每行日期外框长短不齐;
       改为固定等宽盒子+文字居中,所有行日期外框对齐 */
    display: inline-block;
    box-sizing: border-box;
    min-width: 6em;
    text-align: center;
    font-variant-numeric: tabular-nums;
}
/* V3.2.4: 日期右侧星期标签 */
.msg-alert-weekday { font-size: 11px; font-weight: 400; color: var(--text-muted); margin-left: -8px; }
.msg-alert-item.caution .msg-alert-date { color: #B45309; background: rgba(245,158,11,0.08); }
.msg-alert-tip { font-size: 11px; color: var(--text-secondary); line-height: 1.5; padding: 0 2.5px; }
/* V3.0优化: 按日期分组的提醒样式 */
.msg-alert-group { padding: 6px 0; border-top: 1px solid rgba(0,0,0,0.05); }
.msg-alert-group:first-of-type { border-top: none; }
.msg-alert-group-head { display: flex; justify-content: space-between; align-items: center; margin-bottom: 4px; cursor: pointer; user-select: none; }
/* V3.2.4: 每天分组收起/展开(默认收起body); 箭头与日期同组靠左紧凑排列 */
.msg-alert-group-body { display: none; }
.msg-alert-group-left { display: flex; align-items: center; gap: 15px; } /* V3.3.25: 20->15px, 日期+星期整体左移5px */
.msg-alert-group-toggle { font-size: 10px; color: var(--text-muted); transition: transform 0.2s ease; }
/* V3.0优化: 综合分数加粗着色(好运绿色/留意橙色),小项分数不加粗; V3.2.4: 分数缩小一号与左侧字段一致 */
.msg-alert-group-score { font-size: 11px; font-weight: 400; padding: 2px 10px; border-radius: 8px; /* V3.3.25: 胶囊固定等宽(贴合'维度名+分'), 数字等宽(tabular-nums)后所有条目文字宽度一致, 居中使左右留白对称且各行维度名起点仍对齐 */ display: inline-block; box-sizing: border-box; min-width: 5.6em; text-align: center; white-space: nowrap; font-variant-numeric: tabular-nums; }
.msg-alert-tab-content[data-tab="lucky"] .msg-alert-group-score { color: #16A34A; background: rgba(22,163,74,0.12); }
.msg-alert-tab-content[data-tab="caution"] .msg-alert-group-score { color: #D97706; background: rgba(245,158,11,0.12); }
.msg-alerts-lucky .msg-alert-group-score { color: #16A34A; background: rgba(22,163,74,0.12); }
.msg-alerts-caution .msg-alert-group-score { color: #D97706; background: rgba(245,158,11,0.12); }
.msg-alert-summary { font-size: 11px; color: var(--text); line-height: 1.5; margin-top: 4px; padding: 6px 8px; background: rgba(255,255,255,0.5); border-radius: 6px; border: 1px solid rgba(0,0,0,0.04); }
[data-theme="dark"] .msg-alert-summary { background: rgba(255,255,255,0.03); }
/* V3.0优化: 好运/留意提醒Tab样式 */
.msg-alert-tabs { display: flex; gap: 0; margin: 8px 0 0; border-bottom: 2px solid var(--border); }
.msg-alert-tab {
    flex: 1; padding: 8px 0; text-align: center; font-size: 13px; font-weight: 600;
    cursor: pointer; transition: all 0.2s; color: var(--text-muted);
    border-bottom: 2px solid transparent; margin-bottom: -2px; background: none; border-top: none; border-left: none; border-right: none;
    font-family: var(--font);
}
.msg-alert-tab.active { color: var(--primary); border-bottom-color: var(--primary); }
.msg-alert-tab.lucky-tab.active { color: #15803D; border-bottom-color: #15803D; }
.msg-alert-tab.caution-tab.active { color: #B45309; border-bottom-color: #B45309; }
.msg-alert-tab-content { display: none; }
.msg-alert-tab-content.active { display: block; }
/* V3.0优化: 消息中心Tab(八字运势推送/星盘运势推送/服务消息) */
.msg-center-tabs { display: flex; border-bottom: 2px solid var(--border); margin-bottom: 12px; background: var(--card-bg); border-radius: var(--radius-sm) var(--radius-sm) 0 0; }
.msg-center-tab { flex: 1; padding: 12px 2px; text-align: center; font-size: 12px; font-weight: 600; color: var(--text-muted); cursor: pointer; transition: var(--transition); border-bottom: 2px solid transparent; margin-bottom: -2px; background: none; border-top: none; border-left: none; border-right: none; font-family: var(--font); white-space: nowrap; }
.msg-center-tab:hover { color: var(--text); }
.msg-center-tab.active { color: var(--primary); border-bottom-color: var(--primary); }
/* V3.1新增: 服务消息tab未读数小徽章 */
.msg-tab-badge {
    display: inline-block;
    background: #E5484D;
    color: #fff;
    font-size: 10px;
    font-weight: 700;
    padding: 1px 6px;
    border-radius: 10px;
    min-width: 16px;
    height: 16px;
    line-height: 14px;
    text-align: center;
    margin-left: 5px;
    vertical-align: middle;
    box-shadow: 0 1px 3px rgba(229, 72, 77, 0.4);
}
/* V3.0优化: 星盘模式消息卡片左侧色条改为蓝色系 */
.chat-msg-card.fortune-mode-zodiac.fortune-weekly { border-top-color: #3A5A8C; }
.chat-msg-card.fortune-mode-zodiac.fortune-monthly { border-top-color: #3A5A8C; }
/* V3.0优化: 星盘模式五维评分卡片配色微调 */
.chat-msg-card.fortune-mode-zodiac .msg-dim-item { background: rgba(58,90,140,0.06); }
[data-theme="dark"] .chat-msg-card.fortune-mode-zodiac .msg-dim-item { background: rgba(58,90,140,0.10); }
/* V3.0优化: 推送时间行(移到标题下方) */
.chat-msg-time-row { font-size: 11px; color: var(--text-muted); margin: 2px 0 6px 28px; }
/* V3.0优化: 周运/月运推送卡片样式统一(八字绿色系) */
/* V3.1.83: 顶部绿色上边框调淡一些 */
/* V3.1.84: 顶部绿色上边框厚度改为3px,与消息中心公告卡片(3px)保持一致,不再过厚 */
.chat-msg-card.fortune-weekly { border-top: 3px solid #9DB8AE; }
.chat-msg-card.fortune-monthly { border-top: 3px solid #9DB8AE; }
/* V3.0优化: 运势推送卡片八字/星盘切换按钮 */
.msg-fortune-toggle {
    margin-left: auto;
    display: inline-flex; align-items: center; gap: 4px;
    padding: 3px 10px; border-radius: 14px;
    font-size: 11px; font-weight: 600; cursor: pointer;
    background: var(--bg); color: var(--text-secondary);
    border: 1px solid var(--border);
    transition: var(--transition); flex-shrink: 0;
    font-family: var(--font);
}
.msg-fortune-toggle:hover { background: var(--primary-bg); color: var(--primary); }
.msg-fortune-toggle-icon { font-size: 10px; opacity: 0.6; }
.chat-msg-card.fortune-mode-zodiac .msg-fortune-toggle { background: rgba(58,90,140,0.10); color: #3A5A8C; border-color: rgba(58,90,140,0.2); }
/* V3.0优化: 对话列表时间显示(微信样式) */
.chat-card-time { font-size: 11px; color: var(--text-muted); flex-shrink: 0; margin-left: 4px; white-space: nowrap; }
.msg-features { margin: 6px 0; padding-left: 0; list-style: none; }
.msg-feature-item { font-size: 12px; color: var(--text-secondary); padding: 3px 0; line-height: 1.5; }
/* V3.x: 分割线已统一移至 .chat-msg-time-bottom,此处不再重复 */
.msg-expire { font-size: 11px; color: var(--text-muted); margin-top: 6px; }

/* ===== V3.0新增: 系统公告消息卡片样式 ===== */
/* V3.2.4: 公告卡片上边框统一为 #9DB8AE,与其他消息卡片一致 */
.chat-msg-card.msg-card-announcement {
    border-top: 3px solid #9DB8AE;
    background: linear-gradient(135deg, rgba(15,52,96,0.03) 0%, rgba(15,52,96,0.01) 100%);
}
.chat-msg-card.msg-card-announcement.ann-activity { border-top-color: #9DB8AE; background: linear-gradient(135deg, rgba(233,69,96,0.04) 0%, rgba(233,69,96,0.01) 100%); }
.chat-msg-card.msg-card-announcement.ann-maintenance { border-top-color: #9DB8AE; background: linear-gradient(135deg, rgba(243,156,18,0.04) 0%, rgba(243,156,18,0.01) 100%); }
.chat-msg-card.msg-card-announcement.ann-promo { border-top-color: #9DB8AE; background: linear-gradient(135deg, rgba(39,174,96,0.04) 0%, rgba(39,174,96,0.01) 100%); }
[data-theme="dark"] .chat-msg-card.msg-card-announcement { background: linear-gradient(135deg, rgba(88,166,255,0.06) 0%, rgba(88,166,255,0.02) 100%); border-top-color: #9DB8AE; }
[data-theme="dark"] .chat-msg-card.msg-card-announcement.ann-activity { border-top-color: #9DB8AE; background: linear-gradient(135deg, rgba(255,107,138,0.08) 0%, rgba(255,107,138,0.02) 100%); }
[data-theme="dark"] .chat-msg-card.msg-card-announcement.ann-maintenance { border-top-color: #9DB8AE; background: linear-gradient(135deg, rgba(255,199,77,0.08) 0%, rgba(255,199,77,0.02) 100%); }
[data-theme="dark"] .chat-msg-card.msg-card-announcement.ann-promo { border-top-color: #9DB8AE; background: linear-gradient(135deg, rgba(74,222,128,0.08) 0%, rgba(74,222,128,0.02) 100%); }

/* 公告类型徽章颜色 */
.chat-msg-card.msg-card-announcement .chat-msg-type-badge {
    background: rgba(15,52,96,0.10); color: #0f3460;
}
.chat-msg-card.msg-card-announcement.ann-activity .chat-msg-type-badge { background: rgba(233,69,96,0.12); color: #e94560; }
.chat-msg-card.msg-card-announcement.ann-maintenance .chat-msg-type-badge { background: rgba(243,156,18,0.15); color: #f39c12; }
.chat-msg-card.msg-card-announcement.ann-promo .chat-msg-type-badge { background: rgba(39,174,96,0.15); color: #27ae60; }
[data-theme="dark"] .chat-msg-card.msg-card-announcement .chat-msg-type-badge { background: rgba(88,166,255,0.18); color: #58a6ff; }
[data-theme="dark"] .chat-msg-card.msg-card-announcement.ann-activity .chat-msg-type-badge { background: rgba(255,107,138,0.20); color: #ff6b8a; }
[data-theme="dark"] .chat-msg-card.msg-card-announcement.ann-maintenance .chat-msg-type-badge { background: rgba(255,199,77,0.20); color: #ffc74d; }
[data-theme="dark"] .chat-msg-card.msg-card-announcement.ann-promo .chat-msg-type-badge { background: rgba(74,222,128,0.20); color: #4ade80; }

/* 公告类型彩条标题(卡片内容顶部) */
.msg-ann-banner {
    display: flex;
    align-items: center;
    gap: 6px;
    padding: 8px 14px;
    border-radius: var(--radius-sm);
    margin: 4px 0 10px;
    font-size: 12px;
    font-weight: 600;
    background: rgba(15,52,96,0.08);
    color: #0f3460;
    border-left: 3px solid #0f3460;
}
.msg-ann-banner.ann-system { background: rgba(15,52,96,0.08); color: #0f3460; border-top-color: #0f3460; }
.msg-ann-banner.ann-activity { background: rgba(233,69,96,0.08); color: #e94560; border-top-color: #e94560; }
.msg-ann-banner.ann-maintenance { background: rgba(243,156,18,0.10); color: #f39c12; border-top-color: #f39c12; }
.msg-ann-banner.ann-promo { background: rgba(39,174,96,0.10); color: #27ae60; border-top-color: #27ae60; }
[data-theme="dark"] .msg-ann-banner.ann-system { background: rgba(88,166,255,0.15); color: #58a6ff; border-top-color: #58a6ff; }
[data-theme="dark"] .msg-ann-banner.ann-activity { background: rgba(255,107,138,0.15); color: #ff6b8a; border-top-color: #ff6b8a; }
[data-theme="dark"] .msg-ann-banner.ann-maintenance { background: rgba(255,199,77,0.15); color: #ffc74d; border-top-color: #ffc74d; }
[data-theme="dark"] .msg-ann-banner.ann-promo { background: rgba(74,222,128,0.15); color: #4ade80; border-top-color: #4ade80; }

.msg-ann-banner-icon { font-size: 14px; line-height: 1; }
.msg-ann-banner-label { letter-spacing: 0.5px; }

/* 公告内容主体 */
.msg-ann-body {
    padding: 4px 0;
}
.msg-ann-content {
    font-size: 13px;
    line-height: 1.7;
    color: var(--text);
    padding: 10px 14px;
    background: var(--bg);
    border-radius: var(--radius-sm);
    white-space: pre-wrap;
    word-break: break-word;
    margin-bottom: 8px;
}
.msg-ann-foot {
    font-size: 11px;
    color: var(--text-muted);
    text-align: right;
    padding-top: 4px;
    border-top: 1px dashed var(--border);
}

/* ===== V3.0高端优化: 登录前欢迎页 ===== */
.welcome-hero {
    position: relative;
    min-height: calc(100vh - 160px);
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
    padding: 24px 20px 40px;
}
.welcome-hero-bg {
    position: absolute;
    top: 0; left: 0; right: 0; bottom: 0;
    background:
        radial-gradient(circle at 20% 30%, rgba(74,111,98,0.08), transparent 50%),
        radial-gradient(circle at 80% 70%, rgba(212,160,23,0.06), transparent 50%),
        radial-gradient(2px 2px at 15% 25%, rgba(74,111,98,0.3), transparent),
        radial-gradient(1px 1px at 55% 65%, rgba(74,111,98,0.25), transparent),
        radial-gradient(1.5px 1.5px at 80% 15%, rgba(212,160,23,0.2), transparent),
        radial-gradient(1px 1px at 35% 75%, rgba(74,111,98,0.2), transparent),
        radial-gradient(1px 1px at 90% 55%, rgba(74,111,98,0.15), transparent),
        radial-gradient(1.5px 1.5px at 25% 50%, rgba(212,160,23,0.15), transparent),
        radial-gradient(1px 1px at 70% 90%, rgba(74,111,98,0.2), transparent);
    z-index: 0;
    animation: welcomeStarTwinkle 4s ease-in-out infinite;
}
.welcome-hero-content {
    position: relative;
    z-index: 1;
    text-align: center;
    max-width: 480px;
    width: 100%;
    animation: floatUp 0.6s cubic-bezier(0.16, 1, 0.3, 1);
}
.welcome-logo-wrap {
    position: relative;
    width: 84px; height: 84px;
    margin: 0 auto 16px;
    display: flex; align-items: center; justify-content: center;
}
.welcome-logo-ring {
    position: absolute;
    top: 0; left: 0; right: 0; bottom: 0;
    border: 2px solid transparent;
    border-top-color: var(--primary);
    border-right-color: var(--accent);
    border-radius: 50%;
    animation: welcomeRingRotate 8s linear infinite;
}
.welcome-logo-ring::before {
    content: '';
    position: absolute;
    top: -3px; left: 50%;
    width: 6px; height: 6px;
    background: var(--accent);
    border-radius: 50%;
    transform: translateX(-50%);
    box-shadow: 0 0 8px var(--accent);
}
.welcome-logo {
    font-size: 44px;
    line-height: 1;
    display: flex; align-items: center; justify-content: center;
    filter: drop-shadow(0 2px 12px rgba(74,111,98,0.3));
}
.welcome-logo svg { width: 40px; height: 40px; display: block; }
.welcome-title {
    font-size: 30px;
    font-weight: 700;
    font-family: var(--font-serif);
    letter-spacing: 6px;
    color: var(--text);
    margin-bottom: 6px;
}
.welcome-slogan {
    font-size: 13px;
    color: var(--text-muted);
    letter-spacing: 2px;
    margin-bottom: 28px;
}
.welcome-features {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 12px;
    margin-bottom: 28px;
}
.welcome-feature {
    background:
        linear-gradient(145deg, rgba(255,255,255,0.55), rgba(240,247,243,0.4)),
        var(--card-bg);
    backdrop-filter: blur(12px) saturate(1.2);
    -webkit-backdrop-filter: blur(12px) saturate(1.2);
    border: 1px solid rgba(74,111,98,0.12);
    border-radius: 16px;
    padding: 18px 14px 16px;
    position: relative;
    overflow: hidden;
    cursor: default;
    transition: transform 0.4s cubic-bezier(0.16, 1, 0.3, 1),
                box-shadow 0.4s cubic-bezier(0.16, 1, 0.3, 1),
                border-color 0.4s ease, background 0.4s ease;
    box-shadow:
        0 1px 2px rgba(74,111,98,0.04),
        0 4px 12px rgba(74,111,98,0.06),
        inset 0 1px 0 rgba(255,255,255,0.9);
}
/* 顶部光带 */
.welcome-feature::before {
    content: '';
    position: absolute;
    top: 0; left: 20%; right: 20%;
    height: 2px;
    background: linear-gradient(90deg, transparent, var(--primary), var(--accent), transparent);
    border-radius: 2px;
    opacity: 0;
    transition: opacity 0.4s ease, left 0.4s ease, right 0.4s ease;
}
/* 右下角光晕装饰 */
.welcome-feature::after {
    content: '';
    position: absolute;
    bottom: -30px; right: -30px;
    width: 80px; height: 80px;
    background: radial-gradient(circle, rgba(74,111,98,0.12), transparent 70%);
    border-radius: 50%;
    opacity: 0;
    transition: opacity 0.5s ease, transform 0.5s ease;
    pointer-events: none;
}
.welcome-feature:hover {
    transform: translateY(-6px);
    border-color: rgba(74,111,98,0.35);
    box-shadow:
        0 2px 4px rgba(74,111,98,0.06),
        0 12px 28px rgba(74,111,98,0.14),
        0 24px 48px rgba(74,111,98,0.08),
        inset 0 1px 0 rgba(255,255,255,1);
}
.welcome-feature:hover::before {
    opacity: 1;
    left: 0; right: 0;
}
.welcome-feature:hover::after {
    opacity: 1;
    transform: scale(1.4);
}
.welcome-feature-icon {
    font-size: 28px;
    margin-bottom: 10px;
    line-height: 1;
    display: inline-block;
    transition: transform 0.4s cubic-bezier(0.16, 1, 0.3, 1);
    filter: drop-shadow(0 2px 6px rgba(74,111,98,0.2));
}
.welcome-feature:hover .welcome-feature-icon {
    transform: scale(1.15) translateY(-2px);
}
.welcome-feature-name {
    font-size: 14px;
    font-weight: 700;
    color: var(--text);
    margin-bottom: 3px;
    letter-spacing: 0.5px;
    transition: color 0.3s ease;
}
.welcome-feature:hover .welcome-feature-name {
    color: var(--primary);
}
.welcome-feature-desc {
    font-size: 11px;
    color: var(--text-muted);
    letter-spacing: 0.3px;
}
/* 暗色主题: 卡片层次感 */
[data-theme="dark"] .welcome-feature {
    background:
        linear-gradient(145deg, rgba(45,61,52,0.9), rgba(34,46,41,0.8)),
        var(--card-bg);
    border: 1px solid rgba(126,184,160,0.15);
    box-shadow:
        0 1px 2px rgba(0,0,0,0.2),
        0 4px 12px rgba(0,0,0,0.25),
        inset 0 1px 0 rgba(255,255,255,0.04);
}
[data-theme="dark"] .welcome-feature:hover {
    border-color: rgba(126,184,160,0.4);
    box-shadow:
        0 2px 4px rgba(0,0,0,0.25),
        0 12px 28px rgba(0,0,0,0.35),
        inset 0 1px 0 rgba(255,255,255,0.06);
}
[data-theme="dark"] .welcome-feature::after {
    background: radial-gradient(circle, rgba(126,184,160,0.15), transparent 70%);
}
[data-theme="dark"] .welcome-feature:hover .welcome-feature-name {
    color: #7EB8A0;
}
.welcome-cta-btn {
    width: 100%;
    padding: 15px 32px;
    font-size: 16px;
    font-weight: 600;
    letter-spacing: 4px;
    border: none;
    border-radius: 14px;
    background: linear-gradient(135deg, var(--primary), #3E7C67);
    color: #fff;
    cursor: pointer;
    position: relative;
    overflow: hidden;
    box-shadow: 0 6px 20px rgba(74,111,98,0.3);
    transition: transform 0.2s ease, box-shadow 0.3s ease, background 0.3s ease;
}
.welcome-cta-btn::after {
    content: '';
    position: absolute;
    top: 0; bottom: 0; left: -150%;
    width: 150%; height: 100%;
    transform: none;
    background: linear-gradient(120deg, transparent 30%, rgba(255,255,255,0.3) 50%, transparent 70%);
    animation: shimmer 3s infinite;
    pointer-events: none;
}
.welcome-cta-btn:hover {
    background: linear-gradient(135deg, #3E7C67, #2D5F4E);
    box-shadow: 0 10px 28px rgba(74,111,98,0.4);
    transform: translateY(-1px);
}
.welcome-cta-btn:active { transform: scale(0.98); }

/* 暗色主题适配 */
[data-theme="dark"] .welcome-hero-bg {
    background:
        radial-gradient(circle at 20% 30%, rgba(126,184,160,0.1), transparent 50%),
        radial-gradient(circle at 80% 70%, rgba(212,160,23,0.08), transparent 50%),
        radial-gradient(2px 2px at 15% 25%, rgba(255,255,255,0.2), transparent),
        radial-gradient(1px 1px at 55% 65%, rgba(255,255,255,0.15), transparent),
        radial-gradient(1.5px 1.5px at 80% 15%, rgba(212,160,23,0.15), transparent),
        radial-gradient(1px 1px at 35% 75%, rgba(255,255,255,0.12), transparent),
        radial-gradient(1px 1px at 90% 55%, rgba(255,255,255,0.1), transparent),
        radial-gradient(1.5px 1.5px at 25% 50%, rgba(212,160,23,0.1), transparent),
        radial-gradient(1px 1px at 70% 90%, rgba(255,255,255,0.12), transparent);
}
[data-theme="dark"] .welcome-logo {
    background: linear-gradient(135deg, #7EB8A0, #5A9A82);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
}
[data-theme="dark"] .welcome-cta-btn {
    background: linear-gradient(135deg, #7EB8A0, #5A9A82);
    box-shadow: 0 6px 20px rgba(126,184,160,0.25);
}

/* 响应式 */
@media (max-width: 640px) {
    .welcome-hero { padding: 20px 16px 40px; min-height: calc(100vh - 140px); }
    .welcome-logo-wrap { width: 76px; height: 76px; margin-bottom: 14px; }
    .welcome-logo { font-size: 36px; }
    .welcome-title { font-size: 24px; letter-spacing: 4px; }
    .welcome-slogan { font-size: 12px; margin-bottom: 22px; }
    .welcome-features { gap: 10px; margin-bottom: 22px; }
    .welcome-feature { padding: 14px 10px; }
    .welcome-feature-icon { font-size: 22px; }
}

/* 动画 */
@keyframes welcomeRingRotate {
    to { transform: rotate(360deg); }
}
@keyframes welcomeStarTwinkle {
    0%, 100% { opacity: 1; }
    50% { opacity: 0.7; }
}
@media (prefers-reduced-motion: reduce) {
    .welcome-hero-bg { animation: none; }
    .welcome-logo-ring { animation: none; }
    .welcome-cta-btn::after { animation: none; }
    .welcome-hero-content { animation: none; }
}
.login-hint { text-align: center; font-size: 12px; color: var(--text-muted); margin-top: 8px; padding: 6px; background: var(--bg); border-radius: var(--radius-sm); }
.login-hint strong { color: var(--primary); }

/* ===== V3.0高端优化: 登录对话框 ===== */
/* 蒙层: 星图纹理背景 */
.login-modal.active {
    background:
        radial-gradient(1.5px 1.5px at 15% 25%, rgba(255,255,255,0.4), transparent),
        radial-gradient(1px 1px at 55% 65%, rgba(255,255,255,0.3), transparent),
        radial-gradient(2px 2px at 80% 15%, rgba(255,255,255,0.25), transparent),
        radial-gradient(1px 1px at 35% 75%, rgba(255,255,255,0.3), transparent),
        radial-gradient(1.5px 1.5px at 90% 55%, rgba(255,255,255,0.2), transparent),
        radial-gradient(1px 1px at 25% 50%, rgba(255,255,255,0.15), transparent),
        radial-gradient(1px 1px at 70% 90%, rgba(255,255,255,0.2), transparent),
        rgba(0,0,0,0.55);
}

/* 卡片: 磨砂玻璃 + 渐变光带顶边 */
.login-modal-content {
    padding: 40px 28px 24px;
    position: relative;
    background: rgba(255,255,255,0.88);
    backdrop-filter: blur(20px) saturate(1.2);
    -webkit-backdrop-filter: blur(20px) saturate(1.2);
    border-radius: 20px;
    box-shadow: 0 24px 80px rgba(74,111,98,0.18), 0 0 0 1px rgba(255,255,255,0.5) inset;
    animation: floatUp 0.4s cubic-bezier(0.16, 1, 0.3, 1);
    overflow: visible;
}
.login-modal-content::before {
    content: '';
    position: absolute;
    top: 0; left: 10%; right: 10%;
    height: 2px;
    background: linear-gradient(90deg, transparent, var(--primary), var(--accent), transparent);
    border-radius: 2px;
    opacity: 0.8;
}

/* 关闭按钮: 悬停旋转 */
.login-modal-close {
    position: absolute; top: 12px; right: 14px;
    width: 32px; height: 32px; display: flex; align-items: center; justify-content: center;
    border: none; background: rgba(0,0,0,0.05); color: var(--text-muted);
    font-size: 15px; cursor: pointer; border-radius: 50%;
    transition: transform 0.3s ease, background 0.2s ease, color 0.2s ease;
    z-index: 2;
}
.login-modal-close:hover {
    transform: rotate(90deg);
    background: rgba(0,0,0,0.1);
    color: var(--text);
}

/* 头部: Logo + 标题 + Slogan */
.login-modal-header { text-align: center; margin-bottom: 28px; }
.login-modal-logo {
    font-size: 44px; margin-bottom: 8px; line-height: 1;
    display: flex; align-items: center; justify-content: center;
    /* V3.3.23修复: 用SVG太极替代☯ emoji(background-clip:text在iOS对emoji失效显示色块) */
    filter: drop-shadow(0 2px 8px rgba(74,111,98,0.25));
    animation: logoGlow 3s ease-in-out infinite;
}
.login-modal-logo svg { width: 40px; height: 40px; display: block; }
/* V3.3.23: 登录提示logo(未登录"我的"页)也容纳SVG */
.login-prompt-logo {
    display: flex; align-items: center; justify-content: center;
    margin: 0 auto 12px;
    filter: drop-shadow(0 2px 8px rgba(74,111,98,0.25));
}
.login-prompt-logo svg { width: 40px; height: 40px; display: block; }
.login-modal-content h3 {
    font-size: 22px; font-weight: 700; letter-spacing: 2px;
    font-family: var(--font-serif);
    color: var(--text); margin-bottom: 4px;
}
.login-modal-slogan {
    font-size: 11px; color: var(--text-muted);
    letter-spacing: 3px; text-transform: uppercase;
}

/* 输入区 */
.login-modal-body { display: flex; flex-direction: column; gap: 30px; }

/* 浮动标签输入字段 */
.login-field { position: relative; }
.login-field-input-wrap {
    position: relative;
    display: flex;
    align-items: center;
    border-bottom: 2px solid var(--border);
    transition: border-color 0.3s ease;
}
.login-field-input-wrap::after {
    content: '';
    position: absolute;
    bottom: -2px; left: 50%;
    width: 0; height: 2px;
    background: linear-gradient(90deg, var(--primary), var(--accent));
    transition: width 0.3s ease, left 0.3s ease;
}
.login-field-input-wrap:focus-within {
    border-bottom-color: transparent;
}
.login-field-input-wrap:focus-within::after {
    width: 100%; left: 0;
}
.login-field-prefix {
    font-size: 15px; font-weight: 600; color: var(--text-secondary);
    padding-right: 10px; margin-right: 10px;
    border-right: 1px solid var(--border);
    flex-shrink: 0;
}
.login-field-input {
    flex: 1;
    width: 100%;
    padding: 10px 0;
    border: none !important;
    background: transparent !important;
    color: var(--text);
    font-size: 15px;
    font-family: var(--font);
    outline: none;
    box-sizing: border-box;
    border-radius: 0;
}
/* V3.0修复: 彻底清除全局input:focus对登录输入框的边框干扰 */
.login-field-input:focus,
.login-modal-content .login-field-input:focus {
    border: none !important;
    outline: none;
    background: transparent !important;
}
.login-field-input::placeholder { color: transparent; }
.login-field-label {
    position: absolute;
    top: 50%;
    left: 0;
    transform: translateY(-50%);
    font-size: 14px;
    color: var(--text-muted);
    pointer-events: none;
    transition: all 0.25s cubic-bezier(0.4, 0, 0.2, 1);
    background: transparent;
    padding: 0 2px;
    z-index: 1;
}
.login-field-has-prefix .login-field-label { left: 53px; }
.login-field-input:focus ~ .login-field-label,
.login-field-input:not(:placeholder-shown) ~ .login-field-label {
    top: -19px;
    transform: translateY(0);
    font-size: 11px;
    font-weight: 600;
    color: var(--primary);
    left: 0;
}
.login-field-has-prefix .login-field-input:focus ~ .login-field-label,
.login-field-has-prefix .login-field-input:not(:placeholder-shown) ~ .login-field-label {
    left: 0;
}

/* 验证码输入行 */
.login-field-code-row { gap: 10px; }
.login-field-code-row .sms-code-btn {
    flex-shrink: 0;
    padding: 8px 16px;
    font-size: 12px;
    border-radius: 20px;
    border: 1px solid var(--primary);
    background: transparent;
    color: var(--primary);
    transition: all 0.2s ease;
    min-width: 92px;
    text-align: center;
    box-sizing: border-box;
}
.login-field-code-row .sms-code-btn:hover:not(:disabled) {
    background: var(--primary);
    color: #fff;
}
.login-field-code-row .sms-code-btn:disabled {
    cursor: not-allowed;
    border-color: var(--border);
    color: var(--primary);
    opacity: 1;
}

/* 登录按钮: 渐变 + 微光扫描 */
.login-modal-btn-row { margin-top: 4px; }
.login-submit-btn {
    flex: 1;
    width: 100%;
    padding: 13px 24px;
    font-size: 16px;
    font-weight: 600;
    letter-spacing: 4px;
    border: none;
    border-radius: 12px;
    background: linear-gradient(135deg, var(--primary), #3E7C67);
    color: #fff;
    cursor: pointer;
    position: relative;
    overflow: hidden;
    transition: transform 0.2s ease, box-shadow 0.3s ease, background 0.3s ease;
    box-shadow: 0 4px 16px rgba(74,111,98,0.25);
}
.login-submit-btn::after {
    content: '';
    position: absolute;
    top: 0; bottom: 0; left: -150%;
    width: 150%; height: 100%;
    transform: none;
    background: linear-gradient(120deg, transparent 30%, rgba(255,255,255,0.25) 50%, transparent 70%);
    animation: shimmer 3s infinite;
    pointer-events: none;
}
.login-submit-btn:hover:not(:disabled) {
    background: linear-gradient(135deg, #3E7C67, #2D5F4E);
    box-shadow: 0 8px 24px rgba(74,111,98,0.35);
}
.login-submit-btn:active:not(:disabled) {
    transform: scale(0.98);
}
.login-submit-btn:disabled { cursor: not-allowed; opacity: 0.8; }

/* 加载旋转圈 */
.login-btn-loading { display: inline-flex; align-items: center; gap: 6px; }
.login-spinner {
    display: inline-block;
    width: 14px; height: 14px;
    border: 2px solid rgba(255,255,255,0.3);
    border-top-color: #fff;
    border-radius: 50%;
    animation: spin 0.6s linear infinite;
}

/* 底部: 协议 + 开发提示 + 安全锁 */
.login-modal-footer {
    margin-top: 20px;
    text-align: center;
}
.login-agreement {
    font-size: 12px;
    color: var(--text-muted);
    line-height: 1.5;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    flex-wrap: wrap;
}
.login-agreement a {
    color: var(--primary);
    text-decoration: none;
}
.login-agreement a:hover { text-decoration: underline; }

/* V3.1.2: 自定义勾选框 */
.login-checkbox-wrap {
    position: relative;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    flex-shrink: 0;
    width: 16px;
    height: 16px;
}
.login-checkbox-wrap input[type="checkbox"] {
    position: absolute;
    opacity: 0;
    width: 16px;
    height: 16px;
    margin: 0;
    cursor: pointer;
    z-index: 2;
    top: 0;
    left: 0;
}
.login-checkbox-box {
    width: 16px;
    height: 16px;
    border: 1.5px solid var(--primary);
    border-radius: 4px;
    background: #fff;
    position: relative;
    transition: all 0.2s ease;
    box-shadow: 0 1px 2px rgba(74, 111, 98, 0.1);
    display: block;
    box-sizing: border-box;
}
.login-checkbox-box::after {
    content: '';
    position: absolute;
    left: 0; top: 0;
    width: 100%; height: 100%;
    background: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="white" stroke-width="3.5" stroke-linecap="round" stroke-linejoin="round"><polyline points="20 6 9 17 4 12"></polyline></svg>') center / 11px no-repeat;
    transform: scale(0);
    transition: transform 0.18s ease;
}
.login-checkbox-wrap input[type="checkbox"]:checked + .login-checkbox-box {
    background: var(--primary);
    border-color: var(--primary);
}
.login-checkbox-wrap input[type="checkbox"]:checked + .login-checkbox-box::after {
    transform: scale(1);
}
.login-checkbox-box.just-checked {
    animation: justCheckedPulse 0.6s ease;
}
@keyframes justCheckedPulse {
    0%   { transform: scale(1); box-shadow: 0 0 0 0 rgba(74, 111, 98, 0.5); }
    40%  { transform: scale(1.25); box-shadow: 0 0 0 8px rgba(74, 111, 98, 0); }
    100% { transform: scale(1); box-shadow: 0 0 0 0 rgba(74, 111, 98, 0); }
}

/* V3.1.2: 未勾选时晃动提示 */
.login-agreement.shake {
    animation: loginAgreementShake 0.6s ease;
}
@keyframes loginAgreementShake {
    0%, 100% { transform: translateX(0); }
    10%, 30%, 50%, 70%, 90% { transform: translateX(-5px); }
    20%, 40%, 60%, 80% { transform: translateX(5px); }
}
[data-theme="dark"] .login-checkbox-box {
    background: #2a2a2a;
    border-color: var(--primary);
}
[data-theme="dark"] .login-checkbox-wrap input[type="checkbox"]:checked + .login-checkbox-box {
    background: var(--primary);
}
.login-security {
    margin-top: 10px;
    font-size: 10px;
    color: var(--text-muted);
    opacity: 0.6;
}

/* 暗色主题适配 */
[data-theme="dark"] .login-modal.active {
    background:
        radial-gradient(1.5px 1.5px at 15% 25%, rgba(255,255,255,0.25), transparent),
        radial-gradient(1px 1px at 55% 65%, rgba(255,255,255,0.2), transparent),
        radial-gradient(2px 2px at 80% 15%, rgba(255,255,255,0.15), transparent),
        radial-gradient(1px 1px at 35% 75%, rgba(255,255,255,0.2), transparent),
        rgba(0,0,0,0.7);
}
[data-theme="dark"] .login-modal-content {
    background: rgba(34,46,41,0.92);
    box-shadow: 0 24px 80px rgba(0,0,0,0.4), 0 0 0 1px rgba(255,255,255,0.05) inset;
}
[data-theme="dark"] .login-modal-close {
    background: rgba(255,255,255,0.05);
}
[data-theme="dark"] .login-modal-close:hover {
    background: rgba(255,255,255,0.1);
}
[data-theme="dark"] .login-field-prefix {
    color: var(--text-secondary);
}
[data-theme="dark"] .login-submit-btn {
    background: linear-gradient(135deg, #7EB8A0, #5A9A82);
    box-shadow: 0 4px 16px rgba(126,184,160,0.2);
}
[data-theme="dark"] .login-submit-btn:hover:not(:disabled) {
    background: linear-gradient(135deg, #5A9A82, #4A8A72);
}

/* 响应式: 移动端 */
@media (max-width: 640px) {
    .login-modal { padding: 16px; align-items: center; }
    .login-modal.active { align-items: center; }
    .login-modal-content { padding: 32px 20px 20px; max-width: 100%; }
    .login-modal-logo { font-size: 38px; }
    .login-modal-content h3 { font-size: 20px; }
    .login-field-input { font-size: 16px; padding: 14px 0; }
    .login-field-prefix { font-size: 16px; }
}

/* 无障碍: 焦点轮廓(输入框不添加outline,避免与底边渐变线冲突产生多余横线) */
.login-field-input:focus { outline: none; }
.login-field-input:focus-visible { outline: none; }
.login-submit-btn:focus-visible {
    outline: 2px solid var(--primary);
    outline-offset: 3px;
}
.login-modal-close:focus-visible {
    outline: 2px solid var(--primary);
    outline-offset: 2px;
}

/* 动画关键帧 */
@keyframes logoGlow {
    0%, 100% { filter: drop-shadow(0 2px 8px rgba(74,111,98,0.25)); }
    50% { filter: drop-shadow(0 2px 14px rgba(74,111,98,0.45)); }
}
@keyframes shimmer {
    0% { left: -150%; }
    100% { left: 100%; }
}
@keyframes spin {
    to { transform: rotate(360deg); }
}

/* 降低动效偏好 */
@media (prefers-reduced-motion: reduce) {
    .login-modal-content { animation: none; }
    .login-modal-logo { animation: none; }
    .login-submit-btn::after { animation: none; }
    .login-spinner { animation-duration: 1s; }
    .login-modal-close { transition: none; }
}

/* ===== V3.0优化: 用户协议/隐私政策弹窗 ===== */
.legal-doc-modal {
    position: fixed; top: 0; left: 0; width: 100%; height: 100%;
    background: rgba(0,0,0,0.55);
    display: flex; align-items: center; justify-content: center;
    z-index: 1002; padding: 20px;
    backdrop-filter: blur(4px);
    -webkit-backdrop-filter: blur(4px);
}
.legal-doc-content {
    background: var(--card-bg);
    border-radius: 16px;
    width: 100%; max-width: 560px;
    max-height: 85vh;
    display: flex; flex-direction: column;
    box-shadow: 0 24px 80px rgba(0,0,0,0.2);
    position: relative;
    overflow: hidden;
    animation: floatUp 0.3s ease;
}
.legal-doc-close {
    position: absolute; top: 14px; right: 16px;
    width: 32px; height: 32px; display: flex; align-items: center; justify-content: center;
    border: none; background: var(--bg); color: var(--text-muted);
    font-size: 15px; cursor: pointer; border-radius: 50%;
    transition: var(--transition); z-index: 2;
}
.legal-doc-close:hover {
    transform: rotate(90deg);
    background: var(--border); color: var(--text);
}
.legal-doc-title {
    padding: 28px 32px 4px;
    font-size: 20px; font-weight: 700;
    /* V3.3.24: 统一用无衬线var(--font),与章节标题一致,加粗观感统一(原衬线在部分设备700不渲染) */
    font-family: var(--font);
    color: var(--text); text-align: center;
    letter-spacing: 1px;
}
.legal-doc-updated {
    text-align: center; font-size: 11px; color: var(--text-muted);
    padding: 0 32px 16px;
    border-bottom: 1px solid var(--border);
}
.legal-doc-body {
    padding: 20px 32px;
    overflow-y: auto;
    flex: 1;
}
.legal-doc-h {
    font-size: 14px; font-weight: 700;
    color: var(--primary);
    margin: 18px 0 8px;
}
.legal-doc-h:first-child { margin-top: 0; }
.legal-doc-p {
    font-size: 13px; line-height: 1.75;
    color: var(--text-secondary);
    margin: 0 0 12px;
    text-align: justify;
}
.legal-doc-footer {
    padding: 16px 32px 24px;
    border-top: 1px solid var(--border);
    text-align: center;
}
.legal-doc-agree-btn {
    padding: 10px 40px; font-size: 14px; font-weight: 600;
    letter-spacing: 2px;
}
@media (max-width: 640px) {
    .legal-doc-modal { padding: 12px; }
    .legal-doc-content { max-height: 90vh; }
    .legal-doc-title { padding: 20px 20px 4px; font-size: 18px; }
    .legal-doc-updated { padding: 0 20px 12px; }
    .legal-doc-body { padding: 16px 20px; }
    .legal-doc-footer { padding: 12px 20px 18px; }
}

/* V3.3.24: 手机端隐私协议改为全屏页面(非窗口),返回按钮与标题垂直对齐 */
@media (max-width: 768px) {
    .legal-doc-modal {
        padding: 0 !important;
        align-items: stretch !important;
        justify-content: stretch !important;
        background: var(--bg);
        -webkit-backdrop-filter: none;
        backdrop-filter: none;
    }
    .legal-doc-content {
        width: 100% !important;
        max-width: 100% !important;
        height: 100vh; height: 100dvh;
        max-height: 100vh; max-height: 100dvh;
        border-radius: 0 !important;
        padding-top: env(safe-area-inset-top, 0px);
        padding-bottom: env(safe-area-inset-bottom, 0px);
    }
    /* 标题左右留出返回按钮空间,顶部内边距使标题与返回按钮(32px, top 12px)垂直对齐 */
    .legal-doc-title { padding: 20px 56px 4px; font-size: 17px; }
    .legal-doc-updated { padding: 0 20px 12px; }
    /* 返回按钮: 左上角,箭头图标,与标题垂直居中对齐 */
    .legal-doc-close {
        position: absolute !important;
        top: calc(12px + env(safe-area-inset-top, 0px)) !important;
        left: 8px !important; right: auto !important;
        width: 32px !important; height: 32px !important;
        display: flex !important; align-items: center !important; justify-content: center !important;
        padding: 0 !important; box-shadow: none !important;
        border: none !important; background: transparent !important;
        font-size: 0 !important; color: var(--text-secondary) !important;
        border-radius: 8px !important; z-index: 10 !important;
    }
    .legal-doc-close::before { content: none !important; }
    .legal-doc-close::after {
        content: '' !important; display: block; width: 16px; height: 16px;
        background: currentColor;
        -webkit-mask: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='currentColor' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'><polyline points='15 18 9 12 15 6'></polyline></svg>") center / contain no-repeat;
        mask: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='currentColor' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'><polyline points='15 18 9 12 15 6'></polyline></svg>") center / contain no-repeat;
    }
}

.profile-stat { text-align: center; padding-left: 12px; border-left: 1px solid var(--border); }
.profile-stat-num { display: block; font-size: 20px; font-weight: 700; color: var(--primary); }
.profile-stat-label { font-size: 11px; color: var(--text-muted); }
.menu-tag { font-size: 10px; padding: 2px 8px; border-radius: 8px; margin-left: 6px; background: var(--bg); color: var(--text-muted); font-weight: 600; white-space: nowrap; }
.menu-tag.none { background: var(--bg); color: var(--text-muted); }
.menu-tag.monthly { background: #DBEAFE; color: #1D4ED8; }
.menu-tag.yearly { background: #FEF3C7; color: #B45309; }

.profile-detail-header { display: flex; align-items: center; gap: 10px; padding: 12px 16px; }
.profile-detail-header h3 { font-size: 16px; }
.profile-back-btn { background: transparent; border: none; font-size: 18px; color: var(--text-secondary); cursor: pointer; padding: 4px 8px; }

.profile-id-card { background: var(--card-bg); border: 1px solid var(--border); border-radius: var(--radius-sm); padding: 14px; margin-bottom: 10px; }
.profile-id-head { display: flex; align-items: center; gap: 12px; }
.profile-id-icon {
    width: 40px; height: 40px; flex-shrink: 0;
    display: inline-flex; align-items: center; justify-content: center;
    background: transparent; border-radius: 0;
    font-size: 24px; line-height: 1;
}
.profile-id-info { flex: 1; min-width: 0; display: flex; align-items: center; gap: 6px; }
.profile-id-info strong { font-size: 15px; flex: 0 1 auto; min-width: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; line-height: 1.4; margin-left: -4px; }
.profile-id-info .tag { margin-left: 0; font-size: 10px; padding: 2px 8px; line-height: 1.5; }
.tag { font-size: 11px; padding: 3px 10px; border-radius: 10px; background: var(--primary-bg); color: var(--primary); margin-left: auto; font-weight: 600; flex-shrink: 0; line-height: 1.4; white-space: nowrap; }
.self-tag { background: #FEF3C7; color: #92400E; }
.profile-id-meta { display: flex; flex-wrap: wrap; gap: 6px 14px; margin-top: 10px; padding-top: 10px; border-top: 1px dashed var(--border); align-items: center; }
.profile-meta-item { font-size: 12px; color: var(--text-secondary); display: inline-flex; align-items: center; gap: 3px; }
.del-profile-btn { color: #DC2626; margin-top: 6px; font-size: 11px; }
.profile-tip { font-size: 12px; color: var(--text-muted); margin-top: 12px; line-height: 1.6; }

/* V3.0优化: 通讯录卡片操作按钮 */
.profile-card-actions { display: flex; gap: 6px; flex-shrink: 0; width: 66px; justify-content: flex-end; }
.profile-action-btn { width: 30px; height: 30px; display: flex; align-items: center; justify-content: center; border: 1px solid var(--border); border-radius: var(--radius-sm); background: var(--card-bg); color: var(--text-muted); cursor: pointer; transition: var(--transition); padding: 0; }
.profile-action-btn:hover { border-color: var(--primary); color: var(--primary); background: var(--primary-bg); }
.profile-action-btn.del-btn:hover { border-color: #DC2626; color: #DC2626; background: rgba(220,38,38,0.06); }

/* PC端: 关系信息弹窗「添加关系」按钮下移3px(仅作用于电脑端,移动端媒体查询内覆盖) */
@media (min-width: 769px) {
    #contactsModal > .v3-page-modal-content > .v3-page-modal-body .btn-full.btn-primary {
        margin-top: 6px;
    }
}

/* V3.0优化: 身份编辑弹窗 */
.profile-edit-close { position: absolute; top: 12px; right: 14px; width: 30px; height: 30px; display: flex; align-items: center; justify-content: center; border: none; background: var(--bg); color: var(--text-muted); font-size: 16px; cursor: pointer; border-radius: 50%; transition: var(--transition); z-index: 1; }
.profile-edit-close:hover { background: var(--border); color: var(--text); }
.profile-edit-modal.force-mode { background: rgba(0,0,0,0.7); z-index: 1001; }
/* V3.0优化: 标题行(标题在最左侧,阳历阴历切换器在标题右侧) - 整体比例缩小 */
.profile-edit-header { display: flex; align-items: center; gap: 8px; margin-bottom: 12px; padding-right: 36px; }
.profile-edit-header h3 { margin: 0; font-size: 15px; line-height: 24px; }
.profile-edit-notice { font-size: 13px; color: var(--text-secondary); background: var(--primary-bg); padding: 10px 14px; border-radius: var(--radius-sm); margin-bottom: 16px; border-left: 3px solid var(--primary); line-height: 1.6; }
/* V3.3.0: 渠道码说明文字 */
.channel-hint { font-size: 12px; color: var(--text-muted); margin: 6px 0 0; line-height: 1.5; }
.profile-date-picker { display: flex; gap: 8px; }
.profile-date-picker .select-arrow-wrap { flex: 1; min-width: 0; }
/* V3.1.70: 出生日期(阳历/阴历)下拉框对齐出生城市盒子样式 */
.profile-date-picker select { width: 100%; padding: 9px 11px; border: 1px solid var(--border); border-radius: 8px; color: var(--text); font-size: 14px; font-family: var(--font); outline: none; cursor: pointer; appearance: none; -webkit-appearance: none; }
.profile-date-picker select:focus { border-color: var(--primary); box-shadow: 0 0 0 3px rgba(74, 111, 98, 0.1); }

/* V4修复: 出生时辰+分钟行(时辰下拉与分钟下拉并排,对齐日期选择器样式) */
.profile-time-row { display: flex; gap: 8px; }
.profile-time-row .custom-select-wrap { flex: 1; min-width: 0; }

/* V3.0优化: 城市下拉面板使用 fixed 定位透出弹窗(避免撑大弹窗) */
.profile-edit-modal-content .city-tree-panel {
    position: fixed;
    max-height: 320px;
    overflow-y: auto;
    box-shadow: 0 8px 24px rgba(0,0,0,0.2);
    border: 1px solid var(--border);
    z-index: 1002;
    background: var(--card-bg);
    border-radius: var(--radius-sm);
}
.profile-edit-modal-content .city-tree-list {
    max-height: 280px;
}

/* V3.0优化: 阳历/阴历切换按钮 - 高度与标题一致,整体比例缩小 */
.profile-calendar-toggle {
    display: inline-flex;
    align-items: center;
    gap: 3px;
    padding: 3px 10px;
    border: 1px solid var(--border);
    border-radius: 12px;
    background: var(--bg);
    color: var(--text-secondary);
    font-size: 13px;
    line-height: 18px;
    cursor: pointer;
    transition: var(--transition);
    font-family: var(--font);
    height: 24px;
    box-sizing: border-box;
}
.profile-calendar-toggle:hover { border-color: var(--primary); color: var(--primary); }
.profile-calendar-toggle .toggle-icon { font-size: 14px; transition: transform 0.3s; }
.profile-calendar-toggle.active { background: var(--primary-bg); border-color: var(--primary); color: var(--primary); }
.profile-calendar-toggle.active .toggle-icon { transform: rotate(180deg); }
/* V3.0优化: label 与阳历/阴历切换按钮同一行(对齐出生时辰列高度) */
.profile-label-row { display: flex; align-items: center; justify-content: space-between; margin-bottom: 6px; }
.profile-label-row label { margin: 0; }
.profile-calendar-row { display: flex; align-items: center; gap: 8px; margin-bottom: 6px; }
.profile-calendar-row label { margin: 0; }
.profile-lunar-picker { display: flex; gap: 8px; }
.profile-lunar-picker .select-arrow-wrap { flex: 1; min-width: 0; }
/* V3.1.70: 出生日期(阴历)下拉框对齐出生城市盒子样式 */
.profile-lunar-picker select { width: 100%; padding: 9px 11px; border: 1px solid var(--border); border-radius: 8px; color: var(--text); font-size: 14px; font-family: var(--font); outline: none; cursor: pointer; appearance: none; -webkit-appearance: none; }
.profile-lunar-picker select:focus { border-color: var(--primary); box-shadow: 0 0 0 3px rgba(74, 111, 98, 0.1); }
.profile-lunar-picker.hidden, .profile-date-picker.hidden { display: none; }

/* ===== V3.1.71: 自定义下拉组件(身份/出生日期/时辰/性别)对齐出生城市样式 ===== */
/* 容器:相对定位;开放时提升层级 */
.custom-select-wrap {
    position: relative;
    z-index: 1;
}
.custom-select-wrap.open { z-index: 150; }
/* 日期行内的三个下拉各占一份 */
.profile-date-picker .custom-select-wrap,
.profile-lunar-picker .custom-select-wrap { flex: 1; min-width: 0; }
/* V3.1.75: 年字段加宽(调整减半),月/日相应收窄,三字段总长不变,确保"XXXX年"完整展示 */
.profile-date-picker .custom-select-wrap:nth-child(1),
.profile-lunar-picker .custom-select-wrap:nth-child(1) { flex: 1.2; }
.profile-date-picker .custom-select-wrap:nth-child(2),
.profile-lunar-picker .custom-select-wrap:nth-child(2) { flex: 0.9; }
.profile-date-picker .custom-select-wrap:nth-child(3),
.profile-lunar-picker .custom-select-wrap:nth-child(3) { flex: 0.9; }
/* 隐藏旧版叠加箭头(原 .select-arrow 已不再需要) */
.custom-select-wrap > .select-arrow { display: none; }

/* 触发器:与 .city-tree-trigger 外观一致 */
.custom-select-trigger {
    display: flex;
    align-items: center;
    justify-content: space-between;
    white-space: nowrap;
    padding: 9px 11px;
    border: 1px solid var(--border);
    border-radius: 8px;
    color: var(--text);
    font-size: 14px;
    background: color-mix(in srgb, var(--text) 6%, transparent);
    font-family: var(--font);
    cursor: pointer;
    min-height: 40px;
    transition: border-color 0.2s;
    box-sizing: border-box;
    user-select: none;
    -webkit-tap-highlight-color: transparent;
}
.custom-select-wrap:hover .custom-select-trigger { border-color: var(--primary-light); }
.custom-select-wrap.open .custom-select-trigger {
    border-color: var(--primary);
    box-shadow: 0 0 0 3px rgba(74, 111, 98, 0.1);
}
.custom-select-trigger .cs-placeholder {
    color: #aaa;
    -webkit-text-fill-color: #aaa;
    font-size: 14px;
}
.custom-select-trigger.has-value .cs-placeholder {
    color: var(--text);
    -webkit-text-fill-color: var(--text);
}
.custom-select-trigger .cs-arrow {
    font-size: 10px;
    color: var(--text-muted);
    opacity: 0.8;
    transition: transform 0.2s;
    line-height: 1;
}
.custom-select-wrap.open .cs-arrow { transform: rotate(180deg); }

/* 禁用态 */
.custom-select-wrap.disabled .custom-select-trigger {
    opacity: 0.55;
    cursor: not-allowed;
    background: color-mix(in srgb, var(--text) 3%, transparent);
}
.custom-select-wrap.disabled .custom-select-trigger:hover { border-color: var(--border); }

/* 面板:fixed 定位透出弹窗,与 .city-tree-panel 风格一致 */
.custom-select-panel {
    position: fixed;
    background: var(--card-bg);
    border-radius: 8px;
    box-shadow: 0 8px 24px rgba(0,0,0,0.2);
    max-height: 280px;
    overflow-y: auto;
    z-index: 150;
    box-sizing: border-box;
    display: none;
    border: 1px solid var(--border);
}
.custom-select-wrap.open .custom-select-panel { display: block; }

/* 选项列表 */
.custom-select-options { padding: 4px 0; }
.custom-select-option {
    padding: 10px 12px;
    font-size: 14px;
    color: var(--text);
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: space-between;
    white-space: nowrap;
    transition: background 0.15s;
}
.custom-select-option:hover { background: color-mix(in srgb, var(--primary) 8%, transparent); }
.custom-select-option.selected {
    background: color-mix(in srgb, var(--primary) 14%, transparent);
    color: var(--primary);
    font-weight: 600;
}
.custom-select-option .cs-check { color: var(--primary); font-size: 12px; opacity: 0; }
.custom-select-option.selected .cs-check { opacity: 1; }

/* V3.0优化: 通用确认弹窗 */
.v3-confirm-modal { position: fixed; inset: 0; background: rgba(0,0,0,0.5); display: none; align-items: center; justify-content: center; z-index: 1002; padding: 20px; }
.v3-confirm-modal.active { display: flex; }
.v3-confirm-content { background: var(--card-bg); border-radius: var(--radius); padding: 28px 24px 24px; max-width: 360px; width: 100%; text-align: center; box-shadow: 0 20px 60px rgba(0,0,0,0.3); animation: floatUp 0.3s ease; }
.v3-confirm-icon { font-size: 36px; margin-bottom: 12px; }
.v3-confirm-content h3 { font-size: 17px; font-weight: 600; color: var(--text); margin-bottom: 8px; }
.v3-confirm-content p { font-size: 13px; color: var(--text-secondary); line-height: 1.6; margin-bottom: 20px; }
.v3-confirm-btns { display: flex; gap: 10px; }
.v3-confirm-btns button { flex: 1; padding: 10px 16px; font-size: 14px; border-radius: var(--radius-sm); cursor: pointer; transition: var(--transition); border: none; font-family: var(--font); font-weight: 500; }
.v3-confirm-btns .btn-outline { border: 1px solid var(--border); background: var(--card-bg); color: var(--text); }
.v3-confirm-btns .btn-outline:hover { background: var(--bg); }
.v3-confirm-btns .btn-danger { background: #DC2626; color: #fff; }
.v3-confirm-btns .btn-danger:hover { background: #B91C1C; }

.report-card { display: flex; align-items: center; gap: 12px; padding: 12px; background: var(--bg); border-radius: var(--radius-sm); margin-bottom: 10px; }
.report-card-icon { width: 40px; height: 40px; border-radius: 0; display: flex; align-items: center; justify-content: center; font-size: 35px; flex-shrink: 0; background: transparent; }
.report-card-avatar-img { width: 40px; height: 40px; object-fit: contain; border-radius: 50%; }
.report-card-icon .comp-bazi-report-icon svg { width: 27px; height: 27px; display: block; }
.report-card-info { flex: 1; }
.report-card-name { font-size: 14px; font-weight: 600; color: var(--text); display: flex; align-items: center; flex-wrap: wrap; gap: 10px; margin-left: -3.5px; }
.report-relation-tag { font-size: 11px; font-weight: 400; color: var(--text-secondary); background: var(--primary-bg); padding: 1px 7px; border-radius: 8px; line-height: 1.5; }
.report-card-time { font-size: 12px; color: var(--text-muted); margin-top: 2px; }
.report-view-btn { padding: 6px 16px; border-radius: var(--radius-sm); background: var(--primary); color: #fff; font-size: 13px; font-weight: 600; text-decoration: none; transition: var(--transition); flex-shrink: 0; }
.report-view-btn:hover { background: var(--primary-dark, #3D5F50); transform: translateY(-1px); box-shadow: 0 4px 12px rgba(74,111,98,0.25); }

.membership-card { padding: 16px; }
.sub-card { border: 1px solid var(--border); border-radius: var(--radius-sm); padding: 8px 10px; margin-bottom: 5px; }
.sub-card.active { border-color: #16A34A; background: rgba(22,163,74,0.04); }
.sub-card.expired { border-color: var(--border); opacity: 0.7; }
.sub-card-head { display: flex; align-items: center; gap: 8px; }
.sub-icon { font-size: 18px; }
.sub-info { flex: 1; }
.sub-info strong { font-size: 13px; display: block; }
.sub-info small { font-size: 10px; color: var(--text-muted); }
.sub-status { font-size: 10px; padding: 2px 6px; border-radius: 8px; }
.sub-status.active { background: #DCFCE7; color: #16A34A; }
.sub-status.expired { background: var(--bg); color: var(--text-muted); }
.sub-expire { font-size: 12px; color: var(--text-secondary); margin-top: 8px; }
.membership-cta { background: linear-gradient(135deg, var(--primary-bg), rgba(74,111,98,0.15)); border-radius: var(--radius); padding: 16px; margin-top: 12px; }
.membership-cta-title { font-size: 16px; font-weight: 600; color: var(--primary); margin-bottom: 10px; }
.membership-cta-features { margin-bottom: 12px; }
.mem-feature { font-size: 12px; color: var(--text-secondary); padding: 4px 0; }

.feedback-content-wide {
    max-width: 560px; max-height: 85vh; overflow-y: auto;
    padding: 32px 28px;
}
.feedback-content-wide h3 { font-size: 20px; margin-bottom: 8px; }
.feedback-content-wide .form-group { margin-bottom: 16px; }
.feedback-content-wide textarea {
    min-height: 100px; resize: vertical; line-height: 1.6;
}
.feedback-content-wide .char-count { text-align: right; font-size: 11px; color: var(--text-muted); margin-top: 4px; }

/* V3.0优化: 反馈表单精细化设计 */
.fb-intro {
    font-size: 13px; color: var(--text-secondary); line-height: 1.7;
    padding: 12px 16px; background: var(--primary-bg, rgba(74,111,98,0.06));
    border-radius: var(--radius-sm); margin-bottom: 20px;
    border-left: 3px solid var(--primary);
}
.fb-label { display: block; font-size: 13px; color: var(--text); margin-bottom: 8px; font-weight: 600; }
.fb-category-section { margin-bottom: 20px; }
.fb-category-grid {
    display: grid; grid-template-columns: repeat(4, 1fr); gap: 8px;
}
.fb-category-item {
    display: flex; flex-direction: column; align-items: center; gap: 4px;
    padding: 12px 8px; border: 2px solid var(--border); border-radius: var(--radius-sm);
    cursor: pointer; transition: var(--transition); font-size: 12px; color: var(--text-secondary);
    background: var(--card-bg); text-align: center;
}
.fb-category-item:hover { border-color: var(--primary); color: var(--primary); }
.fb-category-item.active {
    border-color: var(--primary); background: var(--primary-bg, rgba(74,111,98,0.08));
    color: var(--primary); font-weight: 600;
}
.fb-cat-icon { font-size: 20px; }
#feedbackModal .form-group { margin-bottom: 16px; }
#feedbackModal .form-row { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; margin-bottom: 0; }
#feedbackModal .form-row .form-group { margin-bottom: 0; }
#feedbackModal textarea {
    width: 100%; padding: 12px 14px; border: 1px solid var(--border);
    border-radius: var(--radius-sm); background: #fff; color: var(--text);
    font-size: 14px; font-family: var(--font); outline: none; box-sizing: border-box;
    min-height: 100px; resize: vertical; line-height: 1.7;
}
#feedbackModal textarea:focus { border-color: var(--primary); }
#feedbackModal input {
    width: 100%; padding: 10px 14px; border: 1px solid var(--border);
    border-radius: var(--radius-sm); background: #fff; color: var(--text);
    font-size: 14px; font-family: var(--font); outline: none; box-sizing: border-box;
}
#feedbackModal input:focus { border-color: var(--primary); }
[data-theme="dark"] #feedbackModal textarea { background: var(--bg); }
[data-theme="dark"] #feedbackModal input { background: var(--bg); }

.feedback-history-section { margin-top: 0; }
.feedback-history-section h4 { font-size: 15px; font-weight: 700; margin-bottom: 12px; color: var(--text); }
/* V3.0优化: 问题反馈列表固定宽度,完整展示内容,提交按钮可见 */
#feedbackModal .v3-page-modal-content { max-width: 560px; }
#feedbackModal .v3-page-modal-body { padding: 14px 24px 16px; }
#feedbackModal .fb-tab-content.active { display: flex; flex-direction: column; }
#feedbackModal #fbSubmitTab { min-height: 0; }
#feedbackModal .fb-intro { font-size: 12px; color: var(--text-muted); line-height: 1.5; margin-bottom: 8px; padding: 6px 10px; background: var(--bg); border-radius: 8px; }
#feedbackModal .fb-category-section { margin-bottom: 8px; }
#feedbackModal .fb-label { display: block; font-size: 13px; font-weight: 600; color: var(--text); margin-bottom: 4px; }
#feedbackModal textarea { width: 100%; resize: vertical; min-height: 60px; max-height: 140px; }
/* V3.0优化: 字数统计放入描述框内 */
#feedbackModal .fb-textarea-wrap { position: relative; }
#feedbackModal .fb-textarea-wrap textarea { padding-bottom: 22px; }
#feedbackModal .fb-char-count { position: absolute; bottom: 6px; right: 10px; margin-top: 0; font-size: 11px; color: var(--text-muted); background: rgba(255,255,255,0.85); padding: 1px 6px; border-radius: 4px; pointer-events: none; }
[data-theme="dark"] #feedbackModal .fb-char-count { background: rgba(50,50,50,0.85); }
/* V3.0优化: 问题描述与手机号之间自适应间距 */
#feedbackModal .fb-content-group { margin-bottom: 14px; }
#feedbackModal .form-row { gap: 12px; margin-bottom: 4px; }
#feedbackModal .form-group { margin-bottom: 4px; }
#feedbackModal #fbSubmitBtn { flex-shrink: 0; margin-top: 2px; }
#feedbackModal .fb-category-item { padding: 8px 6px; }
#feedbackModal .fb-cat-icon { font-size: 18px; }
#feedbackModal .char-count { margin-top: 2px; }
#fbHistoryTab .feedback-history-section { max-height: 60vh; overflow-y: auto; padding-right: 4px; }
#fbHistoryTab .fb-history-item { width: 100%; box-sizing: border-box; word-wrap: break-word; overflow-wrap: break-word; }
#fbHistoryTab .fb-content { white-space: pre-wrap; word-break: break-word; }
.fb-tabs {
    display: flex;
    gap: 4px;
    padding: 0 16px 6px;
    background: transparent;
    border-bottom: none;
}
.fb-tab {
    flex: 1;
    text-align: center;
    padding: 8px 0 10px;
    font-size: 14px;
    font-weight: 600;
    color: var(--text-muted);
    cursor: pointer;
    border-bottom: 2px solid transparent;
    margin-bottom: 0;
    transition: color .2s, border-color .2s;
    user-select: none;
}
.fb-tab:hover { color: var(--primary); }
.fb-tab.active { color: var(--primary); border-bottom-color: var(--primary); }
.fb-tab-content { display: none; }
.fb-tab-content.active { display: block; }
.fb-tab-content.hidden { display: none; }
.fb-history-item { background: var(--bg); border-radius: var(--radius); padding: 14px 16px; margin-bottom: 10px; border: 1px solid var(--border); transition: var(--transition); }
.fb-history-item:hover { box-shadow: 0 2px 8px rgba(0,0,0,0.06); }
.fb-history-head { display: flex; justify-content: space-between; align-items: center; margin-bottom: 8px; }
.fb-status { font-size: 11px; padding: 3px 10px; border-radius: 10px; font-weight: 600; }
.fb-status.pending { background: #FEF3C7; color: #92400E; }
.fb-status.replied { background: #DCFCE7; color: #16A34A; }
.fb-time { font-size: 11px; color: var(--text-muted); }
.fb-content { font-size: 13px; color: var(--text-secondary); line-height: 1.7; }
.fb-reply { background: var(--card-bg); border-radius: var(--radius-sm); padding: 10px 12px; margin-top: 10px; font-size: 13px; color: var(--text); line-height: 1.7; border-left: 3px solid var(--primary); }
.fb-reply-label { font-weight: 700; color: var(--primary); display: block; margin-bottom: 4px; font-size: 12px; }
.fb-reply-time { font-size: 10px; color: var(--text-muted); margin-top: 6px; }
@media (max-width: 640px) {
    .fb-category-grid { grid-template-columns: repeat(2, 1fr); }
    #feedbackModal .form-row { grid-template-columns: 1fr; }
}

/* ===== 移动端适配 ===== */
@media (max-width: 480px) {
    .comp-dims-grid { grid-template-columns: 1fr; }
    .comp-form-row { grid-template-columns: 1fr; }
    .welcome-features { grid-template-columns: 1fr; }
    .msg-dims { grid-template-columns: repeat(2, 1fr); gap: 6px; }
    /* V3.1.2: 财运(第3项)移到最后单独一行,跨度2列对齐上面两个卡片 */
    .msg-dim-item:nth-child(3) { order: 5; grid-column: span 2; }
    .feedback-content-wide { max-width: 100%; padding: 24px 18px; }
}

/* V3.0优化: 四模块移动端全面适配 */
@media (max-width: 640px) {
    /* 运势模块 */
    .fortune-tabs { gap: 0; }
    .fortune-tab { padding: 5px 10px; font-size: 12px; }
    .fortune-period-tabs { gap: 0; }
    .fortune-period-btn { padding: 5px 6px; font-size: 11px; }

    /* 合盘模块 - V3.0优化 + V3.1.2移动端适配增强 */
    .comp-result { padding: 0 0 20px; }
    .comp-score-card { padding: 16px 14px; }
    .comp-score-ring { width: 80px; height: 80px; }
    .comp-score-inner { width: 62px; height: 62px; }
    .comp-score-num { font-size: 22px; }
    .comp-score-verdict { font-size: 20px; letter-spacing: 2px; }
    .comp-score-desc { margin-top: 26px; }
    .comp-score-stars { gap: 3px; }
    .comp-score-star { font-size: 16px; }
    .comp-score-desc { font-size: 12px; line-height: 1.7; padding-left: 12px; }
    .comp-score-tags { margin-bottom: 10px; }
    .comp-role-tag, .comp-type-tag { font-size: 11px; padding: 3px 10px; }
    .comp-parties { grid-template-columns: 1fr; gap: 8px; }
    .comp-vs { transform: rotate(90deg); margin: -4px 0; }
    .comp-profile-picker { flex-direction: row !important; gap: 6px; align-items: stretch; }
    .comp-profile-select { flex: 1; min-width: 0; }
    .comp-add-profile-btn { padding: 8px 14px; flex-shrink: 0; }
    .comp-profile-summary { flex-direction: column; gap: 4px; }
    .comp-dims-grid { grid-template-columns: 1fr; }
    .comp-banner-content { padding: 18px 16px; gap: 12px; }
    .comp-banner-icon { width: 48px; height: 48px; font-size: 28px; }
    .comp-banner-text h3 { font-size: 16px; }
    .comp-banner-text p { font-size: 12px; }
    .comp-type-cards { grid-template-columns: 1fr; }
    .comp-type-card { padding: 16px 14px; }
    .comp-party { padding: 14px 10px; }
    .comp-party-avatar { width: 42px; height: 42px; font-size: 18px; }
    .comp-party-dm, .comp-party-sun { font-size: 18px; }
    .comp-party-tabs { gap: 8px; }
    .comp-dim-card { padding: 12px 12px; }
    .comp-dim-name { font-size: 12px; }
    .comp-chapter-preview { padding: 10px 6px; }
    .comp-chapter-body h4 { font-size: 13px; }
    .comp-chapter-body p { font-size: 11px; line-height: 1.5; }
    /* V3.0: 解锁卡片移动端适配(对齐deep-paywall-card) */
    .unlock-card-v2 { padding: 20px 16px; }
    .unlock-card-v2 .unlock-card-icon { font-size: 28px; }
    .unlock-card-v2 .unlock-card-title { font-size: 15px; }
    .unlock-card-v2 .unlock-card-price { font-size: 26px; margin: 8px 0 4px; }
    .unlock-card-v2 .unlock-card-features { padding: 10px 12px; font-size: 12px; }
    .unlock-card-v2 .unlock-card-btn { padding: 10px; font-size: 14px; }
    .comp-dims-card, .comp-chapters-card { padding: 14px; }

    /* 对话模块 */
    .chat-list-header { padding: 16px 12px 8px; }
    .chat-list-header h3 { font-size: 18px; }
    .chat-list-grid { padding: 0 12px 38px; gap: 8px; }
    .chat-card { padding: 14px 12px; gap: 12px; }
    .chat-card-icon-wrap { width: 42px; height: 42px; font-size: 20px; border-radius: 12px; }
    .chat-card-title { font-size: 14px; }
    .chat-card-desc { font-size: 11px; }
    .chat-modal-overlay { padding: 0; }
    .chat-modal-box { height: 100vh; height: 100dvh; max-height: none; border-radius: 0; width: 100%; }
    /* V3.1.3: APP级对话页 - 头像标题水平一行布局 */
    /* V3.x 移动端优化: 返回按钮底部对齐标题; 头像放大25%(32->40); 标题(头像+文字)整组居中 */
    .chat-modal-header {
        padding: 12px;
        flex-direction: row !important;
        gap: 10px;
        align-items: center;          /* 返回按钮与标题垂直居中,同一条线 */
        min-height: 0;               /* 去掉强制高度,避免栏位被撑高 */
        position: relative;
    }
    .chat-modal-header h3 {
        margin: 0;
        font-size: 15px;
        display: flex !important;
        flex-direction: row !important;
        gap: 8px;
        align-items: center;
        position: absolute;
        left: 50%;
        top: 50%;
        transform: translate(-50%, -50%);   /* 水平+垂直居中,与返回按钮同线 */
        width: max-content;
        max-width: calc(100vw - 120px);
        z-index: 1;
    }
    .agent-icon { height: 40px; }    /* 头像放大 25% */
    /* 返回按钮: 左上角,八字同款 SVG 箭头,与标题垂直居中对齐 */
    .chat-modal-header .chat-modal-close {
        position: relative !important;
        top: auto !important;
        left: auto !important;
        margin-right: 4px;
        flex-shrink: 0;
        align-self: center;           /* 与标题垂直居中同线 */
        z-index: 2;
        width: 32px; height: 32px; padding: 0;
        display: flex; align-items: center; justify-content: center;
        font-size: 0 !important;     /* 隐藏 PC 端 ✕ 字符,显示箭头 mask */
        color: var(--text-secondary);
        border-radius: 8px;
    }
    .chat-modal-header .chat-modal-close::before {
        content: '';
        display: block;
        width: 18px; height: 18px;
        /* 用固定色,避免被更小屏断点 color: transparent 覆盖导致箭头消失 */
        background: #6B7280;
        -webkit-mask: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'><polyline points='15 18 9 12 15 6'></polyline></svg>") center / contain no-repeat;
        mask: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'><polyline points='15 18 9 12 15 6'></polyline></svg>") center / contain no-repeat;
    }
    /* 移动端: banner 文案精简为一行,完整展示不换行/不省略 */
    .chat-scope-banner { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
    .chat-input-area { padding: 10px 12px; }
    .chat-input { padding: 10px 12px; font-size: 14px; }
    .chat-send-btn { padding: 10px 16px; font-size: 13px; letter-spacing: 0.5px; }

    /* 我的模块 */
    .profile-header { padding: 18px 14px; gap: 12px; margin: 14px 12px 10px; border-radius: 14px; }
    .profile-avatar { width: 127.5px; height: 127.5px; }
    .profile-phone { font-size: 15px; }
    .profile-menu-item { padding: 14px 14px; font-size: 14px; }
    .profile-menu-item .menu-icon { width: 28px; height: 28px; font-size: 16px; }
    .plan-card { padding: 16px 12px; }
    .plan-icon { font-size: 28px; }
    .plan-price-num { font-size: 24px; }
    .profile-detail-header { padding: 14px 12px; }
    .profile-detail-header h3 { font-size: 16px; }
    .profile-id-card { padding: 12px; }
    .profile-id-meta { flex-wrap: wrap; gap: 6px; }
    .report-card { padding: 12px; gap: 10px; }
    .report-card-icon { width: 40px; height: 40px; font-size: 24px; }

    /* ===== m12: 会员/通讯录/我的报告/问题反馈 移动端优化(去廉价感) ===== */
    /* 通讯录卡片: 去边框,加柔和阴影,头像与信息层次更清晰 */
    .profile-id-card {
        background: var(--card-bg) !important;
        border: 1px solid var(--border);
        box-shadow: 0 1px 3px rgba(0,0,0,0.04);
        margin-bottom: 10px !important;
    }
    .profile-id-head { gap: 12px !important; }
    .profile-id-icon {
        width: 38px; height: 38px;
        display: inline-flex; align-items: center; justify-content: center;
        background: transparent; border-radius: 0;
        font-size: 22px !important;
    }
    .profile-id-info strong { font-size: 15px !important; }
    .tag { padding: 3px 9px !important; border-radius: 10px !important; font-weight: 600; }
    /* 操作按钮: 轻量无边框,仅 hover 时显示背景 */
    .profile-action-btn {
        border: none !important;
        background: transparent !important;
        width: 32px; height: 32px;
    }
    .profile-action-btn:hover { background: var(--bg) !important; }
    /* 移动端按钮略宽,对齐 actions 容器 */
    .profile-card-actions { width: 70px; }

    /* 我的报告卡片: 卡片更精致 */
    .report-card {
        background: var(--card-bg) !important;
        border: 1px solid var(--border) !important;
        box-shadow: 0 1px 3px rgba(0,0,0,0.04);
        margin-bottom: 10px !important;
    }
    .report-card-icon {
        background: transparent;
        color: var(--primary);
    }
    .report-view-btn { padding: 6px 14px !important; font-size: 12px !important; }

    /* 会员套餐卡片: 紧凑展示 */
    .membership-plans { gap: 32px !important; padding: 0 16px 6px !important; }
    .plan-card { padding: 16px 14px 12px !important; }
    .plan-feature { font-size: 11px !important; line-height: 1.7 !important; }
    .membership-status-card { margin: 6px 14px 0 !important; }
    .sub-card {
        border: 1px solid var(--border) !important;
        background: var(--card-bg) !important;
        box-shadow: 0 1px 2px rgba(0,0,0,0.03);
    }

    /* 问题反馈: tab 与卡片样式统一 */
    .fb-tabs { background: transparent !important; border-bottom: none !important; padding: 0 16px 6px !important; }
    .fb-tab { padding: 8px 0 10px !important; font-size: 14px !important; border-bottom-width: 2px !important; }
    .fb-category-item {
        border-width: 1px !important;
        padding: 10px 6px !important;
        background: var(--card-bg) !important;
    }
    .fb-history-item {
        background: var(--card-bg) !important;
        border: 1px solid var(--border) !important;
        box-shadow: 0 1px 3px rgba(0,0,0,0.04);
        padding: 12px 14px !important;
    }
    .fb-reply { background: var(--bg) !important; }

    /* 付费墙移动端 — 所有字段均匀分布一屏 */
    .paywall-overlay { padding: 0; }
    .paywall-card { max-width: 100%; border-radius: 0; min-height: 100vh; display: flex; flex-direction: column; justify-content: space-evenly; padding: calc(14px + env(safe-area-inset-top, 0px)) 20px calc(14px + env(safe-area-inset-bottom, 0px)); }
    .paywall-qr-area.show { display: flex; flex-direction: column; justify-content: center; }
    .paywall-card .paywall-icon,
    .paywall-card h2,
    .paywall-card .paywall-price,
    .paywall-card .paywall-gift,
    .paywall-card .paywall-benefits,
    .paywall-card .paywall-qr-area,
    .paywall-card .paywall-secondary-row { margin: 10px 0 0; }
    .paywall-benefits { font-size: 12px; padding: 8px 10px; line-height: 1.5; }
    .paywall-benefits li { white-space: nowrap; }
    .paywall-card .paywall-btn.primary { margin: 16px 0 0; }
    .paywall-methods { flex-direction: column; gap: 8px; }
    .pay-method-btn { max-width: 100%; }
    .qr-single img { width: 150px; height: 150px; }

    /* 身份编辑弹窗移动端 */
    .profile-edit-modal { padding: 0; }
    .profile-edit-modal-content { max-width: 100%; max-height: 100vh; border-radius: 0; padding: 24px 18px; }
    .profile-edit-modal-content .form-row { flex-direction: column; gap: 0; }
}

/* V3.1.2: 移动端我的模块二三级页面紧凑布局,一屏展示完整 */
@media (max-width: 768px) {
    /* 信息录入弹窗紧凑布局 */
    .profile-edit-modal-content {
        padding: 16px 14px 14px !important;
    }
    .profile-edit-modal-content > h3,
    .feedback-modal-content > h3 {
        margin-bottom: 10px !important;
        font-size: 15px !important;
    }
    .profile-edit-modal-content .form-group,
    .feedback-modal-content .form-group {
        margin-bottom: 8px !important;
    }
    .profile-edit-modal-content .form-row {
        margin-bottom: 8px !important;
    }
    .profile-edit-modal-content label,
    .feedback-modal-content label {
        font-size: 12px !important;
        margin-bottom: 3px !important;
    }
    .profile-edit-modal-content input,
    .profile-edit-modal-content select,
    .feedback-modal-content input,
    .feedback-modal-content textarea {
        padding: 8px 10px !important;
        font-size: 13px !important;
    }
    /* 反馈弹窗紧凑布局 */
    #feedbackModal .v3-page-modal-body { padding: 10px 14px 12px !important; }
    .feedback-modal-content { padding: 16px 14px 14px !important; }
    .fb-tabs { gap: 4px !important; margin-bottom: 6px !important; }
    .fb-tab { padding: 8px 0 10px !important; font-size: 13px !important; }
    /* 通讯录弹窗紧凑布局 */
    #contactsModal .v3-page-modal-body,
    #reportsModal .v3-page-modal-body {
        padding: 10px 6px 12px !important;
    }
    .contacts-list-item,
    .report-card {
        padding: 10px 12px !important;
    }
    /* v3-page-modal通用紧凑布局 */
    .v3-page-modal-header {
        padding: 12px 16px !important;
    }
    .v3-page-modal-header h3 {
        font-size: 15px !important;
    }
    .v3-page-modal-body {
        padding: 12px 16px 14px !important;
    }
}

@media (max-width: 380px) {
    .fortune-tab { padding: 4px 8px; font-size: 11px; }
    .comp-score-card { padding: 14px 10px; }
    .comp-score-ring { width: 70px; height: 70px; }
    .comp-score-inner { width: 54px; height: 54px; }
    .comp-score-num { font-size: 20px; }
    .comp-banner-content { padding: 14px 12px; gap: 10px; }
    .comp-banner-icon { width: 40px; height: 40px; font-size: 24px; }
    .comp-banner-text h3 { font-size: 14px; }
    .chat-card-icon-wrap { width: 38px; height: 38px; font-size: 18px; }
    .plan-card { padding: 14px 10px; }
}

/* V3.2: 全局默认隐藏标题栏,仅在.show时显示 */
.mobile-title-bar { display: none; }

@media (max-width: 768px) {
    /* 移动端标题栏:仅在.show时显示 */
    .mobile-title-bar.show {
        display: flex;
        position: fixed;
        top: 0;
        left: 0;
        right: 0;
        height: 48px;
        align-items: center;
        background: color-mix(in srgb, var(--card-bg) 76%, var(--primary));
        backdrop-filter: blur(12px);
        -webkit-backdrop-filter: blur(12px);
        border-bottom: 1px solid color-mix(in srgb, var(--primary) 16%, transparent);
        z-index: 300;
    }
    .mobile-title-bar .mobile-back-btn {
        position: absolute;
        left: 10px;
        right: auto;
        height: 48px;
        display: flex;
        align-items: center;
        justify-content: center;
        padding: 0;
        margin: 0;
        color: var(--primary);
        z-index: 5;
        font-size: 18px;
        font-weight: 300;
        line-height: 1;
        width: 36px;
        border: none;
        background: transparent;
        border-radius: 8px;
        cursor: pointer;
        font-family: var(--font);
    }
    .mobile-title-bar .mobile-back-btn:active { opacity: 0.6; }
    .mobile-title-bar .mobile-page-title {
        position: absolute;
        left: 50%;
        top: 0;
        transform: translateX(-50%);
        display: block;
        font-size: 17px;
        font-weight: 700;
        letter-spacing: 3px;
        color: var(--primary);
        font-family: var(--font);
        line-height: 48px;
        white-space: nowrap;
        pointer-events: none;
    }
    .mobile-title-bar.theme-zodiac {
        background: color-mix(in srgb, var(--card-bg) 86.5%, var(--zodiac-primary));
        border-bottom-color: color-mix(in srgb, var(--zodiac-primary) 12%, transparent);
    }
    .mobile-title-bar.theme-zodiac .mobile-back-btn { color: var(--zodiac-primary); }
    .mobile-title-bar.theme-zodiac .mobile-page-title { color: var(--zodiac-primary); }
    /* 移动端内容避开标题栏 */
    #pageBazi, #pageZodiac {
        padding-top: 48px;
    }
}

/* ============================================================
   V3.1 移动端全面适配 (max-width: 768px)
   ============================================================ */

/* ===== 1. 移动端底部Tab栏 + 运字特殊设计 ===== */
.mobile-tabbar {
    display: none;
}
.mobile-theme-toggle {
    display: none;
}
.mobile-back-btn {
    display: none;
}

@media (max-width: 768px) {
    /* 隐藏PC端顶部导航和主题切换 */
    .app-nav { display: none !important; }
    #themeToggle { display: none !important; }

    /* 显示移动端底部Tab栏 */
    .mobile-tabbar {
        display: flex !important;
        position: fixed;
        bottom: 0;
        left: 0;
        right: 0;
        height: calc(56px + env(safe-area-inset-bottom, 0px));
        padding-bottom: env(safe-area-inset-bottom, 0px);
        background: rgba(255, 255, 255, 0.5);
        border-top: 1px solid rgba(180, 170, 150, 0.2);
        box-shadow: 0 -1px 8px rgba(0, 0, 0, 0.04);
        z-index: 300;
        align-items: stretch;
        justify-content: space-around;
        backdrop-filter: blur(20px) saturate(180%);
        -webkit-backdrop-filter: blur(20px) saturate(180%);
    }
    [data-theme="dark"] .mobile-tabbar {
        background: rgba(34, 46, 41, 0.5);
        border-top-color: rgba(180, 170, 150, 0.2);
    }

    /* 普通Tab项 - V3.1优化: 精致SVG图标, 去掉横线选中效果, 保留字体加粗 */
    .mobile-tab-item {
        flex: 1;
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        gap: 4px;
        text-decoration: none;
        color: var(--text-muted);
        font-family: var(--font);
        font-size: 10px;
        line-height: 1;
        position: relative;
        padding: 8px 0 6px;
        transition: color 0.2s ease;
        min-height: 44px;
        -webkit-tap-highlight-color: transparent;
        -webkit-touch-callout: none;
        -webkit-user-select: none;
        user-select: none;
        outline: none;
        border: none;
        background: none;
    }
    .mobile-tab-svg {
        width: 26px;
        height: 26px;
        stroke: currentColor;
        color: var(--text-muted);
        transition: color 0.2s ease, transform 0.2s ease;
    }
    .mobile-tab-text {
        font-size: 10px;
        letter-spacing: 0.5px;
    }
    .mobile-tab-item.active {
        color: var(--primary);
        font-weight: 700;
    }
    .mobile-tab-item.active .mobile-tab-svg {
        color: var(--primary);
        transform: scale(1.05);
    }
    /* V3.1优化: 移动端独立设计,不显示PC端横线选中效果 */
    .mobile-tab-item.active::before {
        display: none !important;
    }

    /* 运字Tab特殊设计: V3.1.2还原经典设计 - 主色渐变背景+白色运字+突出圆形按钮(无线状装饰) */
    .mobile-tab-item.mobile-tab-fortune {
        flex: 1;
        position: relative;
        align-items: center;
        justify-content: flex-end;
        padding-bottom: 4px;
    }
    .mobile-tab-yun {
        display: flex;
        align-items: center;
        justify-content: center;
        width: 60px;
        height: 60px;
        border-radius: 50%;
        background: linear-gradient(135deg, #4A6F62 0%, #6A8C7F 60%, #4A6F62 100%);
        border: 3px solid #fff;
        box-shadow: 0 4px 14px rgba(74, 111, 98, 0.35), 0 6px 16px rgba(0, 0, 0, 0.10), inset 0 1px 2px rgba(255, 255, 255, 0.4);
        color: #fff;
        font-family: 'STXingkai', 'STKaiti', 'KaiTi', 'Noto Serif SC', var(--font-serif);
        font-size: 34px;
        font-weight: 700;
        line-height: 1;
        margin-top: -24px;
        transition: transform 0.2s ease, box-shadow 0.2s ease;
        position: relative;
        z-index: 2;
        overflow: hidden;
        text-shadow: 0 1px 2px rgba(0, 0, 0, 0.18);
    }
    .mobile-tab-yun-img {
        position: relative;
        z-index: 1;
        width: 67%;
        height: auto;
        display: block;
        pointer-events: none;
        -webkit-user-select: none;
        user-select: none;
    }
    .mobile-tab-item.mobile-tab-fortune.active .mobile-tab-yun {
        background: linear-gradient(135deg, #3E5E54 0%, #5A7E70 60%, #3E5E54 100%);
        box-shadow: 0 6px 22px rgba(74, 111, 98, 0.5), 0 8px 20px rgba(0, 0, 0, 0.14), 0 0 0 3px rgba(255, 255, 255, 0.9), inset 0 1px 2px rgba(255, 255, 255, 0.5);
        transform: scale(1.06);
    }
    .mobile-tab-item.mobile-tab-fortune:active .mobile-tab-yun {
        transform: scale(0.92);
    }

    /* 移动端主题切换浮动按钮 - V3.1已移到我的页菜单,隐藏浮动按钮 */
    .mobile-theme-toggle {
        display: none !important;
    }

    /* 移动端标题栏关闭按钮由父级 .mobile-title-bar 统一定位 right:10px */

    /* 移动端页面标题由父级 .mobile-title-bar 统一定位居中 */

    /* ===== V3.2 移动端冻结标题栏(八字/星盘页) - safe-area-inset适配 ===== */
    .mobile-title-bar.show {
        height: calc(48px + env(safe-area-inset-top, 0px));
        padding-top: env(safe-area-inset-top, 0px);
    }
    .mobile-title-bar .mobile-back-btn {
        top: env(safe-area-inset-top, 0px);
    }
    .mobile-title-bar .mobile-page-title {
        top: env(safe-area-inset-top, 0px);
    }
    /* 内容避开冻结栏(含安全区) */
    #pageBazi, #pageZodiac {
        padding-top: calc(48px + env(safe-area-inset-top, 0px));
    }

    /* ===== V3.2 合盘结果modal冻结标题栏 ===== */
    #compositeResultPage.v3-page-modal { padding: 0 !important; }
    #compositeResultPage .composite-result-page-content {
        position: absolute;
        inset: 0;
        display: flex;
        flex-direction: column;
        background: var(--card-bg);
        border-radius: 0;
    }
    .composite-result-title-bar {
        position: sticky;
        top: 0;
        z-index: 5;
        display: flex;
        align-items: center;
        justify-content: center;
        height: calc(48px + env(safe-area-inset-top, 0px));
        padding-top: env(safe-area-inset-top, 0px);
        box-sizing: border-box;
        flex-shrink: 0;
        background: color-mix(in srgb, var(--card-bg) 76%, var(--primary));
        backdrop-filter: blur(12px);
        -webkit-backdrop-filter: blur(12px);
        border-bottom: 1px solid color-mix(in srgb, var(--primary) 16%, transparent);
    }
    .composite-result-back {
        position: absolute;
        left: 10px;
        top: env(safe-area-inset-top, 0px);
        transform: none;
        height: 48px;
        padding: 0 7.5px 13px 12.5px;
        display: flex;
        align-items: flex-end;
        justify-content: center;
        border: none;
        background: transparent;
        color: var(--primary);
        line-height: 1;
        cursor: pointer;
        border-radius: 8px;
        z-index: 6;
    }
    .composite-result-back svg { width: 20px; height: 20px; }
    .composite-result-back:active { opacity: 0.6; }
    .composite-result-title {
        font-size: 17px;
        font-weight: 700;
        letter-spacing: 3px;
        color: var(--primary);
        font-family: var(--font);
    }
    .composite-result-title-bar.theme-zodiac {
        background: color-mix(in srgb, var(--card-bg) 86.5%, var(--zodiac-primary));
        border-bottom-color: color-mix(in srgb, var(--zodiac-primary) 12%, transparent);
    }
    .composite-result-title-bar.theme-zodiac .composite-result-back { color: var(--zodiac-primary); }
    .composite-result-title-bar.theme-zodiac .composite-result-title { color: var(--zodiac-primary); }
    #compositeResultPage .composite-result-page-body {
        flex: 1;
        overflow-y: auto;
        -webkit-overflow-scrolling: touch;
        padding: 16px 14px 24px;
    }
    /* V3.1.56: 合盘结果页加载loading居中(八字/星盘共用同一.loading) */
    #compositeResultPage .composite-result-page-body .loading {
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        min-height: 70vh;
    }

    /* V3.2: 窄屏(≤600px)标题栏字号对齐卡片标题(.chart-title=15px),
       置于文件末尾确保覆盖媒体查询内默认的17px(源顺序靠后) */
    @media (max-width: 600px) {
        .mobile-title-bar .mobile-page-title,
        .composite-result-title { font-size: 15px; }
    }

    /* 主内容区底部留出Tab栏空间 */
    .app-container {
        padding: 0 14px;
    }
    .main-content {
        padding-bottom: calc(72px + env(safe-area-inset-bottom, 0px));
    }

    /* ===== 2. 首页适配 - V3.1.2一屏完整展示+卡片在底部+还原描述 ===== */
    .hero-section {
        min-height: calc(100vh - 72px) !important;
        padding: 40px 14px 70px !important;  /* V3.1.2: 底部留70px给scroll-indicator */
        margin: -12px -14px 0;
        justify-content: flex-start !important;
        align-items: stretch !important;
    }
    /* V3.1.2: hero-content改为flex column填满,卡片自动落到底部 */
    .hero-content {
        display: flex !important;
        flex-direction: column !important;
        width: 100% !important;
        max-width: 600px;
        margin: 0 auto;
        height: calc(100vh - 72px - 40px - 70px) !important;  /* V3.1.2: 减去底部70px scroll-indicator空间 */
        align-items: center !important;
    }
    /* V3.1.2: hero-title/subtitle/slogan整体下移到上下居中位置 */
    .hero-title {
        font-size: 40px !important;
        letter-spacing: 6px !important;
        font-weight: 800 !important;
        margin-top: 18vh !important;  /* V3.1.2: 大幅下移到页面上下居中 */
    }
    .hero-subtitle {
        font-size: 12px !important;
        letter-spacing: 4px !important;
        margin-top: 12px !important;
    }
    .hero-slogan {
        font-size: 13px;
        line-height: 1.7;
        margin-top: 16px !important;
    }
    /* V3.1.2: 三卡片并排一行+还原描述+加大卡片 - 自动落到底部 */
    .hero-cards {
        flex-direction: row !important;
        gap: 10px !important;
        margin-top: auto !important;
        width: 100% !important;
        justify-content: stretch !important;
        align-items: stretch !important;
    }
    .hero-card {
        flex: 1 !important;
        padding: 18px 8px 16px !important;
        text-align: center !important;
        align-items: center !important;
        min-width: 0 !important;
        max-width: none !important;
        width: auto !important;
        display: flex;
        flex-direction: column;
        justify-content: flex-start;
    }
    .hero-card-icon { font-size: 32px !important; margin-bottom: 8px !important; }
    .hero-card-title { font-size: 14px !important; letter-spacing: 1px !important; margin-bottom: 6px !important; }
    /* V3.1.2: 还原卡片描述小字(精简单行) */
    .hero-card-desc {
        display: block !important;
        font-size: 10px !important;
        line-height: 1.5 !important;
        letter-spacing: 0 !important;
        color: var(--text-muted) !important;
    }

    /* V3.1优化: scroll-indicator动态logo与卡片间距 - 与PC端一致,避免重叠 */
    .scroll-indicator {
        bottom: 24px !important;
        gap: 5px !important;
        z-index: 1 !important;
    }
    .scroll-indicator span {
        width: 7px !important;
        height: 7px !important;
        border-right-width: 1.5px !important;
        border-bottom-width: 1.5px !important;
        opacity: 0.55 !important;
    }

    /* V3.1.81: 移动端首页向下滚动提示(动态图标)与下方横线整体下移动1.5cm(≈57px)——增加hero-section底部内边距,
       让absolute定位的scroll-indicator与section下边缘同步下移;content-box仍min-height:100vh并flex居中,卡片位置不变 */
    .hero-section {
        padding-bottom: 97px !important; /* 基础40px + 57px(1.5cm) */
    }

    /* V3.1.2: K线哲学section上方留足间距,防止动态scroll-indicator跳到卡片上 */
    .brand-section {
        padding: 64px 14px 24px !important;
        margin-top: 24px !important;
    }
    .brand-section::before {
        top: 32px !important;
    }
    .brand-title { font-size: 18px; }
    .brand-desc { font-size: 12px; line-height: 1.7; }
    .fortune-kline-canvas {
        height: 180px !important;
    }
    .trust-badges {
        flex-wrap: nowrap !important;
        gap: 6px !important;
        justify-content: center !important;
    }
    /* V3.1优化: 数据可信度三tab并排一行 - V3.1.2加!important强制覆盖 */
    .trust-pillars {
        grid-template-columns: repeat(3, 1fr) !important;
        gap: 8px !important;
    }
    .trust-pillar {
        padding: 12px 6px !important;
        text-align: center !important;
        align-items: center !important;
    }
    .trust-pillar-icon { font-size: 24px !important; margin-bottom: 6px !important; }
    .trust-pillar h4 { font-size: 13px !important; letter-spacing: 0 !important; margin-bottom: 6px !important; }
    /* V3.1.2: 移除line-clamp,完整展示介绍文字 */
    .trust-pillar p { font-size: 10px !important; line-height: 1.65 !important; overflow: visible !important; display: block !important; -webkit-line-clamp: unset !important; -webkit-box-orient: unset !important; }

    /* V3.1.2: 数据可信度badges三tab并排一行,减小padding确保不换行 */
    .trust-badge {
        font-size: 11px !important;
        padding: 5px 10px !important;
        letter-spacing: 0 !important;
        gap: 4px !important;
        flex: 1 !important;
        justify-content: center !important;
        white-space: nowrap !important;
    }
    .trust-badge-icon { font-size: 13px !important; }

    .home-section-label { font-size: 13px; margin: 16px 0 8px; }
    .home-grid { gap: 10px !important; }
    .card-entry {
        padding: 14px 14px 14px 48px !important;
    }
    .entry-icon { font-size: 18px !important; left: 14px !important; }
    .card-entry h3 { font-size: 14px; }
    .card-entry p { font-size: 11px; }

    /* 竹子在最小屏隐藏更多 */
    .bamboo-svg.b3 { display: none; }

    /* ===== 3. 运势页适配 ===== */
    .fortune-tabs { padding: 3px; }
    .fortune-tab { padding: 6px 8px; font-size: 12px; }
    .fortune-period-tabs { padding: 3px; }
    .fortune-period-btn { padding: 5px 4px; font-size: 11px; letter-spacing: 0; }

    /* ===== 4. 八字页适配 ===== */
    #pageBazi { padding-top: 56px; }
    .bazi-module-content { padding: 0; }
    .date-text { font-size: 11px; }
    .summary-dm-value { font-size: 13px; }
    .pattern-badge { font-size: 12px; padding: 3px 8px; }
    .bazi-collapsible-card .bazi-card-header { padding: 10px 12px; gap: 8px; }
    .bazi-collapsible-card .bazi-card-icon { font-size: 18px; width: 26px; height: 26px; }
    .bazi-collapsible-card .bazi-card-title-wrap h4 { font-size: 13px; }
    .bazi-collapsible-card .bazi-card-subtitle { font-size: 10px; }

    /* 四柱八字表 */
    .bazi-pillars-table,
    .pillars-table {
        font-size: 12px;
    }
    .bazi-pillars-table th,
    .bazi-pillars-table td,
    .pillars-table th,
    .pillars-table td {
        padding: 6px 4px;
        font-size: 12px;
    }
    .bazi-cell-gan,
    .bazi-cell-zhi {
        font-size: 16px;
    }

    /* 大运Tab */
    .dayun-tab {
        padding: 6px 4px 4px;
        min-width: 36px;
        font-size: 9px;
    }
    .dayun-tab-gz { font-size: 11px; }
    .dayun-tab-year { font-size: 8px; }
    .dayun-tab-age { font-size: 8px; }
    .dayun-tab-shensha { display: none; }

    /* 流年列表 */
    .liunian-item {
        padding: 5px 6px;
        gap: 4px;
    }
    .liunian-year { font-size: 11px; min-width: 32px; }
    .liunian-ganzhi { font-size: 11px; min-width: 24px; }
    .liunian-score { font-size: 10px; padding: 1px 5px; }
    .liunian-desc { font-size: 10px; }

    /* ===== 5. 星盘页适配 ===== */
    #pageZodiac { padding-top: 56px; padding-bottom: 20px; }
    .zodiac-chart-card { padding: 12px; }
    .zodiac-chart-header h3 { font-size: 15px; }
    .zodiac-chart-subtitle { font-size: 11px; }
    .zodiac-3d-container {
        height: 340px !important;
        min-height: 280px !important;
    }
    .zodiac-chart-stats { padding: 8px 0 0; }
    .zodiac-chart-cards { gap: 16px; }
    .zodiac-chart-function-card { margin-bottom: 0; }
    .zodiac-card-header { padding: 10px 12px; gap: 8px; }
    .zodiac-card-icon { font-size: 18px; width: 26px; height: 26px; }
    .zodiac-card-title-wrap h4 { font-size: 13px; }
    .zodiac-card-subtitle { font-size: 10px; }
    .zodiac-card-content { padding: 12px; font-size: 12px; }
    .zodiac-deep-interp-title { font-size: 15px; }
    .zodiac-deep-interp-desc { font-size: 11px; line-height: 1.7; }

    /* 星盘功能卡片默认折叠(与八字模块一致: max-height动画) */
    .zodiac-chart-function-card .zodiac-card-body {
        max-height: 0;
        overflow: hidden;
        transition: max-height 0.35s ease-out, padding 0.35s ease-out;
        padding: 0;
    }
    .zodiac-chart-function-card.expanded .zodiac-card-body {
        max-height: 2000px;
        padding-top: 5px;
    }

    /* 行星过境filter tabs 单行展示 */
    .zodiac-transit-tabs {
        flex-wrap: nowrap !important;
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
    }
    .zodiac-transit-tab {
        padding: 5px 8px !important;
        font-size: 11px !important;
        white-space: nowrap;
        flex-shrink: 0;
    }

    /* 3D星盘按钮触摸区 */
    .zodiac-3d-btn {
        width: 40px !important;
        height: 40px !important;
    }
    .zodiac-3d-hint {
        font-size: 10px;
        padding: 4px 8px;
    }

    /* ===== 6. 合盘页适配 ===== */
    /* V3.1优化: banner改为卡片样式,与下方卡片宽度对齐 */
    /* V3.1.2优化: 增加banner高度让内容更舒展大气 */
    .comp-banner {
        /* V3.1.7: 移动端banner上移,给卡片腾出空间 */
        /* V3.1.43: banner与白色卡片间距增加呼吸感(6→14) */
        margin: 10px 0 14px 0;
        border-radius: var(--radius);
        box-shadow: var(--shadow);
        overflow: hidden;
    }
    .comp-banner-content {
        /* V3.1.7: 移动端banner内容缩短 */
        /* V3.1.44: banner增加高度,上下padding 14→22 */
        padding: 22px 16px;
        gap: 12px;
        align-items: center;
    }
    .comp-banner-icon { width: 56px; height: 56px; font-size: 30px; }
    .comp-banner-text h3 { font-size: 16px; margin-bottom: 4px; }
    .comp-banner-text p { font-size: 12px; line-height: 1.5; }
    .comp-banner-features {
        padding: 10px 14px 14px;
        gap: 6px;
        flex-wrap: wrap;
        justify-content: center;
    }
    .comp-banner-feature { font-size: 10px; padding: 3px 10px; }
    /* V3.1.2: 合盘表单紧凑布局 */
    /* V3.1.2优化: 进一步减少间距,使开始合盘按钮能够完整一个屏幕展示 */
    /* V3.1.2: 减少我的信息/对方信息卡片底部留白(m5/m6) */
    /* V3.1.8: 移动端卡片内边距适当恢复,之前缩短过头 */
/* V3.1.15: 移动端卡片再缩两次(min-height 54→48vh,padding-bottom 10→6) */
    /* V3.1.24: 修复之前48vh太矮、内容被撑高、按钮不贴底的问题;改用calc让卡片自动填满到导航上方,按钮贴底 */
    /* V3.1.25: 卡片内flex列布局,space-between让两个section+按钮首尾贴边、中间均匀分布,消除底部堆空白 */
    /* V3.1.45: 缩短白色卡片高度(去掉min-height,卡片随内容自适应);按钮margin-top:auto仍贴卡片底部6px padding,transform(-5px)保留不动 */
    .comp-form-card { padding: 12px 16px 1px !important; display: flex; flex-direction: column; }
    /* V3.1.57: 合盘首页首屏loading居中(八字页同款.loading组件) */
    #compositeForm .loading { display: flex; flex-direction: column; align-items: center; justify-content: center; min-height: 60vh; padding: 24px 0; }
    /* V3.1.46: 移动端两标题居中(覆盖base的translateX(6px),恢复居中) */
    .comp-form-section-title { transform: none !important; justify-content: center !important; }
    /* V3.1.28: 移除space-between(它制造了section1↔section2间的大间隙=标题上方空白);按钮margin-top:auto单独贴底;标题上方空白降至仅余3.5px(margin 2+1.5) */
    /* V3.1.49: 开始合盘按钮随上方整体上移7px(总-14px) */
    /* V3.1.50: 按钮下移4px(总-10px) */
    /* V3.1.51: 按钮再下移2.5px(总-7.5px) */
    .comp-form-card > button { margin-top: auto !important; transform: translateY(-7.5px) !important; }
    /* V3.1.18: 移动端section间距还原为8px;仅"选择对方信息"标题(含图标)下移1.5px对齐左侧图标 */
    /* V3.1.26: 虚线上下空间适中(上padding 6→16,section2仍被V3.1.21的4px覆盖),虚线在两section之间更居中 */
    /* V3.1.39: 横线再上移1px(9→8) */
    .comp-form-section { margin-bottom: 8px !important; padding-bottom: 8px !important; }
    /* V3.1.48: 移动端"我的信息"标题+卡片整体下移3.5px(仅section1) */
    .comp-form-section:first-of-type { margin-top: 3.5px !important; }
    /* V3.1.55: 选择对方信息标题上移3px(1.5→-1.5) */
    .comp-form-section:nth-of-type(2) .comp-form-section-title { margin-top: -1.5px !important; margin-bottom: 8px !important; }

    /* V3.1.21: 圈出的选择对方信息section整体下移2px,补偿padding-bottom保持section外高度不变(按钮位置不动) */
    /* V3.1.30: 还原"标题/图标不动"那点,section2 margin-top 6→2,标题随横线上移 */
    /* V3.1.49: 选择对方信息整体(标题+下拉+添加+卡片)上移7px(2→-5) */
    .comp-form-section:nth-of-type(2) { margin-top: -5px !important; padding-bottom: 4px !important; }
    /* 标题与内容间距略增,呼吸感更足 */
    .comp-form-section-title { font-size: 12px !important; margin-bottom: 10px !important; }
    /* 己方信息最小高度略减,信息行更紧凑 */
    .comp-self-info { min-height: 28px; }
    /* 概要信息内部padding增大+外边距减小,字段卡内更舒展、卡间更紧凑 */
    .comp-profile-summary { font-size: 11px !important; gap: 6px !important; flex-wrap: wrap !important; padding: 14px 16px !important; margin-bottom: 10px !important; }
    .cps-label { font-size: 10px !important; }
    .cps-value { font-size: 11px !important; }
    /* m6: 减少对方信息卡片底部留白,让开始合盘按钮能在一屏展示 */
    /* V3.1.17: 对方信息卡片下移3px(6→9),从总高度底部留白回收 */
    /* V3.1.29: 对方信息小卡片相对下拉下移4px(9→13) */
    .comp-profile-detail { margin-top: 13px !important; }
    /* V3.1.35: 我的信息小卡片下移2.5px */
    /* V3.1.52: 移动端"我的信息"小卡片再下移2.5px(2.5→5) */
    /* V3.1.53: 再下移2.5px(5→7.5) */
    /* V3.1.54: 再下移2.5px(7.5→10) */
    .comp-summary-me { margin-top: 10px !important; }
    /* V3.1.19: 选择对方身份+添加按钮+对方信息卡片整体再下移1.5px(叠加标题1.5px共3px) */
    /* V3.1.33: 上移2.5px(16→13.5) */
    .comp-profile-picker { gap: 6px !important; margin-top: 13.5px !important; }
    .comp-profile-select { font-size: 12px !important; padding: 6px 8px !important; }
    .comp-add-profile-btn { padding: 6px 10px !important; font-size: 11px !important; }
    /* V3.1.6: 移动端(<=768px)上移量调整为-24px */
    .comp-submit-btn { margin-top: -24px !important; font-size: 14px !important; padding: 11px !important; }
    /* V3.1.2: 合盘页一屏展示 - 减小page顶部padding,让内容更紧凑 */
    #pageComposite { padding-top: 4px !important; }
    /* V3.x: 对话页顶部padding与合盘页移动端一致(4px),使三tab与合盘首卡片顶部对齐 */
    #pageChat { padding-top: 4px !important; }

    /* V3.1.3: 移动端合盘结果独立页面 */
    /* V3.1.67: 移动端合盘结果页去圆角(八字/星盘),全屏效果贴合屏幕边缘 */
    .composite-result-page-content {
        display: flex;
        flex-direction: column;
        width: 100%;
        height: 100vh;
        height: 100dvh;
        min-height: 100vh;
        min-height: 100dvh;
        background: var(--bg);
        border-radius: 0;
        overflow: hidden;
        position: relative;
    }
    .composite-result-page-body {
        flex: 1;
        overflow-y: auto;
        -webkit-overflow-scrolling: touch;
        padding: calc(56px + env(safe-area-inset-top, 0px)) 16px calc(20px + env(safe-area-inset-bottom, 0px));
    }
    .composite-result-page-content .v3-page-modal-close {
        position: absolute;
        top: calc(12px + env(safe-area-inset-top, 0px));
        left: 12px;
    }

    .composite-cards { padding: 3px; }
    /* V3.1.2优化: 合盘方式弹窗两个大卡片,移动端保持单列大卡片布局 */
    .comp-type-cards { grid-template-columns: 1fr !important; gap: 12px; }
    .comp-type-card { padding: 20px 16px !important; }
    .comp-type-card .comp-type-card-icon { font-size: 32px !important; margin-bottom: 8px !important; }
    /* V3.3.24: 八字合盘SVG与星盘合盘♓同尺寸(移动端32px) */
    .comp-type-card.comp-type-bazi .comp-type-card-icon svg { width: 32px; height: 32px; }
    .comp-type-card h4 { font-size: 17px !important; margin: 0 0 10px !important; }
    .comp-type-card-tags { grid-template-columns: repeat(4, 1fr) !important; gap: 6px !important; max-width: 100% !important; }
    .comp-type-tag { font-size: 11px !important; padding: 4px 0 !important; }

    /* 合盘双方卡片 - V3.1.2优化: 我和对方改为一行两卡片,中间是合盘图标 */
    .comp-parties { grid-template-columns: 1fr auto 1fr !important; gap: 6px !important; align-items: center; }
    .comp-vs {
        transform: none !important;
        margin: 0;
        width: 36px;
        height: 36px;
        padding: 0;
    }
    .comp-party { padding: 10px 6px; }
    .comp-party-avatar { width: 36px; height: 36px; font-size: 16px; }
    .comp-party-avatar-zodiac { font-size: 20px !important; }
    .comp-party-label { font-size: 8px; margin-bottom: 4px; }
    .comp-party-dm, .comp-party-sun { font-size: 16px; }
    /* V3.1.6: 小屏(<=480px)与768px一致,上移量-24px */
    .comp-submit-btn { margin-top: -24px !important; font-size: 13px !important; padding: 10px !important; }
    #pageComposite { padding-top: 2px !important; }

    /* 五维评分 */
    .comp-dims-grid { grid-template-columns: 1fr !important; }

    /* ===== 7. 对话页适配 ===== */
    /* V3.1.2: 优化为更接近移动端对话列表样式(圆形头像+紧凑布局) */
    .chat-list-header { padding: 14px 12px 8px; }
    .chat-list-header h3 { font-size: 17px; }
    .chat-list-header p { font-size: 11px; }
    .chat-page-tabs { margin: 4px 12px 8px !important; }   /* V3.x: 移动端顶部间距与合盘首卡片(4px)一致 */
    .chat-list { padding: 0 12px 24px; }
    .msg-center-inline { padding: 0 12px 24px !important; }
    /* V3.1.2: chat-list-grid padding 改为0,避免与 .chat-list 的 padding 叠加导致宽度不对齐 */
    .chat-list-grid { padding: 0 0 80px; gap: 6px; }
    .chat-card {
        padding: 12px 12px;
        gap: 12px;
        border-radius: 12px;
        align-items: center;
    }
    .chat-card-icon-wrap {
        width: 44px; height: 44px; font-size: 20px;
        border-radius: 50%;  /* V3.1.2: 圆形头像,更像移动端对话列表 */
        box-shadow: 0 2px 6px rgba(0,0,0,0.08);
    }
    .chat-card-body {
        flex: 1; min-width: 0;
        display: flex; flex-direction: column; gap: 2px;
    }
    .chat-card-title {
        font-size: 14px; font-weight: 600;
        margin-bottom: 0;
        letter-spacing: 0.3px;
        overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
    }
    .chat-card-desc {
        font-size: 11px;
        color: var(--text-muted);
        overflow: hidden; text-overflow: ellipsis; white-space: nowrap;  /* V3.1.2: 单行截断,类似微信 */
    }
    .chat-card .chat-arrow { font-size: 16px; color: var(--text-muted); opacity: 0.6; }
    .chat-card-time {
        font-size: 10px; color: var(--text-muted);
        margin-left: auto; align-self: flex-start;
        flex-shrink: 0;
    }
    .chat-tag { font-size: 10px; padding: 2px 6px; min-width: 52px; text-align: center; display: inline-block; }

    /* 对话弹窗全屏 */
    .chat-modal-overlay { padding: 0 !important; }
    .chat-modal-box {
        height: 100vh !important;
        height: 100dvh !important;
        max-height: 100vh !important;
        max-height: 100dvh !important;
        border-radius: 0 !important;
        width: 100% !important;
        max-width: 100% !important;
    }
    .chat-modal-header { padding: 12px 14px; padding-top: calc(12px + env(safe-area-inset-top, 0px)); }
    .chat-modal-header h3 { font-size: 14px; }
    .chat-modal-close {
        width: 40px; height: 40px;
        display: flex; align-items: center; justify-content: center;
    }
    .chat-input-area {
        padding: 10px 12px;
        padding-bottom: calc(10px + env(safe-area-inset-bottom, 0px));
    }
    .chat-input { padding: 10px 12px; font-size: 14px; min-height: 48px; }
    .chat-send-btn { padding: 10px 14px; font-size: 13px; letter-spacing: 0.5px; }

    /* 消息气泡 */
    .chat-msg-bubble {
        max-width: 78% !important;
        font-size: 13px;
        padding: 10px 12px;
    }

    /* ===== 8. 我的页适配 ===== */
    .profile-header {
        padding: 16px 14px;
        gap: 12px;
        margin: 10px 12px 10px;
        border-radius: 14px;
    }
    .profile-avatar { width: 127.5px; height: 127.5px; }
    .profile-phone { font-size: 15px; }
    .profile-vip-tag { font-size: 10px; padding: 3px 9px; }
    .profile-menu { padding: 4px 12px; margin: 0 12px; }
    .profile-menu-item {
        padding: 12px 10px;
        font-size: 13px;
        gap: 10px;
    }
    .profile-menu-item .menu-icon {
        font-size: 16px;
        width: 22px;
    }
    .profile-menu-item .menu-arrow { font-size: 12px; }

    /* ===== 9. 欢迎页适配 - V3.1.2一屏完整展示(含登录按钮不被Tab栏遮挡) ===== */
    .welcome-hero {
        min-height: calc(100vh - 72px);
        padding: 16px 16px 12px;
    }
    .welcome-logo-wrap { width: 64px !important; height: 64px !important; margin-bottom: 10px !important; }
    .welcome-logo { font-size: 30px !important; }
    .welcome-title { font-size: 24px; letter-spacing: 4px; margin-bottom: 4px !important; }
    .welcome-slogan { font-size: 11px; margin-bottom: 14px !important; letter-spacing: 1.5px; }
    .welcome-features {
        grid-template-columns: 1fr 1fr !important;
        gap: 8px;
        margin: 0 0 16px;
    }
    .welcome-feature { padding: 10px 8px !important; border-radius: 12px !important; }
    .welcome-feature-icon { font-size: 20px; margin-bottom: 4px !important; }
    .welcome-feature-name { font-size: 12px; margin-bottom: 2px !important; }
    .welcome-feature-desc { font-size: 10px; }
    .welcome-cta-btn {
        height: 44px;
        font-size: 14px;
        padding: 0 24px;
        letter-spacing: 3px;
    }
}

/* V3.1.65: 移动端添加身份窗口复用合盘标题栏(隐藏原✕与标题行,日历切换器定位到标题栏右侧) */
/* V3.1.66: 移动端添加身份窗口全屏化,使用网站主题底色(var(--bg)),标题栏置顶sticky */
@media (max-width: 768px) {
    .profile-edit-modal .profile-edit-close { display: none !important; }
    .profile-edit-modal .profile-edit-header { display: none !important; }
    .profile-edit-modal .profile-edit-modal-content {
        padding: 0 !important;
        background: var(--bg);
        border-radius: 0;
        height: 100vh;
        height: 100dvh;
        max-height: 100dvh;
    }
    .profile-edit-modal .profile-edit-body {
        padding: 16px 14px calc(24px + env(safe-area-inset-bottom, 0px));
    }
    /* V3.3.23修复: 手机端添加关系/编辑身份的保存按钮也固定视口底部(与首次完善信息一致),
       键盘弹起时由JS按visualViewport差值上移,始终可见 */
    .profile-edit-modal .modal-btn-row {
        position: fixed;
        left: 0;
        right: 0;
        bottom: 0;
        z-index: 100;
        background: var(--bg);
        padding: 12px 16px calc(12px + env(safe-area-inset-bottom, 0px));
        margin: 0;
        border-top: 1px solid var(--border);
        box-shadow: 0 -2px 10px rgba(0,0,0,0.06);
    }
    .profile-edit-modal .profile-edit-body {
        padding-bottom: calc(88px + env(safe-area-inset-bottom, 0px));
    }
    .profile-edit-modal .composite-result-title-bar .profile-calendar-toggle {
        position: absolute;
        right: 10px;
        top: 50%;
        transform: translateY(-50%);
        margin: 0;
        z-index: 6;
    }
    /* V3.1.68: 移动端添加身份阳历/阴历切换按钮配色与PC端一致(中性底+次级文字+边框) */
    .profile-edit-modal .profile-calendar-toggle {
        background: var(--bg);
        color: var(--text-secondary);
        border: 1px solid var(--border);
    }
}

/* ===== 超小屏 (<=480px) 进一步优化 ===== */
@media (max-width: 480px) {
    .hero-title { font-size: 36px !important; letter-spacing: 6px !important; }
    .hero-subtitle { font-size: 11px !important; letter-spacing: 3px !important; }
    .hero-card { padding: 12px; }
    .fortune-period-btn { padding: 4px 3px; font-size: 10px; }

    .zodiac-3d-container {
        height: 300px !important;
        min-height: 260px !important;
    }

    .chat-card { padding: 10px 10px; gap: 8px; }
    .chat-card-icon-wrap { width: 34px; height: 34px; font-size: 16px; }
    .chat-card-title { font-size: 12px; }

    .profile-menu-item { padding: 11px 8px; font-size: 12px; }
    .profile-avatar { width: 55px; height: 55px; }

    .mobile-tab-yun {
        width: 56px;
        height: 56px;
        font-size: 28px;
        margin-top: -22px;
    }
    .mobile-tab-svg { width: 22px; height: 22px; }
    .mobile-tab-text { font-size: 9px; }

    /* V3.1.2: 超小屏保留2列布局以确保登录页一屏完整展示 */
    .welcome-features { grid-template-columns: 1fr 1fr !important; gap: 6px !important; }
    .welcome-feature { padding: 8px 6px !important; }
    .welcome-feature-icon { font-size: 18px !important; }
    .welcome-feature-name { font-size: 11px !important; }
    .welcome-feature-desc { font-size: 9px !important; }
}

/* ===== 极小屏 (<=380px) 兜底 ===== */
@media (max-width: 380px) {
    .hero-title { font-size: 30px !important; letter-spacing: 4px !important; }
    .hero-subtitle { font-size: 10px !important; letter-spacing: 2px !important; }
    .hero-slogan { font-size: 12px; }
    .fortune-period-btn { font-size: 9px; padding: 3px 2px; }

    .zodiac-3d-container {
        height: 260px !important;
        min-height: 220px !important;
    }

    .mobile-tab-yun {
        width: 52px;
        height: 52px;
        font-size: 26px;
        margin-top: -20px;
    }
    .mobile-tab-svg { width: 20px; height: 20px; }
    .mobile-tab-text { font-size: 8px; }

    .chat-msg-bubble { max-width: 85% !important; }
    .profile-phone { font-size: 13px; }
}

/* ============================================================
   V3.1 移动端所有弹窗全屏化 (移动端没有窗口概念)
   ============================================================ */
@media (max-width: 768px) {
    /* 遮罩层占满全屏,去除padding和居中 */
    .v3-page-modal-overlay,
    .paywall-overlay,
    .profile-edit-modal,
    .chat-modal-overlay,
    .login-modal,
    .membership-modal-overlay,
    .contacts-modal-overlay,
    .my-reports-modal-overlay,
    #feedbackModal,
    .v3-confirm-overlay,
    .announcement-modal-overlay,
    .v3-modal-overlay,
    .modal-overlay {
        padding: 0 !important;
        align-items: stretch !important;
        justify-content: stretch !important;
    }

    /* 内容容器全屏化 */
    .v3-page-modal-content,
    .paywall-card,
    .profile-edit-modal-content,
    .chat-modal-box,
    .login-modal-content,
    .membership-modal-content,
    .contacts-modal-content,
    .my-reports-modal-content,
    .feedback-content-wide,
    .feedback-content,
    .v3-confirm-content,
    .announcement-modal-content,
    .v3-modal-content,
    .modal-content,
    .comp-type-modal-content {
        max-width: 100% !important;
        width: 100% !important;
        max-height: 100vh !important;
        height: 100vh !important;
        min-height: 100vh !important;
        border-radius: 0 !important;
        margin: 0 !important;
        display: flex !important;
        flex-direction: column !important;
        overflow-y: auto !important;
        padding: calc(60px + env(safe-area-inset-top, 0px)) 16px calc(20px + env(safe-area-inset-bottom, 0px)) !important;
    }
    /* V3.3.24修复: 保存桌面/问题反馈弹窗手机端动态适配-100dvh贴合可视区(地址栏),content不滚动仅body内部滚动,提交按钮/底部完整可达 */
    #saveDesktopModal .v3-page-modal-content,
    #feedbackModal .v3-page-modal-content {
        height: 100dvh !important;
        min-height: 100dvh !important;
        max-height: 100dvh !important;
        overflow: hidden !important;
    }
    #saveDesktopModal .v3-page-modal-body,
    #feedbackModal .v3-page-modal-body {
        overflow-y: auto !important;
        -webkit-overflow-scrolling: touch !important;
    }
    /* V3.3.24修复: 确认弹窗(删除关系等)移动端保持小弹窗,不被全屏化 */
    #confirmDeleteModal .v3-confirm-content,
    .v3-confirm-content {
        max-width: 320px !important;
        width: calc(100% - 40px) !important;
        max-height: none !important;
        height: auto !important;
        min-height: auto !important;
        border-radius: var(--radius, 12px) !important;
        margin: auto !important;
        padding: 26px 20px 20px !important;
    }
    #confirmDeleteModal {
        align-items: center !important;
        justify-content: center !important;
    }
    /* V3.1.2: 合盘选择方式页面在移动端改为独立页面(无 ✕,顶部返回箭头,内容居中) */
    .comp-type-modal-content {
        padding: calc(48px + env(safe-area-inset-top, 0px)) 20px calc(48px + env(safe-area-inset-bottom, 0px)) !important;
        justify-content: center;
        background: var(--bg) !important;
    }
    .comp-type-modal-content .v3-page-modal-close {
        top: calc(16px + env(safe-area-inset-top, 0px)) !important;
        left: 14px !important;
        right: auto !important;
        width: 32px !important;
        height: 32px !important;
        background: transparent !important;
        border: none !important;
        color: var(--text-secondary) !important;
        font-size: 0 !important;
        box-shadow: none !important;
        display: flex !important;
        align-items: center !important;
        justify-content: center !important;
        padding: 0 !important;
    }
    .comp-type-modal-content .v3-page-modal-close::before {
        content: '';
        display: block;
        width: 16px;
        height: 16px;
        background: currentColor;
        -webkit-mask: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='currentColor' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'><polyline points='15 18 9 12 15 6'></polyline></svg>") center / contain no-repeat;
        mask: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='currentColor' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'><polyline points='15 18 9 12 15 6'></polyline></svg>") center / contain no-repeat;
    }
    .comp-type-modal-title { font-size: 22px !important; margin-top: 8px !important; }
    .comp-type-modal-desc { font-size: 15px !important; line-height: 1.85 !important; color: var(--text-secondary) !important; margin-bottom: 28px !important; letter-spacing: 0.5px !important; }
    .comp-type-cards-v2 { grid-template-columns: 1fr !important; gap: 16px !important; }
    .comp-type-card { padding: 28px 18px !important; }

    /* 弹窗内部布局: 顶部header + 中间滚动 + 底部操作区 */
    .v3-page-modal-body,
    .paywall-card-body,
    .chat-modal-body,
    .feedback-body,
    .modal-body {
        flex: 1 !important;
        overflow-y: auto !important;
        -webkit-overflow-scrolling: touch;
    }

    /* V3.1.3: 关闭按钮统一改为左上角SVG返回箭头(与合盘选择方式页一致) */
    .v3-page-modal-close,
    .chat-modal-close,
    .paywall-close,
    .feedback-close,
    .feedback-modal-close,
    .modal-close,
    .modal-close-btn,
    .login-modal-close,
    .legal-doc-close,
    .profile-edit-modal-close,
    .deep-paywall-close {
        position: absolute !important;
        top: calc(12px + env(safe-area-inset-top, 0px)) !important;
        left: 12px !important;
        right: auto !important;
        width: 32px !important;
        height: 32px !important;
        display: flex !important;
        align-items: center !important;
        justify-content: center !important;
        z-index: 10 !important;
        background: transparent !important;
        border: none !important;
        border-radius: 6px !important;
        box-shadow: none !important;
        font-size: 0 !important;
        color: transparent !important;
    }
    .v3-page-modal-close::before,
    .chat-modal-close::before,
    .paywall-close::before,
    .feedback-close::before,
    .feedback-modal-close::before,
    .modal-close::before,
    .modal-close-btn::before,
    .login-modal-close::before,
    .legal-doc-close::before,
    .profile-edit-modal-close::before,
    .deep-paywall-close::before {
        content: '';
        display: block;
        width: 18px;
        height: 18px;
        background: var(--text-secondary);
        -webkit-mask: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'><polyline points='15 18 9 12 15 6'></polyline></svg>") center / contain no-repeat;
        mask: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'><polyline points='15 18 9 12 15 6'></polyline></svg>") center / contain no-repeat;
    }

    /* V3.1.2: 弹窗标题居中显示,左侧让出返回按钮空间 */
    /* V3.1.2优化: 协议详情页只有"我已阅读"按钮,无返回按钮,标题不需要让出空间 */
    .v3-page-modal-header,
    .chat-modal-header,
    .paywall-card .paywall-header,
    .feedback-modal-content > h3,
    .profile-edit-modal-content > h3,
    .login-modal-header {
        padding-left: 60px !important;
        padding-right: 60px !important;
        justify-content: center !important;
        text-align: center !important;
    }
    .v3-page-modal-header h3,
    .chat-modal-header h3,
    .feedback-modal-content > h3,
    .profile-edit-modal-content > h3,
    .login-modal-header h3 {
        text-align: center !important;
        flex: 1 !important;
    }
    /* 我的模块四个子页面: 移动端标题栏按"今天改的标题栏"(合盘方式页)风格改造 */
    #membershipModal .v3-page-modal-header,
    #contactsModal .v3-page-modal-header,
    #reportsModal .v3-page-modal-header,
    #feedbackModal .v3-page-modal-header,
    #saveDesktopModal .v3-page-modal-header {
        position: absolute !important;
        top: 0 !important;
        left: 0 !important;
        right: 0 !important;
        z-index: 5 !important;
        height: calc(48px + env(safe-area-inset-top, 0px)) !important;
        padding: env(safe-area-inset-top, 0px) 60px 0 !important;
        background: var(--bg) !important;
        border-bottom: 1px solid var(--border) !important;
        align-items: center !important;
        justify-content: center !important;
    }
    #membershipModal .v3-page-modal-header h3,
    #contactsModal .v3-page-modal-header h3,
    #reportsModal .v3-page-modal-header h3,
    #feedbackModal .v3-page-modal-header h3,
    #saveDesktopModal .v3-page-modal-header h3 {
        font-size: 15px !important;
        font-weight: 700 !important;
        letter-spacing: 3px !important;
        color: var(--text-primary) !important;
    }
    /* 内容区顶部让出标题栏高度,避免被遮挡 */
    #membershipModal .v3-page-modal-content,
    #contactsModal .v3-page-modal-content,
    #reportsModal .v3-page-modal-content,
    #feedbackModal .v3-page-modal-content,
    #saveDesktopModal .v3-page-modal-content {
        padding-top: calc(48px + env(safe-area-inset-top, 0px)) !important;
        padding-bottom: calc(env(safe-area-inset-bottom, 0px)) !important;
        background: var(--bg) !important;
    }
    /* 返回按钮: 左上角返回箭头(黑),20px箭头/40px点击区 */
    #membershipModal .v3-page-modal-close,
    #contactsModal .v3-page-modal-close,
    #reportsModal .v3-page-modal-close,
    #feedbackModal .v3-page-modal-close,
    #saveDesktopModal .v3-page-modal-close {
        position: fixed !important;
        top: calc(env(safe-area-inset-top, 0px) - 1.5px) !important;
        left: 10px !important;
        right: auto !important;
        width: 40px !important;
        height: 48px !important;
        align-items: flex-end !important;
        justify-content: center !important;
        padding: 0 7.5px 13px 12.5px !important;
        color: var(--text-primary) !important;
        font-size: 0 !important;
        background: transparent !important;
        border: none !important;
        box-shadow: none !important;
        z-index: 10 !important;
    }
    #membershipModal .v3-page-modal-close::before,
    #contactsModal .v3-page-modal-close::before,
    #reportsModal .v3-page-modal-close::before,
    #feedbackModal .v3-page-modal-close::before {
        content: '' !important;
        display: block !important;
        width: 20px !important;
        height: 20px !important;
        background: currentColor !important;
        -webkit-mask: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'><polyline points='15 18 9 12 15 6'></polyline></svg>") center / contain no-repeat !important;
        mask: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'><polyline points='15 18 9 12 15 6'></polyline></svg>") center / contain no-repeat !important;
    }

    /* iOS安全区域适配 */
    .v3-page-modal-content,
    .paywall-card,
    .chat-modal-box,
    .login-modal-content,
    .membership-modal-content,
    .contacts-modal-content,
    .my-reports-modal-content,
    .feedback-content-wide {
        padding-top: env(safe-area-inset-top, 0px) !important;
        padding-bottom: env(safe-area-inset-bottom, 0px) !important;
    }

    /* 付费墙移动端已全屏,补充padding */
    .paywall-card {
        padding: 24px 18px !important;
        padding-top: calc(24px + env(safe-area-inset-top, 0px)) !important;
    }

    /* 会员卡/支付方式垂直排列 */
    .paywall-methods { flex-direction: column !important; gap: 8px !important; }

    /* 表单在移动端单列 */
    .form-row { flex-direction: column !important; gap: 8px !important; }

    /* 输入框避免iOS缩放 */
    input, select, textarea {
        font-size: 16px !important;
    }

    /* 反馈表单字段单列 */
    #feedbackModal .form-row { grid-template-columns: 1fr !important; }
    .fb-category-grid { grid-template-columns: repeat(2, 1fr) !important; }

}

/* ============================================================
   V3.1 暗色模式移动端微调
   ============================================================ */
@media (max-width: 768px) and (prefers-color-scheme: dark) {
    [data-theme="dark"] .mobile-tabbar {
        background: rgba(34, 46, 41, 0.98) !important;
    }
    [data-theme="dark"] .mobile-theme-toggle {
        background: var(--card-bg) !important;
        color: var(--text) !important;
    }
    [data-theme="dark"] .mobile-back-btn {
        background: transparent !important;
        color: var(--text-secondary) !important;
    }
}

/* ============================================================
   V3.1 补丁: 覆盖实际DOM中的弹窗类名(深度付费墙/登录/身份编辑等)
   ============================================================ */
@media (max-width: 768px) {
    /* 1. 深度解读付费墙(星盘/八字深度解读触发) */
    .deep-paywall-overlay,
    .v3-paywall-overlay,
    #v3PaywallOverlay {
        padding: 0 !important;
        align-items: stretch !important;
        justify-content: stretch !important;
    }
    .deep-paywall-card,
    .v3-paywall-card {
        max-width: 100% !important;
        width: 100% !important;
        max-height: 100vh !important;
        height: 100vh !important;
        min-height: 100vh !important;
        border-radius: 0 !important;
        margin: 0 !important;
        display: flex !important;
        flex-direction: column !important;
        padding: 24px 18px !important;
        padding-top: calc(24px + env(safe-area-inset-top, 0px)) !important;
        overflow-y: auto !important;
        -webkit-overflow-scrolling: touch;
    }

    /* 2. 登录弹窗外层(.login-modal 是外层遮罩) */
    .login-modal,
    .login-modal.active {
        padding: 0 !important;
        align-items: stretch !important;
        justify-content: stretch !important;
    }
    .login-modal-content {
        max-width: 100% !important;
        width: 100% !important;
        max-height: 100vh !important;
        height: 100vh !important;
        min-height: 100vh !important;
        border-radius: 0 !important;
        margin: 0 !important;
        padding: 32px 22px !important;
        padding-top: calc(32px + env(safe-area-inset-top, 0px)) !important;
        padding-bottom: calc(32px + env(safe-area-inset-bottom, 0px)) !important;
        display: flex !important;
        flex-direction: column !important;
        justify-content: center !important;  /* V3.1.2: 内容上下居中 */
        overflow-y: auto !important;
        -webkit-overflow-scrolling: touch;
    }
    .login-modal-close {
        position: absolute !important;
        top: calc(12px + env(safe-area-inset-top, 0px)) !important;
        right: 12px !important;
        width: 44px !important;
        height: 44px !important;
        min-width: 44px !important;
        min-height: 44px !important;
        display: flex !important;
        align-items: center !important;
        justify-content: center !important;
        z-index: 10 !important;
        border-radius: 50% !important;
    }

    /* 3. 身份编辑弹窗(无 -overlay 后缀,直接是 .profile-edit-modal 作为遮罩) */
    .profile-edit-modal {
        padding: 0 !important;
        align-items: stretch !important;
        justify-content: stretch !important;
    }

    /* 4. 合盘身份选择弹窗 */
    .v3-page-modal,
    .v3-modal {
        padding: 0 !important;
        align-items: stretch !important;
        justify-content: stretch !important;
    }

    /* 5. 兼容多种命名: overlay 结尾或 modal 结尾 */
    .modal,
    .v3-modal,
    .v3-page-modal {
        padding: 0 !important;
        align-items: stretch !important;
        justify-content: stretch !important;
    }

    /* 6. [已移除] 返回按钮force-show,现统一由标题栏.show控制 */

    /* 7. 修复付费墙paywall-card的max-width(原380px) */
    .paywall-card,
    .deep-paywall-card,
    .v3-paywall-card,
    .unlock-card-v2 {
        max-width: 100% !important;
        width: 100% !important;
    }

    /* 8. 通用: 任何 .xxx-modal 或 .xxx-overlay 在移动端去掉 max-width 限制 */
    [class*="-modal-content"],
    [class*="-modal-card"],
    [class*="-paywall-card"],
    [class*="-overlay-card"] {
        max-width: 100% !important;
    }

    /* 合盘-选择合盘方式弹窗: 移动端标题栏与合盘结果页一致 */
    .comp-type-modal-content .v3-page-modal-close {
        left: 10px !important;
        top: env(safe-area-inset-top, 0px) !important;
        width: 40px !important;
        height: 48px !important;
        align-items: flex-end !important;
        justify-content: center !important;
        padding: 0 7.5px 13px 12.5px !important;
        color: var(--text-primary) !important;
        z-index: 6 !important;
    }
    .comp-type-modal-content .v3-page-modal-close::before {
        width: 20px !important;
        height: 20px !important;
    }
    /* 标题: 顶部冻结标题栏,字号与合盘一致;白底黑字黑箭头 */
    .comp-type-modal-content .comp-type-modal-title {
        position: absolute !important;
        top: 0 !important;
        left: 0 !important;
        right: 0 !important;
        z-index: 5 !important;
        height: calc(48px + env(safe-area-inset-top, 0px)) !important;
        padding-top: env(safe-area-inset-top, 0px) !important;
        margin: 0 !important;
        background: var(--bg) !important;
        border-bottom: 1px solid var(--border) !important;
        display: flex !important;
        align-items: center !important;
        justify-content: center !important;
        font-size: 15px !important;
        font-weight: 700 !important;
        letter-spacing: 3px !important;
        color: var(--text-primary) !important;
    }
}

/* V3.1.73: 移动端-合盘添加身份: 下拉列表改为整页底部弹窗,避免展示不全/滚动条失效 */
@media (max-width: 768px) {
    .custom-select-panel.mobile-sheet,
    .profile-edit-modal-content .city-tree-panel.mobile-sheet {
        top: auto !important;
        left: 0 !important;
        right: 0;
        bottom: 0;
        width: 100% !important;
        max-height: 85vh !important;
        transform: none !important;
        border-radius: 16px 16px 0 0 !important;
        box-shadow: 0 -6px 30px rgba(0,0,0,0.3) !important;
        padding-bottom: env(safe-area-inset-bottom, 0px) !important;
        display: flex !important;
        flex-direction: column;
        overflow: hidden !important;
    }
    .custom-select-panel.mobile-sheet .custom-select-options {
        max-height: calc(85vh - 56px);
        overflow-y: auto;
        -webkit-overflow-scrolling: touch;
        padding: 4px 0 8px;
    }
    .profile-edit-modal-content .city-tree-panel.mobile-sheet .city-tree-search {
        flex: none;
    }
    .profile-edit-modal-content .city-tree-panel.mobile-sheet .city-tree-list {
        max-height: calc(85vh - 110px);
        min-height: 160px;
        overflow-y: auto;
        -webkit-overflow-scrolling: touch;
    }
    .cs-sheet-header {
        display: flex;
        align-items: center;
        justify-content: space-between;
        padding: 14px 16px;
        border-bottom: 1px solid var(--border);
        position: sticky;
        top: 0;
        background: var(--card-bg);
        z-index: 2;
        flex: none;
    }
    .cs-sheet-title {
        font-size: 15px;
        font-weight: 600;
        color: var(--text);
    }
    .cs-sheet-close {
        font-size: 20px;
        line-height: 1;
        color: var(--text-muted);
        padding: 4px 10px;
        cursor: pointer;
    }
    .mobile-sheet-backdrop {
        position: fixed;
        inset: 0;
        left: 0;
        top: 0;
        width: 100%;
        height: 100%;
        background: rgba(0,0,0,0.45);
        z-index: 100;
    }

    /* V3.1.74: 移动端-合盘添加身份: 自定义下拉(年/月/日/时辰/身份/性别)内容居中展示 */
    .custom-select-panel.mobile-sheet .custom-select-options {
        padding: 8px 0;
    }
    .custom-select-panel.mobile-sheet .custom-select-option {
        justify-content: center;
        gap: 8px;
        text-align: center;
    }
    .custom-select-panel.mobile-sheet .cs-option-label {
        text-align: center;
    }
}

/* ============================================================
   对话对话框样式分层修复
   覆盖 12107 行 `.chat-modal-header,.chat-modal-body{padding-left/right:60px!important}`
   - 桌面端(PC): 还原原始布局 — 标题居中、右上角 X 关闭、输入框左右留白
   - 移动端: 返回箭头(左) + 头像/标题整体居中(与返回箭头垂直对齐),
            header/footer 显式加深横线, 输入框贯通边缘
   ============================================================ */
.chat-modal-overlay .chat-modal-box {
    box-sizing: border-box !important;
    /* v353: 清除通用弹窗规则(0,1,0) 给 .chat-modal-box 加的 padding:16px !important,
       否则 box 内容区左右各缩 16px, 横幅/footer/输入框的 width:100% 永远到不了边 */
    padding-left: 0 !important;
    padding-right: 0 !important;
}

/* ---- 桌面端: 强制还原为原始 X 关闭按钮(右上角), 不显示返回箭头 ---- */
.chat-modal-overlay .chat-modal-header .chat-modal-close {
    position: absolute !important;
    right: 14px !important;
    left: auto !important;
    top: 50% !important;
    transform: translateY(-50%) !important;
    font-size: 18px !important;
    color: var(--text-muted) !important;
    background: transparent !important;
    border: none !important;
    padding: 4px 8px !important;
    width: auto !important;
    height: auto !important;
    display: block !important;
    z-index: 10 !important;
}
.chat-modal-overlay .chat-modal-close::before {
    content: none !important;
}
/* 桌面端: 给输入框左右留白, 避免贴左 */
.chat-modal-overlay .chat-input-area {
    padding: 12px 16px !important;
}

/* ---- 移动端: 头部标题居中 + banner/剩余条/输入栏贯通两侧 (v350 终极修复) ---- */
/* 关键修复 ①: 清掉 10819 行残留的 transform: translate(-50%,-50%)
   (10819 用 absolute 居中; 7939 用 position:static 覆盖; 但 transform 没被清, 导致 h3 被左偏 50% 自身宽度) */
@media (max-width: 768px) {
    .chat-modal-overlay .chat-modal-header {
        display: flex !important;
        flex-direction: row !important;
        align-items: center !important;
        justify-content: center !important;
        position: relative !important;
        box-sizing: border-box !important;
        min-height: 56px !important;
        height: auto !important;
        width: 100% !important;
        margin: 0 !important;
        padding: 8px 14px !important;
        gap: 0 !important;                  /* 覆盖 10811 的 gap:10px */
        border-bottom: 1px solid #B0BDB6 !important;
    }
    .chat-modal-overlay .chat-modal-header h3 {
        position: static !important;         /* 覆盖 10819 的 absolute */
        transform: none !important;          /* ★ 关键: 覆盖 10819 残留的 translate(-50%,-50%) */
        left: auto !important;
        top: auto !important;
        flex: 0 0 auto !important;
        margin: 0 auto !important;
        display: flex !important;
        align-items: center !important;
        justify-content: center !important;
        gap: 8px !important;
        font-size: 15px !important;
        line-height: 1.2 !important;
        width: max-content !important;
        max-width: calc(100vw - 120px) !important;
        z-index: 1 !important;
    }
    .chat-modal-overlay .chat-modal-header .agent-icon {
        height: 36px !important;
        width: auto !important;
        object-fit: contain !important;
        flex-shrink: 0 !important;
        background: transparent !important;
        border-radius: 0 !important;
    }
    .chat-modal-overlay .chat-modal-header .chat-modal-avatar {
        height: 36px !important;
        width: 36px !important;
    }
    .chat-modal-overlay .chat-modal-header .chat-modal-avatar .chat-avatar-emoji { font-size: 24px; }
    .chat-modal-overlay .chat-modal-header .chat-modal-close {
        position: absolute !important;
        left: 10px !important;
        right: auto !important;
        top: 50% !important;
        transform: translateY(-50%) !important;
        width: 32px !important;
        height: 32px !important;
        margin: 0 !important;
        padding: 0 !important;
        display: flex !important;
        align-items: center !important;
        justify-content: center !important;
        font-size: 0 !important;
        color: transparent !important;
        background: transparent !important;
        border: none !important;
        box-shadow: none !important;
        border-radius: 8px !important;
        z-index: 10 !important;
    }
    .chat-modal-overlay .chat-modal-close::before {
        content: '' !important;
        display: block !important;
        width: 20px !important;
        height: 20px !important;
        background: #6B7280 !important;
        -webkit-mask: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'><polyline points='15 18 9 12 15 6'></polyline></svg>") center / contain no-repeat !important;
        mask: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'><polyline points='15 18 9 12 15 6'></polyline></svg>") center / contain no-repeat !important;
    }
    /* 内容区: body 边距清零, 让所有子元素能贯通到弹窗边缘 */
    .chat-modal-overlay .chat-modal-body,
    #chatModalOverlay .chat-modal-body {
        padding-left: 0 !important;
        padding-right: 0 !important;
        margin: 0 !important;
        align-items: stretch !important;
    }
    .chat-modal-overlay .chat-modal-messages,
    #chatModalOverlay .chat-modal-messages {
        padding: 12px 14px !important;
    }
    /* 关键修复 ② (v351 ID打靶版): 同时用类+ID选择器, 防止任何层级隔离 */
    .chat-modal-overlay .chat-scope-banner,
    #chatModalOverlay .chat-scope-banner,
    #chatModalOverlay #dailyScopeBanner,
    #chatModalOverlay #vipScopeBanner,
    #chatModalOverlay #paidScopeBanner {
        display: block !important;
        margin: 0 !important;
        margin-left: 0 !important;
        margin-right: 0 !important;
        width: 100% !important;
        max-width: none !important;
        min-width: 0 !important;
        border-radius: 0 !important;
        padding: 10px 14px !important;
        box-sizing: border-box !important;
        left: 0 !important;
        right: 0 !important;
    }
    /* 关键修复 ②: 剩余条强制 display: flex, 覆盖 7902 的 inline-flex + border-radius:999px */
    .chat-modal-overlay .chat-remaining-bar,
    #chatModalOverlay .chat-remaining-bar {
        display: flex !important;
        align-self: stretch !important;
        width: 100% !important;
        max-width: none !important;
        margin: 0 0 10px !important;
        border-radius: 0 !important;
        justify-content: center !important;
        padding: 8px 14px !important;
        box-sizing: border-box !important;
    }
    /* 关键修复 ③ (v351 ID打靶版): footer 显式贯通两侧 + 加深 border-top 横线 */
    .chat-modal-overlay .chat-modal-footer,
    #chatModalOverlay .chat-modal-footer,
    #chatModalFooter {
        display: block !important;
        width: 100% !important;
        max-width: none !important;
        min-width: 0 !important;
        margin: 0 !important;
        margin-left: 0 !important;
        margin-right: 0 !important;
        padding: 10px 16px 14px !important;
        padding-bottom: calc(14px + env(safe-area-inset-bottom, 0px)) !important;
        border-top: 1px solid var(--border) !important;
        border-radius: 0 !important;
        left: 0 !important;
        right: 0 !important;
        box-sizing: border-box !important;
    }
    /* 输入栏贯通两侧, 并取消 8101 残留的 border-top (否则会出现双横线) */
    .chat-modal-overlay .chat-input-area,
    #chatModalOverlay .chat-input-area,
    #chatModalFooter .chat-input-area {
        display: flex !important;
        width: 100% !important;
        max-width: none !important;
        min-width: 0 !important;
        margin: 0 !important;
        padding: 10px 0 !important;
        border-top: none !important;
        box-sizing: border-box !important;
        left: 0 !important;
        right: 0 !important;
    }
    .chat-modal-overlay .chat-input-area .chat-send-btn,
    #chatModalFooter .chat-send-btn {
        margin-right: 0 !important;
    }
}

/* ===== Toast 提示(八字命理样式) ===== */
.toast-overlay {
    position: fixed; top: 0; left: 0; right: 0; bottom: 0;
    z-index: 99999; display: flex; align-items: center; justify-content: center;
    pointer-events: none; opacity: 0; transition: opacity 0.3s ease;
}
.toast-overlay.show { opacity: 1; }
.toast-box {
    background: rgba(0,0,0,0.55);
    color: #fff;
    padding: 12px 24px;
    border-radius: 24px;
    font-size: 14px;
    max-width: 380px;
    text-align: center;
    line-height: 1.5;
    letter-spacing: 0.5px;
    box-shadow: 0 8px 32px rgba(0,0,0,0.12);
    animation: toastPop 0.4s cubic-bezier(0.16, 1, 0.3, 1);
}
.toast-success .toast-box { background: rgba(62,124,103,0.85); }
.toast-error .toast-box { background: rgba(148,90,90,0.85); }
.toast-info .toast-box { background: rgba(0,0,0,0.55); }
.toast-box .toast-title {
    display: block; font-size: 16px; font-weight: 700; margin-bottom: 6px;
}
.toast-box .toast-sub {
    display: block; font-size: 14px; opacity: 0.9;
}
@keyframes toastPop {
    from { opacity: 0; transform: translateY(16px) scale(0.94); }
    to { opacity: 1; transform: translateY(0) scale(1); }
}

/* ============================================================
   对话咨询窗口 = 报告页咨询窗口样式 (deep_interpretation)
   由 app.js openChatModal() 生成: #chatModalOverlay > .modal > header/body/footer
   用 ID 选择器压过通用 .modal-* 规则, 不影响登录/会员等其他弹窗
   ============================================================ */
#chatModalOverlay {
    opacity: 1 !important;
    pointer-events: all !important;
    padding: 0 !important;
    z-index: 2000 !important;
    backdrop-filter: none !important;
    -webkit-backdrop-filter: none !important;
}
#chatModalOverlay .modal {
    background: var(--card-bg); border-radius: var(--radius);
    width: 90%; max-width: 560px; max-height: 85vh;
    display: flex; flex-direction: column;
    box-shadow: 0 20px 60px rgba(0,0,0,0.3);
    animation: modalSlideUp 0.35s cubic-bezier(0.16, 1, 0.3, 1);
}
#chatModalOverlay .modal-header {
    display: flex; align-items: center; justify-content: space-between;
    padding: 12px 20px; border-bottom: 1px solid var(--border);
    margin-bottom: 0 !important;
    flex-shrink: 0; position: relative;
}
#chatModalOverlay .modal-header h3 {
    font-size: 16px; color: var(--primary); letter-spacing: 2px;
    display: flex; align-items: center; gap: 8px;
    margin: 0 !important;
}
#chatModalOverlay .chat-modal-avatar {
    width: auto; height: auto; flex-shrink: 0;
    display: inline-flex; align-items: center; justify-content: center;
    background: transparent !important; border-radius: 0; overflow: hidden;
}
#chatModalOverlay .chat-modal-avatar img {
    height: 32px; width: auto; max-width: 44px; object-fit: contain;
    background: transparent !important;
}
#chatModalOverlay .chat-modal-avatar .chat-avatar-emoji {
    font-size: 28px; line-height: 1; flex-shrink: 0;
}
/* V3.3.24: 八字合盘用固定方向SVG太极(黑在右=左右区分,全平台一致),统一22px */
#chatModalOverlay .chat-modal-avatar.avatar-type-composite_bazi .chat-avatar-emoji,
#chatModalOverlay .chat-msg.agent .msg-avatar.avatar-type-composite_bazi .chat-avatar-emoji {
    display: flex; align-items: center; justify-content: center; line-height: 1;
}
#chatModalOverlay .chat-modal-avatar.avatar-type-composite_bazi .chat-avatar-emoji svg,
#chatModalOverlay .chat-msg.agent .msg-avatar.avatar-type-composite_bazi .chat-avatar-emoji svg {
    width: 22px; height: 22px; display: block;
}
#chatModalOverlay .agent-quota {
    font-size: 12px; padding: 3px 10px; border-radius: 12px;
    background: var(--primary-bg); color: var(--primary);
    font-weight: 600; flex-shrink: 0; line-height: 1.5; margin-left: 2px;
}
#chatModalOverlay .agent-quota.exhausted {
    background: rgba(217,74,74,0.1); color: var(--danger);
}
#chatModalOverlay .modal-close {
    position: static; transform: none;
    background: none; border: none; font-size: 22px;
    color: var(--text-muted); cursor: pointer; padding: 4px 8px;
    line-height: 1; transition: color 0.2s;
    width: auto; height: auto; flex-shrink: 0;
}
#chatModalOverlay .modal-close:hover { color: var(--danger); }
#chatModalOverlay .modal-close::before { content: none !important; }
#chatModalOverlay .modal-body {
    flex: 1; overflow: hidden; min-height: 200px; max-height: 600px;
    display: flex; flex-direction: column;
    padding: 0;
}
#chatModalOverlay .chat-modal-messages {
    flex: 1; overflow-y: auto; padding: 16px 24px;
    display: flex; flex-direction: column; gap: 12px; min-height: 0;
    -webkit-overflow-scrolling: touch;
}
#chatModalOverlay .chat-modal-messages > :first-child { margin-top: 3px; }
/* 消息气泡: 与报告页 .chat-msg 一致 */
#chatModalOverlay .chat-msg {
    max-width: 85%; padding: 10px 14px; border-radius: 12px;
    font-size: 13px; line-height: 1.7; word-wrap: break-word;
    animation: msgIn 0.3s ease;
}
#chatModalOverlay .chat-msg.agent {
    align-self: flex-start; background: var(--bg);
    border: 1px solid var(--border); color: var(--text-secondary);
}
#chatModalOverlay .chat-msg.agent.with-avatar {
    display: flex; align-items: flex-start; gap: 8px;
    padding: 10px 12px;
}
#chatModalOverlay .chat-msg.agent .msg-avatar {
    flex-shrink: 0; width: 32px; height: 32px;
    border-radius: 0; overflow: visible;
    background: transparent !important;
    display: flex; align-items: center; justify-content: center;
}
#chatModalOverlay .chat-msg.agent .msg-avatar img {
    width: 100%; height: 100%; object-fit: contain;
}
#chatModalOverlay .chat-msg.agent .msg-avatar .chat-avatar-emoji { font-size: 24px; line-height: 1; }
#chatModalOverlay .chat-msg.agent .msg-body { flex: 1; min-width: 0; }
#chatModalOverlay .chat-msg.user {
    align-self: flex-end; background: var(--primary); color: #fff;
    border-radius: 12px !important;
}
#chatModalOverlay .chat-msg .msg-label {
    font-size: 10px; opacity: 0.7; margin-bottom: 4px;
    letter-spacing: 1px;
}
#chatModalOverlay .chat-msg.agent .msg-body .chat-answer p { margin: 0 0 8px; line-height: 1.8; }
#chatModalOverlay .chat-msg.agent .msg-body .chat-answer p:last-child { margin-bottom: 0; }
#chatModalOverlay .chat-msg.agent .msg-body .chat-answer strong { font-weight: 700; color: var(--text); }
/* 失败重试组件(与报告页 .chat-msg.agent-retry 一致) */
#chatModalOverlay .chat-msg.agent-retry {
    align-self: flex-start; background: linear-gradient(135deg, rgba(255,241,240,0.9) 0%, rgba(255,235,233,0.9) 100%);
    border: 1px solid rgba(217,74,74,0.15); border-radius: 14px;
    padding: 10px 10px 10px 14px; max-width: 90%; font-size: 13px;
    animation: msgIn 0.3s ease;
    display: flex; flex-direction: row; align-items: center;
    justify-content: flex-start; gap: 6px;
}
[data-theme="dark"] #chatModalOverlay .chat-msg.agent-retry {
    background: linear-gradient(135deg, rgba(60,30,30,0.9) 0%, rgba(50,25,25,0.9) 100%);
    border-color: rgba(239,83,80,0.15);
}
#chatModalOverlay .chat-msg.agent-retry .retry-text {
    color: #cf1322; line-height: 1.7; font-size: 14px;
    font-weight: 500; letter-spacing: 0.5px;
}
[data-theme="dark"] #chatModalOverlay .chat-msg.agent-retry .retry-text {
    color: #ff9999;
}
#chatModalOverlay .chat-msg.agent-retry .retry-btn {
    display: inline-flex; align-items: center; gap: 4px;
    padding: 5px 14px; border: none;
    background: linear-gradient(135deg, #fff 0%, #fafafa 100%);
    color: #595959; border-radius: 14px;
    cursor: pointer; font-size: 11px; font-family: var(--font);
    transition: all 0.3s ease;
    box-shadow: 0 1px 5px rgba(0,0,0,0.06), 0 0 0 1px rgba(0,0,0,0.04);
    letter-spacing: 0.5px;
}
[data-theme="dark"] #chatModalOverlay .chat-msg.agent-retry .retry-btn {
    background: linear-gradient(135deg, rgba(255,255,255,0.08) 0%, rgba(255,255,255,0.04) 100%);
    color: #c9d1d9;
    box-shadow: 0 1px 5px rgba(0,0,0,0.2), 0 0 0 1px rgba(255,255,255,0.06);
}
#chatModalOverlay .chat-msg.agent-retry .retry-btn:hover {
    background: linear-gradient(135deg, var(--primary) 0%, #3a7bc8 100%);
    color: #fff;
    box-shadow: 0 3px 10px rgba(74,144,217,0.3);
    transform: translateY(-1px);
}
#chatModalOverlay .chat-msg.agent-retry .retry-btn:active {
    transform: translateY(0) scale(0.96);
    box-shadow: 0 1px 5px rgba(74,144,217,0.2);
}
#chatModalOverlay .msg-time { font-size: 11px; color: var(--text-muted); margin-top: 4px; }
/* typing 指示器(与报告页 .chat-typing 一致, 全局已有同名定义) */
#chatModalOverlay .chat-typing {
    align-self: flex-start; padding: 10px 14px;
    display: flex; gap: 4px;
}
#chatModalOverlay .chat-typing span {
    width: 7px; height: 7px; border-radius: 50%;
    background: var(--text-muted);
    animation: typingBounce 1.2s ease-in-out infinite;
}
#chatModalOverlay .chat-typing span:nth-child(2) { animation-delay: 0.2s; }
#chatModalOverlay .chat-typing span:nth-child(3) { animation-delay: 0.4s; }
/* 快捷提问 chips 对齐新布局 */
#chatModalOverlay .chat-quick-questions { margin: 14px 0 0 0; align-self: flex-start; }
/* V3.1.3: 对话模块次数tab背景色与报告页一致(8%透明,非实色) */
#chatModalOverlay { --primary-bg: rgba(74,111,98,0.08); }
/* ===== 星盘报告颜色覆盖(zodiac/composite_zodiac 使用各自报告页配色) ===== */
#chatModalOverlay[data-report-type="zodiac"] {
    --primary: #3A5A8C; --primary-bg: rgba(58,90,140,0.08);
    --border: #D8DDE8; --bg: #F4F6FA;
}
#chatModalOverlay[data-report-type="composite_zodiac"] {
    --primary: #4A6A9C; --primary-bg: rgba(74,106,156,0.08);
    --border: #DCE2EA; --bg: #F5F7FA;
}
/* 底部输入区: 与报告页 .modal-footer / .chat-input-row 一致 */
#chatModalOverlay .modal-footer {
    padding: 12px 24px 18px; border-top: 1px solid var(--border);
}
#chatModalOverlay .chat-input-row {
    display: flex; gap: 8px; align-items: stretch;
}
#chatModalOverlay .chat-input-wrap {
    flex: 1; position: relative; display: flex;
}
#chatModalOverlay .chat-input-wrap .chat-input {
    width: 100%; padding: 12px 14px; border: 1px solid var(--border);
    border-radius: 10px; font-size: 13px; font-family: var(--font);
    background: var(--bg); color: var(--text);
    resize: none; min-height: 44px; max-height: 120px;
    flex: none;  /* V3.3.23修复: 去掉flex:1避免row-flex+align-items:stretch把高度压回按钮高度,回车换行才能增高 */
    transition: border-color 0.2s; line-height: 1.5;
}
#chatModalOverlay .chat-input-wrap .chat-input:focus {
    border-color: var(--primary); box-shadow: 0 0 0 3px rgba(74,144,217,0.1);
}
#chatModalOverlay .chat-input-wrap .chat-input:disabled { opacity: 0.5; cursor: not-allowed; }
#chatModalOverlay .chat-input-wrap .char-count {
    position: absolute; bottom: 4px; right: 10px;
    font-size: 10px; color: var(--text-muted);
    pointer-events: none; line-height: 1;
}
#chatModalOverlay .chat-input-wrap .char-count.warn { color: var(--warning); font-weight: 600; }
#chatModalOverlay .chat-input-wrap .char-count.over { color: var(--danger); font-weight: 700; }
#chatModalOverlay .chat-send-btn {
    padding: 12px 20px; border: none; border-radius: 10px;
    background: var(--primary); color: #fff; font-size: 14px;
    font-family: var(--font); cursor: pointer; letter-spacing: 1px;
    transition: all 0.2s; white-space: nowrap; font-weight: 600;
}
#chatModalOverlay .chat-send-btn:hover { opacity: 0.9; }
#chatModalOverlay .chat-send-btn:disabled { opacity: 0.4; cursor: not-allowed; }

/* ===== 移动端: 与报告页咨询窗口移动端一致 ===== */
@media (max-width: 768px) {
    #chatModalOverlay { padding: 0 !important; align-items: stretch !important; justify-content: stretch !important; }
    #chatModalOverlay .modal {
        width: 100%; max-width: 100%; height: 100vh; height: 100dvh; max-height: 100vh; max-height: 100dvh;
        border-radius: 0; animation: none;
        padding-top: env(safe-area-inset-top, 0px);
        padding-bottom: env(safe-area-inset-bottom, 0px);
    }
    #chatModalOverlay .modal-header {
        padding: 6px 12px; padding-top: calc(6px + env(safe-area-inset-top, 0px));
        justify-content: center !important; margin-bottom: 0 !important;
    }
    #chatModalOverlay .modal-header h3 { font-size: 14px; }
    /* V3.3.24: 标题栏缩短1/3(头像58->40等比缩小不变形) */
    /* 再缩1/3: 头像40->28等比缩小不变形, 高度随 padding 6px 收窄 */
    #chatModalOverlay .chat-modal-avatar { height: 28px; }
    #chatModalOverlay .chat-modal-avatar img { max-width: 28px; }
    #chatModalOverlay .chat-modal-avatar .chat-avatar-emoji { font-size: 14px; }
    /* V3.3.24: 八字合盘SVG太极移动端16px */
    #chatModalOverlay .chat-modal-avatar.avatar-type-composite_bazi .chat-avatar-emoji svg { width: 16px; height: 16px; }
    #chatModalOverlay .modal-close {
        position: absolute !important;
        top: calc(4px + env(safe-area-inset-top, 0px)) !important;
        left: 12px !important; right: auto !important;
        font-size: 0 !important; color: var(--text-secondary) !important;
        background: transparent !important; border: none !important;
        width: 32px !important; height: 32px !important;
        display: flex !important; align-items: center !important; justify-content: center !important;
        padding: 0 !important; box-shadow: none !important;
        z-index: 10 !important;
    }
    #chatModalOverlay .modal-close::after {
        content: ''; display: block; width: 16px; height: 16px;
        background: currentColor;
        -webkit-mask: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='currentColor' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'><polyline points='15 18 9 12 15 6'></polyline></svg>") center / contain no-repeat;
        mask: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='currentColor' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'><polyline points='15 18 9 12 15 6'></polyline></svg>") center / contain no-repeat;
    }
    #chatModalOverlay .modal-body {
        flex: 1 !important; overflow: hidden !important;
        padding: 0 !important;
    }
    #chatModalOverlay .chat-modal-messages {
        padding: 12px 16px !important;
    }
    #chatModalOverlay .chat-input-wrap .chat-input {
        min-height: 48px; max-height: 150px; padding: 15px 17px; font-size: 14px;
    }
    #chatModalOverlay .chat-send-btn { padding: 15px 25px; font-size: 15px; }
    #chatModalOverlay .modal-footer {
        padding: 10px 16px 14px; padding-bottom: calc(14px + env(safe-area-inset-bottom, 0px));
    }
}

/* V3.3.18: 付费墙一屏自适应最终覆盖——无滚动条,卡片按内容自然高度,
   内容超过可视区时由 JS(v3FitPaywallToScreen)整体缩放,确保"我已支付"按钮完整可见。
   需 !important 覆盖移动端全屏化规则(强制 height:100vh / overflow-y:auto)。 */
.paywall-card {
    height: auto !important;
    min-height: auto !important;
    max-height: none !important;
    overflow: hidden !important;
    overflow-y: hidden !important;
    display: flex !important;
    flex-direction: column !important;
    justify-content: space-between !important;
}


/* V3.3.25: 仅PC端首页三卡片下方动态指示上移10px(移动端保持原样) */
@media (min-width: 769px) {
    .scroll-indicator { bottom: 86px; }
}

/* V3.3.25: PC端弹窗内容超高可滚动(月卡+年卡都开通后, 会员中心列表能正常滑到底) */
@media (min-width: 769px) {
    .v3-page-modal-content { max-height: 90vh; overflow: hidden; }
    .v3-page-modal-body { overflow-y: auto; -webkit-overflow-scrolling: touch; }
}

/* V3.3.25: 会员中心(月卡+年卡都开通)PC端给内容固定可用高度, 内层滚动到底 */
@media (min-width: 769px) {
    #membershipModal .v3-page-modal-content { height: 90vh; max-height: 90vh; }
}

/* V3.3.25: 移动端通用宽内容弹窗同样内层滚动到底(100vh/100dvh贴合可视区,
    body最小高度为0使其成为内部滚动容器, 否则卡片底部被外层overflow:hidden裁掉无法滚到。
    !important 覆盖弹窗内部旧有布局规则) */
@media (max-width: 768px) {
    .v3-page-modal-content,
    #membershipModal .v3-page-modal-content,
    #contactsModal .v3-page-modal-content,
    #reportsModal .v3-page-modal-content,
    #feedbackModal .v3-page-modal-content,
    #saveDesktopModal .v3-page-modal-content {
        height: 100vh !important;
        height: 100dvh !important;
        max-height: 100vh !important;
        max-height: 100dvh !important;
        min-height: 0 !important;
        overflow: hidden !important;
        display: flex !important;
        flex-direction: column !important;
    }
    .v3-page-modal-body,
    #membershipModal .v3-page-modal-body,
    #contactsModal .v3-page-modal-body,
    #reportsModal .v3-page-modal-body,
    #feedbackModal .v3-page-modal-body,
    #saveDesktopModal .v3-page-modal-body {
        flex: 1 1 0 !important;
        min-height: 0 !important;
        overflow-y: auto !important;
        -webkit-overflow-scrolling: touch !important;
        overscroll-behavior: contain !important;
    }
    #membershipModal .v3-page-modal-body {
        padding-bottom: calc(20px + env(safe-area-inset-bottom, 0px));
    }
}

/* V3.3.25: JS按真实可视高度兜底(兼容不支持dvh的旧内核/地址栏), 仅移动端 */
@media (max-width: 768px) {
    #membershipModal.v3-has-fixed-height .v3-page-modal-content,
    #contactsModal.v3-has-fixed-height .v3-page-modal-content,
    #reportsModal.v3-has-fixed-height .v3-page-modal-content,
    #feedbackModal.v3-has-fixed-height .v3-page-modal-content,
    #saveDesktopModal.v3-has-fixed-height .v3-page-modal-content {
        height: var(--v3-modal-h) !important;
        max-height: var(--v3-modal-h) !important;
    }
}

/* V3.3.25修复: 移动端一二级页面(对话/合盘/我的等)滚动到底后多余的空白不受控/突兀。
   根因: 文档级滚动在 iOS/部分 WebView 上到底后仍有橡皮筋或"内部列表到底→再带动外层"的滚动链,
   多出一段无法掌控的空白。
   方案: 移动端把滚动收敛到 body 这一个滚动层, 并抑制 overscroll 滚动链;
   html/body 底色统一为页面底色, 即使出现极端回弹也不再露出突兀的空白。 */
@media (max-width: 768px) {
    html {
        height: 100%;
        overflow: hidden;
        background: var(--bg);
    }
    body {
        height: 100%;
        overflow-y: auto;
        -webkit-overflow-scrolling: touch;
        overscroll-behavior-y: none;
        background: var(--bg);
    }
    /* 内层滚动容器(对话三Tab面板/弹窗列表等): 到底后不再把滚动"链"给外层, 消除额外空白 */
    .chat-tab-panel,
    .msg-center-inline .chat-modal-messages,
    #pageChat .chat-tab-panel {
        overscroll-behavior-y: contain;
    }
}