/* ============================================================
   电商开票系统 · UI 设计系统
   风格参照：Opatix（Tailwind 后台模板）
   浅色主题 / 白色侧边栏 / 靛蓝主色 / 圆角卡片 + 柔和阴影
   ============================================================ */

:root {
  --primary: #6366f1;
  --primary-dark: #4f46e5;
  --primary-soft: #eef2ff;
  --primary-soft-2: #e0e7ff;
  --bg: #f4f6fb;
  --card: #ffffff;
  --border: #e9ecf4;
  --text: #1e2537;
  --muted: #636b84;   /* 白底 5.3:1 · 浅灰卡 4.9:1（WCAG AA 达标） */
  --sidebar-w: 236px;
  --topbar-h: 62px;
  --radius: 14px;
  --shadow: 0 1px 2px rgba(16, 24, 40, .04), 0 1px 3px rgba(16, 24, 40, .06);
  --shadow-lift: 0 10px 28px rgba(52, 64, 116, .10);
  --green: #10b981;   --green-soft: #ecfdf5;   --green-deep: #047857;
  --orange: #f59e0b;  --orange-soft: #fffbeb;  --orange-deep: #b45309;
  --red: #f43f5e;     --red-soft: #fff1f2;     --red-deep: #be123c;
  --purple: #8b5cf6;  --purple-soft: #f5f3ff;  --purple-deep: #6d28d9;
  --blue: #3b82f6;    --blue-soft: #eff6ff;    --blue-deep: #1d4ed8;
}

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

body {
  font-family: -apple-system, BlinkMacSystemFont, "Inter", "Segoe UI",
    "PingFang SC", "Microsoft YaHei", sans-serif;
  background: var(--bg);
  color: var(--text);
  font-size: 14px;
  line-height: 1.55;
}

a { color: var(--primary); }
.ico { flex: none; vertical-align: -4px; }

/* ================= 布局骨架 ================= */
body.with-side { min-height: 100vh; }

.sidebar {
  position: fixed; inset: 0 auto 0 0; z-index: 50;
  width: var(--sidebar-w);
  background: #fff; border-right: 1px solid var(--border);
  display: flex; flex-direction: column;
}
.side-brand {
  display: flex; align-items: center; gap: 10px;
  height: var(--topbar-h); padding: 0 18px; flex: none;
  border-bottom: 1px solid var(--border);
  font-weight: 800; font-size: 15.5px; letter-spacing: .2px; color: var(--text);
  text-decoration: none;
}
.side-brand .logo-badge {
  width: 34px; height: 34px; flex: none; border-radius: 10px;
  display: inline-flex; align-items: center; justify-content: center;
  background: linear-gradient(135deg, #6366f1, #8b5cf6);
  color: #fff; box-shadow: 0 4px 10px rgba(99, 102, 241, .35);
}
.side-brand .logo-badge .ico { vertical-align: 0; }

.side-nav { flex: 1; overflow-y: auto; padding: 12px 12px 16px; }
.side-group {
  margin: 16px 10px 6px; font-size: 11.5px; font-weight: 700;
  letter-spacing: .08em; text-transform: none; color: var(--muted);
}
.side-group:first-child { margin-top: 6px; }
.side-link {
  display: flex; align-items: center; gap: 11px;
  margin: 2px 0; padding: 9px 12px; border-radius: 9px;
  color: #4b5567; text-decoration: none; font-weight: 500; font-size: 13.5px;
  transition: background .15s, color .15s;
}
.side-link .ico { color: #7b85a0; transition: color .15s; }
.side-link:hover { background: #f3f5fb; color: var(--text); }
.side-link:hover .ico { color: var(--primary); }
.side-link.active {
  background: var(--primary-soft); color: var(--primary-dark); font-weight: 700;
}
.side-link.active .ico { color: var(--primary); }

.side-foot { flex: none; border-top: 1px solid var(--border); padding: 12px; }
.side-user {
  display: flex; align-items: center; gap: 10px; padding: 8px 10px;
  border-radius: 10px; background: #f8f9fd;
}
.avatar {
  width: 34px; height: 34px; flex: none; border-radius: 50%;
  display: inline-flex; align-items: center; justify-content: center;
  background: var(--primary-soft-2); color: var(--primary-dark);
  font-weight: 700; font-size: 14px;
}
.side-user .u-name { font-weight: 600; font-size: 13px; line-height: 1.2; }
.side-user .u-role { font-size: 12px; color: var(--muted); }
.side-user .u-out { margin-left: auto; color: var(--muted); text-decoration: none; }
.side-user .u-out:hover { color: var(--red); }

/* 主区域 */
.main { min-height: 100vh; margin-left: var(--sidebar-w); display: flex; flex-direction: column; }

.topbar {
  position: sticky; top: 0; z-index: 40;
  height: var(--topbar-h); flex: none;
  background: rgba(255, 255, 255, .92); backdrop-filter: blur(6px);
  border-bottom: 1px solid var(--border);
  display: flex; align-items: center; gap: 14px; padding: 0 26px;
}
.burger {
  display: none; width: 36px; height: 36px; border: 1px solid var(--border);
  border-radius: 9px; background: #fff; color: var(--text); cursor: pointer;
  align-items: center; justify-content: center;
}
.crumb { display: flex; align-items: center; gap: 8px; font-weight: 700; font-size: 16px; }
.crumb .crumb-home { color: var(--muted); text-decoration: none; font-weight: 500; }
.crumb .crumb-home:hover { color: var(--primary); }
.crumb .crumb-sep { color: #c6ccdb; font-weight: 400; }
.top-right { margin-left: auto; display: flex; align-items: center; gap: 12px; }
.who-chip {
  display: inline-flex; align-items: center; gap: 9px;
  padding: 5px 12px 5px 6px; border-radius: 999px; background: #f6f7fc;
  border: 1px solid var(--border); font-size: 12.5px;
}
.who-chip .avatar { width: 26px; height: 26px; font-size: 12px; }
.who-chip b { font-weight: 600; }
.who-chip .u-role { color: var(--muted); }
.out-link {
  display: inline-flex; align-items: center; gap: 6px;
  color: var(--muted); text-decoration: none; font-size: 13px;
  padding: 7px 12px; border-radius: 9px; border: 1px solid transparent;
}
.out-link:hover { color: var(--red-deep); background: var(--red-soft); }

.content { flex: 1; width: 100%; max-width: 1320px; margin: 0 auto; padding: 24px 26px 10px; }
.wrap { max-width: 1320px; margin: 0 auto; padding: 24px 26px 10px; }
body.no-side .wrap { padding-top: 0; }

.foot {
  text-align: center; color: var(--muted); font-size: 12px;
  padding: 26px 0 22px;
}

/* ================= 统计卡（Dashboard 风格） ================= */
.stats { display: grid; grid-template-columns: repeat(auto-fit, minmax(215px, 1fr)); gap: 16px; margin-bottom: 18px; }
.stat-card {
  background: var(--card); border: 1px solid var(--border); border-radius: var(--radius);
  box-shadow: var(--shadow); padding: 16px 18px;
  display: flex; align-items: center; gap: 14px;
}
.stat-icon {
  width: 46px; height: 46px; flex: none; border-radius: 12px;
  display: inline-flex; align-items: center; justify-content: center;
}
.stat-icon.blue   { background: var(--blue-soft);   color: var(--blue-deep); }
.stat-icon.green  { background: var(--green-soft);  color: var(--green-deep); }
.stat-icon.orange { background: var(--orange-soft); color: var(--orange-deep); }
.stat-icon.purple { background: var(--purple-soft); color: var(--purple-deep); }
.stat-label { font-size: 12.5px; color: var(--muted); font-weight: 600; letter-spacing: .02em; }
.stat-value { font-size: 21px; font-weight: 800; line-height: 1.25; font-variant-numeric: tabular-nums; }
.stat-sub { font-size: 12px; color: var(--muted); }

/* ================= 卡片 ================= */
.card {
  background: var(--card); border: 1px solid var(--border); border-radius: var(--radius);
  box-shadow: var(--shadow); padding: 22px; margin-bottom: 18px;
}
.card h2 { font-size: 16px; font-weight: 700; margin-bottom: 14px; }
/* 卡片内次级区块标题（详情页多区块场景，避免与页面标题同级） */
.sec-title {
  display: flex; align-items: center; gap: 7px;
  font-size: 14px; font-weight: 700; color: var(--text);
  margin-bottom: 12px; padding-bottom: 9px;
  border-bottom: 1px solid var(--border);
}
.sec-title .ico { color: var(--primary); flex: none; }
.sec-title.sec-gap { margin-top: 20px; }
.toolbar { display: flex; gap: 10px; align-items: center; margin-bottom: 14px; flex-wrap: wrap; }
.toolbar h2 { margin: 0; }
.spacer { flex: 1; }

/* ================= 表格 ================= */
table.list { width: 100%; border-collapse: collapse; }
table.list th, table.list td { border-bottom: 1px solid var(--border); padding: 11px 12px; text-align: left; white-space: nowrap; }
table.list th {
  background: #f8f9fd; font-weight: 700; color: #5a6478;
  font-size: 12.5px; letter-spacing: .02em;
}
table.list th:first-child { border-radius: 8px 0 0 8px; }
table.list th:last-child  { border-radius: 0 8px 8px 0; }
table.list td.wrap-cell, table.list td .cell-wrap { white-space: normal; }
table.list tr:hover td { background: #fafbff; }
.num { text-align: right; font-variant-numeric: tabular-nums; }

/* ================= 徽章 ================= */
.badge {
  display: inline-block; padding: 3px 11px; border-radius: 999px;
  font-size: 12px; font-weight: 600; line-height: 1.5;
}
.badge.gray   { background: #f1f3f9; color: #59637a; }
.badge.blue   { background: var(--blue-soft);   color: var(--blue-deep); }
.badge.green  { background: var(--green-soft);  color: var(--green-deep); }
.badge.orange { background: var(--orange-soft); color: var(--orange-deep); }
.badge.red    { background: var(--red-soft);    color: var(--red-deep); }
.badge.purple { background: var(--purple-soft); color: var(--purple-deep); }

/* ================= 按钮 ================= */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 6px;
  padding: 8px 18px; border-radius: 9px; border: 1px solid transparent;
  cursor: pointer; font-size: 13.5px; font-weight: 600; text-decoration: none;
  transition: background .15s, box-shadow .15s, border-color .15s, color .15s;
  line-height: 1.5;
}
.btn.primary {
  background: var(--primary-dark); color: #fff;
  box-shadow: 0 4px 12px rgba(79, 70, 229, .28);
}
.btn.primary:hover { background: #4338ca; }
.btn.ghost { background: #fff; border-color: var(--border); color: #4b5567; }
.btn.ghost:hover { border-color: var(--primary); color: var(--primary); background: var(--primary-soft); }
.btn.danger { background: var(--red-soft); color: var(--red-deep); }
.btn.danger:hover { background: #ffe4e6; }
.btn.small { padding: 4px 12px; font-size: 12px; border-radius: 8px; }
.btn:disabled { opacity: .5; cursor: not-allowed; box-shadow: none; }

/* ================= 表单 ================= */
form .field { margin-bottom: 15px; }
form label.lbl { display: block; margin-bottom: 6px; color: #3c4557; font-weight: 600; font-size: 13px; }
form label.lbl .req { color: var(--red); margin-left: 2px; }
form input[type=text], form input[type=number], form input[type=password], form select, form textarea {
  width: 100%; max-width: 420px; padding: 9px 12px; border: 1px solid #dde2ee; border-radius: 9px;
  font-size: 14px; background: #fff; color: var(--text);
  transition: border-color .15s, box-shadow .15s; outline: none;
  font-family: inherit;
}
form input:focus, form select:focus, form textarea:focus {
  border-color: var(--primary); box-shadow: 0 0 0 3px rgba(99, 102, 241, .14);
}
form textarea { max-width: 560px; height: 70px; }
form .hint { font-size: 12px; color: var(--muted); margin-top: 5px; }
.form-row { display: flex; gap: 14px; flex-wrap: wrap; }
.form-row .field { flex: 1; min-width: 180px; }
.inline-form { display: inline; }

/* ================= 提示条 ================= */
.alert {
  padding: 11px 15px; border-radius: 10px; margin-bottom: 15px; font-size: 13px;
  border: 1px solid transparent;
}
.alert.success { background: var(--green-soft);  color: var(--green-deep);  border-color: #d1fae5; }
.alert.error   { background: var(--red-soft);    color: var(--red-deep);    border-color: #ffe4e6; }
.alert.info    { background: var(--blue-soft);   color: var(--blue-deep);   border-color: #dbeafe; }
.alert.info a  { color: #1e40af; font-weight: 600; }   /* 浅蓝底上主色对比不足，改用深靛蓝 */

/* ================= 键值 / 步骤 ================= */
.kv { display: grid; grid-template-columns: 150px 1fr; gap: 9px 12px; font-size: 14px; }
.kv .k { color: var(--muted); }
.steps { display: flex; gap: 0; margin: 6px 0 2px; font-size: 12px; border-radius: 10px; overflow: hidden; }
.steps .step { flex: 1; text-align: center; padding: 9px 0; background: #f1f3f9; color: var(--muted); position: relative; font-weight: 500; }
.steps .step.done { background: var(--primary-soft); color: var(--primary-dark); font-weight: 600; }
.steps .step.cur  { background: var(--primary-dark); color: #fff; font-weight: 600; }

/* ================= 分页 ================= */
.pager { margin-top: 14px; display: flex; gap: 7px; align-items: center; flex-wrap: wrap; }
.pager-info { font-size: 12.5px; color: var(--muted); margin-right: 4px; }
.pager-gap { color: var(--muted); padding: 0 2px; user-select: none; }
.pager a.nav { padding-left: 12px; padding-right: 12px; }
.pager a, .pager b {
  min-width: 30px; height: 30px; display: inline-flex; align-items: center; justify-content: center;
  border-radius: 8px; text-decoration: none; font-size: 13px; padding: 0 6px;
}
.pager a { color: #4b5567; background: #fff; border: 1px solid var(--border); }
.pager a:hover { border-color: var(--primary); color: var(--primary); }
.pager b { background: var(--primary-dark); color: #fff; border: 1px solid var(--primary-dark); font-weight: 700; }

/* ================= 联想下拉 ================= */
.ac-box { position: absolute; z-index: 30; top: 100%; left: 0; right: 0; max-height: 260px; overflow-y: auto;
  background: #fff; border: 1px solid var(--border); border-radius: 10px; box-shadow: var(--shadow-lift); }
.ac-item { padding: 9px 13px; font-size: 13px; cursor: pointer; border-bottom: 1px solid #f3f4f6; }
.ac-item:hover { background: var(--primary-soft); }
.ac-item b { font-weight: 600; }

/* ================= 扫码面板 ================= */
.qr-panel {
  margin-top: 14px; padding: 16px; border: 1px solid var(--border);
  border-radius: 12px; background: #fafbff;
}
.qr-head { display: flex; gap: 10px; align-items: baseline; flex-wrap: wrap; }
.qr-head strong { font-size: 14px; }
.qr-head .muted { font-size: 12px; }
.qr-actions { display: flex; gap: 10px; align-items: center; margin-top: 10px; flex-wrap: wrap; }
.qr-msg { font-size: 12px; color: var(--muted); }
.qr-msg.ok { color: var(--green-deep); font-weight: 600; }
.qr-body { display: flex; gap: 20px; margin-top: 12px; flex-wrap: wrap; }
.qr-item { text-align: center; background: #fff; border: 1px solid var(--border); border-radius: 12px; padding: 12px; }
.qr-item img { width: 180px; height: 180px; display: block; image-rendering: pixelated; }
.qr-cap { margin-top: 7px; font-size: 12px; color: var(--text); }

/* ================= 红冲管理 ================= */
.row-between { display: flex; justify-content: space-between; align-items: center; gap: 12px; flex-wrap: wrap; }
.rf-form label { display: block; font-size: 13px; color: #3c4557; font-weight: 600; }
.rf-form label input { margin-top: 5px; }
form input[type=file], form input[type=date] {
  width: 100%; max-width: 420px; padding: 7px 10px; border: 1px solid #dde2ee;
  border-radius: 9px; font-size: 13px; background: #fff; color: var(--text); font-family: inherit;
}

/* ================= 登录页 ================= */
body.no-side { min-height: 100vh; background: linear-gradient(160deg, #eef1fb 0%, #f6f4fd 55%, #fdf3f6 100%); }
.login-wrap { min-height: 100vh; display: flex; align-items: center; justify-content: center; padding: 30px 16px; }
.login-box {
  width: 100%; max-width: 400px; margin: 0;
  background: #fff; border: 1px solid var(--border); border-radius: 18px;
  box-shadow: 0 18px 50px rgba(52, 64, 116, .14); padding: 34px 30px 26px;
}
.login-box .login-logo {
  width: 52px; height: 52px; border-radius: 14px; margin: 0 auto 14px;
  display: flex; align-items: center; justify-content: center;
  background: linear-gradient(135deg, #6366f1, #8b5cf6); color: #fff;
  box-shadow: 0 8px 20px rgba(99, 102, 241, .35);
}
.login-box h2 { text-align: center; font-size: 18px; margin-bottom: 4px; }
.login-box .login-sub { text-align: center; color: var(--muted); font-size: 12.5px; margin-bottom: 20px; }

.muted { color: var(--muted); }

/* ================= 空状态引导 ================= */
.empty-state {
  text-align: center; padding: 48px 20px 40px; color: var(--text);
}
.empty-state .empty-ico {
  width: 84px; height: 84px; margin: 0 auto 16px; border-radius: 22px;
  display: flex; align-items: center; justify-content: center;
  background: var(--primary-soft); color: var(--primary);
}
.empty-state p { margin: 4px 0; }
.empty-state .muted { color: var(--muted); font-size: 13px; margin-bottom: 14px; }

/* 额度警示统计卡 */
.stat-card.stat-warn { border-color: #fecdd3; background: #fff5f6; }

/* ================= 深色模式 ================= */
body[data-theme="dark"] {
  --bg: #0f1424;
  --card: #161c30;
  --border: #252c44;
  --text: #e2e6f2;
  --muted: #939cb5;   /* 卡底 5.4:1 · 顶栏 5.1:1（WCAG AA） */
  --primary-soft: #232a47;
  --primary-soft-2: #2b3357;
  background: var(--bg);
  color: var(--text);
}
body[data-theme="dark"] .sidebar { background: #131829; }
body[data-theme="dark"] .topbar { background: rgba(19, 24, 41, .92); }
body[data-theme="dark"] .side-link { color: #aeb6cc; }
body[data-theme="dark"] .side-link:hover { background: #1c2338; color: #fff; }
body[data-theme="dark"] .side-link.active { background: var(--primary-soft); color: #a5b4fc; }
body[data-theme="dark"] .side-user { background: #1c2338; }
body[data-theme="dark"] .who-chip { background: #1c2338; }
body[data-theme="dark"] table.list th { background: #1a2036; color: #9aa4bf; }
body[data-theme="dark"] table.list tr:hover td { background: #1a2036; }
body[data-theme="dark"] .btn.ghost { background: var(--card); color: #c6cde0; border-color: var(--border); }
body[data-theme="dark"] .btn.ghost:hover { background: var(--primary-soft); }
body[data-theme="dark"] .stat-card.stat-warn { background: #2a1b22; border-color: #4c2734; }
body[data-theme="dark"] .badge.gray { background: #232a47; color: #9aa4bf; }
body[data-theme="dark"] .steps .step { background: #1c2338; }
body[data-theme="dark"] .qr-panel { background: #1a2036; }
body[data-theme="dark"] .empty-state .empty-ico { background: var(--primary-soft); }
body[data-theme="dark"] .login-wrap body, body[data-theme="dark"].no-side { background: #0f1424; }

/* 深色模式：下拉框弹出层（浏览器默认 option 是白底，不指定会导致浅色字落在白底上=看不见） */
body[data-theme="dark"] select option,
body[data-theme="dark"] select optgroup { background: #1c2338; color: #e2e6f2; }
body[data-theme="dark"] input::placeholder,
body[data-theme="dark"] textarea::placeholder { color: #808aa3; }
body[data-theme="dark"] input,
body[data-theme="dark"] select,
body[data-theme="dark"] textarea { color-scheme: dark; }
body[data-theme="dark"] input[type=date],
body[data-theme="dark"] input[type=datetime-local] { color-scheme: dark; }
body[data-theme="dark"] .side-link .ico { color: #939cb5; }

/* 主题切换按钮 */
.theme-toggle {
  display: inline-flex; align-items: center; justify-content: center;
  width: 34px; height: 34px; border-radius: 9px; border: 1px solid var(--border);
  background: transparent; color: var(--muted); cursor: pointer;
  transition: color .15s, border-color .15s;
}
.theme-toggle:hover { color: var(--primary); border-color: var(--primary); }

/* 最近访问下拉 */
.recent-box { position: relative; }
.recent-box .theme-toggle { width: auto; padding: 0 10px; gap: 4px; }
.recent-drop {
  display: none; position: absolute; right: 0; top: calc(100% + 6px); z-index: 60;
  min-width: 280px; max-width: 380px; background: #fff; border: 1px solid var(--border);
  border-radius: 10px; box-shadow: var(--shadow-lift); overflow: hidden;
}
.recent-drop a {
  display: flex; justify-content: space-between; gap: 12px; padding: 9px 14px;
  color: var(--text); text-decoration: none; font-size: 13px; font-weight: 600;
  border-bottom: 1px solid #f1f3f9;
}
.recent-drop a:hover { background: var(--primary-soft); }
.recent-drop a .r-name { color: var(--muted); font-weight: 400; font-size: 12px; max-width: 200px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.recent-drop a.r-clear { color: var(--muted); font-weight: 400; justify-content: center; font-size: 12px; }
body[data-theme="dark"] .recent-drop { background: var(--card); }
body[data-theme="dark"] .recent-drop a { border-color: #232a47; }

/* ================= 数据统计汇总条 ================= */
.stat-meter {
  display: block; height: 5px; width: 100%; max-width: 180px;
  border-radius: 3px; background: #e8ebf5; overflow: hidden; margin: 4px 0 2px;
}
.stat-meter i { display: block; height: 100%; border-radius: 3px; background: linear-gradient(90deg, #34d399, #10b981); }

.sumbar {
  display: flex; align-items: center; gap: 18px; flex-wrap: wrap;
  padding: 13px 20px; margin-bottom: 18px;
}
.sumbar-sec { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.sumbar-title { font-size: 12px; color: var(--muted); font-weight: 700; letter-spacing: .04em; }
.sumbar-chips { display: flex; align-items: center; gap: 7px; flex-wrap: wrap; }
.sumbar-chips a { text-decoration: none; }
.sumbar-chips a .badge:hover { filter: brightness(.96); box-shadow: 0 0 0 2px rgba(99, 102, 241, .18); }
.sumbar-chips > a:last-child { color: var(--muted); font-size: 12.5px; display: inline-flex; align-items: center; gap: 4px; }
.sumbar-chips > a:last-child:hover { color: var(--primary); }
.sumbar-div { width: 1px; height: 22px; background: var(--border); flex: none; }

body[data-theme="dark"] .stat-meter { background: #232a47; }

/* ================= 通用工具类（替代散落各页的 inline style） ================= */
.mt4 { margin-top: 4px; }    .mt8 { margin-top: 8px; }
.mt10 { margin-top: 10px; }  .mt12 { margin-top: 12px; }  .mt16 { margin-top: 16px; }
.mt20 { margin-top: 20px; }
.fs12 { font-size: 12px; }
.upper { text-transform: uppercase; }
.tight { margin: 0; }
.w36 { width: 36px; }   .w90 { width: 90px; }   .w110 { width: 110px; }
.w150 { width: 150px; } .w180 { width: 180px; } .w220 { width: 220px; }
.mw150 { max-width: 150px; } .mw220 { max-width: 220px; }
.center-muted { text-align: center; color: var(--muted); padding: 30px; }
.row-inline { display: flex; gap: 6px; align-items: center; margin-top: 4px; }
@media (max-width: 640px) {
  .w36, .w90, .w110, .w150, .w180, .w220 { width: auto; }
}

/* 小屏隐藏次要列（保留 单号/名称/金额/状态/操作 等核心列） */
@media (max-width: 720px) {
  .hide-sm { display: none !important; }
  table.list { font-size: 12.5px; }
  table.list th, table.list td { padding: 8px 9px; }
  .toolbar { flex-wrap: wrap; gap: 8px; }
  .toolbar .spacer { display: none; }
  .stats { grid-template-columns: repeat(2, 1fr); }
  .form-row { grid-template-columns: 1fr; }
}

/* ================= 列表筛选行：控件拉长铺满、始终单行 ================= */
form.filter-form { flex-wrap: nowrap; }
form.filter-form > * { min-width: 0; }
form.filter-form > select,
form.filter-form > input[type=date],
form.filter-form > input[type=text] {
  flex: 1 1 0; width: auto; max-width: none; padding: 8px 10px;
}
form.filter-form > .muted,
form.filter-form > .btn { flex: none; }

/* ================= 数电发票式申请表单 ================= */
.inv-top {
  display: flex; align-items: center; gap: 14px; flex-wrap: wrap; margin-bottom: 16px;
}
.inv-top-side { flex: 1 1 220px; display: flex; gap: 10px; align-items: center; flex-wrap: wrap; min-width: 0; }
.inv-top-side.right { justify-content: flex-end; }
.inv-title-box {
  flex: none; border: 2px solid var(--primary); border-radius: 8px;
  background: var(--primary-soft); padding: 4px 10px; box-shadow: 0 2px 10px rgba(99, 102, 241, .12);
}
.inv-title-box select, form .inv-title-box select {
  border: 0; background: transparent; box-shadow: none; padding: 6px 4px; width: auto; max-width: none;
  font-size: 19px; font-weight: 800; color: var(--primary-dark);
  text-align: center; cursor: pointer; letter-spacing: .02em;
}
.inv-mini { display: flex; align-items: center; gap: 6px; font-size: 12.5px; color: var(--muted); font-weight: 600; }
.inv-mini > span { white-space: nowrap; flex: none; }
.inv-mini select { padding: 7px 10px; font-size: 13px; }

.inv-panels {
  display: grid; grid-template-columns: 1fr 1fr;
  border: 1.5px solid var(--primary-soft-2); border-radius: 10px; overflow: hidden;
}
.inv-panel { display: flex; min-width: 0; background: var(--card); }
.inv-panel + .inv-panel { border-left: 1.5px solid var(--primary-soft-2); }
.inv-vlabel {
  flex: none; writing-mode: vertical-rl; text-orientation: upright; letter-spacing: .32em;
  display: flex; align-items: center; justify-content: center;
  font-weight: 800; font-size: 13px; padding: 12px 7px;
  color: var(--primary-dark); background: var(--primary-soft);
}
.inv-vlabel.sell { color: #0f766e; background: #effaf7; }
.inv-body { flex: 1; min-width: 0; }
.inv-line {
  display: flex; align-items: center; gap: 8px;
  padding: 5px 12px; border-bottom: 1px solid var(--border); min-height: 46px;
}
.inv-line:last-child { border-bottom: 0; }
.inv-lbl { flex: none; width: 92px; font-size: 12.5px; color: var(--muted); font-weight: 700; }
.inv-lbl.sm { width: 46px; }
.inv-line input[type=text], .inv-line input[type=number] {
  flex: 1; min-width: 0; border: 1px solid transparent; background: transparent;
  box-shadow: none; padding: 7px 8px; border-radius: 6px; font-size: 13.5px;
}
.inv-line input:hover { border-color: var(--border); }
.inv-line input:focus { border-color: var(--primary); background: var(--card); outline: none; box-shadow: 0 0 0 3px rgba(99, 102, 241, .12); }
.inv-static { font-size: 13.5px; font-weight: 700; }
.inv-static-sub { font-size: 12px; color: var(--muted); font-weight: 400; margin-left: 6px; }
.inv-pos { position: relative; flex: 1; min-width: 0; display: flex; }

.inv-items { margin-top: 14px; border: 1.5px solid var(--primary-soft-2); border-radius: 10px; overflow: hidden; }
.inv-items-scroll { overflow-x: auto; }
.inv-items-inner { min-width: 980px; }
.inv-ihead, .inv-irow {
  display: grid;
  grid-template-columns: 1.9fr .9fr .55fr .6fr .85fr .95fr .75fr .85fr 1fr 46px;
}
.inv-ihead { background: var(--primary-soft); }
.inv-ihead > div {
  padding: 9px 10px; font-size: 12.5px; font-weight: 800; color: var(--primary-dark);
  border-left: 1px solid var(--border);
}
.inv-ihead > div:first-child, .inv-irow > div:first-child { border-left: 0; }
.inv-irow > div { padding: 5px 7px; border-left: 1px solid var(--border); border-top: 1px solid var(--border); min-width: 0; display: flex; align-items: center; }
form .inv-irow input, form .inv-irow select {
  width: 100%; max-width: none; border: 1px solid transparent; background: transparent; box-shadow: none;
  padding: 7px 6px; border-radius: 6px; font-size: 13.5px;
}
form .inv-irow input:hover, form .inv-irow select:hover { border-color: var(--border); }
form .inv-irow input:focus, form .inv-irow select:focus { border-color: var(--primary); background: var(--card); outline: none; box-shadow: 0 0 0 3px rgba(99, 102, 241, .12); }
.inv-irow .cell-proj { position: relative; }
.inv-ihead > div.c-act, .inv-irow > div.c-act { text-align: center; justify-content: center; }
.inv-del {
  width: 26px; height: 26px; line-height: 1; border-radius: 7px; cursor: pointer;
  border: 1px solid var(--border); background: transparent; color: var(--muted); font-size: 16px;
}
.inv-del:hover { color: var(--red); border-color: #fecdd3; background: var(--red-soft); }
.inv-tax-amt { font-weight: 700; color: #b45309; font-size: 13.5px; padding-left: 4px; }
.inv-total { display: flex; align-items: stretch; border-top: 1.5px solid var(--primary-soft-2); }
.inv-total .t-label {
  flex: none; display: flex; align-items: center; padding: 10px 14px;
  background: var(--primary-soft); color: var(--primary-dark); font-weight: 800; font-size: 12.5px;
}
.inv-total .t-upper { flex: 1; display: flex; align-items: center; padding: 10px 14px; font-weight: 800; color: #b91c1c; min-width: 0; }
.inv-total .t-lower {
  flex: none; display: flex; align-items: center; padding: 10px 14px;
  border-left: 1px solid var(--border); font-weight: 800; font-size: 15px;
}
.inv-total .t-tax {
  flex: none; display: flex; align-items: center; padding: 10px 14px;
  border-left: 1px solid var(--border); font-weight: 700; font-size: 12.5px; color: var(--muted);
}
.inv-total .t-tax span { margin-left: 4px; color: #b45309; font-weight: 800; }
.inv-items-foot { padding: 8px 12px; border-top: 1px solid var(--border); display: flex; align-items: center; gap: 12px; flex-wrap: wrap; }
.inv-paste { padding: 12px; border-top: 1px solid var(--border); background: var(--primary-soft); }
.inv-paste .hint { margin-bottom: 8px; line-height: 1.7; }
form .inv-paste textarea, .inv-paste textarea {
  width: 100%; max-width: none; min-height: 110px; background: var(--card);
  border: 1px solid var(--border); border-radius: 8px; padding: 10px 12px;
  font-size: 13px; font-family: ui-monospace, Consolas, Menlo, monospace; box-shadow: none;
}
form .inv-paste textarea:focus { border-color: var(--primary); box-shadow: 0 0 0 3px rgba(99, 102, 241, .12); }

.inv-remark { display: flex; margin-top: 14px; border: 1.5px solid var(--primary-soft-2); border-radius: 10px; overflow: hidden; }
.inv-remark .inv-vlabel { letter-spacing: .32em; }
form .inv-remark textarea, .inv-remark textarea {
  flex: 1; border: 0; box-shadow: none; min-height: 74px; resize: vertical; max-width: none;
  padding: 10px 12px; font-size: 13.5px; background: transparent;
}
.inv-remark textarea:focus { outline: none; box-shadow: inset 0 0 0 2px rgba(99, 102, 241, .25); }

body[data-theme="dark"] .inv-vlabel.sell { background: #12322d; color: #5eead4; }
body[data-theme="dark"] .inv-title-box { box-shadow: 0 2px 12px rgba(0, 0, 0, .35); }
body[data-theme="dark"] .inv-tax-amt { color: #fbbf24; }
body[data-theme="dark"] .inv-total .t-tax span { color: #fbbf24; }
body[data-theme="dark"] .inv-del:hover { background: #3a1d24; border-color: #5c2733; color: #fca5a5; }
body[data-theme="dark"] .inv-total .t-upper { color: #f87171; }
body[data-theme="dark"] form .inv-mini select { background: var(--card); }

@media (max-width: 900px) {
  .inv-panels { grid-template-columns: 1fr; }
  .inv-panel + .inv-panel { border-left: 0; border-top: 1.5px solid var(--primary-soft-2); }
  .inv-title-box select { font-size: 16px; }
  .inv-top-side.right { justify-content: flex-start; }
}

@media (max-width: 640px) {
  .inv-total { flex-wrap: wrap; }
  .inv-total .t-upper { flex-basis: 100%; order: 3; border-top: 1px solid var(--border); }
  .inv-total .t-lower { margin-left: auto; }
  .inv-total .t-tax { order: 4; border-left: 0; border-top: 1px solid var(--border); margin-left: auto; }
  .inv-lbl { width: 74px; }
}

/* ================= 响应式 ================= */
.side-mask { display: none; }
@media (max-width: 992px) {
  .sidebar { transform: translateX(-100%); transition: transform .22s ease; box-shadow: none; }
  body.sidebar-open .sidebar { transform: translateX(0); box-shadow: 0 0 40px rgba(16, 24, 40, .18); }
  body.sidebar-open .side-mask {
    display: block; position: fixed; inset: 0; z-index: 45;
    background: rgba(15, 23, 42, .4); border: 0; cursor: pointer;
  }
  .main { margin-left: 0; }
  .burger { display: inline-flex; }
  .content, .wrap { padding: 16px 14px 8px; }
  .topbar { padding: 0 14px; }
  .who-chip .u-role { display: none; }
  .stats { grid-template-columns: repeat(auto-fit, minmax(160px, 1fr)); gap: 10px; }
  table.list { display: block; overflow-x: auto; }
  .kv { grid-template-columns: 120px 1fr; }
}

/* ============================================================
   统一弹窗 / 反馈组件（ui.js）
   配色全部取自主题变量，浅色 / 深色自动跟随；动画 180ms
   ============================================================ */

/* —— 模态遮罩与对话框 —— */
.ui-overlay {
  position: fixed; inset: 0; z-index: 1200;
  display: flex; align-items: center; justify-content: center; padding: 24px;
  background: rgba(15, 23, 42, .45);
  opacity: 0; transition: opacity .18s ease;
}
.ui-overlay.is-open { opacity: 1; }
.ui-overlay.is-busy { cursor: progress; }

.ui-dialog {
  width: 100%; min-width: 320px; max-width: 440px; max-height: calc(100vh - 48px);
  display: flex; flex-direction: column;
  background: var(--card); color: var(--text);
  border: 1px solid var(--border); border-radius: 14px;
  box-shadow: 0 24px 60px rgba(16, 24, 40, .22);
  opacity: 0; transform: translateY(10px) scale(.97);
  transition: opacity .18s ease, transform .18s ease;
}
.ui-overlay.is-open .ui-dialog { opacity: 1; transform: none; }
.ui-dialog.ui-shake { animation: ui-shake .22s ease; }
@keyframes ui-shake {
  0%, 100% { transform: translateX(0); }
  25% { transform: translateX(-5px); }
  75% { transform: translateX(5px); }
}

.ui-head { display: flex; align-items: flex-start; gap: 10px; padding: 16px 16px 6px; }
.ui-title { flex: 1; min-width: 0; margin: 5px 0 0; font-size: 16px; font-weight: 700; line-height: 1.4; }
.ui-x {
  flex: none; width: 30px; height: 30px; border: 0; border-radius: 8px; cursor: pointer;
  background: transparent; color: var(--muted);
  display: inline-flex; align-items: center; justify-content: center;
}
.ui-x svg { width: 16px; height: 16px; }
.ui-x:hover { background: var(--bg); color: var(--text); }
.ui-x:disabled { opacity: .4; cursor: not-allowed; }

/* —— 语义图标（颜色随主题变量） —— */
.ui-ico {
  flex: none; width: 34px; height: 34px; border-radius: 10px;
  display: inline-flex; align-items: center; justify-content: center;
  background: var(--primary-soft); color: var(--primary-dark);
}
.ui-ico svg { width: 19px; height: 19px; }
.ui-ico-primary { background: var(--primary-soft); color: var(--primary-dark); }
.ui-ico-info    { background: var(--blue-soft);    color: var(--blue-deep); }
.ui-ico-success { background: var(--green-soft);   color: var(--green-deep); }
.ui-ico-warning { background: var(--orange-soft);  color: var(--orange-deep); }
.ui-ico-danger, .ui-ico-error { background: var(--red-soft); color: var(--red-deep); }

.ui-body { padding: 0 16px 2px 60px; overflow: auto; }
.ui-msg { font-size: 13.5px; line-height: 1.65; color: var(--muted); }
.ui-err {
  display: flex; align-items: center; gap: 8px; flex-wrap: wrap; margin-top: 10px;
  padding: 9px 11px; border-radius: 9px; font-size: 13px;
  background: var(--red-soft); color: var(--red-deep); border: 1px solid #ffe4e6;
}
.ui-err[hidden] { display: none; }
.ui-retry {
  border: 0; padding: 0; background: transparent; color: inherit;
  font-size: 13px; font-weight: 700; text-decoration: underline; cursor: pointer;
}

.ui-foot { display: flex; justify-content: flex-end; gap: 10px; padding: 14px 16px 16px; }
.ui-foot .btn { display: inline-flex; align-items: center; justify-content: center; min-width: 100px; }
.ui-ok.is-loading { position: relative; color: transparent !important; pointer-events: none; }
.ui-ok.is-loading::after {
  content: ''; position: absolute; left: 50%; top: 50%; margin: -8px 0 0 -8px;
  width: 16px; height: 16px; border-radius: 50%;
  border: 2px solid rgba(255, 255, 255, .45); border-top-color: #fff;
  animation: ui-spin .7s linear infinite;
}
@keyframes ui-spin { to { transform: rotate(360deg); } }
.ui-ok-danger  { background: var(--red-deep);    border-color: var(--red-deep);    color: #fff; }
.ui-ok-danger:hover  { background: #9f1239; border-color: #9f1239; }
.ui-ok-warning { background: var(--orange-deep); border-color: var(--orange-deep); color: #fff; }
.ui-ok-warning:hover { background: #92400e; border-color: #92400e; }

/* —— Popconfirm 气泡确认（不遮罩全局、不锁滚动） —— */
.ui-pop {
  position: fixed; z-index: 1150;
  width: 272px; max-width: calc(100vw - 24px); padding: 12px 13px;
  border-radius: 12px; background: var(--card); color: var(--text);
  border: 1px solid var(--border); box-shadow: 0 14px 34px rgba(16, 24, 40, .18);
  opacity: 0; transform: translateY(-6px) scale(.98);
  transition: opacity .18s ease, transform .18s ease;
}
.ui-pop.is-open { opacity: 1; transform: none; }
.ui-pop-main { display: flex; gap: 9px; }
.ui-pop .ui-ico { width: 26px; height: 26px; border-radius: 8px; }
.ui-pop .ui-ico svg { width: 15px; height: 15px; }
.ui-pop-title { font-size: 13.5px; font-weight: 700; line-height: 1.4; }
.ui-pop-msg { font-size: 12.5px; color: var(--muted); line-height: 1.55; margin-top: 2px; }
.ui-pop-foot { display: flex; justify-content: flex-end; gap: 8px; margin-top: 10px; }
.ui-pop-foot button {
  border: 1px solid var(--border); background: var(--bg); color: var(--text);
  font-size: 12.5px; font-weight: 600; padding: 5px 11px; border-radius: 8px; cursor: pointer;
}
.ui-pop-foot button:hover { border-color: var(--primary); color: var(--primary); }
.ui-pop .ui-pop-ok { background: var(--primary-dark); border-color: var(--primary-dark); color: #fff; }
.ui-pop .ui-pop-ok:hover { background: #4338ca; border-color: #4338ca; color: #fff; }
.ui-pop.ui-danger .ui-pop-ok { background: var(--red-deep); border-color: var(--red-deep); }
.ui-pop.ui-danger .ui-pop-ok:hover { background: #9f1239; border-color: #9f1239; }

/* —— Toast：无需决策的结果反馈 —— */
.ui-toasts {
  position: fixed; top: 16px; right: 16px; z-index: 1300;
  display: flex; flex-direction: column; align-items: flex-end; gap: 10px;
  pointer-events: none;
}
.ui-toast {
  pointer-events: auto; position: relative; overflow: hidden;
  display: flex; align-items: flex-start; gap: 10px;
  width: 340px; max-width: calc(100vw - 32px); padding: 12px 13px;
  border-radius: 12px; background: var(--card); color: var(--text);
  border: 1px solid var(--border); box-shadow: 0 12px 30px rgba(16, 24, 40, .16);
  opacity: 0; transform: translateX(14px);
  transition: opacity .18s ease, transform .18s ease;
}
.ui-toast.is-open { opacity: 1; transform: none; }
.ui-toast.is-hide { opacity: 0; transform: translateX(14px); }
.ui-t-main { flex: 1; min-width: 0; }
.ui-t-title { font-size: 13.5px; font-weight: 700; line-height: 1.4; }
.ui-t-msg { font-size: 12.5px; color: var(--muted); margin-top: 2px; line-height: 1.5; }
.ui-toast .ui-ico { width: 26px; height: 26px; border-radius: 8px; }
.ui-toast .ui-ico svg { width: 15px; height: 15px; }
.ui-t-x {
  flex: none; border: 0; padding: 2px; border-radius: 6px; cursor: pointer;
  background: transparent; color: var(--muted);
  display: inline-flex; align-items: center; justify-content: center;
}
.ui-t-x svg { width: 14px; height: 14px; }
.ui-t-x:hover { background: var(--bg); color: var(--text); }
.ui-t-bar {
  position: absolute; left: 0; bottom: 0; height: 2px; width: 100%;
  background: var(--primary); transform-origin: left center;
  animation: ui-bar var(--ui-t-dur, 3000ms) linear forwards;
}
.ui-toast.is-paused .ui-t-bar { animation-play-state: paused; }
@keyframes ui-bar { from { transform: scaleX(1); } to { transform: scaleX(0); } }
.ui-toast.ui-success .ui-t-bar { background: var(--green); }
.ui-toast.ui-warning .ui-t-bar { background: var(--orange); }
.ui-toast.ui-danger .ui-t-bar, .ui-toast.ui-error .ui-t-bar { background: var(--red); }

/* —— 内嵌 Alert（服务端结果反馈，不打断流程） —— */
.alert { display: flex; align-items: flex-start; gap: 10px; transition: opacity .18s ease, transform .18s ease; }
.alert.is-hide { opacity: 0; transform: translateY(-4px); }
.alert .alert-body { flex: 1; min-width: 0; }
.alert .ui-ico { width: 24px; height: 24px; border-radius: 8px; margin-top: 1px; }
.alert .ui-ico svg { width: 14px; height: 14px; }
.ui-alert-x {
  flex: none; border: 0; padding: 2px; border-radius: 6px; cursor: pointer;
  background: transparent; color: inherit; opacity: .65;
  display: inline-flex; align-items: center; justify-content: center;
}
.ui-alert-x svg { width: 14px; height: 14px; }
.ui-alert-x:hover { opacity: 1; background: rgba(127, 127, 127, .12); }

/* —— 深色主题：配色跟随系统变量 —— */
body[data-theme="dark"] .ui-overlay { background: rgba(3, 6, 18, .62); }
body[data-theme="dark"] .ui-dialog,
body[data-theme="dark"] .ui-pop,
body[data-theme="dark"] .ui-toast { box-shadow: 0 18px 44px rgba(0, 0, 0, .5); }
body[data-theme="dark"] .ui-ico-primary { background: var(--primary-soft); color: #a5b4fc; }
body[data-theme="dark"] .ui-ico-info    { background: #14243d; color: #93c5fd; }
body[data-theme="dark"] .ui-ico-success { background: #10312a; color: #6ee7b7; }
body[data-theme="dark"] .ui-ico-warning,
body[data-theme="dark"] .ui-ico-danger,
body[data-theme="dark"] .ui-ico-error  { background: #3a1a26; color: #fda4af; }
body[data-theme="dark"] .ui-ico-warning { background: #3a2a10; color: #fcd34d; }
body[data-theme="dark"] .ui-err { background: #3a1425; color: #fda4af; border-color: #4c1d2c; }
body[data-theme="dark"] .ui-x:hover { background: var(--primary-soft); color: var(--text); }
body[data-theme="dark"] .ui-t-x:hover { background: var(--primary-soft); color: var(--text); }
body[data-theme="dark"] .ui-pop-foot button { background: var(--primary-soft); }
body[data-theme="dark"] .ui-pop .ui-pop-ok:hover { background: var(--primary); border-color: var(--primary); }
body[data-theme="dark"] .ui-ok-danger:hover { background: #f43f5e; border-color: #f43f5e; }
body[data-theme="dark"] .ui-ok-warning { background: var(--orange-deep); border-color: var(--orange-deep); }

/* —— 尊重 prefers-reduced-motion —— */
@media (prefers-reduced-motion: reduce) {
  .ui-overlay, .ui-dialog, .ui-pop, .ui-toast, .alert { transition-duration: .01ms !important; }
  .ui-dialog.ui-shake { animation: none !important; }
  .ui-t-bar { animation: none !important; }
}

@media (max-width: 560px) {
  .ui-dialog { min-width: 0; }
  .ui-body { padding-left: 16px; }
  .ui-toasts { left: 12px; right: 12px; align-items: stretch; }
  .ui-toast { width: auto; }
}

/* ============================================================
   Drawer 抽屉 + 发票文件下载面板
   ============================================================ */
.ui-overlay-drawer { align-items: stretch; justify-content: flex-end; padding: 0; }
.ui-drawer {
  position: relative;
  width: min(560px, 96vw); max-width: 96vw; height: 100%;
  display: flex; flex-direction: column;
  background: var(--card); color: var(--text);
  border-left: 1px solid var(--border);
  box-shadow: -18px 0 48px rgba(16, 24, 40, .18);
  transform: translateX(100%);
  transition: transform .2s cubic-bezier(.22, .61, .36, 1);
}
.ui-drawer.is-wide { width: min(680px, 96vw); }
.ui-overlay.is-open .ui-drawer { transform: none; }

.ui-drawer-head {
  flex: none; display: flex; align-items: flex-start; gap: 12px;
  padding: 16px 18px; border-bottom: 1px solid var(--border);
}
.ui-drawer-tbox { min-width: 0; flex: 1; }
.ui-drawer-title { font-size: 16px; font-weight: 700; line-height: 1.4; }
.ui-drawer-desc { margin-top: 3px; font-size: 12.5px; color: var(--muted); }
.ui-drawer-x {
  flex: none; width: 30px; height: 30px; display: flex; align-items: center; justify-content: center;
  border: 0; background: transparent; color: var(--muted); border-radius: 8px; cursor: pointer;
}
.ui-drawer-x svg { width: 17px; height: 17px; }
.ui-drawer-x:hover { background: var(--primary-soft); color: var(--text); }
.ui-drawer-body { flex: 1; min-height: 0; overflow: auto; padding: 16px 18px; }
.ui-drawer-body:focus { outline: none; }
.ui-drawer-foot {
  flex: none; display: flex; justify-content: flex-end; gap: 8px;
  padding: 12px 18px; border-top: 1px solid var(--border); background: var(--card);
}

/* —— 骨架屏（loading 态） —— */
.invf-skel { display: flex; flex-direction: column; gap: 10px; }
.invf-skel-line, .invf-skel-card {
  border-radius: 10px; background: var(--border); opacity: .55;
  animation: invf-pulse 1.2s ease-in-out infinite;
}
.invf-skel-line { height: 13px; }
.invf-skel-line.w40 { width: 40%; }
.invf-skel-line.w70 { width: 70%; margin-bottom: 6px; }
.invf-skel-card { height: 62px; }
@keyframes invf-pulse { 0%, 100% { opacity: .35; } 50% { opacity: .7; } }
.sr-only {
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0;
}

/* —— 状态：empty / error —— */
.invf-state { padding: 28px 12px; text-align: center; }
.invf-state-ico { margin: 0 auto 10px; width: 46px; height: 46px; border-radius: 50%; display: flex; align-items: center; justify-content: center; }
.invf-state-ico svg { width: 24px; height: 24px; }
.invf-state.empty .invf-state-ico { background: var(--primary-soft); color: var(--primary-dark); }
.invf-state.err .invf-state-ico { background: var(--red-soft); color: var(--red-deep); }
.invf-state-title { font-size: 14.5px; font-weight: 700; }
.invf-state-msg { margin: 6px auto 12px; max-width: 380px; font-size: 13px; color: var(--muted); line-height: 1.6; }
.invf-loading, .invf-empty { padding: 24px; text-align: center; font-size: 13px; color: var(--muted); }

/* —— 发票信息条 —— */
.invf-brief {
  display: grid; grid-template-columns: 1fr 1fr; gap: 6px 14px;
  padding: 12px 14px; border-radius: 12px; border: 1px solid var(--border); background: var(--bg);
}
.invf-b-row { display: flex; gap: 8px; align-items: baseline; min-width: 0; }
.invf-b-k { flex: none; width: 62px; font-size: 12.5px; color: var(--muted); }
.invf-b-v { font-size: 13px; font-weight: 600; word-break: break-all; }
.invf-b-v.strong { color: var(--primary-dark); font-size: 14px; }
.invf-tip { margin: 12px 2px 8px; font-size: 12.5px; color: var(--muted); }

/* —— 格式卡片 —— */
.invf-list { display: flex; flex-direction: column; gap: 10px; }
.invf-card {
  display: flex; align-items: center; gap: 12px;
  padding: 12px 14px; border: 1px solid var(--border); border-radius: 12px; background: var(--bg);
}
.invf-card.is-miss { opacity: .62; }
.invf-ext {
  flex: none; width: 46px; height: 34px; border-radius: 9px;
  display: flex; align-items: center; justify-content: center;
  font-size: 12px; font-weight: 800; letter-spacing: .02em;
}
.invf-ext.pdf { background: var(--red-soft); color: var(--red-deep); }
.invf-ext.ofd { background: var(--purple-soft); color: var(--purple-deep); }
.invf-ext.xml { background: var(--blue-soft); color: var(--blue-deep); }
.invf-c-main { flex: 1; min-width: 0; }
.invf-c-name { font-size: 13.5px; font-weight: 700; }
.invf-c-desc { margin-top: 2px; font-size: 12px; color: var(--muted); }
.invf-miss { display: inline-block; margin-left: 5px; padding: 1px 6px; border-radius: 6px; font-size: 11px; font-weight: 600; background: var(--border); color: var(--muted); }
.invf-c-ops { flex: none; display: flex; gap: 6px; }

/* —— 预览区 —— */
.invf-preview {
  margin-top: 14px; border: 1px solid var(--border); border-radius: 12px; overflow: hidden; background: var(--card);
}
.invf-pv-head { display: flex; align-items: center; gap: 8px; padding: 8px 12px; border-bottom: 1px solid var(--border); background: var(--bg); }
.invf-pv-title { font-size: 13px; font-weight: 700; }
.invf-pv-body { height: min(62vh, 560px); background: var(--card); }
.invf-pv-body iframe { display: block; width: 100%; height: 100%; border: 0; }
.invf-code {
  margin: 0; padding: 12px; height: 100%; overflow: auto;
  font-family: ui-monospace, SFMono-Regular, Consolas, "Liberation Mono", monospace;
  font-size: 12px; line-height: 1.6; color: var(--text); white-space: pre-wrap; word-break: break-all;
}
.invf-hint { margin-top: 12px; font-size: 12px; color: var(--muted); line-height: 1.6; }

/* —— 深色主题：色块与卡片跟随系统变量 —— */
body[data-theme="dark"] .ui-drawer { box-shadow: -18px 0 48px rgba(0, 0, 0, .5); }
body[data-theme="dark"] .invf-ext.pdf { background: #3a1425; color: #fda4af; }
body[data-theme="dark"] .invf-ext.ofd { background: #2a1f45; color: #c4b5fd; }
body[data-theme="dark"] .invf-ext.xml { background: #14243d; color: #93c5fd; }
body[data-theme="dark"] .invf-pv-body iframe { background: #fff; }

@media (prefers-reduced-motion: reduce) {
  .ui-drawer { transition-duration: .01ms !important; }
  .invf-skel-line, .invf-skel-card { animation: none !important; }
}
@media (max-width: 560px) {
  .ui-drawer, .ui-drawer.is-wide { width: 100vw; }
  .invf-brief { grid-template-columns: 1fr; }
  .invf-c-ops { flex-direction: column; }
}