: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;
    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;
}

@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; }

    /* 流年列表移动端 */
    .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; }

.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;
}

.hero-card {
    flex: 1;
    max-width: 200px;
    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 20px;
    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));
}

.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.7;
    letter-spacing: 1px;
}

.scroll-indicator {
    position: absolute;
    bottom: 30px;
    left: 50%;
    transform: translateX(-50%);
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 6px;
    z-index: 1;
    animation: bounce 2s ease-in-out infinite;
}

.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::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;
}

.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; }

.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;
}

/* 八字四个下拉框：占位灰色，选中后黑色（无动画，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;
    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.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;
    align-items: center;
}
.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.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: 17px;
    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;
    width: 24px;
    height: 24px;
    text-align: center;
    font-size: 12px;
    font-weight: 600;
    margin: 1px;
    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 {
}

/* 干支五行色增强 */
.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;
}

/* 纯图标悬停提示 */
.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;
}
.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);
}

@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);
}

/* ===== 流年列表 ===== */
@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 16px 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: var(--bg, #F8F6F2); 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: 140px; height: 140px; border-radius: 8px;
    background: #fff; padding: 6px;
    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: 140px; height: 140px; 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: 100px; height: 100px; }
}
@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: 80px; height: 80px; }
    .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;
}

[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;
}

/* ===== 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 { width: 20px; height: 20px; font-size: 11px; }
    .shensha-tag { font-size: 10px; padding: 1px 5px; }
    .chart-title { font-size: 15px; margin-bottom: 14px; }
    .chart-title-text { padding-bottom: 10px; }
    .analysis-tabs { gap: 4px; }
    .analysis-tab { padding: 5px 10px; 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;
    }

    .hero-cards {
        flex-direction: column;
        align-items: center;
        gap: 12px;
    }

    .hero-card {
        max-width: 100%;
        width: 100%;
        padding: 20px 16px;
    }

    .hero-card-icon {
        font-size: 28px;
        margin-bottom: 8px;
    }

    .brand-title {
        font-size: 22px;
        letter-spacing: 4px;
    }

    .trust-pillars {
        grid-template-columns: 1fr;
        gap: 12px;
    }

    .trust-pillar {
        padding: 20px 16px;
    }

    .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: wrap;
        gap: 2px 6px;
    }
    .summary-row.date-row .date-text {
        font-size: 12px;
        white-space: nowrap;
    }
    .summary-row.date-row .date-sep {
        margin: 0 4px;
    }
    .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;
    }
    .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 { width: 18px; height: 18px; font-size: 10px; }
    .shensha-tag { font-size: 9px; padding: 1px 4px; }
    .fortune-grid { grid-template-columns: 1fr; }

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

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

    .hero-cards {
        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,
.wuxing-chart-wrap,
.wx-analysis-text,
.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: flex;
    flex-wrap: wrap;
    gap: 6px;
    margin-bottom: 18px;
}
.analysis-tab {
    padding: 6px 14px;
    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;
}
.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 thead th {
        font-size: 10px;
        padding: 6px 4px;
    }
    .yongshen-month-table tbody td {
        padding: 6px 4px;
    }
    .month-gan, .month-zhi {
        font-size: 12px;
    }
    .month-caution-btn {
        min-width: 44px;
        padding: 3px 10px;
        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;
}

/* 星盘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: 24px;
    margin-top: 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-left-color: var(--success);
}

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

.zodiac-aspect-item.neutral {
    border-left-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);
}

.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 16px 18px; }
    .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 {
    margin-top: 20px; margin-bottom: 20px; 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 {
    position: relative; padding: 28px 32px; display: flex; align-items: center; gap: 22px;
}
.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-muted); margin: 0 0 20px; }
/* 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; }
.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;
}
.comp-type-card:hover { transform: translateY(-3px); box-shadow: 0 8px 24px rgba(0,0,0,0.1); }
.comp-type-card .comp-type-card-icon { font-size: 36px; margin-bottom: 10px; }
.comp-type-card h4 { font-size: 16px; font-weight: 700; margin: 0 0 12px; }
.comp-type-card-tags { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; max-width: 160px; margin: 0 auto; }
.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: 8px 16px;
}
.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 16px 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 16px 38px; display: flex; flex-direction: column; gap: 10px; }
.chat-card {
    display: flex; align-items: center; gap: 14px;
    padding: 16px; background: var(--card-bg);
    border: 1px solid var(--border); border-radius: var(--radius);
    cursor: pointer; transition: all 0.25s ease;
    position: relative;
}
.chat-card:hover {
    border-color: var(--primary); box-shadow: 0 4px 16px rgba(0,0,0,0.06);
    transform: translateY(-1px);
}
.chat-card-icon-wrap {
    width: 48px; height: 48px; border-radius: 14px;
    display: flex; align-items: center; justify-content: center;
    font-size: 22px; flex-shrink: 0;
}
.chat-card-icon-wrap.msg { background: #FEF3C7; color: #D97706; }
.chat-card-icon-wrap.free { background: #DCFCE7; color: #16A34A; }
.chat-card-icon-wrap.vip { background: linear-gradient(135deg, #FEF3C7, #FDE68A); color: #B45309; }
.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: 700; font-size: 11px; padding: 3px 10px; border-radius: 12px; }
.chat-card-body { flex: 1; min-width: 0; }
.chat-card-title {
    font-size: 15px; font-weight: 600; color: var(--text);
    margin-bottom: 3px; display: flex; align-items: center; gap: 8px; flex-wrap: wrap;
}
.chat-card-desc { font-size: 12px; color: var(--text-muted); }
.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: 20px; flex-shrink: 0; }
.chat-tag {
    font-size: 11px; padding: 2px 8px; border-radius: 10px;
    font-weight: 500; white-space: nowrap;
}
.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); text-align: center; }
.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; }
.chat-modal-messages {
    flex: 1; overflow-y: auto; padding: 16px;
    display: flex; flex-direction: column; gap: 12px;
}
.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); }
.chat-remaining-bar {
    padding: 8px 14px; background: rgba(245,166,35,0.1);
    color: #D97706; font-size: 12px; border-radius: var(--radius-sm);
    margin-bottom: 8px; text-align: center;
}
.chat-remaining-bar strong { font-size: 14px; }
.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: 1; 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;
    min-height: 66px; max-height: 120px; resize: none; line-height: 1.6;
    box-sizing: border-box;
}
.chat-input:focus { border-color: var(--primary); }
.chat-input:disabled { opacity: 0.5; cursor: not-allowed; }
.chat-char-count {
    text-align: right; font-size: 11px; color: var(--text-muted);
    padding: 2px 4px 0; line-height: 1;
}
.chat-send-btn {
    padding: 0 18px; background: var(--primary); color: #fff;
    border: none; border-radius: var(--radius-sm);
    font-size: 14px; font-weight: 600; font-family: var(--font);
    cursor: pointer; transition: all 0.2s; white-space: nowrap;
}
.chat-send-btn:hover { opacity: 0.9; }
.chat-send-btn:disabled { opacity: 0.5; cursor: not-allowed; }

/* 兼容旧版 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: 75%;
    padding: 10px 14px;
    border-radius: 14px;
    font-size: 14px;
    line-height: 1.6;
    word-wrap: break-word;
}
.chat-msg.user {
    align-self: flex-end;
    background: var(--primary);
    color: #fff;
    border-bottom-right-radius: 4px;
}
.chat-msg.bot {
    align-self: flex-start;
    background: var(--bg);
    color: var(--text);
    border-bottom-left-radius: 4px;
}
.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: 1;
    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;
    min-height: 66px;
    max-height: 120px;
    resize: none;
    line-height: 1.6;
    box-sizing: border-box;
}
.chat-input:focus { border-color: var(--primary); }
.chat-char-count {
    text-align: right; font-size: 11px; color: var(--text-muted);
    padding: 2px 4px 0; line-height: 1;
}
.chat-send-btn {
    padding: 10px 18px;
    background: var(--primary);
    color: #fff;
    border: none;
    border-radius: 20px;
    font-size: 14px;
    cursor: pointer;
    font-family: var(--font);
}
.chat-send-btn:disabled { opacity: 0.5; 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: 8px 16px;
}
.profile-menu-item {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 16px 12px;
    border-bottom: 1px solid var(--border);
    cursor: pointer;
    transition: background 0.2s ease;
    font-size: 14px;
    color: var(--text);
}
.profile-menu-item:hover { background: var(--bg); }
.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: 24px 20px;
    background: linear-gradient(135deg, var(--primary-bg) 0%, rgba(74,111,98,0.04) 100%);
    border-bottom: 1px solid var(--border);
    margin-bottom: 12px;
}
.profile-avatar {
    width: 64px;
    height: 64px;
    border-radius: 50%;
    overflow: hidden;
    flex-shrink: 0;
}
.profile-avatar svg { width: 100%; height: 100%; display: block; }
.profile-info { flex: 1; min-width: 0; }
.profile-phone {
    font-size: 17px;
    font-weight: 700;
    color: var(--text);
    margin-bottom: 4px;
}
.profile-vip-tag {
    display: inline-flex; align-items: center; gap: 4px;
    font-size: 11px; padding: 3px 10px; border-radius: 12px;
    font-weight: 600;
}
.profile-vip-tag.yearly { background: linear-gradient(135deg, #FEF3C7, #FDE68A); color: #92400E; }
.profile-vip-tag.monthly { background: #DCFCE7; color: #166534; }
.profile-vip-tag.none { background: var(--bg); color: var(--text-muted); }
.profile-menu-item.logout-item { color: var(--danger); }
.profile-menu-item.logout-item .menu-icon { color: var(--danger); }

/* V3.0优化: 会员套餐卡片 */
.membership-plans {
    display: grid; grid-template-columns: 1fr 1fr; gap: 10px;
    padding: 0 16px 8px;
    margin-top: 16px; /* V3.0优化: 与已开通列表保持间距 */
}
.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 {
    background: var(--card-bg); border: 2px solid var(--border);
    border-radius: var(--radius); padding: 10px 10px;
    display: flex; flex-direction: column; align-items: stretch;
    position: relative; transition: all 0.25s ease;
}
.plan-card:hover { border-color: var(--primary); box-shadow: 0 6px 20px rgba(0,0,0,0.08); }
.plan-card.plan-yearly { border-color: #F59E0B; background: linear-gradient(180deg, rgba(254,243,199,0.3) 0%, var(--card-bg) 40%); }
.plan-badge {
    position: absolute; top: -10px; left: 10px;
    background: var(--bg); color: var(--text-muted);
    font-size: 11px; padding: 2px 10px; border-radius: 10px;
    font-weight: 600; border: 1px solid var(--border); white-space: nowrap;
}
.plan-badge.recommend { background: linear-gradient(135deg, #F59E0B, #D97706); color: #fff; border-color: transparent; }
.plan-icon { font-size: 24px; margin-bottom: 2px; }
.plan-name { font-size: 14px; font-weight: 700; color: var(--text); margin-bottom: 2px; }
.plan-price { display: flex; align-items: baseline; gap: 2px; margin-bottom: 2px; }
.plan-price-num { font-size: 24px; font-weight: 800; color: var(--primary); }
.plan-card.plan-yearly .plan-price-num { color: #D97706; }
.plan-price-unit { font-size: 11px; color: var(--text-muted); }
.plan-saving { font-size: 10px; color: #D97706; font-weight: 600; margin-bottom: 6px; min-height: 14px; }
.plan-features { width: 100%; margin-bottom: 8px; flex: 1; }
.plan-feature { font-size: 11px; color: var(--text-secondary); line-height: 1.5; }
.plan-btn { font-size: 13px; padding: 7px; margin-top: auto; width: 100%; }
.membership-tip { font-size: 12px; color: var(--text-muted); text-align: center; padding: 0 24px 12px; line-height: 1.6; }
#membershipModal .v3-page-modal-body { padding: 12px 0 8px; }
@media (max-width: 560px) {
    .membership-plans { grid-template-columns: 1fr; }
}

/* ===== 通用模态/登录窗 ===== */
.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.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-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: 28px 24px 20px; 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: 90vh; overflow-y: auto;
}
.paywall-icon { font-size: 36px; margin-bottom: 10px; }
.paywall-card h2 { font-size: 18px; color: var(--primary); margin-bottom: 6px; 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: 12px 0 6px; }
.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: 12px 14px; margin: 12px 0;
    background: rgba(0,0,0,0.03); border-radius: 10px;
    font-size: 13px; color: var(--text-secondary); line-height: 1.8;
}
.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: 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;
}
.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; }
.paywall-hint { font-size: 11px; color: var(--text-muted); margin-top: 12px; }
.paywall-qr-area { display: none; margin: 12px 0 8px; text-align: center; }
.paywall-qr-area.show { display: block; }
.paywall-qr-area img { width: 140px; height: 140px; border-radius: 8px; background: #fff; padding: 6px; box-shadow: 0 2px 12px rgba(0,0,0,0.1); }
.paywall-qr-area .qr-label { font-size: 12px; color: var(--text-muted); margin-top: 4px; }
.paywall-qr-area .qr-loading { width: 140px; height: 140px; 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); } }

/* ===== 内联解锁卡片(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 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: 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 20px 60px rgba(0,0,0,0.5), 0 4px 16px rgba(0,0,0,0.3), 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: var(--bg, #F8F6F2); 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: var(--bg, #1A1A1A); }
.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优化: 移除主题色变体,统一使用八字/星盘模块一致样式 */

/* ============================================================
   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; padding: 32px 16px; color: var(--text-muted); }
.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; }

/* ===== 合盘表单 ===== */
.comp-form-card { padding: 20px 20px 24px; }
.comp-form-section { margin-bottom: 20px; padding-bottom: 16px; border-bottom: 1px dashed var(--border); }
.comp-form-section:last-of-type { border-bottom: none; padding-bottom: 0; }
.comp-form-section-title { font-size: 14px; font-weight: 600; color: var(--text); margin-bottom: 12px; display: flex; align-items: center; gap: 6px; }
.comp-form-icon { font-size: 16px; }
.comp-self-info { min-height: 36px; }
.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; }
.comp-submit-btn { margin-top: 12px; font-size: 15px; padding: 14px; }

/* 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); }
.comp-add-profile-btn {
    flex-shrink: 0; padding: 0 14px; font-size: 13px; white-space: nowrap;
    background: var(--primary-bg); color: var(--primary);
    border: 1px dashed var(--primary); border-radius: var(--radius-sm);
    cursor: pointer; font-family: var(--font); transition: all 0.2s;
}
.comp-add-profile-btn:hover { background: var(--primary); color: #fff; }
.comp-profile-detail { margin-top: 8px; min-height: 0; }
.comp-profile-summary { display: flex; flex-wrap: wrap; gap: 6px 10px; padding: 8px 12px; background: var(--primary-bg); border-radius: var(--radius-sm); border: 1px solid var(--border); }
.cps-item { font-size: 12px; color: var(--text-secondary); }
.cps-item.cps-warn { color: var(--warning); font-weight: 500; }

/* ===== 合盘结果(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-score-tags { display: flex; gap: 8px; justify-content: flex-start; margin-bottom: 14px; }
.comp-role-tag, .comp-type-tag { font-size: 12px; padding: 4px 14px; border-radius: 14px; font-weight: 600; letter-spacing: 0.5px; }
.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;
    background:
        radial-gradient(circle at 20% 50%, rgba(255,255,255,0.08) 0%, transparent 50%),
        radial-gradient(circle at 80% 20%, var(--score-color, var(--primary)) 0%, transparent 25%),
        linear-gradient(135deg, rgba(74,111,98,0.10) 0%, rgba(212,160,23,0.08) 50%, var(--card-bg) 100%);
    border: 1px solid rgba(74,111,98,0.20);
    border-radius: 16px;
    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);
    position: relative; overflow: hidden;
}
.comp-score-card::before {
    content: ''; position: absolute; top: 0; left: 0; right: 0; height: 4px;
    background: linear-gradient(90deg, var(--score-color, var(--primary)), rgba(212,160,23,0.6), var(--score-color, var(--primary)));
    opacity: 0.85;
}
.comp-score-card::after {
    content: ''; position: absolute; bottom: -30px; right: -30px;
    width: 120px; height: 120px; border-radius: 50%;
    background: radial-gradient(circle, var(--score-color, var(--primary)) 0%, transparent 70%);
    opacity: 0.06; pointer-events: none;
}
[data-theme="dark"] .comp-score-card {
    background:
        radial-gradient(circle at 20% 50%, rgba(255,255,255,0.03) 0%, transparent 50%),
        radial-gradient(circle at 80% 20%, var(--score-color, var(--primary)) 0%, transparent 25%),
        linear-gradient(135deg, rgba(74,111,98,0.15) 0%, rgba(212,160,23,0.10) 50%, var(--card-bg) 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);
}
.comp-score-content { position: relative; z-index: 1; display: flex; flex-direction: column; gap: 12px; }
.comp-score-verdict { font-size: 22px; font-weight: 800; letter-spacing: 3px; }
/* V3.0优化: 评级描述文案 */
.comp-score-desc { font-size: 13px; color: var(--text-secondary); line-height: 1.7; max-width: 520px; }
.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;
}
.comp-party {
    background: var(--card-bg); border: 1px solid var(--border);
    border-radius: var(--radius); padding: 16px 12px; text-align: center;
    box-shadow: 0 2px 10px rgba(0,0,0,0.04);
    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)); }
.comp-party.other::before { background: linear-gradient(90deg, #C2410C, rgba(194,65,12,0.3)); }
.comp-party:hover { transform: translateY(-2px); box-shadow: 0 6px 18px rgba(0,0,0,0.08); }
.comp-party.me { border-left: none; }
.comp-party.other { border-left: none; }
.comp-party-label { font-size: 11px; color: var(--text-muted); margin-bottom: 8px; letter-spacing: 1px; text-transform: uppercase; }
.comp-party-dm, .comp-party-sun { font-size: 18px; font-weight: 700; color: var(--text); }
.comp-party-wx { font-size: 12px; color: var(--text-secondary); margin-top: 3px; }
.comp-party-pillars, .comp-party-moon, .comp-party-asc { font-size: 11px; color: var(--text-muted); margin-top: 5px; }
.comp-vs {
    font-size: 22px; color: var(--text-muted);
    width: 36px; height: 36px; border-radius: 50%;
    display: flex; align-items: center; justify-content: center;
    background: var(--bg); border: 1px solid var(--border);
    box-shadow: 0 2px 8px rgba(0,0,0,0.05);
}

/* 章节标题 */
.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: var(--radius-sm); padding: 12px 14px;
    border: 1px solid var(--border);
    transition: transform 0.2s ease, box-shadow 0.2s ease;
}
[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(-1px); box-shadow: 0 3px 10px rgba(0,0,0,0.06); }
.comp-dim-head { display: flex; align-items: center; gap: 6px; margin-bottom: 8px; }
.comp-dim-icon { font-size: 16px; }
.comp-dim-name { flex: 1; font-size: 13px; color: var(--text-secondary); font-weight: 500; }
.comp-dim-score { font-size: 18px; font-weight: 800; }
.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); }
.comp-dim-fill { height: 100%; border-radius: 3px; transition: width 0.8s cubic-bezier(0.16,1,0.3,1); box-shadow: 0 1px 3px rgba(0,0,0,0.1); }
.comp-dim-summary { font-size: 11px; color: var(--text-muted); margin-top: 8px; line-height: 1.6; }

/* 和谐/注意因素卡片 */
.comp-factors-card { padding: 14px 18px; margin-bottom: 12px; }
.comp-factors { padding: 10px 0; }
.comp-factors + .comp-factors { border-top: 1px solid var(--border); margin-top: 4px; padding-top: 14px; }
.comp-factors.good .comp-factors-title { color: #16A34A; }
.comp-factors.warn .comp-factors-title { color: #DC2626; }
.comp-factors-title { font-size: 14px; font-weight: 700; margin-bottom: 8px; display: flex; align-items: center; gap: 4px; }
.comp-factor-item {
    font-size: 12px; color: var(--text-secondary); line-height: 1.8;
    padding-left: 16px; position: relative;
}
.comp-factor-item::before {
    content: '•'; position: absolute; left: 4px; color: var(--text-muted); font-size: 14px;
}
.comp-factors.good .comp-factor-item::before { color: #16A34A; }
.comp-factors.warn .comp-factor-item::before { color: #DC2626; }

/* 章节预览卡片 */
.comp-chapters-card { padding: 20px; margin-bottom: 14px; }
.comp-chapter-preview {
    display: flex; gap: 12px; padding: 12px 0;
    border-bottom: 1px dashed var(--border);
    transition: background 0.2s ease;
    border-radius: var(--radius-sm); padding: 12px 10px;
}
.comp-chapter-preview:hover { background: var(--primary-bg); }
.comp-chapter-preview:last-child { border-bottom: none; }
.comp-chapter-num {
    width: 28px; height: 28px;
    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: 13px; font-weight: 700; flex-shrink: 0;
    box-shadow: 0 2px 6px rgba(74,111,98,0.25);
}
.comp-chapter-body h4 { font-size: 14px; color: var(--text); margin-bottom: 4px; font-weight: 600; }
.comp-chapter-body p { font-size: 12px; color: var(--text-muted); line-height: 1.6; }
.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; }
.chat-tag.free { background: #DCFCE7; color: #16A34A; }
.chat-tag.paid { background: #DBEAFE; color: #2563EB; }
.chat-tag.used { background: var(--border); color: var(--text-muted); }
.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 { color: var(--text-muted); font-size: 13px; }

/* ===== 消息卡片 ===== */
/* V3.0优化: 消息中心卡片区别于其他卡片,增强不透明度+渐变背景+左侧色条 */
.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-sm);
    padding: 14px 16px; margin-bottom: 10px;
    cursor: pointer; transition: var(--transition);
    border: 1px solid rgba(180,170,150,0.3);
    border-left: 4px solid var(--primary);
    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-left: 4px solid var(--primary);
    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-left-color: var(--primary); }
.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.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.0优化: 每日运势标签加粗,大小与VIP咨询一致 */
.chat-tag.free { font-weight: 700; font-size: 11px; padding: 3px 10px; border-radius: 12px; }
.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 { background: var(--bg); border: 1px dashed var(--border); }
.msg-alerts-title { font-size: 12px; font-weight: 700; margin-bottom: 6px; display: flex; align-items: center; gap: 6px; }
.msg-alerts-lucky .msg-alerts-title { color: #15803D; }
.msg-alerts-caution .msg-alerts-title { color: #B45309; }
.msg-alerts-none .msg-alerts-title { color: var(--text-muted); }
.msg-alerts-range { font-size: 10px; font-weight: 400; color: var(--text-muted); background: rgba(255,255,255,0.6); padding: 1px 6px; border-radius: 4px; }
.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); }
.msg-alert-score { font-size: 11px; 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: 10px; font-weight: 600; color: var(--primary); background: var(--primary-bg); padding: 1px 7px; border-radius: 8px; letter-spacing: 0.5px; }
.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; }
/* 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; }
/* V3.0优化: 综合分数加粗着色(好运绿色/留意橙色),小项分数不加粗 */
.msg-alert-group-score { font-size: 13px; font-weight: 800; padding: 2px 10px; border-radius: 8px; }
.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.0优化: 星盘模式消息卡片左侧色条改为蓝色系 */
.chat-msg-card.fortune-mode-zodiac.fortune-weekly { border-left-color: #3A5A8C; }
.chat-msg-card.fortune-mode-zodiac.fortune-monthly { border-left-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优化: 周运/月运推送卡片样式统一(八字绿色系) */
.chat-msg-card.fortune-weekly { border-left: 4px solid #4A6F62; }
.chat-msg-card.fortune-monthly { border-left: 4px solid #4A6F62; }
/* 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; }
.msg-expire { font-size: 11px; color: var(--text-muted); margin-top: 6px; padding-top: 6px; border-top: 1px solid var(--border); }

/* ===== 我的页增强 ===== */
.login-prompt { text-align: center; padding: 28px 24px; }
.login-prompt-logo { font-size: 48px; color: var(--primary); margin-bottom: 12px; }
.login-prompt h3 { font-size: 20px; margin-bottom: 8px; }
.login-prompt-desc { font-size: 13px; color: var(--text-secondary); margin-bottom: 20px; line-height: 1.6; }
.login-prompt-features { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; margin-bottom: 24px; }
/* V3.0优化: 登录按钮居中+上下留白一致+按钮加长 */
.login-prompt-btn { display: block; margin: 0 auto; width: 100%; }
.login-feature { font-size: 12px; color: var(--text-secondary); background: var(--bg); padding: 8px 10px; border-radius: var(--radius-sm); }
.login-feature span { margin-right: 4px; }
.login-tip { text-align: center; font-size: 11px; color: var(--text-muted); margin-top: 16px; opacity: 0.7; }
.login-modal-logo { font-size: 36px; text-align: center; color: var(--primary); margin-bottom: 8px; }
.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-content {
    padding: 36px 28px 28px;
    position: relative;
}
.login-modal-content h3 {
    font-size: 20px; font-weight: 700; letter-spacing: 1px;
}
.login-modal-logo {
    font-size: 40px; margin-bottom: 12px;
    background: linear-gradient(135deg, var(--primary), var(--primary-hover, #2D5F4E));
    -webkit-background-clip: text; -webkit-text-fill-color: transparent;
    background-clip: text;
}
.login-modal .modal-btn-row { gap: 12px; margin-top: 20px; }
.login-modal-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;
}
.login-modal-close:hover { background: var(--border); color: var(--text); }
.login-submit-btn {
    flex: 1; padding: 11px 24px; font-size: 15px; font-weight: 600;
    letter-spacing: 2px;
}

.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(--bg); border-radius: var(--radius-sm); padding: 12px; margin-bottom: 10px; }
.profile-id-head { display: flex; align-items: center; gap: 10px; }
.profile-id-icon { font-size: 22px; }
.profile-id-info { flex: 1; }
.profile-id-info strong { font-size: 14px; }
.tag { font-size: 11px; padding: 2px 8px; border-radius: 8px; background: var(--primary-bg); color: var(--primary); margin-left: 6px; }
.self-tag { background: #FEF3C7; color: #92400E; }
.profile-id-meta { display: flex; flex-wrap: wrap; gap: 6px 12px; margin-top: 8px; }
.profile-meta-item { font-size: 11px; color: var(--text-secondary); }
.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; }
.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); }

/* 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; }
.profile-date-picker { display: flex; gap: 8px; }
.profile-date-picker .select-arrow-wrap { flex: 1; min-width: 0; }
.profile-date-picker select { width: 100%; padding: 9px 10px; border: 1px solid var(--border); border-radius: var(--radius-sm); background: var(--bg); color: var(--text); font-size: 13px; font-family: var(--font); outline: none; cursor: pointer; appearance: none; -webkit-appearance: none; }
.profile-date-picker select:focus { border-color: var(--primary); }

/* 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; }
.profile-lunar-picker select { width: 100%; padding: 9px 10px; border: 1px solid var(--border); border-radius: var(--radius-sm); background: var(--bg); color: var(--text); font-size: 13px; font-family: var(--font); outline: none; cursor: pointer; appearance: none; -webkit-appearance: none; }
.profile-lunar-picker select:focus { border-color: var(--primary); }
.profile-lunar-picker.hidden, .profile-date-picker.hidden { display: none; }

/* 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: var(--radius-sm); display: flex; align-items: center; justify-content: center; font-size: 20px; flex-shrink: 0; }
.report-card-info { flex: 1; }
.report-card-name { font-size: 14px; font-weight: 600; color: var(--text); }
.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: var(--bg); 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: var(--bg); color: var(--text);
    font-size: 14px; font-family: var(--font); outline: none; box-sizing: border-box;
}
#feedbackModal input:focus { border-color: var(--primary); }

.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; border-bottom: 2px solid var(--border); background: var(--card-bg); }
.fb-tab { flex: 1; padding: 14px 8px; text-align: center; font-size: 14px; font-weight: 600; color: var(--text-muted); cursor: pointer; transition: var(--transition); border-bottom: 2px solid transparent; margin-bottom: -2px; }
.fb-tab:hover { color: var(--text); }
.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; }
    .login-prompt-features { grid-template-columns: 1fr; }
    .msg-dims { grid-template-columns: 1fr; }
    .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优化 */
    .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: 13px; }
    .comp-parties { grid-template-columns: 1fr; gap: 8px; }
    .comp-vs { transform: rotate(90deg); margin: -4px 0; }
    .comp-profile-picker { flex-direction: column; gap: 6px; }
    .comp-add-profile-btn { padding: 8px 14px; }
    .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-banner-features { padding: 10px 16px 14px; gap: 8px; }
    .comp-banner-feature { font-size: 11px; padding: 4px 10px; }
    .comp-type-cards { grid-template-columns: 1fr; }
    .comp-type-card { padding: 16px 14px; }
    /* 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-factors-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; max-height: none; border-radius: 0; width: 100%; }
    .chat-modal-header { padding: 12px 16px; }
    .chat-modal-header h3 { font-size: 15px; }
    .chat-input-area { padding: 10px 12px; }
    .chat-input { padding: 8px 12px; font-size: 13px; }
    .chat-send-btn { padding: 0 14px; font-size: 13px; }

    /* 我的模块 */
    .profile-header { padding: 18px 14px; gap: 12px; }
    .profile-avatar { width: 54px; height: 54px; }
    .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: 18px; }

    /* 付费墙移动端 */
    .paywall-overlay { padding: 0; }
    .paywall-card { max-width: 100%; border-radius: 0; min-height: 100vh; padding: 24px 20px; }
    .paywall-methods { flex-direction: column; gap: 8px; }

    /* 身份编辑弹窗移动端 */
    .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; }
}

@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; }
}