/* =========================================
   1. 通用基礎樣式 (適用於全站)
   ========================================= */
* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

body {
    font-family: 'Noto Serif TC', 'Songti TC', 'PMingLiU', 'MingLiU', 'Microsoft JhengHei', serif;
    background-color: #f4f1ea; 
    background-image: linear-gradient(to bottom, #f4f1ea, #e8e4d9);
    color: #2c2c2c;
    line-height: 1.6;
    min-height: 100vh;
}

/* 全局互動元素游標樣式 */
a, button, input[type="submit"], input[type="button"], input[type="reset"], 
.btn, .submit-btn, .action-btn, .tab-btn {
    cursor: pointer;
}

.container {
    max-width: 1200px;
    margin: 0 auto;
    padding: 30px 20px;
}

/* 標題樣式 */
h2, h3 {
    font-family: 'Kaiti TC', 'BiauKai', 'KaiTi', serif;
    color: #5d4037;
    border-bottom: 2px solid #8d6e63;
    padding-bottom: 10px;
    margin-bottom: 20px;
    text-align: center;
    letter-spacing: 2px;
}

/* =========================================
   2. 結果頁與通用元件樣式 (Result Page & Common)
   ========================================= */

/* 通用 Header 樣式 (所有頁面共用) */
.main-header {
    background-color: #fffbf0;
    border-bottom: 1px solid #d7ccc8;
    padding: 15px 0;
    box-shadow: 0 2px 10px rgba(0,0,0,0.05);
    /* 確保在所有頁面都有正確的 z-index */
    position: relative;
    z-index: 100;
}

.header-container {
    max-width: 1200px;
    margin: 0 auto;
    padding: 0 20px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    position: relative;
}

.menu-toggle {
    display: none;
    font-size: 24px;
    background: none;
    border: none;
    color: #5d4037;
    cursor: pointer;
}

.logo a {
    font-family: 'Kaiti TC', 'BiauKai', 'KaiTi', serif;
    font-size: 28px;
    color: #3e2723;
    text-decoration: none;
    font-weight: bold;
    display: flex;
    align-items: center;
    gap: 8px;
}

/* ... */
@media (max-width: 768px) {
    .menu-toggle {
        display: block;
        padding: 10px;
        transition: transform 0.3s ease;
    }
    
    .menu-toggle:active {
        transform: scale(0.9);
    }
    
    .main-nav {
        display: none;
        position: absolute;
        top: 100%;
        left: 0;
        width: 100%;
        background: #fffbf0;
        box-shadow: 0 10px 20px rgba(62, 39, 35, 0.15);
        z-index: 1000;
        border-top: 2px solid #8d6e63;
        border-bottom: 2px solid #8d6e63;
        animation: slideDown 0.3s ease-out forwards;
    }

    @keyframes slideDown {
        from { opacity: 0; transform: translateY(-10px); }
        to { opacity: 1; transform: translateY(0); }
    }
    
    .main-nav.active {
        display: block !important;
    }
    
    .main-nav ul {
        flex-direction: column;
        gap: 0;
        padding: 10px 0;
    }
    
    .main-nav li {
        text-align: center;
    }
    
    .main-nav a {
        display: inline-flex;
        width: 100%;
        justify-content: center;
        padding: 16px 20px;
        border-bottom: 1px dashed rgba(141, 110, 99, 0.2);
        font-size: 18px;
        color: #5d4037;
        transition: all 0.2s;
        font-family: 'Kaiti TC', 'BiauKai', 'KaiTi', serif;
        letter-spacing: 2px;
    }
    
    .main-nav li:last-child a {
        border-bottom: none;
    }
    
    .main-nav a:hover,
    .main-nav a:active {
        background-color: rgba(141, 110, 99, 0.05);
        color: #c62828;
    }
    
    .main-nav a.active {
        color: #c62828;
        background-color: rgba(198, 40, 40, 0.03);
        font-weight: bold;
    }
    
    .main-nav a::after {
        display: none;
    }
    
    .auth-buttons {
        display: none; 
    }
}

/* 四柱八字排盤表格 RWD 優化 */
@media (max-width: 640px) {
    .bazi-table {
        min-width: 100%; 
        width: 100%;
        display: table; /* 確保保持表格屬性 */
        table-layout: fixed; /* 固定佈局，避免撐開 */
    }

    .bazi-table th, 
    .bazi-table td {
        padding: 5px; /* 縮小內距 */
        font-size: 14px; /* 縮小字體 */
        width: 20%; /* 平均分配寬度 (4柱 + 1標籤) */
    }

    .label-cell {
        width: 15% !important; /* 標籤欄寬度 */
        font-size: 12px;
        padding: 5px 2px;
    }

    /* 隱藏四柱標籤行，改為垂直顯示 */
    .header-row th {
        font-size: 14px;
        padding: 5px;
    }

    /* 柱體內部排版 */
    .pillar-box {
        gap: 2px;
    }

    .ganzhi-text {
        font-size: 18px; /* 縮小干支字體 */
    }

    .wuxing-text {
        font-size: 10px;
        padding: 0 2px;
    }

    .shishen-text, .canggan-text, .shishen-sub-text {
        font-size: 12px;
    }
}

/* iPhone 等小屏幕设备进一步优化 */
@media (max-width: 480px) {
    .ganzhi-text {
        font-size: 16px; /* iPhone 上进一步缩小干支字体 */
    }
    
    .pillar-box {
        gap: 1px; /* 减小间距 */
    }
    
    .gan-box, .zhi-box {
        gap: 4px; /* 减小天干地支之间的间距 */
    }
}

/* 大運流年表格 RWD 優化 - 增加橫向捲動 */
@media (max-width: 900px) {
    .dayun-section, 
    .liunian-section, 
    .xiaoyun-section, 
    .liuyue-section {
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
        width: 100%;
        margin: 0 -20px;
        padding: 0 20px;
    }
    
    .luck-table {
        min-width: 800px; /* 流月有12列，需要更大的最小寬度 */
    }
}

/* 812px宽度区间的特殊优化 */
@media (max-width: 812px) and (min-width: 769px) {
    .liuyue-section .luck-cell {
        padding: 8px 3px;
        font-size: 12px;
        min-width: 62px !important;
        max-width: 62px !important;
        flex: 0 0 62px !important;
        width: 62px !important;
    }
    
    .liuyue-section .luck-cell.header {
        flex: 0 0 52px !important;
        max-width: 52px !important;
        width: 52px !important;
        font-size: 13px;
        padding: 8px 5px;
    }
}

/* 768px以下的基础优化 */
@media (max-width: 768px) {
    /* 流月特殊优化 */
    .liuyue-section .luck-cell {
        padding: 8px 3px;
        font-size: 12px;
        min-width: 60px !important;
        max-width: 60px !important; /* 添加最大宽度，防止最后一格变宽 */
        flex: 0 0 60px !important; /* 固定宽度，避免挤压 */
        width: 60px !important;
    }
    
    .liuyue-section .luck-cell.header {
        flex: 0 0 50px !important; /* 表头更窄 */
        max-width: 50px !important;
        width: 50px !important;
        font-size: 13px;
        padding: 8px 5px;
    }
}

/* 696px宽度区间的特殊优化 */
@media (max-width: 696px) and (min-width: 481px) {
    .liuyue-section .luck-cell {
        padding: 7px 2px;
        font-size: 11px;
        min-width: 58px !important;
        max-width: 58px !important;
        flex: 0 0 58px !important; /* 使用!important确保覆盖默认样式 */
        width: 58px !important;
    }
    
    .liuyue-section .luck-cell.header {
        flex: 0 0 48px !important;
        max-width: 48px !important;
        width: 48px !important;
        font-size: 12px;
        padding: 7px 4px;
    }
}

/* 更小屏幕的进一步优化 */
@media (max-width: 480px) {
    .liuyue-section .luck-cell {
        padding: 6px 2px;
        font-size: 11px;
        min-width: 55px !important;
        max-width: 55px !important; /* 添加最大宽度，防止最后一格变宽 */
        flex: 0 0 55px !important;
        width: 55px !important;
    }
    
    .liuyue-section .luck-cell.header {
        flex: 0 0 45px !important;
        max-width: 45px !important;
        width: 45px !important;
        font-size: 12px;
        padding: 6px 3px;
    }
}
/* ... */
.home-page .main-header {
    background: transparent; /* 首頁維持透明背景 */
    border-bottom: none;
    box-shadow: none;
}

@media (max-width: 768px) {
    .home-page .main-header {
        background: #fffbf0; /* 手機版首頁 header 給背景色，不然選單看不清 */
        position: relative;
    }
    .home-page .main-nav {
        background: #fffbf0;
    }
}

.logo-icon {
    font-size: 24px;
    color: #8d6e63;
}

.main-nav ul {
    list-style: none;
    display: flex;
    gap: 30px;
    margin: 0;
    padding: 0;
}

.main-nav a {
    text-decoration: none;
    color: #5d4037;
    font-size: 16px;
    font-weight: bold;
    padding-bottom: 5px;
    transition: color 0.3s;
    position: relative;
    display: inline-flex;
    align-items: center;
    gap: 5px;
}

.nav-icon {
    font-size: 16px;
    filter: sepia(100%) hue-rotate(320deg) saturate(0.5); /* 讓 emoji 偏棕紅色系 */
}

.main-nav a:hover .nav-icon,
.main-nav a.active .nav-icon {
    filter: none; /* hover 時恢復原色或可調整為更亮 */
}

.main-nav a::after {
    content: '';
    position: absolute;
    width: 0;
    height: 2px;
    bottom: 0;
    left: 50%;
    background-color: #c62828;
    transition: all 0.3s;
}

.main-nav a:hover::after,
.main-nav a.active::after {
    width: 100%;
    left: 0;
}

.auth-buttons {
    font-size: 15px;
    color: #8d6e63;
}

.auth-link {
    cursor: pointer;
    transition: color 0.2s;
    text-decoration: none;
    color: #5d4037;
    font-weight: bold;
}

.auth-link:hover {
    color: #3e2723;
    text-decoration: underline;
}

.auth-separator {
    margin: 0 8px;
    color: #d7ccc8;
}

/* 結果頁容器 */
.result-container {
    padding: 40px 0; /* 增加上邊距，避免太貼 Header */
}

.basic-info-section,
.chart-section {
    background: #fffbf0;
    border: 1px solid #8d6e63;
    border-radius: 4px;
    padding: 32px;
    margin-bottom: 30px;
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.05);
    position: relative;
}

.basic-info-section::after,
.chart-section::after {
    content: "";
    position: absolute;
    top: 6px; bottom: 6px; left: 6px; right: 6px;
    border: 1px solid #d7ccc8;
    pointer-events: none;
    z-index: 0;
}

.basic-info-section > *,
.chart-section > * {
    position: relative;
    z-index: 1;
}

/* 基本信息表格 */
.info-table {
    width: 100%;
    border-collapse: collapse;
    margin-top: 10px;
    border: 1px solid #a1887f;
}

.info-table td {
    padding: 14px;
    border-bottom: 1px solid #d7ccc8;
    border-right: 1px solid #d7ccc8;
}

.info-table tr:last-child td {
    border-bottom: none;
}

.info-table td:first-child {
    font-weight: bold;
    width: 120px;
    color: #3e2723;
    background: #efebe9;
    text-align: center;
}

.info-table td:last-child {
    color: #2c2c2c;
    background: #fff;
    padding-left: 20px;
}

/* 命盘表格 */
.bazi-table {
    width: 100%;
    border-collapse: collapse;
    border-spacing: 0;
    margin-bottom: 30px;
    background: #fff;
    border: 2px solid #3e2723;
}

.bazi-table th,
.bazi-table td {
    padding: 12px;
    text-align: center;
    border: 1px solid #8d6e63;
    vertical-align: middle;
}

.header-row th {
    background: #3e2723;
    color: #fffbf0;
    font-weight: bold;
    font-size: 18px;
    border-color: #5d4037;
    font-family: 'Kaiti TC', serif;
}

.label-cell {
    width: 80px;
    background-color: #efebe9;
    font-weight: bold;
    color: #3e2723;
    font-size: 16px;
    writing-mode: vertical-lr;
    padding: 10px 5px;
    letter-spacing: 4px;
}

.shishen-text {
    font-size: 15px;
    font-weight: normal;
    color: #424242;
    margin-bottom: 4px;
}

.day-master {
    font-size: 16px;
    color: #5d4037;
    font-weight: bold;
    padding: 2px 8px;
    display: inline-block;
    border-radius: 4px;
    margin-top: 5px;
}

.pillar-box {
    display: flex;
    flex-direction: column;
    gap: 8px;
    align-items: center;
    padding: 10px 0;
}

.gan-box, .zhi-box {
    display: flex;
    align-items: center;
    gap: 8px;
}

.ganzhi-text {
    font-size: 36px;
    font-weight: bold;
    line-height: 1;
    font-family: 'Kaiti TC', 'BiauKai', serif;
}

/* 干支顏色 - 陰陽分色 */
.ganzhi-text.blue { color: #1a237e; }
.ganzhi-text.red { color: #b71c1c; }

.wuxing-text {
    font-size: 12px;
    color: #fff;
    background: #5d4037;
    padding: 1px 4px;
    border-radius: 2px;
}

/* 五行對應顏色 */
.wuxing-text.wuxing-木 { background-color: #2e7d32; } /* 綠色 */
.wuxing-text.wuxing-火 { background-color: #c62828; } /* 紅色 */
.wuxing-text.wuxing-土 { background-color: #f9a825; color: #3e2723; } /* 黃色 */
.wuxing-text.wuxing-金 { background-color: #757575; } /* 灰色 */
.wuxing-text.wuxing-水 { background-color: #1565c0; } /* 藍色 */

.canggan-text {
    font-size: 14px;
    color: #5d4037;
    line-height: 1.5;
    font-family: 'Kaiti TC', serif;
}

.shishen-sub-text {
    font-size: 13px;
    color: #616161;
    line-height: 1.5;
}

/* 大運流年表格 */
.luck-table {
    display: flex;
    flex-direction: column;
    gap: 0;
    margin-bottom: 25px;
    border: 2px solid #5d4037;
    background: #fff;
}

.luck-row {
    display: flex;
    border-bottom: 1px solid #a1887f;
    flex-wrap: nowrap; /* 防止换行 */
}

.luck-row:last-child {
    border-bottom: none;
}

.luck-cell {
    flex: 1;
    padding: 10px 5px;
    text-align: center;
    border-right: 1px solid #d7ccc8;
    min-height: 45px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: normal;
    color: #333;
    box-sizing: border-box; /* 确保padding和border包含在宽度内 */
}

.luck-cell:last-child {
    border-right: none;
}

.luck-cell.header {
    background: #5d4037;
    color: #fffbf0;
    font-weight: bold;
    flex: 0 0 80px;
}

.luck-cell.ganzhi {
    font-size: 18px;
    font-weight: bold;
    font-family: 'Kaiti TC', serif;
}

.luck-cell.ganzhi.blue { color: #1a237e; }
.luck-cell.ganzhi.red { color: #b71c1c; }

.zodiac-badge {
    color: #3e2723;
    font-weight: bold;
}

.wuxing-badge {
    display: inline-block;
    padding: 2px 10px;
    color: #fff;
    border-radius: 2px;
    font-size: 14px;
    background: #5d4037; 
}

.wuxing-badge.wuxing-木 { background-color: #2e7d32; } /* 綠色 */
.wuxing-badge.wuxing-火 { background-color: #c62828; } /* 紅色 */
.wuxing-badge.wuxing-土 { background-color: #f9a825; color: #3e2723; } /* 黃色 */
.wuxing-badge.wuxing-金 { background-color: #757575; } /* 灰色 */
.wuxing-badge.wuxing-水 { background-color: #1565c0; } /* 藍色 */

.back-link {
    text-align: center;
    margin-top: 40px;
}

.back-link a {
    display: inline-block;
    padding: 12px 40px;
    background: #3e2723;
    color: #fffbf0;
    text-decoration: none;
    border-radius: 2px;
    transition: all 0.3s ease;
    font-weight: bold;
    border: 1px solid #281815;
}

.back-link a:hover {
    background: #5d4037;
}

.mobile-only {
    display: none;
}

@media (max-width: 768px) {
    .mobile-only {
        display: block;
    }
}

/* 通用 Footer 樣式 (所有頁面共用) */
.main-footer {
    text-align: center;
    padding: 30px 20px;
    color: #8d6e63;
    font-size: 14px;
    letter-spacing: 1px;
    border-top: 1px solid rgba(141, 110, 99, 0.2);
    margin-top: 40px;
    background-color: transparent;
}

/* =========================================
   3. 首頁專屬樣式 (Home Page Styles)
   只作用於 <body class="home-page"> 下
   ========================================= */

body.home-page {
    background-color: #fdfbf7; /* 宣紙白 */
    display: flex;
    flex-direction: column;
    overflow-x: hidden;
    position: relative;
    background-image: none;
}

/* 首頁背景浮水印 */
.home-page .bg-watermark {
    position: fixed;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    font-family: 'Kaiti TC', 'BiauKai', 'KaiTi', serif;
    font-size: 40vw;
    color: rgba(0, 0, 0, 0.02);
    white-space: nowrap;
    z-index: -1;
    pointer-events: none;
    user-select: none;
}

/* 首頁頂部導航 - 特殊覆蓋 */
.home-page .main-header {
    background: transparent; /* 首頁維持透明背景 */
    border-bottom: none;
    box-shadow: none;
}

.home-page .header-container {
    max-width: 1000px;
    padding: 0 30px;
}

/* 首頁主內容區 */
.home-page .main-content-wrapper {
    flex: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 60px 20px;
    width: 100%;
}

/* 首頁標題區 */
.home-page .hero-section {
    text-align: center;
    margin-bottom: 50px;
}

.home-page .main-title {
    font-family: 'Kaiti TC', 'BiauKai', 'KaiTi', serif;
    font-size: 64px;
    color: #2c2c2c;
    margin-bottom: 15px;
    letter-spacing: 8px;
    text-shadow: 2px 2px 0 rgba(0,0,0,0.05);
}

.home-page .poetic-text {
    font-size: 20px;
    color: #5d4037;
    letter-spacing: 4px;
    font-weight: 300;
}

.home-page .divider-line {
    width: 60px;
    height: 4px;
    background-color: #c62828;
    margin: 25px auto 0;
    border-radius: 2px;
}

/* 首頁表單容器 - 庚帖風格 */
.home-page .form-container {
    width: 100%;
    max-width: 800px;
    perspective: 1000px;
}

.home-page .form-card {
    background: #fff;
    border: 1px solid #d7ccc8;
    box-shadow: 0 20px 50px rgba(62, 39, 35, 0.1);
    padding: 50px;
    position: relative;
    border-top: 6px solid #3e2723;
    border-radius: 0;
}

.home-page .form-card::before, 
.home-page .form-card::after {
    content: "";
    position: absolute;
    width: 15px;
    height: 15px;
    border: 2px solid #a1887f;
    transition: all 0.3s;
}

.home-page .form-card::before { top: 15px; left: 15px; border-right: none; border-bottom: none; }
.home-page .form-card::after { bottom: 15px; right: 15px; border-left: none; border-top: none; }

.home-page .form-header {
    text-align: center;
    margin-bottom: 35px;
}

.home-page .form-header h3 {
    font-family: 'Kaiti TC', serif;
    font-size: 24px;
    color: #3e2723;
    margin-bottom: 8px;
    border: none;
    padding: 0;
}

.home-page .form-hint {
    font-size: 13px;
    color: #8d6e63;
}

.home-page .form-row {
    display: flex;
    gap: 20px;
}

.home-page .form-group {
    margin-bottom: 25px;
    flex: 1;
}

.home-page .form-group label {
    display: block;
    font-size: 15px;
    color: #5d4037;
    margin-bottom: 8px;
    font-weight: bold;
}

.home-page .form-group input[type="text"],
.home-page .form-group input[type="email"],
.home-page .form-group input[type="password"],
.home-page .form-group select {
    width: 100%;
    padding: 12px 0;
    border: none;
    border-bottom: 2px solid #d7ccc8;
    background: transparent;
    font-size: 18px;
    color: #2c2c2c;
    font-family: 'Kaiti TC', serif;
    transition: all 0.3s;
    border-radius: 0;
    -webkit-appearance: none;
}

/* 嘗試覆蓋 Autofill 樣式 */
.home-page .form-group input:-webkit-autofill,
.home-page .form-group input:-webkit-autofill:hover, 
.home-page .form-group input:-webkit-autofill:focus, 
.home-page .form-group input:-webkit-autofill:active  {
    -webkit-box-shadow: 0 0 0 30px white inset !important;
    -webkit-text-fill-color: #2c2c2c !important;
    transition: background-color 5000s ease-in-out 0s;
}

.home-page .form-group input:focus,
.home-page .form-group select:focus {
    outline: none;
    border-bottom-color: #c62828;
    background: rgba(198, 40, 40, 0.02);
    box-shadow: none;
}

.home-page .radio-group {
    display: flex;
    gap: 20px;
    padding-top: 8px;
}

.home-page .radio-label {
    cursor: pointer;
    display: flex;
    align-items: center;
    gap: 6px;
    font-size: 16px;
    color: #5d4037;
}

.home-page .radio-label input {
    accent-color: #c62828;
    width: 18px;
    height: 18px;
}

.home-page .time-selector {
    display: flex;
    gap: 15px;
}

.home-page .submit-btn {
    width: 100%;
    margin-top: 30px;
    padding: 16px;
    background-color: #3e2723;
    color: #fdfbf7;
    border: none;
    font-size: 20px;
    cursor: pointer;
    transition: all 0.3s;
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 10px;
    letter-spacing: 4px;
    font-family: 'Kaiti TC', 'BiauKai', 'KaiTi', serif;
    background-image: none;
    border-radius: 0;
}

.home-page .submit-btn:hover {
    background-color: #c62828;
    background-image: none;
    box-shadow: 0 10px 20px rgba(198, 40, 40, 0.2);
    transform: translateY(-2px);
}

.home-page .btn-icon {
    font-size: 16px;
}

.home-page .btn-text {
    font-family: inherit; 
}

.home-page .main-footer {
    padding: 30px;
    color: #a1887f;
    font-size: 13px;
    border-top: none;
    margin-top: 0;
}

@media (max-width: 768px) {
    .home-page .main-title {
        font-size: 42px;
    }
    .home-page .form-card {
        padding: 30px 20px;
    }
    .home-page .form-row {
        flex-direction: column;
        gap: 0;
    }
    .home-page .main-header {
        padding: 15px 0;
    }
    .home-page .main-nav {
        display: none;
    }
}

/* =========================================
   4. 五行頁面專屬樣式 (Wuxing Page Styles)
   只作用於 <body class="wuxing-page"> 下
   ========================================= */

.wuxing-page .wuxing-content {
    max-width: 900px;
    margin: 0 auto;
    padding: 20px;
    box-sizing: border-box;
}

.wuxing-page .content-block {
    margin-bottom: 60px;
    width: 100%;
    max-width: 100%;
    box-sizing: border-box;
}

.wuxing-page .tiangan-table-container {
    width: 100%;
    max-width: 100%;
    box-sizing: border-box;
}

.wuxing-page .tiangan-reference-table {
    width: 100%;
    max-width: 100%;
    box-sizing: border-box;
}

/* 問題回報提示樣式 */
.report-issue-notice {
    text-align: center;
    padding: 10px;
    margin-bottom: 15px;
    background: #fff3cd;
    border: 1px solid #ffc107;
    border-radius: 4px;
    color: #856404;
    font-size: 14px;
}

.report-issue-notice .report-link {
    color: #c62828;
    text-decoration: none;
    font-weight: bold;
    margin-left: 5px;
}

.report-issue-notice .report-link:hover {
    text-decoration: underline;
}

.wuxing-page .block-title {
    font-family: 'Kaiti TC', serif;
    font-size: 28px;
    color: #3e2723;
    border-left: 5px solid #c62828;
    padding-left: 15px;
    margin-bottom: 30px;
    text-align: left;
}

.wuxing-page .element-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
    gap: 20px;
}

.wuxing-page .element-card {
    background: #fff;
    border: 1px solid #d7ccc8;
    padding: 20px;
    text-align: center;
    border-radius: 4px;
    box-shadow: 0 4px 10px rgba(0,0,0,0.05);
    transition: transform 0.3s;
}

.wuxing-page .element-card:hover {
    transform: translateY(-5px);
    box-shadow: 0 10px 20px rgba(0,0,0,0.1);
}

.wuxing-page .element-icon {
    width: 50px;
    height: 50px;
    line-height: 46px;
    border-radius: 50%;
    margin: 0 auto 15px;
    font-family: 'Kaiti TC', 'BiauKai', 'KaiTi', serif;
    font-size: 24px;
    color: #fff;
    border: 2px solid rgba(255,255,255,0.5);
    box-shadow: 0 2px 5px rgba(0,0,0,0.2);
}

.wuxing-page .wood .element-icon { background: #2e7d32; }
.wuxing-page .fire .element-icon { background: #c62828; }
.wuxing-page .earth .element-icon { background: #f9a825; }
.wuxing-page .metal .element-icon { background: #757575; }
.wuxing-page .water .element-icon { background: #1565c0; }

.wuxing-page .element-card h3 {
    font-size: 18px;
    margin-bottom: 10px;
    color: #3e2723;
    border-bottom: none;
    padding-bottom: 0;
}

.wuxing-page .element-card p {
    font-size: 14px;
    color: #5d4037;
    line-height: 1.6;
}

.wuxing-page .relation-container {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 40px;
}

.wuxing-page .relation-block {
    background: #fff;
    padding: 30px;
    border: 1px solid #d7ccc8;
    border-radius: 4px;
}

.wuxing-page .relation-desc {
    color: #5d4037;
    margin-bottom: 20px;
    font-style: italic;
}

.wuxing-page .cycle-diagram {
    display: flex;
    flex-direction: column;
    gap: 10px;
    margin-bottom: 20px;
    background: #fdfbf7;
    padding: 15px;
    border-radius: 4px;
}

.wuxing-page .cycle-item {
    font-family: 'Kaiti TC', serif;
    font-size: 18px;
    color: #3e2723;
    display: flex;
    align-items: center;
    gap: 10px;
}

.wuxing-page .arrow {
    color: #c62828;
    font-weight: bold;
}

.wuxing-page .relation-detail p {
    margin-bottom: 8px;
    font-size: 15px;
    color: #4e342e;
}

.wuxing-page .relation-detail strong {
    color: #c62828;
}

@media (max-width: 768px) {
    .wuxing-page .relation-container {
        grid-template-columns: 1fr;
    }
    
    .wuxing-chart-container svg {
        width: 100%;
        height: auto;
        max-width: 500px;
    }
}

/* =========================================
   5. 會員中心專屬樣式 (Member Page Styles)
   ========================================= */

.member-actions-row {
    display: flex;
    justify-content: center;
    gap: 20px;
    margin-top: 30px;
}

.member-actions-row > button,
.member-actions-row > form,
.member-actions-row > a {
    flex: 1;
    min-width: 0;
}

.member-actions-row form .submit-btn,
.member-actions-row > button.submit-btn,
.member-actions-row > a.submit-btn {
    width: 100%;
    margin-top: 0;
}

.add-profile-container {
    display: flex;
    justify-content: center;
    margin-bottom: 20px;
}

.add-profile-container .submit-btn {
    width: 50%;
    margin-top: 0;
}

@media (max-width: 768px) {
    .member-actions-row {
        flex-direction: column;
    }
    
    .add-profile-container .submit-btn {
        width: 100%;
    }
}

/* =========================================
   6. SEO 區塊專屬樣式
   ========================================= */

.seo-section {
    width: 100%;
    max-width: 800px;
    margin: 60px auto 0;
    padding: 0;
}

.seo-card {
    background: #fff;
    border: 1px solid #d7ccc8;
    padding: 40px;
    border-radius: 4px;
    box-shadow: 0 10px 30px rgba(62, 39, 35, 0.05);
    position: relative;
    border-top: 4px solid #5d4037;
}

.seo-card::before {
    content: "";
    position: absolute;
    top: 10px; left: 10px; right: 10px; bottom: 10px;
    border: 1px dashed #d7ccc8;
    pointer-events: none;
}

.seo-title {
    font-size: 26px;
    color: #3e2723;
    margin-bottom: 20px;
    padding-bottom: 15px;
    border-bottom: 2px solid #8d6e63;
    display: inline-block;
    width: 100%;
    text-align: center;
    position: relative;
    z-index: 1;
}

.seo-subtitle {
    font-size: 22px;
    color: #5d4037;
    margin: 30px 0 15px;
    text-align: center;
    border-bottom: none;
    position: relative;
    z-index: 1;
}

.seo-text {
    font-size: 16px;
    color: #5d4037;
    line-height: 1.8;
    text-align: justify;
    margin-bottom: 20px;
    position: relative;
    z-index: 1;
}

.seo-text strong {
    color: #c62828;
    font-weight: bold;
}

.seo-divider {
    height: 1px;
    background-image: linear-gradient(to right, transparent, #d7ccc8, transparent);
    margin: 30px 0;
    position: relative;
    z-index: 1;
}

@media (max-width: 768px) {
    .seo-card {
        padding: 25px;
    }
    .seo-title {
        font-size: 22px;
    }
    .seo-subtitle {
        font-size: 20px;
    }
}