/**
 * AI 算命 - 墨韻素箋 (Ink on Paper)
 * 新古典命理風格：素雅宣紙與朱墨書法的融合
 * 素白底色、墨黑文字、朱紅點綴、金銅輝映
 */

/* ===== CSS 變數 ===== */
:root {
    /* 核心色系 - 墨色（用於文字） */
    --ink-void: #1a1512;
    --ink-deep: #2d2620;
    --ink-rich: #3d3530;
    --ink-medium: #5c5550;
    --ink-light: #7a7570;
    --ink-mist: #9a9590;
    --ink-black: #1a1512;
    --ink-faded: #6c655f;
    --ink-faint: #8e8882;

    /* 紙張色系 - 淡雅米（用於背景） */
    --paper-snow: #ffffff;
    --paper-warm: #fafaf8;
    --paper-aged: #f7f6f3;
    --paper-tan: #f0efec;
    --border-light: rgba(26, 21, 18, 0.12);
    
    /* 朱砂色系 - 重新定義 */
    --vermilion: #c94043;
    --vermilion-glow: #e04548;
    --vermilion-deep: #a32f32;
    --vermilion-muted: rgba(201, 64, 67, 0.15);
    
    /* 金銅點綴 */
    --gold: #c9a962;
    --gold-bright: #dfc07a;
    --copper: #b87a4b;
    --earth-ochre: #ad8b47;
    
    /* 五行色 - 現代詮釋 */
    --wood: #4a7c59;
    --fire: #c94043;
    --earth: #c9a962;
    --metal: #9ca3af;
    --water: #3d5a80;
    --wood-green: #3d6b4f;
    --fire-red: #b5363a;
    --seal-red: #ab2f32;
    
    /* 吉凶指示色 */
    --fortune-auspicious: #4a7c59;
    --fortune-neutral: #c9a962;
    --fortune-inauspicious: #a32f32;
    
    /* 字體 */
    --font-display: 'Noto Serif TC', 'Songti TC', 'STSong', 'PMingLiU', serif;
    --font-body: 'PingFang TC', 'Noto Sans TC', 'Microsoft JhengHei', 'Heiti TC', 'Helvetica Neue', Arial, sans-serif;
    --font-brush: var(--font-display);
    --font-classical: var(--font-display);
    
    /* 間距系統 */
    --space-1: 0.25rem;
    --space-2: 0.5rem;
    --space-3: 0.75rem;
    --space-4: 1rem;
    --space-5: 1.5rem;
    --space-6: 2rem;
    --space-8: 3rem;
    --space-10: 4rem;
    --space-12: 5rem;
    --space-16: 8rem;
    
    /* 動效 */
    --ease-out: cubic-bezier(0.16, 1, 0.3, 1);
    --ease-in-out: cubic-bezier(0.65, 0, 0.35, 1);
    --duration-fast: 150ms;
    --duration-normal: 300ms;
    --duration-slow: 500ms;
    
    /* 圓角 */
    --radius-sm: 4px;
    --radius-md: 8px;
    --radius-lg: 16px;
    --radius-xl: 24px;
    --radius-full: 999px;
    
    /* 陰影 */
    --shadow-sm: 0 1px 2px rgba(10, 9, 8, 0.05);
    --shadow-md: 0 4px 12px rgba(10, 9, 8, 0.08);
    --shadow-lg: 0 12px 40px rgba(10, 9, 8, 0.12);
    --shadow-xl: 0 24px 60px rgba(10, 9, 8, 0.16);
    --shadow-glow: 0 0 40px rgba(201, 64, 67, 0.2);
}

/* ===== 基礎重置 ===== */
*, *::before, *::after {
    box-sizing: border-box;
    margin: 0;
    padding: 0;
}

html {
    font-size: 16px;
    scroll-behavior: smooth;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

/* ===== 主體樣式 ===== */
body {
    font-family: var(--font-body);
    background: var(--paper-warm);
    color: var(--ink-deep);
    line-height: 1.7;
    min-height: 100vh;
    overflow-x: hidden;
}

/* 背景 - 微妙的宣紙紋理效果 */
body::before {
    content: '';
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background:
        radial-gradient(ellipse 80% 50% at 20% 30%, rgba(201, 64, 67, 0.02) 0%, transparent 50%),
        radial-gradient(ellipse 60% 40% at 80% 70%, rgba(201, 169, 98, 0.015) 0%, transparent 50%),
        radial-gradient(ellipse 100% 80% at 50% 100%, rgba(61, 90, 128, 0.015) 0%, transparent 40%);
    pointer-events: none;
    z-index: 0;
}

/* 墨點紋理 */
body::after {
    content: '';
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 256 256' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='noise'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.8' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23noise)'/%3E%3C/svg%3E");
    opacity: 0.012;
    pointer-events: none;
    z-index: 0;
}

@media (max-width: 768px) {
    body::after {
        display: none;
    }
}

.page-wrapper {
    position: relative;
    z-index: 1;
    display: flex;
    flex-direction: column;
    min-height: 100vh;
}

/* ===== 容器 ===== */
.container {
    max-width: 1200px;
    margin: 0 auto;
    padding: 0 var(--space-5);
}

@media (min-width: 768px) {
    .container {
        padding: 0 var(--space-8);
    }
}

/* ===== 頂部日期橫幅 ===== */
.header-date-bar {
    display: block;
    background: linear-gradient(135deg, var(--vermilion) 0%, var(--vermilion-deep) 100%);
    padding: 0.46rem 0;
    text-align: center;
    text-decoration: none;
    transition: filter 0.2s ease;
}

.header-date-bar:hover {
    filter: brightness(1.1);
}

.header-date-text {
    font-size: 0.95rem;
    color: rgba(255, 255, 255, 0.95);
    letter-spacing: 0.5px;
}

.header-yi {
    background: rgba(255, 255, 255, 0.25);
    padding: 0.1rem 0.4rem;
    border-radius: 3px;
    font-weight: 600;
}

.header-ji {
    background: rgba(0, 0, 0, 0.2);
    padding: 0.1rem 0.4rem;
    border-radius: 3px;
    font-weight: 600;
}

@media (max-width: 576px) {
    .header-date-text {
        font-size: 0.82rem;
    }
}

/* ===== 頭部導航 ===== */
.site-header {
    position: sticky;
    top: 0;
    z-index: 100;
    padding: var(--space-4) 0;
    background: rgba(255, 255, 255, 0.96);
    backdrop-filter: blur(14px) saturate(130%);
    -webkit-backdrop-filter: blur(14px) saturate(130%);
    border-bottom: 1px solid rgba(0, 0, 0, 0.1);
    transition: all var(--duration-normal) var(--ease-out);
}

.header-content {
    display: flex;
    justify-content: space-between;
    align-items: center;
}

/* Logo */
.logo {
    display: flex;
    align-items: center;
    gap: var(--space-3);
    text-decoration: none;
    transition: transform var(--duration-fast) var(--ease-out);
}

.logo:hover {
    transform: translateY(-2px);
}

.logo-icon {
    width: 44px;
    height: 44px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: linear-gradient(135deg, var(--vermilion) 0%, var(--vermilion-deep) 100%);
    border-radius: var(--radius-sm);
    font-family: 'Arial Black', sans-serif;
    font-size: 1.1rem;
    font-weight: 900;
    color: var(--paper-snow);
    box-shadow: 
        0 4px 12px rgba(201, 64, 67, 0.3),
        inset 0 1px 0 rgba(255, 255, 255, 0.15);
    position: relative;
    overflow: hidden;
}

.logo-icon::after {
    content: '';
    position: absolute;
    top: 0;
    left: -100%;
    width: 100%;
    height: 100%;
    background: linear-gradient(90deg, transparent, rgba(255,255,255,0.2), transparent);
    transition: left 0.5s;
}

.logo:hover .logo-icon::after {
    left: 100%;
}

.logo-text {
    font-family: var(--font-display);
    font-size: 1.5rem;
    color: var(--ink-deep);
    letter-spacing: 0.08em;
    white-space: nowrap;
    word-break: keep-all;
}

/* 導航 */
.main-nav {
    display: none;
}

@media (min-width: 1024px) {
    .main-nav {
        display: flex;
        gap: var(--space-8);
    }
}

.nav-group {
    position: relative;
}

.nav-group-title {
    display: block;
    font-size: 0.85rem;
    color: var(--ink-medium);
    font-weight: 700;
    letter-spacing: 0.15em;
    text-transform: uppercase;
    margin-bottom: var(--space-2);
    padding-left: var(--space-1);
    white-space: nowrap;
    word-break: keep-all;
}

.nav-group ul {
    display: flex;
    gap: var(--space-1);
    list-style: none;
}

.nav-group a {
    display: block;
    padding: var(--space-2) var(--space-3);
    font-family: var(--font-body);
    font-size: 1rem;
    font-weight: 500;
    color: var(--ink-rich);
    text-decoration: none;
    letter-spacing: 0.05em;
    border-radius: var(--radius-sm);
    transition: all var(--duration-fast) var(--ease-out);
    position: relative;
    white-space: nowrap;
    word-break: keep-all;
}

.nav-group a::before {
    content: '';
    position: absolute;
    bottom: 4px;
    left: 50%;
    width: 0;
    height: 2px;
    background: var(--vermilion);
    transform: translateX(-50%);
    transition: width var(--duration-fast) var(--ease-out);
}

.nav-group a:hover {
    color: var(--vermilion-deep);
    background: rgba(201, 64, 67, 0.08);
}

.nav-group a:hover::before {
    width: calc(100% - var(--space-6));
}

/* 當前頁面 active 狀態 */
.nav-group a.active {
    color: var(--vermilion-deep);
    background: rgba(201, 64, 67, 0.14);
    font-weight: 600;
}

.nav-group a.active::before {
    width: calc(100% - var(--space-6));
}

/* 漢堡選單 */
.nav-toggle {
    display: flex;
    flex-direction: column;
    justify-content: center;
    gap: 5px;
    width: 40px;
    height: 40px;
    padding: 8px;
    background: transparent;
    border: 1px solid rgba(0, 0, 0, 0.1);
    border-radius: var(--radius-sm);
    cursor: pointer;
    transition: all var(--duration-fast) var(--ease-out);
}

@media (min-width: 1024px) {
    .nav-toggle {
        display: none;
    }
}

.nav-toggle:hover {
    background: rgba(0, 0, 0, 0.03);
    border-color: rgba(0, 0, 0, 0.2);
}

.nav-toggle-bar {
    width: 100%;
    height: 2px;
    background: var(--ink-medium);
    border-radius: 1px;
    transition: all var(--duration-fast) var(--ease-out);
}

.nav-toggle[aria-expanded="true"] .nav-toggle-bar:nth-child(1) {
    transform: translateY(7px) rotate(45deg);
}

.nav-toggle[aria-expanded="true"] .nav-toggle-bar:nth-child(2) {
    opacity: 0;
}

.nav-toggle[aria-expanded="true"] .nav-toggle-bar:nth-child(3) {
    transform: translateY(-7px) rotate(-45deg);
}

/* 手機版導航 */
@media (max-width: 1023px) {
    .main-nav {
        position: fixed;
        top: 0;
        right: -320px;
        width: 320px;
        height: 100vh;
        padding: var(--space-10) var(--space-6);
        background: var(--paper-snow);
        border-left: 1px solid rgba(0, 0, 0, 0.08);
        display: flex;
        flex-direction: column;
        gap: var(--space-6);
        overflow-y: auto;
        transition: right var(--duration-slow) var(--ease-out);
        z-index: 200;
        box-shadow: -8px 0 24px rgba(0, 0, 0, 0.08);
    }

    .main-nav.nav-open {
        right: 0;
    }

    .nav-group ul {
        flex-direction: column;
        gap: 0;
    }

    .nav-group a {
        padding: var(--space-3) var(--space-4);
    }
}

.nav-overlay {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.3);
    backdrop-filter: blur(4px);
    opacity: 0;
    visibility: hidden;
    transition: all var(--duration-normal) var(--ease-out);
    z-index: 150;
}

.nav-overlay.active {
    opacity: 1;
    visibility: visible;
}

/* ===== 主內容區 ===== */
.main-content {
    flex: 1;
}

/* ===== 表單區域 ===== */
.form-section {
    padding: 0.5rem 0 0;
    position: relative;
}

.form-section-hero {
    padding: 0.5rem 0 0;
    background: var(--paper-aged);
}

.form-card {
    max-width: 560px;
    margin: 0 auto;
    padding: 0.75rem 1.5rem 0.5rem;
    background: var(--paper-snow);
    border: 1px solid rgba(0, 0, 0, 0.12);
    border-radius: var(--radius-lg);
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.07);
    position: relative;
    overflow: hidden;
}

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

/* 卡片裝飾 */
.form-card::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 3px;
    background: linear-gradient(90deg, var(--vermilion), var(--gold), var(--vermilion));
}

.form-card::after {
    content: '命';
    position: absolute;
    bottom: -40px;
    right: -20px;
    font-family: var(--font-display);
    font-size: 180px;
    color: rgba(201, 64, 67, 0.03);
    pointer-events: none;
    line-height: 1;
}

.form-header {
    text-align: center;
    margin-bottom: var(--space-4);
}

.form-title {
    font-family: var(--font-display);
    font-size: clamp(1.75rem, 5vw, 2.25rem);
    font-weight: 600;
    color: var(--ink-void);
    letter-spacing: 0.08em;
    margin-bottom: var(--space-3);
}

.form-subtitle {
    font-size: 1rem;
    color: var(--ink-medium);
    letter-spacing: 0.03em;
}

/* 警告訊息 */
.alert {
    display: flex;
    align-items: center;
    gap: var(--space-3);
    padding: var(--space-4);
    border-radius: var(--radius-md);
    margin-bottom: var(--space-6);
    font-size: 0.9rem;
    animation: shake 0.5s var(--ease-out);
}

@keyframes shake {
    0%, 100% { transform: translateX(0); }
    20%, 60% { transform: translateX(-5px); }
    40%, 80% { transform: translateX(5px); }
}

.alert-error {
    background: var(--vermilion-muted);
    border: 1px solid rgba(201, 64, 67, 0.3);
    color: var(--vermilion-glow);
}

.alert-icon {
    width: 24px;
    height: 24px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: var(--vermilion);
    border-radius: 50%;
    color: white;
    font-weight: bold;
    font-size: 0.75rem;
    flex-shrink: 0;
}

/* 表單元素 */
.form-row {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: var(--space-5);
    margin-bottom: var(--space-5);
}

@media (max-width: 480px) {
    .form-row {
        grid-template-columns: 1fr;
    }
}

.form-row-date {
    grid-template-columns: 1.5fr 1fr 1fr;
    gap: var(--space-4);
}

@media (max-width: 480px) {
    .form-row-date {
        grid-template-columns: 1fr 1fr;
    }
    .form-row-date .form-group:first-child {
        grid-column: span 2;
    }
}

.form-group {
    display: flex;
    flex-direction: column;
    gap: var(--space-2);
}

.form-group-full {
    grid-column: 1 / -1;
}

.form-group label {
    font-size: 1rem;
    font-weight: 600;
    color: var(--ink-deep);
    letter-spacing: 0.02em;
}

.form-group input,
.form-group select {
    width: 100%;
    padding: var(--space-3) var(--space-4);
    background: var(--paper-snow);
    border: 2px solid var(--ink-mist);
    border-radius: var(--radius-md);
    font-family: var(--font-display);
    font-size: 1rem;
    color: var(--ink-deep);
    transition: all var(--duration-fast) var(--ease-out);
    box-shadow: 0 1px 2px rgba(0, 0, 0, 0.04);
}

.form-group input::placeholder {
    color: var(--ink-mist);
}

.form-group input:focus,
.form-group select:focus {
    outline: none;
    border-color: var(--vermilion);
    background: var(--paper-snow);
    box-shadow: 0 0 0 3px rgba(201, 64, 67, 0.12), 0 1px 2px rgba(0, 0, 0, 0.04);
}

.form-group select {
    cursor: pointer;
    appearance: none;
    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='%235c5550' d='M6 8L1 3h10z'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right var(--space-4) center;
    padding-right: var(--space-10);
}

.form-group select option {
    background: var(--paper-snow);
    color: var(--ink-deep);
}

/* Radio Button 樣式 */
.gender-options {
    display: flex;
    gap: var(--space-3);
}

.gender-option {
    flex: 1;
}

.gender-option input[type="radio"] {
    position: absolute;
    opacity: 0;
    width: 0;
    height: 0;
}

.gender-btn {
    display: block;
    padding: var(--space-3) var(--space-4);
    text-align: center;
    background: var(--paper-aged);
    border: 1px solid rgba(0, 0, 0, 0.1);
    border-radius: var(--radius-md);
    cursor: pointer;
    transition: all var(--duration-normal) var(--ease-out);
    font-size: 0.9375rem;
    color: var(--ink-medium);
}

.gender-option input[type="radio"]:checked + .gender-btn {
    background: var(--vermilion);
    color: var(--paper-snow);
    border-color: var(--vermilion);
    box-shadow: 0 2px 8px rgba(201, 64, 67, 0.25);
}

.gender-btn:hover {
    background: var(--paper-tan);
    border-color: rgba(0, 0, 0, 0.15);
}

.gender-option input[type="radio"]:checked + .gender-btn:hover {
    background: var(--vermilion-deep);
}

.hehun-form .person-title {
    display: flex;
    align-items: center;
    gap: 0.45rem;
    margin-bottom: var(--space-3);
    font-family: var(--font-display);
    font-size: 1.1rem;
    line-height: 1.4;
    color: var(--ink-deep);
}

.hehun-form .person-icon {
    width: 1.8rem;
    height: 1.8rem;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    background: rgba(201, 64, 67, 0.12);
    color: var(--vermilion-deep);
    font-weight: 700;
}

/* 時辰選擇器樣式 */
.shichen-picker {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: var(--space-2);
}

@media (min-width: 640px) {
    .shichen-picker {
        grid-template-columns: repeat(7, 1fr);
    }
}

.shichen-option {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: var(--space-3) var(--space-2);
    background: var(--paper-aged);
    border: 2px solid var(--ink-mist);
    border-radius: var(--radius-md);
    cursor: pointer;
    transition: all var(--duration-normal) var(--ease-out);
    min-height: 60px;
}

.shichen-option:hover {
    background: var(--paper-tan);
    border-color: rgba(201, 64, 67, 0.3);
}

.shichen-option.selected {
    background: rgba(201, 64, 67, 0.1);
    border-color: var(--vermilion);
}

.shichen-name {
    font-family: var(--font-display);
    font-size: 1rem;
    font-weight: 600;
    color: var(--ink-deep);
}

.shichen-option.selected .shichen-name {
    color: var(--vermilion);
}

.shichen-time {
    font-size: 0.8rem;
    color: var(--ink-medium);
    margin-top: 2px;
}

/* 文字輸入框樣式 */
.form-input {
    width: 100%;
    padding: var(--space-3) var(--space-4);
    background: var(--paper-snow);
    border: 2px solid var(--ink-light);
    border-radius: var(--radius-md);
    font-family: var(--font-display);
    font-size: 1rem;
    color: var(--ink-deep);
    transition: all var(--duration-normal) var(--ease-out);
}

.form-input::placeholder {
    color: var(--ink-mist);
}

.form-input:focus {
    outline: none;
    border-color: var(--vermilion);
    box-shadow: 0 0 0 3px rgba(201, 64, 67, 0.1);
}

/* 姓名配對樣式 */
.name-match-inputs {
    display: flex;
    flex-direction: column;
    gap: var(--space-4);
    align-items: center;
}

.name-input-group {
    width: 100%;
    display: flex;
    flex-direction: column;
    gap: var(--space-2);
}

.match-heart {
    font-size: 1.5rem;
    color: var(--vermilion);
}

@media (min-width: 640px) {
    .name-match-inputs {
        flex-direction: row;
        align-items: flex-end;
    }

    .name-input-group {
        flex: 1;
    }

    .match-heart {
        padding-bottom: var(--space-3);
    }
}

/* 生肖選擇器樣式 */
.shengxiao-picker {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: var(--space-3);
}

@media (min-width: 640px) {
    .shengxiao-picker {
        grid-template-columns: repeat(6, 1fr);
    }
}

.shengxiao-option {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: var(--space-3);
    background: var(--paper-aged);
    border: 2px solid transparent;
    border-radius: var(--radius-md);
    cursor: pointer;
    transition: all var(--duration-normal) var(--ease-out);
}

.shengxiao-option:hover {
    background: var(--paper-tan);
    transform: translateY(-2px);
}

.shengxiao-option.selected {
    background: var(--vermilion);
    border-color: var(--vermilion);
    box-shadow: 0 4px 12px rgba(201, 64, 67, 0.3);
}

.shengxiao-icon {
    font-size: 1.5rem;
    font-weight: 600;
    color: var(--ink-rich);
}

.shengxiao-option.selected .shengxiao-icon {
    color: var(--paper-snow);
}

/* Tab 切換按鈕樣式 */
.fortune-tabs {
    display: flex;
    gap: var(--space-2);
    margin-bottom: var(--space-6);
    padding: var(--space-1);
    background: var(--paper-aged);
    border-radius: var(--radius-md);
}

.tab-btn {
    flex: 1;
    padding: var(--space-3) var(--space-4);
    background: transparent;
    border: none;
    border-radius: var(--radius-sm);
    font-family: var(--font-display);
    font-size: 0.9375rem;
    color: var(--ink-medium);
    cursor: pointer;
    transition: all var(--duration-normal) var(--ease-out);
}

.tab-btn:hover {
    background: var(--paper-tan);
}

.tab-btn.active {
    background: var(--paper-snow);
    color: var(--vermilion);
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08);
    font-weight: 500;
}

/* 搜尋框樣式 */
.search-input-wrapper {
    display: flex;
    gap: var(--space-3);
}

.search-input-wrapper .form-input {
    flex: 1;
}

.search-input-wrapper .btn {
    flex-shrink: 0;
    width: auto;
    min-width: 80px;
}

.form-hint {
    font-size: 0.85rem;
    color: var(--ink-medium);
    letter-spacing: 0.05em;
}

/* 按鈕 */
.btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: var(--space-3);
    padding: var(--space-4) var(--space-6);
    font-family: var(--font-display);
    font-size: 1rem;
    font-weight: 400;
    letter-spacing: 0.15em;
    text-decoration: none;
    border: none;
    border-radius: var(--radius-md);
    cursor: pointer;
    transition: all var(--duration-normal) var(--ease-out);
    position: relative;
    overflow: hidden;
}

.btn-primary {
    width: 100%;
    padding: var(--space-5) var(--space-6);
    background: linear-gradient(135deg, var(--vermilion) 0%, var(--vermilion-deep) 100%);
    color: var(--paper-snow);
    box-shadow: 0 4px 20px rgba(201, 64, 67, 0.3);
}

.btn-primary::before {
    content: '';
    position: absolute;
    top: 0;
    left: -100%;
    width: 100%;
    height: 100%;
    background: linear-gradient(90deg, transparent, rgba(255,255,255,0.15), transparent);
    transition: left 0.6s var(--ease-out);
}

.btn-primary:hover {
    transform: translateY(-2px);
    box-shadow: 0 8px 30px rgba(201, 64, 67, 0.4);
}

.btn-primary:hover::before {
    left: 100%;
}

.btn-primary:active {
    transform: translateY(0);
}

.btn-large {
    padding: var(--space-5) var(--space-8);
    font-size: 1.1rem;
}

.btn-text {
    position: relative;
    z-index: 1;
}

.btn-icon {
    font-size: 1.2rem;
    transition: transform var(--duration-fast) var(--ease-out);
}

.btn:hover .btn-icon {
    transform: translateX(4px);
}

/* ===== 區塊標題 ===== */
.section-header {
    text-align: center;
    margin-bottom: var(--space-8);
}

.section-header h2 {
    font-family: var(--font-display);
    font-size: clamp(1.5rem, 4vw, 2rem);
    font-weight: 600;
    color: var(--ink-deep);
    letter-spacing: 0.1em;
    position: relative;
    display: inline-block;
}

.section-header h2::before,
.section-header h2::after {
    content: '◆';
    font-size: 0.5em;
    color: var(--vermilion);
    vertical-align: middle;
    margin: 0 var(--space-4);
    opacity: 0.6;
}

.section-divider {
    width: 60px;
    height: 2px;
    background: linear-gradient(90deg, transparent, var(--vermilion), transparent);
    margin: var(--space-4) auto 0;
}

/* ===== 最近查詢 & 熱門姓名 ===== */
.recent-names-section,
.popular-names-section {
    padding: var(--space-10) 0;
    background: var(--paper-aged);
}

.popular-names-section {
    background: linear-gradient(180deg, var(--paper-aged) 0%, var(--paper-warm) 100%);
}

.names-grid {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: var(--space-3);
}

.name-tag {
    display: inline-flex;
    align-items: center;
    gap: var(--space-2);
    padding: var(--space-3) var(--space-5);
    background: var(--paper-snow);
    border: 1px solid var(--paper-tan);
    border-radius: var(--radius-xl);
    font-family: var(--font-display);
    font-size: 0.95rem;
    color: var(--ink-medium);
    text-decoration: none;
    letter-spacing: 0.08em;
    transition: all var(--duration-fast) var(--ease-out);
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.04);
}

.name-tag:hover {
    background: var(--paper-snow);
    border-color: var(--vermilion);
    color: var(--vermilion);
    transform: translateY(-2px);
    box-shadow: 0 4px 12px rgba(201, 64, 67, 0.12);
}

.name-tag-popular {
    background: rgba(201, 169, 98, 0.08);
    border-color: rgba(201, 169, 98, 0.3);
}

.name-tag-popular:hover {
    background: rgba(201, 169, 98, 0.12);
    border-color: var(--gold);
}

.name-count {
    font-size: 0.75rem;
    color: var(--gold);
    font-weight: 500;
}

/* ===== 介紹區塊 - 五格說明 ===== */
.intro-section {
    padding: var(--space-12) 0;
    background: var(--paper-warm);
}

.intro-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
    gap: var(--space-6);
}

.intro-card {
    padding: var(--space-6);
    background: var(--paper-snow);
    border: 1px solid rgba(0, 0, 0, 0.06);
    border-radius: var(--radius-lg);
    transition: all var(--duration-normal) var(--ease-out);
    position: relative;
    overflow: hidden;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.04);
}

.intro-card::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 3px;
    height: 0;
    background: var(--vermilion);
    transition: height var(--duration-slow) var(--ease-out);
}

.intro-card:hover {
    border-color: rgba(0, 0, 0, 0.1);
    transform: translateY(-4px);
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.08);
}

.intro-card:hover::before {
    height: 100%;
}

.intro-icon {
    width: 48px;
    height: 48px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: rgba(201, 64, 67, 0.08);
    border-radius: var(--radius-md);
    font-family: var(--font-display);
    font-size: 1.5rem;
    color: var(--vermilion);
    margin-bottom: var(--space-4);
}

.intro-card h3 {
    font-family: var(--font-display);
    font-size: 1.125rem;
    font-weight: 600;
    color: var(--ink-deep);
    letter-spacing: 0.05em;
    margin-bottom: var(--space-3);
}

.intro-card p {
    font-size: 0.9rem;
    color: var(--ink-light);
    line-height: 1.75;
}

/* ===== 五行區塊 ===== */
.wuxing-section {
    padding: var(--space-12) 0;
    background: var(--paper-aged);
}

.wuxing-grid {
    display: grid;
    grid-template-columns: repeat(5, 1fr);
    gap: var(--space-4);
}

@media (max-width: 768px) {
    .wuxing-grid {
        grid-template-columns: repeat(3, 1fr);
    }
}

@media (max-width: 480px) {
    .wuxing-grid {
        grid-template-columns: repeat(2, 1fr);
    }
}

.wuxing-card {
    padding: var(--space-6) var(--space-4);
    background: var(--paper-snow);
    border: 1px solid rgba(0, 0, 0, 0.06);
    border-radius: var(--radius-lg);
    text-align: center;
    transition: all var(--duration-normal) var(--ease-out);
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.04);
}

.wuxing-card:hover {
    transform: translateY(-4px) scale(1.02);
}

.wuxing-symbol {
    font-family: var(--font-display);
    font-size: 2.5rem;
    margin-bottom: var(--space-2);
    transition: transform var(--duration-normal) var(--ease-out);
}

.wuxing-card:hover .wuxing-symbol {
    transform: scale(1.1);
}

.wuxing-numbers {
    font-size: 1rem;
    color: var(--ink-medium);
    margin-bottom: var(--space-2);
    letter-spacing: 0.15em;
}

.wuxing-card p {
    font-size: 0.8rem;
    color: var(--ink-light);
}

/* 五行個別顏色 */
.wuxing-wood {
    border-color: rgba(74, 124, 89, 0.3);
}
.wuxing-wood .wuxing-symbol {
    color: var(--wood);
}
.wuxing-wood:hover {
    background: rgba(74, 124, 89, 0.1);
    border-color: var(--wood);
    box-shadow: 0 8px 30px rgba(74, 124, 89, 0.2);
}

.wuxing-fire {
    border-color: rgba(201, 64, 67, 0.3);
}
.wuxing-fire .wuxing-symbol {
    color: var(--fire);
}
.wuxing-fire:hover {
    background: rgba(201, 64, 67, 0.1);
    border-color: var(--fire);
    box-shadow: 0 8px 30px rgba(201, 64, 67, 0.2);
}

.wuxing-earth {
    border-color: rgba(201, 169, 98, 0.3);
}
.wuxing-earth .wuxing-symbol {
    color: var(--earth);
}
.wuxing-earth:hover {
    background: rgba(201, 169, 98, 0.1);
    border-color: var(--earth);
    box-shadow: 0 8px 30px rgba(201, 169, 98, 0.2);
}

.wuxing-metal {
    border-color: rgba(156, 163, 175, 0.3);
}
.wuxing-metal .wuxing-symbol {
    color: var(--metal);
}
.wuxing-metal:hover {
    background: rgba(156, 163, 175, 0.1);
    border-color: var(--metal);
    box-shadow: 0 8px 30px rgba(156, 163, 175, 0.2);
}

.wuxing-water {
    border-color: rgba(61, 90, 128, 0.3);
}
.wuxing-water .wuxing-symbol {
    color: var(--water);
}
.wuxing-water:hover {
    background: rgba(61, 90, 128, 0.1);
    border-color: var(--water);
    box-shadow: 0 8px 30px rgba(61, 90, 128, 0.2);
}

/* ===== 頁尾 ===== */
.site-footer {
    padding: var(--space-12) 0 var(--space-8);
    background: var(--paper-tan);
    border-top: 1px solid rgba(0, 0, 0, 0.06);
}

.footer-content {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
    gap: var(--space-8);
    margin-bottom: var(--space-8);
}

.footer-section h3 {
    font-family: var(--font-display);
    font-size: 1rem;
    font-weight: 600;
    color: var(--ink-deep);
    letter-spacing: 0.05em;
    margin-bottom: var(--space-4);
    position: relative;
    padding-bottom: var(--space-3);
}

.footer-section h3::after {
    content: '';
    position: absolute;
    bottom: 0;
    left: 0;
    width: 30px;
    height: 2px;
    background: var(--vermilion);
}

.footer-section p,
.footer-section li {
    font-size: 0.9rem;
    color: var(--ink-medium);
    line-height: 1.8;
}

.footer-section ul {
    list-style: none;
}

.footer-section li {
    padding-left: var(--space-4);
    position: relative;
}

.footer-section li::before {
    content: '・';
    position: absolute;
    left: 0;
    color: var(--vermilion);
}

.footer-links a {
    color: var(--ink-medium);
    font-weight: 500;
    text-decoration: none;
    transition: color 0.2s ease;
}

.footer-links a:hover {
    color: var(--vermilion-deep);
}

.footer-bottom {
    text-align: center;
    padding-top: var(--space-6);
    border-top: 1px solid rgba(0, 0, 0, 0.06);
}

.copyright {
    font-size: 0.85rem;
    color: var(--ink-medium);
    letter-spacing: 0.03em;
}

/* ===== 通用動畫 ===== */
@keyframes float {
    0%, 100% { transform: translateY(0); }
    50% { transform: translateY(-10px); }
}

@keyframes pulse {
    0%, 100% { opacity: 1; }
    50% { opacity: 0.6; }
}

@keyframes shimmer {
    0% { background-position: -200% 0; }
    100% { background-position: 200% 0; }
}

/* ===== 滾動條 ===== */
::-webkit-scrollbar {
    width: 8px;
}

::-webkit-scrollbar-track {
    background: var(--paper-aged);
}

::-webkit-scrollbar-thumb {
    background: var(--paper-tan);
    border-radius: 4px;
}

::-webkit-scrollbar-thumb:hover {
    background: var(--ink-mist);
}

/* ===== 選取文字 ===== */
::selection {
    background: var(--vermilion);
    color: var(--paper-snow);
}

/* ===== 載入動畫 ===== */
.page-wrapper > * {
    animation: none;
}

.page-wrapper > *:nth-child(1) { animation-delay: 0s; }
.page-wrapper > *:nth-child(2) { animation-delay: 0.1s; }
.page-wrapper > *:nth-child(3) { animation-delay: 0.2s; }
.page-wrapper > *:nth-child(4) { animation-delay: 0.3s; }
.page-wrapper > *:nth-child(5) { animation-delay: 0.4s; }

@media (prefers-reduced-motion: reduce) {
    html {
        scroll-behavior: auto;
    }

    *, *::before, *::after {
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.01ms !important;
    }
}

/* ===== 結果頁面樣式 ===== */
.result-section {
    padding: var(--space-8) 0 var(--space-12);
}

.result-header {
    text-align: center;
    margin-bottom: var(--space-10);
    padding: var(--space-10) 0;
    background: 
        radial-gradient(ellipse 60% 40% at 50% 0%, rgba(201, 64, 67, 0.08) 0%, transparent 50%),
        var(--ink-deep);
    position: relative;
}

.result-name {
    font-family: var(--font-display);
    font-size: clamp(3rem, 10vw, 5rem);
    font-weight: 400;
    color: var(--paper-snow);
    letter-spacing: 0.2em;
    margin-bottom: var(--space-4);
    text-shadow: 0 4px 30px rgba(201, 64, 67, 0.2);
}

.result-meta {
    display: flex;
    justify-content: center;
    gap: var(--space-6);
    flex-wrap: wrap;
    font-size: 0.9rem;
    color: var(--ink-mist);
}

.result-meta span {
    display: flex;
    align-items: center;
    gap: var(--space-2);
}

/* 評分卡片 */
.score-card {
    max-width: 400px;
    margin: var(--space-8) auto;
    padding: var(--space-8);
    background: rgba(255, 255, 255, 0.03);
    border: 1px solid rgba(255, 255, 255, 0.08);
    border-radius: var(--radius-xl);
    text-align: center;
    position: relative;
}

.score-card::before {
    content: '';
    position: absolute;
    top: -1px;
    left: 50%;
    transform: translateX(-50%);
    width: 60%;
    height: 3px;
    background: linear-gradient(90deg, transparent, var(--gold), transparent);
}

.score-value {
    font-family: var(--font-display);
    font-size: 5rem;
    font-weight: 400;
    line-height: 1;
    background: linear-gradient(135deg, var(--gold-bright) 0%, var(--gold) 50%, var(--copper) 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
    margin-bottom: var(--space-2);
}

.score-label {
    font-size: 1rem;
    color: var(--ink-mist);
    letter-spacing: 0.1em;
    margin-bottom: var(--space-4);
}

.score-grade {
    display: inline-flex;
    align-items: center;
    gap: var(--space-2);
    padding: var(--space-2) var(--space-5);
    background: var(--vermilion-muted);
    border: 1px solid rgba(201, 64, 67, 0.3);
    border-radius: var(--radius-xl);
    font-family: var(--font-display);
    font-size: 1rem;
    color: var(--vermilion-glow);
    letter-spacing: 0.15em;
}

/* 五格結果 */
.wuge-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
    gap: var(--space-5);
    margin-bottom: var(--space-8);
}

.wuge-card {
    padding: var(--space-6);
    background: rgba(255, 255, 255, 0.02);
    border: 1px solid rgba(255, 255, 255, 0.06);
    border-radius: var(--radius-lg);
    text-align: center;
    transition: all var(--duration-normal) var(--ease-out);
    position: relative;
    overflow: hidden;
}

.wuge-card::after {
    content: '';
    position: absolute;
    bottom: 0;
    left: 0;
    width: 100%;
    height: 3px;
    background: var(--vermilion);
    transform: scaleX(0);
    transition: transform var(--duration-normal) var(--ease-out);
}

.wuge-card:hover {
    background: rgba(255, 255, 255, 0.04);
    transform: translateY(-4px);
}

.wuge-card:hover::after {
    transform: scaleX(1);
}

.wuge-name {
    font-family: var(--font-display);
    font-size: 1.25rem;
    color: var(--paper-snow);
    letter-spacing: 0.1em;
    margin-bottom: var(--space-3);
}

.wuge-number {
    font-size: 2.5rem;
    font-weight: 300;
    color: var(--gold);
    margin-bottom: var(--space-2);
}

.wuge-element {
    display: inline-block;
    padding: var(--space-1) var(--space-3);
    background: rgba(255, 255, 255, 0.05);
    border-radius: var(--radius-sm);
    font-size: 0.85rem;
    color: var(--paper-tan);
    margin-bottom: var(--space-3);
}

.wuge-fortune {
    font-size: 0.9rem;
    padding: var(--space-2) var(--space-4);
    border-radius: var(--radius-md);
}

.fortune-good {
    background: rgba(74, 124, 89, 0.15);
    color: var(--wood);
}

.fortune-half {
    background: rgba(201, 169, 98, 0.15);
    color: var(--earth);
}

.fortune-bad {
    background: rgba(163, 47, 50, 0.15);
    color: var(--vermilion);
}

/* 三才配置 */
.sancai-section {
    padding: var(--space-8);
    background: rgba(255, 255, 255, 0.02);
    border: 1px solid rgba(255, 255, 255, 0.06);
    border-radius: var(--radius-lg);
    margin-bottom: var(--space-8);
}

.sancai-visual {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: var(--space-4);
    margin-bottom: var(--space-6);
}

.sancai-element {
    width: 80px;
    height: 80px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    background: rgba(255, 255, 255, 0.03);
    border: 2px solid rgba(255, 255, 255, 0.1);
    border-radius: var(--radius-lg);
    transition: all var(--duration-normal) var(--ease-out);
}

.sancai-element:hover {
    transform: scale(1.1);
    border-color: var(--vermilion);
}

.sancai-element .symbol {
    font-family: var(--font-display);
    font-size: 2rem;
}

.sancai-element .label {
    font-size: 0.75rem;
    color: var(--ink-mist);
    margin-top: var(--space-1);
}

.sancai-connector {
    width: 40px;
    height: 2px;
    background: linear-gradient(90deg, transparent, var(--ink-light), transparent);
}

.sancai-description {
    text-align: center;
    font-size: 1rem;
    color: var(--paper-tan);
    line-height: 2;
    max-width: 600px;
    margin: 0 auto;
}

/* 詳細解析 */
.analysis-section {
    margin-bottom: var(--space-8);
}

.analysis-card {
    padding: var(--space-6);
    background: rgba(255, 255, 255, 0.02);
    border: 1px solid rgba(255, 255, 255, 0.06);
    border-radius: var(--radius-lg);
    margin-bottom: var(--space-5);
}

.analysis-card h3 {
    font-family: var(--font-display);
    font-size: 1.25rem;
    color: var(--paper-snow);
    letter-spacing: 0.1em;
    margin-bottom: var(--space-4);
    padding-bottom: var(--space-3);
    border-bottom: 1px solid rgba(255, 255, 255, 0.08);
    display: flex;
    align-items: center;
    gap: var(--space-3);
}

.analysis-card h3::before {
    content: '';
    width: 4px;
    height: 20px;
    background: var(--vermilion);
    border-radius: 2px;
}

.analysis-card p {
    font-size: 0.95rem;
    color: var(--paper-tan);
    line-height: 2;
}

.analysis-card ul {
    list-style: none;
    padding: 0;
}

.analysis-card li {
    padding: var(--space-3) 0;
    padding-left: var(--space-5);
    border-bottom: 1px solid rgba(255, 255, 255, 0.03);
    position: relative;
    color: var(--paper-tan);
    font-size: 0.95rem;
}

.analysis-card li:last-child {
    border-bottom: none;
}

.analysis-card li::before {
    content: '◇';
    position: absolute;
    left: 0;
    color: var(--vermilion);
    font-size: 0.8rem;
}

/* ===== 八字頁面 ===== */
.bazi-pillars {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: var(--space-4);
    max-width: 600px;
    margin: var(--space-8) auto;
}

@media (max-width: 480px) {
    .bazi-pillars {
        grid-template-columns: repeat(2, 1fr);
    }
}

.bazi-pillar {
    text-align: center;
    padding: var(--space-5);
    background: rgba(255, 255, 255, 0.02);
    border: 1px solid rgba(255, 255, 255, 0.08);
    border-radius: var(--radius-lg);
    transition: all var(--duration-normal) var(--ease-out);
}

.bazi-pillar:hover {
    background: rgba(255, 255, 255, 0.04);
    transform: translateY(-4px);
}

.pillar-label {
    font-size: 0.8rem;
    color: var(--ink-mist);
    letter-spacing: 0.2em;
    margin-bottom: var(--space-3);
}

.pillar-gan {
    font-family: var(--font-display);
    font-size: 2.5rem;
    color: var(--vermilion);
    margin-bottom: var(--space-2);
}

.pillar-zhi {
    font-family: var(--font-display);
    font-size: 2.5rem;
    color: var(--gold);
    margin-bottom: var(--space-3);
}

.pillar-element {
    font-size: 0.85rem;
    color: var(--paper-tan);
    padding: var(--space-2) var(--space-3);
    background: rgba(255, 255, 255, 0.05);
    border-radius: var(--radius-sm);
}

/* ===== 通用頁面區塊 ===== */
.page-hero {
    padding: var(--space-10) 0;
    background: 
        radial-gradient(ellipse 60% 40% at 50% 0%, rgba(201, 64, 67, 0.06) 0%, transparent 50%),
        var(--ink-deep);
    text-align: center;
}

.page-title {
    font-family: var(--font-display);
    font-size: clamp(2rem, 6vw, 3rem);
    color: var(--paper-snow);
    letter-spacing: 0.15em;
    margin-bottom: var(--space-3);
}

.page-subtitle {
    font-size: 1rem;
    color: var(--ink-mist);
    max-width: 600px;
    margin: 0 auto;
}

/* 內容卡片網格 */
.content-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
    gap: var(--space-5);
    padding: var(--space-8) 0;
}

.content-card {
    display: block;
    padding: var(--space-6);
    background: rgba(255, 255, 255, 0.02);
    border: 1px solid rgba(255, 255, 255, 0.06);
    border-radius: var(--radius-lg);
    text-decoration: none;
    transition: all var(--duration-normal) var(--ease-out);
    position: relative;
    overflow: hidden;
}

.content-card::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: linear-gradient(135deg, transparent 0%, rgba(201, 64, 67, 0.05) 100%);
    opacity: 0;
    transition: opacity var(--duration-normal) var(--ease-out);
}

.content-card:hover {
    border-color: rgba(201, 64, 67, 0.3);
    transform: translateY(-4px);
}

.content-card:hover::before {
    opacity: 1;
}

.content-card h3 {
    font-family: var(--font-display);
    font-size: 1.25rem;
    color: var(--paper-snow);
    letter-spacing: 0.08em;
    margin-bottom: var(--space-3);
    position: relative;
    z-index: 1;
}

.content-card p {
    font-size: 0.9rem;
    color: var(--ink-mist);
    line-height: 1.8;
    position: relative;
    z-index: 1;
}

/* 特色功能入口 */
.feature-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
    gap: var(--space-5);
    padding: var(--space-8) 0;
}

.feature-card {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    padding: var(--space-8) var(--space-6);
    background: rgba(255, 255, 255, 0.02);
    border: 1px solid rgba(255, 255, 255, 0.06);
    border-radius: var(--radius-lg);
    text-decoration: none;
    transition: all var(--duration-normal) var(--ease-out);
}

.feature-card:hover {
    background: rgba(255, 255, 255, 0.04);
    border-color: rgba(255, 255, 255, 0.12);
    transform: translateY(-6px);
}

.feature-icon {
    width: 72px;
    height: 72px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: var(--vermilion-muted);
    border-radius: var(--radius-lg);
    font-family: var(--font-display);
    font-size: 2rem;
    color: var(--vermilion);
    margin-bottom: var(--space-5);
    transition: all var(--duration-normal) var(--ease-out);
}

.feature-card:hover .feature-icon {
    background: var(--vermilion);
    color: var(--paper-snow);
    transform: scale(1.1);
}

.feature-card h3 {
    font-family: var(--font-display);
    font-size: 1.2rem;
    color: var(--paper-snow);
    letter-spacing: 0.1em;
    margin-bottom: var(--space-2);
}

.feature-card p {
    font-size: 0.85rem;
    color: var(--ink-mist);
}

/* ===== 生肖 & 星座 ===== */
.zodiac-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
    gap: var(--space-4);
}

.zodiac-card {
    display: flex;
    flex-direction: column;
    align-items: center;
    padding: var(--space-5);
    background: linear-gradient(160deg, var(--paper-snow) 0%, var(--paper-aged) 100%);
    border: 1px solid rgba(0, 0, 0, 0.08);
    border-radius: var(--radius-lg);
    text-decoration: none;
    color: var(--ink-deep);
    transition: all var(--duration-normal) var(--ease-out);
}

.zodiac-card:hover {
    background: linear-gradient(160deg, rgba(201, 64, 67, 0.08) 0%, var(--paper-snow) 100%);
    border-color: var(--vermilion);
    transform: translateY(-4px) scale(1.02);
}

.zodiac-symbol {
    font-family: var(--font-display);
    font-size: 3rem;
    color: var(--sign-color, var(--vermilion-deep));
    margin-bottom: var(--space-3);
    transition: transform var(--duration-normal) var(--ease-out);
}

.zodiac-card:hover .zodiac-symbol {
    transform: scale(1.15);
}

.zodiac-name {
    font-family: var(--font-display);
    font-size: 1.1rem;
    color: var(--ink-deep);
    letter-spacing: 0.15em;
}

.zodiac-date {
    margin-top: var(--space-1);
    font-size: 0.82rem;
    color: var(--ink-medium);
}

/* ===== 農民曆 ===== */
.calendar-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: var(--space-6);
    background: rgba(255, 255, 255, 0.02);
    border: 1px solid rgba(255, 255, 255, 0.06);
    border-radius: var(--radius-lg);
    margin-bottom: var(--space-6);
}

.calendar-date {
    text-align: center;
}

.calendar-date .solar {
    font-family: var(--font-display);
    font-size: 2.5rem;
    color: var(--paper-snow);
    margin-bottom: var(--space-2);
}

.calendar-date .lunar {
    font-size: 1rem;
    color: var(--gold);
}

.calendar-info {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: var(--space-6);
}

.calendar-yiji {
    padding: var(--space-5);
    background: rgba(255, 255, 255, 0.02);
    border-radius: var(--radius-md);
}

.calendar-yiji h4 {
    font-family: var(--font-display);
    font-size: 1rem;
    margin-bottom: var(--space-3);
    padding-bottom: var(--space-2);
    border-bottom: 1px solid rgba(255, 255, 255, 0.08);
}

.calendar-yiji.yi h4 {
    color: var(--wood);
}

.calendar-yiji.ji h4 {
    color: var(--vermilion);
}

.calendar-yiji ul {
    list-style: none;
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-2);
}

.calendar-yiji li {
    padding: var(--space-2) var(--space-3);
    background: rgba(255, 255, 255, 0.05);
    border-radius: var(--radius-sm);
    font-size: 0.9rem;
    color: var(--paper-tan);
}

/* ===== 籤詩 ===== */
.fortune-poem {
    max-width: 500px;
    margin: 0 auto;
    padding: var(--space-8);
    background: rgba(255, 255, 255, 0.02);
    border: 1px solid rgba(255, 255, 255, 0.08);
    border-radius: var(--radius-lg);
    text-align: center;
    position: relative;
}

.fortune-poem::before,
.fortune-poem::after {
    content: '"';
    font-family: var(--font-display);
    font-size: 4rem;
    color: var(--vermilion);
    opacity: 0.2;
    position: absolute;
}

.fortune-poem::before {
    top: var(--space-4);
    left: var(--space-4);
}

.fortune-poem::after {
    content: '"';
    bottom: var(--space-4);
    right: var(--space-4);
}

.fortune-number {
    display: inline-block;
    padding: var(--space-2) var(--space-5);
    background: var(--vermilion);
    border-radius: var(--radius-xl);
    font-family: var(--font-display);
    font-size: 1rem;
    color: var(--paper-snow);
    letter-spacing: 0.2em;
    margin-bottom: var(--space-5);
}

.fortune-text {
    font-family: var(--font-display);
    font-size: 1.5rem;
    color: var(--paper-snow);
    line-height: 2.5;
    letter-spacing: 0.1em;
    margin-bottom: var(--space-5);
}

.fortune-interpretation {
    font-size: 0.95rem;
    color: var(--paper-tan);
    line-height: 2;
}

/* ===== 響應式調整 ===== */
@media (max-width: 768px) {
    .result-name {
        letter-spacing: 0.1em;
    }
    
    .score-value {
        font-size: 4rem;
    }
    
    .calendar-info {
        grid-template-columns: 1fr;
    }
    
    .bazi-pillars {
        gap: var(--space-3);
    }
    
    .pillar-gan,
    .pillar-zhi {
        font-size: 2rem;
    }
}

@media (max-width: 480px) {
    .form-card {
        padding: var(--space-5);
    }
    
    .wuge-grid {
        grid-template-columns: 1fr;
    }
    
    .sancai-visual {
        flex-wrap: wrap;
    }
    
    .sancai-connector {
        display: none;
    }
}

/* ===== 麵包屑導航 ===== */
.breadcrumb {
    padding: var(--space-4) 0;
    background: var(--paper-aged);
    border-bottom: 1px solid rgba(0, 0, 0, 0.04);
}

.breadcrumb-list {
    display: flex;
    align-items: center;
    gap: var(--space-2);
    list-style: none;
    font-size: 0.85rem;
}

.breadcrumb-item a {
    color: var(--ink-medium);
    font-weight: 500;
    text-decoration: none;
    transition: color var(--duration-fast) var(--ease-out);
}

.breadcrumb-item a:hover {
    color: var(--vermilion);
}

.breadcrumb-item::after {
    content: '/';
    margin-left: var(--space-2);
    color: var(--ink-mist);
}

.breadcrumb-item.current {
    color: var(--ink-medium);
}

.breadcrumb-item.current::after {
    display: none;
}

/* ===== 結果頁 Hero ===== */
.result-hero {
    padding: var(--space-10) 0;
    background:
        radial-gradient(ellipse 60% 40% at 50% 0%, rgba(201, 64, 67, 0.04) 0%, transparent 50%),
        linear-gradient(180deg, var(--paper-aged) 0%, var(--paper-warm) 100%);
}

.result-hero-content {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: var(--space-8);
    text-align: center;
}

@media (min-width: 768px) {
    .result-hero-content {
        flex-direction: row;
        justify-content: center;
        gap: var(--space-12);
    }
}

.name-display {
    text-align: center;
}

.name-label {
    display: block;
    font-size: 0.85rem;
    color: var(--ink-light);
    letter-spacing: 0.15em;
    margin-bottom: var(--space-3);
}

.name-title {
    font-family: var(--font-display);
    font-size: clamp(2.5rem, 8vw, 4rem);
    font-weight: 600;
    color: var(--ink-void);
    letter-spacing: 0.12em;
}

/* 評分圓環 */
.score-display {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: var(--space-4);
}

.score-circle {
    position: relative;
    width: 160px;
    height: 160px;
}

.score-circle svg {
    width: 100%;
    height: 100%;
    transform: rotate(-90deg);
}

.score-circle .score-bg {
    fill: none;
    stroke: var(--paper-tan);
    stroke-width: 6;
}

.score-circle .score-progress {
    fill: none;
    stroke: var(--vermilion);
    stroke-width: 6;
    stroke-linecap: round;
    stroke-dasharray: 283;
    stroke-dashoffset: 283;
    transition: stroke-dashoffset 1.5s var(--ease-out);
}

.score-circle .score-value {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    text-align: center;
}

.score-circle .score-number {
    display: block;
    font-family: var(--font-display);
    font-size: 3rem;
    font-weight: 600;
    color: var(--ink-void);
    line-height: 1;
}

.score-circle .score-label {
    font-size: 0.9rem;
    color: var(--ink-light);
}

.score-grade {
    font-family: var(--font-display);
    font-size: 1.125rem;
    font-weight: 500;
    letter-spacing: 0.08em;
    padding: var(--space-2) var(--space-5);
    background: var(--paper-snow);
    border: 1px solid var(--paper-tan);
    border-radius: var(--radius-xl);
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.04);
}

/* ===== 單字解析 ===== */
.strokes-section {
    padding: var(--space-10) 0;
    background: var(--paper-warm);
}

.char-analysis-list {
    display: flex;
    justify-content: center;
    gap: var(--space-4);
    flex-wrap: wrap;
    margin-bottom: var(--space-6);
}

.char-analysis-item {
    flex: 0 0 auto;
    width: 140px;
    padding: var(--space-5);
    background: var(--paper-snow);
    border: 1px solid rgba(0, 0, 0, 0.06);
    border-radius: var(--radius-lg);
    text-align: center;
    transition: all var(--duration-normal) var(--ease-out);
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.04);
}

.char-analysis-item:hover {
    transform: translateY(-4px);
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.08);
}

.char-main {
    font-family: var(--font-display);
    font-size: 3rem;
    color: var(--ink-void);
    margin-bottom: var(--space-3);
}

.char-meta {
    display: flex;
    justify-content: center;
    gap: var(--space-3);
    font-size: 0.85rem;
}

.char-wuxing {
    padding: var(--space-1) var(--space-2);
    border-radius: var(--radius-sm);
    font-weight: 500;
}

.wuxing-木 { background: rgba(74, 124, 89, 0.2); color: var(--wood); }
.wuxing-火 { background: rgba(201, 64, 67, 0.2); color: var(--fire); }
.wuxing-土 { background: rgba(201, 169, 98, 0.2); color: var(--earth); }
.wuxing-金 { background: rgba(156, 163, 175, 0.2); color: var(--metal); }
.wuxing-水 { background: rgba(61, 90, 128, 0.2); color: var(--water); }

.char-stroke {
    color: var(--ink-faded);
}

.char-meaning {
    margin-top: var(--space-3);
    padding-top: var(--space-3);
    border-top: 1px solid rgba(0, 0, 0, 0.06);
    font-size: 0.9rem;
    color: var(--ink-medium);
    line-height: 1.6;
}

.fortune-tag {
    display: inline-block;
    padding: 2px 8px;
    border-radius: var(--radius-sm);
    font-size: 0.75rem;
    font-weight: 600;
    margin-right: var(--space-2);
    vertical-align: middle;
}

.fortune-tag.fortune-good {
    background: rgba(61, 107, 79, 0.15);
    color: var(--wood-green);
    border: 1px solid rgba(61, 107, 79, 0.3);
}

.no-meaning {
    color: var(--ink-faded);
    font-style: italic;
}

.total-strokes {
    text-align: center;
    font-size: 1rem;
    color: var(--ink-medium);
}

.total-strokes strong {
    color: var(--vermilion);
    font-size: 1.25rem;
}

/* ===== 五格詳解 ===== */
.wuge-section {
    padding: var(--space-10) 0;
    background: var(--paper-aged);
}

.wuge-list {
    display: flex;
    flex-direction: column;
    gap: var(--space-5);
}

.wuge-item {
    padding: var(--space-6);
    background: var(--paper-snow);
    border: 1px solid rgba(0, 0, 0, 0.06);
    border-radius: var(--radius-lg);
    transition: all var(--duration-normal) var(--ease-out);
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.04);
}

.wuge-item:hover {
    box-shadow: 0 4px 16px rgba(0, 0, 0, 0.06);
}

.wuge-item-header {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    align-items: center;
    gap: var(--space-4);
    margin-bottom: var(--space-4);
    padding-bottom: var(--space-4);
    border-bottom: 1px solid rgba(0, 0, 0, 0.06);
}

.wuge-item-title {
    display: flex;
    align-items: center;
    gap: var(--space-3);
}

.wuge-name {
    font-family: var(--font-display);
    font-size: 1.125rem;
    font-weight: 600;
    color: var(--ink-deep);
    letter-spacing: 0.05em;
}

.wuge-number {
    font-size: 1.5rem;
    color: var(--vermilion);
    font-weight: 600;
}

.wuge-fortune {
    padding: var(--space-1) var(--space-3);
    border-radius: var(--radius-sm);
    font-size: 0.85rem;
    font-weight: 500;
}

.wuge-item-meta {
    display: flex;
    gap: var(--space-4);
    font-size: 0.9rem;
    color: var(--ink-light);
}

.wuge-shuli {
    color: var(--ink-medium);
}

.wuge-item-body p {
    font-size: 0.95rem;
    color: var(--ink-medium);
    line-height: 1.9;
    margin-bottom: var(--space-3);
}

.wuge-item-body p:last-child {
    margin-bottom: 0;
}

.wuge-desc {
    color: var(--ink-light) !important;
    font-size: 0.85rem !important;
}

.wuge-poem {
    font-family: var(--font-display);
    font-style: italic;
    color: #7a512f !important;
    padding: var(--space-3);
    background: rgba(201, 169, 98, 0.08);
    border-left: 3px solid var(--gold);
    border-radius: 0 var(--radius-sm) var(--radius-sm) 0;
}

.wuge-interp {
    color: var(--ink-deep) !important;
    font-size: 0.95rem !important;
}

.wuge-wuxing {
    color: var(--ink-medium);
}

/* ===== 三才配置 ===== */
.sancai-section {
    padding: var(--space-10) 0;
    background: var(--paper-warm);
}

.sancai-card {
    max-width: 700px;
    margin: 0 auto;
    padding: var(--space-8);
    background: var(--paper-snow);
    border: 1px solid rgba(0, 0, 0, 0.06);
    border-radius: var(--radius-lg);
    text-align: center;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.04);
}

.sancai-display {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: var(--space-4);
    margin-bottom: var(--space-6);
    flex-wrap: wrap;
}

.sancai-item {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: var(--space-2);
    padding: var(--space-4);
    background: var(--paper-aged);
    border: 1px solid rgba(0, 0, 0, 0.06);
    border-radius: var(--radius-lg);
    min-width: 100px;
}

.sancai-label {
    font-size: 0.8rem;
    color: #66605a;
    letter-spacing: 0.08em;
}

.sancai-wuxing {
    font-family: var(--font-display);
    font-size: 2rem;
    padding: var(--space-2) var(--space-4);
    border-radius: var(--radius-md);
}

.sancai-number {
    font-size: 0.9rem;
    color: var(--ink-medium);
}

.sancai-arrow {
    font-size: 1.5rem;
    color: var(--ink-mist);
}

@media (max-width: 480px) {
    .sancai-arrow {
        transform: rotate(90deg);
        margin: var(--space-2) 0;
    }
}

.sancai-result {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: var(--space-4);
    margin-bottom: var(--space-5);
}

.sancai-config {
    font-family: var(--font-display);
    font-size: 1.5rem;
    font-weight: 600;
    color: var(--ink-deep);
    letter-spacing: 0.15em;
}

.sancai-fortune {
    padding: var(--space-2) var(--space-4);
    border-radius: var(--radius-md);
    font-size: 1rem;
    font-weight: 500;
}

.sancai-desc {
    font-size: 0.95rem;
    color: var(--ink-medium);
    line-height: 2;
}

/* ===== 三才詳細解析 ===== */
.sancai-details {
    margin-top: var(--space-8);
}

.sancai-detail-item {
    padding: var(--space-5);
    background: var(--paper-aged);
    border: 1px solid rgba(0, 0, 0, 0.04);
    border-radius: var(--radius-md);
    margin-bottom: var(--space-4);
}

.sancai-detail-item h4 {
    font-family: var(--font-display);
    font-size: 1.1rem;
    color: var(--paper-snow);
    margin-bottom: var(--space-3);
    display: flex;
    align-items: center;
    gap: var(--space-2);
}

.sancai-detail-item h4::before {
    content: '';
    width: 3px;
    height: 16px;
    background: var(--vermilion);
    border-radius: 2px;
}

.sancai-detail-item p {
    font-size: 0.95rem;
    color: var(--ink-deep);
    line-height: 1.8;
}

/* 三才詳解展開區塊 */
.sancai-detail {
    margin-top: var(--space-8);
    padding-top: var(--space-6);
    border-top: 1px solid rgba(0, 0, 0, 0.08);
}

.sancai-detail h3 {
    font-family: var(--font-display);
    font-size: 1.25rem;
    color: var(--ink-deep);
    margin-bottom: var(--space-5);
    text-align: center;
    position: relative;
    padding-bottom: var(--space-3);
}

.sancai-detail h3::before {
    content: '◆';
    color: var(--vermilion);
    margin-right: var(--space-2);
    font-size: 0.75em;
}

.sancai-detail h3::after {
    content: '◆';
    color: var(--vermilion);
    margin-left: var(--space-2);
    font-size: 0.75em;
}

.sancai-detail-list {
    display: flex;
    flex-direction: column;
    gap: var(--space-4);
}

.sancai-detail-item {
    padding: var(--space-5);
    background: rgba(255, 255, 255, 0.6);
    border: 1px solid rgba(0, 0, 0, 0.06);
    border-radius: var(--radius-md);
}

.detail-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: var(--space-3);
}

.detail-label {
    font-family: var(--font-display);
    font-size: 1rem;
    font-weight: 600;
    color: var(--ink-deep);
}

.detail-wuxing {
    padding: var(--space-1) var(--space-3);
    border-radius: var(--radius-sm);
    font-size: 0.85rem;
    font-weight: 500;
}

.detail-text {
    font-size: 0.95rem;
    color: var(--ink-deep);
    line-height: 1.8;
    margin: 0;
}

.sancai-relationship {
    margin-top: var(--space-6);
    padding: var(--space-5);
    background: linear-gradient(135deg, rgba(201, 64, 67, 0.06) 0%, rgba(201, 64, 67, 0.02) 100%);
    border: 1px solid rgba(201, 64, 67, 0.15);
    border-radius: var(--radius-md);
}

.sancai-relationship h4 {
    font-family: var(--font-display);
    font-size: 1.1rem;
    color: var(--vermilion);
    margin-bottom: var(--space-3);
    display: flex;
    align-items: center;
    gap: var(--space-2);
}

.sancai-relationship h4::before {
    content: '';
    width: 4px;
    height: 16px;
    background: var(--vermilion);
    border-radius: 2px;
}

.sancai-relationship p {
    font-size: 0.95rem;
    color: var(--ink-medium);
    line-height: 1.9;
    margin: 0;
}

/* ===== 詳細解析區塊 ===== */
.interpretation-section {
    padding: var(--space-10) 0;
    background: var(--ink-deep);
}

.interpretation-grid {
    display: grid;
    gap: var(--space-5);
}

@media (min-width: 768px) {
    .interpretation-grid {
        grid-template-columns: repeat(2, 1fr);
    }
}

.interpretation-card {
    padding: var(--space-6);
    background: rgba(255, 255, 255, 0.02);
    border: 1px solid rgba(255, 255, 255, 0.06);
    border-radius: var(--radius-lg);
}

.interpretation-card h3 {
    font-family: var(--font-display);
    font-size: 1.2rem;
    color: var(--paper-snow);
    letter-spacing: 0.08em;
    margin-bottom: var(--space-4);
    padding-bottom: var(--space-3);
    border-bottom: 1px solid rgba(255, 255, 255, 0.08);
    display: flex;
    align-items: center;
    gap: var(--space-3);
}

.interpretation-card h3::before {
    content: '';
    width: 4px;
    height: 18px;
    background: var(--vermilion);
    border-radius: 2px;
}

.interpretation-card p {
    font-size: 0.95rem;
    color: var(--paper-tan);
    line-height: 1.9;
}

/* 評分動畫 JS 啟動 */
.score-circle.animated .score-progress {
    stroke-dashoffset: calc(283 - (283 * var(--score)) / 100);
}

/* ===== 返回連結 ===== */
.back-section {
    padding: var(--space-8) 0;
    background: var(--ink-void);
    text-align: center;
}

.btn-back {
    display: inline-flex;
    align-items: center;
    gap: var(--space-2);
    padding: var(--space-4) var(--space-6);
    background: transparent;
    border: 1px solid rgba(255, 255, 255, 0.15);
    border-radius: var(--radius-md);
    color: var(--paper-tan);
    text-decoration: none;
    font-family: var(--font-display);
    letter-spacing: 0.1em;
    transition: all var(--duration-fast) var(--ease-out);
}

.btn-back:hover {
    background: rgba(255, 255, 255, 0.05);
    border-color: var(--vermilion);
    color: var(--paper-snow);
}

.btn-back::before {
    content: '←';
}

/* ===== 修復 SVG 評分圓環 ===== */
.score-display {
    position: relative;
    z-index: 10;
}

.score-circle {
    position: relative;
    width: 160px !important;
    height: 160px !important;
    max-width: 160px !important;
    max-height: 160px !important;
    overflow: visible;
}

.score-circle svg {
    position: absolute;
    top: 0;
    left: 0;
    width: 160px !important;
    height: 160px !important;
    max-width: 160px !important;
    max-height: 160px !important;
    transform: rotate(-90deg);
}

.score-circle circle {
    fill: none !important;
}

.score-circle .score-value {
    position: absolute;
    top: 0;
    left: 0;
    width: 160px;
    height: 160px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    z-index: 2;
    transform: none;
}

.score-circle .score-value .score-number {
    display: block;
    font-family: var(--font-brush);
    font-size: 3rem;
    font-weight: 600;
    color: var(--vermilion);
    line-height: 1;
    margin: 0;
}

.score-circle .score-value .score-label {
    font-size: 0.9rem;
    color: var(--ink-faded);
    margin: 4px 0 0 0;
}

/* 確保結果頁面 hero 區塊正確顯示 */
.result-hero .container {
    position: relative;
    z-index: 10;
}

.result-hero-content {
    position: relative;
    z-index: 10;
}

/* ===== 農民曆月曆樣式 ===== */
.calendar-nav {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: var(--space-6);
    margin-bottom: var(--space-6);
}

.calendar-nav-btn {
    padding: var(--space-2) var(--space-4);
    background: var(--paper-aged);
    border: 1px solid var(--ink-mist);
    border-radius: var(--radius-md);
    color: var(--ink-medium);
    text-decoration: none;
    font-size: 0.9rem;
    transition: all var(--duration-fast) var(--ease-out);
}

.calendar-nav-btn:hover {
    background: var(--vermilion);
    border-color: var(--vermilion);
    color: var(--paper-snow);
}

.calendar-current {
    display: flex;
    gap: var(--space-2);
    font-family: var(--font-display);
    font-size: 1.25rem;
    color: var(--ink-deep);
}

.calendar-grid {
    background: var(--paper-snow);
    border: 2px solid var(--ink-mist);
    border-radius: var(--radius-lg);
    overflow: hidden;
}

.calendar-grid .calendar-header {
    display: grid;
    grid-template-columns: repeat(7, 1fr);
    background: var(--paper-aged);
    border-bottom: 1px solid var(--ink-mist);
}

.calendar-weekday {
    padding: var(--space-3);
    text-align: center;
    font-weight: 600;
    color: var(--ink-medium);
    font-size: 0.9rem;
}

.calendar-weekday.weekend {
    color: var(--vermilion);
}

.calendar-body {
    display: grid;
    grid-template-columns: repeat(7, 1fr);
}

.calendar-day {
    display: flex;
    flex-direction: column;
    align-items: center;
    padding: var(--space-3) var(--space-2);
    min-height: 80px;
    text-decoration: none;
    border-right: 1px solid var(--paper-tan);
    border-bottom: 1px solid var(--paper-tan);
    transition: all var(--duration-fast) var(--ease-out);
    position: relative;
}

.calendar-day:nth-child(7n) {
    border-right: none;
}

.calendar-day:hover {
    background: var(--paper-aged);
    z-index: 2;
}

.calendar-day.calendar-empty {
    background: var(--paper-tan);
}

.calendar-day.calendar-today {
    background: var(--vermilion-muted);
    border-color: var(--vermilion);
}

.calendar-day.calendar-weekend {
    background: rgba(201, 64, 67, 0.03);
}

.calendar-day.calendar-festival {
    background: linear-gradient(135deg, rgba(201, 169, 98, 0.1) 0%, transparent 100%);
}

.day-solar {
    font-family: var(--font-display);
    font-size: 1.1rem;
    font-weight: 700;
    color: var(--ink-deep);
    margin-bottom: var(--space-1);
}

.calendar-weekend .day-solar {
    color: var(--vermilion);
}

.day-lunar {
    font-size: 0.75rem;
    color: var(--ink-medium);
    margin-bottom: var(--space-1);
}

.day-festival {
    display: flex;
    flex-direction: column;
    align-items: center;
    margin-bottom: var(--space-1);
}

.day-festival .festival-icon {
    font-size: 0.9rem;
    line-height: 1;
}

.day-festival .festival-name {
    font-size: 0.65rem;
    color: var(--gold);
    font-weight: 600;
    white-space: nowrap;
    max-width: 100%;
    overflow: hidden;
    text-overflow: ellipsis;
}

.day-jianxing {
    font-size: 0.7rem;
    color: var(--ink-mist);
}

.day-good-badge {
    position: absolute;
    top: 2px;
    right: 2px;
    font-size: 0.6rem;
    background: var(--fortune-auspicious);
    color: var(--paper-snow);
    padding: 1px 4px;
    border-radius: var(--radius-sm);
}

/* 月曆品質指示 */
.calendar-day.quality-excellent {
    border-left: 3px solid var(--fortune-auspicious);
}

.calendar-day.quality-good {
    border-left: 3px solid var(--wood);
}

.calendar-day.quality-neutral {
    border-left: 3px solid var(--fortune-neutral);
}

.calendar-day.quality-caution {
    border-left: 3px solid var(--copper);
}

.calendar-day.quality-bad {
    border-left: 3px solid var(--fortune-inauspicious);
}

/* 月曆圖例 */
.calendar-legend {
    display: flex;
    justify-content: center;
    gap: var(--space-5);
    padding: var(--space-4);
    background: var(--paper-aged);
    border-top: 1px solid var(--ink-mist);
}

.legend-item {
    display: flex;
    align-items: center;
    gap: var(--space-2);
    font-size: 0.8rem;
    color: var(--ink-medium);
}

.legend-dot {
    width: 12px;
    height: 12px;
    border-radius: 2px;
}

.legend-dot.excellent { background: var(--fortune-auspicious); }
.legend-dot.good { background: var(--wood); }
.legend-dot.neutral { background: var(--fortune-neutral); }
.legend-dot.caution { background: var(--copper); }
.legend-dot.bad { background: var(--fortune-inauspicious); }

/* ===== 即將到來節日樣式 ===== */
.upcoming-festivals {
    display: grid;
    grid-template-columns: repeat(5, 1fr);
    gap: var(--space-4);
}

.upcoming-card {
    display: flex;
    flex-direction: column;
    align-items: center;
    padding: var(--space-5);
    background: var(--paper-snow);
    border: 2px solid var(--paper-tan);
    border-radius: var(--radius-lg);
    text-decoration: none;
    color: var(--ink-deep);
    transition: all var(--duration-normal) var(--ease-out);
}

.upcoming-card:hover {
    border-color: var(--festival-color, var(--vermilion));
    box-shadow: var(--shadow-md);
    transform: translateY(-3px);
}

.upcoming-icon {
    font-size: 2.5rem;
    margin-bottom: var(--space-3);
}

.upcoming-info {
    text-align: center;
}

.upcoming-info h3 {
    font-family: var(--font-display);
    font-size: 1.1rem;
    margin-bottom: var(--space-2);
    color: var(--ink-deep);
}

.upcoming-date {
    font-size: 0.85rem;
    color: var(--ink-light);
    margin-bottom: var(--space-1);
}

.upcoming-lunar {
    font-size: 0.8rem;
    color: #7d5528;
    font-weight: 500;
    margin-bottom: var(--space-2);
}

.upcoming-countdown {
    font-size: 0.9rem;
    color: var(--ink-medium);
}

.upcoming-countdown strong {
    font-size: 1.2rem;
    font-weight: 700;
    color: var(--vermilion-deep);
}

/* 今日黃曆卡片 */
.huangli-today-card {
    text-align: center;
}

.today-huangli {
    padding: var(--space-6);
}

.today-header {
    display: flex;
    justify-content: center;
    gap: var(--space-8);
    margin-bottom: var(--space-5);
}

.today-solar, .today-lunar {
    display: flex;
    flex-direction: column;
    gap: var(--space-1);
}

.today-year {
    font-size: 0.9rem;
    color: var(--ink-light);
}

.today-date {
    font-family: var(--font-display);
    font-size: 1.8rem;
    color: var(--ink-deep);
}

.today-weekday {
    font-size: 0.9rem;
    color: var(--ink-medium);
}

.lunar-year {
    font-size: 0.95rem;
    color: var(--ink-medium);
    font-weight: 600;
}

.lunar-date {
    font-family: var(--font-display);
    font-size: 1.5rem;
    color: var(--ink-deep);
}

.lunar-shengxiao {
    font-size: 0.95rem;
    color: var(--ink-medium);
    font-weight: 600;
}

.today-ganzi {
    display: flex;
    justify-content: center;
    gap: var(--space-4);
    margin-bottom: var(--space-5);
}

.ganzi-item {
    display: flex;
    flex-direction: column;
    align-items: center;
    padding: var(--space-3) var(--space-4);
    background: var(--paper-aged);
    border-radius: var(--radius-md);
}

.ganzi-item.ganzi-highlight {
    background: var(--vermilion-muted);
    border: 1px solid var(--vermilion);
}

.ganzi-label {
    font-size: 0.75rem;
    color: var(--ink-light);
    margin-bottom: var(--space-1);
}

.ganzi-value {
    font-family: var(--font-display);
    font-size: 1.25rem;
    color: var(--ink-deep);
}

.today-quality {
    display: inline-flex;
    align-items: center;
    gap: var(--space-3);
    padding: var(--space-3) var(--space-5);
    border-radius: var(--radius-lg);
    margin-bottom: var(--space-5);
}

.today-quality.quality-excellent { background: rgba(74, 124, 89, 0.15); }
.today-quality.quality-good { background: rgba(74, 124, 89, 0.1); }
.today-quality.quality-neutral { background: rgba(201, 169, 98, 0.15); }
.today-quality.quality-caution { background: rgba(184, 122, 75, 0.15); }
.today-quality.quality-bad { background: rgba(163, 47, 50, 0.15); }

.quality-badge {
    font-family: var(--font-display);
    font-size: 1rem;
    font-weight: 700;
}

.quality-excellent .quality-badge { color: var(--fortune-auspicious); }
.quality-good .quality-badge { color: var(--wood); }
.quality-neutral .quality-badge { color: var(--fortune-neutral); }
.quality-caution .quality-badge { color: var(--copper); }
.quality-bad .quality-badge { color: var(--fortune-inauspicious); }

.quality-score {
    font-size: 0.9rem;
    color: var(--ink-medium);
}

.today-yiji {
    display: flex;
    justify-content: center;
    gap: var(--space-6);
    margin-bottom: var(--space-5);
}

.yiji-group {
    display: flex;
    align-items: flex-start;
    gap: var(--space-3);
}

.yiji-label {
    font-family: var(--font-display);
    font-size: 1rem;
    font-weight: 700;
    padding: var(--space-2) var(--space-3);
    border-radius: var(--radius-sm);
}

.yiji-yi .yiji-label {
    background: rgba(74, 124, 89, 0.15);
    color: var(--wood);
}

.yiji-ji .yiji-label {
    background: rgba(163, 47, 50, 0.15);
    color: var(--vermilion-deep);
}

.yiji-items {
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-2);
}

.yiji-item {
    font-size: 0.85rem;
    color: var(--ink-medium);
    padding: var(--space-1) var(--space-2);
    background: var(--paper-aged);
    border-radius: var(--radius-sm);
}

/* 十二建星 */
.jianxing-grid {
    display: grid;
    grid-template-columns: repeat(6, 1fr);
    gap: var(--space-4);
}

.jianxing-card {
    padding: var(--space-4);
    background: var(--paper-snow);
    border: 1px solid var(--paper-tan);
    border-radius: var(--radius-md);
    text-align: center;
}

.jianxing-card.jianxing-吉 {
    border-left: 3px solid var(--fortune-auspicious);
}

.jianxing-card.jianxing-平 {
    border-left: 3px solid var(--fortune-neutral);
}

.jianxing-card.jianxing-凶 {
    border-left: 3px solid var(--fortune-inauspicious);
}

.jianxing-name {
    font-family: var(--font-display);
    font-size: 1.5rem;
    color: var(--ink-deep);
    margin-bottom: var(--space-2);
}

.jianxing-type {
    font-size: 0.75rem;
    padding: var(--space-1) var(--space-2);
    border-radius: var(--radius-sm);
    display: inline-block;
    margin-bottom: var(--space-2);
}

.jianxing-吉 .jianxing-type {
    background: rgba(74, 124, 89, 0.15);
    color: var(--fortune-auspicious);
}

.jianxing-平 .jianxing-type {
    background: rgba(201, 169, 98, 0.15);
    color: var(--fortune-neutral);
}

.jianxing-凶 .jianxing-type {
    background: rgba(163, 47, 50, 0.15);
    color: var(--fortune-inauspicious);
}

.jianxing-desc {
    font-size: 0.8rem;
    color: var(--ink-light);
    line-height: 1.5;
}

/* ===== 響應式調整 ===== */
@media (max-width: 1024px) {
    .upcoming-festivals {
        grid-template-columns: repeat(3, 1fr);
    }
    
    .jianxing-grid {
        grid-template-columns: repeat(4, 1fr);
    }
}

@media (max-width: 768px) {
    .upcoming-festivals {
        grid-template-columns: repeat(2, 1fr);
    }
    
    .jianxing-grid {
        grid-template-columns: repeat(3, 1fr);
    }
    
    .today-header {
        flex-direction: column;
        gap: var(--space-4);
    }
    
    .today-yiji {
        flex-direction: column;
        gap: var(--space-4);
    }
    
    .calendar-legend {
        flex-wrap: wrap;
        gap: var(--space-3);
    }
    
    .calendar-day {
        min-height: 70px;
        padding: var(--space-2);
    }
    
    .day-solar {
        font-size: 1rem;
    }
    
    .day-lunar, .day-jianxing {
        font-size: 0.65rem;
    }
    
    .day-festival .festival-name {
        font-size: 0.6rem;
    }
}

@media (max-width: 480px) {
    .upcoming-festivals {
        grid-template-columns: 1fr;
    }
    
    .jianxing-grid {
        grid-template-columns: repeat(2, 1fr);
    }
    
    .calendar-day {
        min-height: 60px;
        padding: var(--space-1);
    }
    
    .day-solar {
        font-size: 0.9rem;
    }
    
    .day-jianxing {
        display: none;
    }
    
    .calendar-nav {
        gap: var(--space-3);
    }
    
    .calendar-current {
        font-size: 1rem;
    }
}

/* ===== 生肖今日運勢速覽 ===== */
.zodiac-quick-grid {
    display: grid;
    grid-template-columns: repeat(6, 1fr);
    gap: var(--space-4);
}

.zodiac-quick-card {
    display: flex;
    flex-direction: column;
    align-items: center;
    padding: var(--space-4);
    background: var(--paper-snow);
    border: 2px solid var(--paper-tan);
    border-radius: var(--radius-lg);
    text-decoration: none;
    color: var(--ink-deep);
    transition: all var(--duration-normal) var(--ease-out);
}

.zodiac-quick-card:hover {
    transform: translateY(-3px);
    box-shadow: var(--shadow-md);
}

.zodiac-quick-card .zodiac-emoji {
    font-size: 2rem;
    margin-bottom: var(--space-2);
}

.zodiac-quick-card .zodiac-name {
    font-family: var(--font-display);
    font-size: 1rem;
    font-weight: 600;
    margin-bottom: var(--space-2);
}

.zodiac-quick-card .zodiac-grade {
    font-size: 0.8rem;
    padding: var(--space-1) var(--space-3);
    border-radius: var(--radius-md);
    background: var(--paper-aged);
    color: var(--ink-deep);
    font-weight: 700;
    margin-bottom: var(--space-2);
}

.zodiac-quick-card .zodiac-score {
    font-size: 0.85rem;
    color: var(--ink-medium);
}

/* 運勢等級顏色 */
.zodiac-quick-card.grade-excellent {
    border-color: var(--gold);
    background: linear-gradient(135deg, rgba(201, 169, 98, 0.08) 0%, var(--paper-snow) 100%);
}
.zodiac-quick-card.grade-excellent .zodiac-grade {
    background: #d8bf7c;
    color: #2f230d;
}

.zodiac-quick-card.grade-good {
    border-color: var(--fortune-auspicious);
}
.zodiac-quick-card.grade-good .zodiac-grade {
    background: #a8c7b0;
    color: #1f2a20;
}

.zodiac-quick-card.grade-average {
    border-color: var(--water);
}
.zodiac-quick-card.grade-average .zodiac-grade {
    background: #9fbfd2;
    color: #1f2a33;
}

.zodiac-quick-card.grade-below {
    border-color: var(--copper);
}
.zodiac-quick-card.grade-below .zodiac-grade {
    background: #b87333;
    color: #1d1206;
}

.zodiac-quick-card.grade-poor {
    border-color: var(--fortune-inauspicious);
}
.zodiac-quick-card.grade-poor .zodiac-grade {
    background: #d79aa0;
    color: #321519;
}

/* 生肖介紹網格 */
.shengxiao-intro-grid {
    display: grid;
    grid-template-columns: repeat(6, 1fr);
    gap: var(--space-4);
}

.shengxiao-intro-card {
    text-align: center;
    padding: var(--space-4);
    background: var(--paper-snow);
    border: 1px solid var(--paper-tan);
    border-radius: var(--radius-md);
    transition: all var(--duration-fast) var(--ease-out);
}

.shengxiao-intro-card:hover {
    box-shadow: var(--shadow-sm);
}

.shengxiao-intro-icon {
    width: 50px;
    height: 50px;
    line-height: 50px;
    margin: 0 auto var(--space-3);
    font-size: 1.5rem;
    border-radius: 50%;
    color: var(--paper-snow);
}

.shengxiao-intro-icon.wuxing-木 { background: var(--wood); }
.shengxiao-intro-icon.wuxing-火 { background: var(--fire); }
.shengxiao-intro-icon.wuxing-土 { background: var(--earth); }
.shengxiao-intro-icon.wuxing-金 { background: var(--metal); }
.shengxiao-intro-icon.wuxing-水 { background: var(--water); }

.shengxiao-intro-card h3 {
    font-family: var(--font-display);
    font-size: 1.1rem;
    color: var(--ink-deep);
    margin-bottom: var(--space-2);
}

.shengxiao-years {
    font-size: 0.75rem;
    color: var(--ink-light);
    margin-bottom: var(--space-2);
    line-height: 1.4;
}

.shengxiao-trait {
    font-size: 0.85rem;
    color: var(--ink-medium);
}

/* 生肖選擇器 */
.shengxiao-picker {
    display: grid;
    grid-template-columns: repeat(6, 1fr);
    gap: var(--space-3);
    margin-bottom: var(--space-4);
}

.shengxiao-option {
    display: flex;
    align-items: center;
    justify-content: center;
    padding: var(--space-4);
    border: 2px solid var(--paper-tan);
    border-radius: var(--radius-md);
    cursor: pointer;
    transition: all var(--duration-fast) var(--ease-out);
}

.shengxiao-option:hover {
    border-color: var(--vermilion);
    background: var(--vermilion-muted);
}

.shengxiao-option.selected {
    border-color: var(--vermilion);
    background: var(--vermilion);
}

.shengxiao-option.selected .shengxiao-icon {
    color: var(--paper-snow);
}

.shengxiao-icon {
    font-size: 1.5rem;
}

/* 響應式調整 */
@media (max-width: 1024px) {
    .zodiac-quick-grid {
        grid-template-columns: repeat(4, 1fr);
    }
    
    .shengxiao-intro-grid {
        grid-template-columns: repeat(4, 1fr);
    }
    
    .shengxiao-picker {
        grid-template-columns: repeat(4, 1fr);
    }
}

@media (max-width: 768px) {
    .zodiac-quick-grid {
        grid-template-columns: repeat(3, 1fr);
    }
    
    .shengxiao-intro-grid {
        grid-template-columns: repeat(3, 1fr);
    }
    
    .shengxiao-picker {
        grid-template-columns: repeat(4, 1fr);
    }
}

@media (max-width: 480px) {
    .zodiac-quick-grid {
        grid-template-columns: repeat(2, 1fr);
    }

    .shengxiao-intro-grid {
        grid-template-columns: repeat(2, 1fr);
    }

    .shengxiao-picker {
        grid-template-columns: repeat(3, 1fr);
    }

    .shengxiao-option {
        padding: var(--space-3);
    }
}

/* ===== 整合 CTA（八字合婚、姓名配對、生肖運勢共用）===== */
.hehun-cta,
.name-match-cta,
.shengxiao-cta {
    margin-top: var(--space-8);
    padding: var(--space-6);
    background: linear-gradient(135deg, rgba(195, 89, 103, 0.06) 0%, rgba(201, 169, 98, 0.06) 100%);
    border: 1px solid rgba(195, 89, 103, 0.2);
    border-radius: var(--radius-lg);
}

.hehun-cta-content,
.name-match-cta-content,
.shengxiao-cta-content {
    display: flex;
    align-items: center;
    gap: var(--space-6);
}

.hehun-cta-icon,
.name-match-cta-icon,
.shengxiao-cta-icon {
    width: 70px;
    height: 70px;
    min-width: 70px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-family: var(--font-brush);
    font-size: 2rem;
    color: var(--vermilion);
    background: var(--paper-snow);
    border: 2px solid var(--vermilion);
    border-radius: 50%;
}

.hehun-cta-text,
.name-match-cta-text,
.shengxiao-cta-text {
    flex: 1;
}

.hehun-cta-text h3,
.hehun-cta-text h4,
.name-match-cta-text h3,
.name-match-cta-text h4,
.shengxiao-cta-text h3,
.shengxiao-cta-text h4 {
    font-family: var(--font-display);
    font-size: 1.15rem;
    color: var(--ink-deep);
    margin-bottom: var(--space-2);
}

.hehun-cta-text p,
.name-match-cta-text p,
.shengxiao-cta-text p {
    font-size: 0.9rem;
    color: var(--ink-medium);
    margin: 0;
}

.hehun-cta .btn-accent,
.name-match-cta .btn-accent,
.shengxiao-cta .btn-accent {
    background: linear-gradient(135deg, var(--vermilion), var(--seal-red));
    color: var(--paper-snow);
    padding: var(--space-3) var(--space-6);
    font-size: 1rem;
    white-space: nowrap;
}

.hehun-cta .btn-accent:hover,
.name-match-cta .btn-accent:hover,
.shengxiao-cta .btn-accent:hover {
    transform: translateY(-2px);
    box-shadow: 0 4px 12px rgba(195, 89, 103, 0.3);
}

@media (max-width: 768px) {
    .hehun-cta-content,
    .name-match-cta-content,
    .shengxiao-cta-content {
        flex-direction: column;
        text-align: center;
    }

    .hehun-cta-icon,
    .name-match-cta-icon,
    .shengxiao-cta-icon {
        width: 60px;
        height: 60px;
        min-width: 60px;
        font-size: 1.6rem;
    }

    .hehun-cta .btn-accent,
    .name-match-cta .btn-accent,
    .shengxiao-cta .btn-accent,
    .xingzuo-cta .btn-accent {
        width: 100%;
        justify-content: center;
    }
}

/* 星座運勢 CTA */
.xingzuo-cta {
    margin-top: var(--space-8);
    padding: var(--space-6);
    background: linear-gradient(135deg, rgba(74, 85, 162, 0.06) 0%, rgba(201, 169, 98, 0.06) 100%);
    border: 1px solid rgba(74, 85, 162, 0.2);
    border-radius: var(--radius-lg);
}

.xingzuo-cta-content {
    display: flex;
    align-items: center;
    gap: var(--space-6);
}

.xingzuo-cta-icon {
    width: 70px;
    height: 70px;
    min-width: 70px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 2rem;
    color: #4a55a2;
    background: var(--paper-snow);
    border: 2px solid #4a55a2;
    border-radius: 50%;
}

.xingzuo-cta-text {
    flex: 1;
}

.xingzuo-cta-text h3,
.xingzuo-cta-text h4 {
    font-family: var(--font-display);
    font-size: 1.15rem;
    color: var(--ink-deep);
    margin-bottom: var(--space-2);
}

.xingzuo-cta-text p {
    font-size: 0.9rem;
    color: var(--ink-medium);
    margin: 0;
}

.xingzuo-cta .btn-accent {
    background: linear-gradient(135deg, #4a55a2, #363d7a);
    color: var(--paper-snow);
    padding: var(--space-3) var(--space-6);
    font-size: 1rem;
    white-space: nowrap;
}

.xingzuo-cta .btn-accent:hover {
    transform: translateY(-2px);
    box-shadow: 0 4px 12px rgba(74, 85, 162, 0.3);
}

/* 運勢延伸區塊 */
.fortune-extend-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: var(--space-6);
}

.fortune-extend-grid .shengxiao-cta,
.fortune-extend-grid .xingzuo-cta {
    margin-top: 0;
}

@media (max-width: 992px) {
    .fortune-extend-grid {
        grid-template-columns: 1fr;
    }
}

@media (max-width: 768px) {
    .xingzuo-cta-content {
        flex-direction: column;
        text-align: center;
    }

    .xingzuo-cta-icon {
        width: 60px;
        height: 60px;
        min-width: 60px;
        font-size: 1.6rem;
    }

    .xingzuo-cta .btn-accent {
        width: 100%;
        justify-content: center;
    }
}

/* ===== 首頁今日黃曆摘要 ===== */
.today-huangli-section {
    padding: 0 0 1rem;
}

.today-huangli-card {
    background: var(--paper-snow);
    border: 1px solid var(--border-light);
    border-radius: var(--radius-lg);
    padding: var(--space-5);
    box-shadow: var(--shadow-sm);
}

.today-huangli-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding-bottom: var(--space-4);
    border-bottom: 1px solid var(--border-light);
    margin-bottom: var(--space-4);
}

.today-date {
    display: flex;
    flex-direction: column;
    gap: var(--space-1);
}

.date-solar {
    font-family: var(--font-display);
    font-size: 1.25rem;
    color: var(--ink-deep);
    font-weight: 600;
}

.date-lunar {
    font-size: 0.9rem;
    color: var(--ink-medium);
}

.today-ganzi {
    text-align: right;
    display: flex;
    flex-direction: column;
    gap: var(--space-1);
}

.ganzi-year {
    font-family: var(--font-brush);
    font-size: 1.1rem;
    color: var(--vermilion);
}

.ganzi-shengxiao {
    font-size: 0.85rem;
    color: var(--copper);
}

.today-huangli-body {
    margin-bottom: var(--space-4);
}

.today-yiji {
    display: flex;
    gap: var(--space-6);
}

.yiji-col {
    flex: 1;
    display: flex;
    align-items: flex-start;
    gap: var(--space-3);
}

.yiji-label {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 32px;
    height: 32px;
    min-width: 32px;
    border-radius: 50%;
    font-family: var(--font-brush);
    font-size: 1rem;
    font-weight: 600;
}

.yiji-yi .yiji-label {
    background: rgba(61, 107, 79, 0.1);
    color: var(--wood-green);
    border: 1px solid var(--wood-green);
}

.yiji-ji .yiji-label {
    background: rgba(181, 54, 58, 0.1);
    color: var(--fire-red);
    border: 1px solid var(--fire-red);
}

.yiji-items {
    font-size: 0.9rem;
    color: var(--ink-deep);
    line-height: 1.8;
}

.today-huangli-link {
    display: block;
    text-align: center;
    padding: var(--space-3);
    background: linear-gradient(135deg, rgba(195, 89, 103, 0.08) 0%, rgba(201, 169, 98, 0.08) 100%);
    border-radius: var(--radius-md);
    color: var(--vermilion);
    font-size: 0.95rem;
    font-weight: 500;
    text-decoration: none;
    transition: all 0.2s ease;
}

.today-huangli-link:hover {
    background: linear-gradient(135deg, rgba(195, 89, 103, 0.15) 0%, rgba(201, 169, 98, 0.15) 100%);
    transform: translateY(-1px);
}

@media (max-width: 576px) {
    .today-huangli-header {
        flex-direction: column;
        align-items: flex-start;
        gap: var(--space-3);
    }

    .today-ganzi {
        text-align: left;
        flex-direction: row;
        gap: var(--space-3);
    }

    .today-yiji {
        flex-direction: column;
        gap: var(--space-4);
    }
}

/* ========================================
   統計數據區塊
   ======================================== */
.stats-section {
    padding: var(--space-6) 0;
    background: linear-gradient(135deg, rgba(195, 89, 103, 0.05) 0%, rgba(201, 169, 98, 0.05) 100%);
}

.stats-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: var(--space-4);
    max-width: 800px;
    margin: 0 auto;
}

.stat-item {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    padding: var(--space-4);
}

.stat-number {
    font-family: var(--font-brush);
    font-size: 1.75rem;
    font-weight: 700;
    color: var(--vermilion);
    line-height: 1.2;
}

.stat-label {
    font-size: 0.85rem;
    color: var(--ink-faded);
    margin-top: var(--space-1);
}

@media (max-width: 768px) {
    .stats-grid {
        grid-template-columns: repeat(2, 1fr);
    }
}

@media (max-width: 480px) {
    .stat-number {
        font-size: 1.4rem;
    }

    .stat-label {
        font-size: 0.8rem;
    }
}

/* ========================================
   Footer 免責聲明優化
   ======================================== */
.footer-disclaimer {
    padding: var(--space-4) 0;
    border-top: 1px dashed var(--border-light);
    margin-top: var(--space-4);
}

.footer-disclaimer p {
    font-size: 0.85rem;
    color: var(--ink-faded);
    text-align: center;
    line-height: 1.7;
    margin: 0;
}

.footer-disclaimer strong {
    color: var(--ink-deep);
}

.footer-about p {
    font-size: 0.9rem;
    line-height: 1.6;
}

/* ========================================
   起名建議 CTA 區塊
   ======================================== */
.qiming-cta-section {
    padding: var(--space-6) 0;
}

.qiming-cta-card {
    display: flex;
    align-items: center;
    gap: var(--space-5);
    padding: var(--space-5) var(--space-6);
    background: linear-gradient(135deg, rgba(195, 89, 103, 0.08) 0%, rgba(201, 169, 98, 0.08) 100%);
    border: 1px solid rgba(195, 89, 103, 0.2);
    border-radius: var(--radius-lg);
}

.qiming-cta-icon {
    width: 60px;
    height: 60px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: linear-gradient(135deg, var(--vermilion), var(--seal-red));
    color: #fff;
    font-family: var(--font-brush);
    font-size: 1.75rem;
    border-radius: 50%;
    flex-shrink: 0;
}

.qiming-cta-content {
    flex: 1;
}

.qiming-cta-content h3 {
    font-size: 1.2rem;
    font-weight: 600;
    color: var(--ink-black);
    margin: 0 0 var(--space-2);
}

.qiming-cta-content p {
    font-size: 0.95rem;
    color: var(--ink-faded);
    margin: 0;
}

.qiming-cta-card .btn-primary {
    width: auto;
    flex-shrink: 0;
    white-space: nowrap;
}

@media (max-width: 768px) {
    .qiming-cta-card {
        flex-direction: column;
        text-align: center;
        padding: var(--space-5);
    }

    .qiming-cta-content h3 {
        font-size: 1.1rem;
    }
}

/* ===== 黃曆結果頁樣式 ===== */

/* Hero 區域 */
.mystical-hero {
    background: linear-gradient(135deg, var(--paper-aged) 0%, var(--paper-snow) 100%);
    padding: var(--space-8) 0;
    border-bottom: 1px solid var(--border-light);
}

.huangli-hero {
    position: relative;
    overflow: hidden;
}

.hero-bg-effects {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    opacity: 0.05;
    pointer-events: none;
}

.bagua-symbol {
    position: absolute;
    top: 50%;
    right: 10%;
    transform: translateY(-50%);
    width: 200px;
    height: 200px;
    background: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 100 100"><circle cx="50" cy="50" r="45" fill="none" stroke="%231a1512" stroke-width="2"/></svg>') center/contain no-repeat;
}

.hero-content {
    position: relative;
    z-index: 1;
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: var(--space-6);
}

/* 日期顯示 */
.huangli-date-display {
    flex: 1;
}

.solar-date {
    display: flex;
    align-items: baseline;
    gap: var(--space-3);
    flex-wrap: wrap;
    margin-bottom: var(--space-2);
}

.date-year {
    font-size: 1rem;
    color: var(--ink-faded);
}

.date-main {
    font-size: 2.5rem;
    font-weight: 700;
    color: var(--ink-black);
    font-family: var(--font-brush);
}

.date-weekday {
    font-size: 1rem;
    color: var(--ink-faded);
    padding: var(--space-1) var(--space-2);
    background: rgba(0,0,0,0.05);
    border-radius: 4px;
}

.lunar-date {
    display: flex;
    flex-direction: column;
    gap: var(--space-1);
}

.lunar-ganzhi {
    font-size: 0.9rem;
    color: var(--ink-faded);
}

.lunar-main {
    font-size: 1.5rem;
    font-weight: 600;
    color: var(--vermilion);
    font-family: var(--font-brush);
}

/* 日子品質顯示 */
.day-quality-display {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: var(--space-2);
}

.quality-circle {
    width: 100px;
    height: 100px;
    border-radius: 50%;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    background: var(--paper-snow);
    border: 3px solid var(--border-light);
    box-shadow: 0 4px 12px rgba(0,0,0,0.08);
}

.quality-score {
    font-size: 2rem;
    font-weight: 700;
    font-family: var(--font-brush);
    line-height: 1;
}

.quality-label {
    font-size: 0.8rem;
    color: var(--ink-faded);
}

.quality-level {
    font-size: 1rem;
    font-weight: 600;
    padding: var(--space-1) var(--space-3);
    border-radius: 20px;
}

/* 品質顏色 */
.quality-excellent .quality-circle {
    border-color: #2d6a4f;
    background: linear-gradient(135deg, #d8f3dc, #b7e4c7);
}
.quality-excellent .quality-score { color: #2d6a4f; }
.quality-excellent .quality-level { background: #2d6a4f; color: white; }

.quality-good .quality-circle {
    border-color: var(--wood-green);
    background: linear-gradient(135deg, #e8f5e9, #c8e6c9);
}
.quality-good .quality-score { color: var(--wood-green); }
.quality-good .quality-level { background: var(--wood-green); color: white; }

.quality-neutral .quality-circle {
    border-color: var(--earth-ochre);
    background: linear-gradient(135deg, #fff8e1, #ffecb3);
}
.quality-neutral .quality-score { color: var(--earth-ochre); }
.quality-neutral .quality-level { background: var(--earth-ochre); color: white; }

.quality-caution .quality-circle {
    border-color: #e67e22;
    background: linear-gradient(135deg, #ffeaa7, #fdcb6e);
}
.quality-caution .quality-score { color: #e67e22; }
.quality-caution .quality-level { background: #e67e22; color: white; }

.quality-bad .quality-circle {
    border-color: var(--vermilion);
    background: linear-gradient(135deg, #ffebee, #ffcdd2);
}
.quality-bad .quality-score { color: var(--vermilion); }
.quality-bad .quality-level { background: var(--vermilion); color: white; }

/* 神秘區塊 */
.mystical-section {
    padding: var(--space-6) 0;
}

.mystical-header {
    text-align: center;
    margin-bottom: var(--space-5);
}

.mystical-header .section-title {
    font-size: 1.5rem;
    font-weight: 700;
    color: var(--ink-black);
    font-family: var(--font-brush);
    margin: 0;
}

.title-ornament {
    width: 60px;
    height: 3px;
    background: var(--vermilion);
    margin: var(--space-2) auto 0;
    border-radius: 2px;
}

/* 干支卡片 */
.huangli-ganzi-card {
    background: var(--paper-snow);
    border: 1px solid var(--border-light);
    border-radius: var(--radius-lg);
    padding: var(--space-5);
    box-shadow: var(--shadow-sm);
}

.ganzi-main {
    display: flex;
    justify-content: center;
    gap: var(--space-4);
    margin-bottom: var(--space-4);
    flex-wrap: wrap;
}

.ganzi-pillar {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: var(--space-1);
    padding: var(--space-3);
    background: rgba(0,0,0,0.02);
    border-radius: var(--radius-md);
    min-width: 80px;
}

.ganzi-pillar-main {
    background: linear-gradient(135deg, var(--vermilion), #d44950);
    color: white;
}

.ganzi-pillar-main .pillar-label,
.ganzi-pillar-main .pillar-value {
    color: white;
}

.pillar-label {
    font-size: 0.8rem;
    color: var(--ink-faded);
}

.pillar-value {
    font-size: 1.5rem;
    font-weight: 700;
    font-family: var(--font-brush);
    color: var(--ink-black);
}

.pillar-nayin {
    font-size: 0.75rem;
    color: rgba(255,255,255,0.9);
    background: rgba(0,0,0,0.2);
    padding: 2px 8px;
    border-radius: 10px;
}

.ganzi-extra {
    display: flex;
    justify-content: center;
    gap: var(--space-4);
    flex-wrap: wrap;
    padding-top: var(--space-4);
    border-top: 1px dashed var(--border-light);
}

.extra-item {
    display: flex;
    align-items: center;
    gap: var(--space-2);
}

.extra-label {
    font-size: 0.85rem;
    color: var(--ink-faded);
}

.extra-value {
    font-size: 0.95rem;
    font-weight: 600;
    color: var(--ink-black);
}

.jianxing-吉 { color: var(--wood-green); }
.jianxing-凶 { color: var(--vermilion); }
.jianxing-平 { color: var(--earth-ochre); }

/* 宜忌顯示 */
.yiji-display {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: var(--space-4);
}

.yiji-section {
    background: var(--paper-snow);
    border: 1px solid var(--border-light);
    border-radius: var(--radius-lg);
    padding: var(--space-4);
}

.yiji-yi-section {
    border-left: 4px solid var(--wood-green);
}

.yiji-ji-section {
    border-left: 4px solid var(--vermilion);
}

.yiji-header {
    display: flex;
    align-items: center;
    gap: var(--space-2);
    margin-bottom: var(--space-3);
}

.yiji-icon {
    width: 36px;
    height: 36px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.1rem;
    font-weight: 700;
    border-radius: 50%;
    color: white;
}

.yiji-icon.yi {
    background: var(--wood-green);
}

.yiji-icon.ji {
    background: var(--vermilion);
}

.yiji-header h3 {
    font-size: 1rem;
    font-weight: 600;
    color: var(--ink-black);
    margin: 0;
}

.yiji-list {
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-2);
}

.yiji-tag {
    padding: var(--space-1) var(--space-2);
    border-radius: 4px;
    font-size: 0.9rem;
}

.yiji-tag.yi {
    background: #e8f5e9;
    color: var(--wood-green);
}

.yiji-tag.ji {
    background: #ffebee;
    color: var(--vermilion);
}

/* 神煞顯示 */
.shensha-display {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: var(--space-4);
}

.shensha-section {
    background: var(--paper-snow);
    border: 1px solid var(--border-light);
    border-radius: var(--radius-lg);
    padding: var(--space-4);
}

.shensha-section h3 {
    display: flex;
    align-items: center;
    gap: var(--space-2);
    font-size: 1rem;
    font-weight: 600;
    color: var(--ink-black);
    margin: 0 0 var(--space-3);
}

.shensha-dot {
    width: 10px;
    height: 10px;
    border-radius: 50%;
}

.shensha-dot.good {
    background: var(--wood-green);
}

.shensha-dot.bad {
    background: var(--vermilion);
}

.shensha-list {
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-2);
}

.shensha-tag {
    padding: var(--space-1) var(--space-2);
    border-radius: 4px;
    font-size: 0.85rem;
}

.shensha-tag.good {
    background: #e8f5e9;
    color: var(--wood-green);
}

.shensha-tag.bad {
    background: #ffebee;
    color: var(--vermilion);
}

/* 時辰吉凶 */
.hours-grid {
    display: grid;
    grid-template-columns: repeat(6, 1fr);
    gap: var(--space-2);
}

.hour-card {
    background: var(--paper-snow);
    border: 1px solid var(--border-light);
    border-radius: var(--radius-md);
    padding: var(--space-2);
    text-align: center;
}

.hour-good {
    border-color: var(--wood-green);
    background: linear-gradient(135deg, #e8f5e9, #f1f8e9);
}

.hour-bad {
    border-color: var(--vermilion);
    background: linear-gradient(135deg, #ffebee, #fce4ec);
}

.hour-neutral {
    border-color: var(--earth-ochre);
    background: linear-gradient(135deg, #fff8e1, #fffde7);
}

.hour-time {
    font-size: 0.7rem;
    color: var(--ink-faded);
}

.hour-ganzi {
    font-size: 1rem;
    font-weight: 700;
    font-family: var(--font-brush);
    color: var(--ink-black);
}

.hour-zhi {
    font-size: 0.8rem;
    color: var(--ink-deep);
}

.hour-quality {
    font-size: 0.75rem;
    font-weight: 600;
    padding: 2px 6px;
    border-radius: 10px;
    display: inline-block;
    margin-top: var(--space-1);
}

.hour-good .hour-quality {
    background: var(--wood-green);
    color: white;
}

.hour-bad .hour-quality {
    background: var(--vermilion);
    color: white;
}

.hour-neutral .hour-quality {
    background: var(--earth-ochre);
    color: white;
}

.hour-special {
    font-size: 0.7rem;
    color: var(--ink-faded);
    margin-top: 2px;
}

.hours-legend {
    display: flex;
    justify-content: center;
    gap: var(--space-4);
    margin-top: var(--space-4);
}

.legend-item {
    display: flex;
    align-items: center;
    gap: var(--space-1);
    font-size: 0.85rem;
    color: var(--ink-faded);
}

.legend-dot {
    width: 12px;
    height: 12px;
    border-radius: 50%;
}

.legend-dot.good { background: var(--wood-green); }
.legend-dot.neutral { background: var(--earth-ochre); }
.legend-dot.bad { background: var(--vermilion); }

/* 建星詳解 */
.jianxing-detail-card {
    background: var(--paper-snow);
    border: 1px solid var(--border-light);
    border-radius: var(--radius-lg);
    padding: var(--space-5);
    text-align: center;
}

.jianxing-main {
    margin-bottom: var(--space-4);
}

.jianxing-big {
    font-size: 4rem;
    font-weight: 700;
    font-family: var(--font-brush);
    display: block;
    line-height: 1;
}

.jianxing-吉 { color: var(--wood-green); }
.jianxing-凶 { color: var(--vermilion); }
.jianxing-平 { color: var(--earth-ochre); }

.jianxing-type {
    font-size: 1rem;
    padding: var(--space-1) var(--space-3);
    border-radius: 20px;
    display: inline-block;
    margin-top: var(--space-2);
}

.jianxing-meaning {
    text-align: left;
    max-width: 500px;
    margin: 0 auto;
}

.jianxing-meaning p {
    margin: var(--space-2) 0;
    font-size: 0.95rem;
    color: var(--ink-deep);
}

/* 二十八宿 */
.xiu28-card {
    background: var(--paper-snow);
    border: 1px solid var(--border-light);
    border-radius: var(--radius-lg);
    padding: var(--space-5);
    text-align: center;
}

.xiu28-main {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: var(--space-3);
    margin-bottom: var(--space-3);
}

.xiu28-name {
    font-size: 2rem;
    font-weight: 700;
    font-family: var(--font-brush);
    color: var(--ink-black);
}

.xiu28-wuxing, .xiu28-animal {
    font-size: 0.9rem;
    padding: var(--space-1) var(--space-2);
    background: rgba(0,0,0,0.05);
    border-radius: 4px;
    color: var(--ink-deep);
}

.xiu28-desc {
    font-size: 0.95rem;
    color: var(--ink-faded);
    margin: 0;
}

/* 節氣卡片 */
.jieqi-card {
    display: flex;
    justify-content: center;
    gap: var(--space-6);
    background: var(--paper-snow);
    border: 1px solid var(--border-light);
    border-radius: var(--radius-lg);
    padding: var(--space-5);
}

.jieqi-current, .jieqi-next {
    text-align: center;
}

.jieqi-label {
    font-size: 0.85rem;
    color: var(--ink-faded);
    display: block;
    margin-bottom: var(--space-1);
}

.jieqi-name {
    font-size: 1.5rem;
    font-weight: 700;
    font-family: var(--font-brush);
    color: var(--ink-black);
    display: block;
}

.jieqi-days {
    font-size: 0.85rem;
    color: var(--vermilion);
    display: block;
    margin-top: var(--space-1);
}

/* 生肖 CTA */
.shengxiao-cta {
    background: linear-gradient(135deg, var(--paper-aged), var(--paper-snow));
    border: 1px solid var(--border-light);
    border-radius: var(--radius-lg);
    padding: var(--space-5);
}

.shengxiao-cta-content {
    display: flex;
    align-items: center;
    gap: var(--space-4);
}

.shengxiao-cta-icon {
    width: 60px;
    height: 60px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.5rem;
    font-weight: 700;
    font-family: var(--font-brush);
    background: var(--vermilion);
    color: white;
    border-radius: 50%;
    flex-shrink: 0;
}

.shengxiao-cta-text {
    flex: 1;
}

.shengxiao-cta-text h4 {
    font-size: 1.1rem;
    font-weight: 600;
    color: var(--ink-black);
    margin: 0 0 var(--space-1);
}

.shengxiao-cta-text p {
    font-size: 0.9rem;
    color: var(--ink-faded);
    margin: 0;
}

/* 日期導航 */
.date-nav {
    display: flex;
    justify-content: center;
    gap: var(--space-3);
}

.date-nav-btn {
    padding: var(--space-2) var(--space-4);
    background: var(--paper-snow);
    border: 1px solid var(--border-light);
    border-radius: var(--radius-md);
    color: var(--ink-deep);
    text-decoration: none;
    font-size: 0.9rem;
    transition: all 0.2s ease;
}

.date-nav-btn:hover {
    background: var(--ink-black);
    color: white;
    border-color: var(--ink-black);
}

.date-nav-today {
    background: var(--vermilion);
    color: white;
    border-color: var(--vermilion);
}

.date-nav-today:hover {
    background: var(--seal-red);
    border-color: var(--seal-red);
}

/* 交叉推薦 */
.cross-promo {
    display: flex;
    justify-content: center;
    gap: var(--space-4);
}

.cross-promo-item {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: var(--space-2);
    padding: var(--space-4);
    background: var(--paper-snow);
    border: 1px solid var(--border-light);
    border-radius: var(--radius-lg);
    text-decoration: none;
    min-width: 100px;
    transition: all 0.2s ease;
}

.cross-promo-item:hover {
    transform: translateY(-3px);
    box-shadow: var(--shadow-md);
    border-color: var(--vermilion);
}

.cross-promo-icon {
    width: 50px;
    height: 50px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.5rem;
    font-weight: 700;
    font-family: var(--font-brush);
    background: linear-gradient(135deg, var(--vermilion), #d44950);
    color: white;
    border-radius: 50%;
}

.cross-promo-text {
    font-size: 0.9rem;
    color: var(--ink-deep);
}

/* 響應式調整 */
@media (max-width: 768px) {
    .hero-content {
        flex-direction: column;
        text-align: center;
    }

    .solar-date {
        justify-content: center;
    }

    .date-main {
        font-size: 2rem;
    }

    .lunar-date {
        align-items: center;
    }

    .quality-circle {
        width: 80px;
        height: 80px;
    }

    .quality-score {
        font-size: 1.5rem;
    }

    .yiji-display,
    .shensha-display {
        grid-template-columns: 1fr;
    }

    .hours-grid {
        grid-template-columns: repeat(4, 1fr);
    }

    .ganzi-main {
        gap: var(--space-2);
    }

    .ganzi-pillar {
        min-width: 70px;
        padding: var(--space-2);
    }

    .pillar-value {
        font-size: 1.2rem;
    }

    .jieqi-card {
        flex-direction: column;
        gap: var(--space-4);
    }

    .shengxiao-cta-content {
        flex-direction: column;
        text-align: center;
    }

    .date-nav {
        flex-direction: column;
    }

    .cross-promo {
        flex-wrap: wrap;
    }
}

@media (max-width: 480px) {
    .hours-grid {
        grid-template-columns: repeat(3, 1fr);
    }

    .date-main {
        font-size: 1.75rem;
    }

    .lunar-main {
        font-size: 1.25rem;
    }

    .ganzi-extra {
        flex-direction: column;
        align-items: center;
    }
}

/* ===== 完整命理解析區塊 ===== */
.interpretation-section {
    padding: var(--space-12) 0;
    background: linear-gradient(180deg, var(--ink-deep) 0%, var(--ink-deep) 100%);
}

.interpretation-section .section-header h2 {
    color: var(--paper-snow);
}

.interpretation-section .section-divider {
    background: var(--vermilion);
}

/* Tabs 按鈕 */
.interp-tabs {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: var(--space-2);
    margin-bottom: var(--space-8);
}

.interp-tab {
    padding: var(--space-3) var(--space-5);
    background: rgba(255, 255, 255, 0.08);
    border: 1px solid rgba(255, 255, 255, 0.3);
    border-radius: var(--radius-md);
    font-family: var(--font-display);
    font-size: 0.95rem;
    color: var(--paper-snow);
    cursor: pointer;
    transition: all var(--duration-normal) var(--ease-out);
}

.interp-tab:hover {
    background: rgba(255, 255, 255, 0.15);
    border-color: rgba(255, 255, 255, 0.5);
    color: var(--paper-snow);
}

.interp-tab.active {
    background: var(--vermilion);
    border-color: var(--vermilion);
    color: var(--paper-snow);
}

/* 內容面板 */
.interp-content {
    max-width: 800px;
    margin: 0 auto;
}

.interp-panel {
    display: none;
}

.interp-panel.active {
    display: block;
    animation: fadeIn var(--duration-normal) var(--ease-out);
}

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

/* 解析卡片 */
.interp-card {
    background: var(--paper-warm);
    border-radius: var(--radius-lg);
    padding: var(--space-8);
    box-shadow: var(--shadow-lg);
}

.interp-card h3 {
    font-family: var(--font-display);
    font-size: 1.5rem;
    color: var(--ink-deep);
    margin-bottom: var(--space-5);
    padding-bottom: var(--space-3);
    border-bottom: 2px solid var(--vermilion);
}

.interp-card .fortune-text {
    font-family: var(--font-classical);
    font-size: 1.1rem;
    color: var(--ink-deep);
    line-height: 1.8;
    margin-bottom: var(--space-5);
    padding: var(--space-4);
    background: rgba(201, 64, 67, 0.05);
    border-left: 3px solid var(--vermilion);
    border-radius: 0 var(--radius-md) var(--radius-md) 0;
}

.interp-advice {
    font-size: 0.95rem;
    color: var(--ink-medium);
    line-height: 1.8;
    margin-bottom: var(--space-4);
}

.interp-summary {
    font-size: 0.9rem;
    color: #6f6963;
    line-height: 1.8;
    padding-top: var(--space-4);
    border-top: 1px dashed var(--ink-mist);
}

/* 性格特質 */
.traits-section .main-trait {
    font-size: 1.05rem;
    color: var(--ink-deep);
    line-height: 1.8;
    margin-bottom: var(--space-5);
}

.traits-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: var(--space-6);
    margin-bottom: var(--space-5);
}

.traits-group h4 {
    font-family: var(--font-display);
    font-size: 1rem;
    color: var(--ink-deep);
    margin-bottom: var(--space-3);
}

.traits-list {
    list-style: none;
    padding: 0;
    margin: 0;
}

.traits-list li {
    padding: var(--space-2) 0;
    padding-left: var(--space-5);
    position: relative;
    font-size: 0.95rem;
    color: var(--ink-medium);
}

.traits-list li::before {
    content: '';
    position: absolute;
    left: 0;
    top: 50%;
    transform: translateY(-50%);
    width: 8px;
    height: 8px;
    border-radius: 50%;
}

.traits-list.positive li::before {
    background: var(--wood-green);
}

.traits-list.negative li::before {
    background: var(--fire-red);
}

/* 適合職業 */
.suitable-jobs {
    margin: var(--space-5) 0;
}

.suitable-jobs h4 {
    font-family: var(--font-display);
    font-size: 1rem;
    color: var(--ink-deep);
    margin-bottom: var(--space-3);
}

.jobs-tags {
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-2);
}

.job-tag {
    padding: var(--space-2) var(--space-4);
    background: var(--paper-aged);
    border: 1px solid var(--ink-mist);
    border-radius: var(--radius-full);
    font-size: 0.9rem;
    color: var(--ink-medium);
}

/* 婚姻感情 */
.partner-text {
    font-size: 0.95rem;
    color: var(--ink-medium);
    line-height: 1.8;
    margin-bottom: var(--space-4);
}

/* 姓名配對入口 */
.name-match-cta {
    margin-top: var(--space-6);
    padding-top: var(--space-6);
    border-top: 1px solid var(--ink-mist);
}

.name-match-cta-content {
    display: flex;
    align-items: center;
    gap: var(--space-5);
    padding: var(--space-5);
    background: linear-gradient(135deg, rgba(201, 64, 67, 0.08) 0%, rgba(201, 64, 67, 0.02) 100%);
    border-radius: var(--radius-lg);
    border: 1px solid rgba(201, 64, 67, 0.2);
}

.name-match-cta-icon {
    width: 60px;
    height: 60px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: var(--paper-snow);
    border: 2px solid var(--vermilion);
    border-radius: 50%;
    font-family: var(--font-brush);
    font-size: 1.5rem;
    color: var(--vermilion);
    flex-shrink: 0;
}

.name-match-cta-text {
    flex: 1;
}

.name-match-cta-text h4 {
    font-family: var(--font-display);
    font-size: 1.1rem;
    color: var(--ink-deep);
    margin-bottom: var(--space-1);
}

.name-match-cta-text p {
    font-size: 0.9rem;
    color: var(--ink-light);
    margin: 0;
}

/* 健康狀況 */
.health-concerns {
    margin-bottom: var(--space-5);
    padding: var(--space-4);
    background: var(--paper-aged);
    border-radius: var(--radius-md);
}

.health-concerns p {
    font-size: 0.95rem;
    color: var(--ink-medium);
    line-height: 1.8;
    margin-bottom: var(--space-2);
}

.health-concerns p:last-child {
    margin-bottom: 0;
}

/* 響應式 */
@media (max-width: 768px) {
    .interp-tabs {
        gap: var(--space-1);
    }

    .interp-tab {
        padding: var(--space-2) var(--space-3);
        font-size: 0.85rem;
    }

    .interp-card {
        padding: var(--space-5);
    }

    .traits-grid {
        grid-template-columns: 1fr;
        gap: var(--space-4);
    }

    .name-match-cta-content {
        flex-direction: column;
        text-align: center;
    }
}

/* ===== 人生建議區塊 ===== */
.advice-section {
    padding: var(--space-12) 0;
    background: var(--paper-warm);
}

.advice-card {
    max-width: 800px;
    margin: 0 auto;
    background: var(--paper-snow);
    border-radius: var(--radius-lg);
    padding: var(--space-8);
    box-shadow: var(--shadow-md);
    border: 1px solid var(--ink-mist);
}

.advice-main {
    margin-bottom: var(--space-6);
}

.advice-main p {
    font-family: var(--font-classical);
    font-size: 1.1rem;
    color: var(--ink-deep);
    line-height: 2;
    text-align: center;
    padding: var(--space-5);
    background: linear-gradient(135deg, rgba(201, 64, 67, 0.05) 0%, rgba(201, 64, 67, 0.02) 100%);
    border-radius: var(--radius-md);
    border-left: 4px solid var(--vermilion);
}

.advice-specific {
    margin-bottom: var(--space-6);
    padding: var(--space-5);
    background: var(--paper-aged);
    border-radius: var(--radius-md);
}

.advice-specific h3,
.advice-specific h4 {
    font-family: var(--font-display);
    font-size: 1.1rem;
    color: var(--ink-deep);
    margin-bottom: var(--space-4);
    padding-bottom: var(--space-2);
    border-bottom: 2px solid var(--vermilion);
    display: inline-block;
}

.wuge-section .wuge-fortune.fortune-bad {
    color: #8f2a2d;
    background: #f3e3e3;
}

.wuge-section .wuge-fortune.fortune-half,
.sancai-section .sancai-fortune.fortune-half {
    color: #6b4f14;
    background: #f4ecd9;
}

.advice-specific ul {
    list-style: none;
    padding: 0;
    margin: 0;
}

.advice-specific li {
    padding: var(--space-3) 0;
    padding-left: var(--space-6);
    position: relative;
    font-size: 0.95rem;
    color: var(--ink-medium);
    line-height: 1.8;
    border-bottom: 1px dashed var(--ink-mist);
}

.advice-specific li:last-child {
    border-bottom: none;
}

.advice-specific li::before {
    content: '◆';
    position: absolute;
    left: 0;
    top: var(--space-3);
    color: var(--vermilion);
    font-size: 0.7rem;
}

.advice-motto {
    text-align: center;
}

.advice-motto blockquote {
    font-family: var(--font-brush);
    font-size: 1.3rem;
    color: var(--ink-deep);
    line-height: 1.8;
    padding: var(--space-6);
    margin: 0;
    background: linear-gradient(180deg, var(--paper-aged) 0%, var(--paper-warm) 100%);
    border-radius: var(--radius-lg);
    position: relative;
}

.advice-motto blockquote::before {
    content: '"';
    position: absolute;
    top: var(--space-2);
    left: var(--space-4);
    font-size: 3rem;
    color: var(--vermilion);
    opacity: 0.3;
    font-family: serif;
    line-height: 1;
}

.advice-motto blockquote::after {
    content: '"';
    position: absolute;
    bottom: var(--space-2);
    right: var(--space-4);
    font-size: 3rem;
    color: var(--vermilion);
    opacity: 0.3;
    font-family: serif;
    line-height: 1;
}

/* ===== 總評區塊 ===== */
.summary-section {
    padding: var(--space-12) 0;
    background: linear-gradient(180deg, var(--paper-aged) 0%, var(--paper-snow) 100%);
}

.summary-card {
    max-width: 700px;
    margin: 0 auto;
    background: var(--paper-snow);
    border-radius: var(--radius-lg);
    padding: var(--space-8);
    box-shadow: var(--shadow-lg);
    text-align: center;
    border: 2px solid var(--ink-mist);
}

.summary-card h2 {
    font-family: var(--font-display);
    font-size: 1.8rem;
    color: var(--ink-deep);
    margin-bottom: var(--space-6);
    position: relative;
    display: inline-block;
    padding-bottom: var(--space-3);
    border-bottom: 3px solid var(--vermilion);
}

.summary-card h2::before {
    content: '◆';
    color: var(--vermilion);
    margin-right: var(--space-2);
    font-size: 0.6em;
    vertical-align: middle;
}

.summary-card h2::after {
    content: '◆';
    color: var(--vermilion);
    margin-left: var(--space-2);
    font-size: 0.6em;
    vertical-align: middle;
}

.summary-text {
    font-family: var(--font-classical);
    font-size: 1.05rem;
    color: var(--ink-medium);
    line-height: 2;
    margin-bottom: var(--space-6);
    padding: var(--space-4);
    background: var(--paper-aged);
    border-radius: var(--radius-md);
}

.summary-score {
    font-family: var(--font-display);
    font-size: 1.1rem;
    color: var(--ink-deep);
    margin-bottom: var(--space-6);
    padding: var(--space-4);
    background: linear-gradient(135deg, rgba(201, 64, 67, 0.08) 0%, rgba(201, 64, 67, 0.02) 100%);
    border-radius: var(--radius-md);
    border: 1px solid rgba(201, 64, 67, 0.2);
}

.summary-score .score {
    font-size: 1.5rem;
    font-weight: 700;
    margin: 0 var(--space-2);
}

.summary-score .grade {
    display: inline-block;
    padding: var(--space-1) var(--space-3);
    border-radius: var(--radius-full);
    color: var(--paper-snow);
    font-size: 0.9rem;
    font-weight: 600;
    margin-left: var(--space-2);
}

/* 最終總評升級 */
.final-review-card {
    max-width: 980px;
    text-align: left;
}

.final-review-card h2 {
    margin-bottom: var(--space-4);
    display: block;
}

.final-review-card h2::before,
.final-review-card h2::after {
    content: none;
}

.final-review-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--space-3);
    margin-bottom: var(--space-2);
}

.final-grade-badge {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 0.4rem 0.9rem;
    border-radius: 999px;
    color: #fff;
    font-family: var(--font-display);
    font-size: 0.92rem;
    font-weight: 700;
    letter-spacing: 0.04em;
    white-space: nowrap;
}

.final-review-grid {
    margin-bottom: var(--space-6);
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: var(--space-4);
}

.final-review-item {
    padding: var(--space-4);
    border-radius: var(--radius-md);
    border: 1px solid rgba(0, 0, 0, 0.08);
    background: linear-gradient(180deg, rgba(255, 255, 255, 0.96) 0%, rgba(245, 240, 231, 0.78) 100%);
}

.final-review-item h3 {
    margin: 0 0 var(--space-3);
    color: var(--ink-deep);
    font-family: var(--font-display);
    font-size: 1.02rem;
}

.final-score-line {
    margin: 0 0 var(--space-2);
    line-height: 1;
}

.final-score-number {
    font-family: var(--font-display);
    font-size: 2rem;
    font-weight: 700;
}

.final-score-unit {
    margin-left: 0.25rem;
    color: var(--ink-light);
    font-size: 0.98rem;
    font-weight: 600;
}

.final-score-note {
    margin: 0;
    color: var(--ink-medium);
    line-height: 1.75;
    font-size: 0.94rem;
}

.final-priority-list {
    list-style: none;
    margin: 0;
    padding: 0;
    display: grid;
    gap: 0.55rem;
}

.final-priority-item {
    display: grid;
    grid-template-columns: auto 1fr;
    gap: 0.4rem 0.65rem;
    align-items: center;
    padding: 0.5rem 0.55rem;
    border-radius: 0.7rem;
    background: var(--paper-aged);
}

.final-priority-order {
    width: 1.5rem;
    height: 1.5rem;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    background: var(--ink-deep);
    color: #fff;
    font-size: 0.75rem;
    font-weight: 700;
}

.final-priority-name {
    font-size: 0.95rem;
    color: var(--ink-deep);
    font-weight: 600;
}

.final-priority-meta {
    grid-column: 2;
    color: var(--ink-medium);
    font-size: 0.83rem;
}

.final-priority-item.risk-high .final-priority-order {
    background: #b4322f;
}

.final-priority-item.risk-mid .final-priority-order {
    background: #cc6f27;
}

.final-priority-item.risk-low .final-priority-order {
    background: #2d6a4f;
}

.final-actions {
    margin: 0;
    padding-left: 1.05rem;
    color: var(--ink-medium);
    line-height: 1.8;
    font-size: 0.9rem;
}

.final-actions li + li {
    margin-top: 0.45rem;
}

.final-summary-actions {
    display: grid;
    gap: var(--space-4);
}

.final-journey {
    padding: var(--space-5);
    border-radius: var(--radius-lg);
    border: 1px solid rgba(201, 64, 67, 0.18);
    background: linear-gradient(135deg, rgba(201, 64, 67, 0.08) 0%, rgba(255, 255, 255, 0.95) 56%, rgba(243, 236, 224, 0.82) 100%);
}

.final-journey-head {
    margin-bottom: var(--space-4);
}

.final-journey-head h3 {
    margin: 0 0 0.45rem;
    color: var(--ink-deep);
    font-family: var(--font-display);
    font-size: clamp(1.1rem, 2vw, 1.35rem);
    letter-spacing: 0.04em;
}

.final-journey-head p {
    margin: 0;
    color: var(--ink-medium);
    line-height: 1.8;
    font-size: 0.94rem;
}

.final-service-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: var(--space-4);
}

.final-service-card {
    position: relative;
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
    padding: 0.95rem 0.95rem 1.05rem;
    border-radius: 0.95rem;
    border: 1px solid rgba(0, 0, 0, 0.08);
    background: #fff;
    box-shadow: 0 6px 16px rgba(28, 24, 20, 0.06);
}

.final-service-card.is-primary {
    border-color: rgba(201, 64, 67, 0.42);
    box-shadow: 0 12px 24px rgba(201, 64, 67, 0.14);
    background: linear-gradient(180deg, #fffdf8 0%, #fff 100%);
}

.final-service-step {
    display: inline-flex;
    width: fit-content;
    padding: 0.18rem 0.56rem;
    border-radius: 999px;
    background: rgba(10, 9, 8, 0.06);
    color: var(--ink-medium);
    font-size: 0.72rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.08em;
}

.final-service-card.is-primary .final-service-step {
    background: rgba(201, 64, 67, 0.12);
    color: #9b2c2f;
}

.final-service-icon {
    width: 2.5rem;
    height: 2.5rem;
    border-radius: 50%;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: rgba(201, 64, 67, 0.1);
    border: 1px solid rgba(201, 64, 67, 0.3);
    color: var(--vermilion-deep);
    font-family: var(--font-display);
    font-size: 1.15rem;
    font-weight: 700;
}

.final-service-title {
    margin: 0;
    font-family: var(--font-display);
    color: var(--ink-deep);
    font-size: 1.02rem;
    line-height: 1.4;
}

.final-service-desc {
    margin: 0;
    color: var(--ink-medium);
    font-size: 0.9rem;
    line-height: 1.75;
    flex: 1 1 auto;
}

.final-service-card .btn {
    margin-top: 0.2rem;
    width: 100%;
    min-height: 2.6rem;
}

.final-service-card .btn-secondary {
    margin-top: 0.2rem;
}

.final-summary-actions .share-buttons {
    margin-bottom: 0;
}

.final-summary-actions .share-label {
    color: var(--ink-medium);
    font-size: 0.9rem;
}

.final-summary-actions .share-btn-group {
    display: flex;
    gap: var(--space-2);
    flex-wrap: wrap;
}

.final-cta-buttons {
    display: flex;
    justify-content: center;
    flex-wrap: wrap;
    gap: var(--space-3);
}

.final-cta-buttons .btn {
    margin-top: 0;
}

/* 分享按鈕 */
.summary-card .share-buttons {
    display: flex;
    justify-content: center;
    gap: var(--space-3);
    margin-bottom: var(--space-5);
    flex-wrap: wrap;
}

.summary-card .share-buttons a {
    display: inline-flex;
    align-items: center;
    gap: var(--space-2);
    padding: var(--space-2) var(--space-4);
    border-radius: var(--radius-md);
    font-size: 0.9rem;
    text-decoration: none;
    transition: all var(--duration-fast) var(--ease-out);
}

/* 鼓勵語 */
.farewell-message {
    font-family: var(--font-classical);
    font-size: 0.95rem;
    color: var(--ink-light);
    line-height: 1.8;
    margin-top: var(--space-6);
    padding-top: var(--space-5);
    border-top: 1px dashed var(--ink-mist);
    font-style: italic;
}

/* 次要按鈕樣式 */
.btn-secondary {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: var(--space-2);
    padding: var(--space-3) var(--space-6);
    background: transparent;
    border: 2px solid var(--vermilion);
    border-radius: var(--radius-md);
    font-family: var(--font-display);
    font-size: 1rem;
    font-weight: 500;
    color: var(--vermilion);
    text-decoration: none;
    cursor: pointer;
    transition: all var(--duration-normal) var(--ease-out);
    margin-top: var(--space-4);
}

.btn-secondary:hover {
    background: var(--vermilion);
    color: var(--paper-snow);
    transform: translateY(-2px);
    box-shadow: 0 4px 12px rgba(201, 64, 67, 0.3);
}

.btn-secondary:active {
    transform: translateY(0);
}

/* 響應式 - 人生建議與總評 */
@media (max-width: 768px) {
    .advice-card,
    .summary-card {
        padding: var(--space-5);
    }

    .final-review-head {
        align-items: flex-start;
    }

    .final-review-grid {
        grid-template-columns: 1fr;
        gap: var(--space-3);
    }

    .final-review-item {
        padding: var(--space-3);
    }

    .final-journey {
        padding: var(--space-4);
    }

    .final-service-grid {
        grid-template-columns: 1fr;
        gap: var(--space-3);
    }

    .advice-motto blockquote {
        font-size: 1.1rem;
        padding: var(--space-4);
    }

    .btn-secondary {
        width: 100%;
        padding: var(--space-4) var(--space-6);
    }

    .final-cta-buttons {
        justify-content: stretch;
    }

    .final-cta-buttons .btn {
        width: 100%;
    }
}

@media (max-width: 1024px) and (min-width: 769px) {
    .final-review-grid {
        grid-template-columns: 1fr 1fr;
    }

    .final-review-score-item {
        grid-column: span 2;
    }

    .final-service-grid {
        grid-template-columns: 1fr 1fr;
    }

    .final-service-card:last-child {
        grid-column: span 2;
    }
}

/* ===== 2026-03 Responsive UI/UX Refresh ===== */
a:focus-visible,
button:focus-visible,
input:focus-visible,
select:focus-visible,
textarea:focus-visible {
    outline: 3px solid rgba(201, 64, 67, 0.35);
    outline-offset: 2px;
}

body.nav-is-open {
    overflow: hidden;
}

.container {
    max-width: 1160px;
}

.site-header {
    box-shadow: 0 2px 18px rgba(10, 9, 8, 0.06);
}

.form-section-hero {
    padding: 1.25rem 0 1.75rem;
}

.form-card {
    max-width: 640px;
    padding: 1.25rem 1.5rem 1rem;
}

.form-header {
    margin-bottom: var(--space-5);
}

.hero-meta {
    display: flex;
    justify-content: center;
    flex-wrap: wrap;
    gap: 0.5rem;
    margin: 0.75rem 0;
}

.hero-badge {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 0.2rem 0.6rem;
    border-radius: 999px;
    background: rgba(201, 64, 67, 0.08);
    color: var(--vermilion-deep);
    font-size: 0.82rem;
    font-weight: 600;
}

.hero-shortcuts {
    display: flex;
    justify-content: center;
    flex-wrap: wrap;
    gap: 0.5rem;
    margin-top: 0.5rem;
}

.hero-shortcut {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 2.25rem;
    padding: 0.3rem 0.85rem;
    border-radius: 999px;
    background: var(--paper-aged);
    border: 1px solid rgba(0, 0, 0, 0.08);
    color: var(--ink-deep);
    text-decoration: none;
    font-size: 0.85rem;
    font-weight: 600;
    transition: all var(--duration-fast) var(--ease-out);
}

.hero-shortcut:hover {
    color: var(--vermilion-deep);
    border-color: rgba(201, 64, 67, 0.35);
    background: rgba(201, 64, 67, 0.08);
}

.form-row {
    gap: var(--space-4);
}

.form-group input,
.form-group select {
    min-height: 46px;
}

.form-footnote {
    margin-top: var(--space-4);
    text-align: center;
    color: var(--ink-medium);
    font-size: 0.86rem;
}

.quick-tools-section {
    padding: 0 0 var(--space-6);
}

.quick-tools-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: var(--space-4);
}

.quick-tool-card {
    display: flex;
    flex-direction: column;
    gap: 0.45rem;
    padding: var(--space-5);
    background: var(--paper-snow);
    border: 1px solid rgba(0, 0, 0, 0.08);
    border-radius: var(--radius-lg);
    text-decoration: none;
    transition: all var(--duration-fast) var(--ease-out);
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.04);
}

.quick-tool-card:hover {
    border-color: rgba(201, 64, 67, 0.35);
    transform: translateY(-2px);
    box-shadow: 0 8px 24px rgba(201, 64, 67, 0.1);
}

.quick-tool-title {
    font-family: var(--font-display);
    font-size: 1.02rem;
    font-weight: 600;
    color: var(--ink-deep);
}

.quick-tool-desc {
    color: var(--ink-medium);
    font-size: 0.9rem;
    line-height: 1.6;
}

.stats-section {
    padding: var(--space-6) 0;
}

.stats-grid {
    gap: var(--space-3);
}

.stat-item {
    padding: var(--space-4) var(--space-3);
    background: rgba(255, 255, 255, 0.7);
    border: 1px solid rgba(0, 0, 0, 0.06);
    border-radius: var(--radius-md);
}

.name-tag {
    min-height: 40px;
}

.intro-grid {
    grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
}

.wuxing-grid {
    gap: var(--space-3);
}

@media (max-width: 1023px) {
    .main-nav {
        width: min(88vw, 360px);
        right: min(-88vw, -360px);
    }
}

@media (max-width: 960px) {
    .quick-tools-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .stats-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .form-row {
        grid-template-columns: 1fr;
    }
}

@media (max-width: 768px) {
    .header-date-bar {
        padding: 0.36rem 0;
    }

    .form-section-hero {
        padding: 0.8rem 0 1.25rem;
    }

    .form-card {
        padding: 1rem;
    }

    .hero-shortcuts {
        flex-wrap: nowrap;
        justify-content: flex-start;
        overflow-x: auto;
        padding-bottom: 0.15rem;
        -webkit-overflow-scrolling: touch;
    }

    .hero-shortcut {
        flex: 0 0 auto;
    }

    .quick-tools-section {
        padding-bottom: var(--space-5);
    }

    .quick-tools-grid {
        grid-template-columns: 1fr;
    }

    .recent-names-section,
    .popular-names-section,
    .intro-section,
    .wuxing-section {
        padding: var(--space-8) 0;
    }
}

@media (max-width: 520px) {
    .stats-grid {
        grid-template-columns: 1fr;
    }

    .name-tag {
        width: 100%;
        justify-content: center;
    }
}

/* ===== 2026-03 Site-Wide UI/UX Components ===== */
.skip-link {
    position: absolute;
    left: -9999px;
    top: 0.5rem;
    z-index: 1000;
    padding: 0.55rem 0.9rem;
    border-radius: var(--radius-sm);
    background: var(--ink-black);
    color: #fff;
    text-decoration: none;
    font-size: 0.85rem;
}

.skip-link:focus {
    left: 0.75rem;
}

.mystical-card,
.overview-card,
.analysis-card,
.advice-card,
.summary-card,
.xiyongshen-card,
.xys-card,
.wuxing-analysis-card,
.stroke-analysis-card,
.overall-fortune-card,
.wuxing-detail-card,
.shensha-card,
.dayun-card,
.liunian-card,
.name-card,
.fortune-item-card,
.lucky-card,
.monthly-card {
    background: var(--paper-snow);
    border: 1px solid rgba(0, 0, 0, 0.08);
    border-radius: var(--radius-lg);
    box-shadow: 0 4px 16px rgba(10, 9, 8, 0.05);
}

.mystical-card,
.overview-card,
.stroke-analysis-card,
.wuxing-analysis-card,
.xiyongshen-card,
.xys-card,
.overall-fortune-card {
    padding: var(--space-6);
}

.card-header {
    display: flex;
    align-items: center;
    gap: var(--space-3);
    margin-bottom: var(--space-4);
}

.card-content {
    color: var(--ink-medium);
    line-height: 1.8;
}

.seal-icon {
    width: 42px;
    height: 42px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: 12px;
    background: rgba(201, 64, 67, 0.12);
    color: var(--vermilion-deep);
    font-family: var(--font-display);
    font-size: 1.15rem;
    font-weight: 700;
}

.section-subtitle {
    margin-top: var(--space-2);
    color: var(--ink-medium);
    font-size: 0.95rem;
}

.action-buttons {
    display: flex;
    justify-content: center;
    flex-wrap: wrap;
    gap: var(--space-3);
}

/* 結果頁首屏摘要與下一步轉換 */
.conversion-entry-section {
    padding-top: var(--space-4);
}

.conversion-entry-card {
    max-width: 860px;
    text-align: left;
    border: 1px solid rgba(201, 64, 67, 0.18);
    box-shadow: 0 12px 32px rgba(10, 9, 8, 0.08);
}

.conversion-entry-card .section-title {
    margin-bottom: var(--space-2);
}

.conversion-entry-card .section-subtitle {
    margin-top: 0;
    font-size: 1rem;
    line-height: 1.9;
}

.conversion-entry-card .action-buttons {
    justify-content: flex-start;
    margin-top: var(--space-5);
}

.conversion-badges {
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-2);
    margin: var(--space-4) 0 var(--space-5);
}

.conversion-points {
    display: grid;
    gap: var(--space-3);
}

.conversion-point {
    margin: 0;
    padding: var(--space-3) var(--space-4);
    border-radius: var(--radius-md);
    background: linear-gradient(180deg, rgba(255, 255, 255, 0.92) 0%, rgba(201, 64, 67, 0.04) 100%);
    border: 1px solid rgba(201, 64, 67, 0.14);
    color: var(--ink-rich);
    line-height: 1.75;
}

.roadmap-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: var(--space-4);
}

.roadmap-card {
    background: var(--paper-snow);
    border: 1px solid rgba(0, 0, 0, 0.08);
    border-radius: var(--radius-lg);
    padding: var(--space-5);
    box-shadow: var(--shadow-sm);
}

.roadmap-title {
    font-family: var(--font-display);
    color: var(--ink-deep);
    margin-bottom: var(--space-3);
}

.roadmap-list {
    margin: 0;
    padding-left: 1.15rem;
    color: var(--ink-medium);
    line-height: 1.8;
}

.roadmap-list li + li {
    margin-top: var(--space-2);
}

.risk-radar-card {
    background: var(--paper-snow);
    border: 1px solid rgba(0, 0, 0, 0.08);
    border-radius: var(--radius-lg);
    padding: var(--space-6);
    box-shadow: var(--shadow-sm);
}

.risk-radar-card .section-subtitle {
    margin-bottom: var(--space-4);
}

.risk-radar-list {
    display: grid;
    gap: var(--space-3);
}

.risk-radar-item {
    border-radius: var(--radius-md);
    border: 1px solid rgba(0, 0, 0, 0.08);
    padding: var(--space-4);
    background: var(--paper-warm);
}

.risk-radar-head {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: var(--space-2);
    margin-bottom: var(--space-2);
}

.risk-radar-head h3 {
    margin: 0;
    font-size: 1rem;
    color: var(--ink-deep);
}

.risk-order,
.risk-score,
.risk-level {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 1.8rem;
    padding: 0.15rem 0.55rem;
    border-radius: 999px;
    font-size: 0.8rem;
    font-weight: 600;
}

.risk-order {
    background: rgba(0, 0, 0, 0.06);
    color: var(--ink-rich);
}

.risk-score {
    background: rgba(61, 90, 128, 0.1);
    color: #2f4f74;
}

.risk-level {
    background: rgba(201, 64, 67, 0.12);
    color: var(--vermilion-deep);
}

.risk-progress {
    width: 100%;
    height: 8px;
    border-radius: 999px;
    background: rgba(0, 0, 0, 0.08);
    overflow: hidden;
    margin: var(--space-2) 0 var(--space-3);
}

.risk-progress span {
    display: block;
    height: 100%;
    border-radius: 999px;
    background: linear-gradient(90deg, var(--vermilion) 0%, var(--gold) 100%);
}

.risk-note {
    margin: 0;
    color: var(--ink-medium);
    font-size: 0.92rem;
    line-height: 1.75;
}

.risk-low .risk-level {
    background: rgba(74, 124, 89, 0.14);
    color: #2f6543;
}

.risk-high .risk-level {
    background: rgba(201, 64, 67, 0.16);
    color: #8f2628;
}

.btn-block {
    width: 100%;
}

.tag,
.lucky-tag,
.trait-tag,
.industry-tag,
.name-wx-tag,
.xiyong-element {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 2rem;
    padding: 0.2rem 0.65rem;
    border-radius: 999px;
    font-size: 0.82rem;
    font-weight: 600;
}

.tag,
.lucky-tag,
.trait-tag {
    background: var(--paper-aged);
    color: var(--ink-deep);
    border: 1px solid rgba(0, 0, 0, 0.08);
}

.form-label {
    font-size: 0.95rem;
    font-weight: 600;
    color: var(--ink-deep);
}

.form-select {
    width: 100%;
    min-height: 44px;
    border-radius: var(--radius-md);
    border: 1px solid rgba(0, 0, 0, 0.12);
    padding: 0.55rem 0.7rem;
    background: var(--paper-snow);
    color: var(--ink-deep);
}

.form-row-2,
.form-row-3 {
    display: grid;
    gap: var(--space-4);
}

.form-row-2 {
    grid-template-columns: repeat(2, minmax(0, 1fr));
}

.form-row-3 {
    grid-template-columns: repeat(3, minmax(0, 1fr));
}

.form-section-title {
    font-family: var(--font-display);
    color: var(--ink-deep);
    font-size: 1.15rem;
    margin-bottom: var(--space-3);
}

.result-header-card {
    padding: var(--space-6);
    background: linear-gradient(135deg, rgba(201, 64, 67, 0.06), rgba(201, 169, 98, 0.04));
    border: 1px solid rgba(0, 0, 0, 0.08);
    border-radius: var(--radius-lg);
}

.result-title h1 {
    font-family: var(--font-display);
    font-size: clamp(1.6rem, 4.6vw, 2.2rem);
    color: var(--ink-deep);
    margin-bottom: var(--space-2);
}

.birth-info,
.meta-item,
.meta-label,
.meta-value,
.birth-lunar,
.birth-time,
.birth-gender,
.birth-jieqi {
    color: var(--ink-medium);
}

.birth-info {
    display: flex;
    flex-direction: column;
    gap: 0.3rem;
}

.birth-date {
    font-family: var(--font-display);
    font-size: clamp(1.65rem, 5vw, 2.4rem);
    color: var(--ink-deep);
}

.birth-lunar,
.birth-time,
.birth-gender,
.birth-jieqi {
    display: inline-flex;
    align-items: center;
    width: fit-content;
    padding: 0.2rem 0.5rem;
    border-radius: 999px;
    background: rgba(0, 0, 0, 0.04);
    font-size: 0.8rem;
}

.birth-gender {
    background: rgba(201, 64, 67, 0.1);
    color: var(--vermilion-deep);
}

.pillars-grid,
.dayun-grid,
.liunian-grid,
.shensha-grid,
.shishen-grid,
.fortune-grid,
.lucky-grid,
.monthly-grid,
.name-suggestions,
.advice-grid,
.wuxing-display,
.wuge-comparison,
.quick-tools-grid,
.traits-grid,
.element-grid,
.principles-grid {
    display: grid;
    gap: var(--space-4);
}

.pillars-grid,
.dayun-grid,
.liunian-grid,
.fortune-grid,
.monthly-grid {
    grid-template-columns: repeat(4, minmax(0, 1fr));
}

.lucky-grid,
.advice-grid,
.shensha-grid,
.shishen-grid,
.name-suggestions,
.wuxing-display {
    grid-template-columns: repeat(3, minmax(0, 1fr));
}

.wuge-comparison,
.traits-grid,
.element-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
}

.pillar,
.pillar-card,
.dayun-card,
.liunian-card,
.shensha-card,
.fortune-item-card,
.lucky-card,
.monthly-card {
    padding: var(--space-4);
}

.pillar,
.pillar-card {
    text-align: center;
}

.pillar-label {
    display: inline-block;
    margin-bottom: var(--space-2);
    color: var(--ink-medium);
    font-size: 0.8rem;
    letter-spacing: 0.08em;
}

.pillar-gan,
.pillar-zhi,
.gan-char,
.zhi-char {
    font-family: var(--font-display);
    font-size: 2rem;
    line-height: 1;
}

.pillar-gan,
.gan-char {
    color: var(--vermilion-deep);
}

.pillar-zhi,
.zhi-char {
    color: var(--copper);
}

.pillar-canggan {
    display: flex;
    justify-content: center;
    gap: 0.3rem;
    margin: 0.5rem 0;
    flex-wrap: wrap;
}

.canggan-item,
.canggan-mini {
    width: 1.55rem;
    height: 1.55rem;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: 0.35rem;
    background: var(--paper-aged);
    border: 1px solid rgba(0, 0, 0, 0.08);
    font-size: 0.76rem;
    color: var(--ink-deep);
}

.day-pillar-showcase {
    padding: var(--space-4);
    border-radius: var(--radius-lg);
    background: linear-gradient(135deg, rgba(201, 64, 67, 0.09), rgba(201, 169, 98, 0.06));
    border: 1px solid rgba(201, 64, 67, 0.2);
}

.pillar-main {
    display: flex;
    justify-content: center;
    gap: var(--space-3);
    margin-bottom: var(--space-2);
}

.pillar-meta {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.2rem;
}

.meta-label {
    font-size: 0.78rem;
}

.nayin-name {
    font-family: var(--font-display);
    color: var(--ink-deep);
}

.wuxing-element {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.45rem;
    padding: var(--space-4);
    background: var(--paper-snow);
    border-radius: var(--radius-lg);
    border: 1px solid rgba(0, 0, 0, 0.08);
}

.element-symbol {
    font-family: var(--font-display);
    font-size: 1.7rem;
    color: var(--ink-deep);
}

.element-bar,
.meter-bar,
.fortune-bar,
.monthly-bar,
.wuxing-bar-wrapper {
    width: 100%;
    height: 0.5rem;
    border-radius: 999px;
    background: rgba(0, 0, 0, 0.08);
    overflow: hidden;
}

.bar-fill,
.meter-fill,
.fortune-bar-fill,
.monthly-bar-fill {
    height: 100%;
    border-radius: inherit;
    background: linear-gradient(90deg, var(--vermilion), var(--copper));
}

.element-info,
.meter-info,
.meta-item {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.4rem;
}

.element-count,
.meter-score,
.summary-value,
.wuge-value {
    font-family: var(--font-display);
    font-weight: 700;
    color: var(--ink-deep);
}

.xys-card,
.xiyongshen-card {
    padding: var(--space-5);
}

.xys-gods {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: var(--space-3);
    margin-top: var(--space-4);
}

.god-item {
    padding: var(--space-4);
    border-radius: var(--radius-md);
    border: 1px solid rgba(0, 0, 0, 0.08);
    background: var(--paper-aged);
    text-align: center;
}

.god-label {
    display: block;
    font-size: 0.8rem;
    color: var(--ink-medium);
    margin-bottom: 0.3rem;
}

.god-value {
    display: block;
    font-family: var(--font-display);
    font-size: 1.25rem;
    color: var(--ink-deep);
    margin-bottom: 0.2rem;
}

.god-desc {
    font-size: 0.8rem;
    color: var(--ink-medium);
}

.shishen-group,
.analysis-section .analysis-card,
.wuge-person,
.fortune-item-card,
.advice-item,
.name-card {
    padding: var(--space-4);
    background: var(--paper-snow);
    border: 1px solid rgba(0, 0, 0, 0.08);
    border-radius: var(--radius-md);
}

.shishen-item,
.summary-item,
.meta-item,
.relation-item,
.advice-item li,
.wuge-item,
.number-grid-item,
.td-item {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.6rem;
}

.summary-item,
.meta-item {
    padding: 0.35rem 0;
}

.summary-label,
.wuge-label,
.grid-name,
.meter-label {
    color: var(--ink-medium);
    font-size: 0.9rem;
}

.analysis-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    flex-wrap: wrap;
    gap: var(--space-3);
    margin-bottom: var(--space-3);
}

.analysis-title {
    font-family: var(--font-display);
    color: var(--ink-deep);
    font-size: 1.1rem;
}

.analysis-score,
.score-item {
    display: inline-flex;
    align-items: baseline;
    gap: 0.25rem;
}

.score-unit {
    color: var(--ink-medium);
    font-size: 0.88rem;
}

.analysis-relations {
    display: grid;
    gap: var(--space-2);
}

.relation-item {
    padding: 0.55rem 0.7rem;
    border-radius: var(--radius-sm);
    border: 1px solid rgba(0, 0, 0, 0.08);
    background: var(--paper-aged);
    align-items: flex-start;
}

.relation-type {
    font-weight: 700;
    color: var(--ink-deep);
    white-space: nowrap;
}

.relation-desc {
    color: var(--ink-medium);
    line-height: 1.6;
}

.relation-good,
.relation-he,
.relation-sheng {
    border-color: rgba(61, 107, 79, 0.35);
    background: rgba(61, 107, 79, 0.08);
}

.relation-bad,
.relation-chong,
.relation-ke,
.relation-xing,
.relation-po,
.relation-hai {
    border-color: rgba(181, 54, 58, 0.35);
    background: rgba(181, 54, 58, 0.08);
}

.relation-neutral {
    border-color: rgba(173, 139, 71, 0.35);
    background: rgba(173, 139, 71, 0.08);
}

.lucky-grid,
.lucky-tags,
.traits-display,
.monthly-grid {
    margin-top: var(--space-4);
}

.lucky-card {
    text-align: center;
}

.lucky-icon,
.advice-icon,
.aspect-icon,
.principle-icon {
    width: 2.2rem;
    height: 2.2rem;
    min-width: 2.2rem;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    background: rgba(201, 64, 67, 0.12);
    color: var(--vermilion-deep);
    font-family: var(--font-display);
    font-weight: 700;
}

.lucky-tags {
    display: flex;
    justify-content: center;
    flex-wrap: wrap;
    gap: 0.35rem;
}

.fortune-grid {
    margin-top: var(--space-4);
}

.fortune-item-header {
    display: flex;
    align-items: center;
    gap: 0.45rem;
    margin-bottom: var(--space-3);
}

.fortune-icon {
    width: 2rem;
    height: 2rem;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: 0.55rem;
    background: rgba(201, 64, 67, 0.14);
    color: var(--vermilion-deep);
    font-family: var(--font-display);
    font-weight: 700;
}

.fortune-item-score {
    display: flex;
    align-items: center;
    gap: 0.55rem;
}

.fortune-score-text {
    font-family: var(--font-display);
    color: var(--ink-deep);
}

.fortune-stars {
    margin-top: 0.5rem;
    color: #c5c5c5;
}

.star-filled {
    color: var(--gold);
}

.fortune-level-badge {
    margin-top: 0.5rem;
    display: inline-flex;
    padding: 0.2rem 0.65rem;
    border-radius: 999px;
    background: rgba(201, 64, 67, 0.1);
    color: var(--vermilion-deep);
    font-size: 0.8rem;
    font-weight: 600;
}

.overall-fortune-card {
    display: grid;
    grid-template-columns: auto 1fr;
    gap: var(--space-5);
    align-items: center;
}

.fortune-overview {
    color: var(--ink-medium);
    line-height: 1.8;
}

.score-circle {
    width: 150px;
    height: 150px;
}

.score-text {
    display: flex;
    align-items: baseline;
    justify-content: center;
    gap: 0.2rem;
}

.score-level,
.grade-name {
    margin-top: 0.35rem;
    text-align: center;
    font-family: var(--font-display);
    color: var(--ink-deep);
}

.grade-desc {
    color: var(--ink-medium);
    text-align: center;
    font-size: 0.88rem;
}

.monthly-card {
    padding: var(--space-3);
}

.monthly-header {
    display: flex;
    justify-content: space-between;
    align-items: baseline;
    margin-bottom: 0.45rem;
}

.monthly-num {
    color: var(--ink-deep);
    font-weight: 700;
}

.monthly-score {
    color: var(--ink-medium);
    font-size: 0.85rem;
}

.monthly-highlight {
    margin-top: 0.5rem;
    color: var(--ink-medium);
    font-size: 0.85rem;
    line-height: 1.5;
}

.current-month {
    border-color: rgba(201, 64, 67, 0.35);
    box-shadow: 0 8px 20px rgba(201, 64, 67, 0.12);
}

.name-match-hero-content {
    display: grid;
    grid-template-columns: 1fr auto 1fr;
    gap: var(--space-5);
    align-items: center;
}

.name-display {
    display: flex;
    flex-direction: column;
    gap: var(--space-3);
    align-items: center;
}

.name-chars {
    display: flex;
    gap: 0.35rem;
}

.name-char {
    width: 2.45rem;
    height: 2.45rem;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: 0.65rem;
    background: var(--paper-snow);
    border: 1px solid rgba(0, 0, 0, 0.08);
    font-family: var(--font-display);
    font-size: 1.2rem;
    color: var(--ink-deep);
}

.name-renge {
    display: flex;
    align-items: center;
    gap: 0.4rem;
    flex-wrap: wrap;
    justify-content: center;
}

.renge-label {
    color: var(--ink-medium);
    font-size: 0.82rem;
}

.renge-value {
    font-family: var(--font-display);
    color: var(--ink-deep);
    font-size: 1.15rem;
}

.match-score-display {
    text-align: center;
}

.renge-pair {
    display: flex;
    align-items: center;
    gap: var(--space-2);
    flex-wrap: wrap;
}

.renge-item {
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;
    padding: 0.3rem 0.5rem;
    border-radius: var(--radius-sm);
    background: var(--paper-aged);
}

.pair-vs {
    color: var(--ink-medium);
    font-size: 0.86rem;
}

.stroke-comparison {
    display: grid;
    grid-template-columns: 1fr auto 1fr auto auto;
    gap: var(--space-3);
    align-items: center;
    margin-bottom: var(--space-4);
}

.stroke-item {
    padding: var(--space-3);
    border-radius: var(--radius-md);
    background: var(--paper-aged);
    text-align: center;
}

.stroke-name {
    display: block;
    font-family: var(--font-display);
    color: var(--ink-deep);
}

.stroke-total {
    color: var(--ink-medium);
    font-size: 0.84rem;
}

.stroke-plus,
.stroke-equals {
    color: var(--ink-medium);
    font-family: var(--font-display);
}

.yuanfen-number {
    text-align: center;
}

.yuanfen-value {
    display: block;
    font-family: var(--font-display);
    color: var(--vermilion-deep);
    font-size: 1.6rem;
    line-height: 1;
}

.yuanfen-label {
    color: var(--ink-medium);
    font-size: 0.82rem;
}

.wuge-comparison {
    margin-bottom: var(--space-4);
}

.wuge-person h3 {
    margin-bottom: 0.5rem;
    font-size: 1.05rem;
    color: var(--ink-deep);
}

.advice-section h3 {
    display: flex;
    align-items: center;
    gap: 0.45rem;
    margin-bottom: var(--space-2);
    font-size: 1.02rem;
    color: var(--ink-deep);
}

.wuge-item {
    padding: 0.35rem 0;
    border-bottom: 1px dashed rgba(0, 0, 0, 0.08);
}

.wuge-item:last-child {
    border-bottom: none;
}

.wuge-wuxing {
    font-size: 0.82rem;
    padding: 0.1rem 0.4rem;
    border-radius: 999px;
    background: rgba(0, 0, 0, 0.06);
}

.advice-summary p {
    color: var(--ink-medium);
    line-height: 1.8;
    margin-bottom: 0.4rem;
}

.advice-good,
.advice-caution {
    margin-top: var(--space-4);
    padding: var(--space-4);
    border-radius: var(--radius-md);
    border: 1px solid rgba(0, 0, 0, 0.08);
}

.advice-good {
    background: rgba(61, 107, 79, 0.08);
    border-color: rgba(61, 107, 79, 0.3);
}

.advice-caution {
    background: rgba(181, 54, 58, 0.08);
    border-color: rgba(181, 54, 58, 0.3);
}

.advice-good ul,
.advice-caution ul {
    margin-top: 0.4rem;
    padding-left: 1.1rem;
    color: var(--ink-medium);
    line-height: 1.8;
}

.wuxing-analysis-card .wuxing-chart {
    display: grid;
    gap: var(--space-2);
    margin-bottom: var(--space-4);
}

.wuxing-bar-item {
    display: grid;
    grid-template-columns: auto 1fr auto;
    align-items: center;
    gap: var(--space-3);
}

.wuxing-label {
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;
    min-width: 5.2rem;
}

.wuxing-icon {
    width: 1.6rem;
    height: 1.6rem;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    color: #fff;
    font-size: 0.8rem;
}

.wuxing-name {
    color: var(--ink-deep);
    font-size: 0.86rem;
}

.wuxing-count {
    color: var(--ink-medium);
    font-size: 0.85rem;
}

.xiyongshen-card .xiyong-main {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--space-3);
    margin-bottom: var(--space-3);
}

.xiyong-elements {
    display: flex;
    gap: 0.4rem;
    flex-wrap: wrap;
}

.name-suggestions {
    margin-top: var(--space-4);
}

.name-card {
    text-align: center;
}

.name-text {
    display: block;
    font-family: var(--font-display);
    color: var(--ink-deep);
    font-size: 1.2rem;
    margin-bottom: 0.5rem;
}

.name-wuxing {
    display: flex;
    justify-content: center;
    gap: 0.35rem;
    flex-wrap: wrap;
}

.naming-tips {
    margin-top: var(--space-5);
    padding: var(--space-4);
    border-radius: var(--radius-md);
    background: var(--paper-aged);
    color: var(--ink-medium);
}

.naming-tips h3 {
    color: var(--ink-deep);
    margin-bottom: 0.5rem;
}

.naming-tips ul {
    padding-left: 1.1rem;
    line-height: 1.8;
}

.td-item,
.number-grid-item {
    padding: 0.45rem 0.55rem;
    border-radius: var(--radius-sm);
    background: var(--paper-aged);
    border: 1px solid rgba(0, 0, 0, 0.08);
}

.grid-number {
    font-family: var(--font-display);
    font-weight: 700;
    color: var(--ink-deep);
}

.share-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 2.2rem;
    padding: 0.3rem 0.75rem;
    border-radius: 999px;
    background: var(--paper-aged);
    border: 1px solid rgba(0, 0, 0, 0.08);
    color: var(--ink-deep);
    text-decoration: none;
    transition: all var(--duration-fast) var(--ease-out);
}

.share-btn:hover {
    border-color: rgba(201, 64, 67, 0.3);
    color: var(--vermilion-deep);
}

.overview-icon {
    width: 2.6rem;
    height: 2.6rem;
    border-radius: 0.75rem;
    background: rgba(201, 64, 67, 0.12);
    color: var(--vermilion-deep);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-family: var(--font-display);
    font-weight: 700;
}

.overview-info {
    color: var(--ink-medium);
    line-height: 1.7;
}

.traits-display {
    display: flex;
    flex-wrap: wrap;
    gap: 0.45rem;
}

@media (max-width: 1200px) {
    .pillars-grid,
    .dayun-grid,
    .liunian-grid,
    .fortune-grid,
    .monthly-grid {
        grid-template-columns: repeat(3, minmax(0, 1fr));
    }
}

@media (max-width: 992px) {
    .pillars-grid,
    .dayun-grid,
    .liunian-grid,
    .fortune-grid,
    .monthly-grid,
    .lucky-grid,
    .advice-grid,
    .shensha-grid,
    .shishen-grid,
    .name-suggestions {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .overall-fortune-card {
        grid-template-columns: 1fr;
        justify-items: center;
        text-align: center;
    }

    .name-match-hero-content {
        grid-template-columns: 1fr;
    }

    .wuge-comparison,
    .traits-grid,
    .element-grid {
        grid-template-columns: 1fr;
    }

    .stroke-comparison {
        grid-template-columns: 1fr;
        justify-items: center;
    }
}

@media (max-width: 768px) {
    .mystical-card,
    .overview-card,
    .analysis-card,
    .advice-card,
    .summary-card,
    .xiyongshen-card,
    .xys-card,
    .wuxing-analysis-card,
    .stroke-analysis-card,
    .overall-fortune-card,
    .wuxing-detail-card,
    .shensha-card,
    .dayun-card,
    .liunian-card,
    .name-card,
    .fortune-item-card,
    .lucky-card,
    .monthly-card {
        padding: var(--space-4);
    }

    .pillars-grid,
    .dayun-grid,
    .liunian-grid,
    .fortune-grid,
    .monthly-grid,
    .lucky-grid,
    .advice-grid,
    .shensha-grid,
    .shishen-grid,
    .name-suggestions,
    .wuxing-display,
    .xys-gods {
        grid-template-columns: 1fr;
    }

    .form-row-2,
    .form-row-3 {
        grid-template-columns: 1fr;
    }

    .action-buttons {
        flex-direction: column;
    }

    .action-buttons .btn {
        width: 100%;
    }

    .conversion-entry-card {
        padding: var(--space-5);
    }

    .conversion-entry-card .action-buttons {
        justify-content: center;
    }

    .conversion-point {
        padding: var(--space-3);
    }

    .roadmap-grid {
        grid-template-columns: 1fr;
    }

    .risk-radar-card {
        padding: var(--space-4);
    }

    .section-title {
        font-size: clamp(1.35rem, 6vw, 1.9rem);
    }

    .card-header {
        align-items: flex-start;
    }
}

/* ===== 2026-03 Global UI Polish ===== */
.main-content {
    padding-bottom: var(--space-6);
}

.form-section,
.mystical-section,
.intro-section,
.summary-section {
    position: relative;
    scroll-margin-top: 92px;
}

.mystical-section,
.intro-section,
.summary-section {
    padding-block: clamp(2rem, 4.8vw, 3.75rem);
}

.mystical-header {
    margin-bottom: var(--space-6);
}

.section-title {
    line-height: 1.28;
    letter-spacing: 0.06em;
}

.form-subtitle,
.section-subtitle {
    max-width: 52ch;
    margin-left: auto;
    margin-right: auto;
}

.logo {
    align-items: flex-start;
}

.logo-text-wrap {
    display: flex;
    flex-direction: column;
    line-height: 1.08;
}

.logo-subtext {
    margin-top: 0.2rem;
    font-size: 0.66rem;
    font-weight: 700;
    color: var(--ink-medium);
    letter-spacing: 0.18em;
    text-transform: uppercase;
}

.site-header.is-scrolled {
    padding: 0.55rem 0;
    border-bottom-color: rgba(0, 0, 0, 0.12);
    box-shadow: 0 6px 18px rgba(10, 9, 8, 0.08);
}

@media (min-width: 1024px) {
    .main-nav {
        align-items: flex-start;
    }

    .nav-group {
        padding: 0.45rem 0.55rem 0.5rem;
        border-radius: 12px;
        transition: background-color var(--duration-fast) var(--ease-out);
    }

    .nav-group:hover {
        background: rgba(201, 64, 67, 0.05);
    }
}

@media (max-width: 1023px) {
    .main-nav {
        position: fixed;
        padding-top: calc(env(safe-area-inset-top, 0px) + 4.4rem);
        padding-left: var(--space-5);
        padding-right: var(--space-5);
    }

    .main-nav::before {
        content: "命理工具";
        position: absolute;
        top: calc(env(safe-area-inset-top, 0px) + 1.35rem);
        left: var(--space-5);
        font-family: var(--font-display);
        font-size: 1.1rem;
        color: var(--ink-deep);
        letter-spacing: 0.08em;
    }

    .nav-group {
        padding: 0.55rem;
        border-radius: var(--radius-md);
        border: 1px solid rgba(0, 0, 0, 0.07);
        background: rgba(255, 255, 255, 0.86);
    }

    .nav-group-title {
        font-size: 0.75rem;
        letter-spacing: 0.14em;
        margin-bottom: 0.35rem;
    }

    .nav-group a {
        border-radius: 10px;
    }
}

.site-footer {
    position: relative;
    overflow: hidden;
    background:
        radial-gradient(circle at 8% -10%, rgba(201, 64, 67, 0.08) 0, transparent 36%),
        radial-gradient(circle at 92% 0%, rgba(61, 90, 128, 0.08) 0, transparent 32%),
        var(--paper-tan);
}

.footer-quick-links {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 0.55rem;
    margin-bottom: var(--space-6);
}

.footer-chip {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 2.1rem;
    padding: 0.3rem 0.85rem;
    border-radius: 999px;
    border: 1px solid rgba(0, 0, 0, 0.08);
    background: rgba(255, 255, 255, 0.68);
    color: var(--ink-deep);
    font-size: 0.84rem;
    font-weight: 600;
    text-decoration: none;
    transition: all var(--duration-fast) var(--ease-out);
}

.footer-chip:hover {
    border-color: rgba(201, 64, 67, 0.35);
    background: rgba(201, 64, 67, 0.08);
    color: var(--vermilion-deep);
    transform: translateY(-1px);
}

.footer-seo-block {
    margin: 0 0 var(--space-5);
    padding: var(--space-5);
    border-radius: var(--radius-lg);
    border: 1px solid rgba(0, 0, 0, 0.08);
    background: linear-gradient(145deg, rgba(255, 255, 255, 0.86), rgba(255, 255, 255, 0.72));
}

.footer-seo-block h3 {
    margin: 0 0 var(--space-2);
    font-family: var(--font-display);
    font-size: 1.05rem;
    color: var(--ink-deep);
}

.footer-seo-text {
    margin: 0;
    color: var(--ink-medium);
    line-height: 1.85;
    font-size: 0.9rem;
}

.footer-seo-text a {
    color: var(--vermilion-deep);
    text-underline-offset: 2px;
}

.footer-seo-text a:hover {
    color: var(--vermilion);
}

.footer-seo-links {
    margin-top: var(--space-3);
    display: flex;
    flex-wrap: wrap;
    gap: 0.45rem;
}

.footer-seo-links a {
    display: inline-flex;
    align-items: center;
    min-height: 1.8rem;
    padding: 0.22rem 0.62rem;
    border-radius: 999px;
    border: 1px solid rgba(201, 64, 67, 0.22);
    background: rgba(201, 64, 67, 0.07);
    color: var(--vermilion-deep);
    font-size: 0.8rem;
    text-decoration: none;
    transition: all var(--duration-fast) var(--ease-out);
}

.footer-seo-links a:hover {
    background: rgba(201, 64, 67, 0.14);
    border-color: rgba(201, 64, 67, 0.38);
    transform: translateY(-1px);
}

.footer-seo-nav {
    margin-top: var(--space-4);
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: var(--space-4);
}

.footer-seo-col h4 {
    margin: 0 0 var(--space-2);
    font-size: 0.84rem;
    letter-spacing: 0.06em;
    color: var(--ink-deep);
}

.footer-seo-col ul {
    list-style: none;
    margin: 0;
    padding: 0;
    display: grid;
    gap: 0.32rem;
}

.footer-seo-col a {
    color: var(--ink-medium);
    text-decoration: none;
    font-size: 0.82rem;
}

.footer-seo-col a:hover {
    color: var(--vermilion-deep);
    text-decoration: underline;
    text-underline-offset: 2px;
}

.footer-seo-update {
    margin: var(--space-4) 0 0;
    padding-top: var(--space-3);
    border-top: 1px dashed rgba(0, 0, 0, 0.12);
    color: var(--ink-light);
    font-size: 0.82rem;
    line-height: 1.7;
}

@media (hover: hover) {
    .overview-card,
    .analysis-card,
    .advice-card,
    .summary-card,
    .intro-card,
    .fortune-item-card,
    .lucky-card,
    .monthly-card {
        transition: transform var(--duration-fast) var(--ease-out), box-shadow var(--duration-fast) var(--ease-out);
    }

    .overview-card:hover,
    .analysis-card:hover,
    .advice-card:hover,
    .summary-card:hover,
    .intro-card:hover,
    .fortune-item-card:hover,
    .lucky-card:hover,
    .monthly-card:hover {
        transform: translateY(-2px);
        box-shadow: 0 10px 24px rgba(10, 9, 8, 0.08);
    }
}

.back-to-top {
    position: fixed;
    right: 1.15rem;
    bottom: 1.15rem;
    width: 2.8rem;
    height: 2.8rem;
    border: 1px solid rgba(0, 0, 0, 0.12);
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.94);
    color: var(--ink-deep);
    font-size: 1.15rem;
    line-height: 1;
    box-shadow: 0 10px 24px rgba(10, 9, 8, 0.14);
    cursor: pointer;
    z-index: 160;
    opacity: 0;
    transform: translateY(8px);
    pointer-events: none;
    transition: opacity var(--duration-fast) var(--ease-out), transform var(--duration-fast) var(--ease-out), background-color var(--duration-fast) var(--ease-out), color var(--duration-fast) var(--ease-out);
}

.back-to-top:hover {
    background: var(--vermilion);
    color: #fff;
}

.back-to-top.is-visible {
    opacity: 1;
    transform: translateY(0);
    pointer-events: auto;
}

@media (max-width: 768px) {
    .logo-subtext {
        font-size: 0.62rem;
        letter-spacing: 0.13em;
    }

    .footer-quick-links {
        justify-content: flex-start;
    }

    .footer-chip {
        min-height: 2rem;
        font-size: 0.82rem;
    }

    .footer-seo-block {
        padding: var(--space-4);
    }

    .footer-seo-text {
        font-size: 0.88rem;
    }

    .footer-seo-nav {
        grid-template-columns: 1fr;
        gap: var(--space-3);
    }

    .site-footer {
        padding: var(--space-10) 0 var(--space-6);
    }
}

@media (max-width: 480px) {
    .container {
        padding: 0 var(--space-4);
    }

    .mystical-section,
    .intro-section,
    .summary-section {
        padding-block: var(--space-8);
    }

    .back-to-top {
        right: 0.85rem;
        bottom: 0.85rem;
    }
}

@media (prefers-reduced-motion: reduce) {
    .overview-card,
    .analysis-card,
    .advice-card,
    .summary-card,
    .intro-card,
    .fortune-item-card,
    .lucky-card,
    .monthly-card,
    .footer-chip,
    .back-to-top {
        transition: none !important;
    }
}

/* ===== Homepage Trust + SEO Blocks ===== */
.trust-strip-section {
    padding: 0 0 var(--space-5);
}

.trust-strip {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: var(--space-3);
}

.trust-strip-actions {
    margin-top: var(--space-4);
    display: flex;
    justify-content: center;
}

.form-proof {
    margin-top: 0.65rem;
    text-align: center;
    font-size: 0.84rem;
    color: var(--ink-light);
}

.conversion-path-section {
    padding: var(--space-6) 0;
}

.path-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: var(--space-4);
}

.path-card {
    background: var(--paper-snow);
    border: 1px solid rgba(0, 0, 0, 0.08);
    border-radius: var(--radius-lg);
    padding: var(--space-5);
}

.path-step {
    display: inline-flex;
    padding: 0.2rem 0.55rem;
    border-radius: 999px;
    background: var(--page-accent-soft);
    color: var(--page-accent-strong);
    font-size: 0.72rem;
    font-weight: 700;
    letter-spacing: 0.08em;
}

.path-title {
    margin: var(--space-3) 0 var(--space-2);
    font-family: var(--font-display);
    color: var(--ink-deep);
    font-size: 1.08rem;
}

.path-desc {
    color: var(--ink-medium);
    font-size: 0.9rem;
    line-height: 1.7;
}

.path-actions {
    margin-top: var(--space-5);
    display: flex;
    justify-content: center;
}

.decision-scenarios-section {
    padding: 0 0 var(--space-6);
}

.scenario-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: var(--space-4);
}

.scenario-card {
    display: flex;
    flex-direction: column;
    gap: 0.35rem;
    padding: var(--space-5);
    border-radius: var(--radius-lg);
    background: var(--paper-snow);
    border: 1px solid rgba(0, 0, 0, 0.08);
    text-decoration: none;
    transition: all var(--duration-fast) var(--ease-out);
}

.scenario-card:hover {
    transform: translateY(-2px);
    border-color: color-mix(in srgb, var(--page-accent) 30%, rgba(0, 0, 0, 0.1));
    box-shadow: var(--shadow-sm);
}

.scenario-label {
    font-family: var(--font-display);
    font-size: 1.02rem;
    color: var(--ink-deep);
}

.scenario-desc {
    color: var(--ink-medium);
    font-size: 0.88rem;
    line-height: 1.7;
}

.trust-item {
    padding: var(--space-4);
    background: rgba(255, 255, 255, 0.78);
    border: 1px solid rgba(0, 0, 0, 0.08);
    border-radius: var(--radius-md);
    display: flex;
    flex-direction: column;
    gap: 0.2rem;
}

.trust-item-title {
    font-weight: 700;
    color: var(--ink-deep);
    font-size: 0.95rem;
}

.trust-item-desc {
    color: var(--ink-medium);
    font-size: 0.84rem;
}

.methodology-section .section-header,
.faq-section .section-header {
    margin-bottom: var(--space-5);
}

.methodology-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: var(--space-4);
}

.method-card {
    padding: var(--space-5);
    background: var(--paper-snow);
    border: 1px solid rgba(0, 0, 0, 0.08);
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow-sm);
}

.method-card h3 {
    font-family: var(--font-display);
    font-size: 1.08rem;
    color: var(--ink-deep);
    margin-bottom: var(--space-2);
}

.method-card p {
    color: var(--ink-medium);
    line-height: 1.8;
    font-size: 0.92rem;
}

.method-list {
    margin: 0;
    padding-left: 1.1rem;
    color: var(--ink-medium);
    line-height: 1.8;
    font-size: 0.92rem;
}

.method-updated {
    margin-top: var(--space-3);
    font-size: 0.82rem;
    color: var(--ink-light);
}

.faq-section {
    padding-top: 0;
}

.faq-list {
    display: grid;
    gap: var(--space-3);
}

.faq-item {
    background: var(--paper-snow);
    border: 1px solid rgba(0, 0, 0, 0.08);
    border-radius: var(--radius-md);
    padding: 0.15rem var(--space-4);
}

.faq-item summary {
    list-style: none;
    cursor: pointer;
    font-weight: 700;
    color: var(--ink-deep);
    padding: var(--space-3) 1.5rem var(--space-3) 0;
    position: relative;
}

.faq-item summary::-webkit-details-marker {
    display: none;
}

.faq-item summary::after {
    content: '+';
    position: absolute;
    right: 0;
    top: 50%;
    transform: translateY(-50%);
    color: var(--vermilion-deep);
    font-size: 1.05rem;
}

.faq-item[open] summary::after {
    content: '−';
}

.faq-item p {
    color: var(--ink-medium);
    line-height: 1.75;
    font-size: 0.92rem;
    padding: 0 0 var(--space-3);
}

@media (max-width: 960px) {
    .trust-strip,
    .methodology-grid,
    .path-grid,
    .scenario-grid {
        grid-template-columns: 1fr;
    }
}

/* ===== 2026-03 Phase 3: Route-Aware Visual Theme ===== */
body {
    --page-accent: #c94043;
    --page-accent-strong: #a32f32;
    --page-accent-soft: rgba(201, 64, 67, 0.16);
    --page-accent-mist: rgba(201, 64, 67, 0.07);
}

body.page-home,
body.page-bazi,
body.page-huangli,
body.page-shengxiao,
body.page-xingzuo,
body.page-lifenumber,
body.page-qiming,
body.page-name-match,
body.page-hehun,
body.page-jiemeng,
body.page-methodology,
body.page-generic {
    --page-accent: #c94043;
    --page-accent-strong: #a32f32;
    --page-accent-soft: rgba(201, 64, 67, 0.18);
    --page-accent-mist: rgba(201, 64, 67, 0.08);
}

.scroll-progress {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 3px;
    transform: scaleX(0);
    transform-origin: left center;
    background: linear-gradient(90deg, var(--page-accent), var(--page-accent-strong));
    box-shadow: 0 1px 10px var(--page-accent-soft);
    z-index: 320;
    pointer-events: none;
}

.header-date-bar {
    background: linear-gradient(120deg, var(--page-accent) 0%, var(--page-accent-strong) 100%);
}

.main-content {
    background:
        radial-gradient(720px 320px at 8% -6%, var(--page-accent-mist) 0%, transparent 65%),
        radial-gradient(620px 280px at 96% -8%, rgba(201, 169, 98, 0.07) 0%, transparent 62%),
        transparent;
}

.site-header {
    border-bottom-color: rgba(0, 0, 0, 0.09);
}

.site-header.is-scrolled {
    border-bottom-color: color-mix(in srgb, var(--page-accent) 28%, rgba(0, 0, 0, 0.2));
}

.nav-group a.active {
    background: var(--page-accent-soft);
    color: var(--page-accent-strong);
}

.nav-group a::before {
    background: var(--page-accent);
}

.btn-primary {
    background: linear-gradient(135deg, var(--page-accent) 0%, var(--page-accent-strong) 100%);
    box-shadow: 0 6px 18px color-mix(in srgb, var(--page-accent) 36%, transparent);
}

.btn-primary:hover {
    box-shadow: 0 10px 22px color-mix(in srgb, var(--page-accent) 44%, transparent);
}

.form-card::before {
    background: linear-gradient(90deg, var(--page-accent), var(--gold), var(--page-accent));
}

.title-ornament {
    width: 72px;
    background: linear-gradient(90deg, color-mix(in srgb, var(--page-accent) 70%, #fff), var(--page-accent-strong));
}

.section-title {
    color: color-mix(in srgb, var(--ink-deep) 88%, var(--page-accent) 12%);
}

.hero-badge {
    background: var(--page-accent-soft);
    color: var(--page-accent-strong);
}

.hero-shortcut:hover,
.footer-chip:hover {
    border-color: color-mix(in srgb, var(--page-accent) 42%, transparent);
    background: color-mix(in srgb, var(--page-accent) 12%, #fff);
    color: var(--page-accent-strong);
}

.overview-icon,
.seal-icon,
.fortune-icon,
.person-icon,
.advice-icon {
    background: color-mix(in srgb, var(--page-accent) 16%, #fff);
    color: var(--page-accent-strong);
}

.mystical-card,
.overview-card,
.analysis-card,
.advice-card,
.summary-card,
.xiyongshen-card,
.xys-card,
.wuxing-analysis-card,
.stroke-analysis-card,
.overall-fortune-card,
.wuxing-detail-card,
.shensha-card,
.dayun-card,
.liunian-card,
.name-card,
.fortune-item-card,
.lucky-card,
.monthly-card {
    border-color: color-mix(in srgb, var(--page-accent) 14%, rgba(0, 0, 0, 0.08));
}

@media (max-width: 1023px) {
    .main-nav::before {
        color: color-mix(in srgb, var(--ink-deep) 74%, var(--page-accent) 26%);
    }

    .nav-group {
        border-color: color-mix(in srgb, var(--page-accent) 18%, rgba(0, 0, 0, 0.09));
    }
}

@media (max-width: 768px) {
    .scroll-progress {
        height: 2px;
    }

    .main-content {
        background:
            radial-gradient(520px 250px at 6% -8%, var(--page-accent-mist) 0%, transparent 68%),
            transparent;
    }
}

/* ===== Methodology Page ===== */
.method-page-hero .form-card {
    max-width: 860px;
}

.method-table-card {
    padding: var(--space-5);
}

.method-table-wrap {
    overflow-x: auto;
}

.method-table {
    width: 100%;
    border-collapse: collapse;
    min-width: 620px;
}

.method-table th,
.method-table td {
    text-align: left;
    padding: 0.75rem 0.85rem;
    border-bottom: 1px solid rgba(0, 0, 0, 0.08);
    color: var(--ink-medium);
    font-size: 0.9rem;
    line-height: 1.6;
}

.method-table th {
    color: var(--ink-deep);
    font-weight: 700;
    background: rgba(0, 0, 0, 0.03);
}

.analysis-card .method-note {
    margin-top: var(--space-3);
    font-size: 0.83rem;
    color: var(--ink-medium);
    line-height: 1.7;
}

.method-timeline {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: var(--space-4);
}

.method-step {
    padding: var(--space-5);
    border-radius: var(--radius-lg);
    border: 1px solid rgba(0, 0, 0, 0.08);
    background: var(--paper-snow);
    box-shadow: var(--shadow-sm);
}

.method-step h3 {
    margin-bottom: var(--space-2);
    font-family: var(--font-display);
    color: var(--ink-deep);
    font-size: 1.05rem;
}

.method-step p {
    color: var(--ink-medium);
    line-height: 1.75;
    font-size: 0.92rem;
}

@media (max-width: 960px) {
    .method-timeline {
        grid-template-columns: 1fr;
    }
}

/* ===== Jiemeng Unified Fortune Palette ===== */
.dream-fortune.fortune-great,
.fortune-badge.fortune-great {
    background: linear-gradient(135deg, #8f1f26, #c94043);
    color: #fff;
}

.dream-fortune.fortune-good,
.fortune-badge.fortune-good {
    background: linear-gradient(135deg, #ad2f35, #d2555b);
    color: #fff;
}

.dream-fortune.fortune-mild-good,
.fortune-badge.fortune-mild-good {
    background: linear-gradient(135deg, #c24a50, #de7378);
    color: #fff;
}

.dream-fortune.fortune-neutral,
.fortune-badge.fortune-neutral {
    background: linear-gradient(135deg, #8f5d5f, #b07e80);
    color: #fff;
}

.dream-fortune.fortune-mild-bad,
.fortune-badge.fortune-mild-bad {
    background: linear-gradient(135deg, #7a2227, #a2363d);
    color: #fff;
}

.dream-fortune.fortune-bad,
.fortune-badge.fortune-bad {
    background: linear-gradient(135deg, #5b161a, #7c1f25);
    color: #fff;
}

/* ===== Unified Status Palette (Site-wide) ===== */
:root {
    --status-excellent: #8f1f26;
    --status-good: #ad2f35;
    --status-neutral: #8f5d5f;
    --status-caution: #7a2227;
    --status-bad: #5b161a;
    --status-excellent-soft: rgba(143, 31, 38, 0.16);
    --status-good-soft: rgba(173, 47, 53, 0.14);
    --status-neutral-soft: rgba(143, 93, 95, 0.15);
    --status-caution-soft: rgba(122, 34, 39, 0.14);
    --status-bad-soft: rgba(91, 22, 26, 0.16);
}

.fortune-good {
    background: var(--status-good-soft);
    color: var(--status-good);
}

.fortune-half {
    background: var(--status-neutral-soft);
    color: var(--status-neutral);
}

.fortune-bad {
    background: var(--status-bad-soft);
    color: var(--status-bad);
}

.fortune-tag.fortune-good {
    background: var(--status-good-soft);
    color: var(--status-good);
    border: 1px solid rgba(173, 47, 53, 0.32);
}

.day-good-badge {
    background: var(--status-good);
}

.calendar-day.quality-excellent {
    border-left-color: var(--status-excellent);
}

.calendar-day.quality-good {
    border-left-color: var(--status-good);
}

.calendar-day.quality-neutral {
    border-left-color: var(--status-neutral);
}

.calendar-day.quality-caution {
    border-left-color: var(--status-caution);
}

.calendar-day.quality-bad {
    border-left-color: var(--status-bad);
}

.today-quality.quality-excellent {
    background: var(--status-excellent-soft);
}

.today-quality.quality-good {
    background: var(--status-good-soft);
}

.today-quality.quality-neutral {
    background: var(--status-neutral-soft);
}

.today-quality.quality-caution {
    background: var(--status-caution-soft);
}

.today-quality.quality-bad {
    background: var(--status-bad-soft);
}

.quality-excellent .quality-badge {
    color: var(--status-excellent);
}

.quality-good .quality-badge {
    color: var(--status-good);
}

.quality-neutral .quality-badge {
    color: var(--status-neutral);
}

.quality-caution .quality-badge {
    color: var(--status-caution);
}

.quality-bad .quality-badge {
    color: var(--status-bad);
}

.quality-excellent .quality-circle {
    border-color: var(--status-excellent);
    background: linear-gradient(135deg, #f6d6d8, #efb5b8);
}

.quality-excellent .quality-score {
    color: var(--status-excellent);
}

.quality-excellent .quality-level {
    background: var(--status-excellent);
    color: #fff;
}

.quality-good .quality-circle {
    border-color: var(--status-good);
    background: linear-gradient(135deg, #f8dde0, #f1c4c8);
}

.quality-good .quality-score {
    color: var(--status-good);
}

.quality-good .quality-level {
    background: var(--status-good);
    color: #fff;
}

.quality-neutral .quality-circle {
    border-color: var(--status-neutral);
    background: linear-gradient(135deg, #f2e0e1, #e7cfd1);
}

.quality-neutral .quality-score {
    color: var(--status-neutral);
}

.quality-neutral .quality-level {
    background: var(--status-neutral);
    color: #fff;
}

.quality-caution .quality-circle {
    border-color: var(--status-caution);
    background: linear-gradient(135deg, #efd3d6, #e6b8be);
}

.quality-caution .quality-score {
    color: var(--status-caution);
}

.quality-caution .quality-level {
    background: var(--status-caution);
    color: #fff;
}

.quality-bad .quality-circle {
    border-color: var(--status-bad);
    background: linear-gradient(135deg, #ecc3c8, #df9ea6);
}

.quality-bad .quality-score {
    color: var(--status-bad);
}

.quality-bad .quality-level {
    background: var(--status-bad);
    color: #fff;
}

.legend-dot.excellent {
    background: var(--status-excellent);
}

.legend-dot.good {
    background: var(--status-good);
}

.legend-dot.neutral {
    background: var(--status-neutral);
}

.legend-dot.caution {
    background: var(--status-caution);
}

.legend-dot.bad {
    background: var(--status-bad);
}

.shensha-dot.good {
    background: var(--status-good);
}

.shensha-dot.bad {
    background: var(--status-bad);
}

.shensha-tag.good {
    background: var(--status-good-soft);
    color: var(--status-good);
}

.shensha-tag.bad {
    background: var(--status-bad-soft);
    color: var(--status-bad);
}

.hour-good {
    border-color: var(--status-good);
    background: linear-gradient(135deg, #f8dde0, #f3cdd2);
}

.hour-neutral {
    border-color: var(--status-neutral);
    background: linear-gradient(135deg, #f2e0e1, #ead6d8);
}

.hour-bad {
    border-color: var(--status-bad);
    background: linear-gradient(135deg, #ecc3c8, #e3b0b7);
}

.hour-good .hour-quality {
    background: var(--status-good);
    color: #fff;
}

.hour-neutral .hour-quality {
    background: var(--status-neutral);
    color: #fff;
}

.hour-bad .hour-quality {
    background: var(--status-bad);
    color: #fff;
}

.yiji-yi .yiji-label {
    background: var(--status-good-soft);
    color: var(--status-good);
    border-color: var(--status-good);
}

.yiji-ji .yiji-label {
    background: var(--status-bad-soft);
    color: var(--status-bad);
    border-color: var(--status-bad);
}

.yiji-yi-section {
    border-left-color: var(--status-good);
}

.yiji-ji-section {
    border-left-color: var(--status-bad);
}

.yiji-icon.yi {
    background: var(--status-good);
}

.yiji-icon.ji {
    background: var(--status-bad);
}

.yiji-tag.yi {
    background: var(--status-good-soft);
    color: var(--status-good);
}

.yiji-tag.ji {
    background: var(--status-bad-soft);
    color: var(--status-bad);
}

.jianxing-吉 {
    color: var(--status-good);
}

.jianxing-平 {
    color: var(--status-neutral);
}

.jianxing-凶 {
    color: var(--status-bad);
}

.relation-good,
.relation-he,
.relation-sheng {
    border-color: rgba(173, 47, 53, 0.35);
    background: rgba(173, 47, 53, 0.08);
}

.relation-neutral {
    border-color: rgba(143, 93, 95, 0.35);
    background: rgba(143, 93, 95, 0.08);
}

.advice-good {
    background: rgba(173, 47, 53, 0.08);
    border-color: rgba(173, 47, 53, 0.3);
}

.traits-list.positive li::before {
    background: var(--status-good);
}

.final-priority-item.risk-low .final-priority-order {
    background: var(--status-good);
}

.zodiac-quick-card.grade-excellent {
    border-color: var(--status-excellent);
    background: linear-gradient(135deg, rgba(143, 31, 38, 0.08) 0%, var(--paper-snow) 100%);
}

.zodiac-quick-card.grade-excellent .zodiac-grade {
    background: rgba(143, 31, 38, 0.18);
    color: var(--status-excellent);
}

.zodiac-quick-card.grade-good {
    border-color: var(--status-good);
}

.zodiac-quick-card.grade-good .zodiac-grade {
    background: rgba(173, 47, 53, 0.18);
    color: var(--status-good);
}

.zodiac-quick-card.grade-average {
    border-color: var(--status-neutral);
}

.zodiac-quick-card.grade-average .zodiac-grade {
    background: rgba(143, 93, 95, 0.18);
    color: var(--status-neutral);
}

.zodiac-quick-card.grade-below {
    border-color: var(--status-caution);
}

.zodiac-quick-card.grade-below .zodiac-grade {
    background: rgba(122, 34, 39, 0.18);
    color: var(--status-caution);
}

.zodiac-quick-card.grade-poor {
    border-color: var(--status-bad);
}

.zodiac-quick-card.grade-poor .zodiac-grade {
    background: rgba(91, 22, 26, 0.2);
    color: var(--status-bad);
}

/* ===== Shengxiao Score Circle Alignment Fix ===== */
.fortune-score-display .score-circle {
    position: relative;
    width: 160px;
    height: 160px;
}

.fortune-score-display .score-circle svg {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
}

.fortune-score-display .score-circle .score-text {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    display: inline-flex;
    align-items: flex-end;
    justify-content: center;
    gap: 0.16rem;
    white-space: nowrap;
    line-height: 1;
    margin: 0;
}

.fortune-score-display .score-circle .score-text .score-number {
    line-height: 1;
}

.fortune-score-display .score-circle .score-text .score-label {
    line-height: 1;
    transform: translateY(-0.06em);
}

/* ===== Xingzuo Result UI Refresh ===== */
.xingzuo-result-page .zodiac-hero {
    position: relative;
    display: grid;
    grid-template-columns: 132px 1fr;
    gap: var(--space-5);
    align-items: center;
    padding: var(--space-6);
    border-radius: var(--radius-xl);
    border: 1px solid color-mix(in srgb, var(--page-accent) 28%, rgba(0, 0, 0, 0.1));
    background:
        radial-gradient(520px 240px at -2% -12%, var(--page-accent-mist) 0%, transparent 72%),
        linear-gradient(145deg, rgba(255, 255, 255, 0.92), rgba(255, 255, 255, 0.74));
    box-shadow: var(--shadow-md);
}

.xingzuo-result-page .hero-symbol {
    width: 132px;
    height: 132px;
    display: grid;
    place-items: center;
    font-size: 3.35rem;
    color: var(--page-accent-strong);
    border-radius: 32px;
    border: 1px solid color-mix(in srgb, var(--page-accent) 34%, rgba(0, 0, 0, 0.08));
    background: linear-gradient(145deg, color-mix(in srgb, var(--page-accent) 14%, #fff), #fff);
    box-shadow: 0 14px 30px color-mix(in srgb, var(--page-accent) 20%, transparent);
}

.xingzuo-result-page .hero-name {
    margin: 0;
    font-family: var(--font-display);
    font-size: clamp(1.9rem, 3.3vw, 2.6rem);
    color: var(--ink-black);
}

.xingzuo-result-page .hero-english {
    margin: 0.2rem 0 0;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--ink-faded);
    font-size: 0.9rem;
}

.xingzuo-result-page .hero-date {
    margin: 0.35rem 0 0.9rem;
    color: var(--ink-medium);
    font-size: 0.95rem;
}

.xingzuo-result-page .hero-tags {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
}

.xingzuo-result-page .hero-tags .tag {
    display: inline-flex;
    align-items: center;
    padding: 0.3rem 0.72rem;
    border-radius: 999px;
    background: color-mix(in srgb, var(--page-accent) 11%, #fff);
    border: 1px solid color-mix(in srgb, var(--page-accent) 24%, rgba(0, 0, 0, 0.06));
    color: var(--page-accent-strong);
    font-size: 0.82rem;
    line-height: 1;
}

.xingzuo-result-page .hero-actions {
    margin-top: 1rem;
    display: flex;
    flex-wrap: wrap;
    gap: 0.65rem;
}

.xingzuo-result-page .daily-fortune-card,
.xingzuo-result-page .monthly-fortune-card,
.xingzuo-result-page .personality-card {
    border-radius: var(--radius-xl);
    border: 1px solid rgba(0, 0, 0, 0.08);
    background: linear-gradient(145deg, rgba(255, 255, 255, 0.9), rgba(255, 255, 255, 0.74));
    box-shadow: var(--shadow-sm);
    padding: var(--space-5);
}

.xingzuo-result-page .fortune-meters {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 0.75rem;
}

.xingzuo-result-page .fortune-meter {
    padding: 0.85rem 0.95rem;
    border-radius: 14px;
    border: 1px solid rgba(0, 0, 0, 0.08);
    background: rgba(255, 255, 255, 0.82);
}

.xingzuo-result-page .meter-head {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 0.6rem;
    margin-bottom: 0.45rem;
}

.xingzuo-result-page .meter-label {
    font-size: 0.88rem;
    color: var(--ink-deep);
    font-weight: 700;
}

.xingzuo-result-page .meter-value {
    color: var(--page-accent-strong);
    font-family: var(--font-display);
    font-size: 0.85rem;
    font-weight: 700;
}

.xingzuo-result-page .meter-bar {
    height: 0.45rem;
    border-radius: 999px;
    background: rgba(0, 0, 0, 0.08);
    overflow: hidden;
}

.xingzuo-result-page .meter-bar-fill {
    display: block;
    height: 100%;
    border-radius: inherit;
    background: linear-gradient(90deg, var(--page-accent), color-mix(in srgb, var(--page-accent) 65%, #fff));
}

.xingzuo-result-page .meter-stars {
    margin-top: 0.45rem;
    display: inline-block;
    letter-spacing: 0.04em;
    color: var(--gold);
}

.xingzuo-result-page .daily-tip {
    margin-top: var(--space-4);
    padding: var(--space-4);
    border-radius: 14px;
    line-height: 1.8;
    color: var(--ink-deep);
    background: color-mix(in srgb, var(--page-accent) 7%, #fff);
    border: 1px solid color-mix(in srgb, var(--page-accent) 22%, rgba(0, 0, 0, 0.06));
}

.xingzuo-result-page .lucky-items {
    margin-top: var(--space-4);
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 0.75rem;
}

.xingzuo-result-page .lucky-item {
    padding: 0.8rem;
    border-radius: 12px;
    background: rgba(255, 255, 255, 0.9);
    border: 1px solid rgba(0, 0, 0, 0.08);
}

.xingzuo-result-page .lucky-label {
    display: block;
    color: var(--ink-faded);
    font-size: 0.8rem;
    margin-bottom: 0.2rem;
}

.xingzuo-result-page .lucky-value {
    color: var(--ink-black);
    font-size: 1rem;
    font-weight: 700;
}

.xingzuo-result-page .monthly-scores {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 0.9rem;
}

.xingzuo-result-page .monthly-scores .score-item {
    text-align: center;
}

.xingzuo-result-page .monthly-scores .score-circle {
    position: relative;
    width: 92px;
    height: 92px;
    margin: 0 auto 0.45rem;
    border-radius: 50%;
    display: grid;
    place-items: center;
    background: conic-gradient(var(--page-accent) calc(var(--percent) * 1%), rgba(0, 0, 0, 0.08) 0);
}

.xingzuo-result-page .monthly-scores .score-circle::before {
    content: '';
    position: absolute;
    inset: 7px;
    border-radius: 50%;
    background: #fff;
}

.xingzuo-result-page .monthly-scores .score-circle .score-value {
    position: relative;
    z-index: 1;
    font-family: var(--font-display);
    color: var(--ink-black);
    font-size: 1.2rem;
    line-height: 1;
}

.xingzuo-result-page .monthly-scores .score-circle .score-value small {
    margin-left: 0.08rem;
    font-size: 0.66rem;
    color: var(--ink-faded);
    font-weight: 600;
}

.xingzuo-result-page .important-days {
    margin-top: var(--space-4);
}

.xingzuo-result-page .important-days h4 {
    margin: 0 0 0.45rem;
    color: var(--ink-black);
}

.xingzuo-result-page .days-list {
    display: flex;
    flex-wrap: wrap;
    gap: 0.45rem;
}

.xingzuo-result-page .day-tag {
    padding: 0.24rem 0.58rem;
    border-radius: 999px;
    background: color-mix(in srgb, var(--page-accent) 12%, #fff);
    color: var(--page-accent-strong);
    border: 1px solid color-mix(in srgb, var(--page-accent) 24%, rgba(0, 0, 0, 0.08));
    font-size: 0.8rem;
}

.xingzuo-result-page .personality-traits,
.xingzuo-result-page .life-aspects {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 0.9rem;
    margin-top: var(--space-4);
}

.xingzuo-result-page .traits-section,
.xingzuo-result-page .aspect-card {
    padding: 1rem;
    border-radius: 14px;
    border: 1px solid rgba(0, 0, 0, 0.08);
    background: rgba(255, 255, 255, 0.86);
}

.xingzuo-result-page .traits-section h3,
.xingzuo-result-page .aspect-card h3 {
    margin: 0 0 0.55rem;
}

.xingzuo-result-page .traits-list {
    margin: 0;
    padding-left: 1.15rem;
    color: var(--ink-medium);
    line-height: 1.8;
}

.xingzuo-result-page .lucky-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 0.8rem;
}

.xingzuo-result-page .lucky-box {
    padding: 0.95rem;
    border-radius: 14px;
    border: 1px solid rgba(0, 0, 0, 0.08);
    background: rgba(255, 255, 255, 0.88);
    text-align: center;
}

.xingzuo-result-page .lucky-title {
    display: block;
    margin-top: 0.4rem;
    color: var(--ink-faded);
    font-size: 0.82rem;
}

.xingzuo-result-page .lucky-content {
    display: block;
    margin-top: 0.22rem;
    color: var(--ink-black);
    font-weight: 700;
}

@media (max-width: 1024px) {
    .xingzuo-result-page .monthly-scores {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

@media (max-width: 768px) {
    .xingzuo-result-page .zodiac-hero {
        grid-template-columns: 1fr;
        text-align: center;
        justify-items: center;
        padding: var(--space-5);
    }

    .xingzuo-result-page .hero-actions {
        justify-content: center;
    }

    .xingzuo-result-page .fortune-meters,
    .xingzuo-result-page .lucky-items,
    .xingzuo-result-page .monthly-scores,
    .xingzuo-result-page .personality-traits,
    .xingzuo-result-page .life-aspects,
    .xingzuo-result-page .lucky-grid {
        grid-template-columns: 1fr;
    }
}

.xingzuo-result-page .focus-switcher {
    display: inline-flex;
    align-items: center;
    gap: 0.45rem;
    padding: 0.35rem;
    border-radius: 999px;
    background: rgba(0, 0, 0, 0.06);
}

.xingzuo-result-page .focus-tab {
    border: 0;
    border-radius: 999px;
    padding: 0.46rem 1rem;
    background: transparent;
    color: var(--ink-medium);
    font-size: 0.88rem;
    font-weight: 700;
    cursor: pointer;
}

.xingzuo-result-page .focus-tab.is-active {
    background: linear-gradient(135deg, var(--page-accent), var(--page-accent-strong));
    color: #fff;
    box-shadow: 0 8px 18px color-mix(in srgb, var(--page-accent) 32%, transparent);
}

.xingzuo-result-page.js-focus-tabs .xingzuo-focus-panel {
    display: none;
}

.xingzuo-result-page.js-focus-tabs .xingzuo-focus-panel.is-active {
    display: block;
}

@media (max-width: 768px) {
    .xingzuo-result-page .focus-switcher {
        width: 100%;
        justify-content: center;
    }

    .xingzuo-result-page .focus-tab {
        flex: 1;
        min-width: 0;
        text-align: center;
    }
}

/* ===== HUANGLI RESULT UI REFRESH 20260302 BEGIN ===== */
.huangli-hero {
    padding: clamp(1.4rem, 3.2vw, 2.6rem) 0 clamp(1rem, 2.2vw, 1.8rem);
    background:
        radial-gradient(circle at 88% 18%, rgba(201, 64, 67, 0.16) 0%, rgba(201, 64, 67, 0) 42%),
        radial-gradient(circle at 8% 95%, rgba(146, 28, 33, 0.12) 0%, rgba(146, 28, 33, 0) 36%),
        linear-gradient(145deg, #fffaf7 0%, #fff1ef 46%, #fffdfa 100%);
    border-bottom: 1px solid rgba(201, 64, 67, 0.16);
}

.huangli-hero .hero-bg-effects {
    opacity: 0.08;
}

.huangli-hero .bagua-symbol {
    right: 4%;
    width: 170px;
    height: 170px;
    opacity: 0.55;
}

.huangli-hero .hero-content {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    gap: clamp(1rem, 2.2vw, 1.8rem);
    align-items: stretch;
}

.huangli-date-display {
    padding: clamp(1rem, 2.5vw, 1.35rem);
    border-radius: 16px;
    border: 1px solid rgba(201, 64, 67, 0.22);
    border-top: 4px solid var(--vermilion);
    background: linear-gradient(180deg, rgba(255, 255, 255, 0.97) 0%, rgba(255, 245, 241, 0.92) 100%);
    box-shadow: 0 16px 30px rgba(39, 24, 22, 0.08);
}

.huangli-hero .solar-date {
    align-items: center;
    gap: 0.65rem 0.8rem;
    margin-bottom: 0.45rem;
}

.huangli-hero .date-year {
    font-size: 0.95rem;
    letter-spacing: 0.05em;
}

.huangli-hero .date-main {
    font-size: clamp(2rem, 4.8vw, 3.1rem);
    line-height: 1.06;
    color: #9b2c2f;
    text-shadow: 0 1px 0 rgba(255, 255, 255, 0.7);
}

.huangli-hero .date-weekday {
    font-size: 0.9rem;
    border: 1px solid rgba(201, 64, 67, 0.2);
    background: rgba(201, 64, 67, 0.08);
    color: #882224;
}

.huangli-hero .lunar-main {
    font-size: clamp(1.28rem, 2.5vw, 1.75rem);
    letter-spacing: 0.03em;
}

.day-quality-display {
    min-width: 120px;
    justify-content: center;
    gap: 0.55rem;
    padding: 0.55rem 0.4rem;
    border-radius: 14px;
    background: rgba(255, 255, 255, 0.72);
    border: 1px solid rgba(201, 64, 67, 0.16);
}

.quality-circle {
    width: 110px;
    height: 110px;
    border-width: 4px;
    box-shadow: 0 10px 22px rgba(39, 24, 22, 0.13);
}

.quality-score {
    font-size: 2.2rem;
}

.quality-level {
    min-width: 5.3rem;
    text-align: center;
    letter-spacing: 0.04em;
}

.huangli-ganzi-card,
.yiji-section,
.shensha-section,
.jianxing-detail-card,
.xiu28-card,
.jieqi-card,
.shengxiao-cta,
.summary-section .final-review-card {
    border-color: rgba(201, 64, 67, 0.2);
    box-shadow: 0 10px 24px rgba(27, 21, 18, 0.06);
}

.ganzi-main {
    gap: clamp(0.55rem, 1.5vw, 1.1rem);
    margin-bottom: 1rem;
}

.ganzi-pillar {
    min-width: 95px;
    border: 1px solid rgba(0, 0, 0, 0.06);
    background: linear-gradient(180deg, rgba(255, 255, 255, 0.94) 0%, rgba(248, 243, 236, 0.82) 100%);
}

.ganzi-extra {
    gap: 0.85rem 1.05rem;
    justify-content: space-between;
}

.extra-item {
    padding: 0.45rem 0.65rem;
    border-radius: 10px;
    background: rgba(201, 64, 67, 0.06);
}

.yiji-display,
.shensha-display {
    gap: clamp(0.75rem, 1.8vw, 1.2rem);
}

.yiji-header h3,
.shensha-section h3 {
    letter-spacing: 0.02em;
}

.yiji-tag,
.shensha-tag {
    padding: 0.34rem 0.72rem;
    border-radius: 999px;
    font-weight: 600;
    letter-spacing: 0.01em;
    border: 1px solid transparent;
}

.yiji-tag.yi,
.shensha-tag.good {
    border-color: rgba(45, 106, 79, 0.26);
}

.yiji-tag.ji,
.shensha-tag.bad {
    border-color: rgba(201, 64, 67, 0.26);
}

.hours-grid {
    grid-template-columns: repeat(6, minmax(0, 1fr));
    gap: 0.7rem;
}

.hour-card {
    min-height: 126px;
    border-width: 1.5px;
    padding: 0.52rem 0.45rem;
    display: flex;
    flex-direction: column;
    justify-content: center;
    gap: 0.1rem;
    transition: transform 0.2s ease, box-shadow 0.2s ease, border-color 0.2s ease;
}

.hour-card:hover {
    transform: translateY(-2px);
    box-shadow: 0 8px 18px rgba(22, 18, 16, 0.1);
}

.hour-time {
    font-size: 0.72rem;
    font-weight: 600;
    letter-spacing: 0.02em;
}

.hour-ganzi {
    font-size: 1.06rem;
}

.hour-zhi {
    font-size: 0.84rem;
}

.hour-quality {
    margin-top: 0.22rem;
    min-width: 2.7rem;
}

.hour-special {
    margin-top: 0.25rem;
    line-height: 1.25;
}

.jianxing-detail-card,
.xiu28-card,
.jieqi-card {
    padding: clamp(1rem, 2.4vw, 1.5rem);
}

.jianxing-big {
    font-size: clamp(3rem, 7.2vw, 4.4rem);
}

.jianxing-meaning {
    max-width: 620px;
}

.jianxing-meaning p {
    line-height: 1.85;
}

.xiu28-main {
    gap: 0.6rem;
    margin-bottom: 0.8rem;
    flex-wrap: wrap;
}

.xiu28-name {
    font-size: clamp(1.8rem, 3.8vw, 2.35rem);
    color: #9b2c2f;
}

.xiu28-wuxing,
.xiu28-animal {
    border: 1px solid rgba(201, 64, 67, 0.2);
    background: rgba(201, 64, 67, 0.08);
}

.jieqi-card {
    gap: clamp(1.2rem, 2.5vw, 2rem);
    align-items: center;
}

.jieqi-current,
.jieqi-next {
    padding: 0.25rem 0.6rem;
}

.jieqi-name {
    color: #9b2c2f;
}

.shengxiao-cta {
    background: linear-gradient(120deg, rgba(201, 64, 67, 0.12) 0%, #fff 52%, rgba(243, 236, 224, 0.8) 100%);
}

.shengxiao-cta-content {
    gap: clamp(0.9rem, 2vw, 1.35rem);
}

.shengxiao-cta-icon {
    width: 64px;
    height: 64px;
    box-shadow: 0 8px 18px rgba(201, 64, 67, 0.28);
}

.date-nav {
    flex-wrap: wrap;
    gap: 0.72rem;
}

.date-nav-btn {
    min-height: 44px;
    padding: 0.58rem 1.15rem;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 0.95rem;
    font-weight: 600;
    transition: background-color 0.18s ease, color 0.18s ease, border-color 0.18s ease, box-shadow 0.18s ease, transform 0.18s ease;
}

.date-nav-btn:hover {
    transform: translateY(-1px);
}

.date-nav-btn:focus-visible,
.shengxiao-cta .btn:focus-visible,
.summary-section .btn:focus-visible {
    outline: 2px solid var(--vermilion);
    outline-offset: 2px;
    box-shadow: 0 0 0 4px rgba(201, 64, 67, 0.2);
}

.summary-section .summary-title {
    letter-spacing: 0.03em;
}

.summary-section .summary-text {
    line-height: 1.9;
}

@media (max-width: 1024px) {
    .huangli-hero .hero-content {
        grid-template-columns: minmax(0, 1fr) 140px;
    }

    .hours-grid {
        grid-template-columns: repeat(4, minmax(0, 1fr));
    }
}

@media (max-width: 768px) {
    .huangli-hero {
        padding-top: 1.05rem;
    }

    .huangli-hero .bagua-symbol {
        width: 138px;
        height: 138px;
        right: -18px;
        opacity: 0.32;
    }

    .huangli-hero .hero-content {
        grid-template-columns: 1fr;
    }

    .day-quality-display {
        width: 100%;
        max-width: 260px;
        margin: 0 auto;
    }

    .quality-circle {
        width: 94px;
        height: 94px;
    }

    .quality-score {
        font-size: 1.8rem;
    }

    .ganzi-extra {
        justify-content: center;
    }

    .hours-grid {
        grid-template-columns: repeat(3, minmax(0, 1fr));
    }

    .hour-card {
        min-height: 116px;
    }

    .date-nav-btn {
        flex: 1 1 100%;
    }

    .jieqi-card {
        flex-direction: column;
        text-align: center;
    }
}

@media (max-width: 560px) {
    .huangli-date-display {
        border-radius: 13px;
    }

    .huangli-hero .date-main {
        font-size: clamp(1.68rem, 8.8vw, 2.1rem);
    }

    .huangli-hero .lunar-main {
        font-size: 1.18rem;
    }

    .hours-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 0.55rem;
    }

    .hour-card {
        min-height: 108px;
    }

    .yiji-section,
    .shensha-section,
    .jianxing-detail-card,
    .xiu28-card,
    .jieqi-card,
    .shengxiao-cta {
        padding: 0.95rem;
    }
}
/* ===== HUANGLI RESULT UI REFRESH 20260302 END ===== */

/* ===== HUANGLI GANZI MAIN CONTRAST FIX 20260302 ===== */
.huangli-ganzi-card .ganzi-pillar.ganzi-pillar-main {
    background: linear-gradient(135deg, #b53136, #d44950);
    border: 1px solid rgba(133, 20, 24, 0.45);
    box-shadow: 0 8px 16px rgba(160, 45, 50, 0.22);
}

.huangli-ganzi-card .ganzi-pillar.ganzi-pillar-main .pillar-label,
.huangli-ganzi-card .ganzi-pillar.ganzi-pillar-main .pillar-value {
    color: #ffffff;
}

.huangli-ganzi-card .ganzi-pillar.ganzi-pillar-main .pillar-nayin {
    color: rgba(255, 255, 255, 0.96);
    background: rgba(0, 0, 0, 0.22);
}

/* ===== BAZI GLOSSARY UPGRADE 20260302 ===== */
.bazi-glossary-section {
    background: linear-gradient(180deg, #f8f1e8 0%, #fffaf5 100%);
}

.bazi-glossary-intro {
    max-width: 920px;
    margin: 0 auto;
    color: var(--ink-medium);
    line-height: 1.9;
    font-size: 1rem;
}

.bazi-glossary-quick {
    margin-top: var(--space-5);
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: var(--space-3);
}

.bazi-glossary-quick-card {
    background: var(--paper-snow);
    border: 1px solid rgba(201, 64, 67, 0.16);
    border-radius: var(--radius-md);
    padding: var(--space-4);
    box-shadow: 0 6px 18px rgba(30, 24, 20, 0.06);
}

.bazi-glossary-quick-card h3 {
    margin: 0 0 0.35rem;
    color: var(--ink-deep);
    font-family: var(--font-display);
    font-size: 1.05rem;
}

.bazi-glossary-quick-card p {
    margin: 0;
    color: var(--ink-medium);
    line-height: 1.8;
    font-size: 0.92rem;
}

.bazi-glossary-details {
    margin-top: var(--space-5);
    border: 1px solid rgba(201, 64, 67, 0.2);
    border-radius: var(--radius-lg);
    background: var(--paper-snow);
    overflow: hidden;
}

.bazi-glossary-details > summary {
    list-style: none;
    cursor: pointer;
    padding: 0.95rem 1rem;
    font-family: var(--font-display);
    color: var(--ink-deep);
    background: linear-gradient(180deg, rgba(201, 64, 67, 0.1) 0%, rgba(201, 64, 67, 0.03) 100%);
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.75rem;
}

.bazi-glossary-details > summary::-webkit-details-marker {
    display: none;
}

.bazi-glossary-details > summary::after {
    content: '展開';
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 3.4rem;
    padding: 0.22rem 0.5rem;
    border-radius: 999px;
    background: rgba(201, 64, 67, 0.16);
    color: #97272c;
    font-size: 0.8rem;
    font-family: var(--font-classical);
}

.bazi-glossary-details[open] > summary::after {
    content: '收合';
}

.bazi-glossary-details > summary:focus-visible {
    outline: 2px solid var(--vermilion);
    outline-offset: -2px;
}

.bazi-glossary-grid {
    padding: 1rem;
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 1rem;
}

.bazi-glossary-group {
    border: 1px solid rgba(0, 0, 0, 0.08);
    border-radius: 0.85rem;
    padding: 0.85rem;
    background: linear-gradient(180deg, #fff 0%, #fff8f2 100%);
}

.bazi-glossary-group h3 {
    margin: 0 0 0.7rem;
    color: var(--ink-deep);
    font-family: var(--font-display);
    font-size: 1.02rem;
    letter-spacing: 0.03em;
}

.bazi-glossary-list {
    list-style: none;
    margin: 0;
    padding: 0;
    display: grid;
    gap: 0.45rem;
}

.bazi-glossary-item {
    display: grid;
    grid-template-columns: 2rem 3.5rem 1fr;
    align-items: center;
    gap: 0.55rem;
    padding: 0.45rem 0.55rem;
    border: 1px solid rgba(0, 0, 0, 0.08);
    border-radius: 0.7rem;
    background: #fff;
}

.bazi-char {
    width: 2rem;
    height: 2rem;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: 0.52rem;
    font-family: var(--font-display);
    font-size: 1.2rem;
    font-weight: 700;
    color: var(--ink-deep);
    background: rgba(0, 0, 0, 0.05);
}

.bazi-meta {
    color: var(--ink-medium);
    font-size: 0.82rem;
    letter-spacing: 0.02em;
}

.bazi-desc {
    color: var(--ink-deep);
    line-height: 1.62;
    font-size: 0.88rem;
}

.bazi-glossary-item.is-wood .bazi-char {
    color: #2f6a4d;
    background: rgba(47, 106, 77, 0.15);
}

.bazi-glossary-item.is-fire .bazi-char {
    color: #a52a2f;
    background: rgba(201, 64, 67, 0.14);
}

.bazi-glossary-item.is-earth .bazi-char {
    color: #8f6a2f;
    background: rgba(198, 150, 68, 0.2);
}

.bazi-glossary-item.is-metal .bazi-char {
    color: #5a5f68;
    background: rgba(108, 118, 137, 0.16);
}

.bazi-glossary-item.is-water .bazi-char {
    color: #2a577e;
    background: rgba(62, 119, 173, 0.15);
}

@media (max-width: 980px) {
    .bazi-glossary-quick {
        grid-template-columns: 1fr;
    }

    .bazi-glossary-grid {
        grid-template-columns: 1fr;
    }
}

@media (max-width: 640px) {
    .bazi-glossary-intro {
        font-size: 0.95rem;
    }

    .bazi-glossary-item {
        grid-template-columns: 1.8rem 3rem 1fr;
        gap: 0.45rem;
        padding: 0.42rem 0.48rem;
    }

    .bazi-char {
        width: 1.8rem;
        height: 1.8rem;
        font-size: 1.06rem;
    }

    .bazi-desc {
        font-size: 0.84rem;
    }
}