/* =========================================================
   同晖社区 · 政务风统一主题（theme-gov.css）
   覆盖 style.css(--ios-*) 与 index.html(--dash-*) 两套变量，
   统一拉齐为「现代政务风 + 科技蓝」。
   加载顺序须在所有样式之后（base.html / index.html 末尾引入）。
   ========================================================= */

:root {
    /* 政务蓝主色阶 */
    --gov-blue: #0A84FF !important;
    --gov-blue-deep: #0A5BC4 !important;
    --gov-blue-deeper: #0B3FA0 !important;
    --gov-blue-soft: #E8F1FF !important;

    /* 语义强调色（更"政务"的稳重色） */
    --gov-red: #E54848 !important;
    --gov-green: #30B458 !important;
    --gov-orange: #FF9500 !important;
    --gov-purple: #7B61FF !important;

    /* —— 覆盖 style.css 的 iOS 变量 —— */
    --ios-blue: #0A84FF !important;
    --ios-green: #30B458 !important;
    --ios-red: #E54848 !important;
    --ios-orange: #FF9500 !important;
    --ios-purple: #7B61FF !important;
    --bg: #F4F6FA !important;
    --card: #FFFFFF !important;
    --text: #16203A !important;
    --text2: #46506A;
    --text3: #8A93A6;
    --separator: #E8ECF3 !important;
    --shadow: 0 1px 2px rgba(16,24,40,.04), 0 4px 16px rgba(16,24,40,.05) !important;

    /* —— 覆盖 index.html 的 --dash-* 变量 —— */
    --dash-blue: #0A84FF !important;
    --dash-blue-soft: #E8F1FF !important;
    --dash-orange: #FF9500 !important;
    --dash-red: #E54848 !important;
    --dash-purple: #7B61FF !important;
    --dash-bg: #F4F6FA !important;
    --dash-card: #FFFFFF !important;
    --dash-border: #E8ECF3 !important;
    --dash-text: #16203A !important;
    --dash-text2: #46506A;
    --dash-text3: #8A93A6;
    --dash-radius: 14px !important;
    --dash-shadow: 0 1px 2px rgba(16,24,40,.04), 0 4px 16px rgba(16,24,40,.05) !important;

    /* —— 统一图表调色板（克制协调，浅/深通用） —— */
    --chart-c1: #0A84FF;  /* 蓝（品牌主色） */
    --chart-c2: #34C6C0;  /* 青 */
    --chart-c3: #3FBF6F;  /* 绿 */
    --chart-c4: #F0A23C;  /* 琥珀 */
    --chart-c5: #8E7CE8;  /* 紫 */
    --chart-c6: #EF6F5E;  /* 红 */
    --chart-track: #EEF1F6 !important;
    --chart-grid: rgba(16,24,40,.05) !important;
    --chart-axis: var(--text3) !important;
    --chart-glow: rgba(16,24,40,.10) !important;
    --chart-gap: #FFFFFF !important; /* 扇区间隙（浅色由预览覆盖） */
}

/* ============ 顶部品牌栏（base.html 的 .topbar） ============ */
.topbar {
    background: linear-gradient(135deg, var(--gov-blue) 0%, var(--gov-blue-deep) 60%, var(--gov-blue-deeper) 100%) !important;
    border-bottom: none !important;
    box-shadow: 0 2px 14px rgba(10,91,196,.30) !important;
    padding-top: env(safe-area-inset-top) !important;
}
.topbar .nav-inner { padding: 13px 16px !important; }
.topbar .back { color: #fff !important; }
.topbar .back::before {
    background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 8 16'%3E%3Cpath d='M6 1L1 8l5 7' fill='none' stroke='%23FFFFFF' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center/contain no-repeat !important;
}
.topbar h1 { color: #fff !important; font-size: 18px !important; font-weight: 700 !important; letter-spacing: .2px !important; }
.topbar--hero { background: linear-gradient(135deg, var(--gov-blue), var(--gov-blue-deeper)) !important; }

/* ============ 首页头部信息卡（index.html 的 .dash-header） ============ */
.dash-header {
    background: linear-gradient(135deg, var(--gov-blue) 0%, var(--gov-blue-deep) 55%, var(--gov-blue-deeper) 100%) !important;
    padding: 24px 18px 20px !important;
    position: relative !important;
    overflow: hidden !important;
}
.dash-header::after {
    content: ''; position: absolute !important; right: -40px !important; top: -50px !important; width: 200px !important; height: 200px !important;
    background: radial-gradient(circle, rgba(255,255,255,.18), transparent 70%) !important;
    border-radius: 50% !important;
}
.dash-header::before {
    content: ''; position: absolute !important; left: -30px !important; bottom: -50px !important; width: 160px !important; height: 160px !important;
    background: radial-gradient(circle, rgba(255,255,255,.10), transparent 70%) !important;
    border-radius: 50% !important;
}
.dash-header h1 { font-size: 23px !important; font-weight: 800 !important; letter-spacing: .3px !important; position: relative !important; }
.dash-header p { font-size: 13px !important; opacity: .9 !important; position: relative !important; }
.dash-header .meta { font-size: 11px !important; opacity: .72 !important; position: relative !important; }

/* 通用 Hero（部分内页使用） */
.hero {
    background: linear-gradient(135deg, var(--gov-blue), var(--gov-blue-deeper)) !important;
}
.hero::before { background: radial-gradient(circle, rgba(255,255,255,.22), transparent 70%) !important; }
.hero::after  { background: radial-gradient(circle, rgba(255,255,255,.16), transparent 70%) !important; }

/* ============ 区块标题左侧蓝条 ============ */
.section-title { position: relative !important; padding-left: 22px !important; }
.section-title::before {
    content: ''; position: absolute !important; left: 8px !important; top: 5px !important; width: 4px !important; height: 18px !important;
    background: linear-gradient(var(--gov-blue), var(--gov-blue-deep)) !important;
    border-radius: 2px !important;
}
.section-header h2::before { background: var(--gov-blue) !important; }

/* ============ 底部导航（同时覆盖两套） ============ */
.bottom-nav {
    background: rgba(255,255,255,.96) !important;
    border-top: 1px solid var(--dash-border) !important;
    box-shadow: 0 -1px 12px rgba(16,24,40,.06) !important;
}
.bottom-nav a { color: var(--dash-text3) !important; }
.bottom-nav a.active { color: var(--dash-blue) !important; font-weight: 600 !important; position: relative !important; }
.bottom-nav a.active::before {
    content: ''; position: absolute !important; top: 0 !important; left: 50% !important; transform: translateX(-50%) !important;
    width: 26px !important; height: 3px !important; border-radius: 0 0 3px 3px !important;
    background: linear-gradient(var(--gov-blue), var(--gov-blue-deep)) !important;
}
.bottom-nav a .icon { font-size: 21px !important; }

/* ============ 卡片：更 crisp 的政务观感 ============ */
.dash-card,
.list-card,
.stat-card,
.chart-card,
.inset-group,
.procedure-detail,
.form-group-cell {
    border: 1px solid rgba(16,24,40,.05) !important;
}
.main-stat { border: 1px solid rgba(16,24,40,.05) !important; }

/* ============ 主按钮：蓝渐变 ============ */
.ios-btn-primary {
    background: linear-gradient(135deg, var(--gov-blue), var(--gov-blue-deep)) !important;
    box-shadow: 0 4px 12px rgba(10,91,196,.30) !important;
}
.ios-btn-primary:active { background: var(--gov-blue-deep) !important; }

/* 高德弹窗主按钮同步 */
.bldg-popup-btn.primary { background: var(--gov-blue) !important; }

/* ============ 深色模式：政务蓝统一适配 ============ */

/* ============ 图标美化：底部导航 emoji → 线性 SVG（跟随 currentColor） ============ */
.bottom-nav a .icon {
    font-size: 0 !important; line-height: 0 !important; overflow: hidden !important;
    width: 26px !important; height: 26px !important;
    display: inline-block !important;
    background-color: currentColor !important;
    -webkit-mask: var(--nav-ic) center / 22px 22px no-repeat !important;
            mask: var(--nav-ic) center / 22px 22px no-repeat !important;
    margin-bottom: 2px !important;
}
.bottom-nav a:nth-child(1) .icon { --nav-ic: url("data:image/svg+xml,%3Csvg%20xmlns%3D%27http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%27%20viewBox%3D%270%200%2024%2024%27%20fill%3D%27none%27%20stroke%3D%27%23000%27%20stroke-width%3D%272%27%20stroke-linecap%3D%27round%27%20stroke-linejoin%3D%27round%27%3E%3Crect%20x%3D%273%27%20y%3D%273%27%20width%3D%277%27%20height%3D%277%27%20rx%3D%271.5%27%2F%3E%3Crect%20x%3D%2714%27%20y%3D%273%27%20width%3D%277%27%20height%3D%277%27%20rx%3D%271.5%27%2F%3E%3Crect%20x%3D%273%27%20y%3D%2714%27%20width%3D%277%27%20height%3D%277%27%20rx%3D%271.5%27%2F%3E%3Crect%20x%3D%2714%27%20y%3D%2714%27%20width%3D%277%27%20height%3D%277%27%20rx%3D%271.5%27%2F%3E%3C%2Fsvg%3E") !important; }
.bottom-nav a:nth-child(2) .icon { --nav-ic: url("data:image/svg+xml,%3Csvg%20xmlns%3D%27http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%27%20viewBox%3D%270%200%2024%2024%27%20fill%3D%27none%27%20stroke%3D%27%23000%27%20stroke-width%3D%272%27%20stroke-linecap%3D%27round%27%20stroke-linejoin%3D%27round%27%3E%3Ccircle%20cx%3D%279%27%20cy%3D%278%27%20r%3D%273%27%2F%3E%3Cpath%20d%3D%27M4%2019c0-3%203-5%205-5s5%202%205%205%27%2F%3E%3Ccircle%20cx%3D%2717%27%20cy%3D%277%27%20r%3D%272%27%2F%3E%3Cpath%20d%3D%27M15.5%2014.2a4.6%204.6%200%200%201%204.5%205.8%27%2F%3E%3C%2Fsvg%3E") !important; }
.bottom-nav a:nth-child(3) .icon { --nav-ic: url("data:image/svg+xml,%3Csvg%20xmlns%3D%27http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%27%20viewBox%3D%270%200%2024%2024%27%20fill%3D%27none%27%20stroke%3D%27%23000%27%20stroke-width%3D%272%27%20stroke-linecap%3D%27round%27%20stroke-linejoin%3D%27round%27%3E%3Crect%20x%3D%275%27%20y%3D%274%27%20width%3D%2714%27%20height%3D%2717%27%20rx%3D%272%27%2F%3E%3Crect%20x%3D%279%27%20y%3D%273%27%20width%3D%276%27%20height%3D%273%27%20rx%3D%271%27%2F%3E%3Cpath%20d%3D%27M8%2011h8M8%2015h8%27%2F%3E%3C%2Fsvg%3E") !important; }
.bottom-nav a:nth-child(4) .icon { --nav-ic: url("data:image/svg+xml,%3Csvg%20xmlns%3D%27http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%27%20viewBox%3D%270%200%2024%2024%27%20fill%3D%27none%27%20stroke%3D%27%23000%27%20stroke-width%3D%272%27%20stroke-linecap%3D%27round%27%20stroke-linejoin%3D%27round%27%3E%3Cpath%20d%3D%27M4%205h16v10H10l-4%204V5z%27%2F%3E%3Cpath%20d%3D%27M8%209h8M8%2012h5%27%2F%3E%3C%2Fsvg%3E") !important; }
.bottom-nav a:nth-child(5) .icon { --nav-ic: url("data:image/svg+xml,%3Csvg%20xmlns%3D%27http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%27%20viewBox%3D%270%200%2024%2024%27%20fill%3D%27none%27%20stroke%3D%27%23000%27%20stroke-width%3D%272%27%20stroke-linecap%3D%27round%27%20stroke-linejoin%3D%27round%27%3E%3Ccircle%20cx%3D%2712%27%20cy%3D%278%27%20r%3D%274%27%2F%3E%3Cpath%20d%3D%27M4%2020c0-4%204-7%208-7s8%203%208%207%27%2F%3E%3C%2Fsvg%3E") !important; }

/* ============ 快捷入口图标（quick-icon）美化 ============ */
.quick-icon {
    width: 46px !important; height: 46px !important;
    border-radius: 14px !important;
    display: flex !important; align-items: center !important; justify-content: center !important;
    font-size: 22px !important;
    box-shadow: 0 4px 12px rgba(10,91,196,.14) !important;
    transition: transform .2s ease, box-shadow .2s ease !important;
}
.quick-icon:active { transform: scale(.94) !important; box-shadow: 0 2px 6px rgba(10,91,196,.12) !important; }
.quick-icon.blue   { background: linear-gradient(135deg,#E8F1FF,#D3E5FF) !important; }
.quick-icon.orange { background: linear-gradient(135deg,#FFF1E0,#FFE3C2) !important; }
.quick-icon.green  { background: linear-gradient(135deg,#E6F8EE,#CDEFD9) !important; }
.quick-icon.purple { background: linear-gradient(135deg,#F1ECFF,#E2D6FF) !important; }

/* ============ 地图搜索图标 ============ */
.map-search-icon {
    color: var(--gov-blue) !important;
    background: rgba(255,255,255,.92) !important;
    width: 30px !important; height: 30px !important;
    border-radius: 50% !important;
    display: flex !important; align-items: center !important; justify-content: center !important;
    font-size: 14px !important;
    box-shadow: 0 1px 4px rgba(0,0,0,.12) !important;
}

/* =========================================================
   统一图表系统（参考 Apple Health / 微信 / 支付宝 / 网易云音乐）
   柱图 · 环图 · 折线图 · 饼图 共享同一套设计语言
   ========================================================= */

/* —— 共享：图例（所有图表通用） —— */
.chart-legend { display: flex !important; flex-wrap: wrap !important; gap: 10px 18px !important; margin-top: 14px !important; }
.chart-legend-item { display: flex !important; align-items: center !important; gap: 8px !important; }
.chart-legend-dot {
    width: 10px !important; height: 10px !important; border-radius: 50% !important;
    box-shadow: 0 0 0 2px #fff, 0 1px 3px rgba(0,0,0,.18) !important;
    flex-shrink: 0 !important;
}
.chart-legend-label { font-size: 13px !important; font-weight: 500 !important; color: var(--text2) !important; }
.chart-legend-val   { font-size: 13px !important; font-weight: 700 !important; color: var(--text) !important; margin-left: 2px !important; }

/* —— 共享：折线图坐标轴标签 / 网格线 —— */
.chart-axis-label { font-size: 11px !important; fill: var(--chart-axis) !important; }
.chart-grid-line  { stroke: var(--chart-grid) !important; stroke-width: 1 !important; }
.chart-line-path  { fill: none !important; stroke-width: 2.5 !important; stroke-linecap: round !important; stroke-linejoin: round !important; }
.chart-line-area  { stroke: none !important; }
.chart-line-dot   { stroke: #fff !important; stroke-width: 2 !important; }


/* —— 环形图 donut（纯 CSS 打孔，无需改 HTML） —— */
.donut-chart {
    filter: drop-shadow(0 6px 16px rgba(16,24,40,.12)) !important;
    position: relative !important;
}
.donut-chart::before {
    content: ''; position: absolute !important; inset: 30% !important; border-radius: 50% !important;
    background: var(--card) !important; z-index: 0 !important;
    box-shadow: 0 1px 4px rgba(16,24,40,.10) !important;
}
.donut-chart::after {
    content: ''; position: absolute !important; inset: 0 !important; border-radius: 50% !important;
    box-shadow: inset 0 0 0 1px rgba(16,24,40,.04) !important;
    pointer-events: none !important; z-index: 2 !important;
}
.donut-center { position: relative !important; z-index: 1 !important; font-size: 30px !important; font-weight: 700 !important; color: var(--text) !important; letter-spacing: -.5px !important; }
.donut-center small { font-size: 13px !important; font-weight: 600 !important; color: var(--chart-axis) !important; margin-left: 2px !important; }
.donut-legend-dot {
    width: 10px !important; height: 10px !important; border-radius: 50% !important;
    box-shadow: 0 0 0 2px #fff, 0 1px 3px rgba(0,0,0,.18) !important;
    display: inline-block !important; flex-shrink: 0 !important;
}
.donut-legend-label { font-size: 13px !important; font-weight: 500 !important; color: var(--text2) !important; }
.donut-legend-val { font-size: 13px !important; font-weight: 700 !important; color: var(--text) !important; }

/* —— 饼图 pie（实心，统一风格） —— */
.pie-chart { filter: saturate(1.06) contrast(1.02) drop-shadow(0 8px 18px var(--chart-glow)) !important; }

/* —— 折线图 line（结构见预览，未来可接入真实页面） —— */
.line-chart { width: 100% !important; display: block !important; overflow: visible !important; }
.line-chart .chart-line-path {
    stroke-dasharray: 100 !important; stroke-dashoffset: 100 !important;
    animation: lineDraw 1.1s cubic-bezier(.4,0,.2,1) forwards !important;
}
.line-chart .chart-line-area { opacity: 0 !important; animation: fadeIn .6s ease forwards !important; animation-delay: .5s !important; }
.line-chart .chart-line-dot { opacity: 0 !important; animation: dotFade .4s ease forwards !important; animation-delay: .9s !important; }

@keyframes lineDraw { to { stroke-dashoffset: 0; } }


@keyframes dotFade { to { opacity: 1; } }


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


/* —— 图表入场通用（卡片内子元素轻微上浮） —— */
.chart-card > *, .dash-card .chart-bar { animation: fadeUp .5s ease both !important; }

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


/* —— 尊重「减少动效」偏好 —— */
@media (prefers-reduced-motion: reduce) {
    .chart-bar .fill,
    .line-chart .chart-line-path,
    .line-chart .chart-line-area,
    .line-chart .chart-line-dot,
    .chart-card > *,
    .dash-card .chart-bar { animation: none !important; }
}

/* ============ 卡片增强 ============ */
.stat-card { border: 1px solid rgba(16,24,40,.05) !important; transition: transform .2s ease, box-shadow .2s ease !important; }
.stat-card:hover { transform: translateY(-3px) !important; box-shadow: 0 8px 24px rgba(16,24,40,.10) !important; }
.stat-card.blue   .num { background: linear-gradient(135deg,var(--ios-blue),  color-mix(in srgb,var(--ios-blue)  55%,#fff)) !important; -webkit-background-clip: text !important; background-clip: text !important; color: transparent !important; }
.stat-card.green  .num { background: linear-gradient(135deg,var(--ios-green), color-mix(in srgb,var(--ios-green) 55%,#fff)) !important; -webkit-background-clip: text !important; background-clip: text !important; color: transparent !important; }
.stat-card.red    .num { background: linear-gradient(135deg,var(--ios-red),   color-mix(in srgb,var(--ios-red)   55%,#fff)) !important; -webkit-background-clip: text !important; background-clip: text !important; color: transparent !important; }
.stat-card.orange .num { background: linear-gradient(135deg,var(--ios-orange),color-mix(in srgb,var(--ios-orange)55%,#fff)) !important; -webkit-background-clip: text !important; background-clip: text !important; color: transparent !important; }
.stat-card.purple .num { background: linear-gradient(135deg,var(--ios-purple),color-mix(in srgb,var(--ios-purple)55%,#fff)) !important; -webkit-background-clip: text !important; background-clip: text !important; color: transparent !important; }
.chart-card { border: 1px solid rgba(16,24,40,.05) !important; }
/* 图表/统计表表头：名称统一靠左（蓝条为标记），右侧仅留给关联指标(badge) */
.dash-card-title {
    display: flex !important; align-items: center !important; gap: 8px !important;
    justify-content: flex-start !important; text-align: left !important;
    font-weight: 700 !important; color: var(--text) !important;
}
.dash-card-title::before {
    content: ''; width: 4px !important; height: 16px !important; border-radius: 2px !important;
    background: linear-gradient(var(--gov-blue), var(--gov-blue-deep)) !important; flex-shrink: 0 !important;
}
/* 标题后若带指标(如“160人”)，推到最右侧，形成“左标题·右数值”统一版式 */
.dash-card-title .badge-num {
    margin-left: auto !important; flex-shrink: 0 !important;
    font-size: 12px !important; font-weight: 700 !important;
    color: var(--gov-blue-deep) !important;
    background: var(--gov-blue-soft) !important;
    padding: 2px 10px !important; border-radius: 999px !important;
}
.list-card { border: 1px solid rgba(16,24,40,.06) !important; transition: transform .2s ease, box-shadow .2s ease !important; }
.list-card:hover { transform: translateY(-2px) !important; box-shadow: 0 8px 22px rgba(16,24,40,.10) !important; }
.grid-item { background: linear-gradient(135deg,#F4F8FF,#EAF2FF) !important; border: 1px solid rgba(10,91,196,.06) !important; border-radius: 14px !important; }
.grid-item-num { color: var(--gov-blue-deep) !important; }
.inset-group { border: 1px solid rgba(16,24,40,.05) !important; }

@media (prefers-color-scheme: dark) {
    :root {
        --gov-blue-soft: #10243F !important;
        --bg: #0A0E17 !important;
        --card: #151B28 !important;
        --text: #E9EDF5 !important;
        --text2: #AAB3C5;
        --text3: #69728A;
        --separator: #232B3A !important;
        --shadow: 0 1px 2px rgba(0,0,0,.3), 0 4px 16px rgba(0,0,0,.25) !important;

        --dash-bg: #0A0E17 !important;
        --dash-card: #151B28 !important;
        --dash-border: #232B3A !important;
        --dash-text: #E9EDF5 !important;
        --dash-text2: #AAB3C5;
        --dash-text3: #69728A;
        --dash-shadow: 0 1px 2px rgba(0,0,0,.3) !important;
    }
    .topbar { box-shadow: 0 2px 14px rgba(0,0,0,.45) !important; }
    .dash-header { background: linear-gradient(135deg, #0B3A78 0%, #0A2A5C 60%, #071E40 100%) !important; }
    .bottom-nav { background: rgba(21,27,40,.96) !important; border-top-color: var(--separator) !important; }
}


/* ============ 增强元素 · 深色模式适配 ============ */
@media (prefers-color-scheme: dark) {
    :root {
        --chart-track: #1B2434 !important;
        --chart-grid: rgba(255,255,255,.07) !important;
        --chart-glow: rgba(80,150,255,.22) !important;
        --chart-gap: #151B28 !important;
    }
    .chart-bar .track { background: var(--chart-track) !important; box-shadow: inset 0 1px 2px rgba(0,0,0,.4) !important; }
    .chart-legend-dot { box-shadow: 0 0 0 2px #151B28, 0 1px 3px rgba(0,0,0,.4) !important; }
    .donut-legend-dot { box-shadow: 0 0 0 2px #151B28, 0 1px 3px rgba(0,0,0,.4) !important; }
    .donut-chart::after { box-shadow: inset 0 0 0 1px rgba(255,255,255,.10) !important; }
    .quick-icon.blue   { background: linear-gradient(135deg,#13294A,#0E2138) !important; }
    .quick-icon.orange { background: linear-gradient(135deg,#3A2A12,#2A1E0C) !important; }
    .quick-icon.green  { background: linear-gradient(135deg,#123024,#0C241B) !important; }
    .quick-icon.purple { background: linear-gradient(135deg,#2A1E47,#1E1430) !important; }
    .grid-item { background: linear-gradient(135deg,#13233F,#0F1D33) !important; border-color: rgba(120,160,255,.12) !important; }
    .grid-item-num { color: #8FB8FF !important; }
    .map-search-icon { background: rgba(21,27,40,.92) !important; color: #6FB8FF !important; }
    .stat-card, .chart-card, .list-card, .inset-group { box-shadow: 0 1px 2px rgba(0,0,0,.3) !important; }
}

/* =========================================================
   组件统一覆盖 · 快速赢 + 重点 + 体验细节（v20260725e）
   全部使用 theme-gov 变量（深色模式自动适配）；
   子页面 <style> 内联样式晚于本文件，故一律 !important。
   ========================================================= */

/* —— 按钮体系（.ios-btn*） —— */
.ios-btn {
    border: none !important;
    border-radius: 12px !important;
    font-size: 16px !important; font-weight: 600 !important;
    padding: 13px 18px !important;
    min-height: 46px !important;
    cursor: pointer !important;
    transition: transform .12s ease, box-shadow .2s ease, opacity .15s ease !important;
    line-height: 1.2 !important;
}
.ios-btn:active { transform: scale(.97) !important; opacity: .92 !important; }
.ios-btn-primary { background: linear-gradient(135deg, var(--gov-blue), var(--gov-blue-deep)) !important; color: #fff !important; box-shadow: 0 4px 12px rgba(10,91,196,.30) !important; }
.ios-btn-green { background: var(--gov-green) !important; color: #fff !important; box-shadow: 0 4px 12px rgba(48,180,88,.28) !important; }
.ios-btn-red { background: var(--gov-red) !important; color: #fff !important; box-shadow: 0 4px 12px rgba(229,72,72,.28) !important; }
.ios-btn-outline { background: transparent !important; color: var(--gov-blue) !important; box-shadow: inset 0 0 0 1.5px var(--gov-blue) !important; }
.ios-btn-ghost { background: var(--gov-blue-soft) !important; color: var(--gov-blue-deep) !important; }
.ios-btn-block { width: 100% !important; display: block !important; }
.ios-btn-sm { padding: 9px 14px !important; font-size: 14px !important; border-radius: 10px !important; min-height: 38px !important; }
.call-btn { background: rgba(48,180,88,.12) !important; color: var(--gov-green) !important; border-radius: 12px !important; padding: 10px 14px !important; font-weight: 600 !important; }

/* —— 表单与输入 —— */
.ios-form { padding: 8px 0 !important; }
.form-section { font-size: 13px !important; font-weight: 700 !important; color: var(--text2) !important; letter-spacing: .3px !important; padding: 18px 16px 8px !important; text-transform: none !important; }
.form-group-cell { background: var(--card) !important; border-radius: 14px !important; border: 1px solid rgba(16,24,40,.05) !important; overflow: hidden !important; }
.form-cell { padding: 13px 16px !important; }
.form-cell + .form-cell { border-top: 1px solid var(--separator) !important; }
.form-cell label { font-size: 14px !important; color: var(--text2) !important; font-weight: 500 !important; }
.form-cell input,
.form-cell select,
.form-cell textarea {
    border: 1px solid var(--separator) !important;
    border-radius: 10px !important;
    background: var(--bg) !important;
    color: var(--text) !important;
    padding: 10px 12px !important;
    font-size: 15px !important;
    width: 100% !important;
    transition: border-color .15s ease, box-shadow .15s ease !important;
}
.form-cell input:focus,
.form-cell select:focus,
.form-cell textarea:focus {
    outline: none !important;
    border-color: var(--gov-blue) !important;
    box-shadow: 0 0 0 3px var(--gov-blue-soft) !important;
}
.form-cell input::placeholder,
.form-cell textarea::placeholder { color: var(--text3) !important; }
.form-cell select { -webkit-appearance: none !important; appearance: none !important; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath d='M1 1l5 5 5-5' fill='none' stroke='%238A93A6' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") !important; background-repeat: no-repeat !important; background-position: right 14px center !important; padding-right: 36px !important; }
.form-cell .value-right { color: var(--text) !important; font-weight: 600 !important; }
.form-cell-grid { display: grid !important; grid-template-columns: 1fr 1fr !important; gap: 0 !important; }
.form-cell-check { background: transparent !important; border-radius: 10px !important; padding: 12px 14px !important; }
.form-cell-check:active { background: var(--gov-blue-soft) !important; }
.form-cell-check input[type="checkbox"] { accent-color: var(--gov-blue) !important; width: 18px !important; height: 18px !important; }
.form-cell-check-label { color: var(--text) !important; font-weight: 500 !important; }
.form-cell-check-status { color: var(--text3) !important; font-size: 13px !important; }
.form-cell-check input:checked ~ .form-cell-check-label,
.form-cell-check input:checked ~ .form-cell-check-status { color: var(--gov-blue) !important; }

/* —— 搜索框 —— */
.ios-search { background: var(--card) !important; border: 1px solid var(--separator) !important; border-radius: 12px !important; max-width: 600px !important; margin: 0 auto !important; }
.ios-search input { background: transparent !important; color: var(--text) !important; border: none !important; padding: 10px 12px 10px 36px !important; font-size: 15px !important; }
.ios-search input:focus { background: var(--gov-blue-soft) !important; }
.ios-search input::placeholder { color: var(--text3) !important; }
.ios-search::before { color: var(--text3) !important; left: 12px !important; }
.global-search { background: var(--card) !important; border: 1px solid var(--separator) !important; border-radius: 12px !important; }
.global-search input { background: transparent !important; color: var(--text) !important; border: none !important; }
.filter-tags { display: flex !important; gap: 8px !important; flex-wrap: wrap !important; max-width: 600px !important; margin: 0 auto !important; }
.filter-tag { background: var(--card) !important; color: var(--text2) !important; border: 1px solid var(--separator) !important; border-radius: 999px !important; padding: 7px 14px !important; font-size: 13px !important; font-weight: 500 !important; transition: all .15s ease !important; }
.filter-tag:active { transform: scale(.96) !important; }
.filter-tag.active { background: linear-gradient(135deg, var(--gov-blue), var(--gov-blue-deep)) !important; color: #fff !important; border-color: transparent !important; box-shadow: 0 3px 10px rgba(10,91,196,.25) !important; }

/* —— 徽章 —— */
.badge { display: inline-flex !important; align-items: center !important; padding: 3px 9px !important; border-radius: 999px !important; font-size: 12px !important; font-weight: 600 !important; line-height: 1.4 !important; }
.badge-blue { background: var(--gov-blue-soft) !important; color: var(--gov-blue-deep) !important; }
.badge-green { background: rgba(48,180,88,.12) !important; color: var(--gov-green) !important; }
.badge-orange { background: rgba(255,149,0,.14) !important; color: #B26A00 !important; }
.badge-red { background: rgba(229,72,72,.12) !important; color: var(--gov-red) !important; }
.badge-purple { background: rgba(123,97,255,.14) !important; color: var(--gov-purple) !important; }
.badge-gray { background: rgba(138,147,166,.14) !important; color: var(--text2) !important; }

/* —— 标签 / 胶囊（tag-cloud / tag-list） —— */
.tag-cloud { display: flex !important; flex-wrap: wrap !important; gap: 8px !important; }
.tag-cloud span { display: inline-flex !important; align-items: center !important; background: var(--gov-blue-soft) !important; color: var(--gov-blue-deep) !important; border-radius: 999px !important; padding: 6px 12px !important; font-size: 13px !important; font-weight: 500 !important; }
.tag-cloud .tag-item { color: var(--gov-blue-deep) !important; }
.tag-list-item { background: var(--card) !important; border: 1px solid rgba(16,24,40,.05) !important; border-radius: 12px !important; padding: 12px 14px !important; transition: transform .15s ease, box-shadow .2s ease !important; }
.tag-list-item:active { transform: scale(.98) !important; }
.tag-list-name { color: var(--text) !important; }
.tag-list-count { color: var(--text3) !important; }

/* —— 头像（contact-avatar，保留角色渐变，仅统一外形） —— */
.contact-avatar { width: 48px !important; height: 48px !important; border-radius: 50% !important; display: flex !important; align-items: center !important; justify-content: center !important; color: #fff !important; font-weight: 700 !important; font-size: 18px !important; border: 2px solid #fff !important; box-shadow: 0 2px 8px rgba(16,24,40,.12) !important; flex-shrink: 0 !important; }

/* —— 通用卡片 card-* —— */
.card { background: var(--card) !important; border: 1px solid rgba(16,24,40,.05) !important; border-radius: 14px !important; box-shadow: var(--shadow) !important; overflow: hidden !important; }
.card-header { padding: 14px 16px !important; border-bottom: 1px solid var(--separator) !important; }
.card-title { font-size: 16px !important; font-weight: 700 !important; color: var(--text) !important; }
.card-body { padding: 16px !important; color: var(--text2) !important; }
.card-actions { padding: 12px 16px !important; border-top: 1px solid var(--separator) !important; display: flex !important; gap: 10px !important; }
.contact-card { background: var(--card) !important; border: 1px solid rgba(16,24,40,.05) !important; border-radius: 14px !important; transition: transform .15s ease, box-shadow .2s ease !important; }
.contact-card:hover { transform: translateY(-2px) !important; box-shadow: 0 8px 22px rgba(16,24,40,.10) !important; }

/* —— 弹窗（map-modal-*，内联于页面，需 !important） —— */
.map-modal-bg { background: rgba(10,14,23,.45) !important; backdrop-filter: blur(2px) !important; -webkit-backdrop-filter: blur(2px) !important; }
.map-modal-card { background: var(--card) !important; border-radius: 18px !important; box-shadow: 0 12px 40px rgba(0,0,0,.28) !important; border: 1px solid var(--separator) !important; padding: 22px 22px 18px !important; }
.map-modal-title { color: var(--text) !important; font-size: 18px !important; font-weight: 700 !important; }
.map-modal-sub { color: var(--text3) !important; font-size: 13px !important; }
.map-modal-info { color: var(--text2) !important; font-size: 14px !important; }
.map-modal-info div { border-bottom: 1px solid var(--separator) !important; }
.map-modal-info div:last-child { border-bottom: none !important; }
.map-modal-close { background: rgba(16,24,40,.08) !important; color: var(--text2) !important; border-radius: 50% !important; width: 26px !important; height: 26px !important; display: flex !important; align-items: center !important; justify-content: center !important; }
.map-modal-close:hover { background: rgba(16,24,40,.14) !important; }
.map-modal-actions { margin-top: 16px !important; display: flex !important; gap: 10px !important; }
.map-modal-btn { border-radius: 12px !important; padding: 11px 0 !important; font-size: 14px !important; font-weight: 600 !important; }
.map-modal-btn.primary { background: linear-gradient(135deg, var(--gov-blue), var(--gov-blue-deep)) !important; color: #fff !important; box-shadow: 0 4px 12px rgba(10,91,196,.30) !important; }
.map-modal-btn.secondary { background: rgba(16,24,40,.06) !important; color: var(--text) !important; }
/* 通用 .modal-*（style.css 定义，备用覆盖） */
.modal-overlay { background: rgba(10,14,23,.45) !important; }
.modal-content { background: var(--card) !important; border-radius: 18px !important; border: 1px solid var(--separator) !important; }
.modal-header { border-bottom: 1px solid var(--separator) !important; }
.modal-header h3 { color: var(--text) !important; }
.modal-close { background: rgba(16,24,40,.08) !important; color: var(--text2) !important; border-radius: 50% !important; }
.modal-body { color: var(--text2) !important; }

/* —— 空状态 —— */
.empty { color: var(--text3) !important; padding: 56px 20px !important; }
.empty .emoji { font-size: 46px !important; margin-bottom: 14px !important; opacity: .85 !important; }
.empty p { font-size: 15px !important; color: var(--text3) !important; }
.empty-list, .search-empty { text-align: center !important; padding: 40px 20px !important; color: var(--text3) !important; }

/* —— 分页 —— */
.pagination { display: flex !important; gap: 6px !important; justify-content: center !important; padding: 16px !important; flex-wrap: wrap !important; }
.pagination a, .pagination span { min-width: 38px !important; height: 38px !important; display: inline-flex !important; align-items: center !important; justify-content: center !important; border-radius: 10px !important; padding: 0 10px !important; font-size: 14px !important; font-weight: 600 !important; color: var(--text2) !important; background: var(--card) !important; border: 1px solid var(--separator) !important; text-decoration: none !important; }
.pagination a:hover { border-color: var(--gov-blue) !important; color: var(--gov-blue) !important; }
.pagination .active, .pagination .current { background: linear-gradient(135deg, var(--gov-blue), var(--gov-blue-deep)) !important; color: #fff !important; border-color: transparent !important; }

/* —— 列表项微交互 —— */
.list-item { background: var(--card) !important; border-radius: 12px !important; padding: 14px 16px !important; transition: transform .15s ease, box-shadow .2s ease !important; }
.list-item:hover { transform: translateY(-1px) !important; box-shadow: 0 6px 18px rgba(16,24,40,.08) !important; }
.list-value { color: var(--text) !important; font-weight: 600 !important; }

/* —— 加载态 / 骨架屏 —— */
.loading-spinner { width: 28px !important; height: 28px !important; border-radius: 50% !important; border: 3px solid var(--gov-blue-soft) !important; border-top-color: var(--gov-blue) !important; animation: govSpin .8s linear infinite !important; margin: 20px auto !important; }
@keyframes govSpin { to { transform: rotate(360deg); } }
.skeleton { background: linear-gradient(90deg, var(--separator) 25%, rgba(16,24,40,.08) 37%, var(--separator) 63%) !important; background-size: 400% 100% !important; animation: govShimmer 1.3s ease infinite !important; border-radius: 8px !important; }
@keyframes govShimmer { 0% { background-position: 100% 0; } 100% { background-position: -100% 0; } }

/* —— Toast（备用组件） —— */
.toast { position: fixed !important; left: 50% !important; bottom: 90px !important; transform: translateX(-50%) !important; background: rgba(16,24,40,.92) !important; color: #fff !important; padding: 11px 18px !important; border-radius: 12px !important; font-size: 14px !important; font-weight: 500 !important; box-shadow: 0 8px 24px rgba(0,0,0,.3) !important; z-index: 9999 !important; max-width: 80% !important; text-align: center !important; }

/* —— 可访问性：统一焦点环 & 触控目标 —— */
a:focus-visible,
button:focus-visible,
input:focus-visible,
select:focus-visible,
textarea:focus-visible,
.ios-btn:focus-visible,
.filter-tag:focus-visible {
    outline: 2.5px solid var(--gov-blue) !important;
    outline-offset: 2px !important;
}
@media (prefers-reduced-motion: reduce) {
    .loading-spinner, .skeleton { animation: none !important; }
}

/* ===== 移动优先修正 20260725g：年龄柱状图左对齐 + 顶部统计数字缩小 ===== */
.sub-stat .sub-num { font-size: 15px !important; font-weight: 700 !important; letter-spacing: -.5px !important; color: var(--dash-blue) !important; }

/* ===== 移动优先修正 20260725h：统一缩小所有图表数字（含饼图中心） ===== */
/* 饼图正中心大数字：原来 30px 在 50px 圆里过大，缩到 18px 更贴合手机 */
.donut-center { font-size: 18px !important; letter-spacing: -.3px !important; }
/* 饼图图例文字/数值：13px -> 12px */
.donut-legend-label { font-size: 12px !important; }
.donut-legend-val   { font-size: 12px !important; }
/* 横向条形图标签：13px -> 12px */
.chart-bar .label { font-size: 12px !important; }
/* 年龄分布竖向柱数值/刻度：统一 12px 并左对齐 */
/* 顶部 5 个统计数字（居民总数 972 等）：统一 15px */
.sub-stat .sub-num { font-size: 15px !important; font-weight: 700 !important; letter-spacing: -.5px !important; color: var(--dash-blue) !important; }

/* ===== 年龄分布柱状图 美化 20260725i（保持左对齐：柱子从列左缘/坐标轴起点绘制） ===== */
.age-bars {
  display: flex !important;
  align-items: flex-end !important;
  justify-content: flex-start !important;
  gap: 9px !important;
  padding: 18px 4px 0 !important;
  height: 150px !important;
  position: relative !important;
  border-bottom: 2px solid #e9edf3 !important;
}
.age-bar {
  flex: 1 1 0 !important;
  display: flex !important;
  flex-direction: column !important;
  align-items: flex-start !important;
  justify-content: flex-end !important;
  min-width: 0 !important;
  height: 100% !important;
}
.age-bar .val {
  font-size: 12px !important;
  font-weight: 700 !important;
  color: #0055D4 !important;
  margin-bottom: 5px !important;
  align-self: flex-start !important;
  line-height: 1 !important;
}
.age-bar .col {
  width: 100% !important;
  max-width: 40px !important;
  min-height: 6px !important;
  border-radius: 7px 7px 0 0 !important;
  background: linear-gradient(180deg,#5b9bff 0%,#0055D4 100%) !important;
  box-shadow: 0 3px 8px rgba(0,85,212,.20) !important;
  align-self: flex-start !important;
  transition: filter .15s ease !important;
}
.age-bar .col:hover { filter: brightness(1.07); }
.age-bar .col.bar-top {
  background: linear-gradient(180deg,#2f6bd6 0%,#003a9e 100%) !important;
  box-shadow: 0 3px 10px rgba(0,58,158,.28) !important;
}
.age-bar .lbl {
  font-size: 10px !important;
  color: #8a93a3 !important;
  margin-top: 6px !important;
  align-self: flex-start !important;
  line-height: 1.1 !important;
  white-space: nowrap !important;
}
@media (prefers-reduced-motion: no-preference) {
  .age-bar .col { animation: ageBarGrow .5s ease-out both; transform-origin: bottom; }
  @keyframes ageBarGrow { from { transform: scaleY(0); } to { transform: scaleY(1); } }
}

/* —— 横向柱状图 chart-bar 视觉平衡 20260725m —— */
.chart-bar {
    display: flex !important;
    align-items: center !important;
    gap: 10px !important;
    margin: 13px 0 !important;
}
.chart-bar:last-child { margin-bottom: 0 !important; }

/* 标签: 文字靠左 + 列宽收窄到 30%, 使柱子生长起点左移 */
.chart-bar .label {
    flex: 0 0 30% !important;
    min-width: 72px !important;
    max-width: 110px !important;
    text-align: left !important;
    padding-top: 0 !important;
    padding-right: 8px !important;
    font-size: 13px !important;
    line-height: 1.35 !important;
    font-weight: 600 !important;
    color: var(--dash-text) !important;
    white-space: normal !important;
    overflow: hidden !important;
    word-break: break-word !important;
    display: -webkit-box !important;
    -webkit-box-orient: vertical !important;
    -webkit-line-clamp: 2 !important;
}
.chart-bar .label a {
    color: inherit !important;
    text-decoration: none !important;
}

.chart-bar .track {
    flex: 1 1 auto !important;
    max-width: none !important;
    height: 16px !important;
    background: var(--chart-track, #E8ECF3) !important;
    border-radius: 999px !important;
    overflow: hidden !important;
    position: relative !important;
    box-shadow: inset 0 1px 2px rgba(16,24,40,.06) !important;
}

.chart-bar .fill {
    height: 100% !important;
    min-width: 48px !important;
    border-radius: 999px !important;
    position: relative !important;
    overflow: visible !important;
    transform-origin: left center !important;
    animation: barGrowK .7s cubic-bezier(.22,.78,.27,1) both !important;
    background-image: linear-gradient(90deg, rgba(255,255,255,.28) 0%, rgba(255,255,255,0) 40%) !important;
    background-blend-mode: overlay !important;
    box-shadow: 0 1px 3px rgba(0,85,212,.12) !important;
}

.chart-bar .fill span {
    position: absolute !important;
    right: 9px !important;
    top: 50% !important;
    transform: translateY(-50%) !important;
    font-size: 12px !important;
    font-weight: 700 !important;
    color: #fff !important;
    text-shadow: 0 1px 2px rgba(0,0,0,.25) !important;
    white-space: nowrap !important;
    letter-spacing: .2px !important;
}

/* 重点服务对象统计：按语义着色 + 渐变 */
#focusStats .chart-bar:nth-child(1) .fill { background: linear-gradient(90deg, #3b82f6, #60a5fa) !important; }
#focusStats .chart-bar:nth-child(2) .fill { background: linear-gradient(90deg, #f59e0b, #fbbf24) !important; }
#focusStats .chart-bar:nth-child(3) .fill { background: linear-gradient(90deg, #f97316, #fb923c) !important; }
#focusStats .chart-bar:nth-child(4) .fill { background: linear-gradient(90deg, #8b5cf6, #a78bfa) !important; }
#focusStats .chart-bar:nth-child(5) .fill { background: linear-gradient(90deg, #ef4444, #f87171) !important; }
#focusStats .chart-bar:nth-child(6) .fill { background: linear-gradient(90deg, #dc2626, #ef4444) !important; }

/* 小区重点关注分布：统一品牌蓝渐变 */
#commFocusCard .chart-bar .fill {
    background: linear-gradient(90deg, #2563eb, #60a5fa) !important;
}

/* 未完成提示文字：对齐到轨道左缘(列宽已改为 30%) */
#commFocusCard .chart-bar + div {
    font-size: 11px !important;
    color: var(--dash-text3) !important;
    padding: 0 0 8px calc(30% + 10px) !important;
    margin-top: -6px !important;
}

@keyframes barGrowK {
    from { transform: scaleX(0); opacity: .3; }
    to   { transform: scaleX(1); opacity: 1; }
}

@media (prefers-reduced-motion: reduce) {
    .chart-bar .fill { animation: none !important; }
}