/*

Theme Name: 神算智導 Dark

Theme URI: https://destiny24x7.com

Author: Destiny24x7 Team

Author URI: https://destiny24x7.com

Description: 專為命運諮詢站設計的深色神秘主題，提供紫微斗數、八字、塔羅牌、易經占卜、詩籤等命理諮詢服務。適合女性用戶18-60歲。

Version: 1.2.1

License: GNU General Public License v2 or later

License URI: http://www.gnu.org/licenses/gpl-2.0.html

Text Domain: destiny24x7-dark

Tags: dark, mystical, fortune-telling, chinese-astrology, responsive



/* Logo 大小位置調整 - 方案 F 修正版 */

.site-logo {

    display: flex !important;

    align-items: center !important;

    gap: 0.9rem !important;

}



.site-logo span {

    font-size: 1.6rem !important;

    letter-spacing: 2px !important;

    text-shadow: 0 0 10px rgba(250, 215, 160, 0.3) !important;

    line-height: 1 !important;

    display: flex !important;

    align-items: center !important;

}



.logo-icon-svg {

    width: 45px !important;

    height: 45px !important;

    display: block !important;

    vertical-align: middle !important;

}



/* ===========================

   CSS 變數定義（方便未來調整）

   =========================== */

:root {

    --primary-red: #E74C3C;

    --coral-pink: #EC7063;

    --gold: #FAD7A0;

    --dark-bg: #17202A;

    --darker-bg: #0F141C;

    --card-bg: #212F3D;

    --text-light: #B0B8C1;

    --text-muted: #7A8590;

    --border-color: rgba(231, 76, 60, 0.2);

    --border-light: rgba(231, 76, 60, 0.1);

    --site-max-width: 85%;

    --site-padding: 0 4rem;

}

/* ===========================

   全站版寬統一設定 (85%)

   =========================== */

/* 導航列 container */

.nav-container {

    max-width: var(--site-max-width) !important;

    padding: var(--site-padding) !important;

}

/* 所有 section container */

.section-container {

    max-width: var(--site-max-width) !important;

    padding: 5rem 4rem !important;

}

/* Hero 區塊 containers */

.hero-container-new,

.sticks-hero-container,

.sticks-section-container {

    max-width: var(--site-max-width) !important;

    padding: var(--site-padding) !important;

}

/* 調整 grid 比例 */

.hero-container-new,

.sticks-hero-container {

    grid-template-columns: 1.2fr 1fr !important;

    gap: 3rem !important;

}

/* 頁面內容區 */

.page-content-wrapper {

    max-width: var(--site-max-width) !important;

    margin: 0 auto !important;

}

/* 確保所有主要 container 統一 */

.container,

.entry-content {

    max-width: var(--site-max-width) !important;

    margin-left: auto !important;

    margin-right: auto !important;

}

/* ===========================
   Tarot 頁面專用修正 (覆蓋85%寬度限制)
   =========================== */
body:has(.tarot-page) .container,
body:has(.tarot-page) .entry-content,
body:has(.tarot-page) .page-content-wrapper,
body:has(.tarot-page) .section-container,
body:has(.tarot-page) article,
body:has(.tarot-page) #primary,
body:has(.tarot-page) .site-main,
body:has(.tarot-page) main {
    max-width: 100% !important;
    width: 100% !important;
    padding: 0 !important;
    margin: 0 !important;
    overflow-x: hidden !important;
}

.tarot-page {
    width: 100% !important;
    max-width: 100% !important;
    overflow-x: hidden !important;
}

/* ===========================
   占卜頁面手機版全寬修正
   塔羅單牌 / 易經占卜 / 詩籤占卜
   =========================== */
@media (max-width: 767px) {
    body:has(.app-container) .container,
    body:has(.app-container) .entry-content,
    body:has(.app-container) .page-content-wrapper,
    body:has(.app-container) .section-container,
    body:has(.app-container) article,
    body:has(.app-container) #primary,
    body:has(.app-container) .site-main,
    body:has(.app-container) main,
    body:has(.main-container) .container,
    body:has(.main-container) .entry-content,
    body:has(.main-container) .page-content-wrapper,
    body:has(.main-container) .section-container,
    body:has(.main-container) article,
    body:has(.main-container) #primary,
    body:has(.main-container) .site-main,
    body:has(.main-container) main,
    body:has(.poetry-slip) .container,
    body:has(.poetry-slip) .entry-content,
    body:has(.poetry-slip) .page-content-wrapper,
    body:has(.poetry-slip) .section-container,
    body:has(.poetry-slip) article,
    body:has(.poetry-slip) #primary,
    body:has(.poetry-slip) .site-main,
    body:has(.poetry-slip) main,
    body:has(.sticks-page) .container,
    body:has(.sticks-page) .entry-content,
    body:has(.sticks-page) .page-content-wrapper,
    body:has(.sticks-page) .section-container,
    body:has(.sticks-page) .sticks-section-container,
    body:has(.sticks-page) .sticks-hero-container,
    body:has(.sticks-page) article,
    body:has(.sticks-page) #primary,
    body:has(.sticks-page) .site-main,
    body:has(.sticks-page) main {
        max-width: 100% !important;
        width: 100% !important;
        padding: 0 !important;
        margin: 0 !important;
        overflow-x: hidden !important;
    }
}

/* 響應式調整 */

@media (max-width: 1200px) {

    :root {

        --site-max-width: 90%;

        --site-padding: 0 2rem;

    }

}

@media (max-width: 767px) {

    :root {

        --site-max-width: 100%;

        --site-padding: 0 0.5rem;

    }

    .section-container {

        padding: 3rem 1rem !important;

    }

}

/* ===========================

   全域設定

   =========================== */

* {

    margin: 0;

    padding: 0;

    box-sizing: border-box;

}



body {

    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, "Microsoft JhengHei", "PingFang TC", "Noto Sans TC", sans-serif;

    background: #17202A;

    color: #ffffff;

    overflow-x: hidden;

    line-height: 1.6;

    font-size: 16px;

}



/* ===========================

   導航列樣式

   =========================== */

nav {

    position: fixed;

    top: 0;

    width: 100%;

    background: rgba(23, 32, 42, 0.95);

    backdrop-filter: blur(10px);

    z-index: 1000;

    padding: 0.8rem 0;

    border-bottom: 1px solid rgba(231, 76, 60, 0.2);

}



.nav-container {

    max-width: 1200px;

    margin: 0 auto;

    display: flex;

    justify-content: space-between;

    align-items: center;

    padding: 0 2rem;

}



.logo {

    display: flex;

    align-items: center;

    gap: 0.8rem;

    font-size: 1.5rem;

    font-weight: bold;

    color: #FAD7A0;

    text-decoration: none;

}



.logo-icon {

    width: 40px;

    height: 40px;

    background: linear-gradient(135deg, #E74C3C 0%, #EC7063 100%);

    border-radius: 50%;

    display: flex;

    align-items: center;

    justify-content: center;

    font-size: 1.8rem;

    position: relative;

    animation: rotate-slow 10s linear infinite;

    box-shadow: 0 0 20px rgba(231, 76, 60, 0.4);

}



@keyframes rotate-slow {

    to {

        transform: rotate(360deg);

    }

}



.nav-links {

    display: flex;

    gap: 2rem;

    list-style: none;

    align-items: center;

}



.nav-item {

    position: relative;

}



.nav-links a {

    color: #B0B8C1;

    text-decoration: none;

    transition: color 0.3s;

    font-size: 1rem;

    padding: 0.5rem 0;

    display: block;

}



.nav-links a:hover {

    color: #FAD7A0;

    text-shadow: 0 0 10px rgba(250, 215, 160, 0.5);

}



/* 下拉選單 */

.dropdown {

    position: absolute;

    top: 100%;

    left: 0;

    background: #212F3D;

    border: 1px solid rgba(231, 76, 60, 0.2);

    border-radius: 8px;

    min-width: 200px;

    opacity: 0;

    visibility: hidden;

    transform: translateY(-10px);

    transition: all 0.3s ease;

    margin-top: 0.5rem;

    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.5);

}



.nav-item:hover .dropdown {

    opacity: 1;

    visibility: visible;

    transform: translateY(0);

}



.dropdown a {

    padding: 0.8rem 1.2rem;

    display: block;

    border-bottom: 1px solid rgba(231, 76, 60, 0.1);

    font-size: 0.9rem;

}



.dropdown a:last-child {

    border-bottom: none;

}



.dropdown a:hover {

    background: rgba(231, 76, 60, 0.1);

    color: #FAD7A0;

}



/* 語言切換器 */

.language-switcher {

    display: flex;

    gap: 0.5rem;

    align-items: center;

    margin-left: 1rem;

    padding: 0.4rem 0.8rem;

    background: rgba(231, 76, 60, 0.1);

    border-radius: 20px;

    border: 1px solid rgba(231, 76, 60, 0.2);

}



.lang-btn {

    padding: 0.3rem 0.6rem;

    background: transparent;

    border: none;

    color: #B0B8C1;

    cursor: pointer;

    border-radius: 10px;

    transition: all 0.3s;

    font-size: 0.9rem;

    display: flex;

    align-items: center;

    gap: 0.3rem;

}



.lang-btn.active {

    background: #E74C3C;

    color: white;

}



.lang-btn:hover:not(.active) {

    background: rgba(231, 76, 60, 0.2);

    color: white;

}



.login-btn {

    background: linear-gradient(135deg, #E74C3C 0%, #EC7063 100%);

    color: white;

    padding: 0.6rem 1.5rem;

    border-radius: 25px;

    text-decoration: none;

    transition: transform 0.3s, box-shadow 0.3s;

    font-weight: 500;

    white-space: nowrap;

    box-shadow: 0 0 20px rgba(231, 76, 60, 0.3);

}



.login-btn:hover {

    transform: translateY(-2px);

    box-shadow: 0 10px 30px rgba(231, 76, 60, 0.4);

}



/* ===========================

   Hero 區塊

   =========================== */

.hero {

    min-height: 100vh;

    display: flex;

    align-items: center;

    position: relative;

    overflow: hidden;

    padding-top: 80px;

    background: #0F141C;

}



.stars {

    position: absolute;

    width: 100%;

    height: 100%;

    background-image:

        radial-gradient(2px 2px at 20% 30%, white, transparent),

        radial-gradient(2px 2px at 60% 70%, white, transparent),

        radial-gradient(1px 1px at 50% 50%, white, transparent);

    background-size: 200px 200px;

    animation: stars 50s linear infinite;

    opacity: 0.3;

}



@keyframes stars {

    to {

        transform: translateY(-200px);

    }

}



.hero-container {

    max-width: 1200px;

    margin: 0 auto;

    padding: 2rem;

    display: grid;

    grid-template-columns: 1fr 1fr;

    gap: 4rem;

    align-items: center;

    position: relative;

}



.hero-content h1 {

    font-size: 3rem;

    line-height: 1.2;

    margin-bottom: 1rem;

    color: #FAD7A0;

    text-shadow: 0 0 30px rgba(250, 215, 160, 0.5);

}



.hero-content .subtitle {

    font-size: 1.3rem;

    color: #B0B8C1;

    margin-bottom: 2rem;

}



.cta-buttons {

    display: flex;

    gap: 1rem;

    margin-top: 2rem;

}



.cta-primary {

    background: linear-gradient(135deg, #E74C3C 0%, #EC7063 100%);

    color: white;

    padding: 1rem 2rem;

    border-radius: 30px;

    text-decoration: none;

    font-weight: bold;

    transition: all 0.3s;

    display: inline-flex;

    align-items: center;

    gap: 0.5rem;

    box-shadow: 0 0 30px rgba(231, 76, 60, 0.4);

}



.cta-primary:hover {

    transform: translateY(-3px) scale(1.05);

    box-shadow: 0 15px 40px rgba(231, 76, 60, 0.5);

}



.cta-secondary {

    background: transparent;

    color: #E74C3C;

    padding: 1rem 2rem;

    border: 2px solid #E74C3C;

    border-radius: 30px;

    text-decoration: none;

    font-weight: bold;

    transition: all 0.3s;

}



.cta-secondary:hover {

    background: rgba(231, 76, 60, 0.1);

    color: #FAD7A0;

}



/* 神秘動畫效果 */

.hero-animation {

    position: relative;

    width: 100%;

    height: 500px;

    display: flex;

    align-items: center;

    justify-content: center;

}



.mystical-orb {

    position: relative;

    width: 300px;

    height: 300px;

    border-radius: 50%;

    background: radial-gradient(circle at 30% 30%, rgba(231, 76, 60, 0.3), transparent);

    box-shadow: 

        0 0 60px rgba(231, 76, 60, 0.3),

        inset 0 0 60px rgba(231, 76, 60, 0.2);

    animation: pulse 4s ease-in-out infinite;

}



@keyframes pulse {

    0%, 100% {

        transform: scale(1);

        opacity: 0.8;

    }

    50% {

        transform: scale(1.05);

        opacity: 1;

    }

}



.rotating-ring {

    position: absolute;

    top: 50%;

    left: 50%;

    transform: translate(-50%, -50%);

    width: 350px;

    height: 350px;

    border: 2px solid rgba(231, 76, 60, 0.3);

    border-radius: 50%;

    animation: rotate 20s linear infinite;

}



.rotating-ring::before {

    content: '';

    position: absolute;

    top: -5px;

    left: 50%;

    width: 10px;

    height: 10px;

    background: #E74C3C;

    border-radius: 50%;

    box-shadow: 0 0 20px #E74C3C;

}



@keyframes rotate {

    to {

        transform: translate(-50%, -50%) rotate(360deg);

    }

}



.energy-particle {

    position: absolute;

    width: 4px;

    height: 4px;

    background: #E74C3C;

    border-radius: 50%;

    animation: float 10s ease-in-out infinite;

    opacity: 0.6;

}



@keyframes float {

    0%, 100% {

        transform: translateY(0) translateX(0);

        opacity: 0;

    }

    50% {

        opacity: 1;

    }

    100% {

        transform: translateY(-500px) translateX(50px);

        opacity: 0;

    }

}



/* ===========================

   區塊通用樣式

   =========================== */

.section-container {

    max-width: 1200px;

    margin: 0 auto;

    padding: 5rem 2rem;

}



.section-title {

    text-align: center;

    font-size: 2.5rem;

    margin-bottom: 3rem;

    color: #FAD7A0;

    text-shadow: 0 0 20px rgba(250, 215, 160, 0.4);

}



/* ===========================

   服務卡片

   =========================== */

.services {

    background: #17202A;

    border-top: 1px solid rgba(231, 76, 60, 0.1);

}



.services-grid {

    display: grid;

    grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));

    gap: 2rem;

    margin-top: 3rem;

}



.service-card {

    background: #212F3D;

    border: 1px solid rgba(231, 76, 60, 0.2);

    border-radius: 15px;

    padding: 2rem;

    text-align: center;

    transition: all 0.3s;

    cursor: pointer;

}



.service-card:hover {

    transform: translateY(-10px);

    border-color: #E74C3C;

    box-shadow: 0 20px 40px rgba(231, 76, 60, 0.3);

}



.service-icon {

    font-size: 3rem;

    margin-bottom: 1rem;

}



.service-card h3 {

    font-size: 1.5rem;

    margin-bottom: 1rem;

    color: #EC7063;

}



.service-card p {

    color: #B0B8C1;

    line-height: 1.8;

}



/* ===========================

   特色區塊

   =========================== */

.features {

    background: rgba(15, 20, 28, 0.5);

}



.features-grid {

    display: grid;

    grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));

    gap: 2rem;

}



.feature-item {

    padding: 1.5rem;

    text-align: center;

}



.feature-number {

    font-size: 3rem;

    font-weight: bold;

    background: linear-gradient(135deg, #E74C3C 0%, #EC7063 100%);

    -webkit-background-clip: text;

    -webkit-text-fill-color: transparent;

    background-clip: text;

    margin-bottom: 0.5rem;

}



.feature-item h3 {

    font-size: 1.2rem;

    margin-bottom: 0.5rem;

    color: #fff;

}



.feature-item p {

    color: #7A8590;

    font-size: 0.9rem;

}



/* ===========================

   使用步驟

   =========================== */

.steps-container {

    display: grid;

    grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));

    gap: 2rem;

    margin-top: 3rem;

}



.step-card {

    background: #212F3D;

    border: 1px solid rgba(231, 76, 60, 0.2);

    border-radius: 15px;

    padding: 2rem;

    text-align: center;

    position: relative;

}



.step-number {

    width: 60px;

    height: 60px;

    background: linear-gradient(135deg, #E74C3C 0%, #EC7063 100%);

    border-radius: 50%;

    display: flex;

    align-items: center;

    justify-content: center;

    font-size: 2rem;

    font-weight: bold;

    margin: 0 auto 1.5rem;

    box-shadow: 0 10px 30px rgba(231, 76, 60, 0.3);

}



.step-title {

    font-size: 1.3rem;

    margin-bottom: 1rem;

    color: #fff;

}



.step-desc {

    color: #B0B8C1;

    line-height: 1.8;

}



/* ===========================

   價格方案

   =========================== */

.pricing-cards {

    display: grid;

    grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));

    gap: 2rem;

    margin-top: 3rem;

}



.pricing-card {

    background: #212F3D;

    border: 1px solid rgba(231, 76, 60, 0.2);

    border-radius: 20px;

    padding: 2.5rem;

    text-align: center;

    transition: all 0.3s;

    position: relative;

}



.pricing-card.featured {

    border: 2px solid #E74C3C;

    transform: scale(1.05);

    box-shadow: 0 20px 60px rgba(231, 76, 60, 0.3);

}



.pricing-badge {

    position: absolute;

    top: -15px;

    left: 50%;

    transform: translateX(-50%);

    background: linear-gradient(135deg, #E74C3C 0%, #EC7063 100%);

    color: white;

    padding: 0.5rem 1.5rem;

    border-radius: 20px;

    font-size: 0.9rem;

    font-weight: bold;

}



.pricing-title {

    font-size: 1.5rem;

    margin-bottom: 1rem;

    color: #fff;

}



.pricing-price {

    font-size: 3rem;

    font-weight: bold;

    color: #E74C3C;

    margin-bottom: 0.5rem;

}



.pricing-period {

    color: #B0B8C1;

    margin-bottom: 2rem;

}



.pricing-features {

    list-style: none;

    margin: 2rem 0;

    text-align: left;

}



.pricing-features li {

    padding: 0.8rem 0;

    color: #B0B8C1;

    border-bottom: 1px solid rgba(231, 76, 60, 0.1);

    position: relative;

    padding-left: 1.5rem;

}



.pricing-features li::before {

    content: '✓';

    color: #E74C3C;

    position: absolute;

    left: 0;

}



.pricing-btn {

    display: inline-flex;

    align-items: center;

    justify-content: center;

    background: linear-gradient(135deg, #E74C3C 0%, #EC7063 100%);

    color: white;

    padding: 0.8rem 1.5rem;

    border-radius: 30px;

    text-decoration: none;

    font-weight: bold;

    font-size: 0.95rem;

    transition: all 0.3s;

    margin-top: 1.5rem;

    line-height: 1.4;

    text-align: center;

}



.pricing-btn:hover {

    transform: translateY(-2px);

    box-shadow: 0 8px 20px rgba(231, 76, 60, 0.4);

}



/* ===========================

   24小時服務區塊

   =========================== */

.always-on {

    background: radial-gradient(circle at 30% 50%, rgba(231, 76, 60, 0.05) 0%, transparent 50%);

}



.always-on-content {

    text-align: center;

    max-width: 800px;

    margin: 0 auto;

}



.always-on-title {

    font-size: 2rem;

    margin-bottom: 1rem;

    color: #fff;

}



.always-on-features {

    display: grid;

    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));

    gap: 2rem;

    margin-top: 3rem;

}



.always-on-item {

    padding: 1.5rem;

    background: rgba(33, 47, 61, 0.5);

    border-radius: 15px;

    border: 1px solid rgba(231, 76, 60, 0.1);

}



/* ===========================

   頁尾

   =========================== */

footer {
    background: rgba(15, 20, 28, 0.95);
    border-top: 1px solid rgba(231, 76, 60, 0.2);
    padding-top: 4rem;
}

/* ===========================
   ★★★ 漢堡選單樣式 ★★★
   請將此段 CSS 添加到 style.css 檔案
   建議放在「響應式設計」區塊之前（約第 1660 行之後）
   =========================== */

/* 漢堡按鈕 - 桌面版隱藏 */
.mobile-menu-toggle {
    display: none;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    width: 44px;
    height: 44px;
    padding: 8px;
    background: transparent;
    border: 1px solid rgba(231, 76, 60, 0.3);
    border-radius: 8px;
    cursor: pointer;
    transition: all 0.3s;
    z-index: 1001;
}

.mobile-menu-toggle:hover {
    background: rgba(231, 76, 60, 0.1);
    border-color: rgba(231, 76, 60, 0.5);
}

.hamburger-line {
    display: block;
    width: 22px;
    height: 2px;
    background: #FAD7A0;
    border-radius: 2px;
    transition: all 0.3s;
    margin: 3px 0;
}

/* 漢堡按鈕 active 狀態（變成 X） */
.mobile-menu-toggle.active .hamburger-line:nth-child(1) {
    transform: rotate(45deg) translate(5px, 6px);
}

.mobile-menu-toggle.active .hamburger-line:nth-child(2) {
    opacity: 0;
}

.mobile-menu-toggle.active .hamburger-line:nth-child(3) {
    transform: rotate(-45deg) translate(6px, -7px);
}

/* 右側區塊（登入按鈕等） */
.nav-right-section {
    display: flex;
    align-items: center;
    gap: 1rem;
}

/* ===========================
   響應式設計 - 手機版選單
   =========================== */
@media (max-width: 968px) {
    /* 顯示漢堡按鈕 */
    .mobile-menu-toggle {
        display: flex;
    }
    
    /* 導航容器調整 */
    .nav-container {
        flex-wrap: wrap;
        position: relative;
    }
    
    /* 手機版導航選單 */
    .nav-links {
        display: none;
        position: absolute;
        top: 100%;
        left: 0;
        right: 0;
        background: rgba(23, 32, 42, 0.98);
        backdrop-filter: blur(15px);
        border-top: 1px solid rgba(231, 76, 60, 0.2);
        border-bottom: 1px solid rgba(231, 76, 60, 0.2);
        flex-direction: column;
        padding: 1rem 0;
        max-height: calc(100vh - 70px);
        overflow-y: auto;
        box-shadow: 0 10px 30px rgba(0, 0, 0, 0.5);
    }
    
    /* 選單開啟狀態 */
    .nav-links.mobile-open {
        display: flex;
    }
    
    /* 選單項目 */
    .nav-links .nav-item {
        width: 100%;
        border-bottom: 1px solid rgba(255, 255, 255, 0.05);
    }
    
    .nav-links .nav-item:last-child {
        border-bottom: none;
    }
    
    .nav-links .nav-item > a {
        padding: 1rem 2rem;
        display: flex;
        justify-content: space-between;
        align-items: center;
        font-size: 1rem;
    }
    
    /* 有子選單的項目添加箭頭指示 */
    .nav-links .nav-item:has(.dropdown) > a::after {
        content: 'â–¼';
        font-size: 0.7rem;
        opacity: 0.6;
        transition: transform 0.3s;
    }
    
    .nav-links .nav-item.mobile-dropdown-open > a::after {
        transform: rotate(180deg);
    }
    
    /* 手機版下拉選單 */
    .nav-links .dropdown {
        position: static;
        opacity: 1;
        visibility: visible;
        transform: none;
        background: rgba(15, 20, 28, 0.9);
        border: none;
        border-radius: 0;
        margin-top: 0;
        box-shadow: none;
        max-height: 0;
        overflow: hidden;
        transition: max-height 0.3s ease;
    }
    
    .nav-links .nav-item.mobile-dropdown-open .dropdown {
        max-height: 500px;
    }
    
    .nav-links .dropdown a {
        padding: 0.8rem 2rem 0.8rem 3rem;
        font-size: 0.95rem;
        border-bottom: 1px solid rgba(255, 255, 255, 0.03);
    }
    
    .nav-links .dropdown a:hover {
        background: rgba(231, 76, 60, 0.15);
        padding-left: 3.5rem;
    }
    
    /* 防止滾動 */
    body.mobile-menu-open {
        overflow: hidden;
    }
    
    /* 隱藏桌面版登入按鈕，在選單內顯示 */
    .nav-right-section .login-btn {
        display: none;
    }
}

/* 更小螢幕的調整 */
@media (max-width: 480px) {
    .nav-links .nav-item > a {
        padding: 0.9rem 1.5rem;
        font-size: 0.95rem;
    }
    
    .nav-links .dropdown a {
        padding: 0.7rem 1.5rem 0.7rem 2.5rem;
    }
    
    .site-logo span {
        font-size: 1.3rem !important;
    }
}


/* ===========================

   響應式設計

   =========================== */

@media (max-width: 968px) {
    .hero-container {
        grid-template-columns: 1fr;
        gap: 2rem;
        text-align: center;
    }
    
    .hero-content h1 {
        font-size: 2.5rem;
    }
    
    /* ★★★ 漢堡選單手機版樣式 ★★★ */
    
    /* 顯示漢堡按鈕 */
    .mobile-menu-toggle {
        display: flex;
    }
    
    /* 導航容器調整 */
    .nav-container {
        flex-wrap: wrap;
        position: relative;
    }
    
    /* 手機版導航選單 */
    .nav-links {
        display: none;
        position: absolute;
        top: 100%;
        left: 0;
        right: 0;
        background: rgba(23, 32, 42, 0.98);
        backdrop-filter: blur(15px);
        border-top: 1px solid rgba(231, 76, 60, 0.2);
        border-bottom: 1px solid rgba(231, 76, 60, 0.2);
        flex-direction: column;
        padding: 1rem 0;
        max-height: calc(100vh - 70px);
        overflow-y: auto;
        box-shadow: 0 10px 30px rgba(0, 0, 0, 0.5);
    }
    
    /* 選單開啟狀態 */
    .nav-links.mobile-open {
        display: flex;
    }
    
    /* 選單項目 */
    .nav-links .nav-item {
        width: 100%;
        border-bottom: 1px solid rgba(255, 255, 255, 0.05);
    }
    
    .nav-links .nav-item:last-child {
        border-bottom: none;
    }
    
    .nav-links .nav-item > a {
        padding: 1rem 2rem;
        display: flex;
        justify-content: space-between;
        align-items: center;
        font-size: 1rem;
    }
    
    /* 有子選單的項目添加箭頭指示 */
    .nav-links .nav-item:has(.dropdown) > a::after {
        content: 'â–¼';
        font-size: 0.7rem;
        opacity: 0.6;
        transition: transform 0.3s;
    }
    
    .nav-links .nav-item.mobile-dropdown-open > a::after {
        transform: rotate(180deg);
    }
    
    /* 手機版下拉選單 */
    .nav-links .dropdown {
        position: static;
        opacity: 1;
        visibility: visible;
        transform: none;
        background: rgba(15, 20, 28, 0.9);
        border: none;
        border-radius: 0;
        margin-top: 0;
        box-shadow: none;
        max-height: 0;
        overflow: hidden;
        transition: max-height 0.3s ease;
    }
    
    .nav-links .nav-item.mobile-dropdown-open .dropdown {
        max-height: 500px;
    }
    
    .nav-links .dropdown a {
        padding: 0.8rem 2rem 0.8rem 3rem;
        font-size: 0.95rem;
        border-bottom: 1px solid rgba(255, 255, 255, 0.03);
    }
    
    .nav-links .dropdown a:hover {
        background: rgba(231, 76, 60, 0.15);
        padding-left: 3.5rem;
    }
    
    /* 防止滾動 */
    body.mobile-menu-open {
        overflow: hidden;
    }
    
    .section-title {
        font-size: 2rem;
    }
}



@media (max-width: 640px) {

    .hero-content h1 {

        font-size: 2rem;

    }

    

    .hero-content .subtitle {

        font-size: 1.1rem;

    }

    

    .cta-buttons {

        flex-direction: column;

    }

    

    .pricing-card.featured {

        transform: scale(1);

    }

}



/* WordPress 特定樣式 */

.wp-block-image {

    margin-bottom: 1.5rem;

}



.aligncenter {

    text-align: center;

    margin-left: auto;

    margin-right: auto;

}



.alignleft {

    float: left;

    margin-right: 1.5rem;

}



.alignright {

    float: right;

    margin-left: 1.5rem;

}



/* ===========================

   部落格列表樣式

   =========================== */

.blog-section {

    padding: 100px 0 50px;

}



.blog-grid {

    display: grid;

    grid-template-columns: repeat(auto-fill, minmax(350px, 1fr));

    gap: 2rem;

    margin-top: 3rem;

}



.blog-card {

    background: #212F3D;

    border: 1px solid rgba(231, 76, 60, 0.2);

    border-radius: 15px;

    overflow: hidden;

    transition: all 0.3s;

}



.blog-card:hover {

    transform: translateY(-10px);

    border-color: #E74C3C;

    box-shadow: 0 20px 40px rgba(231, 76, 60, 0.2);

}



.blog-thumbnail {

    width: 100%;

    height: 220px;

    overflow: hidden;

}



.blog-thumbnail img {

    width: 100%;

    height: 100%;

    object-fit: cover;

    transition: transform 0.3s;

}



.blog-card:hover .blog-thumbnail img {

    transform: scale(1.1);

}



.blog-content {

    padding: 1.5rem;

}



.blog-meta {

    display: flex;

    gap: 1rem;

    margin-bottom: 1rem;

    font-size: 0.9rem;

}



.blog-date,

.blog-category {

    color: #B0B8C1;

}



.blog-category {

    color: #EC7063;

}



.blog-title {

    font-size: 1.4rem;

    margin-bottom: 1rem;

}



.blog-title a {

    color: #fff;

    text-decoration: none;

    transition: color 0.3s;

}



.blog-title a:hover {

    color: #FAD7A0;

}



.blog-excerpt {

    color: #B0B8C1;

    line-height: 1.8;

    margin-bottom: 1rem;

}



.blog-read-more {

    color: #E74C3C;

    text-decoration: none;

    font-weight: bold;

    transition: color 0.3s;

}



.blog-read-more:hover {

    color: #FAD7A0;

}



/* 分頁樣式 */

.pagination {

    margin-top: 3rem;

    text-align: center;

}



.pagination .nav-links {

    display: flex;

    justify-content: center;

    gap: 0.5rem;

    flex-wrap: wrap;

}



.pagination a,

.pagination .current {

    padding: 0.8rem 1.2rem;

    background: #212F3D;

    border: 1px solid rgba(231, 76, 60, 0.2);

    border-radius: 8px;

    color: #B0B8C1;

    text-decoration: none;

    transition: all 0.3s;

}



.pagination a:hover,

.pagination .current {

    background: linear-gradient(135deg, #E74C3C 0%, #EC7063 100%);

    border-color: transparent;

    color: white;

}



/* 響應式部落格 */

@media (max-width: 767px) {

    .blog-grid {

        grid-template-columns: 1fr;

    }

}



/* ===========================

   紫微斗數報告專用樣式（白底深色文字）

   確保報告區域不受全域深色主題影響

   涵蓋：流年、三年婚緣、事業宮 等所有報告模板

   =========================== */



/* ====== 1. 報告主容器與背景 ====== */

.report-content,

.report-content .section,

.report-content .palace-card,

.section,

.palace-card {

    background: white !important;

    color: #212529 !important;

}



/* ====== 1.5 報告容器寬度調整 - 讓報告更寬敞 ====== */

.container {

    max-width: 90% !important;

    width: 90% !important;

}



.report-content,

.report-header {

    max-width: 100% !important;

}



/* ====== 1.6 報告外層容器寬度調整（PHP 產生的容器）====== */

#ziwei-simple-report-box {

    width: 71vw !important;

    max-width: 1600px !important;

    margin-left: auto !important;

    margin-right: auto !important;

    padding: 20px 40px !important;

    box-sizing: border-box !important;

    position: relative !important;

    left: 50% !important;

    transform: translateX(-50%) !important;

}

@media (max-width: 767px) {
    /* 報告框：100vw 突破技術，無視所有父容器限制 */
    #ziwei-simple-report-box,
    #ziwei-buy-report-box {
        width: 100vw !important;
        max-width: 100vw !important;
        margin-left: calc(-50vw + 50%) !important;
        padding: 0 !important;
        left: auto !important;
        transform: none !important;
        box-sizing: border-box !important;
    }
    /* 報告頁面父容器全寬（雙保險） */
    body:has(#ziwei-simple-report-box) .section-container,
    body:has(#ziwei-buy-report-box) .section-container,
    body:has(#ziwei-simple-report-box) .page-content-wrapper,
    body:has(#ziwei-buy-report-box) .page-content-wrapper,
    body:has(#ziwei-simple-report-box) .entry-content,
    body:has(#ziwei-buy-report-box) .entry-content {
        max-width: 100% !important;
        width: 100% !important;
        padding-left: 0 !important;
        padding-right: 0 !important;
    }
    /* 防止水平捲軸 */
    body:has(#ziwei-simple-report-box),
    body:has(#ziwei-buy-report-box) {
        overflow-x: hidden !important;
    }
}



/* 確保報告內容區域也是全寬 */

#ziwei-report-result,

#ziwei-report-header,

#ziwei-report-chart,

#ziwei-report-analysis,

#ziwei-report-analysis-2,

#ziwei-report-analysis-3,

#ziwei-report-analysis-4 {

    width: 100% !important;

    max-width: 100% !important;

}



/* 確保 .container 不限制寬度 */

.container {

    max-width: 100% !important;

    width: 100% !important;

}



/* ====== 2. 段落文字 - 深灰色 ====== */

.report-content p,

.section p,

.palace-content p,

.palace-content-p p,

.palace-content-p,

.summary-card p,

.harmony-card p,

.score-card .description,

.pattern-item p,

.rating-card p {

    color: #495057 !important;

}



/* ====== 3. 標題顏色 ====== */

/* 紫色系標題（流年、婚緣模板） */

.section .dtn-h3,

.section h3,

.palace-title,

.summary-card h4,

.harmony-card h4,

.score-card .year {

    color: #5B4B8A !important;

}



/* H4 標題 */

.section h4 {

    color: #5B4B8A !important;

}



/* H5 標題 */

.section h5 {

    color: #5B4B8A !important;

}



/* 藍色系標題（事業宮模板） */

.section h3[style*="2563eb"],

.industry-item,

.feature-list strong {

    color: #1e40af !important;

}



/* ====== 4. 星曜名稱與重要文字 ====== */

.star-name {

    color: #5B4B8A !important;

    background: rgba(91, 75, 138, 0.08) !important;

}



.important {

    color: #D84B6C !important;

}



/* ====== 5. Strong 標籤 ====== */

.section strong,

.palace-content strong,

.palace-content-p strong,

.pattern-item strong,

.advice-list strong,

.feature-list strong {

    color: #5B4B8A !important;

}



/* 事業宮模板 - 藍色系 strong */

.advice-list li strong {

    color: #1e40af !important;

}



/* ====== 6. 內容盒子文字顏色 ====== */

.content-box-purple p,

.content-box-blue p,

.content-box-yellow p,

.content-box-red p,

.content-box-pink p,

.content-box-gray p {

    color: #424242 !important;

}



/* 內容盒子 H4 標題顏色 */

.content-box-blue h4 {

    color: #1976d2 !important;

}



.content-box-yellow h4 {

    color: #F57C00 !important;

}



.content-box-red h4 {

    color: #C62828 !important;

}



.content-box-pink h4 {

    color: #D84B6C !important;

}



/* ====== 7. Highlight 盒子 ====== */

/* 紫色系 highlight-box（流年、婚緣） */

.highlight-box h4 {

    color: #5B4B8A !important;

}



.highlight-box p {

    color: #424242 !important;

}



/* 藍色系 highlight-box（事業宮） */

.highlight-box[style*="dbeafe"] h4,

.highlight-box[style*="dbeafe"] p {

    color: #1e40af !important;

}



/* 黃色系 highlight-box */

.highlight-box[style*="fff3cd"] h4,

.highlight-box[style*="fff3cd"] p {

    color: #856404 !important;

}



/* ====== 8. 特殊盒子 ====== */

/* 浪漫框（婚緣模板） */

.romance-box h4 {

    color: #D84B6C !important;

}



.romance-box p {

    color: #880E4F !important;

}



/* 資訊框 */

.info-box h4 {

    color: #1976D2 !important;

}



.info-box p {

    color: #1565C0 !important;

}



/* 警告框（事業宮） */

.warning-box h4 {

    color: #92400e !important;

}



.warning-box p {

    color: #92400e !important;

}



/* 優秀框 */

.excellence-box h4,

.excellence-box p {

    color: #155724 !important;

}



/* 結論框 - 白色文字（深色背景） */

.conclusion-box h4,

.conclusion-box p {

    color: white !important;

}



/* 標語框 - 根據背景調整 */

.slogan-box h2,

.slogan-box p {

    color: white !important;

}



/* 事業宮標語框（黃色背景） */

.slogan-box[style*="fef3c7"] p,

.slogan-box[style*="fde68a"] p {

    color: #92400e !important;

}



/* ====== 9. 列表樣式 ====== */

/* 建議列表 */

.advice-list li {

    color: #212529 !important;

}



/* 特點列表 */

.feature-list li {

    color: #374151 !important;

}



/* 行業列表（事業宮） */

.industry-item {

    color: #1e40af !important;

}



/* 角色列表（事業宮） */

.role-item {

    color: #92400e !important;

}



/* ====== 10. 表格文字 ====== */

.fortune-table td,

.data-table td {

    color: #495057 !important;

}



.fortune-table td:first-child,

.data-table td:first-child {

    color: #5B4B8A !important;

}



/* ====== 11. 卡片類元素 ====== */

/* 摘要卡片 */

.summary-card h4 {

    color: #5B4B8A !important;

}



.summary-card p {

    color: #495057 !important;

}



/* 事業宮摘要卡片（藍色系） */

.summary-card[style*="f8fafc"] h4 {

    color: #1e40af !important;

}



.summary-card[style*="f8fafc"] p {

    color: #475569 !important;

}



/* 分數卡片（婚緣模板） */

.score-card .year {

    color: #5B4B8A !important;

}



.score-card .score {

    color: #D84B6C !important;

}



.score-card .description {

    color: #616161 !important;

}



/* 格局卡片（事業宮） */

.pattern-card h5,

.pattern-card p {

    color: #92400e !important;

}



/* 年齡階段卡片 */

.age-stage-card h4 {

    color: #D84B6C !important;

}



.age-stage-card p {

    color: #424242 !important;

}



/* 評分卡片（事業宮） */

.rating-card h5 {

    color: #1e40af !important;

}



.rating-card p {

    color: #475569 !important;

}



/* ====== 12. 圖表元素 ====== */

.chart-bar .label {

    color: #424242 !important;

}



/* ====== 13. 星級評分 ====== */

.rating-value {

    color: #2563eb !important;

}



/* ====== 14. 高亮標籤 ====== */

.highlight-rose {

    color: #C62828 !important;

    background: #FFE4E9 !important;

}



.highlight-yellow {

    color: #F57C00 !important;

    background: #FFF9C4 !important;

}



.highlight-purple {

    color: #6A1B9A !important;

    background: #E1BEE7 !important;

}



/* ====== 15. Section 內的 ul/li ====== */

.section ul,

.section li {

    color: #374151 !important;

}



/* ========================================

   Logo 大小位置 + 樣式修正 完整版

   ======================================== */



/* Logo 容器 - 垂直置中對齊 */

.site-logo {

    display: flex !important;

    align-items: center !important;

    gap: 0.9rem !important;

}



/* Logo 文字樣式 */

.site-logo span {

    font-size: 1.6rem !important;

    letter-spacing: 2px !important;

    text-shadow: 0 0 10px rgba(250, 215, 160, 0.3) !important;

    line-height: 1 !important;

    display: flex !important;

    align-items: center !important;

}



/* Logo SVG 大小 */

.logo-icon-svg {

    width: 45px !important;

    height: 45px !important;

    display: block !important;

}



/* 文字顏色修正 */

nav .site-logo,

nav .site-logo span,

.main-nav .site-logo,

.main-nav .site-logo span,

.nav-container .site-logo,

.nav-container .site-logo span,

a.site-logo,

a.site-logo span,

.site-logo,

.site-logo span {

    color: #FAD7A0 !important;

    text-decoration: none !important;

    border-bottom: none !important;

}



.site-logo:link,

.site-logo:visited,

.site-logo:hover,

.site-logo:active,

a.site-logo:link,

a.site-logo:visited,

a.site-logo:hover,

a.site-logo:active {

    color: #FAD7A0 !important;

    text-decoration: none !important;

    border-bottom: none !important;

}



.site-logo:hover,

.site-logo:hover span {

    text-shadow: 0 0 20px rgba(250, 215, 160, 0.6) !important;

}



/* Logo å‹•ç•« */

.orbit-outer {

    transform-origin: 20px 20px !important;

    animation: rotateOrbit 12s linear infinite !important;

}



.orbit-inner {

    transform-origin: 20px 20px !important;

    animation: rotateOrbitReverse 8s linear infinite !important;

}



.core {

    transform-origin: 20px 20px !important;

    animation: corePulse 3s ease-in-out infinite !important;

}



.core-ring {

    transform-origin: 20px 20px !important;

    animation: ringBreath 2.5s ease-in-out infinite !important;

}



.star-1 {

    transform-origin: 35px 12px !important;

    animation: twinkle1 2s ease-in-out infinite !important;

}



.star-2 {

    transform-origin: 9px 29px !important;

    animation: twinkle2 2.5s ease-in-out infinite 0.5s !important;

}



.compass {

    transform-origin: 20px 20px !important;

    animation: compassGlow 4s ease-in-out infinite !important;

}



@keyframes rotateOrbit {

    0% { transform: rotate(0deg); }

    100% { transform: rotate(360deg); }

}



@keyframes rotateOrbitReverse {

    0% { transform: rotate(0deg); }

    100% { transform: rotate(-360deg); }

}



@keyframes corePulse {

    0%, 100% { transform: scale(1); filter: brightness(1); }

    50% { transform: scale(1.1); filter: brightness(1.3); }

}



@keyframes ringBreath {

    0%, 100% { opacity: 0.8; transform: scale(1); }

    50% { opacity: 1; transform: scale(1.05); }

}



@keyframes twinkle1 {

    0%, 100% { opacity: 1; transform: scale(1); }

    50% { opacity: 0.3; transform: scale(0.6); }

}



@keyframes twinkle2 {

    0%, 100% { opacity: 1; transform: scale(1); }

    50% { opacity: 0.4; transform: scale(0.7); }

}



@keyframes compassGlow {

    0%, 100% { opacity: 0.9; }

    50% { opacity: 1; filter: drop-shadow(0 0 3px rgba(250, 215, 160, 0.8)); }

}



.site-logo:hover .orbit-outer { animation-duration: 4s !important; }

.site-logo:hover .orbit-inner { animation-duration: 3s !important; }

.site-logo:hover .core { animation-duration: 1s !important; }

.site-logo:hover .star-1,

.site-logo:hover .star-2 { animation-duration: 0.5s !important; }



/* ===========================

   價格方案 - 2024/12 更新版

   新增至 style.css 的 pricing 區塊後面

   =========================== */

/* 4欄佈局優化 */

.pricing-cards-4 {

    display: grid;

    grid-template-columns: repeat(4, 1fr);

    gap: 1.5rem;

    margin-top: 3rem;

}

/* 響應式：平板 */

@media (max-width: 1200px) {

    .pricing-cards-4 {

        grid-template-columns: repeat(2, 1fr);

        gap: 2rem;

    }

    .pricing-card.featured {

        transform: scale(1);

    }

}

/* 響應式：手機 */

@media (max-width: 767px) {

    .pricing-cards-4 {

        grid-template-columns: 1fr;

        gap: 2rem;

    }

    

    .pricing-card {

        padding: 2rem 1.5rem;

    }

}

/* 方案圖示 */

.pricing-icon {

    font-size: 2.5rem;

    margin-bottom: 0.8rem;

}

/* 方案副標題 */

.pricing-subtitle {

    color: #FAD7A0;

    font-size: 0.95rem;

    margin-bottom: 1rem;

    font-weight: 500;

}

/* 原價刪除線 */

.pricing-original-price {

    color: #7A8590;

    font-size: 1rem;

    text-decoration: line-through;

    margin-bottom: 0.3rem;

}

/* 節省標籤 */

.pricing-save {

    color: #2ECC71;

    font-weight: bold;

    font-size: 0.9rem;

}

/* 分隔線 */

.pricing-divider {

    height: 1px;

    background: linear-gradient(90deg, transparent, rgba(231, 76, 60, 0.3), transparent);

    margin: 1.5rem 0;

}

/* 功能區塊標題 */

.pricing-section-title {

    color: #EC7063;

    font-size: 0.85rem;

    font-weight: bold;

    text-align: left;

    margin-bottom: 0.8rem;

    margin-top: 1rem;

}

/* 功能列表優化 */

.pricing-features {

    text-align: left;

    margin: 0.5rem 0 1.5rem 0;

}

.pricing-features li {

    font-size: 0.9rem;

    padding: 0.6rem 0;

    padding-left: 1.8rem;

    position: relative;

}

.pricing-features li::before {

    content: '✓';

    color: #2ECC71;

    position: absolute;

    left: 0;

    font-weight: bold;

}

/* 重點功能高亮 */

.pricing-features li.feature-highlight {

    color: #FAD7A0;

    font-weight: 500;

}

.pricing-features li.feature-highlight::before {

    content: '★';

    color: #FAD7A0;

}

/* 新功能標籤 */

.pricing-features li.feature-new {

    color: #3498DB;

    font-style: italic;

}

.pricing-features li.feature-new::before {

    content: '🔥';

}

/* 首選推薦按鈕特殊樣式 */

.pricing-btn-featured {

    background: linear-gradient(135deg, #E74C3C 0%, #C0392B 50%, #E74C3C 100%);

    background-size: 200% 100%;

    animation: shimmer 2s ease-in-out infinite;

    font-size: 0.95rem;

    padding: 1rem 1.5rem;

}

@keyframes shimmer {

    0% { background-position: 100% 0; }

    50% { background-position: 0% 0; }

    100% { background-position: 100% 0; }

}

/* 即將推出方案樣式 */

.pricing-card-coming {

    opacity: 0.85;

    border: 1px dashed rgba(231, 76, 60, 0.4);

    background: linear-gradient(135deg, #212F3D 0%, #1a252f 100%);

}

.pricing-card-coming:hover {

    opacity: 1;

    transform: translateY(-5px);

}



.pricing-badge-coming {

    background: linear-gradient(135deg, #7F8C8D 0%, #95A5A6 100%);

    color: #fff;

}

/* 禁用按鈕樣式 */

.pricing-btn-disabled {

    background: linear-gradient(135deg, #5D6D7E 0%, #7F8C8D 100%);

    cursor: not-allowed;

    opacity: 0.7;

}

.pricing-btn-disabled:hover {

    transform: none;

    box-shadow: none;

}

/* 首選推薦卡片增強 */

.pricing-card.featured {

    border: 2px solid #E74C3C;

    box-shadow: 

        0 20px 60px rgba(231, 76, 60, 0.25),

        0 0 30px rgba(231, 76, 60, 0.1) inset;

    background: linear-gradient(135deg, #2C3E50 0%, #212F3D 100%);

}

.pricing-card.featured .pricing-title {

    color: #FAD7A0;

}

.pricing-card.featured .pricing-badge {

    background: linear-gradient(135deg, #E74C3C 0%, #C0392B 100%);

    box-shadow: 0 4px 15px rgba(231, 76, 60, 0.4);

    font-size: 0.95rem;

    padding: 0.6rem 1.8rem;

}

/* 卡片 hover 效果優化 */

.pricing-card:not(.pricing-card-coming):hover {

    transform: translateY(-8px);

    box-shadow: 0 25px 50px rgba(231, 76, 60, 0.2);

}

.pricing-card.featured:hover {

    transform: scale(1.02);

}



@media (max-width: 1200px) {

    .pricing-card.featured:hover {

        transform: translateY(-8px);

    }

}

/* ===========================

   紫微斗數報告選擇頁面專用樣式

   Page ID: 1001

   最後更新: 2024/12/11 v3

   修復：統一背景顏色、按鈕文字顏色

   =========================== */

/* 隱藏 WordPress 自動生成的頁面標題 */

body.page-id-1001 .page-header,

body.page-id-1001 .page-title,

body.page-id-1001 .entry-header,

body.page-id-1001 article > header {

    display: none !important;

}

/* ===== 頁面主要容器 - 全部統一背景色 ===== */

body.page-id-1001 .page-content,

body.page-id-1001 .page-body,

body.page-id-1001 .page-content-wrapper,

body.page-id-1001 .entry-content,

body.page-id-1001 .section-container,

body.page-id-1001 article,

body.page-id-1001 #primary,

body.page-id-1001 main,

body.page-id-1001 .site-main {

    background: #0F141C !important;

    max-width: 100% !important;

    width: 100% !important;

    padding: 0 !important;

    margin: 0 !important;

}

body.page-id-1001 .page-content {

    padding-top: 60px !important;

}

/* ===== 紫微頁面主容器 ===== */

body.page-id-1001 .ziwei-page {

    width: 100% !important;

    max-width: 100% !important;

    margin: 0 !important;

    padding: 0 !important;

    background: #0F141C !important;

    position: relative !important;

    left: 0 !important;

    transform: none !important;

}

/* ===== 各區塊統一背景色 ===== */

body.page-id-1001 .zw-hero,

body.page-id-1001 .zw-reports,

body.page-id-1001 .zw-steps,

body.page-id-1001 .zw-faq {

    width: 100% !important;

    margin: 0 !important;

    background: #0F141C !important;

}

body.page-id-1001 .zw-hero {

    padding: 4rem 0 3rem !important;

}

body.page-id-1001 .zw-reports,

body.page-id-1001 .zw-steps {

    padding: 4rem 0 !important;

}



body.page-id-1001 .zw-faq {

    padding: 4rem 0 5rem !important;

}

/* ===== 內容容器 - 70% 寬度置中 ===== */

body.page-id-1001 .zw-container,

body.page-id-1001 .zw-hero-content {

    width: 70% !important;

    max-width: 1400px !important;

    margin: 0 auto !important;

    padding-left: 2rem !important;

    padding-right: 2rem !important;

}

/* ===== Hero CTA 按鈕 - 修復文字顏色 ===== */

body.page-id-1001 .zw-hero-cta {

    color: #FFFFFF !important;

    text-shadow: 0 2px 4px rgba(0, 0, 0, 0.5) !important;

    font-weight: 700 !important;

    letter-spacing: 0.5px !important;

}

body.page-id-1001 .zw-hero-cta:hover,

body.page-id-1001 .zw-hero-cta:visited,

body.page-id-1001 .zw-hero-cta:active {

    color: #FFFFFF !important;

}

/* ===== 報告卡片網格 ===== */

body.page-id-1001 .zw-report-grid {

    display: grid !important;

    grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)) !important;

    gap: 2rem !important;

}

/* ===== 響應式調整 ===== */

@media (max-width: 1200px) {

    body.page-id-1001 .zw-hero-content,

    body.page-id-1001 .zw-container {

        width: 85% !important;

    }

}

@media (max-width: 767px) {

    body.page-id-1001 .zw-hero-content,

    body.page-id-1001 .zw-container {

        width: 95% !important;

        padding-left: 1rem !important;

        padding-right: 1rem !important;

    }

    body.page-id-1001 .zw-report-grid {

        grid-template-columns: 1fr !important;

    }

}

/* ===========================

   新版 Hero 區塊

   =========================== */

.hero-2026 {

    min-height: 100vh;

    display: flex;

    align-items: center;

    justify-content: center;

    padding-top: 80px;

    background: 

        radial-gradient(circle at 75% 50%, rgba(255, 68, 68, 0.12) 0%, transparent 60%),

        radial-gradient(circle at 20% 80%, rgba(231, 76, 60, 0.05) 0%, transparent 40%);

    position: relative;

}



.hero-container-new {

    max-width: 1200px;

    width: 100%;

    padding: 2rem;

    display: grid;

    grid-template-columns: 1.1fr 0.9fr;

    gap: 4rem;

    align-items: center;

    position: relative;

    z-index: 1;

}



.hero-year-badge {

    display: inline-flex;

    align-items: center;

    gap: 6px;

    background: rgba(255, 68, 68, 0.15);

    border: 1px solid rgba(255, 68, 68, 0.4);

    color: #ff6b6b;

    padding: 8px 16px;

    border-radius: 25px;

    font-size: 0.95rem;

    margin-bottom: 1.5rem;

    font-weight: bold;

    animation: pulse-badge 2s ease-in-out infinite;

}



@keyframes pulse-badge {

    0%, 100% { box-shadow: 0 0 0 0 rgba(255, 68, 68, 0.4); }

    50% { box-shadow: 0 0 20px 5px rgba(255, 68, 68, 0.2); }

}



.hero-title-new {

    font-size: 3.5rem;

    line-height: 1.25;

    margin-bottom: 1.5rem;

    font-weight: 800;

    background: linear-gradient(to right, #ffffff 30%, #ffcccc 100%);

    -webkit-background-clip: text;

    -webkit-text-fill-color: transparent;

    background-clip: text;

}



.highlight-text {

    position: relative;

    display: inline-block;

    background: linear-gradient(135deg, #ff4444, #ff6b6b);

    -webkit-background-clip: text;

    -webkit-text-fill-color: transparent;

    background-clip: text;

}



.highlight-text::after {

    content: '';

    position: absolute;

    bottom: 8px;

    left: 0;

    width: 100%;

    height: 10px;

    background: rgba(255, 68, 68, 0.3);

    z-index: -1;

    transform: rotate(-1deg);

    border-radius: 2px;

}



.hero-subtitle-new {

    font-size: 1.15rem;

    color: #b0b0b0;

    margin-bottom: 2.5rem;

    line-height: 1.8;

    max-width: 90%;

}



.hero-subtitle-new strong {

    color: #FAD7A0;

}



.cta-group {

    display: flex;

    gap: 1rem;

    flex-wrap: wrap;

}



.cta-main {

    background: linear-gradient(135deg, #E74C3C 0%, #EC7063 100%);

    color: white;

    padding: 12px 28px;

    border-radius: 30px;

    text-decoration: none;

    font-weight: bold;

    font-size: 1rem;

    transition: all 0.3s;

    box-shadow: 0 4px 15px rgba(231, 76, 60, 0.3);

    display: inline-flex;

    align-items: center;

    justify-content: center;

    gap: 8px;

    line-height: 1.4;

    text-align: center;

}



.cta-main:hover {

    transform: translateY(-2px);

    box-shadow: 0 6px 20px rgba(231, 76, 60, 0.4);

}



.cta-sub {

    background: transparent;

    border: 1px solid #FAD7A0;

    color: #FAD7A0;

    padding: 12px 28px;

    border-radius: 30px;

    text-decoration: none;

    font-weight: bold;

    font-size: 1rem;

    transition: all 0.3s;

    display: inline-flex;

    align-items: center;

    justify-content: center;

    line-height: 1.4;

    text-align: center;

}



.cta-sub:hover {

    background: #FAD7A0;

    color: #0F141C;

    border-color: #FAD7A0;

}





/* ===========================

   行銷卡片模組

   =========================== */

.marketing-widget {

    background: rgba(20, 20, 25, 0.7);

    backdrop-filter: blur(20px);

    -webkit-backdrop-filter: blur(20px);

    border: 1px solid rgba(255, 255, 255, 0.1);

    border-radius: 24px;

    overflow: hidden;

    box-shadow: 0 30px 60px -12px rgba(0, 0, 0, 0.6);

    transform: perspective(1000px) rotateY(-5deg);

    transition: transform 0.4s ease;

}



.marketing-widget:hover {

    transform: perspective(1000px) rotateY(0deg);

}



.widget-top {

    padding: 2rem;

    background: linear-gradient(to bottom, rgba(255,255,255,0.03), transparent);

    border-bottom: 1px solid rgba(255,255,255,0.08);

    text-align: center;

}



.widget-label {

    font-size: 0.95rem;

    color: #888;

    margin-bottom: 0.5rem;

    text-transform: uppercase;

    letter-spacing: 2px;

}



.tool-icons {

    display: flex;

    justify-content: center;

    gap: 25px;

    margin: 1.5rem 0;

}



.tool-item {

    display: flex;

    flex-direction: column;

    align-items: center;

    gap: 10px;

    cursor: pointer;

    transition: transform 0.2s;

    text-decoration: none;

}



.tool-item:hover {

    transform: translateY(-5px);

}



.tool-icon-circle {

    width: 60px;

    height: 60px;

    background: rgba(255,255,255,0.08);

    border-radius: 50%;

    display: flex;

    align-items: center;

    justify-content: center;

    font-size: 1.8rem;

    border: 1px solid rgba(255,255,255,0.1);

    transition: all 0.3s;

}



.tool-item:hover .tool-icon-circle {

    background: linear-gradient(135deg, #ff4444, #ff0066);

    border-color: #ff4444;

    box-shadow: 0 0 25px rgba(255,68,68,0.5);

}



.tool-name {

    font-size: 0.85rem;

    color: #ccc;

}



.widget-note {

    font-size: 0.85rem;

    color: #666;

}



.widget-bottom {

    padding: 2rem;

    background: radial-gradient(circle at 100% 0%, rgba(255,68,68,0.1), transparent 50%);

}



.product-tag {

    background: linear-gradient(135deg, #ff4444, #ff0066);

    color: white;

    font-size: 0.75rem;

    padding: 5px 12px;

    border-radius: 4px;

    font-weight: bold;

    display: inline-block;

    margin-bottom: 1rem;

}



.product-title {

    font-size: 1.5rem;

    margin-bottom: 1.2rem;

    color: white;

}



.product-feature-list {

    list-style: none;

    margin-bottom: 1.5rem;

}



.product-feature-list li {

    display: flex;

    align-items: center;

    gap: 12px;

    margin-bottom: 10px;

    font-size: 0.95rem;

    color: #ddd;

}



.product-feature-list strong {

    color: #FAD7A0;

}



.price-area {

    display: flex;

    justify-content: space-between;

    align-items: center;

    margin-top: 1.5rem;

    padding-top: 1.5rem;

    border-top: 1px solid rgba(255,255,255,0.1);

}



.price-text {

    display: flex;

    flex-direction: column;

}



.current-price {

    font-size: 2rem;

    font-weight: bold;

    color: #ff4444;

}



.original-price {

    font-size: 0.9rem;

    text-decoration: line-through;

    color: #666;

}



.btn-buy-small {

    background: white;

    color: #000;

    padding: 12px 24px;

    border-radius: 25px;

    text-decoration: none;

    font-weight: bold;

    transition: all 0.3s;

}



.btn-buy-small:hover {

    background: linear-gradient(135deg, #ff4444, #ff0066);

    color: white;

}





/* ===========================

   🎬 產品展示區塊 - 方案B：底部播放條

   =========================== */

.product-demo {

    background: linear-gradient(180deg, #0F141C 0%, #17202A 50%, #0F141C 100%);

    position: relative;

    overflow: hidden;

}



.product-demo::before {

    content: '';

    position: absolute;

    top: 0;

    left: 50%;

    transform: translateX(-50%);

    width: 80%;

    height: 1px;

    background: linear-gradient(90deg, transparent, rgba(231, 76, 60, 0.5), transparent);

}



.demo-header {

    text-align: center;

    margin-bottom: 3rem;

}



.demo-badge {

    display: inline-flex;

    align-items: center;

    gap: 8px;

    background: rgba(46, 204, 113, 0.15);

    border: 1px solid rgba(46, 204, 113, 0.4);

    color: #2ECC71;

    padding: 8px 20px;

    border-radius: 25px;

    font-size: 0.9rem;

    margin-bottom: 1.5rem;

    font-weight: bold;

}



.demo-title {

    font-size: 2.8rem;

    margin-bottom: 1rem;

    background: linear-gradient(135deg, #FAD7A0 0%, #ffffff 50%, #FAD7A0 100%);

    -webkit-background-clip: text;

    -webkit-text-fill-color: transparent;

    background-clip: text;

}



.demo-subtitle {

    color: #888;

    font-size: 1.15rem;

    max-width: 600px;

    margin: 0 auto;

    line-height: 1.8;

}



.demo-grid {

    display: grid;

    grid-template-columns: repeat(2, 1fr);

    gap: 2.5rem;

}



.demo-card {

    background: rgba(33, 47, 61, 0.6);

    border: 1px solid rgba(231, 76, 60, 0.2);

    border-radius: 20px;

    overflow: hidden;

    transition: all 0.4s ease;

    position: relative;

}



.demo-card:hover {

    transform: translateY(-10px);

    border-color: rgba(231, 76, 60, 0.5);

    box-shadow: 0 30px 60px rgba(231, 76, 60, 0.15);

}



.demo-card-badge {

    position: absolute;

    top: 20px;

    left: 20px;

    z-index: 10;

    background: linear-gradient(135deg, #ff4444, #ff0066);

    color: white;

    padding: 6px 14px;

    border-radius: 20px;

    font-size: 0.8rem;

    font-weight: bold;

    box-shadow: 0 4px 15px rgba(255, 68, 68, 0.4);

}



.demo-video-wrapper {

    position: relative;

    background: #000;

    aspect-ratio: 16/9;

    overflow: hidden;

}



.demo-video-wrapper video {

    width: 100%;

    height: 100%;

    object-fit: cover;

}



/* ✨ 方案B：底部播放條樣式 */

.video-control-bar {

    position: absolute;

    bottom: 0;

    left: 0;

    right: 0;

    height: 50px;

    background: linear-gradient(to top, rgba(0,0,0,0.85), transparent);

    display: flex;

    align-items: flex-end;

    justify-content: space-between;

    padding: 0 15px 12px;

    cursor: pointer;

    transition: opacity 0.3s;

}



.play-control {

    display: flex;

    align-items: center;

    gap: 10px;

}



.play-btn-small {

    width: 32px;

    height: 32px;

    background: #ff4444;

    border-radius: 50%;

    display: flex;

    align-items: center;

    justify-content: center;

    transition: all 0.3s;

    position: relative;

}



/* 播放三角形 */

.play-btn-small::after {

    content: '';

    width: 0;

    height: 0;

    border-left: 10px solid white;

    border-top: 6px solid transparent;

    border-bottom: 6px solid transparent;

    margin-left: 2px;

}



/* 播放中狀態 - 暫停圖示 */

.play-btn-small.playing::after {

    border: none;

    width: 10px;

    height: 12px;

    background: linear-gradient(to right, white 35%, transparent 35%, transparent 65%, white 65%);

    margin-left: 0;

}



.play-btn-small:hover {

    transform: scale(1.1);

    box-shadow: 0 0 15px rgba(255,68,68,0.5);

}



.play-text {

    color: white;

    font-size: 0.9rem;

    font-weight: 500;

}



.video-duration {

    color: #aaa;

    font-size: 0.8rem;

}



.demo-content {

    padding: 1.8rem;

}



.demo-content-header {

    display: flex;

    align-items: center;

    justify-content: space-between;

    margin-bottom: 1rem;

}



.demo-card-title {

    font-size: 1.4rem;

    color: #fff;

    display: flex;

    align-items: center;

    gap: 10px;

}



.demo-card-title .icon {

    font-size: 1.6rem;

}



.demo-rating {

    display: flex;

    align-items: center;

    gap: 5px;

    color: #FAD7A0;

    font-size: 0.9rem;

}



.demo-card-desc {

    color: #a0a0a0;

    line-height: 1.7;

    margin-bottom: 1.5rem;

    font-size: 0.95rem;

}



.demo-features {

    display: flex;

    flex-wrap: wrap;

    gap: 8px;

    margin-bottom: 1.5rem;

}



.demo-feature-tag {

    background: rgba(255, 68, 68, 0.1);

    border: 1px solid rgba(255, 68, 68, 0.2);

    color: #ff8c8c;

    padding: 6px 12px;

    border-radius: 15px;

    font-size: 0.8rem;

}



.demo-cta {

    display: flex;

    align-items: center;

    justify-content: space-between;

}



.demo-stats {

    display: flex;

    align-items: center;

    gap: 6px;

    font-size: 0.85rem;

    color: #888;

}



.demo-stat-icon {

    color: #2ECC71;

}



.demo-btn {

    background: linear-gradient(135deg, #E74C3C 0%, #EC7063 100%);

    color: white;

    padding: 12px 24px;

    border-radius: 25px;

    text-decoration: none;

    font-weight: bold;

    font-size: 0.95rem;

    transition: all 0.3s;

    display: inline-flex;

    align-items: center;

    gap: 8px;

}



.demo-btn:hover {

    transform: translateY(-2px);

    box-shadow: 0 10px 25px rgba(231, 76, 60, 0.4);

}

/* ===========================

   信任指標（3個版本）

   =========================== */

.trust-indicators {

    display: flex;

    justify-content: center;

    gap: 4rem;

    margin-top: 4rem;

    padding-top: 3rem;

    border-top: 1px solid rgba(255,255,255,0.05);

}

.trust-item {

    text-align: center;

}

.trust-number {

    font-size: 2.2rem;

    font-weight: bold;

    background: linear-gradient(135deg, #ff4444, #FAD7A0);

    -webkit-background-clip: text;

    -webkit-text-fill-color: transparent;

    background-clip: text;

}



.trust-label {

    color: #888;

    font-size: 0.9rem;

    margin-top: 0.3rem;

}





/* ===========================

   服務卡片 - 4欄版

   =========================== */

.services-grid-4 {

    display: grid;

    grid-template-columns: repeat(4, 1fr);

    gap: 1.5rem;

}



.service-link {

    color: #ff4444;

    text-decoration: none;

    font-weight: bold;

    margin-top: 1rem;

    display: inline-block;

    transition: color 0.3s;

}



.service-link:hover {

    color: #FAD7A0;

}





/* ===========================

   價格方案 - 3欄版

   =========================== */

.pricing-cards-3 {

    display: grid;

    grid-template-columns: repeat(3, 1fr);

    gap: 2rem;

    max-width: 1100px;

    margin: 0 auto;

}





/* ===========================

   響應式設計

   =========================== */

@media (max-width: 1024px) {

    .services-grid-4 {

        grid-template-columns: repeat(2, 1fr);

    }

    

    .demo-grid {

        grid-template-columns: 1fr;

        max-width: 600px;

        margin: 0 auto;

    }

    

    .pricing-cards-3 {

        grid-template-columns: 1fr;

        max-width: 400px;

    }

    

    .pricing-card.featured {

        transform: scale(1);

    }

    

    .trust-indicators {

        flex-wrap: wrap;

        gap: 2rem;

    }

}



@media (max-width: 900px) {

    .hero-container-new {

        grid-template-columns: 1fr;

        text-align: center;

        gap: 3rem;

    }

    

    .hero-title-new {

        font-size: 2.5rem;

    }

    

    .hero-subtitle-new {

        margin-left: auto;

        margin-right: auto;

    }

    

    .cta-group {

        justify-content: center;

    }

    

    .marketing-widget {

        transform: none;

        max-width: 420px;

        margin: 0 auto;

    }

    

    .demo-title {

        font-size: 2rem;

    }

}



@media (max-width: 640px) {

    .hero-title-new {

        font-size: 2rem;

    }

    

    .services-grid-4 {

        grid-template-columns: repeat(2, 1fr);

    }



    .cta-group {

        flex-direction: column;

    }

    

    .tool-icons {

        gap: 15px;

    }

    

    .tool-icon-circle {

        width: 50px;

        height: 50px;

        font-size: 1.4rem;

    }

    

    .trust-indicators {

        gap: 1.5rem;

    }

    

    .trust-number {

        font-size: 1.8rem;

    }

    

    .demo-cta {

        flex-direction: column;

        gap: 1rem;

    }

    

    .price-area {

        flex-direction: column;

        gap: 1rem;

        text-align: center;

    }

}


/* ===========================

   Page ID: 707 詩籤智占頁面樣式

   修復標題與內容之間的間距問題

   =========================== */

/* 移除頁面標題的下方間距 */

body.page-id-707 .page-header {

    margin-bottom: 0 !important;

    padding-bottom: 0 !important;

}



/* 移除 section-container 的上方間距 */

body.page-id-707 .page-body .section-container {

    padding-top: 0 !important;

}



/* 移除 entry-content 的上方間距 */

body.page-id-707 .entry-content {

    margin-top: 0 !important;

    padding-top: 0 !important;

}

/* ===========================
   首頁專用樣式更新 - 2025/12/01
   使用 body.home 選擇器確保只影響首頁
   =========================== */

/* ===========================
   1. 版寬調整：85% → 80% (只影響首頁)
   =========================== */
body.home .hero-container-new,
body.home .hero.hero-2026 .section-container {
    max-width: 80% !important;
}

/* ===========================
   2. Hero 區塊背景更新
   =========================== */
body.home .hero-2026 {
    min-height: 100vh;
    display: flex;
    align-items: center;
    justify-content: center;
    padding-top: 80px;
    padding-bottom: 40px;
    /* 背景光暈調整為暖色調 */
    background: radial-gradient(circle at 75% 40%, rgba(231, 76, 60, 0.05) 0%, transparent 60%);
    position: relative;
}

/* ===========================
   3. Hero 容器
   =========================== */
body.home .hero-container-new {
    max-width: 1200px;
    width: 100%;
    padding: 2rem;
    display: grid;
    grid-template-columns: 1.1fr 0.9fr;
    gap: 4rem;
    align-items: center;
    position: relative;
    z-index: 1;
}

/* ===========================
   4. 年份徽章 - 珊瑚粉
   =========================== */
body.home .hero-year-badge {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    background: rgba(231, 76, 60, 0.1);
    border: 1px solid rgba(231, 76, 60, 0.2);
    color: #EC7063;
    padding: 8px 16px;
    border-radius: 30px;
    font-size: 0.9rem;
    margin-bottom: 1.5rem;
    font-weight: bold;
    letter-spacing: 0.5px;
    animation: none; /* 移除原本的動畫 */
}

/* ===========================
   5. H1 標題：金色
   =========================== */
body.home .hero-title-new {
    font-size: 3.5rem;
    line-height: 1.25;
    margin-bottom: 1.5rem;
    font-weight: 800;
    color: #FAD7A0;
    text-shadow: 0 0 20px rgba(250, 215, 160, 0.3);
    /* 覆蓋原本的漸層 */
    background: none;
    -webkit-background-clip: unset;
    -webkit-text-fill-color: #FAD7A0;
    background-clip: unset;
}

/* ===========================
   6. 強調文字：珊瑚粉
   =========================== */
body.home .highlight-text {
    color: #EC7063;
    -webkit-text-fill-color: #EC7063;
    background: none;
    -webkit-background-clip: unset;
    background-clip: unset;
    position: relative;
    z-index: 1;
}

body.home .highlight-text::after {
    content: '';
    position: absolute;
    bottom: 5px;
    left: 0;
    width: 100%;
    height: 10px;
    background: rgba(236, 112, 99, 0.2);
    z-index: -1;
    transform: skewX(-10deg);
}

/* ===========================
   7. 副標題
   =========================== */
body.home .hero-subtitle-new {
    font-size: 1.15rem;
    color: #B0B8C1;
    margin-bottom: 2.5rem;
    line-height: 1.8;
    max-width: 90%;
}

body.home .hero-subtitle-new strong {
    color: #FAD7A0;
}

/* ===========================
   8. 新增：特色功能標籤
   =========================== */
body.home .feature-bullets {
    display: flex;
    gap: 15px;
    margin-bottom: 2.5rem;
    flex-wrap: wrap;
}

body.home .bullet-item {
    display: flex;
    align-items: center;
    gap: 6px;
    font-size: 0.9rem;
    color: #B0B8C1;
    background: rgba(255, 255, 255, 0.03);
    border: 1px solid rgba(231, 76, 60, 0.1);
    padding: 6px 12px;
    border-radius: 8px;
}

/* ===========================
   9. CTA 按鈕組
   =========================== */
body.home .cta-group {
    display: flex;
    gap: 1rem;
    flex-wrap: wrap;
}

/* 主按鈕：漸層紅 */
body.home .cta-main {
    background: linear-gradient(135deg, #E74C3C 0%, #EC7063 100%);
    color: white;
    padding: 12px 28px;
    border-radius: 30px;
    text-decoration: none;
    font-weight: bold;
    font-size: 1rem;
    transition: all 0.3s;
    box-shadow: 0 4px 15px rgba(231, 76, 60, 0.3);
    border: none;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    line-height: 1.4;
    text-align: center;
}

body.home .cta-main:hover {
    transform: translateY(-2px);
    box-shadow: 0 6px 20px rgba(231, 76, 60, 0.4);
}

/* 次按鈕：金色邊框風格 */
body.home .cta-sub {
    background: transparent;
    border: 1px solid #FAD7A0;
    color: #FAD7A0;
    padding: 12px 28px;
    border-radius: 30px;
    text-decoration: none;
    font-weight: bold;
    font-size: 1rem;
    transition: all 0.3s;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    line-height: 1.4;
    text-align: center;
}

body.home .cta-sub:hover {
    background: #FAD7A0;
    color: #0F141C;
    border-color: #FAD7A0;
}

/* ===========================
   10. 行銷卡片模組
   =========================== */
body.home .marketing-widget {
    background: rgba(33, 47, 61, 0.85);
    backdrop-filter: blur(25px);
    -webkit-backdrop-filter: blur(25px);
    border: 1px solid rgba(231, 76, 60, 0.1);
    border-radius: 24px;
    overflow: hidden;
    box-shadow: 0 20px 40px -10px rgba(0, 0, 0, 0.5);
    position: relative;
    transform: perspective(1000px) rotateY(-5deg);
    transition: transform 0.4s ease;
}

body.home .marketing-widget:hover {
    transform: perspective(1000px) rotateY(0deg);
}

/* Widget 上半部 */
body.home .widget-top {
    padding: 2rem;
    background: linear-gradient(to bottom, rgba(255, 255, 255, 0.02), transparent);
    border-bottom: 1px solid rgba(231, 76, 60, 0.1);
    text-align: center;
}

body.home .widget-label {
    font-size: 0.85rem;
    color: #7A8590;
    margin-bottom: 1rem;
    text-transform: uppercase;
    letter-spacing: 1.5px;
    font-weight: 600;
}

/* 工具圖標 */
body.home .tool-icons {
    display: flex;
    justify-content: center;
    gap: 25px;
    margin-bottom: 1rem;
}

body.home .tool-item {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 10px;
    cursor: pointer;
    transition: transform 0.2s;
    text-decoration: none;
}

body.home .tool-item:hover {
    transform: translateY(-5px);
}

body.home .tool-icon-circle {
    width: 56px;
    height: 56px;
    background: #17202A;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.6rem;
    border: 1px solid rgba(231, 76, 60, 0.1);
    transition: all 0.3s;
    color: #FAD7A0;
    position: relative;
}

body.home .tool-item:hover .tool-icon-circle {
    background: #E74C3C;
    border-color: #E74C3C;
    color: white;
    box-shadow: 0 0 15px rgba(231, 76, 60, 0.3);
}

body.home .tool-name {
    font-size: 0.8rem;
    color: #B0B8C1;
}

/* Free 徽章 */
body.home .free-badge {
    display: inline-block;
    background: linear-gradient(135deg, #E74C3C 0%, #EC7063 100%);
    color: white;
    font-size: 0.6rem;
    padding: 2px 6px;
    border-radius: 4px;
    font-weight: bold;
    position: absolute;
    top: -5px;
    right: -12px;
    box-shadow: 0 2px 5px rgba(0, 0, 0, 0.3);
}

/* Widget 下半部 */
body.home .widget-bottom {
    padding: 2rem;
    background: radial-gradient(circle at 100% 0%, rgba(231, 76, 60, 0.05), transparent 60%);
}

body.home .product-header {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    margin-bottom: 1rem;
}

body.home .product-tag {
    background: linear-gradient(135deg, #E74C3C 0%, #EC7063 100%);
    color: white;
    font-size: 0.7rem;
    padding: 4px 10px;
    border-radius: 4px;
    font-weight: bold;
}

/* 產品標題：珊瑚粉 */
body.home .product-title {
    font-size: 1.3rem;
    margin-bottom: 0.2rem;
    color: #EC7063;
}

body.home .product-sub {
    font-size: 0.9rem;
    color: #7A8590;
    margin-bottom: 1.2rem;
}

/* 報告特色列表 */
body.home .report-features {
    margin-bottom: 1.5rem;
}

body.home .report-item {
    display: flex;
    align-items: flex-start;
    gap: 10px;
    margin-bottom: 10px;
    font-size: 0.9rem;
    color: #B0B8C1;
    padding: 10px;
    background: #17202A;
    border-radius: 8px;
    border: 1px solid transparent;
    transition: border-color 0.3s;
}

body.home .report-item:hover {
    border-color: rgba(231, 76, 60, 0.1);
}

body.home .report-icon {
    color: #EC7063;
    font-size: 1.1rem;
}

body.home .report-text strong {
    color: #FAD7A0;
}

/* 價格區域 */
body.home .price-area {
    display: flex;
    justify-content: space-between;
    align-items: center;
    border-top: 1px solid rgba(231, 76, 60, 0.1);
    padding-top: 1.2rem;
}

body.home .price-text {
    display: flex;
    flex-direction: column;
}

body.home .price-label {
    font-size: 0.8rem;
    color: #7A8590;
    display: block;
}

/* 價格數字：漸層紅 */
body.home .current-price {
    font-size: 1.8rem;
    font-weight: bold;
    background: linear-gradient(135deg, #E74C3C 0%, #EC7063 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
    color: #E74C3C;
}

body.home .original-price {
    font-size: 0.85rem;
    color: #7A8590;
    text-decoration: line-through;
}

/* 購買按鈕：金色邊框 */
body.home .btn-buy-small {
    background: transparent;
    color: #FAD7A0;
    padding: 8px 24px;
    border-radius: 20px;
    text-decoration: none;
    font-weight: bold;
    border: 1px solid #FAD7A0;
    transition: all 0.2s;
}

body.home .btn-buy-small:hover {
    background: #FAD7A0;
    color: #0F141C;
    box-shadow: 0 0 15px rgba(250, 215, 160, 0.3);
}

/* ===========================
   11. 響應式設計（首頁專用）
   =========================== */
@media (max-width: 900px) {
    body.home .hero-container-new {
        grid-template-columns: 1fr;
        gap: 3rem;
        text-align: center;
    }

    body.home .hero-title-new {
        font-size: 2.5rem;
    }

    body.home .hero-subtitle-new {
        margin-left: auto;
        margin-right: auto;
    }

    body.home .feature-bullets {
        justify-content: center;
    }

    body.home .cta-group {
        justify-content: center;
    }

    body.home .marketing-widget {
        transform: none;
        margin: 0 auto;
        max-width: 450px;
    }

    body.home .price-area {
        flex-direction: row;
    }
}

@media (max-width: 640px) {
    body.home .hero-title-new {
        font-size: 2rem;
    }

    body.home .cta-group {
        flex-direction: column;
    }

    body.home .tool-icons {
        gap: 15px;
    }

    body.home .tool-icon-circle {
        width: 50px;
        height: 50px;
        font-size: 1.4rem;
    }

    body.home .price-area {
        flex-direction: column;
        gap: 1rem;
        text-align: center;
    }
}

/* ===========================
   報告項目連結樣式 - 安全版
   只影響首頁 marketing-widget 內的元素
   =========================== */

/* 可點擊的報告項目 */
body.home .marketing-widget .report-item-link {
    display: flex;
    align-items: center;
    gap: 12px;
    margin-bottom: 10px;
    font-size: 0.9rem;
    color: #B0B8C1;
    padding: 12px 14px;
    background: #17202A;
    border-radius: 10px;
    border: 1px solid rgba(231, 76, 60, 0.1);
    transition: all 0.3s ease;
    text-decoration: none;
    cursor: pointer;
}

body.home .marketing-widget .report-item-link:hover {
    border-color: rgba(231, 76, 60, 0.4);
    background: rgba(231, 76, 60, 0.08);
    transform: translateX(5px);
}

body.home .marketing-widget .report-item-link:hover .report-arrow {
    opacity: 1;
    transform: translateX(3px);
}

body.home .marketing-widget .report-item-link:hover strong {
    color: #FAD7A0;
}

/* 報告圖標 */
body.home .marketing-widget .report-icon {
    font-size: 1.3rem;
    flex-shrink: 0;
    width: 36px;
    height: 36px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: rgba(231, 76, 60, 0.1);
    border-radius: 8px;
}

/* 報告文字區 */
body.home .marketing-widget .report-text {
    flex: 1;
    display: flex;
    flex-direction: column;
    gap: 2px;
}

body.home .marketing-widget .report-text strong {
    color: #EC7063;
    font-size: 0.95rem;
    transition: color 0.3s;
}

body.home .marketing-widget .report-desc {
    color: #7A8590;
    font-size: 0.8rem;
    line-height: 1.4;
}

/* ç®­é ­ */
body.home .marketing-widget .report-arrow {
    color: #EC7063;
    font-size: 1rem;
    opacity: 0.5;
    transition: all 0.3s;
    flex-shrink: 0;
}

/* 產品副標題 */
body.home .marketing-widget .product-sub {
    font-size: 0.85rem;
    color: #7A8590;
    margin-bottom: 1rem;
    padding-left: 2px;
}

/* 報告特色區塊 */
body.home .marketing-widget .report-features {
    margin-bottom: 1.2rem;
}

/* 響應式 - 小螢幕 */
@media (max-width: 640px) {
    body.home .marketing-widget .report-item-link {
        padding: 10px 12px;
    }
    
    body.home .marketing-widget .report-icon {
        width: 32px;
        height: 32px;
        font-size: 1.1rem;
    }
    
    body.home .marketing-widget .report-text strong {
        font-size: 0.9rem;
    }
    
    body.home .marketing-widget .report-desc {
        font-size: 0.75rem;
    }
}

/* ===========================
   首頁 Hero 三欄佈局 + Avatar 星象動畫
   強化版 - 確保佈局生效
   =========================== */

/* ===========================
   Hero 區塊基礎設定
   =========================== */
.hero.hero-2026 {
    min-height: 100vh;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 2rem 0;
}

/* ===========================
   三欄 Grid 佈局 - 核心
   =========================== */
.hero.hero-2026 .hero-grid-3col {
    display: grid !important;
    grid-template-columns: 1fr 370px 420px !important;
    gap: 35px !important;
    align-items: center !important;
    width: 80% !important;
    max-width: 1400px !important;
    margin: 0 auto !important;
}

/* ===========================
   左欄：文案區
   =========================== */
.hero.hero-2026 .hero-content-col {
    max-width: 480px;
}

.hero.hero-2026 .hero-content-col .hero-year-badge {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    background: rgba(231, 76, 60, 0.15);
    border: 1px solid rgba(231, 76, 60, 0.3);
    padding: 9px 18px;
    border-radius: 30px;
    font-size: 0.92rem;
    color: #EC7063;
    margin-bottom: 1.2rem;
}

.hero.hero-2026 .hero-content-col .hero-title-new {
    font-size: 2.9rem;
    font-weight: 800;
    line-height: 1.3;
    margin-bottom: 1rem;
    color: #FAD7A0;
}

.hero.hero-2026 .hero-content-col .highlight-text {
    color: #EC7063;
}

.hero.hero-2026 .hero-content-col .hero-subtitle-new {
    font-size: 1.15rem;
    line-height: 1.7;
    margin-bottom: 1.5rem;
    color: #B0B8C1;
}

.hero.hero-2026 .hero-content-col .hero-subtitle-new strong {
    color: #FAD7A0;
}

.hero.hero-2026 .hero-content-col .cta-group {
    display: flex;
    gap: 12px;
}

.hero.hero-2026 .hero-content-col .cta-main {
    background: linear-gradient(135deg, #E74C3C 0%, #EC7063 100%);
    color: white;
    padding: 12px 24px;
    border-radius: 30px;
    text-decoration: none;
    font-weight: bold;
    font-size: 0.95rem;
    box-shadow: 0 4px 15px rgba(231, 76, 60, 0.4);
    transition: all 0.3s;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    line-height: 1.4;
    text-align: center;
}

.hero.hero-2026 .hero-content-col .cta-main:hover {
    transform: translateY(-2px);
    box-shadow: 0 6px 20px rgba(231, 76, 60, 0.5);
}

.hero.hero-2026 .hero-content-col .cta-sub {
    background: transparent;
    color: #FAD7A0;
    padding: 12px 24px;
    border-radius: 30px;
    text-decoration: none;
    font-weight: bold;
    font-size: 0.95rem;
    border: 1px solid #FAD7A0;
    transition: all 0.3s;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    line-height: 1.4;
    text-align: center;
}

.hero.hero-2026 .hero-content-col .cta-sub:hover {
    background: #FAD7A0;
    color: #0F141C;
}

/* ===========================
   中欄：Avatar 區域
   =========================== */
.hero.hero-2026 .hero-avatar-col {
    display: flex !important;
    justify-content: center !important;
    align-items: center !important;
}

.hero.hero-2026 .avatar-container {
    position: relative;
    width: 370px;
    height: 415px;
}

.hero.hero-2026 .avatar-image {
    width: 100%;
    height: 100%;
    object-fit: contain;
    filter: drop-shadow(0 0 35px rgba(250, 215, 160, 0.28));
    animation: avatar-float 6s ease-in-out infinite;
}

/* 星象背景動畫 */
.hero.hero-2026 .cosmic-bg {
    position: absolute;
    top: -25px;
    left: -50px;
    width: 460px;
    height: 460px;
    pointer-events: none;
    z-index: -1;
}

.hero.hero-2026 .zodiac-ring {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 400px;
    height: 400px;
    border: 1px solid rgba(250, 215, 160, 0.1);
    border-radius: 50%;
    animation: zodiac-rotate 60s linear infinite;
}

.hero.hero-2026 .zodiac-ring::before {
    content: '';
    position: absolute;
    top: -2px;
    left: -2px;
    right: -2px;
    bottom: -2px;
    border: 1px dashed rgba(236, 112, 99, 0.12);
    border-radius: 50%;
    animation: zodiac-rotate 90s linear infinite reverse;
}

.hero.hero-2026 .zodiac-ring-inner {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 290px;
    height: 290px;
    border: 1px solid rgba(231, 76, 60, 0.12);
    border-radius: 50%;
    animation: zodiac-rotate 45s linear infinite reverse;
}

.hero.hero-2026 .cosmic-stars {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
}

.hero.hero-2026 .cosmic-star {
    position: absolute;
    width: 4px;
    height: 4px;
    background: #FAD7A0;
    border-radius: 50%;
    animation: star-twinkle 3s ease-in-out infinite;
    box-shadow: 0 0 9px #FAD7A0;
}

.hero.hero-2026 .cosmic-star:nth-child(1) { top: 8%; left: 15%; animation-delay: 0s; }
.hero.hero-2026 .cosmic-star:nth-child(2) { top: 18%; left: 85%; animation-delay: 0.5s; }
.hero.hero-2026 .cosmic-star:nth-child(3) { top: 72%; left: 8%; animation-delay: 1s; }
.hero.hero-2026 .cosmic-star:nth-child(4) { top: 88%; left: 78%; animation-delay: 1.5s; }
.hero.hero-2026 .cosmic-star:nth-child(5) { top: 42%; left: 92%; animation-delay: 2s; }
.hero.hero-2026 .cosmic-star:nth-child(6) { top: 92%; left: 48%; animation-delay: 2.5s; }

.hero.hero-2026 .avatar-glow {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 345px;
    height: 345px;
    background: radial-gradient(circle, rgba(250, 215, 160, 0.08) 0%, transparent 70%);
    border-radius: 50%;
    animation: glow-pulse 4s ease-in-out infinite;
    z-index: -1;
}

/* ===========================
   右欄：行銷卡片
   =========================== */
.hero.hero-2026 .hero-widget-col {
    display: flex !important;
    justify-content: flex-end !important;
}

.hero.hero-2026 .marketing-widget {
    width: 415px;
    background: rgba(33, 47, 61, 0.95);
    backdrop-filter: blur(25px);
    border: 1px solid rgba(231, 76, 60, 0.1);
    border-radius: 20px;
    overflow: hidden;
    box-shadow: 0 15px 30px -10px rgba(0, 0, 0, 0.5);
}

.hero.hero-2026 .widget-top {
    padding: 1.4rem;
    background: linear-gradient(to bottom, rgba(255, 255, 255, 0.02), transparent);
    border-bottom: 1px solid rgba(231, 76, 60, 0.1);
    text-align: center;
}

.hero.hero-2026 .widget-label {
    font-size: 0.86rem;
    color: #7A8590;
    margin-bottom: 0.9rem;
}

.hero.hero-2026 .tool-icons {
    display: flex;
    justify-content: center;
    gap: 23px;
}

.hero.hero-2026 .tool-item {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 6px;
    text-decoration: none;
    transition: transform 0.2s;
}

.hero.hero-2026 .tool-item:hover {
    transform: translateY(-3px);
}

.hero.hero-2026 .tool-icon-circle {
    width: 51px;
    height: 51px;
    background: #17202A;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.38rem;
    border: 1px solid rgba(231, 76, 60, 0.1);
    position: relative;
    transition: all 0.3s;
}

.hero.hero-2026 .tool-item:hover .tool-icon-circle {
    background: #E74C3C;
    border-color: #E74C3C;
}

.hero.hero-2026 .tool-name {
    font-size: 0.8rem;
    color: #B0B8C1;
}

.hero.hero-2026 .free-badge {
    position: absolute;
    top: -5px;
    right: -8px;
    background: linear-gradient(135deg, #E74C3C 0%, #EC7063 100%);
    color: white;
    font-size: 0.58rem;
    padding: 2px 6px;
    border-radius: 4px;
    font-weight: bold;
}

.hero.hero-2026 .widget-bottom {
    padding: 1.4rem;
}

.hero.hero-2026 .product-tag {
    background: linear-gradient(135deg, #E74C3C 0%, #EC7063 100%);
    color: white;
    font-size: 0.69rem;
    padding: 4px 9px;
    border-radius: 4px;
    font-weight: bold;
    display: inline-block;
    margin-bottom: 0.4rem;
}

.hero.hero-2026 .product-title {
    font-size: 1.15rem;
    color: #EC7063;
    font-weight: bold;
    margin-bottom: 0.9rem;
}

.hero.hero-2026 .report-features {
    margin-bottom: 0.9rem;
}

.hero.hero-2026 .report-item-link {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 9px 12px;
    background: #17202A;
    border-radius: 8px;
    border: 1px solid rgba(231, 76, 60, 0.1);
    margin-bottom: 7px;
    text-decoration: none;
    transition: all 0.3s;
}

.hero.hero-2026 .report-item-link:hover {
    border-color: rgba(231, 76, 60, 0.4);
    transform: translateX(4px);
}

.hero.hero-2026 .report-item-link:hover strong {
    color: #FAD7A0;
}

.hero.hero-2026 .report-icon {
    font-size: 1.15rem;
    width: 32px;
    height: 32px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: rgba(231, 76, 60, 0.1);
    border-radius: 6px;
    flex-shrink: 0;
}

.hero.hero-2026 .report-text {
    flex: 1;
}

.hero.hero-2026 .report-text strong {
    color: #EC7063;
    font-size: 0.92rem;
    display: block;
    transition: color 0.3s;
}

.hero.hero-2026 .report-desc {
    color: #7A8590;
    font-size: 0.75rem;
}

.hero.hero-2026 .report-arrow {
    color: #EC7063;
    opacity: 0.5;
    font-size: 0.92rem;
}

.hero.hero-2026 .price-area {
    display: flex;
    justify-content: space-between;
    align-items: center;
    border-top: 1px solid rgba(231, 76, 60, 0.1);
    padding-top: 0.9rem;
}

.hero.hero-2026 .price-label {
    font-size: 0.75rem;
    color: #7A8590;
}

.hero.hero-2026 .current-price {
    font-size: 1.5rem;
    font-weight: bold;
    background: linear-gradient(135deg, #E74C3C 0%, #EC7063 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
}

.hero.hero-2026 .btn-buy-small {
    background: transparent;
    color: #FAD7A0;
    padding: 7px 16px;
    border-radius: 20px;
    text-decoration: none;
    font-size: 0.86rem;
    border: 1px solid #FAD7A0;
    transition: all 0.2s;
}

.hero.hero-2026 .btn-buy-small:hover {
    background: #FAD7A0;
    color: #0F141C;
}

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

@keyframes zodiac-rotate {
    from { transform: translate(-50%, -50%) rotate(0deg); }
    to { transform: translate(-50%, -50%) rotate(360deg); }
}

@keyframes star-twinkle {
    0%, 100% { opacity: 0.3; transform: scale(1); }
    50% { opacity: 1; transform: scale(1.4); }
}

@keyframes glow-pulse {
    0%, 100% { opacity: 0.5; transform: translate(-50%, -50%) scale(1); }
    50% { opacity: 0.7; transform: translate(-50%, -50%) scale(1.05); }
}

/* ===========================
   響應式設計
   =========================== */

/* 大螢幕調整 */
@media (max-width: 1500px) {
    .hero.hero-2026 .hero-grid-3col {
        grid-template-columns: 1fr 320px 380px !important;
        gap: 30px !important;
        width: 90% !important;
    }
    
    .hero.hero-2026 .avatar-container {
        width: 320px;
        height: 360px;
    }
    
    .hero.hero-2026 .marketing-widget {
        width: 380px;
    }
}

/* 中螢幕：隱藏 Avatar，變成兩欄 */
@media (max-width: 1200px) {
    .hero.hero-2026 .hero-grid-3col {
        grid-template-columns: 1fr 400px !important;
        gap: 30px !important;
        width: 92% !important;
    }
    
    .hero.hero-2026 .hero-avatar-col {
        display: none !important;
    }
    
    .hero.hero-2026 .hero-content-col {
        max-width: 100%;
    }
    
    .hero.hero-2026 .marketing-widget {
        width: 400px;
    }
}

/* 小螢幕：單欄 */
@media (max-width: 900px) {
    .hero.hero-2026 .hero-grid-3col {
        grid-template-columns: 1fr !important;
        gap: 2rem !important;
        text-align: center;
        width: 95% !important;
        padding: 0 1rem;
    }
    
    .hero.hero-2026 .hero-content-col {
        max-width: 500px;
        margin: 0 auto;
    }
    
    .hero.hero-2026 .hero-content-col .cta-group {
        justify-content: center;
    }
    
    .hero.hero-2026 .hero-widget-col {
        justify-content: center !important;
    }
    
    .hero.hero-2026 .marketing-widget {
        width: 100%;
        max-width: 420px;
    }
}

/* 手機版 */
@media (max-width: 480px) {
    .hero.hero-2026 .hero-content-col .hero-title-new {
        font-size: 2rem;
    }
    
    .hero.hero-2026 .hero-content-col .cta-main,
    .hero.hero-2026 .hero-content-col .cta-sub {
        padding: 12px 20px;
        font-size: 0.9rem;
    }
}

/* ===========================
   ★★★ 文章頁面導航完整修正 ★★★
   請將此段 CSS 添加到 style.css 的【最底部】
   =========================== */

/* 確保導航容器正確排列 */
nav .nav-container {
    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;
    width: 100% !important;
    max-width: var(--site-max-width, 1400px) !important;
    margin: 0 auto !important;
    padding: 0 2rem !important;
    position: relative !important;
}

/* ===========================
   🚀 2026 新定價方案 - 2x2 佈局 CSS
   請將此 CSS 添加到 style.css 的底部
   =========================== */

/* 定價區塊副標題 */
.pricing-subtitle-text {
    text-align: center;
    color: var(--text-muted, #7A8590);
    font-size: 1.1rem;
    margin-bottom: 2.5rem;
    margin-top: -1rem;
}

/* 1x3 網格佈局 */
.pricing-cards-1x3 {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 1.5rem;
    max-width: 1200px;
    margin: 0 auto;
}

/* 方案卡片基礎樣式 */
.pricing-cards-1x3 .pricing-card {
    background: var(--card-bg, #212F3D);
    border-radius: 16px;
    padding: 2rem 1.5rem;
    text-align: center;
    border: 1px solid var(--border-color, rgba(231, 76, 60, 0.2));
    transition: all 0.3s ease;
    position: relative;
    display: flex;
    flex-direction: column;
}

.pricing-cards-1x3 .pricing-card:hover {
    transform: translateY(-5px);
    border-color: rgba(231, 76, 60, 0.4);
    box-shadow: 0 15px 40px rgba(231, 76, 60, 0.15);
}

/* 免費方案特殊樣式 */
.pricing-cards-1x3 .pricing-card-free {
    border-color: rgba(250, 215, 160, 0.3);
}

.pricing-cards-1x3 .pricing-card-free:hover {
    border-color: rgba(250, 215, 160, 0.5);
    box-shadow: 0 15px 40px rgba(250, 215, 160, 0.1);
}

.pricing-badge-free {
    background: linear-gradient(135deg, #FAD7A0 0%, #F4D03F 100%) !important;
    color: #1a1a2e !important;
}

/* 推薦方案特殊樣式 (featured) */
.pricing-cards-1x3 .pricing-card.featured {
    border: 2px solid var(--primary-red, #E74C3C);
    background: linear-gradient(180deg, rgba(231, 76, 60, 0.08) 0%, var(--card-bg, #212F3D) 100%);
    transform: scale(1.03);
    box-shadow: 0 10px 30px rgba(231, 76, 60, 0.2);
}

.pricing-cards-1x3 .pricing-card.featured:hover {
    transform: scale(1.03) translateY(-5px);
    box-shadow: 0 20px 50px rgba(231, 76, 60, 0.25);
}

/* 報告方案特殊樣式 */
.pricing-cards-1x3 .pricing-card-report {
    border-color: rgba(100, 180, 255, 0.3);
    background: linear-gradient(180deg, rgba(100, 180, 255, 0.05) 0%, var(--card-bg, #212F3D) 100%);
}

.pricing-cards-1x3 .pricing-card-report:hover {
    border-color: rgba(100, 180, 255, 0.5);
    box-shadow: 0 15px 40px rgba(100, 180, 255, 0.15);
}

/* 價格後綴樣式 */
.pricing-price-suffix {
    font-size: 0.5em;
    font-weight: 400;
    opacity: 0.8;
}

/* 確保 features 撐滿空間 */
.pricing-cards-1x3 .pricing-features {
    flex: 1;
    text-align: left;
    margin-bottom: 1.5rem;
}

/* Features 項目對齊調整 */
.pricing-cards-1x3 .pricing-features li {
    padding: 0.5rem 0;
    font-size: 0.9rem;
    line-height: 1.5;
    list-style: none;
}

.pricing-cards-1x3 .pricing-features li::before {
    content: none;
}

/* 按鈕置底 */
.pricing-cards-1x3 .pricing-btn {
    margin-top: auto;
}

/* ===========================
   1x3 按鈕樣式 - 分層設計
   =========================== */

/* 方案一：結緣體驗 - 金色空心按鈕 */
.pricing-cards-1x3 .pricing-card-free .pricing-btn {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    background: transparent !important;
    border: 2px solid #FAD7A0 !important;
    color: #FAD7A0 !important;
    padding: 0.8rem 1.5rem !important;
    border-radius: 30px !important;
    line-height: 1.2 !important;
    text-align: center !important;
    font-weight: 600 !important;
    transition: all 0.3s ease !important;
}

.pricing-cards-1x3 .pricing-card-free .pricing-btn:hover {
    background: #FAD7A0 !important;
    color: #1a1a2e !important;
    transform: translateY(-2px) !important;
    box-shadow: 0 5px 20px rgba(250, 215, 160, 0.4) !important;
}

/* 方案二：隨身軍師 (featured) - 橘紅色實心漸層按鈕 + 閃爍動畫 */
.pricing-cards-1x3 .pricing-card.featured .pricing-btn {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    background: linear-gradient(135deg, #E74C3C 0%, #C0392B 50%, #E74C3C 100%) !important;
    background-size: 200% 100% !important;
    border: none !important;
    color: white !important;
    padding: 0.9rem 1.8rem !important;
    border-radius: 30px !important;
    line-height: 1.2 !important;
    text-align: center !important;
    font-weight: 600 !important;
    animation: pricing-btn-shimmer-1x3 2s ease-in-out infinite !important;
    box-shadow: 0 4px 15px rgba(231, 76, 60, 0.4) !important;
    transition: all 0.3s ease !important;
}

.pricing-cards-1x3 .pricing-card.featured .pricing-btn:hover {
    transform: translateY(-3px) scale(1.02) !important;
    box-shadow: 0 8px 25px rgba(231, 76, 60, 0.5) !important;
}

@keyframes pricing-btn-shimmer-1x3 {
    0% { background-position: 100% 0; }
    50% { background-position: 0% 0; }
    100% { background-position: 100% 0; }
}

/* 方案三：深度報告 - 天藍色空心按鈕 */
.pricing-cards-1x3 .pricing-card-report .pricing-btn {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    background: transparent !important;
    border: 2px solid #64B4FF !important;
    color: #64B4FF !important;
    padding: 0.8rem 1.5rem !important;
    border-radius: 30px !important;
    line-height: 1.2 !important;
    text-align: center !important;
    font-weight: 600 !important;
    transition: all 0.3s ease !important;
}

.pricing-cards-1x3 .pricing-card-report .pricing-btn:hover {
    background: linear-gradient(135deg, #4A90D9 0%, #64B4FF 100%) !important;
    border-color: #64B4FF !important;
    color: white !important;
    transform: translateY(-2px) !important;
    box-shadow: 0 5px 20px rgba(100, 180, 255, 0.4) !important;
}

/* 報告方案 Badge - 天藍色 */
.pricing-cards-1x3 .pricing-card-report .pricing-badge {
    background: linear-gradient(135deg, #4A90D9 0%, #64B4FF 100%) !important;
    color: white !important;
}

/* ===========================
   響應式設計 - 平板 (1024px 以下)
   =========================== */
@media (max-width: 1024px) {
    .pricing-cards-1x3 {
        gap: 1.2rem;
        max-width: 900px;
    }
    
    .pricing-cards-1x3 .pricing-card {
        padding: 1.5rem 1.2rem;
    }
    
    .pricing-cards-1x3 .pricing-card.featured {
        transform: scale(1);
    }
    
    .pricing-cards-1x3 .pricing-card.featured:hover {
        transform: translateY(-5px);
    }
}

/* ===========================
   響應式設計 - 手機版 (768px 以下)
   切換為單欄
   =========================== */
@media (max-width: 767px) {
    .pricing-cards-1x3 {
        grid-template-columns: 1fr;
        gap: 1rem;
        max-width: 400px;
        margin: 0 auto;
        padding: 0 1rem;
    }
    
    .pricing-cards-1x3 .pricing-card {
        padding: 1.5rem 1.2rem;
        border-radius: 12px;
    }
    
    .pricing-cards-1x3 .pricing-icon {
        font-size: 2rem;
        margin-bottom: 0.5rem;
    }
    
    .pricing-cards-1x3 .pricing-title {
        font-size: 1.1rem;
        margin-bottom: 0.3rem;
    }
    
    .pricing-cards-1x3 .pricing-subtitle {
        font-size: 0.85rem;
        margin-bottom: 0.5rem;
    }
    
    .pricing-cards-1x3 .pricing-price {
        font-size: 1.8rem;
    }
    
    .pricing-cards-1x3 .pricing-period {
        font-size: 0.8rem;
        line-height: 1.3;
    }
    
    .pricing-cards-1x3 .pricing-section-title {
        font-size: 0.85rem;
        margin-bottom: 0.5rem;
    }
    
    .pricing-cards-1x3 .pricing-features li {
        font-size: 0.85rem;
        padding: 0.35rem 0;
    }
    
    .pricing-cards-1x3 .pricing-btn {
        padding: 0.8rem 1.2rem;
        font-size: 0.9rem;
    }
    
    .pricing-cards-1x3 .pricing-badge {
        font-size: 0.7rem;
        padding: 4px 10px;
    }
    
    .pricing-cards-1x3 .pricing-original-price {
        font-size: 0.75rem;
    }
    
    /* 手機上方案順序 */
    .pricing-cards-1x3 .pricing-card-free { order: 1; }
    .pricing-cards-1x3 .pricing-card.featured { order: 2; }
    .pricing-cards-1x3 .pricing-card-report { order: 3; }
    
    /* 推薦方案手機版不放大 */
    .pricing-cards-1x3 .pricing-card.featured {
        transform: none;
    }
    
    .pricing-cards-1x3 .pricing-card.featured:hover {
        transform: translateY(-3px);
    }
}
/* ===========================
   可選：四欄佈局 (大螢幕 1400px+)
   如需在大螢幕顯示四個一列，
   取消下方註解即可
   =========================== */
/*
@media (min-width: 1400px) {
    .pricing-cards-2x2 {
        grid-template-columns: repeat(4, 1fr);
        max-width: 1400px;
        gap: 1.2rem;
    }
    
    .pricing-cards-2x2 .pricing-card {
        padding: 1.5rem 1.2rem;
    }
    
    .pricing-cards-2x2 .pricing-card.featured {
        transform: scale(1.03);
    }
}
*/
/* ===========================
   🔧 按鈕樣式修復 - 2026/01
   ✅ 請將此段 CSS 貼到 style.css 的第 7284 行（最底部）
   ✅ 只修改按鈕樣式，不影響任何文字、字體、顏色
   =========================== */

/* ----- 問題 1 修復：首頁命理方案按鈕 ----- */

/* 方案卡片的按鈕：改為空心邊框樣式 */
.pricing-cards-2x2 .pricing-card .pricing-btn {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    background: transparent !important;
    border: 2px solid #EC7063 !important;
    color: #EC7063 !important;
    padding: 0.8rem 1.5rem !important;
    border-radius: 30px !important;
    line-height: 1.2 !important;
    text-align: center !important;
}

.pricing-cards-2x2 .pricing-card .pricing-btn:hover {
    background: #EC7063 !important;
    color: white !important;
    transform: translateY(-2px) !important;
    box-shadow: 0 5px 15px rgba(231, 76, 60, 0.3) !important;
}

/* 只有推薦方案（.featured）使用實心漸層按鈕 */
.pricing-cards-2x2 .pricing-card.featured .pricing-btn {
    background: linear-gradient(135deg, #E74C3C 0%, #C0392B 50%, #E74C3C 100%) !important;
    background-size: 200% 100% !important;
    border: none !important;
    color: white !important;
    animation: pricing-btn-shimmer 2s ease-in-out infinite !important;
    box-shadow: 0 4px 15px rgba(231, 76, 60, 0.4) !important;
}

.pricing-cards-2x2 .pricing-card.featured .pricing-btn:hover {
    transform: translateY(-3px) scale(1.02) !important;
    box-shadow: 0 8px 25px rgba(231, 76, 60, 0.5) !important;
    background: linear-gradient(135deg, #E74C3C 0%, #C0392B 50%, #E74C3C 100%) !important;
}

@keyframes pricing-btn-shimmer {
    0% { background-position: 100% 0; }
    50% { background-position: 0% 0; }
    100% { background-position: 100% 0; }
}

/* ----- 問題 2 修復：CTA 主按鈕（橘色實心）----- */

a.cta-main,
button.cta-main,
.cta-main {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    padding: 12px 28px !important;
    font-size: 1rem !important;
    line-height: 1.4 !important;
    text-align: center !important;
    vertical-align: middle !important;
}

/* ----- 問題 3 修復：CTA 次按鈕（空心邊框）----- */

a.cta-sub,
button.cta-sub,
.cta-sub {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    padding: 12px 28px !important;
    font-size: 1rem !important;
    line-height: 1.4 !important;
    text-align: center !important;
    vertical-align: middle !important;
    border: 1px solid #FAD7A0 !important;
}

/* ----- 響應式修復 ----- */

@media (max-width: 767px) {
    a.cta-main, button.cta-main, .cta-main,
    a.cta-sub, button.cta-sub, .cta-sub {
        padding: 10px 22px !important;
        font-size: 0.9rem !important;
    }
    
    .pricing-cards-2x2 .pricing-card .pricing-btn {
        padding: 0.6rem 1rem !important;
        font-size: 0.8rem !important;
    }
}

@media (max-width: 480px) {
    a.cta-main, button.cta-main, .cta-main,
    a.cta-sub, button.cta-sub, .cta-sub {
        padding: 10px 20px !important;
        font-size: 0.85rem !important;
    }
    
    .pricing-cards-2x2 .pricing-card .pricing-btn {
        padding: 0.7rem 1.2rem !important;
        font-size: 0.85rem !important;
    }
}
/* ===========================
   🔧 按鈕修復結束
   =========================== */
 /* ===========================
   🔧 導航修正 - 最終完整版
   
   請將此段 CSS 添加到 style.css 的【最底部】
   並刪除之前所有的「導航修正」代碼段
   
   修復問題：
   1. 手機版漢堡按鈕不顯示
   2. 手機版導航選單不顯示
   3. 桌面版「所有文章」頁面導航消失
   =========================== */

/* ========== 第一部分：主導航基礎樣式 ========== */

/* 確保主導航始終可見 */
nav.main-navigation {
    position: fixed !important;
    top: 0 !important;
    left: 0 !important;
    width: 100% !important;
    background: rgba(23, 32, 42, 0.95) !important;
    backdrop-filter: blur(10px) !important;
    z-index: 9999 !important;
    padding: 0.8rem 0 !important;
    border-bottom: 1px solid rgba(231, 76, 60, 0.2) !important;
    display: block !important;
    opacity: 1 !important;
    visibility: visible !important;
}

/* 導航容器 */
nav.main-navigation .nav-container {
    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;
    width: 100% !important;
    max-width: 1400px !important;
    margin: 0 auto !important;
    padding: 0 2rem !important;
}

/* ========== 第二部分：桌面版（969px 以上）========== */

@media screen and (min-width: 969px) {
    /* 桌面版：顯示導航選單 */
    nav.main-navigation .nav-links,
    nav.main-navigation ul.nav-links,
    nav.main-navigation > .nav-container > .nav-links {
        display: flex !important;
        position: static !important;
        background: transparent !important;
        border: none !important;
        box-shadow: none !important;
        padding: 0 !important;
        flex-direction: row !important;
        gap: 2rem !important;
        max-height: none !important;
        overflow: visible !important;
        list-style: none !important;
        align-items: center !important;
        margin: 0 !important;
        flex: 1 !important;
        justify-content: center !important;
        opacity: 1 !important;
        visibility: visible !important;
        transform: none !important;
        top: auto !important;
        left: auto !important;
        right: auto !important;
    }
    
    /* 桌面版：導航項目 */
    nav.main-navigation .nav-links .nav-item,
    nav.main-navigation .nav-links > li,
    nav.main-navigation .nav-links .menu-item {
        display: block !important;
        position: relative !important;
        opacity: 1 !important;
        visibility: visible !important;
        width: auto !important;
        border-bottom: none !important;
    }
    
    /* 桌面版：導航連結 */
    nav.main-navigation .nav-links .nav-item > a,
    nav.main-navigation .nav-links > li > a,
    nav.main-navigation .nav-links .menu-item > a {
        display: block !important;
        opacity: 1 !important;
        visibility: visible !important;
        color: #B0B8C1 !important;
        padding: 0.5rem 0.8rem !important;
        font-size: 1rem !important;
    }
    
    nav.main-navigation .nav-links a:hover {
        color: #FAD7A0 !important;
    }
    
    /* 桌面版：隱藏漢堡按鈕 */
    nav.main-navigation .mobile-menu-toggle {
        display: none !important;
    }
    
    /* 桌面版：下拉選單 */
    nav.main-navigation .nav-links .dropdown,
    nav.main-navigation .nav-links .sub-menu {
        position: absolute !important;
        top: 100% !important;
        left: 0 !important;
        background: #212F3D !important;
        border: 1px solid rgba(231, 76, 60, 0.2) !important;
        border-radius: 8px !important;
        min-width: 200px !important;
        opacity: 0 !important;
        visibility: hidden !important;
        transform: translateY(-10px) !important;
        transition: all 0.3s ease !important;
        z-index: 1000 !important;
        padding: 0.5rem 0 !important;
        list-style: none !important;
    }
    
    nav.main-navigation .nav-links > li:hover > .dropdown,
    nav.main-navigation .nav-links > li:hover > .sub-menu,
    nav.main-navigation .nav-links .nav-item:hover .dropdown,
    nav.main-navigation .nav-links .menu-item:hover > .sub-menu {
        opacity: 1 !important;
        visibility: visible !important;
        transform: translateY(0) !important;
    }
    
    /* 桌面版：右側區塊 */
    nav.main-navigation .nav-right-section {
        display: flex !important;
        align-items: center !important;
        gap: 1rem !important;
        flex-shrink: 0 !important;
    }
}

/* ========== 第三部分：手機版（968px 以下）========== */

@media screen and (max-width: 968px) {
    /* 手機版：導航容器 */
    nav.main-navigation .nav-container {
        flex-wrap: wrap !important;
        position: relative !important;
    }
    
    /* ★★★ 關鍵：手機版顯示漢堡按鈕 ★★★ */
    nav.main-navigation .mobile-menu-toggle {
        display: flex !important;
        flex-direction: column !important;
        justify-content: center !important;
        align-items: center !important;
        width: 44px !important;
        height: 44px !important;
        padding: 8px !important;
        background: transparent !important;
        border: 1px solid rgba(231, 76, 60, 0.3) !important;
        border-radius: 8px !important;
        cursor: pointer !important;
        z-index: 1001 !important;
        order: 2 !important;
    }
    
    /* 漢堡按鈕的線條 */
    nav.main-navigation .mobile-menu-toggle .hamburger-line {
        display: block !important;
        width: 22px !important;
        height: 2px !important;
        background: #FAD7A0 !important;
        border-radius: 2px !important;
        margin: 3px 0 !important;
        transition: all 0.3s !important;
    }
    
    /* 手機版：隱藏導航選單（預設） */
    nav.main-navigation .nav-links {
        display: none !important;
        position: absolute !important;
        top: 100% !important;
        left: 0 !important;
        right: 0 !important;
        width: 100% !important;
        background: rgba(23, 32, 42, 0.98) !important;
        backdrop-filter: blur(15px) !important;
        border-top: 1px solid rgba(231, 76, 60, 0.2) !important;
        border-bottom: 1px solid rgba(231, 76, 60, 0.2) !important;
        flex-direction: column !important;
        padding: 1rem 0 !important;
        max-height: calc(100vh - 70px) !important;
        overflow-y: auto !important;
        box-shadow: 0 10px 30px rgba(0, 0, 0, 0.5) !important;
        z-index: 9998 !important;
        order: 4 !important;
    }
    
    /* ★★★ 關鍵：選單開啟時顯示 ★★★ */
    nav.main-navigation .nav-links.mobile-open {
        display: flex !important;
    }
    
    /* 手機版：導航項目 */
    nav.main-navigation .nav-links .nav-item,
    nav.main-navigation .nav-links > li,
    nav.main-navigation .nav-links .menu-item {
        width: 100% !important;
        border-bottom: 1px solid rgba(255, 255, 255, 0.05) !important;
    }
    
    nav.main-navigation .nav-links .nav-item > a,
    nav.main-navigation .nav-links > li > a,
    nav.main-navigation .nav-links .menu-item > a {
        padding: 1rem 2rem !important;
        display: block !important;
        color: #B0B8C1 !important;
    }
    
    /* 手機版：下拉選單 */
    nav.main-navigation .nav-links .dropdown,
    nav.main-navigation .nav-links .sub-menu {
        position: static !important;
        background: rgba(0, 0, 0, 0.2) !important;
        border: none !important;
        border-radius: 0 !important;
        max-height: 0 !important;
        overflow: hidden !important;
        opacity: 1 !important;
        visibility: visible !important;
        transform: none !important;
        transition: max-height 0.3s ease !important;
        padding: 0 !important;
    }
    
    nav.main-navigation .nav-links .nav-item.mobile-dropdown-open .dropdown,
    nav.main-navigation .nav-links .menu-item.mobile-dropdown-open > .sub-menu {
        max-height: 500px !important;
        padding: 0.5rem 0 !important;
    }
    
    /* 手機版：右側區塊 */
    nav.main-navigation .nav-right-section {
        display: flex !important;
        align-items: center !important;
        order: 3 !important;
        margin-left: auto !important;
    }
    
    /* 手機版：Logo 排序 */
    nav.main-navigation .site-logo {
        order: 1 !important;
    }
}

/* ========== 第四部分：排除分頁導航 ========== */

/* 確保分頁導航和其他 nav 元素不受影響 */
nav:not(.main-navigation),
nav.navigation,
nav.navigation.pagination,
nav.post-navigation,
nav.posts-navigation,
nav.comment-navigation,
.pagination nav {
    position: relative !important;
    top: auto !important;
    left: auto !important;
    width: auto !important;
    background: transparent !important;
    backdrop-filter: none !important;
    z-index: auto !important;
    padding: 0 !important;
    border: none !important;
    box-shadow: none !important;
}

/* 分頁導航的 .nav-links */
.pagination .nav-links,
nav.navigation.pagination .nav-links,
nav.post-navigation .nav-links,
nav.posts-navigation .nav-links {
    display: flex !important;
    position: static !important;
    background: transparent !important;
    flex-direction: row !important;
    justify-content: center !important;
    gap: 0.5rem !important;
    flex-wrap: wrap !important;
    padding: 0 !important;
    top: auto !important;
    left: auto !important;
    right: auto !important;
    max-height: none !important;
    overflow: visible !important;
    border: none !important;
    box-shadow: none !important;
    width: auto !important;
    order: unset !important;
}

/* ===========================
   🔧 導航修正結束
   =========================== */  
/* ===========================
   📱 手機版漢堡選單 + 帳戶圖示修正
   修復：漢堡按鈕在手機上不顯示
   方案：「我的帳戶」改為小圓形 icon
   =========================== */

@media screen and (max-width: 968px) {

    /* ── 1. 強制顯示漢堡按鈕 ── */
    body nav.main-navigation .nav-container .mobile-menu-toggle {
        display: flex !important;
        flex-direction: column !important;
        justify-content: center !important;
        align-items: center !important;
        flex-shrink: 0 !important;
        min-width: 40px !important;
        min-height: 40px !important;
        width: 40px !important;
        height: 40px !important;
        padding: 8px !important;
        opacity: 1 !important;
        visibility: visible !important;
        overflow: visible !important;
        pointer-events: auto !important;
        -webkit-appearance: none !important;
        appearance: none !important;
        position: relative !important;
        z-index: 1001 !important;
        background: transparent !important;
        border: 1px solid rgba(231, 76, 60, 0.3) !important;
        border-radius: 8px !important;
        cursor: pointer !important;
    }

    /* ── 2. 漢堡三條線強制可見 ── */
    body nav.main-navigation .nav-container .mobile-menu-toggle .hamburger-line {
        display: block !important;
        width: 20px !important;
        height: 2px !important;
        background: #FAD7A0 !important;
        border-radius: 2px !important;
        margin: 2px 0 !important;
        opacity: 1 !important;
        visibility: visible !important;
    }

    /* ── 3.「我的帳戶」/「免費開始」→ 小圓形人像 icon ── */
    body nav.main-navigation .nav-right-section .login-btn {
        display: flex !important;
        align-items: center !important;
        justify-content: center !important;
        width: 36px !important;
        height: 36px !important;
        min-width: 36px !important;
        min-height: 36px !important;
        padding: 0 !important;
        border-radius: 50% !important;
        background: rgba(231, 76, 60, 0.15) !important;
        border: 1.5px solid rgba(231, 76, 60, 0.4) !important;
        box-shadow: 0 0 8px rgba(231, 76, 60, 0.15) !important;
        font-size: 0 !important;
        color: transparent !important;
        line-height: 0 !important;
        overflow: hidden !important;
        position: relative !important;
        flex-shrink: 0 !important;
        transition: all 0.3s ease !important;
    }

    /* 人像圖示（用 ::before 偽元素） */
    body nav.main-navigation .nav-right-section .login-btn::before {
        content: "" !important;
        display: block !important;
        width: 20px !important;
        height: 20px !important;
        background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='%23FAD7A0'%3E%3Cpath d='M12 12c2.21 0 4-1.79 4-4s-1.79-4-4-4-4 1.79-4 4 1.79 4 4 4zm0 2c-2.67 0-8 1.34-8 4v2h16v-2c0-2.66-5.33-4-8-4z'/%3E%3C/svg%3E") !important;
        background-size: contain !important;
        background-repeat: no-repeat !important;
        background-position: center !important;
        flex-shrink: 0 !important;
    }

    /* hover 效果 */
    body nav.main-navigation .nav-right-section .login-btn:hover {
        background: rgba(231, 76, 60, 0.25) !important;
        border-color: rgba(231, 76, 60, 0.6) !important;
        transform: none !important;
        box-shadow: 0 0 12px rgba(231, 76, 60, 0.25) !important;
    }

    /* 隱藏 ⚠ 未驗證標記的文字，改為小紅點 */
    body nav.main-navigation .nav-right-section .login-btn .email-unverified-badge {
        position: absolute !important;
        top: -2px !important;
        right: -2px !important;
        width: 10px !important;
        height: 10px !important;
        background: #E74C3C !important;
        border-radius: 50% !important;
        border: 1.5px solid #17202A !important;
        font-size: 0 !important;
        color: transparent !important;
        line-height: 0 !important;
        padding: 0 !important;
        margin: 0 !important;
        display: block !important;
        animation: pulse-warning 2s ease-in-out infinite !important;
    }

    /* ── 4. nav-container 佈局修正 ── */
    body nav.main-navigation .nav-container {
        display: flex !important;
        flex-wrap: wrap !important;
        align-items: center !important;
        justify-content: space-between !important;
        width: 100% !important;
        max-width: 100% !important;
        padding: 0 1rem !important;
        gap: 0 !important;
    }

    /* ── 5. Flex 排序：Logo → 帳戶icon → 漢堡 ── */
    body nav.main-navigation .nav-container .site-logo {
        order: 1 !important;
        flex: 1 1 auto !important;
        min-width: 0 !important;
    }

    body nav.main-navigation .nav-container .nav-right-section {
        order: 2 !important;
        flex-shrink: 0 !important;
        margin-left: auto !important;
        margin-right: 8px !important;
    }

    body nav.main-navigation .nav-container .mobile-menu-toggle {
        order: 3 !important;
        flex-shrink: 0 !important;
    }

    body nav.main-navigation .nav-container .nav-links {
        order: 4 !important;
    }
}

/* ===========================
   📱 手機版漢堡選單修正結束
   =========================== */