/* ===== 简易案件证据审核系统 设计系统 ===== */
:root {
  --bg: #eef1f7;
  --panel: #ffffff;
  --panel-2: #f7f9fc;
  --primary: #2f6bff;
  --primary-dark: #1f4fd0;
  --primary-soft: #e8efff;
  --accent: #22d3ee;
  --success: #22c55e;
  --warn: #f59e0b;
  --danger: #ef4444;
  --text: #1f2937;
  --text-sub: #6b7280;
  --border: #e4e8ef;
  --shadow: 0 6px 24px rgba(30, 60, 120, .08);
  --shadow-lg: 0 12px 40px rgba(30, 60, 120, .16);
  --radius: 12px;
  --radius-sm: 8px;
  --grad: linear-gradient(135deg, #2f6bff 0%, #22d3ee 100%);
}
* { margin: 0; padding: 0; box-sizing: border-box; }
html, body { height: 100%; }
body {
  font-family: "Segoe UI", "Microsoft YaHei", "PingFang SC", system-ui, -apple-system, sans-serif;
  background: var(--bg);
  color: var(--text);
  font-size: 14px;
  line-height: 1.6;
}
a { color: var(--primary); text-decoration: none; }
button { font-family: inherit; cursor: pointer; }

/* ===== 顶栏 ===== */
.topbar {
  height: 60px;
  background: var(--grad);
  color: #fff;
  display: flex;
  align-items: center;
  padding: 0 22px;
  box-shadow: 0 2px 12px rgba(31, 79, 208, .25);
  position: relative;
  z-index: 20;
}
.topbar .logo { display: flex; align-items: center; gap: 10px; font-size: 18px; font-weight: 700; letter-spacing: 1px; }
.topbar .logo .mark {
  width: 34px; height: 34px; border-radius: 9px; background: rgba(255,255,255,.18);
  display: flex; align-items: center; justify-content: center; font-size: 18px;
  border: 1px solid rgba(255,255,255,.35);
}
.topbar nav { display: flex; gap: 4px; margin-left: 34px; }
.topbar nav a {
  color: rgba(255,255,255,.85); padding: 7px 14px; border-radius: 8px; font-size: 14px;
  transition: background .2s;
}
.topbar nav a:hover { background: rgba(255,255,255,.15); color:#fff; }
.topbar nav a.active { background: rgba(255,255,255,.22); color: #fff; font-weight: 600; }
.topbar .spacer { flex: 1; }
.topbar .user-menu { position: relative; }
.topbar .user-btn {
  background: rgba(255,255,255,.15); color: #fff; border: 1px solid rgba(255,255,255,.3);
  border-radius: 20px; padding: 6px 14px; font-size: 13px; display: flex; align-items: center; gap: 8px;
}
.topbar .user-btn:hover { background: rgba(255,255,255,.25); }
.avatar {
  width: 26px; height: 26px; border-radius: 50%; background: linear-gradient(135deg,#fff,#cfe0ff);
  display: inline-flex; align-items: center; justify-content: center; color: var(--primary-dark);
  font-size: 13px; font-weight: 700;
}
.dropdown {
  position: absolute; right: 0; top: 44px; background: #fff; color: var(--text);
  border-radius: 10px; box-shadow: var(--shadow-lg); min-width: 150px; overflow: hidden; z-index: 50;
  border: 1px solid var(--border);
}
.dropdown a { display: block; padding: 10px 16px; color: var(--text); font-size: 13px; }
.dropdown a:hover { background: var(--panel-2); color: var(--primary); }
.dropdown .sep { height: 1px; background: var(--border); }

/* ===== 布局 ===== */
.page { max-width: 1280px; margin: 0 auto; padding: 22px; }
.page-title { font-size: 20px; font-weight: 700; margin-bottom: 4px; }
.page-sub { color: var(--text-sub); font-size: 13px; margin-bottom: 18px; }
.grid { display: grid; gap: 16px; }
.row { display: flex; gap: 12px; align-items: center; flex-wrap: wrap; }
.grow { flex: 1; }

/* ===== 卡片 ===== */
.card {
  background: var(--panel); border-radius: var(--radius); box-shadow: var(--shadow);
  padding: 20px; border: 1px solid var(--border);
}
.card h3 { font-size: 15px; font-weight: 700; margin-bottom: 12px; display:flex; align-items:center; gap:8px; }
.card .hint { color: var(--text-sub); font-size: 12px; }

/* ===== 表单 ===== */
label { font-size: 13px; color: var(--text-sub); display: block; margin-bottom: 5px; }
input[type=text], input[type=password], input[type=number], input[type=file], select, textarea {
  width: 100%; padding: 9px 12px; border: 1px solid var(--border); border-radius: var(--radius-sm);
  font-size: 14px; font-family: inherit; background: #fff; color: var(--text); transition: border .2s, box-shadow .2s;
}
input:focus, select:focus, textarea:focus {
  outline: none; border-color: var(--primary); box-shadow: 0 0 0 3px rgba(47,107,255,.12);
}
textarea { resize: vertical; min-height: 60px; }
.inline { display: inline-flex; }
.inline input, .inline select, .inline textarea { width: auto; }

/* ===== 按钮 ===== */
.btn {
  display: inline-flex; align-items: center; gap: 6px; padding: 9px 18px; border-radius: var(--radius-sm);
  border: 1px solid transparent; font-size: 14px; font-weight: 600; transition: all .18s; background: #eef0f4; color: var(--text);
}
.btn:hover { filter: brightness(.97); transform: translateY(-1px); }
.btn:disabled { opacity: .5; cursor: not-allowed; transform: none; }
.btn.primary { background: var(--grad); color: #fff; box-shadow: 0 4px 14px rgba(47,107,255,.3); }
.btn.primary:hover { box-shadow: 0 6px 18px rgba(47,107,255,.4); }
.btn.success { background: var(--success); color: #fff; }
.btn.warn { background: var(--warn); color: #fff; }
.btn.danger { background: #fff; color: var(--danger); border-color: #fccfcf; }
.btn.danger:hover { background: #fef2f2; }
.btn.ghost { background: transparent; color: var(--primary); border-color: var(--primary); }
.btn.sm { padding: 5px 10px; font-size: 12px; }
.btn.block { width: 100%; justify-content: center; }

/* ===== 表格 ===== */
.table-wrap { overflow: auto; }
table { width: 100%; border-collapse: collapse; font-size: 13px; }
th {
  background: var(--panel-2); color: var(--text-sub); font-weight: 600; text-align: left;
  padding: 10px 12px; border-bottom: 1px solid var(--border); white-space: nowrap;
}
td { padding: 9px 12px; border-bottom: 1px solid var(--border); vertical-align: middle; }
tbody tr:hover { background: #f8faff; }
.t-right { text-align: right; }
.t-center { text-align: center; }

/* ===== 徽标 ===== */
.badge { display: inline-block; padding: 2px 10px; border-radius: 20px; font-size: 12px; font-weight: 600; }
.badge.gray { background: #eef0f4; color: #6b7280; }
.badge.blue { background: var(--primary-soft); color: var(--primary); }
.badge.green { background: #e7f9ee; color: #16a34a; }
.badge.red { background: #feecec; color: #dc2626; }
.badge.orange { background: #fef3e0; color: #d97706; }
.badge.cyan { background: #e0f8fd; color: #0891b2; }

/* ===== 进度条 ===== */
.progress { height: 8px; background: #eef0f4; border-radius: 6px; overflow: hidden; min-width: 90px; }
.progress > i { display: block; height: 100%; background: var(--grad); border-radius: 6px; transition: width .4s; }

/* ===== 提示 & 弹窗 ===== */
#toasts { position: fixed; top: 18px; right: 18px; z-index: 1000; display: flex; flex-direction: column; gap: 10px; }
.toast {
  min-width: 240px; max-width: 380px; padding: 12px 16px; border-radius: 10px; color: #fff;
  box-shadow: var(--shadow-lg); font-size: 13px; display: flex; gap: 8px; align-items: center;
  animation: slideIn .25s ease;
}
.toast.success { background: var(--success); }
.toast.error { background: var(--danger); }
.toast.warn { background: var(--warn); }
.toast.info { background: #334155; }
@keyframes slideIn { from { transform: translateX(30px); opacity: 0; } to { transform: none; opacity: 1; } }

.modal-mask {
  position: fixed; inset: 0; background: rgba(15,23,42,.45); z-index: 500;
  display: flex; align-items: center; justify-content: center; animation: fadeIn .18s;
}
@keyframes fadeIn { from { opacity: 0; } to { opacity: 1; } }
.modal {
  background: #fff; border-radius: var(--radius); box-shadow: var(--shadow-lg); width: 480px;
  max-width: 92vw; max-height: 86vh; display: flex; flex-direction: column; overflow: hidden;
}
.modal-head { padding: 16px 20px; font-weight: 700; border-bottom: 1px solid var(--border); display: flex; justify-content: space-between; }
.modal-body { padding: 20px; overflow: auto; }
.modal-foot { padding: 14px 20px; border-top: 1px solid var(--border); display: flex; justify-content: flex-end; gap: 10px; }
.modal-close { cursor: pointer; color: var(--text-sub); background: none; border: none; font-size: 18px; }

/* ===== 月份圆形图标 ===== */
.month-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(120px, 1fr)); gap: 18px; }
.month-cell { text-align: center; cursor: pointer; user-select: none; }
.month-cell .m-label { margin-top: 8px; font-size: 13px; color: var(--text-sub); font-weight: 600; }
.month-icon {
  width: 76px; height: 76px; border-radius: 50%; margin: 0 auto; position: relative;
  background: #dfe4ec; overflow: hidden; transition: transform .2s; border: 2px solid #cfd6e2;
}
.month-cell:hover .month-icon { transform: scale(1.07); }
.month-icon .m-num {
  position: absolute; inset: 0; display: flex; align-items: center; justify-content: center;
  font-size: 22px; font-weight: 800; color: #8a94a6; z-index: 3; text-shadow: 0 1px 0 #fff;
}
/* ---- 未绑定数据源 / 已绑定未生成：封印态（球体位于黑色浓雾内 + 警戒带环绕外围，前后分层遮挡） ---- */
.month-icon.state-not_bound,
.month-icon.state-bound { background: none; border: none; box-shadow: none; overflow: visible; }
/* 月份数字提到警戒带之上，保证交叉封条不遮挡数字 */
.month-icon.state-not_bound .m-num,
.month-icon.state-bound .m-num { z-index: 4; }
.month-icon.state-not_bound .m-num,
.month-icon.state-bound .m-num {
  color: #eef1f7; text-shadow: 0 1px 2px rgba(18,26,42,.9), 0 0 6px rgba(120,140,175,.5);
}

/* 球体层：透明玻璃壳（中心近透明、玻璃沿口高亮、底缘折射暗影），独立夹在警戒带前/后半环之间；
   内部雾被 overflow:hidden 裁剪困在球内，玻璃面罩/高光盖在雾之上 → 黑雾像被封在玻璃球里 */
.month-icon .ball {
  position: absolute; inset: 0; border-radius: 50%; overflow: hidden; z-index: 2;
  background: radial-gradient(circle at 50% 42%, rgba(214,222,232,.10) 0%, rgba(214,222,232,.14) 52%,
    rgba(178,186,200,.52) 76%, rgba(148,157,174,.94) 100%);
  border: 2px solid #b8c0d1;
  box-shadow: inset 0 -5px 11px rgba(38,50,72,.35), inset 0 5px 9px rgba(255,255,255,.28),
              0 2px 5px rgba(0,0,0,.28);
}
/* 玻璃面罩：盖在内部黑雾之上，给球面加柔和内反光、边缘略微收暗 → 雾被压在玻璃壳内侧 */
.month-icon .ball .gsheen {
  position: absolute; inset: 0; border-radius: 50%; pointer-events: none;
  background:
    radial-gradient(circle at 30% 24%, rgba(255,255,255,.20), transparent 44%),
    radial-gradient(circle at 72% 78%, rgba(255,255,255,.08), transparent 42%),
    radial-gradient(circle at 50% 50%, transparent 60%, rgba(28,38,58,.14) 100%);
}
/* 玻璃高光：左上沿口的白色眩光，玻璃表面反光盖在雾上 → 雾像在玻璃球里面翻滚 */
.month-icon .ball .glare {
  position: absolute; left: 15%; top: 9%; width: 36%; height: 28%;
  border-radius: 50%; pointer-events: none;
  background: radial-gradient(circle at 50% 50%, rgba(255,255,255,.98), rgba(255,255,255,.22) 56%, transparent 80%);
  transform: rotate(-18deg); filter: blur(1px);
}
/* 黑色浓雾（被困在玻璃球壳内）：多团深色雾团彼此重叠成连续云雾，错开相位漂移/胀缩/深度明灭，
   玻璃中心近透明 → 雾直接从内部透出；玻璃沿口高光与面罩盖在雾上，球体本身不整体变黑 */
.month-icon .mist {
  position: absolute; border-radius: 50%;
  background: radial-gradient(circle at 36% 34%, rgba(7,9,14,.92), rgba(15,21,33,.62) 44%, rgba(40,46,60,.30) 64%, transparent 82%);
  filter: blur(6px);
  animation: mistSwirl var(--dur, 10s) ease-in-out infinite;
  animation-delay: var(--delay, 0s);
  will-change: transform, opacity;
}
@keyframes mistSwirl {
  0%, 100% { transform: translate(0, 0) scale(1); opacity: .24; }
  30% { transform: translate(var(--dx, 15px), var(--dy, -13px)) scale(1.36); opacity: .78; }
  60% { transform: translate(calc(var(--dx, 15px) / -2), calc(var(--dy, -13px) / -2)) scale(.55); opacity: .06; }
  80% { transform: translate(var(--dy, -13px), var(--dx, 15px)) scale(1.24); opacity: .58; }
}

/* 封印警戒带（呼啦圈轨道）：2 条警戒带斜向交叉环绕球体，如行星轨道绕球心缓慢旋转；
   前弧在球上方(z3)越过球面，后弧在球下方(z1)被球遮住，两端露出球外 */
.month-icon .hoop {
  position: absolute; left: 0; top: 0; width: 100%; height: 100%;
  pointer-events: none; overflow: visible;
}
.month-icon .hoop * { pointer-events: none; }
.month-icon .hoop.hoop-back { z-index: 1; }
.month-icon .hoop.hoop-front { z-index: 3; }
.month-icon .hoop .orbit {
  transform-box: view-box; transform-origin: 50% 50%;
  animation: sealOrbit 18s linear infinite;
}
/* 警戒带：黄黑交替（无文字），黑段沿带自身闭合轨道流动=各自方向动态环绕 */
.month-icon .tape {
  fill: none; stroke: #f7c948; stroke-width: 10;
}
.month-icon .tape-dash {
  fill: none; stroke: #24272e; stroke-width: 10;
  stroke-dasharray: 16 16;
  animation: tapeFlow 1.4s linear infinite;
}
@keyframes tapeFlow { to { stroke-dashoffset: -32; } }
@keyframes sealOrbit { to { transform: rotate(360deg); } }

/* ---- 生成中：玻璃球 + 绿色液面随完成度升高，液面为自然波浪曲线 ---- */
.month-icon.state-generated {
  background: linear-gradient(165deg, rgba(255,255,255,.72), rgba(206,224,248,.30));
  border-color: rgba(110,155,225,.65);
  box-shadow: inset 0 2px 8px rgba(255,255,255,.7), inset 0 -4px 10px rgba(120,160,220,.35),
              0 4px 14px rgba(70,130,220,.18);
}
.month-icon.state-generated .m-num { color: #2e4a6d; text-shadow: 0 1px 0 rgba(255,255,255,.65); }
.month-icon.state-generated .tank {
  position: absolute; left: 7%; right: 7%; bottom: 7%; top: 24%;
  border-radius: 46%/40%; overflow: hidden; z-index: 2;
}
.month-icon.state-generated .liquid {
  position: absolute; left: 0; right: 0; bottom: 0; height: var(--h, 0%);
  background: linear-gradient(180deg, rgba(74,222,128,.92), rgba(21,155,110,.95));
  transition: height .9s ease;
}
/* 液面波浪：两层 SVG 正弦曲线错速漂移，形成自然水波曲线 */
.month-icon.state-generated .surf {
  position: absolute; left: 0; right: 0; bottom: var(--h, 0%); height: 14px;
  z-index: 3; pointer-events: none;
}
.month-icon.state-generated .surf svg {
  position: absolute; left: 0; top: 0; width: 200%; height: 100%; display: block;
}
.month-icon.state-generated .surf .w1 { animation: waveDrift 4.2s linear infinite; }
.month-icon.state-generated .surf .w1 path { fill: rgba(163,230,174,.95); }
.month-icon.state-generated .surf .w2 { animation: waveDrift 3.2s linear infinite reverse; opacity: .85; }
.month-icon.state-generated .surf .w2 path { fill: rgba(34,160,120,.9); }
@keyframes waveDrift { from { transform: translateX(0); } to { transform: translateX(-50%); } }

/* ---- 已完成：装满水的玻璃球 + 鱼群游动 ---- */
.month-icon.state-completed {
  background: linear-gradient(170deg, rgba(176,228,255,.7), rgba(96,182,232,.38));
  border-color: rgba(70,152,224,.72);
  box-shadow: inset 0 3px 10px rgba(255,255,255,.6), inset 0 -5px 12px rgba(40,130,210,.4),
              0 4px 14px rgba(30,120,200,.25);
}
.month-icon.state-completed .m-num {
  color: #fff; text-shadow: 0 1px 4px rgba(10,70,130,.55), 0 0 6px rgba(30,120,200,.6);
}
.month-icon.state-completed .fullwater {
  position: absolute; inset: 5%; border-radius: 50%; overflow: hidden; z-index: 2;
  background: linear-gradient(180deg, #7dd3fc 0%, #38bdf8 50%, #0284c7 100%);
}
.month-icon.state-completed .fullwater::before {
  content: ''; position: absolute; left: -50%; top: 6%; width: 200%; height: 46%;
  background: radial-gradient(ellipse at 50% 0%, rgba(255,255,255,.5), transparent 55%);
  animation: surfaceRipple 5s ease-in-out infinite;
}
@keyframes surfaceRipple {
  0%,100% { transform: translateX(-4%); }
  50% { transform: translateX(4%); }
}
.month-icon.state-completed .fullwater .wave {
  position: absolute; left: -52%; top: -46%; width: 204%; height: 204%;
  border-radius: 40%;
  background: radial-gradient(ellipse at center, rgba(125,211,252,.85), transparent 55%);
  animation: liquidWave 8s linear infinite; opacity: .5;
}
.month-icon.state-completed .fullwater .surfc {
  position: absolute; left: 0; right: 0; top: 5%; width: 200%; height: 10px;
  animation: waveDrift 3.6s linear infinite; z-index: 2;
}
.month-icon.state-completed .fullwater .surfc path { fill: rgba(195,237,255,.85); }
@keyframes liquidWave { to { transform: rotate(360deg); } }
.month-icon.state-completed .fish { position: absolute; inset: 0; width: 100%; height: 100%; z-index: 3; }
.month-icon.state-completed .fish .bd { fill: #ffb84d; stroke: #ea7a0c; stroke-width: 1; }
.month-icon.state-completed .fish .tl { fill: #f59e0b; stroke: #ea7a0c; stroke-width: 1; }
.month-icon.state-completed .fish .ey { fill: #1c1917; }
.month-icon.state-completed .fish .fanim { animation: fishSwim 5s ease-in-out infinite; }
@keyframes fishSwim {
  0%,100% { transform: translateX(0) translateY(0); }
  25% { transform: translateX(8px) translateY(-3px); }
  50% { transform: translateX(0) translateY(0); }
  75% { transform: translateX(-8px) translateY(3px); }
}

/* ---- 玻璃高光（生成中 / 已完成通用） ---- */
.month-icon .shine {
  position: absolute; left: 13%; top: 9%; width: 30%; height: 22%;
  background: linear-gradient(135deg, rgba(255,255,255,.95), rgba(255,255,255,0));
  border-radius: 50%; transform: rotate(-28deg);
  z-index: 4; pointer-events: none; opacity: .85;
}

.month-icon .m-rate {
  position: absolute; bottom: 5px; left: 0; right: 0; text-align: center;
  font-size: 10px; color: #fff; z-index: 5; font-weight: 800;
  text-shadow: 0 1px 3px rgba(0,0,0,.55);
}

/* ===== 能量槽 ===== */
.slots { display: inline-flex; gap: 5px; }
.slot {
  width: 16px; height: 16px; border-radius: 4px; background: #dfe4ec; transition: all .25s;
}
.slot.on {
  background: linear-gradient(135deg, #f59e0b, #fbbf24);
  box-shadow: 0 0 8px rgba(245,158,11,.7);
  transform: translateY(-1px);
}
.slot.on-fail { background: linear-gradient(135deg,#ef4444,#f87171); box-shadow: 0 0 8px rgba(239,68,68,.7); }
.slot.on-pass { background: linear-gradient(135deg,#22c55e,#4ade80); box-shadow: 0 0 8px rgba(34,197,94,.7); }

/* ===== 两栏布局 ===== */
.pane { display: grid; grid-template-columns: 320px 1fr; gap: 16px; align-items: start; }
@media (max-width: 900px) { .pane { grid-template-columns: 1fr; } }
.list-pane { max-height: calc(100vh - 150px); overflow: auto; }
.officer-item {
  display: flex; align-items: center; justify-content: space-between; gap: 10px;
  padding: 11px 14px; border-radius: 10px; border: 1px solid var(--border); margin-bottom: 8px;
  background: #fff; cursor: pointer; transition: all .18s;
}
.officer-item:hover { border-color: var(--primary); box-shadow: var(--shadow); }
.officer-item.active { border-color: var(--primary); background: var(--primary-soft); }
.officer-item .name { font-weight: 600; }
.officer-item .meta { font-size: 12px; color: var(--text-sub); }

/* ===== 登录页 ===== */
.login-body {
  min-height: 100vh; display: flex; align-items: center; justify-content: center;
  background: linear-gradient(135deg, #0f1c3a 0%, #1f4fd0 55%, #22d3ee 130%);
  position: relative; overflow: hidden;
}
.login-body::before {
  content: ''; position: absolute; width: 480px; height: 480px; border-radius: 50%;
  background: radial-gradient(circle, rgba(255,255,255,.10), transparent 60%);
  top: -120px; right: -80px; animation: floatOrb 9s ease-in-out infinite;
}
.login-body::after {
  content: ''; position: absolute; width: 360px; height: 360px; border-radius: 50%;
  background: radial-gradient(circle, rgba(34,211,238,.18), transparent 60%);
  bottom: -90px; left: -60px; animation: floatOrb 11s ease-in-out infinite reverse;
}
@keyframes floatOrb { 0%,100% { transform: translateY(0); } 50% { transform: translateY(-26px); } }
.login-card {
  position: relative; z-index: 5; width: 400px; max-width: 92vw; background: rgba(255,255,255,.96);
  border-radius: 18px; padding: 38px 34px 30px; box-shadow: 0 24px 80px rgba(0,0,0,.35);
  backdrop-filter: blur(6px);
}
.login-card .brand { text-align: center; margin-bottom: 26px; }
.login-card .brand .logo-big {
  width: 60px; height: 60px; margin: 0 auto 12px; border-radius: 16px; background: var(--grad);
  display: flex; align-items: center; justify-content: center; font-size: 30px; color: #fff;
  box-shadow: 0 10px 30px rgba(47,107,255,.4);
}
.login-card .brand h1 { font-size: 19px; font-weight: 800; }
.login-card .brand p { color: var(--text-sub); font-size: 12px; margin-top: 4px; }
.login-card .field { margin-bottom: 16px; }
.login-card .remember { display: flex; align-items: center; gap: 6px; font-size: 13px; color: var(--text-sub); margin-bottom: 18px; }
.login-card .remember input { width: auto; }
.login-error { color: var(--danger); font-size: 13px; margin-bottom: 10px; min-height: 18px; }

/* ===== 空状态 / 加载 ===== */
.empty { text-align: center; color: var(--text-sub); padding: 40px 10px; font-size: 13px; }
.spinner {
  width: 22px; height: 22px; border: 3px solid rgba(47,107,255,.2); border-top-color: var(--primary);
  border-radius: 50%; animation: spin .8s linear infinite; display: inline-block;
}
@keyframes spin { to { transform: rotate(360deg); } }

/* ===== 杂项 ===== */
.muted { color: var(--text-sub); }
.small { font-size: 12px; }
.mt { margin-top: 12px; } .mtl { margin-top: 20px; } .mb { margin-bottom: 12px; }
.divider { height: 1px; background: var(--border); margin: 16px 0; }
.flex-between { display: flex; justify-content: space-between; align-items: center; }
.reminder {
  display: flex; gap: 10px; align-items: center; padding: 12px 16px; border-radius: 10px;
  background: linear-gradient(90deg,#e8efff,#e0f8fd); border: 1px solid #c9dcff; margin-bottom: 18px;
  font-size: 13px;
}
.reminder b { color: var(--primary-dark); }
.chip { display: inline-flex; align-items: center; gap: 4px; padding: 3px 10px; border-radius: 20px; background: var(--panel-2); border: 1px solid var(--border); font-size: 12px; }

/* ===== 案件编号复制按钮 ===== */
.case-no-cell {
  display: flex; align-items: flex-start; gap: 6px;
}
.case-no-text {
  flex: 0 1 auto; min-width: 0; word-break: break-all; white-space: normal;
}
.copy-no {
  flex: 0 0 auto; padding: 0 5px; border: 1px solid var(--border); border-radius: 5px;
  background: var(--panel-2); color: var(--text-sub); font-size: 18px; line-height: 1.4;
  cursor: pointer; transition: all .15s;
}
.copy-no:hover { border-color: var(--primary); color: var(--primary); background: var(--primary-soft); }

/* ===== 常用审核意见快捷插入 ===== */
.opin-presets { display: flex; flex-wrap: wrap; gap: 5px; margin-top: 5px; }
.opin-preset {
  width: 24px; height: 24px; padding: 0; border: 1px solid var(--border); border-radius: 6px;
  background: var(--panel-2); color: var(--text-sub); font-size: 12px; font-weight: 600;
  line-height: 1; cursor: pointer; display: inline-flex; align-items: center; justify-content: center;
  transition: all .15s;
}
.opin-preset:hover { border-color: var(--primary); color: var(--primary); background: var(--primary-soft); }
.opin-preset.on { border-color: var(--primary); color: #fff; background: var(--primary); }