:root {
    --primary: #3887B0;
    --secondary: #2c3e50; 
    --bg: #f4f7f6;
    --card-bg: #ffffff;
    --text-main: #2c3e50;
    --text-sub: #7f8c8d;
    --border: #e1e4e8;
    --tab-teal: #0F8E86; /* 首頁近期Tab主題青綠 */
}
* { margin:0; padding:0; box-sizing:border-box; }

body { 
    font-family:'Noto Sans TC', sans-serif; 
    background:var(--bg); 
    color:var(--text-main); 
    line-height:1.6; 
    padding-bottom: 20px; 
    padding-top: 50px; 
}

/* 置頂標題列樣式 */
header { 
    background: var(--secondary); 
    color: white; 
    padding: 5px 20px; 
    text-align: center; 
    box-shadow: 0 2px 10px rgba(0,0,0,0.1); 
    position: fixed; 
    top: 0;
    left: 0;
    right: 0;
    z-index: 1000; 
}

h1 { font-size: 20px; font-weight: 700; margin: 0; }
h1 span { cursor: pointer; } 

/* 標題前方選舉意象 icon */
.site-title{
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
}

/* Header：顯示模式切換（暗色 / 一般） */
.theme-toggle-btn{
    position: absolute;
    right: 52px; /* 候選人檢索按鈕左側（間距略縮、與右側 icon 同尺寸） */
    top: 50%;
    transform: translateY(-50%);
    width: 34px;
    height: 34px;
    border: none;
    background: transparent;
    padding: 0;
    color: rgba(255,255,255,0.92);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    -webkit-tap-highlight-color: transparent;
    transition: transform 0.15s ease, opacity 0.15s ease;
}
.theme-toggle-btn svg{ width: 20px; height: 20px; display:block; }
.theme-toggle-btn:hover{ opacity: 1; transform: translateY(-50%) scale(1.06); }
.theme-toggle-btn:active{ transform: translateY(-50%) scale(0.96); }
.theme-toggle-btn:focus-visible{
    outline: 2px solid rgba(255,255,255,0.75);
    outline-offset: 2px;
    border-radius: 10px;
}

.site-logo{
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 20px;
    height: 20px;
    color: rgba(255,255,255,0.95);
}
.site-logo svg{
    width: 20px;
    height: 20px;
    display: block;
}

.container { max-width: 1200px; margin: 20px auto; padding: 0 15px; }

/* --- 主選單樣式 --- */
/* =========================
   主選單 / 子分類按鈕（方形格：圖示上、文字下）
   - 同一套 .menu-button 套用於首頁與子分類
   - 手機：每列三格
   - 圖示至少占方格高度 1/2
   ========================= */

.main-menu-grid{
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
    gap: 14px;
    margin-bottom: 50px;
    align-items: stretch;
}

.menu-button{
    position: relative;
    overflow: hidden;

    display: flex;
    flex-direction: column;       /* ✅ 圖示上、文字下 */
    align-items: center;
    justify-content: center;
    gap: 10px;

    width: 100%;
    aspect-ratio: 1 / 1;          /* ✅ 方形格 */
    padding: 14px 10px;

    background: linear-gradient(180deg, #ffffff 0%, rgba(56, 135, 176, 0.04) 100%);
    border: 1px solid rgba(225, 228, 232, 0.95);
    border-radius: 14px;

    color: var(--secondary);
    box-shadow: 0 2px 10px rgba(44, 62, 80, 0.05);

    cursor: pointer;
    user-select: none;
    -webkit-tap-highlight-color: transparent;
    touch-action: manipulation;

    transition:
        transform 0.2s ease,
        box-shadow 0.2s ease,
        border-color 0.2s ease,
        background 0.2s ease;
}

/* 低調柔光：hover 才出現 */
.menu-button::before{
    content: "";
    position: absolute;
    inset: 0;
    border-radius: inherit;
    background:
        radial-gradient(circle at 18% 18%, rgba(56, 135, 176, 0.16) 0%, rgba(56, 135, 176, 0.00) 55%),
        radial-gradient(circle at 86% 92%, rgba(44, 62, 80, 0.10) 0%, rgba(44, 62, 80, 0.00) 60%);
    opacity: 0;
    transition: opacity 0.25s ease;
    pointer-events: none;
}

/* Icon：至少占方格高度 1/2 */
.menu-icon{
    display: inline-flex;
    align-items: center;
    justify-content: center;
    height: 52%;                  /* ✅ 圖示高度至少 1/2 */
    width: 100%;
    background: none;
    border-radius: 0;
    color: var(--primary);
    flex: 0 0 auto;
}

.menu-svg{
    height: 100%;
    width: auto;
    max-width: 60%;               /* ✅ 避免太寬（長形 SVG） */
}

/* 文字：置中，允許換行 */
.menu-text{
    display: block;
    text-align: center;
    font-size: clamp(14px, 1.2vw, 18px);
    font-weight: 800;
    letter-spacing: 0.2px;
    line-height: 1.15;
}

/* 既有 HTML 有 menu-chevron，但此設計不需要箭頭 */
.menu-chevron{ display: none; }

/* Hover（桌機） */
.menu-button:hover{
    transform: translateY(-3px);
    border-color: rgba(56, 135, 176, 0.55);
    box-shadow: 0 12px 24px rgba(56, 135, 176, 0.16);
}
.menu-button:hover::before{ opacity: 1; }

/* Focus（鍵盤） */
.menu-button:focus-visible{
    outline: 3px solid rgba(56, 135, 176, 0.35);
    outline-offset: 3px;
}

/* Active（手機點按 / 滑鼠按住） */
.menu-button:active{
    transform: translateY(-1px) scale(0.99);
    box-shadow: 0 7px 16px rgba(56, 135, 176, 0.14);
}

@media (max-width: 768px){
    /* ✅ 首頁 + 子分類：手機小螢幕每列三格 */
    .main-menu-grid{
        grid-template-columns: repeat(3, minmax(0, 1fr));
        gap: 10px;
    }

    .menu-button{
        padding: 12px 8px;
        border-radius: 12px;
        gap: 8px;
    }

    .menu-text{
        font-size: 14px;
        line-height: 1.15;
    }

    .menu-svg{ max-width: 64%; }
}

/* 減少動態偏好 */
@media (prefers-reduced-motion: reduce){
    .menu-button, .menu-button::before{
        transition: none !important;
    }
}

.menu-section-title {
    font-size: 24px;
    font-weight: 700;
    color: var(--secondary);
    margin-bottom: 25px;
    padding-bottom: 10px;
    border-bottom: 2px solid var(--border);
}

/* =========================
   首頁：近期（Tab）
   - 文字標題已移除，改以分隔線作為按鈕區與內容區間隔
   ========================= */

.home-recent-divider{
    /* ✅ 改版：分隔線改放在 Tabs 下方（由 .home-recent-tabs 自帶底線） */
    display: none;
}

.home-recent-tabs{
    display: flex;
    gap: 10px;
    flex-wrap: wrap;
    align-items: center;
    padding-bottom: 10px;
    border-bottom: 2px solid var(--border);
    margin-bottom: 22px;
}

/* 標題改成 Tabs 同款外觀，但不可點 */
.home-recent-tab.is-static{
    cursor: default;
    pointer-events: none;
}
.home-recent-tab.is-static:hover,
.home-recent-tab.is-static:active{
    transform: none;
    box-shadow: 0 2px 10px rgba(44, 62, 80, 0.05);
    border-color: rgba(225, 228, 232, 0.95);
}

.home-recent-tab{
    appearance: none;
    border: 1px solid rgba(225, 228, 232, 0.95);
    background: linear-gradient(180deg, #ffffff 0%, rgba(56, 135, 176, 0.04) 100%);
    color: var(--secondary);
    padding: 10px 14px;
    border-radius: 12px;
    font-size: 14px;
    font-weight: 800;
    letter-spacing: 0.2px;
    cursor: pointer;
    box-shadow: 0 2px 10px rgba(44, 62, 80, 0.05);
    transition: transform 0.2s ease, box-shadow 0.2s ease, border-color 0.2s ease, background 0.2s ease;
    -webkit-tap-highlight-color: transparent;
}

.home-recent-tab:hover{
    transform: translateY(-3px);
    border-color: rgba(56, 135, 176, 0.55);
    box-shadow: 0 12px 24px rgba(56, 135, 176, 0.16);
}
.home-recent-tab:active{ transform: translateY(0px) scale(0.98); }
.home-recent-tab:focus-visible{
    outline: 3px solid rgba(15, 142, 134, 0.25);
    outline-offset: 2px;
}

.home-recent-tab.is-active{
    background: var(--tab-teal);
    border-color: rgba(0,0,0,0.05);
    color: #fff;
    box-shadow: 0 10px 20px rgba(15, 142, 134, 0.18);
}

.home-recent-panel{ display: none; }
.home-recent-panel.is-active{ display: block; }

/* ---- Dark mode: Tabs 回到玻璃感；hover 效果比照選舉小卡 ---- */
html[data-theme="dark"] .home-recent-tabs{
    border-bottom-color: rgba(255,255,255,0.10);
}
html[data-theme="dark"] .home-recent-tab{
    background: rgba(255,255,255,0.04);
    border: 1px solid rgba(255,255,255,0.12);
    color: rgba(255,255,255,0.90);
    box-shadow: var(--shadow-1);
}
html[data-theme="dark"] .home-recent-tab:hover{
    /* 跟 .card.clickable:hover 一樣：不平移、只強化邊框與陰影 */
    transform: none;
    border-color: rgba(45,226,230,0.36);
    box-shadow: var(--shadow-2), var(--glow);
    background: rgba(255,255,255,0.06);
}
html[data-theme="dark"] .home-recent-tab:active{
    transform: none;
}
html[data-theme="dark"] .home-recent-tab:focus-visible{
    outline: 3px solid rgba(45,226,230,0.25);
}
html[data-theme="dark"] .home-recent-tab.is-active{
    background: rgba(45,226,230,0.18);
    border-color: rgba(45,226,230,0.26);
    color: rgba(255,255,255,0.95);
    box-shadow: var(--shadow-1);
}

/* --- 選舉列表 / 摘要卡片樣式 --- */
.election-list-grid {
        column-count: 2; 
        column-gap: 20px; 
        margin-top: 20px;
}

.election-list-grid .card {
    display: inline-block; 
    width: 100%; 
    margin-bottom: 20px; 
    page-break-inside: avoid; 
    break-inside: avoid-column; 
}

/* --- 麵包屑 --- */
.breadcrumb { margin-bottom: 20px; font-size: 16px; color: var(--text-sub); padding: 10px 0; }
#breadcrumb-bottom { margin-top: 40px; border-top: 1px solid var(--border); padding-top: 20px; }
.breadcrumb span { cursor: pointer; color: var(--primary); font-weight: 500;  background: transparent; padding: 0; border: 0; border-radius: 0;}
.breadcrumb span:hover { text-decoration: underline; }
.breadcrumb span.active { color: var(--text-main); cursor: default; text-decoration: none; }

.main-section { margin-bottom: 40px; }
.section-header { display: flex; align-items: center; gap: 10px; margin-bottom: 15px; padding-bottom: 10px; border-bottom: 2px solid var(--border); }
.section-title { font-size: 22px; font-weight: 700; color: var(--text-main); }
.section-badge { background: var(--primary); color: white; padding: 4px 12px; border-radius: 20px; font-size: 13px; }

/* 卡片主體 */
.card { background: var(--card-bg); border-radius: 10px; box-shadow: 0 2px 8px rgba(0,0,0,0.05); padding: 20px; overflow: hidden; border: 1px solid transparent; transition: all 0.2s; margin-bottom: 0; }
.card.clickable:hover { transform: translateY(-3px); border-color: var(--primary); box-shadow: 0 8px 15px rgba(56, 135, 176, 0.15); }

.card-header { 
    display: flex; 
    justify-content: space-between; 
    align-items: flex-start; 
    margin-bottom: 15px; 
    overflow: hidden; 
}
.card-header-left { 
    display: flex; 
    flex-direction: column; 
    flex-shrink: 1; 
    min-width: 0;
}

.card-title { font-size: 18px; font-weight: 700; color: var(--text-main); border-left: 4px solid var(--primary); padding-left: 10px; line-height: 1.2; }

.card-stats { 
    font-size: 13px; 
    color: var(--text-main); 
    margin-top: 5px; 
    margin-left: 14px; 
    font-weight: 500; 
    line-height: 1.8; 
}

.card-stats strong { font-weight: 500; color: var(--text-main); }
.card-stats .rate { color: #d9534f; font-weight: 700; }

.card.is-summary .card-stats {
    margin-top: 5px; margin-left: 14px; font-size: 14px; line-height: 1.5; color: var(--text-main);
}
.card.is-summary .card-stats strong { color: var(--text-main); font-weight: 500; }
.card.is-summary .card-stats .rate { color: #d9534f; font-weight: 500; }

.card-action { 
    font-size: 14px; color: var(--primary); font-weight: 500; white-space: nowrap; margin-left: 10px; flex-shrink: 0; align-self: flex-start; padding-top: 2px; 
}

.card-action {
    cursor: pointer;                 /*超連結鼠標*/
    transition: 
        color 0.2s ease,
        transform 0.2s ease,
        text-decoration-color 0.2s ease;
}

.card-action:hover {
    color: #1f6fb2;                  /* 比 primary 再深一點 */
    text-decoration: underline;
    text-underline-offset: 3px;
    transform: translateX(2px);      /* 微微往右滑 */
}

.card-footer-info {
    margin-top: 5px; padding-top: 0px; font-size: 12px; color: var(--text-sub); text-align: left; font-weight: 500;
}

.sub-area-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(480px, 1fr)); gap: 15px; }

.table-responsive { overflow-x: auto; }
table { width: 100%; border-collapse: collapse; font-size: 14px; table-layout: auto; } 

tr { position: relative; z-index: 1; transition: background-color 0.3s ease, border-color 0.3s ease; }
tr:hover { background-color: rgba(0, 0, 0, 0.03); }

@keyframes bar-grow {
    from { background-size: 0% 100%; }
    to { background-size: var(--bar-width) 100%; } 
}

tr.animate-bar-grow {
    background-repeat: no-repeat; 
    background-size: var(--bar-width) 100%; 
    animation: bar-grow 1s cubic-bezier(0.25, 0.46, 0.45, 0.94) forwards;
    background-color: transparent !important; 
}

tr:not(.animate-bar-grow) {
        transition: background-size: 0.5s ease-in-out, background-color 0.3s ease;
        background-repeat: no-repeat;
        background-size: var(--bar-width) 100%; 
}

th { 
    background: #f8f9fa; color: #666; font-weight: 600; text-align: left; padding: 6px 8px; border-bottom: 2px solid var(--border); white-space: nowrap; font-size: 13px; cursor: pointer; position: relative; 
}
th:hover { background: #e9ecef; }
td { 
    padding: 8px 8px; border-bottom: 1px solid var(--border); vertical-align: middle; position: relative; z-index: 2; 
}

table th:nth-child(1), table td:nth-child(1) { width: 40px; text-align: center; } 
table td:nth-child(2) { padding-top: 6px; padding-bottom: 6px; line-height: 1.2; }
table th:nth-last-child(2), table td:nth-last-child(2) { text-align: right; white-space: nowrap; } 
table th:last-child, table td:last-child { width: 50px; text-align: right; white-space: nowrap; } 

td.number-cell { text-align: center; }

.sort-icon {
    display: inline-block; width: 0; height: 0; margin-left: 5px; vertical-align: middle; border-left: 4px solid transparent; border-right: 4px solid transparent; opacity: 0.3; 
}
.sort-icon.asc { border-bottom: 4px solid #333; opacity: 1; }
.sort-icon.desc { border-top: 4px solid #333; opacity: 1; }

.number-badge {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 24px;
    height: 24px;
    line-height: normal;
    background: #ffffff;
    border-radius: 50%;
    font-weight: 700;
    font-size: 13px;
    /* 預設（非當選）：維持低調灰色 */
    color: rgba(11,18,32,0.64);
    vertical-align: middle;
    border: 2px solid rgba(11,18,32,0.18);
    /* ✅ 需求：候選人號次不要有光暈 */
    box-shadow: none;
}

.number-badge.is-winner { border: 2px solid currentColor; background: #ffffff; color: #D95551; box-shadow: none; }

.party-badge { font-size: 11px; padding: 2px 6px; border-radius: 8px; color: white; background: #999; white-space: nowrap; }

.women-quota-badge {
    display: inline-block; font-size: 9px; font-weight: 500; color: #FFFFFF; background-color: #E90080; padding: 1px 4px; border-radius: 3px; margin-top: 2px; line-height: 1; white-space: nowrap; 
}

/* --- 副總統候選人姓名樣式 --- */
.bracket-label-text {
    display: block; 
    font-size: 11px;
    font-weight: 400; 
    color: var(--text-sub); 
    margin-top: 1px; 
    line-height: 1.2;
    white-space: nowrap; 
}

.incumbent-badge {
    display: inline-block; font-size: 9px; font-weight: 500; color: #FFFFFF; background-color: #d9534f; padding: 2px 2px; border-radius: 3px; margin-left: 2px; line-height: 1; white-space: nowrap; vertical-align: middle;
}

/* *** 修改：候選人連結樣式 *** */
.candidate-name {
    display: block;
    font-weight: 700;
    color: inherit; /* 保持原色 */
}
.candidate-link {
    cursor: pointer;
}
.candidate-link:hover {
    text-decoration: underline; /* 鼠標懸停時加底線提示可點擊 */
}

.party-cell .party-long { display: inline-block; }
.party-cell .party-short { display: none; }
.party-title-mobile { display: none; }

/* *** 新增：隱藏政黨欄位 CSS *** */
.col-party.hidden-party, 
table th.col-party.hidden-party, 
table td.col-party.hidden-party {
    display: none !important;
}

table.large-table { font-size: 17px; table-layout: auto; }
table.large-table th { padding: 10px 10px; font-size: 14px; }
table.large-table td { padding: 10px 10px; }
table.large-table .number-badge { width: 26px; height: 26px; font-size: 14px; }
table.large-table .party-badge { font-size: 12px; }
table.large-table td:nth-child(2) { padding-top: 8px; padding-bottom: 8px; }


.loading-state { text-align: center; padding: 60px; color: var(--text-sub); font-size: 18px; }

/* 首次載入：票軌數據進度條（由 script.js 注入） */
.loading-state .loading-title{
    font-weight: 800;
    color: var(--text-main);
    margin-bottom: 14px;
}
.loading-state .loading-progress{
    /* 手機上不要貼邊：用「容器寬度 - 固定邊距」 */
    width: min(520px, calc(100% - 96px));
    height: 10px;
    margin: 0 auto;
    border-radius: 999px;
    overflow: hidden;
    background: rgba(0,0,0,0.08);
    border: 1px solid rgba(0,0,0,0.06);
}
@media (max-width: 480px){
    .loading-state .loading-progress{ width: min(520px, calc(100% - 64px)); }
}
.loading-state .loading-progress > .loading-progress-bar{
    height: 100%;
    width: 0%;
    border-radius: 999px;
    background: var(--primary);
    transition: width 0.2s ease;
}
.loading-state .loading-count{
    margin-top: 12px;
    font-size: 13px;
    letter-spacing: 0.3px;
    color: var(--text-sub);
    font-variant-numeric: tabular-nums;
}

html[data-theme="dark"] .loading-state .loading-title{ color: rgba(255,255,255,0.92); }
html[data-theme="dark"] .loading-state .loading-progress{
    background: rgba(255,255,255,0.10);
    border: 1px solid rgba(255,255,255,0.14);
}

.top-summary-grid {
    display: grid; grid-template-columns: repeat(2, 1fr); gap: 25px; margin-bottom: 40px; align-items: start;
}

.summary-panel {
    background: var(--card-bg); border-radius: 10px; box-shadow: 0 2px 8px rgba(0,0,0,0.05); padding: 20px; border: 1px solid var(--border);
}
.summary-panel h3 {
    font-size: 18px; font-weight: 700; color: var(--secondary); border-left: 4px solid var(--primary); padding-left: 10px; line-height: 1.2; margin-bottom: 15px;
}
.summary-list { list-style: none; padding: 0; margin: 0; font-size: 15px; }
.summary-list li { display: flex; justify-content: space-between; padding: 10px 0; border-bottom: 1px dashed var(--border); }
.summary-list li:last-child { border-bottom: none; }
.summary-list li.winner-row { display: block !important; border-bottom: none !important; line-height: 1.5; }
.summary-list .stat-value { font-weight: 700; color: var(--text-main); }
.summary-list .winner-name { color: var(--primary); font-size: 16px; }

/* --- 候選人 Modal 樣式 (新增) --- */
.modal-overlay {
    position: fixed;
    top: 0; left: 0; right: 0; bottom: 0;
    background: rgba(0, 0, 0, 0.5);
    z-index: 2000;
    display: none; /* 預設隱藏 */
    justify-content: center;
    align-items: center;
    padding: 20px;
}
.modal-overlay.active {
    display: flex;
}
.modal-card {
    background: white;
    border-radius: 12px;
    width: 100%;
    max-width: 500px;
    max-height: 90vh;
    overflow-y: auto;
    box-shadow: 0 10px 25px rgba(0,0,0,0.2);
    position: relative;
    animation: modalFadeIn 0.3s ease;
}
@keyframes modalFadeIn {
    from { opacity: 0; transform: translateY(10px); }
    to { opacity: 1; transform: translateY(0); }
}
.modal-close-btn {
    position: absolute;
    top: 15px;
    right: 15px;
    font-size: 24px;
    color: #999;
    cursor: pointer;
    z-index: 10;
    width: 32px;
    height: 32px;
    text-align: center;
    line-height: 32px;
    border-radius: 50%;
    background: rgba(255,255,255,0.8);
}
.modal-close-btn:hover {
    color: #333;
    background: #ffffff;
}
.modal-body {
    padding: 25px;
}
.profile-header {
    display: flex;
    align-items: center;
    gap: 20px;
    margin-bottom: 25px;
    border-bottom: 1px solid var(--border);
    padding-bottom: 20px;
}
.profile-photo {
    width: 80px;
    height: 80px;
    border-radius: 50%;
    object-fit: cover;
    background: #ffffff;
    border: 2px solid var(--border);
    flex-shrink: 0;
}

.modal-card .profile-photo{
    width: 82px;
    height: 82px;
}
.profile-info h2 {
    font-size: 22px;
    font-weight: 700;
    margin-bottom: 5px;
    color: var(--secondary);
}
.profile-detail {
    font-size: 14px;
    color: var(--text-sub);
}
.history-title {
    font-size: 16px;
    font-weight: 700;
    margin-bottom: 15px;
    color: var(--secondary);
    border-left: 4px solid var(--primary);
    padding-left: 10px;
}
.history-list {
    list-style: none;
}
.history-item {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 10px 0;
    border-bottom: 1px dashed var(--border);
    font-size: 14px;
}
.history-item:last-child { border-bottom: none; }
.history-year-tag {
    background: #ffffff;
    color: #d9534f;
    padding: 2px 6px;
    border-radius: 4px;
    font-size: 12px;
    margin-right: 8px;
    font-weight: 500;
}
.history-name { font-weight: 500; color: var(--text-main); }
.history-party { font-size: 12px; color: #888; margin-left: 5px; }
.history-result { 
    font-weight: 700; 
    font-size: 13px;
}
.result-won { color: #d9534f; }
.result-lost { color: #999; font-weight: 400; }

@media (max-width: 768px) {
        .election-list-grid { column-count: 1; }
        .layout-compact { flex-direction: column; align-items: center; }
        .layout-compact .table-area { width: 100%; }
    .layout-full { grid-template-columns: 1fr; }
    .sub-area-grid { grid-template-columns: 1fr; }
    .party-cell .party-long { display: none; }
    .party-cell .party-short { display: inline-block; }
    .party-badge { font-size: 11px; }
    table.large-table { font-size: 14px; }
    table.large-table th { padding: 6px 8px; font-size: 13px; }
    table.large-table td { padding: 8px 8px; }
    table.large-table .party-badge { font-size: 11px; }
    td.number-cell { text-align: center; line-height: 22px; }
    /* 手機：只調尺寸，不覆蓋顏色/邊框（交由深/淺色主題控制） */
    .number-badge { width: 22px; height: 22px; line-height: normal; font-size: 12px; vertical-align: middle; }
    .col-party .party-title-desktop { display: none; }
    .col-party .party-title-mobile { display: inline; }
    .top-summary-grid { grid-template-columns: 1fr; }
    table td:nth-child(2) { padding-top: 5px; padding-bottom: 5px; }
    
    /* Modal Mobile tweak：手機版維持「左圖右文」(參考 Candidate Directory) */
    .modal-card .profile-header{
        flex-direction: row;
        align-items: center;
        justify-content: flex-start;
        text-align: left;
        gap: 14px;
    }
    .modal-card .profile-info,
    .modal-card .profile-info h2,
    .modal-card .profile-detail{
        text-align: left;
    }
    .modal-card .profile-photo{ width: 82px; height: 82px; }
}

footer {
    padding: 15px 15px;
    margin-top: 40px; 
    border-top: 1px solid var(--border); 
    background: #fafafa; 
    text-align: center; 
    font-size: 12px; 
    color: #999; 
    line-height: 1.6;
}

@media (min-width: 769px) {
    #footer-source { display: inline; }
}

/* =========================
   鄉鎮子選單：沿用一般按鈕樣式
   - 不再隱藏圖示
   - 不再額外加大 padding
   - 讓子分類按鈕尺寸與首頁一致
   ========================= */


/* === 鄉鎮長 / 鄉鎮民代表：依各鄉鎮地圖輪廓顯示圖示 === */
:root{
  --town-icon-default: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2024%2024%22%3E%0A%3Cpath%20fill%3D%22black%22%20d%3D%22M2%2012l6-5%206%205v10H2V12z%22%2F%3E%0A%3Ccircle%20fill%3D%22black%22%20cx%3D%2219%22%20cy%3D%2210.5%22%20r%3D%223.2%22%2F%3E%0A%3Crect%20fill%3D%22black%22%20x%3D%2218.4%22%20y%3D%2213.7%22%20width%3D%221.2%22%20height%3D%228.3%22%20rx%3D%220.6%22%2F%3E%0A%3C%2Fsvg%3E");

  --town-icon-jincheng: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%22-10%20-10%20120%20120%22%3E%3Cpath%20fill%3D%22black%22%20d%3D%22M%2066.2%2C4.7%20L%2067.0%2C6.3%20L%2063.2%2C8.5%20L%2060.8%2C7.2%20L%2062.3%2C10.7%20L%2060.6%2C13.9%20L%2062.7%2C15.9%20L%2061.1%2C17.8%20L%2057.7%2C12.9%20L%2058.5%2C10.0%20L%2056.5%2C12.0%20L%2044.7%2C11.0%20L%2044.6%2C23.7%20L%2047.3%2C31.4%20L%2043.8%2C33.8%20L%2039.2%2C33.0%20L%2033.8%2C36.8%20L%2035.8%2C41.1%20L%2030.0%2C50.4%20L%2024.4%2C54.2%20L%2020.7%2C53.8%20L%2016.6%2C49.6%20L%2014.0%2C51.0%20L%206.3%2C50.1%20L%202.0%2C52.8%20L%205.4%2C57.5%20L%2016.8%2C64.9%20L%2019.4%2C70.0%20L%2025.3%2C73.7%20L%2027.3%2C76.7%20L%2026.6%2C79.1%20L%2038.1%2C80.0%20L%2045.1%2C87.5%20L%2050.1%2C88.1%20L%2058.0%2C91.9%20L%2060.0%2C94.8%20L%2064.3%2C95.3%20L%2075.2%2C90.0%20L%2079.9%2C80.6%20L%2082.7%2C69.5%20L%2091.0%2C58.0%20L%2091.8%2C52.7%20L%2085.0%2C48.4%20L%2083.6%2C49.7%20L%2082.2%2C47.8%20L%2078.1%2C47.5%20L%2078.4%2C45.2%20L%2073.8%2C45.9%20L%2069.0%2C42.7%20L%2073.1%2C21.6%20L%2070.1%2C20.4%20L%2070.8%2C11.2%20L%2068.4%2C9.0%20L%2070.0%2C6.9%20Z%22%2F%3E%3C%2Fsvg%3E");

  --town-icon-jinning: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%20100%20100%22%3E%3Cpath%20fill%3D%22black%22%20d%3D%22M%2029.1%2C2.0%20L%2027.7%2C5.5%20L%2022.1%2C6.0%20L%2015.6%2C13.2%20L%207.5%2C16.5%20L%203.0%2C27.6%20L%2015.1%2C34.7%20L%2012.6%2C26.5%20L%2027.4%2C24.3%20L%2027.9%2C31.1%20L%2020.3%2C33.2%20L%2018.3%2C41.3%20L%2018.5%2C46.3%20L%2025.9%2C62.1%20L%2038.1%2C64.5%20L%2042.5%2C59.0%20L%2045.2%2C59.8%20L%2048.3%2C69.6%20L%2047.1%2C73.3%20L%2048.9%2C73.9%20L%2045.5%2C76.5%20L%2048.6%2C77.7%20L%2046.0%2C87.2%20L%2051.2%2C93.6%20L%2056.3%2C93.9%20L%2055.6%2C97.9%20L%2061.6%2C95.6%20L%2063.6%2C98.0%20L%2073.4%2C87.8%20L%2093.6%2C76.7%20L%2088.7%2C73.4%20L%2090.7%2C71.6%20L%2087.8%2C66.2%20L%2089.9%2C64.8%20L%2087.3%2C63.9%20L%2086.6%2C59.8%20L%2089.5%2C58.1%20L%2087.1%2C57.8%20L%2087.2%2C54.4%20L%2090.4%2C53.9%20L%2087.9%2C50.1%20L%2090.3%2C49.6%20L%2091.5%2C42.7%20L%2094.8%2C43.2%20L%2097.0%2C40.4%20L%2065.9%2C30.6%20L%2037.1%2C5.7%20Z%22%2F%3E%3C%2Fsvg%3E");

  --town-icon-jinhu: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%22-10%20-10%20120%20120%22%3E%3Cpath%20fill%3D%22black%22%20d%3D%22M%2054.6%2C21.0%20L%2040.7%2C30.0%20L%2034.8%2C27.9%20L%2031.9%2C30.7%20L%2022.5%2C30.3%20L%2017.4%2C24.4%20L%2012.3%2C29.0%20L%206.5%2C28.7%20L%206.3%2C34.8%20L%202.0%2C38.0%20L%202.0%2C49.4%20L%204.0%2C52.7%20L%202.4%2C54.6%20L%204.5%2C54.8%20L%202.0%2C60.6%20L%2030.9%2C52.3%20L%2038.0%2C54.1%20L%2042.8%2C57.9%20L%2044.8%2C57.1%20L%2046.8%2C60.6%20L%2058.6%2C62.6%20L%2062.6%2C61.7%20L%2062.3%2C53.7%20L%2068.6%2C56.4%20L%2064.5%2C61.0%20L%2071.1%2C58.1%20L%2064.5%2C64.8%20L%2060.0%2C63.2%20L%2064.8%2C72.5%20L%2062.8%2C79.0%20L%2079.9%2C72.5%20L%2083.2%2C63.1%20L%2087.5%2C63.6%20L%2091.6%2C60.1%20L%2087.7%2C52.3%20L%2091.4%2C47.7%20L%2095.1%2C49.4%20L%2097.7%2C48.1%20L%2096.0%2C44.4%20L%2098.0%2C40.3%20L%2082.4%2C40.6%20L%2071.2%2C31.0%20L%2072.0%2C27.2%20L%2066.1%2C24.2%20L%2056.3%2C23.5%20Z%22%2F%3E%3C%2Fsvg%3E");

  --town-icon-jinsha: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%20100%20100%22%3E%3Cpath%20fill%3D%22black%22%20d%3D%22M%2044.6%2C5.9%20L%2041.1%2C10.2%20L%2036.8%2C8.8%20L%2039.1%2C15.2%20L%2037.5%2C18.1%20L%2019.5%2C25.8%20L%2021.1%2C30.1%20L%2029.5%2C30.7%20L%2025.7%2C31.9%20L%2028.4%2C39.7%20L%2024.0%2C41.2%20L%2019.5%2C37.2%20L%2021.5%2C46.5%20L%2014.0%2C51.7%20L%2013.4%2C54.8%20L%205.9%2C54.3%20L%2011.8%2C60.0%20L%2012.9%2C65.8%20L%2011.2%2C71.3%20L%204.3%2C74.3%20L%202.0%2C77.4%20L%206.4%2C74.7%20L%206.5%2C77.1%20L%2012.5%2C80.9%20L%2015.9%2C79.4%20L%2019.8%2C81.8%20L%2024.6%2C78.2%20L%2034.6%2C79.2%20L%2047.1%2C70.8%20L%2051.1%2C74.3%20L%2058.2%2C72.8%20L%2061.5%2C77.5%20L%2062.9%2C72.8%20L%2067.0%2C78.9%20L%2063.7%2C82.5%20L%2067.1%2C83.5%20L%2068.6%2C81.5%20L%2072.5%2C85.9%20L%2066.0%2C89.0%20L%2066.9%2C90.2%20L%2074.4%2C87.7%20L%2081.4%2C92.0%20L%2093.6%2C92.0%20L%2096.7%2C94.1%20L%2098.0%2C89.8%20L%2092.6%2C89.6%20L%2087.9%2C83.7%20L%2086.9%2C74.8%20L%2086.5%2C63.8%20L%2094.5%2C59.0%20L%2092.4%2C56.7%20L%2087.0%2C58.5%20L%2082.7%2C54.8%20L%2078.1%2C42.1%20L%2074.4%2C38.5%20L%2074.7%2C27.5%20L%2058.4%2C26.9%20L%2051.5%2C11.2%20L%2053.1%2C8.1%20Z%22%2F%3E%3C%2Fsvg%3E");

  --town-icon-lieyu:    url("data:image/svg+xml,%3Csvg%20xmlns=%22http://www.w3.org/2000/svg%22%20viewBox=%220%200%20100%20100%22%3E%3Cpath%20fill=%22black%22%20d=%22M91.6,26.5%20L85.3,24.8%20L72.5,15.0%20L68.1,10.8%20L66.0,11.2%20L64.6,10.3%20L59.7,10.3%20L57.2,11.7%20L57.4,15.4%20L55.8,16.7%20L52.0,16.7%20L49.5,15.6%20L46.7,16.4%20L43.7,15.7%20L37.8,17.5%20L34.8,20.4%20L35.0,22.1%20L33.7,26.4%20L33.3,37.7%20L31.8,47.0%20L30.3,50.7%20L24.9,53.3%20L19.2,53.6%20L16.6,55.1%20L16.4,56.6%20L19.9,66.0%20L20.4,69.3%20L20.1,71.9%20L18.9,72.9%20L17.2,72.9%20L14.5,76.6%20L11.9,78.2%20L10.4,78.4%20L8.0,77.4%20L8.9,79.4%20L11.9,82.0%20L16.6,81.5%20L22.8,82.6%20L25.1,85.0%20L25.9,87.9%20L28.6,89.7%20L34.9,80.4%20L37.6,77.9%20L43.1,74.5%20L47.4,73.3%20L51.9,74.0%20L53.1,75.1%20L52.5,77.7%20L52.9,78.7%20L59.8,74.5%20L61.8,71.3%20L59.6,69.9%20L59.6,66.0%20L61.9,62.0%20L65.6,59.1%20L68.9,58.9%20L69.0,57.5%20L71.3,56.7%20L72.8,58.1%20L78.4,58.2%20L78.7,57.5%20L76.8,57.6%20L75.8,57.0%20L76.4,56.1%20L79.9,56.9%20L79.2,58.1%20L81.3,58.5%20L81.6,60.8%20L84.5,61.1%20L85.2,60.5%20L85.6,57.7%20L92.0,57.4%20L91.6,56.9%20L86.1,56.7%20L85.0,55.5%20L86.3,51.9%20L88.2,50.2%20L86.2,42.4%20L87.2,40.6%20L90.7,37.9%20L91.1,35.7%20L90.7,32.7%20L89.6,34.1%20L88.5,34.1%20L87.9,33.2%20L88.9,29.7%20L90.6,29.8%20Z%22/%3E%3C/svg%3E");

  --town-icon-wuqiu:    url("data:image/svg+xml,%3Csvg%20xmlns=%22http://www.w3.org/2000/svg%22%20viewBox=%220%200%20100%20100%22%3E%3Cpath%20fill=%22black%22%20d=%22M8.6,26.1%20L8.0,28.1%20L9.6,32.3%20L9.5,37.1%20L14.0,45.6%20L17.5,48.2%20L18.3,49.7%20L22.7,51.6%20L24.4,53.1%20L24.4,53.7%20L25.4,53.5%20L31.1,57.4%20L31.4,59.7%20L30.2,60.3%20L30.2,60.8%20L31.2,61.6%20L31.5,63.7%20L33.6,64.7%20L34.1,63.5%20L35.4,63.4%20L36.5,64.0%20L36.2,65.2%20L37.3,65.8%20L40.6,64.5%20L45.1,65.5%20L46.2,61.0%20L46.2,58.7%20L43.5,58.2%20L42.7,56.4%20L43.5,56.0%20L46.4,56.0%20L46.9,51.0%20L46.4,49.0%20L44.9,48.1%20L43.6,46.1%20L43.3,44.4%20L41.5,42.3%20L39.8,38.9%20L37.5,37.4%20L36.4,38.7%20L35.6,38.2%20L35.9,37.1%20L33.5,36.0%20L33.0,38.2%20L30.7,40.0%20L29.8,39.7%20L28.2,37.7%20L28.2,36.0%20L29.6,34.2%20L23.3,31.0%20L21.4,27.8%20L19.6,26.6%20L18.5,24.5%20L17.2,23.7%20L11.9,24.5%20Z%22/%3E%3Cpath%20fill=%22black%22%20d=%22M58.0,67.6%20L58.1,69.0%20L59.9,70.3%20L61.2,70.6%20L61.5,72.2%20L63.0,73.1%20L63.9,74.2%20L64.6,74.0%20L65.2,73.2%20L65.4,71.9%20L66.5,71.1%20L69.1,72.1%20L69.1,70.6%20L70.9,69.7%20L71.4,70.0%20L72.3,69.7%20L73.3,68.4%20L73.3,67.6%20L74.1,67.1%20L75.9,68.5%20L77.3,68.2%20L78.8,69.0%20L79.1,70.0%20L78.6,70.6%20L79.6,71.1%20L79.7,72.4%20L83.1,74.2%20L85.6,74.0%20L88.1,76.3%20L88.8,76.1%20L88.9,75.2%20L89.7,74.7%20L91.5,75.5%20L92.0,75.2%20L91.8,73.7%20L90.5,72.6%20L90.4,69.7%20L89.6,69.8%20L88.3,69.2%20L86.8,67.4%20L86.5,66.0%20L85.7,65.5%20L85.9,64.5%20L87.0,63.9%20L88.5,63.7%20L88.6,62.7%20L85.9,61.9%20L84.4,62.6%20L82.3,62.4%20L81.7,62.9%20L81.8,66.0%20L80.9,67.1%20L79.6,67.7%20L78.6,67.4%20L76.8,65.2%20L77.2,63.4%20L78.0,62.7%20L77.7,61.4%20L78.5,59.7%20L78.1,58.1%20L77.5,57.3%20L76.2,56.8%20L74.6,55.0%20L73.9,55.2%20L73.8,56.3%20L70.4,57.1%20L68.5,58.4%20L68.1,61.1%20L68.8,61.8%20L69.1,63.1%20L67.3,64.0%20L65.1,62.9%20L63.5,63.1%20L61.9,61.4%20L60.7,61.1%20Z%22/%3E%3C/svg%3E");
}

/* === 鄉鎮長 / 鄉鎮民代表：依各鄉鎮地圖輪廓顯示圖示 === */
.township-submenu .menu-button::after{
    content: "";
    order: 0;
    display: inline-flex;
    width: 52%;
    height: 52%;
    max-width: 86px;
    max-height: 86px;
    flex: 0 0 auto;

    background-color: var(--primary);
    opacity: 0.95;

    -webkit-mask-repeat: no-repeat;
    -webkit-mask-position: center;
    -webkit-mask-size: contain;
    mask-repeat: no-repeat;
    mask-position: center;
    mask-size: contain;

    -webkit-mask-image: var(--town-icon-default);
    mask-image: var(--town-icon-default);

    margin-bottom: 10px;

    transition: transform 0.2s ease, opacity 0.2s ease;
}

/* 讓鄉鎮子選單維持「圖示在上、文字在下」 */
.township-submenu .menu-text{ order: 1; }

.township-submenu .menu-button:hover::after{
    transform: translateY(-1px) scale(1.04);
    opacity: 1;
}
.township-submenu .menu-button:active::after{
    transform: translateY(0px) scale(0.98);
}

/* 依鄉鎮名稱套用不同輪廓 */
.township-submenu .menu-button[data-town="金城鎮"]::after{ -webkit-mask-image: var(--town-icon-jincheng); mask-image: var(--town-icon-jincheng); }
.township-submenu .menu-button[data-town="金寧鄉"]::after{ -webkit-mask-image: var(--town-icon-jinning);  mask-image: var(--town-icon-jinning);  }
.township-submenu .menu-button[data-town="金湖鎮"]::after{ -webkit-mask-image: var(--town-icon-jinhu);    mask-image: var(--town-icon-jinhu);    }
.township-submenu .menu-button[data-town="金沙鎮"]::after{ -webkit-mask-image: var(--town-icon-jinsha);   mask-image: var(--town-icon-jinsha);   }
.township-submenu .menu-button[data-town="烈嶼鄉"]::after{ -webkit-mask-image: var(--town-icon-lieyu);   mask-image: var(--town-icon-lieyu);   }
.township-submenu .menu-button[data-town="烏坵鄉"]::after{ -webkit-mask-image: var(--town-icon-wuqiu);   mask-image: var(--town-icon-wuqiu);   }

@media (max-width: 768px){
    .township-submenu .menu-button::after{
        width: 24px;
        height: 24px;
    }
}


/* === THEME:DARK:BEGIN === */
/* =========================================================
   Kelvin / SNW  現代艦橋風（CSS-only 視覺翻新）
   - 不改 HTML / 不改 JS / 不動功能
   - 保留得票率跨欄位背景長條（tr 的 background-size: var(--bar-width) 既有機制）
   ========================================================= */

/* ---- Theme tokens ---- */
:root[data-theme="dark"]{
  /* 主要色：偏青藍霓虹（艦橋 HUD 感） */
  --primary: #2DE2E6;            /* neon cyan */
  --secondary: #0B1220;          /* deep bridge */
  --bg: #060A12;                 /* space black */
  --card-bg: rgba(255,255,255,0.06);
  --text-main: rgba(255,255,255,0.92);
  --text-sub: rgba(255,255,255,0.68);
  --border: rgba(255,255,255,0.12);

  /* 額外 token（只做視覺） */
  --glass: rgba(255,255,255,0.06);
  --glass-strong: rgba(255,255,255,0.10);
  --glass-border: rgba(255,255,255,0.14);
  --shadow-1: 0 10px 28px rgba(0,0,0,0.45);
  --shadow-2: 0 16px 44px rgba(0,0,0,0.55);
  --glow: 0 0 0 1px rgba(45,226,230,0.18), 0 0 22px rgba(45,226,230,0.14);
  --radius-xl: 18px;
}

/* ---- Background: subtle nebula + grid ---- */
html[data-theme="dark"], html[data-theme="dark"] body{
  background: var(--bg);
  color: var(--text-main);
}

/* ---- Header: glass bridge bar + neon scanline ---- */
html[data-theme="dark"] header{
  background: rgba(11,18,32,0.72);
  border-bottom: 1px solid rgba(255,255,255,0.10);
  box-shadow: var(--shadow-1);
  backdrop-filter: blur(12px) saturate(140%);
  -webkit-backdrop-filter: blur(12px) saturate(140%);
}
html[data-theme="dark"] header::after{
  content:"";
  position:absolute;
  left:0; right:0; bottom:-1px;
  height: 2px;
  background: linear-gradient(90deg,
    rgba(45,226,230,0.00) 0%,
    rgba(45,226,230,0.55) 22%,
    rgba(120,92,255,0.40) 55%,
    rgba(255,74,141,0.42) 78%,
    rgba(255,74,141,0.00) 100%);
  filter: blur(0.2px);
  pointer-events:none;
}
html[data-theme="dark"] h1{ letter-spacing: 0px; }
html[data-theme="dark"] .site-logo{ color: rgba(255,255,255,0.95); }

/* ---- Sections ---- */
html[data-theme="dark"] .menu-section-title, html[data-theme="dark"] .section-title{ color: var(--text-main); }
html[data-theme="dark"] .section-header{
  border-bottom: 1px solid rgba(255,255,255,0.10);
}
html[data-theme="dark"] .section-badge{
  background: rgba(45,226,230,0.18);
  color: rgba(255,255,255,0.92);
  border: 1px solid rgba(45,226,230,0.22);
  box-shadow: var(--glow);
}

/* ---- Main menu buttons: modern bridge panels ---- */
html[data-theme="dark"] .menu-button{
  background:
    radial-gradient(120px 120px at 14% 50%, rgba(45,226,230,0.16) 0%, rgba(45,226,230,0.00) 65%),
    linear-gradient(180deg, rgba(255,255,255,0.08) 0%, rgba(255,255,255,0.04) 100%);
  border: 1px solid var(--glass-border);
  color: rgba(255,255,255,0.92);
  box-shadow: var(--shadow-1);
  border-radius: var(--radius-xl);
}
html[data-theme="dark"] .menu-button::before{
  background:
    radial-gradient(circle at 18% 18%, rgba(45,226,230,0.22) 0%, rgba(45,226,230,0.00) 55%),
    radial-gradient(circle at 86% 92%, rgba(120,92,255,0.18) 0%, rgba(120,92,255,0.00) 60%);
}
html[data-theme="dark"] .menu-icon{ color: var(--primary); }
html[data-theme="dark"] .menu-button:hover{
  border-color: rgba(45,226,230,0.36);
  box-shadow: var(--shadow-2), var(--glow);
}
html[data-theme="dark"] .menu-button:focus-visible{
  outline: 3px solid rgba(45,226,230,0.25);
}

/* ---- Cards: glass ---- */
html[data-theme="dark"] .card, html[data-theme="dark"] .summary-panel{
  background: var(--glass);
  border: 1px solid var(--glass-border);
  box-shadow: var(--shadow-1);
  border-radius: var(--radius-xl);
}
html[data-theme="dark"] .card.clickable:hover{
  border-color: rgba(45,226,230,0.36);
  box-shadow: var(--shadow-2), var(--glow);
}
html[data-theme="dark"] .card-title{
  color: var(--text-main);
  border-left-color: rgba(45,226,230,0.75);
}
/* 修正：暗色模式「投票概況」標題顏色（summary-panel h3 原本用 var(--secondary) 會變黑） */
html[data-theme="dark"] .summary-panel h3{
  color: var(--text-main);
}
html[data-theme="dark"] .card-stats, html[data-theme="dark"] .card-footer-info{ color: var(--text-sub); }
html[data-theme="dark"] .card-stats .rate{ color: #FF4A8D; }

/* ---- Breadcrumb: chips ---- */
html[data-theme="dark"] .breadcrumb{
  padding: 10px 0;
  color: var(--text-sub);
}
html[data-theme="dark"] .breadcrumb span{
  display: inline;
  padding: 0;
  margin: 0;
  border: 0;
  background: transparent;
  color: var(--primary);
  text-decoration: none;
}
html[data-theme="dark"] .breadcrumb span:hover{
  text-decoration: underline;
}
html[data-theme="dark"] .breadcrumb span.active{
  color: var(--text-main);
  text-decoration: none;
}

/* ---- Tables: bridge console ---- */
html[data-theme="dark"] .table-responsive{
  border-radius: var(--radius-xl);
  border: 1px solid rgba(255,255,255,0.10);
  background: rgba(255,255,255,0.04);
  box-shadow: var(--shadow-1);
}
html[data-theme="dark"] table{ color: var(--text-main); }
html[data-theme="dark"] th{
  background: rgba(255,255,255,0.06);
  color: rgba(255,255,255,0.74);
  border-bottom: 1px solid rgba(255,255,255,0.10);
}
html[data-theme="dark"] th:hover{ background: rgba(255,255,255,0.09); }
html[data-theme="dark"] td{ border-bottom: 1px solid rgba(255,255,255,0.08); }

/* 重要：不碰 tr 的 background-size / background-image（得票率長條機制留給原本 JS 設定） */
html[data-theme="dark"] tr:hover{ background-color: rgba(255,255,255,0.04); }

html[data-theme="dark"] .sort-icon.asc{ border-bottom-color: rgba(255,255,255,0.92); }
html[data-theme="dark"] .sort-icon.desc{ border-top-color: rgba(255,255,255,0.92); }

html[data-theme="dark"] .number-badge{
  background: rgba(255,255,255,0.08);
  color: rgba(255,255,255,0.82);
  border: 2px solid rgba(255,255,255,0.12);
  box-shadow: none; /* 不要光暈 */
}
html[data-theme="dark"] .number-badge.is-winner{
  color: #FF4A8D;
  border-color: currentColor;
  background: rgba(255,255,255,0.08); /* ✅ 當選者圓圈內部維持與未當選一致 */
  box-shadow: none; /* 不要光暈 */
}
html[data-theme="dark"] .party-badge{
  border: 1px solid rgba(255,255,255,0.12);
  background: rgba(255,255,255,0.10);
  color: rgba(255,255,255,0.88);
}
html[data-theme="dark"] .women-quota-badge{ box-shadow: 0 0 0 1px rgba(0,0,0,0.25); }
html[data-theme="dark"] .incumbent-badge{ box-shadow: 0 0 0 1px rgba(0,0,0,0.25); }

/* ---- Modal: stable & modern ---- */
html[data-theme="dark"] .modal-overlay{
  /* 覆蓋原本 display:none；用 visibility/opacity/pointer-events 控制，避免 active 被其他規則壓掉 */
  display: flex !important;
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  background: rgba(0,0,0,0.62);
  backdrop-filter: blur(10px) saturate(140%);
  -webkit-backdrop-filter: blur(10px) saturate(140%);
  z-index: 9999;
}
html[data-theme="dark"] .modal-overlay.active{
  opacity: 1;
  visibility: visible;
  pointer-events: auto;
}
html[data-theme="dark"] .modal-card{
  background: rgba(255,255,255,0.08);
  border: 1px solid rgba(255,255,255,0.14);
  border-radius: calc(var(--radius-xl) + 2px);
  box-shadow: var(--shadow-2);
  color: var(--text-main);
}
html[data-theme="dark"] .modal-close-btn{
  background: rgba(255,255,255,0.10);
  color: rgba(255,255,255,0.78);
  border: 1px solid rgba(255,255,255,0.12);
}
html[data-theme="dark"] .modal-close-btn:hover{
  background: rgba(255,255,255,0.14);
  color: rgba(255,255,255,0.92);
}
html[data-theme="dark"] .profile-header{ border-bottom-color: rgba(255,255,255,0.12); }
html[data-theme="dark"] .profile-photo{ border-color: rgba(255,255,255,0.14); background: rgba(255,255,255,0.06); }
html[data-theme="dark"] .profile-info h2{ color: rgba(255,255,255,0.92); }
html[data-theme="dark"] .profile-detail{ color: var(--text-sub); }
html[data-theme="dark"] .history-title{
  color: rgba(255,255,255,0.92);
  border-left-color: rgba(45,226,230,0.70);
}
html[data-theme="dark"] .history-item{ border-bottom-color: rgba(255,255,255,0.10); }
html[data-theme="dark"] .history-year-tag{ background: rgba(255,255,255,0.10); color: rgba(255,255,255,0.78); }
html[data-theme="dark"] .result-won{ color: #FF4A8D; }
html[data-theme="dark"] .result-lost{ color: rgba(255,255,255,0.60); }

/* 鎖背景捲動：只在 modal active 時（支援 :has 的瀏覽器） */
@supports selector(body:has(.modal-overlay.active)){
  html[data-theme="dark"] body:has(.modal-overlay.active){ overflow: hidden; }
  html[data-theme="dark"] body:not(:has(.modal-overlay.active)){ overflow: auto; }
}

/* ---- Footer ---- */
html[data-theme="dark"] footer{
  background: rgba(255,255,255,0.03);
  border-top: 1px solid rgba(255,255,255,0.10);
  color: rgba(255,255,255,0.60);
}

/* ---- Reduced motion ---- */
@media (prefers-reduced-motion: reduce){
  html[data-theme="dark"] header, html[data-theme="dark"] .menu-button, html[data-theme="dark"] .card, html[data-theme="dark"] .modal-card{
    transition: none !important;
    animation: none !important;
  }
}
/* === THEME:DARK:END === */

/* === THEME:LIGHT:BEGIN === */
/* =========================================================
   Light mode redesign (match Dark “modern bridge / glass”)
   - 保留亮色可讀性，但把「艦橋 HUD / 玻璃」語彙帶回來
   ========================================================= */

:root[data-theme="light"]{
  /* 主色：偏青藍（延續暗色 neon cyan 的語言，但更克制） */
  --primary: #1AA6B5;
  --secondary: #0B1220;
  --bg: #F4F7FB;
  --card-bg: rgba(255,255,255,0.70);
  --text-main: rgba(11,18,32,0.92);
  --text-sub: rgba(11,18,32,0.62);
  --border: rgba(11,18,32,0.14);

  /* 額外 token（只做視覺，與 dark 對齊命名） */
  --glass: rgba(255,255,255,0.70);
  --glass-strong: rgba(255,255,255,0.84);
  --glass-border: rgba(11,18,32,0.12);
  --shadow-1: 0 10px 26px rgba(11,18,32,0.08);
  --shadow-2: 0 18px 44px rgba(11,18,32,0.12);
  --glow: 0 0 0 1px rgba(26,166,181,0.14), 0 0 22px rgba(26,166,181,0.10);
  --radius-xl: 18px;
}

/* ---- Background: subtle “daytime nebula” ---- */
html[data-theme="light"], html[data-theme="light"] body{
  background: var(--bg);
  color: var(--text-main);
}

/* ---- Header: glass bridge bar + soft scanline ---- */
html[data-theme="light"] header{
  background: rgba(255,255,255,0.72);
  border-bottom: 1px solid rgba(11,18,32,0.10);
  box-shadow: var(--shadow-1);
  backdrop-filter: blur(12px) saturate(140%);
  -webkit-backdrop-filter: blur(12px) saturate(140%);
  color: var(--text-main);
}
html[data-theme="light"] header::after{
  content:"";
  position:absolute;
  left:0; right:0; bottom:-1px;
  height: 2px;
  background: linear-gradient(90deg,
    rgba(26,166,181,0.00) 0%,
    rgba(26,166,181,0.45) 22%,
    rgba(120,92,255,0.32) 55%,
    rgba(255,74,141,0.30) 78%,
    rgba(255,74,141,0.00) 100%);
  filter: blur(0.2px);
  pointer-events:none;
}
html[data-theme="light"] h1{ color: var(--text-main); }
html[data-theme="light"] .site-logo{ color: rgba(11,18,32,0.92); }


/* Header icons（顯示模式 / 候選人檢索）：避免 light mode 變成白色看不到 */
html[data-theme="light"] header .theme-toggle-btn,
html[data-theme="light"] header .cd-header-btn{
  color: rgba(11,18,32,0.88);
}
html[data-theme="light"] header .theme-toggle-btn svg,
html[data-theme="light"] header .cd-header-btn svg{
  fill: none;              /* ✅ 淺色模式：不要整塊塗黑 */
  stroke: currentColor;    /* 只保留線條 */
}
html[data-theme="light"] header .theme-toggle-btn:focus-visible,
html[data-theme="light"] header .cd-header-btn:focus-visible{
  outline: 3px solid rgba(26,166,181,0.28);
}

/* 淺色模式：月亮/太陽 icon 稍微加大一點 */
html[data-theme="light"] header .theme-toggle-btn svg{ width: 24px; height: 24px; }



/* ---- Sections ---- */
html[data-theme="light"] .menu-section-title,
html[data-theme="light"] .section-title{ color: var(--text-main); }
html[data-theme="light"] .section-header{ border-bottom: 1px solid rgba(11,18,32,0.12); }
html[data-theme="light"] .section-badge{
  background: rgba(26,166,181,0.14);
  color: rgba(11,18,32,0.88);
  border: 1px solid rgba(26,166,181,0.18);
  box-shadow: var(--glow);
}

/* ---- Main menu buttons: light bridge panels ---- */
html[data-theme="light"] .menu-button{
  background: rgba(255,255,255,0.78);
  border: 1px solid var(--glass-border);
  color: rgba(11,18,32,0.90);
  box-shadow: var(--shadow-1);
  border-radius: var(--radius-xl);
  backdrop-filter: blur(8px) saturate(140%);
  -webkit-backdrop-filter: blur(8px) saturate(140%);
}
html[data-theme="light"] .menu-button::before{
  background:
    radial-gradient(circle at 18% 18%, rgba(26,166,181,0.18) 0%, rgba(26,166,181,0.00) 55%),
    radial-gradient(circle at 86% 92%, rgba(120,92,255,0.12) 0%, rgba(120,92,255,0.00) 60%);
}
html[data-theme="light"] .menu-icon{ color: var(--primary); }
html[data-theme="light"] .menu-button:hover{
  border-color: rgba(26,166,181,0.40);
  box-shadow: var(--shadow-2), var(--glow);
}
html[data-theme="light"] .menu-button:focus-visible{ outline: 3px solid rgba(26,166,181,0.22); }

/* ---- Cards: glass ---- */
html[data-theme="light"] .card,
html[data-theme="light"] .summary-panel{
  background: var(--glass);
  border: 1px solid var(--glass-border);
  box-shadow: var(--shadow-1);
  border-radius: var(--radius-xl);
}
html[data-theme="light"] .card.clickable:hover{
  border-color: rgba(26,166,181,0.40);
  box-shadow: var(--shadow-2), var(--glow);
}
html[data-theme="light"] .card-title{
  color: var(--text-main);
  border-left-color: rgba(26,166,181,0.72);
}
html[data-theme="light"] .summary-panel h3{ color: var(--text-main); }
html[data-theme="light"] .card-stats,
html[data-theme="light"] .card-footer-info{ color: var(--text-sub); }

/* ---- Breadcrumb: plain text (light) ---- */
html[data-theme="light"] .breadcrumb{ padding: 10px 0; color: var(--text-sub); }
html[data-theme="light"] .breadcrumb span{
  cursor: pointer;
  color: var(--primary);
  font-weight: 600;
  padding: 0;
  margin: 0;
  border: 0;
  background: transparent;
  border-radius: 0;
  display: inline;
  text-decoration: none;
}
html[data-theme="light"] .breadcrumb span:hover{ text-decoration: underline; }
html[data-theme="light"] .breadcrumb span.active{ color: var(--text-main); cursor: default; text-decoration: none; }

/* ---- Tables: bridge console (light) ---- */
html[data-theme="light"] .table-responsive{
  border-radius: var(--radius-xl);
  border: 1px solid rgba(11,18,32,0.10);
  background: rgba(255,255,255,0.55);
  box-shadow: var(--shadow-1);
}
html[data-theme="light"] table{ color: var(--text-main); }
html[data-theme="light"] th{
  background: rgba(255,255,255,0.80);
  color: rgba(11,18,32,0.64);
  border-bottom: 1px solid rgba(11,18,32,0.10);
}
html[data-theme="light"] th:hover{ background: rgba(255,255,255,0.92); }
html[data-theme="light"] td{ border-bottom: 1px solid rgba(11,18,32,0.08); }
html[data-theme="light"] tr:hover{ background-color: rgba(11,18,32,0.03); }
html[data-theme="light"] .sort-icon.asc{ border-bottom-color: rgba(11,18,32,0.74); }
html[data-theme="light"] .sort-icon.desc{ border-top-color: rgba(11,18,32,0.74); }

html[data-theme="light"] .number-badge{
  /* ✅ 淺色模式：未當選維持灰色，不要泛光 */
  background: rgba(255,255,255,0.92);
  color: rgba(11,18,32,0.62);
  border: 2px solid rgba(11,18,32,0.18);
  box-shadow: none;
}
html[data-theme="light"] .number-badge.is-winner{
  color: #D95551;
  border-color: currentColor;
  background: rgba(255,255,255,0.92); /* ✅ 當選者圓圈內部維持與未當選一致 */
  box-shadow: none;
}

/* 公投主文（CSV A1）：獨立文字區塊（不與票數表格連在一起、不要文字框） */
.referendum-topic{
  width: 100%;
  box-sizing: border-box;
  margin: 12px 0 0;
  padding: 0;
  border: none;
  background: transparent;
  font-weight: 700;
  font-size: 16px;
  line-height: 1.85;
  color: var(--text-main);
  white-space: pre-line; /* 保留 CSV 內換行 */
}

/* ---- Modal ---- */
html[data-theme="light"] .modal-overlay{
  display: flex !important;
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  background: rgba(11,18,32,0.55);
  backdrop-filter: blur(10px) saturate(140%);
  -webkit-backdrop-filter: blur(10px) saturate(140%);
  z-index: 9999;
}
html[data-theme="light"] .modal-overlay.active{
  opacity: 1;
  visibility: visible;
  pointer-events: auto;
}
html[data-theme="light"] .modal-card{
  background: rgba(255,255,255,0.82);
  border: 1px solid rgba(11,18,32,0.12);
  border-radius: calc(var(--radius-xl) + 2px);
  box-shadow: var(--shadow-2);
  color: var(--text-main);
}
html[data-theme="light"] .modal-close-btn{
  background: rgba(255,255,255,0.82);
  color: rgba(11,18,32,0.62);
  border: 1px solid rgba(11,18,32,0.10);
}
html[data-theme="light"] .modal-close-btn:hover{
  background: rgba(255,255,255,0.92);
  color: rgba(11,18,32,0.82);
}
html[data-theme="light"] .profile-header{ border-bottom-color: rgba(11,18,32,0.10); }
html[data-theme="light"] .profile-photo{ border-color: rgba(11,18,32,0.12); background: rgba(11,18,32,0.03); }
html[data-theme="light"] .profile-info h2{ color: rgba(11,18,32,0.92); }
html[data-theme="light"] .profile-detail{ color: var(--text-sub); }
html[data-theme="light"] .history-title{ color: rgba(11,18,32,0.92); border-left-color: rgba(26,166,181,0.62); }
html[data-theme="light"] .history-item{ border-bottom-color: rgba(11,18,32,0.08); }
html[data-theme="light"] .history-year-tag{ background: rgba(11,18,32,0.06); color: rgba(11,18,32,0.66); }

/* ---- Footer ---- */
html[data-theme="light"] footer{
  background: rgba(255,255,255,0.40);
  border-top: 1px solid rgba(11,18,32,0.10);
  color: rgba(11,18,32,0.55);
}

/* ---- Reduced motion ---- */
@media (prefers-reduced-motion: reduce){
  html[data-theme="light"] header,
  html[data-theme="light"] .menu-button,
  html[data-theme="light"] .card,
  html[data-theme="light"] .modal-card{
    transition: none !important;
    animation: none !important;
  }
}

/* === THEME:LIGHT:END === */


@media (min-width: 1024px){
  .main-menu-grid.is-small-set{
    grid-template-columns: repeat(4, 1fr);
    max-width: 960px;
    margin-left: 0;      /* 向左對齊，與其他子分類一致 */
    margin-right: auto;
  }
}