* { box-sizing: border-box; margin: 0; padding: 0; }
body { font-family: -apple-system, "Segoe UI", "Microsoft YaHei", sans-serif; background: #f4f6fa; color: #1f2d3d; font-size: 14px; }
a { text-decoration: none; color: inherit; }
.layout { display: flex; min-height: 100vh; }
.sidebar { width: 230px; background: #1f2a44; color: #cdd6e6; display: flex; flex-direction: column; position: sticky; top: 0; align-self: flex-start; height: 100vh; overflow-y: auto; z-index: 10; }
.brand { display: flex; align-items: center; gap: 12px; padding: 20px 18px; border-bottom: 1px solid #2c3a5a; }
.logo { width: 40px; height: 40px; border-radius: 10px; background: transparent; color: #fff; display: flex; align-items: center; justify-content: center; font-size: 20px; font-weight: 700; overflow: hidden; flex: 0 0 40px; }
.logo img { width: 100%; height: 100%; object-fit: contain; border-radius: 10px; display: block; flex: none; }
.b-name { font-size: 16px; font-weight: 700; color: #fff; }
.b-sub { font-size: 11px; color: #8aa0c8; }
.nav { padding: 14px 10px; flex: 1; }
.nav-group { font-size: 11px; font-weight: 700; color: #6f82a6; text-transform: uppercase; letter-spacing: .08em; padding: 16px 14px 6px; margin-top: 4px; }
.nav-placeholder { display: block; padding: 10px 14px; color: #5a6b85; font-size: 13px; font-style: italic; }
.nav a { display: flex; align-items: center; gap: 10px; padding: 11px 14px; border-radius: 8px; color: #b9c4dc; margin-bottom: 4px; transition: .15s; }
.nav a:hover { background: #2a3a5c; color: #fff; }
.nav a.active { background: #3b82f6; color: #fff; }
.nav .ico { width: 20px; text-align: center; }
/* 供应商品质管理：鼠标悬停时向右展开的子菜单 */
.nav-item.has-sub { position: relative; }
.nav-item.has-sub > a,
.nav-item.has-sub > .sub-trigger { position: relative; }
.nav-item.has-sub > .sub-trigger {
  display: flex; align-items: center; gap: 10px; padding: 11px 14px; border-radius: 8px; color: #b9c4dc; margin-bottom: 4px; transition: .15s; cursor: default;
}
.nav-item.has-sub > .sub-trigger:hover { background: #2a3a5c; color: #fff; }
.nav-item.has-sub > a::after,
.nav-item.has-sub > .sub-trigger::after {
  content: "▸";
  position: absolute;
  right: 12px;
  top: 50%;
  transform: translateY(-50%);
  font-size: 10px;
  opacity: .65;
  transition: transform .15s;
}
.nav-item.has-sub.open > a::after,
.nav-item.has-sub.open > .sub-trigger::after { transform: translateY(-50%) rotate(90deg); }
.nav-flyout {
  position: fixed;
  min-width: 196px;
  background: #243352;
  border: 1px solid #35466c;
  border-radius: 10px;
  box-shadow: 0 14px 34px rgba(0,0,0,.38);
  padding: 6px;
  display: flex;
  flex-direction: column;
  visibility: hidden;
  opacity: 0;
  pointer-events: none;
  transform: translateX(-6px);
  transition: opacity .15s, transform .15s;
  z-index: 1000;
}
.nav-item.has-sub.open .nav-flyout { visibility: visible; opacity: 1; pointer-events: auto; transform: translateX(0); }
.nav-flyout a { padding: 9px 12px; font-size: 13px; margin-bottom: 2px; color: #b9c4dc; }
.nav-flyout a:last-child { margin-bottom: 0; }
.nav-flyout a:hover { background: #2a3a5c; color: #fff; }
.nav-flyout a.active { background: #3b82f6; color: #fff; }
.badge { margin-left: auto; background: #ef4444; color: #fff; border-radius: 20px; font-size: 11px; padding: 1px 7px; font-weight: 700; }
.side-foot { padding: 14px 18px; font-size: 11px; color: #6f82a6; border-top: 1px solid #2c3a5a; }
.main { flex: 1; display: flex; flex-direction: column; }
.topbar { height: 60px; background: #fff; border-bottom: 1px solid #e6eaf0; display: flex; align-items: center; justify-content: space-between; padding: 0 24px; }
.topbar .title { font-size: 18px; font-weight: 700; }
.topbar .user { position: relative; color: #5a6b85; display: flex; align-items: center; }
.user-menu { position: relative; }
.user-trigger { display: flex; align-items: center; gap: 6px; background: #eef2f8; border: none; border-radius: 8px; padding: 7px 12px; font-size: 13px; color: #344563; cursor: pointer; font-family: inherit; }
.user-trigger:hover { background: #e2e8f2; }
.caret { font-size: 10px; color: #8a97ad; }
.user-dropdown { position: absolute; right: 0; top: calc(100% + 8px); min-width: 184px; background: #fff; border: 1px solid #e6eaf0; border-radius: 10px; box-shadow: 0 12px 32px rgba(20,40,80,.14); padding: 6px; opacity: 0; visibility: hidden; transform: translateY(-6px); transition: .15s; z-index: 40; }
.user-menu:hover .user-dropdown { opacity: 1; visibility: visible; transform: translateY(0); }
.ud-head { display: flex; align-items: center; justify-content: space-between; gap: 8px; padding: 8px 12px 10px; border-bottom: 1px solid #eef1f6; margin-bottom: 4px; font-weight: 600; color: #243b5e; }
.ud-role { font-size: 11px; background: #eaf2fe; color: #2563eb; padding: 1px 7px; border-radius: 20px; font-weight: 600; }
.user-dropdown a { display: flex; align-items: center; gap: 10px; padding: 9px 12px; border-radius: 8px; color: #344563; font-size: 13px; }
.user-dropdown a:hover { background: #f4f6fa; color: #1f2d3d; }
.user-dropdown a.active { background: #3b82f6; color: #fff; }
.user-dropdown a .ico { width: 20px; text-align: center; }
.user-dropdown a .badge { margin-left: auto; }
.content { padding: 24px; }
.btn-mini { padding: 5px 10px; background: #eef2f8; border-radius: 6px; font-size: 12px; }
.btn-mini:hover { background: #e2e8f2; }

.alert { padding: 11px 14px; border-radius: 8px; margin-bottom: 16px; font-size: 13px; }
.alert-success { background: #e7f7ee; color: #1a7f43; border: 1px solid #b7e6c8; }
.alert-error { background: #fdecec; color: #c0392b; border: 1px solid #f5c2c2; }
.alert-info { background: #eaf2fe; color: #2563eb; border: 1px solid #c5dcfb; }

.cards { display: grid; grid-template-columns: repeat(auto-fit, minmax(190px,1fr)); gap: 16px; margin-bottom: 22px; }
.card { background: #fff; border-radius: 12px; padding: 18px; box-shadow: 0 1px 3px rgba(20,40,80,.06); border: 1px solid #eef1f6; }
.card .k { font-size: 12px; color: #8a97ad; margin-bottom: 8px; }
.card .v { font-size: 28px; font-weight: 800; color: #243b5e; }
.card .v small { font-size: 13px; font-weight: 600; color: #8a97ad; }

.grid-2 { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; margin-bottom: 22px; }
@media(max-width:900px){ .grid-2 { grid-template-columns: 1fr; } }
.panel { background: #fff; border-radius: 12px; padding: 18px; box-shadow: 0 1px 3px rgba(20,40,80,.06); border: 1px solid #eef1f6; }
.panel h3 { font-size: 15px; margin-bottom: 14px; color: #243b5e; }

table { width: 100%; border-collapse: collapse; font-size: 13px; }
th, td { padding: 9px 10px; text-align: left; border-bottom: 1px solid #eef1f6; }
th { color: #7a88a0; font-weight: 600; background: #fafbfd; }
tr:hover td { background: #f8fafc; }
.tag { padding: 2px 9px; border-radius: 20px; font-size: 12px; font-weight: 600; }
.t-A { background: #e7f7ee; color: #1a7f43; }
.t-B { background: #eaf2fe; color: #2563eb; }
.t-C { background: #fff3e0; color: #d97706; }
.t-ok { background: #e7f7ee; color: #1a7f43; }
.t-warn { background: #fff3e0; color: #d97706; }
.t-bad { background: #fdecec; color: #c0392b; }
.t-todo { background: #eef2f8; color: #5a6b85; }
.t-doing { background: #eaf2fe; color: #2563eb; }
.t-done { background: #e7f7ee; color: #1a7f43; }
.t-pause { background: #f3eaff; color: #7c3aed; }
.t-delay { background: #fff7e6; color: #b45309; }

/* 样品管理 */
.ops { white-space: nowrap; vertical-align: middle; }
.ops > * + * { margin-left: 6px; }
.remark-cell { max-width: 180px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

.btn { display: inline-block; padding: 8px 14px; border-radius: 8px; background: #3b82f6; color: #fff; font-size: 13px; border: none; cursor: pointer; }
.btn:hover { background: #2f6fd6; }
.btn-ghost { background: #eef2f8; color: #344563; }
.btn-ghost:hover { background: #e2e8f2; }
.btn-danger { background: #ef4444; }
.btn-sm { padding: 4px 10px; font-size: 12px; border-radius: 6px; }
.actions a { margin-right: 6px; }

.toolbar { display: flex; gap: 10px; flex-wrap: wrap; align-items: center; margin-bottom: 16px; }
.toolbar input, .toolbar select { padding: 8px 10px; border: 1px solid #dde3ec; border-radius: 8px; font-size: 13px; }
.toolbar .spacer { flex: 1; }

.form-row { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }
@media(max-width:700px){ .form-row{ grid-template-columns:1fr; } }
.field { margin-bottom: 14px; }
.field label { display: block; font-size: 12px; color: #6a788f; margin-bottom: 6px; }
.field input, .field select, .field textarea { width: 100%; padding: 9px 11px; border: 1px solid #dde3ec; border-radius: 8px; font-size: 13px; font-family: inherit; }
.field textarea { min-height: 70px; resize: vertical; }
.contact-row { display: grid; grid-template-columns: 1.2fr 1fr 1.2fr 1.6fr auto; gap: 8px; margin-bottom: 8px; align-items: center; }
.contact-row input { width: 100%; padding: 8px 10px; border: 1px solid #dde3ec; border-radius: 8px; font-size: 13px; font-family: inherit; }
@media(max-width:700px){ .contact-row{ grid-template-columns: 1fr 1fr; } }
.modal-mask { position: fixed; inset: 0; background: rgba(20,30,50,.45); display: none; align-items: flex-start; justify-content: center; padding: 40px 16px; overflow: auto; z-index: 50; }
.modal-mask.show { display: flex; }
.modal { background: #fff; border-radius: 14px; width: 100%; max-width: 620px; padding: 22px; box-shadow: 0 20px 60px rgba(0,0,0,.25); }
.modal h3 { margin-bottom: 16px; }
.modal-actions { display: flex; justify-content: flex-end; gap: 10px; margin-top: 8px; }

/* 供应商类别下拉 + 动态新增 */
.cat-row { display: flex; gap: 8px; align-items: center; }
.cat-row select { flex: 1; }
.cat-add { display: flex; gap: 8px; align-items: center; }
.cat-add input { flex: 1; }
/* 供应类别管理弹窗内的列表 */
.cat-tbl { width: 100%; border-collapse: collapse; }
.cat-tbl th, .cat-tbl td { padding: 6px 8px; vertical-align: middle; }
.cat-tbl td input[type=text] { width: 100%; }
.cat-tbl td.actions { display: flex; gap: 6px; }
.muted-note { font-size: 12px; color: #9aa6ba; margin-top: 6px; }
.upload-zone { border: 1px dashed #cdd6e6; border-radius: 8px; padding: 10px; background: #fafbfe; outline: none; transition: border-color .15s, background .15s; }
.upload-zone:focus, .upload-zone:focus-within { border-color: #3b82f6; background: #f0f6ff; }
.upload-zone input[type=file] { display: block; margin-bottom: 6px; }
.up-hint { font-size: 12px; color: #8a96ad; }
.up-hint b { color: #3b82f6; }
.paste-prev { margin-top: 8px; display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.paste-prev img { max-width: 120px; max-height: 120px; border-radius: 6px; border: 1px solid #e2e8f2; }
.paste-thumb { line-height: 0; }
/* 一行一条输入（异常描述）：序号 + 描述 + 不良数量 + 不良率 + 删除 */
.lines-box { display: flex; flex-direction: column; gap: 8px; }
.line-row { display: flex; flex-direction: row; align-items: center; flex-wrap: nowrap; gap: 8px; }
.line-no { flex: 0 0 22px; width: 22px; height: 22px; border-radius: 50%; background: #eef2f8; color: #5b6b85; font-size: 12px; font-weight: 700; display: flex; align-items: center; justify-content: center; flex-shrink: 0; }
.line-row .abn-desc-inp { flex: 1 1 auto; min-width: 0; }
.line-row .abn-qty-inp { flex: 0 0 82px; width: 82px; }
.line-row .line-rate { flex: 0 0 70px; width: 70px; text-align: right; font-size: 13px; color: #5b6b85; white-space: nowrap; }
.line-row .ln-del { flex: 0 0 auto; flex-shrink: 0; padding: 4px 9px; }
[data-theme="dark"] .line-no { background: #1b2330; color: #9aa6ba; }
[data-theme="dark"] .line-rate { color: #9aa6ba; }
.abn-desc-table th, .abn-desc-table td { font-size: 13px; }
.abn-desc-table th { background: #f1f5f9; }
.paste-thumb img { width: 64px; height: 64px; object-fit: cover; border-radius: 6px; border: 1px solid #e2e8f2; display: block; }
.up-note { font-size: 12px; color: #16a34a; }
.qual-row { margin-bottom: 8px; }
.qual-new { margin-top: 8px; }

/* 图片上传预览 */
input[type=file] { padding: 6px; border: 1px solid #dde3ec; border-radius: 8px; font-size: 13px; background: #fff; }
.img-prev { margin-bottom: 8px; }
.img-prev img { max-height: 120px; border: 1px solid #e6eaf0; border-radius: 8px; display: block; }
.img-prev .rm { display: inline-flex; align-items: center; gap: 4px; font-size: 12px; color: #6a788f; margin-top: 4px; }
/* 列表证照缩略图 */
.cert-cell { white-space: nowrap; }
.thumb { width: 46px; height: 46px; object-fit: cover; border-radius: 6px; border: 1px solid #e6eaf0; margin-right: 4px; vertical-align: middle; }
.thumb-zoom { cursor: zoom-in; }
.img-cell { text-align: center; width: 58px; }
.img-stack { display: inline-block; position: relative; line-height: 0; }
.img-more { position: absolute; right: -4px; bottom: -4px; background: #3b5bdb; color: #fff; font-size: 11px; line-height: 1; padding: 2px 5px; border-radius: 10px; border: 2px solid #fff; }
.img-grid { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 8px; }
.img-grid:empty { display: none; }
.img-thumb { position: relative; width: 78px; height: 78px; border: 1px solid #e3e8f0; border-radius: 8px; overflow: hidden; background: #f6f8fb; }
.img-thumb img { width: 100%; height: 100%; object-fit: cover; display: block; }
.img-thumb .img-del { position: absolute; top: 2px; right: 2px; width: 20px; height: 20px; border: none; border-radius: 50%; background: rgba(20,30,50,.65); color: #fff; font-size: 14px; line-height: 18px; cursor: pointer; padding: 0; }
.img-thumb .img-del:hover { background: #e03131; }
.img-drop-sm { min-height: 64px; }
.img-drop-sm > span { font-size: 13px; color: #8a97ad; }
.img-drop.has-items { min-height: 48px; padding: 6px 8px; }
.img-drop.has-items > span { font-size: 12px; color: #7a87a0; }
.img-drop.has-items > span b { color: #3b82f6; font-weight: 600; }
[data-theme="dark"] .img-drop.has-items > span { color: #8b97ad; }
.zoom-gallery { display: grid; grid-template-columns: repeat(auto-fill, 150px); gap: 6px; max-width: 470px; }
.zoom-gallery img { width: 150px; height: 150px; object-fit: cover; border-radius: 4px; display: block; }

/* 图片全屏放大 lightbox */
.lightbox { position: fixed; inset: 0; background: rgba(12,16,24,.88); z-index: 9999; display: none; align-items: center; justify-content: center; flex-direction: column; }
.lightbox.show { display: flex; }
.lb-img { max-width: 92vw; max-height: 86vh; object-fit: contain; border-radius: 8px; box-shadow: 0 12px 48px rgba(0,0,0,.55); background: #fff; cursor: default; }
.lb-close { position: absolute; top: 14px; right: 22px; color: #fff; font-size: 38px; line-height: 1; cursor: pointer; opacity: .82; user-select: none; }
.lb-close:hover { opacity: 1; }
.lb-nav { position: absolute; top: 50%; transform: translateY(-50%); color: #fff; font-size: 42px; cursor: pointer; opacity: .68; user-select: none; padding: 8px 18px; }
.lb-nav:hover { opacity: 1; }
.lb-prev { left: 8px; }
.lb-next { right: 8px; }
.lb-count { position: absolute; bottom: 18px; left: 50%; transform: translateX(-50%); color: #fff; font-size: 14px; opacity: .85; }

/* 样品图片上传（点击/粘贴） */
.img-drop { border: 1px dashed #c5cedb; border-radius: 8px; min-height: 96px; display: flex; align-items: center; justify-content: center; position: relative; cursor: pointer; background: #fff; overflow: hidden; padding: 8px; transition: border-color .15s, background .15s; }
.img-drop:hover, .img-drop:focus { border-color: #7aa2ff; background: #f7faff; outline: none; }
.img-drop .img-prev { max-width: 100%; max-height: 170px; border-radius: 6px; display: block; }
.img-drop > span { color: #8a97ad; font-size: 13px; text-align: center; padding: 0 8px; }
.is-hidden { display: none !important; }

/* 列表悬停放大预览 */
.list-zoom { position: fixed; display: none; z-index: 9999; background: #fff; padding: 6px; border: 1px solid #d4dbe8; border-radius: 8px; box-shadow: 0 10px 34px rgba(20,40,80,.20); pointer-events: none; line-height: 0; }
.list-zoom img { max-width: 320px; max-height: 320px; border-radius: 4px; display: block; }

/* 部门多选 */
.chk-group { display: flex; flex-wrap: wrap; gap: 8px 16px; padding: 6px 0; }
.chk { display: inline-flex; align-items: center; gap: 5px; font-size: 13px; color: #344563; cursor: pointer; }
.chk input { width: auto; }

/* 组织结构树 */
.tree { margin-top: 6px; }
.tree-node { margin-left: 0; }
.tree-node .tree-node { margin-left: 22px; border-left: 2px solid #eef1f6; padding-left: 14px; margin-top: 6px; }
.tree-row { display: flex; align-items: center; gap: 12px; padding: 8px 10px; background: #fafbfd; border: 1px solid #eef1f6; border-radius: 8px; margin-bottom: 6px; }
.tree-name { font-weight: 600; color: #243b5e; }
.tree-meta { font-size: 12px; color: #9aa6ba; }
.tree-acts { margin-left: auto; }

/* 接单明细：是否超期 自动判定徽标 */
.badge-so { display: inline-block; padding: 2px 9px; border-radius: 999px; font-size: 12px; font-weight: 600; line-height: 1.6; white-space: nowrap; }
.badge-so.ok   { background: #e6f7ec; color: #1a7f44; }
.badge-so.late { background: #fdecec; color: #c0392b; }
.badge-so.warn { background: #fff4e0; color: #b9770e; }
.badge-so.muted { background: #eef1f6; color: #9aa6ba; }
.so-prev { padding: 9px 10px; border: 1px dashed #d6deea; border-radius: 8px; font-size: 13px; font-weight: 600; min-height: 18px; }
.so-prev.ok   { background: #e6f7ec; color: #1a7f44; border-color: #bfe6cd; }
.so-prev.late { background: #fdecec; color: #c0392b; border-color: #f3c9c9; }
.so-prev.warn { background: #fff4e0; color: #b9770e; border-color: #f3e0b8; }
.so-prev.muted { background: #fafbfd; color: #9aa6ba; }

/* ============================================================
   Design System Refinement — UI Designer 2026-08-07
   统一品牌色板与阴影/圆角层级；补充按钮、表单、卡片的微交互
   与无障碍 focus 状态；表格 sticky 表头与更清晰的行反馈。
   全部为增量/覆盖式覆盖，不改变布局结构。
   ============================================================ */
:root{
  --brand:#3b82f6;
  --brand-600:#2f6fd6;
  --sh-1:0 1px 3px rgba(16,24,40,.06), 0 1px 2px rgba(16,24,40,.04);
  --sh-2:0 6px 18px rgba(16,24,40,.10);
  --sh-3:0 14px 40px rgba(16,24,40,.16);
  --ring:0 0 0 3px rgba(59,130,246,.20);
  --line:#eef1f6;
}
/* logo 使用图片自带背景，不加蓝渐变 */
.logo{ background:transparent; }
/* 卡片：柔和阴影 + 悬停轻抬升 */
.card{ box-shadow:var(--sh-1); transition:box-shadow .18s ease, transform .18s ease; }
.card:hover{ box-shadow:var(--sh-2); transform:translateY(-2px); }
.cards a.card{ display:block; text-decoration:none; color:inherit; cursor:pointer; }
.cards a.card:hover .k{ color:#4f7cff; }
.cards a.card.active{ border-color:#4f7cff; box-shadow:0 0 0 2px rgba(79,124,255,.25), var(--sh-2); transform:translateY(-2px); }
.cards a.card.active .k{ color:#4f7cff; font-weight:600; }
.panel{ box-shadow:var(--sh-1); }
/* 按钮：悬停抬升 + 阴影，按下回弹，键盘 focus 可见环 */
.btn,.btn-ghost,.btn-danger{ transition:background .15s ease, box-shadow .15s ease, transform .08s ease; }
.btn:hover,.btn-ghost:hover,.btn-danger:hover{ box-shadow:var(--sh-2); transform:translateY(-1px); }
.btn:active,.btn-ghost:active,.btn-danger:active{ transform:translateY(0); }
.btn:focus-visible,.btn-ghost:focus-visible,.btn-danger:focus-visible{ outline:none; box-shadow:var(--ring); }
/* 表单控件：focus 时蓝色边框 + 光环 */
.field input:focus,.field select:focus,.field textarea:focus,
.toolbar input:focus,.toolbar select:focus{
  outline:none; border-color:var(--brand); box-shadow:var(--ring);
}
/* 表格：sticky 表头 + 更清晰的行悬停反馈 */
table th{ position:sticky; top:0; z-index:2; box-shadow:inset 0 -1px 0 var(--line); }
tr:hover td{ background:#f3f7ff; }
/* 列表斑马纹：相隔一行换底色，提升长表可读性（hover/选中态优先级更高，自动覆盖） */
tbody tr:nth-child(even){ background:#f6f9fc; }
tbody td{ transition:background .12s ease; }
/* 导航激活项加重字重，突出当前位置 */
.nav a.active{ font-weight:600; }
/* 状态标签：极细内描边，增强“贴纸”质感 */
.tag,.badge-so{ box-shadow:inset 0 0 0 1px rgba(0,0,0,.025); }

/* ============================================================
   Dark Theme — UI Designer 2026-08-07
   整站深色主题：内容区 / 卡片 / 表单 / 弹窗 / 标签统一深色化，
   侧边栏原为深色故基本沿用；通过 [data-theme="dark"] 覆盖，
   不改动任何 HTML 结构，亮色为默认。
   ============================================================ */
[data-theme="dark"]{ color-scheme:dark; }
[data-theme="dark"] body{ background:#0f141c; color:#e6ebf2; }
[data-theme="dark"] .topbar{ background:#161c26; border-color:#2a3340; }
[data-theme="dark"] .topbar .title{ color:#eef2f8; }
[data-theme="dark"] .topbar .user{ color:#9aa6ba; }
[data-theme="dark"] .user-trigger{ background:#1d2530; color:#cdd6e6; }
[data-theme="dark"] .user-trigger:hover{ background:#243040; }
[data-theme="dark"] .caret{ color:#9aa6ba; }
[data-theme="dark"] .user-dropdown{ background:#202a37; border-color:#2a3340; box-shadow:0 12px 32px rgba(0,0,0,.5); }
[data-theme="dark"] .ud-head{ color:#eef2f8; border-color:#2a3340; }
[data-theme="dark"] .ud-role{ background:rgba(59,130,246,.20); color:#7fb0ff; }
[data-theme="dark"] .user-dropdown a{ color:#cdd6e6; }
[data-theme="dark"] .user-dropdown a:hover{ background:#243040; color:#fff; }
[data-theme="dark"] .user-dropdown a.active{ background:#3b82f6; color:#fff; }
/* 用户菜单二级 */
.ud-sub{ position:relative; }
.ud-sub > .ud-item::after{ content:'‹'; margin-left:auto; font-size:16px; color:#9aa6ba; }
.ud-flyout{ position:absolute; right:100%; left:auto; top:0; min-width:180px; background:#fff; border:1px solid #e6eaf0; border-radius:10px; box-shadow:0 12px 32px rgba(20,40,80,.14); padding:6px; display:block; opacity:0; visibility:hidden; transform:translateX(6px); transition:opacity .18s, transform .18s, visibility 0s linear .35s; pointer-events:none; z-index:50; margin-right:4px; }
/* 隐形桥接条：填补二级菜单与「打印模板」之间的 4px 空隙，鼠标横移不脱钩 */
.ud-flyout::after{ content:''; position:absolute; top:-8px; right:-6px; width:6px; height:calc(100% + 16px); }
.ud-sub:hover .ud-flyout{ opacity:1; visibility:visible; transform:translateX(0); transition-delay:0s; pointer-events:auto; }
[data-theme="dark"] .ud-flyout{ background:#202a37; border-color:#2a3340; box-shadow:0 12px 32px rgba(0,0,0,.5); }
[data-theme="dark"] .ud-sub > .ud-item::after{ color:#7e8aa0; }

[data-theme="dark"] .card,
[data-theme="dark"] .panel{ background:#161c26; border-color:#2a3340; box-shadow:0 1px 3px rgba(0,0,0,.4); }
[data-theme="dark"] .card:hover{ box-shadow:0 6px 18px rgba(0,0,0,.5); }
[data-theme="dark"] .card .k,
[data-theme="dark"] .card .v small{ color:#9aa6ba; }
[data-theme="dark"] .card .v{ color:#eef2f8; }
[data-theme="dark"] .card{ background:#1a2030; border-color:#2a3340; box-shadow:0 1px 3px rgba(0,0,0,.4); }
[data-theme="dark"] .cards a.card.active{ border-color:#5b8cff; box-shadow:0 0 0 2px rgba(91,140,255,.35), 0 6px 18px rgba(0,0,0,.5); }
[data-theme="dark"] .cards a.card.active .k,
[data-theme="dark"] .cards a.card:hover .k{ color:#8fb1ff; }
[data-theme="dark"] .panel h3{ color:#eef2f8; }

[data-theme="dark"] table th,
[data-theme="dark"] table td{ border-color:#2a3340; }
[data-theme="dark"] table th{ color:#9aa6ba; background:#1a212c; }
[data-theme="dark"] tr:hover td{ background:#1b2530; }
[data-theme="dark"] tbody tr:nth-child(even){ background:#161d27; }

[data-theme="dark"] .field label{ color:#9aa6ba; }
[data-theme="dark"] .field input,
[data-theme="dark"] .field select,
[data-theme="dark"] .field textarea,
[data-theme="dark"] .toolbar input,
[data-theme="dark"] .toolbar select,
[data-theme="dark"] input[type=file]{ background:#11161f; border-color:#2a3340; color:#e6ebf2; }
[data-theme="dark"] .field input::placeholder,
[data-theme="dark"] .field textarea::placeholder{ color:#6b7689; }
[data-theme="dark"] .contact-row input{ background:#11161f; border-color:#2a3340; color:#e6ebf2; }
[data-theme="dark"] .cat-tbl input[type=text]{ background:#11161f; border-color:#2a3340; color:#e6ebf2; }

[data-theme="dark"] .btn-ghost,
[data-theme="dark"] .btn-mini{ background:#1d2530; color:#cdd6e6; }
[data-theme="dark"] .btn-ghost:hover,
[data-theme="dark"] .btn-mini:hover{ background:#243040; }

/* 状态标签：暗底 + 亮色字 */
[data-theme="dark"] .tag{ box-shadow:inset 0 0 0 1px rgba(255,255,255,.06); }
[data-theme="dark"] .t-A{ background:rgba(26,127,67,.22); color:#62db9c; }
[data-theme="dark"] .t-B{ background:rgba(37,99,235,.22); color:#7fb0ff; }
[data-theme="dark"] .t-C{ background:rgba(217,119,6,.22); color:#f0b265; }
[data-theme="dark"] .t-ok{ background:rgba(26,127,67,.22); color:#62db9c; }
[data-theme="dark"] .t-warn{ background:rgba(217,119,6,.22); color:#f0b265; }
[data-theme="dark"] .t-bad{ background:rgba(192,57,43,.24); color:#ff8a8a; }
[data-theme="dark"] .t-todo{ background:#2a3340; color:#aeb8c9; }
[data-theme="dark"] .t-doing{ background:rgba(37,99,235,.22); color:#7fb0ff; }
[data-theme="dark"] .t-done{ background:rgba(26,127,67,.22); color:#62db9c; }
[data-theme="dark"] .t-pause{ background:rgba(124,58,237,.22); color:#c4adff; }
[data-theme="dark"] .t-delay{ background:rgba(180,83,9,.22); color:#f0b265; }

[data-theme="dark"] .badge-so.ok{ background:rgba(26,127,67,.22); color:#62db9c; }
[data-theme="dark"] .badge-so.late{ background:rgba(192,57,43,.24); color:#ff8a8a; }
[data-theme="dark"] .badge-so.warn{ background:rgba(217,119,6,.22); color:#f0b265; }
[data-theme="dark"] .badge-so.muted{ background:#2a3340; color:#aeb8c9; }
[data-theme="dark"] .so-prev{ background:#11161f; border-color:#2a3340; }
[data-theme="dark"] .so-prev.ok{ background:rgba(26,127,67,.16); color:#62db9c; border-color:rgba(26,127,67,.4); }
[data-theme="dark"] .so-prev.late{ background:rgba(192,57,43,.16); color:#ff8a8a; border-color:rgba(192,57,43,.4); }
[data-theme="dark"] .so-prev.warn{ background:rgba(217,119,6,.16); color:#f0b265; border-color:rgba(217,119,6,.4); }
[data-theme="dark"] .so-prev.muted{ background:#11161f; color:#aeb8c9; }

/* 提示条 */
[data-theme="dark"] .alert-success{ background:rgba(26,127,67,.16); color:#7ee0a6; border-color:rgba(26,127,67,.4); }
[data-theme="dark"] .alert-error{ background:rgba(192,57,43,.16); color:#ff9a9a; border-color:rgba(192,57,43,.4); }
[data-theme="dark"] .alert-info{ background:rgba(37,99,235,.16); color:#8fb8ff; border-color:rgba(37,99,235,.4); }

/* 弹窗 / 下拉 / 悬浮卡片 */
[data-theme="dark"] .modal{ background:#1b2330; }
[data-theme="dark"] .modal h3{ color:#eef2f8; }
[data-theme="dark"] .list-zoom{ background:#1b2330; border-color:#2a3340; }
[data-theme="dark"] .nav-group{ color:#8aa0c8; }
[data-theme="dark"] .side-foot{ color:#8aa0c8; }
[data-theme="dark"] .muted-note{ color:#7e8aa0; }

/* 上传区 / 拖拽 */
[data-theme="dark"] .upload-zone{ border-color:#2a3340; background:#11161f; }
[data-theme="dark"] .upload-zone:focus-within{ border-color:#3b82f6; background:#15233a; }
[data-theme="dark"] .img-drop{ background:#11161f; border-color:#2a3340; }
[data-theme="dark"] .img-drop:hover,
[data-theme="dark"] .img-drop:focus{ border-color:#7aa2ff; background:#15233a; }
[data-theme="dark"] .img-drop > span{ color:#9aa6ba; }
[data-theme="dark"] .up-hint{ color:#9aa6ba; }
[data-theme="dark"] .up-note{ color:#4fd07a; }

/* 缩略图底 / 边框 */
[data-theme="dark"] .img-thumb{ background:#11161f; border-color:#2a3340; }
[data-theme="dark"] .thumb{ border-color:#2a3340; }
[data-theme="dark"] .paste-prev img,
[data-theme="dark"] .paste-thumb img,
[data-theme="dark"] .img-prev img{ border-color:#2a3340; }

/* 树形 / 多选 */
[data-theme="dark"] .tree-row{ background:#161c26; border-color:#2a3340; }
[data-theme="dark"] .tree-node .tree-node{ border-color:#2a3340; }
[data-theme="dark"] .tree-name{ color:#eef2f8; }
[data-theme="dark"] .tree-meta{ color:#9aa6ba; }
[data-theme="dark"] .chk{ color:#cdd6e6; }

/* 主题切换按钮 */
.theme-toggle{ width:34px; height:34px; border-radius:9px; border:1px solid #e6eaf0; background:#eef2f8; color:#344563; font-size:15px; cursor:pointer; display:inline-flex; align-items:center; justify-content:center; margin-right:10px; transition:background .15s, box-shadow .15s, transform .08s; }
.theme-toggle:hover{ background:#e2e8f2; box-shadow:var(--sh-2); transform:translateY(-1px); }
.theme-toggle:focus-visible{ outline:none; box-shadow:var(--ring); }
[data-theme="dark"] .theme-toggle{ background:#1d2530; border-color:#2a3340; color:#cdd6e6; }
[data-theme="dark"] .theme-toggle:hover{ background:#243040; }

/* ===== 分页条 ===== */
.pager{ display:flex; flex-wrap:wrap; align-items:center; gap:14px 18px; margin-top:14px; padding-top:12px; border-top:1px solid var(--line); font-size:13px; color:#51607a; }
[data-theme="dark"] .pager{ color:#9aa6ba; border-top-color:#2a3340; }

.pg-size{ display:inline-flex; align-items:center; gap:4px; }
.pg-sz{ display:inline-block; min-width:26px; padding:3px 8px; text-align:center; border:1px solid #d7deea; border-radius:7px; color:#46567a; text-decoration:none; transition:background .12s, border-color .12s, color .12s; }
.pg-sz:hover{ border-color:var(--brand); color:var(--brand); }
.pg-sz.active{ background:var(--brand); border-color:var(--brand); color:#fff; font-weight:600; }
[data-theme="dark"] .pg-sz{ border-color:#2a3340; background:#161c26; color:#cdd6e6; }
[data-theme="dark"] .pg-sz:hover{ border-color:var(--brand); color:#8fb8ff; }
[data-theme="dark"] .pg-sz.active{ background:var(--brand); border-color:var(--brand); color:#fff; }

.pg-nav{ display:inline-flex; align-items:center; gap:6px; flex-wrap:wrap; }
.pg-btn,.pg-num{ display:inline-block; min-width:30px; padding:4px 9px; text-align:center; border:1px solid #d7deea; border-radius:7px; color:#46567a; text-decoration:none; transition:background .12s, border-color .12s, color .12s; }
.pg-btn:hover:not(.disabled),.pg-num:hover{ border-color:var(--brand); color:var(--brand); }
.pg-num.active{ background:var(--brand); border-color:var(--brand); color:#fff; font-weight:600; }
.pg-btn.disabled{ color:#b7c0d0; border-color:#e7ebf2; cursor:not-allowed; pointer-events:none; }
.pg-ellipsis{ color:#aab4c5; padding:0 2px; }
[data-theme="dark"] .pg-btn,[data-theme="dark"] .pg-num{ border-color:#2a3340; background:#161c26; color:#cdd6e6; }
[data-theme="dark"] .pg-btn:hover:not(.disabled),[data-theme="dark"] .pg-num:hover{ border-color:var(--brand); color:#8fb8ff; }
[data-theme="dark"] .pg-num.active{ background:var(--brand); border-color:var(--brand); color:#fff; }
[data-theme="dark"] .pg-btn.disabled{ color:#5a6477; border-color:#222b38; background:#141a23; }
[data-theme="dark"] .pg-ellipsis{ color:#5a6477; }

.pg-info{ margin-left:auto; color:#7b8aa3; white-space:nowrap; }
[data-theme="dark"] .pg-info{ color:#7e8aa0; }

/* ============================================================
   接单明细表 重新设计 — UI Designer 2026-08-17
   KPI 卡片重做（图标圆 + 渐变底 + 底色条）；命令栏统一
   快捷筛选+搜索+新建；批量操作改为底部浮动条；表格
   表头加重 + 状态点指示器。亮/暗双主题一致。
   ============================================================ */

/* —— KPI 卡片条 —— */
.so-kpi-bar{ display:grid; grid-template-columns:repeat(5,1fr); gap:14px; margin-bottom:18px; }
@media(max-width:1100px){ .so-kpi-bar{ grid-template-columns:repeat(3,1fr); } }
@media(max-width:700px){ .so-kpi-bar{ grid-template-columns:repeat(2,1fr); } }
.so-kpi{ display:flex; align-items:center; gap:14px; padding:16px 18px; background:linear-gradient(135deg,#f8faff,#fff); border:1px solid var(--line); border-radius:14px; text-decoration:none; color:inherit; position:relative; overflow:hidden; transition:box-shadow .18s,transform .18s,border-color .18s; }
.so-kpi:hover{ box-shadow:var(--sh-2); transform:translateY(-2px); }
.so-kpi::after{ content:""; position:absolute; bottom:0; left:0; right:0; height:3px; background:var(--brand); }
.so-kpi-ico{ width:44px; height:44px; border-radius:12px; background:rgba(59,130,246,.10); display:flex; align-items:center; justify-content:center; font-size:20px; flex-shrink:0; }
.so-kpi-body{ min-width:0; }
.so-kpi-k{ font-size:12px; color:#8a97ad; margin-bottom:4px; white-space:nowrap; }
.so-kpi-k small{ font-weight:400; }
.so-kpi-v{ font-size:24px; font-weight:800; color:#243b5e; font-variant-numeric:tabular-nums; letter-spacing:-.01em; line-height:1.2; }
.so-kpi-v small{ font-size:12px; font-weight:600; color:#8a97ad; margin-left:2px; }
.so-kpi.k-warn::after{ background:#f59e0b; }
.so-kpi.k-warn .so-kpi-ico{ background:rgba(245,158,11,.12); }
.so-kpi.k-danger::after{ background:#ef4444; }
.so-kpi.k-danger .so-kpi-ico{ background:rgba(239,68,68,.12); }
.so-kpi.k-danger .so-kpi-v{ color:#e0533b; }
[data-theme="dark"] .so-kpi{ background:linear-gradient(135deg,#1a2030,#161c26); border-color:#2a3340; }
[data-theme="dark"] .so-kpi:hover{ box-shadow:0 6px 18px rgba(0,0,0,.5); }
[data-theme="dark"] .so-kpi-k{ color:#9aa6ba; }
[data-theme="dark"] .so-kpi-v{ color:#eef2f8; }
[data-theme="dark"] .so-kpi-v small{ color:#9aa6ba; }
[data-theme="dark"] .so-kpi.k-danger .so-kpi-v{ color:#ff8a8a; }

/* —— 命令栏（快捷筛选 + 搜索 + 新建合一） —— */
.so-cmdbar{ display:flex; align-items:center; gap:12px; flex-wrap:wrap; background:#fff; border:1px solid var(--line); border-radius:12px; padding:10px 14px; box-shadow:var(--sh-1); margin-bottom:14px; }
.so-cmdbar .qf{ flex:1; margin:0; padding:0; border:0; min-width:0; }
.so-cmdbar .so-search{ display:flex; gap:8px; align-items:center; margin:0; flex-shrink:0; }
.so-cmdbar .so-search input{ width:220px; padding:7px 12px; border:1px solid var(--line); border-radius:8px; font-size:13px; font-family:inherit; background:#fff; color:#1f2d3d; transition:border-color .15s,box-shadow .15s; }
.so-cmdbar .so-search input:focus{ outline:none; border-color:var(--brand); box-shadow:var(--ring); }
[data-theme="dark"] .so-cmdbar{ background:#161c26; border-color:#2a3340; }
[data-theme="dark"] .so-cmdbar .so-search input{ background:#11161f; border-color:#2a3340; color:#e6ebf2; }

/* —— 快速筛选：胶囊分段控件 —— */
.qf{ display:flex; flex-wrap:wrap; gap:8px; align-items:center; }
.qf .qbtn{ padding:6px 15px; border:1px solid var(--line); border-radius:999px; color:#46567a; text-decoration:none; font-size:13px; font-weight:600; transition:background .15s, border-color .15s, color .15s, box-shadow .15s; }
.qf .qbtn:hover{ border-color:var(--brand); color:var(--brand); }
.qf .qbtn.active{ background:var(--brand); color:#fff; border-color:var(--brand); box-shadow:var(--sh-1); }
.qf .qsep{ color:#aab4c5; padding:0 2px; }
.qf .qcustom{ display:inline-flex; gap:6px; align-items:center; }
.qf .qcustom input[type=date]{ background:#fff; color:#1f2d3d; border:1px solid var(--line); border-radius:8px; padding:5px 8px; font-family:inherit; font-size:13px; transition:border-color .15s, box-shadow .15s; }
.qf .qcustom input[type=date]:focus{ outline:none; border-color:var(--brand); box-shadow:var(--ring); }
[data-theme="dark"] .qf .qbtn{ color:#aeb8c9; border-color:#2a3340; }
[data-theme="dark"] .qf .qbtn:hover{ border-color:var(--brand); color:#8fb8ff; }
[data-theme="dark"] .qf .qsep{ color:#5a6477; }
[data-theme="dark"] .qf .qcustom input[type=date]{ background:#11161f; border-color:#2a3340; color:#e6ebf2; }

/* —— 批量操作浮动条（选中才出现） —— */
.so-batch-float{ position:fixed; bottom:28px; left:50%; transform:translateX(-50%); background:#1f2a44; color:#fff; border-radius:14px; padding:10px 18px; box-shadow:0 12px 40px rgba(0,0,0,.30); display:flex; align-items:center; gap:12px; z-index:100; animation:soFloatUp .22s ease; }
@keyframes soFloatUp{ from{ transform:translate(-50%,120%); opacity:0; } to{ transform:translate(-50%,0); opacity:1; } }
.so-batch-float .bf-count{ font-size:13px; font-weight:600; }
.so-batch-float .bf-count b{ font-size:16px; color:#8fb8ff; }
.so-batch-float .bf-sep{ width:1px; height:22px; background:rgba(255,255,255,.15); }
.so-batch-float label{ font-size:13px; color:#cdd6e6; }
.so-batch-float input[type=date]{ background:rgba(255,255,255,.08); border:1px solid rgba(255,255,255,.15); border-radius:8px; padding:5px 8px; color:#fff; font-size:13px; font-family:inherit; }
.so-batch-float input[type=date]:focus{ outline:none; border-color:#3b82f6; }
.so-batch-float .bf-btn{ padding:6px 14px; border-radius:8px; border:none; font-size:13px; font-weight:600; cursor:pointer; font-family:inherit; transition:background .15s; }
.so-batch-float .bf-btn-go{ background:#3b82f6; color:#fff; }
.so-batch-float .bf-btn-go:hover{ background:#2f6fd6; }
.so-batch-float .bf-btn-del{ background:rgba(239,68,68,.20); color:#ff8a8a; }
.so-batch-float .bf-btn-del:hover{ background:rgba(239,68,68,.35); }
.so-batch-float .bf-cancel{ background:rgba(255,255,255,.08); color:#cdd6e6; }
.so-batch-float .bf-cancel:hover{ background:rgba(255,255,255,.15); }

/* —— 表格增强 —— */
table.so-table{ border-radius:10px; overflow:hidden; }
table.so-table th{ font-size:12px; text-transform:uppercase; letter-spacing:.03em; white-space:nowrap; padding:10px; }
table.so-table td{ padding:8px 10px; }
table.so-table .badge-so{ display:inline-flex; align-items:center; gap:4px; }
table.so-table .badge-so::before{ content:""; width:6px; height:6px; border-radius:50%; flex-shrink:0; }
table.so-table .badge-so.ok::before{ background:#1a7f44; }
table.so-table .badge-so.late::before{ background:#c0392b; }
table.so-table .badge-so.warn::before{ background:#b9770e; }
table.so-table .badge-so.muted::before{ background:#9aa6ba; }
[data-theme="dark"] table.so-table .badge-so.ok::before{ background:#62db9c; }
[data-theme="dark"] table.so-table .badge-so.late::before{ background:#ff8a8a; }
[data-theme="dark"] table.so-table .badge-so.warn::before{ background:#f0b265; }
[data-theme="dark"] table.so-table .badge-so.muted::before{ background:#aeb8c9; }
table.so-table td:nth-child(8),
table.so-table td:nth-child(9),
table.so-table th:nth-child(8),
table.so-table th:nth-child(9){ text-align:right; font-variant-numeric:tabular-nums; white-space:nowrap; }
table.so-table th:first-child,
table.so-table td:first-child{ width:38px; text-align:center; }
table.so-table input[type=checkbox]{ width:16px; height:16px; cursor:pointer; accent-color:var(--brand); }

/* ============================================================
   全站设计优化 — UI Designer 2026-08-17
   把接单明细表的新设计语言推广到全站公共组件：
   ① KPI 卡片统一升级（渐变底 + 图标圆 + 底部品牌条 + 等宽数字）
   ② 语义色类 .c-* 替代 inline 颜色，修复暗色模式下红字看不清
   ③ 面板标题品牌竖条、顶栏吸顶、侧栏渐变、按钮渐变
   ④ 全局 checkbox accent、滚动条、动效偏好适配
   ============================================================ */

/* —— ① KPI 卡片：现代视觉（有 .ci 图标圆更佳） —— */
.cards{ gap:14px; }
.cards .card{
  position:relative; overflow:hidden;
  background:linear-gradient(135deg,#f8faff,#fff);
  border:1px solid var(--line);
  border-radius:14px;
  padding:18px 18px 16px;
  box-shadow:var(--sh-1);
}
.cards .card::after{
  content:""; position:absolute; left:0; right:0; bottom:0; height:3px;
  background:linear-gradient(90deg,#3b82f6,#06b6d4);
}
.cards .card.has-ci{ padding-right:46px; }
.cards .card .k{ font-size:12px; color:#7b8aa3; font-weight:600; margin-bottom:8px; }
.cards .card .v{ font-size:26px; font-weight:800; color:#243b5e; font-variant-numeric:tabular-nums; letter-spacing:-.01em; }
.cards .card .v small{ font-size:13px; }
/* 图标圆（脚本批量注入 <span class="ci">） */
.cards .card .ci{
  position:absolute; top:14px; right:14px; width:34px; height:34px;
  border-radius:10px; background:rgba(59,130,246,.10);
  display:flex; align-items:center; justify-content:center; font-size:17px; line-height:1;
}
/* 卡片语义强调（可选：加在 .card 上） */
.cards .card.acc-danger::after{ background:#ef4444; }
.cards .card.acc-warn::after{ background:#f59e0b; }
.cards .card.acc-ok::after{ background:#16a34a; }
[data-theme="dark"] .cards .card{
  background:linear-gradient(135deg,#1a2030,#161c26); border-color:#2a3340;
  box-shadow:0 1px 3px rgba(0,0,0,.4);
}
[data-theme="dark"] .cards .card .k{ color:#9aa6ba; }
[data-theme="dark"] .cards .card .v{ color:#eef2f8; }
[data-theme="dark"] .cards .card .ci{ background:rgba(59,130,246,.18); }
/* —— 统计卡语义配色（.card.has-ci 与 .qd-kpi.has-ci 通用，浅/深双主题） —— */
.card.has-ci.t-info,    .qd-kpi.has-ci.t-info   { --acc:#3b82f6; }
.card.has-ci.t-blue,   .qd-kpi.has-ci.t-blue   { --acc:#6366f1; }
.card.has-ci.t-warn,   .qd-kpi.has-ci.t-warn   { --acc:#f59e0b; }
.card.has-ci.t-danger, .qd-kpi.has-ci.t-danger { --acc:#ef4444; }
.card.has-ci.t-ok,     .qd-kpi.has-ci.t-ok     { --acc:#16a34a; }
.card.has-ci.t-neutral, .qd-kpi.has-ci.t-neutral { --acc:#94a3b8; }
/* 顶部色条（按语义强调） */
.card.has-ci[class*="t-"], .qd-kpi.has-ci[class*="t-"]{ border-top:3px solid var(--acc); }
[data-theme="dark"] .card.has-ci[class*="t-"], [data-theme="dark"] .qd-kpi.has-ci[class*="t-"]{ border-top-color:var(--acc); }
/* 图标底色（浅色） */
.card.has-ci.t-info  .ci{ background:#e8f0fe; }
.card.has-ci.t-blue  .ci{ background:#eef0ff; }
.card.has-ci.t-warn  .ci{ background:#fef1de; }
.card.has-ci.t-danger .ci{ background:#fde8ea; }
.card.has-ci.t-ok    .ci{ background:#e4f7ec; }
.card.has-ci.t-neutral .ci{ background:#eef1f6; }
/* 图标底色（深色） */
[data-theme="dark"] .card.has-ci.t-info  .ci{ background:rgba(59,130,246,.22); }
[data-theme="dark"] .card.has-ci.t-blue  .ci{ background:rgba(99,102,241,.22); }
[data-theme="dark"] .card.has-ci.t-warn  .ci{ background:rgba(240,178,101,.22); }
[data-theme="dark"] .card.has-ci.t-danger .ci{ background:rgba(255,138,138,.22); }
[data-theme="dark"] .card.has-ci.t-ok    .ci{ background:rgba(98,219,156,.22); }
[data-theme="dark"] .card.has-ci.t-neutral .ci{ background:rgba(174,184,201,.18); }

/* —— ② 语义色类（替代 inline 颜色，双主题适配） —— */
.c-ok{ color:#1a7f43 !important; }
.c-warn{ color:#d97706 !important; }
.c-danger{ color:#c0392b !important; }
.c-blue{ color:#2563eb !important; }
.c-muted{ color:#9aa6ba !important; }
[data-theme="dark"] .c-ok{ color:#62db9c !important; }
[data-theme="dark"] .c-warn{ color:#f0b265 !important; }
[data-theme="dark"] .c-danger{ color:#ff8a8a !important; }
[data-theme="dark"] .c-blue{ color:#7fb0ff !important; }
[data-theme="dark"] .c-muted{ color:#7e8aa0 !important; }

/* —— ③ 面板 / 表格 / 工具栏 / 顶栏 / 侧栏 提质 —— */
.panel{ border-radius:14px; }
.panel h3{ display:flex; align-items:center; gap:8px; }
.panel h3::before{
  content:""; width:3px; height:14px; border-radius:2px;
  background:linear-gradient(180deg,#3b82f6,#06b6d4); flex-shrink:0;
}
[data-theme="dark"] .panel h3::before{ background:linear-gradient(180deg,#5b8cff,#22d3ee); }

table th{ font-size:12px; letter-spacing:.02em; }
.toolbar input,.toolbar select{ height:36px; border-radius:8px; background:#fff; }
[data-theme="dark"] .toolbar input,[data-theme="dark"] .toolbar select{ background:#11161f; }

/* 顶栏吸顶 */
.topbar{ position:sticky; top:0; z-index:20; box-shadow:0 1px 0 rgba(20,40,80,.04); }

/* 侧栏：渐变 + 激活项质感 */
.sidebar{ background:linear-gradient(180deg,#1f2a44,#1a2440); }
.nav a.active,
.nav-flyout a.active{ box-shadow:inset 0 0 0 1px rgba(255,255,255,.10), 0 4px 12px rgba(59,130,246,.35); }
.nav a.active .ico{ filter:drop-shadow(0 1px 2px rgba(0,0,0,.35)); }

/* 主按钮：品牌渐变（不影响 ghost / danger） */
.btn:not(.btn-ghost):not(.btn-danger){ background:linear-gradient(135deg,#3b82f6,#2f6fd6); box-shadow:0 1px 2px rgba(37,99,235,.22); }
.btn:not(.btn-ghost):not(.btn-danger):hover{ background:linear-gradient(135deg,#4a8bf8,#3474e0); box-shadow:var(--sh-2); }

/* —— ④ 全局细节 —— */
input[type=checkbox],input[type=radio]{ accent-color:var(--brand); }
::-webkit-scrollbar{ width:10px; height:10px; }
::-webkit-scrollbar-thumb{ background:#c7d0dd; border-radius:8px; border:2px solid transparent; background-clip:content-box; }
::-webkit-scrollbar-thumb:hover{ background:#aeb9c9; background-clip:content-box; }
::-webkit-scrollbar-track{ background:transparent; }
[data-theme="dark"] ::-webkit-scrollbar-thumb{ background:#333d4d; background-clip:content-box; }
[data-theme="dark"] ::-webkit-scrollbar-thumb:hover{ background:#46536a; background-clip:content-box; }
.sidebar::-webkit-scrollbar{ width:8px; }
.sidebar::-webkit-scrollbar-thumb{ background:rgba(255,255,255,.16); border:2px solid transparent; background-clip:content-box; }

@media (prefers-reduced-motion: reduce){
  *{ transition:none !important; animation:none !important; }
}

/* —— ⑤ 分析看板组件 .qd-* 收编（原三个看板内联样式，统一新视觉+暗色） —— */
.page-h2{ font-size:16px; color:#243b5e; margin-bottom:6px; }
[data-theme="dark"] .page-h2{ color:#eef2f8; }

.qd-toolbar{
  display:flex; flex-wrap:wrap; gap:12px; align-items:center;
  background:#fff; border:1px solid var(--line); border-radius:12px;
  padding:14px 18px; margin-bottom:22px; box-shadow:var(--sh-1);
}
.qd-toolbar .field{ display:flex; align-items:center; gap:8px; margin:0; }
.qd-toolbar label{ font-size:12px; color:#6a788f; }
.qd-toolbar input, .qd-toolbar select{ padding:7px 10px; border:1px solid #dde3ec; border-radius:8px; font-size:13px; font-family:inherit; background:#fff; }
.qd-toolbar .switch{ display:flex; align-items:center; gap:8px; cursor:pointer; user-select:none; font-size:13px; color:#344563; }
.qd-toolbar .switch input{ width:18px; height:18px; accent-color:var(--brand); }
.qd-toolbar .spacer{ flex:1; }
.cmp-field{ margin-left:6px; padding-left:12px; border-left:1px dashed #e2e8f0; }
.qd-title{ font-size:12px; color:#8a97ad; margin:2px 0 18px; }
[data-theme="dark"] .qd-toolbar{ background:#161c26; border-color:#2a3340; box-shadow:0 1px 3px rgba(0,0,0,.4); }
[data-theme="dark"] .qd-toolbar label{ color:#9aa6ba; }
[data-theme="dark"] .qd-toolbar input,[data-theme="dark"] .qd-toolbar select{ background:#11161f; border-color:#2a3340; color:#eef2f8; }
[data-theme="dark"] .qd-toolbar .switch{ color:#cdd6e6; }
[data-theme="dark"] .cmp-field{ border-left-color:#2a3340; }
[data-theme="dark"] .qd-title{ color:#7e8aa0; }

.qd-kpis{ display:grid; grid-template-columns:repeat(auto-fit, minmax(200px,1fr)); gap:16px; margin-bottom:22px; }
.qd-kpi{
  position:relative; overflow:hidden;
  background:linear-gradient(135deg,#f8faff,#fff);
  border:1px solid var(--line); border-radius:14px;
  padding:18px 18px 16px; box-shadow:var(--sh-1);
}
.qd-kpi::after{
  content:""; position:absolute; left:0; right:0; bottom:0; height:3px;
  background:linear-gradient(90deg,#3b82f6,#06b6d4);
}
.qd-kpi.has-ci{ padding-right:46px; }
.qd-kpi .k{ font-size:12px; color:#7b8aa3; font-weight:600; margin-bottom:8px; }
.qd-kpi .v{ font-size:26px; font-weight:800; color:#243b5e; font-variant-numeric:tabular-nums; letter-spacing:-.01em; }
.qd-kpi .v small{ font-size:13px; font-weight:600; color:#8a97ad; }
.qd-kpi .d{ font-size:12px; margin-top:6px; color:#5a6b85; }
.qd-kpi .d .up{ color:#ef4444; }
.qd-kpi .d .down{ color:#16a34a; }
.qd-kpi .d .same{ color:#9aa6ba; }
.qd-kpi .d .prev{ color:#9aa6ba; margin-left:4px; }
.qd-kpi .ci{
  position:absolute; top:14px; right:14px; width:34px; height:34px;
  border-radius:10px; background:rgba(59,130,246,.10);
  display:flex; align-items:center; justify-content:center; font-size:17px; line-height:1;
  filter:saturate(.85);  /* 收一收 emoji 自带的浓彩，让浅底更搭 */
  box-shadow:inset 0 0 0 1px rgba(255,255,255,.6);
}
/* KPI 图标圆：5 种语义淡色调（亮一点 · 跟白底搭配 · 不撞色） */
.qd-kpi.t-info    .ci{ background:#eff6ff; }   /* 蓝 */
.qd-kpi.t-warn    .ci{ background:#fff7ed; }   /* 暖橙 */
.qd-kpi.t-danger  .ci{ background:#fff1f2; }   /* 玫瑰 */
.qd-kpi.t-ok      .ci{ background:#f0fdf4; }   /* 绿 */
.qd-kpi.t-neutral .ci{ background:#f1f5f9; }   /* 灰 */
[data-theme="dark"] .qd-kpi.t-info    .ci{ background:rgba(91,140,255,.18); }
[data-theme="dark"] .qd-kpi.t-warn    .ci{ background:rgba(240,178,101,.18); }
[data-theme="dark"] .qd-kpi.t-danger  .ci{ background:rgba(255,138,138,.18); }
[data-theme="dark"] .qd-kpi.t-ok      .ci{ background:rgba(98,219,156,.18); }
[data-theme="dark"] .qd-kpi.t-neutral .ci{ background:rgba(174,184,201,.16); }
[data-theme="dark"] .qd-kpi .ci{ box-shadow:inset 0 0 0 1px rgba(255,255,255,.05); }
[data-theme="dark"] .qd-kpi{ background:linear-gradient(135deg,#1a2030,#161c26); border-color:#2a3340; box-shadow:0 1px 3px rgba(0,0,0,.4); }
[data-theme="dark"] .qd-kpi .k{ color:#9aa6ba; }
[data-theme="dark"] .qd-kpi .v{ color:#eef2f8; }
[data-theme="dark"] .qd-kpi .v small{ color:#7e8aa0; }
[data-theme="dark"] .qd-kpi .d{ color:#aeb8c9; }
[data-theme="dark"] .qd-kpi .d .up{ color:#ff8a8a; }
[data-theme="dark"] .qd-kpi .d .down{ color:#62db9c; }
[data-theme="dark"] .qd-kpi .d .same{ color:#7e8aa0; }
[data-theme="dark"] .qd-kpi .d .prev{ color:#7e8aa0; }
[data-theme="dark"] .qd-kpi .ci{ background:rgba(59,130,246,.18); }

.qd-grid{ display:grid; grid-template-columns:1fr 1fr; gap:12px; margin-bottom:18px; }
@media(max-width:1100px){ .qd-grid{ grid-template-columns:1fr; } }
.qd-panel{ background:#fff; border-radius:12px; padding:14px; border:1px solid var(--line); box-shadow:var(--sh-1); }
.qd-panel h3{ font-size:14px; margin-bottom:10px; color:#243b5e; }
.qd-panel canvas{ width:100% !important; height:100% !important; display:block; }
.qd-chart{ position:relative; height:300px; }
.qd-wide{ grid-column:1 / -1; }
[data-theme="dark"] .qd-panel{ background:#161c26; border-color:#2a3340; box-shadow:0 1px 3px rgba(0,0,0,.4); }
[data-theme="dark"] .qd-panel h3{ color:#eef2f8; }

/* ===== 通用物料选择器（product-picker.js） ===== */
.pp-wrap{ position:relative; display:block; }
.pp-wrap input{ padding-right:34px !important; }
.pp-btn{
  position:absolute; right:6px; top:50%; transform:translateY(-50%);
  width:26px; height:26px; border:none; background:#eef2f8; border-radius:6px;
  cursor:pointer; font-size:14px; line-height:1; color:#5b6b82; display:flex; align-items:center; justify-content:center;
}
.pp-btn:hover{ background:rgba(59,130,246,.15); color:var(--brand); }
.pp-drop{
  position:absolute; z-index:60; top:calc(100% + 4px); left:0; right:0; min-width:320px;
  background:#fff; border:1px solid #e6eaf0; border-radius:10px;
  box-shadow:0 12px 32px rgba(20,40,80,.16); max-height:320px; overflow:auto; padding:5px;
}
.pp-item{ padding:8px 10px; border-radius:8px; cursor:pointer; }
.pp-item:hover, .pp-item.pp-hl{ background:#f0f5ff; }
.pp-line1{ display:flex; align-items:center; gap:8px; }
.pp-code{ font-weight:600; color:var(--brand); font-size:13px; white-space:nowrap; }
.pp-name{ font-size:13px; color:#243b5e; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.pp-line2{ font-size:12px; color:#8a97ad; margin-top:2px; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.pp-stop{ font-size:11px; color:#ef4444; background:rgba(239,68,68,.1); padding:1px 6px; border-radius:4px; flex:none; }
.pp-ok{ font-size:11px; color:#16a34a; background:rgba(22,163,74,.1); padding:1px 6px; border-radius:4px; }
.pp-empty{ padding:14px; text-align:center; color:#8a97ad; font-size:13px; }
.pp-dlg-mask{
  position:fixed; inset:0; background:rgba(20,30,50,.45); display:none; align-items:center; justify-content:center;
  z-index:80; padding:24px;
}
.pp-dlg-mask.show{ display:flex; }
.pp-dlg{ background:#fff; border-radius:14px; width:100%; max-width:860px; padding:20px 22px; box-shadow:0 20px 60px rgba(0,0,0,.25); max-height:84vh; display:flex; flex-direction:column; }
.pp-dlg-head{ display:flex; align-items:center; justify-content:space-between; margin-bottom:12px; }
.pp-dlg-head h3{ margin:0; font-size:16px; }
.pp-dlg-close{ border:none; background:transparent; font-size:22px; line-height:1; cursor:pointer; color:#8a97ad; padding:0 4px; }
.pp-dlg-close:hover{ color:#1f2d3d; }
.pp-dlg-search{ display:flex; gap:8px; margin-bottom:12px; }
.pp-dlg-search input{ flex:1; padding:9px 11px; border:1px solid #dde3ec; border-radius:8px; font-size:13px; font-family:inherit; }
.pp-dlg-search input:focus{ outline:none; border-color:var(--brand); box-shadow:var(--ring); }
.pp-dlg-body{ flex:1; overflow:auto; min-height:200px; }
.pp-dlg-tbl{ width:100%; border-collapse:collapse; font-size:13px; }
.pp-dlg-tbl th{ text-align:left; padding:8px 10px; color:#6a788f; font-weight:600; border-bottom:1px solid #eef1f6; position:sticky; top:0; background:#fff; }
.pp-dlg-tbl td{ padding:8px 10px; border-bottom:1px solid #f2f5fa; color:#344563; }
.pp-dlg-tbl tbody tr{ cursor:pointer; }
.pp-dlg-tbl tbody tr:hover{ background:#f0f5ff; }
.pp-dlg-code{ font-weight:600; color:var(--brand); white-space:nowrap; }
.pp-dlg-empty{ padding:30px; text-align:center; color:#8a97ad; }
.pp-dlg-foot{ display:flex; align-items:center; justify-content:flex-end; gap:8px; margin-top:12px; }
.pp-dlg-info{ margin-right:auto; font-size:12px; color:#8a97ad; }
.pp-dlg-prev:disabled, .pp-dlg-next:disabled{ opacity:.45; cursor:not-allowed; }
[data-theme="dark"] .pp-btn{ background:#243040; color:#9aa6ba; }
[data-theme="dark"] .pp-btn:hover{ background:rgba(59,130,246,.25); color:#6ea8fe; }
[data-theme="dark"] .pp-drop{ background:#1b2330; border-color:#2a3340; box-shadow:0 12px 32px rgba(0,0,0,.5); }
[data-theme="dark"] .pp-item:hover, [data-theme="dark"] .pp-item.pp-hl{ background:#243040; }
[data-theme="dark"] .pp-name{ color:#e6ebf2; }
[data-theme="dark"] .pp-line2{ color:#7e8aa0; }
[data-theme="dark"] .pp-dlg{ background:#1b2330; }
[data-theme="dark"] .pp-dlg-close:hover{ color:#eef2f8; }
[data-theme="dark"] .pp-dlg-search input{ background:#11161f; border-color:#2a3340; color:#e6ebf2; }
[data-theme="dark"] .pp-dlg-tbl th{ color:#9aa6ba; border-bottom-color:#2a3340; background:#1b2330; }
[data-theme="dark"] .pp-dlg-tbl td{ color:#cdd6e6; border-bottom-color:#222b38; }
[data-theme="dark"] .pp-dlg-tbl tbody tr:hover{ background:#243040; }
[data-theme="dark"] .pp-dlg-empty, [data-theme="dark"] .pp-dlg-info{ color:#7e8aa0; }
/* —— 多选标签（product-picker.js data-picker-multi） —— */
.pp-chips{ display:flex; flex-wrap:wrap; gap:6px; }
.pp-chips:not(:empty){ margin-bottom:6px; }
.pp-chip{
  display:inline-flex; align-items:center; gap:5px; max-width:100%;
  padding:3px 7px 3px 10px; border:1px solid #d7deea; border-radius:14px;
  background:#f6f9fc; font-size:12px; color:#243b5e; line-height:1.5; white-space:nowrap;
}
.pp-chip b{ color:var(--brand); font-weight:600; }
.pp-chip small{ color:#8a97ad; font-size:11px; overflow:hidden; text-overflow:ellipsis; max-width:240px; }
.pp-chip i{
  font-style:normal; cursor:pointer; width:16px; height:16px; line-height:14px; text-align:center;
  border-radius:50%; color:#8a97ad; flex:none; font-size:13px;
}
.pp-chip i:hover{ background:#ef4444; color:#fff; }
[data-theme="dark"] .pp-chip{ background:#11161f; border-color:#2a3340; color:#cdd6e6; }
[data-theme="dark"] .pp-chip b{ color:#6ea8fe; }
[data-theme="dark"] .pp-chip small{ color:#7e8aa0; }

/* ============================================================
   全站交互体验增强 — UI Designer 2026-08-24
   ① Toast 通知  ② 自定义确认弹窗  ③ 弹窗进场动画
   ④ flash 提示条自动淡出  ⑤ 表格空态美化  ⑥ 数字等宽对齐
   ============================================================ */

/* —— ① Toast —— */
.toast-wrap{ position:fixed; top:18px; right:18px; z-index:9999; display:flex; flex-direction:column; gap:10px; pointer-events:none; max-width:min(380px, calc(100vw - 36px)); }
.toast{
  display:flex; align-items:flex-start; gap:9px;
  background:#fff; border:1px solid var(--line); border-left:3px solid #3b82f6;
  border-radius:10px; padding:11px 14px; box-shadow:var(--sh-2);
  font-size:13px; color:#1f2d3d; line-height:1.55;
  opacity:0; transform:translateX(24px); transition:opacity .22s ease, transform .22s ease;
  pointer-events:auto;
}
.toast.show{ opacity:1; transform:translateX(0); }
.toast-ico{ flex:none; font-size:15px; line-height:1.4; }
.toast-msg{ word-break:break-word; }
.toast-success{ border-left-color:#16a34a; }
.toast-error{ border-left-color:#ef4444; }
.toast-warn{ border-left-color:#f59e0b; }
[data-theme="dark"] .toast{ background:#1b2330; border-color:#2a3340; color:#e6ebf2; box-shadow:0 12px 32px rgba(0,0,0,.5); }

/* —— ② 自定义确认弹窗 —— */
.cfm-mask{ position:fixed; inset:0; background:rgba(20,30,50,.45); display:flex; align-items:center; justify-content:center; z-index:90; padding:24px; opacity:0; transition:opacity .18s ease; }
.cfm-mask.show{ opacity:1; }
.cfm-box{
  width:100%; max-width:380px; background:#fff; border-radius:14px; padding:24px 22px 20px;
  box-shadow:0 20px 60px rgba(0,0,0,.25); text-align:center;
  transform:scale(.94) translateY(8px); transition:transform .2s cubic-bezier(.2,.9,.3,1.15);
}
.cfm-mask.show .cfm-box{ transform:scale(1) translateY(0); }
.cfm-ico{ font-size:30px; margin-bottom:10px; }
.cfm-msg{ font-size:14px; color:#344563; line-height:1.65; margin-bottom:18px; word-break:break-word; }
.cfm-actions{ display:flex; gap:10px; justify-content:center; }
.cfm-actions .btn{ min-width:96px; padding:8px 0; }
[data-theme="dark"] .cfm-box{ background:#1b2330; }
[data-theme="dark"] .cfm-msg{ color:#cdd6e6; }

/* —— ③ 弹窗进场动画 —— */
.modal-mask{ animation:maskFade .18s ease; }
.modal-mask .modal{ animation:modalPop .22s cubic-bezier(.2,.9,.3,1.15); }
@keyframes maskFade{ from{ opacity:0; } to{ opacity:1; } }
@keyframes modalPop{ from{ opacity:0; transform:translateY(14px) scale(.97); } to{ opacity:1; transform:none; } }

/* —— ④ flash 提示条：滑入 + 淡出 + 关闭 —— */
.content > .alert{ position:relative; padding-right:34px; animation:alertIn .25s ease; transition:opacity .3s ease, transform .3s ease; }
.content > .alert.alert-out{ opacity:0; transform:translateY(-8px); }
.alert-x{ position:absolute; top:9px; right:11px; cursor:pointer; font-size:12px; opacity:.55; line-height:1; padding:2px; }
.alert-x:hover{ opacity:1; }
@keyframes alertIn{ from{ opacity:0; transform:translateY(-8px); } to{ opacity:1; transform:none; } }

/* —— ⑤ 表格空态 —— */
td[colspan]{ text-align:center; padding:26px 10px; color:#9aa6ba; font-size:13px; }
.empty-ico{ margin-right:7px; opacity:.75; font-size:15px; }

/* —— ⑥ 数字等宽（金额/数量/日期列对齐） —— */
td{ font-variant-numeric:tabular-nums; }

/* ============================================================
   全站界面精修 — 2026-09-01
   硬约束：配色一律不动（沿用 --brand #3b82f6 语义色板与深色板）。
   ① 字体栈与排版节奏    ② 内容区留白层级    ③ 表格容器化与行反馈
   ④ 面板 / 工具栏 / 表单控件提质          ⑤ 焦点可见与键盘可达
   ⑥ 移动端适配（侧栏抽屉 · 表格横滚 · 卡片塌缩）
   ⑦ 微动效（进场 · 滚动投影 · 提交 loading，尊重减弱动效偏好）
   ============================================================ */

/* —— ① 字体栈与排版节奏 —— */
body{
  font-family:"PingFang SC","HarmonyOS Sans SC","Noto Sans SC","Microsoft YaHei UI","Microsoft YaHei","Segoe UI",-apple-system,"Source Han Sans SC",sans-serif;
  line-height:1.6;
  -webkit-font-smoothing:antialiased;
  -moz-osx-font-smoothing:grayscale;
}
.page-h2{ font-size:17px; font-weight:700; letter-spacing:.01em; }

/* —— ② 内容区留白层级 —— */
.content{ padding:22px 26px 34px; }
.content > .cards,
.content > .panel,
.content > .toolbar,
.content > .qd-toolbar,
.content > .grid-2{ animation:procRise .32s cubic-bezier(.22,.8,.3,1) both; }
@keyframes procRise{ from{ opacity:0; transform:translateY(10px); } to{ opacity:1; transform:none; } }

/* —— ③ 表格：容器化 + 更清晰的行反馈 —— */
.tbl-scroll{ overflow-x:auto; overscroll-behavior-x:contain; -webkit-overflow-scrolling:touch; border-radius:10px; }
.tbl-scroll::-webkit-scrollbar{ height:8px; }
.tbl-scroll::-webkit-scrollbar-thumb{ background:#c3ccdb; border-radius:8px; border:2px solid transparent; background-clip:content-box; }
.tbl-scroll::-webkit-scrollbar-thumb:hover{ background:#a9b4c6; background-clip:content-box; }
[data-theme="dark"] .tbl-scroll::-webkit-scrollbar-thumb{ background:#3a4457; background-clip:content-box; }

th, td{ padding:10px 12px; vertical-align:middle; line-height:1.55; }
table th{ font-weight:600; white-space:nowrap; }
/* 修复：斑马行覆盖了 hover 底色（同特异性后被定义者胜出） */
tbody tr:hover > td{ background:#eaf1ff; }
[data-theme="dark"] tbody tr:hover > td{ background:#1e293a; }
/* 悬停时首列出现品牌指示条，明确"当前行" */
tbody tr:hover > td:first-child{ box-shadow:inset 3px 0 0 var(--brand); }
[data-theme="dark"] tbody tr:hover > td:first-child{ box-shadow:inset 3px 0 0 #5b8cff; }
tbody td{ transition:background .12s ease, box-shadow .12s ease; }

/* —— ④ 面板 / 工具栏 / 控件 —— */
.panel{ padding:18px 20px; transition:box-shadow .2s ease, border-color .2s ease; }
.panel > h3:first-child,
.panel > *:first-child h3{ padding-bottom:12px; margin-bottom:14px; border-bottom:1px solid var(--line); }
[data-theme="dark"] .panel > h3:first-child,
[data-theme="dark"] .panel > *:first-child h3{ border-bottom-color:#2a3340; }

.toolbar{
  background:#fff; border:1px solid var(--line); border-radius:12px;
  padding:12px 14px; box-shadow:var(--sh-1); gap:10px; align-items:center;
}
[data-theme="dark"] .toolbar{ background:#161c26; border-color:#2a3340; box-shadow:0 1px 3px rgba(0,0,0,.4); }

.field label{ font-weight:600; letter-spacing:.01em; }
.field input:not([type=checkbox]):not([type=radio]):not([type=file]),
.field select,
.field textarea{
  height:38px; border-radius:9px; border-color:#dae1ec;
  transition:border-color .15s ease, box-shadow .15s ease;
}
.field textarea{ height:auto; min-height:78px; line-height:1.65; }
.field select{
  -webkit-appearance:none; -moz-appearance:none; appearance:none;
  padding-right:32px; cursor:pointer;
  background-image:url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 12 12'%3E%3Cpath d='M2.5 4.5L6 8l3.5-3.5' fill='none' stroke='%238a97ad' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
  background-repeat:no-repeat; background-position:right 11px center;
}
[data-theme="dark"] .field select{
  background-image:url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 12 12'%3E%3Cpath d='M2.5 4.5L6 8l3.5-3.5' fill='none' stroke='%239aa6ba' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
}
.field input[type=checkbox], .field input[type=radio],
.toolbar input[type=checkbox], .toolbar input[type=radio]{ height:auto; width:16px; }
.toolbar input[type=date], .toolbar select{ height:38px; border-radius:9px; border-color:#dae1ec; }
/* 多选列表框：还原原生外观与多行高度（如"关联供应商" size=5），不吃单行 select 的样式 */
.field select[multiple]{
  height:auto; min-height:112px; padding-right:11px; cursor:default;
  -webkit-appearance:auto; -moz-appearance:auto; appearance:auto; background-image:none;
}
/* 深色主题下归还边框色（上面的 :not 选择器特异性更高，会盖掉既有暗色边框） */
[data-theme="dark"] .field input:not([type=checkbox]):not([type=radio]):not([type=file]),
[data-theme="dark"] .field select,
[data-theme="dark"] .field textarea,
[data-theme="dark"] .toolbar input[type=date],
[data-theme="dark"] .toolbar select{ border-color:#2a3340; }
[data-theme="dark"] .login .field input{ border-color:#2a3340; }

/* 按钮：统一节奏与图标间距 */
.btn{ font-weight:600; letter-spacing:.01em; display:inline-flex; align-items:center; justify-content:center; gap:6px; vertical-align:middle; }
.btn-ghost{ border:1px solid var(--line); }
.btn-sm{ padding:5px 11px; }
[data-theme="dark"] .btn-ghost{ border-color:#2a3340; }
.actions a{ padding:3px 8px; border-radius:7px; transition:background .15s ease, color .15s ease; }
.actions a:hover{ background:rgba(59,130,246,.12); color:var(--brand); }
[data-theme="dark"] .actions a:hover{ background:rgba(91,140,255,.18); color:#8fb8ff; }
.tag{ display:inline-block; padding:3px 10px; line-height:1.5; letter-spacing:.01em; }

/* 分页条 */
.pager{ margin-top:16px; padding-top:14px; gap:12px 16px; }
.pg-btn, .pg-num{ min-height:30px; display:inline-flex; align-items:center; justify-content:center; padding:4px 10px; }
.pg-btn:hover:not(.disabled), .pg-num:hover:not(.active){ transform:translateY(-1px); }

/* —— ⑤ 焦点可见 / 键盘可达 —— */
a:focus-visible, button:focus-visible, [tabindex]:focus-visible{
  outline:none; box-shadow:var(--ring); border-radius:8px;
}
input:focus-visible, select:focus-visible, textarea:focus-visible{
  outline:none; border-color:var(--brand); box-shadow:var(--ring);
}
.nav a:focus-visible, .nav-flyout a:focus-visible{ box-shadow:0 0 0 3px rgba(255,255,255,.28); }

/* —— ⑦ 顶栏：面包屑 + 滚动投影 —— */
.topbar{ padding:0 26px; transition:box-shadow .2s ease; }
.topbar.is-scrolled{ box-shadow:0 2px 14px rgba(20,40,80,.09); }
[data-theme="dark"] .topbar.is-scrolled{ box-shadow:0 2px 14px rgba(0,0,0,.45); }
.topbar .title{ display:flex; align-items:baseline; gap:10px; min-width:0; font-size:17px; letter-spacing:.01em; }
.topbar .title .t-name{ overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.crumb{ display:flex; align-items:center; gap:7px; font-size:12px; font-weight:600; color:#8a97ad; flex:none; }
.crumb b{ font-weight:600; }
.crumb .cr-sep{ opacity:.55; font-weight:400; }
.crumb::after{ content:"›"; margin-left:2px; opacity:.55; font-weight:400; }
[data-theme="dark"] .crumb{ color:#8b97ad; }

/* 侧栏：当前项左侧指示条 + 更整齐的图标位 */
.nav a.active, .nav-flyout a.active{ position:relative; }
.nav a.active::before{
  content:""; position:absolute; left:0; top:8px; bottom:8px; width:3px;
  border-radius:0 3px 3px 0; background:rgba(255,255,255,.85);
}
.nav .ico{ width:22px; flex:none; }
.brand{ gap:12px; }

/* 移动端汉堡按钮（默认隐藏，窄屏由媒体查询显示） */
.menu-btn{
  display:none; width:36px; height:36px; margin-right:12px; flex:none;
  align-items:center; justify-content:center; font-size:17px; line-height:1;
  border:1px solid var(--line); border-radius:9px; background:#eef2f8; color:#344563; cursor:pointer;
}
.menu-btn:hover{ background:#e2e8f2; }
[data-theme="dark"] .menu-btn{ background:#1d2530; border-color:#2a3340; color:#cdd6e6; }
[data-theme="dark"] .menu-btn:hover{ background:#243040; }
.sb-mask{
  position:fixed; inset:0; background:rgba(12,18,30,.45); z-index:9;
  opacity:0; visibility:hidden; transition:opacity .2s ease, visibility .2s ease;
}
.sb-mask.show{ opacity:1; visibility:visible; }

/* —— ⑥ 移动端适配 —— */
@media (max-width:1024px){
  /* 侧栏变抽屉：从顶栏下方滑出，顶栏始终可见可操作 */
  .sidebar{
    position:fixed; left:0; top:60px; width:252px; height:calc(100vh - 60px);
    transform:translateX(-100%); transition:transform .24s cubic-bezier(.22,.8,.3,1);
    box-shadow:0 18px 50px rgba(0,0,0,.35); z-index:28;
  }
  .sidebar.open{ transform:translateX(0); }
  .sb-mask{ top:60px; z-index:25; }
  .menu-btn{ display:inline-flex; }
  .topbar{ padding:0 16px; }
  .content{ padding:16px 16px 30px; }
  .grid-2{ gap:14px; }
  .qd-toolbar{ padding:12px 14px; gap:10px; }
}
@media (max-width:760px){
  .topbar .title{ font-size:16px; }
  .crumb{ display:none; }
  .content{ padding:14px 12px 26px; }
  .cards{ grid-template-columns:repeat(2,minmax(0,1fr)); gap:10px; }
  .cards .card{ padding:14px; border-radius:12px; }
  .cards .card .v{ font-size:22px; }
  .cards .card .ci{ width:30px; height:30px; font-size:15px; top:12px; right:12px; }
  .qd-kpis{ grid-template-columns:repeat(2,minmax(0,1fr)); gap:10px; }
  .qd-kpi{ padding:14px; }
  .qd-kpi .v{ font-size:22px; }
  .qd-chart{ height:250px; }
  .panel{ padding:14px 14px 16px; }
  .toolbar{ padding:10px 12px; }
  .pager{ gap:10px 12px; }
  .pg-info{ margin-left:0; width:100%; }
  .modal-mask{ padding:14px 12px; }
  .modal{ padding:18px 16px; max-width:100%; }
  .modal-actions{ gap:8px; }
  .modal-actions .btn{ flex:1; }
  .cfm-actions .btn{ flex:1; }
  /* 窄屏：悬浮子菜单改为抽屉内手风琴，不再飞出屏幕外 */
  .nav-flyout{
    position:static; display:none; width:100%; min-width:0;
    background:transparent; border:0; box-shadow:none; padding:2px 0 4px 10px;
    margin:2px 0 6px; border-left:2px solid rgba(255,255,255,.12);
    visibility:visible; opacity:1; pointer-events:auto; transform:none;
  }
  .nav-item.has-sub.open .nav-flyout{ display:flex; }
  .nav-item.has-sub > a::after,
  .nav-item.has-sub > .sub-trigger::after{ transform:translateY(-50%) rotate(0deg); }
  .nav-item.has-sub.open > a::after,
  .nav-item.has-sub.open > .sub-trigger::after{ transform:translateY(-50%) rotate(90deg); }
}

/* —— ⑦ 提交中 loading（防重复提交） —— */
.btn.is-loading{ position:relative; pointer-events:none; padding-right:32px; opacity:.9; }
.btn.is-loading::after{
  content:""; position:absolute; right:11px; top:50%; margin-top:-7px;
  width:14px; height:14px; border-radius:50%;
  border:2px solid rgba(255,255,255,.45); border-top-color:#fff;
  animation:procSpin .6s linear infinite;
}
.btn-ghost.is-loading::after{ border-color:rgba(90,107,133,.30); border-top-color:var(--brand); }
@keyframes procSpin{ to{ transform:rotate(360deg); } }

/* ============================================================
   ⑬ 框内说明（placeholder）+ 必填 / 选填标记  2026-09-02
   —— 标记由 app.js 的 initFieldHints() 自动注入，无需改页面 ——
   ============================================================ */

/* 必填：品牌红之外的中性红，不抢主色 */
.field label .req-star,
.form-row .field label .req-star{
  color:#e5484d; font-style:normal; font-weight:700;
  margin-left:2px; font-size:13px; line-height:1;
}

/* 选填：低饱和胶囊，跟浅灰底融合，不制造视觉噪音 */
.field label .opt-tag{
  display:inline-block; margin-left:6px; padding:1px 7px 2px;
  font-size:10px; font-style:normal; font-weight:600; letter-spacing:.03em;
  color:#8b95a7; background:#f2f5f9; border:1px solid #e7ecf3;
  border-radius:999px; vertical-align:1.5px; white-space:nowrap;
}

/* 框内说明：比输入值淡两档，聚焦时再淡一档（不与真实内容抢注意力） */
.field input::placeholder,
.field textarea::placeholder,
.toolbar input::placeholder{ color:#a9b4c6; opacity:1; }
.field input:focus::placeholder,
.field textarea:focus::placeholder{ color:#c3ccda; }
.field select:invalid,
.field select option[value=""]{ color:#a9b4c6; }

/* 暗色变体 */
[data-theme="dark"] .field label .req-star{ color:#ff8085; }
[data-theme="dark"] .field label .opt-tag{
  color:#8d98aa; background:rgba(255,255,255,.05); border-color:#2b3441;
}
[data-theme="dark"] .field input:focus::placeholder,
[data-theme="dark"] .field textarea:focus::placeholder{ color:#5d6879; }

/* ============================================================
   ⑭ 可搜索下拉（供应商选择：名称 / 拼音首字母）  2026-09-05
   ============================================================ */
.ssel-wrap{ position:relative; }
.ssel-in{
  width:100%; box-sizing:border-box; height:38px; padding:8px 30px 8px 11px;
  border:1px solid #d8e0ec; border-radius:8px; font-size:14px;
  background:#fff; color:#1f2937; cursor:pointer;
}
.ssel-in::placeholder{ color:#a9b4c6; }
.ssel-in:focus{ outline:none; border-color:#3b82f6; box-shadow:0 0 0 3px rgba(59,130,246,.15); }
.ssel-in.open{ border-color:#3b82f6; }
.ssel-in:disabled{ background:#f3f5f9; color:#9aa6ba; cursor:not-allowed; }
.ssel-panel{
  display:none; position:absolute; z-index:70; top:calc(100% + 4px); left:0; right:0; min-width:200px;
  background:#fff; border:1px solid #d8e0ec; border-radius:10px;
  box-shadow:0 10px 28px rgba(15,23,42,.16); padding:6px;
}
.ssel-filt{
  width:100%; box-sizing:border-box; padding:7px 9px; border:1px solid #e2e8f0;
  border-radius:6px; margin-bottom:6px; font-size:13px; outline:none;
}
.ssel-filt:focus{ border-color:#3b82f6; }
.ssel-list{ max-height:220px; overflow:auto; }
.ssel-opt{ padding:8px 9px; border-radius:6px; cursor:pointer; font-size:14px; color:#1f2937; }
.ssel-opt:hover{ background:#f1f5f9; }
.ssel-opt.active{ background:#e0edff; color:#1d4ed8; font-weight:600; }
.ssel-empty{ padding:12px; color:#9aa6ba; font-size:13px; text-align:center; }
.ssel-hidden{ position:absolute !important; width:1px; height:1px; opacity:0; pointer-events:none; overflow:hidden; clip:rect(0,0,0,0); }

/* 暗色变体 */
[data-theme="dark"] .ssel-in{ background:#1b2230; border-color:#2a3340; color:#e5eaf3; }
[data-theme="dark"] .ssel-in:focus{ border-color:#3b82f6; }
[data-theme="dark"] .ssel-in:disabled{ background:#151b28; color:#5d6879; }
[data-theme="dark"] .ssel-panel{ background:#1b2230; border-color:#2b3441; box-shadow:0 10px 28px rgba(0,0,0,.5); }
[data-theme="dark"] .ssel-filt{ background:#141a26; border-color:#2b3441; color:#e5eaf3; }
[data-theme="dark"] .ssel-opt{ color:#e5eaf3; }
[data-theme="dark"] .ssel-opt:hover{ background:rgba(255,255,255,.06); }
[data-theme="dark"] .ssel-opt.active{ background:rgba(59,130,246,.25); color:#9ec3ff; }

.toolbar .dt-sep{ font-size:13px; color:#8a97ad; }
[data-theme="dark"] .toolbar .dt-sep{ color:#9aa6ba; }

/* 3D 图纸查看器（occt-import-js + three.js，按需加载） */
.cad-chip{ display:inline-flex; align-items:center; gap:4px; padding:3px 10px; margin:2px 3px 2px 0; border-radius:999px;
  background:#eef4ff; color:#2f6fd0; border:1px solid #cfe0ff; font-size:12px; font-weight:600; text-decoration:none; white-space:nowrap; }
.cad-chip:hover{ background:#e2ecff; border-color:#a9c8ff; text-decoration:none; }
.cad-chip.in-form{ position:relative; padding-right:22px; max-width:100%; overflow:hidden; text-overflow:ellipsis; }
.cad-chip .img-del{ width:14px; height:14px; font-size:11px; line-height:13px; top:1px; right:2px; }
[data-theme="dark"] .cad-chip{ background:rgba(59,130,246,.16); color:#8ab4ff; border-color:rgba(59,130,246,.35); }
[data-theme="dark"] .cad-chip:hover{ background:rgba(59,130,246,.26); }
.cad-mask{ position:fixed; inset:0; z-index:200; background:rgba(8,12,18,.72); display:flex; align-items:center; justify-content:center; padding:24px; }
.cad-win{ width:100%; max-width:1080px; height:min(86vh,760px); background:#fff; border-radius:14px; overflow:hidden; display:flex; flex-direction:column;
  box-shadow:0 24px 70px rgba(0,0,0,.35); }
[data-theme="dark"] .cad-win{ background:#151b26; }
.cad-bar{ display:flex; align-items:center; justify-content:space-between; gap:10px; padding:10px 14px; border-bottom:1px solid var(--line,#eef1f6); }
[data-theme="dark"] .cad-bar{ border-color:#2b3441; }
.cad-title{ font-size:14px; font-weight:600; color:#37475c; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
[data-theme="dark"] .cad-title{ color:#dbe3ef; }
.cad-tools{ display:flex; gap:6px; flex:none; }
.cad-tools button{ padding:5px 12px; font-size:12px; border-radius:8px; border:1px solid #d8e0ec; background:#fff; color:#4a5768; cursor:pointer; }
.cad-tools button:hover{ border-color:#3b82f6; color:#2f6fd0; }
.cad-tools button.on{ background:#3b82f6; border-color:#3b82f6; color:#fff; }
.cad-tools .cad-x{ font-size:18px; line-height:1; padding:3px 11px; }
[data-theme="dark"] .cad-tools button{ background:#1b2230; border-color:#2b3441; color:#cbd5e3; }
[data-theme="dark"] .cad-tools button:hover{ border-color:#3b82f6; color:#8ab4ff; }
.cad-stage{ position:relative; flex:1; min-height:0; background:#11161f; }
.cad-stage canvas{ display:block; width:100%; height:100%; }
.cad-msg{ position:absolute; inset:0; display:flex; align-items:center; justify-content:center; color:#cbd5e3; font-size:14px; }
.cad-msg.err{ color:#ff9a9a; padding:0 40px; text-align:center; }
.cad-tip{ position:absolute; left:12px; bottom:10px; font-size:12px; color:#8a97ad; background:rgba(0,0,0,.28); padding:3px 9px; border-radius:6px; }

/* ---------- ⑯ 全站日期选择器（app.js ⑯，点开固定「日」视图） ---------- */
.dtp-panel{ position:fixed; z-index:3000; width:252px; background:#fff; border:1px solid var(--line);
  border-radius:12px; box-shadow:0 12px 32px rgba(20,40,80,.18); padding:10px; user-select:none; }
.dtp-head{ display:flex; align-items:center; gap:2px; margin-bottom:6px; }
.dtp-title{ flex:1; text-align:center; font-weight:700; font-size:13px; color:#2b3a55; }
.dtp-btn{ min-width:24px; height:24px; line-height:1; border:none; background:transparent; border-radius:6px;
  cursor:pointer; color:#5b6b85; font-size:13px; padding:0 4px; }
.dtp-btn:hover{ background:#eef3fb; }
.dtp-week,.dtp-grid{ display:grid; grid-template-columns:repeat(7,1fr); gap:2px; }
.dtp-week span{ text-align:center; font-size:11px; color:#8a97ad; padding:2px 0; }
.dtp-day{ height:28px; border:none; background:transparent; border-radius:7px; cursor:pointer;
  font-size:12.5px; color:#3a4658; text-align:center; padding:0; }
.dtp-day:hover{ background:#eef3fb; }
.dtp-day.dim{ color:#b8c2d4; }
.dtp-day.today{ box-shadow:inset 0 0 0 1px #7aa2ff; }
.dtp-day.sel{ background:var(--brand,#3b82f6); color:#fff; font-weight:700; }
.dtp-day.sel:hover{ background:var(--brand,#3b82f6); }
.dtp-foot{ display:flex; justify-content:space-between; margin-top:6px; padding-top:6px; border-top:1px solid var(--line); }
.dtp-foot button{ border:none; background:transparent; color:var(--brand,#3b82f6); font-size:12px; cursor:pointer; padding:4px 8px; border-radius:6px; }
.dtp-foot button:hover{ background:#eef3fb; }
[data-theme="dark"] .dtp-panel{ background:#1b2330; border-color:#2a3340; box-shadow:0 12px 32px rgba(0,0,0,.5); }
[data-theme="dark"] .dtp-title{ color:#eef2f8; }
[data-theme="dark"] .dtp-day{ color:#dbe3f0; }
[data-theme="dark"] .dtp-day.dim{ color:#55617a; }
[data-theme="dark"] .dtp-btn:hover, [data-theme="dark"] .dtp-foot button:hover{ background:#243048; }

/* 强制隐藏原生 date 输入框的日历按钮与微调箭头，避免弹旧界面 */
input[type=date]::-webkit-calendar-picker-indicator,
input[type=date]::-webkit-inner-spin-button{
  display:none; -webkit-appearance:none; appearance:none;
}

/* ---------- CAD 查看器：全屏态 + 3D 部件面板 ---------- */
.cad-mask:fullscreen{ padding:0; background:#000; }
.cad-mask:fullscreen .cad-win{ max-width:none; width:100%; height:100vh; border-radius:0; box-shadow:none; }
.cad-parts{ position:absolute; top:10px; left:10px; z-index:6; width:210px; max-height:72%; overflow:auto;
  background:rgba(15,20,30,.85); border:1px solid #2a3340; border-radius:10px; padding:8px;
  font-size:12px; color:#dbe3f0; user-select:none; }
.cad-parts-h{ display:flex; justify-content:space-between; align-items:center; font-weight:700; margin-bottom:6px; padding:0 2px; }
.cad-parts-h button{ border:none; background:transparent; color:#7aa2ff; cursor:pointer; font-size:12px; padding:2px 4px; }
.cad-parts-h button:hover{ text-decoration:underline; }
.cad-parts-list{ display:flex; flex-direction:column; gap:1px; }
.cad-part{ display:flex; align-items:center; gap:6px; padding:3px 4px; border-radius:6px; cursor:pointer; }
.cad-part:hover{ background:rgba(122,162,255,.12); }
.cad-part input{ accent-color:#3b82f6; flex:none; margin:0; }
.cad-part .pn{ flex:1; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.cad-part .solo{ border:none; background:transparent; color:#8a97ad; cursor:pointer; font-size:11px;
  padding:1px 5px; border-radius:4px; opacity:0; flex:none; }
.cad-part:hover .solo{ opacity:1; }
.cad-part .solo:hover{ color:#7aa2ff; background:rgba(122,162,255,.15); }

/* —— 筛选条内可搜索下拉（.selsrch）浮层提层 ——
   .content > .toolbar 有入场动画 procRise（transform 非 none）→ 生成层叠上下文，
   内部 .ssel-panel 的 z-index:70 被困住，会被紧随其后的 .cards（position:relative）盖住，
   表现为「下拉选项看得见却点不到」。这里给筛选条显式提层。 */
.content > .toolbar,
.content > form.toolbar{ position:relative; z-index:5; }

/* —— 仪表盘图表容器 ——
   Chart.js 默认 maintainAspectRatio:true，甜甜圈会按容器宽度撑成正方形（529px 见方）。
   这里统一用固定高度容器 + maintainAspectRatio:false 锁定高度。 */
.chart-box{ position:relative; width:100%; }
.chart-box.h-lg{ height:230px; }
.chart-box.h-sm{ height:200px; }
@media (max-width:900px){
  .chart-box.h-lg{ height:210px; }
  .chart-box.h-sm{ height:180px; }
}

/* ============================================================
   站内信组件（右下角弹窗 / 贴边收起）
   ============================================================ */
.notif-widget{ position:fixed; right:18px; bottom:18px; z-index:1200; font-size:13px; }
.notif-dock{ display:none; align-items:center; gap:6px; background:var(--brand); color:#fff;
  padding:9px 13px; border-radius:22px; box-shadow:var(--sh-2); cursor:pointer; transition:transform .15s, box-shadow .15s; }
.notif-dock:hover{ transform:translateY(-1px); box-shadow:var(--sh-3); }
.notif-bell{ font-size:16px; line-height:1; }
.notif-count{ min-width:18px; height:18px; padding:0 5px; border-radius:10px; background:#fff; color:var(--brand);
  font-size:11px; font-weight:700; display:inline-flex; align-items:center; justify-content:center; }
.notif-widget.docked .notif-dock{ display:inline-flex; }
.notif-widget.docked .notif-panel{ display:none; }
.notif-widget.open .notif-panel{ display:flex; }
.notif-widget.open .notif-dock{ display:none; }

.notif-panel{ width:420px; max-width:calc(100vw - 36px); height:32vh; min-height:240px; flex-direction:column; overflow:hidden;
  background:#fff; border:1px solid var(--line); border-radius:14px; box-shadow:var(--sh-3); }
.notif-head{ display:flex; align-items:center; justify-content:space-between; padding:11px 14px; border-bottom:1px solid var(--line); }
.notif-title{ font-weight:700; color:#243b5e; font-size:14px; }
.notif-close{ border:none; background:#f1f5fb; color:#5b6b85; border-radius:8px; padding:4px 10px; cursor:pointer; font-size:12px; }
.notif-close:hover{ background:#e6edf6; color:#243b5e; }
.notif-tabs{ display:flex; gap:5px; padding:8px 10px; border-bottom:1px solid var(--line); }
.notif-tab{ flex:1; border:1px solid var(--line); background:#f4f7fb; color:#5b6b85; padding:6px 4px; border-radius:9px;
  cursor:pointer; font-size:12px; transition:background .15s, color .15s, border-color .15s; position:relative; }
.notif-tab:hover{ border-color:var(--brand); color:var(--brand); }
.notif-tab.active{ background:var(--brand); color:#fff; border-color:var(--brand); }
.notif-tab .badge{ display:inline-block; min-width:16px; padding:0 5px; margin-left:2px; border-radius:9px; background:rgba(0,0,0,.12);
  font-size:11px; font-weight:700; line-height:16px; }
.notif-tab:not(.active) .badge{ background:var(--brand); color:#fff; }
.notif-body{ flex:1 1 auto; min-height:0; overflow:auto; padding:8px 10px; }
.notif-empty{ color:#9aa6ba; text-align:center; padding:26px 10px; font-size:13px; }

.notif-item{ display:flex; gap:9px; align-items:flex-start; padding:9px 10px; border-radius:10px; margin-bottom:5px;
  background:#f8fafd; border:1px solid #eef1f6; text-decoration:none; color:inherit; cursor:default; }
a.notif-item{ cursor:pointer; }
.notif-item:hover{ background:#f0f5fc; }
.ni-tag{ flex:none; align-self:flex-start; margin-top:1px; font-size:11px; font-weight:600; padding:2px 7px; border-radius:7px;
  background:#e7eefb; color:#3b6fd1; }
.notif-item.lv-danger .ni-tag{ background:#fdeaea; color:#c0392b; }
.notif-item.lv-warn .ni-tag{ background:#fff3e0; color:#b9770e; }
.notif-item.lv-info .ni-tag{ background:#e7eefb; color:#3b6fd1; }
.ni-main{ display:flex; flex-direction:column; gap:2px; min-width:0; flex:1 1 auto; }
.ni-title{ font-weight:600; color:#243b5e; font-size:13px; line-height:1.35; }
.ni-desc{ color:#5b6b85; font-size:12px; line-height:1.4; word-break:break-word; }
.ni-from{ color:#8a97ad; font-weight:400; }
.ni-time{ color:#9aa6ba; font-size:11px; }
.notif-item.msg.unread{ background:#eef4ff; border-color:#d6e4ff; }
.notif-item.msg.unread .ni-title::after{ content:''; display:inline-block; width:7px; height:7px; border-radius:50%;
  background:#3b82f6; margin-left:6px; vertical-align:middle; }
.notif-item.ann.pinned{ background:#fff8ec; border-color:#f6e6c4; }
.notif-item.ann{ position:relative; }
.ni-acts{ flex:none; display:flex; flex-direction:column; gap:4px; margin-left:8px; align-self:flex-start; }
.ni-pin,.ni-edit{ flex:none; width:100%; border:1px solid #d7deea; background:#fff; color:#3b6fb0; cursor:pointer;
  font-size:12px; line-height:1; padding:4px 9px; border-radius:6px; transition:all .15s; white-space:nowrap; }
.ni-pin:hover,.ni-edit:hover{ background:#eef4fb; border-color:#3b6fb0; }
.ni-del{ flex:none; width:100%; border:1px solid #f0c9c5; background:#fff;
  color:#c0392b; cursor:pointer; font-size:12px; line-height:1; padding:4px 9px; border-radius:6px;
  transition:opacity .15s, color .15s, background .15s, border-color .15s; white-space:nowrap; }
.ni-del:hover{ color:#fff; background:#c0392b; border-color:#c0392b; }

.notif-compose{ padding:8px 2px 2px; }
.btn-sm{ padding:5px 12px; font-size:12px; }
.compose-box{ background:#f6f9fd; border:1px solid var(--line); border-radius:10px; padding:10px; margin-top:4px; }
.compose-box .field{ margin-bottom:8px; }
.compose-box .field label{ display:block; font-size:12px; color:#6a788f; margin-bottom:4px; }
.compose-box .field input, .compose-box .field select, .compose-box .field textarea{
  width:100%; padding:7px 9px; border:1px solid var(--line); border-radius:8px; font-size:13px; font-family:inherit;
  background:#fff; color:#243b5e; box-sizing:border-box; }
.compose-box .field input:focus, .compose-box .field select:focus, .compose-box .field textarea:focus{
  outline:none; border-color:var(--brand); box-shadow:var(--ring); }
.compose-actions{ display:flex; gap:8px; }
.ni-editform{ flex:1 1 auto; min-width:0; display:flex; flex-direction:column; gap:6px; }
.ni-editform .field{ margin-bottom:0; }
.ni-editform input[type="text"], .ni-editform input:not([type]), .ni-editform textarea{ width:100%; box-sizing:border-box; font-size:13px; }
.ni-editform textarea{ resize:vertical; min-height:90px; line-height:1.6; }
[data-theme="dark"] .ni-editform input, [data-theme="dark"] .ni-editform textarea{ background:#1d2530; border-color:#2a3340; color:#eef2f8; }
.compose-msg{ font-size:12px; margin-top:6px; min-height:14px; }
.compose-msg.ok{ color:#1a7f44; }
.compose-msg.err{ color:#c0392b; }

/* 暗色主题 */
[data-theme="dark"] .notif-panel{ background:#161c26; border-color:#2a3340; }
[data-theme="dark"] .notif-title{ color:#eef2f8; }
[data-theme="dark"] .notif-close{ background:#1d2530; color:#9aa6ba; }
[data-theme="dark"] .notif-close:hover{ background:#243040; color:#eef2f8; }
[data-theme="dark"] .notif-tabs{ border-color:#2a3340; }
[data-theme="dark"] .notif-tab{ background:#1d2530; color:#9aa6ba; border-color:#2a3340; }
[data-theme="dark"] .notif-tab:hover{ border-color:#5b8cff; color:#8fb8ff; }
[data-theme="dark"] .notif-body{ background:#161c26; }
[data-theme="dark"] .notif-empty{ color:#7e8aa0; }
[data-theme="dark"] .notif-item{ background:#1b2230; border-color:#2a3340; }
[data-theme="dark"] .ni-del{ color:#ff8a7a; border-color:#4a3232; background:#241c1c; }
[data-theme="dark"] .ni-del:hover{ color:#fff; background:#a93226; border-color:#a93226; }
[data-theme="dark"] .ni-pin,[data-theme="dark"] .ni-edit{ color:#8fb6e6; border-color:#324255; background:#1c2533; }
[data-theme="dark"] .ni-pin:hover,[data-theme="dark"] .ni-edit:hover{ background:#243248; border-color:#5a82b0; }
[data-theme="dark"] .notif-item:hover{ background:#212a3a; }
[data-theme="dark"] .ni-title{ color:#eef2f8; }
[data-theme="dark"] .ni-desc{ color:#9aa6ba; }
[data-theme="dark"] .notif-item.lv-danger .ni-tag{ background:#3a2326; color:#ff8a80; }
[data-theme="dark"] .notif-item.lv-warn .ni-tag{ background:#3a2f1d; color:#ffc266; }
[data-theme="dark"] .notif-item.lv-info .ni-tag{ background:#1d2b44; color:#8fb1ff; }
[data-theme="dark"] .notif-item.msg.unread{ background:#1c2740; border-color:#2c3c63; }
[data-theme="dark"] .notif-item.ann.pinned{ background:#2b2718; border-color:#4a3f22; }
[data-theme="dark"] .compose-box{ background:#1b2230; border-color:#2a3340; }
[data-theme="dark"] .compose-box .field label{ color:#9aa6ba; }
[data-theme="dark"] .compose-box .field input, [data-theme="dark"] .compose-box .field select, [data-theme="dark"] .compose-box .field textarea{
  background:#11161f; border-color:#2a3340; color:#eef2f8; }
[data-theme="dark"] .notif-count{ background:#0f141c; color:#8fb8ff; }