/* ============================================================
   玻璃底座（Glass Base）· 覆盖层
   白背景 + 蓝色调：页面底色是白的，蓝色靠卡片边、表头、导航、
   激活态、主按钮来承担；橙色只留给「提示/催办」这类重点。
   只改视觉与交互，不改任何业务逻辑与类名语义
   ============================================================ */

:root {
  /* 背景：白，只在边缘留一点点蓝的呼吸感 */
  --sky-1: #ffffff;
  --sky-2: #f8fbff;
  --sky-3: #eef6ff;
  /* 玻璃：白玻璃，靠蓝边和蓝调子区分层次 */
  --glass: rgba(255, 255, 255, .78);
  --glass-strong: rgba(255, 255, 255, .94);
  --glass-soft: rgba(255, 255, 255, .56);
  --glass-brd: rgba(178, 210, 246, .95);
  --glass-brd-soft: rgba(203, 226, 250, .9);
  --glass-hi: inset 0 1px 0 rgba(255, 255, 255, 1);
  /* 阴影：小而柔，不割裂 */
  --glass-shadow: 0 14px 32px -24px rgba(23, 62, 116, .3), 0 4px 12px -10px rgba(23, 62, 116, .1);
  --glass-shadow-sm: 0 8px 18px -14px rgba(23, 62, 116, .28);
  --blur: 20px;
  /* 文字 */
  --text: #10203a;
  --text2: #4f637b;
  --text3: #8595a9;
  --line: rgba(214, 231, 250, .9);
  /* 蓝色：主色，绝大多数强调都走它 */
  --blue: #2f7bff;
  --blue-2: #5fa8ff;
  --blue-deep: #1b5ecb;
  --blue-soft: rgba(47, 123, 255, .1);
  --blue-brd: rgba(47, 123, 255, .22);
  --blue-wash: rgba(231, 243, 255, .92);
  /* 橙色：只用于提示 / 催办 */
  --acc: #ff7a2f;
  --acc-2: #ffa14d;
  --acc-soft: rgba(255, 122, 47, .12);
  --pri: #2f7bff;
  --radius: 24px;
}

/* ---------------- 背景：白底 + 极淡蓝光 ---------------- */
html, body { background: #fff; }
body {
  font-family: "Segoe UI Variable Display", "Bahnschrift", "Sora", "Outfit", -apple-system,
    "PingFang SC", "HarmonyOS Sans SC", "Microsoft YaHei", sans-serif;
  color: var(--text);
  letter-spacing: .01em;
  -webkit-font-smoothing: antialiased;
  font-feature-settings: "tnum" 1;
}

.bg-stage {
  position: fixed; inset: 0; z-index: 0; overflow: hidden; pointer-events: none;
  background:
    radial-gradient(58vw 40vh at 2% -12%, rgba(120, 178, 255, .26) 0%, rgba(120, 178, 255, 0) 66%),
    radial-gradient(50vw 36vh at 100% -6%, rgba(150, 200, 255, .2) 0%, rgba(150, 200, 255, 0) 62%),
    radial-gradient(70vw 44vh at 50% 112%, rgba(160, 205, 255, .16) 0%, rgba(160, 205, 255, 0) 68%),
    linear-gradient(180deg, #ffffff 0%, #fbfdff 52%, #f4faff 100%);
}
.blob { position: absolute; border-radius: 50%; filter: blur(72px); will-change: transform; }
.blob.b1 {
  width: 54vw; height: 54vw; left: -14vw; top: -22vw; opacity: .5;
  background: radial-gradient(circle at 40% 40%, rgba(96, 170, 255, .3) 0%, rgba(96, 170, 255, .1) 46%, rgba(96, 170, 255, 0) 70%);
  animation: blobDrift 26s ease-in-out infinite alternate;
}
.blob.b2 {
  width: 46vw; height: 46vw; left: 32vw; top: 2vh; opacity: .38;
  background: radial-gradient(circle at 50% 50%, rgba(150, 205, 255, .28) 0%, rgba(180, 225, 255, .12) 48%, rgba(255, 255, 255, 0) 72%);
  animation: blobDrift 32s ease-in-out infinite alternate-reverse;
}
.blob.b3 {
  width: 70vw; height: 46vw; left: 6vw; bottom: -24vw; opacity: .34;
  background: radial-gradient(circle at 50% 50%, rgba(120, 190, 255, .22) 0%, rgba(210, 235, 255, .12) 55%, rgba(255, 255, 255, 0) 78%);
}
@keyframes blobDrift {
  from { transform: translate3d(0, 0, 0) scale(1); }
  to   { transform: translate3d(4vw, 3vh, 0) scale(1.08); }
}
/* 两道光弧：只做淡蓝描边，不抢主体 */
.arc { position: absolute; border-radius: 50%; border: 1px solid rgba(180, 212, 255, .5); }
.a1 {
  width: 130vw; height: 74vw; left: -34vw; top: -34vw; transform: rotate(-9deg);
  box-shadow: 0 -40px 90px -40px rgba(255, 255, 255, .9);
  border-color: rgba(186, 216, 255, .55);
}
.a2 {
  width: 96vw; height: 56vw; right: -30vw; bottom: -26vw; transform: rotate(6deg);
  box-shadow: 0 -30px 70px -34px rgba(255, 255, 255, .8);
  border-color: rgba(196, 224, 255, .45);
}
.veil {
  position: absolute; inset: 0;
  background: linear-gradient(180deg, rgba(255, 255, 255, .5) 0%, rgba(255, 255, 255, .62) 55%, rgba(255, 255, 255, .72) 100%);
}

/* ---------------- 布局骨架 ---------------- */
.app {
  position: relative; z-index: 1;
  display: flex; gap: 20px; padding: 20px 24px 26px; min-height: 100vh; max-width: 1920px; margin: 0 auto;
}
.sidebar {
  width: 216px; flex: none; position: sticky; top: 20px; height: calc(100vh - 40px);
  display: flex; flex-direction: column; overflow: hidden;
  background: linear-gradient(160deg, rgba(247, 252, 255, .96), rgba(226, 241, 255, .9));
  backdrop-filter: blur(var(--blur)) saturate(160%);
  -webkit-backdrop-filter: blur(var(--blur)) saturate(160%);
  border: 1px solid var(--glass-brd); border-radius: var(--radius);
  box-shadow: var(--glass-shadow), var(--glass-hi);
  color: var(--text);
}
.main { flex: 1; min-width: 0; display: flex; flex-direction: column; }

/* ---------------- 品牌 ---------------- */
.brand { display: grid; place-items: center; padding: 18px; border-bottom: 1px solid var(--glass-brd-soft); }
.brand-logo { display: block; width: min(174px, 100%); height: auto; border-radius: 4px; }
.brand b {
  display: block; font-size: 16px; font-weight: 700; letter-spacing: -.02em; color: #10243d;
}
.brand span {
  display: block; font-size: 11.5px; margin-top: 3px;
  color: #7d8ea6; letter-spacing: .14em; text-transform: uppercase;
}

/* ---------------- 导航 + 液态高亮 ---------------- */
.nav { position: relative; padding: 12px 12px 16px; flex: 1; overflow-y: auto; }
.nav-liquid {
  position: absolute; left: 12px; right: 12px; top: 0; height: 42px; z-index: 0;
  border-radius: 14px; opacity: 0;
  background: linear-gradient(120deg, rgba(47, 123, 255, .24), rgba(47, 123, 255, .09));
  box-shadow: inset 0 0 0 1px rgba(47, 123, 255, .2), 0 8px 18px -14px rgba(47, 123, 255, .5);
  transition: transform .52s cubic-bezier(.3, 1.5, .52, 1), height .42s cubic-bezier(.3, 1.5, .52, 1),
              opacity .2s ease;
  pointer-events: none;
}
.nav-liquid::after {
  content: ''; position: absolute; right: 14px; top: 50%; width: 7px; height: 7px; border-radius: 50%;
  transform: translateY(-50%); background: var(--acc);
  box-shadow: 0 0 0 4px rgba(255, 122, 47, .16);
}
.nav a {
  position: relative; z-index: 1;
  display: flex; align-items: center; gap: 10px; padding: 11px 14px; margin-bottom: 4px;
  border-radius: 14px; color: #46617f; font-size: 13.5px; font-weight: 500;
  background: transparent;
  transition: color .2s ease, transform .2s ease;
}
.nav a:hover, .nav a.active { background: transparent; }
.nav a:hover { color: #123252; transform: translateX(2px); }
.nav a.active { color: #124f9e; font-weight: 700; }
.nav a.active:hover { color: #124f9e; transform: none; }
.nav .nav-dot {
  width: 6px; height: 6px; border-radius: 50%; background: currentColor; opacity: .3; transition: all .3s;
}
.nav a.active .nav-dot { opacity: 0; transform: scale(.4); }

/* ---------------- 用户区 ---------------- */
.me {
  border-top: 1px solid var(--glass-brd-soft); padding: 14px 16px 16px;
  background: rgba(255, 255, 255, .22);
}
.me-name { color: #10243d; font-weight: 700; font-size: 13.5px; }
.me-roles { font-size: 11px; color: #7d8ea6; margin: 3px 0 10px; letter-spacing: .04em; }
.me button {
  width: 100%; padding: 8px; border-radius: 11px; font-size: 12px; cursor: pointer;
  border: 1px solid var(--glass-brd); color: #3a5573;
  background: #fff; transition: all .18s;
}
.me button:hover { background: #fff; color: #124f9e; border-color: var(--blue-brd); box-shadow: var(--glass-shadow-sm); }

/* ---------------- 顶栏（下滑时固定的状态栏） ---------------- */
.topbar {
  position: sticky; top: 0; z-index: 60;
  height: 88px; min-height: 0; margin: 0; background: transparent; border: none;
  display: flex; align-items: flex-end; justify-content: space-between; gap: 16px;
  padding: 0 4px 8px; flex-wrap: nowrap;
  /* 只给不改布局的属性做过渡：高度/外边距一变，滚动位置附近会反复触发吸顶 → 闪 */
  transition: background .12s ease, box-shadow .12s ease;
}
.topbar h1 {
  font-size: clamp(32px, 3.2vw, 46px); line-height: 1.04; font-weight: 700;
  letter-spacing: -.035em; color: #0c1e33; white-space: nowrap;
  min-width: 0; overflow: hidden; text-overflow: ellipsis;
  transition: font-size .1s ease;
}
.topbar.is-stuck {
  align-items: center; height: 58px;
  /* 58 + 30 = 88，和未吸顶时占的高度一致，切状态时下方内容一动不动 */
  padding: 0 14px; margin: 0 -10px 30px;
  border-radius: 0 0 18px 18px;
  background: linear-gradient(180deg, rgba(255, 255, 255, .97), rgba(240, 248, 255, .93));
  backdrop-filter: blur(18px) saturate(170%);
  -webkit-backdrop-filter: blur(18px) saturate(170%);
  box-shadow: 0 10px 24px -22px rgba(20, 58, 112, .38);
  border-bottom: 1px solid var(--glass-brd);
}
.topbar.is-stuck h1 { font-size: 22px; letter-spacing: -.02em; }
.topbar.is-stuck .tb-date { font-size: 11.5px; opacity: .8; }
.topbar.is-stuck .tb-save { font-size: 11px; padding: 5px 10px; }
.tb-right { display: flex; align-items: center; gap: 12px; padding-bottom: 4px; }
.topbar.is-stuck .tb-right { padding-bottom: 0; }
.tb-date { font-size: 12.5px; color: #5d7591; font-weight: 500; transition: font-size .2s; }
.tb-save {
  font-size: 11.5px; color: #1f7a4d; padding: 6px 12px; border-radius: 999px;
  background: rgba(240, 250, 245, .9); border: 1px solid rgba(190, 232, 210, .9);
  box-shadow: var(--glass-hi); display: inline-flex; align-items: center; gap: 6px;
  transition: font-size .2s, padding .2s;
}
.tb-save::before {
  content: ''; width: 7px; height: 7px; border-radius: 50%; background: #2fbf71;
  box-shadow: 0 0 0 3px rgba(47, 191, 113, .16);
}

.view { padding: 0 4px 96px; }

/* ---------------- 玻璃卡片基类 ---------------- */
.panel, .table-box, .table-wrap, .filters, .kpi, .bcol, .bgrp-card, .glass {
  background: linear-gradient(158deg, rgba(255, 255, 255, .93), rgba(244, 250, 255, .88));
  backdrop-filter: blur(var(--blur)) saturate(180%);
  -webkit-backdrop-filter: blur(var(--blur)) saturate(160%);
  border: 1px solid var(--glass-brd);
  border-radius: var(--radius);
  box-shadow: var(--glass-shadow), var(--glass-hi);
}
/* 内部模块再叠一层玻璃 */
.panel-bd, .kpi-inner {
  background: rgba(255, 255, 255, .62);
  border: 1px solid rgba(214, 234, 255, .95);
  border-radius: 18px;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .95);
}

/* 光标跟随：光斑 + 边框提亮 + 轻微 3D 倾斜 */
.tilt { position: relative; transform-style: preserve-3d; transition: transform .18s ease, box-shadow .25s ease; }
.tilt::after {
  content: ''; position: absolute; inset: 0; border-radius: inherit; pointer-events: none;
  background: radial-gradient(220px circle at var(--mx, 50%) var(--my, 0%), rgba(120, 185, 255, .16), rgba(255, 255, 255, 0) 62%);
  opacity: 0; transition: opacity .25s ease;
}
.tilt:hover::after { opacity: 1; }
.tilt:hover { border-color: rgba(160, 205, 255, .9); box-shadow: 0 18px 38px -24px rgba(28, 70, 125, .4), 0 0 0 1px rgba(190, 222, 255, .8), var(--glass-hi); }

/* ---------------- 按钮 ---------------- */
.btn {
  border-radius: 13px; padding: 8px 15px; font-size: 12.5px; font-weight: 500;
  border: 1px solid var(--glass-brd); color: #23405f;
  background: #fff; box-shadow: var(--glass-hi);
  transition: transform .16s cubic-bezier(.3, 1.4, .6, 1), background .18s, box-shadow .18s, border-color .18s;
}
.btn:hover { background: #fff; transform: translateY(-1px); box-shadow: var(--glass-shadow-sm); border-color: rgba(47, 123, 255, .35); color: #124f9e; }
.btn:active { transform: translateY(0) scale(.98); }
.btn-primary {
  background: linear-gradient(135deg, var(--blue) 0%, var(--blue-2) 100%);
  border-color: rgba(255, 255, 255, .45); color: #fff;
  box-shadow: 0 8px 18px -12px rgba(47, 123, 255, .8), inset 0 1px 0 rgba(255, 255, 255, .45);
}
.btn-primary:hover { background: linear-gradient(135deg, #2f8bff, #7dbcff); border-color: #fff; color: #fff; }
/* 橙色只留给提示类动作（催办、同意改期等），别的地方别用 */
.btn-acc {
  background: linear-gradient(135deg, var(--acc) 0%, var(--acc-2) 100%);
  border-color: rgba(255, 255, 255, .45); color: #fff;
  box-shadow: 0 8px 18px -12px rgba(255, 122, 47, .8), inset 0 1px 0 rgba(255, 255, 255, .45);
}
.btn-acc:hover { background: linear-gradient(135deg, #ff8b45, #ffb066); color: #fff; border-color: #fff; }
.btn-danger { color: #c0392b; border-color: rgba(238, 200, 196, .9); background: #fff; }
.btn-danger:hover { background: #fff5f4; border-color: #ffc9c4; color: #b03a12; }
.btn-danger-solid { background: linear-gradient(135deg, #e2493e, #c62828); border-color: rgba(255, 255, 255, .3); color: #fff; }
.btn-sm { border-radius: 10px; padding: 5px 10px; }

/* 表格操作列：原来的白底规则会把 btn-primary 的橙渐变盖掉，白字压白底看不见，这里补回来 */
.tbl-orders .c-act .btn-sm {
  color: #17518f; font-size: 12px; font-weight: 600; padding: 5px 9px;
  background: rgba(255, 255, 255, .96); border-color: rgba(150, 196, 246, .95);
}
.tbl-orders .c-act .btn-sm:hover { background: #fff; color: #0d447f; border-color: rgba(47, 123, 255, .5); }
.tbl-orders .c-act .btn-sm.btn-primary {
  background: linear-gradient(135deg, var(--blue) 0%, var(--blue-2) 100%);
  border-color: rgba(255, 255, 255, .5); color: #fff;
  box-shadow: 0 6px 14px -10px rgba(47, 123, 255, .9), inset 0 1px 0 rgba(255, 255, 255, .45);
}
.tbl-orders .c-act .btn-sm.btn-danger { background: #fff; color: #c0392b; border-color: rgba(238, 200, 196, .9); }
.tbl-orders .c-act .btn-sm.btn-primary:hover,
.tbl-orders .c-act .btn-sm.btn-primary:focus {
  background: linear-gradient(135deg, #2f8bff, #7dbcff); color: #fff; border-color: #fff;
}
/* 窄屏时「分派/流转」两个按钮会撑破 124px 的操作列，收一下内边距 */
@media (max-width: 1240px) {
  .tbl-orders .c-act .btn-sm { padding: 5px 6px; font-size: 11.5px; }
  .tbl-orders .c-act { white-space: nowrap; gap: 4px; }
}

/* ---------------- 输入 ---------------- */
input[type="text"], input[type="date"], input[type="number"], input[type="tel"], select, textarea {
  background: #fff; border: 1px solid rgba(184, 211, 242, .95);
  border-radius: 12px; padding: 9px 12px; font-size: 13px; color: #10203a;
  box-shadow: 0 1px 2px -1px rgba(24, 64, 120, .1), inset 0 1px 0 #fff;
  transition: all .18s;
}
input:hover, select:hover, textarea:hover { border-color: rgba(47, 123, 255, .5); }
input:focus, select:focus, textarea:focus {
  background: #fff; border-color: rgba(47, 123, 255, .6);
  box-shadow: 0 0 0 4px rgba(47, 123, 255, .12), inset 0 1px 0 #fff;
}
input[type="checkbox"] { accent-color: var(--blue); }

/* ---------------- 页面头 ---------------- */
.page-hd { margin-bottom: 18px; align-items: flex-end; }
.page-hd .t { font-size: 19px; font-weight: 700; letter-spacing: -.01em; color: #0e2136; }
.page-hd .s { font-size: 12.5px; color: #64798f; margin-top: 4px; }

/* ---------------- 状态胶囊（水滴筛选） ---------------- */
.tabs { gap: 10px; padding: 4px 0 8px; margin: 0 0 16px; }
.tab-card {
  position: relative; flex: 1 1 88px; min-width: 88px; max-width: 150px;
  padding: 12px 14px 13px; border-radius: 20px; border: 1px solid var(--glass-brd);
  background: rgba(255, 255, 255, .82);
  backdrop-filter: blur(16px) saturate(175%); -webkit-backdrop-filter: blur(16px) saturate(150%);
  box-shadow: inset 0 1px 0 #fff, 0 6px 14px -12px rgba(28, 70, 125, .45);
  color: #10203a; text-align: left;
  transition: transform .34s cubic-bezier(.3, 1.5, .55, 1), background .25s, box-shadow .25s, border-color .25s;
}
.tab-card::before {
  content: ''; position: absolute; left: 14px; top: 11px; width: 8px; height: 8px; border-radius: 50%;
  background: var(--sc, #7d8ea6); box-shadow: 0 0 0 3px color-mix(in srgb, var(--sc, #7d8ea6) 14%, transparent);
}
.tab-card:hover { transform: translateY(-3px); border-color: rgba(47, 123, 255, .3); box-shadow: inset 0 1px 0 #fff, 0 10px 20px -14px rgba(28, 70, 125, .45); }
.tab-card .n {
  font-size: 27px; font-weight: 750; letter-spacing: -.03em; line-height: 1.06; color: #10243d;
  font-variant-numeric: tabular-nums; margin-top: 12px;
}
.tab-card .l { font-size: 11.5px; color: #64798f; margin-top: 1px; white-space: nowrap; }
.tab-card.active {
  /* 选中只用当前环节色填充，不再使用四周描边或外圈阴影。 */
  background: var(--sc, #2f7bff);
  border-color: transparent;
  box-shadow: none;
  transform: none;
}
.tab-card.active .n, .tab-card.active .l { color: #fff; }
.tab-card.active::before { background: rgba(255, 255, 255, .9); box-shadow: none; }
.tab-card.zero { background: rgba(255, 255, 255, .6); box-shadow: inset 0 1px 0 #fff; }
.tab-card.zero .n, .tab-card.zero .l { color: #9bacc0; }
.tab-card.warn::before { background: #e04a3f; }
.tab-card.cancel::before { background: #9aa7b8; }
.tab-card.cancel { background: rgba(255, 255, 255, .6); }
.tab-card.cancel .n, .tab-card.cancel .l { color: #6d7f94; }
/* 已超期：红底白字（原先深色文字压在红底上看不清） */
.tab-card.warn {
  background: linear-gradient(140deg, #e2493e 0%, #c62828 100%);
  border-color: rgba(255, 255, 255, .55);
  box-shadow: 0 10px 20px -14px rgba(226, 73, 62, .8), inset 0 1px 0 rgba(255, 255, 255, .35);
}
.tab-card.warn .n, .tab-card.warn .l { color: #fff; }
.tab-card.warn::before { background: #fff; box-shadow: 0 0 0 3px rgba(255, 255, 255, .32); }
.tab-card.warn:hover { box-shadow: 0 12px 24px -14px rgba(226, 73, 62, .85), inset 0 1px 0 rgba(255, 255, 255, .35); }
/* 超期状态被选中时也遵循“仅填色”的选中规则。 */
.tab-card.warn.active { background: var(--sc, #e2493e); border-color: transparent; box-shadow: none; transform: none; }
.tab-card.warn.active::before { background: rgba(255, 255, 255, .9); box-shadow: none; }
/* 分裂动画：点击时胶囊短暂“拉开” */
.tab-card.is-split { animation: dropSplit .42s cubic-bezier(.3, 1.4, .5, 1); }
@keyframes dropSplit {
  0% { transform: translateY(-3px) scaleX(1); }
  40% { transform: translateY(-5px) scaleX(1.12) scaleY(.94); }
  100% { transform: translateY(-3px) scaleX(1); }
}

/* 水滴展开的子选项 */
.drop-pop {
  position: fixed; z-index: 260; padding: 8px; border-radius: 18px;
  background: rgba(255, 255, 255, .96); backdrop-filter: blur(24px) saturate(170%);
  border: 1px solid var(--glass-brd);
  box-shadow: 0 18px 40px -22px rgba(28, 70, 125, .5), inset 0 1px 0 #fff;
  display: flex; gap: 6px; animation: dropIn .24s cubic-bezier(.3, 1.5, .55, 1);
}
@keyframes dropIn { from { opacity: 0; transform: translateY(-8px) scale(.94); } to { opacity: 1; transform: none; } }
.drop-pop button {
  border: none; background: rgba(244, 250, 255, .9); color: #2b4462; cursor: pointer;
  padding: 8px 14px; border-radius: 13px; font-size: 12.5px; font-weight: 600; white-space: nowrap;
  transition: all .16s;
}
.drop-pop button:hover { background: #fff; color: #124f9e; }
.drop-pop button.on { background: linear-gradient(135deg, var(--blue), var(--blue-2)); color: #fff; box-shadow: 0 8px 16px -10px rgba(47, 123, 255, .8); }

/* ---------------- 筛选条 ---------------- */
.filters { padding: 14px 16px; gap: 10px; margin-bottom: 16px; border-radius: 20px; }
.filters .search { width: 260px; }
.filters select { border-radius: 12px; }

/* ---------------- 订单表格：无分割线，用留白分层 ---------------- */
.table-box { border-radius: var(--radius); overflow: hidden; }
/* overflow:clip 不产生滚动容器，表头才能跟着页面一起吸顶；
   表格内层是行内样式 overflow-x:auto 的 div，它会变成最近的滚动容器、让表头吸不住，
   桌面端放开（固定列宽本来也不需要横向滚动），窄屏仍保留横向滚动 */
.table-box { overflow: clip; }
.table-wrap { overflow: visible; }
@media (min-width: 1200px) {
  .table-box > div[style*="overflow"] { overflow: visible !important; }
}
.tbl-orders { border-collapse: separate; border-spacing: 0; }
.tbl-orders thead th {
  position: sticky; top: 58px; z-index: 4;
}
/* 其它表格（人员、日志、统计明细）表头统一成淡蓝底 + 蓝字 */
.tbl th {
  background: linear-gradient(180deg, rgba(233, 244, 255, .95), rgba(243, 249, 255, .9));
  color: #3c6a9e; border-bottom: 1px solid rgba(199, 224, 250, .9);
}
.tbl-orders th {
  background: linear-gradient(180deg, rgba(233, 244, 255, .95), rgba(243, 249, 255, .9));
  border-bottom: 1px solid rgba(199, 224, 250, .9);
  padding: 13px 10px; font-size: 11.5px; font-weight: 600; color: #3c6a9e; letter-spacing: .04em;
}
.tbl-orders td { border-bottom: none; padding: 12px 10px; }
.tbl-orders tr.row td { background: transparent; }
.tbl-orders tr.row:hover td { background: rgba(47, 123, 255, .05); }
.tbl-orders tr.row { transition: background .18s; }
.tbl-orders tr.row.row-urgent td { background: rgba(255, 122, 47, .07); }
.tbl-orders tr.row.row-urgent:hover td { background: rgba(255, 122, 47, .12); }
/* 状态色块：圆角胶囊，行与行之间靠留白分开 */
.tbl-orders td.c-st { padding: 8px 6px; }
.st-panel {
  border-radius: 16px; min-height: 50px; padding: 9px 12px;
  background: linear-gradient(140deg, var(--sc), color-mix(in srgb, var(--sc) 78%, #fff));
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .32), 0 6px 14px -12px rgba(15, 23, 38, .5);
}
.st-panel .st-name { font-size: 13px; letter-spacing: .02em; }
.st-panel .st-note { border-top-color: rgba(255, 255, 255, .35); }
.c-id .yxy-chip { border-radius: 10px; }
.pager { background: rgba(238, 247, 255, .7); border-top: 1px solid rgba(206, 228, 250, .9); }

/* 订单清单：增加呼吸感，同时收紧字号，保证节点状态与业务标签完整可读。 */
.tbl-orders { min-width: 1380px; }
.tbl-orders th { padding: 14px 11px; font-size: 11px; }
.tbl-orders td { padding: 15px 11px; }
.tbl-orders .c-cust .cust { font-size: 13px; line-height: 1.45; }
.tbl-orders .c-cust .items { font-size: 10.5px; margin-top: 4px; }
.tbl-orders .c-substatus { white-space: nowrap; overflow: visible; }
.tbl-orders .c-substatus .sub-status { max-width: none; font-size: 10px; padding: 3px 5px; letter-spacing: -.08em; }
.tbl-orders .list-biz, .tbl-orders .list-inline-select { font-size: 10.5px; }
.tbl-orders .c-contact, .tbl-orders .c-owner { font-size: 10.5px; }
.tbl-orders .c-act .btn-sm { font-size: 10.5px; padding: 4px 6px; }
.tbl-orders .c-stage-duration { vertical-align: middle; min-width: 112px; }
.stage-time-list { line-height: 1.35; white-space: nowrap; }
.stage-time-list div { display: flex; justify-content: space-between; gap: 6px; }
.stage-time-list span { color: var(--text2); }
.stage-time-list b { color: var(--text); font-weight: 600; }
.production-extra { border: 1px solid rgba(14,165,233,.24); border-left: 3px solid var(--sc); padding: 12px 14px; margin: 12px 0; }
.production-extra-head { display: flex; justify-content: space-between; align-items: center; gap: 14px; }
.production-extra-head b { display: block; font-size: 14px; }
.production-extra-head .tiny { display: block; margin-top: 3px; }
.production-extra-fields { grid-template-columns: minmax(220px, 360px) auto; align-items: end; gap: 12px; margin-top: 10px; }
.production-extra-actions { padding-bottom: 1px; }
.order-form-topline { display: flex; justify-content: space-between; align-items: center; margin: 0 0 10px; min-height: 28px; }
.order-form-topline .chk-line { margin-left: auto; padding: 6px 10px; border: 1px solid rgba(239,68,68,.22); border-radius: 6px; color: #b91c1c; background: #fff7f7; }
.order-switch-row { margin-top: 10px; padding-top: 12px; border-top: 1px solid var(--line); }
.order-switch-row .field { min-height: 62px; }
.order-option-stack { display: flex; flex-direction: column; gap: 12px; margin-top: 12px; }
.order-option { border: 1px solid var(--line); border-radius: 8px; padding: 12px 14px; background: #fff; }
.order-option-head { display: flex; align-items: flex-end; justify-content: space-between; gap: 16px; }
.order-option-head > div { flex: 1 1 360px; }
.order-option-head > div select { width: 100%; }
.order-option-head > .tiny { padding-bottom: 10px; white-space: nowrap; }
.order-option .chk-line { display: inline-flex; align-items: center; min-height: 38px; font-weight: 600; }
.order-option .order-required-fields { margin-top: 12px; padding-top: 12px; border-top: 1px solid var(--line); }
.stage-time-panel { margin-top: 12px; }
.stage-time-table { min-width: 980px; }
.stage-time-table th, .stage-time-table td { vertical-align: middle; }
.stage-time-cell { display: flex; flex-direction: column; gap: 3px; white-space: nowrap; }
.stage-time-person { color: var(--text2); font-size: 11px; line-height: 1.2; }
.stage-time-cell b { font-size: 12px; font-weight: 600; }
.stage-time-state { display: inline-block; width: fit-content; padding: 2px 5px; border-radius: 4px; font-size: 10px; }
.stage-time-state.ok { color: #15803d; background: #ecfdf3; }
.stage-time-state.active { color: #0369a1; background: #e0f2fe; }
.stage-time-state.over { color: #b91c1c; background: #fef2f2; }
.stage-time-summary { margin-top: 12px; }
.stage-time-summary .num { font-variant-numeric: tabular-nums; white-space: nowrap; }

/* ---------------- KPI ---------------- */
.kpis { gap: 16px; }
.kpi { padding: 18px 20px; border-radius: 22px; }
.kpi .k { font-size: 12px; color: #64798f; letter-spacing: .04em; }
.kpi .v {
  font-size: 38px; font-weight: 750; letter-spacing: -.035em; margin-top: 6px; color: #0c1e33;
  font-variant-numeric: tabular-nums;
}
.kpi .v small { font-size: 13px; font-weight: 500; color: #64798f; letter-spacing: 0; }

/* ---------------- 图表：圆头细柱 + 渐变 ---------------- */
.bar-row { gap: 12px; margin-bottom: 12px; }
.bar-row .l { width: 88px; font-size: 12px; color: #64798f; }
.bar-row .track { height: 9px; border-radius: 999px; background: rgba(234, 244, 255, .95); box-shadow: inset 0 1px 2px rgba(20, 68, 132, .08); overflow: visible; }
.bar-row .fill {
  height: 9px; border-radius: 999px;
  background-image: linear-gradient(90deg, var(--blue-2), var(--blue)) !important;
  background-color: transparent !important;
  box-shadow: 0 2px 10px -2px rgba(47, 123, 255, .5);
  transition: width .6s cubic-bezier(.3, 1.2, .5, 1);
  position: relative;
}
.bar-row .fill::after {
  content: ''; position: absolute; right: -1px; top: 50%; transform: translateY(-50%);
  width: 9px; height: 9px; border-radius: 50%; background: var(--blue);
  box-shadow: 0 0 0 3px rgba(47, 123, 255, .18);
}
.bar-row .val { font-size: 12px; color: #3a5573; font-weight: 600; }

/* ---------------- 待审批条 ---------------- */
.appr-bar {
  background: linear-gradient(120deg, rgba(255, 246, 224, .95), rgba(255, 252, 244, .82));
  border: 1px solid rgba(255, 219, 158, .95);
  border-radius: 18px; padding: 11px 14px;
  box-shadow: var(--glass-shadow-sm), var(--glass-hi);
  backdrop-filter: blur(16px) saturate(150%); -webkit-backdrop-filter: blur(16px) saturate(150%);
  color: #6b4a12;
}
.appr-bar b { color: #8a5309; }
.appr-bar .btn-primary { color: #fff; }
.appr-bar .btn-danger { color: #b03a12; background: #fff; border-color: #ffd9c9; }

/* ---------------- 抽屉 ---------------- */
.drawer-mask { background: rgba(24, 54, 92, .18); backdrop-filter: blur(3px); }
.drawer {
  background: rgba(255, 255, 255, .96);
  backdrop-filter: blur(28px) saturate(170%); -webkit-backdrop-filter: blur(28px) saturate(170%);
  border-left: 1px solid var(--glass-brd);
  box-shadow: -24px 0 60px -34px rgba(24, 64, 120, .45);
}
.drawer-hd { border-bottom: 1px solid var(--glass-brd-soft); }
.drawer-hd .x { border-radius: 50%; width: 30px; height: 30px; background: rgba(246, 251, 255, .95); border: 1px solid var(--glass-brd); }

/* ---------------- 弹窗 ---------------- */
.modal-mask { background: rgba(24, 54, 92, .22); backdrop-filter: blur(6px); }
.modal {
  background: rgba(255, 255, 255, .97);
  backdrop-filter: blur(30px) saturate(170%); -webkit-backdrop-filter: blur(30px) saturate(170%);
  border: 1px solid var(--glass-brd); border-radius: 28px;
  box-shadow: 0 30px 70px -40px rgba(16, 50, 100, .55), inset 0 1px 0 #fff;
}
.modal-hd { font-size: 19px; font-weight: 700; letter-spacing: -.01em; border-bottom: 1px solid var(--glass-brd-soft); }
.modal-ft { border-top: 1px solid var(--glass-brd-soft); background: rgba(247, 252, 255, .7); }
.modal-bd .sub-hd { color: #3a5573; }

/* ---------------- 气泡 / 提示 ---------------- */
.pop {
  background: #fff; backdrop-filter: blur(24px) saturate(170%);
  border: 1px solid var(--glass-brd); border-radius: 18px;
  box-shadow: 0 22px 46px -24px rgba(24, 64, 120, .5), inset 0 1px 0 #fff;
}
.pop::before { background: #fff; border-color: var(--glass-brd); }
.pop-ft .btn { border-radius: 11px; }
.toast {
  border-radius: 16px; font-size: 13px; padding: 12px 18px 12px 15px;
  backdrop-filter: blur(24px) saturate(180%);
  box-shadow: 0 20px 44px -20px rgba(16, 50, 100, .5), inset 0 1px 0 rgba(255, 255, 255, .25);
}
.toast-ok { background: linear-gradient(135deg, rgba(23, 58, 92, .97), rgba(16, 42, 70, .97)); }
.toast-err { background: linear-gradient(135deg, rgba(180, 42, 38, .97), rgba(140, 27, 24, .97)); }
.toast-warn { background: linear-gradient(135deg, rgba(154, 94, 12, .97), rgba(120, 70, 6, .97)); }

/* ---------------- 悬浮提示（data-tip） ---------------- */
.gtip {
  position: fixed; left: 0; top: 0; z-index: 330;
  padding: 6px 10px; border-radius: 9px;
  background: rgba(14, 36, 64, .95); color: #fff;
  font-size: 12px; font-weight: 500; line-height: 1.35; letter-spacing: .1px;
  white-space: nowrap; pointer-events: none;
  box-shadow: 0 12px 26px -14px rgba(8, 28, 56, .65), inset 0 1px 0 rgba(255, 255, 255, .18);
  -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px);
  opacity: 0; transform: translateY(4px) scale(.96);
  transition: opacity .18s ease, transform .3s cubic-bezier(.16, 1, .3, 1);
}
.gtip.show { opacity: 1; transform: translateY(0) scale(1); }
/* 小箭头：默认气泡在上方，箭头朝下；贴顶部翻到下方时箭头朝上 */
.gtip::after {
  content: ''; position: absolute; left: 50%; margin-left: -5px; bottom: -4px;
  width: 9px; height: 9px; border-radius: 2px;
  background: rgba(14, 36, 64, .95); transform: rotate(45deg);
}
.gtip.below::after { bottom: auto; top: -4px; }

/* ---------------- 看板 ---------------- */
.bcol {
  border-radius: 24px; padding: 14px;
  background: linear-gradient(165deg, rgba(238, 248, 255, .8), rgba(198, 227, 255, .6));
}
.bcol-hd { border-bottom: 1px solid var(--glass-brd-soft); }
.kcard {
  background: rgba(247, 252, 255, .78); border: 1px solid rgba(255, 255, 255, .85);
  border-radius: 18px; box-shadow: 0 8px 18px -16px rgba(28, 70, 125, .5), inset 0 1px 0 #fff;
  transition: transform .2s, box-shadow .2s, border-color .2s;
}
.kcard:hover { transform: translateY(-2px); border-color: rgba(47, 123, 255, .28); box-shadow: 0 14px 26px -18px rgba(28, 70, 125, .5); }
.tbl-boardlist { background: transparent; }
.tbl-boardlist .bgrp td { background: rgba(246, 251, 255, .95) !important; }
.tbl-boardlist .bgrp[style] td { background: color-mix(in srgb, var(--sc) 10%, #ffffff) !important; }

/* ---------------- 标签 ---------------- */
.tag { border-radius: 999px; padding: 2px 9px; font-size: 11px; font-weight: 600; backdrop-filter: blur(6px); }
.tag-紧急 { color: #b03a12; background: rgba(255, 122, 47, .12); border: 1px solid rgba(255, 122, 47, .28); }
.tag-返工 { color: #8a5309; background: rgba(255, 190, 60, .14); border: 1px solid rgba(255, 190, 60, .32); }
.tag-暂停 { color: #475467; background: rgba(240, 245, 251, .95); border: 1px solid rgba(222, 236, 252, .95); }
.badge { border-radius: 999px; box-shadow: inset 0 1px 0 rgba(255, 255, 255, .3); }

/* ============================================================
   底部玻璃停靠栏
   ============================================================ */
.dock {
  position: fixed; left: 50%; bottom: 22px; transform: translateX(-50%);
  z-index: 240; display: flex; align-items: flex-end; gap: 6px; padding: 9px 12px;
  border-radius: 26px;
  background: rgba(232, 245, 255, .72);
  backdrop-filter: blur(26px) saturate(190%); -webkit-backdrop-filter: blur(26px) saturate(180%);
  border: 1px solid var(--glass-brd);
  box-shadow: 0 18px 40px -24px rgba(24, 64, 120, .5), inset 0 1px 0 #fff;
  opacity: 0; pointer-events: none;
  transition: opacity .28s ease, transform .28s cubic-bezier(.3, 1.3, .55, 1);
  transform: translate(-50%, 14px) scale(.96);
}
/* 平时收起，鼠标靠近屏幕底部才升起——避免遮住表格里的订单信息 */
.dock.show { opacity: 0; pointer-events: none; transform: translate(-50%, 14px) scale(.96); }
.dock.show.near { opacity: 1; pointer-events: auto; transform: translateX(-50%) scale(1); }
.dock-i {
  position: relative; width: 46px; height: 46px; border: none; cursor: pointer;
  border-radius: 16px; background: rgba(255, 255, 255, .62); color: #35526f;
  display: grid; place-items: center;
  transition: transform .26s cubic-bezier(.3, 1.6, .55, 1), background .2s, box-shadow .2s, width .26s, height .26s;
  box-shadow: inset 0 1px 0 #fff, 0 2px 6px -4px rgba(24, 64, 120, .3);
}
.dock-i svg { width: 21px; height: 21px; }
.dock-i em {
  position: absolute; bottom: calc(100% + 10px); left: 50%; transform: translateX(-50%) translateY(4px);
  font-style: normal; font-size: 11.5px; font-weight: 600; color: #fff; white-space: nowrap;
  padding: 4px 10px; border-radius: 9px; background: rgba(16, 42, 70, .86);
  opacity: 0; pointer-events: none; transition: opacity .18s, transform .18s;
  backdrop-filter: blur(8px);
}
.dock-i:hover { transform: translateY(-10px) scale(1.16); background: #fff; box-shadow: 0 14px 24px -16px rgba(24, 64, 120, .55); }
.dock-i:hover em { opacity: 1; transform: translateX(-50%) translateY(0); }
.dock-i.active { background: linear-gradient(135deg, var(--blue), var(--blue-2)); color: #fff; box-shadow: 0 10px 20px -12px rgba(47, 123, 255, .8); }
.dock-mid { background: linear-gradient(135deg, var(--blue), var(--blue-2)); color: #fff; box-shadow: 0 10px 20px -14px rgba(47, 123, 255, .7); }
.dock-mid:hover { background: linear-gradient(135deg, #2f8bff, #7dbcff); }

/* ============================================================
   命令面板
   ============================================================ */
.cmdk-mask {
  position: fixed; inset: 0; z-index: 300; display: none; align-items: flex-start; justify-content: center;
  padding: 12vh 20px 20px; background: rgba(18, 46, 80, .22); backdrop-filter: blur(8px);
}
.cmdk-mask.show { display: flex; }
.cmdk {
  width: min(680px, 94vw); border-radius: 26px; overflow: hidden;
  background: rgba(255, 255, 255, .97);
  backdrop-filter: blur(34px) saturate(180%); -webkit-backdrop-filter: blur(34px) saturate(180%);
  border: 1px solid var(--glass-brd);
  box-shadow: 0 36px 80px -40px rgba(12, 40, 80, .6), inset 0 1px 0 #fff;
  animation: cmdkIn .26s cubic-bezier(.3, 1.4, .5, 1);
}
@keyframes cmdkIn { from { opacity: 0; transform: translateY(-14px) scale(.97); } to { opacity: 1; transform: none; } }
.cmdk-in { display: flex; align-items: center; gap: 12px; padding: 18px 20px; border-bottom: 1px solid var(--glass-brd-soft); }
.cmdk-in svg { width: 20px; height: 20px; color: #7d8ea6; flex: none; }
.cmdk-in input {
  flex: 1; border: none !important; background: transparent !important; box-shadow: none !important;
  font-size: 16px; padding: 0 !important; color: #12263d;
}
.cmdk-in input:focus { box-shadow: none !important; }
.cmdk-in kbd {
  font-size: 10.5px; color: #7d8ea6; border: 1px solid var(--glass-brd);
  background: rgba(246, 251, 255, .95); padding: 3px 7px; border-radius: 7px; font-family: inherit;
}
.cmdk-list { max-height: 52vh; overflow-y: auto; padding: 8px; }
.cmdk-item {
  display: flex; align-items: center; gap: 12px; padding: 11px 14px; border-radius: 14px; cursor: pointer;
  transition: background .14s;
}
.cmdk-item .ci-t { flex: 1; min-width: 0; }
.cmdk-item .ci-1 { font-size: 13.5px; font-weight: 600; color: #12263d; }
.cmdk-item .ci-2 { font-size: 11.5px; color: #7d8ea6; margin-top: 1px; }
.cmdk-item .ci-k { font-size: 10.5px; color: #9bacc0; }
.cmdk-item.on { background: linear-gradient(135deg, rgba(255, 122, 47, .96), rgba(255, 161, 77, .96)); }
.cmdk-item.on .ci-1, .cmdk-item.on .ci-2, .cmdk-item.on .ci-k { color: #fff; }
.cmdk-empty { padding: 28px; text-align: center; color: #7d8ea6; font-size: 13px; }

/* ============================================================
   模块放大（原位展开 + 底部缩略条）
   ============================================================ */
.zoom-host { transition: opacity .3s, filter .3s, transform .3s; }
body.zooming .zoom-host.is-dim { opacity: .3; filter: blur(2px) saturate(.7); pointer-events: none; }
.zoom-host.is-zoom {
  position: fixed !important; inset: 0; margin: auto !important;
  width: min(1180px, 92vw); height: -moz-fit-content; height: fit-content;
  max-height: 74vh; z-index: 250;
  overflow: auto; border-radius: 30px;
  background: rgba(255, 255, 255, .98) !important;
  backdrop-filter: blur(30px) saturate(180%) !important;
  -webkit-backdrop-filter: blur(30px) saturate(180%) !important;
  box-shadow: 0 40px 90px -40px rgba(12, 40, 80, .55), inset 0 1px 0 #fff !important;
  animation: zoomIn .34s cubic-bezier(.3, 1.35, .5, 1);
}
@keyframes zoomIn { from { transform: scale(.965); } to { transform: none; } }
.zoom-host.is-zoom .panel-hd { padding-left: 22px; padding-right: 22px; }
.zoom-host.is-zoom .panel-bd { background: transparent; border-color: transparent; padding: 18px 22px 22px; }
.zoom-bar {
  position: fixed; left: 50%; bottom: 96px; transform: translateX(-50%);
  z-index: 251; display: none; gap: 8px; padding: 8px; border-radius: 20px;
  background: rgba(255, 255, 255, .88); backdrop-filter: blur(20px) saturate(170%);
  border: 1px solid var(--glass-brd); box-shadow: var(--glass-shadow);
}
body.zooming .zoom-bar { display: flex; }
body.zooming .zoom-bar { bottom: 28px; }
.zoom-chip {
  border: none; cursor: pointer; border-radius: 13px; padding: 9px 14px; font-size: 12px;
  font-weight: 600; color: #3a5573; background: rgba(246, 251, 255, .95); white-space: nowrap;
  transition: all .16s;
}
.zoom-chip:hover { background: #fff; color: #124f9e; }
.zoom-chip.on { background: linear-gradient(135deg, var(--blue), var(--blue-2)); color: #fff; }
.zoom-bar .zoom-chip { max-width: 160px; overflow: hidden; text-overflow: ellipsis; }
.zoom-bar::before {
  content: '正在放大'; font-size: 10.5px; letter-spacing: .12em; color: #7d8ea6;
  align-self: center; padding: 0 8px 0 4px; text-transform: uppercase;
}

/* 数字滚动 */
.roll { display: inline-block; }

/* ============================================================
   层级重排：放大面板 < 抽屉 < 弹窗 < 命令面板 < 气泡 < 提示
   ============================================================ */
.dock { z-index: 70; }
.drawer-mask { z-index: 270; }
.modal-mask { z-index: 290; }
.cmdk-mask { z-index: 300; }
.pop { z-index: 340; }
.toast { z-index: 350; }

/* ============================================================
   模块放大：角落按钮 + 底部缩略条
   ============================================================ */
.zoom-host { position: relative; }
.zoom-btn {
  position: absolute; top: -12px; right: -12px; z-index: 4;
  width: 30px; height: 30px; border-radius: 12px; cursor: pointer;
  border: 1px solid var(--glass-brd); color: #3a5573;
  background: rgba(255, 255, 255, .98);
  display: grid; place-items: center; padding: 0;
  box-shadow: 0 8px 18px -12px rgba(20, 68, 132, .5), inset 0 1px 0 #fff;
  opacity: 0; transform: scale(.9);
  transition: opacity .2s ease, transform .2s cubic-bezier(.3, 1.5, .55, 1), background .18s;
}
.zoom-host:hover > .zoom-btn { opacity: 1; transform: scale(1); }
.zoom-btn:hover { background: #fff; color: var(--blue-deep); border-color: var(--blue-brd); }
.zoom-btn svg { width: 14px; height: 14px; }
.zoom-host.is-zoom > .zoom-btn { opacity: 1; transform: scale(1); background: #fff; color: var(--acc); }

/* 表格分页条里的「放大表格」入口 */
.zoom-link {
  margin-left: 6px; padding: 5px 11px; border-radius: 10px; cursor: pointer;
  display: inline-flex; align-items: center; gap: 5px;
  border: 1px solid var(--glass-brd); background: #fff;
  color: #3a5573; font: inherit; font-size: 11.5px; font-weight: 600;
  transition: all .16s;
}
.zoom-link:hover { background: #fff; color: var(--acc); box-shadow: var(--glass-shadow-sm); }
.zoom-link svg { width: 12px; height: 12px; }

/* 看板列头的小放大图标 */
.zoom-mini {
  margin-left: 6px; flex: none; width: 22px; height: 22px; padding: 0; cursor: pointer;
  border-radius: 8px; display: grid; place-items: center;
  border: 1px solid rgba(255, 255, 255, .7); background: rgba(255, 255, 255, .42);
  color: inherit; opacity: .6; transition: all .16s;
}
.zoom-mini:hover { opacity: 1; background: rgba(255, 255, 255, .95); color: var(--acc); }
.zoom-mini svg { width: 11px; height: 11px; }

/* ============================================================
   水滴筛选：负责人胶囊
   ============================================================ */
.tab-more {
  display: inline-flex; align-items: center; gap: 7px; flex: none;
  padding: 12px 14px; border-radius: 20px; cursor: pointer;
  border: 1px dashed rgba(150, 196, 246, .95);
  background: rgba(255, 255, 255, .9);
  color: #3a5573; font-size: 12px; font-weight: 600; white-space: nowrap;
  backdrop-filter: blur(16px) saturate(150%);
  box-shadow: inset 0 1px 0 #fff;
  transition: transform .3s cubic-bezier(.3, 1.5, .55, 1), background .2s, border-color .2s;
}
.tab-more em { font-style: normal; font-weight: 500; color: #7d8ea6; }
.tab-more b { font-weight: 700; color: #16202e; max-width: 88px; overflow: hidden; text-overflow: ellipsis; }
.tab-more svg { width: 12px; height: 12px; color: #8b9cb2; }
.tab-more:hover { background: #fff; transform: translateY(-3px); border-color: rgba(47, 123, 255, .4); }
.tab-more.on { border-style: solid; border-color: rgba(47, 123, 255, .45); background: rgba(47, 123, 255, .08); }
.tab-more.on b { color: #17518f; }

/* ============================================================
   交期榜：深色实体卡，卡住画面顶部，带蓝色光晕
   ============================================================ */
.rank-card {
  position: relative; display: grid; grid-template-columns: auto minmax(0, 1fr) auto;
  align-items: center; gap: 18px;
  margin: 0 0 18px; padding: 14px 18px 14px 20px; border-radius: 26px;
  background:
    radial-gradient(120% 150% at 4% -50%, rgba(255, 255, 255, .3) 0%, rgba(255, 255, 255, 0) 56%),
    radial-gradient(95% 130% at 100% 130%, rgba(16, 62, 148, .5) 0%, rgba(16, 62, 148, 0) 62%),
    linear-gradient(135deg, #2f7bff 0%, #1f63d8 56%, #1a52b8 100%);
  border: 1px solid rgba(255, 255, 255, .34);
  box-shadow: 0 18px 40px -28px rgba(31, 99, 216, .6), inset 0 1px 0 rgba(255, 255, 255, .3);
  color: #f2f8ff;
}
.rank-card::before {
  content: ''; position: absolute; left: 22px; right: 22px; top: 0; height: 1px;
  background: linear-gradient(90deg, rgba(124, 190, 255, 0), rgba(150, 205, 255, .8), rgba(124, 190, 255, 0));
}
.rk-hd { display: flex; align-items: baseline; gap: 8px; min-width: 0; }
.rk-ey {
  font-size: 10.5px; letter-spacing: .16em; text-transform: uppercase; white-space: nowrap;
  color: #eaf4ff; padding: 3px 8px; border-radius: 8px;
  background: rgba(255, 255, 255, .2); border: 1px solid rgba(255, 255, 255, .4);
}
.rk-t { font-size: 15px; font-weight: 700; letter-spacing: -.01em; color: #fff; white-space: nowrap; }
.rk-sub { font-size: 11px; color: rgba(255, 255, 255, .72); white-space: nowrap; display: none; }
.rk-list { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; min-width: 0; }
.rk-row {
  min-width: 0; display: flex; align-items: center; gap: 8px; overflow: hidden;
  padding: 9px 11px; border-radius: 16px; cursor: pointer; text-align: left;
  border: 1px solid rgba(255, 255, 255, .18);
  background: rgba(255, 255, 255, .13);
  color: #f2f8ff; font: inherit;
  transition: transform .2s cubic-bezier(.3, 1.4, .6, 1), background .2s, border-color .2s;
}
.rk-row:hover { transform: translateY(-2px); background: rgba(255, 255, 255, .22); border-color: rgba(255, 255, 255, .5); }
.rk-no { font-style: normal; font-size: 10.5px; font-weight: 800; color: rgba(255, 255, 255, .62); font-variant-numeric: tabular-nums; flex: none; }
.rk-b { display: flex; flex-direction: column; gap: 1px; min-width: 0; flex: 1 1 auto; }
.rk-cus {
  font-size: 12.5px; font-weight: 700; color: #fff; min-width: 0; line-height: 1.25;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.rk-meta {
  font-style: normal; font-size: 10px; color: rgba(255, 255, 255, .74); letter-spacing: .02em; line-height: 1.3;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.rk-pill {
  margin-left: auto; flex: none; font-size: 11px; font-weight: 700; white-space: nowrap;
  padding: 3px 9px; border-radius: 999px; font-variant-numeric: tabular-nums;
}
.rk-pill.is-over { background: #fff; color: #cf3a2e; border: 1px solid #fff; }
.rk-pill.is-hot { background: #fff; color: #d1640f; border: 1px solid #fff; }
.rk-pill.is-warn { background: rgba(255, 255, 255, .22); color: #fff5d8; border: 1px solid rgba(255, 255, 255, .42); }
.rk-pill.is-ok { background: rgba(255, 255, 255, .2); color: #e2fbef; border: 1px solid rgba(255, 255, 255, .38); }
.rk-pill.is-pause { background: rgba(255, 255, 255, .18); color: #eaf3ff; border: 1px solid rgba(255, 255, 255, .3); }
.rk-x {
  flex: none; width: 26px; height: 26px; border-radius: 50%; cursor: pointer;
  border: 1px solid rgba(255, 255, 255, .28); background: rgba(255, 255, 255, .14);
  color: #eaf3ff; font-size: 15px; line-height: 1; padding: 0;
  display: grid; place-items: center; transition: all .18s;
}
.rk-x:hover { background: rgba(255, 255, 255, .2); color: #fff; }

/* ============================================================
   命令面板分组标题
   ============================================================ */
.cmdk-grp {
  padding: 10px 14px 6px; font-size: 10.5px; letter-spacing: .14em;
  color: #8b9cb2; text-transform: uppercase;
}

/* ---------------- 小屏适配 ---------------- */
@media (max-width: 1200px) {
  .rk-meta { display: none; }
  .rk-sub { display: none; }
  .rk-hd { gap: 6px; }
  .rk-t { font-size: 14px; }
  .rk-row { padding: 8px 10px; }
  .tab-card { flex: 1 1 74px; min-width: 74px; padding: 10px 11px; }
  .tab-card .n { font-size: 23px; }
}
@media (max-width: 1080px) {
  .app { padding: 14px; gap: 14px; }
  .sidebar { width: 190px; }
  .topbar h1 { font-size: 36px; }
  .topbar.is-stuck h1 { font-size: 21px; }
  .dock { bottom: 14px; }
}
@media (max-width: 820px) {
  .app { flex-direction: column; }
  .sidebar { position: static; width: 100%; height: auto; }
  .nav { display: flex; overflow-x: auto; gap: 6px; }
  .nav a { white-space: nowrap; }
  .nav-liquid { display: none; }
  .view { padding-bottom: 120px; }
}

/* ============================================================
   订单详情抽屉 · 简化版
   目标：进来先看到三件事 —— 现在卡在哪一步、什么时候交、下一步谁接
   其余信息按需展开，不做一次性铺满
   ============================================================ */
/* 关键信息三格：交货时间（含倒计时）/ 对接人 / 负责人 */
.key-row { display: grid; grid-template-columns: 1.35fr 1fr 1fr; gap: 10px; margin: 14px 0 10px; }
.key-row .kx {
  background: #fff; border: 1px solid rgba(206, 228, 250, .95);
  border-radius: 16px; padding: 11px 14px; min-width: 0;
}
.key-row .kx .k { font-size: 11.5px; font-weight: 700; color: #6b83a0; }
.key-row .kx .v {
  margin-top: 4px; font-size: 15px; font-weight: 800; color: #0c1e33;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
/* 交货时间：小时大字在上（16~26px），日期小字在下（Round 39） */
.key-row .kx-due .v.kd { display: flex; flex-direction: column; gap: 1px; white-space: normal; }
.key-row .kx-due .kd-t { font-size: 26px; font-weight: 800; line-height: 1.02; letter-spacing: .5px; font-variant-numeric: tabular-nums; }
.key-row .kx-due .kd-d { font-size: 11.5px; font-weight: 600; color: #6b83a0; font-variant-numeric: tabular-nums; }
.key-row .kx .kc { margin-top: 6px; }
.key-row .kx .kc .pill,
.key-row .kx .kc span { font-size: 11.5px; }

/* 更多信息：默认收起的一行胶囊 */
.more-info { margin: 0 0 14px; }
.more-info > summary {
  cursor: pointer; list-style: none; display: inline-flex; align-items: center; gap: 7px;
  padding: 6px 12px; border-radius: 999px; font-size: 12.5px; font-weight: 600; color: #3a5573;
  background: rgba(238, 247, 255, .9); border: 1px solid rgba(200, 226, 251, .95);
  transition: background .16s, border-color .16s, color .16s;
}
.more-info > summary::-webkit-details-marker { display: none; }
.more-info > summary:hover { background: #fff; border-color: rgba(150, 196, 246, .95); color: #17518f; }
.more-info > summary span { font-size: 11px; font-weight: 500; color: #8aa0b8; }
.more-info > summary::after { content: '▾'; font-size: 10px; color: #8aa0b8; }
.more-info[open] > summary::after { content: '▴'; }
.mi-grid {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(132px, 1fr)); gap: 10px 18px;
  margin-top: 10px; padding: 12px 14px; border-radius: 14px;
  background: rgba(245, 250, 255, .92); border: 1px solid rgba(214, 234, 255, .9);
}
.mi-grid > div { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.mi-grid span { font-size: 11px; color: #7d92a9; }
.mi-grid b { font-size: 13px; color: #12293f; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

/* 抽屉里的两行小提示（暂停原因 / 备注） */
.dr-hint {
  font-size: 12px; color: #5d7591; line-height: 1.6; margin: -2px 0 10px;
  padding: 8px 12px; border-radius: 12px; background: rgba(246, 251, 255, .9);
  border: 1px solid rgba(214, 234, 255, .9);
}

/* 操作条：明面上只留 2~3 个，危险操作收进「更多操作」 */
.act-row { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; margin: 4px 0 16px; }
.act-row .btn { border-radius: 11px; }
.more-act { position: relative; }
.more-act > summary {
  list-style: none; cursor: pointer; display: inline-flex; align-items: center; gap: 6px;
  height: 34px; padding: 0 14px; border-radius: 11px; font-size: 13px; font-weight: 600; color: #3a5573;
  background: #fff; border: 1px solid rgba(206, 228, 250, .95);
  transition: color .16s, border-color .16s, background .16s;
}
.more-act > summary::-webkit-details-marker { display: none; }
.more-act > summary:hover { color: #17518f; border-color: rgba(150, 196, 246, .95); }
.more-act > summary::after { content: '▾'; font-size: 10px; color: #8aa0b8; }
.more-act[open] > summary { color: #17518f; border-color: rgba(150, 196, 246, .95); background: rgba(246, 251, 255, .98); }
.ma-list {
  position: absolute; top: calc(100% + 6px); left: 0; z-index: 30;
  min-width: 196px; padding: 6px; border-radius: 14px;
  background: #fff; border: 1px solid rgba(206, 228, 250, .95);
  box-shadow: 0 22px 44px -24px rgba(20, 58, 112, .5), inset 0 1px 0 #fff;
  display: flex; flex-direction: column; gap: 2px;
}
.ma-list .btn {
  justify-content: flex-start; width: 100%; text-align: left;
  border: 0; background: transparent; box-shadow: none;
  padding: 9px 10px; border-radius: 9px; font-size: 12.5px; font-weight: 600;
}
.ma-list .btn:hover { background: rgba(238, 247, 255, .95); }
.ma-list .btn-danger { color: #b4282b; }
.ma-list .btn-danger:hover { background: rgba(255, 240, 240, .95); }

/* 沟通与记录：三个可折叠条目，默认全收起，只留标题和条数 */
.rec-panel { padding: 0; overflow: hidden; }
.rec-panel .panel-hd { padding: 12px 16px; }
.rec-fold { border-top: 1px solid rgba(214, 234, 255, .9); }
.rec-fold > summary {
  list-style: none; cursor: pointer; display: flex; align-items: center; gap: 8px;
  padding: 13px 16px; font-size: 13px; font-weight: 700; color: #1b3a5c;
  transition: background .16s;
}
.rec-fold > summary::-webkit-details-marker { display: none; }
.rec-fold > summary:hover { background: rgba(246, 251, 255, .9); }
.rec-fold > summary em {
  font-style: normal; font-size: 11.5px; font-weight: 600; color: #7d92a9;
  margin-right: auto;
}
.rec-fold > summary::after { content: '展开'; font-size: 11.5px; font-weight: 600; color: #17518f; }
.rec-fold[open] > summary::after { content: '收起'; }
.rec-fold[open] > summary { background: rgba(246, 251, 255, .9); }
.rec-fold .rf-bd { padding: 0 16px 14px; }
.rec-fold .rf-bd .empty { padding: 8px 0; }

@media (max-width: 760px) {
  .key-row { grid-template-columns: 1fr 1fr; }
  .key-row .kx-due { grid-column: 1 / -1; }
}

/* 暗色主题覆盖玻璃层，确保页面所有主要区域同步变暗。 */
:root[data-theme="dark"] html,
:root[data-theme="dark"] body { background: #0f141c !important; color: #e8eef7; }
:root[data-theme="dark"] .bg-stage { background: #0f141c !important; opacity: .45; }
:root[data-theme="dark"] .sidebar { background: #0a1018 !important; color: #c7d1df; }
:root[data-theme="dark"] .topbar,
:root[data-theme="dark"] .view,
:root[data-theme="dark"] .panel,
:root[data-theme="dark"] .table-box,
:root[data-theme="dark"] .table-wrap,
:root[data-theme="dark"] .task-card,
:root[data-theme="dark"] .drawer,
:root[data-theme="dark"] .modal,
:root[data-theme="dark"] .kpi,
:root[data-theme="dark"] .business-fold,
:root[data-theme="dark"] .detail-flow,
:root[data-theme="dark"] .flow-fold,
:root[data-theme="dark"] .flow-fold .flow-box { background: #18212c !important; color: #e8eef7; }
:root[data-theme="dark"] .topbar h1,
:root[data-theme="dark"] .page-hd .t,
:root[data-theme="dark"] .tbl th,
:root[data-theme="dark"] .tbl td,
:root[data-theme="dark"] .info-item .v { color: #e8eef7; }
:root[data-theme="dark"] .tbl th,
:root[data-theme="dark"] .tbl-orders th,
:root[data-theme="dark"] .pager,
:root[data-theme="dark"] .flow-row:nth-child(odd),
:root[data-theme="dark"] .assign-row:hover { background: #202b38 !important; }
:root[data-theme="dark"] .btn,
:root[data-theme="dark"] .board-stage-nav button { background: #18212c !important; color: #e8eef7; border-color: #3a4a5d; }
:root[data-theme="dark"] .btn-primary,
:root[data-theme="dark"] .btn-primary:hover,
:root[data-theme="dark"] .board-stage-nav button.active { background: #2f6bff !important; color: #fff; border-color: #2f6bff; }
:root[data-theme="dark"] input[type="text"],
:root[data-theme="dark"] input[type="date"],
:root[data-theme="dark"] input[type="number"],
:root[data-theme="dark"] input[type="tel"],
:root[data-theme="dark"] select,
:root[data-theme="dark"] textarea { background: #121a24 !important; color: #e8eef7; border-color: #3a4a5d; }
:root[data-theme="dark"] .nav a { color: #b5c0cf; }
:root[data-theme="dark"] .nav a.active { color: #fff; }
:root[data-theme="dark"] .me-name { color: #e8eef7; }
:root[data-theme="dark"] .me button { background: transparent; color: #c7d1df; }