/* ============================================================
   Feinova Price List (飞鸟云报价系统) — UI v3 设计系统 (改版落地)
   主题: Asuka 绯红 #C62828 + 琥珀 #E08A00 (沿用已确认品牌决策)
   结构:
     1. v3 设计令牌 (浅/深)         2. Bootstrap 变量映射
     3. v3 组件库                   4. Bootstrap 组件皮肤
     5. v2 兼容层 (迁移过渡期)      6. v1.1/v1.2 功能样式 (价格趋势/富文本/Lightbox/拖拽)
     7. 登录页 / A4 单据            8. 响应式
   ============================================================ */

/* ---------- 1. v3 设计令牌 ---------- */
:root {
  --fnv-primary: #C62828;
  --fnv-primary-hover: #D0342C;
  --fnv-primary-strong: #A81F1F;
  --fnv-primary-soft: rgba(198, 40, 40, .09);
  --fnv-primary-softer: rgba(198, 40, 40, .05);
  --fnv-amber: #E08A00;
  --fnv-amber-soft: rgba(224, 138, 0, .10);

  --fnv-green: #059669;   --fnv-green-soft: rgba(5, 150, 105, .10);
  --fnv-orange: #D97706;  --fnv-orange-soft: rgba(217, 119, 6, .12);
  --fnv-blue: #0369A1;    --fnv-blue-soft: rgba(3, 105, 161, .10);
  --fnv-violet: #7C3AED;  --fnv-violet-soft: rgba(124, 58, 237, .10);
  --fnv-rose: #E11D48;    --fnv-rose-soft: rgba(225, 29, 72, .10);
  --fnv-gray: #6B7280;    --fnv-gray-soft: rgba(107, 114, 128, .13);

  --fnv-bg: #F7F5F6;
  --fnv-surface: #FFFFFF;
  --fnv-surface-2: #F1EEF0;
  --fnv-surface-3: #EAE6E8;
  --fnv-border: #E7E2E4;
  --fnv-border-strong: #D8D2D5;
  --fnv-text: #1F1C1E;
  --fnv-text-2: #6B6669;
  --fnv-text-3: #9B9498;
  --fnv-inverse: #FFFFFF;

  --fnv-sidebar-w: 244px;
  --fnv-sidebar-bg: #1B1719;
  --fnv-sidebar-bg2: #241E21;
  --fnv-sidebar-text: rgba(255, 255, 255, .72);
  --fnv-sidebar-muted: rgba(255, 255, 255, .40);
  --fnv-sidebar-hover: rgba(255, 255, 255, .07);
  --fnv-sidebar-active: rgba(198, 40, 40, .22);

  --fnv-radius: 14px;
  --fnv-radius-sm: 10px;
  --fnv-radius-xs: 8px;
  --fnv-shadow-sm: 0 1px 2px rgba(20, 14, 18, .05), 0 1px 3px rgba(20, 14, 18, .06);
  --fnv-shadow: 0 2px 6px rgba(20, 14, 18, .05), 0 4px 14px rgba(20, 14, 18, .07);
  --fnv-shadow-lg: 0 12px 34px rgba(20, 14, 18, .16);

  --fnv-font: -apple-system, "Segoe UI", "PingFang SC", "Microsoft YaHei", "Helvetica Neue", Arial, sans-serif;
  --fnv-num: "SF Mono", ui-monospace, "Cascadia Code", Consolas, monospace;
  --fnv-ease: cubic-bezier(.21, 1.02, .73, 1);
  --fnv-speed: .16s;

  /* v2 别名令牌 (兼容旧视图) */
  --avq-primary: #C62828;
  --avq-primary-strong: #D0342C;
  --avq-primary-soft: rgba(198, 40, 40, .08);
  --avq-accent: #E08A00;
  --avq-success: #059669;
  --avq-warning: #D97706;
  --avq-danger: #E11D48;
  --avq-info: #0369A1;
  --avq-radius: 14px;
  --avq-radius-sm: 8px;
  --avq-shadow-sm: var(--fnv-shadow-sm);
  --avq-shadow: var(--fnv-shadow);
  --avq-shadow-lg: var(--fnv-shadow-lg);
  --avq-font-num: var(--fnv-num);
  --avq-sidebar-w: var(--fnv-sidebar-w);
}

[data-bs-theme="dark"] {
  --fnv-primary: #C62828;
  --fnv-primary-hover: #D0342C;
  --fnv-primary-strong: #B02323;
  --fnv-primary-soft: rgba(248, 113, 113, .14);
  --fnv-primary-softer: rgba(248, 113, 113, .07);
  --fnv-amber: #F59E0B;
  --fnv-amber-soft: rgba(245, 158, 11, .12);

  --fnv-green: #34D399;  --fnv-green-soft: rgba(52, 211, 153, .13);
  --fnv-orange: #FBBF24; --fnv-orange-soft: rgba(251, 191, 36, .13);
  --fnv-blue: #7DD3FC;   --fnv-blue-soft: rgba(125, 211, 252, .12);
  --fnv-violet: #C4B5FD; --fnv-violet-soft: rgba(196, 181, 253, .13);
  --fnv-rose: #FDA4AF;   --fnv-rose-soft: rgba(253, 164, 175, .13);
  --fnv-gray: #9CA3AF;   --fnv-gray-soft: rgba(156, 163, 175, .14);

  --fnv-bg: #141216;
  --fnv-surface: #1D191C;
  --fnv-surface-2: #262124;
  --fnv-surface-3: #2E292C;
  --fnv-border: #332D30;
  --fnv-border-strong: #463F43;
  --fnv-text: #ECE8EA;
  --fnv-text-2: #A6A0A4;
  --fnv-text-3: #7A7478;
  --fnv-inverse: #141216;

  --fnv-shadow-sm: 0 1px 2px rgba(0, 0, 0, .25), 0 1px 3px rgba(0, 0, 0, .3);
  --fnv-shadow: 0 2px 6px rgba(0, 0, 0, .3), 0 4px 14px rgba(0, 0, 0, .35);
  --fnv-shadow-lg: 0 12px 34px rgba(0, 0, 0, .5);

  --avq-primary-soft: rgba(248, 113, 113, .14);
}

/* ---------- 2. Bootstrap 变量映射 ---------- */
[data-bs-theme="light"] {
  --bs-primary: #C62828;
  --bs-primary-rgb: 198, 40, 40;
  --bs-primary-bg-subtle: #FBE9E9;
  --bs-primary-text-emphasis: #A81F1F;
  --bs-body-bg: #F7F5F6;
  --bs-body-color: #1F1C1E;
  --bs-emphasis-color: #141114;
  --bs-border-color: #E7E2E4;
  --bs-tertiary-bg: #F1EEF0;
  --bs-secondary-color: #6B6669;
  --bs-secondary-bg: #EAE6E8;
  --bs-link-color: #C62828;
  --bs-link-color-rgb: 198, 40, 40;
  --bs-link-hover-color: #D0342C;
}
[data-bs-theme="dark"] {
  --bs-primary: #C62828;
  --bs-primary-rgb: 198, 40, 40;
  --bs-primary-bg-subtle: rgba(198, 40, 40, .25);
  --bs-primary-text-emphasis: #FCA5A5;
  --bs-body-bg: #141216;
  --bs-body-color: #ECE8EA;
  --bs-emphasis-color: #FFFFFF;
  --bs-border-color: #332D30;
  --bs-tertiary-bg: #262124;
  --bs-secondary-color: #A6A0A4;
  --bs-secondary-bg: #2E292C;
  --bs-link-color: #F87171;
  --bs-link-color-rgb: 248, 113, 113;
  --bs-link-hover-color: #FCA5A5;
}

/* ---------- 3. 全局基础 ---------- */
.hidden { display: none !important; }
* { box-sizing: border-box; }
body {
  margin: 0;
  font-family: var(--fnv-font);
  font-size: 14px;
  line-height: 1.55;
  color: var(--fnv-text);
  background: var(--fnv-bg);
  -webkit-font-smoothing: antialiased;
}
a { color: var(--fnv-primary); text-decoration: none; }
a:hover { color: var(--fnv-primary-hover); }
.num { font-variant-numeric: tabular-nums; }
code { font-family: var(--fnv-num); font-size: .92em; color: inherit; }
::selection { background: rgba(198, 40, 40, .18); }

::-webkit-scrollbar { width: 10px; height: 10px; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb { background: var(--fnv-border-strong); border-radius: 8px; border: 2px solid var(--fnv-bg); }
::-webkit-scrollbar-thumb:hover { background: var(--fnv-text-3); }

@keyframes fnv-page-in { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: none; } }
@keyframes fnv-pop { from { opacity: 0; transform: scale(.96) translateY(6px); } to { opacity: 1; transform: none; } }
@keyframes fnv-toast-in { from { opacity: 0; transform: translateX(24px); } to { opacity: 1; transform: none; } }
@keyframes fnv-fade { from { opacity: 0; } to { opacity: 1; } }
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: .01ms !important; transition-duration: .01ms !important; }
}

/* ---------- 3.1 布局骨架 ---------- */
.app-layout { display: flex; min-height: 100vh; }
.main-content { flex: 1; min-width: 0; margin-left: var(--fnv-sidebar-w); display: flex; flex-direction: column; }
.page-content { padding: 24px 28px 40px; flex: 1; animation: fnv-page-in .24s var(--fnv-ease) both; }

/* ---------- 3.2 侧边栏 ---------- */
.sidebar {
  width: var(--fnv-sidebar-w);
  position: fixed; inset: 0 auto 0 0;
  display: flex; flex-direction: column;
  background: linear-gradient(180deg, var(--fnv-sidebar-bg) 0%, var(--fnv-sidebar-bg2) 100%);
  padding: 18px 14px 14px;
  z-index: 1030;
  transition: transform .25s ease;
}
.sb-brand { display: flex; align-items: center; gap: 10px; padding: 2px 8px 20px; }
.sb-logo { font-size: 24px; line-height: 1; flex-shrink: 0; }
.bird-stroke { -webkit-text-stroke: 1px rgba(255,255,255,.5); text-shadow: 0 0 4px rgba(255,255,255,.3); }
.sb-title { font-size: 14px; font-weight: 800; color: #fff; letter-spacing: .01em; white-space: nowrap; line-height: 1.25; }
.sb-sub { font-size: 10px; color: var(--fnv-sidebar-muted); margin-top: 1px; }

.sb-nav { flex: 1; overflow-y: auto; margin: 0 -4px; padding: 0 4px; }
.sb-group { font-size: 10.5px; text-transform: uppercase; letter-spacing: .09em; color: var(--fnv-sidebar-muted); padding: 16px 10px 6px; font-weight: 700; }
.sb-group:first-child { padding-top: 4px; }
.sb-item {
  display: flex; align-items: center; gap: 11px;
  padding: 8.5px 11px; margin-bottom: 2px;
  border-radius: 10px; font-size: 13.5px; font-weight: 500;
  color: var(--fnv-sidebar-text); text-decoration: none;
  position: relative; transition: background .15s, color .15s;
}
.sb-item svg { width: 17px; height: 17px; flex-shrink: 0; opacity: .85; transition: transform .18s var(--fnv-ease); }
.sb-item:hover { background: var(--fnv-sidebar-hover); color: #fff; }
.sb-item:hover svg { transform: translateX(2px); }
.sb-item.active { background: var(--fnv-sidebar-active); color: #fff; font-weight: 600; box-shadow: inset 0 0 0 1px rgba(198, 40, 40, .35); }
.sb-item.active::before {
  content: ""; position: absolute; left: -14px; top: 22%; bottom: 22%; width: 3.5px;
  border-radius: 0 4px 4px 0; background: linear-gradient(180deg, #F87171, #F59E0B);
}
.sb-badge {
  margin-left: auto; font-size: 10px; font-weight: 700; line-height: 1;
  background: var(--fnv-rose); color: #fff; border-radius: 20px;
  padding: 3px 7px; min-width: 18px; text-align: center; font-variant-numeric: tabular-nums;
}
.sb-badge.amber { background: var(--fnv-amber); color: #fff; }

.sb-footer { margin-top: 12px; padding: 10px; border-radius: 10px; background: rgba(255,255,255,.06); }
.sb-user { display: flex; align-items: center; gap: 9px; }
.sb-name { color: #fff; font-size: 12.5px; font-weight: 600; line-height: 1.3; }
.sb-role { color: var(--fnv-sidebar-muted); font-size: 10.5px; }

/* ---------- 3.3 顶栏 ---------- */
.topbar {
  display: flex; align-items: center; gap: 12px;
  padding: 10px 24px;
  background: color-mix(in srgb, var(--fnv-bg) 85%, transparent);
  backdrop-filter: blur(12px);
  border-bottom: 1px solid var(--fnv-border);
  position: sticky; top: 0; z-index: 1020;
}
.tb-burger { display: none; }
.cmd-trigger {
  flex: 1; max-width: 400px;
  display: flex; align-items: center; gap: 9px;
  height: 38px; padding: 0 12px;
  border-radius: var(--fnv-radius-sm);
  background: var(--fnv-surface-2); border: 1px solid transparent;
  color: var(--fnv-text-3); font-size: 13px; cursor: pointer;
  transition: border-color .15s, background .15s;
}
.cmd-trigger:hover { border-color: var(--fnv-border-strong); background: var(--fnv-surface-3); }
.cmd-trigger svg { width: 15px; height: 15px; }
.cmd-trigger .kbd {
  margin-left: auto; font-size: 10.5px; color: var(--fnv-text-2);
  border: 1px solid var(--fnv-border-strong); border-radius: 6px; padding: 2px 7px;
  background: var(--fnv-surface); font-family: var(--fnv-num); letter-spacing: .03em;
}
.tb-actions { display: flex; align-items: center; gap: 8px; margin-left: auto; }

.icon-btn {
  width: 36px; height: 36px; border-radius: 9px;
  border: 1px solid var(--fnv-border); background: var(--fnv-surface);
  display: inline-flex; align-items: center; justify-content: center;
  color: var(--fnv-text-2); position: relative; cursor: pointer;
  transition: all .15s;
}
.icon-btn:hover { color: var(--fnv-primary); border-color: var(--fnv-primary); background: var(--fnv-primary-soft); }
.icon-btn:active { transform: scale(.95); }
.icon-btn svg { width: 16px; height: 16px; }
.icon-btn .dot {
  position: absolute; top: 7px; right: 8px; width: 7px; height: 7px; border-radius: 50%;
  background: var(--fnv-rose); border: 1.5px solid var(--fnv-surface);
}

.mode-seg {
  display: inline-flex; background: var(--fnv-surface-2); border-radius: 9px; padding: 3px;
  border: 1px solid var(--fnv-border); height: 36px;
}
.mode-seg button { border: none; background: transparent; border-radius: 7px;
  font-size: 11.5px; font-weight: 600; color: var(--fnv-text-2);
  padding: 3px 12px; transition: all .15s; cursor: pointer; font-family: var(--fnv-font);
}
.mode-seg button:hover { color: var(--fnv-text); }
.mode-seg button.active { background: var(--fnv-surface); color: var(--fnv-primary); box-shadow: var(--fnv-shadow-sm); }
/* v1.5.6: 预览页语言切换用 <a> 而非 <button>; 补齐样式(此前丢失→文字挤在一起)+固定宽度防抖动 */
.mode-seg a { border: none; background: transparent; border-radius: 7px;
  font-size: 12px; font-weight: 600; color: var(--fnv-text-2);
  padding: 4px 12px; min-width: 44px; text-align: center; white-space: nowrap;
  text-decoration: none; transition: all .15s; cursor: pointer;
  font-family: var(--fnv-font); display: inline-flex; align-items: center; justify-content: center;
}
.mode-seg a:hover { color: var(--fnv-text); }
.mode-seg a.active { background: var(--fnv-surface); color: var(--fnv-primary); box-shadow: var(--fnv-shadow-sm); }
.mode-seg a + a { margin-left: 2px; }

.avatar {
  width: 32px; height: 32px; border-radius: 50%;
  background: linear-gradient(135deg, #C62828, #E08A00);
  color: #fff; font-size: 13px; font-weight: 700;
  display: inline-flex; align-items: center; justify-content: center;
  user-select: none; flex-shrink: 0;
}
.avatar.lg { width: 44px; height: 44px; font-size: 17px; }
.avatar.sm { width: 26px; height: 26px; font-size: 11px; }

.tb-user-btn { border: none; background: none; padding: 0; cursor: pointer; border-radius: 50%; display: inline-flex; }

.menu { position: relative; display: inline-flex; }
.menu-panel {
  position: absolute; right: 0; top: calc(100% + 8px); min-width: 190px;
  background: var(--fnv-surface); border: 1px solid var(--fnv-border);
  border-radius: var(--fnv-radius-sm); box-shadow: var(--fnv-shadow-lg);
  padding: 6px; z-index: 1100; display: none; animation: fnv-pop .16s var(--fnv-ease) both;
}
.menu.open .menu-panel { display: block; }
.menu-item {
  display: flex; align-items: center; gap: 9px;
  padding: 8px 10px; border-radius: 8px; font-size: 13px;
  color: var(--fnv-text); text-decoration: none; cursor: pointer; border: none; background: none; width: 100%;
  font-family: var(--fnv-font); text-align: left;
}
.menu-item:hover { background: var(--fnv-surface-2); }
.menu-item.danger { color: var(--fnv-rose); }
.menu-item svg { width: 14px; height: 14px; color: var(--fnv-text-3); }
.menu-item.danger svg { color: var(--fnv-rose); }
.menu-head { font-size: 11px; font-weight: 700; color: var(--fnv-text-3); padding: 6px 10px 4px; text-transform: uppercase; letter-spacing: .06em; }
.menu-sep { height: 1px; background: var(--fnv-border); margin: 5px 8px; }

/* 主题按钮三态图标 */
[data-theme-mode-icon] { display: none; }
html[data-theme-mode="auto"] [data-theme-mode-icon="auto"] { display: inline-flex; }
html[data-theme-mode="dark"] [data-theme-mode-icon="dark"] { display: inline-flex; }
html[data-theme-mode="light"] [data-theme-mode-icon="light"] { display: inline-flex; }

/* ---------- 3.4 页头 ---------- */
.page-head { display: flex; justify-content: space-between; align-items: flex-start; margin-bottom: 20px; flex-wrap: wrap; gap: 12px; }
.page-title { font-size: 19px; font-weight: 800; letter-spacing: -.01em; line-height: 1.3; }
.page-sub { font-size: 12.5px; color: var(--fnv-text-2); margin-top: 3px; }
.page-actions { display: flex; gap: 8px; flex-wrap: wrap; align-items: center; }

/* ---------- 3.5 卡片 ---------- */
.card {
  background: var(--fnv-surface);
  border: 1px solid var(--fnv-border);
  border-radius: var(--fnv-radius);
  box-shadow: var(--fnv-shadow-sm);
}
.card-head {
  padding: 14px 18px; border-bottom: 1px solid var(--fnv-border);
  display: flex; align-items: center; justify-content: space-between; gap: 10px; flex-wrap: wrap;
}
.card-title { font-size: 13.5px; font-weight: 700; display: flex; align-items: center; gap: 8px; }
.card-title svg { width: 16px; height: 16px; color: var(--fnv-primary); }
.card-sub { font-size: 11.5px; color: var(--fnv-text-3); }
.card-body { padding: 18px; }
.card-foot { padding: 12px 18px; border-top: 1px solid var(--fnv-border); display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }

/* ---------- 3.6 KPI ---------- */
.kpi-grid { display: grid; grid-template-columns: repeat(6, 1fr); gap: 14px; margin-bottom: 16px; }
.kpi {
  background: var(--fnv-surface); border: 1px solid var(--fnv-border);
  border-radius: var(--fnv-radius); box-shadow: var(--fnv-shadow-sm);
  padding: 15px 16px; position: relative; overflow: hidden;
  transition: transform .15s, box-shadow .15s;
}
.kpi:hover { transform: translateY(-2px); box-shadow: var(--fnv-shadow); }
.kpi::after { content: ""; position: absolute; right: -28px; top: -28px; width: 92px; height: 92px; border-radius: 50%; background: var(--kpi-tint, var(--fnv-primary-softer)); }
.kpi-top { display: flex; align-items: center; justify-content: space-between; position: relative; z-index: 1; }
.kpi-icon {
  width: 38px; height: 38px; border-radius: 10px;
  display: flex; align-items: center; justify-content: center;
  background: var(--kpi-soft, var(--fnv-primary-soft)); color: var(--kpi-color, var(--fnv-primary));
}
.kpi-icon svg { width: 19px; height: 19px; }
.kpi-label { font-size: 11.5px; color: var(--fnv-text-2); font-weight: 600; margin: 10px 0 2px; position: relative; z-index: 1; }
.kpi-value { font-size: 23px; font-weight: 800; letter-spacing: -.02em; line-height: 1.2; position: relative; z-index: 1; }
.kpi-trend { font-size: 11px; color: var(--fnv-text-3); margin-top: 3px; position: relative; z-index: 1; }
.kpi-trend .up { color: var(--fnv-rose); font-weight: 700; }
.kpi-trend .down { color: var(--fnv-green); font-weight: 700; }
.kpi.green { --kpi-soft: var(--fnv-green-soft); --kpi-color: var(--fnv-green); --kpi-tint: var(--fnv-green-soft); }
.kpi.amber { --kpi-soft: var(--fnv-amber-soft); --kpi-color: var(--fnv-amber); --kpi-tint: var(--fnv-amber-soft); }
.kpi.blue { --kpi-soft: var(--fnv-blue-soft); --kpi-color: var(--fnv-blue); --kpi-tint: var(--fnv-blue-soft); }
.kpi.violet { --kpi-soft: var(--fnv-violet-soft); --kpi-color: var(--fnv-violet); --kpi-tint: var(--fnv-violet-soft); }
.kpi.rose { --kpi-soft: var(--fnv-rose-soft); --kpi-color: var(--fnv-rose); --kpi-tint: var(--fnv-rose-soft); }

/* ---------- 3.7 页签 / 分段 ---------- */
.seg-tabs { display: inline-flex; background: var(--fnv-surface-2); border-radius: 9px; padding: 3px; border: 1px solid var(--fnv-border); gap: 2px; }
.seg-tabs a, .seg-tabs button {
  border: none; background: transparent; border-radius: 7px;
  font-size: 12.5px; font-weight: 600; color: var(--fnv-text-2);
  padding: 5px 14px; transition: all .15s; cursor: pointer; text-decoration: none;
  display: inline-flex; align-items: center; gap: 6px; font-family: var(--fnv-font);
}
.seg-tabs a:hover, .seg-tabs button:hover { color: var(--fnv-text); }
.seg-tabs a.active, .seg-tabs button.active { background: var(--fnv-surface); color: var(--fnv-primary); box-shadow: var(--fnv-shadow-sm); }
.seg-tabs .count { font-size: 10.5px; font-weight: 700; background: var(--fnv-surface-3); border-radius: 20px; padding: 1px 7px; color: var(--fnv-text-2); }
.seg-tabs a.active .count { background: var(--fnv-primary-soft); color: var(--fnv-primary); }

.tab-line { display: flex; gap: 2px; border-bottom: 1px solid var(--fnv-border); padding: 0 18px; flex-wrap: wrap; }
.tab-line a {
  padding: 11px 14px; font-size: 13px; font-weight: 600; color: var(--fnv-text-2);
  border-bottom: 2px solid transparent; margin-bottom: -1px; text-decoration: none;
  display: inline-flex; align-items: center; gap: 6px;
}
.tab-line a:hover { color: var(--fnv-text); }
.tab-line a.active { color: var(--fnv-primary); border-bottom-color: var(--fnv-primary); }
.tab-line .count { font-size: 10.5px; font-weight: 700; background: var(--fnv-surface-3); border-radius: 20px; padding: 1px 7px; color: var(--fnv-text-2); }
.tab-line a.active .count { background: var(--fnv-primary-soft); color: var(--fnv-primary); }

/* ---------- 3.8 状态胶囊 / 徽章 ---------- */
.pill {
  display: inline-flex; align-items: center; gap: 5.5px;
  font-size: 11px; font-weight: 700; line-height: 1;
  padding: 4px 10px; border-radius: 20px; white-space: nowrap;
}
.pill::before { content: ""; width: 6px; height: 6px; border-radius: 50%; background: currentColor; flex-shrink: 0; }
.pill.no-dot::before { display: none; }
.pill.draft { background: var(--fnv-gray-soft); color: var(--fnv-gray); }
.pill.pending { background: var(--fnv-orange-soft); color: var(--fnv-orange); }
.pill.approved, .pill.sent { background: var(--fnv-blue-soft); color: var(--fnv-blue); }
.pill.expired { background: var(--fnv-rose-soft); color: var(--fnv-rose); }
.pill.deal { background: var(--fnv-green-soft); color: var(--fnv-green); }
.pill.active { background: var(--fnv-green-soft); color: var(--fnv-green); }
.pill.inactive { background: var(--fnv-gray-soft); color: var(--fnv-gray); }
.pill.primary { background: var(--fnv-primary-soft); color: var(--fnv-primary); }

.pill.stock-ok { background: var(--fnv-green-soft); color: var(--fnv-green); }
.pill.stock-low { background: var(--fnv-orange-soft); color: var(--fnv-orange); }
.pill.stock-out { background: var(--fnv-rose-soft); color: var(--fnv-rose); }

.pill.lv-strategic { background: var(--fnv-rose-soft); color: var(--fnv-rose); }
.pill.lv-important { background: var(--fnv-orange-soft); color: var(--fnv-orange); }
.pill.lv-normal { background: var(--fnv-gray-soft); color: var(--fnv-gray); }

.delta { font-size: 10.5px; font-weight: 700; padding: 2px 7px; border-radius: 6px; font-variant-numeric: tabular-nums; }
.delta.up { background: var(--fnv-rose-soft); color: var(--fnv-rose); }
.delta.down { background: var(--fnv-green-soft); color: var(--fnv-green); }
.delta.flat { background: var(--fnv-gray-soft); color: var(--fnv-text-2); }

.tag-chip {
  display: inline-flex; align-items: center; font-size: 10.5px; font-weight: 600;
  background: var(--fnv-surface-2); color: var(--fnv-text-2);
  border: 1px solid var(--fnv-border); border-radius: 6px; padding: 1.5px 7px; margin: 1.5px 2px;
}
.tag-chip.hot { background: var(--fnv-primary-soft); color: var(--fnv-primary); border-color: transparent; }

/* ---------- 3.9 表格 ---------- */
.table-wrap { overflow-x: auto; }
.table {
  width: 100%; border-collapse: collapse; font-size: 13px; margin-bottom: 0;
  color: var(--fnv-text); vertical-align: middle;
}
.table thead th {
  font-size: 11px; font-weight: 700; color: var(--fnv-text-2);
  text-transform: uppercase; letter-spacing: .05em;
  border-bottom: 1px solid var(--fnv-border);
  background: color-mix(in srgb, var(--fnv-surface-2) 60%, transparent);
  padding: 10px 14px; white-space: nowrap; text-align: left;
}
.table tbody td { padding: 11px 14px; border-bottom: 1px solid var(--fnv-border); vertical-align: middle; }
.table tbody tr:last-child td { border-bottom: none; }
.table tbody tr { transition: background .12s; }
.table tbody tr:nth-child(even) td { background: color-mix(in srgb, var(--fnv-surface-2) 40%, transparent); }
.table tbody tr:hover td { background: var(--fnv-primary-softer); }
.table tbody tr:nth-child(even):hover td { background: color-mix(in srgb, var(--fnv-primary) 5%, var(--fnv-surface-2)); }
.table .text-end { text-align: right; }
.table .text-center { text-align: center; }
.table .muted { color: var(--fnv-text-3); }
.table .small { font-size: 11.5px; }
.table > :not(caption) > * > * { box-shadow: none; }

.row-title { font-weight: 650; color: var(--fnv-text); }
a.row-title:hover { color: var(--fnv-primary); }
.row-sub { font-size: 11.5px; color: var(--fnv-text-3); }
.table td.mono { font-family: var(--fnv-num); font-size: 12.5px; }
.price-main { font-weight: 700; font-variant-numeric: tabular-nums; }
.price-sub { font-size: 11px; color: var(--fnv-text-3); }
.cost { color: var(--fnv-violet); font-weight: 650; }
.profit-pos { color: var(--fnv-green); font-weight: 650; }
.profit-neg { color: var(--fnv-rose); font-weight: 650; }

.row-actions { display: flex; gap: 4px; justify-content: flex-end; }
.act {
  width: 29px; height: 29px; border-radius: 8px; border: none;
  background: transparent; color: var(--fnv-text-3);
  display: inline-flex; align-items: center; justify-content: center;
  transition: all .12s; cursor: pointer; text-decoration: none;
}
.act svg { width: 14px; height: 14px; }
.act:hover { background: var(--fnv-primary-soft); color: var(--fnv-primary); }
.act.danger:hover { background: var(--fnv-rose-soft); color: var(--fnv-rose); }
.act.success:hover { background: var(--fnv-green-soft); color: var(--fnv-green); }
/* HOTFIX C8: 取消成交按钮配色（此前无 warning 变体）
   注意: 这条规则原先**只存在于线上服务器**, 从未进入仓库。r14.2 准备首次把
   style.css 纳入升级包时才发现 —— 若直接覆盖会把线上这个热修冲掉。
   现已补回仓库, 保证打包后线上行为不变。 */
.act.warning:hover { background: var(--fnv-amber-soft, #FDF3E2); color: var(--fnv-amber, #B7791F); }

.check { width: 15px; height: 15px; accent-color: var(--fnv-primary); cursor: pointer; }

/* ---------- 3.10 分页 ---------- */
.pagination { display: flex; align-items: center; gap: 4px; flex-wrap: wrap; }
.pg-btn {
  min-width: 30px; height: 30px; padding: 0 8px;
  display: inline-flex; align-items: center; justify-content: center;
  border-radius: 8px; border: 1px solid var(--fnv-border); background: var(--fnv-surface);
  font-size: 12.5px; font-weight: 600; color: var(--fnv-text-2); cursor: pointer;
  text-decoration: none; transition: all .13s; font-variant-numeric: tabular-nums;
}
.pg-btn:hover { border-color: var(--fnv-primary); color: var(--fnv-primary); }
.pg-btn.active { background: var(--fnv-primary); border-color: var(--fnv-primary); color: #fff; }
.pg-btn.disabled { opacity: .45; pointer-events: none; }
.pg-ellipsis { color: var(--fnv-text-3); padding: 0 2px; font-size: 12px; }
.pg-info { font-size: 12px; color: var(--fnv-text-3); }

/* ---------- 3.11 表单 ---------- */
.field { margin-bottom: 14px; }
.field-label { display: block; font-size: 12px; font-weight: 700; color: var(--fnv-text-2); margin-bottom: 6px; }
.field-label .req { color: var(--fnv-rose); margin-left: 2px; }
.field-hint { font-size: 11px; color: var(--fnv-text-3); margin-top: 5px; }

.input, .select, .textarea, .form-control, .form-select {
  font-family: var(--fnv-font); font-size: 13px;
  color: var(--fnv-text); background: var(--fnv-surface);
  border: 1px solid var(--fnv-border-strong); border-radius: var(--fnv-radius-xs);
  padding: 8px 12px; transition: border-color .15s, box-shadow .15s;
  /* v1.4.1: 自定义 .input/.select 默认 width:100%, 与 button 同宽, 修复"账密输入栏不齐" */
  width: 100%;
}
.input:focus, .select:focus, .textarea:focus, .form-control:focus, .form-select:focus {
  outline: none; border-color: var(--fnv-primary);
  box-shadow: 0 0 0 3px var(--fnv-primary-soft);
}
.input::placeholder, .textarea::placeholder, .form-control::placeholder { color: var(--fnv-text-3); }
.textarea { min-height: 84px; resize: vertical; line-height: 1.6; width: 100%; }
.select { appearance: none; background-image: linear-gradient(45deg, transparent 50%, var(--fnv-text-3) 50%), linear-gradient(135deg, var(--fnv-text-3) 50%, transparent 50%); background-position: calc(100% - 18px) 55%, calc(100% - 13px) 55%; background-size: 5px 5px; background-repeat: no-repeat; padding-right: 32px; }
.form-select { background-image: linear-gradient(45deg, transparent 50%, var(--fnv-text-3) 50%), linear-gradient(135deg, var(--fnv-text-3) 50%, transparent 50%); background-position: right 14px center, right 9px center; background-size: 5px 5px; background-repeat: no-repeat; }
.form-control-sm, .form-select-sm { font-size: 12.5px; padding: 5.5px 10px; border-radius: 7px; }
input.form-control[readonly] { background: var(--fnv-surface-2); }

.form-grid { display: grid; grid-template-columns: repeat(12, 1fr); gap: 0 14px; }
.fg-2 { grid-column: span 2; }
.fg-3 { grid-column: span 3; } .fg-4 { grid-column: span 4; } .fg-5 { grid-column: span 5; } .fg-6 { grid-column: span 6; }
.fg-8 { grid-column: span 8; } .fg-9 { grid-column: span 9; } .fg-12 { grid-column: span 12; }

.input-group { display: flex; align-items: stretch; }
.input-group .input { border-radius: var(--fnv-radius-xs) 0 0 var(--fnv-radius-xs); border-right: none; }
.input-group .addon {
  display: inline-flex; align-items: center; padding: 0 12px;
  border: 1px solid var(--fnv-border-strong); border-radius: 0 var(--fnv-radius-xs) var(--fnv-radius-xs) 0;
  background: var(--fnv-surface-2); color: var(--fnv-text-2); font-size: 12.5px; font-weight: 600;
}
.search-box { position: relative; display: flex; align-items: center; }
.search-box > svg { position: absolute; left: 11px; width: 14px; height: 14px; color: var(--fnv-text-3); pointer-events: none; z-index: 1; }
.search-box .input { padding-left: 34px; border-radius: var(--fnv-radius-sm); }

.filter-bar { display: flex; gap: 10px; flex-wrap: wrap; align-items: center; }
.filter-bar .input, .filter-bar .select { width: auto; }

.switch { position: relative; width: 40px; height: 22px; flex-shrink: 0; display: inline-block; }
.switch input { opacity: 0; width: 0; height: 0; }
.switch .slider {
  position: absolute; inset: 0; border-radius: 20px; background: var(--fnv-surface-3);
  transition: background .18s; cursor: pointer;
}
.switch .slider::before {
  content: ""; position: absolute; width: 16px; height: 16px; border-radius: 50%;
  left: 3px; top: 3px; background: #fff; transition: transform .18s var(--fnv-ease);
  box-shadow: 0 1px 3px rgba(0,0,0,.3);
}
.switch input:checked + .slider { background: var(--fnv-primary); }
.switch input:checked + .slider::before { transform: translateX(18px); }

.step-chip {
  width: 24px; height: 24px; border-radius: 8px;
  background: var(--fnv-primary-soft); color: var(--fnv-primary);
  font-size: 12px; font-weight: 800; display: inline-flex; align-items: center; justify-content: center;
  flex-shrink: 0;
}

/* ---------- 3.12 明细表 / 合计 ---------- */
.items-table { table-layout: fixed; width: 100%; max-width: 1120px; border-collapse: collapse; }
.items-table thead th { font-size: 10.5px; text-transform: uppercase; letter-spacing: .05em; color: var(--fnv-text-2); font-weight: 700; border-bottom: 1px solid var(--fnv-border); padding: 8px; white-space: nowrap; background: transparent; }
.items-table tbody td { padding: 7px 8px; border-bottom: 1px solid var(--fnv-border); vertical-align: middle; }
.items-table tbody tr:last-child td { border-bottom: none; }
.items-table tbody tr { transition: background .12s; }
.items-table tbody tr:hover { background: var(--fnv-primary-softer); }
.items-table .form-control, .items-table .form-select { padding: 6px 9px; font-size: 12.5px; border-radius: 7px; }
/* v1.5.6: 固定布局 + 输入框等宽填满格子 (修复"明细表各输入框长短不一/列宽错乱") */
.items-table th, .items-table td { overflow: hidden; }
.items-table input.form-control { width: 100%; min-width: 0; }
.items-table .input-group { width: 100%; min-width: 0; }
.items-table .input-group .form-control { width: auto; min-width: 0; flex: 1 1 auto; }
.items-table .input-group .btn { flex: 0 0 auto; }
.row-num {
  width: 21px; height: 21px; border-radius: 50%;
  background: var(--fnv-surface-3); color: var(--fnv-text-2);
  display: inline-flex; align-items: center; justify-content: center;
  font-size: 10.5px; font-weight: 700; font-variant-numeric: tabular-nums;
}
.items-table tbody tr:hover .row-num { background: var(--fnv-primary); color: #fff; }
.subtotal-cell { font-weight: 700; font-variant-numeric: tabular-nums; white-space: nowrap; }
.drag-handle { cursor: grab; color: var(--fnv-text-3); font-size: 15px; letter-spacing: -1.5px; user-select: none; padding: 0 4px; }
.drag-handle:active { cursor: grabbing; color: var(--fnv-primary); }
.item-row.dragging { opacity: .5; background: var(--fnv-primary-soft); }
.item-row.drag-over { border-top: 2px solid var(--fnv-primary); }
.row-num-cell { white-space: nowrap; }

.autocomplete-dd {
  position: absolute; z-index: 10; background: var(--fnv-surface);
  border: 1px solid var(--fnv-border); border-radius: var(--fnv-radius-sm);
  margin-top: 2px; width: 100%; box-shadow: var(--fnv-shadow-lg);
  max-height: 200px; overflow-y: auto;
}
.autocomplete-dd .ac-dd-item {
  padding: 6px 10px; cursor: pointer; font-size: 12px;
  border-bottom: 1px solid var(--fnv-border);
  display: flex; gap: 8px; align-items: center;
}
.autocomplete-dd .ac-dd-item:last-child { border-bottom: none; }
.autocomplete-dd .ac-dd-item:hover { background: var(--fnv-primary-soft); }

.summary-panel { position: sticky; top: 84px; }
.summary-sticky { position: sticky; top: 84px; }
.tax-badge { color: var(--fnv-green); font-weight: 700; }
.summary-row { display: flex; justify-content: space-between; align-items: baseline; font-size: 13px; padding: 5.5px 0; color: var(--fnv-text-2); gap: 10px; }
.summary-row b { font-variant-numeric: tabular-nums; }
.summary-row.total { font-size: 15px; font-weight: 800; color: var(--fnv-text); border-top: 1px dashed var(--fnv-border-strong); margin-top: 8px; padding-top: 12px; }
.summary-row.total .amt { color: var(--fnv-primary); font-size: 19px; }
.summary-row .pos { color: var(--fnv-green); }
.summary-row .neg { color: var(--fnv-rose); }

.margin-bar { height: 7px; border-radius: 5px; background: var(--fnv-surface-3); overflow: hidden; margin-top: 8px; }
.margin-bar > i { display: block; height: 100%; border-radius: 5px; background: linear-gradient(90deg, #34d399, #10b981); transition: width .4s var(--fnv-ease); }
.margin-bar > i.warn { background: linear-gradient(90deg, #fbbf24, #d97706); }
.margin-bar > i.bad { background: linear-gradient(90deg, #fb7185, #e11d48); }

/* ---------- 3.13 空状态 / 横幅 / 通知 ---------- */
.empty-state { text-align: center; padding: 46px 20px; }
.empty-state .es-icon { width: 62px; height: 62px; margin: 0 auto 14px; border-radius: 18px; background: var(--fnv-surface-2); display: flex; align-items: center; justify-content: center; font-size: 26px; position: relative; }
.empty-state .es-icon::after { content: ""; position: absolute; inset: 0; border-radius: 18px; background: var(--fnv-primary-soft); transform: scale(1.35); opacity: .5; z-index: -1; }
.empty-state .es-title { font-size: 14.5px; font-weight: 700; margin-bottom: 5px; }
.empty-state .es-desc { font-size: 12.5px; color: var(--fnv-text-2); margin-bottom: 16px; }

.banner {
  display: flex; align-items: center; gap: 10px;
  border-radius: var(--fnv-radius-sm); padding: 10px 14px; margin-bottom: 16px;
  font-size: 12.5px;
}
.banner svg { width: 16px; height: 16px; flex-shrink: 0; }
.banner.amber { background: var(--fnv-amber-soft); color: var(--fnv-orange); border: 1px solid rgba(224, 138, 0, .25); }
.banner.primary { background: var(--fnv-primary-soft); color: var(--fnv-primary); border: 1px solid rgba(198, 40, 40, .2); }
.banner.green { background: var(--fnv-green-soft); color: var(--fnv-green); border: 1px solid rgba(5, 150, 105, .2); }
.banner.danger { background: var(--fnv-rose-soft); color: var(--fnv-rose); border: 1px solid rgba(225, 29, 72, .25); }
.banner .banner-cta { margin-left: auto; font-weight: 700; white-space: nowrap; }

/* 文本色工具类 (替代内联颜色) */
.txt-rose { color: var(--fnv-rose); }
.txt-green { color: var(--fnv-green); }
.txt-primary { color: var(--fnv-primary); }
.txt-2 { color: var(--fnv-text-2); }
.txt-3 { color: var(--fnv-text-3); }
.kpi-value.pending-num { color: var(--fnv-rose); }

a.notif-item { text-decoration: none; color: inherit; }
.drawer-body .sb-group { color: var(--fnv-text-3); padding-top: 4px; }

.notif-item { display: flex; gap: 11px; padding: 11px 10px; border-radius: var(--fnv-radius-sm); transition: background .12s; }
.notif-item:hover { background: var(--fnv-surface-2); }
.notif-icon { width: 34px; height: 34px; border-radius: 9px; display: flex; align-items: center; justify-content: center; flex-shrink: 0; }
.notif-icon svg { width: 16px; height: 16px; }
.notif-icon.amber { background: var(--fnv-amber-soft); color: var(--fnv-amber); }
.notif-icon.rose { background: var(--fnv-rose-soft); color: var(--fnv-rose); }
.notif-icon.green { background: var(--fnv-green-soft); color: var(--fnv-green); }
.notif-title { font-size: 12.5px; font-weight: 700; }
.notif-desc { font-size: 11.5px; color: var(--fnv-text-2); margin-top: 1px; }
.notif-time { font-size: 10.5px; color: var(--fnv-text-3); margin-top: 3px; }

/* ---------- 3.14 Toast / 对话框 / 抽屉 / 命令面板 ---------- */
.toast-stack { position: fixed; top: 66px; right: 20px; z-index: 4000; display: flex; flex-direction: column; gap: 8px; }
.toast {
  display: flex; align-items: flex-start; gap: 10px;
  min-width: 280px; max-width: 380px;
  background: var(--fnv-surface); border: 1px solid var(--fnv-border);
  border-radius: var(--fnv-radius-sm); box-shadow: var(--fnv-shadow-lg);
  padding: 11px 14px; animation: fnv-toast-in .26s var(--fnv-ease) both;
}
.toast svg { width: 17px; height: 17px; margin-top: 1.5px; flex-shrink: 0; }
.toast.success svg { color: var(--fnv-green); }
.toast.error svg { color: var(--fnv-rose); }
.toast.info svg { color: var(--fnv-blue); }
.toast .t-title { font-size: 13px; font-weight: 700; }
.toast .t-desc { font-size: 12px; color: var(--fnv-text-2); margin-top: 1px; }

/* v1.5.2: z-index 最终层级规划 — 彻底解决"浮层盖弹窗"
   层级: drawer(1500) < modal(3000) < lightbox(3100) < overlay确认弹窗(3200) < cmd命令面板(3500) < toast(4000)
   原则: 任何 Bootstrap modal 都不再被自定义浮层遮挡; 确认弹窗/命令面板/提示 toast 依次更高 */
.modal { z-index: 3000 !important; }
.modal-backdrop { z-index: 2990 !important; }
.modal-dialog { z-index: 3010 !important; }
.lightbox-overlay, .lightbox { z-index: 3100 !important; }
.overlay {
  position: fixed; inset: 0; background: rgba(15, 10, 13, .5);
  backdrop-filter: blur(2px); z-index: 3200;
  display: flex; align-items: center; justify-content: center;
  padding: 20px; animation: fnv-fade .16s both;
}
.dialog {
  width: 100%; max-width: 460px;
  background: var(--fnv-surface); border: 1px solid var(--fnv-border);
  border-radius: var(--fnv-radius); box-shadow: var(--fnv-shadow-lg);
  animation: fnv-pop .18s var(--fnv-ease) both;
}
.dialog.wide { max-width: 640px; }
.dialog-head { display: flex; align-items: center; justify-content: space-between; padding: 16px 20px 0; }
.dialog-title { font-size: 15px; font-weight: 800; display: flex; align-items: center; gap: 8px; }
.dialog-title svg { width: 17px; height: 17px; color: var(--fnv-primary); }
.dialog-close { border: none; background: none; color: var(--fnv-text-3); cursor: pointer; padding: 4px; border-radius: 7px; display: inline-flex; }
.dialog-close:hover { background: var(--fnv-surface-2); color: var(--fnv-text); }
.dialog-close svg { width: 16px; height: 16px; }
.dialog-body { padding: 14px 20px 6px; }
.dialog-foot { display: flex; justify-content: flex-end; gap: 8px; padding: 14px 20px 18px; }

.drawer {
  position: fixed; top: 0; right: 0; bottom: 0; width: 380px; max-width: 92vw;
  background: var(--fnv-surface); border-left: 1px solid var(--fnv-border);
  box-shadow: var(--fnv-shadow-lg); z-index: 1500;  /* v1.5.2: 低于 modal(3000), 通知抽屉不遮挡任何弹窗 */
  transform: translateX(105%); transition: transform .26s var(--fnv-ease);
  display: flex; flex-direction: column;
}
.drawer.open { transform: translateX(0); }
.drawer-head { padding: 16px 20px; border-bottom: 1px solid var(--fnv-border); display: flex; align-items: center; justify-content: space-between; }
.drawer-body { flex: 1; overflow-y: auto; padding: 14px 20px; }

.cmd-overlay {
  position: fixed; inset: 0; z-index: 3500;
  background: rgba(15, 10, 13, .55); backdrop-filter: blur(3px);
  display: none; align-items: flex-start; justify-content: center;
  padding: 12vh 20px 20px; animation: fnv-fade .14s both;
}
.cmd-overlay.open { display: flex; }
.cmd-panel {
  width: 100%; max-width: 620px;
  background: var(--fnv-surface); border: 1px solid var(--fnv-border);
  border-radius: var(--fnv-radius); box-shadow: var(--fnv-shadow-lg);
  overflow: hidden; animation: fnv-pop .16s var(--fnv-ease) both;
}
.cmd-input-wrap { display: flex; align-items: center; gap: 11px; padding: 15px 18px; border-bottom: 1px solid var(--fnv-border); }
.cmd-input-wrap svg { width: 18px; height: 18px; color: var(--fnv-primary); flex-shrink: 0; }
.cmd-input { flex: 1; border: none; outline: none; background: transparent; font-size: 15px; color: var(--fnv-text); font-family: var(--fnv-font); }
.cmd-list { max-height: 340px; overflow-y: auto; padding: 7px; }
.cmd-group { font-size: 10.5px; font-weight: 700; text-transform: uppercase; letter-spacing: .07em; color: var(--fnv-text-3); padding: 9px 12px 4px; }
.cmd-item {
  display: flex; align-items: center; gap: 12px;
  padding: 9px 12px; border-radius: 9px; cursor: pointer; text-decoration: none; color: var(--fnv-text);
}
.cmd-item:hover, .cmd-item.sel { background: var(--fnv-primary-soft); }
.cmd-item .ci-icon { width: 30px; height: 30px; border-radius: 8px; background: var(--fnv-surface-2); display: flex; align-items: center; justify-content: center; color: var(--fnv-text-2); flex-shrink: 0; }
.cmd-item:hover .ci-icon, .cmd-item.sel .ci-icon { background: var(--fnv-primary-soft); color: var(--fnv-primary); }
.cmd-item .ci-icon svg { width: 15px; height: 15px; }
.ci-title { font-size: 13px; font-weight: 600; }
.ci-sub { font-size: 11px; color: var(--fnv-text-3); }
.cmd-item .ci-right { margin-left: auto; font-size: 11px; color: var(--fnv-text-3); font-family: var(--fnv-num); }
.cmd-empty { text-align: center; padding: 28px; color: var(--fnv-text-3); font-size: 13px; }

/* ---------- 3.15 时间线 / 排行 / 设置 ---------- */
.timeline { position: relative; padding-left: 22px; }
.timeline::before { content: ""; position: absolute; left: 7px; top: 6px; bottom: 6px; width: 2px; background: var(--fnv-border); border-radius: 2px; }
.tl-item { position: relative; padding-bottom: 16px; }
.tl-item:last-child { padding-bottom: 2px; }
.tl-dot { position: absolute; left: -22px; top: 3px; width: 16px; height: 16px; border-radius: 50%; background: var(--fnv-surface); border: 2px solid var(--fnv-border-strong); }
.tl-item.done .tl-dot { border-color: var(--fnv-green); background: var(--fnv-green); }
.tl-item.done .tl-dot::after { content: "✓"; color: #fff; font-size: 9px; font-weight: 800; display: flex; align-items: center; justify-content: center; line-height: 12px; }
.tl-item.now .tl-dot { border-color: var(--fnv-amber); background: var(--fnv-amber); box-shadow: 0 0 0 4px var(--fnv-amber-soft); }
.tl-title { font-size: 13px; font-weight: 700; }
.tl-time { font-size: 11px; color: var(--fnv-text-3); margin-top: 1px; }
.tl-desc { font-size: 12px; color: var(--fnv-text-2); margin-top: 3px; }

.rank-item { display: flex; align-items: center; gap: 11px; padding: 9px 2px; }
.rank-num { width: 22px; height: 22px; border-radius: 7px; background: var(--fnv-surface-2); color: var(--fnv-text-2); font-size: 11px; font-weight: 800; display: inline-flex; align-items: center; justify-content: center; flex-shrink: 0; }
.rank-item:first-child .rank-num { background: var(--fnv-primary-soft); color: var(--fnv-primary); }
.rank-body { flex: 1; min-width: 0; }
.rank-name { font-size: 12.5px; font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.rank-bar { height: 5px; border-radius: 4px; background: var(--fnv-surface-2); overflow: hidden; margin-top: 5px; }
.rank-bar > i { display: block; height: 100%; border-radius: 4px; background: var(--fnv-primary); }
.rank-val { font-size: 12px; font-weight: 700; color: var(--fnv-text-2); flex-shrink: 0; font-variant-numeric: tabular-nums; }

.settings-layout { display: flex; gap: 20px; align-items: flex-start; }
.settings-nav {
  width: 200px; flex-shrink: 0;
  background: var(--fnv-surface); border: 1px solid var(--fnv-border);
  border-radius: var(--fnv-radius); box-shadow: var(--fnv-shadow-sm);
  padding: 8px; position: sticky; top: 78px;
}
.settings-nav a {
  display: flex; align-items: center; gap: 10px;
  padding: 8.5px 11px; border-radius: 9px; font-size: 13px; font-weight: 600;
  color: var(--fnv-text-2); text-decoration: none; margin-bottom: 1px;
  transition: all .13s;
}
.settings-nav a svg { width: 15px; height: 15px; }
.settings-nav a:hover { background: var(--fnv-surface-2); color: var(--fnv-text); }
.settings-nav a.active { background: var(--fnv-primary-soft); color: var(--fnv-primary); }
.settings-content { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 16px; }
.set-row { display: flex; align-items: center; gap: 16px; padding: 13px 0; border-bottom: 1px solid var(--fnv-border); }
.set-row:last-child { border-bottom: none; }
.set-row .sr-body { flex: 1; min-width: 0; }
.set-row .sr-title { font-size: 13px; font-weight: 700; }
.set-row .sr-desc { font-size: 11.5px; color: var(--fnv-text-3); margin-top: 2px; }

/* ---------- 3.16 产品图 ---------- */
.thumb { width: 42px; height: 42px; object-fit: cover; border-radius: 9px; border: 1px solid var(--fnv-border); background: var(--fnv-surface-2); }
.img-upload {
  width: 96px; height: 96px; border-radius: var(--fnv-radius-sm);
  border: 1.5px dashed var(--fnv-border-strong); background: var(--fnv-surface-2);
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 5px;
  color: var(--fnv-text-3); font-size: 11px; cursor: pointer; transition: all .15s;
}
.img-upload:hover { border-color: var(--fnv-primary); color: var(--fnv-primary); background: var(--fnv-primary-softer); }
.img-upload svg { width: 20px; height: 20px; }

/* ---------- 4. Bootstrap 组件皮肤 ---------- */
.btn {
  border-radius: var(--fnv-radius-xs); font-weight: 700;
  transition: transform .08s ease, box-shadow .15s ease, background-color .15s ease, color .15s, border-color .15s;
  display: inline-flex; align-items: center; justify-content: center; gap: 7px;
}
.btn:active { transform: translateY(1px) scale(.99); }
.btn svg { width: 15px; height: 15px; }
.btn-sm { border-radius: 7px; }
.btn-sm svg { width: 13px; height: 13px; }
.btn-primary {
  --bs-btn-bg: #C62828; --bs-btn-border-color: #C62828;
  --bs-btn-hover-bg: #D0342C; --bs-btn-hover-border-color: #D0342C;
  --bs-btn-active-bg: #A81F1F; --bs-btn-active-border-color: #A81F1F;
  --bs-btn-disabled-bg: #C62828; --bs-btn-disabled-border-color: #C62828;
  box-shadow: 0 2px 8px rgba(198, 40, 40, .3);
}
.btn-outline-primary { --bs-btn-color: #C62828; --bs-btn-border-color: #C62828; --bs-btn-hover-bg: #C62828; --bs-btn-hover-border-color: #C62828; --bs-btn-hover-color: #fff; --bs-btn-active-bg: #A81F1F; --bs-btn-active-border-color: #A81F1F; }
[data-bs-theme="dark"] .btn-outline-primary { --bs-btn-color: #F87171; --bs-btn-border-color: #F87171; --bs-btn-hover-bg: #F87171; --bs-btn-hover-border-color: #F87171; --bs-btn-hover-color: #141216; }
.btn-outline-secondary { --bs-btn-color: var(--fnv-text); --bs-btn-border-color: var(--fnv-border-strong); --bs-btn-hover-bg: var(--fnv-surface-2); --bs-btn-hover-border-color: var(--fnv-text-3); --bs-btn-hover-color: var(--fnv-text); }
.btn-outline-success { --bs-btn-color: #059669; --bs-btn-border-color: #059669; --bs-btn-hover-bg: #059669; --bs-btn-hover-border-color: #059669; --bs-btn-hover-color: #fff; }
.btn-outline-danger { --bs-btn-color: #E11D48; --bs-btn-border-color: #E11D48; --bs-btn-hover-bg: #E11D48; --bs-btn-hover-border-color: #E11D48; --bs-btn-hover-color: #fff; }
.btn-success { --bs-btn-bg: #059669; --bs-btn-border-color: #059669; --bs-btn-hover-bg: #0BA775; --bs-btn-hover-border-color: #0BA775; }
.btn-warning { --bs-btn-bg: #D97706; --bs-btn-border-color: #D97706; --bs-btn-hover-bg: #E08A00; --bs-btn-hover-border-color: #E08A00; --bs-btn-color: #fff; --bs-btn-hover-color: #fff; }
.btn-danger { --bs-btn-bg: #E11D48; --bs-btn-border-color: #E11D48; --bs-btn-hover-bg: #F43F5E; --bs-btn-hover-border-color: #F43F5E; }

.form-label-sm { font-size: 12px; font-weight: 700; color: var(--fnv-text-2); margin-bottom: 5px; }
.form-check-input { border-color: var(--fnv-border-strong); }
.form-check-input:checked { background-color: var(--fnv-primary); border-color: var(--fnv-primary); }
.form-check-input:focus { border-color: var(--fnv-primary); box-shadow: 0 0 0 .2rem var(--fnv-primary-soft); }

.input-group-text { background: var(--fnv-surface-2); border-color: var(--fnv-border-strong); color: var(--fnv-text-2); font-size: 13px; }
.input-group-text.bg-transparent { background: transparent; }

.badge { font-weight: 700; }
.alert { border-radius: var(--fnv-radius-sm); }
.alert-danger { --bs-alert-bg: var(--fnv-rose-soft); --bs-alert-border-color: rgba(225, 29, 72, .25); --bs-alert-color: var(--fnv-rose); }

.dropdown-menu {
  border: 1px solid var(--fnv-border); border-radius: var(--fnv-radius-sm);
  box-shadow: var(--fnv-shadow-lg); padding: 6px;
  --bs-dropdown-bg: var(--fnv-surface); --bs-dropdown-color: var(--fnv-text);
  --bs-dropdown-link-color: var(--fnv-text); --bs-dropdown-link-hover-bg: var(--fnv-surface-2); --bs-dropdown-link-hover-color: var(--fnv-text);
}
.dropdown-item { border-radius: 8px; font-size: 13px; padding: 8px 10px; }
.dropdown-divider { border-color: var(--fnv-border); }

.modal-content { border: 1px solid var(--fnv-border); border-radius: var(--fnv-radius); box-shadow: var(--fnv-shadow-lg); background: var(--fnv-surface); }
.modal-header { border-bottom-color: var(--fnv-border); padding: 14px 18px; }
.modal-footer { border-top-color: var(--fnv-border); padding: 12px 18px 16px; }
.modal { z-index: 3000 !important; }
.modal-backdrop { z-index: 2990 !important; }

.list-group-item { background: var(--fnv-surface); color: var(--fnv-text); border-color: var(--fnv-border); }
.list-group-item-action:hover { background: var(--fnv-surface-2); color: var(--fnv-text); }

.pagination.bootstrap-pagination { margin-bottom: 0; }
.pagination.bootstrap-pagination .page-link { color: var(--fnv-text-2); border-color: var(--fnv-border); border-radius: 8px !important; margin: 0 2px; background: var(--fnv-surface); }
.pagination.bootstrap-pagination .page-item.active .page-link { background: var(--fnv-primary); border-color: var(--fnv-primary); color: #fff; }

.card-header { background: transparent; border-bottom-color: var(--fnv-border); }

/* ---------- 5. v2 兼容层 (旧视图过渡期, 迁移完成后可删) ---------- */
.content-card { background: var(--fnv-surface); border: 1px solid var(--fnv-border); border-radius: var(--fnv-radius); box-shadow: var(--fnv-shadow-sm); }
.content-card .card-head { padding: 14px 18px; border-bottom: 1px solid var(--fnv-border); display: flex; align-items: center; justify-content: space-between; }
.content-card .card-body { padding: 18px; }
.content-card .card-body.p-0 { padding: 0; }
.content-card .card-body.py-3 { padding-top: 12px; padding-bottom: 12px; }

.section-card { background: var(--fnv-surface); border: 1px solid var(--fnv-border); border-radius: var(--fnv-radius); box-shadow: var(--fnv-shadow-sm); }
.section-card .sec-head { padding: 13px 18px; border-bottom: 1px solid var(--fnv-border); display: flex; align-items: center; justify-content: space-between; }
.section-card .sec-body { padding: 18px; }
.section-card .sec-body.p-0 { padding: 0; }
.sec-title { font-size: 13.5px; font-weight: 700; display: flex; align-items: center; gap: 8px; }
.num-chip { width: 22px; height: 22px; border-radius: 7px; background: var(--fnv-primary-soft); color: var(--fnv-primary); font-size: 11.5px; font-weight: 800; display: inline-flex; align-items: center; justify-content: center; }

.stat-card {
  background: var(--fnv-surface); border: 1px solid var(--fnv-border);
  border-radius: var(--fnv-radius); box-shadow: var(--fnv-shadow-sm);
  padding: 16px 18px; position: relative; overflow: hidden;
}
.stat-icon {
  width: 42px; height: 42px; border-radius: 11px; flex-shrink: 0;
  display: flex; align-items: center; justify-content: center;
  background: var(--sc-bg, var(--fnv-primary-soft)); color: var(--sc-color, var(--fnv-primary));
  margin-bottom: 10px;
}
.stat-icon svg { width: 20px; height: 20px; }
.stat-label { font-size: 12px; color: var(--fnv-text-2); font-weight: 600; }
.stat-value { font-size: 22px; font-weight: 800; letter-spacing: -.02em; line-height: 1.25; color: var(--fnv-text); }
.stat-trend { font-size: 11px; color: var(--fnv-text-3); }

.badge-status { display: inline-flex; align-items: center; gap: 5px; font-size: 11px; font-weight: 700; padding: 3px 9px; border-radius: 20px; }
.badge-status::before { content: ""; width: 6px; height: 6px; border-radius: 50%; background: currentColor; }

.table-modern thead th { font-size: 11px; font-weight: 700; color: var(--fnv-text-2); text-transform: uppercase; letter-spacing: .04em; border-bottom: 1px solid var(--fnv-border); background: color-mix(in srgb, var(--fnv-surface-2) 55%, transparent); padding: 10px 14px; white-space: nowrap; }
.table-modern tbody td { padding: 11px 14px; font-size: 13px; border-color: var(--fnv-border); vertical-align: middle; color: var(--fnv-text); }
.table-modern tbody tr { transition: background .12s; }
.table-modern tbody tr:nth-child(even) td { background: color-mix(in srgb, var(--fnv-surface-2) 34%, transparent); }
.table-modern tbody tr:hover td { background: color-mix(in srgb, var(--fnv-primary) 4.5%, transparent); }
.table-modern tbody tr:nth-child(even):hover td { background: color-mix(in srgb, var(--fnv-primary) 4.5%, var(--fnv-surface-2)); }
.table-modern .row-title { font-weight: 600; color: var(--fnv-text); text-decoration: none; }
.table-modern .row-title:hover { color: var(--fnv-primary); }
.table-modern .row-sub { font-size: 11.5px; color: var(--fnv-text-3); }

.page-subtitle { font-size: 12.5px; color: var(--fnv-text-2); }
.avatar-circle {
  width: 32px; height: 32px; border-radius: 50%;
  background: linear-gradient(135deg, #C62828, #E08A00);
  color: #fff; font-size: 13px; font-weight: 700;
  display: inline-flex; align-items: center; justify-content: center;
}
.sort-link { text-decoration: none; color: inherit; display: inline-flex; align-items: center; gap: 3px; }
.sort-link:hover { color: var(--fnv-primary); }
.kbd {
  font-size: 10.5px; color: var(--fnv-text-2);
  border: 1px solid var(--fnv-border-strong); border-radius: 6px;
  padding: 2px 7px; background: var(--fnv-surface); font-family: var(--fnv-num);
}
.nav-badge { margin-left: auto; font-size: 10px; font-weight: 700; background: #E11D48; color: #fff; border-radius: 20px; padding: 1px 7px; min-width: 18px; text-align: center; }
.nav-badge-amber { background: #E08A00; }

/* ---------- 6. v1.1/v1.2 功能样式 (保留) ---------- */
.price-up { color: var(--bs-danger-text-emphasis, #B91C1C); font-weight: 500; }
.price-down { color: var(--bs-success-text-emphasis, #047857); font-weight: 500; }
.price-flat { color: var(--bs-secondary-text-emphasis, var(--fnv-text-2)); }
.badge-pct { font-size: 11px; line-height: 1.4; white-space: nowrap; }
.badge-pct .badge { font-size: 10px; font-weight: 400; padding: 0.25em 0.45em; }

.price-trend-bar {
  display: flex; align-items: flex-end; gap: 4px;
  height: 110px; min-width: 480px; overflow-x: auto;
  padding: 12px 4px 0;
  background: var(--fnv-surface-2); border: 1px solid var(--fnv-border); border-radius: 8px;
}
.price-trend-bar .bar {
  flex: 1 0 26px; min-width: 26px;
  border-radius: 3px 3px 0 0;
  display: flex; flex-direction: column; justify-content: flex-end;
  text-align: center; position: relative; min-height: 8px;
}
.price-trend-bar .bar.price-up { background: var(--bs-danger, #E11D48); }
.price-trend-bar .bar.price-down { background: var(--bs-success, #059669); }
.price-trend-bar .bar.price-flat { background: var(--bs-secondary, #6B7280); }
.price-trend-bar .bar .bar-date {
  position: absolute; bottom: -16px; left: 50%; transform: translateX(-50%);
  font-size: 9px; color: var(--fnv-text-2); white-space: nowrap;
}

.rich-content { font-size: 13px; line-height: 1.6; word-break: break-word; }
.rich-content table { width: 100%; border-collapse: collapse; margin: 0.5em 0; }
.rich-content table td, .rich-content table th { border: 1px solid var(--fnv-border); padding: 4px 8px; font-size: 12px; }
.rich-content ul, .rich-content ol { padding-left: 1.5em; margin: 0.3em 0; }
.rich-content h1 { font-size: 1.3rem; margin: 0.6em 0 0.3em; }
.rich-content h2 { font-size: 1.15rem; margin: 0.6em 0 0.3em; }
.rich-content h3 { font-size: 1.05rem; margin: 0.5em 0 0.25em; }
.rich-content blockquote { border-left: 3px solid var(--fnv-border-strong); padding-left: 0.6em; color: var(--fnv-text-2); margin: 0.4em 0; }
.rich-content a { color: var(--fnv-primary); text-decoration: underline; }

.rich-toolbar {
  display: flex; flex-wrap: wrap; align-items: center; gap: 2px;
  padding: 4px 6px; border: 1px solid var(--fnv-border); border-radius: 6px 6px 0 0;
  background: var(--fnv-surface-3);
}
.rich-toolbar button {
  border: 1px solid transparent; background: none; padding: 2px 9px;
  border-radius: 4px; font-size: 12px; color: var(--fnv-text); line-height: 1.5;
}
.rich-toolbar button:hover { background: var(--fnv-surface-2); }
.rich-sep { width: 1px; height: 18px; background: var(--fnv-border); margin: 0 4px; }
.rich-editor-area {
  min-height: 150px; max-height: 280px; overflow: auto;
  border: 1px solid var(--fnv-border); border-top: none;
  border-radius: 0 0 6px 6px; padding: 8px 10px;
  font-size: 13px; line-height: 1.6; background: var(--fnv-surface); color: var(--fnv-text);
}
.rich-editor-area:focus { outline: none; border-color: var(--fnv-primary); box-shadow: 0 0 0 3px var(--fnv-primary-soft); }
.rich-editor-area:empty::before { content: attr(data-placeholder); color: var(--fnv-text-3); pointer-events: none; }

.product-card { border: 1px solid var(--fnv-border); border-radius: 10px; background: var(--fnv-surface); }
.product-card .card-header { background: transparent; border-bottom: 1px solid var(--fnv-border); font-weight: 600; font-size: 13px; padding: 0.6rem 1rem; color: var(--fnv-text); }

.lightbox-content { background: rgba(10, 10, 12, 0.94); border: 1px solid var(--fnv-border); color: #fff; position: relative; z-index: 3100; }
/* touch-action: pan-y —— 纵向仍可滚动, 横向手势交给 JS 做滑动切换 (r14.2) */
.lightbox-stage { position: relative; display: flex; align-items: center; justify-content: center; min-height: 60vh; background: #000; touch-action: pan-y; }
.lightbox-image { max-width: 100%; max-height: 70vh; object-fit: contain; }
/* v1.7.0-r14.2 提高左右切换按钮的可辨识度:
   原先是 rgba(255,255,255,.15) 的半透明白底 + 白箭头, 压在图片上几乎看不见。
   改为"深色实底 + 白色描边 + 投影": 亮图上靠深底看清, 暗图上靠白描边看清,
   两种情况都有对比, 不再依赖图片本身的明暗。 */
.lightbox-nav {
  position: absolute; top: 50%; transform: translateY(-50%);
  width: 46px; height: 46px; border-radius: 50%;
  border: 2px solid rgba(255, 255, 255, 0.85);
  background: rgba(0, 0, 0, 0.58); color: #fff;
  font-size: 26px; line-height: 1; z-index: 3;
  display: flex; align-items: center; justify-content: center;
  padding: 0; cursor: pointer;
  box-shadow: 0 2px 12px rgba(0, 0, 0, 0.55);
  -webkit-backdrop-filter: blur(2px); backdrop-filter: blur(2px);
  touch-action: manipulation;
  -webkit-tap-highlight-color: transparent;
}
.lightbox-nav:hover, .lightbox-nav:focus-visible {
  background: rgba(0, 0, 0, 0.82); border-color: #fff;
}
.lightbox-nav:active { transform: translateY(-50%) scale(0.94); }
.lightbox-prev { left: 12px; } .lightbox-next { right: 12px; }
.lightbox-thumbs { display: flex; gap: 6px; overflow-x: auto; max-width: 100%; }
.lightbox-thumb { width: 52px; height: 52px; object-fit: cover; border-radius: 4px; border: 2px solid transparent; cursor: pointer; opacity: 0.55; flex-shrink: 0; }
.lightbox-thumb:hover { opacity: 0.85; }
.lightbox-thumb.active { border-color: var(--fnv-primary); opacity: 1; }
/* 手机: 按钮适度放大以便点按; 图片让出更多高度; 显示滑动提示 */
@media (max-width: 640px) {
  .lightbox-nav { width: 50px; height: 50px; font-size: 28px; }
  .lightbox-prev { left: 8px; } .lightbox-next { right: 8px; }
  .lightbox-image { max-height: 62vh; }
  .lightbox-swipe-hint { display: block; }
}
/* 滑动提示 (仅手机显示, 桌面隐藏 —— 桌面用左右按钮与键盘) */
.lightbox-swipe-hint {
  display: none; text-align: center; color: rgba(255, 255, 255, 0.75);
  font-size: 12px; padding: 6px 0 0;
}

/* ---------- 7. 登录页 ---------- */
.login-wrap { min-height: 100vh; display: flex; }
.login-brand {
  flex: 1.15; position: relative; display: flex; flex-direction: column;
  justify-content: center; padding: 56px; overflow: hidden;
  background: radial-gradient(1000px 520px at 18% -8%, rgba(198,40,40,.42), transparent 58%),
              radial-gradient(760px 460px at 92% 112%, rgba(224,138,0,.28), transparent 55%),
              linear-gradient(160deg, #1C1719 0%, #2A2125 52%, #161214 100%);
  color: #fff;
}
.login-brand::before { content: ""; position: absolute; inset: 0; opacity: .08; background-image: radial-gradient(rgba(255,255,255,.9) 1px, transparent 1px); background-size: 26px 26px; }
.lb-inner { position: relative; z-index: 1; max-width: 470px; }
.lb-logo { display: flex; align-items: center; gap: 12px; margin-bottom: 30px; }
.lb-logo .logo-bird { font-size: 30px; line-height: 1; }
.lb-name { font-size: 20px; font-weight: 800; letter-spacing: .01em; }
.lb-name small { display: block; font-size: 11px; font-weight: 500; color: rgba(255,255,255,.55); letter-spacing: .06em; }
.lb-h1 { font-size: 30px; font-weight: 800; letter-spacing: -.02em; margin: 0 0 12px; }
.lb-lead { color: rgba(255,255,255,.74); font-size: 14.5px; line-height: 1.8; margin: 0 0 30px; }
.lb-features { display: grid; gap: 11px; }
.lb-feature { display: flex; gap: 12px; align-items: flex-start; background: rgba(255,255,255,.07); border: 1px solid rgba(255,255,255,.1); border-radius: 13px; padding: 12px 14px; }
.lb-feature svg { width: 18px; height: 18px; color: #FCA5A5; flex-shrink: 0; margin-top: 2px; }
.lb-feature b { font-size: 13px; display: block; margin-bottom: 2px; }
.lb-feature span { font-size: 12px; color: rgba(255,255,255,.66); line-height: 1.65; }
.lb-foot { margin-top: 34px; font-size: 11.5px; color: rgba(255,255,255,.4); }
.login-form-side { flex: 1; display: flex; align-items: center; justify-content: center; padding: 40px; background: var(--fnv-bg); }
.login-card { width: 100%; max-width: 384px; }
.lc-head { text-align: center; margin-bottom: 24px; }
.lc-head h2 { font-size: 22px; font-weight: 800; margin: 0 0 6px; }
.lc-head p { font-size: 13px; color: var(--fnv-text-2); margin: 0; }
.lc-foot { text-align: center; margin-top: 18px; font-size: 11.5px; color: var(--fnv-text-3); }

/* ---------- 7.1 A4 单据 (预览/PDF 风格) ---------- */
.preview-sheet { background: #fff; color: #26222A; border-radius: 14px; box-shadow: var(--fnv-shadow-lg); max-width: 820px; margin: 0 auto; padding: 40px; }
.preview-toolbar { max-width: 820px; margin: 0 auto 14px; }
.a4-deal-stamp {
  position: absolute; right: 46px; top: 190px;
  border: 2.5px solid #059669; color: #059669; border-radius: 10px;
  font-size: 17px; font-weight: 800; padding: 8px 14px; letter-spacing: .18em;
  transform: rotate(-14deg); opacity: .85;
}

/* ---------- 8. 响应式 ---------- */
@media (max-width: 1199.98px) {
  .kpi-grid { grid-template-columns: repeat(3, 1fr); }
}
@media (max-width: 991.98px) {
  .sidebar { transform: translateX(-102%); }
  .sidebar.open { transform: translateX(0); box-shadow: var(--fnv-shadow-lg); }
  .main-content { margin-left: 0; }
  .tb-burger { display: inline-flex; }
  .cmd-trigger { max-width: none; }
  .settings-layout { flex-direction: column; }
  .settings-nav { width: 100%; position: static; display: flex; overflow-x: auto; }
  .settings-nav a { white-space: nowrap; }
  .login-brand { display: none; }
  .form-grid { grid-template-columns: repeat(6, 1fr); }
  .fg-2, .fg-3, .fg-4 { grid-column: span 3; } .fg-5, .fg-6, .fg-8, .fg-9, .fg-12 { grid-column: span 6; }
}
@media (max-width: 767.98px) {
  .page-content { padding: 16px 14px 32px; }
  .topbar { padding: 10px 14px; }
  .kpi-grid { grid-template-columns: repeat(2, 1fr); gap: 10px; }
  .cmd-trigger .kbd { display: none; }
  .tb-hide-sm { display: none; }
  .form-grid { grid-template-columns: 1fr; }
  .fg-2, .fg-3, .fg-4, .fg-5, .fg-6, .fg-8, .fg-9, .fg-12 { grid-column: span 1; }
  .preview-sheet { padding: 28px 20px; }
  .drawer { width: 100%; max-width: 100%; }
}

/* ============================================================
   V1.7 移动端适配增强 (侧栏抽屉/明细横滑/触控优化/栅格降列)
   ============================================================ */

/* --- 抽屉遮罩与滚动锁 (配合 app.js sb-backdrop/sb-locked) --- */
.sb-backdrop {
  display: none;
  position: fixed; inset: 0; z-index: 1025;
  background: rgba(15, 12, 14, .55);
  opacity: 0; transition: opacity .2s ease;
}
.sb-backdrop.show { opacity: 1; }
body.sb-locked { overflow: hidden; }

/* --- 栅格工具类 (仪表盘多列布局降列用) --- */
.dash-cols { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; margin-bottom: 16px; }
.dash-cols-3 { display: grid; grid-template-columns: 1fr 1fr 1.2fr; gap: 16px; margin-bottom: 16px; }
.dash-cols-main { display: grid; grid-template-columns: 2fr 1fr; gap: 16px; margin-bottom: 16px; }

@media (max-width: 1199.98px) {
  .dash-cols-3 { grid-template-columns: 1fr 1fr; }
}
@media (max-width: 991.98px) {
  .dash-cols-main { grid-template-columns: 1fr; }
}
@media (max-width: 991.98px) {
  .sb-backdrop { display: block; pointer-events: none; }
  .sb-backdrop.show { pointer-events: auto; }
  /* 触控目标优化: 平板/手机下输入与按钮增高 */
  .input, .select, .form-control, .form-select { min-height: 42px; }
  .btn { min-height: 38px; }
  .btn-sm { min-height: 34px; }
  .sb-item { padding-top: 11px; padding-bottom: 11px; }
  /* 表格在窄屏字号略收 + 行内操作左对齐换行 */
  table { font-size: 12.5px; }
}

@media (max-width: 767.98px) {
  .dash-cols, .dash-cols-3 { grid-template-columns: 1fr; gap: 12px; margin-bottom: 12px; }
  /* 卡片头部堆叠: 标题一行, 副标题与操作区各占一行 */
  .card-head { flex-wrap: wrap; row-gap: 8px; }
  .page-head .page-title { font-size: 18px; }
  .row-actions { justify-content: flex-start; flex-wrap: wrap; }
  /* 明细横滑提示性视觉: 首行单元格不换行防止表格塌陷 */
  .table-wrap td, .table-wrap th { white-space: nowrap; }
  /* 筛选表单纵向堆叠 */
  .filter-bar { flex-wrap: wrap; gap: 8px; }
  .filter-bar .input, .filter-bar .select { max-width: none !important; flex: 1 1 46%; }
  /* 弹窗近全屏 */
  .modal-dialog { margin: .35rem; }
  /* KPI 单列收紧 */
  .kpi-grid { grid-template-columns: 1fr; }
  /* 登录页卡片满宽 */
  .login-card { width: 100%; max-width: none; }
  /* 图卡画布高度自适应既有 inline 高度即可, 不再覆盖 */
}
@media (max-width: 374.98px) {
  .kpi-grid { grid-template-columns: 1fr; }
  table { font-size: 12px; }
}