/* ============================================================
   三智信通 v3 · 设计系统覆盖层（R29 世界级 UI 升级）
   方向：克制的精致 —— 参考 Linear / Stripe / 飞书 的 B 端语言
   原则：不动 DOM，纯 CSS 覆盖；4pt 网格；极浅阴影+细边框；150ms 微交互
   ============================================================ */

/* ---------- 设计令牌 v2 ---------- */
:root {
  /* 中性色阶（slate 系） */
  --n0:#ffffff; --n25:#fcfcfd; --n50:#f8fafc; --n100:#f1f4f8; --n200:#e4e9f0;
  --n300:#d0d7e2; --n400:#98a2b3; --n500:#667085; --n600:#475467; --n700:#344054; --n800:#1d2939; --n900:#101828;
  /* 品牌色阶（保持既定蓝） */
  --b25:#f5f9ff; --b50:#eff6ff; --b100:#dbeafe; --b200:#bfdbfe; --b300:#93c5fd;
  --b500:#1a73e8; --b600:#1557b0; --b700:#0f4691;
  /* 语义色浅底/深字对 */
  --green-bg:#ecfdf3; --green-tx:#067647; --green-bd:#a6f4c5;
  --red-bg:#fef3f2;   --red-tx:#b42318;   --red-bd:#fecdca;
  --orange-bg:#fffaeb; --orange-tx:#b54708; --orange-bd:#fedf89;
  --blue-bg:#eff6ff;  --blue-tx:#175cd3;  --blue-bd:#b2ddff;
  /* 阴影体系（极浅+分层，Linear 式） */
  --sh1:0 1px 2px rgba(16,24,40,.05);
  --sh2:0 1px 3px rgba(16,24,40,.08),0 1px 2px rgba(16,24,40,.04);
  --sh3:0 4px 8px -2px rgba(16,24,40,.08),0 2px 4px -2px rgba(16,24,40,.04);
  --sh4:0 12px 16px -4px rgba(16,24,40,.10),0 4px 6px -4px rgba(16,24,40,.05);
  --sh5:0 20px 24px -6px rgba(16,24,40,.12),0 8px 10px -6px rgba(16,24,40,.06);
  /* 圆角 / 动效 */
  --r1:6px; --r2:8px; --r3:10px; --r4:12px; --r5:16px;
  --t1:all .15s cubic-bezier(.4,0,.2,1);
  --t2:all .22s cubic-bezier(.4,0,.2,1);
  /* 焦点环 */
  --focus:0 0 0 3px rgba(26,115,232,.14);
}

/* ---------- 全局渲染质感 ---------- */
body {
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
  background: var(--n50);
}
::selection { background: rgba(26,115,232,.16); }

/* 数字等宽 —— 世界级数据界面的基本功：金额/吨位/数量列纵向对齐 */
table td, table th, .kpi .n, .num,
[style*="font-weight:700"], [style*="font-weight:600"] {
  font-variant-numeric: tabular-nums;
}

/* ---------- 卡片：细边框 + 极浅阴影 + 层次 ---------- */
.card {
  background: var(--n0);
  border: 1px solid var(--n200);
  border-radius: var(--r3);
  box-shadow: var(--sh1);
  transition: var(--t2);
}
.card[onclick], .card[style*="cursor:pointer"], a.card {
  cursor: pointer;
}
.card[onclick]:hover, .card[style*="cursor:pointer"]:hover {
  box-shadow: var(--sh3);
  transform: translateY(-1px);
  border-color: var(--n300);
}
.card h3 {
  color: var(--n800);
  letter-spacing: -.01em;
}

/* ---------- 按钮：微渐变 + 投影 + 三段式交互 ---------- */
.btn {
  background: linear-gradient(180deg,#2b83f0 0%,var(--b500) 100%);
  border: 1px solid var(--b600);
  border-radius: var(--r1);
  box-shadow: var(--sh1), inset 0 1px 0 rgba(255,255,255,.12);
  font-weight: 500;
  letter-spacing: .01em;
  transition: var(--t1);
}
.btn:hover:not(:disabled) {
  background: linear-gradient(180deg,var(--b500) 0%,var(--b600) 100%);
  box-shadow: var(--sh2), inset 0 1px 0 rgba(255,255,255,.08);
  transform: translateY(-1px);
}
.btn:active:not(:disabled) {
  transform: translateY(0);
  box-shadow: var(--sh1);
}
.btn:focus-visible { outline: none; box-shadow: var(--sh1), var(--focus); }
.btn.ghost {
  background: var(--n0);
  color: var(--b500);
  border: 1px solid var(--b200);
  box-shadow: var(--sh1);
}
.btn.ghost:hover:not(:disabled) {
  background: var(--b50);
  border-color: var(--b300);
  color: var(--b600);
}
.btn.gray {
  background: var(--n100);
  color: var(--n600);
  border: 1px solid var(--n200);
  box-shadow: none;
}
.btn.gray:hover:not(:disabled) { background: var(--n200); color: var(--n700); }

/* ---------- 输入控件：柔和光环 focus ---------- */
input, select, textarea {
  border: 1px solid var(--n300);
  border-radius: var(--r1);
  background: var(--n0);
  color: var(--n800);
  transition: var(--t1);
}
input:hover, select:hover, textarea:hover { border-color: var(--n400); }
input:focus, select:focus, textarea:focus {
  border-color: var(--b500);
  box-shadow: var(--focus);
  outline: none;
}
input::placeholder, textarea::placeholder { color: var(--n400); }

/* ---------- 表格：层级、密度、行态 ---------- */
table { border-collapse: separate; border-spacing: 0; }
table thead th, table th {
  background: var(--n50);
  color: var(--n500);
  font-size: 12px;
  font-weight: 600;
  letter-spacing: .02em;
  border-bottom: 1px solid var(--n200) !important;
  white-space: nowrap;
}
table td { border-bottom: 1px solid var(--n100) !important; color: var(--n700); }
table tbody tr { transition: background .12s ease; }
table tbody tr:hover { background: var(--b25); }
table tbody tr:last-child td { border-bottom: none !important; }

/* ---------- R29-6：表格紧凑档（密度 +20%，向 Linear/Notion 数据表看齐；仍保可读性） ---------- */
table th, table td { padding: 6px 9px !important; }
table td { font-size: 12.5px; line-height: 1.45; }
table thead th, table th { font-size: 11.5px; }

/* ---------- R29-4：线性 SVG 图标对齐 ---------- */
.v3ic { display: inline-block; vertical-align: -3.5px; flex: none; }
.menu a .v3ic { vertical-align: 0; }
.tabbar a .ic { display: flex; align-items: center; justify-content: center; height: 22px; margin-bottom: 2px; }
.tabbar a .v3ic { vertical-align: 0; }
h3 .v3ic { vertical-align: -3px; margin-right: 2px; }

/* ---------- R29-5：手机端权限配置芯片 ---------- */
.perm-chip { display: inline-flex; align-items: center; gap: 4px; font-size: 12px; padding: 5px 10px;
  border: 1px solid var(--n200); border-radius: 999px; color: var(--n500); cursor: pointer;
  transition: all var(--t1); user-select: none; -webkit-tap-highlight-color: transparent; }
.perm-chip.on { border-color: var(--b500); background: var(--b50); color: var(--b600); font-weight: 600; }
.perm-chip.ovr { box-shadow: 0 0 0 2px rgba(26, 115, 232, .22); } /* R30-2：项目级覆盖标记 */
.perm-chip.dis { opacity: .45; cursor: not-allowed; }
.perm-chip:active { transform: scale(.96); }

/* ---------- 标签：浅底深字语义化 ---------- */
.tag {
  border-radius: 999px;
  font-weight: 500;
  letter-spacing: .01em;
  border: 1px solid transparent;
}
.tag.green, .tag[style*="green"] { background: var(--green-bg); color: var(--green-tx); border-color: var(--green-bd); }
.tag.red { background: var(--red-bg); color: var(--red-tx); border-color: var(--red-bd); }
.tag.orange { background: var(--orange-bg); color: var(--orange-tx); border-color: var(--orange-bd); }
.tag.blue { background: var(--blue-bg); color: var(--blue-tx); border-color: var(--blue-bd); }
.tag.gray { background: var(--n100); color: var(--n500); border-color: var(--n200); }

/* ---------- 弹窗：模糊遮罩 + 入场动效 ---------- */
.mask { background: rgba(16,24,40,.44); backdrop-filter: blur(3px); -webkit-backdrop-filter: blur(3px); }
.mask.show .sheet { animation: v3SheetIn .26s cubic-bezier(.32,.72,.35,1); }
@keyframes v3SheetIn {
  from { transform: translateY(24px); opacity: .4; }
  to { transform: translateY(0); opacity: 1; }
}
.modal, .modal-card {
  box-shadow: var(--sh5) !important;
  border: 1px solid var(--n200);
  animation: v3PopIn .22s cubic-bezier(.32,.72,.35,1);
}
@keyframes v3PopIn {
  from { transform: translateY(10px) scale(.985); opacity: 0; }
  to { transform: translateY(0) scale(1); opacity: 1; }
}
.sheet { box-shadow: var(--sh5); }

/* ---------- 侧栏导航（PC）：精致选中态 ---------- */
.menu a { transition: var(--t1); }
.menu a:hover { background: var(--n100); }
.menu a.on {
  background: var(--b50) !important;
  color: var(--b600) !important;
  font-weight: 600 !important;
  box-shadow: inset 2px 0 0 var(--b500);
}

/* ---------- 手机底部 tab：精致选中态 ---------- */
#tabbar a { transition: var(--t1); }
#tabbar a.on, #tabbar a.active { color: var(--b600); font-weight: 600; }

/* ---------- 分隔与次级文字 ---------- */
.muted { color: var(--n500); }
h1, h2, h3 { letter-spacing: -.01em; }

/* ---------- 滚动条精修 ---------- */
::-webkit-scrollbar { width: 10px; height: 10px; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb { background: var(--n300); border-radius: 999px; border: 2px solid transparent; background-clip: content-box; }
::-webkit-scrollbar-thumb:hover { background: var(--n400); background-clip: content-box; border: 2px solid transparent; }

/* ---------- 登录页：品牌氛围（radial 光斑，不用烂大街紫渐变） ---------- */
#login {
  background:
    radial-gradient(600px 320px at 15% 8%, rgba(26,115,232,.10), transparent 60%),
    radial-gradient(700px 380px at 85% 90%, rgba(26,115,232,.08), transparent 60%),
    var(--n50);
}
#login .card, #login > div, #login form, .login-card {
  box-shadow: var(--sh4) !important;
  border: 1px solid var(--n200) !important;
  animation: v3PopIn .3s cubic-bezier(.32,.72,.35,1);
}

/* ---------- 手机端细节（m.html 同用本文件） ---------- */
.seg { background: var(--n100); border-radius: var(--r2); }
.seg a { transition: var(--t1); border-radius: var(--r1); }
.seg a.on { background: var(--n0); color: var(--b600); box-shadow: var(--sh1); font-weight: 600; }
.warn-bar { border-radius: var(--r3); box-shadow: var(--sh1); }
.item { transition: var(--t1); }
.impbar { box-shadow: var(--sh1); }

/* 顶栏与页头细分隔 */
.topbar, #topbar, .header { box-shadow: 0 1px 0 var(--n200); }

/* 可点击行/链接的反馈 */
a { transition: var(--t1); }
[onclick] { -webkit-tap-highlight-color: rgba(26,115,232,.08); }

/* 加载与空状态柔化 */
.empty { color: var(--n400); }

/* 打印友好的收尾：保证不影响现有布局数值，只提升质感 */

/* ============================================================
   R108：手机端整体设计升级（m.html · body.m3 专属作用域）
   方向：移动端的"克制精致"——毛玻璃、层次阴影、品牌渐变、按压反馈
   原则：全部规则挂在 body.m3 下，与 PC 端（admin.html）完全隔离
   ============================================================ */

/* ---------- 画布：细腻纵向渐变底 ---------- */
body.m3 {
  background: linear-gradient(180deg, #f7f9fc 0%, #eef2f7 100%);
  background-attachment: fixed;
}

/* ---------- 顶栏：品牌渐变 + 刘海屏安全区 + 玻璃版本徽标 ---------- */
body.m3 .topbar {
  background: linear-gradient(135deg, #2b83f0 0%, #1557b0 100%);
  padding-top: calc(14px + env(safe-area-inset-top));
  box-shadow: inset 0 1px 0 rgba(255,255,255,.14), 0 4px 14px -6px rgba(21,87,176,.45);
}
body.m3 .topbar .t { letter-spacing: .02em; }
body.m3 #app-ver {
  background: rgba(255,255,255,.18) !important;
  color: #fff !important;
  border-radius: 999px !important;
  font-weight: 600 !important;
  padding: 3px 10px !important;
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.22);
}

/* ---------- 底部 tab：毛玻璃 + 选中指示条 + 图标微动效；模块多时横向滑动不折行 ---------- */
body.m3 .tabbar {
  background: rgba(255,255,255,.88);
  backdrop-filter: blur(16px) saturate(1.6);
  -webkit-backdrop-filter: blur(16px) saturate(1.6);
  border-top: 1px solid rgba(228,233,240,.9);
  box-shadow: 0 -4px 16px -6px rgba(16,24,40,.08);
  overflow-x: auto; scrollbar-width: none; -webkit-overflow-scrolling: touch;
}
body.m3 .tabbar::-webkit-scrollbar { display: none; }
body.m3 .tabbar a { position: relative; color: var(--n400); transition: var(--t1); flex: 1 0 auto; min-width: 62px; white-space: nowrap; padding-left: 10px; padding-right: 10px; }
body.m3 .tabbar a.on { color: var(--b600); font-weight: 600; }
body.m3 .tabbar a.on::before {
  content: ""; position: absolute; top: 0; left: 50%; transform: translateX(-50%);
  width: 28px; height: 3px; border-radius: 0 0 3px 3px;
  background: linear-gradient(90deg, #2b83f0, #1557b0);
}
body.m3 .tabbar a:active { transform: scale(.94); }
body.m3 .tabbar a .ic { transition: transform .18s ease; }
body.m3 .tabbar a.on .ic { transform: translateY(-1px); }

/* ---------- 卡片：大圆角 + 层次；小节标题品牌竖条锚点 ---------- */
body.m3 .card { border-radius: var(--r4); border: 1px solid var(--n200); box-shadow: var(--sh1); }
body.m3 .content .card > h3 { position: relative; padding-left: 12px; color: var(--n800); }
body.m3 .content .card > h3::before {
  content: ""; position: absolute; left: 0; top: 50%; transform: translateY(-50%);
  width: 4px; height: 15px; border-radius: 2px;
  background: linear-gradient(180deg, #2b83f0, #1557b0);
}

/* ---------- 列表 item：细边框 + 按压反馈 ---------- */
body.m3 .item { border-radius: var(--r4); border: 1px solid var(--n200); box-shadow: var(--sh1); }
body.m3 .item:active { background: var(--n25); transform: scale(.995); }

/* ---------- 表单：柔和底 + 大圆角 ---------- */
body.m3 input, body.m3 select, body.m3 textarea { border-radius: var(--r3); min-height: 46px; background: var(--n50); }
body.m3 input:focus, body.m3 select:focus, body.m3 textarea:focus { background: #fff; }
body.m3 .form-item label { font-weight: 500; color: var(--n600); }
body.m3 .photo-btn { border: 1.5px dashed var(--n300); border-radius: var(--r3); background: var(--n50); }
/* R108：文件上传统一为虚线选择钮（原生 Choose File 太糙） */
body.m3 .upbtn {
  display: flex; align-items: center; justify-content: center; gap: 6px;
  border: 1.5px dashed var(--n300); border-radius: var(--r3); background: var(--n50);
  padding: 14px; color: var(--n500); font-size: 13px; cursor: pointer; transition: var(--t1);
}
body.m3 .upbtn:active { background: var(--b50); border-color: var(--b300); color: var(--b600); }

/* ---------- 按钮：大圆角 + 按压缩放 ---------- */
body.m3 .btn { border-radius: var(--r3); min-height: 48px; }
body.m3 .btn:active:not(:disabled) { transform: scale(.985); }
body.m3 .btn.sm { min-height: 0; }

/* ---------- 底部弹层：拖手 grabber + 更大圆角 ---------- */
body.m3 .sheet { border-radius: 20px 20px 0 0; padding-top: 28px; }
body.m3 .sheet::before {
  content: ""; position: absolute; top: 9px; left: 50%; transform: translateX(-50%);
  width: 38px; height: 4.5px; border-radius: 3px; background: var(--n300);
}

/* ---------- 分段选择器 / 告警条：语义化 ---------- */
body.m3 .seg { background: var(--n100); border-radius: var(--r3); }
body.m3 .warn-bar { background: var(--orange-bg); border: 1px solid var(--orange-bd); color: var(--orange-tx); border-radius: var(--r3); }

/* ---------- Toast：毛玻璃 pill + 滑入淡出 ---------- */
.v3toast {
  position: fixed; top: calc(22px + env(safe-area-inset-top)); left: 50%; transform: translateX(-50%);
  background: rgba(16,24,40,.92); color: #fff; padding: 11px 20px; border-radius: 999px;
  z-index: 10000; font-size: 14px; max-width: 86vw; text-align: center; line-height: 1.5;
  box-shadow: var(--sh4); backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px);
  animation: v3ToastIn .28s cubic-bezier(.32,.72,.35,1);
}
.v3toast.err { background: rgba(180,35,24,.94); }
.v3toast.ok { background: rgba(6,118,71,.94); }
.v3toast.out { opacity: 0; transform: translateX(-50%) translateY(-10px); transition: all .26s ease; }
@keyframes v3ToastIn {
  from { opacity: 0; transform: translateX(-50%) translateY(-14px); }
  to { opacity: 1; transform: translateX(-50%) translateY(0); }
}

/* ---------- 看板：hero 光斑 + KPI 按压 ---------- */
body.m3 .card.hero { position: relative; overflow: hidden; }
body.m3 .card.hero::after {
  content: ""; position: absolute; top: -70px; right: -50px; width: 210px; height: 210px;
  border-radius: 50%; background: radial-gradient(circle, rgba(255,255,255,.20), transparent 70%);
  pointer-events: none;
}
body.m3 .kpi {
  flex: 1 1 40%; min-width: 0; box-sizing: border-box; /* 2×2 等宽（basis 40% 保证换行成两列） */
  background: #fff; border: 1px solid var(--n200); border-radius: var(--r3);
  padding: 12px 14px; box-shadow: var(--sh1); transition: var(--t1);
}
body.m3 .kpi:active { transform: scale(.97); }
body.m3 .kpi-l { font-size: 12px; color: var(--n400); }
body.m3 .kpi-v { font-size: clamp(16px, 4.8vw, 20px); font-weight: 700; margin-top: 4px; letter-spacing: -.01em; white-space: nowrap; font-variant-numeric: tabular-nums; }
body.m3 .kpi-s { font-size: 11px; color: var(--n400); margin-top: 3px; }

/* ---------- 登录页：品牌字标 + 悬浮输入 ---------- */
body.m3 #login h1 {
  background: linear-gradient(135deg, #2b83f0, #0f4691);
  -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent;
  font-size: 26px; letter-spacing: .04em;
}
body.m3 #login > div { box-shadow: none !important; border: none !important; animation: none !important; } /* 覆盖旧版 #login>div 白框规则（R108 起登录页走纯净品牌风） */
body.m3 #login input { border-radius: var(--r3); min-height: 48px; background: #fff; box-shadow: var(--sh1); }
body.m3 #login .btn { border-radius: var(--r3); min-height: 50px; font-size: 16px; box-shadow: 0 6px 16px -6px rgba(21,87,176,.5); }

/* ---------- 移动端隐藏滚动条（内容区） ---------- */
body.m3 .content::-webkit-scrollbar, body.m3 .sheet::-webkit-scrollbar { display: none; }