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.rounded-pill:hover {
    transform: scale(1.05);
    transition: transform 0.2s;
}

/* 發動中徽章脈衝動畫 */
.badge-pulse {
    animation: pulse-glow 2s infinite;
}

@keyframes pulse-glow {
    0%, 100% {
        opacity: 1;
        box-shadow: 0 0 5px rgba(220, 53, 69, 0.5);
    }
    50% {
        opacity: 0.8;
        box-shadow: 0 0 15px rgba(220, 53, 69, 0.8);
    }
}

/* 機會點樣式 */
.chance-badge {
    font-size: 1.1rem;
    padding: 0.5rem 1rem;
    border-radius: 0.5rem;
    display: inline-block;
}

.password-highlight {
    font-size: 1.5rem;
    font-weight: bold;
    padding: 1rem;
    border-radius: 0.5rem;
    background: linear-gradient(135deg, #FFF9C4 0%, #FFEB3B 100%);
    text-align: center;
    box-shadow: 0 2px 10px rgba(255, 193, 7, 0.3);
}

/* 新增：上下兩塊佈局樣式 */
.static-section {
    margin-bottom: 2rem;
}

.dynamic-section {
    background: white;
    border-radius: 0.5rem;
    padding: 1.5rem;
    margin-top: 2rem;
    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
}

.dynamic-section-disabled {
    opacity: 0.6;
    pointer-events: none;
}

/* Tab 樣式優化 */
.nav-tabs .nav-link {
    font-weight: 600;
    color: #667eea;
}

.nav-tabs .nav-link.active {
    color: #764ba2;
    border-bottom: 3px solid #764ba2;
}

/* 時間選擇器樣式 */
.time-selector-container {
    background: linear-gradient(135deg, #f5f7fa 0%, #c3cfe2 100%);
    border-radius: 0.5rem;
    padding: 1rem;
    margin-bottom: 1.5rem;
}

.time-selector-container .input-group {
    max-width: 200px;
}

.time-selector-container input[type="number"] {
    text-align: center;
    font-weight: 600;
}

/* ============================================
   新增：命格詳細分析樣式
   ============================================ */

/* 重點功能卡片邊框動畫 */
.border-warning.border-3 {
    animation: pulse-border 2s infinite;
}

@keyframes pulse-border {
    0%, 100% {
        border-color: #ffc107 !important;
        box-shadow: 0 0 10px rgba(255, 193, 7, 0.3);
    }
    50% {
        border-color: #ff9800 !important;
        box-shadow: 0 0 20px rgba(255, 152, 0, 0.5);
    }
}

/* 詳細資訊區塊樣式 */
.detailed-info {
    background-color: #f8f9fa;
    padding: 1rem;
    border-radius: 0.375rem;
    margin-top: 1rem;
}

.detailed-info strong {
    color: #667eea;
}

.detailed-info .text-muted {
    color: #adb5bd !important;
}

.detailed-info p {
    line-height: 1.6;
}

/* 五行生剋細分 badge 樣式 */
.badge.bg-info {
    background-color: #17a2b8 !important;
}

/* 重點標記 badge 樣式 */
.badge.bg-warning.text-dark {
    font-weight: bold;
    animation: badge-shine 2s infinite;
}

@keyframes badge-shine {
    0%, 100% { opacity: 1; }
    50% { opacity: 0.85; }
}