/* CSS 樣式區塊：定義所有顏色和佈局 */
    :root{--bg:#f7f8fb;--card:#ffffff;--accent:#0f62fe;--muted:#666;--danger:#e84d4d} /* 新增 --danger 紅色 */
    html,body{height:100%;margin:0;font-family:system-ui,-apple-system,Segoe UI,Roboto,'Noto Sans TC',"Microsoft JhengHei",Arial}
    body{background:linear-gradient(180deg,#f2f6ff 0%,var(--bg) 100%);padding:24px}
    .container{max-width:1100px;margin:0 auto}
    .card{background:var(--card);border-radius:12px;box-shadow:0 6px 18px rgba(16,24,40,0.06);padding:20px}
    header{display:flex;align-items:center;gap:16px;margin-bottom:16px}
    h1{font-size:20px;margin:0}
    p.lead{margin:6px 0 0;color:var(--muted)}
    .pager{display:flex;gap:8px;align-items:center;margin:12px 0}
    .btn{background:var(--accent);color:white;padding:8px 12px;border-radius:8px;border:none;cursor:pointer}
    .btn.secondary{background:#e6eefc;color:var(--accent)}
    .questions{margin-top:12px}
    /* 問題容器樣式 */
    .q{padding:12px;border-radius:8px;border:1px solid #eef3ff;margin-bottom:10px; transition: border-color 0.2s;}
    .q h3{font-size:14px;margin:0 0 8px}
    .options{display:flex;flex-wrap:wrap;gap:8px}
    .opt{flex:1 1 48%;min-width:200px}
    label.optButton{display:block;background:#fbfdff;padding:10px;border-radius:8px;border:1px solid #e8eefc;cursor:pointer; transition: background-color 0.2s, border-color 0.2s;}
    label.optButton input{margin-right:8px}
    
    /* 1. 選項被選中時的按鈕變色 */
    label.optButton input:checked + span {
        color: var(--accent); /* 選中文字變色 */
        font-weight: 600;
    }
    label.optButton input:checked {
        accent-color: var(--accent); /* Radio button 圓圈變色 */
    }
    label.optButton input:checked:not(.skip) ~ * {
        /* 當 Radio 被選中時，改變它的父層 label 的樣式 */
        background-color: #e6eefc; /* 淺藍色背景 */
        border-color: var(--accent); /* 藍色邊框 */
    }

    /* 2. 沒有回答的整題標示成紅色 (錯誤樣式) */
    .q.unanswered {
        border: 2px solid var(--danger); /* 紅色邊框 */
        background-color: #fff8f8; /* 淺紅色背景 */
    }
    /* 讓錯誤標記更明顯 (標題變紅) */
    .q.unanswered h3 {
        color: var(--danger);
    }
    
    .progressBar{height:10px;background:#eef3ff;border-radius:999px;overflow:hidden}
    .progressBar > i{display:block;height:100%;background:linear-gradient(90deg,var(--accent),#66a3ff);width:0%}
    .summary{margin-top:16px;display:grid;grid-template-columns:1fr 420px;gap:16px}
.chartCard {
  padding: 12px;
  height: 420px; /* 或使用百分比，如 50vh */
}
#radarChart {
  width: 100% !important;

}
    .report{white-space:pre-wrap;font-family:Inter, 'Noto Sans TC', monospace}
    footer{margin-top:16px;color:var(--muted);font-size:13px}
    .small{font-size:13px;color:var(--muted)}
    @media(max-width:960px){.summary{grid-template-columns:1fr;}.opt{flex:1 1 100%}}