/* ============================================================
   金药方 · 设计系统（demo-v2 · 登录 + Shell 工作台架构）
   深空科技风 × Apple 质感 · 深浅双主题 · 继承 v1 全部动画
   ============================================================ */

:root {
  --ease: cubic-bezier(.22, 1, .36, 1);
  --ease-io: cubic-bezier(.65, 0, .35, 1);
  --r-lg: 22px; --r-md: 16px; --r-sm: 12px; --r-xs: 8px;
  --gold: #f0c264; --gold-2: #e89b3c; --gold-soft: rgba(240, 194, 100, .13);
  --cyan: #45d6ff; --cyan-soft: rgba(69, 214, 255, .12);
  --blue: #6b9aff; --blue-soft: rgba(107, 154, 255, .12);
  --ok: #3ddc97; --ok-soft: rgba(61, 220, 151, .12);
  --bad: #ff6b81; --bad-soft: rgba(255, 107, 129, .12);
  --warn: #ffb454; --warn-soft: rgba(255, 180, 84, .13);
  --violet: #b78bff; --violet-soft: rgba(183, 139, 255, .12);
  --font: -apple-system, BlinkMacSystemFont, "SF Pro Display", "SF Pro Text", "PingFang SC", "HarmonyOS Sans SC", "Microsoft YaHei UI", "Microsoft YaHei", sans-serif;
  --mono: "SF Mono", "JetBrains Mono", Consolas, "Cascadia Code", monospace;
}

/* ---------- 深色（默认） ---------- */
html[data-theme="dark"] {
  color-scheme: dark;
  --bg-0: #04060d;
  --bg-1: #070b17;
  --text-1: #eef2fa;
  --text-2: #9aa7bf;
  --text-3: #5d6a85;
  --line: rgba(148, 163, 200, .13);
  --line-strong: rgba(148, 163, 200, .26);
  --panel: rgba(17, 24, 44, .52);
  --panel-2: rgba(23, 32, 56, .65);
  --panel-solid: #0d1326;
  --glass-blur: blur(22px) saturate(150%);
  --shadow-1: 0 6px 24px rgba(1, 3, 10, .45);
  --shadow-2: 0 18px 60px rgba(1, 3, 10, .6);
  --nav-bg: rgba(5, 8, 17, .68);
  --paper-bg: #f7f8fc;
  --paper-text: #1c2336;
  --paper-text-2: #5a6478;
  --paper-line: #dfe3ee;
  --grid-line: rgba(120, 150, 220, .05);
  --aurora-op: .55;
  --code-bg: rgba(8, 12, 26, .8);
}

/* ---------- 浅色 ---------- */
html[data-theme="light"] {
  color-scheme: light;
  --bg-0: #f2f4fb;
  --bg-1: #eaeef8;
  --text-1: #131a2e;
  --text-2: #5a6478;
  --text-3: #8b94aa;
  --line: rgba(23, 32, 64, .1);
  --line-strong: rgba(23, 32, 64, .2);
  --panel: rgba(255, 255, 255, .72);
  --panel-2: rgba(255, 255, 255, .92);
  --panel-solid: #ffffff;
  --glass-blur: blur(22px) saturate(160%);
  --shadow-1: 0 6px 22px rgba(30, 42, 90, .08);
  --shadow-2: 0 20px 56px rgba(30, 42, 90, .14);
  --nav-bg: rgba(247, 249, 255, .75);
  --paper-bg: #ffffff;
  --paper-text: #1c2336;
  --paper-text-2: #5a6478;
  --paper-line: #e4e8f2;
  --grid-line: rgba(60, 90, 170, .06);
  --aurora-op: .4;
  --code-bg: rgba(240, 243, 252, .9);
}

/* ============ 基础 ============ */
* { box-sizing: border-box; margin: 0; padding: 0; }
html { scroll-behavior: smooth; }
body {
  font-family: var(--font);
  background: var(--bg-0);
  color: var(--text-1);
  font-size: 15px;
  line-height: 1.65;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  overflow: hidden;
  min-height: 100vh;
  transition: background .5s var(--ease), color .5s var(--ease);
}
::selection { background: rgba(240, 194, 100, .3); }
a { color: inherit; text-decoration: none; }
button { font-family: inherit; cursor: pointer; }
img, svg { display: block; }
h1, h2, h3, h4 { line-height: 1.3; font-weight: 650; letter-spacing: -.01em; }

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

/* ============ 背景舞台（极光贯穿登录与工作台） ============ */
.bg-stage { position: fixed; inset: 0; z-index: -2; overflow: hidden; background: radial-gradient(120% 90% at 50% -10%, var(--bg-1) 0%, var(--bg-0) 60%); }
.aurora { position: absolute; border-radius: 50%; filter: blur(90px); opacity: var(--aurora-op); will-change: transform; }
.aurora-a { width: 62vw; height: 62vw; left: -18vw; top: -24vw; background: radial-gradient(circle at 40% 40%, rgba(64, 120, 255, .34), transparent 65%); animation: drift-a 26s var(--ease-io) infinite alternate; }
.aurora-b { width: 54vw; height: 54vw; right: -16vw; top: 6vh; background: radial-gradient(circle at 55% 45%, rgba(240, 194, 100, .2), transparent 62%); animation: drift-b 32s var(--ease-io) infinite alternate; }
.aurora-c { width: 48vw; height: 48vw; left: 24vw; bottom: -30vw; background: radial-gradient(circle at 50% 50%, rgba(69, 214, 255, .16), transparent 62%); animation: drift-c 38s var(--ease-io) infinite alternate; }
html[data-theme="light"] .aurora-a { background: radial-gradient(circle at 40% 40%, rgba(90, 140, 255, .25), transparent 65%); }
html[data-theme="light"] .aurora-b { background: radial-gradient(circle at 55% 45%, rgba(245, 200, 110, .3), transparent 62%); }
html[data-theme="light"] .aurora-c { background: radial-gradient(circle at 50% 50%, rgba(80, 210, 255, .22), transparent 62%); }
@keyframes drift-a { from { transform: translate(0, 0) scale(1); } to { transform: translate(9vw, 7vh) scale(1.12); } }
@keyframes drift-b { from { transform: translate(0, 0) scale(1.05); } to { transform: translate(-8vw, 10vh) scale(.94); } }
@keyframes drift-c { from { transform: translate(0, 0) rotate(0deg); } to { transform: translate(-6vw, -8vh) rotate(18deg); } }
.bg-grid { position: absolute; inset: 0; background-image: linear-gradient(var(--grid-line) 1px, transparent 1px), linear-gradient(90deg, var(--grid-line) 1px, transparent 1px); background-size: 52px 52px; mask-image: radial-gradient(85% 70% at 50% 20%, #000 30%, transparent 100%); }
.bg-vignette { position: absolute; inset: 0; background: radial-gradient(120% 100% at 50% 0%, transparent 55%, rgba(0, 0, 0, .28) 100%); }
html[data-theme="light"] .bg-vignette { background: radial-gradient(120% 100% at 50% 0%, transparent 60%, rgba(40, 55, 110, .07) 100%); }

/* ============ 动画基础 ============ */
html[data-theme="light"] .page-kicker { color: #a86f14; }
html[data-theme="light"] .side-item.active { color: #a06a12; }
@keyframes view-in { from { opacity: 0; transform: translateY(18px); } to { opacity: 1; transform: none; } }
@keyframes fade-in { from { opacity: 0; } to { opacity: 1; } }
@keyframes fact-in { to { opacity: 1; transform: none; } }
@keyframes spin { to { transform: rotate(360deg); } }
@keyframes pulse { 0%, 100% { opacity: 1; transform: scale(1); } 50% { opacity: .5; transform: scale(.72); } }
@keyframes floaty { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-9px); } }
.anim-up { animation: view-in .6s var(--ease) both; }
.d1 { animation-delay: .08s; } .d2 { animation-delay: .16s; } .d3 { animation-delay: .24s; }
.d4 { animation-delay: .32s; } .d5 { animation-delay: .4s; } .d6 { animation-delay: .48s; }

/* ============ Shell 布局 ============ */
.shell { height: 100vh; display: flex; flex-direction: column; position: relative; z-index: 1; }
.shell-top { height: 60px; flex-shrink: 0; display: flex; align-items: center; gap: 20px; padding: 0 22px; backdrop-filter: var(--glass-blur); -webkit-backdrop-filter: var(--glass-blur); background: var(--nav-bg); border-bottom: 1px solid var(--line); transition: background .5s var(--ease); }
.st-brand { display: flex; align-items: center; gap: 11px; flex-shrink: 0; }
.st-mark { display: grid; place-items: center; filter: drop-shadow(0 4px 14px rgba(240, 194, 100, .35)); transition: transform .5s var(--ease); }
.st-brand:hover .st-mark { transform: rotate(-8deg) scale(1.06); }
.st-name { font-size: 16.5px; font-weight: 700; letter-spacing: .02em; background: linear-gradient(100deg, var(--gold) 10%, #ffe9bd 50%, var(--gold-2) 90%); -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; }
html[data-theme="light"] .st-name { background: linear-gradient(100deg, #c98a1e, #a06a12); -webkit-background-clip: text; background-clip: text; }
.st-sub { font-size: 11px; color: var(--text-3); margin-left: 2px; padding-left: 12px; border-left: 1px solid var(--line-strong); letter-spacing: .06em; }
.st-right { margin-left: auto; display: flex; align-items: center; gap: 13px; }
.role-chip { display: flex; align-items: center; gap: 8px; padding: 6px 14px; background: var(--panel); border: 1px solid var(--line); border-radius: 99px; font-size: 12.5px; color: var(--text-2); backdrop-filter: var(--glass-blur); -webkit-backdrop-filter: var(--glass-blur); }
.role-chip .rc-dot { width: 8px; height: 8px; border-radius: 50%; box-shadow: 0 0 8px currentColor; }
.st-avatar { width: 33px; height: 33px; border-radius: 50%; display: grid; place-items: center; font-size: 13px; font-weight: 700; color: #201503; background: linear-gradient(135deg, var(--gold), var(--gold-2)); box-shadow: 0 4px 14px rgba(232, 155, 60, .4); }

.shell-body { flex: 1; display: flex; min-height: 0; }
.sidebar { width: 228px; flex-shrink: 0; display: flex; flex-direction: column; gap: 4px; padding: 18px 13px 14px; border-right: 1px solid var(--line); background: var(--panel); backdrop-filter: var(--glass-blur); -webkit-backdrop-filter: var(--glass-blur); overflow-y: auto; transition: background .5s var(--ease); }
.side-title { font-size: 10.5px; color: var(--text-3); letter-spacing: .18em; padding: 8px 12px 9px; text-transform: uppercase; }
.side-item { position: relative; display: flex; align-items: center; gap: 11px; padding: 10.5px 13px; border-radius: 11px; color: var(--text-2); font-size: 13.5px; cursor: pointer; transition: all .28s var(--ease); border: 1px solid transparent; }
.side-item:hover { background: var(--panel-2); color: var(--text-1); transform: translateX(2px); }
.side-item.active { background: linear-gradient(90deg, var(--gold-soft), transparent 80%), var(--panel-2); color: var(--gold); font-weight: 600; border-color: rgba(240, 194, 100, .25); }
.side-item.active::before { content: ""; position: absolute; left: 0; top: 22%; bottom: 22%; width: 3px; border-radius: 3px; background: linear-gradient(180deg, var(--gold), var(--gold-2)); box-shadow: 0 0 10px rgba(240, 194, 100, .6); }
.side-item .si-ico { width: 19px; text-align: center; font-size: 15.5px; }
.side-foot { margin-top: auto; padding: 13px 12px 4px; border-top: 1px solid var(--line); font-size: 10.5px; color: var(--text-3); line-height: 1.75; }
.side-foot b { color: var(--ok); font-weight: 600; }
.logout-btn { display: flex; align-items: center; gap: 8px; padding: 9px 13px; margin-top: 6px; border-radius: 11px; border: 1px solid var(--line); background: transparent; color: var(--text-3); font-size: 12.5px; transition: all .3s var(--ease); }
.logout-btn:hover { color: var(--bad); border-color: rgba(255, 107, 129, .35); background: var(--bad-soft); }

.content { flex: 1; min-width: 0; overflow-y: auto; overflow-x: hidden; padding: 24px 26px 42px; position: relative; }
.content-inner { animation: view-in .5s var(--ease) both; max-width: 1460px; margin: 0 auto; }
.page-head { margin-bottom: 20px; }
.page-kicker { display: inline-flex; align-items: center; gap: 8px; font-size: 11.5px; letter-spacing: .22em; color: var(--gold); text-transform: uppercase; margin-bottom: 8px; }
.page-kicker::before { content: ""; width: 22px; height: 1px; background: linear-gradient(90deg, transparent, var(--gold)); }
.page-title { font-size: 24px; letter-spacing: -.02em; }
.page-sub { color: var(--text-2); margin-top: 6px; max-width: 860px; font-size: 13.5px; }
.grid { display: grid; gap: 18px; }
.g2 { grid-template-columns: repeat(2, 1fr); }
.g3 { grid-template-columns: repeat(3, 1fr); }
.g4 { grid-template-columns: repeat(4, 1fr); }
.g23 { grid-template-columns: 2fr 3fr; }
.g32 { grid-template-columns: 3fr 2fr; }

/* ============ 卡片 ============ */
.card { position: relative; background: var(--panel); border: 1px solid var(--line); border-radius: var(--r-lg); padding: 24px; backdrop-filter: var(--glass-blur); -webkit-backdrop-filter: var(--glass-blur); box-shadow: var(--shadow-1); transition: transform .45s var(--ease), box-shadow .45s var(--ease), border-color .45s; }
.card.hoverable:hover { transform: translateY(-4px); border-color: var(--line-strong); box-shadow: var(--shadow-2), 0 0 0 1px rgba(240, 194, 100, .08); }
.card-tint-gold { background: linear-gradient(150deg, var(--gold-soft), transparent 55%), var(--panel); }
.card-tint-cyan { background: linear-gradient(150deg, var(--cyan-soft), transparent 55%), var(--panel); }
.card-title { font-size: 16px; margin-bottom: 6px; display: flex; align-items: center; gap: 9px; }
.card-title .ct-bar { width: 4px; height: 15px; border-radius: 2px; background: linear-gradient(180deg, var(--gold), var(--gold-2)); box-shadow: 0 0 8px rgba(240, 194, 100, .5); }
.card-desc { color: var(--text-2); font-size: 13px; }
.card-head-row { display: flex; align-items: flex-start; justify-content: space-between; gap: 12px; margin-bottom: 14px; }

.data-tag { position: absolute; top: 14px; right: 16px; font-size: 10px; letter-spacing: .08em; color: var(--text-3); opacity: .55; border: 1px solid var(--line); padding: 2px 8px; border-radius: 99px; pointer-events: none; z-index: 3; }

/* ============ 按钮 ============ */
.btn { position: relative; display: inline-flex; align-items: center; justify-content: center; gap: 8px; padding: 11px 24px; font-size: 14px; font-weight: 600; letter-spacing: .01em; border-radius: 13px; border: 1px solid transparent; transition: all .35s var(--ease); overflow: hidden; user-select: none; }
.btn:active { transform: scale(.965); }
.btn-primary { background: linear-gradient(135deg, #f6cd6e, #e89b3c); color: #201503; box-shadow: 0 8px 26px rgba(232, 155, 60, .35), inset 0 1px 0 rgba(255, 255, 255, .5); }
.btn-primary:hover { box-shadow: 0 12px 36px rgba(232, 155, 60, .5), inset 0 1px 0 rgba(255, 255, 255, .5); transform: translateY(-2px); }
.btn-primary::after { content: ""; position: absolute; top: 0; left: -80%; width: 45%; height: 100%; background: linear-gradient(105deg, transparent, rgba(255, 255, 255, .55), transparent); transform: skewX(-20deg); transition: left .7s var(--ease); }
.btn-primary:hover::after { left: 130%; }
.btn-ghost { background: var(--panel); border-color: var(--line-strong); color: var(--text-1); backdrop-filter: var(--glass-blur); -webkit-backdrop-filter: var(--glass-blur); }
.btn-ghost:hover { border-color: rgba(240, 194, 100, .5); color: var(--gold); box-shadow: 0 0 0 3px var(--gold-soft); transform: translateY(-2px); }
.btn-danger { background: var(--bad-soft); color: var(--bad); border-color: rgba(255, 107, 129, .3); }
.btn-danger:hover { box-shadow: 0 0 0 3px var(--bad-soft); }
.btn-sm { padding: 7px 15px; font-size: 12.5px; border-radius: 10px; }
.btn[disabled] { opacity: .45; pointer-events: none; }
.btn .spin { width: 14px; height: 14px; border-radius: 50%; border: 2px solid rgba(0, 0, 0, .2); border-top-color: currentColor; animation: spin .7s linear infinite; }

/* ============ 徽章 / 状态 ============ */
.chip { display: inline-flex; align-items: center; gap: 6px; padding: 3.5px 11px; font-size: 11.5px; font-weight: 600; border-radius: 99px; border: 1px solid var(--line); color: var(--text-2); background: var(--panel); white-space: nowrap; }
.chip .dot { width: 6px; height: 6px; border-radius: 50%; background: currentColor; box-shadow: 0 0 8px currentColor; }
.chip-ok { color: var(--ok); background: var(--ok-soft); border-color: rgba(61, 220, 151, .28); }
.chip-bad { color: var(--bad); background: var(--bad-soft); border-color: rgba(255, 107, 129, .28); }
.chip-warn { color: var(--warn); background: var(--warn-soft); border-color: rgba(255, 180, 84, .3); }
.chip-gold { color: var(--gold); background: var(--gold-soft); border-color: rgba(240, 194, 100, .3); }
.chip-cyan { color: var(--cyan); background: var(--cyan-soft); border-color: rgba(69, 214, 255, .28); }
.chip-violet { color: var(--violet); background: var(--violet-soft); border-color: rgba(183, 139, 255, .3); }
.chip-blue { color: var(--blue); background: var(--blue-soft); border-color: rgba(107, 154, 255, .3); }
.chip-mono { font-family: var(--mono); font-size: 10.5px; letter-spacing: .04em; }
.mono-hl { font-family: var(--mono); font-size: .92em; color: var(--cyan); letter-spacing: .02em; }

/* ============ 表格 ============ */
.tbl-wrap { overflow-x: auto; border: 1px solid var(--line); border-radius: var(--r-md); background: var(--panel-2); }
.tbl { width: 100%; border-collapse: collapse; font-size: 13px; min-width: 560px; }
.tbl th { text-align: left; padding: 11px 16px; font-size: 11.5px; letter-spacing: .1em; color: var(--text-3); font-weight: 600; border-bottom: 1px solid var(--line-strong); background: rgba(120, 140, 200, .04); white-space: nowrap; }
.tbl td { padding: 11px 16px; border-bottom: 1px solid var(--line); color: var(--text-1); vertical-align: middle; }
.tbl tr:last-child td { border-bottom: none; }
.tbl tbody tr { transition: background .25s; }
.tbl tbody tr:hover { background: rgba(120, 150, 230, .05); }
.tbl .td-sub { display: block; font-size: 11.5px; color: var(--text-3); margin-top: 2px; }

/* ============ 表单 ============ */
.field { margin-bottom: 16px; }
.field label { display: block; font-size: 12.5px; color: var(--text-2); margin-bottom: 7px; font-weight: 600; }
.input, .select, textarea.input { width: 100%; padding: 11px 14px; background: var(--panel); border: 1px solid var(--line-strong); border-radius: var(--r-sm); color: var(--text-1); font-family: inherit; font-size: 14px; transition: all .3s; outline: none; }
.input:focus, .select:focus, textarea.input:focus { border-color: rgba(240, 194, 100, .55); box-shadow: 0 0 0 4px var(--gold-soft); }
textarea.input { resize: vertical; min-height: 90px; }
.select { appearance: none; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='%239aa7bf' stroke-width='2.4' stroke-linecap='round'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E"); background-repeat: no-repeat; background-position: right 13px center; padding-right: 36px; }

/* ============ 代码块（DSL） ============ */
.code { font-family: var(--mono); font-size: 12.5px; line-height: 1.75; background: var(--code-bg); border: 1px solid var(--line); border-radius: var(--r-sm); padding: 13px 16px; color: var(--text-2); overflow-x: auto; white-space: pre; }
.code b { color: var(--cyan); font-weight: 600; }
.code i { color: var(--gold); font-style: normal; }
.code u { color: var(--ok); text-decoration: none; }
.code em { color: var(--violet); font-style: normal; }

/* ============ 工作台（任务列表 + 详情） ============ */
.wb-layout { display: grid; grid-template-columns: 330px 1fr; gap: 22px; align-items: start; }
.task-card { position: relative; display: block; width: 100%; text-align: left; padding: 18px 18px 16px; border-radius: var(--r-md); border: 1px solid var(--line); background: var(--panel); cursor: pointer; transition: all .4s var(--ease); margin-bottom: 12px; font-family: inherit; color: var(--text-1); }
.task-card:hover { transform: translateX(4px); border-color: var(--line-strong); }
.task-card.active { border-color: rgba(240, 194, 100, .5); background: linear-gradient(140deg, var(--gold-soft), transparent 60%), var(--panel); box-shadow: 0 8px 30px rgba(240, 194, 100, .1); }
.task-card.active::before { content: ""; position: absolute; left: 0; top: 18px; bottom: 16px; width: 3px; border-radius: 3px; background: linear-gradient(180deg, var(--gold), var(--gold-2)); }
.task-co { font-size: 15px; font-weight: 650; display: flex; align-items: center; gap: 8px; }
.task-meta { display: flex; gap: 6px; flex-wrap: wrap; margin-top: 9px; }
.task-foot { display: flex; justify-content: space-between; align-items: center; margin-top: 11px; font-size: 11.5px; color: var(--text-3); }
.task-prog { height: 4px; border-radius: 4px; background: var(--line); overflow: hidden; margin-top: 10px; }
.task-prog i { display: block; height: 100%; border-radius: 4px; background: linear-gradient(90deg, var(--gold), var(--gold-2)); box-shadow: 0 0 10px rgba(240, 194, 100, .6); transition: width .8s var(--ease); }

.wb-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 16px; flex-wrap: wrap; margin-bottom: 20px; }
.co-name { font-size: 24px; letter-spacing: -.01em; display: flex; align-items: center; gap: 12px; flex-wrap: wrap; }
.co-tags { display: flex; gap: 7px; flex-wrap: wrap; margin-top: 10px; }
.kv-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 12px; margin-top: 18px; }
.kv { padding: 13px 16px; border-radius: var(--r-sm); border: 1px solid var(--line); background: var(--panel-2); }
.kv label { display: block; font-size: 11px; color: var(--text-3); letter-spacing: .08em; margin-bottom: 4px; }
.kv b { font-size: 14px; font-weight: 600; font-variant-numeric: tabular-nums; }

/* 阶段 Tabs */
.stage-tabs { display: flex; gap: 6px; flex-wrap: wrap; margin: 22px 0 18px; position: sticky; top: 0; z-index: 40; padding: 8px; border-radius: 15px; background: color-mix(in srgb, var(--panel-solid) 86%, transparent); border: 1px solid var(--line); backdrop-filter: blur(22px) saturate(150%); -webkit-backdrop-filter: blur(22px) saturate(150%); }
.stage-tab { padding: 8px 15px; font-size: 13px; font-weight: 600; color: var(--text-2); border-radius: 10px; border: none; background: transparent; transition: all .3s var(--ease); display: inline-flex; align-items: center; gap: 7px; white-space: nowrap; }
.stage-tab .n { width: 19px; height: 19px; border-radius: 50%; display: grid; place-items: center; font-size: 10.5px; background: var(--line); color: var(--text-2); transition: all .3s; }
.stage-tab:hover { color: var(--text-1); background: var(--panel); }
.stage-tab.active { color: var(--text-1); background: var(--panel-2); box-shadow: var(--shadow-1); }
.stage-tab.active .n { background: linear-gradient(135deg, var(--gold), var(--gold-2)); color: #201503; }
.stage-tab.done .n { background: var(--ok-soft); color: var(--ok); }
.stage-pane { animation: view-in .5s var(--ease) both; }

/* ============ 引擎流水线 ============ */
.pipe-hero { position: relative; border-radius: var(--r-lg); border: 1px solid var(--line); background: linear-gradient(160deg, rgba(240, 194, 100, .06), transparent 50%), var(--panel); padding: 30px 28px 26px; overflow: hidden; }
.pipe-hero.running { border-color: rgba(69, 214, 255, .35); }
.pipe-hero .scanline { position: absolute; left: 0; right: 0; top: 0; height: 2px; background: linear-gradient(90deg, transparent, var(--cyan), transparent); opacity: 0; }
.pipe-hero.running .scanline { opacity: .8; animation: scan 2.4s var(--ease-io) infinite; }
@keyframes scan { 0% { top: 0; opacity: 0; } 12% { opacity: .9; } 88% { opacity: .9; } 100% { top: 100%; opacity: 0; } }
.pipe-line { display: flex; align-items: flex-start; gap: 0; margin-top: 22px; overflow-x: auto; padding-bottom: 8px; }
.pipe-node { flex: 1; min-width: 128px; text-align: center; position: relative; }
.pipe-node .pn-dot { width: 46px; height: 46px; margin: 0 auto 10px; border-radius: 50%; display: grid; place-items: center; border: 2px solid var(--line-strong); background: var(--panel-2); color: var(--text-3); font-size: 12px; font-weight: 700; position: relative; z-index: 2; transition: all .45s var(--ease); }
.pipe-node b { display: block; font-size: 12.5px; color: var(--text-2); font-weight: 600; transition: color .3s; }
.pipe-node span { font-size: 10.5px; color: var(--text-3); }
.pipe-node::before { content: ""; position: absolute; top: 23px; left: calc(-50% + 23px); right: calc(50% + 23px); height: 2px; background: var(--line); }
.pipe-node:first-child::before { display: none; }
.pipe-node::after { content: ""; position: absolute; top: 23px; left: calc(-50% + 23px); right: calc(50% + 23px); height: 2px; background: linear-gradient(90deg, var(--gold), var(--cyan)); transform: scaleX(0); transform-origin: left; transition: transform .6s var(--ease); z-index: 1; }
.pipe-node:first-child::after { display: none; }
.pipe-node.active .pn-dot { border-color: var(--cyan); color: var(--cyan); box-shadow: 0 0 0 6px var(--cyan-soft), 0 0 24px rgba(69, 214, 255, .4); animation: node-breathe 1.6s ease-in-out infinite; }
.pipe-node.active b { color: var(--cyan); }
.pipe-node.done .pn-dot { border-color: var(--ok); color: var(--ok); background: var(--ok-soft); }
.pipe-node.done::after { transform: scaleX(1); }
.pipe-node.done b { color: var(--text-1); }
@keyframes node-breathe { 0%, 100% { box-shadow: 0 0 0 5px var(--cyan-soft), 0 0 18px rgba(69, 214, 255, .3); } 50% { box-shadow: 0 0 0 9px var(--cyan-soft), 0 0 34px rgba(69, 214, 255, .55); } }
.run-log { margin-top: 18px; border-radius: var(--r-sm); background: var(--code-bg); border: 1px solid var(--line); padding: 13px 16px; font-family: var(--mono); font-size: 12px; line-height: 1.9; max-height: 150px; overflow-y: auto; }
.run-log .ln { opacity: 0; animation: fact-in .4s var(--ease) forwards; display: flex; gap: 10px; }
.run-log .t { color: var(--text-3); flex-shrink: 0; }
.run-log .ok { color: var(--ok); } .run-log .bad { color: var(--bad); } .run-log .warn { color: var(--warn); } .run-log .info { color: var(--text-2); }

/* 引擎详情面板 */
.ed-block { border: 1px solid var(--line); border-radius: var(--r-md); background: var(--panel-2); padding: 20px 22px; animation: view-in .5s var(--ease) both; }
.ed-block h4 { font-size: 14px; margin-bottom: 10px; display: flex; align-items: center; gap: 8px; }
.ed-block h4::before { content: ""; width: 8px; height: 8px; border-radius: 3px; background: linear-gradient(135deg, var(--cyan), var(--blue)); box-shadow: 0 0 10px rgba(69, 214, 255, .55); }
.ed-block p { font-size: 13px; color: var(--text-2); margin: 8px 0; }
.ed-mats { display: flex; flex-wrap: wrap; gap: 7px; margin-top: 10px; }
.ed-stats { display: grid; grid-template-columns: repeat(3, 1fr); gap: 11px; margin: 12px 0; }
.ed-stat { border-radius: var(--r-sm); padding: 14px; text-align: center; border: 1px solid var(--line); background: var(--panel); }
.ed-stat b { display: block; font-size: 27px; font-weight: 700; font-variant-numeric: tabular-nums; }
.ed-stat span { font-size: 11px; color: var(--text-3); }
.ed-stat.ok b { color: var(--ok); } .ed-stat.bad b { color: var(--bad); }
.ed-stat.warn b { color: var(--warn); } .ed-stat.gold b { color: var(--gold); }
.ed-stat.cyan b { color: var(--cyan); }
.ed-combos { display: grid; grid-template-columns: repeat(auto-fit, minmax(230px, 1fr)); gap: 12px; margin-top: 12px; }
.ed-combo { position: relative; border: 1px solid var(--line); border-radius: var(--r-sm); padding: 18px 15px 14px; background: var(--panel); animation: fact-in .55s var(--ease) both; }
.ed-combo.cond { border-style: dashed; }
.ed-combo > b { display: block; font-size: 13.5px; margin-bottom: 7px; }
.ed-combo .combo-rank { top: -11px; left: 13px; padding: 2.5px 10px; font-size: 10px; }

/* 三态事实 */
.fact-list { display: flex; flex-direction: column; gap: 9px; }
.fact-row { display: grid; grid-template-columns: 30px 1.5fr 1fr auto; gap: 13px; align-items: center; padding: 13px 16px; border-radius: var(--r-sm); border: 1px solid var(--line); background: var(--panel-2); opacity: 0; transform: translateY(10px); animation: fact-in .55s var(--ease) forwards; }
.fact-ico { width: 28px; height: 28px; border-radius: 9px; display: grid; place-items: center; font-size: 14px; }
.fact-name b { display: block; font-size: 13.5px; font-weight: 600; }
.fact-name span { font-size: 11.5px; color: var(--text-3); }
.fact-val { font-size: 12.5px; color: var(--text-2); font-variant-numeric: tabular-nums; }
.fact-evi { font-size: 11px; color: var(--text-3); font-family: var(--mono); text-align: right; }
.fact-row.st-ok .fact-ico { background: var(--ok-soft); color: var(--ok); }
.fact-row.st-bad .fact-ico { background: var(--bad-soft); color: var(--bad); }
.fact-row.st-miss .fact-ico { background: var(--warn-soft); color: var(--warn); }
.fact-row.st-bad { border-color: rgba(255, 107, 129, .3); }
.fact-row.st-miss { border-color: rgba(255, 180, 84, .3); background: linear-gradient(120deg, var(--warn-soft), transparent 60%), var(--panel-2); }
.legend-row { display: flex; gap: 10px; flex-wrap: wrap; margin: 4px 0 14px; }

/* 图表面板 */
.chart-panel { position: relative; }
.chart-title { font-size: 14px; font-weight: 650; margin-bottom: 4px; display: flex; align-items: center; gap: 8px; }
.chart-sub { font-size: 11.5px; color: var(--text-3); margin-bottom: 14px; }
.seg { display: inline-flex; padding: 3px; border-radius: 10px; border: 1px solid var(--line); background: var(--panel-2); gap: 2px; }
.seg button { padding: 5.5px 14px; font-size: 12px; font-weight: 600; border: none; background: transparent; color: var(--text-2); border-radius: 8px; transition: all .3s; }
.seg button.on { background: linear-gradient(135deg, var(--gold), var(--gold-2)); color: #201503; box-shadow: 0 3px 12px rgba(232, 155, 60, .3); }

.big-num { font-size: 40px; font-weight: 700; letter-spacing: -.03em; font-variant-numeric: tabular-nums; line-height: 1.1; }
.big-num .unit { font-size: 15px; color: var(--text-2); font-weight: 600; margin-left: 3px; }
.num-gold { color: var(--gold); } .num-cyan { color: var(--cyan); } .num-bad { color: var(--bad); } .num-ok { color: var(--ok); }

/* 映射可视化 */
.map-viz { position: relative; display: grid; grid-template-columns: 1fr 60px 1fr; gap: 0; }
.map-col { display: flex; flex-direction: column; gap: 9px; }
.map-col-title { text-align: center; font-size: 12px; letter-spacing: .14em; color: var(--text-3); margin-bottom: 4px; font-weight: 700; }
.map-item { padding: 9px 13px; border-radius: 10px; border: 1px solid var(--line); background: var(--panel-2); font-size: 12.5px; display: flex; justify-content: space-between; align-items: center; gap: 8px; opacity: 0; animation: fact-in .5s var(--ease) forwards; }
.map-item.hit { border-color: rgba(240, 194, 100, .4); background: linear-gradient(120deg, var(--gold-soft), transparent 70%), var(--panel-2); }
.map-item .mi-code { font-family: var(--mono); font-size: 10px; color: var(--text-3); }
.map-mid { position: relative; }

/* 约束校验 */
.cons-check { display: flex; flex-direction: column; gap: 10px; }
.cc-row { display: grid; grid-template-columns: 54px 1fr auto; gap: 14px; align-items: center; padding: 14px 16px; border-radius: var(--r-sm); border: 1px solid var(--line); background: var(--panel-2); opacity: 0; animation: fact-in .5s var(--ease) forwards; }
.cc-type { text-align: center; }
.cc-type b { display: block; font-size: 12.5px; }
.cc-type span { font-size: 9.5px; color: var(--text-3); letter-spacing: .1em; }
.cc-body b { font-size: 13.5px; display: block; margin-bottom: 3px; }
.cc-body span { font-size: 12px; color: var(--text-2); }
.cc-row.pass { border-left: 3px solid var(--ok); }
.cc-row.block { border-left: 3px solid var(--bad); background: linear-gradient(120deg, var(--bad-soft), transparent 55%), var(--panel-2); }
.cc-row.cond { border-left: 3px solid var(--warn); }
.cc-row.conflict { border-left: 3px solid var(--bad); box-shadow: inset 0 0 30px rgba(255, 107, 129, .05); }

/* 候选组合 */
.combo-card { position: relative; border-radius: var(--r-lg); border: 1px solid var(--line); background: var(--panel); padding: 24px; transition: all .45s var(--ease); opacity: 0; transform: translateY(16px) scale(.98); animation: combo-in .7s var(--ease) forwards; }
@keyframes combo-in { to { opacity: 1; transform: none; } }
.combo-card.recommend { border-color: rgba(240, 194, 100, .45); background: linear-gradient(155deg, var(--gold-soft), transparent 55%), var(--panel); box-shadow: 0 16px 50px rgba(240, 194, 100, .1); }
.combo-card.cond { border-style: dashed; }
.combo-rank { position: absolute; top: -13px; left: 22px; padding: 4px 13px; font-size: 11px; font-weight: 700; letter-spacing: .12em; border-radius: 99px; background: linear-gradient(135deg, #f6cd6e, #e89b3c); color: #201503; box-shadow: 0 6px 18px rgba(232, 155, 60, .4); }
.combo-rank.r2 { background: linear-gradient(135deg, #9aa7bf, #6b7a99); color: #0b0f1c; box-shadow: 0 6px 18px rgba(107, 122, 153, .35); }
.combo-rank.r3 { background: linear-gradient(135deg, #b78bff, #7d5cd6); color: #12081f; box-shadow: 0 6px 18px rgba(125, 92, 214, .35); }
.combo-title { font-size: 17px; margin: 6px 0 4px; }
.atom-pills { display: flex; flex-wrap: wrap; gap: 7px; margin: 13px 0; }
.atom-pill { display: inline-flex; align-items: center; gap: 6px; padding: 5.5px 12px; font-size: 12px; font-weight: 600; border-radius: 99px; border: 1px solid rgba(69, 214, 255, .3); background: var(--cyan-soft); color: var(--cyan); opacity: 0; animation: fact-in .45s var(--ease) forwards; }
.atom-pill.core-atom { border-color: rgba(240, 194, 100, .4); background: var(--gold-soft); color: var(--gold); }
.atom-pill.sub-atom { color: var(--text-2); background: var(--panel-2); border-color: var(--line); }
.atom-pill .ap-line { font-family: var(--mono); font-size: 9.5px; opacity: .7; }
.combo-metrics { display: grid; grid-template-columns: repeat(4, 1fr); gap: 9px; margin: 15px 0; }
.cm { padding: 10px 12px; border-radius: 10px; background: var(--panel-2); border: 1px solid var(--line); }
.cm label { display: block; font-size: 10px; color: var(--text-3); letter-spacing: .06em; margin-bottom: 3px; }
.cm b { font-size: 15px; font-variant-numeric: tabular-nums; }
.evidence-block { border-top: 1px dashed var(--line-strong); margin-top: 14px; padding-top: 13px; }
.evidence-block h5 { font-size: 11.5px; letter-spacing: .12em; color: var(--text-3); margin-bottom: 9px; }
.ev-item { display: flex; gap: 9px; font-size: 12px; color: var(--text-2); padding: 4.5px 0; align-items: baseline; }
.ev-item .no { font-family: var(--mono); font-size: 10px; color: var(--gold); flex-shrink: 0; }

.alert-block { border-radius: var(--r-md); padding: 17px 19px; border: 1px solid rgba(255, 107, 129, .35); background: linear-gradient(140deg, var(--bad-soft), transparent 65%); display: flex; gap: 13px; }
.alert-block.warn { border-color: rgba(255, 180, 84, .35); background: linear-gradient(140deg, var(--warn-soft), transparent 65%); }
.alert-block .a-ico { font-size: 19px; line-height: 1.3; }
.alert-block b { display: block; font-size: 13.5px; margin-bottom: 3px; }
.alert-block span { font-size: 12.5px; color: var(--text-2); }

/* ============ 研判单（正式文档） ============ */
.paper { position: relative; background: var(--paper-bg); color: var(--paper-text); border-radius: 14px; padding: 44px 48px; box-shadow: var(--shadow-2), 0 0 0 1px rgba(20, 30, 60, .06); max-width: 920px; margin: 0 auto; }
.paper::before { content: ""; position: absolute; top: 0; left: 0; right: 0; height: 5px; border-radius: 14px 14px 0 0; background: linear-gradient(90deg, #c89b3c, #f0c264, #c89b3c); }
.paper-head { display: flex; justify-content: space-between; align-items: flex-end; padding-bottom: 18px; border-bottom: 2px solid var(--paper-text); margin-bottom: 8px; }
.paper-head h2 { font-size: 23px; letter-spacing: .3em; font-weight: 700; }
.paper-no { font-size: 11px; color: var(--paper-text-2); text-align: right; line-height: 1.8; font-family: var(--mono); }
.paper-meta { display: flex; gap: 26px; font-size: 11.5px; color: var(--paper-text-2); padding: 10px 0; border-bottom: 1px solid var(--paper-line); flex-wrap: wrap; }
.paper-meta b { color: var(--paper-text); }
.paper-sec { margin-top: 22px; }
.paper-sec > h4 { font-size: 14px; display: flex; align-items: center; gap: 10px; margin-bottom: 11px; letter-spacing: .08em; }
.paper-sec > h4::before { content: attr(data-n); display: grid; place-items: center; width: 23px; height: 23px; border-radius: 7px; font-size: 11px; background: linear-gradient(135deg, #f0c264, #d99a34); color: #fff; flex-shrink: 0; }
.paper-sec p { font-size: 13px; line-height: 1.85; color: #333c52; }
.paper-tbl { width: 100%; border-collapse: collapse; font-size: 12.5px; }
.paper-tbl th { background: #f2f4fa; border: 1px solid var(--paper-line); padding: 8.5px 12px; font-size: 11.5px; color: #4a5468; text-align: left; white-space: nowrap; }
.paper-tbl td { border: 1px solid var(--paper-line); padding: 8.5px 12px; color: #26304a; vertical-align: top; }
.paper-tbl .hl-bad { color: #c23a4e; background: #fdf1f2; }
.paper-tbl .hl-warn { color: #a8680c; background: #fdf7ea; }
.paper-tbl .hl-ok { color: #15754a; background: #eefaf3; }
.paper-concl { background: #f8f5ec; border: 1px solid #e8d9ae; border-left: 4px solid #d9ab44; border-radius: 8px; padding: 15px 18px; font-size: 13.5px; line-height: 1.9; }
.paper-foot { margin-top: 30px; padding-top: 15px; border-top: 1px solid var(--paper-line); display: flex; justify-content: space-between; font-size: 10.5px; color: var(--paper-text-2); font-family: var(--mono); flex-wrap: wrap; gap: 8px; }

/* 准备清单 */
.check-list { display: flex; flex-direction: column; gap: 10px; }
.check-item { display: flex; gap: 14px; align-items: flex-start; padding: 15px 17px; border-radius: var(--r-sm); border: 1px solid var(--line); background: var(--panel-2); transition: all .4s var(--ease); }
.check-item.done { border-color: rgba(61, 220, 151, .35); background: linear-gradient(120deg, var(--ok-soft), transparent 60%), var(--panel-2); }
.ck-box { width: 22px; height: 22px; border-radius: 7px; border: 1.5px solid var(--line-strong); display: grid; place-items: center; flex-shrink: 0; margin-top: 1px; color: transparent; transition: all .3s; font-size: 12px; }
.check-item.done .ck-box { background: var(--ok); border-color: var(--ok); color: #04120b; box-shadow: 0 0 14px rgba(61, 220, 151, .45); }
.ck-body b { display: block; font-size: 13.5px; }
.ck-body .ck-sub { font-size: 12px; color: var(--text-2); margin-top: 2px; }
.ck-meta { margin-left: auto; flex-shrink: 0; }

/* ============ 企业入口 ============ */
.upload-zone { border: 1.5px dashed var(--line-strong); border-radius: var(--r-md); padding: 36px 24px; text-align: center; transition: all .35s var(--ease); cursor: pointer; background: var(--panel-2); }
.upload-zone:hover, .upload-zone.drag { border-color: rgba(240, 194, 100, .55); background: linear-gradient(160deg, var(--gold-soft), transparent 60%), var(--panel-2); box-shadow: 0 0 0 4px var(--gold-soft); }
.upload-zone .uz-ico { font-size: 34px; margin-bottom: 10px; animation: floaty 4s ease-in-out infinite; }
.upload-zone b { display: block; font-size: 14.5px; }
.upload-zone span { font-size: 12px; color: var(--text-3); }
.mat-list { display: flex; flex-direction: column; gap: 10px; }
.mat-row { display: grid; grid-template-columns: 34px 1fr auto auto; gap: 14px; align-items: center; padding: 14px 16px; border-radius: var(--r-sm); border: 1px solid var(--line); background: var(--panel-2); transition: all .35s var(--ease); }
.mat-row .m-ico { width: 34px; height: 34px; border-radius: 10px; display: grid; place-items: center; font-size: 16px; background: var(--panel); border: 1px solid var(--line); }
.mat-row b { font-size: 13.5px; display: block; }
.mat-row .m-sub { font-size: 11.5px; color: var(--text-3); font-family: var(--mono); }
.mat-row.need { border-color: rgba(255, 180, 84, .35); background: linear-gradient(120deg, var(--warn-soft), transparent 55%), var(--panel-2); }
.prog-bar { height: 5px; border-radius: 5px; background: var(--line); overflow: hidden; min-width: 90px; }
.prog-bar i { display: block; height: 100%; background: linear-gradient(90deg, var(--cyan), var(--blue)); border-radius: 5px; transition: width .3s linear; box-shadow: 0 0 10px rgba(69, 214, 255, .5); }
.prog-bar.gold i { background: linear-gradient(90deg, var(--gold), var(--gold-2)); box-shadow: 0 0 10px rgba(240, 194, 100, .5); }

/* ============ 后台 ============ */
.lib-head { display: flex; align-items: center; justify-content: space-between; gap: 14px; flex-wrap: wrap; margin-bottom: 16px; }
.cat-cards { display: grid; grid-template-columns: repeat(6, 1fr); gap: 12px; margin-bottom: 20px; }
.cat-card { padding: 16px 15px; border-radius: var(--r-md); border: 1px solid var(--line); background: var(--panel); cursor: pointer; transition: all .4s var(--ease); position: relative; overflow: hidden; text-align: left; color: var(--text-1); }
.cat-card::after { content: ""; position: absolute; bottom: 0; left: 0; right: 0; height: 2.5px; background: linear-gradient(90deg, var(--gold), transparent); transform: scaleX(0); transform-origin: left; transition: transform .45s var(--ease); }
.cat-card:hover, .cat-card.active { border-color: rgba(240, 194, 100, .4); transform: translateY(-3px); }
.cat-card.active::after { transform: scaleX(1); }
.cat-card b { display: block; font-size: 13.5px; margin-bottom: 2px; }
.cat-card .cnt { font-size: 21px; font-weight: 700; font-variant-numeric: tabular-nums; color: var(--gold); }
.cat-card span { font-size: 10.5px; color: var(--text-3); }
.atom-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 13px; }
.atom-card { padding: 16px; border-radius: var(--r-md); border: 1px solid var(--line); background: var(--panel-2); transition: all .4s var(--ease); cursor: pointer; }
.atom-card:hover { transform: translateY(-3px); border-color: rgba(69, 214, 255, .4); box-shadow: 0 12px 34px rgba(69, 214, 255, .08); }
.atom-card .a-line { font-size: 10px; font-family: var(--mono); color: var(--cyan); letter-spacing: .06em; margin-bottom: 6px; }
.atom-card b { font-size: 14px; display: block; margin-bottom: 7px; }
.atom-card .a-attrs { display: flex; flex-wrap: wrap; gap: 5px; }
.atom-card .a-attrs .chip { font-size: 9.5px; padding: 2px 8px; }

/* 版本时间线 */
.ver-tl { position: relative; padding-left: 26px; }
.ver-tl::before { content: ""; position: absolute; left: 7px; top: 8px; bottom: 8px; width: 2px; background: linear-gradient(180deg, var(--gold), var(--line)); border-radius: 2px; }
.ver-item { position: relative; padding: 0 0 22px 18px; }
.ver-item::before { content: ""; position: absolute; left: -26px; top: 6px; width: 16px; height: 16px; border-radius: 50%; border: 2.5px solid var(--gold); background: var(--bg-0); box-shadow: 0 0 12px rgba(240, 194, 100, .4); }
.ver-item.current::before { background: var(--gold); }
.ver-item b { font-size: 14px; }
.ver-item .v-date { font-size: 11px; color: var(--text-3); font-family: var(--mono); margin-left: 9px; }
.ver-item p { font-size: 12.5px; color: var(--text-2); margin-top: 4px; }

/* ============ 复核/审计 ============ */
.ledger-bar { display: grid; grid-template-columns: 72px 1fr 130px 90px; gap: 4px; align-items: center; margin-bottom: 6px; }
.ledger-track { height: 12px; border-radius: 7px; background: var(--line); overflow: hidden; position: relative; }
.ledger-fill { position: absolute; inset: 0 auto 0 0; border-radius: 7px; background: linear-gradient(90deg, var(--cyan), var(--blue)); transition: width 1s var(--ease); }
.ledger-fill.over { background: repeating-linear-gradient(135deg, var(--bad) 0 7px, #d94a5e 7px 14px); box-shadow: 0 0 14px rgba(255, 107, 129, .5); }

.chain-tl { position: relative; padding-left: 34px; }
.chain-tl::before { content: ""; position: absolute; left: 10px; top: 10px; bottom: 10px; width: 2px; background: linear-gradient(180deg, var(--cyan), var(--gold), var(--ok)); border-radius: 2px; }
.chain-node { position: relative; padding-bottom: 24px; }
.chain-node::before { content: ""; position: absolute; left: -34px; top: 4px; width: 22px; height: 22px; border-radius: 50%; display: grid; place-items: center; font-size: 10px; border: 2px solid var(--cyan); background: var(--bg-0); color: var(--cyan); z-index: 1; }
.chain-node.cn-fact::before { content: "事"; border-color: var(--cyan); color: var(--cyan); }
.chain-node.cn-rule::before { content: "规"; border-color: var(--blue); color: var(--blue); }
.chain-node.cn-atom::before { content: "原"; border-color: var(--gold); color: var(--gold); }
.chain-node.cn-cons::before { content: "约"; border-color: var(--violet); color: var(--violet); }
.chain-node.cn-concl::before { content: "结"; border-color: var(--ok); color: var(--ok); }
.chain-node h5 { font-size: 13.5px; display: flex; gap: 9px; align-items: center; flex-wrap: wrap; }
.chain-node .cn-body { margin-top: 7px; border-radius: var(--r-sm); border: 1px solid var(--line); background: var(--panel-2); padding: 12px 15px; font-size: 12.5px; color: var(--text-2); }
.chain-node .cn-body .code { margin-top: 8px; }

/* ============ 看板面板页 ============ */
.dash-wrap { display: flex; flex-direction: column; gap: 16px; }
.kpi-row { display: grid; grid-template-columns: repeat(4, 1fr); gap: 16px; }
.kpi { position: relative; padding: 20px 22px; border-radius: var(--r-lg); border: 1px solid var(--line); background: var(--panel); overflow: hidden; transition: transform .4s var(--ease), border-color .4s, box-shadow .4s; backdrop-filter: var(--glass-blur); -webkit-backdrop-filter: var(--glass-blur); }
.kpi::before { content: ""; position: absolute; top: 0; left: 0; right: 0; height: 2px; background: linear-gradient(90deg, transparent, var(--gold), transparent); opacity: .6; }
.kpi::after { content: ""; position: absolute; right: -30px; top: -30px; width: 110px; height: 110px; border-radius: 50%; background: radial-gradient(circle, var(--gold-soft), transparent 70%); }
.kpi:hover { transform: translateY(-3px); border-color: rgba(240, 194, 100, .3); box-shadow: var(--shadow-2); }
.kpi .kpi-top { display: flex; align-items: center; justify-content: space-between; }
.kpi label { font-size: 12px; color: var(--text-2); letter-spacing: .05em; }
.kpi .kpi-ico { width: 32px; height: 32px; border-radius: 10px; display: grid; place-items: center; font-size: 15px; background: var(--gold-soft); }
.kpi .v { font-size: 32px; font-weight: 700; margin-top: 10px; font-variant-numeric: tabular-nums; letter-spacing: -.02em; }
.kpi .v .unit { font-size: 14px; font-weight: 600; color: var(--text-2); }
.kpi .delta { font-size: 12px; margin-top: 4px; color: var(--text-3); }
.kpi .delta b { color: var(--ok); font-weight: 650; }
.kpi .delta b.down { color: var(--warn); }
.trend-spark { display: flex; align-items: flex-end; gap: 5px; height: 34px; margin-top: 12px; }
.trend-spark i { flex: 1; border-radius: 3px 3px 0 0; background: linear-gradient(180deg, var(--gold), rgba(240, 194, 100, .15)); transform-origin: bottom; animation: bar-up .8s var(--ease) both; }
@keyframes bar-up { from { transform: scaleY(0); } to { transform: scaleY(1); } }

.dash-main { display: grid; grid-template-columns: 1fr 1.1fr 1.15fr; gap: 16px; }
.dash-col { display: flex; flex-direction: column; gap: 16px; min-height: 0; }
.dash-todo { display: flex; flex-direction: column; gap: 10px; flex: 1; }
.todo-row { display: flex; align-items: center; gap: 12px; padding: 12px 14px; border-radius: var(--r-sm); border: 1px solid var(--line); background: var(--panel-2); cursor: pointer; transition: all .35s var(--ease); font-size: 13px; opacity: 0; animation: fact-in .5s var(--ease) forwards; }
.todo-row:hover { transform: translateX(4px); border-color: rgba(240, 194, 100, .4); }
.todo-row .tg { flex-shrink: 0; width: 44px; text-align: center; font-size: 10.5px; padding: 3px 0; border-radius: 7px; font-weight: 700; letter-spacing: .1em; }
.todo-row .tg.gold { background: var(--gold-soft); color: var(--gold); }
.todo-row .tg.bad { background: var(--bad-soft); color: var(--bad); }
.todo-row .tg.warn { background: var(--warn-soft); color: var(--warn); }
.todo-row .tg.cyan { background: var(--cyan-soft); color: var(--cyan); }
.todo-row .tx { flex: 1; color: var(--text-2); }
.todo-row .ar { color: var(--text-3); transition: transform .3s; }
.todo-row:hover .ar { transform: translateX(3px); color: var(--gold); }

.dn-chart { width: 100%; height: auto; display: block; overflow: visible; }
.dn-seg { opacity: 0; animation: dn-in .9s var(--ease) forwards; }
@keyframes dn-in { from { opacity: 0; } to { opacity: 1; } }
.dn-total { font-size: 34px; font-weight: 700; fill: var(--text-1); font-variant-numeric: tabular-nums; }
.dn-cap { font-size: 11px; fill: var(--text-3); letter-spacing: .1em; }
.dn-legend { display: flex; flex-direction: column; gap: 9px; margin-top: 6px; }
.dn-lg { display: flex; align-items: center; gap: 9px; font-size: 12.5px; color: var(--text-2); }
.dn-lg .dt { width: 10px; height: 10px; border-radius: 3px; flex-shrink: 0; }
.dn-lg b { margin-left: auto; color: var(--text-1); font-variant-numeric: tabular-nums; }

.mb-chart { width: 100%; height: auto; display: block; }
.mb-col { opacity: 0; transform: translateY(10px); animation: fact-in .6s var(--ease) forwards; }
.mb-bar { fill: url(#none); fill: var(--cyan); opacity: .75; }
.mb-v { font-size: 11px; fill: var(--text-2); font-weight: 600; }
.mb-l { font-size: 10.5px; fill: var(--text-3); }

.line-bars { display: flex; flex-direction: column; gap: 11px; }
.lb-row { display: grid; grid-template-columns: 108px 1fr 34px; gap: 11px; align-items: center; font-size: 12.5px; color: var(--text-2); opacity: 0; animation: fact-in .5s var(--ease) forwards; }
.lb-row .lb-track { height: 9px; border-radius: 5px; background: var(--line); overflow: hidden; }
.lb-row .lb-fill { height: 100%; border-radius: 5px; background: linear-gradient(90deg, var(--gold), var(--gold-2)); transform-origin: left; animation: fill-x 1s var(--ease) both; }
.lb-row b { text-align: right; color: var(--text-1); font-variant-numeric: tabular-nums; }
@keyframes fill-x { from { transform: scaleX(0); } to { transform: scaleX(1); } }

/* ============ SVG 图表 ============ */
.cf-chart, .tr-chart, .mk-chart { width: 100%; height: auto; display: block; overflow: visible; }
.cf-grid line { stroke: var(--line); stroke-width: 1; }
.cf-grid .gl-gap { stroke-dasharray: 3 5; }
.cf-zero { stroke: var(--line-strong); stroke-width: 1.5; }
.cf-bar { transform-box: fill-box; transform-origin: bottom; transform: scaleY(0); animation: bar-grow .7s var(--ease) forwards; }
rect.cf-in { fill: var(--cyan); opacity: .8; }
rect.cf-out { fill: var(--text-3); opacity: .42; }
@keyframes bar-grow { to { transform: scaleY(1); } }
.cf-line { fill: none; stroke: var(--gold); stroke-width: 2.6; stroke-linecap: round; stroke-linejoin: round; stroke-dasharray: 1; stroke-dashoffset: 1; animation: draw-line 1.3s .5s var(--ease) forwards; filter: drop-shadow(0 0 6px rgba(240, 194, 100, .5)); }
@keyframes draw-line { to { stroke-dashoffset: 0; } }
.cf-area { opacity: 0; animation: fade-in 1s 1s var(--ease) forwards; }
.cf-dot { fill: var(--bg-0); stroke: var(--gold); stroke-width: 2.2; opacity: 0; transform-box: fill-box; transform-origin: center; animation: dot-pop .45s var(--ease) forwards; }
@keyframes dot-pop { from { opacity: 0; transform: scale(0); } to { opacity: 1; transform: scale(1); } }
.cf-peak { opacity: 0; animation: fade-in .8s var(--ease) forwards; }
.pk-ring { fill: none; stroke: var(--bad); stroke-width: 1.6; animation: pk-pulse 2s ease-in-out infinite; transform-box: fill-box; transform-origin: center; }
.pk-core { fill: var(--bad); }
@keyframes pk-pulse { 0%, 100% { transform: scale(1); opacity: 1; } 50% { transform: scale(1.55); opacity: .4; } }
.pk-lb { font-size: 12px; fill: var(--bad); font-weight: 700; }
.cf-labels text, .cf-axis text { font-size: 11px; fill: var(--text-3); }
.cf-axis .ax-gap { fill: var(--bad); font-weight: 600; }
.tr-col { opacity: 0; transform: translateY(12px); animation: fact-in .7s var(--ease) forwards; }
.tr-v { font-size: 13px; fill: var(--text-1); font-weight: 700; font-variant-numeric: tabular-nums; }
.tr-l { font-size: 11.5px; fill: var(--text-3); }
.mk-row { opacity: 0; animation: fact-in .7s var(--ease) forwards; }
.mk-name { font-size: 13.5px; fill: var(--text-1); font-weight: 650; }
.mk-co { font-size: 11.5px; fill: var(--text-3); }
.mk-track { fill: var(--line); }
.mk-fill { fill: url(#mkGrad); transform-box: fill-box; transform-origin: left; transform: scaleX(0); animation: fill-x 1.1s .2s var(--ease) forwards; }
.mk-pct { font-size: 11.5px; fill: var(--text-2); font-variant-numeric: tabular-nums; }
.mk-pct-in { fill: #241703; font-weight: 700; }

/* ============ Toast / 模态 ============ */
.toast-wrap { position: fixed; top: 74px; right: 24px; z-index: 999; display: flex; flex-direction: column; gap: 10px; pointer-events: none; }
.toast { display: flex; align-items: center; gap: 11px; padding: 13px 19px; border-radius: 14px; background: var(--panel-2); border: 1px solid var(--line-strong); backdrop-filter: var(--glass-blur); -webkit-backdrop-filter: var(--glass-blur); box-shadow: var(--shadow-2); font-size: 13.5px; color: var(--text-1); animation: toast-in .5s var(--ease) both; max-width: 360px; }
.toast.out { animation: toast-out .4s var(--ease) both; }
@keyframes toast-in { from { opacity: 0; transform: translateX(30px) scale(.95); } to { opacity: 1; transform: none; } }
@keyframes toast-out { to { opacity: 0; transform: translateX(30px) scale(.95); } }
.toast .t-ico { width: 26px; height: 26px; border-radius: 9px; display: grid; place-items: center; flex-shrink: 0; font-size: 14px; }
.toast.ok .t-ico { background: var(--ok-soft); color: var(--ok); }
.toast.warn .t-ico { background: var(--warn-soft); color: var(--warn); }
.toast.bad .t-ico { background: var(--bad-soft); color: var(--bad); }
.toast.info .t-ico { background: var(--cyan-soft); color: var(--cyan); }

.modal-mask { position: fixed; inset: 0; z-index: 500; background: rgba(3, 6, 14, .62); backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px); display: grid; place-items: center; padding: 24px; animation: fade-in .3s var(--ease); }
.modal { width: min(576px, 94vw); max-height: 88vh; overflow-y: auto; border-radius: var(--r-lg); border: 1px solid var(--line-strong); background: var(--panel-solid); box-shadow: var(--shadow-2); animation: modal-in .45s var(--ease); }
@keyframes modal-in { from { opacity: 0; transform: translateY(26px) scale(.97); } to { opacity: 1; transform: none; } }
.modal-head { display: flex; justify-content: space-between; align-items: center; padding: 20px 26px; border-bottom: 1px solid var(--line); position: sticky; top: 0; background: var(--panel-solid); z-index: 2; }
.modal-head h3 { font-size: 17px; }
.modal-body { padding: 24px 26px; }
.modal-close { width: 34px; height: 34px; border-radius: 10px; border: 1px solid var(--line); background: transparent; color: var(--text-2); display: grid; place-items: center; transition: all .3s; }
.modal-close:hover { color: var(--bad); border-color: rgba(255, 107, 129, .4); }

/* ============ 滚动显现 ============ */
.reveal { opacity: 0; transform: translateY(26px); transition: opacity .8s var(--ease), transform .8s var(--ease); }
.reveal.in { opacity: 1; transform: none; }
.reveal[data-d="1"] { transition-delay: .08s; } .reveal[data-d="2"] { transition-delay: .16s; }
.reveal[data-d="3"] { transition-delay: .24s; } .reveal[data-d="4"] { transition-delay: .32s; }

/* ============ 打印 ============ */
#printMount { display: none; }
@media print {
  body > *:not(#printMount) { display: none !important; }
  body.printing { background: #fff; overflow: visible; }
  body.printing #printMount { display: block !important; }
  #printMount .paper { box-shadow: none; max-width: none; border-radius: 0; }
}

/* ============ 响应式 ============ */
@media (max-width: 1280px) {
  .g4, .kpi-row { grid-template-columns: repeat(2, 1fr); }
  .atom-grid { grid-template-columns: repeat(3, 1fr); }
  .cat-cards { grid-template-columns: repeat(3, 1fr); }
  .kv-grid { grid-template-columns: repeat(2, 1fr); }
  .dash-main { grid-template-columns: 1fr; }
}
@media (max-width: 1080px) {
  .sidebar { width: 74px; padding: 18px 10px; }
  .sidebar .side-label, .sidebar .side-title, .sidebar .side-foot, .sidebar .st-name { display: none; }
  .side-item { justify-content: center; padding: 12px 8px; }
  .wb-layout { grid-template-columns: 1fr; }
  .g3 { grid-template-columns: repeat(2, 1fr); }
  .g23, .g32 { grid-template-columns: 1fr; }
}
@media (max-width: 720px) {
  .content { padding: 18px 14px 40px; }
  .g2, .g3, .g4, .atom-grid, .cat-cards, .kpi-row { grid-template-columns: 1fr; }
  .paper { padding: 26px 20px; }
  .fact-row { grid-template-columns: 28px 1fr auto; }
  .fact-evi { display: none; }
  .combo-metrics { grid-template-columns: repeat(2, 1fr); }
  .map-viz { grid-template-columns: 1fr; }
  .map-mid { display: none; }
  .sidebar { display: none; }
  .st-sub { display: none; }
}

/* ============================================================
   v3 · 一屏看板（禁滚动，内容自适应视口）
   ============================================================ */
.content.fit-view { overflow: hidden; display: flex; flex-direction: column; }
.content.fit-view .content-inner {
  flex: 1; min-height: 0; display: flex; flex-direction: column;
  max-width: 1500px; margin: 0 auto; width: 100%;
}
.content.fit-view .page-head { flex-shrink: 0; padding-bottom: 14px; margin-bottom: 16px; }
.content.fit-view .page-head::after { display: none; }
.content.fit-view .page-title { font-size: 24px; }
.content.fit-view .page-sub { margin-top: 4px; }
.content.fit-view .view-body { flex: 1; min-height: 0; display: flex; flex-direction: column; }
.content.fit-view .dash-wrap { flex: 1; min-height: 0; gap: 14px; }
.content.fit-view .kpi-row { flex-shrink: 0; gap: 14px; }
.content.fit-view .kpi { padding: 15px 20px 13px; }
.content.fit-view .kpi .v { font-size: 27px; margin-top: 6px; }
.content.fit-view .kpi .delta { margin-top: 2px; }
.content.fit-view .dash-main { flex: 1; min-height: 0; gap: 14px; }
.content.fit-view .dash-col { min-height: 0; gap: 14px; }
.content.fit-view .dash-col .card { min-height: 0; overflow: hidden; }
.content.fit-view .dash-col .card[style*="flex:1"] { display: flex; flex-direction: column; }
.content.fit-view .dash-todo { overflow-y: auto; min-height: 0; }
.content.fit-view .todo-row { flex-shrink: 0; padding: 10px 13px; }
.content.fit-view #dashDonut { min-height: 0; }
.content.fit-view #dashDonut .dn-chart { max-width: 52%; margin: 0 auto; }
.content.fit-view #dashTrend { flex: 1; min-height: 0; }

/* v3.1 · 迷你柱（HTML 实现） */
.mbx { display: flex; align-items: stretch; height: 100%; min-height: 0; width: 100%; gap: 14px; padding: 2px 8px 0; }
.mbx-col { flex: 1; min-width: 0; min-height: 0; display: flex; flex-direction: column; align-items: center; justify-content: flex-end; gap: 5px; opacity: 0; animation: fact-in .6s var(--ease) forwards; }
.mbx-v { font-size: 14px; font-weight: 700; color: var(--text-1); font-variant-numeric: tabular-nums; line-height: 1; flex-shrink: 0; }
.mbx-track { width: 46%; max-width: 30px; flex: 1 1 0; min-height: 30px; display: flex; align-items: flex-end; border-radius: 7px; background: linear-gradient(180deg, var(--line), transparent 80%); overflow: hidden; }
.mbx-track i { display: block; width: 100%; border-radius: 7px 7px 3px 3px; background: linear-gradient(180deg, var(--cyan), rgba(69, 214, 255, .22)); box-shadow: 0 0 14px rgba(69, 214, 255, .35); transform-origin: bottom; animation: bar-up .8s var(--ease) both; }
.mbx-l { font-size: 11.5px; color: var(--text-3); white-space: nowrap; flex-shrink: 0; }
.content.fit-view .card-title { font-size: 14.5px; }

/* ============================================================
   v3 · 工作台任务列表 sticky 跟随
   ============================================================ */
.wb-layout > aside {
  position: sticky; top: 12px; z-index: 30;
  max-height: calc(100vh - 84px); overflow-y: auto;
  scrollbar-width: thin;
}

/* ============================================================
   v3 · 材料台账双列
   ============================================================ */
.mat-cols-2 { display: grid !important; grid-template-columns: 1fr 1fr; gap: 10px 12px !important; }
@media (max-width: 1080px) { .mat-cols-2 { grid-template-columns: 1fr; } }

/* ============================================================
   v3 · 引擎流水线光效不裁剪（宽屏去掉横向裁剪，预留呼吸光晕空间）
   ============================================================ */
.pipe-line { overflow: visible; padding-top: 34px; margin-top: 6px; }
@media (max-width: 980px) {
  .pipe-line { overflow-x: auto; padding-top: 26px; }
}

/* ============================================================
   v3 · 组合约束三列卡片
   ============================================================ */
.cons-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 14px; }
.cons-grid .cons-item .code { white-space: pre-wrap; word-break: break-word; }
.cons-grid .cons-item { margin-bottom: 0; display: flex; flex-direction: column; }
.cons-grid .cons-item .code { flex: 1; }
@media (max-width: 1280px) { .cons-grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 860px) { .cons-grid { grid-template-columns: 1fr; } }

/* ============================================================
   v3 · 后台草稿行
   ============================================================ */
.draft-chip { color: var(--violet); background: var(--violet-soft); border-color: rgba(183, 139, 255, .35); }
.draft-del { width: 22px; height: 22px; border-radius: 7px; border: 1px solid var(--line); background: transparent; color: var(--text-3); font-size: 11px; display: grid; place-items: center; transition: all .3s; flex-shrink: 0; }
.draft-del:hover { color: var(--bad); border-color: rgba(255, 107, 129, .4); background: var(--bad-soft); }

/* ============================================================
   v2.1 · Awwwards 级打磨层
   ============================================================ */

/* ---------- 品牌衬线与排版 ---------- */
:root { --font-brand: "Palatino", "Georgia", "Songti SC", "STSong", "Noto Serif SC", "SimSun", serif; }
.st-name, .login-brand .lb-title, .ls-title { font-family: var(--font-brand); letter-spacing: .14em; }

.content { padding: 28px 32px 60px; }
.content-inner { max-width: 1500px; }
.grid { gap: 20px; }
.sidebar { width: 236px; gap: 5px; }

.page-title { font-size: 28px; font-weight: 700; letter-spacing: -.02em; }
.page-sub { line-height: 1.75; max-width: 820px; }
.page-head { position: relative; padding-bottom: 18px; margin-bottom: 24px; }
.page-head::after { content: ""; position: absolute; left: 1px; bottom: 0; width: 132px; height: 2px; border-radius: 2px; background: linear-gradient(90deg, var(--gold), var(--gold-2) 55%, transparent); box-shadow: 0 2px 12px rgba(240, 194, 100, .35); }

/* ---------- 胶片噪点质感 ---------- */
body::after {
  content: ""; position: fixed; inset: 0; z-index: 3000; pointer-events: none; opacity: .02;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='160' height='160'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2' stitchTiles='stitch'/><feColorMatrix type='saturate' values='0'/></filter><rect width='160' height='160' filter='url(%23n)' opacity='0.6'/></svg>");
}
html[data-theme="light"] body::after { opacity: .028; }

/* ---------- 极光鼠标视差 ---------- */
.aurora { transition: translate 1.6s var(--ease); }
.aurora-a { translate: calc(var(--par-x, 0) * 36px) calc(var(--par-y, 0) * 26px); }
.aurora-b { translate: calc(var(--par-x, 0) * -28px) calc(var(--par-y, 0) * -20px); }
.aurora-c { translate: calc(var(--par-x, 0) * 20px) calc(var(--par-y, 0) * 15px); }

/* ---------- KPI / 大数字渐变 ---------- */
.kpi .v.num-gold, .big-num.num-gold { background: linear-gradient(115deg, #ffe9bd 0%, #f0c264 48%, #e08f2c 100%); -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; color: transparent; }
.kpi .v.num-cyan, .big-num.num-cyan { background: linear-gradient(115deg, #c5f1ff, #45d6ff 52%, #3b8dff); -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; color: transparent; }
.kpi .v .unit, .big-num .unit { -webkit-text-fill-color: var(--text-2); }

/* ---------- 推荐组合 · 流光边框 ---------- */
@property --rot { syntax: '<angle>'; initial-value: 0deg; inherits: false; }
.combo-card.recommend::after {
  content: ""; position: absolute; inset: -1px; border-radius: inherit; padding: 1.5px;
  background: conic-gradient(from var(--rot, 0deg), rgba(240, 194, 100, 0) 0deg, rgba(240, 194, 100, .65) 40deg, rgba(69, 214, 255, .35) 80deg, rgba(240, 194, 100, 0) 130deg);
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite: xor; mask-composite: exclude;
  pointer-events: none; animation: rot 7s linear infinite;
}
@keyframes rot { to { --rot: 360deg; } }

/* ---------- 微交互 ---------- */
:focus-visible { outline: 2px solid rgba(240, 194, 100, .75); outline-offset: 2px; border-radius: 8px; }
.icon-btn:active { transform: scale(.9); }
.icon-btn.toggling svg { animation: theme-flip .5s var(--ease); }
@keyframes theme-flip { 0% { transform: rotate(0) scale(1); } 50% { transform: rotate(160deg) scale(.55); } 100% { transform: rotate(360deg) scale(1); } }
.side-item .si-ico { transition: transform .3s var(--ease); }
.side-item:hover .si-ico { transform: scale(1.18); }
.card.hoverable:hover { box-shadow: var(--shadow-2), 0 0 34px rgba(240, 194, 100, .07); }
.atom-card:hover b, .cat-card:hover b { color: var(--gold); transition: color .3s; }
.chip-mono { transition: color .25s, border-color .25s, box-shadow .25s; }
.chip-mono:hover { color: var(--cyan); border-color: rgba(69, 214, 255, .4); box-shadow: 0 0 0 3px var(--cyan-soft); }

/* ---------- 空状态浮动 ---------- */
.card > div[style*="font-size:40px"] { animation: floaty 4.5s ease-in-out infinite; }

/* ---------- 视图入场编排（JS 置 delay） ---------- */
.view-body > * { will-change: transform, opacity; }

/* ---------- 移动端抽屉导航 ---------- */
.icon-btn.nav-toggle { display: none; }
@media (max-width: 720px) {
  .icon-btn.nav-toggle { display: grid; }
  .role-chip { display: none; }
  .sidebar {
    display: flex !important;
    position: fixed; z-index: 260; top: 60px; bottom: 0; left: 0; width: 246px;
    transform: translateX(-104%); transition: transform .45s var(--ease), background .5s var(--ease);
    background: var(--panel-solid); box-shadow: none;
  }
  .shell.nav-open .sidebar { transform: none; box-shadow: var(--shadow-2); }
  .shell.nav-open::before { content: ""; position: fixed; inset: 60px 0 0 0; z-index: 250; background: rgba(3, 6, 14, .5); backdrop-filter: blur(3px); -webkit-backdrop-filter: blur(3px); animation: fade-in .3s var(--ease); }
  .sidebar .side-label { display: inline; }
  .side-item { justify-content: flex-start; padding: 12px 14px; }
  .stage-tabs { overflow-x: auto; scrollbar-width: none; flex-wrap: nowrap; }
  .stage-tabs::-webkit-scrollbar { display: none; }
  .content { padding: 20px 16px 48px; }
  .st-sub { display: none; }
  .print-area { overflow-x: auto; }
}

/* ---------- 中屏微调 ---------- */
@media (max-width: 1080px) {
  .content { padding: 22px 20px 48px; }
}
@media (min-width: 1600px) {
  .content-inner { max-width: 1560px; }
}

/* ============================================================
   v4 · 审计日志筛选条
   ============================================================ */
.log-filter {
  display: flex; gap: 14px; align-items: flex-end; flex-wrap: wrap;
  padding: 13px 15px; margin-bottom: 14px;
  border: 1px solid var(--line); border-radius: var(--r-sm);
  background: linear-gradient(120deg, var(--cyan-soft), transparent 60%), var(--panel-2);
}
.log-filter .lf-item { display: flex; flex-direction: column; gap: 5px; min-width: 168px; }
.log-filter .lf-item label { font-size: 11px; color: var(--text-3); font-weight: 600; letter-spacing: .06em; }
.log-filter .select { padding: 8px 32px 8px 12px; font-size: 13px; }

/* ============================================================
   v4 · 收件箱通知中心
   ============================================================ */
.notif-btn { position: relative; }
.notif-badge {
  position: absolute; top: -5px; right: -5px; min-width: 17px; height: 17px;
  border-radius: 9px; padding: 0 4px;
  background: linear-gradient(135deg, #ff8a9c, #ff5f76); color: #fff;
  font-size: 10px; font-weight: 700; line-height: 17px; text-align: center;
  box-shadow: 0 2px 8px rgba(255, 95, 118, .5);
  animation: badge-in .4s var(--ease);
}
@keyframes badge-in { from { transform: scale(0); } to { transform: scale(1); } }

.notif-panel {
  position: fixed; z-index: 600; width: 372px; max-width: calc(100vw - 20px);
  max-height: min(520px, 72vh); display: flex; flex-direction: column;
  border-radius: 16px; border: 1px solid var(--line-strong);
  background: var(--panel-solid); box-shadow: var(--shadow-2);
  overflow: hidden; animation: modal-in .35s var(--ease);
}
.np-head { display: flex; align-items: center; gap: 10px; padding: 14px 16px; border-bottom: 1px solid var(--line); }
.np-head b { font-size: 14.5px; }
.np-head .chip { margin-left: auto; }
.np-readall { border: none; background: transparent; color: var(--gold); font-size: 12px; cursor: pointer; font-weight: 600; padding: 4px 6px; border-radius: 7px; transition: background .25s; }
.np-readall:hover { background: var(--gold-soft); }
.np-list { overflow-y: auto; flex: 1; }
.np-item {
  display: flex; gap: 11px; align-items: flex-start;
  padding: 12px 16px; cursor: pointer; transition: background .25s;
  border-bottom: 1px solid var(--line);
}
.np-item:last-child { border-bottom: none; }
.np-item:hover { background: var(--gold-soft); }
.np-item .np-ico { width: 34px; height: 34px; border-radius: 10px; flex-shrink: 0; display: grid; place-items: center; font-size: 16px; background: var(--panel-2); border: 1px solid var(--line); }
.np-item .np-body { flex: 1; min-width: 0; }
.np-item .np-body b { display: block; font-size: 13px; color: var(--text-1); }
.np-item .np-body span { display: block; font-size: 11.5px; color: var(--text-2); margin-top: 2px; line-height: 1.5; }
.np-item .np-time { font-size: 10.5px; color: var(--text-3); font-family: var(--mono); flex-shrink: 0; margin-top: 2px; }
.np-item:not(.read) .np-body b::after { content: ""; display: inline-block; width: 6px; height: 6px; border-radius: 50%; background: var(--bad); margin-left: 6px; vertical-align: 2px; box-shadow: 0 0 6px rgba(255, 107, 129, .7); }
.np-item.read { opacity: .58; }
.np-empty { padding: 40px 20px; text-align: center; color: var(--text-3); font-size: 13px; }

/* ============================================================
   v4 · 登录页角色切换动效（0.6s）
   ============================================================ */
.role-strip {
  display: flex; align-items: center; gap: 9px;
  padding: 7px 12px; margin-bottom: 14px;
  border-radius: 11px; border: 1px solid rgba(240, 194, 100, .3);
  background: linear-gradient(120deg, var(--gold-soft), transparent 70%), var(--panel-2);
}
.role-strip .rs-ico { font-size: 16px; }
.role-strip .rs-txt { flex: 1; min-width: 0; }
.role-strip .rs-txt b { display: block; font-size: 12px; color: var(--gold); }
.role-strip .rs-txt span { display: block; font-size: 10px; color: var(--text-3); margin-top: 1px; }
.role-strip .rs-dot { width: 7px; height: 7px; border-radius: 50%; background: var(--gold); box-shadow: 0 0 10px var(--gold); animation: pulse 2s ease-in-out infinite; }
.role-strip.strip-anim { animation: strip-in .6s var(--ease); }
@keyframes strip-in {
  0% { opacity: 0; transform: translateX(-14px); border-color: transparent; }
  100% { opacity: 1; transform: none; }
}
.login-roles.roles-switch { animation: roles-nudge .6s var(--ease); }
@keyframes roles-nudge { 0%, 100% { transform: none; } 35% { transform: scale(.985); } 70% { transform: scale(1.002); } }

/* ============================================================
   v4 · 浅色主题强调色加深（保证文字/图形对比度）
   ============================================================ */
html[data-theme="light"] {
  --gold: #b8831c;
  --gold-2: #9c6d10;
  --cyan: #0e86b8;
  --blue: #3a6cd8;
  --ok: #1a9a68;
  --bad: #d94a5e;
  --warn: #bd7c14;
  --violet: #7d55d6;
}
html[data-theme="light"] .brand-text b,
html[data-theme="light"] .st-name { background: linear-gradient(100deg, #b8831c, #8a5e0c); -webkit-background-clip: text; background-clip: text; }
html[data-theme="light"] .btn-primary { background: linear-gradient(135deg, #f2c25e, #dd8f2a); color: #241703; }
html[data-theme="light"] .login-btn { background: linear-gradient(135deg, #f2c25e, #dd8f2a); }
html[data-theme="light"] .stage-tab.active .n { background: linear-gradient(135deg, #f2c25e, #dd8f2a); }
html[data-theme="light"] .side-item.active { color: #8a5e0c; }
html[data-theme="light"] .page-kicker { color: #8a5e0c; }

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: .001s !important; transition-duration: .001s !important; }
}