/* ===== 设计系统 =====
 * 风格：专业 B 端后台（参考 Ant Design / 企业微信 / 钉钉）
 * 主色：深蓝灰导航 + 白色内容区 + 消防红点缀
 * 字体：系统清晰字体优先，不依赖网络加载
 */
:root {
    /* 消防科技蓝：统一深蓝主色，消除割裂感 */
    --primary-900: #0a1128;
    --primary-800: #0f1b3a;
    --primary-700: #162d5a;
    --primary-600: #1e3f7a;
    --primary-500: #2d5a9e;
    --primary-400: #5a7eb8;
    --primary-300: #94b0d6;
    --primary-200: #c9d8ef;
    --primary-100: #e6eef9;
    --primary-50:  #f0f4fa;

    /* 语义色：消防红、成功绿、警告橙、信息蓝 */
    --accent-red:    #e63946;
    --accent-red-50: #fff0f1;
    --accent-red-100:#ffe4e6;
    --accent-red-700:#c1121f;
    --accent-green:  #10b981;
    --accent-green-50:#ecfdf5;
    --accent-amber:  #f59e0b;
    --accent-amber-50:#fffbeb;
    --accent-blue:   #3b82f6;
    --accent-cyan:   #0ea5e9;
    --accent-cyan-50:#f0f9ff;
    --accent-blue-50:#eff6ff;

    --text-main:   #0f172a;
    --text-sub:    #475569;
    --text-light:  #94a3b8;
    --border:      #d4e0f0;
    --bg-body:     #f0f4fa;
    --radius:      12px;
    --radius-sm:   8px;
    --shadow-card: 0 1px 3px rgba(15, 23, 42, 0.06), 0 1px 2px rgba(15, 23, 42, 0.04);
    --shadow-lg:   0 10px 25px -5px rgba(15, 23, 42, 0.08), 0 8px 10px -6px rgba(15, 23, 42, 0.04);
}

html {
    background-color: var(--bg-body);
}
body {
    background-color: transparent;
    font-family: -apple-system, BlinkMacSystemFont, "PingFang SC", "Microsoft YaHei", "Noto Sans SC", "Segoe UI", Roboto, sans-serif;
    font-size: 16px;
    line-height: 1.65;
    color: var(--text-main);
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

/* ===== 导航栏 ===== */
.main-nav {
    background: var(--primary-800);
    box-shadow: 0 1px 2px rgba(15, 23, 42, 0.12);
    padding-top: 0.45rem;
    padding-bottom: 0.45rem;
}
.navbar-brand {
    font-weight: 700;
    font-size: 1.15rem;
    letter-spacing: 0.5px;
    color: #fff !important;
}
.navbar-brand img {
    border: 2px solid rgba(255,255,255,0.15);
    background: #fff;
}
.nav-link {
    color: rgba(255,255,255,0.75) !important;
    font-weight: 500;
    font-size: 0.92rem;
    padding: 0.55rem 0.85rem !important;
    border-radius: 8px;
    margin: 0 2px;
    transition: all 0.15s ease;
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
}
.nav-link:hover, .nav-link.active {
    color: #fff !important;
    background: rgba(255,255,255,0.1);
}
.nav-link.active {
    background: rgba(255,255,255,0.15);
    font-weight: 600;
}
.navbar-toggler { border-color: rgba(255,255,255,0.2); }
.navbar-toggler-icon { filter: invert(1); }

/* ===== 导航栏上报隐患按钮 ===== */
.btn-report-nav {
    background: linear-gradient(135deg, #e63946 0%, #ff4d4d 55%, #ff6b35 100%);
    color: #fff !important;
    border: none;
    font-weight: 600;
    font-size: 0.92rem;
    padding: 0.55rem 1rem;
    border-radius: 50px;
    box-shadow: 0 3px 10px rgba(230, 57, 70, 0.38);
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    transition: all 0.2s ease;
    animation: reportPulse 2.5s ease-in-out infinite;
}
.btn-report-nav:hover {
    transform: translateY(-1px);
    box-shadow: 0 5px 14px rgba(230, 57, 70, 0.55);
    background: linear-gradient(135deg, #ef233c, #ff5e3a);
    color: #fff !important;
}
.btn-report-nav i { font-size: 1rem; }
@keyframes reportPulse {
    0% { box-shadow: 0 3px 10px rgba(230, 57, 70, 0.38); }
    50% { box-shadow: 0 3px 18px rgba(230, 57, 70, 0.65); }
    100% { box-shadow: 0 3px 10px rgba(230, 57, 70, 0.38); }
}

/* 导航栏消防方针标语 */
.nav-slogan {
    align-items: center;
    gap: 0.55rem;
    padding: 0.4rem 0.9rem;
    margin-right: 0.85rem;
    border-radius: 50px;
    background: rgba(255, 255, 255, 0.08);
    border: 1px solid rgba(255, 255, 255, 0.12);
    color: rgba(255, 255, 255, 0.9);
    font-size: 0.86rem;
    font-weight: 600;
    letter-spacing: 0.5px;
    transition: all 0.2s ease;
}
.nav-slogan i {
    color: #ff6b35;
    font-size: 1rem;
    animation: flameFlicker 2s ease-in-out infinite;
}
.nav-slogan em {
    font-style: normal;
    opacity: 0.55;
    margin: 0 0.1rem;
}
.nav-slogan:hover {
    background: rgba(255, 255, 255, 0.14);
    border-color: rgba(255, 255, 255, 0.22);
    color: #fff;
}
@keyframes flameFlicker {
    0%, 100% { opacity: 1; transform: scale(1); }
    50% { opacity: 0.75; transform: scale(1.12); }
}

/* ===== 主内容区 ===== */
.main-content { padding: 24px; }
@media (max-width: 768px) { .main-content { padding: 16px; } }

/* ===== 页面头部 ===== */
.page-header-bar {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 20px;
    flex-wrap: wrap;
    gap: 12px;
}
.page-header-bar h4 {
    color: var(--primary-800);
    font-weight: 700;
    font-size: 1.35rem;
    letter-spacing: 0.3px;
    margin: 0;
}

/* ===== 顶部操作横幅 ===== */
.hero-banner {
    background: linear-gradient(135deg, #0f1b3a 0%, #1e3f7a 55%, #2563eb 100%);
    color: #fff;
    border-radius: var(--radius);
    padding: 24px 28px;
    margin-bottom: 24px;
    box-shadow: var(--shadow-lg);
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    align-items: center;
    gap: 16px;
}
.hero-banner .hero-title {
    font-size: 1.5rem;
    font-weight: 700;
    letter-spacing: 0.5px;
}
.hero-banner .hero-subtitle {
    font-size: 0.95rem;
    opacity: 0.85;
    margin-top: 6px;
}
.hero-banner .btn-light {
    background: #fff;
    color: var(--accent-red);
    border: none;
    font-weight: 600;
    padding: 0.75rem 1.5rem;
    box-shadow: 0 4px 14px rgba(0,0,0,0.12);
}
.hero-banner .btn-light:hover {
    background: var(--accent-red-50);
    color: var(--accent-red);
}

/* ===== 统计卡片（精致版） ===== */
.stat-card {
    position: relative;
    display: flex;
    align-items: center;
    padding: 22px 24px;
    border-radius: var(--radius);
    background: #fff;
    box-shadow: 0 4px 14px rgba(15, 23, 42, 0.06), 0 2px 4px rgba(15, 23, 42, 0.04);
    transition: transform 0.28s cubic-bezier(0.22, 1, 0.36, 1), box-shadow 0.28s ease, border-color 0.28s ease;
    border: 1px solid var(--border);
    color: var(--text-main);
    text-decoration: none;
    overflow: hidden;
}
/* 左侧主题色渐变装饰条 */
.stat-card::before {
    content: "";
    position: absolute;
    left: 0; top: 0; bottom: 0;
    width: 5px;
    background: linear-gradient(180deg, var(--c), var(--c2));
}
.stat-card:hover {
    transform: translateY(-4px);
    box-shadow: 0 18px 40px -8px rgba(15, 23, 42, 0.18);
    border-color: var(--c);
}
/* 主题色变量（供图标/数字/装饰条取用） */
.stat-card-red   { --c: var(--accent-red);    --c2: #ff5a66; }
.stat-card-green { --c: var(--accent-green);  --c2: #34d399; }
.stat-card-amber { --c: var(--accent-amber);  --c2: #fbbf24; }
.stat-card-navy  { --c: var(--primary-600);   --c2: #4a7bc8; }

.stat-icon {
    width: 54px;
    height: 54px;
    border-radius: 15px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.7rem;
    margin-right: 16px;
    flex-shrink: 0;
    color: #fff;
    background: linear-gradient(135deg, var(--c), var(--c2));
    box-shadow: 0 8px 18px -5px rgba(15, 23, 42, 0.30);
}
.stat-icon-red    { background: linear-gradient(135deg, var(--accent-red), #ff5a66); }
.stat-icon-green  { background: linear-gradient(135deg, var(--accent-green), #34d399); }
.stat-icon-amber  { background: linear-gradient(135deg, var(--accent-amber), #fbbf24); }
.stat-icon-blue   { background: linear-gradient(135deg, var(--accent-blue), #60a5fa); }
.stat-icon-navy   { background: linear-gradient(135deg, var(--primary-600), #4a7bc8); }
.stat-num {
    font-size: 2.05rem;
    font-weight: 800;
    line-height: 1.1;
    color: var(--c);
    letter-spacing: -0.5px;
}
.stat-label {
    font-size: 0.95rem;
    color: var(--text-sub);
    font-weight: 600;
    margin-top: 3px;
}
.stat-sub {
    font-size: 0.62rem;
    letter-spacing: 1.5px;
    font-weight: 700;
    color: var(--c);
    opacity: 0.6;
    text-transform: uppercase;
    margin-top: 1px;
}

/* ===== 卡片 ===== */
.card {
    border: 1px solid var(--border);
    border-radius: var(--radius);
    box-shadow: var(--shadow-card);
    background: #fff;
    overflow: hidden;
}
.card-header {
    background: #fff;
    border-bottom: 1px solid var(--border);
    font-weight: 700;
    color: var(--primary-800);
    border-radius: var(--radius) var(--radius) 0 0 !important;
    padding: 16px 20px;
    font-size: 1.05rem;
    display: flex;
    align-items: center;
    gap: 0.5rem;
}
.card-body { padding: 20px; }

/* ===== 过滤栏 ===== */
.filter-bar {
    background: #fff;
    padding: 20px 22px;
    border-radius: var(--radius);
    box-shadow: var(--shadow-card);
    border: 1px solid var(--border);
    margin-bottom: 20px;
}
.filter-row {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-end;
    gap: 10px;
}
.filter-item {
    flex: 1 1 0;
    min-width: 118px;
}
.filter-item-keyword {
    flex: 1.35 1 0;
    min-width: 150px;
}
.filter-actions {
    display: flex;
    gap: 8px;
    align-items: flex-end;
    padding-bottom: 1px;
}
.filter-actions .btn {
    white-space: nowrap;
}
.form-label-sm {
    font-size: 0.85rem;
    color: var(--text-sub);
    margin-bottom: 4px;
    font-weight: 500;
}
.form-label {
    font-weight: 500;
    color: var(--primary-700);
    font-size: 0.95rem;
}
.form-control, .form-select {
    border-color: var(--border);
    font-size: 0.95rem;
    border-radius: 8px;
}
.form-control:focus, .form-select:focus {
    border-color: var(--accent-blue);
    box-shadow: 0 0 0 0.2rem rgba(37, 99, 235, 0.12);
}
.form-text { color: var(--text-light); font-size: 0.85rem; }

/* ===== 表格 ===== */
.table {
    font-size: 0.95rem;
}
.table > :not(caption) > * > * {
    padding: 14px 16px;
    border-bottom-color: var(--border);
}
.table thead th {
    background: var(--primary-50);
    border-bottom: 1px solid var(--border);
    font-weight: 700;
    white-space: nowrap;
    color: var(--primary-700);
    font-size: 0.9rem;
    letter-spacing: 0.3px;
}
.table tbody tr:nth-child(even) { background-color: #fafbfc; }
.table tbody tr:hover { background-color: var(--accent-blue-50); }
.table tbody td { color: var(--text-main); vertical-align: middle; }

/* ===== 台账表格列宽：问题列占满剩余空间 ===== */
#ledgerTable, #recentHazardTable, #quickLedgerTable, #userTable, #logTable {
    table-layout: fixed;
    width: 100%;
}
#ledgerTable th, #ledgerTable td,
#recentHazardTable th, #recentHazardTable td,
#quickLedgerTable th, #quickLedgerTable td,
#userTable th, #userTable td,
#logTable th, #logTable td {
    overflow: hidden;
    vertical-align: middle;
}
/* 台账共 10 列：日期 | 区域 | 分类 | 内容 | 状态 | 紧急 | 责任人 | 期限 | 附件 | 操作 */
#ledgerTable th:nth-child(1), #ledgerTable td:nth-child(1) { width: 115px; white-space: nowrap; }
#ledgerTable th:nth-child(2), #ledgerTable td:nth-child(2) { width: 125px; text-align: center; }
#ledgerTable th:nth-child(3), #ledgerTable td:nth-child(3) { width: 130px; text-align: center; }
#ledgerTable th:nth-child(4), #ledgerTable td:nth-child(4) { width: auto; text-align: center; }
#ledgerTable th:nth-child(5), #ledgerTable td:nth-child(5) { width: 85px; text-align: center; }
#ledgerTable th:nth-child(6), #ledgerTable td:nth-child(6) { width: 85px; text-align: center; }
#ledgerTable th:nth-child(7), #ledgerTable td:nth-child(7) { width: 120px; text-align: center; }
#ledgerTable th:nth-child(8), #ledgerTable td:nth-child(8) { width: 110px; text-align: center; white-space: nowrap; }
#ledgerTable th:nth-child(9), #ledgerTable td:nth-child(9) { width: 55px; text-align: center; }
#ledgerTable th:nth-child(10), #ledgerTable td:nth-child(10) { width: 130px; text-align: center; white-space: nowrap; }
#ledgerTable td:nth-child(4) {
    word-break: break-word;
    line-height: 1.55;
    white-space: normal;
}
#ledgerTable td:nth-child(10) .btn {
    padding-left: 0.35rem;
    padding-right: 0.35rem;
}
#ledgerTable td:nth-child(2) .loc-detail {
    text-align: center;
    margin-top: 0.35rem;
    font-size: 0.82em;
    color: var(--text-sub);
}
#ledgerTable td:nth-child(5) .badge,
#ledgerTable td:nth-child(6) .badge { font-size: 0.85em; padding: 0.45em 0.65em; }
#ledgerTable td:nth-child(9) .btn,
#ledgerTable td:nth-child(10) .btn {
    font-size: 1.1rem;
    padding: 0.25rem 0.45rem;
    line-height: 1;
}
#ledgerTable td:nth-child(9) .btn i,
#ledgerTable td:nth-child(10) .btn i { font-size: 1.15rem; }
#ledgerTable th.sortable {
    cursor: pointer;
    user-select: none;
}
#ledgerTable th.sortable:hover { background-color: var(--primary-200); }
#ledgerTable th.sortable .sort-icon {
    font-size: 0.8em;
    margin-left: 4px;
    color: var(--primary-400);
}
#ledgerTable th.sortable.asc .sort-icon,
#ledgerTable th.sortable.desc .sort-icon { color: var(--accent-red); }

/* ===== 最近隐患动态 / 快捷弹窗表格 ===== */
#recentHazardTable th:nth-child(1), #recentHazardTable td:nth-child(1) { width: 115px; white-space: nowrap; }
#recentHazardTable th:nth-child(2), #recentHazardTable td:nth-child(2) { width: 120px; }
#recentHazardTable th:nth-child(3), #recentHazardTable td:nth-child(3) { width: auto; }
#recentHazardTable th:nth-child(4), #recentHazardTable td:nth-child(4) { width: 90px; text-align: center; }
#recentHazardTable td.problem-col,
#quickLedgerTable td.problem-col {
    max-width: none !important;
    white-space: normal !important;
    word-break: break-word;
    line-height: 1.55;
}
#quickLedgerTable th:nth-child(1), #quickLedgerTable td:nth-child(1) { width: 110px; white-space: nowrap; }
#quickLedgerTable th:nth-child(2), #quickLedgerTable td:nth-child(2) { width: 120px; }
#quickLedgerTable th:nth-child(3), #quickLedgerTable td:nth-child(3) { width: auto; }
#quickLedgerTable th:nth-child(4), #quickLedgerTable td:nth-child(4) { width: 85px; text-align: center; }
#quickLedgerTable th:nth-child(5), #quickLedgerTable td:nth-child(5) { width: 95px; text-align: center; }
#quickLedgerTable th:nth-child(6), #quickLedgerTable td:nth-child(6) { width: 125px; }
#quickLedgerTable th:nth-child(7), #quickLedgerTable td:nth-child(7) { width: 110px; white-space: nowrap; }
#quickLedgerTable th:nth-child(8), #quickLedgerTable td:nth-child(8) { width: 55px; text-align: center; }

/* 用户表、日志表默认自适应 */
#userTable th, #logTable th { white-space: nowrap; }
#userTable td, #logTable td { vertical-align: middle; }

/* ===== 区域标签（按区域着色，更直观） ===== */
.loc-badge {
    display: inline-block;
    padding: 0.25em 0.6em;
    border-radius: 6px;
    font-size: 0.85em;
    font-weight: 600;
    line-height: 1.4;
    white-space: nowrap;
}
/* 区域标签统一使用蓝色系深浅，避免红/绿/青/紫撞色造成的割裂感 */
.loc-nan   { background: #1e3a8a; color: #fff; }
.loc-bei   { background: #2563eb; color: #fff; }
.loc-menz  { background: #3b82f6; color: #fff; }
.loc-bang  { background: #60a5fa; color: #fff; }
.loc-yimei { background: #93c5fd; color: #0f1b3a; }
.loc-qita  { background: #cbd5e1; color: #334155; }

/* ===== 按钮 ===== */
.btn-danger {
    background: var(--accent-red);
    border-color: var(--accent-red);
    font-weight: 600;
}
.btn-danger:hover, .btn-danger:focus {
    background: var(--accent-red-700);
    border-color: var(--accent-red-700);
}
.btn-primary {
    background: var(--accent-blue);
    border-color: var(--accent-blue);
    font-weight: 600;
}
.btn-primary:hover, .btn-primary:focus {
    background: #1d4ed8;
    border-color: #1d4ed8;
}
.btn-outline-secondary {
    border-color: var(--primary-300);
    color: var(--primary-600);
    font-weight: 500;
}
.btn-outline-secondary:hover {
    background: var(--primary-100);
    border-color: var(--primary-300);
    color: var(--primary-800);
}
.btn-link {
    text-decoration: none;
    font-weight: 500;
}
.btn-link:hover { text-decoration: underline; }

/* ===== 分页 ===== */
.pagination .page-link {
    color: var(--primary-600);
    border-color: var(--border);
    font-weight: 500;
    padding: 0.4rem 0.65rem;
}
.pagination .page-item.active .page-link {
    background: var(--accent-blue);
    border-color: var(--accent-blue);
    color: #fff;
}
.pagination .page-item.disabled .page-link { color: var(--primary-300); }

/* ===== 登录页 ===== */
.login-body {
    background: var(--primary-800);
    min-height: 100vh;
    display: flex;
    align-items: center;
    justify-content: center;
}
.login-wrapper { width: 100%; max-width: 460px; padding: 20px; }
.login-card {
    background: #fff;
    border-radius: var(--radius);
    padding: 40px 36px;
    box-shadow: var(--shadow-lg);
}
.login-header { text-align: center; margin-bottom: 32px; }
.login-logo {
    width: 100%;
    height: auto;
    max-height: 90px;
    object-fit: contain;
    display: block;
    margin: 0 auto 16px;
}
.login-header h3 {
    font-weight: 700;
    color: var(--primary-800);
    margin-bottom: 8px;
    font-size: 1.5rem;
}
.login-header .text-muted { color: var(--text-sub) !important; font-size: 0.9rem; }
.input-group-text {
    background: var(--primary-50);
    border-color: var(--border);
    color: var(--primary-500);
}
.form-control-lg { border-radius: 10px; }

/* ===== 页脚 ===== */
.footer-bar {
    text-align: center;
    padding: 18px;
    color: var(--text-light);
    font-size: 0.85rem;
    border-top: 1px solid var(--border);
    margin-top: 24px;
    background: #fff;
}

/* ===== 模态框 ===== */
.modal-content {
    border: 1px solid var(--border);
    border-radius: var(--radius);
    box-shadow: var(--shadow-lg);
}
.modal-header {
    border-bottom: 1px solid var(--border);
    background: #fff;
    border-radius: var(--radius) var(--radius) 0 0;
}
.modal-title {
    color: var(--primary-800);
    font-weight: 700;
    font-size: 1.1rem;
}
.modal-header.bg-danger .modal-title,
.modal-header.bg-danger .btn-close-white,
.modal-header.bg-danger { color: #fff !important; background: var(--accent-red) !important; border-bottom-color: rgba(255,255,255,0.2); }
/* 强制关闭按钮显示 X，避免字体缺失/缓存导致显示为方框 */
.btn-close {
    background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='%23000'%3e%3cpath d='M.293.293a1 1 0 0 1 1.414 0L8 6.586 14.293.293a1 1 0 1 1 1.414 1.414L9.414 8l6.293 6.293a1 1 0 0 1-1.414 1.414L8 9.414l-6.293 6.293a1 1 0 0 1-1.414-1.414L6.586 8 .293 1.707a1 1 0 0 1 0-1.414z'/%3e%3c/svg%3e") !important;
    background-size: 1em;
}
.modal-header.bg-danger .btn-close { filter: invert(1) grayscale(100%) brightness(200%); }
.modal-footer { border-top: 1px solid var(--border); }

/* ===== 详情页 ===== */
.detail-label {
    color: var(--text-sub);
    font-size: 0.85rem;
    font-weight: 500;
    margin-bottom: 4px;
}
.detail-value {
    color: var(--text-main);
    font-weight: 600;
    font-size: 1rem;
}

/* ===== 首页提醒横幅（替代邮件通知） ===== */
.notif-bar {
    border-radius: var(--radius);
    padding: 16px 20px;
    margin-bottom: 24px;
    color: #fff;
    box-shadow: var(--shadow-card);
    display: flex;
    flex-direction: column;
    gap: 12px;
    border: 1px solid transparent;
}
.notif-bar.sev-overdue { background: var(--accent-red); border-color: var(--accent-red-700); }
.notif-bar.sev-urgent  { background: #b91c1c; }
.notif-bar.sev-today   { background: var(--accent-amber); }
.notif-bar.sev-soon    { background: #fff; border-color: var(--accent-amber); color: var(--accent-amber); }
.notif-bar.sev-soon .notif-link,
.notif-bar.sev-soon .notif-title { color: var(--accent-amber); }
.notif-bar.sev-soon .notif-summary { color: var(--accent-amber); opacity: 0.9; }
.notif-bar.sev-soon .btn-light { background: var(--accent-amber); color: #fff; border: none; }
.notif-bar.sev-soon .btn-outline-light { color: var(--accent-amber); border-color: var(--accent-amber); }
.notif-bar.sev-soon .btn-outline-light:hover { background: var(--accent-amber-50); color: var(--accent-amber); }

.notif-head { display: flex; align-items: center; gap: 14px; }
.notif-icon { font-size: 1.8rem; flex-shrink: 0; }
.notif-text { flex: 1 1 auto; min-width: 0; }
.notif-title { font-weight: 700; font-size: 1.1rem; line-height: 1.3; }
.notif-summary { font-size: 0.95rem; opacity: 0.95; margin-top: 4px; }
.notif-bar .btn-light { color: var(--accent-red); font-weight: 600; border: none; }
.notif-bar .btn-outline-light { color: #fff; border-color: rgba(255,255,255,0.6); }
.notif-bar .btn-outline-light:hover { background: rgba(255,255,255,0.15); color: #fff; }

.notif-list {
    margin-top: 4px;
    max-height: 300px;
    overflow: auto;
    border-radius: var(--radius-sm);
    background: rgba(255,255,255,0.12);
}
.notif-bar.sev-soon .notif-list { background: var(--accent-amber-50); }
.notif-list table { width: 100%; color: inherit; margin: 0; }
.notif-list th, .notif-list td {
    padding: 8px 12px;
    border-top: 1px solid rgba(255,255,255,0.2);
    font-size: 0.9rem;
}
.notif-bar.sev-soon .notif-list th,
.notif-bar.sev-soon .notif-list td { border-top-color: rgba(217,119,6,0.15); }
.notif-list thead th { font-weight: 700; opacity: 0.92; }
.notif-list tbody tr:hover { background: rgba(255,255,255,0.18); }
.notif-bar.sev-soon .notif-list tbody tr:hover { background: rgba(217,119,6,0.08); }

/* ===== 响应式 ===== */
@media (max-width: 768px) {
    body { font-size: 15px; }
    .hero-banner { padding: 18px 20px; }
    .hero-banner .hero-title { font-size: 1.2rem; }
    .stat-card { padding: 16px; }
    .stat-icon { width: 44px; height: 44px; font-size: 1.4rem; margin-right: 12px; }
    .stat-num { font-size: 1.6rem; }
    .stat-label { font-size: 0.85rem; }
    .page-header-bar h4 { font-size: 1.15rem; }
    .card-header { padding: 14px 16px; font-size: 1rem; }
    .card-body { padding: 16px; }
    .filter-bar { padding: 16px; }
    .table > :not(caption) > * > * { padding: 12px 10px; }
    .loc-badge { font-size: 0.8em; padding: 0.2em 0.45em; }
    /* 移动端表格列宽收紧（10 列） */
    #ledgerTable th:nth-child(1), #ledgerTable td:nth-child(1) { width: 90px; }
    #ledgerTable th:nth-child(2), #ledgerTable td:nth-child(2) { width: 95px; }
    #ledgerTable th:nth-child(3), #ledgerTable td:nth-child(3) { width: 95px; }
    #ledgerTable th:nth-child(5), #ledgerTable td:nth-child(5) { width: 70px; }
    #ledgerTable th:nth-child(6), #ledgerTable td:nth-child(6) { width: 70px; }
    #ledgerTable th:nth-child(7), #ledgerTable td:nth-child(7) { width: 100px; }
    #ledgerTable th:nth-child(8), #ledgerTable td:nth-child(8) { width: 80px; }
    #ledgerTable th:nth-child(9), #ledgerTable td:nth-child(9) { width: 45px; }
    #ledgerTable th:nth-child(10), #ledgerTable td:nth-child(10) { width: 90px; }
    #recentHazardTable th:nth-child(1), #recentHazardTable td:nth-child(1) { width: 85px; }
    #recentHazardTable th:nth-child(2), #recentHazardTable td:nth-child(2) { width: 95px; }
    #recentHazardTable th:nth-child(4), #recentHazardTable td:nth-child(4) { width: 75px; }
    #quickLedgerTable th:nth-child(1), #quickLedgerTable td:nth-child(1) { width: 85px; }
    #quickLedgerTable th:nth-child(2), #quickLedgerTable td:nth-child(2) { width: 95px; }
    #quickLedgerTable th:nth-child(4), #quickLedgerTable td:nth-child(4) { width: 70px; }
    #quickLedgerTable th:nth-child(5), #quickLedgerTable td:nth-child(5) { width: 80px; }
    #quickLedgerTable th:nth-child(7), #quickLedgerTable td:nth-child(7) { width: 95px; }
}

/* ===== 滚动条 ===== */
.table-responsive {
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
}
.table-responsive::-webkit-scrollbar { height: 8px; }
.table-responsive::-webkit-scrollbar-thumb { background: var(--primary-300); border-radius: 4px; }
.table-responsive::-webkit-scrollbar-track { background: var(--primary-50); }

/* ============================================================
   炫酷增强：动态背景 / 玻璃拟态 / 入场动效 / 发光
   纯 CSS 实现，不依赖外部图片或第三方库
   ============================================================ */

/* 背景层：彩色光晕缓慢浮动 + 科技感网格（盖在 html 背景之上、内容之下） */
body::before {
    content: "";
    position: fixed;
    inset: 0;
    z-index: -1;
    pointer-events: none;
    background:
        radial-gradient(circle at 12% 18%, rgba(59, 130, 246, 0.18), transparent 38%),
        radial-gradient(circle at 88% 12%, rgba(124, 58, 237, 0.14), transparent 38%),
        radial-gradient(circle at 50% 95%, rgba(37, 99, 235, 0.16), transparent 42%);
    animation: bgFloat 22s ease-in-out infinite alternate;
}
body::after {
    content: "";
    position: fixed;
    inset: 0;
    z-index: -1;
    pointer-events: none;
    background-image:
        linear-gradient(rgba(30, 64, 175, 0.05) 1px, transparent 1px),
        linear-gradient(90deg, rgba(30, 64, 175, 0.05) 1px, transparent 1px);
    background-size: 42px 42px;
    -webkit-mask-image: radial-gradient(ellipse 80% 70% at 50% 35%, #000 40%, transparent 100%);
    mask-image: radial-gradient(ellipse 80% 70% at 50% 35%, #000 40%, transparent 100%);
}
@keyframes bgFloat {
    0%   { background-position: 0 0, 0 0, 0 0; }
    100% { background-position: 40px 30px, -30px 20px, 20px -40px; }
}

/* 玻璃拟态卡片 */
.card {
    background: rgba(255, 255, 255, 0.74);
    backdrop-filter: blur(14px);
    -webkit-backdrop-filter: blur(14px);
    border: 1px solid rgba(255, 255, 255, 0.65);
}
.stat-card {
    background: rgba(255, 255, 255, 0.80);
    backdrop-filter: blur(14px);
    -webkit-backdrop-filter: blur(14px);
    border: 1px solid rgba(255, 255, 255, 0.72);
    position: relative;
    overflow: hidden;
}
/* 卡片悬停流光 */
.stat-card::after {
    content: "";
    position: absolute;
    inset: 0;
    background: linear-gradient(120deg, transparent 30%, rgba(255, 255, 255, 0.40) 50%, transparent 70%);
    transform: translateX(-120%);
    transition: transform 0.8s ease;
    pointer-events: none;
}
.stat-card:hover::after { transform: translateX(120%); }
.stat-card:hover {
    transform: translateY(-4px);
    box-shadow: 0 18px 40px -8px rgba(15, 23, 42, 0.18);
    border-color: var(--c);
}

/* 导航栏毛玻璃 */
.main-nav {
    background: rgba(15, 23, 42, 0.82);
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
}

/* 入场淡入上浮 */
@keyframes fadeInUp {
    from { opacity: 0; transform: translateY(24px); }
    to   { opacity: 1; transform: translateY(0); }
}
.hero-banner  { animation: fadeInUp 0.6s cubic-bezier(0.22, 1, 0.36, 1) both; }
.stat-card    { animation: fadeInUp 0.55s cubic-bezier(0.22, 1, 0.36, 1) both; }
.card         { animation: fadeInUp 0.5s cubic-bezier(0.22, 1, 0.36, 1) both; }

/* 标题渐变发光 */
.hero-title {
    background: linear-gradient(120deg, #ffffff 20%, #bfdbfe 55%, #fecaca 90%);
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
    text-shadow: 0 0 24px rgba(255, 255, 255, 0.2);
}
.hero-subtitle { text-shadow: 0 1px 8px rgba(0, 0, 0, 0.25); }

/* 统计图标脉冲 */
.stat-icon { animation: iconPulse 3s ease-in-out infinite; }
@keyframes iconPulse {
    0%, 100% { transform: scale(1); }
    50%      { transform: scale(1.08); }
}

/* 按钮发光增强 */
.btn { transition: all 0.2s ease; }
.btn:hover { box-shadow: 0 6px 20px rgba(15, 23, 42, 0.18); }

/* 上报按钮强化光晕 */
.btn-report-nav {
    box-shadow: 0 3px 12px rgba(230, 57, 70, 0.45), 0 0 0 0 rgba(230, 57, 70, 0.5);
}
.btn-report-nav:hover {
    box-shadow: 0 6px 18px rgba(230, 57, 70, 0.6), 0 0 0 6px rgba(230, 57, 70, 0.12);
}

/* 表格行悬停左侧蓝条微光 */
.table tbody tr:hover { box-shadow: inset 3px 0 0 var(--accent-blue); }

/* 卡片头部左侧渐变装饰条 */
.card-header { position: relative; }
.card-header::before {
    content: "";
    position: absolute;
    left: 0;
    top: 18%;
    width: 4px;
    height: 64%;
    border-radius: 4px;
    background: linear-gradient(180deg, #3b82f6, #8b5cf6);
}

/* 统计数字滚动时的微弱放大反馈 */
.stat-num.is-counting { animation: numPop 0.9s ease; }
@keyframes numPop {
    0%   { transform: scale(0.8); opacity: 0.4; }
    60%  { transform: scale(1.05); }
    100% { transform: scale(1); opacity: 1; }
}

/* 水波纹点击效果 */
.ripple-effect {
    position: absolute;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.45);
    transform: scale(0);
    animation: rippleAnim 0.6s ease-out forwards;
    pointer-events: none;
}
@keyframes rippleAnim {
    to { transform: scale(4); opacity: 0; }
}

/* ===== 最近隐患动态滚动列表 ===== */
.recent-scroll-wrap {
    height: 260px;
    overflow: hidden;
    position: relative;
    background: rgba(255,255,255,0.45);
}
.recent-scroll-wrap::before,
.recent-scroll-wrap::after {
    content: "";
    position: absolute;
    left: 0;
    right: 0;
    height: 28px;
    pointer-events: none;
    z-index: 2;
}
.recent-scroll-wrap::before {
    top: 0;
    background: linear-gradient(to bottom, rgba(255,255,255,0.95), transparent);
}
.recent-scroll-wrap::after {
    bottom: 0;
    background: linear-gradient(to top, rgba(255,255,255,0.95), transparent);
}
.recent-scroll-list {
    padding: 12px 16px;
}
.recent-scroll-list.is-scrolling:hover {
    animation-play-state: paused !important;
}
.recent-scroll-item {
    padding: 12px 14px;
    margin-bottom: 10px;
    border-radius: 10px;
    background: rgba(255,255,255,0.85);
    border: 1px solid rgba(212, 224, 240, 0.8);
    box-shadow: 0 2px 8px rgba(15, 23, 42, 0.04);
    cursor: pointer;
    transition: all 0.2s ease;
}
.recent-scroll-item:hover {
    transform: translateX(4px);
    border-color: var(--accent-blue);
    box-shadow: 0 4px 14px rgba(59, 130, 246, 0.12);
}
.recent-scroll-meta {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-bottom: 6px;
    flex-wrap: wrap;
}
.recent-scroll-date {
    font-size: 0.85rem;
    color: var(--text-sub);
    font-weight: 500;
}
.recent-scroll-body {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    gap: 10px;
}
.recent-scroll-problem {
    flex: 1 1 auto;
    font-size: 0.95rem;
    color: var(--text-main);
    line-height: 1.5;
    word-break: break-word;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}
.recent-scroll-status {
    flex-shrink: 0;
    white-space: nowrap;
}
@keyframes scrollRecent {
    0%   { transform: translateY(0); }
    100% { transform: translateY(-50%); }
}
@media (max-width: 768px) {
    .recent-scroll-wrap { height: 220px; }
    .recent-scroll-body { flex-direction: column; gap: 6px; }
}

/* 3D 卡片倾斜容器透视 */
.stat-card { transform-style: preserve-3d; }

/* 粒子画布 */
#particleCanvas {
    position: fixed;
    inset: 0;
    z-index: -2;
    pointer-events: none;
}

/* 尊重无障碍：减少动效偏好时关闭动画 */
@media (prefers-reduced-motion: reduce) {
    body::before, .stat-icon, .btn-report-nav { animation: none !important; }
    .hero-banner, .stat-card, .card { animation: none !important; }
}