/* ================= 业务作业平台 · 正式官方风格 ================= */
:root {
  --of-bg: #f3f5f9;
  --of-card: #ffffff;
  --of-line: #e2e8f0;
  --of-text: #1f2937;
  --of-dim: #64748b;
  --of-blue: #1d4ed8;
  --of-blue-bg: #eff6ff;
  --of-green: #15803d;
  --of-green-bg: #f0fdf4;
  --of-red: #b91c1c;
  --of-red-bg: #fef2f2;
  --of-amber: #b45309;
  --of-amber-bg: #fffbeb;
}

html, body {
  background: var(--of-bg) !important;
  color: var(--of-text) !important;
  background-image: none !important;
}

/* ---------- 顶栏 ---------- */
.topbar {
  background: #1e3a8a !important;
  border-bottom: none !important;
  box-shadow: 0 2px 8px rgba(15, 23, 42, .18) !important;
}
.topbar h1 { color: #fff !important; text-shadow: none !important; letter-spacing: .5px; }
.topbar a, .topbar .me { color: #c7d7f5 !important; }
.topbar a:hover { color: #fff !important; }

/* ---------- 侧边导航 ---------- */
.layout .sidebar, .sidebar {
  background: #ffffff !important;
  border-right: 1px solid var(--of-line) !important;
}
.sidebar .nav-item { color: #334155 !important; }
.sidebar .nav-item:hover { background: #f1f5f9 !important; color: var(--of-blue) !important; }
.sidebar .nav-item.active {
  color: var(--of-blue) !important;
  background: var(--of-blue-bg) !important;
  border-left-color: var(--of-blue) !important;
  box-shadow: none !important;
  text-shadow: none !important;
  font-weight: 600;
}

/* ---------- 卡片面板 ---------- */
.panel, .card, .login-box, .cred-box, .stat {
  background: var(--of-card) !important;
  border: 1px solid var(--of-line) !important;
  border-radius: 10px !important;
  box-shadow: 0 1px 3px rgba(15, 23, 42, .06) !important;
  color: var(--of-text) !important;
  margin-bottom: 12px !important;
  padding: 14px 16px !important;
}
.panel h2, .card h2 { color: var(--of-text) !important; text-shadow: none !important; }

/* ---------- 数据卡片 ---------- */
.stats .stat, .stat {
  background: var(--of-card) !important;
  border: 1px solid var(--of-line) !important;
  transition: all .15s;
}
.stat b { color: var(--of-blue) !important; text-shadow: none !important; font-size: 24px !important; }
.stat span { color: var(--of-dim) !important; }
.stat:hover, .stat.active {
  border-color: var(--of-blue) !important;
  box-shadow: 0 2px 10px rgba(29, 78, 216, .15) !important;
  transform: none !important;
}
.stat.active { background: var(--of-blue-bg) !important; }

/* ---------- 表格 ---------- */
table { color: var(--of-text) !important; background: transparent !important; }
th { background: #f8fafc !important; color: var(--of-dim) !important; border-bottom: 1px solid var(--of-line) !important; }
td { border-bottom: 1px solid #f1f5f9 !important; color: var(--of-text) !important; }
tr:hover td { background: #f8fafc !important; }
.table-wrap { border: 1px solid var(--of-line); border-radius: 8px; padding: 0; background: #fff; }
.link-url { color: var(--of-blue) !important; }

/* ---------- 标签 ---------- */
.tag-ok { background: var(--of-green-bg) !important; color: var(--of-green) !important; border: 1px solid #86efac !important; text-shadow: none !important; }
.tag-bad { background: var(--of-red-bg) !important; color: var(--of-red) !important; border: 1px solid #fca5a5 !important; text-shadow: none !important; }
.tag-wait { background: var(--of-amber-bg) !important; color: var(--of-amber) !important; border: 1px solid #fcd34d !important; }
.tag-blue { background: var(--of-blue-bg) !important; color: var(--of-blue) !important; border: 1px solid #93c5fd !important; cursor: pointer; }
.tag-gray { background: #f1f5f9 !important; color: var(--of-dim) !important; border: 1px solid #cbd5e1 !important; }

/* ---------- 按钮 ---------- */
.btn, .btn-primary, .btn-dl {
  background: var(--of-blue) !important;
  color: #fff !important;
  border: none !important;
  box-shadow: none !important;
}
.btn-primary:hover, .btn-dl:hover, .btn:hover { background: #1e40af !important; box-shadow: none !important; }
.btn-copy, .license-name button {
  background: var(--of-blue-bg) !important;
  color: var(--of-blue) !important;
  border: 1px solid #bfdbfe !important;
  box-shadow: none !important;
}
.btn-green { background: var(--of-green-bg) !important; color: var(--of-green) !important; border: 1px solid #86efac !important; box-shadow: none !important; }
.btn-orange { background: var(--of-amber-bg) !important; color: var(--of-amber) !important; border: 1px solid #fcd34d !important; box-shadow: none !important; }
.btn-del, .btn-danger { background: var(--of-red-bg) !important; color: var(--of-red) !important; border: 1px solid #fca5a5 !important; box-shadow: none !important; }
.btn-ghost { background: var(--of-blue-bg) !important; color: var(--of-blue) !important; }

/* ---------- 输入框 ---------- */
input, select, textarea, .cell-input, .cell-select {
  background: #ffffff !important;
  color: var(--of-text) !important;
  border: 1px solid #cbd5e1 !important;
}
input:focus, select:focus, textarea:focus {
  border-color: var(--of-blue) !important;
  box-shadow: 0 0 0 3px rgba(29, 78, 216, .12) !important;
  outline: none;
}
input::placeholder, textarea::placeholder { color: #94a3b8 !important; }
input[readonly] { background: #f1f5f9 !important; color: var(--of-dim) !important; }

/* ---------- 开关 ---------- */
.switch i { background: #cbd5e1 !important; }
.switch input:checked + i { background: #22c55e !important; box-shadow: none !important; }

/* ---------- 拖拽区 ---------- */
.drop { border-color: #cbd5e1 !important; background: #f8fafc !important; color: var(--of-dim) !important; }
.drop.hover { border-color: var(--of-blue) !important; background: var(--of-blue-bg) !important; color: var(--of-blue) !important; }
.drop.has { border-color: #86efac !important; color: var(--of-green) !important; background: var(--of-green-bg) !important; }

/* ---------- 弹窗/遮罩/提示 ---------- */
.login-mask, .blocked { background: var(--of-bg) !important; }
.toast { background: #1f2937 !important; color: #fff !important; border: none !important; box-shadow: 0 4px 12px rgba(0,0,0,.25) !important; }
.greeting { background: var(--of-blue-bg) !important; color: var(--of-blue) !important; }
#topBanner { background: var(--of-amber-bg) !important; color: var(--of-amber) !important; border-bottom: 1px solid #fcd34d !important; }

/* ---------- 手机端 ---------- */
.header {
  background: #1e3a8a !important;
  border-bottom: none !important;
  box-shadow: 0 2px 8px rgba(15, 23, 42, .18) !important;
}
.prompt-text {
  background: var(--of-amber-bg) !important;
  border: 1px solid #fcd34d !important;
  color: #92400e !important;
  text-shadow: none !important;
}
.upload-box { background: #f8fafc !important; border-color: #cbd5e1 !important; color: var(--of-dim) !important; }
.hint { color: var(--of-blue) !important; text-shadow: none !important; }
#videoHint { color: var(--of-blue) !important; }
.ok-tip { background: var(--of-green-bg) !important; border-color: #86efac !important; color: var(--of-green) !important; }
.warn { background: var(--of-red-bg) !important; border-color: #fca5a5 !important; color: var(--of-red) !important; }
.step-no { background: var(--of-blue) !important; box-shadow: none !important; }
.timer.rec { color: var(--of-red) !important; text-shadow: none !important; }
#camView, #camCanvas, #previewVideo, #idCam { border: 1px solid var(--of-line); box-shadow: none; }
.pager button { background: #fff !important; color: var(--of-text) !important; border-color: #cbd5e1 !important; }
.empty { color: var(--of-dim) !important; }
.menu-btn { color: #fff !important; }
.sms-row button { background: var(--of-blue) !important; }
.login-err { color: var(--of-red) !important; }

/* ---------- 状态弹窗 ---------- */
.st-pop-mask { background: rgba(15, 23, 42, .5) !important; }
.st-pop { background: #fff !important; border: 1px solid var(--of-line) !important; box-shadow: 0 10px 30px rgba(0,0,0,.2) !important; }
.st-pop h3 { color: var(--of-text) !important; text-shadow: none !important; }
.st-pop .st-line { color: var(--of-text) !important; border-bottom: 1px solid #f1f5f9 !important; }
.st-pop .st-line span:last-child { color: var(--of-dim) !important; }
.st-pop .st-close { background: #f1f5f9 !important; color: var(--of-text) !important; border: 1px solid #cbd5e1 !important; }

/* 大盘小时柱图 */
.hour-bars i { background: linear-gradient(180deg, #3b82f6, #bfdbfe) !important; box-shadow: none !important; }
.hour-bars-labels { color: var(--of-dim) !important; }

/* 虚拟键盘 */
.vk { background: #fff !important; }
.vk-key { background: #fff !important; border: 1px solid #cbd5e1 !important; color: var(--of-text) !important; }
.vk-key:active { background: var(--of-blue) !important; color: #fff !important; }
.vk-title { color: var(--of-dim) !important; }
.ime-warn { color: var(--of-red) !important; }


/* ---------- 弹层定位（必须项） ---------- */
.st-pop-mask {
  position: fixed !important;
  inset: 0 !important;
  display: none;
  align-items: center !important;
  justify-content: center !important;
  z-index: 400 !important;
  padding: 16px;
}
.st-pop {
  width: min(460px, 94vw) !important;
  max-height: 82vh !important;
  overflow: auto !important;
  padding: 20px 22px !important;
  margin: 0 !important;
}
.st-pop h3 { margin-bottom: 12px !important; }
.st-pop input, .st-pop select, .st-pop textarea { width: 100%; box-sizing: border-box; padding: 10px 12px; font-size: 14px; border-radius: 8px; }
.st-pop label { display: flex; align-items: center; gap: 6px; font-size: 13px; }


/* ---------- 人员资料表：顶部滚动条 + 冻结姓名列 ---------- */
#personTopScroll { overflow-x: auto; height: 14px; margin-bottom: 2px; }
#personTopScroll > div { height: 1px; }
#personTable th:nth-child(4), #personTable td:nth-child(4) {
  position: sticky !important;
  left: 0;
  background: #fff !important;
  z-index: 2;
  box-shadow: 3px 0 6px rgba(15, 23, 42, .08);
}
#personTable th:nth-child(4) { z-index: 3; }


/* ---------- 迷你筛选卡片（链接页） ---------- */
.stat.mini { min-width: 0 !important; padding: 4px 10px !important; border-radius: 8px !important; }
.stat.mini b { font-size: 17px !important; display: inline !important; margin-right: 5px; }
.stat.mini span { font-size: 12px !important; }
#linkCards { gap: 6px !important; flex-wrap: wrap !important; margin-bottom: 8px !important; }


/* ---------- 正方形迷你卡片 ---------- */
.stat.sq { width: 66px !important; height: 66px !important; min-width: 66px !important; padding: 4px !important; display: flex !important; flex-direction: column !important; align-items: center !important; justify-content: center !important; text-align: center; }
.stat.sq b { font-size: 18px !important; display: block !important; margin: 0 !important; }
.stat.sq span { font-size: 10px !important; line-height: 1.2; }
#linkCards { gap: 8px !important; }


/* ---------- 卡片横排 ---------- */
#linkCards, #projCards, #personCards, .stats { display: flex !important; flex-direction: row !important; flex-wrap: wrap !important; }


/* ---------- 超迷你项目卡片（横排优先） ---------- */
.stat.sq { width: 56px !important; height: 56px !important; min-width: 56px !important; }
.stat.sq b { font-size: 18px !important; }
.stat.sq span { font-size: 11px !important; }
#projCards, #personCards { gap: 5px !important; }