:root {
  --primary: #0e7490;
  --primary-dark: #0c5e76;
  --primary-light: #e6f6fa;
  --accent: #0284c7;
  --accent-2: #ea580c;   /* 二级对比色（与 --accent 互补的鲜亮色，用于「部门工作区」等二级区块） */
  --cyan: #22d3ee;
  --navy: #0b2540;
  --navy-2: #123a55;
  --sidebar-bg: #0b3a47;
  --bg: #f4f7fb;
  --card: #ffffff;
  --text: #0f172a;
  --text-soft: #64748b;
  --border: #e4eaf2;
  --warn: #f59e0b;
  --warn-bg: #fef3c7;
  --ok: #16a34a;
  --ok-bg: #dcfce7;
  --bad: #dc2626;
  --bad-bg: #fee2e2;
  --shadow: 0 1px 2px rgba(16,42,72,.06), 0 6px 18px rgba(16,42,72,.06);
  --shadow-lg: 0 10px 34px rgba(16,42,72,.12);
  --radius: 14px;
  --grad-tech: linear-gradient(135deg, #0e7490 0%, #0284c7 55%, #22d3ee 100%);
  /* 图表语义色（随皮肤覆盖）：默认沿用原蓝主题语义 */
  --c-ok: #16a34a;          /* 已批准 */
  --c-pending: #f59e0b;     /* 待审批 */
  --c-bad: #dc2626;         /* 已驳回 */
  --c-muted: #94a3b8;       /* 草稿/其他 */
}
* { box-sizing: border-box; margin: 0; padding: 0; }
body {
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", "PingFang SC", "Microsoft YaHei", sans-serif;
  background: var(--bg); color: var(--text); font-size: 15px; line-height: 1.55;
}
a { color: inherit; text-decoration: none; }
button { font-family: inherit; cursor: pointer; }

/* ========== 登录页 — 高清地球背景 + 半透明毛玻璃卡片 ========== */
.login-wrap {
  position: relative; min-height: 100vh; overflow: hidden;
  display: flex; align-items: center; justify-content: center;
  background: url('/img/login-bg.jpg') no-repeat center center / cover;
  background-color: #040c18;
}

/* 半透明毛玻璃登录卡片 — 70%不透明（30%透明） */
.login-card {
  position:relative; z-index:10;
  background: rgba(20,60,110,.70);
  border-radius: 16px; padding: 36px 32px 28px; width: 100%; max-width: 360px;
  border: 2px solid rgba(140,200,255,.75);
  box-shadow:
    0 8px 32px rgba(0,10,30,.4),
    0 0 1px rgba(180,220,255,.5),
    inset 0 1px 0 rgba(255,255,255,.12);
}
.login-logo { display:flex; flex-direction:column; align-items:center; justify-content:center; margin-bottom:24px; gap:4px; }
.login-logo .mark { display:none; }
.brand-logo-img { display:none; }
.login-logo h1 {
  font-size: 36px; font-weight:700; letter-spacing: 14px;
  line-height:1.2;
  background: linear-gradient(100deg, #cfeaff 35%, #ffffff 50%, #cfeaff 65%);
  background-size:220% 100%;
  -webkit-background-clip:text; background-clip:text;
  -webkit-text-fill-color:transparent; color:transparent;
  filter: drop-shadow(0 0 8px rgba(120,200,255,.7)) drop-shadow(0 0 18px rgba(80,170,240,.45));
  animation: titleShine 5s linear infinite;
}
@keyframes titleShine {
  from { background-position:220% 0; }
  to   { background-position:-220% 0; }
}
.login-subtitle {
  font-size: 14px; font-weight: 400; letter-spacing: 3px;
  color: rgba(180,220,255,.80);
  text-shadow: 0 0 12px rgba(100,180,255,.4);
  margin-top: 6px;
}

/* 标签 + 输入框 */
.login-card label {
  display:block; font-size:14px; color: #d0e8ff; margin:14px 0 5px;
  letter-spacing: 2px;
}
.login-card input, .login-card select {
  width:100%; padding:13px 16px; border:1.5px solid rgba(140,200,255,.55); border-radius:10px;
  font-size:15px; background: rgba(15,45,85,.55); color:#ffffff; transition:.2s;
}
.login-card input::placeholder { color: rgba(180,215,255,.7); }
.login-card input:focus, .login-card select:focus {
  outline:none; border-color: rgba(130,220,255,.9);
  background: rgba(20,55,100,.65);
  box-shadow: 0 0 14px rgba(80,180,255,.3);
}

/* 密码切换 */
.pwd-wrap { position:relative; }
.pwd-wrap input { padding-right:42px; }
.pwd-toggle {
  position:absolute; right:8px; top:50%; transform:translateY(-50%);
  border:none; background:transparent; cursor:pointer; font-size:17px; line-height:1;
  color: rgba(140,190,240,.5); padding:4px; border-radius:8px;
}
.pwd-toggle:hover { background: rgba(40,120,200,.18); color: rgba(170,215,255,.8); }

/* 按钮 */
.btn {
  border:none; border-radius:10px; padding:13px 18px; font-size:16px; font-weight:600;
  transition:.2s; display:inline-flex; align-items:center; gap:6px; letter-spacing: 4px;
}
.btn.block { width:100%; justify-content:center; margin-top:20px; }
.login-card .btn.block {
  background: linear-gradient(135deg, rgba(40,120,200,.85) 0%, rgba(60,170,245,.75) 50%, rgba(80,200,255,.65) 100%);
  color: #fff; border: 1px solid rgba(160,230,255,.5);
  text-shadow: 0 1px 3px rgba(0,0,0,.25);
}
.login-card .btn.block:hover {
  background: linear-gradient(135deg, rgba(60,155,235,.82) 0%, rgba(90,200,260,.72) 100%);
  transform: translateY(-1px);
}
.btn.ghost { background:#f0f6fc; color:#1a3a5c; border:1px solid #b8d4ed; }
.btn.ghost:hover { background:#e0ecf8; color:#0d2847; }
.btn.sm { padding:7px 12px; font-size:13px; }
.btn.danger { background: var(--bad); }
.btn.ok { background: var(--ok); }
.btn.warn { background: var(--warn); color: #1f1400; border-color: var(--warn); }
.btn.warn:hover { filter: brightness(1.04); }
.btn.xs { padding: 5px 10px; font-size: 12px; }

/* 验证码 */
.captcha-row { display:flex; gap:8px; align-items:stretch; margin-top:4px; }
.captcha-row input { flex:1; min-width:0; }
.captcha-box {
  width:100px; flex-shrink:0; display:flex; align-items:center; justify-content:center;
  font-size:22px; font-weight:800; font-style:italic; letter-spacing:5px;
  color: rgba(110,210,255,.85); background: rgba(20,60,100,.25);
  border:1px solid rgba(100,190,255,.28); border-radius:10px; cursor:pointer; user-select:none;
  font-family:'Courier New',monospace; text-decoration:line-through;
  text-decoration-color: rgba(80,180,255,.25);
}
.captcha-box:active { transform:scale(.97); }
.captcha-refresh {
  flex-shrink:0; width:38px; border:1px solid rgba(100,190,255,.28); background: rgba(20,60,100,.22);
  border-radius:10px; cursor:pointer; font-size:17px; color: rgba(110,210,255,.7);
}
.captcha-refresh:hover { background: rgba(25,80,140,.3); color: rgba(170,220,255,.9); }

/* 版权 */
.login-copy {
  margin-top:14px; text-align:center; font-size:11px;
  color: rgba(140,190,235,.35); line-height:1.5; letter-spacing: .5px;
}

/* 调试账号面板 */
.debug-acct-panel { margin-top:12px; border:1px dashed rgba(100,190,255,.2); border-radius:10px; overflow:hidden; }

/* ========== 登录页动效（深空科技感 · 低强度） ========== */
/* 星点层 */
.login-stars { position:absolute; inset:0; z-index:1; pointer-events:none; overflow:hidden; }
.login-stars .star {
  position:absolute; border-radius:50%;
  background:#bfe6ff; box-shadow:0 0 6px #8fd0ff;
  animation-name: starTwinkle; animation-timing-function: ease-in-out; animation-iteration-count: infinite;
}
@keyframes starTwinkle {
  0%,100% { opacity:.2; transform: scale(.7); }
  50%     { opacity:1;  transform: scale(1.3); }
}

/* 地球轨道环 + 卫星光点 */
.login-orbit {
  position:absolute; z-index:1; pointer-events:none;
  top:47%; left:50%;
  width:min(72vmin,660px); height:min(72vmin,660px);
  margin:-36vmin 0 0 -36vmin;
  border:1px solid rgba(120,200,255,.16);
  border-radius:50%;
  transform:translate(-50%,-50%);
  animation: orbitSpin 28s linear infinite;
}
.orbit-sat {
  position:absolute; top:-5px; left:50%;
  width:9px; height:9px; margin-left:-4.5px; border-radius:50%;
  background:#aee4ff; box-shadow:0 0 10px 3px rgba(120,210,255,.85);
}
@keyframes orbitSpin {
  from { transform:translate(-50%,-50%) rotate(0deg); }
  to   { transform:translate(-50%,-50%) rotate(360deg); }
}

/* 卡片呼吸浮动 */
.login-card { animation: cardFloat 7s ease-in-out infinite; }
@keyframes cardFloat {
  0%,100% { transform:translateY(0); }
  50%     { transform:translateY(-9px); }
}

/* 登录按钮 hover 流光 */
.login-card .btn.block { position:relative; overflow:hidden; }
.login-card .btn.block::before {
  content:''; position:absolute; top:0; left:-60%;
  width:50%; height:100%;
  background: linear-gradient(100deg, transparent, rgba(255,255,255,.5), transparent);
  transform: skewX(-20deg);
}
.login-card .btn.block:hover::before { animation: btnSweep .85s ease; }
@keyframes btnSweep { from { left:-60%; } to { left:120%; } }
* { box-sizing: border-box; margin: 0; padding: 0; }
body {
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", "PingFang SC", "Microsoft YaHei", sans-serif;
  background: var(--bg); color: var(--text); font-size: 15px; line-height: 1.55;
}
a { color: inherit; text-decoration: none; }
button { font-family: inherit; cursor: pointer; }

/* ========== 登录页 — 直接使用高清原图（含自带登录框） ========== */
.login-wrap {
  position: relative; min-height: 100vh; overflow: hidden;
  display: flex; align-items: center; justify-content: center;
  background: url('/img/login-bg.jpg') no-repeat center center / cover;
  background-color: #040c18;
}

.debug-acct-panel {
  margin-top:12px; border:1px dashed rgba(100,190,255,.2); border-radius:8px; overflow:hidden;
}
.debug-acct-head { padding:8px 12px; font-size:12px; color:rgba(160,210,250,.55); cursor:pointer; user-select:none; display:flex; align-items:center; gap:6px; background:rgba(10,35,65,.3); transition:.15s; }
.debug-acct-head:hover { background:rgba(18,55,95,.4); }
.debug-acct-arrow { font-size:10px; transition:.2s; }
.debug-acct-body { padding:8px 12px 10px; }
.debug-acct-group { margin-bottom:6px; }
.debug-acct-group:last-child { margin-bottom:0; }
.debug-acct-group b { font-size:11px; color:rgba(160,210,250,.45); display:block; margin-bottom:4px; }
.debug-acct-btn { display:inline-block; margin:2px 4px 2px 0; padding:4px 10px; border:1px solid rgba(100,190,255,.2); border-radius:8px; font-size:12px; background:rgba(10,35,65,.35); color:rgba(180,220,255,.7); cursor:pointer; transition:.15s; }
.debug-acct-btn:hover { background:rgba(25,80,140,.3); border-color:rgba(100,210,255,.4); color:#c8eeff; }
/* 多选勾选框（船舶/部门） */
.chk-tools { margin-bottom: 8px; display: flex; gap: 8px; }
.chk-group { display: flex; flex-wrap: wrap; gap: 10px; padding: 12px 14px; border: 1px solid var(--border); border-radius: 10px; background: #fff; }
.chk-group .chk { display: inline-flex; align-items: center; gap: 6px; padding: 7px 12px; border: 1px solid var(--border); border-radius: 8px; font-size: 13.5px; cursor: pointer; user-select: none; background: #fff; transition: .15s; }
.chk-group .chk:hover { border-color: var(--primary); }
.chk-group .chk input { width: 15px; height: 15px; accent-color: var(--primary); }
.chk-group .chk:has(input:checked) { border-color: var(--primary); background: var(--primary-light); color: var(--primary-dark); font-weight: 600; }
/* AI 智能分析面板 */
.ai-box { margin-top: 8px; border: 1px dashed var(--primary); border-radius: 10px; padding: 10px 12px; background: var(--primary-light); }
.ai-cap { font-size: 12px; color: var(--primary-dark); margin-bottom: 6px; }
.ai-sug { display: flex; align-items: flex-start; gap: 10px; justify-content: space-between; padding: 7px 0; border-bottom: 1px solid rgba(14,116,144,.15); font-size: 13px; line-height: 1.5; }
.ai-sug:last-child { border-bottom: none; }
.ai-sug span { flex: 1; }
.ai-loading { font-size: 13px; color: var(--primary-dark); }
.kb-tag { display:inline-block; font-size:11px; padding:1px 7px; border-radius:10px; background:rgba(14,116,144,.12); color:#0e7490; margin-right:4px; }
.kb-tag.warn { background:rgba(180,83,9,.14); color:#b45309; }
.kb-cell-sel { text-align:center; width:34px; }
.kb-cell-sel input[type=checkbox] { width:16px; height:16px; cursor:pointer; }
#kbSelAll { width:16px; height:16px; cursor:pointer; }
.ai-kb { padding:8px 0; border-bottom:1px dashed rgba(14,116,144,.2); font-size:12px; }
.ai-kb-head { display:flex; align-items:center; gap:6px; margin-bottom:3px; flex-wrap:wrap; }
.ai-kb-snip { color:var(--text-soft); line-height:1.55; margin-bottom:6px; white-space:pre-wrap; max-height:120px; overflow:auto; }
/* AI 分析结论摘要条 */
.ai-summary { font-size:12px; line-height:1.6; color:var(--primary-dark); background:rgba(14,116,144,.08); border-left:3px solid var(--primary); border-radius:6px; padding:8px 10px; margin-bottom:8px; }
/* AI 按键旁的「仅供参考」标注 + 知识库条款号高亮 */
.ai-note { font-size:11px; color:var(--text-soft); background:rgba(120,120,120,.1); border:1px solid rgba(120,120,120,.25); border-radius:10px; padding:1px 7px; white-space:nowrap; }
.kb-clause { display:inline-block; font-size:11px; font-weight:600; padding:1px 7px; border-radius:10px; background:rgba(180,83,9,.14); color:#b45309; margin-right:4px; }

.demo-box {
  margin-top: 18px; background: var(--primary-light); border-radius: 10px; padding: 12px 14px;
  font-size: 12.5px; color: var(--primary-dark);
}
.demo-box b { color: var(--primary-dark); }

/* ---------- 主框架 ---------- */
.shell { display: flex; min-height: 100vh; }
.sidebar {
  width: 232px; background: var(--sidebar-bg); color: #cbd5e1; flex-shrink: 0;
  display: flex; flex-direction: column; position: sticky; top: 0; height: 100vh;
}
.sidebar .brand {
  padding: 18px 20px; display: flex; align-items: center; gap: 10px; color: #fff;
  border-bottom: 1px solid rgba(255,255,255,.08);
}
.sidebar .brand .mark {
  width: 36px; height: 36px; border-radius: 9px; background: linear-gradient(135deg,#22d3ee,#0284c7);
  display: grid; place-items: center; font-weight: 700; color: #04343f;
}
.sidebar .brand .brand-logo-img { width: 36px; height: 36px; border-radius: 9px; object-fit: contain; }
.sidebar .brand h2 { font-size: 16px; }
.sidebar .brand span { font-size: 11px; color: #7dd3fc; }
.app-footer { margin-top: 24px; padding: 16px 8px 4px; text-align: center; font-size: 12px; color: var(--text-soft, #64748b); border-top: 1px solid var(--border, #e2e8f0); }
.nav { padding: 12px 10px; flex: 1; overflow-y: auto; }
.nav a {
  display: flex; align-items: center; gap: 11px; padding: 11px 14px; border-radius: 10px;
  margin-bottom: 4px; color: #cbd5e1; font-size: 14.5px; transition: .15s;
}
.nav a:hover { background: rgba(255,255,255,.07); color: #fff; }
.nav a.active { background: var(--primary); color: #fff; font-weight: 600; }
.nav a .ic { width: 20px; text-align: center; font-size: 16px; display: inline-flex; align-items: center; justify-content: center; flex-shrink: 0; }
.nav a .ic svg { display: block; vertical-align: middle; }
.sidebar .me {
  padding: 14px 18px; border-top: 1px solid rgba(255,255,255,.08); font-size: 13px; color: #94a3b8;
}
.sidebar .me b { color: #fff; display: block; font-size: 14px; }
.sidebar .side-ver { padding: 8px 18px 12px; font-size: 11px; color: rgba(148,163,184,.25); letter-spacing: .5px; text-align: center; }
.main { flex: 1; display: flex; flex-direction: column; min-width: 0; }
.topbar {
  background: #fff; border-bottom: 1px solid var(--border); padding: 15px 24px;
  display: flex; align-items: center; justify-content: space-between; position: sticky; top: 0; z-index: 5;
}
.topbar h3 { font-size: 18px; }
.topbar .sub { font-size: 12.5px; color: var(--text-soft); }
.topbar .right { display: flex; align-items: center; gap: 14px; }
.content { padding: 22px 24px; flex: 1; }

/* 移动端菜单按钮 */
.menu-btn { display: none; background: none; border: none; font-size: 22px; color: var(--primary); }

/* ---------- 卡片 / 网格 ---------- */
.grid { display: grid; gap: 16px; }
.grid.cols-2 { grid-template-columns: repeat(2,1fr); }
.grid.cols-3 { grid-template-columns: repeat(3,1fr); }
.grid.cols-4 { grid-template-columns: repeat(4,1fr); }
.card { background: var(--card); border-radius: var(--radius); padding: 18px; box-shadow: var(--shadow); }
.card h4 { font-size: 15px; margin-bottom: 6px; }
.card .big { font-size: 28px; font-weight: 700; color: var(--primary); }
.stat { display: flex; flex-direction: column; gap: 4px; }
.stat .label { font-size: 13px; color: var(--text-soft); }

/* 模块入口 */
.module-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(180px,1fr)); gap: 14px; }
.module-card {
  background: var(--card); border-radius: var(--radius); padding: 18px; box-shadow: var(--shadow);
  border: 1px solid var(--border); transition: .15s; cursor: pointer; display: flex; flex-direction: column; gap: 8px;
}
.module-card:hover { transform: translateY(-2px); border-color: var(--primary); box-shadow: 0 8px 22px rgba(14,116,144,.15); }
.module-card .mi { width: 40px; height: 40px; border-radius: 10px; background: var(--primary-light); display: flex; align-items: center; justify-content: center; color: var(--primary); margin-bottom: 8px; }
.module-card .mi svg { width: 22px; height: 22px; }
.module-card .mt { font-weight: 600; font-size: 15px; }
.module-card .md { font-size: 12.5px; color: var(--text-soft); }

/* ---------- 表格 ---------- */
.table { width: 100%; border-collapse: collapse; background: #fff; border-radius: var(--radius); overflow: hidden; box-shadow: var(--shadow); }
.table th, .table td { padding: 12px 14px; text-align: left; font-size: 14px; border-bottom: 1px solid var(--border); }
.table th { background: #f8fafc; color: var(--text-soft); font-weight: 600; font-size: 13px; }
.table tr:hover td { background: #f8fafc; }
.table .row-link { cursor: pointer; }
.table .row-link:hover td { background: var(--primary-light); }
/* 紧凑型列表表格 .tbl：列间距舒展，与 .table 视觉一致（避免使用浏览器默认无 padding 的紧凑样式） */
.tbl { width: 100%; border-collapse: separate; border-spacing: 0; background: #fff; border-radius: var(--radius); overflow: hidden; box-shadow: var(--shadow); border: 1px solid var(--border); }
.tbl th, .tbl td { padding: 14px 18px; text-align: left; font-size: 14px; border-bottom: 1px solid var(--border); vertical-align: middle; }
.tbl th { background: #f8fafc; color: var(--text-soft); font-weight: 600; font-size: 13px; letter-spacing: 0.2px; }
.tbl tbody tr:last-child td { border-bottom: none; }
.tbl tbody tr:hover td { background: var(--primary-light); }
.tbl .btn { margin-right: 6px; }
.tbl .btn:last-child { margin-right: 0; }
/* 审批/驳回展示块：用于展示「问题与纠正措施」「驳回原因」等只读长文本 */
.view-box { background: #f8fafc; border: 1px solid var(--border); border-radius: 8px; padding: 12px 14px; margin-bottom: 12px; line-height: 1.7; white-space: pre-wrap; word-break: break-word; font-size: 14px; color: var(--text); }
.view-box.empty-text { color: var(--text-soft); font-style: italic; }
.view-box.reject { background: #fef2f2; border-color: #fecaca; color: #991b1b; }
.view-meta { font-size: 12px; color: var(--text-soft); margin-top: 6px; }
.reject-area { margin-top: 12px; padding: 12px; border: 1px dashed #fca5a5; border-radius: 8px; background: #fff7f7; }
.reject-area[hidden] { display: none; }

/* 状态徽章 */
.badge { display: inline-block; padding: 3px 10px; border-radius: 999px; font-size: 12.5px; font-weight: 600; }
.badge.wait { background: var(--warn-bg); color: #b45309; }
.badge.ok { background: var(--ok-bg); color: #15803d; }
.badge.bad { background: var(--bad-bg); color: #b91c1c; }
.badge.draft { background: #e2e8f0; color: #475569; }
.badge.off { background: #eef0f3; color: #8a93a2; border: 1px solid #dfe3e8; }
tr.row-off { opacity: .58; }
.hist-round { margin-top: 10px; padding: 10px 12px; background: var(--bg-soft); border: 1px dashed var(--border); border-radius: 10px; }
.hist-title { font-size: 13px; font-weight: 600; color: var(--text-soft); margin-bottom: 8px; }

/* ---------- 表单 ---------- */
.form-row { margin-bottom: 16px; }
.form-row label { display: block; font-size: 13.5px; color: var(--text-soft); margin-bottom: 6px; font-weight: 500; }
.form-row label .req { color: var(--bad); margin-left: 3px; }
.form-row input, .form-row select, .form-row textarea {
  width: 100%; padding: 10px 12px; border: 1px solid var(--border); border-radius: 10px; font-size: 14.5px;
  background: #f8fafc; font-family: inherit;
}
.form-row input:focus, .form-row select:focus, .form-row textarea:focus { outline: none; border-color: var(--primary); background: #fff; }
.form-row textarea { min-height: 84px; resize: vertical; }
/* 常规报表-我的报送 筛选栏：强制单行紧凑排列 */
.sr-filters { display: flex !important; flex-direction: row !important; flex-wrap: nowrap !important; align-items: center; gap: 6px !important; padding: 6px 8px !important; overflow-x: auto; }
.sr-filters select, .sr-filters input { width: auto !important; flex: 0 0 auto; min-width: 0; padding: 6px 8px !important; font-size: 13px !important; }
.sr-filters #srFilterDept { min-width: 110px; }
.sr-filters #srFilterType { min-width: 90px; }
.sr-filters #srFilterStatus { min-width: 90px; }
.sr-filters #srFilterKw { min-width: 130px; }
.sr-filters #srFilterFrom, .sr-filters #srFilterTo { min-width: 120px; }
.field-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }
@media (max-width: 640px) { .field-grid { grid-template-columns: 1fr; } }

/* 图片上传 */
.img-upload { border: 2px dashed var(--border); border-radius: 12px; padding: 16px; text-align: center; color: var(--text-soft); cursor: pointer; transition: .15s; }
.img-upload:hover { border-color: var(--primary); color: var(--primary); background: var(--primary-light); }
.img-thumbs { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 10px; }
.img-thumbs img { width: 84px; height: 84px; object-fit: cover; border-radius: 10px; border: 1px solid var(--border); }
.img-thumbs .thumb { position: relative; }
.img-thumbs .thumb .x { position: absolute; top: -6px; right: -6px; background: var(--bad); color: #fff; border-radius: 50%; width: 20px; height: 20px; display: grid; place-items: center; font-size: 12px; cursor: pointer; }
.file-upload { border: 2px dashed var(--border); border-radius: 12px; padding: 14px 16px; text-align: center; color: var(--text-soft); cursor: pointer; transition: .15s; font-size: 14px; }
.file-upload:hover { border-color: var(--primary); color: var(--primary); background: var(--primary-light); }
.file-list { margin-top: 10px; }
.file-item { display: inline-flex; align-items: center; gap: 8px; background: #f8fafc; border: 1px solid var(--border); border-radius: 8px; padding: 6px 10px; font-size: 14px; }
.file-item .x { color: var(--bad); cursor: pointer; font-weight: 700; }

/* 审批时间线 */
.timeline { list-style: none; padding-left: 4px; }
.timeline li { position: relative; padding: 0 0 18px 24px; border-left: 2px solid var(--border); }
.timeline li:last-child { border-left-color: transparent; }
.timeline li::before { content: ""; position: absolute; left: -7px; top: 2px; width: 12px; height: 12px; border-radius: 50%; background: var(--primary); }
.timeline li.reject::before { background: var(--bad); }
.timeline .tl-role { font-weight: 600; font-size: 14px; }
.timeline .tl-time { font-size: 12px; color: var(--text-soft); }
.timeline .tl-comment { font-size: 13.5px; margin-top: 2px; }
.timeline .tl-action { font-size: 12px; font-weight: 700; }
.tl-action.ok { color: var(--ok); } .tl-action.bad { color: var(--bad); }

/* 详情字段 */
.detail-list { display: grid; grid-template-columns: 1fr 1fr; gap: 12px 20px; }
.detail-list .di { font-size: 14px; }
.detail-list .di .k { color: var(--text-soft); font-size: 12.5px; }
.detail-list .di .v { font-weight: 500; }
@media (max-width: 640px) { .detail-list { grid-template-columns: 1fr; } }

/* 工具条 */
.toolbar { display: flex; gap: 10px; flex-wrap: wrap; margin-bottom: 16px; align-items: center; }
.toolbar .spacer { flex: 1; }
.tabs { display: flex; gap: 6px; margin-bottom: 16px; flex-wrap: wrap; }
.tabs .tab { padding: 8px 14px; border-radius: 9px; background: #fff; border: 1px solid var(--border); font-size: 14px; cursor: pointer; }
.tabs .tab.active { background: var(--primary); color: #fff; border-color: var(--primary); font-weight: 600; }
.empty { text-align: center; color: var(--text-soft); padding: 50px 0; font-size: 14px; }

.toast {
  position: fixed; top: 18px; left: 50%; transform: translateX(-50%); background: #0f172a; color: #fff;
  padding: 11px 20px; border-radius: 10px; font-size: 14px; z-index: 999; opacity: 0; transition: .25s; pointer-events: none;
}
.toast.show { opacity: 1; }

.modal-mask { position: fixed; inset: 0; background: rgba(15,23,42,.45); display: grid; place-items: center; z-index: 50; padding: 20px; }
.modal { background: #fff; border-radius: 16px; padding: 24px; width: 100%; max-width: 520px; max-height: 88vh; overflow-y: auto; box-shadow: 0 20px 60px rgba(0,0,0,.3); }
.modal.wide { max-width: 1140px; width: calc(100vw - 40px); }
.modal h3 { margin-bottom: 16px; font-size: 18px; }
.modal .actions { display: flex; gap: 10px; justify-content: flex-end; margin-top: 20px; }

/* 批复签名拖拽层 */
.rv-preview-box { position: relative; display: block; width: 100%; border: 1px solid var(--border); border-radius: 10px; overflow: hidden; background: #f8fafc; }
.rv-preview-box img#rvOrigImg { display: block; max-width: 100%; max-height: 55vh; }
.rv-pdf-canvas { display: block; width: 100%; border: 0; background: #fff; }
.rv-pagebar { margin: 6px 0 4px; display: flex; align-items: center; gap: 8px; }
.rv-page-sel { padding: 3px 8px; border: 1px solid var(--border); border-radius: 6px; background: var(--bg); color: var(--text); }
.rv-sig-overlay { position: absolute; cursor: move; border: 1px dashed rgba(14,116,144,.5); box-shadow: 0 4px 14px rgba(0,0,0,.2); touch-action: none; user-select: none; background: transparent; }
.rv-sig-overlay:hover { border-color: var(--accent); }
.rv-sig-overlay.dragging { opacity: .85; }
.rv-sig-resize { position: absolute; width: 12px; height: 12px; background: var(--accent); border: 2px solid #fff; border-radius: 50%; cursor: nwse-resize; box-shadow: 0 1px 4px rgba(0,0,0,.3); z-index: 2; }
.rv-sig-hint { font-size: 12px; color: var(--text-soft); margin-top: 6px; }

/* 审批链编辑 */
.chain-edit { display: flex; flex-wrap: wrap; gap: 8px; }
.chain-chip { display: inline-flex; align-items: center; gap: 6px; background: var(--primary-light); color: var(--primary-dark); padding: 6px 10px; border-radius: 8px; font-size: 13px; }
.chain-chip .x { cursor: pointer; font-weight: 700; }

.section-title { font-size: 16px; font-weight: 700; margin: 4px 0 14px; display: flex; align-items: center; gap: 8px; }

/* ---------- 电子签名 ---------- */
.sig-pad { width: 100%; height: 150px; background: #fff; border: 1.5px dashed var(--border); border-radius: 10px; touch-action: none; cursor: crosshair; display: block; }
.sig-wrap { display: flex; align-items: center; gap: 10px; margin-top: 6px; }
.sig-img { height: 60px; max-width: 100%; border: 1px solid var(--border); border-radius: 8px; background: #fff; padding: 2px 6px; }

/* ---------- 消息提醒 ---------- */
.bell-pulse { animation: bellShake 2.4s ease-in-out infinite; transform-origin: 50% 4px; }
@keyframes bellShake {
  0%, 60%, 100% { transform: rotate(0deg); }
  10% { transform: rotate(14deg); }
  20% { transform: rotate(-12deg); }
  30% { transform: rotate(8deg); }
  40% { transform: rotate(-6deg); }
  50% { transform: rotate(2deg); }
}
/* 数字标：未读时强制显眼（呼吸光晕 + 更大字号 + 醒目背景） */
.badge-n {
  position: absolute; top: -4px; right: -8px;
  min-width: 20px; height: 20px; padding: 0 6px;
  border-radius: 999px;
  background: linear-gradient(135deg, #ef4444 0%, #dc2626 50%, #b91c1c 100%);
  color: #fff; font-size: 12px; font-weight: 800; line-height: 20px;
  text-align: center;
  box-shadow: 0 0 0 2px #fff inset, 0 0 0 2px #fff, 0 2px 6px rgba(239,68,68,.45);
  animation: badgePulse 1.6s ease-in-out infinite;
}
@keyframes badgePulse {
  0%, 100% { transform: scale(1); box-shadow: 0 0 0 2px #fff, 0 0 0 0 rgba(239,68,68,.5), 0 2px 6px rgba(239,68,68,.45); }
  50%      { transform: scale(1.08); box-shadow: 0 0 0 2px #fff, 0 0 0 6px rgba(239,68,68,0), 0 2px 8px rgba(239,68,68,.55); }
}
/* 铃铛按钮：有未读时按钮整体轻微脉动（加深视觉锚点） */
#bellBtn.has-new { color: #ef4444; }
#bellBtn.has-new svg { animation: bellGlow 1.6s ease-in-out infinite; }
@keyframes bellGlow {
  0%, 100% { filter: drop-shadow(0 0 0 rgba(239,68,68,0)); }
  50%      { filter: drop-shadow(0 0 6px rgba(239,68,68,.55)); }
}
.notif-head { display: flex; align-items: center; justify-content: space-between; margin-bottom: 12px; }
.notif-head h3 { margin: 0; }
/* 消息列表：自定义滚动条（铬/Firefox 双兼容）——用户能一眼看到可滚区域，避免「无滚动条」错觉 */
.notif-list {
  max-height: 60vh;
  overflow-y: auto;
  padding-right: 4px;
  scrollbar-width: thin;
  scrollbar-color: #94a3b8 transparent;
  background: repeating-linear-gradient(to bottom, transparent 0, transparent 35px, rgba(148,163,184,.07) 35px, rgba(148,163,184,.07) 36px);
}
.notif-list::-webkit-scrollbar { width: 10px; }
.notif-list::-webkit-scrollbar-track { background: transparent; }
.notif-list::-webkit-scrollbar-thumb {
  background: linear-gradient(180deg, #cbd5e1 0%, #94a3b8 100%);
  border-radius: 6px;
  border: 2px solid transparent;
  background-clip: padding-box;
}
.notif-list::-webkit-scrollbar-thumb:hover { background: #64748b; background-clip: padding-box; }
.notif-scroll-hint {
  text-align: center;
  font-size: 12px;
  color: var(--text-soft);
  padding: 6px 0 2px;
  opacity: .8;
  border-top: 1px dashed var(--border);
  margin-top: 6px;
}
.notif-scroll-hint .arrow { animation: arrowBob 1.2s ease-in-out infinite; display: inline-block; }
@keyframes arrowBob {
  0%, 100% { transform: translateY(0); }
  50%      { transform: translateY(3px); }
}
.notif-item { padding: 12px 12px; border-radius: 10px; border: 1px solid var(--border); margin-bottom: 10px; cursor: pointer; transition: .15s; background: #f8fafc; }
.notif-item:hover { border-color: var(--primary); }
.notif-item.read { opacity: .6; }
.notif-top { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.notif-title { font-weight: 700; font-size: 14px; color: var(--text); }
.notif-body { font-size: 13px; color: var(--text-soft); margin: 6px 0; line-height: 1.5; }
.notif-time { font-size: 12px; color: var(--text-soft); }
.dot { width: 9px; height: 9px; border-radius: 50%; background: #ef4444; display: inline-block; flex: none; }

/* ---------- 流程进度条（阶段化审批） ---------- */
.stepper { display: flex; align-items: flex-start; flex-wrap: wrap; margin-bottom: 16px; }
.step { display: flex; flex-direction: column; align-items: center; width: 92px; flex: none; text-align: center; }
.step .dot { width: 28px; height: 28px; border-radius: 50%; background: #e5e7eb; color: #6b7280; display: flex; align-items: center; justify-content: center; font-size: 13px; font-weight: 700; border: 2px solid #e5e7eb; }
.step.done .dot { background: #1e8449; color: #fff; border-color: #1e8449; }
.step.current .dot { background: #fff; color: var(--primary); border-color: var(--primary); box-shadow: 0 0 0 3px rgba(37,99,235,.15); }
.step-label { font-size: 12px; margin-top: 6px; line-height: 1.3; color: var(--text-soft); }
.step.done .step-label, .step.current .step-label { color: var(--text); font-weight: 600; }
.step-sub { font-size: 11px; color: #9ca3af; margin-top: 1px; }
.step-line { flex: 1; height: 2px; background: #e5e7eb; margin: 13px 2px 0; min-width: 16px; }
.step-line.on { background: #1e8449; }
.step-next-hint { font-size: 11px; color: var(--primary, #2563eb); margin-top: 3px; font-weight: 600; white-space: nowrap; }

/* ---------- 移动端 ---------- */
/* ---------- 删除按钮 ---------- */
.btn-icon.del-btn { background: none; border: none; cursor: pointer; font-size: 15px; padding: 2px 6px; border-radius: 6px; opacity: .0; transition: opacity .15s, background .15s; position: absolute; right: 4px; top: 50%; transform: translateY(-50%); line-height: 1; }
.btn-icon.del-btn:hover { opacity: 1; background: #FEE2E2; }
.table tbody .row-link:hover .del-btn { opacity: .55; }
.table td:first-child { padding-left: 28px; position: relative; }

/* ---------- 全部报表：筛选条 + 分类归档 ---------- */
.filter-bar { display: flex; gap: 16px; flex-wrap: wrap; align-items: flex-end; margin-bottom: 16px; padding: 14px 16px; background: var(--card); border: 1px solid var(--border); border-radius: var(--radius); box-shadow: var(--shadow); }
.filter-bar .fb-field { display: flex; flex-direction: column; gap: 5px; }
.filter-bar label { font-size: 12px; color: var(--text-soft); font-weight: 600; }
.filter-bar select { padding: 8px 11px; border: 1px solid var(--border); border-radius: 9px; font-size: 14px; background: #fff; min-width: 150px; color: var(--text); }
.filter-bar select:focus { outline: none; border-color: var(--primary); }
.filter-bar .spacer { flex: 1; }
.group-head { display: flex; align-items: center; gap: 8px; margin: 20px 0 8px; font-size: 15px; font-weight: 700; color: var(--text); }
.group-head:first-child { margin-top: 2px; }
.group-head .gh-ic { font-size: 17px; }
.group-head .gh-count { display: inline-block; min-width: 22px; padding: 1px 9px; border-radius: 999px; background: var(--primary-light); color: var(--primary-dark); font-size: 12px; font-weight: 700; text-align: center; }
/* 全部报表 · 分组折叠 */
.report-group { margin: 4px 0 0; }
.group-head.collapse-toggle { cursor: pointer; user-select: none; }
.group-head.collapse-toggle:hover { color: var(--primary-dark); }
.group-head .gh-caret { margin-left: 6px; display: inline-block; transition: transform .15s ease; font-size: 11px; color: var(--text-soft); transform: rotate(0deg); }
.report-group.collapsed .gh-caret { transform: rotate(-90deg); }
.group-body { overflow: hidden; }
.report-group.collapsed .group-body { display: none; }
.collapse-btn { border: none; background: transparent; cursor: pointer; font-size: 14px; line-height: 1; color: var(--text-soft); padding: 2px 6px; border-radius: 6px; flex-shrink: 0; transition: background .15s; }
.collapse-btn:hover { background: var(--border, #e2e8f0); color: var(--text); }
.collapse-body.collapsed { display: none; }

@media (max-width: 860px) {
  .sidebar { position: fixed; left: 0; top: 0; z-index: 40; transform: translateX(-100%); transition: .2s; width: 250px; }
  .sidebar.open { transform: translateX(0); }
  .menu-btn { display: block; }
  .content { padding: 16px; }
  .topbar { padding: 13px 16px; }
  .grid.cols-4, .grid.cols-3, .grid.cols-2 { grid-template-columns: 1fr; }
  .table { display: block; overflow-x: auto; white-space: nowrap; }
  .backdrop { position: fixed; inset: 0; background: rgba(0,0,0,.3); z-index: 35; }
}

/* ---------- 流转指派块 ---------- */
.assign-block { background: #FFF7ED; border: 1px solid #FDBA74; border-radius: 12px; padding: 14px 16px; margin-bottom: 14px; }
.assign-head { font-weight: 700; color: #C2410C; font-size: 15px; margin-bottom: 10px; }
.assign-block .form-row { background: #fff; border-radius: 8px; padding: 8px 10px; }
.assign-block select { min-width: 200px; }
.assign-hint { font-size: 12.5px; color: #9A3412; margin-top: 8px; line-height: 1.5; }

/* ---------- 航次风险评估 风险表 ---------- */
.risk-edit, .risk-show { width: 100%; border-collapse: collapse; margin-top: 6px; background: #fff; }
.risk-edit th, .risk-show th { background: #F2F4F7; color: #344054; font-size: 13px; font-weight: 700; padding: 8px 10px; border: 1px solid #D0D5DD; text-align: left; }
.risk-edit td, .risk-show td { border: 1px solid #D0D5DD; padding: 6px 8px; vertical-align: top; font-size: 13px; }
.risk-edit td.rk, .risk-show td.rk { background: #F2F4F7; font-weight: 600; white-space: nowrap; width: 14%; }
.risk-edit textarea { width: 100%; min-height: 48px; box-sizing: border-box; border: 1px solid #D0D5DD; border-radius: 6px; padding: 6px 8px; font: inherit; resize: vertical; }
.risk-show td { color: #222; }

/* ---------- 并行会签 & 二维码 ---------- */
.dept-list { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 4px; }
.dept-tag { display: inline-block; padding: 3px 10px; border-radius: 20px; font-size: 12px; font-weight: 500; }
.dept-signed { background: #dcfce7; color: #166534; }
.dept-miss { background: #fef2f2; color: #991b1b; }
.alert { padding: 12px 14px; border-radius: 8px; font-size: 14px; line-height: 1.5; }
.alert-success { background: #f0fdf4; border: 1px solid #bbf7d0; color: #166534; }
.alert-warn { background: #fefce8; border: 1px solid #fde047; color: #854d0e; }
#qrArea canvas { max-width: 180px; height: auto !important; }

/* =====================================================================
   商务科技风 v2 —— 浅色商务底 + 青蓝科技点缀
   （追加在原样式之后，覆盖旧规则；不影响既有结构）
   ===================================================================== */

/* ---------- 全局底纹 ---------- */
body {
  background:
    radial-gradient(1100px 520px at 100% -8%, rgba(34,211,238,.10), transparent 60%),
    radial-gradient(900px 460px at -6% 8%, rgba(2,132,199,.09), transparent 62%),
    var(--bg);
  background-attachment: fixed;
}

/* ---------- 侧边栏：深海军蓝 + 网格科技纹 ---------- */
.sidebar {
  width: 238px;
  background: linear-gradient(178deg, #0b2540 0%, #0d3049 46%, #0b3a47 100%);
  box-shadow: 2px 0 18px rgba(11,37,64,.18);
  position: sticky; overflow: hidden;
}
.sidebar::before {
  content: ""; position: absolute; inset: 0; pointer-events: none;
  background-image: linear-gradient(rgba(255,255,255,.035) 1px, transparent 1px),
                    linear-gradient(90deg, rgba(255,255,255,.035) 1px, transparent 1px);
  background-size: 26px 26px;
  mask-image: linear-gradient(180deg, rgba(0,0,0,.9), transparent 72%);
}
.sidebar > * { position: relative; z-index: 1; }
.sidebar .brand { padding: 17px 18px; border-bottom: 1px solid rgba(148,197,222,.14); }
.sidebar .brand .mark {
  background: var(--grad-tech); color: #052730;
  box-shadow: 0 0 0 3px rgba(34,211,238,.16), 0 6px 16px rgba(34,211,238,.25);
}
.sidebar .brand h2 { letter-spacing: .5px; }
.sidebar .brand span { color: #67e8f9; letter-spacing: 1.2px; text-transform: uppercase; }
.nav { padding: 12px 10px; }
.nav a { position: relative; color: #b9cbdb; border-radius: 9px; letter-spacing: .2px; }
.nav a::before {
  content: ""; position: absolute; left: 0; top: 50%; transform: translateY(-50%);
  width: 3px; height: 0; border-radius: 0 3px 3px 0; background: var(--cyan); transition: height .18s;
}
.nav a:hover { background: rgba(255,255,255,.06); color: #fff; }
.nav a.active {
  background: linear-gradient(90deg, rgba(34,211,238,.20), rgba(2,132,199,.10) 60%, transparent);
  color: #fff; font-weight: 600; box-shadow: inset 0 0 0 1px rgba(34,211,238,.22);
}
.nav a.active::before { height: 60%; }
.nav .nav-group {
  display: flex; align-items: center; gap: 8px;
  margin: 18px 12px 5px; padding: 9px 12px;
  font-size: 14px; font-weight: 800; letter-spacing: .3px;
  color: var(--accent); cursor: pointer; user-select: none;
  border-radius: 9px; position: relative;
  background: linear-gradient(90deg, color-mix(in srgb, var(--accent) 10%, transparent), transparent);
  transition: background .15s, color .15s;
}
.nav .nav-group:hover { background: linear-gradient(90deg, color-mix(in srgb, var(--accent) 20%, transparent), transparent); }
.nav .nav-group::before {
  content: ""; position: absolute; left: 4px; top: 50%; transform: translateY(-50%);
  width: 4px; height: 16px; border-radius: 3px; background: var(--accent); opacity: .9;
}
.nav .nav-group .ng-title { flex: 1; padding-left: 8px; }
.nav .nav-group .ng-caret { font-size: 11px; transition: transform .15s; opacity: .85; }
.nav-items.collapsed { display: none; }
/* 父目录下的子目录（如 船端管理 → 船舶申报 / 我的报表 / 待我审批） */
.nav .nav-subgroup { margin: 2px 0 4px; }
.nav .nav-subtitle {
  font-size: 11.5px; font-weight: 700; letter-spacing: .4px;
  color: var(--text-soft); opacity: .8; text-transform: none;
  padding: 4px 14px 2px 30px;
}
.nav .nav-subgroup .nav-items,
.nav .nav-subgroup a { font-size: 13.5px; }
.nav .nav-subgroup a { padding-left: 38px; }
/* ===========================================================
   子目录折叠头（如「部门工作区」）
   定位：从属于「岸基管控中心」的二级大区块 — 字体鲜亮、用
   与父级不同的对比色 --accent-2（一眼区分），但字号 14px 与
   父级 .nav-group 的 14px 持平、左侧色条 3px 细于父级 4px，
   明确不与父级争"父"地位
   =========================================================== */
.nav .nav-subhead {
  display: flex; align-items: center; gap: 8px;
  margin: 14px 12px 0; padding: 9px 14px 9px 18px;
  font-size: 14px; font-weight: 800; letter-spacing: .4px;
  color: var(--accent-2); cursor: pointer; user-select: none;
  border-radius: 9px; position: relative;
  background: linear-gradient(90deg,
    color-mix(in srgb, var(--accent-2) 16%, transparent) 0%,
    color-mix(in srgb, var(--accent-2) 6%, transparent) 70%,
    transparent);
  box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--accent-2) 26%, transparent);
  transition: background .15s, box-shadow .15s;
}
.nav .nav-subhead:hover {
  background: linear-gradient(90deg,
    color-mix(in srgb, var(--accent-2) 26%, transparent) 0%,
    color-mix(in srgb, var(--accent-2) 10%, transparent) 70%,
    transparent);
  box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--accent-2) 42%, transparent);
}
.nav .nav-subhead::before {
  content: ""; position: absolute; left: 8px; top: 50%; transform: translateY(-50%);
  width: 3px; height: 14px; border-radius: 2px; background: var(--accent-2); opacity: .95;
}
.nav .nav-subhead .ns-caret { font-size: 12px; opacity: .95; color: var(--accent-2); }
.nav .nav-subhead .ns-title { flex: 1; padding-left: 6px; }

/* 子目录内容容器：面板化，让区块有明确承载范围（仍从属于岸基管控中心） */
.nav .nav-subitems {
  background: linear-gradient(180deg,
    color-mix(in srgb, var(--accent-2) 5%, transparent) 0%,
    transparent 80%);
  border-radius: 8px;
  margin: 2px 8px 8px;
  padding: 6px 0 8px;
  box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--accent-2) 12%, transparent);
}
.nav-subitems.collapsed { display: none; }

/* ===========================================================
   第三级嵌套：5 个职能部门（指定人员/海务部/机务部/人事部/体系办）
   从属于「部门工作区」的子条目 — 字色统一为 --accent-2 的"暗调"
   形成清晰的"二级区块族"配色，hover 时切到鲜亮 --accent-2
   =========================================================== */
.nav .nav-subgroup-nested { margin: 1px 0 1px 12px; }
.nav .nav-subgroup-nested > .nav-subhead-nested {
  margin: 3px 8px 1px;
  padding: 7px 12px 7px 24px;
  font-size: 14px; font-weight: 600; letter-spacing: .2px;
  color: color-mix(in srgb, var(--accent-2) 80%, #1f2937 20%);
  background: transparent;
  box-shadow: none;
}
.nav .nav-subgroup-nested > .nav-subhead-nested::before { display: none; }
.nav .nav-subgroup-nested > .nav-subhead-nested:hover {
  background: color-mix(in srgb, var(--accent-2) 12%, transparent);
  color: var(--accent-2);
  box-shadow: none;
}
.nav .nav-subgroup-nested > .nav-subitems > a {
  padding-left: 52px; font-size: 13px;
  color: var(--text-soft);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.nav .nav-subgroup-nested > .nav-subitems > a:hover { color: var(--accent-2); }
/* 双层嵌套叶子项（如 指定人员→年度计划→内审计划/年度总结/安全计划）：
   单层嵌套叶子项 padding-left:52px 正常；双层再叠加 .nav-subgroup-nested 的 margin-left:12px
   + 内层 .nav-subitems 右边距，文字被侧栏右缘裁切。这里单独左移修正，不影响单层项。 */
.nav .nav-subgroup-nested .nav-subgroup-nested { margin-left: 4px; }
.nav .nav-subgroup-nested .nav-subgroup-nested > .nav-subitems > a { padding-left: 40px; }
.nav-badge {
  margin-left: 6px; min-width: 18px; height: 18px; padding: 0 5px; border-radius: 999px;
  background: var(--bad); color: #fff; font-size: 11px; font-weight: 700; line-height: 18px;
  text-align: center; display: inline-block;
}
.sidebar .me { border-top: 1px solid rgba(148,197,222,.14); background: rgba(4,20,35,.35); }

/* ---------- 顶栏：毛玻璃 + 底部渐变线 ---------- */
.topbar {
  background: rgba(255,255,255,.86); backdrop-filter: saturate(1.4) blur(10px);
  border-bottom: 1px solid var(--border); position: sticky; z-index: 20;
}
.topbar::after {
  content: ""; position: absolute; left: 0; right: 0; bottom: -1px; height: 2px;
  background: var(--grad-tech); opacity: .55;
}
.topbar h3 { letter-spacing: .3px; }
.content { padding: 20px 24px 40px; }

/* ---------- 按钮 ---------- */
.btn { box-shadow: 0 2px 8px rgba(14,116,144,.18); letter-spacing: .2px; display: inline-flex; align-items: center; gap: 5px; }
.btn svg { width: 16px; height: 16px; flex-shrink: 0; }
.btn:not(.ghost):not(.danger):not(.ok):not(.warn) { background: var(--grad-tech); }
.btn:not(.ghost):hover { filter: brightness(1.06); box-shadow: 0 4px 14px rgba(14,116,144,.28); }
.btn.ghost { box-shadow: none; }
.btn.ghost.light { background: rgba(255,255,255,.14); color: var(--text-strong); border: 1px solid rgba(255,255,255,.3); display: inline-flex; align-items: center; gap: 5px; }
.btn.ghost.light svg { width: 16px; height: 16px; opacity: .85; }
.btn.ghost.light:hover { background: rgba(255,255,255,.24); }
.btn.ghost.light em { font-style: normal; background: #22d3ee; color: #04343f; border-radius: 999px; padding: 0 7px; font-size: 12px; font-weight: 800; margin-left: 4px; }
.btn:disabled { opacity: .55; cursor: not-allowed; }

/* ---------- 卡片 / 面板 ---------- */
.card { border: 1px solid var(--border); transition: .18s; }
.card:hover { box-shadow: var(--shadow-lg); }
.panel {
  background: var(--card); border: 1px solid var(--border); border-radius: var(--radius);
  padding: 16px 18px 18px; box-shadow: var(--shadow); position: relative; overflow: hidden;
}
.panel::before { content: ""; position: absolute; left: 0; top: 0; width: 100%; height: 3px; background: var(--grad-tech); opacity: .8; }
.panel-head { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin-bottom: 10px; }
.panel-head h4 { font-size: 14.5px; font-weight: 700; letter-spacing: .2px; }
.chart-row { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; margin-top: 16px; }
.chart-row .span2 { grid-column: span 2; }

/* ---------- 工作台 Hero ---------- */
.hero {
  position: relative; overflow: hidden; border-radius: 16px; padding: 20px 22px;
  background: linear-gradient(115deg, #0b2540 0%, #0e4463 52%, #0e7490 100%);
  color: #ffffff; display: flex; align-items: center; gap: 16px; flex-wrap: wrap;
  box-shadow: 0 12px 30px rgba(11,37,64,.22);
}
.hero-bg { position: absolute; inset: 0; pointer-events: none;
  background-image: radial-gradient(520px 200px at 88% 0%, rgba(34,211,238,.35), transparent 60%),
    linear-gradient(rgba(255,255,255,.05) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255,255,255,.05) 1px, transparent 1px);
  background-size: auto, 30px 30px, 30px 30px; opacity: .9;
}
.hero-main { position: relative; flex: 1; min-width: 220px; }
.hero-hi { font-size: 21px; font-weight: 700; letter-spacing: .4px; color: #ffffff; }
.hero-hi b { color: #67e8f9; }
.hero-sub { font-size: 13px; color: rgba(182,215,230,.95); margin-top: 5px; display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.hero-dot { width: 4px; height: 4px; border-radius: 50%; background: #67e8f9; display: inline-block; }
.hero-acts { position: relative; display: flex; gap: 10px; flex-wrap: wrap; }

/* 商务轻奢 hero：暖棕底色 + 米黄问候语 + 香槟金姓名 */
body.skin-luxe .hero {
  background: linear-gradient(115deg, #3a2c1f 0%, #5a4426 52%, #6b4f2a 100%);
  color: #f5e9d2;
  box-shadow: 0 12px 30px rgba(58,44,31,.28);
}
body.skin-luxe .hero-hi { color: #f7ecd2; }
body.skin-luxe .hero-hi b { color: #e7d4a6; }
body.skin-luxe .hero-sub { color: rgba(245,233,210,.92); }
body.skin-luxe .hero-dot { background: #e7d4a6; }
body.skin-luxe .btn.ghost.light { background: rgba(255,253,247,.16); color: #f5e9d2; border-color: rgba(245,233,210,.40); }
body.skin-luxe .btn.ghost.light:hover { background: rgba(255,253,247,.26); border-color: rgba(245,233,210,.65); }

/* 浅紫蓝玻璃 hero：紫蓝渐变底 + 白色问候 + 淡紫姓名 */
body.skin-lilac .hero {
  background: linear-gradient(115deg, #5546a0 0%, #6d5ca8 52%, #8a7bd0 100%);
  color: #ffffff;
  box-shadow: 0 12px 30px rgba(85,70,160,.30);
}
body.skin-lilac .hero-hi { color: #ffffff; }
body.skin-lilac .hero-hi b { color: #ddd6f3; }
body.skin-lilac .hero-sub { color: rgba(255,255,255,.90); }
body.skin-lilac .hero-dot { background: #ddd6f3; }
body.skin-lilac .btn.ghost.light { background: rgba(255,255,255,.16); color: #ffffff; border-color: rgba(255,255,255,.42); }
body.skin-lilac .btn.ghost.light:hover { background: rgba(255,255,255,.26); border-color: rgba(255,255,255,.65); }

/* 清透海蓝 hero：保留深蓝渐变 + 更亮的白色问候，确保海洋蓝底色下文字不偏色 */
body.skin-ocean .hero {
  background: linear-gradient(115deg, #0a3d5e 0%, #0e5a82 52%, #117399 100%);
  color: #ffffff;
}
body.skin-ocean .hero-hi { color: #ffffff; text-shadow: 0 1px 2px rgba(0,0,0,.18); }
body.skin-ocean .hero-sub { color: rgba(207,230,243,.95); }

/* ---------- KPI 指标卡 ---------- */
.kpi-row { display: grid; grid-template-columns: repeat(6, 1fr); gap: 14px; margin-top: 16px; }
.kpi {
  background: var(--card); border: 1px solid var(--border); border-radius: 14px; padding: 14px 15px;
  display: flex; gap: 12px; align-items: flex-start; box-shadow: var(--shadow);
  position: relative; overflow: hidden; transition: .18s;
}
.kpi:hover { transform: translateY(-2px); box-shadow: var(--shadow-lg); }
.kpi::after { content: ""; position: absolute; right: -26px; bottom: -26px; width: 82px; height: 82px; border-radius: 50%; opacity: .09; background: currentColor; }
.kpi-ic { width: 38px; height: 38px; flex: none; border-radius: 11px; display: grid; place-items: center; font-size: 18px; background: var(--primary-light); }
.kpi-ic svg { width: 18px; height: 18px; }
.kpi-body { min-width: 0; }
.kpi-label { font-size: 12.5px; color: var(--text-soft); font-weight: 600; letter-spacing: .2px; }
.kpi-val { font-size: 27px; font-weight: 800; line-height: 1.15; letter-spacing: -.5px; }
.kpi-sub { font-size: 11.5px; color: var(--text-soft); margin-top: 2px; }
.kpi-sub .up { color: #dc2626; font-weight: 700; }
.kpi-sub .down { color: #16a34a; font-weight: 700; }
.kpi.c1 { color: #0e7490; } .kpi.c1 .kpi-ic { background: #e0f5fa; }
.kpi.c2 { color: #b45309; } .kpi.c2 .kpi-ic { background: #fef3c7; }
.kpi.c3 { color: #15803d; } .kpi.c3 .kpi-ic { background: #dcfce7; }
.kpi.c4 { color: #b91c1c; } .kpi.c4 .kpi-ic { background: #fee2e2; }
.kpi.c5 { color: #4338ca; } .kpi.c5 .kpi-ic { background: #e0e7ff; }
.kpi.c6 { color: #0f766e; } .kpi.c6 .kpi-ic { background: #ccfbf1; }
.kpi .kpi-val { color: var(--text); }

/* ---------- 图表 ---------- */
.chart { width: 100%; height: auto; display: block; }
.ch-grid { stroke: #eef2f7; stroke-width: 1; }
.ch-axis { font-size: 11px; fill: #94a3b8; }
.ch-val { font-size: 11px; fill: #0f172a; font-weight: 700; }
.ch-bar-g rect { transition: opacity .15s; }
.ch-bar-g:hover rect { opacity: .82; }
.donut-wrap { display: flex; align-items: center; gap: 14px; flex-wrap: wrap; }
.donut { width: 140px; height: 140px; flex: none; }
.dn-num { font-size: 24px; font-weight: 800; fill: #0f172a; }
.dn-cap { font-size: 11px; fill: #94a3b8; }
.donut-legend { flex: 1; min-width: 120px; display: flex; flex-direction: column; gap: 7px; }
.dl-item { display: flex; align-items: center; gap: 8px; font-size: 13px; }
.dl-item i { width: 10px; height: 10px; border-radius: 3px; flex: none; }
.dl-item span { flex: 1; color: var(--text-soft); }
.dl-item b { font-variant-numeric: tabular-nums; }
.hbars { display: flex; flex-direction: column; gap: 9px; }
.hb { display: grid; grid-template-columns: 92px 1fr 34px; align-items: center; gap: 9px; font-size: 13px; }
.hb-l { color: var(--text-soft); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.hb-t { height: 9px; border-radius: 999px; background: #eef2f7; overflow: hidden; }
.hb-t i { display: block; height: 100%; border-radius: 999px; background: var(--grad-tech); }
.hb-v { text-align: right; font-variant-numeric: tabular-nums; font-weight: 700; }
.todo-mini { display: flex; flex-direction: column; }
.tm-row { display: flex; align-items: center; justify-content: space-between; padding: 8.5px 0; border-bottom: 1px dashed var(--border); font-size: 13.5px; }
.tm-row:last-child { border-bottom: none; }
.tm-row span { color: var(--text-soft); }
.tm-row b { font-size: 16px; font-variant-numeric: tabular-nums; }
.tm-row b.hot { color: var(--bad); }

/* ---------- 表格：科技感表头 + 斑马纹 ---------- */
.table { border: 1px solid var(--border); box-shadow: var(--shadow); }
.table th {
  background: linear-gradient(180deg, #f7fafd, #eef4f9); color: #47617a;
  font-size: 12px; letter-spacing: .6px; text-transform: none; font-weight: 700;
  border-bottom: 1px solid #dde6f0; white-space: nowrap;
}
.table tbody tr:nth-child(even) td { background: #fbfdff; }
.table tbody tr:hover td { background: var(--primary-light); }
.table .row-link:hover td { background: #e6f6fa; }
.table td { vertical-align: top; }
.table.compact th, .table.compact td { padding: 8px 10px; font-size: 13px; }
.table-scroll { border-radius: 12px; border: 1px solid var(--border); }
.table-scroll .table { border: none; box-shadow: none; }
.cell-sub { font-size: 12px; color: var(--text-soft); line-height: 1.5; }
.cell-meta { font-size: 11.5px; color: #94a3b8; margin-top: 2px; }
.dim { color: #94a3b8; font-size: 12.5px; }
.link-strong { color: var(--primary); font-weight: 600; }
.link-strong:hover { text-decoration: underline; }
.tag-soft { display: inline-block; padding: 2px 9px; border-radius: 999px; font-size: 11.5px; font-weight: 600; background: #eef6fb; color: #0b6b86; border: 1px solid #d6ebf3; }
.stat-pill { display: inline-flex; align-items: center; gap: 4px; padding: 5px 12px; border-radius: 999px; background: #eef6fb; color: #0b6b86; font-size: 12.5px; font-weight: 600; border: 1px solid #d6ebf3; }
.stat-pill b { font-size: 14px; }
.hint { font-size: 12px; color: var(--text-soft); margin-top: 5px; line-height: 1.6; }
.hint-inline { font-size: 12px; color: var(--text-soft); }
.hint-inline b { color: var(--primary-dark); }

/* ---------- 检索面板（全部报表） ---------- */
.filter-panel {
  background: var(--card); border: 1px solid var(--border); border-radius: var(--radius);
  padding: 14px 16px 12px; box-shadow: var(--shadow); margin-bottom: 16px; position: relative; overflow: hidden;
}
.filter-panel::before { content: ""; position: absolute; left: 0; top: 0; width: 100%; height: 3px; background: var(--grad-tech); opacity: .75; }
.fp-row { display: flex; gap: 12px; flex-wrap: wrap; align-items: flex-end; margin-bottom: 10px; }
.fp-row:last-child { margin-bottom: 0; }
.fp-actions { border-top: 1px dashed var(--border); padding-top: 10px; align-items: center; }
.fp-row .spacer { flex: 1; }
.fb-field, .fb-item { display: flex; flex-direction: column; gap: 5px; }
.fb-field.grow, .fb-item.grow { flex: 1; min-width: 180px; }
.fb-field label, .fb-item label { font-size: 11.5px; color: var(--text-soft); font-weight: 700; letter-spacing: .3px; }
.fb-field select, .fb-field input, .fb-item select, .fb-item input {
  padding: 8px 11px; border: 1px solid var(--border); border-radius: 9px; font-size: 13.5px;
  background: #fff; min-width: 138px; color: var(--text); font-family: inherit; transition: .15s;
}
.fb-field.grow input, .fb-item.grow input { min-width: 100%; }
.fb-field select:focus, .fb-field input:focus, .fb-item select:focus, .fb-item input:focus { outline: none; border-color: var(--primary); box-shadow: 0 0 0 3px rgba(14,116,144,.12); }
.fb-field select:disabled, .fb-item select:disabled { background: #f1f5f9; color: #94a3b8; }
.quick-chips { display: flex; gap: 7px; flex-wrap: wrap; }
.chip {
  padding: 5px 13px; border-radius: 999px; border: 1px solid var(--border); background: #fff;
  font-size: 12.5px; color: var(--text-soft); cursor: pointer; transition: .15s; font-family: inherit;
}
.chip:hover { border-color: var(--primary); color: var(--primary); }
.chip.on { background: var(--grad-tech); color: #fff; border-color: transparent; font-weight: 700; }

/* ---------- 全部报表「船舶 / 岸基」类别切换（独立卡片呈现） ---------- */
.scope-tabs { display: flex; gap: 8px; flex-wrap: wrap; align-items: center; width: 100%; }
.scope-tab {
  padding: 7px 16px; border-radius: 999px; border: 1px solid var(--border); background: #fff;
  font-size: 13px; color: var(--text-soft); cursor: pointer; transition: .15s; font-family: inherit;
  display: inline-flex; align-items: center; gap: 6px;
}
.scope-tab:hover { border-color: var(--primary); color: var(--primary); }
.scope-tab em { font-style: normal; background: rgba(99,102,241,.12); color: var(--primary); border-radius: 999px; padding: 1px 8px; font-size: 11.5px; font-weight: 700; }
.scope-tab.is-active { background: var(--grad-tech); color: #fff; border-color: transparent; font-weight: 700; box-shadow: 0 4px 10px rgba(99,102,241,.18); }
.scope-tab.is-active em { background: rgba(255,255,255,.25); color: #fff; }
.scope-toggle-row { margin-bottom: 10px; }

/* ---------- 快捷选项下拉（用户自定义，localStorage 持久化） ---------- */
.qs-dropdown { position: relative; display: inline-block; margin-bottom: 4px; }
.qs-trigger {
  padding: 2px 9px; border-radius: 5px; border: 1px solid var(--border); background: #fff;
  font-size: 11.5px; color: var(--text-secondary); cursor: pointer; transition: .15s;
  font-family: inherit; line-height: 1.8;
}
.qs-trigger:hover { border-color: var(--primary); color: var(--primary); background: #f0f5ff; }
.qs-panel {
  position: absolute; left: 0; top: 100%; z-index: 100;
  width: 280px; background: #fff; border: 1px solid var(--border);
  border-radius: 8px; box-shadow: 0 6px 20px rgba(0,0,0,.12); padding: 10px;
}
.qs-add-row { display: flex; gap: 4px; margin-bottom: 8px; }
.qs-input {
  flex: 1; border: 1px solid var(--border); border-radius: 5px; padding: 4px 7px;
  font-size: 12px; font-family: inherit; outline: none;
}
.qs-input:focus { border-color: var(--primary); box-shadow: 0 0 0 2px rgba(99,102,241,.15); }
.qs-list { max-height: 160px; overflow-y: auto; min-height: 28px; }
.qs-empty { color: var(--text-soft); font-size: 11.5px; text-align: center; padding: 10px 0; }
.qs-item {
  display: flex; align-items: flex-start; gap: 6px; padding: 4px 6px; border-radius: 4px;
  cursor: pointer; font-size: 12px; line-height: 1.5; transition: .1s;
}
.qs-item:hover { background: #f5f7fa; }
.qs-item input[type=checkbox] { margin-top: 3px; flex-shrink: 0; accent-color: var(--primary); }
.qs-item span { word-break: break-all; }
.qs-bar { display: flex; justify: flex-end; gap: 6px; margin-top: 8px; padding-top: 8px; border-top: 1px solid #f0f0f0; }
.group-head { border-left: 3px solid var(--primary); padding-left: 9px; }

/* ---------- 体系文件 / 发放登记 ---------- */
.notice-link { display: inline-block; font-size: 12.5px; color: var(--primary); margin: 1px 6px 1px 0; }
.notice-link:hover { text-decoration: underline; }
/* 批量上传：已选文件 chip 列表 */
.up-chips { display:flex; flex-wrap:wrap; gap:6px; margin-top:6px; min-height:0; }
.up-chip { display:inline-flex; align-items:center; gap:6px; max-width:240px; background:#eef2ff; border:1px solid #dbe2f1; color:#2f3a56; font-size:12.5px; border-radius:8px; padding:3px 8px; }
.up-chip span, .up-chip { overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.up-rm { color:#c0392b; font-weight:700; cursor:pointer; text-decoration:none; flex-shrink:0; }
.up-rm:hover { color:#e74c3c; }
.mini-link { display:inline-block; font-size:12px; color:var(--primary); margin:1px 5px 1px 0; }
.mini-link:hover { text-decoration:underline; }
/* 文件列表展开/折叠 */
.file-list-collapsed { display:none; max-height:0; overflow:hidden; transition:max-height .25s ease; }
.file-list-expanded { display:block; max-height:400px; overflow-y:auto; padding:6px 0; border-top:1px dashed var(--border); transition:max-height .3s ease; }
.btn-link { background:none; border:none; color:var(--primary); cursor:pointer; font-size:12px; padding:0 4px; }
.btn-link:hover { color:#0369a1; text-decoration:underline; }
.col-notice { max-width: 220px; }
.col-acts { white-space: nowrap; }
.col-acts .btn { margin: 2px 2px 2px 0; }
.mini-progress { width: 96px; height: 6px; border-radius: 999px; background: #eef2f7; overflow: hidden; margin-bottom: 4px; }
.mini-progress i { display: block; height: 100%; background: linear-gradient(90deg, #22d3ee, #16a34a); border-radius: 999px; }
.sig-thumb { height: 34px; max-width: 130px; object-fit: contain; background: #fff; border: 1px solid var(--border); border-radius: 6px; padding: 1px 4px; }
.doc-brief { background: #f7fbfd; border: 1px solid #dceaf2; border-radius: 10px; padding: 11px 13px; }
.doc-brief b { font-size: 15px; }
.sign-choice { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; margin: 12px 0 4px; }
.sc-item { border: 1px solid var(--border); border-radius: 12px; padding: 12px; background: #fbfdff; }
.sc-item.disabled { opacity: .8; }
.sc-head { font-size: 13px; font-weight: 700; color: var(--primary-dark); margin-bottom: 8px; }
.sc-preview { height: 100px; display: grid; place-items: center; background: #fff; border: 1px dashed #cbd5e1; border-radius: 8px; margin-bottom: 8px; overflow: hidden; }
.sc-preview img { max-height: 94px; max-width: 100%; }
.sc-empty { height: 100px; display: grid; place-items: center; color: #94a3b8; font-size: 12.5px; background: #fff; border: 1px dashed #cbd5e1; border-radius: 8px; margin-bottom: 8px; }
@media (max-width: 720px) { .sign-choice { grid-template-columns: 1fr; } }

/* ---------- 电子签名工具条 ---------- */
.sig-tools { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; margin-top: 6px; }
.sig-tip { font-size: 11.5px; color: #94a3b8; }
.sig-use-tpl { border-color: var(--primary) !important; color: var(--primary) !important; }

/* 检查清单（是/否/不适用）表格：拉开选项与检查项目文字的间距 */
.ck-tbl { width: 100%; border-collapse: collapse; margin-top: 4px; }
.ck-tbl th, .ck-tbl td { border: 1px solid var(--border); padding: 9px 12px; vertical-align: middle; font-size: 13.5px; }
.ck-tbl thead th { background: var(--primary-light); color: var(--primary-dark); font-weight: 600; text-align: left; }
.ck-tbl .ck-no { width: 40px; text-align: center; color: var(--text-soft); }
.ck-tbl .ck-txt { line-height: 1.7; }
.ck-tbl .ck-yn { width: 250px; }
.yn-group { display: flex; gap: 20px; padding-left: 10px; white-space: nowrap; }
.yn-group .yn { display: inline-flex; align-items: center; gap: 6px; cursor: pointer; user-select: none; }
.yn-group .yn input { width: 16px; height: 16px; accent-color: var(--primary); }
.ck-tbl.view th, .ck-tbl.view td { padding: 6px 10px; }

/* 体系文件发放范围：船舶→船员逐人勾选 */
.scope-box { flex-direction: column; align-items: stretch; gap: 12px; }
.scope-cols { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
.scope-col { min-width: 0; }
.scope-h { font-size: 13px; font-weight: 600; color: var(--primary-dark); margin-bottom: 6px; }
.chk-group.inner { background: var(--bg); }
.ship-list { max-height: 260px; overflow: auto; border: 1px solid var(--border); border-radius: 10px; padding: 10px; background: #fff; display: flex; flex-direction: column; gap: 10px; }
.ship-crew { border-bottom: 1px dashed var(--border); padding-bottom: 8px; }
.ship-crew:last-child { border-bottom: none; padding-bottom: 0; }
.ship-name { font-weight: 600; font-size: 13.5px; margin-bottom: 6px; }
.crew-list { display: flex; flex-wrap: wrap; gap: 8px; }
.crew-list .chk.crew { background: #fff; }
.ck-tools a { font-size: 12px; color: var(--primary); cursor: pointer; }

/* ---------- 用户管理：人事部范围锁定 ---------- */
.row-locked td { background: #fafbfc !important; color: #94a3b8; }
.row-locked td b { color: #94a3b8; }
.holder-code { font-family: ui-monospace, Consolas, monospace; font-size: 13px; font-weight: 700; letter-spacing: 1px; color: var(--primary-dark); background: #eef6fb; padding: 2px 8px; border-radius: 6px; }
.subtabs { display: flex; gap: 6px; flex-wrap: wrap; margin-bottom: 14px; border-bottom: 1px solid var(--border); padding-bottom: 10px; }
.subtabs a { padding: 7px 14px; border-radius: 9px; font-size: 13.5px; color: var(--text-soft); border: 1px solid transparent; }
.subtabs a:hover { background: #eef6fb; color: var(--primary); }
.subtabs a.on, .subtabs a.active { background: var(--grad-tech); color: #fff; font-weight: 700; }
.alert-tip { background: #f0f9ff; border: 1px solid #bae6fd; color: #0c4a6e; border-radius: 10px; padding: 10px 12px; font-size: 12.5px; line-height: 1.7; }

/* ---------- 新消息浮条（科技感弹窗） ---------- */
.notif-pop { position: fixed; top: 70px; right: 22px; z-index: 1200; display: flex; flex-direction: column; gap: 12px; width: 344px; max-width: calc(100vw - 28px); pointer-events: none; }
.notif-pop-item {
  position: relative; overflow: hidden; pointer-events: auto; cursor: pointer; will-change: transform, opacity;
  display: flex; gap: 12px; align-items: stretch; padding: 14px 15px 12px;
  border-radius: 14px;
  background: linear-gradient(150deg, rgba(15,23,42,.95), rgba(8,47,73,.90) 58%, rgba(2,132,199,.84));
  border: 1px solid rgba(34,211,238,.45);
  box-shadow: 0 14px 44px rgba(8,47,73,.55), 0 0 0 1px rgba(34,211,238,.12), inset 0 0 22px rgba(34,211,238,.08);
  -webkit-backdrop-filter: blur(14px) saturate(1.2); backdrop-filter: blur(14px) saturate(1.2);
  color: #e2f5fb;
  transform: translate3d(130%,0,0) scale(.98); opacity: 0;
  transition: transform .46s cubic-bezier(.16,1,.3,1), opacity .42s ease, box-shadow .35s ease;
}
.notif-pop-item::after { content: ''; position: absolute; left: 0; top: 0; height: 100%; width: 3px; background: var(--nc, #22d3ee); box-shadow: 0 0 12px var(--nc, #22d3ee); border-radius: 14px 0 0 14px; }
.notif-pop-item.in { transform: translate3d(0,0,0) scale(1); opacity: 1; box-shadow: 0 18px 52px rgba(8,47,73,.6), 0 0 28px rgba(34,211,238,.35), inset 0 0 26px rgba(34,211,238,.12); }
.notif-pop-item:hover { box-shadow: 0 20px 58px rgba(8,47,73,.62), 0 0 36px rgba(34,211,238,.5), inset 0 0 30px rgba(34,211,238,.16); }
.np-corner { position: absolute; width: 12px; height: 12px; border: 2px solid rgba(34,211,238,.7); pointer-events: none; }
.np-corner.tl { top: 6px; left: 6px; border-right: none; border-bottom: none; }
.np-corner.br { bottom: 6px; right: 6px; border-left: none; border-top: none; }
.np-scan { position: absolute; left: 0; right: 0; top: -45%; height: 42%; pointer-events: none; background: linear-gradient(180deg, transparent, rgba(34,211,238,.18), transparent); animation: npScan 3.4s linear infinite; }
@keyframes npScan { 0% { top: -45%; } 100% { top: 110%; } }
.np-ic { flex: 0 0 auto; width: 38px; height: 38px; border-radius: 11px; display: grid; place-items: center; font-size: 19px;
  background: radial-gradient(circle at 32% 30%, color-mix(in srgb, var(--nc) 38%, transparent), rgba(255,255,255,.05));
  border: 1px solid color-mix(in srgb, var(--nc) 60%, transparent);
  box-shadow: 0 0 16px color-mix(in srgb, var(--nc) 50%, transparent), inset 0 0 10px color-mix(in srgb, var(--nc) 32%, transparent);
  color: #fff; text-shadow: 0 0 10px var(--nc); animation: npPulse 2.2s ease-in-out infinite; }
@keyframes npPulse { 0%,100% { transform: scale(1); } 50% { transform: scale(1.08); } }
.np-main { min-width: 0; flex: 1; display: flex; flex-direction: column; gap: 5px; }
.np-row { display: flex; align-items: flex-start; gap: 8px; }
.np-title { flex: 1; font-size: 13.5px; font-weight: 700; line-height: 1.45; color: #f0fbff; text-shadow: 0 1px 2px rgba(0,0,0,.45); letter-spacing: .2px; }
.np-close { flex: 0 0 auto; width: 20px; height: 20px; border: none; background: rgba(255,255,255,.08); color: #a9d6e2; border-radius: 6px; font-size: 11px; line-height: 1; cursor: pointer; }
.np-close:hover { background: rgba(255,255,255,.2); color: #fff; }
.np-body { font-size: 12px; line-height: 1.55; color: #bfe6f2; opacity: .92; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.np-foot { display: flex; align-items: center; gap: 8px; margin-top: 2px; }
.np-tag { font-size: 11px; padding: 2px 8px; border-radius: 999px; font-weight: 600; color: var(--nc);
  background: color-mix(in srgb, var(--nc) 16%, transparent); border: 1px solid color-mix(in srgb, var(--nc) 45%, transparent); }
.np-time { font-size: 11px; color: #8fb9c9; }
.np-go { margin-left: auto; font-size: 11.5px; font-weight: 600; color: #7fe3f5; opacity: .85; }
.notif-pop-item:hover .np-go { opacity: 1; text-shadow: 0 0 8px rgba(34,211,238,.6); }
.sound-tog { display: inline-flex; align-items: center; gap: 5px; font-size: 12.5px; color: var(--text-soft); cursor: pointer; user-select: none; }
.sound-tog input { accent-color: var(--primary); }

/* ---------- 弹窗 ---------- */
.modal { border: 1px solid rgba(255,255,255,.6); box-shadow: 0 24px 70px rgba(11,37,64,.34); max-width: 640px; }
.modal h3 { display: flex; align-items: center; gap: 8px; padding-bottom: 12px; border-bottom: 1px solid var(--border); }
.modal-mask { background: rgba(11,37,64,.5); backdrop-filter: blur(3px); }

/* ---------- 响应式 ---------- */
@media (max-width: 1400px) { .kpi-row { grid-template-columns: repeat(3, 1fr); } }
@media (max-width: 1180px) {
  .chart-row { grid-template-columns: 1fr; }
  .chart-row .span2 { grid-column: span 1; }
}
@media (max-width: 860px) {
  .kpi-row { grid-template-columns: repeat(2, 1fr); }
  .hero { padding: 16px; }
  .hero-hi { font-size: 18px; }
  .notif-pop { top: 60px; right: 10px; left: 10px; width: auto; }
  .fb-field, .fb-field select, .fb-field input, .fb-item, .fb-item select, .fb-item input { min-width: 0; width: 100%; }
  .fp-row { flex-direction: column; align-items: stretch; }

  /* 增量：欢迎条与顶栏在窄屏堆叠收敛（侧边栏抽屉见上方 860 段） */
  .shell { display: block; }
  .topbar { padding: 12px 14px; }
  .topbar .right { gap: 8px; }
  .hero { flex-direction: column; align-items: flex-start; gap: 14px; }
  .hero-main { min-width: 0; width: 100%; }
  .hero-acts { width: 100%; flex-direction: column; align-items: stretch; }
  .hero-acts .btn { justify-content: center; }
  .table th, .table td { white-space: nowrap; }
}
@media (max-width: 520px) {
  .kpi-row { grid-template-columns: 1fr; }
  .topbar .right span { display: none; }
  .hero-hi { font-size: 19px; }
  .module-grid { grid-template-columns: 1fr; }
}

/* 补充：通用工具类 */
.hidden { display: none !important; }
.chk-line {
  display: flex; align-items: flex-start; gap: 8px;
  padding: 10px 12px; margin-top: 8px;
  background: #fff7ed; border: 1px solid #fed7aa; border-radius: 8px;
  font-size: 13px; line-height: 1.6; color: #7c2d12; cursor: pointer;
}
.chk-line input[type=checkbox] { margin-top: 3px; flex: none; width: 15px; height: 15px; accent-color: #ea580c; }
.chk-line b { color: #c2410c; }

/* ===== 表单编制 / 自检报告 新增样式 ===== */
/* 检查项目勾选列表：网格 2 列、字号合适、每项可换行，行间距宽松，阅读不易累 */
.chk-list { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 9px 12px; }
.chk-list .chk { display: flex; align-items: flex-start; gap: 8px; padding: 10px 14px; border: 1px solid var(--border); border-radius: 8px; font-size: 14px; line-height: 1.55; cursor: pointer; user-select: none; background: #fff; transition: .15s; min-height: 44px; }
.chk-list .chk:hover { border-color: var(--primary); }
.chk-list .chk input { width: 16px; height: 16px; accent-color: var(--primary); flex-shrink: 0; margin-top: 3px; }
.chk-list .chk > span { flex: 1 1 auto; word-break: break-word; }
.chk-list .chk:has(input:checked) { border-color: var(--primary); background: var(--primary-light); color: var(--primary-dark); font-weight: 600; }
/* 编制表单中按部门分组的检查项目独立样式（更紧凑一些） */
.chk-list.items-list { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.chk-list.items-list .chk { padding: 11px 14px; font-size: 13.5px; }
/* 库内安检项目列表（表单编制 tab）：极致整齐，每项一目了然 */
.chk-list.lib-list { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.chk-list.lib-list .chk { padding: 13px 16px; font-size: 14px; min-height: 50px; }
@media (max-width: 900px) {
  .chk-list { grid-template-columns: 1fr; }
  .chk-list.items-list, .chk-list.lib-list { grid-template-columns: 1fr; }
}
.docx-items { margin: 4px 0 4px 18px; padding: 0; }
.docx-items li { font-size: 13.5px; line-height: 1.7; }
.self-card { border: 1.5px solid var(--primary) !important; }
.self-card .mi { background: var(--primary-light) !important; color: var(--primary) !important; }
.seg { display: flex; gap: 6px; flex-wrap: wrap; }
.seg-btn { padding: 7px 14px; border-radius: 8px; background: #fff; border: 1px solid var(--border); font-size: 13.5px; cursor: pointer; }
.seg-btn.active { background: var(--primary); color: #fff; border-color: var(--primary); font-weight: 600; }
.tag { display: inline-block; padding: 3px 10px; border-radius: 999px; font-size: 12.5px; font-weight: 600; background: #eef6fb; color: #0b6b86; border: 1px solid #d6ebf3; margin: 2px; }
.sig-row { display: flex; gap: 14px; flex-wrap: wrap; }
.sig-box { flex: 1; min-width: 200px; border: 1px solid var(--border); border-radius: 10px; padding: 10px 12px; background: #fff; }
.sig-label { font-size: 13px; font-weight: 600; color: #344054; margin-bottom: 6px; }
.sig-img { height: 56px; max-width: 100%; border: 1px solid var(--border); border-radius: 8px; background: #fff; padding: 2px 6px; }
.sig-none { font-size: 12px; color: #aaa; padding: 8px 0; }
.sig-date { font-size: 12px; color: #667085; margin-top: 4px; }

/* 自检报告：结果符号与填写规范提示 */
.res-mark { display:inline-block; min-width:26px; text-align:center; font-size:16px; font-weight:700; color:#0f172a; }
.hint-line { margin:6px 0 10px; padding:8px 12px; background:#fff7ed; border:1px solid #fed7aa; border-radius:8px; font-size:13px; color:#9a3412; }
.hint-line b { font-size:15px; color:#c2410c; }

/* 编制检查清单：全选控件与已选计数 */
.chk-all { display:inline-flex; align-items:center; gap:5px; margin-left:10px; padding:3px 10px; border:1px solid var(--border); border-radius:14px; font-size:13px; font-weight:600; color:#0f172a; cursor:pointer; background:#f8fafc; user-select:none; }
.chk-all:hover { border-color:var(--primary); color:var(--primary); }
.chk-all input[type=checkbox] { width:14px; height:14px; accent-color:var(--primary); cursor:pointer; margin:0; }
.sel-sum { margin-left:auto; font-size:13px; font-weight:500; color:var(--text-soft); }

/* ===== 服务商名录：两列网格 + 固定尺寸卡片 ===== */
.supp-grid { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:16px; align-items:stretch; }
@media (max-width: 900px) { .supp-grid { grid-template-columns:1fr; } }
/* 卡片整体固定高度，内容再多也不撑高 */
.card.supp-card { display:flex; flex-direction:column; min-height:380px; padding:16px; overflow:hidden; }
.supp-head { display:flex; align-items:center; gap:8px; flex-wrap:wrap; flex-shrink:0; }
.supp-name { font-weight:600; font-size:18px; }
.supp-badge { font-size:12px; border-radius:10px; padding:2px 10px; border:1px solid; white-space:nowrap; }
.supp-badge.top { background:#fff3cd; color:#8a6d00; border-color:#ffe69c; }
.supp-badge.flag { background:#fdecea; color:#c62828; border-color:#f5c6cb; }
.supp-cat { font-size:13px; background:#f1f3f5; border:1px solid var(--border); border-radius:10px; padding:2px 10px; color:var(--text-soft); }
/* 主体：左信息 + 右媒体 并排，等高拉伸至卡片固定高度 */
.supp-body { display:flex; gap:14px; flex:1; min-height:0; margin-top:10px; align-items:stretch; }
.supp-info { flex:1; min-width:0; font-size:14px; }
.supp-info .grid2 { display:grid; grid-template-columns:1fr 1fr; gap:4px 12px; }
.soft { color:var(--text-soft); }
.ell { overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
/* 媒体栏：图片1 / 图片2 / 视频 三者左右并排、按上传横竖状态显示（object-fit:contain 保留原始比例） */
.supp-media { width:320px; flex-shrink:0; display:flex; gap:8px; min-height:0; align-items:center; }
.supp-imgbox, .supp-vidbox { flex:1; min-width:0; height:120px; background:#f8fafc; border:1px solid var(--border); border-radius:10px; overflow:hidden; display:flex; align-items:center; justify-content:center; }
.supp-imgbox img, .supp-vidbox video { width:100%; height:100%; object-fit:contain; border-radius:9px; }
.supp-imgbox img { cursor:zoom-in; }
.supp-empty { font-size:12px; color:var(--text-soft); }
/* 图片放大查看（lightbox） */
.img-lightbox { position:fixed; inset:0; background:rgba(15,23,42,.85); display:flex; align-items:center; justify-content:center; z-index:9999; cursor:zoom-out; }
.img-lightbox img { max-width:92vw; max-height:92vh; border-radius:10px; box-shadow:0 10px 40px rgba(0,0,0,.5); }
/* 评论区固定在卡片底部，留言列表可滚动 */
.supp-review { flex-shrink:0; margin-top:12px; border-top:1px solid var(--border); padding-top:10px; display:flex; flex-direction:column; }
.supp-review-head { font-size:13px; color:var(--text-soft); margin-bottom:6px; }
.supp-ta { width:100%; min-height:64px; max-height:90px; resize:vertical; padding:8px 10px; border-radius:8px; border:1px solid var(--border); font-family:inherit; font-size:14px; box-sizing:border-box; }
.supp-rads { display:flex; gap:14px; align-items:center; flex-wrap:wrap; margin-top:6px; }
.supp-revlist { max-height:120px; overflow-y:auto; margin-top:8px; border:1px solid #f1f3f5; border-radius:8px; padding:6px 10px; background:#fafbfc; }
/* 交流论坛 */
.forum-list { display:flex; flex-direction:column; gap:12px; }
.forum-card { cursor:pointer; transition:box-shadow .15s; }
.forum-card:hover { box-shadow:0 4px 16px rgba(30,64,175,.12); }
.forum-card-head { display:flex; align-items:center; gap:8px; flex-wrap:wrap; margin-bottom:6px; }
.forum-cat { background:#e0edff; color:#1e40af; font-size:12px; padding:2px 8px; border-radius:10px; }
.forum-badge.pin { background:#fff3cd; color:#a05a00; font-size:12px; padding:2px 8px; border-radius:10px; }
.forum-badge.lock { background:#fde2e2; color:#c62828; font-size:12px; padding:2px 8px; border-radius:10px; }
.forum-meta { font-size:12px; color:var(--text-soft); }
.forum-title { font-size:16px; font-weight:600; color:#0f2744; }
.forum-excerpt { font-size:14px; color:#334155; margin-top:4px; line-height:1.5; }
.forum-foot { font-size:12px; color:var(--text-soft); margin-top:8px; }
.forum-content { font-size:15px; color:#1e293b; }
.forum-comment { border-top:1px solid #eef2f7; padding:10px 0; }
.forum-comment-head { font-size:13px; color:#334155; }
.forum-comment-body { font-size:14px; color:#1e293b; margin-top:4px; line-height:1.6; white-space:pre-wrap; }
.forum-row { display:flex; align-items:center; justify-content:space-between; gap:12px; padding:8px 0; border-top:1px solid #eef2f7; font-size:14px; }
.forum-note { font-size:13px; color:var(--text-soft); padding:8px 0; }

/* 驳回理由弹窗 */
.reject-dialog { padding:2px 4px; }
.reject-dialog .rd-title { font-size:16px; font-weight:700; margin:2px 0 14px; color:var(--text); }
.reject-dialog .rd-hint { font-size:12px; color:var(--text-soft); margin:8px 0 4px; }

/* 主页宣传栏 */
.promo { margin-bottom: 18px; }
.promo-banners { position: relative; border-radius: var(--radius); overflow: hidden; box-shadow: var(--shadow); background: var(--card); }
.promo-banner { display: none; }
.promo-banner.on { display: block; }
.promo-banner img { width: 100%; max-height: 300px; object-fit: cover; display: block; }
.promo-cap { position: absolute; left: 0; right: 0; bottom: 0; padding: 26px 18px 12px; color: #fff; font-size: 16px; font-weight: 600; background: linear-gradient(transparent, rgba(0,0,0,.55)); }
.promo-nav { display: flex; align-items: center; justify-content: center; gap: 10px; margin-top: 8px; }
.promo-nav button { width: 30px; height: 30px; border-radius: 50%; border: 1px solid var(--border); background: #fff; cursor: pointer; font-size: 18px; line-height: 1; color: var(--text-soft); }
.promo-nav button:hover { color: var(--primary); border-color: var(--primary); }
.promo-dots { display: flex; gap: 6px; }
.promo-dots span { width: 8px; height: 8px; border-radius: 50%; background: #cbd5e1; cursor: pointer; transition: .15s; }
.promo-dots span.on { background: var(--primary); }
.promo-notices { margin-top: 12px; background: var(--card); border: 1px solid var(--border); border-radius: var(--radius); box-shadow: var(--shadow); padding: 12px 14px; }
.promo-notices-head { font-weight: 600; margin-bottom: 4px; }
.promo-notice { display: flex; align-items: center; gap: 10px; padding: 7px 0; border-top: 1px dashed var(--border); font-size: 14px; }
.promo-notice:first-of-type { border-top: none; }
.pn-tag { flex-shrink: 0; font-size: 12px; color: #fff; background: var(--primary); border-radius: 6px; padding: 1px 7px; }
.pn-title { color: var(--text); font-weight: 500; }
.pn-title:hover { color: var(--primary); }
.pn-sum { color: var(--text-soft); font-size: 13px; margin-left: auto; flex-shrink: 0; max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.pn-body { color: var(--text); font-size: 13px; line-height: 1.6; margin-top: 6px; padding: 8px 10px; background: var(--bg); border-radius: 6px; border-left: 3px solid var(--primary); word-break: break-word; }
.pn-body-long { max-height: 42px; overflow: hidden; position: relative; }
.pn-body-expand { max-height: none; }
.pn-toggle { display: inline-block; margin-top: 4px; padding: 2px 10px; font-size: 12px; color: var(--primary); background: none; border: 1px solid var(--primary); border-radius: 12px; cursor: pointer; transition: .15s; }
.pn-toggle:hover { background: var(--primary); color: #fff; }
.ann-form .form-row { margin-bottom: 12px; }
.ann-form label { display: block; font-size: 13px; color: var(--text-soft); margin-bottom: 5px; }
.ann-form input, .ann-form select { width: 100%; padding: 9px 11px; border: 1px solid var(--border); border-radius: 9px; font-size: 14px; }
.ann-form .req { color: var(--bad); }
.ann-form textarea { width: 100%; min-height: 120px; padding: 10px 12px; border: 1px solid var(--border); border-radius: 8px; font-size: 14px; line-height: 1.6; resize: vertical; font-family: inherit; background: var(--bg); color: var(--text); box-sizing: border-box; }
.ann-form textarea:focus { outline: none; border-color: var(--primary); box-shadow: 0 0 0 3px rgba(var(--primary-rgb, 59,130,246),.15); }
.ann-chars { float: right; font-size: 12px; color: var(--muted); margin-top: 4px; }
.ann-chars.warn { color: #f59e0b; }

/* 宣传栏 - 海报上传框 */
.ann-upload-box { position: relative; border: 2px dashed var(--border); border-radius: 10px; padding: 20px; text-align: center; cursor: pointer; transition: .15s; background: var(--bg); }
.ann-upload-box:hover { border-color: var(--primary); background: var(--primary-light); }
.ann-upload-box input[type="file"] { position: absolute; inset: 0; opacity: 0; cursor: pointer; }
.ann-upload-hint { font-size: 14px; color: var(--text-soft); pointer-events: none; }
.ann-upload-box:hover .ann-upload-hint { color: var(--primary); }
#af_imgPrev { margin-top: 8px; }
.ann-img-list { display: flex; flex-wrap: wrap; gap: 10px; }
.ann-img-list > .dim { font-size: 13px; }
.ann-img-wrap { position: relative; width: calc(50% - 5px); }
.ann-img-wrap img { width: 100%; height: 120px; object-fit: cover; border-radius: 8px; border: 1px solid var(--border); display: block; }
.ann-img-wrap .ann-del-img { position: absolute; top: 6px; right: 6px; font-size: 12px; padding: 3px 8px; background: rgba(0,0,0,.6); color: #fff; border-radius: 6px; border: none; cursor: pointer; backdrop-filter: blur(4px); }
.ann-img-wrap .ann-del-img:hover { background: rgba(220,38,38,.85); }
.ann-img-wrap #af_delImg:hover { background: rgba(220,38,38,.85); }
#af_imgPrev .dim { font-size: 13px; }

/* 裁剪弹窗 */
.crop-modal { padding: 0; overflow: hidden; }
.cm-title { padding: 14px 18px 10px; font-size: 15px; font-weight: 600; border-bottom: 1px solid var(--border); }
.cm-title .dim { font-weight: normal; font-size: 12px; }
.cm-img-wrap { max-height: 60vh; overflow: hidden; background: #000; }
.cm-img-wrap img { display: block; max-width: 100%; }
.cm-bar { padding: 12px 18px; display: flex; justify-content: flex-end; gap: 8px; border-top: 1px solid var(--border); }
.cm-bar button[disabled] { opacity: 0.6; cursor: not-allowed; }
#cropMask { z-index: 10000; }

/* 主题管理 */
.theme-row { display: flex; align-items: center; gap: 8px; margin: 6px 0; }
.theme-row .th-sep { color: var(--text-soft); font-size: 13px; }
.theme-row select, .theme-row input { padding: 7px 9px; border: 1px solid var(--border); border-radius: 8px; font-size: 14px; }
.theme-row input { width: 84px; }

/* ============ 主题皮肤（切换 data-theme 即可整体换肤） ============ */
/* 春节红金 */
[data-theme="spring"] {
  --primary: #c0392b;
  --primary-dark: #962d22;
  --primary-light: #fdecea;
  --accent: #d4af37;
  --cyan: #e67e22;
  --sidebar-bg: #7a1f1f;
  --grad-tech: linear-gradient(135deg, #c0392b 0%, #e67e22 55%, #f1c40f 100%);
  --shadow: 0 1px 2px rgba(122,31,31,.08), 0 6px 18px rgba(122,31,31,.08);
}
/* 国庆红金 */
[data-theme="national"] {
  --primary: #c8102e;
  --primary-dark: #9e0c24;
  --primary-light: #fdecef;
  --accent: #d4af37;
  --cyan: #e63946;
  --sidebar-bg: #8a0f1e;
  --grad-tech: linear-gradient(135deg, #c8102e 0%, #d4af37 100%);
  --shadow: 0 1px 2px rgba(138,15,30,.08), 0 6px 18px rgba(138,15,30,.08);
}
.reject-dialog textarea { width:100%; }

/* ================= 主界面装饰动效 ================= */
.deco-wrap { position: fixed; z-index: 40; pointer-events: auto; cursor: grab; filter: drop-shadow(0 4px 10px rgba(0,0,0,.18)); }
.deco-wrap:active { cursor: grabbing; }
.deco { display: block; }
.deco-css { user-select: none; }
.anim-rotate { animation: decoRotate 4s linear infinite; }
.anim-breath { animation: decoBreath 2.2s ease-in-out infinite; }
.anim-blink { animation: decoBlink 1.3s ease-in-out infinite; }
@keyframes decoRotate { from { transform: rotate(0deg); } to { transform: rotate(360deg); } }
@keyframes decoBreath { 0%,100% { transform: scale(1); } 50% { transform: scale(1.18); } }
@keyframes decoBlink { 0%,100% { opacity: 1; } 50% { opacity: .35; } }
.deco-lottie { width: 64px; height: 64px; }
.df-preset-icon { padding: 4px 8px; font-size: 18px; }
.df-lottie-pick.on { background: var(--primary); color: #fff; border-color: var(--primary); }

/* ── 选择性一键导入：人员选择器模态框 ── */
.pp-overlay { position: fixed; inset: 0; z-index: 99999; background: rgba(0,0,0,.45); display: flex; align-items: center; justify-content: center; animation: ppFadeIn .15s ease-out; }
@keyframes ppFadeIn { from { opacity: 0 } to { opacity: 1 } }
.pp-box { width: 420px; max-width: 92vw; max-height: 80vh; background: #fff; border-radius: 14px; box-shadow: 0 20px 60px rgba(0,0,0,.2); display: flex; flex-direction: column; overflow: hidden; }
.pp-head { display: flex; align-items: center; justify-content: space-between; padding: 14px 18px; border-bottom: 1px solid var(--border); font-weight: 600; font-size: 15px; }
.pp-close { background: none; border: none; font-size: 20px; cursor: pointer; color: var(--text-soft); padding: 0 4px; }
.pp-close:hover { color: #c0392b; }
.pp-body { padding: 14px 18px; overflow-y: auto; flex: 1; }
.pp-hint { font-size: 12.5px; color: var(--text-soft); margin-bottom: 10px; }
.pp-list { display: flex; flex-direction: column; gap: 6px; }
.pp-item { display: flex; align-items: center; gap: 10px; padding: 8px 10px; border-radius: 8px; cursor: pointer; transition: background .15s; }
.pp-item:hover { background: var(--primary-light); }
.pp-item input[type=checkbox], .pp-item input[type=radio] { width: 17px; height: 17px; accent-color: var(--primary); flex-shrink: 0; }
.pp-name { font-size: 14px; font-weight: 500; }
.pp-role { font-size: 12px; color: var(--text-soft); margin-left: auto; }
.pp-item.pp-header { cursor: default; background: #f5f6f8; border-radius: 6px; padding: 6px 10px; }
.pp-item.pp-header:hover { background: #f5f6f8; }
.pp-h-check { width: 17px; flex-shrink: 0; }
.pp-h-name { font-size: 13px; font-weight: 600; color: var(--text-soft); }
.pp-h-role { font-size: 13px; font-weight: 600; color: var(--text-soft); margin-left: auto; }
.pp-foot { display: flex; justify-content: flex-end; gap: 8px; padding: 12px 18px; border-top: 1px solid var(--border); background: #fafbfc; }
#ppCnt { color: var(--primary); font-weight: 700; }

/* ── 选择性一键导入：签名区布局 ── */
.si-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; margin-top: 10px; }
.si-cell { display: flex; flex-direction: column; gap: 6px; }
.si-cell label { font-size: 13.5px; font-weight: 600; color: var(--text-dark); }
.si-wrap { display: flex; flex-direction: column; gap: 6px; }
.si-bar { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.si-btn { white-space: nowrap; }
.si-names { font-size: 13px; color: var(--text-dark); font-weight: 500; }
.si-names:not(.si-filled) { color: var(--text-soft); font-style: italic; }
.si-time { margin: 0 !important; }
.si-time label { font-size: 12px; font-weight: normal; }
.si-time input { font-size: 13px; }

/* =====================================================================
   主题皮肤系统（每用户可切换）
   - 默认基底：文件顶部 :root（v2 浅色商务，无 .skin-* 时作为 fallback）
   - 商务轻奢（.skin-luxe）：暖棕 + 香槟金 + 奶油米白，B 端轻奢风
   - 清透海蓝（.skin-ocean）：浅海蓝毛玻璃，航运科技风、导航清晰护眼
   - 浅紫蓝玻璃（.skin-lilac）：浅紫蓝新拟态菜单胶囊，玻璃通透商务
   ===================================================================== */

/* 商务轻奢调色板：暖棕 + 香槟金 + 奶油米白（恢复设计稿配色，曾丢失回退到默认蓝） */
body.skin-luxe {
  --bg: #f4eede;                                  /* 奶油米白主内容区 */
  --card: rgba(255,253,247,0.86);                 /* 卡片：毛玻璃，护眼不透明 */
  --text: #2b2118;                                /* 深棕黑文字 */
  --text-soft: #614d39;                           /* 次级文字 */
  --accent: #c9a86a;                              /* 香槟金 */
  --accent-2: #b07a3c;                            /* 部门工作区暖铜对比色 */
  --accent-rgb: 201,168,106;
  --accent-light: #e7d4a6;                        /* 浅香槟（选中/标题） */
  --accent-soft: #efe7d4;                         /* 浅奶油底 */
  --primary: #c9a86a;                             /* 主行动色（香槟金） */
  --primary-dark: #a8823f;                        /* 深香槟 */
  --primary-light: #efe7d4;                       /* 浅金底（表头/标签） */
  --sidebar-bg: linear-gradient(165deg, #2a2018 0%, #3a2c1f 100%); /* 深暖棕褐侧栏 */
  --grad-tech: linear-gradient(135deg,#e7d4a6 0%,#c9a86a 45%,#a8823f 100%);
  --border: rgba(201,168,106,0.35);               /* 薄金边框 */
  --gold-line: rgba(201,168,106,0.35);
  --shadow: 0 10px 34px rgba(72,52,26,0.10);
  --radius: 16px;
}
/* 侧栏：深暖棕褐毛玻璃（blur 12px） */
body.skin-luxe .sidebar {
  background: var(--sidebar-bg);
  color: #d8c7a8;
  border-right: 1px solid rgba(201,168,106,0.22);
  box-shadow: 4px 0 24px rgba(40,28,16,0.18);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
}

body.skin-luxe .sidebar .brand .mark {
  background: var(--grad-tech); color: #3a2c1f;
  box-shadow: 0 0 0 3px rgba(201,168,106,.18), 0 6px 16px rgba(168,130,63,.32);
}
body.skin-luxe .sidebar .brand h2 { color: var(--accent-light); }
body.skin-luxe .sidebar .brand span { color: #d9c39a; letter-spacing: 1.2px; }
body.skin-luxe .nav a { color: #d8c7a8; }
body.skin-luxe .nav a::before { background: var(--accent); }
body.skin-luxe .nav a:hover { background: rgba(201,168,106,.12); color: #f4e9d2; }
body.skin-luxe .nav a.active {
  background: linear-gradient(90deg, rgba(201,168,106,.26), rgba(201,168,106,.10) 60%, transparent);
  color: var(--accent-light); font-weight: 600;
  box-shadow: inset 0 0 0 1px rgba(201,168,106,.45);
}
body.skin-luxe .nav a.active::before { height: 60%; }
body.skin-luxe .nav .nav-group { color: var(--accent); background: linear-gradient(90deg, color-mix(in srgb, var(--accent) 10%, transparent), transparent); }
body.skin-luxe .nav .nav-group:hover { background: linear-gradient(90deg, color-mix(in srgb, var(--accent) 20%, transparent), transparent); }
body.skin-luxe .nav .nav-group::before { background: var(--accent); }
body.skin-luxe .sidebar .me { color: #c9b590; border-top: 1px solid rgba(201,168,106,.18); }
body.skin-luxe .sidebar .me b { color: var(--accent-light); }
body.skin-luxe .sidebar .side-ver { color: rgba(231,212,166,.35); }

/* 顶栏：奶油米白毛玻璃 */
body.skin-luxe .topbar {
  background: rgba(255,253,247,0.82);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  border-bottom: 1px solid var(--border);
}
body.skin-luxe .menu-btn { color: var(--primary); }

/* 卡片 / 模块：克制毛玻璃，薄金边，柔和微高光（blur 8px，不透明度 0.86） */
body.skin-luxe .card,
body.skin-luxe .module-card {
  background: var(--card);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  border: 1px solid var(--border);
  box-shadow: var(--shadow), inset 0 1px 0 rgba(255,255,255,.6);
}
body.skin-luxe .module-card:hover { border-color: var(--primary); box-shadow: 0 8px 22px rgba(168,130,63,.16); }
body.skin-luxe .module-card .mi { background: var(--primary-light); color: var(--primary); }
body.skin-luxe .card h4 { color: var(--text); }
body.skin-luxe .card .big,
body.skin-luxe .kpi-val { color: var(--primary); }

/* 表格 */
body.skin-luxe .table,
body.skin-luxe .tbl { background: rgba(255,253,247,0.82); border-radius: var(--radius); overflow: hidden; box-shadow: var(--shadow); }
body.skin-luxe .table th, body.skin-luxe .table td,
body.skin-luxe .tbl th, body.skin-luxe .tbl td { border-bottom: 1px solid var(--border); color: var(--text); }
body.skin-luxe .table thead th,
body.skin-luxe .tbl th { background: var(--primary-light); color: var(--primary-dark); }
body.skin-luxe .table tbody tr:nth-child(even) td,
body.skin-luxe .tbl tbody tr:nth-child(even) td { background: rgba(201,168,106,.06); }
body.skin-luxe .table tbody tr:hover td,
body.skin-luxe .tbl tbody tr:hover td { background: rgba(201,168,106,.12); }

/* 表单 */
body.skin-luxe .form-row input,
body.skin-luxe .form-row select,
body.skin-luxe .form-row textarea,
body.skin-luxe .ann-form input,
body.skin-luxe .ann-form select,
body.skin-luxe .ann-form textarea,
body.skin-luxe input, body.skin-luxe select, body.skin-luxe textarea {
  background: rgba(255,253,247,0.85); border: 1px solid var(--border); color: var(--text);
}
body.skin-luxe .form-row input:focus,
body.skin-luxe .form-row select:focus,
body.skin-luxe .form-row textarea:focus { border-color: var(--primary); box-shadow: 0 0 0 3px rgba(201,168,106,.18); }

/* 按钮：幽灵按钮走香槟金描边 */
body.skin-luxe .btn.ghost { background: rgba(255,253,247,0.7); color: var(--primary-dark); border: 1px solid var(--border); }
body.skin-luxe .btn.ghost:hover { background: rgba(201,168,106,.16); color: var(--primary-dark); }

/* 标签 / 章节 / 选项 */
body.skin-luxe .tag { background: var(--primary-light); color: var(--primary-dark); border: 1px solid var(--border); }
body.skin-luxe .tag-soft { background: rgba(201,168,106,.12); color: var(--primary-dark); }
body.skin-luxe .section-title { color: var(--text); }
body.skin-luxe .section-title::before { background: var(--grad-tech); }
body.skin-luxe .tabs .tab,
body.skin-luxe .subtabs a,
body.skin-luxe .seg-btn { background: rgba(255,253,247,0.7); border: 1px solid var(--border); color: var(--text-soft); }
body.skin-luxe .tabs .tab.active { background: var(--primary); color: #fff; border-color: var(--primary); }
body.skin-luxe .chip { background: rgba(255,253,247,0.8); border: 1px solid var(--border); color: var(--text-soft); }
body.skin-luxe .chip:hover { border-color: var(--primary); color: var(--text); }

/* 状态徽标 */
body.skin-luxe .badge.wait { background: rgba(201,168,106,.18); color: var(--primary-dark); }
body.skin-luxe .badge.ok { background: rgba(22,163,74,.14); color: #15803d; }
body.skin-luxe .badge.bad { background: rgba(220,38,38,.14); color: #b91c1c; }
body.skin-luxe .badge.draft { background: rgba(122,86,42,.14); color: #7a5429; }
body.skin-luxe .badge.off { background: rgba(122,86,42,.10); color: #8a6a45; }

/* 弹窗 / 面板 / 页脚 */
body.skin-luxe .modal,
body.skin-luxe .panel { background: rgba(255,253,247,0.96); border: 1px solid var(--border); }
body.skin-luxe .modal h3,
body.skin-luxe .panel-head h4 { color: var(--text); border-bottom: 1px solid var(--border); }
body.skin-luxe .app-footer { color: var(--text-soft); border-top: 1px solid var(--border); }

/* 提示 */
body.skin-luxe .alert-warn { background: rgba(201,168,106,.12); border: 1px solid rgba(201,168,106,.32); color: var(--primary-dark); }
body.skin-luxe .alert-success { background: rgba(22,163,74,.10); border: 1px solid rgba(34,197,94,.3); color: #15803d; }
body.skin-luxe .alert-tip { background: rgba(2,132,199,.08); border: 1px solid rgba(2,132,199,.28); color: #0e7490; }
body.skin-luxe .hint,
body.skin-luxe .hint-inline { color: var(--text-soft); }
body.skin-luxe .hint-inline b { color: var(--primary-dark); }

/* KPI */
body.skin-luxe .kpi { background: var(--card); border: 1px solid var(--border); }
body.skin-luxe .kpi-label { color: var(--text-soft); }
body.skin-luxe .kpi-sub { color: var(--text-soft); }
body.skin-luxe .kpi .kpi-ic { background: var(--primary-light); color: var(--primary); }
.tree-dept { font-size: 16px; font-weight: 700; margin: 0 0 10px; color: var(--accent, var(--primary)); }
.tree-card { background: var(--card); border: 1px solid var(--border); border-radius: 12px; padding: 12px 14px; margin-bottom: 12px; }
.tree-breadcrumb { font-size: 13px; color: var(--text-soft, #64748b); margin-bottom: 10px; display: flex; flex-wrap: wrap; align-items: center; gap: 6px; }
.tree-breadcrumb .tree-sep { opacity: .5; }
.tree-breadcrumb .badge { margin-left: 4px; }
.tree-rows { display: flex; flex-direction: column; gap: 6px; }
.tree-row { display: flex; align-items: center; gap: 12px; font-size: 13px; padding: 8px 10px; border-radius: 8px; background: var(--bg-soft, #f8fafc); cursor: pointer; transition: background .15s; }
.tree-row:hover { background: var(--primary-ghost, rgba(14,116,144,.08)); }
.tree-row .tree-id { font-variant-numeric: tabular-nums; color: var(--text-soft); min-width: 36px; }
.tree-row .tree-done { color: var(--success, #16a34a); font-weight: 500; }
.tree-row .tree-pending { color: var(--warn, #ca8a04); }
.tree-row .tree-actions { margin-left: auto; display: flex; align-items: center; gap: 10px; }
.tree-row .tree-actions a { color: var(--primary); text-decoration: none; }
.tree-row .tree-actions a:hover { text-decoration: underline; }
.tree-toolbar { display: flex; align-items: center; gap: 10px; margin-bottom: 12px; }
.chk { display: inline-flex; align-items: center; gap: 4px; font-size: 13px; cursor: pointer; user-select: none; }
.sm-chk { margin-right: 6px; }
.btn.danger { color: #fff; }
.btn.danger:hover { filter: brightness(.94); }
.tree-row .sm-row-del { padding: 4px 10px; }

/* ============ 岸基 OA 主页 / 报表汇总 三段式 ============ */
.oa-home-hero, .oa-hero {
  display: flex; align-items: center; gap: 16px;
  background: var(--grad-tech); color: #fff; border-radius: var(--radius);
  padding: 18px 22px; box-shadow: var(--shadow-lg); margin-bottom: 16px;
}
.oa-home-hero-ic, .oa-hero-ic { width: 46px; height: 46px; border-radius: 12px; background: rgba(255,255,255,.18); display: flex; align-items: center; justify-content: center; flex-shrink: 0; }
.oa-home-hero-ic svg, .oa-hero-ic svg { width: 26px; height: 26px; }
.oa-home-hero-title, .oa-hero-title { font-size: 20px; font-weight: 700; letter-spacing: .5px; }
.oa-home-hero-sub, .oa-hero-sub { font-size: 12.5px; opacity: .9; margin-top: 3px; }
.oa-dept-sel { align-self: center; }
.oa-hero-main { flex: 1; min-width: 0; }
.oa-cog-btn { background: rgba(255,255,255,.14); color: #fff; border: 1px solid rgba(255,255,255,.32); padding: 6px 12px; border-radius: 10px; font-size: 12px; cursor: pointer; transition: .15s; align-self: center; }
.oa-cog-btn:hover { background: rgba(255,255,255,.24); border-color: rgba(255,255,255,.6); }

/* 统计卡 L1 */
.oa-stats { display: grid; grid-template-columns: repeat(4, 1fr); gap: 12px; margin-bottom: 18px; }
.oa-stat { background: var(--card); border: 1px solid var(--border); border-radius: var(--radius); padding: 14px 16px; box-shadow: var(--shadow); position: relative; overflow: hidden; }
.oa-stat::before { content: ''; position: absolute; left: 0; top: 0; bottom: 0; width: 4px; background: var(--primary); }
.oa-stat.st-wait::before { background: var(--warn); }
.oa-stat.st-ok::before { background: var(--ok); }
.oa-stat.st-bad::before { background: var(--bad); }
.oa-stat-n { font-size: 28px; font-weight: 800; color: var(--text); line-height: 1.1; }
.oa-stat.st-wait .oa-stat-n { color: #b45309; }
.oa-stat.st-ok .oa-stat-n { color: #15803d; }
.oa-stat.st-bad .oa-stat-n { color: #b91c1c; }
.oa-stat-l { font-size: 12.5px; color: var(--text-soft); margin-top: 4px; }

/* 部门门户卡片 */
.oa-home-section-title { font-size: 15px; font-weight: 600; color: var(--text); margin: 4px 0 12px; }
.oa-dept-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); gap: 14px; }
.oa-dept-card { background: var(--card); border: 1px solid var(--border); border-radius: var(--radius); padding: 16px; box-shadow: var(--shadow); transition: .15s; display: flex; flex-direction: column; gap: 12px; }
.oa-dept-card:hover { transform: translateY(-2px); border-color: var(--primary); box-shadow: var(--shadow-lg); }
.oa-dept-head { display: flex; align-items: center; gap: 8px; font-weight: 700; font-size: 16px; }
.oa-dept-ic { color: var(--primary); display: inline-flex; }
.oa-dept-ro { margin-left: auto; font-size: 11px; font-weight: 500; color: var(--text-soft); background: var(--bg); border: 1px solid var(--border); padding: 2px 8px; border-radius: 20px; }
.oa-dept-counts { display: flex; gap: 6px; font-size: 12.5px; color: var(--text-soft); }
.oa-dc { flex: 1; background: var(--bg); border-radius: 8px; padding: 8px 6px; text-align: center; }
.oa-dc b { display: block; font-size: 18px; font-weight: 700; }
.st-wait-t { color: #b45309; } .st-ok-t { color: #15803d; } .st-bad-t { color: #b91c1c; }
.oa-dept-links { display: flex; gap: 8px; }
.oa-dept-links .btn { flex: 1; justify-content: center; }
.oa-dept-main { display: flex; align-items: center; justify-content: space-between; gap: 8px; flex: 1; padding: 10px 14px; border-radius: 10px; background: linear-gradient(135deg, var(--primary), var(--primary-2, #0891b2)); color: #fff; font-weight: 600; font-size: 13.5px; text-decoration: none; box-shadow: var(--shadow); transition: .15s; letter-spacing: .3px; }
.oa-dept-main:hover { transform: translateY(-1px); filter: brightness(1.06); text-decoration: none; color: #fff; box-shadow: var(--shadow-lg); }
.oa-dept-main::after { content: '›'; font-size: 18px; line-height: 1; opacity: .85; }

/* 区段（审批区 / 归档区） */
.oa-zone { background: var(--card); border-radius: var(--radius); box-shadow: var(--shadow); margin-bottom: 18px; overflow: hidden; border: 1px solid var(--border); }
.oa-zone-approval { border-left: 4px solid var(--warn); }
.oa-zone-archive { border-left: 4px solid var(--ok); }
.oa-zone-head { display: flex; align-items: center; gap: 12px; padding: 14px 18px; border-bottom: 1px solid var(--border); }
.oa-zone-approval .oa-zone-head { background: linear-gradient(90deg, #fffbeb, #fff); }
.oa-zone-archive .oa-zone-head { background: linear-gradient(90deg, #f0fdf4, #fff); }
.oa-zone-ic { font-size: 20px; }
.oa-zone-tt { display: flex; flex-direction: column; flex: 1; min-width: 0; }
.oa-zone-title { font-size: 16px; font-weight: 700; color: var(--text); }
.oa-zone-desc { font-size: 12px; color: var(--text-soft); margin-top: 2px; }

/* 审批区检索工具条：暖色胶囊搜索 + 焦点环 + 结果数标签 */
.oa-approval-tools { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.oa-search {
  display: inline-flex; align-items: center; gap: 8px;
  padding: 6px 10px 6px 12px; min-width: 280px;
  background: rgba(255, 251, 235, .85); /* 暖色底 */
  border: 1px solid #fde68a;
  border-radius: 999px; /* 胶囊 */
  box-shadow: inset 0 0 0 1px rgba(251, 191, 36, 0);
  transition: box-shadow .15s, border-color .15s, background .15s;
}
.oa-search:hover { background: #fffbeb; border-color: #fcd34d; }
.oa-search:focus-within { background: #fff; border-color: #f59e0b; box-shadow: 0 0 0 3px rgba(245, 158, 11, .18); }
.oa-search-ic { display: inline-flex; color: #b45309; flex-shrink: 0; }
.oa-search-ic svg { width: 16px; height: 16px; display: block; }
.oa-search input {
  flex: 1; min-width: 0; border: 0; outline: 0; background: transparent;
  font-size: 13px; color: var(--text); padding: 4px 0;
}
.oa-search input::placeholder { color: #a16207; opacity: .75; }
.oa-search-clear {
  display: none;  /* 有内容时才显示 */
  width: 20px; height: 20px; border: 0; border-radius: 50%;
  background: rgba(180, 83, 9, .15); color: #b45309;
  font-size: 14px; line-height: 1; cursor: pointer; padding: 0;
}
.oa-search-clear:hover { background: rgba(180, 83, 9, .3); }
.oa-search.has-value .oa-search-clear { display: inline-flex; align-items: center; justify-content: center; }

.oa-tool-btn {
  border: 1px solid #fde68a; background: #fffbeb; color: #b45309;
  font-size: 12.5px; padding: 7px 12px; border-radius: 999px;
  cursor: pointer; transition: .15s; font-weight: 500;
}
.oa-tool-btn:hover { background: #fef3c7; border-color: #f59e0b; }

.oa-result-tag {
  font-size: 12px; color: var(--text-soft);
  padding: 4px 10px; border-radius: 999px;
  background: rgba(120, 113, 108, .08);
}
.oa-result-tag.is-empty { background: var(--bad-bg); color: #b91c1c; }
.oa-result-tag.is-hit   { background: var(--warn-bg); color: #92400e; }

.oa-approval-body, .oa-archive-body { padding: 14px 18px; }
.oa-approve-tbl { margin: 0; box-shadow: none; }
.oa-approve-tbl tbody tr:hover td { background: var(--warn-bg); }
.oa-reject-reason { font-size: 11.5px; color: #b91c1c; margin-top: 2px; background: var(--bad-bg); padding: 2px 6px; border-radius: 6px; display: inline-block; }

/* 归档树（船名 → 报表名称 → 月份） */
.oa-tree-folder { border: 1px solid var(--border); border-radius: 10px; margin-bottom: 12px; overflow: hidden; }
.oa-tree-ship { display: flex; align-items: center; gap: 8px; padding: 12px 14px; background: #ecf7f1; font-weight: 700; font-size: 15px; cursor: pointer; user-select: none; }
.oa-tree-ship-body { padding: 10px 14px 14px 22px; }
.oa-tree-report { margin-top: 8px; border-left: 2px solid #bbf7d0; padding-left: 10px; }
.oa-tree-rep { display: flex; align-items: center; gap: 8px; padding: 8px 10px; background: #f0fdf4; border-radius: 8px; font-weight: 600; cursor: pointer; user-select: none; }
.oa-tree-rep-body { padding: 8px 0 4px 18px; }
.oa-tree-month { margin-top: 6px; }
.oa-tree-month-h { display: inline-block; font-size: 12.5px; color: var(--text-soft); font-weight: 600; margin-bottom: 4px; }
.oa-tree-file { display: flex; align-items: center; gap: 10px; font-size: 13px; padding: 6px 10px; border-radius: 8px; background: var(--bg); margin-bottom: 4px; transition: background .15s; }
.oa-tree-file:hover { background: rgba(0,0,0,.05); }
body.skin-ocean .oa-tree-file:hover { background: rgba(56,189,248,.12); }
body.skin-luxe .oa-tree-file:hover { background: rgba(176,141,87,.12); }
body.skin-lilac .oa-tree-file:hover { background: rgba(167,139,250,.12); }
.oa-file-meta { color: var(--text-soft); font-variant-numeric: tabular-nums; }
.oa-file-links { margin-left: auto; display: flex; align-items: center; gap: 10px; }
.oa-file-links a { color: var(--primary); text-decoration: none; }
.oa-file-links a:hover { text-decoration: underline; }
.oa-file-rev { font-size: 12px; color: var(--text-soft); }
.oa-tree-count { margin-left: auto; font-size: 12px; font-weight: 600; color: #15803d; background: #dcfce7; border-radius: 20px; padding: 1px 9px; }
.oa-caret { display: inline-block; transition: transform .15s; font-size: 12px; color: var(--text-soft); }
.oa-tree-ship.collapsed + .oa-tree-ship-body,
.oa-tree-rep.collapsed + .oa-tree-rep-body { display: none; }
.oa-tree-ship.collapsed .oa-caret,
.oa-tree-rep.collapsed .oa-caret { transform: rotate(-90deg); }

/* 已驳回 状态徽标（补齐缺失的配色） */
.st-已驳回 { background: var(--bad-bg); color: #b91c1c; }

/* 船舶上报 / 岸基上报 状态徽标基础样式与配色（待我审批、岸台待审批区块、全部报表共用） */
.st { display: inline-flex; align-items: center; padding: 2px 9px; border-radius: 20px; font-size: 12px; font-weight: 600; line-height: 1.6; white-space: nowrap; }
.st-待接收, .st-待审批 { background: #fef3c7; color: #b45309; }
.st-已批复 { background: #dcfce7; color: #15803d; }
.st-已回传 { background: #dbeafe; color: #1d4ed8; }

/* 岸台 · 待审批区块：1 张大卡片含「船舶上报」「岸基部门上报」两张小卡片 */
.oa-pending { background: var(--card); border: 1px solid var(--border); border-radius: var(--radius); box-shadow: var(--shadow); margin-bottom: 18px; overflow: hidden; }
.oa-pending-head { padding: 14px 18px; font-size: 16px; font-weight: 700; color: var(--text); border-bottom: 1px solid var(--border); background: linear-gradient(90deg, #fef2f2, #fff); }
.oa-pending-sub { font-size: 12px; font-weight: 400; color: var(--text-soft); }
.oa-pending-grid { display: grid; grid-template-columns: 1fr 1fr; }
.oa-pending-card { padding: 14px 18px; }
.oa-pending-card + .oa-pending-card { border-left: 1px solid var(--border); }
.oa-pc-head { display: flex; align-items: center; gap: 8px; font-size: 14px; font-weight: 700; margin-bottom: 10px; }
.oa-pc-ship .oa-pc-head { color: #b45309; }
.oa-pc-shore .oa-pc-head { color: #1d4ed8; }
.oa-pc-count { background: var(--bad-bg); color: #b91c1c; border-radius: 20px; padding: 1px 10px; font-size: 12px; font-weight: 700; }
.oa-pc-list { display: flex; flex-direction: column; gap: 6px; }
.oa-pc-item { display: flex; align-items: center; gap: 8px; padding: 7px 10px; border-radius: 8px; background: var(--bg); cursor: pointer; transition: .12s; font-size: 13px; }
.oa-pc-item:hover { background: var(--primary-ghost, rgba(14,116,144,.08)); transform: translateX(2px); }
.oa-pc-id { font-variant-numeric: tabular-nums; color: var(--text-soft); min-width: 34px; flex-shrink: 0; }
.oa-pc-main { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.oa-pc-empty { padding: 16px 10px; color: var(--text-soft); font-size: 13px; text-align: center; }

@media (max-width: 720px) {
  .oa-stats { grid-template-columns: repeat(2, 1fr); }
  .oa-pending-grid { grid-template-columns: 1fr; }
  .oa-pending-card + .oa-pending-card { border-left: 0; border-top: 1px solid var(--border); }
}

/* =====================================================================
   20. 清透海蓝 · 浅海蓝毛玻璃（skin-ocean）
   浅冰蓝半透明侧边栏 + 深深海蓝文字 + 极浅冰蓝主区 + 克制毛玻璃
   侧边栏 blur(12px)、0.88 不透明；卡片 blur(8px)、0.8 不透明；导航文字深蓝加粗护眼
   ===================================================================== */
body.skin-ocean {
  --bg: #eaf3fa;
  --card: rgba(255,255,255,0.8);
  --text: #243b4a;
  --text-soft: #5a7184;
  --primary: #0a6c9c;
  --primary-dark: #07537a;
  --primary-light: #dceefb;
  --accent: #1b7fb5;
  --accent-2: #2c7fa8;
  --accent-rgb: 27,127,181;
  --accent-light: #cfe6f3;
  --accent-soft: #e3f1f9;
  --border: rgba(120,180,220,.40);
  --grad-tech: linear-gradient(135deg,#1b7fb5 0%,#0a6c9c 55%,#07537a 100%);
}
body.skin-ocean {
  background:
    radial-gradient(1000px 520px at 96% -6%, rgba(27,127,181,.08), transparent 60%),
    radial-gradient(820px 460px at -4% 6%, rgba(120,180,220,.10), transparent 62%),
    var(--bg);
  background-attachment: fixed;
}

/* 侧边栏：浅冰蓝半透明毛玻璃（blur 12px，0.88），文字深蓝加粗 */
body.skin-ocean .sidebar {
  background: rgba(226,239,249,0.88);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  box-shadow: 2px 0 18px rgba(40,90,130,.12);
  color: #2c3e50;
}
body.skin-ocean .sidebar::before {
  background-image: radial-gradient(rgba(255,255,255,.55) .5px, transparent .6px);
  background-size: 4px 4px;
  mask-image: linear-gradient(180deg, rgba(0,0,0,.35), transparent 80%);
  -webkit-mask-image: linear-gradient(180deg, rgba(0,0,0,.35), transparent 80%);
}
body.skin-ocean .sidebar > * { position: relative; z-index: 1; }
body.skin-ocean .sidebar .brand { border-bottom: 1px solid rgba(120,180,220,.5); }
body.skin-ocean .sidebar .brand h2 { color: #0a6c9c; }
body.skin-ocean .sidebar .brand span { color: #5a7184; letter-spacing: 1.2px; }
body.skin-ocean .nav a { color: #2c3e50; font-weight: 600; }
body.skin-ocean .nav a::before { background: var(--accent); }
body.skin-ocean .nav a:hover { background: rgba(120,180,220,.18); color: #14304a; }
body.skin-ocean .nav a.active {
  background: rgba(186,222,240,0.92);
  color: #14304a; font-weight: 700;
  box-shadow: inset 0 0 0 1px rgba(80,160,210,.55);
}
body.skin-ocean .nav a.active::before { height: 60%; }
body.skin-ocean .nav .nav-group { color: #0a6c9c; font-weight: 700; background: linear-gradient(90deg, rgba(27,127,181,.10), transparent); }
body.skin-ocean .nav .nav-group:hover { background: linear-gradient(90deg, rgba(27,127,181,.20), transparent); }
body.skin-ocean .nav .nav-group::before { background: var(--accent); }
body.skin-ocean .sidebar .me { color: #2c3e50; border-top: 1px solid rgba(120,180,220,.5); }
body.skin-ocean .sidebar .me b { color: #0a6c9c; }
body.skin-ocean .sidebar .side-ver { color: #7a93a8; }

/* 顶栏：极浅冰蓝毛玻璃 */
body.skin-ocean .topbar {
  background: rgba(238,245,251,0.85);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  border-bottom: 1px solid var(--border);
}
body.skin-ocean .menu-btn { color: var(--primary); }

/* 卡片 / 模块：克制毛玻璃，浅蓝细边框，柔和淡阴影（blur 8px，0.8 不透明） */
body.skin-ocean .card,
body.skin-ocean .module-card {
  background: rgba(255,255,255,0.8);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  border: 1px solid var(--border);
  box-shadow: var(--shadow), inset 0 1px 0 rgba(255,255,255,.6);
}
body.skin-ocean .module-card:hover { border-color: var(--primary); box-shadow: 0 8px 22px rgba(10,108,156,.14); }
body.skin-ocean .module-card .mi { background: var(--primary-light); color: var(--primary); }
body.skin-ocean .card h4 { color: var(--text); }
body.skin-ocean .card .big,
body.skin-ocean .kpi-val { color: var(--primary); }

/* 表格 */
body.skin-ocean .table,
body.skin-ocean .tbl { background: rgba(255,255,255,0.82); border-radius: var(--radius); overflow: hidden; box-shadow: var(--shadow); }
body.skin-ocean .table th, body.skin-ocean .table td,
body.skin-ocean .tbl th, body.skin-ocean .tbl td { border-bottom: 1px solid var(--border); color: var(--text); }
body.skin-ocean .table thead th,
body.skin-ocean .tbl th { background: var(--primary-light); color: var(--primary-dark); }
body.skin-ocean .table tbody tr:nth-child(even) td,
body.skin-ocean .tbl tbody tr:nth-child(even) td { background: rgba(27,127,181,.05); }
body.skin-ocean .table tbody tr:hover td,
body.skin-ocean .tbl tbody tr:hover td { background: rgba(27,127,181,.11); }

/* 表单 */
body.skin-ocean .form-row input,
body.skin-ocean .form-row select,
body.skin-ocean .form-row textarea,
body.skin-ocean .ann-form input,
body.skin-ocean .ann-form select,
body.skin-ocean .ann-form textarea,
body.skin-ocean input, body.skin-ocean select, body.skin-ocean textarea {
  background: rgba(255,255,255,0.85); border: 1px solid var(--border); color: var(--text);
}
body.skin-ocean .form-row input:focus,
body.skin-ocean .form-row select:focus,
body.skin-ocean .form-row textarea:focus { border-color: var(--primary); box-shadow: 0 0 0 3px rgba(27,127,181,.18); }

/* 按钮：幽灵按钮走海洋蓝描边 */
body.skin-ocean .btn.ghost { background: rgba(255,255,255,0.7); color: var(--primary-dark); border: 1px solid var(--border); }
body.skin-ocean .btn.ghost:hover { background: rgba(27,127,181,.12); color: var(--primary-dark); }

/* 标签 / 章节 / 选项 */
body.skin-ocean .tag { background: var(--primary-light); color: var(--primary-dark); border: 1px solid var(--border); }
body.skin-ocean .tag-soft { background: rgba(27,127,181,.12); color: var(--primary-dark); }
body.skin-ocean .section-title { color: var(--text); }
body.skin-ocean .section-title::before { background: var(--grad-tech); }
body.skin-ocean .tabs .tab,
body.skin-ocean .subtabs a,
body.skin-ocean .seg-btn { background: rgba(255,255,255,0.7); border: 1px solid var(--border); color: var(--text-soft); }
body.skin-ocean .tabs .tab.active { background: var(--primary); color: #fff; border-color: var(--primary); }
body.skin-ocean .chip { background: rgba(255,255,255,0.8); border: 1px solid var(--border); color: var(--text-soft); }
body.skin-ocean .chip:hover { border-color: var(--primary); color: var(--text); }

/* 状态徽标 */
body.skin-ocean .badge.wait { background: rgba(202,138,4,.14); color: #92500e; }
body.skin-ocean .badge.ok { background: rgba(22,163,74,.14); color: #15803d; }
body.skin-ocean .badge.bad { background: rgba(220,38,38,.14); color: #b91c1c; }
body.skin-ocean .badge.draft { background: rgba(90,113,132,.14); color: #4a5f70; }
body.skin-ocean .badge.off { background: rgba(90,113,132,.10); color: #62798c; }

/* 弹窗 / 面板 / 页脚 */
body.skin-ocean .modal,
body.skin-ocean .panel { background: rgba(255,255,255,0.96); border: 1px solid var(--border); }
body.skin-ocean .modal h3,
body.skin-ocean .panel-head h4 { color: var(--text); border-bottom: 1px solid var(--border); }
body.skin-ocean .app-footer { color: var(--text-soft); border-top: 1px solid var(--border); }

/* 提示 */
body.skin-ocean .alert-warn { background: rgba(202,138,4,.10); border: 1px solid rgba(202,138,4,.3); color: #92500e; }
body.skin-ocean .alert-success { background: rgba(22,163,74,.10); border: 1px solid rgba(34,197,94,.3); color: #15803d; }
body.skin-ocean .alert-tip { background: rgba(2,132,199,.08); border: 1px solid rgba(2,132,199,.28); color: #0e7490; }
body.skin-ocean .hint,
body.skin-ocean .hint-inline { color: var(--text-soft); }
body.skin-ocean .hint-inline b { color: var(--primary-dark); }

/* KPI */
body.skin-ocean .kpi { background: rgba(255,255,255,0.8); border: 1px solid var(--border); }
body.skin-ocean .kpi-label { color: var(--text-soft); }
body.skin-ocean .kpi-sub { color: var(--text-soft); }
body.skin-ocean .kpi .kpi-ic { background: var(--primary-light); color: var(--primary); }

/* =====================================================================
   21. 浅紫蓝玻璃 · 新拟态毛玻璃（skin-lilac）
   浅淡紫蓝半透明侧栏 + 深紫黑文字 + 独立玻璃胶囊菜单 + 极浅灰白主区
   侧栏 blur(14px)、0.82 不透明；卡片 blur(10px)、0.8 不透明；通透玻璃质感
   ===================================================================== */
body.skin-lilac {
  --bg: #f3f2f8;
  --card: rgba(255,255,255,0.8);
  --text: #2e2740;
  --text-soft: #6a6385;
  --primary: #6d5ca8;
  --primary-dark: #5546a0;
  --primary-light: #e8e4f6;
  --accent: #7b6cc4;
  --accent-2: #8a7bd0;
  --accent-rgb: 123,108,196;
  --accent-light: #ddd6f3;
  --accent-soft: #ebe7f8;
  --border: rgba(150,130,200,.38);
  --bad: #d9486b;
  --grad-tech: linear-gradient(135deg,#9a8ad8 0%,#6d5ca8 55%,#5546a0 100%);
}
body.skin-lilac {
  background:
    radial-gradient(1000px 520px at 96% -6%, rgba(123,108,196,.07), transparent 60%),
    radial-gradient(820px 460px at -4% 6%, rgba(150,130,200,.10), transparent 62%),
    var(--bg);
  background-attachment: fixed;
}

/* 侧边栏：浅淡紫蓝半透明毛玻璃（blur 14px，0.82） */
body.skin-lilac .sidebar {
  background: rgba(230,228,248,0.82);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
  box-shadow: 2px 0 18px rgba(110,90,160,.14);
  color: #2e2740;
}
body.skin-lilac .sidebar::before {
  background-image: radial-gradient(rgba(255,255,255,.6) .5px, transparent .6px);
  background-size: 4px 4px;
  mask-image: linear-gradient(180deg, rgba(0,0,0,.3), transparent 80%);
  -webkit-mask-image: linear-gradient(180deg, rgba(0,0,0,.3), transparent 80%);
}
body.skin-lilac .sidebar > * { position: relative; z-index: 1; }
body.skin-lilac .sidebar .brand { border-bottom: 1px solid rgba(150,130,200,.45); }
body.skin-lilac .sidebar .brand h2 { color: #4a3d80; }
body.skin-lilac .sidebar .brand span { color: #7c6fb0; letter-spacing: 1.2px; }
body.skin-lilac .sidebar .brand .mark { background: var(--grad-tech); color: #fff; box-shadow: 0 0 0 3px rgba(123,108,196,.18), 0 6px 16px rgba(123,108,196,.25); }

/* 菜单项：独立玻璃胶囊面板（微弱内发光 + 柔和圆角 + 淡紫细边框） */
body.skin-lilac .nav a {
  color: #2e2740; font-weight: 600;
  background: rgba(255,255,255,0.40);
  border: 1px solid rgba(150,130,200,.42);
  border-radius: 12px;
  box-shadow: inset 0 1px 1px rgba(255,255,255,.6), 0 2px 7px rgba(120,100,170,.12);
  margin-bottom: 6px;
}
body.skin-lilac .nav a::before { display: none; }
body.skin-lilac .nav a:hover { background: rgba(255,255,255,0.55); border-color: rgba(150,130,200,.6); color: #241c38; }
body.skin-lilac .nav a.active {
  background: linear-gradient(135deg, rgba(170,155,225,.62), rgba(200,190,240,.50));
  border-color: rgba(140,110,200,.65);
  color: #2a1f44; font-weight: 700;
  box-shadow: inset 0 1px 2px rgba(255,255,255,.7), 0 3px 10px rgba(120,90,180,.22);
}
/* 父级分组标题：浅玻璃条 */
body.skin-lilac .nav .nav-group {
  color: #4a3d80; font-weight: 700;
  background: rgba(255,255,255,0.28);
  border: 1px solid rgba(150,130,200,.28);
  border-radius: 10px;
}
body.skin-lilac .nav .nav-group:hover { background: rgba(255,255,255,0.42); }
body.skin-lilac .nav .nav-group::before { background: var(--accent); }
/* 部门工作区折叠头：浅玻璃 */
body.skin-lilac .nav .nav-subhead {
  background: rgba(255,255,255,0.30);
  border: 1px solid rgba(150,130,200,.30);
  border-radius: 10px;
  color: var(--accent-2); font-weight: 800;
}
body.skin-lilac .nav .nav-subhead:hover { background: rgba(255,255,255,0.46); }
body.skin-lilac .nav .nav-subhead::before { background: var(--accent-2); }
/* 5 职能部门：玻璃胶囊 */
body.skin-lilac .nav .nav-subgroup-nested > .nav-subhead-nested {
  color: color-mix(in srgb, var(--accent-2) 82%, #2e2740);
  background: rgba(255,255,255,0.36);
  border: 1px solid rgba(150,130,200,.40);
  border-radius: 11px;
  font-weight: 600;
}
body.skin-lilac .nav .nav-subgroup-nested > .nav-subhead-nested:hover { background: rgba(255,255,255,0.5); }
body.skin-lilac .nav .nav-subgroup-nested > .nav-subhead-nested::before { display: none; }
/* 报表汇总等末级：浅玻璃 */
body.skin-lilac .nav .nav-subgroup-nested > .nav-subitems > a {
  color: #4a4366; font-weight: 500;
  background: rgba(255,255,255,0.30);
  border: 1px solid rgba(150,130,200,.30);
  border-radius: 10px;
  margin-bottom: 5px;
}
body.skin-lilac .nav .nav-subgroup-nested > .nav-subitems > a:hover { background: rgba(255,255,255,0.46); color: #2a1f44; }
body.skin-lilac .sidebar .me { color: #2e2740; border-top: 1px solid rgba(150,130,200,.45); }
body.skin-lilac .sidebar .me b { color: #4a3d80; }
body.skin-lilac .sidebar .side-ver { color: #8a7db0; }

/* 顶栏：极浅灰白毛玻璃 */
body.skin-lilac .topbar {
  background: rgba(244,243,250,0.82);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  border-bottom: 1px solid var(--border);
}
body.skin-lilac .menu-btn { color: var(--primary); }

/* 卡片 / 模块：通透毛玻璃（blur 10px，0.8 不透明，淡紫蓝细边，柔淡阴影） */
body.skin-lilac .card,
body.skin-lilac .module-card {
  background: rgba(255,255,255,0.8);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  border: 1px solid var(--border);
  box-shadow: var(--shadow), inset 0 1px 0 rgba(255,255,255,.6);
}
body.skin-lilac .module-card:hover { border-color: var(--primary); box-shadow: 0 8px 22px rgba(109,92,168,.16); }
body.skin-lilac .module-card .mi { background: var(--primary-light); color: var(--primary); }
body.skin-lilac .card h4 { color: var(--text); }
body.skin-lilac .card .big,
body.skin-lilac .kpi-val { color: var(--primary); }

/* 表格 */
body.skin-lilac .table,
body.skin-lilac .tbl { background: rgba(255,255,255,0.82); border-radius: var(--radius); overflow: hidden; box-shadow: var(--shadow); }
body.skin-lilac .table th, body.skin-lilac .table td,
body.skin-lilac .tbl th, body.skin-lilac .tbl td { border-bottom: 1px solid var(--border); color: var(--text); }
body.skin-lilac .table thead th,
body.skin-lilac .tbl th { background: var(--primary-light); color: var(--primary-dark); }
body.skin-lilac .table tbody tr:nth-child(even) td,
body.skin-lilac .tbl tbody tr:nth-child(even) td { background: rgba(123,108,196,.05); }
body.skin-lilac .table tbody tr:hover td,
body.skin-lilac .tbl tbody tr:hover td { background: rgba(123,108,196,.11); }

/* 表单 */
body.skin-lilac .form-row input,
body.skin-lilac .form-row select,
body.skin-lilac .form-row textarea,
body.skin-lilac .ann-form input,
body.skin-lilac .ann-form select,
body.skin-lilac .ann-form textarea,
body.skin-lilac input, body.skin-lilac select, body.skin-lilac textarea {
  background: rgba(255,255,255,0.85); border: 1px solid var(--border); color: var(--text);
}
body.skin-lilac .form-row input:focus,
body.skin-lilac .form-row select:focus,
body.skin-lilac .form-row textarea:focus { border-color: var(--primary); box-shadow: 0 0 0 3px rgba(123,108,196,.18); }

/* 按钮：幽灵按钮走紫蓝描边 */
body.skin-lilac .btn.ghost { background: rgba(255,255,255,0.7); color: var(--primary-dark); border: 1px solid var(--border); }
body.skin-lilac .btn.ghost:hover { background: rgba(123,108,196,.12); color: var(--primary-dark); }

/* 标签 / 章节 / 选项 */
body.skin-lilac .tag { background: var(--primary-light); color: var(--primary-dark); border: 1px solid var(--border); }
body.skin-lilac .tag-soft { background: rgba(123,108,196,.12); color: var(--primary-dark); }
body.skin-lilac .section-title { color: var(--text); }
body.skin-lilac .section-title::before { background: var(--grad-tech); }
body.skin-lilac .tabs .tab,
body.skin-lilac .subtabs a,
body.skin-lilac .seg-btn { background: rgba(255,255,255,0.7); border: 1px solid var(--border); color: var(--text-soft); }
body.skin-lilac .tabs .tab.active { background: var(--primary); color: #fff; border-color: var(--primary); }
body.skin-lilac .chip { background: rgba(255,255,255,0.8); border: 1px solid var(--border); color: var(--text-soft); }
body.skin-lilac .chip:hover { border-color: var(--primary); color: var(--text); }

/* 状态徽标 */
body.skin-lilac .badge.wait { background: rgba(202,138,4,.14); color: #92500e; }
body.skin-lilac .badge.ok { background: rgba(22,163,74,.14); color: #15803d; }
body.skin-lilac .badge.bad { background: rgba(220,38,38,.14); color: #b91c1c; }
body.skin-lilac .badge.draft { background: rgba(90,113,132,.14); color: #4a5f70; }
body.skin-lilac .badge.off { background: rgba(90,113,132,.10); color: #62798c; }

/* 弹窗 / 面板 / 页脚 */
body.skin-lilac .modal,
body.skin-lilac .panel { background: rgba(255,255,255,0.96); border: 1px solid var(--border); }
body.skin-lilac .modal h3,
body.skin-lilac .panel-head h4 { color: var(--text); border-bottom: 1px solid var(--border); }
body.skin-lilac .app-footer { color: var(--text-soft); border-top: 1px solid var(--border); }

/* 提示 */
body.skin-lilac .alert-warn { background: rgba(202,138,4,.10); border: 1px solid rgba(202,138,4,.3); color: #92500e; }
body.skin-lilac .alert-success { background: rgba(22,163,74,.10); border: 1px solid rgba(34,197,94,.3); color: #15803d; }
body.skin-lilac .alert-tip { background: rgba(2,132,199,.08); border: 1px solid rgba(2,132,199,.28); color: #0e7490; }
body.skin-lilac .hint,
body.skin-lilac .hint-inline { color: var(--text-soft); }
body.skin-lilac .hint-inline b { color: var(--primary-dark); }

/* KPI */
body.skin-lilac .kpi { background: rgba(255,255,255,0.8); border: 1px solid var(--border); }
body.skin-lilac .kpi-label { color: var(--text-soft); }
body.skin-lilac .kpi-sub { color: var(--text-soft); }
body.skin-lilac .kpi .kpi-ic { background: var(--primary-light); color: var(--primary); }

/* =====================================================================
   换肤页：皮肤选择卡片（恢复 — 之前误删）
   使用 :root + 4 个保留皮肤的色板变量驱动，靠 s.accent 内联 + s.glow 控制激活态。
   ===================================================================== */
.skin-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: 16px; margin-top: 14px; }
.skin-card {
  cursor: pointer;
  border-radius: 14px;
  overflow: hidden;
  border: 2px solid var(--border);
  background: var(--card);
  box-shadow: var(--shadow);
  transition: transform .18s ease, box-shadow .18s ease, border-color .18s ease;
  display: flex; flex-direction: column;
}
.skin-card:hover { transform: translateY(-2px); box-shadow: var(--shadow-lg); border-color: var(--primary); }
.skin-card.active { border-width: 2px; }

/* 上半：预览面板（per-skin 渐变 + 模拟窗口栏/点/卡） */
.skin-prev { position: relative; height: 120px; padding: 10px 12px; display: flex; flex-direction: column; justify-content: space-between; }
.sw-top { height: 8px; border-radius: 4px; background: rgba(255,255,255,.6); width: 60%; box-shadow: 0 1px 2px rgba(0,0,0,.18) inset; }
.sw-dot { width: 28px; height: 28px; border-radius: 50%; align-self: flex-start; }
.sw-card { flex: 1; margin-top: 8px; border-radius: 8px; border: 1px solid; background: rgba(255,255,255,.08); }

/* 下半：元数据（名称、描述、状态徽标） */
.skin-meta { padding: 12px 14px 14px; display: flex; flex-direction: column; gap: 4px; }
.skin-meta .sn { font-weight: 700; color: var(--text); font-size: 15px; }
.skin-meta .sd { color: var(--text-soft); font-size: 12.5px; line-height: 1.55; min-height: 36px; }
.skin-meta .stag {
  display: inline-block; align-self: flex-start; margin-top: 8px;
  padding: 3px 10px; border: 1px solid; border-radius: 999px;
  font-size: 12px; font-weight: 600; background: rgba(255,255,255,.65);
}

/* 浅色皮肤（ocean/lilac）：皮肤卡半透亮 */
body.skin-ocean .skin-card,
body.skin-lilac .skin-card { background: rgba(255,255,255,.82); backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px); }
body.skin-ocean .skin-meta .stag,
body.skin-lilac .skin-meta .stag { background: rgba(255,255,255,.7); }

/* 深色皮肤（luxe 为唯一保留深色款）：皮肤卡偏暗 */
body.skin-luxe .skin-card { background: rgba(28,22,18,.84); border-color: rgba(201,168,106,.28); }
body.skin-luxe .skin-card:hover { border-color: var(--accent); box-shadow: var(--shadow-lg), 0 0 22px rgba(201,168,106,.18); }
body.skin-luxe .skin-meta .sn { color: var(--accent-light); }
body.skin-luxe .skin-meta .sd { color: rgba(231,212,166,.75); }
body.skin-luxe .skin-meta .stag { background: rgba(28,22,18,.65); }

/* 全部报表「归档」按钮：可点击为深蓝主色小药丸；已归档为灰色禁用药丸 */
.btn-archive {
  display: inline-flex; align-items: center; gap: 4px;
  padding: 4px 12px; border-radius: 999px;
  font-size: 12.5px; font-weight: 600; line-height: 1.2;
  border: 1px solid var(--accent, #2563eb);
  background: var(--accent, #2563eb); color: #fff;
  cursor: pointer; white-space: nowrap;
  transition: filter .15s, transform .05s;
}
.btn-archive:hover:not(:disabled) { filter: brightness(1.08); }
.btn-archive:active:not(:disabled) { transform: translateY(1px); }
.btn-archive.is-archived,
.btn-archive:disabled {
  background: #e2e8f0; color: #64748b; border-color: #cbd5e1; cursor: not-allowed;
}
body.skin-luxe .btn-archive { background: var(--accent); border-color: var(--accent); color: #fff; }
body.skin-luxe .btn-archive.is-archived,
body.skin-luxe .btn-archive:disabled { background: rgba(201,168,106,.16); color: rgba(231,212,166,.7); border-color: rgba(201,168,106,.35); }

/* 我的报表「签收」按钮：可签收=蓝主色药丸；已签收=灰色禁用 + ✓ 标记 */
.btn-rcv {
  display: inline-flex; align-items: center; gap: 4px;
  padding: 4px 12px; border-radius: 999px;
  font-size: 12.5px; font-weight: 600; line-height: 1.2;
  border: 1px solid var(--accent, #2563eb);
  background: var(--accent, #2563eb); color: #fff;
  cursor: pointer; white-space: nowrap;
  transition: filter .15s, transform .05s;
}
.btn-rcv:hover:not(:disabled) { filter: brightness(1.08); }
.btn-rcv:active:not(:disabled) { transform: translateY(1px); }
.btn-rcv.is-done,
.btn-rcv:disabled {
  background: #e2e8f0; color: #64748b; border-color: #cbd5e1; cursor: not-allowed;
}
body.skin-ocean .btn-rcv { background: #0ea5e9; border-color: #0ea5e9; }
body.skin-ocean .btn-rcv.is-done,
body.skin-ocean .btn-rcv:disabled { background: rgba(14,165,233,.12); color: #0369a1; border-color: rgba(14,165,233,.3); }
body.skin-luxe .btn-rcv { background: var(--accent); border-color: var(--accent); color: #fff; }
body.skin-luxe .btn-rcv.is-done,
body.skin-luxe .btn-rcv:disabled { background: rgba(201,168,106,.16); color: rgba(231,212,166,.7); border-color: rgba(201,168,106,.35); }
body.skin-lilac .btn-rcv { background: #8b5cf6; border-color: #8b5cf6; }
body.skin-lilac .btn-rcv.is-done,
body.skin-lilac .btn-rcv:disabled { background: rgba(139,92,246,.12); color: #6d28d9; border-color: rgba(139,92,246,.3); }

/* =====================================================================
   雾青薄荷皮肤（.skin-mint）：清新通透护眼 · 低饱和青薄荷 · 毛玻璃
   - 主色 雾薄荷青 #87C8BC；底色 极浅薄荷灰白 #F4FAF9；边框 浅青灰 #B8D9D3
   - 文字 深青灰 #2A4240 / 次 #546E6C；无纯黑、无霓虹、无炫光
   - 侧栏毛玻璃 blur(14px) 透明度 .84；卡片毛玻璃 blur(10px) 透明度 .82
   ===================================================================== */
body.skin-mint {
  --bg: #F4FAF9;                                  /* 极浅薄荷灰白主内容区 */
  --card: rgba(255,255,255,0.82);                 /* 卡片毛玻璃 0.82 */
  --text: #2A4240;                                /* 深青灰主文字（非纯黑护眼） */
  --text-soft: #546E6C;                           /* 次级文字 */
  --accent: #87C8BC;                              /* 雾薄荷青 */
  --accent-2: #5FA99B;                            /* 部门工作区对比色（深薄荷） */
  --accent-rgb: 135,200,188;
  --accent-light: #B8D9D3;                        /* 浅青灰（选中/标题） */
  --accent-soft: #EAF5F2;                         /* 浅薄荷底 */
  --primary: #87C8BC;                             /* 主行动色 */
  --primary-dark: #5FA99B;                        /* 深薄荷 */
  --primary-light: #EAF5F2;                       /* 浅薄荷底（表头/标签） */
  --sidebar-bg: linear-gradient(165deg, rgba(232,245,242,.86) 0%, rgba(214,238,232,.80) 100%);
  --grad-tech: linear-gradient(135deg,#cdeee6 0%,#87C8BC 55%,#5FA99B 100%);
  --border: rgba(184,217,211,0.70);               /* 浅青灰边框 */
  --gold-line: rgba(184,217,211,0.70);
  --shadow: 0 8px 26px rgba(42,66,64,.08);        /* 轻薄阴影，不厚重 */
  --radius: 16px;
  /* 图表语义色：薄荷青系，避开大红大紫 */
  --c-ok: #4F9D8C;        /* 已批准 · 深薄荷绿 */
  --c-pending: #87C8BC;   /* 待审批 · 雾薄荷青 */
  --c-bad: #C2A07E;       /* 已驳回 · 柔沙陶（不刺眼，非大红） */
  --c-muted: #B8D9D3;     /* 草稿/其他 · 浅青灰 */
}
/* 柔和薄荷底纹：让毛玻璃 blur 后有可见的磨砂质感（非炫光） */
body.skin-mint::before {
  content: ""; position: fixed; inset: 0; z-index: -1; pointer-events: none;
  background:
    radial-gradient(620px 420px at 12% 6%, rgba(135,200,188,.16), transparent 60%),
    radial-gradient(540px 380px at 90% 94%, rgba(95,169,155,.12), transparent 60%),
    linear-gradient(135deg, #F4FAF9 0%, #EAF5F2 55%, #E2F1EE 100%);
}

/* 侧栏：淡雾青薄荷半透毛玻璃（blur 14px，透明度 .84），深青灰文字、不发光 */
body.skin-mint .sidebar {
  background: var(--sidebar-bg);
  color: #2A4240;
  border-right: 1px solid rgba(184,217,211,0.6);
  box-shadow: 4px 0 22px rgba(42,66,64,.10);
  backdrop-filter: blur(14px) saturate(1.25);
  -webkit-backdrop-filter: blur(14px) saturate(1.25);
}
body.skin-mint .sidebar::before { background-image: none; }   /* 隐藏深色网格纹 */
body.skin-mint .sidebar .brand { border-bottom: 1px solid rgba(184,217,211,.6); }
body.skin-mint .sidebar .brand .mark {
  background: var(--grad-tech); color: #1f4a43;
  box-shadow: 0 0 0 3px rgba(135,200,188,.18), 0 6px 16px rgba(95,169,155,.25);
}
body.skin-mint .sidebar .brand h2 { color: #2A4240; }
body.skin-mint .sidebar .brand span { color: #5FA99B; letter-spacing: 1.2px; }
/* 导航：胶囊式玻璃面板，柔和圆角、轻薄阴影，文字深青灰清晰可读 */
body.skin-mint .nav a {
  color: #3a5a57; border-radius: 12px; letter-spacing: .2px;
  background: rgba(255,255,255,.42);
  border: 1px solid rgba(184,217,211,.45);
  box-shadow: 0 1px 3px rgba(42,66,64,.05);
}
body.skin-mint .nav a::before { background: var(--accent); }
body.skin-mint .nav a:hover { background: rgba(135,200,188,.16); color: #1f4a43; border-color: rgba(135,200,188,.55); }
body.skin-mint .nav a.active {
  background: linear-gradient(90deg, rgba(135,200,188,.34), rgba(135,200,188,.14) 60%, transparent);
  color: #1f4a43; font-weight: 700;
  box-shadow: inset 0 0 0 1px rgba(95,169,155,.55), 0 2px 8px rgba(95,169,155,.15);
}
body.skin-mint .nav a.active::before { height: 60%; }
body.skin-mint .nav .nav-group { color: #5FA99B; background: linear-gradient(90deg, color-mix(in srgb, var(--accent) 12%, transparent), transparent); }
body.skin-mint .nav .nav-group::before { background: var(--accent); }
body.skin-mint .nav .nav-group:hover { background: linear-gradient(90deg, color-mix(in srgb, var(--accent) 22%, transparent), transparent); }
body.skin-mint .sidebar .me { color: #3a5a57; border-top: 1px solid rgba(184,217,211,.6); background: rgba(214,238,232,.45); }
body.skin-mint .sidebar .me b { color: #1f4a43; }
body.skin-mint .sidebar .side-ver { color: rgba(84,110,108,.45); }

/* 顶栏：薄荷毛玻璃 */
body.skin-mint .topbar {
  background: rgba(255,255,255,.74); backdrop-filter: saturate(1.3) blur(10px);
  -webkit-backdrop-filter: saturate(1.3) blur(10px);
  border-bottom: 1px solid rgba(184,217,211,.6);
}
body.skin-mint .topbar::after { background: var(--grad-tech); opacity: .5; }
body.skin-mint .menu-btn { color: #5FA99B; }

/* 卡片 / 模块：克制毛玻璃（blur 10px，0.82），薄青灰边，轻薄阴影，不厚重 */
body.skin-mint .card,
body.skin-mint .module-card {
  background: var(--card);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  border: 1px solid var(--border);
  box-shadow: var(--shadow), inset 0 1px 0 rgba(255,255,255,.7);
}
body.skin-mint .module-card:hover { border-color: var(--accent); box-shadow: 0 8px 22px rgba(95,169,155,.16); }
body.skin-mint .module-card .mi { background: var(--accent-soft); color: var(--primary-dark); }
body.skin-mint .card h4 { color: var(--text); }
body.skin-mint .kpi-val,
body.skin-mint .card .big { color: var(--primary-dark); }

/* 表格毛玻璃 */
body.skin-mint .table, body.skin-mint .tbl { background: rgba(255,255,255,.80); border-radius: var(--radius); overflow: hidden; box-shadow: var(--shadow); }
body.skin-mint .table th, body.skin-mint .tbl th,
body.skin-mint .table td, body.skin-mint .tbl td { border-bottom: 1px solid var(--border); color: var(--text); }
body.skin-mint .table thead th, body.skin-mint .tbl th { background: var(--accent-soft); color: var(--primary-dark); }
body.skin-mint .table tbody tr:nth-child(even) td,
body.skin-mint .tbl tbody tr:nth-child(even) td { background: rgba(135,200,188,.07); }
body.skin-mint .table tbody tr:hover td,
body.skin-mint .tbl tbody tr:hover td { background: rgba(135,200,188,.14); }

/* 表单毛玻璃 */
body.skin-mint .form-row input, body.skin-mint .form-row select, body.skin-mint .form-row textarea,
body.skin-mint .ann-form input, body.skin-mint .ann-form select, body.skin-mint .ann-form textarea,
body.skin-mint input, body.skin-mint select, body.skin-mint textarea {
  background: rgba(255,255,255,.82); border: 1px solid var(--border); color: var(--text);
}
body.skin-mint input:focus, body.skin-mint select:focus, body.skin-mint textarea:focus { border-color: var(--primary); box-shadow: 0 0 0 3px rgba(135,200,188,.18); }

/* 顶栏欢迎条：浅薄荷玻璃，深青灰文字 */
body.skin-mint .hero {
  background: linear-gradient(115deg, #E8F5F2 0%, #CDEDE5 52%, #B8E0D6 100%);
  color: #2A4240; box-shadow: 0 10px 28px rgba(42,66,64,.10);
}
body.skin-mint .hero-bg { background-image: radial-gradient(520px 200px at 88% 0%, rgba(135,200,188,.30), transparent 60%); background-size: auto; opacity: 1; }
body.skin-mint .hero-hi { color: #2A4240; }
body.skin-mint .hero-hi b { color: #2f8f7e; }
body.skin-mint .hero-sub { color: #546E6C; }
body.skin-mint .hero-dot { background: #5FA99B; }
body.skin-mint .btn.ghost.light { background: rgba(255,255,255,.55); color: #2A4240; border-color: rgba(184,217,211,.8); }
body.skin-mint .btn.ghost.light:hover { background: rgba(255,255,255,.78); }

/* 图表：雾青薄荷色系（青、浅绿灰），避开大红大紫 */
body.skin-mint .chart stop[offset="0%"] { stop-color: #B7E3D8; }
body.skin-mint .chart stop[offset="100%"] { stop-color: #5FA99B; }
body.skin-mint .ch-grid { stroke: rgba(84,110,108,.16); }
body.skin-mint .ch-axis { fill: #546E6C; }
body.skin-mint .ch-val { fill: #2A4240; }
body.skin-mint .donut > circle:first-of-type { stroke: #E3EFEB; }
body.skin-mint .dn-num { fill: #2A4240; }
body.skin-mint .dn-cap { fill: #546E6C; }
body.skin-mint .dl-item span { color: #2A4240; }
body.skin-mint .hb-l { color: #2A4240; }
body.skin-mint .hb-t i { background: linear-gradient(90deg,#B7E3D8,#5FA99B); }
body.skin-mint .hb-v { color: #2A4240; }

/* 签收 / 归档按钮：薄荷青主色药丸 */
body.skin-mint .btn-rcv { background: var(--accent); border-color: var(--accent); color: #fff; }
body.skin-mint .btn-rcv:hover:not(:disabled) { filter: brightness(1.05); }
body.skin-mint .btn-rcv.is-done,
body.skin-mint .btn-rcv:disabled { background: rgba(135,200,188,.14); color: #3f8f80; border-color: rgba(135,200,188,.4); }
body.skin-mint .btn-archive { background: var(--accent); border-color: var(--accent); color: #fff; }
body.skin-mint .btn-archive.is-archived,
body.skin-mint .btn-archive:disabled { background: rgba(135,200,188,.14); color: #3f8f80; border-color: rgba(135,200,188,.4); }

/* ============================================================
 * 体系监控：B 路线字段化表单（左标签 / 右输入，仿截图风格）
 * 输入页不再硬撑 docx 表格；打印/导出由后端 docx 模板完成
 * ============================================================ */
.dyn-form {
  font-family: var(--font-ui, -apple-system, "Segoe UI", "Microsoft YaHei", sans-serif);
  color: var(--text, #1a1a1a);
  background: #fff;
  max-width: 1040px;
  margin: 0 auto;
  padding: 4px 0;
}
.dyn-head { text-align: center; margin-bottom: 10px; }
.dyn-head .dyn-format { text-align: right; font-size: 13px; color: #555; }
.dyn-head .dyn-title { font-size: 18px; font-weight: 700; letter-spacing: 1px; margin: 2px 0; }
.dyn-head .dyn-scope { font-size: 13px; color: #555; }
.dyn-scope-box {
  font-size: 13px; color: #444; line-height: 1.5;
  background: #f6f8fa; border: 1px solid var(--border, #e5e7eb);
  border-radius: 8px; padding: 8px 12px; margin-bottom: 14px;
}
.dyn-rows { display: flex; flex-direction: column; }
.dyn-row {
  display: grid; grid-template-columns: 168px 1fr; align-items: start;
  gap: 12px; padding: 10px 0; border-bottom: 1px solid var(--border-soft, #eef0f2);
}
.dyn-row:last-child { border-bottom: 0; }
.dyn-label { font-size: 14px; font-weight: 600; color: #222; padding-top: 6px; line-height: 1.4; }
.dyn-label .req { color: #dc2626; margin-left: 2px; }
.dyn-field { min-width: 0; }
.dyn-input {
  width: 100%; box-sizing: border-box; font-size: 14px; font-family: inherit;
  color: inherit; background: #fff; border: 1px solid var(--border, #d6dae0);
  border-radius: 8px; padding: 8px 10px; outline: none;
}
.dyn-input:focus { border-color: var(--accent, #2f9e8f); box-shadow: 0 0 0 2px rgba(47,158,143,.12); }
.dyn-input[readonly] { background: #f7f8fa; color: #555; cursor: default; }
.dyn-textarea { min-height: 120px; resize: vertical; line-height: 1.6; }
.dyn-imgs { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 8px; }
.dyn-img { position: relative; width: 120px; }
.dyn-img img { width: 120px; height: 90px; object-fit: cover; border: 1px solid var(--border, #e5e7eb); border-radius: 6px; display: block; }
.dyn-img-x {
  position: absolute; top: -8px; right: -8px; width: 22px; height: 22px;
  border-radius: 50%; border: 0; background: #ef4444; color: #fff; cursor: pointer;
  font-size: 12px; line-height: 1; padding: 0;
}
.dyn-img-add {
  margin-top: 8px; font-size: 13px; padding: 6px 12px; border-radius: 8px;
  border: 1px dashed var(--accent, #2f9e8f); background: #fff; color: var(--accent, #2f9e8f); cursor: pointer;
}
.dyn-img-add:hover { background: rgba(47,158,143,.08); }
.dyn-sig { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; padding-top: 4px; }
.dyn-sig-img { height: 46px; max-height: 46px; max-width: 200px; object-fit: contain; vertical-align: middle; }
/* 「套用我的签名 / 清除」按钮（字段化内复用，样式独立于旧 rom-*） */
.rom-sig-btn {
  font-size: 13px; padding: 6px 12px; line-height: 1.4;
  border: 1px solid #888; border-radius: 6px;
  background: #fafafa; color: #1a1a1a; cursor: pointer;
  white-space: nowrap;
}
.rom-sig-btn:hover { background: rgba(0,0,0,.06); }
.rom-sig-btn:disabled { color: #999; cursor: not-allowed; background: #f5f5f5; }
.rom-sig-clear-x {
  border: 0; background: transparent; color: #b91c1c; cursor: pointer;
  font-size: 14px; line-height: 1; padding: 4px 6px;
}
.dyn-note { margin-top: 12px; font-size: 12px; color: #888; }
.sm-sel {
  padding: 5px 10px; border: 1px solid var(--border); border-radius: 6px;
  background: var(--bg); font-size: 13px; outline: none; min-width: 120px;
}