/* ==========================================================================
   數運機緣 Fate Mechanics - Master CSS (重構整合版)
   - 包含多國語系字型隔離、紫金雙主題核心變數、全域地基與導覽列
========================================================================== */

/* =========================================
   🌐 0. 多國語系 (i18n) 專屬字型與排版隔離區
   (強制覆蓋全站，包含文章區，避免拼音文字被 CJK 字型切碎)
========================================= */
:root {
    /* 拼音文字專用字型堆疊：強制使用系統原生無襯線字型，徹底避開 CJK 全形網格 */
    --font-latin-cyrillic: system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
}

/* 針對拼音文字系統 (俄、英、法、德、西、印尼、越) 強制切換字型與排版規則 */
html[lang="ru-RU"] body,
html[lang="en-US"] body,
html[lang="fr-FR"] body,
html[lang="de-DE"] body,
html[lang="es-ES"] body,
html[lang="id-ID"] body,
html[lang="vi-VN"] body {
    font-family: var(--font-latin-cyrillic) !important;
    
    /* 洗掉可能造成破版的中文字距與斷行設定 */
    letter-spacing: normal !important;
    word-break: normal !important; 
    word-wrap: break-word !important;
    overflow-wrap: anywhere !important; /* 確保文章區的長單字也能正確斷行 */
    text-align: left; 
    hyphens: auto;
}

/* 確保全域輸入框與按鈕也能繼承拼音文字字型 */
html[lang="ru-RU"] button, html[lang="ru-RU"] input, html[lang="ru-RU"] select, html[lang="ru-RU"] textarea,
html[lang="en-US"] button, html[lang="en-US"] input, html[lang="en-US"] select, html[lang="en-US"] textarea,
html[lang="fr-FR"] button, html[lang="fr-FR"] input, html[lang="fr-FR"] select, html[lang="fr-FR"] textarea,
html[lang="de-DE"] button, html[lang="de-DE"] input, html[lang="de-DE"] select, html[lang="de-DE"] textarea,
html[lang="es-ES"] button, html[lang="es-ES"] input, html[lang="es-ES"] select, html[lang="es-ES"] textarea,
html[lang="id-ID"] button, html[lang="id-ID"] input, html[lang="id-ID"] select, html[lang="id-ID"] textarea,
html[lang="vi-VN"] button, html[lang="vi-VN"] input, html[lang="vi-VN"] select, html[lang="vi-VN"] textarea {
    font-family: var(--font-latin-cyrillic) !important;
}

/* 泰文 (th-TH) 也可以獨立設定適合的字型，這裡先套用系統預設 */
html[lang="th-TH"] body,
html[lang="th-TH"] button, html[lang="th-TH"] input, html[lang="th-TH"] select, html[lang="th-TH"] textarea {
    font-family: system-ui, sans-serif !important;
    letter-spacing: normal !important;
    word-break: normal !important; 
}

/* =========================================
   1. 核心變數設定 (亮色模式 / 清雅書卷風：米白底 + 琥珀金)
========================================= */
:root {
    /* Base 基礎層 */
    --bg-main: #F7F4EB; 
    --bg-card: #FFFDF7; 
    --text-main: #333333; 
    --text-muted: #7A7A7A;

    /* Primary 主色層 (琥珀金) */
    --primary-color: #B59252;  
    --primary-rgb: 181, 146, 82; 
    --primary-hover: #9C7A3E;  
    --border-color: #DCD3B6;   

    /* Accent 強調層 */
    --accent-purple: #8E44AD;  
    --accent-purple-rgb: 142, 68, 173;
    --accent-orange: #D96C3A;  

    /* Bazi 八字層 (亮色底特化) */
    --color-bazi-wood: #2e7d32;      
    --color-bazi-fire: #c62828;      
    --color-bazi-earth: #b8860b;     
    --color-bazi-earth-dry: #A65E3A; 
    --color-bazi-earth-wet: #7A7563; 
    --color-bazi-metal: #546e7a;     
    --color-bazi-water: #1565c0;     

    /* 陰陽調節參數 (強化對比版) */
    --bazi-yang-weight: 900;     
    --bazi-yang-opacity: 1;
    --bazi-yin-weight: 300;      
    --bazi-yin-opacity: 0.65;    

    /* --- 系統 UI 與複合材質 (玉石毛玻璃) 繼承層 --- */
    --ambient-bg: linear-gradient(135deg, var(--bg-card) 0%, #ede8de 100%); 
    --glass-bg: rgba(255, 253, 247, 0.6); 
    --glass-border: rgba(255, 255, 255, 0.45); 
    --glass-shadow: 0 8px 32px 0 rgba(var(--primary-rgb), 0.04); 
    --nav-bg: rgba(247, 244, 235, 0.85);
    --nav-height: 70px;
    --transition: all 0.4s cubic-bezier(0.25, 0.8, 0.25, 1);
    --logo-glow: rgba(var(--primary-rgb), 0.4); 

    /* 動態背景與特效連動 */
    --jade-bg: linear-gradient(145deg, var(--bg-card) 0%, var(--bg-main) 100%); 
    --jade-border: var(--border-color); 
    --jade-shadow: 0 4px 20px rgba(var(--primary-rgb), 0.08);
    --jade-text: var(--text-main); 
    --gold-hairline: rgba(var(--primary-rgb), 0.4); 
    --jade-ring-op: 0.3; 
    --fog-color-1: radial-gradient(circle at 20% 50%, rgba(var(--primary-rgb), 0.08) 0%, transparent 50%);
    --fog-color-2: radial-gradient(circle at 80% 80%, rgba(255, 255, 255, 0.7) 0%, transparent 60%);
    
    --btn-text-color: #FFFFFF; 
    --solid-card-bg: var(--bg-card);
}

/* --- 2. 核心變數設定 暗色模式 --- */
body.dark-theme {
    /* Base 基礎層 (曜石深黑) */
    --bg-main: #111111;        
    --bg-card: #1C1C1C;        
    --text-main: #EAEAEA;      
    --text-muted: #888888;     

    /* Primary 主色層 (尊榮琥珀金) */
    --primary-color: #D4B98C;  
    --primary-rgb: 212, 185, 140;
    --primary-hover: #E5CFAA;  
    --border-color: #4A3A20;

    /* Accent 強調層 */
    --accent-purple: #D4B98C;  
    --accent-purple-rgb: 212, 185, 140;
    --accent-orange: #E8864A;  

    /* Bazi 八字層 (暗色底特化) */
    --color-bazi-wood: #4ade80;      
    --color-bazi-fire: #fb7185;      
    --color-bazi-earth: #fbbf24;     
    --color-bazi-earth-dry: #C48464; 
    --color-bazi-earth-wet: #8A8A8A; 
    --color-bazi-metal: #a1a1aa;     
    --color-bazi-water: #60a5fa;

    /* --- 系統 UI 與複合材質 繼承層 --- */
    --ambient-bg: radial-gradient(circle at 50% 0%, #1A1A1A 0%, var(--bg-main) 80%);
    --glass-bg: rgba(28, 28, 28, 0.7); 
    --glass-border: rgba(212, 185, 140, 0.15); 
    --glass-shadow: 0 8px 32px 0 rgba(0, 0, 0, 0.5); 
    --nav-bg: rgba(17, 17, 17, 0.85);
    --logo-glow: rgba(212, 185, 140, 0.4); 

    /* 動態背景與特效連動 */
    --jade-bg: linear-gradient(145deg, #1C1C1C 0%, #111111 100%); 
    --jade-border: var(--border-color); 
    --jade-shadow: 0 4px 20px rgba(0, 0, 0, 0.8);
    --jade-text: var(--text-main); 
    --gold-hairline: rgba(212, 185, 140, 0.3); 
    --jade-ring-op: 0.15; 
    --fog-color-1: radial-gradient(circle at 20% 50%, rgba(212, 185, 140, 0.04) 0%, transparent 50%); 
    --fog-color-2: radial-gradient(circle at 80% 80%, rgba(212, 185, 140, 0.02) 0%, transparent 60%); 
    
    --btn-text-color: #111111;
    --solid-card-bg: var(--bg-card);
}

/* --- 3. 全局地基設定 (已整合手機版 RWD 終極防爆框鎖定) --- */
html { scroll-behavior: smooth; }

/* 🌟 關鍵修正：將 hidden 改為 clip，完美拯救 Sticky 導航列，並防止 X 軸溢出！ */
html, body {
    overflow-x: clip; 
    width: 100%;
    box-sizing: border-box; 
    margin: 0; padding: 0;
    background-color: var(--bg-main); color: var(--text-main);
    /* 如果上方 i18n 沒匹配到語系，最後的預設回退字型 */
    font-family: 'iansui','PingFang TC', 'Microsoft JhengHei', sans-serif;
    line-height: 1.6; 
    transition: background-color 0.5s ease, color 0.5s ease; 
}

*, *::before, *::after {
    box-sizing: inherit;
}

/* 全域同步過渡動畫 */
.glass-panel, .ambient-background, .sticky-nav, .article-card, table, th, td {
    transition: background 0.5s ease, background-color 0.5s ease, border-color 0.5s ease, color 0.5s ease, box-shadow 0.5s ease;
}

.ambient-background {
    position: fixed; top: 0; left: 0; width: 100vw; height: 100vh;
    background: var(--ambient-bg); z-index: -1; 
}

a {
    color: var(--text-main); 
    text-decoration: none;   
    transition: all 0.3s ease-in-out;
}
a:hover { color: var(--primary-color); }

/* --- 4. 基礎毛玻璃面板設定 (Glassmorphism 2.0 立體升級版) --- */
.glass-panel {
    background: var(--glass-bg); 
    backdrop-filter: blur(16px); 
    -webkit-backdrop-filter: blur(16px);
    border: 1px solid var(--glass-border); 
    border-top: 1px solid rgba(255, 255, 255, 0.4); 
    box-shadow: var(--glass-shadow), inset 0 1px 1px rgba(255, 255, 255, 0.3); 
    border-radius: 20px;
    transition: var(--transition);
}

body.dark-theme .glass-panel {
    border-top: 1px solid rgba(212, 185, 140, 0.3);
    box-shadow: var(--glass-shadow), inset 0 1px 1px rgba(255, 255, 255, 0.05);
}

/* =========================================
   數運機緣 Fate Mechanics - Master CSS
   第 2 批次：導覽系統、語系選單與 Logo 強化層
========================================= */

.logo-wrapper {
    display: inline-block;
    width: 110px; 
    height: 110px;
    border-radius: 50%;
    margin-bottom: -35px;
    position: relative;
    z-index: 10;
    filter: drop-shadow(0 0 12px var(--logo-glow));
    will-change: transform, filter;
    animation: floatHalo 8s ease-in-out infinite alternate;
}

.site-logo {
    width: 110px;
    height: 110px;
    border-radius: 50%;
    object-fit: cover;
    display: block;
}

@keyframes floatHalo {
    0% { transform: translateY(0); filter: drop-shadow(0 0 8px var(--logo-glow)); }
    100% { transform: translateY(-12px); filter: drop-shadow(0 0 22px var(--logo-glow)); }
}

.sticky-nav {
    position: sticky; top: 0; width: 100%; height: var(--nav-height);
    background: transparent; z-index: 1000; display: flex; align-items: center;
    transition: background 0.4s ease, backdrop-filter 0.4s ease;
    will-change: background, backdrop-filter;
}

.sticky-nav.scrolled {
    background: var(--nav-bg); 
    backdrop-filter: blur(20px);
    -webkit-backdrop-filter: blur(20px);
    border-bottom: 1px solid var(--glass-border);
}

.nav-container {
    max-width: 1000px; margin: 0 auto; width: 100%; padding: 0 20px;
    display: flex; justify-content: space-between; align-items: center;
}

.nav-logo { display: flex; align-items: center; gap: 10px; color: var(--text-main); font-weight: 800; letter-spacing: 2px; }
.nav-icon-small { width: 32px; height: 32px; border-radius: 50%; }
.nav-links { list-style: none; display: flex; gap: 20px; margin: 0; padding: 0; align-items: center; }
.nav-links a { color: var(--text-main); font-size: 0.9em; opacity: 0.8; transition: 0.3s; }
.nav-links a:hover { color: var(--primary-color); opacity: 1; }

.nav-links .nav-btn-tool.btn-custom-icon {
    font-size: 0.9rem;       
    padding: 0.4em 1.2em;    
    margin: 0;               
    background: linear-gradient(135deg, rgba(255, 255, 255, 0.9) 0%, rgba(240, 235, 225, 0.95) 100%) !important;
    color: #333333 !important;                  
    box-shadow: 0 2px 8px rgba(var(--primary-rgb), 0.15);
}

.nav-links .nav-btn-tool:hover {
    background: linear-gradient(135deg, #ffffff 0%, rgba(var(--primary-rgb), 0.1) 100%) !important;
    box-shadow: 0 6px 15px rgba(var(--primary-rgb), 0.3) !important;
    transform: translateY(-2px) !important;
}

.theme-toggle-btn {
    display: inline-flex; align-items: center; justify-content: center;
    font-size: 1.4rem; width: 40px; height: 40px; padding: 0;
    background: none; border: none; cursor: pointer; opacity: 0.7; transition: 0.3s; color: var(--text-main);
}
.theme-toggle-btn:hover { opacity: 1; transform: scale(1.1); }

.settings-menu {
    position: absolute; right: 0; top: 100%; margin-top: 15px; z-index: 2000;
    min-width: 180px; max-height: 60vh; overflow-y: auto; border-radius: 12px;
    background: var(--glass-bg); padding: 8px 0;
    backdrop-filter: blur(20px); -webkit-backdrop-filter: blur(20px);
    border: 1px solid var(--glass-border); box-shadow: 0 10px 40px rgba(0,0,0,0.3);
    animation: menuFadeIn 0.3s cubic-bezier(0.25, 0.8, 0.25, 1) forwards;
}

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

.menu-item {
    padding: 12px 20px; cursor: pointer; color: var(--text-main);
    border-bottom: 1px solid var(--glass-border); transition: background 0.2s, color 0.2s; font-size: 0.95rem;
}
.menu-item:last-child { border-bottom: none; }
.menu-item:hover { background: rgba(var(--primary-rgb), 0.15); color: var(--primary-color); }
.menu-item.active { background: var(--primary-color); color: var(--btn-text-color); font-weight: bold; }

/* =========================================
   🌟 客製化 Icon 按鈕 (CSS 變數極簡版) 與 呼吸動畫 (Pulse Glow)
========================================= */
.btn-custom-icon {
    display: inline-flex !important; 
    align-items: center;
    justify-content: center;
    gap: 0.8em;
    padding: 0.6em 1.8em;
    font-size: 1.15rem;
    font-weight: bold;
    border-radius: 50px;
    cursor: pointer;
    transition: all 0.3s ease;
    background: linear-gradient(135deg, rgba(255, 255, 255, 0.9) 0%, rgba(240, 235, 225, 0.95) 100%);
    border: 1px solid rgba(var(--primary-rgb), 0.5);
    color: #333333 !important;
}

.btn-custom-icon:hover {
    background: linear-gradient(135deg, #ffffff 0%, rgba(var(--primary-rgb), 0.1) 100%);
    border-color: var(--primary-color);
    transform: translateY(-2px);
    box-shadow: 0 6px 20px rgba(var(--primary-rgb), 0.15);
}
.btn-custom-icon:active {
    transform: translateY(1px);
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.05);
}

.btn-custom-icon span {
    white-space: nowrap;
    position: relative;
    z-index: 2;
}

.btn-custom-icon::before,
.btn-custom-icon::after {
    content: "";
    display: block; 
    flex-shrink: 0; 
    width: 1.5em;
    height: 2em;
    background-image: var(--btn-icon);
    background-size: contain;
    background-repeat: no-repeat;
    background-position: center;
}

.btn-custom-icon::after {
    transform: scaleX(-1);
}

@keyframes btnBreathingGlow {
    0% { transform: scale(1); box-shadow: 0 4px 15px rgba(var(--primary-rgb), 0.15); }
    50% { transform: scale(1.02); box-shadow: 0 8px 25px rgba(var(--primary-rgb), 0.5); border-color: var(--primary-color); }
    100% { transform: scale(1); box-shadow: 0 4px 15px rgba(var(--primary-rgb), 0.15); }
}

.btn-custom-icon.pulse-glow { animation: btnBreathingGlow 3s ease-in-out infinite; }
.btn-custom-icon.pulse-glow:hover { animation-play-state: paused; }
/* =========================================
   數運機緣 Fate Mechanics - Master CSS
   第 3 批次：首頁佈局、核心看板與容器優化
========================================= */
.container { max-width: 1000px; margin: 0 auto; padding: 40px 20px; }
.site-header { text-align: center; margin-bottom: 50px; }

/* 🌟 品牌識別：方案二 (極簡純雲) */
.main-brand-title {
    font-size: 2.8em; font-weight: 800; letter-spacing: 4px; margin: 0; position: relative; z-index: 10;
    font-family: 'iansui','PMingLiU', 'MingLiU', 'STZhongsong', serif;
    color: #64748B; text-shadow: none; transition: var(--transition); opacity: 0.9;
}
body.dark-theme .main-brand-title { color: #F8FAFC; opacity: 0.85; }
.main-brand-title:hover { transform: scale(1.02); opacity: 1; }

.main-brand-sub { 
    font-size: 1.05em; text-transform: uppercase; letter-spacing: 5px; 
    margin-top: 8px; font-weight: 600; color: #64748B; opacity: 0.6; transition: var(--transition);
}
body.dark-theme .main-brand-sub { color: #F8FAFC; opacity: 0.5; }

.notice-board { padding: 25px; margin-bottom: 50px; border-left: 4px solid var(--accent-orange); }
.board-header { font-weight: bold; font-size: 1.1em; margin-bottom: 10px; color: var(--text-main); display: flex; align-items: center; gap: 8px; }
.update-list { margin: 0; padding: 0; list-style: none; min-height: 50px; }
.update-item { display: flex; font-size: 0.95em; padding: 5px 0; align-items: center; }
.update-date { min-width: 110px; color: var(--accent-orange); font-weight: bold; }

.section-title-wrap { text-align: center; margin-bottom: 30px; border-bottom: 1px solid var(--jade-border); padding-bottom: 15px; }
.section-title-wrap h2 { margin: 0; color: var(--text-main); }
.section-subtitle { display: block; font-size: 0.9em; color: var(--text-muted); letter-spacing: 1px; margin-top: 5px; }

#grid-basic, #grid-advanced {
    display: grid; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
    gap: 20px; margin-bottom: 60px; min-height: 400px; 
}

/* =========================================
   數運機緣 Fate Mechanics - Master CSS
   第 4 批次：五行工具、廣告位、摺疊選單與 RWD
========================================= */
.c-wood, .elem-wood { color: var(--color-bazi-wood); font-weight: bold; } 
.c-fire, .elem-fire { color: var(--color-bazi-fire); font-weight: bold; } 
.c-earth, .elem-earth { color: var(--color-bazi-earth); font-weight: bold; } 
.c-metal, .elem-metal { color: var(--color-bazi-metal); font-weight: bold; } 
.c-water, .elem-water { color: var(--color-bazi-water); font-weight: bold; }
.yang { font-weight: var(--bazi-yang-weight); opacity: var(--bazi-yang-opacity); }
.yin { font-weight: var(--bazi-yin-weight); opacity: var(--bazi-yin-opacity); }

details.glass-panel { margin-bottom: 15px; overflow: hidden; }
summary { padding: 18px 25px; cursor: pointer; font-weight: bold; display: flex; justify-content: space-between; align-items: center; color: var(--text-main); list-style: none; transition: var(--transition); background: rgba(var(--primary-rgb), 0.02); }
summary:hover { background: rgba(var(--primary-rgb), 0.08); }
summary::-webkit-details-marker { display: none; }
summary::after { content: '+'; font-size: 1.2em; color: var(--text-muted); transition: var(--transition); }
details[open] summary::after { content: '-'; color: var(--primary-color); transform: rotate(180deg); }
.archive-list { padding: 15px 30px; margin: 0; color: var(--text-muted); }

.ad-slot { width: 100%; min-height: 90px; margin: 30px 0; background: rgba(var(--primary-rgb), 0.03); border: 1px dashed rgba(var(--primary-rgb), 0.4); border-radius: 12px; display: flex; justify-content: center; align-items: center; overflow: hidden; }

footer { padding: 40px 20px; margin-top: 60px; text-align: center; font-size: 0.9em; }
footer p { color: var(--text-muted); }
.footer-nav { margin-top: 15px; }
.footer-nav a { color: var(--text-muted); margin: 0 10px; }
.highlight-link { color: var(--primary-color); }

/* 首頁與產品卡片優化 */
.mission-section, .notice-board, .highlight-zone { max-width: 850px; margin: 0 auto 40px auto; }
.mission-section { position: relative; padding: 80px 40px; border: 1px solid var(--jade-border); background: var(--jade-bg); box-shadow: var(--jade-shadow); border-radius: 20px; text-align: center; overflow: hidden; }
.mission-bg-layer { position: absolute; top: 0; left: 0; width: 100%; height: 100%; background-image: url('/public/Images/bg-step-three.webp'); background-position: 20% 35%; opacity: 0.18; mix-blend-mode: multiply; z-index: 1; pointer-events: none; transition: opacity 0.5s ease; }
body.dark-theme .mission-bg-layer { opacity: 0.25; mix-blend-mode: screen; }
.mission-title { font-size: 1.6em; color: var(--primary-color); margin-bottom: 15px; letter-spacing: 2px; position: relative; z-index: 2; }
.mission-zh { font-size: 1.3em; color: var(--jade-text); font-weight: 500; line-height: 1.8; max-width: 780px; margin: 0 auto; position: relative; z-index: 2; transition: color 0.5s ease; }
.mission-deco-ring { position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); width: 280px; height: 280px; border: 1px dashed var(--gold-hairline); border-radius: 50%; opacity: var(--jade-ring-op); pointer-events: none; transition: opacity 0.5s ease; z-index: 2; }

.feature-title { font-size: 1.8em; font-weight: 800; margin: 0 0 10px 0; color: var(--text-main); }
.feature-desc { max-width: 650px; margin: 0 auto; color: var(--text-muted); font-size: 1.05em; }

.product-card.card-ai, .mission-section { box-shadow: var(--jade-shadow), inset 0 2px 10px rgba(255,255,255,0.2); }
body.dark-theme .product-card.card-ai, body.dark-theme .mission-section { box-shadow: var(--jade-shadow), inset 0 1px 5px rgba(255,255,255,0.03); }

.product-card.card-ai { position: relative; padding: 50px 40px; display: flex; flex-direction: column; align-items: center; text-align: center; gap: 25px; background: var(--jade-bg); border: 1px solid var(--primary-color); border-radius: 20px; transition: var(--transition); overflow: hidden; z-index: 1; }
.product-card.card-ai:hover { transform: translateY(-5px); box-shadow: 0 15px 40px rgba(var(--primary-rgb), 0.15); }
.product-card.card-ai::before { content: ''; position: absolute; top: 0; left: 0; width: 100%; height: 100%; background-image: url('/public/Images/bg-step-one.webp'); background-position: center; opacity: 0.20; mix-blend-mode: multiply; z-index: -1; pointer-events: none; transition: opacity 0.5s ease; }
body.dark-theme .product-card.card-ai::before { opacity: 0.25; mix-blend-mode: screen; }

.feature-tags { display: flex; flex-wrap: wrap; justify-content: center; gap: 12px; }
.feature-tag { font-size: 0.9rem; padding: 6px 18px; background: rgba(var(--primary-rgb), 0.05); border: 1px solid rgba(var(--primary-rgb), 0.3); border-radius: 50px; color: var(--text-main); font-weight: bold; letter-spacing: 1px; transition: var(--transition); box-shadow: 0 2px 5px rgba(0,0,0,0.02); display: inline-flex; align-items: center; gap: 8px; }
.feature-tag::before { content: ''; display: block; width: 1.4em; height: 1.4em; background-size: contain; background-repeat: no-repeat; background-position: center; }
.feature-tag:nth-child(1)::before { background-image: url('/public/Images/2Wing.webp'); }
.feature-tag:nth-child(2)::before { background-image: url('/public/Images/pocket-watch_old.webp'); }
.feature-tag:nth-child(3)::before { background-image: url('/public/Images/abacus.webp'); }
.feature-tag:hover { background: rgba(var(--primary-rgb), 0.15); border-color: var(--primary-color); transform: translateY(-2px); }

/* 章節卡片 */
.article-card { background: linear-gradient(135deg, rgba(var(--primary-rgb), 0.03) 0%, var(--glass-bg) 100%); border: 1px solid rgba(var(--primary-rgb), 0.2); border-left: 4px solid rgba(var(--primary-rgb), 0.3); padding: 25px 20px; display: flex; flex-direction: column; justify-content: center; text-align: left; border-radius: 6px 12px 12px 6px; color: var(--text-main); font-weight: bold; letter-spacing: 1px; transition: var(--transition); box-shadow: inset 0 2px 5px rgba(255,255,255,0.4), 0 4px 10px rgba(0,0,0,0.02); }
body.dark-theme .article-card { background: linear-gradient(135deg, rgba(255,255,255,0.02) 0%, rgba(0,0,0,0.2) 100%); box-shadow: inset 0 1px 3px rgba(255,255,255,0.05), 0 4px 10px rgba(0,0,0,0.3); }
.article-card:hover { background: var(--solid-card-bg); border-color: var(--primary-color); border-left-color: var(--primary-color); border-left-width: 6px; transform: translateX(6px) translateY(-2px); box-shadow: inset 0 2px 5px rgba(var(--primary-rgb), 0.2), -2px 8px 20px rgba(var(--primary-rgb), 0.15); }
.article-card.card-premium { background: linear-gradient(135deg, rgba(142, 68, 173, 0.06) 0%, var(--glass-bg) 100%); border-left: 4px solid #8E44AD; color: #6C3483; }
body.dark-theme .article-card.card-premium { background: linear-gradient(135deg, rgba(187, 143, 206, 0.1) 0%, rgba(0,0,0,0.3) 100%); border-left-color: #BB8FCE; color: #D2B4DE; }
.article-card.card-premium:hover { color: var(--text-main); border-left-width: 6px; border-left-color: #8E44AD; }
body.dark-theme .article-card.card-premium:hover { border-left-color: #BB8FCE; }

#basic, #advanced.advanced-zone { position: relative; padding: 30px; overflow: hidden; z-index: 1; }
#basic::before, #advanced.advanced-zone::before { content: ''; position: absolute; top: 0; left: 0; width: 100%; height: 100%; background-image: url('/public/Images/bg-step-three.webp'); background-repeat: repeat; background-position: center; opacity: 0.12; mix-blend-mode: multiply; z-index: -1; pointer-events: none; }
body.dark-theme #basic::before, body.dark-theme #advanced.advanced-zone::before { opacity: 0.2; mix-blend-mode: screen; }

.seo-article-section { margin-top: 40px; padding: 40px; line-height: 1.8; color: var(--text-main); }
.seo-article-title { border-bottom: 2px solid rgba(var(--primary-rgb), 0.5); padding-bottom: 10px; margin-top: 0; color: var(--primary-color); }
.seo-article-section h3 { color: var(--text-main); margin-top: 30px; }

.icon-auto { display: inline-block; width: 1.4em; height: 1.4em; vertical-align: middle; object-fit: contain; flex-shrink: 0; filter: drop-shadow(0 2px 4px rgba(0,0,0,0.2)); }

/* ============================================================================
   第 5 批次：彈出視窗系統 (Modal) - 整合大師干支與 FateUI
============================================================================ */
/* 1. 遮罩層 */
.fate-modal-overlay { position: fixed; top: 0; left: 0; width: 100vw; height: 100vh; background: rgba(0, 0, 0, 0.45) !important; backdrop-filter: blur(5px) !important; -webkit-backdrop-filter: blur(5px) !important; z-index: 9999; display: flex; align-items: center; justify-content: center; }
body.dark-theme .fate-modal-overlay { background: rgba(0, 0, 0, 0.75) !important; }

/* 2. 彈窗本體 */
.fate-modal { background: var(--bg-card) !important; border: 1px solid var(--primary-color) !important; box-shadow: 0 15px 40px rgba(0, 0, 0, 0.15), 0 0 20px rgba(var(--primary-rgb), 0.1) !important; border-radius: 16px !important; padding: 30px !important; width: 90%; max-width: 400px; text-align: center !important; position: relative; animation: modalFadeIn 0.3s ease-out; }
body.dark-theme .fate-modal { background: rgba(20, 20, 20, 0.98) !important; box-shadow: 0 15px 40px rgba(0, 0, 0, 0.8), 0 0 20px rgba(var(--primary-rgb), 0.2) !important; }
@keyframes modalFadeIn { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: translateY(0); } }

/* 3. 標題與內文 */
.fate-modal-title, #gz-modal-title { color: var(--primary-color) !important; font-size: 1.25rem !important; font-weight: bold !important; margin-top: 0 !important; margin-bottom: 15px !important; border-bottom: 1px dashed rgba(var(--primary-rgb), 0.4) !important; padding-bottom: 12px !important; }
.fate-modal-title.is-danger { color: #e74c3c !important; }
.fate-modal-body, .fate-modal-desc { color: var(--text-main) !important; font-size: 1rem !important; line-height: 1.6 !important; margin-bottom: 25px !important; }

/* 大師干支彈窗專用 */
.gz-column h4 { color: var(--text-main); }
.gz-grid button { background: rgba(var(--primary-rgb), 0.05); border: 1px solid rgba(var(--primary-rgb), 0.3); color: var(--text-main); border-radius: 6px; padding: 8px 0; cursor: pointer; transition: all 0.2s ease; font-size: 1rem; font-family: inherit; }
.gz-grid button:hover { background: rgba(var(--primary-rgb), 0.15); border-color: var(--primary-color); }
.gz-grid button.active, .gz-grid button.selected { background: var(--primary-color); color: #111; font-weight: bold; border-color: var(--primary-color); box-shadow: 0 0 8px rgba(var(--primary-rgb), 0.5); }

/* 4. 底部按鈕區 */
.fate-modal-footer, .fate-modal-actions { display: flex !important; justify-content: center !important; gap: 15px !important; }
.fate-btn-cancel, #btn-gz-cancel { background: rgba(var(--primary-rgb), 0.05) !important; color: var(--text-main) !important; border: 1px solid rgba(var(--primary-rgb), 0.4) !important; border-radius: 6px !important; padding: 8px 24px !important; font-weight: normal !important; cursor: pointer !important; transition: all 0.2s ease !important; }
.fate-btn-cancel:hover, #btn-gz-cancel:hover { border-color: var(--primary-color) !important; background: rgba(var(--primary-rgb), 0.15) !important; color: var(--text-main) !important; }
.fate-btn-confirm { background: transparent !important; color: #e74c3c !important; border: 1px solid #e74c3c !important; border-radius: 6px !important; padding: 8px 24px !important; font-weight: bold !important; cursor: pointer !important; transition: all 0.2s ease !important; }
.fate-btn-confirm:hover { background: #e74c3c !important; color: #fff !important; box-shadow: 0 4px 12px rgba(231, 76, 60, 0.3) !important; }

#btn-gz-confirm { background: var(--primary-color); color: #111; border: none; border-radius: 6px; padding: 8px 24px; font-weight: bold; cursor: pointer; transition: all 0.2s ease; }
#btn-gz-confirm:hover { box-shadow: 0 0 10px rgba(var(--primary-rgb), 0.6); filter: brightness(1.1); }
#btn-gz-clear { background: transparent; border: 1px solid var(--ui-danger, #e74c3c); color: var(--ui-danger, #e74c3c); border-radius: 6px; padding: 8px 24px; cursor: pointer; transition: all 0.2s ease; }
#btn-gz-clear:hover { background: rgba(231, 76, 60, 0.1); box-shadow: 0 0 8px rgba(231, 76, 60, 0.3); }

.fate-modal .ad-placeholder-box { background: rgba(var(--primary-rgb), 0.05); border: 1px dashed rgba(var(--primary-rgb), 0.4); padding: 20px; border-radius: 8px; margin-bottom: 20px; color: var(--text-muted); }

/* 5. Toast 提示 */
.fate-toast { background: var(--bg-card) !important; border: 1px solid var(--primary-color) !important; color: var(--primary-color) !important; box-shadow: 0 4px 15px rgba(0, 0, 0, 0.1) !important; border-radius: 8px !important; padding: 12px 24px !important; font-weight: bold !important; }
body.dark-theme .fate-toast { background: rgba(20, 20, 20, 0.95) !important; box-shadow: 0 4px 15px rgba(0, 0, 0, 0.8) !important; }

/* --- 6. 手機版適配 (RWD) --- */
@media (max-width: 768px) {
    .nav-container { padding: 0 10px; }
    .nav-logo { display: flex !important; align-items: center; white-space: nowrap; }
    .nav-links li.hide-on-mobile { display: none !important; }
    .nav-links { gap: 8px; flex-wrap: nowrap; }
    .nav-links .nav-btn-tool { padding: 6px 12px; font-size: 0.85em; } 
    .main-brand-title { font-size: 2em; }
    .mission-section { padding: 35px 20px; }
    .mission-zh { font-size: 1.1em; }
    .product-card.card-ai { padding: 30px 20px; }
    .content-grid { grid-template-columns: 1fr; }
    #grid-basic .article-card, #grid-advanced .article-card { min-height: auto; margin-bottom: 10px; }
    .ad-slot { margin: 15px 0 !important; min-height: 60px !important; }
    .seo-article-section { padding: 20px 15px !important; margin-top: 20px !important; }
    .seo-article-title { font-size: 1.3rem; }
}