:root {
    --card-bg-color: #edf2f7;  /* 修改：從 #f8fafc 變為較深的顏色 */
    --card-border-radius: 6px;
    --card-shadow: 0 1px 3px rgba(0, 0, 0, 0.05);
    --card-padding: 10px;
    --card-margin-bottom: 15px;
    --form-gap: 10px;
    --form-margin-bottom: 12px;
    --button-bg-color: #42a5f5;
    --button-shadow: 0 2px 4px rgba(0, 0, 0, 0.2);
    --query-btn-color: #4285f4;
    --query-btn-hover-color: #2a75f3;
    --primary-text-color: #2c3e50;
    --bg-color-light: #f0f7ff;
    --hover-bg-color: #e3f2fd;
    --danger-color: #ff4444;
    --button-text-color: white;
    --primary-color: #3498db;
    --primary-color-rgb: 52, 152, 219;
    --border-color: #e2e8f0;
    --border-color-light: #cbd5e0;
    --input-bg-color: #ffffff;
    /* 新增變量，用於不同級別的容器 */
    --sub-container-bg: #e2e8f0;  /* 子容器背景色 */
    --sub-item-bg: #f0f7ff;       /* 項目背景色 */
    --content-card-bg: #f8fafc;   /* 內容卡片背景色 */
}

body {
    font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
    margin: 0;
    padding: 0;
    background-color: #e6e6e6; /* 修改：從 #f9f9f9 變為較深的灰色 #e6e6e6 */
    color: #333;
}

.main-content {
    margin-top: 80px;
    padding: 2rem;
}

.container {
    max-width: 1200px;
    margin: 0 auto;
    padding: 20px;
    position: relative;
    margin-top: 80px; /* 增加上邊距為按鈕預留空間 */
    overflow-x: hidden; /* 防止水平溢出 */
    padding: 0 15px; /* 添加左右內邊距 */
    padding-top: 40px; /* 頂部內邊距為按鈕預留空間 */
}

/* 通用按鈕基本樣式 */
.container .action-btn,
#resetButton,
#guideButton,
#guidedSetupButton {
    position: absolute !important;
    top: 5px !important;
    padding: 10px 18px !important;
    font-size: 13px !important;
    font-weight: 600 !important;
    color: white !important;
    border: none !important;
    border-radius: 8px !important;
    cursor: pointer !important;
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1) !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    width: auto !important;
    height: auto !important;
    text-align: center !important;
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "微軟正黑體", sans-serif !important;
    margin: 0 !important;
    transform: translateY(0) !important;
    min-width: 100px !important;
    white-space: normal !important; /* 允許換行，避免英文過長被截斷 */
    z-index: 500 !important; /* 大幅降低層級，確保絕對不覆蓋側邊欄 (990) */
}

/* 智能導引按鈕 - 保持漸變設計 */
#guidedSetupButton {
    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%) !important;
    box-shadow: 0 4px 12px rgba(102, 126, 234, 0.3) !important;
}

#guidedSetupButton:hover {
    background: linear-gradient(135deg, #5a6fd8 0%, #6b5b95 100%) !important;
    box-shadow: 0 6px 20px rgba(102, 126, 234, 0.4) !important;
    transform: translateY(-2px) !important;
}

#guidedSetupButton:active {
    transform: translateY(0) !important;
    box-shadow: 0 2px 8px rgba(102, 126, 234, 0.3) !important;
}

/* 恢復預設和新手導引按鈕 - 使用網站藍色單一色 */
#resetButton,
#guideButton {
    background: #1e88e5 !important;
    box-shadow: 0 4px 12px rgba(30, 136, 229, 0.3) !important;
}

#resetButton:hover,
#guideButton:hover {
    background: #1565c0 !important;
    box-shadow: 0 6px 20px rgba(30, 136, 229, 0.4) !important;
    transform: translateY(-2px) !important;
}

#resetButton:active,
#guideButton:active {
    transform: translateY(0) !important;
    box-shadow: 0 2px 8px rgba(30, 136, 229, 0.3) !important;
}

.container .action-btn i,
#resetButton i,
#guideButton i,
#guidedSetupButton i {
    margin-right: 8px !important;
    font-size: 14px !important;
    opacity: 0.9 !important;
}

/* 按鈕位置設定 - 確保正確間距避免重疊 */
#resetButton {
    left: 30px !important; /* 往右移動 */
}

#guideButton {
    left: 160px !important; /* 往右移動 */
}

#guidedSetupButton {
    left: 290px !important; /* 往右移動 */
}

/* 確保sidebar顯示時按鈕位置保持不變 */
.sidebar.show ~ .container #resetButton, 
.sidebar.show ~ .container #guideButton,
.sidebar.show ~ .container #guidedSetupButton {
    transition: all 0.3s ease !important;
}

.sidebar.show ~ .container #resetButton {
    left: 30px !important;
}

.sidebar.show ~ .container #guideButton {
    left: 160px !important;
}

.sidebar.show ~ .container #guidedSetupButton {
    left: 290px !important;
}

/* 響應式設計 - 768px以下 */
@media screen and (max-width: 768px) {
    #resetButton,
    #guideButton,
    #guidedSetupButton {
        min-width: 80px !important;
        padding: 8px 14px !important;
    }
    
    #resetButton {
        left: 20px !important; /* 平板往右移動 */
    }
    
    #guideButton {
        left: 120px !important; /* 平板往右移動 */
    }
    
    #guidedSetupButton {
        left: 220px !important; /* 平板往右移動 */
    }
}

/* 響應式設計 - 480px以下 */
@media screen and (max-width: 480px) {
    #resetButton,
    #guideButton,
    #guidedSetupButton {
        font-size: 11px !important;
        padding: 6px 10px !important;
        min-width: 70px !important;
        border-radius: 6px !important;
    }
    
    #resetButton {
        left: 15px !important; /* 手機往右移動 */
    }
    
    #guideButton {
        left: 100px !important; /* 手機往右移動 */
    }
    
    #guidedSetupButton {
        left: 185px !important; /* 手機往右移動 */
    }
}

/* 版本號位置 */
.version {
    right: 250px !important;
}

/* 基礎容器樣式 */
.content-card {
    background-color: var(--content-card-bg);
    border-radius: var(--card-border-radius);
    box-shadow: var(--card-shadow);
    padding: var(--card-padding);
    margin-bottom: var(--card-margin-bottom);
    width: 100%;
    box-sizing: border-box;
    border: 1px solid var(--border-color);
}

/* 特殊容器樣式 */
.special-content-card {
    background-color: white;
    border-radius: 8px;
    box-shadow: 0 2px 5px rgba(0,0,0,0.1);
    overflow-x: hidden;
}

.card-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 10px;
    padding-bottom: 8px;
    border-bottom: 1px solid #e2e8f0;
}

.card-header h3 {
    margin: 0;
    font-size: 1.2rem;
    color: #2c3e50;
    flex: 1;
    text-align: center; /* 讓標題居中 */
}

.card-content {
    padding: 5px 0;
}

/* 旧版全域 .form-row/.form-group 樣式已移除，改由通用網格規則接管 */

.card-actions {
    display: flex;
    gap: 8px;
}

.delete-btn {
    background-color: #f56565;
    color: white;
    border: none;
    border-radius: 4px;
    padding: 4px 8px;
    font-size: 0.8rem;
    cursor: pointer;
    transition: background-color 0.3s;
}

.delete-btn:hover {
    background-color: #e53e3e;
}

.tooltip-container {
    position: relative;
}

h1 {
    text-align: center;
    color: var(--gradient-start);
    margin: 0 auto 2rem;
    font-size: 2rem;
    font-weight: 600;
    width: fit-content;
    position: relative;
}

/* 保留原有的按鈕樣式 */
.button-container {
    display: flex;
    justify-content: center;
    gap: 2rem;
    margin-top: 2rem;
}

.button-container button {
    padding: 1rem 2.5rem;
    font-size: 1.1rem;
    font-weight: 500;
    border-radius: 8px;
    background: linear-gradient(45deg, var(--gradient-start), var(--gradient-end));
    color: white;
    border: none;
    cursor: pointer;
    transition: all 0.3s ease;
    box-shadow: 0 4px 12px rgba(30, 136, 229, 0.2);
}

.button-container button:hover {
    transform: translateY(-2px);
    box-shadow: 0 6px 16px rgba(30, 136, 229, 0.3);
}

/* 資產區塊樣式 */
.asset-section {
    background: white;
    padding: 2rem;
    border-radius: 10px;
    box-shadow: 0 4px 6px rgba(0,0,0,0.1);
    margin-bottom: 2rem;
    text-align: center;
}

.add-asset-button {
    width: 60px;
    height: 60px;
    border-radius: 50%;
    background: linear-gradient(45deg, var(--gradient-start), var(--gradient-end));
    color: white;
    border: none;
    font-size: 2rem;
    cursor: pointer;
    transition: all 0.3s ease;
    box-shadow: 0 4px 12px rgba(30, 136, 229, 0.2);
}

.add-asset-button:hover {
    transform: scale(1.1);
    box-shadow: 0 6px 16px rgba(30, 136, 229, 0.3);
}

/* 模組選擇視窗樣式 - 獨立完整定義，避免受其他樣式影響 */
.modal {
    display: none;
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, 0.5);
    z-index: 1001;
}

.modal-content {
    position: relative;
    background-color: white;
    margin: 5% auto;
    padding: 2rem;
    width: 60%; /* 調整為合適寬度 */
    max-width: 650px; /* 調整最大寬度 */
    border-radius: 12px;
    box-shadow: 0 8px 30px rgba(0, 0, 0, 0.15);
    max-height: 85vh;
    overflow-y: auto;
    border-top: 4px solid #3498db;
}

/* 改善模組網格樣式 */
.module-grid {
    display: flex;
    flex-direction: column;
    gap: 12px;
    margin-top: 15px;
    align-items: center;
    text-align: center;
}

/* 改善模組類別樣式 */
.module-category {
    margin-bottom: 15px;
    text-align: center;
    width: 100%;
}

.module-category h3 {
    color: #2c3e50;
    font-size: 16px;
    margin-bottom: 8px;
    padding-bottom: 6px;
    border-bottom: 1px solid #e9ecef;
    text-align: center;
}

/* 改善模組項目樣式 */
.module-item {
    background-color: #f8f9fa;
    border: 1px solid #e9ecef;
    border-radius: 6px;
    padding: 8px 12px;
    cursor: pointer;
    transition: all 0.2s ease;
    position: relative;
    box-shadow: 0 2px 5px rgba(0,0,0,0.05);
    text-align: center;
    width: 200px;
    margin: 0 auto 6px auto;
    font-size: 0.9rem;
    color: #2c3e50;
    font-weight: 500;
}

.module-item:hover {
    transform: translateY(-2px);
    box-shadow: 0 4px 8px rgba(0,0,0,0.1);
    border-color: #3498db;
    background-color: #f0f8ff;
}

/* 媒體查詢優化 */
@media screen and (max-width: 768px) {
    .modal-content {
        width: 85%;
        padding: 1.5rem;
    }
    
    .module-grid {
        grid-template-columns: repeat(auto-fill, minmax(140px, 1fr));
        gap: 12px;
    }
    
    #moduleModal .modal-content {
        width: 70%;
        max-width: 400px;
    }
}

@media screen and (max-width: 480px) {
    .modal-content {
        width: 95%;
        padding: 1rem;
    }
    
    .module-grid {
        grid-template-columns: repeat(auto-fill, minmax(120px, 1fr));
        gap: 10px;
    }
    
    #moduleModal .modal-content {
        width: 90%;
        max-width: 350px;
    }
}

.close-modal {
    position: absolute;
    right: 20px;
    top: 15px;
    font-size: 24px;
    cursor: pointer;
    color: #666;
    line-height: 1;
}

.close-modal:hover {
    color: #333;
}

/* 適配移動設備 */
@media screen and (max-width: 768px) {
    .modal-content {
        width: 95%;
        padding: 1.5rem;
    }
    
    .module-category {
        padding: 1rem;
    }
    
    .module-item {
        padding: 0.8rem;
        margin-bottom: 0.6rem;
    }
}

@media screen and (max-width: 480px) {
    .modal-content {
        width: 95%;
        padding: 1rem;
    }
    
    .module-category {
        padding: 0.8rem;
    }
    
    .module-item {
        padding: 0.7rem;
        margin-bottom: 0.5rem;
        font-size: 0.85rem;
    }
}

.module-item {
    background: white;
    padding: 1rem;
    margin-bottom: 0.8rem;
    border-radius: 6px;
    cursor: pointer;
    transition: all 0.3s ease;
    border: 1px solid #eee;
    color: #333;
    font-weight: 500;
}

.module-item:hover {
    transform: translateX(10px);
    border-color: var(--gradient-start);
    box-shadow: 0 2px 8px rgba(30, 136, 229, 0.2);
}

.modal-content {
    max-width: 90%;
    max-height: 90vh;
    overflow-y: auto;
    padding: 1.2rem;
}

.finance-sections {
    display: flex;
    flex-wrap: wrap;
    gap: 20px;
    width: 100%;
    margin-bottom: 20px;
    max-width: calc(1700px - 200px); /* 最大寬度減去側邊欄寬度 */
    margin: 0 auto;
    padding: 0;
    margin-top: 55px; /* 從70px減少到55px，內容更往上移 */
    padding-top: 10px;
    overflow: visible;
    width: 100%;
    box-sizing: border-box;
}

.finance-section {
    flex: 1 1 calc(50% - 10px);
    min-width: 300px;
    margin-bottom: 0;
    background-color: white;
    border-radius: 8px;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
    padding: 15px;
}

.finance-section h2 {
    color: #2c3e50;
    font-size: 1.5rem;
    margin-top: 0;
    margin-bottom: 15px;
    padding-bottom: 10px;
    border-bottom: 2px solid #e2e8f0;
    text-align: center; /* 讓標題居中 */
}

.item-container {
    display: flex;
    flex-direction: column;
    gap: 10px;
    padding: 10px;
    margin-bottom: 10px;
}

/* 移除舊的按鈕樣式 */
.add-button-container {
    display: flex;
    justify-content: center; /* 改為居中顯示，原本是 flex-end */
    margin-top: 10px;
    width: 100%;
}

/* 更新添加按鈕樣式 */
.add-button {
    background-color: #42a5f5; /* 修改為更淡的藍色 */
    color: white;
    border: none;
    border-radius: 50%;
    width: 34px;
    height: 34px;
    display: flex;
    justify-content: center;
    align-items: center;
    cursor: pointer;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.2);
    transition: all 0.3s ease;
    margin: 5px auto; /* 使其居中 */
    position: relative;
    z-index: 2;
}

.add-button:hover {
    background-color: #2c3e50;
    transform: scale(1.05);
}

.add-button i {
    font-size: 18px;
    font-weight: bold;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    height: 100%;
}

/* 確保+號圖標正確顯示 */
.add-button i.fa-plus::before {
    content: "+";
    font-size: 18px;
    line-height: 1;
    position: relative;
    top: -1px;
}

/* 調整工具按鈕位置和樣式，使其與側邊欄切換按鈕一致 */
.tools-button {
    display: none; /* 完全隱藏工具按鈕 */
}

.tools-menu {
    display: none; /* 同時隱藏工具選單 */
}

.return-calc-form {
    padding: 20px;
}

.return-input-group {
    display: flex;
    flex-direction: column;
    gap: 10px;
    margin-bottom: 20px;
}

.return-input-group input {
    padding: 8px;
    border: 1px solid #ddd;
    border-radius: 4px;
    text-align: right;
}

.calc-button {
    width: 100%;
    padding: 10px;
    background: linear-gradient(45deg, var(--gradient-start), var(--gradient-end));
    color: white;
    border: none;
    border-radius: 5px;
    cursor: pointer;
    margin-bottom: 20px;
}

.result-display {
    background: #f8fafc;
    padding: 15px;
    border-radius: 5px;
    font-size: 1.1em;
}

.result-display div {
    margin: 5px 0;
}

/* 旧版通用 .form-row/.form-group 樣式移除（由通用網格規則接管） */

/* 按鈕樣式 */
.card-actions {
    display: flex;
    gap: 0.5rem;
}

.save-btn,
.delete-btn {
    padding: 5px 10px;
    border: none;
    border-radius: 4px;
    cursor: pointer;
    font-size: 0.9rem;
    transition: all 0.3s ease;
}

.save-btn {
    background: #4CAF50;
    color: white;
}

.delete-btn {
    background: #ff4444;
    color: white;
}

/* 響應式調整 */
@media screen and (max-width: 768px) {
    .container {
        margin-left: 0;
        width: 100%;
        padding: 10px;
    }
    
    /* 旧版通用 .form-row/.form-group 響應式已移除（由通用網格規則接管） */

    /* 調整輸入框寬度 */
    input[type="text"],
    input[type="number"],
    input[type="email"],
    input[type="password"],
    select,
    .standard-input,
    .standard-select {
        width: 100% !important;
    }

    /* 調整金額顯示位置 */
    [id$="-display"] {
        position: static;
        margin-left: 5px;
        font-size: 0.8rem;
    }

    /* 調整導航欄在手機版的樣式 */
    .nav-links {
        display: flex;
        flex-direction: column;
        position: absolute;
        top: 60px;
        right: 0;
        background: white;
        width: 200px;
        box-shadow: 0 2px 5px rgba(0,0,0,0.1);
        display: none;  /* 預設隱藏 */
    }

    .nav-links.active {
        display: flex;
    }

    .nav-links a {
        padding: 15px 20px;
        border-bottom: 1px solid #eee;
        width: 100%;
        text-align: left;
    }

    /* 添加漢堡選單按鈕 */
    .menu-toggle {
        display: block;
        position: absolute;
        right: 20px;
        top: 50%;
        transform: translateY(-50%);
        cursor: pointer;
        padding: 10px;
    }

    /* 調整側邊欄在手機版的樣式 */
    .sidebar {
        transform: translateX(-100%);
        transition: transform 0.3s ease;
        width: 80%;
        max-width: 300px;
        top: 0; /* 確保與藍色條高度一致 */
    }

    .sidebar.show {
        transform: translateX(0);
    }

    /* 添加側邊欄切換按鈕 */
    .sidebar-toggle {
        position: fixed;
        bottom: 20px;
        right: 20px;
        width: 50px;
        height: 50px;
        background-color: #1e88e5; /* 使用 --gradient-start 顏色 */
        color: white;
        border: none;
        border-radius: 50%;
        display: flex;
        align-items: center;
        justify-content: center;
        cursor: pointer;
        z-index: 975; /* 調整 z-index 不遮擋側邊欄 */
        box-shadow: 0 2px 8px rgba(0, 0, 0, 0.3);
        transition: all 0.2s ease;
    }

    .sidebar-toggle:hover {
        background-color: #1565c0;
        transform: scale(1.05);
    }

    @media screen and (max-width: 768px) {
        .sidebar-toggle {
            width: 45px;
            height: 45px;
            bottom: 15px;
            right: 15px;
        }
        
        .container, .finance-sections {
            padding: 0.5rem;
        }
    }

    @media screen and (max-width: 480px) {
        .sidebar-toggle {
            width: 40px;
            height: 40px;
            bottom: 10px;
            right: 10px;
        }
    }

    /* 調整側邊欄在手機版的樣式 */
    .sidebar {
        transform: translateX(-100%);
        transition: transform 0.3s ease;
        width: 80%;
        max-width: 300px;
        top: 0; /* 確保與藍色條高度一致 */
    }

    .sidebar.show {
        transform: translateX(0);
    }

    /* 添加側邊欄切換按鈕 */
    .sidebar-toggle {
        display: block;
        position: fixed;
        left: 20px;
        bottom: 80px;
        background: var(--gradient-start);
        color: white;
        width: 50px;
        height: 50px;
        border-radius: 50%;
        display: flex;
        align-items: center;
        justify-content: center;
        cursor: pointer;
        box-shadow: 0 2px 5px rgba(0,0,0,0.2);
        z-index: 980;
    }

    .sidebar-toggle i {
        font-size: 1.5rem;
    }

    /* 顯示側邊欄關閉按鈕 */
    .sidebar-close {
        top: 30px;
        right: 15px;
        width: 40px;
        height: 40px;
    }
    
    /* 顯示側邊欄遮罩層 */
    .sidebar-overlay.show {
        display: block;
    }

    .sidebar-section:first-child {
        margin-top: 60px !important;  /* 加入上邊距以避免被頂部藍色條覆蓋 */
        padding-top: 0;  /* 移除頂部內邊距 */
    }
    
    .sidebar {
        padding-top: 40px;
    }
}

/* 智慧排版容器 */
.smart-grid-container {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
    gap: 1rem;
    width: 100%;
}

@media screen and (max-width: 576px) {
    .smart-grid-container {
        grid-template-columns: 1fr;
    }
}

/* 優化滾動條樣式 */
.content-card::-webkit-scrollbar {
    width: 6px;
    height: 6px;
}

.content-card::-webkit-scrollbar-thumb {
    background: #ccc;
    border-radius: 3px;
}

.content-card::-webkit-scrollbar-track {
    background: #f0f0f0;
}

/* 卡片內容布局 */
.card-header {
    width: 100%;
    box-sizing: border-box;
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 0.8rem;  /* 減少與內容的間距 */
    padding-bottom: 0.5rem;  /* 減少底部內邊距 */
    border-bottom: 1px solid #eee;
}

.card-content {
    width: 100%;
    box-sizing: border-box;
    display: flex;
    flex-direction: column;
    gap: 0.8rem;
}

/* 修改左側導覽列樣式 */
.sidebar {
    position: fixed;
    left: 0;
    top: 0;  /* 修改：從48px改為0，使其延伸至頁面頂部 */
    bottom: 0;  /* 保持延伸到底部 */
    width: 200px;
    background-color: white;
    box-shadow: 2px 0 5px rgba(0,0,0,0.1);
    overflow-y: auto;
    z-index: 990;  /* 確保在大多數元素之上，但在 header 和 footer 之下 */
}

/* 確保 header 和 footer 在最上層 */
.gradient-header {
    position: fixed;
    top: 0;
    width: 100%;
    z-index: 1000; /* 確保藍色條在最上層 */
    height: 52px;  /* 減少整體高度 */
    padding: 4px 1rem;  /* 增加上下間距，減少左右間距 */
    display: flex;
    align-items: center;  /* 垂直置中 */
    box-sizing: border-box;
}

/* 調整 logo 容器 */
.gradient-header .logo {
    display: flex;
    align-items: center;
    height: 100%;
    margin-left: 10px;  /* 微調 logo 的左側間距 */
    padding: 0;  /* 移除內邊距 */
}

.gradient-header .logo img {
    height: 40px;
    width: auto;
    padding: 0;  /* 移除內邊距 */
}

.gradient-footer {
    z-index: 999;  /* 確保 footer 在側邊欄之上 */
    position: relative;  /* 確保 z-index 生效 */
}

.sidebar-section {
    padding: 10px 0;
    border-bottom: 1px solid #eee;
    display: flex;
    flex-direction: column;
}

/* 調整第一個 sidebar-section 的位置 */
.sidebar-section:first-child {
    margin-top: 60px !important;  /* 加入上邊距以避免被頂部藍色條覆蓋 */
    padding-top: 0;  /* 移除頂部內邊距 */
}

.sidebar-title {
    padding: 10px 15px;
    color: #666;
    font-weight: bold;
    font-size: 0.9rem;
}

.sidebar-item {
    padding: 12px 20px;
    display: flex;
    align-items: center;
    cursor: pointer;
    transition: all 0.3s ease;
    color: #333;
}

.sidebar-item i {
    margin-right: 10px;
    width: 20px;
    text-align: center;
    color: #666;
}

.sidebar-item:hover {
    background: #f0f7ff;
    color: var(--gradient-start);
}

.sidebar-item:hover i {
    color: var(--gradient-start);
}

.sidebar-item.active {
    background: #e3f2fd;
    color: var(--gradient-start);
    border-right: 3px solid var(--gradient-start);
}

.sidebar-item.active i {
    color: var(--gradient-start);
}

/* 在標題下方添加裝飾線 */
.container h1:after {
    content: '';
    display: block;
    width: 100%;
    height: 3px;
    background: linear-gradient(45deg, var(--gradient-start), var(--gradient-end));
    margin-top: 0.5rem;
    border-radius: 2px;
}

/* 響應式調整 */
@media screen and (max-width: 768px) {
    .sidebar {
        transform: translateX(-100%);
        transition: transform 0.3s ease;
    }

    .sidebar.show {
        transform: translateX(0);
    }
}

/* 修改底部導航欄的樣式 */
.gradient-footer {
    position: relative;
    bottom: 0;
    left: 0;
    right: 0;
    height: 60px;
    background: linear-gradient(45deg, var(--gradient-start), var(--gradient-end));
    color: white;
    display: flex;
    justify-content: center;
    align-items: center;
    z-index: 1000;
}

.footer-content {
    display: flex;
    gap: 2rem;
}

.footer-content a {
    color: white;
    text-decoration: none;
    font-size: 0.9rem;
    transition: opacity 0.3s;
}

.footer-content a:hover {
    opacity: 0.8;
}

/* 標題區域樣式 */
.title-section {
    display: flex;
    justify-content: flex-end;  /* 將按鈕靠右對齊 */
    margin-bottom: 2rem;
}

.guide-button {
    padding: 0.8rem 1.5rem;  /* 稍微加大按鈕 */
    background: linear-gradient(45deg, var(--gradient-start), var(--gradient-end));
    color: white;
    border: none;
    border-radius: 4px;
    cursor: pointer;
    display: flex;
    align-items: center;
    gap: 0.5rem;
    font-size: 1.1rem;  /* 稍微加大字體 */
    transition: all 0.3s ease;
    box-shadow: 0 2px 4px rgba(0,0,0,0.1);
}

.guide-button:hover {
    transform: translateY(-2px);
    box-shadow: 0 4px 8px rgba(0,0,0,0.15);
}

.guide-button i {
    font-size: 1.3rem;
}

/* 統一輸入框和下拉選單的樣式 */
.standard-input,
.standard-select {
    /* 舊規格固定寬度移除，改由通用寬度型態接管 */
    padding: 6px 8px;
    border: 1px solid #ddd;
    border-radius: 4px;
    font-size: 0.9rem;
    text-align: right;
    background-color: #ffffff;  /* 保持輸入框為白色背景 */
    height: 36px;              /* 統一高度，便於與標籤垂直置中對齊 */
    line-height: 36px;         /* 保持內文字垂直置中 */
}

.standard-select {
    text-align: center;
    padding-right: 24px;  /* 為下拉箭頭留空間 */
}

/* 旧版 label/問號定位與 flex 版面調整移除（由通用網格與新版 label 規則接管） */

/* 小型輸入框樣式 */
.small-input {
    width: 80px;
    padding: 6px 8px;
    border: 1px solid #ddd;
    border-radius: 4px;
    font-size: 0.9rem;
    text-align: right;
    background-color: white;
}

/* 金額輸入框樣式 */
.amount-input {
    width: 140px;
}

.simulation-section {
    width: 100%;
    display: flex;
    justify-content: center;
    margin-top: 2rem;
    padding: 1rem;
}

/* 模擬按鈕容器樣式 */
.simulation-button-container {
    display: flex;
    justify-content: center;
    width: 100%;
    margin: 30px 0;  /* 增加上下間距 */
}

/* 開始模擬按鈕樣式 */
.simulation-btn {
    padding: 1.2rem 3rem;  /* 增大按鈕大小 */
    font-size: 1.4rem;  /* 增大字體 */
    font-weight: 600;   /* 加粗字體 */
    background: linear-gradient(45deg, #1a73e8, #64b5f6);  /* 藍色漸變 */
    color: white;
    border: none;
    border-radius: 50px;  /* 圓角更大 */
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 1rem;
    transition: all 0.3s ease;
    box-shadow: 0 6px 15px rgba(26, 115, 232, 0.3);  /* 更明顯的陰影 */
    position: relative;
    overflow: hidden;
    min-width: 250px;  /* 保證最小寬度 */
}

/* 按鈕懸停效果 */
.simulation-btn:hover {
    transform: translateY(-3px);
    box-shadow: 0 8px 20px rgba(26, 115, 232, 0.4);
    background: linear-gradient(45deg, #1565c0, #42a5f5);  /* 懸停時顏色變深 */
}

/* 按鈕點擊效果 */
.simulation-btn:active {
    transform: translateY(1px);
    box-shadow: 0 4px 10px rgba(26, 115, 232, 0.3);
}

/* 按鈕圖標樣式 */
.simulation-btn i {
    font-size: 1.2rem;
}

/* 統一所有輸入框的基本樣式 */
input[type="text"],
input[type="number"],
input[type="email"],
input[type="password"],
select,
.standard-input,
.standard-select,
.small-input,
.amount-input {
    padding: 8px 10px;   /* 增加內部填充，使輸入框更高 */
    border: 1px solid #ddd;
    border-radius: 4px;
    font-size: 0.9rem;  /* 增加字體大小 */
    background-color: #ffffff;
    box-sizing: border-box;   /* 確保寬度包含border和padding */
    height: 36px;  /* 固定高度 */
    line-height: 20px;  /* 調整行高 */
}

/* 下拉選單特殊處理 */
select,
.standard-select {
    text-align: center;
    padding-right: 30px;  /* 為下拉箭頭預留更多空間 */
    appearance: none;  /* 移除預設的下拉箭頭樣式 */
    -webkit-appearance: none;
    -moz-appearance: none;
    background-image: url("data:image/svg+xml,%3Csvg xmlns=%27http://www.w3.org/2000/svg%27 width=%2712%27 height=%2712%27 viewBox=%270 0 12 12%27%3E%3Cpath fill=%27%23333%27 d=%27M6 8L2 4h8z%27/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right 12px center;
}

/* 設置統一的 hover 和 focus 狀態 */
input[type="text"]:focus,
input[type="number"]:focus,
input[type="email"]:focus,
input[type="password"]:focus,
select:focus,
.standard-input:focus,
.standard-select:focus {
    outline: none;
    border-color: var(--gradient-start);
    box-shadow: 0 0 0 2px rgba(30, 136, 229, 0.2);
}

/* 內聯 width 不再強制覆蓋，改由通用寬度型態規則處理 */

/* 分析模式區塊的樣式 */
.analysis-modes {
    display: flex;
    flex-direction: column;
    gap: 1.5rem;
    margin-top: 1rem;
}

.analysis-mode-section {
    background: #f8fafc;
    border: 1px solid #e2e8f0;
    border-radius: 8px;
    padding: 1rem;
}

.mode-header {
    margin-bottom: 1rem;
    padding-bottom: 0.5rem;
    border-bottom: 1px solid #e2e8f0;
}

.mode-header h4 {
    color: #2d3748;
    margin: 0 0 0.5rem 0;
    font-size: 1rem;
    font-weight: 600;
}

.mode-description {
    color: #718096;
    margin: 0;
    font-size: 0.875rem;
}

.mode-content {
    padding: 0.5rem 0;
}

/* 保持原有的表單樣式 */
.form-row {
    display: flex;
    gap: 1rem;
    margin-bottom: 0.5rem;
}

.form-group {
    flex: 1;
}

/* 修改右側導覽列樣式 */
.right-sidebar {
    position: fixed;
    right: 0;
    top: 0;  /* 改為 0，延伸到頂部 */
    bottom: 0;  /* 改為 0，延伸到底部 */
    width: 200px;
    background-color: white;
    box-shadow: -2px 0 5px rgba(0,0,0,0.1);
    overflow-y: auto;
    z-index: 990;  /* 確保在大多數元素之上，但在 header 和 footer 之下 */
}

/* 確保 header 和 footer 在最上層 */
.gradient-header {
    z-index: 1000;  /* 確保 header 在右側導覽列之上 */
}

.gradient-footer {
    z-index: 1000;  /* 確保 footer 在右側導覽列之上 */
}

/* 手機版本的響應式設計 */
@media screen and (max-width: 768px) {
    /* 基本容器樣式 */
    .container {
        margin-left: 0;
        width: 100%;
        padding: 10px;
    }
    
    /* 縮小標題和欄位名稱 */
    h1 {
        font-size: 1.4rem;
        margin-bottom: 0.7rem;
    }
    
    h2 {
        font-size: 1.2rem;
        margin-bottom: 0.5rem;
    }
    
    h3 {
        font-size: 1rem;
        margin-bottom: 0.4rem;
    }
    
    h4 {
        font-size: 0.9rem;
        margin-bottom: 0.3rem;
    }
    
    /* 縮小欄位標籤 */
    .form-group label {
        font-size: 0.8rem;
        margin-bottom: 0.15rem;
    }
    
    /* 調整表單排版 */
    .form-row {
        flex-direction: column;
        gap: 0.4rem;
        margin-bottom: 0.4rem;
    }
    
    .form-group {
        width: 100%;
        margin-bottom: 0.4rem;
    }
    
    /* 縮小輸入框 */
    input[type="text"],
    input[type="number"],
    input[type="email"],
    input[type="password"],
    select,
    .standard-input,
    .standard-select {
        padding: 0.3rem 0.5rem;
        font-size: 0.8rem;
        height: 30px;
        width: 100% !important;
    }
    
    /* 調整金額顯示位置 */
    [id$="-display"] {
        position: static;
        margin-left: 5px;
        font-size: 0.8rem;
    }
    
    /* 縮小卡片內邊距 */
    .content-card {
        padding: 0.7rem;
        margin-bottom: 0.7rem;
    }
    
    .card-header {
        padding: 0.5rem 0.7rem;
        margin-bottom: 0.5rem;
    }
    
    .card-content {
        padding: 0 0.5rem 0.5rem;
    }
    
    /* 縮小分析模式區塊 */
    .analysis-mode-section {
        padding: 0.5rem;
        margin-bottom: 0.5rem;
    }
    
    .mode-header {
        margin-bottom: 0.3rem;
    }
    
    .mode-description {
        font-size: 0.75rem;
        margin-bottom: 0.25rem;
    }
    
    /* 縮小模組項目 */
    .module-item {
        width: calc(50% - 5px);  /* 兩列佈局，減少間距 */
        padding: 0.5rem;
        margin-bottom: 5px;
        font-size: 0.8rem;
    }
    
    .module-category h3 {
        font-size: 0.9rem;
        margin-bottom: 0.4rem;
        padding-bottom: 0.2rem;
    }
    
    /* 縮小按鈕 */
    .simulation-btn,
    .add-button,
    .tools-button {
        padding: 0.4rem 0.7rem;
        font-size: 0.85rem;
    }
    
    /* 縮小模態框內容 */
    .modal-content {
        padding: 0.8rem;
    }
    
    /* 縮小財務區塊間距 */
    .finance-section {
        margin-bottom: 0.8rem;
    }
    
    /* 縮小內容區塊間距 */
    .content-section {
        margin-bottom: 0.8rem;
    }
    
    /* 縮小模擬按鈕容器 */
    .simulation-button-container {
        margin: 0.6rem 0;
    }
    
    /* 調整導航欄在手機版的樣式 */
    .nav-links {
        display: flex;
        flex-direction: column;
        position: absolute;
        top: 60px;
        right: 0;
        background: white;
        width: 200px;
        box-shadow: 0 2px 5px rgba(0,0,0,0.1);
        display: none;  /* 預設隱藏 */
    }
    
    .nav-links.active {
        display: flex;
    }
    
    .nav-links a {
        padding: 15px 20px;
        border-bottom: 1px solid #eee;
        width: 100%;
        text-align: left;
    }
    
    /* 添加漢堡選單按鈕 */
    .menu-toggle {
        display: block;
        position: absolute;
        right: 20px;
        top: 50%;
        transform: translateY(-50%);
        cursor: pointer;
        padding: 10px;
    }
    
    /* 調整側邊欄在手機版的樣式 */
    .sidebar {
        transform: translateX(-100%);
        transition: transform 0.3s ease;
        width: 80%;
        max-width: 300px;
        top: 0; /* 確保與藍色條高度一致 */
    }
    
    .sidebar.show {
        transform: translateX(0);
    }
    
    /* 添加側邊欄切換按鈕 */
    .sidebar-toggle {
        display: block;
        position: fixed;
        left: 20px;
        bottom: 80px;
        background: var(--gradient-start);
        color: white;
        width: 50px;
        height: 50px;
        border-radius: 50%;
        display: flex;
        align-items: center;
        justify-content: center;
        cursor: pointer;
        box-shadow: 0 2px 5px rgba(0,0,0,0.2);
        z-index: 980;
    }
    
    .sidebar-toggle i {
        font-size: 1.5rem;
    }

    /* 投資理財知識下拉選單專用樣式 */
    .investment-knowledge-select {
        min-width: 400px !important;
        width: 100% !important;
        max-width: 500px !important;
    }

    /* 確保在不同螢幕尺寸下都有適當寬度 */
    @media screen and (max-width: 768px) {
        .investment-knowledge-select {
            min-width: 300px !important;
            max-width: 100% !important;
        }
    }

    @media screen and (max-width: 480px) {
        .investment-knowledge-select {
            min-width: 250px !important;
            max-width: 100% !important;
        }
    }
}

@media screen and (max-width: 480px) {
    .container {
        margin-left: 0;
        width: 100%;
        padding: 10px;
    }
    
    .modal-content {
        width: 95%;
        padding: 1rem;
    }
    
    .module-grid {
        grid-template-columns: repeat(auto-fill, minmax(120px, 1fr));
        gap: 10px;
    }
    
    .module-category {
        padding: 0.8rem;
    }
    
    .module-card {
        padding: 0.7rem;
        margin-bottom: 0.5rem;
    }
    
    .module-card h4 {
        font-size: 0.85rem;
    }
    
    .form-group label {
        font-size: 0.75rem;
    }
    
    input[type="text"],
    input[type="number"],
    input[type="email"],
    input[type="password"],
    select,
    .standard-input,
    .standard-select {
        padding: 0.25rem 0.4rem;
        font-size: 0.75rem;
        height: 28px;
    }
    
    .content-card {
        padding: 0.6rem;
        margin-bottom: 0.6rem;
    }
    
    .card-header {
        padding: 0.4rem 0.6rem;
    }
    
    .card-content {
        padding: 0 0.4rem 0.4rem;
    }
    
    .sidebar-toggle {
        width: 40px;
        height: 40px;
        left: 15px;
        bottom: 70px;
    }
    
    .sidebar-toggle i {
        font-size: 1.2rem;
    }
    
    .tools-button {
        bottom: 10px;
        right: 10px;
        width: 40px;
        height: 40px;
    }
    
    .tools-button span {
        font-size: 11px;
    }
}

/* 統一所有容器樣式 */
.finance-section, .content-section, .simulation-output, .chart-item {
    background-color: white;
    border-radius: 8px;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
    margin-bottom: 15px;
    padding: 12px;
    width: 100%;
    box-sizing: border-box;
}

.finance-section h2, .content-section .section-header h2, .simulation-output h2, .chart-item h3 {
    color: #2c3e50;
    font-size: 1.5rem;
    margin-top: 0;
    margin-bottom: 15px;
    padding-bottom: 10px;
    border-bottom: none;
}

/* 調整子容器樣式 */
.content-card, .module-container, .item-container, .analysis-mode-section {
    background-color: #f8fafc;
    border-radius: 6px;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.05);
    padding: 10px;
    margin-bottom: 15px;
    width: 100%;
    box-sizing: border-box;
}

/* 確保所有.content-card選擇器都使用相同的樣式 */
.content-card {
    background-color: #f8fafc;
    border-radius: 6px;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.05);
    padding: 10px;
    margin-bottom: 15px;
    width: 100%;
    box-sizing: border-box;
}

/* 卡片頭部和內容區域樣式 */
.card-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 10px;
}

.card-content {
    padding: 5px 0;
}

/* 調整財務區塊容器 */
.finance-sections {
    display: flex;
    flex-wrap: wrap;
    gap: 20px;
    width: 100%;
    margin-bottom: 20px;
}

.finance-section {
    flex: 1 1 calc(50% - 10px);
    min-width: 300px;
    margin-bottom: 0;
}

/* 調整圖表容器 */
.charts-container {
    display: flex;
    flex-wrap: wrap;
    gap: 20px;
    margin-top: 20px;
    width: 100%;
}

.chart-item {
    flex: 1 1 calc(50% - 10px);
    min-width: 300px;
    margin-bottom: 0;
}

/* 調整圖表容器內的畫布容器 */
.chart-canvas-container {
    width: 100%;
    height: 300px;
    margin: 10px 0;
    position: relative;
}

@media screen and (max-width: 768px) {
    .finance-section, .simulation-output, .chart-item {
        padding: 10px;
    }
    
    .content-section {
        padding: 10px 10px 5px 10px;
    }
    
    .module-card {
        flex: 1 1 calc(50% - 5px);
        padding: 8px;
    }
    
    .card-header {
        padding: 0 0 6px 0;
        margin-bottom: 6px;
    }
    
    /* 大幅增加側邊欄頂部空間 */
    .sidebar-section:first-child {
        margin-top: 160px; /* 進一步增加頂部空間 */
    }
    
    .sidebar-close {
        top: 40px;
    }
}

@media screen and (max-width: 480px) {
    .finance-section, .simulation-output, .chart-item {
        padding: 8px;
    }
    
    .content-section {
        padding: 8px 8px 4px 8px;
    }
    
    .module-card {
        flex: 1 1 100%;
        padding: 7px;
        margin-bottom: 6px;
    }
    
    .card-header {
        padding: 0 0 5px 0;
        margin-bottom: 5px;
    }
    
    /* 小螢幕進一步調整側邊欄頂部空間 */
    .sidebar-section:first-child {
        margin-top: 200px; /* 再增加頂部空間 */
    }
    
    .sidebar-close {
        top: 45px;
        width: 52px;
        height: 52px;
    }
    
    .sidebar-close i {
        font-size: 24px;
    }
}

/* 調整側邊欄切換按鈕 */
.sidebar-toggle, .tools-button {
    position: fixed;
    width: 42px;
    height: 42px;
    background-color: #1e88e5; /* 使用 --gradient-start 顏色 */
    color: white;
    border: none;
    border-radius: 4px;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    z-index: 975; /* 調整 z-index 不遮擋側邊欄 */
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.3);
    transition: all 0.2s ease;
}

/* 在側邊欄顯示時調整按鈕位置，確保不被側邊欄擋住 */
.sidebar.show ~ .sidebar-toggle, 
.sidebar.show ~ .tools-button {
    right: 20px; /* 改為 right 定位，不再使用 left */
}

.sidebar-toggle {
    right: 20px; /* 改為右下角 */
    bottom: 20px;
}

.tools-button {
    right: 20px; /* 改為右下角 */
    bottom: 75px;
}

.sidebar-toggle:hover, .tools-button:hover {
    background-color: #1565c0; /* 使用 --dark-blue 顏色 */
    transform: scale(1.05);
}

.sidebar-toggle i, .tools-button i {
    font-size: 20px; /* 增大圖標字體 從18px到20px */
}

/* 顯示工具按鈕文字 */
.tools-button {
    width: auto;
    padding: 0 10px;
}

.tools-button span {
    display: block;
    font-size: 15px; /* 增大文字字體 從13px到15px */
    margin-left: 5px;
}

@media screen and (max-width: 768px) {
    /* 調整側邊欄切換按鈕 */
    .sidebar-toggle, .tools-button {
        right: 15px; /* 改為 right 定位 */
        width: 40px;
        height: 40px;
    }
    
    .sidebar.show ~ .sidebar-toggle, 
    .sidebar.show ~ .tools-button {
        right: 15px; /* 改為 right 定位，維持位置不變 */
    }
    
    .tools-button {
        width: auto;
        padding: 0 8px;
    }
    
    .tools-button span {
        font-size: 14px; /* 增大手機版文字字體 從12px到14px */
    }
    
    .sidebar-toggle {
        bottom: 15px;
    }
    
    .tools-button {
        bottom: 65px;
    }
}

@media screen and (max-width: 480px) {
    /* 調整側邊欄切換按鈕 */
    .sidebar-toggle, .tools-button {
        right: 10px; /* 改為 right 定位 */
        width: 36px;
        height: 36px;
    }
    
    .sidebar.show ~ .sidebar-toggle, 
    .sidebar.show ~ .tools-button {
        right: 10px; /* 改為 right 定位，維持位置不變 */
    }
    
    .tools-button {
        width: auto;
        padding: 0 5px;
    }
    
    .tools-button span {
        font-size: 13px; /* 增大小螢幕文字字體 從11px到13px */
    }
    
    .sidebar-toggle {
        bottom: 10px;
    }
    
    .tools-button {
        bottom: 55px;
    }
    
    .sidebar-toggle i, .tools-button i {
        font-size: 18px; /* 增大小螢幕圖標字體 從16px到18px */
    }
}

/* 調整 content-section 特定樣式 */
.content-section {
    margin-bottom: 20px;
    position: relative; /* 添加相對定位 */
}

.content-section .section-header {
    margin: 0 0 5px 0;
    padding-bottom: 5px;
    border-bottom: none;
    text-align: center; /* 讓整個標題區域居中 */
}

.content-section .section-header h2 {
    margin: 0;
    font-size: 1.4rem;
    color: #2c3e50;
    text-align: center; /* 讓h2標題文本居中 */
}

/* 移除模組容器的間距 */
.module-container {
    margin: 0;
    padding: 0;
    background: transparent;
    box-shadow: none;
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
}

/* 調整模組卡片 */
.module-card {
    background-color: white;
    border-radius: 5px;
    padding: 8px;
    box-shadow: 0 1px 2px rgba(0, 0, 0, 0.05);
    transition: all 0.3s ease;
    margin: 0;
    flex: 1 1 calc(33.333% - 4px);
    min-width: 130px;
}

.module-card h4 {
    margin: 0 0 5px 0;
    font-size: 1rem;
    text-align: center; /* 確保標題居中 */
}

.module-card:hover {
    transform: translateY(-2px);
    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
}

/* 調整添加按鈕位置和樣式 */
.add-button {
    background-color: #42a5f5; /* 修改為更淡的藍色 */
    color: white;
    border: none;
    border-radius: 50%;
    width: 34px;
    height: 34px;
    display: flex;
    justify-content: center;
    align-items: center;
    cursor: pointer;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.2);
    transition: all 0.3s ease;
    margin: 5px auto; /* 使其居中 */
    position: relative;
    z-index: 2;
}

.add-button:hover {
    background-color: #2c3e50;
    transform: scale(1.05);
}

.add-button i {
    font-size: 18px;
    font-weight: bold;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    height: 100%;
}

/* 更細緻的容器間距調整 */
.finance-section, .content-section, .simulation-output, .chart-item {
    background-color: white;
    border-radius: 8px;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
    margin-bottom: 15px;
    width: 100%;
    box-sizing: border-box;
}

/* 基本資料和環境參數容器 */
.finance-section {
    padding: 12px;
}

/* 模擬輸出容器 */
.simulation-output {
    padding: 12px;
}

/* 圖表容器調整 */
.chart-item {
    padding: 12px;
}

/* 圖表容器內的畫布容器 */
.chart-canvas-container {
    margin: 5px 0;
}

/* 卡片頭部和內容 */
.card-header {
    padding: 0 0 8px 0;
    margin-bottom: 8px;
    border-bottom: 1px solid #e2e8f0;
}

.card-content {
    padding: 0;
}

@media screen and (max-width: 768px) {
    /* 調整側邊欄切換按鈕 */
    .sidebar-toggle, .tools-button {
        right: 15px; /* 改為 right 定位 */
        width: 40px;
        height: 40px;
    }
    
    .sidebar-toggle {
        bottom: 15px;
    }
    
    .tools-button {
        bottom: 65px;
    }
    
    .finance-section, .simulation-output, .chart-item {
        padding: 10px;
    }
    
    .content-section {
        padding: 10px 10px 5px 10px;
    }
    
    .module-card {
        flex: 1 1 calc(50% - 5px);
        padding: 8px;
    }
    
    /* 大幅增加側邊欄頂部空間 */
    .sidebar-section:first-child {
        margin-top: 160px; /* 進一步增加頂部空間 */
    }
    
    .sidebar-close {
        top: 40px;
    }
}

@media screen and (max-width: 480px) {
    /* 調整側邊欄切換按鈕 */
    .sidebar-toggle, .tools-button {
        right: 10px; /* 改為 right 定位 */
        width: 38px;
        height: 38px;
    }
    
    .sidebar-toggle {
        bottom: 10px;
    }
    
    .tools-button {
        bottom: 58px;
    }
    
    .finance-section, .simulation-output, .chart-item {
        padding: 8px;
    }
    
    .content-section {
        padding: 8px 8px 4px 8px;
    }
    
    .module-card {
        flex: 1 1 100%;
        padding: 7px;
        margin-bottom: 6px;
    }
    
    .card-header {
        padding: 0 0 5px 0;
        margin-bottom: 5px;
    }
    
    /* 小螢幕進一步調整側邊欄頂部空間 */
    .sidebar-section:first-child {
        margin-top: 200px; /* 再增加頂部空間 */
    }
    
    .sidebar-close {
        top: 50px;
        width: 52px;
        height: 52px;
    }
    
    .sidebar-close i {
        font-size: 24px;
    }
}

/* 按鈕定位 */
.sidebar-toggle {
    bottom: 20px;
}

.tools-button {
    bottom: 75px;
}

/* 通用容器樣式，減少邊距增加空間利用率 */
.finance-section, .content-section, .simulation-output {
    background-color: white;
    border-radius: 8px;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
    margin-bottom: 12px;
    padding: 10px;
    width: 100%;
    box-sizing: border-box;
}

/* 圖表容器樣式優化 */
.charts-container {
    padding: 0;
    margin: 0 0 12px 0;
    width: 100%;
    display: flex;
    flex-wrap: wrap;
    gap: 5px;  /* 減小間距 */
    background-color: white;
    border-radius: 8px;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
    padding: 8px;  /* 減小內邊距 */
}

/* 移除單個圖表的容器樣式，減少多層嵌套 */
.chart-item {
    flex: 1 1 calc(50% - 4px);
    min-width: 300px;
    margin: 0 0 5px 0;  /* 減小間距 */
    padding: 0;
    background: transparent;
    box-shadow: none;
    position: relative;  /* 為放大按鈕定位 */
}

/* 直接設置圖表畫布樣式 */
.chart-canvas-container {
    background-color: #f8fafc;
    border-radius: 6px;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
    padding: 8px;
    width: 100%;
    height: 300px;
    margin: 0;
    position: relative;
}

/* 圖表標題 */
.chart-item h3 {
    margin: 0 0 3px 0;  /* 減小間距 */
    padding: 5px 8px;
    font-size: 1.1rem;
    color: #2c3e50;
    background-color: #f8fafc;
    border-radius: 6px 6px 0 0;
    border-bottom: 1px solid #e2e8f0;
}

/* 添加圖表放大按鈕 */
.chart-expand-btn {
    position: absolute;
    top: 10px;
    right: 10px;
    width: 32px;
    height: 32px;
    border-radius: 50%;
    background-color: rgba(30, 136, 229, 0.9);
    border: 1px solid #1e88e5;
    color: white;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    z-index: 5;
    transition: all 0.2s;
    box-shadow: 0 2px 4px rgba(0,0,0,0.2);
    font-size: 14px;
}

.chart-expand-btn:hover {
    background-color: rgba(21, 101, 192, 1);
    transform: scale(1.1);
    box-shadow: 0 3px 6px rgba(0,0,0,0.3);
}

.chart-expand-btn i {
    font-size: 14px;
}

.chart-expand-btn i:nth-child(2) {
    display: inline-block; /* 更改為inline-block使第二個圖標默認顯示 */
}

/* 不再需要這個選擇器，因為我們希望兩個圖標都顯示 */
.chart-expand-btn i.fas.fa-expand:not(:before) + i {
    display: inline-block;
}

/* 修改全螢幕圖表模態框樣式，使其充分利用整個視窗空間 */
.chart-fullscreen-modal {
    display: none;
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, 0.85);
    z-index: 1000;
    justify-content: center;
    align-items: center;
    overflow: hidden;
}

.chart-fullscreen-container {
    width: 95%;
    height: 90%;
    background-color: white;
    border-radius: 8px;
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.3);
    position: relative;
    display: flex;
    flex-direction: column;
    padding: 20px;
    overflow: hidden;
}

.chart-fullscreen-close {
    position: absolute;
    top: 15px;
    right: 15px;
    width: 40px;
    height: 40px;
    border-radius: 50%;
    background-color: rgba(0, 0, 0, 0.1);
    color: #333;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: all 0.3s ease;
    border: none;
    z-index: 10;
    font-size: 20px;
}

.chart-fullscreen-close:hover {
    background-color: rgba(0, 0, 0, 0.2);
    transform: scale(1.1);
}

.chart-fullscreen-content {
    flex: 1;
    display: flex;
    flex-direction: column;
    width: 100%;
    height: calc(100% - 50px);
    overflow: hidden;
    position: relative;
}

.chart-fullscreen-title {
    font-size: 1.8rem;
    font-weight: 600;
    color: #333;
    margin-bottom: 20px;
    text-align: center;
    padding: 0 40px;
}

#fullscreenCanvas {
    width: 100% !important;
    height: 100% !important;
    object-fit: contain;
}

@media screen and (max-width: 768px) {
    .chart-expand-btn {
        width: 30px;
        height: 30px;
        font-size: 12px;
    }
    
    .chart-fullscreen-container {
        width: 98%;
        height: 95%;
        padding: 15px;
    }
    
    .chart-fullscreen-title {
        font-size: 1.4rem;
        margin-bottom: 15px;
    }
    
    .chart-fullscreen-close {
        width: 35px;
        height: 35px;
        top: 10px;
        right: 10px;
    }
}

@media screen and (max-width: 480px) {
    .chart-expand-btn {
        width: 28px;
        height: 28px;
        top: 8px;
        right: 8px;
        font-size: 10px;
    }
    
    .chart-fullscreen-container {
        width: 100%;
        height: 100%;
        border-radius: 0;
        padding: 10px;
    }
    
    .chart-fullscreen-title {
        font-size: 1.2rem;
        margin-bottom: 10px;
    }
    
    .chart-fullscreen-close {
        width: 30px;
        height: 30px;
        top: 8px;
        right: 8px;
        font-size: 18px;
    }
}

/* 添加字符計數樣式 */
.character-count {
    font-size: 0.8rem;
    color: #666;
    text-align: right;
    margin-top: 5px;
}

/* 確保AI設置區塊樣式與其他區塊一致 */
#ai-settings-card {
    width: 100%;
    box-sizing: border-box;
    padding: 1rem;
    border-radius: 8px;
    background-color: var(--content-card-bg);
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
    margin-bottom: 20px;
    transition: all 0.3s ease;
}

#ai-settings-card .card-header {
    border-bottom: 1px solid #eee;
    margin-bottom: 15px;
    padding-bottom: 10px;
}

#ai-settings-card .card-content {
    display: flex;
    flex-direction: column;
    gap: 15px;
}

#ai-settings-card.disabled-section {
    opacity: 0.7;
    pointer-events: none;
}

#ai-settings-card.disabled-section input,
#ai-settings-card.disabled-section select,
#ai-settings-card.disabled-section textarea {
    background-color: #f5f5f5;
    cursor: not-allowed;
}

/* 媒體查詢適配 */
@media screen and (max-width: 768px) {
    #ai-settings-card {
        padding: 0.8rem;
    }
    
    .character-count {
        font-size: 0.7rem;
    }
}

@media screen and (max-width: 480px) {
    #ai-settings-card {
        padding: 0.6rem;
    }
}

/* 容器基本樣式 */
.container {
    margin-left: 200px;  /* 與側邊欄寬度相同 */
    padding: 15px;
    width: calc(100% - 200px);  /* 減去側邊欄寬度 */
    box-sizing: border-box;
    transition: margin-left 0.3s ease, width 0.3s ease;
    max-width: 1700px;
}

/* 模組容器樣式，確保所有容器有一致的行為 */
.module-container, .content-section, .finance-section {
    width: 100%;
    display: flex;
    flex-direction: column;
    gap: 1rem;
    box-sizing: border-box;
}

/* 確保所有卡片有一致的佈局 */
.content-card {
    width: 100%;
    box-sizing: border-box;
    padding: 1rem;
    border-radius: 8px;
    background-color: var(--content-card-bg);  /* 使用變量 */
    box-shadow: 0 2px 5px rgba(0,0,0,0.1);
    overflow-x: hidden;
    border: 1px solid var(--border-color);
}

/* AI設定相關樣式調整 */
.textarea-container {
    position: relative;
    width: 100%;
    max-width: 100%;
}

.standard-textarea {
    width: 100%;
    max-width: 100%;
    padding: 10px;
    border: 1px solid #ddd;
    border-radius: 4px;
    resize: none;
    font-family: inherit;
    font-size: 14px;
    box-sizing: border-box;
}

.char-counter {
    position: absolute;
    right: 10px;
    bottom: 10px;
    font-size: 12px;
    color: #666;
}

/* 響應式設計 */
@media screen and (max-width: 768px) {
    .container {
        margin-left: 0;
        width: 100%;
        padding: 10px;
    }
    
    .sidebar.show ~ .container {
        margin-left: 0;
        width: 100%;
    }
    
    .content-section, .finance-section {
        padding: 0.5rem;
    }
}

/* AI設定卡片特定樣式 */
#ai-settings-card {
    width: 100%;
    margin-bottom: 1.5rem;
}

#ai-settings-card .card-content {
    padding: 1rem;
}

#ai-settings-card .form-row {
    margin-bottom: 1rem;
}

#ai-settings-card .textarea-container {
    width: 100%;
    max-width: 100%;
}

#ai-settings-card .standard-textarea {
    width: 100%;
    box-sizing: border-box;
}

/* 確保AI設定在移動設備上正確顯示 */
@media screen and (max-width: 768px) {
    #ai-settings-card {
        width: 100%;
    }
    
    #ai-settings-card .form-row {
        margin-bottom: 0.8rem;
    }
    
    #ai-settings-card .form-group {
        width: 100%;
    }
}

/* AI分析建議區塊樣式 */
.ai-advice, #ai-advice-section {
    background: #f8f9fa;
    border-left: 4px solid #4285f4;
    border-radius: 8px;
    padding: 20px;
    margin-bottom: 30px;
    position: relative;
    transition: all 0.3s ease;
    overflow: hidden;
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.05);
}

.ai-advice:hover, #ai-advice-section:hover {
    box-shadow: 0 5px 15px rgba(66, 133, 244, 0.2);
    transform: translateY(-2px);
}

.ai-advice::before, #ai-advice-section::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 4px;
    background: linear-gradient(90deg, #4285f4, #34a853, #fbbc05, #ea4335);
    opacity: 0;
    transition: opacity 0.3s ease;
}

.ai-advice:hover::before, #ai-advice-section:hover::before {
    opacity: 1;
}

.ai-advice h4, #ai-advice-section h4 {
    color: #4285f4;
    margin-bottom: 20px;
    font-size: 1.3rem;
    display: flex;
    align-items: center;
    font-weight: 600;
}

.ai-advice h4::before, #ai-advice-section h4::before {
    content: '\f075'; /* FontAwesome 聊天圖標 */
    font-family: 'Font Awesome 5 Free';
    margin-right: 10px;
    color: #4285f4;
}

.ai-advice-content {
    font-size: 1rem;
    line-height: 1.6;
    color: #333;
    max-height: none;
    overflow: visible;
    transition: max-height 0.5s ease;
}

.ai-advice-content h5 {
    font-size: 1rem;
    color: #1a73e8;
    margin-top: 20px;
    margin-bottom: 10px;
    font-weight: 600;
}

.ai-advice-content p {
    margin-bottom: 15px;
}

.ai-advice-content strong {
    font-weight: 600;
    color: #202124;
}

.ai-advice-content ul {
    padding-left: 20px;
    margin-bottom: 15px;
}

.ai-advice-content li {
    margin-bottom: 5px;
}

.ai-advice-footer {
    margin-top: 20px;
    padding-top: 10px;
    border-top: 1px solid #e0e0e0;
    display: flex;
    justify-content: flex-end;
}

.ai-advice-time {
    font-size: 0.85rem;
    color: #70757a;
    font-style: italic;
}

/* 手機版適配 */
@media (max-width: 768px) {
    .ai-advice, #ai-advice-section {
        margin: 15px 0;
    }
    
    .ai-advice h4, #ai-advice-section h4 {
        font-size: 1.1rem;
    }
    
    .ai-advice-content {
        padding: 10px;
    }
    
    .ai-advice-content h5 {
        font-size: 1rem;
    }

}

/* 在content-section中的添加按鈕居中顯示 */
.content-section .add-button {
    display: block;
    margin: 10px auto;
    position: relative;
    left: 0;
    right: 0;
}

/* 統一所有模態窗口樣式，確保寬度增加50% */
@media screen and (max-width: 768px) {
    .modal-content {
        width: 75%;
        max-width: 600px; /* 保持一致 */
        padding: 15px;
    }
}

@media screen and (max-width: 480px) {
    .modal-content {
        width: 90%;
        max-width: 380px; /* 保持合理大小 */
        padding: 10px;
    }
}

/* 確保moduleModal的內容也有合適寬度 - 縮小視窗並置中 */
#moduleModal .modal-content {
    width: 45%;
    max-width: 500px;
    text-align: center;
}

/* 確保returnCalcModal的內容也有足夠寬度 */
#returnCalcModal .modal-content {
    max-width: 750px !important; /* 從500px增加50% */
}

/* 更強制地使藍色＋按鈕居中顯示 */
.content-section .add-button,
.add-button[data-type] {
    display: block !important;
    width: 40px !important;
    height: 40px !important;
    margin: 15px auto !important;
    position: relative !important;
    left: 0 !important;
    right: 0 !important;
    float: none !important;
    transform: none !important;
    text-align: center !important;
}

/*特殊樣式最高優先級覆蓋*/
body .version {
    position: absolute !important;
    top: 10px !important;
    right: 120px !important; 
    font-size: 14px;
    cursor: pointer;
    transition: background-color 0.3s ease, transform 0.3s ease;
    font-size: 1rem;
    font-weight: bold;
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
    position: absolute !important;
    top: 10px !important;
    right: 210px !important;
    margin-bottom: 0 !important;
    margin-top: 0 !important;
    z-index: 99 !important;
    display: block !important;
}

/* 強制執行所有藍色＋按鈕的居中顯示，不被其他樣式覆蓋 */
body .content-section .add-button,
body button.add-button[data-type] {
    display: block !important;
    width: 40px !important;
    height: 40px !important;
    margin: 15px auto !important;
    position: relative !important;
    left: 0 !important;
    right: 0 !important;
    float: none !important;
    transform: none !important;
    text-align: center !important;
/* Chart-related styles have been moved to chart.css */
    flex-direction: column;
    min-height: 0;  /* 確保 flex 容器可以正確縮小 */
    margin-bottom: 60px;  /* 為底部導航欄留出空間 */
}

/* 在標題下方添加裝飾線 */

/* 模擬紀錄項目樣式 */
.record-item {
    padding: 10px 12px; /* Adjusted padding to match file items */
    margin-bottom: 8px;
    background: white;
    border-radius: 4px;
    font-size: 0.8rem;
    border: 1px solid var(--border-color);
    transition: all 0.3s ease;
    cursor: pointer;
    /* border-left: 3px solid #42a5f5; */ /* Removed blue left border */
    box-shadow: 0 1px 2px rgba(0,0,0,0.05);
    position: relative;
    width: calc(100% - 10px); /* Added width calculation like file items */
    box-sizing: border-box;
    min-height: 60px; /* Added minimum height for consistency */
}

/* Add delete button style */
.record-delete-btn {
    position: absolute;
    top: 5px;
    right: 5px;
    width: 18px;
    height: 18px;
    background-color: #b6d9fa; /* Changed to much lighter blue */
    color: #6495ED; /* Changed text color to medium blue for better contrast */
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 10px;
    cursor: pointer;
    transition: all 0.2s ease;
    z-index: 10;
    opacity: 0.6; /* Reduced opacity for better subtlety */
    border: 1px solid #e1f0ff; /* Adding a subtle border */
}

.record-delete-btn:hover {
    opacity: 1;
    transform: scale(1.1);
    background-color: #90c3f9; /* Lighter hover color but still visible */
    color: white; /* White text on hover for better contrast */
}

.record-item:hover {
    transform: translateX(5px);
    box-shadow: 0 2px 4px rgba(0,0,0,0.1);
    background-color: #f0f7ff; /* 鼠標懸停時的淺藍色背景 */
    /* border-left-color: var(--gradient-start); */ /* 移除深藍色邊框 */
}

.record-date {
    color: #666;
    font-size: 0.7rem;
}

.record-name {
    color: #2c3e50; /* 記錄名稱顏色 */
    font-weight: bold;
    margin-bottom: 3px;
}

/* 添加模擬記錄狀態樣式 */
.record-status {
    display: inline-block;
    padding: 2px 6px;
    border-radius: 3px;
    font-size: 0.75rem;
}

.status-0 {
    background: #ffd700;  /* 黃色 - 等待處理 */
    color: #000;
}

.status-1 {
    background: #87ceeb;  /* 藍色 - 處理中 */
    color: #000;
}

.status-2 {
    background: #90ee90;  /* 綠色 - 已完成 */
    color: #000;
}

.status-3 {
    background: #ff6347;  /* 紅色 - 錯誤 */
    color: #fff;
}

.tooltip-title {
    font-weight: bold;
    margin-bottom: 8px;
    color: #2874A6; /* 更深的藍色 */
    font-size: 16px;
    border-bottom: 1px solid #BDE0F7; /* 淺藍色底線 */
    padding-bottom: 5px;
    text-align: center; /* 讓tooltip標題居中 */
}
/* 資產查詢相關樣式已移至 asset_query.css */

/* 子容器樣式（基本投資、基本收入等） */
.sub-container {
    background-color: var(--sub-container-bg);  /* 使用新變量 */
    border-radius: 12px;
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.08);
    margin-bottom: 1.5rem;
    padding: 1.2rem;
    transition: all 0.3s ease;
    border: 1px solid var(--border-color);
}

.sub-container:hover {
    box-shadow: 0 6px 12px rgba(0, 0, 0, 0.12);
    transform: translateY(-2px);
}

.sub-container-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 1rem;
    padding-bottom: 0.8rem;
    border-bottom: 1px solid var(--border-color);
}

.sub-container-header h3 {
    font-size: 1.2rem;
    color: var(--primary-text-color);
    margin: 0;
    font-weight: 500;
}

.sub-container-content {
    padding: 0.5rem 0;
}

.sub-container-actions {
    display: flex;
    justify-content: flex-end;
    margin-top: 1rem;
    gap: 10px;
}

.sub-container-item {
    background-color: var(--sub-item-bg);  /* 使用新變量 */
    border-radius: 8px;
    padding: 0.8rem;
    margin-bottom: 0.8rem;
    border: 1px solid var(--border-color-light);
    transition: all 0.2s ease;
}

.sub-container-item:hover {
    background-color: var(--hover-bg-color);
}

.sub-container-item-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 0.5rem;
}

.sub-container-item-header h4 {
    font-size: 1rem;
    margin: 0;
    color: var(--primary-text-color);
}

/* 子容器內的表單樣式 */
.sub-container .form-row {
    display: flex;
    flex-wrap: wrap;
    margin: 0 -10px 10px;
}

.sub-container .form-group {
    flex: 1 1 250px;
    padding: 0 10px;
    margin-bottom: 0.8rem;
}

.sub-container input,
.sub-container select,
.sub-container textarea {
    width: 100%;
    padding: 8px 12px;
    border-radius: 6px;
    border: 1px solid var(--border-color);
    background-color: var(--input-bg-color);
    color: var(--primary-text-color);
    transition: all 0.3s ease;
}

.sub-container input:focus,
.sub-container select:focus,
.sub-container textarea:focus {
    border-color: var(--primary-color);
    box-shadow: 0 0 0 2px rgba(var(--primary-color-rgb), 0.2);
    outline: none;
}

/* 子容器內的按鈕 */
.sub-container-btn {
    display: inline-flex;
    align-items: center;
    padding: 6px 12px;
    border-radius: 6px;
    font-size: 0.9rem;
    cursor: pointer;
    transition: all 0.3s ease;
    border: 1px solid var(--border-color);
    background-color: var(--button-bg-color);
    color: var(--button-text-color);
}

.sub-container-btn.primary {
    background-color: var(--primary-color);
    color: white;
    border-color: var(--primary-color);
}

.sub-container-btn.danger {
    background-color: var(--danger-color);
    color: white;
    border-color: var(--danger-color);
}

.sub-container-btn:hover {
    opacity: 0.9;
    transform: translateY(-1px);
}

.sub-container-btn i {
    margin-right: 6px;
    font-size: 0.9rem;
}

/* 響應式設計 */
@media screen and (max-width: 768px) {
    .sub-container {
        padding: 1rem;
    }
    
    .sub-container-header h3 {
        font-size: 1.1rem;
    }
    
    .sub-container .form-row {
        flex-direction: column;
    }
    
    .sub-container .form-group {
        flex: 1 1 100%;
    }
}

@media screen and (max-width: 480px) {
    .sub-container {
        padding: 0.8rem;
    }
    
    .sub-container-header {
        flex-direction: column;
        align-items: flex-start;
    }
    
    .sub-container-header h3 {
        margin-bottom: 0.5rem;
        font-size: 1rem;
    }
    
    .sub-container-actions {
        flex-direction: column;
    }
    
    .sub-container-btn {
        width: 100%;
        justify-content: center;
        margin-bottom: 0.5rem;
    }
}

/* 新手導引視窗樣式 */
.guide-modal {
    display: none;
    position: fixed;
    z-index: 1000;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, 0.5);
    overflow-y: auto;
}

.guide-video-container {
    position: relative;
    width: 100%;
    padding-bottom: 75%; /* 較高的高度比例 */
    margin-bottom: 30px;
    margin-top: 30px; /* 為標題留空間 */
    overflow: hidden;
    background-color: #000; /* 黑色背景 */
}

.guide-video-container::before {
    content: "操作和基本介紹";
    position: absolute;
    top: -30px;
    left: 0;
    width: 100%;
    text-align: center;
    font-size: 24px;
    font-weight: bold;
    color: #333;
    z-index: 5;
}

.guide-video-container iframe {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    border: none;
    max-width: 80%; /* 兩邊留黑色邊框 */
    left: 10%; /* 水平居中 */
}

.guide-steps::before {
    content: "操作步驟說明";
    display: block;
    width: 100%;
    text-align: center;
    font-size: 24px;
    font-weight: bold;
    color: #333;
    margin-bottom: 20px;
}

.guide-content {
    background-color: #fff;
    margin: 5% auto;
    padding: 20px 40px 40px 40px;
    border-radius: 10px;
    width: 90%;
    max-width: 850px;
    position: relative;
    box-shadow: 0 5px 15px rgba(0,0,0,0.3);
    padding-top: 50px;
}

.close-guide {
    position: absolute;
    right: 15px;
    top: 15px;
    font-size: 28px;
    font-weight: bold;
    color: #aaa;
    cursor: pointer;
    line-height: 1;
    padding: 5px;
    transition: color 0.3s ease, transform 0.3s ease;
    z-index: 10;
    border-radius: 50%;
    width: 40px;
    height: 40px;
    display: flex;
    align-items: center;
    justify-content: center;
}

.close-guide:hover {
    color: #fff;
    background-color: #dc3545;
    transform: scale(1.1);
}

.guide-steps {
    margin-top: 15px;
    padding-top: 10px;
}

.guide-step {
    margin-bottom: 30px;
    padding: 15px;
    border-radius: 8px;
    background-color: #f8f9fa;
    border: 1px solid #e9ecef;
}

.guide-step h3 {
    color: #2c3e50;
    margin-bottom: 10px;
    font-size: 1.2em;
}

.guide-step p {
    color: #666;
    line-height: 1.6;
    margin: 0;
}

/* 隱藏舊的導覽按鈕 */
.guide-navigation,
.prev-step,
.next-step,
.step-indicators,
.step-dot {
    display: none !important;
}

.prev-step,
.next-step {
    padding: 8px 20px;
    background: linear-gradient(45deg, var(--gradient-start), var(--gradient-end));
    color: white;
    border: none;
    border-radius: 4px;
    cursor: pointer;
    font-size: 0.9rem;
    transition: all 0.3s ease;
}

.prev-step:hover,
.next-step:hover {
    transform: translateY(-2px);
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.2);
}

.prev-step:disabled {
    background: #ccc;
    cursor: not-allowed;
    transform: none;
    box-shadow: none;
}

.step-indicators {
    display: flex;
    gap: 8px;
    justify-content: center;
    align-items: center;
}

.step-dot {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background-color: #ddd;
    cursor: pointer;
    transition: all 0.3s ease;
}

.step-dot.active {
    background-color: var(--gradient-start);
    transform: scale(1.2);
}

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

.close-modal {
    position: absolute;
    right: 20px;
    top: 15px;
    font-size: 24px;
    font-weight: bold;
    color: #666;
    cursor: pointer;
    transition: color 0.3s ease;
}

.close-modal:hover {
    color: #333;
}

/* AI評估容器樣式 */
.ai-advice {
    margin: 20px 0;
    font-family: 'Noto Sans TC', sans-serif;
}

/* 確保AI評估內容與其他分析部分風格一致 */
.ai-advice-content {
    margin: 15px 0;
    line-height: 1.6;
    font-family: 'Noto Sans TC', sans-serif;
}

.ai-advice-content p {
    margin-bottom: 10px;
    font-family: 'Noto Sans TC', sans-serif;
}

.ai-advice-footer {
    font-size: 0.85em;
    color: #888;
    text-align: right;
    margin-top: 15px;
    font-family: 'Noto Sans TC', sans-serif;
}

/* Toast notification styles */
.toast {
    position: fixed;
    bottom: 20px;
    right: 20px;
    padding: 10px 20px;
    border-radius: 4px;
    color: white;
    font-size: 14px;
    z-index: 9999;
    opacity: 0;
    transform: translateY(20px);
    transition: opacity 0.3s, transform 0.3s;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
}

.toast.show {
    opacity: 1;
    transform: translateY(0);
}

.toast-info {
    background-color: #2196F3;
}

.toast-success {
    background-color: #4CAF50;
}

.toast-error, .error-toast {
    background-color: #F44336;
}

.toast-warning {
    background-color: #FF9800;
}

/* 移動自 main_simulation.html 的 CSS 樣式開始 */

/* 標題全部居中 */
.finance-section h2,
.card-header h3,
.mode-header h4 {
    text-align: center;
}

/* 禁用狀態樣式 */
.disabled-section {
    opacity: 0.7;
    pointer-events: none;
}

/* 會員權限提示樣式 */
.premium-notice {
    display: flex;
    align-items: center;
    background-color: #f8f9fa;
    border: 1px solid #e9ecef;
    border-radius: 4px;
    padding: 10px;
    margin-top: 15px;
    color: #6c757d;
}

.premium-notice i {
    margin-right: 10px;
    color: #ffc107;
}

/* 確保內容不被藍色條擋住 */
body {
    margin-top: 0; /* 移除 margin-top，讓藍色條固定在最上方 */
}

/* 已存在於CSS中的 .gradient-header 選擇器，只添加尚未定義的屬性 */
.gradient-header {
    position: fixed;
    top: 0;
    width: 100%;
    z-index: 1000; /* 確保藍色條在最上層 */
}

/* 展開按鈕樣式 */
.expand-records-btn {
    display: block;
    width: 100%;
    padding: 8px;
    margin: 5px 0;
    background-color: #f8f9fa;
    border: 1px solid #dee2e6;
    border-radius: 4px;
    text-align: center;
    font-size: 14px;
    color: #888;
}

/* 隱藏基礎單位欄位 - 使用直接的選擇器 */
#base-unit {
    display: none !important;
}

/* 隱藏基礎單位的標籤和tooltip */
label[for="base-unit"], 
label[for="base-unit"] + .tooltip-content,
label[for="base-unit"] ~ .tooltip-content {
    display: none !important;
}

/* 隱藏整個基礎單位的容器 */
.form-group:has(#base-unit) {
    display: none !important;
}

/* membership-level 已存在於CSS中，將關鍵屬性設定添加到已有樣式 */
/* .membership-level {
    position: absolute;
    top: 6px;
    right: 130px;
    background-color: rgba(255, 255, 255, 0.8);
    padding: 5px 10px;
    border-radius: 4px;
    font-size: 14px;
    color: #333;
    z-index: 900;
} */

/* 添加 AI 額度獨立樣式控制，固定位置 */
/* .ai-quota {
    position: absolute;
    top: 6px;
    right: 90px;
    background-color: rgba(255, 255, 255, 0.8);
    padding: 5px 10px;
    border-radius: 4px;
    font-size: 14px;
    color: #333;
    z-index: 900;
} */

.version {
    position: absolute;
    top: 6px;
    right: 10px;
    background-color: rgba(255, 255, 255, 0.8);
    padding: 5px 10px;
    border-radius: 4px;
    font-size: 14px;
    color: #333;
}

/* AI 開關切換按鈕樣式 */
.ai-toggle-container {
    display: flex;
    align-items: center;
    margin-left: 0;
}

.switch {
    position: relative;
    display: inline-block;
    width: 46px;
    height: 24px;
    flex-shrink: 0;
}

.switch input {
    opacity: 0;
    width: 0;
    height: 0;
}

.slider {
    position: absolute;
    cursor: pointer;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background-color: #ccc;
    transition: .4s;
}

.slider:before {
    position: absolute;
    content: "";
    height: 16px;
    width: 16px;
    left: 4px;
    bottom: 4px;
    background-color: white;
    transition: .4s;
}

input:checked + .slider {
    background-color: #2196F3;
}

input:focus + .slider {
    box-shadow: 0 0 1px #2196F3;
}

input:checked + .slider:before {
    transform: translateX(26px);
}

.slider.round {
    border-radius: 24px;
}

.slider.round:before {
    border-radius: 50%;
}

.toggle-label {
    margin-left: 10px;
    font-size: 14px;
    white-space: normal; /* 允許換行 */
}

/* 檔案設定區塊舊 flex 版面與間距移除：改由通用網格與欄位節奏處理 */

/* 標準按鈕樣式 */
.standard-button {
    padding: 8px 15px;
    background-color: #2196F3;
    color: white;
    border: none;
    border-radius: 4px;
    cursor: pointer;
    font-size: 14px;
    transition: background-color 0.3s;
    display: flex;
    align-items: center;
    justify-content: center;
}

.standard-button:hover {
    background-color: #0b7dda;
}

.standard-button i {
    margin-right: 5px;
}

/* 複選框樣式 */
.standard-checkbox {
    position: absolute;
    opacity: 0;
    cursor: pointer;
    height: 0;
    width: 0;
}

.checkbox-label {
    position: relative;
    padding-left: 28px;
    cursor: pointer;
    font-size: 14px;
    line-height: 24px;
    display: inline-block;
}

.checkbox-label:before {
    content: '';
    position: absolute;
    left: 0;
    top: 0;
    width: 20px;
    height: 20px;
    border: 1px solid #ccc;
    background-color: #fff;
    border-radius: 3px;
}

.standard-checkbox:checked + .checkbox-label:before {
    background-color: #2196F3;
    border-color: #2196F3;
}

.standard-checkbox:checked + .checkbox-label:after {
    content: '';
    position: absolute;
    left: 7px;
    top: 3px;
    width: 6px;
    height: 12px;
    border: solid white;
    border-width: 0 2px 2px 0;
    transform: rotate(45deg);
}

/* 旧版 full-width 規則保留（被通用網格覆蓋時不影響） */

/* AI設定相關樣式補充 */
#advanced-params-card {
    margin-bottom: 20px;
}

/* 移動自 main_simulation.html 的 CSS 樣式結束 */

/* 移動自 main_simulation.html 的 CSS 樣式補充 */

/* 調整子容器樣式 */
.content-card, .module-container, .item-container, .analysis-mode-section {
    background-color: #f8fafc;
    border-radius: 6px;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.05);
    padding: 10px;
    margin-bottom: 15px;
    width: 100%;
    box-sizing: border-box;
}

/* 確保欄位名稱不被縮短 */
.module-container .field-name,
.item-container .field-name {
    white-space: normal;       /* 允許換行 */
    overflow: visible;
    text-overflow: clip;
    overflow-wrap: anywhere;
    word-break: break-word;
}

/* 增加容器頂部間距，避免按鈕重疊 */
.finance-sections {
    margin-top: 55px; /* 增加更多間距，避免與頂部按鈕重疊 */
    padding-top: 15px;
    overflow: visible; /* 確保內容不會被裁剪 */
    width: 100%; /* 確保寬度正確 */
    box-sizing: border-box; /* 確保內邊距不增加總寬度 */
}

/* 確保側邊欄顯示正確 */
.sidebar {
    z-index: 90; /* 比按鈕低，但比一般內容高 */
}

/* 卡片標題容器水平排列 - 補充 */
.card-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
}

/* 更新完整的 #ai-settings-card 樣式 */
#ai-settings-card {
    width: 100%;
    box-sizing: border-box;
    padding: 1rem;
    border-radius: 8px;
    background-color: var(--content-card-bg);
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
    margin-bottom: 20px;
    transition: all 0.3s ease;
}

#ai-settings-card .card-header {
    border-bottom: 1px solid #eee;
    margin-bottom: 15px;
    padding-bottom: 10px;
}

#ai-settings-card .card-content {
    display: flex;
    flex-direction: column;
    gap: 15px;
}

/* 補充textarea樣式，確保設定相同 */
.textarea-container {
    position: relative;
    width: 100%;
}

.standard-textarea {
    width: 100%;
    padding: 10px;
    border: 1px solid #ddd;
    border-radius: 4px;
    resize: none;
    font-family: inherit;
    font-size: 14px;
}

.char-counter {
    position: absolute;
    right: 10px;
    bottom: 10px;
    font-size: 12px;
    color: #666;
}

/* 移動自 main_simulation.html 的 CSS 樣式補充結束 */

.form-group.full-width { width: 100%; }

/* --- i18n: 防止英文標籤過長導致排版跑掉（桌機） --- */
.form-group label {
    min-width: 150px; /* 保留最小寬度，但允許換行 */
    white-space: normal;       /* 允許多行顯示 */
    overflow-wrap: anywhere;
    word-break: break-word;
}

/* 旧版問號絕對定位移除，改由通用規則微調（與標籤文字同列） */

/* 手機/窄螢幕下恢復自動換行，維持原本一行一欄版型 */
@media (max-width: 768px) {
    .form-group label {
        min-width: 0;
        white-space: normal;
        display: block;        /* 窄螢幕下回到區塊排列，避免上下不對齊 */
        margin-bottom: 4px;
        height: auto;          /* 手機上允許多行 */
        padding-right: 0;      /* 手機不保留空間 */
    }
    .form-group label > span:not(.help-popup-btn-inline) {
        overflow: visible;
        text-overflow: clip;
        white-space: normal;
    }
    .form-group label .help-popup-btn-inline {
        position: static;      /* 手機讓問號跟隨文字 */
        transform: none;
        margin-left: 6px;
        vertical-align: middle;
    }
}

/* 調整檔案設定切換按鈕和標籤樣式 */
.ai-toggle-container {
    display: flex;
    align-items: center;
    margin-top: 5px;
}

.toggle-label {
    margin-right: 10px;
    font-size: 14px;
    color: var(--primary-text-color);
    font-weight: 500;
}

/* 修正切換開關太寬的問題 */
.switch {
    position: relative;
    display: inline-block;
    width: 48px;
    height: 24px;
    margin-right: 8px;
}

.switch input {
    opacity: 0;
    width: 0;
    height: 0;
}

.slider {
    position: absolute;
    cursor: pointer;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background-color: #ccc;
    transition: .4s;
}

.slider:before {
    position: absolute;
    content: "";
    height: 18px;
    width: 18px;
    left: 3px;
    bottom: 3px;
    background-color: white;
    transition: .4s;
}

input:checked + .slider {
    background-color: var(--primary-color);
}

input:focus + .slider {
    box-shadow: 0 0 1px var(--primary-color);
}

input:checked + .slider:before {
    transform: translateX(24px);
}

.slider.round {
    border-radius: 24px;
}

.slider.round:before {
    border-radius: 50%;
}

/* 檔案名稱行特殊樣式 */
.file-name-row {
    width: 100%;
    display: flex;
    flex-direction: row;
    margin-bottom: 15px;
}

/* 旧版 file-name-row flex 規則移除，改由通用網格的跨欄規則處理 */

/* 切換開關容器樣式 */
.toggle-switch-container {
    display: flex;
    align-items: center;
}

/* 創建全新的、完全獨立的檔案設定切換按鈕樣式 - 不受任何其他樣式影響 */
.file-settings-toggle-row {
    display: flex;
    justify-content: flex-start;
    flex-wrap: wrap; /* 允許換行 */
    gap: 20px; /* 統一使用gap控制間距 */
    margin-top: 10px;
    margin-bottom: 10px;
    width: 100%;
    box-sizing: border-box;
    padding: 5px 0;
}

.file-settings-toggle-group {
    display: flex;
    align-items: center;
    flex-shrink: 0;
    min-width: 120px; /* 設定最小寬度確保按鈕組不會太擠 */
    position: relative;
    z-index: 5; /* 確保按鈕在上層 */
    margin-bottom: 8px; /* 換行時的垂直間距 */
}

/* 響應式佈局 - 中等屏幕 */
@media (max-width: 1024px) and (min-width: 769px) {
    .file-settings-toggle-row {
        gap: 15px;
    }
    
    .file-settings-toggle-group {
        min-width: 110px;
    }
    
    .file-settings-toggle-label {
        font-size: 13px;
        min-width: 60px;
    }
}

/* 響應式佈局 - 小屏幕 */
@media (max-width: 768px) {
    .file-settings-toggle-row {
        flex-direction: column;
        gap: 12px;
        align-items: flex-start;
    }
    
    .file-settings-toggle-group {
        min-width: auto;
        width: 100%;
        justify-content: space-between;
        padding: 8px 12px;
        background: rgba(240, 240, 240, 0.5);
        border-radius: 8px;
        margin-bottom: 4px;
    }
    
    .file-settings-toggle-label {
        font-size: 14px;
        min-width: auto;
        flex: 1;
    }
}

/* 響應式佈局 - 超小屏幕 */
@media (max-width: 480px) {
    .file-settings-toggle-group {
        padding: 10px 8px;
    }
    
    .file-settings-toggle-label {
        font-size: 13px;
    }
    
    .file-settings-switch {
        width: 50px;
    }
    
    .file-settings-switch input:checked + .file-settings-slider:before {
        transform: translateX(26px);
    }
}

.file-settings-toggle-label {
    min-width: 65px;
    margin-right: 12px;
    font-weight: 500;
    font-size: 14px;
    white-space: nowrap;
    color: #333;
}

.file-settings-switch {
    position: relative;
    display: inline-block;
    width: 60px; /* Increased from 52px to 60px to make the button wider */
    height: 24px;
    flex-shrink: 0;
    margin: 0;
    box-sizing: content-box; /* 確保尺寸不受padding影響 */
    vertical-align: middle;
}

.file-settings-switch input {
    opacity: 0;
    width: 0;
    height: 0;
    margin: 0;
    padding: 0;
}

.file-settings-slider {
    position: absolute;
    cursor: pointer;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background-color: #ccc;
    transition: .4s;
    border-radius: 24px;
    box-sizing: border-box;
}

.file-settings-slider:before {
    position: absolute;
    content: "";
    height: 16px;
    width: 16px;
    left: 4px;
    bottom: 4px;
    background-color: white;
    transition: .4s;
    border-radius: 50%;
    box-sizing: border-box;
}

.file-settings-switch input:checked + .file-settings-slider {
    background-color: #2196F3;
}

.file-settings-switch input:checked + .file-settings-slider:before {
    transform: translateX(36px); /* Adjusted from 32px to 36px to match the wider button */
}

/* 模擬紀錄資訊佈局 */
.record-info {
    display: flex;
    flex-direction: column;
    width: 100%;
    padding-right: 20px; /* 防止與刪除按鈕重疊 */
}

/* 模擬紀錄底部信息行 */
.record-item-footer {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    width: 100%;
    margin-top: 4px;
}

.record-date {
    color: #666;
    font-size: 0.7rem;
    margin-bottom: 4px;
}

.record-name {
    font-weight: 500;
    color: #333;
    margin-bottom: 8px;
    position: relative;
    width: 100%;
    max-width: 100%;
    padding-right: 15px;
    white-space: normal;
    overflow: hidden;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    word-break: break-word;
}

@media screen and (max-width: 768px) {
    .guide-content {
        width: 90%;
        padding: 15px;
    }
    
    .guide-video-container {
        margin-bottom: 15px;
    }
}

@media screen and (max-width: 480px) {
    .guide-content {
        width: 95%;
        padding: 10px;
    }
    
    .guide-video-container {
        margin-bottom: 10px;
    }
}

/* 確保moduleModal的內容也有足夠寬度 - 縮小視窗並置中 */
#moduleModal .modal-content {
    width: 45%;
    max-width: 500px;
    text-align: center;
}

/* 擴大模組選擇器彈出窗口的寬度，並確保自適應變化 - 縮小視窗並置中 */
#moduleModal .modal-content {
    width: 45%;
    max-width: 500px;
    margin: 3% auto;
    overflow-y: auto;
    max-height: 90vh;
    text-align: center;
}

/* 確保模組選擇器在不同設備上都能適當顯示 - 縮小視窗並置中 */
@media screen and (max-width: 992px) {
    #moduleModal .modal-content {
        width: 280px;
        max-width: 300px;
        text-align: center;
    }
}

@media screen and (max-width: 768px) {
    #moduleModal .modal-content {
        width: 260px;
        max-width: 280px;
        padding: 1.2rem;
        text-align: center;
    }
    
    .module-card {
        width: 180px;
    }
}

@media screen and (max-width: 480px) {
    #moduleModal .modal-content {
        width: 240px;
        max-width: 260px;
        padding: 1rem;
        text-align: center;
    }
    
    .module-card {
        width: 160px;
        padding: 6px 8px;
    }
    
    .module-card h4 {
        font-size: 0.8rem;
    }
}

/* 禁用狀態樣式 */
.disabled-section {
    opacity: 0.7;
    pointer-events: none;
}

/* 禁用模組樣式 */
.disabled-module {
    opacity: 0.7;
    position: relative;
    cursor: not-allowed !important;
    background-color: rgba(249, 249, 249, 0.8) !important;
    border: 1px solid #e0e0e0 !important;
}

.disabled-module h4 {
    color: #888 !important;
}

.disabled-module:hover {
    transform: none !important;
    box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1) !important;
}

.disabled-module .lock-icon {
    position: absolute;
    top: 10px;
    right: 10px;
    color: #ffc107;
    font-size: 16px;
}

/* 會員權限提示樣式 */
.premium-notice {
    display: flex;
    align-items: center;
    background-color: #f8f9fa;
    border: 1px solid #e9ecef;
    border-radius: 4px;
    padding: 10px;
    margin-top: 15px;
    color: #6c757d;
}

.premium-notice i {
    margin-right: 10px;
    color: #ffc107;
}

/* 添加或修改 index.html 的影片容器樣式 */
.video-container {
    position: relative !important;
    overflow: hidden !important;
    width: 100% !important;
    height: 60vh !important;
    margin-top: 0 !important;
}

.video-bg {
    position: absolute !important;
    top: 50% !important;
    left: 50% !important;
    transform: translate(-50%, -50%) !important;
    width: 100vw !important; /* 設置為視窗寬度 */
    height: 56.25vw !important; /* 保持 16:9 的比例 (9/16 = 0.5625) */
    min-height: 100% !important;
    min-width: 177.77vh !important; /* 保持 16:9 的比例 (16/9 = 1.7777) */
}

.video-bg iframe {
    position: absolute !important;
    top: 0 !important;
    left: 0 !important;
    width: 100% !important;
    height: 100% !important;
}

/* 【新增】圖表控制區域容器 */
.chart-controls-area {
    margin: 10px 0 5px 0;
    display: flex;
    justify-content: flex-start;
    position: relative;
}

/* 【新增】圖表切換按鈕容器 */
.chart-toggle-container {
    display: flex;
    align-items: center;
    gap: 8px; /* 切換按鈕和說明按鈕之間的間距 */
    margin-left: 10px; /* 靠左一點，避免和放大按鈕重疊 */
}

/* 【新增】圖表切換按鈕樣式 */
.chart-toggle-btn {
    background-color: #e3f2fd; /* 更淡的藍色背景 */
    color: #1976d2; /* 柔和的藍色文字 */
    border: 1px solid #bbdefb; /* 極淡的藍色邊框 */
    border-radius: 5px;
    padding: 6px 12px;
    font-size: 0.85em;
    cursor: pointer;
    transition: all 0.3s ease;
    box-shadow: 0 1px 2px rgba(0, 0, 0, 0.05); /* 更輕的陰影 */
    z-index: 5;
    white-space: normal; /* 允許換行 */
    min-width: 70px;
    height: 32px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: 500;
}

.chart-toggle-btn:hover {
    background-color: #bbdefb; /* 懸停時稍微深一點但仍然很淡 */
    color: #1565c0; /* 稍深的藍色文字 */
    border-color: #90caf9;
    transform: scale(1.01); /* 更小的縮放效果 */
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.08); /* 更輕的陰影 */
}

.chart-toggle-btn:active {
    transform: scale(0.95);
}

/* 響應式設計 - 小螢幕調整 */
@media screen and (max-width: 768px) {
    .chart-controls-area {
        justify-content: center;
        margin: 10px 0;
    }
    
    .chart-toggle-container {
        margin-left: 0;
    }
}

@media screen and (max-width: 480px) {
    .chart-toggle-btn {
        padding: 5px 10px;
        font-size: 0.8em;
        min-width: 60px;
        height: 28px;
    }
}

/* 確保主要圖表顯示正確 */
#area-chart-container .chart-canvas-container,
#median-group-chart-container .chart-canvas-container,
#mdd-chart-container .chart-canvas-container {
    background-color: #f8fafc !important;
    border-radius: 6px !important;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1) !important;
    padding: 8px !important;
    width: 100% !important;
    height: 800px !important; /* Increased from 560px */
    margin: 0 !important;
    position: relative !important;
}

/* 確保圖表在容器內正確顯示 */
#areaChart, #medianGroupChart, #mddHistogram {
    width: 100% !important;
    height: 100% !important;
    max-height: 800px !important; /* Increased from 560px */
}

/* 修改主要圖表容器樣式，確保垂直堆疊 */
.charts-container {
    padding: 0 !important;
    margin: 0 0 12px 0 !important;
    width: 100% !important;
    display: flex !important;
    flex-direction: column !important; /* 垂直堆疊 */
    gap: 15px !important; /* 增加垂直間距 */
    background-color: white !important;
    border-radius: 8px !important;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1) !important;
    padding: 8px !important;
}

/* 修改各圖表項目樣式確保垂直堆疊 */
.chart-item, 
#area-chart-container, 
#median-group-chart-container, 
#mdd-chart-container {
    flex: 1 1 100% !important; /* 佔據全寬 */
    width: 100% !important;
    min-width: 100% !important;
    margin: 0 0 15px 0 !important; /* 底部間距 */
    padding: 0 !important;
    background: transparent !important;
    box-shadow: none !important;
    position: relative !important;
}

/* 確保圖表標題顯示正確 */
#area-chart-container h4, 
#median-group-chart-container h4, 
#mdd-chart-container h4 {
    text-align: center !important;
    font-size: 1.2em !important;
    margin-bottom: 10px !important;
    padding: 0 !important;
}

/* 會員訂閱提示樣式 */
.premium-feature-notice {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(255, 255, 255, 0.8);
    z-index: 10;
    display: flex;
    justify-content: center;
    align-items: center;
    border-radius: 8px;
    backdrop-filter: blur(2px);
}

.premium-notice-content {
    text-align: center;
    padding: 20px;
    background-color: white;
    border-radius: 8px;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
    max-width: 80%;
}

.premium-notice-content i {
    color: #ffc107;
    font-size: 32px;
    margin-bottom: 15px;
}

.premium-notice-content p {
    margin-bottom: 15px;
    font-size: 16px;
    line-height: 1.5;
    color: #333;
}

.upgrade-button {
    display: inline-block;
    padding: 8px 16px;
    background-color: #4285f4;
    color: white;
    border-radius: 4px;
    text-decoration: none;
    font-weight: 500;
    transition: all 0.3s ease;
}

.upgrade-button:hover {
    background-color: #2a75f3;
    transform: translateY(-2px);
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
}

/* 確保相對定位的容器能正確顯示絕對定位的元素 */
.content-card {
    position: relative;
}

/* 增加對應的禁用樣式 */
.disabled-section {
    opacity: 0.7;
    pointer-events: none;
}

.disabled-section input,
.disabled-section select,
.disabled-section textarea {
    background-color: #f5f5f5 !important;
    cursor: not-allowed !important;
}

/* 會員標籤樣式 */
.premium-tag {
    display: inline-flex;
    align-items: center;
    background-color: #f5f5f5;
    border: 1px solid #e0e0e0;
    border-radius: 4px;
    padding: 3px 8px;
    margin-left: 10px;
    font-size: 12px;
    color: #757575;
}

.premium-tag i {
    color: #ffc107;
    margin-right: 5px;
    font-size: 11px;
}

/* 修改禁用樣式，保持可見但無法交互 */
.disabled-section {
    opacity: 0.6;
    pointer-events: none;
}

.disabled-section input,
.disabled-section select,
.disabled-section textarea {
    background-color: #f5f5f5 !important;
    cursor: not-allowed !important;
}

/* 移除不需要的覆蓋樣式 */
.premium-feature-notice {
    display: none;
}

/* 在大螢幕尺寸時隱藏側邊欄切換按鈕 */
@media screen and (min-width: 992px) {
    .sidebar-toggle {
        display: none !important; /* 在大螢幕尺寸時完全隱藏側邊欄切換按鈕 */
    }
}

/* 鎖定icon樣式 - 強制覆蓋所有樣式 */
.lock-icon {
    position: absolute !important;
    top: 10px !important;
    right: 10px !important;
    color: #e74c3c !important;
    font-size: 16px !important;
    z-index: 10 !important;
    pointer-events: none !important;
    display: block !important;
    visibility: visible !important;
    opacity: 1 !important;
}

/* 禁用的模組卡片樣式 - 強制覆蓋所有樣式 */
.module-card.disabled-module,
.module-card[onclick*="此模組僅限等級2及以上會員使用"] {
    cursor: not-allowed !important;
    opacity: 0.7 !important;
    background-color: rgba(249, 249, 249, 0.8) !important;
    color: #999 !important;
    position: relative !important;
    border: 1px solid #e0e0e0 !important;
}

.module-card.disabled-module:hover,
.module-card[onclick*="此模組僅限等級2及以上會員使用"]:hover {
    transform: none !important;
    box-shadow: none !important;
    background-color: rgba(249, 249, 249, 0.8) !important;
    border-color: #e0e0e0 !important;
}

.module-card.disabled-module h4,
.module-card[onclick*="此模組僅限等級2及以上會員使用"] h4 {
    color: #999 !important;
}

/* 確保鎖定模組的所有子元素都顯示為禁用狀態 */
.module-card[onclick*="此模組僅限等級2及以上會員使用"] * {
    color: #999 !important;
}

/* 確保模組選擇器的基本樣式 */
.module-card {
    position: relative;
    background: white;
    padding: 8px 12px;
    margin: 0 auto 6px auto;
    border-radius: 6px;
    cursor: pointer;
    transition: all 0.3s ease;
    border: 1px solid #eee;
    width: 200px;
    box-sizing: border-box;
    text-align: center;
}

.module-card:hover {
    transform: translateY(-2px);
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
}

.module-card h4 {
    margin: 0;
    text-align: center;
    font-size: 0.9rem;
    color: #2c3e50;
}

/* 確保模組選擇器modal的樣式 */
#moduleModal .modal-content {
    position: relative;
    background-color: white;
    margin: 5% auto;
    padding: 1.5rem;
    width: 280px;
    max-width: 320px;
    border-radius: 12px;
    box-shadow: 0 8px 30px rgba(0, 0, 0, 0.15);
    max-height: 85vh;
    overflow-y: auto;
    text-align: center;
}

#moduleModal .modal-content h2 {
    font-size: 1.2rem;
    margin-bottom: 1rem;
    color: #2c3e50;
}

#moduleModal .module-permission-notice {
    background-color: #e8f4f8;
    border: 1px solid #b8daff;
    border-radius: 4px;
    padding: 8px;
    margin-bottom: 1rem;
    font-size: 0.8rem;
    color: #004085;
    text-align: left;
}

#moduleModal .module-permission-notice i {
    margin-right: 4px;
    color: #0066cc;
}

#moduleModal .module-grid {
    display: flex;
    flex-direction: column;
    gap: 1rem;
    text-align: center;
    align-items: center;
}

/* 快速跳轉按鈕樣式 - 在所有設備上顯示 */
.quick-nav-container {
    position: fixed;
    top: 140px; /* 再往下移動30px，總共往下80px */
    right: 10px; /* 更靠右 */
    z-index: 400; /* 降低層級，確保不覆蓋側邊欄 (990) 和其他重要UI元素 */
    display: flex; /* 改為預設顯示 */
    flex-direction: column;
    align-items: flex-end; /* 右對齊 */
    gap: 8px; /* 增加間距 */
    transition: all 0.3s ease;
    /* 修正：確保按鈕只在實際按鈕區域響應點擊，不阻擋其他元素 */
    pointer-events: none;
}

/* 修正：只有按鈕本身響應點擊事件 */
.quick-nav-container .quick-nav-btn,
.quick-nav-container .quick-nav-toggle {
    pointer-events: auto;
}

/* 快速跳轉按鈕列表容器 - 改為二排布局 */
.quick-nav-list {
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    width: 260px; /* 增大容器寬度以容納更大按鈕 */
    gap: 6px; /* 增加間距 */
    overflow: hidden;
    transition: all 0.3s ease;
    transform-origin: top right;
}

/* 收縮狀態 */
.quick-nav-list.collapsed {
    max-height: 0;
    opacity: 0;
    transform: scaleY(0);
    margin-top: 0;
}

/* 展開狀態 */
.quick-nav-list.expanded {
    max-height: 500px; /* 增加高度適應更大按鈕 */
    opacity: 1;
    transform: scaleY(1);
    margin-top: 6px; /* 增加間距 */
    /* 修正：展開時確保列表區域響應點擊事件 */
    pointer-events: auto;
}

/* 主展開按鈕樣式 */
.quick-nav-toggle {
    position: relative;
}

.quick-nav-toggle i {
    transition: transform 0.3s ease;
}

/* 展開時主按鈕圖標旋轉 - 只有懸停在導航按鈕時才旋轉 */
.quick-nav-container.expanded .quick-nav-toggle i,
.quick-nav-toggle:hover i {
    transform: rotate(90deg);
}

/* 滑鼠懸停自動展開 - 只有懸停在導航按鈕或下拉列表時才觸發 */
.quick-nav-toggle:hover ~ .quick-nav-list,
.quick-nav-list:hover {
    max-height: 500px !important;
    opacity: 1 !important;
    transform: scaleY(1) !important;
    margin-top: 6px !important;
}

/* 防止懸停時意外收縮 */
.quick-nav-toggle:hover ~ .quick-nav-list.collapsed,
.quick-nav-list:hover.collapsed {
    max-height: 500px !important;
    opacity: 1 !important;
    transform: scaleY(1) !important;
    margin-top: 6px !important;
}

/* 確保幫助按鈕獨立，不觸發導航下拉 */
.help-toggle-standalone {
    position: relative;
    z-index: 400; /* 與導航容器保持相同層級 */
}

/* 當懸停在幫助按鈕時，不展開導航下拉 */
.help-toggle-standalone:hover ~ .quick-nav-list {
    max-height: 0 !important;
    opacity: 0 !important;
    transform: scaleY(0) !important;
    margin-top: 0 !important;
}

.quick-nav-btn {
    background-color: rgba(255, 255, 255, 0.15); /* 很淡的白色背景 */
    border: 1px solid rgba(200, 200, 200, 0.3); /* 很淡的邊框 */
    border-radius: 10px; /* 更大的圓角 */
    padding: 10px 12px; /* 增大內邊距 */
    display: flex;
    align-items: center;
    gap: 6px; /* 增加間距 */
    cursor: pointer;
    transition: all 0.3s ease;
    backdrop-filter: blur(10px); /* 毛玻璃效果 */
    color: rgba(100, 100, 100, 0.8); /* 很淡的文字顏色 */
    font-size: 16px; /* 再次增大字體大小 從14px到16px */
    font-weight: 500; /* 增加字重 */
    width: 125px; /* 增大固定寬度 */
    min-width: 125px; 
    text-align: center;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.05); /* 很淡的陰影 */
}

.quick-nav-btn:hover {
    background-color: rgba(66, 165, 245, 0.3); /* 懸停時藍色背景 */
    border-color: rgba(66, 165, 245, 0.6); /* 懸停時藍色邊框 */
    color: rgba(66, 165, 245, 1); /* 懸停時藍色文字 */
    /* 移除移動效果，只保留變色 */
    box-shadow: 0 4px 12px rgba(66, 165, 245, 0.15); /* 懸停時淡藍色陰影 */
}

.quick-nav-btn i {
    font-size: 16px; /* 再次增大圖標大小 從14px到16px */
    opacity: 0.7;
}

.quick-nav-btn:hover i {
    opacity: 1;
}

.quick-nav-btn span {
    font-size: 15px; /* 再次增大文字大小 從13px到15px */
    white-space: normal; /* 允許換行 */
}

/* 手機版快速導航位置調整 - 保持原本按鈕尺寸 */
@media (max-width: 767px) {
    .quick-nav-container {
        top: 130px; /* 手機上再往下移動，避免與瀏覽器UI衝突 */
        right: 8px; /* 稍微往左移 */
        z-index: 400; /* 降低層級，避免覆蓋側邊欄 (990) 和其他重要UI元素 */
        /* 修正：確保按鈕只在實際按鈕區域響應點擊，不阻擋其他元素 */
        pointer-events: none;
    }
    
    /* 修正：手機版只有按鈕本身響應點擊事件 */
    .quick-nav-container .quick-nav-btn,
    .quick-nav-container .quick-nav-toggle {
        pointer-events: auto;
    }
    
    /* 手機版大幅縮小導航列表寬度 */
    .quick-nav-list {
        width: 100px !important; /* 大幅縮小寬度，避免覆蓋其他UI元素 */
        right: 0; /* 確保右對齊 */
    }
    
    /* 手機版隱藏按鈕文字 */
    .quick-nav-btn span {
        display: none !important;
    }
    
    /* 手機版調整所有導航按鈕寬度 */
    .quick-nav-btn {
        width: 40px !important; /* 統一縮小所有按鈕 */
        min-width: 40px !important;
        padding: 8px !important; /* 調整內邊距為方形 */
        justify-content: center !important; /* 圖標居中 */
    }
    
    /* 手機版隱藏按鈕文字，只顯示圖標 */
    #helpToggleText {
        display: none;
    }
    
    .quick-nav-toggle span {
        display: none;
    }
    
    /* 手機版調整按鈕寬度，只針對主要的兩個按鈕（顯示說明和導航） */
    #help-toggle-btn,
    #quick-nav-toggle {
        width: 45px; /* 縮小為只容納圖標的寬度 */
        min-width: 45px;
        padding: 8px; /* 調整內邊距為方形 */
        justify-content: center; /* 圖標居中 */
    }
    
    /* 禁用手機版的懸停展開功能，避免意外觸發 */
    .quick-nav-toggle:hover ~ .quick-nav-list,
    .quick-nav-list:hover {
        max-height: 0 !important;
        opacity: 0 !important;
        transform: scaleY(0) !important;
        margin-top: 0 !important;
    }
    
    /* 手機版只能通過點擊展開 */
    .quick-nav-list.expanded {
        max-height: 400px !important; /* 適應較小的按鈕高度 */
        opacity: 1 !important;
        transform: scaleY(1) !important;
        margin-top: 6px !important;
        /* 修正：手機版展開時確保列表區域響應點擊事件 */
        pointer-events: auto !important;
    }
    
    /* 手機版優化點擊區域，確保不會意外觸發其他元素 */
    /* 移除這個樣式，因為我們已經在容器層級設置了 pointer-events: none */
    /* .quick-nav-container * {
        pointer-events: auto;
    } */
    
    /* 手機版確保展開區域不會影響其他元素的點擊 */
    .quick-nav-list.collapsed {
        pointer-events: none !important; /* 收縮時完全禁用點擊 */
    }
    
    .quick-nav-list.expanded {
        pointer-events: auto !important; /* 展開時啟用點擊 */
    }
}

/* 在更大的螢幕上調整位置和大小 */
@media (min-width: 1200px) {
    .quick-nav-container {
        right: 15px; /* 更靠右 */
        top: 145px; /* 再往下移動與基本設定一致 */
        gap: 10px; /* 增加間距 */
    }
    
    .quick-nav-list {
        width: 280px; /* 在大螢幕上進一步增加寬度 */
    }
    
    .quick-nav-btn {
        padding: 12px 14px; /* 進一步增大按鈕大小 */
        width: 135px; /* 增大寬度 */
        min-width: 135px; 
        font-size: 17px; /* 增大字體 */
    }
    
    .quick-nav-btn span {
        font-size: 16px; /* 增大文字 */
    }
    
    .quick-nav-btn i {
        font-size: 18px; /* 增大圖標 */
    }
}

/* 在超大螢幕上進一步調整 */
@media (min-width: 1600px) {
    .quick-nav-container {
        right: 20px; /* 適度靠右 */
        top: 150px; /* 再往下移動與基本設定一致 */
        gap: 12px; /* 進一步增加間距 */
    }
    
    .quick-nav-list {
        width: 300px; /* 在超大螢幕上進一步增加寬度 */
    }
    
    .quick-nav-btn {
        padding: 14px 16px; /* 進一步增大按鈕 */
        width: 145px; /* 增大寬度 */
        min-width: 145px; 
        font-size: 18px; /* 增大字體 */
    }
    
    .quick-nav-btn span {
        font-size: 17px; /* 增大文字 */
    }
    
    .quick-nav-btn i {
        font-size: 20px; /* 增大圖標 */
    }
}

/* 分析結果樣式 */
.analysis-results {
    padding: 20px;
    width: 100%;
    box-sizing: border-box;
    font-family: '微軟正黑體', sans-serif;
}

.analysis-results h3 {
    color: var(--gradient-start);
    border-bottom: 2px solid var(--gradient-start);
    padding-bottom: 10px;
    margin-bottom: 20px;
}

/* 新添加的容器樣式 */
.text-analysis-container {
    display: flex;
    flex-wrap: wrap;
    gap: 20px;
    margin-bottom: 30px;
}

.text-analysis {
    background-color: #f9fbfe;
    border-radius: 12px;
    padding: 20px;
    box-shadow: 0 3px 10px rgba(0,0,0,0.05);
    margin-bottom: 25px;
    flex: 1;
    min-width: 400px;
    border: 1px solid #e6eef7;
    transition: all 0.2s ease;
}

.text-analysis:hover {
    box-shadow: 0 5px 15px rgba(0,0,0,0.08);
    transform: translateY(-2px);
}

/* 近期目標區域樣式 */
.short-term-goals {
    border-radius: 12px;
    border: 1px solid #e6eef7;
    background-color: #f9fbfe;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.05);
}

.short-term-goals h4 {
    color: #3498db;
    margin-top: 0;
    display: flex;
    align-items: center;
    padding-bottom: 10px;
    border-bottom: 1px solid #e6eef7;
    font-size: 1.25rem;
    font-weight: 600;
}

.short-term-goals h4:before {
    content: '\f05a';
    font-family: 'Font Awesome 5 Free';
    font-weight: 900;
    margin-right: 10px;
    color: #3498db;
}

/* 最終結果區域樣式 */
.final-results {
    border-radius: 12px;
    border: 1px solid #e6eef7;
    background-color: #f9fbfe;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.05);
}

.final-results h4 {
    color: #2c3e50;
    margin-top: 0;
    display: flex;
    align-items: center;
    padding-bottom: 10px;
    border-bottom: 1px solid #e6eef7;
    font-size: 1.25rem;
    font-weight: 600;
}

.final-results h4:before {
    content: '\f201';
    font-family: 'Font Awesome 5 Free';
    font-weight: 900;
    margin-right: 10px;
    color: #2c3e50;
}

.text-analysis h4 {
    margin-bottom: 15px;
    font-size: 1.2rem;
}

.analysis-item {
    margin-bottom: 15px;
    padding: 16px;
    background-color: white;
    border-radius: 8px;
    box-shadow: 0 1px 3px rgba(0,0,0,0.05);
    border: 1px solid #f0f4f8;
    transition: all 0.2s ease;
}

.analysis-item:hover {
    box-shadow: 0 3px 8px rgba(0,0,0,0.1);
    border-color: #e6eef7;
}

.analysis-label {
    font-weight: 600;
    margin-bottom: 10px;
    color: #2c3e50;
    display: flex;
    align-items: center;
    font-size: 1.05rem;
}

.analysis-label:before {
    content: '\f054';
    font-family: 'Font Awesome 5 Free';
    font-weight: 900;
    margin-right: 8px;
    color: #3498db;
    font-size: 0.8rem;
}

.analysis-content {
    line-height: 1.5;
}

.analysis-note {
    font-size: 0.85rem;
    color: #6c757d;
    margin-top: 8px;
    font-style: italic;
}

.highlight-value {
    font-weight: 600;
    color: #3498db;
    background-color: rgba(52, 152, 219, 0.1);
    padding: 2px 6px;
    border-radius: 4px;
    display: inline-block;
    margin: 0 2px;
}

.analysis-content ul {
    padding-left: 20px;
    margin: 10px 0;
}

.percentile {
    display: inline-block;
    padding: 3px 10px;
    border-radius: 20px;
    font-size: 0.9em;
    margin-right: 8px;
    color: white;
    font-weight: 500;
    box-shadow: 0 2px 4px rgba(0,0,0,0.1);
}

.top-percentile {
    background-color: #4caf50;
    background-image: linear-gradient(135deg, #4caf50, #2e7d32);
}

.median-percentile {
    background-color: #2196f3;
    background-image: linear-gradient(135deg, #2196f3, #1565c0);
}

.bottom-percentile {
    background-color: #ff9800;
    background-image: linear-gradient(135deg, #ff9800, #e65100);
}

.worst-percentile {
    background-color: #f44336;
    background-image: linear-gradient(135deg, #f44336, #b71c1c);
}

.success-rate-high {
    color: #4caf50;
}

.success-rate-medium {
    color: #ff9800;
}

.success-rate-low {
    color: #f44336;
}

.bankruptcy-rate-low {
    color: #4caf50;
}

.bankruptcy-rate-medium {
    color: #ff9800;
}

.bankruptcy-rate-high {
    color: #f44336;
}

/* 響應式設計 */
@media (max-width: 992px) {
    .text-analysis {
        min-width: 100%;
    }
}

.global-chart-controls {
    width: 100%;
    background: white;
    padding: 15px;
    border-radius: 8px;
    box-shadow: 0 2px 4px rgba(0,0,0,0.1);
    margin-bottom: 10px;
}

.controls-group {
    display: flex;
    flex-wrap: wrap;
    gap: 20px;
}

.scale-controls, .unit-controls {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.control-label {
    font-weight: 600;
    color: #333;
    margin-bottom: 5px;
}

.control-buttons {
    display: flex;
    gap: 10px;
}

.control-btn {
    padding: 8px 15px;
    border: 1px solid #ddd;
    background: #f5f5f5;
    border-radius: 4px;
    cursor: pointer;
    transition: all 0.2s ease;
    height: 36px;
    line-height: 20px;
}

.control-btn.active {
    background: #2196F3;
    color: white;
    font-weight: bold;
    border-color: #1976D2;
}

.control-btn:hover {
    background: #e0e0e0;
}

.control-btn.active:hover {
    background: #1976D2;
}

.chart-item-half {
    width: calc(50% - 10px);
}

.chart-canvas-container-pie {
    padding-bottom: 100%; /* 圓餅圖使用1:1比例 */
}

.chart-canvas-container canvas {
    position: absolute;
    top: 0;
    left: 0;
    width: 100% !important;
    height: 100% !important;
}

@media (max-width: 768px) {
    .chart-item-half {
        width: 100%;
    }
    .analysis-label {
        width: 100%;
        margin-bottom: 5px;
    }
    .analysis-content {
        width: 100%;
    }
    .controls-group {
        flex-direction: column;
    }
}

/* 被迫賣房率樣式 */
.forced-sale-rate-low {
    color: #4caf50;
}

.forced-sale-rate-medium {
    color: #ff9800;
}

.forced-sale-rate-high {
    color: #f44336;
}

/* 風險指標區域響應式設計 */
.risk-indicators-container {
    display: flex;
    gap: 20px;
    margin-bottom: 20px;
}

@media (max-width: 768px) {
    .risk-indicators-container {
        flex-direction: column;
        gap: 15px;
    }
}

/* AI 報告容器樣式 */
.ai-report-container {
    border-top: 1px solid #eee;
    margin-top: 20px;
    padding-top: 15px;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center; /* 水平置中內部元素 */
    min-height: 150px; /* 設定最小高度，確保容器有足夠空間 */
}

.ai-report-title {
    color: #4285f4;
    font-size: 16px;
    font-weight: 600;
    margin-bottom: 15px;
    display: flex;
    align-items: center;
    gap: 8px;
    flex-shrink: 0; /* 防止標題被壓縮 */
    justify-content: center; /* 標題（含問號icon）置中 */
    text-align: center;
}



.ai-report-buttons {
    display: flex;
    gap: 12px;
    margin-bottom: 10px;
    flex-shrink: 0; /* 防止按鈕被壓縮 */
    justify-content: center; /* 按鈕置中 */
}

.ai-report-btn {
    padding: 12px 24px;
    border: none;
    border-radius: 8px;
    font-size: 14px;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.3s ease;
    position: relative;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    min-height: 48px;
    width: auto;
}

.ai-report-btn:disabled {
    opacity: 0.6;
    cursor: not-allowed;
    transform: none;
}

.ai-report-btn.copy-btn {
    background: linear-gradient(45deg, #667eea, #764ba2);
    color: white;
    border: 2px solid transparent;
}

.ai-report-btn.copy-btn:hover:not(:disabled) {
    background: linear-gradient(45deg, #5a73e0, #6b4190);
    box-shadow: 0 6px 20px rgba(102, 126, 234, 0.3);
}

.ai-report-btn.copy-btn:active:not(:disabled) {
    background: linear-gradient(45deg, #4a63d0, #5b3180);
    transform: translateY(1px);
    box-shadow: 0 2px 8px rgba(102, 126, 234, 0.4);
}



.ai-report-btn .btn-text {
    transition: opacity 0.3s ease;
}

.ai-report-btn .btn-loading {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    white-space: nowrap;
}

.ai-report-btn.loading .btn-text {
    opacity: 0;
}

.ai-report-btn.loading .btn-loading {
    display: inline-flex !important;
    align-items: center;
    gap: 8px;
}

.ai-report-status {
    padding: 10px 15px;
    border-radius: 6px;
    font-size: 14px;
    margin-top: 10px;
    flex-shrink: 0; /* 防止狀態訊息被壓縮 */
}

.ai-report-status.success {
    background-color: #d4edda;
    color: #155724;
    border: 1px solid #c3e6cb;
}

.ai-report-status.error {
    background-color: #f8d7da;
    color: #721c24;
    border: 1px solid #f5c6cb;
}

.ai-report-status.info {
    background-color: #d1ecf1;
    color: #0c5460;
    border: 1px solid #bee5eb;
}

/* 響應式設計 */
@media screen and (max-width: 768px) {
    .ai-report-buttons {
        flex-direction: column;
        gap: 10px;
    }
    
    .ai-report-btn {
        min-height: 44px;
        font-size: 13px;
    }
    
    .ai-report-title {
        font-size: 15px;
    }
}

@media screen and (max-width: 480px) {
    .ai-report-container {
        margin-top: 15px;
        padding-top: 12px;
    }
    
    .ai-report-btn {
        min-height: 40px;
        padding: 10px 16px;
        font-size: 12px;
    }
    
    .ai-report-title {
        font-size: 14px;
        margin-bottom: 12px;
    }
}

/* =============================================
   通用表單版型（基本資料 / 進階資料）
   - 不改 HTML/JS，以選擇器範圍化覆蓋
   - 自動 1/2/3 欄，RWD 收斂
   - 優化 label 與內聯藍色問號對齊
   - 先針對檔案名稱列 (file-name-row) 強制單欄
============================================= */
.finance-sections .content-card .card-content .form-row {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
    gap: var(--ws-gap, 16px);
    align-items: start;
}

/* 欄位標籤與輸入：統一對齊與節奏 */
.finance-sections .form-group label {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    margin-bottom: 6px;
    font-weight: 500;
    line-height: 1.3;
}

.finance-sections .form-group :where(input[type="text"], input[type="number"], select, textarea) {
    width: 100%;
    height: 40px;
    padding: 8px 12px;
    border-radius: 6px;
    box-sizing: border-box;
}

/* 說明小問號對齊（僅限標籤內的內聯按鈕） */
.finance-sections .form-group label .help-popup-btn-inline {
    margin-left: 6px; /* 與標籤文字保留間距 */
    vertical-align: middle;
    transform: translateY(-1px); /* 微調基線，避免上下跳動 */
}

/* 卡片之間的垂直節奏（避免不同段落間距不一） */
.finance-sections .content-card + .content-card {
    margin-top: 16px;
}

/* 檔案名稱列：強制單欄以驗證通用樣式效果 */
.finance-sections .content-card .card-content .form-row.file-name-row .form-group {
    grid-column: 1 / -1;
}

/* RWD：窄螢幕時單欄與較大點觸目標 */
@media (max-width: 768px) {
    .finance-sections .content-card .card-content .form-row {
        grid-template-columns: 1fr;
        gap: 12px;
    }
    .finance-sections .form-group :where(input[type="text"], input[type="number"], select, textarea) {
        height: 44px;
    }
}

/* =============================================
   通用輸入寬度型態（百分比/金額/一般文字）
   - 不改 HTML 的前提下先用型別與已知 ID 規則覆蓋
   - 可透過 CSS 變數調整寬度
============================================= */
:root {
    --ws-width-compact: 100px;   /* 百分比/短數值，例如 基準利率(%) */
    --ws-width-amount: 180px;    /* 金額類，較長，例如 目標金額 */
    --ws-width-text: 340px;      /* 一般文字輸入，例如 檔案名稱 */
    --ws-width-select: 200px;    /* 下拉選單預設寬度 */
}

/* 1) 百分比/短數值（數字型） */
.finance-sections .form-group input[type="number"] {
    max-width: var(--ws-width-compact);
    width: min(100%, var(--ws-width-compact));
    text-align: center; /* 置中顯示短數值/百分比 */
}

/* 2) 金額類（已知 ID 與常見命名；若日後加上 .amount-input 也一併覆蓋） */
.finance-sections .form-group input[id*="target-net-asset"],
.finance-sections .form-group input.amount-input,
.finance-sections .form-group input[id*="amount" i] {
    max-width: var(--ws-width-amount);
    width: min(100%, var(--ws-width-amount));
    text-align: center; /* 置中顯示金額輸入 */
}

/* 3) 一般文字輸入：預設給 text 輸入較寬（再讓特例覆蓋） */
.finance-sections .form-group input[type="text"] {
    max-width: var(--ws-width-text);
    width: min(100%, var(--ws-width-text));
}

/* 4) 下拉選單：預設 200px（可用 --ws-width-select 調整） */
.finance-sections .form-group select {
    max-width: var(--ws-width-select);
    width: min(100%, var(--ws-width-select));
}

/* 5) 金額欄位容器（有 wrapper 的情況）與百分比一致：標籤與輸入同列顯示 */
/* 說明：目標金額欄位外層有一個 div（inline style: display:flex），預設是區塊級元素。
   這裡將其改為 inline-flex，讓它可以與 label 同行顯示，並覆蓋 inline style。 */
.finance-sections .form-group:has(> div > input[id*="target-net-asset"]),
.finance-sections .form-group:has(> div > input[id*="amount" i]) {
    display: flex;
    align-items: center;
    column-gap: 6px; /* 縮小標題與輸入距離 */
    row-gap: 4px;
    flex-wrap: wrap;
}
.finance-sections .form-group > div:has(> input[id*="target-net-asset"]) {
    display: inline-flex !important;
    align-items: center;
    gap: 4px;
}
.finance-sections .form-group > div:has(> input[id*="amount" i]) {
    display: inline-flex !important;
    align-items: center;
    gap: 4px;
}

/* 同時移除該情境下 label 的底部間距避免被擠到新行 */
.finance-sections .form-group:has(> div > input[id*="target-net-asset"]) label,
.finance-sections .form-group:has(> div > input[id*="amount" i]) label {
    margin-bottom: 0;
    min-width: auto; /* 取消 150px 最小寬度，避免被撐開 */
}

/* 5-2) 金額欄位（無 wrapper 的情況）：與百分比一致，標籤與輸入同列 */
.finance-sections .form-group:has(> input[id*="target-net-asset"]) {
    display: flex;
    align-items: center;
    column-gap: 6px;
    row-gap: 4px;
    flex-wrap: wrap;
}
.finance-sections .form-group:has(> input[id*="target-net-asset"]) label {
    margin-bottom: 0;
    min-width: auto;
}

/* 6) 百分比/年齡等數值欄位：與金額一致，標籤與輸入同列且距離縮小 */
.finance-sections .form-group:has(> input[type="number"]) {
    display: flex;
    align-items: center;
    column-gap: 6px; /* 縮小標題與輸入距離 */
    row-gap: 4px;
    flex-wrap: wrap;
}
.finance-sections .form-group:has(> input[type="number"]) label {
    margin-bottom: 0;
    min-width: auto; /* 取消 150px 最小寬度 */
}

/* 檔案名稱：更寬一些，便於顯示 */
.finance-sections .form-group #file-name {
    max-width: 420px;
}

/* 問題輸入（textarea）維持全寬，已由現有規則處理；此處保險一次 */
.finance-sections .form-group textarea#ai-question {
    width: 100%;
    max-width: 100%;
}

/* 手機優先全寬避免擠壓 */
@media (max-width: 768px) {
    .finance-sections .form-group :where(input[type="text"], input[type="number"], select) {
        max-width: 100%;
    }
}

/* =============================================
   Member Settings 專屬樣式隔離（不吃通用表單規則）
   交由 js/member-settings.js 的內嵌樣式為主，這裡只做保險覆蓋
============================================= */
#member-settings-card .form-row { display: grid; grid-template-columns: 1fr 1fr 1fr; column-gap: 12px; row-gap: 6px; align-items: center; }
#member-settings-card .form-group label { display: inline-flex; align-items: center; gap: 4px; margin-bottom: 4px; min-width: auto; }
#member-settings-card .form-group :where(input[type="text"], input[type="number"], select) { width: 100% !important; max-width: 100% !important; }
#member-settings-card .form-group input[type="number"] { text-align: center; }
#member-settings-card .form-group select { text-align-last: center; }
#member-settings-card .help-popup-btn-inline { margin-left: 4px; }

/* i18n: 與 main_simulation 表單統一的輸入高度，避免不同瀏覽器造成垂直位移 */
.standard-input,
.standard-select {
  height: 36px;
}
/* 通用樣式（不與頁頭頁尾重複） */

.contact-container {
    max-width: 800px;
    margin: 2rem auto;
    padding: 0 1rem;
}

.contact-form {
    background: white;
    padding: 2rem;
    border-radius: 8px;
    box-shadow: 0 2px 10px rgba(0,0,0,0.1);
}

.form-group {
    margin-bottom: 1.5rem;
}

.form-group label {
    display: block;
    margin-bottom: 0.5rem;
    color: #1565c0; /* 使用相同的深藍色 */
    font-weight: bold;
}

.form-group input,
.form-group textarea {
    width: 100%;
    padding: 0.8rem;
    border: 1px solid #ddd;
    border-radius: 4px;
    font-size: 1rem;
}

.form-group textarea {
    resize: vertical;
    min-height: 150px;
}

.submit-btn {
    background: #1e88e5; /* 使用相同的主藍色 */
    color: white;
    padding: 1rem 2rem;
    border: none;
    border-radius: 4px;
    cursor: pointer;
    font-size: 1rem;
    transition: background 0.3s;
}

.submit-btn:hover {
    background: #1565c0; /* 使用相同的深藍色 */
}

@media (max-width: 768px) {
    .contact-container {
        margin: 1rem;
    }
    
    .contact-form {
        padding: 1rem;
    }
}