/* ══ 内联复选框/单选框：垂直居中，消除所有默认间距 ══ */
label > input[type="checkbox"],
label > input[type="radio"] {
  vertical-align: middle;
  margin: 0 2px 0 0;
}

/* ══════════════════════════════ 登录页（沉浸式设计） ══════════════════════════════ */
#loginOverlay {
  position: fixed; inset: 0; z-index: 9500;
  background:
    radial-gradient(ellipse 70% 80% at 25% 55%, rgba(0,100,180,.38) 0%, transparent 65%),
    radial-gradient(ellipse 50% 60% at 75% 20%, rgba(0,60,130,.28) 0%, transparent 60%),
    linear-gradient(148deg, #050e1c 0%, #081b36 30%, #0b2f58 58%, #0a4a7a 80%, #0776aa 100%);
  display: flex; align-items: stretch;
}
#loginOverlay.hidden { display: none; }

/* 主布局 */
.login-layout {
  display: flex; width: 100%; min-height: 100vh;
  align-items: center; position: relative; overflow: hidden;
}

/* 装饰光晕 */
.login-deco-circle { position: absolute; border-radius: 50%; pointer-events: none; z-index: 0; }
.ldc-1 {
  width: 560px; height: 560px; top: -160px; left: -120px;
  background: radial-gradient(circle, rgba(0,140,210,.14) 0%, transparent 65%);
}
.ldc-2 {
  width: 380px; height: 380px; bottom: -120px; left: 38%;
  background: radial-gradient(circle, rgba(0,80,160,.22) 0%, transparent 65%);
}
.ldc-3 {
  width: 220px; height: 220px; top: 25%; right: 440px;
  background: radial-gradient(circle, rgba(255,255,255,.05) 0%, transparent 65%);
}

/* 底部波浪 */
.login-wave-bottom {
  position: absolute; bottom: 0; left: 0; right: 0; height: 110px;
  pointer-events: none; z-index: 0;
}
.login-wave-bottom svg { width: 100%; height: 100%; }

/* ── 左侧信息区（直接浮于背景，无容器框） ── */
.login-info-area {
  flex: 1; padding: 52px 56px 44px 72px;
  color: #fff; position: relative; z-index: 1;
  display: flex; flex-direction: column; justify-content: center;
}
/* 与右侧之间的极细渐变分割线 */
.login-info-area::after {
  content: ''; position: absolute; right: 0; top: 8%; bottom: 8%;
  width: 1px;
  background: linear-gradient(to bottom,
    transparent 0%, rgba(255,255,255,.1) 25%,
    rgba(255,255,255,.16) 50%, rgba(255,255,255,.1) 75%, transparent 100%);
}

/* 品牌区 */
.login-brand-row { display: flex; align-items: center; gap: 18px; margin-bottom: 20px; }
.login-brand-icon {
  width: 62px; height: 62px; border-radius: 17px; flex-shrink: 0;
  background: linear-gradient(135deg, rgba(0,190,230,.28) 0%, rgba(0,110,180,.38) 100%);
  border: 1px solid rgba(255,255,255,.22);
  display: flex; align-items: center; justify-content: center;
  font-size: 30px; color: #fff;
  box-shadow: 0 6px 24px rgba(0,0,0,.28), inset 0 1px 0 rgba(255,255,255,.12);
}
.login-brand-name { font-size: 20px; font-weight: 800; color: #fff; line-height: 1.35; letter-spacing: .4px; }
.login-brand-en { font-size: 11px; color: rgba(255,255,255,.38); margin-top: 5px; letter-spacing: .5px; }

/* 标语 */
.login-tagline-wrap { margin-bottom: 22px; padding-bottom: 20px; border-bottom: 1px solid rgba(255,255,255,.07); }
.login-tagline { font-size: 16px; color: rgba(255,255,255,.75); letter-spacing: 1px; line-height: 2; }
.login-tagline em { font-style: normal; color: #38d9f5; font-weight: 600; }

/* ── 关键数字条 ── */
.login-stats-row {
  display: grid; grid-template-columns: repeat(4, 1fr);
  margin-bottom: 22px; padding: 16px 0;
  border-top: 1px solid rgba(255,255,255,.07);
  border-bottom: 1px solid rgba(255,255,255,.07);
}
.login-stat { text-align: center; padding: 4px 6px; }
.login-stat + .login-stat { border-left: 1px solid rgba(255,255,255,.07); }
.login-stat-num {
  font-size: 28px; font-weight: 900; color: #fff; line-height: 1;
  letter-spacing: -0.5px;
}
.login-stat-num span { font-size: 13px; font-weight: 500; color: #38d9f5; margin-left: 1px; }
.login-stat-label { font-size: 11px; color: rgba(255,255,255,.42); margin-top: 5px; line-height: 1.4; }

/* 小节标题 */
.login-sec-label {
  font-size: 11px; color: rgba(255,255,255,.32);
  letter-spacing: 2.5px; text-transform: uppercase;
  margin-bottom: 12px; display: flex; align-items: center; gap: 10px;
}
.login-sec-label::after { content: ''; flex: 1; height: 1px; background: rgba(255,255,255,.07); }

/* 主营业务 2×2 文字列表 */
.login-svc-grid {
  display: grid; grid-template-columns: 1fr 1fr; gap: 0;
  margin-bottom: 10px;
}
.login-svc-item {
  display: flex; align-items: flex-start; gap: 10px;
  padding: 11px 20px 11px 0;
  border-bottom: 1px solid rgba(255,255,255,.05);
}
.login-svc-item:nth-child(odd) { padding-right: 22px; border-right: 1px solid rgba(255,255,255,.05); }
.login-svc-item:nth-last-child(-n+2) { border-bottom: none; }
.login-svc-dot {
  width: 5px; height: 5px; border-radius: 50%; flex-shrink: 0; margin-top: 7px;
  background: #38d9f5; box-shadow: 0 0 6px rgba(56,217,245,.55);
}
.login-svc-name { font-size: 14px; font-weight: 700; color: rgba(255,255,255,.9); margin-bottom: 3px; }
.login-svc-desc { font-size: 12px; color: rgba(255,255,255,.45); line-height: 1.55; }

/* 更多业务标签 */
.login-biz-tags { display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: 20px; margin-top: 12px; }
.login-biz-tag {
  font-size: 11.5px; color: rgba(255,255,255,.5);
  padding: 3px 9px;
  border: 1px solid rgba(255,255,255,.1); border-radius: 3px;
}

/* 资质徽标 */
.login-cert-row { display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: 18px; }
.login-cert-badge {
  background: rgba(255,255,255,.07); border: 1px solid rgba(255,255,255,.13);
  color: rgba(255,255,255,.68); border-radius: 3px;
  padding: 5px 11px; font-size: 11.5px; font-weight: 600; letter-spacing: .3px;
}

/* 企业理念 */
.login-motto {
  font-size: 12.5px; color: rgba(255,255,255,.38); letter-spacing: .5px;
}
.login-motto em { font-style: normal; color: rgba(255,255,255,.55); }

.login-est-note { font-size: 11.5px; color: rgba(255,255,255,.3); margin-top: 10px; }

/* ── 右侧登录卡片区 ── */
.login-card-area {
  width: 420px; flex-shrink: 0;
  display: flex; align-items: center; justify-content: center;
  padding: 48px 52px; position: relative; z-index: 1;
}
.login-box {
  background: rgba(255,255,255,.97); border-radius: 22px;
  padding: 48px 38px 40px; width: 100%;
  box-shadow: 0 32px 80px rgba(0,0,0,.45), 0 0 0 1px rgba(255,255,255,.06);
}
.login-logo { text-align: center; margin-bottom: 30px; }
.login-logo i { font-size: 48px; color: #1565c0; display: block; }
.login-title { font-size: 21px; font-weight: 700; color: #1a3a52; margin-top: 8px; }
.login-subtitle { font-size: 13px; color: #aaa; margin-top: 4px; }

/* 手机端：左侧隐藏，登录卡居中 */
@media (max-width: 900px) {
  .login-info-area { display: none; }
  .login-card-area { width: 100%; padding: 24px 16px; }
  .login-box { max-width: 360px; margin: 0 auto; }
}

:root {
  --navy: #0d2137;
  --navy-mid: #123456;
  --blue: #1565c0;
  --blue-light: #1e88e5;
  --blue-pale: #e3f0fd;
  --accent: #00b4d8;
  --sidebar-w: 240px;
  --topbar-h: 56px;
  --radius: 12px;
}

* { box-sizing: border-box; }
body {
  margin: 0;
  font-family: -apple-system, "Microsoft YaHei", "微软雅黑", "PingFang SC", sans-serif;
  background: #eef2f7;
  color: #2c3e50;
}

/* ══════════════════════════════ Layout ══════════════════════════════ */
#app { display: flex; min-height: 100vh; }

#sidebar {
  width: var(--sidebar-w);
  min-height: 100vh;
  background: linear-gradient(175deg, #0d2137 0%, #0a3d62 60%, #0c4e7f 100%);
  position: fixed; left: 0; top: 0; bottom: 0; z-index: 200;
  display: flex; flex-direction: column;
  transition: transform .25s;
  overflow-y: auto;
  box-shadow: 4px 0 20px rgba(0,0,0,.18);
}

#main { margin-left: var(--sidebar-w); flex: 1; display: flex; flex-direction: column; min-height: 100vh; }

#topbar {
  height: var(--topbar-h);
  background: #fff;
  border-bottom: 1px solid #dde4ee;
  position: sticky; top: 0; z-index: 100;
  display: flex; align-items: center; padding: 0 24px; gap: 12px;
  box-shadow: 0 2px 12px rgba(0,0,0,.06);
}

#content { flex: 1; padding: 24px; }

/* ══════════════════════════════ Sidebar ══════════════════════════════ */
.sidebar-brand {
  display: flex; align-items: center; gap: 14px;
  padding: 22px 18px 18px;
  color: #fff;
  border-bottom: 1px solid rgba(255,255,255,.1);
}
.sidebar-logo-icon {
  width: 42px; height: 42px; border-radius: 10px;
  background: linear-gradient(135deg, #1e88e5, #00b4d8);
  display: flex; align-items: center; justify-content: center;
  font-size: 22px; color: #fff; flex-shrink: 0;
  box-shadow: 0 4px 12px rgba(30,136,229,.4);
}
.sidebar-brand-text { line-height: 1.3; }
.sidebar-brand-name { font-size: 16px; font-weight: 700; color: #fff; letter-spacing: .5px; }
.sidebar-brand-sub { font-size: 11px; color: rgba(255,255,255,.55); margin-top: 2px; }

.sidebar-nav { list-style: none; padding: 10px 0; margin: 0; }
.sidebar-nav .nav-section {
  font-size: 10px; color: rgba(255,255,255,.35);
  padding: 16px 20px 6px; letter-spacing: 1.5px; text-transform: uppercase;
}
.sidebar-nav .nav-link {
  display: flex; align-items: center; gap: 10px;
  padding: 10px 20px; color: rgba(255,255,255,.75);
  text-decoration: none; font-size: 13.5px;
  border-left: 3px solid transparent;
  transition: all .18s;
}
.sidebar-nav .nav-link i { font-size: 16px; width: 20px; text-align: center; flex-shrink: 0; opacity: .8; }
.sidebar-nav .nav-link:hover { background: rgba(255,255,255,.1); color: #fff; border-left-color: rgba(0,180,216,.5); }
.sidebar-nav .nav-link.active {
  background: linear-gradient(90deg, rgba(0,180,216,.25), rgba(0,180,216,.05));
  color: #fff; border-left-color: #00b4d8;
  font-weight: 600;
}
.sidebar-nav .nav-link.active i { opacity: 1; }

/* ══════════════════════════════ Topbar ══════════════════════════════ */
#sidebarToggle { background: none; border: none; color: #6b7c93; font-size: 22px; padding: 4px 8px; cursor: pointer; border-radius: 6px; }
#sidebarToggle:hover { background: #f0f4f8; }
#pageTitle { margin: 0; font-size: 16px; font-weight: 700; color: var(--navy-mid); }
#currentTime { font-size: 13px; color: #8898aa; background: #f5f7fa; padding: 4px 12px; border-radius: 20px; }

/* ══════════════════════════════ Stat Cards ══════════════════════════════ */
.stat-card {
  background: #fff; border-radius: var(--radius); padding: 20px 22px;
  box-shadow: 0 2px 12px rgba(0,0,0,.06);
  position: relative; overflow: hidden;
  transition: transform .2s, box-shadow .2s;
}
.stat-card:hover { transform: translateY(-3px); box-shadow: 0 8px 24px rgba(0,0,0,.1); }
.stat-card::before {
  content: ''; position: absolute; top: 0; left: 0; right: 0; height: 4px;
  background: linear-gradient(90deg, var(--blue-light), var(--accent));
}
.stat-card.red::before { background: linear-gradient(90deg, #e53935, #ff6f61); }
.stat-card.yellow::before { background: linear-gradient(90deg, #f9a825, #ffd600); }
.stat-card.green::before { background: linear-gradient(90deg, #2e7d32, #43a047); }
.stat-card .stat-icon {
  position: absolute; right: 18px; top: 50%; transform: translateY(-50%);
  font-size: 40px; opacity: .06; color: #000;
}
.stat-card .stat-num { font-size: 36px; font-weight: 800; color: var(--navy); line-height: 1; }
.stat-card.red .stat-num { color: #c62828; }
.stat-card.yellow .stat-num { color: #e65100; }
.stat-card.green .stat-num { color: #2e7d32; }
.stat-card .stat-label { font-size: 13px; color: #8898aa; margin-top: 6px; font-weight: 500; }

/* ══════════════════════════════ Badges ══════════════════════════════ */
.level-badge {
  display: inline-flex; align-items: center; gap: 5px;
  padding: 3px 10px; border-radius: 20px; font-size: 12px; font-weight: 600;
}
.level-red { background: #ffebee; color: #c62828; border: 1px solid #ffcdd2; }
.level-yellow { background: #fff8e1; color: #e65100; border: 1px solid #ffe082; }
.level-green { background: #e8f5e9; color: #2e7d32; border: 1px solid #c8e6c9; }
.level-done { background: #f5f5f5; color: #9e9e9e; border: 1px solid #e0e0e0; }
.level-overdue { background: #fff3e0; color: #e65100; border: 1px solid #ffcc80; font-weight: 600; }
.dot { width: 7px; height: 7px; border-radius: 50%; display: inline-block; }
.dot-red { background: #e53935; }
.dot-yellow { background: #ffb300; }
.dot-green { background: #43a047; }
.dot-done { background: #bdbdbd; }
.dot-orange { background: #fb8c00; }

/* ══════════════════════════════ Tables ══════════════════════════════ */
.data-table {
  background: #fff; border-radius: var(--radius);
  box-shadow: 0 2px 12px rgba(0,0,0,.07); overflow: hidden;
}
.data-table .table { margin: 0; font-size: 13px; }
.data-table .table thead th {
  background: linear-gradient(135deg, #f0f5fb, #e8eef7);
  font-weight: 700; color: #34495e; border-bottom: 2px solid #d5dff0;
  white-space: nowrap; padding: 11px 12px; font-size: 12.5px;
}
.data-table .table td {
  vertical-align: top; border-color: #f0f4f8; padding: 10px 12px;
  line-height: 1.5;
}
.data-table .table tbody tr:hover td { background: #f7fbff; }
.data-table .table tbody tr:nth-child(even) td { background: #fafcff; }
.data-table .table tbody tr:nth-child(even):hover td { background: #f0f7ff; }

.table-toolbar {
  padding: 14px 16px; display: flex; align-items: center; gap: 10px;
  background: #fff; border-bottom: 1px solid #edf1f7; border-radius: var(--radius) var(--radius) 0 0;
  flex-wrap: wrap;
}

/* ══════════════════════════════ Sections ══════════════════════════════ */
.page-section {
  background: #fff; border-radius: var(--radius); padding: 22px;
  box-shadow: 0 2px 12px rgba(0,0,0,.06); margin-bottom: 20px;
}
.section-title {
  font-size: 15px; font-weight: 700; color: var(--navy-mid);
  margin-bottom: 16px; display: flex; align-items: center; gap: 10px;
}
.section-title::before {
  content: ''; width: 4px; height: 18px;
  background: linear-gradient(180deg, var(--blue-light), var(--accent));
  border-radius: 2px; display: inline-block;
}
.section-divider {
  display: flex; align-items: center; gap: 14px;
  margin: 28px 0 20px; color: #8898aa; font-size: 13px; font-weight: 600;
}
.section-divider::before, .section-divider::after {
  content: ''; flex: 1; height: 1px; background: #e4eaf2;
}

/* ══════════════════════════════ Countdown ══════════════════════════════ */
.countdown { font-size: 12.5px; font-weight: 700; display: inline-block; }
.countdown.overdue { color: #c62828; background: #ffebee; padding: 2px 7px; border-radius: 4px; }
.countdown.warning { color: #e65100; background: #fff8e1; padding: 2px 7px; border-radius: 4px; }
.countdown.ok { color: #2e7d32; }
.countdown.done { color: #9e9e9e; }

/* ══════════════════════════════ Filters ══════════════════════════════ */
.filter-bar { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; margin-bottom: 14px; }
.filter-bar .form-select, .filter-bar .form-control { font-size: 13px; height: 34px; padding: 4px 10px; }

/* ══════════════════════════════ Charts ══════════════════════════════ */
.chart-box {
  background: #fff; border-radius: var(--radius); padding: 20px;
  box-shadow: 0 2px 12px rgba(0,0,0,.06);
}

/* ══════════════════════════════ Buttons ══════════════════════════════ */
.btn-primary {
  background: linear-gradient(135deg, var(--blue), var(--blue-light));
  border: none; font-weight: 600; letter-spacing: .3px;
}
.btn-primary:hover { background: linear-gradient(135deg, var(--navy-mid), var(--blue)); }
.btn-sm { font-size: 12px; }
.btn-outline-primary { color: var(--blue); border-color: var(--blue); font-weight: 600; }
.btn-outline-primary:hover { background: var(--blue); border-color: var(--blue); }

/* ══════════════════════════════ Password modal overlay ══════════════════════════════ */
.pw-overlay {
  position: fixed; inset: 0; background: rgba(13,33,55,.7);
  display: flex; align-items: center; justify-content: center; z-index: 500;
  backdrop-filter: blur(4px);
}
.pw-box {
  background: #fff; border-radius: 16px; padding: 40px 36px; width: 340px;
  box-shadow: 0 20px 60px rgba(0,0,0,.3); text-align: center;
}
.pw-box h4 { color: var(--navy); font-weight: 700; margin-bottom: 8px; }
.pw-box p { color: #8898aa; font-size: 13px; margin-bottom: 20px; }
.pw-icon { font-size: 48px; color: var(--blue-light); margin-bottom: 16px; }

/* ══════════════════════════════ Import ══════════════════════════════ */
.drop-zone {
  border: 2px dashed #b0c4de; border-radius: var(--radius); padding: 40px;
  text-align: center; background: #f8fbff; cursor: pointer;
  transition: border-color .2s, background .2s;
}
.drop-zone:hover, .drop-zone.drag-over { border-color: var(--blue-light); background: var(--blue-pale); }
.drop-zone i { font-size: 48px; color: #90b4d8; display: block; margin-bottom: 12px; }

/* ══════════════════════════════ Misc ══════════════════════════════ */
.text-truncate-2 { overflow: hidden; display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; word-break: break-all; }
.action-btns { display: flex; gap: 4px; white-space: nowrap; }
.empty-state { text-align: center; padding: 48px 20px; color: #b0bec5; }
.empty-state i { font-size: 52px; display: block; margin-bottom: 14px; }
.tag {
  display: inline-block; padding: 2px 9px; border-radius: 5px;
  font-size: 11.5px; font-weight: 600;
  background: var(--blue-pale); color: var(--blue);
}
.tag.tag-pm { background: #e8f5e9; color: #2e7d32; }
.tag.tag-ap { background: #e3f2fd; color: #1565c0; }
.tag.tag-co { background: #fff3e0; color: #e65100; }
.tag.tag-other { background: #f3e5f5; color: #6a1b9a; }

/* Alert row highlight */
.alert-row-red td { border-left: 3px solid #e53935 !important; }
.alert-row-yellow td:first-child { border-left: 3px solid #ffb300 !important; }

/* ══════════════════════════════ Responsive ══════════════════════════════ */
@media (max-width: 960px) {
  #sidebar { transform: translateX(-100%); transition: transform .25s ease; }
  #sidebar.open { transform: translateX(0); }
  #main { margin-left: 0; }
}

/* ── 平板（641-960px）：表格允许横向滚动，字号稍小 ── */
@media (max-width: 960px) and (min-width: 641px) {
  .data-table { overflow-x: auto; }
  .data-table table { min-width: 700px; font-size: 12.5px; }
  .filter-bar { flex-wrap: wrap; gap: 6px !important; }
  .filter-bar .ms-auto { margin-left: 0 !important; width: 100%; justify-content: flex-end; }
}

/* ── 手机（≤640px）：卡片布局，隐藏表头和非关键列 ── */
@media (max-width: 640px) {
  /* 筛选栏换行 */
  .filter-bar { flex-wrap: wrap; gap: 6px !important; padding: 8px !important; }
  .filter-bar select, .filter-bar input { width: calc(50% - 4px) !important; font-size: 13px; }
  .filter-bar .ms-auto { margin-left: 0 !important; width: 100%; }

  /* 倒排管控表 → 卡片 */
  .tasks-table { display: block !important; table-layout: auto !important; }
  .tasks-table colgroup, .tasks-table thead { display: none !important; }
  .tasks-table tbody, .tasks-table tr { display: block !important; }
  .tasks-table tr {
    margin: 0 0 10px 0;
    border: 1px solid #e2e8f0;
    border-radius: 10px;
    padding: 10px 12px;
    background: #fff;
    box-shadow: 0 1px 4px rgba(0,0,0,.06);
    position: relative;
  }
  .tasks-table tr.table-danger  { border-left: 4px solid #e53935 !important; }
  .tasks-table tr.table-warning { border-left: 4px solid #ffb300 !important; }
  .tasks-table td {
    display: flex !important;
    padding: 3px 0 !important;
    border: none !important;
    font-size: 13px;
    align-items: flex-start;
    white-space: normal !important;
  }
  .tasks-table td::before {
    content: attr(data-label);
    min-width: 68px;
    font-size: 11px;
    color: #999;
    flex-shrink: 0;
    padding-top: 1px;
  }
  /* 隐藏勾选框列 */
  .tasks-table td.td-cb { display: none !important; }
  /* 任务名称加粗展开 */
  .tasks-table td.td-name { font-weight: 600; font-size: 14px; }
  .tasks-table td.td-name::before { content: ''; min-width: 0; }
  /* 操作按钮靠右 */
  .tasks-table td.td-ops { justify-content: flex-end; padding-top: 6px !important; }
  .tasks-table td.td-ops::before { content: ''; min-width: 0; }

  /* 合同表 → 横向滚动（内容复杂，卡片不易阅读） */
  .contract-table-wrap { overflow-x: auto !important; }
  .contract-table-wrap table { min-width: 600px; font-size: 12px; }
}

/* 手机侧边栏遮罩 */
#sidebarOverlay {
  display: none;
  position: fixed; inset: 0;
  background: rgba(0,0,0,.45);
  z-index: 99;
}
#sidebarOverlay.show { display: block; }

/* ═══════════════════════════════════════════════════════
   隆泰管理系统 · 精装视觉升级包 v2.0
   ═══════════════════════════════════════════════════════ */

/* ── 字体升级（使用国内可访问的 Google Fonts 镜像） ── */
@import url('https://fonts.font.im/css2?family=Noto+Sans+SC:wght@400;500;700;900&display=swap');

body {
  font-family: "Noto Sans SC", -apple-system, "Microsoft YaHei", "微软雅黑", "PingFang SC", sans-serif;
  -webkit-font-smoothing: antialiased;
}

/* ── 精致滚动条 ── */
::-webkit-scrollbar { width: 5px; height: 5px; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb { background: #c8d6e5; border-radius: 3px; }
::-webkit-scrollbar-thumb:hover { background: #a0b4c8; }

/* ── 页面内容淡入动效 ── */
@keyframes fadeInUp {
  from { opacity: 0; transform: translateY(12px); }
  to   { opacity: 1; transform: translateY(0); }
}
.page-fade-in { animation: fadeInUp .28s cubic-bezier(.25,.8,.25,1) both; }

/* ── 数字浮现动效（count-up 配合使用）── */
@keyframes numPop {
  from { opacity: 0; transform: translateY(6px) scale(.92); }
  to   { opacity: 1; transform: translateY(0) scale(1); }
}
.num-pop { animation: numPop .5s cubic-bezier(.34,1.56,.64,1) both; }

/* ══ 精装统计卡片 v2.0 ══ */
.stat-card {
  background: linear-gradient(145deg, #ffffff 0%, #f6f9ff 100%) !important;
  box-shadow:
    0 1px 2px rgba(0,0,0,.04),
    0 4px 16px rgba(21,101,192,.07),
    inset 0 1px 0 rgba(255,255,255,.9) !important;
  border: 1px solid rgba(21,101,192,.08) !important;
}
.stat-card:hover {
  transform: translateY(-5px) !important;
  box-shadow:
    0 2px 6px rgba(0,0,0,.06),
    0 14px 36px rgba(21,101,192,.14),
    inset 0 1px 0 rgba(255,255,255,.9) !important;
}
.stat-card .stat-num { font-size: 40px !important; font-weight: 900 !important; letter-spacing: -1.5px !important; }
.stat-card .stat-label { font-size: 12px !important; font-weight: 600 !important; letter-spacing: .6px !important; text-transform: uppercase !important; color: #94a3b8 !important; }
.stat-card .stat-icon { font-size: 50px !important; opacity: .06 !important; }
.stat-card.red { background: linear-gradient(145deg, #fff8f8 0%, #fff0f0 100%) !important; border-color: rgba(229,57,53,.1) !important; }
.stat-card.yellow { background: linear-gradient(145deg, #fffcf5 0%, #fff8e8 100%) !important; border-color: rgba(249,168,37,.1) !important; }
.stat-card.green { background: linear-gradient(145deg, #f5fff8 0%, #edfaf1 100%) !important; border-color: rgba(46,125,50,.1) !important; }

/* ── 看板区分隔条升级 ── */
.section-divider {
  font-size: 13px !important; font-weight: 700 !important; letter-spacing: .6px !important;
  color: #1a3a6c !important;
  background: linear-gradient(90deg, #eef4ff 0%, #f5f8ff 60%, transparent 100%) !important;
  padding: 9px 16px !important; border-radius: 8px !important;
  border-left: 4px solid #1565c0 !important;
  margin: 28px 0 20px !important; gap: 10px !important;
}
.section-divider::before, .section-divider::after { display: none !important; }

/* ── 区块标题小竖条升级 ── */
.section-title::before {
  background: linear-gradient(180deg, #1565c0, #00b4d8) !important;
  width: 4px !important; height: 18px !important; border-radius: 3px !important;
}

/* ── 侧边栏 active 态增强 ── */
.sidebar-nav .nav-link.active {
  background: linear-gradient(90deg, rgba(0,212,255,.22), rgba(0,180,216,.04)) !important;
  border-left-color: #00d4ff !important;
  font-weight: 700 !important;
}
.sidebar-nav .nav-link.active i { color: #38d9f5 !important; }
.sidebar-nav .nav-link { transition: all .15s ease !important; }

/* ── Topbar 升级 ── */
#topbar {
  background: linear-gradient(to right, #fff 65%, #f4f8ff 100%) !important;
  border-bottom: 1px solid #e0eaf5 !important;
  box-shadow: 0 2px 20px rgba(21,101,192,.07) !important;
}
#pageTitle { font-size: 15px !important; font-weight: 700 !important; color: #0d2137 !important; letter-spacing: .2px; }
#currentTime {
  background: linear-gradient(135deg, #eef4ff, #e6eeff) !important;
  border: 1px solid #d0dff5 !important; color: #3d5a80 !important;
  font-size: 12.5px !important; font-weight: 600 !important;
  padding: 3px 13px !important; border-radius: 20px !important;
}

/* ── 暗黑模式切换按钮 ── */
#darkModeToggle {
  background: none; border: 1px solid #dde4ee; color: #6b7c93;
  font-size: 14px; padding: 3px 8px; border-radius: 8px; cursor: pointer;
  transition: all .2s;
}
#darkModeToggle:hover { background: #eef4ff; border-color: #1565c0; color: #1565c0; }

/* ══ Welcome Banner ══ */
.welcome-banner {
  background: linear-gradient(135deg, #0d2137 0%, #1565c0 55%, #00b4d8 100%);
  border-radius: 16px; padding: 22px 28px; margin-bottom: 22px;
  color: #fff; position: relative; overflow: hidden;
}
.welcome-banner::before {
  content: ''; position: absolute; right: -50px; top: -50px;
  width: 220px; height: 220px; border-radius: 50%;
  background: rgba(255,255,255,.05); pointer-events: none;
}
.welcome-banner::after {
  content: ''; position: absolute; right: 80px; bottom: -70px;
  width: 160px; height: 160px; border-radius: 50%;
  background: rgba(0,180,216,.15); pointer-events: none;
}
.wb-greeting { font-size: 20px; font-weight: 800; letter-spacing: .2px; position: relative; z-index: 1; }
.wb-date { font-size: 13px; color: rgba(255,255,255,.6); margin-top: 3px; position: relative; z-index: 1; }
.wb-meta { display: flex; flex-wrap: wrap; gap: 18px; margin-top: 14px; position: relative; z-index: 1; }
.wb-meta-item { font-size: 12.5px; color: rgba(255,255,255,.75); display: flex; align-items: center; gap: 6px; }
.wb-meta-item i { color: #38d9f5; font-size: 14px; }
.wb-meta-item strong { color: #fff; font-weight: 700; }

/* ══ 登录页浮动几何动画 ══ */
@keyframes floatY {
  0%, 100% { transform: translateY(0) rotate(0deg); }
  50%       { transform: translateY(-20px) rotate(8deg); }
}
@keyframes floatX {
  0%, 100% { transform: translateX(0) rotate(0deg); }
  50%       { transform: translateX(14px) rotate(-10deg); }
}
@keyframes pulseGlow {
  0%, 100% { opacity: .07; transform: scale(1); }
  50%       { opacity: .15; transform: scale(1.18); }
}
.login-geo { position: absolute; pointer-events: none; z-index: 0; }
.login-geo-1 {
  width: 72px; height: 72px; border: 2px solid rgba(56,217,245,.55);
  border-radius: 18px; top: 14%; right: 24%; opacity: .18;
  animation: floatY 6.5s ease-in-out infinite; transform: rotate(20deg);
}
.login-geo-2 {
  width: 40px; height: 40px; border: 2px solid rgba(255,255,255,.4);
  border-radius: 50%; top: 68%; right: 32%; opacity: .2;
  animation: floatX 4.8s ease-in-out infinite;
}
.login-geo-3 {
  width: 0; height: 0;
  border-left: 24px solid transparent; border-right: 24px solid transparent;
  border-bottom: 42px solid rgba(56,217,245,.3);
  top: 28%; left: 16%; opacity: 1;
  animation: floatY 5.2s ease-in-out infinite 1.2s;
}
.login-geo-4 {
  width: 100px; height: 100px;
  border: 1px solid rgba(255,255,255,.1); border-radius: 24px;
  bottom: 18%; left: 8%; opacity: .15;
  animation: floatX 7.5s ease-in-out infinite .6s; transform: rotate(-15deg);
}
.login-geo-5 {
  width: 28px; height: 28px; border: 2px solid rgba(56,217,245,.4);
  border-radius: 6px; top: 48%; left: 38%; opacity: .2;
  animation: floatY 3.8s ease-in-out infinite .3s; transform: rotate(45deg);
}
.login-geo-pulse {
  position: absolute; border-radius: 50%; pointer-events: none; z-index: 0;
  background: radial-gradient(circle, rgba(0,180,216,.6) 0%, transparent 65%);
}
.login-geo-p1 {
  width: 280px; height: 280px; top: 8%; right: 20%;
  animation: pulseGlow 9s ease-in-out infinite;
}
.login-geo-p2 {
  width: 160px; height: 160px; bottom: 18%; left: 4%;
  animation: pulseGlow 6.5s ease-in-out infinite 2.5s;
}

/* ── 登录表单输入框精装 ── */
.login-box .form-control {
  border: 1.5px solid #dde4ee !important; border-radius: 10px !important;
  padding: 12px 16px !important; font-size: 15px !important;
  background: #f7faff !important;
  transition: border-color .2s, box-shadow .2s, background .2s !important;
}
.login-box .form-control:focus {
  border-color: #1565c0 !important; background: #fff !important;
  box-shadow: 0 0 0 3px rgba(21,101,192,.12) !important;
}
.login-box .btn-primary {
  background: linear-gradient(135deg, #0d2137 0%, #1565c0 55%, #00b4d8 100%) !important;
  border: none !important; border-radius: 10px !important; padding: 13px !important;
  font-size: 15.5px !important; letter-spacing: 1px !important;
  box-shadow: 0 4px 18px rgba(21,101,192,.38) !important;
  transition: all .2s !important;
}
.login-box .btn-primary:hover {
  transform: translateY(-2px) !important;
  box-shadow: 0 8px 28px rgba(21,101,192,.48) !important;
}

/* ── Toast 精装 ── */
#toastContainer .toast {
  border-radius: 12px !important;
  box-shadow: 0 8px 32px rgba(0,0,0,.18), 0 2px 8px rgba(0,0,0,.1) !important;
  font-size: 14px !important; font-weight: 500 !important;
  min-width: 240px; border: none !important;
  backdrop-filter: blur(8px);
}

/* ══ 深色主题 (Dark Mode) ══ */
html[data-theme="dark"] body { background: #0f1724 !important; color: #c8d8f0 !important; }
html[data-theme="dark"] #topbar {
  background: linear-gradient(to right, #131f35 65%, #162540 100%) !important;
  border-bottom-color: #243452 !important;
  box-shadow: 0 2px 20px rgba(0,0,0,.35) !important;
}
html[data-theme="dark"] #pageTitle { color: #90b8e0 !important; }
html[data-theme="dark"] #currentTime { background: #1a2a45 !important; border-color: #253a5c !important; color: #6890b8 !important; }
html[data-theme="dark"] #sidebar {
  background: linear-gradient(175deg, #09111f 0%, #0c1e38 60%, #0e2848 100%) !important;
}
html[data-theme="dark"] .sidebar-nav .nav-link { color: rgba(160,196,228,.7) !important; }
html[data-theme="dark"] .sidebar-nav .nav-link:hover { background: rgba(255,255,255,.06) !important; color: #c8d8f0 !important; }
html[data-theme="dark"] .sidebar-nav .nav-section { color: rgba(160,196,228,.3) !important; }
html[data-theme="dark"] .stat-card {
  background: linear-gradient(145deg, #14213d 0%, #172642 100%) !important;
  border-color: rgba(255,255,255,.05) !important;
  box-shadow: 0 1px 3px rgba(0,0,0,.4), 0 4px 16px rgba(0,0,0,.3), inset 0 1px 0 rgba(255,255,255,.04) !important;
}
html[data-theme="dark"] .stat-card.red { background: linear-gradient(145deg, #2a1218 0%, #301519 100%) !important; }
html[data-theme="dark"] .stat-card.yellow { background: linear-gradient(145deg, #2a2010 0%, #302512 100%) !important; }
html[data-theme="dark"] .stat-card.green { background: linear-gradient(145deg, #0f2216 0%, #122918 100%) !important; }
html[data-theme="dark"] .stat-card .stat-num { color: #c8d8f0 !important; }
html[data-theme="dark"] .stat-card.red .stat-num { color: #ff8080 !important; }
html[data-theme="dark"] .stat-card.yellow .stat-num { color: #ffb860 !important; }
html[data-theme="dark"] .stat-card.green .stat-num { color: #72e88a !important; }
html[data-theme="dark"] .stat-card .stat-label { color: #607090 !important; }
html[data-theme="dark"] .page-section {
  background: #14213d !important; border: 1px solid #243452 !important;
  box-shadow: 0 2px 12px rgba(0,0,0,.25) !important;
}
html[data-theme="dark"] .section-title { color: #90b8e0 !important; }
html[data-theme="dark"] .section-divider {
  background: linear-gradient(90deg, #1a2f50 0%, #162540 60%, transparent 100%) !important;
  border-left-color: #00b4d8 !important; color: #6890b8 !important;
}
html[data-theme="dark"] .data-table {
  background: #14213d !important;
  box-shadow: 0 2px 12px rgba(0,0,0,.3) !important;
}
html[data-theme="dark"] .data-table .table { color: #c8d8f0 !important; }
html[data-theme="dark"] .data-table .table thead th {
  background: linear-gradient(135deg, #1a2f50, #152540) !important;
  color: #90b8e0 !important; border-bottom-color: #243452 !important;
}
html[data-theme="dark"] .data-table .table td { border-color: #1e304a !important; }
html[data-theme="dark"] .data-table .table tbody tr:hover td { background: #1c3050 !important; }
html[data-theme="dark"] .data-table .table tbody tr:nth-child(even) td { background: #162540 !important; }
html[data-theme="dark"] .table-toolbar { background: #14213d !important; border-bottom-color: #243452 !important; }
html[data-theme="dark"] .chart-box { background: #14213d !important; box-shadow: 0 2px 12px rgba(0,0,0,.3) !important; }
html[data-theme="dark"] .welcome-banner {
  background: linear-gradient(135deg, #080f1c 0%, #0d2050 55%, #0c3870 100%) !important;
  border: 1px solid #1e3a60 !important;
}
html[data-theme="dark"] .form-control { background: #162540 !important; border-color: #243452 !important; color: #c8d8f0 !important; }
html[data-theme="dark"] .form-control:focus { background: #1a2f50 !important; border-color: #1565c0 !important; box-shadow: 0 0 0 3px rgba(21,101,192,.2) !important; }
html[data-theme="dark"] .form-select { background-color: #162540 !important; border-color: #243452 !important; color: #c8d8f0 !important; }
html[data-theme="dark"] .modal-content { background: #14213d !important; color: #c8d8f0 !important; border-color: #243452 !important; }
html[data-theme="dark"] .modal-header, html[data-theme="dark"] .modal-footer { border-color: #243452 !important; }
html[data-theme="dark"] #darkModeToggle { border-color: #243452; color: #6890b8; }
html[data-theme="dark"] #darkModeToggle:hover { background: #1a2f50; color: #38d9f5; border-color: #00b4d8; }

/* ══ 全局搜索覆盖层 — 深色模式 ══ */
html[data-theme="dark"] #_gsOverlay > div { background: #12213d !important; }
html[data-theme="dark"] #_gsOverlay > div > div:first-child { border-color: #1e3458 !important; }
html[data-theme="dark"] #_gsOverlay > div > div:last-child  { border-color: #1e3458 !important; }
html[data-theme="dark"] #_gsInput { color: #c8d8f0 !important; background: transparent !important; }
html[data-theme="dark"] #_gsInput::placeholder { color: #3d5a80 !important; }
html[data-theme="dark"] ._gs-item:hover, html[data-theme="dark"] ._gs-item[data-sel] { background: #1a2f50 !important; }
html[data-theme="dark"] ._gs-item div div:first-child { color: #a0c4e8 !important; }
html[data-theme="dark"] ._gs-item div div:last-child  { color: #486a8a !important; }

/* ── 大屏/搜索 topbar 按钮深色模式 ── */
html[data-theme="dark"] #topbar button[title="全局搜索 (Ctrl+K)"],
html[data-theme="dark"] #topbar button[title="数据大屏"] {
  background: rgba(56,217,245,.07) !important;
  border-color: rgba(56,217,245,.2) !important;
  color: #38d9f5 !important;
}

/* ══════════════════════════════════════
   响应式适配增强 v2.0
══════════════════════════════════════ */

/* ── 平板及以下 (≤960px): 收起时间芯片、收紧 topbar ── */
@media (max-width: 960px) {
  #currentTime { display: none !important; }
  #topbar { padding: 0 14px !important; gap: 8px !important; }
}

/* ── 手机 (≤767px) ── */
@media (max-width: 767px) {
  /* Topbar 收紧 */
  #topbar { padding: 0 10px !important; gap: 5px !important; }
  #pageTitle { font-size: 13px !important; max-width: 130px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
  #userDisplayName { display: none !important; }

  /* 搜索/大屏按钮：只保留图标 */
  #topbar button[title="全局搜索 (Ctrl+K)"] span,
  #topbar button[title="全局搜索 (Ctrl+K)"] kbd { display: none !important; }
  #topbar button[title="数据大屏"] span { display: none !important; }
  #topbar button[title="全局搜索 (Ctrl+K)"],
  #topbar button[title="数据大屏"] { padding: 4px 8px !important; }

  /* 内容区 */
  #content { padding: 12px !important; }
  .page-section { padding: 14px 12px !important; }

  /* Welcome banner */
  .welcome-banner { padding: 16px 14px !important; border-radius: 12px !important; margin-bottom: 14px !important; }
  .wb-greeting { font-size: 16px !important; }
  .wb-date { font-size: 11.5px !important; }
  .wb-meta { gap: 8px !important; margin-top: 10px !important; }
  .wb-meta-item { font-size: 11px !important; }

  /* 统计卡片 */
  .stat-card { padding: 14px 12px !important; }
  .stat-card .stat-num { font-size: 32px !important; }
  .stat-card .stat-icon { font-size: 38px !important; }

  /* Section divider 月份筛选 */
  .section-divider { flex-wrap: wrap !important; }
  .section-divider .form-select {
    flex: 1 1 auto !important; max-width: 140px !important;
    font-size: 12px !important; height: 28px !important;
    padding: 2px 6px !important; margin-left: 0 !important; width: auto !important;
  }

  /* 表格工具栏 */
  .table-toolbar { padding: 8px 10px !important; }

  /* 全局搜索框 */
  #_gsOverlay { padding-top: 5vh !important; }

  /* 侧边栏内品牌区字号 */
  .sidebar-brand-name { font-size: 14px !important; }
  .sidebar-brand-sub  { font-size: 10px !important; }
}

/* ── 小屏手机 (≤480px) ── */
@media (max-width: 480px) {
  #topbar { padding: 0 8px !important; gap: 4px !important; }
  #pageTitle { max-width: 80px !important; font-size: 12px !important; }

  /* 搜索/大屏按钮隐藏 */
  #topbar button[title="全局搜索 (Ctrl+K)"],
  #topbar button[title="数据大屏"] { display: none !important; }

  /* 内容区极致紧凑 */
  #content { padding: 8px !important; }
  .page-section { padding: 10px 8px !important; }

  /* Welcome banner 极简 */
  .welcome-banner { padding: 12px !important; }
  .wb-greeting { font-size: 15px !important; }
  .wb-meta { display: none !important; }

  /* 统计卡片 */
  .stat-card .stat-num { font-size: 26px !important; }
  .stat-card .stat-icon { font-size: 30px !important; }
  .stat-card .stat-label { font-size: 11px !important; letter-spacing: 0 !important; }

  /* Section divider */
  .section-divider { padding: 7px 10px !important; font-size: 12px !important; }

  /* 月份筛选占满宽度 */
  .section-divider .form-select { max-width: none !important; flex: 1 1 100% !important; }

  /* 模态框撑满屏宽 */
  .modal-dialog { margin: 6px !important; max-width: calc(100vw - 12px) !important; }
}

/* ── 横屏手机 (高度≤480px) ── */
@media (max-height: 480px) and (orientation: landscape) {
  .welcome-banner { display: none !important; }
  #content { padding: 8px 12px !important; }
}

/* ── 登录页：极小屏 (≤360px) ── */
@media (max-width: 360px) {
  .login-card-area { padding: 12px 8px !important; }
  .login-box { padding: 28px 18px 24px !important; border-radius: 16px !important; }
  .login-title { font-size: 18px !important; }
  .login-logo i { font-size: 38px !important; }
}

/* ── 深色模式响应式补充 ── */
html[data-theme="dark"] #_gsOverlay > div > div:nth-child(2) { border-color: #1e3458 !important; }

/* ══════════════════════════════════════
   移动端适配增强 v3.0
   报销表格、弹窗、表单全面适配手机
══════════════════════════════════════ */

/* ── 报销明细表：横向滚动（所有屏幕尺寸均可横划） ── */
.reim-table-wrap {
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
}

/* ── 报销项目组卡片基础收紧 ── */
.reim-group {
  border-radius: 8px !important;
}

/* ── data-table 在所有手机尺寸下横向滚动（覆盖 overflow:hidden） ── */
@media (max-width: 640px) {
  .data-table { overflow-x: auto !important; }
  .data-table table { min-width: 480px; }
}

/* ══ 手机（≤767px）全局适配 ══ */
@media (max-width: 767px) {

  /* 弹窗：撑满屏宽，内边距收紧 */
  #editModal .modal-dialog {
    margin: 4px !important;
    max-width: calc(100vw - 8px) !important;
  }
  #editModal .modal-body   { padding: 12px 10px !important; }
  #editModal .modal-header { padding: 10px 14px !important; }
  #editModal .modal-footer {
    padding: 8px 10px !important;
    flex-wrap: wrap !important;
    gap: 6px !important;
  }

  /* 弹窗页脚按钮：小屏占满宽度 */
  #editModal .modal-footer .btn { flex: 1 1 auto; min-width: 80px; }

  /* 报销项目组：减少内边距 */
  .reim-group { padding: 10px 8px !important; }

  /* 报销项目选择器宽度放开 */
  .reim-group select[id^="fReimProject_"] {
    max-width: none !important;
    width: 100% !important;
  }

  /* 报销项目组顶部行：垂直堆叠 */
  .reim-group > .d-flex.align-items-center {
    gap: 6px !important;
  }

  /* 报销合计行：换行 */
  #reimProjectGroups ~ div[style*="display:flex"] {
    flex-wrap: wrap !important;
    gap: 8px !important;
  }

  /* 费用填表提示框字号收小 */
  #editModal .modal-body > div[style*="background:#e8f4fd"] {
    font-size: 12px !important;
    padding: 8px 10px !important;
  }
  #editModal .modal-body > div[style*="background:#e8f4fd"] > div { margin-bottom: 2px !important; }

  /* 私车公用字段：让 col-4/col-8 各占一半 */
  #fCarUseFields .col-4,
  #fCarUseFields .col-8 { width: 50% !important; }

  /* 审批列表表格最小宽度 */
  #apvTabContent table { min-width: 560px; }

  /* 审批详情弹窗中步骤列表 */
  #editModal .modal-body .d-flex.flex-wrap { gap: 4px !important; }

  /* row g-3 表单：col-6 在手机上各占一行 */
  #editModal .row.g-3 > .col-6:not(.col-sm-6):not(.col-md-6):not(.col-lg-6) {
    width: 100% !important;
  }

  /* 余额管理表格 */
  .balance-table-wrap { overflow-x: auto; }
}

/* ══ 小屏手机（≤480px）── 弹窗全屏 ══ */
@media (max-width: 480px) {
  #editModal .modal-dialog {
    margin: 0 !important;
    max-width: 100vw !important;
  }
  #editModal .modal-content {
    border-radius: 0 !important;
  }
  /* 报销提示 alert 简化 */
  #editModal .alert { font-size: 12px !important; padding: 8px 10px !important; }

  /* 审批类型选择卡片文字 */
  #apvTabContent .col-6 > div > div[style*="font-size:13px"] { font-size: 12px !important; }
  #apvTabContent .col-6 > div > div[style*="48px"] {
    width: 40px !important; height: 40px !important;
  }
  #apvTabContent .col-6 > div > div[style*="48px"] i { font-size: 18px !important; }

  /* 合计/发票金额行折行 */
  #editModal #reimProjectGroups ~ div {
    flex-direction: column !important;
    align-items: flex-start !important;
  }

  /* 报销项目选择器行折行 */
  .reim-group > .d-flex.align-items-center { flex-direction: column !important; align-items: flex-start !important; }
  .reim-group > .d-flex.align-items-center > .reimDelGrpBtn { margin-left: 0 !important; }
}

/* ── 统计卡片：手机 2列 ── */
@media (max-width: 480px) {
  .row .col-6.col-lg-3 { width: 50% !important; }
}

/* ── 手机端侧边栏内导航项字号 ── */
@media (max-width: 767px) {
  .sidebar-nav .nav-link { font-size: 13px !important; padding: 10px 16px !important; }
}

/* ── 考勤、KPI、合同等宽表横向滚动 ── */
@media (max-width: 900px) {
  .table-responsive-mobile { overflow-x: auto !important; -webkit-overflow-scrolling: touch; }
  .table-responsive-mobile table { min-width: 600px; }
}