/* ── Noto Sans SC, self-hosted (WOFF2 subsets from @fontsource/noto-sans-sc) ── */
/* Latin subset (small, loads first for English/digits) */
@font-face {
    font-family: 'Noto Sans SC';
    font-style: normal;
    font-weight: 400;
    font-display: swap;
    src: url('../assets/fonts/noto-sans-sc-latin-400-normal.woff2') format('woff2');
    unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
    font-family: 'Noto Sans SC';
    font-style: normal;
    font-weight: 500;
    font-display: swap;
    src: url('../assets/fonts/noto-sans-sc-latin-500-normal.woff2') format('woff2');
    unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
    font-family: 'Noto Sans SC';
    font-style: normal;
    font-weight: 700;
    font-display: swap;
    src: url('../assets/fonts/noto-sans-sc-latin-700-normal.woff2') format('woff2');
    unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
/* Simplified Chinese subset */
@font-face {
    font-family: 'Noto Sans SC';
    font-style: normal;
    font-weight: 400;
    font-display: swap;
    src: url('../assets/fonts/noto-sans-sc-chinese-simplified-400-normal.woff2') format('woff2');
    unicode-range: U+4E00-9FFF, U+3000-303F, U+FF00-FFEF, U+2026, U+201C, U+201D, U+2018, U+2019;
}
@font-face {
    font-family: 'Noto Sans SC';
    font-style: normal;
    font-weight: 500;
    font-display: swap;
    src: url('../assets/fonts/noto-sans-sc-chinese-simplified-500-normal.woff2') format('woff2');
    unicode-range: U+4E00-9FFF, U+3000-303F, U+FF00-FFEF, U+2026, U+201C, U+201D, U+2018, U+2019;
}
@font-face {
    font-family: 'Noto Sans SC';
    font-style: normal;
    font-weight: 700;
    font-display: swap;
    src: url('../assets/fonts/noto-sans-sc-chinese-simplified-700-normal.woff2') format('woff2');
    unicode-range: U+4E00-9FFF, U+3000-303F, U+FF00-FFEF, U+2026, U+201C, U+201D, U+2018, U+2019;
}

* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

:root {
    --bg-body: #f4f6f9;
    --bg-white: #ffffff;
    --bg-panel: #ffffff;
    --bg-header: #1a4f8b;
    --bg-header-dark: #153d6e;
    --accent: #1a4f8b;
    --accent-light: #e8f0fa;
    --accent-hover: #2268b0;
    --accent-subtle: #cddcf0;
    --border: #e2e8f0;
    --border-light: #edf1f6;
    --text-primary: #1e293b;
    --text-secondary: #475569;
    --text-muted: #94a3b8;
    --text-on-accent: #ffffff;
    --tag-politics: #dc2626;
    --tag-politics-bg: #fef2f2;
    --tag-trade: #b45309;
    --tag-trade-bg: #fffbeb;
    --tag-economy: #0d7a3e;
    --tag-economy-bg: #f0fdf4;
    --tag-logistics: #1d64b4;
    --tag-logistics-bg: #eff6ff;
    --tag-disaster: #9333ea;
    --tag-disaster-bg: #faf5ff;
    --tag-policy: #0891b2;
    --tag-policy-bg: #ecfeff;
    --tag-social: #c2410c;
    --tag-social-bg: #fff7ed;
    --tag-supplier: #7c3aed;
    --tag-supplier-bg: #f5f3ff;
    /* New 2026 categories: 关键枢纽 / 航司船司 / 海关 */
    --tag-hub: #0f766e;
    --tag-hub-bg: #f0fdfa;
    --tag-carrier: #4338ca;
    --tag-carrier-bg: #eef2ff;
    --tag-customs: #be185d;
    --tag-customs-bg: #fdf2f8;
    --shadow-sm: 0 1px 3px rgba(0, 0, 0, 0.06);
    --shadow-md: 0 2px 8px rgba(0, 0, 0, 0.07);
    --shadow-lg: 0 4px 16px rgba(0, 0, 0, 0.08);
    --panel-radius: 10px;
}

body {
    font-family: 'Noto Sans SC', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
    background:
        linear-gradient(180deg, #d0dff2 0%, #e2ecf6 25%, #eef3f9 50%, #f7f9fc 75%, #ffffff 100%);
    background-attachment: fixed;
    color: var(--text-primary);
    min-height: 100vh;
    overflow-x: hidden;
    overflow-y: scroll; /* Always reserve scrollbar gutter to avoid tab-switch width flicker */
    -webkit-font-smoothing: antialiased;
    position: relative;
    /* Flex column layout so the footer can be pushed to the bottom when
       page content is short (sticky footer). */
    display: flex;
    flex-direction: column;
}

/* The main content area grows to fill remaining vertical space so the
   footer sits flush against the bottom of the viewport on short pages. */
.main-content {
    flex: 1 0 auto;
}
.site-footer {
    flex-shrink: 0;
}

/* Subtle large block pattern overlay */
body::before {
    content: '';
    position: fixed;
    top: 0; left: 0; right: 0; bottom: 0;
    background-image:
        linear-gradient(0deg, rgba(160, 185, 220, 0.04) 1px, transparent 1px),
        linear-gradient(90deg, rgba(160, 185, 220, 0.04) 1px, transparent 1px),
        linear-gradient(0deg, rgba(140, 170, 210, 0.025) 2px, transparent 2px),
        linear-gradient(90deg, rgba(140, 170, 210, 0.025) 2px, transparent 2px);
    background-size: 120px 120px, 120px 120px, 240px 240px, 240px 240px;
    pointer-events: none;
    z-index: 0;
}

/* Subtle top accent glow */
body::after {
    content: '';
    position: fixed;
    top: 0; left: 0; right: 0; bottom: 0;
    background:
        radial-gradient(ellipse 800px 400px at 30% 0%, rgba(130, 175, 235, 0.10) 0%, transparent 70%),
        radial-gradient(ellipse 600px 350px at 75% 0%, rgba(145, 185, 235, 0.07) 0%, transparent 70%);
    pointer-events: none;
    z-index: 0;
}

/* Ensure all content sits above the overlays */
.header, .process-flow, .main-content {
    position: relative;
    z-index: 1;
}



/* ── Animation Keyframes ── */
@keyframes fadeInUp {
    from { opacity: 0; transform: translateY(24px); }
    to { opacity: 1; transform: translateY(0); }
}

@keyframes fadeIn {
    from { opacity: 0; }
    to { opacity: 1; }
}

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

@keyframes slideInRight {
    from { opacity: 0; transform: translateX(20px); }
    to { opacity: 1; transform: translateX(0); }
}

@keyframes scaleIn {
    from { opacity: 0; transform: scale(0.92); }
    to { opacity: 1; transform: scale(1); }
}

@keyframes shimmer {
    0% { background-position: -200% center; }
    100% { background-position: 200% center; }
}

@keyframes gradientFlow {
    0% { background-position: 0% 50%; }
    50% { background-position: 100% 50%; }
    100% { background-position: 0% 50%; }
}

@keyframes pulseGlow {
    0%, 100% { box-shadow: 0 0 0 0 rgba(26, 79, 139, 0.2); }
    50% { box-shadow: 0 0 14px 4px rgba(26, 79, 139, 0.08); }
}

/* ── Header ── */
.header {
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0.7rem clamp(1rem, 3vw, 11rem);
    background: var(--bg-header);
    position: relative;
}

.header::after {
    content: '';
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    height: 2px;
    background: linear-gradient(90deg, transparent 5%, rgba(91,163,230,0.5) 50%, transparent 95%);
}

.header-left {
    position: absolute;
    left: 2rem;
    display: flex;
    align-items: center;
    gap: 14px;
}

.header-logo-mark {
    flex-shrink: 0;
}
.header-logo-mark svg { width: 28px; height: 28px; }

.header-center-title {
    font-size: 1.25rem;
    font-weight: 700;
    letter-spacing: 0.2em;
    color: var(--text-on-accent);
    text-shadow: 0 1px 8px rgba(255, 255, 255, 0.18);
}

.header-right {
    position: absolute;
    right: 2rem;
    display: flex;
    align-items: center;
    gap: 10px;
    font-size: 0.88rem;
    color: rgba(255, 255, 255, 0.8);
    font-variant-numeric: tabular-nums;
}

.header-dot {
    width: 7px;
    height: 7px;
    border-radius: 50%;
    background: #5ba3e6;
    animation: pulse-dot 2.5s ease-in-out infinite;
}

@keyframes pulse-dot {
    0%, 100% { opacity: 1; }
    50% { opacity: 0.35; }
}

/* ── Last Updated Bar (under header) ── */
.last-updated-bar {
    display: flex;
    align-items: center;
    justify-content: center;
    flex-wrap: wrap;
    gap: 8px;
    padding: 6px 16px;
    margin: 0;
    background: linear-gradient(180deg, rgba(26, 79, 139, 0.06) 0%, rgba(26, 79, 139, 0.02) 100%);
    border-bottom: 1px solid var(--border-light, #e3e8ef);
    font-size: 0.78rem;
    color: var(--text-secondary, #5a6a7e);
    font-variant-numeric: tabular-nums;
    line-height: 1.4;
}
.last-updated-icon {
    color: #1a4f8b;
    font-size: 0.82rem;
}
.last-updated-label {
    font-weight: 600;
    color: var(--text-primary, #1a4f8b);
    letter-spacing: 0.04em;
}
.last-updated-value {
    color: var(--text-primary, #1a2b3d);
    font-weight: 500;
}
.last-updated-commit {
    display: inline-flex;
    align-items: center;
    padding: 1px 8px;
    border-radius: 10px;
    background: rgba(91, 163, 230, 0.14);
    color: #1a4f8b;
    font-family: ui-monospace, "SF Mono", Menlo, Consolas, monospace;
    font-size: 0.72rem;
    text-decoration: none;
    transition: background 0.15s ease;
}
.last-updated-commit:hover {
    background: rgba(91, 163, 230, 0.28);
    text-decoration: none;
}
.last-updated-bar.is-error .last-updated-value {
    color: #b54a4a;
}

/* ── Overview page overrides ── */
.overview-page .last-updated-bar {
    border-bottom: none;
}
/* On overview the only tab group is the 干线/毛细 nav pill — left-aligned
   with a subtle bottom rule to separate nav from content. */
.overview-page .tab-bar {
    justify-content: flex-start;
    padding: 0 18px 0.3rem;
    margin-bottom: 0.3rem;
}
.overview-page .top20-wrap {
    padding-top: 8px;
}

@media (max-width: 768px) {
    .last-updated-bar {
        padding: 5px 10px;
        font-size: 0.7rem;
        gap: 6px;
    }
    .last-updated-icon { font-size: 0.74rem; }
    .last-updated-commit { font-size: 0.66rem; padding: 1px 6px; }
}
@media (max-width: 360px) {
    .last-updated-bar { padding: 4px 8px; font-size: 0.66rem; }
    .last-updated-label { letter-spacing: 0.02em; }
}

/* ── Global News Search Bar ── */
.global-search-bar {
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: stretch;
    padding: 6px clamp(1rem, 5vw, 14rem) 0;
    background: linear-gradient(180deg, rgba(26, 79, 139, 0.05) 0%, rgba(26, 79, 139, 0.01) 100%);
}
.global-search-row {
    display: flex;
    align-items: center;
    gap: 12px;
    justify-content: space-between;
    padding-bottom: 6px;
}
.global-search-input-group {
    position: relative;
    flex: 0 1 420px;
    min-width: 120px;
}
.global-search-wrap {
    display: flex;
    align-items: center;
    background: var(--bg-panel, #fff);
    border: 1px solid var(--border-light, #e3e8ef);
    border-radius: 20px;
    padding: 5px 12px;
    gap: 8px;
    transition: border-color 0.2s, box-shadow 0.2s;
}
.global-search-wrap:focus-within {
    border-color: var(--accent, #1a4f8b);
    box-shadow: 0 0 0 2.5px rgba(26, 79, 139, 0.12);
}
.global-search-icon {
    color: var(--text-muted, #8a9bb0);
    flex-shrink: 0;
}
.global-search-input {
    flex: 1;
    border: none;
    outline: none;
    background: transparent;
    font-size: 0.82rem;
    color: var(--text-primary, #1a2b3d);
    font-family: inherit;
    min-width: 0;
}
.global-search-input::placeholder {
    color: var(--text-muted, #8a9bb0);
}
.global-search-count {
    font-size: 0.74rem;
    color: var(--text-muted, #8a9bb0);
    white-space: nowrap;
    flex-shrink: 0;
}
.global-search-clear {
    background: none;
    border: none;
    cursor: pointer;
    color: var(--text-muted, #8a9bb0);
    font-size: 1rem;
    padding: 0;
    line-height: 1;
    flex-shrink: 0;
    transition: color 0.15s;
}
.global-search-clear:hover { color: var(--text-primary, #1a2b3d); }
.global-search-results {
    position: absolute;
    top: calc(100% + 2px);
    left: 0;
    right: 0;
    background: var(--bg-panel, #fff);
    border: 1px solid var(--border-light, #e3e8ef);
    border-radius: 0 0 12px 12px;
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.1);
    max-height: 360px;
    overflow-y: auto;
    z-index: 200;
}
.global-search-result-item {
    padding: 9px 14px;
    border-bottom: 1px solid var(--border-light, #e3e8ef);
    cursor: pointer;
    display: flex;
    flex-direction: column;
    gap: 3px;
    transition: background 0.15s;
}
.global-search-result-item:last-child { border-bottom: none; }
.global-search-result-item:hover { background: rgba(26, 79, 139, 0.05); }
.global-search-result-headline {
    font-size: 0.82rem;
    color: var(--text-primary, #1a2b3d);
    line-height: 1.4;
}
.global-search-result-meta {
    display: flex;
    align-items: center;
    gap: 6px;
    font-size: 0.72rem;
    color: var(--text-muted, #8a9bb0);
}
.global-search-result-tag {
    display: inline-block;
    padding: 1px 6px;
    border-radius: 8px;
    background: var(--accent-light, #e8f1fb);
    color: var(--accent, #1a4f8b);
    font-size: 0.7rem;
    font-weight: 600;
}
.global-search-result-nav {
    display: inline-flex;
    align-items: center;
    gap: 3px;
    margin-left: auto;
    padding: 1px 7px;
    border-radius: 8px;
    background: rgba(91, 163, 230, 0.13);
    color: #2563a8;
    font-size: 0.68rem;
    font-weight: 500;
    white-space: nowrap;
    flex-shrink: 0;
}
/* Flash highlight when a search result navigates to an article in the page */
@keyframes news-focus-flash {
    0%   { box-shadow: 0 0 0 3px rgba(26, 79, 139, 0.55); background-color: rgba(26, 79, 139, 0.08); }
    70%  { box-shadow: 0 0 0 3px rgba(26, 79, 139, 0.15); background-color: rgba(26, 79, 139, 0.03); }
    100% { box-shadow: 0 0 0 0px rgba(26, 79, 139, 0);    background-color: transparent; }
}
.news-focus-highlight {
    animation: news-focus-flash 1.8s ease-out forwards;
    border-radius: 4px;
}
.global-search-no-results {
    padding: 18px;
    text-align: center;
    font-size: 0.8rem;
    color: var(--text-muted, #8a9bb0);
}
/* ── Last-updated inline (right of search bar) ── */
.last-updated-inline {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 6px;
    font-size: 0.78rem;
    color: var(--text-secondary, #5a6a7e);
    font-variant-numeric: tabular-nums;
    white-space: nowrap;
    flex-shrink: 0;
}
.last-updated-inline .last-updated-icon {
    color: #1a4f8b;
    font-size: 0.82rem;
}
.last-updated-inline .last-updated-label {
    font-weight: 600;
    color: var(--text-primary, #1a4f8b);
    letter-spacing: 0.04em;
}
.last-updated-inline .last-updated-value {
    color: var(--text-primary, #1a2b3d);
    font-weight: 500;
}
.last-updated-inline.is-error .last-updated-value { color: #b54a4a; }
/* ── Loading progress bar ── */
.load-progress-wrap {
    width: 100%;
    height: 2px;
    background: transparent;
    overflow: hidden;
    transition: opacity 0.5s ease 0.2s;
}
.load-progress-bar {
    height: 100%;
    width: 0%;
    background: linear-gradient(90deg, var(--accent, #1a4f8b) 0%, #5ba3e6 100%);
    border-radius: 2px;
    transition: width 0.3s ease;
}
.load-progress-wrap.done {
    opacity: 0;
    pointer-events: none;
}
@media (max-width: 768px) {
    .global-search-bar { padding: 6px 0.6rem 0; }
    .global-search-row { flex-wrap: wrap; }
    .global-search-input-group { flex: 1 1 200px; }
    .last-updated-inline { font-size: 0.72rem; gap: 4px; }
}


/* ── Process Flow ── */
.process-flow {
    display: flex;
    align-items: center;
    justify-content: space-evenly;
    gap: 0;
    padding: 0.7rem 1.2rem;
    background: var(--bg-panel);
    border: 1px solid var(--border);
    margin: 0.5rem 0;
    border-radius: var(--panel-radius);
    box-shadow: var(--shadow-sm);
    position: relative;
    overflow: hidden;
    animation: fadeInUp 0.6s ease-out 0.15s both;
}

.process-flow::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 2px;
    background: linear-gradient(90deg, transparent 10%, var(--accent-subtle) 50%, transparent 90%);
    opacity: 0.45;
    border-radius: 3px 3px 0 0;
}

.flow-step {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 4px;
    min-width: 68px;
    flex: 1;
}

.flow-icon {
    width: 38px;
    height: 38px;
    border-radius: 10px;
    border: 1.5px solid var(--accent-subtle);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 0.95rem;
    color: var(--accent);
    background: var(--accent-light);
    transition: background 0.25s ease, border-color 0.25s ease, box-shadow 0.25s ease;
}

.flow-icon:hover {
    background: var(--accent-subtle);
    border-color: var(--accent);
    box-shadow: 0 3px 10px rgba(26, 79, 139, 0.12);
}

.flow-label {
    font-size: 0.74rem;
    color: var(--text-secondary);
    font-weight: 500;
    letter-spacing: 0.03em;
    white-space: nowrap;
}

.flow-arrow {
    color: var(--accent);
    font-size: 0.7rem;
    opacity: 0.35;
    margin: 0 0.35rem;
    margin-bottom: 18px;
    flex-shrink: 0;
}

/* ── Main Content ── */
.main-content {
    padding: 0 clamp(1rem, 5vw, 14rem) clamp(0.8rem, 1.8vh, 1.4rem);
}

/* ── Tab Bar ── */
.tab-bar {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.9rem 1.6rem; /* row-gap for wrap, column-gap = space BETWEEN pill groups */
    margin-bottom: 0.8rem;
    margin-top: 0.4rem;
}

/* Each pill group renders as a single rounded pill with segmented buttons.
   A sliding indicator (::before) moves behind the active .tab-btn for a
   smooth cross-tab transition. */
.tab-pill-group {
    position: relative;
    display: inline-flex;
    align-items: stretch;
    border-radius: var(--panel-radius);
    background: var(--bg-white);
    box-shadow: var(--shadow-sm), inset 0 1px 0 rgba(255, 255, 255, 0.86);
    overflow: hidden; /* clip indicator to pill's rounded corners */
    border: 1px solid var(--border);
    isolation: isolate; /* create own stacking context for indicator */
}

/* Sliding background indicator for the active .tab-btn inside a pill group.
   JS sets --ind-left / --ind-width / --ind-opacity on the pill group. */
.tab-pill-group::before {
    content: '';
    position: absolute;
    top: var(--ind-top, 0px);
    left: var(--ind-left, 0px);
    width: var(--ind-width, 0px);
    height: var(--ind-height, 100%);
    background: linear-gradient(135deg, #184b85 0%, var(--accent) 55%, #2268b0 100%);
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.18), 0 8px 18px rgba(26, 79, 139, 0.18);
    /* No border-radius here: the pill-group's overflow:hidden already clips
       the indicator to the outer rounded corners, and a square inner edge
       lets the 干线 fill butt seamlessly against the trunk-subtabs blue
       background (no white notch between them). */
    opacity: var(--ind-opacity, 1);
    transition:
        top   0.5s cubic-bezier(0.2, 0.78, 0.24, 1),
        left  0.5s cubic-bezier(0.2, 0.78, 0.24, 1),
        width 0.5s cubic-bezier(0.2, 0.78, 0.24, 1),
        height 0.5s cubic-bezier(0.2, 0.78, 0.24, 1),
        opacity 0.26s ease;
    pointer-events: none;
    z-index: 0;
}
/* Skip the slide on first paint / during layout recalcs so the indicator
   doesn't streak across the pill from (0,0). JS toggles this class. */
.tab-pill-group.pill-no-anim::before {
    transition: none;
}

.tab-btn {
    position: relative;
    z-index: 1;
    padding: 0.38rem 1.1rem;
    border: none;
    border-left: 1px solid var(--border);
    background: transparent;
    color: var(--text-muted);
    font-family: inherit;
    font-size: 0.76rem;
    font-weight: 600;
    line-height: 1.25;
    cursor: pointer;
    transition: color 0.32s ease, transform 0.32s ease, text-shadow 0.32s ease;
    transform: translateY(0);
    letter-spacing: 0.04em;
    display: inline-flex;
    align-items: center;
    gap: 6px;
    white-space: nowrap;
}

/* First button in each pill group has no left divider */
.tab-pill-group .tab-btn:first-child,
.tab-pill-group > .tab-btn-trunk {
    border-left: none;
}

.tab-btn.active {
    background: transparent; /* indicator provides the fill */
    color: var(--text-on-accent);
    text-shadow: 0 1px 8px rgba(255, 255, 255, 0.18);
}

.tab-btn:hover:not(.active) {
    color: var(--accent);
}

/* Keep 毛细 visually separate from the 干线 + 子分类 cluster. */
.tab-btn-capillary {
    margin-left: 14px;
    padding-left: 1.2rem;
    border-left: none;
}

.tab-btn-capillary::before {
    content: '';
    position: absolute;
    left: -8px;
    top: 6px;
    bottom: 6px;
    width: 2px;
    border-radius: 999px;
    background: linear-gradient(180deg, rgba(100, 116, 139, 0.14), rgba(100, 116, 139, 0.6), rgba(100, 116, 139, 0.14));
}

.tab-btn-capillary::after {
    content: '';
    position: absolute;
    left: -14px;
    top: 5px;
    bottom: 5px;
    width: 12px;
    background: linear-gradient(90deg, rgba(255, 255, 255, 0), rgba(241, 245, 249, 0.8));
    pointer-events: none;
}

@keyframes tabSelectPop {
    0%   { transform: scale(0.985); }
    48%  { transform: scale(1.035); }
    100% { transform: scale(1); }
}

.tab-btn.tab-switch-pop,
.trunk-subtab.tab-switch-pop {
    animation: tabSelectPop 0.42s cubic-bezier(0.2, 0.78, 0.24, 1);
}

@keyframes tabActiveGlow {
    0%   { filter: brightness(1); }
    45%  { filter: brightness(1.16); }
    100% { filter: brightness(1); }
}

.tab-pill-group.tab-indicator-pulse::before,
.trunk-subtabs.tab-indicator-pulse::before {
    animation: tabActiveGlow 0.48s ease;
}

/* ── Trunk embedded sub-tabs ── */
.trunk-subtabs {
    position: relative;
    display: inline-flex;
    align-items: stretch;
    max-width: 0;
    opacity: 0;
    overflow: hidden;
    background: var(--accent);
    transition:
        max-width 0.48s cubic-bezier(0.2, 0.78, 0.24, 1),
        opacity 0.28s ease 0.05s;
    will-change: max-width, opacity;
    isolation: isolate;
}

/* Sliding white pill indicator for the active sub-tab. JS sets
   --sub-ind-left / --sub-ind-width on .trunk-subtabs. */
.trunk-subtabs::before {
    content: '';
    position: absolute;
    top: 4px;
    bottom: 4px;
    left: var(--sub-ind-left, 0px);
    width: var(--sub-ind-width, 0px);
    background: #fff;
    border-radius: 6px;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.12);
    transition:
        left  0.48s cubic-bezier(0.2, 0.78, 0.24, 1),
        width 0.48s cubic-bezier(0.2, 0.78, 0.24, 1);
    pointer-events: none;
    z-index: 0;
}
.trunk-subtabs.pill-no-anim::before {
    transition: none;
}

/* When trunk tab is active, expand sub-tabs inline within the pill */
.tab-btn-trunk.active + .trunk-subtabs {
    max-width: 560px;
    opacity: 1;
}

.trunk-subtab {
    position: relative;
    z-index: 1;
    border: none;
    background: transparent;
    color: rgba(255, 255, 255, 0.85);
    font-family: inherit;
    font-size: 0.76rem;
    font-weight: 600;
    line-height: 1.25;
    letter-spacing: 0.04em;
    padding: 0.38rem 0.95rem;
    margin: 4px 2px;
    border-radius: 6px;
    cursor: pointer;
    white-space: nowrap;
    transition: color 0.28s ease;
}
.trunk-subtab:first-child { margin-left: 4px; }
.trunk-subtab:last-child  { margin-right: 6px; }

.trunk-subtab:hover:not(.active) {
    color: #fff;
}

.trunk-subtab.active {
    background: transparent; /* sliding indicator provides the white pill */
    color: var(--accent);
    box-shadow: none;
}

/* Divider between trunk (+sub-tabs) block and 毛细 button */
.tab-btn-trunk.active + .trunk-subtabs + .tab-btn {
    border-left: none;
}
.tab-btn-trunk:not(.active) + .trunk-subtabs + .tab-btn {
    border-left: 1px solid var(--border);
}

.tab-btn-trunk.active + .trunk-subtabs + .tab-btn-capillary {
    border-left: none;
}

/* ── Narrow-screen layout (≤720px): stack pill groups vertically as
   full-width rows. The main pill becomes a 2-row box: row 1 is
   [干线 | 毛细] split 50/50, row 2 is the trunk-subtabs flush blue
   strip — no gap, no floating detached pill. The pill's overflow:hidden
   clips both rows to the outer rounded corners so the edges line up
   cleanly. ── */
@media (max-width: 720px) {
    .tab-bar {
        flex-direction: column;
        align-items: stretch;
        gap: 0.55rem;
    }
    .tab-pill-group {
        width: 100%;
        display: flex;
    }
    .tab-pill-group-main {
        flex-wrap: wrap;
        /* keep overflow:hidden so the subtabs blue strip is clipped to the
           pill's outer rounded corners — that produces the seamless edge. */
    }
    .tab-pill-group-main > .tab-btn-trunk,
    .tab-pill-group-main > .tab-btn[data-tab="capillary"] {
        flex: 1 1 50%;
        justify-content: center;
        min-height: 42px;
        font-size: 0.82rem;
    }
    .tab-btn-capillary {
        margin-left: 0;
    }
    .tab-btn-capillary::before {
        left: 0;
        top: 10px;
        bottom: 10px;
    }
    /* On mobile the sub-tab strip is always anchored in its own full-width
       row (flex-basis:100%, order:10) so the [干线 | 毛细] row-1 positions
       stay stable during the transition. Visibility is driven by max-height
       (vertical slide) instead of the desktop max-width squeeze, letting the
       main indicator glide cleanly between 干线 and 毛细. */
    .trunk-subtabs {
        flex-basis: 100%;
        max-width: 100%;
        order: 10;
        margin: 0;
        border-radius: 0;
        justify-content: space-between;
        max-height: 0;
        opacity: 0;
        transition:
            max-height 0.35s cubic-bezier(0.22, 0.61, 0.36, 1),
            opacity    0.24s ease 0.05s;
    }
    .tab-btn-trunk.active + .trunk-subtabs {
        max-height: 60px;
        opacity: 1;
    }
    .tab-btn-trunk.active + .trunk-subtabs + .tab-btn {
        border-left: 1px solid var(--border);
    }
    .trunk-subtab {
        flex: 1 1 0;
        justify-content: center;
        text-align: center;
        padding: 0.5rem 0.4rem;
        margin: 6px 2px;
    }
    /* Analytics pill: equal-share buttons, comfortable tap targets, allow
       text wrap so long Chinese labels never overflow. */
    .tab-pill-group-analytics > .tab-btn {
        flex: 1 1 0;
        min-width: 0;
        min-height: 44px;
        padding: 0.55rem 0.5rem;
        font-size: 0.74rem;
        letter-spacing: 0.02em;
        white-space: normal;
        text-align: center;
        justify-content: center;
        line-height: 1.2;
        gap: 4px;
    }
    .tab-pill-group-analytics .tab-badge {
        font-size: 0.62rem;
        padding: 0 5px;
        min-width: 14px;
        height: 14px;
        line-height: 14px;
    }
}

/* Phones (≤520px): friendlier rounding + slightly tighter type. */
@media (max-width: 520px) {
    .tab-pill-group { border-radius: 14px; }
    .tab-pill-group-main > .tab-btn-trunk,
    .tab-pill-group-main > .tab-btn[data-tab="capillary"] {
        font-size: 0.84rem;
        padding: 0.6rem 0.5rem;
    }
    .trunk-subtab {
        font-size: 0.78rem;
        padding: 0.48rem 0.35rem;
    }
}

/* Extra-small phones (≤360px): drop one more notch so three analytics
   buttons still fit on a single row without truncation. */
@media (max-width: 360px) {
    .tab-pill-group-analytics > .tab-btn {
        font-size: 0.68rem;
        padding: 0.5rem 0.3rem;
        letter-spacing: 0;
    }
    .trunk-subtab {
        font-size: 0.74rem;
        padding: 0.42rem 0.25rem;
    }
}

/* ── Tab Panels — cross-fade with vertical micro-lift ── */
.tab-panel {
    display: none;
    opacity: 0;
    transform: translateY(8px);
    transition: opacity 0.26s cubic-bezier(0.22, 0.61, 0.36, 1),
                transform 0.26s cubic-bezier(0.22, 0.61, 0.36, 1);
    will-change: opacity, transform;
}

.tab-panel.active,
.tab-panel.tab-panel-exiting {
    display: block;
}

.tab-panel.active {
    opacity: 1;
    transform: translateY(0);
}

.tab-panel.tab-panel-exiting {
    opacity: 0;
    transform: translateY(-6px);
    pointer-events: none;
    transition: opacity 0.18s ease,
                transform 0.18s ease;
}

/* Staggered child reveal inside entering tab panels */
.tab-panel.active > * {
    animation: tabChildReveal 0.32s cubic-bezier(0.22, 0.61, 0.36, 1) both;
}
.tab-panel.active > *:nth-child(1) { animation-delay: 0.04s; }
.tab-panel.active > *:nth-child(2) { animation-delay: 0.08s; }
.tab-panel.active > *:nth-child(3) { animation-delay: 0.12s; }
.tab-panel.active > *:nth-child(n+4) { animation-delay: 0.16s; }

.tab-panel.active > .trunk-section {
    animation: none;
}

@keyframes tabChildReveal {
    from { opacity: 0; transform: translateY(6px); }
    to   { opacity: 1; transform: translateY(0); }
}

#tab-capillary.active {
    display: block;
}

/* -- Subtle Website Motion -- */
.main-content {
    animation: pageSettle 0.42s ease both;
}

@keyframes pageSettle {
    from { opacity: 0; transform: translateY(6px); }
    to   { opacity: 1; transform: translateY(0); }
}

.global-search-wrap,
.last-updated-inline,
.country-explorer,
.top-news-banner,
.matrix-scroll-wrapper,
.top20-list,
.focus-header,
.tracking-wrap {
    transition: box-shadow 0.22s ease, border-color 0.22s ease, transform 0.22s ease, background-color 0.22s ease;
}

.global-search-wrap:focus-within,
.country-explorer:hover,
.top-news-banner:hover,
.matrix-scroll-wrapper:hover {
    box-shadow: var(--shadow-md);
}

.news-item,
.ce-filter-pill,
.matrix-table tbody tr,
.top20-item,
.focus-action-btn,
.dist-btn,
.global-search-clear,
.ce-search-clear {
    transition: box-shadow 0.18s ease, border-color 0.18s ease, background-color 0.18s ease, color 0.18s ease, opacity 0.18s ease;
}

.news-item:hover,
.top20-item:hover {
    box-shadow: inset 3px 0 0 var(--accent-subtle, #5ba3e6);
}

.ce-filter-pill:hover,
.focus-action-btn:hover,
.dist-btn:hover,
.global-search-clear:hover,
.ce-search-clear:hover {
    transform: translateY(-1px);
}

@media (prefers-reduced-motion: reduce) {
    *,
    *::before,
    *::after {
        animation-duration: 0.001ms !important;
        animation-iteration-count: 1 !important;
        scroll-behavior: auto !important;
        transition-duration: 0.001ms !important;
    }
    .tab-panel,
    .tab-panel.tab-panel-exiting,
    .trunk-section,
    .trunk-section-active,
    .trunk-section-exiting {
        transition-duration: 0.26s !important;
        animation-duration: 0.32s !important;
    }
    .tab-pill-group::before,
    .trunk-subtabs::before {
        transition-duration: 0.5s !important;
    }
}

/* ── Section Header Row ── */
.section-header-row {
    display: flex;
    gap: 0.8rem;
    margin-bottom: 0.8rem;
    align-items: stretch;
}

.section-title {
    font-size: 1rem;
    font-weight: 700;
    letter-spacing: 0.1em;
    line-height: 1.8;
    color: var(--text-on-accent);
    background: var(--accent);
    border-radius: var(--panel-radius);
    padding: 0.6rem 0.2rem;
    display: flex;
    align-items: center;
    justify-content: center;
    text-align: center;
    position: relative;
    width: 1.8em;
    max-width: 1.8em;
    height: fit-content;
    align-self: start;
    box-shadow: var(--shadow-md);
    overflow-wrap: break-word;
    word-break: break-all;
    flex-shrink: 0;
}

.section-title.overview-title {
    background: linear-gradient(135deg, #0f766e 0%, #14b8a6 100%);
}

/* ── Top News Banner ── */
.top-news-banner {
    display: flex;
    flex-direction: column;
    background: var(--bg-panel);
    border: 1px solid var(--border);
    border-radius: var(--panel-radius);
    overflow: hidden;
    box-shadow: var(--shadow-sm);
    position: relative;
    animation: scaleIn 0.5s ease-out 0.3s both;
    margin-bottom: 0.8rem;
}

.banner-merged-header {
    text-align: center;
    font-size: 0.92rem;
    font-weight: 700;
    color: var(--text-on-accent);
    padding: 0.45rem 1rem;
    background: linear-gradient(135deg, var(--accent) 0%, #2268b0 100%);
    letter-spacing: 0.22em;
    position: relative;
    overflow: hidden;
}

/* shimmer removed — cleaner static header */

.banner-cols {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    flex: 1;
}

.banner-col {
    padding: 0.85rem 1rem;
    border-right: 1px solid var(--border-light);
}

.banner-col:last-child {
    border-right: none;
}

.banner-col-title {
    font-size: 0.82rem;
    font-weight: 700;
    color: var(--accent);
    margin-bottom: 0.55rem;
    padding-bottom: 0.4rem;
    border-bottom: 2px solid var(--accent-light);
    letter-spacing: 0.1em;
}

.banner-list {
    list-style: none;
    display: flex;
    flex-direction: column;
    gap: 0;
}

.banner-list li {
    font-size: 0.78rem;
    color: var(--text-secondary);
    line-height: 1.5;
    padding: 0.35rem 0;
    border-bottom: 1px solid var(--border-light);
    cursor: default;
    transition: color 0.2s, background 0.15s;
    display: flex;
    align-items: flex-start;
    flex-wrap: wrap;
    gap: 7px;
}

.banner-list li:last-child {
    border-bottom: none;
}

.banner-list li:hover {
    color: var(--text-primary);
}

.banner-list .banner-idx {
    color: var(--accent);
    font-weight: 700;
    font-size: 0.72rem;
    min-width: 16px;
    flex-shrink: 0;
    background: var(--accent-light);
    text-align: center;
    border-radius: 3px;
    padding: 1px 0;
    line-height: 1.5;
}

.banner-date {
    color: var(--text-muted, #94a3b8);
    font-size: 0.7rem;
    flex-shrink: 0;
    font-variant-numeric: tabular-nums;
}

/* ── Region Grid ── */
.region-section .section-title,
.carrier-section .section-title,
.customs-section .section-title {
    align-self: start;
}

.region-grid {
    flex: 1;
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 0.8rem;
    overflow-x: auto;
    padding-bottom: 0.3rem;
}

.region-block {
    background: var(--bg-panel);
    border: 1px solid var(--border);
    border-radius: var(--panel-radius);
    overflow: hidden;
    box-shadow: var(--shadow-sm);
}

.region-header {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 0.6rem 1rem;
    border-bottom: 1px solid var(--border);
    background: linear-gradient(135deg, var(--accent-light) 0%, var(--bg-white) 100%);
}

.region-flag {
    font-size: 1.1rem;
}

.region-name {
    font-size: 0.92rem;
    font-weight: 700;
    color: var(--text-primary);
    letter-spacing: 0.06em;
}

.region-news-list {
    padding: 0.3rem 0;
    max-height: 320px;
    overflow-y: auto;
}

.region-news-list::-webkit-scrollbar {
    width: 4px;
}

.region-news-list::-webkit-scrollbar-track {
    background: transparent;
}

.region-news-list::-webkit-scrollbar-thumb {
    background: var(--accent-subtle);
    border-radius: 4px;
}

/* ── News Item ── */
.news-item {
    display: flex;
    align-items: center;
    gap: 6px;
    padding: 0.5rem 1rem;
    border-bottom: 1px solid var(--border-light);
    transition: background 0.15s;
    cursor: default;
    flex-wrap: wrap;
}

.news-item:last-child {
    border-bottom: none;
}

.news-item:hover {
    background: #f8fafc;
}

.news-id {
    font-size: 0.68rem;
    color: var(--text-muted);
    font-weight: 600;
    min-width: 40px;
    flex-shrink: 0;
    font-family: 'Consolas', 'Monaco', monospace;
}

.news-headline {
    flex: 1 1 60%;
    min-width: 55%;
    font-size: 0.8rem;
    color: var(--text-secondary);
    line-height: 1.55;
}

/* Pills container (tags + new + priority badge) — wraps as a group to a new row
   when there isn't enough space next to the headline, preventing the title from
   being squeezed too narrow. */
.news-tag-row {
    display: inline-flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 6px;
    flex-shrink: 0;
    max-width: 100%;
    margin-left: auto;
}

.news-tag {
    font-size: 0.65rem;
    font-weight: 600;
    padding: 2px 8px;
    border-radius: 4px;
    flex-shrink: 0;
    letter-spacing: 0.04em;
    white-space: nowrap;
}

.news-tag.politics {
    background: var(--tag-politics-bg);
    color: var(--tag-politics);
}

.news-tag.trade {
    background: var(--tag-trade-bg);
    color: var(--tag-trade);
}

.news-tag.economy {
    background: var(--tag-economy-bg);
    color: var(--tag-economy);
}

.news-tag.logistics {
    background: var(--tag-logistics-bg);
    color: var(--tag-logistics);
}

.news-tag.disaster {
    background: var(--tag-disaster-bg);
    color: var(--tag-disaster);
}

.news-tag.policy {
    background: var(--tag-policy-bg);
    color: var(--tag-policy);
}

.news-tag.social {
    background: var(--tag-social-bg);
    color: var(--tag-social);
}

.news-tag.supplier {
    background: var(--tag-supplier-bg);
    color: var(--tag-supplier);
    line-height: 1.3;
    text-align: center;
    padding: 2px 6px;
    white-space: nowrap;
    min-width: max-content;
}

.news-tag.hub {
    background: var(--tag-hub-bg);
    color: var(--tag-hub);
}

.news-tag.carrier {
    background: var(--tag-carrier-bg);
    color: var(--tag-carrier);
}

.news-tag.customs {
    background: var(--tag-customs-bg);
    color: var(--tag-customs);
}

.news-new-pill {
    font-size: 0.58rem;
    font-weight: 700;
    padding: 1px 5px;
    border-radius: 3px;
    background: #dc2626;
    color: #fff;
    flex-shrink: 0;
    letter-spacing: 0.03em;
}

/* ── Placeholder Panel ── */
.placeholder-panel {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    min-height: 400px;
    background: var(--bg-panel);
    border: 1px solid var(--border);
    border-radius: var(--panel-radius);
    color: var(--text-muted);
    font-size: 1rem;
    gap: 0.8rem;
    box-shadow: var(--shadow-sm);
}

.placeholder-panel i {
    font-size: 2.5rem;
    opacity: 0.3;
    color: var(--accent);
}

/* ── Remove dark-theme decorative corners ── */
.region-block::before,
.region-block::after,
.top-news-banner::before,
.top-news-banner::after,
.process-flow::after,
.section-title::before {
    display: none;
}

/* ── Matrix Table (毛细 tab) ── */
.matrix-toolbar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 0.6rem;
    gap: 1rem;
}

.matrix-toolbar-label {
    font-size: 0.82rem;
    color: var(--text-muted);
}

.matrix-toolbar-label strong {
    color: var(--accent);
    font-weight: 700;
}

.matrix-toolbar-right {
    display: flex;
    align-items: center;
    gap: 0.5rem;
}

.matrix-filter-select {
    padding: 0.4rem 0.6rem;
    border: 1px solid var(--border);
    border-radius: 6px;
    font-size: 0.8rem;
    color: var(--text-primary);
    background: var(--bg-white);
    outline: none;
    cursor: pointer;
    transition: border-color 0.2s;
}

.matrix-filter-select:focus {
    border-color: var(--accent);
    box-shadow: 0 0 0 3px rgba(26, 79, 139, 0.08);
}

.matrix-search {
    padding: 0.4rem 0.8rem;
    border: 1px solid var(--border);
    border-radius: 6px;
    font-size: 0.8rem;
    color: var(--text-primary);
    background: var(--bg-white);
    outline: none;
    width: 200px;
    transition: border-color 0.2s;
}

.matrix-search:focus {
    border-color: var(--accent);
    box-shadow: 0 0 0 3px rgba(26, 79, 139, 0.08);
}

.matrix-scroll-wrapper {
    background: var(--bg-panel);
    border: 1px solid var(--border);
    border-radius: var(--panel-radius);
    box-shadow: var(--shadow-sm);
    overflow-x: auto;
    overflow-y: auto;
    max-height: min(calc(100vh - 170px), calc(100dvh - 170px));
    min-height: clamp(260px, 52vh, 640px);
    scroll-behavior: smooth;
    scrollbar-width: thin;
    scrollbar-color: #c1cad6 transparent;
}
.matrix-scroll-wrapper::-webkit-scrollbar {
    width: 10px;
    height: 10px;
}
.matrix-scroll-wrapper::-webkit-scrollbar-thumb {
    background: #c1cad6;
    border-radius: 6px;
    border: 2px solid transparent;
    background-clip: content-box;
}
.matrix-scroll-wrapper::-webkit-scrollbar-thumb:hover {
    background: #8fa0b5;
    background-clip: content-box;
    border: 2px solid transparent;
}
.matrix-scroll-wrapper::-webkit-scrollbar-track {
    background: transparent;
}

.matrix-table {
    width: 100%;
    border-collapse: collapse;
    font-size: 0.76rem;
    table-layout: fixed;
    min-width: 850px;
}

.matrix-table thead {
    position: sticky;
    top: 0;
    z-index: 10;
}

.matrix-table th {
    background: var(--accent);
    color: var(--text-on-accent);
    font-weight: 600;
    padding: 0.5rem 0.45rem;
    text-align: center;
    border: 1px solid rgba(255,255,255,0.15);
    white-space: nowrap;
    letter-spacing: 0.04em;
}

.matrix-table th.merged-header {
    background: #133d6b;
    font-size: 0.8rem;
    letter-spacing: 0.12em;
    padding: 0.4rem;
}

.matrix-table th.row-num-header,
.matrix-table th.country-header,
.matrix-table th.continent-header {
    background: #164a7a;
}

.matrix-table td {
    padding: 0.3rem 0.35rem;
    text-align: center;
    border: 1px solid var(--border-light);
    vertical-align: middle;
    transition: background 0.1s;
}

/* Subtle tint on risk cells so the grid is readable at a glance */
.matrix-table td.risk-cell.risk-low      { background: #f4faf6; }
.matrix-table td.risk-cell.risk-medium   { background: #fdfaee; }
.matrix-table td.risk-cell.risk-high     { background: #fdf4f4; }
.matrix-table td.risk-cell.risk-critical { background: #fbeaea; }

.matrix-table tbody tr:hover td {
    background: #eef4fb;
}
.matrix-table tbody tr:hover td.risk-cell.risk-low      { background: #e5f3ea; }
.matrix-table tbody tr:hover td.risk-cell.risk-medium   { background: #faf3dd; }
.matrix-table tbody tr:hover td.risk-cell.risk-high     { background: #fae8e8; }
.matrix-table tbody tr:hover td.risk-cell.risk-critical { background: #f5d6d6; }

/* ── 干线 Matrix (关键枢纽 / 航司船司 / 海關) ── */
.trunk-matrix-wrap {
    display: flex;
    flex-direction: column;
    gap: 10px;
}
.trunk-matrix-toolbar {
    margin-bottom: 0;
}
.trunk-matrix-summary {
    margin-left: auto;
    font-size: 0.78rem;
    color: var(--text-muted);
    white-space: nowrap;
}
.trunk-matrix-summary strong {
    color: var(--accent);
    font-weight: 700;
}
.trunk-matrix-table {
    min-width: 760px;
}
.trunk-matrix-table tr.trunk-row-clickable { cursor: pointer; }
.trunk-matrix-table tr.trunk-row-clickable:hover td { background: rgba(59, 130, 246, 0.08); }
.trunk-matrix-table tr.trunk-row-clickable:hover td.country-cell { color: var(--accent); }
/* Force pointer cursor across every clickable cell in the row, even when the
   mouse is hovering over text (otherwise the browser shows an I-beam over
   text content). The leading 片区 / 类型 grouped cells stay non-clickable
   and use the default arrow cursor. */
.trunk-matrix-table tr.trunk-row-clickable td,
.trunk-matrix-table tr.trunk-row-clickable td * {
    cursor: pointer;
    user-select: none;
}
.trunk-matrix-table tr.trunk-row-clickable td.continent-cell,
.trunk-matrix-table tr.trunk-row-clickable td.continent-cell *,
.trunk-matrix-table tr.trunk-row-clickable td.continent-cell.grouped-cell,
.trunk-matrix-table tr.trunk-row-clickable td.continent-cell.grouped-cell * {
    cursor: default;
    user-select: none;
}
/* When hovering, also tint the inner sticky label of grouped (片区/类型) cells so they match. */
.trunk-matrix-table tr.trunk-row-clickable:hover td.grouped-cell > .grouped-label {
    background: #e8eff7;
}
.trunk-matrix-table td.country-cell {
    left: 0;
    white-space: normal;
    word-break: break-word;
}
.trunk-matrix-table td.continent-cell {
    left: auto;
    position: static;
    width: 64px;
    min-width: 56px;
    max-width: 72px;
    white-space: nowrap;
    padding: 0.25rem 0.3rem;
    font-size: 0.72rem;
}
.trunk-matrix-table th.continent-header {
    left: auto;
    position: static;
    width: 64px;
    min-width: 56px;
    max-width: 72px;
}
.trunk-matrix-empty {
    padding: 2rem 1rem !important;
    text-align: center !important;
    color: var(--text-muted);
    font-size: 0.85rem;
    background: #fafbfd !important;
}

/* Trunk section: news card + matrix unified as ONE card */
.trunk-section {
    display: none;
    opacity: 0;
    transform: translateY(8px);
    transition: opacity 0.26s cubic-bezier(0.22, 0.61, 0.36, 1),
                transform 0.26s cubic-bezier(0.22, 0.61, 0.36, 1);
    will-change: opacity, transform;
    flex-direction: column;
    gap: 0;
    margin-bottom: 1.2rem;
    background: var(--bg-panel);
    border: 1px solid var(--border);
    border-radius: var(--panel-radius);
    box-shadow: var(--shadow-sm), inset 0 1px 0 rgba(255, 255, 255, 0.86);
    overflow: hidden;
}

.trunk-section-active,
.trunk-section-exiting {
    display: flex;
}

.trunk-section-active {
    opacity: 1;
    transform: translateY(0);
}

.trunk-section-exiting {
    opacity: 0;
    transform: translateY(-6px);
    pointer-events: none;
    transition: opacity 0.18s ease,
                transform 0.18s ease;
}
.trunk-section .top-news-banner.trunk-news-banner {
    border: none;
    border-radius: 0;
    box-shadow: none;
    margin-bottom: 0;
    animation: none;
    background: transparent;
}
.trunk-section .trunk-matrix-wrap {
    padding: 0.8rem 0 0;
    gap: 0.6rem;
    border-top: 1px solid var(--border);
}
.trunk-section .trunk-matrix-toolbar {
    padding: 0 0.9rem;
}
.trunk-section .matrix-scroll-wrapper {
    border: none;
    border-radius: 0;
    box-shadow: none;
    background: transparent;
}
.trunk-news-banner {
    margin-bottom: 0;
}
.trunk-news-cols {
    display: flex;
    flex-wrap: wrap;
    gap: 0;
}
.trunk-news-col {
    flex: 1 1 25%;
    max-width: 100%;
    min-width: 0;
    padding: 0.7rem 0.85rem;
}
.trunk-news-col .banner-col-title {
    font-size: 0.78rem;
    margin-bottom: 0.45rem;
    padding-bottom: 0.35rem;
}
.trunk-news-list li {
    display: flex;
    flex-direction: column;
    gap: 4px;
    padding: 0.45rem 0;
    font-size: 0.74rem;
    line-height: 1.45;
    width: 100%;
    min-width: 0;
    overflow: hidden;
}
.trunk-news-row {
    display: flex;
    flex-wrap: nowrap;
    align-items: center;
    gap: 5px 6px;
    width: 100%;
    min-width: 0;
}
.trunk-news-row-main {
    display: inline-flex;
    align-items: center;
    gap: 5px 6px;
    flex: 1 1 auto;
    min-width: 0;
    overflow: hidden;
}
.trunk-news-name {
    font-weight: 600;
    color: var(--text-primary);
    flex: 1 1 auto;
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.trunk-news-badge {
    font-size: 0.65rem !important;
    padding: 1px 6px !important;
    flex-shrink: 0;
}
.trunk-news-title {
    display: block;
    color: var(--accent);
    font-size: 0.74rem;
    font-weight: 600;
    line-height: 1.4;
    margin-top: 2px;
    width: 100%;
    min-width: 0;
    max-width: 100%;
    overflow: hidden;
    word-break: break-word;
    overflow-wrap: anywhere;
}
.trunk-news-headline {
    display: block;
    color: var(--text-secondary);
    font-size: 0.72rem;
    line-height: 1.4;
    width: 100%;
    min-width: 0;
    max-width: 100%;
    overflow: hidden;
    word-break: break-word;
    overflow-wrap: anywhere;
}
.trunk-news-ai-block {
    display: block;
    background: transparent;
    border-left: none;
    padding: 2px 0;
    border-radius: 0;
    margin-top: 2px;
    width: 100%;
    min-width: 0;
    max-width: 100%;
    overflow: hidden;
}
.trunk-news-ai-head {
    display: flex;
    align-items: center;
    gap: 4px;
    font-size: 0.66rem;
    font-weight: 600;
    color: var(--text-muted);
    letter-spacing: 0.04em;
    margin-bottom: 2px;
}
.trunk-news-ai-icon {
    font-size: 0.7rem;
    line-height: 1;
    color: var(--text-muted);
}
.trunk-news-ai-body {
    font-size: 0.7rem;
    line-height: 1.45;
    color: var(--text-secondary);
    font-style: italic;
    /* single line, right-edge fade via mask */
    display: block;
    width: 100%;
    min-width: 0;
    max-width: 100%;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: clip;
    -webkit-mask-image: linear-gradient(to right, #000 88%, transparent 100%);
    mask-image: linear-gradient(to right, #000 88%, transparent 100%);
}
.trunk-news-ai-empty {
    color: var(--text-muted);
    font-style: italic;
}
.trunk-news-list .banner-date {
    flex: 0 0 auto;
    margin-left: auto;
    white-space: nowrap;
}
.trunk-news-empty {
    color: var(--text-muted);
    font-style: italic;
    font-size: 0.72rem !important;
}
@media (max-width: 1200px) {
    .trunk-news-col { flex-basis: 25%; }
}
@media (max-width: 900px) {
    .trunk-news-col { flex-basis: 25%; }
}
@media (max-width: 640px) {
    .trunk-news-col { flex-basis: 100%; }
}
.matrix-table td.country-cell {
    text-align: left;
    font-weight: 600;
    color: var(--text-primary);
    white-space: nowrap;
    padding-left: 0.6rem;
    background: #fafbfd;
    position: sticky;
    left: 0;
    z-index: 2;
}

.matrix-table td.continent-cell {
    text-align: center;
    font-size: 0.72rem;
    font-weight: 600;
    color: var(--text-secondary);
    white-space: nowrap;
    background: #fafbfd;
    vertical-align: middle;
    width: 72px;
    min-width: 60px;
    max-width: 80px;
    padding: 0.25rem 0.3rem;
}

.matrix-table th.continent-header {
    position: static;
    width: 72px;
    min-width: 60px;
    max-width: 80px;
}

.matrix-table th.country-header {
    position: sticky;
    left: 0;
    z-index: 12;
}

/* merged grouped cells (rowspan) — neutral, non-blue text + white-ish bg */
.matrix-table td.grouped-cell {
    background: #ffffff;
    border-left: 1px solid var(--border-light);
    border-right: 1px solid var(--border-light);
    font-weight: 600;
    color: var(--text-primary);
    letter-spacing: 0.03em;
    vertical-align: top;
    padding-top: 0;
    padding-bottom: 0;
}
.matrix-table td.grouped-cell > .grouped-label {
    position: sticky;
    top: 66px;
    display: block;
    padding: 0.55rem 0.4rem;
    background: #ffffff;
    z-index: 2;
    color: var(--text-primary);
}

.matrix-table tbody tr:nth-child(even) td {
    background-color: #f8fafc;
}

.matrix-table tbody tr:nth-child(even) td.country-cell {
    background-color: #f3f5f8;
}
.matrix-table tbody tr:nth-child(even) td.continent-cell:not(.grouped-cell) {
    background-color: #f3f5f8;
}

.matrix-table tbody tr:hover td.country-cell {
    background: #e8eff7;
}
.matrix-table tbody tr:hover td.continent-cell:not(.grouped-cell) {
    background: #e8eff7;
}

/* risk level badges */
.risk-badge {
    display: inline-block;
    padding: 1px 6px;
    border-radius: 3px;
    font-size: 0.68rem;
    font-weight: 600;
    letter-spacing: 0.02em;
    line-height: 1.6;
}

.risk-low {
    background: #e8f5ee;
    color: #15803d;
}

.risk-medium {
    background: #fef9e7;
    color: #a16207;
}

.risk-high {
    background: #fef2f2;
    color: #dc2626;
}

.risk-critical {
    background: #fde8e8;
    color: #991b1b;
    font-weight: 700;
}

/* ── Responsive ── */
@media (max-width: 1024px) {
    .region-grid {
        grid-template-columns: repeat(4, minmax(0, 1fr));
    }
}

@media (max-width: 768px) {
    .header {
        padding: 0.6rem 1rem;
    }
    .region-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
    .process-flow {
        flex-wrap: wrap;
        gap: 0.6rem;
        justify-content: center;
        margin: 0.6rem 0.6rem 0.4rem;
    }
    .flow-arrow {
        margin: 0 0.15rem;
    }
    .main-content {
        padding: 0 0.6rem 1.5rem;
    }
    .top-news-banner {
        /* already flex column, no grid override needed */
    }
    .banner-col {
        border-right: none;
        border-bottom: 1px solid var(--border-light);
    }
    .banner-col:last-child {
        border-bottom: none;
    }
    .header-title {
        font-size: 1.05rem;
        letter-spacing: 0.1em;
    }
    .banner-cols {
        grid-template-columns: 1fr;
    }
}

/* ── Matrix Cell Tooltip ── */
.matrix-cell-wrap {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    min-height: 100%;
    cursor: pointer;
    -webkit-tap-highlight-color: transparent;
    border-radius: 5px;
    transition: background 0.18s ease, box-shadow 0.18s ease;
}
.matrix-cell-wrap.is-tooltip-active {
    background: rgba(255, 255, 255, 0.52);
    box-shadow: inset 0 0 0 1px rgba(59, 130, 246, 0.24), 0 8px 18px rgba(15, 23, 42, 0.08);
}

/* Shared tooltip anchored to <body>, positioned with JS (position: fixed)
   so it is never clipped by the matrix scroll-wrapper (no scrollbar flicker). */
.matrix-tooltip-shared {
    position: fixed;
    top: 0;
    left: 0;
    width: 280px;
    background: rgba(255, 255, 255, 0.64);
    color: var(--text-primary);
    backdrop-filter: blur(24px) saturate(1.35);
    -webkit-backdrop-filter: blur(24px) saturate(1.35);
    border: 1px solid rgba(91, 163, 230, 0.34);
    border-radius: 8px;
    padding: 0.7rem 0.85rem;
    font-size: 0.74rem;
    line-height: 1.6;
    box-shadow: 0 28px 72px rgba(15, 23, 42, 0.24), 0 0 0 1px rgba(255,255,255,0.42), inset 0 1px 0 rgba(255,255,255,0.64), inset 0 -28px 60px rgba(255,255,255,0.18);
    z-index: 1000;
    pointer-events: none;
    opacity: 0;
    visibility: hidden;
    transform: translateY(var(--tooltip-enter-y, 10px)) scale(0.96);
    transition: opacity 0.28s cubic-bezier(.2,.8,.2,1), transform 0.28s cubic-bezier(.2,.8,.2,1), visibility 0.28s ease;
    will-change: opacity, transform;
    overflow: hidden;
}
.matrix-tooltip-shared[data-enter="from-bottom"] {
    --tooltip-enter-y: 10px;
}
.matrix-tooltip-shared[data-enter="from-top"] {
    --tooltip-enter-y: -10px;
}
.matrix-tooltip-shared.show {
    opacity: 1;
    visibility: visible;
    transform: translateY(0) scale(1);
}
.matrix-tooltip-shared::after {
    content: '';
    position: absolute;
    left: var(--arrow-x, 50%);
    margin-left: -6px;
    border: 6px solid transparent;
}
.matrix-tooltip-shared[data-arrow="bottom"]::after {
    top: 100%;
    border-top-color: rgba(255,255,255,0.72);
}
.matrix-tooltip-shared[data-arrow="top"]::after {
    bottom: 100%;
    border-bottom-color: rgba(255,255,255,0.72);
}
.matrix-tooltip-shared .tooltip-title {
    font-weight: 700;
    color: var(--accent);
    margin-bottom: 4px;
    font-size: 0.76rem;
    letter-spacing: 0.04em;
}
.matrix-tooltip-shared .tooltip-headline {
    margin-bottom: 5px;
    border-bottom: 1px solid rgba(148, 163, 184, 0.22);
    padding-bottom: 5px;
    color: var(--text-secondary);
}
.matrix-tooltip-shared .tooltip-news-label {
    display: block;
    font-weight: 700;
    color: var(--accent);
    font-size: 0.66rem;
    letter-spacing: 0.06em;
    margin: 4px 0 4px;
    text-transform: none;
}
.matrix-tooltip-shared .tooltip-news-label i {
    margin-right: 4px;
}
.matrix-tooltip-shared .tooltip-reason {
    margin-bottom: 6px;
    padding: 6px 0;
    background: transparent;
    border-left: 0;
    color: var(--text-secondary);
    font-size: 0.72rem;
    line-height: 1.5;
    border-radius: 2px;
}
.matrix-tooltip-shared .tooltip-reason-label {
    display: block;
    font-weight: 700;
    color: #5ba3e6;
    font-size: 0.66rem;
    letter-spacing: 0.06em;
    margin-bottom: 3px;
    text-transform: none;
}
.matrix-tooltip-shared .tooltip-reason-label i {
    margin-right: 4px;
}
.matrix-tooltip-shared .tooltip-source {
    font-size: 0.66rem;
    color: var(--text-muted);
}
.matrix-tooltip-shared .tooltip-risk {
    display: inline-block;
    padding: 1px 6px;
    border-radius: 3px;
    font-size: 0.66rem;
    font-weight: 600;
    margin-top: 3px;
}

/* ── Subtle hover refinements ── */
.banner-list li {
    transition: color 0.15s, background 0.15s;
}

.banner-list li:hover {
    color: var(--text-primary);
    background: #f7f9fc;
}

.news-item {
    transition: background 0.15s;
}

.news-item:hover {
    background: #f5f8fc !important;
}

.tab-btn {
    transition: background 0.2s, color 0.2s, border-color 0.2s;
}

/* flow steps use parent animation */

/* section titles inherit parent animation */

/* ── Matrix table row hover ── */
.matrix-table tbody tr {
    transition: background 0.15s;
}

/* ── Risk badge ── */
.risk-badge {
    cursor: default;
}

/* ── Tab bar entrance ── */
.tab-bar {
    animation: fadeIn 0.4s ease-out 0.2s both;
}

/* ── Header entrance ── */
.header {
    animation: fadeIn 0.3s ease-out;
}

/* banner column hover */
.banner-col {
    transition: background 0.2s;
}

.banner-col:hover {
    background: #fafbfe;
}

.banner-col-title {
    transition: border-bottom-color 0.2s;
}

.banner-col:hover .banner-col-title {
    border-bottom-color: var(--accent-subtle);
}

/* news date — subtle dim on hover */
.news-item:hover .news-id {
    color: var(--text-secondary);
}

/* news tag — static, no hover animation */

/* banner index highlight on hover */
.banner-list li:hover .banner-idx {
    background: var(--accent-subtle);
    transition: background 0.15s;
}

/* matrix search focus - handled above */

/* section title — no hover glow */

/* flow arrows — static */

/* country cell hover — row is clickable, force pointer cursor over text */
.matrix-table td.country-cell {
    cursor: pointer;
    user-select: none;
}
.matrix-table td.country-cell * {
    cursor: pointer;
}
/* Country matrix: every cell from 国家 onward is clickable. Only the
   leading 区域 (continent) cell stays non-clickable. */
.matrix-table tbody tr {
    cursor: pointer;
}
.matrix-table td.risk-cell,
.matrix-table td.risk-cell * {
    cursor: pointer;
    user-select: none;
}
.matrix-table td.continent-cell,
.matrix-table td.continent-cell * {
    cursor: default;
    user-select: none;
}

/* ── Country Profile Modal ── */
.country-modal-overlay {
    position: fixed;
    inset: 0;
    background: rgba(15, 23, 42, 0.55);
    backdrop-filter: blur(6px);
    -webkit-backdrop-filter: blur(6px);
    z-index: 1000;
    display: flex;
    align-items: center;
    justify-content: center;
    animation: fadeIn 0.2s ease-out;
}

.country-modal {
    background: #f8fafc;
    border-radius: 16px;
    width: 92%;
    max-width: 860px;
    max-height: 88vh;
    overflow: hidden;
    display: flex;
    flex-direction: column;
    box-shadow: 0 25px 80px rgba(0,0,0,0.2), 0 0 0 1px rgba(255,255,255,0.1);
    animation: scaleIn 0.25s ease-out;
    position: relative;
}

.country-modal-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 1.3rem 1.8rem;
    background: linear-gradient(135deg, #0f2b4c 0%, var(--accent) 50%, #2268b0 100%);
    color: #fff;
    position: relative;
    flex-shrink: 0;
}
.country-modal-header::after {
    content: '';
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    height: 3px;
    background: linear-gradient(90deg, #38bdf8, #818cf8, #fb7185, #38bdf8);
    background-size: 200% 100%;
    animation: shimmer 3s linear infinite;
}
@keyframes shimmer {
    0% { background-position: 200% 0; }
    100% { background-position: -200% 0; }
}

.country-modal-header h3 {
    font-size: 1.15rem;
    font-weight: 700;
    letter-spacing: 0.06em;
    display: flex;
    align-items: center;
    gap: 8px;
}

.country-modal-header .modal-flag {
    font-size: 1.4rem;
}

.country-modal-close {
    background: rgba(255,255,255,0.1);
    border: 1px solid rgba(255,255,255,0.2);
    color: #fff;
    font-size: 1.15rem;
    cursor: pointer;
    width: 32px;
    height: 32px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 8px;
    transition: all 0.2s;
}

.country-modal-close:hover {
    background: rgba(255,255,255,0.2);
    border-color: rgba(255,255,255,0.35);
    transform: scale(1.05);
}

/* ── Modal Tabs ── */
.modal-tabs {
    display: flex;
    gap: 0;
    background: #fff;
    border-bottom: 1px solid var(--border-light);
    flex-shrink: 0;
    padding: 0 1rem;
}

.modal-tab-btn {
    padding: 0.75rem 1.2rem;
    font-size: 0.82rem;
    font-weight: 600;
    color: var(--text-muted);
    background: none;
    border: none;
    border-bottom: 2.5px solid transparent;
    cursor: pointer;
    transition: all 0.2s;
    white-space: nowrap;
    letter-spacing: 0.03em;
}

.modal-tab-btn:hover {
    color: var(--accent);
    background: var(--accent-light);
}

.modal-tab-btn.active {
    color: var(--accent);
    border-bottom-color: var(--accent);
}

.modal-tab-content {
    display: none;
    padding: 1.3rem 1.8rem;
    overflow-y: auto;
    flex: 1;
}

.modal-tab-content.active {
    display: block;
}

.country-modal-body {
    flex: 1;
    overflow: hidden;
    display: flex;
    flex-direction: column;
}

/* ── Profile Sections ── */
.profile-section {
    margin-bottom: 1.3rem;
}

.profile-section:last-child {
    margin-bottom: 0;
}

.profile-section-title {
    font-size: 0.82rem;
    font-weight: 700;
    color: var(--accent);
    margin-bottom: 0.6rem;
    padding-bottom: 0.35rem;
    border-bottom: 2px solid var(--accent-subtle);
    letter-spacing: 0.05em;
    display: flex;
    align-items: center;
    gap: 6px;
}

.profile-section-title i {
    font-size: 0.78rem;
    opacity: 0.7;
}

.profile-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 0;
}

.profile-item {
    display: flex;
    justify-content: space-between;
    align-items: baseline;
    padding: 0.45rem 0.6rem;
    font-size: 0.8rem;
    border-bottom: 1px solid var(--border-light);
    transition: background 0.15s;
}

.profile-item:hover {
    background: var(--accent-light);
}

.profile-item:nth-child(odd) {
    border-right: 1px solid var(--border-light);
}

.profile-item-label {
    color: var(--text-muted);
    font-weight: 500;
    min-width: 80px;
    flex-shrink: 0;
}

.profile-item-value {
    color: var(--text-primary);
    font-weight: 600;
    text-align: right;
}

.profile-text {
    font-size: 0.82rem;
    color: var(--text-secondary);
    line-height: 1.8;
    background: #fff;
    padding: 0.8rem 1rem;
    border-radius: 8px;
    border: 1px solid var(--border-light);
}

.profile-tags {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    margin-top: 0.3rem;
}

.profile-tag {
    font-size: 0.72rem;
    padding: 4px 12px;
    border-radius: 20px;
    background: var(--accent-light);
    color: var(--accent);
    font-weight: 600;
    transition: all 0.15s;
}

.profile-tag:hover {
    background: var(--accent);
    color: #fff;
}

/* Country profile data-source footer */
.profile-sources .profile-text {
    font-size: 0.74rem;
    line-height: 1.7;
    color: var(--text-secondary);
    background: var(--accent-light);
    border-color: var(--accent-subtle);
}

.profile-source-link {
    color: var(--accent);
    text-decoration: none;
    font-weight: 600;
    border-bottom: 1px dashed var(--accent-subtle);
}

.profile-source-link:hover {
    color: var(--accent);
    border-bottom-color: var(--accent);
}

.profile-sources code {
    background: rgba(0, 0, 0, 0.05);
    padding: 1px 5px;
    border-radius: 4px;
    font-size: 0.72rem;
}

/* ── News Dashboard in Modal ── */
.news-dashboard-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 1rem;
}

.news-dashboard-title {
    font-size: 0.88rem;
    font-weight: 700;
    color: var(--text-primary);
    display: flex;
    align-items: center;
    gap: 6px;
}

.news-dashboard-count {
    font-size: 0.7rem;
    background: var(--accent);
    color: #fff;
    padding: 2px 8px;
    border-radius: 10px;
    font-weight: 600;
}

.news-category-filters {
    display: flex;
    gap: 5px;
    flex-wrap: wrap;
}

.news-filter-btn {
    font-size: 0.7rem;
    padding: 3px 10px;
    border-radius: 12px;
    border: 1.5px solid var(--border-light);
    background: #fff;
    color: var(--text-muted);
    cursor: pointer;
    font-weight: 600;
    transition: all 0.15s;
}

.news-filter-btn:hover {
    border-color: var(--accent);
    color: var(--accent);
}

.news-filter-btn.active {
    background: var(--accent);
    color: #fff;
    border-color: var(--accent);
}

.news-card-list {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.news-history-loader {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    min-height: 38px;
    margin-top: 10px;
}

.news-history-load-btn {
    border: 1px solid var(--accent-subtle);
    background: #fff;
    color: var(--accent);
    font-size: 0.72rem;
    font-weight: 700;
    border-radius: 6px;
    padding: 6px 12px;
    cursor: pointer;
    transition: all 0.15s;
}

.news-history-load-btn:hover:not(:disabled) {
    border-color: var(--accent);
    background: var(--accent-light);
}

.news-history-load-btn:disabled {
    cursor: default;
    opacity: 0.65;
}

.news-history-status {
    font-size: 0.72rem;
    color: var(--text-muted);
}

.news-card {
    display: flex;
    align-items: flex-start;
    gap: 10px;
    padding: 0.7rem 0.9rem;
    background: #fff;
    border-radius: 10px;
    border: 1px solid var(--border-light);
    transition: all 0.2s;
    animation: fadeInUp 0.3s ease-out;
}

.news-card:hover {
    border-color: var(--accent-subtle);
    box-shadow: 0 4px 16px rgba(26,79,139,0.08);
    transform: translateY(-1px);
}

.news-card-date {
    font-size: 0.68rem;
    color: var(--text-muted);
    white-space: nowrap;
    min-width: 42px;
    padding-top: 2px;
    font-variant-numeric: tabular-nums;
}

.news-card-body {
    flex: 1;
    min-width: 0;
}

.news-card-headline {
    font-size: 0.8rem;
    color: var(--text-primary);
    font-weight: 500;
    line-height: 1.5;
    margin-bottom: 5px;
}

.news-card-meta {
    display: flex;
    align-items: center;
    gap: 6px;
    flex-wrap: wrap;
}

.news-card-risk {
    font-size: 0.62rem !important;
    padding: 2px 8px !important;
    letter-spacing: 0.02em;
}

.news-card-tag {
    font-size: 0.62rem;
    padding: 2px 8px;
    border-radius: 3px;
    font-weight: 700;
    letter-spacing: 0.03em;
}

.news-card-tag.politics { background: var(--tag-politics-bg); color: var(--tag-politics); }
.news-card-tag.economy  { background: var(--tag-economy-bg);  color: var(--tag-economy);  }
.news-card-tag.disaster { background: var(--tag-disaster-bg); color: var(--tag-disaster); }
.news-card-tag.policy   { background: var(--tag-policy-bg);   color: var(--tag-policy);   }
.news-card-tag.social   { background: var(--tag-social-bg);   color: var(--tag-social);   }
.news-card-tag.supplier { background: var(--tag-supplier-bg); color: var(--tag-supplier); }
.news-card-tag.hub      { background: var(--tag-hub-bg);      color: var(--tag-hub); }
.news-card-tag.carrier  { background: var(--tag-carrier-bg);  color: var(--tag-carrier); }
.news-card-tag.customs  { background: var(--tag-customs-bg);  color: var(--tag-customs); }

.news-card-source {
    font-size: 0.62rem;
    color: var(--text-muted);
    display: flex;
    align-items: center;
    gap: 3px;
}

.news-card-indicator {
    display: none;
}

.news-card-indicator.politics { background: var(--tag-politics); }
.news-card-indicator.economy  { background: var(--tag-economy);  }
.news-card-indicator.disaster { background: var(--tag-disaster); }
.news-card-indicator.policy   { background: var(--tag-policy);   }
.news-card-indicator.social   { background: var(--tag-social);   }
.news-card-indicator.supplier { background: var(--tag-supplier); }
.news-card-indicator.hub      { background: var(--tag-hub); }
.news-card-indicator.carrier  { background: var(--tag-carrier); }
.news-card-indicator.customs  { background: var(--tag-customs); }

.news-empty-state {
    text-align: center;
    padding: 2rem;
    color: var(--text-muted);
    font-size: 0.82rem;
}

.news-empty-state i {
    font-size: 1.5rem;
    margin-bottom: 0.5rem;
    display: block;
    opacity: 0.4;
}

/* Loading indicator shown while full article corpus is fetched for entity modals */
.entity-modal-full-loading {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    padding: 12px 16px;
    font-size: 0.78rem;
    color: var(--text-muted);
}
.entity-modal-full-loading i {
    font-size: 0.85rem;
    opacity: 0.6;
}

/* ── News Stats Bar ── */
.news-stats-bar {
    display: flex;
    gap: 8px;
    margin-bottom: 1rem;
    flex-wrap: wrap;
}

.news-stat-chip {
    display: flex;
    align-items: center;
    gap: 5px;
    padding: 4px 10px;
    border-radius: 8px;
    background: #fff;
    border: 1px solid var(--border-light);
    font-size: 0.7rem;
    font-weight: 600;
}

.news-stat-dot {
    width: 8px;
    height: 8px;
    border-radius: 50%;
}

.news-stat-dot.politics { background: var(--tag-politics); }
.news-stat-dot.economy  { background: var(--tag-economy);  }
.news-stat-dot.disaster { background: var(--tag-disaster); }
.news-stat-dot.policy   { background: var(--tag-policy);   }
.news-stat-dot.social   { background: var(--tag-social);   }
.news-stat-dot.supplier { background: var(--tag-supplier); }
.news-stat-dot.hub      { background: var(--tag-hub); }
.news-stat-dot.carrier  { background: var(--tag-carrier); }
.news-stat-dot.customs  { background: var(--tag-customs); }

/* Country profile modal: collapse all news category tags / dots to one
   neutral slate so they don't share the teal/indigo/pink used by
   hub/carrier/customs trunk modals. */
.country-modal .news-card-tag.politics,
.country-modal .news-card-tag.economy,
.country-modal .news-card-tag.disaster,
.country-modal .news-card-tag.policy,
.country-modal .news-card-tag.social,
.country-modal .news-card-tag.supplier {
    background: #eef2f7;
    color: #475569;
}
.country-modal .news-stat-dot.politics,
.country-modal .news-stat-dot.economy,
.country-modal .news-stat-dot.disaster,
.country-modal .news-stat-dot.policy,
.country-modal .news-stat-dot.social,
.country-modal .news-stat-dot.supplier {
    background: #64748b;
}

/* ── Port icon style ── */
.port-icon {
    font-size: 0.75rem;
    color: #475569;
    opacity: 0.6;
}

/* ── Carrier icon & logo ── */
.carrier-icon {
    font-size: 0.75rem;
    color: #475569;
    opacity: 0.55;
    flex-shrink: 0;
}

.carrier-logo-img {
    flex-shrink: 0;
    display: inline-flex;
    align-items: center;
    line-height: 0;
}

.carrier-logo-img img {
    width: 20px;
    height: 20px;
    object-fit: contain;
    border-radius: 3px;
}

.carrier-logo-img svg {
    border-radius: 3px;
    box-shadow: 0 1px 3px rgba(0,0,0,0.15);
}

/* ── News hoverable items (highlight + priority badge) ── */
.news-hoverable { cursor: pointer; position: relative; }
.news-hoverable:hover { background: #eef4fb !important; }

.banner-list li.news-hoverable { flex-wrap: wrap; }
.banner-list li.news-hoverable .banner-text { flex: 1 1 60%; min-width: 55%; }

/* Trunk top-news cards: use an expanded highlight layer so the blue focus
   covers a little extra space around the content block without reflow. */
.trunk-news-list li.news-hoverable {
    position: relative;
    z-index: 0;
    border-radius: 8px;
}
.trunk-news-list li.news-hoverable::before {
    content: '';
    position: absolute;
    inset: -12px -18px;
    border-radius: 14px;
    background: transparent;
    box-shadow: 0 0 0 0 rgba(91, 163, 230, 0);
    transition: background 0.16s ease, box-shadow 0.16s ease;
    z-index: -1;
    pointer-events: none;
}
.trunk-news-list li.news-hoverable:hover {
    background: transparent !important;
}
.trunk-news-list li.news-hoverable:hover::before {
    background: #eef4fb;
    box-shadow: 0 0 0 1px rgba(91, 163, 230, 0.22);
}

.news-priority-badge {
    display: inline-flex;
    align-items: center;
    gap: 3px;
    font-size: 0.62rem;
    font-weight: 700;
    padding: 1px 6px 1px 5px;
    border-radius: 10px;
    line-height: 1.3;
    border: 1px solid transparent;
    white-space: nowrap;
    flex-shrink: 0;
    letter-spacing: 0.02em;
}
.news-priority-badge svg { flex-shrink: 0; }
.news-priority-badge.priority-critical  { background: #fef2f2; color: #991b1b; border-color: #fecaca; }
.news-priority-badge.priority-important { background: #fff7ed; color: #9a3412; border-color: #fed7aa; }
.news-priority-badge.priority-normal    { background: #eff6ff; color: #1e40af; border-color: #bfdbfe; }
.news-priority-badge.priority-ignore    { background: #f1f5f9; color: #475569; border-color: #cbd5e1; }

/* Left-edge priority accent on news items — disabled per request */
.news-item.has-priority { position: relative; }
.news-item.has-priority::before { display: none; }

.banner-list li.has-priority {
    background: linear-gradient(90deg, rgba(248,250,252,0) 0%, rgba(241,245,249,0.5) 100%);
}
.banner-list li.priority-critical,
.banner-list li.priority-important,
.banner-list li.priority-normal { border-left: none; padding-left: 0; }
.banner-list li.priority-ignore { border-left: none; padding-left: 0; opacity: 0.7; }

/* ── Hover popup (干线) ── */
.news-hover-popup {
    position: fixed;
    z-index: 9999;
    width: 380px;
    max-width: calc(100vw - 20px);
    background: rgba(255, 255, 255, 0.68);
    color: var(--text-primary);
    border: 1px solid rgba(91, 163, 230, 0.34);
    border-radius: 12px;
    backdrop-filter: blur(24px) saturate(1.35);
    -webkit-backdrop-filter: blur(24px) saturate(1.35);
    box-shadow: 0 28px 72px rgba(15, 23, 42, 0.24), 0 0 0 1px rgba(255,255,255,0.42), inset 0 1px 0 rgba(255,255,255,0.64), inset 0 -28px 60px rgba(255,255,255,0.18);
    padding: 14px 16px 12px;
    font-size: 0.82rem;
    line-height: 1.55;
    opacity: 1;
    transform: translateY(0) scale(1);
    transition: opacity 0.32s cubic-bezier(.2,.8,.2,1), transform 0.32s cubic-bezier(.2,.8,.2,1), visibility 0.32s ease;
    will-change: opacity, transform;
    overflow: hidden;
}
.news-hover-popup[hidden] { display: none; }
.news-hover-popup.is-hiding,
.news-hover-popup.is-entering {
    opacity: 0;
    transform: translateY(14px) scale(0.94);
}
.news-hover-popup.is-hiding {
    pointer-events: none;
}

.news-hover-popup .np-source {
    font-size: 0.68rem;
    font-weight: 700;
    color: var(--accent);
    letter-spacing: 0.08em;
    text-transform: none;
    margin-bottom: 6px;
}
.news-hover-popup .np-head {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-bottom: 6px;
}
.news-hover-popup .np-date {
    font-size: 0.7rem;
    color: var(--text-muted);
    font-variant-numeric: tabular-nums;
}
.news-hover-popup .np-tag {
    font-size: 0.64rem;
    font-weight: 700;
    padding: 1px 7px;
    border-radius: 4px;
    line-height: 1.5;
}
.news-hover-popup .np-tag.politics { background: var(--tag-politics-bg); color: var(--tag-politics); }
.news-hover-popup .np-tag.economy  { background: var(--tag-economy-bg);  color: var(--tag-economy);  }
.news-hover-popup .np-tag.disaster { background: var(--tag-disaster-bg); color: var(--tag-disaster); }
.news-hover-popup .np-tag.policy   { background: var(--tag-policy-bg);   color: var(--tag-policy);   }
.news-hover-popup .np-tag.social   { background: var(--tag-social-bg);   color: var(--tag-social);   }
.news-hover-popup .np-tag.supplier { background: var(--tag-supplier-bg); color: var(--tag-supplier); }
.news-hover-popup .np-tag.hub      { background: var(--tag-hub-bg);      color: var(--tag-hub); }
.news-hover-popup .np-tag.carrier  { background: var(--tag-carrier-bg);  color: var(--tag-carrier); }
.news-hover-popup .np-tag.customs  { background: var(--tag-customs-bg);  color: var(--tag-customs); }

.news-hover-popup .np-title {
    display: inline-flex;
    align-items: flex-start;
    gap: 6px;
    font-size: 0.92rem;
    font-weight: 700;
    color: var(--accent);
    line-height: 1.45;
    text-decoration: none;
    margin-bottom: 8px;
}
.news-hover-popup .np-title:hover { text-decoration: underline; color: var(--accent-hover); }
.news-hover-popup .np-title .np-title-ext { flex-shrink: 0; margin-top: 3px; opacity: 0.7; }

.news-hover-popup .np-ai-block {
    margin-bottom: 12px;
}
.news-hover-popup .np-ai-block:last-of-type {
    margin-bottom: 14px;
}
.news-hover-popup .np-ai-head {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    font-size: 0.7rem;
    font-weight: 600;
    color: var(--text-muted);
    letter-spacing: 0.04em;
    margin-bottom: 5px;
    text-transform: none;
}
.news-hover-popup .np-ai-head .np-ai-icon {
    color: var(--text-muted);
    font-size: 0.78rem;
    line-height: 1;
}
.news-hover-popup .np-ai-empty {
    color: var(--text-muted);
    font-style: italic;
}

.news-hover-popup .np-summary {
    font-size: 0.78rem;
    color: var(--text-secondary);
    background: transparent;
    padding: 4px 2px;
    border-radius: 6px;
    margin-bottom: 0;
}

.news-hover-popup .np-analysis {
    font-size: 0.78rem;
    color: var(--text-secondary);
    background: transparent;
    padding: 4px 2px;
    border-radius: 6px;
    margin-bottom: 0;
    line-height: 1.55;
}

.news-hover-popup .np-section-label {
    font-size: 0.7rem;
    color: var(--text-muted);
    font-weight: 600;
    margin-bottom: 6px;
    letter-spacing: 0.04em;
}

.news-hover-popup .np-btns {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 6px;
}

.news-hover-popup .np-btn {
    position: relative;
    display: flex;
    align-items: center;
    gap: 6px;
    padding: 7px 10px;
    font-size: 0.76rem;
    font-weight: 600;
    color: #1e293b;
    background: #fff;
    border: 1.5px solid #e2e8f0;
    border-radius: 8px;
    cursor: pointer;
    transition: all 0.15s ease;
    font-family: inherit;
    letter-spacing: 0.02em;
}
.news-hover-popup .np-btn:hover {
    border-color: #1e293b;
    background: rgba(248, 250, 252, 0.55);
}
.news-hover-popup .np-btn .np-btn-icon {
    display: inline-flex;
    color: #1e293b;
}
.news-hover-popup .np-btn .np-btn-label { flex: 1; text-align: left; }
.news-hover-popup .np-btn .np-btn-tick {
    display: none;
    color: #fff;
    background: #16a34a;
    border-radius: 50%;
    width: 16px;
    height: 16px;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}
.news-hover-popup .np-btn .np-btn-tick svg { width: 10px; height: 10px; }
.news-hover-popup .np-btn.active {
    border-color: #1e293b;
    background: #1e293b;
    color: #fff;
}
.news-hover-popup .np-btn.active .np-btn-icon { color: #fff; }
.news-hover-popup .np-btn.active .np-btn-tick { display: inline-flex; }

.news-hover-popup .np-current {
    margin-top: 10px;
    padding-top: 8px;
    border-top: 1px dashed #e2e8f0;
    font-size: 0.72rem;
    color: var(--text-muted);
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
}
.news-hover-popup .np-current strong { color: var(--text-primary); }
.news-hover-popup .np-clear {
    font-size: 0.7rem;
    padding: 3px 8px;
    border: 1px solid #e2e8f0;
    border-radius: 6px;
    background: #fff;
    color: var(--text-secondary);
    cursor: pointer;
    font-family: inherit;
}
.news-hover-popup .np-clear:hover { border-color: #1e293b; color: #1e293b; }

/* ── Tab badge ── */
.tab-btn .tab-badge {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 18px;
    height: 18px;
    padding: 0 5px;
    margin-left: 6px;
    font-size: 0.66rem;
    font-weight: 700;
    background: #dc2626;
    color: #fff;
    border-radius: 9px;
    line-height: 1;
    vertical-align: middle;
}
.tab-btn.active .tab-badge { background: #fff; color: #dc2626; }
.tab-btn .tab-badge[hidden] { display: none; }

/* ── Focus tab (当日关注清单) ── */
.focus-header {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 1rem;
    margin-bottom: 1rem;
}
.focus-header-left { flex: 1; min-width: 0; }
.focus-title {
    font-size: 1.2rem;
    font-weight: 700;
    letter-spacing: 0.06em;
    color: var(--text-primary);
    margin-bottom: 4px;
}
.focus-subtitle {
    font-size: 0.8rem;
    color: var(--text-secondary);
    line-height: 1.6;
    max-width: 760px;
}
.focus-subtitle strong { color: var(--accent); }

.focus-header-actions { display: flex; gap: 8px; flex-shrink: 0; }
.focus-action-btn {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 7px 12px;
    font-size: 0.76rem;
    font-weight: 600;
    color: var(--text-primary);
    background: #fff;
    border: 1px solid var(--border);
    border-radius: 8px;
    cursor: pointer;
    transition: all 0.15s;
    font-family: inherit;
    letter-spacing: 0.02em;
}
.focus-action-btn:hover {
    border-color: var(--accent);
    color: var(--accent);
}
.focus-action-btn.focus-action-btn-danger:hover {
    border-color: #dc2626;
    color: #dc2626;
}

.focus-stats-row {
    display: grid;
    grid-template-columns: 1.3fr repeat(4, 1fr);
    gap: 10px;
    margin-bottom: 1rem;
}
.focus-stat {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 12px 14px;
    background: var(--bg-panel);
    border: 1px solid var(--border);
    border-radius: 10px;
    box-shadow: var(--shadow-sm);
}
.focus-stat-total { background: linear-gradient(135deg, #0f2b4c 0%, var(--accent) 100%); color: #fff; border-color: transparent; }
.focus-stat-total .focus-stat-label { color: rgba(255,255,255,0.8); }
.focus-stat-icon {
    width: 32px;
    height: 32px;
    border-radius: 8px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: #f1f5f9;
    color: #1e293b;
    flex-shrink: 0;
}
.focus-stat-critical  .focus-stat-icon { background: #fef2f2; color: #991b1b; }
.focus-stat-important .focus-stat-icon { background: #fff7ed; color: #9a3412; }
.focus-stat-normal    .focus-stat-icon { background: #eff6ff; color: #1e40af; }
.focus-stat-ignore    .focus-stat-icon { background: #f1f5f9; color: #475569; }
.focus-stat-body { min-width: 0; }
.focus-stat-num {
    font-size: 1.3rem;
    font-weight: 700;
    line-height: 1.1;
    font-variant-numeric: tabular-nums;
}
.focus-stat-label {
    font-size: 0.72rem;
    color: var(--text-muted);
    font-weight: 600;
    margin-top: 2px;
    letter-spacing: 0.04em;
}
.focus-stat-total .focus-stat-num { font-size: 1.6rem; }

.focus-filter-row {
    display: flex;
    align-items: center;
    gap: 10px;
    flex-wrap: wrap;
    margin-bottom: 1rem;
    padding: 8px 12px;
    background: var(--bg-panel);
    border: 1px solid var(--border);
    border-radius: 8px;
}
.focus-filter-label { font-size: 0.76rem; color: var(--text-muted); font-weight: 600; }
.focus-filter-btns { display: flex; gap: 6px; flex-wrap: wrap; }
.focus-filter-btn {
    font-size: 0.74rem;
    padding: 4px 12px;
    border-radius: 14px;
    border: 1.5px solid var(--border-light);
    background: #fff;
    color: var(--text-secondary);
    cursor: pointer;
    font-weight: 600;
    transition: all 0.15s;
    font-family: inherit;
}
.focus-filter-btn:hover { border-color: var(--accent); color: var(--accent); }
.focus-filter-btn.active { background: var(--accent); color: #fff; border-color: var(--accent); }

.focus-groups { display: flex; flex-direction: column; gap: 1rem; }
.focus-group {
    background: var(--bg-panel);
    border: 1px solid var(--border);
    border-radius: var(--panel-radius);
    box-shadow: var(--shadow-sm), inset 0 1px 0 rgba(255, 255, 255, 0.86);
    overflow: hidden;
}
.focus-group-header {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 10px 14px;
    border-bottom: 1px solid var(--border-light);
    font-weight: 700;
    font-size: 0.88rem;
    letter-spacing: 0.06em;
}
.focus-group-icon { display: inline-flex; }
.focus-group-title { flex: 1; }
.focus-group-count {
    font-size: 0.72rem;
    padding: 2px 9px;
    border-radius: 10px;
    font-weight: 700;
    background: #f1f5f9;
    color: var(--text-secondary);
}
.focus-group-critical  .focus-group-header { background: linear-gradient(90deg, #fef2f2 0%, #fff 100%); color: #991b1b; border-left: 4px solid #dc2626; }
.focus-group-important .focus-group-header { background: linear-gradient(90deg, #fff7ed 0%, #fff 100%); color: #9a3412; border-left: 4px solid #ea580c; }
.focus-group-normal    .focus-group-header { background: linear-gradient(90deg, #eff6ff 0%, #fff 100%); color: #1e40af; border-left: 4px solid #2563eb; }
.focus-group-ignore    .focus-group-header { background: linear-gradient(90deg, #f8fafc 0%, #fff 100%); color: #475569; border-left: 4px solid #94a3b8; }
.focus-group-critical  .focus-group-count { background: #fee2e2; color: #991b1b; }
.focus-group-important .focus-group-count { background: #ffedd5; color: #9a3412; }
.focus-group-normal    .focus-group-count { background: #dbeafe; color: #1e40af; }
.focus-group-ignore    .focus-group-count { background: #e2e8f0; color: #475569; }

.focus-items { display: flex; flex-direction: column; }
.focus-item {
    padding: 12px 16px;
    border-bottom: 1px solid var(--border-light);
    animation: fadeInUp 0.25s ease-out;
    transition: background 0.15s;
}
.focus-item:last-child { border-bottom: none; }
.focus-item:hover { background: #f8fafc; }
.focus-item-main { display: flex; flex-direction: column; gap: 6px; }
.focus-item-meta {
    display: flex;
    align-items: center;
    gap: 10px;
    flex-wrap: wrap;
    font-size: 0.72rem;
}
.focus-item-source {
    font-weight: 700;
    color: var(--accent);
    letter-spacing: 0.04em;
}
.focus-item-date {
    color: var(--text-muted);
    font-variant-numeric: tabular-nums;
}
.focus-item-title {
    display: inline-flex;
    align-items: flex-start;
    gap: 6px;
    font-size: 0.92rem;
    font-weight: 700;
    color: var(--text-primary);
    text-decoration: none;
    line-height: 1.5;
}
.focus-item-title:hover { color: var(--accent); text-decoration: underline; }
.focus-item-title .np-title-ext { margin-top: 4px; opacity: 0.5; flex-shrink: 0; }
.focus-item-summary {
    font-size: 0.78rem;
    color: var(--text-secondary);
    line-height: 1.65;
    padding: 6px 10px;
    background: #f8fafc;
    border-left: 2px solid var(--accent-subtle);
    border-radius: 0 4px 4px 0;
}
.focus-item-actions {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    flex-wrap: wrap;
    margin-top: 4px;
}
.focus-item-priority-group {
    display: flex;
    gap: 5px;
    flex-wrap: wrap;
}
.focus-item-priority-btn {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    padding: 4px 10px;
    font-size: 0.72rem;
    font-weight: 600;
    color: #475569;
    background: #fff;
    border: 1.5px solid #e2e8f0;
    border-radius: 999px;
    cursor: pointer;
    font-family: inherit;
    transition: all 0.15s;
}
.focus-item-priority-btn:hover { border-color: #1e293b; color: #1e293b; }
.focus-item-priority-btn.active {
    background: #1e293b;
    border-color: #1e293b;
    color: #fff;
}
.focus-item-priority-btn .np-btn-icon { display: inline-flex; }
.focus-item-priority-btn .np-btn-tick {
    display: inline-flex;
    background: #16a34a;
    color: #fff;
    border-radius: 50%;
    width: 14px;
    height: 14px;
    align-items: center;
    justify-content: center;
}
.focus-item-remove {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    padding: 4px 10px;
    font-size: 0.72rem;
    color: var(--text-muted);
    background: transparent;
    border: 1px solid transparent;
    border-radius: 6px;
    cursor: pointer;
    font-family: inherit;
}
.focus-item-remove:hover { color: #dc2626; border-color: #fecaca; background: #fef2f2; }

/* 重点分析任务池: better dispatch button design */
.focus-item-distribute {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 5px 14px;
    font-size: 0.74rem;
    font-weight: 700;
    color: #fff;
    background: linear-gradient(135deg, var(--accent) 0%, #2268b0 100%);
    border: 1px solid var(--accent);
    border-radius: 6px;
    cursor: pointer;
    font-family: inherit;
    box-shadow: 0 1px 3px rgba(30, 79, 139, 0.18);
    transition: all 0.15s;
}
.focus-item-distribute:hover {
    box-shadow: 0 3px 10px rgba(30, 79, 139, 0.32);
    transform: translateY(-1px);
}
.focus-item-distribute:active { transform: translateY(0); }
.focus-item-distribute svg { stroke: #fff; }
.focus-item.has-distribution .focus-item-distribute {
    background: linear-gradient(135deg, #15803d, #22c55e);
    border-color: #15803d;
    box-shadow: 0 1px 3px rgba(21, 128, 61, 0.22);
}
.focus-item.has-distribution .focus-item-distribute:hover {
    box-shadow: 0 3px 10px rgba(21, 128, 61, 0.32);
}

/* Compact tab header (no banner background) */
.focus-header-compact, .tracking-header-compact {
    background: transparent !important;
    color: var(--text-primary) !important;
    box-shadow: none !important;
    padding: 8px 4px !important;
    margin-bottom: 8px !important;
    border-bottom: 1px solid var(--border-light);
    border-radius: 0 !important;
}
.focus-header-compact .focus-title,
.tracking-header-compact .tracking-title {
    color: var(--accent);
    font-size: 1.1rem;
    margin: 0;
}
.tracking-header-compact .tracking-stat-num { color: var(--accent); }
.tracking-header-compact .tracking-stat-num.accent { color: #c2410c; }
.tracking-header-compact .tracking-stat-num.done { color: #15803d; }
.tracking-header-compact .tracking-stat-lbl { color: var(--text-muted); }

/* TOP 20: tighter wrap (no banner header) */
#tab-top20 .top20-wrap { padding: 14px 18px 24px; }

/* Pointer cursor for clickable matrix cells */
.matrix-table td, .trunk-matrix-table td { cursor: pointer; }
.matrix-cell-wrap { cursor: pointer; }

/* Hub matrix country column (separate) */
.trunk-matrix-table td.country-col-cell {
    text-align: left;
    font-weight: 600;
    color: var(--text-primary);
    white-space: nowrap;
    padding: 0.45rem 0.6rem;
    background: #fafbfd;
    font-size: inherit;
}
.trunk-matrix-table th.country-col-header {
    width: 100px;
    min-width: 90px;
    max-width: 120px;
}

/* Trunk matrix column widths tuning — give more room to the attribute columns,
   keep the entity-name + grouped columns compact, and split the 属性 / 关注点
   columns evenly via table-layout: fixed. */
.trunk-matrix-table { width: 100%; table-layout: fixed; }
.trunk-matrix-table th.continent-header,
.trunk-matrix-table td.continent-cell { width: 52px; min-width: 48px; max-width: 60px; }
.trunk-matrix-table th.type-header { width: 72px; min-width: 64px; max-width: 88px; }
.trunk-matrix-table th.country-col-header,
.trunk-matrix-table td.country-col-cell { width: 80px; min-width: 70px; max-width: 100px; }
.trunk-matrix-table th.country-header,
.trunk-matrix-table td.country-cell { width: 110px; min-width: 90px; max-width: 130px; }
/* All remaining columns (the 属性 / 关注点 attribute columns) share the
   leftover horizontal space evenly thanks to table-layout: fixed. */
.trunk-matrix-table thead th:not(.continent-header):not(.type-header):not(.country-header):not(.country-col-header):not(.merged-header) { width: auto; }

.focus-empty {
    text-align: center;
    padding: 3rem 1rem;
    background: var(--bg-panel);
    border: 1px dashed var(--border);
    border-radius: var(--panel-radius);
    color: var(--text-muted);
}
.focus-empty svg { opacity: 0.45; margin-bottom: 10px; }
.focus-empty-title {
    font-size: 0.95rem;
    font-weight: 700;
    color: var(--text-secondary);
    margin-bottom: 6px;
}
.focus-empty-hint {
    font-size: 0.78rem;
    line-height: 1.7;
    max-width: 520px;
    margin: 0 auto;
}
.focus-empty-hint strong { color: var(--accent); }

.focus-group-empty {
    text-align: center;
    padding: 2rem;
    background: var(--bg-panel);
    border: 1px dashed var(--border);
    border-radius: var(--panel-radius);
    color: var(--text-muted);
    font-size: 0.82rem;
}

@media (max-width: 900px) {
    .focus-stats-row { grid-template-columns: repeat(2, 1fr); }
    .focus-stat-total { grid-column: 1 / -1; }
    .focus-header { flex-direction: column; }
}
@media (max-width: 520px) {
    .news-hover-popup .np-btns { grid-template-columns: 1fr; }
}

/* ── Country/Region Explorer (信息总览 速查) ── */
.country-explorer {
    border-bottom: 1px solid var(--border-light);
    background: linear-gradient(180deg, #f6f8fb 0%, #fafbfd 100%);
    padding: 10px 14px 12px;
    display: flex;
    flex-direction: column;
    gap: 8px;
}

/* Standalone explorer-style toolbar used above each matrix */
.matrix-explorer {
    border: 1px solid var(--border);
    border-radius: var(--panel-radius);
    box-shadow: var(--shadow-sm);
    margin-bottom: 0.7rem;
    padding: 10px 14px 12px;
}
/* Inline variant nested inside .trunk-section between blue header and news cols */
.matrix-explorer-inline {
    border: none;
    border-radius: 0;
    box-shadow: none;
    margin-bottom: 0;
    border-bottom: 1px solid var(--border);
    background: linear-gradient(180deg, #f6f8fb 0%, #fafbfd 100%);
}
.ce-filter-row {
    display: flex;
    align-items: center;
    gap: 8px;
    flex-wrap: wrap;
}
.ce-filter-label {
    font-size: 0.65rem;
    font-weight: 700;
    color: var(--text-muted);
    letter-spacing: 0.08em;
    flex-shrink: 0;
    min-width: 34px;
}
.ce-toolbar {
    display: flex;
    align-items: center;
    gap: 10px;
    flex-wrap: wrap;
}
.ce-title {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font-size: 0.7rem;
    font-weight: 700;
    color: var(--accent);
    letter-spacing: 0.08em;
    flex-shrink: 0;
}
.ce-title svg { color: var(--accent); }
.ce-count {
    font-size: 0.62rem;
    color: var(--text-muted);
    font-weight: 500;
    letter-spacing: 0;
    margin-left: 6px;
    padding: 1px 7px;
    background: #e0e7ef;
    border-radius: 999px;
}
.ce-search-wrap {
    position: relative;
    flex: 1;
    min-width: 220px;
    max-width: 420px;
}
.ce-search-icon {
    position: absolute;
    left: 10px;
    top: 50%;
    transform: translateY(-50%);
    color: var(--text-muted);
    pointer-events: none;
}
.ce-search {
    width: 100%;
    padding: 5px 28px 5px 28px;
    border: 1px solid var(--border);
    border-radius: 6px;
    font-size: 0.72rem;
    background: #fff;
    color: var(--text-primary);
    transition: border-color 0.15s, box-shadow 0.15s;
    font-family: inherit;
}
.ce-search:focus {
    outline: none;
    border-color: var(--accent);
    box-shadow: 0 0 0 2px rgba(30, 79, 139, 0.12);
}
.ce-search-clear {
    position: absolute;
    right: 6px;
    top: 50%;
    transform: translateY(-50%);
    width: 20px;
    height: 20px;
    border-radius: 50%;
    border: none;
    background: #e2e8f0;
    color: #475569;
    cursor: pointer;
    font-size: 0.9rem;
    line-height: 1;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 0;
}
.ce-search-clear:hover { background: #cbd5e1; color: #1e293b; }
.ce-suggest {
    position: absolute;
    top: calc(100% + 4px);
    left: 0;
    right: 0;
    background: #fff;
    border: 1px solid var(--border);
    border-radius: 8px;
    box-shadow: 0 10px 24px rgba(15, 23, 42, 0.10);
    z-index: 50;
    max-height: 280px;
    overflow-y: auto;
    padding: 4px;
}
.ce-suggest-item {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    padding: 6px 10px;
    border-radius: 5px;
    cursor: pointer;
    font-size: 0.8rem;
    color: var(--text-primary);
}
.ce-suggest-item:hover { background: #f1f5f9; }
.ce-suggest-cont {
    font-size: 0.68rem;
    color: var(--text-muted);
    padding: 1px 6px;
    background: #f1f5f9;
    border-radius: 4px;
}
.ce-suggest-empty {
    padding: 10px;
    font-size: 0.78rem;
    color: var(--text-muted);
    text-align: center;
}
.ce-hl { background: #fef08a; color: #713f12; border-radius: 2px; padding: 0 1px; }

.ce-toggle {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    padding: 6px 10px;
    border: 1px solid var(--border);
    border-radius: 6px;
    background: #fff;
    color: var(--text-secondary);
    font-size: 0.76rem;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.15s;
    flex-shrink: 0;
}
.ce-toggle:hover { border-color: var(--accent); color: var(--accent); }
.ce-toggle.expanded { background: var(--accent); color: #fff; border-color: var(--accent); }
.ce-toggle-icon { transition: transform 0.2s; }
.ce-toggle.expanded .ce-toggle-icon { transform: rotate(180deg); }

.ce-chip-row {
    display: flex;
    gap: 6px;
    flex-wrap: wrap;
    align-items: center;
}
.ce-chip {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    padding: 2px 8px;
    border: 1px solid var(--accent-subtle);
    border-radius: 999px;
    background: #fff;
    color: var(--accent);
    font-size: 0.66rem;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.15s;
    line-height: 1.5;
}
.ce-chip:hover { border-color: var(--accent); color: var(--accent); background: var(--accent-light); }
.ce-chip.active {
    background: linear-gradient(135deg, var(--accent) 0%, #2268b0 100%);
    border-color: var(--accent);
    color: #fff;
}
.ce-chip-count {
    font-size: 0.6rem;
    font-weight: 600;
    padding: 0 5px;
    min-width: 16px;
    text-align: center;
    background: var(--accent-light);
    border-radius: 999px;
    color: var(--accent);
}
.ce-chip.active .ce-chip-count { background: rgba(255, 255, 255, 0.22); color: #fff; }

.ce-body {
    margin-top: 2px;
    border: 1px solid var(--border);
    background: #fff;
    border-radius: 8px;
    padding: 10px 12px;
    max-height: 340px;
    overflow-y: auto;
}
.ce-empty {
    padding: 16px;
    text-align: center;
    font-size: 0.8rem;
    color: var(--text-muted);
}
.ce-groups { display: flex; flex-direction: column; gap: 10px; }
.ce-group { display: flex; flex-direction: column; gap: 6px; }
.ce-group-head {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font-size: 0.72rem;
    font-weight: 700;
    color: var(--accent);
    letter-spacing: 0.1em;
    padding-bottom: 3px;
    border-bottom: 1px dashed var(--border);
}
.ce-group-count {
    font-size: 0.66rem;
    font-weight: 600;
    padding: 0 5px;
    background: var(--accent-light, #e0e7ef);
    color: var(--accent);
    border-radius: 999px;
    letter-spacing: 0;
}
.ce-chip-grid {
    display: flex;
    flex-wrap: wrap;
    gap: 5px;
}
.ce-country-chip {
    padding: 3px 9px;
    border: 1px solid var(--border);
    border-radius: 5px;
    background: #fff;
    color: var(--text-primary);
    font-size: 0.76rem;
    cursor: pointer;
    transition: all 0.12s;
    line-height: 1.5;
    font-family: inherit;
}
.ce-country-chip:hover {
    background: var(--accent);
    color: #fff;
    border-color: var(--accent);
    transform: translateY(-1px);
    box-shadow: 0 2px 6px rgba(30, 79, 139, 0.22);
}

@media (max-width: 780px) {
    .ce-toolbar { flex-direction: column; align-items: stretch; }
    .ce-search-wrap { max-width: none; }
    .ce-toggle { align-self: flex-end; }
}

/* ── Key Hubs (关键枢纽) ── */
.hubs-toolbar {
    background: linear-gradient(180deg, #f6f8fb 0%, #fafbfd 100%);
    border: 1px solid var(--border);
    border-radius: 10px;
    padding: 10px 14px;
    display: flex;
    flex-direction: column;
    gap: 10px;
    margin-bottom: 14px;
}
.hubs-toolbar-row {
    display: flex;
    align-items: center;
    gap: 14px;
    flex-wrap: wrap;
}
.hubs-filter-group {
    display: flex;
    align-items: center;
    gap: 8px;
    flex-wrap: wrap;
}
.hubs-filter-label {
    font-size: 0.72rem;
    color: var(--text-muted);
    letter-spacing: 0.05em;
    font-weight: 600;
    flex-shrink: 0;
}
.hubs-chip-row {
    display: flex;
    gap: 6px;
    flex-wrap: wrap;
}
.hubs-chip {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    padding: 4px 10px;
    background: #fff;
    border: 1px solid var(--border);
    border-radius: 999px;
    color: var(--text-secondary);
    font-size: 0.76rem;
    cursor: pointer;
    transition: all 0.12s;
    font-family: inherit;
    line-height: 1.5;
}
.hubs-chip:hover {
    border-color: var(--accent);
    color: var(--accent);
}
.hubs-chip.active {
    background: var(--accent);
    color: #fff;
    border-color: var(--accent);
    box-shadow: 0 2px 6px rgba(30, 79, 139, 0.22);
}
.hubs-chip-icon {
    display: inline-flex;
    align-items: center;
}
.hubs-chip-count {
    display: inline-block;
    min-width: 18px;
    padding: 0 5px;
    font-size: 0.7rem;
    background: rgba(0,0,0,0.06);
    border-radius: 999px;
    text-align: center;
    line-height: 1.6;
}
.hubs-chip.active .hubs-chip-count {
    background: rgba(255,255,255,0.25);
}
.hubs-search-wrap {
    position: relative;
    flex: 1;
    min-width: 240px;
    max-width: 420px;
}
.hubs-search-icon {
    position: absolute;
    left: 10px;
    top: 50%;
    transform: translateY(-50%);
    color: var(--text-muted);
    pointer-events: none;
}
.hubs-search {
    width: 100%;
    padding: 6px 30px 6px 28px;
    border: 1px solid var(--border);
    border-radius: 8px;
    background: #fff;
    font-size: 0.82rem;
    font-family: inherit;
    color: var(--text-primary);
    outline: none;
    transition: border-color 0.12s, box-shadow 0.12s;
}
.hubs-search:focus {
    border-color: var(--accent);
    box-shadow: 0 0 0 3px rgba(30, 79, 139, 0.12);
}
.hubs-search-clear {
    position: absolute;
    right: 6px;
    top: 50%;
    transform: translateY(-50%);
    width: 20px;
    height: 20px;
    border: none;
    background: var(--border);
    color: var(--text-secondary);
    border-radius: 50%;
    font-size: 0.9rem;
    line-height: 1;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
}
.hubs-search-clear:hover {
    background: var(--text-muted);
    color: #fff;
}
.hubs-summary {
    font-size: 0.78rem;
    color: var(--text-secondary);
    margin-left: auto;
}
.hubs-summary strong {
    color: var(--accent);
    font-weight: 700;
}
.hubs-reset {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    padding: 5px 10px;
    background: #fff;
    border: 1px solid var(--border);
    border-radius: 6px;
    color: var(--text-secondary);
    font-size: 0.75rem;
    font-family: inherit;
    cursor: pointer;
    transition: all 0.12s;
}
.hubs-reset:hover {
    border-color: var(--accent);
    color: var(--accent);
}

/* Group headers + grid */
.hubs-groups {
    display: flex;
    flex-direction: column;
    gap: 14px;
}
.hubs-group-head {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 4px 2px;
    border-bottom: 1px dashed var(--border);
    margin-bottom: 2px;
}
.hubs-group-name {
    font-size: 0.82rem;
    font-weight: 700;
    color: var(--accent);
    letter-spacing: 0.02em;
}
.hubs-group-count {
    font-size: 0.7rem;
    color: var(--text-muted);
    background: var(--accent-light);
    padding: 1px 7px;
    border-radius: 999px;
    font-weight: 600;
}
.hubs-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
    gap: 10px;
}

/* Hub card (compact) */
.hub-card {
    background: #fff;
    border: 1px solid var(--border);
    border-left: 3px solid var(--border);
    border-radius: 8px;
    padding: 8px 10px 6px;
    transition: box-shadow 0.15s, transform 0.15s, border-color 0.15s;
    display: flex;
    flex-direction: column;
    gap: 4px;
}
.hub-card:hover {
    box-shadow: 0 4px 12px rgba(15, 23, 42, 0.08);
    transform: translateY(-1px);
}
.hub-card.type-sea  { border-left-color: #0369a1; }
.hub-card.type-air  { border-left-color: #7c3aed; }
.hub-card.type-rail { border-left-color: #047857; }

.hub-card-head {
    display: flex;
    align-items: center;
    gap: 6px;
    padding-bottom: 4px;
    border-bottom: 1px solid var(--border-light);
}
.hub-flag {
    font-size: 1.05rem;
    line-height: 1;
    flex-shrink: 0;
}
.hub-name {
    font-size: 0.88rem;
    font-weight: 700;
    color: var(--text-primary);
    line-height: 1.2;
}
.hub-country {
    font-size: 0.7rem;
    color: var(--text-muted);
    background: var(--accent-light);
    padding: 1px 6px;
    border-radius: 4px;
    font-weight: 500;
    flex-shrink: 0;
}
.hub-type-badge {
    display: inline-flex;
    align-items: center;
    gap: 3px;
    margin-left: auto;
    padding: 2px 7px;
    border-radius: 4px;
    font-size: 0.7rem;
    font-weight: 600;
    line-height: 1.3;
    flex-shrink: 0;
}
.hub-type-badge.type-sea,
.hub-type-badge.type-air,
.hub-type-badge.type-rail { color: var(--text-on-accent); background: var(--accent); }
.hub-type-label { font-size: 0.7rem; }

.hub-news-list {
    display: flex;
    flex-direction: column;
}
.hub-news-list .news-item {
    padding: 4px 0;
    border-bottom: 1px dashed var(--border-light);
    font-size: 0.76rem;
}
.hub-news-list .news-item:last-child {
    border-bottom: none;
}

.hubs-empty {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 6px;
    padding: 40px 20px;
    color: var(--text-muted);
    text-align: center;
    background: #fafbfd;
    border: 1px dashed var(--border);
    border-radius: 10px;
}
.hubs-empty-title {
    font-size: 0.9rem;
    font-weight: 600;
    color: var(--text-secondary);
}
.hubs-empty-hint {
    font-size: 0.78rem;
}

@media (max-width: 900px) {
    .hubs-toolbar-row { gap: 8px; }
    .hubs-search-wrap { max-width: none; width: 100%; }
    .hubs-summary { margin-left: 0; }
    .hubs-grid { grid-template-columns: 1fr 1fr; }
}
@media (max-width: 600px) {
    .hubs-grid { grid-template-columns: 1fr; }
}

.hubs-content {
    flex: 1;
    min-width: 0;
    display: flex;
    flex-direction: column;
}

.hubs-empty[hidden] { display: none !important; }

/* ── Country filter pill + banner highlight ── */
.ce-filter-pill {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 8px 12px;
    margin: 0 12px;
    background: linear-gradient(90deg, #fef3c7 0%, #fde68a 100%);
    border: 1px solid #f59e0b;
    border-radius: 8px;
    font-size: 0.84rem;
    color: #78350f;
    animation: fadeInUp 0.2s ease-out;
}
.ce-filter-pill[hidden] { display: none !important; }
.ce-filter-pill-icon { display: inline-flex; align-items: center; color: #b45309; }
.ce-filter-pill-text strong { color: #1e293b; font-weight: 700; margin-left: 2px; }
.ce-filter-pill-count {
    background: rgba(146, 64, 14, 0.15);
    color: #78350f;
    font-weight: 600;
    font-size: 0.76rem;
    padding: 2px 8px;
    border-radius: 999px;
    margin-left: auto;
}
.ce-filter-pill-clear {
    background: rgba(120, 53, 15, 0.15);
    border: none;
    color: #78350f;
    width: 22px;
    height: 22px;
    border-radius: 50%;
    font-size: 1rem;
    line-height: 1;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    transition: background 0.12s;
}
.ce-filter-pill-clear:hover { background: #78350f; color: #fff; }

.banner-highlight {
    background: #fde68a;
    color: #78350f;
    padding: 0 2px;
    border-radius: 3px;
    font-weight: 600;
}
.banner-empty {
    list-style: none;
    padding: 18px 10px;
    text-align: center;
    color: var(--text-muted);
    font-size: 0.78rem;
    font-style: italic;
}

/* ── Filter sub-panel font sizes (compact) ── */
.hubs-chip, .ce-chip { font-size: 0.7rem; }
.hubs-chip-count, .ce-chip-count { font-size: 0.62rem; }
.hubs-search, .ce-search { font-size: 0.72rem; }
.hubs-filter-label { font-size: 0.64rem; }
.hubs-summary { font-size: 0.7rem; }
.hubs-reset { font-size: 0.68rem; }
.hubs-group-name { font-size: 0.72rem; }
.ce-country-chip { font-size: 0.7rem; }
.ce-title { font-size: 0.72rem; }
.ce-count { font-size: 0.64rem; }
.ce-group-title { font-size: 0.72rem; }
.matrix-filter-select, .matrix-search { font-size: 0.7rem; padding: 0.32rem 0.6rem; }

/* ── Enhanced mobile responsive ── */
@media (max-width: 768px) {
    .header {
        padding: 0.5rem 0.8rem;
    }
    .header-left { left: 0.8rem; }
    .header-right { right: 0.8rem; font-size: 0.72rem; gap: 6px; }
    .header-logo-mark svg { width: 24px; height: 24px; }
    .header-center-title {
        font-size: 0.95rem;
        letter-spacing: 0.12em;
    }
    .process-flow {
        padding: 0.5rem 0.4rem;
        margin: 0.4rem 0.5rem;
        gap: 0;
    }
    .flow-icon { width: 32px; height: 32px; font-size: 0.8rem; border-radius: 8px; }
    .flow-label { font-size: 0.64rem; }
    .flow-step { min-width: 44px; gap: 3px; }
    .flow-arrow { margin: 0 0.1rem; margin-bottom: 14px; font-size: 0.55rem; }

    /* Tabs */
    .tab-bar { overflow-x: auto; -webkit-overflow-scrolling: touch; }
    .tab-btn { white-space: nowrap; flex-shrink: 0; }

    /* Hubs toolbar stacks vertically on mobile */
    .hubs-toolbar { padding: 8px 10px; gap: 8px; }
    .hubs-toolbar-row { gap: 8px; }
    .hubs-filter-group { width: 100%; }
    .hubs-chip-row { width: 100%; }
    .hubs-search-wrap { max-width: none; width: 100%; min-width: 0; }
    .hubs-summary { margin-left: 0; width: 100%; text-align: center; }
    .hubs-reset { align-self: flex-start; }
    .hubs-grid { grid-template-columns: 1fr; gap: 8px; }
    .hub-card { padding: 7px 8px 5px; }
    .hub-name { font-size: 0.84rem; }
    .hub-country { font-size: 0.68rem; }
    .hub-type-badge { font-size: 0.66rem; padding: 1px 5px; }

    /* Country explorer on mobile */
    .ce-toolbar { flex-direction: column; align-items: stretch; gap: 8px; }
    .ce-title { justify-content: flex-start; }
    .ce-search-wrap { max-width: none; }
    .ce-toggle { align-self: flex-start; }
    .ce-chip-row { padding: 0 10px; }

    /* Banner */
    .banner-merged-header { font-size: 0.88rem; padding: 6px 10px; }
    .banner-cols { grid-template-columns: 1fr; gap: 0; }
    .banner-col { border-right: none; border-bottom: 1px solid var(--border-light); padding: 8px 10px; }
    .banner-col:last-child { border-bottom: none; }
    .banner-col-title { font-size: 0.82rem; }
    .banner-list li { font-size: 0.78rem; }

    /* Focus tab */
    .focus-header { flex-direction: column; align-items: stretch; gap: 10px; }
    .focus-header-actions { justify-content: flex-end; }
    .focus-stats-row { grid-template-columns: 1fr 1fr !important; gap: 8px; }
    .focus-title { font-size: 1.05rem; }
    .focus-subtitle { font-size: 0.78rem; }

    /* Matrix table: horizontally scroll on mobile */
    .matrix-table-wrap { overflow-x: auto; -webkit-overflow-scrolling: touch; }

    /* Main content padding */
    .main-content { padding: 0 0.5rem 1.2rem; }
    .global-search-bar { padding: 6px 0.5rem 0; }

    /* Filter pill */
    .ce-filter-pill { margin: 0 10px; font-size: 0.78rem; flex-wrap: wrap; }
}

@media (max-width: 480px) {
    .header-center-title { font-size: 0.85rem; letter-spacing: 0.08em; }
    .flow-step { min-width: 38px; }
    .flow-icon { width: 28px; height: 28px; font-size: 0.72rem; }
    .flow-label { font-size: 0.58rem; }
    .flow-arrow { margin: 0; margin-bottom: 12px; }
    .tab-btn { padding: 8px 10px; font-size: 0.82rem; }
}

@media (max-width: 480px) {
    .header { padding-left: 52px; padding-right: 78px; min-height: 40px; }
    .header-right { font-size: 0.68rem; }
    .header-dot { width: 5px; height: 5px; }
    .header-center-title {
        font-size: 0.8rem;
        letter-spacing: 0.04em;
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
        max-width: 100%;
    }
}
@media (max-width: 360px) {
    .header-right span.header-time { display: none; }
    .header { padding-right: 1.5rem; }
}

/* ==========================================================
   Phase 9: banner 3-col, hub regional news, health matrix,
   hubs news table, country filter chips
   ========================================================== */

.banner-cols.banner-cols-3 { grid-template-columns: repeat(3, 1fr); }

/* Per-片区 hub news banner at top of 关键枢纽 section */
.hubs-region-banner {
    background: #fff;
    border: 1px solid var(--border-light);
    border-radius: 12px;
    margin-bottom: 14px;
    overflow: hidden;
    box-shadow: 0 2px 6px rgba(15,30,60,0.04);
}
.hubs-region-banner-header {
    padding: 10px 14px;
    font-size: 0.9rem;
    font-weight: 700;
    color: var(--accent);
    letter-spacing: 0.08em;
    background: linear-gradient(90deg, #f5f9ff 0%, #fff 100%);
    border-bottom: 1px solid var(--border-light);
}
.hubs-region-cols {
    display: grid;
    grid-template-columns: repeat(5, 1fr);
}
.hubs-region-cols .banner-col { padding: 10px 12px; border-right: 1px solid var(--border-light); }
.hubs-region-cols .banner-col:last-child { border-right: none; }
.hubs-region-cols .banner-col-title {
    font-size: 0.78rem; font-weight: 700; color: var(--accent);
    margin-bottom: 8px; padding-bottom: 6px;
    border-bottom: 1.5px solid var(--accent-light); letter-spacing: 0.08em;
}
.hubs-region-cols .banner-list { list-style: none; padding: 0; margin: 0; }
.hubs-region-cols .banner-list li {
    display: flex; align-items: flex-start; gap: 6px;
    padding: 5px 0; font-size: 0.78rem; line-height: 1.4;
    border-bottom: 1px dashed #eef1f5;
}
.hubs-region-cols .banner-list li:last-child { border-bottom: none; }
.hubs-region-cols .banner-idx {
    min-width: 16px; height: 16px; border-radius: 50%;
    background: var(--accent-light); color: var(--accent);
    font-size: 0.65rem; font-weight: 700;
    display: inline-flex; align-items: center; justify-content: center;
}
.hubs-region-cols .banner-date { color: #8b97a8; font-size: 0.72rem; font-variant-numeric: tabular-nums; white-space: nowrap; }
.hubs-region-cols .banner-text { flex: 1; color: #2a3343; }
.hubs-region-cols .hrb-hub { font-weight: 600; color: var(--accent); margin-right: 4px; }

/* Health matrix */
.hubs-health-wrap {
    background: #fff;
    border: 1px solid var(--border-light);
    border-radius: 12px;
    margin-bottom: 14px;
    overflow: hidden;
    box-shadow: 0 2px 6px rgba(15,30,60,0.04);
}.hubs-health-header {
    padding: 10px 14px; display: flex; align-items: center; justify-content: space-between;
    background: linear-gradient(90deg, #f5f9ff 0%, #fff 100%);
    border-bottom: 1px solid var(--border-light);
    flex-wrap: wrap; gap: 10px;
}
.hubs-health-title { font-size: 0.9rem; font-weight: 700; color: var(--accent); letter-spacing: 0.08em; }
.hubs-health-legend { display: flex; gap: 14px; flex-wrap: wrap; }
.hubs-health-legend-item { display: inline-flex; align-items: center; gap: 5px; font-size: 0.75rem; color: #50607a; }

/* ─────────────────────────────────────────────────────────────
   Shared table tokens (health matrix + hubs news table)
   --tbl-row-border : horizontal divider between data rows
   --tbl-col-border : vertical divider between columns (slightly darker)
   --tbl-head-bg    : header row background
   --tbl-head-border: header bottom border
   ───────────────────────────────────────────────────────────── */
.hubs-health-table, .hubs-news-table {
    --tbl-row-border: #eef2f7;
    --tbl-col-border: #c2cedd;
    --tbl-head-bg:    #eef3fa;
    --tbl-head-border:#c9d5e4;
    --tbl-cell-pad:   8px 12px;
    width: 100%; border-collapse: collapse; font-size: 0.82rem;
    color: var(--text-primary);
}

.hubs-health-table-wrap { max-height: 420px; overflow: auto; }

/* Let hub health table use more viewport height when available,
   while keeping a sensible cap on very large screens. */
.hubs-health-table-wrap {
    max-height: min(calc(100vh - 260px), calc(100dvh - 260px));
}

.hubs-health-table thead th,
.hubs-news-table  thead th {
    position: sticky; top: 0; z-index: 2;
    background: var(--tbl-head-bg); color: #2f3b4f;
    padding: 9px 12px; font-weight: 700;
    border-bottom: 1px solid var(--tbl-head-border);
    font-size: 0.76rem; letter-spacing: 0.06em;
    white-space: nowrap; text-align: left;
}
.hubs-health-table td, .hubs-news-table td {
    padding: var(--tbl-cell-pad);
    border-bottom: 1px solid var(--tbl-row-border);
    vertical-align: middle; line-height: 1.45;
}
.hubs-health-table tr:hover td.hm-name,
.hubs-health-table tr:hover td.hm-health { background: #f5f9fe; }
.hubs-news-table  tr.news-hoverable:hover td.ht-date,
.hubs-news-table  tr.news-hoverable:hover td.ht-headline,
.hubs-news-table  tr.news-hoverable:hover td.ht-tag { background: #eef4fb; }

/* Country column — shared look */
.hubs-health-table .hm-country,
.hubs-news-table  .ht-country {
    background: #fafcff;
    border-right: 1px solid var(--tbl-col-border);
    box-shadow: inset -1px 0 0 var(--tbl-col-border);
    font-weight: 600; color: #2f3b4f;
    white-space: nowrap; text-align: left;
    min-width: 120px;
}

/* Vertical "spine" columns: 片区 + 类型 */
.hubs-health-table .hm-region,
.hubs-news-table  .ht-region {
    width: 46px; min-width: 46px; padding: 0; text-align: center;
    color: #fff; border-right: 1px solid rgba(255,255,255,0.28);
    vertical-align: top;
}
.hubs-health-table .hm-region .spine,
.hubs-news-table  .ht-region .spine {
    position: sticky; top: 44px;
    display: flex; align-items: center; justify-content: center;
    writing-mode: vertical-rl;
    font-weight: 700; font-size: 0.82rem; letter-spacing: 0.3em;
    padding: 14px 0; min-height: 70px; line-height: 1;
    width: 100%; box-sizing: border-box;
}
.hubs-health-table .hm-type,
.hubs-news-table  .ht-type {
    width: 48px; min-width: 48px; padding: 0; text-align: center;
    background: #f3f6fb;
    border-right: 1px solid var(--tbl-col-border);
    vertical-align: top;
}
.hubs-health-table .hm-type .spine,
.hubs-news-table  .ht-type .spine {
    position: sticky; top: 44px;
    display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 4px;
    padding: 14px 0; min-height: 70px;
    width: 100%; box-sizing: border-box;
}
.hubs-health-table .hm-type .spine-label,
.hubs-news-table  .ht-type .spine-label {
    display: inline-block;
    writing-mode: vertical-rl;
    font-weight: 600; font-size: 0.78rem; letter-spacing: 0.18em;
    color: #4a5a74;
}
.hubs-health-table .hm-type svg,
.hubs-news-table  .ht-type svg { color: #5a6b85; width: 14px; height: 14px; }

/* Column-specific header alignment
   (center short label columns, left-align content columns) */
.hubs-health-table thead th:nth-child(1),  /* 片区 */
.hubs-health-table thead th:nth-child(2),  /* 类型 */
.hubs-health-table thead th:nth-child(5),  /* 健康 */
.hubs-news-table  thead th:nth-child(1),   /* 片区 */
.hubs-news-table  thead th:nth-child(4),   /* 类型 */
.hubs-news-table  thead th:nth-child(5),   /* 日期 */
.hubs-news-table  thead th:nth-child(7) {  /* 标签 */
    text-align: center; padding-left: 6px; padding-right: 6px;
}

/* Region colors — applied to both matrix and news table */
.hubs-health-table tr td.hm-region, .hubs-news-table tr td.ht-region { background: #5b7ba3; }
.hubs-health-table tr[data-region="亚太"] td.hm-region,       .hubs-news-table tr[data-region="亚太"] td.ht-region       { background: #4a90a4; }
.hubs-health-table tr[data-region="中东中亚"] td.hm-region,   .hubs-news-table tr[data-region="中东中亚"] td.ht-region   { background: #c67a3e; }
.hubs-health-table tr[data-region="欧洲"] td.hm-region,       .hubs-news-table tr[data-region="欧洲"] td.ht-region       { background: #6a7cb8; }
.hubs-health-table tr[data-region="非洲"] td.hm-region,       .hubs-news-table tr[data-region="非洲"] td.ht-region       { background: #9b7a3c; }
.hubs-health-table tr[data-region="拉美"] td.hm-region,       .hubs-news-table tr[data-region="拉美"] td.ht-region       { background: #5a9b6e; }

/* Health-matrix-specific columns */
.hubs-health-table .hm-name {
    color: #1a2332; text-align: left;
    min-width: 110px; white-space: nowrap;
    border-right: 1px solid var(--tbl-col-border);
    box-shadow: inset -1px 0 0 var(--tbl-col-border);
}
.hubs-health-table .hm-health {
    text-align: center; width: 72px; min-width: 72px;
}

/* Health dot */
.health-dot {
    display: inline-block; width: 11px; height: 11px; border-radius: 50%;
    background: #aaa; cursor: help; position: relative;
    box-shadow: 0 0 0 2px rgba(255,255,255,0.8), 0 1px 2px rgba(0,0,0,0.15);
    transition: transform 0.15s;
}
.health-dot:hover { transform: scale(1.35); }
.health-good  { background: #3bb273; }
.health-watch { background: #f5b301; }
.health-warn  { background: #f07a2e; }
.health-bad   { background: #dc3545; }

/* Country chip row: compact, wraps */
.hubs-filter-group-country { flex: 1 1 100%; min-width: 0; }
.hubs-filter-group-country .hubs-chip-row {
    flex-wrap: wrap; max-height: 72px; overflow-y: auto;
}
.hubs-chip-flag { font-size: 0.9em; margin-right: 2px; }

/* Hubs news table (replaces card grid) */
.hubs-news-table-wrap {
    background: #fff;
    border: 1px solid var(--border-light);
    border-radius: 12px;
    overflow: auto;
    max-height: min(calc(100vh - 210px), calc(100dvh - 210px));
    box-shadow: 0 2px 6px rgba(15,30,60,0.04);
}
.hubs-news-table .ht-hub {
    background: #fafcff;
    border-right: 1px solid var(--tbl-col-border);
    box-shadow: inset -1px 0 0 var(--tbl-col-border);
    font-weight: 600; color: #1a2332;
    white-space: nowrap; text-align: left;
    min-width: 110px;
}
.hubs-news-table .ht-date {
    color: #6b7787; font-variant-numeric: tabular-nums;
    white-space: nowrap; text-align: center;
    width: 84px; min-width: 84px;
}
.hubs-news-table .ht-headline { color: #1a2332; text-align: left; }
.hubs-news-table .ht-tag {
    white-space: nowrap; text-align: center;
    width: 96px; min-width: 96px;
}
.hubs-news-table tr.news-hoverable { cursor: pointer; }

@media (max-width: 900px) {
    .hubs-region-cols { grid-template-columns: repeat(2, 1fr); }
    .banner-cols.banner-cols-3 { grid-template-columns: 1fr; }
    .hubs-health-table-wrap, .hubs-news-table-wrap { overflow-x: auto; }
}
@media (max-width: 600px) {
    .hubs-region-cols { grid-template-columns: 1fr; }
}

/* Hub cell hover affordance + popup */
.hubs-health-table .hm-name.hub-hoverable {
    cursor: pointer;
    color: #1a2332;
    font-weight: 600;
    border-bottom: 1px dashed transparent;
    transition: color 0.12s, border-color 0.12s, background 0.12s;
}
.hubs-health-table .hm-name.hub-hoverable:hover,
.hubs-health-table .hm-name.hub-hoverable:focus {
    background: #eef4fb;
    color: var(--accent);
    border-bottom-color: var(--accent);
    outline: none;
}
.hub-news-popup {
    position: fixed; z-index: 9999;
    background: #fff; border: 1px solid var(--border-light);
    border-radius: 10px;
    box-shadow: 0 10px 28px rgba(15,30,60,0.18);
    padding: 10px 12px;
    font-size: 0.82rem; line-height: 1.45;
}
.hub-news-popup .hnp-head {
    display: flex; align-items: center; gap: 8px; flex-wrap: wrap;
    padding-bottom: 8px; margin-bottom: 8px;
    border-bottom: 1px solid var(--border-light);
}
.hub-news-popup .hnp-flag { font-size: 1rem; }
.hub-news-popup .hnp-hub { font-weight: 700; color: var(--accent); font-size: 0.95rem; }
.hub-news-popup .hnp-meta {
    display: inline-flex; align-items: center; gap: 3px;
    font-size: 0.72rem; color: #50607a;
    background: #f3f6fb; padding: 2px 6px; border-radius: 10px;
}
.hub-news-popup .hnp-loc { color: #8b97a8; font-size: 0.72rem; margin-left: auto; }
.hub-news-popup .hnp-list { display: flex; flex-direction: column; gap: 6px; }
.hub-news-popup .hnp-item {
    display: grid; grid-template-columns: auto 1fr auto; gap: 8px; align-items: center;
    padding: 6px 8px; border-radius: 6px;
    background: #fafbfd; text-decoration: none; color: #1a2332;
    transition: background 0.12s;
}
.hub-news-popup .hnp-item:hover { background: #eef4fb; }
.hub-news-popup .hnp-date { color: #8b97a8; font-size: 0.72rem; font-variant-numeric: tabular-nums; }
.hub-news-popup .hnp-text { color: #1a2332; }
.hub-news-popup .hnp-tag {
    font-size: 0.68rem; padding: 2px 6px; border-radius: 8px;
    background: #e8eef7; color: #3a4b66; white-space: nowrap;
}
.hub-news-popup .hnp-tag.policy   { background: #fff4e0; color: #b57900; }
.hub-news-popup .hnp-tag.economy  { background: #e4f1ff; color: #1565c0; }
.hub-news-popup .hnp-tag.supplier { background: #e9f6ee; color: #2e7d32; }
.hub-news-popup .hnp-tag.hub      { background: var(--tag-hub-bg);      color: var(--tag-hub); }
.hub-news-popup .hnp-tag.carrier  { background: var(--tag-carrier-bg);  color: var(--tag-carrier); }
.hub-news-popup .hnp-tag.customs  { background: var(--tag-customs-bg);  color: var(--tag-customs); }
.hub-news-popup .hnp-tag.social   { background: #fde8ec; color: #c62828; }
.hub-news-popup .hnp-empty { color: #8b97a8; text-align: center; padding: 6px; }


/* ============ Site Footer ============ */
.site-footer {
    position: relative;
    margin-top: clamp(12px, 2vh, 24px);
    background: linear-gradient(180deg, #12365f 0%, #0e2a4a 100%);
    color: #c7d6ea;
    font-size: 13.5px;
    z-index: 1;
}

@media (max-height: 760px) {
    .site-footer { margin-top: 8px; }
}
.site-footer::before {
    content: '';
    position: absolute;
    top: 0; left: 0; right: 0;
    height: 1px;
    background: linear-gradient(90deg, transparent, rgba(91,163,230,0.55), transparent);
}
.footer-inner {
    max-width: 1400px;
    margin: 0 auto;
    padding: 48px 32px 32px;
    display: grid;
    grid-template-columns: 1.6fr 1fr 1fr 1.2fr;
    gap: 40px;
}
.footer-col { min-width: 0; }
.footer-brand .footer-logo {
    display: flex;
    align-items: center;
    gap: 12px;
    color: #fff;
    font-size: 16px;
    font-weight: 600;
    letter-spacing: 0.5px;
    margin-bottom: 14px;
}
.footer-tagline {
    line-height: 1.75;
    color: #a9bcd4;
    margin-bottom: 18px;
    max-width: 360px;
}
.footer-status {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 6px 12px;
    background: rgba(91,163,230,0.08);
    border: 1px solid rgba(91,163,230,0.2);
    border-radius: 999px;
    font-size: 12.5px;
    color: #b8ccE4;
}
.footer-dot {
    width: 7px; height: 7px;
    border-radius: 50%;
    background: #4ade80;
    box-shadow: 0 0 0 3px rgba(74,222,128,0.18);
    animation: footerPulse 2s ease-in-out infinite;
}
@keyframes footerPulse {
    0%, 100% { opacity: 1; }
    50% { opacity: 0.55; }
}
.footer-title {
    color: #fff;
    font-size: 13px;
    font-weight: 600;
    letter-spacing: 1.2px;
    text-transform: uppercase;
    margin-bottom: 16px;
    position: relative;
    padding-bottom: 10px;
}
.footer-title::after {
    content: '';
    position: absolute;
    left: 0; bottom: 0;
    width: 24px; height: 2px;
    background: #5ba3e6;
    border-radius: 2px;
}
.footer-links, .footer-contact {
    list-style: none;
    padding: 0; margin: 0;
    display: flex;
    flex-direction: column;
    gap: 10px;
}
.footer-links a {
    color: #b0c2d9;
    text-decoration: none;
    transition: color 0.2s ease, transform 0.2s ease;
    display: inline-block;
}
.footer-links a:hover {
    color: #fff;
    transform: translateX(3px);
}
.footer-contact li {
    display: flex;
    align-items: center;
    gap: 10px;
    color: #b0c2d9;
}
.footer-contact i {
    width: 28px; height: 28px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: rgba(91,163,230,0.1);
    border-radius: 6px;
    color: #5ba3e6;
    font-size: 12px;
    flex-shrink: 0;
}
.footer-social {
    display: flex;
    gap: 10px;
    margin-top: 18px;
}
.footer-social a {
    width: 34px; height: 34px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: 8px;
    background: rgba(255,255,255,0.06);
    color: #c7d6ea;
    text-decoration: none;
    transition: all 0.2s ease;
    border: 1px solid rgba(255,255,255,0.06);
}
.footer-social a:hover {
    background: #5ba3e6;
    color: #fff;
    border-color: #5ba3e6;
    transform: translateY(-2px);
}
.footer-bottom {
    max-width: 1400px;
    margin: 0 auto;
    padding: 14px 32px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    flex-wrap: wrap;
    gap: 12px;
    font-size: 12.5px;
    color: #8ba0bd;
}
.footer-bottom-right {
    display: flex;
    align-items: center;
    gap: 10px;
}
.footer-bottom-right a {
    color: #8ba0bd;
    text-decoration: none;
    transition: color 0.2s ease;
}
.footer-bottom-right a:hover { color: #fff; }
.footer-sep { color: #455972; }

@media (max-width: 1024px) {
    .footer-inner {
        grid-template-columns: 1fr 1fr;
        gap: 32px;
    }
}
@media (max-width: 600px) {
    .footer-inner {
        grid-template-columns: 1fr;
        padding: 36px 20px 24px;
    }
    .footer-bottom {
        flex-direction: column;
        text-align: center;
        padding: 16px 20px;
    }
}

/* ============ TOP 20 panel ============ */
.top20-wrap { padding: 16px 18px 24px; }
.top20-header {
    display: flex; justify-content: space-between; align-items: flex-start;
    gap: 16px; padding: 14px 18px; margin-bottom: 14px;
    background: linear-gradient(135deg, var(--accent) 0%, #2268b0 100%);
    border-radius: var(--panel-radius);
    color: #fff; box-shadow: var(--shadow-md);
}
.top20-title { font-size: 1.05rem; font-weight: 700; letter-spacing: 0.08em; margin: 0 0 4px; }
.top20-subtitle { font-size: 0.78rem; opacity: 0.88; margin: 0; line-height: 1.6; max-width: 640px; }
.top20-header-right { display: flex; gap: 18px; }
.top20-stat { display: flex; flex-direction: column; align-items: center; gap: 2px; }
.top20-stat-num { font-size: 1.4rem; font-weight: 700; line-height: 1; }
.top20-stat-num.accent { color: #ffd773; }
.top20-stat-lbl { font-size: 0.66rem; opacity: 0.85; letter-spacing: 0.08em; }
.top20-filter-row {
    display: flex; align-items: center; gap: 8px; flex-wrap: wrap;
    padding: 10px 14px; margin-bottom: 12px;
    background: linear-gradient(180deg, #f6f8fb 0%, #fafbfd 100%);
    border: 1px solid var(--border-light); border-radius: 8px;
}
.top20-filter-label { font-size: 0.7rem; font-weight: 700; color: var(--text-muted); letter-spacing: 0.08em; }
.top20-filter-btns { display: flex; gap: 6px; flex-wrap: wrap; }
.top20-filter-btn {
    padding: 3px 10px; border: 1px solid var(--accent-subtle); border-radius: 999px;
    background: #fff; color: var(--accent); font-size: 0.7rem; font-weight: 600;
    cursor: pointer; transition: all 0.15s;
}
.top20-filter-btn:hover { background: var(--accent-light); }
.top20-filter-btn.active { background: linear-gradient(135deg, var(--accent), #2268b0); border-color: var(--accent); color: #fff; }
.top20-list { display: grid; grid-template-columns: 1fr; gap: 8px; }
.top20-notification {
    margin-bottom: 6px;
    background: linear-gradient(135deg, #fafcff 0%, #eef3fa 100%);
    border: 1px solid #d0dcf0; border-radius: 10px;
    overflow: hidden;
}
.top20-notification-header {
    display: flex; align-items: center; gap: 8px;
    padding: 10px 18px;
    background: linear-gradient(135deg, #e8f0f9, #dce7f4);
    border-bottom: 1px solid #d0dcf0;
}
.top20-notification-header-icon {
    color: var(--accent); font-size: 0.82rem;
}
.top20-notification-header-label {
    font-size: 0.78rem; font-weight: 600; color: var(--accent);
    letter-spacing: 0.03em;
}
.top20-notification-body {
    padding: 14px 20px 16px;
    font-size: 0.86rem; line-height: 1.85; color: #2d3a4e;
}
.top20-notification-body p {
    margin: 0; font-weight: 600;
}
.top20-notification-body p + p {
    margin-top: 8px;
}
.top20-item {
    display: grid; grid-template-columns: 44px 1fr auto; align-items: start;
    gap: 14px; padding: 12px 16px;
    background: #fff; border: 1px solid var(--border-light); border-radius: 8px;
    box-shadow: var(--shadow-sm);
    transition: transform 180ms cubic-bezier(0.16, 1, 0.3, 1),
                box-shadow 180ms cubic-bezier(0.16, 1, 0.3, 1),
                border-color 180ms ease;
}
.top20-item:hover { border-color: var(--accent-subtle); box-shadow: var(--shadow-md); }
.top20-rank {
    display: inline-flex; align-items: center; justify-content: center;
    width: 36px; height: 36px; border-radius: 8px; margin-top: 2px;
    background: linear-gradient(135deg, #eef3f9, #dde7f4);
    color: var(--accent); font-weight: 800; font-size: 0.95rem;
}
.top20-item.rank-1 .top20-rank, .top20-item.rank-2 .top20-rank, .top20-item.rank-3 .top20-rank {
    background: linear-gradient(135deg, var(--accent), #2268b0); color: #fff;
}
.top20-body { min-width: 0; }
.top20-headline {
    font-size: 0.88rem; font-weight: 600; color: var(--text-primary);
    line-height: 1.5; margin-bottom: 4px;
    text-decoration: none; display: block;
}
.top20-headline:hover { color: var(--accent); }
.top20-meta { display: flex; gap: 10px; align-items: center; font-size: 0.7rem; color: var(--text-muted); flex-wrap: wrap; }
.top20-meta .top20-date { font-weight: 600; color: var(--text-secondary); }
.top20-side { display: flex; flex-direction: column; align-items: flex-end; gap: 6px; flex-shrink: 0; }
.top20-risk-badge {
    font-size: 0.7rem !important;
    padding: 3px 10px !important;
    display: inline-flex;
    align-items: baseline;
    gap: 4px;
    border-radius: 999px;
    line-height: 1.25;
    white-space: nowrap;
}
.top20-risk-badge .top20-risk-label {
    font-weight: 600;
    opacity: 0.85;
    letter-spacing: 0.02em;
}
.top20-risk-badge .top20-risk-value {
    font-weight: 800;
    letter-spacing: 0.04em;
}
@media (max-width: 520px) {
    /* Phones: drop the prefix label so the colored value stays compact. */
    .top20-risk-badge .top20-risk-label { display: none; }
    .top20-risk-badge { padding: 3px 8px !important; }
}
.top20-priority-badge {
    padding: 2px 8px; border-radius: 4px; font-size: 0.66rem; font-weight: 700;
    letter-spacing: 0.06em;
}
.top20-priority-badge.critical { background: #fee2e2; color: #b91c1c; }
.top20-priority-badge.important { background: #fed7aa; color: #c2410c; }
.top20-priority-badge.normal { background: #dbeafe; color: #1d4ed8; }
.top20-priority-badge.low { background: #f1f5f9; color: #64748b; }
.top20-empty { padding: 60px 20px; text-align: center; color: var(--text-muted); font-size: 0.85rem; }

/* AI summary / analysis rows inside each top-20 card */
.top20-ai-row {
    display: flex;
    align-items: flex-start;
    gap: 6px;
    margin-top: 6px;
    padding-left: 2px;
    font-size: 0.72rem;
    line-height: 1.55;
    color: var(--text-secondary);
}
.top20-ai-row i {
    margin-top: 2px;
    font-size: 0.68rem;
    opacity: 0.7;
    flex-shrink: 0;
}
.top20-ai-label {
    font-weight: 700;
    white-space: nowrap;
    flex-shrink: 0;
    color: var(--text-muted);
}
.top20-ai-analysis .top20-ai-label {
    color: var(--accent);
}
.top20-side { margin-top: 2px; } /* align risk badge with top of content */

/* ============ Tracking panel ============ */
.tracking-wrap { padding: 16px 18px 24px; }
.tracking-header {
    display: flex; justify-content: space-between; align-items: flex-start;
    gap: 16px; padding: 14px 18px; margin-bottom: 14px;
    background: linear-gradient(135deg, #0f3a6b 0%, var(--accent) 100%);
    border-radius: var(--panel-radius); color: #fff; box-shadow: var(--shadow-md);
}
.tracking-title { font-size: 1.05rem; font-weight: 700; letter-spacing: 0.08em; margin: 0 0 4px; }
.tracking-subtitle { font-size: 0.78rem; opacity: 0.88; margin: 0; line-height: 1.6; max-width: 640px; }
.tracking-header-right { display: flex; gap: 16px; }
.tracking-stat { display: flex; flex-direction: column; align-items: center; gap: 2px; }
.tracking-stat-num { font-size: 1.4rem; font-weight: 700; line-height: 1; }
.tracking-stat-num.accent { color: #ffd773; }
.tracking-stat-num.done { color: #6ee7b7; }
.tracking-stat-lbl { font-size: 0.66rem; opacity: 0.85; letter-spacing: 0.08em; }
.tracking-filter-row {
    display: flex; align-items: center; gap: 8px; flex-wrap: wrap;
    padding: 10px 14px; margin-bottom: 12px;
    background: linear-gradient(180deg, #f6f8fb 0%, #fafbfd 100%);
    border: 1px solid var(--border-light); border-radius: 8px;
}
.tracking-filter-label { font-size: 0.7rem; font-weight: 700; color: var(--text-muted); letter-spacing: 0.08em; }
.tracking-filter-btns { display: flex; gap: 6px; flex-wrap: wrap; }
.tracking-filter-btn {
    padding: 3px 10px; border: 1px solid var(--accent-subtle); border-radius: 999px;
    background: #fff; color: var(--accent); font-size: 0.7rem; font-weight: 600;
    cursor: pointer; transition: all 0.15s;
}
.tracking-filter-btn:hover { background: var(--accent-light); }
.tracking-filter-btn.active { background: linear-gradient(135deg, var(--accent), #2268b0); border-color: var(--accent); color: #fff; }
.tracking-table-wrap {
    background: #fff; border: 1px solid var(--border-light);
    border-radius: 8px; overflow: hidden; box-shadow: var(--shadow-sm);
}
.tracking-table { width: 100%; border-collapse: collapse; font-size: 0.78rem; }
.tracking-table thead th {
    background: linear-gradient(180deg, #f1f5fa 0%, #e6eef7 100%);
    color: var(--accent); font-weight: 700; letter-spacing: 0.06em;
    padding: 10px 12px; text-align: left; font-size: 0.7rem;
    border-bottom: 2px solid var(--accent-subtle);
}
.tracking-table tbody td {
    padding: 10px 12px; border-bottom: 1px solid var(--border-light);
    vertical-align: middle; color: var(--text-primary);
}
.tracking-table tbody tr:hover td { background: #f6f9fd; }
.tracking-headline-cell { max-width: 360px; }
.tracking-headline-cell a { color: var(--text-primary); text-decoration: none; font-weight: 600; }
.tracking-headline-cell a:hover { color: var(--accent); }
.tracking-headline-source { font-size: 0.66rem; color: var(--text-muted); margin-top: 2px; }
.tracking-dept-pill {
    display: inline-block; padding: 2px 9px; border-radius: 999px;
    background: var(--accent-light); color: var(--accent);
    font-size: 0.7rem; font-weight: 700; letter-spacing: 0.04em;
}
.tracking-eta-bar-wrap { width: 140px; }
.tracking-eta-bar {
    height: 6px; background: #e2e8f0; border-radius: 3px; overflow: hidden;
}
.tracking-eta-bar-fill {
    height: 100%; background: linear-gradient(90deg, var(--accent), #5ba3e6);
    border-radius: 3px; transition: width 0.3s;
}
.tracking-eta-bar-text { font-size: 0.66rem; color: var(--text-muted); margin-top: 3px; }
.tracking-status-select {
    padding: 3px 8px; border: 1px solid var(--border); border-radius: 6px;
    font-size: 0.7rem; font-weight: 600; background: #fff; color: var(--text-primary);
    cursor: pointer; font-family: inherit;
}
.tracking-status-select.status-pending { color: #c2410c; border-color: #fed7aa; background: #fff7ed; }
.tracking-status-select.status-progress { color: var(--accent); border-color: var(--accent-subtle); background: var(--accent-light); }
.tracking-status-select.status-done { color: #15803d; border-color: #bbf7d0; background: #f0fdf4; }
.tracking-action-btn {
    border: none; background: transparent; color: var(--text-muted);
    cursor: pointer; padding: 4px; border-radius: 4px;
}
.tracking-action-btn:hover { color: #b91c1c; background: #fef2f2; }
.tracking-empty {
    padding: 60px 20px; text-align: center; color: var(--text-muted);
    font-size: 0.85rem; display: flex; flex-direction: column; align-items: center; gap: 10px;
}
.tracking-empty-title { font-size: 1rem; font-weight: 600; color: var(--text-secondary); }
.tracking-empty-hint { font-size: 0.78rem; max-width: 480px; line-height: 1.6; }

/* ============ Distribution Modal ============ */
.dist-modal-backdrop {
    position: fixed; inset: 0; z-index: 1000;
    background: rgba(15, 23, 42, 0.55);
    display: flex; align-items: center; justify-content: center;
    backdrop-filter: blur(2px);
}
.dist-modal-backdrop[hidden] { display: none; }
.dist-modal {
    width: min(520px, 92vw); max-height: 88vh; overflow: hidden;
    background: #fff; border-radius: 12px; box-shadow: 0 20px 50px rgba(0,0,0,0.25);
    display: flex; flex-direction: column;
    animation: distSlideIn 0.22s ease-out;
}
@keyframes distSlideIn { from { transform: translateY(12px); opacity: 0; } to { transform: translateY(0); opacity: 1; } }
.dist-modal-header {
    display: flex; justify-content: space-between; align-items: center;
    padding: 14px 18px;
    background: linear-gradient(135deg, var(--accent), #2268b0); color: #fff;
}
.dist-modal-title { margin: 0; font-size: 1rem; font-weight: 700; letter-spacing: 0.06em; }
.dist-modal-close {
    border: none; background: rgba(255,255,255,0.15); color: #fff;
    width: 28px; height: 28px; border-radius: 6px; cursor: pointer;
    font-size: 1.1rem; line-height: 1;
}
.dist-modal-close:hover { background: rgba(255,255,255,0.28); }
.dist-modal-body { padding: 18px; overflow-y: auto; }
.dist-news-preview {
    padding: 12px 14px; margin-bottom: 16px;
    background: #f6f9fd; border-left: 3px solid var(--accent);
    border-radius: 6px; font-size: 0.82rem; color: var(--text-primary);
    line-height: 1.55;
}
.dist-news-preview .dist-news-meta {
    font-size: 0.68rem; color: var(--text-muted); margin-bottom: 4px;
    letter-spacing: 0.04em;
}
.dist-field { margin-bottom: 18px; }
.dist-field:last-child { margin-bottom: 0; }
.dist-label {
    display: block; font-size: 0.74rem; font-weight: 700;
    color: var(--text-secondary); letter-spacing: 0.06em; margin-bottom: 8px;
}
.dist-eta-badge {
    display: inline-block; padding: 1px 8px; margin-left: 6px;
    background: var(--accent-light); color: var(--accent);
    border-radius: 999px; font-size: 0.7rem; font-weight: 700;
}
.dist-dept-row { display: flex; gap: 8px; flex-wrap: wrap; }
.dist-dept-btn {
    padding: 8px 16px; border: 1.5px solid var(--accent-subtle); border-radius: 8px;
    background: #fff; color: var(--accent); font-size: 0.82rem; font-weight: 700;
    cursor: pointer; transition: all 0.15s; min-width: 70px;
    font-family: inherit;
}
.dist-dept-btn:hover { background: var(--accent-light); }
.dist-dept-btn.active {
    background: linear-gradient(135deg, var(--accent), #2268b0);
    border-color: var(--accent); color: #fff;
    box-shadow: 0 2px 6px rgba(30, 79, 139, 0.25);
}
.dist-slider {
    width: 100%; height: 6px; -webkit-appearance: none; appearance: none;
    background: linear-gradient(90deg, var(--accent-subtle), var(--accent));
    border-radius: 3px; outline: none; cursor: pointer;
}
.dist-slider::-webkit-slider-thumb {
    -webkit-appearance: none; appearance: none; width: 18px; height: 18px;
    border-radius: 50%; background: #fff; border: 3px solid var(--accent);
    cursor: pointer; box-shadow: 0 2px 6px rgba(0,0,0,0.18);
    transition: transform 0.15s;
}
.dist-slider::-webkit-slider-thumb:hover { transform: scale(1.1); }
.dist-slider::-moz-range-thumb {
    width: 18px; height: 18px; border-radius: 50%; background: #fff;
    border: 3px solid var(--accent); cursor: pointer;
}
.dist-slider-ticks {
    display: flex; justify-content: space-between; margin-top: 6px;
    font-size: 0.65rem; color: var(--text-muted);
}
.dist-modal-footer {
    display: flex; justify-content: flex-end; gap: 8px;
    padding: 12px 18px; border-top: 1px solid var(--border-light);
    background: #f8fafc;
}
.dist-btn {
    padding: 7px 16px; border-radius: 6px; font-size: 0.78rem; font-weight: 700;
    cursor: pointer; transition: all 0.15s; border: 1px solid transparent;
    font-family: inherit;
}
.dist-btn-secondary {
    background: #fff; color: var(--text-secondary); border-color: var(--border);
}
.dist-btn-secondary:hover { background: #f1f5f9; }
.dist-btn-primary {
    background: linear-gradient(135deg, var(--accent), #2268b0); color: #fff;
}
.dist-btn-primary:hover { box-shadow: 0 4px 10px rgba(30, 79, 139, 0.3); }
.dist-btn-primary:disabled { opacity: 0.5; cursor: not-allowed; box-shadow: none; }

/* Focus item: clickable for distribution; show distribution pill */
.focus-item.has-distribution { border-left: 3px solid #15803d; }
.focus-item-distribution-pill {
    display: inline-flex; align-items: center; gap: 4px;
    padding: 1px 8px; border-radius: 999px;
    background: #f0fdf4; color: #15803d;
    font-size: 0.66rem; font-weight: 700; letter-spacing: 0.04em;
}
/* ============ Flow step tooltip ============ */
.flow-step {
    cursor: default;
    border-radius: 10px;
    padding: 4px 6px 2px;
    transition: background 0.2s ease;
    outline: none;
}
.flow-step:hover,
.flow-step:focus-visible {
    background: rgba(91, 163, 230, 0.08);
}
.flow-step:hover .flow-icon,
.flow-step:focus-visible .flow-icon {
    background: var(--accent-subtle);
    border-color: var(--accent);
    box-shadow: 0 3px 10px rgba(26, 79, 139, 0.12);
}

.flow-tooltip {
    position: fixed;
    top: 0; left: 0;
    z-index: 1200;
    width: 280px;
    background: #1e293b;
    color: #f1f5f9;
    border-radius: 10px;
    padding: 0.8rem 0.95rem;
    font-size: 0.74rem;
    line-height: 1.6;
    box-shadow: 0 10px 32px rgba(0, 0, 0, 0.26);
    opacity: 0;
    visibility: hidden;
    transform: translateY(4px);
    transition: opacity 0.15s ease, transform 0.15s ease;
    pointer-events: none;
}
.flow-tooltip.show {
    opacity: 1;
    visibility: visible;
    transform: translateY(0);
}
.flow-tooltip::after {
    content: '';
    position: absolute;
    left: var(--arrow-x, 50%);
    margin-left: -7px;
    border: 7px solid transparent;
}
.flow-tooltip[data-arrow="bottom"]::after {
    top: 100%;
    border-top-color: #1e293b;
}
.flow-tooltip[data-arrow="top"]::after {
    bottom: 100%;
    border-bottom-color: #1e293b;
}
.flow-tooltip-title {
    font-weight: 700;
    color: #5ba3e6;
    font-size: 0.82rem;
    letter-spacing: 0.04em;
    margin-bottom: 2px;
}
.flow-tooltip-role {
    font-size: 0.68rem;
    color: #94a3b8;
    margin-bottom: 6px;
    letter-spacing: 0.03em;
}
.flow-tooltip-desc {
    margin-bottom: 7px;
    padding-bottom: 7px;
    border-bottom: 1px solid rgba(255, 255, 255, 0.09);
    color: #e2e8f0;
}
.flow-tooltip-metrics-label {
    font-size: 0.66rem;
    font-weight: 700;
    color: #ffd773;
    letter-spacing: 0.08em;
    margin-bottom: 3px;
}
.flow-tooltip-metrics {
    font-size: 0.7rem;
    color: #cbd5e1;
    line-height: 1.55;
}

/* ============ Tab panels: consistent width (prevent flicker) ============ */
/* The body's `overflow-y: scroll` already reserves the scrollbar gutter,
   so tab switches keep identical widths regardless of content height. A
   flex body layout then pushes the footer to the viewport bottom when
   content is short. No extra min-height needed here. */

/* ============ Mobile tab bar layout ============ */
@media (max-width: 768px) {
    .tab-bar {
        gap: 0.6rem;
        justify-content: center;
    }
    .tab-pill-group {
        flex: 0 0 auto;
    }
    .tab-pill-group-main {
        max-width: 100%;
    }
    .tab-pill-group-analytics {
        max-width: 100%;
        flex-wrap: nowrap;
    }
    /* Let analytics group shrink buttons a bit so all three fit one line */
    .tab-pill-group-analytics .tab-btn {
        padding: 0.38rem 0.7rem;
        font-size: 0.72rem;
    }
    /* Sub-tabs: allow horizontal scroll on tight widths instead of overflow */
    .tab-btn-trunk.active + .trunk-subtabs {
        max-width: 100vw;
    }
    .trunk-subtab {
        padding: 0.36rem 0.6rem;
        font-size: 0.7rem;
    }
    .flow-tooltip {
        width: min(260px, calc(100vw - 24px));
    }
}

@media (max-width: 520px) {
    .tab-bar {
        flex-direction: column;
        align-items: stretch;
    }
    .tab-pill-group {
        justify-content: center;
        overflow-x: auto;
    }
}

/* ════ Polish pass: motion, skeletons, accessibility ════ */

/* Risk badge update micro-animation */
@keyframes riskBadgeUpdate {
    0%   { transform: scale(1); }
    40%  { transform: scale(1.18); }
    100% { transform: scale(1); }
}
.risk-badge.just-updated {
    animation: riskBadgeUpdate 0.38s cubic-bezier(0.34, 1.56, 0.64, 1);
}

/* Filter pill entrance animation */
.ce-filter-pill {
    animation: filterPillEnter 0.22s cubic-bezier(0.22, 0.61, 0.36, 1) both;
}
@keyframes filterPillEnter {
    from { opacity: 0; transform: translateY(-6px) scaleY(0.85); }
    to   { opacity: 1; transform: translateY(0) scaleY(1); }
}

/* Process flow step stagger */
.process-flow .flow-step {
    animation: fadeInUp 0.5s cubic-bezier(0.22, 0.61, 0.36, 1) both;
}
.process-flow .flow-step:nth-child(1)  { animation-delay: 0.08s; }
.process-flow .flow-step:nth-child(3)  { animation-delay: 0.13s; }
.process-flow .flow-step:nth-child(5)  { animation-delay: 0.18s; }
.process-flow .flow-step:nth-child(7)  { animation-delay: 0.23s; }
.process-flow .flow-step:nth-child(9)  { animation-delay: 0.28s; }
.process-flow .flow-step:nth-child(11) { animation-delay: 0.33s; }

/* Modal tab active underline animation */
.modal-tab-btn.active {
    color: var(--accent);
    border-bottom-color: var(--accent);
    position: relative;
}
.modal-tab-btn.active::after {
    content: '';
    position: absolute;
    bottom: -1px; left: 0; right: 0;
    height: 2.5px;
    background: var(--accent);
    border-radius: 2px 2px 0 0;
    animation: tabUnderlineIn 0.22s ease both;
}
@keyframes tabUnderlineIn {
    from { transform: scaleX(0); }
    to   { transform: scaleX(1); }
}

/* Smooth in-page scrolling; keep anchored targets clear of the header */
html {
    scroll-behavior: smooth;
    scroll-padding-top: 64px;
}

/* Defer painting of the offscreen footer */
.site-footer {
    content-visibility: auto;
    contain-intrinsic-size: auto 120px;
}

/* Table row hover — subtle background transition (120ms ease) */
.matrix-table tbody td { transition: background-color 120ms ease; }
.tracking-table tbody tr { transition: background-color 120ms ease; }
.tracking-table tbody tr:hover { background: #f6f9fd; }

/* AI output fade-in — TOP 20 cards (AI 摘要 / AI 分析 rows) ease in on render.
   Transform + opacity only: no layout shift. */
@keyframes aiFadeIn {
    from { opacity: 0; transform: translateY(8px); }
    to   { opacity: 1; transform: translateY(0); }
}
.top20-item { animation: aiFadeIn 300ms cubic-bezier(0.16, 1, 0.3, 1) both; }

/* Live "新" badge — subtle pulse on background-color opacity (no scale) */
@keyframes newPillPulse {
    0%, 100% { background-color: rgba(220, 38, 38, 1); }
    50%      { background-color: rgba(220, 38, 38, 0.72); }
}
.news-new-pill { animation: newPillPulse 2.4s ease-in-out infinite; }

/* Skeleton loaders — placeholder for the TOP 20 list while top20.json loads.
   Left-to-right shimmer via background-position on a 200% gradient. */
.top20-skeleton { pointer-events: none; }
.skeleton-line,
.skeleton-pill,
.top20-skeleton .top20-rank {
    background: linear-gradient(90deg, #eef1f6 25%, #f7f9fc 50%, #eef1f6 75%);
    background-size: 200% 100%;
    animation: skeletonShimmer 1.4s linear infinite;
    border-radius: 6px;
    color: transparent;
}
.skeleton-line { height: 12px; margin: 6px 0; }
.skeleton-pill { width: 132px; height: 22px; border-radius: 999px; }
@keyframes skeletonShimmer {
    0%   { background-position: 200% 0; }
    100% { background-position: -200% 0; }
}

/* Mobile polish: make the 干线 selector feel cleaner on narrow screens.
   We remove the bright separator glow and keep a subtle divider line. */
@media (max-width: 720px) {
    .tab-pill-group-main {
        border-radius: 16px;
        box-shadow: 0 3px 12px rgba(15, 23, 42, 0.08), inset 0 1px 0 rgba(255, 255, 255, 0.9);
    }
    .tab-pill-group-main > .tab-btn-trunk,
    .tab-pill-group-main > .tab-btn[data-tab="capillary"] {
        min-height: 44px;
        font-size: 0.84rem;
        letter-spacing: 0.05em;
    }
    .tab-btn-capillary::after {
        display: none;
    }
    .tab-btn-capillary::before {
        left: 0;
        top: 11px;
        bottom: 11px;
        width: 1px;
        border-radius: 999px;
        background: rgba(148, 163, 184, 0.52);
    }
    .trunk-subtabs {
        padding: 2px 6px 6px;
        box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.18);
    }
    .trunk-subtab {
        border-radius: 8px;
    }
}

/* Reduced motion: collapse all animations and transitions */
@media (prefers-reduced-motion: reduce) {
    *, *::before, *::after {
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.01ms !important;
    }
    .tab-panel,
    .tab-panel.tab-panel-exiting,
    .trunk-section,
    .trunk-section-active,
    .trunk-section-exiting {
        transition-duration: 0.26s !important;
        animation-duration: 0.32s !important;
    }
    .tab-pill-group::before,
    .trunk-subtabs::before {
        transition-duration: 0.5s !important;
    }
    .news-hover-popup,
    .matrix-tooltip-shared {
        transition-duration: 0.32s !important;
    }
    html { scroll-behavior: auto; }
}