/* ==========================================================================
   共享样式表 (shared_style.css)
   描述: 本站所有页面的统一CSS规则。
   版本: 1.4 (徹底修復下拉菜單)
   作者: Gemini
   創建日期: 2025-07-10
   修改日期: 2025-08-07
   修改内容: 
   - [修復] 移除了依賴 :focus 的用戶菜單顯示邏輯，改用 JS 控制的 .is-open 類，
             並添加過渡動畫，確保在所有設備上能正常且流暢地點擊打開。
   ========================================================================== */

/* ==========================================================================
   1. 核心设计变量 (视觉优化版)
   ========================================================================== */
:root {
    --primary-color: #3867d6; /* 更温和、专业的蓝色 */
    --primary-hover: #4b7bec;
    --secondary-color: #778ca3; /* 柔和的灰色 */
    --accent-color: #4b6584;
    --success-color: #20bf6b; /* 鲜明的绿色 */
    --danger-color: #eb3b5a; /* 柔和的红色 */
    --warning-color: #f7b731; /* 温暖的黄色 */
    --info-color: #38a1d6;
    --light-bg: #f5f6fa; /* 浅灰背景，比纯白更柔和 */
    --white-bg: #ffffff;
    --dark-text: #2c3e50; /* 深蓝灰色文字，代替纯黑 */
    --light-text: #a5b1c2;
    --border-color: #dfe4ea;
    --shadow-sm: 0 1px 3px 0 rgba(0, 0, 0, 0.07), 0 1px 2px 0 rgba(0, 0, 0, 0.04);
    --shadow-md: 0 4px 6px -1px rgba(0, 0, 0, 0.08), 0 2px 4px -1px rgba(0, 0, 0, 0.05);
    --shadow-lg: 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -2px rgba(0, 0, 0, 0.05);
    --transition: all 0.2s ease-in-out;
    
    /* 新增：表单控件专用变量 */
    --input-bg: #ffffff;
    --input-text: #2c3e50;
    --input-border: #dfe4ea;
    --input-placeholder: #a5b1c2;
    --input-disabled-bg: #f5f6fa;
    --input-disabled-text: #778ca3;
    --input-focus-border: #3867d6;
    --input-focus-shadow: 0 0 0 3px rgba(56, 103, 214, 0.1);
    
    /* 新增：按钮专用变量 */
    --btn-primary-bg: #3867d6;
    --btn-primary-text: #ffffff;
    --btn-primary-hover-bg: #4b7bec;
    --btn-secondary-bg: #e5e7eb;
    --btn-secondary-text: #4b6584;
    --btn-secondary-hover-bg: #d1d5db;
    --btn-danger-bg: #fee2e2;
    --btn-danger-text: #eb3b5a;
    --btn-danger-hover-bg: #fecaca;
}

/* ==========================================================================
   2. 暗黑模式 (Dark Mode)
   ========================================================================== */
.dark {
    --primary-color: #4b7bec;
    --primary-hover: #688de8;
    --secondary-color: #9ca3af;
    --accent-color: #e5e7eb;
    --success-color: #26de81;
    --danger-color: #ff4757;
    --warning-color: #feca57;
    --info-color: #4bcffa;
    --light-bg: #1e2a3a; /* 深蓝背景 */
    --white-bg: #2c3e50; /* 卡片背景 */
    --dark-text: #f5f6fa; /* 亮色文字 */
    --light-text: #a5b1c2;
    --border-color: #4b6584;
    
    /* 暗黑模式下的表单控件变量 */
    --input-bg: #1a2332;
    --input-text: #f5f6fa;
    --input-border: #4b6584;
    --input-placeholder: #778ca3;
    --input-disabled-bg: #2c3e50;
    --input-disabled-text: #778ca3;
    --input-focus-border: #4b7bec;
    --input-focus-shadow: 0 0 0 3px rgba(75, 123, 236, 0.2);
    
    /* 暗黑模式下的按钮变量 */
    --btn-primary-bg: #4b7bec;
    --btn-primary-text: #ffffff;
    --btn-primary-hover-bg: #688de8;
    --btn-secondary-bg: #374151;
    --btn-secondary-text: #e5e7eb;
    --btn-secondary-hover-bg: #4b5563;
    --btn-danger-bg: rgba(255, 71, 87, 0.2);
    --btn-danger-text: #ff4757;
    --btn-danger-hover-bg: rgba(255, 71, 87, 0.3);
}

/* ==========================================================================
   3. 基础与布局
   ========================================================================== */
body {
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
    background-color: var(--light-bg);
    color: var(--dark-text);
    transition: background-color 0.3s, color 0.3s;
}

.card {
    background-color: var(--white-bg);
    border-radius: 12px;
    box-shadow: var(--shadow-md);
    transition: var(--transition);
    border: 1px solid var(--border-color);
}
.card:hover {
    transform: translateY(-2px);
    box-shadow: var(--shadow-lg);
}

.sticky-sidebar {
    position: sticky;
    top: 6rem; /* 匹配页头高度 */
    height: calc(100vh - 6rem);
    overflow-y: auto;
}

@media (max-width: 1024px) {
    .sticky-sidebar {
        position: static;
        height: auto;
        overflow-y: visible;
    }
}

/* ==========================================================================
   4. 表单控件样式
   ========================================================================== */

/* --- 输入框通用样式 --- */
input[type="text"],
input[type="email"],
input[type="tel"],
input[type="password"],
input[type="number"],
input[type="date"],
input[type="time"],
select,
textarea {
    background-color: var(--input-bg) !important;
    color: var(--input-text) !important;
    border-color: var(--input-border) !important;
    transition: border-color 0.2s, box-shadow 0.2s;
}

/* 输入框占位符文字 */
input::placeholder,
textarea::placeholder {
    color: var(--input-placeholder) !important;
    opacity: 1;
}

/* 输入框获得焦点时 */
input:focus,
select:focus,
textarea:focus {
    outline: none !important;
    border-color: var(--input-focus-border) !important;
    box-shadow: var(--input-focus-shadow) !important;
}

/* 禁用状态的输入框 */
input:disabled,
select:disabled,
textarea:disabled {
    background-color: var(--input-disabled-bg) !important;
    color: var(--input-disabled-text) !important;
    cursor: not-allowed;
}

/* 错误状态的输入框 */
input.border-red-500,
select.border-red-500,
textarea.border-red-500 {
    border-color: var(--danger-color) !important;
}

/* ==========================================================================
   5. 按钮样式增强（全面修复）
   ========================================================================== */

/* 主要按钮 */
button[type="submit"],
.btn-primary,
.bg-primary-color {
    background-color: var(--btn-primary-bg) !important;
    color: var(--btn-primary-text) !important;
    border: none;
    transition: background-color 0.2s, transform 0.1s;
}

button[type="submit"]:hover,
.btn-primary:hover,
.bg-primary-color:hover {
    background-color: var(--btn-primary-hover-bg) !important;
    transform: translateY(-1px);
}

/* 次要按钮 */
.btn-secondary {
    background-color: var(--btn-secondary-bg) !important;
    color: var(--btn-secondary-text) !important;
    transition: background-color 0.2s;
}

.btn-secondary:hover {
    background-color: var(--btn-secondary-hover-bg) !important;
}

/* 危险/取消按钮 */
.bg-danger-color\/10,
.bg-red-100 {
    background-color: var(--btn-danger-bg) !important;
    color: var(--btn-danger-text) !important;
}

.bg-danger-color\/10:hover,
.bg-red-100:hover {
    background-color: var(--btn-danger-hover-bg) !important;
}

/* 其他颜色按钮 */
.bg-blue-500 {
    background-color: var(--info-color) !important;
    color: white !important;
}

.bg-blue-500:hover,
.hover\:bg-blue-600:hover {
    background-color: var(--primary-hover) !important;
}

.bg-gray-600 {
    background-color: var(--secondary-color) !important;
    color: white !important;
}

.bg-gray-600:hover,
.hover\:bg-gray-700:hover {
    background-color: var(--accent-color) !important;
}

/* ==========================================================================
   6. 日历样式修复
   ========================================================================== */

/* 日历日期基础样式 */
.calendar-day {
    color: var(--dark-text);
    text-decoration: none;
}

/* 今天的日期 */
.calendar-day.today {
    background-color: var(--accent-color) !important;
    color: white !important;
}

/* 选中的日期（修复白色问题） */
.calendar-day.selected {
    background-color: var(--primary-color) !important;
    color: white !important;
    font-weight: bold;
}

/* 悬停效果 */
.calendar-day:hover {
    background-color: rgba(56, 103, 214, 0.1) !important;
}

.dark .calendar-day:hover {
    background-color: rgba(75, 123, 236, 0.2) !important;
}

/* 日历容器内的按钮 */
#prev-month,
#next-month {
    color: var(--dark-text);
}

#prev-month:hover,
#next-month:hover {
    background-color: var(--light-bg) !important;
}

.dark #prev-month:hover,
.dark #next-month:hover {
    background-color: rgba(255, 255, 255, 0.1) !important;
}

/* ==========================================================================
   7. 通用组件样式 (Common Components)
   ========================================================================== */

/* --- 标签文字颜色 --- */
label {
    color: var(--dark-text);
}

/* --- 文字颜色类 --- */
.text-primary-color {
    color: var(--primary-color) !important;
}

.text-secondary-color {
    color: var(--secondary-color) !important;
}

.text-success-color {
    color: var(--success-color) !important;
}

.text-danger-color,
.text-red-500,
.text-red-700 {
    color: var(--danger-color) !important;
}

.text-warning-color {
    color: var(--warning-color) !important;
}

.text-info-color {
    color: var(--info-color) !important;
}

/* --- 页脚 --- */
.app-footer {
    background-color: var(--white-bg);
    border-top: 1px solid var(--border-color);
}
.dark .app-footer {
    background-color: var(--light-bg);
    border-top-color: var(--border-color);
}
.dark .app-footer, .dark .app-footer a {
    color: var(--secondary-color);
}
.dark .app-footer a:hover {
    color: var(--primary-color);
}

/* --- [修復] 用戶菜單 --- */
.user-menu {
    position: absolute;
    right: 0;
    top: 100%;
    margin-top: 0.5rem;
    background-color: var(--white-bg);
    border-radius: 8px;
    box-shadow: var(--shadow-lg);
    border: 1px solid var(--border-color);
    z-index: 50;
    min-width: 160px;
    
    /* 初始狀態為隱藏，並準備過渡動畫 */
    display: block; /* 改為 block 以便 transform 和 opacity 生效 */
    visibility: hidden;
    opacity: 0;
    transform: translateY(-10px);
    transition: opacity 0.2s ease-in-out, transform 0.2s ease-in-out, visibility 0s 0.2s;
}

/* [新增] 當菜單擁有 .is-open 類時，將其顯示 */
.user-menu.is-open {
    visibility: visible;
    opacity: 1;
    transform: translateY(0);
    transition: opacity 0.2s ease-in-out, transform 0.2s ease-in-out;
}

.user-menu-item {
    display: block;
    padding: 0.75rem 1rem;
    color: var(--dark-text);
    text-decoration: none;
    transition: background-color 0.2s;
    white-space: nowrap;
}
.user-menu-item:hover {
    background-color: var(--light-bg);
}


/* --- Tab 导航 (dashboard.asp) --- */
.tab-nav {
    border-bottom: 1px solid var(--border-color);
}
.tab-link {
    padding: 0.75rem 1rem;
    color: var(--secondary-color);
    text-decoration: none;
    border-bottom: 3px solid transparent;
    margin-bottom: -1px; /* 补偿边框宽度 */
    transition: var(--transition);
    font-weight: 500;
    white-space: nowrap;
}
.tab-link:hover {
    color: var(--primary-color);
}
.tab-link.active {
    color: var(--primary-color);
    border-bottom-color: var(--primary-color);
    font-weight: 600;
}

/* --- 八字命盘柱 (dashboard.asp, report.asp) --- */
.bazi-pillar {
    background-color: var(--light-bg);
    border: 1px solid var(--border-color);
    border-radius: 8px;
    text-align: center;
    padding: 0.75rem;
}
.bazi-pillar-title {
    font-size: 0.875rem;
    color: var(--secondary-color);
}
.bazi-char {
    font-size: 1.5rem;
    font-weight: 600;
    color: var(--dark-text);
}
.bazi-day-master {
    border-color: var(--primary-color);
    background-color: color-mix(in srgb, var(--primary-color) 10%, transparent);
}
.bazi-day-master .bazi-pillar-title, .bazi-day-master .bazi-char {
    color: var(--primary-color);
}
.bazi-nayin {
    font-size: 0.75rem;
    color: var(--secondary-color);
    margin-top: 0.5rem;
    white-space: nowrap;
}

/* --- 快捷导航项 --- */
.quick-nav-item {
    color: var(--dark-text);
    text-decoration: none;
    transition: all 0.2s;
}

.quick-nav-item:hover {
    transform: translateY(-2px);
}

/* --- Stripe 支付元素 (payment.asp) --- */
.StripeElement {
    background-color: var(--white-bg);
    padding: 10px 12px;
    border-radius: 4px;
    border: 1px solid var(--border-color);
    transition: box-shadow 150ms ease;
}
.StripeElement--focus {
    box-shadow: 0 1px 3px 0 rgba(0,0,0,0.1), 0 1px 2px 0 rgba(0,0,0,0.06);
}
.StripeElement--invalid {
    border-color: var(--danger-color);
}
.StripeElement--webkit-autofill {
    background-color: #fefde5 !important;
}

/* --- 侧边栏导航 (help.asp, account.asp) --- */
.sidebar-link {
    display: flex;
    align-items: center;
    padding: 0.75rem 1rem;
    border-radius: 8px;
    font-weight: 500;
    color: var(--secondary-color);
    text-decoration: none;
    transition: var(--transition);
}
.sidebar-link:hover {
    background-color: var(--light-bg);
    color: var(--dark-text);
}
.sidebar-link.active {
    background-color: var(--primary-color);
    color: white;
    box-shadow: var(--shadow-sm);
}
.sidebar-link.active:hover {
    background-color: var(--primary-hover);
}
.sidebar-link svg {
    width: 1.25rem;
    height: 1.25rem;
    margin-right: 0.75rem;
}

/* --- 折叠面板/手风琴 (help.asp - FAQ) --- */
.accordion-header {
    cursor: pointer;
    padding: 1rem;
    display: flex;
    justify-content: space-between;
    align-items: center;
    border-bottom: 1px solid var(--border-color);
}
.accordion-body {
    max-height: 0;
    overflow: hidden;
    transition: max-height 0.3s ease-out;
}
.accordion-body-content {
    padding: 1rem;
    border-top: 1px solid var(--border-color);
}
.accordion-item.open .accordion-body {
    max-height: 500px; /* 预设一个足够大的高度 */
}
.accordion-item.open .accordion-arrow {
    transform: rotate(180deg);
}
.accordion-arrow {
    transition: transform 0.3s;
}

/* --- 自定义图例 (dashboard.asp) --- */
.custom-legend {
    display: flex;
    justify-content: center;
    gap: 1rem;
    margin-top: 0.5rem;
    font-size: 0.875rem;
}
.custom-legend-item {
    display: flex;
    align-items: center;
    gap: 0.5rem;
}
.custom-legend-dot {
    width: 12px;
    height: 12px;
    border-radius: 50%;
}

/* ==========================================================================
   8. 背景色和边框修正
   ========================================================================== */

/* 背景色类 */
.bg-light-bg {
    background-color: var(--light-bg) !important;
}

.bg-white {
    background-color: var(--white-bg) !important;
}

.bg-success-color {
    background-color: var(--success-color) !important;
}

.bg-danger-color {
    background-color: var(--danger-color) !important;
}

.bg-warning-color {
    background-color: var(--warning-color) !important;
}

.bg-info-color {
    background-color: var(--info-color) !important;
}

.bg-primary-color\/10,
.hover\:bg-primary-color\/10:hover {
    background-color: rgba(56, 103, 214, 0.1) !important;
}

.dark .bg-primary-color\/10,
.dark .hover\:bg-primary-color\/10:hover {
    background-color: rgba(75, 123, 236, 0.1) !important;
}

.dark .bg-gray-700 {
    background-color: var(--input-bg) !important;
}

.dark .bg-gray-800 {
    background-color: var(--white-bg) !important;
}

.dark .bg-gray-800\/50 {
    background-color: rgba(44, 62, 80, 0.5) !important;
}

.dark .hover\:bg-gray-600:hover {
    background-color: rgba(255, 255, 255, 0.1) !important;
}

/* 通知区域的背景色修正 */
.bg-green-100 {
    background-color: rgba(32, 191, 107, 0.1) !important;
}

.bg-red-100 {
    background-color: rgba(235, 59, 90, 0.1) !important;
}

.bg-blue-50 {
    background-color: rgba(56, 103, 214, 0.1) !important;
}

.dark .bg-green-100 {
    background-color: rgba(38, 222, 129, 0.1) !important;
}

.dark .bg-red-100 {
    background-color: rgba(255, 71, 87, 0.1) !important;
}

.dark .bg-blue-50,
.dark .bg-blue-900\/20 {
    background-color: rgba(75, 123, 236, 0.1) !important;
}

/* 边框颜色修正 */
.border-green-400 {
    border-color: rgba(32, 191, 107, 0.4) !important;
}

.border-red-400 {
    border-color: rgba(235, 59, 90, 0.4) !important;
}

.border-blue-200 {
    border-color: rgba(56, 103, 214, 0.3) !important;
}

.dark .border-green-400 {
    border-color: rgba(38, 222, 129, 0.4) !important;
}

.dark .border-red-400 {
    border-color: rgba(255, 71, 87, 0.4) !important;
}

.dark .border-blue-200,
.dark .border-blue-800 {
    border-color: rgba(75, 123, 236, 0.3) !important;
}

/* 文字颜色修正 */
.text-green-700 {
    color: var(--success-color) !important;
}

.text-blue-700,
.text-blue-800,
.dark .text-blue-300 {
    color: var(--info-color) !important;
}

.dark .text-green-700 {
    color: var(--success-color) !important;
}

.dark .text-red-700 {
    color: var(--danger-color) !important;
}

.dark .text-blue-400 {
    color: #74b9ff !important;
}

/* ==========================================================================
   9. 进度条和图表元素样式
   ========================================================================== */

/* 进度条背景 */
.bg-success-color {
    background-color: var(--success-color) !important;
}

.bg-primary-color {
    background-color: var(--primary-color) !important;
}

.bg-danger-color {
    background-color: var(--danger-color) !important;
}

.bg-warning-color {
    background-color: var(--warning-color) !important;
}

.bg-secondary-color {
    background-color: var(--secondary-color) !important;
}

.bg-info-color {
    background-color: var(--info-color) !important;
}

/* 链接样式 */
a {
    color: var(--primary-color);
    text-decoration: none;
}

a:hover {
    color: var(--primary-hover);
    text-decoration: underline;
}

/* 表格样式 */
table {
    color: var(--dark-text);
}

th {
    color: var(--dark-text);
    font-weight: 600;
}

td {
    color: var(--dark-text);
}

/* 徽章/标签样式 */
.rounded-full {
    color: inherit;
}

.bg-success-color\/10 {
    background-color: rgba(32, 191, 107, 0.1) !important;
    color: var(--success-color) !important;
}

.dark .bg-success-color\/10 {
    background-color: rgba(38, 222, 129, 0.1) !important;
    color: var(--success-color) !important;
}

/* ==========================================================================
   10. 响应式和辅助类
   ========================================================================== */

/* 隐藏类 */
.hidden {
    display: none !important;
}

/* 文字对齐 */
.text-center {
    text-align: center;
}

.text-left {
    text-align: left;
}

.text-right {
    text-align: right;
}

/* 字体粗细 */
.font-medium {
    font-weight: 500;
}

.font-semibold {
    font-weight: 600;
}

.font-bold {
    font-weight: 700;
}

/* 确保所有交互元素都有合适的对比度 */
button, a, input, select, textarea {
    color: inherit;
}

/* 确保 SVG 图标颜色正确 */
svg {
    color: currentColor;
}
/* ==========================================================================
   11. 打印专用样式 (Print Styles - V5.0 间距优化版)
   描述: 修复图表与下方文字的间距过大问题，使布局更紧凑。
   ========================================================================== */
@media print {
    /* --- 1. 全局重置与基础设置 --- */
    body {
        background-color: #ffffff !important;
        color: #000000 !important;
        font-size: 10pt;
        width: 100%;
        -webkit-print-color-adjust: exact;
        print-color-adjust: exact;
    }

    /* --- 2. 隐藏所有不需要打印的元素 --- */
    .app-header, .app-footer, aside, .lg\:sticky-sidebar button,
    .quick-nav-item, form, .tab-nav, #toggleChartBtn {
        display: none !important;
    }

    /* --- 3. 核心布局修正 --- */
    .grid, .flex, .md\:grid-cols-2, .lg\:grid-cols-3, .lg\:grid-cols-5 {
        display: block !important; width: 100% !important;
    }
    .lg\:col-span-1, .lg\:col-span-2, .lg\:col-span-3, .lg\:col-span-4,
    .md\:col-span-1, .md\:col-span-3 {
        display: block !important; width: 100% !important;
    }
    .space-y-8 { margin: 0 !important; }
    .gap-8, .gap-4, .gap-2, .space-x-2, .space-x-4 { gap: 0 !important; }

    /* --- 4. 卡片(Card)和内容元素优化 --- */
    .card {
        box-shadow: none !important;
        border: 1px solid #cccccc !important;
        page-break-inside: avoid !important;
        margin-bottom: 15px !important;
        padding: 15px !important;
    }
    h1, h2, h3, h4, h5, h6 {
        color: #000000 !important; page-break-after: avoid !important;
    }
    h1 { font-size: 18pt; }
    h2 { font-size: 14pt; margin-bottom: 8px !important; } /* 减小标题下边距 */
    h3 { font-size: 12pt; }
    p, span, div, li, td, th, a {
        color: #000000 !important; font-size: 10pt;
    }
    a { text-decoration: none; }

    /* --- 5. 特定组件样式优化 --- */
    #bazi-pillars-container {
        display: flex !important; flex-direction: row !important;
        justify-content: space-between !important; width: 100% !important;
        gap: 8px !important;
    }
    .bazi-pillar {
        flex: 1 1 0px; display: block !important; width: auto !important;
        margin: 0 !important; padding: 8px !important;
        border: 1px solid #ddd !important;
    }
    .bazi-char { font-size: 1.2rem !important; }
    .bazi-nayin { font-size: 0.7rem !important; white-space: normal; }

    /* 图表布局 */
    #progressView { display: none !important; }
    #chartView {
        display: block !important; width: 100% !important;
        max-width: 800px !important; /* 稍微再缩小一点图表 */
        /* === 核心修改：减小图表下边距 === */
        margin: 5px auto 0 auto !important; /* 上5，下0，水平居中 */
        padding: 0 !important;
        aspect-ratio: 1 / 1 !important;
        position: relative !important; page-break-inside: avoid !important;
    }
    canvas#elementsChart { height: auto !important; width: 100% !important; }
    
    /* =============================================================== */
    /* === 间距修复 (核心修改) === */
    /* =============================================================== */
    /* 精确选中图表下方的那个文字描述容器 */
    .card > div.border-t {
        margin-top: 5px !important;  /* 强制将 mt-6 的巨大边距改为 5px */
        padding-top: 5px !important; /* 强制将 pt-6 的巨大内边距改为 5px */
        border-top: 1px solid #eee !important; /* 保留一个浅色的分割线，也可以设为 none */
    }
    /* =============================================================== */

    .bg-light-bg, .dark\:bg-gray-800 { background-color: #f0f0f0 !important; }
    .bg-success-color, .bg-primary-color, .bg-danger-color, .bg-warning-color {
        -webkit-print-color-adjust: exact !important;
        print-color-adjust: exact !important;
    }

    .lg\:sticky-sidebar { position: static !important; }
    .grid.grid-cols-2, .grid.grid-cols-4 { display: flex !important; flex-wrap: wrap !important; gap: 8px !important; }
    .grid.grid-cols-2 > *, .grid.grid-cols-4 > * { flex: 1 1 48% !important; }
    
    table { width: 100% !important; border-collapse: collapse !important; }
    th, td { border: 1px solid #ccc !important; padding: 5px !important; text-align: left !important; }
    
    .prose a[href]:after { content: none !important; }
}

    /* 五行顏色 - 亮色模式 */
    .wuxing-wood { color: #28a745; }
    .wuxing-fire { color: #dc3545; }
    .wuxing-earth { color: #bf8d54; }
    .wuxing-gold { color: #6c757d; }
    .wuxing-water { color: #007bff; }

    /* 五行顏色 - 暗色模式 */
    .dark .wuxing-wood { color: #4ade80; }
    .dark .wuxing-fire { color: #f87171; }
    .dark .wuxing-earth { color: #facc15; }
    .dark .wuxing-gold { color: #9ca3af; }
    .dark .wuxing-water { color: #60a5fa; }
/* ============================================= */
/* 自定義方案標籤樣式 (用於解決暗黑模式顯示問題) */
/* ============================================= */

.plan-badge-free {
    /* 亮色模式下的樣式 */
    background-color: #f3f4f6; /* 對應 bg-gray-100 */
    color: #1f2937;           /* 對應 text-gray-800 */
}

/* 暗黑模式下的樣式 (高對比度) */
.dark .plan-badge-free {
    background-color: #4b5563; /* 對應 bg-gray-600 */
    color: #e5e7eb;           /* 對應 text-gray-200 */
}