/* ============================================================
 * polish.css —— 全站视觉抛光层（v2.57.13）
 * ------------------------------------------------------------
 * 加载顺序在 design.css / style.css 之后：只做「锦上添花」的
 * 视觉增强，不改布局、不改交互逻辑。全部走 design.css 令牌，
 * 暗色主题自动跟随；少量必须区分的用 [data-theme="dark"] 覆盖。
 * 独立文件：design.css 曾被整段覆盖致白板，禁并入。
 * ============================================================ */

/* ---------- 1. 背景：淡品牌色晕染，不再纯灰 ---------- */
body {
  background:
    radial-gradient(1200px 500px at 85% -8%, rgba(43, 92, 217, .06), transparent 60%),
    radial-gradient(900px 420px at -10% 20%, rgba(15, 157, 88, .045), transparent 55%),
    var(--bg);
  background-attachment: fixed;
}
::selection {
  background: var(--brand-100);
  color: var(--brand-700);
}

/* 滚动条：细 + 圆角，hover 才显 */
::-webkit-scrollbar { width: 10px; height: 10px; }
::-webkit-scrollbar-thumb {
  background: var(--line-strong);
  border-radius: var(--r-full);
  border: 3px solid transparent;
  background-clip: content-box;
}
::-webkit-scrollbar-thumb:hover { background-color: var(--txt-4); background-clip: content-box; }
::-webkit-scrollbar-track { background: transparent; }

/* ---------- 2. 顶栏与品牌 ---------- */
.topbar {
  background: rgba(255, 255, 255, .86);
  backdrop-filter: saturate(1.4) blur(10px);
  -webkit-backdrop-filter: saturate(1.4) blur(10px);
}
:root[data-theme="dark"] .topbar { background: rgba(23, 27, 34, .82); }
.logo {
  background: linear-gradient(135deg, var(--brand) 0%, var(--brand-600) 100%);
  box-shadow: var(--sh-brand);
  transition: transform var(--dur-2) var(--ease-out);
}
.logo:hover { transform: scale(1.06) rotate(-3deg); }

/* ---------- 3. 页签：胶囊化，激活有底色 ---------- */
.tab {
  border-radius: var(--r-sm) var(--r-sm) 0 0;
  font-weight: 500;
  position: relative;
  transition: color var(--dur-1) var(--ease), background var(--dur-1) var(--ease);
}
.tab:hover { color: var(--txt); background: var(--panel-3); }
.tab.active {
  color: var(--brand);
  font-weight: 650;
  border-bottom-color: var(--brand);
}
.tab.active::after {
  content: '';
  position: absolute;
  left: 16px; right: 16px; bottom: -1px;
  height: 2px;
  border-radius: var(--r-full);
  background: linear-gradient(90deg, var(--brand), var(--brand-600));
  box-shadow: 0 1px 4px rgba(43, 92, 217, .4);
}

/* ---------- 4. 面板/卡片：更柔的边、浮起感 ---------- */
.panel {
  border-radius: var(--r-lg);
  border-color: var(--line-2);
  box-shadow: var(--sh-2);
  transition: box-shadow var(--dur-2) var(--ease), transform var(--dur-2) var(--ease-out);
}
.panel:hover { box-shadow: var(--sh-3); }
.panel h3 {
  display: flex;
  align-items: center;
  gap: 8px;
  letter-spacing: .2px;
}
.panel h3::before {
  content: '';
  width: 4px; height: 15px;
  border-radius: var(--r-full);
  background: linear-gradient(180deg, var(--brand), var(--brand-600));
  flex: none;
}

/* ---------- 5. 按钮 ---------- */
.btn {
  border-radius: var(--r-sm);
  font-weight: 500;
  transition: all var(--dur-2) var(--ease);
}
.btn:hover { border-color: var(--line-strong); box-shadow: var(--sh-2); transform: translateY(-1px); }
.btn:active { transform: translateY(0); box-shadow: none; transition-duration: var(--dur-1); }

.btn.primary {
  background: linear-gradient(135deg, var(--brand) 0%, var(--brand-600) 100%);
  border-color: var(--brand-600);
  box-shadow: var(--sh-brand);
}
.btn.primary:hover {
  background: linear-gradient(135deg, var(--brand-600) 0%, var(--brand-700) 100%);
  box-shadow: 0 6px 18px -4px rgba(43, 92, 217, .5);
  transform: translateY(-1px);
}
.btn.primary:active { transform: translateY(0); box-shadow: var(--sh-brand); }

.btn.danger:hover { background: var(--err); border-color: var(--err); color: #fff; }
.btn.ghost:hover { color: var(--brand); border-color: var(--brand-100); background: var(--brand-50); }

/* 键盘可达性：focus-visible 统一焦点环 */
.btn:focus-visible,
.tab:focus-visible,
input:focus-visible,
select:focus-visible,
textarea:focus-visible {
  outline: 2px solid var(--brand);
  outline-offset: 2px;
}

/* ---------- 6. 输入控件 ---------- */
.field input:hover,
.field select:hover,
.field textarea:hover {
  border-color: var(--line-strong);
}
.field input:focus,
.field select:focus,
.field textarea:focus {
  border-color: var(--brand);
  box-shadow: 0 0 0 3.5px rgba(43, 92, 217, .13);
}

/* ---------- 7. 徽标 / chip：微渐变 + 描边 ---------- */
.badge, .chip {
  border: 1px solid transparent;
  transition: transform var(--dur-1) var(--ease);
}
.badge {
  background: linear-gradient(135deg, var(--brand-50), var(--brand-100));
  border-color: var(--brand-100);
}
.chip:hover { transform: translateY(-1px); }

/* ---------- 8. 表格：表头底色 + 行 hover ---------- */
table th {
  background: var(--panel-2);
  font-weight: 600;
}
table tbody tr {
  transition: background var(--dur-1) var(--ease);
}
table tbody tr:hover { background: var(--panel-3); }

/* ---------- 9. 弹层 / 轻提示：更深的浮起 ---------- */
.core-modal .cm-box {
  border-radius: var(--r-lg);
  box-shadow: var(--sh-4);
}
.toast {
  border-radius: var(--r-md);
  box-shadow: var(--sh-4);
  backdrop-filter: blur(6px);
}

/* ---------- 10. 数字更易读 ---------- */
.tabular, td.num, td.n, .ri-tval, .cs-v, .kpi-c .val {
  font-variant-numeric: tabular-nums;
}

/* ---------- 11. 勾选框 / 单选：品牌色（亮色主题缺全局 accent） ---------- */
input[type="checkbox"], input[type="radio"] { accent-color: var(--brand); }

/* ---------- 12. 链接：默认色 + 悬停下划线（低优先级，不覆盖已有类样式） ---------- */
a { color: var(--brand); text-decoration: none; }
a:hover { color: var(--brand-700); text-decoration: underline; text-underline-offset: 3px; }

/* ---------- 13. 分隔线 / 面板内图片 / 空状态微调 ---------- */
hr { border: 0; border-top: 1px solid var(--line); margin: var(--s5) 0; opacity: .8; }
.panel img { border-radius: var(--r-sm); }
.empty { border-radius: var(--r-lg); }

/* ---------- 14. 无障碍：尊重系统「减少动态效果」设置 ---------- */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: .01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .01ms !important;
    scroll-behavior: auto !important;
  }
}

/* ---------- 15. 可点击徽标（badge-link）：顶栏主体/风险/版本徽标有去处 ---------- */
.badge.badge-link {
  cursor: pointer;
  transition: transform var(--dur-1) var(--ease), box-shadow var(--dur-2) var(--ease), border-color var(--dur-1) var(--ease);
}
.badge.badge-link:hover {
  transform: translateY(-1px);
  box-shadow: var(--sh-2);
  border-color: var(--brand);
}
.badge.badge-link:active { transform: translateY(0); box-shadow: none; }
.chip.tn-link {
  cursor: pointer;
  transition: transform var(--dur-1) var(--ease), box-shadow var(--dur-2) var(--ease), border-color var(--dur-1) var(--ease);
}
.chip.tn-link:hover {
  transform: translateY(-1px);
  box-shadow: var(--sh-2);
  border-color: var(--brand);
}