/* ============================================================
   case.css — “案卷”主题：易看、易读，带一点侦探剧气息
   与登录封面（混沌方舟）同一套语言：夜色侧栏、米白纸张、品牌红作线索色。
   - 纸面：暖米白底 + 白纸卡片，墨黑正文，字号与行距放大
   - 夜色：左侧导航与画布底板用封面的深夜色
   - 红线：品牌红只用于“线索”：当前位置、关键数字、牵丝连线
   - 字体：标题用宋体/衬线（案卷感），编号/日期用等宽（档案编号感）
   用 html:root 覆盖 base.css 的浅色与深色变量，登录封面（#login-view.cover）不受影响。
   ============================================================ */
html:root {
  --bg-page: #EFE9DE;
  --surface: #FBF8F2;
  --fill: rgba(60, 48, 30, .07);
  --fill-hover: rgba(60, 48, 30, .12);
  --sep: rgba(60, 48, 30, .14);
  --sep-strong: rgba(60, 48, 30, .24);
  --text-1: #1E1B16;
  --text-2: #5A5248;
  --text-3: #8F867A;
  --accent: #2C5D86;            /* 墨水蓝：链接与焦点 */
  --accent-hover: #1F4C72;
  --accent-soft: rgba(44, 93, 134, .12);
  --success: #2F7A4C;
  --warning: #B26A12;
  --danger: #C2362B;
  --btn-primary-bg: #1E1B16;
  --btn-primary-text: #FBF8F2;
  --shadow-card: 0 1px 0 rgba(255, 255, 255, .6) inset, 0 1px 2px rgba(40, 30, 15, .08), 0 6px 18px rgba(40, 30, 15, .07);
  --shadow-raised: 0 2px 6px rgba(40, 30, 15, .14), 0 22px 60px rgba(40, 30, 15, .22);
  --focus-ring: 0 0 0 3px rgba(44, 93, 134, .35);
  --radius-card: 10px;
  --radius-ctl: 8px;

  --case-red: #C8302A;
  --case-red-soft: rgba(200, 48, 42, .12);
  --case-night: #121419;
  --case-night-2: #1B1E25;
  --case-kraft: #C9A877;
  --case-kraft-dark: #A9865A;
  --case-serif: "Songti SC", "STSong", "Noto Serif SC", "Source Han Serif SC", "SimSun", Georgia, serif;
  --case-mono: "SF Mono", "JetBrains Mono", Consolas, "Courier New", monospace;
  color-scheme: light;
}

html:root body {
  font-size: 15px; line-height: 1.6;
  background:
    radial-gradient(1200px 600px at 80% -10%, rgba(255, 255, 255, .55), transparent 60%),
    var(--bg-page);
}
/* 纸面颗粒：极淡，只为不“死白” */
html:root .env { background: transparent; }
html:root .env-noise {
  display: block; position: fixed; inset: 0; pointer-events: none; opacity: .5;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 .35 0 0 0 0 .28 0 0 0 0 .18 0 0 0 .05 0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
}
::selection { background: rgba(200, 48, 42, .18); }

/* ---------- 标题：案卷衬线 ---------- */
html:root h1, html:root .topbar h2, html:root .card-title, html:root .modal-header h3,
html:root .page-title, html:root .hero h1, html:root .hero h2 {
  font-family: var(--case-serif); font-weight: 700; letter-spacing: .01em;
}
html:root .topbar h2 { font-size: 19px; }
html:root .card-title { font-size: 17px; }

/* ---------- 左侧导航：封面的夜色 ---------- */
html:root .dock {
  background: linear-gradient(180deg, var(--case-night-2), var(--case-night));
  border: 1px solid rgba(255, 255, 255, .06);
  box-shadow: 0 18px 50px rgba(18, 20, 25, .35);
  -webkit-backdrop-filter: none; backdrop-filter: none;
}
html:root .dock-logo { border-bottom-color: rgba(255, 255, 255, .08); }
html:root .dock-logo .brand-logo { filter: invert(1) contrast(1.5); mix-blend-mode: screen; background: transparent; padding: 0; }
html:root .dock-logo .logo-name { color: #F1EDE4; font-family: var(--case-serif); font-size: 14px; }
html:root .nav-item { color: rgba(241, 237, 228, .78); font-size: 14.5px; }
html:root .nav-item svg { color: rgba(241, 237, 228, .5); }
html:root .nav-item:hover { background: rgba(255, 255, 255, .06); color: #F1EDE4; }
html:root .nav-item.active { background: rgba(255, 255, 255, .09); color: #FFF; font-weight: 600; }
html:root .nav-item.active svg { color: var(--case-red); }
html:root .nav-item.active::before {
  content: ''; position: absolute; left: -10px; top: 9px; bottom: 9px; width: 3px; border-radius: 2px; background: var(--case-red);
}
html:root .nav-sep { color: rgba(241, 237, 228, .38); border-top-color: rgba(255, 255, 255, .08); }

/* ---------- 顶栏：一张压在纸上的标签条 ---------- */
html:root .topbar {
  background: rgba(251, 248, 242, .88);
  border: 1px solid var(--sep);
  box-shadow: 0 1px 2px rgba(40, 30, 15, .06);
}
html:root .avatar { background: var(--case-night); }
html:root #tenant-name { font-family: var(--case-mono); letter-spacing: .04em; }

/* ---------- 卡片：白纸 + 细边 ---------- */
html:root .card, html:root .stat-card, html:root .modal {
  background: var(--surface);
  border: 1px solid var(--sep);
  box-shadow: var(--shadow-card);
}
html:root .stat-num { font-family: var(--case-mono); letter-spacing: -.02em; }
html:root .badge { font-weight: 600; }
html:root .table th { font-size: 12.5px; letter-spacing: .06em; color: var(--text-2); }
html:root .table td { font-size: 14.5px; }
html:root .hint, html:root .muted { color: var(--text-2); }
html:root code, html:root .mono { font-family: var(--case-mono); }

/* 分段页签：纸签 */
html:root .tab-bar { background: rgba(60, 48, 30, .08); }
html:root .tab-item.active { background: var(--surface); box-shadow: 0 1px 2px rgba(40, 30, 15, .12); color: var(--text-1); }

/* 主按钮：墨黑；危险：红 */
html:root .btn { border-radius: var(--radius-ctl); }
html:root .btn-primary { letter-spacing: .02em; }

/* ---------- 通用“案卷”小组件（新页面使用） ---------- */
.case-eyebrow { font-family: var(--case-mono); font-size: 12px; letter-spacing: .18em; color: var(--case-red); text-transform: uppercase; }
.case-title { font-family: var(--case-serif); font-size: 28px; font-weight: 700; letter-spacing: .02em; line-height: 1.25; }
.case-lede { color: var(--text-2); font-size: 15px; max-width: 760px; }
.case-no { font-family: var(--case-mono); font-size: 12px; color: var(--text-3); letter-spacing: .04em; }
.case-stamp {
  display: inline-flex; align-items: center; gap: 4px; padding: 1px 8px;
  border: 1.5px solid currentColor; border-radius: 4px; transform: rotate(-2deg);
  font-family: var(--case-mono); font-size: 11.5px; font-weight: 700; letter-spacing: .08em;
}
.case-stamp.red { color: var(--case-red); }
.case-stamp.ink { color: var(--text-2); }
.case-stamp.green { color: var(--success); }

@media (max-width: 768px) {
  html:root body { font-size: 15px; }
  .case-title { font-size: 23px; }
  html:root .dock { background: linear-gradient(90deg, var(--case-night-2), var(--case-night)); }
  html:root .nav-item.active::before { left: 6px; right: 6px; top: auto; bottom: 2px; width: auto; height: 2px; }
}