/* ============================================================================
   管陪升-零活用工平台 · 视觉系统 2.0
   远峰蓝苹果风精炼：设计令牌 → 基础 → 组件 → 深色 → 动效 → 时间轴 → 响应式/触控
   调色/间距/阴影/动效集中在令牌区；深色主题通过变量翻转生效，覆盖规则最少化。
   ========================================================================== */

/* ==================== 设计令牌 ==================== */
:root {
  /* 品牌：远峰蓝 */
  --ap-blue: #a7c6da;        /* 远峰蓝：质感、柔和、高级 */
  --ap-blue-hover: #b8d4e3;  /* 远峰蓝 hover 提亮 */
  --ap-blue-deep: #7aa4bd;   /* 远峰蓝深一度，用于强调文字 */
  --ap-blue-ink: #1d1d1f;    /* 蓝底上的文字色（深浅主题通用，不翻转） */
  --ap-blue-soft: rgba(167,198,218,.28);
  /* 中性色 */
  --ink: #1d1d1f;
  --mid-ink: #424245;        /* 次级文字：标签、导航、说明 */
  --gray: #6e6e73;
  --bg: #f5f5f7;
  --surface: #fafafc;        /* 卡片悬浮/输入框背景 */
  --line: rgba(0,0,0,.08);
  --neg: #e06c75;            /* 柔和绯红，仅用于极少数负面状态 */
  --neg-ink: #c45a62;
  /* 磨砂玻璃质感 */
  --glass-nav: rgba(255,255,255,.72);
  --glass-45: rgba(255,255,255,.45);
  --glass-55: rgba(255,255,255,.55);
  --glass-75: rgba(255,255,255,.75);
  --glass-80: rgba(255,255,255,.80);
  --glass-modal: rgba(255,255,255,.96);
  --glass-notify: rgba(255,255,255,.95);
  --glass-hi: rgba(255,255,255,.60);   /* 玻璃高光描边 */
  /* 圆角 */
  --r: 22px;            /* 卡片/弹窗/通知统一圆角 */
  --r-input: 14px;      /* 输入控件统一圆角 */
  --r-logo: 10px;       /* Logo 圆角 */
  /* 间距刻度 */
  --sp-1: 4px; --sp-2: 8px; --sp-3: 12px; --sp-4: 16px; --sp-5: 24px; --sp-6: 32px;
  /* 字号刻度 */
  --fs-xs: 12px; --fs-sm: 14px; --fs-md: 16px; --fs-lg: 19px; --fs-xl: 24px;
  /* 阴影刻度 */
  --sh-sm: 0 1px 0 rgba(255,255,255,.8) inset, 0 2px 12px rgba(0,0,0,.04), 0 1px 2px rgba(0,0,0,.02);
  --sh-md: 0 1px 0 rgba(255,255,255,.8) inset, 0 16px 48px rgba(0,0,0,.08), 0 4px 12px rgba(0,0,0,.03);
  --sh-lg: 0 24px 80px rgba(0,0,0,.18);
  --sh-pop: 0 16px 50px rgba(0,0,0,.12);
  --sh-login: 0 1px 0 rgba(255,255,255,.8) inset, 0 28px 80px rgba(0,0,0,.08), 0 10px 30px rgba(0,0,0,.04);
  --sh-brand: 0 4px 14px rgba(167,198,218,.40);
  --sh-brand-h: 0 8px 24px rgba(167,198,218,.55);
  --sh-well: 0 1px 0 rgba(255,255,255,.7) inset, 0 2px 12px rgba(0,0,0,.04);
  --sh-chip: 0 2px 10px rgba(0,0,0,.06);
  --sh-nav-scroll: 0 1px 0 rgba(255,255,255,.6) inset, 0 8px 30px rgba(0,0,0,.06);
  /* 次级按钮（灰系）渐变 */
  --btn-sec: linear-gradient(180deg, #f2f2f5 0%, #e8e8ed 100%);
  --btn-sec-h: linear-gradient(180deg, #f7f7f9 0%, #dedee3 100%);
  --btn-sec-sh: 0 1px 0 rgba(255,255,255,.7) inset, 0 2px 8px rgba(0,0,0,.06);
  --btn-sec-sh-h: 0 1px 0 rgba(255,255,255,.7) inset, 0 6px 18px rgba(0,0,0,.10);
  /* 表单 */
  --field-bg: linear-gradient(180deg, var(--surface) 0%, #fff 100%);
  --field-bg-f: #fff;                     /* 聚焦时背景 */
  --field-line: rgba(0,0,0,.08);
  --field-inset: 0 1px 2px rgba(0,0,0,.04) inset;
  --focus-ring: rgba(167,198,218,.28);
  --focus-border: var(--ap-blue-deep);
  /* 表格 */
  --tbl-bg: rgba(255,255,255,.35);
  --tbl-line: rgba(0,0,0,.05);
  --thead-line: rgba(0,0,0,.12);
  --row-line: rgba(0,0,0,.05);
  --row-h: #f5f5f7;
  --row-sel: rgba(167,198,218,.20);
  /* 徽章 */
  --badge-mid: rgba(0,0,0,.06);
  --badge-dim: rgba(0,0,0,.03);
  /* 二级 pill 导航 */
  --pill-bg: var(--glass-55);
  --pill-line: rgba(0,0,0,.05);
  --pill-hov: rgba(167,198,218,.35);
  /* 滚动条 */
  --scroll-thumb: rgba(0,0,0,.16);
  /* 动效 */
  --ease: cubic-bezier(.22,1,.36,1);
  --ease-spring: cubic-bezier(.34,1.45,.5,1);  /* 图标按压/弹跳的 iOS 弹簧感 */
  --dur-f: .18s; --dur-m: .32s; --dur-s: .5s;
  /* 触控最小触点 */
  --tap: 44px;
  /* 底部抽屉拖拽把手 */
  --handle: rgba(0,0,0,.18);
}

/* ==================== 基础 ==================== */
html { font-size: 17px; }
body {
  font-family: -apple-system, BlinkMacSystemFont, 'SF Pro SC', 'PingFang SC',
               'Helvetica Neue', 'Microsoft YaHei', sans-serif;
  color: var(--ink);
  font-weight: 500;             /* 全局字重提一档：细字在移动端/小程序里发虚 */
  letter-spacing: .01em; line-height: 1.65;
  background:
    radial-gradient(circle at 80% 0%, rgba(167,198,218,.22) 0%, rgba(245,245,247,0) 45%),
    radial-gradient(circle at 20% 100%, rgba(167,198,218,.14) 0%, rgba(245,245,247,0) 40%),
    var(--bg);
  background-attachment: fixed;
  -webkit-font-smoothing: antialiased;
}
::selection { background: rgba(167,198,218,.35); }
/* 触屏交互基础：消除双击缩放延迟、禁止长按弹出菜单与误选文字（小程序 WebView 体验） */
a, .btn, .nav-link, .page-link, .tl-mini-btn, .navbar-brand {
  touch-action: manipulation;
  -webkit-touch-callout: none;
}
.btn, .nav-link, .page-link, .tl-mini-btn, .navbar-brand {
  user-select: none;
  -webkit-user-select: none;
}
hr { border-color: var(--line); margin: 18px 0; }
.text-muted { color: var(--gray) !important; }
/* 整体网格间距更紧凑 */
.bslib-grid { gap: 18px !important; }
.bslib-mb-spacing { margin-bottom: 18px !important; }
::-webkit-scrollbar { width: 8px; height: 8px; }
::-webkit-scrollbar-thumb { background: var(--scroll-thumb); border-radius: 4px; }

/* ==================== 顶部导航：苹果式磨砂 + 发丝线 ==================== */
.navbar {
  position: sticky; top: 0; z-index: 1030;
  background: var(--glass-nav) !important;
  backdrop-filter: blur(24px) saturate(200%);
  -webkit-backdrop-filter: blur(24px) saturate(200%);
  border-bottom: 1px solid rgba(0,0,0,.05);
  box-shadow: 0 1px 0 rgba(255,255,255,.6) inset;
  transition: box-shadow var(--dur-m) ease;
}
/* 页面滚动后导航加一层柔影，增强层次（motion.js 切换 .hr-scrolled） */
body.hr-scrolled .navbar { box-shadow: var(--sh-nav-scroll); }
.navbar-brand {
  font-weight: 700; font-size: 24px; letter-spacing: -.01em; color: var(--ink) !important;
}
.navbar-brand::before {
  content: '人'; display: inline-block; width: 34px; height: 34px; border-radius: var(--r-logo);
  margin-right: 11px; margin-top: -3px; vertical-align: middle;
  background: linear-gradient(135deg, var(--ap-blue) 0%, var(--ap-blue-hover) 100%);
  color: var(--ap-blue-ink); font-size: 16px; font-weight: 600;
  line-height: 34px; text-align: center;
  box-shadow: var(--sh-brand);
}
.navbar .nav-item, .navbar .nav > li { margin: 0 3px; }
/* 覆盖 Bootstrap nav-underline 的底部线条（悬浮/激活都不显示下划线） */
.navbar .nav-link, .navbar .nav-link:hover, .navbar .nav-link:focus, .navbar .nav-link.active,
.navbar .nav > li > a, .navbar .nav > li > a:hover, .navbar .nav > li > a:focus, .navbar .nav > li.active > a {
  border-bottom: none !important;
}
.navbar .nav-link, .navbar .nav > li > a {
  border-radius: 980px; color: var(--mid-ink); font-weight: 500; font-size: 18px;
  padding: 7px 22px !important; line-height: 1.45;
  transition: background var(--dur-f) ease, color var(--dur-f) ease;
}
.navbar .nav-link.active, .navbar .nav > li.active > a {
  background: var(--ap-blue) !important; color: var(--ap-blue-ink) !important;
}
/* bslib 生成的是 Bootstrap 3 兼容汉堡按钮：隐藏默认 icon-bar，改用 SVG 三条杠，彻底避免渲染异常 */
.navbar-default .navbar-toggle,
.navbar-default .navbar-toggle:hover,
.navbar-default .navbar-toggle:focus,
.navbar-toggle,
.navbar-toggle:hover,
.navbar-toggle:focus {
  border: none !important;
  background: transparent !important;
  background-color: transparent !important;
  box-shadow: none !important;
  padding: 0 !important; margin-right: 0 !important;
  width: 44px; height: 44px;
  background-image: url('data:image/svg+xml,%3Csvg xmlns=%22http://www.w3.org/2000/svg%22 viewBox=%220 0 30 30%22%3E%3Cpath stroke=%22%231d1d1f%22 stroke-linecap=%22round%22 stroke-miterlimit=%2210%22 stroke-width=%222%22 d=%22M4 7h22M4 15h22M4 23h22%22/%3E%3C/svg%3E') !important;
  background-repeat: no-repeat !important;
  background-position: center !important;
  background-size: 24px 24px !important;
}
.navbar-default .navbar-toggle .icon-bar,
.navbar-toggle .icon-bar { display: none !important; }
/* 顶层三中心锚点在导航栏隐藏：中心切换只经启动台，导航栏只留「回到主页」。
   （锚点 DOM 保留——启动台图标点击即触发对应锚点切换面板，见 appnav.js） */
.navbar .nav > li:has(> a[data-value]) { display: none !important; }
/* 回到主页按钮：品牌蓝胶囊 + 小房子图标 */
.nav-home-btn {
  display: inline-flex; align-items: center; gap: 7px;
  border: none; border-radius: 980px;
  background: var(--ap-blue); color: var(--ap-blue-ink);
  font-family: inherit; font-size: 16px; font-weight: 500; letter-spacing: .02em;
  padding: 7px 20px; margin: 0; cursor: pointer;
  box-shadow: var(--sh-brand);
  transition: box-shadow var(--dur-f) ease, transform .12s var(--ease), filter var(--dur-f) ease;
}
.nav-home-btn svg { width: 16px; height: 16px; }
.nav-home-btn:active { transform: scale(.97); filter: brightness(.96); }
@media (hover: hover) {
  .nav-home-btn:hover { box-shadow: var(--sh-brand-h); }
}
/* 启动台打开时已在主页：按钮淡化示意 */
body.lp-open .nav-home-btn { opacity: .35; pointer-events: none; }
/* 退出登录按钮：与「回到主页」同族的图标+文字按钮（幽灵款，hover 转红示意离开操作）
   actionButton 自带 .btn 类，用 .btn.nav-exit-btn 提高优先级压住默认按钮样式 */
.btn.nav-exit-btn {
  display: inline-flex; align-items: center; gap: 6px;
  border: none; background: transparent; box-shadow: none;
  color: var(--mid-ink); font-family: inherit; font-size: 15px; font-weight: 500;
  padding: 7px 16px; margin: 0; border-radius: 980px;
}
.btn.nav-exit-btn svg { width: 16px; height: 16px; }
/* actionButton 会把 label 包进 span.action-label（内联），图标与文字被裹成一层，
   按钮的 flex 排布管不到；display:contents 拆掉这层包装，竖排（图标上文字下）才生效 */
.btn.nav-exit-btn > .action-label { display: contents; }
@media (hover: hover) {
  .btn.nav-exit-btn:hover { background: rgba(0,0,0,.05); color: var(--neg-ink); }
  [data-bs-theme="dark"] .btn.nav-exit-btn:hover { background: rgba(255,255,255,.08); color: var(--neg); }
}

/* ==================== 卡片：微渐变 + 内高光 + 漫射柔影 ==================== */
.card {
  position: relative;
  background: linear-gradient(180deg, #fff 0%, var(--surface) 100%);
  border: none;
  border-radius: var(--r);
  box-shadow: var(--sh-sm);
  transition: box-shadow var(--dur-m) var(--ease), transform var(--dur-m) var(--ease);
}
.card-header {
  background: transparent; border-bottom: none;
  font-weight: 700; font-size: var(--fs-xl); letter-spacing: -.01em; color: var(--ink);
  padding: 22px 26px 8px;
}
.card-body { padding: 16px 26px 24px; }
/* bslib 卡片正文是纵向 flex 容器（gap-spacing），直接子级按钮会被拉伸成全宽；
   让按钮收缩到内容宽度（需要全宽的按钮可用 w-100 显式声明） */
.card-body > .btn { align-self: flex-start; }
@keyframes riseIn {
  from { opacity: 0; transform: translateY(20px); }
  to   { opacity: 1; transform: translateY(0); }
}
@keyframes fadeIn {
  from { opacity: 0; }
  to   { opacity: 1; }
}
/* 数据看板 value box：白卡 + 大数字 */
.card.bslib-value-box {
  border-radius: var(--r) !important;
  background: linear-gradient(180deg, #fff 0%, var(--surface) 100%) !important;
  border: none !important;
  box-shadow: var(--sh-sm) !important;
  color: var(--ink) !important;
  transition: box-shadow var(--dur-m) var(--ease), transform var(--dur-m) var(--ease);
}
.bslib-value-box .value-box-title { color: var(--gray) !important; font-size: var(--fs-md); font-weight: 500; }
.bslib-value-box .value-box-value { color: var(--ink) !important; font-size: 38px; font-weight: 700; letter-spacing: -.02em; }

/* ==================== 按钮：iOS 圆角矩形 + 渐变 + 按压反馈 ==================== */
.btn {
  border-radius: 14px; border: none; font-weight: 500; letter-spacing: .02em;
  padding: 9px 22px; margin: 3px 8px 3px 0; font-size: var(--fs-md);
  transition: box-shadow var(--dur-f) ease, background var(--dur-f) ease, color var(--dur-f) ease, transform .12s var(--ease), filter var(--dur-f) ease;
}
/* 触屏与鼠标统一的按压反馈：缩一下 + 微变暗（触屏没有 hover，靠 :active 给反馈） */
.btn:active { transform: scale(.97); filter: brightness(.96); }
.btn-primary, .btn-success {
  background: linear-gradient(180deg, var(--ap-blue-hover) 0%, var(--ap-blue) 100%);
  color: var(--ap-blue-ink);
  box-shadow: 0 1px 0 rgba(255,255,255,.35) inset, var(--sh-brand);
}
.btn-warning, .btn-secondary {
  background: var(--btn-sec);
  color: var(--ink);
  box-shadow: var(--btn-sec-sh);
}
.btn-outline-primary {
  border: 1.5px solid var(--ap-blue-deep); color: var(--ap-blue-deep);
  background: transparent;
}
.btn-outline-danger { border: 1.5px solid rgba(196,90,98,.5); color: var(--neg-ink); background: transparent; }

/* ==================== 表单控件：浅灰凹面 + 聚焦光环 ==================== */
.form-label { font-weight: 500; font-size: var(--fs-md); color: var(--mid-ink); margin-bottom: var(--sp-2); }
.form-group, .shiny-input-container { margin-bottom: 18px; }
.form-control, .form-select {
  border-radius: var(--r-input) !important;
  border: 1px solid var(--field-line) !important;
  background: var(--field-bg) !important;
  box-shadow: var(--field-inset) !important;
  padding: 10px 16px; font-size: var(--fs-md); height: auto;
  transition: border-color var(--dur-f) ease, box-shadow var(--dur-f) ease, background var(--dur-f) ease;
}
.form-control:focus, .form-select:focus {
  background: var(--field-bg-f) !important;
  border-color: var(--focus-border) !important;
  box-shadow: 0 0 0 4px var(--focus-ring), var(--field-inset) !important;
}

/* ==================== 数据表格：极简 + 行悬浮 ==================== */
/* 注意：表格容器只能做透明度动画。持续的 transform（哪怕 translateY(0)）
   会创建层叠上下文，让表格盖住同卡片内的按钮，导致全部按钮无法点击 */
.dataTables_wrapper { animation: fadeIn var(--dur-s) ease; }
/* 表格滚动区域：max-height 上限适配视口，内容少/空数据时收缩到内容高度，
   内容超出上限时才出现纵向滚动（配合 dt_opts 的 scrollY + scrollCollapse） */
.dataTables_scrollBody {
  max-height: calc(100vh - 210px) !important;
  border-radius: 12px;
  border: 1px solid var(--tbl-line) !important;
  background: var(--tbl-bg);
}
.dataTables_scrollBody::-webkit-scrollbar { width: 6px; height: 6px; }
.dataTables_scrollBody::-webkit-scrollbar-thumb { background: rgba(0,0,0,.14); border-radius: 3px; }
/* min-width:100%：列少/空数据时表格也撑满卡片宽度（空行背景不再只占一部分），
   列多 content 更宽时仍可横向滚动，两者兼容 */
table.dataTable { margin: 0 !important; min-width: 100%; }
table.dataTable th, table.dataTable td { white-space: nowrap; font-variant-numeric: tabular-nums; font-size: 15px; }
table.dataTable thead th {
  background: transparent; border-bottom: 1px solid var(--thead-line) !important;
  color: var(--gray); font-size: 13.5px; font-weight: 600; letter-spacing: .04em;
  padding: 9px 16px;
}
table.dataTable tbody tr { background: transparent !important; transition: background var(--dur-f) ease; }
/* 触屏点按行反馈（触屏没有 hover） */
table.dataTable tbody tr:active { background: var(--row-h) !important; }
table.dataTable tbody tr.selected { background: var(--row-sel) !important; }
table.dataTable tbody td { border-bottom: 1px solid var(--row-line); padding: 10px 16px; }
/* 空数据行：透明背景 + 弱化文字，避免出现突兀的色块 */
table.dataTable tbody td.dataTables_empty {
  background: transparent !important;
  color: var(--gray);
  font-size: var(--fs-sm);
  padding: 18px 16px;
}
.dataTables_info, .dataTables_paginate { color: var(--gray); font-size: 13.5px; padding-top: 12px !important; }
/* 空表收敛：隐藏信息行与分页（:has 不支持时优雅回退为显示） */
.dataTables_wrapper:has(td.dataTables_empty) .dataTables_info,
.dataTables_wrapper:has(td.dataTables_empty) .dataTables_paginate { display: none; }
/* 仅一页（上/下页均禁用，本应用 pageLength=200 几乎总是单页）时隐藏分页条。
   注意：DT 未启用 bootstrap style，分页器是 a.paginate_button 结构（非 li.page-item） */
.dataTables_paginate:has(a.paginate_button.previous.disabled):has(a.paginate_button.next.disabled) { display: none; }
/* 分页按钮（>200 行时才出现）：品牌蓝胶囊 */
.dataTables_paginate .paginate_button {
  border-radius: 980px; color: var(--ap-blue-deep) !important;
  padding: 5px 12px; margin: 0 2px; cursor: pointer;
  transition: background var(--dur-f) ease;
}
.dataTables_paginate .paginate_button.current,
.dataTables_paginate .paginate_button.current:hover { background: var(--ap-blue); color: var(--ap-blue-ink) !important; }
.dataTables_paginate .paginate_button.disabled { color: var(--gray) !important; opacity: .5; cursor: default; }
@media (hover: hover) {
  .dataTables_paginate .paginate_button:hover:not(.disabled):not(.current) { background: rgba(167,198,218,.25); }
}

/* ==================== 徽章：柔和底色 + 状态圆点 ==================== */
.badge {
  display: inline-flex; align-items: center; gap: 7px;
  border-radius: 980px; padding: 6px 14px;
  font-weight: 500; font-size: 14.5px; letter-spacing: .02em;
}
.badge::before {
  content: ""; width: 7px; height: 7px; border-radius: 50%;
  background: currentColor; flex: 0 0 auto; opacity: .85;
}
.badge.sb-att  { background: linear-gradient(180deg, var(--ap-blue-hover) 0%, var(--ap-blue) 100%); color: var(--ap-blue-ink); }
.badge.sb-ok   { background: rgba(167,198,218,.20); color: var(--ap-blue-deep); }
.badge.sb-mid  { background: var(--badge-mid); color: var(--mid-ink); }
.badge.sb-dim  { background: var(--badge-dim); color: var(--gray); }
.badge.sb-deep { background: linear-gradient(180deg, #2c2c2e 0%, #1d1d1f 100%); color: #fff; }
.badge.sb-neg  { background: rgba(224,108,117,.12); color: var(--neg-ink); }

/* ==================== 弹窗与通知：大圆角 + 深柔影 + 磨砂 ==================== */
.modal-content {
  border-radius: var(--r); border: none;
  background: var(--glass-modal);
  backdrop-filter: blur(20px) saturate(180%);
  -webkit-backdrop-filter: blur(20px) saturate(180%);
  box-shadow: var(--sh-lg);
  animation: modalIn var(--dur-m) var(--ease) both;
}
@keyframes modalIn {
  from { opacity: 0; transform: translateY(18px) scale(.97); }
  to   { opacity: 1; transform: translateY(0) scale(1); }
}
/* 手机端底部抽屉：自屏幕下缘滑入 */
@keyframes sheetIn {
  from { opacity: .6; transform: translateY(48px); }
  to   { opacity: 1; transform: translateY(0); }
}
.modal-header, .modal-body, .modal-footer { padding: 24px 30px; }
.modal-title { font-size: var(--fs-xl); font-weight: 700; letter-spacing: -.01em; }
.card-body h6 { font-size: 17px; }
.modal-backdrop { background-color: rgba(0,0,0,.28); backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px); }
.modal-backdrop.show { opacity: 1; }
.shiny-notification {
  border-radius: var(--r); background: var(--glass-notify);
  backdrop-filter: blur(20px) saturate(180%); -webkit-backdrop-filter: blur(20px) saturate(180%);
  border: 1px solid var(--glass-hi);
  box-shadow: var(--sh-pop);
  color: var(--ink);
}

/* ==================== 首页 Hero 已移除（启动台取代，见 .lp-* 节） ==================== */

/* ==================== 动效（与 motion.js 协作） ==================== */
/* 插入即浮现：JS 给新渲染的卡片加 .hr-reveal；backwards 填充保证 stagger
   延迟期间元素不可见，动画结束后立即还原，不残留层叠上下文 */
@keyframes hrIn {
  from { opacity: 0; transform: translateY(16px); }
  to   { opacity: 1; transform: translateY(0); }
}
.hr-reveal { animation: hrIn var(--dur-s) var(--ease) backwards; }
/* 标签页切换淡入（仅透明度，不影响层叠） */
.tab-pane.active { animation: fadeIn var(--dur-m) ease; }
/* 按钮涟漪：JS 在 pointerdown 时注入 .hr-ripple 圆斑 */
.btn .hr-ripple {
  position: absolute; border-radius: 50%; pointer-events: none;
  background: currentColor; opacity: .16; transform: scale(0);
  animation: hrRipple .55s ease-out forwards;
}
@keyframes hrRipple {
  to { transform: scale(1); opacity: 0; }
}
/* 表格横向滚动提示：可横滚时右缘渐隐，滚动后左缘也渐隐（motion.js 切换类名） */
.dataTables_scrollBody.hr-can-scroll {
  mask-image: linear-gradient(90deg, #000 0, #000 calc(100% - 26px), rgba(0,0,0,0) 100%);
  -webkit-mask-image: linear-gradient(90deg, #000 0, #000 calc(100% - 26px), rgba(0,0,0,0) 100%);
}
.dataTables_scrollBody.hr-can-scroll.hr-scrolled {
  mask-image: linear-gradient(90deg, rgba(0,0,0,0) 0, #000 22px, #000 calc(100% - 26px), rgba(0,0,0,0) 100%);
  -webkit-mask-image: linear-gradient(90deg, rgba(0,0,0,0) 0, #000 22px, #000 calc(100% - 26px), rgba(0,0,0,0) 100%);
}

/* ==================== 悬浮规则（仅精确指针，杜绝触屏粘滞 hover） ==================== */
@media (hover: hover) {
  .card:hover { box-shadow: var(--sh-md); transform: translateY(-1px); }
  .card.bslib-value-box:hover { box-shadow: var(--sh-md) !important; transform: translateY(-1px); }
  .navbar .nav-link:hover, .navbar .nav > li > a:hover { color: var(--ink); background: rgba(167,198,218,.35); }
  .btn-primary:hover, .btn-success:hover {
    background: linear-gradient(180deg, #c5ddea 0%, var(--ap-blue-hover) 100%);
    color: var(--ap-blue-ink);
    box-shadow: 0 1px 0 rgba(255,255,255,.35) inset, var(--sh-brand-h);
  }
  .btn-warning:hover, .btn-secondary:hover {
    background: var(--btn-sec-h);
    color: var(--ink);
    box-shadow: var(--btn-sec-sh-h);
  }
  .btn-outline-primary:hover {
    background: rgba(167,198,218,.18); color: var(--ap-blue-deep); border-color: var(--ap-blue-deep);
  }
  .btn-outline-danger:hover { background: rgba(224,108,117,.10); color: var(--neg-ink); }
  table.dataTable tbody tr:hover { background: var(--row-h) !important; }
  .center-pill-nav .nav-pills > li > a:hover,
  .center-pill-nav .nav-pills > li > a:focus,
  .center-pill-nav .nav-pills .nav-link:hover,
  .center-pill-nav .nav-pills .nav-link:focus {
    background: var(--pill-hov);
    color: var(--ink);
    border-color: var(--pill-line);
  }
  .login-submit:hover { box-shadow: var(--sh-brand-h); }
  .tl-mini-btn:hover { background: rgba(0,0,0,.06); color: var(--ink); }
  .tl-editor .tl-track:hover { box-shadow: 0 0 0 4px rgba(167,198,218,.18); }
  .tl-block:hover { filter: brightness(1.06); box-shadow: 0 4px 14px rgba(52,199,89,.45); }
  .tl-block:hover .tl-grip::after { background: rgba(255,255,255,.8); }
  .tl-picker .tl-block:hover { filter: brightness(1.03); }
  .tl-viewport::-webkit-scrollbar-thumb:hover { background: var(--ap-blue-deep); }
}

/* ==================== 二级 pill 侧边导航（center-pill-nav） ==================== */
.center-pill-nav .nav-pills.nav-stacked,
.center-pill-nav .nav-pills {
  display: flex;
  flex-direction: column;
  gap: 6px;
  padding: 0;
  margin: 0;
  list-style: none;
}
.center-pill-nav .nav-pills > li > a,
.center-pill-nav .nav-pills .nav-link {
  display: block;
  color: var(--ink);
  background: var(--pill-bg);
  border-radius: 980px;
  padding: 9px 14px;
  font-weight: 500;
  font-size: var(--fs-md);
  border: 1px solid var(--pill-line);
  transition: background var(--dur-f) ease, color var(--dur-f) ease, box-shadow var(--dur-f) ease;
  text-decoration: none;
}
.center-pill-nav .nav-pills > li.active > a,
.center-pill-nav .nav-pills > li.active > a:hover,
.center-pill-nav .nav-pills > li.active > a:focus,
.center-pill-nav .nav-pills .nav-link.active {
  background: var(--ap-blue) !important;
  color: var(--ap-blue-ink) !important;
  box-shadow: var(--sh-brand);
}
/* 侧边栏 well 容器：磨砂轻底 */
.center-pill-nav .well {
  background: var(--glass-45);
  backdrop-filter: blur(16px) saturate(180%);
  -webkit-backdrop-filter: blur(16px) saturate(180%);
  border: 1px solid var(--glass-hi);
  border-radius: var(--r);
  box-shadow: var(--sh-well);
  padding: 14px;
}
/* 内容区与侧边栏间距 */
.center-pill-nav .row > [class*='col-'] + [class*='col-'] {
  padding-left: 20px;
}
/* 桌面端：pill 侧边栏粘性定位——页面滚动时侧边栏保持可见，
   菜单项超过视口高度时侧边栏自身滚动（与右侧内容分开滚动） */
@media (min-width: 768px) {
  .center-pill-nav .row > [class*='col-']:first-child {
    position: sticky;
    /* 让开吸顶磨砂导航（高约 64px），否则滚动后首个菜单项滑进导航下方不可点 */
    top: 76px;
    align-self: flex-start;
    max-height: calc(100vh - 92px);
    overflow-y: auto;
    scrollbar-width: none;
  }
  .center-pill-nav .row > [class*='col-']:first-child::-webkit-scrollbar { display: none; }
}

/* ==================== 小程序化导航：宫格首页 / 子页返回栏 ====================
   三端中心落地页（app_home/app_grid 生成）：iOS 大标题 + 图标宫格；
   返回栏由 appnav.js 在钻取子页时注入，仅手机端显示（桌面端用侧边栏）。 */
.app-home { padding: 10px 4px 24px; }
.app-home-title { font-size: 34px; font-weight: 800; letter-spacing: -.01em; color: var(--ink); margin: 0 0 6px; }
.app-home-sub { color: var(--gray); font-size: var(--fs-md); margin: 0 0 28px; }
.app-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 22px 10px;
}
.app-tile {
  display: flex; flex-direction: column; align-items: center; gap: 9px;
  background: none; border: none; padding: 4px 2px; margin: 0; cursor: pointer;
  font-family: inherit;
  transition: transform .15s var(--ease);
  -webkit-tap-highlight-color: transparent;
}
.app-tile:active { transform: scale(.94); }
.app-tile-icon {
  width: 60px; height: 60px; border-radius: 17px;
  display: flex; align-items: center; justify-content: center;
  color: #fff;
  box-shadow: 0 1px 0 rgba(255,255,255,.28) inset, 0 6px 16px rgba(0,0,0,.14);
  transition: transform var(--dur-f) var(--ease), box-shadow var(--dur-f) ease;
}
.app-tile-icon svg { width: 27px; height: 27px; }
.app-tile-label { font-size: 13px; color: var(--ink); line-height: 1.3; text-align: center; }
/* 图标渐变色调（按功能分组着色，柔和同明度） */
.app-g1 { background: linear-gradient(135deg, #7fb0c9 0%, #5d8fab 100%); }  /* 蓝：总览/报表 */
.app-g2 { background: linear-gradient(135deg, #8ea3d0 0%, #6b7fb8 100%); }  /* 靛：任务/大厅 */
.app-g3 { background: linear-gradient(135deg, #7cc4bd 0%, #57a49c 100%); }  /* 青：时光币/钱 */
.app-g4 { background: linear-gradient(135deg, #8fcda0 0%, #64ab7b 100%); }  /* 绿：人员/报名 */
.app-g5 { background: linear-gradient(135deg, #e8b48a 0%, #d1925f 100%); }  /* 橙：培训/打卡 */
.app-g6 { background: linear-gradient(135deg, #b3a3d4 0%, #8f7cb8 100%); }  /* 紫：评价/收入 */
.app-g7 { background: linear-gradient(135deg, #dfa3b3 0%, #c47f93 100%); }  /* 玫红：推送/提醒 */
.app-g8 { background: linear-gradient(135deg, #9db3c4 0%, #77899c 100%); }  /* 灰蓝：备用 */
/* 子页返回栏默认隐藏，仅手机端显示 */
.sub-head { display: none; }
@media (hover: hover) {
  .app-tile:hover .app-tile-icon {
    transform: translateY(-2px);
    box-shadow: 0 1px 0 rgba(255,255,255,.28) inset, 0 10px 22px rgba(0,0,0,.18);
  }
}
@media (min-width: 768px) {
  .app-home { padding: 22px 8px 32px; }
  .app-grid { grid-template-columns: repeat(auto-fill, minmax(104px, 1fr)); gap: 28px 14px; max-width: 760px; }
}
@media (max-width: 767px) {
  .sub-head { display: block; padding-top: calc(52px + env(safe-area-inset-top, 0px)); /* 给 fixed 返回栏让位（含刘海屏安全区） */ }
  .sub-bar {
    /* fixed 而非 sticky：sticky 受父容器（.sub-head 高度仅栏+标题）限制会随滚动
       离开；fixed 直接钉在视口顶部，任何祖先层级都不影响 */
    position: fixed; top: 0; left: 0; right: 0; z-index: 900;
    margin: 0; padding: calc(4px + env(safe-area-inset-top, 0px)) 12px 4px;
    background: var(--glass-nav);
    backdrop-filter: blur(20px) saturate(180%);
    -webkit-backdrop-filter: blur(20px) saturate(180%);
    border-bottom: 1px solid var(--line);
  }
  .sub-bar-back {
    display: inline-flex; align-items: center; gap: 1px;
    background: none; border: none; margin: 0 0 0 -6px; padding: 8px 12px 8px 6px;
    color: var(--ap-blue-deep); font-size: 17px; font-weight: 500; font-family: inherit;
    min-height: var(--tap); cursor: pointer;
  }
  .sub-bar-back svg { width: 12px; height: 20px; }
  /* 居中小标题：大标题滚出视口后淡入（iOS 折叠导航惯例） */
  .sub-bar-title {
    position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%);
    font-size: 17px; font-weight: 600; color: var(--ink);
    opacity: 0; transition: opacity var(--dur-f) ease;
    pointer-events: none; white-space: nowrap;
  }
  .sub-head.sub-scrolled .sub-bar-title { opacity: 1; }
  .sub-title { font-size: 28px; font-weight: 800; letter-spacing: -.01em; color: var(--ink); margin: 14px 2px 16px; }
}

/* ==================== 启动台：登录后首屏三中心入口（iOS 主屏风） ==================== */
.lp-overlay {
  position: fixed; inset: 0; z-index: 3000;
  display: none;
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
  background:
    radial-gradient(circle at 50% -10%, rgba(167,198,218,.45) 0%, rgba(245,245,247,0) 55%),
    var(--bg);
}
.lp-overlay.lp-open { display: block; animation: fadeIn var(--dur-m) ease; }
.lp-inner {
  min-height: 100%;
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  padding: 40px 24px calc(40px + env(safe-area-inset-bottom, 0px));
}
.lp-brand {
  width: 64px; height: 64px; border-radius: 18px;
  background: linear-gradient(135deg, var(--ap-blue) 0%, var(--ap-blue-hover) 100%);
  color: var(--ap-blue-ink);
  font-size: 28px; font-weight: 700; line-height: 64px; text-align: center;
  box-shadow: var(--sh-brand-h);
}
.lp-title { font-size: 34px; font-weight: 800; letter-spacing: -.01em; color: var(--ink); margin: 20px 0 8px; }
.lp-sub { color: var(--gray); font-size: 17px; margin: 0 0 46px; }
.lp-grid { display: flex; gap: 36px; flex-wrap: wrap; justify-content: center; }
.lp-tile {
  display: flex; flex-direction: column; align-items: center; gap: 11px;
  background: none; border: none; padding: 6px; margin: 0; cursor: pointer;
  font-family: inherit;
  transition: transform var(--dur-f) var(--ease-spring);
  -webkit-tap-highlight-color: transparent;
}
.lp-tile:active { transform: scale(.92); }
.lp-tile-icon {
  width: 84px; height: 84px; border-radius: 23px;
  display: flex; align-items: center; justify-content: center;
  color: #fff;
  box-shadow: 0 1px 0 rgba(255,255,255,.28) inset, 0 12px 26px rgba(0,0,0,.16);
  transition: transform var(--dur-f) var(--ease-spring), box-shadow var(--dur-f) ease;
}
.lp-tile-icon svg { width: 38px; height: 38px; }
.lp-tile-label { font-size: 17px; font-weight: 600; color: var(--ink); }
.lp-tile-cap { font-size: 13px; color: var(--gray); margin-top: -7px; }
/* 入场 stagger（iOS 主屏落座感） */
.lp-overlay.lp-open .lp-brand,
.lp-overlay.lp-open .lp-title,
.lp-overlay.lp-open .lp-sub,
.lp-overlay.lp-open .lp-tile { animation: lpIn var(--dur-s) var(--ease) backwards; }
.lp-overlay.lp-open .lp-title { animation-delay: .05s; }
.lp-overlay.lp-open .lp-sub { animation-delay: .1s; }
.lp-overlay.lp-open .lp-tile:nth-child(1) { animation-delay: .16s; }
.lp-overlay.lp-open .lp-tile:nth-child(2) { animation-delay: .24s; }
.lp-overlay.lp-open .lp-tile:nth-child(3) { animation-delay: .32s; }
@keyframes lpIn {
  from { opacity: 0; transform: translateY(22px) scale(.92); }
  to   { opacity: 1; transform: translateY(0) scale(1); }
}
/* 启动台打开时锁定底层滚动 */
body.lp-open { overflow: hidden; }
@media (hover: hover) {
  .lp-tile:hover .lp-tile-icon {
    transform: translateY(-3px) scale(1.03);
    box-shadow: 0 1px 0 rgba(255,255,255,.28) inset, 0 16px 34px rgba(0,0,0,.20);
  }
}
[data-bs-theme="dark"] .lp-overlay {
  background:
    radial-gradient(circle at 50% -10%, rgba(167,198,218,.16) 0%, rgba(13,20,32,0) 55%),
    var(--bg);
}
@media (max-width: 480px) {
  .lp-grid { gap: 24px; }
  .lp-tile-icon { width: 76px; height: 76px; border-radius: 21px; }
  .lp-tile-icon svg { width: 34px; height: 34px; }
  .lp-title { font-size: 30px; }
}

/* ==================== 登录页：全屏磨砂卡片 ==================== */
.login-wrap {
  position: fixed; inset: 0; z-index: 2000;
  /* 高度跟随动态视口：iOS 键盘弹出时随视觉视口收缩 */
  height: 100vh;
  height: 100dvh;
  display: flex; justify-content: center;
  /* 容器可滚动：键盘弹出/矮屏时卡片高于可视区也能上下滑动查看 */
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
  overscroll-behavior: contain;
  background:
    radial-gradient(circle at 50% 0%, rgba(167,198,218,.35) 0%, rgba(245,245,247,0) 60%),
    linear-gradient(180deg, #fbfbfd 0%, #f5f5f7 100%);
  padding: 24px; animation: fadeIn .6s ease both;
}
.login-card {
  /* 双轴 auto 外边距：内容矮时垂直居中；内容高于容器时从顶部起可滚动，
     避免 flex 居中把卡片顶部裁出可视区（margin:auto 溢出时自动归零） */
  margin: auto;
  flex-shrink: 0;
  width: 100%; max-width: 388px;
  background: var(--glass-80);
  backdrop-filter: blur(28px) saturate(200%);
  -webkit-backdrop-filter: blur(28px) saturate(200%);
  border: 1px solid var(--glass-hi);
  border-radius: var(--r);
  box-shadow: var(--sh-login);
  padding: 48px 42px 40px; text-align: center;
  animation: riseIn .7s var(--ease) both;
}
.login-logo {
  width: 56px; height: 56px; border-radius: var(--r-logo);
  background: linear-gradient(135deg, var(--ap-blue) 0%, var(--ap-blue-hover) 100%);
  color: var(--ap-blue-ink);
  font-size: 24px; font-weight: 700; line-height: 56px;
  margin: 0 auto 24px;
  box-shadow: var(--sh-brand-h);
}
.login-title { font-size: 34px; font-weight: 800; letter-spacing: .04em; color: var(--ink); margin: 0 0 10px; }
.login-sub { font-size: 16px; color: var(--gray); margin: 0 0 34px; letter-spacing: .06em; }
/* 品牌口号：三个关键字用品牌深蓝点亮，间隔点呼应 */
.login-sub b { color: var(--ap-blue-deep); font-weight: 700; }
.login-sub i { font-style: normal; color: var(--ap-blue); padding: 0 10px; }
.login-card .form-group { margin-bottom: 16px; text-align: left; }
/* 标准登录表单容器（浏览器识别/保存密码所需的真实 <form>）：清除 UA 默认外边距 */
.login-form { margin: 0; }
.login-card .form-control {
  padding: 14px 18px; font-size: 16px;
  background: rgba(255,255,255,.72) !important;
  border-color: rgba(0,0,0,.10) !important;
  box-shadow: var(--field-inset) !important;
}
.login-card .form-control:focus {
  background: #fff !important;
  border-color: var(--focus-border) !important;
  box-shadow: 0 0 0 4px var(--focus-ring), var(--field-inset) !important;
}
.login-error { color: var(--neg-ink); font-size: var(--fs-sm); min-height: 22px; margin-bottom: 10px; }
.login-submit { width: 100%; min-height: 50px; font-size: 17px; border-radius: 14px; margin: 6px 0 0; }

/* ==================== 深色模式切换按钮（登录页固定右上 / 导航栏内嵌通用） ============
   bslib 组件内部按钮为透明图标（尺寸随宿主 font-size），
   外观样式加在宿主元素上；胶囊造型与全局 .btn 一致。 */
.theme-toggle-dock {
  position: fixed; top: calc(14px + env(safe-area-inset-top, 0px)); right: 16px; z-index: 2100;
}
.theme-toggle-dock bslib-input-dark-mode,
.navbar bslib-input-dark-mode {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  height: 32px;
  padding: 0 10px;
  background: var(--glass-75);
  backdrop-filter: blur(16px) saturate(180%);
  -webkit-backdrop-filter: blur(16px) saturate(180%);
  border: 1px solid var(--line);
  border-radius: 980px;
  box-shadow: var(--sh-chip);
  font-size: 15px;
  box-sizing: border-box;
}
/* 导航栏内的切换按钮与导航项垂直对齐 */
.navbar .nav-item bslib-input-dark-mode { margin: 4px 6px; }

/* ==================== 光扫特效：胶囊按钮 / pill 导航悬浮扫光 ==================== */
.btn,
.center-pill-nav .nav-pills .nav-link {
  position: relative;
  overflow: hidden;
}
.btn::after,
.center-pill-nav .nav-pills .nav-link::after {
  content: "";
  position: absolute;
  top: 0; left: -100%;
  width: 100%; height: 100%;
  background: linear-gradient(90deg, transparent, rgba(255,255,255,.35), transparent);
  transition: left .5s ease;
  pointer-events: none;
}
@media (hover: hover) {
  .btn:hover::after,
  .center-pill-nav .nav-pills .nav-link:hover::after { left: 100%; }
}

/* ==================== 深色主题 ====================
   右上角 input_dark_mode 切换 <html data-bs-theme="dark">。
   绝大多数组件靠令牌翻转自动生效；此处仅保留结构性覆盖
   （页面/导航背景、汉堡图标、蓝底文字色、时间轴配方等）。 */
[data-bs-theme="dark"] {
  --ink: #E9EEF6;
  --mid-ink: #C7D0DD;
  --gray: #98A2B3;
  --bg: #0D1420;
  --surface: #182032;
  --line: rgba(255,255,255,.10);
  /* 磨砂玻璃翻转 */
  --glass-nav: rgba(15,22,36,.78);
  --glass-45: rgba(19,27,43,.55);
  --glass-55: rgba(24,32,48,.55);
  --glass-75: rgba(24,32,48,.75);
  --glass-80: rgba(24,32,48,.80);
  --glass-modal: rgba(24,32,48,.96);
  --glass-notify: rgba(24,32,48,.95);
  --glass-hi: rgba(255,255,255,.12);
  /* 阴影翻转（内高光减弱、外阴影加深） */
  --sh-sm: 0 1px 0 rgba(255,255,255,.06) inset, 0 2px 12px rgba(0,0,0,.35), 0 1px 2px rgba(0,0,0,.25);
  --sh-md: 0 1px 0 rgba(255,255,255,.08) inset, 0 16px 48px rgba(0,0,0,.5), 0 4px 12px rgba(0,0,0,.3);
  --sh-lg: 0 24px 80px rgba(0,0,0,.6);
  --sh-pop: 0 16px 50px rgba(0,0,0,.5);
  --sh-login: 0 1px 0 rgba(255,255,255,.07) inset, 0 28px 80px rgba(0,0,0,.5), 0 10px 30px rgba(0,0,0,.35);
  --sh-well: 0 1px 0 rgba(255,255,255,.06) inset, 0 2px 12px rgba(0,0,0,.3);
  --sh-chip: 0 2px 10px rgba(0,0,0,.35);
  --sh-nav-scroll: 0 1px 0 rgba(255,255,255,.06) inset, 0 8px 30px rgba(0,0,0,.4);
  /* 次级按钮翻转 */
  --btn-sec: linear-gradient(180deg, #263145 0%, #1D2637 100%);
  --btn-sec-h: linear-gradient(180deg, #2C3A52 0%, #232E45 100%);
  --btn-sec-sh: 0 1px 0 rgba(255,255,255,.07) inset, 0 2px 8px rgba(0,0,0,.3);
  --btn-sec-sh-h: 0 1px 0 rgba(255,255,255,.08) inset, 0 6px 18px rgba(0,0,0,.4);
  /* 表单翻转 */
  --field-bg: linear-gradient(180deg, #151D2D 0%, #182032 100%);
  --field-bg-f: #182032;
  --field-line: rgba(255,255,255,.10);
  --field-inset: 0 1px 2px rgba(0,0,0,.3) inset;
  --focus-ring: rgba(167,198,218,.22);
  --focus-border: var(--ap-blue);
  /* 表格翻转 */
  --tbl-bg: rgba(20,28,44,.5);
  --tbl-line: rgba(255,255,255,.10);
  --thead-line: rgba(255,255,255,.14);
  --row-line: rgba(255,255,255,.06);
  --row-h: #1B2436;
  --row-sel: rgba(167,198,218,.16);
  /* 徽章翻转 */
  --badge-mid: rgba(255,255,255,.10);
  --badge-dim: rgba(255,255,255,.05);
  /* pill 导航翻转 */
  --pill-line: rgba(255,255,255,.10);
  --pill-hov: rgba(167,198,218,.18);
  /* 滚动条翻转 */
  --scroll-thumb: rgba(255,255,255,.18);
  /* 拖拽把手翻转 */
  --handle: rgba(255,255,255,.28);
  /* 时间轴配方翻转 */
  --ok-green: #30d158;
  --ok-green-deep: #3ce273;
  --ok-green-soft: rgba(48,209,88,.20);
  --tl-track-bg: rgba(255,255,255,.06);
  --tl-band: rgba(255,255,255,.06);
}

/* 品牌浅蓝底上的文字保持深色（--ap-blue-ink 不翻转，蓝底上维持对比度）。
   深色下 :active 等伪态可能被 Bootstrap 覆写颜色，此处统一钉住。 */
[data-bs-theme="dark"] .btn-primary,
[data-bs-theme="dark"] .btn-success,
[data-bs-theme="dark"] .badge.sb-att,
[data-bs-theme="dark"] .page-item.active .page-link,
[data-bs-theme="dark"] .navbar .nav-link.active,
[data-bs-theme="dark"] .navbar .nav > li.active > a,
[data-bs-theme="dark"] .center-pill-nav .nav-pills > li.active > a,
[data-bs-theme="dark"] .center-pill-nav .nav-pills .nav-link.active,
[data-bs-theme="dark"] .navbar-brand::before {
  color: var(--ap-blue-ink) !important;
}

/* 页面背景：深色径向渐变（构图与浅色一致） */
[data-bs-theme="dark"] body {
  background:
    radial-gradient(circle at 80% 0%, rgba(167,198,218,.10) 0%, rgba(13,20,32,0) 45%),
    radial-gradient(circle at 20% 100%, rgba(167,198,218,.07) 0%, rgba(13,20,32,0) 40%),
    var(--bg);
  background-attachment: fixed;
}
/* 顶部导航：深色发丝线 + 内高光减弱（浅色是白色高光，深色下过亮） */
[data-bs-theme="dark"] .navbar {
  border-bottom: 1px solid rgba(255,255,255,.08);
  box-shadow: 0 1px 0 rgba(255,255,255,.06) inset;
}
/* 「已结算」徽章深色翻转：深灰渐变底白字在深卡片上近乎隐形，翻为浅底深字 */
[data-bs-theme="dark"] .badge.sb-deep {
  background: linear-gradient(180deg, #E9EEF6 0%, #C7D0DD 100%);
  color: var(--ap-blue-ink);
}
/* 日期弹层（bootstrap-datepicker 自带白底）深色翻转 */
[data-bs-theme="dark"] .datepicker {
  background: var(--glass-modal); color: var(--ink);
  border: 1px solid var(--line);
}
[data-bs-theme="dark"] .datepicker table tr td,
[data-bs-theme="dark"] .datepicker table tr th,
[data-bs-theme="dark"] .datepicker .datepicker-switch,
[data-bs-theme="dark"] .datepicker .prev,
[data-bs-theme="dark"] .datepicker .next { color: var(--ink); }
[data-bs-theme="dark"] .datepicker table tr td.day.old,
[data-bs-theme="dark"] .datepicker table tr td.day.new { color: var(--gray); }
[data-bs-theme="dark"] .datepicker table tr th.dow { color: var(--gray); }
/* 汉堡图标线条改浅色 */
[data-bs-theme="dark"] .navbar-default .navbar-toggle,
[data-bs-theme="dark"] .navbar-default .navbar-toggle:hover,
[data-bs-theme="dark"] .navbar-default .navbar-toggle:focus,
[data-bs-theme="dark"] .navbar-toggle,
[data-bs-theme="dark"] .navbar-toggle:hover,
[data-bs-theme="dark"] .navbar-toggle:focus {
  background-image: url('data:image/svg+xml,%3Csvg xmlns=%22http://www.w3.org/2000/svg%22 viewBox=%220 0 30 30%22%3E%3Cpath stroke=%22%23E9EEF6%22 stroke-linecap=%22round%22 stroke-miterlimit=%2210%22 stroke-width=%222%22 d=%22M4 7h22M4 15h22M4 23h22%22/%3E%3C/svg%3E') !important;
}
/* 平板导航折叠面板（浅色规则在 991px 媒体内，此处同范围覆盖） */
@media (max-width: 991px) {
  [data-bs-theme="dark"] .navbar-collapse {
    background: rgba(19,27,43,.95) !important;
    border: 1px solid rgba(255,255,255,.12);
    box-shadow: 0 20px 60px rgba(0,0,0,.5);
  }
}
/* 深色卡片底色（阴影已随令牌翻转） */
[data-bs-theme="dark"] .card,
[data-bs-theme="dark"] .card.bslib-value-box {
  background: linear-gradient(180deg, #1E2839 0%, #182031 100%) !important;
}
/* 描边主按钮：深色下改用更亮的品牌蓝 */
[data-bs-theme="dark"] .btn-outline-primary {
  border-color: var(--ap-blue);
  color: var(--ap-blue);
}
@media (hover: hover) {
  [data-bs-theme="dark"] .btn-outline-primary:hover {
    background: rgba(167,198,218,.15);
    border-color: var(--ap-blue);
    color: var(--ap-blue-hover);
  }
  /* 深色下导航与时间轴小按钮的悬浮底色要比浅色更亮才可感知 */
  [data-bs-theme="dark"] .navbar .nav-link:hover,
  [data-bs-theme="dark"] .navbar .nav > li > a:hover {
    color: var(--ink);
    background: rgba(167,198,218,.22);
  }
  [data-bs-theme="dark"] .tl-mini-btn:hover { background: rgba(255,255,255,.08); }
}
[data-bs-theme="dark"] .form-control::placeholder { color: var(--gray); opacity: 1; }
[data-bs-theme="dark"] .dataTables_scrollBody::-webkit-scrollbar-thumb { background: rgba(255,255,255,.18); }
/* 登录页背景 */
[data-bs-theme="dark"] .login-wrap {
  background:
    radial-gradient(circle at 50% 0%, rgba(167,198,218,.14) 0%, rgba(13,20,32,0) 60%),
    linear-gradient(180deg, #101827 0%, var(--bg) 100%);
}
[data-bs-theme="dark"] .login-card .form-control {
  background: rgba(13,20,34,.6) !important;
  border-color: rgba(255,255,255,.14) !important;
  color: var(--ink);
}
[data-bs-theme="dark"] .login-card .form-control:focus {
  background: rgba(13,20,34,.8) !important;
}

/* ==================== 时间轴组件（发布编辑器 / 报名选择器 / 需求热力视图） ====================
   与全站一致的苹果风：大圆角、柔影、绿块渐变、统一缓动 */
:root {
  --ok-green: #34c759;        /* 选中/已分时段：苹果系统绿 */
  --ok-green-deep: #1f9d44;   /* 绿的深一度，强调文字 */
  --ok-green-soft: rgba(52,199,89,.16);
  --tl-track-bg: rgba(0,0,0,.045);
  --tl-band: rgba(255,255,255,.55);  /* 主要用工时段（9:00-21:00）高亮带 */
}
.tl-editor, .tl-picker, .tl-demand { margin: 4px 0 14px; }
.tl-range-row { display: flex; align-items: center; gap: 12px; margin: 10px 0; flex-wrap: wrap; }
.tl-range-row .form-control { max-width: 210px; padding: 9px 14px; font-size: 15px; }
.tl-range-row .shiny-input-container { margin-bottom: 0; width: auto !important; }
.tl-range-lab { font-weight: 500; font-size: 15px; color: var(--mid-ink); }
/* 日期控件双形态：默认藏原生（type=date），粗指针（触屏）藏组件用原生 */
.tl-date-native { display: none; }
@media (pointer: coarse) {
  .tl-range-row .shiny-date-input { display: none; }
  .tl-range-row .tl-date-native { display: block; flex: 1 1 150px; max-width: none; }
}
.tl-hint { color: var(--gray); font-size: 13.5px; line-height: 1.5; }
/* 日期卡片：浮于卡片的浅色子卡（relative 供光标时间标签定位） */
.tl-day {
  position: relative;
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: 16px;
  padding: 12px 18px 24px;
  margin-bottom: 14px;
  animation: fadeIn .35s var(--ease) both;
}
[data-bs-theme="dark"] .tl-day { background: rgba(255,255,255,.03); }
.tl-day-head { display: flex; align-items: center; justify-content: space-between; margin-bottom: 4px; }
.tl-day-title { font-weight: 600; font-size: 15.5px; letter-spacing: .01em; }
.tl-day-ops { display: flex; gap: 6px; align-items: center; }
.tl-mini-btn {
  border: none; background: transparent; color: var(--gray);
  font-size: 13px; padding: 3px 10px; border-radius: 980px; cursor: pointer;
  transition: background var(--dur-f) ease, color var(--dur-f) ease;
}
.tl-day-del { font-size: 16px; line-height: 1; }
.tl-day-all { color: var(--ap-blue-deep); }
/* 刻度尺：每小时一格；密度档位由视口类控制（applyViewport 按每小时像素宽度设置） */
.tl-ruler { position: relative; height: 18px; margin: 0 2px; }
.tl-tick {
  display: none;
  position: absolute; top: 0; transform: translateX(-50%);
  font-size: 11px; color: var(--gray); font-variant-numeric: tabular-nums;
}
.tl-tick:first-child { transform: none; }
.tl-tick:last-child { transform: translateX(-100%); }
.tl-viewport.tl-d1 .tl-tick.tk1,
.tl-viewport.tl-d2 .tl-tick.tk2,
.tl-viewport.tl-d3 .tl-tick.tk3,
.tl-viewport.tl-d6 .tl-tick.tk6 { display: block; }
/* 轨道：圆角长条 + 3 小时网格线 + 主要用工时段（9:00-21:00，37.5%-87.5%）高亮带 */
.tl-track {
  position: relative; height: 58px; border-radius: 12px; cursor: crosshair;
  background:
    linear-gradient(90deg,
      transparent 0, transparent 37.5%,
      var(--tl-band) 37.5%, var(--tl-band) 87.5%,
      transparent 87.5%),
    repeating-linear-gradient(90deg, transparent 0, transparent calc(12.5% - 1px), var(--line) calc(12.5% - 1px), var(--line) 12.5%),
    var(--tl-track-bg);
  border: 1px solid var(--line);
  overflow: hidden;
  transition: box-shadow var(--dur-f) ease;
}
.tl-editor .tl-track { height: 99px; }  /* 加高 30%（76→99）：指尖更易按中，窄块时间可两行显示 */
/* 选择起止点时轨道下方的光标时间：与刻度尺同款灰字小标签、无背景；
   仅在悬停裸轨道时出现，悬停已成型的块或拖拽时不显示 */
.tl-caret-time {
  position: absolute; z-index: 4;
  transform: translateX(-50%);
  font-size: 11px; color: var(--gray); font-variant-numeric: tabular-nums;
  line-height: 1.4; white-space: nowrap; pointer-events: none;
}
/* 时段块：绿色渐变 + 弹入动画；窄块隐藏副行 */
.tl-block {
  position: absolute; top: 5px; bottom: 5px;
  border-radius: 9px;
  background: linear-gradient(180deg, #51d273 0%, var(--ok-green) 100%);
  box-shadow: 0 2px 8px rgba(52,199,89,.35), 0 1px 0 rgba(255,255,255,.35) inset;
  color: #fff; padding: 4px 8px; overflow: hidden;
  display: flex; flex-direction: column; justify-content: center;
  animation: tlPopIn .3s var(--ease) both;
  transition: filter var(--dur-f) ease, box-shadow var(--dur-f) ease;
  /* 防指尖长按触发系统文本选择/呼出菜单（iOS 必须带 -webkit- 前缀），
     否则按住块会选中时间文字导致拖拽失效 */
  user-select: none;
  -webkit-user-select: none;
  -webkit-touch-callout: none;
}
/* 轨道内其他文字（刻度尺/待定起点标签）同样禁选：它们恰在触控选点的落指区 */
.tl-track, .tl-ruler, .tl-pin-t {
  user-select: none;
  -webkit-user-select: none;
  -webkit-touch-callout: none;
}
/* 块内文字允许换行（white-space: normal）：轨道加高后窄块的时间可折成两行，
   宽块仍保持单行（足够宽时不触发换行） */
.tl-block-t { font-size: 12px; font-weight: 600; line-height: 1.3; white-space: normal; }
.tl-block-s { font-size: 10.5px; opacity: .92; line-height: 1.3; white-space: normal; }
/* 选中/编辑中的时段块：光影呼吸提示（描边 + 光晕缓慢呼吸，选中态一眼可辨；
   prefers-reduced-motion 命中时由全局降级规则关闭动画，保留静态描边） */
@keyframes tlGlow {
  0%, 100% { box-shadow: 0 0 0 3px rgba(52,199,89,.30), 0 0 12px rgba(52,199,89,.35), 0 1px 0 rgba(255,255,255,.35) inset; }
  50%      { box-shadow: 0 0 0 4px rgba(52,199,89,.45), 0 0 24px rgba(52,199,89,.60), 0 1px 0 rgba(255,255,255,.35) inset; }
}
.tl-block.editing {
  outline: 2px solid var(--ok-green-deep); outline-offset: 1px;
  animation: tlGlow 1.6s ease-in-out infinite;
}
.tl-picker .tl-block.selected {
  animation: tlGlow 1.6s ease-in-out infinite;
}
/* 窄块（<48px，JS 标记）不显示文字：点击查看（编辑器弹层/选择器摘要行） */
.tl-block.tl-narrow { padding: 4px 4px; }
.tl-block.tl-narrow .tl-block-t,
.tl-block.tl-narrow .tl-block-s,
.tl-block.tl-narrow .tl-names { display: none; }
/* 待定起点针：竖线 + 脉冲点 + 时间标签 */
.tl-pin { position: absolute; top: 0; bottom: 0; width: 2px; background: var(--ok-green-deep); }
.tl-pin::before {
  content: ''; position: absolute; top: -1px; left: -4px; width: 10px; height: 10px;
  border-radius: 50%; background: var(--ok-green-deep);
  animation: tlPulse 1.1s ease-out infinite;
}
.tl-pin-t {
  position: absolute; top: 2px; left: 6px; font-size: 11px; font-weight: 600;
  color: var(--ok-green-deep); white-space: nowrap;
}
/* 跟随光标的预览块与参考线 */
.tl-ghost {
  position: absolute; top: 5px; bottom: 5px; border-radius: 9px;
  background: var(--ok-green-soft); border: 1.5px dashed var(--ok-green-deep);
  pointer-events: none;
}
.tl-line {
  position: absolute; top: 0; bottom: 0; width: 1px;
  background: rgba(31,157,68,.5); pointer-events: none;
}
/* 触控时间气泡（loupe）：指尖选点/拖拽时在轨道上方显示对应时间，避免手指遮挡 */
.tl-loupe {
  position: absolute; z-index: 8;
  transform: translateX(-50%);
  padding: 5px 12px; border-radius: 980px;
  background: var(--ink); color: var(--bg);
  font-size: 13px; font-weight: 600; font-variant-numeric: tabular-nums;
  line-height: 1.4; white-space: nowrap; pointer-events: none;
  box-shadow: var(--sh-pop);
  animation: tlLoupeIn .18s var(--ease) both;
}
/* loupe 专用弹入：keyframes 必须带上 translateX(-50%)——普通 transform 声明会被
   动画填充帧覆盖（tlPopIn 只有 scale），导致气泡错位半个宽度 */
@keyframes tlLoupeIn {
  from { opacity: 0; transform: translateX(-50%) scale(.75); }
  to   { opacity: 1; transform: translateX(-50%) scale(1); }
}
.tl-loupe::after {
  content: ''; position: absolute; top: 100%; left: 50%; transform: translateX(-50%);
  border: 5px solid transparent; border-top-color: var(--ink);
}
.tl-loupe.tl-bad { background: var(--neg-ink); }
.tl-loupe.tl-bad::after { border-top-color: var(--neg-ink); }
[data-bs-theme="dark"] .tl-loupe.tl-bad { background: var(--neg); }
[data-bs-theme="dark"] .tl-loupe.tl-bad::after { border-top-color: var(--neg); }
/* 块编辑弹层：磨砂小卡片 */
.tl-pop {
  display: flex; align-items: flex-end; gap: 10px; flex-wrap: wrap;
  margin-top: 10px; padding: 10px 14px;
  background: var(--glass-modal);
  backdrop-filter: blur(16px) saturate(180%);
  -webkit-backdrop-filter: blur(16px) saturate(180%);
  border: 1px solid var(--line); border-radius: var(--r-input);
  box-shadow: var(--sh-pop);
  animation: tlPopIn .25s var(--ease) both;
}
.tl-pop label { font-size: 13px; color: var(--gray); display: flex; flex-direction: column; gap: 4px; }
.tl-pop .form-control { width: 96px; padding: 6px 10px; font-size: 14px; }
.tl-pop .form-control[type="time"] { width: 112px; }
.tl-pop-ops { display: flex; gap: 4px; }
.tl-summary { color: var(--gray); font-size: 13.5px; margin-top: 2px; }
.tl-empty-hint {
  color: var(--gray); font-size: 14px; text-align: center;
  padding: 22px 10px; border: 1.5px dashed var(--line); border-radius: 14px;
}
/* 选择器（报名弹窗）：未选中为中性块，选中变绿 */
.tl-picker .tl-track { cursor: default; height: 52px; }
.tl-picker .tl-block {
  background: linear-gradient(180deg, #ececf0 0%, #dedee3 100%);
  box-shadow: 0 1px 4px rgba(0,0,0,.08);
  color: var(--ink); cursor: pointer;
}
.tl-picker .tl-block.selected {
  background: linear-gradient(180deg, #51d273 0%, var(--ok-green) 100%);
  box-shadow: 0 2px 10px rgba(52,199,89,.4);
  color: #fff;
}
/* 需求热力视图（商家实时人数）：按 已选/需求 比例分档着色 */
.tl-demand .tl-track { cursor: default; height: 52px; }
.tl-demand .tl-block { cursor: default; }
.tl-demand .tl-fill-0 {
  background: linear-gradient(180deg, #f2f2f5 0%, #e8e8ed 100%);
  box-shadow: 0 1px 4px rgba(0,0,0,.06); color: var(--gray);
}
.tl-demand .tl-fill-1 {
  background: linear-gradient(180deg, var(--ap-blue-hover) 0%, var(--ap-blue) 100%);
  box-shadow: 0 2px 10px rgba(167,198,218,.45); color: var(--ap-blue-ink);
}
.tl-demand .tl-fill-2 {
  background: linear-gradient(180deg, #51d273 0%, var(--ok-green) 100%);
  box-shadow: 0 2px 10px rgba(52,199,89,.4); color: #fff;
}
.tl-names { font-size: 10.5px; line-height: 1.35; opacity: .95; white-space: normal; }
/* 动画 */
@keyframes tlPopIn {
  from { opacity: 0; transform: scale(.75); }
  to   { opacity: 1; transform: scale(1); }
}
@keyframes tlPulse {
  0%   { box-shadow: 0 0 0 0 rgba(52,199,89,.5); }
  70%  { box-shadow: 0 0 0 9px rgba(52,199,89,0); }
  100% { box-shadow: 0 0 0 0 rgba(52,199,89,0); }
}
.tl-shake { animation: tlShake .32s ease; }
@keyframes tlShake {
  0%, 100% { transform: translateX(0); }
  25% { transform: translateX(-5px); }
  50% { transform: translateX(5px); }
  75% { transform: translateX(-3px); }
}
/* 时间轴深色覆盖（令牌未覆盖到的结构性差异） */
[data-bs-theme="dark"] .tl-picker .tl-block {
  background: linear-gradient(180deg, #263145 0%, #1D2637 100%);
  color: var(--ink);
}
/* 选中态背景须用更高优先级覆盖上方深色底（否则深色底+深色字看不清） */
[data-bs-theme="dark"] .tl-picker .tl-block.selected {
  background: linear-gradient(180deg, #51d273 0%, var(--ok-green) 100%);
  box-shadow: 0 2px 10px rgba(48,209,88,.4);
  color: #06230f;
}
[data-bs-theme="dark"] .tl-demand .tl-fill-2 { color: #06230f; }
[data-bs-theme="dark"] .tl-block { color: #06230f; }
[data-bs-theme="dark"] .tl-demand .tl-fill-0 {
  background: linear-gradient(180deg, #263145 0%, #1D2637 100%);
  color: var(--gray);
}
[data-bs-theme="dark"] .tl-demand .tl-fill-1 { color: var(--ap-blue-ink); }
[data-bs-theme="dark"] .tl-empty-hint { border-color: rgba(255,255,255,.14); }
[data-bs-theme="dark"] .tl-block:hover .tl-grip::after { background: rgba(6,35,15,.55); }

/* 时间轴块拖拽：块体平移（grab）、两端手柄调时长（ew-resize）、重叠红显 */
.tl-editor .tl-block { cursor: grab; }
.tl-editor .tl-block:active { cursor: grabbing; }
.tl-grip {
  position: absolute; top: 0; bottom: 0; width: 9px; cursor: ew-resize; z-index: 2;
}
.tl-grip-l { left: 0; border-radius: 9px 0 0 9px; }
.tl-grip-r { right: 0; border-radius: 0 9px 9px 0; }
.tl-grip::after {
  content: ''; position: absolute; top: 50%;
  width: 3px; height: 42%; border-radius: 2px;
  background: rgba(255,255,255,0);
  transition: background .15s ease;
}
/* 指示条贴块内外缘（触控热区已加宽到 20px，居中会遮住块内时间/金额文字） */
.tl-grip-l::after { left: 2px; transform: translateY(-50%); }
.tl-grip-r::after { right: 2px; transform: translateY(-50%); }
/* 拖拽中重叠/越界的即时红显 */
.tl-block.tl-invalid {
  background: linear-gradient(180deg, #ef8a92 0%, var(--neg) 100%);
  box-shadow: 0 2px 10px rgba(224,108,117,.45);
}

/* 时间轴视窗化（窄屏左右滑动）：.tl-viewport 溢出横滚，.tl-scroll 宽度
   由 timeline.js 按 24/可见小时数 设置；块与刻度仍按全天百分比定位 */
.tl-viewport {
  overflow-x: auto; overflow-y: hidden;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: thin;
  scrollbar-color: rgba(167,198,218,.65) transparent;
  border-radius: 12px;
}
/* 可拖拽的滚动条滑块：品牌蓝、胶囊形 */
.tl-viewport::-webkit-scrollbar { height: 8px; }
.tl-viewport::-webkit-scrollbar-track { background: transparent; }
.tl-viewport::-webkit-scrollbar-thumb {
  background: rgba(167,198,218,.65); border-radius: 980px;
}
[data-bs-theme="dark"] .tl-viewport::-webkit-scrollbar-thumb { background: rgba(167,198,218,.45); }
@media (hover: hover) {
  [data-bs-theme="dark"] .tl-viewport::-webkit-scrollbar-thumb:hover { background: var(--ap-blue); }
}
.tl-scroll { min-width: 100%; }
/* 触屏手势分工：轨道横滑=滚动视窗（native），块/手柄按住=自定义拖拽 */
.tl-editor .tl-track, .tl-picker .tl-track, .tl-demand .tl-track { touch-action: pan-x pan-y; }
.tl-editor .tl-block, .tl-editor .tl-grip { touch-action: none; }
/* 日期弹层（bootstrap-datepicker）与全站圆角体系统一：
   弹层=输入控件级 var(--r-input)；日期格圆角 8px；选中态用品牌蓝渐变（替换默认深蓝） */
.datepicker {
  border-radius: var(--r-input) !important;
  overflow: hidden;
}
.datepicker table { border-collapse: separate; border-spacing: 2px; }
.datepicker table tr td, .datepicker table tr th { border-radius: 8px; }
.datepicker table tr td span { border-radius: 8px; }
.datepicker table tr td.active, .datepicker table tr td.active:hover,
.datepicker table tr td.active.focused,
.datepicker table tr td span.active, .datepicker table tr td span.active:hover {
  background: linear-gradient(180deg, var(--ap-blue-hover) 0%, var(--ap-blue) 100%) !important;
  color: var(--ap-blue-ink) !important;
  text-shadow: none !important;
}
.datepicker table tr td.today, .datepicker table tr td.today:hover {
  background: rgba(167,198,218,.18) !important;
  color: var(--ap-blue-deep) !important;
}
@media (hover: hover) {
  .datepicker table tr td:hover, .datepicker table tr td.focused,
  .datepicker table tr td span:hover, .datepicker table tr td span.focused {
    background: var(--ap-blue-soft) !important;
  }
}
/* 日期弹层（bootstrap-datepicker）中文操作条 */
.tl-dp-ops {
  display: flex; justify-content: flex-end; gap: 4px;
  padding: 6px 10px; border-top: 1px solid var(--line);
}
.tl-dp-ops .tl-mini-btn { font-size: 14px; }

/* ==================== 响应式：平板（≤991px） ==================== */
@media (max-width: 991px) {
  /* 平板：导航折叠面板磨砂 + 柔影 */
  .navbar-collapse {
    position: absolute; top: calc(100% + 6px); left: 12px; right: 12px;
    background: rgba(255,255,255,.92) !important;
    backdrop-filter: blur(24px) saturate(200%);
    -webkit-backdrop-filter: blur(24px) saturate(200%);
    border: 1px solid var(--glass-hi);
    border-radius: var(--r);
    box-shadow: var(--sh-pop);
    padding: 10px;
  }
  .navbar-collapse .nav-item, .navbar-collapse .nav > li { margin: 2px 0; }
  .navbar-collapse .nav-link, .navbar-collapse .nav > li > a { border-radius: 980px; padding: 10px 18px !important; }
}

/* ==================== 响应式：手机（≤767px） ==================== */
@media (max-width: 767px) {
  /* ===== 底部 Tab 栏：顶层导航整体移到屏幕底部（小程序/iOS 形态） ===== */
  .navbar {
    top: auto; bottom: 0; left: 0; right: 0; position: fixed;
    border-bottom: none; border-top: 1px solid var(--line);
    box-shadow: none;
    padding-bottom: env(safe-area-inset-bottom, 0px);
    transition: transform var(--dur-m) var(--ease);
  }
  body.hr-scrolled .navbar { box-shadow: none; }
  /* 钻取子页时 Tab 栏滑出（iOS 惯例），返回宫格/切换顶层即滑回 */
  body.app-subpage .navbar { transform: translateY(102%); }
  .navbar-brand { display: none !important; }
  .navbar-toggle, .navbar-toggler { display: none !important; }
  .navbar > .container-fluid { padding: 0 8px; flex-wrap: nowrap; }
  /* Tab 栏不再需要汉堡折叠浮层：强制展开（bslib 的是 BS3 结构，<768px 时
     .collapse:not(.show) 会被 BS5 规则隐藏，导致 Tab 栏内容整体不可见） */
  .navbar-collapse,
  .navbar-collapse.collapse {
    display: block !important; height: auto !important; overflow: visible !important;
    position: static !important; background: transparent !important; border: none !important;
    box-shadow: none !important; padding: 0; margin: 0 !important;
    backdrop-filter: none !important; -webkit-backdrop-filter: none !important;
  }
  /* 品牌与汉堡在手机端隐藏后，头部容器一并隐藏避免占位 */
  .navbar-header { display: none !important; }
  .navbar-nav, .navbar .nav,
  .navbar-collapse.in .navbar-nav, .navbar-collapse.show .navbar-nav,
  .navbar-collapse.in .navbar .nav, .navbar-collapse.show .navbar .nav {
    flex-direction: row !important; flex-wrap: nowrap !important;
    overflow: visible !important; gap: 0 !important; width: 100%;
    margin: 0 !important;
    align-items: center !important; /* Tab 项垂直居中（回到主页/退出登录高度一致） */
  }
  .navbar .nav-item, .navbar .nav > li,
  .navbar-collapse.in .navbar-nav > li, .navbar-collapse.show .navbar-nav > li,
  .navbar-collapse.in .navbar .nav > li, .navbar-collapse.show .navbar .nav > li {
    flex: 1 1 0; margin: 0 !important;
  }
  /* 「回到主页」是 Tab 栏唯一可见项：居中单列 + 品牌色 */
  .nav-home-btn {
    flex-direction: column; gap: 3px;
    width: 100%; padding: 7px 0 4px; border-radius: 0;
    background: transparent !important; box-shadow: none;
    color: var(--ap-blue-deep); font-size: 10px; font-weight: 500; line-height: 1.25;
  }
  .nav-home-btn svg { width: 25px; height: 25px; }
  [data-bs-theme="dark"] .nav-home-btn { color: var(--ap-blue); }
  /* 退出登录：与「回到主页」同款的图标+文字 Tab 项（灰色中性） */
  .btn.nav-exit-btn {
    flex-direction: column; gap: 3px;
    width: 100%; padding: 7px 0 4px; border-radius: 0; min-height: 0;
    color: var(--gray); font-size: 10px; font-weight: 500; line-height: 1.25;
  }
  .btn.nav-exit-btn svg { width: 25px; height: 25px; }
  /* 深色切换钮：手机端由 appnav.js 挪出 .navbar 挂到右上角 dock——
     .navbar 的 backdrop-filter/transform 会把 fixed 后代捕获进自身坐标系，
     纯 CSS 的 position:fixed 方案不可靠 */
  /* 卡片：小程序风格——小圆角、紧致内边距、低重心排版 */
  .card { border-radius: 16px; }
  .card-header { font-size: 17px; padding: 14px 18px 2px; }
  .card-body { padding: 10px 18px 12px; }
  .card.bslib-value-box { border-radius: 16px !important; }
  /* 反填充：卡片内容一律按内容定高，DT/输出组件不参与 flex 拉伸，
     消除栅格行高拉伸与 html-fill 链造成的卡片内大块空白 */
  .card-body > * { flex: 0 0 auto !important; }
  .card-body h6 { font-size: 15px; margin: 6px 0 4px; }
  .card-body p { margin-bottom: 8px; }
  /* 数据看板两列排布：信息密度更高，免长滑（:has 不支持时优雅回退为整行） */
  .bslib-grid > .bslib-grid-item:has(> .bslib-value-box) { grid-column: span 6 !important; }
  /* 按钮：更大触控区域，移动端可舒适点击 */
  .btn { padding: 12px 18px; font-size: 15px; margin: 4px 6px 4px 0; min-height: var(--tap); }
  .btn-sm { padding: 11px 16px; font-size: 14px; }
  /* 表格：横向滚动 + 至少铺满容器；字号内距收敛提升一屏信息量 */
  .dataTables_wrapper { overflow-x: auto; -webkit-overflow-scrolling: touch; border-radius: 12px; }
  table.dataTable { min-width: max(100%, 640px); }
  table.dataTable th, table.dataTable td { padding: 8px 12px; font-size: 14px; }
  table.dataTable thead th { font-size: 12.5px; padding: 8px 12px; }
  .dataTables_scrollBody { max-height: calc(100vh - 180px) !important; }
  /* 表格信息行收敛，避免挤压 */
  .dataTables_info { font-size: 12.5px; }
  .dataTables_info, .dataTables_paginate { padding-top: 8px !important; }
  /* value box 数字收敛（两列布局适配） */
  .bslib-value-box .value-box-value { font-size: 26px; }
  .bslib-value-box .value-box-title { font-size: 13px; line-height: 1.4; }
  /* 主容器与网格间距在手机上更紧凑 */
  .container-fluid { padding-left: 12px; padding-right: 12px; }
  .bslib-grid { gap: 10px !important; }
  .bslib-mb-spacing { margin-bottom: 10px !important; }
  /* 表单：保持 16px 避免 iOS 自动缩放；纵向间距收紧 */
  .form-control, .form-select { padding: 10px 14px; font-size: 16px; }
  .form-label { font-size: 15px; margin-bottom: 4px; }
  .form-group, .shiny-input-container { margin-bottom: 12px; }
  hr { margin: 10px 0; }
  /* 宫格与落地页同步收紧 */
  .app-home-sub { margin-bottom: 20px; }
  .app-grid { gap: 18px 8px; }
  .sub-title { margin: 10px 2px 12px; }
  /* 弹窗改为底部抽屉（小程序风格）：贴底滑入、顶部大圆角 + 拖拽把手、
     内容区独立滚动、底栏避开 Home 指示条 */
  .modal { padding: 0 !important; }
  .modal.show { display: flex !important; flex-direction: column; justify-content: flex-end; }
  /* 关掉 Bootstrap 自带的顶部落入位移，统一走 sheetIn 底部滑入 */
  .modal.fade .modal-dialog { transform: none; transition: none; }
  .modal-dialog { margin: 0; width: 100%; max-width: 100%; }
  .modal-content {
    border-radius: 20px 20px 0 0;
    max-height: 88vh; max-height: 88dvh;
    display: flex; flex-direction: column;
    animation: sheetIn var(--dur-m) var(--ease) both;
  }
  .modal-header { position: relative; padding: 26px 20px 8px; }
  .modal-header::before {
    content: ""; position: absolute; top: 9px; left: 50%; transform: translateX(-50%);
    width: 36px; height: 4.5px; border-radius: 3px; background: var(--handle);
  }
  .modal-body {
    padding: 10px 20px;
    overflow-y: auto; -webkit-overflow-scrolling: touch; overscroll-behavior: contain;
  }
  .modal-footer { padding: 12px 20px calc(14px + env(safe-area-inset-bottom, 0px)); }
  .modal-title { font-size: 20px; }
  /* 操作按钮组移动端堆叠间隙 */
  .card-body > .btn, .card-body > .mt-2 > .btn, .card-body > div > .btn { margin-bottom: 6px; }
  /* 标签页标题在手机上更紧凑 */
  .nav-tabs .nav-link { padding: 10px 14px; font-size: 15px; }
  /* iPhone 底部 Home 指示条安全区 + Tab 栏占位 + 去掉点按灰色闪烁 + 抑制橡皮筋滚动穿透
     （先写常量值兜底：老 WebView 不支持 env() 会丢弃整条 calc 声明） */
  body { padding-bottom: 58px; padding-bottom: calc(58px + env(safe-area-inset-bottom, 0px)); overscroll-behavior-y: contain; }
  * { -webkit-tap-highlight-color: transparent; }
  /* 二级导航：手机端由宫格首页 + 返回栏取代，隐藏侧边栏；内容区恢复全宽。
     （锚点 DOM 仍在，appnav.js 点击宫格图标即触发对应锚点切换面板） */
  .center-pill-nav .well { display: none; }
  .center-pill-nav .row {
    display: block;
  }
  .center-pill-nav .row > [class*='col-'] {
    width: 100% !important;
    max-width: 100% !important;
    padding-left: 12px !important;
    padding-right: 12px !important;
  }
  .center-pill-nav .row > [class*='col-'] + [class*='col-'] {
    padding-left: 12px !important;
    margin-top: 0;
  }
}

/* ==================== 响应式：小屏手机（≤480px） ==================== */
@media (max-width: 480px) {
  .card { border-radius: 14px; }
  .card-header { font-size: 16px; padding: 12px 16px 2px; }
  .card-body { padding: 8px 16px 10px; }
  .card.bslib-value-box { border-radius: 14px !important; }
  /* 按钮保持胶囊感，不拉伸全宽；触控区域通过 padding 保证 */
  .btn { padding: 12px 18px; font-size: 15px; margin: 4px 5px 4px 0; }
  .btn-sm { padding: 10px 14px; font-size: 14px; }
  .login-submit { width: 100%; padding: 14px 18px; }
  .container-fluid { padding-left: 10px; padding-right: 10px; }
  .bslib-grid { gap: 8px !important; }
  /* 底部抽屉弹窗：小屏进一步收紧（贴底布局在 767px 档定义） */
  .modal-header { padding: 24px 16px 8px; }
  .modal-body { padding: 8px 16px; }
  .modal-footer { padding: 10px 16px calc(12px + env(safe-area-inset-bottom, 0px)); }
  .modal-title { font-size: 19px; }
  .login-card { padding: 40px 28px 34px; border-radius: var(--r); }
  .login-title { font-size: 28px; }
}

/* ==================== 触控（粗指针）：≥44px 触点 ==================== */
@media (pointer: coarse) {
  .btn { min-height: var(--tap); }
  .center-pill-nav .nav-pills > li > a,
  .center-pill-nav .nav-pills .nav-link { padding-top: 12px; padding-bottom: 12px; }
  .form-control, .form-select { min-height: var(--tap); }
  /* DT 默认分页器（a.paginate_button）：加大触点 */
  .dataTables_paginate .paginate_button {
    min-width: var(--tap); min-height: var(--tap);
    display: inline-flex; align-items: center; justify-content: center;
  }
  .btn-close { width: var(--tap); height: var(--tap); }
  /* 时间轴输入控件：字号提到 16px，避免 iOS 聚焦自动放大页面 */
  .tl-range-row .form-control, .tl-pop .form-control { font-size: 16px; }
  /* 日期弹层：加大日期格与按钮触点 */
  .datepicker { font-size: 15.5px; }
  .datepicker table td, .datepicker table th { padding: 10px 11px; }
  .datepicker .datepicker-switch, .datepicker .prev, .datepicker .next { padding: 10px 12px; }
  .tl-dp-ops { padding: 8px 12px; }
  .tl-dp-ops .tl-mini-btn { padding: 10px 20px; font-size: 15.5px; }
  /* 时间轴操作按钮加大触点，日期卡收窄内边距 */
  .tl-mini-btn { padding: 7px 14px; font-size: 14px; }
  .tl-range-row .form-control { flex: 1 1 150px; max-width: none; }
  /* 手柄加宽 + 常显（触屏无 hover 提示，须看得见拖点） */
  .tl-editor .tl-block:not(.tl-narrow) .tl-grip { width: 20px; }
  .tl-editor .tl-block:not(.tl-narrow) .tl-grip::after { width: 4px; background: rgba(255,255,255,.55); }
  /* 窄块（<48px）两手柄会盖住整块：藏掉手柄，点块开弹层用数字输入微调 */
  .tl-block.tl-narrow .tl-grip { display: none; }
  /* 待定起点标签：绿色气泡（松手后仍清晰可见所选起点） */
  .tl-pin-t {
    background: var(--ok-green); color: #fff;
    font-size: 12px; font-weight: 600; padding: 3px 10px; border-radius: 980px;
    box-shadow: 0 2px 8px rgba(52,199,89,.4);
  }
}

/* ==================== 减弱动效偏好：全部动画/过渡降级 ==================== */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation: none !important; transition: none !important; }
}

/* ==================== 时间轴小屏微调 ==================== */
@media (max-width: 575px) {
  .tl-day { padding: 10px 12px 20px; border-radius: 14px; }
  .tl-day-title { font-size: 14.5px; }
}