/* Design System Tokens */
:root {
    --bg-color: #0A0E1A;
    --surface-color: rgba(255, 255, 255, 0.03);
    --surface-hover: rgba(255, 255, 255, 0.07);
    --border-color: rgba(255, 255, 255, 0.08);
    --primary-color: #6366F1;
    --primary-hover: #4F46E5;
    --primary-light: #A5B4FC;
    --kmt-color: #1E3A8A;
    --dpp-color: #065F46;
    --dpp-light: #10B981;
    --kmt-light: #3B82F6;
    
    /* Sentiment & Non-Camp Accent Colors (嚴格隔離藍綠陣營代表色) */
    --sentiment-positive: #FCD34D;
    --sentiment-neutral: #6B7280;
    --sentiment-negative: #EF4444;
    --accent-amber: #FDBA74;
    --accent-amber-bright: #FED7AA;
    --accent-gold: #FCD34D;
    --accent-violet: #C4B5FD;
    --accent-violet-bright: #DDD6FE;
    
    /* Text Colors */
    --text-primary: #F3F4F6;
    --text-secondary: #9CA3AF;
    --text-muted: #6B7280;
    
    /* Font */
    --font-family: 'Inter', 'Outfit', 'Noto Sans TC', sans-serif;
    
    /* Radius & Effects */
    --card-radius: 16px;
    --button-radius: 8px;
    --pill-radius: 9999px;
    --backdrop-blur: blur(12px);
    --shadow: 0 8px 32px 0 rgba(0, 0, 0, 0.37);
    --transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1);
}

/* Base Styles */
html, body {
    overflow-x: hidden;
}

body {
    background-color: var(--bg-color);
    background-image: 
        radial-gradient(at 0% 0%, rgba(99, 102, 241, 0.08) 0px, transparent 50%),
        radial-gradient(at 50% 0%, rgba(30, 58, 138, 0.12) 0px, transparent 50%),
        radial-gradient(at 100% 0%, rgba(6, 95, 70, 0.12) 0px, transparent 50%);
    background-attachment: fixed;
    color: var(--text-primary);
    font-family: var(--font-family);
    margin: 0;
    padding: 40px 20px;
    display: flex;
    justify-content: center;
    min-height: 100vh;
    box-sizing: border-box;
}

/* 全域防寡字與語意字句同行工具類別 (Anti-Orphan & Semantic Cohesion) */
.keep-together {
    display: inline-block;
    white-space: nowrap !important;
    word-break: keep-all !important;
    overflow-wrap: normal !important;
    flex-shrink: 0;
}

/* Base Hyperlinks & Dark Theme High Contrast Fallback (非藍綠陣營專屬暖橘琥珀色系，對比度 11.6:1) */
a {
    color: #FDBA74;
    text-decoration: underline;
    text-underline-offset: 2px;
    transition: var(--transition);
}

a:visited {
    color: #FED7AA;
}

a:hover {
    color: #FEF3C7;
}

a:focus-visible {
    outline: 2px solid #FDBA74;
    outline-offset: 2px;
}

/* Navigation Links & Action Chips (非藍綠陣營專屬高對比紫羅蘭色系，對比度 10.4:1) */
.social-nav-link {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 6px 14px;
    border-radius: var(--button-radius, 8px);
    background: rgba(139, 92, 246, 0.1);
    border: 1px solid rgba(196, 181, 253, 0.38);
    color: #C4B5FD !important;
    font-size: 0.88rem;
    font-weight: 600;
    text-decoration: none;
    cursor: pointer;
    transition: var(--transition);
    white-space: nowrap;
    line-height: 1.2;
}

.social-nav-link:visited {
    color: #C4B5FD !important;
}

.social-nav-link:hover {
    background: rgba(139, 92, 246, 0.22);
    border-color: rgba(221, 214, 254, 0.65);
    color: #DDD6FE !important;
    text-decoration: none;
}

.social-nav-link:focus-visible {
    outline: 2px solid #C4B5FD;
    outline-offset: 2px;
}

.social-nav-link[aria-disabled="true"] {
    opacity: 0.45;
    pointer-events: none;
    cursor: not-allowed;
    color: var(--text-muted) !important;
    border-color: rgba(255, 255, 255, 0.06);
}

.app-container {
    min-width: 0;
    width: 100%;
    max-width: 1200px;
    display: flex;
    flex-direction: column;
    gap: 24px;
}

/* Glassmorphism Panel base */
.glass-panel {
    width: 100%;
    box-sizing: border-box;
    min-width: 0;
    background: var(--surface-color);
    border: 1px solid var(--border-color);
    border-radius: var(--card-radius);
    backdrop-filter: var(--backdrop-blur);
    -webkit-backdrop-filter: var(--backdrop-blur);
    padding: 24px;
    box-shadow: var(--shadow);
    transition: var(--transition);
}

/* Header styling */
.header-panel {
    display: flex;
    justify-content: space-between;
    align-items: center;
    background: rgba(255, 255, 255, 0.02);
    flex-wrap: wrap;
    gap: 16px 24px;
}

.logo-area {
    display: flex;
    align-items: center;
    gap: 12px;
    min-width: 0;
    flex-shrink: 0;
}

.logo-area > div {
    min-width: 0;
}

.last-sync-time,
#debugText {
    overflow-wrap: anywhere;
    color: #FDBA74 !important;
    font-weight: 600;
}

.logo-emoji {
    font-size: 2rem;
    animation: rotateGlobe 20s linear infinite;
    flex-shrink: 0;
}

@keyframes rotateGlobe {
    from { transform: rotate(0deg); }
    to { transform: rotate(360deg); }
}

.header-panel h1 {
    margin: 0;
    font-size: 1.5rem;
    font-weight: 700;
    letter-spacing: 0.5px;
    background: linear-gradient(135deg, #FFF 40%, #A5B4FC 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    word-break: keep-all;
    overflow-wrap: normal;
}

/* War room overview */
.overview-panel {
    display: grid;
    grid-template-columns: minmax(0, 1.2fr) minmax(360px, 1fr);
    gap: 24px;
    align-items: center;
    background:
        linear-gradient(135deg, rgba(99, 102, 241, 0.08), rgba(6, 95, 70, 0.05)),
        var(--surface-color);
}

.overview-copy {
    min-width: 0;
}

.eyebrow {
    display: inline-flex;
    align-items: center;
    color: var(--primary-color);
    border: 1px solid rgba(99, 102, 241, 0.25);
    border-radius: var(--pill-radius);
    background: rgba(99, 102, 241, 0.08);
    padding: 4px 10px;
    font-size: 0.78rem;
    font-weight: 700;
    letter-spacing: 0.08em;
}

.overview-copy h2 {
    margin: 12px 0 8px;
    color: var(--text-primary);
    font-size: 1.35rem;
    line-height: 1.35;
}

.overview-copy p,
#overviewDataStatus {
    margin: 8px 0 10px;
    display: flex;
    flex-direction: column;
    gap: 4px;
    color: var(--text-secondary);
    font-size: 0.92rem;
    line-height: 1.7;
    overflow-wrap: anywhere;
}

.overview-data-status-line {
    display: flex;
    align-items: baseline;
    font-size: 0.88rem;
    line-height: 1.6;
}

.status-label-prefix {
    flex: 0 0 190px;
    color: var(--text-secondary);
    letter-spacing: 0.02em;
    white-space: nowrap;
}

.status-time-val {
    color: #FDBA74;
    font-family: 'Outfit', 'Noto Sans TC', sans-serif;
    font-weight: 600;
    letter-spacing: 0.02em;
    white-space: nowrap;
}

.overview-stats {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 12px;
}

.overview-stat {
    min-width: 0;
    border: 1px solid var(--border-color);
    border-radius: 12px;
    background: rgba(255, 255, 255, 0.025);
    padding: 14px;
}

.overview-stat .stat-label {
    display: block;
    color: var(--text-muted);
    font-size: 0.78rem;
    margin-bottom: 8px;
}

.overview-stat strong {
    display: block;
    color: var(--text-primary);
    font-family: 'Outfit', 'Noto Sans TC', sans-serif;
    font-size: 1.35rem;
    line-height: 1.1;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.overview-stat .stat-helper,
.overview-stat .stat-rule {
    display: block;
    margin-top: 8px;
    color: var(--text-secondary);
    font-size: 0.76rem;
    line-height: 1.45;
}

.overview-stat .stat-rule {
    color: var(--text-muted);
}

.overview-stat.attention strong {
    color: var(--sentiment-negative);
}

.clickable-stat {
    cursor: pointer;
    text-decoration: underline;
    text-decoration-thickness: 1px;
    text-underline-offset: 4px;
}

.clickable-stat:focus-visible {
    outline: 2px solid var(--primary-color);
    outline-offset: 4px;
    border-radius: 6px;
}

.overview-stat.attention {
    grid-column: 1 / -1;
    border-color: rgba(239, 68, 68, 0.24);
    background: rgba(239, 68, 68, 0.045);
}

.risk-chip,
.panel-action {
    border: 1px solid rgba(255, 255, 255, 0.12);
    border-radius: 8px;
    color: var(--text-primary);
    cursor: pointer;
    font: inherit;
    transition: var(--transition);
}

.risk-chip {
    margin: 0 4px 4px 0;
    padding: 3px 8px;
    font-size: 0.75rem;
    line-height: 1.3;
    background: rgba(255, 255, 255, 0.04);
}

.risk-chip:hover,
.risk-chip:focus-visible,
.panel-action:hover,
.panel-action:focus-visible {
    border-color: rgba(255, 255, 255, 0.26);
    transform: translateY(-1px);
}

.risk-red {
    background: rgba(239, 68, 68, 0.16);
    color: #FCA5A5;
}

.risk-orange {
    background: rgba(249, 115, 22, 0.16);
    color: #FDBA74;
}

.risk-yellow {
    background: rgba(234, 179, 8, 0.15);
    color: #FDE68A;
}

.risk-green {
    background: rgba(168, 85, 247, 0.16);
    color: #DDD6FE;
}

.risk-ratio {
    color: var(--text-secondary);
    white-space: nowrap;
}

.panel-action {
    margin-left: 10px;
    padding: 5px 10px;
    background: rgba(99, 102, 241, 0.14);
    color: #C7D2FE;
    font-size: 0.76rem;
    vertical-align: middle;
}

.overview-stat.status strong {
    color: var(--primary-color);
    font-size: 1rem;
    line-height: 1.35;
}

/* Controls Dropdown */
.controls {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 10px 14px;
}

.select-label {
    color: var(--text-secondary);
    font-size: 0.9rem;
    white-space: nowrap !important;
    word-break: keep-all !important;
    flex-shrink: 0;
}

.controls select {
    background: rgba(10, 14, 26, 0.6);
    border: 1px solid var(--border-color);
    border-radius: var(--button-radius);
    color: var(--text-primary);
    padding: 8px 16px;
    font-size: 0.9rem;
    outline: none;
    cursor: pointer;
    font-family: var(--font-family);
    transition: var(--transition);
    white-space: nowrap;
    word-break: keep-all;
    flex-shrink: 0;
}

.controls select:hover {
    border-color: var(--primary-color);
    background: rgba(10, 14, 26, 0.8);
    box-shadow: 0 0 10px rgba(99, 102, 241, 0.2);
}

/* 控制區主按鈕與強制更新按鈕 */
.btn-primary,
#syncBtn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: linear-gradient(135deg, #4F46E5 0%, #6366F1 100%);
    color: #FFFFFF !important;
    border: 1px solid rgba(165, 180, 252, 0.4);
    border-radius: var(--button-radius, 8px);
    padding: 6px 14px;
    font-size: 0.88rem;
    font-weight: 600;
    font-family: var(--font-family);
    cursor: pointer;
    white-space: nowrap !important;
    word-break: keep-all !important;
    flex-shrink: 0;
    transition: var(--transition, all 0.2s ease);
    box-shadow: 0 2px 6px rgba(79, 70, 229, 0.3);
    text-shadow: 0 1px 2px rgba(0, 0, 0, 0.5);
    line-height: 1.2;
}

.btn-primary:hover,
#syncBtn:hover {
    background: linear-gradient(135deg, #4338CA 0%, #4F46E5 100%);
    border-color: rgba(199, 210, 254, 0.7);
    box-shadow: 0 0 12px rgba(99, 102, 241, 0.5);
    transform: translateY(-1px);
}

.btn-primary:active,
#syncBtn:active {
    transform: translateY(0);
}

/* Comparison Grid (PK Card Setup) */
.pk-grid {
    display: grid;
    grid-template-columns: 1fr auto 1fr;
    align-items: center;
    gap: 24px;
}

.candidate-card {
    position: relative;
    text-align: center;
    overflow: hidden;
    padding-top: 36px;
}

.party-tag {
    position: absolute;
    top: 12px;
    left: 16px;
    font-size: 0.75rem;
    font-weight: 700;
    padding: 2px 8px;
    border-radius: var(--pill-radius);
    letter-spacing: 0.5px;
}

.tag-dpp {
    background: rgba(16, 185, 129, 0.15);
    color: var(--dpp-light);
    border: 1px solid rgba(16, 185, 129, 0.3);
}

.tag-kmt {
    background: rgba(59, 130, 246, 0.15);
    color: var(--kmt-light);
    border: 1px solid rgba(59, 130, 246, 0.3);
}

.avatar {
    width: 68px;
    height: 68px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 0 auto 16px;
    font-weight: 700;
    font-size: 1.2rem;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.3);
    border: 2px solid rgba(255, 255, 255, 0.1);
}

.avatar-dpp {
    background: linear-gradient(135deg, var(--dpp-color) 0%, #047857 100%);
    box-shadow: 0 0 15px rgba(16, 185, 129, 0.2);
}

.avatar-kmt {
    background: linear-gradient(135deg, var(--kmt-color) 0%, #1D4ED8 100%);
    box-shadow: 0 0 15px rgba(59, 130, 246, 0.2);
}

.candidate-card h2 {
    margin: 0 0 20px;
    font-size: 1.6rem;
    font-weight: 600;
    letter-spacing: 1px;
}

.card-dpp {
    border-top: 4px solid var(--dpp-light);
}

.card-dpp:hover {
    border-color: var(--dpp-light);
    box-shadow: 0 0 25px rgba(16, 185, 129, 0.15), var(--shadow);
    transform: translateY(-4px);
    background: var(--surface-hover);
}

.card-kmt {
    border-top: 4px solid var(--kmt-light);
}

.card-kmt:hover {
    border-color: var(--kmt-light);
    box-shadow: 0 0 25px rgba(59, 130, 246, 0.15), var(--shadow);
    transform: translateY(-4px);
    background: var(--surface-hover);
}

/* VS Badge Component */
.vs-badge-container {
    display: flex;
    justify-content: center;
    align-items: center;
}

.vs-badge {
    font-size: 1.5rem;
    font-weight: 800;
    color: #FFF;
    background: linear-gradient(135deg, #818CF8 0%, var(--primary-color) 50%, #4F46E5 100%);
    width: 56px;
    height: 56px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow: 0 0 20px rgba(99, 102, 241, 0.4);
    border: 2px solid rgba(255, 255, 255, 0.15);
    user-select: none;
    z-index: 5;
}

/* Metrics Dashboard Cards */
.metrics-row {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 16px;
    margin-top: 24px;
}

.metric {
    background: rgba(255, 255, 255, 0.01);
    border: 1px solid rgba(255, 255, 255, 0.02);
    border-radius: 12px;
    padding: 12px 6px;
    transition: var(--transition);
}

.metric:hover {
    background: rgba(255, 255, 255, 0.05);
    border-color: rgba(255, 255, 255, 0.08);
}

.metric .label {
    display: block;
    color: var(--text-secondary);
    font-size: 0.8rem;
    margin-bottom: 6px;
}

.metric .value {
    font-size: 1.35rem;
    font-weight: 700;
    color: #FFF;
    transition: var(--transition);
}

.metric .value.clickable {
    cursor: pointer;
    color: var(--primary-color);
    text-decoration: underline dotted;
    text-underline-offset: 4px;
}

.metric .value.clickable:hover {
    color: #818CF8;
    text-shadow: 0 0 10px rgba(129, 140, 248, 0.4);
}

.news-breakdown-panel {
    display: flex;
    flex-direction: column;
    gap: 8px;
    margin-top: 14px;
}

.news-breakdown-row {
    display: grid;
    gap: 8px;
}

.news-breakdown-row-top {
    grid-template-columns: repeat(3, minmax(0, 1fr));
}

.news-breakdown-row-bottom {
    grid-template-columns: repeat(3, minmax(0, 1fr));
}

.news-breakdown-empty {
    grid-column: 1 / -1;
    color: var(--text-muted);
    font-size: 0.82rem;
}

.news-breakdown-item {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
    min-width: 0;
    min-height: 44px;
    border: 1px solid rgba(255, 255, 255, 0.06);
    border-radius: 8px;
    background: rgba(255, 255, 255, 0.025);
    padding: 8px 10px;
    text-align: left;
}

.news-breakdown-label {
    display: flex;
    flex-direction: column;
    min-width: 0;
    color: var(--text-secondary);
    font-size: 0.74rem;
    line-height: 1.2;
}

.news-breakdown-label small {
    margin-top: 2px;
    color: var(--text-muted);
    font-size: 0.68rem;
    line-height: 1.2;
    white-space: nowrap;
}

.news-breakdown-item strong {
    display: block;
    color: #FFF;
    font-size: 1rem;
    line-height: 1.2;
    margin-top: 0;
    white-space: nowrap;
}

.news-sync-delta {
    display: none;
}

.news-breakdown-button {
    width: 100%;
    appearance: none;
    cursor: pointer;
    font: inherit;
    transition: var(--transition);
}

.news-breakdown-button:hover,
.news-breakdown-button:focus-visible {
    border-color: rgba(99, 102, 241, 0.45);
    background: rgba(99, 102, 241, 0.10);
    outline: none;
}

.news-breakdown-button:disabled {
    cursor: default;
    opacity: 0.62;
}

.news-breakdown-button:disabled:hover {
    border-color: rgba(255, 255, 255, 0.06);
    background: rgba(255, 255, 255, 0.025);
}

.news-latest-sync-button {
    display: flex;
    flex-direction: column;
    align-items: stretch;
    justify-content: center;
    gap: 5px;
    min-height: 72px;
}

.news-latest-sync-header {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 8px;
    min-width: 0;
}

.news-latest-sync-copy {
    gap: 3px;
    min-width: 0;
}

.news-latest-sync-title {
    color: var(--text-secondary);
    font-size: 0.74rem;
    line-height: 1.1;
}

.news-latest-sync-row {
    display: grid;
    grid-template-columns: 32px minmax(0, 1fr);
    align-items: baseline;
    gap: 4px;
    color: var(--text-muted);
    font-size: 0.68rem;
    line-height: 1.2;
    min-width: 0;
}

.news-latest-sync-row > span {
    color: var(--text-muted);
}

.news-latest-sync-row time {
    display: flex;
    flex-wrap: wrap;
    gap: 0 4px;
    min-width: 0;
    color: var(--text-secondary);
    font-variant-numeric: tabular-nums;
    white-space: normal;
}

.sync-time-date,
.sync-time-clock {
    white-space: nowrap;
}

.news-latest-sync-button strong {
    align-self: center;
    flex: 0 0 auto;
    color: #C7D2FE;
    font-size: 1.05rem;
    text-align: right;
}

.candidate-event-breakdown {
    margin-top: 14px;
    border-top: 1px solid rgba(255, 255, 255, 0.06);
    padding-top: 12px;
}

.candidate-event-title {
    color: var(--text-secondary);
    font-size: 0.78rem;
    font-weight: 700;
    margin-bottom: 8px;
}

.candidate-event-chips {
    display: grid;
    grid-template-columns: repeat(5, minmax(0, 1fr));
    gap: 8px;
}

.event-chip {
    min-width: 0;
    border: 1px solid rgba(255, 255, 255, 0.08);
    border-radius: var(--button-radius);
    background: rgba(255, 255, 255, 0.025);
    color: var(--text-primary);
    cursor: pointer;
    font: inherit;
    font-size: 0.78rem;
    font-weight: 700;
    padding: 7px 6px;
    transition: var(--transition);
}

.event-chip:hover,
.event-chip:focus-visible {
    background: rgba(255, 255, 255, 0.075);
    border-color: rgba(255, 255, 255, 0.18);
    outline: none;
}

.metric-explain-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
    gap: 10px;
    margin: 14px 0;
}

.metric-explain-item {
    border: 1px solid rgba(255, 255, 255, 0.08);
    border-radius: 8px;
    background: rgba(255, 255, 255, 0.03);
    padding: 10px;
}

.metric-explain-item span,
.metric-explain-item small {
    display: block;
    color: var(--text-secondary);
    font-size: 0.78rem;
    line-height: 1.45;
}

.metric-explain-item strong {
    display: block;
    color: #FFF;
    font-size: 1.05rem;
    line-height: 1.35;
    margin: 4px 0;
}

/* Anomalies Section (Diagnostics) */
.anomaly-panel h3 {
    margin: 0 0 16px;
    font-size: 1.15rem;
    font-weight: 600;
    color: #FFF;
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 8px;
}

.anomaly-range {
    color: var(--text-secondary);
    border: 1px solid var(--border-color);
    border-radius: var(--pill-radius);
    background: rgba(255, 255, 255, 0.03);
    padding: 4px 10px;
    font-size: 0.8rem;
    font-weight: 500;
}

.anomaly-range-baseline {
    color: var(--primary-light);
    border-color: rgba(99, 102, 241, 0.35);
    background: rgba(99, 102, 241, 0.12);
}

.anomaly-baseline-control {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    color: var(--primary-light);
    border: 1px solid rgba(99, 102, 241, 0.35);
    border-radius: var(--pill-radius);
    background: rgba(99, 102, 241, 0.12);
    padding: 4px 6px 4px 10px;
    font-size: 0.78rem;
    font-weight: 600;
    line-height: 1.2;
}

.anomaly-baseline-control select {
    min-width: 88px;
    min-height: 28px;
    color: var(--text-primary);
    background: rgba(10, 14, 26, 0.72);
    border: 1px solid rgba(255, 255, 255, 0.12);
    border-radius: var(--button-radius);
    padding: 3px 26px 3px 8px;
    font: inherit;
    cursor: pointer;
}

.anomaly-baseline-control select:hover,
.anomaly-baseline-control select:focus-visible {
    border-color: rgba(99, 102, 241, 0.65);
    outline: none;
}

.anomaly-note {
    margin: -6px 0 16px;
    color: var(--text-secondary);
    font-size: 0.88rem;
    line-height: 1.7;
}

.warning-pulse {
    animation: pulseWarning 1.5s infinite;
}

@keyframes pulseWarning {
    0% { transform: scale(1); opacity: 1; }
    50% { transform: scale(1.15); opacity: 0.7; }
    100% { transform: scale(1); opacity: 1; }
}

.anomaly-list {
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.loading-state {
    color: var(--text-secondary);
    font-size: 0.9rem;
    padding: 10px 0;
    text-align: center;
}

.anomaly-card {
    background: rgba(255, 255, 255, 0.02);
    border: 1px solid rgba(255, 255, 255, 0.06);
    border-radius: 12px;
    padding: 16px 20px;
    transition: var(--transition);
    position: relative;
    overflow: hidden;
}

.anomaly-card::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 4px;
    height: 100%;
}

.anomaly-card:hover {
    background: rgba(255, 255, 255, 0.04);
    border-color: rgba(255, 255, 255, 0.12);
    transform: translateY(-1px);
}

.anomaly-card-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 8px 12px;
    margin-bottom: 8px;
}

.anomaly-card-headline-group {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 6px 8px;
}

.anomaly-card strong,
.anomaly-card-headline {
    color: #F87171;
    font-size: 0.95rem;
    font-weight: 700;
    display: inline !important;
    margin: 0;
    line-height: 1.4;
}

.anomaly-card strong * {
    display: inline !important;
}

.anomaly-keep-together {
    display: inline !important;
    white-space: nowrap !important;
}

.anomaly-card .badge {
    display: inline-flex !important;
    align-items: center;
    width: auto !important;
    max-width: fit-content;
    vertical-align: middle;
}

.anomaly-headline-reason {
    font-size: 0.8rem;
    font-weight: 500;
    color: #FCD34D;
    background: rgba(245, 158, 11, 0.14);
    border: 1px solid rgba(251, 191, 36, 0.35);
    padding: 1px 7px;
    border-radius: 4px;
    display: inline-block;
}

.anomaly-topic-row {
    display: block;
    margin: 8px 0 10px;
    font-size: 0.88rem;
    line-height: 1.5;
    color: var(--text-primary);
}

.anomaly-topic-row * {
    display: inline !important;
}

.anomaly-topic-label {
    font-weight: 600;
    color: var(--text-secondary);
    margin-right: 4px;
    display: inline !important;
}

.anomaly-topic-link {
    color: var(--link-strong, #FDBA74);
    text-decoration: underline;
    text-underline-offset: 2px;
    display: inline !important;
}

.anomaly-topic-link:hover {
    color: #FED7AA;
}

.anomaly-media-source {
    color: var(--text-muted);
    font-size: 0.82rem;
    margin-left: 6px;
    display: inline-block !important;
    white-space: nowrap;
}

.anomaly-media-source * {
    display: inline !important;
}

.anomaly-event-summary {
    display: flex !important;
    align-items: center !important;
    flex-wrap: wrap !important;
    gap: 8px 10px !important;
    margin: 10px 0 8px !important;
}

.anomaly-event-metric {
    display: inline-flex !important;
    align-items: center !important;
    gap: 5px !important;
    background: rgba(255, 255, 255, 0.04);
    border: 1px solid rgba(255, 255, 255, 0.08);
    padding: 3px 10px;
    border-radius: 6px;
    font-size: 0.82rem;
    color: var(--text-secondary);
    white-space: nowrap !important;
    width: auto !important;
}

.anomaly-event-metric * {
    display: inline !important;
    white-space: nowrap !important;
}

.anomaly-event-metric.anomaly-event-total {
    border-color: rgba(99, 102, 241, 0.3);
    background: rgba(99, 102, 241, 0.08);
    color: var(--text-primary);
}

.anomaly-event-status {
    display: inline-flex !important;
    align-items: center !important;
    padding: 2px 8px;
    border-radius: 4px;
    font-size: 0.75rem;
    font-weight: 700;
    white-space: nowrap !important;
    width: auto !important;
}

.anomaly-event-status.is-active {
    background: rgba(239, 68, 68, 0.15);
    color: #FCA5A5;
    border: 1px solid rgba(239, 68, 68, 0.3);
}

.anomaly-event-status.is-cooled {
    background: rgba(139, 92, 246, 0.14);
    color: #C4B5FD;
    border: 1px solid rgba(196, 181, 253, 0.35);
}

.anomaly-event-daily {
    display: flex !important;
    align-items: center !important;
    flex-wrap: wrap !important;
    gap: 6px 8px !important;
    margin: 6px 0 !important;
    font-size: 0.82rem;
    color: var(--text-secondary);
    line-height: 1.5;
}

.anomaly-event-day {
    display: inline-flex !important;
    align-items: center !important;
    gap: 4px !important;
    background: rgba(255, 255, 255, 0.03);
    border: 1px solid rgba(255, 255, 255, 0.06);
    padding: 2px 7px;
    border-radius: 4px;
    white-space: nowrap !important;
    width: auto !important;
}

.anomaly-event-day * {
    display: inline !important;
    white-space: nowrap !important;
}

.anomaly-event-arrow {
    display: inline-block !important;
    color: var(--text-muted);
    font-size: 0.8rem;
    user-select: none;
    margin: 0 1px;
}

.anomaly-event-precedent {
    display: flex !important;
    align-items: center !important;
    flex-wrap: wrap !important;
    gap: 6px !important;
    margin: 6px 0 !important;
    font-size: 0.82rem;
    color: var(--text-secondary);
    line-height: 1.5;
}

.anomaly-event-precedent * {
    display: inline !important;
}

.anomaly-event-share {
    display: flex !important;
    align-items: center !important;
    flex-wrap: wrap !important;
    gap: 6px !important;
    margin: 6px 0 !important;
    font-size: 0.82rem;
    color: var(--text-secondary);
    line-height: 1.5;
}

.anomaly-event-share * {
    display: inline !important;
}

.anomaly-share-label {
    display: inline-flex !important;
    align-items: center !important;
    gap: 6px !important;
    flex-wrap: wrap !important;
}

.anomaly-share-label * {
    display: inline !important;
}

.anomaly-share-label-long {
    display: inline;
}

.anomaly-background-note,
.anomaly-search-note,
.anomaly-search-subnote,
.anomaly-news-line {
    display: block !important;
    margin-top: 6px;
    font-size: 0.8rem;
    color: var(--text-muted);
    line-height: 1.5;
}

.anomaly-background-note *,
.anomaly-search-note *,
.anomaly-search-subnote *,
.anomaly-news-line * {
    display: inline !important;
}

.anomaly-card span {
    display: inline;
}

.anomaly-card span a {
    text-decoration: none;
    font-weight: 500;
    transition: var(--transition);
}

.anomaly-card span a:hover {
    text-decoration: underline;
}

/* Clickable audit links & numbers (high contrast WCAG AAA, 非藍綠陣營專屬暖橘色系) */
.clickable-number,
.event-watchlist-audit-link,
.anomaly-evidence-link,
.anomaly-all-news-link {
    color: #FDBA74 !important;
    font-weight: 600;
    text-decoration: underline;
    text-underline-offset: 2px;
    cursor: pointer;
    transition: var(--transition);
}

.clickable-number:visited,
.event-watchlist-audit-link:visited,
.anomaly-evidence-link:visited,
.anomaly-all-news-link:visited {
    color: #FED7AA !important;
}

.clickable-number:hover,
.event-watchlist-audit-link:hover,
.anomaly-evidence-link:hover,
.anomaly-all-news-link:hover {
    color: #FEF3C7 !important;
    text-shadow: 0 0 8px rgba(251, 146, 60, 0.5);
}

.clickable-number:focus-visible,
.event-watchlist-audit-link:focus-visible,
.anomaly-evidence-link:focus-visible,
.anomaly-all-news-link:focus-visible {
    outline: 2px solid #FDBA74;
    outline-offset: 2px;
}


/* Event Calendar Review */
.event-calendar-panel {
    background:
        linear-gradient(135deg, rgba(99, 102, 241, 0.055), rgba(16, 185, 129, 0.035)),
        var(--surface-color);
}

.event-calendar-header {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(320px, auto);
    gap: 18px;
    align-items: start;
    margin-bottom: 16px;
}

.event-calendar-copy h3 {
    margin: 10px 0 6px;
    color: var(--text-primary);
    font-size: 1.15rem;
    line-height: 1.35;
}

.event-calendar-copy p {
    margin: 0;
    color: var(--text-secondary);
    font-size: 0.88rem;
    line-height: 1.65;
}

.event-calendar-controls {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    flex-wrap: wrap;
    gap: 10px;
}

.event-calendar-year-control {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    color: var(--text-secondary);
    font-size: 0.8rem;
    font-weight: 700;
}

.event-calendar-year-control select {
    min-height: 34px;
    color: var(--text-primary);
    background: rgba(10, 14, 26, 0.74);
    border: 1px solid rgba(255, 255, 255, 0.12);
    border-radius: var(--button-radius);
    padding: 4px 28px 4px 10px;
    font: inherit;
}

.event-calendar-source-tabs {
    display: inline-flex;
    flex-wrap: wrap;
    gap: 4px;
    padding: 4px;
    border: 1px solid rgba(255, 255, 255, 0.08);
    border-radius: 12px;
    background: rgba(255, 255, 255, 0.035);
}

.event-calendar-source {
    border: 0;
    border-radius: var(--button-radius);
    background: transparent;
    color: var(--text-secondary);
    cursor: pointer;
    font: inherit;
    font-size: 0.78rem;
    font-weight: 700;
    min-height: 30px;
    padding: 6px 10px;
    transition: var(--transition);
}

.event-calendar-source:hover,
.event-calendar-source:focus-visible,
.event-calendar-source.active {
    color: #FFF;
    background: rgba(99, 102, 241, 0.36);
    outline: none;
}

.event-calendar-months {
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.event-calendar-empty-state {
    border: 1px solid rgba(255, 255, 255, 0.07);
    border-radius: 12px;
    background: rgba(255, 255, 255, 0.025);
    color: var(--text-secondary);
    padding: 18px 20px;
    line-height: 1.7;
}

.event-calendar-empty-state strong {
    display: block;
    color: var(--text-primary);
    font-size: 0.96rem;
    margin-bottom: 6px;
}

.event-calendar-empty-state p {
    margin: 0;
    font-size: 0.86rem;
}

.event-calendar-month {
    border: 1px solid rgba(255, 255, 255, 0.07);
    border-radius: 12px;
    background: rgba(255, 255, 255, 0.022);
    overflow: hidden;
}

.event-calendar-month-summary {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(160px, auto);
    gap: 12px;
    align-items: center;
    padding: 14px 16px;
    border-bottom: 1px solid rgba(255, 255, 255, 0.055);
}

.event-calendar-month-summary h4 {
    margin: 0 0 5px;
    color: var(--text-primary);
    font-size: 0.98rem;
}

.event-calendar-month-summary p,
.event-calendar-month-count span {
    margin: 0;
    color: var(--text-secondary);
    font-size: 0.78rem;
    line-height: 1.45;
}

.event-calendar-month-count {
    text-align: right;
}

.event-calendar-month-count strong {
    display: block;
    color: #C7D2FE;
    font-size: 1.35rem;
    line-height: 1.1;
}

.event-calendar-events {
    display: flex;
    flex-direction: column;
}

.event-calendar-event {
    padding: 12px 16px;
    transition: var(--transition);
}

.event-calendar-event + .event-calendar-event {
    border-top: 1px solid rgba(255, 255, 255, 0.045);
}

.event-calendar-event:hover {
    background: rgba(255, 255, 255, 0.04);
}

.event-calendar-title {
    display: block;
    width: 100%;
    margin: 0 0 8px;
    padding: 0;
    border: 0;
    background: transparent;
    color: var(--text-primary);
    cursor: pointer;
    font: inherit;
    font-size: 0.9rem;
    font-weight: 700;
    line-height: 1.45;
    text-align: left;
}

.event-calendar-title:hover,
.event-calendar-title:focus-visible {
    color: var(--primary-color);
    outline: none;
}

@media (max-width: 760px) {
    .event-calendar-header,
    .event-calendar-month-summary {
        grid-template-columns: 1fr;
    }

    .event-calendar-controls {
        justify-content: flex-start;
    }

    .event-calendar-month-count {
        text-align: left;
    }
}
/* Chart System Layout */
.charts-grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: 24px;
}

.chart-container h3 {
    margin: 0 0 16px;
    font-size: 1.1rem;
    font-weight: 600;
    color: var(--text-primary);
}

.canvas-wrapper {
    position: relative;
    width: 100%;
    height: 280px;
}

/* E-3 Custom Symmetrical Legend (Candidate Rows) */
.sentiment-custom-legend {
    display: flex;
    flex-direction: column;
    gap: 8px;
    margin-bottom: 12px;
    padding: 10px 14px;
    border-radius: 10px;
    background: rgba(255, 255, 255, 0.02);
    border: 1px solid rgba(255, 255, 255, 0.08);
}

.sentiment-legend-row {
    display: flex;
    align-items: center;
    gap: 10px;
    flex-wrap: wrap;
}

.legend-candidate-title {
    font-size: 0.82rem;
    font-weight: 700;
    white-space: nowrap;
    min-width: 82px;
}

.legend-row-dpp .legend-candidate-title {
    color: #6EE7B7;
}

.legend-row-kmt .legend-candidate-title {
    color: #93C5FD;
}

.legend-chips-wrap {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    flex-wrap: wrap;
}

.legend-chip {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    border: 1px solid rgba(255, 255, 255, 0.12);
    border-radius: 6px;
    background: rgba(255, 255, 255, 0.035);
    color: #F3F4F6;
    font: inherit;
    font-size: 0.78rem;
    font-weight: 500;
    padding: 4px 10px;
    cursor: pointer;
    transition: var(--transition);
    user-select: none;
}

.legend-chip:hover,
.legend-chip:focus-visible {
    border-color: rgba(255, 255, 255, 0.28);
    background: rgba(255, 255, 255, 0.09);
    outline: none;
}

.legend-chip.is-hidden {
    opacity: 0.35;
    text-decoration: line-through;
    border-color: rgba(255, 255, 255, 0.05);
}

.legend-chip-color {
    display: inline-block;
    width: 10px;
    height: 10px;
    border-radius: 2px;
    flex-shrink: 0;
}

.legend-chip-color.legend-stripe-dpp {
    background: repeating-linear-gradient(
        45deg,
        #10B981,
        #10B981 3px,
        rgba(255, 255, 255, 0.7) 3px,
        rgba(255, 255, 255, 0.7) 5px
    ) !important;
    border: 1px solid rgba(255, 255, 255, 0.4);
}

.legend-chip-color.legend-stripe-kmt {
    background: repeating-linear-gradient(
        45deg,
        #3B82F6,
        #3B82F6 3px,
        rgba(255, 255, 255, 0.7) 3px,
        rgba(255, 255, 255, 0.7) 5px
    ) !important;
    border: 1px solid rgba(255, 255, 255, 0.4);
}

/* E-3 Symmetrical Sentiment Summary Pills (Vertical Symmetric Stack for Direct Comparison) */
#sentimentSummaryBadge {
    background: transparent !important;
    border: none !important;
    padding: 0 !important;
}

.sentiment-summary-pills {
    display: inline-flex;
    flex-direction: column;
    align-items: stretch;
    gap: 5px;
}

.sentiment-pill-group {
    display: inline-flex;
    align-items: center;
    gap: 12px;
    padding: 3px 12px;
    border-radius: var(--pill-radius);
    font-size: 0.78rem;
    white-space: nowrap;
    transition: var(--transition);
}

.sentiment-pill-group.pill-group-dpp {
    background: rgba(16, 185, 129, 0.12);
    border: 1px solid rgba(16, 185, 129, 0.35);
    color: #A7F3D0;
}

.sentiment-pill-group.pill-group-kmt {
    background: rgba(59, 130, 246, 0.12);
    border: 1px solid rgba(59, 130, 246, 0.35);
    color: #BFDBFE;
}

.sentiment-pill-group .pill-candidate-name {
    font-weight: 700;
    min-width: 68px;
}

.sentiment-pill-group .pill-stat {
    display: inline-flex;
    align-items: baseline;
    gap: 3px;
    min-width: 52px;
    color: var(--text-secondary);
}

.sentiment-pill-group .num-highlight {
    font-size: 0.95rem;
    font-weight: 700;
}

.sentiment-pill-group .pos-num {
    color: #FCD34D;
}

.sentiment-pill-group .pol-num {
    color: #C4B5FD;
}

.sentiment-pill-group .kmt-num {
    color: #93C5FD;
}

.sentiment-pill-group .dpp-num {
    color: #6EE7B7;
}

.sentiment-pill-group .neg-num {
    color: #FCA5A5;
}

/* Sidebar Audit Drawer (Smooth cubic transition & backdrop) */
.drawer {
    position: fixed;
    top: 0;
    right: 0;
    transform: translateX(105%);
    visibility: hidden;
    pointer-events: none;
    width: min(460px, 94vw);
    height: 100%;
    background: rgba(10, 14, 26, 0.94);
    border-left: 1px solid rgba(255, 255, 255, 0.08);
    box-shadow: -10px 0 40px rgba(0, 0, 0, 0.6);
    transition: transform 0.3s cubic-bezier(0.4, 0, 0.2, 1), visibility 0.3s;
    z-index: 1000;
    padding: 32px 24px;
    box-sizing: border-box;
    backdrop-filter: blur(24px);
    -webkit-backdrop-filter: blur(24px);
    display: flex;
    flex-direction: column;
}

.drawer.open {
    transform: translateX(0);
    visibility: visible;
    pointer-events: auto;
}

.drawer-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 24px;
    border-bottom: 1px solid rgba(255, 255, 255, 0.08);
    padding-bottom: 16px;
}

.drawer-header h3 {
    margin: 0;
    font-size: 1.15rem;
    font-weight: 600;
    color: #FFF;
    letter-spacing: 0.5px;
}

.btn-close {
    background: none;
    border: none;
    color: var(--text-secondary);
    font-size: 2.25rem;
    cursor: pointer;
    line-height: 1;
    transition: var(--transition);
    padding: 0 6px;
}

.btn-close:hover {
    color: #FFF;
    transform: scale(1.1);
}

.drawer-content {
    overflow-y: auto;
    flex: 1;
    padding-right: 4px;
}

.drawer-content::-webkit-scrollbar {
    width: 4px;
}

.drawer-content::-webkit-scrollbar-track {
    background: transparent;
}

.drawer-content::-webkit-scrollbar-thumb {
    background: rgba(255, 255, 255, 0.08);
    border-radius: 2px;
}

.drawer-content::-webkit-scrollbar-thumb:hover {
    background: rgba(255, 255, 255, 0.15);
}

.drawer-section-title {
    margin: 0 0 16px;
    font-size: 0.95rem;
    color: var(--text-primary);
    font-weight: 500;
}

/* News List in Audit Drawer */
.news-audit-item {
    background: rgba(255, 255, 255, 0.01);
    border: 1px solid rgba(255, 255, 255, 0.04);
    border-radius: 10px;
    padding: 14px 16px;
    margin-bottom: 12px;
    transition: var(--transition);
}

.news-audit-item:hover {
    background: rgba(255, 255, 255, 0.04);
    border-color: rgba(255, 255, 255, 0.08);
    transform: translateX(-2px);
}

.event-audit-item {
    background: rgba(255, 255, 255, 0.018);
    border: 1px solid rgba(255, 255, 255, 0.055);
    border-radius: 8px;
    padding: 14px 16px;
    margin-bottom: 12px;
    transition: var(--transition);
}

.event-audit-item:hover {
    background: rgba(255, 255, 255, 0.045);
    border-color: rgba(255, 255, 255, 0.1);
    transform: translateX(-2px);
}

.event-audit-title {
    display: block;
    width: 100%;
    margin: 0 0 8px;
    padding: 0;
    border: 0;
    background: transparent;
    color: var(--text-primary);
    cursor: pointer;
    font: inherit;
    font-size: 0.9rem;
    font-weight: 600;
    line-height: 1.4;
    text-align: left;
    word-break: auto-phrase;
    overflow-wrap: normal;
}

.event-title-phrase {
    display: inline-block;
    white-space: nowrap;
}

.event-audit-title:hover,
.event-audit-title:focus-visible {
    color: var(--primary-color);
    outline: none;
}

.event-card-header {
    display: flex;
    align-items: flex-start;
    gap: 8px;
    margin-bottom: 8px;
}

.event-rank-badge {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 30px;
    height: 22px;
    padding: 0 6px;
    border-radius: 6px;
    font-family: 'Outfit', sans-serif;
    font-size: 0.8rem;
    font-weight: 700;
    line-height: 1;
    color: #E2E8F0;
    background: rgba(255, 255, 255, 0.08);
    border: 1px solid rgba(255, 255, 255, 0.2);
    flex-shrink: 0;
    margin-top: 1px;
}

.event-rank-badge.event-rank-top.event-rank-1 {
    color: #FDE68A;
    background: rgba(245, 158, 11, 0.2);
    border: 1px solid rgba(245, 158, 11, 0.6);
    box-shadow: 0 0 8px rgba(245, 158, 11, 0.25);
}

.event-rank-badge.event-rank-top.event-rank-2 {
    color: #E2E8F0;
    background: rgba(148, 163, 184, 0.22);
    border: 1px solid rgba(203, 213, 225, 0.55);
    box-shadow: 0 0 8px rgba(148, 163, 184, 0.25);
}

.event-rank-badge.event-rank-top.event-rank-3 {
    color: #FDBA74;
    background: rgba(249, 115, 22, 0.2);
    border: 1px solid rgba(253, 186, 116, 0.55);
    box-shadow: 0 0 8px rgba(249, 115, 22, 0.25);
}

.event-item-count-highlight {
    color: var(--text-secondary);
    font-size: 0.82rem;
    font-weight: 500;
    white-space: nowrap;
}

.event-item-count-highlight .num-highlight {
    font-size: 1.05rem;
    font-weight: 700;
    color: #FFF;
    margin-right: 2px;
}

.event-card-time {
    color: var(--text-secondary);
    font-size: 0.78rem;
    margin-left: auto;
    white-space: nowrap;
}

.news-card-header {
    display: flex;
    align-items: flex-start;
    gap: 8px;
    margin-bottom: 6px;
}

.news-rank-badge {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 28px;
    height: 20px;
    padding: 0 5px;
    border-radius: 4px;
    font-family: 'Outfit', sans-serif;
    font-size: 0.74rem;
    font-weight: 700;
    color: #FDBA74;
    background: rgba(245, 158, 11, 0.14);
    border: 1px solid rgba(251, 146, 60, 0.35);
    flex-shrink: 0;
    margin-top: 2px;
}

.risk-dot {
    border-radius: 999px;
    padding: 2px 7px;
    font-size: 0.68rem;
    font-weight: 700;
    text-transform: uppercase;
}

.news-audit-item a {
    text-decoration: none;
    color: var(--text-primary);
    font-size: 0.9rem;
    font-weight: 500;
    line-height: 1.4;
    display: block;
    margin-bottom: 8px;
    transition: var(--transition);
}

.news-audit-item a:hover {
    color: var(--primary-color);
}

.news-meta-info {
    display: flex;
    align-items: center;
    gap: 8px;
    flex-wrap: wrap;
    font-size: 0.75rem;
    color: var(--text-secondary);
}

.media-tag {
    color: var(--text-secondary);
    background: rgba(255, 255, 255, 0.05);
    padding: 1px 6px;
    border-radius: 4px;
}

/* Badges styling */
.badge {
    display: inline-block;
    padding: 2px 8px;
    border-radius: var(--pill-radius);
    font-size: 0.7rem;
    font-weight: 500;
    line-height: 1;
}

.badge-positive {
    background: rgba(245, 158, 11, 0.16);
    color: #FCD34D;
    border: 1px solid rgba(251, 191, 36, 0.4);
}

.badge-neutral {
    background: rgba(107, 114, 128, 0.1);
    color: var(--sentiment-neutral);
    border: 1px solid rgba(107, 114, 128, 0.2);
}

.badge-negative {
    background: rgba(239, 68, 68, 0.1);
    color: var(--sentiment-negative);
    border: 1px solid rgba(239, 68, 68, 0.2);
}

.badge-attacked {
    background: rgba(249, 115, 22, 0.16);
    color: #FDBA74;
    border: 1px solid rgba(249, 115, 22, 0.4);
}

.badge-policy {
    background: rgba(168, 85, 247, 0.18);
    color: #C4B5FD;
    border: 1px solid rgba(196, 181, 253, 0.42);
}

.badge-kmt-attack {
    background: rgba(59, 130, 246, 0.2);
    color: #93C5FD;
    border: 1px solid rgba(59, 130, 246, 0.4);
    white-space: nowrap !important;
    word-break: keep-all !important;
    flex-shrink: 0;
}

.badge-dpp-attack {
    background: rgba(16, 185, 129, 0.2);
    color: #6EE7B7;
    border: 1px solid rgba(16, 185, 129, 0.4);
    white-space: nowrap !important;
    word-break: keep-all !important;
    flex-shrink: 0;
}

.badge-kmt-camp-attack {
    background: rgba(30, 58, 138, 0.35);
    color: #93C5FD;
    border: 1px solid rgba(96, 165, 250, 0.45);
    white-space: nowrap !important;
    word-break: keep-all !important;
    flex-shrink: 0;
}

.badge-dpp-camp-attack {
    background: rgba(6, 95, 70, 0.35);
    color: #6EE7B7;
    border: 1px solid rgba(52, 211, 153, 0.45);
    white-space: nowrap !important;
    word-break: keep-all !important;
    flex-shrink: 0;
}

.badge-slight-negative {
    background: rgba(245, 158, 11, 0.18);
    color: #FDE68A;
    border: 1px solid rgba(245, 158, 11, 0.45);
    white-space: nowrap !important;
    word-break: keep-all !important;
    flex-shrink: 0;
}

.badge-master {
    background: rgba(99, 102, 241, 0.1);
    color: #818CF8;
    border: 1px solid rgba(99, 102, 241, 0.2);
}

/* 候選人身分識別膠囊 (Candidate Badges) */
.badge-candidate-dpp {
    background: rgba(6, 95, 70, 0.35);
    color: #6EE7B7;
    border: 1px solid rgba(110, 231, 183, 0.45);
    border-radius: 12px;
    padding: 2px 9px;
    font-size: 0.8rem;
    font-weight: 700;
    white-space: nowrap;
    display: inline-flex;
    align-items: center;
    gap: 4px;
}

.badge-candidate-kmt {
    background: rgba(30, 58, 138, 0.35);
    color: #93C5FD;
    border: 1px solid rgba(147, 197, 253, 0.45);
    border-radius: 12px;
    padding: 2px 9px;
    font-size: 0.8rem;
    font-weight: 700;
    white-space: nowrap;
    display: inline-flex;
    align-items: center;
    gap: 4px;
}

/* 雙主體候選人複合標籤群組 */
.badge-candidate-group {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    padding: 2px 5px;
    border-radius: 14px;
    background: rgba(255, 255, 255, 0.03);
    border: 1px dashed rgba(255, 255, 255, 0.18);
}

.badge-candidate-dual-tag {
    display: inline-flex;
    align-items: center;
    padding: 1px 6px;
    border-radius: 8px;
    font-size: 0.72rem;
    font-weight: 700;
    color: #FCD34D;
    background: rgba(245, 158, 11, 0.16);
    border: 1px solid rgba(251, 191, 36, 0.38);
    letter-spacing: 0.02em;
    white-space: nowrap;
}

/* 已關聯雙方狀態膠囊 */
.badge-candidate-status-ready {
    display: inline-flex;
    align-items: center;
    gap: 3px;
    padding: 3px 8px;
    font-size: 0.76rem;
    font-weight: 700;
    line-height: 1.2;
    border-radius: 6px;
    background: rgba(245, 158, 11, 0.16);
    border: 1px solid rgba(251, 191, 36, 0.42);
    color: #FCD34D;
    white-space: nowrap;
    user-select: none;
}

/* 候選人主體管理微型操作按鈕組 */
.news-candidate-action-group {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    margin-left: auto;
    flex-wrap: wrap;
}

.btn-candidate-action {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    padding: 3px 8px;
    font-size: 0.76rem;
    font-weight: 600;
    line-height: 1.2;
    border-radius: 6px;
    cursor: pointer;
    background: rgba(255, 255, 255, 0.05);
    border: 1px solid rgba(255, 255, 255, 0.15);
    color: #E2E8F0;
    transition: all 0.18s ease-in-out;
    white-space: nowrap;
}

.btn-candidate-action:hover {
    background: rgba(255, 255, 255, 0.12);
    border-color: rgba(255, 255, 255, 0.3);
    color: #FFF;
}

.btn-candidate-copy {
    color: #C4B5FD;
    border-color: rgba(196, 181, 253, 0.35);
    background: rgba(139, 92, 246, 0.12);
}

.btn-candidate-copy:hover {
    background: rgba(139, 92, 246, 0.24);
    border-color: #C4B5FD;
    color: #FFF;
}

.btn-candidate-transfer {
    color: #CBD5E1;
    border-color: rgba(148, 163, 184, 0.25);
    background: rgba(148, 163, 184, 0.08);
}

.btn-candidate-transfer:hover {
    background: rgba(148, 163, 184, 0.2);
    border-color: rgba(203, 213, 225, 0.5);
    color: #FFF;
}

.btn-candidate-remove {
    color: #FCA5A5;
    border-color: rgba(248, 113, 113, 0.35);
    background: rgba(239, 68, 68, 0.1);
}

.btn-candidate-remove:hover {
    background: rgba(239, 68, 68, 0.25);
    border-color: #F87171;
    color: #FFF;
}

/* 雙主體新聞各自獨立情緒面板樣式 */
.news-dual-sentiment-panel {
    display: inline-flex;
    flex-direction: column;
    gap: 4px;
    padding: 4px 8px;
    background: rgba(255, 255, 255, 0.025);
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 8px;
    vertical-align: middle;
}

.dual-sentiment-row {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font-size: 0.74rem;
    white-space: nowrap;
}

.dual-cand-name {
    font-weight: 700;
    white-space: nowrap;
    min-width: 96px;
    user-select: none;
}

.dual-cand-name.cand-dpp {
    color: #6EE7B7;
}

.dual-cand-name.cand-kmt {
    color: #93C5FD;
}

.btn-candidate-action.is-done {
    background: rgba(245, 158, 11, 0.22) !important;
    border-color: #FCD34D !important;
    color: #FCD34D !important;
    cursor: default;
}

.news-audit-item-newly-added {
    animation: highlightFade 1.2s ease-out;
    border-left: 3px solid #F59E0B;
}

@keyframes highlightFade {
    0% { background: rgba(245, 158, 11, 0.25); }
    100% { background: transparent; }
}

/* RWD / Responsiveness */
@media (max-width: 900px) {
    body {
        padding: 20px 10px;
    }
    
    .header-panel {
        flex-direction: column;
        align-items: flex-start;
        gap: 16px;
        overflow: hidden;
    }

    .logo-area {
        width: 100%;
        align-items: flex-start;
    }

    .header-panel h1 {
        font-size: 1.35rem;
        line-height: 1.45;
        word-break: keep-all;
        overflow-wrap: normal;
    }
    
    .controls {
        width: 100%;
        justify-content: space-between;
    }

    .overview-panel {
        grid-template-columns: minmax(0, 1fr);
    }

    .overview-stats {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
    
    .pk-grid {
        grid-template-columns: minmax(0, 1fr);
        gap: 16px;
    }
    
    .vs-badge-container {
        margin: 8px 0;
    }
    
    .charts-grid {
        grid-template-columns: minmax(0, 1fr);
        gap: 20px;
    }
    
    .drawer {
        width: 100%;
        right: 0;
        transform: translateX(105%);
    }

    .drawer.open {
        transform: translateX(0);
    }
}

/* ponytail: 新增同步區塊之排版與響應式微調 */
.controls {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 12px 16px;
}
.control-group {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 10px 12px;
}
.control-filter-group {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    flex-shrink: 0;
}
.control-actions-group {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    flex-wrap: wrap;
}
.sync-group {
    border-left: 1px solid rgba(255, 255, 255, 0.1);
    padding-left: 20px;
}
@media (max-width: 900px) {
    .controls {
        flex-direction: column;
        align-items: stretch;
    }
    .control-group {
        width: 100%;
        flex-wrap: wrap;
        justify-content: flex-start;
        align-items: center;
        gap: 10px 12px;
    }

    .control-filter-group {
        display: flex;
        align-items: center;
        gap: 8px;
        flex-wrap: wrap;
    }

    .control-actions-group {
        display: flex;
        align-items: center;
        gap: 8px;
        flex-wrap: wrap;
    }

    .control-group .select-label {
        width: auto;
        margin-left: 0 !important;
        white-space: nowrap !important;
        word-break: keep-all !important;
    }

    .control-group select {
        flex: 0 1 auto;
        min-width: 140px;
        max-width: 100%;
    }

    #syncBtn {
        width: auto;
        max-width: 100%;
        margin-left: 0 !important;
        white-space: nowrap !important;
        word-break: keep-all !important;
    }

    .overview-stats {
        grid-template-columns: 1fr 1fr;
    }

    .sync-group {
        border-left: none;
        padding-left: 0;
        border-top: 1px solid rgba(255, 255, 255, 0.05);
        padding-top: 12px;
    }
}

@media (max-width: 520px) {
    .logo-area {
        flex-direction: column;
        gap: 10px;
    }

    .header-panel h1 {
        font-size: 1.2rem;
        line-height: 1.4;
    }

    .overview-stats {
        grid-template-columns: 1fr;
    }

    .overview-data-status-line {
        flex-direction: column;
        align-items: flex-start;
        gap: 2px;
    }

    .status-label-prefix {
        flex: none;
        width: 100%;
    }

    .candidate-card {
        padding-inline: 16px;
    }

    .metrics-row {
        grid-template-columns: 1fr;
    }

    .news-breakdown-row-top,
    .news-breakdown-row-bottom {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .news-latest-sync-button {
        grid-column: 1 / -1;
    }
}







.event-calendar-date-range,
.event-calendar-quick-ranges,
.event-calendar-concentrated-toggle,
.event-calendar-risk-filters {
    display: inline-flex;
    align-items: center;
    gap: 6px;
}

.event-calendar-date-range,
.event-calendar-quick-ranges,
.event-calendar-risk-filters {
    padding: 4px;
    border: 1px solid rgba(255, 255, 255, 0.10);
    border-radius: var(--button-radius);
    background: rgba(10, 14, 26, 0.46);
}

.event-calendar-date-range input {
    min-height: 32px;
    max-width: 138px;
    color-scheme: dark;
    color: var(--text-primary);
    background: transparent;
    border: 0;
    font: inherit;
}

.event-calendar-quick-ranges button,
.event-calendar-apply,
.event-calendar-clear {
    min-height: 34px;
    border: 1px solid rgba(255, 255, 255, 0.12);
    border-radius: var(--button-radius);
    color: var(--text-secondary);
    background: rgba(255, 255, 255, 0.035);
    padding: 5px 9px;
    font: inherit;
    font-size: 0.78rem;
    font-weight: 700;
    cursor: pointer;
    transition: var(--transition);
}

.event-calendar-apply {
    color: #FFF;
    border-color: rgba(129, 140, 248, 0.7);
    background: rgba(99, 102, 241, 0.38);
}

.event-calendar-apply:hover,
.event-calendar-apply:focus-visible {
    border-color: #818CF8;
    background: rgba(99, 102, 241, 0.55);
}

.event-calendar-clear {
    color: #C4B5FD;
    border-color: rgba(196, 181, 253, 0.35);
    background: rgba(139, 92, 246, 0.08);
}

.event-calendar-clear:hover,
.event-calendar-clear:focus-visible {
    color: #DDD6FE;
    border-color: rgba(196, 181, 253, 0.65);
    background: rgba(139, 92, 246, 0.18);
    outline: none;
}

.event-calendar-risk-filters {
    margin: 0;
    min-height: 34px;
    color: var(--text-secondary);
    font-size: 0.78rem;
    font-weight: 700;
}

.event-calendar-risk-filters input,
.event-calendar-concentrated-toggle input {
    accent-color: #818CF8;
}

@media (max-width: 760px) {
    .event-calendar-date-range,
    .event-calendar-quick-ranges,
    .event-calendar-risk-filters {
        width: 100%;
        flex-wrap: wrap;
    }
}

/* Keep the title readable when the calendar filter bar grows. */
.event-calendar-header {
    grid-template-columns: minmax(0, 1fr);
    gap: 12px;
}

.event-calendar-copy {
    min-width: 0;
}

.event-calendar-controls {
    width: 100%;
    justify-content: flex-start;
    align-items: center;
}

.event-calendar-risk-filters {
    flex: 0 0 auto;
}

@media (max-width: 1080px) {
    .event-calendar-controls {
        align-items: flex-start;
    }

    .event-calendar-source-tabs {
        flex-basis: 100%;
    }
}

.drawer-title-actions {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    min-width: 0;
}

.btn-drawer-back {
    min-height: 30px;
    border: 1px solid rgba(255,255,255,0.16);
    border-radius: var(--button-radius);
    color: var(--text-primary);
    background: rgba(255,255,255,0.05);
    padding: 4px 9px;
    font: inherit;
    font-size: 0.78rem;
    cursor: pointer;
}

.anomaly-filter-control {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    color: var(--text-secondary);
    font-size: 0.78rem;
}

.anomaly-filter-control select,
.anomaly-filter-control input {
    min-height: 32px;
    color: var(--text-primary);
    color-scheme: dark;
    background: rgba(10, 14, 26, 0.74);
    border: 1px solid rgba(255,255,255,0.12);
    border-radius: var(--button-radius);
    padding: 3px 7px;
    font: inherit;
}

/* ==========================================================================
   B-1-4 區 退燒保留選擇器樣式
   ========================================================================== */
.event-watchlist-retention-pill {
    display: inline-flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 4px 6px;
    font-size: 0.8rem;
    color: #94A3B8;
    line-height: 1.4;
}

.event-watchlist-retention-label {
    color: #94A3B8;
    font-size: 0.8rem;
    cursor: default;
}

.event-watchlist-retention-control-wrap {
    position: relative;
    display: inline-flex;
    align-items: center;
}

.event-watchlist-retention-select {
    appearance: none;
    -webkit-appearance: none;
    -moz-appearance: none;
    background: rgba(30, 41, 59, 0.95);
    border: 1px solid rgba(251, 146, 60, 0.45);
    color: #FDBA74;
    font-size: 0.82rem;
    font-weight: 700;
    padding: 3px 26px 3px 10px;
    border-radius: 6px;
    cursor: pointer;
    transition: all 0.2s ease;
    line-height: 1.3;
}

.event-watchlist-retention-arrow {
    position: absolute;
    right: 8px;
    color: #FDBA74;
    font-size: 0.75rem;
    pointer-events: none;
    transition: transform 0.2s ease;
}

.event-watchlist-retention-select:hover {
    border-color: #FB923C;
    background: rgba(180, 83, 9, 0.3);
    box-shadow: 0 0 8px rgba(251, 146, 60, 0.2);
}

.event-watchlist-retention-select:focus {
    outline: none;
    border-color: #FDBA74;
    box-shadow: 0 0 0 2px rgba(251, 146, 60, 0.35);
}

.event-watchlist-retention-select option {
    background: #0F172A;
    color: #F1F5F9;
    padding: 4px 8px;
}

.event-watchlist-retention-hint {
    color: #64748B;
    font-size: 0.76rem;
}

.event-watchlist-retention-number {
    color: #FDBA74;
    font-weight: 700;
    white-space: nowrap;
}

.event-watchlist-cooled-empty {
    padding: 18px 12px;
    color: #94A3B8;
    font-size: 0.88rem;
    text-align: center;
}

/* ==========================================================================
   新聞情緒互動切換器樣式 (News Sentiment Interactive Selector)
   ========================================================================== */
.news-sentiment-select-wrap {
    display: inline-flex;
    align-items: center;
    gap: 3px;
    padding: 1px 6px;
    border-radius: var(--pill-radius);
    cursor: pointer;
    transition: all 0.2s ease;
}

.news-sentiment-select {
    appearance: none;
    -webkit-appearance: none;
    -moz-appearance: none;
    background: transparent;
    border: none;
    color: inherit;
    font-size: 0.72rem;
    font-weight: 700;
    font-family: inherit;
    cursor: pointer;
    padding: 1px 2px;
    outline: none;
}

.news-sentiment-select:focus {
    outline: none;
    text-decoration: underline;
}

.news-sentiment-select option {
    background: #0f172a;
    color: #f1f5f9;
}

.news-sentiment-manual-dot {
    font-size: 0.7rem;
    line-height: 1;
}

/* 人為查核標籤與按鈕樣式 (Sentiment Manual Audit Status) */
.badge-sentiment-verified {
    display: inline-flex;
    align-items: center;
    gap: 3px;
    padding: 2px 7px;
    font-size: 0.74rem;
    font-weight: 700;
    line-height: 1.2;
    border-radius: 6px;
    background: rgba(245, 158, 11, 0.18);
    border: 1px solid rgba(251, 191, 36, 0.45);
    color: #FCD34D;
    white-space: nowrap;
    user-select: none;
    text-shadow: 0 1px 2px rgba(0, 0, 0, 0.85);
    word-break: keep-all;
    flex-shrink: 0;
}

.btn-sentiment-confirm {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 3px;
    padding: 2px 8px;
    font-size: 0.74rem;
    font-weight: 600;
    line-height: 1.2;
    border-radius: 6px;
    cursor: pointer;
    background: rgba(139, 92, 246, 0.14);
    border: 1px solid rgba(196, 181, 253, 0.42);
    color: #C4B5FD;
    transition: all 0.18s ease-in-out;
    white-space: nowrap;
    user-select: none;
    word-break: keep-all;
    flex-shrink: 0;
}

.btn-sentiment-confirm:hover {
    background: rgba(139, 92, 246, 0.28);
    border-color: #C4B5FD;
    color: #FFF;
}

.btn-sentiment-confirm.is-loading {
    opacity: 0.6;
    pointer-events: none;
}

/* 抽屜頂部情緒查核篩選橫條 */
.sentiment-audit-filter-bar {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 10px 14px;
    margin-bottom: 16px;
    padding: 10px 14px;
    background: rgba(15, 23, 42, 0.65);
    border: 1px solid rgba(148, 163, 184, 0.2);
    border-radius: 8px;
}

.sentiment-audit-filter-group {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font-size: 0.82rem;
    color: #94A3B8;
}

.sentiment-audit-filter-group label {
    white-space: nowrap;
    word-break: keep-all;
    font-weight: 600;
    color: #CBD5E1;
}

.sentiment-audit-filter-group select {
    min-height: 28px;
    padding: 3px 8px;
    background: rgba(10, 14, 26, 0.85);
    border: 1px solid rgba(148, 163, 184, 0.35);
    border-radius: 6px;
    color: #F1F5F9;
    font-size: 0.8rem;
    cursor: pointer;
    color-scheme: dark;
}

.sentiment-audit-filter-group select:focus {
    outline: none;
    border-color: #FDBA74;
}

.sentiment-audit-status-tabs {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    margin-left: auto;
    flex-wrap: wrap;
}

.sentiment-audit-status-tab {
    padding: 4px 10px;
    font-size: 0.78rem;
    font-weight: 600;
    border-radius: 6px;
    border: 1px solid rgba(148, 163, 184, 0.2);
    background: rgba(30, 41, 59, 0.6);
    color: #94A3B8;
    cursor: pointer;
    transition: all 0.15s ease;
    white-space: nowrap;
    display: inline-flex;
    align-items: center;
    gap: 4px;
}

.sentiment-audit-status-tab:hover {
    color: #F8FAFC;
    background: rgba(51, 65, 85, 0.8);
}

.sentiment-audit-status-tab.is-active {
    background: rgba(245, 158, 11, 0.24);
    color: #FCD34D;
    border-color: rgba(251, 191, 36, 0.55);
    font-weight: 700;
}

.sentiment-audit-status-tab span.tab-count {
    background: rgba(148, 163, 184, 0.2);
    padding: 1px 5px;
    border-radius: 8px;
    font-size: 0.72rem;
}

.sentiment-audit-status-tab.is-active span.tab-count {
    background: rgba(245, 158, 11, 0.45);
    color: #FFF;
}


/* ==========================================================================
   區域劃分與邊界結構樣式 (Area Partitioning & Boundary Badges)
   ========================================================================== */
.area-badge {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-weight: 700;
    font-family: 'Outfit', sans-serif;
    border-radius: 6px;
    letter-spacing: 0.5px;
    line-height: 1;
    vertical-align: middle;
    text-shadow: 0 1px 2px rgba(0, 0, 0, 0.85);
}

.area-badge-lg {
    background: rgba(99, 102, 241, 0.18);
    border: 1px solid rgba(129, 140, 248, 0.45);
    color: #C7D2FE;
    padding: 3px 8px;
    font-size: 0.82rem;
    margin-right: 8px;
}

.area-badge-sub {
    background: rgba(245, 158, 11, 0.18);
    border: 1px solid rgba(251, 191, 36, 0.45);
    color: #FCD34D;
    padding: 2px 7px;
    font-size: 0.78rem;
    margin-right: 6px;
}

.area-badge-leaf {
    background: rgba(168, 85, 247, 0.16);
    border: 1px solid rgba(196, 181, 253, 0.42);
    color: #C4B5FD;
    padding: 1px 6px;
    font-size: 0.72rem;
    margin-right: 5px;
}

/* ==========================================================================
   B 區 與 B-1、B-2 子區域包覆容器
   ========================================================================== */
.event-watchlist-panel {
    background: rgba(255, 255, 255, 0.02);
    border: 1px solid rgba(255, 255, 255, 0.07);
    border-radius: 12px;
    padding: 20px;
    margin-top: 18px;
    margin-bottom: 20px;
}

.event-watchlist-header {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    flex-wrap: wrap;
    gap: 16px;
    margin-bottom: 18px;
    padding-bottom: 14px;
    border-bottom: 1px solid rgba(255, 255, 255, 0.06);
}

.event-watchlist-header h4 {
    margin: 0 0 6px 0;
    font-size: 1.1rem;
    font-weight: 600;
    color: #FFF;
    display: flex;
    align-items: center;
}

.event-watchlist-header p {
    margin: 0;
    color: var(--text-secondary);
    font-size: 0.82rem;
    line-height: 1.5;
}

.event-watchlist-controls {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 8px 12px;
}

.anomaly-list-section {
    background: rgba(255, 255, 255, 0.02);
    border: 1px solid rgba(255, 255, 255, 0.07);
    border-radius: 12px;
    padding: 20px;
    margin-top: 16px;
}

.anomaly-list-header {
    margin-bottom: 16px;
    padding-bottom: 12px;
    border-bottom: 1px solid rgba(255, 255, 255, 0.06);
}

.anomaly-list-heading {
    font-size: 1.05rem;
    font-weight: 600;
    color: var(--text-primary);
    margin: 0;
    display: flex;
    align-items: center;
}

/* ==========================================================================
   B-1-1 持續量化、排行與候選人摘要
   ========================================================================== */
.event-watchlist-analysis {
    background: rgba(255, 255, 255, 0.015);
    border: 1px solid rgba(255, 255, 255, 0.05);
    border-radius: 10px;
    padding: 16px;
    margin-bottom: 20px;
}

.event-watchlist-analysis-heading {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 12px;
}

.event-watchlist-analysis-heading h5 {
    margin: 0;
    font-size: 0.95rem;
    font-weight: 600;
    color: var(--text-primary);
    display: flex;
    align-items: center;
}

.event-watchlist-summary-metrics {
    display: flex;
    flex-wrap: wrap;
    gap: 12px 20px;
    font-size: 0.85rem;
    color: var(--text-secondary);
}

.event-watchlist-summary-metrics strong {
    color: #FFF;
}

.event-watchlist-candidate-summaries {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
    gap: 12px;
    margin: 14px 0;
}

.event-watchlist-candidate-summary {
    background: rgba(255, 255, 255, 0.02);
    border: 1px solid rgba(255, 255, 255, 0.05);
    border-radius: 8px;
    padding: 12px 14px;
}

.event-watchlist-candidate-summary-heading {
    font-weight: 700;
    font-size: 0.95rem;
    color: #F3F4F6;
    margin-bottom: 8px;
}

.event-watchlist-candidate-summary-metrics {
    display: flex;
    flex-wrap: wrap;
    gap: 8px 12px;
    font-size: 0.8rem;
    color: var(--text-secondary);
}

.event-watchlist-candidate-summary-event {
    margin-top: 10px;
    padding-top: 8px;
    border-top: 1px solid rgba(255, 255, 255, 0.04);
}

.event-watchlist-ranking-heading {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin: 16px 0 10px 0;
}

.event-watchlist-ranking-heading h5 {
    margin: 0;
    font-size: 0.9rem;
    font-weight: 600;
    color: var(--text-primary);
}

.event-watchlist-ranking {
    list-style: none;
    padding: 0;
    margin: 0;
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.event-watchlist-ranking-row {
    display: flex;
    align-items: center;
    gap: 12px;
    background: rgba(255, 255, 255, 0.015);
    border: 1px solid rgba(255, 255, 255, 0.03);
    border-radius: 6px;
    padding: 8px 12px;
}

.event-watchlist-ranking-number {
    font-family: 'Outfit', sans-serif;
    font-weight: 700;
    color: #818CF8;
    font-size: 0.95rem;
    width: 20px;
}

.event-watchlist-ranking-main {
    flex: 1;
    min-width: 0;
}

.event-watchlist-ranking-meta {
    display: block;
    font-size: 0.76rem;
    color: var(--text-muted);
    margin-top: 2px;
}

.event-watchlist-duration-track {
    display: block;
    width: 100%;
    height: 4px;
    background: rgba(255, 255, 255, 0.05);
    border-radius: 2px;
    margin-top: 6px;
    overflow: hidden;
}

.event-watchlist-duration-fill {
    display: block;
    height: 100%;
    width: var(--duration-percent, 0%);
    background: linear-gradient(90deg, #6366F1, #818CF8);
    border-radius: 2px;
}

.event-watchlist-ranking-days {
    font-size: 0.82rem;
    font-weight: 700;
    color: #FDBA74;
    white-space: nowrap;
}

.event-watchlist-highlight {
    background: rgba(99, 102, 241, 0.06);
    border: 1px solid rgba(99, 102, 241, 0.25);
    border-left: 4px solid #818CF8;
    border-radius: 10px;
    padding: 14px 16px;
    margin-bottom: 20px;
}

.event-watchlist-highlight-label {
    display: flex;
    align-items: center;
    font-weight: 700;
    color: #C7D2FE;
    font-size: 0.9rem;
    margin-bottom: 12px;
}

.event-watchlist-active-section {
    background: rgba(239, 68, 68, 0.02);
    border: 1px solid rgba(239, 68, 68, 0.12);
    border-left: 3px solid rgba(239, 68, 68, 0.6);
    border-radius: 10px;
    padding: 14px 16px;
    margin-bottom: 20px;
}

.event-watchlist-cooled-section {
    background: rgba(139, 92, 246, 0.03);
    border: 1px solid rgba(139, 92, 246, 0.16);
    border-left: 3px solid rgba(168, 85, 247, 0.65);
    border-radius: 10px;
    padding: 14px 16px;
    margin-bottom: 16px;
}

.event-watchlist-section-header {
    margin-bottom: 12px;
}

.event-watchlist-section-title-wrap {
    display: flex;
    justify-content: space-between;
    align-items: center;
    flex-wrap: wrap;
    gap: 10px;
}

.event-watchlist-section-title {
    display: flex;
    align-items: center;
    gap: 6px;
    font-size: 0.92rem;
    font-weight: 600;
    color: var(--text-primary);
    margin: 0;
}

.event-watchlist-count-badge {
    font-size: 0.72rem;
    font-weight: 700;
    padding: 1px 7px;
    border-radius: 9999px;
}

.event-watchlist-count-badge.is-active {
    background: rgba(239, 68, 68, 0.2);
    color: #FCA5A5;
    border: 1px solid rgba(239, 68, 68, 0.3);
}

.event-watchlist-count-badge.is-cooled {
    background: rgba(139, 92, 246, 0.2);
    color: #C4B5FD;
    border: 1px solid rgba(196, 181, 253, 0.35);
}

.event-watchlist-row {
    display: flex;
    justify-content: space-between;
    align-items: center;
    flex-wrap: wrap;
    gap: 12px;
    padding: 10px 14px;
    margin-bottom: 8px;
    background: rgba(255, 255, 255, 0.02);
    border: 1px solid rgba(255, 255, 255, 0.04);
    border-radius: 8px;
    transition: var(--transition);
}

.event-watchlist-row.is-highlight {
    background: rgba(99, 102, 241, 0.08);
    border-color: rgba(99, 102, 241, 0.2);
}

.event-watchlist-main {
    flex: 1 1 55%;
    min-width: 240px;
}

.event-watchlist-meta {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 8px;
    font-size: 0.76rem;
    color: var(--text-secondary);
    margin-top: 4px;
}

.event-watchlist-metrics {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 12px;
    font-size: 0.8rem;
    color: var(--text-secondary);
}

.event-watchlist-status.is-active {
    color: #F87171;
    background: rgba(239, 68, 68, 0.12);
    padding: 1px 6px;
    border-radius: 4px;
    font-size: 0.72rem;
}

.event-watchlist-status.is-cooled {
    color: #C4B5FD;
    background: rgba(139, 92, 246, 0.14);
    padding: 1px 6px;
    border-radius: 4px;
    font-size: 0.72rem;
}

/* ==========================================================================
   事件超連結與語意斷行樣式 (Event Hyperlinks & Phrase-aware Line Breaking)
   ========================================================================== */
.event-watchlist-title {
    word-break: auto-phrase;
    overflow-wrap: normal;
}

.event-watchlist-ranking-title {
    word-break: auto-phrase;
    overflow-wrap: normal;
}

.event-watchlist-longest-title {
    word-break: auto-phrase;
    overflow-wrap: normal;
}

.event-watchlist-threshold-title {
    word-break: auto-phrase;
    overflow-wrap: normal;
    color: #FDBA74 !important;
    font-size: 0.98rem;
    font-weight: 600;
    line-height: 1.45;
    text-decoration: none;
    transition: color 0.2s ease;
    display: block;
}

.event-watchlist-threshold-title:hover {
    color: #FED7AA !important;
    text-decoration: underline;
}

/* B-1-1 持續事件抽屜卡片化樣式 (Event Watchlist Threshold Cards) */
.event-watchlist-threshold-list {
    display: flex;
    flex-direction: column;
    gap: 14px;
    margin-top: 14px;
}

.event-watchlist-threshold-note {
    color: var(--text-secondary);
    font-size: 0.85rem;
    margin-top: 4px;
    margin-bottom: 12px;
    line-height: 1.4;
}

.event-watchlist-threshold-empty {
    color: var(--text-secondary);
    font-size: 0.9rem;
    text-align: center;
    padding: 24px 0;
}

.event-watchlist-threshold-card {
    background: rgba(15, 23, 42, 0.75);
    border: 1px solid rgba(148, 163, 184, 0.22);
    border-radius: 10px;
    padding: 16px;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.25);
    transition: border-color 0.2s ease, box-shadow 0.2s ease, transform 0.15s ease;
    display: flex;
    flex-direction: column;
}

.event-watchlist-threshold-card:hover {
    border-color: rgba(251, 146, 60, 0.45);
    box-shadow: 0 6px 18px rgba(0, 0, 0, 0.35);
    transform: translateY(-1px);
}

.event-watchlist-threshold-main {
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.event-watchlist-threshold-meta {
    display: flex;
    flex-direction: column;
    gap: 6px;
    font-size: 0.86rem;
    line-height: 1.45;
}

.event-watchlist-threshold-period-row,
.event-watchlist-threshold-last-reported-row {
    display: flex;
    align-items: center;
    gap: 8px;
    flex-wrap: wrap;
}

.event-watchlist-meta-label {
    color: var(--text-secondary);
    font-size: 0.84rem;
    font-weight: 500;
    white-space: nowrap;
    flex-shrink: 0;
    letter-spacing: 0.02em;
}

.event-watchlist-date-range {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    flex-wrap: nowrap;
    white-space: nowrap;
}

.event-watchlist-date-highlight {
    color: #FDBA74;
    font-weight: 700;
    font-family: 'Outfit', sans-serif;
    font-size: 0.92rem;
    letter-spacing: 0.02em;
    white-space: nowrap;
}

.event-watchlist-date-sep {
    color: var(--text-secondary);
    font-size: 0.82rem;
    white-space: nowrap;
}

.event-watchlist-time-highlight {
    color: #F1F5F9;
    font-weight: 600;
    font-family: 'Outfit', sans-serif;
    font-size: 0.9rem;
    letter-spacing: 0.01em;
    white-space: nowrap;
}

.event-watchlist-threshold-metrics {
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 8px 14px;
    margin-top: 12px;
    padding-top: 10px;
    border-top: 1px solid rgba(148, 163, 184, 0.16);
}

.event-watchlist-metric-pill {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    font-size: 0.84rem;
    color: var(--text-secondary);
    background: rgba(30, 41, 59, 0.6);
    border: 1px solid rgba(148, 163, 184, 0.18);
    border-radius: 6px;
    padding: 4px 10px;
    white-space: nowrap;
}

.event-watchlist-metric-pill .event-watchlist-duration-value {
    color: #FDE68A;
    font-weight: 700;
    font-size: 0.96em;
}

.event-watchlist-metric-pill .event-watchlist-audit-link {
    color: #FDBA74 !important;
    font-weight: 700;
    text-decoration: underline;
    font-size: 0.96em;
}

.event-watchlist-metric-pill .event-watchlist-audit-link:hover {
    color: #FED7AA !important;
}

.event-watchlist-title-action {
    color: var(--text-primary);
    text-decoration: none;
    cursor: pointer;
    font-size: 0.9rem;
    font-weight: 600;
    line-height: 1.4;
    word-break: auto-phrase;
    overflow-wrap: normal;
    transition: var(--transition);
    display: inline-block;
    background: transparent;
    border: none;
    padding: 0;
}

.event-watchlist-title-action:hover {
    color: var(--primary-color);
    text-decoration: underline;
}

.event-watchlist-threshold-link {
    color: #FDBA74;
    text-decoration: underline;
    background: transparent;
    border: none;
    cursor: pointer;
    font: inherit;
    font-size: 0.8rem;
    padding: 0;
    transition: var(--transition);
}

.event-watchlist-threshold-link:hover {
    color: #FED7AA;
}

/* 鍵盤無障礙焦點輪廓 (Accessible Focus Rings) */
.event-watchlist-threshold-link:focus-visible {
    outline: 2px solid currentColor;
    outline-offset: 2px;
    border-radius: 2px;
}

.event-watchlist-title-action:focus-visible {
    outline: 2px solid currentColor;
    outline-offset: 2px;
    border-radius: 2px;
}

.event-watchlist-audit-link:focus-visible {
    outline: 2px solid currentColor;
    outline-offset: 2px;
    border-radius: 2px;
}

.news-audit-item a:focus-visible {
    outline: 2px solid currentColor;
    outline-offset: 2px;
    border-radius: 2px;
}

.btn-drawer-back:focus-visible {
    outline: 2px solid currentColor;
    outline-offset: 2px;
}

.btn-close:focus-visible {
    outline: 2px solid currentColor;
    outline-offset: 2px;
}

/* ==========================================================================
   突發卡片超連結、造訪後高對比與佔比分級
   ========================================================================== */
:root {
    --link-strong: #FDBA74;
}

.anomaly-topic-link {
    color: #FDBA74;
    text-decoration: underline;
    font-weight: 500;
    transition: var(--transition);
}

.anomaly-topic-link:hover {
    color: #FED7AA;
    text-decoration: underline;
}

.anomaly-topic-link.is-new-topic {
    color: var(--link-strong);
    font-weight: 600;
}

.anomaly-event-total .anomaly-evidence-link {
    color: #FDBA74 !important;
    text-decoration: underline;
    font-weight: 700;
}

.anomaly-card .anomaly-topic-link:visited {
    color: var(--link-strong);
}

.anomaly-card .anomaly-evidence-link:visited {
    color: var(--link-strong);
}

.anomaly-card .anomaly-all-news-link:visited {
    color: var(--link-strong);
}

.anomaly-card .anomaly-share-low {
    color: #C4B5FD;
    font-weight: 700;
}

.anomaly-card .anomaly-share-medium {
    color: #FDE68A;
    font-weight: 700;
}

.anomaly-card .anomaly-share-high {
    color: #FDBA74;
    font-weight: 700;
}

.anomaly-card .anomaly-share-critical {
    color: #FCA5A5;
    font-weight: 700;
}

.anomaly-share-label-short {
    display: none;
}

.anomaly-keep-together {
    display: inline-block;
    white-space: nowrap;
}

/* ==========================================================================
   新聞同步維護狀態指標與總覽標籤列
   ========================================================================== */
.overview-status-tags {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 8px 10px;
    margin-top: 10px;
    font-size: 0.8rem;
    color: var(--text-secondary);
}

.overview-status-tags .news-sync-maintenance-status {
    display: contents;
}

.news-sync-maintenance-status {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 8px 12px;
    margin-top: 10px;
    font-size: 0.8rem;
    color: var(--text-secondary);
}

.maintenance-status-metric {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    background: rgba(255, 255, 255, 0.03);
    border: 1px solid rgba(255, 255, 255, 0.08);
    padding: 3px 9px;
    border-radius: 6px;
    white-space: nowrap;
}

.maintenance-status-metric.job-status-metric {
    border-color: rgba(99, 102, 241, 0.35);
    background: rgba(99, 102, 241, 0.08);
}

.maintenance-status-metric.job-status-metric strong {
    font-family: 'Outfit', 'Noto Sans TC', sans-serif;
    font-weight: 700;
    color: #FCD34D; /* 亮琥珀金，對比度 > 13:1 */
}

.maintenance-status-metric.job-status-metric strong.is-success {
    color: #FCD34D; /* 亮琥珀金 */
}

.maintenance-status-metric.job-status-metric:has(strong.is-running),
.maintenance-status-metric.job-status-metric.is-running-card {
    border-color: rgba(253, 224, 71, 0.45);
    background: rgba(253, 224, 71, 0.08);
    box-shadow: 0 0 10px rgba(253, 224, 71, 0.15);
}

.maintenance-status-metric.job-status-metric strong.is-running {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    color: #FDE047; /* 亮黃，深色底板下對比度 > 14:1 */
    background: rgba(253, 224, 71, 0.12);
    border: 1px solid rgba(253, 224, 71, 0.35);
    padding: 1px 7px;
    border-radius: 10px;
    text-shadow: 0 0 6px rgba(253, 224, 71, 0.6);
    animation: jobGlowPulse 1.8s ease-in-out infinite alternate;
}

.maintenance-status-metric.job-status-metric strong.is-running::before {
    content: "";
    display: inline-block;
    width: 8px;
    height: 8px;
    border-radius: 50%;
    border: 2px solid rgba(253, 224, 71, 0.25);
    border-top-color: #FDE047;
    animation: jobSpin 0.9s linear infinite;
    flex-shrink: 0;
}

@keyframes jobSpin {
    0% { transform: rotate(0deg); }
    100% { transform: rotate(360deg); }
}

@keyframes jobGlowPulse {
    0% {
        box-shadow: 0 0 3px rgba(253, 224, 71, 0.2);
        opacity: 0.88;
    }
    100% {
        box-shadow: 0 0 12px rgba(253, 224, 71, 0.6);
        opacity: 1;
    }
}

.maintenance-status-metric.job-status-metric strong.is-error {
    color: #F87171; /* 亮紅 */
}

/* ==========================================================================
   社群分析候選人標籤深色主題高對比樣式
   ========================================================================== */
.social-backfill-candidate-tag {
    display: inline-block;
    padding: 2px 8px;
    border-radius: var(--pill-radius);
    font-size: 0.72rem;
    font-weight: 700;
    line-height: 1;
    text-shadow: 0 1px 2px rgba(0, 0, 0, 0.85);
}

.social-backfill-candidate-tag.social-candidate-kmt {
    background: rgba(30, 58, 138, 0.35);
    color: #93C5FD;
    border: 1px solid rgba(147, 197, 253, 0.3);
}

.social-backfill-candidate-tag.social-candidate-dpp {
    background: rgba(6, 95, 70, 0.35);
    color: #6EE7B7;
    border: 1px solid rgba(110, 231, 183, 0.3);
}

/* ==========================================================================
   社群分析模組、事件持續關注量化與審核抽屜樣式補全
   ========================================================================== */
.social-refresh-button {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 6px 12px;
    border-radius: var(--button-radius);
    background: var(--surface-color);
    border: 1px solid var(--border-color);
    color: var(--text-primary);
    cursor: pointer;
    font-size: 0.85rem;
    transition: var(--transition);
}

.social-evidence-metrics dt {
    color: var(--text-secondary);
    font-size: 0.78rem;
}

.social-comparison-row {
    min-width: 0;
    display: grid;
    grid-template-columns: 1fr 140px 1fr;
    grid-template-areas: "left label right";
    align-items: center;
    gap: 12px;
    padding: 10px 14px;
    background: rgba(255, 255, 255, 0.02);
    border: 1px solid rgba(255, 255, 255, 0.05);
    border-radius: 8px;
}

.social-comparison-row > :nth-child(1) {
    grid-area: left;
    text-align: right;
}

.social-comparison-row > :nth-child(2) {
    grid-area: label;
    text-align: center;
    font-size: 0.85rem;
    font-weight: 600;
    color: var(--text-secondary);
}

.social-comparison-row > :nth-child(3) {
    grid-area: right;
    text-align: left;
}

.social-comparison-heading {
    background: rgba(255, 255, 255, 0.05);
    border-bottom: 2px solid rgba(255, 255, 255, 0.1);
    font-weight: 700;
}

.social-summary-grid {
    display: grid;
    gap: 12px;
}

.anomaly-date-divider {
    display: flex;
    align-items: center;
    gap: 8px;
    margin: 16px 0 8px;
    font-size: 0.8rem;
    color: var(--text-secondary);
}

.social-watch-pin {
    cursor: pointer;
    transition: var(--transition);
}

.social-watch-history {
    font-size: 0.8rem;
    color: var(--text-secondary);
}

.social-insight-published-at {
    color: var(--text-secondary);
    font-size: 0.78rem;
}

.event-watchlist-term {
    font-size: 0.78rem;
    color: var(--text-secondary);
}

.event-watchlist-ranking-item {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
    padding: 6px 10px;
    border-radius: 6px;
    background: rgba(255, 255, 255, 0.02);
}

.social-comparison-matrix {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.social-top-post-link {
    color: var(--link-strong);
    text-decoration: underline;
}

.social-quantitative-rankings { overflow-wrap: normal; }

.social-candidate-cards {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(360px, 1fr));
    gap: 16px;
    margin-top: 12px;
}

.social-insight-card {
    background: var(--card-bg, rgba(20, 26, 43, 0.7));
    border: 1px solid var(--border-color, rgba(255, 255, 255, 0.08));
    border-radius: var(--border-radius, 12px);
    padding: 16px;
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.social-insight-signals {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.social-insight-signal {
    background: rgba(255, 255, 255, 0.02);
    border: 1px solid rgba(255, 255, 255, 0.05);
    border-radius: 8px;
    padding: 10px 12px;
    display: flex;
    flex-direction: column;
    gap: 6px;
}

.social-insight-stats {
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    gap: 8px 16px;
    margin: 0;
    padding: 0;
}

.social-insight-stat {
    display: inline-flex;
    align-items: baseline;
    gap: 6px;
    margin: 0;
    padding: 0;
}

.social-insight-stat dt {
    font-size: 0.75rem;
    color: var(--text-secondary, #94a3b8);
    margin: 0;
}

.social-insight-stat dd {
    font-size: 0.95rem;
    font-weight: 700;
    color: var(--text-primary, #f1f5f9);
    margin: 0;
    white-space: nowrap;
}

.social-insight-number {
    font-size: 1.1rem;
    font-weight: 700;
}

.social-insight-signal > .social-insight-signal-label {
    font-size: 0.75rem;
    color: var(--text-secondary);
}

.social-dashboard .overview-panel {
    container-type: inline-size;
    display: block;
}

.social-overview-values {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    align-items: center;
}

.social-overview-value {
    display: inline-flex;
    align-items: baseline;
    gap: 4px;
    white-space: nowrap;
}

.social-chart-placeholder {
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 32px 16px;
    color: var(--text-muted);
}

.social-ranking-columns,
.social-ranking-item {
    display: grid;
    grid-template-columns: 140px 180px 1fr 200px;
    gap: 12px;
    align-items: center;
}

.social-ranking-columns {
    padding: 8px 12px;
    font-size: 0.75rem;
    font-weight: 600;
    color: var(--text-muted);
    border-bottom: 1px solid rgba(255, 255, 255, 0.08);
}

.social-ranking-list {
    list-style: none;
    margin: 0;
    padding: 0;
}

.social-ranking-item {
    padding: 10px 12px;
    border-bottom: 1px solid rgba(255, 255, 255, 0.04);
}

.social-ranking-note,
.social-sample-source {
    overflow-wrap: anywhere;
    word-break: break-word;
}

.social-quick-sample-list {
    list-style: none;
    margin: 8px 0 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.social-quick-sample-list li {
    background: rgba(255, 255, 255, 0.02);
    border: 1px solid rgba(255, 255, 255, 0.04);
    border-radius: 8px;
    padding: 10px 14px;
    display: flex;
    flex-direction: column;
    gap: 6px;
}

.social-ranking-evidence {
    font-size: 0.8rem;
    color: var(--text-secondary);
}

.social-semantic-group {
    display: inline-flex;
    align-items: center;
    gap: 4px;
}

.social-ranking-columns[data-col="metric"]::before { content: "指標"; }
.social-ranking-columns[data-col="conclusion"]::before { content: "結論"; }
.social-ranking-columns[data-col="evidence"]::before { content: "證據"; }
.social-ranking-columns[data-col="post"]::before { content: "貼文"; }

.social-ranking-stat {
    white-space: nowrap;
}

.social-nightly-metric {
    display: inline-flex;
    align-items: center;
    gap: 4px;
}

.social-post-reference {
    font-size: 0.8rem;
    color: var(--text-secondary);
    word-break: auto-phrase;
}

.social-sample-metrics {
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    gap: 6px 12px;
}

.social-sample-metric {
    display: inline-flex;
    align-items: baseline;
    gap: 4px;
    white-space: nowrap;
}

.social-sample-metric-label {
    font-size: 0.75rem;
    color: var(--text-secondary);
}

.social-sample-metric-value {
    font-size: 0.85rem;
    font-weight: 700;
    color: var(--text-primary);
}

@media (min-width: 600px) {
    .social-nightly-job > :last-child { grid-column: span 2; }
}

@media (max-width: 768px) {
    .social-nightly-job { grid-template-columns: 1fr; }
    .social-backfill-candidate-grid { grid-template-columns: 1fr; }
}

.social-nightly-job-link {
    color: var(--link-strong);
    text-decoration: underline;
}

.social-backfill-candidate-grid {
    display: grid;
    gap: 12px;
}

.social-backfill-post {
    background: rgba(255, 255, 255, 0.02);
    border: 1px solid rgba(255, 255, 255, 0.05);
    border-radius: 8px;
    padding: 12px 14px;
    margin-bottom: 8px;
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.social-backfill-post.is-active {
    border-color: var(--primary-color, #3b82f6);
    background: rgba(59, 130, 246, 0.05);
}

.social-backfill-metrics {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 8px 12px;
}

.social-backfill-history {
    font-size: 0.8rem;
}

@media (min-width: 600px) and (max-width: 900px) {
    .social-dashboard .header-panel .controls {
        grid-template-columns: repeat(3, minmax(0, 1fr));
    }
}

.social-comparison-row .is-leader-left {
    color: var(--dpp-light);
}

.social-comparison-row .is-leader-right {
    color: var(--kmt-light);
}

.social-watch-pin.is-locked.social-candidate-dpp {
    color: var(--dpp-color);
}

.social-watch-pin.is-locked.social-candidate-kmt {
    color: var(--kmt-color);
}

.social-source-link {
    color: var(--link-strong);
}

.behavior-observation-grid {
    display: grid;
    gap: 12px;
}

.behavior-card {
    min-width: 0;
}

.behavior-metric-grid {
    display: grid;
    gap: 8px;
}

.behavior-metric-grid dd {
    white-space: nowrap;
}

.behavior-evidence-list,
.social-evidence-list {
    margin-top: 8px;
}

@media (max-width: 760px) {
    .behavior-observation-grid { grid-template-columns: 1fr; }
}

@media (max-width: 600px) {
    .social-comparison-matrix { gap: 4px; }
    .social-comparison-row {
        grid-template-columns: 1fr 1fr;
        grid-template-areas: "label label" "left right";
        padding: 8px 10px;
    }
    .social-comparison-row > :nth-child(1) {
        text-align: center;
    }
    .social-comparison-row > :nth-child(2) {
        text-align: center;
        margin-bottom: 4px;
    }
    .social-comparison-row > :nth-child(3) {
        text-align: center;
    }
}

@media (max-width: 900px) {
    .social-dashboard { padding: 12px; }
    .social-ranking-columns {
        display: none;
    }
    .social-ranking-item {
        display: flex;
        flex-direction: column;
        align-items: flex-start;
        gap: 6px;
        padding: 12px;
        background: rgba(255, 255, 255, 0.02);
        border: 1px solid rgba(255, 255, 255, 0.05);
        border-radius: 8px;
        margin-bottom: 8px;
    }
    .social-candidate-cards {
        grid-template-columns: 1fr;
    }
}

#socialCommentsStatus { overflow-wrap: anywhere; }

.social-comments-page .header-panel {
    margin-bottom: 16px;
}

.social-comments-page .behavior-filter-heading {
    font-size: 0.9rem;
    font-weight: 600;
}

.app-container {
    min-width: 0;
}

.social-comments-page .header-panel .controls {
        display: grid;
}

.date-verification-toolbar {
    display: flex;
    justify-content: space-between;
    align-items: center;
    flex-wrap: wrap;
    gap: 12px;
    padding: 12px 16px;
    margin-bottom: 14px;
    background: rgba(15, 23, 42, 0.75);
    border: 1px solid rgba(148, 163, 184, 0.2);
    border-radius: 8px;
}

.date-verification-toolbar > div:first-child {
    display: flex;
    flex-direction: column;
    gap: 2px;
}

.date-verification-toolbar strong {
    color: #F8FAFC;
    font-size: 0.95rem;
}

.date-verification-toolbar span {
    color: #94A3B8;
    font-size: 0.8rem;
}

.date-verification-run-control {
    display: flex;
    align-items: center;
    gap: 8px;
}

.date-verification-audit-banner {
    display: flex;
    justify-content: space-between;
    align-items: center;
    flex-wrap: wrap;
    gap: 12px;
    padding: 12px 16px;
    margin-bottom: 14px;
    border-radius: 8px;
    font-size: 0.85rem;
    line-height: 1.45;
}

.date-verification-audit-banner.is-ok {
    background: rgba(245, 158, 11, 0.12);
    border: 1px solid rgba(251, 191, 36, 0.35);
    color: #E2E8F0;
}

.date-verification-audit-banner.is-ok strong {
    color: #FCD34D;
}

.date-verification-audit-banner.is-alert {
    background: rgba(239, 68, 68, 0.14);
    border: 1px solid rgba(248, 113, 113, 0.45);
    color: #F8FAFC;
}

.date-verification-audit-banner.is-alert strong {
    color: #FCA5A5;
}

.date-verification-audit-banner.is-pending {
    background: rgba(168, 85, 247, 0.12);
    border: 1px solid rgba(196, 181, 253, 0.35);
    color: #E2E8F0;
}

.date-verification-audit-banner.is-pending strong {
    color: #C4B5FD;
}

.audit-banner-content {
    display: flex;
    align-items: flex-start;
    gap: 10px;
    flex: 1 1 60%;
    min-width: 240px;
}

.audit-banner-icon {
    font-size: 1.25rem;
    line-height: 1;
    flex-shrink: 0;
    margin-top: 2px;
}

.audit-banner-detail {
    margin: 4px 0 2px 0;
    font-size: 0.8rem;
    color: #CBD5E1;
    word-break: break-all;
}

.audit-banner-time {
    display: block;
    font-size: 0.74rem;
    color: #94A3B8;
    margin-top: 2px;
}

.audit-banner-actions {
    display: flex;
    align-items: center;
    gap: 8px;
    flex-wrap: wrap;
    margin-left: auto;
}

.btn-audit-trigger,
.btn-audit-requeue {
    padding: 5px 12px;
    border-radius: 6px;
    font-size: 0.78rem;
    font-weight: 600;
    cursor: pointer;
    white-space: nowrap;
    transition: all 0.2s ease;
}

.btn-audit-trigger {
    background: rgba(255, 255, 255, 0.08);
    border: 1px solid rgba(255, 255, 255, 0.2);
    color: #E2E8F0;
}

.btn-audit-trigger:hover {
    background: rgba(255, 255, 255, 0.16);
    color: #FFF;
}

.btn-audit-requeue {
    background: rgba(245, 158, 11, 0.2);
    border: 1px solid rgba(245, 158, 11, 0.5);
    color: #FDE68A;
}

.btn-audit-requeue:hover {
    background: rgba(245, 158, 11, 0.35);
    color: #FFF;
    box-shadow: 0 0 8px rgba(245, 158, 11, 0.3);
}

.date-verification-tabs {
    display: flex;
    gap: 8px;
    border-bottom: 1px solid var(--border-color);
    padding-bottom: 8px;
}

.date-verification-tab {
    padding: 6px 14px;
    font-size: 0.85rem;
    border-radius: 6px;
    border: 1px solid transparent;
    background: rgba(30, 41, 59, 0.6);
    color: #94A3B8;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    gap: 6px;
    transition: all 0.2s ease;
    white-space: nowrap;
}

.date-verification-tab span {
    background: rgba(148, 163, 184, 0.2);
    padding: 1px 6px;
    border-radius: 10px;
    font-size: 0.75rem;
    font-weight: 700;
    color: #E2E8F0;
}

.date-verification-tab:hover {
    color: #F8FAFC;
    background: rgba(51, 65, 85, 0.8);
}

.date-verification-tab.is-active {
    background: rgba(245, 158, 11, 0.25);
    color: #FCD34D;
    border-color: rgba(251, 191, 36, 0.5);
    font-weight: 600;
}

.date-verification-tab.is-active span {
    background: rgba(217, 119, 6, 0.5);
    color: #FFF;
}

.date-verification-badge {
    min-height: 16px;
    padding: 0 4px;
    font-size: 0.6rem;
    display: inline-flex;
    align-items: center;
    border-radius: 4px;
    white-space: nowrap;
    flex-shrink: 0;
    word-break: keep-all;
}

.date-verification-badge.is-pending {
    background: rgba(148, 163, 184, 0.2);
    color: #CBD5E1;
    border: 1px solid rgba(148, 163, 184, 0.4);
}

.date-verification-badge.is-checking {
    background: rgba(168, 85, 247, 0.2);
    color: #C4B5FD;
    border: 1px solid rgba(196, 181, 253, 0.4);
}

.date-verification-badge.is-review_required {
    background: rgba(245, 158, 11, 0.22);
    color: #FCD34D;
    border: 1px solid rgba(245, 158, 11, 0.5);
    font-weight: 700;
}

.date-verification-badge.is-verified {
    background: rgba(245, 158, 11, 0.2);
    color: #FCD34D;
    border: 1px solid rgba(251, 191, 36, 0.45);
}

.date-verification-badge.is-rejected {
    background: rgba(239, 68, 68, 0.2);
    color: #FCA5A5;
    border: 1px solid rgba(239, 68, 68, 0.4);
}

.date-verification-list {
    display: flex;
    flex-direction: column;
    gap: 16px;
    margin-top: 12px;
}

.date-verification-empty {
    color: var(--text-secondary);
    font-size: 0.9rem;
    padding: 24px 0;
    text-align: center;
}

/* Individual Date Verification Card */
.date-verification-item {
    background: rgba(15, 23, 42, 0.75);
    border: 1px solid rgba(148, 163, 184, 0.25);
    border-radius: 10px;
    padding: 16px;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.25);
    transition: border-color 0.2s ease, box-shadow 0.2s ease, transform 0.15s ease;
    display: flex;
    flex-direction: column;
}

.date-verification-item:hover {
    border-color: rgba(251, 146, 60, 0.45);
    box-shadow: 0 6px 18px rgba(0, 0, 0, 0.35);
}

.date-verification-item-heading {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    gap: 12px;
    margin-bottom: 8px;
}

.date-verification-title-link {
    flex: 1 1 auto;
    min-width: 0;
    word-break: break-word;
    color: #FDBA74 !important;
    font-weight: 600;
    font-size: 0.98rem;
    line-height: 1.45;
    text-decoration: none;
    transition: color 0.15s ease;
}

.date-verification-title-link:hover {
    color: #FED7AA !important;
    text-decoration: underline;
}

.date-verification-meta {
    display: flex;
    flex-wrap: wrap;
    gap: 8px 12px;
    font-size: 0.8rem;
    color: #94A3B8;
    margin-bottom: 6px;
    align-items: center;
}

.date-verification-meta .date-val-highlight {
    color: #FDBA74;
    font-weight: 700;
}

.date-verification-meta .date-val-pending {
    color: #FCD34D;
}

.date-verification-reason {
    background: rgba(239, 68, 68, 0.12);
    border-left: 3px solid #EF4444;
    color: #FCA5A5;
    padding: 6px 12px;
    border-radius: 4px;
    font-size: 0.82rem;
    margin: 8px 0 0 0;
    word-break: break-all;
    line-height: 1.4;
}

.date-verification-actions {
    margin-top: 14px;
    padding-top: 12px;
    border-top: 1px solid rgba(148, 163, 184, 0.18);
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 8px 12px;
}

.date-verification-actions-label {
    font-size: 0.82rem;
    color: #94A3B8;
    font-weight: 500;
    white-space: nowrap;
    flex-shrink: 0;
    word-break: keep-all;
}

.date-verification-actions-btns {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    flex-wrap: wrap;
    margin-left: auto;
}

.date-verification-actions .date-btn-approve {
    background: rgba(245, 158, 11, 0.2);
    color: #FCD34D;
    border: 1px solid rgba(251, 191, 36, 0.45);
    border-radius: 6px;
    padding: 6px 14px;
    font-weight: 600;
    font-size: 0.85rem;
    cursor: pointer;
    transition: all 0.2s ease;
    white-space: nowrap;
    flex-shrink: 0;
    word-break: keep-all;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 4px;
}

.date-verification-actions .date-btn-approve:hover {
    background: rgba(245, 158, 11, 0.35);
    border-color: #FCD34D;
    color: #FFF;
    box-shadow: 0 0 8px rgba(245, 158, 11, 0.3);
}

.date-verification-actions .date-btn-reject {
    background: rgba(239, 68, 68, 0.2);
    color: #FCA5A5;
    border: 1px solid rgba(239, 68, 68, 0.45);
    border-radius: 6px;
    padding: 6px 14px;
    font-weight: 600;
    font-size: 0.85rem;
    cursor: pointer;
    transition: all 0.2s ease;
    white-space: nowrap;
    flex-shrink: 0;
    word-break: keep-all;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 4px;
}

.date-verification-actions .date-btn-reject:hover {
    background: rgba(239, 68, 68, 0.35);
    border-color: #F87171;
    color: #FFF;
    box-shadow: 0 0 8px rgba(239, 68, 68, 0.3);
}

body.drawer-open {
    overflow: hidden;
}

.behavior-sample-metric { flex: 1 1 100%; flex-wrap: wrap; max-width: 100%; white-space: normal; }

.event-watchlist-duration-value {
    font-weight: 700;
    color: var(--text-primary);
}

.event-watchlist-highlight-items {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.event-watchlist-history-note {
    font-size: 0.75rem;
    color: var(--text-secondary);
}

.comment-review-edit select, .comment-review-edit input {
    background: rgba(15, 23, 42, 0.94);
    color: var(--text-primary);
    border: 1px solid var(--border-color);
    padding: 6px 10px;
    border-radius: 6px;
}

.comment-review-edit button, .comment-review-rule button {
    padding: 6px 12px;
    border-radius: 6px;
    cursor: pointer;
}

/* Wide Backfill Drawer */
.drawer.drawer-wide {
    width: min(760px, 94vw);
}

.social-backfill-toggle-btn {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    cursor: pointer;
    font-weight: 500;
}

.social-backfill-toggle-btn:hover {
    border-color: #A5B4FC;
    color: #FFF;
    box-shadow: 0 0 12px rgba(99, 102, 241, 0.3);
}

/* S-2 Social PK Grid & Sentiment Panel */
.social-pk-grid {
    margin-bottom: 24px;
    align-items: stretch;
}

.social-pk-grid .candidate-card {
    display: flex;
    flex-direction: column;
    height: 100%;
}

.social-pk-grid .candidate-card > h2 {
    margin: 8px 0 6px;
    min-height: 1.8rem;
    display: flex;
    align-items: center;
    justify-content: center;
}

.social-sentiment-panel {
    display: flex;
    flex-direction: column;
    gap: 12px;
    margin-top: auto;
    padding-top: 16px;
    border-top: 1px solid rgba(255, 255, 255, 0.08);
    text-align: left;
}

.social-sentiment-row {
    display: flex;
    flex-direction: column;
    gap: 6px;
    min-height: 52px;
    justify-content: center;
}

.sentiment-row-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.sentiment-label {
    font-size: 0.8rem;
    font-weight: 600;
    color: var(--text-secondary);
}

.sentiment-tags {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
}

.sentiment-tag {
    display: inline-flex;
    align-items: center;
    padding: 3px 8px;
    border-radius: 6px;
    font-size: 0.78rem;
    font-weight: 500;
    white-space: nowrap;
}

.sentiment-tag.positive {
    background: rgba(245, 158, 11, 0.18);
    color: #FCD34D;
    border: 1px solid rgba(251, 191, 36, 0.45);
}

.sentiment-tag.negative {
    background: rgba(239, 68, 68, 0.18);
    color: #FCA5A5;
    border: 1px solid rgba(239, 68, 68, 0.4);
}

.sentiment-tag.hostile {
    background: rgba(168, 85, 247, 0.18);
    color: #D8B4FE;
    border: 1px solid rgba(168, 85, 247, 0.4);
}

.sentiment-tag.bot-clue {
    background: rgba(245, 158, 11, 0.18);
    color: #FCD34D;
    border: 1px solid rgba(245, 158, 11, 0.4);
}

.sentiment-tag.baseline {
    background: rgba(168, 85, 247, 0.18);
    color: #C4B5FD;
    border: 1px solid rgba(196, 181, 253, 0.4);
}

.metric-top-note {
    display: block;
    margin-top: 4px;
    font-size: 0.72rem;
    color: var(--text-muted);
    white-space: nowrap;
}

/* S-2 區 發文數放大與領導加註 */
.pk-post-count-bar {
    display: flex;
    align-items: center;
    justify-content: center;
    flex-wrap: wrap;
    gap: 8px;
    margin-bottom: 16px;
    font-size: 0.95rem;
    color: var(--text-secondary);
    min-height: 40px;
}

.pk-post-count-btn {
    display: inline-flex;
    align-items: baseline;
    gap: 3px;
    background: none;
    border: none;
    cursor: pointer;
    padding: 0;
    transition: var(--transition);
}

.pk-post-count-num {
    font-size: 1.65rem;
    font-weight: 800;
    line-height: 1;
    letter-spacing: -0.02em;
}

.pk-post-count-num.num-dpp {
    color: #34D399;
    text-shadow: 0 0 12px rgba(52, 211, 153, 0.4);
}

.pk-post-count-num.num-kmt {
    color: #60A5FA;
    text-shadow: 0 0 12px rgba(96, 165, 250, 0.4);
}

.pk-post-count-unit {
    font-size: 0.92rem;
    font-weight: 600;
    color: var(--text-secondary);
}

.pk-post-count-excluded {
    font-size: 0.78rem;
    color: var(--text-muted);
}

.pk-leader-badge {
    display: inline-flex;
    align-items: center;
    padding: 2px 8px;
    border-radius: 9999px;
    font-size: 0.72rem;
    font-weight: 700;
    line-height: 1.2;
    background: rgba(245, 158, 11, 0.2);
    color: #FCD34D;
    border: 1px solid rgba(245, 158, 11, 0.5);
    white-space: nowrap;
}

/* S-2 區 全寬縱向堆疊指標卡片 */
.pk-metric-cards-stack {
    display: flex;
    flex-direction: column;
    gap: 10px;
    width: 100%;
    margin-bottom: 16px;
    text-align: left;
}

.pk-metric-card {
    background: rgba(15, 23, 42, 0.55);
    border: 1px solid rgba(255, 255, 255, 0.07);
    border-radius: 12px;
    padding: 12px 14px;
    transition: var(--transition);
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    min-height: 168px;
    box-sizing: border-box;
}

.card-dpp .pk-metric-card {
    border-left: 3px solid rgba(16, 185, 129, 0.6);
}

.card-kmt .pk-metric-card {
    border-left: 3px solid rgba(59, 130, 246, 0.6);
}

.pk-metric-card:hover {
    background: rgba(15, 23, 42, 0.8);
    border-color: rgba(255, 255, 255, 0.14);
}

.pk-metric-main-row {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 6px;
    min-height: 32px;
    flex-shrink: 0;
}

.pk-metric-name {
    font-size: 0.88rem;
    font-weight: 600;
    color: var(--text-secondary);
}

.pk-metric-value-box {
    display: inline-flex;
    align-items: center;
    gap: 8px;
}

.pk-metric-num {
    background: none;
    border: none;
    cursor: pointer;
    font-size: 1.35rem;
    font-weight: 800;
    color: #FFF;
    padding: 0;
    transition: var(--transition);
    text-decoration: underline dotted;
    text-underline-offset: 4px;
}

.pk-metric-num:hover {
    color: #FDBA74;
    text-shadow: 0 0 10px rgba(251, 146, 60, 0.5);
}

.pk-metric-top-detail {
    background: rgba(0, 0, 0, 0.28);
    border: 1px solid rgba(255, 255, 255, 0.04);
    border-radius: 8px;
    padding: 8px 10px;
    margin-bottom: 6px;
    font-size: 0.78rem;
    min-height: 74px;
    height: 74px;
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
    overflow: hidden;
    box-sizing: border-box;
    flex-shrink: 0;
}

.pk-metric-top-empty {
    color: var(--text-muted);
    justify-content: center;
}

.pk-metric-top-header {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-bottom: 4px;
    flex-shrink: 0;
}

.pk-metric-top-tag {
    display: inline-flex;
    align-items: center;
    padding: 1px 6px;
    border-radius: 4px;
    font-size: 0.72rem;
    font-weight: 700;
    background: rgba(99, 102, 241, 0.2);
    color: #A5B4FC;
    border: 1px solid rgba(99, 102, 241, 0.4);
    white-space: nowrap;
}

.pk-metric-top-label {
    font-size: 0.72rem;
    color: var(--text-muted);
}

.pk-metric-top-ref {
    color: var(--text-secondary);
    line-height: 1.4;
    overflow: hidden;
}

.pk-metric-top-ref .social-post-reference {
    display: block;
    line-height: 1.4;
}

.pk-metric-top-ref .social-post-reference time {
    display: inline-block;
    color: var(--text-muted);
    font-size: 0.72rem;
    margin-right: 6px;
}

.pk-metric-top-ref .social-post-reference-link {
    color: #FDBA74 !important;
    text-decoration: none;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
    text-overflow: ellipsis;
    word-break: break-word;
}

.pk-metric-top-ref .social-post-reference-link:hover {
    text-decoration: underline;
}

.pk-metric-baseline {
    display: flex;
    justify-content: space-between;
    align-items: center;
    font-size: 0.75rem;
    color: var(--text-muted);
    padding-top: 4px;
    border-top: 1px dashed rgba(255, 255, 255, 0.06);
    flex-shrink: 0;
}

.pk-metric-baseline strong {
    color: #E2E8F0;
    font-weight: 600;
}

/* ==========================================================================
   F 區: 各家媒體立場與候選人情緒量化分佈 (Media Stance & Sentiment Matrix)
   ========================================================================== */
.media-sentiment-time-controls {
    display: inline-flex;
    align-items: center;
    background: rgba(255, 255, 255, 0.04);
    border: 1px solid rgba(255, 255, 255, 0.12);
    border-radius: 8px;
    padding: 3px;
    gap: 4px;
}

.btn-media-range {
    background: transparent;
    border: none;
    color: #94A3B8;
    font-size: 0.78rem;
    font-weight: 600;
    padding: 5px 12px;
    border-radius: 6px;
    cursor: pointer;
    transition: var(--transition);
    white-space: nowrap;
}

.btn-media-range:hover {
    color: #F8FAFC;
    background: rgba(255, 255, 255, 0.06);
}

.btn-media-range.active {
    color: #FCD34D;
    background: rgba(245, 158, 11, 0.22);
    border: 1px solid rgba(251, 191, 36, 0.45);
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.2);
}

/* 公式說明膠囊條 */
.media-formula-banner {
    background: rgba(99, 102, 241, 0.08);
    border: 1px solid rgba(129, 140, 248, 0.25);
    border-radius: 8px;
    padding: 10px 14px;
}

.media-formula-title {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 0.84rem;
    font-weight: 700;
    color: #C7D2FE;
    margin-bottom: 6px;
}

.formula-badge {
    display: inline-flex;
    padding: 1px 6px;
    background: rgba(99, 102, 241, 0.25);
    border: 1px solid rgba(165, 180, 252, 0.4);
    border-radius: 4px;
    font-size: 0.7rem;
    color: #E0E7FF;
}

.media-formula-content {
    font-size: 0.78rem;
    color: var(--text-secondary);
    line-height: 1.5;
}

.formula-line {
    margin: 2px 0;
}

/* F 區 立場判定標準結構化三行對齊與說明標籤 */
.formula-standards-line {
    display: flex;
    align-items: flex-start;
    gap: 6px;
    margin: 5px 0 2px 0;
}

.formula-standards-label {
    flex-shrink: 0;
    line-height: 1.7;
    color: var(--text-secondary);
}

.formula-standards-block {
    display: inline-flex;
    flex-direction: column;
    gap: 5px;
}

.formula-standard-row {
    display: flex;
    align-items: center;
    line-height: 1.7;
}

.formula-condition {
    display: inline-block;
    min-width: 140px;
    font-family: var(--font-mono, "SF Mono", Consolas, "Liberation Mono", Menlo, monospace);
    font-size: 0.8rem;
    font-weight: 600;
    color: #E2E8F0;
    letter-spacing: 0.02em;
}

.bias-explain-item {
    display: inline-flex;
    align-items: center;
    padding: 2px 8px;
    border-radius: 4px;
    font-size: 0.78rem;
    font-weight: 600;
    line-height: 1.35;
}

.bias-explain-item.bias-kmt {
    background: rgba(30, 58, 138, 0.35);
    border: 1px solid rgba(96, 165, 250, 0.5);
    color: #93C5FD;
}

.bias-explain-item.bias-dpp {
    background: rgba(6, 95, 70, 0.35);
    border: 1px solid rgba(52, 211, 153, 0.5);
    color: #6EE7B7;
}

.bias-explain-item.bias-neutral {
    background: rgba(255, 255, 255, 0.06);
    border: 1px solid rgba(255, 255, 255, 0.18);
    color: #E2E8F0;
}

.formula-note-line {
    color: var(--text-secondary);
    font-size: 0.78rem;
    margin-top: 6px;
    padding-left: 14px;
    line-height: 1.5;
}

@media (max-width: 640px) {
    .formula-standards-line {
        flex-direction: column;
        gap: 4px;
    }

    .formula-standards-block {
        padding-left: 14px;
    }

    .formula-condition {
        min-width: 130px;
    }
}

/* 雙向長條圖外框卡片 */
.media-chart-card {
    background: rgba(255, 255, 255, 0.02);
    border: 1px solid rgba(255, 255, 255, 0.08);
    border-radius: 8px;
    padding: 14px;
}

/* 媒體卡片式對稱矩陣 */
.media-cards-grid {
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.media-card-item {
    padding: 12px 16px;
    border-radius: 8px;
    background: rgba(255, 255, 255, 0.035);
    border: 1px solid rgba(255, 255, 255, 0.1);
    transition: var(--transition);
}

.media-card-item:hover {
    background: rgba(255, 255, 255, 0.06);
    border-color: rgba(255, 255, 255, 0.18);
}

.media-card-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 10px;
    flex-wrap: wrap;
    gap: 8px;
}

.media-card-title-group {
    display: flex;
    align-items: center;
    gap: 8px;
}

.media-rank-num {
    font-size: 0.76rem;
    font-weight: 700;
    color: #94A3B8;
    background: rgba(255, 255, 255, 0.06);
    padding: 2px 6px;
    border-radius: 4px;
}

.media-card-name {
    margin: 0;
    font-size: 0.95rem;
    font-weight: 700;
    color: #F8FAFC;
}

.media-card-total-pill {
    font-size: 0.78rem;
    color: var(--text-secondary);
}

.media-bias-badge {
    display: inline-flex;
    align-items: center;
    padding: 3px 10px;
    border-radius: 12px;
    font-size: 0.78rem;
    font-weight: 700;
    white-space: nowrap;
}

.media-bias-badge.bias-kmt,
.media-bias-badge.bias-badge-kmt {
    background: rgba(30, 58, 138, 0.35);
    border: 1px solid rgba(96, 165, 250, 0.5);
    color: #93C5FD;
}

.media-bias-badge.bias-dpp,
.media-bias-badge.bias-badge-dpp {
    background: rgba(6, 95, 70, 0.35);
    border: 1px solid rgba(52, 211, 153, 0.5);
    color: #6EE7B7;
}

.media-bias-badge.bias-balanced,
.media-bias-badge.bias-badge-neutral {
    background: rgba(255, 255, 255, 0.06);
    border: 1px solid rgba(255, 255, 255, 0.2);
    color: #CBD5E1;
}

/* 模仿 E-2 區：媒體立場淨領先差值走勢指示條 */
.media-spread-wrap {
    margin: 10px 0 14px 0;
    padding: 10px 14px;
    background: rgba(255, 255, 255, 0.02);
    border: 1px solid rgba(255, 255, 255, 0.06);
    border-radius: 8px;
    display: flex;
    flex-direction: column;
    gap: 6px;
}

.media-spread-meta {
    display: flex;
    justify-content: space-between;
    align-items: center;
    font-size: 0.76rem;
    font-weight: 600;
    flex-wrap: wrap;
    gap: 8px;
}

.media-spread-meta .side-dpp {
    color: #6EE7B7;
}

.media-spread-meta .side-kmt {
    color: #93C5FD;
}

.spread-indicator-badge {
    font-size: 0.76rem;
    font-weight: 700;
    padding: 2px 10px;
    border-radius: 9999px;
    letter-spacing: 0.02em;
}

.spread-indicator-badge.spread-lead-kmt {
    background: rgba(30, 58, 138, 0.4);
    border: 1px solid rgba(96, 165, 250, 0.5);
    color: #93C5FD;
}

.spread-indicator-badge.spread-lead-dpp {
    background: rgba(6, 95, 70, 0.4);
    border: 1px solid rgba(52, 211, 153, 0.5);
    color: #6EE7B7;
}

.spread-indicator-badge.spread-lead-neutral {
    background: rgba(255, 255, 255, 0.06);
    border: 1px solid rgba(255, 255, 255, 0.18);
    color: #CBD5E1;
}

.media-spread-track {
    position: relative;
    width: 100%;
    height: 10px;
    background: rgba(255, 255, 255, 0.08);
    border-radius: 9999px;
    overflow: hidden;
    box-shadow: inset 0 1px 3px rgba(0, 0, 0, 0.4);
}

.media-spread-grid-50 {
    position: absolute;
    left: calc(50% - 1px);
    top: 0;
    bottom: 0;
    width: 2px;
    background: rgba(255, 255, 255, 0.5);
    z-index: 3;
    pointer-events: none;
}

.media-spread-fill {
    position: absolute;
    top: 0;
    bottom: 0;
    border-radius: 9999px;
    z-index: 2;
    transition: width 0.35s ease-out;
}

.media-spread-fill.fill-kmt {
    background: linear-gradient(90deg, #2563EB, #60A5FA);
    box-shadow: 0 0 8px rgba(59, 130, 246, 0.7);
}

.media-spread-fill.fill-dpp {
    background: linear-gradient(270deg, #059669, #34D399);
    box-shadow: 0 0 8px rgba(16, 185, 129, 0.7);
}

.media-spread-fill.fill-neutral {
    background: rgba(255, 255, 255, 0.4);
}

.media-spread-axis-labels {
    display: flex;
    justify-content: space-between;
    font-size: 0.7rem;
    color: var(--text-muted);
}

.media-card-body {
    display: flex;
    flex-direction: column;
    gap: 6px;
}

.media-candidate-row {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 6px 10px;
    border-radius: 6px;
    font-size: 0.78rem;
    flex-wrap: wrap;
}

.media-candidate-row.row-dpp {
    background: rgba(16, 185, 129, 0.06);
    border-left: 3px solid #10B981;
}

.media-candidate-row.row-kmt {
    background: rgba(59, 130, 246, 0.06);
    border-left: 3px solid #3B82F6;
}

.media-cand-badge {
    font-weight: 700;
    min-width: 140px;
    cursor: pointer;
    user-select: none;
    transition: opacity 0.2s ease;
}

.media-cand-badge:hover {
    opacity: 0.85;
    text-decoration: underline;
}

.media-cand-badge.cand-dpp {
    color: #A7F3D0;
}

.media-cand-badge.cand-kmt {
    color: #BFDBFE;
}

.media-stats-wrap {
    display: inline-flex;
    align-items: baseline;
    gap: 14px;
    flex-wrap: wrap;
}

.media-stat-cell {
    display: inline-flex;
    align-items: baseline;
    gap: 3px;
    min-width: 48px;
    color: var(--text-secondary);
    cursor: pointer;
    user-select: none;
    transition: color 0.15s ease;
}

.media-stat-cell:hover {
    color: #F8FAFC;
}

.media-stat-cell .clickable-number {
    color: #FDBA74 !important;
}

.media-net-score {
    margin-left: 8px;
    color: var(--text-muted);
    font-size: 0.74rem;
}

.media-net-score strong {
    color: #F8FAFC;
    font-size: 0.88rem;
}

/* ==========================================================================
   新聞情緒查核：按月份分流工作台與人機協同規則校準樣式 (Month Tabs & Calibration)
   ========================================================================== */

/* 月份階梯切換列 */
.sentiment-month-nav {
    display: flex;
    align-items: center;
    gap: 8px;
    margin: 8px 0 14px 0;
    overflow-x: auto;
    padding-bottom: 4px;
    scrollbar-width: thin;
}

.sentiment-month-tab {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 6px 12px;
    border-radius: var(--button-radius, 8px);
    background: rgba(255, 255, 255, 0.05);
    border: 1px solid rgba(196, 181, 253, 0.28);
    color: #C4B5FD !important;
    font-size: 0.82rem;
    font-weight: 600;
    cursor: pointer;
    white-space: nowrap !important;
    word-break: keep-all !important;
    flex-shrink: 0;
    transition: var(--transition, all 0.2s ease);
}

.sentiment-month-tab:hover {
    background: rgba(168, 85, 247, 0.16);
    border-color: rgba(196, 181, 253, 0.6);
    color: #DDD6FE !important;
}

.sentiment-month-tab.is-active {
    background: linear-gradient(135deg, #4F46E5 0%, #6366F1 100%);
    border-color: rgba(199, 210, 254, 0.7);
    color: #FFFFFF !important;
    box-shadow: 0 0 10px rgba(99, 102, 241, 0.5);
}

.sentiment-month-tab.is-completed {
    border-color: rgba(251, 191, 36, 0.55);
}

.sentiment-month-tab .month-tab-pill {
    font-size: 0.74rem;
    padding: 1px 6px;
    border-radius: 9999px;
    background: rgba(0, 0, 0, 0.35);
    color: #E2E8F0;
}

.sentiment-month-tab.is-active .month-tab-pill {
    background: rgba(255, 255, 255, 0.2);
    color: #FFFFFF;
}

/* 人機協同演進橫幅 */
.sentiment-calibration-banner {
    display: flex;
    flex-direction: column;
    gap: 10px;
    margin: 8px 0 14px 0;
    padding: 12px 14px;
    border-radius: 10px;
    background: rgba(15, 23, 42, 0.85);
    border: 1px solid rgba(99, 102, 241, 0.35);
    box-shadow: 0 4px 16px rgba(0, 0, 0, 0.4);
}

.sentiment-calibration-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    flex-wrap: wrap;
    gap: 8px;
}

.sentiment-calibration-title {
    font-size: 0.88rem;
    font-weight: 700;
    color: #F8FAFC;
    display: inline-flex;
    align-items: center;
    gap: 6px;
    white-space: nowrap;
    word-break: keep-all;
}

.sentiment-calibration-actions {
    display: flex;
    align-items: center;
    gap: 8px;
    flex-wrap: wrap;
}

.btn-calibration-action {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    padding: 5px 11px;
    border-radius: 6px;
    font-size: 0.78rem;
    font-weight: 600;
    cursor: pointer;
    white-space: nowrap !important;
    word-break: keep-all !important;
    flex-shrink: 0;
    transition: var(--transition, all 0.2s ease);
}

.btn-calibration-analyze {
    background: rgba(99, 102, 241, 0.2);
    border: 1px solid rgba(165, 180, 252, 0.45);
    color: #C7D2FE !important;
}

.btn-calibration-analyze:hover {
    background: rgba(99, 102, 241, 0.4);
    border-color: rgba(199, 210, 254, 0.8);
    color: #FFFFFF !important;
}

.btn-calibration-apply {
    background: linear-gradient(135deg, #D97706 0%, #F59E0B 100%);
    border: 1px solid rgba(253, 230, 138, 0.55);
    color: #FFFFFF !important;
    box-shadow: 0 2px 8px rgba(245, 158, 11, 0.3);
}

.btn-calibration-apply:hover {
    background: linear-gradient(135deg, #B45309 0%, #D97706 100%);
    border-color: rgba(254, 243, 199, 0.85);
}

.btn-calibration-rules-toggle {
    background: rgba(255, 255, 255, 0.05);
    border: 1px solid rgba(255, 255, 255, 0.15);
    color: #E2E8F0 !important;
}

/* 規則展開列表 */
.sentiment-calibration-rules-list {
    margin-top: 6px;
    padding-top: 8px;
    border-top: 1px dashed rgba(255, 255, 255, 0.12);
    display: flex;
    flex-direction: column;
    gap: 6px;
    max-height: 220px;
    overflow-y: auto;
}

.calibration-rule-item {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 6px 10px;
    border-radius: 6px;
    background: rgba(255, 255, 255, 0.035);
    font-size: 0.76rem;
    gap: 8px;
    flex-wrap: wrap;
}

.calibration-rule-desc {
    color: #E2E8F0;
    line-height: 1.4;
}

.calibration-rule-meta {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    flex-shrink: 0;
    color: var(--text-muted);
}

/* 規則自動校正徽章 */
.badge-sentiment-calibrated {
    display: inline-flex;
    align-items: center;
    gap: 3px;
    padding: 2px 8px;
    border-radius: 9999px;
    background: rgba(168, 85, 247, 0.25);
    border: 1px solid rgba(196, 181, 253, 0.5);
    color: #C4B5FD !important;
    font-size: 0.72rem;
    font-weight: 700;
    white-space: nowrap !important;
    word-break: keep-all !important;
    flex-shrink: 0;
}

/* ==========================================================================
   頂部區塊懸浮導覽列 (Sticky Section Navigation)
   ========================================================================== */
.sticky-section-nav {
    position: sticky;
    top: 0;
    z-index: 100;
    background: rgba(10, 14, 26, 0.88);
    backdrop-filter: blur(16px);
    -webkit-backdrop-filter: blur(16px);
    border-bottom: 1px solid rgba(148, 163, 184, 0.15);
    padding: 8px 0;
    margin-bottom: 16px;
    transition: var(--transition);
}

.section-nav-inner {
    display: flex;
    align-items: center;
    gap: 8px;
    overflow-x: auto;
    scrollbar-width: none;
    -ms-overflow-style: none;
    padding: 2px 8px;
}

.section-nav-inner::-webkit-scrollbar {
    display: none;
}

.section-nav-pill {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 6px 14px;
    border-radius: 9999px;
    background: rgba(255, 255, 255, 0.04);
    border: 1px solid rgba(148, 163, 184, 0.2);
    color: #CBD5E1 !important;
    font-size: 0.82rem;
    font-weight: 600;
    text-decoration: none;
    white-space: nowrap !important;
    word-break: keep-all !important;
    flex-shrink: 0;
    transition: var(--transition);
    cursor: pointer;
}

.section-nav-pill .nav-code {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 1px 6px;
    border-radius: 4px;
    background: rgba(148, 163, 184, 0.2);
    color: #E2E8F0;
    font-size: 0.72rem;
    font-weight: 700;
}

.section-nav-pill:hover {
    background: rgba(245, 158, 11, 0.16);
    border-color: rgba(251, 191, 36, 0.5);
    color: #FCD34D !important;
    text-decoration: none;
}

.section-nav-pill.active {
    background: linear-gradient(135deg, rgba(217, 119, 6, 0.38), rgba(180, 83, 9, 0.26));
    border-color: rgba(251, 191, 36, 0.65);
    color: #FFFFFF !important;
    box-shadow: 0 0 12px rgba(245, 158, 11, 0.25);
}

.section-nav-pill.active .nav-code {
    background: rgba(217, 119, 6, 0.7);
    color: #FFF;
}

/* ==========================================================================
   今日戰情核心動態判讀摘要 (AI 晨報判讀卡片)
   ========================================================================== */
.war-room-morning-brief {
    background: linear-gradient(135deg, rgba(30, 41, 59, 0.85), rgba(15, 23, 42, 0.95));
    border: 1px solid rgba(251, 146, 60, 0.35);
    border-left: 4px solid #F59E0B;
    border-radius: 10px;
    padding: 14px 18px;
    box-shadow: 0 4px 16px rgba(0, 0, 0, 0.4);
    min-width: 0;
    width: 100%;
    max-width: 100%;
    box-sizing: border-box;
}

.morning-brief-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    margin-bottom: 8px;
    flex-wrap: wrap;
}

.morning-brief-title-wrap {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    font-size: 0.95rem;
    font-weight: 700;
    color: #FCD34D;
    white-space: nowrap !important;
}

.morning-brief-title-wrap .brief-icon {
    font-size: 1.15rem;
}

.brief-meta-wrap {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    flex-wrap: wrap;
    font-size: 0.78rem;
    margin-left: auto;
}

.brief-time-window {
    color: #FDBA74;
    background: rgba(245, 158, 11, 0.14);
    border: 1px solid rgba(251, 146, 60, 0.38);
    padding: 2px 8px;
    border-radius: 4px;
    font-weight: 600;
    white-space: nowrap !important;
}

.morning-brief-header .brief-timestamp {
    color: #CBD5E1;
    white-space: nowrap !important;
}

.morning-brief-body {
    color: #F1F5F9;
    font-size: 0.95rem;
    line-height: 1.6;
    letter-spacing: 0.02em;
    overflow-wrap: break-word;
    word-break: break-word;
}

/* ==========================================================================
   五大高階戰情量化指標卡片列 (Strategic Metrics Grid)
   排版結構：上方 3 張、下方 2 張寬幅對稱結構，徹底杜絕文字溢位與 "..." 截斷
   ========================================================================== */
.strategic-metrics-grid {
    display: grid;
    grid-template-columns: repeat(6, minmax(0, 1fr));
    gap: 12px;
    margin-top: 12px;
    min-width: 0;
    width: 100%;
    box-sizing: border-box;
}

.strategic-metrics-grid .strategic-metric-card:nth-child(1),
.strategic-metrics-grid .strategic-metric-card:nth-child(2),
.strategic-metrics-grid .strategic-metric-card:nth-child(3) {
    grid-column: span 2;
}

.strategic-metrics-grid .strategic-metric-card:nth-child(4),
.strategic-metrics-grid .strategic-metric-card:nth-child(5) {
    grid-column: span 3;
}

.strategic-metric-card {
    background: rgba(15, 23, 42, 0.7);
    border: 1px solid rgba(148, 163, 184, 0.22);
    border-radius: 10px;
    padding: 12px 16px;
    display: flex;
    flex-direction: column;
    gap: 4px;
    transition: var(--transition);
    min-width: 0;
    box-sizing: border-box;
}

.strategic-metric-card:hover {
    border-color: rgba(251, 146, 60, 0.45);
    background: rgba(30, 41, 59, 0.75);
    box-shadow: 0 4px 14px rgba(0, 0, 0, 0.35);
}

.card-metric-title {
    font-size: 0.8rem;
    font-weight: 600;
    color: #CBD5E1;
    white-space: nowrap !important;
    letter-spacing: 0.01em;
}

.card-metric-val {
    font-size: 1.05rem;
    font-weight: 700;
    color: #FFF;
    display: flex;
    align-items: center;
    gap: 6px;
    flex-wrap: wrap;
    line-height: 1.35;
}

.card-metric-val .cand-val {
    white-space: nowrap !important;
}

.card-metric-val .cand-val.dpp {
    color: #6EE7B7;
}

.card-metric-val .cand-val.kmt {
    color: #93C5FD;
}

.card-metric-val .val-sep {
    color: var(--text-muted);
    font-size: 0.85rem;
    font-weight: 400;
    white-space: nowrap !important;
}

/* 重要研判結果高亮醒目樣式 (WCAG AAA >= 7:1) */
.card-metric-verdict {
    font-size: 0.88rem;
    font-weight: 700;
    line-height: 1.35;
    margin-top: 2px;
    white-space: nowrap !important;
    overflow: hidden;
    text-overflow: ellipsis;
    display: flex;
    align-items: center;
    gap: 4px;
    letter-spacing: 0.01em;
}

.card-metric-verdict.dpp-lead {
    color: #6EE7B7;
    text-shadow: 0 0 8px rgba(110, 231, 183, 0.25);
}

.card-metric-verdict.kmt-lead {
    color: #93C5FD;
    text-shadow: 0 0 8px rgba(147, 197, 253, 0.25);
}

.card-metric-verdict.tie-lead {
    color: #FDE047;
    text-shadow: 0 0 8px rgba(253, 224, 71, 0.25);
}

/* 指標代表意義說明：寬裕完整呈現，絕對禁止截斷為 "..." */
.card-metric-sub {
    font-size: 0.75rem;
    color: #94A3B8;
    line-height: 1.45;
    margin-top: 3px;
    white-space: normal !important;
    word-break: keep-all;
    overflow-wrap: break-word;
    overflow: visible;
    text-overflow: clip;
}

@media (max-width: 992px) {
    .strategic-metrics-grid {
        grid-template-columns: repeat(2, 1fr);
    }
    .strategic-metrics-grid .strategic-metric-card:nth-child(1),
    .strategic-metrics-grid .strategic-metric-card:nth-child(2),
    .strategic-metrics-grid .strategic-metric-card:nth-child(3),
    .strategic-metrics-grid .strategic-metric-card:nth-child(4) {
        grid-column: span 1;
    }
    .strategic-metrics-grid .strategic-metric-card:nth-child(5) {
        grid-column: span 2;
    }
}

@media (max-width: 640px) {
    .strategic-metrics-grid {
        grid-template-columns: 1fr;
    }
    .strategic-metrics-grid .strategic-metric-card:nth-child(n) {
        grid-column: span 1;
    }
}

/* 50 篇分批漸進式載入狀態指示器 */
.audit-scroll-status {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    padding: 16px 14px;
    margin: 12px 0 16px;
    background: rgba(15, 23, 42, 0.55);
    border: 1px dashed rgba(148, 163, 184, 0.25);
    border-radius: 8px;
    color: #94A3B8;
    font-size: 0.88rem;
    text-align: center;
    white-space: nowrap !important;
    word-break: keep-all !important;
    flex-shrink: 0;
    transition: all 0.2s ease;
}

.audit-scroll-status strong {
    color: #FDBA74;
    font-weight: 700;
}

.audit-scroll-status.is-loading {
    color: #C4B5FD;
    border-color: rgba(196, 181, 253, 0.35);
    background: rgba(168, 85, 247, 0.08);
}

.audit-scroll-status.is-loading::before {
    content: "";
    display: inline-block;
    width: 13px;
    height: 13px;
    border: 2px solid rgba(196, 181, 253, 0.25);
    border-top-color: #C4B5FD;
    border-radius: 50%;
    animation: jobSpin 0.85s linear infinite;
    flex-shrink: 0;
}

.audit-scroll-status.is-end {
    color: #FCD34D;
    border-style: solid;
    border-color: rgba(251, 191, 36, 0.35);
    background: rgba(245, 158, 11, 0.1);
}

/* ==========================================================================
   唯讀戰情看板 (Read-Only Mobile Viewer) 與 快照發布中心 (Snapshot Publish Center)
   ========================================================================== */

/* 頂部控制列「🚀 發布戰情版」按鈕 */
.btn-publish-snapshot {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    padding: 8px 14px;
    font-size: 0.86rem;
    font-weight: 700;
    line-height: 1.2;
    border-radius: var(--button-radius, 8px);
    background: linear-gradient(135deg, rgba(245, 158, 11, 0.28), rgba(180, 83, 9, 0.52));
    border: 1px solid rgba(251, 191, 36, 0.55);
    color: #FCD34D;
    cursor: pointer;
    transition: all 0.2s ease;
    white-space: nowrap;
    flex-shrink: 0;
    word-break: keep-all;
    box-shadow: 0 2px 10px rgba(245, 158, 11, 0.16);
}

.btn-publish-snapshot:hover {
    background: linear-gradient(135deg, rgba(245, 158, 11, 0.42), rgba(180, 83, 9, 0.72));
    border-color: #FCD34D;
    color: #FFFFFF;
    transform: translateY(-1px);
    box-shadow: 0 4px 14px rgba(245, 158, 11, 0.28);
}

.btn-publish-snapshot.has-unpushed-edits {
    background: linear-gradient(135deg, rgba(249, 115, 22, 0.38), rgba(194, 65, 12, 0.62));
    border-color: rgba(253, 186, 116, 0.8);
    color: #FDBA74;
    box-shadow: 0 0 14px rgba(249, 115, 22, 0.35);
}

/* 唯讀版頂部狀態膠囊與操作橫幅 */
.readonly-title-row {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 8px 10px;
    margin-bottom: 4px;
}

.readonly-mode-pill {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    padding: 3px 10px;
    font-size: 0.76rem;
    font-weight: 700;
    line-height: 1.2;
    border-radius: 9999px;
    background: rgba(180, 83, 9, 0.42);
    border: 1px solid rgba(251, 191, 36, 0.55);
    color: #FCD34D;
    white-space: nowrap;
    flex-shrink: 0;
    word-break: keep-all;
}

.readonly-helper-banner {
    display: inline-flex;
    align-items: center;
    padding: 6px 12px;
    border-radius: 8px;
    background: rgba(15, 23, 42, 0.65);
    border: 1px solid rgba(148, 163, 184, 0.22);
    color: #CBD5E1;
    font-size: 0.8rem;
}

.readonly-helper-text {
    line-height: 1.4;
}

/* 唯讀模式新聞情緒標籤（不可編輯，高對比 WCAG AAA） */
.news-readonly-sentiment-badge {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    padding: 2px 8px;
    font-size: 0.75rem;
    font-weight: 700;
    line-height: 1.25;
    border-radius: 9999px;
    white-space: nowrap;
    flex-shrink: 0;
    word-break: keep-all;
    user-select: none;
}

.news-dual-sentiment-panel.is-readonly {
    display: inline-flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 6px 10px;
    padding: 3px 8px;
    border-radius: 8px;
    background: rgba(15, 23, 42, 0.6);
    border: 1px solid rgba(148, 163, 184, 0.2);
}

.dual-readonly-item {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    white-space: nowrap;
    flex-shrink: 0;
    word-break: keep-all;
}

.dual-cand-name {
    font-size: 0.75rem;
    font-weight: 700;
    white-space: nowrap;
    flex-shrink: 0;
    word-break: keep-all;
}

.dual-cand-name.cand-dpp {
    color: #6EE7B7;
}

.dual-cand-name.cand-kmt {
    color: #93C5FD;
}

.sentiment-audit-filter-bar.is-readonly-filter-bar {
    justify-content: space-between;
}

.readonly-drawer-guide-pill {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    font-size: 0.78rem;
    color: #FDBA74;
    font-weight: 600;
    white-space: nowrap;
    flex-shrink: 0;
    word-break: keep-all;
}

/* 發布中心抽屜卡片與表單樣式 */
.publish-center-container {
    display: flex;
    flex-direction: column;
    gap: 14px;
    padding-bottom: 24px;
}

.publish-center-card {
    background: rgba(15, 23, 42, 0.72);
    border: 1px solid rgba(148, 163, 184, 0.2);
    border-radius: 12px;
    padding: 14px 16px;
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.publish-center-card-header,
.publish-card-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 8px;
}

.publish-card-header h4 {
    margin: 0;
    font-size: 0.95rem;
    font-weight: 700;
    color: #FFFFFF;
}

.publish-flash-banner {
    background: rgba(180, 83, 9, 0.42);
    border: 1px solid rgba(251, 191, 36, 0.55);
    color: #FCD34D;
    padding: 10px 14px;
    border-radius: 8px;
    font-size: 0.84rem;
    font-weight: 700;
}

.publish-error-banner {
    background: rgba(153, 27, 27, 0.42);
    border: 1px solid rgba(252, 165, 165, 0.55);
    color: #FCA5A5;
    padding: 10px 14px;
    border-radius: 8px;
    font-size: 0.82rem;
    font-weight: 600;
}

.publish-status-pill {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    padding: 3px 10px;
    font-size: 0.76rem;
    font-weight: 700;
    border-radius: 9999px;
    white-space: nowrap;
    flex-shrink: 0;
    word-break: keep-all;
}

.publish-status-pill.is-synced,
.publish-status-pill.is-fresh {
    background: rgba(180, 83, 9, 0.38);
    border: 1px solid rgba(251, 191, 36, 0.55);
    color: #FCD34D;
}

.publish-status-pill.is-dirty {
    background: rgba(194, 65, 12, 0.42);
    border: 1px solid rgba(253, 186, 116, 0.65);
    color: #FDBA74;
}

.publish-status-pill.is-empty {
    background: rgba(30, 41, 59, 0.75);
    border: 1px solid rgba(148, 163, 184, 0.4);
    color: #CBD5E1;
}

.publish-time-text {
    font-size: 0.78rem;
    color: #CBD5E1;
    white-space: nowrap;
    flex-shrink: 0;
    word-break: keep-all;
}

.publish-metrics-row {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 8px;
}

.publish-metric-item {
    background: rgba(10, 14, 26, 0.65);
    border: 1px solid rgba(255, 255, 255, 0.06);
    border-radius: 8px;
    padding: 8px 10px;
    display: flex;
    flex-direction: column;
    gap: 2px;
}

.publish-metric-label {
    font-size: 0.74rem;
    color: #94A3B8;
    white-space: nowrap;
    word-break: keep-all;
}

.publish-metric-val {
    font-size: 1.05rem;
    font-weight: 700;
    color: #FDBA74;
    white-space: nowrap;
    word-break: keep-all;
}

.publish-actions-stack,
.publish-actions-row {
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.publish-auto-toggle {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    font-size: 0.8rem;
    color: #CBD5E1;
    cursor: pointer;
}

.btn-publish-action {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    padding: 10px 14px;
    font-size: 0.88rem;
    font-weight: 700;
    border-radius: 8px;
    cursor: pointer;
    text-decoration: none;
    transition: all 0.2s ease;
    white-space: nowrap;
    flex-shrink: 0;
    word-break: keep-all;
    background: rgba(15, 23, 42, 0.85);
    border: 1px solid rgba(251, 146, 60, 0.45);
    color: #FDBA74 !important;
}

.btn-publish-action:hover {
    background: rgba(180, 83, 9, 0.42);
    border-color: #FDBA74;
    color: #FFFFFF !important;
}

.btn-publish-action.primary,
.btn-publish-action.is-primary {
    background: linear-gradient(135deg, rgba(217, 119, 6, 0.65), rgba(180, 83, 9, 0.85));
    border: 1px solid rgba(251, 191, 36, 0.7);
    color: #FFFFFF !important;
}

.btn-publish-action.primary:hover,
.btn-publish-action.is-primary:hover {
    background: linear-gradient(135deg, rgba(245, 158, 11, 0.78), rgba(180, 83, 9, 0.95));
    border-color: #FCD34D;
}

.btn-publish-action.is-accent {
    background: linear-gradient(135deg, rgba(168, 85, 247, 0.38), rgba(107, 33, 168, 0.65));
    border: 1px solid rgba(196, 181, 253, 0.65);
    color: #DDD6FE !important;
}

.btn-publish-action.is-accent:hover {
    background: linear-gradient(135deg, rgba(168, 85, 247, 0.55), rgba(107, 33, 168, 0.82));
    color: #FFFFFF !important;
}

.publish-url-box {
    background: rgba(10, 14, 26, 0.72);
    border: 1px solid rgba(148, 163, 184, 0.22);
    border-radius: 8px;
    padding: 10px 12px;
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.publish-url-line {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 6px;
}

.publish-url-label {
    font-size: 0.78rem;
    color: #94A3B8;
    white-space: nowrap;
    flex-shrink: 0;
    word-break: keep-all;
}

.publish-url-buttons {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
}

.publish-cloud-config-details {
    background: rgba(10, 14, 26, 0.55);
    border: 1px solid rgba(148, 163, 184, 0.2);
    border-radius: 8px;
    padding: 8px 12px;
    font-size: 0.82rem;
    color: #CBD5E1;
}

.publish-cloud-config-details summary {
    cursor: pointer;
    font-weight: 700;
    color: #FDBA74;
}

.publish-cloud-form {
    display: flex;
    flex-direction: column;
    gap: 10px;
    margin-top: 10px;
}

.publish-form-field {
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.publish-form-field label {
    font-size: 0.76rem;
    color: #94A3B8;
}

.publish-form-field input {
    background: rgba(15, 23, 42, 0.9);
    border: 1px solid rgba(148, 163, 184, 0.35);
    border-radius: 6px;
    padding: 7px 10px;
    color: #F8FAFC;
    font-size: 0.82rem;
}

.publish-form-field input:focus {
    outline: none;
    border-color: #FDBA74;
}

.publish-card-title {
    margin: 0;
    font-size: 0.94rem;
    font-weight: 700;
    color: #FFFFFF;
}

.publish-card-desc {
    margin: 0;
    font-size: 0.8rem;
    color: #CBD5E1;
    line-height: 1.45;
}

.publish-share-url-row {
    display: flex;
    align-items: center;
    gap: 8px;
    flex-wrap: wrap;
}

.publish-url-link {
    color: #FDBA74 !important;
    font-size: 0.84rem;
    font-weight: 700;
    text-decoration: underline;
    word-break: break-all;
}

.btn-copy-share {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    padding: 5px 10px;
    font-size: 0.78rem;
    font-weight: 700;
    border-radius: 6px;
    background: rgba(180, 83, 9, 0.38);
    border: 1px solid rgba(251, 191, 36, 0.5);
    color: #FCD34D;
    cursor: pointer;
    white-space: nowrap;
    flex-shrink: 0;
    word-break: keep-all;
}

.btn-copy-share:hover {
    background: rgba(180, 83, 9, 0.6);
    color: #FFFFFF;
}

.publish-config-form {
    display: flex;
    flex-direction: column;
    gap: 8px;
    margin-top: 4px;
}

.publish-form-label {
    display: flex;
    flex-direction: column;
    gap: 4px;
    font-size: 0.78rem;
    color: #CBD5E1;
}

.publish-form-checkbox {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 0.8rem;
    color: #E2E8F0;
    cursor: pointer;
}

.publish-input {
    background: rgba(10, 14, 26, 0.85);
    border: 1px solid rgba(148, 163, 184, 0.35);
    border-radius: 6px;
    padding: 7px 10px;
    color: #F8FAFC;
    font-size: 0.82rem;
}

.publish-input:focus {
    outline: none;
    border-color: #FDBA74;
}

.publish-cloud-note {
    font-size: 0.76rem;
    padding: 6px 10px;
    border-radius: 6px;
    line-height: 1.4;
}

.publish-cloud-note.is-ok {
    background: rgba(180, 83, 9, 0.28);
    border: 1px solid rgba(251, 191, 36, 0.45);
    color: #FCD34D;
}

.publish-cloud-note.is-warn {
    background: rgba(180, 83, 9, 0.25);
    border: 1px solid rgba(252, 211, 77, 0.45);
    color: #FCD34D;
}

/* 手機版上滑抽屜把手（桌面端隱藏，手機端顯示） */
.drawer-mobile-grabber {
    display: none;
}

/* ==========================================================================
   手機版 9:16 行動閱讀排版與底部上滑式抽屜 (Mobile 9:16 Layout & Bottom-Sheet @ <= 768px)
   ========================================================================== */
@media (max-width: 768px) {
    .app-container {
        padding: 12px 10px;
    }

    .glass-header {
        padding: 12px 14px;
        margin-bottom: 12px;
        gap: 10px;
    }

    .logo-area {
        flex-direction: row !important;
        align-items: center !important;
        gap: 10px !important;
        width: 100%;
    }

    .logo-icon {
        width: 34px;
        height: 34px;
        flex-shrink: 0;
    }

    .title-group {
        min-width: 0;
        flex: 1;
    }

    .title-group h1 {
        font-size: 1.05rem;
        line-height: 1.3;
    }

    .readonly-title-row {
        gap: 6px 8px;
    }

    .readonly-helper-banner {
        width: 100%;
        box-sizing: border-box;
        font-size: 0.76rem;
        padding: 6px 10px;
    }

    /* 導覽列改為 2 欄對稱網格，完整呈現 A ~ F 所有章節，杜絕 B 之後被橫向截斷 */
    .sticky-section-nav {
        position: relative;
        padding: 8px;
        margin-bottom: 14px;
        border-radius: 12px;
        border: 1px solid rgba(148, 163, 184, 0.18);
    }

    .section-nav-inner {
        display: grid;
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 6px;
        overflow-x: visible;
        padding: 0;
    }

    .section-nav-pill {
        width: 100%;
        box-sizing: border-box;
        justify-content: flex-start;
        padding: 7px 10px;
        font-size: 0.78rem;
        border-radius: 8px;
    }

    .section-nav-pill:last-child {
        grid-column: 1 / -1;
        justify-content: center;
    }

    /* A 區與 AI 晨報摘要：強制 minmax(0, 1fr) 防止內部 nowrap 撐爆 9:16 螢幕 */
    .overview-panel {
        grid-template-columns: minmax(0, 1fr) !important;
        padding: 14px 12px;
        gap: 14px;
    }

    .overview-summary,
    .overview-chart-wrap {
        min-width: 0;
        max-width: 100%;
        box-sizing: border-box;
    }

    .war-room-morning-brief {
        padding: 12px 14px;
        min-width: 0;
        width: 100%;
        max-width: 100%;
        box-sizing: border-box;
    }

    .morning-brief-header {
        flex-direction: column;
        align-items: flex-start;
        gap: 6px;
    }

    .morning-brief-title-wrap {
        white-space: normal !important;
        font-size: 0.92rem;
        line-height: 1.35;
    }

    .brief-meta-wrap {
        margin-left: 0;
        width: 100%;
        flex-direction: column;
        align-items: flex-start;
        gap: 4px;
    }

    .brief-time-window {
        white-space: normal !important;
        display: block;
        width: 100%;
        box-sizing: border-box;
        font-size: 0.75rem;
        line-height: 1.4;
    }

    .morning-brief-header .brief-timestamp {
        white-space: normal !important;
        font-size: 0.74rem;
    }

    .morning-brief-body {
        font-size: 0.9rem;
        line-height: 1.55;
    }

    .strategic-metrics-grid {
        grid-template-columns: minmax(0, 1fr) !important;
        gap: 8px;
    }

    .strategic-metrics-grid .strategic-metric-card:nth-child(n) {
        grid-column: span 1 !important;
        padding: 10px 12px;
    }

    .card-metric-title,
    .card-metric-verdict {
        white-space: normal !important;
    }

    .drawer-mobile-grabber {
        display: flex;
        justify-content: center;
        align-items: center;
        padding: 4px 0 10px;
        cursor: pointer;
        flex-shrink: 0;
    }

    .drawer-mobile-grabber span {
        width: 44px;
        height: 5px;
        border-radius: 9999px;
        background: rgba(148, 163, 184, 0.45);
    }

    #auditDrawer.drawer,
    #auditDrawer.drawer.drawer-wide {
        top: auto;
        bottom: 0;
        left: 0;
        right: 0;
        width: 100vw;
        max-width: 100vw;
        height: 86vh;
        max-height: 88vh;
        border-left: none;
        border-top: 1px solid rgba(251, 146, 60, 0.32);
        border-radius: 20px 20px 0 0;
        padding: 12px 16px 20px;
        transform: translateY(105%);
        box-shadow: 0 -12px 40px rgba(0, 0, 0, 0.75);
    }

    #auditDrawer.drawer.open,
    #auditDrawer.drawer.drawer-wide.open {
        transform: translateY(0);
    }

    .drawer-header {
        margin-bottom: 12px;
        padding-bottom: 10px;
    }

    .drawer-header h3 {
        font-size: 1rem;
    }

    .news-audit-item {
        padding: 12px;
    }

    .news-audit-item > a {
        font-size: 0.95rem;
        line-height: 1.45;
        display: block;
        margin-bottom: 6px;
    }

    .publish-metrics-row {
        grid-template-columns: 1fr;
    }
}