/* 事件列表面板视图样式 (Events List Styles) */

/* ==========================================================================
   1. 天气查询控制头区域 (Weather Query Control Header)
   ========================================================================== */
.weather-query-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
    margin-bottom: 20px;
    flex-wrap: wrap;
}

.weather-query-header-main {
    display: flex;
    align-items: center;
    gap: 8px;
}

.weather-query-title {
    font-weight: 800 !important;
}

.weather-query-caption-subtle {
    opacity: 0.6;
}

.weather-query-caption-muted {
    opacity: 0.7;
}

/* ==========================================================================
   2. 天气查询结果展示区 (Weather Query Result Details)
   ========================================================================== */
.weather-query-result-title {
    font-weight: 700 !important;
}

.weather-query-result-meta {
    opacity: 0.65;
}

/* 支持换行符渲染的天气详细文本段落 */
.weather-query-result-text {
    white-space: pre-wrap;
}

/* 天气防灾避难或警告指南文案段落 */
.weather-query-result-text--guideline {
    margin-top: 8px !important;
    opacity: 0.9;
}

.weather-query-loading-text {
    opacity: 0.75;
}

.weather-query-error-text {
    white-space: pre-wrap;
}

.events-view-section {
    margin-bottom: 24px;
}

/* ==========================================================================
   3. 地震历史记录滚动窗格 (Earthquake Event Roll Window)
   ========================================================================== */
.events-scroll-window {
    max-height: clamp(360px, 62vh, 760px);
    overflow-y: auto;
    overflow-x: hidden;
    padding-right: 6px;
    margin-bottom: 8px;
    scroll-behavior: smooth;
    -webkit-overflow-scrolling: touch;
}

.events-list {
    display: flex;
    flex-direction: column;
    gap: 16px;
    min-height: min-content;
}

/* ==========================================================================
   4. 地震/灾害事件卡片 (Disaster & Earthquake Cards)
   ========================================================================== */
/* 事件卡片 —— 命中壳 / 视觉面分离（横向轻移同样不带动 hit-box） */
.event-card {
    --hover-shift-x: 2px;
    --card-bg: var(--md-sys-color-surface);
    --card-border-color: var(--glass-border);
    --card-shadow: none;
    --card-hover-bg: color-mix(in srgb, var(--md-sys-color-surface) 84%, var(--md-sys-color-primary) 16%);
    --card-hover-border-color: color-mix(in srgb, var(--md-sys-color-primary) 52%, transparent);
    --card-hover-shadow: 0 6px 18px rgba(103, 80, 164, 0.10);
    position: relative;
    isolation: isolate;
    background: transparent;
    padding: 20px 24px;
    margin-bottom: 0;
    border-radius: var(--radius-lg);
    display: flex;
    align-items: center;
    gap: 24px;
    border: 1px solid transparent;
    box-shadow: none;
}

.event-card::before {
    content: '';
    position: absolute;
    inset: 0;
    z-index: -1;
    border-radius: inherit;
    background: var(--card-bg);
    border: 1px solid var(--card-border-color);
    box-shadow: var(--card-shadow);
    pointer-events: none;
    transition:
        transform 0.18s ease-out,
        background 0.18s ease-out,
        border-color 0.18s ease-out,
        box-shadow 0.18s ease-out;
}

.event-card > * {
    transition: transform 0.18s ease-out;
}

/* 折叠事件组内部的嵌套历史事件小卡片 */
.event-card-history {
    padding: 12px 20px;
    margin-bottom: 4px;
}

/* 地震速报震级/震度高亮胶囊/徽标 */
.mag-badge {
    width: 56px;
    height: 56px;
    border-radius: 12px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: 800;
    font-size: 18px;
    line-height: 1;
    flex-shrink: 0;
    box-shadow: 0 2px 10px rgba(0,0,0,0.04);
    overflow: hidden;
    position: relative;
}

/* 历史嵌套卡片中的小徽标 */
.mag-badge-history {
    width: 40px;
    height: 40px;
    font-size: 14px;
}

.mag-badge-earthquake-meta {
    background: #6B7878;
    color: #ffffff;
    box-shadow: 0 2px 8px rgba(0,0,0,0.16);
}

/* 日本气象厅震度及中国地震烈度配色规范 (JMA Shindo & Intensities Tones) */
.event-badge-tone-unknown,
.event-badge-tone-shindo-1,
.event-badge-tone-intensity-1 { background: #6B7878 !important; color: #ffffff !important; }
.event-badge-tone-shindo-2,
.event-badge-tone-intensity-2 { background: #1E6EE6 !important; color: #ffffff !important; }
.event-badge-tone-shindo-3,
.event-badge-tone-intensity-3 { background: #32B464 !important; color: #ffffff !important; }
.event-badge-tone-shindo-4,
.event-badge-tone-intensity-4 { background: #FFE05D !important; color: #2b2b2b !important; }
.event-badge-tone-shindo-5-minus,
.event-badge-tone-intensity-5-minus { background: #FFAA13 !important; color: #ffffff !important; }
.event-badge-tone-shindo-5-plus,
.event-badge-tone-intensity-5-plus { background: #EF700F !important; color: #ffffff !important; }
.event-badge-tone-shindo-6-minus,
.event-badge-tone-intensity-6-minus { background: #E60000 !important; color: #ffffff !important; }
.event-badge-tone-shindo-6-plus,
.event-badge-tone-intensity-6-plus { background: #A00000 !important; color: #ffffff !important; }
.event-badge-tone-shindo-7,
.event-badge-tone-intensity-7 { background: #5D0090 !important; color: #ffffff !important; }

.mag-badge-history.mag-badge-earthquake-meta {
    border-radius: 10px;
}

/* 天气警告图标容器 */
.mag-badge-weather-icon {
    padding: 0;
    border-radius: 0;
    background: transparent;
    box-shadow: none;
    overflow: visible;
}

/* 当天气图标图片失效或加载失败时的圆形后备容器 */
.mag-badge-weather-icon-fallback {
    background: var(--md-sys-color-surface-variant);
    border-radius: 50%;
}

.event-weather-icon {
    width: 100%;
    height: 100%;
    object-fit: fill;
    object-position: center;
    display: block;
    transform: scale(1.5); /* 放大天气图标，突出显示 */
}

/* 徽标内上方小标题标签 (例如 "震度", "烈度") */
.event-earthquake-badge-label {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 12px;
    line-height: 12px;
    text-align: center;
    font-size: 9px;
    font-weight: 600;
    color: rgba(255,255,255,0.88);
    background: rgba(0,0,0,0.18);
    letter-spacing: 0.2px;
}

.mag-badge-history .event-earthquake-badge-label {
    height: 10px;
    line-height: 10px;
    font-size: 8px;
}

/* 徽标中央的数值显示区域 (如具体震级: 7.3) */
.event-earthquake-badge-value {
    padding-top: 8px;
    font-weight: 800;
    font-size: 28px;
    text-shadow: 0 1px 2px rgba(0,0,0,0.25);
}

.mag-badge-history .event-earthquake-badge-value {
    padding-top: 6px;
    font-size: 18px;
}

/* 不同类型警报标签分类底色 */
.badge-earthquake { background: transparent; color: inherit; }
.badge-tsunami { background: #E1F5FE; color: #0288D1; }
.badge-weather { background: #FFF3E0; color: #F57C00; }
.badge-unknown { background: #F5F5F5; color: #616161; }

body.dark-theme .badge-earthquake { background: transparent; color: inherit; }
body.dark-theme .badge-tsunami { background: #01579B; color: #B3E5FC; }
body.dark-theme .badge-weather { background: #E65100; color: #FFE0B2; }
body.dark-theme .badge-unknown { background: #33313A; color: #CAC4D0; }

/* 悬停事件卡片：仅视觉面/内容横移，命中壳不动 */
.event-card:hover::before,
.event-card:hover > * {
    transform: translateX(var(--hover-shift-x));
}

.event-card:hover::before {
    background: var(--card-hover-bg);
    border-color: var(--card-hover-border-color);
    box-shadow: var(--card-hover-shadow);
}

/* 空白与正在加载等状态占位卡片 */
.events-state-card {
    text-align: center;
}

.events-loading-card {
    padding: 60px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 8px;
}

/* 重大事件时间轴加载状态面板与动画居中控制 */
.horizontal-timeline-loading-card {
    min-height: 180px;
    display: flex;
    flex-direction: column;
}

.horizontal-timeline-loading-body {
    flex: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 12px;
    padding: 20px;
}

.horizontal-timeline-loading-spinner {
    color: var(--md-sys-color-primary) !important;
}

.horizontal-timeline-loading-text {
    color: var(--md-sys-color-on-surface-variant);
    font-size: 0.85rem !important;
    opacity: 0.85;
}

.events-empty-card {
    padding: 80px;
}

.events-empty-icon {
    opacity: 0.1;
    margin-bottom: 16px !important;
}

.events-empty-title {
    opacity: 0.5;
}

.events-empty-subtitle {
    opacity: 0.3;
    margin-top: 8px !important;
    font-size: 0.8rem !important;
}

.events-list-shell {
    margin: 16px 0;
}

/* ==========================================================================
   5. 数据过滤器工具栏面板 (Event Filters & Toolbar)
   ========================================================================== */
.events-filters-header {
    display: flex;
    flex-direction: column;
    margin-bottom: 32px;
    gap: 16px;
}

.events-filters-title-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    flex-wrap: wrap;
}

.events-filters-title-group {
    display: flex;
    align-items: center;
    gap: 12px;
    flex-wrap: wrap;
    flex: 0 0 auto;
}

.events-filters-title {
    font-weight: 800 !important;
    letter-spacing: -0.5px !important;
    color: var(--md-sys-color-on-surface) !important;
}

/* 数据条数总计标签 */
.events-filters-total {
    opacity: 0.5;
    font-size: 0.85rem !important;
}

/* 事件过滤器磨砂背景总工具箱面板 —— 命中壳 / 视觉面分离 */
.event-filters-toolbar {
    --hover-lift: 1px;
    --card-bg:
        linear-gradient(180deg, rgba(255,255,255,0.54) 0%, rgba(255,255,255,0.34) 100%),
        radial-gradient(circle at top left, rgba(103, 80, 164, 0.06), transparent 44%);
    --card-border-color: var(--glass-border);
    --card-shadow: 0 10px 28px rgba(103, 80, 164, 0.08);
    --card-hover-border-color: color-mix(in srgb, var(--md-sys-color-primary) 22%, transparent);
    --card-hover-shadow: 0 14px 34px rgba(103, 80, 164, 0.12);
    display: flex;
    flex-direction: column;
    gap: 14px;
    padding: 18px 20px;
    border-radius: 24px;
    border: 1px solid transparent;
    background: transparent;
    box-shadow: none;
    backdrop-filter: blur(18px);
    -webkit-backdrop-filter: blur(18px);
    position: relative;
    isolation: isolate;
    z-index: 50;
}

.event-filters-toolbar::before {
    content: '';
    position: absolute;
    inset: 0;
    z-index: -1;
    border-radius: inherit;
    background: var(--card-bg);
    border: 1px solid var(--card-border-color);
    box-shadow: var(--card-shadow);
    pointer-events: none;
    transition:
        transform 0.18s ease-out,
        border-color 0.18s ease-out,
        box-shadow 0.2s ease-out;
}

.event-filters-toolbar > * {
    transition: transform 0.18s ease-out;
}

.event-filters-toolbar:hover::before,
.event-filters-toolbar:hover > * {
    transform: translateY(calc(-1 * var(--hover-lift)));
}

.event-filters-toolbar:hover::before {
    border-color: var(--card-hover-border-color);
    box-shadow: var(--card-hover-shadow);
}

/* 工具箱首行：包含主要过滤胶囊（如地震、海啸、天气） */
.event-filters-primary-row {
    display: flex;
    align-items: flex-start;
    gap: 14px;
    flex-wrap: wrap;
    padding-bottom: 14px;
    border-bottom: 1px solid color-mix(in srgb, var(--md-sys-color-outline-variant) 92%, transparent);
}

.event-filters-primary-label {
    min-height: 42px;
    display: inline-flex;
    align-items: center;
    font-size: 12px;
    font-weight: 700;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: color-mix(in srgb, var(--md-sys-color-on-surface) 58%, transparent);
    white-space: nowrap;
}

.event-filter-type-group {
    gap: 10px;
    align-items: center;
}

/* 工具箱次行：高级细粒度筛选器字段（如震级阈值选择、发布机构选择、关键字搜索） */
.event-filters-secondary-row {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
    gap: 12px;
    align-items: stretch;
}

.event-filters-time-row {
    display: block;
}

/* 提高选择器优先级，避免被后文通用 .event-filter-inline-controls 覆盖 */
.event-filter-field-card.event-filter-field-card-time {
    min-width: 0;
    width: 100%;
    /* 时间卡内容可变高，不要被通用 74px 最小高度撑出空洞 */
    min-height: 0 !important;
    gap: 6px;
    white-space: normal;
    justify-content: flex-start;
}

.event-filter-field-card-time .event-filter-label {
    margin: 0 !important;
    line-height: 1.2 !important;
    padding: 0;
}

/* 同时命中两个 class，确保覆盖后文 .event-filter-inline-controls 的 gap/align */
.event-filter-field-card-time .event-filter-inline-controls.event-filter-inline-controls-time {
    display: flex !important;
    flex-direction: column !important;
    flex-wrap: nowrap !important;
    align-items: flex-start !important;
    justify-content: flex-start !important;
    /* 预设芯片与自定义起止时间要紧挨着 */
    gap: 6px !important;
    width: 100%;
    min-height: 0;
    margin: 0;
    padding: 0;
}

.event-filter-time-presets {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    width: 100%;
    margin: 0;
    padding: 0;
    line-height: 1;
}

.event-filter-time-chip {
    --hover-lift: 1px;
    position: relative;
    isolation: isolate;
    min-height: 34px;
    padding: 0 14px;
    border-radius: 999px;
    border: 1px solid color-mix(in srgb, var(--md-sys-color-outline-variant) 88%, transparent);
    background: rgba(255, 255, 255, 0.72);
    color: inherit;
    font-size: 12px;
    font-weight: 700;
    cursor: pointer;
    transition:
        background-color 0.16s ease-out,
        border-color 0.16s ease-out,
        box-shadow 0.16s ease-out,
        transform 0.16s ease-out;
}

.event-filter-time-chip:hover {
    border-color: color-mix(in srgb, var(--md-sys-color-primary) 28%, transparent);
    transform: translateY(-1px);
}

.event-filter-time-chip.active {
    background: color-mix(in srgb, var(--md-sys-color-primary) 16%, white 84%);
    border-color: color-mix(in srgb, var(--md-sys-color-primary) 40%, transparent);
    box-shadow: 0 6px 14px rgba(103, 80, 164, 0.12);
    color: var(--md-sys-color-primary);
}

/* 开始 / 至 / 结束：默认强制同一行，避免被 min-width 或 wrap 拆成两行 */
.event-filter-custom-time {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr);
    align-items: end;
    column-gap: 10px;
    row-gap: 0;
    width: min(100%, 34rem);
    max-width: 100%;
    margin: 0;
    padding: 0;
}

.event-filter-datetime-field {
    display: flex;
    flex-direction: column;
    gap: 4px;
    min-width: 0;
    width: 100%;
    max-width: none;
    font-size: 12px;
    font-weight: 600;
    opacity: 0.82;
    margin: 0;
}

.event-filter-datetime-input {
    width: 100%;
    min-width: 0;
    max-width: 100%;
    /* datetime-local 自带图标，右侧留白别过大 */
    padding-right: 10px;
    /* 原生控件偏宽时允许收缩，避免把整行撑换行 */
    box-sizing: border-box;
}

.event-filter-datetime-separator {
    opacity: 0.55;
    font-size: 12px;
    font-weight: 700;
    line-height: 1;
    /* 与输入框中线对齐 */
    padding-bottom: 12px;
    align-self: end;
    margin: 0;
    white-space: nowrap;
}

.events-filters-active-count {
    opacity: 0.62;
    font-weight: 600 !important;
    white-space: nowrap;
}

.event-filters-footer-row {
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    gap: 12px 16px;
    flex-wrap: wrap;
    padding-top: 4px;
    border-top: 1px solid color-mix(in srgb, var(--md-sys-color-outline-variant) 88%, transparent);
    margin-top: 2px;
}

.event-filters-footer-actions {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: 10px;
    flex: 0 0 auto;
    margin-left: auto;
}

.event-filters-footer-hint {
    opacity: 0.55;
    font-weight: 600 !important;
}

.event-filter-reset-btn {
    min-height: 36px;
    padding: 0 16px;
    border-radius: 999px;
    border: 1px solid color-mix(in srgb, var(--md-sys-color-primary) 28%, transparent);
    background: color-mix(in srgb, var(--md-sys-color-primary) 10%, white 90%);
    color: var(--md-sys-color-primary);
    font-size: 12px;
    font-weight: 700;
    cursor: pointer;
    white-space: nowrap;
    transition:
        background-color 0.16s ease-out,
        border-color 0.16s ease-out,
        opacity 0.16s ease-out,
        box-shadow 0.16s ease-out;
}

.event-filter-reset-btn:hover:not(:disabled) {
    border-color: color-mix(in srgb, var(--md-sys-color-primary) 42%, transparent);
    background: color-mix(in srgb, var(--md-sys-color-primary) 16%, white 84%);
    box-shadow: 0 6px 14px rgba(103, 80, 164, 0.12);
}

.event-filter-reset-btn:disabled {
    opacity: 0.42;
    cursor: not-allowed;
    border-color: color-mix(in srgb, var(--md-sys-color-outline-variant) 88%, transparent);
    background: rgba(255, 255, 255, 0.62);
    color: inherit;
    box-shadow: none;
}

.event-filters-summary-row {
    display: flex;
    align-items: flex-start;
    gap: 12px;
    flex-wrap: wrap;
    flex: 1 1 220px;
    min-width: 0;
    padding-top: 2px;
}

.event-filters-summary-label {
    min-height: 28px;
    display: inline-flex;
    align-items: center;
    font-size: 12px;
    font-weight: 700;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: color-mix(in srgb, var(--md-sys-color-on-surface) 58%, transparent);
    white-space: nowrap;
}

.event-filters-summary-chips {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    flex: 1 1 auto;
    min-width: 0;
}

.event-filter-summary-chip {
    display: inline-flex;
    align-items: center;
    min-height: 28px;
    padding: 0 12px;
    border-radius: 999px;
    background: color-mix(in srgb, var(--md-sys-color-primary) 10%, white 90%);
    border: 1px solid color-mix(in srgb, var(--md-sys-color-primary) 18%, transparent);
    color: color-mix(in srgb, var(--md-sys-color-on-surface) 88%, transparent);
    font-size: 12px;
    font-weight: 650;
    max-width: 100%;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.event-filter-toggle {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    min-height: 42px;
    width: 100%;
    padding: 0 14px;
    border-radius: 14px;
    border: 1px solid color-mix(in srgb, var(--md-sys-color-outline-variant) 90%, transparent);
    background: rgba(255, 255, 255, 0.88);
    box-sizing: border-box;
    cursor: pointer;
    font-size: 13px;
    font-weight: 650;
    user-select: none;
    transition:
        background-color 0.16s ease-out,
        border-color 0.16s ease-out,
        box-shadow 0.16s ease-out;
}

.event-filter-toggle input {
    width: 16px;
    height: 16px;
    accent-color: var(--md-sys-color-primary);
}

.event-filter-toggle.active {
    border-color: color-mix(in srgb, var(--md-sys-color-primary) 36%, transparent);
    background: color-mix(in srgb, var(--md-sys-color-primary) 12%, white 88%);
    box-shadow: 0 0 0 4px rgba(103, 80, 164, 0.08);
}

body.dark-theme .event-filter-time-chip,
html.theme-dark .event-filter-time-chip,
body.dark-theme .event-filter-toggle,
html.theme-dark .event-filter-toggle {
    background: rgba(255, 255, 255, 0.06);
    border-color: rgba(208, 188, 255, 0.14);
    color: var(--md-sys-color-on-surface);
}

body.dark-theme .event-filter-reset-btn,
html.theme-dark .event-filter-reset-btn {
    background: rgba(208, 188, 255, 0.12);
    border-color: rgba(208, 188, 255, 0.28);
    color: var(--md-sys-color-primary);
}

body.dark-theme .event-filter-reset-btn:disabled,
html.theme-dark .event-filter-reset-btn:disabled {
    background: rgba(255, 255, 255, 0.06);
    border-color: rgba(208, 188, 255, 0.14);
    color: var(--md-sys-color-on-surface);
}

body.dark-theme .event-filter-time-chip.active,
html.theme-dark .event-filter-time-chip.active,
body.dark-theme .event-filter-toggle.active,
html.theme-dark .event-filter-toggle.active {
    background: rgba(208, 188, 255, 0.14);
    border-color: rgba(208, 188, 255, 0.28);
    color: var(--md-sys-color-primary);
}

body.dark-theme .event-filter-summary-chip,
html.theme-dark .event-filter-summary-chip {
    background: rgba(208, 188, 255, 0.1);
    border-color: rgba(208, 188, 255, 0.18);
    color: var(--md-sys-color-on-surface);
}

.event-filter-group-nowrap {
    flex-wrap: wrap;
}

.event-filter-field-group {
    display: flex;
    flex-direction: column;
    align-items: stretch;
    justify-content: flex-start;
    gap: 10px;
    white-space: nowrap;
    min-width: 0;
    flex: 0 1 auto;
}

/* 单个高级筛选字段的小卡片包裹区 —— 命中壳 / 视觉面分离 */
.event-filter-field-card {
    --hover-lift: 1px;
    --card-bg: color-mix(in srgb, var(--md-sys-color-surface) 84%, white 16%);
    --card-border-color: color-mix(in srgb, var(--md-sys-color-outline-variant) 88%, transparent);
    --card-shadow: inset 0 1px 0 rgba(255,255,255,0.36);
    --card-hover-border-color: color-mix(in srgb, var(--md-sys-color-primary) 24%, transparent);
    --card-hover-shadow:
        0 10px 22px rgba(103, 80, 164, 0.08),
        inset 0 1px 0 rgba(255,255,255,0.46);
    position: relative;
    isolation: isolate;
    min-height: 74px;
    padding: 12px 14px;
    border-radius: 18px;
    border: 1px solid transparent;
    background: transparent;
    box-shadow: none;
}

.event-filter-field-card::before {
    content: '';
    position: absolute;
    inset: 0;
    z-index: -1;
    border-radius: inherit;
    background: var(--card-bg);
    border: 1px solid var(--card-border-color);
    box-shadow: var(--card-shadow);
    pointer-events: none;
    transition:
        transform 0.18s ease-out,
        border-color 0.18s ease-out,
        box-shadow 0.18s ease-out;
}

.event-filter-field-card > * {
    transition: transform 0.18s ease-out;
}

/* 时间卡内部子项不要整体上浮，避免 hover 时视觉间距被放大 */
.event-filter-field-card-time > * {
    transition: none;
}

.event-filter-field-card:hover::before,
.event-filter-field-card:focus-within::before,
.event-filter-field-card:hover > *,
.event-filter-field-card:focus-within > * {
    transform: translateY(calc(-1 * var(--hover-lift)));
}

.event-filter-field-card-time:hover > *,
.event-filter-field-card-time:focus-within > * {
    transform: none;
}

.event-filter-field-card:hover::before,
.event-filter-field-card:focus-within::before {
    border-color: var(--card-hover-border-color);
    box-shadow: var(--card-hover-shadow);
}

/* 定制化高级筛选小卡片最小宽度 */
.event-filter-field-card-magnitude,
.event-filter-field-card-source,
.event-filter-field-card-keyword {
    min-width: 0;
}

.event-filter-field-card-magnitude {
    min-width: min(100%, 280px);
}

.event-filter-field-card-keyword {
    min-width: 0;
}

.event-filter-field-card-magnitude .event-filter-inline-controls,
.event-filter-field-card-source .event-filter-inline-controls,
.event-filter-field-card-keyword .event-filter-inline-controls {
    width: 100%;
    align-items: stretch;
}

/* 高级筛选字段标签名称 (如 "发布机构", "震级过滤") */
.event-filter-label {
    opacity: 0.68;
    align-self: flex-start;
    margin-right: 0 !important;
    font-size: 0.78rem !important;
    font-weight: 700 !important;
    letter-spacing: 0.04em;
}

/* 卡片内部控制组件的排版对齐行 */
.event-filter-inline-controls {
    display: flex;
    align-items: stretch;
    gap: 10px;
    flex-wrap: wrap;
    min-width: 0;
}

.event-filter-inline-controls-source {
    flex-wrap: nowrap;
    width: 100%;
}

.event-filter-inline-controls-keyword {
    width: 100%;
}

/* 过滤选择胶囊按钮 (Pills) —— 命中壳 / 视觉面分离 */
.event-filter-pill {
    --hover-lift: 1px;
    --card-bg: rgba(255,255,255,0.54);
    --card-border-color: color-mix(in srgb, var(--md-sys-color-outline-variant) 92%, transparent);
    --card-shadow: 0 2px 10px rgba(103, 80, 164, 0.04);
    --card-hover-bg: rgba(255,255,255,0.84);
    --card-hover-border-color: color-mix(in srgb, var(--md-sys-color-primary) 24%, transparent);
    --card-hover-shadow: 0 6px 14px rgba(103, 80, 164, 0.08);
    position: relative;
    isolation: isolate;
    min-height: 42px;
    padding: 0 18px;
    border-radius: 999px;
    border: 1px solid transparent;
    background: transparent;
    box-shadow: none;
    transition: color 0.16s ease-out;
}

.event-filter-pill::before {
    content: '';
    position: absolute;
    inset: 0;
    z-index: -1;
    border-radius: inherit;
    background: var(--card-bg);
    border: 1px solid var(--card-border-color);
    box-shadow: var(--card-shadow);
    pointer-events: none;
    transition:
        transform 0.16s ease-out,
        background 0.16s ease-out,
        border-color 0.16s ease-out,
        box-shadow 0.18s ease-out;
}

.event-filter-pill > * {
    transition: transform 0.16s ease-out;
}

.event-filter-pill:hover::before,
.event-filter-pill:hover > * {
    transform: translateY(calc(-1 * var(--hover-lift)));
}

.event-filter-pill:hover::before {
    background: var(--card-hover-bg);
    border-color: var(--card-hover-border-color);
    box-shadow: var(--card-hover-shadow);
}

/* 激活状态的选择胶囊 */
.event-filter-pill.active {
    --card-border-color: color-mix(in srgb, var(--md-sys-color-primary) 30%, transparent);
    --card-shadow: 0 8px 18px rgba(103, 80, 164, 0.12);
}

.event-filter-pill:active::before,
.event-filter-pill:active > * {
    transform: translateY(0) scale(0.98);
}

.event-filter-checkmark {
    font-size: 12px;
}

/* 深色模式下的过滤器组件及工具箱渲染（变量写入视觉面） */
body.dark-theme .event-filters-toolbar,
html.theme-dark .event-filters-toolbar {
    --card-bg:
        linear-gradient(180deg, rgba(44, 40, 52, 0.92) 0%, rgba(30, 27, 37, 0.88) 100%),
        radial-gradient(circle at top left, rgba(208, 188, 255, 0.08), transparent 42%);
    --card-border-color: rgba(208, 188, 255, 0.12);
    --card-shadow: 0 16px 34px rgba(0, 0, 0, 0.28);
}

body.dark-theme .event-filter-field-card,
html.theme-dark .event-filter-field-card {
    --card-bg: rgba(255, 255, 255, 0.04);
    --card-border-color: rgba(208, 188, 255, 0.10);
    --card-shadow: inset 0 1px 0 rgba(255,255,255,0.04);
}

body.dark-theme .event-filter-pill,
html.theme-dark .event-filter-pill {
    --card-bg: rgba(255, 255, 255, 0.06);
    --card-border-color: rgba(208, 188, 255, 0.14);
    --card-shadow: inset 0 1px 0 rgba(255,255,255,0.03);
    --card-hover-bg: rgba(208, 188, 255, 0.10);
    --card-hover-border-color: rgba(208, 188, 255, 0.22);
    color: var(--md-sys-color-on-surface);
}

body.dark-theme .event-filter-select,
html.theme-dark .event-filter-select,
body.dark-theme .event-filter-source-summary,
html.theme-dark .event-filter-source-summary {
    background: rgba(255, 255, 255, 0.06);
    border-color: rgba(208, 188, 255, 0.14);
    color: var(--md-sys-color-on-surface);
    box-shadow: inset 0 1px 0 rgba(255,255,255,0.03);
}

body.dark-theme .event-filter-source-menu,
html.theme-dark .event-filter-source-menu {
    background: var(--md-sys-color-surface);
    border-color: rgba(208, 188, 255, 0.12);
    box-shadow: 0 22px 40px rgba(0,0,0,0.34);
}

/* 暗色模式：原生 datetime-local 日期选择控件跟随暗色渲染（日历弹层不发白） */
body.dark-theme .event-filter-datetime-input,
html.theme-dark .event-filter-datetime-input,
body.dark-theme .event-filter-source-summary,
html.theme-dark .event-filter-source-summary {
    color-scheme: dark;
}

.horizontal-timeline-display-label {
    opacity: 0.7;
}

/* 下拉选择框控件 (Select Box) */
.event-filter-select {
    border: 1px solid color-mix(in srgb, var(--md-sys-color-outline-variant) 90%, transparent);
    border-radius: 14px;
    /* 右侧预留下拉箭头空间，避免选中文字被箭头/裁剪挡住 */
    padding: 0 34px 0 14px;
    background: rgba(255,255,255,0.88);
    color: inherit;
    font-size: 13px;
    font-weight: 600;
    line-height: 1.25;
    min-height: 42px;
    box-sizing: border-box;
    outline: none;
    box-shadow: inset 0 1px 0 rgba(255,255,255,0.45);
    /* 防止原生 select 在窄容器里把文字裁到看不见 */
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    transition:
        background-color 0.16s ease-out,
        border-color 0.16s ease-out,
        box-shadow 0.18s ease-out,
        transform 0.16s ease-out;
}

.event-filter-select:hover,
.event-filter-source-summary:hover {
    border-color: color-mix(in srgb, var(--md-sys-color-primary) 24%, transparent);
    background: rgba(255,255,255,0.96);
}

.event-filter-select:focus,
.event-filter-source-summary:focus,
.event-filter-source-details[open] .event-filter-source-summary,
.event-filter-keyword-input:focus {
    border-color: color-mix(in srgb, var(--md-sys-color-primary) 40%, transparent);
    box-shadow: 0 0 0 4px rgba(103, 80, 164, 0.10);
}

.event-filter-select-md {
    min-width: 0;
    flex: 1 1 auto;
    width: 100%;
    max-width: 100%;
}

.event-filter-select-sm {
    min-width: 4.5rem;
    width: auto;
    flex: 0 0 auto;
    max-width: 100%;
    padding-left: 12px;
    padding-right: 28px;
}

/* 烈度 / 震度同卡分轨：标签在上，避免横向挤占导致截断 */
.event-filter-field-card-intensity {
    min-width: min(100%, 300px);
}

.event-filter-intensity-stack {
    display: flex;
    flex-direction: column;
    gap: 10px;
    width: 100%;
    min-width: 0;
}

.event-filter-intensity-row {
    display: flex;
    flex-direction: column;
    align-items: stretch;
    gap: 6px;
    min-width: 0;
    margin: 0;
}

.event-filter-intensity-rail {
    display: block;
    font-size: 12px;
    font-weight: 700;
    letter-spacing: 0.01em;
    line-height: 1.3;
    color: color-mix(in srgb, var(--md-sys-color-on-surface) 68%, transparent);
    white-space: normal;
    overflow: visible;
    text-overflow: clip;
    word-break: keep-all;
}

.event-filter-intensity-row .event-filter-select {
    min-width: 0;
    width: 100%;
}

/* 数据源卡片：防止固定宽度把工具栏撑破，同时保证文字可读 */
.event-filter-field-card-source {
    min-width: min(100%, 280px);
    overflow: visible;
}

.event-filter-inline-controls-source {
    width: 100%;
    min-width: 0;
    flex-wrap: wrap;
    overflow: visible;
    gap: 8px;
}

/* 过滤发布源的多选框 */
.event-filter-source-select,
.event-filter-source-details {
    flex: 1 1 12rem;
    width: auto;
    min-width: min(100%, 12rem);
    max-width: 100%;
    box-sizing: border-box;
}

.event-filter-source-select {
    overflow: hidden;
    text-overflow: ellipsis;
}

.event-filter-keyword-input {
    width: 100%;
    min-width: 0;
    flex: 1 1 100%;
    padding-right: 14px;
}

.event-filter-source-details {
    position: relative;
    flex: 1 1 12rem;
    min-width: min(100%, 12rem);
    overflow: visible;
    z-index: 100;
}

/* 多选框头部触发标签面板 */
.event-filter-source-summary {
    list-style: none;
    cursor: pointer;
    border: 1px solid color-mix(in srgb, var(--md-sys-color-outline-variant) 90%, transparent);
    border-radius: 14px;
    padding: 11px 34px 11px 14px;
    background: rgba(255,255,255,0.88);
    font-size: 13px;
    font-weight: 600;
    user-select: none;
    width: 100%;
    box-sizing: border-box;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    min-height: 42px;
    position: relative;
    transition:
        background-color 0.16s ease-out,
        border-color 0.16s ease-out,
        box-shadow 0.18s ease-out;
}

.event-filter-source-summary::after {
    content: '▾';
    position: absolute;
    right: 14px;
    top: 50%;
    transform: translateY(-50%);
    opacity: 0.58;
    font-size: 11px;
    transition: transform 0.18s ease-out, opacity 0.18s ease-out;
}

.event-filter-source-details[open] .event-filter-source-summary::after {
    transform: translateY(-50%) rotate(180deg);
    opacity: 0.82;
}

.event-filter-source-summary::-webkit-details-marker {
    display: none;
}

/* 过滤发布源的多选卡下拉列表菜单悬浮层 */
.event-filter-source-menu {
    position: absolute;
    top: calc(100% + 8px);
    left: 0;
    width: 100%;
    min-width: 240px;
    max-height: 280px;
    overflow-y: auto;
    border: 1px solid color-mix(in srgb, var(--md-sys-color-outline-variant) 88%, transparent);
    border-radius: 16px;
    padding: 10px 12px;
    box-sizing: border-box;
    background: var(--md-sys-color-surface);
    box-shadow: 0 18px 36px rgba(0,0,0,0.12);
    z-index: 30;
    animation: card-fade-up 0.18s cubic-bezier(0.2, 0.8, 0.2, 1) backwards;
}

.event-filter-checkbox-label {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-bottom: 8px;
    font-size: 12px;
    opacity: 0.82;
}

.event-filter-checkbox-label-lg {
    font-size: 13px;
}

/* ==========================================================================
   6. 详细事件文本与主要信息 (Event Details & Metadata Info)
   ========================================================================== */
.event-title-text {
    font-weight: 700 !important;
    color: var(--md-sys-color-on-surface) !important;
}

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

.event-title-row {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-bottom: 4px;
}

/* 警报或速报更新标识 (例如 "第10报", "最终报") */
.event-report-label {
    font-size: 12px;
    font-weight: 600;
    padding: 2px 8px;
    border-radius: 4px;
    background: var(--md-sys-color-primary-container);
    color: var(--md-sys-color-on-primary-container);
    opacity: 0.9;
}

.event-card-history .event-report-label {
    font-size: 11px;
}

/* 历史速报的徽标底色变淡 */
.event-report-label.is-history-report {
    background: rgba(0,0,0,0.06);
    color: inherit;
}

.event-meta {
    opacity: 0.6;
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 8px;
}

.event-meta-item {
    display: inline-flex;
    align-items: center;
    gap: 6px;
}

.event-meta-separator {
    opacity: 0.5;
}

/* 台风 / 海啸 / 地震卡片第二行参数摘要 */
.event-meta-typhoon,
.event-meta-tsunami,
.event-meta-earthquake {
    opacity: 0.72;
    margin-top: 2px;
    font-size: 0.8125rem;
    line-height: 1.35;
}

.event-meta-earthquake {
    opacity: 0.88;
    gap: 8px;
}

.event-quake-chip {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    padding: 2px 10px;
    border-radius: 999px;
    font-size: 12px;
    font-weight: 600;
    background: color-mix(in srgb, var(--md-sys-color-primary) 10%, var(--md-sys-color-surface));
    color: var(--md-sys-color-on-surface-variant);
    border: 1px solid color-mix(in srgb, var(--md-sys-color-primary) 16%, transparent);
}

body.dark-theme .event-quake-chip {
    background: rgba(103, 80, 164, 0.18);
    border-color: rgba(103, 80, 164, 0.28);
}

/* 气象预警 / 地震情报补充正文展开面板 */
.event-weather-detail-panel {
    margin-top: 10px;
    padding: 10px 12px;
    border-radius: 12px;
    background: color-mix(in srgb, var(--md-sys-color-tertiary) 8%, var(--md-sys-color-surface));
    border: 1px solid color-mix(in srgb, var(--md-sys-color-tertiary) 18%, transparent);
}

.event-weather-detail-head {
    display: flex;
    align-items: center;
    gap: 6px;
    margin-bottom: 6px;
    font-size: 12px;
    font-weight: 700;
    color: var(--md-sys-color-on-surface-variant);
}

.event-weather-detail-icon {
    font-size: 13px;
    line-height: 1;
}

.event-weather-detail-title {
    letter-spacing: 0.01em;
}

.event-weather-detail-body {
    white-space: pre-wrap;
    overflow-wrap: anywhere;
    word-break: break-word;
    font-size: 13px;
    line-height: 1.55;
    color: var(--md-sys-color-on-surface);
    opacity: 0.92;
}

.event-weather-detail-body--timeline {
    margin-top: 4px;
    font-size: 12px;
    opacity: 0.88;
}

body.dark-theme .event-weather-detail-panel {
    background: rgba(126, 87, 194, 0.12);
    border-color: rgba(126, 87, 194, 0.22);
}

/* ---- 海啸结构化面板（对齐推送展示器信息密度） ---- */
.event-tsunami-panel {
    margin-top: 8px;
    display: flex;
    flex-direction: column;
    gap: 8px;
    min-width: 0;
}

.event-tsunami-chips {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
}

.event-tsunami-chip {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    max-width: 100%;
    padding: 3px 10px;
    border-radius: 999px;
    font-size: 12px;
    font-weight: 600;
    line-height: 1.35;
    border: 1px solid transparent;
    background: color-mix(in srgb, var(--md-sys-color-surface-variant) 82%, transparent);
    color: var(--md-sys-color-on-surface-variant);
}

.event-tsunami-chip-icon {
    flex-shrink: 0;
    font-size: 12px;
    line-height: 1;
}

.event-tsunami-chip-label {
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.event-tsunami-chip.is-info,
.event-tsunami-chip.is-default {
    background: color-mix(in srgb, #0288D1 12%, var(--md-sys-color-surface));
    color: #0277BD;
    border-color: color-mix(in srgb, #0288D1 22%, transparent);
}

.event-tsunami-chip.is-blue {
    background: color-mix(in srgb, #1E88E5 14%, var(--md-sys-color-surface));
    color: #1565C0;
    border-color: color-mix(in srgb, #1E88E5 24%, transparent);
}

.event-tsunami-chip.is-watch {
    background: color-mix(in srgb, #F9A825 16%, var(--md-sys-color-surface));
    color: #F57F17;
    border-color: color-mix(in srgb, #F9A825 28%, transparent);
}

.event-tsunami-chip.is-warning {
    background: color-mix(in srgb, #FB8C00 16%, var(--md-sys-color-surface));
    color: #EF6C00;
    border-color: color-mix(in srgb, #FB8C00 28%, transparent);
}

.event-tsunami-chip.is-major,
.event-tsunami-chip.is-danger {
    background: color-mix(in srgb, #E53935 14%, var(--md-sys-color-surface));
    color: #C62828;
    border-color: color-mix(in srgb, #E53935 26%, transparent);
}

.event-tsunami-chip.is-wave,
.event-tsunami-chip.is-area,
.event-tsunami-chip.is-station {
    background: color-mix(in srgb, #00ACC1 12%, var(--md-sys-color-surface));
    color: #00838F;
    border-color: color-mix(in srgb, #00ACC1 24%, transparent);
}

.event-tsunami-chip.is-place,
.event-tsunami-chip.is-mag {
    background: color-mix(in srgb, var(--md-sys-color-primary) 12%, var(--md-sys-color-surface));
    color: var(--md-sys-color-primary);
    border-color: color-mix(in srgb, var(--md-sys-color-primary) 22%, transparent);
}

.event-tsunami-chip.is-cancel {
    background: color-mix(in srgb, #43A047 14%, var(--md-sys-color-surface));
    color: #2E7D32;
    border-color: color-mix(in srgb, #43A047 24%, transparent);
}

.event-tsunami-chip.is-training {
    background: color-mix(in srgb, #8E24AA 12%, var(--md-sys-color-surface));
    color: #6A1B9A;
    border-color: color-mix(in srgb, #8E24AA 24%, transparent);
}

.event-tsunami-sections {
    display: flex;
    flex-direction: column;
    gap: 6px;
}

.event-tsunami-section {
    border-radius: 10px;
    padding: 8px 10px;
    background: color-mix(in srgb, #0288D1 7%, var(--md-sys-color-surface));
    border: 1px solid color-mix(in srgb, #0288D1 14%, transparent);
}

.event-tsunami-section.is-forecast {
    background: color-mix(in srgb, #0288D1 8%, var(--md-sys-color-surface));
}

.event-tsunami-section.is-station {
    background: color-mix(in srgb, #00838F 8%, var(--md-sys-color-surface));
    border-color: color-mix(in srgb, #00838F 16%, transparent);
}

.event-tsunami-section.is-grade {
    background: color-mix(in srgb, #5E35B1 8%, var(--md-sys-color-surface));
    border-color: color-mix(in srgb, #5E35B1 16%, transparent);
}

.event-tsunami-section-head {
    display: flex;
    align-items: center;
    gap: 6px;
    margin-bottom: 4px;
    font-size: 12px;
    font-weight: 700;
    color: var(--md-sys-color-on-surface);
}

.event-tsunami-section-icon {
    font-size: 13px;
    line-height: 1;
}

.event-tsunami-section-title {
    letter-spacing: 0.01em;
}

.event-tsunami-section-list {
    margin: 0;
    padding-left: 1.1em;
    display: flex;
    flex-direction: column;
    gap: 2px;
    font-size: 12px;
    line-height: 1.45;
    color: color-mix(in srgb, var(--md-sys-color-on-surface) 82%, transparent);
}

.event-tsunami-section-list li {
    word-break: break-word;
}

.event-tsunami-section-body {
    font-size: 12px;
    line-height: 1.45;
    color: color-mix(in srgb, var(--md-sys-color-on-surface) 82%, transparent);
    word-break: break-word;
}

.event-tsunami-panel.is-history .event-tsunami-chip {
    font-size: 11px;
    padding: 2px 8px;
}

.event-tsunami-panel.is-history .event-tsunami-section {
    padding: 6px 8px;
}

.event-tsunami-panel.is-history .event-tsunami-section-list,
.event-tsunami-panel.is-history .event-tsunami-section-body,
.event-tsunami-panel.is-history .event-tsunami-section-head {
    font-size: 11px;
}

body.dark-theme .event-tsunami-chip.is-info,
body.dark-theme .event-tsunami-chip.is-default {
    background: rgba(3, 169, 244, 0.16);
    color: #81D4FA;
    border-color: rgba(3, 169, 244, 0.28);
}

body.dark-theme .event-tsunami-chip.is-watch {
    background: rgba(255, 193, 7, 0.16);
    color: #FFE082;
    border-color: rgba(255, 193, 7, 0.28);
}

body.dark-theme .event-tsunami-chip.is-warning {
    background: rgba(255, 152, 0, 0.16);
    color: #FFCC80;
    border-color: rgba(255, 152, 0, 0.28);
}

body.dark-theme .event-tsunami-chip.is-major,
body.dark-theme .event-tsunami-chip.is-danger {
    background: rgba(244, 67, 54, 0.16);
    color: #EF9A9A;
    border-color: rgba(244, 67, 54, 0.28);
}

body.dark-theme .event-tsunami-chip.is-wave,
body.dark-theme .event-tsunami-chip.is-area,
body.dark-theme .event-tsunami-chip.is-station {
    background: rgba(0, 188, 212, 0.14);
    color: #80DEEA;
    border-color: rgba(0, 188, 212, 0.26);
}

body.dark-theme .event-tsunami-chip.is-cancel {
    background: rgba(76, 175, 80, 0.16);
    color: #A5D6A7;
    border-color: rgba(76, 175, 80, 0.28);
}

body.dark-theme .event-tsunami-chip.is-training {
    background: rgba(171, 71, 188, 0.16);
    color: #CE93D8;
    border-color: rgba(171, 71, 188, 0.28);
}

body.dark-theme .event-tsunami-section {
    background: rgba(3, 169, 244, 0.08);
    border-color: rgba(3, 169, 244, 0.18);
}

body.dark-theme .event-tsunami-section.is-station {
    background: rgba(0, 188, 212, 0.08);
    border-color: rgba(0, 188, 212, 0.18);
}

body.dark-theme .event-tsunami-section.is-grade {
    background: rgba(126, 87, 194, 0.12);
    border-color: rgba(126, 87, 194, 0.22);
}

/* 标示地震速报已升级或有新的警报更新徽标 */
.update-badge {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    padding: 5px 11px;
    border-radius: 999px;
    background: var(--md-sys-color-primary-container);
    color: var(--md-sys-color-on-primary-container);
    font-size: 12px;
    font-weight: 600;
    white-space: nowrap;
    flex-shrink: 0;
    cursor: pointer;
    border: none;
    font-family: inherit;
    line-height: 1;
    transition: opacity 0.15s, background 0.15s;
    user-select: none;
}

.update-badge:hover {
    opacity: 0.82;
}

.update-icon {
    font-size: 9px;
    opacity: 0.7;
    line-height: 1;
}

/* ==========================================================================
   7. 地震速报同源事件组折叠面板 (Event Group Timeline)
   ========================================================================== */
/* 同源事件组折叠面板 —— 命中壳 / 视觉面分离 */
.event-group-expanded {
    --hover-lift: 1px;
    --card-bg: var(--md-sys-color-surface);
    --card-border-color: var(--glass-border);
    --card-shadow: var(--glass-shadow);
    --card-hover-bg: color-mix(in srgb, var(--md-sys-color-surface) 90%, var(--md-sys-color-primary) 10%);
    --card-hover-border-color: color-mix(in srgb, var(--md-sys-color-primary) 46%, transparent);
    --card-hover-shadow: 0 8px 22px rgba(103, 80, 164, 0.10);
    position: relative;
    isolation: isolate;
    background: transparent;
    border: 1px solid transparent;
    border-radius: var(--radius-lg);
    box-shadow: none;
}

.event-group-expanded::before {
    content: '';
    position: absolute;
    inset: 0;
    z-index: -1;
    border-radius: inherit;
    background: var(--card-bg);
    border: 1px solid var(--card-border-color);
    box-shadow: var(--card-shadow);
    pointer-events: none;
    transition:
        transform 0.18s ease-out,
        background 0.18s ease-out,
        border-color 0.18s ease-out,
        box-shadow 0.18s ease-out;
}

.event-group-expanded > * {
    transition: transform 0.18s ease-out;
}

.event-group-expanded:hover::before,
.event-group-expanded:hover > * {
    transform: translateY(calc(-1 * var(--hover-lift)));
}

.event-group-expanded:hover::before {
    background: var(--card-hover-bg);
    border-color: var(--card-hover-border-color);
    box-shadow: var(--card-hover-shadow);
}

.event-group-expanded-panel {
    padding: 24px;
    position: relative;
}

.event-group-collapse-text {
    opacity: 0.55;
    font-size: 12px !important;
}

/* 展开收起同源事件时间轴的触发大按钮 */
.event-group-collapse-button {
    display: flex;
    justify-content: space-between;
    align-items: center;
    width: 100%;
    margin-bottom: 20px;
    cursor: pointer;
    background: none;
    border: none;
    padding: 0 0 14px 0;
    text-align: left;
    border-bottom: 1px solid var(--md-sys-color-outline-variant);
}

/* 垂直树状时间轴包裹层 */
.event-group-timeline {
    position: relative;
    padding-left: 40px;
}

/* 时间轴垂直导轨线 */
.event-group-timeline-line {
    position: absolute;
    left: 19px;
    top: 12px;
    bottom: 12px;
    width: 2px;
    background: var(--md-sys-color-outline-variant);
}

/* 时间轴具体单节点行 */
.event-group-timeline-item {
    position: relative;
    margin-bottom: 20px;
    padding-bottom: 20px;
    border-bottom: 1px solid var(--md-sys-color-outline-variant);
}

.event-group-timeline-item.is-last {
    margin-bottom: 0;
    padding-bottom: 0;
    border-bottom: none;
}

/* 时间轴节点标记圆点 */
.event-group-timeline-dot {
    position: absolute;
    left: -29px;
    top: 8px;
    width: 20px;
    height: 20px;
    border-radius: 50%;
    background: var(--md-sys-color-surface-variant);
    border: 3px solid var(--md-sys-color-surface);
}

/* 最新一报的高亮圆点 */
.event-group-timeline-dot.is-latest {
    background: var(--md-sys-color-primary);
    border-color: var(--md-sys-color-primary-container);
    box-shadow: 0 2px 8px rgba(103, 80, 164, 0.3);
}

.event-group-timeline-row {
    display: flex;
    gap: 12px;
    align-items: flex-start;
}

.event-group-timeline-main {
    flex: 1;
    min-width: 0;
}

.event-group-timeline-meta-row,
.event-group-quake-details {
    display: flex;
    align-items: center;
    gap: 8px;
    flex-wrap: wrap;
}

.event-group-timeline-meta-row {
    margin-bottom: 6px;
}

.event-group-time-text {
    opacity: 0.6;
    font-size: 13px !important;
}

.event-group-quake-details {
    gap: 12px;
}

.event-group-quake-text {
    opacity: 0.8;
    font-size: 13px !important;
}

.event-group-quake-text--strong {
    opacity: 0.85;
    font-weight: 600 !important;
}

/* 台风路径点参数区（强度、风速、气压、位置） */
.event-group-typhoon-details {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 10px;
    margin-top: 4px;
}

.event-group-typhoon-text {
    opacity: 0.8;
    font-size: 13px !important;
}

.event-group-typhoon-text--strong {
    opacity: 0.9;
    font-weight: 600 !important;
}

/* 展开壳：顶部摘要 + 下方时间线，视觉上连成一张连续卡片 */
.event-group-expanded-shell {
    --hover-lift: 1px;
    --card-bg: var(--md-sys-color-surface);
    --card-border-color: var(--glass-border);
    --card-shadow: var(--glass-shadow);
    --card-hover-bg: color-mix(in srgb, var(--md-sys-color-surface) 90%, var(--md-sys-color-primary) 10%);
    --card-hover-border-color: color-mix(in srgb, var(--md-sys-color-primary) 46%, transparent);
    --card-hover-shadow: 0 8px 22px rgba(103, 80, 164, 0.10);
    position: relative;
    isolation: isolate;
    display: flex;
    flex-direction: column;
    gap: 0;
    border-radius: var(--radius-lg);
    background: transparent;
    border: 1px solid transparent;
    box-shadow: none;
    overflow: hidden;
}

.event-group-expanded-shell::before {
    content: '';
    position: absolute;
    inset: 0;
    z-index: -1;
    border-radius: inherit;
    background: var(--card-bg);
    border: 1px solid var(--card-border-color);
    box-shadow: var(--card-shadow);
    pointer-events: none;
    transition:
        transform 0.18s ease-out,
        background 0.18s ease-out,
        border-color 0.18s ease-out,
        box-shadow 0.18s ease-out;
}

.event-group-expanded-shell > * {
    transition: transform 0.18s ease-out;
}

.event-group-expanded-shell:hover::before,
.event-group-expanded-shell:hover > * {
    transform: translateY(calc(-1 * var(--hover-lift)));
}

.event-group-expanded-shell:hover::before {
    background: var(--card-hover-bg);
    border-color: var(--card-hover-border-color);
    box-shadow: var(--card-hover-shadow);
}

.event-group-sticky-card {
    cursor: pointer;
    position: relative;
    z-index: 1;
}

/* 顶部摘要卡：去掉独立卡片外壳，融入展开壳 */
.event-group-sticky-card .event-card {
    margin-bottom: 0;
    border-radius: 0;
    background: transparent;
    box-shadow: none;
    border: none;
}

.event-group-sticky-card .event-card::before {
    display: none;
}

/* 时间线区：与顶部摘要用细分割线衔接，不再单独成卡 */
.event-group-timeline-section {
    position: relative;
    z-index: 1;
    border-top: 1px solid var(--md-sys-color-outline-variant);
    padding: 0 8px 8px;
}

.event-group-timeline-panel {
    padding: 8px 16px 16px;
}

.event-group-timeline-header {
    display: flex;
    align-items: center;
    margin: 0 0 8px 0;
    padding: 0;
}

.event-group-timeline-header .event-group-collapse-text {
    margin: 0 !important;
    line-height: 1.2 !important;
}

.event-group-timeline-panel .event-group-collapse-button {
    margin-bottom: 14px;
    padding-bottom: 10px;
}

/* 业务报次提示芯片（与更新序号区分） */
.event-group-business-chip {
    font-size: 12px;
    font-weight: 600;
    padding: 2px 8px;
    border-radius: 6px;
    background: color-mix(in srgb, var(--md-sys-color-tertiary) 12%, var(--md-sys-color-surface));
    color: var(--md-sys-color-on-surface-variant);
    border: 1px solid color-mix(in srgb, var(--md-sys-color-tertiary) 22%, transparent);
    opacity: 0.92;
}

body.dark-theme .event-group-business-chip {
    background: rgba(126, 87, 194, 0.16);
    border-color: rgba(126, 87, 194, 0.28);
}

/* 时间线历史行：复用 EventCard 主卡片级详情 */
.event-group-timeline-row--card {
    align-items: stretch;
}

.event-group-history-card-wrap {
    margin-top: 4px;
    min-width: 0;
}

.event-group-history-card-wrap .event-card,
.event-group-history-card-wrap .event-card-history {
    padding: 10px 12px;
    margin-bottom: 0;
    gap: 12px;
    border-radius: 12px;
    box-shadow: none;
    background: color-mix(in srgb, var(--md-sys-color-surface-variant) 28%, transparent);
    border: 1px solid color-mix(in srgb, var(--md-sys-color-outline-variant) 55%, transparent);
}

.event-group-history-card-wrap .event-card::before {
    display: none;
}

.event-group-history-card-wrap .event-title-text {
    font-size: 0.95rem !important;
    font-weight: 700 !important;
}

.event-group-history-card-wrap .event-tsunami-panel {
    margin-top: 6px;
}

.event-group-history-card-wrap .event-tsunami-sections {
    margin-top: 2px;
}

.event-group-history-card-wrap .mag-badge,
.event-group-history-card-wrap .mag-badge-history {
    width: 44px;
    height: 44px;
    font-size: 16px;
}

body.dark-theme .event-group-history-card-wrap .event-card,
body.dark-theme .event-group-history-card-wrap .event-card-history {
    background: rgba(255, 255, 255, 0.04);
    border-color: rgba(255, 255, 255, 0.08);
}

/* 海啸时间线详情（兼容旧结构） */
.event-group-tsunami-details {
    display: flex;
    flex-direction: column;
    gap: 6px;
    margin-top: 2px;
    min-width: 0;
}

.event-group-tsunami-title {
    font-size: 13px !important;
    font-weight: 600 !important;
    opacity: 0.9;
    line-height: 1.4 !important;
}

.event-group-tsunami-fallback {
    font-size: 12px !important;
    opacity: 0.75;
    line-height: 1.4 !important;
}

.event-group-tsunami-details .event-tsunami-panel {
    margin-top: 2px;
}

/* 气象时间线 / 展开详情 */
.event-group-weather-details {
    display: flex;
    flex-direction: column;
    gap: 4px;
    margin-top: 2px;
    min-width: 0;
}

.event-group-weather-title {
    font-size: 13px !important;
    font-weight: 600 !important;
    opacity: 0.9;
}

/* 速报更新等级芯片(如 "第1报" 芯片) */
.event-group-report-chip,
.event-group-latest-chip {
    font-size: 13px;
    font-weight: 700;
    padding: 3px 10px;
    border-radius: 6px;
}

.event-group-report-chip {
    background: var(--md-sys-color-surface-variant);
    color: inherit;
}

.event-group-report-chip.is-latest {
    background: var(--md-sys-color-primary);
    color: var(--md-sys-color-on-primary);
}

.event-group-latest-chip {
    background: var(--md-sys-color-tertiary-container);
    color: var(--md-sys-color-on-tertiary-container);
}

/* 事件组中用于展示最大烈度或震级的特大号左侧徽标 */
.event-group-intensity-badge {
    min-width: 60px;
    height: 60px;
    border-radius: 12px;
    background: #6B7878;
    color: #ffffff;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    position: relative;
    overflow: hidden;
    box-shadow: 0 2px 8px rgba(0,0,0,0.16);
}

.event-group-intensity-label {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 14px;
    line-height: 14px;
    text-align: center;
    font-size: 9px;
    font-weight: 600;
    color: rgba(255,255,255,0.88);
    background: rgba(0,0,0,0.2);
}

.event-group-intensity-value {
    padding-top: 10px;
    font-weight: 800;
    font-size: 30px;
    color: inherit;
    text-shadow: 0 1px 2px rgba(0,0,0,0.25);
    line-height: 1;
}

/* ==========================================================================
   8. 水平拖拽交互式历史时间轴 (Horizontal Drag Timeline)
   ========================================================================== */
.horizontal-timeline-card {
    display: flex;
    flex-direction: column;
    overflow: visible;
    position: relative;
}

.horizontal-timeline-body {
    position: relative;
}

/* 时间轴两侧悬浮切换按钮的定位包装 */
.horizontal-timeline-nav-wrap {
    position: absolute;
    top: 57px;
    z-index: 10;
    transform: translateY(-50%);
    pointer-events: none; /* 让鼠标事件能够穿透到下方的拖拽容器上 */
}

.horizontal-timeline-nav-wrap-left {
    left: 10px;
}

.horizontal-timeline-nav-wrap-right {
    right: 10px;
}

/* 两侧悬浮切换的小翻页按钮样式 */
.horizontal-timeline-nav-btn {
    width: 40px;
    height: 40px;
    border-radius: 999px;
    border: 1px solid color-mix(in srgb, var(--md-sys-color-primary) 16%, transparent);
    background: linear-gradient(180deg, rgba(255, 255, 255, 0.84), rgba(255, 255, 255, 0.64));
    color: var(--md-sys-color-primary);
    box-shadow: 0 8px 20px rgba(103, 80, 164, 0.12);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
    opacity: 0.82;
    transition:
        background-color 0.16s ease-out,
        border-color 0.16s ease-out,
        color 0.16s ease-out,
        opacity 0.16s ease-out,
        transform 0.16s ease-out;
    pointer-events: auto; /* 必须恢复按钮自身的事件响应，支持点击 */
}

.horizontal-timeline-nav-btn:hover {
    opacity: 1;
    transform: translateY(-1px) scale(1.04);
    border-color: color-mix(in srgb, var(--md-sys-color-primary) 32%, transparent);
    background: linear-gradient(180deg, rgba(255, 255, 255, 0.96), rgba(234, 221, 255, 0.74));
}

.horizontal-timeline-nav-btn:active {
    transform: translateY(0) scale(0.98);
    opacity: 0.9;
}

/* 用 CSS 伪元素绘制两个极简小箭头，避免引入冗余 SVG */
.horizontal-timeline-nav-icon {
    position: relative;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 16px;
    height: 16px;
    color: transparent;
    font-size: 0;
    line-height: 0;
}

.horizontal-timeline-nav-icon::before {
    content: '';
    position: absolute;
    top: 50%;
    left: 50%;
    width: 8px;
    height: 8px;
    border-top: 3px solid currentColor;
    border-right: 3px solid currentColor;
    transform-origin: center;
}

.horizontal-timeline-nav-wrap-left .horizontal-timeline-nav-icon::before {
    transform: translate(-38%, -50%) rotate(-135deg); /* 左箭头 */
}

.horizontal-timeline-nav-wrap-right .horizontal-timeline-nav-icon::before {
    transform: translate(-62%, -50%) rotate(45deg);   /* 右箭头 */
}

.horizontal-timeline-nav-btn .horizontal-timeline-nav-icon {
    color: currentColor;
}

/* 深色模式下的水平时间轴两侧悬浮翻页按钮 */
body.dark-theme .horizontal-timeline-nav-btn,
html.theme-dark .horizontal-timeline-nav-btn {
    border-color: rgba(208, 188, 255, 0.24);
    background: linear-gradient(180deg, rgba(54, 50, 64, 0.92), rgba(32, 29, 39, 0.88));
    color: #D0BCFF;
    box-shadow:
        0 10px 24px rgba(0, 0, 0, 0.32),
        inset 0 1px 0 rgba(255, 255, 255, 0.08);
    opacity: 0.9;
}

body.dark-theme .horizontal-timeline-nav-btn:hover,
html.theme-dark .horizontal-timeline-nav-btn:hover {
    border-color: rgba(208, 188, 255, 0.46);
    background: linear-gradient(180deg, rgba(79, 55, 139, 0.86), rgba(54, 44, 78, 0.92));
    color: #F4EEFF;
    box-shadow:
        0 12px 26px rgba(0, 0, 0, 0.40),
        0 0 0 3px rgba(208, 188, 255, 0.10),
        inset 0 1px 0 rgba(255, 255, 255, 0.10);
}

.horizontal-timeline-empty-card {
    min-height: 180px;
}

.horizontal-timeline-header,
.horizontal-timeline-title-row,
.horizontal-timeline-display-control {
    display: flex;
    align-items: center;
    gap: 12px;
}

.horizontal-timeline-header {
    justify-content: space-between;
    margin-bottom: 0;
}

.horizontal-timeline-title-row,
.horizontal-timeline-display-control {
    gap: 8px;
}

.horizontal-timeline-title-icon {
    font-size: 20px;
}

.horizontal-timeline-display-control-menu {
    position: relative;
}

/* 时间轴展示数量限制选择器 */
.horizontal-timeline-limit-select {
    border: 1px solid var(--md-sys-color-outline-variant);
    border-radius: 8px;
    padding: 4px 8px;
    background: var(--md-sys-color-surface);
    color: inherit;
    font-size: 12px;
    font-weight: 600;
}

/* 展示数量限制下拉框触发按钮 */
.horizontal-timeline-limit-trigger {
    min-width: 86px;
    display: inline-flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
    cursor: pointer;
    font-family: inherit;
    line-height: 1.4;
}

.horizontal-timeline-limit-trigger-icon {
    font-size: 11px;
    opacity: 0.7;
    transition: transform 0.18s ease;
}

.horizontal-timeline-limit-trigger.is-open .horizontal-timeline-limit-trigger-icon {
    transform: rotate(180deg);
}

/* 数量限制下拉框选择面板 */
.horizontal-timeline-limit-menu {
    position: absolute;
    top: calc(100% + 8px);
    right: 0;
    min-width: 120px;
    padding: 6px;
    border: 1px solid color-mix(in srgb, var(--md-sys-color-outline-variant) 88%, transparent);
    border-radius: 12px;
    background: color-mix(in srgb, var(--md-sys-color-surface) 92%, white 8%);
    box-shadow: 0 18px 36px rgba(0,0,0,0.14);
    backdrop-filter: blur(12px);
    z-index: 40;
}

.horizontal-timeline-limit-option {
    width: 100%;
    border: none;
    background: transparent;
    color: inherit;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    padding: 8px 10px;
    border-radius: 8px;
    cursor: pointer;
    font: inherit;
    font-size: 12px;
    font-weight: 600;
    text-align: left;
}

.horizontal-timeline-limit-option:hover {
    background: color-mix(in srgb, var(--md-sys-color-primary) 10%, transparent);
}

.horizontal-timeline-limit-option.is-selected {
    background: color-mix(in srgb, var(--md-sys-color-primary) 14%, transparent);
    color: var(--md-sys-color-primary);
}

.horizontal-timeline-limit-option-check {
    font-size: 12px;
}

.horizontal-timeline-empty-body {
    flex: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    opacity: 0.5;
}

.horizontal-timeline-header-wrap {
    margin-bottom: 4px;
    position: relative;
    z-index: 20;
}

/* 时间轴水平自由滑轨容器 (支持手势拖拽) */
.horizontal-timeline-scroll-container {
    flex: 0 0 auto;
    display: flex;
    align-items: center;
    position: relative;
    padding: 4px 0 10px;
    overflow-x: auto; /* 允许溢出滚动 */
    overflow-y: hidden;
    width: 100%;
    cursor: grab; /* 拖拽悬动标志手势 */
    scrollbar-width: none;
    -ms-overflow-style: none;
}

.horizontal-timeline-scroll-container::-webkit-scrollbar {
    display: none; /* 强制移除自带的水平滚动条 */
}

/* 正在被拖拽时的手势样式变更为抓紧状态 */
.horizontal-timeline-scroll-container.is-dragging {
    cursor: grabbing;
    user-select: none;
}

.horizontal-timeline-inner {
    display: flex;
    align-items: center;
    min-width: max-content;
    width: fit-content;
    max-width: 100%;
    padding: 0 20px;
    position: relative;
    box-sizing: border-box;
    margin: 0 auto;
}

/* 横向时间轴核心贯穿基准线 */
.horizontal-timeline-axis {
    position: absolute;
    top: 53px;
    left: 20px;
    width: calc(100% - 40px);
    height: 2px;
    background: var(--md-sys-color-outline-variant);
    z-index: 0;
}

/* 横向时间轴单点列包裹块 */
.horizontal-timeline-item {
    display: flex;
    flex-direction: column;
    align-items: center;
    position: relative;
    width: 140px;
    flex-shrink: 0;
    z-index: 1;
    justify-content: flex-start;
    padding-top: 8px;
}

.horizontal-timeline-time-wrap {
    height: 30px;
    display: flex;
    align-items: flex-end;
    margin-bottom: 8px;
}

/* 时间轴单点时间标签 */
.horizontal-timeline-time-label {
    opacity: 0.7;
    font-weight: 600 !important;
    font-size: 0.75rem !important;
    line-height: 1.35 !important;
    color: var(--md-sys-color-on-surface) !important;
    background: var(--md-sys-color-surface);
    padding: 2px 6px;
    border-radius: 4px;
}

/* 挂载在贯穿线上的发光定位核心原点 */
.horizontal-timeline-dot {
    width: 16px;
    height: 16px;
    border-radius: 50%;
    background: var(--md-sys-color-primary);
    border: 3px solid var(--md-sys-color-surface);
    box-shadow: 0 0 0 2px var(--md-sys-color-primary);
    margin-bottom: 12px;
    transition: all 0.2s;
    z-index: 2;
    flex-shrink: 0;
}

/* 单点事件下方的文字描述容器 */
.horizontal-timeline-content {
    text-align: center;
    width: 100%;
    display: flex;
    flex-direction: column;
    align-items: center;
}

.horizontal-timeline-node-title,
.horizontal-timeline-node-subtitle,
.horizontal-timeline-source-label {
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    max-width: 120px;
}

/* 事件主要位置 */
.horizontal-timeline-node-title {
    font-weight: 700 !important;
    font-size: 13px !important;
    line-height: 1.35 !important;
    color: var(--md-sys-color-primary) !important;
}

/* 震级/震度等详细摘要 */
.horizontal-timeline-node-subtitle {
    opacity: 0.6;
    display: block !important;
    font-size: 11px !important;
    line-height: 1.35 !important;
    font-weight: 400 !important;
}

/* 数据源信息 */
.horizontal-timeline-source-label {
    opacity: 0.45;
    display: block !important;
    font-size: 10px !important;
    line-height: 1.3 !important;
    margin-top: 2px !important;
    font-weight: 400 !important;
}

/* 时间轴各种强度的预警圆点和标题高亮颜色绑定 */
.horizontal-timeline-dot.is-purple { background: #6A1B9A; box-shadow: 0 0 0 2px #6A1B9A; }
.horizontal-timeline-dot.is-red { background: #D32F2F; box-shadow: 0 0 0 2px #D32F2F; }
.horizontal-timeline-dot.is-orange { background: #FB8C00; box-shadow: 0 0 0 2px #FB8C00; }
.horizontal-timeline-dot.is-yellow { background: #FDD835; box-shadow: 0 0 0 2px #FDD835; }
.horizontal-timeline-dot.is-blue { background: #2196F3; box-shadow: 0 0 0 2px #2196F3; }

.horizontal-timeline-node-title.is-purple { color: #6A1B9A !important; }
.horizontal-timeline-node-title.is-red { color: #D32F2F !important; }
.horizontal-timeline-node-title.is-orange { color: #FB8C00 !important; }
.horizontal-timeline-node-title.is-yellow { color: #B99A00 !important; }
.horizontal-timeline-node-title.is-blue { color: #2196F3 !important; }

/* ==========================================================================
   9. 天气高级查询表单面板 (Weather Query Advanced Panel)
   ========================================================================== */
.weather-query-panel {
    padding: 20px 22px;
}

/* 响应式自适应多栏天气输入栅格 */
.weather-query-form {
    display: grid;
    grid-template-columns: minmax(320px, 2.2fr) minmax(150px, 1fr) minmax(132px, 0.8fr) minmax(132px, 0.8fr) auto auto;
    gap: 10px;
    align-items: center;
}

.weather-query-input {
    border: 1px solid var(--md-sys-color-outline-variant);
    border-radius: 10px;
    padding: 10px 12px;
    background: var(--md-sys-color-surface);
    color: inherit;
    font-size: 13px;
    line-height: 1.35;
}

.weather-query-input:focus {
    outline: none;
    border-color: var(--md-sys-color-primary);
    box-shadow: 0 0 0 3px rgba(103, 80, 164, 0.12);
}

.weather-query-input:disabled {
    opacity: 0.6;
    cursor: not-allowed;
}

.weather-query-keyword {
    min-width: 260px;
}

.weather-query-btn {
    border: 1px solid transparent;
    border-radius: 10px;
    padding: 10px 16px;
    font-size: 13px;
    font-weight: 700;
    line-height: 1;
    min-height: 38px;
    background: var(--md-sys-color-primary);
    color: var(--md-sys-color-on-primary);
}

.weather-query-btn:hover:not(:disabled) {
    filter: brightness(1.04);
}

.weather-query-btn:disabled {
    opacity: 0.7;
    cursor: not-allowed;
}

.weather-query-btn-secondary {
    background: var(--md-sys-color-surface-variant);
    color: var(--md-sys-color-on-surface);
    border-color: var(--md-sys-color-outline-variant);
}

.weather-query-loading {
    margin-top: 14px;
    display: inline-flex;
    align-items: center;
    gap: 10px;
    opacity: 0.86;
}

/* 天气警报错误面板 */
.weather-query-error {
    margin-top: 14px;
    padding: 12px 14px;
    border-radius: 10px;
    border: 1px solid rgba(179, 38, 30, 0.25);
    background: rgba(179, 38, 30, 0.08);
    color: #B3261E;
}

body.dark-theme .weather-query-error {
    border-color: rgba(242, 184, 181, 0.4);
    background: rgba(242, 184, 181, 0.12);
    color: #F2B8B5;
}

.weather-query-result {
    margin-top: 14px;
}

.weather-query-result-card {
    border: 1px solid var(--glass-border);
    background: var(--md-sys-color-surface);
    border-radius: 12px;
    padding: 14px;
}

.weather-query-result-header {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 10px;
    margin-bottom: 8px;
    flex-wrap: wrap;
}

.weather-query-result-body {
    opacity: 0.92;
}

/* 天气警报图标定位 */
.weather-query-icon-wrap {
    margin-top: 12px;
    display: flex;
    align-items: center;
    justify-content: flex-start;
}

/* 天气图标背景块（带品牌混合背景色） */
.weather-query-icon-card {
    width: 72px;
    height: 72px;
    border-radius: 12px;
    border: 1px solid var(--glass-border);
    background: color-mix(in srgb, var(--md-sys-color-surface) 88%, var(--md-sys-color-primary) 12%);
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.08);
}

.weather-query-icon {
    width: 64px;
    height: 64px;
    object-fit: contain;
    image-rendering: -webkit-optimize-contrast; /* 锐化图片边缘，防止图标模糊 */
}

.weather-query-icon.is-hidden,
.weather-query-list-item-image.is-hidden {
    display: none;
}

.weather-query-title-icon {
    font-size: 20px;
}

/* 天气查询历史列表 */
.weather-query-list {
    display: flex;
    flex-direction: column;
    gap: 10px;
}

/* 历史列表操作工具条 */
.weather-query-list-toolbar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 12px;
    flex-wrap: wrap;
    gap: 8px;
}

.weather-query-page-size-control,
.weather-query-pagination-row {
    display: flex;
    align-items: center;
    gap: 8px;
}

.weather-query-page-size-select {
    padding: 4px 8px;
}

.weather-query-pagination-row {
    justify-content: center;
}

/* ==========================================================================
   9.1 台风信息快捷查询面板 (Typhoon Query Panel)
   视觉风格对齐气象预警快捷查询，扩展多参数表单与路径展示
   ========================================================================== */
.typhoon-query-panel {
    margin-top: 0;
}

.typhoon-query-form {
    display: grid;
    /* 台风 ID 加宽，保证 placeholder 完整可读；数量字段带前缀/后缀引导 */
    grid-template-columns:
        minmax(280px, 1.8fr)
        minmax(160px, 1.1fr)
        minmax(132px, 0.75fr)
        minmax(120px, 0.75fr)
        auto
        auto
        auto;
    gap: 10px;
    align-items: center;
}

.typhoon-query-id,
.typhoon-query-keyword {
    min-width: 0;
}

/* 数量输入：左侧“数量”+ 中间数字 + 右侧“条”，降低纯数字框的认知成本 */
.typhoon-query-count-field {
    display: inline-flex;
    align-items: center;
    min-width: 0;
    width: 100%;
    border: 1px solid var(--md-sys-color-outline-variant);
    border-radius: 10px;
    background: var(--md-sys-color-surface);
    overflow: hidden;
    min-height: 38px;
}

.typhoon-query-count-field:focus-within {
    border-color: var(--md-sys-color-primary);
    box-shadow: 0 0 0 3px rgba(103, 80, 164, 0.12);
}

.typhoon-query-count-field.is-disabled {
    opacity: 0.6;
    cursor: not-allowed;
}

.typhoon-query-count-label,
.typhoon-query-count-suffix {
    flex: 0 0 auto;
    font-size: 12px;
    font-weight: 600;
    line-height: 1;
    opacity: 0.78;
    white-space: nowrap;
    user-select: none;
}

.typhoon-query-count-label {
    padding: 0 0 0 10px;
}

.typhoon-query-count-suffix {
    padding: 0 10px 0 0;
}

.typhoon-query-count {
    min-width: 0;
    flex: 1 1 auto;
    width: 100%;
    border: none !important;
    box-shadow: none !important;
    border-radius: 0 !important;
    text-align: center;
    padding-left: 6px !important;
    padding-right: 6px !important;
    background: transparent !important;
    /* 隐藏 number 输入框多余上下箭头，视觉更干净 */
    appearance: textfield;
    -moz-appearance: textfield;
}

.typhoon-query-count::-webkit-outer-spin-button,
.typhoon-query-count::-webkit-inner-spin-button {
    appearance: none;
    -webkit-appearance: none;
    margin: 0;
}

.typhoon-query-active-toggle {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font-size: 13px;
    white-space: nowrap;
    user-select: none;
    opacity: 0.92;
}

.typhoon-query-active-toggle input {
    width: 15px;
    height: 15px;
    accent-color: var(--md-sys-color-primary);
}

.typhoon-query-result-card {
    margin-bottom: 10px;
}

.typhoon-query-result-body {
    display: grid;
    gap: 4px;
}

.typhoon-query-meta-line {
    opacity: 0.92;
    line-height: 1.45 !important;
}

/* 查询结果正文第一行：台风编号 */
.typhoon-query-id-line {
    font-weight: 600;
    opacity: 0.95;
}

.typhoon-query-source-line {
    opacity: 0.7 !important;
    margin-top: 2px !important;
}

.typhoon-query-wind-circle {
    margin-top: 8px;
    padding-top: 8px;
    border-top: 1px dashed var(--glass-border);
}

.typhoon-query-track-wrap {
    margin-top: 10px;
}

.typhoon-query-expand-btn {
    margin-bottom: 8px;
}

.typhoon-query-track-block {
    display: grid;
    gap: 10px;
}

.typhoon-query-track-section {
    border: 1px solid var(--glass-border);
    border-radius: 10px;
    background: color-mix(in srgb, var(--md-sys-color-surface-variant) 45%, transparent);
    padding: 10px 12px;
}

.typhoon-query-track-title {
    display: block;
    font-weight: 700 !important;
    opacity: 0.86;
    margin-bottom: 6px !important;
}

.typhoon-query-track-list {
    margin: 0;
    padding-left: 18px;
    display: grid;
    gap: 4px;
}

.typhoon-query-track-list li {
    font-size: 12.5px;
    line-height: 1.45;
    opacity: 0.9;
}

.typhoon-query-list-item-wrap + .typhoon-query-list-item-wrap {
    margin-top: 8px;
}

.typhoon-query-caption-muted {
    opacity: 0.7;
}

/* 历史列表单行条目卡片 */
.weather-query-list-item {
    border: 1px solid var(--glass-border);
    background: var(--md-sys-color-surface);
    border-radius: 12px;
    display: flex;
    align-items: stretch;
    gap: 0;
    overflow: hidden;
}

/* 历史条目左侧大号天气图标 */
.weather-query-list-item-image {
    width: 120px;
    min-width: 120px;
    align-self: stretch;
    object-fit: contain;
    object-position: center;
    padding: 10px;
    background: color-mix(in srgb, var(--md-sys-color-surface) 84%, var(--md-sys-color-primary) 16%);
    border-right: 1px solid var(--glass-border);
    image-rendering: -webkit-optimize-contrast;
}

/* 历史条目内容主体描述区 */
.weather-query-list-item-main {
    display: grid;
    gap: 4px;
    min-width: 0;
    flex: 1;
    padding: 12px 14px;
}

/* ==========================================================================
   10. 响应式布局高级查询及筛选器媒体查询适配
   ========================================================================== */

/* 宽屏平板设备适配（最大宽 1280px） */
@media (max-width: 1280px) {
    .event-filters-secondary-row {
        grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
    }

    .event-filter-field-card-keyword {
        grid-column: 1 / -1; /* 关键词搜索独占一行 */
    }
}

/* 普通平板或小桌面（最大宽 900px） */
@media (max-width: 900px) {
    .event-filters-toolbar {
        --hover-lift: 0px;
        padding: 16px;
        border-radius: 20px;
    }

    .event-filters-toolbar:hover::before,
    .event-filters-toolbar:hover > * {
        transform: none;
    }

    .event-filters-primary-row {
        gap: 12px;
        padding-bottom: 12px;
    }

    .event-filters-primary-label {
        min-height: auto;
        width: 100%;
        margin-bottom: -2px;
    }

    /* 所有高级检索字段卡片全部重置为单列垂直流堆叠 */
    .event-filters-secondary-row {
        grid-template-columns: 1fr;
    }

    .event-filter-field-card-keyword {
        grid-column: auto;
    }

    .event-filter-inline-controls-source {
        flex-wrap: wrap;
    }

    .event-filter-select-sm {
        width: 100%;
        flex: 1 1 100%;
        min-width: 0;
    }

    .event-filter-source-select,
    .event-filter-source-details {
        width: 100%;
        flex: 1 1 100%;
        max-width: 100%;
        min-width: 0;
    }

    .event-filter-source-menu {
        min-width: 100%;
    }
}

/* 移动端手机适配（最大宽 768px） */
@media (max-width: 768px) {
    .events-filters-header {
        gap: 14px;
        margin-bottom: 24px;
    }

    /* 时间轴翻页按钮移动端触控放大：保证至少 44x44px 命中区 */
    .horizontal-timeline-nav-btn {
        width: 44px;
        height: 44px;
    }

    /* 事件卡片展开徽章触控区域放大，便于拇指点击 */
    .update-badge {
        min-height: 36px;
        padding: 6px 14px;
    }

    /* 时间轴展示数量下拉触发按钮放大触控目标 */
    .horizontal-timeline-limit-trigger {
        min-height: 40px;
        min-width: 96px;
    }

    /* 天气/台风查询按钮移动端触控目标统一 44px */
    .weather-query-btn,
    .typhoon-query-submit-btn {
        min-height: 44px;
    }

    .event-filters-footer-row {
        flex-direction: column;
        align-items: stretch;
        gap: 10px;
    }

    .event-filters-footer-actions {
        width: 100%;
        justify-content: flex-end;
        margin-left: 0;
    }

    /* 手机端也尽量保持「开始 至 结束」同一行，避免被强行拆成两行 */
    .event-filter-custom-time {
        display: grid;
        width: 100%;
        max-width: 100%;
        grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr);
        align-items: end;
        column-gap: 8px;
    }

    .event-filter-datetime-field {
        width: auto;
        min-width: 0;
    }

    .event-filter-datetime-separator {
        padding-bottom: 12px;
        align-self: end;
    }

    .event-filters-summary-row {
        flex-direction: column;
        gap: 8px;
    }

    /* 主要分类胶囊在手机端拉伸自适应 */
    .event-filter-type-group {
        width: 100%;
        gap: 8px;
        display: grid;
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .event-filter-pill {
        min-height: 40px;
        padding: 0 16px;
        justify-content: center;
    }

    .event-filter-field-card {
        min-height: auto;
        padding: 12px;
        transform: none !important;
    }

    .event-filter-inline-controls {
        gap: 8px;
    }

    .event-filter-select-md,
    .event-filter-select-sm,
    .event-filter-keyword-input,
    .event-filter-source-select,
    .event-filter-source-details {
        width: 100%;
        min-width: 0;
        max-width: 100%;
        flex: 1 1 100%;
    }

    /* 手机端取消最大高度限制，自然流全部展开 */
    .events-scroll-window {
        max-height: none;
        overflow: visible;
        padding-right: 0;
    }

    .event-card {
        --hover-shift-x: 0px;
        flex-direction: row;
        flex-wrap: wrap;
        align-items: center;
        gap: 12px;
        padding: 16px;
    }

    .event-card:hover::before,
    .event-card:hover > * {
        transform: none;
    }

    .mag-badge {
        width: 48px;
        height: 48px;
        font-size: 16px;
    }

    .weather-query-panel {
        padding: 16px;
    }

    /* 天气查询表单由横排变成竖排 */
    .weather-query-form {
        grid-template-columns: 1fr;
        gap: 8px;
    }

    .weather-query-keyword {
        min-width: 0;
    }

    .weather-query-btn {
        width: 100%;
        justify-content: center;
    }

    /* 台风查询表单在手机端同样改为单列 */
    .typhoon-query-form {
        grid-template-columns: 1fr;
        gap: 8px;
    }

    .typhoon-query-active-toggle {
        min-height: 38px;
    }

    .weather-query-list-item {
        flex-direction: column;
        align-items: stretch;
    }

    /* 历史天气条目的图片由左侧换到上方展示 */
    .weather-query-list-item-image {
        width: 100%;
        min-width: 0;
        height: 120px;
        border-right: none;
        border-bottom: 1px solid var(--glass-border);
    }
}

/* 超窄屏手机适配（最大宽 480px） */
@media (max-width: 480px) {
    .events-filters-title-group {
        width: 100%;
        justify-content: space-between;
    }

    .event-filter-type-group {
        grid-template-columns: 1fr; /* 分类按钮变为每行一个 */
    }

    .event-filter-inline-controls {
        flex-direction: column;
        align-items: stretch;
    }

    .event-filter-inline-controls-source {
        flex-direction: column;
    }

    .event-filter-select-sm,
    .event-filter-select-md,
    .event-filter-select,
    .event-filter-source-summary {
        min-height: 44px;
    }

    .event-card {
        padding: 14px;
        gap: 10px;
    }

    .mag-badge {
        width: 44px;
        height: 44px;
        font-size: 15px;
    }
}

/* 极其紧凑的极窄设备适配 (最大宽 360px) */
@media (max-width: 360px) {
    .event-card {
        padding: 12px;
    }
}

@media print {
    .event-card:hover::before,
    .event-card:hover > * {
        transform: none !important;
    }
}