body { 
    font-family: sans-serif; 
    padding: 20px; 
    background-color: #f9f9f9; 
    color: #333; 
}
.container { 
    display: flex; 
    gap: 20px; 
    flex-wrap: wrap; 
}
.panel { 
    background: white; 
    padding: 20px; 
    border-radius: 8px; 
    box-shadow: 0 2px 4px rgba(0,0,0,0.1); 
}
.input-panel { 
    flex: 1; 
    min-width: 400px; 
}
.plot-panel { 
    flex: 2; 
    min-width: 600px; 
}
table { 
    width: 100%; 
    border-collapse: collapse; 
    margin-bottom: 15px; 
}
th, td { 
    border: 1px solid #ddd; 
    padding: 8px; 
    text-align: center; 
}
th { 
    background-color: #f2f2f2; 
    font-size: 14px; 
}
input[type="number"] { 
    width: 80px; 
    padding: 4px; 
    text-align: center; 
}
/* 修改：調整標題的顯示方式與間距 */
.section-title { 
    font-weight: bold; 
    margin-top: 30px;      /* 加大與上方元素的距離 */
    margin-bottom: 10px;   /* 增加與下方表格的距離 */
    border-bottom: 2px solid #007bff; 
    display: block;        /* 改為 block 強制換行 */
    width: fit-content;    /* 讓藍色底線長度剛好貼齊文字即可 */
    padding-bottom: 5px; 
}

/* 新增：專門給「+新增」按鈕的獨立樣式 */
.btn-add {
    display: block;        /* 強制自己佔用一行，不跟後面的標題擠在一起 */
    margin-top: 5px;       /* 與上方的表格稍微拉開 */
    margin-bottom: 30px;   /* 把下一個區塊的標題往下推，留出呼吸空間 */
    padding: 6px 12px;
    cursor: pointer;
    background-color: #28a745;
    color: white;
    border: none;
    border-radius: 4px;
    font-size: 14px;
}
.btn-add:hover {
    background-color: #218838;
}

/* 原本的 btn-small 保留給表格內的「刪除」按鈕用 */
.btn-small { 
    padding: 4px 8px; 
    cursor: pointer; 
    background-color: #28a745; 
    color: white; 
    border: none; 
    border-radius: 4px; 
    font-size: 12px; 
}
.btn-small { 
    padding: 4px 8px; 
    cursor: pointer; 
    background-color: #28a745; 
    color: white; 
    border: none; 
    border-radius: 4px; 
    font-size: 12px; 
}
.btn-del { 
    background-color: #dc3545; 
}
.action-btns { 
    margin-top: 20px; 
    display: flex; 
    gap: 10px; 
}
.btn-main { 
    padding: 10px 20px; 
    font-size: 16px; 
    cursor: pointer; 
    border: none; 
    border-radius: 4px; 
    color: white; 
}
.btn-preview { 
    background-color: #6c757d; 
}
.btn-calc { 
    background-color: #007bff; 
}
#plotDiv { 
    width: 100%; 
    height: 500px; 
    border: 1px solid #eee; 
    margin-top: 15px; 
}
pre { 
    background: #2d2d2d; 
    color: #f8f8f2; 
    padding: 15px; 
    overflow-x: auto; 
    border-radius: 4px; 
}


/* --- 輸出報表專用樣式 --- */
.report-box {
    background: #fff;
    padding: 15px;
    border: 1px solid #ddd;
    border-radius: 4px;
    margin-top: 10px;
}
.report-box h4 {
    margin-top: 20px;
    margin-bottom: 10px;
    color: #0056b3;
    border-bottom: 2px solid #eee;
    padding-bottom: 5px;
}
.report-box h4:first-child {
    margin-top: 0;
}
.report-table {
    width: 100%;
    border-collapse: collapse;
    margin-bottom: 15px;
    font-size: 14px;
}
.report-table th, .report-table td {
    border: 1px solid #ccc;
    padding: 8px;
    text-align: center;
}
.report-table th {
    background-color: #f4f6f8;
    color: #333;
}
.text-red { color: #dc3545; font-weight: bold; }
.text-blue { color: #007bff; font-weight: bold; }
.text-gray { color: #6c757d; }

/* --- 標題與使用說明區塊 --- */
.header-container {
    display: flex;
    align-items: flex-start;
    flex-direction: column;
    gap: 10px;
    margin-bottom: 20px;
}
.header-container h2 {
    margin: 0;
}
.instructions {
    background: #e2eefd;      /* 淡淡的藍色背景 */
    border-radius: 6px;
    padding: 8px 15px;
    border: 1px solid #b6d4fe;
    width: 100%;
    max-width: 800px;
    box-sizing: border-box;
}
.instructions summary {
    cursor: pointer;
    font-weight: bold;
    color: #004085;
    user-select: none;
    outline: none;
}
/* 隱藏原生小三角形(非必須，但很多現代設計會隱藏)並稍微調整排版 */
.instructions-content {
    margin-top: 10px;
    padding-top: 10px;
    border-top: 1px dashed #9bc0ed;
    font-size: 14px;
    line-height: 1.6;
    color: #333;
}
.instructions-content ul {
    margin: 0;
    padding-left: 20px;
}
.instructions-content li {
    margin-bottom: 6px;
}