body {
    font-family: 'Microsoft JhengHei', 'PingFang TC', sans-serif;
    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
    min-height: 100vh;
}

.main-header {
    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
    color: white;
}

/* 五行颜色 */
.element-wood { background: #4CAF50; color: white; }
.element-fire { background: #F44336; color: white; }
.element-earth { background: #FFC107; color: #333; }
.element-metal { background: #9E9E9E; color: white; }
.element-water { background: #2196F3; color: white; }

/* 卡片悬停效果 */
.palace-card:hover {
    transform: translateX(5px);
    transition: transform 0.2s;
}

.btn-calculate {
    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
    border: none;
}

.btn-calculate:hover {
    transform: translateY(-2px);
    box-shadow: 0 5px 15px rgba(102, 126, 234, 0.4);
}

/* 流年推算區域過渡動畫 */
#liuyearSection {
    transition: all 0.3s ease-in-out;
}

/* 流年表格當前年份高亮 */
.table-warning {
    background-color: #fff3cd !important;
    animation: pulse 2s infinite;
}

@keyframes pulse {
    0%, 100% { opacity: 1; }
    50% { opacity: 0.85; }
}

/* 發動宮徽章脈衝動畫 */
.badge-pulse {
    animation: badge-pulse 1.5s ease-in-out infinite;
}

@keyframes badge-pulse {
    0%, 100% { transform: scale(1); }
    50% { transform: scale(1.05); }
}

/* 靜態命盤區域（上半部 40%） */
.static-section {
    min-height: 40vh;
}

/* 動態時間分析區域（下半部 60%） */
.dynamic-section {
    min-height: 60vh;
    background-color: #f8f9fa;
    border-top: 3px solid #667eea;
}

/* 動態分析區域的禁用狀態（計算完成前灰化） */
.dynamic-section-disabled {
    opacity: 0.6;
    pointer-events: none;
}

/* 時間選擇器容器 */
.time-selector-container {
    background-color: white;
    padding: 1.5rem;
    border-radius: 0.5rem;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
    margin-bottom: 2rem;
}

/* 流年摘要卡片 */
#liuyearSummary {
    border-left: 4px solid #0dcaf0;
}

/* 發動宮摘要卡片 */
#domSummary {
    border-left: 4px solid #ffc107;
}

/* 機會點摘要卡片 */
#chanceSummary {
    border-left: 4px solid #198754;
}

/* 發動宮詳細表格特殊樣式 */
.dom-age-active {
    background-color: #fff3cd;
    font-weight: bold;
}

/* 機會點樣式 */
.chance-point {
    display: inline-block;
    padding: 0.25rem 0.5rem;
    border-radius: 0.25rem;
    font-weight: bold;
}

/* 機會點口訣區域 */
#chancePassword {
    font-size: 1.1rem;
    line-height: 1.8;
}

/* 機會點表格標題背景 */
#chanceDetailTable .table thead th {
    background-color: #e9ecef;
}

/* ============================================
   四核心字段卡片樣式（新增）
   ============================================ */

/* 詳細卡片容器 */
.detail-card {
    background: #ffffff;
    border-left: 4px solid #667eea;
    border-radius: 0.375rem;
    padding: 1rem 1.25rem;
    margin-bottom: 1rem;
    transition: all 0.3s ease;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.05);
}

.detail-card:hover {
    border-left-width: 6px;
    box-shadow: 0 3px 10px rgba(102, 126, 234, 0.15);
    transform: translateX(3px);
}

/* 卡片標題區 */
.detail-header {
    display: flex;
    align-items: center;
    margin-bottom: 0.75rem;
    padding-bottom: 0.5rem;
    border-bottom: 1px solid #e9ecef;
}

.detail-icon {
    font-size: 1.5rem;
    margin-right: 0.75rem;
    flex-shrink: 0;
}

.detail-title {
    color: #667eea;
    font-size: 1.05rem;
    font-weight: 600;
}

/* 卡片內容區 */
.detail-content {
    color: #495057;
    line-height: 1.8;
    font-size: 0.95rem;
}

/* 不同類型卡片左邊框顏色 */
.card-trait { border-left-color: #667eea; } /* 特質-紫色 */
.card-advantage { border-left-color: #4CAF50; } /* 優點-綠色 */
.card-disadvantage { border-left-color: #F44336; } /* 缺點-紅色 */
.card-suggestion { border-left-color: #FF9800; } /* 建議-橙色 */

/* hover 時對應顏色加深 */
.card-trait:hover { border-left-color: #5568d3; }
.card-advantage:hover { border-left-color: #43a047; }
.card-disadvantage:hover { border-left-color: #e53935; }
.card-suggestion:hover { border-left-color: #f57c00; }

/* 優化 detailed-info 容器 */
.detailed-info {
    background-color: #f8f9fa;
    padding: 1.5rem;
    border-radius: 0.5rem;
    margin-top: 1rem;
}

/* 響應式調整 */
@media (max-width: 768px) {
    .detail-card {
        padding: 0.875rem 1rem;
    }

    .detail-icon {
        font-size: 1.25rem;
        margin-right: 0.5rem;
    }

    .detail-title {
        font-size: 1rem;
    }

    .detail-content {
        font-size: 0.9rem;
        line-height: 1.7;
    }
}

/* 平板適配 */
@media (min-width: 768px) and (max-width: 1024px) {
    .detail-content {
        font-size: 0.92rem;
    }
}

/* ============================================
   流年碰機會點口訣高亮樣式
   ============================================ */

.password-highlight {
    background-size: 200% auto;
    font-size: 1.8rem;
    font-weight: 700;
    text-align: center;
    padding: 1.25rem 2rem;
    border-radius: 0.75rem;
    letter-spacing: 0.05em;
    position: relative;
    overflow: hidden;
}


/* 響應式調整 - 手機版 */
@media (max-width: 768px) {
    .password-highlight {
        font-size: 1.4rem;
        padding: 1rem 1.5rem;
        letter-spacing: 0.03em;
    }
}

/* 響應式調整 - 平板版 */
@media (min-width: 768px) and (max-width: 1024px) {
    .password-highlight {
        font-size: 1.6rem;
        padding: 1.125rem 1.75rem;
    }
}