/* ==========================================================================
   运远国际物流 — 全站样式
   设计风格：深色科技风，品牌色取自 logo（蓝紫 + 红）
   所有颜色 / 圆角等设计变量集中在 :root，改风格只需改这里
   ========================================================================== */

/* ---------- 字体（本地化，不依赖外部 CDN） ---------- */
@font-face {
  font-family: 'Space Grotesk';
  font-style: normal;
  font-weight: 300 700;
  font-display: swap;
  src: url('../fonts/space-grotesk.woff2') format('woff2');
}

/* ---------- 设计变量 ---------- */
:root {
  --bg: #060a13;
  --bg-soft: #0a1120;
  --panel: rgba(255, 255, 255, .04);
  --panel-strong: rgba(255, 255, 255, .07);
  --stroke: rgba(148, 163, 184, .16);
  --stroke-strong: rgba(148, 163, 184, .3);

  --indigo: #5b6cff;
  --violet: #8b5cf6;
  --red: #e8283c;
  --red-bright: #ff4d5f;

  --grad: linear-gradient(135deg, #5b6cff, #8b5cf6);
  --grad-red: linear-gradient(135deg, #ff4d5f, #d61f33);
  --grad-text: linear-gradient(120deg, #7c8cff 0%, #a78bfa 55%, #ff6b7a 110%);

  --text: #f1f5f9;
  --muted: #97a6bc;
  --muted-2: #64748b;

  --radius: 18px;
  --radius-sm: 12px;
  --container: 1200px;
  --header-h: 76px;

  --font: 'Space Grotesk', 'PingFang SC', 'HarmonyOS Sans SC', 'Microsoft YaHei', sans-serif;
  --shadow-glow: 0 0 0 1px rgba(91, 108, 255, .25), 0 10px 40px -8px rgba(91, 108, 255, .35);

  /* 列表斑马纹（淡蓝紫带，与灰色边框拉开色差）、悬停十字、选中行，全站表格共用 */
  --row-stripe: rgba(91, 108, 255, .10);
  --row-hover: rgba(251, 146, 60, .18);
  --row-selected: rgba(251, 146, 60, .30);
}

/* ---------- 基础 ---------- */
* { margin: 0; padding: 0; box-sizing: border-box; }

/* 滚动条占位保持稳定：内容长短不同的页面互切时（Windows 经典滚动条）布局不左右抖动 */
html { scroll-behavior: smooth; scrollbar-gutter: stable; }

body {
  font-family: var(--font);
  background: var(--bg);
  color: var(--text);
  line-height: 1.7;
  -webkit-font-smoothing: antialiased;
  /* 用 clip 而不是 hidden：hidden 会把 body 变成滚动容器，破坏子元素的 sticky 定位 */
  overflow-x: clip;
}

img { max-width: 100%; display: block; }
a { color: inherit; text-decoration: none; }
ul, ol { list-style: none; }
button { font-family: inherit; cursor: pointer; }

::selection { background: rgba(91, 108, 255, .4); }

.container {
  max-width: var(--container);
  margin: 0 auto;
  padding: 0 24px;
}

section { position: relative; }

/* 锚点定位时给固定导航留出空间 */
section[id] { scroll-margin-top: calc(var(--header-h) + 20px); }

.section { padding: 110px 0; }
.section-soft {
  background: var(--bg-soft);
  border-top: 1px solid var(--stroke);
  border-bottom: 1px solid var(--stroke);
}

/* 版块标题结构：kicker + 标题 + 副文案 */
.section-head { max-width: 760px; margin: 0 auto 64px; text-align: center; }
.section-head.left { margin-left: 0; text-align: left; }

.kicker {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  font-size: 14px;
  font-weight: 500;
  letter-spacing: .14em;
  color: var(--indigo);
  text-transform: uppercase;
  margin-bottom: 18px;
}
.kicker::before {
  content: '';
  width: 22px;
  height: 2px;
  background: var(--grad-red);
  border-radius: 2px;
}

.section-title {
  font-size: clamp(30px, 4vw, 46px);
  font-weight: 600;
  line-height: 1.25;
  letter-spacing: -.01em;
}
.section-title .grad {
  background: var(--grad-text);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  color: transparent;
}

.section-sub { color: var(--muted); margin-top: 16px; font-size: 17px; }

/* ---------- 按钮 ---------- */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 14px 30px;
  border-radius: 999px;
  border: 1px solid transparent;
  font-size: 15.5px;
  font-weight: 600;
  letter-spacing: .02em;
  transition: transform .25s ease, box-shadow .25s ease, background .25s ease, border-color .25s ease;
  white-space: nowrap;
}
.btn:active { transform: scale(.97); }

.btn-primary {
  background: var(--grad-red);
  color: #fff;
  box-shadow: 0 8px 26px -8px rgba(232, 40, 60, .55);
}
.btn-primary:hover {
  transform: translateY(-2px);
  box-shadow: 0 14px 34px -8px rgba(232, 40, 60, .7);
}

.btn-ghost {
  background: transparent;
  color: var(--text);
  border-color: var(--stroke-strong);
}
.btn-ghost:hover {
  border-color: var(--indigo);
  background: rgba(91, 108, 255, .08);
  transform: translateY(-2px);
}

.btn .arrow { transition: transform .25s ease; }
.btn:hover .arrow { transform: translateX(4px); }

/* ---------- 顶部导航 ---------- */
.site-header {
  position: fixed;
  inset: 0 0 auto 0;
  height: var(--header-h);
  z-index: 100;
  transition: background .3s ease, border-color .3s ease;
  border-bottom: 1px solid transparent;
  /* 跨文档视图过渡：官网四页互切时导航栏按同一元素无缝衔接（彻底不重绘不闪动；
     触发规则 @view-transition 内联在官网四页 head 中，后台页不参与） */
  view-transition-name: site-header;
}
.site-header.scrolled {
  background: rgba(6, 10, 19, .82);
  -webkit-backdrop-filter: blur(16px);
  backdrop-filter: blur(16px);
  border-bottom-color: var(--stroke);
}

.nav-inner {
  height: var(--header-h);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
}

.brand { display: flex; align-items: center; gap: 12px; flex-shrink: 0; }

/* logo 浅色圆底：保证 logo 的深灰弧线在深色页面上可见 */
.brand-badge {
  width: 46px;
  height: 46px;
  border-radius: 50%;
  background: #f4f6fb;
  display: grid;
  place-items: center;
  overflow: hidden;
  box-shadow: 0 0 0 1px rgba(255, 255, 255, .12), 0 4px 14px rgba(0, 0, 0, .4);
}
.brand-badge img { width: 78%; height: 78%; object-fit: contain; }

.brand-text { display: flex; flex-direction: column; line-height: 1.25; }
.brand-text strong { font-size: 18px; font-weight: 700; letter-spacing: .02em; }
.brand-text em {
  font-style: normal;
  font-size: 10.5px;
  letter-spacing: .22em;
  color: var(--muted);
  text-transform: uppercase;
}

.nav-links { display: flex; align-items: center; gap: 34px; }
.nav-links > a {
  font-size: 15.5px;
  color: var(--muted);
  font-weight: 500;
  position: relative;
  transition: color .25s ease;
}
.nav-links > a:hover { color: var(--text); }
.nav-links > a.active { color: var(--text); }
.nav-links > a.active::after {
  content: '';
  position: absolute;
  left: 0; right: 0; bottom: -8px;
  height: 2px;
  border-radius: 2px;
  background: var(--grad-red);
}
.nav-cta { padding: 11px 24px; font-size: 14.5px; }

/* 中英切换按钮（固定最小宽度：EN↔中文 互换时宽度不变，右侧元素不移位） */
.lang-toggle {
  min-width: 62px;
  text-align: center;
  padding: 7px 15px;
  border-radius: 999px;
  border: 1px solid var(--stroke-strong);
  background: var(--panel);
  color: var(--muted);
  font-family: var(--font);
  font-size: 13px;
  font-weight: 600;
  letter-spacing: .04em;
  transition: color .25s ease, border-color .25s ease, background .25s ease;
}
.lang-toggle:hover { color: var(--text); border-color: var(--indigo); background: rgba(91, 108, 255, .08); }

/* 导航登录区 */
#navAuth { display: inline-flex; align-items: center; gap: 14px; }
.nav-login {
  font-size: 15px;
  color: var(--muted);
  font-weight: 500;
  transition: color .25s ease;
}
.nav-login:hover { color: var(--text); }
.nav-user { font-size: 13.5px; color: var(--text); }
.nav-logout {
  padding: 7px 14px;
  border-radius: 999px;
  border: 1px solid var(--stroke);
  background: var(--panel);
  color: var(--muted);
  font-family: var(--font);
  font-size: 12.5px;
  transition: color .25s ease, border-color .25s ease;
}
.nav-logout:hover { color: var(--red-bright); border-color: rgba(232, 40, 60, .5); }

@media (max-width: 768px) {
  .nav-links .lang-toggle { margin-top: 18px; align-self: flex-start; padding: 10px 22px; }
  .nav-links #navAuth { margin-top: 10px; align-self: flex-start; }
}

/* ---------- 登录页 ---------- */
.login-page {
  min-height: 100svh;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 40px 20px;
  position: relative;
  overflow: hidden;
}
.login-glow { position: absolute; width: 640px; height: 640px; border-radius: 50%; filter: blur(110px); opacity: .25; }
.login-glow.g1 { background: #2f3fd4; top: -220px; left: -120px; }
.login-glow.g2 { background: #6d28d9; bottom: -260px; right: -140px; opacity: .2; }
.login-card {
  position: relative;
  width: 100%;
  max-width: 420px;
  padding: 44px 40px;
  border-radius: 22px;
  border: 1px solid var(--stroke);
  background: rgba(10, 17, 32, .8);
  -webkit-backdrop-filter: blur(18px);
  backdrop-filter: blur(18px);
}
.login-card .brand { justify-content: center; margin-bottom: 30px; }
.login-card h1 { font-size: 24px; text-align: center; font-weight: 700; }
.login-card .login-sub { color: var(--muted); font-size: 14px; text-align: center; margin: 8px 0 28px; }
.login-field { display: grid; gap: 8px; margin-bottom: 18px; }
.login-field label { font-size: 14px; color: var(--muted); }
.login-field input {
  width: 100%;
  padding: 13px 16px;
  border-radius: 10px;
  border: 1px solid var(--stroke);
  background: rgba(4, 7, 14, .6);
  color: var(--text);
  font-family: inherit;
  font-size: 15px;
}
.login-field input:focus { outline: none; border-color: var(--indigo); box-shadow: 0 0 0 3px rgba(91, 108, 255, .18); }
.login-field input { transition: border-color .25s ease, box-shadow .25s ease; }
.login-btn { width: 100%; justify-content: center; font-size: 16px; padding: 14px; }

/* 注册 / 找回密码表单：无标题、紧凑行距，控制整页高度 */
.login-page.mode-compact { padding: 20px 20px 28px; }
.login-page.mode-compact .login-card { padding: 28px 36px 24px; }
.login-page.mode-compact .brand { margin-bottom: 12px; }
.login-page.mode-compact .auth-tabs { margin-bottom: 14px; }
#viewRegister .login-field, #viewForgot .login-field { margin-bottom: 10px; gap: 4px; }
#viewRegister .login-field label, #viewForgot .login-field label { font-size: 13px; }
#viewRegister .login-field input, #viewForgot .login-field input { padding: 10px 14px; font-size: 14.5px; }
#viewRegister .login-btn, #viewForgot .login-btn { padding: 11px; margin-top: 2px; }
#viewRegister .code-btn, #viewForgot .code-btn { padding: 0 14px; font-size: 13.5px; }

/* 登录选项行：记住密码（左） + 忘记密码（右），两端对齐、字号一致 */
.login-opts {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 16px;
}
.remember-me {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  color: var(--muted);
  font-size: 13px;
  cursor: pointer;
  user-select: none;
}
.remember-me input {
  width: 15px;
  height: 15px;
  margin: 0;
  accent-color: var(--indigo);
  cursor: pointer;
}
.remember-me:hover { color: var(--text); }
.forgot-link {
  border: none;
  background: none;
  padding: 0;
  margin-left: auto;
  color: var(--muted);
  font-family: inherit;
  font-size: 13px;
  cursor: pointer;
  transition: color .25s ease;
}
.forgot-link:hover { color: var(--indigo); }

/* 找回密码视图 */
#viewForgot .login-sub { margin: 0 0 18px; }
#viewForgot .back-login { margin-top: 10px; font-size: 14px; }

/* 登录 / 注册 视图切换 */
.auth-tabs {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 6px;
  padding: 5px;
  margin-bottom: 24px;
  border-radius: 12px;
  border: 1px solid var(--stroke);
  background: rgba(4, 7, 14, .5);
}
.auth-tab {
  padding: 10px;
  border: none;
  border-radius: 9px;
  background: transparent;
  color: var(--muted);
  font-family: inherit;
  font-size: 14.5px;
  letter-spacing: 2px;
  cursor: pointer;
  transition: color .25s ease, background .25s ease;
}
.auth-tab:hover { color: var(--text); }
.auth-tab.active {
  background: linear-gradient(135deg, var(--indigo), var(--violet));
  color: #fff;
  font-weight: 600;
}
.auth-hidden { display: none !important; }

/* 注册验证码：输入框 + 获取按钮 */
.code-row {
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 10px;
}
.code-row input { letter-spacing: 4px; }
.code-btn {
  padding: 0 18px;
  border-radius: 10px;
  border: 1px solid rgba(91, 108, 255, .55);
  background: rgba(91, 108, 255, .12);
  color: var(--text);
  font-family: inherit;
  font-size: 14px;
  white-space: nowrap;
  cursor: pointer;
  transition: opacity .25s ease, background .25s ease;
}
.code-btn:hover { background: rgba(91, 108, 255, .22); }
.code-btn:disabled { opacity: .55; cursor: not-allowed; background: rgba(91, 108, 255, .08); }
.field-optional {
  font-style: normal;
  font-size: 11px;
  color: var(--muted-2);
  border: 1px solid var(--stroke);
  border-radius: 5px;
  padding: 1px 6px;
  margin-left: 4px;
  vertical-align: 1px;
}

/* ---------- 后台壳（客户中心 / 工作台共用） ---------- */
.portal-top {
  position: sticky;
  top: 0;
  z-index: 50;
  border-bottom: 1px solid var(--stroke);
  background: rgba(6, 10, 19, .85);
  -webkit-backdrop-filter: blur(16px);
  backdrop-filter: blur(16px);
}
.portal-top-inner {
  height: 64px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
}
.portal-actions { display: flex; align-items: center; gap: 14px; }
.portal-actions .lang-toggle { padding: 6px 13px; }
.portal-name { font-size: 14px; font-weight: 600; color: var(--text); }
/* 顶栏用户信息：头像（姓名首字）+ 职位 + 姓名 */
.portal-user { display: flex; align-items: center; gap: 9px; }
.portal-avatar {
  width: 30px;
  height: 30px;
  border-radius: 50%;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  font-size: 13px;
  font-weight: 700;
  color: #ffd9ad;
  background: linear-gradient(160deg, rgba(251, 146, 60, .42), rgba(251, 146, 60, .12));
  border: 1px solid rgba(251, 168, 82, .5);
  cursor: pointer;
  overflow: hidden;
  transition: filter .2s ease;
}
.portal-avatar:hover { filter: brightness(1.2); }
.portal-avatar img { width: 100%; height: 100%; object-fit: cover; display: block; }
.portal-position {
  font-size: 12.5px;
  color: #ffc08a;
  padding: 2px 10px;
  border-radius: 999px;
  border: 1px solid rgba(251, 168, 82, .35);
  background: rgba(251, 146, 60, .07);
  white-space: nowrap;
}
.portal-link { color: var(--muted); font-size: 14px; transition: color .25s ease; }
.portal-link:hover { color: var(--text); }

.portal { padding: 48px 0 90px; }
/* 后台页面（设置/工作台/客户中心）容器撑满屏幕，仅保留两侧 24px 边距；
   官网页面保持 1200px 居中排版不变 */
.portal .container,
.portal-top .container { max-width: none; }

.role-badge {
  display: inline-block;
  padding: 5px 14px;
  border-radius: 999px;
  font-size: 13px;
  font-weight: 600;
  letter-spacing: .04em;
}
.role-badge.role-admin { background: rgba(232, 40, 60, .16); color: #ff8b98; border: 1px solid rgba(232, 40, 60, .45); }
.role-badge.role-manager { background: rgba(139, 92, 246, .16); color: #c4b5fd; border: 1px solid rgba(139, 92, 246, .45); }
.role-badge.role-finance { background: rgba(91, 108, 255, .16); color: #a5b4fc; border: 1px solid rgba(91, 108, 255, .5); }
.role-badge.role-staff { background: rgba(45, 212, 191, .13); color: #5eead4; border: 1px solid rgba(45, 212, 191, .4); }
.role-badge.role-client { background: rgba(52, 211, 153, .13); color: #6ee7b7; border: 1px solid rgba(52, 211, 153, .4); }
.role-badge.role-driver { background: rgba(251, 146, 60, .15); color: #fdba74; border: 1px solid rgba(251, 146, 60, .45); }

/* 工作台数据条 */
.stat-strip { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; margin-bottom: 40px; }
.stat-strip .stat-card { padding: 20px 18px; }

/* 工作台模块网格 */
.mod-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; }
.mod-card {
  padding: 28px 26px;
  border-radius: var(--radius);
  border: 1px solid var(--stroke);
  background: var(--panel);
  transition: transform .3s ease, border-color .3s ease;
}
.mod-card:hover { transform: translateY(-5px); border-color: rgba(91, 108, 255, .45); }
.mod-head { display: flex; justify-content: space-between; align-items: flex-start; margin-bottom: 18px; }
.mod-card h3 { font-size: 18px; font-weight: 600; margin-bottom: 8px; }
.mod-card p { color: var(--muted); font-size: 14px; }

/* ---------- 工作台大屏风格（dark-page：工作台+考勤系统页共用）：深夜蓝氛围 + 玻璃数据卡 + 集装箱模块卡 ---------- */
/* 考勤系统页：纯深蓝渐变底（不带照片） */
.dark-page {
  background: linear-gradient(180deg, #0b1526 0%, #081123 46%, #050a14 100%);
}
/* 仪表板保留夜景港口照片背景 */
body#dashboardPage {
  background:
    radial-gradient(1100px 520px at 82% -8%, rgba(64, 108, 255, .15), transparent 62%),
    radial-gradient(900px 460px at 6% 112%, rgba(30, 92, 205, .13), transparent 60%),
    linear-gradient(180deg, rgba(8, 17, 35, .72) 0%, rgba(6, 12, 26, .62) 46%, rgba(5, 10, 20, .78) 100%),
    url("../img/beijing.jpeg?v=202609262") center / cover no-repeat,
    #060a14;
}
.dark-page .portal-top {
  background: linear-gradient(180deg, rgba(9, 20, 40, .95), rgba(7, 13, 28, .9));
  border-bottom-color: rgba(96, 140, 255, .22);
}
/* 导航栏橙色点缀：底部蓝→橙渐变细线、英文副标题、链接悬停、退出按钮 */
.dark-page .portal-top::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: -1px;
  height: 1px;
  background: linear-gradient(90deg, rgba(96, 140, 255, .55), rgba(251, 146, 60, .65));
}
.dark-page .brand-text em { color: #fdba74; }
.dark-page .portal-link:hover { color: #ffc08a; }
.dark-page .nav-logout {
  color: #ffc08a;
  border-color: rgba(251, 168, 82, .45);
  background: rgba(251, 146, 60, .08);
}
.dark-page .nav-logout:hover {
  color: #ffd9ad;
  border-color: rgba(251, 168, 82, .75);
  background: rgba(251, 146, 60, .18);
}
/* 布局：集装箱竖排靠左（内部滚动），右列运远助手固定常驻屏幕 */
#dashboardPage .portal-fixed .container {
  display: flex;
  align-items: flex-start;
  gap: 18px; /* 全部间距统一 18px：左右列之间、卡与卡横纵方向一致 */
  width: 1920px;      /* 设计宽度固定：配合页面内 fitBoard() 的 zoom 等比缩放，任何屏幕比例与文字大小都一致 */
  padding-top: 14px;  /* 悬停上浮和光晕超出卡片顶部时不会被裁掉 */
  padding-bottom: 0;
  overflow: visible;
}
.dark-page .portal-fixed .container::-webkit-scrollbar,
#dashboardPage .portal-fixed .container::-webkit-scrollbar { display: none; }
#dashboardPage .mod-grid {
  order: -1;
  flex: 0 0 181.4px; /* 与右侧统计卡同宽的正方形列 */
  min-width: 0;
  height: calc(100% + 44px); /* 抵消容器上下内边距，滚动区上下各留 14/30px 给悬停光晕不裁边 */
  margin: -14px 0 -30px;
  padding: 14px 0 30px;
  overflow-y: auto;
  scrollbar-width: none;
  grid-template-columns: 181.4px;
  align-content: start;
  gap: 18px;
}
#dashboardPage .mod-grid::-webkit-scrollbar { display: none; }
/* 右列：统计卡 + 运远助手对话框竖排，高度固定一屏，占集装箱以外全部剩余宽度 */
#dashboardPage .dash-right {
  flex: 1;
  min-width: 0;
  height: 100%;
  display: flex;
  flex-direction: column;
  gap: 18px;
}
#dashboardPage .dash-right .stat-strip {
  flex: none;
  /* 六张卡固定正方形宽（= 箱门图按高度 contain 的显示宽度），大屏容器全宽时也不拉宽，
     图标文字永远落在箱门图上；空间不足时等比缩窄 */
  grid-template-columns: repeat(6, minmax(0, 181.4px));
  gap: 18px;
  justify-content: start;
  align-content: start;
  margin-bottom: 0;
}
#dashboardPage .stat-card {
  padding: 18px 26px;
  height: 182px; /* 与左侧集装箱卡渲染高度（约 182.1px）对齐；内容行高固定后刚好放下 */
  border-radius: 0; /* 不做圆角，与集装箱卡片一致 */
  border: none;
  /* 背景只留 img/xiangmen.png 箱门图（contain 完整显示不裁剪），无底色无内外阴影，
     加与集装箱卡同款的浅渐变遮罩统一亮度 */
  background:
    linear-gradient(180deg, rgba(9, 18, 38, .16) 0%, rgba(7, 14, 30, .42) 100%),
    url("../img/xiangmen.png?v=202609506") center / contain no-repeat;
  box-shadow: none;
  -webkit-backdrop-filter: none;
  backdrop-filter: none;
}
#dashboardPage .mod-card {
  padding: 18px 18px 16px;
  border-radius: 0;
  border: none;
  aspect-ratio: 1 / 1; /* 与箱门图同比例的正方形：图片完整显示不裁剪，与右侧统计卡统一 */
  /* 背景与右侧统计卡同图同处理：img/xiangmen.png 箱门图 contain 完整显示，遮罩同款 */
  background:
    linear-gradient(180deg, rgba(9, 18, 38, .16) 0%, rgba(7, 14, 30, .42) 100%),
    url("../img/xiangmen.png?v=202609506") center / contain no-repeat;
  box-shadow:
    inset 0 -12px 24px -16px rgba(2, 6, 18, .85),
    0 16px 34px -18px rgba(2, 6, 18, .95);
}
#dashboardPage .mod-card:hover {
  transform: translateY(-5px);
  box-shadow:
    0 0 24px -6px rgba(251, 146, 60, .5),
    0 18px 40px -16px rgba(2, 6, 18, .95);
}
#dashboardPage .mod-card h3,
#dashboardPage .stat-card h3 { color: #f2f7ff; font-size: 19px; font-weight: 600; margin-bottom: 8px; text-shadow: 0 1px 10px rgba(4, 10, 26, .55); }
#dashboardPage .mod-card p,
#dashboardPage .stat-card p { color: #bccbe6; font-size: 14px; }
/* 统计卡内部行高固定，保证内容总高稳定在 182px 卡内放得下 */
#dashboardPage .stat-card h3 { line-height: 1.3; }
#dashboardPage .stat-card .mod-head { margin-bottom: 10px; }
/* 统计卡数值：比集装箱描述文字大而亮，起数据强调作用（放在共享规则后覆盖） */
#dashboardPage .stat-card p {
  font-size: 24px;
  font-weight: 700;
  line-height: 1.3;
  color: #f2f7ff;
  text-shadow: 0 0 18px rgba(96, 140, 255, .45);
  white-space: nowrap;
}
/* 司机考勤入口卡（statLeaveCard）：整卡可点进 attendance.html，样式与普通统计卡一致仅去链接下划线 */
#dashboardPage a.stat-card { text-decoration: none; }
#dashboardPage .stat-card .stat-go {
  display: block;
  margin-top: 4px;
  color: #ffc08a;
  font-size: 13px;
  letter-spacing: .02em;
}
#dashboardPage a.stat-card:hover .stat-go { color: #ffd9ad; text-decoration: underline; }
#dashboardPage a.stat-card.no-entry { cursor: default; } /* 无司机考勤权限：auth.js 禁点并隐藏入口文字 */
#dashboardPage .mod-card .icon-wrap,
#dashboardPage .stat-card .icon-wrap {
  width: 50px;
  height: 50px;
  border-radius: 13px;
  color: #ffe0bd;
  background: linear-gradient(160deg, rgba(251, 146, 60, .34), rgba(251, 146, 60, .1));
  border: 1px solid rgba(251, 168, 82, .45);
  box-shadow: 0 0 20px -4px rgba(251, 146, 60, .5);
}
#dashboardPage .mod-card .icon-wrap svg,
#dashboardPage .stat-card .icon-wrap svg { width: 24px; height: 24px; }
/* 运远助手对话框（共享组件：工作台内嵌 + 其他页面悬浮面板通用） */
/* ---------- 运远助手对话框（悬浮面板）：白玻璃浅色风，对齐工作台配色 ---------- */
.ai-chat {
  display: flex;
  flex-direction: column;
  border-radius: 14px;
  border: 1px solid #e3e8f0;
  background: #fff;
  box-shadow: 0 14px 34px -20px rgba(16, 24, 40, .3);
  overflow: hidden;
}
.ai-chat-head {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 14px 20px;
  border-bottom: 1px solid #e3e8f0;
}
.ai-chat-ico {
  width: 38px;
  height: 38px;
  border-radius: 11px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  color: #f37021;
  background: rgba(243, 112, 33, .1);
  border: 1px solid rgba(243, 112, 33, .3);
}
.ai-chat-ico svg { width: 20px; height: 20px; }
.ai-chat-ico img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  border-radius: 9px; /* 与圆角方块图标一致 */
  pointer-events: none;
}
.ai-chat-title strong { display: block; color: #1a2434; font-size: 15.5px; }
.ai-chat-title em {
  display: block;
  font-style: normal;
  color: #5f7189;
  font-size: 12px;
  letter-spacing: .02em;
  margin-top: 2px;
}
.ai-chat-msgs {
  flex: 1;
  min-height: 0;
  overflow-y: auto;
  display: flex;
  flex-direction: column;
  gap: 10px;
  padding: 16px 20px;
  background: #f7f9fc;
  scrollbar-width: thin;
  scrollbar-color: rgba(205, 214, 228, .9) transparent;
}
.ai-chat-msgs::-webkit-scrollbar { width: 6px; }
.ai-chat-msgs::-webkit-scrollbar-thumb { background: rgba(205, 214, 228, .9); border-radius: 3px; }
.ai-msg {
  max-width: 82%;
  padding: 9px 13px;
  border-radius: 12px;
  font-size: 13.5px;
  line-height: 1.55;
  word-break: break-word;
  white-space: pre-wrap;
}
.ai-msg-bot {
  align-self: flex-start;
  color: #1a2434;
  background: #fff;
  border: 1px solid #e3e8f0;
  border-bottom-left-radius: 4px;
}
.ai-msg-user {
  align-self: flex-end;
  color: #fff;
  background: linear-gradient(135deg, #ff8c4d, #f37021);
  box-shadow: 0 6px 14px -8px rgba(243, 112, 33, .55);
  border-bottom-right-radius: 4px;
}
.ai-msg-error {
  color: #dc2626;
  background: #fef2f2;
  border: 1px solid rgba(220, 38, 38, .22);
}
/* "思考中"三点动画 */
.ai-msg-typing { display: inline-flex; align-items: center; gap: 4px; padding: 13px 14px; }
.ai-msg-typing i {
  width: 5px;
  height: 5px;
  border-radius: 50%;
  background: #b9c6d8;
  animation: aiTyping 1.2s infinite ease-in-out;
}
.ai-msg-typing i:nth-child(2) { animation-delay: .15s; }
.ai-msg-typing i:nth-child(3) { animation-delay: .3s; }
@keyframes aiTyping {
  0%, 60%, 100% { opacity: .25; transform: translateY(0); }
  30% { opacity: 1; transform: translateY(-3px); }
}
/* 富文本渲染态（Markdown/格式标签）：换行改由块级元素排版，不再按原文本保留空白 */
.ai-msg-rich { white-space: normal; }
.ai-msg-rich > :first-child { margin-top: 0; }
.ai-msg-rich > :last-child { margin-bottom: 0; }
.ai-msg-rich p { margin: 0 0 6px; }
.ai-msg-rich h1, .ai-msg-rich h2, .ai-msg-rich h3, .ai-msg-rich h4, .ai-msg-rich h5, .ai-msg-rich h6 { margin: 8px 0 4px; font-size: 14.5px; line-height: 1.4; }
.ai-msg-rich ul, .ai-msg-rich ol { margin: 4px 0 6px; padding-left: 20px; }
.ai-msg-rich li { margin: 2px 0; }
.ai-msg-rich a { color: #1d6fc4; text-decoration: underline; }
.ai-msg-rich code { padding: 1px 5px; border-radius: 4px; background: #f0f3f8; font-family: ui-monospace, 'SF Mono', Menlo, Consolas, monospace; font-size: 12.5px; }
.ai-msg-rich pre { margin: 6px 0; padding: 9px 11px; border-radius: 8px; background: #f0f3f8; overflow-x: auto; word-break: normal; }
.ai-msg-rich pre code { padding: 0; background: none; font-size: 12.5px; }
.ai-msg-rich blockquote { margin: 6px 0; padding: 2px 10px; border-left: 3px solid #cdd6e4; color: #444; }
.ai-msg-rich hr { margin: 8px 0; border: 0; border-top: 1px solid #e3e8f0; }
.ai-msg-rich img { max-width: 100%; border-radius: 8px; }
.ai-msg-rich:has(table), .ai-msg-rich:has(pre) { max-width: 100%; } /* 表格/代码消息占满面板宽度 */
/* Markdown 表格：窄气泡里横向可滚，不撑破界面 */
.ai-msg-rich table { display: block; width: max-content; max-width: 100%; overflow-x: auto; margin: 6px 0; border-collapse: collapse; font-size: 12.5px; }
.ai-msg-rich th, .ai-msg-rich td { padding: 4px 9px; border: 1px solid #e3e8f0; white-space: nowrap; word-break: normal; }
.ai-msg-rich th { background: #f7f9fc; font-weight: 600; }
/* 用户气泡（橙底白字）里的富文本元素配色适配 */
.ai-msg-user.ai-msg-rich a { color: #fff; }
.ai-msg-user.ai-msg-rich code, .ai-msg-user.ai-msg-rich pre { background: rgba(255, 255, 255, .18); }
.ai-msg-user.ai-msg-rich blockquote { border-left-color: rgba(255, 255, 255, .6); color: #fff; }
.ai-msg-user.ai-msg-rich th, .ai-msg-user.ai-msg-rich td { border-color: rgba(255, 255, 255, .45); }
.ai-msg-user.ai-msg-rich th { background: rgba(255, 255, 255, .15); }
.ai-chat-input {
  display: flex;
  gap: 10px;
  padding: 14px 16px;
  border-top: 1px solid #e3e8f0;
}
.ai-chat-text {
  flex: 1;
  min-width: 0;
  min-height: 41px; /* 单行保底（脚本自适应高度的下限，防隐藏态算出 0 高塌陷） */
  padding: 10px 14px;
  border-radius: 10px;
  border: 1px solid #cdd6e4;
  outline: none;
  color: #1a2434;
  font-size: 13.5px;
  line-height: 1.5;
  background: #f7f9fc;
  transition: border-color .2s, background .2s, box-shadow .2s;
  resize: none; /* 高度由脚本自适应（1~5 行，超出内部滚动），不允许手动拖拽 */
  display: block;
  height: 41px; /* 单行初始高度（10px 内边距 ×2 + 21px 行高） */
  overflow-y: auto;
  scrollbar-width: none; /* 不显示滚动条（滚轮/键盘仍可滚） */
}
.ai-chat-text::-webkit-scrollbar { display: none; }
.ai-chat-text::placeholder { color: #8a99ad; }
.ai-chat-text:focus {
  border-color: rgba(243, 112, 33, .6);
  background: #fff;
  box-shadow: 0 0 0 3px rgba(243, 112, 33, .12);
}
.ai-chat-text:disabled { opacity: .55; }
.ai-chat-send {
  width: 42px;
  height: 42px;
  flex-shrink: 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border: none;
  border-radius: 10px;
  cursor: pointer;
  color: #fff;
  background: linear-gradient(135deg, #ff8c4d, #f37021);
  box-shadow: 0 6px 16px -6px rgba(243, 112, 33, .55);
  transition: filter .2s;
}
.ai-chat-send svg { width: 18px; height: 18px; }
.ai-chat-send:hover { filter: brightness(1.06); }
.ai-chat-send:disabled { filter: grayscale(.4) brightness(.9); cursor: default; }
/* 文件收发：附件按钮 / 待发送文件条 / 气泡内文件链接 */
.ai-chat-attach {
  width: 42px;
  height: 42px;
  flex-shrink: 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 10px;
  border: 1px solid #e3e8f0;
  cursor: pointer;
  color: #5f7189;
  background: #f7f9fc;
  transition: border-color .2s, color .2s;
}
.ai-chat-attach svg { width: 19px; height: 19px; }
.ai-chat-attach:hover { border-color: rgba(243, 112, 33, .55); color: #c65a14; }
.ai-chat-attach:disabled { opacity: .5; cursor: default; }
.ai-chat-filebar { display: flex; flex-wrap: wrap; gap: 8px; padding: 10px 16px 0; }
.ai-chat-filebar:empty { display: none; }
.ai-chat-file-chip {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  max-width: 100%;
  padding: 5px 10px;
  border-radius: 8px;
  border: 1px solid #e3e8f0;
  background: #f7f9fc;
  color: #1a2434;
  font-size: 12px;
}
.ai-chat-file-chip span:first-child { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ai-chat-file-chip button {
  border: none;
  background: none;
  cursor: pointer;
  color: #8a99ad;
  font-size: 14px;
  line-height: 1;
  padding: 0;
}
.ai-chat-file-chip button:hover { color: #c65a14; }
.ai-msg-files {
  display: flex;
  flex-direction: column;
  gap: 4px;
  margin-top: 6px;
}
.ai-file-link {
  display: inline-flex;
  align-items: center;
  color: #1d6fc4;
  font-size: 12.5px;
  text-decoration: underline;
  word-break: break-all;
}
.ai-file-link:hover { color: #155a9e; }

/* ---------- 运远助手悬浮头像：白圈细边，对齐顶栏胶囊 ---------- */
.ai-float-avatar {
  position: fixed;
  z-index: 1200;
  width: 44px;
  height: 44px;
  border-radius: 50%;
  border: 1px solid #cdd6e4;
  overflow: hidden; /* 裁掉图片自带透明边，只露一圈细边 */
  cursor: grab;
  touch-action: none;
  color: #fff;
  background: #fff;
  box-shadow: 0 10px 26px -12px rgba(16, 24, 40, .4);
  transition: box-shadow .15s ease;
}
/* 未读角标：面板收起时 AI 的回复计数 */
.ai-float-badge {
  position: absolute;
  top: -5px;
  right: -5px;
  min-width: 20px;
  height: 20px;
  padding: 0 5px;
  border-radius: 10px;
  background: #ef4444;
  color: #fff;
  font-size: 12px;
  font-weight: 600;
  line-height: 20px;
  text-align: center;
  box-shadow: 0 2px 8px rgba(0, 0, 0, .2);
}
.ai-float-avatar img {
  /* 图片放大约 1/4：裁掉图片自带的透明留白，让圈更细 */
  position: absolute;
  left: 50%;
  top: 50%;
  width: 124%;
  height: 124%;
  max-width: none;
  transform: translate(-50%, -50%);
  object-fit: cover;
  pointer-events: none;
}
.ai-float-avatar:hover { box-shadow: 0 10px 26px -12px rgba(16, 24, 40, .4), 0 0 0 4px rgba(243, 112, 33, .16); }
.ai-float-avatar:active { cursor: grabbing; }
.ai-float-panel {
  position: fixed;
  z-index: 1200;
  width: min(380px, calc(100vw - 24px));
  height: min(560px, calc(100vh - 24px));
  display: flex;
  flex-direction: column;
  border-radius: 16px;
  border: 1px solid #cdd6e4; /* 细细的浅色边框 */
  overflow: hidden;
  background: #fff;
  box-shadow: 0 24px 60px -24px rgba(16, 24, 40, .4);
}

/* 面板缩放热区（四边+四角，透明贴边，不显示任何线条） */
.ai-float-edge { position: absolute; z-index: 5; touch-action: none; }
.ai-float-panel[hidden] { display: none; }
.ai-float-panel .ai-chat {
  flex: 1;
  min-height: 0;
  border-radius: 0;
  border: none;
  /* 悬浮面板叠在任意页面上，底色加实保证文字可读 */
  background: #fff;
  box-shadow: none;
}
.ai-float-drag { cursor: move; touch-action: none; user-select: none; -webkit-user-select: none; }
.ai-float-close {
  margin-left: auto;
  width: 28px;
  height: 28px;
  border-radius: 8px;
  border: none;
  background: #f7f9fc;
  color: #5f7189;
  font-size: 16px;
  line-height: 1;
  cursor: pointer;
}
.ai-float-close:hover { color: #c65a14; background: rgba(243, 112, 33, .12); }

/* 拖放文件悬停高亮（拖入文件到对话框时整框橙色提示） */
.ai-chat.ai-chat-drop { border-color: #f37021 !important; box-shadow: 0 0 0 2px rgba(243, 112, 33, .3), 0 24px 60px -24px rgba(16, 24, 40, .4); }
@media (max-width: 1100px) {
  /* 窄屏单列：恢复整页滚动，右列随页面正常滚动 */
  #dashboardPage .portal-fixed .container { flex-direction: column; gap: 18px; overflow-y: auto; padding-bottom: 30px; }
  #dashboardPage .mod-grid { flex: none; height: auto; margin: 0; padding: 0; overflow: visible; grid-template-columns: 1fr 1fr; }
  #dashboardPage .dash-right { flex: none; gap: 18px; height: auto; }
  #dashboardPage .dash-right .stat-strip { grid-template-columns: repeat(3, 1fr); } /* 窄屏统计卡改 3 列（6 张排 3+3），桌面端才一行 6 个 */
  /* 窄屏下卡片高度回归内容高度，图片完整等比显示不裁切 */
  #dashboardPage .mod-card { aspect-ratio: auto; background-size: contain; }
  #dashboardPage .stat-card { aspect-ratio: auto; height: auto; background-size: contain; }
}
@media (max-width: 900px) {
  #dashboardPage .mod-grid { grid-template-columns: 1fr 1fr; }
}
@media (max-width: 600px) {
  #dashboardPage .mod-grid { grid-template-columns: 1fr; }
  #dashboardPage .stat-strip { grid-template-columns: 1fr; }
}

/* 通用数据表格 */
.data-panel {
  border-radius: var(--radius);
  border: 1px solid var(--stroke);
  background: var(--panel);
  padding: 26px 28px;
  margin-bottom: 24px;
}
.data-panel-head { display: flex; justify-content: space-between; align-items: center; margin-bottom: 18px; gap: 12px; flex-wrap: wrap; }
.data-panel-head h2 { font-size: 19px; font-weight: 600; }
/* 设置页面板：操作区撑满整行，"新增"按钮推到最右 */
#settingsPage .data-panel-head .panel-actions { flex: 1; }
#settingsPage .data-panel-head .btn:last-child { margin-left: auto; }
.data-table { width: 100%; border-collapse: collapse; font-size: 14.5px; }
.data-table th, .data-table td { padding: 13px 14px; border-bottom: 1px solid var(--stroke); }
.data-table th { text-align: center; color: var(--muted-2); font-weight: 500; font-size: 13px; letter-spacing: .04em; white-space: nowrap; }
.data-table td { color: var(--text); }
.data-table tbody tr:nth-child(even) { background: var(--row-stripe); }
.data-table tr:last-child td { border-bottom: none; }
.data-table .mono { font-family: var(--font); letter-spacing: .03em; color: var(--indigo); font-weight: 600; }
/* 网盘/开票税金等深色操作页表格里的日期、金额：等宽字体且不折行 */
.pan-table .mono { font-family: var(--font); letter-spacing: .03em; color: #a5b4fc; font-weight: 600; white-space: nowrap; }

.status-chip { display: inline-block; padding: 4px 12px; border-radius: 999px; font-size: 12.5px; font-weight: 600; }
.status-chip.transit { background: rgba(91, 108, 255, .15); color: #a5b4fc; }
.status-chip.done { background: rgba(52, 211, 153, .13); color: #6ee7b7; }
.status-chip.quoting { background: rgba(251, 191, 36, .13); color: #fcd34d; }
.status-chip.quoted { background: rgba(139, 92, 246, .15); color: #c4b5fd; }
.status-chip.on { background: rgba(52, 211, 153, .13); color: #6ee7b7; }
.status-chip.off { background: rgba(148, 163, 184, .15); color: #94a3b8; }
/* 开票管理列表的类型标签：销项=蓝、进项=橙（蓝橙互补一眼可辨，不借用客户页 transit/quoted 状态色） */
.status-chip.inv-out { background: rgba(91, 108, 255, .15); color: #a5b4fc; }
.status-chip.inv-in { background: rgba(251, 146, 60, .16); color: #fdba74; }
/* 设置页日志查看的动作徽章：新增=绿、修改=蓝、删除=红 */
.status-chip.log-add { background: rgba(52, 211, 153, .13); color: #6ee7b7; }
.status-chip.log-edit { background: rgba(91, 108, 255, .15); color: #a5b4fc; }
.status-chip.log-del { background: rgba(232, 40, 60, .16); color: #ff9aa5; }

/* 系统内置标记（职位管理等字典里的内置项） */
.sys-tag { display: inline-block; margin-left: 8px; padding: 2px 8px; border-radius: 999px; font-size: 11.5px; font-weight: 600; background: rgba(91, 108, 255, .15); color: #a5b4fc; }

/* ---------- 系统设置页 ---------- */
.btn-sm { padding: 9px 18px; font-size: 13.5px; }

.user-form {
  margin-bottom: 26px;
  padding: 22px;
  border: 1px solid var(--stroke);
  border-radius: var(--radius-sm);
  background: rgba(4, 7, 14, .45);
}

/* 设置页：跟随所编辑用户的权限区块 */
/* 权限管理：职位筛选行（无边框紧凑布局） */
.perm-filter { display: flex; align-items: center; gap: 12px; margin-bottom: 18px; }
.perm-filter label { font-size: 14px; color: var(--muted); }
.perm-filter select { width: 220px; padding: 9px 14px; font-size: 14px; border-radius: 10px; border: 1px solid var(--stroke); background-color: rgba(4, 7, 14, .6); color: var(--text); }
/* 日志查看：动作下拉收窄 + 关键字搜索框与下拉同外观 */
.log-filter select { width: 140px; }
.log-filter input[type="text"] { width: 300px; padding: 9px 14px; font-size: 14px; border-radius: 10px; border: 1px solid var(--stroke); background-color: rgba(4, 7, 14, .6); color: var(--text); }
/* 日志查看列表：定宽列布局——时间/操作人/模块/动作不折行，对象适中，详情吃剩余宽度自动换行 */
.log-table { table-layout: fixed; min-width: 1080px; }
.log-table th:nth-child(1) { width: 188px; }
.log-table th:nth-child(2) { width: 118px; }
.log-table th:nth-child(3) { width: 96px; }
.log-table th:nth-child(4) { width: 86px; }
.log-table th:nth-child(5) { width: 200px; }
.log-table td { vertical-align: top; word-break: break-all; }
.log-table td:nth-child(-n+4) { white-space: nowrap; }
/* 大模块：组标题醒目 + 勾选项加粗放大；小模块：缩进 + 左侧竖线 + 字小色淡 */
.perm-list { display: grid; gap: 22px; margin-bottom: 16px; }
.perm-group-title { font-size: 15px; font-weight: 700; color: var(--text); margin-bottom: 12px; }
.perm-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 12px 20px; }
.perm-sub-title { font-size: 13px; color: var(--muted); margin-top: 10px; }
.perm-group > .perm-grid:not(.perm-sub-grid) > .perm-item { font-size: 15.5px; font-weight: 600; gap: 10px; }
.perm-group > .perm-grid:not(.perm-sub-grid) > .perm-item input[type="checkbox"] { width: 19px; height: 19px; }
.perm-sub-grid { margin: 12px 0 0 9px; padding-left: 16px; border-left: 2px solid var(--stroke); }
.perm-sub-grid .perm-item { font-size: 13.5px; color: var(--muted); }
.perm-sub-grid .perm-item input[type="checkbox"] { width: 15px; height: 15px; }
.perm-item { display: flex; align-items: center; gap: 9px; font-size: 14.5px; color: var(--text); cursor: pointer; }
.perm-item input[type="checkbox"] { width: 17px; height: 17px; accent-color: var(--indigo); cursor: pointer; }

/* 设置页：员工工资区块 */
.salary-current {
  padding: 10px 16px;
  border-radius: 10px;
  border: 1px solid rgba(52, 211, 153, .35);
  background: rgba(52, 211, 153, .07);
  color: #6ee7b7;
  font-size: 14px;
  line-height: 1.8;
}
.salary-current b { font-size: 16px; letter-spacing: .02em; }
/* 三个输入框等宽一行，备注跨满整行（宽度 = 上面三框合计） */
.salary-fields { display: grid; grid-template-columns: repeat(3, 1fr); gap: 14px; }
.salary-fields .form-field:last-child { grid-column: 1 / -1; }
.salary-history { border-top: 1px dashed var(--stroke); padding-top: 14px; }
.salary-history-head { font-size: 14px; font-weight: 600; margin-bottom: 10px; }
@media (max-width: 600px) {
  .salary-fields { grid-template-columns: 1fr; }
}

.btn-ghost.danger { border-color: rgba(232, 40, 60, .6); color: #ff8b98; background: rgba(232, 40, 60, .1); }

/* 日期输入：深色主题适配 + 日历选择器视觉提示 */
/* 数字输入框一律去掉上下微调按钮（全站统一，点框直接输数字） */
input[type="number"]::-webkit-outer-spin-button,
input[type="number"]::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }
input[type="number"] { -moz-appearance: textfield; appearance: textfield; }

input[type="date"] { color-scheme: dark; cursor: pointer; }
input[type="date"]::-webkit-calendar-picker-indicator {
  filter: invert(.72);
  cursor: pointer;
  opacity: .85;
}
input[type="date"]::-webkit-calendar-picker-indicator:hover { opacity: 1; }

/* 员工表单：部门变更历史 */
.dept-history-head { font-size: 14px; font-weight: 600; margin-bottom: 10px; }

/* 部门下拉多选（自定义组件） */
.dept-dd { position: relative; }

/* 开票申请抬头/对象可搜索下拉：字段本身即可输入（搜索/输入新名称），
   选项面板用 fixed 悬浮定位（JS 按 trigger 位置摆放），不被模态框滚动区裁剪 */
.inv-combo { position: relative; }
.inv-combo-input {
  width: 100%;
  padding-right: 34px;
}
.inv-combo-arrow {
  position: absolute;
  top: 50%;
  right: 12px;
  transform: translateY(-50%);
  color: var(--muted);
  font-size: 12px;
  pointer-events: none;
}
/* 面板：position fixed，top/left/width 由 JS 设置；z-index 高于模态框(500) */
.inv-combo-panel {
  position: fixed;
  z-index: 600;
  display: flex;
  flex-direction: column;
  gap: 8px;
  padding: 10px;
  border-radius: 10px;
  border: 1px solid rgba(122, 162, 255, .25);
  background: #0c1730;
  box-shadow: 0 18px 40px rgba(0, 0, 0, .55);
}
.inv-combo-list { display: grid; gap: 2px; max-height: 280px; overflow-y: auto; min-height: 0; scrollbar-width: none; }
.inv-combo-list::-webkit-scrollbar { display: none; }
.inv-combo-opt {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 2px;
  padding: 7px 10px;
  border-radius: 8px;
  cursor: pointer;
  font-size: 14px;
  color: var(--text);
  transition: background .15s ease;
}
.inv-combo-opt .tax-no { font-size: 12px; color: var(--muted-2); font-family: var(--font); white-space: nowrap; }
.inv-combo-opt:hover { background: rgba(88, 130, 255, .16); color: #e8f0ff; }
.inv-combo-opt.on { color: #ffd9ad; background: rgba(251, 146, 60, .14); }
.inv-combo-opt.add { color: #4ade80; }
.inv-combo-opt.add:hover { background: rgba(22, 160, 106, .18); color: #86efac; }
.inv-combo-empty { color: var(--muted-2); font-size: 13px; padding: 6px 10px; }
/* 新增模式：确认要入库的名称 + 选填税号 */
.inv-combo-new { display: grid; gap: 8px; padding: 10px; border-radius: 8px; border: 1px solid rgba(74, 222, 128, .3); background: rgba(22, 160, 106, .1); }

/* ---------- 开票登记弹窗：仿增值税专用发票票面（白底红框红字） ----------
   结构：标题行（电子发票 + 发票号码/开票日期输入）→ 购买方/销售方信息 → 项目明细 →
   价税合计（大写/小写）→ 备注 → 开票人；可编辑项为浅色输入框 */
/* 弹窗高度自适应票面：头部/主体/按钮区间距全压缩，正常视口下完整显示不出现滚动条 */
.fapiao-box { width: min(880px, 100%); max-height: calc(100vh - 48px); background: #fff; border-color: rgba(208, 58, 43, .4); }
.fapiao-box .modal-head { padding: 10px 16px; border-bottom: 1px solid rgba(208, 58, 43, .25); background: #fff; }
.fapiao-box .modal-head h3 { color: #c0392b; font-size: 15.5px; }
.fapiao-box .modal-body { padding: 12px 16px; }
.fapiao-box .modal-close { border-color: rgba(208, 58, 43, .3); background: #fff5f3; color: #c0392b; }
.fapiao-box .modal-close:hover { color: #8f2318; border-color: rgba(208, 58, 43, .55); background: #ffe9e5; }
.fapiao-box .modal-body { background: #fff; }
.fapiao { border: 2px solid #d03a2b; border-radius: 4px; padding: 12px 16px 8px; color: #c0392b; }
.fapiao-top { display: flex; align-items: flex-start; justify-content: space-between; gap: 20px; margin-bottom: 8px; flex-wrap: wrap; }
.fapiao-title { font-size: 22px; font-weight: 700; color: #c0392b; letter-spacing: 2px; white-space: nowrap; }
.fapiao-title span { font-size: 17px; }
.fapiao-meta { display: grid; gap: 4px; }
.fapiao-meta-row { display: flex; align-items: center; gap: 2px; font-size: 14px; white-space: nowrap; }
.fapiao-meta-label { color: #c0392b; white-space: nowrap; }
.fapiao-input {
  padding: 4px 8px;
  border: none;
  border-bottom: 1px solid rgba(192, 57, 43, .55);
  background: #fff8f0;
  color: #333;
  font-family: inherit;
  font-size: 14px;
  outline: none;
  min-width: 0;
}
.fapiao-input:focus { border-bottom-color: #c0392b; background: #fff1e8; }
.fapiao-input::placeholder { color: #c9a; }
/* 售方固定下拉空态提示（select 无 placeholder 伪元素，颜色对齐买方输入框） */
.fapiao-box select.inv-sel-ph:not(:disabled) { color: #c9a; }
.fapiao-meta-row .fapiao-input { width: 210px; }
.fapiao-date { width: 150px; }
.fapiao-table { width: 100%; border-collapse: collapse; }
.fapiao-table td { border: 1px solid #d03a2b; padding: 5px 10px; font-size: 14px; vertical-align: middle; }
.fapiao-side {
  width: 34px;
  padding: 8px 4px !important;
  text-align: center;
  font-weight: 700;
  color: #c0392b;
  line-height: 1.5;
  letter-spacing: 2px;
}
.fapiao-info { display: grid; gap: 4px; }
.fapiao-info-row { display: flex; align-items: baseline; gap: 2px; flex-wrap: wrap; }
.fapiao-info-label { white-space: nowrap; }
.fapiao-info-row b { color: #333; font-weight: 600; word-break: break-all; }
.fapiao-info-row .fapiao-input { flex: 1; min-width: 200px; }
.fapiao-tax { width: 260px; }
.fapiao-items { padding: 0 !important; }
.fapiao-items-table { width: 100%; border-collapse: collapse; }
.fapiao-items-table th, .fapiao-items-table td { border: none !important; }
.fapiao-items-table thead th { border-bottom: 1px solid #d03a2b !important; padding: 4px 10px; font-weight: 700; text-align: right; white-space: nowrap; }
.fapiao-items-table thead th.col-item { text-align: center; }
.fapiao-items-table td { padding: 5px 10px; color: #333; }
.fapiao-items-table tbody td { vertical-align: top; }
.fapiao-items-table .col-money { text-align: right; white-space: nowrap; font-variant-numeric: tabular-nums; }
.fapiao-items-table .col-rate { text-align: center; white-space: nowrap; }
.fapiao-he { font-weight: 700; color: #c0392b !important; border-top: 1px solid #d03a2b !important; }
.fapiao-total-row { display: flex; align-items: baseline; gap: 12px; flex-wrap: wrap; }
.fapiao-upper { font-size: 16px; font-weight: 700; color: #c0392b; letter-spacing: 1px; word-break: break-all; }
.fapiao-small { margin-left: auto; color: #c0392b; white-space: nowrap; }
.fapiao-small b { font-size: 16px; color: #333; }
.fapiao-remark { width: 100%; min-height: 30px; resize: vertical; line-height: 1.5; border: 1px dashed rgba(192, 57, 43, .45); }
.fapiao-drawer { display: flex; align-items: center; gap: 2px; margin-top: 6px; font-size: 14px; }
.fapiao-drawer .fapiao-input { width: 160px; }
/* 白色票面头部按钮区：保存/取消紧挨关闭×；取消按钮改深色文字（白底上看不清） */
.fapiao-box .modal-head-actions { display: flex; align-items: center; gap: 8px; }
.fapiao-box .btn-ghost { color: #555; border-color: rgba(0, 0, 0, .25); background: #fff; }
.fapiao-box .btn-ghost:hover { color: #c0392b; border-color: rgba(192, 57, 43, .5); background: #fff5f3; }

/* 票面内的搜索下拉框（买方/售方）：白底浅色红下划线 */
.fapiao-box select.fapiao-input { color-scheme: light; cursor: pointer; }
.fapiao-box .inv-combo-input {
  padding: 4px 30px 4px 8px;
  border: none;
  border-bottom: 1px solid rgba(192, 57, 43, .55);
  background: #fff8f0;
  color: #333;
  font-family: inherit;
  font-size: 14px;
  outline: none;
}
.fapiao-box .inv-combo-input:focus { border-bottom-color: #c0392b; background: #fff1e8; }
.fapiao-box .inv-combo-input::placeholder { color: #c9a; }
.fapiao-box .inv-combo-arrow { color: #c9a; }
/* 买方/售方选择器占满名称行剩余宽度，长公司名显示完整 */
.fapiao-box .fapiao-info-row .inv-combo { flex: 1 1 auto; min-width: 240px; }
/* 申请人：与开票人同款（标签红字 + 置灰输入样式的内容框） */
.fapiao-box .fapiao-applicant {
  display: inline-block;
  width: 160px;
  background: #f6f6f6;
  color: #9b9b9b;
  border-bottom-color: rgba(0, 0, 0, .12);
  cursor: default;
}
/* 项目明细：删除列与添加行按钮（仅申请模式可用） */
.fapiao-box .col-del { width: 34px; text-align: center; padding: 0 !important; }
.inv-item-del {
  border: none; background: none; color: #c0392b;
  font-size: 15px; cursor: pointer; padding: 2px 6px; line-height: 1;
}
.inv-item-del:hover { color: #8f2318; }
.inv-item-del:disabled { color: #ccc; cursor: not-allowed; }
.inv-item-add {
  margin-top: 8px; padding: 4px 14px; font-size: 13px; font-family: inherit;
  color: #c0392b; background: #fff; border: 1px dashed rgba(192, 57, 43, .5);
  border-radius: 4px; cursor: pointer;
}
.inv-item-add:hover { background: #fff5f3; border-style: solid; }
/* 票面置灰态：申请模式下登记字段、登记模式下申请字段只读展示 */
.fapiao-box .fapiao-input:disabled, .fapiao-box .inv-combo-input:disabled, .fapiao-box select:disabled {
  color: #9b9b9b;
  background: #f6f6f6;
  border-bottom-color: rgba(0, 0, 0, .12);
  cursor: not-allowed;
}
.inv-combo-newname { font-size: 13px; color: var(--muted); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.inv-combo-newname b { color: #86efac; font-weight: 600; }
.inv-combo-cancel {
  margin-left: 10px;
  padding: 2px 10px;
  border-radius: 6px;
  border: 1px solid rgba(148, 178, 224, .3);
  background: rgba(255, 255, 255, .05);
  color: var(--muted);
  font-size: 12px;
  cursor: pointer;
}
.inv-combo-cancel:hover { color: #e8f0ff; border-color: rgba(148, 178, 224, .5); }
.inv-combo-taxno {
  width: 100%;
  padding: 8px 12px;
  border-radius: 8px;
  border: 1px solid rgba(148, 178, 224, .25);
  background: rgba(4, 7, 14, .6);
  color: var(--text);
  font-family: inherit;
  font-size: 14px;
  outline: none;
}
.inv-combo-taxno:focus { border-color: var(--indigo); box-shadow: 0 0 0 3px rgba(91, 108, 255, .18); }

.dept-dd-toggle {
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  padding: 12px 14px;
  border-radius: 10px;
  border: 1px solid var(--stroke);
  background: rgba(4, 7, 14, .6);
  color: var(--text);
  font-family: var(--font);
  font-size: 15px;
  cursor: pointer;
  text-align: left;
}
.dept-dd-toggle:hover { border-color: var(--stroke-strong); }
.dept-dd-arrow { color: var(--muted); font-size: 12px; }
.dept-dd-panel {
  position: absolute;
  top: calc(100% + 6px);
  left: 0;
  right: 0;
  z-index: 30;
  max-height: 220px;
  overflow-y: auto;
  border-radius: 10px;
  border: 1px solid var(--stroke-strong);
  background: #0c1220;
  box-shadow: 0 14px 34px rgba(0, 0, 0, .55);
  padding: 6px;
}
.dept-opt {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 9px 12px;
  border-radius: 8px;
  cursor: pointer;
  color: var(--muted);
  font-size: 14.5px;
}
.dept-opt:hover { background: rgba(91, 108, 255, .15); color: var(--text); }
.dept-opt.on { color: var(--text); background: rgba(91, 108, 255, .18); }
.dept-opt .ck { width: 16px; text-align: center; color: var(--indigo); font-weight: 700; visibility: hidden; }
.dept-opt.on .ck { visibility: visible; }

/* 员工附件：缩略图一行 + 加号 */
.file-thumbs { display: flex; gap: 10px; flex-wrap: wrap; }
.file-thumb {
  width: 76px; height: 76px;
  border-radius: 10px;
  border: 1px solid var(--stroke);
  background: var(--bg-soft);
  position: relative;
  overflow: hidden;
  display: grid;
  place-items: center;
  cursor: pointer;
}
.file-thumb img { width: 100%; height: 100%; object-fit: cover; }
.file-thumb .file-ext {
  font-size: 12px;
  font-weight: 700;
  letter-spacing: .05em;
  color: var(--red-bright);
  background: rgba(232, 40, 60, .1);
  padding: 4px 8px;
  border-radius: 6px;
}
.file-thumb .file-del {
  position: absolute;
  top: 2px; right: 2px;
  width: 20px; height: 20px;
  border-radius: 50%;
  border: none;
  background: rgba(0, 0, 0, .65);
  color: #fff;
  font-size: 12px;
  line-height: 1;
  cursor: pointer;
  display: grid;
  place-items: center;
}
.file-thumb .file-del:hover { background: rgba(232, 40, 60, .85); }
.file-add {
  width: 76px; height: 76px;
  border-radius: 10px;
  border: 1px dashed var(--stroke-strong);
  background: rgba(148, 163, 184, .05);
  color: var(--muted);
  font-size: 30px;
  font-weight: 300;
  cursor: pointer;
  display: grid;
  place-items: center;
  transition: border-color .25s ease, color .25s ease;
}
.file-add:hover { border-color: var(--indigo); color: var(--indigo); }

/* 员工证件上传 */
.user-form input[type="file"] { color-scheme: dark; color: var(--text); font-size: 13px; padding: 9px; }
.file-now { font-size: 12.5px; color: var(--muted); }
.file-now a { color: var(--indigo); }

/* 通用：头部操作按钮组 + 表格行点选 */
.panel-actions { display: flex; gap: 10px; flex-wrap: wrap; }
.btn:disabled { opacity: .45; cursor: not-allowed; transform: none; box-shadow: none; }
.data-table tbody tr { transition: background .2s ease; }
.data-table tbody tr[data-id] { cursor: pointer; }
.data-table tbody tr:hover { background: var(--row-hover); }
.data-table tbody tr.row-selected,
.data-table tbody tr.row-selected:hover { background: var(--row-selected); box-shadow: inset 3px 0 0 #fb923c; }

/* 设置页：员工/客户账号标签 */
.user-tabs { display: flex; gap: 10px; margin-bottom: 18px; flex-wrap: wrap; }
.user-tab {
  padding: 10px 22px;
  border-radius: 999px;
  border: 1px solid var(--stroke);
  background: var(--panel);
  color: var(--muted);
  font-family: var(--font);
  font-size: 14px;
  font-weight: 600;
  cursor: pointer;
  transition: color .25s ease, border-color .25s ease, background .25s ease;
}
.user-tab:hover { color: var(--text); border-color: var(--stroke-strong); }
.user-tab.active { color: var(--text); border-color: rgba(91, 108, 255, .5); background: rgba(91, 108, 255, .12); }
.user-tab .tab-count { margin-left: 4px; font-size: 12px; color: var(--muted-2); }
.user-tab.active .tab-count { color: #a5b4fc; }

/* 设置页：左侧分类菜单 + 右侧内容区（新增设置项：菜单加按钮 + 内容区加 section） */
.settings-layout { display: grid; grid-template-columns: 230px 1fr; gap: 26px; align-items: start; }

/* 设置页固定外壳：页面整体不滚动，左侧菜单完全固定，右侧内容区独立滚动 */
body:has(> main.portal-fixed) { display: flex; flex-direction: column; height: 100svh; overflow: hidden; }
.portal-fixed { flex: 1; min-height: 0; padding: 20px 0 0; }
.portal-fixed .container { height: 100%; overflow-y: auto; padding-bottom: 30px; }
/* 设置页容器不直接滚，由内部 .settings-content 滚动 */
.portal-fixed .container:has(.settings-layout) { display: flex; flex-direction: column; overflow: hidden; padding-bottom: 0; }
.portal-fixed .settings-layout { flex: 1; min-height: 0; align-items: stretch; }
.portal-fixed .settings-content { overflow-y: auto; min-height: 0; padding: 2px 8px 30px 0; }
/* 列表固定高度：面板撑满内容区剩余高度，列表在固定区域内滚动、表头吸附固定；
   不加 min-height:0 —— 面板最小只能压到内容高度，工资/司机等子面板打开时超出部分由 .settings-content 滚动；
   历史记录等次要列表用 .hist 限高滚动 */
#settingsPage .settings-content { display: flex; flex-direction: column; }
#settingsPage .settings-cat { flex: 1 1 auto; display: flex; flex-direction: column; }
#settingsPage .settings-cat > .data-panel:first-child { flex: 1 1 auto; display: flex; flex-direction: column; }
#settingsPage .table-scroll { flex: 1 1 0; min-height: 150px; overflow: auto; scrollbar-width: none; }
/* 隐藏滚动条但保留滚轮/触控板滚动，与考勤页 .att-panel-scroll 做法一致 */
#settingsPage .table-scroll::-webkit-scrollbar { display: none; }
#settingsPage .table-scroll.hist { flex: 0 0 auto; max-height: 240px; }
/* 列表底部贴近屏幕底部：去掉主面板的下外边距、收窄底部内边距，只留 10px 呼吸位；
   主面板与下方子面板（工资/司机/挂车）之间改用上外边距保持间隔 */
#settingsPage .settings-content { padding-bottom: 10px; }
#settingsPage .settings-cat > .data-panel:first-child { margin-bottom: 0; padding-bottom: 10px; }
#settingsPage .settings-cat > .data-panel:not(:first-child) { margin-top: 24px; }
#settingsPage .table-scroll .data-table { border-collapse: separate; border-spacing: 0; }
#settingsPage .table-scroll .data-table thead th {
  position: sticky;
  top: 0;
  z-index: 5;
  /* --panel 本身是半透明白，直接用会透出滚动的行：用不透明的页面底色叠加同款半透明白，外观一致且不透底 */
  background-color: var(--bg);
  background-image: linear-gradient(var(--panel), var(--panel));
}
.settings-nav { display: flex; flex-direction: column; gap: 8px; }
/* 底部"返回工作台"入口靠 margin-top:auto 推到菜单最下方（窄屏横排时自然回到行内） */
.settings-nav .settings-nav-back { margin-top: auto; }
.settings-nav-item {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  padding: 13px 18px;
  border-radius: 12px;
  border: 1px solid var(--stroke);
  background: var(--panel);
  color: var(--muted);
  font-family: var(--font);
  font-size: 14.5px;
  font-weight: 500;
  text-align: left;
  cursor: pointer;
  transition: color .25s ease, border-color .25s ease, background .25s ease;
}
.settings-nav-item:hover { color: var(--text); border-color: var(--stroke-strong); }
.settings-nav-item.active { color: var(--text); border-color: rgba(91, 108, 255, .5); background: rgba(91, 108, 255, .1); }
.settings-nav-item.disabled { opacity: .55; cursor: not-allowed; }
.settings-nav-item.disabled:hover { color: var(--muted); border-color: var(--stroke); }
.settings-nav-item .soon { font-size: 11px; padding: 2px 8px; border-radius: 999px; border: 1px solid var(--stroke-strong); color: var(--muted-2); white-space: nowrap; }
@media (max-width: 768px) {
  .settings-layout { grid-template-columns: 1fr; gap: 18px; }
  .settings-nav { position: static; flex-direction: row; justify-content: start; overflow-x: auto; padding-bottom: 4px; }
  .settings-nav-item { white-space: nowrap; }
}

@media (max-width: 900px) {
  .mod-grid { grid-template-columns: 1fr 1fr; }
  .stat-strip { grid-template-columns: 1fr 1fr; }
}
@media (max-width: 600px) {
  .mod-grid { grid-template-columns: 1fr; }
  .nav-user { display: none; }
  .data-table th, .data-table td { padding: 10px 8px; font-size: 13px; }
}

.nav-burger {
  display: none;
  width: 42px;
  height: 42px;
  border: 1px solid var(--stroke);
  border-radius: 10px;
  background: var(--panel);
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 5px;
}
.nav-burger span {
  width: 18px;
  height: 2px;
  background: var(--text);
  border-radius: 2px;
  transition: transform .3s ease, opacity .3s ease;
}
.nav-burger.open span:nth-child(1) { transform: translateY(7px) rotate(45deg); }
.nav-burger.open span:nth-child(2) { opacity: 0; }
.nav-burger.open span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }

/* ---------- Hero ---------- */
.hero {
  min-height: 100svh;
  display: flex;
  align-items: center;
  padding: calc(var(--header-h) + 60px) 0 90px;
  overflow: hidden;
}

/* 背景：点阵地图（JS 注入）+ 渐变光晕 + 细网格 */
.hero-bg { position: absolute; inset: 0; pointer-events: none; }
.hero-map {
  position: absolute;
  left: 50%;
  top: 54%;
  transform: translate(-50%, -50%);
  width: min(1500px, 160vw);
  opacity: .16;
}
.hero-glow {
  position: absolute;
  width: 760px;
  height: 760px;
  border-radius: 50%;
  filter: blur(120px);
  opacity: .28;
}
.hero-glow.g1 { background: #2f3fd4; top: -280px; left: -160px; }
.hero-glow.g2 { background: #6d28d9; bottom: -320px; right: -180px; opacity: .22; }
.hero-glow.g3 { background: #b91c3c; top: 30%; right: 12%; width: 420px; height: 420px; opacity: .12; }
.hero-grid {
  position: absolute;
  inset: 0;
  background-image:
    linear-gradient(rgba(148, 163, 184, .05) 1px, transparent 1px),
    linear-gradient(90deg, rgba(148, 163, 184, .05) 1px, transparent 1px);
  background-size: 72px 72px;
  -webkit-mask-image: radial-gradient(ellipse 90% 70% at 50% 40%, #000 30%, transparent 75%);
  mask-image: radial-gradient(ellipse 90% 70% at 50% 40%, #000 30%, transparent 75%);
}

.hero-inner { position: relative; text-align: center; max-width: 980px; margin: 0 auto; }

.hero-badge {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 9px 20px;
  border-radius: 999px;
  border: 1px solid var(--stroke);
  background: var(--panel);
  -webkit-backdrop-filter: blur(8px);
  backdrop-filter: blur(8px);
  font-size: 13.5px;
  color: var(--muted);
  margin-bottom: 30px;
}
.hero-badge .dot {
  width: 7px; height: 7px;
  border-radius: 50%;
  background: #34d399;
  box-shadow: 0 0 10px #34d399;
  animation: pulse-dot 2s infinite;
}
@keyframes pulse-dot { 50% { opacity: .4; } }

.hero h1 {
  font-size: clamp(46px, 8.4vw, 96px);
  font-weight: 700;
  line-height: 1.12;
  letter-spacing: .01em;
}
.hero h1 .grad {
  background: var(--grad-text);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  color: transparent;
}

.hero-sub {
  max-width: 700px;
  margin: 26px auto 0;
  color: var(--muted);
  font-size: clamp(16px, 2vw, 19px);
}

.hero-actions { display: flex; gap: 16px; justify-content: center; margin-top: 42px; flex-wrap: wrap; }

/* Hero 底部悬浮数据卡 */
.hero-stats {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 18px;
  max-width: 920px;
  margin: 78px auto 0;
}
.stat-card {
  padding: 24px 12px;
  border-radius: var(--radius);
  border: 1px solid var(--stroke);
  background: rgba(10, 17, 32, .55);
  -webkit-backdrop-filter: blur(12px);
  backdrop-filter: blur(12px);
  transition: transform .3s ease, border-color .3s ease;
}
.stat-card:hover { transform: translateY(-5px); border-color: rgba(91, 108, 255, .5); }
.stat-card .num {
  font-size: clamp(28px, 3.4vw, 40px);
  font-weight: 700;
  letter-spacing: -.01em;
  background: var(--grad-text);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  color: transparent;
}
.stat-card .num sup { font-size: .55em; }
.stat-card .label { color: var(--muted); font-size: 14px; margin-top: 4px; }

/* ---------- 跑马灯 ---------- */
.marquee {
  padding: 30px 0;
  border-top: 1px solid var(--stroke);
  border-bottom: 1px solid var(--stroke);
  background: rgba(255, 255, 255, .015);
  overflow: hidden;
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 12%, #000 88%, transparent);
  mask-image: linear-gradient(90deg, transparent, #000 12%, #000 88%, transparent);
}
.marquee-track {
  display: flex;
  gap: 56px;
  width: max-content;
  animation: marquee 30s linear infinite;
}
.marquee:hover .marquee-track { animation-play-state: paused; }
.marquee-track span {
  font-size: 17px;
  font-weight: 500;
  color: var(--muted);
  letter-spacing: .06em;
  display: flex;
  align-items: center;
  gap: 56px;
  white-space: nowrap;
}
.marquee-track span::after {
  content: '';
  width: 7px; height: 7px;
  border-radius: 2px;
  background: var(--red);
  transform: rotate(45deg);
  opacity: .8;
}
@keyframes marquee { to { transform: translateX(-50%); } }

/* ---------- 服务便当网格 ---------- */
.services-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 20px;
}
.service-card {
  position: relative;
  padding: 34px 30px;
  border-radius: var(--radius);
  border: 1px solid var(--stroke);
  background: var(--panel);
  overflow: hidden;
  transition: transform .35s ease, border-color .35s ease, background .35s ease;
  display: flex;
  flex-direction: column;
  gap: 16px;
}
.service-card::before {
  content: '';
  position: absolute;
  inset: 0;
  background: radial-gradient(420px circle at var(--mx, 50%) var(--my, 0%), rgba(91, 108, 255, .12), transparent 60%);
  opacity: 0;
  transition: opacity .35s ease;
  pointer-events: none;
}
.service-card:hover { transform: translateY(-6px); border-color: rgba(91, 108, 255, .45); background: var(--panel-strong); }
.service-card:hover::before { opacity: 1; }

.service-card.wide { grid-column: span 2; }

.icon-wrap {
  width: 56px;
  height: 56px;
  border-radius: 16px;
  background: var(--grad);
  display: grid;
  place-items: center;
  color: #fff;
  box-shadow: 0 8px 22px -6px rgba(91, 108, 255, .55);
  flex-shrink: 0;
}
.icon-wrap svg { width: 27px; height: 27px; }
.service-card.wide .icon-wrap { width: 62px; height: 62px; }

.service-card h3 { font-size: 21px; font-weight: 600; }
.service-card p { color: var(--muted); font-size: 15px; flex: 1; }
.service-card .more {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  color: var(--indigo);
  font-size: 14.5px;
  font-weight: 600;
}
.service-card .more svg { width: 15px; height: 15px; transition: transform .25s ease; }
.service-card:hover .more svg { transform: translateX(4px); }

.service-tag {
  position: absolute;
  top: 26px; right: 26px;
  font-size: 11px;
  letter-spacing: .16em;
  color: var(--muted-2);
  text-transform: uppercase;
}

/* 宽卡内的装饰航线图 */
.route-art { position: absolute; right: -10px; bottom: -20px; width: 300px; opacity: .5; pointer-events: none; }

/* 服务网格末尾的"定制方案"卡 */
.service-card.cta-card {
  border-style: dashed;
  border-color: rgba(91, 108, 255, .45);
  background: rgba(91, 108, 255, .06);
  justify-content: center;
}
.service-card.cta-card h3 { font-size: 20px; }
.service-card.cta-card p { flex: none; margin-bottom: 10px; }
.service-card.cta-card .btn { align-self: flex-start; }

/* ---------- 全球网络（点阵地图） ---------- */
.network-wrap {
  display: grid;
  grid-template-columns: 340px 1fr;
  gap: 48px;
  align-items: center;
}
.network-info h2 { margin-bottom: 0; }
.network-points { margin-top: 30px; display: grid; gap: 14px; }
.network-points li {
  display: flex;
  gap: 14px;
  align-items: flex-start;
  color: var(--muted);
  font-size: 15px;
}
.network-points li svg { width: 20px; height: 20px; color: var(--red-bright); flex-shrink: 0; margin-top: 3px; }
.network-points li strong { color: var(--text); font-weight: 600; }

.map-panel {
  position: relative;
  border-radius: var(--radius);
  border: 1px solid var(--stroke);
  background:
    radial-gradient(1000px 500px at 60% 30%, rgba(47, 63, 212, .12), transparent 65%),
    var(--bg-soft);
  padding: 28px;
  overflow: hidden;
}
.map-panel svg { width: 100%; height: auto; display: block; }
.map-legend {
  display: flex;
  gap: 26px;
  justify-content: center;
  margin-top: 16px;
  color: var(--muted);
  font-size: 13px;
}
.map-legend i {
  display: inline-block;
  width: 8px; height: 8px;
  border-radius: 50%;
  margin-right: 7px;
}
.map-legend .lg-node i { background: var(--red-bright); }
.map-legend .lg-route i { background: var(--indigo); }

/* SVG 地图内的动画元素样式 */
.map-node { fill: var(--red-bright); }
.map-node-ring {
  fill: none;
  stroke: var(--red-bright);
  stroke-width: 1.4;
  opacity: 0;
  animation: node-ring 2.6s ease-out infinite;
  transform-box: fill-box;
  transform-origin: center;
}
@keyframes node-ring {
  0% { transform: scale(.4); opacity: .9; }
  70%, 100% { transform: scale(2.6); opacity: 0; }
}
.map-route {
  fill: none;
  stroke: url(#routeGrad);
  stroke-width: 1.6;
  stroke-linecap: round;
  stroke-dasharray: 5 9;
  animation: route-flow 1.6s linear infinite;
  opacity: .85;
}
@keyframes route-flow { to { stroke-dashoffset: -28; } }
.map-plane { fill: #fff; opacity: .95; }

/* ---------- 服务流程 ---------- */
.process-track {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: 18px;
  counter-reset: step;
}
.step {
  position: relative;
  padding: 28px 22px;
  border-radius: var(--radius-sm);
  border: 1px solid var(--stroke);
  background: var(--panel);
  transition: transform .3s ease, border-color .3s ease;
}
.step:hover { transform: translateY(-5px); border-color: rgba(139, 92, 246, .45); }
.step-num {
  font-size: 40px;
  font-weight: 700;
  line-height: 1;
  background: var(--grad);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  color: transparent;
  opacity: .95;
}
.step h3 { font-size: 17.5px; font-weight: 600; margin: 16px 0 8px; }
.step p { color: var(--muted); font-size: 14px; line-height: 1.65; }
.step::after {
  content: '';
  position: absolute;
  top: 44px;
  right: -14px;
  width: 10px;
  height: 10px;
  border-top: 2px solid var(--stroke-strong);
  border-right: 2px solid var(--stroke-strong);
  transform: rotate(45deg);
}
.step:last-child::after { display: none; }

/* ---------- 核心优势 ---------- */
.adv-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 20px;
}
.adv-card {
  padding: 34px 28px;
  border-radius: var(--radius);
  border: 1px solid var(--stroke);
  background: var(--panel);
  transition: transform .3s ease, border-color .3s ease;
}
.adv-card:hover { transform: translateY(-6px); border-color: rgba(91, 108, 255, .45); }
.adv-card .icon-wrap { margin-bottom: 20px; }
.adv-card h3 { font-size: 18.5px; font-weight: 600; margin-bottom: 10px; }
.adv-card p { color: var(--muted); font-size: 14.5px; }

/* ---------- 客户评价 ---------- */
.quote-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 20px;
}
.quote-card {
  padding: 32px 30px;
  border-radius: var(--radius);
  border: 1px solid var(--stroke);
  background: var(--panel);
  display: flex;
  flex-direction: column;
  gap: 20px;
  transition: transform .3s ease, border-color .3s ease;
}
.quote-card:hover { transform: translateY(-6px); border-color: var(--stroke-strong); }
.quote-card .mark {
  font-size: 46px;
  font-weight: 700;
  line-height: .6;
  background: var(--grad-red);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  color: transparent;
  font-family: Georgia, serif;
}
.quote-card blockquote { color: var(--muted); font-size: 15px; flex: 1; }
.quote-who strong { display: block; font-size: 15px; }
.quote-who span { color: var(--muted-2); font-size: 13px; }

/* ---------- FAQ ---------- */
.faq-list { max-width: 800px; margin: 0 auto; display: grid; gap: 14px; }
.faq-item {
  border: 1px solid var(--stroke);
  border-radius: var(--radius-sm);
  background: var(--panel);
  overflow: hidden;
  transition: border-color .3s ease;
}
.faq-item[open] { border-color: rgba(91, 108, 255, .45); }
.faq-item summary {
  list-style: none;
  cursor: pointer;
  padding: 22px 26px;
  font-size: 16.5px;
  font-weight: 600;
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 20px;
}
.faq-item summary::-webkit-details-marker { display: none; }
.faq-item summary .chev {
  flex-shrink: 0;
  width: 30px; height: 30px;
  border-radius: 50%;
  border: 1px solid var(--stroke-strong);
  display: grid;
  place-items: center;
  transition: transform .3s ease, background .3s ease;
}
.faq-item summary .chev svg { width: 14px; height: 14px; }
.faq-item[open] summary .chev { transform: rotate(180deg); background: var(--grad); border-color: transparent; color: #fff; }
.faq-item .faq-body { padding: 0 26px 24px; color: var(--muted); font-size: 15px; }

/* ---------- CTA 大区 ---------- */
.cta-band {
  position: relative;
  overflow: hidden;
  border-radius: 28px;
  border: 1px solid rgba(91, 108, 255, .3);
  padding: 90px 40px;
  text-align: center;
  background:
    radial-gradient(700px 300px at 20% 0%, rgba(47, 63, 212, .3), transparent 60%),
    radial-gradient(600px 300px at 85% 100%, rgba(190, 24, 60, .22), transparent 60%),
    var(--bg-soft);
}
.cta-band h2 { font-size: clamp(30px, 4.4vw, 50px); font-weight: 700; line-height: 1.25; }
.cta-band p { color: var(--muted); margin: 18px auto 36px; max-width: 560px; font-size: 17px; }

/* ---------- 页脚 ---------- */
.site-footer {
  border-top: 1px solid var(--stroke);
  background: #04070e;
  padding: 72px 0 0;
  margin-top: 110px;
}
.footer-grid {
  display: grid;
  grid-template-columns: 1.5fr 1fr 1fr 1.3fr;
  gap: 44px;
  padding-bottom: 56px;
}
.footer-brand p { color: var(--muted); font-size: 14.5px; margin-top: 20px; max-width: 300px; }
.footer-col h4 {
  font-size: 13px;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--muted-2);
  margin-bottom: 22px;
  font-weight: 600;
}
.footer-col ul { display: grid; gap: 13px; }
.footer-col a { color: var(--muted); font-size: 14.5px; transition: color .25s ease; }
.footer-col a:hover { color: var(--text); }
.footer-col .contact-line { display: flex; gap: 10px; align-items: flex-start; color: var(--muted); font-size: 14.5px; }
.footer-col .contact-line svg { width: 17px; height: 17px; color: var(--indigo); flex-shrink: 0; margin-top: 4px; }
.footer-bottom {
  border-top: 1px solid var(--stroke);
  padding: 24px 0;
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 16px;
  flex-wrap: wrap;
  color: var(--muted-2);
  font-size: 13px;
}

/* ---------- 内页 Hero ---------- */
.page-hero {
  padding: calc(var(--header-h) + 90px) 0 80px;
  text-align: center;
  position: relative;
  overflow: hidden;
}
.page-hero::after {
  content: '';
  position: absolute;
  inset: 0;
  background-image:
    linear-gradient(rgba(148, 163, 184, .05) 1px, transparent 1px),
    linear-gradient(90deg, rgba(148, 163, 184, .05) 1px, transparent 1px);
  background-size: 72px 72px;
  -webkit-mask-image: radial-gradient(ellipse 70% 80% at 50% 20%, #000 20%, transparent 70%);
  mask-image: radial-gradient(ellipse 70% 80% at 50% 20%, #000 20%, transparent 70%);
  pointer-events: none;
}
.page-hero .crumb { color: var(--muted-2); font-size: 13.5px; letter-spacing: .1em; margin-bottom: 18px; text-transform: uppercase; }
.page-hero h1 { font-size: clamp(38px, 6vw, 64px); font-weight: 700; }
.page-hero .grad {
  background: var(--grad-text);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  color: transparent;
}
.page-hero p { color: var(--muted); max-width: 600px; margin: 20px auto 0; font-size: 17px; }

/* ---------- 服务详情（交替布局） ---------- */
.service-detail {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 64px;
  align-items: center;
  padding: 64px 0;
}
.service-detail:nth-child(even) { direction: rtl; }
.service-detail:nth-child(even) > * { direction: ltr; }

.service-detail .num-tag {
  font-size: 13px;
  letter-spacing: .2em;
  color: var(--red-bright);
  font-weight: 600;
  display: block;
  margin-bottom: 14px;
}
.service-detail h2 { font-size: clamp(26px, 3.4vw, 38px); font-weight: 600; margin-bottom: 18px; }
.service-detail .desc { color: var(--muted); font-size: 15.5px; margin-bottom: 26px; }
.service-detail .feats { display: grid; grid-template-columns: 1fr 1fr; gap: 12px 20px; margin-bottom: 30px; }
.service-detail .feats li {
  display: flex;
  gap: 9px;
  align-items: center;
  color: var(--muted);
  font-size: 14.5px;
}
.service-detail .feats li::before {
  content: '';
  width: 6px; height: 6px;
  border-radius: 50%;
  background: var(--red-bright);
  flex-shrink: 0;
  box-shadow: 0 0 8px rgba(232, 40, 60, .8);
}

.service-visual {
  border-radius: 20px;
  border: 1px solid var(--stroke);
  background:
    radial-gradient(500px 260px at 70% 20%, rgba(47, 63, 212, .18), transparent 65%),
    var(--bg-soft);
  padding: 44px;
  display: grid;
  place-items: center;
  min-height: 320px;
}
.service-visual svg { width: 100%; max-width: 380px; height: auto; }

/* 参数卡头部（图标 + 英文服务名） */
.spec-head { display: flex; align-items: center; gap: 14px; margin-bottom: 20px; }
.spec-head .icon-wrap { width: 48px; height: 48px; border-radius: 13px; }
.spec-head .icon-wrap svg { width: 22px; height: 22px; }
.spec-head strong { font-size: 15px; letter-spacing: .1em; }
.spec-head em { display: block; font-style: normal; color: var(--muted-2); font-size: 12px; letter-spacing: .08em; margin-top: 2px; }

.spec-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 14.5px;
  margin-top: 8px;
}
.spec-table caption {
  text-align: left;
  font-size: 13px;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--muted-2);
  padding-bottom: 14px;
}
.spec-table th, .spec-table td {
  text-align: left;
  padding: 13px 16px;
  border-bottom: 1px solid var(--stroke);
}
.spec-table th { color: var(--text); font-weight: 600; white-space: nowrap; }
.spec-table td { color: var(--muted); }
.spec-table tr:first-child th, .spec-table tr:first-child td { border-top: 1px solid var(--stroke); }
.spec-table tbody tr:nth-child(even) { background: var(--row-stripe); }
.spec-table tbody tr:hover { background: var(--row-hover); }

/* ---------- 关于页：时间线 ---------- */
.timeline { position: relative; max-width: 820px; margin: 0 auto; }
.timeline::before {
  content: '';
  position: absolute;
  left: 9px;
  top: 6px;
  bottom: 6px;
  width: 2px;
  background: linear-gradient(180deg, var(--indigo), var(--violet), var(--red));
  opacity: .35;
}
.timeline li { position: relative; padding: 0 0 40px 48px; }
.timeline li:last-child { padding-bottom: 0; }
.timeline li::before {
  content: '';
  position: absolute;
  left: 2px;
  top: 7px;
  width: 16px;
  height: 16px;
  border-radius: 50%;
  background: var(--bg);
  border: 3px solid var(--indigo);
  box-shadow: 0 0 12px rgba(91, 108, 255, .6);
}
.timeline li:last-child::before { border-color: var(--red); box-shadow: 0 0 12px rgba(232, 40, 60, .6); }
.timeline .year {
  font-size: 20px;
  font-weight: 700;
  background: var(--grad-text);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  color: transparent;
}
.timeline h3 { font-size: 17.5px; font-weight: 600; margin: 8px 0 6px; }
.timeline p { color: var(--muted); font-size: 14.5px; }

/* ---------- 价值观 ---------- */
.value-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 20px;
}
.value-card {
  padding: 32px 26px;
  border-radius: var(--radius);
  border: 1px solid var(--stroke);
  background: var(--panel);
  text-align: center;
  transition: transform .3s ease, border-color .3s ease;
}
.value-card:hover { transform: translateY(-6px); border-color: rgba(139, 92, 246, .45); }
.value-card .icon-wrap { margin: 0 auto 18px; }
.value-card h3 { font-size: 18px; margin-bottom: 8px; }
.value-card p { color: var(--muted); font-size: 14px; }

/* ---------- 联系页 ---------- */
.contact-wrap {
  display: grid;
  grid-template-columns: 380px 1fr;
  gap: 40px;
  align-items: start;
}
.contact-cards { display: grid; gap: 16px; }
.contact-card {
  padding: 24px 26px;
  border-radius: var(--radius-sm);
  border: 1px solid var(--stroke);
  background: var(--panel);
  display: flex;
  gap: 16px;
  align-items: flex-start;
  transition: border-color .3s ease, transform .3s ease;
}
.contact-card:hover { border-color: rgba(91, 108, 255, .45); transform: translateX(4px); }
.contact-card .icon-wrap { width: 46px; height: 46px; border-radius: 12px; }
.contact-card .icon-wrap svg { width: 21px; height: 21px; }
.contact-card h3 { font-size: 15.5px; margin-bottom: 3px; }
.contact-card p { color: var(--muted); font-size: 14px; }

.quote-form {
  padding: 40px;
  border-radius: var(--radius);
  border: 1px solid var(--stroke);
  background: var(--panel);
}
.form-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 20px; }
/* 一行平铺的字段布局（职位管理等字段少的表单），空间不够时自动换行 */
.form-grid.cols-auto { grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); }
/* 部门多选下拉（用户表单"可查看部门"，外观与其他输入框一致） */
.dept-select { position: relative; }
.dept-select-btn {
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  padding: 13px 16px;
  border-radius: 10px;
  border: 1px solid var(--stroke);
  background: rgba(4, 7, 14, .6);
  color: var(--text);
  font-family: inherit;
  font-size: 15px;
  text-align: left;
  cursor: pointer;
  transition: border-color .25s ease, box-shadow .25s ease;
}
.dept-select-btn::after { content: '▾'; color: var(--muted); font-size: 13px; }
.dept-select-btn:hover { border-color: var(--stroke-strong); }
.dept-select.open .dept-select-btn { border-color: var(--indigo); box-shadow: 0 0 0 3px rgba(91, 108, 255, .18); }
/* position:fixed + JS 定位：模态框有 overflow 裁剪，fixed 面板可展开到模态框外 */
.dept-select-panel {
  position: fixed;
  top: auto;
  left: auto;
  right: auto;
  z-index: 600;
  max-height: 240px;
  overflow-y: auto;
  padding: 10px 14px;
  border-radius: 10px;
  border: 1px solid var(--stroke);
  background: #0b1322;
  box-shadow: 0 12px 32px rgba(0, 0, 0, .45);
  display: grid;
  gap: 4px;
}
.dept-select-panel .perm-item { padding: 5px 0; }

/* 四个字段一行（用户表单：姓名/用户名/密码/职位），空间不够时降为两列 / 一列 */
.form-grid.cols-4 { grid-template-columns: repeat(4, 1fr); }
@media (max-width: 1150px) { .form-grid.cols-4 { grid-template-columns: 1fr 1fr; } }
@media (max-width: 700px) { .form-grid.cols-4 { grid-template-columns: 1fr; } }
/* 三个字段一行（开票申请：两行正好六字段填满），空间不够时降为两列 / 一列 */
.form-grid.cols-3 { grid-template-columns: repeat(3, 1fr); }
@media (max-width: 1150px) { .form-grid.cols-3 { grid-template-columns: 1fr 1fr; } }
@media (max-width: 700px) { .form-grid.cols-3 { grid-template-columns: 1fr; } }
.form-field { display: grid; gap: 8px; }
.form-field.full { grid-column: 1 / -1; }
.form-field label { font-size: 14px; color: var(--muted); font-weight: 500; }
.form-field label b { color: var(--red-bright); font-weight: 400; }
.form-field input,
.form-field select,
.form-field textarea {
  width: 100%;
  padding: 14px 16px;
  border-radius: 10px;
  border: 1px solid var(--stroke);
  background: rgba(4, 7, 14, .6);
  color: var(--text);
  font-family: inherit;
  font-size: 15px;
  transition: border-color .25s ease, box-shadow .25s ease;
}
.form-field select { appearance: none; background-image: linear-gradient(45deg, transparent 50%, var(--muted) 50%), linear-gradient(135deg, var(--muted) 50%, transparent 50%); background-position: calc(100% - 22px) 50%, calc(100% - 16px) 50%; background-size: 6px 6px; background-repeat: no-repeat; }
.form-field textarea { min-height: 130px; resize: vertical; }
.form-field input:focus,
.form-field select:focus,
.form-field textarea:focus {
  outline: none;
  border-color: var(--indigo);
  box-shadow: 0 0 0 3px rgba(91, 108, 255, .18);
}
.form-field.error input,
.form-field.error textarea { border-color: var(--red); }
.form-field .err-msg { color: var(--red-bright); font-size: 12.5px; display: none; }
.form-field.error .err-msg { display: block; }
.form-foot { grid-column: 1 / -1; display: flex; align-items: center; gap: 18px; flex-wrap: wrap; margin-top: 6px; }
.form-tip { color: var(--muted-2); font-size: 13px; }

/* ---------- 统一操作提示（全站共用，js/main.js 的 YYToast 触发） ----------
   从屏幕右侧边缘外滑入，停在顶栏下方，停留 2.8 秒后向右收回；
   同一时间只显示一条，新提示顶掉上一条；成功绿色、失败红色 */
.yy-toasts {
  position: fixed;
  top: 84px;
  right: 24px;
  z-index: 9999;
  pointer-events: none;
}
.yy-toast {
  max-width: 380px;
  padding: 13px 20px;
  border-radius: 12px;
  font-size: 14px;
  line-height: 1.6;
  box-shadow: 0 12px 32px rgba(0, 0, 0, .45);
  transform: translateX(calc(100% + 40px));
  opacity: 0;
  transition: transform .38s ease, opacity .38s ease;
}
.yy-toast.in { transform: translateX(0); opacity: 1; }
.yy-toast.out { transform: translateX(calc(100% + 40px)); opacity: 0; }
.yy-toast.ok { border: 1px solid rgba(52, 211, 153, .4); background: rgba(10, 20, 32, .96); color: #6ee7b7; }
.yy-toast.err { border: 1px solid rgba(232, 40, 60, .45); background: rgba(28, 10, 16, .96); color: #ff8b98; }

/* 登录验证期间隐藏受保护页面内容（auth.js 确认登录态后解除） */
html.auth-wait body { visibility: hidden; }

/* ---------- 滚动渐入动画（仅 JS 可用时隐藏，避免无 JS 环境页面空白） ---------- */
.js [data-reveal] {
  opacity: 0;
  transform: translateY(26px);
  transition: opacity .8s cubic-bezier(.2, .65, .3, 1), transform .8s cubic-bezier(.2, .65, .3, 1);
  transition-delay: var(--d, 0s);
}
.js [data-reveal].revealed { opacity: 1; transform: none; }

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  [data-reveal] { opacity: 1; transform: none; transition: none; }
  .marquee-track { animation: none; }
  .map-route { animation: none; }
  .map-node-ring { animation: none; opacity: .35; }
  /* 关闭"减少动态效果"用户的页面切换过渡（直接硬切） */
  ::view-transition-group(*), ::view-transition-image-pair(*) { animation: none !important; }
}

/* ---------- 响应式 ---------- */
@media (max-width: 1024px) {
  .section { padding: 88px 0; }
  .services-grid { grid-template-columns: 1fr 1fr; }
  .service-card.wide { grid-column: span 2; }
  .network-wrap { grid-template-columns: 1fr; gap: 40px; }
  .process-track { grid-template-columns: repeat(2, 1fr); }
  .step::after { display: none; }
  .adv-grid, .value-grid { grid-template-columns: 1fr 1fr; }
  .footer-grid { grid-template-columns: 1fr 1fr; }
  .contact-wrap { grid-template-columns: 1fr; }
  .service-detail { grid-template-columns: 1fr; gap: 36px; padding: 48px 0; }
  .service-detail:nth-child(even) { direction: ltr; }
}

@media (max-width: 768px) {
  .nav-links {
    position: fixed;
    top: var(--header-h);
    left: 0; right: 0;
    flex-direction: column;
    align-items: stretch;
    gap: 0;
    background: rgba(6, 10, 19, .97);
    -webkit-backdrop-filter: blur(20px);
    backdrop-filter: blur(20px);
    border-bottom: 1px solid var(--stroke);
    padding: 12px 24px 26px;
    display: none;
  }
  .nav-links.open { display: flex; }
  .nav-links > a { padding: 15px 4px; border-bottom: 1px solid var(--stroke); font-size: 16px; }
  .nav-links > a.active::after { display: none; }
  .nav-links > a.active { color: var(--indigo); }
  .nav-cta { margin-top: 18px; justify-content: center; }
  .nav-burger { display: flex; }

  .hero { padding-top: calc(var(--header-h) + 40px); }
  .hero-stats { grid-template-columns: 1fr 1fr; margin-top: 54px; }
  .hero-actions .btn { flex: 1; }
  .services-grid { grid-template-columns: 1fr; }
  .service-card.wide { grid-column: span 1; }
  .quote-grid { grid-template-columns: 1fr; }
  .process-track { grid-template-columns: 1fr; }
  .stats-band { grid-template-columns: 1fr 1fr; gap: 30px; }
  .form-grid { grid-template-columns: 1fr; }
  .quote-form { padding: 28px 22px; }
}

@media (max-width: 560px) {
  .section { padding: 72px 0; }
  .adv-grid, .value-grid { grid-template-columns: 1fr; }
  .stats-band { grid-template-columns: 1fr 1fr; }
  .hero-stats { grid-template-columns: 1fr 1fr; gap: 12px; }
  .cta-band { padding: 64px 24px; }
  .footer-grid { grid-template-columns: 1fr; gap: 36px; }
  .brand-text em { display: none; }
  .service-detail .feats { grid-template-columns: 1fr; }
  .spec-table th, .spec-table td { padding: 11px 10px; }
}

/* 车辆证件上传：文件框与已传文件链接 */
.form-field input[type="file"] { width: 100%; font-size: 12px; color: var(--muted); }
.form-field input[type="file"]::file-selector-button { margin-right: 10px; padding: 6px 12px; border: 1px solid var(--stroke); border-radius: 8px; background: var(--panel); color: var(--text); font-size: 12px; cursor: pointer; }
.veh-file-link { display: inline-block; margin-top: 6px; font-size: 12px; color: var(--indigo); text-decoration: none; }
.veh-file-link:hover { text-decoration: underline; }

/* 车辆/挂车证件缩略图：类型标签与待上传态 */
.doc-files-field { margin-top: 14px; }
.doc-files-field > label { display: block; font-size: 13px; color: var(--muted); margin-bottom: 10px; }
.file-thumb .file-type {
  position: absolute;
  left: 0; right: 0; bottom: 0;
  padding: 3px 0;
  font-size: 11px;
  text-align: center;
  color: #fff;
  background: rgba(4, 7, 14, .65);
}
.file-add { position: relative; }
.file-add .file-add-label { position: absolute; left: 4px; right: 4px; bottom: 8px; font-size: 11px; line-height: 1.3; font-weight: 400; }
.file-thumb.pending { outline: 2px dashed var(--indigo); outline-offset: -2px; }
.emp-files-field { margin-top: 14px; }
.emp-files-field > label { display: block; font-size: 13px; color: var(--muted); margin-bottom: 10px; }

/* 日期切换条 + 保存按钮（子元素等高：行高由日期条撑起，统计卡与保存按钮自动拉伸对齐） */
.att-toolbar {
  display: flex;
  align-items: stretch;
  justify-content: space-between;
  gap: 16px;
  flex-wrap: wrap;
  margin-bottom: 10px;
}
.att-date-nav {
  display: flex;
  align-items: center;
  gap: 10px;
  background: #fff;
  border: 1px solid #dde6f2;
  border-radius: var(--radius-sm);
  padding: 8px 12px;
  box-shadow: 0 2px 10px rgba(29, 51, 89, .05);
}
.att-date-nav input[type="date"],
.att-date-nav input[type="month"] {
  border: none;
  background: transparent;
  font: inherit;
  font-weight: 600;
  font-size: 15px;
  color: #1f2d45;
  outline: none;
}
.att-day-btn, .att-today-btn {
  border: 1px solid #dde6f2;
  background: #f7fafe;
  border-radius: 9px;
  font: inherit;
  cursor: pointer;
  transition: background .2s ease, border-color .2s ease;
}
.att-day-btn { width: 32px; height: 32px; line-height: 1; font-size: 18px; color: #5f7189; }
.att-today-btn { padding: 6px 14px; font-size: 13px; font-weight: 600; color: #4f5fe0; background: #eef1ff; border-color: #d8defc; }
.att-day-btn:hover { background: #eef3fa; }
.att-today-btn:hover { background: #e2e7ff; }

/* 当日统计小卡（与日期条、保存按钮同行，居中占满剩余空间） */
.att-stats {
  flex: 1;
  min-width: 0;
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  align-content: stretch;
  gap: 10px;
}
.att-stat-card {
  background: #fff;
  border: 1px solid #dde6f2;
  border-radius: var(--radius-sm);
  padding: 9px 14px;
  font-size: 12.5px;
  color: #5f7189;
  box-shadow: 0 2px 10px rgba(29, 51, 89, .05);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  white-space: nowrap;
}
.att-stat-card b { font-size: 18px; line-height: 1.2; }
.att-stat-card.on b { color: #16a06a; }
.att-stat-card.rest b { color: #8a97a8; }
.att-stat-card.leave b { color: #2b7fd4; }
.att-stat-card.year b { color: #d9822b; }
.att-stat-card.sick b { color: #b0941c; }
.att-stat-card.absent b { color: #d9534f; }

/* 名单面板（月度表格较宽，容器内横向+纵向滚动）；
   操作页内容区改为列布局——工具条固定在上方，表格面板占满剩余空间内部滚动；
   顶栏与工具条、工具条与表格之间的间距压缩，页面更紧凑（各操作页一致） */
.portal-fixed .container:has(.att-panel-scroll) {
  display: flex;
  flex-direction: column;
  overflow: hidden;
  padding-bottom: 0;
}
.att-toolbar { flex: 0 0 auto; }
.att-panel {
  background: #fff;
  border: 1px solid #dde6f2;
  border-radius: var(--radius);
  box-shadow: 0 4px 16px rgba(29, 51, 89, .06);
  overflow: hidden;
}
/* 面板内部滚动但隐藏滚动条（滚轮/触控板滚动不受影响） */
.att-panel-scroll { flex: 1 1 auto; min-height: 0; overflow: auto; scrollbar-width: none; }
.att-panel-scroll::-webkit-scrollbar { display: none; }
.att-table { width: 100%; border-collapse: collapse; }
/* 表头固定：吸附在面板顶部；姓名列表头同时左右吸附，层级更高 */
.att-month-table thead th { position: sticky; top: 0; z-index: 5; padding: 6px 6px 7px; text-align: center; }
.att-month-table thead .att-name-col { z-index: 6; }
.att-day-num { display: block; font-size: 13px; font-weight: 700; color: #6b7a90; }
.att-week { display: block; font-size: 11px; font-weight: 500; color: #9aa9be; }
.att-day-col.weekend .att-day-num,
.att-day-col.weekend .att-week { color: #e08a8a; }
.att-day-col.att-fest-col .att-day-num,
.att-day-col.att-fest-col .att-week { color: #e02b2b; font-weight: 700; }
.att-table th {
  text-align: left;
  font-size: 13px;
  font-weight: 600;
  color: #8595ad;
  background: #f5f8fd;
  padding: 12px 20px;
  border-bottom: 1px solid #e7eef7;
}
.att-table td {
  padding: 14px 20px;
  border-bottom: 1px solid #eef3f9;
  font-size: 14.5px;
  color: #273449;
}
.att-table tr:last-child td { border-bottom: none; }
.att-name { font-weight: 600; color: #1f2d45; white-space: nowrap; }

/* 月度考勤表：姓名列固定在左，1~31 号每列一个窄格子 */
/* 分离边框模式：collapse 下边框由表格层统一绘制，表头吸附滚动时缝隙会透出内容 */
.att-month-table { min-width: max-content; border-collapse: separate; border-spacing: 0; }
.att-month-table th { text-align: center; padding: 10px 6px; }
.att-month-table td { height: 43px; padding: 8px 4px; border-bottom: 1px solid #eef3f9; }
.att-month-table td .att-cell { display: block; margin: 0 auto; }
.att-name-col {
  position: sticky;
  left: 0;
  z-index: 4;
  min-width: 96px;
  text-align: left !important;
  padding-left: 20px !important;
  padding-right: 14px !important;
  background: #fff;
}
.att-plate-col { min-width: 72px; text-align: left !important; }
.att-plate { color: #4c5d75; font-weight: 600; letter-spacing: .02em; white-space: nowrap; }
.att-month-table thead .att-name-col { background: #f5f8fd; }
.att-day-col { min-width: 34px; font-variant-numeric: tabular-nums; }
.att-day-col.weekend { color: #e08a8a; }
/* 表头第二行：星期几 / 节日（节日两行数字与"节"同色，区别于周末的淡红） */
.att-month-table thead tr:nth-child(2) th { padding: 2px 6px 9px; font-size: 11px; font-weight: 500; }
.att-cell {
  width: 30px;
  height: 26px;
  border: 1px solid transparent;
  border-radius: 7px;
  background: #f4f7fc;
  font: inherit;
  font-size: 12px;
  font-weight: 600;
  color: transparent;
  cursor: pointer;
  transition: background .15s ease, border-color .15s ease;
}
.att-cell:hover { background: #e8eef8; border-color: #cdd9ea; }
.att-cell.s1 { background: #e7f8f0; color: #16a06a; }        /* 出勤：淡绿 */
.att-cell.s0 { background: #f0f2f5; color: #8a97a8; }        /* 休息：灰 */
.att-cell.s2 { background: #e3f1fc; color: #2b7fd4; }        /* 事假：蓝 */
.att-cell.s3 { background: #fdf1e7; color: #d9822b; }        /* 年假：橙 */
.att-cell.s4 { background: #fdf9dc; color: #b0941c; }        /* 病假：黄 */
.att-cell.s5 { background: #f6d8d8; color: #a83232; font-weight: 700; } /* 旷工：红 */
.att-cell.att-fest { background: #fdecec; color: #e02b2b; font-weight: 700; } /* 节假日出勤"加"：红色 */
/* 入职前/离职后的日期：置灰禁用 */
.att-cell:disabled {
  background: #fafbfe;
  border-color: transparent;
  cursor: not-allowed;
  opacity: .5;
}
.att-cell:disabled:hover { background: #fafbfe; border-color: transparent; }

/* 节假日管理 */
.hol-year-nav { display: flex; align-items: center; gap: 8px; }
.hol-year-nav input {
  width: 96px;
  padding: 7px 10px;
  border: 1px solid rgba(148, 163, 184, .28);
  border-radius: 9px;
  background: rgba(255, 255, 255, .05);
  font: inherit;
  font-size: 14px;
  font-weight: 600;
  color: #f1f5f9;
  text-align: center;
  outline: none;
  -moz-appearance: textfield;
  appearance: textfield;
  transition: border-color .2s ease;
}
/* 隐藏数字输入的微调按钮 */
.hol-year-nav input::-webkit-inner-spin-button,
.hol-year-nav input::-webkit-outer-spin-button { -webkit-appearance: none; margin: 0; }
.hol-year-nav input:focus { border-color: rgba(124, 140, 255, .65); }
.hol-type-badge { display: inline-block; padding: 3px 12px; border-radius: 999px; font-size: 12.5px; font-weight: 600; }
.hol-type-1 { background: #fdecec; color: #e02b2b; }
.hol-type-2 { background: #fdf1e7; color: #d9822b; }
.hol-type-3 { background: #eef2f8; color: #5b7191; }
.hol-tip { color: #93a3b8; font-size: 12.5px; padding: 12px 20px; margin: 0; }

/* 实发工资输入框 */
.settle-input {
  width: 118px;
  padding: 7px 12px;
  border: 1px solid #dde6f2;
  border-radius: 9px;
  background: #fff;
  font: inherit;
  font-size: 13.5px;
  color: #273449;
  text-align: right;
  outline: none;
  transition: border-color .18s ease;
}
.settle-input:focus { border-color: #9db4d8; box-shadow: 0 0 0 3px rgba(91, 108, 255, .12); }
.settle-input:disabled { opacity: .55; }
/* 隐藏数字输入框右侧的上下微调箭头（Chrome/Safari/Firefox） */
.settle-input::-webkit-outer-spin-button,
.settle-input::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }
.settle-input { -moz-appearance: textfield; appearance: textfield; }

.att-empty {
  padding: 46px 20px;
  text-align: center;
  color: #93a3b8;
  font-size: 14px;
}

/* 工资结算列表（salary.html）与考核评分列表（assess.html）：天数列居中等宽，旷工大于 0 红色提醒；
   分离边框 + 吸附表头（面板内部滚动时表头固定，与考勤月表同理）；
   工资表 16 列与面板同宽：表格按内容自然宽（width:max-content）横向滚动，列少时 min-width 撑满面板 */
.att-salary-table, .att-assess-table { border-collapse: separate; border-spacing: 0; }
.att-salary-table { width: max-content; min-width: 100%; }
/* 考核表列少：始终等于容器宽度（输入框跟随格子伸缩），任何窗口宽度都不会超出 */
.att-assess-table { width: 100%; }
/* 单元格间距收窄：左右 5px、上下 10px，首列留 16px 与面板边缘的呼吸位 */
.att-salary-table th, .att-salary-table td,
.att-assess-table th, .att-assess-table td { padding: 10px 5px; }
.att-salary-table th:first-child, .att-salary-table td:first-child,
.att-assess-table th:first-child, .att-assess-table td:first-child { padding-left: 16px; }
.att-salary-table thead th, .att-assess-table thead th { position: sticky; top: 0; z-index: 5; }
.att-salary-table th.num, .att-salary-table td.num,
.att-assess-table th.num, .att-assess-table td.num { text-align: center; width: 88px; }
/* 天数列（全勤/出勤/休息/请假/加班/旷工）只有 1~2 位数，列宽收窄 */
.att-salary-table th.day, .att-salary-table td.day { width: 44px; }
/* 除天数列与支付状态列外，其余各列统一宽度 92px；天数列 40px、支付状态列 64px，16 列一屏放下不横向滚动 */
.att-salary-table th, .att-salary-table td { width: 92px; }
.att-salary-table th.day, .att-salary-table td.day { width: 40px; }
.att-salary-table th:last-child, .att-salary-table td:last-child { width: 64px; }
/* 确认列只有一枚 26px 圆按钮：列宽与天数列同级，表头与按钮水平居中 */
.att-salary-table th.confirm-col, .att-salary-table td.confirm-col { width: 44px; text-align: center; }
.att-salary-table .att-name-col { min-width: 0; }
.att-salary-table .settle-input { width: 100%; padding: 7px 4px; box-sizing: border-box; }
.att-salary-table thead th { white-space: nowrap; }
.att-salary-table .pay-badge { padding: 4px 10px; font-size: 12px; }
/* 表头文字水平居中（姓名列表头的 left !important 也覆盖为居中），支付状态徽章在格子内居中 */
.att-salary-table thead th { text-align: center; }
.att-salary-table thead th.att-name-col { text-align: center !important; }
.att-salary-table td:last-child { text-align: center; }
.att-salary-table td.num, .att-assess-table td.num { font-weight: 600; color: #1f2d45; font-variant-numeric: tabular-nums; }
.att-salary-table td.num { white-space: nowrap; }
.att-salary-table td.num.bad, .att-assess-table td.num.bad { color: #d9534f; }

/* 考核评分列表：固定表格布局，姓名/车号按内容给宽，其余 12 个字段列均分剩余宽度（列宽全部一样） */
.att-assess-table { table-layout: fixed; }
.att-assess-table th:nth-child(1), .att-assess-table td:nth-child(1) { width: 90px; }
.att-assess-table th:nth-child(2), .att-assess-table td:nth-child(2) { width: 110px; }
.att-assess-table th.num, .att-assess-table td.num { width: auto; }
.att-assess-table .settle-input { width: 100%; }
/* 表头文字与两个考核开关水平居中 */
.att-assess-table thead th { text-align: center; }
.att-assess-table td.switch-col { text-align: center; }

/* 支付状态徽章（工资结算表）：点击在 未付/已付 间切换 */
.pay-badge {
  border: 1px solid rgba(95, 113, 137, .35);
  border-radius: 999px;
  padding: 5px 14px;
  font: inherit;
  font-size: 12.5px;
  font-weight: 600;
  color: #8a97a8;
  background: #fff;
  white-space: nowrap;
  cursor: pointer;
  transition: color .2s ease, background .2s ease, border-color .2s ease;
}
.pay-badge:hover { border-color: #16a06a; color: #16a06a; }
.pay-badge.paid { background: #e7f8f0; border-color: #bfe8d4; color: #16a06a; }
.pay-badge:disabled { opacity: .5; cursor: not-allowed; }
.pay-badge:disabled:hover { border-color: var(--stroke); color: inherit; }

/* 确认列打钩按钮（工资结算表）：点击在 未确认/已确认 间切换 */
.confirm-badge {
  width: 26px;
  height: 26px;
  border: 1px solid rgba(95, 113, 137, .35);
  border-radius: 999px;
  padding: 0;
  font: inherit;
  font-size: 14px;
  line-height: 1;
  color: #8a97a8;
  background: #fff;
  cursor: pointer;
  transition: color .2s ease, background .2s ease, border-color .2s ease;
}
.confirm-badge:hover { border-color: #16a06a; color: #16a06a; }
.confirm-badge.done { background: #16a06a; border-color: #16a06a; color: #fff; }
.confirm-badge:disabled { opacity: .5; cursor: not-allowed; }
.confirm-badge:disabled:hover { border-color: var(--stroke); color: inherit; }

/* 工资结算表列较多：姓名列横向滚动时固定在左侧，合计列加重显示 */
.att-salary-table .att-name-col { text-align: left !important; }
.att-salary-table thead .att-name-col { z-index: 6; background: #f5f8fd; }
.att-salary-table td.total { font-weight: 700; color: #1f2d45; }

/* 考核开关（油耗考核/高速考核）：滑块式开关，选中为主题蓝 */
.assess-switch { position: relative; display: inline-block; width: 40px; height: 22px; vertical-align: middle; }
.assess-switch input { position: absolute; opacity: 0; width: 100%; height: 100%; margin: 0; cursor: pointer; }
.assess-switch i {
  position: absolute; inset: 0; pointer-events: none;
  border-radius: 999px; background: #d5deec; transition: background .18s ease;
}
.assess-switch i::after {
  content: ''; position: absolute; top: 2px; left: 2px; width: 18px; height: 18px;
  border-radius: 50%; background: #fff; box-shadow: 0 1px 3px rgba(31, 45, 69, .3);
  transition: transform .18s ease;
}
.assess-switch input:checked + i { background: var(--indigo); }
.assess-switch input:checked + i::after { transform: translateX(18px); }

@media (max-width: 900px) {
  /* 窄屏：统计卡整体换到下一行，仍保持一行四张 */
  .att-stats { flex-basis: 100%; order: 3; }
}
@media (max-width: 640px) {
  .att-stats { grid-template-columns: 1fr 1fr; }
}

/* ==========================================================================
   公司网盘（pan.html）：深色大屏风格，复用考勤页的 att-toolbar / att-panel / att-table
   ========================================================================== */

/* 文件路径（面包屑）：嵌在顶栏页签右侧、与页签同行；当前层级橙色高亮，上级可点返回 */
.pan-crumb {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 1px;
  margin-left: 14px;
  padding: 6px 14px;
  border-radius: 999px;
  border: 1px solid rgba(148, 178, 224, .16);
  background: rgba(255, 255, 255, .04);
  font-size: 13px;
  max-width: 46vw;
  overflow: hidden;
}
.pan-crumb a {
  color: #a8bcdf;
  text-decoration: none;
  padding: 3px 7px;
  border-radius: 7px;
  transition: background .18s ease, color .18s ease;
}
.pan-crumb a:hover { background: rgba(88, 130, 255, .16); color: #e8f0ff; }
.pan-crumb .cur { color: #ffd9ad; font-weight: 600; padding: 3px 7px; }
.pan-crumb .sep { color: #7d90ad; }
.pan-crumb.auth-hidden { display: none; }
@media (max-width: 1200px) {
  .pan-crumb { display: none; } /* 窄屏顶栏放不下路径，只留页签 */
}

/* 操作按钮：新建文件夹（深色玻璃）/ 上传文件（橙色强调，与考勤页按钮同族）；
   现置于表头最右格，缩小一号贴合表头 */
.pan-actions { display: flex; align-items: center; gap: 8px; }
.pan-head-actions { text-align: right; padding: 8px 12px !important; }
.pan-head-actions .pan-actions { justify-content: flex-end; }
.pan-head-actions .pan-btn { padding: 6px 12px; font-size: 12.5px; box-shadow: none; border-radius: 9px; }
.pan-head-actions .pan-btn svg { width: 14px; height: 14px; }
.pan-btn {
  border: 1px solid rgba(148, 178, 224, .25);
  border-radius: var(--radius-sm);
  background: rgba(255, 255, 255, .05);
  font: inherit;
  font-size: 13.5px;
  font-weight: 600;
  color: #a8bcdf;
  padding: 0 18px;
  cursor: pointer;
  white-space: nowrap;
  display: inline-flex;
  align-items: center;
  gap: 7px;
  transition: background .2s ease, border-color .2s ease, color .2s ease;
  box-shadow: 0 2px 10px rgba(2, 6, 18, .4);
}
.pan-btn svg { width: 16px; height: 16px; flex: none; }
.pan-btn:hover { color: #e8f0ff; background: rgba(88, 130, 255, .16); }
.pan-btn:disabled { opacity: .55; cursor: default; }
.pan-btn.primary { color: #ffd9ad; background: rgba(251, 146, 60, .16); border-color: rgba(251, 168, 82, .45); }
.pan-btn.primary:hover { background: rgba(251, 146, 60, .26); }

/* 文件列表：名称列（图标 + 名称），文件夹名可点进入，文件名可点预览/下载 */
.pan-table { width: 100%; border-collapse: separate; border-spacing: 0; }
.pan-table thead th {
  position: sticky;
  top: 0;
  z-index: 5;
  text-align: left;
  font-size: 13px;
  font-weight: 600;
  color: #a8bcdf;
  background: rgba(16, 31, 62, .95);
  padding: 12px 20px;
  border-bottom: 1px solid rgba(148, 178, 224, .18);
}
.pan-table td {
  padding: 10px 20px;
  border-bottom: 1px solid rgba(148, 178, 224, .1);
  font-size: 14.5px;
  color: #dce6f7;
}
.pan-table tr:last-child td { border-bottom: none; }
.pan-table tbody tr { transition: background .15s ease; }
.pan-table tbody tr:hover { background: rgba(251, 146, 60, .08); }
.pan-table .col-size, .pan-table .col-time { white-space: nowrap; color: #a8bcdf; font-size: 13.5px; }

/* 开票管理列表（invoice.html）：各列按内容定宽（table-layout:fixed），表格铺满面板
   （width:100%，宽屏剩余空间按各列宽度同比例放大，小屏不低于 min-width 走横向滚动） */
.inv-table { table-layout: fixed; }
/* 备注列仅大屏显示（≥1680px 时面板才有富余），小屏整列隐藏 */
@media (max-width: 1679px) {
  .inv-table .inv-col-remark { display: none; }
}
.inv-table thead th { padding: 12px 12px; }
.inv-table td { padding: 10px 12px; }
/* 金额列（税额/价税合计）连同表头靠右 */
.inv-table .num { text-align: right; }
/* 普通发票（票种 0）的税额不可抵扣：灰色 + 划线弱化显示 */
.inv-table td.tax-muted { color: var(--muted-2); text-decoration: line-through; }
/* 表头全部水平居中（含金额列的表头，数值列仍靠右）；头部「申请」按钮也居中 */
.inv-table thead th, .inv-table thead th.num { text-align: center; }
.inv-table .pan-head-actions .pan-actions { justify-content: center; }
/* 操作列：收付状态/开票状态/删除 三按钮横排 */
.inv-ops { display: flex; align-items: center; justify-content: center; gap: 5px; }
.inv-ops button { white-space: nowrap; }
/* 表头紧凑按钮（申请/导出/导入） */
.inv-head-btn { padding: 0 10px; height: 26px; font-size: 12.5px; }
/* 底部合计行：沿用 .pan-table tfoot 的 sticky 吸附面板底部（单行无重叠问题） */
.inv-table tfoot td { padding: 9px 12px; }
.inv-table tfoot .inv-foot-label { text-align: right; color: #a8bcdf; }
/* 合计行左端分页器：上一页/下一页 + 「第 X / Y 页 · 共 N 条」，按钮沿用月份导航小按钮 */
.inv-pager { display: flex; align-items: center; gap: 8px; color: #a8bcdf; font-size: 13px; white-space: nowrap; }
.inv-pager .att-day-btn { width: 24px; height: 24px; line-height: 1; font-size: 14px; }
.inv-pager .att-day-btn:disabled { opacity: .35; cursor: not-allowed; }

/* 开票页顶栏筛选器：类型/开票月份/部门/对象/收付状态/开票状态/搜索 + × 一键清除 */
.inv-filter { gap: 6px; margin-left: 8px; }
.inv-filter select,
.inv-filter input[type="month"],
.inv-filter input[type="text"] {
  height: 28px; padding: 2px 8px; font: inherit; font-size: 13px;
  color: #dce6f7; background: rgba(255, 255, 255, .06);
  border: 1px solid rgba(148, 178, 224, .25); border-radius: 8px; outline: none;
  color-scheme: dark;
}
.inv-filter select { cursor: pointer; max-width: 96px; }
.inv-filter input[type="month"] { max-width: 132px; font-weight: 400; }
.inv-filter input[type="text"] { max-width: 124px; }
.inv-filter input::placeholder { color: #7d90ad; }
.inv-filter-combo { position: relative; display: flex; }
.inv-filter-combo .inv-combo-input { width: 96px; height: 28px; padding: 2px 8px; font-size: 13px; }
.inv-filter-combo-panel {
  position: absolute; top: calc(100% + 6px); left: 0; z-index: 60;
  width: 240px; max-height: 280px; overflow-y: auto; scrollbar-width: none;
  padding: 6px; border-radius: 10px; border: 1px solid rgba(122, 162, 255, .25);
  background: #0c1730; box-shadow: 0 18px 40px rgba(0, 0, 0, .55);
}
.inv-filter-combo-panel::-webkit-scrollbar { display: none; }

/* 上传进度托盘（右下角）：多文件上传时实时显示 已传/总数 与当前文件名 */
.pan-upload-tray {
  position: fixed;
  right: 22px;
  bottom: 22px;
  z-index: 240;
  width: min(360px, 88vw);
  border: 1px solid rgba(122, 162, 255, .3);
  border-radius: 14px;
  background: linear-gradient(180deg, rgba(19, 31, 61, .96), rgba(11, 23, 48, .96));
  box-shadow: 0 18px 40px -14px rgba(2, 6, 18, .95);
  color: #dce6f7;
  font-size: 13px;
  overflow: hidden;
}
.pan-tray-bar {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 11px 16px;
  cursor: pointer;
  user-select: none;
}
.pan-tray-caret { margin-left: auto; color: #7d90ad; transition: transform .2s ease; }
.pan-upload-tray.expanded .pan-tray-caret { transform: rotate(90deg); }
.pan-tray-panel { border-top: 1px solid rgba(148, 178, 224, .14); }
.pan-tray-actions {
  display: flex;
  justify-content: flex-end;
  gap: 8px;
  padding: 9px 14px 0;
}
.pan-tray-btn {
  border: 1px solid rgba(148, 178, 224, .3);
  border-radius: 8px;
  background: rgba(255, 255, 255, .05);
  font: inherit;
  font-size: 12.5px;
  font-weight: 600;
  color: #a8bcdf;
  padding: 4px 12px;
  cursor: pointer;
  transition: background .15s ease, color .15s ease;
}
.pan-tray-btn:hover { color: #e8f0ff; background: rgba(88, 130, 255, .16); }
.pan-tray-btn.danger { color: #ff9c9c; border-color: rgba(216, 80, 80, .45); }
.pan-tray-btn.danger:hover { background: rgba(216, 80, 80, .2); color: #ffb3b3; }
.pan-tray-btn:disabled { opacity: .45; cursor: default; }
.pan-tray-list { max-height: 240px; overflow: auto; padding: 8px 10px 12px; scrollbar-width: thin; }
.pan-tray-row {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 5px 6px;
  border-radius: 7px;
  font-size: 12.5px;
}
.pan-tray-row:hover { background: rgba(255, 255, 255, .04); }
.pan-tray-row .st { flex: none; width: 46px; font-weight: 600; text-align: center; border-radius: 6px; padding: 2px 0; font-size: 11.5px; }
.pan-tray-row .st.st-wait   { color: #a8bcdf; background: rgba(148, 178, 224, .12); }
.pan-tray-row .st.st-run    { color: #ffd9ad; background: rgba(251, 146, 60, .16); }
.pan-tray-row .st.st-ok     { color: #4ade80; background: rgba(34, 197, 94, .14); }
.pan-tray-row .st.st-cancel { color: #7d90ad; background: rgba(148, 178, 224, .1); }
.pan-tray-row .st.st-fail   { color: #ff9c9c; background: rgba(216, 80, 80, .22); }
.pan-tray-row .nm { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.pan-tray-row .pct { flex: none; min-width: 36px; text-align: right; color: #fda55c; font-variant-numeric: tabular-nums; }
.pan-tray-row .pan-tray-x {
  flex: none;
  border: none;
  background: transparent;
  color: #7d90ad;
  font-size: 15px;
  line-height: 1;
  cursor: pointer;
  padding: 0 3px;
}
.pan-tray-row .pan-tray-x:hover { color: #ff9c9c; }
.pan-tray-spin {
  width: 15px;
  height: 15px;
  flex: none;
  border-radius: 50%;
  border: 2px solid rgba(148, 178, 224, .3);
  border-top-color: #fda55c;
  animation: pan-spin .8s linear infinite;
}
@keyframes pan-spin { to { transform: rotate(360deg); } }

/* 拖拽上传遮罩：从电脑拖文件进页面时盖住全屏，提示松手上传到当前位置 */
.pan-dropzone {
  position: fixed;
  inset: 0;
  z-index: 260;
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(2, 6, 18, .66);
  backdrop-filter: blur(2px);
  pointer-events: none;
}
.pan-dropzone-inner {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 10px;
  padding: 44px 64px;
  border: 3px dashed rgba(253, 165, 92, .75);
  border-radius: 22px;
  background: linear-gradient(180deg, rgba(19, 31, 61, .92), rgba(11, 23, 48, .92));
  box-shadow: 0 30px 70px -20px rgba(2, 6, 18, .95);
  color: #ffd9ad;
  text-align: center;
}
.pan-dropzone-inner svg { width: 46px; height: 46px; }
.pan-dropzone-inner p { margin: 0; font-size: 18px; font-weight: 700; }
.pan-dropzone-inner span { font-size: 13px; color: #a8bcdf; }

/* 批量操作条（勾选后出现在表头按钮区）与复选框 */
.pan-batch { align-items: center; }
.pan-batch-count { font-size: 13px; font-weight: 600; color: #ffd9ad; white-space: nowrap; }
.pan-btn.danger-btn { color: #ff9c9c; border-color: rgba(216, 80, 80, .45); background: rgba(216, 80, 80, .12); }
.pan-btn.danger-btn:hover { color: #ffb3b3; background: rgba(216, 80, 80, .22); }
.pan-head-check { padding: 8px 6px 8px 16px !important; }
.pan-sel { width: 15px; height: 15px; accent-color: #fda55c; cursor: pointer; display: block; }

/* 移动到：目录树弹窗（深色玻璃卡片，居中遮罩） */
.pan-modal {
  position: fixed;
  inset: 0;
  z-index: 300;
  background: rgba(2, 6, 18, .62);
  display: flex;
  align-items: center;
  justify-content: center;
}
.pan-modal-box {
  width: min(520px, 92vw);
  max-height: 78vh;
  display: flex;
  flex-direction: column;
  border: 1px solid rgba(122, 162, 255, .3);
  border-radius: 16px;
  background: linear-gradient(180deg, #131f3d 0%, #0b1730 100%);
  box-shadow: 0 30px 70px -20px rgba(2, 6, 18, .95);
  overflow: hidden;
}
.pan-modal-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 16px 20px 12px;
  color: #eef4ff;
  font-size: 15.5px;
}
.pan-modal-close {
  border: none;
  background: transparent;
  color: #a8bcdf;
  font-size: 22px;
  line-height: 1;
  cursor: pointer;
  padding: 0 4px;
}
.pan-modal-close:hover { color: #ff9c9c; }
.pan-modal-path {
  padding: 8px 20px;
  font-size: 13px;
  color: #a8bcdf;
  border-top: 1px solid rgba(148, 178, 224, .12);
  border-bottom: 1px solid rgba(148, 178, 224, .12);
  background: rgba(10, 20, 40, .45);
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 2px;
  max-height: 66px;
  overflow: auto;
  scrollbar-width: none;
}
.pan-modal-path a { color: #a8bcdf; text-decoration: none; padding: 2px 6px; border-radius: 6px; cursor: pointer; }
.pan-modal-path a:hover { background: rgba(88, 130, 255, .16); color: #e8f0ff; }
.pan-modal-path b { color: #ffd9ad; font-weight: 600; padding: 2px 6px; }
.pan-modal-path .sep { color: #7d90ad; }
.pan-modal-list { flex: 1 1 auto; min-height: 180px; max-height: 46vh; overflow: auto; padding: 8px 10px; scrollbar-width: thin; }
.pan-modal-item {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 8px 10px;
  border-radius: 9px;
  font-size: 14px;
  color: #dce6f7;
  cursor: pointer;
  transition: background .15s ease;
}
.pan-modal-item:hover { background: rgba(251, 146, 60, .12); }
.pan-modal-item.is-space { color: #ffd9ad; }
.pan-modal-item .pan-ico { width: 30px; height: 30px; border-radius: 8px; }
.pan-modal-item .pan-ico svg { width: 16px; height: 16px; }
.pan-modal-empty { padding: 26px 14px; text-align: center; color: #8fa3c0; font-size: 13.5px; }
.pan-modal-foot {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 10px;
  padding: 12px 20px 16px;
  border-top: 1px solid rgba(148, 178, 224, .12);
}
.pan-modal-tip { flex: 1; min-width: 0; font-size: 12px; color: #7d90ad; }
.pan-modal-foot .pan-btn { padding: 7px 16px; font-size: 13px; }

/* 拖拽移动：可拖行呈抓手光标，拖动中半透明，落到文件夹行/面包屑层级上橙色描边 */
.pan-table tbody tr[draggable="true"] { cursor: grab; }
.pan-table tbody tr.dragging { opacity: .4; }
.pan-table tbody tr.drag-over td {
  background: rgba(251, 146, 60, .16);
  box-shadow: inset 0 0 0 2px rgba(251, 146, 60, .55);
}
.pan-crumb .drag-over {
  background: rgba(251, 146, 60, .22) !important;
  box-shadow: inset 0 0 0 2px rgba(251, 146, 60, .55);
  color: #ffd9ad !important;
}

/* 上传人列：小圆头像（有头像图用图，没有显示姓名首字）+ 姓名 */
.pan-uploader { display: flex; align-items: center; gap: 8px; white-space: nowrap; }
.pan-avatar {
  width: 24px;
  height: 24px;
  border-radius: 50%;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex: none;
  font-size: 11.5px;
  font-weight: 700;
  color: #ffd9ad;
  background: linear-gradient(160deg, rgba(251, 146, 60, .42), rgba(251, 146, 60, .12));
  border: 1px solid rgba(251, 168, 82, .5);
  overflow: hidden;
}
.pan-avatar img { width: 100%; height: 100%; object-fit: cover; display: block; }

.pan-name { display: flex; align-items: center; gap: 12px; min-width: 280px; }
.pan-ico {
  width: 36px;
  height: 36px;
  border-radius: 10px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex: none;
}
.pan-ico svg { width: 19px; height: 19px; }
/* 图标配色按文件类型分组（深色玻璃底 + 提亮字色）：文件夹 / 图片 / PDF / 文档 / 表格 / 演示 / 压缩包 / 音视频 / 其他 */
.pan-ico.ft-folder { background: rgba(251, 146, 60, .16); color: #ffd9ad; }
.pan-ico.ft-img    { background: rgba(34, 197, 94, .15);  color: #4ade80; }
.pan-ico.ft-pdf    { background: rgba(216, 80, 80, .28);  color: #ff9c9c; }
.pan-ico.ft-doc    { background: rgba(43, 127, 212, .22); color: #7ab8f5; }
.pan-ico.ft-xls    { background: rgba(16, 185, 129, .16); color: #6ee7b7; }
.pan-ico.ft-ppt    { background: rgba(217, 130, 43, .24); color: #fda55c; }
.pan-ico.ft-zip    { background: rgba(139, 92, 246, .2);  color: #c4b5fd; }
.pan-ico.ft-media  { background: rgba(176, 148, 28, .22); color: #e5d34a; }
.pan-ico.ft-file   { background: rgba(148, 178, 224, .14); color: #a8bcdf; }
.pan-file-name {
  font-weight: 600;
  color: #eef4ff;
  cursor: pointer;
  word-break: break-all;
  transition: color .18s ease;
}
.pan-file-name:hover { color: #fda55c; }

/* 行内操作按钮：下载 / 重命名 / 删除（删除两步确认时变红，与全站做法一致） */
.pan-ops { display: flex; align-items: center; justify-content: flex-end; gap: 6px; white-space: nowrap; }
.pan-op {
  border: 1px solid rgba(148, 178, 224, .25);
  border-radius: 8px;
  background: rgba(255, 255, 255, .05);
  font: inherit;
  font-size: 12.5px;
  font-weight: 600;
  color: #a8bcdf;
  padding: 5px 12px;
  cursor: pointer;
  transition: background .18s ease, border-color .18s ease, color .18s ease;
}
.pan-op:hover { background: rgba(88, 130, 255, .16); color: #e8f0ff; }
.pan-op.danger { color: #ff9c9c; }
.pan-op:disabled { opacity: .45; cursor: default; }
.pan-op:disabled:hover { background: rgba(255, 255, 255, .05); color: #ff9c9c; }

/* 错误本「已审核」徽章：绿色胶囊，点击可取消审核 */
.err-audited {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 4px 10px;
  border-radius: 999px;
  background: rgba(34, 197, 94, .15);
  color: #4ade80;
  font-size: 12.5px;
  font-weight: 600;
  white-space: nowrap;
  cursor: pointer;
  transition: background .18s ease;
}
.err-audited::before { content: '✓'; font-size: 11px; }
.err-audited:hover { background: rgba(34, 197, 94, .26); }
.pan-op.danger:hover { background: rgba(216, 80, 80, .25); border-color: rgba(255, 156, 156, .4); color: #ffb3b3; }
.pan-op.confirm { background: rgba(216, 80, 80, .3); border-color: rgba(255, 156, 156, .45); color: #ffb3b3; }

/* 重命名的行内输入框（替换名称文字，确认/取消小按钮跟随） */
.pan-rename { display: flex; align-items: center; gap: 8px; flex: 1; min-width: 0; }
.pan-rename input {
  flex: 1;
  min-width: 0;
  padding: 7px 12px;
  border: 1px solid rgba(122, 162, 255, .25);
  border-radius: 9px;
  background: rgba(10, 20, 40, .55);
  font: inherit;
  font-size: 14px;
  color: #e8f0ff;
  outline: none;
  transition: border-color .18s ease, box-shadow .18s ease;
}
.pan-rename input:focus { border-color: rgba(251, 146, 60, .6); box-shadow: 0 0 0 3px rgba(251, 146, 60, .14); }
.pan-rename .pan-op.confirm-save { color: #ffd9ad; background: rgba(251, 146, 60, .16); border-color: rgba(251, 168, 82, .45); }
.pan-rename .pan-op.confirm-save:hover { background: rgba(251, 146, 60, .26); }


/* ==========================================================================
   考勤系统深色大屏风格（dark-page：考勤表/考核评分/工资结算，参考工作台 UI）
   ========================================================================== */
.dark-page .portal-fixed { padding-top: 10px; }
.dark-page .portal-fixed .container { scrollbar-width: none; }

/* 顶部页签导航：仪表板 / 考勤表 / 考核评分 / 工资结算 */
.dark-page .portal-nav {
  display: flex;
  gap: 6px;
  padding: 4px;
  border-radius: 999px;
  border: 1px solid rgba(148, 178, 224, .18);
  background: rgba(255, 255, 255, .04);
}
.dark-page .portal-nav-item {
  padding: 7px 14px;
  border-radius: 999px;
  font-size: 13.5px;
  font-weight: 600;
  color: #a8bcdf;
  transition: color .2s ease, background .2s ease;
}
.dark-page .portal-nav-item:hover { color: #e8f0ff; background: rgba(88, 130, 255, .12); }
.dark-page .portal-nav-item.active { color: #ffd9ad; background: rgba(251, 146, 60, .16); }

/* 年月切换工具条：深色玻璃控件 */
.dark-page .att-date-nav {
  background: rgba(10, 20, 40, .55);
  border-color: rgba(122, 162, 255, .28);
  box-shadow: 0 2px 10px rgba(2, 6, 18, .4);
}
.dark-page .att-date-nav input[type="month"],
.dark-page .att-date-nav input[type="date"] {
  background: transparent;
  color: #e8f0ff;
  color-scheme: dark;
}
.dark-page .att-day-btn {
  color: #a8bcdf;
  background: rgba(255, 255, 255, .05);
  border-color: rgba(148, 178, 224, .25);
}
.dark-page .att-day-btn:hover { color: #e8f0ff; background: rgba(88, 130, 255, .16); }
.dark-page .att-today-btn {
  color: #ffd9ad;
  background: rgba(251, 146, 60, .16);
  border-color: rgba(251, 168, 82, .45);
}

/* 错误本顶栏筛选器（复用 att-date-nav 胶囊）：日期段 / 部门 / 责任人 */
.att-date-nav select {
  border: none;
  background: transparent;
  font: inherit;
  font-weight: 600;
  font-size: 14px;
  color: #e8f0ff;
  outline: none;
  cursor: pointer;
  max-width: 130px;
  color-scheme: dark;
}
.att-date-nav select option { background: #0d1830; color: #e8f0ff; }
.err-filter-sep { color: #7d90ad; font-weight: 600; }

/* 错误本合计行：吸附面板底部始终可见 */
.pan-table tfoot td {
  position: sticky;
  bottom: 0;
  z-index: 4;
  background: rgba(16, 31, 62, .95);
  color: #a8bcdf;
  font-size: 13.5px;
  font-weight: 600;
  padding: 10px 20px;
  border-top: 1px solid rgba(148, 178, 224, .18);
}
.pan-table tfoot td b { color: #a5b4fc; font-family: var(--font); letter-spacing: .02em; }

/* 顶栏页签：紧跟品牌靠左（不再被空间均分推到中间），年月选择器并入页签行 */
.portal-top .portal-nav { margin-right: auto; align-items: center; }
.portal-nav .att-date-nav {
  padding: 3px 10px;
  gap: 6px;
  margin-left: 8px;
  box-shadow: none;
}
.portal-nav .att-date-nav input[type="month"],
.portal-nav .att-date-nav input[type="date"] { font-size: 13.5px; }
.portal-nav .att-day-btn { width: 26px; height: 26px; font-size: 15px; }
.portal-nav .att-today-btn { padding: 3px 10px; font-size: 12px; }
.dark-page .att-today-btn:hover { background: rgba(251, 146, 60, .26); }

/* 顶栏"小油"控件：当月油价与数量，与年月选择器同排的紧凑玻璃框 */
.oil-nav {
  display: flex;
  align-items: center;
  gap: 5px;
  margin-left: 8px;
  padding: 3px 8px;
  border-radius: 999px;
  border: 1px solid rgba(251, 168, 82, .35);
  background: rgba(251, 146, 60, .08);
}
.oil-lab { font-size: 12px; font-weight: 700; color: #ffd9ad; }
.oil-field { display: inline-flex; align-items: center; gap: 2px; font-size: 12px; color: #a8bcdf; }
.oil-field input {
  width: 44px;
  border: none;
  background: transparent;
  font: inherit;
  font-size: 12.5px;
  font-weight: 600;
  color: #e8f0ff;
  text-align: right;
  outline: none;
  color-scheme: dark;
  appearance: textfield;
  -moz-appearance: textfield;
}
.oil-field input::-webkit-outer-spin-button,
.oil-field input::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }
/* 总价数值较大，宽度放宽一档 */
.oil-field input#asOilTotal { width: 56px; }
.oil-field input[readonly] { cursor: default; }

/* 当月统计小卡：深色玻璃 + 状态色提亮 */
.dark-page .att-stat-card {
  border-radius: 14px;
  border: 1px solid rgba(122, 162, 255, .22);
  background:
    radial-gradient(120% 90% at 12% 0%, rgba(88, 130, 255, .16), transparent 55%),
    linear-gradient(165deg, rgba(30, 60, 126, .45), rgba(11, 22, 48, .5));
  color: #cdd9ee;
  box-shadow: inset 0 1px 0 rgba(190, 214, 255, .12), 0 14px 34px -18px rgba(2, 6, 18, .9);
}
.dark-page .att-stat-card b { font-size: 20px; text-shadow: 0 0 18px rgba(96, 140, 255, .35); }
.dark-page .att-stat-card.on b { color: #4ade80; }
.dark-page .att-stat-card.rest b { color: #a9b7c9; }
.dark-page .att-stat-card.leave b { color: #7ab8f5; }
.dark-page .att-stat-card.year b { color: #fda55c; }
.dark-page .att-stat-card.sick b { color: #e5d34a; }
.dark-page .att-stat-card.absent b { color: #ff9c9c; }

/* 表格面板：深色玻璃 */
/* 表格面板：扎实的深蓝底（不再透出页面背景） */
.dark-page .att-panel {
  border: 1px solid rgba(122, 162, 255, .18);
  border-radius: 14px;
  background: #0d1830; /* 全表统一实色底：吸附姓名列用同色，整表颜色一致 */
  box-shadow: 0 16px 34px -18px rgba(2, 6, 18, .95);
}
.dark-page .att-table th {
  color: #a8bcdf;
  background: rgba(16, 31, 62, .95);
  border-bottom-color: rgba(148, 178, 224, .18);
}
.dark-page .att-table td { color: #dce6f7; border-bottom-color: rgba(148, 178, 224, .1); }
.dark-page .att-name { color: #eef4ff; }
.dark-page .att-plate { color: #a8bcdf; }
.dark-page .att-day-num { color: #cdd9ee; }
.dark-page .att-week { color: #7d90ad; }
.dark-page .att-day-col.weekend .att-day-num,
.dark-page .att-day-col.weekend .att-week { color: #c99393; }
.dark-page .att-day-col.att-fest-col .att-day-num,
.dark-page .att-day-col.att-fest-col .att-week { color: #ff8f8f; }

/* 姓名列吸附时用实色深底，避免透出底图 */
.dark-page .att-name-col { background: #0d1830; }
.dark-page .att-month-table thead .att-name-col,
.dark-page .att-salary-table thead .att-name-col { background: #101f3e; }
.dark-page .att-month-table td { border-bottom-color: rgba(148, 178, 224, .1); }

/* 状态格：默认"休"近乎隐形，只让记录过的状态跳出来，降低满屏色块的视觉噪音 */
.dark-page .att-cell { background: transparent; border-color: transparent; }
.dark-page .att-cell:hover { background: rgba(251, 146, 60, .18); border-color: rgba(251, 168, 82, .4); }
.dark-page .att-cell.s0 { background: transparent; color: #4a5a78; }
.dark-page .att-cell.s0:hover { color: #9db0cc; }
.dark-page .att-cell.s1 { background: rgba(34, 197, 94, .15); color: #4ade80; }
.dark-page .att-cell.s2 { background: rgba(43, 127, 212, .22); color: #7ab8f5; }
.dark-page .att-cell.s3 { background: rgba(217, 130, 43, .24); color: #fda55c; }
.dark-page .att-cell.s4 { background: rgba(176, 148, 28, .22); color: #e5d34a; }
.dark-page .att-cell.s5 { background: rgba(216, 80, 80, .3); color: #ff9c9c; }
.dark-page .att-cell.att-fest { background: rgba(224, 43, 43, .2); color: #ff8f8f; }
.dark-page .att-cell:disabled { background: transparent; }
.dark-page .att-cell:disabled:hover { background: transparent; border-color: transparent; }
/* 悬停整行高亮（橙色）：姓名列为实色同步提亮（吸附列不能透出下层内容） */
.dark-page .att-table tbody tr:hover td:not(.att-name-col) { background: rgba(251, 146, 60, .12); }
.dark-page .att-table tbody tr:hover td.att-name-col {
  background: linear-gradient(rgba(251, 146, 60, .12), rgba(251, 146, 60, .12)), #0c1730;
}

/* 实发工资输入框 / 支付徽章 / 考核开关 */
.dark-page .settle-input {
  background: rgba(10, 20, 40, .55);
  border-color: rgba(122, 162, 255, .25);
  color: #e8f0ff;
}
.dark-page .settle-input:focus {
  border-color: rgba(251, 146, 60, .6);
  box-shadow: 0 0 0 3px rgba(251, 146, 60, .14);
}
.dark-page .att-salary-table td.num,
.dark-page .att-assess-table td.num { color: #e8f0ff; }
.dark-page .att-salary-table td.num.bad,
.dark-page .att-assess-table td.num.bad { color: #ff9c9c; }
/* 数字输入框负数值红色（工资结算表允许负数的手工列） */
.dark-page .att-salary-table .settle-input.neg-val { color: #ff9c9c; }
.dark-page .att-salary-table td.total { color: #fff; }
.dark-page .pay-badge {
  color: #a8bcdf;
  border-color: rgba(148, 178, 224, .3);
  background: rgba(255, 255, 255, .05);
}
.dark-page .pay-badge:hover { border-color: #34d399; color: #4ade80; }
.dark-page .pay-badge:disabled { opacity: .45; cursor: not-allowed; border-color: var(--stroke); color: var(--muted); }
.dark-page .pay-badge:disabled:hover { border-color: var(--stroke); color: var(--muted); }
.dark-page .pay-badge.paid {
  color: #4ade80;
  border-color: rgba(74, 222, 128, .4);
  background: rgba(22, 160, 106, .2);
}
.dark-page .confirm-badge {
  color: #a8bcdf;
  border-color: rgba(148, 178, 224, .3);
  background: rgba(255, 255, 255, .05);
}
.dark-page .confirm-badge:disabled { opacity: .45; cursor: not-allowed; border-color: var(--stroke); color: var(--muted); }
.dark-page .confirm-badge:disabled:hover { border-color: var(--stroke); color: var(--muted); }
.dark-page .confirm-badge:hover { border-color: #34d399; color: #34d399; }
.dark-page .confirm-badge.done {
  color: #4ade80;
  border-color: rgba(74, 222, 128, .4);
  background: rgba(22, 160, 106, .25);
}
.dark-page .assess-switch i { background: rgba(148, 178, 224, .28); }
.dark-page .assess-switch input:checked + i { background: rgba(251, 146, 60, .85); }
.dark-page .att-empty { color: #8fa3c0; }

@media (max-width: 768px) {
  .dark-page .portal-nav-item { padding: 7px 12px; font-size: 14px; }
  .dark-page .portal-name { display: none; }
}

/* 考勤页统计卡内嵌顶栏：紧凑胶囊（页签与用户信息之间居中） */
.portal-top .att-stats {
  display: flex;
  gap: 8px;
  flex: 1;
  justify-content: center;
  min-width: 0;
}
.portal-top .att-stat-card {
  justify-content: flex-start;
  gap: 7px;
  padding: 0 12px;
  height: 37px; /* 与页签(.portal-nav-item)等高 */
  line-height: 1;
  border-radius: 999px;
}
.portal-top .att-stat-card b { font-size: 15px; }
@media (max-width: 1500px) {
  .portal-top .att-stats { gap: 6px; }
  .portal-top .att-stat-card { padding: 0 9px; gap: 5px; font-size: 12px; }
  .portal-top .att-stat-card b { font-size: 14px; }
}
@media (max-width: 1280px) {
  .portal-top .att-stat-card { padding: 0 7px; }
}
@media (max-width: 1080px) {
  .portal-top .att-stats { display: none; }
}

/* ---------- 系统设置页深色大屏风格（dark-page，UI 参考考核评分/考勤页） ---------- */
/* 面板：深蓝玻璃底（同 .dark-page .att-panel） */
#settingsPage .data-panel {
  border: 1px solid rgba(122, 162, 255, .18);
  border-radius: 14px;
  background: linear-gradient(180deg, #101d3a 0%, #0b1730 100%);
  box-shadow: 0 16px 34px -18px rgba(2, 6, 18, .95);
}
/* 表格：蓝灰表头 + 浅色正文；吸附表头用实色深底防透行 */
#settingsPage .data-table th { color: #a8bcdf; border-bottom-color: rgba(148, 178, 224, .18); }
#settingsPage .data-table td { color: #dce6f7; border-bottom-color: rgba(148, 178, 224, .1); }
#settingsPage .data-table .mono { color: #a5b4fc; }
#settingsPage .data-table .mono.yn-yes { color: #34d399; }
#settingsPage .data-table .mono.yn-no { color: #f87171; }
#settingsPage .table-scroll .data-table thead th { background: rgba(16, 31, 62, .95); }
/* 行悬停橙色微亮、选中行橙色左条（同考勤页行高亮语言） */
#settingsPage .data-table tbody tr[data-id]:hover { background: rgba(251, 146, 60, .08); }
#settingsPage .data-table tbody tr.row-selected,
#settingsPage .data-table tbody tr.row-selected:hover { background: rgba(251, 146, 60, .12); box-shadow: inset 3px 0 0 rgba(251, 168, 82, .8); }
/* 左侧分类菜单：深色玻璃 + 橙色选中（同顶部页签 active） */
#settingsPage .settings-nav-item { border-color: rgba(148, 178, 224, .18); background: rgba(255, 255, 255, .04); color: #a8bcdf; }
#settingsPage .settings-nav-item:hover { color: #e8f0ff; border-color: rgba(122, 162, 255, .4); background: rgba(88, 130, 255, .12); }
#settingsPage .settings-nav-item.active { color: #ffd9ad; border-color: rgba(251, 168, 82, .45); background: rgba(251, 146, 60, .16); }
/* 表单区：深蓝底、蓝灰边框、浅色文字 */
#settingsPage .user-form { border-color: rgba(122, 162, 255, .18); background: rgba(10, 20, 40, .45); }
#settingsPage .form-field label { color: #a8bcdf; }
#settingsPage .form-field input,
#settingsPage .form-field select,
#settingsPage .form-field textarea { border-color: rgba(148, 178, 224, .22); background: rgba(10, 20, 40, .55); color: #e8f0ff; }
/* 员工/客户账号标签：深色玻璃 + 橙色选中 */
#settingsPage .user-tab { border-color: rgba(148, 178, 224, .18); background: rgba(255, 255, 255, .04); color: #a8bcdf; }
#settingsPage .user-tab:hover { color: #e8f0ff; border-color: rgba(122, 162, 255, .4); }
#settingsPage .user-tab.active { color: #ffd9ad; border-color: rgba(251, 168, 82, .45); background: rgba(251, 146, 60, .16); }
#settingsPage .user-tab.active .tab-count { color: #ffd9ad; }
/* 部门下拉 / 历史记录分隔线：深蓝玻璃 */
#settingsPage .dept-select-panel,
#settingsPage .dept-dd-panel { background: #0c1730; border-color: rgba(122, 162, 255, .25); }
#settingsPage .salary-history { border-top-color: rgba(148, 178, 224, .18); }

/* ---------- 顶栏用户下拉菜单（点用户区域展开：个人设置 / 退出登录） ---------- */
.portal-user {
  position: relative;
  padding: 6px 10px;
  margin: -6px -10px;
  border-radius: 10px;
  cursor: pointer;
  transition: background .2s ease;
}
.portal-user:hover,
.portal-user.menu-open { background: rgba(255, 255, 255, .07); }
.portal-user .portal-menu {
  position: absolute;
  top: calc(100% + 8px);
  right: 0;
  min-width: 138px;
  padding: 6px;
  display: none;
  background: #0d1a35;
  border: 1px solid rgba(122, 162, 255, .28);
  border-radius: 12px;
  box-shadow: 0 18px 38px -14px rgba(2, 6, 18, .95);
}
.portal-user.menu-open .portal-menu { display: block; }
.portal-menu-item {
  display: block;
  width: 100%;
  padding: 9px 12px;
  border: 0;
  border-radius: 8px;
  background: none;
  font-size: 13.5px;
  color: #dce6f7;
  text-align: left;
  text-decoration: none;
  white-space: nowrap;
  cursor: pointer;
  transition: background .15s ease, color .15s ease;
}
.portal-menu-item:hover { background: rgba(251, 146, 60, .14); color: #ffd9ad; }
.portal-menu-item.danger { color: #ff8b98; }
.portal-menu-item.danger:hover { background: rgba(232, 40, 60, .16); color: #ffa2ad; }

/* ---------- 个人设置页（profile.html，dark-page 风格与系统设置页同族） ---------- */
#profilePage .data-panel {
  border: 1px solid rgba(122, 162, 255, .18);
  border-radius: 14px;
  background: linear-gradient(180deg, #101d3a 0%, #0b1730 100%);
  box-shadow: 0 16px 34px -18px rgba(2, 6, 18, .95);
}
#profilePage .data-panel-head h2 { color: #e8f0ff; }
.profile-panel { max-width: 960px; margin: 0 auto; }
.profile-layout { display: flex; gap: 36px; align-items: flex-start; flex-wrap: wrap; }
.profile-side {
  flex: 0 0 180px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
  padding-top: 8px;
}
.profile-avatar { width: 84px; height: 84px; font-size: 32px; }
.profile-avatar-tip { font-size: 12.5px; color: #8fa6c9; }
.profile-meta { display: grid; gap: 7px; margin-top: 10px; }
.profile-meta p { display: flex; gap: 12px; font-size: 13.5px; }
.profile-meta span { color: #a9c1e8; }
.profile-meta b { color: #ffffff; font-weight: 700; font-size: 14.5px; }
.profile-main { flex: 1 1 420px; min-width: 0; }
.profile-block {
  padding: 20px;
  border: 1px solid rgba(122, 162, 255, .18);
  border-radius: 12px;
  background: rgba(10, 20, 40, .45);
}
.profile-block + .profile-block { margin-top: 18px; }
.profile-block-title { font-size: 15px; font-weight: 600; color: #ffd9ad; margin-bottom: 16px; }
.profile-block-tip { font-size: 12.5px; font-weight: 400; color: var(--muted); margin-left: 8px; }
.profile-foot { margin-top: 20px; }
#profilePage .form-field label { color: #a8bcdf; }
#profilePage .form-field input {
  border-color: rgba(148, 178, 224, .22);
  background: rgba(10, 20, 40, .55);
  color: #e8f0ff;
}
#profilePage .form-field input:disabled { color: #a8bcdf; opacity: .75; }
/* 只读字段（公司）：淡显并禁用编辑光标，提示由管理员维护 */
#profilePage .form-field input[readonly] { color: #a8bcdf; background: rgba(10, 20, 40, .3); cursor: not-allowed; }
.profile-readonly-tip { font-size: 12px; font-weight: 400; color: var(--muted); margin-left: 8px; }
/* 基本资料三列行：姓名占两列；邮箱/手机号/邮箱验证码同行（验证码发送至绑定邮箱） */
.form-grid.cols-3 .span-2 { grid-column: span 2; }
#profilePage .code-row { grid-template-columns: 1fr 1fr; }
#profilePage .code-row > * { min-width: 0; }
#profilePage .code-btn { padding: 0 6px; font-size: 13px; }
#profilePage .code-row input { letter-spacing: normal; border-color: rgba(148, 178, 224, .22); background: rgba(10, 20, 40, .55); color: #e8f0ff; }
#profilePage .code-btn { border-color: rgba(148, 178, 224, .3); background: rgba(251, 146, 60, .12); color: #ffd9ad; }
#profilePage .code-btn:hover { background: rgba(251, 146, 60, .22); }
#profilePage .code-btn:disabled { opacity: .5; cursor: not-allowed; background: rgba(251, 146, 60, .06); }
/* 三列字段行（修改密码区），空间不够时逐级收窄 */
.form-grid.cols-3 { grid-template-columns: repeat(3, 1fr); }
@media (max-width: 900px) { .form-grid.cols-3 { grid-template-columns: 1fr; } }

/* ---------- 设置页模态框：新增/编辑/安排等操作从内联表单改为弹窗 ----------
   复用原有 id（overlay 承接 auth-hidden 显隐），JS 开合逻辑不变；
   backdrop-filter/transform 只在 header/按钮上，模态框祖先无此类属性，fixed 定位安全 */
.modal-overlay {
  position: fixed;
  inset: 0;
  z-index: 500;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 24px;
  background: rgba(2, 6, 18, .62);
  backdrop-filter: blur(3px);
}
.modal-box {
  width: min(780px, 100%);
  max-height: min(88vh, 860px);
  display: flex;
  flex-direction: column;
  border-radius: 16px;
  border: 1px solid rgba(122, 162, 255, .25);
  background: linear-gradient(180deg, #101d3a 0%, #0b1730 100%);
  box-shadow: 0 30px 70px -20px rgba(2, 6, 18, .95);
  overflow: hidden;
  animation: modalIn .2s ease;
}
.modal-box.modal-lg { width: min(980px, 100%); }
.modal-box.modal-sm { width: min(560px, 100%); }
@keyframes modalIn { from { opacity: 0; transform: translateY(14px) scale(.985); } }
.modal-head {
  flex: 0 0 auto;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 15px 22px;
  border-bottom: 1px solid rgba(148, 178, 224, .14);
}
.modal-head h3 { font-size: 16.5px; font-weight: 600; color: #eef4ff; }
.modal-close {
  width: 30px;
  height: 30px;
  border-radius: 8px;
  border: 1px solid rgba(148, 178, 224, .2);
  background: rgba(255, 255, 255, .04);
  color: #a8bcdf;
  font-size: 17px;
  line-height: 1;
  cursor: pointer;
  transition: color .2s ease, border-color .2s ease, background .2s ease;
}
.modal-close:hover { color: #ffd9ad; border-color: rgba(251, 168, 82, .45); background: rgba(251, 146, 60, .14); }
.modal-body { flex: 1 1 auto; min-height: 0; overflow-y: auto; padding: 20px 22px; scrollbar-width: none; }
.modal-body::-webkit-scrollbar { display: none; }
/* 弹窗内的表单：去掉 user-form 自带的边框底色（外层 modal-box 已有） */
.modal-body .user-form { border: 0; background: none; padding: 0; margin-bottom: 0; }
/* 弹窗内列表自然排布：整体由 modal-body 滚动，不再嵌套内部滚动/吸附 */
#settingsPage .modal-body .table-scroll { flex: 0 0 auto; min-height: 0; overflow: visible; max-height: none; }
#settingsPage .modal-body .table-scroll .data-table thead th { position: static; }
/* 弹窗打开时锁住背后内容滚动 */
body:has(.modal-overlay:not(.auth-hidden)) .settings-content { overflow: hidden; }

/* ---------- 工作台集装箱卡片点击动画（吊起 → 砸向屏幕中底 → 爆开进新页面） ---------- */
/* 飞行的集装箱克隆件：外观沿用 #dashboardPage .mod-card，这里只管定位层级 */
.mod-fly {
  position: fixed;
  z-index: 200;
  pointer-events: none;
  will-change: transform;
}
/* 爆炸碎片：小钢片，颜色由 JS 内联 */
.shard {
  position: fixed;
  z-index: 201;
  border-radius: 2px;
  pointer-events: none;
  will-change: transform, opacity;
}
/* 爆炸火光圆 */
.boom-flash {
  position: fixed;
  z-index: 202;
  border-radius: 50%;
  pointer-events: none;
  background: radial-gradient(circle, rgba(255, 241, 219, .95), rgba(251, 146, 60, .55) 40%, transparent 70%);
}
/* 集装箱裂开的两半：与飞行件同款外观，用 clip-path 切开 */
.boom-half {
  position: fixed;
  z-index: 201;
  pointer-events: none;
  will-change: transform, opacity;
  background:
    linear-gradient(180deg, rgba(9, 18, 38, .16) 0%, rgba(7, 14, 30, .42) 100%),
    url("../img/xiangmen.png?v=202609506") center / cover no-repeat;
}
/* 爆炸白屏罩：以爆点为中心的放射光，盖满全屏时跳转新页面 */
.boom-cover {
  position: fixed;
  inset: 0;
  z-index: 203;
  pointer-events: none;
}


/* 油耗考核开关缩小版：同格内并列显示百公里油耗数据 */
.assess-switch-sm { width: 32px; height: 18px; }
.assess-switch-sm i::after { width: 14px; height: 14px; }
.assess-switch-sm input:checked + i::after { transform: translateX(14px); }
.fuel-wrap { display: inline-flex; align-items: center; gap: 5px; }
.fuel-val, .road-val { font-size: 14.5px; font-weight: 600; color: #dce6f7; font-variant-numeric: tabular-nums; white-space: nowrap; }

/* 整列出勤确认弹窗（考勤页深色玻璃风） */
.att-confirm {
  position: fixed;
  inset: 0;
  z-index: 200;
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(4, 8, 18, .6);
  -webkit-backdrop-filter: blur(4px);
  backdrop-filter: blur(4px);
}
.att-confirm-box {
  width: 340px;
  padding: 24px;
  border-radius: 14px;
  border: 1px solid rgba(122, 162, 255, .25);
  background: linear-gradient(180deg, #101d3a, #0b1730);
  box-shadow: 0 24px 60px -12px rgba(2, 6, 18, .9);
}
.att-confirm-text { color: #e8f0ff; font-size: 15px; font-weight: 600; line-height: 1.6; }
.att-confirm-hint { color: #8fa3c0; font-size: 13px; line-height: 1.6; margin-top: 6px; }
.att-confirm-btns { display: flex; gap: 10px; margin-top: 20px; }
.att-confirm-btn {
  flex: 1;
  padding: 9px 0;
  border-radius: 9px;
  border: 1px solid rgba(148, 178, 224, .3);
  background: rgba(255, 255, 255, .05);
  color: #a8bcdf;
  font: inherit;
  font-size: 14px;
  cursor: pointer;
  transition: background .2s ease, color .2s ease, border-color .2s ease;
}
.att-confirm-btn:hover { color: #e8f0ff; background: rgba(88, 130, 255, .16); }
.att-confirm-btn.primary {
  color: #ffd9ad;
  border-color: rgba(251, 168, 82, .55);
  background: rgba(251, 146, 60, .2);
}
.att-confirm-btn.primary:hover { color: #fff; background: rgba(251, 146, 60, .34); }
/* 表头日期可点击：手型光标 */
.dark-page .att-month-table th[data-day] { cursor: pointer; }

/* 考核表起始公里：自动读取带出的值只读展示 */
.settle-input[readonly] { cursor: default; opacity: .8; }

/* 考核超标数字红色提醒：油耗>30、高速>50 */
.fuel-val.assess-bad, .road-val.assess-bad { color: #ff5f5f; }

/* ---------- 员工列表社保/公积金 Y/N 颜色 ---------- */
.mono.yn-yes { color: #34d399; font-weight: 700; }
.mono.yn-no { color: #f87171; font-weight: 700; }


/* 左侧菜单底部"返回工作台"：橙色点缀（与退出登录/顶栏选中同语言），固定在菜单最下方 */
#settingsPage .settings-nav-back {
  justify-content: center;
  text-decoration: none;
  text-align: center;
  color: #ffd9ad;
  border-color: rgba(251, 168, 82, .45);
  background: rgba(251, 146, 60, .16);
}
#settingsPage .settings-nav-back:hover { color: #ffe6c7; border-color: rgba(251, 168, 82, .75); background: rgba(251, 146, 60, .26); }

/* 考核表已付锁定行：不变淡，输入框改为与"公里数"计算列一致的纯数值展示 */
.att-assess-table tr[data-locked] .settle-input {
  border: none;
  background: transparent;
  padding: 7px 0;
  font-size: 14.5px;
  font-weight: 600;
  color: #dce6f7;
  cursor: default;
}
.att-assess-table tr[data-locked] .assess-switch { cursor: default; }

/* ==================== 收款核销弹窗（开票管理：点「未收/未付」分批核销） ==================== */
.write-box { width: min(520px, 96%); }
.write-box .modal-head { background: #fff; border-bottom: 1px solid #dbe4f3; }
.write-box .modal-head h3 { color: #1f3864; font-size: 15.5px; }
.write-box .modal-body { background: #fff; }
.write-box .modal-close { border-color: #c9d6ec; background: #f2f6fc; color: #1f3864; }
.write-box .modal-close:hover { color: #12233f; border-color: #9db4d8; background: #e6edf9; }
.write-info { margin-bottom: 12px; }
.write-line { font-size: 13px; color: #445; margin: 3px 0; }
.write-line b { color: #1c2a44; font-weight: 600; }
.write-label { color: #7a879c; }
.write-nums { display: flex; gap: 10px; margin-top: 10px; }
.write-nums > div { flex: 1; background: #f2f6fc; border: 1px solid #dbe4f3; border-radius: 8px; padding: 8px 10px; text-align: center; }
.write-nums span { display: block; font-size: 12px; color: #7a879c; margin-bottom: 3px; }
.write-nums b { font-size: 16px; color: #1f3864; }
.write-nums > div:nth-child(3) b { color: #1e8e3e; }
.write-sub { font-size: 13px; font-weight: 600; color: #1c2a44; margin: 12px 0 6px; }
.write-table { width: 100%; border-collapse: collapse; font-size: 13px; }
.write-table th { background: #1f3864; color: #fff; font-weight: 500; padding: 6px 8px; text-align: center; }
.write-table td { border: 1px solid #e3eaf5; padding: 6px 8px; text-align: center; color: #33415c; }
.write-table td.num { text-align: right; font-variant-numeric: tabular-nums; }
.write-table tr:nth-child(even) td { background: #eef4fd; }
.write-empty { text-align: center; color: #98a3b8; padding: 10px 0 !important; }
.write-form { display: flex; align-items: flex-end; gap: 10px; margin-top: 14px; padding-top: 12px; border-top: 1px dashed #dbe4f3; }
.write-form label { display: flex; flex-direction: column; gap: 4px; font-size: 12px; color: #7a879c; }
.write-input { width: 130px; padding: 7px 9px; border: 1px solid #c9d6ec; border-radius: 7px; font-size: 13px; color: #1c2a44; background: #fff; }
.write-input:focus { outline: none; border-color: #1f3864; }
.write-done-tip { margin-top: 14px; text-align: center; background: #e8f6ec; border: 1px solid #bfe3ca; color: #1e8e3e; border-radius: 8px; padding: 10px; font-size: 13px; font-weight: 600; }
/* 核销弹窗补充：白底红边的「取消收付」、记录行删除 */
.btn-danger-light { border-color: rgba(208, 58, 43, .55); color: #c0392b; background: #fff5f3; }
.btn-danger-light:hover { color: #8f2318; border-color: #c0392b; background: #ffe9e5; }
.write-done-tip .btn { margin-left: 10px; }
.write-table .write-del { border: none; background: none; color: #c0392b; cursor: pointer; font-size: 12px; padding: 2px 6px; border-radius: 5px; }
.write-table .write-del:hover { background: #ffe9e5; }
.write-table .write-del.confirm { background: #c0392b; color: #fff; }

/* 考勤页顶栏部门筛选下拉（与年月输入框同款深色玻璃风） */
.dark-page .att-dept-select {
  height: 34px;
  padding: 0 10px;
  border-radius: 9px;
  border: 1px solid rgba(122, 162, 255, .28);
  background: rgba(10, 20, 40, .55);
  color: #e8f0ff;
  font: inherit;
  font-size: 13.5px;
  font-weight: 600;
  outline: none;
  color-scheme: dark;
  cursor: pointer;
}
.dark-page .att-dept-select:hover { border-color: rgba(148, 178, 224, .5); }
.dark-page .att-dept-select:focus { border-color: rgba(251, 146, 60, .6); }
/* 票面「发票文件」：已选文件标签（白底票面内） */
.inv-files-list { display: flex; flex-wrap: wrap; gap: 6px; flex: 1; }
.inv-file-chip { display: inline-flex; align-items: center; gap: 4px; background: #fff5f3; border: 1px solid rgba(208, 58, 43, .3); color: #c0392b; border-radius: 6px; padding: 2px 6px; font-size: 12px; max-width: 260px; }
.inv-file-chip span, .inv-file-chip { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.inv-file-chip button { border: none; background: none; color: #c0392b; cursor: pointer; font-size: 13px; padding: 0 2px; flex: none; }
.inv-file-chip button:hover { color: #8f2318; }
/* 「上传发票」已选文件后的绿色实心态（双类选择器压过 .btn-ghost 基础样式） */
.btn.btn-files-done, .btn.btn-files-done:hover { border-color: #1e8e3e; color: #fff; background: #1e8e3e; }

/* ==========================================================================
   2026-10-07 起：本文件为对外页面专用样式（官网 + 登录 + 客户中心），保持 2026-09 原版视觉。
   内部后台页面请使用 css/style.css（非鱼平台风格）。
   ========================================================================== */