/* ====== Root Variables ====== */
        :root {
            --nav-primary-bg: #8e2323; 
            --nav-primary-bg-darker: #6a1a1a; 
            --nav-accent-color: #d4a76a; 
            --nav-text-color: #ffffff; 
            --nav-height: 70px;
            
            --content-bg: #ffffff; 
            --light-bg: #f8f9fa; 
            --text-color: #333; 
            --light-text: #666; 
            --medium-text: #555; 
            --heading-color: var(--nav-primary-bg); 
            --accent-border: var(--nav-accent-color); 
            --input-border: var(--nav-accent-color); 
            --button-bg: var(--nav-primary-bg); 
            --button-hover-bg: var(--nav-primary-bg-darker); 
            --border-color-light: #eee; 
            --result-section-border: var(--nav-primary-bg); 
            --box-bg: #f9f9f9; 
            --box-border: var(--nav-accent-color);
            
            --good-color: #2e7d32;   
            --bad-color: #c62828;   
            --neutral-color: #ff8f00;  
            --good-bg: #e8f5e9;  
            --bad-bg: #ffebee; 
            --neutral-bg: #fff8e1;
            
            --wood-bg: #eafaea; 
            --wood-text: #2e7d32; 
            --wood-border: #a5d6a7;
            --fire-bg: #fff0f0; 
            --fire-text: #c62828; 
            --fire-border: #ef9a9a;
            --earth-bg: #f5f3f2; 
            --earth-text: #6d4c41; 
            --earth-border: #d7ccc8;
            --metal-bg: #f0f2f9; 
            --metal-text: #283593; 
            --metal-border: #9fa8da;
            --water-bg: #eef7ff; 
            --water-text: #1565c0; 
            --water-border: #90caf9;
         }
         
        /* ====== Global Styles ====== */
        * { box-sizing: border-box; margin: 0; padding: 0; }
        html { scroll-behavior: smooth; }
        body { font-family: 'Microsoft YaHei', '微软雅黑', sans-serif; background-color: var(--light-bg); color: var(--text-color); line-height: 1.7; padding-top: var(--nav-height); }
        a { color: var(--button-bg); text-decoration: none; } a:hover { color: var(--nav-accent-color); }
        .container { background-color: var(--content-bg); border-radius: 10px; box-shadow: 0 4px 15px rgba(0,0,0,0.08); padding: 25px 35px; margin: 30px auto; max-width: 900px; border: 1px solid var(--border-color-light); }

        /* ====== 导航栏样式 ====== */
        .navbar {
            background: linear-gradient(135deg, var(--nav-primary-bg), var(--nav-primary-bg-darker));
            height: var(--nav-height);
            display: flex;
            justify-content: center;
            align-items: center;
            font-size: 1.1rem;
            position: fixed;
            width: 100%;
            top: 0;
            z-index: 999;
            box-shadow: 0 2px 10px rgba(0,0,0,0.2);
        }

        .navbar-container {
            display: flex;
            justify-content: space-between;
            align-items: center;
            height: var(--nav-height);
            z-index: 1;
            width: 100%;
            max-width: 1200px;
            padding: 0 24px;
            margin: 0 auto;
        }

        .navbar-logo {
            color: var(--nav-text-color);
            display: flex;
            align-items: center;
            text-decoration: none;
            font-size: 1.4rem;
            font-weight: bold;
            letter-spacing: 0.5px;
            transition: all 0.3s ease;
            white-space: nowrap;
        }

        .navbar-logo:hover {
            color: var(--nav-accent-color);
            transform: scale(1.02);
        }

        .menu-icon {
            display: none;
            color: var(--nav-text-color);
            font-size: 1.8rem;
            cursor: pointer;
        }

        .nav-menu {
            display: flex;
            align-items: center;
            list-style: none;
            text-align: center;
            margin: 0;
            padding: 0;
        }

        .nav-item {
            height: var(--nav-height);
        }

        .nav-link {
            color: var(--nav-text-color);
            display: flex;
            align-items: center;
            text-decoration: none;
            padding: 0 1rem;
            height: 100%;
            transition: all 0.3s ease;
            position: relative;
            font-size: 0.95rem;
            white-space: nowrap;
        }

        .nav-link:hover {
            color: var(--nav-accent-color);
        }

        .nav-link::after {
            content: '';
            position: absolute;
            bottom: 15px;
            left: 50%;
            transform: translateX(-50%);
            width: 0;
            height: 2px;
            background-color: var(--nav-accent-color);
            transition: width 0.3s ease;
        }

        .nav-link:hover::after, .nav-link.active::after {
            width: 60%;
        }

        @media (max-width: 960px) {
            .navbar-container {
                padding: 0 15px;
                max-width: 100%;
            }
            
            .menu-icon {
                display: block;
                position: absolute;
                right: 20px;
                top: 50%;
                transform: translateY(-50%);
            }
            
            .nav-menu {
                display: none;
                flex-direction: column;
                width: 100%;
                height: auto;
                position: absolute;
                top: var(--nav-height);
                left: -100%;
                opacity: 0;
                transition: all 0.5s ease;
                background: linear-gradient(135deg, var(--nav-primary-bg-darker), var(--nav-primary-bg));
                padding: 10px 0;
                z-index: 998;
                box-shadow: 0 5px 10px rgba(0,0,0,0.2);
                border-top: 1px solid rgba(255, 255, 255, 0.1);
            }
            
            .nav-menu.active {
                display: flex;
                left: 0;
                opacity: 1;
            }
            
            .nav-item {
                width: 100%;
                height: auto;
                border-bottom: 1px solid rgba(255, 255, 255, 0.1);
            }
            
            .nav-item:last-child {
                border-bottom: none;
            }
            
            .nav-link {
                padding: 0.8rem 1.5rem;
                width: 100%;
                display: block;
                font-size: 1rem;
                height: auto;
                text-align: center;
            }
            
            .nav-link:hover {
                background-color: rgba(0,0,0, 0.1);
                color: var(--nav-accent-color);
            }
            
            .nav-link::after {
                display: none;
            }
        }

        /* ====== 内容样式 ====== */
        h1, h2, h3 { color: var(--heading-color); text-align: center; }
        h1 { font-size: 2rem; border-bottom: 2px solid var(--accent-border); padding-bottom: 12px; margin-bottom: 10px; font-weight: 700; }
        h2 { font-size: 1.6rem; border-bottom: 1px solid var(--accent-border); padding-bottom: 8px; margin-top: 30px; margin-bottom: 20px; font-weight: 600; }
        h3 { font-size: 1.2em; border-bottom: 1px dotted var(--accent-border); text-align: left; color: var(--nav-primary-bg-darker); margin-top: 20px; margin-bottom: 15px; font-weight: 600; }
        h4 { font-size: 1.1em; text-align: left; color: var(--medium-text); margin-top: 15px; margin-bottom: 8px; font-weight: bold; border-bottom: none; }
        h3 i, h4 i { margin-right: 8px; opacity: 0.7; }
        .title-desc { text-align: center; color: var(--light-text); margin-top: -5px; margin-bottom: 30px; font-size: 1em; }
        .form-group { margin-bottom: 25px; }
        label { display: block; margin-bottom: 8px; font-weight: bold; color: var(--medium-text); }
        input[type="text"] { width: 100%; padding: 12px 15px; border: 1px solid var(--input-border); border-radius: 6px; font-size: 16px; transition: border-color 0.3s, box-shadow 0.3s; height: 48px; box-sizing: border-box; }
        input[type="text"]:focus { border-color: var(--button-bg); box-shadow: 0 0 0 3px rgba(142, 35, 35, 0.15); outline: none; }
        button { background-color: var(--button-bg); color: white; border: none; padding: 12px 30px; border-radius: 6px; cursor: pointer; font-size: 16px; display: block; margin: 25px auto; transition: all 0.3s ease; font-weight: bold; height: 48px; }
        button:hover { background-color: var(--button-hover-bg); transform: translateY(-2px); box-shadow: 0 4px 8px rgba(0,0,0,0.1);}
        .error-message { color: var(--bad-color); text-align: center; font-weight: bold; background-color: var(--bad-bg); padding: 12px; border-radius: 5px; border: 1px solid #ef9a9a; margin: 20px 0; }
        .result-section { margin-top: 35px; border-top: 3px solid var(--result-section-border); padding-top: 25px; animation: fadeIn 0.5s ease-out; }
        @keyframes fadeIn {from {opacity: 0;} to {opacity: 1;}}
        .analysis-box { background-color: var(--box-bg); padding: 20px 25px; border-radius: 8px; margin: 25px 0; border: 1px solid var(--border-color-light); border-left: 5px solid var(--box-border); box-shadow: 0 2px 5px rgba(0,0,0,0.04); }
        .analysis-box h3 { margin-top: 0; margin-bottom: 15px; }
        .analysis-box p { margin-bottom: 10px; line-height: 1.7; font-size: 1em; }
        .analysis-box small { font-size: 0.85em; color: var(--light-text); }

        /* Text Status colors */
        .good-text { color: var(--good-color); font-weight: bold; }
        .bad-text { color: var(--bad-color); font-weight: bold; }
        .neutral-text { color: var(--neutral-color); font-weight: bold; }

        /* Specific Box Styling */
        .wuxing-analysis { background-color: var(--earth-bg); border-left-color: var(--earth-text); }
        .wuxing-analysis h3, .wuxing-analysis h4 { color: var(--earth-text); }
        .wuxing-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(100px, 1fr)); gap: 15px; margin: 18px 0; }
        .wuxing-item { text-align: center; padding: 15px 10px; border-radius: 6px; box-shadow: 0 2px 6px rgba(0,0,0,0.07); transition: transform 0.2s ease-out; border: 1px solid; }
        .wuxing-item:hover { transform: translateY(-3px); }
        .wuxing-item h3 { margin: 0 0 10px 0; font-size: 1.2em; border-bottom: none; text-align: center; font-weight: bold; color: inherit; }
        .wuxing-item p { margin: 5px 0; font-size: 0.9em; }
        .wuxing-item p strong { font-size: 1.2em; }
        .wuxing-item p[style*="height"], .wuxing-item p[style*="min-height"] { font-size: 0.8em; font-style: italic; color: var(--medium-text); min-height: 1.2em; }
        .wood { background-color: var(--wood-bg); color: var(--wood-text); border-color: var(--wood-border); } 
        .fire { background-color: var(--fire-bg); color: var(--fire-text); border-color: var(--fire-border); } 
        .earth { background-color: var(--earth-bg); color: var(--earth-text); border-color: var(--earth-border); } 
        .metal { background-color: var(--metal-bg); color: var(--metal-text); border-color: var(--metal-border); } 
        .water { background-color: var(--water-bg); color: var(--water-text); border-color: var(--water-border); }

        /* Digit Analysis Box */
        .digit-analysis { background-color: #f0f4f8; border-left-color: #5e7c9e; }
        .digit-analysis h3, .digit-analysis h4 { color: #3b597a;}
        .number-rows-container {
            margin: 20px 0;
            display: flex;
            flex-wrap: wrap;
            justify-content: flex-start;
            gap: 12px;
        }

        .number-row {
            display: contents;
        }

        .number-card {
            padding: 12px 8px;
            text-align: center;
            border-radius: 6px;
            box-shadow: 0 2px 6px rgba(0,0,0,0.07);
            font-size: 14px;
            display: flex;
            flex-direction: column;
            justify-content: space-between;
            min-height: 150px;
            border: 1px solid;
            transition: transform 0.2s ease-out, box-shadow 0.2s ease-out;
            flex: 0 0 calc((100% - 6 * 12px) / 7);
            min-width: 80px;
            max-width: 120px;
        }

        .number-card:hover { 
            transform: translateY(-3px); 
            box-shadow: 0 4px 10px rgba(0,0,0,0.1); 
        }

        .number-card h3 { 
            margin: 5px 0 8px 0; 
            border-bottom: none; 
            text-align: center; 
            font-size: 2.2em; 
            color: inherit; 
            font-weight: bold; 
        }

        .number-card p { 
            margin: 4px 0; 
            font-size: 0.9em; 
        }

        .number-card p span { 
            padding: 3px 7px; 
            border-radius: 10px; 
            background-color: rgba(255,255,255,0.6); 
            font-weight: bold; 
            font-size: 0.9em;
        }

        .number-card p small { 
            font-size: 0.85em; 
            color: var(--medium-text); 
            font-style: italic; 
        }

        .number-card > small { 
            font-size: 0.8em; 
            color: var(--light-text); 
            margin-top: auto; 
            padding-top: 5px; 
            word-wrap: break-word; 
        }

        /* 响应式调整 */
        @media (max-width: 1024px) {
            .number-card {
                flex: 0 0 calc((100% - 5 * 12px) / 6);
                min-width: 75px;
            }
        }

        @media (max-width: 768px) {
            .number-card {
                flex: 0 0 calc((100% - 4 * 12px) / 5);
                min-width: 70px;
                min-height: 140px;
                font-size: 13px;
            }
            
            .number-card h3 { 
                font-size: 2em; 
            }
            
            .number-rows-container {
                gap: 10px;
            }
        }

        @media (max-width: 600px) {
            .number-card {
                flex: 0 0 calc((100% - 3 * 10px) / 4);
                min-width: 65px;
                min-height: 130px;
                font-size: 12px;
            }
            
            .number-card h3 { 
                font-size: 1.8em; 
            }
            
            .number-rows-container {
                gap: 8px;
            }
        }

        @media (max-width: 480px) {
            .number-card {
                flex: 0 0 calc((100% - 2 * 8px) / 3);
                min-width: 60px;
                min-height: 120px;
                font-size: 11px;
            }
            
            .number-card h3 { 
                font-size: 1.6em; 
            }
            
            .number-rows-container {
                gap: 6px;
            }
        }

        /* Luck Colors */
        .very-good { background-color: var(--good-bg); color: var(--good-color); border-color: #a5d6a7; } 
        .good { background-color: var(--water-bg); color: var(--water-text); border-color: var(--water-border); } 
        .neutral { background-color: var(--neutral-bg); color: var(--neutral-color); border-color: #ffcc80; } 
        .bad { background-color: var(--bad-bg); color: var(--bad-color); border-color: #ef9a9a; }

        /* Luck Summary Styles */
        .digit-luck-summary { margin-top: 20px; }
        .digit-luck-summary p { font-size: 1em; text-align: center; }
        .digit-luck-summary span { margin: 0 5px; padding: 2px 5px; border-radius: 4px; }
        .digit-luck-summary span.good-text { background-color: var(--good-bg);}
        .digit-luck-summary span.neutral-text { background-color: var(--neutral-bg); }
        .digit-luck-summary span.bad-text { background-color: var(--bad-bg); }
        .digit-analysis p[class*="-text"] { margin-top: 10px; font-size: 1.05em; padding: 3px 8px; border-radius: 4个体; display: inline-block; text-align: center;}
        .digit-analysis p.good-text { background-color: var(--good-bg); }
        .digit-analysis p[style*="--water-text"] { background-color: var(--water-bg); color: var(--water-text); } /* Specific style for blue Good */
        .digit-analysis p.neutral-text { background-color: var(--neutral-bg); }
        .digit-analysis p.bad-text { background-color: var(--bad-bg); }

        /* Score Box Styles */
        .score-rating-box { background-color:#fff8e1; border-left-color:#ffc107; }
        .score-rating-box h3 { color:#b08900; }
        .score-bar { height: 28px; background-color: #e0e0e0; border-radius: 14px; margin: 15px 0 20px 0; overflow: hidden; border: 1px solid #ccc; position: relative; box-shadow: inset 0 1px 3px rgba(0,0,0,0.1); }
        .score-fill { height: 100%; transition: width 0.8s cubic-bezier(0.25, 0.1, 0.25, 1), background 0.5s ease-in-out; display: flex; align-items: center; justify-content: flex-end; padding-right: 10px; border-radius: 14px 0 0 14px; }
        .score-fill span { color: #fff; font-weight: bold; font-size: 0.9em; text-shadow: 1px 1px 1px rgba(0,0,0,0.4); }
        .score-fill.very-good { background: linear-gradient(90deg, #a5d6a7, #4CAF50); }
        .score-fill.good { background: linear-gradient(90deg, #90caf9, #2196F3); }
        .score-fill.neutral { background: linear-gradient(90deg, #ffcc80, #ff9800); }
        .score-fill.bad { background: linear-gradient(90deg, #ef9a9a, #f44336); }
        .rating-display { text-align: center; font-size: 1.1em; margin-top: 15px; }
        .rating-display span { padding: 4px 12px; border-radius: 15px; font-weight: bold; display: inline-block; border: 1px solid; }
        .rating-display span.very-good { background-color: var(--good-bg); color: var(--good-color); border-color: #a5d6a7; } 
        .rating-display span.good { background-color: var(--water-bg); color: var(--water-text); border-color: var(--water-border); } 
        .rating-display span.neutral { background-color: var(--neutral-bg); color: var(--neutral-color); border-color: #ffcc80; } 
        .rating-display span.bad { background-color: var(--bad-bg); color: var(--bad-color); border-color: #ef9a9a; }

        /* New: Conclusion Box Styles */
        .conclusion-statement-box { 
            background-color: var(--box-bg); /* 可以选择一个更中性或主题色 */
            border-left-color: var(--nav-accent-color); /* 使用accent color */
        }
        .conclusion-statement-box h3 { 
            color: var(--nav-primary-bg); /* 使用主色 */
        }
        .conclusion-statement-box p { 
            font-size: 1.05em; 
            line-height: 1.8; 
            text-align: center; 
            color: var(--text-color);
        }
        .conclusion-statement-box p strong {
            color: var(--nav-primary-bg-darker);
        }


        /* Other analysis boxes */
        .personality-analysis { background-color: var(--water-bg); border-left-color: var(--water-text); } 
        .personality-analysis h3 { color: var(--water-text); } 
        .personality-analysis strong { color: var(--water-text); }
        
        .fortune-analysis { background-color: var(--wood-bg); border-left-color: var(--wood-text); } 
        .fortune-analysis h3 { color: var(--wood-text); } 
        .fortune-analysis strong { color: var(--wood-text); } 
        .fortune-analysis em { font-style: italic; color: var(--medium-text); display: block; margin: 5px 0 10px 0; padding-left: 15px; border-left: 2px solid var(--accent-border); }
        
        .conclusion-box { background-color: #fffaf0; border-left-color: var(--button-bg); } 
        .conclusion-box h3 { color: var(--button-bg); } 
        .conclusion-box p strong { color: var(--button-bg); font-size: 1.1em; }

        /* Feng Shui Tips */
        .fengshui-tips { background-color: #f5f5f5; border-left-color: #4CAF50; }
        .fengshui-tips h3 { color: #388e3c; }
        .fengshui-item { display: flex; align-items: flex-start; margin: 18px 0; padding: 12px 15px; background-color: white; border-radius: 5px; box-shadow: 0 1px 4px rgba(0,0,0,0.08); border: 1px solid #e0e0e0; border-left-width: 5px; border-left-style: solid; }
        .fengshui-icon { font-size: 26px; margin-right: 15px; width: 40px; text-align: center; padding-top: 3px; }
        .fengshui-item div { flex: 1; }
        .fengshui-item strong { display: block; margin-bottom: 6px; color: var(--medium-text); font-weight: bold; font-size: 1.05em; }
        .fengshui-item ul { margin: 6px 0 0 0px; padding-left: 20px; list-style: disc; }
        .fengshui-item li { margin-bottom: 6px; color: var(--medium-text); }
        .relation-diagram { text-align: center; margin: 15px 0; font-size: 0.95em; color: var(--medium-text); background-color: #f5f5f5; padding: 12px; border-radius: 5px; border: 1px solid #e0e0e0;}
        .relation-line { margin: 5px 0; }
        .disclaimer { text-align: center; font-size: 0.9em; color: var(--light-text); margin-top: 35px; padding-top: 20px; border-top: 1px solid var(--border-color-light); }

        /* Footer Styles */
        footer { text-align: center; padding: 25px 20px; margin-top: 30px; background-color: #e9ecef; color: var(--light-text); font-size: 0.9em; border-top: 1px solid #ddd; }

        /* Back to Top button Styles */
       #back-to-top {
    display: none;
    position: fixed;
    bottom: 30px;
    right: 30px;
    z-index: 99999; /* 极高的z-index确保在最上层 */
    border: none;
    outline: none;
    background-color: var(--nav-primary-bg); /* 使用导航主色变量 */
    color: white;
    cursor: pointer;
    padding: 0;
    border-radius: 50%;
    font-size: 18px;
    box-shadow: 0 3px 10px rgba(0,0,0,0.3);
    transition: all 0.3s ease;
    width: 50px;
    height: 50px;
    text-align: center;
    line-height: 50px;
    -webkit-tap-highlight-color: transparent; /* 移除移动端点击高亮 */
}
#back-to-top i {
    vertical-align: middle;
}
#back-to-top:hover {
    background-color: var(--nav-primary-bg-darker); /* 使用导航深色变量 */
    transform: translateY(-3px);
    box-shadow: 0 5px 15px rgba(0,0,0,0.4);
}
/* 移动端适配 */
@media screen and (max-width: 768px) {
    #back-to-top {
        bottom: 25px;
        right: 25px;
        width: 46px;
        height: 46px;
        line-height: 46px;
        font-size: 16px;
    }
}
@media screen and (max-width: 480px) {
    #back-to-top {
        bottom: 20px;
        right: 20px;
        width: 42px;
        height: 42px;
        line-height: 42px;
        font-size: 14px;
    }
}
        /* Responsive Adjustments */
        @media (max-width: 768px) {
            .container { padding: 20px 25px; margin: 25px 15px; }
            h1 { font-size: 1.8rem; } h2 { font-size: 1.5rem; } h3 { font-size: 1.2em; }
            .wuxing-grid { grid-template-columns: repeat(auto-fit, minmax(90px, 1fr)); }
            /* 手机卡片在小屏幕上允许横向滚动 */
            .number-rows-container {
                overflow-x: auto;
                justify-content: flex-start; /* 保持左对齐 */
                flex-wrap: nowrap; /* 禁用换行 */
                padding-bottom: 10px; /* 给滚动条留空间 */
                box-sizing: border-box; /* 包含padding在宽度计算内 */
            }
            .number-card {
                 flex: 0 0 80px; /* 固定宽度，不再响应式伸缩 */
                 min-width: 70px;
                 min-height: 140px;
            }
        }
        @media (max-width: 480px) {
            body { padding: 0; }
            .container { padding: 15px 20px; margin: 20px 0; border-radius: 0; box-shadow: none; border: none; border-top: 1px solid #eee; border-bottom: 1px solid #eee; }
            h1 { font-size: 1.6rem; } h2 { font-size: 1.4rem; } h3 { font-size: 1.15em; } h4 { font-size: 1.05em; }
            .title-desc { font-size: 0.9em; margin-bottom: 25px; }
            input[type="text"] { font-size: 15px; height: 44px; }
            button { font-size: 15px; height: 44px; padding: 10px 25px;}
            .analysis-box { padding: 15px; } .analysis-box p { font-size: 0.95em; }
            .wuxing-grid { grid-template-columns: repeat(3, 1fr); gap: 10px;}
            /* 手机卡片在小屏幕上允许横向滚动 */
            .number-rows-container {
                gap: 8px;
                overflow-x: auto;
                justify-content: flex-start;
                flex-wrap: nowrap;
                padding-bottom: 10px;
                box-sizing: border-box;
             }
            .number-card {
                flex: 0 0 75px; /* 固定宽度 */
                min-width: 65px;
                min-height: 130px;
                font-size: 12px;
             }
            .number-card h3 { font-size: 2em; }
            .fengshui-item { flex-direction: column; align-items: flex-start; padding: 12px; }
            .fengshui-icon { margin-bottom: 8px; margin-right: 0; width: auto; font-size: 24px; }
            footer { font-size: 0.8em; padding: 20px 15px; }
         }