﻿/* ============================================================
   云呈 DataPresenta · 靛蓝精工设计系统
   Indigo Precision · 克制 · 精确 · 专业
   ============================================================ */

/* ---------- 字体：JetBrains Mono（数字与代码的自托管子集） ---------- */
@font-face {
  font-family: "JetBrains Mono";
  src: url("/fonts/jbm-400.woff2") format("woff2");
  font-weight: 400; font-style: normal; font-display: swap;
}
@font-face {
  font-family: "JetBrains Mono";
  src: url("/fonts/jbm-500.woff2") format("woff2");
  font-weight: 500; font-style: normal; font-display: swap;
}
@font-face {
  font-family: "JetBrains Mono";
  src: url("/fonts/jbm-700.woff2") format("woff2");
  font-weight: 700; font-style: normal; font-display: swap;
}

/* ---------- 设计令牌 ---------- */
:root {
  /* 墨色阶 */
  --ink-900: #0e1c36;
  --ink-800: #16263f;
  --ink-700: #2a3b58;
  --ink-500: #56677f;
  --ink-400: #6e7d92;
  --ink-300: #8a95ab;
  --ink-200: #b6bfce;
  /* 靛蓝品牌阶 */
  --brand-800: #1c2f96;
  --brand-700: #2239ad;
  --brand-600: #2b4bc6;
  --brand-500: #3d5cd6;
  --brand-400: #6e87e8;
  --brand-300: #93a5e8;
  --brand-200: #c6d0f2;
  --brand-100: #dde3f6;
  --brand-050: #eef1fa;
  /* 语义色 */
  --success: #157347; --success-050: #e7f4ec;
  --warn: #b45309;    --warn-050: #fdf1e2;
  --danger: #c42b2b;  --danger-050: #fceeee;
  --danger-200: #f0c4c4;
  /* 中性面 */
  --bg: #f6f7fa;
  --surface: #ffffff;
  --surface-soft: #f3f5f9;
  --surface-ink: #0e1c36;
  --line: #e6e9f0;
  --line-strong: #ccd3df;
  /* 圆角 */
  --r-sm: 7px;
  --r-md: 10px;
  --r-lg: 14px;
  /* 阴影（双层叠加，边缘锐利） */
  --shadow-xs: 0 1px 2px rgba(14,28,54,.05);
  --shadow-sm: 0 1px 2px rgba(14,28,54,.05), 0 2px 10px -4px rgba(14,28,54,.08);
  --shadow-md: 0 2px 4px rgba(14,28,54,.05), 0 10px 28px -10px rgba(14,28,54,.14);
  --shadow-lg: 0 4px 10px rgba(14,28,54,.07), 0 28px 60px -16px rgba(14,28,54,.24);
  --shadow-menu: 0 2px 6px rgba(14,28,54,.08), 0 14px 36px -8px rgba(14,28,54,.18);
  --shadow-brand: 0 1px 2px rgba(28,47,150,.28), 0 6px 18px -6px rgba(43,75,198,.42);
  /* 字体 */
  --font: -apple-system, BlinkMacSystemFont, "PingFang SC", "HarmonyOS Sans SC",
          "MiSans", "Hiragino Sans GB", "Microsoft YaHei UI", "Microsoft YaHei",
          "Segoe UI", sans-serif;
  --mono: "JetBrains Mono", ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  /* 动效 */
  --ease-out: cubic-bezier(.16, 1, .3, 1);
  --dur-fast: 140ms;
  --dur-mid: 220ms;
}

/* ---------- 基础 ---------- */
* { box-sizing: border-box; margin: 0; padding: 0; }
html, body { height: 100%; }
body {
  font-family: var(--font);
  color: var(--ink-700);
  background: var(--bg);
  font-size: 14px;
  line-height: 1.65;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}
a { color: var(--brand-600); text-decoration: none; transition: color var(--dur-fast) ease; }
a:hover { color: var(--brand-700); }
button { font-family: inherit; }
svg { display: inline-block; vertical-align: -3px; flex: none; }
::selection { background: rgba(61,92,214,.22); }

:focus-visible { outline: 2px solid var(--brand-500); outline-offset: 2px; border-radius: 4px; }
.input:focus-visible, .select:focus-visible { outline: none; }

.mono { font-family: var(--mono); font-variant-numeric: tabular-nums; }
.muted { color: var(--ink-400); }
.small { font-size: 12.5px; }
.hidden { display: none !important; }

/* ---------- 按钮 ---------- */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 7px;
  border: 1px solid transparent; border-radius: var(--r-sm);
  padding: 0 16px; height: 36px; font-size: 13.5px; font-weight: 500;
  cursor: pointer; white-space: nowrap; user-select: none;
  transition: background var(--dur-fast) ease, border-color var(--dur-fast) ease,
              color var(--dur-fast) ease, box-shadow var(--dur-fast) ease;
}
.btn svg { width: 15px; height: 15px; }
.btn:disabled { opacity: .5; cursor: not-allowed; }

.btn-primary { background: var(--brand-600); color: #fff; box-shadow: var(--shadow-brand); }
.btn-primary:hover:not(:disabled) { background: var(--brand-700); }
.btn-primary:active:not(:disabled) { background: var(--brand-800); box-shadow: var(--shadow-xs); }

.btn-secondary { background: var(--surface); color: var(--ink-700); border-color: var(--line-strong); box-shadow: var(--shadow-xs); }
.btn-secondary:hover:not(:disabled) { border-color: var(--brand-400); color: var(--brand-700); background: var(--brand-050); }

.btn-danger { background: var(--danger-050); color: var(--danger); border-color: var(--danger-200); }
.btn-danger:hover:not(:disabled) { background: var(--danger); color: #fff; border-color: var(--danger); }

.btn-sm { height: 29px; padding: 0 11px; font-size: 12.5px; border-radius: 6px; }
.btn-sm svg { width: 13px; height: 13px; }
.btn-block { width: 100%; }

/* 图标按钮（行内主操作） */
.icon-btn {
  display: inline-flex; align-items: center; justify-content: center;
  width: 29px; height: 29px; border-radius: 6px; border: 1px solid transparent;
  background: transparent; color: var(--ink-400); cursor: pointer;
  transition: all var(--dur-fast) ease;
}
.icon-btn svg { width: 15px; height: 15px; }
.icon-btn:hover { background: var(--brand-050); color: var(--brand-600); }
.icon-btn.danger:hover { background: var(--danger-050); color: var(--danger); }
.icon-btn.primary { background: var(--brand-050); color: var(--brand-600); border-color: var(--brand-200); }
.icon-btn.primary:hover { background: var(--brand-100); }

/* ---------- 卡片 ---------- */
.card {
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--r-lg);
  box-shadow: var(--shadow-xs);
}
.card-pad { padding: 20px 22px; }
.card-head {
  display: flex; align-items: center; justify-content: space-between; gap: 12px;
  padding: 15px 22px; border-bottom: 1px solid var(--line);
}
.card-title { font-size: 15px; font-weight: 600; color: var(--ink-900); letter-spacing: .2px; }
.card-sub { font-size: 12px; color: var(--ink-400); margin-top: 2px; }
.card-head-actions { display: flex; align-items: center; gap: 8px; }

/* ---------- 徽章（圆点式） ---------- */
.badge {
  display: inline-flex; align-items: center; gap: 6px;
  font-size: 12px; font-weight: 500; padding: 2.5px 9px 2.5px 7px; border-radius: 999px;
  line-height: 1.4;
}
.badge::before { content: ""; width: 6px; height: 6px; border-radius: 50%; background: currentColor; flex: none; }
.badge-green { background: var(--success-050); color: var(--success); }
.badge-blue { background: var(--brand-050); color: var(--brand-700); }
.badge-orange { background: var(--warn-050); color: var(--warn); }
.badge-red { background: var(--danger-050); color: var(--danger); }
.badge-gray { background: var(--surface-soft); color: var(--ink-400); }

/* ---------- 表单 ---------- */
.field { margin-bottom: 16px; }
.field:last-child { margin-bottom: 0; }
.label { display: block; font-size: 12.5px; font-weight: 500; color: var(--ink-500); margin-bottom: 6px; }
.input, .select {
  width: 100%; height: 36px; padding: 0 12px; font-size: 13.5px; color: var(--ink-900);
  border: 1px solid var(--line-strong); border-radius: var(--r-sm);
  background: var(--surface); outline: none; font-family: inherit;
  transition: border-color var(--dur-fast) ease, box-shadow var(--dur-fast) ease, background var(--dur-fast) ease;
}
textarea.input { height: auto; padding: 9px 12px; resize: vertical; }
.input:hover, .select:hover { border-color: #b6c0d1; }
.input:focus, .select:focus {
  border-color: var(--brand-500);
  box-shadow: 0 0 0 3px rgba(61,92,214,.16);
}
.input::placeholder { color: var(--ink-300); }
.select { appearance: none; -webkit-appearance: none; padding-right: 32px; cursor: pointer;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='14' viewBox='0 0 24 24' fill='none' stroke='%236e7d92' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E");
  background-repeat: no-repeat; background-position: right 11px center;
}

/* 开关 */
.switch { position: relative; display: inline-flex; align-items: center; cursor: pointer; gap: 9px; }
.switch input { position: absolute; opacity: 0; width: 0; height: 0; }
.switch .track {
  width: 34px; height: 20px; border-radius: 999px; background: #d3dae4;
  position: relative; transition: background var(--dur-mid) ease; flex: none;
}
.switch .track::after {
  content: ""; position: absolute; top: 2px; left: 2px; width: 16px; height: 16px;
  border-radius: 50%; background: #fff; box-shadow: 0 1px 2px rgba(14,28,54,.3);
  transition: transform var(--dur-mid) var(--ease-out);
}
.switch input:checked + .track { background: var(--brand-600); }
.switch input:checked + .track::after { transform: translateX(14px); }
.switch input:focus-visible + .track { outline: 2px solid var(--brand-500); outline-offset: 2px; }

/* ---------- 表格 ---------- */
.table-wrap { overflow-x: auto; }
.table { width: 100%; border-collapse: collapse; font-size: 13px; }
.table th {
  text-align: left; font-size: 11.5px; font-weight: 600; color: var(--ink-400);
  letter-spacing: .06em; padding: 9px 16px; white-space: nowrap;
  border-bottom: 1px solid var(--line); background: var(--surface-soft);
}
.table td { padding: 11px 16px; border-bottom: 1px solid var(--line); vertical-align: middle; }
.table tbody tr:last-child td { border-bottom: none; }
.table tbody tr { transition: background var(--dur-fast) ease; }
.table tbody tr:hover { background: #f9fafc; }
.table .num { font-family: var(--mono); font-variant-numeric: tabular-nums; }
.table .t-title { font-weight: 600; color: var(--ink-900); }

/* 行操作 */
.row-actions { display: inline-flex; align-items: center; gap: 6px; }
.row-actions .btn { box-shadow: none; }

/* ---------- 空状态 ---------- */
.empty { text-align: center; padding: 48px 20px; }
.empty .e-ico { color: var(--ink-200); margin-bottom: 10px; }
.empty .e-ico svg { width: 40px; height: 40px; }
.empty .e-title { font-size: 14px; font-weight: 600; color: var(--ink-500); }
.empty .e-sub { font-size: 12.5px; color: var(--ink-300); margin-top: 3px; }

/* ---------- 骨架屏 ---------- */
.skeleton-row td { padding: 13px 16px; }
.sk { position: relative; overflow: hidden; border-radius: 5px; background: #eef0f5; height: 14px; }
.sk::after {
  content: ""; position: absolute; inset: 0;
  background: linear-gradient(90deg, transparent, rgba(255,255,255,.75), transparent);
  animation: sk-shimmer 1.3s infinite;
}
@keyframes sk-shimmer { 0% { transform: translateX(-100%); } 100% { transform: translateX(100%); } }

/* ---------- 弹窗 ---------- */
.modal-mask {
  position: fixed; inset: 0; background: rgba(14,28,54,.48);
  display: flex; align-items: center; justify-content: center; z-index: 100;
  padding: 20px; opacity: 0; pointer-events: none; transition: opacity var(--dur-mid) ease;
  backdrop-filter: blur(3px); -webkit-backdrop-filter: blur(3px);
}
.modal-mask.open { opacity: 1; pointer-events: auto; }
.modal {
  background: var(--surface); border-radius: var(--r-lg); box-shadow: var(--shadow-lg);
  width: 100%; max-width: 520px; max-height: 88vh; overflow: auto;
  transform: translateY(10px) scale(.97); transition: transform var(--dur-mid) var(--ease-out);
}
.modal-mask.open .modal { transform: none; }
.modal-head { display: flex; align-items: center; justify-content: space-between; padding: 16px 22px; border-bottom: 1px solid var(--line); }
.modal-title { font-size: 15px; font-weight: 600; color: var(--ink-900); }
.modal-close {
  display: inline-flex; align-items: center; justify-content: center;
  width: 28px; height: 28px; border-radius: 6px; background: none; border: none;
  color: var(--ink-300); cursor: pointer; transition: all var(--dur-fast) ease;
}
.modal-close svg { width: 15px; height: 15px; }
.modal-close:hover { color: var(--ink-900); background: var(--surface-soft); }
.modal-body { padding: 20px 22px; }
.modal-foot { padding: 14px 22px; border-top: 1px solid var(--line); display: flex; justify-content: flex-end; gap: 9px; }

/* 确认弹窗（partial 渲染） */
.confirm-panel { text-align: center; padding: 28px 26px 22px; }
.confirm-ico {
  width: 44px; height: 44px; border-radius: 50%; margin: 0 auto 14px;
  background: var(--brand-050); color: var(--brand-600);
  display: flex; align-items: center; justify-content: center;
}
.confirm-ico.danger { background: var(--danger-050); color: var(--danger); }
.confirm-ico svg { width: 21px; height: 21px; }
.confirm-title { font-size: 15px; font-weight: 600; color: var(--ink-900); margin-bottom: 6px; }
.confirm-msg { font-size: 13px; color: var(--ink-500); line-height: 1.6; }
.confirm-foot { padding: 0 22px 20px; display: flex; justify-content: center; gap: 9px; }

/* ---------- Toast ---------- */
.toast-wrap {
  position: fixed; top: 18px; left: 50%; transform: translateX(-50%); z-index: 200;
  display: flex; flex-direction: column; gap: 8px; align-items: center;
}
.toast {
  display: inline-flex; align-items: center; gap: 8px;
  background: var(--ink-900); color: #fff; padding: 9px 16px;
  border-radius: var(--r-md); font-size: 13px; box-shadow: var(--shadow-md);
  opacity: 0; transform: translateY(-8px); transition: all var(--dur-mid) var(--ease-out);
  max-width: 80vw;
}
.toast svg { width: 15px; height: 15px; color: #7dd8a4; }
.toast.err svg { color: #ff9d9d; }
.toast.show { opacity: 1; transform: none; }
.toast.err { background: #7c1d1d; }

/* ---------- 下拉菜单（⋯） ---------- */
.menu {
  position: fixed; z-index: 300; min-width: 172px;
  background: var(--surface); border: 1px solid var(--line); border-radius: var(--r-md);
  box-shadow: var(--shadow-menu); padding: 5px;
  opacity: 0; transform: translateY(-4px) scale(.98); transform-origin: top right;
  transition: opacity 130ms ease, transform 130ms var(--ease-out);
  pointer-events: none;
}
.menu.open { opacity: 1; transform: none; pointer-events: auto; }
.menu-item {
  display: flex; align-items: center; gap: 9px; width: 100%;
  padding: 7.5px 11px; border: none; background: none; border-radius: 6px;
  font-size: 13px; color: var(--ink-700); cursor: pointer; text-align: left;
  transition: background var(--dur-fast) ease, color var(--dur-fast) ease;
}
.menu-item svg { width: 14.5px; height: 14.5px; color: var(--ink-400); }
.menu-item:hover { background: var(--brand-050); color: var(--brand-700); }
.menu-item:hover svg { color: var(--brand-600); }
.menu-item.danger { color: var(--danger); }
.menu-item.danger svg { color: var(--danger); opacity: .8; }
.menu-item.danger:hover { background: var(--danger-050); }
.menu-sep { height: 1px; background: var(--line); margin: 5px 8px; }

/* ---------- 应用外壳 ---------- */
.app-shell { display: flex; min-height: 100vh; }

.sidebar {
  width: 226px; flex: none; background: var(--surface-ink); color: #b9c4d8;
  display: flex; flex-direction: column; position: sticky; top: 0; height: 100vh;
}
.logo-mark {
  width: 30px; height: 30px; border-radius: 8px; background: var(--brand-600);
  display: flex; align-items: center; justify-content: center; color: #fff;
  box-shadow: 0 1px 2px rgba(14,28,54,.4), 0 4px 12px -4px rgba(43,75,198,.55);
  flex: none;
}
.logo-mark svg { width: 17px; height: 17px; vertical-align: 0; }

.sidebar .brand {
  display: flex; align-items: center; gap: 11px; padding: 19px 20px 17px;
  border-bottom: 1px solid rgba(255,255,255,.07);
}
.brand-name { font-size: 15.5px; font-weight: 700; color: #fff; letter-spacing: .04em; }
.brand-sub { font-size: 9.5px; color: #66769a; letter-spacing: .22em; margin-top: 1px; font-family: var(--mono); font-weight: 500; }

.nav { padding: 12px 12px; flex: 1; overflow-y: auto; }
.nav-sec {
  font-size: 10.5px; color: #59678a; letter-spacing: .16em; font-weight: 600;
  padding: 15px 10px 7px;
}
.nav-item {
  position: relative;
  display: flex; align-items: center; gap: 11px; padding: 8.5px 12px; margin: 2px 0;
  border-radius: var(--r-sm); color: #a6b2c9; font-size: 13.5px; font-weight: 500;
  transition: background var(--dur-fast) ease, color var(--dur-fast) ease; cursor: pointer;
}
.nav-item svg { width: 17px; height: 17px; color: #74829f; transition: color var(--dur-fast) ease; }
.nav-item::before {
  content: ""; position: absolute; left: -12px; top: 50%; transform: translateY(-50%);
  width: 2.5px; height: 0; border-radius: 2px; background: var(--brand-400);
  transition: height var(--dur-mid) var(--ease-out);
}
.nav-item:hover { background: rgba(255,255,255,.05); color: #fff; }
.nav-item:hover svg { color: #b9c4d8; }
.nav-item.active { background: rgba(61,92,214,.22); color: #fff; }
.nav-item.active svg { color: #93a5e8; }
.nav-item.active::before { height: 18px; }

.sidebar-foot {
  padding: 13px 20px; border-top: 1px solid rgba(255,255,255,.07);
  font-size: 10.5px; color: #59678a; font-family: var(--mono); letter-spacing: .04em;
}

.main { flex: 1; min-width: 0; display: flex; flex-direction: column; }
.topbar {
  height: 54px; background: rgba(255,255,255,.86); backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px);
  border-bottom: 1px solid var(--line); display: flex; align-items: center;
  justify-content: space-between; padding: 0 26px; position: sticky; top: 0; z-index: 20;
}
.topbar .page-title { font-size: 15px; font-weight: 600; color: var(--ink-900); letter-spacing: .02em; }
.topbar .userbox { display: flex; align-items: center; gap: 12px; }
.userbox .u-meta { text-align: right; }
.userbox .uname { font-size: 13px; font-weight: 600; color: var(--ink-900); line-height: 1.3; }
.userbox .urole { font-size: 11px; color: var(--ink-400); line-height: 1.4; }
.avatar {
  width: 30px; height: 30px; border-radius: 50%; background: var(--brand-600);
  color: #fff; display: flex; align-items: center; justify-content: center;
  font-size: 12.5px; font-weight: 600;
}
.userbox .btn-logout { color: var(--ink-400); border-color: transparent; box-shadow: none; }
.userbox .btn-logout:hover { color: var(--danger); border-color: var(--danger-200); background: var(--danger-050); }

.content { padding: 22px 26px 56px; flex: 1; max-width: 1224px; width: 100%; margin: 0 auto; }

/* 入场编排 */
.reveal { opacity: 0; transform: translateY(8px); }
.reveal.in { opacity: 1; transform: none; transition: opacity 320ms ease, transform 320ms var(--ease-out); }

/* ---------- 统计带（轻量数字条，非大卡片） ---------- */
.stat-band {
  display: grid; grid-template-columns: repeat(4, 1fr);
  margin-bottom: 18px; background: var(--surface);
  border: 1px solid var(--line); border-radius: var(--r-lg);
  box-shadow: var(--shadow-xs);
}
.stat-cell { padding: 15px 20px 14px; position: relative; }
.stat-cell + .stat-cell { border-left: 1px solid var(--line); }
.stat-cell .s-label { font-size: 12px; color: var(--ink-400); font-weight: 500; display: flex; align-items: center; gap: 6px; }
.stat-cell .s-label svg { width: 13px; height: 13px; color: var(--brand-400); }
.stat-cell .s-value {
  font-size: 23px; font-weight: 700; color: var(--ink-900); margin-top: 3px;
  font-family: var(--mono); font-variant-numeric: tabular-nums; letter-spacing: -.01em; line-height: 1.25;
}
.stat-cell .s-sub { font-size: 11.5px; color: var(--ink-300); margin-top: 1px; }

/* ---------- 上传区 ---------- */
.upload-grid { display: grid; grid-template-columns: 1.12fr .88fr; gap: 18px; margin-bottom: 18px; align-items: stretch; }
.dropzone {
  border: 1.5px dashed var(--line-strong); border-radius: var(--r-md);
  padding: 30px 24px; text-align: center; cursor: pointer;
  background: var(--surface-soft); transition: all var(--dur-mid) ease; position: relative;
  margin: 16px 22px;
}
.dropzone:hover, .dropzone.dragover { border-color: var(--brand-400); background: var(--brand-050); }
.dropzone.dragover { box-shadow: inset 0 0 0 1px var(--brand-400); }
.dropzone .dz-ico { color: var(--brand-500); margin-bottom: 8px; transition: transform var(--dur-mid) var(--ease-out); }
.dropzone .dz-ico svg { width: 32px; height: 32px; }
.dropzone:hover .dz-ico, .dropzone.dragover .dz-ico { transform: translateY(-3px); }
.dropzone .dz-title { font-size: 14px; font-weight: 600; color: var(--ink-900); }
.dropzone .dz-sub { font-size: 12.5px; color: var(--ink-400); margin-top: 3px; }
.dropzone .dz-file { margin-top: 4px; display: none; }
.dropzone.has-file { border-style: solid; border-color: var(--brand-300); background: var(--brand-050); }
.dropzone.has-file .dz-ico, .dropzone.has-file .dz-title, .dropzone.has-file .dz-sub { display: none; }
.dropzone.has-file .dz-file { display: block; }
.dropzone .dz-file .f-row { display: flex; align-items: center; justify-content: center; gap: 9px; }
.dropzone .dz-file .f-row svg { width: 19px; height: 19px; color: var(--brand-600); }
.dropzone .dz-file .fname { font-size: 13.5px; font-weight: 600; color: var(--brand-700); word-break: break-all; }
.dropzone .dz-file .f-hint { font-size: 11.5px; color: var(--ink-400); margin-top: 6px; }

.upload-panel { display: flex; flex-direction: column; }
.upload-panel .form-body { padding: 18px 22px; flex: 1; }
.upload-panel .form-foot { padding: 14px 22px; border-top: 1px solid var(--line); }
.form-grid-2 { display: grid; grid-template-columns: 1fr 1fr; gap: 0 12px; }
.switch-row { display: flex; flex-direction: column; gap: 9px; padding: 2px 0 4px; }

/* ---------- 工具栏 ---------- */
.toolbar { display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap; }
.toolbar .search { width: 230px; }
.toolbar-group { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }

/* ---------- 管理页统计 ---------- */
.stat-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 14px; margin-bottom: 18px; }
.stat-card { padding: 14px 18px; }
.stat-card .s-label { font-size: 11.5px; color: var(--ink-400); font-weight: 500; }
.stat-card .s-value { font-size: 22px; font-weight: 700; color: var(--ink-900); margin-top: 3px; font-family: var(--mono); font-variant-numeric: tabular-nums; }
.stat-card .s-sub { font-size: 11.5px; color: var(--ink-300); margin-top: 1px; }

.health-strip {
  display: flex; align-items: center; gap: 14px; padding: 16px 20px;
  margin-bottom: 18px;
}
.health-strip .h-dot { width: 9px; height: 9px; border-radius: 50%; background: #22c55e; box-shadow: 0 0 0 4px rgba(34,197,94,.18); flex: none; }
.health-strip .h-title { font-size: 14px; font-weight: 600; color: var(--ink-900); }
.health-strip .h-sub { font-size: 12px; color: var(--ink-400); }
.health-strip .h-right { margin-left: auto; display: flex; gap: 8px; flex-wrap: wrap; }

.quick-links { display: grid; grid-template-columns: repeat(4, 1fr); gap: 12px; padding: 18px 22px; }
.quick-link {
  display: flex; align-items: center; gap: 11px; padding: 13px 16px;
  border: 1px solid var(--line); border-radius: var(--r-md);
  color: var(--ink-700); font-size: 13.5px; font-weight: 500;
  transition: all var(--dur-fast) ease;
}
.quick-link svg { width: 17px; height: 17px; color: var(--brand-500); }
.quick-link:hover { border-color: var(--brand-300); background: var(--brand-050); color: var(--brand-700); }
.quick-link .q-arrow { margin-left: auto; color: var(--ink-200); }
.quick-link:hover .q-arrow { color: var(--brand-500); }

/* ---------- 分屏认证（登录 / 改密） ---------- */
.auth-split { display: flex; min-height: 100vh; }
.auth-hero {
  flex: 0 0 46%; position: relative; overflow: hidden;
  background: var(--surface-ink); color: #fff;
  display: flex; flex-direction: column; justify-content: space-between;
  padding: 44px 48px;
}
.auth-hero::before {
  content: ""; position: absolute; inset: 0;
  background:
    radial-gradient(900px 520px at 88% -12%, rgba(61,92,214,.34), transparent 62%),
    radial-gradient(700px 460px at -14% 112%, rgba(34,57,173,.28), transparent 60%);
}
.auth-hero::after {
  content: ""; position: absolute; inset: 0; opacity: .5;
  background-image:
    linear-gradient(rgba(147,165,232,.05) 1px, transparent 1px),
    linear-gradient(90deg, rgba(147,165,232,.05) 1px, transparent 1px);
  background-size: 34px 34px;
}
.auth-hero > * { position: relative; z-index: 1; }
.auth-hero .hero-brand { display: flex; align-items: center; gap: 12px; }
.auth-hero .hero-brand .logo-mark { background: #2b4bc6; }
.hero-eyebrow {
  font-family: var(--mono); font-size: 10.5px; font-weight: 500;
  letter-spacing: .32em; color: #8fa0d6; text-transform: uppercase; margin-bottom: 18px;
}
.hero-title { font-size: 30px; font-weight: 700; line-height: 1.32; letter-spacing: .01em; color: #fff; }
.hero-title em { font-style: normal; color: #93a5e8; }
.hero-sub { font-size: 14px; line-height: 1.8; color: rgba(196,206,226,.78); margin-top: 14px; max-width: 380px; }
.hero-feats { display: flex; flex-direction: column; gap: 13px; }
.hero-feat { display: flex; align-items: center; gap: 11px; font-size: 13px; color: #b9c4d8; }
.hero-feat svg { width: 16px; height: 16px; color: #6e87e8; }
.hero-feat b { color: #fff; font-weight: 600; }
.auth-hero .hero-foot { font-size: 11px; color: #59678a; font-family: var(--mono); letter-spacing: .06em; }

.auth-panel {
  flex: 1; display: flex; align-items: center; justify-content: center;
  background: var(--bg); padding: 40px 24px;
}
.auth-form-wrap { width: 100%; max-width: 384px; }
.auth-title { font-size: 22px; font-weight: 700; color: var(--ink-900); letter-spacing: .01em; }
.auth-sub { font-size: 13.5px; color: var(--ink-400); margin-top: 5px; }
.auth-form { margin-top: 28px; }
.auth-tip { margin-top: 22px; text-align: center; font-size: 12.5px; color: var(--ink-400); }
.auth-actions { display: flex; justify-content: space-between; align-items: center; margin-bottom: 18px; }

.err-banner {
  display: flex; align-items: flex-start; gap: 9px;
  background: var(--danger-050); color: #9c2020; border: 1px solid var(--danger-200);
  border-radius: var(--r-sm); padding: 10px 12px; font-size: 13px; margin-bottom: 16px; line-height: 1.55;
}
.err-banner svg { width: 15px; height: 15px; flex: none; margin-top: 2px; color: var(--danger); }

/* ---------- 错误页 ---------- */
.error-wrap { min-height: 100vh; display: flex; align-items: center; justify-content: center; background: var(--bg); padding: 24px; }
.error-card { text-align: center; max-width: 400px; }
.error-code {
  font-family: var(--mono); font-size: 56px; font-weight: 700; letter-spacing: -.02em;
  color: var(--brand-600); line-height: 1;
}
.error-code span { color: var(--ink-200); }
.error-msg { font-size: 16px; font-weight: 600; color: var(--ink-900); margin: 14px 0 5px; }
.error-sub { font-size: 13px; color: var(--ink-400); margin-bottom: 26px; }

/* ---------- 报告域 · 仪式感提取码页 ---------- */
.rp-page {
  min-height: 100vh; background: var(--bg); position: relative;
  display: flex; flex-direction: column; align-items: center;
}
.rp-page::before {
  content: ""; position: fixed; inset: 0; pointer-events: none;
  background:
    radial-gradient(1000px 560px at 78% -14%, rgba(61,92,214,.11), transparent 62%),
    radial-gradient(760px 480px at 8% 108%, rgba(34,57,173,.08), transparent 60%);
}
.rp-top { padding: 34px 24px 8px; display: flex; align-items: center; justify-content: center; position: relative; }
.rp-top .brand { display: flex; align-items: center; gap: 11px; }
.rp-card {
  position: relative; width: 100%; max-width: 420px; margin: 5vh auto 0;
  border-radius: 16px; box-shadow: var(--shadow-md);
  animation: rp-in 360ms var(--ease-out);
}
@keyframes rp-in { from { opacity: 0; transform: translateY(14px); } to { opacity: 1; transform: none; } }
.rp-pin-body { padding: 34px 36px 30px; text-align: center; }
.rp-eyebrow {
  font-family: var(--mono); font-size: 10px; font-weight: 500;
  letter-spacing: .3em; color: var(--ink-300); text-transform: uppercase;
}
.rp-company { font-size: 12px; color: var(--ink-400); margin-top: 16px; letter-spacing: .04em; }
.rp-doc-title {
  font-size: 19px; font-weight: 700; color: var(--ink-900); margin-top: 5px;
  word-break: break-all; line-height: 1.45;
}
.rp-hint { font-size: 13px; color: var(--ink-500); margin: 22px 0 18px; }
.rp-verify { margin-top: 20px; height: 42px; font-size: 14px; }

/* OTP 分格输入 */
.otp { display: flex; justify-content: center; gap: 9px; }
.otp-cell {
  width: 44px; height: 52px; text-align: center;
  font-family: var(--mono); font-size: 22px; font-weight: 700; color: var(--ink-900);
  border: 1.5px solid var(--line-strong); border-radius: var(--r-md);
  background: var(--surface); outline: none; caret-color: var(--brand-600);
  transition: border-color var(--dur-fast) ease, box-shadow var(--dur-fast) ease, transform var(--dur-fast) var(--ease-out);
  font-variant-numeric: tabular-nums;
}
.otp-cell:focus { border-color: var(--brand-500); box-shadow: 0 0 0 3px rgba(61,92,214,.15); }
.otp-cell.filled { border-color: var(--brand-400); background: var(--brand-050); }
.otp-cell.filled:focus { transform: scale(1.04); }
.otp.err-shake { animation: shake 320ms ease; }
@keyframes shake {
  0%, 100% { transform: translateX(0); }
  22% { transform: translateX(-6px); } 44% { transform: translateX(5px); }
  66% { transform: translateX(-3px); } 88% { transform: translateX(2px); }
}
.otp-cells-err { margin-top: 14px; }

.rp-foot {
  font-size: 11.5px; color: var(--ink-300); text-align: center;
  padding: 22px 24px 30px; display: flex; align-items: center; justify-content: center; gap: 6px;
  position: relative;
}
.rp-foot svg { width: 13px; height: 13px; }

/* 失效页 */
.rp-invalid { text-align: center; padding: 40px 36px 34px; }
.rp-invalid .i-ico {
  width: 56px; height: 56px; border-radius: 50%;
  background: var(--warn-050); color: var(--warn);
  display: flex; align-items: center; justify-content: center; margin: 0 auto 16px;
}
.rp-invalid .i-ico svg { width: 26px; height: 26px; }
.rp-invalid h2 { font-size: 17px; font-weight: 700; color: var(--ink-900); margin-bottom: 7px; }
.rp-invalid p { font-size: 13px; color: var(--ink-500); line-height: 1.7; }

/* ---------- 报告查看器 ---------- */
.rp-viewer { position: fixed; inset: 0; display: flex; flex-direction: column; background: #fff; }
.rp-viewer-bar {
  display: flex; align-items: center; justify-content: space-between; gap: 16px;
  padding: 0 16px; height: 42px; border-bottom: 1px solid var(--line); background: #fff; flex: none;
}
.rp-viewer-bar .v-left { display: flex; align-items: center; gap: 10px; min-width: 0; }
.rp-viewer-bar .logo-mark { width: 24px; height: 24px; border-radius: 6px; box-shadow: none; }
.rp-viewer-bar .logo-mark svg { width: 13px; height: 13px; }
.rp-viewer-bar .v-title {
  font-size: 13px; font-weight: 600; color: var(--ink-900);
  max-width: 52%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.rp-viewer-bar .v-client {
  font-size: 11.5px; color: var(--ink-500); white-space: nowrap;
  background: var(--surface-soft); border-radius: 999px; padding: 3px 11px;
  display: inline-flex; align-items: center; gap: 6px;
}
.rp-viewer-bar .v-client::before { content: ""; width: 5px; height: 5px; border-radius: 50%; background: var(--brand-400); }
.rp-frame { flex: 1; border: 0; width: 100%; }
.watermark-layer { position: fixed; inset: 0; pointer-events: none; z-index: 5; overflow: hidden; }
.watermark-layer .wm-cell {
  position: absolute; font-size: 13.5px; color: rgba(14,28,54,.075);
  transform: rotate(-18deg); white-space: nowrap; font-weight: 500; letter-spacing: .06em;
}

/* ---------- 分享结果弹窗 ---------- */
.share-box {
  display: flex; align-items: center; gap: 10px;
  background: var(--surface-soft); border: 1px solid var(--line); border-radius: var(--r-sm);
  padding: 11px 13px;
}
.share-box .u-text { font-family: var(--mono); font-size: 12px; word-break: break-all; color: var(--ink-700); line-height: 1.5; flex: 1; }
.share-box .icon-btn { flex: none; }
.pin-display {
  display: flex; align-items: center; justify-content: space-between; gap: 12px;
  background: var(--brand-050); border: 1px solid var(--brand-200);
  border-radius: var(--r-md); padding: 14px 18px;
}
.pin-display .p-label { font-size: 11.5px; color: var(--ink-400); font-weight: 500; }
.pin-display .p-code {
  font-family: var(--mono); font-size: 26px; font-weight: 700; letter-spacing: .34em;
  color: var(--brand-700); font-variant-numeric: tabular-nums; line-height: 1.2; margin-top: 2px;
}
.pin-display .icon-btn { background: #fff; border-color: var(--brand-200); color: var(--brand-600); }
.share-meta { display: flex; align-items: center; gap: 7px; margin-top: 14px; font-size: 12px; color: var(--ink-400); }
.share-meta svg { width: 13px; height: 13px; }

/* ---------- 响应式 ---------- */
@media (max-width: 1000px) {
  .stat-band { grid-template-columns: repeat(2, 1fr); }
  .stat-cell:nth-child(3) { border-left: none; }
  .stat-cell:nth-child(n+3) { border-top: 1px solid var(--line); }
  .upload-grid { grid-template-columns: 1fr; }
  .sidebar { width: 62px; }
  .sidebar .brand-name, .sidebar .brand-sub, .sidebar .nav-item span:not(.n-ico),
  .sidebar .nav-sec, .sidebar-foot { display: none; }
  .sidebar .brand { justify-content: center; padding: 18px 0 14px; }
  .sidebar .nav { padding: 12px 8px; }
  .nav-item { justify-content: center; padding: 11px; }
  .nav-item svg { width: 18px; height: 18px; }
  .content { padding: 18px 16px 48px; }
  .auth-hero { display: none; }
  .stat-grid { grid-template-columns: repeat(2, 1fr); }
  .quick-links { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 560px) {
  .stat-band { grid-template-columns: 1fr 1fr; }
  .stat-cell { padding: 12px 14px; }
  .stat-cell .s-value { font-size: 19px; }
  .table td, .table th { padding: 10px 10px; }
  .otp-cell { width: 38px; height: 46px; font-size: 19px; }
  .rp-pin-body { padding: 28px 22px 24px; }
  .modal-body, .modal-head, .modal-foot { padding-left: 16px; padding-right: 16px; }
}

/* ---------- 动效偏好 ---------- */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: .01ms !important; transition-duration: .01ms !important; }
  .reveal { opacity: 1; transform: none; }
}
/* ---------- 补充：报告页品牌区 ---------- */
.rp-brand-name { font-size: 14.5px; font-weight: 700; color: var(--ink-900); letter-spacing: .02em; }
.rp-brand-sub { font-size: 9.5px; color: var(--ink-300); letter-spacing: .22em; font-family: var(--mono); font-weight: 500; margin-top: 1px; }
.rp-top .logo-mark { width: 34px; height: 34px; border-radius: 9px; }

/* ---------- 补充：链接管理页 ---------- */
.links-bulk { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; padding-bottom: 12px; border-bottom: 1px solid var(--line); }
.links-bulk .btn svg { transform: none; }
.pin-inline { font-size: 14px; font-weight: 700; color: var(--brand-700); letter-spacing: .18em; }

/* ---------- 配色精修（v4） ---------- */
body { background: #f4f6fb; }
.content { background: transparent; }
.card { border-color: #e9ecf4; }
.card:hover { box-shadow: var(--shadow-sm); }
.table th { background: #f7f8fc; color: #7a8496; }
.table tbody tr:hover { background: #f8f9fd; }
.btn-primary { background: #2f52d4; }
.btn-primary:hover:not(:disabled) { background: #2443b8; }
.nav-item.active { background: rgba(63,94,228,.26); }
.auth-hero { background: linear-gradient(168deg, #16244c 0%, #1c2f96 58%, #24389f 100%); }
.rp-page::before { background: radial-gradient(ellipse 900px 420px at 50% -80px, rgba(61,92,214,.14), transparent 65%); }
.stat-cell .s-value { color: var(--ink-900); }
.badge-green { background: #e3f3e9; }
.badge-blue { background: #e9eefb; }
.badge-orange { background: #fdf1e0; }
.badge-red { background: #fceced; }
/* 更多下拉菜单 */
.more-wrap { position: relative; display: inline-block; }
.more-menu { position: absolute; right: 0; top: 100%; z-index: 60; min-width: 148px; margin-top: 5px; padding: 6px; background: var(--surface,#ffffff); border: 1px solid var(--line,#e5e7eb); border-radius: 10px; box-shadow: 0 10px 26px rgba(15,23,42,.14); display: none; }
.more-wrap.open .more-menu { display: block; }
.more-menu button { display: block; width: 100%; text-align: left; padding: 8px 10px; font-size: 13px; color: var(--ink-700,#334155); background: none; border: none; border-radius: 7px; cursor: pointer; }
.more-menu button:hover { background: var(--surface-soft,#f1f5f9); }
.more-menu button[data-mact="delete"] { color: var(--danger,#e11d48); }
.caret { font-size: 10px; opacity: .7; }

/* 分页 */
.pager { display: flex; align-items: center; justify-content: flex-end; gap: 12px; padding: 14px 22px; }
.pager-info { font-size: 12.5px; color: var(--ink-500,#64748b); }
.pager .icon-btn[disabled] { opacity: .4; cursor: not-allowed; }

/* 提取码掩码 */
.pin-mask { font-family: var(--mono,Consolas,monospace); letter-spacing: 2px; cursor: pointer; color: var(--brand-600,#2563eb); font-weight: 650; }
/* ============================================================
   v5 · 暖纸编辑风 Warm Editorial
   米纸底 · 墨色字 · 朱砂点缀 · 衬线标题 · 发丝线
   ============================================================ */
:root {
  --ink-900: #292219; --ink-800: #37301f; --ink-700: #4d4433;
  --ink-500: #6f6452; --ink-400: #8a7f6c; --ink-300: #a89d89; --ink-200: #cec4b0;
  --brand-800: #8a3a18; --brand-700: #a3431d; --brand-600: #b7502a;
  --brand-500: #c65f33; --brand-400: #d47c53; --brand-300: #e3a37e;
  --brand-200: #efc9ae; --brand-100: #f6e1cf; --brand-050: #faf0e5;
  --success: #4a7048; --success-050: #ebf2e8;
  --warn: #96682a;    --warn-050: #f9f1e0;
  --danger: #a63a30;  --danger-050: #f8ebe8; --danger-200: #e8c6bf;
  --bg: #f5f0e6; --surface: #fdfaf3; --surface-soft: #f2ecdd;
  --surface-ink: #2b241c;
  --line: #e6ddcc; --line-strong: #d2c6ae;
  --shadow-xs: 0 1px 2px rgba(41,34,25,.04);
  --shadow-sm: 0 1px 2px rgba(41,34,25,.04), 0 2px 10px -4px rgba(41,34,25,.07);
  --shadow-md: 0 2px 4px rgba(41,34,25,.05), 0 10px 28px -10px rgba(41,34,25,.12);
  --shadow-lg: 0 4px 10px rgba(41,34,25,.06), 0 28px 60px -16px rgba(41,34,25,.22);
  --shadow-menu: 0 2px 6px rgba(41,34,25,.07), 0 14px 36px -8px rgba(41,34,25,.16);
  --shadow-brand: 0 1px 2px rgba(138,58,24,.24), 0 6px 18px -6px rgba(183,80,42,.38);
  --font-display: "Georgia", "Noto Serif SC", "Songti SC", "STSong", "SimSun", serif;
}

body { background: #f5f0e6; }
::selection { background: rgba(198,95,51,.22); }
:focus-visible { outline-color: var(--brand-500); }
a { color: var(--brand-600); }
a:hover { color: var(--brand-700); }

/* 按钮：朱砂主操作 */
.btn-primary { background: var(--brand-600); }
.btn-primary:hover:not(:disabled) { background: var(--brand-700); }
.btn-primary:active:not(:disabled) { background: var(--brand-800); }
.btn-secondary { background: var(--surface); border-color: var(--line-strong); }
.btn-secondary:hover:not(:disabled) { border-color: var(--brand-400); color: var(--brand-700); background: var(--brand-050); }

/* 输入聚焦：暖色光环 */
.input:focus, .select:focus { border-color: var(--brand-500); box-shadow: 0 0 0 3px rgba(198,95,51,.14); }

/* 侧栏：米纸底 + 发丝线 + 墨字 */
.sidebar { background: var(--surface); border-right: 1px solid var(--line); color: var(--ink-500); box-shadow: none; }
.logo-mark { background: var(--ink-900); box-shadow: none; }
.sidebar .brand { border-bottom: 1px solid var(--line); }
.sidebar .brand-name { color: var(--ink-900); }
.sidebar .brand-sub { color: var(--ink-300); }
.nav-sec { color: var(--ink-300); }
.nav-item { color: var(--ink-500); }
.nav-item:hover { background: var(--surface-soft); color: var(--ink-900); }
.nav-item:hover svg { color: var(--ink-400); }
.nav-item svg { color: var(--ink-300); }
.nav-item.active { background: var(--brand-050); color: var(--brand-700); }
.nav-item.active svg { color: var(--brand-600); }
.nav-item.active::before { background: var(--brand-600); width: 3px; border-radius: 2px; }
.sidebar-foot { color: var(--ink-300); }

/* 顶栏：纸面 + 发丝线 */
.topbar { background: var(--surface); border-bottom: 1px solid var(--line); box-shadow: none; }

/* 卡片：暖面 + 细边 + 大圆角 */
.card { border-color: var(--line); }
.card:hover { box-shadow: var(--shadow-xs); }
.card-title { font-family: var(--font-display); letter-spacing: .01em; }

/* 统计数字：衬线大字 */
.stat-cell .s-value { font-family: var(--font-display); color: var(--ink-900); }
.stat-cell .s-label svg { color: var(--brand-500); }

/* 表格：去底色，发丝线 */
.table th { background: transparent; color: var(--ink-400); border-bottom: 1px solid var(--line-strong); }
.table tbody tr:hover { background: var(--surface-soft); }

/* 徽章：暖色调 */
.badge-green { background: var(--success-050); color: var(--success); }
.badge-blue { background: var(--brand-050); color: var(--brand-700); }
.badge-orange { background: var(--warn-050); color: var(--warn); }
.badge-red { background: var(--danger-050); color: var(--danger); }

/* 登录：深咖幕布 + 衬线大标题 + 朱砂点缀 */
.auth-hero { background: linear-gradient(165deg, #2b241c 0%, #3a2d20 55%, #4a3520 100%); }
.auth-hero::before { background: radial-gradient(ellipse 640px 400px at 18% 82%, rgba(198,95,51,.28), transparent 62%); }
.auth-hero::after { opacity: .5; }
.auth-hero .hero-brand .logo-mark { background: rgba(253,250,243,.12); border: 1px solid rgba(253,250,243,.22); box-shadow: none; }
.hero-eyebrow { color: var(--brand-300); }
.hero-title { font-family: var(--font-display); font-weight: 700; }
.hero-title em { color: var(--brand-300); }
.hero-sub { color: rgba(222,212,193,.75); }
.hero-feat { color: #cdc2ac; }
.hero-feat svg { color: var(--brand-400); }
.hero-feat b { color: #faf0e5; }
.auth-title { font-family: var(--font-display); }
.auth-hero .hero-foot { color: #857a64; }

/* 报告域：纸面仪式感 */
.rp-page { background: var(--bg); }
.rp-page::before { background: radial-gradient(ellipse 900px 420px at 50% -80px, rgba(198,95,51,.12), transparent 65%); }
.rp-brand-name { font-family: var(--font-display); color: var(--ink-900); }
.rp-eyebrow { color: var(--brand-500); }
.rp-doc-title { font-family: var(--font-display); color: var(--ink-900); }
.otp-cell { font-family: var(--font-display); color: var(--ink-900); }
.otp-cell.filled { border-color: var(--brand-400); background: var(--brand-050); }
.otp-cell:focus { border-color: var(--brand-500); box-shadow: 0 0 0 3px rgba(198,95,51,.14); }

/* 查看器顶栏 */
.rp-viewer-bar { background: var(--surface); border-bottom: 1px solid var(--line); }
.watermark-layer .wm-cell { color: rgba(41,34,25,.075); }

/* 弹窗/菜单/Toast */
.toast { background: var(--ink-900); }
.toast.err { background: #7a2a22; }
.menu { border-color: var(--line); }

/* 空状态 */
.empty .e-ico { color: var(--ink-200); }

/* 骨架屏 */
.sk { background: #ece5d5; }
/* ============================================================
   v6 · 紫韵 Violet Atelier
   紫罗兰主色 · 冷雾底色 · 柔光圆角 · 极光渐变
   ============================================================ */
:root {
  --ink-900: #1f1b2e; --ink-800: #2a2440; --ink-700: #3f3757;
  --ink-500: #5c5475; --ink-400: #7d7594; --ink-300: #a29ab8;
  --ink-200: #cbc5dc;
  --brand-800: #4c2ba6; --brand-700: #5a37c2; --brand-600: #6a45d9;
  --brand-500: #7c5ae8; --brand-400: #9a7ff0; --brand-300: #bfaaf5;
  --brand-200: #ddd0f9; --brand-100: #eee6fc; --brand-050: #f5f0fd;
  --success: #2f7d5d; --success-050: #e4f3ec;
  --warn: #9a6a1f;    --warn-050: #faf1df;
  --danger: #b0413a;  --danger-050: #f9eae8; --danger-200: #eec7c2;
  --bg: #f7f5fc; --surface: #ffffff; --surface-soft: #f1edf9;
  --surface-ink: #241d3d;
  --line: #e9e4f2; --line-strong: #d5cde6;
  --r-sm: 8px; --r-md: 12px; --r-lg: 16px;
  --shadow-xs: 0 1px 2px rgba(31,27,46,.04);
  --shadow-sm: 0 1px 2px rgba(31,27,46,.04), 0 4px 14px -6px rgba(31,27,46,.08);
  --shadow-md: 0 2px 6px rgba(31,27,46,.05), 0 14px 32px -12px rgba(31,27,46,.14);
  --shadow-lg: 0 6px 16px rgba(31,27,46,.07), 0 32px 64px -20px rgba(31,27,46,.24);
  --shadow-menu: 0 3px 8px rgba(31,27,46,.08), 0 16px 40px -10px rgba(31,27,46,.16);
  --shadow-brand: 0 1px 2px rgba(76,43,166,.24), 0 8px 20px -6px rgba(106,69,217,.4);
}

body { background: #f7f5fc; }
::selection { background: rgba(124,90,232,.2); }
:focus-visible { outline-color: var(--brand-500); }
a { color: var(--brand-600); }
a:hover { color: var(--brand-700); }
.input:focus, .select:focus { border-color: var(--brand-500); box-shadow: 0 0 0 3px rgba(124,90,232,.13); }

/* 按钮：紫罗兰 + 柔光 */
.btn { border-radius: var(--r-sm); font-weight: 600; }
.btn-primary { background: linear-gradient(180deg, var(--brand-500), var(--brand-600)); }
.btn-primary:hover:not(:disabled) { background: linear-gradient(180deg, var(--brand-600), var(--brand-700)); }
.btn-primary:active:not(:disabled) { background: var(--brand-800); }
.btn-secondary { background: var(--surface); border-color: var(--line-strong); }
.btn-secondary:hover:not(:disabled) { border-color: var(--brand-400); color: var(--brand-700); background: var(--brand-050); }

/* 开关 */
.switch input:checked + .track { background: var(--brand-600); }

/* 侧栏：纯白 + 紫调激活 */
.sidebar { background: var(--surface); border-right: 1px solid var(--line); color: var(--ink-500); }
.logo-mark { background: linear-gradient(135deg, var(--brand-500), var(--brand-700)); box-shadow: var(--shadow-brand); }
.sidebar .brand { border-bottom: 1px solid var(--line); }
.sidebar .brand-name { color: var(--ink-900); }
.sidebar .brand-sub { color: var(--ink-300); }
.nav-sec { color: var(--ink-300); }
.nav-item { color: var(--ink-500); border-radius: var(--r-sm); }
.nav-item:hover { background: var(--surface-soft); color: var(--ink-900); }
.nav-item.active { background: linear-gradient(90deg, var(--brand-050), rgba(245,240,253,.4)); color: var(--brand-700); }
.nav-item.active svg { color: var(--brand-600); }
.nav-item.active::before { background: linear-gradient(180deg, var(--brand-400), var(--brand-600)); width: 3px; border-radius: 2px; }
.sidebar-foot { color: var(--ink-300); }

/* 顶栏 */
.topbar { background: rgba(255,255,255,.85); border-bottom: 1px solid var(--line); box-shadow: none; }

/* 卡片：大圆角 + 悬浮呼吸 */
.card { border-color: var(--line); transition: box-shadow 220ms var(--ease-out), transform 220ms var(--ease-out); }
.card:hover { box-shadow: var(--shadow-sm); }

/* 统计：紫调图标 */
.stat-cell .s-label svg { color: var(--brand-500); }
.stat-cell .s-value { color: var(--ink-900); }

/* 表格 */
.table th { color: var(--ink-400); border-bottom: 1px solid var(--line-strong); background: transparent; }
.table tbody tr:hover { background: var(--brand-050); }

/* 徽章 */
.badge-green { background: var(--success-050); color: var(--success); }
.badge-blue { background: var(--brand-050); color: var(--brand-700); }
.badge-orange { background: var(--warn-050); color: var(--warn); }
.badge-red { background: var(--danger-050); color: var(--danger); }

/* 登录：紫夜极光 */
.auth-hero { background: linear-gradient(160deg, #241d3d 0%, #342463 52%, #4a2d8f 100%); }
.auth-hero::before { background: radial-gradient(ellipse 680px 420px at 20% 85%, rgba(154,127,240,.4), transparent 62%), radial-gradient(ellipse 500px 320px at 85% 10%, rgba(124,90,232,.25), transparent 60%); }
.auth-hero .hero-brand .logo-mark { background: rgba(255,255,255,.12); border: 1px solid rgba(255,255,255,.22); box-shadow: none; }
.hero-eyebrow { color: var(--brand-300); }
.hero-title { color: #f4effe; }
.hero-title em { color: var(--brand-300); }
.hero-sub { color: rgba(216,206,240,.72); }
.hero-feat { color: #c8bde6; border-color: rgba(255,255,255,.1); }
.hero-feat svg { color: var(--brand-400); }
.hero-feat b { color: #f4effe; }
.auth-hero .hero-foot { color: #8d81b4; }

/* 报告域 */
.rp-page { background: var(--bg); }
.rp-page::before { background: radial-gradient(ellipse 900px 420px at 50% -80px, rgba(124,90,232,.14), transparent 65%); }
.rp-brand-name { color: var(--ink-900); }
.rp-eyebrow { color: var(--brand-500); }
.rp-doc-title { color: var(--ink-900); }
.otp-cell { color: var(--ink-900); }
.otp-cell.filled { border-color: var(--brand-400); background: var(--brand-050); }
.otp-cell:focus { border-color: var(--brand-500); box-shadow: 0 0 0 3px rgba(124,90,232,.13); }

/* 查看器 */
.rp-viewer-bar { background: var(--surface); border-bottom: 1px solid var(--line); }
.watermark-layer .wm-cell { color: rgba(31,27,46,.075); }

/* 弹窗/菜单/Toast */
.toast { background: var(--ink-900); }
.toast.err { background: #7a2a3a; }
.menu { border-color: var(--line); }
.confirm-ico { background: var(--brand-050); color: var(--brand-600); }

/* 骨架屏 */
.sk { background: #ece7f6; }

/* 空状态 */
.empty .e-ico { color: var(--ink-200); }
/* v6 · 标题回归无衬线粗体（紫色现代感） */
.hero-title, .auth-title, .card-title, .rp-doc-title, .rp-brand-name,
.stat-cell .s-value, .otp-cell { font-family: var(--font); }
.hero-title { font-weight: 800; letter-spacing: -0.01em; }
.stat-cell .s-value { font-weight: 700; font-variant-numeric: tabular-nums; }
.otp-cell { font-weight: 600; }
/* ============================================================
   报告列表与下拉菜单美化
   ============================================================ */
/* 表格行更高、更透气 */
.table td { padding: 14px 16px; line-height: 1.45; }
.table tbody tr:hover { background: var(--brand-050); }
.table th { font-size: 11.5px; text-transform: uppercase; letter-spacing: .5px; padding: 12px 16px; }
.table .num { font-family: var(--mono); font-variant-numeric: tabular-nums; }

/* 报告标题列：主标题 + 元信息副行 */
.t-title { font-size: 13.5px; font-weight: 650; color: var(--ink-900); }
.r-sub { margin-top: 3px; display: flex; gap: 8px; align-items: center; }

/* 操作栏按钮精致化 */
.row-actions .btn { border-radius: 6px; font-weight: 600; }
.row-actions .btn-ghost { color: var(--ink-500); border-color: transparent; background: transparent; }
.row-actions .btn-ghost:hover { color: var(--brand-700); background: var(--brand-050); }
.row-actions .btn-primary { box-shadow: var(--shadow-xs); }
.more-btn { display: inline-flex; align-items: center; gap: 4px; }

/* 更多下拉菜单：fixed 定位 + 精致阴影动画 */
.more-wrap { position: relative; display: inline-block; }
.more-menu {
  position: fixed; z-index: 120; min-width: 172px;
  top: auto; right: auto; margin-top: 0;
  padding: 6px; background: #ffffff;
  border: 1px solid var(--line); border-radius: 12px;
  box-shadow: 0 14px 36px rgba(14,28,54,.16), 0 2px 10px rgba(14,28,54,.07);
  display: none; overflow: visible;
}
.more-wrap.open .more-menu { display: block; animation: menuIn .15s ease-out; }
@keyframes menuIn { from { opacity: 0; transform: translateY(-5px); } to { opacity: 1; transform: none; } }
.more-menu button {
  display: flex; align-items: center; gap: 8px; width: 100%; text-align: left;
  padding: 9px 12px; font-size: 13px; font-weight: 500; color: var(--ink-700);
  background: none; border: none; border-radius: 8px; cursor: pointer;
  transition: background 120ms ease, color 120ms ease;
}
.more-menu button:hover { background: var(--brand-050); color: var(--brand-700); }
.more-menu button[data-mact="revoke"]:hover { background: var(--warn-050); color: var(--warn); }
.more-menu button[data-mact="delete"] { color: var(--danger); }
.more-menu button[data-mact="delete"]:hover { background: var(--danger-050); color: var(--danger); }

/* 筛选下拉：更紧凑精致 */
.select { height: 34px; font-size: 13px; font-weight: 500; color: var(--ink-700); }
.search { border-radius: var(--r-sm); }

/* 分页条 */
.pager { padding: 12px 22px 16px; border-top: 1px solid var(--line); }
.pager .icon-btn { height: 30px; padding: 0 12px; border-radius: 7px; font-size: 12.5px; }
.pager-info { font-size: 12.5px; color: var(--ink-400); font-family: var(--mono); }
/* ============================================================
   报告列表精致排版（表头 / 行 / 列）
   ============================================================ */
/* 报告列：主标题 + 元信息副行 */
.t-title { font-size: 13.5px; font-weight: 650; color: var(--ink-900); line-height: 1.3; max-width: 300px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.r-sub { margin-top: 4px; display: flex; align-items: center; gap: 6px; font-size: 11.5px; color: var(--ink-400); }
.r-sub .mono { font-family: var(--mono); color: var(--ink-300); }
.r-sub .dot { color: var(--ink-200); }

/* 客户胶囊 */
.client-chip { display: inline-block; padding: 2px 10px; border-radius: 999px; background: var(--brand-050); color: var(--brand-700); font-size: 12px; font-weight: 600; }

/* 上传者/组 */
.cell-who .small { color: var(--ink-400); }

/* 分享数突出 */
.link-num { font-weight: 700; color: var(--brand-700); font-family: var(--mono); }

/* 时间 / 操作列不换行 */
.cell-time { white-space: nowrap; }
.cell-ops { white-space: nowrap; }
.cell-ops .row-actions { gap: 5px; }

/* 更多下拉：收窄精致 */
.more-menu { width: 150px; min-width: 150px; padding: 4px; }
.more-menu button { padding: 7px 9px; font-size: 12px; }

/* 客户下拉框（上传区）与各筛选下拉：统一高度圆角 */
.select { height: 34px; border-radius: 8px; }
#clientSelect { font-weight: 500; }
/* ============================================================
   自定义下拉框组件（统一美化，含弹出面板）
   ============================================================ */
.cs { position: relative; display: inline-block; vertical-align: middle; }
.cs-trigger {
  display: flex; align-items: center; justify-content: space-between; gap: 8px;
  width: 100%; height: 34px; padding: 0 12px; font-size: 13px; font-weight: 500;
  color: var(--ink-700); background: var(--surface); border: 1px solid var(--line-strong);
  border-radius: 8px; cursor: pointer; font-family: inherit; text-align: left;
  transition: border-color 120ms ease, box-shadow 120ms ease, background 120ms ease;
}
.cs:hover .cs-trigger { border-color: #b6c0d1; }
.cs:focus-within .cs-trigger { border-color: var(--brand-500); box-shadow: 0 0 0 3px rgba(61,92,214,.16); }
.cs-trigger .cs-val { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.cs-trigger .cs-caret { flex: none; width: 0; height: 0; border-left: 5px solid transparent; border-right: 5px solid transparent; border-top: 5px solid var(--ink-400); transition: transform 150ms ease; }
.cs-menu {
  position: fixed; z-index: 140; min-width: 120px; max-height: 240px; overflow: auto;
  padding: 5px; background: #fff; border: 1px solid var(--line); border-radius: 10px;
  box-shadow: 0 14px 34px rgba(14,28,54,.15), 0 2px 8px rgba(14,28,54,.06);
  display: none;
}
.cs-menu.open { display: block; animation: csIn .14s ease-out; }
@keyframes csIn { from { opacity: 0; transform: translateY(-4px); } to { opacity: 1; transform: none; } }
.cs-opt { padding: 8px 12px; font-size: 13px; color: var(--ink-700); border-radius: 7px; cursor: pointer; white-space: nowrap; }
.cs-opt:hover { background: var(--brand-050); color: var(--brand-700); }
.cs-opt.selected { background: var(--brand-050); color: var(--brand-700); font-weight: 600; }
.cs.disabled { opacity: .55; pointer-events: none; }
.cs-native { display: none !important; }
/* 报告列表-分享列徽章按钮 */
.link-stat{background:none;border:0;padding:3px 8px;border-radius:8px;cursor:pointer;font:inherit;color:inherit}
.link-stat:hover{background:rgba(106,69,217,.12)}
.link-stat .link-num{font-weight:600;color:var(--accent,#6a45d9)}
