/* ====================================================================
   大气复合污染识别智算平台 · 商业级数据大屏 · 深色主题
   --------------------------------------------------------------------
   色系：深邃午夜蓝 + 青蓝主色 + 玻璃态浮层
   字体：Inter（西文）+ 系统中文 + JetBrains Mono（数据数字）
   ==================================================================== */

/* ============== 设计令牌（CSS Variables） ============== */
:root {
    /* 背景层级 - 浅色主题（柔和灰蓝，不刺眼） */
    --bg-base:        #e8edf3;   /* 主背景 浅灰蓝 */
    --bg-surface-1:   #f4f7fa;   /* 卡片底（非纯白） */
    --bg-surface-2:   #eaeff5;   /* 浮起卡片 */
    --bg-surface-3:   #d8dee8;
    --bg-glass:       rgba(244,247,250, 0.92);

    /* 边框 - 深色描边，在浅底上可见 */
    --border-subtle:  rgba(15, 23, 42, 0.06);
    --border-default: rgba(15, 23, 42, 0.10);
    --border-strong:  rgba(15, 23, 42, 0.18);

    /* 文字 - 浅色主题 */
    --text-primary:   #0f172a;
    --text-secondary: #475569;
    --text-tertiary:  #64748b;
    --text-inverse:   #ffffff;

    /* 品牌主色 - 浅底加深以保对比 */
    --accent-cyan:    #0891b2;
    --accent-blue:    #2563eb;
    --accent-indigo:  #4f46e5;
    --accent-cyan-soft: rgba(8, 145, 178, 0.10);
    --accent-blue-soft: rgba(37, 99, 235, 0.10);

    /* 渐变 */
    --grad-brand:     linear-gradient(135deg, #0891b2 0%, #2563eb 100%);
    --grad-brand-soft:linear-gradient(135deg, rgba(8,145,178,.14) 0%, rgba(37,99,235,.12) 100%);

    /* 状态色 - 浅底加深 */
    --status-success: #059669;
    --status-warning: #d97706;
    --status-danger:  #dc2626;
    --status-info:    #0891b2;

    /* PM2.5 / O3 双线色 */
    --color-pm25:     #0284c7;
    --color-o3:       #ea580c;

    /* 圆角 */
    --r-sm: 6px;
    --r-md: 10px;
    --r-lg: 14px;
    --r-xl: 18px;
    --r-pill: 999px;

    /* 阴影 - 浅底用更轻的阴影 */
    --shadow-sm:  0 1px 2px rgba(15,23,42,.06);
    --shadow-md:  0 4px 12px rgba(15,23,42,.08), 0 1px 2px rgba(15,23,42,.04);
    --shadow-lg:  0 12px 32px rgba(15,23,42,.12), 0 2px 6px rgba(15,23,42,.06);
    --shadow-glow:0 0 24px rgba(8, 145, 178, .25);
    --shadow-inset: inset 0 1px 0 rgba(255,255,255,.85);

    /* 过渡 */
    --t-fast: 120ms cubic-bezier(.4,0,.2,1);
    --t-med:  220ms cubic-bezier(.4,0,.2,1);
    --t-slow: 360ms cubic-bezier(.4,0,.2,1);

    /* 字体 */
    --font-sans: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI",
                 "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei",
                 "Helvetica Neue", Arial, sans-serif;
    --font-mono: "JetBrains Mono", "SF Mono", Menlo, Consolas, monospace;
}

/* ============== 全局复位 ============== */
* { margin: 0; padding: 0; box-sizing: border-box; }
*::before, *::after { box-sizing: border-box; }

html, body {
    height: 100%;
    font-family: var(--font-sans);
    font-size: 14px;
    line-height: 1.55;
    color: var(--text-primary);
    background:
        radial-gradient(ellipse 1200px 600px at 18% 0%, rgba(6,182,212,.10), transparent 60%),
        radial-gradient(ellipse 900px 500px at 85% 100%, rgba(99,102,241,.08), transparent 60%),
        var(--bg-base);
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    overflow: hidden;
}

button {
    font-family: inherit;
    cursor: pointer;
    border: none;
    background: none;
    color: inherit;
    font-size: inherit;
}
button:focus-visible {
    outline: 2px solid var(--accent-cyan);
    outline-offset: 2px;
}

input, textarea, select {
    font-family: inherit;
    color: inherit;
}

a { color: var(--accent-cyan); text-decoration: none; }

sub, sup { font-size: .68em; }
sub { vertical-align: -0.2em; }

.hidden { display: none !important; }

/* 自定义滚动条（深色） */
::-webkit-scrollbar { width: 8px; height: 8px; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb {
    background: rgba(148,163,184,.18);
    border-radius: 4px;
    transition: background var(--t-fast);
}
::-webkit-scrollbar-thumb:hover { background: rgba(148,163,184,.32); }

/* ====================================================================
   顶部导航 #topbar
   ==================================================================== */
#topbar {
    position: fixed;
    top: 0; left: 0; right: 0;
    height: 56px;
    z-index: 1000;
    display: flex;
    align-items: center;
    gap: 22px;
    padding: 0 20px;
    background: linear-gradient(180deg, rgba(255,255,255,.92) 0%, rgba(255,255,255,.78) 100%);
    backdrop-filter: blur(18px) saturate(140%);
    -webkit-backdrop-filter: blur(18px) saturate(140%);
    border-bottom: 1px solid var(--border-subtle);
    box-shadow: 0 1px 0 rgba(255,255,255,.03), 0 6px 22px rgba(0,0,0,.32);
}

/* --- 品牌区 --- */
.brand {
    display: flex;
    align-items: center;
    gap: 12px;
    flex-shrink: 0;
    padding-right: 18px;
    border-right: 1px solid var(--border-subtle);
    height: 100%;
}
.brand-logo {
    width: 38px; height: 38px;
    border-radius: var(--r-md);
    background: var(--grad-brand);
    color: #fff;
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow: 0 4px 12px rgba(6,182,212,.42), inset 0 1px 0 rgba(255,255,255,.18);
}
.brand-text { display: flex; flex-direction: column; line-height: 1.1; }
.brand-title {
    font-size: 15px;
    font-weight: 700;
    letter-spacing: 0.2px;
    color: var(--text-primary);
    background: var(--grad-brand);
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
}
.brand-sub {
    font-size: 11px;
    color: var(--text-tertiary);
    margin-top: 2px;
    letter-spacing: 0.3px;
}

/* --- 控件组容器 --- */
.topbar-controls {
    display: flex;
    align-items: center;
    gap: 18px;
    flex: 1;
}
.ctrl-divider {
    width: 1px;
    height: 24px;
    background: var(--border-subtle);
}

.ctrl-group {
    display: flex;
    align-items: center;
    gap: 10px;
}
.ctrl-label {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    font-size: 11px;
    color: var(--text-tertiary);
    font-weight: 500;
    letter-spacing: 0.4px;
    text-transform: uppercase;
}
.ctrl-label svg { opacity: .75; }

/* --- Radio 按钮组（分段控件） --- */
.radio-group {
    display: inline-flex;
    background: var(--bg-surface-1);
    border: 1px solid var(--border-default);
    border-radius: var(--r-md);
    padding: 3px;
    gap: 2px;
}
.radio-btn {
    position: relative;
    display: inline-flex;
    align-items: center;
    padding: 5px 14px;
    border-radius: 7px;
    font-size: 12.5px;
    font-weight: 500;
    color: var(--text-secondary);
    cursor: pointer;
    transition: all var(--t-fast);
    user-select: none;
}
.radio-btn input { position: absolute; opacity: 0; pointer-events: none; }
.radio-btn:hover { color: var(--text-primary); }
.radio-btn:has(input:checked) {
    background: var(--grad-brand);
    color: #fff;
    box-shadow: 0 2px 8px rgba(6,182,212,.35);
}

/* --- 日期输入 --- */
#topbar input[type="date"] {
    padding: 6px 10px;
    border: 1px solid var(--border-default);
    border-radius: var(--r-sm);
    background: var(--bg-surface-1);
    color: var(--text-primary);
    font-size: 12.5px;
    font-family: var(--font-mono);
    font-weight: 500;
    cursor: pointer;
    transition: all var(--t-fast);
    color-scheme: dark;
}
#topbar input[type="date"]:hover {
    border-color: var(--accent-cyan);
    background: var(--bg-surface-2);
}
#topbar input[type="date"]:focus {
    outline: none;
    border-color: var(--accent-cyan);
    box-shadow: 0 0 0 3px var(--accent-cyan-soft);
}
#topbar input[type="date"]::-webkit-calendar-picker-indicator {
    filter: invert(0.7) sepia(0.5) hue-rotate(155deg);
    cursor: pointer;
    opacity: 0.7;
    transition: opacity var(--t-fast);
}
#topbar input[type="date"]::-webkit-calendar-picker-indicator:hover { opacity: 1; }

/* --- 小时滑块 --- */
.ctrl-group-hour { min-width: 240px; }
#hour-slider {
    -webkit-appearance: none;
    appearance: none;
    width: 140px;
    height: 5px;
    background: var(--bg-surface-1);
    border: 1px solid var(--border-default);
    border-radius: var(--r-pill);
    cursor: pointer;
    transition: all var(--t-fast);
}
#hour-slider::-webkit-slider-thumb {
    -webkit-appearance: none;
    width: 16px; height: 16px;
    border-radius: 50%;
    background: var(--grad-brand);
    border: 2px solid var(--bg-surface-1);
    box-shadow: 0 0 0 1px var(--accent-cyan), 0 2px 6px rgba(6,182,212,.5);
    cursor: pointer;
    transition: transform var(--t-fast);
}
#hour-slider::-webkit-slider-thumb:hover { transform: scale(1.18); }
#hour-slider::-moz-range-thumb {
    width: 14px; height: 14px;
    border-radius: 50%;
    background: var(--accent-cyan);
    border: 2px solid var(--bg-surface-1);
    cursor: pointer;
}
#hour-label {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 60px;
    padding: 4px 10px;
    background: var(--bg-surface-1);
    border: 1px solid var(--border-default);
    border-radius: var(--r-sm);
    font-family: var(--font-mono);
    font-size: 13px;
    font-weight: 600;
    color: var(--accent-cyan);
    letter-spacing: 0.5px;
}

/* --- 状态区 --- */
.ctrl-status {
    margin-left: auto;
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 6px 14px;
    background: var(--bg-surface-1);
    border: 1px solid var(--border-default);
    border-radius: var(--r-pill);
    transition: all var(--t-med);
}
.status-dot {
    width: 8px; height: 8px;
    border-radius: 50%;
    background: var(--status-success);
    box-shadow: 0 0 0 0 rgba(16,185,129,.5);
    animation: pulse-dot 2s infinite;
}
@keyframes pulse-dot {
    0%   { box-shadow: 0 0 0 0 rgba(16,185,129,.55); }
    70%  { box-shadow: 0 0 0 8px rgba(16,185,129,0); }
    100% { box-shadow: 0 0 0 0 rgba(16,185,129,0); }
}
#status {
    font-size: 12.5px;
    font-weight: 500;
    color: var(--text-secondary);
    white-space: nowrap;
}
#status.loading {
    color: var(--status-warning);
}
.ctrl-status:has(#status.loading) .status-dot {
    background: var(--status-warning);
    animation-name: pulse-dot-warning;
}
@keyframes pulse-dot-warning {
    0%   { box-shadow: 0 0 0 0 rgba(245,158,11,.55); }
    70%  { box-shadow: 0 0 0 8px rgba(245,158,11,0); }
    100% { box-shadow: 0 0 0 0 rgba(245,158,11,0); }
}
#status.error { color: var(--status-danger); }
.ctrl-status:has(#status.error) .status-dot {
    background: var(--status-danger);
    animation-name: pulse-dot-danger;
}
@keyframes pulse-dot-danger {
    0%   { box-shadow: 0 0 0 0 rgba(239,68,68,.55); }
    70%  { box-shadow: 0 0 0 8px rgba(239,68,68,0); }
    100% { box-shadow: 0 0 0 0 rgba(239,68,68,0); }
}

/* ====================================================================
   主布局
   ==================================================================== */
#layout {
    position: absolute;
    top: 56px; left: 0; right: 0; bottom: 0;
    display: flex;
    background: var(--bg-base);
}

/* --- 地图区 --- */
#map-wrap {
    flex: 1;
    position: relative;
    overflow: hidden;
    background: var(--bg-base);
}
#map {
    position: absolute;
    inset: 0;
    background: #f0f4f8;
}

/* Leaflet 控件深色化 */
.leaflet-control-zoom {
    border: none !important;
    box-shadow: var(--shadow-md) !important;
    border-radius: var(--r-md) !important;
    overflow: hidden;
}
.leaflet-control-zoom a {
    background: var(--bg-glass) !important;
    backdrop-filter: blur(12px);
    color: var(--text-primary) !important;
    border: none !important;
    border-bottom: 1px solid var(--border-subtle) !important;
    transition: background var(--t-fast) !important;
}
.leaflet-control-zoom a:last-child { border-bottom: none !important; }
.leaflet-control-zoom a:hover {
    background: var(--bg-surface-2) !important;
    color: var(--accent-cyan) !important;
}
.leaflet-control-attribution {
    background: rgba(255,255,255,.65) !important;
    color: var(--text-tertiary) !important;
    backdrop-filter: blur(8px);
    font-size: 10px !important;
    padding: 2px 8px !important;
    border-radius: 4px 0 0 0;
}
.leaflet-control-attribution a { color: var(--text-secondary) !important; }

/* Marker cluster 配色 */
.marker-cluster-small {
    background-color: rgba(6,182,212,.4) !important;
}
.marker-cluster-small div {
    background-color: rgba(6,182,212,.85) !important;
    color: #fff !important;
    font-weight: 600 !important;
}
.marker-cluster-medium {
    background-color: rgba(59,130,246,.4) !important;
}
.marker-cluster-medium div {
    background-color: rgba(59,130,246,.85) !important;
    color: #fff !important;
    font-weight: 600 !important;
}
.marker-cluster-large {
    background-color: rgba(99,102,241,.4) !important;
}
.marker-cluster-large div {
    background-color: rgba(99,102,241,.85) !important;
    color: #fff !important;
    font-weight: 600 !important;
}

/* ====================================================================
   玻璃态浮卡共用样式
   ==================================================================== */
.glass-card {
    background: var(--bg-glass);
    backdrop-filter: blur(20px) saturate(160%);
    -webkit-backdrop-filter: blur(20px) saturate(160%);
    border: 1px solid var(--border-default);
    border-radius: var(--r-lg);
    box-shadow: var(--shadow-lg), var(--shadow-inset);
    color: var(--text-primary);
}

/* ====================================================================
   图例 #legend
   ==================================================================== */
#legend {
    position: absolute;
    bottom: 20px;
    right: 20px;
    z-index: 500;
    padding: 12px 14px 10px;
    font-size: 12px;
    min-width: 160px;
    animation: slideUp 280ms cubic-bezier(.2,.7,.3,1) both;
}
.legend-header {
    display: flex;
    align-items: center;
    gap: 6px;
    padding-bottom: 8px;
    margin-bottom: 8px;
    border-bottom: 1px solid var(--border-subtle);
    color: var(--accent-cyan);
}
.legend-title {
    font-weight: 600;
    color: var(--text-primary);
    font-size: 12px;
    letter-spacing: 0.3px;
}
.legend-body {
    display: flex;
    flex-direction: column;
    gap: 4px;
}
.legend-item {
    display: flex;
    align-items: center;
    gap: 9px;
    color: var(--text-secondary);
    font-size: 11.5px;
    transition: color var(--t-fast);
}
.legend-item:hover { color: var(--text-primary); }
.legend-item-muted { opacity: 0.72; }
.swatch {
    display: inline-block;
    width: 12px; height: 12px;
    border-radius: 50%;
    border: 1px solid rgba(255,255,255,.18);
    box-shadow: 0 0 0 1px rgba(0,0,0,.4), 0 1px 3px rgba(0,0,0,.4);
    flex-shrink: 0;
}

/* ====================================================================
   全国分布卡片 #summary-card
   ==================================================================== */
#summary-card {
    position: absolute;
    bottom: 20px;
    left: 20px;
    z-index: 500;
    padding: 14px 16px 12px;
    font-size: 12px;
    min-width: 280px;
    max-width: 340px;
    animation: slideUp 280ms cubic-bezier(.2,.7,.3,1) both;
}
.summary-header {
    display: flex;
    align-items: center;
    gap: 7px;
    padding-bottom: 10px;
    margin-bottom: 10px;
    border-bottom: 1px solid var(--border-subtle);
    color: var(--accent-cyan);
}
.summary-title {
    font-weight: 600;
    color: var(--text-primary);
    font-size: 12.5px;
    letter-spacing: 0.3px;
}
#summary-content { color: var(--text-secondary); }
.summary-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 4px 0;
    color: var(--text-secondary);
    font-size: 11.5px;
}
.summary-row + .summary-row { border-top: 1px dashed var(--border-subtle); }
.summary-row .summary-bar {
    display: inline-block;
    height: 7px;
    margin: 0 8px;
    vertical-align: middle;
    border-radius: var(--r-pill);
    box-shadow: 0 0 8px rgba(0,0,0,.4) inset, 0 0 4px currentColor;
    transition: width var(--t-slow);
}
.summary-row b {
    color: var(--text-primary);
    font-family: var(--font-mono);
    font-weight: 600;
}

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

/* ====================================================================
   右侧 sidebar
   ==================================================================== */
#sidebar {
    width: 480px;
    flex-shrink: 0;
    background: linear-gradient(180deg, var(--bg-surface-1) 0%, var(--bg-base) 100%);
    border-left: 1px solid var(--border-default);
    overflow-y: auto;
    overflow-x: hidden;
    box-shadow: -12px 0 32px rgba(0,0,0,.32);
}

/* --- 空状态 --- */
.sidebar-empty {
    height: 100%;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 40px 36px;
    color: var(--text-secondary);
    text-align: center;
    animation: fadeIn 400ms both;
}
.empty-illustration {
    margin-bottom: 24px;
    filter: drop-shadow(0 8px 24px rgba(6,182,212,.22));
    animation: float 4s ease-in-out infinite;
}
@keyframes float {
    0%, 100% { transform: translateY(0); }
    50%      { transform: translateY(-6px); }
}
.empty-title {
    font-size: 17px;
    font-weight: 600;
    color: var(--text-primary);
    margin-bottom: 10px;
    letter-spacing: 0.3px;
}
.empty-desc {
    font-size: 13px;
    line-height: 1.7;
    max-width: 320px;
    color: var(--text-tertiary);
    margin-bottom: 24px;
}
.empty-hint {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    padding: 7px 14px;
    background: var(--bg-surface-2);
    border: 1px solid var(--border-default);
    border-radius: var(--r-pill);
    font-size: 12px;
    color: var(--text-tertiary);
}
.hint-kbd {
    display: inline-block;
    padding: 1px 8px;
    background: var(--accent-cyan-soft);
    color: var(--accent-cyan);
    border-radius: var(--r-sm);
    font-size: 10.5px;
    font-weight: 600;
    letter-spacing: 0.4px;
}
@keyframes fadeIn {
    from { opacity: 0; }
    to   { opacity: 1; }
}

/* ====================================================================
   站点详情 - 整体内容 fade-in
   ==================================================================== */
#sidebar-content:not(.hidden) {
    animation: contentEnter 320ms cubic-bezier(.2,.7,.3,1) both;
}
@keyframes contentEnter {
    from { opacity: 0; transform: translateY(8px); }
    to   { opacity: 1; transform: translateY(0); }
}

/* --- 站点头 --- */
.sb-header {
    padding: 20px 22px 18px;
    background:
        radial-gradient(ellipse 320px 120px at 0% 0%, rgba(6,182,212,.10), transparent 70%),
        linear-gradient(180deg, var(--bg-surface-2) 0%, var(--bg-surface-1) 100%);
    border-bottom: 1px solid var(--border-default);
    position: relative;
}
.sb-header::after {
    content: "";
    position: absolute;
    bottom: 0; left: 22px; right: 22px;
    height: 1px;
    background: linear-gradient(90deg, transparent, var(--accent-cyan), transparent);
    opacity: .35;
}
.sb-station-row {
    display: flex;
    align-items: flex-start;
    gap: 12px;
    margin-bottom: 12px;
}
.sb-icon {
    width: 38px; height: 38px;
    flex-shrink: 0;
    border-radius: var(--r-md);
    background: var(--grad-brand);
    color: #fff;
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow: 0 4px 12px rgba(6,182,212,.36), inset 0 1px 0 rgba(255,255,255,.18);
}
.sb-name-block { flex: 1; min-width: 0; }
.sb-station-name {
    font-size: 19px;
    font-weight: 700;
    color: var(--text-primary);
    line-height: 1.25;
    letter-spacing: 0.2px;
    word-break: break-word;
    margin-bottom: 4px;
}
.sb-coord {
    font-size: 11.5px;
    color: var(--text-tertiary);
    font-family: var(--font-mono);
    letter-spacing: 0.2px;
}
.sb-station-meta {
    display: flex;
    gap: 6px;
    align-items: center;
    flex-wrap: wrap;
}
.city-tag, .code-tag, .ref-tag {
    display: inline-flex;
    align-items: center;
    height: 22px;
    padding: 0 9px;
    border-radius: var(--r-sm);
    font-size: 11.5px;
    font-weight: 500;
    letter-spacing: 0.3px;
}
.city-tag {
    background: var(--accent-blue-soft);
    color: #93c5fd;
    border: 1px solid rgba(59,130,246,.32);
}
.code-tag {
    background: var(--bg-surface-3);
    color: var(--text-secondary);
    border: 1px solid var(--border-default);
    font-family: var(--font-mono);
    font-weight: 600;
}
.ref-tag {
    background: rgba(245,158,11,.16);
    color: #fbbf24;
    border: 1px solid rgba(245,158,11,.32);
}

/* ====================================================================
   4 类污染 Banner（视觉重点）
   ==================================================================== */
.pollution-banner {
    position: relative;
    margin: 18px 22px 16px;
    padding: 18px 18px 16px;
    border-radius: var(--r-lg);
    color: #fff;
    background: #555;
    /* JS 通过 banner.style.background = d.pollution_color 设置纯色，
       下方 ::after 叠加渐变+斑点实现质感 */
    box-shadow:
        0 8px 24px rgba(0,0,0,.36),
        inset 0 1px 0 rgba(255,255,255,.15),
        inset 0 -10px 28px rgba(0,0,0,.18);
    overflow: hidden;
    isolation: isolate;
}
/* 半透明渐变叠加（更有质感） */
.pollution-banner::before {
    content: "";
    position: absolute;
    inset: 0;
    background: linear-gradient(135deg,
        rgba(255,255,255,.18) 0%,
        rgba(255,255,255,0) 35%,
        rgba(0,0,0,.20) 100%);
    pointer-events: none;
    z-index: 0;
}
/* 高光斑点 */
.banner-bg-pattern {
    position: absolute;
    inset: 0;
    background:
        radial-gradient(circle at 88% 12%, rgba(255,255,255,.22), transparent 35%),
        radial-gradient(circle at 5% 95%, rgba(0,0,0,.22), transparent 45%);
    pointer-events: none;
    z-index: 0;
}
.banner-content { position: relative; z-index: 1; }
.banner-label-row {
    display: flex;
    align-items: center;
    gap: 6px;
    margin-bottom: 6px;
    opacity: 0.92;
}
.banner-label {
    font-size: 11.5px;
    font-weight: 500;
    letter-spacing: 0.6px;
    text-transform: uppercase;
}
.banner-type {
    font-size: 24px;
    font-weight: 800;
    margin-bottom: 10px;
    letter-spacing: 0.3px;
    text-shadow: 0 1px 2px rgba(0,0,0,.28);
    line-height: 1.15;
}
.banner-thresholds {
    font-size: 11.5px;
    opacity: 0.92;
    line-height: 1.6;
    font-weight: 500;
}
.banner-thresholds b {
    font-family: var(--font-mono);
    font-weight: 700;
    background: rgba(255,255,255,.20);
    padding: 1px 6px;
    border-radius: 4px;
    margin: 0 1px;
}

/* ====================================================================
   关键指标卡片
   ==================================================================== */
.stats-grid {
    margin: 0 22px;
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 12px;
}
.stat-card {
    position: relative;
    background: var(--bg-surface-2);
    padding: 14px 14px 12px;
    border-radius: var(--r-md);
    border: 1px solid var(--border-default);
    box-shadow: var(--shadow-sm), var(--shadow-inset);
    overflow: hidden;
    transition: transform var(--t-med), box-shadow var(--t-med), border-color var(--t-med);
}
.stat-card::before {
    content: "";
    position: absolute;
    top: 0; left: 0; right: 0;
    height: 2px;
    background: var(--grad-brand);
    opacity: 0;
    transition: opacity var(--t-med);
}
.stat-card:hover {
    transform: translateY(-2px);
    border-color: var(--accent-cyan);
    box-shadow: var(--shadow-md), 0 0 0 1px var(--accent-cyan-soft);
}
.stat-card:hover::before { opacity: 1; }

#card-pm25::before { background: linear-gradient(90deg, #38bdf8, #06b6d4); }
#card-o3::before   { background: linear-gradient(90deg, #fb923c, #f59e0b); }

.stat-card-head {
    display: flex;
    align-items: center;
    gap: 7px;
    margin-bottom: 6px;
}
.stat-pulse {
    width: 7px; height: 7px;
    border-radius: 50%;
    flex-shrink: 0;
    position: relative;
}
.stat-pulse-pm25 {
    background: var(--color-pm25);
    box-shadow: 0 0 8px var(--color-pm25);
}
.stat-pulse-o3 {
    background: var(--color-o3);
    box-shadow: 0 0 8px var(--color-o3);
}
.stat-pulse::after {
    content: "";
    position: absolute;
    inset: -3px;
    border-radius: 50%;
    border: 1.5px solid currentColor;
    color: inherit;
    opacity: 0;
    animation: ping 2s infinite;
}
.stat-pulse-pm25::after { color: var(--color-pm25); }
.stat-pulse-o3::after   { color: var(--color-o3); }
@keyframes ping {
    0%   { transform: scale(0.6); opacity: 0.8; }
    100% { transform: scale(1.8); opacity: 0; }
}

.stat-name {
    font-size: 12px;
    color: var(--text-secondary);
    font-weight: 500;
    letter-spacing: 0.3px;
}
.stat-value-row {
    display: flex;
    align-items: baseline;
    gap: 4px;
}
.stat-value {
    font-family: var(--font-mono);
    font-size: 30px;
    font-weight: 700;
    color: var(--text-primary);
    line-height: 1.1;
    letter-spacing: -0.5px;
    font-variant-numeric: tabular-nums;
}
.stat-unit {
    font-size: 11px;
    color: var(--text-tertiary);
    font-weight: 500;
}
.stat-status {
    margin-top: 8px;
    font-size: 11px;
    padding: 3px 9px;
    border-radius: var(--r-pill);
    display: inline-block;
    font-weight: 600;
    letter-spacing: 0.3px;
    background: var(--bg-surface-3);
    color: var(--text-tertiary);
    border: 1px solid var(--border-default);
}
.stat-status.ok {
    background: rgba(16,185,129,.14);
    color: #34d399;
    border-color: rgba(16,185,129,.32);
}
.stat-status.over {
    background: rgba(239,68,68,.14);
    color: #f87171;
    border-color: rgba(239,68,68,.32);
}

/* ====================================================================
   数据质量条
   ==================================================================== */
.data-quality {
    margin: 14px 22px;
    padding: 10px 14px;
    background: var(--bg-surface-2);
    border-radius: var(--r-md);
    border: 1px solid var(--border-default);
    box-shadow: var(--shadow-sm);
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
}
.dq-item {
    display: flex;
    align-items: center;
    gap: 8px;
    flex: 1;
}
.dq-icon {
    width: 26px; height: 26px;
    border-radius: var(--r-sm);
    background: var(--accent-cyan-soft);
    color: var(--accent-cyan);
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}
.dq-text {
    display: flex;
    align-items: baseline;
    gap: 6px;
    font-size: 12px;
    color: var(--text-secondary);
    flex-wrap: wrap;
}
.dq-text b {
    font-family: var(--font-mono);
    font-weight: 700;
    font-size: 15px;
    color: var(--accent-cyan);
    letter-spacing: 0.3px;
}
.dq-unit {
    font-size: 11px;
    color: var(--text-tertiary);
}
.dq-sep {
    width: 1px;
    height: 24px;
    background: var(--border-default);
}

/* ====================================================================
   Section 标题
   ==================================================================== */
.section-title {
    margin: 20px 22px 10px;
    font-size: 13px;
    font-weight: 600;
    color: var(--text-primary);
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
    letter-spacing: 0.3px;
}
.section-title-text {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    color: var(--text-primary);
}
.section-title-text svg { color: var(--accent-cyan); }
.section-hint {
    font-size: 11.5px;
    color: var(--text-tertiary);
    font-weight: 500;
    font-family: var(--font-mono);
    padding: 2px 8px;
    background: var(--bg-surface-2);
    border-radius: var(--r-sm);
    border: 1px solid var(--border-default);
}

/* --- ECharts 容器 --- */
.chart-wrap {
    margin: 0 22px;
    background: var(--bg-surface-1);
    border: 1px solid var(--border-default);
    border-radius: var(--r-md);
    padding: 8px;
    box-shadow: var(--shadow-sm), var(--shadow-inset);
}
#chart {
    background: transparent;
    width: 100%;
}

/* ====================================================================
   LLM 对话区
   ==================================================================== */
.llm-select {
    font-size: 11.5px;
    padding: 4px 8px;
    padding-right: 24px;
    border: 1px solid var(--border-default);
    border-radius: var(--r-sm);
    background: var(--bg-surface-2);
    color: var(--text-primary);
    cursor: pointer;
    appearance: none;
    -webkit-appearance: none;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='10' viewBox='0 0 24 24' fill='none' stroke='%2394a3b8' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right 7px center;
    transition: all var(--t-fast);
}
.llm-select:hover {
    border-color: var(--accent-cyan);
    background-color: var(--bg-surface-3);
}
.llm-select option {
    background: var(--bg-surface-2);
    color: var(--text-primary);
}

.llm-quick-asks {
    margin: 0 22px 10px;
    display: flex;
    gap: 6px;
    flex-wrap: wrap;
}
.quick-ask {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    font-size: 11.5px;
    padding: 6px 11px;
    background: var(--bg-surface-2);
    border: 1px solid var(--border-default);
    border-radius: var(--r-pill);
    color: var(--text-secondary);
    font-weight: 500;
    transition: all var(--t-fast);
}
.quick-ask:hover {
    background: var(--grad-brand-soft);
    color: var(--text-primary);
    border-color: var(--accent-cyan);
    transform: translateY(-1px);
    box-shadow: 0 4px 12px rgba(6,182,212,.20);
}
.quick-ask:hover svg { color: var(--accent-cyan); }
.quick-ask:active { transform: translateY(0); }
.quick-ask svg { color: var(--text-tertiary); transition: color var(--t-fast); }

/* --- 消息容器 --- */
.llm-messages {
    margin: 0 22px;
    max-height: 320px;
    overflow-y: auto;
    background: var(--bg-surface-1);
    border: 1px solid var(--border-default);
    border-radius: var(--r-md);
    padding: 12px;
    font-size: 13px;
    line-height: 1.65;
    box-shadow: inset 0 2px 6px rgba(0,0,0,.18);
    scroll-behavior: smooth;
}
.llm-messages:empty { display: none; }

.llm-msg {
    padding: 10px 12px;
    border-radius: var(--r-md);
    margin-bottom: 8px;
    white-space: pre-wrap;
    word-break: break-word;
    animation: msgIn 280ms cubic-bezier(.2,.7,.3,1) both;
    position: relative;
    border: 1px solid transparent;
}
.llm-msg:last-child { margin-bottom: 0; }
@keyframes msgIn {
    from { opacity: 0; transform: translateY(6px); }
    to   { opacity: 1; transform: translateY(0); }
}

.llm-msg.user {
    background: linear-gradient(135deg, rgba(59,130,246,.16) 0%, rgba(6,182,212,.10) 100%);
    border-color: rgba(59,130,246,.32);
    border-left: 3px solid var(--accent-blue);
}
.llm-msg.assistant {
    background: var(--bg-surface-2);
    border-color: var(--border-default);
    border-left: 3px solid var(--accent-cyan);
}
.llm-msg.error {
    background: rgba(239,68,68,.10);
    border-color: rgba(239,68,68,.32);
    border-left: 3px solid var(--status-danger);
    color: #fca5a5;
}

.llm-msg .msg-role {
    font-size: 10.5px;
    font-weight: 700;
    color: var(--accent-cyan);
    margin-bottom: 5px;
    letter-spacing: 0.6px;
    text-transform: uppercase;
    display: inline-flex;
    align-items: center;
    gap: 6px;
}
.llm-msg.user .msg-role { color: #60a5fa; }
.llm-msg.user .msg-role::before {
    content: ""; width: 6px; height: 6px; border-radius: 50%;
    background: #60a5fa;
}
.llm-msg.assistant .msg-role::before {
    content: ""; width: 6px; height: 6px; border-radius: 50%;
    background: var(--accent-cyan);
    box-shadow: 0 0 6px var(--accent-cyan);
}
.llm-msg.error .msg-role { color: #fca5a5; }

.llm-msg .msg-body {
    color: var(--text-primary);
    font-size: 13px;
    line-height: 1.7;
}
.llm-msg.error .msg-body { color: #fca5a5; }

/* --- 输入区 --- */
.llm-input-row {
    margin: 10px 22px 6px;
    display: flex;
    gap: 8px;
    align-items: stretch;
}
#llm-input {
    flex: 1;
    padding: 10px 12px;
    background: var(--bg-surface-1);
    border: 1px solid var(--border-default);
    border-radius: var(--r-md);
    color: var(--text-primary);
    font-family: inherit;
    font-size: 13px;
    line-height: 1.5;
    resize: vertical;
    min-height: 44px;
    max-height: 200px;
    transition: all var(--t-fast);
    box-shadow: inset 0 1px 2px rgba(0,0,0,.18);
}
#llm-input::placeholder { color: var(--text-tertiary); }
#llm-input:hover { border-color: var(--border-strong); }
#llm-input:focus {
    outline: none;
    border-color: var(--accent-cyan);
    background: var(--bg-surface-2);
    box-shadow: 0 0 0 3px var(--accent-cyan-soft), inset 0 1px 2px rgba(0,0,0,.18);
}

.llm-send {
    align-self: stretch;
    min-width: 76px;
    padding: 0 16px;
    background: var(--grad-brand);
    color: #fff;
    border-radius: var(--r-md);
    font-size: 13px;
    font-weight: 600;
    letter-spacing: 0.5px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    box-shadow: 0 4px 12px rgba(6,182,212,.36), inset 0 1px 0 rgba(255,255,255,.18);
    transition: all var(--t-fast);
    position: relative;
    overflow: hidden;
}
.llm-send::before {
    content: "";
    position: absolute;
    inset: 0;
    background: linear-gradient(135deg, rgba(255,255,255,.12), transparent 60%);
    opacity: 0;
    transition: opacity var(--t-fast);
}
.llm-send:hover:not(:disabled) {
    transform: translateY(-1px);
    box-shadow: 0 6px 16px rgba(6,182,212,.48), inset 0 1px 0 rgba(255,255,255,.22);
}
.llm-send:hover:not(:disabled)::before { opacity: 1; }
.llm-send:hover:not(:disabled) .llm-send-icon { transform: translateX(2px); }
.llm-send:active:not(:disabled) { transform: translateY(0); }
.llm-send:disabled {
    background: var(--bg-surface-3);
    color: var(--text-tertiary);
    cursor: not-allowed;
    box-shadow: none;
}
.llm-send-icon { transition: transform var(--t-fast); }

.llm-hint {
    margin: 0 22px 18px;
    font-size: 11px;
    color: var(--text-tertiary);
    display: flex;
    align-items: center;
    gap: 6px;
}
.llm-hint kbd {
    display: inline-block;
    padding: 1px 6px;
    background: var(--bg-surface-2);
    border: 1px solid var(--border-default);
    border-bottom-width: 2px;
    border-radius: 4px;
    font-family: var(--font-mono);
    font-size: 10.5px;
    color: var(--text-secondary);
    font-weight: 600;
}

/* ====================================================================
   Toast
   ==================================================================== */
#toast {
    position: fixed;
    top: 80px;
    left: 50%;
    transform: translateX(-50%);
    background: var(--bg-surface-2);
    color: var(--text-primary);
    padding: 12px 22px;
    border-radius: var(--r-md);
    border: 1px solid var(--border-default);
    box-shadow: var(--shadow-lg);
    z-index: 3000;
    font-size: 13px;
    font-weight: 500;
    animation: toastIn 280ms cubic-bezier(.2,.7,.3,1);
    backdrop-filter: blur(16px);
}
@keyframes toastIn {
    from { opacity: 0; transform: translate(-50%, -10px); }
    to   { opacity: 1; transform: translate(-50%, 0); }
}

/* ====================================================================
   响应式微调（中小屏幕）
   ==================================================================== */
@media (max-width: 1280px) {
    #sidebar { width: 420px; }
    .topbar-controls { gap: 12px; }
    .ctrl-group-hour { min-width: 200px; }
    #hour-slider { width: 110px; }
    .brand-sub { display: none; }
}
@media (max-width: 1024px) {
    #sidebar { width: 380px; }
    .stat-value { font-size: 26px; }
}

/* ====================================================================
   ============== v2 增量：三栏布局 + 折叠 + 多卡片 + AI 历史 ==========
   ==================================================================== */

/* ---------- 三栏布局重写 ---------- */
#layout {
    display: flex;
    align-items: stretch;
    gap: 0;
}
.side-panel {
    width: 500px;
    flex-shrink: 0;
    background: linear-gradient(180deg, rgba(248,250,252,0.62) 0%, rgba(248,250,252,0.78) 100%);
    backdrop-filter: blur(14px);
    -webkit-backdrop-filter: blur(14px);
    border: 1px solid var(--border-subtle);
    display: flex;
    flex-direction: column;
    overflow: hidden;
    transition: width var(--t-med);
}
#sidebar-left  { border-right: 1px solid var(--border-subtle); border-left: none; }
#sidebar-right { border-left: 1px solid var(--border-subtle); border-right: none; width: 520px; }
.side-panel.hidden { display: none !important; }

/* ---------- 面板头 ---------- */
.panel-head {
    flex-shrink: 0;
    padding: 14px 18px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    background: linear-gradient(180deg, rgba(241,245,249,0.88) 0%, rgba(255,255,255,0.5) 100%);
    border-bottom: 1px solid var(--border-subtle);
    box-shadow: inset 0 1px 0 rgba(255,255,255,.03);
}
.panel-head-title {
    display: flex; align-items: center; gap: 9px;
    font-size: 13px; font-weight: 700; color: var(--text-primary);
    letter-spacing: 0.4px;
    text-transform: uppercase;
}
.panel-head-title svg {
    color: var(--accent-cyan);
    filter: drop-shadow(0 0 6px rgba(6,182,212,.55));
}
.panel-head-actions {
    display: flex; align-items: center; gap: 8px;
}
.panel-collapse-btn {
    width: 28px; height: 28px;
    border-radius: var(--r-sm);
    color: var(--text-secondary);
    background: rgba(148,163,184,0.08);
    border: 1px solid var(--border-subtle);
    display: inline-flex; align-items: center; justify-content: center;
    transition: all var(--t-fast);
}
.panel-collapse-btn:hover {
    background: var(--accent-cyan-soft);
    color: var(--accent-cyan);
    border-color: var(--accent-cyan);
}

.panel-body {
    flex: 1;
    overflow-y: auto;
    overflow-x: hidden;
}

/* ---------- 折叠后的窄条 ---------- */
.side-stub {
    position: fixed;
    top: 72px;
    width: 32px; height: 76px;
    background: linear-gradient(180deg, rgba(255,255,255,.92), rgba(255,255,255,.78));
    backdrop-filter: blur(12px);
    border: 1px solid var(--border-default);
    color: var(--accent-cyan);
    display: flex; align-items: center; justify-content: center;
    z-index: 800;
    box-shadow: var(--shadow-lg);
    transition: all var(--t-fast);
    cursor: pointer;
}
.side-stub:hover {
    background: var(--accent-cyan-soft);
    color: #fff;
    width: 38px;
}
#sidebar-left-stub  { left: 0;  border-left: none;  border-radius: 0 var(--r-md) var(--r-md) 0; }
#sidebar-right-stub { right: 0; border-right: none; border-radius: var(--r-md) 0 0 var(--r-md); }

/* ---------- 站点空状态（适配新左栏） ---------- */
#sidebar-left .sidebar-empty {
    padding: 50px 30px;
    height: 100%;
    display: flex; flex-direction: column;
    align-items: center; justify-content: center;
    text-align: center;
}

/* ---------- 卡片折叠 ---------- */
.card {
    margin: 14px 16px 0;
    background: linear-gradient(180deg, rgba(255,255,255,.55) 0%, rgba(255,255,255,.42) 100%);
    border: 1px solid var(--border-subtle);
    border-radius: var(--r-md);
    overflow: hidden;
    transition: border-color var(--t-fast);
}
.card:last-child { margin-bottom: 18px; }
.card:hover { border-color: var(--border-default); }

.card-head {
    padding: 11px 14px;
    display: flex; align-items: center; justify-content: space-between;
    cursor: pointer;
    user-select: none;
    background: linear-gradient(90deg, rgba(6,182,212,.04), transparent 40%);
    transition: background var(--t-fast);
}
.card-head:hover { background: rgba(6,182,212,.08); }
.card-head-title {
    display: flex; align-items: center; gap: 8px;
    font-size: 12.5px; font-weight: 600;
    color: var(--text-primary);
    letter-spacing: 0.3px;
}
.card-head-title svg { color: var(--accent-cyan); opacity: .9; }
.card-head-title .section-hint {
    font-size: 11px; color: var(--text-tertiary); font-weight: 500; margin-left: 4px;
    font-family: var(--font-mono);
}
.caret {
    color: var(--text-tertiary);
    font-size: 10px;
    transition: transform var(--t-med);
}
.card.collapsed .caret { transform: rotate(-90deg); }

.card-body {
    padding: 4px 14px 14px;
    border-top: 1px solid var(--border-subtle);
    max-height: 1200px;
    overflow: hidden;
    transition: max-height var(--t-med), padding var(--t-med);
}
.card.collapsed .card-body {
    max-height: 0;
    padding-top: 0;
    padding-bottom: 0;
    border-top-color: transparent;
}

/* ---------- 覆盖旧卡片样式（适配新容器） ---------- */
.card .pollution-banner { margin: 8px 0; }
.card .stats-grid { margin: 8px 0; grid-template-columns: 1fr 1fr; gap: 10px; }
.card .data-quality { margin: 10px 0 0; }
.card #chart-wrap, .card .chart-wrap { margin: 4px 0 0; }

/* ---------- 当日多污染物 7 小卡 ---------- */
.overview-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 8px;
    margin: 8px 0 12px;
}
.overview-cell {
    padding: 9px 8px;
    background: rgba(255,255,255,.55);
    border: 1px solid var(--border-subtle);
    border-radius: var(--r-sm);
    text-align: center;
    transition: all var(--t-fast);
    position: relative;
    overflow: hidden;
}
.overview-cell::before {
    content: "";
    position: absolute; top: 0; left: 0; right: 0; height: 2px;
    background: linear-gradient(90deg, transparent, var(--accent-cyan), transparent);
    opacity: 0; transition: opacity var(--t-fast);
}
.overview-cell:hover {
    background: rgba(6,182,212,.08);
    border-color: var(--accent-cyan);
    transform: translateY(-1px);
}
.overview-cell:hover::before { opacity: 0.6; }
.overview-cell.over {
    background: linear-gradient(180deg, rgba(239,68,68,.16), rgba(239,68,68,.04));
    border-color: rgba(239,68,68,0.45);
}
.overview-cell.over::before {
    background: linear-gradient(90deg, transparent, #ef4444, transparent);
    opacity: 1;
}
.overview-cell.no-data { opacity: .55; }
.ovc-label {
    font-size: 10.5px; color: var(--text-tertiary);
    letter-spacing: 0.4px; text-transform: uppercase;
    font-weight: 600;
    margin-bottom: 2px;
}
.ovc-value {
    font-size: 17px; font-weight: 700; font-family: var(--font-mono);
    color: var(--text-primary); line-height: 1.1;
}
.overview-cell.over .ovc-value { color: #fca5a5; }
.ovc-unit {
    font-size: 9.5px; color: var(--text-tertiary); margin-top: 2px;
}
.overview-empty {
    grid-column: 1 / -1;
    padding: 24px; text-align: center;
    color: var(--text-tertiary); font-size: 12px;
}

/* ---------- 城市排名 ---------- */
.city-rank {
    margin-top: 10px;
    padding: 9px 12px;
    background: linear-gradient(90deg, rgba(99,102,241,.15), rgba(6,182,212,.08));
    border: 1px solid rgba(99,102,241,0.3);
    border-radius: var(--r-sm);
    display: flex; align-items: center; gap: 8px;
    font-size: 12px;
    color: var(--text-primary);
}
.city-rank svg { color: var(--accent-indigo); flex-shrink: 0; }
.city-rank b { color: var(--accent-cyan); font-family: var(--font-mono); }

/* ---------- 图表容器美化 ---------- */
.chart-wrap {
    margin: 4px 0 0;
    padding: 8px 0;
    background: radial-gradient(ellipse 80% 60% at 50% 0%, rgba(6,182,212,.06), transparent 70%);
    border-radius: var(--r-sm);
}

/* ====================================================================
   AI 智能分析（右栏）
   ==================================================================== */

/* ---------- Tab 切换 ---------- */
.ai-tabs {
    padding: 10px 14px 0;
    display: flex; align-items: center; gap: 6px;
    border-bottom: 1px solid var(--border-subtle);
}
.ai-tab {
    display: inline-flex; align-items: center; gap: 5px;
    padding: 8px 14px 10px;
    font-size: 12px; font-weight: 600;
    color: var(--text-tertiary);
    border-bottom: 2px solid transparent;
    transition: all var(--t-fast);
    position: relative;
}
.ai-tab svg { opacity: .7; }
.ai-tab:hover { color: var(--text-secondary); }
.ai-tab.active {
    color: var(--accent-cyan);
    border-bottom-color: var(--accent-cyan);
}
.ai-tab.active svg { opacity: 1; }
.ai-tab-action {
    margin-left: auto;
    margin-bottom: 6px;
    width: 26px; height: 26px;
    border-radius: var(--r-sm);
    color: var(--accent-cyan);
    background: var(--accent-cyan-soft);
    border: 1px solid rgba(6,182,212,.3);
    display: inline-flex; align-items: center; justify-content: center;
    transition: all var(--t-fast);
}
.ai-tab-action:hover {
    background: var(--accent-cyan); color: #fff;
    box-shadow: 0 0 12px rgba(6,182,212,.5);
}
.ai-history-badge {
    display: inline-block;
    min-width: 16px; padding: 0 5px; height: 16px; line-height: 16px;
    border-radius: 8px; font-size: 10px; font-weight: 700;
    background: var(--accent-cyan); color: #0f172a;
    text-align: center;
}

.ai-pane {
    display: flex; flex-direction: column;
    height: calc(100% - 50px);
}
.ai-pane.hidden { display: none; }

/* ---------- 当前对话上下文条 ---------- */
.ai-context-bar {
    margin: 12px 16px 8px;
    padding: 8px 12px;
    background: linear-gradient(90deg, rgba(6,182,212,.1), rgba(99,102,241,.05));
    border: 1px solid var(--border-subtle);
    border-left: 3px solid var(--accent-cyan);
    border-radius: var(--r-sm);
    display: flex; align-items: center; gap: 8px;
    font-size: 11.5px;
    color: var(--text-secondary);
}
.ai-context-bar svg { color: var(--accent-cyan); flex-shrink: 0; }
#ai-context-station {
    color: var(--text-primary); font-weight: 600;
    overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
    max-width: 240px;
}
.ai-context-sep { color: var(--text-tertiary); opacity: .5; }
#ai-context-time {
    margin-left: auto;
    color: var(--text-tertiary); font-size: 10.5px; font-family: var(--font-mono);
}

/* ---------- AI Pane 内的元素调整 ---------- */
#ai-chat-pane .llm-quick-asks { margin: 8px 16px; }
#ai-chat-pane .llm-messages {
    margin: 0 16px; flex: 1; min-height: 0;
    background: rgba(248,250,252,.5);
    max-height: none;
}
#ai-chat-pane .llm-input-row { margin: 10px 16px 16px; }

/* ---------- 历史 Tab ---------- */
.ai-history-toolbar {
    margin: 12px 16px 10px;
    display: flex; gap: 8px;
}
#ai-history-search {
    flex: 1;
    padding: 7px 12px;
    background: rgba(255,255,255,.6);
    border: 1px solid var(--border-default);
    border-radius: var(--r-sm);
    color: var(--text-primary);
    font-size: 12px;
}
#ai-history-search::placeholder { color: var(--text-tertiary); }
#ai-history-search:focus {
    outline: none;
    border-color: var(--accent-cyan);
    background: var(--bg-surface-2);
}
#ai-history-clear {
    width: 32px; height: 32px;
    border-radius: var(--r-sm);
    color: var(--text-secondary);
    background: rgba(239,68,68,0.08);
    border: 1px solid rgba(239,68,68,0.2);
    display: inline-flex; align-items: center; justify-content: center;
    transition: all var(--t-fast);
}
#ai-history-clear:hover {
    background: var(--status-danger); color: #fff;
    border-color: var(--status-danger);
}

.ai-history-list {
    flex: 1;
    overflow-y: auto;
    padding: 0 12px 16px;
}
.ai-history-empty {
    padding: 60px 20px; text-align: center;
    color: var(--text-tertiary); font-size: 12px;
}
.ai-history-group { margin-top: 12px; }
.ai-history-group-title {
    padding: 6px 8px;
    font-size: 10.5px; font-weight: 700;
    color: var(--text-tertiary);
    text-transform: uppercase; letter-spacing: 0.5px;
    border-bottom: 1px dashed var(--border-subtle);
    margin-bottom: 6px;
}
.ai-history-item {
    margin: 6px 0;
    padding: 10px 12px;
    background: rgba(255,255,255,.6);
    border: 1px solid var(--border-subtle);
    border-left: 3px solid transparent;
    border-radius: var(--r-sm);
    cursor: pointer;
    transition: all var(--t-fast);
    position: relative;
}
.ai-history-item:hover {
    background: rgba(6,182,212,.08);
    border-color: var(--border-default);
    transform: translateX(3px);
}
.ai-history-item.active {
    border-left-color: var(--accent-cyan);
    background: linear-gradient(90deg, rgba(6,182,212,.14), rgba(255,255,255,.6));
}
.ahi-head {
    display: flex; align-items: center; justify-content: space-between;
    margin-bottom: 4px;
}
.ahi-station {
    font-size: 12px; font-weight: 600; color: var(--text-primary);
    overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
    max-width: 280px;
}
.ahi-time {
    font-size: 10.5px; color: var(--text-tertiary);
    font-family: var(--font-mono);
}
.ahi-preview {
    font-size: 11.5px; color: var(--text-secondary);
    line-height: 1.4;
    overflow: hidden; text-overflow: ellipsis;
    display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical;
}
.ahi-meta {
    display: flex; justify-content: space-between; align-items: center;
    margin-top: 6px;
    font-size: 10.5px; color: var(--text-tertiary);
}
.ahi-del {
    color: var(--text-tertiary);
    font-size: 11px;
    padding: 2px 6px;
    border-radius: 3px;
    transition: all var(--t-fast);
}
.ahi-del:hover {
    background: var(--status-danger); color: #fff;
}

/* ====================================================================
   地图顶部全国均值 banner
   ==================================================================== */
.map-topbar {
    position: absolute; top: 16px; left: 50%; transform: translateX(-50%);
    z-index: 500;
    padding: 8px 18px;
    border-radius: var(--r-pill);
    font-size: 12.5px;
    color: var(--text-primary);
    box-shadow: var(--shadow-lg);
    white-space: nowrap;
    border: 1px solid rgba(6,182,212,0.3);
}
.map-topbar b { color: var(--accent-cyan); font-weight: 600; }
.map-topbar .topbar-num {
    font-family: var(--font-mono); font-weight: 700;
    color: #fff;
    font-size: 13.5px;
}

/* ====================================================================
   响应式：窄屏自动收
   ==================================================================== */
@media (max-width: 1400px) {
    .side-panel { width: 460px; }
    #sidebar-right { width: 460px; }
}
@media (max-width: 1200px) {
    .side-panel { width: 400px; }
    #sidebar-right { width: 420px; }
    .overview-grid { grid-template-columns: repeat(3, 1fr); }
}

/* ====================================================================
   v3：中间纵向分栏（地图 + 底部时序图）
   ==================================================================== */
.middle-col {
    flex: 1;
    min-width: 0;
    display: flex;
    flex-direction: column;
    background: var(--bg-base);
}
#map-wrap {
    flex: 1;
    min-height: 240px;
}

/* ---------- 底部时序图面板 ---------- */
.bottom-panel {
    flex-shrink: 0;
    height: 340px;
    background:
        radial-gradient(ellipse 1200px 400px at 20% 100%, rgba(56,189,248,.08), transparent 70%),
        radial-gradient(ellipse 1000px 400px at 85% 0%, rgba(251,146,60,.07), transparent 70%),
        linear-gradient(180deg, rgba(255,255,255,0.92) 0%, rgba(248,250,252,0.96) 100%);
    border-top: 1px solid var(--border-default);
    box-shadow: 0 -8px 32px rgba(0,0,0,.4), inset 0 1px 0 rgba(255,255,255,.04);
    display: flex;
    flex-direction: column;
    overflow: hidden;
    transition: height var(--t-med);
}
.bottom-panel.collapsed { height: 54px; }
.bottom-panel.collapsed .bp-body { opacity: 0; pointer-events: none; }
.bottom-panel.collapsed #bp-collapse-btn svg { transform: rotate(180deg); }

/* 头部 */
.bp-head {
    flex-shrink: 0;
    height: 54px;
    padding: 0 24px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 20px;
    border-bottom: 1px solid var(--border-subtle);
    background:
        linear-gradient(180deg, rgba(241,245,249,.72), rgba(255,255,255,.42)),
        linear-gradient(90deg, rgba(56,189,248,.06), transparent 40%, rgba(251,146,60,.06));
}
.bp-head-left {
    display: flex; align-items: center; gap: 14px;
    min-width: 0;
}
.bp-icon {
    width: 36px; height: 36px;
    border-radius: var(--r-md);
    background: linear-gradient(135deg, #38bdf8 0%, #fb923c 100%);
    color: #0f172a;
    display: flex; align-items: center; justify-content: center;
    box-shadow: 0 4px 12px rgba(56,189,248,.35), inset 0 1px 0 rgba(255,255,255,.25);
    flex-shrink: 0;
}
.bp-title-block { min-width: 0; }
.bp-title {
    font-size: 14px; font-weight: 700;
    color: var(--text-primary);
    letter-spacing: 0.4px;
    line-height: 1.2;
}
.bp-sub {
    font-size: 11.5px;
    color: var(--text-tertiary);
    margin-top: 2px;
    overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
    max-width: 600px;
}

.bp-head-right {
    display: flex; align-items: center; gap: 16px;
}

/* 头部小统计 */
.bp-stats {
    display: flex; align-items: center; gap: 14px;
}
.bp-stats.hidden { display: none; }
.bp-stat {
    padding: 6px 14px;
    background: rgba(255,255,255,.7);
    border: 1px solid var(--border-subtle);
    border-radius: var(--r-md);
    min-width: 140px;
}
.bp-stat-pm25 { border-left: 3px solid var(--color-pm25); }
.bp-stat-o3   { border-left: 3px solid var(--color-o3); }
.bp-stat-row {
    display: flex; align-items: center; gap: 6px;
    font-size: 11px;
    color: var(--text-tertiary);
    font-weight: 600; letter-spacing: 0.4px;
    text-transform: uppercase;
    margin-bottom: 2px;
}
.bp-stat-dot {
    width: 6px; height: 6px; border-radius: 50%;
    box-shadow: 0 0 8px currentColor;
}
.bp-stat-pm25 .bp-stat-dot { background: var(--color-pm25); color: var(--color-pm25); }
.bp-stat-o3 .bp-stat-dot { background: var(--color-o3); color: var(--color-o3); }
.bp-stat-vals {
    display: flex; gap: 12px;
}
.bp-stat-vals > span {
    display: flex; align-items: baseline; gap: 4px;
    font-family: var(--font-mono);
    font-size: 14px; font-weight: 700;
    color: var(--text-primary);
}
.bp-stat-mini {
    font-size: 9.5px;
    color: var(--text-tertiary);
    font-weight: 600;
    font-family: var(--font-sans);
    letter-spacing: 0.4px;
    text-transform: uppercase;
}

.bp-collapse-btn {
    width: 32px; height: 32px;
    border-radius: var(--r-sm);
    color: var(--text-secondary);
    background: rgba(148,163,184,0.08);
    border: 1px solid var(--border-subtle);
    display: inline-flex; align-items: center; justify-content: center;
    transition: all var(--t-fast);
}
.bp-collapse-btn:hover {
    background: var(--accent-cyan-soft);
    color: var(--accent-cyan);
    border-color: var(--accent-cyan);
}
.bp-collapse-btn svg { transition: transform var(--t-med); }

.bp-body {
    flex: 1; min-height: 0;
    padding: 8px 8px 4px;
    transition: opacity var(--t-med);
}
.bp-body #chart {
    width: 100%; height: 100%;
}

/* 窄屏：底部统计收起 */
@media (max-width: 1400px) {
    .bp-stat { min-width: 120px; padding: 5px 10px; }
}
@media (max-width: 1100px) {
    .bp-stats { display: none; }
}

/* ====================================================================
   v4：地图深色底图 + marker 美化 + 底图切换 + 协调浮窗
   ==================================================================== */

/* 地图容器深色背景（防底图加载白闪） */
.leaflet-container {
    background: #0a0f1e !important;
    outline: none;
}
body[data-basemap="light"] .leaflet-container { background: #f0f4f8 !important; }

/* zoom 按钮深色 */
.leaflet-control-zoom a {
    background: rgba(255,255,255,.85) !important;
    color: #1e293b !important;
    border: 1px solid var(--border-default) !important;
    backdrop-filter: blur(8px);
    transition: all .15s;
}
.leaflet-control-zoom a:hover {
    background: var(--accent-cyan) !important;
    color: #0f172a !important;
    border-color: var(--accent-cyan) !important;
}
body[data-basemap="light"] .leaflet-control-zoom a {
    background: rgba(255,255,255,.95) !important;
    color: #334155 !important;
    border-color: rgba(0,0,0,.12) !important;
}

.leaflet-control-attribution {
    background: rgba(255,255,255,.7) !important;
    color: #94a3b8 !important;
    font-size: 10.5px !important;
    padding: 2px 8px !important;
    border-radius: 4px 0 0 0 !important;
    border: none !important;
}
.leaflet-control-attribution a { color: #06b6d4 !important; }
body[data-basemap="light"] .leaflet-control-attribution {
    background: rgba(255,255,255,.9) !important;
    color: #475569 !important;
}

/* ============ 站点 marker 发光效果 ============ */
.aq-site-marker {
    transition: filter .15s, stroke-width .15s;
    filter: drop-shadow(0 0 3px currentColor);
}
.aq-site-marker:hover {
    filter: drop-shadow(0 0 8px currentColor);
    cursor: pointer;
}

/* 选中态：脉冲外圈 */
.aq-selected-ring {
    pointer-events: none;
    animation: aq-pulse 1.8s ease-in-out infinite;
}
@keyframes aq-pulse {
    0%   { stroke-opacity: 0.8;  stroke-width: 2;   r: 14; }
    50%  { stroke-opacity: 0.35; stroke-width: 1.5; r: 22; }
    100% { stroke-opacity: 0.8;  stroke-width: 2;   r: 14; }
}

/* ============ 自定义 cluster ============ */
.aq-cluster-wrap { background: transparent !important; }
.aq-cluster-wrap .marker-cluster-small,
.aq-cluster-wrap .marker-cluster-medium,
.aq-cluster-wrap .marker-cluster-large { display: none; }

.aq-cluster {
    width: 100%; height: 100%;
    display: flex; align-items: center; justify-content: center;
    border-radius: 50%;
    color: #fff;
    font-family: var(--font-mono);
    font-weight: 700;
    font-size: 12px;
    border: 2px solid rgba(255,255,255,0.22);
    box-shadow: 0 4px 14px rgba(0,0,0,.5), inset 0 1px 0 rgba(255,255,255,.18);
    backdrop-filter: blur(2px);
    transition: transform var(--t-fast);
}
.aq-cluster:hover { transform: scale(1.1); }
.aq-cluster-ms {
    background: radial-gradient(circle at 30% 30%, rgba(6,182,212,.95), rgba(8,145,178,.85));
    font-size: 11px;
}
.aq-cluster-md {
    background: radial-gradient(circle at 30% 30%, rgba(99,102,241,.95), rgba(67,56,202,.88));
    font-size: 13px;
}
.aq-cluster-lg {
    background: radial-gradient(circle at 30% 30%, rgba(251,146,60,.95), rgba(234,88,12,.9));
    font-size: 14px;
}
.aq-cluster span { line-height: 1; }

/* 浅色底图下 cluster 边框暗一些 */
body[data-basemap="light"] .aq-cluster { border-color: rgba(0,0,0,0.18); box-shadow: 0 4px 14px rgba(0,0,0,.25); }

/* ============ 底图切换 toolbar ============ */
.basemap-toolbar {
    position: absolute;
    top: 16px; right: 16px;
    z-index: 700;
    display: flex;
    gap: 4px;
    padding: 4px;
    background: rgba(255,255,255,.78);
    backdrop-filter: blur(14px) saturate(140%);
    border: 1px solid var(--border-default);
    border-radius: var(--r-md);
    box-shadow: var(--shadow-lg);
}
.basemap-btn {
    width: 30px; height: 30px;
    border-radius: var(--r-sm);
    color: var(--text-secondary);
    background: transparent;
    display: inline-flex; align-items: center; justify-content: center;
    transition: all var(--t-fast);
}
.basemap-btn:hover { color: var(--text-primary); background: rgba(148,163,184,.12); }
.basemap-btn.active {
    background: var(--grad-brand);
    color: #fff;
    box-shadow: 0 2px 8px rgba(6,182,212,.45);
}

/* ============ 浅色底图模式下 浮窗自适应 ============ */
body[data-basemap="light"] #legend,
body[data-basemap="light"] #summary-card {
    background: rgba(255,255,255,.95) !important;
    color: #334155 !important;
    border: 1px solid rgba(0,0,0,.1) !important;
}
body[data-basemap="light"] #legend .legend-title,
body[data-basemap="light"] #summary-card .summary-title { color: #1e293b !important; }
body[data-basemap="light"] #legend .legend-item,
body[data-basemap="light"] #summary-card .summary-row { color: #475569 !important; }
body[data-basemap="light"] #summary-card .summary-row b { color: #0f172a !important; }
body[data-basemap="light"] #map-topbar {
    background: rgba(255,255,255,.95) !important;
    color: #1e293b !important;
    border-color: rgba(0,0,0,.12) !important;
}
body[data-basemap="light"] #map-topbar b { color: #0891b2 !important; }
body[data-basemap="light"] #map-topbar .topbar-num { color: #0f172a !important; }
body[data-basemap="light"] .basemap-toolbar {
    background: rgba(255,255,255,.95);
    border-color: rgba(0,0,0,.1);
}
body[data-basemap="light"] .basemap-btn { color: #64748b; }
body[data-basemap="light"] .basemap-btn:hover { color: #0f172a; background: rgba(0,0,0,.06); }

/* ============ 卫星模式：标签可读性 ============ */
body[data-basemap="satellite"] .leaflet-container { background: #1a1a1a !important; }

/* ============ 微调地图区域 padding（与深色 UI 一体化） ============ */
#map-wrap {
    background: var(--bg-base);
    overflow: hidden;
}

/* ====================================================================
   v5：字号整体上调（用户反馈"看不清"）+ 文案明确
   ==================================================================== */

html, body { font-size: 15px; }

/* topbar */
.brand-title { font-size: 16.5px; }
.brand-sub   { font-size: 12px; }
.ctrl-label  { font-size: 12px; }
.radio-btn   { font-size: 13.5px; padding: 6px 16px; }
#topbar input[type="date"] { font-size: 13.5px; padding: 7px 12px; }
#hour-label  { font-size: 16px; min-width: 52px; }
#status      { font-size: 14px; }

/* 面板头 */
.panel-head-title { font-size: 14.5px; }
.panel-head { padding: 16px 18px; }

/* 站点头 */
.sb-station-name { font-size: 22px; }
.city-tag, .code-tag, .ref-tag { font-size: 13px; padding: 3px 10px; }
.sb-coord { font-size: 13px; }

/* 卡片头部 */
.card-head-title { font-size: 14px; }
.card-head-title .section-hint { font-size: 12px; }
.card-head { padding: 13px 16px; }
.card-body { padding: 6px 16px 16px; }

/* 4 类污染 Banner */
.banner-label { font-size: 13px; }
.banner-type  { font-size: 26px; margin-bottom: 10px; }
.banner-thresholds { font-size: 12.5px; line-height: 1.6; }

/* 关键指标 */
.stat-name { font-size: 13px; }
.stat-value { font-size: 32px; }
.stat-unit { font-size: 12px; }
.stat-status { font-size: 13px; padding: 4px 10px; }

/* 数据完整性条 */
.data-quality { font-size: 13px; }
.dq-text b { font-size: 14px; }

/* 当日多污染物 7 卡 */
.ovc-label { font-size: 11.5px; }
.ovc-value { font-size: 20px; }
.ovc-unit  { font-size: 10.5px; }

/* 城市排名 */
.city-rank { font-size: 13px; padding: 10px 14px; }

/* AI 区域 */
.ai-tab { font-size: 13px; padding: 9px 16px 11px; }
.ai-context-bar { font-size: 12.5px; padding: 10px 14px; }
#ai-context-station { font-size: 13.5px; }
.quick-ask { font-size: 13px; padding: 6px 12px; }
.llm-msg .msg-role { font-size: 12px; margin-bottom: 5px; }
.llm-msg .msg-body { font-size: 14.5px; line-height: 1.75; }
.llm-msg { padding: 10px 12px; margin-bottom: 8px; }
#llm-input { font-size: 14px; padding: 10px 12px; }

/* AI 历史 */
.ahi-station { font-size: 13px; }
.ahi-preview { font-size: 12.5px; line-height: 1.5; }
.ahi-time    { font-size: 11.5px; }
.ahi-meta    { font-size: 11.5px; }
#ai-history-search { font-size: 13px; padding: 8px 12px; }
.ai-history-group-title { font-size: 11.5px; }

/* 底部时序图 */
.bp-title { font-size: 15.5px; }
.bp-sub   { font-size: 12.5px; }
.bp-stat-label { font-size: 12px; }
.bp-stat-vals > span { font-size: 16px; }
.bp-stat-mini  { font-size: 10.5px; }

/* 地图浮窗 */
#legend, #summary-card, .legend-item, .summary-row { font-size: 12.5px; }
.legend-title, .summary-title { font-size: 13.5px; }
.map-topbar { font-size: 13.5px; padding: 9px 22px; }
.map-topbar .topbar-num { font-size: 15px; }

/* ====================================================================
   v6：当日判定 banner-yearly + stat-yearly 小字对比
   ==================================================================== */

/* Banner 内的全年综合行 */
.banner-yearly {
    margin-top: 10px;
    padding: 6px 10px;
    background: rgba(0, 0, 0, 0.18);
    border-radius: 6px;
    font-size: 12px;
    color: rgba(255, 255, 255, 0.85);
    display: flex; align-items: center; gap: 6px;
}
.banner-yearly-label {
    font-size: 11px;
    color: rgba(255, 255, 255, 0.65);
    letter-spacing: 0.4px;
}
.banner-yearly.hidden { display: none; }

/* stat-card 底部的全年对比小字 */
.stat-yearly {
    margin-top: 6px;
    padding-top: 6px;
    border-top: 1px dashed var(--border-subtle);
    font-size: 11.5px;
    color: var(--text-tertiary);
    text-align: center;
}
.stat-yearly:empty { display: none; }
.stat-yearly b {
    color: var(--text-secondary);
    font-family: var(--font-mono);
    font-weight: 600;
}

/* 日期 hint 字号 */
.section-hint {
    font-family: var(--font-mono);
    font-size: 11.5px;
    color: var(--text-tertiary);
    margin-left: 6px;
}

/* ====================================================================
   v7：图例/全国分布 从地图移到左栏卡片
   ==================================================================== */

/* 嵌入卡片后取消 absolute 定位 + 玻璃浮窗效果 */
.card #legend.legend-inline,
.card #summary-card.summary-inline {
    position: static !important;
    bottom: auto !important;
    left: auto !important;
    right: auto !important;
    background: transparent !important;
    backdrop-filter: none !important;
    -webkit-backdrop-filter: none !important;
    border: none !important;
    box-shadow: none !important;
    padding: 0 !important;
    min-width: 0 !important;
    width: 100% !important;
}

/* legend 在卡片里改成 2 列 grid（更紧凑） */
.legend-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 6px 14px;
}
.legend-grid .legend-item {
    margin: 0;
    padding: 4px 0;
    font-size: 12.5px;
    color: var(--text-secondary);
}
.legend-grid .swatch {
    width: 16px; height: 16px;
}

/* summary 在卡片里 */
.summary-inline .summary-row {
    padding: 5px 0;
    font-size: 12.5px;
}
.summary-inline .summary-row b { font-size: 13.5px; color: var(--text-primary); }
.summary-inline .summary-bar {
    height: 9px;
    border-radius: 3px;
    box-shadow: inset 0 1px 0 rgba(255,255,255,.15);
}

/* 卡片头部图例 title 颜色（PM2.5/O3 切换时颜色变） */
.card-head-title #legend-title {
    color: var(--text-primary);
}

/* sidebar-empty 不再撑 100% 高（让上方卡片有位置） */
.sidebar-empty,
#sidebar-left .sidebar-empty {
    height: auto !important;
    min-height: 180px;
    padding: 28px 24px !important;
}
.empty-illustration svg { width: 80px; height: 80px; }
.empty-title { font-size: 15px; margin-bottom: 6px; }
.empty-desc { font-size: 12.5px; line-height: 1.55; }
.empty-hint { margin-top: 12px; font-size: 11px; }

/* ====================================================================
   v8：彻底浅色主题修正 + 字号继续上调
   ==================================================================== */

/* 全局字号 +1（从 15 升 16） */
html, body { font-size: 16px; }

/* topbar：品牌 logo 浅色调整 */
.brand-logo {
    background: var(--grad-brand);
    box-shadow: 0 4px 12px rgba(8,145,178,.32), inset 0 1px 0 rgba(255,255,255,.4);
    color: #ffffff;
}
.brand-title {
    /* 渐变文字 */
    background: var(--grad-brand);
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
    color: var(--accent-blue);
    font-size: 17px;
}
.brand-sub { color: var(--text-secondary); font-size: 12.5px; }

/* topbar 控件 */
.ctrl-label { color: var(--text-secondary); font-size: 12.5px; }
.radio-group {
    background: var(--bg-surface-2);
    border-color: var(--border-default);
}
.radio-btn { color: var(--text-secondary); font-size: 14px; }
.radio-btn:hover { color: var(--text-primary); }
.radio-btn:has(input:checked) {
    background: var(--grad-brand);
    color: #fff;
    box-shadow: 0 2px 8px rgba(8,145,178,.35);
}

#topbar input[type="date"] {
    background: var(--bg-surface-1);
    color: var(--text-primary);
    border-color: var(--border-default);
    color-scheme: light;
    font-size: 14px;
}
#topbar input[type="date"]:hover {
    border-color: var(--accent-cyan);
    background: var(--bg-surface-2);
}

#hour-slider {
    background: var(--bg-surface-3);
}
#hour-slider::-webkit-slider-thumb,
#hour-slider::-moz-range-thumb {
    background: var(--grad-brand);
    box-shadow: 0 2px 6px rgba(8,145,178,.4);
}
#hour-label { color: var(--text-primary); font-size: 16.5px; }
#status { font-size: 14.5px; }

/* 面板头/卡片头 */
.panel-head {
    background: linear-gradient(180deg, #ffffff 0%, #f8fafc 100%);
    box-shadow: inset 0 -1px 0 var(--border-subtle);
}
.panel-head-title { color: var(--text-primary); font-size: 15px; }
.panel-head-title svg { color: var(--accent-cyan); filter: none; }
.panel-collapse-btn, .bp-collapse-btn {
    background: var(--bg-surface-2);
    border-color: var(--border-default);
    color: var(--text-secondary);
}
.panel-collapse-btn:hover, .bp-collapse-btn:hover {
    background: var(--accent-cyan-soft);
    color: var(--accent-cyan);
    border-color: var(--accent-cyan);
}

/* 卡片 */
.card {
    background: var(--bg-surface-1);
    border: 1px solid var(--border-default);
    box-shadow: var(--shadow-sm);
}
.card:hover { border-color: var(--accent-cyan); box-shadow: var(--shadow-md); }
.card-head {
    background: linear-gradient(90deg, rgba(8,145,178,.04), transparent 40%);
}
.card-head:hover { background: rgba(8,145,178,.08); }
.card-head-title { color: var(--text-primary); font-size: 14.5px; }
.card-head-title svg { color: var(--accent-cyan); }
.section-hint { color: var(--text-tertiary); font-size: 12px; }

/* 站点头 */
.sb-header {
    background: linear-gradient(180deg, #ffffff, #f8fafc);
    border-bottom: 1px solid var(--border-subtle);
}
.sb-station-name { color: var(--text-primary); font-size: 24px; }
.city-tag {
    background: var(--accent-blue);
    color: #fff;
    font-size: 13.5px;
}
.code-tag {
    background: var(--bg-surface-3);
    color: var(--text-secondary);
    font-size: 13.5px;
}
.ref-tag { background: var(--status-warning); color: #fff; font-size: 13.5px; }
.sb-coord { color: var(--text-tertiary); font-size: 13.5px; }
.sb-icon {
    background: var(--accent-cyan-soft);
    color: var(--accent-cyan);
    border-radius: var(--r-md);
    width: 40px; height: 40px;
    display: flex; align-items: center; justify-content: center;
}

/* 关键指标卡 */
.stat-card {
    background: var(--bg-surface-1);
    border: 1px solid var(--border-default);
    box-shadow: var(--shadow-sm);
}
.stat-card:hover { border-color: var(--accent-cyan); box-shadow: var(--shadow-md); }
.stat-name { color: var(--text-secondary); font-size: 13.5px; }
.stat-value { color: var(--text-primary); font-size: 34px; }
.stat-unit { color: var(--text-tertiary); font-size: 12.5px; }

.stat-status { font-size: 13.5px; }
.stat-status.ok {
    background: rgba(5,150,105,.12);
    color: var(--status-success);
}
.stat-status.over {
    background: rgba(220,38,38,.12);
    color: var(--status-danger);
}

.data-quality {
    background: var(--bg-surface-2);
    border: 1px solid var(--border-subtle);
    color: var(--text-secondary);
    font-size: 13.5px;
}
.dq-text b { color: var(--text-primary); }

/* 多污染物 overview-cell */
.overview-cell {
    background: var(--bg-surface-2);
    border-color: var(--border-subtle);
}
.overview-cell:hover {
    background: rgba(8,145,178,.06);
    border-color: var(--accent-cyan);
}
.overview-cell.over {
    background: rgba(220,38,38,.08);
    border-color: rgba(220,38,38,.3);
}
.overview-cell.over .ovc-value { color: var(--status-danger); }
.ovc-label { color: var(--text-tertiary); font-size: 12px; }
.ovc-value { color: var(--text-primary); font-size: 21px; }
.ovc-unit { color: var(--text-tertiary); font-size: 11px; }

/* 城市排名 */
.city-rank {
    background: linear-gradient(90deg, rgba(79,70,229,.10), rgba(8,145,178,.05));
    border-color: rgba(79,70,229,.25);
    color: var(--text-primary);
    font-size: 13.5px;
}

/* AI 右栏 */
.ai-tabs { border-bottom: 1px solid var(--border-subtle); }
.ai-tab { color: var(--text-tertiary); font-size: 13.5px; }
.ai-tab.active { color: var(--accent-cyan); border-bottom-color: var(--accent-cyan); }
.ai-tab-action {
    background: var(--accent-cyan-soft);
    border: 1px solid rgba(8,145,178,.25);
    color: var(--accent-cyan);
}
.ai-tab-action:hover {
    background: var(--accent-cyan); color: #fff;
}
.ai-history-badge { background: var(--accent-cyan); color: #fff; }

.ai-context-bar {
    background: linear-gradient(90deg, rgba(8,145,178,.08), rgba(79,70,229,.04));
    border: 1px solid var(--border-subtle);
    border-left: 3px solid var(--accent-cyan);
    color: var(--text-secondary);
    font-size: 13px;
}
#ai-context-station { color: var(--text-primary); font-size: 14px; }
#ai-context-time { color: var(--text-tertiary); font-size: 12px; }

.quick-ask {
    background: var(--bg-surface-2);
    border-color: var(--border-default);
    color: var(--text-secondary);
    font-size: 13.5px;
}
.quick-ask:hover {
    background: var(--accent-cyan); color: #fff;
}

.llm-messages {
    background: var(--bg-surface-1);
    border: 1px solid var(--border-default);
}
.llm-msg { font-size: 15px; }
.llm-msg.user {
    background: rgba(37,99,235,.08);
    border-left: 3px solid var(--accent-blue);
}
.llm-msg.assistant {
    background: rgba(245,158,11,.06);
    border-left: 3px solid var(--status-warning);
}
.llm-msg .msg-role { color: var(--text-secondary); font-size: 12.5px; }
.llm-msg.user .msg-role { color: var(--accent-blue); }
.llm-msg.assistant .msg-role { color: var(--status-warning); }
.llm-msg .msg-body { color: var(--text-primary); font-size: 15px; line-height: 1.8; }

#llm-input {
    background: var(--bg-surface-1);
    border-color: var(--border-default);
    color: var(--text-primary);
    font-size: 14.5px;
}
#llm-input:focus { border-color: var(--accent-cyan); }
.llm-send {
    background: var(--grad-brand);
    color: #fff;
}
.llm-send:hover:not(:disabled) {
    background: linear-gradient(135deg, #0e7490 0%, #1d4ed8 100%);
}

/* AI 历史 */
.ai-history-toolbar { border-bottom: 1px solid var(--border-subtle); padding-bottom: 10px; }
#ai-history-search {
    background: var(--bg-surface-1);
    border: 1px solid var(--border-default);
    color: var(--text-primary);
    font-size: 13.5px;
}
.ai-history-item {
    background: var(--bg-surface-1);
    border: 1px solid var(--border-default);
}
.ai-history-item:hover {
    background: rgba(8,145,178,.05);
}
.ai-history-item.active {
    background: linear-gradient(90deg, rgba(8,145,178,.10), #ffffff);
    border-left-color: var(--accent-cyan);
}
.ahi-station { color: var(--text-primary); font-size: 13.5px; }
.ahi-preview { color: var(--text-secondary); font-size: 13px; }
.ahi-time, .ahi-meta { color: var(--text-tertiary); font-size: 12px; }
.ai-history-group-title { color: var(--text-tertiary); font-size: 12px; }
.ai-history-empty { color: var(--text-tertiary); font-size: 13px; }

/* 底部时序图 */
.bottom-panel {
    background:
        radial-gradient(ellipse 1200px 400px at 20% 100%, rgba(2,132,199,.05), transparent 70%),
        radial-gradient(ellipse 1000px 400px at 85% 0%, rgba(234,88,12,.04), transparent 70%),
        linear-gradient(180deg, #ffffff 0%, #f8fafc 100%);
    border-top: 1px solid var(--border-default);
    box-shadow: 0 -4px 20px rgba(15,23,42,.05);
}
.bp-head {
    background: rgba(255,255,255,.85);
    border-bottom: 1px solid var(--border-subtle);
}
.bp-icon {
    background: linear-gradient(135deg, var(--color-pm25), var(--color-o3));
    color: #fff;
    box-shadow: 0 4px 12px rgba(2,132,199,.3), inset 0 1px 0 rgba(255,255,255,.4);
}
.bp-title { color: var(--text-primary); font-size: 16px; }
.bp-sub { color: var(--text-secondary); font-size: 13px; }
.bp-stat {
    background: var(--bg-surface-1);
    border: 1px solid var(--border-default);
    box-shadow: var(--shadow-sm);
}
.bp-stat-row { color: var(--text-tertiary); font-size: 12.5px; }
.bp-stat-vals > span { color: var(--text-primary); font-size: 16.5px; }
.bp-stat-mini { color: var(--text-tertiary); font-size: 11px; }

/* legend / summary inline 在卡片内 */
.legend-grid .legend-item, .summary-inline .summary-row {
    color: var(--text-secondary);
    font-size: 13.5px;
}
.summary-inline .summary-row b { color: var(--text-primary); font-size: 14.5px; }

/* 地图 zoom 控件 浅色 */
.leaflet-control-zoom a {
    background: rgba(255,255,255,.95) !important;
    color: var(--text-primary) !important;
    border: 1px solid var(--border-default) !important;
}
.leaflet-control-zoom a:hover {
    background: var(--accent-cyan) !important;
    color: #fff !important;
}
.leaflet-control-attribution {
    background: rgba(255,255,255,.92) !important;
    color: var(--text-secondary) !important;
    font-size: 11px !important;
}

/* basemap toolbar 浅色 */
.basemap-toolbar {
    background: rgba(255,255,255,.95);
    border-color: var(--border-default);
}
.basemap-btn { color: var(--text-secondary); }
.basemap-btn:hover { color: var(--text-primary); background: rgba(15,23,42,.06); }
.basemap-btn.active {
    background: var(--grad-brand); color: #fff;
}

/* map-topbar pill */
.map-topbar {
    background: rgba(255,255,255,.95) !important;
    color: var(--text-primary) !important;
    border: 1px solid var(--border-default) !important;
    font-size: 14px;
}
.map-topbar b { color: var(--accent-cyan); }
.map-topbar .topbar-num { color: var(--text-primary); font-size: 15.5px; }

/* side-stub 折叠条 浅色 */
.side-stub {
    background: rgba(255,255,255,.95);
    border-color: var(--border-default);
    color: var(--accent-cyan);
}
.side-stub:hover {
    background: var(--accent-cyan); color: #fff;
}

/* selected ring 颜色对比 */
.aq-selected-ring { stroke: var(--accent-cyan) !important; }

/* cluster icon 文字色 */
.aq-cluster { color: #fff; }

/* 状态点 */
.status-dot { box-shadow: 0 0 8px currentColor; }

/* toast */
#toast { background: rgba(15,23,42,.9); color: #fff; font-size: 14px; }

/* 卫星模式下 attribution 文字色 */
body[data-basemap="satellite"] .leaflet-control-attribution {
    background: rgba(0,0,0,.55) !important;
    color: #fff !important;
}

/* ====================================================================
   v9：所在省综合等级 sub-banner（在主 banner 下方）
   ==================================================================== */

.province-banner {
    margin: 12px 0 4px;
    padding: 12px 14px;
    background: linear-gradient(90deg, rgba(8,145,178,.06), rgba(79,70,229,.04));
    border: 1px solid var(--border-default);
    border-left: 4px solid var(--accent-cyan);
    border-radius: var(--r-md);
    transition: all var(--t-fast);
}
.province-banner.hidden { display: none; }
.province-banner:hover { box-shadow: var(--shadow-md); }

.pb-head {
    display: flex; align-items: center; gap: 8px;
    font-size: 12.5px;
    color: var(--text-tertiary);
    font-weight: 600;
    letter-spacing: 0.3px;
    margin-bottom: 8px;
}
.pb-head svg { color: var(--accent-cyan); }
#pb-province-label { color: var(--text-secondary); }

.pb-body {
    display: flex; align-items: center; gap: 12px;
    flex-wrap: wrap;
}
.pb-type-badge {
    display: inline-block;
    padding: 5px 14px;
    border-radius: var(--r-pill);
    color: #ffffff;
    font-size: 14px;
    font-weight: 700;
    background: #94a3b8;
    box-shadow: 0 2px 8px rgba(15,23,42,.15), inset 0 1px 0 rgba(255,255,255,.2);
    letter-spacing: 0.4px;
}
.pb-meta {
    font-size: 13px;
    color: var(--text-secondary);
}
.pb-meta b {
    color: var(--text-primary);
    font-family: var(--font-mono);
    font-weight: 700;
}

/* ====================================================================
   v10：背景调暗（不刺眼）+ 删 overview 卡片相关样式（无用）
   ==================================================================== */

/* 整体背景层次调和：底 base / 侧栏稍亮 / 卡片更亮 */
html, body {
    background: var(--bg-base);
}
.side-panel {
    background: linear-gradient(180deg, #ecf0f5 0%, #e8edf3 100%) !important;
    border-color: rgba(15,23,42,.08);
}
#topbar {
    background: linear-gradient(180deg, #f4f7fa 0%, #ecf0f5 100%) !important;
    border-bottom: 1px solid rgba(15,23,42,.08);
}
.panel-head {
    background: linear-gradient(180deg, #ecf0f5 0%, #e8edf3 100%) !important;
    border-bottom: 1px solid rgba(15,23,42,.08);
}
.card {
    background: var(--bg-surface-1) !important;
    border: 1px solid rgba(15,23,42,.07) !important;
    box-shadow: 0 1px 3px rgba(15,23,42,.04) !important;
}
.card:hover {
    border-color: rgba(8,145,178,.35) !important;
    box-shadow: 0 4px 12px rgba(15,23,42,.08) !important;
}
.sb-header {
    background: linear-gradient(180deg, #f4f7fa, #eaeff5) !important;
}
.stat-card {
    background: #fafbfc !important;
    border: 1px solid rgba(15,23,42,.08) !important;
}
.data-quality {
    background: #fafbfc !important;
}
.bottom-panel {
    background:
        radial-gradient(ellipse 1200px 400px at 20% 100%, rgba(2,132,199,.05), transparent 70%),
        radial-gradient(ellipse 1000px 400px at 85% 0%, rgba(234,88,12,.04), transparent 70%),
        linear-gradient(180deg, #f4f7fa 0%, #eaeff5 100%) !important;
    border-top: 1px solid rgba(15,23,42,.08);
}
.bp-head {
    background: rgba(244,247,250,.85) !important;
    border-bottom: 1px solid rgba(15,23,42,.06);
}
.bp-stat {
    background: #fafbfc !important;
}
.llm-messages {
    background: #fafbfc !important;
}
.ai-history-item {
    background: #fafbfc !important;
}
.ai-history-item.active {
    background: linear-gradient(90deg, rgba(8,145,178,.10), #fafbfc) !important;
}
#ai-history-search, #llm-input {
    background: #ffffff !important;
}
.overview-cell {
    background: #fafbfc !important;
}

/* ====================================================================
   v11：省界 GeoJSON 染色 + 切换按钮 + tooltip
   ==================================================================== */

/* 省界 path 渲染样式（由 JS style 函数注入，这里只给 tooltip） */
.aq-prov-tooltip {
    background: rgba(255,255,255,0.97) !important;
    color: var(--text-primary) !important;
    border: 1px solid var(--border-default) !important;
    border-radius: 6px !important;
    box-shadow: 0 4px 14px rgba(15,23,42,.15) !important;
    padding: 8px 12px !important;
    font-size: 12.5px !important;
}
.aq-prov-tooltip::before { border-top-color: rgba(255,255,255,0.97) !important; }

/* 省界 toggle 按钮 + 分隔条 */
.basemap-divider {
    width: 1px; height: 20px;
    background: var(--border-default);
    margin: 0 2px;
}
.prov-toggle { position: relative; }
.prov-toggle.active {
    background: var(--grad-brand);
    color: #fff;
    box-shadow: 0 2px 8px rgba(8,145,178,.4);
}
.prov-toggle.active::after {
    content: "";
    position: absolute;
    bottom: -2px; right: -2px;
    width: 8px; height: 8px;
    background: var(--status-success);
    border: 1.5px solid #fff;
    border-radius: 50%;
}

/* ====================================================================
   v12：legend 浮动 mini + 站点 tooltip + 去掉省点击焦点框
   ==================================================================== */

/* 删除 SVG path 点击焦点框（省界 / marker） */
.leaflet-interactive:focus,
.leaflet-interactive:focus-visible {
    outline: none !important;
    stroke-dasharray: none !important;
}
path.leaflet-interactive { outline: none; }

/* 浮在地图右下角的紧凑 legend */
.legend-mini {
    position: absolute;
    bottom: 16px;
    right: 16px;
    z-index: 600;
    background: rgba(255,255,255,.96);
    backdrop-filter: blur(8px);
    border: 1px solid var(--border-default);
    border-radius: var(--r-md);
    box-shadow: var(--shadow-md);
    padding: 10px 14px;
    max-width: 260px;
}
.legend-mini-title {
    font-size: 12.5px;
    font-weight: 700;
    color: var(--text-primary);
    margin-bottom: 6px;
    padding-bottom: 4px;
    border-bottom: 1px dashed var(--border-subtle);
}
.legend-mini-row {
    display: flex; flex-direction: column; gap: 3px;
}
.legend-mini-item {
    display: flex; align-items: center; gap: 8px;
    font-size: 11.5px;
    color: var(--text-secondary);
}
.legend-mini-item .swatch {
    width: 12px; height: 12px;
    border-radius: 50%;
    border: 1px solid rgba(15,23,42,.2);
    flex-shrink: 0;
}
.legend-mini-item.legend-item-muted { opacity: .7; }

/* 站点 tooltip 浅色版 */
.aq-site-tooltip {
    background: rgba(255,255,255,.97) !important;
    color: var(--text-primary) !important;
    border: 1px solid var(--border-default) !important;
    border-radius: 6px !important;
    box-shadow: 0 4px 14px rgba(15,23,42,.15) !important;
    padding: 8px 12px !important;
    font-family: var(--font-sans) !important;
    line-height: 1.4 !important;
}
.aq-site-tooltip::before { border-top-color: rgba(255,255,255,.97) !important; }

/* Leaflet tooltip 默认间距适配 */
.leaflet-tooltip { padding: 8px 12px; }

/* ====================================================================
   v13：侧栏宽度调小 + Splitter 拖拽 + mini-bar 7 天趋势
   ==================================================================== */

/* 侧栏宽度调小（之前 500 / 520 / 340 → 400 / 420 / 280） */
.side-panel { width: 400px; }
#sidebar-right { width: 420px; }
.bottom-panel { height: 280px; }

@media (max-width: 1400px) {
    .side-panel { width: 360px; }
    #sidebar-right { width: 380px; }
    .bottom-panel { height: 260px; }
}
@media (max-width: 1200px) {
    .side-panel { width: 320px; }
    #sidebar-right { width: 340px; }
    .bottom-panel { height: 240px; }
}

/* Splitter 拖拽条 */
.splitter {
    flex-shrink: 0;
    z-index: 100;
    background: transparent;
    transition: background var(--t-fast);
    position: relative;
}
.splitter-v {           /* 垂直分隔条（左右） */
    width: 5px;
    cursor: col-resize;
}
.splitter-h {           /* 水平分隔条（上下） */
    height: 5px;
    cursor: row-resize;
    width: 100%;
}
.splitter:hover {
    background: rgba(8,145,178,0.45);
}
.splitter-v::after {
    content: "";
    position: absolute;
    top: 50%; left: 50%;
    transform: translate(-50%, -50%);
    width: 2px; height: 32px;
    background: rgba(15,23,42,0.18);
    border-radius: 1px;
    transition: all var(--t-fast);
}
.splitter-h::after {
    content: "";
    position: absolute;
    top: 50%; left: 50%;
    transform: translate(-50%, -50%);
    width: 32px; height: 2px;
    background: rgba(15,23,42,0.18);
    border-radius: 1px;
    transition: all var(--t-fast);
}
.splitter:hover::after {
    background: #ffffff;
    width: 3px; height: 48px;
}
.splitter-h:hover::after { height: 3px; width: 48px; }

/* 整栏折叠时隐藏对应 splitter */
#sidebar-left.hidden ~ #splitter-left,
#sidebar-right.hidden + #splitter-right,
#splitter-left + #sidebar-left.hidden { display: none; }

/* mini bar chart */
.mini-bar-wrap {
    margin-top: 10px;
    padding-top: 8px;
    border-top: 1px dashed var(--border-subtle);
}
.mini-bar-label {
    font-size: 10.5px;
    color: var(--text-tertiary);
    letter-spacing: 0.3px;
    text-transform: uppercase;
    margin-bottom: 4px;
    font-weight: 600;
}
.mini-bar {
    width: 100%;
    height: 70px;
}

/* ====================================================================
   v14：mini-bar 改 HTML 横向版 + 统计数字 + 阈值线
   ==================================================================== */

/* 覆盖 v13 的固定高 mini-bar */
.mini-bar {
    width: 100%;
    height: auto !important;
    min-height: 0 !important;
    background: transparent;
}

.mini7-stats {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 4px 2px 8px;
    border-bottom: 1px dashed var(--border-subtle);
    margin-bottom: 6px;
}
.mini7-stat-item {
    display: inline-flex;
    flex-direction: column;
    align-items: center;
    gap: 0;
    flex: 1;
}
.mini7-stat-label {
    font-size: 10.5px;
    color: var(--text-tertiary);
    letter-spacing: 0.3px;
    font-weight: 600;
}
.mini7-stat-item b {
    font-size: 14px;
    color: var(--text-primary);
    font-family: var(--font-mono);
    font-weight: 700;
    line-height: 1.2;
}
.mini7-stat-item b.over { color: var(--status-danger); }
.mini7-stat-item b.trend-up   { color: var(--status-danger); }
.mini7-stat-item b.trend-down { color: var(--status-success); }
.mini7-stat-item .mini7-stat-suffix {
    font-size: 9.5px;
    color: var(--text-tertiary);
    margin-left: 2px;
    font-family: var(--font-mono);
}

.mini7-rows {
    display: flex;
    flex-direction: column;
    gap: 3px;
}
.mini7-row {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 2px 4px;
    border-radius: 4px;
    transition: background var(--t-fast);
}
.mini7-row:hover { background: rgba(8,145,178,0.06); }
.mini7-row.today {
    background: rgba(8,145,178,0.10);
    box-shadow: inset 0 0 0 1px rgba(8,145,178,0.18);
}
.mini7-date {
    font-size: 10.5px;
    color: var(--text-tertiary);
    font-family: var(--font-mono);
    min-width: 42px;
    flex-shrink: 0;
}
.mini7-row.today .mini7-date {
    color: var(--accent-cyan);
    font-weight: 600;
}
.mini7-track {
    flex: 1;
    height: 12px;
    background: rgba(15,23,42,0.05);
    border-radius: 6px;
    overflow: visible;
    position: relative;
}
.mini7-fill {
    height: 100%;
    border-radius: 6px;
    transition: width 0.5s ease;
    box-shadow: inset 0 1px 0 rgba(255,255,255,0.25);
}
.mini7-threshold {
    position: absolute;
    top: -2px;
    bottom: -2px;
    width: 1px;
    background: var(--status-danger);
    opacity: 0.6;
}
.mini7-threshold::after {
    content: "阈";
    position: absolute;
    top: -10px;
    left: 1px;
    font-size: 8px;
    color: var(--status-danger);
    background: var(--bg-surface-1);
    padding: 0 2px;
    border-radius: 2px;
}
.mini7-val {
    font-family: var(--font-mono);
    font-weight: 700;
    color: var(--text-primary);
    min-width: 38px;
    text-align: right;
    font-size: 12px;
}
.mini7-val.over { color: var(--status-danger); }

/* ====================================================================
   v15：当日 24h 6 格统计 + 默认尺寸再缩小
   ==================================================================== */

/* 默认侧栏/底部更紧凑 */
.side-panel { width: 340px; }
#sidebar-right { width: 360px; }
.bottom-panel { height: 220px; }

@media (max-width: 1500px) {
    .side-panel { width: 310px; }
    #sidebar-right { width: 330px; }
    .bottom-panel { height: 200px; }
}

/* 隐藏 v13/v14 残留 mini-bar 样式（如果浏览器还缓存了 HTML 里 mini-bar div） */
.mini-bar-wrap, .mini-bar, .mini7-stats, .mini7-rows { display: none !important; }

/* 当日 24h 6 格统计 */
.day-stats-wrap {
    margin-top: 10px;
    padding-top: 8px;
    border-top: 1px dashed var(--border-subtle);
}
.day-stats-label {
    font-size: 10.5px;
    color: var(--text-tertiary);
    letter-spacing: 0.3px;
    text-transform: uppercase;
    margin-bottom: 6px;
    font-weight: 600;
    text-align: center;
}
.day-stats-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 4px;
}
.ds-cell {
    background: rgba(15, 23, 42, 0.04);
    border-radius: 4px;
    padding: 6px 4px;
    text-align: center;
    transition: background var(--t-fast);
}
.ds-cell:hover { background: rgba(8, 145, 178, 0.10); }
.ds-name {
    font-size: 10px;
    color: var(--text-tertiary);
    font-weight: 600;
    letter-spacing: 0.3px;
}
.ds-val {
    font-size: 14px;
    color: var(--text-primary);
    font-family: var(--font-mono);
    font-weight: 700;
    line-height: 1.2;
    margin: 2px 0 1px;
}
.ds-sub {
    font-size: 9.5px;
    color: var(--text-tertiary);
    font-family: var(--font-mono);
}
.ds-max .ds-val { color: #dc2626; }
.ds-min .ds-val { color: #059669; }
.ds-over-over { background: rgba(220,38,38,0.10); }
.ds-over-over .ds-val { color: #dc2626; }
.ds-over-ok .ds-val { color: var(--status-success); }
.ds-empty {
    grid-column: 1 / -1;
    text-align: center;
    padding: 14px;
    color: var(--text-tertiary);
    font-size: 12px;
}

/* Card 2 关键值 + 6 格统计 在 340px 宽度时仍能放下 */
.stat-card { padding: 12px 10px; }
.stat-value { font-size: 28px; }

/* ====================================================================
   v16：当日 24h 统计 改为 list 风格（之前 grid 太挤被截字）
   ==================================================================== */

/* 覆盖 v15 grid 样式 */
.day-stats-grid {
    display: flex !important;
    flex-direction: column;
    gap: 2px;
}
.ds-cell, .ds-name, .ds-val, .ds-sub { display: none !important; }   /* 隐藏旧 grid */

/* 新 list 风格 */
.ds-row {
    display: grid;
    grid-template-columns: 8px 38px 1fr auto;
    align-items: center;
    gap: 6px;
    padding: 3px 5px;
    border-radius: 4px;
    font-size: 12px;
    line-height: 1.3;
    transition: background var(--t-fast);
}
.ds-row:hover { background: rgba(8, 145, 178, 0.08); }
.ds-dot {
    width: 6px; height: 6px;
    border-radius: 50%;
    background: var(--text-tertiary);
    opacity: 0.5;
}
.ds-row-max .ds-dot { background: #dc2626; opacity: 1; box-shadow: 0 0 4px #dc2626; }
.ds-row-min .ds-dot { background: #059669; opacity: 1; box-shadow: 0 0 4px #059669; }
.ds-row-over .ds-dot { background: #dc2626; opacity: 1; }
.ds-label {
    color: var(--text-secondary);
    font-weight: 600;
    font-size: 11.5px;
}
.ds-value {
    color: var(--text-primary);
    font-family: var(--font-mono);
    font-weight: 700;
    font-size: 13.5px;
    text-align: right;
}
.ds-row-max .ds-value { color: #dc2626; }
.ds-row-min .ds-value { color: #059669; }
.ds-row-over .ds-value { color: #dc2626; }
.ds-tot {
    color: var(--text-tertiary);
    font-weight: 500;
    font-size: 11px;
}
.ds-extra {
    color: var(--text-tertiary);
    font-size: 10.5px;
    font-family: var(--font-mono);
    margin-left: 4px;
    white-space: nowrap;
}
.ds-empty {
    text-align: center;
    padding: 14px;
    color: var(--text-tertiary);
    font-size: 12px;
}

/* day-stats-wrap 微调 */
.day-stats-wrap { margin-top: 8px; padding-top: 6px; }
.day-stats-label { margin-bottom: 4px; font-size: 10px; }

/* ====================================================================
   v17.2：紧凑默认 + 流式宽度 + 拖动条恢复 + 字号联动
   设计原则：
   1. 不用 !important —— 让 panel.js 内联 style 能覆盖（拖动生效）
   2. 默认值用 clamp 流式响应窗口
   3. 关键间距用 rem 跟随根字号变化
   4. 用更高特异度选择器（#id.class）压过前面规则
   ==================================================================== */

/* (a) 根字号流式：12 ~ 14.5px，所有 rem 元素自动跟随 */
html {
    font-size: clamp(12px, calc(10.5px + 0.18vw), 14.5px);
}

/* (b) 三栏默认：流式宽度（无 !important，拖动后会被 inline 覆盖） */
#sidebar-left.side-panel {
    width: clamp(280px, 19vw, 420px);
}
#sidebar-right.side-panel {
    width: clamp(300px, 20vw, 440px);
}

/* (c) 顶栏 + 底栏：紧凑 + 流式 */
#topbar {
    height: clamp(40px, 3.8vh, 50px);
}
.bottom-panel,
#bottom-panel {
    height: clamp(130px, 16vh, 200px);
}

/* (d) 中栏自动撑开 */
#middle, .middle-col, #map-wrap {
    flex: 1 1 0;
    min-width: 0;
}

/* (e) 关键修复：.stat-card 不裁断 + 间距 rem 联动 */
.stat-card {
    overflow: visible;
    padding: 0.55rem 0.5rem;
}

/* (f) .ds-row 列宽保护，数值列绝不消失 */
.ds-row {
    grid-template-columns: 6px minmax(0, 1fr) auto;
    gap: 5px;
    padding: 3px 4px;
    overflow: visible;
}
.ds-label {
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    font-size: 0.78rem;
}
.ds-value {
    flex-shrink: 0;
    white-space: nowrap;
    min-width: 3rem;
    text-align: right;
    font-size: 0.86rem;
}
.ds-extra {
    font-size: 0.7rem;
}
@media (max-width: 1280px) {
    .ds-extra { display: none; }
}

/* (g) .side-panel 内部 Y 滚兜底（防极端高度溢出） */
.side-panel {
    overflow: hidden auto;
}
.side-panel::-webkit-scrollbar { width: 6px; }
.side-panel::-webkit-scrollbar-thumb {
    background: rgba(148, 163, 184, 0.3);
    border-radius: 3px;
}

/* (h) 关键卡片字号 / 间距用 rem，整体跟随根字号缩放 */
.panel-head {
    padding: 0.6rem 0.9rem;
}
.panel-head-title {
    font-size: 0.82rem;
}
.stat-value {
    font-size: 1.6rem;
    line-height: 1.1;
}
.stat-label {
    font-size: 0.72rem;
}
.sb-station-name {
    font-size: 1rem;
}
.sb-coord {
    font-size: 0.72rem;
}
.banner-type {
    font-size: 0.85rem;
}
.banner-thresholds {
    font-size: 0.72rem;
}

/* (i) 分隔条加宽且更明显，方便用户拖（覆盖 2937-2941 默认） */
.splitter-v {
    width: 6px;
    background: rgba(100, 150, 200, 0.05);
    transition: background 0.15s;
}
.splitter-h {
    height: 6px;
    background: rgba(100, 150, 200, 0.05);
}
.splitter:hover {
    background: rgba(6, 182, 212, 0.35) !important;
}

/* ====================================================================
   v17.3：左栏顶部三大卡片紧凑化（针对截图反馈：banner 太大、标题换行、卡片拥挤）
   ==================================================================== */

/* (a) card-head 强制不换行 + 日期 hint 缩小 */
.card-head {
    padding: 0.45rem 0.75rem;
    min-height: 0;
}
.card-head-title {
    font-size: 0.82rem;
    flex-wrap: nowrap;
    min-width: 0;
    gap: 0.35rem;
}
.card-head-title > span:not(.section-hint) {
    flex-shrink: 1;
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.card-head-title .section-hint {
    font-size: 0.66rem;
    flex-shrink: 0;
    white-space: nowrap;
    margin-left: auto;
}

/* (b) 绿色 pollution-banner 大幅瘦身 */
.pollution-banner {
    margin: 0.35rem 0.55rem 0.4rem;
    padding: 0.55rem 0.7rem 0.6rem;
    border-radius: 0.55rem;
}
.banner-label-row { margin-bottom: 0.2rem; }
.banner-label {
    font-size: 0.6rem;
    letter-spacing: 0.4px;
}
.banner-type {
    font-size: 1.05rem;
    margin-bottom: 0.25rem;
    line-height: 1.15;
    letter-spacing: 0.2px;
}
.banner-thresholds {
    font-size: 0.66rem;
    line-height: 1.45;
}
.banner-thresholds b {
    padding: 0 0.25rem;
    margin: 0 1px;
}

/* (c) 综合判定 province-banner 紧凑 */
.province-banner {
    margin: 0.35rem 0.55rem 0.3rem;
    padding: 0.45rem 0.6rem;
    border-left-width: 3px;
    border-radius: 0.4rem;
}
.pb-head {
    font-size: 0.7rem;
    margin-bottom: 0.3rem;
    gap: 0.35rem;
}
.pb-body {
    gap: 0.5rem;
    flex-wrap: wrap;
}
.pb-type-badge {
    padding: 2px 0.55rem;
    font-size: 0.68rem;
    border-radius: 0.35rem;
}
.pb-meta {
    font-size: 0.68rem;
}

/* (d) 关键值 stats-grid 卡片瘦身 */
.stats-grid {
    margin: 0 0.55rem;
    gap: 0.45rem;
    grid-template-columns: 1fr 1fr;
}
.stat-card {
    padding: 0.55rem 0.5rem 0.45rem;
}
.stat-card-head {
    margin-bottom: 0.2rem;
    gap: 0.3rem;
}
.stat-name {
    font-size: 0.7rem;
}
.stat-value-row {
    gap: 0.25rem;
    align-items: baseline;
}
.stat-value {
    font-size: 1.35rem;
    line-height: 1.05;
}
.stat-unit {
    font-size: 0.65rem;
}
.stat-status {
    font-size: 0.65rem;
    margin-top: 0.15rem;
}

/* (e) day-stats-wrap 紧贴 */
.day-stats-wrap {
    margin-top: 0.3rem;
    padding-top: 0.25rem;
}
.day-stats-label {
    font-size: 0.6rem;
    margin-bottom: 0.15rem;
}

/* (f) data-quality 紧贴 */
.data-quality {
    margin: 0.35rem 0.55rem 0;
    padding: 0.3rem 0.5rem;
    font-size: 0.66rem;
}
.data-quality b { font-size: 0.78rem; }

/* (g) sidebar 头部缩小 */
.sb-station-name { font-size: 0.95rem; }
.sb-coord { font-size: 0.65rem; }
#sidebar-content > * { margin-top: 0.3rem; }

/* ====================================================================
   v17.4：右栏 Container Query —— 内容跟着右拖等比放大缩小
   原理：#sidebar-right 设为 inline-size container，
        所有内部元素的字号/padding/按钮尺寸用 cqw 单位
        cqw = container query width，1cqw = 容器宽度的 1%
        栏宽 400px → 1cqw=4px；拖到 600px → 1cqw=6px，所有元素同步等比放大
   ==================================================================== */

#sidebar-right {
    container-type: inline-size;
    container-name: rightbar;
}

/* (a) 顶栏：AI 智能分析 + DeepSeek 选择 + 折叠按钮 —— 不许换行 */
#sidebar-right .panel-head {
    padding: clamp(7px, 2cqw, 14px) clamp(9px, 2.6cqw, 16px);
    gap: clamp(4px, 1.5cqw, 10px);
    min-height: 0;
    flex-wrap: nowrap;
}
#sidebar-right .panel-head-title {
    font-size: clamp(11px, 3.2cqw, 17px);
    gap: clamp(4px, 1.4cqw, 9px);
    flex: 1 1 0;
    min-width: 0;
    overflow: hidden;
}
#sidebar-right .panel-head-title span {
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
#sidebar-right .panel-head-title svg {
    width: clamp(12px, 3.4cqw, 18px);
    height: clamp(12px, 3.4cqw, 18px);
    flex-shrink: 0;
}
#sidebar-right .panel-head-actions {
    gap: clamp(4px, 1.2cqw, 8px);
    flex-shrink: 0;
}
#sidebar-right .llm-select {
    font-size: clamp(10px, 2.7cqw, 13.5px);
    padding: clamp(3px, 0.9cqw, 7px) clamp(5px, 1.6cqw, 10px);
    max-width: 42%;
    min-width: 0;
    border-radius: clamp(4px, 1.2cqw, 8px);
}
#sidebar-right .panel-collapse-btn {
    width: clamp(22px, 6cqw, 30px);
    height: clamp(22px, 6cqw, 30px);
}
#sidebar-right .panel-collapse-btn svg {
    width: clamp(10px, 2.8cqw, 14px);
    height: clamp(10px, 2.8cqw, 14px);
}

/* (b) ai-tabs：当前对话 / 历史 / 加号 */
#sidebar-right .ai-tabs {
    padding: clamp(5px, 1.4cqw, 9px) clamp(8px, 2.4cqw, 14px);
    gap: clamp(4px, 1.2cqw, 8px);
}
#sidebar-right .ai-tab {
    font-size: clamp(11px, 2.8cqw, 13.5px);
    padding: clamp(4px, 1.2cqw, 8px) clamp(7px, 2cqw, 13px);
    gap: clamp(3px, 1cqw, 6px);
    border-radius: clamp(4px, 1.2cqw, 8px);
}
#sidebar-right .ai-tab svg {
    width: clamp(11px, 2.8cqw, 14px);
    height: clamp(11px, 2.8cqw, 14px);
}
#sidebar-right .ai-tab-action {
    width: clamp(22px, 5.8cqw, 30px);
    height: clamp(22px, 5.8cqw, 30px);
    border-radius: clamp(4px, 1.2cqw, 8px);
}
#sidebar-right .ai-tab-action svg {
    width: clamp(11px, 3cqw, 15px);
    height: clamp(11px, 3cqw, 15px);
}
#sidebar-right .ai-history-badge {
    font-size: clamp(9px, 2.2cqw, 11px);
    padding: 1px clamp(4px, 1.2cqw, 7px);
}

/* (c) 上下文 bar：万寿西宫（北京） */
#sidebar-right .ai-context-bar {
    font-size: clamp(10.5px, 2.6cqw, 13px);
    padding: clamp(5px, 1.5cqw, 9px) clamp(8px, 2.4cqw, 14px);
    gap: clamp(3px, 1cqw, 6px);
}
#sidebar-right .ai-context-bar svg {
    width: clamp(10px, 2.5cqw, 13px);
    height: clamp(10px, 2.5cqw, 13px);
}

/* (d) 3 个快捷按钮：原因分析 / 防治建议 / 同省对比 */
#sidebar-right .llm-quick-asks {
    padding: clamp(6px, 1.8cqw, 11px) clamp(8px, 2.4cqw, 14px);
    gap: clamp(4px, 1.2cqw, 8px);
    flex-wrap: wrap;
}
#sidebar-right .quick-ask {
    font-size: clamp(10px, 2.5cqw, 12.5px);
    padding: clamp(4px, 1.2cqw, 8px) clamp(7px, 1.8cqw, 12px);
    gap: clamp(3px, 0.8cqw, 5px);
    border-radius: clamp(4px, 1.2cqw, 8px);
}
#sidebar-right .quick-ask svg {
    width: clamp(10px, 2.5cqw, 13px);
    height: clamp(10px, 2.5cqw, 13px);
}

/* (e) 消息区域 */
#sidebar-right .llm-messages {
    padding: clamp(6px, 1.8cqw, 11px) clamp(8px, 2.4cqw, 14px);
    font-size: clamp(11px, 2.6cqw, 13.5px);
    line-height: 1.5;
}

/* (f) 输入框 + 发送按钮（关键：发送按钮不许撑成大蓝块） */
#sidebar-right .llm-input-row {
    padding: clamp(6px, 1.8cqw, 12px) clamp(8px, 2.4cqw, 14px);
    gap: clamp(4px, 1.4cqw, 9px);
    align-items: stretch;
}
#sidebar-right #llm-input,
#sidebar-right .llm-input {
    font-size: clamp(11px, 2.7cqw, 13.5px);
    padding: clamp(6px, 1.8cqw, 11px) clamp(8px, 2.2cqw, 12px);
    min-height: clamp(46px, 12cqw, 78px);
    line-height: 1.45;
    border-radius: clamp(5px, 1.4cqw, 9px);
    flex: 1 1 0;
    min-width: 0;
}
#sidebar-right #llm-input::placeholder,
#sidebar-right .llm-input::placeholder {
    font-size: clamp(10px, 2.4cqw, 12.5px);
    opacity: 0.7;
}
#sidebar-right .llm-send {
    font-size: clamp(10px, 2.5cqw, 13px);
    padding: clamp(6px, 1.6cqw, 11px) clamp(8px, 2.2cqw, 15px);
    min-width: clamp(50px, 13cqw, 78px);
    max-width: 28%;
    gap: clamp(3px, 0.8cqw, 6px);
    border-radius: clamp(5px, 1.4cqw, 9px);
    flex-shrink: 0;
}
#sidebar-right .llm-send-icon {
    width: clamp(10px, 2.5cqw, 14px);
    height: clamp(10px, 2.5cqw, 14px);
}

/* (g) 历史 tab 工具栏 */
#sidebar-right .ai-history-toolbar {
    padding: clamp(6px, 1.6cqw, 10px) clamp(8px, 2.4cqw, 14px);
    gap: clamp(4px, 1.2cqw, 8px);
}
#sidebar-right #ai-history-search {
    font-size: clamp(11px, 2.7cqw, 13.5px);
    padding: clamp(5px, 1.4cqw, 9px) clamp(8px, 2.2cqw, 12px);
    border-radius: clamp(4px, 1.2cqw, 8px);
    flex: 1 1 0;
    min-width: 0;
}
#sidebar-right #ai-history-clear {
    width: clamp(28px, 7cqw, 36px);
    height: clamp(28px, 7cqw, 36px);
}
#sidebar-right #ai-history-clear svg {
    width: clamp(11px, 2.8cqw, 14px);
    height: clamp(11px, 2.8cqw, 14px);
}
#sidebar-right .ai-history-list {
    padding: clamp(4px, 1.2cqw, 8px) clamp(6px, 2cqw, 12px);
}
#sidebar-right .ai-history-empty {
    font-size: clamp(11px, 2.5cqw, 13px);
    padding: clamp(14px, 4cqw, 24px);
}